- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae
- ultricies leo. Cras sodales lacinia sagittis. Aliquam viverra, risus quis
- imperdiet euismod, libero lacus blandit tortor, vel tristique est sapien sed
- urna. Phasellus convallis auctor leo sed volutpat. Sed vel arcu suscipit,
- porta augue et, vehicula felis. Pellentesque at pulvinar velit. Phasellus
- lacus metus, dictum vel ultricies eu, rutrum eu nibh. Curabitur at dapibus
- ligula. Nam nulla massa, egestas vitae urna a, maximus aliquam leo.
- Suspendisse condimentum condimentum nunc, eu pulvinar tellus convallis sed.
- Praesent non mauris quis diam feugiat gravida nec porta ipsum. Proin elementum
- nibh eu tellus porta, sed rhoncus felis dictum. Nullam mattis purus at urna
- convallis vulputate. Sed aliquet maximus varius. Sed aliquet mi eget arcu
- ullamcorper tempor. Etiam condimentum fermentum lacus, sed ultricies velit
- scelerisque id.
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
At the bottom these open upwards
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae
- ultricies leo. Cras sodales lacinia sagittis. Aliquam viverra, risus quis
- imperdiet euismod, libero lacus blandit tortor, vel tristique est sapien sed
- urna. Phasellus convallis auctor leo sed volutpat. Sed vel arcu suscipit,
- porta augue et, vehicula felis. Pellentesque at pulvinar velit. Phasellus
- lacus metus, dictum vel ultricies eu, rutrum eu nibh. Curabitur at dapibus
- ligula. Nam nulla massa, egestas vitae urna a, maximus aliquam leo.
- Suspendisse condimentum condimentum nunc, eu pulvinar tellus convallis sed.
- Praesent non mauris quis diam feugiat gravida nec porta ipsum. Proin elementum
- nibh eu tellus porta, sed rhoncus felis dictum. Nullam mattis purus at urna
- convallis vulputate. Sed aliquet maximus varius. Sed aliquet mi eget arcu
- ullamcorper tempor. Etiam condimentum fermentum lacus, sed ultricies velit
- scelerisque id.
-
+
-
+
+
+
+
+ Open Small Modal
-
+
+
+
+ It should expand downwards within a space too small for the popover content
+
+
-
-
-
-
-
+
+
+
+ A good testing cheat to test if the dropdown opens above or below the target is
+ to anchor the developer tools window to the bottom and slide it up and down to
+ reduce window size.
+
\ No newline at end of file
diff --git a/apps/prs/angular/src/routes/bugs/3498/bug3498.component.ts b/apps/prs/angular/src/routes/bugs/3498/bug3498.component.ts
new file mode 100644
index 0000000000..7c60ce393a
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3498/bug3498.component.ts
@@ -0,0 +1,17 @@
+import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import {
+ GoabFormItem,
+ GoabInput,
+ GoabRadioGroup,
+ GoabRadioItem,
+} from "@abgov/angular-components";
+
+
+@Component({
+ standalone: true,
+ selector: "abgov-bug3498",
+ templateUrl: "./bug3498.component.html",
+ imports: [CommonModule, GoabFormItem, GoabInput, GoabRadioGroup, GoabRadioItem],
+})
+export class Bug3498Component {}
diff --git a/apps/prs/angular/src/routes/bugs/3505/bug3505.component.html b/apps/prs/angular/src/routes/bugs/3505/bug3505.component.html
new file mode 100644
index 0000000000..afa988869d
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3505/bug3505.component.html
@@ -0,0 +1,17 @@
+
+ Bug 3505 - Link icon click behavior
+
+
+ Click the leading icon, trailing icon, or link text. All should open the same target.
+
+
+
+ Press Tab to move focus to the link. The link should show a single outer focus
+ outline on the component, and the internal anchor text should not show its own
+ separate focus outline.
+
+
+
+ Alberta.ca (icon click test)
+
+
\ No newline at end of file
diff --git a/apps/prs/angular/src/routes/bugs/3505/bug3505.component.ts b/apps/prs/angular/src/routes/bugs/3505/bug3505.component.ts
new file mode 100644
index 0000000000..d273e7be62
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3505/bug3505.component.ts
@@ -0,0 +1,10 @@
+import { Component } from "@angular/core";
+import { GoabBlock, GoabLink, GoabText } from "@abgov/angular-components";
+
+@Component({
+ standalone: true,
+ selector: "abgov-bug3505",
+ templateUrl: "./bug3505.component.html",
+ imports: [GoabBlock, GoabLink, GoabText],
+})
+export class Bug3505Component {}
\ No newline at end of file
diff --git a/apps/prs/angular/src/routes/bugs/3607/bug3607.component.html b/apps/prs/angular/src/routes/bugs/3607/bug3607.component.html
new file mode 100644
index 0000000000..d77f9752d7
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3607/bug3607.component.html
@@ -0,0 +1,108 @@
+
+
3607 Radio and Checkbox Interaction Area
+
Version 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Help text with a link.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Version 2 (Experimental)
+
Regular size
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Help text with a link.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Compact size
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Help text with a link.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/prs/angular/src/routes/bugs/3607/bug3607.component.ts b/apps/prs/angular/src/routes/bugs/3607/bug3607.component.ts
new file mode 100644
index 0000000000..cb422e4e98
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3607/bug3607.component.ts
@@ -0,0 +1,27 @@
+import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import {
+ GoabCheckbox,
+ GoabCheckboxList,
+ GoabFormItem,
+ GoabInput,
+ GoabRadioGroup,
+ GoabRadioItem,
+} from "@abgov/angular-components";
+
+
+@Component({
+ standalone: true,
+ selector: "abgov-bug3607",
+ templateUrl: "./bug3607.component.html",
+ imports: [
+ CommonModule,
+ GoabCheckbox,
+ GoabCheckboxList,
+ GoabFormItem,
+ GoabInput,
+ GoabRadioGroup,
+ GoabRadioItem,
+ ],
+})
+export class Bug3607Component {}
diff --git a/apps/prs/angular/src/routes/bugs/3614/bug3614.component.html b/apps/prs/angular/src/routes/bugs/3614/bug3614.component.html
new file mode 100644
index 0000000000..1362916ceb
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3614/bug3614.component.html
@@ -0,0 +1,136 @@
+Bug #3614: IconButton Hitboxes
+
+
+
+
+
+ View on GitHub
+
+
+
+ Icon buttons at 2xsmall and xsmall sizes do not render as
+ square buttons - they show as weird rounded rectangles. The clickable area has a
+ non-square aspect ratio, which is inconsistent with the larger sizes
+ (small, medium, large, xlarge)
+ that all render as squares.
+
+
+
+
+
+
+Test Cases
+
+Test 1: Named sizes (2xsmall to xlarge)
+
+ All sizes should render as square buttons with consistent aspect ratios.
+
+
+
+
+
+
+
+
+
+
+Test 2: Numeric sizes (1 to 6)
+All numeric sizes should also render as square buttons.
+
+
+
+
+
+
+
+
+
+Test 3: Other Components that use IconButton
+
+ Testing various components that use IconButton internally. Verify that the icon buttons
+ within these components render with correct square hitboxes.
+
+
+Dropdown
+
+ The dropdown toggle button should have a properly sized square hitbox.
+
+
+
+
+
+
+
+
+
+Filter Chips
+
+ The v2 FilterChip uses IconButton. The close/remove icon button on each chip should look
+ normal.
+
+
+ @for (chip of chips; track chip) {
+
+ }
+
+
+Menu Button
+
+ The dropdown arrow icon button should have a square hitbox.
+
+
+
+
+
+
+
+
+
+Modal
+
+ The close icon button in the modal header should be a square hitbox.
+
+
+ Open Modal
+
+
+ Check that the close (X) icon button in the top-right corner has a square hitbox.
+
+
+
+ Close
+
+
+
+Input with Trailing Icon
+The trailing icon button should have a square hitbox.
+
+
+
diff --git a/apps/prs/angular/src/routes/bugs/3614/bug3614.component.ts b/apps/prs/angular/src/routes/bugs/3614/bug3614.component.ts
new file mode 100644
index 0000000000..a5c3da7f7f
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3614/bug3614.component.ts
@@ -0,0 +1,51 @@
+import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import {
+ GoabBlock,
+ GoabButton,
+ GoabDetails,
+ GoabDivider,
+ GoabDropdown,
+ GoabDropdownItem,
+ GoabIconButton,
+ GoabInput,
+ GoabLink,
+ GoabMenuAction,
+ GoabMenuButton,
+ GoabModal,
+ GoabText,
+ GoabFilterChip,
+} from "@abgov/angular-components";
+
+@Component({
+ standalone: true,
+ selector: "abgov-bug3614",
+ templateUrl: "./bug3614.component.html",
+ imports: [
+ CommonModule,
+ GoabBlock,
+ GoabButton,
+ GoabDetails,
+ GoabDivider,
+ GoabDropdown,
+ GoabDropdownItem,
+ GoabIconButton,
+ GoabInput,
+ GoabLink,
+ GoabMenuAction,
+ GoabMenuButton,
+ GoabModal,
+ GoabText,
+ GoabFilterChip,
+ ],
+})
+export class Bug3614Component {
+ dropdownValue = "";
+ inputValue = "";
+ modalOpen = false;
+ chips = ["Alpha", "Beta", "Gamma"];
+
+ removeChip(chip: string) {
+ this.chips = this.chips.filter((c) => c !== chip);
+ }
+}
diff --git a/apps/prs/angular/src/routes/bugs/3685/bug3685.component.html b/apps/prs/angular/src/routes/bugs/3685/bug3685.component.html
new file mode 100644
index 0000000000..431307ddeb
--- /dev/null
+++ b/apps/prs/angular/src/routes/bugs/3685/bug3685.component.html
@@ -0,0 +1,230 @@
+
+
3685 - Checkbox & Radio: Reveal width not aligned with item
With sortMode="multi", click columns to add them to sort order (up to 2).
+
Current sort: {{ formatSorts(multiSorts) }}
+
+
+
+
+
+ Name
+
+
+ Department
+
+
+ Salary
+
+
+
+
+ @for (row of multiSorted; track row.id) {
+
+
{{ row.name }}
+
{{ row.department }}
+
{{ formatCurrency(row.salary) }}
+
+ }
+
+
+
+
+
+
Test 3: Multi Initial Sort (declarative)
+
Two initial sorts declared on headers: Department ascending (primary), Salary descending (secondary).
+Use direction + sortOrder on each header to set priority.
+ Feature 3398: Work Side Menu Group open prop
+
+ Use the button below to toggle the side menu group open and closed.
+
+
+ Scenario 1: Open and close a group
+ The button should toggle the group open and closed.
+
+
+
+
+
+
+
+ {{ groupOpen ? "Close group" : "Open group" }}
+
+
+
+
+
+
+
+
+ Scenario 2: Open a group with a current item
+
+ The Features group should be open because it has a current menu item. The
+ Bugs group should remain closed.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/prs/angular/src/routes/features/feat3398/feat3398.component.ts b/apps/prs/angular/src/routes/features/feat3398/feat3398.component.ts
new file mode 100644
index 0000000000..f14458b57f
--- /dev/null
+++ b/apps/prs/angular/src/routes/features/feat3398/feat3398.component.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import {
+ GoabButton,
+ GoabText,
+ GoabWorkSideMenu,
+ GoabWorkSideMenuGroup,
+ GoabWorkSideMenuItem,
+} from "@abgov/angular-components";
+
+@Component({
+ standalone: true,
+ selector: "abgov-feat3398",
+ templateUrl: "./feat3398.component.html",
+ imports: [
+ CommonModule,
+ GoabButton,
+ GoabText,
+ GoabWorkSideMenu,
+ GoabWorkSideMenuGroup,
+ GoabWorkSideMenuItem,
+ ],
+})
+export class Feat3398Component {
+ groupOpen = false;
+
+ toggleGroup(): void {
+ this.groupOpen = !this.groupOpen;
+ }
+}
diff --git a/apps/prs/angular/src/routes/features/feat3407SkipOnFocusTab/feat3407-skip-on-focus-tab.component.html b/apps/prs/angular/src/routes/features/feat3407SkipOnFocusTab/feat3407-skip-on-focus-tab.component.html
new file mode 100644
index 0000000000..9ec6cb352f
--- /dev/null
+++ b/apps/prs/angular/src/routes/features/feat3407SkipOnFocusTab/feat3407-skip-on-focus-tab.component.html
@@ -0,0 +1,49 @@
+
+ #3407: Skip Focus on Initial Tab Load
+
+ Testing skipFocus on initial page load (no visible focus ring) and
+ segmented tabpanel fixes (no focus ring or tab stop on empty content).
+
+
+
+
+
+
+ Test 1: Skip focus on initial load
+
+ When the page loads, the active tab should NOT have a visible focus
+ ring. Reload the page and confirm no tab shows a focus outline
+ until you interact via keyboard.
+
+
+
+ Not initially selected.
+
+
+
+ This tab is initially active via initialTab=2. It should NOT
+ have a focus ring on page load.
+
+
+
+ Not initially selected.
+
+
+
+
+
+ Test 2: When no initialize Tabs
+
+
+ Default tabs — check URL changes when clicking tabs.
+
+
+ The URL hash should update to reflect the active tab.
+
+
+ Resize browser to mobile width — tabs should stack vertically.
+
+
+
+
+
diff --git a/apps/prs/angular/src/routes/features/feat3407SkipOnFocusTab/feat3407-skip-on-focus-tab.component.ts b/apps/prs/angular/src/routes/features/feat3407SkipOnFocusTab/feat3407-skip-on-focus-tab.component.ts
new file mode 100644
index 0000000000..471a109252
--- /dev/null
+++ b/apps/prs/angular/src/routes/features/feat3407SkipOnFocusTab/feat3407-skip-on-focus-tab.component.ts
@@ -0,0 +1,16 @@
+import { Component } from "@angular/core";
+import {
+ GoabBlock,
+ GoabText,
+ GoabDivider,
+ GoabTabs,
+ GoabTab,
+} from "@abgov/angular-components";
+
+@Component({
+ standalone: true,
+ selector: "abgov-feat3407-skip-on-focus-tab",
+ templateUrl: "./feat3407-skip-on-focus-tab.component.html",
+ imports: [GoabBlock, GoabText, GoabDivider, GoabTabs, GoabTab],
+})
+export class Feat3407SkipOnFocusTabComponent {}
diff --git a/apps/prs/angular/src/routes/features/feat3407StackOnMobile/feat3407-stack-on-mobile.component.html b/apps/prs/angular/src/routes/features/feat3407StackOnMobile/feat3407-stack-on-mobile.component.html
new file mode 100644
index 0000000000..37148d8b11
--- /dev/null
+++ b/apps/prs/angular/src/routes/features/feat3407StackOnMobile/feat3407-stack-on-mobile.component.html
@@ -0,0 +1,79 @@
+
+ #3407: orientation Prop
+
+ Testing orientation prop (controls mobile stacking behavior). orientation is
+ only available on goab-tabs.
+
+
+
+
+
+
+
+ Test 1: Experimental Tabs + orientation="auto" (default)
+
+
+ Experimental (v2) tabs that stack vertically on mobile (default behavior).
+ Resize browser to mobile width to verify tabs stack.
+
+
+
+ These tabs should stack vertically on mobile.
+
+
+ Vertical stacking on narrow screens.
+
+
+ Compare with Test 2 below.
+
+
+
+
+
+ Test 2: Experimental Tabs + orientation="horizontal"
+
+ Experimental (v2) tabs that stay horizontal on mobile. Resize browser to
+ mobile width to verify tabs remain in a row.
+
+
+
+ These tabs should stay horizontal on mobile.
+
+
+ No vertical stacking on narrow screens.
+
+
+ Useful when horizontal space is preferred.
+
+
+
+
+
+
+ Test 3: Segmented variant (always not stacked on mobile)
+
+
+ Segmented tabs stay horizontal on mobile by default (no prop needed). Resize
+ to mobile width to verify.
+
+
+
+
+
+
+
+
+
+ Test 4: Segmented + orientation="horizontal"
+
+ Segmented tabs with orientation explicitly set to "horizontal". Should remain
+ horizontal on mobile (same as default segmented behavior).
+
+
+
+
+
+
+
+
+
diff --git a/apps/prs/angular/src/routes/features/feat3407StackOnMobile/feat3407-stack-on-mobile.component.ts b/apps/prs/angular/src/routes/features/feat3407StackOnMobile/feat3407-stack-on-mobile.component.ts
new file mode 100644
index 0000000000..6ad2ec1509
--- /dev/null
+++ b/apps/prs/angular/src/routes/features/feat3407StackOnMobile/feat3407-stack-on-mobile.component.ts
@@ -0,0 +1,16 @@
+import { Component } from "@angular/core";
+import {
+ GoabBlock,
+ GoabText,
+ GoabDivider,
+ GoabTabs,
+ GoabTab,
+} from "@abgov/angular-components";
+
+@Component({
+ standalone: true,
+ selector: "abgov-feat3407-stack-on-mobile",
+ templateUrl: "./feat3407-stack-on-mobile.component.html",
+ imports: [GoabBlock, GoabText, GoabDivider, GoabTabs, GoabTab],
+})
+export class Feat3407StackOnMobileComponent {}
diff --git a/apps/prs/angular/src/routes/features/feat3478/feat3478.component.html b/apps/prs/angular/src/routes/features/feat3478/feat3478.component.html
new file mode 100644
index 0000000000..de6fa413cd
--- /dev/null
+++ b/apps/prs/angular/src/routes/features/feat3478/feat3478.component.html
@@ -0,0 +1,370 @@
+
+ Feature #3478: Popover API Rewrite
+ Test Cases
+
+
+ Calendar
+
+
+
+
+
+ Popover
+
+ Popover with Close Button (Focus Trap test)
+
+ Open the popover and verify Tab key cycles focus within the popover content (focus
+ trap). Click the Close button inside to close.
+
+
+
+ Open Popover
+
+
This popover has buttons inside. Tab between them to test focus trap.
+
+
+ Action
+
+
+ Close Popover
+
+
+
+
+ Popover Playground
+
+ Modify popover properties dynamically to verify positioning, sizing, and padding work
+ correctly after the rewrite.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Menu Button
+
+ Test Menu Button: Press Enter and arrow up and down see whether Menu Button works as
+ expected.
+
+
+
+ Short actions:
+
+
+
+
+
+
+ Many actions with long text:
+
+
+
+
+
+
+
+
+
+
+
+
+ Dropdown
+
+ Standard Dropdown
+
+ Dropdown controls its popover by setting open="true"/"false". Click it to verify the
+ option list appears. If the open prop is missing, the Dropdown will not show its
+ options.
+
+
+
+
+
+
+ Selected: {{ modalDropdownValue || "(none)" }}
+
+ Filterable Dropdown
+
+ Focus the input and press Space — it should type a space, not toggle the popover.
+
+
+
+
+
+
+
+
+
+
+ Edge Cases
+
+
+ Test 1: Popover in Modal (z-index fix)
+
+ Previously, position: absolute and z-index: 99 on the popover content caused dropdowns
+ and date pickers inside modals to render behind or outside the modal. The native
+ Popover API renders in the top layer, fixing this. Click the button below to open a
+ modal with a Dropdown and DatePicker inside.
+
+ Open Modal with Popover Components
+
+
+ The Dropdown and DatePicker below should render their popovers correctly above the
+ modal — not clipped or hidden behind it.
+
+
+
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+ nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+ deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus
+ error sit voluptatem accusantium doloremque laudantium.
+
+
+
+
+
+
+
+
+
+
+
+
+ Test 2: AppHeaderMenu closes on navigation
+
+ The "Services" and "Account" menus in the header above use
+ goab-app-header-menu, which uses goa-popover internally. Open a menu, then click a
+ link inside it. The page content will change but the header stays — verify the menu
+ popover closed. This is to test handleUrlChange inside the Popover.svelte
+
+
+
+ Test 3: Multiple Popovers
+
+ Opening one popover should close others (popover="auto" behavior).
+
+
+
+ Popover A
+ Content A
+
+
+ Popover B
+ Content B
+
+
+ Popover C
+ Content C
+
+
+
+
+ Test 4: #3499 Dismissing Notification breaks AppHeaderMenu
+
+ When a Notification banner is dismissed (removed from the DOM), it should not break
+ the AppHeaderMenu popover. Steps to reproduce: dismiss the notification below, then
+ try opening the AppHeaderMenu in the header. It should still work.
+
+
+ Menu Item 1
+ Menu Item 2
+ Menu Item 3
+
+ @if (showBanner) {
+
+ Dismiss this notification, then verify AppHeaderMenu still works.
+
+ }
+ @if (!showBanner) {
+
+ Notification dismissed. Now open the AppHeaderMenu above — it should still function
+ correctly.
+
+
+ Reset notification
+
+ }
+
+
+ Test 5: #3067 Focus issues with Popover
+
+ After closing a popover with Escape, focus should return to the trigger element.
+ Steps: 1) Focus the button below, 2) Press Enter to open the popover, 3) Press Escape
+ to close, 4) The button should still be focused (yellow border visible), 5) Press Tab
+ — the next interactive element should be selected, not the popover.
+
+
+
+ Focus Test Button
+ Press Escape to close. Focus should return to the button.
+
+ Next Focusable Element
+
+
+
+ Test 6: #3062 Popover maxWidth not respected above a button
+
+ When a Popover is placed directly above a goab-button or goab-input in the DOM, it
+ should still respect the maxWidth property. Both popovers below should have the same
+ width (default 320px). Previously the one above the button would ignore maxWidth.
+
+
+
+
+ Show Popover
+
+ This popover is above the button. It should respect maxWidth (320px).
+
+
+ Submit Form
+
+
+
+ Popover Test
+
+ This popover is below the button. It should also respect maxWidth
+ (320px).
+
+
+
+ Letter-spacing design tokens have been applied to all heading sizes. Inspect each
+ heading below and verify that letter-spacing is set via the
+ corresponding CSS custom property.
+
+
+
+
+
+
Explicit size prop
+
Each goab-text below uses an explicit size prop. Resize to mobile to verify the mobile tokens also apply.
+ Feature 3544: Optional Side Menu Icons
+
+ Both menus below use the same structure in primary content: one item and one group.
+ The left menu includes icons, and the right menu does not.
+
+
+
+ V2 Checkbox Fixes
+
+
+ This page demonstrates fixes for checkbox spacing issues:
+
+
+
+ 1. Checkbox auto-margin removed - Checkboxes no longer have default
+ bottom margin, fixing alignment in tables
+
+
+ 2. CheckboxList gap - CheckboxList now controls its own spacing
+ between items using gap: var(--goa-space-m)
+
+
+
+
+
+
+
+ Test 1: Checkbox in Table
+
+
+ Previously, checkboxes in tables had unwanted bottom margin causing misalignment. Now
+ they align properly with the row content.
+
+
+
+
+
+
+
+
+
Name
+
Email
+
Status
+
+
+
+ @for (row of tableData; track row.id) {
+
+
+
+
+
{{ row.name }}
+
{{ row.email }}
+
{{ row.status }}
+
+ }
+
+
+
+
+ Selected: {{ selectedRows.size }} of {{ tableData.length }} rows
+
+
+
+
+
+
+ Test 2: CheckboxList Spacing
+
+
+ CheckboxList now uses gap: var(--goa-space-m) for consistent spacing between items.
+ Previously relied on individual checkbox margins.
+
+
+
+
+
+
+
+
+
+ Selected: {{ checkboxListValue.length > 0 ? checkboxListValue.join(", ") : "none" }}
+
+
+
+
+
+
+ Test 3: V2 Compact CheckboxList
+
+
+ Compact checkbox list uses smaller gap (var(--goa-space-s)) between items.
+
+
+
+
+
+
+
+
+
+ Selected: {{ compactListValue.length > 0 ? compactListValue.join(", ") : "none" }}
+
+
+
+
+
+
+ Test 4: V2 Standalone Checkbox (No Auto-Margin)
+
+
+ V2 checkboxes no longer have default bottom margin. Spacing should be controlled by
+ the parent layout.
+
+
+
+
+
+
+
+
+
+ Notice: No extra margin between checkboxes - spacing controlled by goab-block gap.
+
+
+
+
+
+ V1 Regression Tests
+
+ These tests verify V1 checkboxes still behave correctly after the V2 spacing changes.
+
+
+
+
+ Test 5: V1 Standalone Checkboxes (Auto-Margin)
+
+
+ V1 checkboxes should still have their default bottom margin (space-m).
+
+
+
+
+
+
+
+
+
+
+
+ Test 6: V1 CheckboxList (No Gap Change)
+
+
+ V1 checkbox lists should look the same as before - individual checkbox margins control
+ spacing, list gap is 0.
+
+
+
+
+
+
+
+
+
+ Selected: {{ v1ListValue.length > 0 ? v1ListValue.join(", ") : "none" }}
+
+
diff --git a/apps/prs/angular/src/routes/features/featV2Checkbox/featV2Checkbox.component.ts b/apps/prs/angular/src/routes/features/featV2Checkbox/featV2Checkbox.component.ts
new file mode 100644
index 0000000000..b0bea4f4a8
--- /dev/null
+++ b/apps/prs/angular/src/routes/features/featV2Checkbox/featV2Checkbox.component.ts
@@ -0,0 +1,79 @@
+import { Component } from "@angular/core";
+import {
+ GoabCheckbox,
+ GoabCheckboxList,
+ GoabText,
+ GoabTable,
+ GoabBlock,
+ GoabDivider,
+ GoabCheckboxOnChangeDetail,
+ GoabCheckboxListOnChangeDetail,
+} from "@abgov/angular-components";
+
+@Component({
+ standalone: true,
+ selector: "abgov-feat-v2-checkbox",
+ templateUrl: "./featV2Checkbox.component.html",
+ imports: [
+ GoabCheckbox,
+ GoabCheckboxList,
+ GoabText,
+ GoabTable,
+ GoabBlock,
+ GoabDivider,
+ ],
+})
+export class FeatV2CheckboxComponent {
+ selectedRows: Set = new Set();
+ checkboxListValue: string[] = [];
+ compactListValue: string[] = [];
+ v1ListValue: string[] = [];
+
+ tableData = [
+ { id: "row1", name: "Alice Johnson", email: "alice@example.com", status: "Active" },
+ { id: "row2", name: "Bob Smith", email: "bob@example.com", status: "Pending" },
+ { id: "row3", name: "Carol Davis", email: "carol@example.com", status: "Active" },
+ ];
+
+ get allSelected(): boolean {
+ return this.selectedRows.size === this.tableData.length;
+ }
+
+ get someSelected(): boolean {
+ return this.selectedRows.size > 0 && this.selectedRows.size < this.tableData.length;
+ }
+
+ isRowSelected(rowId: string): boolean {
+ return this.selectedRows.has(rowId);
+ }
+
+ toggleSelectAll(event: GoabCheckboxOnChangeDetail) {
+ if (event.checked) {
+ this.selectedRows = new Set(this.tableData.map((row) => row.id));
+ } else {
+ this.selectedRows = new Set();
+ }
+ }
+
+ toggleRow(rowId: string, event: GoabCheckboxOnChangeDetail) {
+ const newSelected = new Set(this.selectedRows);
+ if (event.checked) {
+ newSelected.add(rowId);
+ } else {
+ newSelected.delete(rowId);
+ }
+ this.selectedRows = newSelected;
+ }
+
+ onCheckboxListChange(event: GoabCheckboxListOnChangeDetail) {
+ this.checkboxListValue = event.value;
+ }
+
+ onCompactListChange(event: GoabCheckboxListOnChangeDetail) {
+ this.compactListValue = event.value;
+ }
+
+ onV1ListChange(event: GoabCheckboxListOnChangeDetail) {
+ this.v1ListValue = event.value;
+ }
+}
diff --git a/apps/prs/react/src/app/all.tsx b/apps/prs/react/src/app/all.tsx
index 02c4a0a3dd..49163dbaf4 100644
--- a/apps/prs/react/src/app/all.tsx
+++ b/apps/prs/react/src/app/all.tsx
@@ -237,9 +237,9 @@ export function AllComponents() {
-
-
-
+
+
+
{/* Component ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */}
@@ -3866,7 +3866,7 @@ export function AllComponents() {
Side menu item}
+ meta={}
>
Side menu heading
diff --git a/apps/prs/react/src/app/app.tsx b/apps/prs/react/src/app/app.tsx
index c63a1c7200..04194782fb 100644
--- a/apps/prs/react/src/app/app.tsx
+++ b/apps/prs/react/src/app/app.tsx
@@ -1,105 +1,374 @@
-import { Link, Outlet } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
import {
GoabAppFooter,
GoabAppHeader,
+ GoabAppHeaderMenu,
GoabMicrositeHeader,
GoabOneColumnLayout,
- GoabSideMenu,
- GoabSideMenuGroup,
+ GoabWorkSideMenu,
+ GoabWorkSideMenuGroup,
+ GoabWorkSideMenuItem,
} from "@abgov/react-components";
+
import "@abgov/style";
export function App() {
+ const navigate = useNavigate();
+
return (
-
+
-
+
+ {/* Verify AppHeaderMenu still works after Popover API refactor (PR #3478) */}
+
+ bug2720
+ Popover Test
+ Dropdown expanding
+ ...inside Container
+
+ Super long menu item to test overflow handling lorem ipsum dolor sit amet
+
+
+
+ Bug 3450
+ Bug 3450
+
+ Super long menu item to test overflow handling lorem ipsum dolor sit amet
+
+
+
+ Manage account
+ Request new staff account
+ System admin
+
+ Sign out
+
+
+ Super long menu item to test overflow handling lorem ipsum dolor sit amet
+
+
+
-
-
-
- 2152 Icon Custom Alignment
- 2331 Block and Tab Dynamic Data
- 2393 Popover Not Appearing
- 2404 Input Angular Icon Button
- 2408 Form Stepper Incomplete Rendering
- 2459 File Upload Card TestId
- 2473 DatePicker Ordinal Suffixes
- 2502 Native Dropdown Height
- 2529 Input Width Generation
- 2547 Popover Hidden Near Notification
- 2655 Dropdown/DatePicker in Modal
- 2720 Tabs Change via Link
- 2721 Text Tag Margin
- 2750 Year Select Sorting
- 2768 Enable/Disable Components
- 2782 Disabled Inputs Hidden
- 2789 Width Rem Measurements
- 2821 Table Header Sorting Toggle
- 2837 InputNumber Leading/Trailing Content
- 2839 Button State After Click
- 2849 Filterable Dropdown Keyboard
- 2852 Filterable Dropdown Space Key
- 2873 Drawer Scrolling Focus
- 2878 DatePicker Input onChange
- 2892 Input Width Calculations
- 2922 Form Stepper Vertical
- 2943 Drawer Text Components
- 2948 Modal Heading Spacing
- 2977 OnChangeDetails Event Missing
- 3118 Text Component ID
- 3201 Input Component Events
- 3215 Drawer Initial Height
- 3232 GoabText Tag Size
- 3248 Dropdown Dynamic Children Sync
- 3275 Can't unset month
- 3322 App Header Menu Hover
- 3281 GoabText p tag margin issues
- 3337 Input autocomplete styling
- 3279 Work Side Menu Key Nav
- 3384 v2 Table Border
-
-
- 1383 Button Filled Icons
- 1547 Tooltip Multiline
- 1813 DatePicker Width Properties
- 1908 Linear Progress
- 2054 MaxWidth Support
- 2267 Checkbox List
- 2328 Container Height Property
- 2361 Radio/Checkbox Clickable Area
- 2440 MenuButton Icon
- 2469 Push Drawer
- 2492 TextArea onBlur
- 2609 Data Table Base Component
- 2611 Segmented Tab
- 2611 Disabled Tab
- 2682 DatePicker Issues
- 2722 Input Text-Align
- 2730 Temporary Notification Controller
- 2829 Modal ARIA Live Region
- 2877 Badge Types and Custom Icon
- 3102 MenuButton Width
- 3137 Work Side Menu Group
- 3241 V2 Experimental Wrappers
- v2 header icons
- 3306 Custom slug value for tabs
- 3370 Clear calendar day selection
-
-
- A
-
-
-
+ navigate(path)}
+ primaryContent={
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ }
+ />
diff --git a/apps/prs/react/src/main.tsx b/apps/prs/react/src/main.tsx
index 1e7ccef42e..59a0862e04 100644
--- a/apps/prs/react/src/main.tsx
+++ b/apps/prs/react/src/main.tsx
@@ -40,11 +40,20 @@ import { Bug3215Route } from "./routes/bugs/bug3215";
import { Bug3232Route } from "./routes/bugs/bug3232";
import { Bug3279Route } from "./routes/bugs/bug3279";
import { Bug3248Route } from "./routes/bugs/bug3248";
+import { Bug3273Route } from "./routes/bugs/bug3273";
+import { Bug3273Page2Route } from "./routes/bugs/bug3273-2";
import { Bug3275Route } from "./routes/bugs/bug3275";
import { Bug3322Route } from "./routes/bugs/bug3322";
import { Bug3281Route } from "./routes/bugs/bug3281";
import { Bug3337Route } from "./routes/bugs/bug3337";
import { Bug3384Route } from "./routes/bugs/bug3384";
+import { Bug3450Route } from "./routes/bugs/bug3450";
+import { Bug3497Route } from "./routes/bugs/bug3497";
+import { Bug3498Route } from "./routes/bugs/bug3498";
+import { Bug3607Route } from "./routes/bugs/bug3607";
+import { Bug3505Route } from "./routes/bugs/bug3505";
+import { Bug3614Route } from "./routes/bugs/bug3614";
+import { Bug3685Route } from "./routes/bugs/bug3685";
import { EverythingRoute } from "./routes/everything";
import { EverythingBRoute } from "./routes/everything-b";
@@ -70,10 +79,22 @@ import { Feat2877Route } from "./routes/features/feat2877";
import { Feat3102Route } from "./routes/features/feat3102";
import { Feat3241Route } from "./routes/features/feat3241";
import { FeatV2IconsRoute } from "./routes/features/featV2Icons";
+import { Feat3407SkipOnFocusTabRoute } from "./routes/features/feat3407SkipOnFocusTab";
+import { Feat3407StackOnMobileRoute } from "./routes/features/feat3407StackOnMobile";
+import { Feat3344Route } from "./routes/features/feat3344";
import { Feat3137Route } from "./routes/features/feat3137";
import { Feat3306Route } from "./routes/features/feat3306";
import { Feat2469Route } from "./routes/features/feat2469";
import { Feat3370Route } from "./routes/features/feat3370";
+import { Feat3396Route } from "./routes/features/feat3396";
+import { Feat3229Route } from "./routes/features/feat3229";
+import { FeatV2CheckboxRoute } from "./routes/features/featV2Checkbox";
+import { Feat3398Route } from "./routes/features/feat3398";
+import { Feat3478Route } from "./routes/features/feat3478";
+import { Feat2885Route } from "./routes/features/feat2885";
+import { Feat2885NavigationTabsRoute } from "./routes/features/feat2885-navigation-tabs";
+import { Feat3529Route } from "./routes/features/feat3529";
+import { Feat3544Route } from "./routes/features/feat3544";
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
@@ -120,11 +141,20 @@ root.render(
} />
} />
} />
+ } key={"bugs/3273"} />
+ } />
} />
} />
} />
} />
} />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
} />
} />
@@ -153,9 +183,32 @@ root.render(
} />
} />
} />
+ } />
+ } />
} />
} />
+ } />
+ }
+ />
+ }
+ />
+ } />
+ } />
+ } />
+ }
+ />
+ } />
+ } />
+
+ {/* Standalone route without App wrapper for full-page layout demos */}
+ } />
,
diff --git a/apps/prs/react/src/routes/bugs/bug2393.tsx b/apps/prs/react/src/routes/bugs/bug2393.tsx
index bac1671d4d..0467ee21a5 100644
--- a/apps/prs/react/src/routes/bugs/bug2393.tsx
+++ b/apps/prs/react/src/routes/bugs/bug2393.tsx
@@ -61,7 +61,7 @@ export function Bug2393Route() {
@@ -43,19 +60,14 @@ export function Bug2655Route() {
Open Modal
-
+
+
At the top these open downwards
-
-
-
-
-
-
@@ -66,7 +78,14 @@ export function Bug2655Route() {
-
+
+
At the bottom these open upwards
+
+
+
+
+
+
@@ -77,6 +96,41 @@ export function Bug2655Route() {
+
+
+ Open Small Modal
+
+
+
+
+
+ It should expand downwards within a space too small for the popover content
+
+
+
+
+
+
+
+
+
+
+ A good testing cheat to test if the dropdown opens above or below the target is
+ to anchor the developer tools window to the bottom and slide it up and down to
+ reduce window size.
+
+
+
+
+
+
+
+
+
);
}
diff --git a/apps/prs/react/src/routes/bugs/bug3273-2.tsx b/apps/prs/react/src/routes/bugs/bug3273-2.tsx
new file mode 100644
index 0000000000..67767d0c60
--- /dev/null
+++ b/apps/prs/react/src/routes/bugs/bug3273-2.tsx
@@ -0,0 +1,32 @@
+import { GoabSideMenu, GoabSideMenuGroup } from "@abgov/react-components";
+import { Link } from "react-router-dom";
+
+export function Bug3273Page2Route() {
+ return (
+
+
Bug 3273: Keep side menu group open
+
This page tests a nested side menu group.
+
+
Scenario two
+
+ When you select the Parent Item,
+
+ Then the Child Group will be closed,
+
+ And the Parent Group will be open.
+
+
+
+
+
+ Parent Item
+
+
+ Child Item
+
+
+
+
+
+ );
+}
diff --git a/apps/prs/react/src/routes/bugs/bug3273.tsx b/apps/prs/react/src/routes/bugs/bug3273.tsx
new file mode 100644
index 0000000000..29758ec00c
--- /dev/null
+++ b/apps/prs/react/src/routes/bugs/bug3273.tsx
@@ -0,0 +1,34 @@
+import { GoabSideMenu, GoabSideMenuGroup } from "@abgov/react-components";
+import { Link } from "react-router-dom";
+
+export function Bug3273Route() {
+ return (
+
+
Bug 3273: Keep side menu group open
+
This page tests a nested side menu group.
+
+
Scenario one
+
+ When you open the Child Group,
+
+ And you select the Child Item,
+
+ Then the Child Group will be open,
+
+ And the Parent Group will be open.
+
+
+
+
+
+ Parent Item
+
+
+ Child Item
+
+
+
+
+
+ );
+}
diff --git a/apps/prs/react/src/routes/bugs/bug3279.tsx b/apps/prs/react/src/routes/bugs/bug3279.tsx
index 44946ccf0b..ab1cc1de05 100644
--- a/apps/prs/react/src/routes/bugs/bug3279.tsx
+++ b/apps/prs/react/src/routes/bugs/bug3279.tsx
@@ -4,12 +4,10 @@ import {
GoabContainer,
GoabDetails,
GoabLink,
+ GoabWorkSideMenu,
+ GoabWorkSideMenuGroup,
+ GoabWorkSideMenuItem,
} from "@abgov/react-components";
-import {
- GoabxWorkSideMenu,
- GoabxWorkSideMenuGroup,
- GoabxWorkSideMenuItem,
-} from "@abgov/react-components/experimental";
export function Bug3279Route() {
const [open, setOpen] = useState(true);
@@ -26,7 +24,7 @@ export function Bug3279Route() {
Work Side Menu component.
-
-
-
+
-
-
+
-
-
-
+
+
-
-
-
-
+
-
-
-
-
+
+
+
+
>
}
/>
diff --git a/apps/prs/react/src/routes/bugs/bug3337.tsx b/apps/prs/react/src/routes/bugs/bug3337.tsx
index cd3723c4f0..6a674b68d4 100644
--- a/apps/prs/react/src/routes/bugs/bug3337.tsx
+++ b/apps/prs/react/src/routes/bugs/bug3337.tsx
@@ -1,5 +1,10 @@
-import { GoabText, GoabFormItem, GoabInput, GoabButton } from "@abgov/react-components";
-import { GoabxInput } from "@abgov/react-components/experimental";
+import {
+ GoabButton,
+ GoabFormItem,
+ GoabInput,
+ GoabText,
+} from "@abgov/react-components";
+
import { GoabInputOnBlurDetail } from "@abgov/ui-components-common";
import { useState } from "react";
@@ -31,8 +36,8 @@ export function Bug3337Route() {
autoComplete="name"
/>
-
-
+ inputBlur(e)}
diff --git a/apps/prs/react/src/routes/bugs/bug3384.tsx b/apps/prs/react/src/routes/bugs/bug3384.tsx
index 3b6a707869..0bc2d45740 100644
--- a/apps/prs/react/src/routes/bugs/bug3384.tsx
+++ b/apps/prs/react/src/routes/bugs/bug3384.tsx
@@ -1,16 +1,19 @@
-import { GoabBlock, GoabText } from "@abgov/react-components";
-import { GoabxTable } from "@abgov/react-components/experimental";
+import {
+ GoabBlock,
+ GoabTable,
+ GoabText,
+} from "@abgov/react-components";
export function Bug3384Route() {
return (
- Bug 3384 - GoabxTable Border
+ Bug 3384 - GoabTable Border
The below table should have a border with a border radius.
-
+
Service
@@ -39,7 +42,7 @@ export function Bug3384Route() {
+
+ Bug #3614: IconButton Hitboxes
+
+
+
+
+
+
+ View on GitHub
+
+
+
+ Icon buttons at 2xsmall and xsmall sizes do not
+ render as square buttons - they show as weird rounded rectangles. The
+ clickable area has a non-square aspect ratio, which is inconsistent with the
+ larger sizes (small, medium, large,{" "}
+ xlarge) that all render as squares.
+
+
+
+
+
+
+ Test Cases
+
+ Test 1: Named sizes (2xsmall to xlarge)
+
+ All sizes should render as square buttons with consistent aspect ratios.
+
+
+
+
+
+
+
+
+
+
+
+ Test 2: Numeric sizes (1 to 6)
+
+ All numeric sizes should also render as square buttons.
+
+
+
+
+
+
+
+
+
+
+ Test 3: Other Components that use IconButton
+
+
+ Testing various components that use IconButton internally. Verify that the icon
+ buttons within these components render with correct square hitboxes.
+
+
+
+ Dropdown
+
+
+ The dropdown toggle button should have a properly sized square hitbox.
+
+
+ setDropdownValue(detail.value as string)}
+ placeholder="Select an option"
+ width="250px"
+ >
+
+
+
+
+
+
+
+ Dropdown v2
+
+
+ The dropdown toggle button should have a properly sized square hitbox.
+
+
+ setDropdownValue(detail.value as string)}
+ placeholder="Select an option"
+ width="250px"
+ >
+
+
+
+
+
+
+ Filter Chips
+
+
+ The v2 FilterChip uses IconButton. The close/remove icon button on each chip
+ should look normal.
+
+
+ {chips.map((chip) => (
+ setChips((prev) => prev.filter((c) => c !== chip))}
+ />
+ ))}
+
+
+
+ Menu Button
+
+
+ The dropdown arrow icon button should have a square hitbox.
+
+
+
+
+
+
+
+
+
+
+ Modal
+
+
+ The close icon button in the modal header should be a square hitbox.
+
+
+ setModalOpen(true)}>
+ Open Modal
+
+ setModalOpen(false)}
+ actions={ setModalOpen(false)}>Close}
+ >
+
+ Check that the close (X) icon button in the top-right corner has a square
+ hitbox.
+
+
+
+
+
+ Input with Trailing Icon
+
+ The trailing icon button should have a square hitbox.
+
+ setInputValue(detail.value)}
+ trailingIcon="close"
+ trailingIconAriaLabel="Clear input"
+ onTrailingIconClick={() => setInputValue("")}
+ placeholder="The X is an icon button - check its hitbox!"
+ width="350px"
+ />
+
+
With sortMode="multi", click columns to add them to sort order (up to 2).
+
Current sort: {formatSorts(multiSorts)}
+
+ setMultiSorts(detail.sorts)}>
+
+
+
+ Name
+
+
+ Department
+
+
+ Salary
+
+
+
+
+ {multiSorted.map((row) => (
+
+
{row.name}
+
{row.department}
+
${row.salary.toLocaleString()}
+
+ ))}
+
+
+
+
+
+
Test 3: Multi Initial Sort (declarative)
+
Two initial sorts declared on headers: Department ascending (primary), Salary
+ descending (secondary). Use direction + sortOrder on each header to set priority.
+
Current sort: {formatSorts(test3Sorts)}
+
+ setTest3Sorts(detail.sorts)}
+ >
+
+
+
+ Name
+
+
+
+ Department
+
+
+
+
+ Salary
+
+
+
+
+
+ {test3Sorted.map((row) => (
+
+
{row.name}
+
{row.department}
+
${row.salary.toLocaleString()}
+
+ ))}
+
+
+
+ );
+}
+
+export default Feat3344Route;
diff --git a/apps/prs/react/src/routes/features/feat3396.tsx b/apps/prs/react/src/routes/features/feat3396.tsx
new file mode 100644
index 0000000000..d714066a53
--- /dev/null
+++ b/apps/prs/react/src/routes/features/feat3396.tsx
@@ -0,0 +1,67 @@
+/**
+ * Test page for Text component heading-2xs size
+ */
+import {
+ GoabBlock,
+ GoabText,
+ GoabDivider,
+ GoabDetails,
+ GoabLink,
+} from "@abgov/react-components";
+
+export function Feat3396Route() {
+ return (
+
+
+ Feature: Text heading-2xs size
+
+
+
+ View on GitHub
+
+
+
+ The Text component now supports heading-2xs from v2 design tokens.
+
+
+
+ V2 Design Tokens
+
+
+ heading-xs
+ heading-2xs (distinct from heading-xs)
+
+
+ V1 Design Tokens
+
+ heading-xs
+ heading-2xs (falls back to heading-xs)
+
+ Feature 3398: Work Side Menu Group open prop
+
+ Use the button below to toggle the side menu group open and closed.
+
+
+ Scenario 1: Open and close a group
+ The button should toggle the group open and closed.
+
+
+
+ Scenario 2: Open a group with a current item
+
+ The Features group should be open because it has a current menu item. The{" "}
+ Bugs group should remain closed.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ }
+ />
+
+
+ );
+}
diff --git a/apps/prs/react/src/routes/features/feat3407SkipOnFocusTab.tsx b/apps/prs/react/src/routes/features/feat3407SkipOnFocusTab.tsx
new file mode 100644
index 0000000000..d6f64af372
--- /dev/null
+++ b/apps/prs/react/src/routes/features/feat3407SkipOnFocusTab.tsx
@@ -0,0 +1,67 @@
+import {
+ GoabBlock,
+ GoabText,
+ GoabDivider,
+ GoabTabs,
+ GoabTab,
+} from "@abgov/react-components";
+import type { JSX } from "react";
+
+export function Feat3407SkipOnFocusTabRoute(): JSX.Element {
+ return (
+
+
+ #3407: Skip Focus on Initial Tab Load
+
+
+ Testing skipFocus on initial page load (no visible focus ring) and
+ segmented tabpanel fixes (no focus ring or tab stop on empty content).
+
+
+
+
+
+
+ Test 1: Skip focus on initial load
+
+ When the page loads, the active tab should NOT have a visible focus
+ ring. Reload the page and confirm no tab shows a focus outline
+ until you interact via keyboard.
+
+
+
+ Not initially selected.
+
+
+
+ This tab is initially active via initialTab=2. It should NOT
+ have a focus ring on page load.
+
+
+
+ Not initially selected.
+
+
+
+
+
+ Test 2: When no initialize Tabs
+
+
+ Default tabs — check URL changes when clicking tabs.
+
+
+ The URL hash should update to reflect the active tab.
+
+
+ Resize browser to mobile width — tabs should stack vertically.
+
+
+
+
+
+
+ );
+}
+
+export default Feat3407SkipOnFocusTabRoute;
diff --git a/apps/prs/react/src/routes/features/feat3407StackOnMobile.tsx b/apps/prs/react/src/routes/features/feat3407StackOnMobile.tsx
new file mode 100644
index 0000000000..7065463bcd
--- /dev/null
+++ b/apps/prs/react/src/routes/features/feat3407StackOnMobile.tsx
@@ -0,0 +1,111 @@
+import {
+ GoabBlock,
+ GoabDivider,
+ GoabTab,
+ GoabTabs,
+ GoabText,
+} from "@abgov/react-components";
+
+import { useEffect, type JSX } from "react";
+// ?url suffix tells Vite to resolve the path without injecting the CSS
+import v2TokensUrl from "@abgov/design-tokens-v2/dist/tokens.css?url";
+
+export function Feat3407StackOnMobileRoute(): JSX.Element {
+ // Dynamically load v2 design tokens only while this page is mounted,
+ // so they don't leak into other routes in the SPA.
+ useEffect(() => {
+ const link = document.createElement("link");
+ link.rel = "stylesheet";
+ link.href = v2TokensUrl;
+ document.head.appendChild(link);
+ return () => {
+ document.head.removeChild(link);
+ };
+ }, []);
+
+ return (
+
+
+ #3407: orientation Prop
+
+
+ Testing orientation prop (controls mobile stacking behavior). orientation is
+ only available on GoabTabs (experimental).
+
+
+
+
+
+
+
+ Test 1: Experimental Tabs + orientation="auto" (default)
+
+
+ Experimental (v2) tabs that stack vertically on mobile (default behavior).
+ Resize browser to mobile width to verify tabs stack.
+
+
+
+ These tabs should stack vertically on mobile.
+
+
+ Vertical stacking on narrow screens.
+
+
+ Compare with Test 2 below.
+
+
+
+
+
+ Test 2: Experimental Tabs + orientation="horizontal"
+
+ Experimental (v2) tabs that stay horizontal on mobile. Resize browser to
+ mobile width to verify tabs remain in a row.
+
+
+
+ These tabs should stay horizontal on mobile.
+
+
+ No vertical stacking on narrow screens.
+
+
+ Useful when horizontal space is preferred.
+
+
+
+
+
+
+ Test 3: Segmented variant (always not stacked on mobile)
+
+
+ Segmented tabs stay horizontal on mobile by default (no prop needed). Resize
+ to mobile width to verify.
+
+
+ {""}
+ {""}
+ {""}
+
+
+
+
+ Test 4: Segmented + orientation="horizontal"
+
+ Segmented tabs with orientation explicitly set to "horizontal". Should remain
+ horizontal on mobile (same as default segmented behavior).
+
+
+ {""}
+ {""}
+ {""}
+
+
+
+
+
+ Many actions with long text:
+
+ console.log("Action:", detail)}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Menu button at the bottom of the page (scroll down):
+
+
+ This one is placed lower on the page. Open it and check whether the page
+ scrolls when the focus trap kicks in.
+
+
+
+
+
+ Dropdown
+
+
+ Standard Dropdown
+
+ Dropdown controls its popover by setting open="true"/"false".
+ Click it to verify the option list appears. If the open prop is missing, the
+ Dropdown will not show its options.
+
+ Test to make sure when we click an option (or Enter to select an option), Dropdown
+ will close (test open dynamically set by Dropdown works in Popover)
+
+ setModalDropdownValue(detail.value ?? "")}
+ >
+
+
+
+
+ Selected: {modalDropdownValue || "(none)"}
+
+
+ Filterable Dropdown
+
+
+ Focus the input and press Space — it should type a space, not toggle the popover.
+
+ console.log("Filterable selected:", detail.value)}
+ >
+
+
+
+
+
+
+
+
+
+ Edge Cases
+
+
+ {/* Test 1: Popover in Modal (Benji's review comment) */}
+ Test 1: Popover in Modal (z-index fix)
+
+ Previously, position: absolute and z-index: 99 on the popover content caused
+ dropdowns and date pickers inside modals to render behind or outside the modal.
+ The native Popover API renders in the top layer, fixing this. Click the button
+ below to open a modal with a Dropdown and DatePicker inside.
+
+ setModalOpen(true)}>
+ Open Modal with Popover Components
+
+ setModalOpen(false)}
+ >
+
+ The Dropdown and DatePicker below should render their popovers correctly above
+ the modal — not clipped or hidden behind it.
+
+
+
+ setModalDropdownValue(detail.value ?? "")}
+ >
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur.
+
+
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+ deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste
+ natus error sit voluptatem accusantium doloremque laudantium, totam rem
+ aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
+ beatae vitae dicta sunt explicabo.
+
+
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+ sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
+ nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
+ consectetur, adipisci velit.
+
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
+ praesentium voluptatum deleniti atque corrupti quos dolores et quas
+ molestias excepturi sint occaecati cupiditate non provident, similique sunt
+ in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
+ fuga.
+
+
+ Et harum quidem rerum facilis est et expedita distinctio. Nam libero
+ tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus
+ id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis
+ dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut
+ rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
+ molestiae non recusandae.
+
+
+ Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+ voluptatibus maiores alias consequatur aut perferendis doloribus asperiores
+ repellat. Quis autem vel eum iure reprehenderit qui in ea voluptate velit
+ esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+ voluptas nulla pariatur.
+
+
+
+
+ setModalDateValue(detail.valueStr)}
+ />
+
+
+
+
+
+
+ {/* Test 2: AppHeaderMenu closes on navigation (popstate) */}
+ Test 2: AppHeaderMenu closes on navigation
+
+ The "Services" and "Account" menus{" "}
+ in the header above use GoabAppHeaderMenu, which uses
+ goa-popover internally. Open a menu, then click a link inside it. The page content
+ will change but the header stays — verify the menu popover closed. This is to test
+ handleUrlChange inside the Popover.svelte
+
+
+ {/* Test 3: Multiple Popovers */}
+ Test 3: Multiple Popovers
+
+ Opening one popover should close others (popover="auto" behavior).
+
+
+ Popover A}>
+ Content A
+
+ Popover B}>
+ Content B
+
+ Popover C}>
+ Content C
+
+
+
+ {/* Test 4: #3499 Dismissing Notification breaks AppHeaderMenu */}
+
+ Test 4: #3499 Dismissing Notification breaks AppHeaderMenu
+
+
+ When a Notification banner is dismissed (removed from the DOM), it should not
+ break the AppHeaderMenu popover. Steps to reproduce: dismiss the notification
+ below, then try opening the AppHeaderMenu in the header. It should still work.
+
+
+ Menu Item 1
+ Menu Item 2
+ Menu Item 3
+
+ {showBanner && (
+ setShowBanner(false)}
+ >
+ Dismiss this notification, then verify AppHeaderMenu still works.
+
+ )}
+ {!showBanner && (
+ <>
+
+ Notification dismissed. Now open the AppHeaderMenu above — it should still
+ function correctly.
+
+ setShowBanner(true)}>
+ Reset notification
+
+ >
+ )}
+
+ {/* Test 5: #3067 Focus issues with Popover */}
+ Test 5: #3067 Focus issues with Popover
+
+ After closing a popover with Escape, focus should return to the trigger element.
+ Steps: 1) Focus the button below, 2) Press Enter to open the popover, 3) Press
+ Escape to close, 4) The button should still be focused (yellow border visible), 5)
+ Press Tab — the next interactive element should be selected, not the popover.
+
+
+ Focus Test Button}>
+
+ Press Escape to close. Focus should return to the button.
+
+
+ Next Focusable Element
+
+
+ {/* Test 6: #3062 Popover maxWidth not respected above a button */}
+
+ Test 6: #3062 Popover maxWidth not respected above a button
+
+
+ When a Popover is placed directly above a GoabButton or GoabInput in the DOM, it
+ should still respect the maxWidth property. Both popovers below should have the
+ same width (default 320px). Previously the one above the button would ignore
+ maxWidth.
+
+
+ Show Popover}>
+
+ This popover is above the button. It should respect maxWidth (320px).
+
+
+
+ Submit Form
+
+
+ Popover Test
+
+ }
+ >
+
+ This popover is below the button. It should also respect maxWidth (320px).
+
+
+
+
+ );
+}
+
+export default Feat3478Route;
diff --git a/apps/prs/react/src/routes/features/feat3529.tsx b/apps/prs/react/src/routes/features/feat3529.tsx
new file mode 100644
index 0000000000..ab7a06c320
--- /dev/null
+++ b/apps/prs/react/src/routes/features/feat3529.tsx
@@ -0,0 +1,124 @@
+/**
+ * PR #3529: Heading Letter Spacing Tokens
+ *
+ * Adds letter-spacing design tokens to all heading sizes in Text.svelte,
+ * reset.css, FooterNavSection.svelte, and FormSummary.svelte.
+ *
+ * This page verifies that letter-spacing is correctly applied to each
+ * heading size via:
+ * --goa-typography-heading-[size]-letter-spacing (desktop)
+ * --goa-typography-mobile-heading-[size]-letter-spacing (mobile)
+ */
+
+import { GoabBlock, GoabDivider, GoabText } from "@abgov/react-components";
+
+export function Feat3529Route() {
+ return (
+
+
Feature #3529: Heading Letter Spacing
+
+ Letter-spacing design tokens have been applied to all heading sizes. Inspect each
+ heading below and verify that letter-spacing is set via the
+ corresponding CSS custom property.
+
+
+
+
+ {/* Explicit size prop */}
+
Explicit size prop
+
Each GoabText below uses an explicit size prop. Resize to mobile to verify the mobile tokens also apply.
+ Feature 3544: Optional Side Menu Icons
+
+ Both menus below use the same structure in primary content: one item and one
+ group. The left menu includes icons, and the right menu does not.
+
+
+
+
+ With icons
+
+
+
+
+
+
+ >
+ }
+ />
+
+
+
+
+ Without icons
+
+
+
+
+
+
+ >
+ }
+ />
+
+
+
+
+ Mixed: back icon + no icons
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ }
+ />
+
+
+
+
+ );
+}
diff --git a/apps/prs/react/src/routes/features/featV2Checkbox.tsx b/apps/prs/react/src/routes/features/featV2Checkbox.tsx
new file mode 100644
index 0000000000..abe7b64fd0
--- /dev/null
+++ b/apps/prs/react/src/routes/features/featV2Checkbox.tsx
@@ -0,0 +1,324 @@
+import React, { useState } from "react";
+import {
+ GoabBlock,
+ GoabCheckbox,
+ GoabCheckboxList,
+ GoabDivider,
+ GoabOneColumnLayout,
+ GoabPageBlock,
+ GoabText,
+} from "@abgov/react-components";
+
+import {
+ GoabCheckboxOnChangeDetail,
+ GoabCheckboxListOnChangeDetail,
+} from "@abgov/ui-components-common";
+import { Link } from "react-router-dom";
+
+export function FeatV2CheckboxRoute() {
+ const [selectedRows, setSelectedRows] = useState>(new Set());
+ const [checkboxListValue, setCheckboxListValue] = useState([]);
+ const [v2CompactListValue, setV2CompactListValue] = useState([]);
+ const [v1ListValue, setV1ListValue] = useState([]);
+ const [descListValue, setDescListValue] = useState([]);
+ const [v1DescListValue, setV1DescListValue] = useState([]);
+
+ const tableData = [
+ { id: "row1", name: "Alice Johnson", email: "alice@example.com", status: "Active" },
+ { id: "row2", name: "Bob Smith", email: "bob@example.com", status: "Pending" },
+ { id: "row3", name: "Carol Davis", email: "carol@example.com", status: "Active" },
+ ];
+
+ const handleRowSelect = (rowId: string, detail: GoabCheckboxOnChangeDetail) => {
+ const newSelected = new Set(selectedRows);
+ if (detail.checked) {
+ newSelected.add(rowId);
+ } else {
+ newSelected.delete(rowId);
+ }
+ setSelectedRows(newSelected);
+ };
+
+ return (
+
+
+
+
+ Back
+
+
+ V2 Checkbox Fixes
+
+
+
+ This page demonstrates fixes for checkbox spacing issues:
+
+
+
+ 1. Checkbox auto-margin removed - Checkboxes no longer have
+ default bottom margin, fixing alignment in tables
+
+
+ 2. CheckboxList gap - CheckboxList now controls its own spacing
+ between items using gap: var(--goa-space-m)
+
+
+
+
+
+ {/* Test Case 1: Checkbox in Table */}
+
+ Test 1: Checkbox in Table
+
+
+ Previously, checkboxes in tables had unwanted bottom margin causing misalignment.
+ Now they align properly with the row content.
+
+
+
+
+
+ ))}
+
+
+
+
+ Selected: {selectedRows.size} of {tableData.length} rows
+
+
+
+
+ {/* Test Case 2: CheckboxList Spacing */}
+
+ Test 2: CheckboxList Spacing
+
+
+ CheckboxList now uses gap: var(--goa-space-m) for consistent spacing between items.
+ Previously relied on individual checkbox margins.
+
+
+ setCheckboxListValue(detail.value)}
+ >
+
+
+
+
+
+
+ Selected: {checkboxListValue.join(", ") || "none"}
+
+
+
+
+ {/* Test Case 2b: CheckboxList with Descriptions */}
+
+ Test 2b: V2 CheckboxList with Descriptions
+
+
+ Testing checkbox description alignment when descriptions are set per option.
+
+
+ setDescListValue(detail.value)}
+ >
+
+
+
+
+
+
+
+ {/* Test Case 2c: V1 CheckboxList with Descriptions (comparison) */}
+
+ Test 2c: V1 CheckboxList with Descriptions (comparison)
+
+
+ V1 version for comparison.
+
+
+ setV1DescListValue(detail.value)}
+ >
+
+
+
+
+
+
+
+ {/* Test Case 3: V2 Compact CheckboxList */}
+
+ Test 3: V2 Compact CheckboxList
+
+
+ Compact checkbox list uses smaller gap (var(--goa-space-s)) between items.
+
+
+ setV2CompactListValue(detail.value)}
+ >
+
+
+
+
+
+
+ Selected: {v2CompactListValue.join(", ") || "none"}
+
+
+
+
+ {/* Test Case 4: Standalone Checkbox */}
+
+ Test 4: V2 Standalone Checkbox (No Auto-Margin)
+
+
+ V2 checkboxes no longer have default bottom margin.
+ Spacing should be controlled by the parent layout.
+
+
+
+
+
+
+
+
+
+ Notice: No extra margin between checkboxes - spacing controlled by GoabBlock gap.
+
+
+
+
+ {/* V1 Regression Tests */}
+
+ V1 Regression Tests
+
+
+ These tests verify V1 checkboxes still behave correctly after the V2 spacing changes.
+
+
+ {/* Test Case 5: V1 Standalone Checkboxes */}
+
+ Test 5: V1 Standalone Checkboxes (Auto-Margin)
+
+
+ V1 checkboxes should still have their default bottom margin (space-m).
+
+
+
+
+
+
+
+
+
+ {/* Test Case 6: V1 CheckboxList */}
+
+ Test 6: V1 CheckboxList (No Gap Change)
+
+
+ V1 checkbox lists should look the same as before - individual checkbox margins control spacing, list gap is 0.
+
+
+ setV1ListValue(detail.value)}
+ >
+
+
+
+
+
+
+ Selected: {v1ListValue.join(", ") || "none"}
+
+
+
+
+ );
+}
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
new file mode 100644
index 0000000000..6da695ee31
--- /dev/null
+++ b/docs/ARCHITECTURE.md
@@ -0,0 +1,427 @@
+# Docs Site — How It Works
+
+Practical guide for the team on how this site is built, where content comes from, and how to make changes.
+
+**Location:** `ui-components/docs/` (not the old `ui-components-docs/` SPA)
+**Stack:** Astro + MDX + React islands
+**Dev server:** `npm run dev` → http://localhost:4203
+
+---
+
+## How the site is structured
+
+The docs site pulls content from three types of sources:
+
+```
+Svelte source code Manual MDX content
+(libs/web-components/) (docs/src/content/)
+ │ │
+ ▼ ▼
+ extract-api.ts Astro content collections
+ │ (components, guidance, examples)
+ ▼ │
+ generated/component-apis/*.json │
+ │ │
+ └──────────────┬──────────────────────┘
+ ▼
+ Astro static build
+ (pages assembled from all sources)
+```
+
+### Content sources at a glance
+
+| Content | Source | Automated? |
+| ------------------------------------ | --------------------------------------------------------- | ----------------------------- |
+| Component API (props, events, slots) | Extracted from Svelte → `generated/component-apis/*.json` | **Yes** — runs on every build |
+| Component descriptions & metadata | `src/content/components/*.mdx` | Manual |
+| Guidance atoms (~130+) | `src/content/guidance/*.mdx` | Manual |
+| Examples (~80) | `src/content/examples/*/` | Manual |
+| Configuration previews (~65) | `src/data/configurations/*.ts` | Manual (curated) |
+| Design tokens | `@abgov/design-tokens-v2` npm package | Yes (npm import) |
+| Search index | `search-index.json` | Yes (build step) |
+
+---
+
+## Build pipeline
+
+```bash
+npm run build
+```
+
+This runs three steps in sequence:
+
+1. **`npm run extract-api`** — Runs `tsx src/scripts/extract-api.ts --all`. Scans every Svelte component in `libs/web-components/src/components/`, extracts props/events/slots, writes JSON to `docs/generated/component-apis/`.
+2. **`astro check`** — TypeScript type checking.
+3. **`astro build`** — Static site generation. Content collections are processed, dynamic routes are pre-rendered, output goes to `ui-components/dist/docs`.
+
+The generated API JSON files are **committed to git** so changes are visible in PR diffs. They're also regenerated on every build to ensure freshness.
+
+> **Note:** The `extract-api` step was added in PR #3513. If you're on a branch that predates this merge, you'll need to manually create or copy the JSON files in `docs/generated/component-apis/` for the dev server to show API data.
+
+### Vite aliases
+
+The site resolves monorepo packages directly via aliases in `astro.config.mjs`:
+
+- `@abgov/react-components` → `libs/react-components/src/index.ts`
+- `@abgov/web-components` → `dist/libs/web-components/`
+- `@abgov/style` → `dist/libs/web-components/index.css`
+- `@design-tokens` → `node_modules/@abgov/design-tokens-v2/dist`
+
+**Important:** `@abgov/web-components` points to `dist/`, so you need to build web components first (`npm run build` from the root) for the docs site to work.
+
+---
+
+## Content collections
+
+Defined in `src/content/config.ts`. Three collections:
+
+### Components (`src/content/components/*.mdx`)
+
+One MDX file per component. Mostly frontmatter — the page template pulls in API data, guidance, examples, and configurations automatically.
+
+```yaml
+---
+name: Button
+description: Carry out an important action or navigate to another page.
+status: stable # stable | beta | deprecated | experimental
+category: inputs-and-actions # determines nav section
+tags: [action, submit]
+relatedComponents: [button-group, icon-button]
+figmaUrl: https://www.figma.com/...
+githubUrl: https://github.com/...
+webComponentTag: goa-button
+reactClassName: GoabButton
+angularSelector: goab-button
+hidden: true # optional — hide from nav (used for subcomponents, deprecated, internal)
+subcomponent: true # optional — show API on parent component page
+---
+```
+
+The MDX body is usually empty. Any content you add appears at the bottom of the "Usage guidelines" tab.
+
+**Subcomponents:** Some components are children that developers compose with a parent (e.g., Tab inside Tabs, Footer Nav Section inside Footer). These have `hidden: true` (not in nav) and `subcomponent: true` (API shown on parent page). The parent discovers subcomponents via its `relatedComponents` array. See "Add a subcomponent" below for how this works.
+
+### Guidance (`src/content/guidance/*.mdx`)
+
+Atomic pieces of design knowledge — do's, don'ts, tips, warnings. These are linked to components via `appliesTo.components` and appear on those component pages automatically.
+
+```yaml
+---
+id: accordion-content-left-aligned
+type: do # do | dont | tip | warning | info
+description: Ensure accordion content is left-aligned with the heading.
+topic: positioning # determines which section on the page
+tags: [accordion, alignment]
+appliesTo:
+ components: [accordion] # shows on these component pages
+status: published # published | draft | deprecated
+---
+
+
+Content here...
+
+
+```
+
+**Topics** determine where guidance appears on the component page. Only these values are recognized by the rendering code in `src/lib/content-queries.ts`:
+
+- **Usage tab:** `types`, `states`, `sizing`, `icons`, `positioning`, `content`, `other`
+- **Accessibility tab:** `screen-readers`, `keyboard`, `focus`
+
+The schema in `config.ts` accepts additional topic values (usage, interaction, forms, layout, performance, accessibility, feedback), but any guidance using those topics will be **silently filtered out** and won't render on the page. Stick to the values above.
+
+### Examples (`src/content/examples/*/`)
+
+Each example is a folder with an `index.mdx` + framework code files:
+
+```
+src/content/examples/button-with-icon/
+├── index.mdx # Frontmatter + description
+├── react.tsx # React implementation
+├── angular.html # Angular template
+├── angular.ts # Angular component class
+└── web-components.html # Web components implementation
+```
+
+```yaml
+# index.mdx frontmatter
+---
+id: button-with-icon
+title: Button with Icon
+categories: [inputs-and-actions] # content-layout | feedback-and-alerts | inputs-and-actions | forms | structure-and-navigation | technical
+scale: interaction # interaction | task | page | service
+userType: both # citizen | worker | both
+tags: [icons, buttons]
+components: [button, icon] # links this example to component pages
+accessibilityNotes: |
+ Button text provides the accessible name.
+status: published
+---
+```
+
+Example code is loaded at build time via Vite glob imports (`src/lib/example-code.ts`).
+
+---
+
+## Configuration previews
+
+The interactive preview at the top of each component page (dropdown + live preview + code snippet).
+
+**Files:** `src/data/configurations/.ts`
+**Registry:** `src/data/configurations/index.ts`
+
+Each file exports an object with preset configurations:
+
+```typescript
+export const buttonConfigurations: ComponentConfigurations = {
+ componentSlug: "button",
+ componentName: "Button",
+ defaultConfigurationId: "basic",
+ configurations: [
+ {
+ id: "basic",
+ name: "Primary button",
+ code: {
+ react: `Submit`,
+ angular: `Submit`,
+ webComponents: `Submit`,
+ },
+ },
+ // ... more variants
+ ],
+};
+```
+
+**Note:** Most configuration code uses `Goab*` / `goab-*` prefixes. Some components also include V2-specific variants — check `libs/react-components/src/lib/` for the full list.
+
+**Slots across frameworks:** Each configuration file contains code for all three frameworks, and slots work differently in each:
+
+- **Web Components:** native `slot="name"` attribute — `
...
`
+- **React:** slots become JSX props — `actions={
...
}`
+- **Angular:** slots become `TemplateRef` inputs with `ng-template` — `[actions]="actionsTemplate"` and `...`
+
+This is a common source of errors when writing configuration code since all three are in the same file.
+
+---
+
+## How to: common changes
+
+### Add a new component page
+
+1. **Create the MDX file:**
+
+ ```bash
+ # Create src/content/components/my-component.mdx
+ ```
+
+ Add frontmatter with name, description, status, category, framework identifiers. See any existing file for the template.
+
+2. **API data is automatic.** As long as the Svelte component exists in `libs/web-components/src/components/my-component/`, the build extracts its API. The slug must match the folder name.
+
+3. **Add a configuration preview** (optional but recommended):
+ - Create `src/data/configurations/my-component.ts`
+ - Export a `ComponentConfigurations` object
+ - Add the import + export to `src/data/configurations/index.ts`
+ - Add the slug to the `configurationRegistry` object in the same file
+
+4. The component appears in the nav and grid automatically. The side nav is built dynamically from the content collection — Astro queries all component MDX files, groups them by `category`, and passes the data to `ComponentsSubMenu` via `nav-categories.ts`. No hardcoded nav lists to update.
+
+### Add a subcomponent
+
+Subcomponents are child components that developers compose with a parent (e.g., `` inside ``). Their API appears on the parent's Properties tab under a separate heading.
+
+**How it works:** The parent lists the subcomponent in its `relatedComponents`. The page template calls `getSubcomponents()`, which filters that list for entries with `subcomponent: true` and loads their extracted API data.
+
+**Example: Tabs and Tab**
+
+The parent (`tabs.mdx`) includes `tab` in its `relatedComponents`:
+
+```yaml
+# src/content/components/tabs.mdx
+---
+name: Tabs
+status: stable
+category: structure-and-navigation
+relatedComponents:
+ - tab # <-- this is how the parent discovers the subcomponent
+webComponentTag: goa-tabs
+---
+```
+
+The child (`tab.mdx`) marks itself as hidden and a subcomponent:
+
+```yaml
+# src/content/components/tab.mdx
+---
+name: Tab
+status: stable
+category: structure-and-navigation
+hidden: true # not shown in nav
+subcomponent: true # API appears on parent page
+relatedComponents:
+ - tabs
+webComponentTag: goa-tab
+---
+```
+
+Result: the Tabs page shows "Tab Props", "Tab Slots" (and "Tab Events" if any exist) with a "Subcomponent" badge on each heading.
+
+**To add a new subcomponent:**
+
+1. Create the subcomponent MDX file with `hidden: true` and `subcomponent: true`
+2. Add its slug to the parent's `relatedComponents` array
+3. Ensure API data exists. If the Svelte component has its own directory (`libs/web-components/src/components/my-sub/`), the extraction script handles it automatically. If it's a nested file inside the parent's directory (like `WorkSideMenuGroup.svelte` inside `work-side-menu/`), you need to manually create the API JSON in `generated/component-apis/my-sub.json`
+
+**Current subcomponent mappings:**
+
+| Parent | Subcomponents |
+| -------------- | ----------------------------------------- |
+| Header | App Header Menu |
+| File uploader | File Upload Card |
+| Footer | Footer Meta Section, Footer Nav Section |
+| Form stepper | Form Step |
+| Menu button | Menu Action |
+| Radio | Radio Item |
+| Side menu | Side Menu Group, Side Menu Heading |
+| Tabs | Tab |
+| Work Side Menu | Work Side Menu Group, Work Side Menu Item |
+
+### Hide a component from navigation
+
+Set `hidden: true` in the component's MDX frontmatter. It won't appear in the nav or component grid, but the page still exists if you visit the URL directly.
+
+### Add guidance for a component
+
+1. Create `src/content/guidance/.mdx`
+2. Set `appliesTo.components` to include the component slug(s)
+3. Choose the right `type` (do/dont/tip/warning/info) and `topic`
+4. The guidance appears automatically on those component pages, in the correct tab
+
+One guidance atom can apply to multiple components — just list them all in `appliesTo.components`.
+
+### Add a new example
+
+1. Create a folder: `src/content/examples/my-example/`
+2. Add `index.mdx` with frontmatter (id, title, categories, scale, components, etc.)
+3. Add framework files:
+ - `react.tsx` — React implementation
+ - `angular.html` + `angular.ts` — Angular template and component
+ - `web-components.html` — Web components HTML
+4. List the component slugs in the `components` array — this links the example to those component pages
+5. Generate a preview image (see below)
+
+All three framework files are optional, but at least one is needed.
+
+### Generate example preview images
+
+Preview images show a screenshot of each example in the grid cards. To generate them:
+
+```bash
+cd ui-components/docs
+
+# Generate for all examples (skips manually-provided ones)
+npm run generate-previews -- --url http://localhost:4203
+
+# Generate for a specific example
+npm run generate-previews -- --url http://localhost:4203 my-example-slug
+```
+
+This requires the dev server to be running (`npm run dev`). Images are saved as WebP to `public/images/examples/`. Add `previewImage: /images/examples/my-example.webp` to the example's frontmatter.
+
+**For modals, drawers, or notifications:** the script can't capture these well automatically. Take a manual screenshot (1280x800 viewport), save it as a PNG in `public/images/examples/`, update the frontmatter path to `.png`, and add the slug to the `SKIP_EXAMPLES` list in `src/scripts/generate-preview-images.ts`.
+
+### Update a configuration preview
+
+Edit the relevant file in `src/data/configurations/.ts`. Each configuration has an `id`, `name`, and `code` with React/Angular/Web Components snippets.
+
+### Add/update a component thumbnail
+
+Place an SVG in `docs/public/thumbnails/.svg`. The components grid references these.
+
+---
+
+## Key files reference
+
+| What | Where |
+| ----------------------- | ---------------------------------------- |
+| Astro config | `docs/astro.config.mjs` |
+| Content schemas | `docs/src/content/config.ts` |
+| Component page template | `docs/src/pages/components/[slug].astro` |
+| Example page template | `docs/src/pages/examples/[slug].astro` |
+| Content query helpers | `docs/src/lib/content-queries.ts` |
+| Example code loader | `docs/src/lib/example-code.ts` |
+| API extraction script | `docs/src/scripts/extract-api.ts` |
+| Configuration registry | `docs/src/data/configurations/index.ts` |
+| Configuration types | `docs/src/data/configurations/types.ts` |
+| JSX workarounds | `docs/src/global.d.ts` |
+| Layouts | `docs/src/layouts/` |
+| Generated API JSON | `docs/generated/component-apis/` |
+
+---
+
+## How component pages are assembled
+
+The page template (`src/pages/components/[slug].astro`) pulls from six sources:
+
+1. **MDX content** — renders the component's `.mdx` file (mostly frontmatter-driven)
+2. **Extracted API** — `getComponentApi(slug)` loads from `generated/component-apis/.json`
+3. **Subcomponent APIs** — `getSubcomponents(relatedComponents)` finds entries with `subcomponent: true` and loads their API data
+4. **Guidance** — `getGuidanceForComponent(slug)` filters guidance where `appliesTo.components` includes this slug, then splits into usage vs accessibility topics
+5. **Examples** — `getExamplesForComponent(slug)` filters examples where `components` includes this slug
+6. **Configurations** — `getComponentConfigurations(slug)` looks up from the registry
+
+These are rendered into four tabs: Properties (including subcomponent APIs), Examples, Usage guidelines, Accessibility.
+
+---
+
+## Framework preference sync
+
+The site has a framework preference switcher (React / Angular / Web Components). The choice is stored in `localStorage` and synced across tabs via `CustomEvent`. See `src/lib/framework-preference.ts`.
+
+Configuration previews and example code tabs both respect this preference — change it once and it applies everywhere.
+
+---
+
+## Workarounds and known issues
+
+### `global.d.ts` — JSX type workarounds
+
+When a React wrapper doesn't support a V2 feature yet, we declare the raw web component in JSX so TypeScript doesn't error. Each entry has a tracking issue:
+
+- `goa-badge` — V2 types not in wrapper ([#3385](https://github.com/GovAlta/ui-components/issues/3385))
+- `goa-table` — V2 styling issues ([#3384](https://github.com/GovAlta/ui-components/issues/3384))
+- `goa-table-sort-header` — missing sortOrder prop
+- `goa-tabs` / `goa-tab` — missing updateUrl and stackOnMobile props
+
+When the wrapper is fixed, remove the corresponding `global.d.ts` entry and switch to the React wrapper.
+
+### Design tokens V2
+
+The docs site uses V2 tokens via an npm alias:
+
+```json
+"@abgov/design-tokens-v2": "npm:@abgov/design-tokens@^2.0.0"
+```
+
+Referenced in code as `@design-tokens` (Vite alias). This lets us use V2 tokens while the main package is still at V1 for other consumers.
+
+### `client:only="react"` hydration
+
+Some React components (like `ConfigurationPreview`) use `client:only="react"` instead of `client:load`. This avoids SSR hydration mismatches with web components. If you see React state issues during SSR, this is the fix.
+
+### Web components need a build
+
+The docs site resolves `@abgov/web-components` to `dist/libs/web-components/`. If you're seeing missing components in dev, run a build from the repo root first:
+
+```bash
+cd /path/to/ui-components
+npm run build
+```
+
+---
+
+## What's still planned
+
+- **Wrapper-based extraction** — Extract React/Angular prop names from wrappers too, not just Svelte. Blocked on [#3361](https://github.com/GovAlta/ui-components/issues/3361).
+- **Automated example screenshots** — Generate preview images for the examples grid automatically.
+- **MCP JSON generation** — Generate the MCP server's knowledge base from the docs site content, closing the loop between docs and AI tooling.
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index e106f4d38d..379f029e7f 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -10,8 +10,22 @@ const workspaceRoot = path.resolve(__dirname, "..");
// https://astro.build/config
export default defineConfig({
+ site: "https://design.alberta.ca",
root: ".",
outDir: "../dist/docs",
+ redirects: {
+ "/components/circular-progress-indicator": "/components/circular-progress",
+ "/components/file-uploader": "/components/file-upload-input",
+ "/components/header": "/components/app-header",
+ "/components/icons": "/components/icon",
+ "/components/linear-progress-indicator": "/components/linear-progress",
+ "/components/notification-banner": "/components/notification",
+ "/components/radio": "/components/radio-group",
+ "/components/skeleton-loader": "/components/skeleton",
+ "/design-tokens": "/tokens",
+ "/get-started/support": "/support",
+ "/examples/show-multiple-actions-in-a-table": "/examples/show-multiple-actions-in-a-compact-table",
+ },
build: {
chunkSizeWarningLimit: 1000,
},
@@ -55,7 +69,10 @@ export default defineConfig({
// Design tokens V2 for docs styling (via npm alias)
{
find: "@design-tokens",
- replacement: path.resolve(workspaceRoot, "node_modules/@abgov/design-tokens-v2/dist"),
+ replacement: path.resolve(
+ workspaceRoot,
+ "node_modules/@abgov/design-tokens-v2/dist",
+ ),
},
],
dedupe: ["react", "react-dom", "react/jsx-runtime", "react/jsx-dev-runtime"],
diff --git a/docs/generated/component-apis/accordion.json b/docs/generated/component-apis/accordion.json
index d1a728750d..132e50b852 100644
--- a/docs/generated/component-apis/accordion.json
+++ b/docs/generated/component-apis/accordion.json
@@ -1,7 +1,6 @@
{
"componentSlug": "accordion",
"extractedFrom": "libs/web-components/src/components/accordion/Accordion.svelte",
- "extractedAt": "2026-02-04T08:10:50.390Z",
"props": [
{
"name": "open",
diff --git a/docs/generated/component-apis/app-header-menu.json b/docs/generated/component-apis/app-header-menu.json
index 02665ecfbc..1e8fca8a88 100644
--- a/docs/generated/component-apis/app-header-menu.json
+++ b/docs/generated/component-apis/app-header-menu.json
@@ -1,7 +1,6 @@
{
"componentSlug": "app-header-menu",
"extractedFrom": "libs/web-components/src/components/app-header-menu/AppHeaderMenu.svelte",
- "extractedAt": "2026-02-04T08:10:50.392Z",
"props": [
{
"name": "heading",
@@ -29,6 +28,17 @@
"default": "primary",
"description": "The menu style variant. Primary uses bold text, secondary uses regular weight."
},
+ {
+ "name": "version",
+ "type": "\"1\" | \"2\"",
+ "values": [
+ "1",
+ "2"
+ ],
+ "required": false,
+ "default": "1",
+ "description": "The header version this menu is used with."
+ },
{
"name": "testId",
"type": "string",
diff --git a/docs/generated/component-apis/app-header-navigation.json b/docs/generated/component-apis/app-header-navigation.json
new file mode 100644
index 0000000000..8d8a1251fc
--- /dev/null
+++ b/docs/generated/component-apis/app-header-navigation.json
@@ -0,0 +1,38 @@
+{
+ "componentSlug": "app-header-navigation",
+ "extractedFrom": "libs/web-components/src/components/app-header-navigation/AppHeaderNavigation.svelte",
+ "props": [
+ {
+ "name": "version",
+ "type": "\"1\" | \"2\"",
+ "values": [
+ "1",
+ "2"
+ ],
+ "required": false,
+ "default": "1",
+ "description": ""
+ },
+ {
+ "name": "windowWidth",
+ "type": "number",
+ "required": true,
+ "default": null,
+ "description": ""
+ },
+ {
+ "name": "mobile",
+ "type": "boolean",
+ "required": false,
+ "default": "false",
+ "description": ""
+ }
+ ],
+ "events": [],
+ "slots": [
+ {
+ "name": "default",
+ "description": ""
+ }
+ ]
+}
\ No newline at end of file
diff --git a/docs/generated/component-apis/app-header.json b/docs/generated/component-apis/app-header.json
index 4e4aae8a3e..164f93138c 100644
--- a/docs/generated/component-apis/app-header.json
+++ b/docs/generated/component-apis/app-header.json
@@ -1,8 +1,18 @@
{
"componentSlug": "app-header",
"extractedFrom": "libs/web-components/src/components/app-header/AppHeader.svelte",
- "extractedAt": "2026-02-04T08:10:50.392Z",
"props": [
+ {
+ "name": "version",
+ "type": "\"1\" | \"2\"",
+ "values": [
+ "1",
+ "2"
+ ],
+ "required": false,
+ "default": "1",
+ "description": ""
+ },
{
"name": "heading",
"type": "string",
@@ -10,6 +20,13 @@
"default": "",
"description": "Set the service name to display in the app header."
},
+ {
+ "name": "secondarytext",
+ "type": "string",
+ "required": false,
+ "default": "",
+ "description": "V2 only: Secondary text displayed under the service name."
+ },
{
"name": "url",
"type": "string",
@@ -68,6 +85,22 @@
{
"name": "default",
"description": ""
+ },
+ {
+ "name": "banner",
+ "description": ""
+ },
+ {
+ "name": "phase",
+ "description": ""
+ },
+ {
+ "name": "utilities",
+ "description": ""
+ },
+ {
+ "name": "navigation",
+ "description": ""
}
]
}
\ No newline at end of file
diff --git a/docs/generated/component-apis/badge.json b/docs/generated/component-apis/badge.json
index c43ec0a408..cc16d9e39b 100644
--- a/docs/generated/component-apis/badge.json
+++ b/docs/generated/component-apis/badge.json
@@ -1,7 +1,6 @@
{
"componentSlug": "badge",
"extractedFrom": "libs/web-components/src/components/badge/Badge.svelte",
- "extractedAt": "2026-02-04T08:10:50.393Z",
"props": [
{
"name": "type",
diff --git a/docs/generated/component-apis/block.json b/docs/generated/component-apis/block.json
index 476ccb2ac6..499c8e80e5 100644
--- a/docs/generated/component-apis/block.json
+++ b/docs/generated/component-apis/block.json
@@ -1,7 +1,6 @@
{
"componentSlug": "block",
"extractedFrom": "libs/web-components/src/components/block/Block.svelte",
- "extractedAt": "2026-02-04T08:10:50.394Z",
"props": [
{
"name": "gap",
diff --git a/docs/generated/component-apis/button-group.json b/docs/generated/component-apis/button-group.json
index 6c07fe07aa..8014882d01 100644
--- a/docs/generated/component-apis/button-group.json
+++ b/docs/generated/component-apis/button-group.json
@@ -1,7 +1,6 @@
{
"componentSlug": "button-group",
"extractedFrom": "libs/web-components/src/components/button-group/ButtonGroup.svelte",
- "extractedAt": "2026-02-04T08:10:50.394Z",
"props": [
{
"name": "alignment",
diff --git a/docs/generated/component-apis/button.json b/docs/generated/component-apis/button.json
index 969cc8656b..755dffddc7 100644
--- a/docs/generated/component-apis/button.json
+++ b/docs/generated/component-apis/button.json
@@ -1,7 +1,6 @@
{
"componentSlug": "button",
"extractedFrom": "libs/web-components/src/components/button/Button.svelte",
- "extractedAt": "2026-02-04T08:10:50.394Z",
"props": [
{
"name": "type",
diff --git a/docs/generated/component-apis/calendar.json b/docs/generated/component-apis/calendar.json
index a404130e5b..5a6285f88b 100644
--- a/docs/generated/component-apis/calendar.json
+++ b/docs/generated/component-apis/calendar.json
@@ -1,7 +1,6 @@
{
"componentSlug": "calendar",
"extractedFrom": "libs/web-components/src/components/calendar/Calendar.svelte",
- "extractedAt": "2026-02-04T08:10:50.395Z",
"props": [
{
"name": "name",
diff --git a/docs/generated/component-apis/callout.json b/docs/generated/component-apis/callout.json
index 1487db5865..bbb0415aca 100644
--- a/docs/generated/component-apis/callout.json
+++ b/docs/generated/component-apis/callout.json
@@ -1,7 +1,6 @@
{
"componentSlug": "callout",
"extractedFrom": "libs/web-components/src/components/callout/Callout.svelte",
- "extractedAt": "2026-02-04T08:10:50.395Z",
"props": [
{
"name": "mt",
diff --git a/docs/generated/component-apis/card-actions.json b/docs/generated/component-apis/card-actions.json
index 407acdc9ca..9efe3cc159 100644
--- a/docs/generated/component-apis/card-actions.json
+++ b/docs/generated/component-apis/card-actions.json
@@ -1,7 +1,6 @@
{
"componentSlug": "card-actions",
"extractedFrom": "libs/web-components/src/components/card-actions/CardActions.svelte",
- "extractedAt": "2026-02-04T08:10:50.396Z",
"props": [],
"events": [],
"slots": [
diff --git a/docs/generated/component-apis/card-content.json b/docs/generated/component-apis/card-content.json
index eaa9415441..e757b05dbe 100644
--- a/docs/generated/component-apis/card-content.json
+++ b/docs/generated/component-apis/card-content.json
@@ -1,7 +1,6 @@
{
"componentSlug": "card-content",
"extractedFrom": "libs/web-components/src/components/card-content/CardContent.svelte",
- "extractedAt": "2026-02-04T08:10:50.396Z",
"props": [],
"events": [],
"slots": [
diff --git a/docs/generated/component-apis/card-group.json b/docs/generated/component-apis/card-group.json
index 7dfb5247c7..5ca2073983 100644
--- a/docs/generated/component-apis/card-group.json
+++ b/docs/generated/component-apis/card-group.json
@@ -1,7 +1,6 @@
{
"componentSlug": "card-group",
"extractedFrom": "libs/web-components/src/components/card-group/CardGroup.svelte",
- "extractedAt": "2026-02-04T08:10:50.396Z",
"props": [],
"events": [],
"slots": [
diff --git a/docs/generated/component-apis/card-image.json b/docs/generated/component-apis/card-image.json
index dcccaedd40..6569d15281 100644
--- a/docs/generated/component-apis/card-image.json
+++ b/docs/generated/component-apis/card-image.json
@@ -1,7 +1,6 @@
{
"componentSlug": "card-image",
"extractedFrom": "libs/web-components/src/components/card-image/CardImage.svelte",
- "extractedAt": "2026-02-04T08:10:50.396Z",
"props": [
{
"name": "src",
diff --git a/docs/generated/component-apis/card.json b/docs/generated/component-apis/card.json
index e885f3ddb7..bff87bf697 100644
--- a/docs/generated/component-apis/card.json
+++ b/docs/generated/component-apis/card.json
@@ -1,7 +1,6 @@
{
"componentSlug": "card",
"extractedFrom": "libs/web-components/src/components/card/Card.svelte",
- "extractedAt": "2026-02-04T08:10:50.395Z",
"props": [
{
"name": "elevation",
diff --git a/docs/generated/component-apis/checkbox-list.json b/docs/generated/component-apis/checkbox-list.json
index 749952d938..921345b50f 100644
--- a/docs/generated/component-apis/checkbox-list.json
+++ b/docs/generated/component-apis/checkbox-list.json
@@ -1,7 +1,6 @@
{
"componentSlug": "checkbox-list",
"extractedFrom": "libs/web-components/src/components/checkbox-list/CheckboxList.svelte",
- "extractedAt": "2026-02-04T19:24:42.584Z",
"props": [
{
"name": "name",
@@ -45,6 +44,17 @@
"default": "none",
"description": "Sets the maximum width of the checkbox list container."
},
+ {
+ "name": "size",
+ "type": "\"default\" | \"compact\"",
+ "values": [
+ "default",
+ "compact"
+ ],
+ "required": false,
+ "default": "default",
+ "description": "Sets the size of the checkbox list. 'compact' reduces spacing between items."
+ },
{
"name": "mt",
"type": "Spacing",
diff --git a/docs/generated/component-apis/checkbox.json b/docs/generated/component-apis/checkbox.json
index 3db9f637d4..5e2809db8e 100644
--- a/docs/generated/component-apis/checkbox.json
+++ b/docs/generated/component-apis/checkbox.json
@@ -1,7 +1,6 @@
{
"componentSlug": "checkbox",
"extractedFrom": "libs/web-components/src/components/checkbox/Checkbox.svelte",
- "extractedAt": "2026-02-04T08:10:50.397Z",
"props": [
{
"name": "name",
diff --git a/docs/generated/component-apis/chip.json b/docs/generated/component-apis/chip.json
index cb2fc27d5b..ed45fe3d41 100644
--- a/docs/generated/component-apis/chip.json
+++ b/docs/generated/component-apis/chip.json
@@ -1,7 +1,6 @@
{
"componentSlug": "chip",
"extractedFrom": "libs/web-components/src/components/chip/Chip.svelte",
- "extractedAt": "2026-02-04T08:10:50.398Z",
"props": [
{
"name": "mt",
@@ -78,7 +77,7 @@
},
{
"name": "variant",
- "type": "ChipVariant",
+ "type": "\"filter\"",
"required": true,
"default": null,
"description": "@deprecated Use GoAFilterChip instead. The chip variant style.",
diff --git a/docs/generated/component-apis/circular-progress.json b/docs/generated/component-apis/circular-progress.json
index 14f29e041b..15cdda806d 100644
--- a/docs/generated/component-apis/circular-progress.json
+++ b/docs/generated/component-apis/circular-progress.json
@@ -1,7 +1,6 @@
{
"componentSlug": "circular-progress",
"extractedFrom": "libs/web-components/src/components/circular-progress/CircularProgress.svelte",
- "extractedAt": "2026-02-04T08:10:50.399Z",
"props": [
{
"name": "variant",
diff --git a/docs/generated/component-apis/container.json b/docs/generated/component-apis/container.json
index f86316b7a5..6b8be6c90d 100644
--- a/docs/generated/component-apis/container.json
+++ b/docs/generated/component-apis/container.json
@@ -1,7 +1,6 @@
{
"componentSlug": "container",
"extractedFrom": "libs/web-components/src/components/container/Container.svelte",
- "extractedAt": "2026-02-04T08:10:50.399Z",
"props": [
{
"name": "type",
diff --git a/docs/generated/component-apis/data-grid.json b/docs/generated/component-apis/data-grid.json
index ff058c8495..bf52986bea 100644
--- a/docs/generated/component-apis/data-grid.json
+++ b/docs/generated/component-apis/data-grid.json
@@ -1,7 +1,6 @@
{
"componentSlug": "data-grid",
"extractedFrom": "libs/web-components/src/components/data-grid/DataGrid.svelte",
- "extractedAt": "2026-02-04T08:10:50.400Z",
"props": [
{
"name": "keyboardIconVisibility",
diff --git a/docs/generated/component-apis/date-picker.json b/docs/generated/component-apis/date-picker.json
index a65aaa58c1..536705b8ef 100644
--- a/docs/generated/component-apis/date-picker.json
+++ b/docs/generated/component-apis/date-picker.json
@@ -1,7 +1,6 @@
{
"componentSlug": "date-picker",
"extractedFrom": "libs/web-components/src/components/date-picker/DatePicker.svelte",
- "extractedAt": "2026-02-04T08:10:50.400Z",
"props": [
{
"name": "type",
diff --git a/docs/generated/component-apis/details.json b/docs/generated/component-apis/details.json
index 569bd66ee5..0a698e46db 100644
--- a/docs/generated/component-apis/details.json
+++ b/docs/generated/component-apis/details.json
@@ -1,7 +1,6 @@
{
"componentSlug": "details",
"extractedFrom": "libs/web-components/src/components/details/Details.svelte",
- "extractedAt": "2026-02-04T08:10:50.401Z",
"props": [
{
"name": "heading",
diff --git a/docs/generated/component-apis/divider.json b/docs/generated/component-apis/divider.json
index 8cdfb589a3..4982fd0656 100644
--- a/docs/generated/component-apis/divider.json
+++ b/docs/generated/component-apis/divider.json
@@ -1,7 +1,6 @@
{
"componentSlug": "divider",
"extractedFrom": "libs/web-components/src/components/divider/Divider.svelte",
- "extractedAt": "2026-02-04T08:10:50.401Z",
"props": [
{
"name": "testId",
diff --git a/docs/generated/component-apis/drawer.json b/docs/generated/component-apis/drawer.json
index 455940af7d..c77e1dc2dd 100644
--- a/docs/generated/component-apis/drawer.json
+++ b/docs/generated/component-apis/drawer.json
@@ -1,7 +1,6 @@
{
"componentSlug": "drawer",
"extractedFrom": "libs/web-components/src/components/drawer/Drawer.svelte",
- "extractedAt": "2026-02-04T08:10:50.401Z",
"props": [
{
"name": "open",
@@ -40,7 +39,11 @@
},
{
"name": "version",
- "type": "VersionType",
+ "type": "\"1\" | \"2\"",
+ "values": [
+ "1",
+ "2"
+ ],
"required": false,
"default": "1",
"description": ""
diff --git a/docs/generated/component-apis/dropdown.json b/docs/generated/component-apis/dropdown.json
index ee0dbe9395..76012d4799 100644
--- a/docs/generated/component-apis/dropdown.json
+++ b/docs/generated/component-apis/dropdown.json
@@ -1,7 +1,6 @@
{
"componentSlug": "dropdown",
"extractedFrom": "libs/web-components/src/components/dropdown/Dropdown.svelte",
- "extractedAt": "2026-02-04T08:10:50.403Z",
"props": [
{
"name": "name",
@@ -26,11 +25,7 @@
},
{
"name": "value",
- "type": "string | undefined",
- "values": [
- "string",
- "undefined"
- ],
+ "type": "string",
"required": false,
"default": "",
"description": "Stores the value of the item selected from the dropdown."
diff --git a/docs/generated/component-apis/file-upload-card.json b/docs/generated/component-apis/file-upload-card.json
index 0290fe9ffb..eef41bd76c 100644
--- a/docs/generated/component-apis/file-upload-card.json
+++ b/docs/generated/component-apis/file-upload-card.json
@@ -1,7 +1,6 @@
{
"componentSlug": "file-upload-card",
"extractedFrom": "libs/web-components/src/components/file-upload-card/FileUploadCard.svelte",
- "extractedAt": "2026-02-04T08:10:50.404Z",
"props": [
{
"name": "filename",
diff --git a/docs/generated/component-apis/file-upload-input.json b/docs/generated/component-apis/file-upload-input.json
index 675cc1ba78..360834b1bb 100644
--- a/docs/generated/component-apis/file-upload-input.json
+++ b/docs/generated/component-apis/file-upload-input.json
@@ -1,11 +1,14 @@
{
"componentSlug": "file-upload-input",
"extractedFrom": "libs/web-components/src/components/file-upload-input/FileUploadInput.svelte",
- "extractedAt": "2026-02-04T08:10:50.404Z",
"props": [
{
"name": "variant",
- "type": "Variant",
+ "type": "\"dragdrop\" | \"button\"",
+ "values": [
+ "dragdrop",
+ "button"
+ ],
"required": false,
"default": "dragdrop",
"description": "The input display variant. \"dragdrop\" shows a drag-and-drop area, \"button\" shows a simple button."
diff --git a/docs/generated/component-apis/filter-chip.json b/docs/generated/component-apis/filter-chip.json
index 227ab5800c..ebe6047613 100644
--- a/docs/generated/component-apis/filter-chip.json
+++ b/docs/generated/component-apis/filter-chip.json
@@ -1,7 +1,6 @@
{
"componentSlug": "filter-chip",
"extractedFrom": "libs/web-components/src/components/filter-chip/FilterChip.svelte",
- "extractedAt": "2026-02-04T08:10:50.404Z",
"props": [
{
"name": "mt",
diff --git a/docs/generated/component-apis/focus-trap.json b/docs/generated/component-apis/focus-trap.json
index 5b67b45af1..fdbda8a84b 100644
--- a/docs/generated/component-apis/focus-trap.json
+++ b/docs/generated/component-apis/focus-trap.json
@@ -1,7 +1,6 @@
{
"componentSlug": "focus-trap",
"extractedFrom": "libs/web-components/src/components/focus-trap/FocusTrap.svelte",
- "extractedAt": "2026-02-04T08:10:50.405Z",
"props": [
{
"name": "open",
diff --git a/docs/generated/component-apis/footer-meta-section.json b/docs/generated/component-apis/footer-meta-section.json
index 8a0a1b2c2d..2fbe01ebb2 100644
--- a/docs/generated/component-apis/footer-meta-section.json
+++ b/docs/generated/component-apis/footer-meta-section.json
@@ -1,7 +1,6 @@
{
"componentSlug": "footer-meta-section",
"extractedFrom": "libs/web-components/src/components/footer-meta-section/FooterMetaSection.svelte",
- "extractedAt": "2026-02-04T08:10:50.405Z",
"props": [
{
"name": "testId",
diff --git a/docs/generated/component-apis/footer-nav-section.json b/docs/generated/component-apis/footer-nav-section.json
index 9891387078..c4016d9b34 100644
--- a/docs/generated/component-apis/footer-nav-section.json
+++ b/docs/generated/component-apis/footer-nav-section.json
@@ -1,7 +1,6 @@
{
"componentSlug": "footer-nav-section",
"extractedFrom": "libs/web-components/src/components/footer-nav-section/FooterNavSection.svelte",
- "extractedAt": "2026-02-04T08:10:50.406Z",
"props": [
{
"name": "heading",
diff --git a/docs/generated/component-apis/footer.json b/docs/generated/component-apis/footer.json
index a25e04ab98..fc3313b76e 100644
--- a/docs/generated/component-apis/footer.json
+++ b/docs/generated/component-apis/footer.json
@@ -1,7 +1,6 @@
{
"componentSlug": "footer",
"extractedFrom": "libs/web-components/src/components/footer/Footer.svelte",
- "extractedAt": "2026-02-04T08:10:50.405Z",
"props": [
{
"name": "maxcontentwidth",
diff --git a/docs/generated/component-apis/form-item.json b/docs/generated/component-apis/form-item.json
index f6636112fd..2785c75759 100644
--- a/docs/generated/component-apis/form-item.json
+++ b/docs/generated/component-apis/form-item.json
@@ -1,7 +1,6 @@
{
"componentSlug": "form-item",
"extractedFrom": "libs/web-components/src/components/form-item/FormItem.svelte",
- "extractedAt": "2026-02-04T08:10:50.407Z",
"props": [
{
"name": "mt",
diff --git a/docs/generated/component-apis/form-step.json b/docs/generated/component-apis/form-step.json
index 5491572709..d8bfb22ee0 100644
--- a/docs/generated/component-apis/form-step.json
+++ b/docs/generated/component-apis/form-step.json
@@ -1,7 +1,6 @@
{
"componentSlug": "form-step",
"extractedFrom": "libs/web-components/src/components/form-step/FormStep.svelte",
- "extractedAt": "2026-02-04T08:10:50.408Z",
"props": [
{
"name": "text",
@@ -12,10 +11,11 @@
},
{
"name": "status",
- "type": "FormStepStatus | undefined",
+ "type": "\"complete\" | \"incomplete\" | \"not-started\"",
"values": [
- "FormStepStatus",
- "undefined"
+ "complete",
+ "incomplete",
+ "not-started"
],
"required": false,
"default": null,
diff --git a/docs/generated/component-apis/form-stepper.json b/docs/generated/component-apis/form-stepper.json
index 83747ad003..78f1db04e2 100644
--- a/docs/generated/component-apis/form-stepper.json
+++ b/docs/generated/component-apis/form-stepper.json
@@ -1,7 +1,6 @@
{
"componentSlug": "form-stepper",
"extractedFrom": "libs/web-components/src/components/form-stepper/FormStepper.svelte",
- "extractedAt": "2026-02-04T08:10:50.408Z",
"props": [
{
"name": "step",
diff --git a/docs/generated/component-apis/form.json b/docs/generated/component-apis/form.json
index b8d1d2270d..f60c7e3fb6 100644
--- a/docs/generated/component-apis/form.json
+++ b/docs/generated/component-apis/form.json
@@ -1,7 +1,6 @@
{
"componentSlug": "form",
"extractedFrom": "libs/web-components/src/components/form/Form.svelte",
- "extractedAt": "2026-02-04T08:10:50.407Z",
"props": [
{
"name": "status",
diff --git a/docs/generated/component-apis/grid.json b/docs/generated/component-apis/grid.json
index ba37934cae..3bad56dd41 100644
--- a/docs/generated/component-apis/grid.json
+++ b/docs/generated/component-apis/grid.json
@@ -1,7 +1,6 @@
{
"componentSlug": "grid",
"extractedFrom": "libs/web-components/src/components/grid/Grid.svelte",
- "extractedAt": "2026-02-04T08:10:50.408Z",
"props": [
{
"name": "gap",
diff --git a/docs/generated/component-apis/hero-banner.json b/docs/generated/component-apis/hero-banner.json
index 38c9bc89ad..c5185159b6 100644
--- a/docs/generated/component-apis/hero-banner.json
+++ b/docs/generated/component-apis/hero-banner.json
@@ -1,7 +1,6 @@
{
"componentSlug": "hero-banner",
"extractedFrom": "libs/web-components/src/components/hero-banner/HeroBanner.svelte",
- "extractedAt": "2026-02-04T08:10:50.408Z",
"props": [
{
"name": "heading",
diff --git a/docs/generated/component-apis/icon-button.json b/docs/generated/component-apis/icon-button.json
index 19cec5c09f..9b3ca9c4e2 100644
--- a/docs/generated/component-apis/icon-button.json
+++ b/docs/generated/component-apis/icon-button.json
@@ -1,7 +1,6 @@
{
"componentSlug": "icon-button",
"extractedFrom": "libs/web-components/src/components/icon-button/IconButton.svelte",
- "extractedAt": "2026-02-04T08:10:50.410Z",
"props": [
{
"name": "icon",
diff --git a/docs/generated/component-apis/icon.json b/docs/generated/component-apis/icon.json
index a8ebbfecff..d69598cc20 100644
--- a/docs/generated/component-apis/icon.json
+++ b/docs/generated/component-apis/icon.json
@@ -1,7 +1,6 @@
{
"componentSlug": "icon",
"extractedFrom": "libs/web-components/src/components/icon/Icon.svelte",
- "extractedAt": "2026-02-04T08:10:50.410Z",
"props": [
{
"name": "mt",
@@ -37,22 +36,546 @@
},
{
"name": "type",
- "type": "GoAIconType",
+ "type": "\"accessibility\" | \"add-circle\" | \"add\" | \"airplane\" | \"alarm\" | \"albums\" | \"alert-circle\" | \"alert\" | \"american-football\" | \"analytics\" | \"aperture\" | \"apps\" | \"archive\" | \"arrow-back-circle\" | \"arrow-back\" | \"arrow-down-circle\" | \"arrow-down\" | \"arrow-forward-circle\" | \"arrow-forward\" | \"arrow-redo-circle\" | \"arrow-redo\" | \"arrow-undo-circle\" | \"arrow-undo\" | \"arrow-up-circle\" | \"arrow-up\" | \"at-circle\" | \"at\" | \"attach\" | \"backspace\" | \"bag-add\" | \"bag-check\" | \"bag-handle\" | \"bag\" | \"bag-remove\" | \"balloon\" | \"ban\" | \"bandage\" | \"bar-chart\" | \"barbell\" | \"barcode\" | \"baseball\" | \"basket\" | \"basketball\" | \"battery-charging\" | \"battery-dead\" | \"battery-full\" | \"battery-half\" | \"beaker\" | \"bed\" | \"beer\" | \"bicycle\" | \"bluetooth\" | \"boat\" | \"body\" | \"bonfire\" | \"book\" | \"bookmark\" | \"bookmarks\" | \"bowling-ball\" | \"briefcase\" | \"browsers\" | \"brush\" | \"bug\" | \"build\" | \"bulb\" | \"bus\" | \"business\" | \"cafe\" | \"calculator\" | \"calendar-clear\" | \"calendar-number\" | \"calendar\" | \"call\" | \"camera\" | \"camera-reverse\" | \"car\" | \"car-sport\" | \"card\" | \"caret-back-circle\" | \"caret-back\" | \"caret-down-circle\" | \"caret-down\" | \"caret-forward-circle\" | \"caret-forward\" | \"caret-up-circle\" | \"caret-up\" | \"cart\" | \"cash\" | \"cellular\" | \"chatbox-ellipses\" | \"chatbox\" | \"chatbubble-ellipses\" | \"chatbubble\" | \"chatbubbles\" | \"checkbox\" | \"checkmark-circle\" | \"checkmark-done-circle\" | \"checkmark-done\" | \"chevron-back-circle\" | \"chevron-back\" | \"chevron-down-circle\" | \"chevron-down\" | \"chevron-expand\" | \"chevron-forward-circle\" | \"chevron-forward\" | \"chevron-up-circle\" | \"chevron-up\" | \"clipboard\" | \"close-circle\" | \"close\" | \"cloud-circle\" | \"cloud-done\" | \"cloud-download\" | \"cloud-offline\" | \"cloud\" | \"cloud-upload\" | \"cloudy-night\" | \"cloudy\" | \"code-download\" | \"code\" | \"code-slash\" | \"code-working\" | \"cog\" | \"color-fill\" | \"color-filter\" | \"color-palette\" | \"color-wand\" | \"compass\" | \"construct\" | \"contract\" | \"contrast\" | \"copy\" | \"create\" | \"crop\" | \"cube\" | \"cut\" | \"desktop\" | \"diamond\" | \"dice\" | \"disc\" | \"document-attach\" | \"document-lock\" | \"document\" | \"document-text\" | \"documents\" | \"download\" | \"duplicate\" | \"ear\" | \"earth\" | \"easel\" | \"egg\" | \"ellipse\" | \"ellipsis-horizontal-circle\" | \"ellipsis-horizontal\" | \"ellipsis-vertical-circle\" | \"ellipsis-vertical\" | \"enter\" | \"exit\" | \"expand\" | \"extension-puzzle\" | \"eye-off\" | \"eye\" | \"eyedrop\" | \"fast-food\" | \"female\" | \"file-tray-full\" | \"file-tray\" | \"file-tray-stacked\" | \"filenames.ps1\" | \"film\" | \"filter-circle\" | \"filter-lines\" | \"filter\" | \"finger-print\" | \"fish\" | \"fitness\" | \"flag\" | \"flame\" | \"flash-off\" | \"flash\" | \"flashlight\" | \"flask\" | \"flower\" | \"folder-open\" | \"folder\" | \"football\" | \"footsteps\" | \"funnel\" | \"game-controller\" | \"gift\" | \"git-branch\" | \"git-commit\" | \"git-compare\" | \"git-merge\" | \"git-network\" | \"git-pull-request\" | \"glasses\" | \"globe\" | \"golf\" | \"grid\" | \"hammer\" | \"hand-left\" | \"hand-right\" | \"happy\" | \"hardware-chip\" | \"headset\" | \"heart-circle\" | \"heart-dislike-circle\" | \"heart-dislike\" | \"heart-half\" | \"heart\" | \"help-buoy\" | \"help-circle\" | \"help\" | \"home\" | \"hourglass\" | \"ice-cream\" | \"id-card\" | \"image\" | \"images\" | \"infinite\" | \"information-circle\" | \"information\" | \"invert-mode\" | \"journal\" | \"key\" | \"keypad\" | \"language\" | \"laptop\" | \"layers\" | \"leaf\" | \"library\" | \"link\" | \"list-circle\" | \"list\" | \"locate\" | \"location\" | \"lock-closed\" | \"lock-open\" | \"log-in\" | \"log-out\" | \"magnet\" | \"mail-open\" | \"mail\" | \"mail-unread\" | \"male-female\" | \"male\" | \"man\" | \"map\" | \"medal\" | \"medical\" | \"medkit\" | \"megaphone\" | \"menu\" | \"mic-circle\" | \"mic-off-circle\" | \"mic-off\" | \"mic\" | \"moon\" | \"move\" | \"musical-note\" | \"musical-notes\" | \"navigate-circle\" | \"navigate\" | \"newspaper\" | \"notifications-circle\" | \"notifications-off-circle\" | \"notifications-off\" | \"notifications\" | \"nuclear\" | \"nutrition\" | \"open\" | \"options\" | \"paper-plane\" | \"partly-sunny\" | \"pause-circle\" | \"pause\" | \"paw\" | \"people-circle\" | \"people\" | \"person-add\" | \"person-circle\" | \"person\" | \"person-remove\" | \"phone-landscape\" | \"phone-portrait\" | \"pie-chart\" | \"pin\" | \"pint\" | \"pizza\" | \"planet\" | \"play-back-circle\" | \"play-back\" | \"play-circle\" | \"play-forward-circle\" | \"play-forward\" | \"play\" | \"play-skip-back-circle\" | \"play-skip-back\" | \"play-skip-forward-circle\" | \"play-skip-forward\" | \"podium\" | \"power\" | \"pricetag\" | \"pricetags\" | \"print\" | \"prism\" | \"pulse\" | \"push\" | \"qr-code\" | \"radio-button-off\" | \"radio-button-on\" | \"radio\" | \"rainy\" | \"reader\" | \"receipt\" | \"recording\" | \"refresh-circle\" | \"refresh\" | \"reload-circle\" | \"reload\" | \"remove-circle\" | \"reorder-four\" | \"reorder-three\" | \"reorder-two\" | \"repeat\" | \"resize\" | \"restaurant\" | \"return-down-back\" | \"return-down-forward\" | \"return-up-back\" | \"return-up-forward\" | \"ribbon\" | \"rocket\" | \"rose\" | \"sad\" | \"save\" | \"scale\" | \"scan-circle\" | \"scan\" | \"school\" | \"search-circle\" | \"search\" | \"send\" | \"server\" | \"settings\" | \"shapes\" | \"share\" | \"share-social\" | \"shield-checkmark\" | \"shield-half\" | \"shield\" | \"shirt\" | \"shuffle\" | \"skull\" | \"snow\" | \"sparkles\" | \"speedometer\" | \"square\" | \"star-half\" | \"star\" | \"stats-chart\" | \"stop-circle\" | \"stop\" | \"stopwatch\" | \"storefront\" | \"subway\" | \"sunny\" | \"swap-horizontal\" | \"swap-vertical\" | \"sync-circle\" | \"sync\" | \"tablet-landscape\" | \"tablet-portrait\" | \"telescope\" | \"tennisball\" | \"terminal\" | \"text\" | \"thermometer\" | \"thumbs-down\" | \"thumbs-up\" | \"thunderstorm\" | \"ticket\" | \"time\" | \"timer\" | \"today\" | \"toggle\" | \"trail-sign\" | \"train\" | \"transgender\" | \"trash-bin\" | \"trash\" | \"trending-down\" | \"trending-up\" | \"triangle\" | \"trophy\" | \"tv\" | \"umbrella\" | \"unlink\" | \"videocam-off\" | \"videocam\" | \"volume-high\" | \"volume-low\" | \"volume-medium\" | \"volume-mute\" | \"volume-off\" | \"walk\" | \"wallet\" | \"warning\" | \"watch\" | \"water\" | \"wifi\" | \"wine\" | \"woman\" | \"logo-alipay\" | \"logo-amazon\" | \"logo-amplify\" | \"logo-android\" | \"logo-angular\" | \"logo-apple\" | \"logo-apple-appstore\" | \"logo-apple-ar\" | \"logo-behance\" | \"logo-bitbucket\" | \"logo-bitcoin\" | \"logo-buffer\" | \"logo-capacitor\" | \"logo-chrome\" | \"logo-closed-captioning\" | \"logo-codepen\" | \"logo-css3\" | \"logo-designernews\" | \"logo-deviantart\" | \"logo-discord\" | \"logo-docker\" | \"logo-dribbble\" | \"logo-dropbox\" | \"logo-edge\" | \"logo-electron\" | \"logo-euro\" | \"logo-facebook\" | \"logo-figma\" | \"logo-firebase\" | \"logo-firefox\" | \"logo-flickr\" | \"logo-foursquare\" | \"logo-github\" | \"logo-gitlab\" | \"logo-google\" | \"logo-google-playstore\" | \"logo-hackernews\" | \"logo-html5\" | \"logo-instagram\" | \"logo-ionic\" | \"logo-ionitron\" | \"logo-javascript\" | \"logo-laravel\" | \"logo-linkedin\" | \"logo-markdown\" | \"logo-mastodon\" | \"logo-medium\" | \"logo-microsoft\" | \"logo-no-smoking\" | \"logo-nodejs\" | \"logo-npm\" | \"logo-octocat\" | \"logo-paypal\" | \"logo-pinterest\" | \"logo-playstation\" | \"logo-pwa\" | \"logo-python\" | \"logo-react\" | \"logo-reddit\" | \"logo-rss\" | \"logo-sass\" | \"logo-skype\" | \"logo-slack\" | \"logo-snapchat\" | \"logo-soundcloud\" | \"logo-stackoverflow\" | \"logo-steam\" | \"logo-stencil\" | \"logo-tableau\" | \"logo-tiktok\" | \"logo-tumblr\" | \"logo-tux\" | \"logo-twitch\" | \"logo-twitter\" | \"logo-usd\" | \"logo-venmo\" | \"logo-vercel\" | \"logo-vimeo\" | \"logo-vk\" | \"logo-vue\" | \"logo-web-component\" | \"logo-wechat\" | \"logo-whatsapp\" | \"logo-windows\" | \"logo-wordpress\" | \"logo-xbox\" | \"logo-xing\" | \"logo-yahoo\" | \"logo-yen\" | \"logo-youtube\"",
"typeLabel": "GoAIconType",
+ "values": [
+ "accessibility",
+ "add-circle",
+ "add",
+ "airplane",
+ "alarm",
+ "albums",
+ "alert-circle",
+ "alert",
+ "american-football",
+ "analytics",
+ "aperture",
+ "apps",
+ "archive",
+ "arrow-back-circle",
+ "arrow-back",
+ "arrow-down-circle",
+ "arrow-down",
+ "arrow-forward-circle",
+ "arrow-forward",
+ "arrow-redo-circle",
+ "arrow-redo",
+ "arrow-undo-circle",
+ "arrow-undo",
+ "arrow-up-circle",
+ "arrow-up",
+ "at-circle",
+ "at",
+ "attach",
+ "backspace",
+ "bag-add",
+ "bag-check",
+ "bag-handle",
+ "bag",
+ "bag-remove",
+ "balloon",
+ "ban",
+ "bandage",
+ "bar-chart",
+ "barbell",
+ "barcode",
+ "baseball",
+ "basket",
+ "basketball",
+ "battery-charging",
+ "battery-dead",
+ "battery-full",
+ "battery-half",
+ "beaker",
+ "bed",
+ "beer",
+ "bicycle",
+ "bluetooth",
+ "boat",
+ "body",
+ "bonfire",
+ "book",
+ "bookmark",
+ "bookmarks",
+ "bowling-ball",
+ "briefcase",
+ "browsers",
+ "brush",
+ "bug",
+ "build",
+ "bulb",
+ "bus",
+ "business",
+ "cafe",
+ "calculator",
+ "calendar-clear",
+ "calendar-number",
+ "calendar",
+ "call",
+ "camera",
+ "camera-reverse",
+ "car",
+ "car-sport",
+ "card",
+ "caret-back-circle",
+ "caret-back",
+ "caret-down-circle",
+ "caret-down",
+ "caret-forward-circle",
+ "caret-forward",
+ "caret-up-circle",
+ "caret-up",
+ "cart",
+ "cash",
+ "cellular",
+ "chatbox-ellipses",
+ "chatbox",
+ "chatbubble-ellipses",
+ "chatbubble",
+ "chatbubbles",
+ "checkbox",
+ "checkmark-circle",
+ "checkmark-done-circle",
+ "checkmark-done",
+ "chevron-back-circle",
+ "chevron-back",
+ "chevron-down-circle",
+ "chevron-down",
+ "chevron-expand",
+ "chevron-forward-circle",
+ "chevron-forward",
+ "chevron-up-circle",
+ "chevron-up",
+ "clipboard",
+ "close-circle",
+ "close",
+ "cloud-circle",
+ "cloud-done",
+ "cloud-download",
+ "cloud-offline",
+ "cloud",
+ "cloud-upload",
+ "cloudy-night",
+ "cloudy",
+ "code-download",
+ "code",
+ "code-slash",
+ "code-working",
+ "cog",
+ "color-fill",
+ "color-filter",
+ "color-palette",
+ "color-wand",
+ "compass",
+ "construct",
+ "contract",
+ "contrast",
+ "copy",
+ "create",
+ "crop",
+ "cube",
+ "cut",
+ "desktop",
+ "diamond",
+ "dice",
+ "disc",
+ "document-attach",
+ "document-lock",
+ "document",
+ "document-text",
+ "documents",
+ "download",
+ "duplicate",
+ "ear",
+ "earth",
+ "easel",
+ "egg",
+ "ellipse",
+ "ellipsis-horizontal-circle",
+ "ellipsis-horizontal",
+ "ellipsis-vertical-circle",
+ "ellipsis-vertical",
+ "enter",
+ "exit",
+ "expand",
+ "extension-puzzle",
+ "eye-off",
+ "eye",
+ "eyedrop",
+ "fast-food",
+ "female",
+ "file-tray-full",
+ "file-tray",
+ "file-tray-stacked",
+ "filenames.ps1",
+ "film",
+ "filter-circle",
+ "filter-lines",
+ "filter",
+ "finger-print",
+ "fish",
+ "fitness",
+ "flag",
+ "flame",
+ "flash-off",
+ "flash",
+ "flashlight",
+ "flask",
+ "flower",
+ "folder-open",
+ "folder",
+ "football",
+ "footsteps",
+ "funnel",
+ "game-controller",
+ "gift",
+ "git-branch",
+ "git-commit",
+ "git-compare",
+ "git-merge",
+ "git-network",
+ "git-pull-request",
+ "glasses",
+ "globe",
+ "golf",
+ "grid",
+ "hammer",
+ "hand-left",
+ "hand-right",
+ "happy",
+ "hardware-chip",
+ "headset",
+ "heart-circle",
+ "heart-dislike-circle",
+ "heart-dislike",
+ "heart-half",
+ "heart",
+ "help-buoy",
+ "help-circle",
+ "help",
+ "home",
+ "hourglass",
+ "ice-cream",
+ "id-card",
+ "image",
+ "images",
+ "infinite",
+ "information-circle",
+ "information",
+ "invert-mode",
+ "journal",
+ "key",
+ "keypad",
+ "language",
+ "laptop",
+ "layers",
+ "leaf",
+ "library",
+ "link",
+ "list-circle",
+ "list",
+ "locate",
+ "location",
+ "lock-closed",
+ "lock-open",
+ "log-in",
+ "log-out",
+ "magnet",
+ "mail-open",
+ "mail",
+ "mail-unread",
+ "male-female",
+ "male",
+ "man",
+ "map",
+ "medal",
+ "medical",
+ "medkit",
+ "megaphone",
+ "menu",
+ "mic-circle",
+ "mic-off-circle",
+ "mic-off",
+ "mic",
+ "moon",
+ "move",
+ "musical-note",
+ "musical-notes",
+ "navigate-circle",
+ "navigate",
+ "newspaper",
+ "notifications-circle",
+ "notifications-off-circle",
+ "notifications-off",
+ "notifications",
+ "nuclear",
+ "nutrition",
+ "open",
+ "options",
+ "paper-plane",
+ "partly-sunny",
+ "pause-circle",
+ "pause",
+ "paw",
+ "people-circle",
+ "people",
+ "person-add",
+ "person-circle",
+ "person",
+ "person-remove",
+ "phone-landscape",
+ "phone-portrait",
+ "pie-chart",
+ "pin",
+ "pint",
+ "pizza",
+ "planet",
+ "play-back-circle",
+ "play-back",
+ "play-circle",
+ "play-forward-circle",
+ "play-forward",
+ "play",
+ "play-skip-back-circle",
+ "play-skip-back",
+ "play-skip-forward-circle",
+ "play-skip-forward",
+ "podium",
+ "power",
+ "pricetag",
+ "pricetags",
+ "print",
+ "prism",
+ "pulse",
+ "push",
+ "qr-code",
+ "radio-button-off",
+ "radio-button-on",
+ "radio",
+ "rainy",
+ "reader",
+ "receipt",
+ "recording",
+ "refresh-circle",
+ "refresh",
+ "reload-circle",
+ "reload",
+ "remove-circle",
+ "reorder-four",
+ "reorder-three",
+ "reorder-two",
+ "repeat",
+ "resize",
+ "restaurant",
+ "return-down-back",
+ "return-down-forward",
+ "return-up-back",
+ "return-up-forward",
+ "ribbon",
+ "rocket",
+ "rose",
+ "sad",
+ "save",
+ "scale",
+ "scan-circle",
+ "scan",
+ "school",
+ "search-circle",
+ "search",
+ "send",
+ "server",
+ "settings",
+ "shapes",
+ "share",
+ "share-social",
+ "shield-checkmark",
+ "shield-half",
+ "shield",
+ "shirt",
+ "shuffle",
+ "skull",
+ "snow",
+ "sparkles",
+ "speedometer",
+ "square",
+ "star-half",
+ "star",
+ "stats-chart",
+ "stop-circle",
+ "stop",
+ "stopwatch",
+ "storefront",
+ "subway",
+ "sunny",
+ "swap-horizontal",
+ "swap-vertical",
+ "sync-circle",
+ "sync",
+ "tablet-landscape",
+ "tablet-portrait",
+ "telescope",
+ "tennisball",
+ "terminal",
+ "text",
+ "thermometer",
+ "thumbs-down",
+ "thumbs-up",
+ "thunderstorm",
+ "ticket",
+ "time",
+ "timer",
+ "today",
+ "toggle",
+ "trail-sign",
+ "train",
+ "transgender",
+ "trash-bin",
+ "trash",
+ "trending-down",
+ "trending-up",
+ "triangle",
+ "trophy",
+ "tv",
+ "umbrella",
+ "unlink",
+ "videocam-off",
+ "videocam",
+ "volume-high",
+ "volume-low",
+ "volume-medium",
+ "volume-mute",
+ "volume-off",
+ "walk",
+ "wallet",
+ "warning",
+ "watch",
+ "water",
+ "wifi",
+ "wine",
+ "woman",
+ "logo-alipay",
+ "logo-amazon",
+ "logo-amplify",
+ "logo-android",
+ "logo-angular",
+ "logo-apple",
+ "logo-apple-appstore",
+ "logo-apple-ar",
+ "logo-behance",
+ "logo-bitbucket",
+ "logo-bitcoin",
+ "logo-buffer",
+ "logo-capacitor",
+ "logo-chrome",
+ "logo-closed-captioning",
+ "logo-codepen",
+ "logo-css3",
+ "logo-designernews",
+ "logo-deviantart",
+ "logo-discord",
+ "logo-docker",
+ "logo-dribbble",
+ "logo-dropbox",
+ "logo-edge",
+ "logo-electron",
+ "logo-euro",
+ "logo-facebook",
+ "logo-figma",
+ "logo-firebase",
+ "logo-firefox",
+ "logo-flickr",
+ "logo-foursquare",
+ "logo-github",
+ "logo-gitlab",
+ "logo-google",
+ "logo-google-playstore",
+ "logo-hackernews",
+ "logo-html5",
+ "logo-instagram",
+ "logo-ionic",
+ "logo-ionitron",
+ "logo-javascript",
+ "logo-laravel",
+ "logo-linkedin",
+ "logo-markdown",
+ "logo-mastodon",
+ "logo-medium",
+ "logo-microsoft",
+ "logo-no-smoking",
+ "logo-nodejs",
+ "logo-npm",
+ "logo-octocat",
+ "logo-paypal",
+ "logo-pinterest",
+ "logo-playstation",
+ "logo-pwa",
+ "logo-python",
+ "logo-react",
+ "logo-reddit",
+ "logo-rss",
+ "logo-sass",
+ "logo-skype",
+ "logo-slack",
+ "logo-snapchat",
+ "logo-soundcloud",
+ "logo-stackoverflow",
+ "logo-steam",
+ "logo-stencil",
+ "logo-tableau",
+ "logo-tiktok",
+ "logo-tumblr",
+ "logo-tux",
+ "logo-twitch",
+ "logo-twitter",
+ "logo-usd",
+ "logo-venmo",
+ "logo-vercel",
+ "logo-vimeo",
+ "logo-vk",
+ "logo-vue",
+ "logo-web-component",
+ "logo-wechat",
+ "logo-whatsapp",
+ "logo-windows",
+ "logo-wordpress",
+ "logo-xbox",
+ "logo-xing",
+ "logo-yahoo",
+ "logo-yen",
+ "logo-youtube"
+ ],
"required": true,
"default": null,
"description": "The icon type to display. See GoAIconType for available icons."
},
{
"name": "size",
- "type": "IconSize",
+ "type": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"2xsmall\" | \"xsmall\" | \"small\" | \"medium\" | \"large\" | \"xlarge\"",
+ "values": [
+ "1",
+ "2",
+ "3",
+ "4",
+ "5",
+ "6",
+ "2xsmall",
+ "xsmall",
+ "small",
+ "medium",
+ "large",
+ "xlarge"
+ ],
"required": false,
"default": "medium",
"description": "Sets the size of the icon. Accepts numeric (1-6) or named sizes."
},
{
"name": "theme",
- "type": "IconTheme",
+ "type": "\"outline\" | \"filled\"",
+ "values": [
+ "outline",
+ "filled"
+ ],
"required": false,
"default": "outline",
"description": "Sets the icon theme. 'outline' shows stroked icons, 'filled' shows solid icons."
diff --git a/docs/generated/component-apis/input.json b/docs/generated/component-apis/input.json
index 71c8e0d3a1..9faee7dc10 100644
--- a/docs/generated/component-apis/input.json
+++ b/docs/generated/component-apis/input.json
@@ -1,7 +1,6 @@
{
"componentSlug": "input",
"extractedFrom": "libs/web-components/src/components/input/Input.svelte",
- "extractedAt": "2026-02-04T08:10:50.410Z",
"props": [
{
"name": "type",
@@ -88,7 +87,11 @@
},
{
"name": "variant",
- "type": "GoAInputVariant",
+ "type": "\"goa\" | \"bare\"",
+ "values": [
+ "goa",
+ "bare"
+ ],
"required": false,
"default": "goa",
"description": "Sets the visual style variant. 'goa' for standard GoA styling, 'bare' for minimal styling."
@@ -202,11 +205,7 @@
},
{
"name": "maxLength",
- "type": "number | null",
- "values": [
- "number",
- "null"
- ],
+ "type": "number",
"required": false,
"default": null,
"description": "Defines the maximum number of characters (as UTF-16 code units) the user can enter into the input."
diff --git a/docs/generated/component-apis/linear-progress.json b/docs/generated/component-apis/linear-progress.json
index f6b94e16c6..22c95b034e 100644
--- a/docs/generated/component-apis/linear-progress.json
+++ b/docs/generated/component-apis/linear-progress.json
@@ -1,26 +1,17 @@
{
"componentSlug": "linear-progress",
"extractedFrom": "libs/web-components/src/components/linear-progress/LinearProgress.svelte",
- "extractedAt": "2026-02-04T08:10:50.411Z",
"props": [
{
"name": "testId",
- "type": "string | undefined",
- "values": [
- "string",
- "undefined"
- ],
+ "type": "string",
"required": false,
"default": null,
"description": "Sets a data-testid attribute for automated testing."
},
{
"name": "progress",
- "type": "number | undefined",
- "values": [
- "number",
- "undefined"
- ],
+ "type": "number",
"required": false,
"default": null,
"description": "Progress value (0-100). When undefined, shows an indeterminate loading animation."
@@ -38,22 +29,14 @@
},
{
"name": "ariaLabel",
- "type": "string | undefined",
- "values": [
- "string",
- "undefined"
- ],
+ "type": "string",
"required": false,
"default": null,
"description": "Accessible label for the progress bar."
},
{
"name": "ariaLabelledBy",
- "type": "string | undefined",
- "values": [
- "string",
- "undefined"
- ],
+ "type": "string",
"required": false,
"default": null,
"description": "ID of the element that labels this progress bar."
diff --git a/docs/generated/component-apis/link-button.json b/docs/generated/component-apis/link-button.json
index c64d4b4ec5..2c1bb9e6bd 100644
--- a/docs/generated/component-apis/link-button.json
+++ b/docs/generated/component-apis/link-button.json
@@ -1,7 +1,6 @@
{
"componentSlug": "link-button",
"extractedFrom": "libs/web-components/src/components/link-button/LinkButton.svelte",
- "extractedAt": "2026-02-04T08:10:50.411Z",
"props": [
{
"name": "color",
diff --git a/docs/generated/component-apis/link.json b/docs/generated/component-apis/link.json
index 1b37ff7aee..fbd438df74 100644
--- a/docs/generated/component-apis/link.json
+++ b/docs/generated/component-apis/link.json
@@ -1,7 +1,6 @@
{
"componentSlug": "link",
"extractedFrom": "libs/web-components/src/components/link/Link.svelte",
- "extractedAt": "2026-02-04T08:10:50.411Z",
"props": [
{
"name": "leadingIcon",
diff --git a/docs/generated/component-apis/menu-action.json b/docs/generated/component-apis/menu-action.json
new file mode 100644
index 0000000000..be59c631e3
--- /dev/null
+++ b/docs/generated/component-apis/menu-action.json
@@ -0,0 +1,37 @@
+{
+ "componentSlug": "menu-action",
+ "extractedFrom": "libs/web-components/src/components/menu-button/MenuAction.svelte",
+ "props": [
+ {
+ "name": "text",
+ "type": "string",
+ "required": false,
+ "default": "",
+ "description": "Display text for the menu action."
+ },
+ {
+ "name": "action",
+ "type": "string",
+ "required": false,
+ "default": "default",
+ "description": "Action identifier included in the click event."
+ },
+ {
+ "name": "testId",
+ "type": "string",
+ "required": false,
+ "default": "",
+ "description": "Sets a data-testid attribute for automated testing."
+ },
+ {
+ "name": "icon",
+ "type": "GoAIconType",
+ "typeLabel": "GoAIconType",
+ "required": false,
+ "default": null,
+ "description": "Icon displayed before the text."
+ }
+ ],
+ "events": [],
+ "slots": []
+}
diff --git a/docs/generated/component-apis/menu-button.json b/docs/generated/component-apis/menu-button.json
index 4cb1dd24ce..ac9450c0d9 100644
--- a/docs/generated/component-apis/menu-button.json
+++ b/docs/generated/component-apis/menu-button.json
@@ -1,13 +1,12 @@
{
"componentSlug": "menu-button",
"extractedFrom": "libs/web-components/src/components/menu-button/MenuButton.svelte",
- "extractedAt": "2026-02-04T08:10:50.411Z",
"props": [
{
"name": "text",
"type": "string",
- "required": true,
- "default": null,
+ "required": false,
+ "default": "",
"description": "The button label text. When provided, displays as a text button with a dropdown icon."
},
{
@@ -43,6 +42,35 @@
"required": true,
"default": null,
"description": "Maximum width of the dropdown menu."
+ },
+ {
+ "name": "size",
+ "type": "\"normal\" | \"compact\"",
+ "values": [
+ "normal",
+ "compact"
+ ],
+ "required": false,
+ "default": "normal",
+ "description": "Sets the size of the button."
+ },
+ {
+ "name": "variant",
+ "type": "\"normal\" | \"destructive\"",
+ "values": [
+ "normal",
+ "destructive"
+ ],
+ "required": false,
+ "default": "normal",
+ "description": "Sets the color variant for semantic meaning."
+ },
+ {
+ "name": "ariaLabel",
+ "type": "string",
+ "required": false,
+ "default": "Open menu",
+ "description": "Sets the aria-label for the icon button in icon-only mode."
}
],
"events": [
diff --git a/docs/generated/component-apis/microsite-header.json b/docs/generated/component-apis/microsite-header.json
index 0ae09d208d..fa93c3147f 100644
--- a/docs/generated/component-apis/microsite-header.json
+++ b/docs/generated/component-apis/microsite-header.json
@@ -1,7 +1,6 @@
{
"componentSlug": "microsite-header",
"extractedFrom": "libs/web-components/src/components/microsite-header/MicrositeHeader.svelte",
- "extractedAt": "2026-02-04T08:10:50.412Z",
"props": [
{
"name": "type",
diff --git a/docs/generated/component-apis/modal.json b/docs/generated/component-apis/modal.json
index 6fa18e10b1..592278d64c 100644
--- a/docs/generated/component-apis/modal.json
+++ b/docs/generated/component-apis/modal.json
@@ -1,7 +1,6 @@
{
"componentSlug": "modal",
"extractedFrom": "libs/web-components/src/components/modal/Modal.svelte",
- "extractedAt": "2026-02-04T08:10:50.412Z",
"props": [
{
"name": "heading",
@@ -39,11 +38,7 @@
},
{
"name": "calloutVariant",
- "type": "CalloutVariant | null",
- "values": [
- "CalloutVariant",
- "null"
- ],
+ "type": "\"\"",
"required": false,
"default": null,
"description": "Define the context and colour of the callout modal. It is required when type is set to callout."
diff --git a/docs/generated/component-apis/notification.json b/docs/generated/component-apis/notification.json
index c75e4dcedb..8f6ac51b2a 100644
--- a/docs/generated/component-apis/notification.json
+++ b/docs/generated/component-apis/notification.json
@@ -1,7 +1,6 @@
{
"componentSlug": "notification",
"extractedFrom": "libs/web-components/src/components/notification/Notification.svelte",
- "extractedAt": "2026-02-04T08:10:50.413Z",
"props": [
{
"name": "type",
diff --git a/docs/generated/component-apis/page-block.json b/docs/generated/component-apis/page-block.json
index 4e24858b7a..a38dd13162 100644
--- a/docs/generated/component-apis/page-block.json
+++ b/docs/generated/component-apis/page-block.json
@@ -1,11 +1,14 @@
{
"componentSlug": "page-block",
"extractedFrom": "libs/web-components/src/components/page-block/PageBlock.svelte",
- "extractedAt": "2026-02-04T08:10:50.413Z",
"props": [
{
"name": "width",
- "type": "Size",
+ "type": "\"full\" | string",
+ "values": [
+ "full",
+ "string"
+ ],
"required": false,
"default": "full",
"description": "Maximum width of the content area. Use \"full\" for 100% width or a CSS dimension like \"1200px\"."
diff --git a/docs/generated/component-apis/pages.json b/docs/generated/component-apis/pages.json
index e0bcf9e6f0..11a1560d9a 100644
--- a/docs/generated/component-apis/pages.json
+++ b/docs/generated/component-apis/pages.json
@@ -1,7 +1,6 @@
{
"componentSlug": "pages",
"extractedFrom": "libs/web-components/src/components/pages/Pages.svelte",
- "extractedAt": "2026-02-04T08:10:50.413Z",
"props": [
{
"name": "current",
diff --git a/docs/generated/component-apis/pagination.json b/docs/generated/component-apis/pagination.json
index 1ccbeb877b..fd65d9187c 100644
--- a/docs/generated/component-apis/pagination.json
+++ b/docs/generated/component-apis/pagination.json
@@ -1,7 +1,6 @@
{
"componentSlug": "pagination",
"extractedFrom": "libs/web-components/src/components/pagination/Pagination.svelte",
- "extractedAt": "2026-02-04T08:10:50.414Z",
"props": [
{
"name": "pagenumber",
diff --git a/docs/generated/component-apis/popover.json b/docs/generated/component-apis/popover.json
index 812189843a..ee57a4dfb6 100644
--- a/docs/generated/component-apis/popover.json
+++ b/docs/generated/component-apis/popover.json
@@ -1,7 +1,6 @@
{
"componentSlug": "popover",
"extractedFrom": "libs/web-components/src/components/popover/Popover.svelte",
- "extractedAt": "2026-02-04T08:10:50.414Z",
"props": [
{
"name": "testId",
diff --git a/docs/generated/component-apis/push-drawer.json b/docs/generated/component-apis/push-drawer.json
new file mode 100644
index 0000000000..41d1a3e8bd
--- /dev/null
+++ b/docs/generated/component-apis/push-drawer.json
@@ -0,0 +1,45 @@
+{
+ "componentSlug": "push-drawer",
+ "extractedFrom": "libs/web-components/src/components/push-drawer/PushDrawer.svelte",
+ "props": [
+ {
+ "name": "testId",
+ "type": "string",
+ "required": false,
+ "default": null,
+ "description": ""
+ },
+ {
+ "name": "open",
+ "type": "boolean",
+ "required": false,
+ "default": "false",
+ "description": ""
+ },
+ {
+ "name": "heading",
+ "type": "string",
+ "required": false,
+ "default": "",
+ "description": ""
+ },
+ {
+ "name": "width",
+ "type": "string",
+ "required": false,
+ "default": "492px",
+ "description": ""
+ }
+ ],
+ "events": [],
+ "slots": [
+ {
+ "name": "default",
+ "description": ""
+ },
+ {
+ "name": "actions",
+ "description": ""
+ }
+ ]
+}
\ No newline at end of file
diff --git a/docs/generated/component-apis/radio-group.json b/docs/generated/component-apis/radio-group.json
index e31334346e..7c04d97a54 100644
--- a/docs/generated/component-apis/radio-group.json
+++ b/docs/generated/component-apis/radio-group.json
@@ -1,7 +1,6 @@
{
"componentSlug": "radio-group",
"extractedFrom": "libs/web-components/src/components/radio-group/RadioGroup.svelte",
- "extractedAt": "2026-02-04T08:10:50.414Z",
"props": [
{
"name": "name",
diff --git a/docs/generated/component-apis/radio-item.json b/docs/generated/component-apis/radio-item.json
index db42e1f0c3..13e6d1b66c 100644
--- a/docs/generated/component-apis/radio-item.json
+++ b/docs/generated/component-apis/radio-item.json
@@ -1,7 +1,6 @@
{
"componentSlug": "radio-item",
"extractedFrom": "libs/web-components/src/components/radio-item/RadioItem.svelte",
- "extractedAt": "2026-02-04T08:10:50.415Z",
"props": [
{
"name": "value",
diff --git a/docs/generated/component-apis/scrollable.json b/docs/generated/component-apis/scrollable.json
index b32f101347..4c2302a60a 100644
--- a/docs/generated/component-apis/scrollable.json
+++ b/docs/generated/component-apis/scrollable.json
@@ -1,7 +1,6 @@
{
"componentSlug": "scrollable",
"extractedFrom": "libs/web-components/src/components/scrollable/Scrollable.svelte",
- "extractedAt": "2026-02-04T08:10:50.415Z",
"props": [
{
"name": "direction",
diff --git a/docs/generated/component-apis/side-menu-group.json b/docs/generated/component-apis/side-menu-group.json
index 220791b633..ff25664e78 100644
--- a/docs/generated/component-apis/side-menu-group.json
+++ b/docs/generated/component-apis/side-menu-group.json
@@ -1,7 +1,6 @@
{
"componentSlug": "side-menu-group",
"extractedFrom": "libs/web-components/src/components/side-menu-group/SideMenuGroup.svelte",
- "extractedAt": "2026-02-04T08:10:50.416Z",
"props": [
{
"name": "heading",
diff --git a/docs/generated/component-apis/side-menu-heading.json b/docs/generated/component-apis/side-menu-heading.json
index 9e066317fc..b68372cac7 100644
--- a/docs/generated/component-apis/side-menu-heading.json
+++ b/docs/generated/component-apis/side-menu-heading.json
@@ -1,7 +1,6 @@
{
"componentSlug": "side-menu-heading",
"extractedFrom": "libs/web-components/src/components/side-menu-heading/SideMenuHeading.svelte",
- "extractedAt": "2026-02-04T08:10:50.416Z",
"props": [
{
"name": "icon",
diff --git a/docs/generated/component-apis/side-menu.json b/docs/generated/component-apis/side-menu.json
index 75b3559477..c1abe89ed3 100644
--- a/docs/generated/component-apis/side-menu.json
+++ b/docs/generated/component-apis/side-menu.json
@@ -1,7 +1,6 @@
{
"componentSlug": "side-menu",
"extractedFrom": "libs/web-components/src/components/side-menu/SideMenu.svelte",
- "extractedAt": "2026-02-04T08:10:50.415Z",
"props": [
{
"name": "testId",
diff --git a/docs/generated/component-apis/skeleton.json b/docs/generated/component-apis/skeleton.json
index cdd33feb30..c65fc48a86 100644
--- a/docs/generated/component-apis/skeleton.json
+++ b/docs/generated/component-apis/skeleton.json
@@ -1,7 +1,6 @@
{
"componentSlug": "skeleton",
"extractedFrom": "libs/web-components/src/components/skeleton/Skeleton.svelte",
- "extractedAt": "2026-02-04T08:10:50.416Z",
"props": [
{
"name": "maxWidth",
diff --git a/docs/generated/component-apis/spacer.json b/docs/generated/component-apis/spacer.json
index c465308ab6..7c3620b442 100644
--- a/docs/generated/component-apis/spacer.json
+++ b/docs/generated/component-apis/spacer.json
@@ -1,7 +1,6 @@
{
"componentSlug": "spacer",
"extractedFrom": "libs/web-components/src/components/spacer/Spacer.svelte",
- "extractedAt": "2026-02-04T08:10:50.416Z",
"props": [
{
"name": "hspacing",
diff --git a/docs/generated/component-apis/spinner.json b/docs/generated/component-apis/spinner.json
index 4914a359a2..61580a2564 100644
--- a/docs/generated/component-apis/spinner.json
+++ b/docs/generated/component-apis/spinner.json
@@ -1,11 +1,16 @@
{
"componentSlug": "spinner",
"extractedFrom": "libs/web-components/src/components/spinner/Spinner.svelte",
- "extractedAt": "2026-02-04T08:10:50.416Z",
"props": [
{
"name": "size",
- "type": "SpinnerSize",
+ "type": "\"small\" | \"medium\" | \"large\" | \"xlarge\"",
+ "values": [
+ "small",
+ "medium",
+ "large",
+ "xlarge"
+ ],
"required": true,
"default": null,
"description": "Sets the size of the spinner."
diff --git a/docs/generated/component-apis/tab.json b/docs/generated/component-apis/tab.json
index c8deba729c..e65c70fae6 100644
--- a/docs/generated/component-apis/tab.json
+++ b/docs/generated/component-apis/tab.json
@@ -1,7 +1,6 @@
{
"componentSlug": "tab",
"extractedFrom": "libs/web-components/src/components/tab/Tab.svelte",
- "extractedAt": "2026-02-04T08:10:50.417Z",
"props": [
{
"name": "heading",
diff --git a/docs/generated/component-apis/table-sort-header.json b/docs/generated/component-apis/table-sort-header.json
new file mode 100644
index 0000000000..dce0360354
--- /dev/null
+++ b/docs/generated/component-apis/table-sort-header.json
@@ -0,0 +1,41 @@
+{
+ "componentSlug": "table-sort-header",
+ "extractedFrom": "libs/web-components/src/components/table/TableSortHeader.svelte",
+ "extractedAt": "2026-02-26T00:00:00.000Z",
+ "props": [
+ {
+ "name": "name",
+ "type": "string",
+ "required": false,
+ "default": "",
+ "description": "Column name identifier for sorting."
+ },
+ {
+ "name": "direction",
+ "type": "\"asc\" | \"desc\" | \"none\"",
+ "typeLabel": "GoabTableSortDirection",
+ "values": [
+ "asc",
+ "desc",
+ "none"
+ ],
+ "required": false,
+ "default": "none",
+ "description": "Sets the sort direction indicator."
+ },
+ {
+ "name": "sortOrder",
+ "type": "number",
+ "required": false,
+ "default": 0,
+ "description": "Sort order number for multi-column sort display (1, 2, etc)."
+ }
+ ],
+ "events": [],
+ "slots": [
+ {
+ "name": "default",
+ "description": ""
+ }
+ ]
+}
diff --git a/docs/generated/component-apis/table.json b/docs/generated/component-apis/table.json
index 15e3104def..8b86d28407 100644
--- a/docs/generated/component-apis/table.json
+++ b/docs/generated/component-apis/table.json
@@ -1,7 +1,6 @@
{
"componentSlug": "table",
"extractedFrom": "libs/web-components/src/components/table/Table.svelte",
- "extractedAt": "2026-02-04T08:10:50.417Z",
"props": [
{
"name": "width",
@@ -36,6 +35,18 @@
"default": "normal",
"description": "A relaxed variant of the table with more vertical padding for the cells."
},
+ {
+ "name": "sortMode",
+ "type": "\"single\" | \"multi\"",
+ "typeLabel": "GoabTableSortMode",
+ "values": [
+ "single",
+ "multi"
+ ],
+ "required": false,
+ "default": "single",
+ "description": "Sort mode: \"single\" allows one column, \"multi\" allows up to 2 columns."
+ },
{
"name": "testId",
"type": "string",
@@ -79,8 +90,8 @@
"events": [
{
"name": "onSort",
- "type": "(event: Event) => void",
- "description": "",
+ "type": "(detail: GoabTableOnSortDetail) => void",
+ "description": "Called when sort state changes in single-sort mode. Receives { sortBy, sortDir }.",
"frameworks": [
"react"
]
@@ -88,7 +99,23 @@
{
"name": "_sort",
"type": "CustomEvent",
- "description": "",
+ "description": "Dispatched when sort state changes in single-sort mode. Detail contains { sortBy, sortDir }.",
+ "frameworks": [
+ "angular"
+ ]
+ },
+ {
+ "name": "onMultiSort",
+ "type": "(detail: GoabTableOnMultiSortDetail) => void",
+ "description": "Called when sort state changes in multi-sort mode. Receives { sorts: GoabTableSortEntry[] }.",
+ "frameworks": [
+ "react"
+ ]
+ },
+ {
+ "name": "_multisort",
+ "type": "CustomEvent",
+ "description": "Dispatched when sort state changes in multi-sort mode. Detail contains { sorts: GoabTableSortEntry[] }.",
"frameworks": [
"angular"
]
diff --git a/docs/generated/component-apis/tabs.json b/docs/generated/component-apis/tabs.json
index 520f7fde75..41eecf4ab2 100644
--- a/docs/generated/component-apis/tabs.json
+++ b/docs/generated/component-apis/tabs.json
@@ -1,7 +1,6 @@
{
"componentSlug": "tabs",
"extractedFrom": "libs/web-components/src/components/tabs/Tabs.svelte",
- "extractedAt": "2026-02-04T08:10:50.418Z",
"props": [
{
"name": "initialtab",
@@ -26,7 +25,18 @@
],
"required": false,
"default": "default",
- "description": ""
+ "description": "Visual style variant. \"segmented\" shows pill-style tabs with animation."
+ },
+ {
+ "name": "orientation",
+ "type": "\"auto\" | \"horizontal\"",
+ "values": [
+ "auto",
+ "horizontal"
+ ],
+ "required": false,
+ "default": "auto",
+ "description": "Tab layout orientation. \"auto\" stacks vertically on mobile, \"horizontal\" keeps horizontal on all screen sizes."
}
],
"events": [
diff --git a/docs/generated/component-apis/temporary-notification.json b/docs/generated/component-apis/temporary-notification.json
index 6f9d528d60..0b8b15252d 100644
--- a/docs/generated/component-apis/temporary-notification.json
+++ b/docs/generated/component-apis/temporary-notification.json
@@ -1,7 +1,6 @@
{
"componentSlug": "temporary-notification",
"extractedFrom": "libs/web-components/src/components/temporary-notification/TemporaryNotification.svelte",
- "extractedAt": "2026-02-04T08:10:50.418Z",
"props": [
{
"name": "message",
@@ -12,7 +11,14 @@
},
{
"name": "type",
- "type": "TemporaryNotificationType",
+ "type": "\"basic\" | \"success\" | \"failure\" | \"indeterminate\" | \"progress\"",
+ "values": [
+ "basic",
+ "success",
+ "failure",
+ "indeterminate",
+ "progress"
+ ],
"required": false,
"default": "basic",
"description": "The notification type which determines the visual style and icon."
@@ -47,7 +53,11 @@
},
{
"name": "animationDirection",
- "type": "TemporaryNotificationAnimationDirection",
+ "type": "\"up\" | \"down\"",
+ "values": [
+ "up",
+ "down"
+ ],
"required": false,
"default": "down",
"description": "Direction the notification animates from when appearing or disappearing."
diff --git a/docs/generated/component-apis/text-area.json b/docs/generated/component-apis/text-area.json
index 97e459819b..d3c636bb97 100644
--- a/docs/generated/component-apis/text-area.json
+++ b/docs/generated/component-apis/text-area.json
@@ -1,7 +1,6 @@
{
"componentSlug": "text-area",
"extractedFrom": "libs/web-components/src/components/text-area/TextArea.svelte",
- "extractedAt": "2026-02-04T08:10:50.419Z",
"props": [
{
"name": "name",
@@ -107,14 +106,22 @@
},
{
"name": "version",
- "type": "VersionType",
+ "type": "\"1\" | \"2\"",
+ "values": [
+ "1",
+ "2"
+ ],
"required": false,
"default": "1",
"description": ""
},
{
"name": "size",
- "type": "SizeType",
+ "type": "\"default\" | \"compact\"",
+ "values": [
+ "default",
+ "compact"
+ ],
"required": false,
"default": "default",
"description": ""
diff --git a/docs/generated/component-apis/text.json b/docs/generated/component-apis/text.json
index 04382535a3..91b7c66f12 100644
--- a/docs/generated/component-apis/text.json
+++ b/docs/generated/component-apis/text.json
@@ -1,7 +1,6 @@
{
"componentSlug": "text",
"extractedFrom": "libs/web-components/src/components/text/Text.svelte",
- "extractedAt": "2026-02-04T19:50:01.587Z",
"props": [
{
"name": "as",
@@ -33,13 +32,14 @@
},
{
"name": "size",
- "type": "\"heading-xl\" | \"heading-l\" | \"heading-m\" | \"heading-s\" | \"heading-xs\" | \"body-l\" | \"body-m\" | \"body-s\" | \"body-xs\"",
+ "type": "\"heading-xl\" | \"heading-l\" | \"heading-m\" | \"heading-s\" | \"heading-xs\" | \"heading-2xs\" | \"body-l\" | \"body-m\" | \"body-s\" | \"body-xs\"",
"values": [
"heading-xl",
"heading-l",
"heading-m",
"heading-s",
"heading-xs",
+ "heading-2xs",
"body-l",
"body-m",
"body-s",
diff --git a/docs/generated/component-apis/tooltip.json b/docs/generated/component-apis/tooltip.json
index 49bd6ce118..9464d6c3d7 100644
--- a/docs/generated/component-apis/tooltip.json
+++ b/docs/generated/component-apis/tooltip.json
@@ -1,7 +1,6 @@
{
"componentSlug": "tooltip",
"extractedFrom": "libs/web-components/src/components/tooltip/Tooltip.svelte",
- "extractedAt": "2026-02-04T08:10:50.419Z",
"props": [
{
"name": "content",
diff --git a/docs/generated/component-apis/work-side-menu-group.json b/docs/generated/component-apis/work-side-menu-group.json
new file mode 100644
index 0000000000..3ee4a0cea6
--- /dev/null
+++ b/docs/generated/component-apis/work-side-menu-group.json
@@ -0,0 +1,42 @@
+{
+ "componentSlug": "work-side-menu-group",
+ "extractedFrom": "libs/web-components/src/components/work-side-menu/WorkSideMenuGroup.svelte",
+ "props": [
+ {
+ "name": "heading",
+ "type": "string",
+ "required": true,
+ "default": null,
+ "description": "The text displayed in the group heading."
+ },
+ {
+ "name": "icon",
+ "type": "GoAIconType",
+ "typeLabel": "GoAIconType",
+ "required": false,
+ "default": null,
+ "description": "Icon displayed before the group label. When omitted, no icon is rendered and no space is reserved."
+ },
+ {
+ "name": "testId",
+ "type": "string",
+ "required": false,
+ "default": "",
+ "description": "Sets a data-testid attribute for automated testing."
+ },
+ {
+ "name": "open",
+ "type": "boolean",
+ "required": false,
+ "default": "false",
+ "description": "Whether the group is open."
+ }
+ ],
+ "events": [],
+ "slots": [
+ {
+ "name": "default",
+ "description": ""
+ }
+ ]
+}
diff --git a/docs/generated/component-apis/work-side-menu-item.json b/docs/generated/component-apis/work-side-menu-item.json
new file mode 100644
index 0000000000..302ecd2f0e
--- /dev/null
+++ b/docs/generated/component-apis/work-side-menu-item.json
@@ -0,0 +1,70 @@
+{
+ "componentSlug": "work-side-menu-item",
+ "extractedFrom": "libs/web-components/src/components/work-side-menu/WorkSideMenuItem.svelte",
+ "props": [
+ {
+ "name": "label",
+ "type": "string",
+ "required": true,
+ "default": null,
+ "description": "The text label displayed for the menu item."
+ },
+ {
+ "name": "url",
+ "type": "string",
+ "required": false,
+ "default": "",
+ "description": "The URL the menu item links to. Optional — when absent, renders as a button instead of a link."
+ },
+ {
+ "name": "badge",
+ "type": "string",
+ "required": false,
+ "default": "",
+ "description": "Badge text displayed alongside the menu item (e.g., notification count)."
+ },
+ {
+ "name": "current",
+ "type": "boolean",
+ "required": false,
+ "default": "false",
+ "description": "When true, indicates this is the currently active menu item."
+ },
+ {
+ "name": "divider",
+ "type": "boolean",
+ "required": false,
+ "default": "false",
+ "description": "When true, displays a divider line above this menu item."
+ },
+ {
+ "name": "icon",
+ "type": "string",
+ "required": false,
+ "default": "",
+ "description": "Icon displayed before the menu item label."
+ },
+ {
+ "name": "testId",
+ "type": "string",
+ "required": false,
+ "default": "",
+ "description": "Sets a data-testid attribute for automated testing."
+ },
+ {
+ "name": "type",
+ "type": "\"normal\" | \"emergency\" | \"success\"",
+ "values": ["normal", "emergency", "success"],
+ "required": false,
+ "default": "normal",
+ "description": "Sets the visual style of the badge. Use \"emergency\" for urgent items, \"success\" for positive status."
+ }
+ ],
+ "events": [],
+ "slots": [
+ {
+ "name": "popoverContent",
+ "description": "Content displayed in a popover panel beside the menu item."
+ }
+ ]
+}
diff --git a/docs/generated/component-apis/work-side-menu.json b/docs/generated/component-apis/work-side-menu.json
index 15ce161dbc..1c2c51e232 100644
--- a/docs/generated/component-apis/work-side-menu.json
+++ b/docs/generated/component-apis/work-side-menu.json
@@ -1,7 +1,6 @@
{
"componentSlug": "work-side-menu",
"extractedFrom": "libs/web-components/src/components/work-side-menu/WorkSideMenu.svelte",
- "extractedAt": "2026-02-04T08:10:50.420Z",
"props": [
{
"name": "heading",
diff --git a/docs/nginx.conf b/docs/nginx.conf
new file mode 100644
index 0000000000..53b4f91c88
--- /dev/null
+++ b/docs/nginx.conf
@@ -0,0 +1,32 @@
+events {
+ worker_connections 1024;
+}
+
+http {
+ sendfile on;
+ include mime.types;
+ default_type application/octet-stream;
+
+ server {
+ listen 8080;
+ root /opt/app-root/src;
+ index index.html;
+
+ port_in_redirect off;
+
+ location ~* \.(png|jpg|jpeg|svg|webp)$ {
+ expires 7d;
+ add_header Cache-Control "public, no-transform";
+ }
+
+ location ~* \.(js|css)$ {
+ expires 1d;
+ add_header Cache-Control "public, no-transform";
+ }
+
+ location / {
+ gzip on;
+ try_files $uri $uri/ =404;
+ }
+ }
+}
diff --git a/docs/package-lock.json b/docs/package-lock.json
index c648453c96..cd512e4c6c 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -8,17 +8,21 @@
"name": "docs",
"version": "0.0.1",
"dependencies": {
- "@abgov/design-tokens-v2": "npm:@abgov/design-tokens@^2.0.0",
+ "@abgov/design-tokens-v2": "npm:@abgov/design-tokens@^2.1.1",
"@abgov/react-components": "*",
"@abgov/ui-components-common": "*",
- "@abgov/web-components": "*"
+ "@abgov/web-components": "*",
+ "flexsearch": "^0.7.43"
+ },
+ "devDependencies": {
+ "tsx": "^4.19.0"
}
},
"node_modules/@abgov/design-tokens-v2": {
"name": "@abgov/design-tokens",
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/@abgov/design-tokens/-/design-tokens-2.0.0.tgz",
- "integrity": "sha512-vmkM3AWHqlvBav1iPYhI9Y8ZTL2c3qTc3whaNdPTFlOpoC4LJR/oMQUgSeafLygSuAHrAr4iuTdK/CUbgVKHtA=="
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/@abgov/design-tokens/-/design-tokens-2.1.1.tgz",
+ "integrity": "sha512-JpNFdkgFIkrIQTmQ8h/A91EF4qoaXDK9sL/gN5QE54xCr8LxUCpEtdHpUVDwVhk8cugLrp6klhQMw8yqWLrBoA=="
},
"node_modules/@abgov/react-components": {
"version": "6.9.3",
@@ -43,6 +47,448 @@
"integrity": "sha512-SIjYxOSsQzGlHmSUJvZVx/N6hOZ4JhItO8Z2xTHj0UCZg3Q40v6l8Z5L8shBO4GZ20o51SC3oEIvewfLOtnAXw==",
"license": "Apache-2.0"
},
+ "node_modules/@esbuild/aix-ppc64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
+ "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==",
+ "cpu": [
+ "ppc64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "aix"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/android-arm": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz",
+ "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==",
+ "cpu": [
+ "arm"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/android-arm64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz",
+ "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/android-x64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz",
+ "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/darwin-arm64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz",
+ "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/darwin-x64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz",
+ "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/freebsd-arm64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz",
+ "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "freebsd"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/freebsd-x64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz",
+ "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "freebsd"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-arm": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz",
+ "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==",
+ "cpu": [
+ "arm"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-arm64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz",
+ "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-ia32": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz",
+ "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==",
+ "cpu": [
+ "ia32"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-loong64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz",
+ "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==",
+ "cpu": [
+ "loong64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-mips64el": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz",
+ "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==",
+ "cpu": [
+ "mips64el"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-ppc64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz",
+ "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==",
+ "cpu": [
+ "ppc64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-riscv64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz",
+ "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==",
+ "cpu": [
+ "riscv64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-s390x": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz",
+ "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==",
+ "cpu": [
+ "s390x"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-x64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz",
+ "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/netbsd-arm64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz",
+ "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "netbsd"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/netbsd-x64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz",
+ "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "netbsd"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/openbsd-arm64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz",
+ "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "openbsd"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/openbsd-x64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz",
+ "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "openbsd"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/openharmony-arm64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz",
+ "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "openharmony"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/sunos-x64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz",
+ "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "sunos"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/win32-arm64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz",
+ "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/win32-ia32": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz",
+ "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==",
+ "cpu": [
+ "ia32"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/win32-x64": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz",
+ "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
"node_modules/@types/react": {
"version": "19.2.7",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
@@ -57,7 +503,84 @@
"version": "3.2.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
- "license": "MIT"
+ "license": "MIT",
+ "peer": true
+ },
+ "node_modules/esbuild": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
+ "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
+ "dev": true,
+ "hasInstallScript": true,
+ "license": "MIT",
+ "bin": {
+ "esbuild": "bin/esbuild"
+ },
+ "engines": {
+ "node": ">=18"
+ },
+ "optionalDependencies": {
+ "@esbuild/aix-ppc64": "0.27.2",
+ "@esbuild/android-arm": "0.27.2",
+ "@esbuild/android-arm64": "0.27.2",
+ "@esbuild/android-x64": "0.27.2",
+ "@esbuild/darwin-arm64": "0.27.2",
+ "@esbuild/darwin-x64": "0.27.2",
+ "@esbuild/freebsd-arm64": "0.27.2",
+ "@esbuild/freebsd-x64": "0.27.2",
+ "@esbuild/linux-arm": "0.27.2",
+ "@esbuild/linux-arm64": "0.27.2",
+ "@esbuild/linux-ia32": "0.27.2",
+ "@esbuild/linux-loong64": "0.27.2",
+ "@esbuild/linux-mips64el": "0.27.2",
+ "@esbuild/linux-ppc64": "0.27.2",
+ "@esbuild/linux-riscv64": "0.27.2",
+ "@esbuild/linux-s390x": "0.27.2",
+ "@esbuild/linux-x64": "0.27.2",
+ "@esbuild/netbsd-arm64": "0.27.2",
+ "@esbuild/netbsd-x64": "0.27.2",
+ "@esbuild/openbsd-arm64": "0.27.2",
+ "@esbuild/openbsd-x64": "0.27.2",
+ "@esbuild/openharmony-arm64": "0.27.2",
+ "@esbuild/sunos-x64": "0.27.2",
+ "@esbuild/win32-arm64": "0.27.2",
+ "@esbuild/win32-ia32": "0.27.2",
+ "@esbuild/win32-x64": "0.27.2"
+ }
+ },
+ "node_modules/flexsearch": {
+ "version": "0.7.43",
+ "resolved": "https://registry.npmjs.org/flexsearch/-/flexsearch-0.7.43.tgz",
+ "integrity": "sha512-c5o/+Um8aqCSOXGcZoqZOm+NqtVwNsvVpWv6lfmSclU954O3wvQKxxK8zj74fPaSJbXpSLTs4PRhh+wnoCXnKg==",
+ "license": "Apache-2.0"
+ },
+ "node_modules/fsevents": {
+ "version": "2.3.3",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+ "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+ "dev": true,
+ "hasInstallScript": true,
+ "license": "MIT",
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+ }
+ },
+ "node_modules/get-tsconfig": {
+ "version": "4.13.3",
+ "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.3.tgz",
+ "integrity": "sha512-vp8Cj/+9Q/ibZUrq1rhy8mCTQpCk31A3uu9wc1C50yAb3x2pFHOsGdAZQ7jD86ARayyxZUViYeIztW+GE8dcrg==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "resolve-pkg-maps": "^1.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+ }
},
"node_modules/react": {
"version": "19.2.3",
@@ -82,11 +605,42 @@
"react": "^19.2.3"
}
},
+ "node_modules/resolve-pkg-maps": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+ "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+ "dev": true,
+ "license": "MIT",
+ "funding": {
+ "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+ }
+ },
"node_modules/scheduler": {
"version": "0.27.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
"integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
- "license": "MIT"
+ "license": "MIT",
+ "peer": true
+ },
+ "node_modules/tsx": {
+ "version": "4.21.0",
+ "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz",
+ "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "esbuild": "~0.27.0",
+ "get-tsconfig": "^4.7.5"
+ },
+ "bin": {
+ "tsx": "dist/cli.mjs"
+ },
+ "engines": {
+ "node": ">=18.0.0"
+ },
+ "optionalDependencies": {
+ "fsevents": "~2.3.3"
+ }
}
}
}
diff --git a/docs/package.json b/docs/package.json
index 693bec48f2..bcd0424b90 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -5,14 +5,21 @@
"scripts": {
"dev": "astro dev",
"start": "astro dev",
- "build": "astro check && astro build",
+ "build": "npm run extract-api && npm run build:search-index && astro build",
+ "build:search-index": "npx tsx src/scripts/build-search-index.ts",
+ "extract-api": "npx tsx src/scripts/extract-api.ts --all",
"preview": "astro preview",
+ "generate-previews": "npx tsx src/scripts/generate-preview-images.ts",
"astro": "astro"
},
"dependencies": {
- "@abgov/design-tokens-v2": "npm:@abgov/design-tokens@^2.0.0",
+ "@abgov/design-tokens-v2": "npm:@abgov/design-tokens@^2.1.1",
"@abgov/react-components": "*",
"@abgov/ui-components-common": "*",
- "@abgov/web-components": "*"
+ "@abgov/web-components": "*",
+ "flexsearch": "^0.7.43"
+ },
+ "devDependencies": {
+ "tsx": "^4.19.0"
}
}
diff --git a/docs/project.json b/docs/project.json
index c1ac390398..b46419d42e 100644
--- a/docs/project.json
+++ b/docs/project.json
@@ -9,7 +9,7 @@
"executor": "nx:run-commands",
"outputs": ["{workspaceRoot}/dist/docs"],
"options": {
- "command": "astro build --root docs"
+ "command": "npm run build --prefix docs"
}
},
"serve": {
diff --git a/docs/public/apple-touch-icon.png b/docs/public/apple-touch-icon.png
new file mode 100644
index 0000000000..ea8981b388
Binary files /dev/null and b/docs/public/apple-touch-icon.png differ
diff --git a/docs/public/favicon.ico b/docs/public/favicon.ico
new file mode 100644
index 0000000000..a6f28993f7
Binary files /dev/null and b/docs/public/favicon.ico differ
diff --git a/docs/public/favicon.png b/docs/public/favicon.png
new file mode 100644
index 0000000000..21f72eb862
Binary files /dev/null and b/docs/public/favicon.png differ
diff --git a/docs/public/favicon.svg b/docs/public/favicon.svg
new file mode 100644
index 0000000000..4a3c265d3b
--- /dev/null
+++ b/docs/public/favicon.svg
@@ -0,0 +1,11 @@
+
diff --git a/docs/public/icon-192.png b/docs/public/icon-192.png
new file mode 100644
index 0000000000..dfd2a5e591
Binary files /dev/null and b/docs/public/icon-192.png differ
diff --git a/docs/public/icon-512.png b/docs/public/icon-512.png
new file mode 100644
index 0000000000..ee54d7021e
Binary files /dev/null and b/docs/public/icon-512.png differ
diff --git a/docs/public/images/component-thumbnails/accordion.svg b/docs/public/images/component-thumbnails/accordion.svg
new file mode 100644
index 0000000000..50dce64fb6
--- /dev/null
+++ b/docs/public/images/component-thumbnails/accordion.svg
@@ -0,0 +1,19 @@
+
diff --git a/docs/public/images/component-thumbnails/badge.svg b/docs/public/images/component-thumbnails/badge.svg
new file mode 100644
index 0000000000..674d1f970c
--- /dev/null
+++ b/docs/public/images/component-thumbnails/badge.svg
@@ -0,0 +1,6 @@
+
diff --git a/docs/public/images/component-thumbnails/block.svg b/docs/public/images/component-thumbnails/block.svg
new file mode 100644
index 0000000000..ed36493020
--- /dev/null
+++ b/docs/public/images/component-thumbnails/block.svg
@@ -0,0 +1,9 @@
+
diff --git a/docs/public/images/component-thumbnails/button-group.svg b/docs/public/images/component-thumbnails/button-group.svg
new file mode 100644
index 0000000000..ef20e35e95
--- /dev/null
+++ b/docs/public/images/component-thumbnails/button-group.svg
@@ -0,0 +1,11 @@
+
diff --git a/docs/public/images/component-thumbnails/button.svg b/docs/public/images/component-thumbnails/button.svg
new file mode 100644
index 0000000000..b2917066d9
--- /dev/null
+++ b/docs/public/images/component-thumbnails/button.svg
@@ -0,0 +1,6 @@
+
diff --git a/docs/public/images/component-thumbnails/callout.svg b/docs/public/images/component-thumbnails/callout.svg
new file mode 100644
index 0000000000..68757a5a7f
--- /dev/null
+++ b/docs/public/images/component-thumbnails/callout.svg
@@ -0,0 +1,10 @@
+
diff --git a/docs/public/images/component-thumbnails/checkbox-group.svg b/docs/public/images/component-thumbnails/checkbox-group.svg
new file mode 100644
index 0000000000..867a1d7351
--- /dev/null
+++ b/docs/public/images/component-thumbnails/checkbox-group.svg
@@ -0,0 +1,15 @@
+
diff --git a/docs/public/images/component-thumbnails/checkbox.svg b/docs/public/images/component-thumbnails/checkbox.svg
new file mode 100644
index 0000000000..ad3a1dbf19
--- /dev/null
+++ b/docs/public/images/component-thumbnails/checkbox.svg
@@ -0,0 +1,7 @@
+
diff --git a/docs/public/images/component-thumbnails/circular-progress-indicator.svg b/docs/public/images/component-thumbnails/circular-progress-indicator.svg
new file mode 100644
index 0000000000..fe5066300f
--- /dev/null
+++ b/docs/public/images/component-thumbnails/circular-progress-indicator.svg
@@ -0,0 +1,18 @@
+
diff --git a/docs/public/images/component-thumbnails/container.svg b/docs/public/images/component-thumbnails/container.svg
new file mode 100644
index 0000000000..deaea50904
--- /dev/null
+++ b/docs/public/images/component-thumbnails/container.svg
@@ -0,0 +1,12 @@
+
diff --git a/docs/public/images/component-thumbnails/data-grid.svg b/docs/public/images/component-thumbnails/data-grid.svg
new file mode 100644
index 0000000000..160c1bf034
--- /dev/null
+++ b/docs/public/images/component-thumbnails/data-grid.svg
@@ -0,0 +1,49 @@
+
diff --git a/docs/public/images/component-thumbnails/date-picker.svg b/docs/public/images/component-thumbnails/date-picker.svg
new file mode 100644
index 0000000000..ae298f68a0
--- /dev/null
+++ b/docs/public/images/component-thumbnails/date-picker.svg
@@ -0,0 +1,41 @@
+
diff --git a/docs/public/images/component-thumbnails/details.svg b/docs/public/images/component-thumbnails/details.svg
new file mode 100644
index 0000000000..d93b073de0
--- /dev/null
+++ b/docs/public/images/component-thumbnails/details.svg
@@ -0,0 +1,9 @@
+
diff --git a/docs/public/images/component-thumbnails/divider.svg b/docs/public/images/component-thumbnails/divider.svg
new file mode 100644
index 0000000000..25324b5bcb
--- /dev/null
+++ b/docs/public/images/component-thumbnails/divider.svg
@@ -0,0 +1,10 @@
+
diff --git a/docs/public/images/component-thumbnails/drawer.svg b/docs/public/images/component-thumbnails/drawer.svg
new file mode 100644
index 0000000000..d301509517
--- /dev/null
+++ b/docs/public/images/component-thumbnails/drawer.svg
@@ -0,0 +1,17 @@
+
diff --git a/docs/public/images/component-thumbnails/dropdown.svg b/docs/public/images/component-thumbnails/dropdown.svg
new file mode 100644
index 0000000000..d34320aa99
--- /dev/null
+++ b/docs/public/images/component-thumbnails/dropdown.svg
@@ -0,0 +1,17 @@
+
diff --git a/docs/public/images/component-thumbnails/file-uploader.svg b/docs/public/images/component-thumbnails/file-uploader.svg
new file mode 100644
index 0000000000..f8e6c1f2eb
--- /dev/null
+++ b/docs/public/images/component-thumbnails/file-uploader.svg
@@ -0,0 +1,7 @@
+
diff --git a/docs/public/images/component-thumbnails/filter-chip.svg b/docs/public/images/component-thumbnails/filter-chip.svg
new file mode 100644
index 0000000000..2d4c1c9413
--- /dev/null
+++ b/docs/public/images/component-thumbnails/filter-chip.svg
@@ -0,0 +1,8 @@
+
diff --git a/docs/public/images/component-thumbnails/footer.svg b/docs/public/images/component-thumbnails/footer.svg
new file mode 100644
index 0000000000..1506b984ae
--- /dev/null
+++ b/docs/public/images/component-thumbnails/footer.svg
@@ -0,0 +1,9 @@
+
diff --git a/docs/public/images/component-thumbnails/form-item.svg b/docs/public/images/component-thumbnails/form-item.svg
new file mode 100644
index 0000000000..03d881ceea
--- /dev/null
+++ b/docs/public/images/component-thumbnails/form-item.svg
@@ -0,0 +1,8 @@
+
diff --git a/docs/public/images/component-thumbnails/form-stepper.svg b/docs/public/images/component-thumbnails/form-stepper.svg
new file mode 100644
index 0000000000..35ab0df8a7
--- /dev/null
+++ b/docs/public/images/component-thumbnails/form-stepper.svg
@@ -0,0 +1,12 @@
+
diff --git a/docs/public/images/component-thumbnails/form.svg b/docs/public/images/component-thumbnails/form.svg
new file mode 100644
index 0000000000..bb31a9ecae
--- /dev/null
+++ b/docs/public/images/component-thumbnails/form.svg
@@ -0,0 +1,15 @@
+
diff --git a/docs/public/images/component-thumbnails/grid.svg b/docs/public/images/component-thumbnails/grid.svg
new file mode 100644
index 0000000000..858414d8cf
--- /dev/null
+++ b/docs/public/images/component-thumbnails/grid.svg
@@ -0,0 +1,22 @@
+
diff --git a/docs/public/images/component-thumbnails/header.svg b/docs/public/images/component-thumbnails/header.svg
new file mode 100644
index 0000000000..46f173da6b
--- /dev/null
+++ b/docs/public/images/component-thumbnails/header.svg
@@ -0,0 +1,11 @@
+
diff --git a/docs/public/images/component-thumbnails/hero-banner.svg b/docs/public/images/component-thumbnails/hero-banner.svg
new file mode 100644
index 0000000000..246a6f4d34
--- /dev/null
+++ b/docs/public/images/component-thumbnails/hero-banner.svg
@@ -0,0 +1,15 @@
+
diff --git a/docs/public/images/component-thumbnails/icon-button.svg b/docs/public/images/component-thumbnails/icon-button.svg
new file mode 100644
index 0000000000..8d99627daa
--- /dev/null
+++ b/docs/public/images/component-thumbnails/icon-button.svg
@@ -0,0 +1,7 @@
+
diff --git a/docs/public/images/component-thumbnails/icons.svg b/docs/public/images/component-thumbnails/icons.svg
new file mode 100644
index 0000000000..2ed0939ded
--- /dev/null
+++ b/docs/public/images/component-thumbnails/icons.svg
@@ -0,0 +1,15 @@
+
diff --git a/docs/public/images/component-thumbnails/linear-progress-indicator.svg b/docs/public/images/component-thumbnails/linear-progress-indicator.svg
new file mode 100644
index 0000000000..1d1b11bacf
--- /dev/null
+++ b/docs/public/images/component-thumbnails/linear-progress-indicator.svg
@@ -0,0 +1,5 @@
+
diff --git a/docs/public/images/component-thumbnails/link.svg b/docs/public/images/component-thumbnails/link.svg
new file mode 100644
index 0000000000..0ab21232a5
--- /dev/null
+++ b/docs/public/images/component-thumbnails/link.svg
@@ -0,0 +1,9 @@
+
diff --git a/docs/public/images/component-thumbnails/list.svg b/docs/public/images/component-thumbnails/list.svg
new file mode 100644
index 0000000000..44ef722161
--- /dev/null
+++ b/docs/public/images/component-thumbnails/list.svg
@@ -0,0 +1,15 @@
+
diff --git a/docs/public/images/component-thumbnails/menu-button.svg b/docs/public/images/component-thumbnails/menu-button.svg
new file mode 100644
index 0000000000..32e3a5d877
--- /dev/null
+++ b/docs/public/images/component-thumbnails/menu-button.svg
@@ -0,0 +1,7 @@
+
diff --git a/docs/public/images/component-thumbnails/microsite-header.svg b/docs/public/images/component-thumbnails/microsite-header.svg
new file mode 100644
index 0000000000..30a989d277
--- /dev/null
+++ b/docs/public/images/component-thumbnails/microsite-header.svg
@@ -0,0 +1,8 @@
+
diff --git a/docs/public/images/component-thumbnails/modal.svg b/docs/public/images/component-thumbnails/modal.svg
new file mode 100644
index 0000000000..ecd05c707f
--- /dev/null
+++ b/docs/public/images/component-thumbnails/modal.svg
@@ -0,0 +1,20 @@
+
diff --git a/docs/public/images/component-thumbnails/notification-banner.svg b/docs/public/images/component-thumbnails/notification-banner.svg
new file mode 100644
index 0000000000..0bc7e53c71
--- /dev/null
+++ b/docs/public/images/component-thumbnails/notification-banner.svg
@@ -0,0 +1,11 @@
+
diff --git a/docs/public/images/component-thumbnails/pagination.svg b/docs/public/images/component-thumbnails/pagination.svg
new file mode 100644
index 0000000000..afb23bc101
--- /dev/null
+++ b/docs/public/images/component-thumbnails/pagination.svg
@@ -0,0 +1,19 @@
+
diff --git a/docs/public/images/component-thumbnails/popover.svg b/docs/public/images/component-thumbnails/popover.svg
new file mode 100644
index 0000000000..5ffb6f83a1
--- /dev/null
+++ b/docs/public/images/component-thumbnails/popover.svg
@@ -0,0 +1,15 @@
+
diff --git a/docs/public/images/component-thumbnails/radio.svg b/docs/public/images/component-thumbnails/radio.svg
new file mode 100644
index 0000000000..9118318898
--- /dev/null
+++ b/docs/public/images/component-thumbnails/radio.svg
@@ -0,0 +1,7 @@
+
diff --git a/docs/public/images/component-thumbnails/side-menu.svg b/docs/public/images/component-thumbnails/side-menu.svg
new file mode 100644
index 0000000000..94dbc1438d
--- /dev/null
+++ b/docs/public/images/component-thumbnails/side-menu.svg
@@ -0,0 +1,17 @@
+
diff --git a/docs/public/images/component-thumbnails/skeleton-loader.svg b/docs/public/images/component-thumbnails/skeleton-loader.svg
new file mode 100644
index 0000000000..d0a27a3463
--- /dev/null
+++ b/docs/public/images/component-thumbnails/skeleton-loader.svg
@@ -0,0 +1,11 @@
+
diff --git a/docs/public/images/component-thumbnails/spacer.svg b/docs/public/images/component-thumbnails/spacer.svg
new file mode 100644
index 0000000000..56c5dc2dac
--- /dev/null
+++ b/docs/public/images/component-thumbnails/spacer.svg
@@ -0,0 +1,13 @@
+
diff --git a/docs/public/images/component-thumbnails/table.svg b/docs/public/images/component-thumbnails/table.svg
new file mode 100644
index 0000000000..86176cbef9
--- /dev/null
+++ b/docs/public/images/component-thumbnails/table.svg
@@ -0,0 +1,10 @@
+
diff --git a/docs/public/images/component-thumbnails/tabs.svg b/docs/public/images/component-thumbnails/tabs.svg
new file mode 100644
index 0000000000..129ef6522c
--- /dev/null
+++ b/docs/public/images/component-thumbnails/tabs.svg
@@ -0,0 +1,19 @@
+
diff --git a/docs/public/images/component-thumbnails/temporary-notification.svg b/docs/public/images/component-thumbnails/temporary-notification.svg
new file mode 100644
index 0000000000..8d3eb6a4af
--- /dev/null
+++ b/docs/public/images/component-thumbnails/temporary-notification.svg
@@ -0,0 +1,19 @@
+
diff --git a/docs/public/images/component-thumbnails/text-area.svg b/docs/public/images/component-thumbnails/text-area.svg
new file mode 100644
index 0000000000..0500907f3e
--- /dev/null
+++ b/docs/public/images/component-thumbnails/text-area.svg
@@ -0,0 +1,9 @@
+
diff --git a/docs/public/images/component-thumbnails/text-input.svg b/docs/public/images/component-thumbnails/text-input.svg
new file mode 100644
index 0000000000..b89da8cc6c
--- /dev/null
+++ b/docs/public/images/component-thumbnails/text-input.svg
@@ -0,0 +1,7 @@
+
diff --git a/docs/public/images/component-thumbnails/text.svg b/docs/public/images/component-thumbnails/text.svg
new file mode 100644
index 0000000000..156f681dc7
--- /dev/null
+++ b/docs/public/images/component-thumbnails/text.svg
@@ -0,0 +1,12 @@
+
diff --git a/docs/public/images/component-thumbnails/tooltip.svg b/docs/public/images/component-thumbnails/tooltip.svg
new file mode 100644
index 0000000000..a344f005ec
--- /dev/null
+++ b/docs/public/images/component-thumbnails/tooltip.svg
@@ -0,0 +1,16 @@
+
diff --git a/docs/public/images/component-thumbnails/work-side-menu.svg b/docs/public/images/component-thumbnails/work-side-menu.svg
new file mode 100644
index 0000000000..3abe8bbc82
--- /dev/null
+++ b/docs/public/images/component-thumbnails/work-side-menu.svg
@@ -0,0 +1,12 @@
+
diff --git a/docs/public/images/Examples/Menu/Logo.png b/docs/public/images/examples/Menu/Logo.png
similarity index 100%
rename from docs/public/images/Examples/Menu/Logo.png
rename to docs/public/images/examples/Menu/Logo.png
diff --git a/docs/public/images/Examples/Menu/Rectangle 146703.svg b/docs/public/images/examples/Menu/Rectangle 146703.svg
similarity index 100%
rename from docs/public/images/Examples/Menu/Rectangle 146703.svg
rename to docs/public/images/examples/Menu/Rectangle 146703.svg
diff --git a/docs/public/images/examples/add-a-filter-chip.webp b/docs/public/images/examples/add-a-filter-chip.webp
new file mode 100644
index 0000000000..9b1179f46c
Binary files /dev/null and b/docs/public/images/examples/add-a-filter-chip.webp differ
diff --git a/docs/public/images/examples/add-a-record-using-a-drawer.webp b/docs/public/images/examples/add-a-record-using-a-drawer.webp
new file mode 100644
index 0000000000..544401a9c2
Binary files /dev/null and b/docs/public/images/examples/add-a-record-using-a-drawer.webp differ
diff --git a/docs/public/images/examples/add-and-edit-lots-of-filters.webp b/docs/public/images/examples/add-and-edit-lots-of-filters.webp
new file mode 100644
index 0000000000..1124fd9998
Binary files /dev/null and b/docs/public/images/examples/add-and-edit-lots-of-filters.webp differ
diff --git a/docs/public/images/examples/add-another-item-in-a-modal.webp b/docs/public/images/examples/add-another-item-in-a-modal.webp
new file mode 100644
index 0000000000..cee034620c
Binary files /dev/null and b/docs/public/images/examples/add-another-item-in-a-modal.webp differ
diff --git a/docs/public/images/examples/ask-a-long-answer-question-with-a-maximum-word-count.webp b/docs/public/images/examples/ask-a-long-answer-question-with-a-maximum-word-count.webp
new file mode 100644
index 0000000000..4317803c6e
Binary files /dev/null and b/docs/public/images/examples/ask-a-long-answer-question-with-a-maximum-word-count.webp differ
diff --git a/docs/public/images/examples/ask-a-user-for-a-birthday.webp b/docs/public/images/examples/ask-a-user-for-a-birthday.webp
new file mode 100644
index 0000000000..c6b360bf2b
Binary files /dev/null and b/docs/public/images/examples/ask-a-user-for-a-birthday.webp differ
diff --git a/docs/public/images/examples/ask-a-user-for-an-address.webp b/docs/public/images/examples/ask-a-user-for-an-address.webp
new file mode 100644
index 0000000000..325ff3d0f9
Binary files /dev/null and b/docs/public/images/examples/ask-a-user-for-an-address.webp differ
diff --git a/docs/public/images/examples/ask-a-user-for-an-indian-registration-number.webp b/docs/public/images/examples/ask-a-user-for-an-indian-registration-number.webp
new file mode 100644
index 0000000000..885abb106c
Binary files /dev/null and b/docs/public/images/examples/ask-a-user-for-an-indian-registration-number.webp differ
diff --git a/docs/public/images/examples/ask-a-user-for-direct-deposit-information.webp b/docs/public/images/examples/ask-a-user-for-direct-deposit-information.webp
new file mode 100644
index 0000000000..fc1dabca16
Binary files /dev/null and b/docs/public/images/examples/ask-a-user-for-direct-deposit-information.webp differ
diff --git a/docs/public/images/examples/ask-a-user-for-dollar-amounts.webp b/docs/public/images/examples/ask-a-user-for-dollar-amounts.webp
new file mode 100644
index 0000000000..ebe3e7a299
Binary files /dev/null and b/docs/public/images/examples/ask-a-user-for-dollar-amounts.webp differ
diff --git a/docs/public/images/examples/ask-a-user-one-question-at-a-time.webp b/docs/public/images/examples/ask-a-user-one-question-at-a-time.webp
new file mode 100644
index 0000000000..6999f06b1c
Binary files /dev/null and b/docs/public/images/examples/ask-a-user-one-question-at-a-time.webp differ
diff --git a/docs/public/images/examples/basic-page-layout.webp b/docs/public/images/examples/basic-page-layout.webp
new file mode 100644
index 0000000000..9020347b71
Binary files /dev/null and b/docs/public/images/examples/basic-page-layout.webp differ
diff --git a/docs/public/images/examples/button-with-icon.webp b/docs/public/images/examples/button-with-icon.webp
new file mode 100644
index 0000000000..a2f49fe17a
Binary files /dev/null and b/docs/public/images/examples/button-with-icon.webp differ
diff --git a/docs/public/images/examples/card-grid.webp b/docs/public/images/examples/card-grid.webp
new file mode 100644
index 0000000000..8adab9e26a
Binary files /dev/null and b/docs/public/images/examples/card-grid.webp differ
diff --git a/docs/public/images/examples/card-view-of-case-files.webp b/docs/public/images/examples/card-view-of-case-files.webp
new file mode 100644
index 0000000000..1a0b57e544
Binary files /dev/null and b/docs/public/images/examples/card-view-of-case-files.webp differ
diff --git a/docs/public/images/examples/communicate-a-future-service-outage.webp b/docs/public/images/examples/communicate-a-future-service-outage.webp
new file mode 100644
index 0000000000..624feb622a
Binary files /dev/null and b/docs/public/images/examples/communicate-a-future-service-outage.webp differ
diff --git a/docs/public/images/examples/confirm-a-change.webp b/docs/public/images/examples/confirm-a-change.webp
new file mode 100644
index 0000000000..559ebf6b8b
Binary files /dev/null and b/docs/public/images/examples/confirm-a-change.webp differ
diff --git a/docs/public/images/examples/confirm-a-destructive-action.webp b/docs/public/images/examples/confirm-a-destructive-action.webp
new file mode 100644
index 0000000000..e1604e48c5
Binary files /dev/null and b/docs/public/images/examples/confirm-a-destructive-action.webp differ
diff --git a/docs/public/images/examples/confirm-before-navigating-away.webp b/docs/public/images/examples/confirm-before-navigating-away.webp
new file mode 100644
index 0000000000..4f712a5184
Binary files /dev/null and b/docs/public/images/examples/confirm-before-navigating-away.webp differ
diff --git a/docs/public/images/examples/confirm-that-an-application-was-submitted.webp b/docs/public/images/examples/confirm-that-an-application-was-submitted.webp
new file mode 100644
index 0000000000..b37b6694ab
Binary files /dev/null and b/docs/public/images/examples/confirm-that-an-application-was-submitted.webp differ
diff --git a/docs/public/images/examples/copy-to-clipboard.webp b/docs/public/images/examples/copy-to-clipboard.webp
new file mode 100644
index 0000000000..cf5e8662e6
Binary files /dev/null and b/docs/public/images/examples/copy-to-clipboard.webp differ
diff --git a/docs/public/images/examples/disabled-button-with-a-required-field.webp b/docs/public/images/examples/disabled-button-with-a-required-field.webp
new file mode 100644
index 0000000000..8dd90f52a3
Binary files /dev/null and b/docs/public/images/examples/disabled-button-with-a-required-field.webp differ
diff --git a/docs/public/images/examples/display-numbers-in-a-table-so-they-can-be-scanned-easily.webp b/docs/public/images/examples/display-numbers-in-a-table-so-they-can-be-scanned-easily.webp
new file mode 100644
index 0000000000..7fdd5727a1
Binary files /dev/null and b/docs/public/images/examples/display-numbers-in-a-table-so-they-can-be-scanned-easily.webp differ
diff --git a/docs/public/images/examples/display-user-information.webp b/docs/public/images/examples/display-user-information.webp
new file mode 100644
index 0000000000..5c0cc542ec
Binary files /dev/null and b/docs/public/images/examples/display-user-information.webp differ
diff --git a/docs/public/images/examples/dynamically-add-an-item-to-a-dropdown-list.webp b/docs/public/images/examples/dynamically-add-an-item-to-a-dropdown-list.webp
new file mode 100644
index 0000000000..6f9f3d0731
Binary files /dev/null and b/docs/public/images/examples/dynamically-add-an-item-to-a-dropdown-list.webp differ
diff --git a/docs/public/images/examples/dynamically-change-items-in-a-dropdown-list.webp b/docs/public/images/examples/dynamically-change-items-in-a-dropdown-list.webp
new file mode 100644
index 0000000000..5dac4bd37b
Binary files /dev/null and b/docs/public/images/examples/dynamically-change-items-in-a-dropdown-list.webp differ
diff --git a/docs/public/images/examples/expand-or-collapse-part-of-a-form.webp b/docs/public/images/examples/expand-or-collapse-part-of-a-form.webp
new file mode 100644
index 0000000000..8d47b305a0
Binary files /dev/null and b/docs/public/images/examples/expand-or-collapse-part-of-a-form.webp differ
diff --git a/docs/public/images/examples/filter-a-list-using-a-push-drawer.webp b/docs/public/images/examples/filter-a-list-using-a-push-drawer.webp
new file mode 100644
index 0000000000..3666538fe3
Binary files /dev/null and b/docs/public/images/examples/filter-a-list-using-a-push-drawer.webp differ
diff --git a/docs/public/images/examples/filter-data-in-a-table.webp b/docs/public/images/examples/filter-data-in-a-table.webp
new file mode 100644
index 0000000000..78e140f7dc
Binary files /dev/null and b/docs/public/images/examples/filter-data-in-a-table.webp differ
diff --git a/docs/public/images/examples/form-stepper-with-controlled-navigation.webp b/docs/public/images/examples/form-stepper-with-controlled-navigation.webp
new file mode 100644
index 0000000000..e35acfa0b6
Binary files /dev/null and b/docs/public/images/examples/form-stepper-with-controlled-navigation.webp differ
diff --git a/docs/public/images/examples/give-background-information-before-asking-a-question.webp b/docs/public/images/examples/give-background-information-before-asking-a-question.webp
new file mode 100644
index 0000000000..45afa67e11
Binary files /dev/null and b/docs/public/images/examples/give-background-information-before-asking-a-question.webp differ
diff --git a/docs/public/images/examples/give-context-before-asking-a-long-answer-question.webp b/docs/public/images/examples/give-context-before-asking-a-long-answer-question.webp
new file mode 100644
index 0000000000..99f16ba6a9
Binary files /dev/null and b/docs/public/images/examples/give-context-before-asking-a-long-answer-question.webp differ
diff --git a/docs/public/images/examples/group-related-questions-together-on-a-question-page.webp b/docs/public/images/examples/group-related-questions-together-on-a-question-page.webp
new file mode 100644
index 0000000000..a7c3a08e53
Binary files /dev/null and b/docs/public/images/examples/group-related-questions-together-on-a-question-page.webp differ
diff --git a/docs/public/images/examples/header-with-navigation.webp b/docs/public/images/examples/header-with-navigation.webp
new file mode 100644
index 0000000000..9f12b8664b
Binary files /dev/null and b/docs/public/images/examples/header-with-navigation.webp differ
diff --git a/docs/public/images/examples/hero-banner-with-actions.webp b/docs/public/images/examples/hero-banner-with-actions.webp
new file mode 100644
index 0000000000..da9fe804c8
Binary files /dev/null and b/docs/public/images/examples/hero-banner-with-actions.webp differ
diff --git a/docs/public/images/examples/hide-and-show-many-sections-of-information.webp b/docs/public/images/examples/hide-and-show-many-sections-of-information.webp
new file mode 100644
index 0000000000..746b8f69f2
Binary files /dev/null and b/docs/public/images/examples/hide-and-show-many-sections-of-information.webp differ
diff --git a/docs/public/images/examples/include-a-link-in-the-helper-text-of-an-option.webp b/docs/public/images/examples/include-a-link-in-the-helper-text-of-an-option.webp
new file mode 100644
index 0000000000..daa557b189
Binary files /dev/null and b/docs/public/images/examples/include-a-link-in-the-helper-text-of-an-option.webp differ
diff --git a/docs/public/images/examples/include-descriptions-for-items-in-a-checkbox-list.webp b/docs/public/images/examples/include-descriptions-for-items-in-a-checkbox-list.webp
new file mode 100644
index 0000000000..c82a4da8d3
Binary files /dev/null and b/docs/public/images/examples/include-descriptions-for-items-in-a-checkbox-list.webp differ
diff --git a/docs/public/images/examples/link-the-user-to-give-feedback-to-the-service.webp b/docs/public/images/examples/link-the-user-to-give-feedback-to-the-service.webp
new file mode 100644
index 0000000000..708bc07bae
Binary files /dev/null and b/docs/public/images/examples/link-the-user-to-give-feedback-to-the-service.webp differ
diff --git a/docs/public/images/examples/link-to-an-external-page.webp b/docs/public/images/examples/link-to-an-external-page.webp
new file mode 100644
index 0000000000..f057c44ccf
Binary files /dev/null and b/docs/public/images/examples/link-to-an-external-page.webp differ
diff --git a/docs/public/images/examples/public-form.webp b/docs/public/images/examples/public-form.webp
new file mode 100644
index 0000000000..c56e904930
Binary files /dev/null and b/docs/public/images/examples/public-form.webp differ
diff --git a/docs/public/images/examples/question-page.webp b/docs/public/images/examples/question-page.webp
new file mode 100644
index 0000000000..45592418c1
Binary files /dev/null and b/docs/public/images/examples/question-page.webp differ
diff --git a/docs/public/images/examples/remove-a-filter.webp b/docs/public/images/examples/remove-a-filter.webp
new file mode 100644
index 0000000000..071d4b05ec
Binary files /dev/null and b/docs/public/images/examples/remove-a-filter.webp differ
diff --git a/docs/public/images/examples/require-user-action-before-continuing.webp b/docs/public/images/examples/require-user-action-before-continuing.webp
new file mode 100644
index 0000000000..e153fbb367
Binary files /dev/null and b/docs/public/images/examples/require-user-action-before-continuing.webp differ
diff --git a/docs/public/images/examples/reset-date-picker-field.webp b/docs/public/images/examples/reset-date-picker-field.webp
new file mode 100644
index 0000000000..025014e147
Binary files /dev/null and b/docs/public/images/examples/reset-date-picker-field.webp differ
diff --git a/docs/public/images/examples/result-page.webp b/docs/public/images/examples/result-page.webp
new file mode 100644
index 0000000000..aaeead3d27
Binary files /dev/null and b/docs/public/images/examples/result-page.webp differ
diff --git a/docs/public/images/examples/reveal-input-based-on-a-selection.webp b/docs/public/images/examples/reveal-input-based-on-a-selection.webp
new file mode 100644
index 0000000000..64d308443e
Binary files /dev/null and b/docs/public/images/examples/reveal-input-based-on-a-selection.webp differ
diff --git a/docs/public/images/examples/review-and-action.webp b/docs/public/images/examples/review-and-action.webp
new file mode 100644
index 0000000000..7f3adf799c
Binary files /dev/null and b/docs/public/images/examples/review-and-action.webp differ
diff --git a/docs/public/images/examples/review-page.webp b/docs/public/images/examples/review-page.webp
new file mode 100644
index 0000000000..ed544bc60a
Binary files /dev/null and b/docs/public/images/examples/review-page.webp differ
diff --git a/docs/public/images/examples/search.webp b/docs/public/images/examples/search.webp
new file mode 100644
index 0000000000..8b68218857
Binary files /dev/null and b/docs/public/images/examples/search.webp differ
diff --git a/docs/public/images/examples/select-one-or-more-from-a-list-of-options.webp b/docs/public/images/examples/select-one-or-more-from-a-list-of-options.webp
new file mode 100644
index 0000000000..9bc2977d63
Binary files /dev/null and b/docs/public/images/examples/select-one-or-more-from-a-list-of-options.webp differ
diff --git a/docs/public/images/examples/set-a-max-width-on-a-long-radio-item.webp b/docs/public/images/examples/set-a-max-width-on-a-long-radio-item.webp
new file mode 100644
index 0000000000..da2c0d20d3
Binary files /dev/null and b/docs/public/images/examples/set-a-max-width-on-a-long-radio-item.webp differ
diff --git a/docs/public/images/examples/set-a-specific-tab-to-be-active.webp b/docs/public/images/examples/set-a-specific-tab-to-be-active.webp
new file mode 100644
index 0000000000..54dd90b509
Binary files /dev/null and b/docs/public/images/examples/set-a-specific-tab-to-be-active.webp differ
diff --git a/docs/public/images/examples/set-the-status-of-step-on-a-form-stepper.webp b/docs/public/images/examples/set-the-status-of-step-on-a-form-stepper.webp
new file mode 100644
index 0000000000..24fdec1f58
Binary files /dev/null and b/docs/public/images/examples/set-the-status-of-step-on-a-form-stepper.webp differ
diff --git a/docs/public/images/examples/show-a-label-on-an-icon-only-button.webp b/docs/public/images/examples/show-a-label-on-an-icon-only-button.webp
new file mode 100644
index 0000000000..9b46dc70ec
Binary files /dev/null and b/docs/public/images/examples/show-a-label-on-an-icon-only-button.webp differ
diff --git a/docs/public/images/examples/show-a-list-to-help-answer-a-question.webp b/docs/public/images/examples/show-a-list-to-help-answer-a-question.webp
new file mode 100644
index 0000000000..c63b3b0e5c
Binary files /dev/null and b/docs/public/images/examples/show-a-list-to-help-answer-a-question.webp differ
diff --git a/docs/public/images/examples/show-a-notification-with-an-action.webp b/docs/public/images/examples/show-a-notification-with-an-action.webp
new file mode 100644
index 0000000000..d7e5bf54fd
Binary files /dev/null and b/docs/public/images/examples/show-a-notification-with-an-action.webp differ
diff --git a/docs/public/images/examples/show-a-notification.webp b/docs/public/images/examples/show-a-notification.webp
new file mode 100644
index 0000000000..0462d88210
Binary files /dev/null and b/docs/public/images/examples/show-a-notification.webp differ
diff --git a/docs/public/images/examples/show-a-section-title-on-a-question-page.webp b/docs/public/images/examples/show-a-section-title-on-a-question-page.webp
new file mode 100644
index 0000000000..9eb75e3a49
Binary files /dev/null and b/docs/public/images/examples/show-a-section-title-on-a-question-page.webp differ
diff --git a/docs/public/images/examples/show-a-simple-progress-indicator-on-a-question-page-with-multiple-questions.webp b/docs/public/images/examples/show-a-simple-progress-indicator-on-a-question-page-with-multiple-questions.webp
new file mode 100644
index 0000000000..f6c96f70f7
Binary files /dev/null and b/docs/public/images/examples/show-a-simple-progress-indicator-on-a-question-page-with-multiple-questions.webp differ
diff --git a/docs/public/images/examples/show-a-simple-progress-indicator-on-a-question-page.webp b/docs/public/images/examples/show-a-simple-progress-indicator-on-a-question-page.webp
new file mode 100644
index 0000000000..e494c970bd
Binary files /dev/null and b/docs/public/images/examples/show-a-simple-progress-indicator-on-a-question-page.webp differ
diff --git a/docs/public/images/examples/show-a-user-progress-when-the-time-is-unknown.webp b/docs/public/images/examples/show-a-user-progress-when-the-time-is-unknown.webp
new file mode 100644
index 0000000000..d4468f4cd1
Binary files /dev/null and b/docs/public/images/examples/show-a-user-progress-when-the-time-is-unknown.webp differ
diff --git a/docs/public/images/examples/show-a-user-progress.webp b/docs/public/images/examples/show-a-user-progress.webp
new file mode 100644
index 0000000000..741191c410
Binary files /dev/null and b/docs/public/images/examples/show-a-user-progress.webp differ
diff --git a/docs/public/images/examples/show-different-views-of-data-in-a-table.webp b/docs/public/images/examples/show-different-views-of-data-in-a-table.webp
new file mode 100644
index 0000000000..3709ab870e
Binary files /dev/null and b/docs/public/images/examples/show-different-views-of-data-in-a-table.webp differ
diff --git a/docs/public/images/examples/show-full-date-in-a-tooltip.webp b/docs/public/images/examples/show-full-date-in-a-tooltip.webp
new file mode 100644
index 0000000000..d426a8ce30
Binary files /dev/null and b/docs/public/images/examples/show-full-date-in-a-tooltip.webp differ
diff --git a/docs/public/images/examples/show-links-to-navigation-items.webp b/docs/public/images/examples/show-links-to-navigation-items.webp
new file mode 100644
index 0000000000..84a322c05f
Binary files /dev/null and b/docs/public/images/examples/show-links-to-navigation-items.webp differ
diff --git a/docs/public/images/examples/show-more-information-to-help-answer-a-question.webp b/docs/public/images/examples/show-more-information-to-help-answer-a-question.webp
new file mode 100644
index 0000000000..81386807c1
Binary files /dev/null and b/docs/public/images/examples/show-more-information-to-help-answer-a-question.webp differ
diff --git a/docs/public/images/examples/show-multiple-actions-in-a-compact-table.webp b/docs/public/images/examples/show-multiple-actions-in-a-compact-table.webp
new file mode 100644
index 0000000000..d9426a47a0
Binary files /dev/null and b/docs/public/images/examples/show-multiple-actions-in-a-compact-table.webp differ
diff --git a/docs/public/images/examples/show-multiple-tags-together.webp b/docs/public/images/examples/show-multiple-tags-together.webp
new file mode 100644
index 0000000000..2442454f69
Binary files /dev/null and b/docs/public/images/examples/show-multiple-tags-together.webp differ
diff --git a/docs/public/images/examples/show-number-of-results-per-page.webp b/docs/public/images/examples/show-number-of-results-per-page.webp
new file mode 100644
index 0000000000..6230f36521
Binary files /dev/null and b/docs/public/images/examples/show-number-of-results-per-page.webp differ
diff --git a/docs/public/images/examples/show-quick-links.webp b/docs/public/images/examples/show-quick-links.webp
new file mode 100644
index 0000000000..196cbc40ce
Binary files /dev/null and b/docs/public/images/examples/show-quick-links.webp differ
diff --git a/docs/public/images/examples/show-status-in-a-table.webp b/docs/public/images/examples/show-status-in-a-table.webp
new file mode 100644
index 0000000000..923abc0792
Binary files /dev/null and b/docs/public/images/examples/show-status-in-a-table.webp differ
diff --git a/docs/public/images/examples/show-status-on-a-card.webp b/docs/public/images/examples/show-status-on-a-card.webp
new file mode 100644
index 0000000000..2b50adfcba
Binary files /dev/null and b/docs/public/images/examples/show-status-on-a-card.webp differ
diff --git a/docs/public/images/examples/show-version-number.webp b/docs/public/images/examples/show-version-number.webp
new file mode 100644
index 0000000000..46e01f0246
Binary files /dev/null and b/docs/public/images/examples/show-version-number.webp differ
diff --git a/docs/public/images/examples/slotted-error-text-in-a-form-item.webp b/docs/public/images/examples/slotted-error-text-in-a-form-item.webp
new file mode 100644
index 0000000000..09f2f5ad9b
Binary files /dev/null and b/docs/public/images/examples/slotted-error-text-in-a-form-item.webp differ
diff --git a/docs/public/images/examples/slotted-helper-text-in-a-form-item.webp b/docs/public/images/examples/slotted-helper-text-in-a-form-item.webp
new file mode 100644
index 0000000000..c1fc8404f5
Binary files /dev/null and b/docs/public/images/examples/slotted-helper-text-in-a-form-item.webp differ
diff --git a/docs/public/images/examples/sort-data-in-a-table.webp b/docs/public/images/examples/sort-data-in-a-table.webp
new file mode 100644
index 0000000000..ebb19a17e8
Binary files /dev/null and b/docs/public/images/examples/sort-data-in-a-table.webp differ
diff --git a/docs/public/images/examples/start-page.webp b/docs/public/images/examples/start-page.webp
new file mode 100644
index 0000000000..7cb04e4f74
Binary files /dev/null and b/docs/public/images/examples/start-page.webp differ
diff --git a/docs/public/images/examples/task-list-page.webp b/docs/public/images/examples/task-list-page.webp
new file mode 100644
index 0000000000..a8d6acfe21
Binary files /dev/null and b/docs/public/images/examples/task-list-page.webp differ
diff --git a/docs/public/images/examples/type-to-create-a-new-filter.webp b/docs/public/images/examples/type-to-create-a-new-filter.webp
new file mode 100644
index 0000000000..f1620f36b9
Binary files /dev/null and b/docs/public/images/examples/type-to-create-a-new-filter.webp differ
diff --git a/docs/public/images/examples/warn-a-user-of-a-deadline.webp b/docs/public/images/examples/warn-a-user-of-a-deadline.webp
new file mode 100644
index 0000000000..d726843156
Binary files /dev/null and b/docs/public/images/examples/warn-a-user-of-a-deadline.webp differ
diff --git a/docs/public/images/foundations/content-guidelines/helper-text-anatomy.svg b/docs/public/images/foundations/content-guidelines/helper-text-anatomy.svg
new file mode 100644
index 0000000000..8b1ef82fd2
--- /dev/null
+++ b/docs/public/images/foundations/content-guidelines/helper-text-anatomy.svg
@@ -0,0 +1,18 @@
+
diff --git a/docs/public/images/foundations/motion/expressive-exit.svg b/docs/public/images/foundations/motion/expressive-exit.svg
new file mode 100644
index 0000000000..c5cb2c9193
--- /dev/null
+++ b/docs/public/images/foundations/motion/expressive-exit.svg
@@ -0,0 +1,6 @@
+
diff --git a/docs/public/images/foundations/motion/expressive-reveal.svg b/docs/public/images/foundations/motion/expressive-reveal.svg
new file mode 100644
index 0000000000..ee747eedaa
--- /dev/null
+++ b/docs/public/images/foundations/motion/expressive-reveal.svg
@@ -0,0 +1,13 @@
+
diff --git a/docs/public/images/foundations/motion/expressive-transform.svg b/docs/public/images/foundations/motion/expressive-transform.svg
new file mode 100644
index 0000000000..8ee749e471
--- /dev/null
+++ b/docs/public/images/foundations/motion/expressive-transform.svg
@@ -0,0 +1,13 @@
+
diff --git a/docs/public/images/foundations/motion/expressive.svg b/docs/public/images/foundations/motion/expressive.svg
new file mode 100644
index 0000000000..e6a3cd5a93
--- /dev/null
+++ b/docs/public/images/foundations/motion/expressive.svg
@@ -0,0 +1,13 @@
+
diff --git a/docs/public/images/foundations/motion/productive.svg b/docs/public/images/foundations/motion/productive.svg
new file mode 100644
index 0000000000..bc43319924
--- /dev/null
+++ b/docs/public/images/foundations/motion/productive.svg
@@ -0,0 +1,13 @@
+
diff --git a/docs/public/images/foundations/style-guide/abstract-shapes.svg b/docs/public/images/foundations/style-guide/abstract-shapes.svg
new file mode 100644
index 0000000000..14981f75f3
--- /dev/null
+++ b/docs/public/images/foundations/style-guide/abstract-shapes.svg
@@ -0,0 +1,19 @@
+
diff --git a/docs/public/images/foundations/style-guide/alberta-service-logo.svg b/docs/public/images/foundations/style-guide/alberta-service-logo.svg
new file mode 100644
index 0000000000..4dd90fba71
--- /dev/null
+++ b/docs/public/images/foundations/style-guide/alberta-service-logo.svg
@@ -0,0 +1,14 @@
+
diff --git a/docs/public/images/foundations/style-guide/alberta-sub-mark.svg b/docs/public/images/foundations/style-guide/alberta-sub-mark.svg
new file mode 100644
index 0000000000..85df4351fa
--- /dev/null
+++ b/docs/public/images/foundations/style-guide/alberta-sub-mark.svg
@@ -0,0 +1,16 @@
+
diff --git a/docs/public/images/foundations/style-guide/black-version-logo.svg b/docs/public/images/foundations/style-guide/black-version-logo.svg
new file mode 100644
index 0000000000..60744f74ea
--- /dev/null
+++ b/docs/public/images/foundations/style-guide/black-version-logo.svg
@@ -0,0 +1,6 @@
+
diff --git a/docs/public/images/foundations/style-guide/illustration-1.svg b/docs/public/images/foundations/style-guide/illustration-1.svg
new file mode 100644
index 0000000000..0d22f3a9c3
--- /dev/null
+++ b/docs/public/images/foundations/style-guide/illustration-1.svg
@@ -0,0 +1,62 @@
+
diff --git a/docs/public/images/foundations/style-guide/logo-anatomy.svg b/docs/public/images/foundations/style-guide/logo-anatomy.svg
new file mode 100644
index 0000000000..ffe69c80ed
--- /dev/null
+++ b/docs/public/images/foundations/style-guide/logo-anatomy.svg
@@ -0,0 +1,14 @@
+
diff --git a/docs/public/images/foundations/style-guide/primary-usage-logo.svg b/docs/public/images/foundations/style-guide/primary-usage-logo.svg
new file mode 100644
index 0000000000..a773da33db
--- /dev/null
+++ b/docs/public/images/foundations/style-guide/primary-usage-logo.svg
@@ -0,0 +1,5 @@
+
diff --git a/docs/public/images/foundations/style-guide/public-form-1.svg b/docs/public/images/foundations/style-guide/public-form-1.svg
new file mode 100644
index 0000000000..1f8ff87443
--- /dev/null
+++ b/docs/public/images/foundations/style-guide/public-form-1.svg
@@ -0,0 +1,201 @@
+
diff --git a/docs/public/images/foundations/style-guide/public-form-2.svg b/docs/public/images/foundations/style-guide/public-form-2.svg
new file mode 100644
index 0000000000..ff8575be11
--- /dev/null
+++ b/docs/public/images/foundations/style-guide/public-form-2.svg
@@ -0,0 +1,61 @@
+
diff --git a/docs/public/images/foundations/style-guide/reverse-version-logo.svg b/docs/public/images/foundations/style-guide/reverse-version-logo.svg
new file mode 100644
index 0000000000..79b7b9926e
--- /dev/null
+++ b/docs/public/images/foundations/style-guide/reverse-version-logo.svg
@@ -0,0 +1,5 @@
+
diff --git a/docs/public/images/foundations/style-guide/the-blend.svg b/docs/public/images/foundations/style-guide/the-blend.svg
new file mode 100644
index 0000000000..27c209660c
--- /dev/null
+++ b/docs/public/images/foundations/style-guide/the-blend.svg
@@ -0,0 +1,55 @@
+
diff --git a/docs/public/images/foundations/style-guide/typography-type-specs.jpg b/docs/public/images/foundations/style-guide/typography-type-specs.jpg
new file mode 100644
index 0000000000..dd04e52eff
Binary files /dev/null and b/docs/public/images/foundations/style-guide/typography-type-specs.jpg differ
diff --git a/docs/public/images/foundations/style-guide/white-version-logo.svg b/docs/public/images/foundations/style-guide/white-version-logo.svg
new file mode 100644
index 0000000000..77a78ffa5a
--- /dev/null
+++ b/docs/public/images/foundations/style-guide/white-version-logo.svg
@@ -0,0 +1,6 @@
+
diff --git a/docs/public/images/foundations/style-guide/workspace-1.svg b/docs/public/images/foundations/style-guide/workspace-1.svg
new file mode 100644
index 0000000000..359052d48c
--- /dev/null
+++ b/docs/public/images/foundations/style-guide/workspace-1.svg
@@ -0,0 +1,355 @@
+
diff --git a/docs/public/images/foundations/style-guide/workspace-2.svg b/docs/public/images/foundations/style-guide/workspace-2.svg
new file mode 100644
index 0000000000..adad78c226
--- /dev/null
+++ b/docs/public/images/foundations/style-guide/workspace-2.svg
@@ -0,0 +1,469 @@
+
diff --git a/docs/public/images/foundations/style-guide/workspace-3.svg b/docs/public/images/foundations/style-guide/workspace-3.svg
new file mode 100644
index 0000000000..fa7bfc12a4
--- /dev/null
+++ b/docs/public/images/foundations/style-guide/workspace-3.svg
@@ -0,0 +1,166 @@
+
diff --git a/docs/public/images/technologies.svg b/docs/public/images/technologies.svg
new file mode 100644
index 0000000000..df3dc4683b
--- /dev/null
+++ b/docs/public/images/technologies.svg
@@ -0,0 +1,19 @@
+
diff --git a/docs/public/og-image.png b/docs/public/og-image.png
new file mode 100644
index 0000000000..3ba49481de
Binary files /dev/null and b/docs/public/og-image.png differ
diff --git a/docs/public/search-index.json b/docs/public/search-index.json
index aab298aa2c..7978aa13a8 100644
--- a/docs/public/search-index.json
+++ b/docs/public/search-index.json
@@ -1,29 +1,2718 @@
[
{
+ "type": "component",
+ "id": "accordion",
+ "name": "Accordion",
+ "description": "Let users show and hide sections of related content on a page.",
+ "status": "stable",
+ "category": "content-layout",
+ "tags": [
+ "expand",
+ "blind",
+ "collapse",
+ "content layout",
+ "expandable panel",
+ "expand"
+ ],
+ "slug": "accordion"
+ },
+ {
+ "type": "component",
+ "id": "app-header",
+ "name": "Header",
+ "description": "Provide structure to help users find their way around the service.",
+ "status": "stable",
+ "category": "structure-and-navigation",
+ "tags": [
+ "app header",
+ "global navigation",
+ "header",
+ "header and navigation",
+ "main navigation",
+ "navigation header",
+ "navigation menu",
+ "primary navigation",
+ "service header",
+ "structure and navigation",
+ "top navigation"
+ ],
+ "slug": "app-header"
+ },
+ {
+ "type": "component",
"id": "badge",
- "title": "Badge",
- "description": " Small labels which hold small amounts of information, system feedback, or states. ",
- "content": "# Badge\n\nSmall labels which hold small amounts of information, system feedback, or states.\n",
- "component": "badge",
- "filePath": "docs/src/pages/components/badge/badge.mdx",
- "urlPath": "components/badge",
- "tags": [
- "filter chip",
+ "name": "Badge",
+ "description": "Small labels which hold small amounts of information, system feedback, or states.",
+ "status": "stable",
+ "category": "feedback-and-alerts",
+ "tags": [
+ "feedback and alerts",
+ "label",
+ "lozenge",
+ "status",
+ "tag",
+ "token"
+ ],
+ "slug": "badge"
+ },
+ {
+ "type": "component",
+ "id": "block",
+ "name": "Block",
+ "description": "Group components into a block with consistent space between.",
+ "status": "stable",
+ "category": "utilities",
+ "tags": [
+ "utility"
+ ],
+ "slug": "block"
+ },
+ {
+ "type": "component",
+ "id": "button-group",
+ "name": "Button group",
+ "description": "Display multiple related actions stacked or in a horizontal row to help with arrangement and spacing.",
+ "status": "stable",
+ "category": "inputs-and-actions",
+ "tags": [
+ "action",
+ "inputs and actions",
+ "submit"
+ ],
+ "slug": "button-group"
+ },
+ {
+ "type": "component",
+ "id": "button",
+ "name": "Button",
+ "description": "Carry out an important action or navigate to another page.",
+ "status": "stable",
+ "category": "inputs-and-actions",
+ "tags": [
+ "action",
+ "inputs and actions",
+ "submit"
+ ],
+ "slug": "button"
+ },
+ {
+ "type": "component",
+ "id": "callout",
+ "name": "Callout",
+ "description": "Communicate important information through a strong visual emphasis.",
+ "status": "stable",
+ "category": "feedback-and-alerts",
+ "tags": [
+ "alert",
+ "feedback and alerts",
+ "show more information"
+ ],
+ "slug": "callout"
+ },
+ {
+ "type": "component",
+ "id": "checkbox-list",
+ "name": "Checkbox list",
+ "description": "A multiple selection input.",
+ "status": "stable",
+ "category": "inputs-and-actions",
+ "tags": [
+ "checkbox",
+ "input",
+ "inputs and actions"
+ ],
+ "slug": "checkbox-list"
+ },
+ {
+ "type": "component",
+ "id": "checkbox",
+ "name": "Checkbox",
+ "description": "Let the user select one or more options.",
+ "status": "stable",
+ "category": "inputs-and-actions",
+ "tags": [
+ "checklist",
+ "input",
+ "inputs and actions",
+ "options"
+ ],
+ "slug": "checkbox"
+ },
+ {
+ "type": "component",
+ "id": "circular-progress",
+ "name": "Circular progress indicator",
+ "description": "Provide feedback of progress to users while loading.",
+ "status": "stable",
+ "category": "feedback-and-alerts",
+ "tags": [
+ "feedback and alerts",
+ "loading",
+ "loader",
+ "loading indicator",
+ "progress spinner",
+ "process timer",
+ "spinner"
+ ],
+ "slug": "circular-progress"
+ },
+ {
+ "type": "component",
+ "id": "container",
+ "name": "Container",
+ "description": "Group information, create hierarchy, and show related information.",
+ "status": "stable",
+ "category": "content-layout",
+ "tags": [
+ "card",
+ "content",
+ "content layout",
+ "group",
+ "structure"
+ ],
+ "slug": "container"
+ },
+ {
+ "type": "component",
+ "id": "data-grid",
+ "name": "Data Grid",
+ "description": "Advanced table with sorting and selection.",
+ "status": "stable",
+ "category": "content-layout",
+ "tags": [],
+ "slug": "data-grid"
+ },
+ {
+ "type": "component",
+ "id": "date-picker",
+ "name": "Date picker",
+ "description": "Lets users select a date through a calendar without the need to manually type it in a field.",
+ "status": "stable",
+ "category": "inputs-and-actions",
+ "tags": [
+ "calendar",
+ "date",
+ "date picker",
+ "inputs and actions",
+ "input"
+ ],
+ "slug": "date-picker"
+ },
+ {
+ "type": "component",
+ "id": "details",
+ "name": "Details",
+ "description": "Let users reveal more detailed information when they need it.",
+ "status": "stable",
+ "category": "content-layout",
+ "tags": [
+ "accordion details",
+ "additional info",
+ "additional information",
+ "content layout",
+ "detail accordion",
+ "details expander",
+ "details toggle",
+ "disclosure",
+ "expand",
+ "expander",
+ "expanding detail",
+ "expandable details",
+ "expandable help text",
+ "more info",
+ "see more",
+ "show more",
+ "show more information"
+ ],
+ "slug": "details"
+ },
+ {
+ "type": "component",
+ "id": "divider",
+ "name": "Divider",
+ "description": "Indicate a separation of layout, or to distinguish large chunks of information on a page.",
+ "status": "stable",
+ "category": "utilities",
+ "tags": [
+ "dividing line",
+ "page divider",
+ "utilities"
+ ],
+ "slug": "divider"
+ },
+ {
+ "type": "component",
+ "id": "drawer",
+ "name": "Drawer",
+ "description": "A panel that slides in from the side of the screen to display additional content or actions without navigating away from the current view.",
+ "status": "stable",
+ "category": "content-layout",
+ "tags": [
+ "sections",
+ "structure and navigation",
+ "sheet",
+ "sidesheet",
+ "sidepanel"
+ ],
+ "slug": "drawer"
+ },
+ {
+ "type": "component",
+ "id": "dropdown",
+ "name": "Dropdown",
+ "description": "Present a list of options to the user to select from.",
+ "status": "stable",
+ "category": "inputs-and-actions",
+ "tags": [
+ "inputs and actions",
+ "select",
+ "single select dropdown"
+ ],
+ "slug": "dropdown"
+ },
+ {
+ "type": "component",
+ "id": "file-upload-input",
+ "name": "File uploader",
+ "description": "Help users select and upload a file.",
+ "status": "stable",
+ "category": "inputs-and-actions",
+ "tags": [
+ "drag and drop",
+ "file upload",
+ "inputs and actions",
+ "uploader"
+ ],
+ "slug": "file-upload-input"
+ },
+ {
+ "type": "component",
+ "id": "filter-chip",
+ "name": "Filter chip",
+ "description": "Allow the user to enter information, filter content, and make selections.",
+ "status": "stable",
+ "category": "feedback-and-alerts",
+ "tags": [
+ "inputs and actions",
+ "pill"
+ ],
+ "slug": "filter-chip"
+ },
+ {
+ "type": "component",
+ "id": "footer",
+ "name": "Footer",
+ "description": "Provides information related your service at the bottom of every page.",
+ "status": "stable",
+ "category": "structure-and-navigation",
+ "tags": [
+ "page footer",
+ "structure and navigation"
+ ],
+ "slug": "footer"
+ },
+ {
+ "type": "component",
+ "id": "form-item",
+ "name": "Form item",
+ "description": "Wraps an input control with a text label, requirement label, helper text, and error text.",
+ "status": "stable",
+ "category": "utilities",
+ "tags": [
+ "form",
+ "input",
+ "inputs and actions"
+ ],
+ "slug": "form-item"
+ },
+ {
+ "type": "component",
+ "id": "form-stepper",
+ "name": "Form stepper",
+ "description": "Provides a visual representation of a form through a series of steps.",
+ "status": "deprecated",
+ "category": "structure-and-navigation",
+ "tags": [
+ "form stepper",
+ "horizontal step navigation",
+ "process overview",
+ "progress indicator",
+ "steps",
+ "structure and navigation",
+ "wizard"
+ ],
+ "slug": "form-stepper"
+ },
+ {
+ "type": "component",
+ "id": "form",
+ "name": "Form",
+ "description": "Container for form inputs and validation.",
+ "status": "stable",
+ "category": "inputs-and-actions",
+ "tags": [],
+ "slug": "form"
+ },
+ {
+ "type": "component",
+ "id": "grid",
+ "name": "Grid",
+ "description": "Arrange a number of components into a responsive grid pattern.",
+ "status": "stable",
+ "category": "utilities",
+ "tags": [
+ "utilities"
+ ],
+ "slug": "grid"
+ },
+ {
+ "type": "component",
+ "id": "hero-banner",
+ "name": "Hero banner",
+ "description": "A visual band of text, including an image and a call to action.",
+ "status": "stable",
+ "category": "content-layout",
+ "tags": [
+ "promotion banner",
+ "hero panel",
+ "structure and navigation"
+ ],
+ "slug": "hero-banner"
+ },
+ {
+ "type": "component",
+ "id": "icon-button",
+ "name": "Icon button",
+ "description": "A compact button with an icon and no text.",
+ "status": "stable",
+ "category": "inputs-and-actions",
+ "tags": [
+ "action",
+ "inputs and actions",
+ "submit"
+ ],
+ "slug": "icon-button"
+ },
+ {
+ "type": "component",
+ "id": "icon",
+ "name": "Icons",
+ "description": "A simple and universal graphic symbol representing an action, object, or concept to help guide the user.",
+ "status": "stable",
+ "category": "utilities",
+ "tags": [
+ "utilities"
+ ],
+ "slug": "icon"
+ },
+ {
+ "type": "component",
+ "id": "input",
+ "name": "Input",
+ "description": "A single-line field where users can input and edit text.",
+ "status": "stable",
+ "category": "inputs-and-actions",
+ "tags": [
+ "inputs and actions",
+ "text field",
+ "text box",
+ "search",
+ "text input"
+ ],
+ "slug": "input"
+ },
+ {
+ "type": "component",
+ "id": "linear-progress",
+ "name": "Linear progress indicator",
+ "description": "Provide visual feedback to users while loading.",
+ "status": "stable",
+ "category": "feedback-and-alerts",
+ "tags": [
+ "progress",
+ "feedback and alerts",
+ "loading",
+ "loader",
+ "loading indicator",
+ "process timer"
+ ],
+ "slug": "linear-progress"
+ },
+ {
+ "type": "component",
+ "id": "link-button",
+ "name": "Link Button",
+ "description": "Button styled as a link for secondary actions.",
+ "status": "stable",
+ "category": "inputs-and-actions",
+ "tags": [],
+ "slug": "link-button"
+ },
+ {
+ "type": "component",
+ "id": "link",
+ "name": "Link",
+ "description": "Wraps an anchor element to add icons or margins.",
+ "status": "stable",
+ "category": "utilities",
+ "tags": [
+ "utilities",
+ "text"
+ ],
+ "slug": "link"
+ },
+ {
+ "type": "component",
+ "id": "menu-button",
+ "name": "Menu button",
+ "description": "A button with more than one action.",
+ "status": "stable",
+ "category": "inputs-and-actions",
+ "tags": [
+ "menu button",
+ "split button"
+ ],
+ "slug": "menu-button"
+ },
+ {
+ "type": "component",
+ "id": "microsite-header",
+ "name": "Microsite header",
+ "description": "Communicate what stage the service is at, connect to Alberta.ca, and gather feedback on your service.",
+ "status": "stable",
+ "category": "structure-and-navigation",
+ "tags": [
+ "banner",
+ "development header",
+ "feedback bar",
+ "microheader",
+ "microsite banner",
+ "service header",
+ "service bar",
+ "service stage banner",
+ "service state banner",
+ "status bar",
+ "structure and navigation"
+ ],
+ "slug": "microsite-header"
+ },
+ {
+ "type": "component",
+ "id": "modal",
+ "name": "Modal",
+ "description": "An overlay that appears in front of all other content, and requires a user to take an action before continuing.",
+ "status": "stable",
+ "category": "feedback-and-alerts",
+ "tags": [
+ "feedback and alerts",
+ "popup modal",
+ "popup box",
+ "modal dialog",
+ "show more information"
+ ],
+ "slug": "modal"
+ },
+ {
+ "type": "component",
+ "id": "notification",
+ "name": "Notification banner",
+ "description": "Display important page level information or notifications.",
+ "status": "stable",
+ "category": "feedback-and-alerts",
+ "tags": [
+ "alert banner",
+ "banner",
+ "feedback and alerts"
+ ],
+ "slug": "notification"
+ },
+ {
+ "type": "component",
+ "id": "page-block",
+ "name": "Page Block",
+ "description": "Full-width section with optional background.",
+ "status": "stable",
+ "category": "content-layout",
+ "tags": [],
+ "slug": "page-block"
+ },
+ {
+ "type": "component",
+ "id": "pagination",
+ "name": "Pagination",
+ "description": "Help users navigation between multiple pages or screens as part of a set.",
+ "status": "stable",
+ "category": "structure-and-navigation",
+ "tags": [
+ "pager",
+ "pagination controls",
+ "structure and navigation"
+ ],
+ "slug": "pagination"
+ },
+ {
+ "type": "component",
+ "id": "popover",
+ "name": "Popover",
+ "description": "A small overlay that opens on demand, used in other components.",
+ "status": "stable",
+ "category": "content-layout",
+ "tags": [
+ "content layout",
+ "show more information"
+ ],
+ "slug": "popover"
+ },
+ {
+ "type": "component",
+ "id": "push-drawer",
+ "name": "Push Drawer",
+ "description": "A panel that pushes the main page content aside on desktop, falling back to an overlay drawer on smaller screens.",
+ "status": "stable",
+ "category": "content-layout",
+ "tags": [
+ "sections",
+ "structure and navigation",
+ "drawer",
+ "sidebar",
+ "panel"
+ ],
+ "slug": "push-drawer"
+ },
+ {
+ "type": "component",
+ "id": "radio-group",
+ "name": "Radio",
+ "description": "Allow users to select one option from a set.",
+ "status": "stable",
+ "category": "inputs-and-actions",
+ "tags": [
+ "inputs and actions",
+ "option button",
+ "radio button group",
+ "radio buttons"
+ ],
+ "slug": "radio-group"
+ },
+ {
+ "type": "component",
+ "id": "side-menu",
+ "name": "Side menu",
+ "description": "A side navigation that helps the user navigate between pages.",
+ "status": "stable",
+ "category": "structure-and-navigation",
+ "tags": [
+ "secondary navigation",
+ "side nav",
+ "side bar",
+ "structure and navigation"
+ ],
+ "slug": "side-menu"
+ },
+ {
+ "type": "component",
+ "id": "skeleton",
+ "name": "Skeleton loader",
+ "description": "Provide visual feedback to users while loading a content heavy page or page element.",
+ "status": "stable",
+ "category": "feedback-and-alerts",
+ "tags": [
+ "content layout",
+ "loading"
+ ],
+ "slug": "skeleton"
+ },
+ {
+ "type": "component",
+ "id": "spacer",
+ "name": "Spacer",
+ "description": "Negative area between the components and the interface.",
+ "status": "stable",
+ "category": "utilities",
+ "tags": [
+ "gap",
+ "margin",
+ "padding",
+ "space",
+ "utilities"
+ ],
+ "slug": "spacer"
+ },
+ {
+ "type": "component",
+ "id": "table",
+ "name": "Table",
+ "description": "A set of structured data that is easy for a user to scan, examine, and compare.",
+ "status": "stable",
+ "category": "content-layout",
+ "tags": [
+ "data table",
+ "content layout",
+ "interactive table",
+ "sortable table"
+ ],
+ "slug": "table"
+ },
+ {
+ "type": "component",
+ "id": "tabs",
+ "name": "Tabs",
+ "description": "Let users navigate between related sections of content, displaying one section at a time.",
+ "status": "stable",
+ "category": "structure-and-navigation",
+ "tags": [
+ "sections",
+ "structure and navigation",
+ "tabbed interface"
+ ],
+ "slug": "tabs"
+ },
+ {
+ "type": "component",
+ "id": "temporary-notification",
+ "name": "Temporary notification",
+ "description": "A notification that appears at the bottom of the screen.",
+ "status": "stable",
+ "category": "feedback-and-alerts",
+ "tags": [
+ "snackbar",
+ "toast",
+ "temporary notification"
+ ],
+ "slug": "temporary-notification"
+ },
+ {
+ "type": "component",
+ "id": "text-area",
+ "name": "Text area",
+ "description": "A multi-line field where users can input and edit text.",
+ "status": "stable",
+ "category": "inputs-and-actions",
+ "tags": [
+ "inputs and actions",
+ "long answer input field",
+ "multi line text input",
+ "multiple text box",
+ "text box",
+ "text input area"
+ ],
+ "slug": "text-area"
+ },
+ {
+ "type": "component",
+ "id": "text",
+ "name": "Text",
+ "description": "Provides consistent sizing, spacing, and colour to written content.",
+ "status": "stable",
+ "category": "content-layout",
+ "tags": [
+ "text",
+ "body",
+ "copy"
+ ],
+ "slug": "text"
+ },
+ {
+ "type": "component",
+ "id": "tooltip",
+ "name": "Tooltip",
+ "description": "A small popover that displays more information about an item.",
+ "status": "stable",
+ "category": "feedback-and-alerts",
+ "tags": [
+ "feedback and alerts"
+ ],
+ "slug": "tooltip"
+ },
+ {
+ "type": "component",
+ "id": "work-side-menu",
+ "name": "Work Side Menu",
+ "description": "Side menu variant for worker applications.",
+ "status": "stable",
+ "category": "structure-and-navigation",
+ "tags": [],
+ "slug": "work-side-menu"
+ },
+ {
+ "type": "example",
+ "id": "add-a-filter-chip",
+ "title": "Add a filter chip",
+ "description": "Allow users to apply filters using selectable chips, which visually represent active filters and can be removed to update results dynamically.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "filtering",
+ "chips",
+ "dynamic"
+ ],
+ "components": [
+ "filter-chip",
+ "button"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "add-a-filter-chip"
+ },
+ {
+ "type": "example",
+ "id": "add-a-record-using-a-drawer",
+ "title": "Add a record using a drawer",
+ "description": "Add a record using a drawer. The drawer slides in from the side to allow data entry without navigating away from the current view.",
+ "status": "published",
+ "categories": [
+ "structure-and-navigation"
+ ],
+ "tags": [
+ "drawer",
+ "forms",
+ "records",
+ "data-entry"
+ ],
+ "components": [
+ "drawer",
+ "button",
+ "button-group",
+ "form-item",
+ "dropdown",
+ "input",
+ "radio-group",
+ "block"
+ ],
+ "scale": "task",
+ "userType": "worker",
+ "slug": "add-a-record-using-a-drawer"
+ },
+ {
+ "type": "example",
+ "id": "add-and-edit-lots-of-filters",
+ "title": "Add and edit lots of filters",
+ "description": "Add and edit filters using a drawer. This pattern is useful when you have many filter options that would clutter the main interface.",
+ "status": "published",
+ "categories": [
+ "structure-and-navigation"
+ ],
+ "tags": [
+ "filtering",
+ "drawer",
+ "forms",
+ "data-management"
+ ],
+ "components": [
+ "drawer",
+ "button",
+ "button-group",
+ "form-item",
+ "checkbox-list",
+ "checkbox",
+ "dropdown",
+ "radio-group"
+ ],
+ "scale": "task",
+ "userType": "worker",
+ "slug": "add-and-edit-lots-of-filters"
+ },
+ {
+ "type": "example",
+ "id": "add-another-item-in-a-modal",
+ "title": "Add another item in a modal",
+ "description": "Add a new item within a modal window without navigating away from the current context.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "modal",
+ "forms",
+ "data-entry"
+ ],
+ "components": [
+ "modal",
+ "button",
+ "button-group",
+ "form-item",
+ "dropdown",
+ "input",
+ "text-area"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "add-another-item-in-a-modal"
+ },
+ {
+ "type": "example",
+ "id": "ask-a-long-answer-question-with-a-maximum-word-count",
+ "title": "Ask a long answer question with a maximum word count",
+ "description": "Restrict a long answer input to a maximum number of words or characters.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "forms",
+ "text-area",
+ "validation",
+ "word-count"
+ ],
+ "components": [
+ "form-item",
+ "text-area"
+ ],
+ "scale": "task",
+ "userType": "citizen",
+ "slug": "ask-a-long-answer-question-with-a-maximum-word-count"
+ },
+ {
+ "type": "example",
+ "id": "ask-a-user-for-a-birthday",
+ "title": "Ask a user for a birthday",
+ "description": "Asks for a user's birthday using the date picker component.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "forms",
+ "date-input",
+ "ask-a-user-for"
+ ],
+ "components": [
+ "form-item",
+ "date-picker"
+ ],
+ "scale": "task",
+ "userType": "citizen",
+ "slug": "ask-a-user-for-a-birthday"
+ },
+ {
+ "type": "example",
+ "id": "ask-a-user-for-an-address",
+ "title": "Ask a user for an address",
+ "description": "Collect a complete mailing address from the user, including fields like street, city, and postal code.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "forms",
+ "address",
+ "location"
+ ],
+ "components": [
+ "form-item",
+ "input",
+ "dropdown",
+ "block",
+ "button",
+ "button-group",
+ "text"
+ ],
+ "scale": "task",
+ "userType": "citizen",
+ "slug": "ask-a-user-for-an-address"
+ },
+ {
+ "type": "example",
+ "id": "ask-a-user-for-an-indian-registration-number",
+ "title": "Ask a user for an Indian registration number",
+ "description": "Request a user's Indian registration number with appropriate validation and context.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "forms",
+ "identity",
+ "registration"
+ ],
+ "components": [
+ "form-item",
+ "input",
+ "block"
+ ],
+ "scale": "task",
+ "userType": "citizen",
+ "slug": "ask-a-user-for-an-indian-registration-number"
+ },
+ {
+ "type": "example",
+ "id": "ask-a-user-for-direct-deposit-information",
+ "title": "Ask a user for direct deposit information",
+ "description": "Gather banking details from users to enable direct deposit, including account number and financial institution information.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "forms",
+ "banking",
+ "financial"
+ ],
+ "components": [
+ "form-item",
+ "input",
+ "details",
+ "text"
+ ],
+ "scale": "task",
+ "userType": "citizen",
+ "slug": "ask-a-user-for-direct-deposit-information"
+ },
+ {
+ "type": "example",
+ "id": "ask-a-user-for-dollar-amounts",
+ "title": "Ask a user for dollar amounts",
+ "description": "Prompt users to enter monetary values using a consistent input format that supports validation and currency symbols.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "forms",
+ "currency",
+ "financial"
+ ],
+ "components": [
+ "form-item",
+ "input"
+ ],
+ "scale": "task",
+ "userType": "citizen",
+ "slug": "ask-a-user-for-dollar-amounts"
+ },
+ {
+ "type": "example",
+ "id": "ask-a-user-one-question-at-a-time",
+ "title": "Ask a user one question at a time",
+ "description": "Ask a user one question at a time.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "forms",
+ "questions",
+ "public-form"
+ ],
+ "components": [
+ "form-item",
+ "radio-group",
+ "radio-item",
+ "button"
+ ],
+ "scale": "page",
+ "userType": "citizen",
+ "slug": "ask-a-user-one-question-at-a-time"
+ },
+ {
+ "type": "example",
+ "id": "basic-page-layout",
+ "title": "Basic page layout",
+ "description": "A basic page template to use as a starting point.",
+ "status": "published",
+ "categories": [
+ "content-layout"
+ ],
+ "tags": [
+ "layout",
+ "page-structure",
+ "template"
+ ],
+ "components": [
+ "app-header",
+ "footer",
+ "page-block",
+ "skeleton",
+ "grid"
+ ],
+ "scale": "page",
+ "userType": "both",
+ "slug": "basic-page-layout"
+ },
+ {
+ "type": "example",
+ "id": "button-with-icon",
+ "title": "Button with Icon",
+ "description": "Shows how to add leading or trailing icons to buttons for enhanced visual communication.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
"icons",
+ "buttons",
+ "actions"
+ ],
+ "components": [
+ "button",
+ "button-group",
+ "icon"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "button-with-icon"
+ },
+ {
+ "type": "example",
+ "id": "card-grid",
+ "title": "Card grid",
+ "description": "Display multiple cards in a grid layout, each containing related content or actions.",
+ "status": "published",
+ "categories": [
+ "content-layout"
+ ],
+ "tags": [
+ "cards",
+ "grid",
+ "navigation",
+ "dashboard"
+ ],
+ "components": [
+ "container",
+ "grid",
+ "link",
+ "text"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "card-grid"
+ },
+ {
+ "type": "example",
+ "id": "card-view-of-case-files",
+ "title": "Card view of case files",
+ "description": "Present a visual overview of individual case files in a card format for scanning and access.",
+ "status": "published",
+ "categories": [
+ "content-layout"
+ ],
+ "tags": [
+ "cards",
+ "case-management",
+ "status",
+ "list"
+ ],
+ "components": [
+ "container",
+ "block",
+ "badge",
+ "button"
+ ],
+ "scale": "task",
+ "userType": "worker",
+ "slug": "card-view-of-case-files"
+ },
+ {
+ "type": "example",
+ "id": "communicate-a-future-service-outage",
+ "title": "Communicate a future service outage",
+ "description": "Display a clear message to inform users about an upcoming service outage, including the date, time, and expected impact on service availability.",
+ "status": "published",
+ "categories": [
+ "feedback-and-alerts"
+ ],
+ "tags": [
+ "notification",
+ "maintenance",
+ "alerts",
+ "system-status"
+ ],
+ "components": [
+ "notification"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "communicate-a-future-service-outage"
+ },
+ {
+ "type": "example",
+ "id": "confirm-a-change",
+ "title": "Confirm a change",
+ "description": "Ask the user to confirm a proposed change before it is applied.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "modal",
+ "confirmation",
+ "forms",
+ "changes"
+ ],
+ "components": [
+ "modal",
+ "button",
+ "button-group",
+ "container",
+ "form-item",
+ "date-picker"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "confirm-a-change"
+ },
+ {
+ "type": "example",
+ "id": "confirm-a-destructive-action",
+ "title": "Confirm a destructive action",
+ "description": "Confirm a destructive action like deletion to prevent accidental data loss.",
+ "status": "published",
+ "categories": [
+ "feedback-and-alerts"
+ ],
+ "tags": [
+ "modal",
+ "confirmation",
+ "delete",
+ "destructive"
+ ],
+ "components": [
+ "modal",
+ "button",
+ "button-group"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "confirm-a-destructive-action"
+ },
+ {
+ "type": "example",
+ "id": "confirm-before-navigating-away",
+ "title": "Confirm before navigating away",
+ "description": "Prompt the user in a modal before navigating to a new route to preserve context.",
+ "status": "published",
+ "categories": [
+ "feedback-and-alerts"
+ ],
+ "tags": [
+ "modal",
+ "navigation",
+ "confirmation",
+ "routing"
+ ],
+ "components": [
+ "modal",
+ "button",
+ "button-group"
+ ],
+ "scale": "task",
+ "userType": "worker",
+ "slug": "confirm-before-navigating-away"
+ },
+ {
+ "type": "example",
+ "id": "confirm-that-an-application-was-submitted",
+ "title": "Confirm that an application was submitted",
+ "description": "Display a confirmation screen to indicate successful application submission.",
+ "status": "published",
+ "categories": [
+ "feedback-and-alerts"
+ ],
+ "tags": [
+ "confirmation",
+ "success",
+ "callout",
+ "application"
+ ],
+ "components": [
+ "callout",
+ "button",
+ "button-group"
+ ],
+ "scale": "page",
+ "userType": "citizen",
+ "slug": "confirm-that-an-application-was-submitted"
+ },
+ {
+ "type": "example",
+ "id": "copy-to-clipboard",
+ "title": "Copy to clipboard",
+ "description": "Allow users to quickly copy text or data to their clipboard with a single click.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "clipboard",
+ "copy",
+ "tooltip",
+ "icon-button"
+ ],
+ "components": [
+ "block",
+ "icon-button",
+ "tooltip"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "copy-to-clipboard"
+ },
+ {
+ "type": "example",
+ "id": "disabled-button-with-a-required-field",
+ "title": "Disabled button with a required field",
+ "description": "Disable a submit button until required form fields are completed.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "button",
+ "form",
+ "validation",
+ "disabled",
+ "required"
+ ],
+ "components": [
+ "button",
+ "button-group",
+ "form-item",
+ "input"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "disabled-button-with-a-required-field"
+ },
+ {
+ "type": "example",
+ "id": "display-numbers-in-a-table-so-they-can-be-scanned-easily",
+ "title": "Display numbers in a table so they can be scanned easily",
+ "description": "Right-align numeric columns in tables to make them easier to scan and compare.",
+ "status": "published",
+ "categories": [
+ "content-layout"
+ ],
+ "tags": [
+ "table",
+ "numbers",
+ "data",
+ "alignment",
+ "scanning"
+ ],
+ "components": [
"table"
- ]
+ ],
+ "scale": "task",
+ "userType": "worker",
+ "slug": "display-numbers-in-a-table-so-they-can-be-scanned-easily"
},
{
- "id": "accordion",
- "title": "Accordion",
- "description": "Some additional description for the component",
- "content": "# Accordion\nAccordion containers enable multiple content sections to be displayed in a limited space and collapsed or expanded by the user. You can create hierarchy of information by hiding secondary content inside collapsed expand containers.\n\n## Examples\n\n\n
\n
Name
\n
Joan Smith
\n
Contact preference
\n
Text message
\n
\n\n\n### Close all\n\nconst AccordionCloseAllExample => () {\n const [expandedAll, setExpandedAll] = useState(false);\n const [expandedList, setExpandedList] = useState([]);\n useEffect(() => {\n setExpandedAll(expandedList.length === 4);\n }, [expandedList.length]);\n\n const expandOrCollapseAll = () => {\n setExpandedAll((prev) => {\n const newState = !prev;\n setExpandedList(newState ? [1, 2, 3, 4] : []);\n return newState;\n });\n };\n\n const updateAccordion = (order: number, isOpen: boolean) => {\n setExpandedList((prev) => {\n if (isOpen) {\n return prev.includes(order) ? prev: [...prev, order];\n }\n return prev.filter((item) => item !== order);\n });\n\n return (\n expandOrCollapseAll()}>\n {expandedAll ? \"Hide all sections\" : \"Show all sections\"}\n \n\n updateAccordion(1, open)}>\n To create an account you will need to contact your office admin.\n \n\n updateAccordion(2, open)}>\n You will need to verify your identity through our two factor authentication in addition to the digital signature.\n \n\n updateAccordion(3, open)}>\n Yes, you can see the status of your application on the main service dashboard when you login. You will receive updates and notifications in your email as your request progresses.\n \n\n updateAccordion(4, open)}>\n Yes, our digital service is designed with accessibility in mind. More information on accessibility.\n \n )\n}\n\n\n",
- "component": "accordion",
- "filePath": "docs/src/pages/components/accordion/accordion.mdx",
- "urlPath": "components/accordion",
+ "type": "example",
+ "id": "display-user-information",
+ "title": "Display user information",
+ "description": "Display user contact information and related data using containers with clear visual hierarchy.",
+ "status": "published",
+ "categories": [
+ "content-layout"
+ ],
+ "tags": [
+ "container",
+ "user-info",
+ "contact",
+ "profile",
+ "table"
+ ],
+ "components": [
+ "container",
+ "block",
+ "button",
+ "table",
+ "text"
+ ],
+ "scale": "task",
+ "userType": "worker",
+ "slug": "display-user-information"
+ },
+ {
+ "type": "example",
+ "id": "dynamically-add-an-item-to-a-dropdown-list",
+ "title": "Dynamically add an item to a dropdown list",
+ "description": "Allow users to add new items to a dropdown list dynamically.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "dropdown",
+ "dynamic",
+ "form",
+ "input",
+ "radio"
+ ],
+ "components": [
+ "dropdown",
+ "dropdown-item",
+ "form-item",
+ "input",
+ "button"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "dynamically-add-an-item-to-a-dropdown-list"
+ },
+ {
+ "type": "example",
+ "id": "dynamically-change-items-in-a-dropdown-list",
+ "title": "Dynamically change items in a dropdown list",
+ "description": "Update dropdown options based on the selection in another dropdown (cascading/dependent dropdowns).",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "dropdown",
+ "dynamic",
+ "cascading",
+ "dependent",
+ "form"
+ ],
+ "components": [
+ "dropdown",
+ "dropdown-item",
+ "form-item"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "dynamically-change-items-in-a-dropdown-list"
+ },
+ {
+ "type": "example",
+ "id": "expand-or-collapse-part-of-a-form",
+ "title": "Expand or collapse part of a form",
+ "description": "Use accordions to organize form review sections that users can expand or collapse.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "accordion",
+ "form",
+ "review",
+ "collapsible",
+ "badge"
+ ],
+ "components": [
+ "accordion",
+ "badge"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "expand-or-collapse-part-of-a-form"
+ },
+ {
+ "type": "example",
+ "id": "filter-a-list-using-a-push-drawer",
+ "title": "Filter a list using a push drawer",
+ "description": "Use a push drawer to house filters alongside a list of records. The push drawer keeps the filter controls accessible while users can still see and interact with the filtered results.",
+ "status": "published",
+ "categories": [
+ "content-layout"
+ ],
+ "tags": [
+ "push-drawer",
+ "filters",
+ "list",
+ "search"
+ ],
+ "components": [
+ "push-drawer",
+ "button",
+ "table",
+ "badge",
+ "checkbox",
+ "checkbox-list",
+ "dropdown",
+ "form-item"
+ ],
+ "scale": "task",
+ "userType": "worker",
+ "slug": "filter-a-list-using-a-push-drawer"
+ },
+ {
+ "type": "example",
+ "id": "filter-data-in-a-table",
+ "title": "Filter data in a table",
+ "description": "Enable users to filter table data using search input and filter chips.",
+ "status": "published",
+ "categories": [
+ "structure-and-navigation"
+ ],
+ "tags": [
+ "table",
+ "filter",
+ "search",
+ "chips",
+ "data"
+ ],
+ "components": [
+ "table",
+ "filter-chip",
+ "input",
+ "button",
+ "block",
+ "form-item",
+ "badge",
+ "text"
+ ],
+ "scale": "task",
+ "userType": "worker",
+ "slug": "filter-data-in-a-table"
+ },
+ {
+ "type": "example",
+ "id": "form-stepper-with-controlled-navigation",
+ "title": "Form stepper with controlled navigation",
+ "description": "Create a multi-step form with controlled navigation using Previous/Next buttons.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "stepper",
+ "form",
+ "wizard",
+ "multi-step",
+ "navigation",
+ "pages"
+ ],
+ "components": [
+ "form-stepper",
+ "form-step",
+ "pages",
+ "button",
+ "skeleton",
+ "spacer"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "form-stepper-with-controlled-navigation"
+ },
+ {
+ "type": "example",
+ "id": "give-background-information-before-asking-a-question",
+ "title": "Give background information before asking a question",
+ "description": "Provide explanatory context before asking a question to help users understand what is being asked.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "form",
+ "question",
+ "context",
+ "radio",
+ "citizen-facing"
+ ],
+ "components": [
+ "form-item",
+ "radio-group",
+ "radio-item",
+ "button"
+ ],
+ "scale": "task",
+ "userType": "citizen",
+ "slug": "give-background-information-before-asking-a-question"
+ },
+ {
+ "type": "example",
+ "id": "give-context-before-asking-a-long-answer-question",
+ "title": "Give context before asking a long answer question",
+ "description": "Provide context and guidance before a long-answer text field to help users provide relevant information.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "form",
+ "text-area",
+ "question",
+ "context",
+ "details",
+ "citizen-facing"
+ ],
+ "components": [
+ "text-area",
+ "form-item",
+ "details",
+ "button",
+ "button-group"
+ ],
+ "scale": "task",
+ "userType": "citizen",
+ "slug": "give-context-before-asking-a-long-answer-question"
+ },
+ {
+ "type": "example",
+ "id": "group-related-questions-together-on-a-question-page",
+ "title": "Group related questions together on a question page",
+ "description": "Group related form fields together on a single page to collect address information from users, making it easier to complete logically connected questions at once.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "forms",
+ "address",
+ "question-page"
+ ],
+ "components": [
+ "form-item",
+ "input",
+ "dropdown",
+ "dropdown-item",
+ "button"
+ ],
+ "scale": "page",
+ "userType": "citizen",
+ "slug": "group-related-questions-together-on-a-question-page"
+ },
+ {
+ "type": "example",
+ "id": "header-with-navigation",
+ "title": "Header with navigation",
+ "description": "An application header with navigation links, grouped menu items, and a user account menu.",
+ "status": "published",
+ "categories": [
+ "structure-and-navigation"
+ ],
+ "tags": [
+ "header",
+ "navigation",
+ "menu"
+ ],
+ "components": [
+ "app-header",
+ "app-header-menu"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "header-with-navigation"
+ },
+ {
+ "type": "example",
+ "id": "hero-banner-with-actions",
+ "title": "Hero banner with actions",
+ "description": "Create a hero banner with a call-to-action button to guide users toward the primary task on a landing page.",
+ "status": "published",
+ "categories": [
+ "content-layout"
+ ],
+ "tags": [
+ "hero",
+ "banner",
+ "cta",
+ "landing"
+ ],
+ "components": [
+ "hero-banner",
+ "button"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "hero-banner-with-actions"
+ },
+ {
+ "type": "example",
+ "id": "hide-and-show-many-sections-of-information",
+ "title": "Hide and show many sections of information",
+ "description": "Allow users to expand and collapse multiple accordion sections, with a button to show or hide all sections at once.",
+ "status": "published",
+ "categories": [
+ "content-layout"
+ ],
+ "tags": [
+ "accordion",
+ "expand",
+ "collapse",
+ "faq"
+ ],
+ "components": [
+ "accordion",
+ "button"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "hide-and-show-many-sections-of-information"
+ },
+ {
+ "type": "example",
+ "id": "include-a-link-in-the-helper-text-of-an-option",
+ "title": "Include a link in the helper text of an option",
+ "description": "Add links within the description text of checkbox options to provide additional context or resources while users are making selections.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "checkbox",
+ "helper-text",
+ "links",
+ "forms"
+ ],
+ "components": [
+ "checkbox",
+ "form-item"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "include-a-link-in-the-helper-text-of-an-option"
+ },
+ {
+ "type": "example",
+ "id": "include-descriptions-for-items-in-a-checkbox-list",
+ "title": "Include descriptions for items in a checkbox list",
+ "description": "Add descriptive text to radio button options to help users understand the implications of each choice.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "radio",
+ "descriptions",
+ "forms"
+ ],
+ "components": [
+ "form-item",
+ "radio-group",
+ "radio-item"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "include-descriptions-for-items-in-a-checkbox-list"
+ },
+ {
+ "type": "example",
+ "id": "link-the-user-to-give-feedback-to-the-service",
+ "title": "Link the user to give feedback to the service",
+ "description": "Use the microsite header's feedback functionality to collect user feedback during alpha or beta phases of a service.",
+ "status": "published",
+ "categories": [
+ "feedback-and-alerts"
+ ],
+ "tags": [
+ "feedback",
+ "microsite-header",
+ "alpha",
+ "beta"
+ ],
+ "components": [
+ "microsite-header"
+ ],
+ "scale": "interaction",
+ "userType": "citizen",
+ "slug": "link-the-user-to-give-feedback-to-the-service"
+ },
+ {
+ "type": "example",
+ "id": "link-to-an-external-page",
+ "title": "Link to an external page",
+ "description": "Use an external link indicator to show users when a link will take them to a different website.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "link",
+ "external",
+ "navigation"
+ ],
+ "components": [
+ "link"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "link-to-an-external-page"
+ },
+ {
+ "type": "example",
+ "id": "public-form",
+ "title": "Public form",
+ "description": "The public form pattern provides a structure for citizen-facing form experiences, emphasizing simplicity, accessibility, and low cognitive load.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "form",
+ "public",
+ "citizen",
+ "pattern"
+ ],
+ "components": [],
+ "scale": "service",
+ "userType": "citizen",
+ "slug": "public-form"
+ },
+ {
+ "type": "example",
+ "id": "question-page",
+ "title": "Question page",
+ "description": "A question page pattern that presents one question at a time to help users focus, reduce cognitive load, and navigate complex forms more easily.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "forms",
+ "question",
+ "wizard",
+ "one-thing-per-page"
+ ],
+ "components": [
+ "form-item",
+ "input",
+ "button",
+ "button-group"
+ ],
+ "scale": "page",
+ "userType": "citizen",
+ "slug": "question-page"
+ },
+ {
+ "type": "example",
+ "id": "remove-a-filter",
+ "title": "Remove a filter",
+ "description": "Allow users to remove active filters by clicking on filter chips, providing clear visual feedback and dynamic updates to filtered results.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "filtering",
+ "chips",
+ "remove"
+ ],
+ "components": [
+ "filter-chip"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "remove-a-filter"
+ },
+ {
+ "type": "example",
+ "id": "require-user-action-before-continuing",
+ "title": "Require user action before continuing",
+ "description": "Use a modal dialog to require users to confirm an action before proceeding, especially for irreversible operations or important decision points.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "modal",
+ "confirmation",
+ "warning",
+ "action"
+ ],
+ "components": [
+ "modal",
+ "button",
+ "button-group"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "require-user-action-before-continuing"
+ },
+ {
+ "type": "example",
+ "id": "reset-date-picker-field",
+ "title": "Reset date picker field",
+ "description": "Allow users to programmatically set or clear a date picker field value, useful for reset functionality or setting default dates.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "date-picker",
+ "form",
+ "reset",
+ "clear"
+ ],
+ "components": [
+ "date-picker",
+ "form-item",
+ "button",
+ "button-group"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "reset-date-picker-field"
+ },
+ {
+ "type": "example",
+ "id": "result-page",
+ "title": "Result page",
+ "description": "A result page shown after form submission to confirm success, provide next steps, and offer relevant contact information.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "confirmation",
+ "success",
+ "completion",
+ "forms"
+ ],
+ "components": [
+ "block",
+ "callout"
+ ],
+ "scale": "page",
+ "userType": "citizen",
+ "slug": "result-page"
+ },
+ {
+ "type": "example",
+ "id": "reveal-input-based-on-a-selection",
+ "title": "Reveal input based on a selection",
+ "description": "Progressively reveal additional form fields based on user selections, reducing visual complexity while gathering necessary information.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "conditional",
+ "reveal",
+ "radio",
+ "checkbox",
+ "progressive-disclosure"
+ ],
+ "components": [
+ "radio-group",
+ "radio-item",
+ "checkbox",
+ "form-item",
+ "input"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "reveal-input-based-on-a-selection"
+ },
+ {
+ "type": "example",
+ "id": "review-and-action",
+ "title": "Review and action",
+ "description": "A side-by-side layout for workers to review case details while taking an action, commonly used in case management and approval workflows.",
+ "status": "published",
+ "categories": [
+ "structure-and-navigation"
+ ],
+ "tags": [
+ "review",
+ "action",
+ "container",
+ "case-management",
+ "worker"
+ ],
+ "components": [
+ "container",
+ "grid",
+ "block",
+ "form-item",
+ "radio-group",
+ "dropdown",
+ "text-area",
+ "button"
+ ],
+ "scale": "task",
+ "userType": "worker",
+ "slug": "review-and-action"
+ },
+ {
+ "type": "example",
+ "id": "review-page",
+ "title": "Review page",
+ "description": "A review page where users can check their answers before submitting a form, with options to change individual responses.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "review",
+ "check-answers",
+ "forms",
+ "submission"
+ ],
+ "components": [
+ "table",
+ "button",
+ "button-group"
+ ],
+ "scale": "page",
+ "userType": "citizen",
+ "slug": "review-page"
+ },
+ {
+ "type": "example",
+ "id": "search",
+ "title": "Search",
+ "description": "A search input pattern with a search icon and button for users to find content or filter results.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "search",
+ "input",
+ "filtering"
+ ],
+ "components": [
+ "input",
+ "button",
+ "block",
+ "form-item"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "search"
+ },
+ {
+ "type": "example",
+ "id": "select-one-or-more-from-a-list-of-options",
+ "title": "Select one or more from a list of options",
+ "description": "Use checkboxes to let users select one or more options from a list when multiple selections are valid.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "checkbox",
+ "selection",
+ "multiple",
+ "form"
+ ],
+ "components": [
+ "checkbox",
+ "form-item"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "select-one-or-more-from-a-list-of-options"
+ },
+ {
+ "type": "example",
+ "id": "set-a-max-width-on-a-long-radio-item",
+ "title": "Set a max width on a long radio item",
+ "description": "Set a max width on a long radio item to control line wrapping.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "radio",
+ "forms",
+ "layout"
+ ],
+ "components": [
+ "form-item",
+ "radio-group",
+ "radio-item"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "set-a-max-width-on-a-long-radio-item"
+ },
+ {
+ "type": "example",
+ "id": "set-a-specific-tab-to-be-active",
+ "title": "Set a specific tab to be active",
+ "description": "Set a specific tab to be active on page load using the initialTab property.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "tabs",
+ "navigation",
+ "tables"
+ ],
+ "components": [
+ "tabs",
+ "tab",
+ "table",
+ "badge",
+ "button"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "set-a-specific-tab-to-be-active"
+ },
+ {
+ "type": "example",
+ "id": "set-the-status-of-step-on-a-form-stepper",
+ "title": "Set the status of step on a form stepper",
+ "description": "Set the status of each step on a form stepper to indicate completion progress.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "forms",
+ "stepper",
+ "multi-step",
+ "navigation"
+ ],
+ "components": [
+ "form-stepper",
+ "form-step",
+ "pages",
+ "button"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "set-the-status-of-step-on-a-form-stepper"
+ },
+ {
+ "type": "example",
+ "id": "show-a-label-on-an-icon-only-button",
+ "title": "Show a label on an icon only button",
+ "description": "Show a label on an icon-only button using a tooltip to improve discoverability.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "buttons",
+ "icons",
+ "accessibility",
+ "tooltip"
+ ],
+ "components": [
+ "icon-button",
+ "tooltip",
+ "button-group"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "show-a-label-on-an-icon-only-button"
+ },
+ {
+ "type": "example",
+ "id": "show-a-list-to-help-answer-a-question",
+ "title": "Show a list to help answer a question",
+ "description": "Show a list to help answer a question using an expandable details component.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "forms",
+ "details",
+ "guidance",
+ "help"
+ ],
+ "components": [
+ "form-item",
+ "radio-group",
+ "radio-item",
+ "details",
+ "block"
+ ],
+ "scale": "task",
+ "userType": "citizen",
+ "slug": "show-a-list-to-help-answer-a-question"
+ },
+ {
+ "type": "example",
+ "id": "show-a-notification",
+ "title": "Show a notification",
+ "description": "Show a temporary notification to confirm an action was completed successfully.",
+ "status": "published",
+ "categories": [
+ "feedback-and-alerts"
+ ],
+ "tags": [
+ "notification",
+ "feedback",
+ "success",
+ "toast"
+ ],
+ "components": [
+ "temporary-notification",
+ "button"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "show-a-notification"
+ },
+ {
+ "type": "example",
+ "id": "show-a-notification-with-an-action",
+ "title": "Show a notification with an action",
+ "description": "Show a temporary notification with an action button for user interaction.",
+ "status": "published",
+ "categories": [
+ "feedback-and-alerts"
+ ],
+ "tags": [
+ "notification",
+ "feedback",
+ "action",
+ "toast"
+ ],
+ "components": [
+ "temporary-notification",
+ "button"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "show-a-notification-with-an-action"
+ },
+ {
+ "type": "example",
+ "id": "show-a-section-title-on-a-question-page",
+ "title": "Show a section title on a question page",
+ "description": "Show a section title on a question page to help users understand which part of the form they are completing.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "forms",
+ "questions",
+ "navigation",
+ "section"
+ ],
+ "components": [
+ "form-item",
+ "radio-group",
+ "radio-item",
+ "button"
+ ],
+ "scale": "task",
+ "userType": "citizen",
+ "slug": "show-a-section-title-on-a-question-page"
+ },
+ {
+ "type": "example",
+ "id": "show-a-simple-progress-indicator-on-a-question-page",
+ "title": "Show a simple progress indicator on a question page",
+ "description": "Show a simple progress indicator on a question page to help users understand their progress through the form.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "forms",
+ "questions",
+ "progress",
+ "navigation"
+ ],
+ "components": [
+ "form-item",
+ "radio-group",
+ "radio-item",
+ "button"
+ ],
+ "scale": "task",
+ "userType": "citizen",
+ "slug": "show-a-simple-progress-indicator-on-a-question-page"
+ },
+ {
+ "type": "example",
+ "id": "show-a-simple-progress-indicator-on-a-question-page-with-multiple-questions",
+ "title": "Show a simple progress indicator on a question page with multiple questions",
+ "description": "Show a simple progress indicator on a question page when grouping multiple related questions together.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "forms",
+ "questions",
+ "progress",
+ "navigation",
+ "multi-question"
+ ],
+ "components": [
+ "form-item",
+ "input",
+ "button"
+ ],
+ "scale": "task",
+ "userType": "citizen",
+ "slug": "show-a-simple-progress-indicator-on-a-question-page-with-multiple-questions"
+ },
+ {
+ "type": "example",
+ "id": "show-a-user-progress",
+ "title": "Show a user progress",
+ "description": "Display progress feedback during long-running operations like downloads, showing percentage completion with the ability to cancel and receive success confirmation.",
+ "status": "published",
+ "categories": [
+ "feedback-and-alerts"
+ ],
+ "tags": [
+ "progress",
+ "notification",
+ "download",
+ "feedback"
+ ],
+ "components": [
+ "temporary-notification",
+ "button"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "show-a-user-progress"
+ },
+ {
+ "type": "example",
+ "id": "show-a-user-progress-when-the-time-is-unknown",
+ "title": "Show a user progress when the time is unknown",
+ "description": "Display indeterminate progress for operations where completion time cannot be estimated, such as complex searches or external system queries.",
+ "status": "published",
+ "categories": [
+ "feedback-and-alerts"
+ ],
+ "tags": [
+ "progress",
+ "notification",
+ "indeterminate",
+ "search",
+ "feedback"
+ ],
+ "components": [
+ "temporary-notification",
+ "button"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "show-a-user-progress-when-the-time-is-unknown"
+ },
+ {
+ "type": "example",
+ "id": "show-different-views-of-data-in-a-table",
+ "title": "Show different views of data in a table",
+ "description": "Use tabs to organize table data into different views based on status or category, showing counts in each tab to help workers quickly navigate to relevant items.",
+ "status": "published",
+ "categories": [
+ "content-layout"
+ ],
+ "tags": [
+ "table",
+ "tabs",
+ "filtering",
+ "status",
+ "data-views"
+ ],
+ "components": [
+ "tabs",
+ "tab",
+ "table",
+ "badge",
+ "button"
+ ],
+ "scale": "task",
+ "userType": "worker",
+ "slug": "show-different-views-of-data-in-a-table"
+ },
+ {
+ "type": "example",
+ "id": "show-full-date-in-a-tooltip",
+ "title": "Show full date in a tooltip",
+ "description": "Display relative time (like \"4 hours ago\") while providing the full date and time on hover via tooltip for users who need exact timestamps.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
"tags": [
+ "tooltip",
+ "date",
+ "relative-time",
+ "hover"
+ ],
+ "components": [
+ "tooltip",
+ "container"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "show-full-date-in-a-tooltip"
+ },
+ {
+ "type": "example",
+ "id": "show-links-to-navigation-items",
+ "title": "Show links to navigation items",
+ "description": "Use the app footer to display comprehensive navigation links organized into sections, along with meta links for common utilities like privacy and accessibility.",
+ "status": "published",
+ "categories": [
+ "structure-and-navigation"
+ ],
+ "tags": [
+ "footer",
+ "navigation",
+ "links",
+ "sitemap"
+ ],
+ "components": [
+ "footer",
+ "footer-nav-section",
+ "footer-meta-section"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "show-links-to-navigation-items"
+ },
+ {
+ "type": "example",
+ "id": "show-more-information-to-help-answer-a-question",
+ "title": "Show more information to help answer a question",
+ "description": "Use the Details component to provide optional contextual help that explains why a question is being asked, helping users understand the purpose without cluttering the main form.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "form",
+ "details",
+ "help",
+ "question-page",
+ "expandable"
+ ],
+ "components": [
"details",
- "tabs"
- ]
+ "form-item",
+ "radio-group",
+ "radio-item",
+ "button"
+ ],
+ "scale": "task",
+ "userType": "citizen",
+ "slug": "show-more-information-to-help-answer-a-question"
+ },
+ {
+ "type": "example",
+ "id": "show-multiple-actions-in-a-compact-table",
+ "title": "Show multiple actions in a compact table",
+ "description": "Use icon buttons to provide multiple row actions in tables where space is limited, keeping the interface compact while maintaining accessibility through aria labels.",
+ "status": "published",
+ "categories": [
+ "content-layout"
+ ],
+ "tags": [
+ "table",
+ "icon-button",
+ "actions",
+ "compact",
+ "worker-ui"
+ ],
+ "components": [
+ "table",
+ "icon-button",
+ "badge",
+ "block"
+ ],
+ "scale": "task",
+ "userType": "worker",
+ "slug": "show-multiple-actions-in-a-compact-table"
+ },
+ {
+ "type": "example",
+ "id": "show-multiple-tags-together",
+ "title": "Show multiple tags together",
+ "description": "Display multiple badges together using GoabBlock with tight spacing to show multiple statuses or categories for a single item.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "badge",
+ "tags",
+ "status",
+ "grouping"
+ ],
+ "components": [
+ "badge",
+ "block"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "show-multiple-tags-together"
+ },
+ {
+ "type": "example",
+ "id": "show-number-of-results-per-page",
+ "title": "Show number of results per page",
+ "description": "Combine pagination with a dropdown selector to let users control how many results appear per page, improving data browsing for different use cases.",
+ "status": "published",
+ "categories": [
+ "content-layout"
+ ],
+ "tags": [
+ "pagination",
+ "table",
+ "dropdown",
+ "results",
+ "per-page"
+ ],
+ "components": [
+ "pagination",
+ "dropdown",
+ "dropdown-item",
+ "table",
+ "block",
+ "spacer"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "show-number-of-results-per-page"
+ },
+ {
+ "type": "example",
+ "id": "show-quick-links",
+ "title": "Show quick links",
+ "description": "Use the app footer meta section to display essential quick links like feedback, accessibility, privacy, and contact information without the full navigation structure.",
+ "status": "published",
+ "categories": [
+ "structure-and-navigation"
+ ],
+ "tags": [
+ "footer",
+ "navigation",
+ "meta-links",
+ "quick-access"
+ ],
+ "components": [
+ "footer",
+ "footer-meta-section"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "show-quick-links"
+ },
+ {
+ "type": "example",
+ "id": "show-status-in-a-table",
+ "title": "Show status in a table",
+ "description": "Display status information within table rows using badges to provide clear visual indicators of item states like pending, complete, failed, or in progress.",
+ "status": "published",
+ "categories": [
+ "content-layout"
+ ],
+ "tags": [
+ "table",
+ "badge",
+ "status"
+ ],
+ "components": [
+ "table",
+ "badge",
+ "button"
+ ],
+ "scale": "task",
+ "userType": "worker",
+ "slug": "show-status-in-a-table"
+ },
+ {
+ "type": "example",
+ "id": "show-status-on-a-card",
+ "title": "Show status on a card",
+ "description": "Display status indicators on cards using badges in the actions slot, allowing workers to quickly see the priority or state of each item.",
+ "status": "published",
+ "categories": [
+ "content-layout"
+ ],
+ "tags": [
+ "card",
+ "container",
+ "badge",
+ "status"
+ ],
+ "components": [
+ "container",
+ "badge"
+ ],
+ "scale": "task",
+ "userType": "worker",
+ "slug": "show-status-on-a-card"
+ },
+ {
+ "type": "example",
+ "id": "show-version-number",
+ "title": "Show version number",
+ "description": "Display version information in the microsite header using the version slot, allowing custom formatting and styling of version text.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "microsite-header",
+ "version",
+ "alpha",
+ "beta"
+ ],
+ "components": [
+ "microsite-header"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "show-version-number"
+ },
+ {
+ "type": "example",
+ "id": "slotted-error-text-in-a-form-item",
+ "title": "Slotted error text in a form item",
+ "description": "Use the error slot in a form item to display formatted error messages with custom styling like bold or italic text.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "form",
+ "form-item",
+ "error",
+ "validation",
+ "slot"
+ ],
+ "components": [
+ "form-item",
+ "input"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "slotted-error-text-in-a-form-item"
+ },
+ {
+ "type": "example",
+ "id": "slotted-helper-text-in-a-form-item",
+ "title": "Slotted helper text in a form item",
+ "description": "Use the helpText slot in a form item to display formatted helper text with custom styling like bold, italic, or links.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "form",
+ "form-item",
+ "helper-text",
+ "slot"
+ ],
+ "components": [
+ "form-item",
+ "input"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "slotted-helper-text-in-a-form-item"
+ },
+ {
+ "type": "example",
+ "id": "sort-data-in-a-table",
+ "title": "Sort data in a table",
+ "description": "Enable column sorting in tables using sort headers, allowing workers to organize data by clicking column headers to toggle ascending/descending order.",
+ "status": "published",
+ "categories": [
+ "content-layout"
+ ],
+ "tags": [
+ "table",
+ "sorting",
+ "data"
+ ],
+ "components": [
+ "table",
+ "table-sort-header"
+ ],
+ "scale": "task",
+ "userType": "worker",
+ "slug": "sort-data-in-a-table"
+ },
+ {
+ "type": "example",
+ "id": "start-page",
+ "title": "Start page",
+ "description": "A start page is the front door to a government service for citizens. It provides essential information about the service and a clear call to action to begin.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "page",
+ "service",
+ "start",
+ "citizen"
+ ],
+ "components": [
+ "button"
+ ],
+ "scale": "page",
+ "userType": "citizen",
+ "slug": "start-page"
+ },
+ {
+ "type": "example",
+ "id": "task-list-page",
+ "title": "Task list page",
+ "description": "A task list page provides a structure for multi-step services, showing users their progress through a series of tasks with clear status indicators.",
+ "status": "published",
+ "categories": [
+ "forms"
+ ],
+ "tags": [
+ "page",
+ "task-list",
+ "progress",
+ "form"
+ ],
+ "components": [
+ "table",
+ "badge",
+ "callout"
+ ],
+ "scale": "page",
+ "userType": "both",
+ "slug": "task-list-page"
+ },
+ {
+ "type": "example",
+ "id": "type-to-create-a-new-filter",
+ "title": "Type to create a new filter",
+ "description": "Allow users to type custom filter values and create filter chips by pressing Enter, with the ability to remove chips using Backspace or by clicking them.",
+ "status": "published",
+ "categories": [
+ "inputs-and-actions"
+ ],
+ "tags": [
+ "filter-chip",
+ "input",
+ "dynamic",
+ "keyboard"
+ ],
+ "components": [
+ "filter-chip",
+ "input",
+ "form-item",
+ "container"
+ ],
+ "scale": "interaction",
+ "userType": "both",
+ "slug": "type-to-create-a-new-filter"
+ },
+ {
+ "type": "example",
+ "id": "warn-a-user-of-a-deadline",
+ "title": "Warn a user of a deadline",
+ "description": "Use a modal with important callout styling to warn users about time-sensitive deadlines that could affect their submission or action.",
+ "status": "published",
+ "categories": [
+ "feedback-and-alerts"
+ ],
+ "tags": [
+ "modal",
+ "warning",
+ "deadline",
+ "callout"
+ ],
+ "components": [
+ "modal",
+ "button",
+ "button-group"
+ ],
+ "scale": "task",
+ "userType": "both",
+ "slug": "warn-a-user-of-a-deadline"
}
]
\ No newline at end of file
diff --git a/docs/public/site.webmanifest b/docs/public/site.webmanifest
new file mode 100644
index 0000000000..f10039edc4
--- /dev/null
+++ b/docs/public/site.webmanifest
@@ -0,0 +1,22 @@
+{
+ "name": "GoA Design System",
+ "short_name": "GoA Design System",
+ "icons": [
+ {
+ "src": "/icon-192.png",
+ "sizes": "192x192",
+ "type": "image/png",
+ "purpose": "any maskable"
+ },
+ {
+ "src": "/icon-512.png",
+ "sizes": "512x512",
+ "type": "image/png",
+ "purpose": "any maskable"
+ }
+ ],
+ "theme_color": "#333333",
+ "background_color": "#ffffff",
+ "display": "standalone",
+ "start_url": "/"
+}
diff --git a/docs/public/thumbnails/workspace-card-view.png b/docs/public/thumbnails/workspace-card-view.png
new file mode 100644
index 0000000000..d93ac713ab
Binary files /dev/null and b/docs/public/thumbnails/workspace-card-view.png differ
diff --git a/docs/public/thumbnails/workspace-case-detail.png b/docs/public/thumbnails/workspace-case-detail.png
new file mode 100644
index 0000000000..00e3cdd8c8
Binary files /dev/null and b/docs/public/thumbnails/workspace-case-detail.png differ
diff --git a/docs/public/thumbnails/workspace-dashboard.png b/docs/public/thumbnails/workspace-dashboard.png
new file mode 100644
index 0000000000..e2c8d2bec1
Binary files /dev/null and b/docs/public/thumbnails/workspace-dashboard.png differ
diff --git a/docs/public/thumbnails/workspace-data-grid.png b/docs/public/thumbnails/workspace-data-grid.png
new file mode 100644
index 0000000000..3fda814d3f
Binary files /dev/null and b/docs/public/thumbnails/workspace-data-grid.png differ
diff --git a/docs/public/thumbnails/workspace-list-view.png b/docs/public/thumbnails/workspace-list-view.png
new file mode 100644
index 0000000000..8b16cda30b
Binary files /dev/null and b/docs/public/thumbnails/workspace-list-view.png differ
diff --git a/docs/public/thumbnails/workspace-preview.png b/docs/public/thumbnails/workspace-preview.png
new file mode 100644
index 0000000000..e2c8d2bec1
Binary files /dev/null and b/docs/public/thumbnails/workspace-preview.png differ
diff --git a/docs/public/thumbnails/workspace-push-drawer.png b/docs/public/thumbnails/workspace-push-drawer.png
new file mode 100644
index 0000000000..5c68b428b5
Binary files /dev/null and b/docs/public/thumbnails/workspace-push-drawer.png differ
diff --git a/docs/public/thumbnails/workspace-sidebar-contextual.png b/docs/public/thumbnails/workspace-sidebar-contextual.png
new file mode 100644
index 0000000000..e1ae795c1e
Binary files /dev/null and b/docs/public/thumbnails/workspace-sidebar-contextual.png differ
diff --git a/docs/public/thumbnails/workspace-sidebar-main.png b/docs/public/thumbnails/workspace-sidebar-main.png
new file mode 100644
index 0000000000..fce51ae420
Binary files /dev/null and b/docs/public/thumbnails/workspace-sidebar-main.png differ
diff --git a/docs/public/thumbnails/workspace-sticky-action-bar.png b/docs/public/thumbnails/workspace-sticky-action-bar.png
new file mode 100644
index 0000000000..6e9e528067
Binary files /dev/null and b/docs/public/thumbnails/workspace-sticky-action-bar.png differ
diff --git a/docs/public/thumbnails/workspace-table-view.png b/docs/public/thumbnails/workspace-table-view.png
new file mode 100644
index 0000000000..6e9e528067
Binary files /dev/null and b/docs/public/thumbnails/workspace-table-view.png differ
diff --git a/docs/search-index.json b/docs/search-index.json
deleted file mode 100644
index aab298aa2c..0000000000
--- a/docs/search-index.json
+++ /dev/null
@@ -1,29 +0,0 @@
-[
- {
- "id": "badge",
- "title": "Badge",
- "description": " Small labels which hold small amounts of information, system feedback, or states. ",
- "content": "# Badge\n\nSmall labels which hold small amounts of information, system feedback, or states.\n",
- "component": "badge",
- "filePath": "docs/src/pages/components/badge/badge.mdx",
- "urlPath": "components/badge",
- "tags": [
- "filter chip",
- "icons",
- "table"
- ]
- },
- {
- "id": "accordion",
- "title": "Accordion",
- "description": "Some additional description for the component",
- "content": "# Accordion\nAccordion containers enable multiple content sections to be displayed in a limited space and collapsed or expanded by the user. You can create hierarchy of information by hiding secondary content inside collapsed expand containers.\n\n## Examples\n\n\n
\n
Name
\n
Joan Smith
\n
Contact preference
\n
Text message
\n
\n\n\n### Close all\n\nconst AccordionCloseAllExample => () {\n const [expandedAll, setExpandedAll] = useState(false);\n const [expandedList, setExpandedList] = useState([]);\n useEffect(() => {\n setExpandedAll(expandedList.length === 4);\n }, [expandedList.length]);\n\n const expandOrCollapseAll = () => {\n setExpandedAll((prev) => {\n const newState = !prev;\n setExpandedList(newState ? [1, 2, 3, 4] : []);\n return newState;\n });\n };\n\n const updateAccordion = (order: number, isOpen: boolean) => {\n setExpandedList((prev) => {\n if (isOpen) {\n return prev.includes(order) ? prev: [...prev, order];\n }\n return prev.filter((item) => item !== order);\n });\n\n return (\n expandOrCollapseAll()}>\n {expandedAll ? \"Hide all sections\" : \"Show all sections\"}\n \n\n updateAccordion(1, open)}>\n To create an account you will need to contact your office admin.\n \n\n updateAccordion(2, open)}>\n You will need to verify your identity through our two factor authentication in addition to the digital signature.\n \n\n updateAccordion(3, open)}>\n Yes, you can see the status of your application on the main service dashboard when you login. You will receive updates and notifications in your email as your request progresses.\n \n\n updateAccordion(4, open)}>\n Yes, our digital service is designed with accessibility in mind. More information on accessibility.\n \n )\n}\n\n\n",
- "component": "accordion",
- "filePath": "docs/src/pages/components/accordion/accordion.mdx",
- "urlPath": "components/accordion",
- "tags": [
- "details",
- "tabs"
- ]
- }
-]
\ No newline at end of file
diff --git a/docs/src/components/CardLite.astro b/docs/src/components/CardLite.astro
index 3c9d82a701..7f9f718854 100644
--- a/docs/src/components/CardLite.astro
+++ b/docs/src/components/CardLite.astro
@@ -8,24 +8,37 @@
interface Props {
title: string;
description: string;
- imageUrl: string;
- linkTo: string;
+ imageUrl?: string;
+ linkTo?: string;
}
const { title, description, imageUrl, linkTo } = Astro.props;
+const isExternal = linkTo?.startsWith("http");
+const isDisabled = !linkTo;
---
-
-