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 $, the hosted field placeholders go through msg(), and a Google Pay billing name is trimmed before the first/last split so the surname doesn't keep a leading space.
• 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, 109 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 900 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-09-15 06:35 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[codecov-commenter]

Codecov Report

❌ Patch coverage is 62.27795% with 361 lines in your changes missing coverage. Please review.
✅ Project coverage is 82.06%. Comparing base (ff43adc) to head (f1d3216).

Files with missing lines	Patch %	Lines
src/elements/ia-donation-form/ia-donation-form.ts	57.61%	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	78.01%	23 Missing and 8 partials ⚠️
...donation-form/ia-donation-form-controller-story.ts	46.42%	24 Missing and 6 partials ⚠️
...flow-handlers/handlers/credit-card-flow-handler.ts	43.47%	25 Missing and 1 partial ⚠️
...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 ⚠️
... and 8 more

Additional details and impacted files

@@                          Coverage Diff                          @@
##           WEBDEV-9053-migrate-payment-layer     #105      +/-   ##
=====================================================================
- Coverage                              87.86%   82.06%   -5.80%     
=====================================================================
  Files                                    100      125      +25     
  Lines                                   3114     4071     +957     
  Branches                                 611      755     +144     
=====================================================================
+ Hits                                    2736     3341     +605     
- Misses                                   212      522     +310     
- Partials                                 166      208      +42     

☔ 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.