fix(text-field): floated label position + visual regression suite + CI split

[kelsos]

Summary

Three logically distinct changes, one PR:

1. fix(text-field): correct floated label position with prepend / dense (e21f3bb) — fixes long-standing CSS positioning bugs surfaced visually during a manual review of RuiTextField.
2. test(visual): add Playwright visual regression suite for RuiTextField (5090f59) — pixel-level guard against the class of bug we just fixed (CSS-only regressions that DOM tests can't catch).
3. ci: split into parallel jobs for faster feedback (bd0d187) — wall-time on PRs drops by exposing the test halves in parallel.

What's broken (and now fixed)

In the floated state, RuiTextField's label was misaligned across the cross-product of {default, filled, outlined} × {normal, dense} × {with prepend}. Concretely:

• Outlined + dense + prepend: label sat below the fieldset border, over the prepend icon.
• Default + dense: label overlapped the input text in the compact row.
• All variants + prepend: floated label landed under the icon's trailing padding instead of aligned with the input column (composable was measuring contentRect.width + left and silently dropping padding-right).
• Outlined + dense + active: leading-[2.5] from the dense compound was overriding the active slot's leading-tight, inflating the label line-box from 15px → 30px.

Root causes — three in text-field-styles.ts, one in use-prepend-append-width.ts — see commit e21f3bb for details.

Visual regression infrastructure

New suite under apps/example/e2e/visual/ driven by Playwright toHaveScreenshot. Snapshot portability is the hard part of pixel testing — solved by pinning Playwright's official Docker image (mcr.microsoft.com/playwright:v1.59.1-noble) for both contributor runs and CI. Without the pin, snapshots captured locally and on CI diverge by a handful of antialiasing pixels and every run fails.

apps/example/
  e2e/visual/                            # specs + per-spec snapshots
    _setup.ts                            # disable animations, wait for fonts
    text-field.visual.spec.ts            # 3×2×2 matrix × 3 states = 36 cells
  src/
    pages/visual/text-field.vue          # /visual/text-field route
    views/visual/
      VisualGrid.vue                     # generic matrix-cell renderer
      TextFieldFixture.vue               # feeds VisualGrid with the matrix
  scripts/visual-docker.sh               # docker run wrapper

Local workflow:

• pnpm test:visual — verify against committed baselines
• pnpm test:visual:update — regenerate baselines

Both wrap scripts/visual-docker.sh which bind-mounts the repo, anonymous-volumes each node_modules/, and runs corepack + pnpm install + build + playwright inside the container.

testIgnore: '**/visual/**' (gated on PLAYWRIGHT_VISUAL=1) keeps the existing behavioural pnpm test:e2e run unchanged — visual specs only execute when the dedicated scripts opt in.

CI split

Replace the single serial ci job with seven jobs running fully in parallel:

commit-lint │ validate │ unit ──┐                  ┌── e2e ×2 shards
                                ├─→ coverage      │
                       storybook ┘                  └── visual

• validate — install + lint + example-app typecheck. (Library typecheck is implicit in build:types in every other job, no need to repeat here.)
• unit — vitest unit tests, uploads coverage as artefact.
• storybook — split off so the storybook build (~30-60s) and its Playwright run parallelise with vitest instead of stacking serially. Uploads coverage artefact.
• coverage — needs: [unit, storybook]. Downloads both blobs, merges, forwards to codecov.
• e2e — sharded ×2 via Playwright's --shard flag with a matrix strategy. fail-fast: false so one shard's failure doesn't cancel the other.
• visual — Playwright Docker image as container:.

Total compute rises by ~4-5 min per run because each parallel job re-runs pnpm install and the library build. That's free on OSS runners and the wall-time cut shows up in every PR review cycle.

Test plan

• pnpm test:visual — 36/36 pass, captured in pinned container
• pnpm typecheck — passes
• pnpm run lint — passes (84 pre-existing warnings, 0 errors)
• Existing behavioural pnpm test:e2e — passes, doesn't pick up visual specs
• All 36 snapshots reviewed by hand for visual correctness across the matrix
• CI passes after push (will surface here)

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.83%. Comparing base (58d8ba6) to head (bd0d187).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #530      +/-   ##
==========================================
- Coverage   84.83%   84.83%   -0.01%     
==========================================
  Files         145      145              
  Lines        5269     5267       -2     
  Branches     1577     1577              
==========================================
- Hits         4470     4468       -2     
  Misses        799      799              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.