feat(#3529): add letter spacing to headings

apps/prs/angular/src/app/app.routes.ts

@@ -85,6 +85,7 @@ import { FeatV2CheckboxComponent } from "../routes/features/featV2Checkbox/featV
 import { Feat3478Component } from "../routes/features/feat3478/feat3478.component";
 import { Feat2885Component } from "../routes/features/feat2885/feat2885.component";
 import { Feat2885NavigationTabsComponent } from "../routes/features/feat2885-navigation-tabs/feat2885-navigation-tabs.component";
+import { Feat3529Component } from "../routes/features/feat3529/feat3529.component";
 
 export const appRoutes: Route[] = [
   { path: "everything", component: EverythingComponent },
@@ -174,4 +175,5 @@ export const appRoutes: Route[] = [
   { path: "features/v2-checkbox", component: FeatV2CheckboxComponent },
   { path: "features/3398", component: Feat3398Component },
   { path: "features/3478", component: Feat3478Component },
+  { path: "features/3529", component: Feat3529Component },
 ];

apps/prs/angular/src/routes/features/feat3529/feat3529.component.html

@@ -0,0 +1,104 @@
+<div style="padding: 2rem">
+  <h1>Feature #3529: Heading Letter Spacing</h1>
+  <p>
+    Letter-spacing design tokens have been applied to all heading sizes. Inspect each
+    heading below and verify that <code>letter-spacing</code> is set via the
+    corresponding CSS custom property.
+  </p>
+
+  <goab-divider mt="l" mb="l"></goab-divider>
+
+  <!-- Explicit size prop -->
+  <h2>Explicit <code>size</code> prop</h2>
+  <p>Each goab-text below uses an explicit size prop. Resize to mobile to verify the mobile tokens also apply.</p>
+
+  <goab-block direction="column" gap="l" mt="l">
+    <div>
+      <p><small>size="heading-xl" — token: <code>--goa-typography-heading-xl-letter-spacing</code></small></p>
+      <goab-text size="heading-xl" mt="none">
+        Heading XL — The quick brown fox jumps over the lazy dog
+      </goab-text>
+    </div>
+
+    <div>
+      <p><small>size="heading-l" — token: <code>--goa-typography-heading-l-letter-spacing</code></small></p>
+      <goab-text size="heading-l" mt="none">
+        Heading L — The quick brown fox jumps over the lazy dog
+      </goab-text>
+    </div>
+
+    <div>
+      <p><small>size="heading-m" — token: <code>--goa-typography-heading-m-letter-spacing</code></small></p>
+      <goab-text size="heading-m" mt="none">
+        Heading M — The quick brown fox jumps over the lazy dog
+      </goab-text>
+    </div>
+
+    <div>
+      <p><small>size="heading-s" — token: <code>--goa-typography-heading-s-letter-spacing</code></small></p>
+      <goab-text size="heading-s" mt="none">
+        Heading S — The quick brown fox jumps over the lazy dog
+      </goab-text>
+    </div>
+
+    <div>
+      <p><small>size="heading-xs" — token: <code>--goa-typography-heading-xs-letter-spacing</code></small></p>
+      <goab-text size="heading-xs" mt="none">
+        Heading XS — The quick brown fox jumps over the lazy dog
+      </goab-text>
+    </div>
+
+    <div>
+      <p><small>size="heading-2xs" — token: <code>--goa-typography-heading-2xs-letter-spacing</code></small></p>
+      <goab-text size="heading-2xs" mt="none">
+        Heading 2XS — The quick brown fox jumps over the lazy dog
+      </goab-text>
+    </div>
+  </goab-block>
+
+  <goab-divider mt="l" mb="l"></goab-divider>
+
+  <!-- Semantic heading tags with default sizes -->
+  <h2>Semantic heading tags (default sizing)</h2>
+  <p>
+    Each heading tag below relies on the default size mapping in
+    <code>Text.svelte</code>. The same letter-spacing tokens should apply.
+  </p>
+
+  <goab-block direction="column" gap="l" mt="l">
+    <div>
+      <p><small>tag="h1" → heading-xl — token: <code>--goa-typography-heading-xl-letter-spacing</code></small></p>
+      <goab-text tag="h1" mt="none">
+        H1 — The quick brown fox jumps over the lazy dog
+      </goab-text>
+    </div>
+
+    <div>
+      <p><small>tag="h2" → heading-l — token: <code>--goa-typography-heading-l-letter-spacing</code></small></p>
+      <goab-text tag="h2" mt="none">
+        H2 — The quick brown fox jumps over the lazy dog
+      </goab-text>
+    </div>
+
+    <div>
+      <p><small>tag="h3" → heading-m — token: <code>--goa-typography-heading-m-letter-spacing</code></small></p>
+      <goab-text tag="h3" mt="none">
+        H3 — The quick brown fox jumps over the lazy dog
+      </goab-text>
+    </div>
+
+    <div>
+      <p><small>tag="h4" → heading-s — token: <code>--goa-typography-heading-s-letter-spacing</code></small></p>
+      <goab-text tag="h4" mt="none">
+        H4 — The quick brown fox jumps over the lazy dog
+      </goab-text>
+    </div>
+
+    <div>
+      <p><small>tag="h5" → heading-xs — token: <code>--goa-typography-heading-xs-letter-spacing</code></small></p>
+      <goab-text tag="h5" mt="none">
+        H5 — The quick brown fox jumps over the lazy dog
+      </goab-text>
+    </div>
+  </goab-block>
+</div>

apps/prs/angular/src/routes/features/feat3529/feat3529.component.ts

@@ -0,0 +1,11 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+import { GoabBlock, GoabDivider, GoabText } from "@abgov/angular-components";
+
+@Component({
+  standalone: true,
+  selector: "abgov-feat3529",
+  templateUrl: "./feat3529.component.html",
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [GoabBlock, GoabDivider, GoabText],
+})
+export class Feat3529Component {}

apps/prs/react/src/main.tsx

@@ -89,6 +89,7 @@ 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";
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 
@@ -193,6 +194,7 @@ root.render(
             path="features/2885-navigation-tabs"
             element={<Feat2885NavigationTabsRoute />}
           />
+          <Route path="features/3529" element={<Feat3529Route />} />
         </Route>
 
         {/* Standalone route without App wrapper for full-page layout demos */}

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 (
+    <div style={{ padding: "2rem" }}>
+      <h1>Feature #3529: Heading Letter Spacing</h1>
+      <p>
+        Letter-spacing design tokens have been applied to all heading sizes. Inspect each
+        heading below and verify that <code>letter-spacing</code> is set via the
+        corresponding CSS custom property.
+      </p>
+
+      <GoabDivider mt="l" mb="l" />
+
+      {/* Explicit size prop */}
+      <h2>Explicit <code>size</code> prop</h2>
+      <p>Each GoabText below uses an explicit size prop. Resize to mobile to verify the mobile tokens also apply.</p>
+
+      <GoabBlock direction="column" gap="l" mt="l">
+        <div>
+          <p><small>size="heading-xl" — token: <code>--goa-typography-heading-xl-letter-spacing</code></small></p>
+          <GoabText size="heading-xl" mt="none">
+            Heading XL — The quick brown fox jumps over the lazy dog
+          </GoabText>
+        </div>
+
+        <div>
+          <p><small>size="heading-l" — token: <code>--goa-typography-heading-l-letter-spacing</code></small></p>
+          <GoabText size="heading-l" mt="none">
+            Heading L — The quick brown fox jumps over the lazy dog
+          </GoabText>
+        </div>
+
+        <div>
+          <p><small>size="heading-m" — token: <code>--goa-typography-heading-m-letter-spacing</code></small></p>
+          <GoabText size="heading-m" mt="none">
+            Heading M — The quick brown fox jumps over the lazy dog
+          </GoabText>
+        </div>
+
+        <div>
+          <p><small>size="heading-s" — token: <code>--goa-typography-heading-s-letter-spacing</code></small></p>
+          <GoabText size="heading-s" mt="none">
+            Heading S — The quick brown fox jumps over the lazy dog
+          </GoabText>
+        </div>
+
+        <div>
+          <p><small>size="heading-xs" — token: <code>--goa-typography-heading-xs-letter-spacing</code></small></p>
+          <GoabText size="heading-xs" mt="none">
+            Heading XS — The quick brown fox jumps over the lazy dog
+          </GoabText>
+        </div>
+
+        <div>
+          <p><small>size="heading-2xs" — token: <code>--goa-typography-heading-2xs-letter-spacing</code></small></p>
+          <GoabText size="heading-2xs" mt="none">
+            Heading 2XS — The quick brown fox jumps over the lazy dog
+          </GoabText>
+        </div>
+      </GoabBlock>
+
+      <GoabDivider mt="l" mb="l" />
+
+      {/* Semantic heading tags with default sizes */}
+      <h2>Semantic heading tags (default sizing)</h2>
+      <p>
+        Each heading tag below relies on the default size mapping in{" "}
+        <code>Text.svelte</code>. The same letter-spacing tokens should apply.
+      </p>
+
+      <GoabBlock direction="column" gap="l" mt="l">
+        <div>
+          <p><small>as="h1" → heading-xl — token: <code>--goa-typography-heading-xl-letter-spacing</code></small></p>
+          <GoabText as="h1" mt="none">
+            H1 — The quick brown fox jumps over the lazy dog
+          </GoabText>
+        </div>
+
+        <div>
+          <p><small>as="h2" → heading-l — token: <code>--goa-typography-heading-l-letter-spacing</code></small></p>
+          <GoabText as="h2" mt="none">
+            H2 — The quick brown fox jumps over the lazy dog
+          </GoabText>
+        </div>
+
+        <div>
+          <p><small>as="h3" → heading-m — token: <code>--goa-typography-heading-m-letter-spacing</code></small></p>
+          <GoabText as="h3" mt="none">
+            H3 — The quick brown fox jumps over the lazy dog
+          </GoabText>
+        </div>
+
+        <div>
+          <p><small>as="h4" → heading-s — token: <code>--goa-typography-heading-s-letter-spacing</code></small></p>
+          <GoabText as="h4" mt="none">
+            H4 — The quick brown fox jumps over the lazy dog
+          </GoabText>
+        </div>
+
+        <div>
+          <p><small>as="h5" → heading-xs — token: <code>--goa-typography-heading-xs-letter-spacing</code></small></p>
+          <GoabText as="h5" mt="none">
+            H5 — The quick brown fox jumps over the lazy dog
+          </GoabText>
+        </div>
+      </GoabBlock>
+    </div>
+  );
+}
+
+export default Feat3529Route;

libs/web-components/src/assets/css/reset.css

@@ -91,23 +91,28 @@ a:focus-visible, a:focus-within, a:focus {
 
 h1 {
   font: var(--goa-typography-heading-xl);
+  letter-spacing: var(--goa-typography-heading-xl-letter-spacing);
 }
 
 h2 {
   font: var(--goa-typography-heading-l);
+  letter-spacing: var(--goa-typography-heading-l-letter-spacing);
 }
 
 h3 {
   font: var(--goa-typography-heading-m);
+  letter-spacing: var(--goa-typography-heading-m-letter-spacing);
 }
 
 h4 {
   font: var(--goa-typography-heading-s);
+  letter-spacing: var(--goa-typography-heading-s-letter-spacing);
 }
 
 h5,
 h6 {
   font: var(--goa-typography-heading-xs);
+  letter-spacing: var(--goa-typography-heading-xs-letter-spacing);
 }
 
 h3 + h1 {

libs/web-components/src/components/footer-nav-section/FooterNavSection.svelte

@@ -70,6 +70,7 @@
 
   .title {
     font: var(--goa-typography-heading-s);
+    letter-spacing: var(--goa-typography-heading-s-letter-spacing);
     padding-bottom: var(--goa-space-m);
     color: var(--goa-color-greyscale-800);
   }
@@ -97,8 +98,9 @@
       flex-direction: column;
     }
     .title {
-    font: var(--goa-typography-heading-m);
-    padding-bottom: var(--goa-space-l);
+      font: var(--goa-typography-heading-m);
+      letter-spacing: var(--goa-typography-heading-m-letter-spacing);
+      padding-bottom: var(--goa-space-l);
     }
   }
 
@@ -116,8 +118,6 @@
     }
   }
 
