Vendor relative-time-element as local web component

package.json

@@ -12,7 +12,6 @@
     "@citation-js/plugin-software-formats": "0.6.2",
     "@github/markdown-toolbar-element": "2.2.3",
     "@github/paste-markdown": "1.5.3",
-    "@github/relative-time-element": "5.0.0",
     "@github/text-expander-element": "2.9.4",
     "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
     "@mermaid-js/layout-elk": "0.2.0",

web_src/css/base.css

@@ -238,7 +238,8 @@ progress::-moz-progress-bar {
   background: var(--color-hover);
 }
 
-::selection {
+::selection,
+relative-time::part(root)::selection {
   background: var(--color-primary-light-1);
   color: var(--color-white);
 }

web_src/js/modules/tippy.ts

@@ -1,6 +1,5 @@
 import tippy, {followCursor} from 'tippy.js';
 import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
-import {formatDatetime} from '../utils/time.ts';
 import type {Content, Instance, Placement, Props} from 'tippy.js';
 import {html} from '../utils/html.ts';
 
@@ -100,20 +99,10 @@ function attachTooltip(target: Element, content: Content | null = null): Instanc
 }
 
 function switchTitleToTooltip(target: Element): void {
-  let title = target.getAttribute('title');
+  const title = target.getAttribute('title');
   if (title) {
-    // apply custom formatting to relative-time's tooltips
-    if (target.tagName.toLowerCase() === 'relative-time') {
-      const datetime = target.getAttribute('datetime');
-      if (datetime) {
-        title = formatDatetime(new Date(datetime));
-      }
-    }
     target.setAttribute('data-tooltip-content', title);
     target.setAttribute('aria-label', title);
-    // keep the attribute, in case there are some other "[title]" selectors
-    // and to prevent infinite loop with <relative-time> which will re-add
-    // title if it is absent
     target.setAttribute('title', '');
   }
 }
@@ -155,7 +144,7 @@ export function initGlobalTooltips(): void {
   const observerConnect = (observer: MutationObserver) => observer.observe(document, {
     subtree: true,
     childList: true,
-    attributeFilter: ['data-tooltip-content', 'title'],
+    attributeFilter: ['data-tooltip-content'],
   });
   const observer = new MutationObserver((mutationList, observer) => {
     const pending = observer.takeRecords();

web_src/js/utils/time.ts

@@ -77,7 +77,6 @@ export function formatDatetime(date: Date | number): string {
       hour: 'numeric',
       hour12: !Number.isInteger(Number(new Intl.DateTimeFormat([], {hour: 'numeric'}).format())),
       minute: '2-digit',
-      timeZoneName: 'short',
     });
   }
   return dateFormat.format(date);

web_src/js/webcomponents/index.ts

@@ -1,4 +1,4 @@
 import './polyfills.ts';
-import '@github/relative-time-element';
+import './relative-time.ts';
 import './origin-url.ts';
 import './overflow-menu.ts';