WEBDEV-9054: Migrate the donation form elements and controller into elements

[jbuckner]

WEBDEV-9054. Stacked on #103. Last of the five in WEBDEV-8602.

Everything left in donation-form: the form, controller, header, summary, total amount, badged input, payment selector and contact form as ia-donation-* elements, the three modal contents, and the payment flow handlers with the donation flow modal manager. It all lands under src/elements/ia-donation-form/. The icon-* packages become SVGs (masked for the monochrome ones, plain <img> for the brand logos). The controller gets a story against the Braintree sandbox, with a demo endpoint manager, an analytics readout and buttons to pop the upsell and confirmation modals. The story renders in the light DOM (Braintree and PayPal find their containers with document.querySelector) and only loads the third-party scripts after you press "Connect to the sandbox", so the all-elements demo page and app-root.test.ts don't reach out to Braintree, PayPal, Google or reCAPTCHA on their own.

What changed beyond the move:

• The PayPal cover is a <button>. It was a <div> with a click handler, so it had no keyboard access or accessible name. It has an aria-label like the other provider buttons now, and the brand logos carry alt text.
• The controller keeps a paymentClients you hand it. It built its own on every environment change, replacing yours if environment landed in a later update. It only rebuilds the set it created itself now.
• The form has a default donationInfo. Without one the header's edit-donation element threw on render. It uses the same default selection as the controller.
• The PayPal cover stays put after you press it. With the cover now a <button>, the "collapse the other providers" rule caught it too, so one press with a bad amount hid the cover and the next click reached PayPal's real button. The rule only collapses the provider buttons now, with a test.
• The upsell thank-you fires once. showThankYouModal logged Donated-X-upsell and called donationSuccessful twice on the upsell path. Once now.
• The card fields actually hide. The credit card container had two class attributes, so the hidden one was dropped by the parser.
• Small fixes: TYD is TWD in the currency symbols, the confirm modal's currencyType defaults to USD rather than $, and a Google Pay billing name is trimmed before the first/last split so the surname doesn't keep a leading space.
• The credit card form is reworked to match iaux-donation-form#190. The card fields are their own ia-donation-credit-card-fields element and sit under the payment selector, with the card number focused when you pick Credit Card. The contact form has visible labels and no placeholders, no Address Line 2, first and last name on one row, and country above state and zip. An empty card field isn't marked red on blur. The contact section is titled "Enter contact information". The unused email, user and locale pin icons are gone.
• The PayPal button render reads window.paypal.FUNDING defensively. Only the Venmo exclusion needs it, and the script isn't there in tests.
• Theming variables are --ia-donation-form-* (text, background, badge, payment option and selected option colors, donate button, base font size). The base font size flows down from the form's host to the section and edit elements.
• Analytics goes through AnalyticsManagerInterface from @internetarchive/analytics-manager, and the modals through @internetarchive/modal-manager. Both are regular dependencies, as decided for the stack.

Tests moved from web-test-runner to Vitest, 131 of them, with a test-mock-modal-manager element and mock flow handlers under test-helpers/. Two contact form tests now assert what the browser actually does on reportValidity(): it focuses the first invalid field, and focusing a field clears its error mark.

Verified locally: build, full suite 1248 passing, eslint and prettier clean, no circular dependencies.

🤖 Generated with Claude Code

https://claude.ai/code/session_01QnX6VHo3EJRzcKfhzBChCf

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://internetarchive.github.io/elements/pr/pr-105/
Built to branch ghpages at 2026-10-12 21:37 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[codecov-commenter]

Codecov Report

❌ Patch coverage is 64.34109% with 322 lines in your changes missing coverage. Please review.
✅ Project coverage is 86.36%. Comparing base (08d480a) to head (4e06140).

Files with missing lines	Patch %	Lines
src/elements/ia-donation-form/ia-donation-form.ts	58.44%	49 Missing and 15 partials ⚠️
...form/flow-handlers/handlers/paypal-flow-handler.ts	11.29%	53 Missing and 2 partials ⚠️
...ts/ia-donation-form/ia-donation-form-controller.ts	77.53%	23 Missing and 8 partials ⚠️
...rm/test-helpers/mock-flow-handlers.test-helpers.ts	43.18%	25 Missing ⚠️
...m/flow-handlers/handlers/apple-pay-flow-handler.ts	0.00%	24 Missing ⚠️
...-form/flow-handlers/handlers/venmo-flow-handler.ts	20.68%	22 Missing and 1 partial ⚠️
.../flow-handlers/handlers/google-pay-flow-handler.ts	15.38%	22 Missing ⚠️
...-donation-form/modals/ia-donation-confirm-modal.ts	46.15%	20 Missing and 1 partial ⚠️
...-form/flow-handlers/donation-flow-modal-manager.ts	71.87%	17 Missing and 1 partial ⚠️
...flow-handlers/handlers/credit-card-flow-handler.ts	63.04%	16 Missing and 1 partial ⚠️
... and 7 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #105      +/-   ##
==========================================
- Coverage   90.94%   86.36%   -4.58%     
==========================================
  Files         118      143      +25     
  Lines        4107     5010     +903     
  Branches      904     1037     +133     
==========================================
+ Hits         3735     4327     +592     
- Misses        171      446     +275     
- Partials      201      237      +36     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.