CORE-2901: Add an indeterminate state to Checkbox

[RoyEJohnson]

Jira: CORE-2901

This is the first of several small PRs for CORE-2901; the plan is on the ticket. It adds the
Checkbox piece that the Assignable fix needs. Nothing in assignments changes here.

Why

A checkbox that summarises a set of others, like a group's checkbox above its items, can only
be checked or unchecked. When some items are chosen and some are not, assistive tech announces
a fully checked box (WCAG 4.1.2, Name, Role, Value). assignments' ActivityGroup has this
problem: its checkbox is checked as soon as any one item is selected.

What changes

Checkbox takes a new indeterminate prop.

• It sets the input's indeterminate property, which browsers expose as the "mixed" state.
  There is no aria-checked to keep in sync.
• It draws a dash in place of the checkmark, with a colour for each variant. It reuses the
  --checkbox-indeterminate-bg and --checkbox-indeterminate-icon variables that
  TreeCheckbox already sets, and the existing dash icon.
• It does not change checked. The parent decides what a click on a mixed box does;
  selecting everything is what a native checkbox does.
• A disabled indeterminate checkbox draws no dash, the same as a disabled checked one.
• The property is reapplied after every render, because the browser clears it when the box
  is clicked. The prop stays the source of truth.

The variables are only set when indeterminate is true, so no existing snapshot changes.

Tests

New tests in Checkbox.spec.tsx check that:

• the box is not indeterminate by default,
• indeterminate leaves checked alone,
• the property follows the prop in both directions,
• it is restored after the browser clears it on a click,
• each variant draws a dash, and a disabled one does not.

Making the effect run only when the prop changes fails the click test, and removing the dash
variable fails the variant tests. There are also two new stories: Indeterminate for every
variant and size, and ParentOfOptions, a parent that is mixed while only some options are
chosen.

I checked both stories in Chrome. The dash looks right for each variant and size. In
ParentOfOptions, clicking the mixed parent selects all, clicking it again clears all, and
picking one option returns it to mixed.

Before merging

• Bump the version. package.json is at 1.24.3. This is a new prop, so a minor release.
  CORE-2871: Make the TooltipGroup trigger a button that does something #161 and CORE-2875: Stop rendering menu popovers as dialogs #162 also bump to 1.25.0, so whichever of the three merges later needs a new number.

Next

The assignments PR that uses this (ActivityGroup showing the mixed state) needs a release
that includes this change.

🤖 Generated with Claude Code

[Copilot]

🟢 Approval recommended

The reviewed changes include comprehensive behavior, styling, and regression coverage with no unresolved blocking issues.

0 open findings

🧠 Review effort: Lite

[Dantemss]

The indeterminate situation is crazy 😂

See the comment below about the checkbox's state potentially flashing but otherwise it seems fine. Well, as fine as this weird prop can be I guess.

[Dantemss]

Apparently this might have to be a useLayoutEffect to prevent the checkbox state flashing.

[RoyEJohnson]

Done in 4eddd79. The effect is now a layout effect, so the property is set before paint. It falls back to useEffect when there is no window, because React warns about useLayoutEffect during server rendering.