-
-
   a {
     color: var(--goa-footer-color-links);
     cursor: pointer;

libs/web-components/src/components/form/FormSummary.svelte

@@ -314,6 +314,7 @@
     .label {
       width: 50%;
       font: var(--goa-typography-heading-s);
+      letter-spacing: var(--goa-typography-heading-s-letter-spacing);
     }
     .value {
       width: 50%;

libs/web-components/src/components/text/Text.svelte

@@ -157,21 +157,27 @@
 
   .heading-xl {
     font: var(--goa-typography-heading-xl);
+    letter-spacing: var(--goa-typography-heading-xl-letter-spacing);
   }
   .heading-l {
     font: var(--goa-typography-heading-l);
+    letter-spacing: var(--goa-typography-heading-l-letter-spacing);
   }
   .heading-m {
     font: var(--goa-typography-heading-m);
+    letter-spacing: var(--goa-typography-heading-m-letter-spacing);
   }
   .heading-s {
     font: var(--goa-typography-heading-s);
+    letter-spacing: var(--goa-typography-heading-s-letter-spacing);
   }
   .heading-xs {
     font: var(--goa-typography-heading-xs);
+    letter-spacing: var(--goa-typography-heading-xs-letter-spacing);
   }
   .heading-2xs {
     font: var(--goa-typography-heading-2xs, var(--goa-typography-heading-xs));
+    letter-spacing: var(--goa-typography-heading-2xs-letter-spacing);
   }
   .body-l {
     font: var(--goa-typography-body-l);
@@ -189,21 +195,27 @@
   @media (--mobile) {
     .heading-xl {
       font: var(--goa-typography-mobile-heading-xl);
+      letter-spacing: var(--goa-typography-mobile-heading-xl-letter-spacing);
     }
     .heading-l {
       font: var(--goa-typography-mobile-heading-l);
+      letter-spacing: var(--goa-typography-mobile-heading-l-letter-spacing);
     }
     .heading-m {
       font: var(--goa-typography-mobile-heading-m);
+      letter-spacing: var(--goa-typography-mobile-heading-m-letter-spacing);
     }
     .heading-s {
       font: var(--goa-typography-mobile-heading-s);
+      letter-spacing: var(--goa-typography-mobile-heading-s-letter-spacing);
     }
     .heading-xs {
       font: var(--goa-typography-mobile-heading-xs);
+      letter-spacing: var(--goa-typography-mobile-heading-xs-letter-spacing);
     }
     .heading-2xs {
       font: var(--goa-typography-mobile-heading-2xs, var(--goa-typography-mobile-heading-xs));
+      letter-spacing: var(--goa-typography-mobile-heading-2xs-letter-spacing);
     }
     .body-l {
       font: var(--goa-typography-mobile-body-l);