[khoinguyenpham04]

Refreshes DatePicker's styling with Kumo tokens. It keeps the component's layout model from early feedback: no internal padding, so the container sets the spacing, and the previous and next buttons grouped together at the end of the header.

Before and after

Current	Suggested

Month and year dropdowns (captionLayout="dropdown"), now styled:

Changes

• DatePicker's styles live in date-picker.tsx as Kumo token classes on each react-day-picker part, so it follows the active theme, FedRAMP included. The .rdp-* block in kumo.css is removed.
• The month-change animations move to kumo-binding.css, so kumo-standalone.css now includes DatePicker styles and animations too. They respect prefers-reduced-motion.
• Days are 32px squares in 36px columns with 8px between weeks and 14px text. The previous and next buttons are borderless squares that match the days.
• Two-month views sit side by side, and range bands are rounded at their ends and where weeks wrap.
• Month and year dropdowns are styled, and the arrows flip in RTL.
• Minor changeset: anyone customizing DatePicker through .rdp-* rules or --rdp-* variables would move to the classNames prop.

Docs

• The inline examples set their own spacing with className="p-3", the same way an app would.
• A new example shows the month and year dropdowns, and the presets example now highlights the active preset.
• The docs site's prose table styles no longer apply inside demos, where they made DatePicker's weekday row bold. Tables in other demos, like the Popover and Table examples, now use their own header styles too. This is in its own commit.

Testing

• Unit tests: 1513/1513 pass, including new tests for padding and the single, range and today states.
• Browser tests for DatePicker and Popover: 32/32 pass. One existing assertion now checks the range endpoint fill on the day button, where it lives now.
• tsc, vp lint and vp fmt --check are clean.
• Checked on the docs site in light and dark mode: single, multiple, range, presets, disabled dates with a footer, dropdowns, keyboard focus, and month navigation with and without reduced motion.

---

• Reviews
  • bonk has reviewed the change
  • automated review not possible because: this PR is opened from a fork, and the bonk review workflow only runs on same-repo PRs
• Tests
  • Tests included/updated
  • Automated tests not possible - manual testing has been completed as follows:
  • Additional testing not necessary because:

[clanky-the-clanker]

This pull request was not reviewed automatically because its author does not have write access to this repository. A maintainer with write access can start a review by commenting clanky review (or clanker review or @clanky-the-clanker review), optionally followed by instructions (e.g. clanky review focus on the retry logic).

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@900

commit: b12cce8

[github-actions]

Visual contracts

Linux Chromium references exercised by the PR's visual-contracts job.

1 curated contract

truncating text trigger