GovAlta · ArakTaiRoth · Aug 25, 2026 · Aug 25, 2026 · Aug 27, 2026 · Aug 31, 2026
diff --git a/README.md b/README.md
@@ -17,7 +17,6 @@ This repository contains the Government of Alberta Design System component libra
 | `@abgov/react-components` | You are building a React application. | [npm](https://www.npmjs.com/package/@abgov/react-components) |
 | `@abgov/angular-components` | You are building an Angular application. | [npm](https://www.npmjs.com/package/@abgov/angular-components) |
 | `@abgov/ui-components-common` | You need shared types, event detail interfaces, or common utilities used by the component packages. | [npm](https://www.npmjs.com/package/@abgov/ui-components-common) |
-| `@abgov/design-tokens` | You need the design tokens used by the components. | [npm](https://www.npmjs.com/package/@abgov/design-tokens) |
 
 `@abgov/styles` is deprecated. Import `@abgov/web-components/index.css` instead.
 
@@ -28,7 +27,7 @@ This repository contains the Government of Alberta Design System component libra
 Install the packages:
 
 ```bash
-npm i @abgov/web-components @abgov/design-tokens
+npm i @abgov/web-components
 ```
 
 Register the custom elements in your app entry point, for example `src/main.js`:
@@ -37,11 +36,10 @@ Register the custom elements in your app entry point, for example `src/main.js`:
 import "@abgov/web-components";
 ```
 
-Import the component styles and tokens in your main stylesheet:
+Import the component styles in your main stylesheet. This stylesheet includes the design tokens and dark theme overrides:
 
 ```css
 @import "@abgov/web-components/index.css";
-@import "@abgov/design-tokens/dist/tokens.css";
 ```
 
 Add Ionicons to your `index.html` `<head>`:
@@ -64,7 +62,7 @@ Supported React versions: `17`, `18`, `19`.
 Install the packages:
 
 ```bash
-npm i @abgov/react-components @abgov/web-components @abgov/ui-components-common @abgov/design-tokens
+npm i @abgov/react-components @abgov/web-components @abgov/ui-components-common
 ```
 
 Register the underlying web components in your app entry point, for example `src/main.tsx`:
@@ -73,11 +71,10 @@ Register the underlying web components in your app entry point, for example `src
 import "@abgov/web-components";
 ```
 
-Import the styles in your main stylesheet:
+Import the component styles in your main stylesheet. This stylesheet includes the design tokens and dark theme overrides:
 
 ```css
 @import "@abgov/web-components/index.css";
-@import "@abgov/design-tokens/dist/tokens.css";
 ```
 
 Add Ionicons to your `index.html` `<head>`:
@@ -104,7 +101,7 @@ Supported Angular versions in the current docs: `18`, `19`, `20`, `21`.
 Install the packages:
 
 ```bash
-npm i @abgov/web-components @abgov/angular-components @abgov/ui-components-common @abgov/design-tokens
+npm i @abgov/web-components @abgov/angular-components @abgov/ui-components-common
 ```
 
 Add Ionicons to `src/index.html`:
@@ -135,11 +132,10 @@ export class AppModule {}
 
 If your Angular app uses standalone bootstrapping instead of `AppModule`, use the same package installs, web component import, styles, and Ionicons setup, then adapt the module example to your bootstrap configuration.
 
-Import the styles in `src/styles.css`:
+Import the component styles in `src/styles.css`. This stylesheet includes the design tokens and dark theme overrides:
 
 ```css
 @import "@abgov/web-components/index.css";
-@import "@abgov/design-tokens/dist/tokens.css";
 ```
 
 ## Local development

diff --git a/apps/prs/angular/project.json b/apps/prs/angular/project.json
@@ -25,17 +25,9 @@
         "tsConfig": "apps/prs/angular/tsconfig.app.json",
         "assets": [
           "apps/prs/angular/src/favicon.ico",
-          "apps/prs/angular/src/assets",
-          {
-            "glob": "**/*",
-            "input": "node_modules/@abgov/design-tokens-v2/dist",
-            "output": "/v2-tokens"
-          }
-        ],
-        "styles": [
-          "apps/prs/angular/src/styles.css",
-          "node_modules/@abgov/design-tokens-v2/dist/tokens.css"
+          "apps/prs/angular/src/assets"
         ],
+        "styles": ["apps/prs/angular/src/styles.css"],
         "scripts": []
       },
       "configurations": {

diff --git a/apps/prs/angular/src/app/app.component.html b/apps/prs/angular/src/app/app.component.html
@@ -8,16 +8,11 @@
       userSecondaryText="edna.mode@gov.ab.ca"
       (onNavigate)="handleNavigate($event)"
       [primaryContent]="primaryTemplate"
-      [secondaryContent]="tokenToggleTemplate"
+      [secondaryContent]="secondaryTemplate"
       [accountContent]="accountTemplate"
     />
   </ng-template>
-  <ng-template #tokenToggleTemplate>
-    <goab-work-side-menu-item
-      [label]="'Switch to ' + (tokenMode === 'v1' ? 'V2' : 'V1') + ' tokens'"
-      icon="swap-horizontal"
-      [url]="tokenToggleUrl"
-    />
+  <ng-template #secondaryTemplate>
     <goab-work-side-menu-item
       [icon]="theme.mode() === 'dark' ? 'sunny' : 'moon'"
       [label]="theme.mode() === 'dark' ? 'Light mode' : 'Dark mode'"

diff --git a/apps/prs/angular/src/app/app.component.ts b/apps/prs/angular/src/app/app.component.ts
@@ -23,14 +23,6 @@ import {
   docsRouteDefinitions,
   featureRouteDefinitions,
 } from "./generated/pr-route-manifest.generated";
-import {
-  applyTokenVersion,
-  resolveTokenVersion,
-  TokenVersion,
-} from "./token-version/token-version";
-
-// Sentinel URL handled by handleNavigate to toggle tokens instead of routing.
-const TOKEN_TOGGLE_URL = "#tokens";
 
 interface NotificationData {
   id: string;
@@ -71,8 +63,6 @@ export class AppComponent {
   readonly featureRouteDefinitions = featureRouteDefinitions;
   readonly docsRouteDefinitions = docsRouteDefinitions;
   readonly baseHref = inject(LocationStrategy).getBaseHref();
-  readonly tokenToggleUrl = TOKEN_TOGGLE_URL;
-  tokenMode: TokenVersion = resolveTokenVersion();
   readonly pushDrawerParagraphs = Array.from({ length: 30 }, (_, i) => i + 1);
 
   // Sample notifications for the work-side-menu notification panel (#4110 test).
@@ -168,11 +158,6 @@ export class AppComponent {
   }
 
   handleNavigate(path: string): void {
-    if (path === TOKEN_TOGGLE_URL) {
-      this.tokenMode = this.tokenMode === "v1" ? "v2" : "v1";
-      applyTokenVersion(this.tokenMode);
-      return;
-    }
     if (path === "#toggle-theme") {
       this.theme.toggle();
       return;

diff --git a/apps/prs/angular/src/app/token-version/token-version.ts b/apps/prs/angular/src/app/token-version/token-version.ts
diff --git a/apps/prs/angular/src/main.ts b/apps/prs/angular/src/main.ts
@@ -1,19 +1,6 @@
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 import { AppModule } from "./app/app.module";
-// This import has a side effect: token-version.ts calls applyTokenVersion at
-// module load, which puts the V2 stylesheet link in <head> before Angular
-// bootstraps. Without this, the page would flash V1 on first paint.
-import {
-  applyTokenVersion,
-  resolveTokenVersion,
-} from "./app/token-version/token-version";
 
 platformBrowserDynamic()
   .bootstrapModule(AppModule)
-  .then(() => {
-    // Re-apply after Angular's bundled styles.css is in <head>, so the V2
-    // link lands last in the cascade. Without this, the bundled V1 @import
-    // overrides V2 and the toggle appears to do nothing.
-    applyTokenVersion(resolveTokenVersion());
-  })
   .catch((err) => console.error(err));
diff --git a/apps/prs/angular/src/routes/docs/checkbox-list/checkbox-list.component.html b/apps/prs/angular/src/routes/docs/checkbox-list/checkbox-list.component.html
@@ -93,3 +93,25 @@ <h3>States</h3>
     <goab-checkbox name="e3" text="Option 3"></goab-checkbox>
   </goab-checkbox-list>
 </goab-form-item>
+
+<h3>Select all</h3>
+<goab-form-item label="Select notification methods" mb="l">
+  <goab-checkbox
+    name="selectAllNotifications"
+    text="Select all"
+    [checked]="allOptionsSelected"
+    [indeterminate]="someOptionsSelected"
+    (onChange)="selectAllOnChange($event)"
+    mb="m">
+  </goab-checkbox>
+  <goab-checkbox-list
+    name="notifications"
+    [value]="selectAllValues"
+    ml="l"
+    (onChange)="selectAllListOnChange($event)">
+    <goab-checkbox name="email" text="Email"></goab-checkbox>
+    <goab-checkbox name="text" text="Text message"></goab-checkbox>
+    <goab-checkbox name="push" text="Push notification"></goab-checkbox>
+  </goab-checkbox-list>
+</goab-form-item>
+<p>Value: {{ selectAllValues | json }}</p>
diff --git a/apps/prs/angular/src/routes/docs/checkbox-list/checkbox-list.component.ts b/apps/prs/angular/src/routes/docs/checkbox-list/checkbox-list.component.ts
@@ -4,7 +4,10 @@ import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from "@angul
 import {
   GoabCheckbox, GoabCheckboxList, GoabFormItem, GoabTextArea,
 } from "@abgov/angular-components";
-import type { GoabCheckboxListOnChangeDetail } from "@abgov/ui-components-common";
+import type {
+  GoabCheckboxListOnChangeDetail,
+  GoabCheckboxOnChangeDetail,
+} from "@abgov/ui-components-common";
 
 @Component({
   standalone: true,
@@ -21,8 +24,26 @@ export class DocsCheckboxListComponent {
   });
 
   ngModelInterests: string[] = [];
+  readonly selectAllOptions = ["email", "text", "push"];
+  selectAllValues: string[] = [];
+
+  get allOptionsSelected(): boolean {
+    return this.selectAllValues.length === this.selectAllOptions.length;
+  }
+
+  get someOptionsSelected(): boolean {
+    return this.selectAllValues.length > 0 && !this.allOptionsSelected;
+  }
 
   checkboxListOnChange(event: GoabCheckboxListOnChangeDetail): void {
     console.log(event);
   }
+
+  selectAllOnChange(event: GoabCheckboxOnChangeDetail): void {
+    this.selectAllValues = event.checked ? [...this.selectAllOptions] : [];
+  }
+
+  selectAllListOnChange(event: GoabCheckboxListOnChangeDetail): void {
+    this.selectAllValues = event.value;
+  }
 }
diff --git a/apps/prs/angular/src/styles.css b/apps/prs/angular/src/styles.css
@@ -1,7 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 @import "../../../../dist/libs/web-components/index.css";
-@import "@abgov/design-tokens-v2/dist/tokens.css";
-@import "@abgov/design-tokens-v2/dist/dark-theme.css";
 
 :root {
   --goa-space-fill: 32ch;

diff --git a/apps/prs/react/src/app/app.tsx b/apps/prs/react/src/app/app.tsx
@@ -22,15 +22,6 @@ import {
   featureRouteDefinitions,
 } from "./route-manifest";
 import "@abgov/style";
-// Runtime V1/V2 token switching. Importing this module applies the currently
-// selected token set (default V2) to <head> before the app renders. The
-// playground's work-side-menu exposes a secondary item that flips between
-// V1 and V2 at runtime without editing source or restarting the dev server.
-import {
-  applyTokenVersion,
-  resolveTokenVersion,
-  type TokenVersion,
-} from "./tokenVersion";
 
 const PUSH_DRAWER_ROUTE_PATH = "/features/3347-push";
 const pushDrawerTestParagraphs = Array.from({ length: 30 }, (_, i) => i + 1);
@@ -93,9 +84,6 @@ export interface AppOutletContext {
   openPushDrawer: () => void;
 }
 
-// Sentinel URL handled by onNavigate below to toggle tokens instead of routing.
-const TOKEN_TOGGLE_URL = "#tokens";
-
 // Demo: a slotted page-header that shrinks its heading once content scrolls
 // under the pinned header. It reads the layout's scroll state via the context
 // hook (no prop drilling), using the same middle / at-bottom states that drive
@@ -139,7 +127,6 @@ export function App() {
   const isDark = mode === "dark";
   const location = useLocation();
   const baseUrl = import.meta.env.BASE_URL;
-  const [tokenMode, setTokenMode] = useState<TokenVersion>(() => resolveTokenVersion());
 
   const isPushDrawerRoute =
     location.pathname === PUSH_DRAWER_ROUTE_PATH ||
@@ -165,12 +152,6 @@ export function App() {
   );
 
   const handleSideMenuNavigate = (path: string) => {
-    if (path === TOKEN_TOGGLE_URL) {
-      const next: TokenVersion = tokenMode === "v1" ? "v2" : "v1";
-      setTokenMode(next);
-      applyTokenVersion(next);
-      return;
-    }
     if (path === "#toggle-theme") {
       toggle();
       return;
@@ -214,11 +195,6 @@ export function App() {
       onNavigate={handleSideMenuNavigate}
       secondaryContent={
         <>
-          <GoabWorkSideMenuItem
-            label={`Switch to ${tokenMode === "v1" ? "V2" : "V1"} tokens`}
-            icon="swap-horizontal"
-            url={TOKEN_TOGGLE_URL}
-          />
           <GoabWorkSideMenuItem
             icon={isDark ? "sunny" : "moon"}
             label={isDark ? "Light mode" : "Dark mode"}

diff --git a/apps/prs/react/src/app/tokenVersion.ts b/apps/prs/react/src/app/tokenVersion.ts