Migrate to Arizona Bootstrap 5

[NoisyFlowers]

Summary

We are currently pinned to arizona-bootstrap v2.0.18 (commit
350041a0…), the last Bootstrap 4–era release of the UA design system.
Upstream has moved to a Bootstrap 5 base (v5.1.3+). To unpin and track
current Arizona Bootstrap, the application markup needs to be migrated
from Bootstrap 4 to Bootstrap 5.

This issue tracks that migration. Stub proposal lives at
openspec/changes/migrate-az-bootstrap-5/proposal.md.

Why now? (Or, why not yet)

The pin in # restored function but locks us out of
forward UA design-system updates. Sooner or later we'll want new branding
or a security fix from upstream, and we won't be able to take it without
this migration.

Not urgent, but the longer it sits, the more drift accumulates upstream.

Goal

Migrate JSX from Bootstrap 4 to Bootstrap 5 conventions. Re-pin
arizona-bootstrap to a specific BS5-era SHA after the migration lands.
Do not leave the dep unpinned.

Scope (sketch — refine when picking this up)

Data-attribute sweep

• data-toggle → data-bs-toggle
• data-target → data-bs-target
• data-dismiss → data-bs-dismiss

Known sites:

• src/pages/Layout.js:30 (mobile nav toggler)
• src/components/container/Search.js:148 (advanced-filters expand)
• Any modal/alert dismiss buttons

Close-button markup

Replace BS4 close-button pattern:

<button class="close" ...>
  <span aria-hidden="true">&times;</span>                                          
</button>

with BS5:

<button class="btn-close" aria-label="Close"></button>

Known sites: src/pages/Layout.js:74, 88 (info bubbles).

Utility-class renames

Audit for these BS4→BS5 changes (non-exhaustive):

• ml-* / mr-* → ms-* / me-* (logical-property margin/padding)
• pl-* / pr-* → ps-* / pe-*
• .form-row removed → use .row with gutter utilities
• .custom-control, .custom-checkbox, .custom-radio → collapsed into
  .form-check
• .custom-select → .form-select
• .custom-file → .form-control with type=file
• .btn-block → .d-grid wrapper or .w-100
• .jumbotron removed → rebuild with utilities
• .media object removed → flex utilities
• .badge-* color modifiers → .bg-*
• .text-left / .text-right → .text-start / .text-end
• .float-left / .float-right → .float-start / .float-end

Component audits

Re-verify after migration:

• Search form expand/collapse (advanced filters)
• Mobile nav hamburger toggler
• Info bubbles / announcement banners
• Map controls and any Leaflet popups (CSS specificity changes)
• Pagination
• Forms (inputs, selects, file inputs, validation states)
• Any modals we add later

Dependency / import changes

• Confirm whether arizona-bootstrap 5.x ships its own JS bundle or
  expects vanilla bootstrap. The current import (import 'arizona-bootstrap'
  in src/App.js) may need to change.
• BS4 used popper.js; BS5 uses @popperjs/core. Check if the bundle
  pulls in Popper or if we need it as a peer dep for any future
  tooltips/popovers/dropdowns.
• After migration, re-pin to a specific BS5-era SHA in
  azlibrary_react/package.json.

Non-goals

• No functional changes to search, mapping, or API behavior.
• No design refresh beyond what BS5 + UA theme produces by default.
• Not bundling unrelated dep upgrades into this migration.

References

• Bootstrap 5 migration guide: https://getbootstrap.com/docs/5.0/migration/
• arizona-bootstrap repo: https://github.com/az-digital/arizona-bootstrap
• Stub proposal: openspec/changes/migrate-az-bootstrap-5/proposal.md
• Triggering pin commit: b1e6a12

Done when

• All data-toggle / data-target / data-dismiss attributes
  migrated to data-bs-* equivalents.
• Close-button markup updated to .btn-close.
• Utility-class sweep completed.
• Manual verification of every interactive component listed above.
• arizona-bootstrap re-pinned to a specific BS5-era SHA.
• Stub proposal archived (or updated and archived) per the OpenSpec
  workflow.

---

Replace # with the number of the pin issue once you've filed
it. Let me know if you want either tightened or expanded.