feat(popup): fade the panel in, the way Menu already animates

[mrholek]

Follow-up to #697. Raising the Firefox floor to 129 bought @starting-style for exactly one component — Menu, which inherited it with the port. Meanwhile .popup, the shared chrome behind six components' panels, had no transition at all: a date picker snapped open next to a menu that glided.

@include transition(
  opacity var(--#{$prefix}popup-transition-duration) var(--#{$prefix}popup-transition-timing),
  display var(--#{$prefix}popup-transition-duration) allow-discrete
);

&.show { display: block; opacity: 1; }

@starting-style { .popup.show { opacity: 0; } }

All three parts are load-bearing: allow-discrete makes display animatable, @starting-style supplies the state to animate from (the element does not exist to be styled before it is shown), and opacity carries the motion. Duration and easing are tokens.

No scale, deliberately

The first attempt scaled from .98, mirroring Menu. mrholek caught it immediately: the pickers popped, the combobox did not. Menu keys transform-origin off data-coreui-placement; a popup carries no such attribute, so any origin is wrong half the time — above the field, or in RTL. And on a panel the size of a calendar even 2% reads as a jump rather than an appearance. The combobox list is small enough to hide it; the pickers are not.

Verification

The visual suite cannot see this: it freezes transitions on purpose, so a screenshot proves nothing about motion. Sampling computed style through the transition instead:

~0ms    display=block  opacity=0.00   ← the @starting-style state
~60ms   display=block  opacity=0.91   ← genuinely interpolating
~300ms  display=block  opacity=1.00   ← settled

prefers-reduced-motion is handled by our transition() mixin, which emits transition: none under it.

One harness change, and why

A fading panel is composited, and a composited layer rasterises text differently enough between frames to move ~3% of pixels — enough to trip a comparator configured with includeAA: true. That setting is not negotiable: it is what catches an adornment icon changing colour, which was itself a bug found by this suite.

So the three popup screenshots get a larger allowance, passed per call rather than globally, with the reason in the code. Everything else keeps the tight one. Verified stable across three consecutive runs.

shoot() also waits two frames before capturing now, which is correct regardless.

[coveralls]

Coverage Report for CI Build 30948255948

Coverage decreased (-0.002%) to 92.963%

Details

• Coverage decreased (-0.002%) from the base build.
• Patch coverage: 2 of 2 lines across 1 file are fully covered (100%).
• No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

---

Coverage Stats

Relevant Lines:	8667
Covered Lines:	8271
Line Coverage:	95.43%
Relevant Branches:	4819
Covered Branches:	4266
Branch Coverage:	88.52%
Branches in Coverage %:	Yes
Coverage Strength:	362.74 hits per line

---

💛 - Coveralls