Update VCP to v3.3.1, split calendar/datepicker components

[mdo]

• Bump vanilla-calendar-pro to v3.2.0 in package.json, the lockfile, and the CDN URL in config.yml
• Put the column grid on the new month and year row elements. VCP 3.2.0 wraps months and years in row and cell elements to fix their ARIA grid structure, which moves the grid off the container and collapses both views to three rows
• Split the calendar grid out of _datepicker.scss into a new scss/_calendar.scss with its own token map. The datepicker now layers the popup surface onto a bare calendar, instead of inline calendars undoing the popup styling
• Style a calendar with the --calendar-* tokens and the popup with the --datepicker-* tokens. The popup passes its padding down through --calendar-padding
• Add a Calendar docs page and its sidebar entry. It points at the datepicker for options, methods, and events, because the calendar has no JavaScript of its own
• Document the token split and the Shadow DOM caveats on the Datepicker page
• Add unit tests that pin the month and year markup and the data-vc-input popup/inline distinction, because this regression was invisible to the suite
• Add inline calendar coverage to the datepicker visual test

Fixes #42836

[coliff]

PREVIEW: https://deploy-preview-42856--twbs-bootstrap.netlify.app/docs/6.0/components/calendar/

[julien-deramond]

Based on #42836 (comment), we can directly bump to 3.3.1 in this PR.

[julien-deramond]

I bumped Vanilla Calendar Pro to v3.3.1 in 088a346.

I checked the release notes and moved the dependency to v3.3.1 instead. There is no separate v3.3.0 GitHub release — npm published it, but v3.3.1 is the next tagged release after v3.2.0.

What v3.3.1 changes upstream

• New animation option (off by default): sliding arrows, cross-fading view switches, curved collapse.
• New type: 'week' view, with enableSwipe (pointer paging) and enableCollapse (fold a month to its selected week).
• An accessibility pass across nearly every rendered element: role="application" → role="group" (or role="dialog" in inputMode), tabindex 0 → -1, aria-selected moved from the date button onto the [data-vc-date] gridcell, single tab stop with arrow-key navigation, role="toolbar" → role="group" in headers.
• Partial ARIA label overrides for labels.arrowNext / labels.arrowPrev.

None of this changes Vanilla Calendar Pro's public JS API.

Bundle size

The bundle build inlines Vanilla Calendar Pro, and v3.3.1 bundles the new animation/week/swipe/collapse code into bootstrap.bundle.min.js even though Bootstrap's datepicker doesn't turn those features on by default. Gzipped size went from 55.75 kB (v3.2.0) to 61.32 kB. I raised the .bundlewatch.config.json budget for bootstrap.bundle.min.js from 56.0 kB to 62.0 kB to match, with a little headroom. The standalone (non-bundle) bootstrap.js / bootstrap.min.js builds are unaffected, since they don't inline the peer dependency.

Code fix: vcpOptions.type was silently ignored

js/src/datepicker.ts always set VCP's type option itself, based on displayMonthsCount, after spreading in vcpOptions. That meant vcpOptions: { type: 'week' } (the new week view) was silently overwritten back to 'default' — the new view was unreachable through Bootstrap's API. Fixed so vcpOptions.type wins whenever displayMonthsCount is 1; displayMonthsCount > 1 still forces VCP's required 'multiple' type, since VCP doesn't support multiple months of a week view. Added three unit tests covering the default, the override, and the multi-month precedence.

Bug fix: animation ghost calendar showing through (Firefox report)

With the new animation option on, VCP clips the outgoing month/week ([data-vc-clip]) and layers a [data-vc-ghost] clone of it on top while the incoming view slides or fades in. Bootstrap writes its own CSS from scratch against VCP's data-vc-* attributes instead of importing VCP's stylesheet, and these two attributes are new in v3.3.1 — Bootstrap never styled them. Without position and overflow: clip, the ghost clone stayed in normal document flow instead of being clipped and absolutely positioned, so the outgoing calendar showed through underneath the live one during the transition — the glitch seen on Firefox/macOS. Added [data-vc-clip], [data-vc-ghost], and [data-vc-collapsing] rules to scss/_calendar.scss (the third for the "Collapse to a week" example, which shares the same clipping mechanism and had the identical gap). Verified via computed styles after triggering a real transition: [data-vc-clip] is position: relative; overflow: clip, [data-vc-ghost] is position: absolute; overflow: clip, matching VCP's own reference CSS exactly.

Docs updates

• site/src/content/docs/components/calendar.mdx: the Accessibility section described VCP's ARIA markup in general terms only. Updated it to name the actual v3.3.1 behavior: role="group" on the calendar root, and a single-tab-stop date grid with arrow-key navigation (previously every date was individually tabbable).
• site/src/content/docs/forms/datepicker.mdx: added four new live examples for features that are new in v3.3.1 and reachable today through vcpOptions with no further code changes — Week view, Animated transitions, Swipe navigation, and Collapse to a week. Also added a short note under Advanced configuration explaining that displayMonthsCount > 1 takes priority over vcpOptions.type.
  • @mdo, feel free to remove all of them, or part of them if irrelevant.

[julien-deramond]

Edit: Fixed via c771522 by caching the ancestor on first lookup (which happens before VCP writes the attribute), so the observer always watches the real ancestor.

---

Issue found while testing the deployed version.

If you load the website in light mode:

Then switch dynamically to dark mode:

The UI is rendered incorrectly.

If you perform a hard refresh, everything goes back to normal.

The same issue occurs in the opposite direction: if you start in dark mode and dynamically switch to light mode, the UI is also rendered incorrectly until you hard refresh.