From cf68fb041aa966bb59949846e880439d87900c75 Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Fri, 5 Dec 2025 14:31:11 -0700
Subject: [PATCH 01/13] fix: refactor public form

---
 apps/prs/react/src/routes/everything.tsx      |  14 -
 apps/prs/web/src/app/App.svelte               |   2 +
 apps/prs/web/src/routes/public-form.svelte    | 376 ++++++++
 .../src/lib/components/form/fieldset.spec.ts  |  70 --
 .../src/lib/components/form/fieldset.ts       |  29 -
 .../form/public-subform-index.spec.ts         | 106 ---
 .../components/form/public-subform.spec.ts    | 167 ----
 .../src/lib/components/form/task.spec.ts      |  94 --
 .../src/lib/components/index.ts               |   1 -
 libs/common/src/index.ts                      |   2 +-
 libs/common/src/lib/messaging/messaging.ts    |  70 +-
 .../src/lib/public-form-controller.spec.ts    |  18 -
 libs/common/src/lib/public-form-controller.ts | 384 ---------
 libs/common/src/lib/public-form.ts            |  34 +
 libs/common/src/lib/validators.ts             |  40 +-
 libs/react-components/src/index.ts            |   2 -
 .../src/lib/form/fieldset.tsx                 |  70 --
 .../lib/form/public-subform-index.spec.tsx    | 185 ----
 .../src/lib/form/public-subform.spec.tsx      | 228 -----
 .../lib/use-public-form-controller.spec.ts    | 128 ---
 .../src/lib/use-public-form-controller.ts     | 107 ---
 libs/web-components/src/common/utils.ts       |  17 +-
 .../checkbox-list/CheckboxList.svelte         | 185 +---
 .../src/components/checkbox/Checkbox.svelte   | 160 +---
 .../components/date-picker/DatePicker.svelte  | 108 +--
 .../src/components/dropdown/Dropdown.svelte   |  67 +-
 .../src/components/form-item/FormItem.svelte  |  82 --
 .../src/components/form/Fieldset.svelte       | 402 ---------
 .../src/components/form/Form.svelte           | 803 ++++++++----------
 .../src/components/form/FormPage.svelte       | 260 ++----
 .../src/components/form/FormSummary.svelte    | 305 +++----
 .../src/components/form/SubForm.svelte        | 344 --------
 .../src/components/form/SubFormIndex.svelte   |  81 --
 .../src/components/form/Subform.svelte        |  70 ++
 .../src/components/form/SubformForm.svelte    |  11 +
 .../src/components/form/SubformList.svelte    |  11 +
 .../src/components/input/Input.svelte         |  30 +-
 .../src/components/link/Link.svelte           |   4 +-
 .../components/radio-group/RadioGroup.svelte  |  68 +-
 .../components/radio-item/RadioItem.svelte    | 136 ++-
 .../src/components/text-area/TextArea.svelte  |  64 +-
 libs/web-components/src/index.ts              |   4 +-
 libs/web-components/src/types/relay-types.ts  | 229 -----
 public-form.md                                |  58 ++
 44 files changed, 1412 insertions(+), 4214 deletions(-)
 create mode 100644 apps/prs/web/src/routes/public-form.svelte
 delete mode 100644 libs/angular-components/src/lib/components/form/fieldset.spec.ts
 delete mode 100644 libs/angular-components/src/lib/components/form/fieldset.ts
 delete mode 100644 libs/angular-components/src/lib/components/form/public-subform-index.spec.ts
 delete mode 100644 libs/angular-components/src/lib/components/form/public-subform.spec.ts
 delete mode 100644 libs/angular-components/src/lib/components/form/task.spec.ts
 delete mode 100644 libs/common/src/lib/public-form-controller.spec.ts
 delete mode 100644 libs/common/src/lib/public-form-controller.ts
 create mode 100644 libs/common/src/lib/public-form.ts
 delete mode 100644 libs/react-components/src/lib/form/fieldset.tsx
 delete mode 100644 libs/react-components/src/lib/form/public-subform-index.spec.tsx
 delete mode 100644 libs/react-components/src/lib/form/public-subform.spec.tsx
 delete mode 100644 libs/react-components/src/lib/use-public-form-controller.spec.ts
 delete mode 100644 libs/react-components/src/lib/use-public-form-controller.ts
 delete mode 100644 libs/web-components/src/components/form/Fieldset.svelte
 delete mode 100644 libs/web-components/src/components/form/SubForm.svelte
 delete mode 100644 libs/web-components/src/components/form/SubFormIndex.svelte
 create mode 100644 libs/web-components/src/components/form/Subform.svelte
 create mode 100644 libs/web-components/src/components/form/SubformForm.svelte
 create mode 100644 libs/web-components/src/components/form/SubformList.svelte
 create mode 100644 public-form.md

diff --git a/apps/prs/react/src/routes/everything.tsx b/apps/prs/react/src/routes/everything.tsx
index ecd5d6fac..e03d98b7d 100644
--- a/apps/prs/react/src/routes/everything.tsx
+++ b/apps/prs/react/src/routes/everything.tsx
@@ -26,7 +26,6 @@ import {
   GoabDrawer,
   GoabDropdown,
   GoabDropdownItem,
-  GoabFieldset,
   GoabFileUploadCard,
   GoabFileUploadInput,
   GoabFilterChip,
@@ -50,13 +49,6 @@ import {
   GoabPages,
   GoabPagination,
   GoabPopover,
-  GoabPublicForm,
-  GoabPublicFormPage,
-  GoabPublicFormSummary,
-  GoabPublicFormTask,
-  GoabPublicFormTaskList,
-  GoabPublicSubform,
-  GoabPublicSubformIndex,
   GoabRadioGroup,
   GoabRadioItem,
   GoabSideMenu,
@@ -103,7 +95,6 @@ import {
   GoabFileUploadInputOnSelectFileDetail,
   GoabFileUploadOnCancelDetail,
   GoabFileUploadOnDeleteDetail,
-  GoabFormState,
   GoabFormStepStatus,
   GoabFormStepperOnChangeDetail,
   GoabIconButtonVariant,
@@ -351,11 +342,6 @@ export function EverythingRoute(): JSX.Element {
   const [inputTrailingClicks, setInputTrailingClicks] = useState(0);
   const [numberInputTrailingClicks, setNumberInputTrailingClicks] = useState(0);
   const [menuAction, setMenuAction] = useState<string | undefined>();
-  const [publicFormEvents, setPublicFormEvents] = useState<string[]>([]);
-  const [fieldsetContinueEvents, setFieldsetContinueEvents] = useState<
-    GoabFieldsetOnContinueDetail[]
-  >([]);
-  const [publicSubformEvents, setPublicSubformEvents] = useState<string[]>([]);
   const logEvent = (name: string, detail: unknown) => {
     console.log(`[everything][react] ${name}`, detail);
     const entry: EventLogEntry = { name, detail, timestamp: new Date().toISOString() };
diff --git a/apps/prs/web/src/app/App.svelte b/apps/prs/web/src/app/App.svelte
index 3f219265f..00244c212 100644
--- a/apps/prs/web/src/app/App.svelte
+++ b/apps/prs/web/src/app/App.svelte
@@ -3,6 +3,7 @@
   import { Router, Route } from "svelte-routing";
   import Issue2333 from "../routes/2333.svelte";
   import Issue3279 from "../routes/3279.svelte";
+  import PublicFormExample from "../routes/public-form.svelte";
 </script>
 
 <svelte:head>
@@ -12,4 +13,5 @@
 <Router>
   <Route path="/issues/2333" component={Issue2333} />
   <Route path="/issues/3279" component={Issue3279} />
+  <Route path="/issues/public-form" component={PublicFormExample} />
 </Router>
diff --git a/apps/prs/web/src/routes/public-form.svelte b/apps/prs/web/src/routes/public-form.svelte
new file mode 100644
index 000000000..7baf85745
--- /dev/null
+++ b/apps/prs/web/src/routes/public-form.svelte
@@ -0,0 +1,376 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import {
+    RequiredValidator,
+    LengthValidator,
+    SINValidator,
+    NumericValidator,
+    type PFPage,
+  } from "@abgov/ui-components-common";
+
+
+  function toHumanDate(val: string) {
+    const [y, m, d] = val.split("-");
+    const months = "January February March April May June July August September October November December".split(" ");
+    const [year, month, day] = [y, parseInt(month.replace(/^0/g, "")), day.replace(/^0/g, "")]
+    return `${months[month-1]} ${day}, ${year}`
+  }
+
+  let _state = undefined;
+
+  const outline = {
+    role: {
+      props: {
+        heading: "What is your role in the court order?",
+        "section-title": "Support order details",
+      },
+      fields: {
+        "role": { label: "What is your role?", formatter: (val) => val.toUpperCase() },
+      },
+      next: (state: PFState) => {
+        const role = state.dataBuffer["role"];
+        return role === "Payor" ? "salary" : "children";
+      },
+      validators: {
+        role: [RequiredValidator("Role is required")],
+      },
+    },
+
+    children: {
+      subform: true,
+      props: {
+       heading: "Do you have children",
+      },
+      fields: {
+        "first-name": { label: "First name", formatter: (val) => val[0].toUpperCase() + val.substr(1)},
+        "last-name": { label: "Last name", formatter: (val) => val[0].toUpperCase() + val.substr(1)},
+        "birthdate": { label: "Birthdate" },
+      },
+      next: "description",
+      valdiators: {
+
+      }
+    },
+
+    description: {
+      props: {
+        "section-title": "Support order details",
+        heading: "Some description",
+        "sub-heading": "Some subheading",
+      },
+      next: "foobar",
+    },
+
+    foobar: {
+      props: {
+        "section-title": "Support order details",
+        heading: "Slotted checkbox test"
+      },
+      fields: {
+        "fav-color": { label: "Favourite color?", hideInSummary: "always" },
+        "fav-color-value": { label: "Color", hideInSummary: "ifBlank" },
+        "fav-number-value": { label: "Number", hideInSummary: "ifBlank" },
+      },
+      next: "identification",
+    },
+
+    salary: {
+      props: {
+        heading: "Payor salary",
+      },
+      fields: {
+        "salary": { label: "Yearly income" }
+      },
+      next: "summary",
+      validators: {
+        salary: [NumericValidator({ min: 0 })],
+      },
+    },
+
+    identification: {
+      props: {
+        "section-title": "Support order details",
+        heading: "Do you know any of the identifiers about the other party?",
+      },
+      fields: {
+        "sin": {
+          label: "Social Insurance #",
+          formatter: (val: string) => val.match(/(.{3})/g)?.join(" ")
+        },
+        "ahcn": {
+          label: "Alberta Health Care #",
+          formatter: (val: string) => val.match(/(.{4})/g)?.join("-")
+        },
+        "info": { label: "Additional information" }
+      },
+      next: (state): string => {
+        const sin = state.dataBuffer["sin"];
+        const ahcn = state.dataBuffer["ahcn"];
+
+        if (!sin && !ahcn) {
+          throw "Either sin or ahcn is required";
+        }
+
+        return "address";
+      },
+      validators: {
+        sin: [SINValidator()],
+        ahcn: [LengthValidator({ min: 8 })],
+      },
+    },
+
+    payor: {
+      props: {
+        heading: "Payor Name",
+      },
+      fields: {
+        firstName: { label: "First name" },
+        lastName: { label: "Last name" },
+      },
+      summarize: (page: PFPage) => ({
+        "Full name": `${page["firstName"]} ${page["lastName"]}`.trim(),
+      }),
+      next: "address",
+    },
+
+    address: {
+      props: {
+        "section-title": "Support order details",
+        heading: "Your current address",
+      },
+      fields: {
+        city: { label: "City/Town" },
+        street: { label: "Street #" },
+        "postal-code": { label: "Postal code" },
+      },
+      next: "summary",
+    },
+
+    summary: {
+      props: {
+        "section-title": "Support order details",
+        heading: "Summary",
+      },
+      next: (state): string => {
+        console.log("submit to backend here", state)
+      }
+    },
+  };
+
+  function init(e: CustomEvent) {
+    const raw = `
+      {
+  "data": {
+    "role": {
+      "role": "Recipient"
+    },
+    "children": [
+      {
+        "first-name": "Colton",
+        "last-name": "Cheung",
+        "birthdate": "2012-03-01",
+        "_id": "fe93e629-ab88-4a3b-a22f-e8a8e9b8eb22"
+      },
+      {
+        "first-name": "Wesley",
+        "last-name": "Olsen",
+        "birthdate": "2019-08-04",
+        "_id": "db51013a-4bea-406a-9878-b38accac72a9"
+      }
+    ],
+    "description": {},
+    "foobar": {
+      "fav-color-radiogroup": "optional-1",
+      "radio-reveal": "This is some optional field response",
+      "radio-reveal-2": "",
+      "fav-color-checkbox": "checked",
+      "fav-color": "Red",
+      "fav-colors": "I like red",
+      "some-checkbox": "checked",
+      "colors": "red",
+      "fav-names": "",
+      "birthdate": "2025-12-15"
+    },
+    "identification": {
+      "sin": "",
+      "ahcn": "121212121212",
+      "info": "Some additional details"
+    },
+    "payor": {
+      "firstName": "",
+      "lastName": ""
+    },
+    "salary": {
+      "salary": ""
+    },
+    "address": {
+      "city": "Edmonton",
+      "street": "3100-Somewhere Cres",
+      "postal-code": "T3T3T3"
+    },
+    "summary": {}
+  },
+  "dataBuffer": {},
+  "history": [
+    "role",
+    "children",
+    "description",
+    "foobar",
+    "identification",
+    "address",
+    "summary"
+  ]
+}
+    `;
+
+    setTimeout(() => {
+      const initData = JSON.parse(raw);
+      const fn = e.detail;
+
+      _state = fn(null, { outline });
+    }, 1000);
+  }
+
+  // Called on every keypress => realtime page updates
+  function onChange(e) {
+    // console.log("onChange", e.detail);
+  }
+
+  // After the continue button is clicked
+  function onNext(e) {
+    // Can push changes to backend here
+    // _state = e.detail;
+    // console.log("onNext", _state);
+  }
+
+  function getPage(state: PFState, id: string, defaultValue: unknown) {
+    return state?.data?.[id] || defaultValue;
+  }
+
+  // TODO: maybe change this name..the "change" term may cause others to think that is
+  // fired on each keypress, like simular to how the _change works
+  function onSubformChange(e) {
+    const state = (e as CustomEvent).detail;
+    _state = {...state};
+  }
+</script>
+
+<div style="margin: 5rem auto; width: 90ch">
+  <goa-public-form
+    on:_init={init}
+    on:_change={onChange}
+    on:_subformChange={onSubformChange}
+    on:_next={onNext}
+  >
+    <goa-public-form-page id="role">
+      <goa-form-item helptext="some help text">
+        <goa-radio-group name="role" data-pf-item>
+          <goa-radio-item value="Recipient" label="Recipient"></goa-radio-item>
+          <goa-radio-item value="Payor" label="Payor"></goa-radio-item>
+        </goa-radio-group>
+      </goa-form-item>
+    </goa-public-form-page>
+
+    <goa-public-form-page id="children" data-pf-list>
+      <goa-pf-subform>
+        <table>
+          {#each getPage(_state, "children", []) as child (child._id)}
+            <tr>
+              <td>{child["first-name"]}</td>
+              <td>{child["last-name"]}</td>
+              <td><goa-link action="edit" action-arg={child._id}>Edit</goa-link>
+              <td><goa-link action="delete" action-arg={child._id}>Remove</goa-link>
+            </tr>
+          {/each}
+        </table>
+
+        <form slot="form">
+          <goa-form-item label="First name">
+            <goa-input name="first-name" data-pf-item />
+          </goa-form-item>
+          <goa-form-item label="Last name">
+            <goa-input name="last-name" data-pf-item />
+          </goa-form-item>
+          <goa-form-item label="Birthdate" mb="3xl">
+            <goa-date-picker type="input" name="birthdate" data-pf-item />
+          </goa-form-item>
+        </form>
+
+      </goa-pf-subform>
+    </goa-public-form-page>
+
+
+    <goa-public-form-page id="description">
+      This is a page that is read-only
+
+      <goa-details heading="Some important detail">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, odit! Voluptatem
+        dolor soluta aspernatur ipsa dolorem est iure vitae eaque ea, vero architecto
+        praesentium, quia excepturi, odio porro? Fuga, officia?
+      </goa-details>
+    </goa-public-form-page>
+
+    <goa-public-form-page id="foobar">
+      <goa-radio-group data-pf-item name="fav-color">
+        <goa-radio-item value="yes" label="Yes">
+          <goa-input slot="reveal" name="fav-color-value" data-pf-item placeholder="What is it?" />
+        </goa-radio-item>
+        <goa-radio-item value="no fav color" label="No">
+          <div slot="reveal">
+            <goa-input name="fav-number-value" data-pf-item placeholder="What is your fav number then?" />
+          </div>
+        </goa-radio-item>
+      </goa-radio-group>
+
+    </goa-public-form-page>
+
+    <goa-public-form-page id="identification">
+      <goa-form-item
+        label="What is the Social Insurance Number?"
+        requirement="optional"
+        helpText="9-digit number, such as 123 456 789."
+      >
+        <goa-input data-pf-item name="sin" />
+      </goa-form-item>
+
+      <goa-form-item label="What is the AHCN">
+        <goa-input data-pf-item name="ahcn" />
+      </goa-form-item>
+
+      <goa-form-item label="Additional details">
+        <goa-textarea data-pf-item name="info" />
+      </goa-form-item>
+    </goa-public-form-page>
+
+    <goa-public-form-page id="payor">
+      <goa-form-item label="First name">
+        <goa-input data-pf-item name="firstName"></goa-input>
+      </goa-form-item>
+      <goa-form-item label="Last name">
+        <goa-input data-pf-item name="lastName"></goa-input>
+      </goa-form-item>
+    </goa-public-form-page>
+
+    <goa-public-form-page id="salary">
+      <goa-form-item label="Salary">
+        <goa-input data-pf-item name="salary" type="number"></goa-input>
+      </goa-form-item>
+    </goa-public-form-page>
+
+    <goa-public-form-page id="address">
+      <goa-form-item label="City" helptext="Where you live">
+        <goa-input data-pf-item name="city"></goa-input>
+      </goa-form-item>
+      <goa-form-item label="Address">
+        <goa-input data-pf-item name="street"></goa-input>
+      </goa-form-item>
+      <goa-form-item label="Postal Code">
+        <goa-input data-pf-item name="postal-code"></goa-input>
+      </goa-form-item>
+    </goa-public-form-page>
+
+    <goa-public-form-page id="summary" button-text="Submit" back-visibility="hidden">
+      <goa-public-form-summary></goa-public-form-summary>
+    </goa-public-form-page>
+  </goa-public-form>
+</div>
diff --git a/libs/angular-components/src/lib/components/form/fieldset.spec.ts b/libs/angular-components/src/lib/components/form/fieldset.spec.ts
deleted file mode 100644
index fa23cf960..000000000
--- a/libs/angular-components/src/lib/components/form/fieldset.spec.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { GoabFieldset } from "./fieldset";
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
-import { By } from "@angular/platform-browser";
-import { GoabFieldsetOnContinueDetail } from "@abgov/ui-components-common";
-
-@Component({
-  standalone: true,
-  imports: [GoabFieldset],
-  template: `
-    <goab-fieldset
-      [sectionTitle]="sectionTitle"
-      [dispatchOn]="dispatchOn"
-      [id]="id"
-      (onContinue)="handleContinue($event)"
-    >
-      <div data-testid="content">Test content</div>
-    </goab-fieldset>
-  `,
-})
-class TestFieldsetComponent {
-  sectionTitle?: string;
-  dispatchOn: "change" | "continue" = "continue";
-  id?: string;
-
-  handleContinue(event: GoabFieldsetOnContinueDetail): void {/** do nothing **/}
-}
-
-describe("GoabFieldSet", () => {
-  let fixture: ComponentFixture<TestFieldsetComponent>;
-  let component: TestFieldsetComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [GoabFieldset, TestFieldsetComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TestFieldsetComponent);
-    component = fixture.componentInstance;
-
-    component.sectionTitle = "Test Section";
-    component.dispatchOn = "continue";
-    component.id = "test-fieldset";
-  });
-
-  it("should render with properties", () => {
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-fieldset")).nativeElement;
-
-    expect(el?.getAttribute("section-title")).toBe(component.sectionTitle);
-    expect(el?.getAttribute("dispatch-on")).toBe(component.dispatchOn);
-    expect(el?.getAttribute("id")).toBe(component.id);
-
-    // Content is rendered
-    expect(el?.querySelector("[data-testid='content']")).toBeTruthy();
-  });
-
-  it("should emit onContinue event", () => {
-    fixture.detectChanges();
-    const spy = jest.spyOn(component, "handleContinue");
-
-    const el = fixture.debugElement.query(By.css("goa-fieldset")).nativeElement;
-    const detail = { value: "test" };
-
-    el.dispatchEvent(new CustomEvent("_continue", { detail }));
-    expect(spy).toHaveBeenCalledWith(detail);
-  });
-});
diff --git a/libs/angular-components/src/lib/components/form/fieldset.ts b/libs/angular-components/src/lib/components/form/fieldset.ts
deleted file mode 100644
index 5428e87c7..000000000
--- a/libs/angular-components/src/lib/components/form/fieldset.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from "@angular/core";
-import { GoabFormDispatchOn, GoabFieldsetOnContinueDetail } from "@abgov/ui-components-common";
-
-@Component({
-  selector: 'goab-fieldset',
-  template: `
-    <goa-fieldset
-      [attr.section-title]="sectionTitle"
-      [attr.dispatch-on]="dispatchOn"
-      [attr.id]="id"
-      (_continue)="_onContinue($event)"
-    >
-      <ng-content></ng-content>
-    </goa-fieldset>`,
-  standalone: true,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
-export class GoabFieldset {
-  @Input() id?: string;
-  @Input() sectionTitle?: string;
-  @Input() dispatchOn: GoabFormDispatchOn = "continue";
-
-  @Output() onContinue = new EventEmitter<GoabFieldsetOnContinueDetail>();
-
-  _onContinue(event: Event) {
-    const detail = (event as CustomEvent).detail;
-    this.onContinue.emit(detail);
-  }
-}
diff --git a/libs/angular-components/src/lib/components/form/public-subform-index.spec.ts b/libs/angular-components/src/lib/components/form/public-subform-index.spec.ts
deleted file mode 100644
index 7f6a995a5..000000000
--- a/libs/angular-components/src/lib/components/form/public-subform-index.spec.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { GoabPublicSubformIndex } from "./public-subform-index";
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
-import { By } from "@angular/platform-browser";
-import { Spacing } from "@abgov/ui-components-common";
-
-@Component({
-  standalone: true,
-  imports: [GoabPublicSubformIndex],
-  template: `
-    <goab-public-subform-index
-      [heading]="heading"
-      [sectionTitle]="sectionTitle"
-      [actionButtonText]="actionButtonText"
-      [buttonVisibility]="buttonVisibility"
-      [mt]="mt"
-      [mr]="mr"
-      [mb]="mb"
-      [ml]="ml"
-    >
-      <div data-testid="content">Test content</div>
-    </goab-public-subform-index>
-  `,
-})
-class TestPublicSubformIndexComponent {
-  heading = "Test Heading";
-  sectionTitle = "Test Section Title";
-  actionButtonText = "Add Item";
-  buttonVisibility: "visible" | "hidden" = "visible";
-  mt = "s" as Spacing;
-  mr = "m" as Spacing;
-  mb = "l" as Spacing;
-  ml = "xl" as Spacing;
-}
-
-describe("GoabPublicSubformIndex", () => {
-  let fixture: ComponentFixture<TestPublicSubformIndexComponent>;
-  let component: TestPublicSubformIndexComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [GoabPublicSubformIndex, TestPublicSubformIndexComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TestPublicSubformIndexComponent);
-    component = fixture.componentInstance;
-  });
-
-  it("should render with properties", () => {
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-subform-index")).nativeElement;
-
-    expect(el?.getAttribute("heading")).toBe(component.heading);
-    expect(el?.getAttribute("section-title")).toBe(component.sectionTitle);
-    expect(el?.getAttribute("action-button-text")).toBe(component.actionButtonText);
-    expect(el?.getAttribute("button-visibility")).toBe(component.buttonVisibility);
-    expect(el?.getAttribute("mt")).toBe(component.mt);
-    expect(el?.getAttribute("mr")).toBe(component.mr);
-    expect(el?.getAttribute("mb")).toBe(component.mb);
-    expect(el?.getAttribute("ml")).toBe(component.ml);
-
-    // Content is rendered
-    expect(el?.querySelector("[data-testid='content']")).toBeTruthy();
-  });
-
-  it("should have default values", () => {
-    const subformIndex = new GoabPublicSubformIndex();
-    expect(subformIndex.heading).toBe("");
-    expect(subformIndex.sectionTitle).toBe("");
-    expect(subformIndex.actionButtonText).toBe("");
-    expect(subformIndex.buttonVisibility).toBe("hidden");
-  });
-
-  it("should have the correct slot attribute on host element", () => {
-    fixture.detectChanges();
-
-    const hostElement = fixture.debugElement.query(By.css("goab-public-subform-index")).nativeElement;
-    expect(hostElement.getAttribute("slot")).toBe("subform-index");
-  });
-
-  it("should pass through different property values", () => {
-    component.heading = "Updated Heading";
-    component.sectionTitle = "Updated Section";
-    component.actionButtonText = "Add Another";
-    component.buttonVisibility = "hidden";
-    component.mt = "none";
-    component.mr = "xs";
-    component.mb = "2xl";
-    component.ml = "3xl";
-
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-subform-index")).nativeElement;
-
-    expect(el?.getAttribute("heading")).toBe("Updated Heading");
-    expect(el?.getAttribute("section-title")).toBe("Updated Section");
-    expect(el?.getAttribute("action-button-text")).toBe("Add Another");
-    expect(el?.getAttribute("button-visibility")).toBe("hidden");
-    expect(el?.getAttribute("mt")).toBe("none");
-    expect(el?.getAttribute("mr")).toBe("xs");
-    expect(el?.getAttribute("mb")).toBe("2xl");
-    expect(el?.getAttribute("ml")).toBe("3xl");
-  });
-});
diff --git a/libs/angular-components/src/lib/components/form/public-subform.spec.ts b/libs/angular-components/src/lib/components/form/public-subform.spec.ts
deleted file mode 100644
index 11d7b3074..000000000
--- a/libs/angular-components/src/lib/components/form/public-subform.spec.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { GoabPublicSubform } from "./public-subform";
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
-import { By } from "@angular/platform-browser";
-import { Spacing } from "@abgov/ui-components-common";
-
-@Component({
-  standalone: true,
-  imports: [GoabPublicSubform],
-  template: `
-    <goab-public-subform
-      [id]="id"
-      [name]="name"
-      [continueMsg]="continueMsg"
-      [mt]="mt"
-      [mr]="mr"
-      [mb]="mb"
-      [ml]="ml"
-      (onInit)="handleInit($event)"
-      (onStateChange)="handleStateChange($event)"
-    >
-      <div data-testid="content">Test content</div>
-    </goab-public-subform>
-  `,
-})
-class TestPublicSubformComponent {
-  id = "test-subform";
-  name = "test-subform-name";
-  continueMsg = "Continue to next step";
-  mt = "s" as Spacing;
-  mr = "m" as Spacing;
-  mb = "l" as Spacing;
-  ml = "xl" as Spacing;
-
-  initEventCalled = false;
-  stateChangeEventCalled = false;
-  lastInitEvent: Event | null = null;
-  lastStateChangeEvent: Event | null = null;
-
-  handleInit(event: Event): void {
-    this.initEventCalled = true;
-    this.lastInitEvent = event;
-  }
-
-  handleStateChange(event: Event): void {
-    this.stateChangeEventCalled = true;
-    this.lastStateChangeEvent = event;
-  }
-}
-
-describe("GoabPublicSubform", () => {
-  let fixture: ComponentFixture<TestPublicSubformComponent>;
-  let component: TestPublicSubformComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [GoabPublicSubform, TestPublicSubformComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TestPublicSubformComponent);
-    component = fixture.componentInstance;
-  });
-
-  it("should render with properties", () => {
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-subform")).nativeElement;
-
-    expect(el?.getAttribute("id")).toBe(component.id);
-    expect(el?.getAttribute("name")).toBe(component.name);
-    expect(el?.getAttribute("continue-msg")).toBe(component.continueMsg);
-    expect(el?.getAttribute("mt")).toBe(component.mt);
-    expect(el?.getAttribute("mr")).toBe(component.mr);
-    expect(el?.getAttribute("mb")).toBe(component.mb);
-    expect(el?.getAttribute("ml")).toBe(component.ml);
-
-    // Content is rendered
-    expect(el?.querySelector("[data-testid='content']")).toBeTruthy();
-  });
-
-  it("should have default values", () => {
-    const subform = new GoabPublicSubform();
-    expect(subform.id).toBe("");
-    expect(subform.name).toBe("");
-    expect(subform.continueMsg).toBe("");
-  });
-
-  it("should emit onInit event", () => {
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-subform")).nativeElement;
-    const testEvent = new CustomEvent("_init", { detail: { test: "data" } });
-
-    el.dispatchEvent(testEvent);
-
-    expect(component.initEventCalled).toBe(true);
-    expect(component.lastInitEvent).toBeTruthy();
-  });
-
-  it("should emit onStateChange event", () => {
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-subform")).nativeElement;
-    const testEvent = new CustomEvent("_stateChange", { detail: { state: "changed" } });
-
-    el.dispatchEvent(testEvent);
-
-    expect(component.stateChangeEventCalled).toBe(true);
-    expect(component.lastStateChangeEvent).toBeTruthy();
-  });
-
-  it("should pass through different property values", () => {
-    component.id = "updated-id";
-    component.name = "updated-name";
-    component.continueMsg = "Updated continue message";
-    component.mt = "none";
-    component.mr = "xs";
-    component.mb = "2xl";
-    component.ml = "3xl";
-
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-subform")).nativeElement;
-
-    expect(el?.getAttribute("id")).toBe("updated-id");
-    expect(el?.getAttribute("name")).toBe("updated-name");
-    expect(el?.getAttribute("continue-msg")).toBe("Updated continue message");
-    expect(el?.getAttribute("mt")).toBe("none");
-    expect(el?.getAttribute("mr")).toBe("xs");
-    expect(el?.getAttribute("mb")).toBe("2xl");
-    expect(el?.getAttribute("ml")).toBe("3xl");
-  });
-
-  it("should handle empty string attributes correctly", () => {
-    component.id = "";
-    component.name = "";
-    component.continueMsg = "";
-
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-subform")).nativeElement;
-
-    expect(el?.getAttribute("id")).toBe("");
-    expect(el?.getAttribute("name")).toBe("");
-    expect(el?.getAttribute("continue-msg")).toBe("");
-  });
-
-  it("should emit multiple events in sequence", () => {
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-subform")).nativeElement;
-
-    // Reset counters
-    component.initEventCalled = false;
-    component.stateChangeEventCalled = false;
-
-    // Emit init event
-    el.dispatchEvent(new CustomEvent("_init"));
-    expect(component.initEventCalled).toBe(true);
-    expect(component.stateChangeEventCalled).toBe(false);
-
-    // Emit state change event
-    el.dispatchEvent(new CustomEvent("_stateChange"));
-    expect(component.stateChangeEventCalled).toBe(true);
-  });
-});
diff --git a/libs/angular-components/src/lib/components/form/task.spec.ts b/libs/angular-components/src/lib/components/form/task.spec.ts
deleted file mode 100644
index 45541fec8..000000000
--- a/libs/angular-components/src/lib/components/form/task.spec.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { GoabPublicFormTask } from "./task";
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
-import { By } from "@angular/platform-browser";
-import { GoabPublicFormTaskStatus } from "@abgov/ui-components-common";
-
-@Component({
-  standalone: true,
-  imports: [GoabPublicFormTask],
-  template: `
-    <goab-public-form-task
-      [status]="status"
-    >
-      <div data-testid="content">Task content</div>
-    </goab-public-form-task>
-  `,
-})
-class TestPublicFormTaskComponent {
-  status: GoabPublicFormTaskStatus = "not-started";
-}
-
-describe("GoabPublicFormTask", () => {
-  let fixture: ComponentFixture<TestPublicFormTaskComponent>;
-  let component: TestPublicFormTaskComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [TestPublicFormTaskComponent, GoabPublicFormTask],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TestPublicFormTaskComponent);
-    component = fixture.componentInstance;
-  });
-
-  it("should render with status property", () => {
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-form-task")).nativeElement;
-
-    expect(el?.getAttribute("status")).toBe(component.status);
-
-    // Content is rendered
-    expect(el?.querySelector("[data-testid='content']")).toBeTruthy();
-  });
-
-  it("should have undefined status by default", () => {
-    const task = new GoabPublicFormTask();
-    expect(task.status).toBeUndefined();
-  });
-
-  it("should handle all valid status values", () => {
-    const statuses: GoabPublicFormTaskStatus[] = ["completed", "not-started", "cannot-start"];
-
-    statuses.forEach(status => {
-      component.status = status;
-      fixture.detectChanges();
-
-      const el = fixture.debugElement.query(By.css("goa-public-form-task")).nativeElement;
-      expect(el?.getAttribute("status")).toBe(status);
-    });
-  });
-
-  it("should handle status changes", () => {
-    // Start with not-started
-    component.status = "not-started";
-    fixture.detectChanges();
-
-    let el = fixture.debugElement.query(By.css("goa-public-form-task")).nativeElement;
-    expect(el?.getAttribute("status")).toBe("not-started");
-
-    // Change to completed
-    component.status = "completed";
-    fixture.detectChanges();
-
-    el = fixture.debugElement.query(By.css("goa-public-form-task")).nativeElement;
-    expect(el?.getAttribute("status")).toBe("completed");
-
-    // Change to cannot-start
-    component.status = "cannot-start";
-    fixture.detectChanges();
-
-    el = fixture.debugElement.query(By.css("goa-public-form-task")).nativeElement;
-    expect(el?.getAttribute("status")).toBe("cannot-start");
-  });
-
-  it("should render without status attribute when undefined", () => {
-    component.status = undefined as any;
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-form-task")).nativeElement;
-    expect(el?.hasAttribute("status")).toBeFalsy();
-  });
-});
diff --git a/libs/angular-components/src/lib/components/index.ts b/libs/angular-components/src/lib/components/index.ts
index 1204e799a..858e4cb62 100644
--- a/libs/angular-components/src/lib/components/index.ts
+++ b/libs/angular-components/src/lib/components/index.ts
@@ -37,7 +37,6 @@ export * from "./form/public-subform";
 export * from "./form/public-subform-index";
 export * from "./form/task";
 export * from "./form/task-list";
-export * from "./form/fieldset";
 export * from "./form-item/form-item";
 export * from "./form-item/form-item-slot";
 export * from "./form-step/form-step";
diff --git a/libs/common/src/index.ts b/libs/common/src/index.ts
index 1a4e965dc..68f2191cf 100644
--- a/libs/common/src/index.ts
+++ b/libs/common/src/index.ts
@@ -1,6 +1,6 @@
 export * from "./lib/common";
 export * from "./lib/experimental/common";
 export * from "./lib/validators";
-export * from "./lib/public-form-controller";
 export * from "./lib/temporary-notification-controller/temporary-notification-controller";
 export * from "./lib/messaging/messaging";
+export type * from "./lib/public-form";
diff --git a/libs/common/src/lib/messaging/messaging.ts b/libs/common/src/lib/messaging/messaging.ts
index df70e7292..6a855849b 100644
--- a/libs/common/src/lib/messaging/messaging.ts
+++ b/libs/common/src/lib/messaging/messaging.ts
@@ -3,40 +3,62 @@ export function dispatch<T>(
   el: HTMLElement | Element | null | undefined,
   eventName: string,
   detail?: T,
-  opts?: { bubbles?: boolean },
+  opts?: { bubbles?: boolean; cancelable?: boolean; timeout?: number },
 ) {
-  if (!el) {
-    console.error("dispatch element is null");
-    return;
+  const dispatch = () => {
+    try {
+      el?.dispatchEvent?.(
+        new CustomEvent<T>(eventName, {
+          composed: true,
+          bubbles: opts?.bubbles,
+          cancelable: opts?.cancelable,
+          detail,
+        }),
+      );
+    } catch (e) {
+      console.error("dispatch() error:", e);
+    }
+  };
+
+  if (opts?.timeout) {
+    setTimeout(dispatch, opts.timeout);
+  } else {
+    dispatch();
   }
-  el.dispatchEvent(
-    new CustomEvent<T>(eventName, {
-      composed: true,
-      bubbles: opts?.bubbles,
-      detail: detail,
-    }),
-  );
 }
 
-// Public helper function to relay messages
 export function relay<T>(
   el: HTMLElement | Element | null | undefined,
   eventName: string,
   data?: T,
-  opts?: { bubbles?: boolean },
+  opts?: { bubbles?: boolean; cancelable?: boolean; timeout?: number },
 ) {
   if (!el) {
-    console.error("dispatch element is null");
+    console.warn("relay() el is null | undefined");
     return;
   }
-  el.dispatchEvent(
-    new CustomEvent<{ action: string; data?: T }>("msg", {
-      composed: true,
-      bubbles: opts?.bubbles,
-      detail: {
-        action: eventName,
-        data,
-      },
-    }),
-  );
+
+  const dispatch = () => {
+    try {
+      el?.dispatchEvent?.(
+        new CustomEvent<{ action: string; data?: T }>("msg", {
+          composed: true,
+          bubbles: opts?.bubbles,
+          cancelable: opts?.cancelable,
+          detail: {
+            action: eventName,
+            data,
+          },
+        }),
+      );
+    } catch (e) {
+      console.error("relay() error:", e);
+    }
+  };
+
+  if (opts?.timeout) {
+    setTimeout(dispatch, opts.timeout);
+  } else {
+    dispatch();
+  }
 }
diff --git a/libs/common/src/lib/public-form-controller.spec.ts b/libs/common/src/lib/public-form-controller.spec.ts
deleted file mode 100644
index f350fa92c..000000000
--- a/libs/common/src/lib/public-form-controller.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { PublicFormController } from "./public-form-controller";
-
-describe("PublicFormController", () => {
-  const pfc = new PublicFormController("details");
-
-  describe("clean", () => {
-    const data = JSON.parse(
-      `{"uuid":"5cdcd318-0219-49a8-9dc1-cd2df5f02875","form":{"what-is-your-role":{"data":{"type":"details","fieldsets":{"role":{"name":"role","value":"Recipient","label":"Role","order":1}}}},"children-subform":{"data":{"type":"list","items":[{"uuid":"f47d2410-8ab9-4bb0-9571-9fc5211416a9","form":{"name":{"data":{"type":"details","fieldsets":{"firstName":{"name":"firstName","value":"asdf","label":"First name","order":1},"lastName":{"name":"lastName","value":"asdf","label":"Last name","order":2}}}},"alternate-name":{"data":{"type":"details","fieldsets":{"alternate-name":{"name":"alternate-name","value":"asdf","label":"Alternate name","order":1}}}},"dob":{"heading":""},"complete":{"heading":"Complete"}},"history":["name","alternate-name","dob","complete"],"editting":"","lastModified":"2025-01-28T19:50:56.255Z","status":"not-started"},{"uuid":"9d3c44fe-2a38-4faf-a684-8d93799bbf8b","form":{"name":{"data":{"type":"details","fieldsets":{"firstName":{"name":"firstName","value":"dsfdfgh","label":"First name","order":1},"lastName":{"name":"lastName","value":"dfgh","label":"Last name","order":2}}}},"alternate-name":{"data":{"type":"details","fieldsets":{"alternate-name":{"name":"alternate-name","value":"dfgh","label":"Alternate name","order":1}}}}},"history":["name","alternate-name","dob","complete"],"editting":"","lastModified":"2025-01-28T19:51:02.919Z","status":"not-started"}]}},"address":{"data":{"type":"details","fieldsets":{"city":{"name":"city","value":"dfgh","label":"City","order":1},"address":{"name":"address","value":"dfgh","label":"Address","order":2},"postal-code":{"name":"postal-code","value":"dfg","label":"Postal Code","order":3}}}},"summary":{"heading":"Summary"},"index":{"heading":""}},"history":["children-subform","address","summary"],"editting":"","status":"not-started"}`,
-    );
-
-    it("should clean the data", () => {
-      const cleaned = pfc.clean(data);
-      expect(data.history.length).toBe(3);
-      expect(data.history.length).toEqual(Object.keys(cleaned).length);
-    });
-  });
-});
diff --git a/libs/common/src/lib/public-form-controller.ts b/libs/common/src/lib/public-form-controller.ts
deleted file mode 100644
index 14f9fb72a..000000000
--- a/libs/common/src/lib/public-form-controller.ts
+++ /dev/null
@@ -1,384 +0,0 @@
-import { FieldsetItemState, FieldValidator } from "./validators";
-import {
-  GoabFieldsetItemValue, GoabFormDispatchOn,
-} from "./common";
-import { relay, dispatch } from "./messaging/messaging";
-
-export type FormStatus = "not-started" | "incomplete" | "complete";
-
-// Public type to define the state of the form
-export type AppState<T> = {
-  uuid: string;
-  form: Record<string, Fieldset<T>>;
-  history: string[];
-  editting: string;
-  lastModified?: Date;
-  status: FormStatus;
-  currentFieldset?: { id: T; dispatchType: GoabFormDispatchOn };
-};
-
-export type Fieldset<T> = {
-  heading: string;
-  data:
-    | { type: "details"; fieldsets: Record<string, FieldsetItemState> }
-    | { type: "list"; items: AppState<T>[] };
-};
-
-export class PublicFormController<T> {
-  state?: AppState<T> | AppState<T>[];
-  _formData?: Record<string, string> = undefined;
-  _formRef?: HTMLElement = undefined;
-  private _isCompleting = false;
-
-  constructor(private type: "details" | "list") {}
-
-  // Obtain reference to the form element
-  init(e: Event) {
-    // FIXME: This condition should not be needed, but currently it is the only way to get things working
-    if (this._formRef) {
-      console.warn("init: form element has already been set");
-      return;
-    }
-    this._formRef = (e as CustomEvent).detail.el;
-
-    this.state = {
-      uuid: crypto.randomUUID(),
-      form: {},
-      history: [],
-      editting: "",
-      status: "not-started",
-    };
-  }
-
-  initList(e: Event) {
-    this._formRef = (e as CustomEvent).detail.el;
-    this.state = [];
-  }
-
-  // Public method to allow for the initialization of the state
-  initState(state?: string | AppState<T> | AppState<T>[], callback?: () => void) {
-    relay(this._formRef, "external::init:state", state);
-
-    if (typeof state === "string") {
-      this.state = JSON.parse(state);
-    } else if (!Array.isArray(state)) {
-      this.state = state;
-    }
-
-    if (callback) {
-      setTimeout(callback, 200);
-    }
-  }
-
-  updateListState(e: Event) {
-    const detail = (e as CustomEvent).detail;
-
-    if (!Array.isArray(detail.data)) {
-      return;
-    }
-
-    this.state = detail.data;
-  }
-
-  #updateObjectListState(detail: { data: AppState<T>[]; index: number; id: string }) {
-    if (!Array.isArray(detail.data)) {
-      return;
-    }
-
-    if (Array.isArray(this.state)) {
-      return;
-    }
-
-    this.state = {
-      ...this.state,
-      form: {
-        ...(this.state?.form || {}),
-        [detail.id]: detail.data,
-      },
-    } as AppState<T>;
-  }
-
-  updateObjectState(e: Event) {
-    if (Array.isArray(this.state)) {
-      return;
-    }
-
-    const detail = (e as CustomEvent).detail;
-    if (detail.type === "list") {
-      // form state being updated with subform array data
-      this.state = {
-        ...this.state,
-        form: { ...(this.state?.form || {}), [detail.id]: detail.data },
-      } as AppState<T>;
-    } else {
-      // form state being updated with form data
-      this.state = {
-        ...this.state,
-        ...detail.data,
-        form: { ...(this.state?.form || {}), ...detail.data.form },
-        history: detail.data.history,
-      } as AppState<T>;
-    }
-  }
-
-  getStateList(): Record<string, string>[] {
-    if (!this.state) {
-      return [];
-    }
-    if (!Array.isArray(this.state)) {
-      console.warn(
-        "Utils:getStateList: unable to update the state of a non-multi form type",
-        this.state,
-      );
-      return [];
-    }
-    if (this.state.length === 0) {
-      return [];
-    }
-
-    return this.state.map((s) => {
-      return Object.values(s.form)
-        .filter((item) => {
-          return item?.data?.type === "details";
-        })
-        .map((item) => {
-          return (item.data.type === "details" && item.data?.fieldsets) || {};
-        })
-        .reduce(
-          (acc, item) => {
-            for (const [key, value] of Object.entries(item)) {
-              acc[key] = value.value;
-            }
-            return acc;
-          },
-          {} as Record<string, string>,
-        );
-    });
-  }
-
-  // getStateItems(group: string): Record<string, FieldsetItemState>[] {
-  //   if (Array.isArray(this.state)) {
-  //     console.error(
-  //       "Utils:getStateItems: unable to update the state of a multi form type",
-  //     );
-  //     return [];
-  //   }
-  //   if (!this.state) {
-  //     console.error("Utils:getStateItems: state has not yet been set");
-  //     return [];
-  //   }
-  //
-  //   const data = this.state.form[group].data;
-  //   if (data.type !== "list") {
-  //     return [];
-  //   }
-  //
-  //   return data.items.;
-  // }
-
-  // Public method to allow for the retrieval of the state value
-  getStateValue(group: string, key: string): string {
-    if (Array.isArray(this.state)) {
-      console.error("getStateValue: unable to update the state of a multi form type");
-      return "";
-    }
-    if (!this.state) {
-      console.error("getStateValue: state has not yet been set");
-      return "";
-    }
-
-    const data = this.state.form[group].data;
-    if (data.type !== "details") {
-      return "";
-    }
-
-    return data.fieldsets[key].value;
-  }
-
-  // Public method to allow for the continuing to the next page
-  continueTo(next: T | undefined) {
-    if (!next) {
-      console.error("continueTo [name] is undefined");
-      return;
-    }
-    // Relay the continue message to the form element which will
-    // set the visibility of the fieldsets
-    // FIXME: this makes a call to the subform instead of the form
-    relay<{ next: T }>(this._formRef, "external::continue", { next });
-  }
-
-  // Public method to perform validation and send the appropriate messages to the form elements
-  validate(
-    e: Event,
-    field: string,
-    validators: FieldValidator[],
-    options?: { grouped: boolean },
-  ): [boolean, GoabFieldsetItemValue] {
-    const { el, state, cancelled } = (e as CustomEvent).detail;
-    const value = state?.[field]?.value;
-
-    window.scrollTo({ top: 0, behavior: "smooth" });
-
-    if (cancelled) {
-      return [true, value];
-    }
-
-    for (const validator of validators) {
-      const msg = validator(value);
-      this.#dispatchError(el, field, msg, options);
-      if (msg) {
-        return [false, ""];
-      }
-    }
-    return [true, value];
-  }
-
-  /**
-   * Validates a group of fields ensuring that at least `minPassCount` of the items within the group
-   * passes. This is useful in the scenario when n number fields are required out of n+m number of fields.
-   *
-   * @param {string[]} fields - An array of field names to be validated.
-   * @param {Event} e - The event object associated with the validation trigger.
-   * @param {FieldValidator[]} validators - An array of validator functions to apply to the fields.
-   * @return {[number, Record<string, boolean>]} - Returns back the number of fields that passed and a record of the fields and their pass status.
-   */
-  validateGroup(
-    e: Event,
-    fields: string[],
-    validators: FieldValidator[],
-  ): [number, Record<string, boolean>] {
-    let passCount = 0;
-    const validGroups = {} as Record<string, boolean>;
-
-    for (const field of fields) {
-      const [_valid] = this.validate(e, field, validators, { grouped: true });
-      if (_valid) {
-        validGroups[field] = true;
-        passCount++;
-      }
-    }
-
-    return [passCount, validGroups];
-  }
-
-  edit(index: number) {
-    relay(this._formRef, "external::alter:state", { index, operation: "edit" });
-  }
-
-  remove(index: number) {
-    relay(this._formRef, "external::alter:state", {
-      index,
-      operation: "remove",
-    });
-  }
-
-  /**
-   * Completes the form and triggers the onComplete callback.
-   * This method should be used when you want to complete a form without navigating to a summary page.
-   *
-   * @important Developers must validate the form before calling this method.
-   *
-   * @example
-   * // Validate first, then complete
-   * const [isValid] = this.validate(e, "firstName", [
-   *   requiredValidator("First name is required.")
-   * ]);
-   * if (isValid) {
-   *   this.complete();
-   * }
-   * @returns void
-   */
-  complete() {
-    if (!this._formRef) {
-      console.error("complete: form ref is not set");
-      return;
-    }
-
-    if (this._isCompleting) {
-      console.warn("complete: completion already in progress");
-      return;
-    }
-
-    this._isCompleting = true;
-    relay(this._formRef, "fieldset::submit", null, { bubbles: true });
-    this._isCompleting = false;
-  }
-
-  /**
-   * Completes a subform and returns control to the parent form.
-   * This method should be used when working with subforms that need to complete without a summary page.
-   *
-   * @important Developers must validate the subform before calling this method.
-   *
-   * @example
-   * // Validate first, then complete the subform
-   * const [isValid] = this._childFormController.validate(e, "fullName", [
-   *   requiredValidator("Please enter the dependent's full name.")
-   * ]);
-   * if (isValid) {
-   *   this._childFormController.completeSubform();
-   * }
-   * @returns void
-   */
-  completeSubform() {
-    if (!this._formRef) {
-      console.error("completeSubform: form ref is not set");
-      return;
-    }
-
-    if (this._isCompleting) {
-      console.warn("completeSubform: completion already in progress");
-      return;
-    }
-    // Capture form reference to avoid TypeScript undefined error in closures
-    const formRef = this._formRef;
-
-    // Set flag to prevent multiple calls
-    this._isCompleting = true;
-
-    const stateChangeHandler = (e: Event) => {
-      formRef.removeEventListener('_stateChange', stateChangeHandler);
-
-      // Now we know state is updated, safe to complete
-      // The _formRef points to the inner form within the SubForm
-      // We need to trigger the form's completion which will be caught by SubForm's onChildFormComplete
-      dispatch(formRef, "_complete", {}, { bubbles: true });
-      this._isCompleting = false;
-    };
-
-    formRef.addEventListener('_stateChange', stateChangeHandler);
-
-    dispatch(formRef, "_continue", null, { bubbles: true });
-  }
-
-  // Private method to dispatch the error message to the form element
-  #dispatchError(
-    el: HTMLElement,
-    name: string,
-    msg: string,
-    options?: { grouped: boolean },
-  ) {
-    el.dispatchEvent(
-      new CustomEvent("msg", {
-        composed: true,
-        detail: {
-          action: "external::set:error",
-          data: {
-            name,
-            msg,
-            grouped: options?.grouped,
-          },
-        },
-      }),
-    );
-  }
-
-  // removes any data collected that doesn't correspond with the final history path
-  clean(data: AppState<T>) {
-    return data.history.reduce<Record<string, unknown>>((acc, fieldsetId) => {
-      acc[fieldsetId] = data.form[fieldsetId];
-      return acc;
-    }, {});
-  }
-}
-
diff --git a/libs/common/src/lib/public-form.ts b/libs/common/src/lib/public-form.ts
new file mode 100644
index 000000000..1a5b8c496
--- /dev/null
+++ b/libs/common/src/lib/public-form.ts
@@ -0,0 +1,34 @@
+import { FieldValidator } from "./validators";
+
+// TODO: right now the value is a string, but for the subform we need to allow for an array
+export type PFPage = {
+  _id?: `${string}-${string}-${string}-${string}-${string}` | undefined;
+  [key: string]: string | undefined;
+};
+
+export type PFState = {
+  data: Record<string, PFPage | PFPage[]>;
+  dataBuffer: PFPage; // Record<string, string>;
+  history: string[];
+};
+
+export type PFSummary = Omit<PFState, "dataBuffer"> & {
+  outline: Omit<PFOutline, "next" | "validators">;
+};
+
+export type PFField = {
+  label: string;
+  formatter?: (input: string) => string;
+  hideInSummary: "always" | "ifBlank" | "never";
+};
+
+export type PFOutline = Record<string, PFOutlineItem>;
+
+export type PFOutlineItem = {
+  subform: boolean;
+  props: Record<string, string>;
+  fields: Record<string, PFField>;
+  summarize?: (page: PFPage) => Record<string, string>;
+  next: string | ((state: PFState) => string);
+  validators: Record<string, FieldValidator[]>;
+};
diff --git a/libs/common/src/lib/validators.ts b/libs/common/src/lib/validators.ts
index 451d19b09..b08daf930 100644
--- a/libs/common/src/lib/validators.ts
+++ b/libs/common/src/lib/validators.ts
@@ -35,10 +35,10 @@ export class FormValidator {
   }
 }
 
-export function birthDayValidator(): FieldValidator[] {
+export function BirthDayValidator(): FieldValidator[] {
   return [
-    requiredValidator("Day is required"),
-    numericValidator({
+    RequiredValidator("Day is required"),
+    NumericValidator({
       min: 1,
       max: 31,
       minMsg: "Day must be between 1 and 31",
@@ -47,10 +47,10 @@ export function birthDayValidator(): FieldValidator[] {
   ];
 }
 
-export function birthMonthValidator(): FieldValidator[] {
+export function BirthMonthValidator(): FieldValidator[] {
   return [
-    requiredValidator("Month is required"),
-    numericValidator({
+    RequiredValidator("Month is required"),
+    NumericValidator({
       min: 0,
       max: 11,
       minMsg: "Month must be between Jan and Dec",
@@ -59,11 +59,11 @@ export function birthMonthValidator(): FieldValidator[] {
   ];
 }
 
-export function birthYearValidator(): FieldValidator[] {
+export function BirthYearValidator(): FieldValidator[] {
   const maxYear = new Date().getFullYear();
   return [
-    requiredValidator("Year is required"),
-    numericValidator({
+    RequiredValidator("Year is required"),
+    NumericValidator({
       min: 1900,
       max: maxYear,
       minMsg: "Year must be greater than 1900",
@@ -72,7 +72,7 @@ export function birthYearValidator(): FieldValidator[] {
   ];
 }
 
-export function requiredValidator(msg?: string): FieldValidator {
+export function RequiredValidator(msg?: string): FieldValidator {
   return (value: unknown) => {
     msg = msg || "Required";
 
@@ -86,17 +86,17 @@ export function requiredValidator(msg?: string): FieldValidator {
   };
 }
 
-export function phoneNumberValidator(msg?: string): FieldValidator {
+export function PhoneNumberValidator(msg?: string): FieldValidator {
   const regex = new RegExp(/^\+?[\d-() ]{10,18}$/);
-  return regexValidator(regex, msg || "Invalid phone number");
+  return RegexValidator(regex, msg || "Invalid phone number");
 }
 
-export function emailValidator(msg?: string): FieldValidator {
+export function EmailValidator(msg?: string): FieldValidator {
   // emailregex.com
   const regex = new RegExp(
     /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
   );
-  return regexValidator(regex, msg || "Invalid email address");
+  return RegexValidator(regex, msg || "Invalid email address");
 }
 
 // SIN# Generator: https://singen.ca
@@ -132,14 +132,14 @@ export function SINValidator(): FieldValidator {
   };
 }
 
-export function postalCodeValidator(): FieldValidator {
-  return regexValidator(
+export function PostalCodeValidator(): FieldValidator {
+  return RegexValidator(
     /^[ABCEGHJ-NPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ -]?\d[ABCEGHJ-NPRSTV-Z]\d$/i,
     "Invalid postal code",
   );
 }
 
-export function regexValidator(regex: RegExp, msg: string): FieldValidator {
+export function RegexValidator(regex: RegExp, msg: string): FieldValidator {
   return (value: unknown) => {
     if (!value) {
       return "";
@@ -160,7 +160,7 @@ interface DateValidatorOptions {
   max?: Date;
 }
 
-export function dateValidator({
+export function DateValidator({
   invalidMsg,
   minMsg,
   maxMsg,
@@ -207,7 +207,7 @@ interface NumericValidatorOptions {
   max?: number;
 }
 
-export function numericValidator({
+export function NumericValidator({
   invalidTypeMsg,
   minMsg,
   maxMsg,
@@ -251,7 +251,7 @@ interface LengthValidatorOptions {
   min?: number;
 }
 
-export function lengthValidator({
+export function LengthValidator({
   invalidTypeMsg,
   minMsg,
   maxMsg,
diff --git a/libs/react-components/src/index.ts b/libs/react-components/src/index.ts
index 693d58c97..86ef45e0c 100644
--- a/libs/react-components/src/index.ts
+++ b/libs/react-components/src/index.ts
@@ -25,7 +25,6 @@ export * from "./lib/file-upload-input/file-upload-input";
 export * from "./lib/footer/footer";
 export * from "./lib/footer-meta-section/footer-meta-section";
 export * from "./lib/footer-nav-section/footer-nav-section";
-export * from "./lib/form/fieldset";
 export * from "./lib/form/public-form-page";
 export * from "./lib/form/public-form-summary";
 export * from "./lib/form/public-form";
@@ -73,4 +72,3 @@ export * from "./lib/three-column-layout/three-column-layout";
 export * from "./lib/tooltip/tooltip";
 export * from "./lib/two-column-layout/two-column-layout";
 export * from "./lib/filter-chip/filter-chip";
-export * from "./lib/use-public-form-controller";
diff --git a/libs/react-components/src/lib/form/fieldset.tsx b/libs/react-components/src/lib/form/fieldset.tsx
deleted file mode 100644
index 3710714c1..000000000
--- a/libs/react-components/src/lib/form/fieldset.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { ReactNode, useEffect, useRef, type JSX } from "react";
-import {
-  DataAttributes,
-  GoabFieldsetOnContinueDetail,
-  GoabFormDispatchOn,
-} from "@abgov/ui-components-common";
-import { transformProps, kebab } from "../common/extract-props";
-
-interface WCProps {
-  id?: string;
-  "section-title"?: string;
-  "dispatch-on"?: string;
-}
-
-declare module "react" {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      "goa-fieldset": WCProps & React.HTMLAttributes<HTMLElement> & {
-        ref: React.RefObject<HTMLElement | null>;
-      };
-    }
-  }
-}
-
-interface GoabFieldsetProps extends DataAttributes {
-  id?: string;
-  sectionTitle?: string;
-  dispatchOn?: GoabFormDispatchOn;
-  onContinue?: (event: GoabFieldsetOnContinueDetail) => void;
-  children: ReactNode;
-}
-
-export function GoabFieldset({
-  onContinue,
-  children,
-  ...rest
-}: GoabFieldsetProps): JSX.Element {
-  const ref = useRef<HTMLElement>(null);
-
-  const _props = transformProps<WCProps>(rest, kebab);
-
-  useEffect(() => {
-    if (!ref.current) return;
-    const current = ref.current;
-
-    const continueListener = (e: Event) => {
-      const event = (e as CustomEvent<GoabFieldsetOnContinueDetail>).detail;
-      return onContinue?.(event);
-    };
-
-    if (onContinue) {
-      current.addEventListener("_continue", continueListener);
-    }
-
-    return () => {
-      if (onContinue) {
-        current.removeEventListener("_continue", continueListener);
-      }
-    };
-  }, [ref, onContinue]);
-
-  return (
-    <goa-fieldset ref={ref} {..._props}>
-      {children}
-    </goa-fieldset>
-  );
-}
-
-export default GoabFieldset;
diff --git a/libs/react-components/src/lib/form/public-subform-index.spec.tsx b/libs/react-components/src/lib/form/public-subform-index.spec.tsx
deleted file mode 100644
index 9f792d493..000000000
--- a/libs/react-components/src/lib/form/public-subform-index.spec.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, it, expect } from "vitest";
-import { GoabPublicSubformIndex } from "./public-subform-index";
-
-describe("GoabPublicSubformIndex", () => {
-  it("renders with all properties", () => {
-    const { baseElement } = render(
-      <GoabPublicSubformIndex
-        heading="Test Heading"
-        sectionTitle="Test Section Title"
-        actionButtonText="Add Item"
-        buttonVisibility="visible"
-        mt="s"
-        mr="m"
-        mb="l"
-        ml="xl"
-      >
-        <div data-testid="test-content">Test content</div>
-      </GoabPublicSubformIndex>
-    );
-
-    const el = baseElement.querySelector("goa-public-subform-index");
-    expect(el?.getAttribute("heading")).toBe("Test Heading");
-    expect(el?.getAttribute("section-title")).toBe("Test Section Title");
-    expect(el?.getAttribute("action-button-text")).toBe("Add Item");
-    expect(el?.getAttribute("button-visibility")).toBe("visible");
-    expect(el?.getAttribute("slot")).toBe("subform-index");
-    expect(el?.getAttribute("mt")).toBe("s");
-    expect(el?.getAttribute("mr")).toBe("m");
-    expect(el?.getAttribute("mb")).toBe("l");
-    expect(el?.getAttribute("ml")).toBe("xl");
-
-    // Content is rendered
-    expect(baseElement.querySelector("[data-testid='test-content']")).toBeTruthy();
-  });
-
-  it("renders with default values", () => {
-    const { baseElement } = render(
-      <GoabPublicSubformIndex>
-        <div>Test content</div>
-      </GoabPublicSubformIndex>
-    );
-
-    const el = baseElement.querySelector("goa-public-subform-index");
-    expect(el?.getAttribute("heading")).toBe("");
-    expect(el?.getAttribute("section-title")).toBe("");
-    expect(el?.getAttribute("action-button-text")).toBe("");
-    expect(el?.getAttribute("button-visibility")).toBe("hidden");
-    expect(el?.getAttribute("slot")).toBe("subform-index");
-  });
-
-  it("renders with hidden button visibility", () => {
-    const { baseElement } = render(
-      <GoabPublicSubformIndex
-        heading="Test Heading"
-        buttonVisibility="hidden"
-      >
-        <div>Test content</div>
-      </GoabPublicSubformIndex>
-    );
-
-    const el = baseElement.querySelector("goa-public-subform-index");
-    expect(el?.getAttribute("button-visibility")).toBe("hidden");
-  });
-
-  it("renders complex children content", () => {
-    const { baseElement } = render(
-      <GoabPublicSubformIndex heading="Dependents List">
-        <p data-testid="description">
-          Please add information about your dependents.
-        </p>
-        <table data-testid="dependents-table">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>John Doe</td>
-              <td>
-                <button data-testid="edit-btn">Edit</button>
-                <button data-testid="remove-btn">Remove</button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </GoabPublicSubformIndex>
-    );
-
-    expect(baseElement.querySelector("[data-testid='description']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='dependents-table']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='edit-btn']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='remove-btn']")).toBeTruthy();
-  });
-
-  it("handles empty string properties", () => {
-    const { baseElement } = render(
-      <GoabPublicSubformIndex
-        heading=""
-        sectionTitle=""
-        actionButtonText=""
-      >
-        <div>Test content</div>
-      </GoabPublicSubformIndex>
-    );
-
-    const el = baseElement.querySelector("goa-public-subform-index");
-    expect(el?.getAttribute("heading")).toBe("");
-    expect(el?.getAttribute("section-title")).toBe("");
-    expect(el?.getAttribute("action-button-text")).toBe("");
-  });
-
-  it("handles special characters in text properties", () => {
-    const specialTexts = {
-      heading: "Dependents & Family",
-      sectionTitle: "Section > Details",
-      actionButtonText: "Add \"New\" Item",
-    };
-
-    const { baseElement } = render(
-      <GoabPublicSubformIndex
-        heading={specialTexts.heading}
-        sectionTitle={specialTexts.sectionTitle}
-        actionButtonText={specialTexts.actionButtonText}
-      >
-        <div>Test content</div>
-      </GoabPublicSubformIndex>
-    );
-
-    const el = baseElement.querySelector("goa-public-subform-index");
-    expect(el?.getAttribute("heading")).toBe(specialTexts.heading);
-    expect(el?.getAttribute("section-title")).toBe(specialTexts.sectionTitle);
-    expect(el?.getAttribute("action-button-text")).toBe(specialTexts.actionButtonText);
-  });
-
-  it("always renders with slot='subform-index' attribute", () => {
-    const { baseElement } = render(
-      <GoabPublicSubformIndex heading="Any heading">
-        <div>Any content</div>
-      </GoabPublicSubformIndex>
-    );
-
-    const el = baseElement.querySelector("goa-public-subform-index");
-    expect(el?.getAttribute("slot")).toBe("subform-index");
-  });
-
-  it("renders nested components correctly", () => {
-    const { baseElement } = render(
-      <GoabPublicSubformIndex heading="Task List">
-        <div data-testid="text-content">
-          Please complete the following tasks:
-        </div>
-        <div data-testid="task-item-1">
-          <span>Task 1: Complete profile</span>
-          <button>Edit</button>
-        </div>
-        <div data-testid="task-item-2">
-          <span>Task 2: Upload documents</span>
-          <button>Remove</button>
-        </div>
-      </GoabPublicSubformIndex>
-    );
-
-    expect(baseElement.querySelector("[data-testid='text-content']")?.textContent)
-      .toContain("Please complete the following tasks:");
-    expect(baseElement.querySelector("[data-testid='task-item-1']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='task-item-2']")).toBeTruthy();
-    expect(baseElement.querySelectorAll("button")).toHaveLength(2);
-  });
-
-  it("should pass data-grid attributes", () => {
-    const { baseElement } = render(
-      <GoabPublicSubformIndex
-        heading="Test Index"
-        data-grid="cell"
-      >
-        <div>Test content</div>
-      </GoabPublicSubformIndex>
-    );
-    const el = baseElement.querySelector("goa-public-subform-index");
-    expect(el?.getAttribute("data-grid")).toBe("cell");
-  });
-});
diff --git a/libs/react-components/src/lib/form/public-subform.spec.tsx b/libs/react-components/src/lib/form/public-subform.spec.tsx
deleted file mode 100644
index f0aa1ec9e..000000000
--- a/libs/react-components/src/lib/form/public-subform.spec.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-import { render, cleanup } from "@testing-library/react";
-import { describe, it, expect, afterEach } from "vitest";
-import { GoabPublicSubform } from "./public-subform";
-
-describe("GoabPublicSubform", () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  it("renders with all properties", () => {
-    const { baseElement } = render(
-      <GoabPublicSubform
-        id="test-subform"
-        name="test-subform-name"
-        continueMsg="Continue to next step"
-        mt="s"
-        mr="m"
-        mb="l"
-        ml="xl"
-      >
-        <div data-testid="test-content">Test content</div>
-      </GoabPublicSubform>
-    );
-
-    const el = baseElement.querySelector("goa-public-subform");
-    expect(el?.getAttribute("id")).toBe("test-subform");
-    expect(el?.getAttribute("name")).toBe("test-subform-name");
-    expect(el?.getAttribute("continue-msg")).toBe("Continue to next step");
-    expect(el?.getAttribute("mt")).toBe("s");
-    expect(el?.getAttribute("mr")).toBe("m");
-    expect(el?.getAttribute("mb")).toBe("l");
-    expect(el?.getAttribute("ml")).toBe("xl");
-
-    // Content is rendered
-    expect(baseElement.querySelector("[data-testid='test-content']")).toBeTruthy();
-  });
-
-  it("renders with default values", () => {
-    const { baseElement } = render(
-      <GoabPublicSubform>
-        <div>Test content</div>
-      </GoabPublicSubform>
-    );
-
-    const el = baseElement.querySelector("goa-public-subform");
-    expect(el?.getAttribute("id")).toBe("");
-    expect(el?.getAttribute("name")).toBe("");
-    expect(el?.getAttribute("continue-msg")).toBe("");
-  });
-
-  it("renders without margin attributes when undefined", () => {
-    const { baseElement } = render(
-      <GoabPublicSubform>
-        <div>Test content</div>
-      </GoabPublicSubform>
-    );
-
-    const el = baseElement.querySelector("goa-public-subform");
-    expect(el?.hasAttribute("mt")).toBe(false);
-    expect(el?.hasAttribute("mr")).toBe(false);
-    expect(el?.hasAttribute("mb")).toBe(false);
-    expect(el?.hasAttribute("ml")).toBe(false);
-  });
-
-  it("renders complex children content", () => {
-    const { baseElement } = render(
-      <GoabPublicSubform id="complex-subform">
-        <div data-testid="subform-index">
-          <h2>Dependents List</h2>
-          <table>
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Age</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>John Doe</td>
-                <td>10</td>
-                <td>
-                  <button data-testid="edit-btn">Edit</button>
-                  <button data-testid="remove-btn">Remove</button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div data-testid="form-page">
-          <h3>Add New Dependent</h3>
-          <input data-testid="name-input" placeholder="Full name" />
-          <input data-testid="age-input" placeholder="Age" />
-          <button data-testid="save-btn">Save</button>
-        </div>
-      </GoabPublicSubform>
-    );
-
-    expect(baseElement.querySelector("[data-testid='subform-index']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='form-page']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='edit-btn']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='remove-btn']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='name-input']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='save-btn']")).toBeTruthy();
-  });
-
-  it("handles empty string properties", () => {
-    const { baseElement } = render(
-      <GoabPublicSubform
-        id=""
-        name=""
-        continueMsg=""
-      >
-        <div>Test content</div>
-      </GoabPublicSubform>
-    );
-
-    const el = baseElement.querySelector("goa-public-subform");
-    expect(el?.getAttribute("id")).toBe("");
-    expect(el?.getAttribute("name")).toBe("");
-    expect(el?.getAttribute("continue-msg")).toBe("");
-  });
-
-  it("renders with all margin values", () => {
-    const marginValues = ["none", "3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl"];
-
-    marginValues.forEach(margin => {
-      const { baseElement } = render(
-        <GoabPublicSubform
-          mt={margin as any}
-          mr={margin as any}
-          mb={margin as any}
-          ml={margin as any}
-        >
-          <div>Test content</div>
-        </GoabPublicSubform>
-      );
-
-      const el = baseElement.querySelector("goa-public-subform");
-      expect(el?.getAttribute("mt")).toBe(margin);
-      expect(el?.getAttribute("mr")).toBe(margin);
-      expect(el?.getAttribute("mb")).toBe(margin);
-      expect(el?.getAttribute("ml")).toBe(margin);
-
-      cleanup();
-    });
-  });
-
-  it("handles special characters in text properties", () => {
-    const specialTexts = {
-      id: "subform-id-123",
-      name: "form & subform",
-      continueMsg: "Continue > Next Step",
-    };
-
-    const { baseElement } = render(
-      <GoabPublicSubform
-        id={specialTexts.id}
-        name={specialTexts.name}
-        continueMsg={specialTexts.continueMsg}
-      >
-        <div>Test content</div>
-      </GoabPublicSubform>
-    );
-
-    const el = baseElement.querySelector("goa-public-subform");
-    expect(el?.getAttribute("id")).toBe(specialTexts.id);
-    expect(el?.getAttribute("name")).toBe(specialTexts.name);
-    expect(el?.getAttribute("continue-msg")).toBe(specialTexts.continueMsg);
-  });
-
-  it("handles camelCase to kebab-case conversion correctly", () => {
-    const { baseElement } = render(
-      <GoabPublicSubform continueMsg="Test message">
-        <div>Test content</div>
-      </GoabPublicSubform>
-    );
-
-    const el = baseElement.querySelector("goa-public-subform");
-    expect(el?.getAttribute("continue-msg")).toBe("Test message");
-    expect(el?.hasAttribute("continueMsg")).toBe(false);
-  });
-
-  it("renders nested subform components correctly", () => {
-    const { baseElement } = render(
-      <GoabPublicSubform name="parent-subform">
-        <div data-testid="subform-index" slot="subform-index">
-          <h2>List View</h2>
-          <div data-testid="item-list">
-            <div>Item 1</div>
-            <div>Item 2</div>
-          </div>
-        </div>
-        <div data-testid="form-pages">
-          <div data-testid="page-1">
-            <h3>Page 1</h3>
-            <input type="text" />
-          </div>
-          <div data-testid="page-2">
-            <h3>Page 2</h3>
-            <textarea></textarea>
-          </div>
-        </div>
-      </GoabPublicSubform>
-    );
-
-    expect(baseElement.querySelector("[data-testid='subform-index']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='form-pages']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='item-list']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='page-1']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='page-2']")).toBeTruthy();
-    expect(baseElement.querySelectorAll("input")).toHaveLength(1);
-    expect(baseElement.querySelectorAll("textarea")).toHaveLength(1);
-  });
-
-  it("should pass data-grid attributes", () => {
-    const { baseElement } = render(
-      <GoabPublicSubform
-        name="test-subform"
-        data-grid="cell"
-      >
-        <div>Test content</div>
-      </GoabPublicSubform>
-    );
-    const el = baseElement.querySelector("goa-public-subform");
-    expect(el?.getAttribute("data-grid")).toBe("cell");
-  });
-});
diff --git a/libs/react-components/src/lib/use-public-form-controller.spec.ts b/libs/react-components/src/lib/use-public-form-controller.spec.ts
deleted file mode 100644
index 1a460aad4..000000000
--- a/libs/react-components/src/lib/use-public-form-controller.spec.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { renderHook } from "@testing-library/react";
-import { usePublicFormController } from "./use-public-form-controller";
-
-describe("usePublicFormController", () => {
-  const mockFormElement = document.createElement("form");
-  const mockInitEvent = {
-    el: mockFormElement
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it("should initialize with empty state", () => {
-    const { result } = renderHook(() => usePublicFormController("details"));
-    expect(result.current.state).toBe(undefined);
-  });
-
-  it("should handle null element during initialization", () => {
-    const consoleError = vi.spyOn(console, "error");
-    const { result } = renderHook(() => usePublicFormController("details"));
-
-    result.current.init({ el: undefined as unknown as HTMLFormElement });
-
-    expect(consoleError).toHaveBeenCalledWith("El is null during initialization");
-  });
-
-  it("should initialize list state", () => {
-    const { result } = renderHook(() => usePublicFormController("details"));
-    const mockEvent = new CustomEvent("init", {
-      detail: { el: mockFormElement }
-    });
-
-    result.current.initList(mockEvent);
-
-    expect(result.current.getStateList()).toEqual([]);
-  });
-
-  it("should handle null element during list initialization", () => {
-    const consoleError = vi.spyOn(console, "error");
-    const { result } = renderHook(() => usePublicFormController("details"));
-    const mockEvent = new CustomEvent("init", {
-      detail: { el: null }
-    });
-
-    result.current.initList(mockEvent);
-
-    expect(consoleError).toHaveBeenCalledWith("El is null during list initialization");
-  });
-
-  it("should initialize state with callback", () => {
-    const { result } = renderHook(() => usePublicFormController("details"));
-    const mockCallback = vi.fn();
-    const mockState = {
-      uuid: "test-uuid",
-      form: {
-        testForm: {
-          heading: "Test Form",
-          data: {
-            type: "details" as const,
-            fieldsets: {
-              testField: {
-                name: "testField",
-                label: "Test Field",
-                value: "test value",
-                order: 1
-              }
-            }
-          }
-        }
-      },
-      history: [],
-      editting: "",
-      status: "not-started" as const
-    };
-
-    result.current.init(mockInitEvent);
-
-    result.current.initState(mockState, mockCallback);
-
-    return new Promise<void>((resolve) => {
-      setTimeout(() => {
-        expect(mockCallback).toHaveBeenCalled();
-        resolve();
-      }, 300);
-    });
-  });
-
-  it("should handle state initialization without form reference", () => {
-    const consoleError = vi.spyOn(console, "error");
-    const { result } = renderHook(() => usePublicFormController("details"));
-    const mockState = {
-      uuid: "test-uuid",
-      form: {},
-      history: [],
-      editting: "",
-      status: "not-started" as const
-    };
-
-    result.current.initState(mockState);
-
-    expect(consoleError).toHaveBeenCalledWith("Form ref not set.");
-  });
-
-  it("should validate field value", () => {
-    const { result } = renderHook(() => usePublicFormController("details"));
-    const mockValidator = vi.fn().mockReturnValue([true, "test value"]);
-    const mockEvent = {
-      el: document.createElement("div"),
-      state: {
-        testField: {
-          name: "testField",
-          label: "Test Field",
-          value: "test value",
-          order: 1
-        }
-      },
-      cancelled: false
-    };
-
-    const [isValid, value] = result.current.validate(mockEvent, "testField", [mockValidator]);
-
-    expect(isValid).toBe(true);
-    expect(value).toBe("test value");
-    expect(mockValidator).toHaveBeenCalledWith("test value");
-  });
-});
diff --git a/libs/react-components/src/lib/use-public-form-controller.ts b/libs/react-components/src/lib/use-public-form-controller.ts
deleted file mode 100644
index f18497b2b..000000000
--- a/libs/react-components/src/lib/use-public-form-controller.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import { useRef, useEffect, useState, useCallback } from 'react';
-import {
-  AppState,
-  GoabFieldsetItemValue,
-  FieldValidator, PublicFormController,
-} from "@abgov/ui-components-common";
-
-function usePublicFormController<T>(type: "details" | "list" = "details") {
-  const controllerRef = useRef<PublicFormController<T>>(new PublicFormController<T>(type));
-  const [state, setState] = useState<AppState<T> | AppState<T>[] | undefined>(undefined);
-
-  useEffect(() => {
-    // Create a proxy that updates React state when controller's state changes
-    const originalStateGetter = Object.getOwnPropertyDescriptor(
-      Object.getPrototypeOf(controllerRef.current),
-      'state'
-    )?.get;
-
-    const originalStateSetter = Object.getOwnPropertyDescriptor(
-      Object.getPrototypeOf(controllerRef.current),
-      'state'
-    )?.set;
-
-    if (originalStateGetter && originalStateSetter) {
-      Object.defineProperty(controllerRef.current, 'state', {
-        get: function() {
-          return originalStateGetter.call(this);
-        },
-        set: function(value) {
-          originalStateSetter.call(this, value);
-          setState(value);
-        },
-        configurable: true
-      });
-    }
-  }, []);
-
-
-  const init = useCallback((e: Event) => {
-    if (!(e as CustomEvent).detail?.el) {
-      console.error('El is null during initialization');
-      return;
-    }
-    controllerRef.current.init(e);
-  }, []);
-
-  const initList = useCallback((e: Event) => {
-    const customEvent = e as CustomEvent;
-    if (!customEvent?.detail?.el) {
-      console.error('El is null during list initialization');
-      return;
-    }
-    controllerRef.current.initList(e);
-  }, []);
-
-  const initState = useCallback((state?: string | AppState<T> | AppState<T>[], callback?: () => void) => {
-    if (!controllerRef.current._formRef) {
-      console.error('Form ref not set.');
-      return;
-    }
-    controllerRef.current.initState(state, callback);
-  }, []);
-
-  const continueTo = useCallback((next: T | undefined) => {
-    controllerRef.current.continueTo(next);
-  }, []);
-
-  const validate = useCallback((
-    e: Event,
-    field: string,
-    validators: FieldValidator[]
-  ): [boolean, GoabFieldsetItemValue] => {
-    return controllerRef.current.validate(e, field, validators);
-  }, []);
-
-  const getStateValue = useCallback((group: string, key: string): string => {
-    return controllerRef.current.getStateValue(group, key);
-  }, []);
-
-  const getStateList = useCallback((): Record<string, string>[] => {
-    return controllerRef.current.getStateList();
-  }, []);
-
-  const complete = useCallback(() => {
-    controllerRef.current.complete();
-  }, []);
-
-  const completeSubform = useCallback(() => {
-    controllerRef.current.completeSubform();
-  }, []);
-
-  return {
-    state,
-    init,
-    initList,
-    initState,
-    continueTo,
-    validate,
-    getStateValue,
-    getStateList,
-    complete,
-    completeSubform,
-    controller: controllerRef.current
-  };
-}
-
-export { usePublicFormController };
diff --git a/libs/web-components/src/common/utils.ts b/libs/web-components/src/common/utils.ts
index 40b5d52af..a1e5d45cb 100644
--- a/libs/web-components/src/common/utils.ts
+++ b/libs/web-components/src/common/utils.ts
@@ -3,7 +3,7 @@
 // non-key properties change. Using the `watch` function provides the control and makes
 // it clear what the function is watching
 export function watch(fn: () => void, _: unknown[]) {
-  fn()
+  fn();
 }
 
 // Creates a style string from a list of styles.
@@ -53,7 +53,7 @@ export function receive(
   const listener = (e: Event) => {
     const ce = e as CustomEvent;
     handler(ce.detail.action, ce.detail.data, e);
-  }
+  };
 
   el?.addEventListener("msg", listener);
 
@@ -290,9 +290,14 @@ export function isPointInRectangle(
   rectX: number,
   rectY: number,
   rectWidth: number,
-  rectHeight: number
+  rectHeight: number,
 ): boolean {
-  return x >= rectX && x <= rectX + rectWidth && y >= rectY && y <= rectY + rectHeight;
+  return (
+    x >= rectX &&
+    x <= rectX + rectWidth &&
+    y >= rectY &&
+    y <= rectY + rectHeight
+  );
 }
 
 export function ensureSlotExists(el: HTMLElement) {
@@ -372,7 +377,7 @@ export function getLocalDateValues(input: string | Date): {
         year: +matches[1],
         month: +matches[2],
         day: +matches[3],
-      }
+      };
     }
   }
 
@@ -381,7 +386,7 @@ export function getLocalDateValues(input: string | Date): {
       year: input.getFullYear(),
       month: input.getMonth() + 1,
       day: input.getDate(),
-    }
+    };
   }
 
   return null;
diff --git a/libs/web-components/src/components/checkbox-list/CheckboxList.svelte b/libs/web-components/src/components/checkbox-list/CheckboxList.svelte
index 54d0ee30f..b45e65670 100644
--- a/libs/web-components/src/components/checkbox-list/CheckboxList.svelte
+++ b/libs/web-components/src/components/checkbox-list/CheckboxList.svelte
@@ -1,4 +1,9 @@
-<svelte:options customElement="goa-checkbox-list" />
+<svelte:options customElement={{
+  tag: "goa-checkbox-list",
+  props: {
+    value: { reflect: true },
+  }
+}} />
 
 <script lang="ts">
   /**
@@ -13,17 +18,7 @@
   import { onMount, tick } from "svelte";
   import type { Spacing } from "../../common/styling";
   import { calculateMargin } from "../../common/styling";
-  import { receive, relay, toBoolean } from "../../common/utils";
-  import {
-    FieldsetSetValueMsg,
-    FieldsetSetValueRelayDetail,
-    FieldsetSetErrorMsg,
-    FieldsetResetErrorsMsg,
-    FormFieldMountRelayDetail,
-    FormFieldMountMsg,
-    FieldsetResetFieldsMsg,
-    FieldsetErrorRelayDetail,
-  } from "../../types/relay-types";
+  import { dispatch, toBoolean } from "../../common/utils";
 
   /** The name for the checkbox list group. Used as group identifier in change events. */
   export let name: string;
@@ -59,7 +54,6 @@
   let _selectedValues = new Set<string>(); // Component-level Set for efficient operations
 
   // Reactive bindings
-  $: isDisabled = toBoolean(disabled);
   $: updateState(value, error);
 
   onMount(async () => {
@@ -68,15 +62,22 @@
     // Initialize Set with current value
     syncSelectedValuesSet(value);
 
-    addRelayListener();
     addSlotEventListeners();
-    sendMountedMessage();
 
     // Initialize after a tick to ensure DOM is ready
     _isInitialized = true;
-    updateChildCheckboxesState();
+
+    bindReset(_rootEl);
   });
 
+  function bindReset(el: HTMLElement) {
+    el.addEventListener("goa:reset", () => {
+      _selectedValues = new Set<string>();
+      dispatch(el, "_change", { name, value }, { bubbles: true })  ;
+    });
+    dispatch(el, "goa:bind", el, { bubbles: true });
+  }
+
   /**
    * Keep the internal Set synchronized with the external value array
    */
@@ -109,7 +110,6 @@
         }),
       );
       _error = currentError;
-      updateChildCheckboxesError();
     }
 
     // Sync Set when value changes externally (not from internal changes)
@@ -118,7 +118,7 @@
     // Sync checkbox values if initialized
     if (_isInitialized) {
       try {
-        updateChildCheckboxesState();
+        // updateChildCheckboxesState();
       } catch (error) {
         console.error("Error syncing checkbox values:", error);
       }
@@ -207,85 +207,6 @@
     return labels;
   }
 
-  /**
-   * Listen for relay-bus actions and route to handlers.
-   * This wires the component into the fieldset/form
-   */
-  function addRelayListener() {
-    receive(_rootEl, (action, data, event) => {
-      switch (action) {
-        case FieldsetSetValueMsg:
-          onSetValue(data as FieldsetSetValueRelayDetail);
-          break;
-        case FieldsetSetErrorMsg:
-          setError(data as FieldsetErrorRelayDetail);
-          break;
-        case FieldsetResetErrorsMsg:
-          error = "false";
-          break;
-        case FieldsetResetFieldsMsg:
-          onSetValue({ name, value: [] });
-          break;
-        case FormFieldMountMsg:
-          onChildCheckboxMount(data as FormFieldMountRelayDetail);
-          break;
-      }
-    });
-  }
-
-  function setError(detail: FieldsetErrorRelayDetail) {
-    error = detail.error ? "true" : "false";
-  }
-
-  /**
-   * Handle an external request to set this list's value.
-   * Pushes state to children and emits a local _change for upstream listeners.
-   */
-  function onSetValue(detail: FieldsetSetValueRelayDetail) {
-    value = Array.isArray(detail.value) ? detail.value : [];
-    // Sync Set when value is set programmatically
-    syncSelectedValuesSet(value);
-    updateChildCheckboxesState();
-    // dispatch _change .... including labels so Fieldset can store valueLabel
-    // and the Form Summary can render text.
-    _rootEl?.dispatchEvent(
-      new CustomEvent("_change", {
-        detail: { name, value, labels: getSelectedLabels(value) },
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-
-  function sendMountedMessage() {
-    if (!name) return;
-    relay<FormFieldMountRelayDetail>(
-      _rootEl,
-      FormFieldMountMsg,
-      { name, el: _rootEl },
-      { bubbles: true, timeout: 10 },
-    );
-  }
-
-  /**
-   * Register a newly mounted child checkbox that belongs to this list.
-   * Also synchronizes its state and applies child-level styles.
-   */
-  function onChildCheckboxMount(detail: FormFieldMountRelayDetail) {
-    const checkboxElement = (detail.el.getRootNode() as any)?.host;
-    if (!checkboxElement || checkboxElement.tagName.toLowerCase() !== "goa-checkbox") {
-      return;
-    }
-
-    // Capture label
-    const label = getCheckboxLabel(checkboxElement, detail.name);
-    _childRecords = [
-      ..._childRecords,
-      { el: detail.el, name: detail.name, label },
-    ];
-    updateChildCheckboxState(detail.el, detail.name);
-  }
-
   /**
    * Listen for _change events from slotted children and update the selected values array.
    * Stops propagation to keep changes local and relays a consolidated _change from the group.
@@ -332,76 +253,6 @@
     );
   }
 
-  /**
-   * Push the current selected values and disabled state to all known children.
-   * Uses a suppression flag to avoid feedback loops while syncing.
-   */
-  function updateChildCheckboxesState() {
-    if (_childRecords.length > 0) {
-      for (const rec of _childRecords)
-        updateChildCheckboxState(rec.el, rec.name);
-    }
-    updateSlottedCheckboxesState();
-  }
-
-  /**
-   * As a fallback, also sync any direct slotted checkbox we can access.
-   * This handles cases where children are plain elements rather than relayed components.
-   */
-  function updateSlottedCheckboxesState() {
-    const checkboxElements = getSlottedCheckboxes();
-    checkboxElements.forEach((element) => {
-      const checkboxName = getCheckboxIdentifier(element);
-      const shouldBeChecked = _selectedValues.has(checkboxName);
-      element.setAttribute("checked", shouldBeChecked ? "true" : "false");
-      if (isDisabled) element.setAttribute("disabled", "true");
-      else element.removeAttribute("disabled");
-
-      // propagate error state down to children
-      if (_error) element.setAttribute("error", "true");
-      else element.removeAttribute("error");
-    });
-  }
-
-  /** Sync a single child checkbox with the parent state and disabled flag. */
-  function updateChildCheckboxState(
-    childEl: HTMLElement,
-    checkboxVal?: string,
-  ) {
-    if (checkboxVal) {
-      const shouldBeChecked = _selectedValues.has(checkboxVal);
-      relay<FieldsetSetValueRelayDetail>(childEl, FieldsetSetValueMsg, {
-        name: checkboxVal,
-        value: shouldBeChecked ? checkboxVal : "", // Any non-empty string will work e.g. "checked", true", etc, but we chose the checkbox's value
-      });
-    }
-
-    const containerElement = (childEl.getRootNode() as any)?.host as
-      | HTMLElement
-      | undefined;
-
-    if (containerElement) {
-      if (isDisabled) {
-        containerElement.setAttribute("disabled", "true");
-      } else {
-        containerElement.removeAttribute("disabled");
-      }
-    }
-  }
-
-  /** Propagate error state to all children via the relay bus. */
-  function updateChildCheckboxesError() {
-    for (const rec of _childRecords) {
-      if (_error) {
-        relay(rec.el, FieldsetSetErrorMsg, { error: "true" });
-      } else {
-        relay(rec.el, FieldsetResetErrorsMsg);
-      }
-    }
-
-    updateSlottedCheckboxesState();
-  }
-
   // Announce help text for screen readers when the group receives focus.
   function onFocus() {
     _rootEl?.dispatchEvent(
diff --git a/libs/web-components/src/components/checkbox/Checkbox.svelte b/libs/web-components/src/components/checkbox/Checkbox.svelte
index 4d9fdf94d..6bcd13387 100644
--- a/libs/web-components/src/components/checkbox/Checkbox.svelte
+++ b/libs/web-components/src/components/checkbox/Checkbox.svelte
@@ -1,4 +1,9 @@
-<svelte:options customElement="goa-checkbox" />
+<svelte:options customElement={{
+  tag: "goa-checkbox",
+  props: {
+    checked: { type: "String", reflect: true }
+  }
+}} />
 
 <script lang="ts">
   import { onMount } from "svelte";
@@ -8,21 +13,9 @@
   import {
     dispatch,
     fromBoolean,
-    receive,
-    relay,
     toBoolean,
     announceToScreenReader,
   } from "../../common/utils";
-  import {
-    FieldsetSetValueMsg,
-    FieldsetSetValueRelayDetail,
-    FieldsetSetErrorMsg,
-    FieldsetResetErrorsMsg,
-    FormFieldMountRelayDetail,
-    FormFieldMountMsg,
-    FieldsetResetFieldsMsg,
-    FieldsetErrorRelayDetail,
-  } from "../../types/relay-types";
 
   // Required
   /** Unique name to identify the checkbox. */
@@ -68,7 +61,6 @@
   // Private
   let _value: string;
   let _rootEl: HTMLElement;
-  let _formFields: HTMLElement[] = [];
   let _revealSlotEl: HTMLElement;
   let _checkboxRef: HTMLElement;
   let _descriptionId: string;
@@ -76,6 +68,8 @@
   let _prevError: boolean;
   let _revealSlotHeight: number = 0;
 
+  let _revealSlotEls: HTMLElement[] = [];
+
   // Binding
   $: isDisabled = toBoolean(disabled);
   $: {
@@ -105,94 +99,33 @@
     _descriptionId = `description_${name}`;
     mb ??= size === "compact" ? "s" : "m";
 
-    addRelayListener();
-    addRevealSlotListener();
-    sendMountedMessage();
-  });
+    addRevealSlotEventListeners();
 
-  function addRelayListener() {
-    receive(_rootEl, (action, data) => {
-      switch (action) {
-        case FieldsetSetValueMsg:
-          onSetValue(data as FieldsetSetValueRelayDetail);
-          break;
-        case FieldsetSetErrorMsg:
-          setError(data as FieldsetErrorRelayDetail);
-          break;
-        case FieldsetResetErrorsMsg:
-          error = "false";
-          break;
-        case FieldsetResetFieldsMsg:
-          onSetValue({ name, value: "" });
-          break;
-        case FormFieldMountMsg:
-          onFormFieldMount(data as FormFieldMountRelayDetail);
-          break;
-      }
-    });
-  }
+    // collect bindable goa fields to allow for later resetting
+    _revealSlotEl.addEventListener("goa:bind", (e: Event) => {
+      const el = (e as CustomEvent).detail;
+      _revealSlotEls.push(el)
+    })
 
-  function setError(detail: FieldsetErrorRelayDetail) {
-    error = detail.error ? "true" : "false";
-  }
+    bindReset(_rootEl);
+  });
 
-  // allow for the listening of messages sent by form-fields specific to the "reveal" slot
-  function addRevealSlotListener() {
-    receive(_revealSlotEl, (action, data) => {
-      switch (action) {
-        case FormFieldMountMsg:
-          setCheckStatusByChildState(data as FormFieldMountRelayDetail);
-          break;
+  function bindReset(el: HTMLElement) {
+    el.addEventListener("goa:reset", () => {
+      if (checked === "true") {
+        checked = "false";
+        dispatch(el, "_change", { name, value, checked }, { bubbles: true })  ;
       }
     });
-    if (_revealSlotEl) {
-      addRevealSlotEventListeners();
-    }
-  }
-
-  function setCheckStatusByChildState(detail: FormFieldMountRelayDetail) {
-    setTimeout(() => {
-      // @ts-expect-error
-      checked ||= !!detail.el.value;
-    }, 1000);
-  }
-
-  // save all child elements within the reveal slot for later reference
-  function onFormFieldMount(detail: FormFieldMountRelayDetail) {
-    // only save the child elements within the reveal slot
-    if (!$$slots.reveal) return;
-    _formFields = [..._formFields, detail.el];
+    dispatch(el, "goa:bind", el, { bubbles: true });
   }
 
-  //
   function resetChildFormFields() {
-    for (const el of _formFields) {
-      // send reset message ot child form fields
-      relay(el, FieldsetResetFieldsMsg);
+    for (const el of _revealSlotEls) {
+      dispatch(el, "goa:reset")
     }
   }
 
-  function onSetValue(detail: FieldsetSetValueRelayDetail) {
-    // @ts-expect-error
-    value = detail.value;
-    checked = detail.value ? "true" : "false";
-    dispatch(_checkboxRef, "_change", { name, value }, { bubbles: true });
-  }
-
-  function sendMountedMessage() {
-    if (!name) return;
-
-    const checkboxEl = (_rootEl?.getRootNode() as ShadowRoot)?.host as HTMLElement;
-    const fromCheckboxList = checkboxEl?.closest("goa-checkbox-list") !== null;
-
-    relay<FormFieldMountRelayDetail>(
-      _rootEl,
-      FormFieldMountMsg,
-      { name, el: _rootEl },
-      { bubbles: !fromCheckboxList, timeout: 10 },
-    );
-  }
-
   function onChange(e: Event) {
     // Manually set the focus back to the checkbox after the state change
     _checkboxRef.focus();
@@ -217,12 +150,7 @@
     }
 
     // Announce the reveal content change to screen readers if checkbox is checked and reveal content exists
-    if (
-      $$slots.reveal &&
-      newCheckStatus &&
-      _revealSlotEl &&
-      revealarialabel !== ""
-    ) {
+    if ($$slots.reveal && newCheckStatus && _revealSlotEl && revealarialabel !== "") {
       announceToScreenReader(revealarialabel);
     }
   }
@@ -235,27 +163,10 @@
    * Stop propagate the _click,_change to checkbox (so it won't toggle the value)
    */
   function addRevealSlotEventListeners() {
-    _revealSlotEl.addEventListener("_click", (e: Event) => {
+    _revealSlotEl?.addEventListener("_click", (e: Event) => {
       // when we click a button/accordion.. inside the reveal slot, it will uncheck the parent checkbox. stopPropagation (_click) will fix it
       e.stopPropagation();
     });
-
-    _revealSlotEl.addEventListener("_change", (e: Event) => {
-      const customEvent = e as CustomEvent;
-      const eventDetail = customEvent.detail;
-      // when we check/change a checkbox/input... inside the reveal slot, it will uncheck the parent checkbox whenever _change is fired. stopPropagation (_change) will fix it
-      e.stopPropagation();
-
-      // If this is a form field value change (public form)
-      // relay it so the Fieldset initialize the reveal slot form field to public form state
-      if (
-        eventDetail &&
-        eventDetail.name &&
-        typeof eventDetail.value !== "undefined"
-      ) {
-        dispatch(_rootEl, "_revealChange", eventDetail, { bubbles: true });
-      }
-    });
   }
 </script>
 
@@ -267,8 +178,8 @@
   class:v2={version === "2"}
   class:compact={size === "compact"}
   style={`
-${calculateMargin(mt, mr, mb, ml)}
-max-width: ${maxwidth};
+    ${calculateMargin(mt, mr, mb, ml)}
+    max-width: ${maxwidth};
 `}
 >
   <label
@@ -288,7 +199,9 @@ max-width: ${maxwidth};
         value={`${value}`}
         aria-label={arialabel || text || name}
         aria-checked={isIndeterminate ? "mixed" : isChecked ? "true" : "false"}
-        aria-describedby={$$slots.description || description !== "" ? _descriptionId : null}
+        aria-describedby={$$slots.description || description !== ""
+          ? _descriptionId
+          : null}
         aria-invalid={_error ? "true" : "false"}
         on:change={onChange}
         on:focus={onFocus}
@@ -303,13 +216,7 @@ max-width: ${maxwidth};
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <rect
-            x="0"
-            y="0"
-            width="18"
-            height="3"
-            rx="1.4"
-          />
+          <rect x="0" y="0" width="18" height="3" rx="1.4" />
         </svg>
       {:else if isIndeterminate}
         <svg
@@ -349,6 +256,7 @@ max-width: ${maxwidth};
       {text}
     </div>
   </label>
+
   {#if $$slots.description || description}
     <div class="description" id={_descriptionId} data-testid="description">
       <slot name="description" />
@@ -454,7 +362,7 @@ max-width: ${maxwidth};
   }
 
   .container::before {
-    content: '';
+    content: "";
     position: absolute;
     width: 44px;
     height: 44px;
diff --git a/libs/web-components/src/components/date-picker/DatePicker.svelte b/libs/web-components/src/components/date-picker/DatePicker.svelte
index 6a532edc3..c8b06b5d7 100644
--- a/libs/web-components/src/components/date-picker/DatePicker.svelte
+++ b/libs/web-components/src/components/date-picker/DatePicker.svelte
@@ -3,6 +3,7 @@
     tag: "goa-date-picker",
     props: {
       error: { attribute: "error", type: "String", reflect: true },
+      value: { attribute: "value", type: "String", reflect: true },
     },
   }}
 />
@@ -11,18 +12,7 @@
   import { onMount, tick } from "svelte";
   import type { Spacing } from "../../common/styling";
   import { toBoolean } from "../../common/utils";
-  import { receive, dispatch, relay } from "../../common/utils";
-  import {
-    FieldsetSetValueMsg,
-    FieldsetSetValueRelayDetail,
-    FieldsetSetErrorMsg,
-    FieldsetResetErrorsMsg,
-    FormFieldMountMsg,
-    FormFieldMountRelayDetail,
-    FieldsetErrorRelayDetail,
-    FieldsetResetFieldsMsg,
-    FormItemMountMsg,
-  } from "../../types/relay-types";
+  import { dispatch } from "../../common/utils";
   import { CalendarDate } from "../../common/calendar-date";
 
   type OnChangeDetail = {
@@ -66,9 +56,7 @@
   export let ml: Spacing = null;
 
   let _error: boolean = toBoolean(error);
-  let _senderEl: HTMLElement;
   let _rootEl: HTMLElement;
-
   let _date: CalendarDate = CalendarDate.init();
 
   $: isDisabled = toBoolean(disabled);
@@ -79,11 +67,21 @@
   onMount(async () => {
     await tick(); // for Angular's delay
     setDate(value);
-    addRelayListener();
-    sendMountedMessage();
     showDeprecationWarnings();
+    bindReset(_rootEl);
   });
 
+  function bindReset(el: HTMLElement) {
+    el.addEventListener("goa:reset", () => {
+      if (value) {
+        value = "";
+        _date = CalendarDate.init();
+        dispatchValue();
+      }
+    });
+    dispatch(el, "goa:bind", el, { bubbles: true });
+  }
+
   function showDeprecationWarnings() {
     if (relative != "") {
       console.warn(
@@ -92,67 +90,14 @@
     }
   }
 
-  // Listen for relayed messages
-  function addRelayListener() {
-    receive(_rootEl, (action, data, event) => {
-      switch (action) {
-        case FieldsetSetValueMsg:
-          onSetValue(data as FieldsetSetValueRelayDetail);
-          break;
-        case FieldsetSetErrorMsg:
-          setError(data as FieldsetErrorRelayDetail);
-          break;
-        case FieldsetResetErrorsMsg:
-          error = "false";
-          break;
-        case FieldsetResetFieldsMsg:
-          onSetValue({ name, value: "" });
-          break;
-
-        // prevent child fields from mounting/registering themselves with parent components
-        case FormItemMountMsg:
-        case FormFieldMountMsg:
-          event.stopPropagation();
-          break;
-      }
-    });
-  }
-
-  function setError(detail: FieldsetErrorRelayDetail) {
-    error = detail.error ? "true" : "false";
-  }
-
-  function onSetValue(detail: FieldsetSetValueRelayDetail) {
-    // @ts-expect-error
-    value = detail.value;
-    dispatch(
-      _rootEl,
-      "_change",
-      { name, value: detail.value },
-      { bubbles: true },
-    );
-  }
-
-  // Notify the Form that this component has been mounted
-  function sendMountedMessage() {
-    relay<FormFieldMountRelayDetail>(
-      _senderEl,
-      FormFieldMountMsg,
-      { name, el: _rootEl },
-      { bubbles: true, timeout: 5 },
-    );
-  }
-
   function setDate(value: string) {
-    if (type === "calendar") {
-      if (value) {
-        _date = new CalendarDate(value);
-        if (!_date.isValid) {
-          _date = new CalendarDate(0);
-        }
-      } else {
+    if (value) {
+      _date = new CalendarDate(value);
+      if (!_date.isValid) {
         _date = new CalendarDate(0);
       }
+    } else {
+      _date = new CalendarDate(0);
     }
   }
 
@@ -173,7 +118,7 @@
       name,
       value: _date.date,
       valueStr: value,
-    });
+    }, { bubbles: true });
   }
 
   function hideCalendar() {
@@ -234,21 +179,24 @@
   function onInputChange(e: Event) {
     e.stopPropagation();
 
-    const { name: elName, value } = (
+    const { name: elName, value: newVal } = (
       e as CustomEvent<{ name: string; value: string }>
     ).detail;
 
     if (elName === "day") {
-      _date.setDay(+value);
+      _date.setDay(+newVal);
     } else if (elName === "month") {
-      _date.setMonth(+value);
+      _date.setMonth(+newVal);
     } else if (elName === "year") {
-      _date.setYear(+value);
+      _date.setYear(+newVal);
     }
 
     // invalid dates need to emitted too
     const output = _date.isValid() ? _date.toString() : "";
 
+    // update exposed prop, without this it won't be able to be reset
+    value = output;
+
     dispatch<OnChangeDetail>(
       _rootEl,
       "_change",
@@ -258,7 +206,6 @@
   }
 </script>
 
-<div bind:this={_senderEl}></div>
 {#if type === "calendar"}
   {#if width && width.includes("%")}
     <div style="display: block; width: {width};">
@@ -344,6 +291,7 @@
     <goa-block direction="row">
       <goa-form-item helptext="Month" {version}>
         <goa-dropdown
+          native="true"
           name="month"
           testid="input-month"
           on:_change={onInputChange}
diff --git a/libs/web-components/src/components/dropdown/Dropdown.svelte b/libs/web-components/src/components/dropdown/Dropdown.svelte
index f75da4666..c2913cce0 100644
--- a/libs/web-components/src/components/dropdown/Dropdown.svelte
+++ b/libs/web-components/src/components/dropdown/Dropdown.svelte
@@ -7,6 +7,7 @@
         reflect: true,
         attribute: "disable-global-close-popover",
       },
+      value: { reflect: true },
     },
   }}
 />
@@ -34,16 +35,6 @@
     toBoolean,
   } from "../../common/utils";
   import { calculateMargin } from "../../common/styling";
-  import {
-    FieldsetErrorRelayDetail,
-    FieldsetResetErrorsMsg,
-    FieldsetSetErrorMsg,
-    FormFieldMountMsg,
-    FormFieldMountRelayDetail,
-    FieldsetSetValueMsg,
-    FieldsetSetValueRelayDetail,
-    FieldsetResetFieldsMsg,
-  } from "../../types/relay-types";
 
   interface EventHandler {
     handleKeyUp: (e: KeyboardEvent) => void;
@@ -173,7 +164,6 @@
   onMount(() => {
     ensureSlotExists(_rootEl);
     addRelayListener();
-    sendMountedMessage();
     setupPopoverListeners();
 
     if (disableGlobalClosePopover) {
@@ -183,8 +173,20 @@
       ? new ComboboxKeyUpHandler(_inputEl)
       : new DropdownKeyUpHandler(_inputEl);
     showDeprecationWarnings();
+
+     bindReset(_rootEl);
   });
 
+  function bindReset(el: HTMLElement) {
+    el.addEventListener("goa:reset", () => {
+      if (value) {
+        value = "";
+        dispatch(el, "_change", { name, value }, { bubbles: true })  ;
+      }
+    });
+    dispatch(el, "goa:bind", el, { bubbles: true });
+  }
+
   //
   // Functions
   //
@@ -220,11 +222,11 @@
   }
 
   function setupPopoverListeners() {
-    _popoverEl?.addEventListener("_open", (e) => {
+    _popoverEl?.addEventListener("_open", (_e) => {
       _isMenuVisible = true;
     });
 
-    _popoverEl?.addEventListener("_close", (e) => {
+    _popoverEl?.addEventListener("_close", (_e) => {
       _isMenuVisible = false;
     });
   }
@@ -238,20 +240,8 @@
   }
 
   function addRelayListener() {
-    receive(_rootEl, (action, data, event) => {
+    receive(_rootEl, (action, data, _event) => {
       switch (action) {
-        case FieldsetSetValueMsg:
-          onSetValue(data as FieldsetSetValueRelayDetail);
-          break;
-        case FieldsetSetErrorMsg:
-          setError(data as FieldsetErrorRelayDetail);
-          break;
-        case FieldsetResetErrorsMsg:
-          error = "false";
-          break;
-        case FieldsetResetFieldsMsg:
-          onSetValue({ name, value: "" });
-          break;
         case DropdownItemMountedMsg:
           onChildMounted(data as DropdownItemMountedRelayDetail);
           break;
@@ -262,25 +252,6 @@
     });
   }
 
-  function setError(detail: FieldsetErrorRelayDetail) {
-    error = detail.error ? "true" : "false";
-  }
-
-  function onSetValue(detail: FieldsetSetValueRelayDetail) {
-    // @ts-expect-error
-    value = detail.value;
-    dispatch(_rootEl, "_change", { name, value }, { bubbles: true });
-  }
-
-  function sendMountedMessage() {
-    relay<FormFieldMountRelayDetail>(
-      _rootEl,
-      FormFieldMountMsg,
-      { name, el: _rootEl },
-      { bubbles: true, timeout: 10 },
-    );
-  }
-
   /**
    * Called when a new child option is added to the slot. This component must send
    * a reference to itself back to the child to allow for the child to send messages
@@ -527,7 +498,7 @@
   }
 
   // Auto-select matching option from input after browser autofill/autocomplete or paste from clipboard.
-  function onInputChange(e: Event) {
+  function onInputChange(_e: Event) {
     if (_disabled || !_filterable) return;
 
     const isAutofilled =
@@ -606,7 +577,7 @@
     setDisplayedValue();
   }
 
-  function onFocus(e: Event) {
+  function onFocus(_e: Event) {
     dispatch(_rootEl, "help-text::announce", undefined, { bubbles: true });
   }
 
@@ -917,7 +888,7 @@
             data-value={option.value}
             role="option"
             style="display: block"
-            on:click={(e) => {
+            on:click={(_e) => {
               onFilteredOptionClick(option);
               _inputEl?.focus();
             }}
diff --git a/libs/web-components/src/components/form-item/FormItem.svelte b/libs/web-components/src/components/form-item/FormItem.svelte
index ed05b0a7f..bfb2cc53b 100644
--- a/libs/web-components/src/components/form-item/FormItem.svelte
+++ b/libs/web-components/src/components/form-item/FormItem.svelte
@@ -1,8 +1,5 @@
 <svelte:options customElement={{
   tag: "goa-form-item",
-  props: {
-    publicFormSummaryOrder: { type: "Number", attribute: "public-form-summary-order" },
-  }
 }} />
 
 <!-- Script -->
@@ -18,23 +15,10 @@
   import { calculateMargin } from "../../common/styling";
   import {
     receive,
-    relay,
     generateRandomId,
     typeValidator,
     announceToScreenReader,
   } from "../../common/utils";
-  import {
-    FieldsetResetErrorsMsg,
-    FieldsetSetErrorMsg,
-    FormFieldMountMsg,
-    FormItemMountMsg,
-  } from "../../types/relay-types";
-
-  import type {
-    FieldsetErrorRelayDetail,
-    FormFieldMountRelayDetail,
-    FormItemMountRelayDetail,
-  } from "../../types/relay-types";
 
   // Validators
   const [REQUIREMENT_TYPES, validateRequirementType] = typeValidator(
@@ -89,11 +73,6 @@
   /** Specifies the input type for appropriate message spacing. Used with checkbox-list or radio-group. */
   export let type: InputType = "";
 
-  /** Overrides the label value within the form-summary. For public-form use only. */
-  export let name: string = "blank";
-  /** Sets the display order within the form summary. For public-form use only. */
-  export let publicFormSummaryOrder: number = 0;
-
   let _rootEl: HTMLElement;
   let _inputEl: HTMLElement;
   let _errorId = `error-${generateRandomId()}`;
@@ -110,44 +89,10 @@
     validateVersion(version);
     validateType(type);
 
-    receive(_rootEl, (action, data) => {
-      switch (action) {
-        case FormFieldMountMsg:
-          onInputMount(data as FormFieldMountRelayDetail);
-          break;
-        case FieldsetSetErrorMsg:
-          onSetError(data as FieldsetErrorRelayDetail);
-          break;
-        case FieldsetResetErrorsMsg:
-          error = "";
-          break;
-      }
-    });
-
-    _rootEl?.addEventListener("form-field::bind", handleInputMounted);
     _rootEl?.addEventListener("error::change", handleErrorChange);
     _rootEl?.addEventListener("help-text::announce", handleAnnounceHelperText);
   });
 
-  function handleInputMounted(e: Event) {
-    const ce = e as CustomEvent<FormFieldMountRelayDetail>;
-    _inputEl = ce.detail.el;
-
-    // Check if aria-label is present and has a value in the child element
-    const ariaLabel = _inputEl.getAttribute("aria-label");
-    if (!ariaLabel || ariaLabel.trim() === "") {
-      _inputEl.setAttribute("aria-label", label);
-    }
-
-    // Set aria-required
-    _inputEl.setAttribute(
-      "aria-required",
-      requirement === "required" ? "true" : "false",
-    );
-
-    updateAriaDescribedBy();
-  }
-
   function handleErrorChange(e: Event) {
     const ce = e as CustomEvent<{ isError: boolean }>;
     if (_hasError !== ce.detail.isError) {
@@ -176,33 +121,6 @@
       _inputEl.setAttribute("aria-describedby", "");
     }
   }
-
-  function onSetError(d: FieldsetErrorRelayDetail) {
-    error = (d as Record<string, string>)["error"];
-  }
-
-  function onInputMount(props: FormFieldMountRelayDetail) {
-    const { el, name } = props;
-
-    // Check if aria-label is present and has a value in the child element
-    const ariaLabel = el.getAttribute("aria-label");
-    if (!ariaLabel || ariaLabel.trim() === "") {
-      el.setAttribute("aria-label", label);
-    }
-
-    sendMountedMessage(name);
-  }
-
-  // Allows binding to Fieldset components. The `_name` value is what was obtained from the "input" element's
-  // event, which ensures that the requirement of the "input" and formitem having the same name will be met.
-  function sendMountedMessage(_name: string) {
-    relay<FormItemMountRelayDetail>(
-      _rootEl,
-      FormItemMountMsg,
-      { id: _name, label: name !== "blank" ? name : label, el: _rootEl, order: publicFormSummaryOrder },
-      { bubbles: true, timeout: 10 },
-    );
-  }
 </script>
 
 <!-- HTML -->
diff --git a/libs/web-components/src/components/form/Fieldset.svelte b/libs/web-components/src/components/form/Fieldset.svelte
deleted file mode 100644
index eca5416ae..000000000
--- a/libs/web-components/src/components/form/Fieldset.svelte
+++ /dev/null
@@ -1,402 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: "goa-fieldset",
-    props: {
-      sectionTitle: { type: "String", attribute: "section-title" },
-      dispatchOn: { attribute: "dispatch-on" },
-    },
-  }}
-/>
-
-<script lang="ts">
-  import { onMount } from "svelte";
-  import { dispatch, receive, relay } from "../../common/utils";
-  import {
-    ExternalErrorRelayDetail,
-    ExternalSetErrorMsg,
-    FieldsetBindMsg,
-    FieldsetBindRelayDetail,
-    FieldsetChangeMsg,
-    FieldsetChangeRelayDetail,
-    FieldsetErrorRelayDetail,
-    FieldsetItemState,
-    FieldsetResetErrorsMsg,
-    FieldsetResetFieldsMsg,
-    FieldsetSetErrorMsg,
-    FieldsetSetValueMsg,
-    FieldsetSetValueRelayDetail,
-    FieldsetValidationRelayDetail,
-    FormFieldMountMsg,
-    FormFieldMountRelayDetail,
-    FormItemMountMsg,
-    FormItemMountRelayDetail,
-    FormResetErrorsMsg,
-    FormResetFormMsg,
-    FormSetFieldsetMsg,
-    FormSetFieldsetRelayDetail,
-    FormToggleActiveMsg,
-    FormToggleActiveRelayDetail,
-    FormPageContinueMsg,
-    FormPageContinueRelayDetail,
-  } from "../../types/relay-types";
-
-  // ======
-  // Public
-  // ======
-
-  export let id: string = "";
-  // when the changes will be dispatched to the form; `change` ~ immediately
-  export let dispatchOn: "change" | "continue" = "continue";
-
-  // =======
-  // Private
-  // =======
-
-  let _rootEl: HTMLElement;
-  let _errors: Record<string, string> = {};
-
-  // allows for the state to be sent to _continue event allowing for custom validation
-  let _state: Record<string, FieldsetItemState> = {};
-
-  // snapshot of the state when the fieldset is made active
-  let _stateSnapshot: Record<string, FieldsetItemState> = {};
-
-  // reference to child form-item components to allow for relaying of error state
-  let _formItems: Record<string, { label: string; el: HTMLElement }> = {};
-
-  // reference to child form input, dropdown, etc components to allow for relaying of error state
-  let _formFields: Record<string, HTMLElement> = {};
-
-  // =====
-  // Hooks
-  // =====
-
-  onMount(() => {
-    dispatchBindMsg();
-    addChildChangeListener();
-    bindChannel();
-    bindAlterPropsMsg();
-  });
-
-  // =========
-  // Functions
-  // =========
-
-  function bindChannel() {
-    receive(_rootEl, (action, data, event) => {
-      switch (action) {
-        case FormSetFieldsetMsg:
-          onSetFieldset(data as FormSetFieldsetRelayDetail);
-          event.stopPropagation();
-          break;
-        case FormResetErrorsMsg:
-          onErrorReset();
-          event.stopPropagation();
-          break;
-        case FormItemMountMsg:
-          onFormItemMount(data as FormItemMountRelayDetail);
-          event.stopPropagation();
-          break;
-        case FormFieldMountMsg:
-          onFormFieldMount(data as FormFieldMountRelayDetail);
-          event.stopPropagation();
-          break;
-        case FormToggleActiveMsg:
-          onToggleActiveState(data as FormToggleActiveRelayDetail);
-          event.stopPropagation();
-          break;
-        case ExternalSetErrorMsg:
-          onError(data as ExternalErrorRelayDetail);
-          event.stopPropagation();
-          break;
-        case FormPageContinueMsg:
-          onFormPageContinue(data as FormPageContinueRelayDetail);
-          event.stopPropagation();
-          break;
-        case FormResetFormMsg:
-          resetFields(event);
-          event.stopPropagation();
-          break;
-      }
-    });
-  }
-
-  // *****************
-  // Dispatch handlers
-  // *****************
-
-  /**
-   * Set goa-details components, within the fieldset, to have a certain top spacing
-   * set within the UI design guidelines
-   */
-  function bindAlterPropsMsg() {
-    const els = document.querySelectorAll("goa-details");
-    els.forEach((el) => {
-      el.setAttribute("style", "margin-top: -1rem");
-    })
-  }
-
-  function onToggleActiveState(detail: FormToggleActiveRelayDetail) {
-    // obtain an initial snapshot of the data when fieldset shown
-    if (detail.active) {
-      _stateSnapshot = JSON.parse(JSON.stringify({ ..._state }));
-    }
-  }
-
-  function resetStateValues() {
-    for (const key of Object.keys(_state)) {
-      _state[key].value = "";
-    }
-  }
-
-  function resetFields(event: Event) {
-    resetStateValues();
-    // prevent subform resets from resetting the parent
-    event.stopPropagation();
-
-    for (const el of Object.values(_formFields)) {
-      relay(el, FieldsetResetFieldsMsg);
-    }
-  }
-
-  function onSetFieldset(detail: FormSetFieldsetRelayDetail) {
-    if (detail.value.type === "details") {
-      // set the local fieldset state
-      for (const [id, item] of Object.entries(detail.value.fieldsets)) {
-        _state[id] = { ...item };
-      }
-
-      // restore state in form items by relaying the message
-      for (const [name, data] of Object.entries(_state)) {
-        if (data.value) {
-          relay<FieldsetSetValueRelayDetail>(
-            _formFields[name],
-            FieldsetSetValueMsg,
-            {
-              name,
-              value: data.value,
-            },
-          );
-        }
-      }
-    }
-  }
-
-  function onErrorReset() {
-    _errors = {};
-
-    // reset children
-    for (const [_, val] of Object.entries(_formFields)) {
-      relay(val, FieldsetResetErrorsMsg, null);
-    }
-    for (const [_, { el }] of Object.entries(_formItems)) {
-      relay(el, FieldsetResetErrorsMsg, null);
-    }
-  }
-
-  function onFormItemMount(detail: FormItemMountRelayDetail) {
-    const { id, label, el, order } = detail;
-    _formItems[id] = { label, el };
-
-    const defaultOrderIndex = Object.keys(_formItems).length;
-    _state[id] = {
-      name: id,
-      value: "",
-      label: label,
-      order: order || defaultOrderIndex,
-    }
-  }
-
-  // Collect list of child form item (input, dropdown, etc) elements
-  function onFormFieldMount(detail: FormFieldMountRelayDetail) {
-    const { name, el } = detail;
-    if (!name) return;
-
-    _formFields[name] = el;
-  }
-
-  function onError(detail: ExternalErrorRelayDetail) {
-
-    if (detail.grouped) {
-      if (!Object.values(_errors).includes(detail.msg)) {
-        _errors[detail.name] = detail.msg;
-      }
-    } else {
-      _errors[detail.name] = detail.msg;
-    }
-
-    // dispatch error down to fields
-    relay<FieldsetErrorRelayDetail>(
-      _formFields[detail.name],
-      FieldsetSetErrorMsg,
-      {
-        error: detail.msg,
-      },
-    );
-
-    // dispatch error down to form items
-    relay<FieldsetErrorRelayDetail>(
-      _formItems[detail.name].el,
-      FieldsetSetErrorMsg,
-      {
-        error: detail.msg,
-      },
-    );
-  }
-
-  // *********
-  // Functions
-  // *********
-
-  // Reverts the form field values within the "input" components to prevent the
-  // cancelled values from showing when viewed again.
-  function revertFormFieldValues() {
-    for (const [name, field] of Object.entries(_formFields)) {
-      // some form elements not "form-bound" won't exist within the snapshot state
-      if (_stateSnapshot[name]) {
-        relay<FieldsetSetValueRelayDetail>(field, FieldsetSetValueMsg, {
-          name,
-          value: _stateSnapshot[name].value,
-        });
-      }
-    }
-  }
-
-  // Bind with the parent FormPage
-  function dispatchBindMsg() {
-    setTimeout(() => {
-      relay<FieldsetBindRelayDetail>(
-        _rootEl,
-        FieldsetBindMsg,
-        { id, el: _rootEl, cb: (_id) => (id = _id) },
-        { bubbles: true, timeout: 10 },
-      );
-    }, 10);
-  }
-
-  function addChildChangeListener() {
-    _rootEl.addEventListener("_change", (e: Event) => {
-      handleFieldChange(e);
-    });
-
-    // Handle _revealChange events from checkbox/radio reveal slots
-    _rootEl.addEventListener("_revealChange", (e: Event) => {
-      handleFieldChange(e);
-    });
-  }
-
-  function handleFieldChange(e: Event) {
-    const { name, value, label, labels } = (e as CustomEvent).detail;
-
-    // if no name is registered, they are not bound to the public-form
-    if (!_formItems[name]) {
-      return;
-    }
-
-    _state[name].value = value;
-
-    if (label) {
-      _state[name].valueLabel = label;
-    }
-
-    if (labels) {
-      _state[name].labels = labels;
-    }
-
-    if (dispatchOn === "change") {
-      const isDirty = Object.keys(_state).length > 0;
-      if (isDirty) {
-        relayFieldsetChange();
-      }
-    }
-
-    e.stopPropagation();
-  }
-
-  function relayFieldsetChange() {
-    relay<FieldsetChangeRelayDetail>(
-      _rootEl,
-      FieldsetChangeMsg,
-      {
-        id,
-        state: { data: _state },
-        dispatchOn,
-      },
-      { bubbles: true },
-    );
-  }
-
-  function jumpToError(e: Event, id: string) {
-    _formFields[id].focus();
-    e.preventDefault();
-  }
-
-  function onFormPageContinue(detail: FormPageContinueRelayDetail) {
-    const isDirty = Object.keys(_state).length > 0;
-
-    // send updated values for _stateChange
-    if (isDirty && !detail.cancelled) {
-      relayFieldsetChange();
-    }
-
-    // revert the component values
-    if (detail.cancelled) {
-      revertFormFieldValues();
-      _state = _stateSnapshot;
-    }
-
-    // send continue to allow for page change
-    dispatch<FieldsetValidationRelayDetail>(
-      _rootEl,
-      "_continue",
-      { el: _rootEl, state: _state, cancelled: detail.cancelled },
-      { bubbles: true },
-    );
-  }
-</script>
-
-<fieldset bind:this={_rootEl}>
-  {#if Object.values(_errors).filter((err) => !!err).length}
-    <goa-callout type="emergency" heading={`There is a problem`}>
-      <ul class="errors">
-        {#each Object.keys(_errors) as key}
-          <li>
-            <a
-              class="error"
-              href={`#${key}`}
-              on:click={(e) => jumpToError(e, key)}
-            >
-              {_errors[key]}
-            </a>
-          </li>
-        {/each}
-      </ul>
-    </goa-callout>
-  {/if}
-
-  <goa-block gap="xl" direction="column">
-    <slot />
-  </goa-block>
-
-</fieldset>
-
-<style>
-  fieldset {
-    border: none;
-    padding: 0;
-    margin-bottom: var(--goa-space-m);
-  }
-
-  ul {
-    padding: 0;
-  }
-
-  ul li {
-    list-style-type: none;
-  }
-
-  a.error,
-  a.error:visited {
-    color: var(--goa-color-emergency-dark);
-  }
-</style>
diff --git a/libs/web-components/src/components/form/Form.svelte b/libs/web-components/src/components/form/Form.svelte
index 1420246b9..052e49734 100644
--- a/libs/web-components/src/components/form/Form.svelte
+++ b/libs/web-components/src/components/form/Form.svelte
@@ -4,540 +4,471 @@
   }}
 />
 
+<script lang="ts" context="module">
+  import { PFOutline, PFPage, PFState } from "@abgov/ui-components-common";
+  import { Spacing } from "../../common/styling";
+</script>
+
 <script lang="ts">
   import { onMount } from "svelte";
-  import { dispatch, performOnce, receive, relay, style } from "../../common/utils";
-  import {
-    ExternalContinueMsg,
-    ExternalContinueRelayDetail,
-    ExternalInitStateDetail,
-    ExternalInitStateMsg,
-    FieldsetChangeMsg,
-    FieldsetChangeRelayDetail,
-    FieldsetCompleteMsg,
-    FormBindMsg,
-    FormBindRelayDetail,
-    FormDispatchEditMsg,
-    FormDispatchEditRelayDetail,
-    FormDispatchStateMsg,
-    FormDispatchStateRelayDetail,
-    FormDispatchStateRelayDetailList,
-    FormResetErrorsMsg,
-    FormResetFormMsg,
-    FormSetFieldsetMsg,
-    FormSetFieldsetRelayDetail,
-    FormState,
-    FormSummaryBindMsg,
-    FormSummaryBindRelayDetail,
-    FormSummaryEditPageMsg,
-    FormSummaryEditPageRelayDetail,
-    FormToggleActiveMsg,
-    FormToggleActiveRelayDetail,
-    StateChangeRelayDetail,
-    StateChangeEvent,
-    FormPageBindMsg,
-    FormPageBindRelayDetail,
-    FieldsetBindRelayDetail,
-    FieldsetBindMsg,
-    FormPageBackMsg, FormStatus,
-  } from "../../types/relay-types";
-
-  // ========
-  // Required
-  // ========
-
-  /** The initialization status of the form. Set to "initializing" while loading external state, then "complete" when ready. */
-  export let status: "initializing" | "complete" = "complete";
-
-  // ========
-  // Optional
-  // ========
-
-  /** A name identifier for the form. Useful for debugging complex forms with multiple nested forms. */
-  export let name: string = "[name] not set";
-
-  // =======
-  // Private
-  // =======
+  import { dispatch, receive } from "../../common/utils";
+  import { calculateMargin } from "../../common/styling";
 
-  let _rootEl: HTMLFormElement;
-  let _senderEl: HTMLFormElement;
-  let _childReceiverEl: HTMLElement;
+  // TODO
+  // [ ] a more consistent way of resetting form elements might be needed, instead of setting value/checked
+  // [ ] determine if the formatting could be done just before moving to the next page, this would remove the need of the formatting the data within the summary
+  // [ ] will the file uploader work?
+  // [-] is there a way to introduce a micro-repeater in addition to the existing modal sub-form
+  //     - won't do: this can alread easily be done on their side since the history contains a list of the pages that were saved
 
-  // List of child forms to allow for form data to be passed down to the child form
-  let _childForms: Record<string, HTMLElement> = {};
+  type FormProps = {
+    outline: PFOutline;
+  };
 
-  // Fieldset binding details
-  let _fieldsets: Record<string, FieldsetBindRelayDetail> = {};
-  let _formPages: Record<string, FormPageBindRelayDetail> = {};
+  export let mt: Spacing = null;
+  export let mr: Spacing = null;
+  export let mb: Spacing = "3xl";
+  export let ml: Spacing = null;
 
-  // Form summary element reference
+  let _rootEl: HTMLFormElement;
   let _formSummaryEl: HTMLElement;
 
-  // Timeout id for subform binding
-  let _childFormStateTimeoutId: any;
-
-  // Timeout for performOnce op
-  let _formItemBindingTimeoutId;
-
-  // Timeout to prevent more than one stateChange event from being emitted
-  let _stateChangeTimeoutId: any;
+  // Fieldset binding details
+  let _formPages: Record<string, HTMLElement> = {};
+  let _formFields: Record<string, HTMLElement> = {}; // key = [formPageId]:[formFieldName]
+  let _formOutline: PFOutline;
+  let _currentPage: string;
 
   // Form state
-  let _state: FormState;
-
-  function getDefaultState(): FormState {
-    return {
-      uuid: crypto.randomUUID(),
-      form: {},
-      history: [],
-      editting: "",
-      lastModified: undefined,
-      status: "not-started",
-    } as FormState;
-  }
+  let _state: PFState;
 
   onMount(() => {
-    // provide html element link to outside world
-    dispatch(_rootEl, "_init", { el: _rootEl }, { bubbles: true });
     addRelayListener();
-    addSubformRelayListener();
+    addChangeListener();
+    addBackListener();
+    addSubformListeners();
 
-    _state = getDefaultState();
+    dispatch(_rootEl, "_init", init, { bubbles: true });
   });
 
-  $: if (status === "complete") {
-    setChildrenState();
+  function bindSubformFieldValues(id: string) {
+    for (const [name, val] of Object.entries(_state.dataBuffer)) {
+      const key = `${id}:${name}`;
+      const el = _formFields[key];
+      if (el) {
+        _formFields[key].setAttribute("value", val);
+      }
+    }
   }
 
-  /**
-   * Adds a listener to the form element to listen for _stateChange event from subforms,
-   * so data received will always be an array.
-   */
-  function addSubformRelayListener() {
-    _childReceiverEl.addEventListener(StateChangeEvent, (e) => {
-      const detail = (e as CustomEvent).detail as StateChangeRelayDetail;
-      if (detail.type === "details") {
-        console.warn("Form:addSubformRelayListener", name, "received details type, ignoring");
+  function addSubformListeners() {
+    _rootEl.addEventListener("pf:subform:cancel", (e) => {
+      e.stopPropagation();
+
+      const { pageId } = (e as CustomEvent).detail;
+
+      // clear all the subform items
+      _state = {..._state, dataBuffer: {}};
+      resetFormFields(pageId);
+    });
+
+    _rootEl.addEventListener("pf:subform:edit", (e) => {
+      e.stopPropagation();
+
+      const {pageId, _id} = (e as CustomEvent).detail;
+      const data = _state.data[pageId] as PFPage[];
+      const record = data.find(item => item._id === _id);
+
+      if (!record) {
+        console.error("Subform item not found: _id");
         return;
       }
 
-      // subform state is always a list
-      _state.form[detail.id] = { data: { type: "list", items: detail.data } };
+      // populate the dataBuffer with the item's data to ensure non-updated data is not lost
+      // when re-saved
+      _state = {..._state, dataBuffer: record as Record<string, string>};
 
-      // redispatch this form's data
-      dispatchStateChange();
-
-      syncFormSummaryState();
+      bindSubformFieldValues(pageId);
     });
-  }
 
-  /**
-   * Adds a listener to the form element to handle relay messages
-   */
-  function addRelayListener() {
-    receive(_rootEl, (type, data, e) => {
+    _rootEl.addEventListener("pf:subform:delete", (e) => {
       e.stopPropagation();
-      switch (type) {
-        case FormDispatchStateMsg:
-          onReceiveState(data as FormDispatchStateRelayDetail);
-          break;
-        case FormBindMsg:
-          onFormBind(data as FormBindRelayDetail);
-          break;
-        case FieldsetBindMsg:
-          onFieldsetBind(data as FieldsetBindRelayDetail);
-          break;
-        case FormPageBindMsg:
-          onFormPageBind(data as FormPageBindRelayDetail);
-          break;
-        case FormPageBackMsg:
-          onFormPageBack(e);
-          break;
-        case FieldsetChangeMsg:
-          onFieldsetChange(data as FieldsetChangeRelayDetail);
-          break;
-        case FormSummaryBindMsg:
-          onFormSummaryBind(data as FormSummaryBindRelayDetail);
-          break;
-        case ExternalContinueMsg:
-          onContinue(data as ExternalContinueRelayDetail);
-          break;
-        case FormSummaryEditPageMsg:
-          onSetPage(data as FormSummaryEditPageRelayDetail);
-          break;
-        case FieldsetCompleteMsg:
-          onFormComplete();
-          break;
-        case ExternalInitStateMsg:
-          setState(data as ExternalInitStateDetail);
-          break;
-        case FormResetFormMsg:
-          resetState();
-          break;
+
+      const { pageId, _id } = (e as CustomEvent).detail;
+      const data = _state.data[pageId] as PFPage[];
+      if (!data) {
+        throw new Error("pf:subform:delete: no data found");
       }
+
+      // remove the subform item from the collection
+      const newPage = data.filter(item => item._id !== _id);
+      _state = {..._state, dataBuffer: {}, data: { ..._state.data, [pageId]: newPage } };
+
+      // send message up to app level with the changes
+      dispatch(_rootEl, "_subformChange", _state);
     });
-  }
 
-  // ***************
-  // Relay listeners
-  // ***************
+    _rootEl.addEventListener("pf:subform:save", (e) => {
+      const { pageId, _id } = (e as CustomEvent).detail;
+      const [errors, errorCount] = validate(pageId);
+
+      e.stopPropagation();
 
-  function onReceiveState(data?: FormDispatchStateRelayDetail) {
-    _state = { ..._state, ...(data || {}) };
-    setChildrenState();
+      if (errorCount > 0) {
+        renderErrors(pageId, errors);
+        return;
+      }
 
-    sendToggleActiveStateMsg(_state.history[_state.history.length - 1]);
-    syncFormSummaryState();
-  }
+      // if editting replace the existing data with the new, if creating then add the new
+      // data with a newly generated _id
+      if (_id) {
+        // find index to preserve the order of the list
+        const list = _state.data[pageId] as Array<PFPage>;
+        const index = list.findIndex(item => item._id === _id);
 
-  function onFormBind(detail: FormBindRelayDetail) {
-    _childForms[detail.id] = detail.el;
+        list[index] = _state.dataBuffer;
+        _state = {..._state, dataBuffer: {}, data: { ..._state.data, [pageId]: [...list]} };
 
-    // bind all the child forms
-    _childFormStateTimeoutId = performOnce(_childFormStateTimeoutId, dispatchChildFormState, 100);
-  }
+      } else {
+        const page = [
+          ...(_state.data[pageId] as []),   // add original items in the page
+          {
+            ..._state.dataBuffer,           // add all the data obtained from the form
+            _id: crypto.randomUUID()        // add in additonal uuid if not already set
+          }
+        ];
+        _state = {..._state, dataBuffer: {}, data: { ..._state.data, [pageId]: page } };
+      }
 
-  /**
-   * Handles binding of the form-summary component to enable state synchronization
-   * @param detail Contains the form summary element to bind
-   */
-  function onFormSummaryBind(detail: FormSummaryBindRelayDetail) {
-    // save the form-summary element reference for relaying messages
-    _formSummaryEl = detail.el;
+      // clear all the subform items
+      resetFormFields(pageId);
 
-    // sync any initial state
-    syncFormSummaryState();
+      // send message up to app level with the changes
+      dispatch(_rootEl, "_subformChange", _state);
+    });
   }
 
-  function onFieldsetBind(detail: FieldsetBindRelayDetail) {
-    const { id } = detail;
-    _fieldsets[id] = detail;
+  function resetFormFields(pageId: string) {
+    for (const [key, el] of Object.entries(_formFields)) {
+      if (key.startsWith(`${pageId}:`)) {
+        // TODO: would this not also require setting the `checked` attribute for checkboxes and radios?
+        // use the goa:reset event instead
+        el.setAttribute("value", "");
+      }
+    }
   }
 
-  /**
-   * Create collection of fieldsets and relay messages to them to make the current item visible
-   * @param detail Contains the child fieldset to bind
-   */
-  function onFormPageBind(detail: FormPageBindRelayDetail) {
-    // save the fieldsets to allow for later sending of messages
-    _formPages[detail.id] = detail;
-
-    // save the initial state of the fieldset (data prop not set)
-    _state.form[detail.id] = { ..._state.form[detail.id], heading: detail.heading };
-
-    // Once all FormPages are obtained, set the visibility of the first item in the list
-    // as visible for the default state; this may be overridden if the state is initialized
-    // after being fetched.
-    _formItemBindingTimeoutId = performOnce(_formItemBindingTimeoutId, () => {
-      // mark the first fieldset as active
-      const [id] = Object.entries(_formPages)[0];
-      addToHistory(id);
-      sendToggleActiveStateMsg(id);
+  function addBackListener() {
+    _rootEl.addEventListener("form-page:back", () => {
+      _state.history.pop();
+      setPageVisibility(_state.history[_state.history.length - 1]);
     });
   }
 
-  /**
-   * Adds a given identifier to the history if it is not already present.
-   *
-   * @param {string} id - The unique identifier to be added to the history.
-   * @return {void} This method does not return a value.
-   */
-  function addToHistory(id: string) {
-    if (_state.history.includes(id)) {
-      console.warn("Form:addToHistory", name, "history already contains id", id);
-      return;
-    }
-
-    _state.history.push(id);
+  function getCurrentPage() {
+    const index = _state.history.length - 1;
+    return _state.history[index];
   }
 
-  /**
-   * Listens to `_change` events by input elements nested within fieldsets and update the state
-   * @param detail Contains the id, state, and dispatch type of the changed fieldset
-   */
-  function onFieldsetChange(detail: FieldsetChangeRelayDetail) {
-    const { id, state } = detail;
+  function addChangeListener() {
+    const listener = (e: Event) => {
+      const target = e.target as HTMLElement;
+
+      // only handle change events from specific elements
+      if (target.dataset["pfItem"] === undefined) {
+        e.stopPropagation();
+        return;
+      }
+
+      // `valueStr` is only from the datepicker and is the preferred format
+      const { name, value, valueStr } = (e as CustomEvent).detail;
+
+      // ennsure that the element belongs to the current page that is visible
+      const fieldKey = `${_currentPage}:${name}`;
+      if (!_formFields[fieldKey]) {
+        console.error("Invalid formField key: ", fieldKey);
+        return;
+      }
+
+      // data added to buffer to allow for cancellation
+      _state = {..._state, dataBuffer: {..._state.dataBuffer, [name]: valueStr || value }}
 
-    // updating form state with the fieldset specific data
-    _state.form[id] = { heading: state.heading, data: { type: "details", fieldsets: state.data } };
+      // emit the form's change event that may be handled externally
+      dispatch(
+        _rootEl,
+        "_change",
+        {
+          state: _state,
+          name,
+          value: valueStr || value, // prefer valueStr over value for the datepicker
+        },
+        { bubbles: true },
+      );
+
+      // for some reason if this is at the top of the function the dispatch above doesn't fire properly
+      e.stopPropagation();
+    };
+
+    _rootEl.addEventListener("_change", listener);
   }
 
-  /**
-   * Handles continue events from fieldsets to navigate between pages
-   * @param detail Contains the next page to navigate to
-   */
-  function onContinue(detail: ExternalContinueRelayDetail) {
-    const { next } = detail;
-    const lastPage = _state.history[_state.history.length - 1];
-    if (!lastPage) {
-      console.warn("Form:onContinue", name, "no last page");
-      return;
-    }
+  function addRelayListener() {
+    receive(_rootEl, (action, data, event) => {
+      switch (action) {
+        case "form-page:continue":
+          onContinue(event, data as string);
+          break;
+        case "form-page:cancel":
+          onCancel(event, data as string);
+          break;
+        case "form-summary:bind":
+          _formSummaryEl = data as HTMLElement;
+          break;
+        case "form-summary:change":
+          const page = data as string;
+          _formPages[page].setAttribute("data-pf-editting", "");
+          setPageVisibility(page);
+          break;
+      }
+    });
+  }
+
+  function init(data: PFState, { outline }: FormProps): PFState {
+    const state = data || {
+      data: {},
+      dataBuffer: {},
+      history: [],
+    };
+    _formOutline = outline;
 
-    // dispatch state to app to allow dynamic binding
-    dispatchStateChange();
+    // get all fieldsets
+    const pages = document.querySelectorAll("goa-public-form-page");
 
-    // if no page is currently being edited just go to the next page
-    if (_state.editting) {
-      // clear the errors of the current page being edited
-      resetFieldsetErrors(_state.editting);
+    _currentPage = state.history[state.history.length - 1] || pages[0].id;
 
-      // when editting a previous value, we need to determine if the `next` page is in the same
-      // "direction" as was previously followed, and if so send them back to the last page in their
-      // history (summary). If the `next` is different then the previous history must be cleared
-      // from that point on.
-      const oldNextIndex = _state.history.indexOf(_state.editting) + 1;
+    pages.forEach((page, _index) => {
+      // @ts-ignore
+      const id = page.getAttribute("id") || page.id;
 
-      // reset page being editted
-      _state.editting = "";
+      if (!id) {
+        console.error("Missing the `id` attribute from the goa-public-form-page component");
+        return;
+      }
 
-      // user input did not affect their path, so forward them back to the end, otherwise the user
-      // has altered their path and the history must be clear from this point forward
-      const jumpToSummary = _state.history[oldNextIndex] === next;
-      if (jumpToSummary) {
-        sendToggleActiveStateMsg(lastPage);
+      // hide non-current pages and if current it needs to be added to the history stack
+      if (id != _currentPage) {
+        (page as HTMLElement).style.display = "none";
       } else {
-        _state.history = [..._state.history.slice(0, oldNextIndex), next];
-        sendToggleActiveStateMsg(next);
-        sendEdittingStateMsg("");
+        state.history.push(id);
       }
-    } else {
-      // clear most recent fieldset's errors, to prevent previously fixed errors from still being seen
-      resetFieldsetErrors(lastPage);
 
-      // prevent duplicates in history
-      if (lastPage !== next) {
-        addToHistory(next);
+      _formPages[id] = page as HTMLElement;
+
+      // set the formPage's props (heading, section-title, ...)
+      for (let [name, val] of Object.entries(_formOutline[id]?.props || {})) {
+        page.setAttribute(name, val);
       }
 
-      // show the next page and hide the others
-      sendToggleActiveStateMsg(next);
-    }
+      // initialze the page data
+      // TODO: maybe defining an attribute on the form page component would be better here
+      if (page.hasAttribute("data-pf-list")) {
+        state.data[id] ||= []; // set to empty array if not already set by restored state
+      } else {
+        state.data[id] ||= {}; // set to empty dict if not already set by restored state
+      }
 
-    // sync the new state
-    syncFormSummaryState();
-  }
+      // initialize data to ensure the form summary order is consistent with the order of the fields within the form
+      const formItems = page.querySelectorAll("[data-pf-item]");
+      formItems.forEach((fi) => {
+        // @ts-ignore
+        const name = fi.getAttribute("name") || fi.name;
+        if (name) {
+          // set non-list typed values to blank
+          if (!(page as HTMLElement).dataset["pfList"]) {
+            state.data[id][name] ||= "";
+          }
+          _formFields[`${id}:${name}`] = fi as HTMLElement;
+        }
+      });
+    });
 
-  /**
-   * Synchronizes the form summary state with the app to ensure consistent display of form data
-   */
-  function syncFormSummaryState() {
-    // filter out any form items that don't contain fieldsets
-    const filteredState = { ..._state };
-    const fieldsetKeys = Object.keys(_fieldsets);
-
-    filteredState.form = Object.entries(filteredState.form)
-      .filter(([id, _]) => {
-        return fieldsetKeys.includes(id);
-      })
-      .reduce((acc, [id, item]) => {
-        acc[id] = item;
-        return acc;
-      }, {});
-
-    relay<FormDispatchStateRelayDetail>(
-      _formSummaryEl,
-      FormDispatchStateMsg,
-      filteredState,
-    );
-  }
+    _state = state;
 
-  /**
-   * Handles setting the page to edit mode and updating the state accordingly
-   * @param detail Contains the id of the page to set as the current editing page
-   */
-  function onSetPage(detail: FormSummaryEditPageRelayDetail) {
-    // editting mode is an ephemeral value and is *not* saved to local storage
-    _state.editting = detail.id;
+    syncFormSummary();
+    bindFormFieldValues(state);
 
-    sendToggleActiveStateMsg(detail.id);
-    sendEdittingStateMsg(detail.id);
+    return _state;
   }
 
-  /**
-   * Notifies fieldsets of editting state to allow them to not show the `back` link
-   */
-  function sendEdittingStateMsg(id: string) {
-    for (const formPage of Object.values(_formPages)) {
-      relay<FormDispatchEditRelayDetail>(
-        formPage.el,
-        FormDispatchEditMsg,
-        { id }
-      );
+  // allows pages to be set/reset on initial form load and when cancelling an edit
+  function bindFormFieldValues(state: PFState) {
+    for (const [id, page] of Object.entries(state.data)) {
+      for (const [name, data] of Object.entries(page)) {
+        const key = `${id}:${name}`;
+        if (!_formOutline[id].subform) {
+          const el = _formFields[key];
+          // TODO: don't like that this is being specific
+          if (el.tagName === "GOA-CHECKBOX") {
+            if (data) {
+              el.setAttribute("checked", data)
+            }
+          } else {
+            el.setAttribute("value", data);
+          }
+        }
+      }
     }
   }
 
-  /**
-   * Handles marking the form as complete and dispatching the final state to the app
-   */
-  function onFormComplete() {
-    dispatchStateChange("complete", 0);
-    dispatch<FormState>(_rootEl, "_complete",
-      {..._state, status: "complete"},
-      { bubbles: true }
-    );
-  }
+  // Event listeners
 
-  function resetState() {
-    // After the first time _state is initialized the history is initialized with the
-    // first FormPage id after handling the FormPage binding, so this first page needs
-    // to be retained after reset
-    const firstPage = _state.history[0];
-    _state = getDefaultState();
-    addToHistory(firstPage);
-
-    // resetting html inputs within form components
-    for (const { el } of Object.values(_fieldsets)) {
-      relay(el, FormResetFormMsg);
-    }
+  function onCancel(e: Event, pageId: string) {
+    e.stopPropagation();
+
+    _state.dataBuffer = {};
+    _formPages[pageId].removeAttribute("data-pf-editting");
 
-    // reset form summary
-    syncFormSummaryState();
+    const lastPage = _state.history[_state.history.length - 1];
 
-    // reset the active fieldset
-    const [id] = Object.entries(_formPages)[0];
-    sendToggleActiveStateMsg(id);
+    setPageVisibility(lastPage);
+    bindFormFieldValues(_state);
   }
 
-  // *********
-  // Functions
-  // *********
+  function validate(id: string): [Record<string, string>, number] {
+    const section = _formOutline[id];
+    const errors: Record<string, string> = {};
 
-  /**
-   * Dispatches state change events to the app to trigger any dynamic binding
-   */
-  function dispatchStateChange(status: FormStatus = "in-progress", debounce = 500) {
-    _stateChangeTimeoutId = performOnce(_stateChangeTimeoutId, () => {
-      dispatch<StateChangeRelayDetail>(
-        _rootEl,
-          StateChangeEvent,
-          { type: "details", data: { ..._state, lastModified: new Date(), status }},
-          { bubbles: true },
-      );
-    }, debounce);
+    let errorCount = 0;
+
+   // perform error checks for each form item
+    for (const [name, validators] of Object.entries(section.validators || {})) {
+      const val = _state.dataBuffer[name];
+
+      for (const validator of validators) {
+        const err = validator(val);
+        if (err) {
+          errors[name] = err;
+          errorCount++;
+          break; // only show one error per field
+        }
+      }
+    }
+
+    return [errors, errorCount];
   }
 
-  /**
-   * Resets the errors for a specific fieldset
-   * @param fieldsetName The id of the fieldset to reset errors for
-   */
-  function resetFieldsetErrors(fieldsetName: string) {
-    // fieldsets don't exist in all FormPages
-    if (!_fieldsets[fieldsetName]) {
-      console.warn("Form:resetFieldsetErrors", name, "fieldset does not exist", fieldsetName);
-      return;
+  // Set error attrs on html elements to allow errors to appear within the form
+  function renderErrors(id: string, errors: Record<string, string>) {
+    for (const [name, error] of Object.entries(errors)) {
+      const key = `${id}:${name}`;
+      _formFields[key].setAttribute("error", "");
+      _formFields[key].closest("goa-form-item")?.setAttribute("error", error);
     }
-    relay(_fieldsets[fieldsetName].el, FormResetErrorsMsg, null);
   }
 
-  /**
-   * Sends a toggle active state message to fieldsets to highlight the current active page
-   * @param page The id of the page to set as active
-   */
-  function sendToggleActiveStateMsg(page: string) {
-    const keys = Object.keys(_formPages);
-    keys.forEach((key) => {
-      relay<FormToggleActiveRelayDetail>(
-        _formPages[key].el,
-        FormToggleActiveMsg,
-        { active: key === page },
-      );
-    });
+  function resetErrors() {
+    for (const [_name, el] of Object.entries(_formFields)) {
+      el.removeAttribute("error");
+      el.closest("goa-form-item")?.removeAttribute("error");
+    }
   }
 
-  function onFormPageBack(_e: Event) {
-    // update history state of the current item
-    const formHistory = _state.history;
+  function onContinue(e: Event, id: string) {
+    e.stopPropagation();
 
-    // first page of a subform, redispatch event to allow the parent form to handle it
-    if (formHistory.length === 1) {
-      relay(_senderEl, FormPageBackMsg, null, { bubbles: true });
+    const section = _formOutline[id];
+    const isSubform = _formOutline[id].subform;
+
+    if (!section) {
+      console.error(
+        `Missing the public-form-page id of '${id}' from the defined ${"`outline`"}`,
+      );
       return;
     }
 
-    formHistory.pop();
-    _state.history = formHistory;
+    const [errors, errorCount] = validate(id);
+    if (errorCount > 0) {
+      renderErrors(id, errors);
+      return;
+    }
 
-    sendToggleActiveStateMsg(_state.history[_state.history.length - 1]);
+    // if there are no errors ensure all form-items have their error state reset
+    resetErrors();
 
-    // browser back
-    history.back();
-  }
+    // the `next` section is either a string or a function that returns a string
+    try {
+      let next =
+        typeof section.next === "string" ? section.next : section.next(_state); // error thrown from here on form level validation failure
 
-  /**
-   * Sets the form state from the passed in data
-   * @param detail The data to initialize the form state with
-   */
-  function setState(detail?: ExternalInitStateDetail) {
-    if (typeof detail === "string") {
-      _state = { ..._state, ...JSON.parse(detail) };
-    } else {
-      _state = { ..._state, ...(detail || {}) };
-    }
+      // when editting the `next` field has to be checked to determine whether to jump back
+      // to the summary or trim the history since a new path will be taken
+      const currentHistoryIndex = _state.history.findIndex(
+        (value) => value === id,
+      );
+      const nextIdInPreviousPath = _state.history[currentHistoryIndex + 1];
 
-    let lastViewedFieldset;
-    // initialize history with first page if history is empty
-    let historyPageCount = _state.history?.length ?? 0;
-    if (historyPageCount > 0) {
-      lastViewedFieldset = _state.history[historyPageCount - 1];
-    }
+      // subform data is already validated
+      if (!isSubform) {
+        // TODO: add data format per field here, the formatted values will need to be saved to a different field to allow the raw value being available if required ex. dates
 
-    setTimeout(() => {
-      // Show the last viewed page or show the first page
-      if (lastViewedFieldset) {
-        // last page has priority
-        const item = _formPages[lastViewedFieldset];
-        sendToggleActiveStateMsg(item.id);
-      } else {
-        // mark the first fieldset as active
-        const [id] = Object.entries(_formPages)[0];
-        addToHistory(id);
-        sendToggleActiveStateMsg(id);
+        // save the validated data in the top level state
+        _state.data = { ..._state.data, [id]: { ..._state.dataBuffer } };
       }
+      _state.dataBuffer = {};
 
-      syncFormSummaryState();
-      dispatchStateChange(_state.history.length > 1 ? "in-progress" : "not-started");
-      dispatchChildFormState();
-    }, 200);
-  }
+      // jump back to summary of the new *next* step is equal to the previous next step
+      if (next === nextIdInPreviousPath) {
+        // jump to summary
+        const last = _state.history[_state.history.length - 1];
+        setPageVisibility(last);
+      } else {
+        // When progressing to the next page there should never be any history that lies after it.
+        // In the case that the user is progressing in a linear fashion there will already be
+        // no history item that lies after the current. However, in the case that the user editted
+        // a field that resulted in a path change the history after the current needs to be removed.
+        _state.history = _state.history.slice(0, currentHistoryIndex + 1);
+
+        // now the next history item can be pushed
+        _state.history.push(next);
 
-  /**
-   * Dispatches the state to the child forms
-   */
-  function dispatchChildFormState() {
-    for (const [id, el] of Object.entries(_childForms)) {
-     const data = _state.form[id]?.data;
-      // data is only sent to child forms and all child forms are lists
-      if (data?.type === "list") {
-        relay<FormDispatchStateRelayDetailList>(el, FormDispatchStateMsg, data.items);
+        setPageVisibility(next);
       }
+
+      // ensure any previous formPage error is reset
+      _formPages[id].removeAttribute("error");
+
+      // send message to application
+      dispatch(_rootEl, "_next", _state, { bubbles: true });
+
+      syncFormSummary();
+    } catch (e) {
+      _formPages[id].setAttribute("error", e as string);
     }
   }
 
-  /**
-   * Restores the fieldset and subform states
-   */
-  function setChildrenState() {
-    for (const [name, detail] of Object.entries(_fieldsets)) {
-      const value = _state.form[name]?.data;
-      if (value) {
-        relay<FormSetFieldsetRelayDetail>(detail.el, FormSetFieldsetMsg, {
-          name,
-          value,
-        });
-      }
+  function syncFormSummary() {
+    dispatch(_formSummaryEl, "form:summary-sync", {
+      ..._state,
+      outline: _formOutline,
+    });
+  }
+
+  // TODO: rename this function to something is more generic due to databuffer setting
+  function setPageVisibility(pageId: string) {
+    for (const [id, el] of Object.entries(_formPages)) {
+      el.style.display = id === pageId ? "block" : "none";
     }
+
+    _currentPage = pageId;
+
+    // fill buffer since that is what the `onContinue` uses on validation
+    _state.dataBuffer = (_state.data[pageId] as PFPage) || {};
   }
 </script>
 
-<div bind:this={_senderEl} />
-<form
-  bind:this={_rootEl}
-  data-id={`form: ${name}`}
-  style={style("visibility", status === "complete" ? "visible" : "hidden")}
->
-  <div bind:this={_childReceiverEl}>
+<form bind:this={_rootEl} style={calculateMargin(mt, mr, mb, ml)}>
+  <goa-circular-progress visible={!_state} />
+  <div style={`display: ${_state ? "block" : "none"}`}>
     <slot />
   </div>
 </form>
diff --git a/libs/web-components/src/components/form/FormPage.svelte b/libs/web-components/src/components/form/FormPage.svelte
index 661c3e8a8..9fd135e20 100644
--- a/libs/web-components/src/components/form/FormPage.svelte
+++ b/libs/web-components/src/components/form/FormPage.svelte
@@ -2,227 +2,99 @@
   customElement={{
     tag: "goa-public-form-page",
     props: {
+      id: { type: "String", reflect: true },
+      error: { type: "String", reflect: true },
+      editting: { type: "Boolean", attribute: "data-pf-editting", reflect: true },
       buttonText: { type: "String", attribute: "button-text" },
-      buttonVisibility: { type: "String", attribute: "button-visibility" },
       subHeading: { type: "String", attribute: "sub-heading" },
       sectionTitle: { type: "String", attribute: "section-title" },
-      backUrl: { attribute: "back-url", type: "String" },
-      summaryHeading: { attribute: "summary-heading", type: "String" },
-    }
+      backVisibility: { attribute: "back-visibility", type: "String" },
+    },
   }}
 />
 
 <script lang="ts">
-  import { calculateMargin, Spacing } from "../../common/styling";
-  import { dispatch, receive, relay, styles } from "../../common/utils";
-  import {
-    FieldsetBindMsg,
-    FieldsetBindRelayDetail,
-    FieldsetChangeMsg,
-    FieldsetChangeRelayDetail,
-    FieldsetCompleteMsg,
-    FormDispatchEditMsg,
-    FormDispatchEditRelayDetail, FormPageBackMsg,
-    FormPageBindMsg,
-    FormPageBindRelayDetail,
-    FormPageContinueMsg,
-    FormPageContinueRelayDetail,
-    FormToggleActiveMsg,
-    FormToggleActiveRelayDetail,
-  } from "../../types/relay-types";
   import { onMount } from "svelte";
+  import { relay, dispatch } from "../../common/utils";
 
-  export let buttonText: string = "";
+  // TODO: rename this form to goa-pf-page
 
-  // common with fieldset
   export let id: string = "";
+  export let buttonText: string = "";
+  export let error: string = "";
+  export let editting: boolean;
   export let heading: string = "";
-  export let summaryHeading: string = "";
   export let subHeading: string = "";
   export let sectionTitle: string = "";
-  export let backUrl: string = "";
-  export let type: "step" | "summary" | "multistep" = "step";
-  export let buttonVisibility: "visible" | "hidden" = "visible";
-
-  export let mt: Spacing = null;
-  export let mr: Spacing = null;
-  export let mb: Spacing = "3xl";
-  export let ml: Spacing = null;
-  export let active: boolean = false;
-
-  // Private
+  export let backVisibility: "visible" | "hidden" = "visible";
 
-  let _senderEl: HTMLElement;
   let _rootEl: HTMLElement;
-  let _fieldsetEl: HTMLElement;
-  let _active: boolean = false;
-  let _editting: string = "";  // the id of the form page that is currently being editted
-
-  // ========
-  // Reactive
-  // ========
-
-  $: if (_active) {
-    const url = new URL(location.href);
-    url.searchParams.set("page", id);
-    history.pushState({ page: id }, "", url);
-  }
+  let _senderEl: HTMLElement;
 
   onMount(() => {
-    bindReceiver();
-    bindWithParent();
-  });
-
-  function bindReceiver() {
-    receive(_rootEl, (action, data, event) => {
-      switch (action) {
-        case FormToggleActiveMsg:
-          onToggleActiveState(data as FormToggleActiveRelayDetail);
-          event.stopPropagation();
-          break;
-        case FormDispatchEditMsg:
-          onFormDispatch(data as FormDispatchEditRelayDetail);
-          event.stopPropagation();
-          break;
-        case FieldsetChangeMsg:
-          onFieldsetChange(data as FieldsetChangeRelayDetail);
-          event.stopPropagation();
-          break;
-        case FieldsetBindMsg:
-          bindFieldset(event, data as FieldsetBindRelayDetail);
-          event.stopPropagation();
-          break;
-      }
-    });
-  }
-
-  function bindFieldset(event: Event, detail: FieldsetBindRelayDetail) {
-    event.stopPropagation();
+    addSubformInterceptors();
+  })
 
-    _fieldsetEl = detail.el;
-    detail.cb?.(id);
-
-    // resend up with the id
-    relay(_senderEl, FieldsetBindMsg, { ...detail, id }, { bubbles: true });
-  }
-
-  function bindWithParent() {
-    setTimeout(() => {
-      relay<FormPageBindRelayDetail>(
-        _senderEl,
-        FormPageBindMsg,
-        { id, el: _rootEl, heading: summaryHeading },
-        { bubbles: true },
-      );
-    }, 10);
-  }
+  // Need to add the form page's id to any events dispatched form a subform
+  function addSubformInterceptors() {
+    const addIdToEvent = (e: Event) => {
+      const _id = (e as CustomEvent).detail;
+      const detail = { pageId: id, _id };
 
-  function onFieldsetChange(detail: FieldsetChangeRelayDetail) {
-    relay<FieldsetChangeRelayDetail>(
-      _senderEl,
-      FieldsetChangeMsg,
-      { ...detail, state: { ...detail.state, heading: summaryHeading } },
-      { bubbles: true },
-    );
-  }
-
-  function onToggleActiveState(detail: FormToggleActiveRelayDetail) {
-    _active = detail.active;
-    relay(_fieldsetEl, FormToggleActiveMsg, { active: _active });
-  }
-
-  // allow customization of form if user has jumped back to a question (editting mode)
-  function onFormDispatch(detail: FormDispatchEditRelayDetail) {
-    _editting = detail.id;
-  }
-
-  // Either directly or indirectly there is a _continue message sent up the dom tree.
-  // If a fieldset exists, a message must be sent to the fieldset to get the fieldset
-  // to send the _continue message, as the message will contain the data within the fieldset.
-  // If no fieldset exists (text only or summary page) then no data exists so a _continue
-  // message can be sent directly from this component.
-  function dispatchContinueMsg(cancelled = false) {
-    if (_fieldsetEl) {
-      // send message to fieldset to then get it to send data up
-      relay<FormPageContinueRelayDetail>(_fieldsetEl, FormPageContinueMsg, { cancelled });
-    } else {
-      dispatch(_senderEl, "_continue", null, { bubbles: true });
+      e.stopPropagation();
+      dispatch(_senderEl, e.type, detail, { bubbles: true });
     }
+
+    _rootEl.addEventListener("pf:subform:add", addIdToEvent);
+    _rootEl.addEventListener("pf:subform:edit", addIdToEvent);
+    _rootEl.addEventListener("pf:subform:save", addIdToEvent);
+    _rootEl.addEventListener("pf:subform:delete", addIdToEvent);
+    _rootEl.addEventListener("pf:subform:cancel", addIdToEvent);
   }
 
-  function dispatchCompletion() {
-    dispatchContinueMsg(); // This was added to ensure that above issue is "fixed"
-    relay(_senderEl, FieldsetCompleteMsg, null, { bubbles: true });
+  function dispatchCancel() {
+    relay(_rootEl, "form-page:cancel", id, { bubbles: true });
   }
 
-  function handleBack(e: Event) {
-    relay(_senderEl, FormPageBackMsg, null, { bubbles: true });
-    e.stopPropagation();
+  function dispatchContinue() {
+    relay(_rootEl, "form-page:continue", id, { bubbles: true });
   }
 </script>
 
-<section
-  bind:this={_senderEl}
-  style={styles(
-    calculateMargin(mt, mr, mb, ml),
-    `display: ${_active || active ? "block" : "none"}`,
-  )}
->
-  <div bind:this={_rootEl}>
-    {#if _editting !== id}
-      {#if backUrl}
-        <goa-link action="back" leadingicon="chevron-back" mb="2xl">
-          {#if backUrl === "#"}
-            <a>Back</a>
-          {:else}
-            <a href={backUrl}>Back</a>
-          {/if}
-        </goa-link>
-      {/if}
-
-      {#if !backUrl && type === "step"}
-        <goa-link-button
-          leadingicon="chevron-back"
-          mb="2xl"
-          on:_click={handleBack}
-        >
-          Back
-        </goa-link-button>
-      {/if}
-    {/if}
-
-    {#if sectionTitle}
-      <goa-text size="body-l" mt="none" mb="xs" color="secondary">{sectionTitle}</goa-text>
-    {/if}
-    {#if heading}
-      <goa-text as="h2" size="heading-l" mt="none" mb={subHeading ? "none" : "m"}>{heading}</goa-text>
-    {/if}
-    {#if subHeading}
-      <goa-text size="body-l" mt="2xs" mb="xl" color="primary">{subHeading}</goa-text>
-    {/if}
-
-    <slot />
-
-    {#if type !== "multistep"}
-      <goa-block mt="2xl">
-        {#if _editting === id}
-          <goa-button on:_click={() => dispatchContinueMsg(true)} type="secondary">
-            Cancel
-          </goa-button>
-        {/if}
-
-        {#if type === "summary"}
-          <goa-button on:_click={() => dispatchCompletion()} type="primary">
-            {buttonText || "Confirm"}
-          </goa-button>
-        {:else}
-          {#if buttonVisibility === "visible"}
-            <goa-button on:_click={() => dispatchContinueMsg()} type="primary">
-              {buttonText || "Continue"}
-            </goa-button>
-          {/if}
-        {/if}
-      </goa-block>
+<div bind:this={_senderEl} />
+<section bind:this={_rootEl}>
+  {#if !editting && backVisibility === "visible"}
+    <goa-link-button leadingicon="chevron-back" mb="2xl" action="form-page:back">
+      Back
+    </goa-link-button>
+  {/if}
+
+  {#if sectionTitle}
+    <goa-text size="body-l" mt="none" mb="xs" color="secondary">{sectionTitle}</goa-text>
+  {/if}
+  {#if heading}
+    <goa-text as="h2" size="heading-l" mt="none" mb={subHeading ? "none" : "m"}
+      >{heading}</goa-text
+    >
+  {/if}
+  {#if subHeading}
+    <goa-text size="body-l" mt="2xs" mb="xl" color="primary">{subHeading}</goa-text>
+  {/if}
+
+  {#if error}
+    <goa-text size="body-l" mt="2xs" mb="xl" color="primary">{error}</goa-text>
+  {/if}
+
+  <slot />
+
+  <goa-block mt="2xl">
+    {#if editting}
+      <goa-button on:_click={dispatchCancel} type="secondary">
+        Cancel
+      </goa-button>
     {/if}
-  </div>
+    <goa-button on:_click={dispatchContinue} type="primary">
+      {buttonText || "Continue"}
+    </goa-button>
+  </goa-block>
 </section>
diff --git a/libs/web-components/src/components/form/FormSummary.svelte b/libs/web-components/src/components/form/FormSummary.svelte
index 6fcf76430..08a2efffe 100644
--- a/libs/web-components/src/components/form/FormSummary.svelte
+++ b/libs/web-components/src/components/form/FormSummary.svelte
@@ -2,162 +2,110 @@
 
 <script lang="ts">
   import { onMount } from "svelte";
-  import {
-    FieldsetItemState,
-    FormDispatchStateMsg,
-    FormDispatchStateRelayDetail,
-    FormState,
-    FormSummaryBindMsg,
-    FormSummaryBindRelayDetail,
-    FormSummaryEditPageMsg,
-    FormSummaryEditPageRelayDetail,
-  } from "../../types/relay-types";
-
-  import { receive, relay } from "../../common/utils";
+
+  import { relay } from "../../common/utils";
+  import { PFField, PFSummary, PFOutlineItem, PFPage } from "@abgov/ui-components-common";
 
   export let heading: string = "";
 
   let _rootEl: HTMLElement;
-  let _state: FormState;
+  let _state: PFSummary;
 
   onMount(() => {
-    addRelayListener();
-    addChangeClickHandler();
-
-    relay<FormSummaryBindRelayDetail>(
-      _rootEl,
-      FormSummaryBindMsg,
-      { el: _rootEl },
-      { bubbles: true, timeout: 100 },
-    );
+    bindWithForm();
+    addChangeListener();
   });
 
-  function addChangeClickHandler() {
-    _rootEl.addEventListener("change", (e: Event) => {
-      const page = (e as CustomEvent).detail;
-      changePage(e, page);
+  function bindWithForm() {
+    // listen for message from parent
+    _rootEl.addEventListener("form:summary-sync", (e) => {
+      _state = (e as CustomEvent).detail as PFSummary;
     });
-  }
 
-  function addRelayListener() {
-    receive(_rootEl, (action, data, e) => {
-      switch (action) {
-        case FormDispatchStateMsg:
-          onFormDispatch(data as FormDispatchStateRelayDetail);
-          break;
-      }
-    });
+    // send el to parent form
+    relay(_rootEl, "form-summary:bind", _rootEl, { bubbles: true });
   }
 
-  /**
-   * Receive state updates from the form
-   * @param detail
-   */
-  function onFormDispatch(detail: FormDispatchStateRelayDetail) {
-    _state = detail;
+  // Listen for events when clicking the `Change` link
+  function addChangeListener() {
+    _rootEl.addEventListener("change", (e) => {
+      const id = (e as CustomEvent).detail
+      relay(_rootEl, "form-summary:change", id, { bubbles: true });
+    })
   }
 
-  function changePage(e: Event, pageId: string) {
-    relay<FormSummaryEditPageRelayDetail>(
-      _rootEl,
-      FormSummaryEditPageMsg,
-      { id: pageId },
-      { bubbles: true },
-    );
-    e.preventDefault();
-  }
-
-  function getHeading(page: string): string {
-    return _state.form?.[page]?.heading || "";
-  }
-
-  function getData(
-    state: FormState,
-    page: string,
-  ): Record<string, FieldsetItemState> {
-    if (state.form[page]?.data?.type !== "details") {
-      return;
-    }
-
-    return Object.entries(state.form[page].data.fieldsets || {})
-      .sort((itemsA, itemsB) => (itemsA[1].order > itemsB[1].order ? 1 : -1))
-      .reduce((acc, [name, fieldsetState]) => {
-        acc[name] = fieldsetState;
-        return acc;
-      }, {});
-  }
-
-  function getDataList(
-    state: FormState,
-    page: string,
-  ): Record<string, FieldsetItemState>[] {
-    const pageData = state.form[page]?.data;
-    if (pageData?.type !== "list") {
-      return;
-    }
-
-    return pageData.items.reduce((acc, formState) => {
-      const data = formState.history.reduce((acc, fieldsetId) => {
-        acc = { ...acc, ...getData(formState, fieldsetId) };
-        return acc;
-      }, {});
-      acc.push(data);
-      return acc;
-    }, []);
-  }
+  // ====
+  // Formatting
+  // ====
 
   function isBlank(val: string | number | Date | string[]): boolean {
     if (Array.isArray(val)) {
       return val.length === 0;
     }
+
     const strVal = String(val);
+
     if (strVal.length === 0) return true;
     if (strVal === "0000-01-00") return true;
+
     return false;
   }
 
-  const dateMatchRegex = /^\d{4}-\d{2}-\d{2}$/;
-  const months = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ];
-
-  function formatValue(
-    value: string | number | Date | string[],
-    valueLabel?: string,
-    labels?: string[],
+  function format(
+    value: string,
+    formatter?: (input: string) => string
   ): string | string[] {
-    if (isBlank(value)) {
-      return "— Not provided —";
+    if (formatter && value) {
+      return formatter(value);
     }
 
-    // Check for valueLabels first (array of labels)
-    if (labels && labels.length > 0) {
-      return labels;
+    if (!value) {
+      return "— Not provided —";
     }
 
-    // Then check for valueLabel (single label)
-    if (valueLabel) {
-      return valueLabel;
-    }
+    return value;
+  }
+
+  // show if the page contains data => is either an array or object
+  function showInSummary(pageId: string) {
+    let page = _state.data[pageId];
+    return page && Array.isArray(page) || Object.keys(page).length > 0;
+  }
+
+  function getOutlineItem(pageId: string): PFOutlineItem {
+    return _state.outline[pageId];
+  }
 
-    const strValue = String(value);
-    if (strValue.match(dateMatchRegex)) {
-      const [year, month, day] = strValue.split("-");
-      return `${months[parseInt(month) - 1]} ${parseInt(day)}, ${year}`;
+  function getDataItem(pageId: string): PFPage {
+    return _state.data[pageId] as PFPage;
+  }
+
+  function getDataItems(pageId: string): PFPage[] {
+    return _state.data[pageId] as PFPage[];
+  }
+
+  function getHeading(pageId: string): string {
+    return getOutlineItem(pageId).props["heading"] ?? "";
+  }
+
+  function getLabel(pageId: string, name: string): string {
+    return getOutlineItem(pageId).fields[name]?.label ?? name;
+  }
+
+  function getField(pageId: string, name: string): PFField {
+    return getOutlineItem(pageId).fields[name] ?? {};
+  }
+
+  function getSummary(pageId: string): Record<string, string> {
+    const data = _state.data[pageId] as PFPage;
+    if (!data) {
+      throw new Error("getSummary(): no data found");
     }
+    return _state.outline[pageId].summarize?.(data) || {};
+  }
 
-    return strValue;
+  function isSubform(pageId: string): boolean {
+    return _state.outline[pageId].subform;
   }
 </script>
 
@@ -167,64 +115,87 @@
       >{heading}</goa-text
     >
   {/if}
-  {#if _state}
-    {#each _state.history as page}
-      {#if _state.form[page]}
+  {#if Object.keys(_state || {}).length > 0}
+    {#each _state?.history as page}
+      {#if showInSummary(page)}
         <goa-container>
           <div class="summary" class:summary-with-header={!!getHeading(page)}>
             {#if getHeading(page)}
-              <goa-text class="heading" color="secondary" mt="none" mb="s"
-                >{getHeading(page)}</goa-text
-              >
+              <goa-text class="heading" color="secondary" mt="none" mb="s">
+                {getHeading(page)}
+              </goa-text>
             {/if}
-
-            <div class="data">
-              {#if _state.form[page]?.data?.type}
-                {#if _state.form[page]?.data?.type === "details"}
+            {#if isSubform(page)}
+              <div class="data">
+                {#each getDataItems(page) as item, index}
                   <table>
-                    {#each Object.entries(getData(_state, page)) as [_, data]}
+                    <!-- show custom summary if summarize function is defined -->
+                    {#if getOutlineItem(page).summarize}
+                      {#each Object.entries(getSummary(page)) as [key, value]}
+                        <tr>
+                          <td class="label">{getLabel(page, key)}</td>
+                          <td class="value" class:empty={isBlank(value)}>
+                            {format(value)}
+                          </td>
+                        </tr>
+                      {/each}
+                    <!-- show each data field -->
+                    {:else}
+                      {#each Object.entries(item) as [key, value]}
+                        {#if
+                          getField(page, key).hideInSummary !== "always"
+                          && !(getField(page, key).hideInSummary === "ifBlank" && value === "")
+                          && key !== "_id"
+                        }
+                          <tr>
+                            <td class="label">{getLabel(page, key)}</td>
+                            <td class="value" class:empty={isBlank(value)}>
+                              {format(value, getField(page, key).formatter)}
+                            </td>
+                          </tr>
+                        {/if}
+                      {/each}
+                    {/if}
+                  </table>
+                  {#if getDataItems(page).length-1 !== index}
+                    <goa-divider mt="l" mb="l" />
+                  {/if}
+                {/each}
+              </div>
+            {:else}
+              <div class="data">
+                <table>
+                  <!-- show custom summary if summarize function is defined -->
+                  {#if getOutlineItem(page).summarize}
+                    {#each Object.entries(getSummary(page)) as [key, value]}
                       <tr>
-                        <td class="label">{data.label}</td>
-                        <td class="value" class:empty={isBlank(data.value)}>
-                          {#if Array.isArray(formatValue(data.value, data.valueLabel, data.labels))}
-                            {#each formatValue(data.value, data.valueLabel, data.labels) as label}
-                              <div>{label}</div>
-                            {/each}
-                          {:else}
-                            {formatValue(data.value, data.valueLabel, data.labels)}
-                          {/if}
+                        <td class="label">{getLabel(page, key)}</td>
+                        <td class="value" class:empty={isBlank(value)}>
+                          {format(value)}
                         </td>
                       </tr>
                     {/each}
-                  </table>
-                {:else}
-                  {#each getDataList(_state, page) as item, index}
-                    <table>
-                      {#each Object.entries(item) as [_, data]}
+                  <!-- show each data field -->
+                  {:else}
+                    {#each Object.entries(getDataItem(page)) as [key, value]}
+                      {#if getField(page, key).hideInSummary !== "always"
+                        && !(getField(page, key).hideInSummary === "ifBlank" && value === "")
+                      }
                         <tr>
-                          <td class="label">{data.label}</td>
-                          <td class="value" class:empty={isBlank(data.value)}>
-                            {#if Array.isArray(formatValue(data.value, data.valueLabel, data.labels))}
-                              {#each formatValue(data.value, data.valueLabel, data.labels) as label}
-                                <div>{label}</div>
-                              {/each}
-                            {:else}
-                              {formatValue(data.value, data.valueLabel, data.labels)}
-                            {/if}
+                          <td class="label">{getLabel(page, key)}</td>
+                          <td class="value" class:empty={isBlank(value)}>
+                            {format(value, getField(page, key).formatter)}
                           </td>
                         </tr>
-                      {/each}
-                    </table>
-                    {#if index < getDataList(_state, page).length - 1}
-                      <goa-divider mt="m" mb="m" />
-                    {/if}
-                  {/each}
-                {/if}
-              {/if}
-            </div>
+                      {/if}
+                    {/each}
+                  {/if}
+                </table>
+              </div>
+            {/if}
             <div class="action">
               <goa-link leadingicon="pencil" action="change" action-arg={page}>
-                <a href="#" tabindex="0">Change</a>
+                <a href="#">Change</a>
               </goa-link>
             </div>
           </div>
diff --git a/libs/web-components/src/components/form/SubForm.svelte b/libs/web-components/src/components/form/SubForm.svelte
deleted file mode 100644
index 38751f02a..000000000
--- a/libs/web-components/src/components/form/SubForm.svelte
+++ /dev/null
@@ -1,344 +0,0 @@
-<svelte:options customElement={{
-    tag: "goa-public-subform",
-    props: {
-      continueMsg: { attribute: "continue-msg", type: "String" }
-    }
-  }}
-/>
-
-<script lang="ts">
-  import { onMount, tick } from "svelte";
-  import { dispatch, receive, relay, style, styles } from "../../common/utils";
-  import {
-    ExternalAlterDataMsg,
-    ExternalAlterDataRelayDetail,
-    ExternalContinueMsg,
-    ExternalInitStateMsg,
-    FieldsetBindMsg,
-    FieldsetBindRelayDetail,
-    FormBindMsg,
-    FormBindRelayDetail,
-    FormDispatchStateMsg, FormDispatchStateRelayDetail,
-    FormDispatchStateRelayDetailList, FormPageBackMsg,
-    FormResetFormMsg,
-    FormSetFieldsetMsg,
-    FormState,
-    StateChangeEvent, StateChangeRelayDetail, SubFormBindMsg, SubFormBindRelayDetail,
-    SubFormIndexContinueToParentMsg,
-    SubFormIndexContinueToSubFormMsg,
-    FieldsetCompleteMsg
-  } from "../../types/relay-types";
-
-  // Subform props
-  export let id: string = "";
-
-  // Form props
-  export let name: string;
-  export let backUrl: string = "";
-  export let dispatchOn: "continue" | "complete" = "continue";
-
-  let _formEl: HTMLElement;
-
-  // Receives the events from the goa-public-form element
-  let _receiverEl: HTMLElement;
-
-  // Allows the subform to dispatch off messages to parent form without intercepting it's own messages
-  let _relayEl: HTMLElement;
-
-  // List of all the looped items
-  let _state: FormState[] = [];
-
-  // reference to child fieldsets to allow data to be relayed to them when the subform item index is changed
-  let _fieldsets: Record<string, HTMLElement> = {};
-
-  // Whether the SubForm is showing the index list or the child form component
-  let _mode: "form" | "index" = "index";
-
-  // Index to the current item being created or editted. This allows access to the current
-  // item's history to allow handling of "Back" clicks.
-  let _itemIndex: number = 0;
-
-
-  onMount(() => {
-    addRelayListener();
-    dispatchBindMsg();
-    bindWithParentForm();
-    bindWithSubformIndex();
-  });
-
-  /**
-   * Handler internal form component's _init handler
-   * @param e
-   */
-  function onInit(e: Event) {
-    e.stopPropagation();
-
-    // reference to child form element to allow for later messages to be sent
-    _formEl = (e as CustomEvent).detail.el as HTMLElement;
-
-    // redispatch event, but with a subform reference instead
-    dispatch(_relayEl, "_init", { el: _receiverEl }, { bubbles: true });
-  }
-
-  // FIXME: why does the subformindex not just send a bind message, then this sends a
-  // message back?
-  function bindWithSubformIndex() {
-    setTimeout(() => {
-      const el = document
-        .querySelector("goa-public-subform-index")
-        .shadowRoot
-        .querySelector("[data-bind]") as HTMLElement;
-      relay<SubFormBindRelayDetail>(el, SubFormBindMsg, { el: _receiverEl});
-    }, 10)
-  }
-
-  function addRelayListener() {
-    receive(_receiverEl, (action, data, e) => {
-      e.stopPropagation();
-      switch (action) {
-        // handle data being sent to this component
-        case FormDispatchStateMsg:
-          onDispatchState(data as FormDispatchStateRelayDetailList);
-          break;
-
-        // sets the fieldset/subform data
-        case FormSetFieldsetMsg:
-          onSetFieldset(data as FormState[]);
-          break;
-
-        case FormPageBackMsg:
-          onFormPageBack();
-          break;
-
-        case FieldsetBindMsg:
-          onFieldsetMount(data as FieldsetBindRelayDetail);
-          break;
-
-        case SubFormIndexContinueToSubFormMsg:
-          onSubFormIndexContinueToSubForm();
-          break;
-
-        case SubFormIndexContinueToParentMsg:
-          onSubFormIndexContinueToParent();
-          break;
-
-        case ExternalInitStateMsg:
-          initState(data as FormState[]);
-          break;
-
-        // pass directly down to the form
-        case ExternalContinueMsg:
-          relay(_formEl, ExternalContinueMsg, data);
-          break;
-
-        // bind the list item to the child form
-        case ExternalAlterDataMsg:
-          alterItem(data as ExternalAlterDataRelayDetail);
-          break;
-
-        case FieldsetCompleteMsg:
-          onChildFormComplete(e);
-          break;
-      }
-    });
-  }
-
-  // Handles the Back event when it's sent from the first page within the subform.
-  function onFormPageBack() {
-    // the index page is what was seen before the first page of the subform
-    _mode = "index";
-
-    // clear out any partially completed form from the top of the _state stack
-    _state.pop();
-  }
-
-  function alterItem(detail: ExternalAlterDataRelayDetail) {
-    switch (detail.operation) {
-      case "remove":
-        removeItem(detail.index);
-        break;
-      case "edit":
-        editItem(detail.index);
-        break;
-    }
-  }
-
-  function editItem(index: number) {
-    _mode = "form";
-    setItemIndex(index);
-
-    // send selected item to child form
-    relay<FormDispatchStateRelayDetail>(_formEl, FormDispatchStateMsg, _state[index]);
-  }
-
-  function removeItem(index: number) {
-    _state = [..._state.slice(0, index), ..._state.slice(index + 1)];
-    dispatch<StateChangeRelayDetail>(_relayEl, StateChangeEvent, {
-      type: "list",
-      data: _state,
-      id
-    }, { bubbles: true });
-  }
-
-  function initState(data: FormState[]) {
-    _state = data;
-    resetItemIndex();
-  }
-
-  function onSubFormIndexContinueToSubForm() {
-    _mode = "form";
-  }
-
-  function onSubFormIndexContinueToParent() {
-    _mode = "index";
-    resetItemIndex();
-    dispatch(_relayEl, "_continue", { el: _receiverEl }, { bubbles: true });
-  }
-
-  function resetItemIndex() {
-    _itemIndex = _state.length;
-  }
-
-  function setItemIndex(index: number) {
-    _itemIndex = index;
-  }
-
-  // Handled event when data is dispatched down from the parent
-  function onDispatchState(data: FormDispatchStateRelayDetailList) {
-    if (!Array.isArray(data)) {
-      return;
-    }
-
-    _state = data;
-
-    // dispatch up to the form-utils to ensure it's state is in sync
-    dispatchState();
-  }
-
-  // Collect list of child form item (input, dropdown, etc) elements
-  function onFieldsetMount(detail: FieldsetBindRelayDetail) {
-    const { id, el } = detail;
-    if (!id) return;
-
-    _fieldsets[id] = el;
-  }
-
-  // Parent form sends data to the child fieldsets/subforms
-  function onSetFieldset(detail: FormState[]) {
-    for (const [id, item] of Object.entries(detail)) {
-      _state[id] = { ...item };
-    }
-  }
-
-  /**
-   * Binds the subform to the parent form to allow state to be relayed back to subforms
-   */
-  // TODO: come up with a better name for this function
-  function bindWithParentForm() {
-    relay<FormBindRelayDetail>(_relayEl, FormBindMsg, { id, el: _receiverEl }, { bubbles: true, timeout: 10 });
-  }
-
-
-  /**
-   * Bind as a "fieldset" like component to allow parent to control the visibility of this subform
-   */
-  function dispatchBindMsg() {
-    // relay reference to the goa-public-form element as if it were a fieldset to allow it's visibility to be controlled
-    relay<FieldsetBindRelayDetail>(
-      _relayEl,
-      FieldsetBindMsg,
-      { id, el: _receiverEl },
-      { bubbles: true, timeout: 10 },
-    );
-  }
-
-  /**
-   * Handles the state change event triggered by a child form and updates the internal state accordingly.
-   * This method processes the event, checks if the incoming detail is compatible,
-   * updates the internal `_state` array, and dispatches a new event with the updated state array.
-   *
-   * @param {Event} e - The event object triggered by a child form's state change.
-   * @return {void} No value is returned from this function; it handles state updates and event dispatching internally.
-   */
-  function onChildFormStateChange(e: Event) {
-    const detail = (e as CustomEvent).detail as StateChangeRelayDetail;
-    if (detail.type === "list") {
-      console.warn("SubForm: onChildFormStateChange: list not supported");
-      return;
-    }
-
-    // subform item being edited
-    const editStateIndex = _state.findIndex((s) => s.uuid === detail.data.uuid);
-
-    // Required to prevent the detail from being changed after being added to the array
-    const deepCopiedData = JSON.parse(JSON.stringify(detail.data));
-
-    if (editStateIndex >= 0) {
-      _state[editStateIndex] = deepCopiedData;
-    } else {
-      _state.push(deepCopiedData);
-    }
-
-    // stop original event to prevent just the single subform data from being sent, and
-    // send the array of data instead
-    dispatchState();
-
-    // initial event will be overridden with a custom _stateChange event containing a state array
-    e.stopPropagation();
-  }
-
-  function dispatchState() {
-    dispatch<StateChangeRelayDetail>(_relayEl, StateChangeEvent, {
-      type: "list",
-      data: _state,
-      id
-    }, { bubbles: true });
-  }
-
-  /**
-   * Handles the completion of a child form's lifecycle. Updates or adds the child form state
-   * into the parent state, changes the mode to "index," and sends a reset message to the form.
-   *
-   * @param {Event} e - The event object triggered when the child form completes. It must contain a
-   *                    `detail` field with the child form state as a `FormState` object.
-   *
-   * @return {void} - This method does not return a value.
-   */
-  function onChildFormComplete(e: Event) {
-    // change back to list mode
-    _mode = "index";
-    resetItemIndex();
-
-    // send message to form to reset it's state
-    relay(_formEl, FormResetFormMsg);
-
-    e.stopPropagation();
-  }
-
-  function onFormContinue(e: Event) {
-    e.stopPropagation();
-  }
-</script>
-
-<div bind:this={_relayEl} data-id="subform">
-  <section style={style("display", `${_mode === "index" ? "block" : "none"}`)}>
-    <slot name="subform-index" />
-  </section>
-
-  <goa-public-form
-    {name}
-    {dispatchOn}
-    {backUrl}
-    data-id="subform-form"
-    bind:this={_receiverEl}
-    on:_stateChange={onChildFormStateChange}
-    on:_continue={onFormContinue}
-    on:_complete={onChildFormComplete}
-    on:_init={onInit}
-    style={styles(
-      `display: ${_mode === "form" ? "block" : "none"}`,
-    )}
-  >
-    <slot />
-  </goa-public-form>
-</div>
diff --git a/libs/web-components/src/components/form/SubFormIndex.svelte b/libs/web-components/src/components/form/SubFormIndex.svelte
deleted file mode 100644
index f215a4775..000000000
--- a/libs/web-components/src/components/form/SubFormIndex.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<svelte:options customElement={{
-  tag: "goa-public-subform-index",
-  props: {
-    actionButtonText: { type: "String", attribute: "action-button-text" },
-    buttonVisibility: { type: "String", attribute: "button-visibility" },
-    sectionTitle: { type: "String", attribute: "section-title" },
-  }
-}} />
-
-<script lang="ts">
-  import { receive, relay } from "../../common/utils";
-  import {
-    SubFormBindMsg, SubFormBindRelayDetail,
-    SubFormIndexContinueToSubFormMsg,
-  } from "../../types/relay-types";
-  import { onMount } from "svelte";
-
-  // =====
-  // Props
-  // =====
-
-  export let heading: string = "";
-  export let sectionTitle: string = "";
-  export let actionButtonText: string;
-  export let buttonVisibility: "visible" | "hidden" = "hidden";
-
-  // =======
-  // Private
-  // =======
-
-  let _el: HTMLElement;
-  let _subformEl: HTMLElement;
-
-  // =====
-  // Hooks
-  // =====
-
-  onMount(() => {
-    receiveMsgs();
-  })
-
-  // =========
-  // Functions
-  // =========
-
-  function receiveMsgs() {
-    // For some reason the way that the SubFormIndex exists within the Subform doesn't allow
-    // the SubFormIndex from bubbling up messages to the SubForm, but instead can only be
-    // received by the subform's parent Form element. So the only way to get around this
-    // was to get the parent Subform to send a bind message here.
-    receive(_el, (action, data, e) => {
-      switch (action) {
-        case SubFormBindMsg:
-          _subformEl = (data as SubFormBindRelayDetail).el;
-          e.stopPropagation();
-          break;
-      }
-    });
-  }
-
-  function continueToSubform(e: Event) {
-    e.stopPropagation();
-    relay(_subformEl, SubFormIndexContinueToSubFormMsg, null, { bubbles: true });
-  }
-</script>
-
-<goa-public-form-page
-  id="index"
-  type="step"
-  {heading}
-  section-title="{sectionTitle}"
-  button-visibility={buttonVisibility}
-  active
->
-  <div data-bind bind:this={_el}>
-    <slot />
-    <goa-block direction="column" gap="3xl">
-      <goa-button type="secondary" on:_click={continueToSubform}>{actionButtonText}</goa-button>
-    </goa-block>
-  </div>
-</goa-public-form-page>
diff --git a/libs/web-components/src/components/form/Subform.svelte b/libs/web-components/src/components/form/Subform.svelte
new file mode 100644
index 000000000..415afc408
--- /dev/null
+++ b/libs/web-components/src/components/form/Subform.svelte
@@ -0,0 +1,70 @@
+<svelte:options customElement={{
+  tag: "goa-pf-subform",
+  props: {
+
+  }
+}} />
+
+<script lang="ts">
+  import { dispatch } from "@abgov/ui-components-common";
+  import { onMount } from "svelte";
+
+  let open = false;
+
+  let _id: string;  // uuid for the editted item
+  let _rootEl: HTMLElement;
+
+  onMount(() => {
+    // TODO: I think that for these events the parent form-page needs to intercept the event
+    // and add the page id to the event detail, then re-dispatch the event, otherwise there is
+    // no way to reset the group of values
+    _rootEl.addEventListener("edit", (e) => {
+      e.stopPropagation();
+      _id = (e as CustomEvent).detail;
+      open = true;
+      dispatch(_rootEl, "pf:subform:edit", _id, { bubbles: true });
+    });
+
+    _rootEl.addEventListener("delete", (e) => {
+      e.stopPropagation();
+      const id = (e as CustomEvent).detail;
+      dispatch(_rootEl, "pf:subform:delete", id, { bubbles: true });
+      open = false;
+    })
+
+    _rootEl.addEventListener("save", (e) => {
+      e.stopPropagation();
+      dispatch(_rootEl, "pf:subform:save", _id, { bubbles: true });
+      _id = "";
+      open = false;
+    });
+
+    _rootEl.addEventListener("add", (e) => {
+      e.stopPropagation();
+      _id = "";
+      open = true;
+      dispatch(_rootEl, "pf:subform:add", _id, { bubbles: true });
+    })
+
+    _rootEl.addEventListener("cancel", (e) => {
+      e.stopPropagation();
+      _id = "";
+      open = false;
+      dispatch(_rootEl, "pf:subform:cancel", _id, { bubbles: true });
+    });
+  })
+</script>
+
+<div bind:this={_rootEl}>
+  <goa-modal {open}>
+    <slot name="form" />
+    <goa-block slot="actions">
+      <goa-button type="tertiary" action="cancel">Cancel</goa-button>
+      <goa-spacer hspacing="fill" />
+      <goa-button action="save">Save</goa-button>
+    </goa-block>
+  </goa-modal>
+
+  <slot />
+  <goa-button action="add">Add</goa-button>
+</div>
diff --git a/libs/web-components/src/components/form/SubformForm.svelte b/libs/web-components/src/components/form/SubformForm.svelte
new file mode 100644
index 000000000..d21aa6da9
--- /dev/null
+++ b/libs/web-components/src/components/form/SubformForm.svelte
@@ -0,0 +1,11 @@
+<svelte:options customElement={{
+  tag: "goa-pf-subform-fields",
+  props: {
+
+  }
+}} />
+
+<script lang="ts">
+
+
+</script>
diff --git a/libs/web-components/src/components/form/SubformList.svelte b/libs/web-components/src/components/form/SubformList.svelte
new file mode 100644
index 000000000..edb388dc1
--- /dev/null
+++ b/libs/web-components/src/components/form/SubformList.svelte
@@ -0,0 +1,11 @@
+<svelte:options customElement={{
+  tag: "goa-pf-subform-list",
+  props: {
+
+  }
+}} />
+
+<script lang="ts">
+
+
+</script>
diff --git a/libs/web-components/src/components/input/Input.svelte b/libs/web-components/src/components/input/Input.svelte
index 359a744be..37bbd32af 100644
--- a/libs/web-components/src/components/input/Input.svelte
+++ b/libs/web-components/src/components/input/Input.svelte
@@ -15,8 +15,6 @@
   import {
     typeValidator,
     toBoolean,
-    relay,
-    receive,
     dispatch,
     styles,
   } from "../../common/utils";
@@ -24,16 +22,7 @@
   import type { Spacing } from "../../common/styling";
   import { calculateMargin } from "../../common/styling";
   import { onMount } from "svelte";
-  import {
-    FieldsetErrorRelayDetail,
-    FieldsetResetErrorsMsg,
-    FieldsetResetFieldsMsg,
-    FieldsetSetErrorMsg,
-    FormFieldMountMsg,
-    FormFieldMountRelayDetail,
-    FieldsetSetValueMsg,
-    FieldsetSetValueRelayDetail,
-  } from "../../types/relay-types";
+
   // Validators
   const [Types, validateType] = typeValidator("Input type", [
     "text",
@@ -187,16 +176,29 @@
     validateType(type);
     validateAutoCapitalize(autocapitalize);
     validateTextAlign(textalign);
-    addRelayListener();
     showDeprecationWarnings();
     checkSlots();
-    sendMountedMessage();
 
     const { containerStyle, inputWidth } = handleWidth(width, type);
     _containerStyle = containerStyle;
     _inputWidth = inputWidth;
+
+    bindReset(_rootEl);
   });
 
+  function bindReset(el: HTMLElement) {
+    el.addEventListener("goa:reset", (e) => {
+      // TODO: ensure all other rese events stop the events
+      e.stopPropagation();
+      if (value) {
+        value = "";
+        dispatch(el, "_change", { name, value }, { bubbles: true })  ;
+      }
+    });
+
+    dispatch(el, "goa:bind", el, { bubbles: true });
+  }
+
   // =========
   // Functions
   // =========
diff --git a/libs/web-components/src/components/link/Link.svelte b/libs/web-components/src/components/link/Link.svelte
index dc702b0dc..baf4263ee 100644
--- a/libs/web-components/src/components/link/Link.svelte
+++ b/libs/web-components/src/components/link/Link.svelte
@@ -57,12 +57,13 @@
   })
 
   function handleClick(e: Event) {
+    dispatch(_rootEl, action, actionArg || actionArgs, { bubbles: true });
     e.preventDefault();
-    dispatch(e.target as Element, action, actionArg || actionArgs, { bubbles: true });
   }
 </script>
 
 <div
+  bind:this={_rootEl}
   class="link"
   class:interactive={color === "interactive"}
   class:dark={color === "dark"}
@@ -71,7 +72,6 @@
   class:small={size === "small"}
   class:medium={size === "medium"}
   class:large={size === "large"}
-  bind:this={_rootEl}
   style={styles(calculateMargin(mt, mr, mb, ml))}
   data-testid={testid}
 >
diff --git a/libs/web-components/src/components/radio-group/RadioGroup.svelte b/libs/web-components/src/components/radio-group/RadioGroup.svelte
index d8ed7d647..e0e5563c1 100644
--- a/libs/web-components/src/components/radio-group/RadioGroup.svelte
+++ b/libs/web-components/src/components/radio-group/RadioGroup.svelte
@@ -1,4 +1,9 @@
-<svelte:options customElement="goa-radio-group" />
+<svelte:options customElement={{
+  tag: "goa-radio-group",
+  props: {
+    value: { reflect: true }
+  }
+}} />
 
 <script lang="ts">
   import type { Spacing } from "../../common/styling";
@@ -6,8 +11,6 @@
     typeValidator,
     toBoolean,
     dispatch,
-    receive,
-    relay,
   } from "../../common/utils";
   import { calculateMargin } from "../../common/styling";
   import { onMount } from "svelte";
@@ -15,15 +18,6 @@
     GoARadioItemProps,
     RadioItemSelectProps,
   } from "../radio-item/RadioItem.svelte";
-  import {
-    FieldsetSetValueMsg,
-    FieldsetSetValueRelayDetail,
-    FieldsetSetErrorMsg,
-    FieldsetResetErrorsMsg,
-    FormFieldMountRelayDetail,
-    FormFieldMountMsg,
-    FieldsetErrorRelayDetail, FieldsetResetFieldsMsg,
-  } from "../../types/relay-types";
 
   // Validators
   const [Orientations, validateOrientation] = typeValidator("Radio group orientation", [
@@ -110,55 +104,27 @@
     validateOrientation(orientation);
     validateVersion(version);
     validateSize(size);
-    addRelayListener();
-    sendMountedMessage();
     getChildren();
 
     _rootEl.addEventListener("_radioItemChange", (e: Event) => {
       const detail = (e as CustomEvent).detail;
       onChange(detail.value, detail.label);
     });
-  });
 
-  // Functions
+     bindReset(_rootEl);
+  });
 
-  function addRelayListener() {
-    receive(_rootEl, (action, data) => {
-      switch (action) {
-        case FieldsetSetValueMsg:
-          onSetValue(data as FieldsetSetValueRelayDetail);
-          break;
-        case FieldsetSetErrorMsg:
-          setError(data as FieldsetErrorRelayDetail);
-          break;
-        case FieldsetResetErrorsMsg:
-          error = "false";
-          break;
-        case FieldsetResetFieldsMsg:
-          onSetValue({ name, value: ""})
-          break;
+  function bindReset(el: HTMLElement) {
+    el.addEventListener("goa:reset", () => {
+      if (value) {
+        value = "";
+        dispatch(el, "_change", { name, value }, { bubbles: true })  ;
       }
     });
+    dispatch(el, "goa:bind", el, { bubbles: true });
   }
 
-  function setError(detail: FieldsetErrorRelayDetail) {
-    error = detail.error ? "true" : "false";
-  }
-
-  function onSetValue(detail: FieldsetSetValueRelayDetail) {
-    // @ts-expect-error
-    value = detail.value;
-    dispatch(_rootEl, "_change", { name, value }, { bubbles: true });
-  }
-
-  function sendMountedMessage() {
-    relay<FormFieldMountRelayDetail>(
-      _rootEl,
-      FormFieldMountMsg,
-      { name, el: _rootEl },
-      { bubbles: true, timeout: 10 },
-    );
-  }
+  // Functions
 
   function getChildren() {
     _rootEl.addEventListener("radio-item:mounted", (e: Event) => {
@@ -218,7 +184,7 @@
   function setCurrentSelectedOption(value: string) {
     _radioItems.forEach((item) => {
       item.el.dispatchEvent(
-        new CustomEvent<RadioItemSelectProps>("radio-group:select", {
+        new CustomEvent<RadioItemSelectProps>("radio-group:change", {
           composed: true,
           detail: {
             checked: item.value === value,
@@ -228,7 +194,7 @@
     });
   }
 
-  function onFocus(e: Event) {
+  function onFocus(_e: Event) {
     dispatch(_rootEl, "help-text::announce", undefined, { bubbles: true });
   }
 </script>
diff --git a/libs/web-components/src/components/radio-item/RadioItem.svelte b/libs/web-components/src/components/radio-item/RadioItem.svelte
index b0ed95fdf..48798c480 100644
--- a/libs/web-components/src/components/radio-item/RadioItem.svelte
+++ b/libs/web-components/src/components/radio-item/RadioItem.svelte
@@ -40,18 +40,11 @@
   import {
     dispatch,
     fromBoolean,
-    receive,
-    relay,
     toBoolean,
     announceToScreenReader,
   } from "../../common/utils";
   import { calculateMargin } from "../../common/styling";
   import type { Spacing } from "../../common/styling";
-  import {
-    FieldsetResetFieldsMsg,
-    FormFieldMountMsg,
-    FormFieldMountRelayDetail,
-  } from "../../types/relay-types";
 
   /** The value of this radio option. Will be emitted when selected. */
   export let value: string;
@@ -85,12 +78,12 @@
 
   // private
 
-  let _radioItemEl: HTMLElement;
+  let _rootEl: HTMLElement;
   let _revealSlotEl: HTMLElement;
-  let _formFields: HTMLElement[] = [];
   let _revealSlotHeight: number = 0;
   let _version: string = "1";
   let _compact: boolean = false;
+  let _revealSlotEls: HTMLElement[] = [];
 
   // Reactive
 
@@ -102,87 +95,52 @@
   // Hooks
 
   onMount(() => {
-    dispatchInit();
+    dispatchMountedMsg();
     addInitListener();
-    addSelectListener();
-    addRelayListener();
-    addRevealSlotListener();
+    addParentChangeListener();
+    addRevealSlotListeners();
+    addBindListener();
   });
 
   // Functions
 
-  function addRelayListener() {
-    receive(_radioItemEl, (action, data) => {
-      switch (action) {
-        case FormFieldMountMsg:
-          onFormFieldMount(data as FormFieldMountRelayDetail);
-          break;
-      }
-    });
-  }
 
-  // allow for the listening of messages sent by form-fields specific to the "reveal" slot
-  function addRevealSlotListener() {
-    receive(_revealSlotEl, (action, data) => {
-      switch (action) {
-        case FormFieldMountMsg:
-          setCheckStatusByChildState(data as FormFieldMountRelayDetail);
-          break;
-      }
+  /**
+   * Obtain list of all the form field element within the reveal slot
+   */
+  function addBindListener() {
+    // collect bindable goa fields to allow for later resetting
+    _revealSlotEl.addEventListener("goa:bind", (e: Event) => {
+      const el = (e as CustomEvent).detail;
+      _revealSlotEls.push(el);
     });
-    if (_revealSlotEl) {
-      onRevealSlotCustomEventListener();
-    }
   }
 
   /**
    * Stop propagate the _click,_change to checkbox (so it won't toggle the value)
    */
-  function onRevealSlotCustomEventListener() {
+  function addRevealSlotListeners() {
+    if (!_revealSlotEl) {
+      return;
+    }
+
     _revealSlotEl.addEventListener("_click", (e: Event) => {
       // when we click a button/accordion... inside the reveal slot, it will reset the parent radio's value (event UI shows as checked). stopPropagation (_click) will fix it
       e.stopPropagation();
     });
-    _revealSlotEl.addEventListener("_change", handleFormFieldChange);
-    _revealSlotEl.addEventListener("_radioItemChange", handleFormFieldChange);
-  }
-
-  function handleFormFieldChange(e: Event) {
-    const customEvent = e as CustomEvent;
-    const eventDetail = customEvent.detail;
-    // when we check/change a checkbox/input... inside the reveal slot, it will reset the parent radio's value(though UI shown as checked) whenever _change is fired. stopPropagation (_change) will fix it
-    e.stopPropagation();
-
-    // If this is a form field value change (public form)
-    // relay it so the Fieldset initialize the reveal slot form field to public form state
-    if (
-      eventDetail &&
-      eventDetail.name &&
-      typeof eventDetail.value !== "undefined"
-    ) {
-      dispatch(_radioItemEl, "_revealChange", eventDetail, { bubbles: true });
-    }
-  }
-
-  function onFormFieldMount(detail: FormFieldMountRelayDetail) {
-    if (!detail.name) return;
-    if (!$$slots.reveal) return;
-    _formFields = [..._formFields, detail.el];
-  }
-
-  function setCheckStatusByChildState(detail: FormFieldMountRelayDetail) {
-    // @ts-expect-error
-    checked = !checked && !!detail.el.value;
   }
 
-  function dispatchInit() {
+  /**
+   * Send message up to parent to allow for mounting
+   */
+  function dispatchMountedMsg() {
     setTimeout(() => {
-      _radioItemEl?.dispatchEvent(
+      _rootEl?.dispatchEvent(
         new CustomEvent<GoARadioItemProps>("radio-item:mounted", {
           composed: true,
           bubbles: true,
           detail: {
-            el: _radioItemEl,
+            el: _rootEl,
             name,
             value,
             label,
@@ -199,9 +157,13 @@
     }, 10);
   }
 
+  /**
+   * Add the listener that will receive a response from the parent after this component is mounted
+   */
   function addInitListener() {
-    _radioItemEl.addEventListener("radio-group:init", (e: Event) => {
+    _rootEl.addEventListener("radio-group:init", (e: Event) => {
       const data = (e as CustomEvent<GoARadioItemProps>).detail;
+
       // Item is disabled if EITHER the group is disabled OR the item itself is disabled
       isDisabled = data.disabled || toBoolean(disabled);
       error = fromBoolean(data.error);
@@ -209,27 +171,33 @@
       description = data.description;
       name = data.name;
       revealarialabel = data.revealAriaLabel;
+
       _version = data.version || "1";
       _compact = data.compact || false;
     });
   }
 
-  function addSelectListener() {
-    _radioItemEl.addEventListener("radio-group:select", (e: Event) => {
+  /**
+   * Receive message from parent when a radio item has been selected
+   */
+  function addParentChangeListener() {
+    _rootEl.addEventListener("radio-group:change", (e: Event) => {
+      // update element's check state
       isChecked = (e as CustomEvent<RadioItemSelectProps>).detail.checked;
+
+      // reset slot components if un-checked
+      if (!isChecked && !!$$slots.reveal) {
+        resetChildFormFields();
+      }
     });
   }
 
+  // Dispatch change event up to RadioGroup parent element
   function onChange() {
     if (isDisabled) return;
-    // if (isChecked) return;  FIXME: does having this uncommented break something?
 
-    dispatch(
-      _radioItemEl,
-      "_radioItemChange",
-      { value, label },
-      { bubbles: true },
-    );
+    // notify radio group of the change
+    dispatch(_rootEl, "_radioItemChange", { value, label }, { bubbles: true });
 
     // Announce the reveal content change to screen readers if radio is checked and reveal content exists
     if (
@@ -240,22 +208,19 @@
     ) {
       announceToScreenReader(revealarialabel);
     }
-
-    if (!isChecked && !!$$slots.reveal) {
-      resetChildFormFields();
-    }
   }
 
+  // Send reset messages to all the elements within the reveal slot
   function resetChildFormFields() {
-    for (const el of _formFields) {
+    for (const el of _revealSlotEls) {
       // send reset message ot child form fields
-      relay(el, FieldsetResetFieldsMsg);
+      dispatch(el, "goa:reset")
     }
   }
 </script>
 
 <div
-  bind:this={_radioItemEl}
+  bind:this={_rootEl}
   style={`
     ${calculateMargin(mt, mr, mb, ml)}
     max-width: ${maxwidth};
@@ -295,6 +260,7 @@
       {description}
     </div>
   {/if}
+
   <div
     class="reveal"
     class:visible={$$slots.reveal && isChecked}
@@ -412,7 +378,7 @@
   }
 
   .icon::before {
-    content: '';
+    content: "";
     position: absolute;
     width: 44px;
     height: 44px;
diff --git a/libs/web-components/src/components/text-area/TextArea.svelte b/libs/web-components/src/components/text-area/TextArea.svelte
index 849e34c27..3b6d8d0f2 100644
--- a/libs/web-components/src/components/text-area/TextArea.svelte
+++ b/libs/web-components/src/components/text-area/TextArea.svelte
@@ -1,12 +1,15 @@
-<svelte:options customElement="goa-textarea" />
+<svelte:options customElement={{
+  tag: "goa-textarea",
+  props: {
+    value: { reflect: true },
+  }
+}} />
 
 <!-- Script -->
 <script lang="ts">
   import {
     dispatch,
     pluralize,
-    receive,
-    relay,
     toBoolean,
     typeValidator,
   } from "../../common/utils";
@@ -16,16 +19,6 @@
     type Spacing,
   } from "../../common/styling";
   import { onMount } from "svelte";
-  import {
-    FieldsetErrorRelayDetail,
-    FieldsetResetErrorsMsg,
-    FieldsetSetErrorMsg,
-    FormFieldMountMsg,
-    FormFieldMountRelayDetail,
-    FieldsetSetValueMsg,
-    FieldsetSetValueRelayDetail,
-    FieldsetResetFieldsMsg,
-  } from "../../types/relay-types";
 
   /** Name of the input value that is received in the _change event. */
   export let name: string;
@@ -120,48 +113,21 @@
     }
 
     injectCss(_rootEl, ":host", cssProps);
+
+    bindReset(_rootEl);
   });
 
-  // functions
-  function addRelayListener() {
-    receive(_textareaEl, (action, data) => {
-      switch (action) {
-        case FieldsetSetValueMsg:
-          onSetValue(data as FieldsetSetValueRelayDetail);
-          break;
-        case FieldsetSetErrorMsg:
-          setError(data as FieldsetErrorRelayDetail);
-          break;
-        case FieldsetResetErrorsMsg:
-          error = "false";
-          break;
-        case FieldsetResetFieldsMsg:
-          onSetValue({ name, value: "" });
-          break;
+  function bindReset(el: HTMLElement) {
+    el.addEventListener("goa:reset", () => {
+      if (value) {
+        value = "";
+        dispatchChange("");
       }
     });
+    dispatch(el, "goa:bind", el, { bubbles: true });
   }
 
-  function setError(detail: FieldsetErrorRelayDetail) {
-    error = detail.error ? "true" : "false";
-  }
-
-  function onSetValue(detail: FieldsetSetValueRelayDetail) {
-    // @ts-expect-error
-    value = detail.value;
-    dispatchChange(value);
-  }
-
-  function sendMountedMessage() {
-    relay<FormFieldMountRelayDetail>(
-      _textareaEl,
-      FormFieldMountMsg,
-      { name, el: _textareaEl },
-      { bubbles: true, timeout: 10 },
-    );
-  }
-
-  function onInput(_e: Event) {
+  function onChange(_e: Event) {
     if (isDisabled) return;
     dispatchChange(_textareaEl.value);
   }
diff --git a/libs/web-components/src/index.ts b/libs/web-components/src/index.ts
index 773808511..51d1890d2 100644
--- a/libs/web-components/src/index.ts
+++ b/libs/web-components/src/index.ts
@@ -33,12 +33,10 @@ export * from "./components/focus-trap/FocusTrap.svelte";
 export * from "./components/footer/Footer.svelte";
 export * from "./components/footer-meta-section/FooterMetaSection.svelte";
 export * from "./components/footer-nav-section/FooterNavSection.svelte";
-export * from "./components/form/Fieldset.svelte";
 export * from "./components/form/Form.svelte";
 export * from "./components/form/FormPage.svelte";
 export * from "./components/form/FormSummary.svelte";
-export * from "./components/form/SubForm.svelte";
-export * from "./components/form/SubFormIndex.svelte";
+export * from "./components/form/Subform.svelte";
 export * from "./components/form/Task.svelte";
 export * from "./components/form/TaskList.svelte";
 export * from "./components/form-item/FormItem.svelte";
diff --git a/libs/web-components/src/types/relay-types.ts b/libs/web-components/src/types/relay-types.ts
index fed07a627..e69de29bb 100644
--- a/libs/web-components/src/types/relay-types.ts
+++ b/libs/web-components/src/types/relay-types.ts
@@ -1,229 +0,0 @@
-export type FormStatus = "not-started" | "cannot-start-yet" | "in-progress" | "submitted" | "update-needed" | "complete";
-
-export type FormState = {
-  uuid: string;
-  form: Record<string, Fieldset>;
-  history: string[];
-  editting: string;
-  lastModified?: Date;
-  status: FormStatus;
-};
-
-export type Fieldset = {
-  heading?: string;
-  data?: FieldsetData;
-};
-
-export type FieldsetData =
-  | { type: "details"; fieldsets: Record<string, FieldsetItemState> }
-  | { type: "list"; items: FormState[] };
-
-// ===========
-// StateChange
-// ===========
-
-export const StateChangeEvent = "_stateChange";
-export type StateChangeRelayDetail =
-  | {
-      type: "details";
-      data: FormState;
-    }
-  | {
-      id: string;
-      type: "list";
-      data: FormState[];
-    };
-
-// ====
-// Form
-// ====
-
-export const FormResetErrorsMsg = "form::reset:errors";
-export const FormResetFormMsg = "form::reset:form";
-
-// Message to allow forms to register themselves with their parent form to allow for
-// form data to be passed down to the child form
-export const FormBindMsg = "form::bind";
-export type FormBindRelayDetail = {
-  id: string;
-  el: HTMLElement;
-};
-
-export const FormToggleActiveMsg = "form::toggle:active";
-export type FormToggleActiveRelayDetail = {
-  active: boolean;
-};
-
-export const FormSetFieldsetMsg = "form::set:fieldset";
-export type FormSetFieldsetRelayDetail = {
-  name: string;
-  value: FieldsetData;
-};
-
-export const FormDispatchStateMsg = "form::dispatch:state";
-export type FormDispatchStateRelayDetail = FormState;
-export type FormDispatchStateRelayDetailList = FormState[];
-
-export const FormDispatchEditMsg = "form::edit";
-export type FormDispatchEditRelayDetail = { id: string };
-
-// ======
-// Subform
-// ======
-
-export const SubFormBindMsg = "subform::bind";
-export type SubFormBindRelayDetail = {
-  el: HTMLElement;
-};
-
-// ============
-// SubformIndex
-// ============
-
-export const SubFormIndexContinueToParentMsg = "subform::indexContinueToParent";
-export const SubFormIndexContinueToSubFormMsg =
-  "subform::indexContinueToSubForm";
-
-// ========
-// Fieldset
-// ========
-
-export const FieldsetResetErrorsMsg = "fieldset::reset:errors";
-export const FieldsetResetFieldsMsg = "fieldset::reset:fields";
-export const FieldsetCompleteMsg = "fieldset::submit";
-
-// ========
-// FormPage
-// ========
-
-export const FormPageContinueMsg = "form-page:continue";
-export type FormPageContinueRelayDetail = {
-  cancelled: boolean;
-};
-
-export const FormPageBackMsg = "form-page:back";
-
-export const FormPageBindMsg = "form=page::bind";
-export type FormPageBindRelayDetail = {
-  id: string;
-  heading: string;
-  el: HTMLElement;
-};
-
-// ========
-// Fieldset
-// ========
-
-export const FieldsetBindMsg = "fieldset::bind";
-export type FieldsetBindRelayDetail = {
-  id: string;
-  el: HTMLElement;
-  cb?: (id: string) => void;
-};
-
-export const FieldsetSetErrorMsg = "fieldset::set:error";
-export type FieldsetErrorRelayDetail = {
-  error: string;
-};
-
-export const FieldsetChangeMsg = "fieldset::change";
-export type FieldsetChangeRelayDetail = {
-  id: string;
-  state: {
-    heading?: string;
-    data: Record<string, FieldsetItemState>;
-  };
-  dispatchOn: "change" | "continue";
-};
-
-export type FieldsetItemState = {
-  name: string;
-  label: string;
-  value: string | number | Date;
-  order: number;
-  valueLabel?: string; // for radio/checkbox label to be able to display on summary page
-  labels? : string[]
-};
-
-export type FieldsetValidationRelayDetail = {
-  el: HTMLElement;
-  state: Record<string, FieldsetItemState>;
-  cancelled: boolean;
-};
-
-export const FieldsetSetValueMsg = "fieldset::set:value";
-
-// TODO: I don't think name is required, which would allow this type to eliminate the
-//       need for the FieldsetResetFieldMsg/Detail
-export type FieldsetSetValueRelayDetail = {
-  name: string;
-  value: string | number | Date | string[];
-};
-
-// ========
-// FormItem
-// ========
-
-export const FormItemMountMsg = "form-item::bind";
-export type FormItemMountRelayDetail = {
-  id: string;
-  label: string;
-  el: HTMLElement;
-  order: number;
-};
-
-// ========
-// External
-// ========
-
-export const ExternalAlterDataMsg = "external::alter:state";
-export type ExternalAlterDataRelayDetail =
-  | {
-      id: string;
-      operation: "remove";
-      index: number;
-    }
-  | {
-      id: string;
-      operation: "edit";
-      index: number;
-    };
-
-export const ExternalContinueMsg = "external::continue";
-export type ExternalContinueRelayDetail = {
-  next: string;
-};
-
-export const ExternalSetErrorMsg = "external::set:error";
-export type ExternalErrorRelayDetail = {
-  name: string;
-  msg: string;
-  grouped: boolean; // whether the error message applies to more than one form field
-};
-
-export const ExternalInitStateMsg = "external::init:state";
-export type ExternalInitStateDetail = FormState | string;
-
-// =========
-// FormField
-// =========
-
-export const FormFieldMountMsg = "form-field::bind";
-export type FormFieldMountRelayDetail = {
-  name: string;
-  el: HTMLElement;
-};
-
-// ===========
-// FormSummary
-// ===========
-
-export const FormSummaryBindMsg = "form-summary::bind";
-export type FormSummaryBindRelayDetail = {
-  el: HTMLElement;
-};
-
-export const FormSummaryEditPageMsg = "form-summary::edit:page";
-export type FormSummaryEditPageRelayDetail = {
-  id: string;
-};
diff --git a/public-form.md b/public-form.md
new file mode 100644
index 000000000..d60f8d8ae
--- /dev/null
+++ b/public-form.md
@@ -0,0 +1,58 @@
+Hours
+=====
+1 - Friday night
+1 - Saturday at lib
+1 - Saturday at art class
+
+# Subform design
+
+## Data
+
+- data[]: Record<string, string>[] -> the list of items that is contained within the subform
+- editIndex: number -> the index of the item that is being editted, is -1 if there nothing is being editted
+- dataBuffer: {} -> a buffer for the data for one of the items to make it easy to cancel changes
+
+## Components
+
+- goa-subform-list
+- goa-form-page
+
+## Subform responsibities
+
+- Needs to have it's own _continue handler where the validation will be executed
+	- how will the subform be able to access the form level validations
+		- one easy way to allow for the above would be to pass a top-level form reference to the
+		subform when the app is first loaded...this isn't ideal, but it might be ok. A message
+		could be sent to the elements when the form first performs the query on the `data-pf-item`
+		, the components, all except for the subform don't have to listen for the message. This messge would
+		contain a refence to the form, then 
+	
+- Needs to intercept all _change events and store the data in the dataBuffer
+
+- the list will need to contain buttons that use the `action` attribute with only specific values allowed ex. edit, delete
+- the `edit` action would be handled and the edit index would need to be set...that means the action-arg would also need to be set,
+the same would be true for the `delete` action
+
+- the biggest  issue is that the validation functions need to be passed into subform to allow the validation to be performed
+
+
+## Solution
+Maybe the subform delegates all valiation to the root form, including saving data to to the dataBuffer. if this
+is the case there would have to be some indication of whether the data that is to be saved in the root
+form's `data` attribute is an array or string, to allow the root form to save it properly.
+
+This would also mean that the subform does not hold the state, so all delete/edit events would be handled
+by the root form.
+  - on edit the form would then move the indexed data into the dataBuffer which would auto bind to the form.
+  - on a delete the r oot form would simply delete the item matching the index
+
+## Mon 22 Dec 2025 09:16:49 AM MST
+
+One place that needs some additional logic is when selecting an item from the subform that needs to be
+editted. In this case the data at the selected index needs to be re-bound to the form, which is something
+that normally only happens when the form is first loaded.
+
+So the root form needs to handle an additional event ex. `_select` that will copy the item's data into the
+dataBuffer, which then needs to rebind the `state` var with the input elements (this part is already done, just
+needs to be done again)
+  

From c36b4def9f03c7ebd433c810ede587f8fd77ef1b Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Thu, 5 Feb 2026 10:13:06 -0700
Subject: [PATCH 02/13] temp: merge fixes

---
 apps/prs/web/src/routes/public-form.svelte    | 85 +++++++++++--------
 .../src/components/form/Form.svelte           | 53 ++++++++----
 .../src/components/input/Input.svelte         | 55 ++----------
 .../src/components/text-area/TextArea.svelte  | 18 ++--
 4 files changed, 102 insertions(+), 109 deletions(-)

diff --git a/apps/prs/web/src/routes/public-form.svelte b/apps/prs/web/src/routes/public-form.svelte
index 7baf85745..01df3db81 100644
--- a/apps/prs/web/src/routes/public-form.svelte
+++ b/apps/prs/web/src/routes/public-form.svelte
@@ -8,12 +8,18 @@
     type PFPage,
   } from "@abgov/ui-components-common";
 
-
   function toHumanDate(val: string) {
     const [y, m, d] = val.split("-");
-    const months = "January February March April May June July August September October November December".split(" ");
-    const [year, month, day] = [y, parseInt(month.replace(/^0/g, "")), day.replace(/^0/g, "")]
-    return `${months[month-1]} ${day}, ${year}`
+    const months =
+      "January February March April May June July August September October November December".split(
+        " ",
+      );
+    const [year, month, day] = [
+      y,
+      parseInt(month.replace(/^0/g, "")),
+      day.replace(/^0/g, ""),
+    ];
+    return `${months[month - 1]} ${day}, ${year}`;
   }
 
   let _state = undefined;
@@ -25,7 +31,7 @@
         "section-title": "Support order details",
       },
       fields: {
-        "role": { label: "What is your role?", formatter: (val) => val.toUpperCase() },
+        role: { label: "What is your role?", formatter: (val) => val.toUpperCase() },
       },
       next: (state: PFState) => {
         const role = state.dataBuffer["role"];
@@ -39,17 +45,21 @@
     children: {
       subform: true,
       props: {
-       heading: "Do you have children",
+        heading: "Do you have children",
       },
       fields: {
-        "first-name": { label: "First name", formatter: (val) => val[0].toUpperCase() + val.substr(1)},
-        "last-name": { label: "Last name", formatter: (val) => val[0].toUpperCase() + val.substr(1)},
-        "birthdate": { label: "Birthdate" },
+        "first-name": {
+          label: "First name",
+          formatter: (val) => val[0].toUpperCase() + val.substr(1),
+        },
+        "last-name": {
+          label: "Last name",
+          formatter: (val) => val[0].toUpperCase() + val.substr(1),
+        },
+        birthdate: { label: "Birthdate" },
       },
       next: "description",
-      valdiators: {
-
-      }
+      valdiators: {},
     },
 
     description: {
@@ -64,7 +74,7 @@
     foobar: {
       props: {
         "section-title": "Support order details",
-        heading: "Slotted checkbox test"
+        heading: "Slotted checkbox test",
       },
       fields: {
         "fav-color": { label: "Favourite color?", hideInSummary: "always" },
@@ -79,7 +89,7 @@
         heading: "Payor salary",
       },
       fields: {
-        "salary": { label: "Yearly income" }
+        salary: { label: "Yearly income" },
       },
       next: "summary",
       validators: {
@@ -93,15 +103,15 @@
         heading: "Do you know any of the identifiers about the other party?",
       },
       fields: {
-        "sin": {
+        sin: {
           label: "Social Insurance #",
-          formatter: (val: string) => val.match(/(.{3})/g)?.join(" ")
+          formatter: (val: string) => val.match(/(.{3})/g)?.join(" "),
         },
-        "ahcn": {
+        ahcn: {
           label: "Alberta Health Care #",
-          formatter: (val: string) => val.match(/(.{4})/g)?.join("-")
+          formatter: (val: string) => val.match(/(.{4})/g)?.join("-"),
         },
-        "info": { label: "Additional information" }
+        info: { label: "Additional information" },
       },
       next: (state): string => {
         const sin = state.dataBuffer["sin"];
@@ -152,8 +162,8 @@
         heading: "Summary",
       },
       next: (state): string => {
-        console.log("submit to backend here", state)
-      }
+        console.log("submit to backend here", state);
+      },
     },
   };
 
@@ -226,7 +236,7 @@
     setTimeout(() => {
       const initData = JSON.parse(raw);
       const fn = e.detail;
-
+      console.log("func", fn);
       _state = fn(null, { outline });
     }, 1000);
   }
@@ -251,7 +261,7 @@
   // fired on each keypress, like simular to how the _change works
   function onSubformChange(e) {
     const state = (e as CustomEvent).detail;
-    _state = {...state};
+    _state = { ...state };
   }
 </script>
 
@@ -278,9 +288,10 @@
             <tr>
               <td>{child["first-name"]}</td>
               <td>{child["last-name"]}</td>
-              <td><goa-link action="edit" action-arg={child._id}>Edit</goa-link>
-              <td><goa-link action="delete" action-arg={child._id}>Remove</goa-link>
-            </tr>
+              <td><goa-link action="edit" action-arg={child._id}>Edit</goa-link> </td><td
+                ><goa-link action="delete" action-arg={child._id}>Remove</goa-link>
+              </td></tr
+            >
           {/each}
         </table>
 
@@ -295,33 +306,39 @@
             <goa-date-picker type="input" name="birthdate" data-pf-item />
           </goa-form-item>
         </form>
-
       </goa-pf-subform>
     </goa-public-form-page>
 
-
     <goa-public-form-page id="description">
       This is a page that is read-only
 
       <goa-details heading="Some important detail">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, odit! Voluptatem
-        dolor soluta aspernatur ipsa dolorem est iure vitae eaque ea, vero architecto
-        praesentium, quia excepturi, odio porro? Fuga, officia?
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, odit!
+        Voluptatem dolor soluta aspernatur ipsa dolorem est iure vitae eaque ea, vero
+        architecto praesentium, quia excepturi, odio porro? Fuga, officia?
       </goa-details>
     </goa-public-form-page>
 
     <goa-public-form-page id="foobar">
       <goa-radio-group data-pf-item name="fav-color">
         <goa-radio-item value="yes" label="Yes">
-          <goa-input slot="reveal" name="fav-color-value" data-pf-item placeholder="What is it?" />
+          <goa-input
+            slot="reveal"
+            name="fav-color-value"
+            data-pf-item
+            placeholder="What is it?"
+          />
         </goa-radio-item>
         <goa-radio-item value="no fav color" label="No">
           <div slot="reveal">
-            <goa-input name="fav-number-value" data-pf-item placeholder="What is your fav number then?" />
+            <goa-input
+              name="fav-number-value"
+              data-pf-item
+              placeholder="What is your fav number then?"
+            />
           </div>
         </goa-radio-item>
       </goa-radio-group>
-
     </goa-public-form-page>
 
     <goa-public-form-page id="identification">
diff --git a/libs/web-components/src/components/form/Form.svelte b/libs/web-components/src/components/form/Form.svelte
index 052e49734..55b298b8a 100644
--- a/libs/web-components/src/components/form/Form.svelte
+++ b/libs/web-components/src/components/form/Form.svelte
@@ -68,16 +68,16 @@
       const { pageId } = (e as CustomEvent).detail;
 
       // clear all the subform items
-      _state = {..._state, dataBuffer: {}};
+      _state = { ..._state, dataBuffer: {} };
       resetFormFields(pageId);
     });
 
     _rootEl.addEventListener("pf:subform:edit", (e) => {
       e.stopPropagation();
 
-      const {pageId, _id} = (e as CustomEvent).detail;
+      const { pageId, _id } = (e as CustomEvent).detail;
       const data = _state.data[pageId] as PFPage[];
-      const record = data.find(item => item._id === _id);
+      const record = data.find((item) => item._id === _id);
 
       if (!record) {
         console.error("Subform item not found: _id");
@@ -86,7 +86,7 @@
 
       // populate the dataBuffer with the item's data to ensure non-updated data is not lost
       // when re-saved
-      _state = {..._state, dataBuffer: record as Record<string, string>};
+      _state = { ..._state, dataBuffer: record as Record<string, string> };
 
       bindSubformFieldValues(pageId);
     });
@@ -101,8 +101,12 @@
       }
 
       // remove the subform item from the collection
-      const newPage = data.filter(item => item._id !== _id);
-      _state = {..._state, dataBuffer: {}, data: { ..._state.data, [pageId]: newPage } };
+      const newPage = data.filter((item) => item._id !== _id);
+      _state = {
+        ..._state,
+        dataBuffer: {},
+        data: { ..._state.data, [pageId]: newPage },
+      };
 
       // send message up to app level with the changes
       dispatch(_rootEl, "_subformChange", _state);
@@ -124,20 +128,27 @@
       if (_id) {
         // find index to preserve the order of the list
         const list = _state.data[pageId] as Array<PFPage>;
-        const index = list.findIndex(item => item._id === _id);
+        const index = list.findIndex((item) => item._id === _id);
 
         list[index] = _state.dataBuffer;
-        _state = {..._state, dataBuffer: {}, data: { ..._state.data, [pageId]: [...list]} };
-
+        _state = {
+          ..._state,
+          dataBuffer: {},
+          data: { ..._state.data, [pageId]: [...list] },
+        };
       } else {
         const page = [
-          ...(_state.data[pageId] as []),   // add original items in the page
+          ...(_state.data[pageId] as []), // add original items in the page
           {
-            ..._state.dataBuffer,           // add all the data obtained from the form
-            _id: crypto.randomUUID()        // add in additonal uuid if not already set
-          }
+            ..._state.dataBuffer, // add all the data obtained from the form
+            _id: crypto.randomUUID(), // add in additonal uuid if not already set
+          },
         ];
-        _state = {..._state, dataBuffer: {}, data: { ..._state.data, [pageId]: page } };
+        _state = {
+          ..._state,
+          dataBuffer: {},
+          data: { ..._state.data, [pageId]: page },
+        };
       }
 
       // clear all the subform items
@@ -191,7 +202,10 @@
       }
 
       // data added to buffer to allow for cancellation
-      _state = {..._state, dataBuffer: {..._state.dataBuffer, [name]: valueStr || value }}
+      _state = {
+        ..._state,
+        dataBuffer: { ..._state.dataBuffer, [name]: valueStr || value },
+      };
 
       // emit the form's change event that may be handled externally
       dispatch(
@@ -234,6 +248,7 @@
   }
 
   function init(data: PFState, { outline }: FormProps): PFState {
+    console.log("in the init");
     const state = data || {
       data: {},
       dataBuffer: {},
@@ -251,7 +266,9 @@
       const id = page.getAttribute("id") || page.id;
 
       if (!id) {
-        console.error("Missing the `id` attribute from the goa-public-form-page component");
+        console.error(
+          "Missing the `id` attribute from the goa-public-form-page component",
+        );
         return;
       }
 
@@ -310,7 +327,7 @@
           // TODO: don't like that this is being specific
           if (el.tagName === "GOA-CHECKBOX") {
             if (data) {
-              el.setAttribute("checked", data)
+              el.setAttribute("checked", data);
             }
           } else {
             el.setAttribute("value", data);
@@ -340,7 +357,7 @@
 
     let errorCount = 0;
 
-   // perform error checks for each form item
+    // perform error checks for each form item
     for (const [name, validators] of Object.entries(section.validators || {})) {
       const val = _state.dataBuffer[name];
 
diff --git a/libs/web-components/src/components/input/Input.svelte b/libs/web-components/src/components/input/Input.svelte
index 37bbd32af..276587be7 100644
--- a/libs/web-components/src/components/input/Input.svelte
+++ b/libs/web-components/src/components/input/Input.svelte
@@ -192,7 +192,7 @@
       e.stopPropagation();
       if (value) {
         value = "";
-        dispatch(el, "_change", { name, value }, { bubbles: true })  ;
+        dispatch(el, "_change", { name, value }, { bubbles: true });
       }
     });
 
@@ -237,51 +237,6 @@
     };
   }
 
-  function addRelayListener() {
-    receive(_inputEl, (action, data) => {
-      switch (action) {
-        case FieldsetSetValueMsg:
-          setValue(data as FieldsetSetValueRelayDetail);
-          break;
-        case FieldsetSetErrorMsg:
-          setError(data as FieldsetErrorRelayDetail);
-          break;
-        case FieldsetResetErrorsMsg:
-          error = "false";
-          break;
-        case FieldsetResetFieldsMsg:
-          setValue({ name, value: "" });
-          break;
-      }
-    });
-  }
-
-  function setError(detail: FieldsetErrorRelayDetail) {
-    error = detail.error ? "true" : "false";
-  }
-
-  function setValue(detail: FieldsetSetValueRelayDetail) {
-    // @ts-expect-error
-    value = detail.value;
-    dispatchOnChange(value);
-  }
-
-  function dispatchOnChange(value: string) {
-    dispatch(_rootEl, "_change", { name, value: value }, { bubbles: true });
-  }
-
-  // Relay message up the chain to allow any parent element to have a reference to the input element
-  function sendMountedMessage() {
-    if (name) {
-      relay<FormFieldMountRelayDetail>(
-        _rootEl,
-        FormFieldMountMsg,
-        { name, el: _inputEl },
-        { bubbles: true, timeout: 10 },
-      );
-    }
-  }
-
   function onInput(e: Event) {
     const input = e.target as HTMLInputElement;
 
@@ -545,7 +500,9 @@
     );
   }
 
-  .goa-input:not(.error):not(.input--disabled):hover:not(:has(input:focus-visible)) {
+  .goa-input:not(.error):not(.input--disabled):hover:not(
+      :has(input:focus-visible)
+    ) {
     /* hover border */
     box-shadow: var(--goa-text-input-border-hover);
   }
@@ -698,7 +655,9 @@
   }
 
   /* V2: Read-only input field styling (exclude disabled inputs) */
-  .container.v2.goa-input:not(.error)::has(input:read-only:not(:disabled):not(:focus-visible):not(:hover)) {
+  .container.v2.goa-input:not(.error)::has(
+      input:read-only:not(:disabled):not(:focus-visible):not(:hover)
+    ) {
     box-shadow: var(--goa-text-input-border-readonly);
   }
 
diff --git a/libs/web-components/src/components/text-area/TextArea.svelte b/libs/web-components/src/components/text-area/TextArea.svelte
index 3b6d8d0f2..ce3345aa9 100644
--- a/libs/web-components/src/components/text-area/TextArea.svelte
+++ b/libs/web-components/src/components/text-area/TextArea.svelte
@@ -1,9 +1,11 @@
-<svelte:options customElement={{
-  tag: "goa-textarea",
-  props: {
-    value: { reflect: true },
-  }
-}} />
+<svelte:options
+  customElement={{
+    tag: "goa-textarea",
+    props: {
+      value: { reflect: true },
+    },
+  }}
+/>
 
 <!-- Script -->
 <script lang="ts">
@@ -103,8 +105,6 @@
   onMount(() => {
     validateVersion(version);
     validateSize(size);
-    addRelayListener();
-    sendMountedMessage();
     const finalWidth = width.includes("%") ? width : `min(${width}, 100%)`;
     const cssProps: Record<string, string> = { width: finalWidth };
 
@@ -127,7 +127,7 @@
     dispatch(el, "goa:bind", el, { bubbles: true });
   }
 
-  function onChange(_e: Event) {
+  function onInput(_e: Event) {
     if (isDisabled) return;
     dispatchChange(_textareaEl.value);
   }

From d9e94d291be489a3c6925442fb35e992e613d7f8 Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Thu, 5 Feb 2026 14:39:07 -0700
Subject: [PATCH 03/13] fix: prevent unwanted numeric array indices from
 showing in the summary for subforms

---
 apps/prs/web/src/routes/public-form.svelte    |  2 +-
 .../src/components/form/Form.svelte           |  1 -
 .../src/components/form/FormSummary.svelte    | 52 ++++++++++++-------
 3 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/apps/prs/web/src/routes/public-form.svelte b/apps/prs/web/src/routes/public-form.svelte
index 01df3db81..1c53f9807 100644
--- a/apps/prs/web/src/routes/public-form.svelte
+++ b/apps/prs/web/src/routes/public-form.svelte
@@ -59,7 +59,7 @@
         birthdate: { label: "Birthdate" },
       },
       next: "description",
-      valdiators: {},
+      validators: {},
     },
 
     description: {
diff --git a/libs/web-components/src/components/form/Form.svelte b/libs/web-components/src/components/form/Form.svelte
index 55b298b8a..0e3d5fa1f 100644
--- a/libs/web-components/src/components/form/Form.svelte
+++ b/libs/web-components/src/components/form/Form.svelte
@@ -248,7 +248,6 @@
   }
 
   function init(data: PFState, { outline }: FormProps): PFState {
-    console.log("in the init");
     const state = data || {
       data: {},
       dataBuffer: {},
diff --git a/libs/web-components/src/components/form/FormSummary.svelte b/libs/web-components/src/components/form/FormSummary.svelte
index 08a2efffe..365d3d6f9 100644
--- a/libs/web-components/src/components/form/FormSummary.svelte
+++ b/libs/web-components/src/components/form/FormSummary.svelte
@@ -4,7 +4,12 @@
   import { onMount } from "svelte";
 
   import { relay } from "../../common/utils";
-  import { PFField, PFSummary, PFOutlineItem, PFPage } from "@abgov/ui-components-common";
+  import {
+    PFField,
+    PFSummary,
+    PFOutlineItem,
+    PFPage,
+  } from "@abgov/ui-components-common";
 
   export let heading: string = "";
 
@@ -29,16 +34,16 @@
   // Listen for events when clicking the `Change` link
   function addChangeListener() {
     _rootEl.addEventListener("change", (e) => {
-      const id = (e as CustomEvent).detail
+      const id = (e as CustomEvent).detail;
       relay(_rootEl, "form-summary:change", id, { bubbles: true });
-    })
+    });
   }
 
   // ====
   // Formatting
   // ====
 
-  function isBlank(val: string | number | Date | string[]): boolean {
+  function isBlank(val?: string | number | Date | string[]): boolean {
     if (Array.isArray(val)) {
       return val.length === 0;
     }
@@ -52,8 +57,8 @@
   }
 
   function format(
-    value: string,
-    formatter?: (input: string) => string
+    value?: string,
+    formatter?: (input: string) => string,
   ): string | string[] {
     if (formatter && value) {
       return formatter(value);
@@ -69,7 +74,7 @@
   // show if the page contains data => is either an array or object
   function showInSummary(pageId: string) {
     let page = _state.data[pageId];
-    return page && Array.isArray(page) || Object.keys(page).length > 0;
+    return (page && Array.isArray(page)) || Object.keys(page).length > 0;
   }
 
   function getOutlineItem(pageId: string): PFOutlineItem {
@@ -89,6 +94,12 @@
   }
 
   function getLabel(pageId: string, name: string): string {
+    console.log(
+      "get label",
+      pageId,
+      name,
+      getOutlineItem(pageId).fields[name]?.label ?? name,
+    );
     return getOutlineItem(pageId).fields[name]?.label ?? name;
   }
 
@@ -96,6 +107,17 @@
     return getOutlineItem(pageId).fields[name] ?? {};
   }
 
+  function showField(page: string, key: string, value?: string): boolean {
+    const notAlways = getField(page, key).hideInSummary !== "always";
+    const dontShowAsIsBlank = !(
+      getField(page, key).hideInSummary === "ifBlank" && value === ""
+    );
+    const notAnId = key !== "_id";
+    const notAnIndex = isNaN(parseInt(key));
+
+    return notAlways && dontShowAsIsBlank && notAnId && notAnIndex;
+  }
+
   function getSummary(pageId: string): Record<string, string> {
     const data = _state.data[pageId] as PFPage;
     if (!data) {
@@ -139,14 +161,10 @@
                           </td>
                         </tr>
                       {/each}
-                    <!-- show each data field -->
+                      <!-- show each data field -->
                     {:else}
                       {#each Object.entries(item) as [key, value]}
-                        {#if
-                          getField(page, key).hideInSummary !== "always"
-                          && !(getField(page, key).hideInSummary === "ifBlank" && value === "")
-                          && key !== "_id"
-                        }
+                        {#if showField(page, key, value)}
                           <tr>
                             <td class="label">{getLabel(page, key)}</td>
                             <td class="value" class:empty={isBlank(value)}>
@@ -157,7 +175,7 @@
                       {/each}
                     {/if}
                   </table>
-                  {#if getDataItems(page).length-1 !== index}
+                  {#if getDataItems(page).length - 1 !== index}
                     <goa-divider mt="l" mb="l" />
                   {/if}
                 {/each}
@@ -175,12 +193,10 @@
                         </td>
                       </tr>
                     {/each}
-                  <!-- show each data field -->
+                    <!-- show each data field -->
                   {:else}
                     {#each Object.entries(getDataItem(page)) as [key, value]}
-                      {#if getField(page, key).hideInSummary !== "always"
-                        && !(getField(page, key).hideInSummary === "ifBlank" && value === "")
-                      }
+                      {#if getField(page, key).hideInSummary !== "always" && !(getField(page, key).hideInSummary === "ifBlank" && value === "")}
                         <tr>
                           <td class="label">{getLabel(page, key)}</td>
                           <td class="value" class:empty={isBlank(value)}>

From da03fcd7333acb9e9d7a33780f917be8540910a4 Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Thu, 5 Feb 2026 15:02:51 -0700
Subject: [PATCH 04/13] remove unused form components

---
 .../src/components/form/SubformForm.svelte            | 11 -----------
 .../src/components/form/SubformList.svelte            | 11 -----------
 2 files changed, 22 deletions(-)
 delete mode 100644 libs/web-components/src/components/form/SubformForm.svelte
 delete mode 100644 libs/web-components/src/components/form/SubformList.svelte

diff --git a/libs/web-components/src/components/form/SubformForm.svelte b/libs/web-components/src/components/form/SubformForm.svelte
deleted file mode 100644
index d21aa6da9..000000000
--- a/libs/web-components/src/components/form/SubformForm.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<svelte:options customElement={{
-  tag: "goa-pf-subform-fields",
-  props: {
-
-  }
-}} />
-
-<script lang="ts">
-
-
-</script>
diff --git a/libs/web-components/src/components/form/SubformList.svelte b/libs/web-components/src/components/form/SubformList.svelte
deleted file mode 100644
index edb388dc1..000000000
--- a/libs/web-components/src/components/form/SubformList.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<svelte:options customElement={{
-  tag: "goa-pf-subform-list",
-  props: {
-
-  }
-}} />
-
-<script lang="ts">
-
-
-</script>

From 6fdff7a2f356f01743fae1c9546d1072c1c0a8bf Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Thu, 5 Feb 2026 15:21:17 -0700
Subject: [PATCH 05/13] create react public form wrappers

---
 .../src/lib/form/public-form-page.tsx         | 80 ++++++-----------
 .../src/lib/form/public-form.tsx              | 89 +++++++++----------
 .../src/lib/form/public-subform.tsx           | 81 ++++-------------
 3 files changed, 88 insertions(+), 162 deletions(-)

diff --git a/libs/react-components/src/lib/form/public-form-page.tsx b/libs/react-components/src/lib/form/public-form-page.tsx
index 1c38ccfe2..6f5cee3db 100644
--- a/libs/react-components/src/lib/form/public-form-page.tsx
+++ b/libs/react-components/src/lib/form/public-form-page.tsx
@@ -1,85 +1,61 @@
-import { ReactNode, useEffect, useRef } from "react";
-import {
-  GoabPublicFormPageButtonVisibility,
-  GoabPublicFormPageStep,
-  Margins, DataAttributes,
-} from "@abgov/ui-components-common";
+import { ReactNode } from "react";
+import { DataAttributes } from "@abgov/ui-components-common";
 import { transformProps, kebab } from "../common/extract-props";
 
-interface WCProps extends Margins {
+interface WCProps {
   id?: string;
   heading?: string;
   "sub-heading"?: string;
   "section-title"?: string;
-  "back-url"?: string;
-  type?: string;
   "button-text"?: string;
-  "button-visibility"?: string;
-  "summary-heading"?: string;
+  "back-visibility"?: string;
+  error?: string;
+  "data-pf-editting"?: string;
 }
 
 declare module "react" {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
-      "goa-public-form-page": WCProps & React.HTMLAttributes<HTMLElement> & {
-        ref: React.RefObject<HTMLElement | null>;
-      };
+      "goa-public-form-page": WCProps & React.HTMLAttributes<HTMLElement>;
     }
   }
 }
 
-interface GoabPublicFormPageProps extends Margins, DataAttributes {
+interface GoabPublicFormPageProps extends DataAttributes {
   id?: string;
   heading?: string;
   subHeading?: string;
-  summaryHeading?: string;
   sectionTitle?: string;
-  backUrl?: string;
-  type?: GoabPublicFormPageStep;
   buttonText?: string;
-  buttonVisibility?: GoabPublicFormPageButtonVisibility;
-  /**
-   * Triggered when the form page continues to the next step
-   * @param event - The continue event details
-   */
-  onContinue?: (event: Event) => void;
+  backVisibility?: "visible" | "hidden";
+  error?: string;
+  editting?: boolean;
   children: ReactNode;
 }
 
 export function GoabPublicFormPage({
-  onContinue,
+  subHeading,
+  sectionTitle,
+  buttonText,
+  backVisibility,
+  editting,
   children,
   ...rest
 }: GoabPublicFormPageProps) {
-  const ref = useRef<HTMLElement>(null);
-
-  const _props = transformProps<WCProps>(rest, kebab);
-
-  useEffect(() => {
-    if (!ref.current) return;
-    const current = ref.current;
-
-    const continueListener = (e: Event) => {
-      onContinue?.(e);
-    };
-
-    if (onContinue) {
-      current.addEventListener("_continue", continueListener);
-    }
-
-    return () => {
-      if (onContinue) {
-        current.removeEventListener("_continue", continueListener);
-      }
-    };
-  }, [ref, onContinue]);
-
-  return (
-    <goa-public-form-page ref={ref} {..._props}>
-      {children}
-    </goa-public-form-page>
+  const _props = transformProps<WCProps>(
+    {
+      ...rest,
+      "sub-heading": subHeading,
+      "section-title": sectionTitle,
+      "button-text": buttonText,
+      "back-visibility": backVisibility,
+      "data-pf-editting": editting ? "true" : undefined,
+    },
+    kebab
   );
+
+  return <goa-public-form-page {..._props}>{children}</goa-public-form-page>;
 }
 
 export default GoabPublicFormPage;
diff --git a/libs/react-components/src/lib/form/public-form.tsx b/libs/react-components/src/lib/form/public-form.tsx
index 3a81fa305..4a1ceb5d1 100644
--- a/libs/react-components/src/lib/form/public-form.tsx
+++ b/libs/react-components/src/lib/form/public-form.tsx
@@ -1,16 +1,14 @@
-import { ReactNode, useRef, useLayoutEffect } from "react";
+import { ReactNode, useRef, useEffect } from "react";
 
 import {
   DataAttributes,
-  GoabFormState,
-  GoabPublicFormStatus,
+  Margins,
+  PFState,
+  PFOutline,
 } from "@abgov/ui-components-common";
 import { transformProps, lowercase } from "../common/extract-props";
 
-interface WCProps {
-  status?: string;
-  name?: string;
-}
+interface WCProps extends Margins {}
 
 declare module "react" {
   // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -23,71 +21,70 @@ declare module "react" {
   }
 }
 
-interface GoabPublicFormProps extends DataAttributes {
-  status?: GoabPublicFormStatus;
-  name?: string;
-  onInit?: (event: Event) => void;
-  onComplete?: (event: GoabFormState) => void;
-  onStateChange?: (event: GoabFormState) => void;
+type InitFunction = (data: PFState, props: { outline: PFOutline }) => PFState;
+
+interface GoabPublicFormChangeDetail {
+  state: PFState;
+  name: string;
+  value: string;
+}
+
+interface GoabPublicFormProps extends Margins, DataAttributes {
+  onInit?: (initFn: InitFunction) => void;
+  onChange?: (detail: GoabPublicFormChangeDetail) => void;
+  onNext?: (state: PFState) => void;
+  onSubformChange?: (state: PFState) => void;
   children: ReactNode;
 }
 
 export function GoabPublicForm({
   onInit,
-  onComplete,
-  onStateChange,
+  onChange,
+  onNext,
+  onSubformChange,
   children,
   ...rest
 }: GoabPublicFormProps) {
   const ref = useRef<HTMLElement>(null);
-  const initialized = useRef(false);
 
   const _props = transformProps<WCProps>(rest, lowercase);
 
-  // Use useLayoutEffect to set up listeners before the component mounts
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!ref.current) return;
     const current = ref.current;
 
     const initListener = (e: Event) => {
-      onInit?.(e);
+      const initFn = (e as CustomEvent<InitFunction>).detail;
+      onInit?.(initFn);
     };
 
-    //  First time initialization, add init listener immediately
-    if (onInit && !initialized.current) {
-      current.addEventListener("_init", initListener);
-    }
-
-    const completeListener = (e: Event) => {
-      const detail = (e as CustomEvent).detail;
-      onComplete?.(detail);
+    const changeListener = (e: Event) => {
+      const detail = (e as CustomEvent<GoabPublicFormChangeDetail>).detail;
+      onChange?.(detail);
     };
 
-    const stateChangeListener = (e: Event) => {
-      const detail = (e as CustomEvent).detail;
-      onStateChange?.(detail.data);
+    const nextListener = (e: Event) => {
+      const state = (e as CustomEvent<PFState>).detail;
+      onNext?.(state);
     };
 
-    if (onComplete) {
-      current.addEventListener("_complete", completeListener);
-    }
+    const subformChangeListener = (e: Event) => {
+      const state = (e as CustomEvent<PFState>).detail;
+      onSubformChange?.(state);
+    };
 
-    if (onStateChange) {
-      current.addEventListener("_stateChange", stateChangeListener);
-    }
+    current.addEventListener("_init", initListener);
+    current.addEventListener("_change", changeListener);
+    current.addEventListener("_next", nextListener);
+    current.addEventListener("_subformChange", subformChangeListener);
 
     return () => {
-      if (onInit) {
-        current.removeEventListener("_init", initListener);
-      }
-      if (onComplete) {
-        current.removeEventListener("_complete", completeListener);
-      }
-      if (onStateChange) {
-        current.removeEventListener("_stateChange", stateChangeListener);
-      }
+      current.removeEventListener("_init", initListener);
+      current.removeEventListener("_change", changeListener);
+      current.removeEventListener("_next", nextListener);
+      current.removeEventListener("_subformChange", subformChangeListener);
     };
-  }, [onInit, onComplete, onStateChange]);
+  }, [onInit, onChange, onNext, onSubformChange]);
 
   return (
     <goa-public-form ref={ref} {..._props}>
diff --git a/libs/react-components/src/lib/form/public-subform.tsx b/libs/react-components/src/lib/form/public-subform.tsx
index 30b3f78e9..c8ef96bde 100644
--- a/libs/react-components/src/lib/form/public-subform.tsx
+++ b/libs/react-components/src/lib/form/public-subform.tsx
@@ -1,83 +1,36 @@
-import { ReactNode, useEffect, useRef } from "react";
-import { Margins, DataAttributes } from "@abgov/ui-components-common";
-import { transformProps, kebab } from "../common/extract-props";
+import { ReactNode } from "react";
+import { DataAttributes } from "@abgov/ui-components-common";
 
-interface WCProps extends Margins {
-  id?: string;
-  name?: string;
-  "continue-msg"?: string;
-}
+interface WCProps {}
 
 declare module "react" {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
-      "goa-public-subform": WCProps & React.HTMLAttributes<HTMLElement> & {
-        ref: React.RefObject<HTMLElement | null>;
-      };
+      "goa-pf-subform": WCProps &
+        React.HTMLAttributes<HTMLElement> & {
+          children?: ReactNode;
+        };
     }
   }
 }
 
-interface GoabPublicSubformProps extends Margins, DataAttributes {
-  id?: string;
-  name?: string;
-  continueMsg?: string;
-  onInit?: (event: Event) => void;
-  onStateChange?: (event: Event) => void;
-  children: ReactNode;
+interface GoabPfSubformProps extends DataAttributes {
+  formContent?: ReactNode;
+  children?: ReactNode;
 }
 
-export function GoabPublicSubform({
-  id = "",
-  name = "",
-  continueMsg = "",
-  onInit,
-  onStateChange,
+export function GoabPfSubform({
+  formContent,
   children,
   ...rest
-}: GoabPublicSubformProps) {
-  const ref = useRef<HTMLElement>(null);
-
-  const _props = transformProps<WCProps>(
-    { id, name, "continue-msg": continueMsg, ...rest },
-    kebab
-  );
-
-  useEffect(() => {
-    if (!ref.current) return;
-    const current = ref.current;
-
-    const initListener = (e: Event) => {
-      onInit?.(e);
-    };
-
-    const stateChangeListener = (e: Event) => {
-      onStateChange?.(e);
-    };
-
-    if (onInit) {
-      current.addEventListener("_init", initListener);
-    }
-    if (onStateChange) {
-      current.addEventListener("_stateChange", stateChangeListener);
-    }
-
-    return () => {
-      if (onInit) {
-        current.removeEventListener("_init", initListener);
-      }
-      if (onStateChange) {
-        current.removeEventListener("_stateChange", stateChangeListener);
-      }
-    };
-  }, [ref, onInit, onStateChange]);
-
+}: GoabPfSubformProps) {
   return (
-    <goa-public-subform ref={ref} {..._props}>
+    <goa-pf-subform {...rest}>
+      {formContent && <div slot="form">{formContent}</div>}
       {children}
-    </goa-public-subform>
+    </goa-pf-subform>
   );
 }
 
-export default GoabPublicSubform;
+export default GoabPfSubform;

From d1fe4a172224f0549b3341e38c5ca9fac8fd7ae9 Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Tue, 10 Feb 2026 10:53:38 -0700
Subject: [PATCH 06/13] updates

---
 apps/prs/react/src/app/app.tsx                |   1 +
 apps/prs/react/src/main.tsx                   |   2 +
 .../react/src/routes/features/public-form.tsx | 218 +++++++++
 .../specs/datepicker.browser.spec.tsx         |   4 +-
 .../specs/public-form.browser.spec.tsx        | 431 ++++++++++++++++++
 .../src/lib/form/public-subform.tsx           |   2 +-
 .../src/components/checkbox/Checkbox.svelte   |  42 +-
 .../components/date-picker/DatePicker.svelte  |  17 +-
 8 files changed, 697 insertions(+), 20 deletions(-)
 create mode 100644 apps/prs/react/src/routes/features/public-form.tsx
 create mode 100644 libs/react-components/specs/public-form.browser.spec.tsx

diff --git a/apps/prs/react/src/app/app.tsx b/apps/prs/react/src/app/app.tsx
index 6b04ef177..a527320b0 100644
--- a/apps/prs/react/src/app/app.tsx
+++ b/apps/prs/react/src/app/app.tsx
@@ -89,6 +89,7 @@ export function App() {
               <Link to="/features/v2-icons">v2 header icons</Link>
               <Link to="/features/3137">3137 Work Side Menu Group</Link>
               <Link to="/features/3306">3306 Custom slug value for tabs</Link>
+              <Link to="/features/public-form">Public form</Link>
             </GoabSideMenuGroup>
             <GoabSideMenuGroup heading="Everything">
               <Link to="/everything">A</Link>
diff --git a/apps/prs/react/src/main.tsx b/apps/prs/react/src/main.tsx
index aa2d0bbd4..9cb2f3273 100644
--- a/apps/prs/react/src/main.tsx
+++ b/apps/prs/react/src/main.tsx
@@ -68,6 +68,7 @@ import { Feat3241Route } from "./routes/features/feat3241";
 import { FeatV2IconsRoute } from "./routes/features/featV2Icons";
 import { Feat3137Route } from "./routes/features/feat3137";
 import Feat3306Route from "./routes/features/feat3306";
+import { PublicFormRoute } from "./routes/features/public-form";
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 
@@ -144,6 +145,7 @@ root.render(
           <Route path="features/3137" element={<Feat3137Route />} />
           <Route path="features/1908" element={<Feat1908Route />} />
           <Route path="features/3306" element={<Feat3306Route />} />
+          <Route path="features/public-form" element={<PublicFormRoute />} />
         </Route>
       </Routes>
     </BrowserRouter>
diff --git a/apps/prs/react/src/routes/features/public-form.tsx b/apps/prs/react/src/routes/features/public-form.tsx
new file mode 100644
index 000000000..b0212b1c4
--- /dev/null
+++ b/apps/prs/react/src/routes/features/public-form.tsx
@@ -0,0 +1,218 @@
+import { GoabFormItem, GoabInput, GoabPublicForm, GoabPublicFormPage, GoabPublicFormSummary, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components";
+import { LengthValidator, NumericValidator, PFState, RequiredValidator, SINValidator } from "@abgov/ui-components-common";
+import React, { useState } from "react";
+
+const outline: PFOutline = {
+  role: {
+    subform: false,
+    props: {
+      heading: "What is your role in the court order?",
+      "section-title": "Support order details",
+    },
+    fields: {
+      role: {
+        label: "What is your role?",
+        formatter: (val: string) => val.toUpperCase(),
+        hideInSummary: "never",
+      },
+    },
+    next: (state: PFState) => {
+      const role = state.dataBuffer["role"];
+      return role === "Payor" ? "salary" : "identification";
+    },
+    validators: {
+      role: [RequiredValidator("Role is required")],
+    },
+  },
+
+  salary: {
+    subform: false,
+    props: {
+      heading: "Payor salary",
+    },
+    fields: {
+      salary: { label: "Yearly income", hideInSummary: "never" },
+    },
+    next: "summary",
+    validators: {
+      salary: [NumericValidator({ min: 0 })],
+    },
+  },
+
+  identification: {
+    subform: false,
+    props: {
+      "section-title": "Support order details",
+      heading: "Do you know any of the identifiers about the other party?",
+    },
+    fields: {
+      sin: {
+        label: "Social Insurance #",
+        formatter: (val: string) => val.match(/(.{3})/g)?.join(" ") || val,
+        hideInSummary: "never",
+      },
+      ahcn: {
+        label: "Alberta Health Care #",
+        formatter: (val: string) => val.match(/(.{4})/g)?.join("-") || val,
+        hideInSummary: "never",
+      },
+      info: { label: "Additional information", hideInSummary: "never" },
+    },
+    next: (state: PFState): string => {
+      const sin = state.dataBuffer["sin"];
+      const ahcn = state.dataBuffer["ahcn"];
+
+      if (!sin && !ahcn) {
+        throw "Either sin or ahcn is required";
+      }
+
+      return "address";
+    },
+    validators: {
+      sin: [SINValidator()],
+      ahcn: [LengthValidator({ min: 8 })],
+    },
+  },
+
+  payor: {
+    subform: false,
+    props: {
+      heading: "Payor Name",
+    },
+    fields: {
+      firstName: { label: "First name", hideInSummary: "never" },
+      lastName: { label: "Last name", hideInSummary: "never" },
+    },
+    summarize: (page: PFPage) => ({
+      "Full name": `${page["firstName"]} ${page["lastName"]}`.trim(),
+    }),
+    next: "address",
+    validators: {},
+  },
+
+  address: {
+    subform: false,
+    props: {
+      "section-title": "Support order details",
+      heading: "Your current address",
+    },
+    fields: {
+      city: { label: "City/Town", hideInSummary: "never" },
+      street: { label: "Street #", hideInSummary: "never" },
+      "postal-code": { label: "Postal code", hideInSummary: "never" },
+    },
+    next: "summary",
+    validators: {},
+  },
+
+  summary: {
+    subform: false,
+    props: {
+      "section-title": "Support order details",
+      heading: "Summary",
+    },
+    fields: {},
+    next: (state: PFState): string => {
+      console.log("submit to backend here", state);
+      return "";
+    },
+    validators: {},
+  },
+};
+
+export function PublicFormRoute() {
+  const [state, setState] = useState<PFState | undefined>(undefined);
+
+  const handleInit = (initFn: any) => {
+    // Initialize with restored state
+    const initialState = initFn(null, { outline });
+    setState(initialState);
+  };
+
+  const handleChange = (detail: any) => {
+    console.log("onChange", detail);
+  };
+
+  const handleNext = (newState: PFState) => {
+    setState(newState);
+    console.log("onNext", newState);
+  };
+
+  const handleSubformChange = (newState: PFState) => {
+    setState({ ...newState });
+    console.log("onSubformChange", newState);
+  };
+
+  const getPage = (pageId: string, defaultValue: unknown) => {
+    return state?.data?.[pageId] || defaultValue;
+  };
+
+  return (
+    <div style={{ margin: "5rem auto", width: "90ch" }}>
+      <GoabPublicForm
+        onInit={handleInit}
+        onChange={handleChange}
+        onSubformChange={handleSubformChange}
+        onNext={handleNext}
+      >
+        <GoabPublicFormPage id="role">
+          <GoabFormItem helpText="some help text">
+            <GoabRadioGroup name="role" data-pf-item="">
+              <GoabRadioItem value="Recipient" label="Recipient" />
+              <GoabRadioItem value="Payor" label="Payor" />
+            </GoabRadioGroup>
+          </GoabFormItem>
+        </GoabPublicFormPage>
+
+        <GoabPublicFormPage id="identification">
+          <GoabFormItem
+            label="What is the Social Insurance Number?"
+            requirement="optional"
+            helpText="9-digit number, such as 123 456 789."
+          >
+            <GoabInput data-pf-item="" name="sin" />
+          </GoabFormItem>
+
+          <GoabFormItem label="What is the AHCN">
+            <GoabInput data-pf-item="" name="ahcn" />
+          </GoabFormItem>
+        </GoabPublicFormPage>
+
+        <GoabPublicFormPage id="payor">
+          <GoabFormItem label="First name">
+            <GoabInput data-pf-item="" name="firstName" />
+          </GoabFormItem>
+          <GoabFormItem label="Last name">
+            <GoabInput data-pf-item="" name="lastName" />
+          </GoabFormItem>
+        </GoabPublicFormPage>
+
+        <GoabPublicFormPage id="salary">
+          <GoabFormItem label="Salary">
+            <GoabInput data-pf-item="" name="salary" type="number" />
+          </GoabFormItem>
+        </GoabPublicFormPage>
+
+        <GoabPublicFormPage id="address">
+          <GoabFormItem label="City" helpText="Where you live">
+            <GoabInput data-pf-item="" name="city" />
+          </GoabFormItem>
+          <GoabFormItem label="Address">
+            <GoabInput data-pf-item="" name="street" />
+          </GoabFormItem>
+          <GoabFormItem label="Postal Code">
+            <GoabInput data-pf-item="" name="postal-code" />
+          </GoabFormItem>
+        </GoabPublicFormPage>
+
+        <GoabPublicFormPage
+          id="summary"
+          buttonText="Submit"
+          backVisibility="hidden"
+        >
+          <GoabPublicFormSummary />
+        </GoabPublicFormPage>
+      </GoabPublicForm>
+    </div>
+  )
+}
diff --git a/libs/react-components/specs/datepicker.browser.spec.tsx b/libs/react-components/specs/datepicker.browser.spec.tsx
index 2cd6fbb8d..479c2e0d6 100644
--- a/libs/react-components/specs/datepicker.browser.spec.tsx
+++ b/libs/react-components/specs/datepicker.browser.spec.tsx
@@ -329,7 +329,7 @@ describe("Date Picker input type", () => {
 
     const result = render(<Component />);
     const datePickerMonth = result.getByTestId("input-month");
-    const datePickerMonthMarch = result.getByTestId("dropdown-item-3");
+    const datePickerMonthMarch = result.getByTestId("dropdown-item-3");  // march = 3
     const datePickerDay = result.getByTestId("input-day");
     const datePickerYear = result.getByTestId("input-year");
 
@@ -352,7 +352,7 @@ describe("Date Picker input type", () => {
     rootElChangeHandler.mockClear();
 
     // Input day
-    await datePickerDay.click();
+    await userEvent.click(datePickerDay);
     await userEvent.type(datePickerDay, "1");
 
     // Select month
diff --git a/libs/react-components/specs/public-form.browser.spec.tsx b/libs/react-components/specs/public-form.browser.spec.tsx
new file mode 100644
index 000000000..028e25752
--- /dev/null
+++ b/libs/react-components/specs/public-form.browser.spec.tsx
@@ -0,0 +1,431 @@
+import { render } from "vitest-browser-react";
+import {
+  GoabPublicForm,
+  GoabPublicFormPage,
+  GoabPublicFormSummary,
+  GoabFormItem,
+  GoabRadioGroup,
+  GoabRadioItem,
+  GoabInput,
+} from "../src";
+import { expect, describe, it, vi } from "vitest";
+import { userEvent } from "@vitest/browser/context";
+import { useState } from "react";
+import {
+  RequiredValidator,
+  LengthValidator,
+  SINValidator,
+  NumericValidator,
+  PFState,
+  PFOutline,
+  PFPage,
+} from "@abgov/ui-components-common";
+
+const outline: PFOutline = {
+  role: {
+    subform: false,
+    props: {
+      heading: "What is your role in the court order?",
+      "section-title": "Support order details",
+    },
+    fields: {
+      role: {
+        label: "What is your role?",
+        formatter: (val: string) => val.toUpperCase(),
+        hideInSummary: "never",
+      },
+    },
+    next: (state: PFState) => {
+      const role = state.dataBuffer["role"];
+      return role === "Payor" ? "salary" : "children";
+    },
+    validators: {
+      role: [RequiredValidator("Role is required")],
+    },
+  },
+
+  children: {
+    subform: true,
+    props: {
+      heading: "Do you have children",
+    },
+    fields: {
+      "first-name": {
+        label: "First name",
+        formatter: (val: string) => val[0]?.toUpperCase() + val.substring(1),
+        hideInSummary: "never",
+      },
+      "last-name": {
+        label: "Last name",
+        formatter: (val: string) => val[0]?.toUpperCase() + val.substring(1),
+        hideInSummary: "never",
+      },
+      birthdate: { label: "Birthdate", hideInSummary: "never" },
+    },
+    next: "identification",
+    validators: {},
+  },
+
+  salary: {
+    subform: false,
+    props: {
+      heading: "Payor salary",
+    },
+    fields: {
+      salary: { label: "Yearly income", hideInSummary: "never" },
+    },
+    next: "summary",
+    validators: {
+      salary: [NumericValidator({ min: 0 })],
+    },
+  },
+
+  identification: {
+    subform: false,
+    props: {
+      "section-title": "Support order details",
+      heading: "Do you know any of the identifiers about the other party?",
+    },
+    fields: {
+      sin: {
+        label: "Social Insurance #",
+        formatter: (val: string) => val.match(/(.{3})/g)?.join(" ") || val,
+        hideInSummary: "never",
+      },
+      ahcn: {
+        label: "Alberta Health Care #",
+        formatter: (val: string) => val.match(/(.{4})/g)?.join("-") || val,
+        hideInSummary: "never",
+      },
+      info: { label: "Additional information", hideInSummary: "never" },
+    },
+    next: (state: PFState): string => {
+      const sin = state.dataBuffer["sin"];
+      const ahcn = state.dataBuffer["ahcn"];
+
+      if (!sin && !ahcn) {
+        throw "Either sin or ahcn is required";
+      }
+
+      return "address";
+    },
+    validators: {
+      sin: [SINValidator()],
+      ahcn: [LengthValidator({ min: 8 })],
+    },
+  },
+
+  payor: {
+    subform: false,
+    props: {
+      heading: "Payor Name",
+    },
+    fields: {
+      firstName: { label: "First name", hideInSummary: "never" },
+      lastName: { label: "Last name", hideInSummary: "never" },
+    },
+    summarize: (page: PFPage) => ({
+      "Full name": `${page["firstName"]} ${page["lastName"]}`.trim(),
+    }),
+    next: "address",
+    validators: {},
+  },
+
+  address: {
+    subform: false,
+    props: {
+      "section-title": "Support order details",
+      heading: "Your current address",
+    },
+    fields: {
+      city: { label: "City/Town", hideInSummary: "never" },
+      street: { label: "Street #", hideInSummary: "never" },
+      "postal-code": { label: "Postal code", hideInSummary: "never" },
+    },
+    next: "summary",
+    validators: {},
+  },
+
+  summary: {
+    subform: false,
+    props: {
+      "section-title": "Support order details",
+      heading: "Summary",
+    },
+    fields: {},
+    next: (state: PFState): string => {
+      console.log("submit to backend here", state);
+      return "";
+    },
+    validators: {},
+  },
+};
+
+function PublicFormTestComponent() {
+  const [state, setState] = useState<PFState | undefined>(undefined);
+
+  const handleInit = (initFn: any) => {
+    // Initialize with restored state
+    const initialState = initFn(null, { outline });
+    setState(initialState);
+  };
+
+  const handleChange = (detail: any) => {
+    console.log("onChange", detail);
+  };
+
+  const handleNext = (newState: PFState) => {
+    setState(newState);
+    console.log("onNext", newState);
+  };
+
+  const handleSubformChange = (newState: PFState) => {
+    setState({ ...newState });
+    console.log("onSubformChange", newState);
+  };
+
+  const getPage = (pageId: string, defaultValue: unknown) => {
+    return state?.data?.[pageId] || defaultValue;
+  };
+
+  return (
+    <div style={{ margin: "5rem auto", width: "90ch" }}>
+      <GoabPublicForm
+        onInit={handleInit}
+        onChange={handleChange}
+        onSubformChange={handleSubformChange}
+        onNext={handleNext}
+      >
+        <GoabPublicFormPage id="role">
+          <GoabFormItem helpText="some help text">
+            <GoabRadioGroup name="role" data-pf-item="">
+              <GoabRadioItem value="Recipient" label="Recipient" />
+              <GoabRadioItem value="Payor" label="Payor" />
+            </GoabRadioGroup>
+          </GoabFormItem>
+        </GoabPublicFormPage>
+
+        <GoabPublicFormPage id="identification">
+          <GoabFormItem
+            label="What is the Social Insurance Number?"
+            requirement="optional"
+            helpText="9-digit number, such as 123 456 789."
+          >
+            <GoabInput data-pf-item="" name="sin" />
+          </GoabFormItem>
+
+          <GoabFormItem label="What is the AHCN">
+            <GoabInput data-pf-item="" name="ahcn" />
+          </GoabFormItem>
+        </GoabPublicFormPage>
+
+        <GoabPublicFormPage id="payor">
+          <GoabFormItem label="First name">
+            <GoabInput data-pf-item="" name="firstName" />
+          </GoabFormItem>
+          <GoabFormItem label="Last name">
+            <GoabInput data-pf-item="" name="lastName" />
+          </GoabFormItem>
+        </GoabPublicFormPage>
+
+        <GoabPublicFormPage id="salary">
+          <GoabFormItem label="Salary">
+            <GoabInput data-pf-item="" name="salary" type="number" />
+          </GoabFormItem>
+        </GoabPublicFormPage>
+
+        <GoabPublicFormPage id="address">
+          <GoabFormItem label="City" helpText="Where you live">
+            <GoabInput data-pf-item="" name="city" />
+          </GoabFormItem>
+          <GoabFormItem label="Address">
+            <GoabInput data-pf-item="" name="street" />
+          </GoabFormItem>
+          <GoabFormItem label="Postal Code">
+            <GoabInput data-pf-item="" name="postal-code" />
+          </GoabFormItem>
+        </GoabPublicFormPage>
+
+        <GoabPublicFormPage
+          id="summary"
+          buttonText="Submit"
+          backVisibility="hidden"
+        >
+          <GoabPublicFormSummary />
+        </GoabPublicFormPage>
+      </GoabPublicForm>
+    </div>
+  );
+}
+
+describe("PublicForm Browser Tests", () => {
+  it.only("initializes the form", async () => {
+    const result = render(<PublicFormTestComponent />);
+
+    await vi.waitFor(() => {
+      const form = result.container.querySelector("goa-public-form");
+      expect(form).toBeTruthy();
+    });
+
+    // Wait for form to initialize
+    await vi.waitFor(
+      () => {
+        // on first page, so it should be visible
+        const recipient = result.container.querySelector(
+          'input[type="radio"][name="role"][value="Recipient"]'
+        );
+
+        // on later page, so should not be visible yet
+        const sin = result.container.querySelector(
+          'input[name=sin]'
+        );
+        expect(recipient).toBeTruthy();
+        expect(recipient).toBeVisible();
+        console.log(result.container.innerHTML)
+        expect(sin).toBeTruthy();
+        expect(sin).not.toBeVisible();
+      },
+      { timeout: 3000 }
+    );
+  });
+
+  it("can select a radio button and continue to next page", async () => {
+    const result = render(<PublicFormTestComponent />);
+
+    await vi.waitFor(() => {
+      const form = result.container.querySelector("goa-public-form");
+      expect(form).toBeTruthy();
+    });
+
+    // Wait for radio items to be present
+    await vi.waitFor(
+      () => {
+        const recipientRadio = result.container.querySelector(
+          'goa-radio-item[value="Recipient"]'
+        );
+        expect(recipientRadio).toBeTruthy();
+      },
+      { timeout: 3000 }
+    );
+
+    // Select the Recipient radio button
+    const recipientRadio = result.container.querySelector(
+      'goa-radio-item[value="Recipient"]'
+    ) as HTMLElement;
+    await userEvent.click(recipientRadio);
+
+    // Click continue button
+    await vi.waitFor(
+      () => {
+        const continueButton = result.container.querySelector(
+          'goa-button[type="primary"]'
+        ) as HTMLElement;
+        expect(continueButton).toBeTruthy();
+      },
+      { timeout: 1000 }
+    );
+
+    const continueButton = result.container.querySelector(
+      'goa-button[type="primary"]'
+    ) as HTMLElement;
+    await userEvent.click(continueButton);
+
+    // Should navigate to children page (for Recipient role)
+    await vi.waitFor(
+      () => {
+        const childrenPage = result.container.querySelector(
+          'goa-public-form-page[id="children"]'
+        );
+        expect(childrenPage).toBeTruthy();
+      },
+      { timeout: 2000 }
+    );
+  });
+
+  it("validates required fields and shows errors", async () => {
+    const result = render(<PublicFormTestComponent />);
+
+    await vi.waitFor(() => {
+      const form = result.container.querySelector("goa-public-form");
+      expect(form).toBeTruthy();
+    });
+
+    // Wait for form to initialize
+    await vi.waitFor(
+      () => {
+        const continueButton = result.container.querySelector(
+          'goa-button[type="primary"]'
+        );
+        expect(continueButton).toBeTruthy();
+      },
+      { timeout: 3000 }
+    );
+
+    // Try to click continue without selecting a role
+    const continueButton = result.container.querySelector(
+      'goa-button[type="primary"]'
+    ) as HTMLElement;
+    await userEvent.click(continueButton);
+
+    // Should show validation error
+    await vi.waitFor(
+      () => {
+        const formItem = result.container.querySelector("goa-form-item[error]");
+        expect(formItem).toBeTruthy();
+      },
+      { timeout: 2000 }
+    );
+  });
+
+  it("supports conditional navigation based on form data", async () => {
+    const result = render(<PublicFormTestComponent />);
+
+    await vi.waitFor(() => {
+      const form = result.container.querySelector("goa-public-form");
+      expect(form).toBeTruthy();
+    });
+
+    // Wait for radio items
+    await vi.waitFor(
+      () => {
+        const payorRadio = result.container.querySelector(
+          'goa-radio-item[value="Payor"]'
+        );
+        expect(payorRadio).toBeTruthy();
+      },
+      { timeout: 3000 }
+    );
+
+    // Select Payor (should go to salary page instead of children)
+    const payorRadio = result.container.querySelector(
+      'goa-radio-item[value="Payor"]'
+    ) as HTMLElement;
+    await userEvent.click(payorRadio);
+
+    // Click continue
+    const continueButton = result.container.querySelector(
+      'goa-button[type="primary"]'
+    ) as HTMLElement;
+    await userEvent.click(continueButton);
+
+    // Should navigate to salary page (not children)
+    await vi.waitFor(
+      () => {
+        const salaryPage = result.container.querySelector(
+          'goa-public-form-page[id="salary"]'
+        );
+        expect(salaryPage).toBeTruthy();
+      },
+      { timeout: 2000 }
+    );
+  });
+
+  it("renders the summary page with form data", async () => {
+    const result = render(<PublicFormTestComponent />);
+
+    await vi.waitFor(() => {
+      const summary = result.container.querySelector("goa-public-form-summary");
+      expect(summary).toBeTruthy();
+    });
+  });
+});
diff --git a/libs/react-components/src/lib/form/public-subform.tsx b/libs/react-components/src/lib/form/public-subform.tsx
index c8ef96bde..fdc582d50 100644
--- a/libs/react-components/src/lib/form/public-subform.tsx
+++ b/libs/react-components/src/lib/form/public-subform.tsx
@@ -9,7 +9,7 @@ declare module "react" {
     interface IntrinsicElements {
       "goa-pf-subform": WCProps &
         React.HTMLAttributes<HTMLElement> & {
-          children?: ReactNode;
+          children?: React.ReactNode;
         };
     }
   }
diff --git a/libs/web-components/src/components/checkbox/Checkbox.svelte b/libs/web-components/src/components/checkbox/Checkbox.svelte
index 6bcd13387..112c0c858 100644
--- a/libs/web-components/src/components/checkbox/Checkbox.svelte
+++ b/libs/web-components/src/components/checkbox/Checkbox.svelte
@@ -1,9 +1,11 @@
-<svelte:options customElement={{
-  tag: "goa-checkbox",
-  props: {
-    checked: { type: "String", reflect: true }
-  }
-}} />
+<svelte:options
+  customElement={{
+    tag: "goa-checkbox",
+    props: {
+      checked: { type: "String", reflect: true },
+    },
+  }}
+/>
 
 <script lang="ts">
   import { onMount } from "svelte";
@@ -104,8 +106,8 @@
     // collect bindable goa fields to allow for later resetting
     _revealSlotEl.addEventListener("goa:bind", (e: Event) => {
       const el = (e as CustomEvent).detail;
-      _revealSlotEls.push(el)
-    })
+      _revealSlotEls.push(el);
+    });
 
     bindReset(_rootEl);
   });
@@ -114,7 +116,7 @@
     el.addEventListener("goa:reset", () => {
       if (checked === "true") {
         checked = "false";
-        dispatch(el, "_change", { name, value, checked }, { bubbles: true })  ;
+        dispatch(el, "_change", { name, value, checked }, { bubbles: true });
       }
     });
     dispatch(el, "goa:bind", el, { bubbles: true });
@@ -122,7 +124,7 @@
 
   function resetChildFormFields() {
     for (const el of _revealSlotEls) {
-      dispatch(el, "goa:reset")
+      dispatch(el, "goa:reset");
     }
   }
 
@@ -150,7 +152,12 @@
     }
 
     // Announce the reveal content change to screen readers if checkbox is checked and reveal content exists
-    if ($$slots.reveal && newCheckStatus && _revealSlotEl && revealarialabel !== "") {
+    if (
+      $$slots.reveal &&
+      newCheckStatus &&
+      _revealSlotEl &&
+      revealarialabel !== ""
+    ) {
       announceToScreenReader(revealarialabel);
     }
   }
@@ -167,6 +174,19 @@
       // when we click a button/accordion.. inside the reveal slot, it will uncheck the parent checkbox. stopPropagation (_click) will fix it
       e.stopPropagation();
     });
+
+    _revealSlotEl?.addEventListener("_change", (e: Event) => {
+      console.log("in the _change listener for the checbox");
+      const eventDetail = (e as CustomEvent).detail;
+      // when we check/change a checkbox/input... inside the reveal slot, it will uncheck the parent checkbox whenever _change is fired. stopPropagation (_change) will fix it
+      e.stopPropagation();
+
+      // If this is a form field value change (public form)
+      // relay it so the Fieldset initialize the reveal slot form field to public form state
+      if (eventDetail?.name && typeof eventDetail.value !== "undefined") {
+        dispatch(_rootEl, "_revealChange", eventDetail, { bubbles: true });
+      }
+    });
   }
 </script>
 
diff --git a/libs/web-components/src/components/date-picker/DatePicker.svelte b/libs/web-components/src/components/date-picker/DatePicker.svelte
index c8b06b5d7..f544eca7b 100644
--- a/libs/web-components/src/components/date-picker/DatePicker.svelte
+++ b/libs/web-components/src/components/date-picker/DatePicker.svelte
@@ -114,11 +114,16 @@
   function dispatchValue() {
     value = _date.toString();
 
-    dispatch<OnChangeDetail>(_rootEl, "_change", {
-      name,
-      value: _date.date,
-      valueStr: value,
-    }, { bubbles: true });
+    dispatch<OnChangeDetail>(
+      _rootEl,
+      "_change",
+      {
+        name,
+        value: _date.date,
+        valueStr: value,
+      },
+      { bubbles: true },
+    );
   }
 
   function hideCalendar() {
@@ -291,8 +296,8 @@
     <goa-block direction="row">
       <goa-form-item helptext="Month" {version}>
         <goa-dropdown
-          native="true"
           name="month"
+          native="true"
           testid="input-month"
           on:_change={onInputChange}
           {error}

From 5e03cc3b25cc409509f8e7ddba9f8ad2daf0301a Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Tue, 10 Feb 2026 13:20:31 -0700
Subject: [PATCH 07/13] temp

---
 .../specs/public-form.browser.spec.tsx        | 17 ++++----
 .../src/components/button/Button.svelte       | 15 ++++---
 .../src/components/input/Input.svelte         |  1 +
 .../components/radio-group/RadioGroup.svelte  | 40 +++++++++----------
 .../components/radio-item/RadioItem.svelte    |  4 +-
 5 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/libs/react-components/specs/public-form.browser.spec.tsx b/libs/react-components/specs/public-form.browser.spec.tsx
index 028e25752..ae845c34c 100644
--- a/libs/react-components/specs/public-form.browser.spec.tsx
+++ b/libs/react-components/specs/public-form.browser.spec.tsx
@@ -259,7 +259,7 @@ function PublicFormTestComponent() {
 }
 
 describe("PublicForm Browser Tests", () => {
-  it.only("initializes the form", async () => {
+  it("initializes the form", async () => {
     const result = render(<PublicFormTestComponent />);
 
     await vi.waitFor(() => {
@@ -272,16 +272,17 @@ describe("PublicForm Browser Tests", () => {
       () => {
         // on first page, so it should be visible
         const recipient = result.container.querySelector(
-          'input[type="radio"][name="role"][value="Recipient"]'
+          "goa-radio-group[name=role]"
         );
 
         // on later page, so should not be visible yet
         const sin = result.container.querySelector(
-          'input[name=sin]'
+          "goa-input[name=sin]"
         );
+
         expect(recipient).toBeTruthy();
         expect(recipient).toBeVisible();
-        console.log(result.container.innerHTML)
+
         expect(sin).toBeTruthy();
         expect(sin).not.toBeVisible();
       },
@@ -289,7 +290,7 @@ describe("PublicForm Browser Tests", () => {
     );
   });
 
-  it("can select a radio button and continue to next page", async () => {
+  it.only("can select a radio button and continue to next page", async () => {
     const result = render(<PublicFormTestComponent />);
 
     await vi.waitFor(() => {
@@ -301,7 +302,7 @@ describe("PublicForm Browser Tests", () => {
     await vi.waitFor(
       () => {
         const recipientRadio = result.container.querySelector(
-          'goa-radio-item[value="Recipient"]'
+          "goa-radio-item[value=Recipient]"
         );
         expect(recipientRadio).toBeTruthy();
       },
@@ -310,7 +311,7 @@ describe("PublicForm Browser Tests", () => {
 
     // Select the Recipient radio button
     const recipientRadio = result.container.querySelector(
-      'goa-radio-item[value="Recipient"]'
+      "goa-radio-item[value=Recipient]"
     ) as HTMLElement;
     await userEvent.click(recipientRadio);
 
@@ -318,7 +319,7 @@ describe("PublicForm Browser Tests", () => {
     await vi.waitFor(
       () => {
         const continueButton = result.container.querySelector(
-          'goa-button[type="primary"]'
+          "goa-button[type=primary]"
         ) as HTMLElement;
         expect(continueButton).toBeTruthy();
       },
diff --git a/libs/web-components/src/components/button/Button.svelte b/libs/web-components/src/components/button/Button.svelte
index a7f655d3e..7b2f64983 100644
--- a/libs/web-components/src/components/button/Button.svelte
+++ b/libs/web-components/src/components/button/Button.svelte
@@ -2,6 +2,7 @@
   customElement={{
     tag: "goa-button",
     props: {
+      type: { reflect: true },
       actionArg: { type: "String", attribute: "action-arg" },
       actionArgs: { type: "Object", attribute: "action-args" },
     },
@@ -155,7 +156,7 @@
     {#if leadingicon}
       <goa-icon
         id="leading-icon"
-        size={ version === "2" && size === "normal" ? "4" : "3" }
+        size={version === "2" && size === "normal" ? "4" : "3"}
         type={leadingicon}
         inverted={isButtonDark}
       />
@@ -166,7 +167,7 @@
     {#if trailingicon}
       <goa-icon
         id="trailing-icon"
-        size={ version === "2" && size === "normal" ? "4" : "3" }
+        size={version === "2" && size === "normal" ? "4" : "3"}
         type={trailingicon}
         inverted={isButtonDark}
       />
@@ -235,7 +236,10 @@
   button.compact {
     height: var(--goa-button-height-compact);
     font: var(--goa-button-text-compact);
-    padding: var(--goa-button-padding-compact, var(--goa-button-padding-lr-compact));
+    padding: var(
+      --goa-button-padding-compact,
+      var(--goa-button-padding-lr-compact)
+    );
     gap: var(--goa-button-compact-gap);
   }
 
@@ -419,7 +423,7 @@
   }
 
   button.v2.primary:disabled {
-    background-color: var(--goa-button-primary-disabled-color-bg)
+    background-color: var(--goa-button-primary-disabled-color-bg);
   }
 
   button.v2.secondary.destructive {
@@ -443,7 +447,6 @@
     border: var(--goa-button-tertiary-inverse-border);
   }
 
-
   button.v2.tertiary.inverse:hover {
     border: var(--goa-button-tertiary-inverse-hover-border);
   }
@@ -453,7 +456,7 @@
   }
 
   button.v2.tertiary.destructive:hover {
-    border: var(--goa-button-tertiary-destructive-hover-border)
+    border: var(--goa-button-tertiary-destructive-hover-border);
   }
 
   button.v2.tertiary:disabled {
diff --git a/libs/web-components/src/components/input/Input.svelte b/libs/web-components/src/components/input/Input.svelte
index 276587be7..174c10f3b 100644
--- a/libs/web-components/src/components/input/Input.svelte
+++ b/libs/web-components/src/components/input/Input.svelte
@@ -2,6 +2,7 @@
   customElement={{
     tag: "goa-input",
     props: {
+      name: { attribute: "name", type: "String", reflect: true },
       value: { attribute: "value", type: "String", reflect: true },
     },
   }}
diff --git a/libs/web-components/src/components/radio-group/RadioGroup.svelte b/libs/web-components/src/components/radio-group/RadioGroup.svelte
index e0e5563c1..2fa894e02 100644
--- a/libs/web-components/src/components/radio-group/RadioGroup.svelte
+++ b/libs/web-components/src/components/radio-group/RadioGroup.svelte
@@ -1,17 +1,16 @@
-<svelte:options customElement={{
-  tag: "goa-radio-group",
-  props: {
-    value: { reflect: true }
-  }
-}} />
+<svelte:options
+  customElement={{
+    tag: "goa-radio-group",
+    props: {
+      name: { reflect: true },
+      value: { reflect: true },
+    },
+  }}
+/>
 
 <script lang="ts">
   import type { Spacing } from "../../common/styling";
-  import {
-    typeValidator,
-    toBoolean,
-    dispatch,
-  } from "../../common/utils";
+  import { typeValidator, toBoolean, dispatch } from "../../common/utils";
   import { calculateMargin } from "../../common/styling";
   import { onMount } from "svelte";
   import {
@@ -20,10 +19,10 @@
   } from "../radio-item/RadioItem.svelte";
 
   // Validators
-  const [Orientations, validateOrientation] = typeValidator("Radio group orientation", [
-    "vertical",
-    "horizontal",
-  ]);
+  const [Orientations, validateOrientation] = typeValidator(
+    "Radio group orientation",
+    ["vertical", "horizontal"],
+  );
   const [Version, validateVersion] = typeValidator("Version", ["1", "2"]);
   const [Size, validateSize] = typeValidator("Size", ["default", "compact"]);
 
@@ -111,14 +110,14 @@
       onChange(detail.value, detail.label);
     });
 
-     bindReset(_rootEl);
+    bindReset(_rootEl);
   });
 
   function bindReset(el: HTMLElement) {
     el.addEventListener("goa:reset", () => {
       if (value) {
         value = "";
-        dispatch(el, "_change", { name, value }, { bubbles: true })  ;
+        dispatch(el, "_change", { name, value }, { bubbles: true });
       }
     });
     dispatch(el, "goa:bind", el, { bubbles: true });
@@ -216,8 +215,7 @@
 </div>
 
 <style>
-
-:host {
+  :host {
     font-family: var(--goa-font-family-sans);
   }
 
@@ -234,8 +232,8 @@
 
   .goa-radio-group--vertical {
     display: flex;
-    flex-direction: column;  /* Vertical stacking */
-    gap: var(--goa-radio-group-gap-vertical);  /* Adds spacing */
+    flex-direction: column; /* Vertical stacking */
+    gap: var(--goa-radio-group-gap-vertical); /* Adds spacing */
     width: 100%;
   }
 
diff --git a/libs/web-components/src/components/radio-item/RadioItem.svelte b/libs/web-components/src/components/radio-item/RadioItem.svelte
index 48798c480..cc8b441af 100644
--- a/libs/web-components/src/components/radio-item/RadioItem.svelte
+++ b/libs/web-components/src/components/radio-item/RadioItem.svelte
@@ -2,6 +2,7 @@
   customElement={{
     tag: "goa-radio-item",
     props: {
+      name: { reflect: true },
       value: { reflect: true },
       description: { reflect: true },
       checked: { reflect: true },
@@ -104,7 +105,6 @@
 
   // Functions
 
-
   /**
    * Obtain list of all the form field element within the reveal slot
    */
@@ -214,7 +214,7 @@
   function resetChildFormFields() {
     for (const el of _revealSlotEls) {
       // send reset message ot child form fields
-      dispatch(el, "goa:reset")
+      dispatch(el, "goa:reset");
     }
   }
 </script>

From 30f7aaa0dacae240904906d059c45b164bd67a4d Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Thu, 12 Feb 2026 07:42:51 -0700
Subject: [PATCH 08/13] public form tests

---
 .../react/src/routes/features/public-form.tsx |   2 +-
 .../components/form/public-form-page.spec.ts  | 123 ------
 .../lib/components/form/public-form-page.ts   |  58 ---
 .../form/public-form-summary.spec.ts          |  50 ---
 .../components/form/public-form-summary.ts    |  17 -
 .../lib/components/form/public-form.spec.ts   | 109 ------
 .../src/lib/components/form/public-form.ts    |  42 ---
 .../components/form/public-subform-index.ts   |  31 --
 .../src/lib/components/form/public-subform.ts |  39 --
 .../src/lib/components/form/task-list.spec.ts | 111 ------
 .../src/lib/components/form/task-list.ts      |  22 --
 .../src/lib/components/form/task.ts           |  18 -
 .../src/lib/components/index.ts               |   7 -
 libs/common/src/lib/common.ts                 |  63 +---
 .../specs/public-form.browser.spec.tsx        |  59 +--
 libs/react-components/src/index.ts            |   1 -
 .../src/lib/form/fieldset.spec.tsx            |  95 -----
 .../src/lib/form/public-form-page.spec.tsx    | 123 ------
 .../src/lib/form/public-form-summary.spec.tsx |  37 --
 .../src/lib/form/public-form.spec.tsx         | 149 --------
 .../src/lib/form/public-subform-index.tsx     |  49 ---
 .../src/lib/form/task-list.spec.tsx           | 226 -----------
 .../src/lib/form/task.spec.tsx                | 237 ------------
 package-lock.json                             | 352 ++++--------------
 package.json                                  |  10 +-
 25 files changed, 94 insertions(+), 1936 deletions(-)
 delete mode 100644 libs/angular-components/src/lib/components/form/public-form-page.spec.ts
 delete mode 100644 libs/angular-components/src/lib/components/form/public-form-page.ts
 delete mode 100644 libs/angular-components/src/lib/components/form/public-form-summary.spec.ts
 delete mode 100644 libs/angular-components/src/lib/components/form/public-form-summary.ts
 delete mode 100644 libs/angular-components/src/lib/components/form/public-form.spec.ts
 delete mode 100644 libs/angular-components/src/lib/components/form/public-form.ts
 delete mode 100644 libs/angular-components/src/lib/components/form/public-subform-index.ts
 delete mode 100644 libs/angular-components/src/lib/components/form/public-subform.ts
 delete mode 100644 libs/angular-components/src/lib/components/form/task-list.spec.ts
 delete mode 100644 libs/angular-components/src/lib/components/form/task-list.ts
 delete mode 100644 libs/angular-components/src/lib/components/form/task.ts
 delete mode 100644 libs/react-components/src/lib/form/fieldset.spec.tsx
 delete mode 100644 libs/react-components/src/lib/form/public-form-page.spec.tsx
 delete mode 100644 libs/react-components/src/lib/form/public-form-summary.spec.tsx
 delete mode 100644 libs/react-components/src/lib/form/public-form.spec.tsx
 delete mode 100644 libs/react-components/src/lib/form/public-subform-index.tsx
 delete mode 100644 libs/react-components/src/lib/form/task-list.spec.tsx
 delete mode 100644 libs/react-components/src/lib/form/task.spec.tsx

diff --git a/apps/prs/react/src/routes/features/public-form.tsx b/apps/prs/react/src/routes/features/public-form.tsx
index b0212b1c4..4185042da 100644
--- a/apps/prs/react/src/routes/features/public-form.tsx
+++ b/apps/prs/react/src/routes/features/public-form.tsx
@@ -1,5 +1,5 @@
 import { GoabFormItem, GoabInput, GoabPublicForm, GoabPublicFormPage, GoabPublicFormSummary, GoabRadioGroup, GoabRadioItem } from "@abgov/react-components";
-import { LengthValidator, NumericValidator, PFState, RequiredValidator, SINValidator } from "@abgov/ui-components-common";
+import { LengthValidator, NumericValidator, PFState, PFOutline, PFPage, RequiredValidator, SINValidator } from "@abgov/ui-components-common";
 import React, { useState } from "react";
 
 const outline: PFOutline = {
diff --git a/libs/angular-components/src/lib/components/form/public-form-page.spec.ts b/libs/angular-components/src/lib/components/form/public-form-page.spec.ts
deleted file mode 100644
index 805f87e8d..000000000
--- a/libs/angular-components/src/lib/components/form/public-form-page.spec.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { GoabPublicFormPage } from "./public-form-page";
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
-import { By } from "@angular/platform-browser";
-import {
-  GoabPublicFormPageStep,
-  GoabPublicFormPageButtonVisibility,
-  Spacing,
-} from "@abgov/ui-components-common";
-
-@Component({
-  standalone: true,
-  imports: [GoabPublicFormPage],
-  template: `
-    <goab-public-form-page
-      [id]="id"
-      [heading]="heading"
-      [subHeading]="subHeading"
-      [summaryHeading]="summaryHeading"
-      [sectionTitle]="sectionTitle"
-      [backUrl]="backUrl"
-      [type]="type"
-      [buttonText]="buttonText"
-      [buttonVisibility]="buttonVisibility"
-      [mt]="mt"
-      [mr]="mr"
-      [mb]="mb"
-      [ml]="ml"
-      (onContinue)="handleContinue($event)"
-    >
-      <div data-testid="content">Test content</div>
-    </goab-public-form-page>
-  `,
-})
-class TestPublicFormPageComponent {
-  id = "test-page";
-  heading = "Test Heading";
-  subHeading = "Test Subheading";
-  summaryHeading = "Test Summary";
-  sectionTitle = "Test Section";
-  backUrl = "/back";
-  type: GoabPublicFormPageStep = "step";
-  buttonText = "Continue";
-  buttonVisibility: GoabPublicFormPageButtonVisibility = "visible";
-  mt = "s" as Spacing;
-  mr = "m" as Spacing;
-  mb = "l" as Spacing;
-  ml = "xl" as Spacing;
-
-  handleContinue(event: Event): void {/** do nothing **/}
-}
-
-describe("GoabPublicFormPage", () => {
-  let fixture: ComponentFixture<TestPublicFormPageComponent>;
-  let component: TestPublicFormPageComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [GoabPublicFormPage, TestPublicFormPageComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TestPublicFormPageComponent);
-    component = fixture.componentInstance;
-  });
-
-  it("should render with properties", () => {
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-form-page")).nativeElement;
-
-    expect(el?.getAttribute("heading")).toBe(component.heading);
-    expect(el?.getAttribute("sub-heading")).toBe(component.subHeading);
-    expect(el?.getAttribute("summary-heading")).toBe(component.summaryHeading);
-    expect(el?.getAttribute("section-title")).toBe(component.sectionTitle);
-    expect(el?.getAttribute("back-url")).toBe(component.backUrl);
-    expect(el?.getAttribute("type")).toBe(component.type);
-    expect(el?.getAttribute("button-text")).toBe(component.buttonText);
-    expect(el?.getAttribute("button-visibility")).toBe(component.buttonVisibility);
-    expect(el?.getAttribute("mt")).toBe(component.mt);
-    expect(el?.getAttribute("mr")).toBe(component.mr);
-    expect(el?.getAttribute("mb")).toBe(component.mb);
-    expect(el?.getAttribute("ml")).toBe(component.ml);
-
-    // Content is rendered
-    expect(el.querySelector("[data-testid='content']")).toBeTruthy();
-  });
-
-  it("should emit onContinue event", () => {
-    fixture.detectChanges();
-    const spy = jest.spyOn(component, "handleContinue");
-
-    const el = fixture.debugElement.query(By.css("goa-public-form-page")).nativeElement;
-    const detail = {
-      el: document.createElement("form"),
-      state: {
-        "field1": {
-          name: "field1",
-          label: "Field 1",
-          value: "test",
-          order: 1
-        }
-      },
-      cancelled: false
-    };
-
-    el.dispatchEvent(new CustomEvent("_continue", { detail }));
-    expect(spy).toHaveBeenCalledWith(expect.any(CustomEvent));
-  });
-
-  it("should have default values", () => {
-    const page = new GoabPublicFormPage();
-    expect(page.id).toBe("");
-    expect(page.heading).toBe("");
-    expect(page.subHeading).toBe("");
-    expect(page.summaryHeading).toBe("");
-    expect(page.sectionTitle).toBe("");
-    expect(page.backUrl).toBe("");
-    expect(page.type).toBe("step");
-    expect(page.buttonText).toBe("");
-    expect(page.buttonVisibility).toBe("visible");
-  });
-});
diff --git a/libs/angular-components/src/lib/components/form/public-form-page.ts b/libs/angular-components/src/lib/components/form/public-form-page.ts
deleted file mode 100644
index bc3b6623f..000000000
--- a/libs/angular-components/src/lib/components/form/public-form-page.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import {
-  Component,
-  CUSTOM_ELEMENTS_SCHEMA,
-  EventEmitter,
-  Input,
-  Output,
-} from "@angular/core";
-import { GoabBaseComponent } from "../base.component";
-import {
-  GoabPublicFormPageButtonVisibility,
-  GoabPublicFormPageStep,
-} from "@abgov/ui-components-common";
-
-@Component({
- selector: "goab-public-form-page",
- standalone: true,
- template: `
-   <goa-public-form-page
-     [id]="id"
-     [attr.heading]="heading"
-     [attr.sub-heading]="subHeading"
-     [attr.section-title]="sectionTitle"
-     [attr.back-url]="backUrl"
-     [attr.type]="type"
-     [attr.button-text]="buttonText"
-     [attr.button-visibility]="buttonVisibility"
-     [attr.summary-heading]="summaryHeading"
-     [attr.mt]="mt"
-     [attr.mr]="mr"
-     [attr.mb]="mb"
-     [attr.ml]="ml"
-     (_continue)="_onContinue($event)"
-   >
-     <ng-content></ng-content>
-   </goa-public-form-page>
- `,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GoabPublicFormPage extends GoabBaseComponent {
-  @Input() id = "";
-  @Input() heading = "";
-  @Input() subHeading = "";
-  @Input() summaryHeading = "";
-  @Input() sectionTitle = "";
-  @Input() backUrl = "";
-  @Input() type: GoabPublicFormPageStep = "step";
-  @Input() buttonText = "";
-  @Input() buttonVisibility : GoabPublicFormPageButtonVisibility = "visible";
-
-  /**
-   * triggers when the form page continues to the next step
-   */
-  @Output() onContinue = new EventEmitter<Event>();
-
-  _onContinue(event: Event) {
-    this.onContinue.emit(event);
-  }
-}
diff --git a/libs/angular-components/src/lib/components/form/public-form-summary.spec.ts b/libs/angular-components/src/lib/components/form/public-form-summary.spec.ts
deleted file mode 100644
index 4518b473e..000000000
--- a/libs/angular-components/src/lib/components/form/public-form-summary.spec.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { GoabPublicFormSummary } from "./public-form-summary";
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
-import { By } from "@angular/platform-browser";
-
-@Component({
-  standalone: true,
-  imports: [GoabPublicFormSummary],
-  template: `
-    <goab-public-form-summary
-      [heading]="heading"
-    >
-      <div data-testid="content">Test content</div>
-    </goab-public-form-summary>
-  `,
-})
-class TestPublicFormSummaryComponent {
-  heading = "Test Summary Heading";
-}
-
-describe("GoabPublicFormSummary", () => {
-  let fixture: ComponentFixture<TestPublicFormSummaryComponent>;
-  let component: TestPublicFormSummaryComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [GoabPublicFormSummary, TestPublicFormSummaryComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TestPublicFormSummaryComponent);
-    component = fixture.componentInstance;
-  });
-
-  it("should render with properties", () => {
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-form-summary")).nativeElement;
-
-    expect(el?.getAttribute("heading")).toBe(component.heading);
-
-    // Content is rendered
-    expect(el?.querySelector("[data-testid='content']")).toBeTruthy();
-  });
-
-  it("should have default values", () => {
-    const summary = new GoabPublicFormSummary();
-    expect(summary.heading).toBeUndefined();
-  });
-});
diff --git a/libs/angular-components/src/lib/components/form/public-form-summary.ts b/libs/angular-components/src/lib/components/form/public-form-summary.ts
deleted file mode 100644
index dfc281b27..000000000
--- a/libs/angular-components/src/lib/components/form/public-form-summary.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from "@angular/core";
-
-@Component({
-  selector: "goab-public-form-summary",
-  standalone: true,
-  template: `
-  <goa-public-form-summary
-    [attr.heading]="heading"
-  >
-    <ng-content />
-  </goa-public-form-summary>
-  `,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GoabPublicFormSummary {
-  @Input() heading?: string;
-}
diff --git a/libs/angular-components/src/lib/components/form/public-form.spec.ts b/libs/angular-components/src/lib/components/form/public-form.spec.ts
deleted file mode 100644
index ce4696f37..000000000
--- a/libs/angular-components/src/lib/components/form/public-form.spec.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { GoabPublicForm } from "./public-form";
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
-import { By } from "@angular/platform-browser";
-import { GoabFormState, GoabPublicFormStatus } from "@abgov/ui-components-common";
-
-@Component({
-  standalone: true,
-  imports: [GoabPublicForm],
-  template: `
-    <goab-public-form
-      [status]="status"
-      [name]="name"
-      (onInit)="handleInit($event)"
-      (onComplete)="handleComplete($event)"
-      (onStateChange)="handleStateChange($event)"
-    >
-      <div data-testid="content">Test content</div>
-    </goab-public-form>
-  `,
-})
-class TestPublicFormComponent {
-  status: GoabPublicFormStatus = "complete";
-  name = "test-form";
-
-  handleInit(event: Event): void {/** do nothing **/}
-  handleComplete(event: GoabFormState): void {/** do nothing **/}
-  handleStateChange(event: GoabFormState): void {/** do nothing **/}
-}
-
-describe("GoabPublicForm", () => {
-  let fixture: ComponentFixture<TestPublicFormComponent>;
-  let component: TestPublicFormComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [TestPublicFormComponent, GoabPublicForm],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TestPublicFormComponent);
-    component = fixture.componentInstance;
-  });
-
-  it("should render with properties", () => {
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-form")).nativeElement;
-
-    expect(el?.getAttribute("status")).toBe(component.status);
-    expect(el?.getAttribute("name")).toBe(component.name);
-
-    // Content is rendered
-    expect(el?.querySelector("[data-testid='content']")).toBeTruthy();
-  });
-
-  it("should emit onInit event", () => {
-    fixture.detectChanges();
-    const spy = jest.spyOn(component, "handleInit");
-
-    const el = fixture.debugElement.query(By.css("goa-public-form")).nativeElement;
-    const detail = {
-      el: document.createElement("form")
-    };
-
-    el.dispatchEvent(new CustomEvent("_init", { detail }));
-    expect(spy).toHaveBeenCalledWith(expect.any(CustomEvent));
-  });
-
-  it("should emit onComplete event", () => {
-    fixture.detectChanges();
-    const spy = jest.spyOn(component, "handleComplete");
-
-    const el = fixture.debugElement.query(By.css("goa-public-form")).nativeElement;
-    const detail: GoabFormState = {
-      uuid: "test-uuid",
-      form: {},
-      history: [],
-      editting: "",
-      status: "complete"
-    };
-
-    el.dispatchEvent(new CustomEvent("_complete", { detail }));
-    expect(spy).toHaveBeenCalledWith(detail);
-  });
-
-  it("should emit onStateChange event", () => {
-    fixture.detectChanges();
-    const spy = jest.spyOn(component, "handleStateChange");
-
-    const el = fixture.debugElement.query(By.css("goa-public-form")).nativeElement;
-    const formState: GoabFormState = {
-      uuid: "test-uuid",
-      form: {},
-      history: [],
-      editting: "",
-      status: "complete"
-    };
-    const detail = { data: formState };
-
-    el.dispatchEvent(new CustomEvent("_stateChange", { detail }));
-    expect(spy).toHaveBeenCalledWith(formState);
-  });
-
-  it("should set default status to complete", () => {
-    const publicForm = new GoabPublicForm();
-    expect(publicForm.status).toBe("complete");
-  });
-});
diff --git a/libs/angular-components/src/lib/components/form/public-form.ts b/libs/angular-components/src/lib/components/form/public-form.ts
deleted file mode 100644
index f07e3127a..000000000
--- a/libs/angular-components/src/lib/components/form/public-form.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Input, Output } from "@angular/core";
-import { GoabFormState, GoabPublicFormStatus } from "@abgov/ui-components-common";
-
-@Component({
-  selector: "goab-public-form",
-  standalone: true,
-  template: `
-  <goa-public-form
-    [attr.status]="status"
-    [attr.name]="name"
-    (_init)="_onInit($event)"
-    (_complete)="_onComplete($event)"
-    (_stateChange)="_onStateChange($event)"
-  >
-    <ng-content />
-  </goa-public-form>
-  `,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GoabPublicForm {
-  @Input() status?: GoabPublicFormStatus = "complete";
-  @Input() name?: string;
-
-  @Output() onInit = new EventEmitter<Event>();
-  @Output() onComplete = new EventEmitter<GoabFormState>();
-  @Output() onStateChange = new EventEmitter<GoabFormState>();
-
-
-  _onInit(e: Event) {
-    this.onInit.emit(e);
-  }
-
-  _onComplete(e: Event) {
-    const detail = (e as CustomEvent).detail;
-    this.onComplete.emit(detail);
-  }
-
-  _onStateChange(e: Event) {
-    const detail = (e as CustomEvent).detail;
-    this.onStateChange.emit(detail.data);
-  }
-}
diff --git a/libs/angular-components/src/lib/components/form/public-subform-index.ts b/libs/angular-components/src/lib/components/form/public-subform-index.ts
deleted file mode 100644
index fc973427e..000000000
--- a/libs/angular-components/src/lib/components/form/public-subform-index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from "@angular/core";
-import { GoabBaseComponent } from "../base.component";
-
-@Component({
-  selector: "goab-public-subform-index",
-  standalone: true,
-  host: {
-    'slot': 'subform-index'
-  },
-  template: `
-  <goa-public-subform-index
-    [attr.heading]="heading"
-    [attr.section-title]="sectionTitle"
-    [attr.action-button-text]="actionButtonText"
-    [attr.button-visibility]="buttonVisibility"
-    [attr.mt]="mt"
-    [attr.mr]="mr"
-    [attr.mb]="mb"
-    [attr.ml]="ml"
-  >
-    <ng-content />
-  </goa-public-subform-index>
-  `,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
-export class GoabPublicSubformIndex extends GoabBaseComponent {
-  @Input() heading?: string = "";
-  @Input() sectionTitle?: string = "";
-  @Input() actionButtonText?: string = "";
-  @Input() buttonVisibility?: "visible" | "hidden" = "hidden";
-}
diff --git a/libs/angular-components/src/lib/components/form/public-subform.ts b/libs/angular-components/src/lib/components/form/public-subform.ts
deleted file mode 100644
index db51ceaba..000000000
--- a/libs/angular-components/src/lib/components/form/public-subform.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Input, Output } from "@angular/core";
-import { GoabBaseComponent } from "../base.component";
-
-@Component({
-  selector: "goab-public-subform",
-  standalone: true,
-  template: `
-  <goa-public-subform
-    [attr.id]="id"
-    [attr.name]="name"
-    [attr.continue-msg]="continueMsg"
-    [attr.mt]="mt"
-    [attr.mr]="mr"
-    [attr.mb]="mb"
-    [attr.ml]="ml"
-    (_init)="_onInit($event)"
-    (_stateChange)="_onStateChange($event)"
-  >
-    <ng-content />
-  </goa-public-subform>
-  `,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GoabPublicSubform extends GoabBaseComponent {
-  @Input() id?: string = "";
-  @Input() name?: string = "";
-  @Input() continueMsg?: string = "";
-
-  @Output() onInit = new EventEmitter<Event>();
-  @Output() onStateChange = new EventEmitter<Event>();
-
-  _onInit(e: Event) {
-    this.onInit.emit(e);
-  }
-
-  _onStateChange(e: Event) {
-    this.onStateChange.emit(e);
-  }
-}
diff --git a/libs/angular-components/src/lib/components/form/task-list.spec.ts b/libs/angular-components/src/lib/components/form/task-list.spec.ts
deleted file mode 100644
index d2737519e..000000000
--- a/libs/angular-components/src/lib/components/form/task-list.spec.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { GoabPublicFormTaskList } from "./task-list";
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
-import { By } from "@angular/platform-browser";
-
-@Component({
-  standalone: true,
-  imports: [GoabPublicFormTaskList],
-  template: `
-    <goab-public-form-task-list
-      [heading]="heading"
-    >
-      <div data-testid="task-item-1">Task 1</div>
-      <div data-testid="task-item-2">Task 2</div>
-    </goab-public-form-task-list>
-  `,
-})
-class TestPublicFormTaskListComponent {
-  heading = "Required Tasks";
-}
-
-describe("GoabPublicFormTaskList", () => {
-  let fixture: ComponentFixture<TestPublicFormTaskListComponent>;
-  let component: TestPublicFormTaskListComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [TestPublicFormTaskListComponent, GoabPublicFormTaskList],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TestPublicFormTaskListComponent);
-    component = fixture.componentInstance;
-  });
-
-  it("should render with heading property", () => {
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-form-task-list")).nativeElement;
-
-    expect(el?.getAttribute("heading")).toBe(component.heading);
-
-    // Content is rendered
-    expect(el?.querySelector("[data-testid='task-item-1']")).toBeTruthy();
-    expect(el?.querySelector("[data-testid='task-item-2']")).toBeTruthy();
-  });
-
-  it("should have undefined heading by default", () => {
-    const taskList = new GoabPublicFormTaskList();
-    expect(taskList.heading).toBeUndefined();
-  });
-
-  it("should handle heading changes", () => {
-    // Initial heading
-    fixture.detectChanges();
-
-    let el = fixture.debugElement.query(By.css("goa-public-form-task-list")).nativeElement;
-    expect(el?.getAttribute("heading")).toBe("Required Tasks");
-
-    // Change heading
-    component.heading = "Updated Task List";
-    fixture.detectChanges();
-
-    el = fixture.debugElement.query(By.css("goa-public-form-task-list")).nativeElement;
-    expect(el?.getAttribute("heading")).toBe("Updated Task List");
-
-    // Empty heading
-    component.heading = "";
-    fixture.detectChanges();
-
-    el = fixture.debugElement.query(By.css("goa-public-form-task-list")).nativeElement;
-    expect(el?.getAttribute("heading")).toBe("");
-  });
-
-  it("should render without heading attribute when undefined", () => {
-    component.heading = undefined as any;
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-form-task-list")).nativeElement;
-    expect(el?.hasAttribute("heading")).toBeFalsy();
-  });
-
-  it("should handle multiple nested elements", () => {
-    fixture.detectChanges();
-
-    const el = fixture.debugElement.query(By.css("goa-public-form-task-list")).nativeElement;
-    const taskItems = el?.querySelectorAll("[data-testid^='task-item']");
-
-    expect(taskItems?.length).toBe(2);
-    expect(taskItems?.[0]?.textContent).toContain("Task 1");
-    expect(taskItems?.[1]?.textContent).toContain("Task 2");
-  });
-
-  it("should handle special characters in heading", () => {
-    const specialHeadings = [
-      "Tasks & Requirements",
-      "Tasks > 5",
-      "Tasks < 10",
-      "Tasks with \"quotes\"",
-      "Tasks with 'apostrophes'",
-    ];
-
-    specialHeadings.forEach(heading => {
-      component.heading = heading;
-      fixture.detectChanges();
-
-      const el = fixture.debugElement.query(By.css("goa-public-form-task-list")).nativeElement;
-      expect(el?.getAttribute("heading")).toBe(heading);
-    });
-  });
-});
diff --git a/libs/angular-components/src/lib/components/form/task-list.ts b/libs/angular-components/src/lib/components/form/task-list.ts
deleted file mode 100644
index e57402ac5..000000000
--- a/libs/angular-components/src/lib/components/form/task-list.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from "@angular/core";
-import { GoabBaseComponent } from "../base.component";
-
-@Component({
-  selector: "goab-public-form-task-list",
-  standalone: true,
-  template: `
-  <goa-public-form-task-list
-    [attr.heading]="heading"
-    [attr.mt]="mt"
-    [attr.mr]="mr"
-    [attr.mb]="mb"
-    [attr.ml]="ml"
-  >
-    <ng-content />
-  </goa-public-form-task-list>
-  `,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GoabPublicFormTaskList extends GoabBaseComponent {
-  @Input() heading?: string;
-}
\ No newline at end of file
diff --git a/libs/angular-components/src/lib/components/form/task.ts b/libs/angular-components/src/lib/components/form/task.ts
deleted file mode 100644
index 7f610db36..000000000
--- a/libs/angular-components/src/lib/components/form/task.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from "@angular/core";
-import { GoabPublicFormTaskStatus } from "@abgov/ui-components-common";
-
-@Component({
-  selector: "goab-public-form-task",
-  standalone: true,
-  template: `
-  <goa-public-form-task
-    [attr.status]="status"
-  >
-    <ng-content />
-  </goa-public-form-task>
-  `,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GoabPublicFormTask {
-  @Input() status?: GoabPublicFormTaskStatus;
-}
\ No newline at end of file
diff --git a/libs/angular-components/src/lib/components/index.ts b/libs/angular-components/src/lib/components/index.ts
index 858e4cb62..b6174fc02 100644
--- a/libs/angular-components/src/lib/components/index.ts
+++ b/libs/angular-components/src/lib/components/index.ts
@@ -30,13 +30,6 @@ export * from "./footer-meta-section/footer-meta-section";
 export * from "./footer-meta-section/footer-meta-section";
 export * from "./footer-nav-section/footer-nav-section";
 export * from "./footer-nav-section/footer-nav-section";
-export * from "./form/public-form";
-export * from "./form/public-form-page";
-export * from "./form/public-form-summary";
-export * from "./form/public-subform";
-export * from "./form/public-subform-index";
-export * from "./form/task";
-export * from "./form/task-list";
 export * from "./form-item/form-item";
 export * from "./form-item/form-item-slot";
 export * from "./form-step/form-step";
diff --git a/libs/common/src/lib/common.ts b/libs/common/src/lib/common.ts
index 014d50c81..80f432808 100644
--- a/libs/common/src/lib/common.ts
+++ b/libs/common/src/lib/common.ts
@@ -1129,69 +1129,8 @@ export type GoabTextBodySize = "body-l" | "body-m" | "body-s" | "body-xs";
 export type GoabTextSize = GoabTextHeadingSize | GoabTextBodySize;
 export type GoabTextColor = "primary" | "secondary";
 
-// Simple Form
-export type GoabFormField = {
-  label: string;
-  value: string;
-};
-
-export type GoabFormStorageType = "none" | "local" | "session";
-export type GoabFormOnMountDetail = {
-  fn: (next: string) => void;
-};
-export type GoabFormOnStateChange = {
-  id: string;
-  state: Record<string, Record<string, GoabFormField>>;
-};
-
-// Common types to use between public form components
-export type GoabFormStatus =
-  | "not-started"
-  | "cannot-start-yet"
-  | "in-progress"
-  | "submitted"
-  | "update-needed"
-  | "complete";
-export type GoabFormState = {
-  uuid: string;
-  form: Record<string, GoabFieldsetSchema>;
-  history: string[];
-  editting: string;
-  lastModified?: Date;
-  status: GoabFormStatus;
-};
-export type GoabFormDispatchOn = "change" | "continue";
-export type GoabFieldsetItemValue = string | number | Date;
-export type GoabFieldsetItemState = {
-  name: string;
-  label: string;
-  value: GoabFieldsetItemValue;
-  order: number;
-  valueLabel?: string;
-};
-
-// Fieldset component
-export type GoabFieldsetData =
-  | { type: "details"; fieldsets: Record<string, GoabFieldsetItemState> }
-  | { type: "list"; items: GoabFormState[] };
-
-export type GoabFieldsetSchema = {
-  heading?: string;
-  data?: GoabFieldsetData;
-};
-
-export interface GoabFieldsetOnContinueDetail {
-  el: HTMLElement;
-  state: Record<string, GoabFieldsetItemState>;
-  cancelled: boolean;
-}
-
-// Public form component
-export type GoabPublicFormStatus = "initializing" | "complete";
-export type GoabPublicFormPageStep = "step" | "summary" | "multistep";
-export type GoabPublicFormPageButtonVisibility = "visible" | "hidden";
-
 // Public form Task
+// TODO: remove this later. It is kept in now as a reminder
 export type GoabPublicFormTaskStatus = "completed" | "not-started" | "cannot-start";
 
 // Drawer
diff --git a/libs/react-components/specs/public-form.browser.spec.tsx b/libs/react-components/specs/public-form.browser.spec.tsx
index ae845c34c..6637a983a 100644
--- a/libs/react-components/specs/public-form.browser.spec.tsx
+++ b/libs/react-components/specs/public-form.browser.spec.tsx
@@ -9,13 +9,16 @@ import {
   GoabInput,
 } from "../src";
 import { expect, describe, it, vi } from "vitest";
-import { userEvent } from "@vitest/browser/context";
+import { userEvent } from "vitest/browser";
 import { useState } from "react";
 import {
   RequiredValidator,
   LengthValidator,
   SINValidator,
   NumericValidator,
+} from "@abgov/ui-components-common";
+
+import type {
   PFState,
   PFOutline,
   PFPage,
@@ -291,56 +294,28 @@ describe("PublicForm Browser Tests", () => {
   });
 
   it.only("can select a radio button and continue to next page", async () => {
-    const result = render(<PublicFormTestComponent />);
+    const { getByText, getByRole } = render(<PublicFormTestComponent />);
 
-    await vi.waitFor(() => {
-      const form = result.container.querySelector("goa-public-form");
-      expect(form).toBeTruthy();
-    });
+    const radios = getByRole("radio");
 
     // Wait for radio items to be present
-    await vi.waitFor(
-      () => {
-        const recipientRadio = result.container.querySelector(
-          "goa-radio-item[value=Recipient]"
-        );
-        expect(recipientRadio).toBeTruthy();
-      },
-      { timeout: 3000 }
-    );
+    await vi.waitFor( () => {
+      expect(radios.length).toBe(2);
+    });
 
     // Select the Recipient radio button
-    const recipientRadio = result.container.querySelector(
-      "goa-radio-item[value=Recipient]"
-    ) as HTMLElement;
-    await userEvent.click(recipientRadio);
+    await userEvent.click(radios.elements()[0]);
+    // await radios.first().click();
 
     // Click continue button
-    await vi.waitFor(
-      () => {
-        const continueButton = result.container.querySelector(
-          "goa-button[type=primary]"
-        ) as HTMLElement;
-        expect(continueButton).toBeTruthy();
-      },
-      { timeout: 1000 }
-    );
-
-    const continueButton = result.container.querySelector(
-      'goa-button[type="primary"]'
-    ) as HTMLElement;
-    await userEvent.click(continueButton);
+    const continueButton = getByRole("button").getByText("Continue");
+    await continueButton.click();
 
     // Should navigate to children page (for Recipient role)
-    await vi.waitFor(
-      () => {
-        const childrenPage = result.container.querySelector(
-          'goa-public-form-page[id="children"]'
-        );
-        expect(childrenPage).toBeTruthy();
-      },
-      { timeout: 2000 }
-    );
+    const nextHeader = getByText("Support order details");
+    await vi.waitFor(() => {
+      expect(nextHeader).toBeTruthy();
+    });
   });
 
   it("validates required fields and shows errors", async () => {
diff --git a/libs/react-components/src/index.ts b/libs/react-components/src/index.ts
index 86ef45e0c..b08a6f59f 100644
--- a/libs/react-components/src/index.ts
+++ b/libs/react-components/src/index.ts
@@ -29,7 +29,6 @@ export * from "./lib/form/public-form-page";
 export * from "./lib/form/public-form-summary";
 export * from "./lib/form/public-form";
 export * from "./lib/form/public-subform";
-export * from "./lib/form/public-subform-index";
 export * from "./lib/form/task";
 export * from "./lib/form/task-list";
 export * from "./lib/form-item/form-item";
diff --git a/libs/react-components/src/lib/form/fieldset.spec.tsx b/libs/react-components/src/lib/form/fieldset.spec.tsx
deleted file mode 100644
index df8faa3ac..000000000
--- a/libs/react-components/src/lib/form/fieldset.spec.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
-import { GoabFieldset } from "./fieldset";
-import { GoabFieldsetOnContinueDetail, GoabFieldsetItemState } from "@abgov/ui-components-common";
-
-describe("GoabFieldset", () => {
-  it("renders with all properties", () => {
-    const { baseElement } = render(
-      <GoabFieldset
-        id="testFieldset"
-        sectionTitle="Test Section"
-        dispatchOn="change"
-      >
-        <div>Test content</div>
-      </GoabFieldset>
-    );
-
-    const el = baseElement.querySelector("goa-fieldset");
-    expect(el?.getAttribute("id")).toBe("testFieldset");
-    expect(el?.getAttribute("section-title")).toBe("Test Section");
-    expect(el?.getAttribute("dispatch-on")).toBe("change");
-    expect(el?.textContent).toBe("Test content");
-  });
-
-  it("handles onContinue event", () => {
-    const handleContinue = vi.fn();
-    const { baseElement } = render(
-      <GoabFieldset onContinue={handleContinue}>
-        <div>Test content</div>
-      </GoabFieldset>
-    );
-
-    const el = baseElement.querySelector("goa-fieldset");
-    const detail: GoabFieldsetOnContinueDetail = {
-      el: el as HTMLElement,
-      state: {
-        field1: {
-          name: "field1",
-          label: "Field 1",
-          value: "test",
-          order: 1
-        }
-      },
-      cancelled: false
-    };
-    const event = new CustomEvent("_continue", { detail });
-    el?.dispatchEvent(event);
-
-    expect(handleContinue).toHaveBeenCalledWith(detail);
-  });
-
-  it("removes event listeners on unmount", () => {
-    const handleContinue = vi.fn();
-    const { baseElement, unmount } = render(
-      <GoabFieldset onContinue={handleContinue}>
-        <div>Test content</div>
-      </GoabFieldset>
-    );
-
-    const el = baseElement.querySelector("goa-fieldset");
-    unmount();
-
-    // After unmount, events should not trigger callbacks
-    const mockData: Record<string, GoabFieldsetItemState> = {
-      field1: {
-        name: "field1",
-        label: "Field 1",
-        value: "test",
-        order: 1
-      }
-    };
-    const continueEvent = new CustomEvent("_continue", {
-      detail: {
-        el: el as HTMLElement,
-        state: mockData,
-        cancelled: false
-      }
-    });
-    el?.dispatchEvent(continueEvent);
-
-    expect(handleContinue).not.toHaveBeenCalled();
-  });
-
-  it("should pass data-grid attributes", () => {
-    const { baseElement } = render(
-      <GoabFieldset
-        data-grid="cell"
-      >
-        <div>Test content</div>
-      </GoabFieldset>
-    );
-    const el = baseElement.querySelector("goa-fieldset");
-    expect(el?.getAttribute("data-grid")).toBe("cell");
-  });
-});
diff --git a/libs/react-components/src/lib/form/public-form-page.spec.tsx b/libs/react-components/src/lib/form/public-form-page.spec.tsx
deleted file mode 100644
index 97463b9b7..000000000
--- a/libs/react-components/src/lib/form/public-form-page.spec.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
-import { GoabPublicFormPage } from "./public-form-page";
-import {
-  GoabFieldsetItemState
-} from "@abgov/ui-components-common";
-
-describe("GoabPublicFormPage", () => {
-  it("renders with all properties", () => {
-    const { baseElement } = render(
-      <GoabPublicFormPage
-        id="testPage"
-        heading="Test Heading"
-        subHeading="Test Subheading"
-        summaryHeading="Test Summary"
-        sectionTitle="Test Section"
-        backUrl="/back"
-        type="step"
-        buttonText="Continue"
-        buttonVisibility="visible"
-        mt="s"
-        mr="m"
-        mb="l"
-        ml="xl"
-      >
-        <div>Test content</div>
-      </GoabPublicFormPage>
-    );
-
-    const el = baseElement.querySelector("goa-public-form-page");
-    expect(el?.getAttribute("id")).toBe("testPage");
-    expect(el?.getAttribute("heading")).toBe("Test Heading");
-    expect(el?.getAttribute("sub-heading")).toBe("Test Subheading");
-    expect(el?.getAttribute("summary-heading")).toBe("Test Summary");
-    expect(el?.getAttribute("section-title")).toBe("Test Section");
-    expect(el?.getAttribute("back-url")).toBe("/back");
-    expect(el?.getAttribute("type")).toBe("step");
-    expect(el?.getAttribute("button-text")).toBe("Continue");
-    expect(el?.getAttribute("button-visibility")).toBe("visible");
-    expect(el?.getAttribute("mt")).toBe("s");
-    expect(el?.getAttribute("mr")).toBe("m");
-    expect(el?.getAttribute("mb")).toBe("l");
-    expect(el?.getAttribute("ml")).toBe("xl");
-    expect(el?.textContent).toBe("Test content");
-  });
-
-  it("handles onContinue event", () => {
-    const handleContinue = vi.fn();
-    const { baseElement } = render(
-      <GoabPublicFormPage onContinue={handleContinue}>
-        <div>Test content</div>
-      </GoabPublicFormPage>
-    );
-
-    const el = baseElement.querySelector("goa-public-form-page");
-    const mockState: Record<string, GoabFieldsetItemState> = {
-      field1: {
-        name: "field1",
-        label: "Field 1",
-        value: "test",
-        order: 1
-      }
-    };
-    const detail = {
-      el: el as HTMLElement,
-      state: mockState,
-      cancelled: false
-    };
-    const event = new CustomEvent("_continue", { detail });
-    el?.dispatchEvent(event);
-
-    expect(handleContinue).toHaveBeenCalledWith(event);
-  });
-
-  it("removes event listeners on unmount", () => {
-    const handleContinue = vi.fn();
-
-    const { baseElement, unmount } = render(
-      <GoabPublicFormPage
-        onContinue={handleContinue}
-      >
-        <div>Test content</div>
-      </GoabPublicFormPage>
-    );
-
-    const el = baseElement.querySelector("goa-public-form-page");
-    unmount();
-
-    // After unmount, events should not trigger callbacks
-    const mockState: Record<string, GoabFieldsetItemState> = {
-      field1: {
-        name: "field1",
-        label: "Field 1",
-        value: "test",
-        order: 1
-      }
-    };
-
-    const continueEvent = new CustomEvent("_continue", {
-      detail: {
-        el: el as HTMLElement,
-        state: mockState,
-        cancelled: false
-      }
-    });
-
-    el?.dispatchEvent(continueEvent);
-
-    expect(handleContinue).not.toHaveBeenCalled();
-  });
-
-  it("should pass data-grid attributes", () => {
-    const { baseElement } = render(
-      <GoabPublicFormPage
-        data-grid="cell"
-      >
-        <div>Test content</div>
-      </GoabPublicFormPage>
-    );
-    const el = baseElement.querySelector("goa-public-form-page");
-    expect(el?.getAttribute("data-grid")).toBe("cell");
-  });
-});
diff --git a/libs/react-components/src/lib/form/public-form-summary.spec.tsx b/libs/react-components/src/lib/form/public-form-summary.spec.tsx
deleted file mode 100644
index 2af53223b..000000000
--- a/libs/react-components/src/lib/form/public-form-summary.spec.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, it, expect } from "vitest";
-import { GoabPublicFormSummary } from "./public-form-summary";
-
-describe("GoabPublicFormSummary", () => {
-  it("renders with default properties", () => {
-    const { baseElement } = render(
-      <GoabPublicFormSummary />
-    );
-
-    const el = baseElement.querySelector("goa-public-form-summary");
-    expect(el).toBeTruthy();
-    expect(el?.getAttribute("heading")).toBe("");
-  });
-
-  it("renders with custom heading", () => {
-    const heading = "Test Heading";
-    const { baseElement } = render(
-      <GoabPublicFormSummary heading={heading} />
-    );
-
-    const el = baseElement.querySelector("goa-public-form-summary");
-    expect(el).toBeTruthy();
-    expect(el?.getAttribute("heading")).toBe(heading);
-  });
-
-  it("should pass data-grid attributes", () => {
-    const { baseElement } = render(
-      <GoabPublicFormSummary
-        heading="Test Summary"
-        data-grid="cell"
-      />
-    );
-    const el = baseElement.querySelector("goa-public-form-summary");
-    expect(el?.getAttribute("data-grid")).toBe("cell");
-  });
-});
diff --git a/libs/react-components/src/lib/form/public-form.spec.tsx b/libs/react-components/src/lib/form/public-form.spec.tsx
deleted file mode 100644
index c146dd2c5..000000000
--- a/libs/react-components/src/lib/form/public-form.spec.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
-import { GoabPublicForm } from "./public-form";
-import { GoabFormState } from "@abgov/ui-components-common";
-
-describe("GoabPublicForm", () => {
-  it("renders with all properties", () => {
-    const { baseElement } = render(
-      <GoabPublicForm
-        status="complete"
-        name="testForm"
-      >
-        <div>Test content</div>
-      </GoabPublicForm>
-    );
-
-    const el = baseElement.querySelector("goa-public-form");
-    expect(el?.getAttribute("status")).toBe("complete");
-    expect(el?.getAttribute("name")).toBe("testForm");
-    expect(el?.textContent).toBe("Test content");
-  });
-
-  it("handles onInit event", () => {
-    const handleInit = vi.fn();
-    const { baseElement } = render(
-      <GoabPublicForm onInit={handleInit}>
-        <div>Test content</div>
-      </GoabPublicForm>
-    );
-
-    const el = baseElement.querySelector("goa-public-form");
-    const mockFormElement = document.createElement("form");
-    const detail = {
-      el: mockFormElement
-    };
-    const event = new CustomEvent("_init", { detail });
-    el?.dispatchEvent(event);
-
-    expect(handleInit).toHaveBeenCalledWith(event);
-  });
-
-  it("handles onComplete event", () => {
-    const handleComplete = vi.fn();
-    const { baseElement } = render(
-      <GoabPublicForm onComplete={handleComplete}>
-        <div>Test content</div>
-      </GoabPublicForm>
-    );
-
-    const el = baseElement.querySelector("goa-public-form");
-    const mockFormState: GoabFormState = {
-      uuid: "test-uuid",
-      form: {},
-      history: [],
-      editting: "",
-      status: "complete"
-    };
-    const event = new CustomEvent("_complete", { detail: mockFormState });
-    el?.dispatchEvent(event);
-
-    expect(handleComplete).toHaveBeenCalledWith(mockFormState);
-  });
-
-  it("handles onStateChange event", () => {
-    const handleStateChange = vi.fn();
-    const { baseElement } = render(
-      <GoabPublicForm onStateChange={handleStateChange}>
-        <div>Test content</div>
-      </GoabPublicForm>
-    );
-
-    const el = baseElement.querySelector("goa-public-form");
-    const mockFormState: GoabFormState = {
-      uuid: "test-uuid",
-      form: {},
-      history: [],
-      editting: "",
-      status: "complete"
-    };
-    const event = new CustomEvent("_stateChange", {
-      detail: { data: mockFormState }
-    });
-    el?.dispatchEvent(event);
-
-    expect(handleStateChange).toHaveBeenCalledWith(mockFormState);
-  });
-
-  it("removes event listeners on unmount", () => {
-    const handleInit = vi.fn();
-    const handleComplete = vi.fn();
-    const handleStateChange = vi.fn();
-
-    const { baseElement, unmount } = render(
-      <GoabPublicForm
-        onInit={handleInit}
-        onComplete={handleComplete}
-        onStateChange={handleStateChange}
-      >
-        <div>Test content</div>
-      </GoabPublicForm>
-    );
-
-    const el = baseElement.querySelector("goa-public-form");
-    unmount();
-
-    // After unmount, events should not trigger callbacks
-    const mockFormElement = document.createElement("form");
-    const initEvent = new CustomEvent("_init", {
-      detail: { el: mockFormElement }
-    });
-
-    const mockFormState: GoabFormState = {
-      uuid: "test-uuid",
-      form: {},
-      history: [],
-      editting: "",
-      status: "complete"
-    };
-
-    const completeEvent = new CustomEvent("_complete", {
-      detail: mockFormState
-    });
-
-    const stateChangeEvent = new CustomEvent("_stateChange", {
-      detail: { data: mockFormState }
-    });
-
-    el?.dispatchEvent(initEvent);
-    el?.dispatchEvent(completeEvent);
-    el?.dispatchEvent(stateChangeEvent);
-
-    expect(handleInit).not.toHaveBeenCalled();
-    expect(handleComplete).not.toHaveBeenCalled();
-    expect(handleStateChange).not.toHaveBeenCalled();
-  });
-
-  it("should pass data-grid attributes", () => {
-    const { baseElement } = render(
-      <GoabPublicForm
-        name="testForm"
-        data-grid="cell"
-      >
-        <div>Test content</div>
-      </GoabPublicForm>
-    );
-    const el = baseElement.querySelector("goa-public-form");
-    expect(el?.getAttribute("data-grid")).toBe("cell");
-  });
-});
diff --git a/libs/react-components/src/lib/form/public-subform-index.tsx b/libs/react-components/src/lib/form/public-subform-index.tsx
deleted file mode 100644
index b540c7677..000000000
--- a/libs/react-components/src/lib/form/public-subform-index.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ReactNode } from "react";
-import { Margins, DataAttributes } from "@abgov/ui-components-common";
-import { transformProps, kebab } from "../common/extract-props";
-
-interface WCProps extends Margins {
-  heading?: string;
-  "section-title"?: string;
-  "action-button-text"?: string;
-  "button-visibility"?: string;
-}
-
-declare module "react" {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      "goa-public-subform-index": WCProps & React.HTMLAttributes<HTMLElement>;
-    }
-  }
-}
-
-interface GoabPublicSubformIndexProps extends Margins, DataAttributes {
-  heading?: string;
-  sectionTitle?: string;
-  actionButtonText?: string;
-  buttonVisibility?: "visible" | "hidden";
-  children: ReactNode;
-}
-
-export function GoabPublicSubformIndex({
-  heading = "",
-  sectionTitle = "",
-  actionButtonText = "",
-  buttonVisibility = "hidden",
-  children,
-  ...rest
-}: GoabPublicSubformIndexProps) {
-  const _props = transformProps<WCProps>(
-    { heading, "section-title": sectionTitle, "action-button-text": actionButtonText, "button-visibility": buttonVisibility, ...rest },
-    kebab
-  );
-
-  return (
-    <goa-public-subform-index slot="subform-index" {..._props}>
-      {children}
-    </goa-public-subform-index>
-  );
-}
-
-export default GoabPublicSubformIndex;
diff --git a/libs/react-components/src/lib/form/task-list.spec.tsx b/libs/react-components/src/lib/form/task-list.spec.tsx
deleted file mode 100644
index 072754f28..000000000
--- a/libs/react-components/src/lib/form/task-list.spec.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, it, expect } from "vitest";
-import { GoabPublicFormTaskList } from "./task-list";
-
-describe("GoabPublicFormTaskList", () => {
-  it("renders with heading property", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTaskList heading="Required Tasks">
-        <div data-testid="task-item-1">Task 1</div>
-        <div data-testid="task-item-2">Task 2</div>
-      </GoabPublicFormTaskList>
-    );
-
-    const el = baseElement.querySelector("goa-public-form-task-list");
-    expect(el?.getAttribute("heading")).toBe("Required Tasks");
-
-    // Content is rendered
-    expect(baseElement.querySelector("[data-testid='task-item-1']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='task-item-2']")).toBeTruthy();
-  });
-
-  it("renders with different heading values", () => {
-    const headings = [
-      "Application Tasks",
-      "Required Steps",
-      "To-Do Items",
-      "Checklist",
-    ];
-
-    headings.forEach(heading => {
-      const { baseElement, unmount } = render(
-        <GoabPublicFormTaskList heading={heading}>
-          <div>Task content</div>
-        </GoabPublicFormTaskList>
-      );
-
-      const el = baseElement.querySelector("goa-public-form-task-list");
-      expect(el?.getAttribute("heading")).toBe(heading);
-      
-      unmount();
-    });
-  });
-
-  it("renders complex children content with task items", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTaskList heading="Application Progress">
-        <div data-testid="task-completed" className="task-item">
-          <span>✓ Complete profile information</span>
-          <span className="status">Completed</span>
-        </div>
-        <div data-testid="task-in-progress" className="task-item">
-          <span>📝 Upload documents</span>
-          <span className="status">In Progress</span>
-        </div>
-        <div data-testid="task-pending" className="task-item">
-          <span>⏳ Submit application</span>
-          <span className="status">Pending</span>
-        </div>
-      </GoabPublicFormTaskList>
-    );
-
-    expect(baseElement.querySelector("[data-testid='task-completed']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='task-in-progress']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='task-pending']")).toBeTruthy();
-    expect(baseElement.querySelectorAll(".task-item")).toHaveLength(3);
-    expect(baseElement.querySelectorAll(".status")).toHaveLength(3);
-  });
-
-  it("renders nested task components", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTaskList heading="Form Tasks">
-        <div data-testid="task-1">
-          <h3>Personal Information</h3>
-          <ul>
-            <li data-testid="subtask-1">Fill out name fields</li>
-            <li data-testid="subtask-2">Provide contact details</li>
-          </ul>
-        </div>
-        <div data-testid="task-2">
-          <h3>Document Upload</h3>
-          <button data-testid="upload-btn">Upload Files</button>
-        </div>
-      </GoabPublicFormTaskList>
-    );
-
-    expect(baseElement.querySelector("[data-testid='task-1']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='task-2']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='subtask-1']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='subtask-2']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='upload-btn']")).toBeTruthy();
-    expect(baseElement.querySelectorAll("h3")).toHaveLength(2);
-    expect(baseElement.querySelectorAll("li")).toHaveLength(2);
-  });
-
-  it("handles special characters in heading", () => {
-    const specialHeadings = [
-      "Tasks & Requirements",
-      "Steps > Complete",
-      "Items < 5",
-      'Tasks with "quotes"',
-      "Tasks with 'apostrophes'",
-      "Tasks with numbers: 123",
-      "Tasks with symbols: @#$%",
-    ];
-
-    specialHeadings.forEach(heading => {
-      const { baseElement, unmount } = render(
-        <GoabPublicFormTaskList heading={heading}>
-          <div>Task content</div>
-        </GoabPublicFormTaskList>
-      );
-
-      const el = baseElement.querySelector("goa-public-form-task-list");
-      expect(el?.getAttribute("heading")).toBe(heading);
-      
-      unmount();
-    });
-  });
-
-  it("renders empty task list", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTaskList heading="Empty List">
-        {null}
-      </GoabPublicFormTaskList>
-    );
-
-    const el = baseElement.querySelector("goa-public-form-task-list");
-    expect(el).toBeTruthy();
-    expect(el?.getAttribute("heading")).toBe("Empty List");
-  });
-
-  it("renders single task item", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTaskList heading="Single Task">
-        <div data-testid="only-task">Complete registration</div>
-      </GoabPublicFormTaskList>
-    );
-
-    const el = baseElement.querySelector("goa-public-form-task-list");
-    expect(el?.getAttribute("heading")).toBe("Single Task");
-    expect(baseElement.querySelector("[data-testid='only-task']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='only-task']")?.textContent).toBe("Complete registration");
-  });
-
-  it("renders with interactive elements", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTaskList heading="Interactive Tasks">
-        <div data-testid="task-with-buttons">
-          <span>Review application</span>
-          <button data-testid="edit-btn">Edit</button>
-          <button data-testid="delete-btn">Delete</button>
-        </div>
-        <div data-testid="task-with-links">
-          <span>Submit documents</span>
-          <a href="#" data-testid="help-link">Need help?</a>
-        </div>
-        <div data-testid="task-with-inputs">
-          <label>
-            <input type="checkbox" data-testid="checkbox" />
-            Mark as completed
-          </label>
-        </div>
-      </GoabPublicFormTaskList>
-    );
-
-    expect(baseElement.querySelector("[data-testid='edit-btn']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='delete-btn']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='help-link']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='checkbox']")).toBeTruthy();
-    expect(baseElement.querySelectorAll("button")).toHaveLength(2);
-    expect(baseElement.querySelectorAll("a")).toHaveLength(1);
-    expect(baseElement.querySelectorAll("input")).toHaveLength(1);
-  });
-
-  it("renders with long heading text", () => {
-    const longHeading = "This is a very long heading that might wrap to multiple lines and should still be handled correctly by the component";
-    
-    const { baseElement } = render(
-      <GoabPublicFormTaskList heading={longHeading}>
-        <div>Task content</div>
-      </GoabPublicFormTaskList>
-    );
-
-    const el = baseElement.querySelector("goa-public-form-task-list");
-    expect(el?.getAttribute("heading")).toBe(longHeading);
-  });
-
-  it("renders with multiple task groups", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTaskList heading="Grouped Tasks">
-        <div data-testid="group-1">
-          <h4>Personal Details</h4>
-          <div data-testid="task-1-1">Enter full name</div>
-          <div data-testid="task-1-2">Provide email</div>
-        </div>
-        <div data-testid="group-2">
-          <h4>Professional Details</h4>
-          <div data-testid="task-2-1">Add work experience</div>
-          <div data-testid="task-2-2">Upload resume</div>
-        </div>
-        <div data-testid="group-3">
-          <h4>Final Steps</h4>
-          <div data-testid="task-3-1">Review information</div>
-          <div data-testid="task-3-2">Submit application</div>
-        </div>
-      </GoabPublicFormTaskList>
-    );
-
-    expect(baseElement.querySelectorAll("[data-testid^='group-']")).toHaveLength(3);
-    expect(baseElement.querySelectorAll("h4")).toHaveLength(3);
-    expect(baseElement.querySelectorAll("[data-testid^='task-']")).toHaveLength(6);
-  });
-
-  it("should pass data-grid attributes", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTaskList
-        heading="Test Tasks"
-        data-grid="cell"
-      >
-        <div>Test content</div>
-      </GoabPublicFormTaskList>
-    );
-    const el = baseElement.querySelector("goa-public-form-task-list");
-    expect(el?.getAttribute("data-grid")).toBe("cell");
-  });
-});
\ No newline at end of file
diff --git a/libs/react-components/src/lib/form/task.spec.tsx b/libs/react-components/src/lib/form/task.spec.tsx
deleted file mode 100644
index bbe5eb745..000000000
--- a/libs/react-components/src/lib/form/task.spec.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, it, expect } from "vitest";
-import { GoabPublicFormTask } from "./task";
-import { GoabPublicFormTaskStatus } from "@abgov/ui-components-common";
-
-describe("GoabPublicFormTask", () => {
-  it("renders with status property", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTask status="completed">
-        <div data-testid="task-content">Complete profile</div>
-      </GoabPublicFormTask>
-    );
-
-    const el = baseElement.querySelector("goa-public-form-task");
-    expect(el?.getAttribute("status")).toBe("completed");
-
-    // Content is rendered
-    expect(baseElement.querySelector("[data-testid='task-content']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='task-content']")?.textContent).toBe("Complete profile");
-  });
-
-  it("handles all valid status values", () => {
-    const statuses: GoabPublicFormTaskStatus[] = ["completed", "not-started", "cannot-start"];
-    
-    statuses.forEach(status => {
-      const { baseElement, unmount } = render(
-        <GoabPublicFormTask status={status}>
-          <div>Task content</div>
-        </GoabPublicFormTask>
-      );
-      
-      const el = baseElement.querySelector("goa-public-form-task");
-      expect(el?.getAttribute("status")).toBe(status);
-      
-      unmount();
-    });
-  });
-
-  it("renders with completed status", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTask status="completed">
-        <span>✓ Application submitted</span>
-      </GoabPublicFormTask>
-    );
-
-    const el = baseElement.querySelector("goa-public-form-task");
-    expect(el?.getAttribute("status")).toBe("completed");
-    expect(baseElement.textContent).toContain("✓ Application submitted");
-  });
-
-  it("renders with not-started status", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTask status="not-started">
-        <span>📝 Upload documents</span>
-      </GoabPublicFormTask>
-    );
-
-    const el = baseElement.querySelector("goa-public-form-task");
-    expect(el?.getAttribute("status")).toBe("not-started");
-    expect(baseElement.textContent).toContain("📝 Upload documents");
-  });
-
-  it("renders with cannot-start status", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTask status="cannot-start">
-        <span>🔒 Final submission (complete other tasks first)</span>
-      </GoabPublicFormTask>
-    );
-
-    const el = baseElement.querySelector("goa-public-form-task");
-    expect(el?.getAttribute("status")).toBe("cannot-start");
-    expect(baseElement.textContent).toContain("🔒 Final submission (complete other tasks first)");
-  });
-
-  it("renders complex children content", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTask status="not-started">
-        <div data-testid="task-header">
-          <h3>Complete Personal Information</h3>
-          <p>Fill out all required fields in your profile</p>
-        </div>
-        <div data-testid="task-actions">
-          <button data-testid="start-btn">Start Task</button>
-          <button data-testid="skip-btn">Skip for Now</button>
-        </div>
-      </GoabPublicFormTask>
-    );
-
-    expect(baseElement.querySelector("[data-testid='task-header']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='task-actions']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='start-btn']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='skip-btn']")).toBeTruthy();
-    expect(baseElement.querySelector("h3")?.textContent).toBe("Complete Personal Information");
-    expect(baseElement.querySelector("p")?.textContent).toBe("Fill out all required fields in your profile");
-  });
-
-  it("renders with interactive elements", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTask status="completed">
-        <div data-testid="task-item">
-          <span>Review application details</span>
-          <div className="actions">
-            <button data-testid="edit-btn" type="button">Edit</button>
-            <button data-testid="view-btn" type="button">View</button>
-            <a href="#details" data-testid="details-link">More details</a>
-          </div>
-        </div>
-      </GoabPublicFormTask>
-    );
-
-    expect(baseElement.querySelector("[data-testid='edit-btn']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='view-btn']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='details-link']")).toBeTruthy();
-    expect(baseElement.querySelectorAll("button")).toHaveLength(2);
-    expect(baseElement.querySelectorAll("a")).toHaveLength(1);
-  });
-
-  it("renders with form elements", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTask status="not-started">
-        <div data-testid="task-form">
-          <label>
-            <input type="checkbox" data-testid="agree-checkbox" />
-            I agree to the terms and conditions
-          </label>
-          <div>
-            <input type="text" data-testid="name-input" placeholder="Enter your name" />
-            <select data-testid="country-select">
-              <option value="">Select country</option>
-              <option value="ca">Canada</option>
-              <option value="us">United States</option>
-            </select>
-          </div>
-        </div>
-      </GoabPublicFormTask>
-    );
-
-    expect(baseElement.querySelector("[data-testid='agree-checkbox']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='name-input']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='country-select']")).toBeTruthy();
-    expect(baseElement.querySelectorAll("input")).toHaveLength(2);
-    expect(baseElement.querySelectorAll("select")).toHaveLength(1);
-  });
-
-  it("renders nested task components", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTask status="not-started">
-        <div data-testid="main-task">
-          <h2>Application Process</h2>
-          <div data-testid="subtasks">
-            <div data-testid="subtask-1" className="subtask">
-              <span>Step 1: Personal Information</span>
-              <span className="status">Required</span>
-            </div>
-            <div data-testid="subtask-2" className="subtask">
-              <span>Step 2: Document Upload</span>
-              <span className="status">Optional</span>
-            </div>
-            <div data-testid="subtask-3" className="subtask">
-              <span>Step 3: Review & Submit</span>
-              <span className="status">Required</span>
-            </div>
-          </div>
-        </div>
-      </GoabPublicFormTask>
-    );
-
-    expect(baseElement.querySelector("[data-testid='main-task']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='subtasks']")).toBeTruthy();
-    expect(baseElement.querySelectorAll("[data-testid^='subtask-']")).toHaveLength(3);
-    expect(baseElement.querySelectorAll(".subtask")).toHaveLength(3);
-    expect(baseElement.querySelectorAll(".status")).toHaveLength(3);
-    expect(baseElement.querySelector("h2")?.textContent).toBe("Application Process");
-  });
-
-  it("renders with text content only", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTask status="completed">
-        Complete your profile information by filling out all required fields
-      </GoabPublicFormTask>
-    );
-
-    const el = baseElement.querySelector("goa-public-form-task");
-    expect(el?.getAttribute("status")).toBe("completed");
-    expect(el?.textContent).toBe("Complete your profile information by filling out all required fields");
-  });
-
-  it("renders with mixed content types", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTask status="cannot-start">
-        <div>
-          Task description with <strong>bold text</strong> and <em>italic text</em>
-        </div>
-        <ul data-testid="task-list">
-          <li>First requirement</li>
-          <li>Second requirement</li>
-          <li>Third requirement</li>
-        </ul>
-        <div>
-          Progress: <span data-testid="progress">0/3 completed</span>
-        </div>
-      </GoabPublicFormTask>
-    );
-
-    expect(baseElement.querySelector("strong")?.textContent).toBe("bold text");
-    expect(baseElement.querySelector("em")?.textContent).toBe("italic text");
-    expect(baseElement.querySelector("[data-testid='task-list']")).toBeTruthy();
-    expect(baseElement.querySelector("[data-testid='progress']")?.textContent).toBe("0/3 completed");
-    expect(baseElement.querySelectorAll("li")).toHaveLength(3);
-  });
-
-  it("renders empty children", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTask status="completed">
-        {null}
-      </GoabPublicFormTask>
-    );
-
-    const el = baseElement.querySelector("goa-public-form-task");
-    expect(el).toBeTruthy();
-    expect(el?.getAttribute("status")).toBe("completed");
-    expect(el?.textContent).toBe("");
-  });
-
-  it("should pass data-grid attributes", () => {
-    const { baseElement } = render(
-      <GoabPublicFormTask
-        status="completed"
-        data-grid="cell"
-      >
-        <div>Test content</div>
-      </GoabPublicFormTask>
-    );
-    const el = baseElement.querySelector("goa-public-form-task");
-    expect(el?.getAttribute("data-grid")).toBe("cell");
-  });
-});
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a004da0c6..e628c62b7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -80,10 +80,10 @@
         "@typescript-eslint/utils": "^7.18.0",
         "@vitejs/plugin-react": "^4.2.1",
         "@vitejs/plugin-react-swc": "^3.5.0",
-        "@vitest/browser": "^4.0.13",
-        "@vitest/browser-playwright": "^4.0.13",
-        "@vitest/coverage-v8": "^4.0.13",
-        "@vitest/ui": "^4.0.13",
+        "@vitest/browser": "^4.0.18",
+        "@vitest/browser-playwright": "^4.0.18",
+        "@vitest/coverage-v8": "^4.0.18",
+        "@vitest/ui": "^4.0.18",
         "autoprefixer": "^10.4.16",
         "eslint": "8.57.1",
         "eslint-config-prettier": "10.1.5",
@@ -118,7 +118,7 @@
         "typescript": "5.8.3",
         "vite": "~5.4.20",
         "vite-plugin-dts": "4.5.4",
-        "vitest": "4.0.9",
+        "vitest": "^4.0.18",
         "vitest-browser-react": "^1.0.0",
         "vitest-dom": "^0.1.1"
       }
@@ -19650,14 +19650,14 @@
       }
     },
     "node_modules/@vitest/browser": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/@vitest/browser/-/browser-4.0.13.tgz",
-      "integrity": "sha512-lruSgrYPVAJzKmX6EJYCg9nY+0A4VkeTLpTzf1jRD/XMjNbzD9yy7D499xmVKglwJczANYJXBvZSPGcRlon+0w==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/browser/-/browser-4.0.18.tgz",
+      "integrity": "sha512-gVQqh7paBz3gC+ZdcCmNSWJMk70IUjDeVqi+5m5vYpEHsIwRgw3Y545jljtajhkekIpIp5Gg8oK7bctgY0E2Ng==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/mocker": "4.0.13",
-        "@vitest/utils": "4.0.13",
+        "@vitest/mocker": "4.0.18",
+        "@vitest/utils": "4.0.18",
         "magic-string": "^0.30.21",
         "pixelmatch": "7.1.0",
         "pngjs": "^7.0.0",
@@ -19669,18 +19669,18 @@
         "url": "https://opencollective.com/vitest"
       },
       "peerDependencies": {
-        "vitest": "4.0.13"
+        "vitest": "4.0.18"
       }
     },
     "node_modules/@vitest/browser-playwright": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/@vitest/browser-playwright/-/browser-playwright-4.0.13.tgz",
-      "integrity": "sha512-oaRY+/pvwS4/sN2rE2aZh9jdli8EkXm5AidmXEbWRu2wW0omG9PmgChWCX2jsD9qRLQxXTSLl5oKezANNF6LnQ==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/browser-playwright/-/browser-playwright-4.0.18.tgz",
+      "integrity": "sha512-gfajTHVCiwpxRj1qh0Sh/5bbGLG4F/ZH/V9xvFVoFddpITfMta9YGow0W6ZpTTORv2vdJuz9TnrNSmjKvpOf4g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/browser": "4.0.13",
-        "@vitest/mocker": "4.0.13",
+        "@vitest/browser": "4.0.18",
+        "@vitest/mocker": "4.0.18",
         "tinyrainbow": "^3.0.3"
       },
       "funding": {
@@ -19688,7 +19688,7 @@
       },
       "peerDependencies": {
         "playwright": "*",
-        "vitest": "4.0.13"
+        "vitest": "4.0.18"
       },
       "peerDependenciesMeta": {
         "playwright": {
@@ -19769,82 +19769,18 @@
         "node": ">=18"
       }
     },
-    "node_modules/@vitest/coverage-v8/node_modules/@vitest/pretty-format": {
-      "version": "4.0.18",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.18.tgz",
-      "integrity": "sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "tinyrainbow": "^3.0.3"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/@vitest/coverage-v8/node_modules/@vitest/utils": {
-      "version": "4.0.18",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.18.tgz",
-      "integrity": "sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vitest/pretty-format": "4.0.18",
-        "tinyrainbow": "^3.0.3"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
     "node_modules/@vitest/expect": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.9.tgz",
-      "integrity": "sha512-C2vyXf5/Jfj1vl4DQYxjib3jzyuswMi/KHHVN2z+H4v16hdJ7jMZ0OGe3uOVIt6LyJsAofDdaJNIFEpQcrSTFw==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.18.tgz",
+      "integrity": "sha512-8sCWUyckXXYvx4opfzVY03EOiYVxyNrHS5QxX3DAIi5dpJAAkyJezHCP77VMX4HKA2LDT/Jpfo8i2r5BE3GnQQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@standard-schema/spec": "^1.0.0",
         "@types/chai": "^5.2.2",
-        "@vitest/spy": "4.0.9",
-        "@vitest/utils": "4.0.9",
-        "chai": "^6.2.0",
-        "tinyrainbow": "^3.0.3"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/@vitest/expect/node_modules/@vitest/pretty-format": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.9.tgz",
-      "integrity": "sha512-Hor0IBTwEi/uZqB7pvGepyElaM8J75pYjrrqbC8ZYMB9/4n5QA63KC15xhT+sqHpdGWfdnPo96E8lQUxs2YzSQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "tinyrainbow": "^3.0.3"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/@vitest/expect/node_modules/@vitest/spy": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.9.tgz",
-      "integrity": "sha512-J9Ttsq0hDXmxmT8CUOWUr1cqqAj2FJRGTdyEjSR+NjoOGKEqkEWj+09yC0HhI8t1W6t4Ctqawl1onHgipJve1A==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/@vitest/expect/node_modules/@vitest/utils": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.9.tgz",
-      "integrity": "sha512-cEol6ygTzY4rUPvNZM19sDf7zGa35IYTm9wfzkHoT/f5jX10IOY7QleWSOh5T0e3I3WVozwK5Asom79qW8DiuQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vitest/pretty-format": "4.0.9",
+        "@vitest/spy": "4.0.18",
+        "@vitest/utils": "4.0.18",
+        "chai": "^6.2.1",
         "tinyrainbow": "^3.0.3"
       },
       "funding": {
@@ -19852,13 +19788,13 @@
       }
     },
     "node_modules/@vitest/mocker": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.13.tgz",
-      "integrity": "sha512-eNCwzrI5djoauklwP1fuslHBjrbR8rqIVbvNlAnkq1OTa6XT+lX68mrtPirNM9TnR69XUPt4puBCx2Wexseylg==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.18.tgz",
+      "integrity": "sha512-HhVd0MDnzzsgevnOWCBj5Otnzobjy5wLBe4EdeeFGv8luMsGcYqDuFRMcttKWZA5vVO8RFjexVovXvAM4JoJDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/spy": "4.0.13",
+        "@vitest/spy": "4.0.18",
         "estree-walker": "^3.0.3",
         "magic-string": "^0.30.21"
       },
@@ -19899,9 +19835,9 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.13.tgz",
-      "integrity": "sha512-ooqfze8URWbI2ozOeLDMh8YZxWDpGXoeY3VOgcDnsUxN0jPyPWSUvjPQWqDGCBks+opWlN1E4oP1UYl3C/2EQA==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.18.tgz",
+      "integrity": "sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -19912,54 +19848,27 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.9.tgz",
-      "integrity": "sha512-aF77tsXdEvIJRkj9uJZnHtovsVIx22Ambft9HudC+XuG/on1NY/bf5dlDti1N35eJT+QZLb4RF/5dTIG18s98w==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.18.tgz",
+      "integrity": "sha512-rpk9y12PGa22Jg6g5M3UVVnTS7+zycIGk9ZNGN+m6tZHKQb7jrP7/77WfZy13Y/EUDd52NDsLRQhYKtv7XfPQw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/utils": "4.0.9",
+        "@vitest/utils": "4.0.18",
         "pathe": "^2.0.3"
       },
       "funding": {
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@vitest/runner/node_modules/@vitest/pretty-format": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.9.tgz",
-      "integrity": "sha512-Hor0IBTwEi/uZqB7pvGepyElaM8J75pYjrrqbC8ZYMB9/4n5QA63KC15xhT+sqHpdGWfdnPo96E8lQUxs2YzSQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "tinyrainbow": "^3.0.3"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/@vitest/runner/node_modules/@vitest/utils": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.9.tgz",
-      "integrity": "sha512-cEol6ygTzY4rUPvNZM19sDf7zGa35IYTm9wfzkHoT/f5jX10IOY7QleWSOh5T0e3I3WVozwK5Asom79qW8DiuQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vitest/pretty-format": "4.0.9",
-        "tinyrainbow": "^3.0.3"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
     "node_modules/@vitest/snapshot": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.9.tgz",
-      "integrity": "sha512-r1qR4oYstPbnOjg0Vgd3E8ADJbi4ditCzqr+Z9foUrRhIy778BleNyZMeAJ2EjV+r4ASAaDsdciC9ryMy8xMMg==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.18.tgz",
+      "integrity": "sha512-PCiV0rcl7jKQjbgYqjtakly6T1uwv/5BQ9SwBLekVg/EaYeQFPiXcgrC2Y7vDMA8dM1SUEAEV82kgSQIlXNMvA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "4.0.9",
+        "@vitest/pretty-format": "4.0.18",
         "magic-string": "^0.30.21",
         "pathe": "^2.0.3"
       },
@@ -19967,19 +19876,6 @@
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@vitest/snapshot/node_modules/@vitest/pretty-format": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.9.tgz",
-      "integrity": "sha512-Hor0IBTwEi/uZqB7pvGepyElaM8J75pYjrrqbC8ZYMB9/4n5QA63KC15xhT+sqHpdGWfdnPo96E8lQUxs2YzSQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "tinyrainbow": "^3.0.3"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
     "node_modules/@vitest/snapshot/node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -19991,9 +19887,9 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.13.tgz",
-      "integrity": "sha512-hSu+m4se0lDV5yVIcNWqjuncrmBgwaXa2utFLIrBkQCQkt+pSwyZTPFQAZiiF/63j8jYa8uAeUZ3RSfcdWaYWw==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.18.tgz",
+      "integrity": "sha512-cbQt3PTSD7P2OARdVW3qWER5EGq7PHlvE+QfzSC0lbwO+xnt7+XH06ZzFjFRgzUX//JmpxrCu92VdwvEPlWSNw==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -20022,33 +19918,6 @@
         "vitest": "4.0.18"
       }
     },
-    "node_modules/@vitest/ui/node_modules/@vitest/pretty-format": {
-      "version": "4.0.18",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.18.tgz",
-      "integrity": "sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "tinyrainbow": "^3.0.3"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/@vitest/ui/node_modules/@vitest/utils": {
-      "version": "4.0.18",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.18.tgz",
-      "integrity": "sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vitest/pretty-format": "4.0.18",
-        "tinyrainbow": "^3.0.3"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
     "node_modules/@vitest/ui/node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -20067,13 +19936,13 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.13.tgz",
-      "integrity": "sha512-ydozWyQ4LZuu8rLp47xFUWis5VOKMdHjXCWhs1LuJsTNKww+pTHQNK4e0assIB9K80TxFyskENL6vCu3j34EYA==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.18.tgz",
+      "integrity": "sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/pretty-format": "4.0.13",
+        "@vitest/pretty-format": "4.0.18",
         "tinyrainbow": "^3.0.3"
       },
       "funding": {
@@ -21633,15 +21502,6 @@
         "url": "https://opencollective.com/svgo"
       }
     },
-    "node_modules/astro/node_modules/tinyexec": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.2.tgz",
-      "integrity": "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/astro/node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -46965,11 +46825,13 @@
       "license": "MIT"
     },
     "node_modules/tinyexec": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
-      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
-      "dev": true,
-      "license": "MIT"
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.2.tgz",
+      "integrity": "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
@@ -48687,28 +48549,28 @@
       }
     },
     "node_modules/vitest": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.9.tgz",
-      "integrity": "sha512-E0Ja2AX4th+CG33yAFRC+d1wFx2pzU5r6HtG6LiPSE04flaE0qB6YyjSw9ZcpJAtVPfsvZGtJlKWZpuW7EHRxg==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.18.tgz",
+      "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vitest/expect": "4.0.9",
-        "@vitest/mocker": "4.0.9",
-        "@vitest/pretty-format": "4.0.9",
-        "@vitest/runner": "4.0.9",
-        "@vitest/snapshot": "4.0.9",
-        "@vitest/spy": "4.0.9",
-        "@vitest/utils": "4.0.9",
-        "debug": "^4.4.3",
+        "@vitest/expect": "4.0.18",
+        "@vitest/mocker": "4.0.18",
+        "@vitest/pretty-format": "4.0.18",
+        "@vitest/runner": "4.0.18",
+        "@vitest/snapshot": "4.0.18",
+        "@vitest/spy": "4.0.18",
+        "@vitest/utils": "4.0.18",
         "es-module-lexer": "^1.7.0",
         "expect-type": "^1.2.2",
         "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
         "pathe": "^2.0.3",
         "picomatch": "^4.0.3",
         "std-env": "^3.10.0",
         "tinybench": "^2.9.0",
-        "tinyexec": "^0.3.2",
+        "tinyexec": "^1.0.2",
         "tinyglobby": "^0.2.15",
         "tinyrainbow": "^3.0.3",
         "vite": "^6.0.0 || ^7.0.0",
@@ -48725,12 +48587,12 @@
       },
       "peerDependencies": {
         "@edge-runtime/vm": "*",
-        "@types/debug": "^4.1.12",
+        "@opentelemetry/api": "^1.9.0",
         "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
-        "@vitest/browser-playwright": "4.0.9",
-        "@vitest/browser-preview": "4.0.9",
-        "@vitest/browser-webdriverio": "4.0.9",
-        "@vitest/ui": "4.0.9",
+        "@vitest/browser-playwright": "4.0.18",
+        "@vitest/browser-preview": "4.0.18",
+        "@vitest/browser-webdriverio": "4.0.18",
+        "@vitest/ui": "4.0.18",
         "happy-dom": "*",
         "jsdom": "*"
       },
@@ -48738,7 +48600,7 @@
         "@edge-runtime/vm": {
           "optional": true
         },
-        "@types/debug": {
+        "@opentelemetry/api": {
           "optional": true
         },
         "@types/node": {
@@ -48874,80 +48736,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/vitest/node_modules/@vitest/mocker": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.9.tgz",
-      "integrity": "sha512-PUyaowQFHW+9FKb4dsvvBM4o025rWMlEDXdWRxIOilGaHREYTi5Q2Rt9VCgXgPy/hHZu1LeuXtrA/GdzOatP2g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vitest/spy": "4.0.9",
-        "estree-walker": "^3.0.3",
-        "magic-string": "^0.30.21"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      },
-      "peerDependencies": {
-        "msw": "^2.4.9",
-        "vite": "^6.0.0 || ^7.0.0-0"
-      },
-      "peerDependenciesMeta": {
-        "msw": {
-          "optional": true
-        },
-        "vite": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/vitest/node_modules/@vitest/pretty-format": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.9.tgz",
-      "integrity": "sha512-Hor0IBTwEi/uZqB7pvGepyElaM8J75pYjrrqbC8ZYMB9/4n5QA63KC15xhT+sqHpdGWfdnPo96E8lQUxs2YzSQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "tinyrainbow": "^3.0.3"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/vitest/node_modules/@vitest/spy": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.9.tgz",
-      "integrity": "sha512-J9Ttsq0hDXmxmT8CUOWUr1cqqAj2FJRGTdyEjSR+NjoOGKEqkEWj+09yC0HhI8t1W6t4Ctqawl1onHgipJve1A==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/vitest/node_modules/@vitest/utils": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.9.tgz",
-      "integrity": "sha512-cEol6ygTzY4rUPvNZM19sDf7zGa35IYTm9wfzkHoT/f5jX10IOY7QleWSOh5T0e3I3WVozwK5Asom79qW8DiuQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vitest/pretty-format": "4.0.9",
-        "tinyrainbow": "^3.0.3"
-      },
-      "funding": {
-        "url": "https://opencollective.com/vitest"
-      }
-    },
-    "node_modules/vitest/node_modules/estree-walker": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/estree": "^1.0.0"
-      }
-    },
     "node_modules/vitest/node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
diff --git a/package.json b/package.json
index 1e11eac82..d621d733f 100644
--- a/package.json
+++ b/package.json
@@ -78,10 +78,10 @@
     "@typescript-eslint/utils": "^7.18.0",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
-    "@vitest/browser": "^4.0.13",
-    "@vitest/browser-playwright": "^4.0.13",
-    "@vitest/coverage-v8": "^4.0.13",
-    "@vitest/ui": "^4.0.13",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
     "autoprefixer": "^10.4.16",
     "eslint": "8.57.1",
     "eslint-config-prettier": "10.1.5",
@@ -116,7 +116,7 @@
     "typescript": "5.8.3",
     "vite": "~5.4.20",
     "vite-plugin-dts": "4.5.4",
-    "vitest": "4.0.9",
+    "vitest": "^4.0.18",
     "vitest-browser-react": "^1.0.0",
     "vitest-dom": "^0.1.1"
   },

From 0516af73d5aec2e563ecb5aaebeb86cc6d15f7d9 Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Thu, 12 Feb 2026 11:38:36 -0700
Subject: [PATCH 09/13] open up the shadowroot

---
 .../specs/public-form.browser.spec.tsx        | 53 +++++++++----------
 .../src/components/input/Input.svelte         | 12 ++++-
 .../components/radio-group/RadioGroup.svelte  | 10 ++++
 .../components/radio-item/RadioItem.svelte    | 12 ++++-
 4 files changed, 58 insertions(+), 29 deletions(-)

diff --git a/libs/react-components/specs/public-form.browser.spec.tsx b/libs/react-components/specs/public-form.browser.spec.tsx
index 6637a983a..b5dccf59f 100644
--- a/libs/react-components/specs/public-form.browser.spec.tsx
+++ b/libs/react-components/specs/public-form.browser.spec.tsx
@@ -262,50 +262,49 @@ function PublicFormTestComponent() {
 }
 
 describe("PublicForm Browser Tests", () => {
-  it("initializes the form", async () => {
-    const result = render(<PublicFormTestComponent />);
 
-    await vi.waitFor(() => {
-      const form = result.container.querySelector("goa-public-form");
-      expect(form).toBeTruthy();
-    });
+  it.only("should pass", async () => {
+    const { getByLabelText } = render(<>
+      <goa-input arialabel="Full name" />
+    </>);
 
-    // Wait for form to initialize
-    await vi.waitFor(
-      () => {
-        // on first page, so it should be visible
-        const recipient = result.container.querySelector(
-          "goa-radio-group[name=role]"
-        );
+    const name = getByLabelText("Full name");
+    await vi.waitFor(() => {
+      expect(name.length).toBe(1);
+      // console.log(name.element());
+    })
+  })
 
-        // on later page, so should not be visible yet
-        const sin = result.container.querySelector(
-          "goa-input[name=sin]"
-        );
+  it.only("initializes the form", async () => {
+    const { getByRole, getByLabelText } = render(<PublicFormTestComponent />);
 
-        expect(recipient).toBeTruthy();
-        expect(recipient).toBeVisible();
+    const roles = getByRole("radiogroup");
+    const sin = getByLabelText("sin");
 
-        expect(sin).toBeTruthy();
-        expect(sin).not.toBeVisible();
-      },
-      { timeout: 3000 }
-    );
+    // Wait for form to initialize
+    await vi.waitFor(() => {
+      // on first page, so it should be visible
+      expect(roles.length).toBe(1);
+      // sin should not be visible yet
+      expect(sin.length).toBe(0);
+    });
   });
 
   it.only("can select a radio button and continue to next page", async () => {
-    const { getByText, getByRole } = render(<PublicFormTestComponent />);
+    const { getByLabelText, getByRole } = render(<PublicFormTestComponent />);
 
     const radios = getByRole("radio");
+    const receiverOption = getByLabelText("Recipient");
 
     // Wait for radio items to be present
     await vi.waitFor( () => {
       expect(radios.length).toBe(2);
     });
 
+
     // Select the Recipient radio button
-    await userEvent.click(radios.elements()[0]);
-    // await radios.first().click();
+    // await userEvent.click(radios.elements()[0]);
+    await receiverOption.click();
 
     // Click continue button
     const continueButton = getByRole("button").getByText("Continue");
diff --git a/libs/web-components/src/components/input/Input.svelte b/libs/web-components/src/components/input/Input.svelte
index 174c10f3b..8a6a70055 100644
--- a/libs/web-components/src/components/input/Input.svelte
+++ b/libs/web-components/src/components/input/Input.svelte
@@ -1,10 +1,20 @@
 <svelte:options
   customElement={{
+    shadow: "open",
     tag: "goa-input",
     props: {
       name: { attribute: "name", type: "String", reflect: true },
       value: { attribute: "value", type: "String", reflect: true },
     },
+    extend: (customElementConstructor) => {
+      return class extends customElementConstructor {
+        static formAssociated = true;
+        constructor() {
+          super();
+          this.attachedInternals = this.attachInternals();
+        }
+      };
+    },
   }}
 />
 
@@ -402,7 +412,7 @@
       id={id || name}
       role="textbox"
       aria-label={arialabel}
-      aria-labelledby={arialabelledby}
+      aria-labelledby={arialabelledby || undefined}
       aria-invalid={_error ? "true" : "false"}
       on:input={onInput}
       on:keyup={onKeyUp}
diff --git a/libs/web-components/src/components/radio-group/RadioGroup.svelte b/libs/web-components/src/components/radio-group/RadioGroup.svelte
index 2fa894e02..58af5ed02 100644
--- a/libs/web-components/src/components/radio-group/RadioGroup.svelte
+++ b/libs/web-components/src/components/radio-group/RadioGroup.svelte
@@ -1,10 +1,20 @@
 <svelte:options
   customElement={{
+    shadow: "open",
     tag: "goa-radio-group",
     props: {
       name: { reflect: true },
       value: { reflect: true },
     },
+    extend: (customElementConstructor) => {
+      return class extends customElementConstructor {
+        static formAssociated = true;
+        constructor() {
+          super();
+          this.attachedInternals = this.attachInternals();
+        }
+      };
+    },
   }}
 />
 
diff --git a/libs/web-components/src/components/radio-item/RadioItem.svelte b/libs/web-components/src/components/radio-item/RadioItem.svelte
index cc8b441af..e2e328a68 100644
--- a/libs/web-components/src/components/radio-item/RadioItem.svelte
+++ b/libs/web-components/src/components/radio-item/RadioItem.svelte
@@ -1,5 +1,6 @@
 <svelte:options
   customElement={{
+    shadow: "open",
     tag: "goa-radio-item",
     props: {
       name: { reflect: true },
@@ -11,6 +12,15 @@
       revealarialabel: { reflect: true },
       disabled: { reflect: true },
     },
+    extend: (customElementConstructor) => {
+      return class extends customElementConstructor {
+        static formAssociated = true;
+        constructor() {
+          super();
+          this.attachedInternals = this.attachInternals();
+        }
+      };
+    },
   }}
 />
 
@@ -242,7 +252,7 @@
       data-testid="radio-option-{value}"
       disabled={isDisabled}
       checked={isChecked}
-      aria-label={arialabel}
+      aria-label={arialabel || value}
       aria-describedby={$$slots.description || description
         ? `${name}-${value}-description`
         : undefined}

From 6b1d111ebf98e039df20db8b0701f2a5155402e8 Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Thu, 12 Feb 2026 12:02:58 -0700
Subject: [PATCH 10/13] passing

---
 .../src/components/form-item/FormItem.svelte  | 50 +++++++++++++------
 .../src/components/input/Input.svelte         |  2 +-
 2 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/libs/web-components/src/components/form-item/FormItem.svelte b/libs/web-components/src/components/form-item/FormItem.svelte
index bfb2cc53b..45673ecc7 100644
--- a/libs/web-components/src/components/form-item/FormItem.svelte
+++ b/libs/web-components/src/components/form-item/FormItem.svelte
@@ -1,6 +1,8 @@
-<svelte:options customElement={{
-  tag: "goa-form-item",
-}} />
+<svelte:options
+  customElement={{
+    tag: "goa-form-item",
+  }}
+/>
 
 <!-- Script -->
 <script lang="ts" context="module">
@@ -14,7 +16,6 @@
   import type { Spacing } from "../../common/styling";
   import { calculateMargin } from "../../common/styling";
   import {
-    receive,
     generateRandomId,
     typeValidator,
     announceToScreenReader,
@@ -81,7 +82,7 @@
 
   // Computed: Error icon size based on form item size
   // Compact: xsmall (16px), Regular/Large: small (18px)
-  $: errorIconSize = labelsize === 'compact' ? 'xsmall' : 'small';
+  $: errorIconSize = labelsize === "compact" ? "xsmall" : "small";
 
   onMount(() => {
     validateRequirementType(requirement);
@@ -126,7 +127,7 @@
 <!-- HTML -->
 <div
   class:v2={version === "2"}
-  class={`${labelsize}${type ? ' ' + type : ''}`}
+  class={`${labelsize}${type ? " " + type : ""}`}
   data-testid={testid}
   style={`
     ${calculateMargin(mt, mr, mb, ml)}
@@ -146,7 +147,7 @@
 
   <slot />
 
-  {#if ($$slots.error || error) || ($$slots.helptext || helptext)}
+  {#if $$slots.error || error || $$slots.helptext || helptext}
     <div class={`messages-container ${labelsize}`}>
       {#if $$slots.error || error}
         <div class="error-msg" id={_errorId} role="alert">
@@ -209,33 +210,51 @@
   /* V2: Size and input-type specific spacing */
 
   .large .messages-container {
-    margin-top: var(--goa-form-item-message-margin-top-large, var(--goa-form-item-message-margin-top, 0.75rem)); /* V2: 16px, V1: 12px */
+    margin-top: var(
+      --goa-form-item-message-margin-top-large,
+      var(--goa-form-item-message-margin-top, 0.75rem)
+    ); /* V2: 16px, V1: 12px */
   }
 
   .regular .messages-container {
-    margin-top: var(--goa-form-item-message-margin-top-regular, var(--goa-form-item-message-margin-top, 0.75rem)); /* V2: 12px, V1: 12px */
+    margin-top: var(
+      --goa-form-item-message-margin-top-regular,
+      var(--goa-form-item-message-margin-top, 0.75rem)
+    ); /* V2: 12px, V1: 12px */
   }
 
   /* V2 ONLY: Compact size messages container spacing */
   .v2.compact .messages-container {
-    margin-top: var(--goa-form-item-message-margin-top-compact, 0.5rem); /* V2: 8px */
+    margin-top: var(
+      --goa-form-item-message-margin-top-compact,
+      0.5rem
+    ); /* V2: 8px */
   }
 
   /* InputType overrides: checkbox-list, radio-group for adjusted sizing */
   .large.checkbox-list .messages-container,
   .large.radio-group .messages-container {
-    margin-top: var(--goa-form-item-message-margin-top-selection-large, var(--goa-form-item-message-margin-top, 0.75rem)); /* V2: 20px, V1: 12px */
+    margin-top: var(
+      --goa-form-item-message-margin-top-selection-large,
+      var(--goa-form-item-message-margin-top, 0.75rem)
+    ); /* V2: 20px, V1: 12px */
   }
 
   .regular.checkbox-list .messages-container,
   .regular.radio-group .messages-container {
-    margin-top: var(--goa-form-item-message-margin-top-selection-regular, var(--goa-form-item-message-margin-top, 0.75rem)); /* V2: 16px, V1: 12px */
+    margin-top: var(
+      --goa-form-item-message-margin-top-selection-regular,
+      var(--goa-form-item-message-margin-top, 0.75rem)
+    ); /* V2: 16px, V1: 12px */
   }
 
   /* V2 ONLY: Compact size inputType pattern overrides for adjusted sizing */
   .v2.compact.checkbox-list .messages-container,
   .v2.compact.radio-group .messages-container {
-    margin-top: var(--goa-form-item-message-margin-top-selection-compact, 0.75rem); /* V2: 12px */
+    margin-top: var(
+      --goa-form-item-message-margin-top-selection-compact,
+      0.75rem
+    ); /* V2: 12px */
   }
 
   /* V2: Flex layout for error + helper stacking */
@@ -282,7 +301,10 @@
   /* V1: Gap between error and helper when both present (sibling selector) */
   /* Uses space.xs (8px) for proper vertical stacking */
   .error-msg + .help-msg {
-    margin-top: var(--goa-form-item-message-stack-gap, var(--goa-space-xs, 0.5rem));
+    margin-top: var(
+      --goa-form-item-message-stack-gap,
+      var(--goa-space-xs, 0.5rem)
+    );
   }
 
   /* V2: Remove sibling margin (flex gap handles spacing) */
diff --git a/libs/web-components/src/components/input/Input.svelte b/libs/web-components/src/components/input/Input.svelte
index 8a6a70055..c09e9c404 100644
--- a/libs/web-components/src/components/input/Input.svelte
+++ b/libs/web-components/src/components/input/Input.svelte
@@ -411,7 +411,7 @@
       {maxlength}
       id={id || name}
       role="textbox"
-      aria-label={arialabel}
+      aria-label={arialabel || name}
       aria-labelledby={arialabelledby || undefined}
       aria-invalid={_error ? "true" : "false"}
       on:input={onInput}

From 41bc7c668fcabcb900e242a9528e1d2f119cb19d Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Fri, 13 Feb 2026 10:16:02 -0700
Subject: [PATCH 11/13] still failing

---
 .../specs/public-form.browser.spec.tsx        | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/libs/react-components/specs/public-form.browser.spec.tsx b/libs/react-components/specs/public-form.browser.spec.tsx
index b5dccf59f..895f5fb4e 100644
--- a/libs/react-components/specs/public-form.browser.spec.tsx
+++ b/libs/react-components/specs/public-form.browser.spec.tsx
@@ -202,8 +202,8 @@ function PublicFormTestComponent() {
         <GoabPublicFormPage id="role">
           <GoabFormItem helpText="some help text">
             <GoabRadioGroup name="role" data-pf-item="">
-              <GoabRadioItem value="Recipient" label="Recipient" />
-              <GoabRadioItem value="Payor" label="Payor" />
+              <GoabRadioItem value="Recipient" />
+              <GoabRadioItem value="Payor" />
             </GoabRadioGroup>
           </GoabFormItem>
         </GoabPublicFormPage>
@@ -263,19 +263,23 @@ function PublicFormTestComponent() {
 
 describe("PublicForm Browser Tests", () => {
 
-  it.only("should pass", async () => {
+  it("should pass", async () => {
     const { getByLabelText } = render(<>
       <goa-input arialabel="Full name" />
+      <goa-input name="nick-name" />
     </>);
 
     const name = getByLabelText("Full name");
+    const nickName = getByLabelText("nick-name");
+
     await vi.waitFor(() => {
       expect(name.length).toBe(1);
+      expect(nickName.length).toBe(1);
       // console.log(name.element());
     })
   })
 
-  it.only("initializes the form", async () => {
+  it("initializes the form", async () => {
     const { getByRole, getByLabelText } = render(<PublicFormTestComponent />);
 
     const roles = getByRole("radiogroup");
@@ -285,8 +289,10 @@ describe("PublicForm Browser Tests", () => {
     await vi.waitFor(() => {
       // on first page, so it should be visible
       expect(roles.length).toBe(1);
+
       // sin should not be visible yet
-      expect(sin.length).toBe(0);
+      expect(sin.length).toBe(1);
+      expect(sin).not.toBeVisible();
     });
   });
 
@@ -299,12 +305,15 @@ describe("PublicForm Browser Tests", () => {
     // Wait for radio items to be present
     await vi.waitFor( () => {
       expect(radios.length).toBe(2);
+      expect(receiverOption.length).toBe(1);
     });
 
-
+    // FAILS HERE
     // Select the Recipient radio button
-    // await userEvent.click(radios.elements()[0]);
+    // await userEvent.click(receiverOption.element());
+    // await radios.first().click();
     await receiverOption.click();
+    // await userEvent.click(receiverOption.element());
 
     // Click continue button
     const continueButton = getByRole("button").getByText("Continue");

From 4ce5b9362a91214bbcc90e266d6a892673d02218 Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Fri, 13 Feb 2026 13:37:54 -0700
Subject: [PATCH 12/13] updates

---
 apps/prs/web/src/routes/public-form.svelte | 2 ++
 vitest.config.mjs                          | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/prs/web/src/routes/public-form.svelte b/apps/prs/web/src/routes/public-form.svelte
index 1c53f9807..7c63f13c6 100644
--- a/apps/prs/web/src/routes/public-form.svelte
+++ b/apps/prs/web/src/routes/public-form.svelte
@@ -22,6 +22,8 @@
     return `${months[month - 1]} ${day}, ${year}`;
   }
 
+  // Normally we don't need to keep track of the state, unless we have a subform; to show the child
+  // items we need a reference to the state data
   let _state = undefined;
 
   const outline = {
diff --git a/vitest.config.mjs b/vitest.config.mjs
index ea1be387a..42328ac21 100644
--- a/vitest.config.mjs
+++ b/vitest.config.mjs
@@ -71,8 +71,8 @@ export default defineConfig({
             enabled: true,
             provider: playwright(),
             instances: [
-              { browser: "chromium" },
-              { browser: "firefox" },
+              { browser: "chromium", viewport: { width: 1280, height: 720 } },
+              { browser: "firefox", viewport: { width: 1280, height: 720 } },
             ]
           },
           server: {

From 82d4d6238778a59074eff3c828d57dfa17533109 Mon Sep 17 00:00:00 2001
From: Chris Olsen <olsen.chris@gmail.com>
Date: Wed, 18 Feb 2026 13:45:49 -0700
Subject: [PATCH 13/13] test still not passing

---
 .../specs/public-form.browser.spec.tsx                 | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/libs/react-components/specs/public-form.browser.spec.tsx b/libs/react-components/specs/public-form.browser.spec.tsx
index 895f5fb4e..9632b5281 100644
--- a/libs/react-components/specs/public-form.browser.spec.tsx
+++ b/libs/react-components/specs/public-form.browser.spec.tsx
@@ -297,7 +297,7 @@ describe("PublicForm Browser Tests", () => {
   });
 
   it.only("can select a radio button and continue to next page", async () => {
-    const { getByLabelText, getByRole } = render(<PublicFormTestComponent />);
+    const { getByLabelText, getByRole, getByText } = render(<PublicFormTestComponent />);
 
     const radios = getByRole("radio");
     const receiverOption = getByLabelText("Recipient");
@@ -308,18 +308,18 @@ describe("PublicForm Browser Tests", () => {
       expect(receiverOption.length).toBe(1);
     });
 
-    // FAILS HERE
+    // FAILS HERE: saying that it can't click it as it is not visible or not stable
     // Select the Recipient radio button
     // await userEvent.click(receiverOption.element());
     // await radios.first().click();
+    // await radios[0].click();
     await receiverOption.click();
-    // await userEvent.click(receiverOption.element());
 
     // Click continue button
-    const continueButton = getByRole("button").getByText("Continue");
+    const continueButton = getByRole("button").and(getByText("Continue"));
     await continueButton.click();
 
-    // Should navigate to children page (for Recipient role)
+    // // Should navigate to children page (for Recipient role)
     const nextHeader = getByText("Support order details");
     await vi.waitFor(() => {
       expect(nextHeader).toBeTruthy();