[Goldloli]

Fixes #383

Description

A ticking format="duration" / format="elapsed" element visibly jumps around as it counts, because proportional digits change width between ticks. The rendered span[part="root"] now gets font-variant-numeric: tabular-nums for those two formats, following the write-skipping pattern of #updateRenderRootContent — the inline style is only written when its value actually changes, so the periodic-tick fast path is untouched.

• Other formats get no inline style at all, exactly as before.
• The default stays overridable: ::part(root) { font-variant-numeric: normal !important } (an author !important rule beats a non-important inline style).

Of the two shapes discussed in the issue (document a user-side rule vs make it the default), this makes it the default for the ticking formats only — the timer jumping is visible out of the box, while date/relative typography is unchanged.

Verification

• npx web-test-runner — 640 passed, 0 failed, including two new tests: one asserts duration and elapsed render with tabular-nums and another asserts other formats get no inline numeric styling; without the change the first fails with expected '' to equal 'tabular-nums'
• npx tsc --noEmit and npx eslint src/relative-time-element.ts test/relative-time.js — clean

[Copilot]

🟡 Changes recommended

The test only covers a fresh auto element, so stale tabular-nums styling after format changes or accidental styling of micro can go undetected.

1 open issue

• Test numeric styling cleanup when formats change · New

What changed in this PR

Addresses #383 by using tabular numerals for ticking duration and elapsed displays, reducing width changes between ticks while leaving other formats’ typography unchanged.

Changes:

• Applies numeric styling to span[part="root"], skipping redundant style writes.
• Adds tests for tabular timer rendering and the default format’s lack of inline numeric styling.

File	Description
test/​relative-time.js	Adds assertions for timer and default-format numeric styling.
src/​relative-time-element.ts	Applies or clears tabular numeral styling based on the selected format.

_{Review effort: Max}

[Goldloli]

Good point — the clearing path was untested. Added in 46fd2a1: a test that renders duration, then switches the same element to auto and asserts the reused span drops tabular-nums. (micro resolves through the same non-duration path, so it is covered by the same branch.) Full suite: 641 passed locally.

[Copilot]

🔵 Needs a closer look

The inline numeric styling overrides inherited font features for duration and elapsed, but the README does not document the new default or how to opt out.

1 open issue

• Test numeric styling cleanup when formats change

1 previously missed issue

In code that hasn't changed since last review

Document numeric font variant defaults and opt-out

src/​relative-time-element.ts:434

For duration and elapsed, this inline value replaces inherited font-variant-numeric, so existing host or ancestor rules lose features such as oldstyle-nums and slashed-zero. The README's Styling section does not explain this change. Please document the new default and show relative-time::part(root) { font-variant-numeric: normal !important; } as an opt-out.

_{Review effort: Max}

[Goldloli]

The build failure was the repo-wide Playwright/Ubuntu 26.04 incompatibility that #394 fixed on main, so I rebased onto main (bfb5b26) — the new runs just need a workflow approval.

I also added a short README section documenting the tabular-numerals default for duration/elapsed and the ::part(root) opt-out, per the review suggestion. npm run lint (tsc + eslint) passes locally.

[Copilot]

🟢 Approval recommended

No active review issues are reported for the tabular-numeral styling change that reduces width shifts in ticking relative-time displays.

1 open issue

• Test numeric styling cleanup when formats change

_{Review effort: Max}