element/ak-timestamp: consistency pass and final check

# What

- Removes the unused Interface declaration
- Documents the observers.
- Adds `showElapsed` to the builder
- Updates the builder to allow (and typecheck) standard HTMLElement attributes
- Fixes the `@csspart` documentation, which was out of date
- Commented the `@observer` handlers, since how they’re called is not obvious
- Revised the tests to work with Vitest + Playwright.

Author: kensternberg-authentik

src/ak-timestamp/ak-timestamp.builder.ts

@@ -1,9 +1,12 @@
-import { ITimestamp, Timestamp } from "./ak-timestamp.component.js";
+import type { ElementRest } from "../types.js";
+import { Timestamp } from "./ak-timestamp.component.js";
+
+import { spread } from "@open-wc/lit-helpers";
 
 import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-export type TimestampProps = Partial<ITimestamp>;
+export type TimestampProps = ElementRest & Partial<Timestamp>;
 
 /**
  * @summary Helper function to create a Timestamp component programmatically
@@ -13,18 +16,30 @@ export type TimestampProps = Partial<ITimestamp>;
  * @see {@link Timestamp} - The underlying web component
  */
 export function akTimestamp(options: TimestampProps = {}) {
-    const { date, dateFormat, displaySuffix, is12Hour, locale, raw, displayUTC, timeFormat } =
-        options;
+    const {
+        date,
+        dateFormat,
+        displaySuffix,
+        is12Hour,
+        locale,
+        raw,
+        displayUTC,
+        timeFormat,
+        showElapsed,
+        ...rest
+    } = options;
 
     return html`
         <ak-timestamp
+            ${spread(rest)}
             date=${ifDefined(date)}
             date-format=${ifDefined(dateFormat)}
             display-suffix=${ifDefined(displaySuffix)}
-            ?is-12-hour=${is12Hour}
+            ?is-12-hour=${!!is12Hour}
             locale=${ifDefined(locale)}
             .raw=${ifDefined(raw)}
-            ?display-utc=${displayUTC}
+            ?display-utc=${!!displayUTC}
+            ?show-elapsed=${!!showElapsed}
             time-format=${ifDefined(timeFormat)}
         ></ak-timestamp>
     `;

src/ak-timestamp/ak-timestamp.component.ts

@@ -39,20 +39,6 @@ const mapHas = (
     ...rest: PropertyKey[]
 ) => (Array.isArray(keys) ? [...keys, ...rest] : [keys, ...rest]).some((key) => changed.has(key));
 
-/**
- * Interface for TimestampOptions
- */
-export interface ITimestamp {
-    date?: string;
-    raw?: Date;
-    dateFormat?: TimestampFormat;
-    timeFormat?: TimestampFormat;
-    displaySuffix?: string;
-    is12Hour?: boolean;
-    locale?: string;
-    displayUTC?: boolean;
-}
-
 /**
  * @element ak-timestamp
  * @class Timestamp
@@ -83,10 +69,17 @@ export interface ITimestamp {
  *
  * ## Styling Hooks
  *
- * @csspart time - The time element that displays the formatted date. Use this to customize the appearance of the timestamp.
+ * @csspart timestamp - The time element that displays the formatted date.
+ * @csspart elapsed - If using the elapsed feature, the display of the "time since..." string.
+ * @csspart warning - A message displayed if the time passed in is unparsable.
+ *
+ * ## ARIA Note
  *
+ * @internal
+ * This component honors `prefers-reduced-motion` when `show-elapsed=true` by only updating the
+ * component every minute, not every second.
  */
-export class Timestamp extends LitElement implements ITimestamp {
+export class Timestamp extends LitElement {
     public static readonly styles = [styles];
 
     /**
@@ -171,6 +164,7 @@ export class Timestamp extends LitElement implements ITimestamp {
 
     #interval = -1;
 
+    // Triggered by the `@observed` decorator.
     protected _rawChanged() {
         const checkedDate = checkAndValidate(this.raw);
         if (checkedDate) {
@@ -179,6 +173,7 @@ export class Timestamp extends LitElement implements ITimestamp {
         }
     }
 
+    // Triggered by the `@observed` decorator.
     protected _dateChanged() {
         this.#date = match(this.date)
             .when(