fix(a11y): accommodate text-spacing overrides on Badge and Chip (WCAG 1.4.12)

[bilal-karim]

Summary

Two same-family fixes for SC 1.4.12 Text Spacing on display: flex primitives. WCAG requires user-applied text-spacing overrides (line-height 1.5, letter-spacing 0.12em, word-spacing 0.16em) to not cause content loss.

• Badge (src/lib/holocene/badge.svelte): leading-4 (16px) → leading-[1.5]. text-sm at 1.5 line-height is 21px which previously clipped against the fixed 16px line-height.
• Chip (src/lib/holocene/chip.svelte): h-7 → min-h-7, add leading-[1.5]. Preserves the 28px visual minimum but allows growth.

Note on the table-row change

An earlier version of this PR also touched <tr> height in src/lib/holocene/table/table.svelte (h-8 → min-h-8). @Alex-Tideman caught that this didn't work: <tr> uses CSS table-row layout rules where the height property already behaves as a minimum (the row grows to fit cell content). min-height on <tr> is either ignored or behaves differently per browser, which broke SkeletonTable rendering. Verified empirically with the WCAG text-spacing override applied to the workflows table — the existing h-8 rows accommodate the larger line-height without clipping (rows measure ~36px due to borders; 21px content fits comfortably).

Reverted the table-row change in a follow-up commit; this PR now contains only the Badge and Chip fixes.

Audit context

• WCAG 2.2 SC 1.4.12 Text Spacing (Level AA) — Moderate severity each. Conditional-on-verification fixes.
• Issue files: audit-output/issues/1.4.12-{badge-line-height,chip-height}.md.
• 1.4.12-table-cell-height.md has been left for a separate update to the audit doc — the predicted clipping doesn't manifest in practice because of CSS table-row semantics.

Test plan

Verification bookmarklet (or paste in DevTools console):

var s=document.createElement('style');s.innerHTML='*{line-height:1.5 !important;letter-spacing:0.12em !important;word-spacing:0.16em !important;}p{margin-bottom:2em !important;}';document.head.appendChild(s);

• Default zoom unchanged: each surface looks the same as before at 100%.
• Workflow list badges: apply override, status badges grow slightly taller, no clipped text.
• Filter dropdown chips + search-attribute input chips: chips grow vertically without overlapping the input field; flex-wrap containers reflow.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	May 22, 2026 2:18pm

[Alex-Tideman]

Table row (src/lib/holocene/table/table.svelte): h-8 → min-h-8. The densest text-bearing surface in the product (every data table). Preserves the 32px default but allows growth under user override.

This isn't true with table rows

h-8 /* height: 2rem; /
min-h-8 / min-height: 2rem; */

For normal block elements, that often feels similar. But uses table layout rules. The browser calculates row height from the row’s cells and their content. An explicit height on the row participates in that calculation; min-height on a table row is either ignored or not used the same way. We'll want to update Skeleton row styles too.

[bilal-karim]

Thanks for flagging this @Alex-Tideman. I reverted the table change after some further investigation. The table row's height property already behaves like a minimum, just like you flagged. No need for additional modifications. Given that it's removed, I don't think we need to update the skeleton anymore.