Vendor relative-time-element as local web component (#36853)

Replace the `@github/relative-time-element` npm dependency with a
vendored, simplified implementation.

- Support 24h format rendering [PR
329](https://github.com/github/relative-time-element/pull/329)
- Enable `::selection` styling in Firefox [PR
341](https://github.com/github/relative-time-element/pull/341)
- Remove timezone from tooltips (It's always local timezone)
- Clean up previous `title` workaround in tippy
- Remove unused features
- Use native `Intl.DurationFormat` with fallback for older browsers,
remove dead polyfill
- Add MIT license header to vendored file
- Add unit tests
- Add dedicated devtest page for all component variants

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Claude claude-opus-4-6 20250630 <noreply@anthropic.com>
This commit is contained in:
silverwind
2026-03-13 11:43:17 +01:00
committed by GitHub
parent 2601f50026
commit 28e09ffc67
12 changed files with 734 additions and 73 deletions
-20
View File
@@ -117,15 +117,6 @@
</overflow-menu>
</div>
<div>
<h1>Absolute Dates</h1>
<div><relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="numeric" month="short"></relative-time></div>
<div><relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="numeric" month="long"></relative-time></div>
<div><relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="" year="" day="numeric" month="numeric"></relative-time></div>
<div><relative-time datetime="2024-03-11" threshold="P0Y" prefix="" weekday="long" year="" month="numeric"></relative-time></div>
<div><relative-time datetime="2024-03-11T19:00:00-05:00" threshold="P0Y" prefix="" weekday="long" year="" month="numeric"></relative-time></div>
</div>
<div>
<h1>LocaleNumber</h1>
<div>{{ctx.Locale.PrettyNumber 1}}</div>
@@ -137,17 +128,6 @@
<div>{{ctx.Locale.PrettyNumber 1234567}}</div>
</div>
<div>
<h1>TimeSince</h1>
<div>Now: {{DateUtils.TimeSince .TimeNow}}</div>
<div>5s past: {{DateUtils.TimeSince .TimePast5s}}</div>
<div>5s future: {{DateUtils.TimeSince .TimeFuture5s}}</div>
<div>2m past: {{DateUtils.TimeSince .TimePast2m}}</div>
<div>2m future: {{DateUtils.TimeSince .TimeFuture2m}}</div>
<div>1y past: {{DateUtils.TimeSince .TimePast1y}}</div>
<div>1y future: {{DateUtils.TimeSince .TimeFuture1y}}</div>
</div>
<div>
<h1>SVG alignment</h1>