@f-ewald/components 1.21.1 → 1.22.0

package/custom-elements.json

@@ -14343,7 +14343,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "One event on a `timeline-container`: a dot on the vertical line, an optional\nheadline, a relative timestamp (\"3 hours ago\"), and freely nested content.\nThe connecting line is drawn here — its segment above the dot is hidden on\nthe first entry and the segment below is hidden on the last, so the line caps\nexactly at the first and last dots. Only meaningful inside a\n`timeline-container`; demonstrated through it.\n\n`datetime` is the entry's one timestamp. A nested element that has its own\ntimestamp prop (e.g. `chat-message`'s `timestamp`) should leave it unset —\nsetting both renders the same time twice.\n\nThe dot's `color` types the entry using the shared status-pill palette —\n`primary` by default, plus `neutral`, `info`, `success`, `warning`, and\n`danger`.\n\nSet `compact` for dense, one-line system-status entries (running spinners,\nstate changes): it tightens the vertical spacing and renders the content\nsmaller and muted.",
+          "description": "One event on a `timeline-container`: a dot on the vertical line, an optional\nheadline, a relative timestamp (\"3 hours ago\"), and freely nested content.\nThe connecting line is drawn here — its segment above the dot is hidden on\nthe first entry and the segment below is hidden on the last, so the line caps\nexactly at the first and last dots. Only meaningful inside a\n`timeline-container`; demonstrated through it.\n\n`datetime` is the entry's one timestamp. A nested element that has its own\ntimestamp prop (e.g. `chat-message`'s `timestamp`) should leave it unset —\nsetting both renders the same time twice.\n\nThe dot's `color` types the entry using the shared status-pill palette —\n`primary` by default, plus `neutral`, `info`, `success`, `warning`, and\n`danger`.\n\nSet `compact` for dense, one-line system-status entries: it tightens the\nvertical spacing and renders the content smaller and muted.\n\nSet `running` to replace the dot with an animated gray ring spinner,\nindicating the entry represents in-progress work; `color` has no visible\neffect while `running` is set.",
           "name": "TimelineEntry",
           "slots": [
             {
@@ -14387,6 +14387,17 @@
               "attribute": "compact",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "running",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows an animated ring spinner in place of the dot, indicating the entry\nrepresents in-progress work. Overrides `color` while set — the spinner\nalways uses the muted/gray palette.",
+              "attribute": "running",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "_hasHeadline",
@@ -14444,6 +14455,15 @@
               "default": "false",
               "description": "Dense, one-line presentation for system-status entries: tighter vertical\nspacing and smaller, muted content.",
               "fieldName": "compact"
+            },
+            {
+              "name": "running",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows an animated ring spinner in place of the dot, indicating the entry\nrepresents in-progress work. Overrides `color` while set — the spinner\nalways uses the muted/gray palette.",
+              "fieldName": "running"
             }
           ],
           "superclass": {

package/dist/timeline-entry.d.ts

@@ -17,9 +17,12 @@ import type { StatusPillColor } from "./status-pill.js";
  * `primary` by default, plus `neutral`, `info`, `success`, `warning`, and
  * `danger`.
  *
- * Set `compact` for dense, one-line system-status entries (running spinners,
- * state changes): it tightens the vertical spacing and renders the content
- * smaller and muted.
+ * Set `compact` for dense, one-line system-status entries: it tightens the
+ * vertical spacing and renders the content smaller and muted.
+ *
+ * Set `running` to replace the dot with an animated gray ring spinner,
+ * indicating the entry represents in-progress work; `color` has no visible
+ * effect while `running` is set.
  *
  * @element timeline-entry
  * @slot headline - Optional headline/title for the event.
@@ -38,6 +41,12 @@ export declare class TimelineEntry extends LitElement {
      * spacing and smaller, muted content.
      */
     compact: boolean;
+    /**
+     * Shows an animated ring spinner in place of the dot, indicating the entry
+     * represents in-progress work. Overrides `color` while set — the spinner
+     * always uses the muted/gray palette.
+     */
+    running: boolean;
     /** Whether the headline slot currently has assigned content. */
     private _hasHeadline;
     static styles: import("lit").CSSResult[];

package/dist/timeline-entry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-entry.d.ts","sourceRoot":"","sources":["../src/timeline-entry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,uEAAuE;IAC3D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3C;;;OAGG;IACS,KAAK,EAAE,eAAe,CAAa;IAE/C;;;OAGG;IACyC,OAAO,UAAS;IAE5D,gEAAgE;IACvD,OAAO,CAAC,YAAY,CAAS;IAEtC,OAAgB,MAAM,4BA+HpB;IAEO,iBAAiB,IAAI,IAAI,CAGjC;IAED,6EAA6E;IAC7E,OAAO,CAAC,qBAAqB;IAIpB,MAAM,yCAqBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}
+{"version":3,"file":"timeline-entry.d.ts","sourceRoot":"","sources":["../src/timeline-entry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,uEAAuE;IAC3D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3C;;;OAGG;IACS,KAAK,EAAE,eAAe,CAAa;IAE/C;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;;OAIG;IACyC,OAAO,UAAS;IAE5D,gEAAgE;IACvD,OAAO,CAAC,YAAY,CAAS;IAEtC,OAAgB,MAAM,4BAsKpB;IAEO,iBAAiB,IAAI,IAAI,CAGjC;IAED,6EAA6E;IAC7E,OAAO,CAAC,qBAAqB;IAIpB,MAAM,yCA4Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/dist/timeline-entry.js

@@ -24,9 +24,12 @@ import { tokens } from "./tokens.js";
  * `primary` by default, plus `neutral`, `info`, `success`, `warning`, and
  * `danger`.
  *
- * Set `compact` for dense, one-line system-status entries (running spinners,
- * state changes): it tightens the vertical spacing and renders the content
- * smaller and muted.
+ * Set `compact` for dense, one-line system-status entries: it tightens the
+ * vertical spacing and renders the content smaller and muted.
+ *
+ * Set `running` to replace the dot with an animated gray ring spinner,
+ * indicating the entry represents in-progress work; `color` has no visible
+ * effect while `running` is set.
  *
  * @element timeline-entry
  * @slot headline - Optional headline/title for the event.
@@ -47,6 +50,12 @@ let TimelineEntry = class TimelineEntry extends LitElement {
          * spacing and smaller, muted content.
          */
         this.compact = false;
+        /**
+         * Shows an animated ring spinner in place of the dot, indicating the entry
+         * represents in-progress work. Overrides `color` while set — the spinner
+         * always uses the muted/gray palette.
+         */
+        this.running = false;
         /** Whether the headline slot currently has assigned content. */
         this._hasHeadline = false;
     }
@@ -125,6 +134,45 @@ let TimelineEntry = class TimelineEntry extends LitElement {
       .dot.danger {
         --_dot: var(--ui-danger, #dc2626);
       }
+      .spinner {
+        position: absolute;
+        top: 0.125rem;
+        left: 50%;
+        width: 0.75rem;
+        height: 0.75rem;
+        transform: translateX(-50%);
+        animation: spin 0.8s linear infinite;
+      }
+      .spinner-track {
+        fill: none;
+        stroke: color-mix(in srgb, var(--ui-text-muted, #64748b) 25%, transparent);
+        stroke-width: 3;
+      }
+      .spinner-arc {
+        fill: none;
+        stroke: var(--ui-text-muted, #64748b);
+        stroke-width: 3;
+        stroke-linecap: round;
+        stroke-dasharray: 42 100;
+      }
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .spinner {
+          animation: none;
+        }
+      }
+      @media (forced-colors: active) {
+        .spinner-track {
+          stroke: GrayText;
+        }
+        .spinner-arc {
+          stroke: CanvasText;
+        }
+      }
       :host(:first-child) .line-top {
         display: none;
       }
@@ -193,7 +241,14 @@ let TimelineEntry = class TimelineEntry extends LitElement {
         <div class="rail" aria-hidden="true">
           <span class="line line-top"></span>
           <span class="line line-bottom"></span>
-          <span class="dot ${this.color}"></span>
+          ${this.running
+            ? html `
+                <svg class="spinner" viewBox="0 0 24 24">
+                  <circle class="spinner-track" cx="12" cy="12" r="9"></circle>
+                  <circle class="spinner-arc" cx="12" cy="12" r="9"></circle>
+                </svg>
+              `
+            : html `<span class="dot ${this.color}"></span>`}
         </div>
         <div class="body">
           <div class="head">
@@ -219,6 +274,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], TimelineEntry.prototype, "compact", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TimelineEntry.prototype, "running", void 0);
 __decorate([
     state()
 ], TimelineEntry.prototype, "_hasHeadline", void 0);

package/dist/timeline-entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-entry.js","sourceRoot":"","sources":["../src/timeline-entry.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACL,uEAAuE;QAC3D,aAAQ,GAAkB,IAAI,CAAC;QAE3C;;;WAGG;QACS,UAAK,GAAoB,SAAS,CAAC;QAE/C;;;WAGG;QACyC,YAAO,GAAG,KAAK,CAAC;QAE5D,gEAAgE;QAC/C,iBAAY,GAAG,KAAK,CAAC;IAmKxC,CAAC;aAjKiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4HF;KACF,AA/HqB,CA+HpB;IAEO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxE,CAAC;IAED,6EAA6E;IACrE,qBAAqB,CAAC,KAAY;QACxC,IAAI,CAAC,YAAY,GAAI,KAAK,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IACpG,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;;6BAKc,IAAI,CAAC,KAAK;;;;oCAIH,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;kDAClB,IAAI,CAAC,qBAAqB;;cAE9D,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,wCAAwC,IAAI,CAAC,QAAQ,mBAAmB;YAC9E,CAAC,CAAC,OAAO;;;;;KAKlB,CAAC;IACJ,CAAC;CACF,CAAA;AAlLa;IAAX,QAAQ,EAAE;+CAAgC;AAM/B;IAAX,QAAQ,EAAE;4CAAoC;AAMH;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAiB;AAG3C;IAAhB,KAAK,EAAE;mDAA8B;AAjB3B,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAoLzB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport \"./relative-time.js\";\nimport { tokens } from \"./tokens.js\";\nimport type { StatusPillColor } from \"./status-pill.js\";\n\n/**\n * One event on a `timeline-container`: a dot on the vertical line, an optional\n * headline, a relative timestamp (\"3 hours ago\"), and freely nested content.\n * The connecting line is drawn here — its segment above the dot is hidden on\n * the first entry and the segment below is hidden on the last, so the line caps\n * exactly at the first and last dots. Only meaningful inside a\n * `timeline-container`; demonstrated through it.\n *\n * `datetime` is the entry's one timestamp. A nested element that has its own\n * timestamp prop (e.g. `chat-message`'s `timestamp`) should leave it unset —\n * setting both renders the same time twice.\n *\n * The dot's `color` types the entry using the shared status-pill palette —\n * `primary` by default, plus `neutral`, `info`, `success`, `warning`, and\n * `danger`.\n *\n * Set `compact` for dense, one-line system-status entries (running spinners,\n * state changes): it tightens the vertical spacing and renders the content\n * smaller and muted.\n *\n * @element timeline-entry\n * @slot headline - Optional headline/title for the event.\n * @slot - The event content; nest any elements here.\n */\n@customElement(\"timeline-entry\")\nexport class TimelineEntry extends LitElement {\n  /** ISO 8601 or SQLite datetime string, rendered as a relative time. */\n  @property() datetime: string | null = null;\n\n  /**\n   * Visual type of the entry's dot, from the shared status-pill palette:\n   * `primary` (default), `neutral`, `info`, `success`, `warning`, or `danger`.\n   */\n  @property() color: StatusPillColor = \"primary\";\n\n  /**\n   * Dense, one-line presentation for system-status entries: tighter vertical\n   * spacing and smaller, muted content.\n   */\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  /** Whether the headline slot currently has assigned content. */\n  @state() private _hasHeadline = false;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n      }\n      .entry {\n        display: flex;\n        gap: 0.75rem;\n      }\n      .rail {\n        position: relative;\n        flex: 0 0 auto;\n        width: 0.75rem;\n      }\n      .line {\n        position: absolute;\n        left: 50%;\n        width: 2px;\n        transform: translateX(-50%);\n        background: var(--ui-border, #e2e8f0);\n      }\n      .line-top {\n        top: 0;\n        height: 0.5rem;\n      }\n      .line-bottom {\n        top: 0.5rem;\n        bottom: 0;\n      }\n      .dot {\n        position: absolute;\n        top: 0.125rem;\n        left: 50%;\n        width: 0.75rem;\n        height: 0.75rem;\n        transform: translateX(-50%);\n        border-radius: 9999px;\n        /* Same lighter-on-top token gradient as map-circle/user-avatar; the\n           base color is swapped per the color property via the private\n           --_dot var. */\n        background: linear-gradient(\n          to bottom,\n          color-mix(in srgb, var(--_dot, var(--ui-primary, #4f46e5)) 70%, #ffffff) 0%,\n          color-mix(in srgb, var(--_dot, var(--ui-primary, #4f46e5)) 70%, #000000) 100%\n        );\n      }\n      .dot.neutral {\n        --_dot: var(--ui-text-muted, #64748b);\n      }\n      .dot.info {\n        --_dot: var(--ui-info, #0ea5e9);\n      }\n      .dot.primary {\n        --_dot: var(--ui-primary, #4f46e5);\n      }\n      .dot.success {\n        --_dot: var(--ui-success, #16a34a);\n      }\n      .dot.warning {\n        --_dot: var(--ui-warning, #d97706);\n      }\n      .dot.danger {\n        --_dot: var(--ui-danger, #dc2626);\n      }\n      :host(:first-child) .line-top {\n        display: none;\n      }\n      :host(:last-child) .line-bottom {\n        display: none;\n      }\n      .body {\n        flex: 1 1 auto;\n        min-width: 0;\n        padding-bottom: 1.5rem;\n      }\n      :host(:last-child) .body {\n        padding-bottom: 0;\n      }\n      .head {\n        display: flex;\n        align-items: baseline;\n        gap: 0.5rem;\n        flex-wrap: wrap;\n      }\n      .headline {\n        font-weight: var(--ui-font-weight-semibold, 600);\n        font-size: var(--ui-font-size, 0.875rem);\n        line-height: var(--ui-line-height-tight, 1.25);\n        color: var(--ui-text, #0f172a);\n      }\n      .headline.empty {\n        display: none;\n      }\n      .time {\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        line-height: var(--ui-line-height-tight, 1.25);\n        color: var(--ui-text-muted, #64748b);\n      }\n      .content {\n        margin-top: 0.25rem;\n        font-size: var(--ui-font-size, 0.875rem);\n        line-height: var(--ui-line-height-normal, 1.5);\n        color: var(--ui-text, #0f172a);\n      }\n      :host([compact]) .body {\n        padding-bottom: 0.5rem;\n      }\n      :host([compact]:last-child) .body {\n        padding-bottom: 0;\n      }\n      :host([compact]) .content {\n        margin-top: 0.125rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        color: var(--ui-text-muted, #64748b);\n      }\n    `,\n  ];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute(\"role\")) this.setAttribute(\"role\", \"listitem\");\n  }\n\n  /** Collapses the headline when nothing is slotted so the time sits alone. */\n  private _onHeadlineSlotChange(event: Event): void {\n    this._hasHeadline = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  }\n\n  override render() {\n    return html`\n      <div class=\"entry\">\n        <div class=\"rail\" aria-hidden=\"true\">\n          <span class=\"line line-top\"></span>\n          <span class=\"line line-bottom\"></span>\n          <span class=\"dot ${this.color}\"></span>\n        </div>\n        <div class=\"body\">\n          <div class=\"head\">\n            <span class=\"headline ${this._hasHeadline ? \"\" : \"empty\"}\">\n              <slot name=\"headline\" @slotchange=${this._onHeadlineSlotChange}></slot>\n            </span>\n            ${this.datetime\n              ? html`<relative-time class=\"time\" datetime=${this.datetime}></relative-time>`\n              : nothing}\n          </div>\n          <div class=\"content\"><slot></slot></div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"timeline-entry\": TimelineEntry;\n  }\n}\n"]}
+{"version":3,"file":"timeline-entry.js","sourceRoot":"","sources":["../src/timeline-entry.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACL,uEAAuE;QAC3D,aAAQ,GAAkB,IAAI,CAAC;QAE3C;;;WAGG;QACS,UAAK,GAAoB,SAAS,CAAC;QAE/C;;;WAGG;QACyC,YAAO,GAAG,KAAK,CAAC;QAE5D;;;;WAIG;QACyC,YAAO,GAAG,KAAK,CAAC;QAE5D,gEAAgE;QAC/C,iBAAY,GAAG,KAAK,CAAC;IAiNxC,CAAC;aA/MiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmKF;KACF,AAtKqB,CAsKpB;IAEO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxE,CAAC;IAED,6EAA6E;IACrE,qBAAqB,CAAC,KAAY;QACxC,IAAI,CAAC,YAAY,GAAI,KAAK,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IACpG,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;;YAKH,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;;;;;eAKH;YACH,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,KAAK,WAAW;;;;oCAIvB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;kDAClB,IAAI,CAAC,qBAAqB;;cAE9D,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,wCAAwC,IAAI,CAAC,QAAQ,mBAAmB;YAC9E,CAAC,CAAC,OAAO;;;;;KAKlB,CAAC;IACJ,CAAC;CACF,CAAA;AAvOa;IAAX,QAAQ,EAAE;+CAAgC;AAM/B;IAAX,QAAQ,EAAE;4CAAoC;AAMH;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAiB;AAOhB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAiB;AAG3C;IAAhB,KAAK,EAAE;mDAA8B;AAxB3B,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAyOzB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport \"./relative-time.js\";\nimport { tokens } from \"./tokens.js\";\nimport type { StatusPillColor } from \"./status-pill.js\";\n\n/**\n * One event on a `timeline-container`: a dot on the vertical line, an optional\n * headline, a relative timestamp (\"3 hours ago\"), and freely nested content.\n * The connecting line is drawn here — its segment above the dot is hidden on\n * the first entry and the segment below is hidden on the last, so the line caps\n * exactly at the first and last dots. Only meaningful inside a\n * `timeline-container`; demonstrated through it.\n *\n * `datetime` is the entry's one timestamp. A nested element that has its own\n * timestamp prop (e.g. `chat-message`'s `timestamp`) should leave it unset —\n * setting both renders the same time twice.\n *\n * The dot's `color` types the entry using the shared status-pill palette —\n * `primary` by default, plus `neutral`, `info`, `success`, `warning`, and\n * `danger`.\n *\n * Set `compact` for dense, one-line system-status entries: it tightens the\n * vertical spacing and renders the content smaller and muted.\n *\n * Set `running` to replace the dot with an animated gray ring spinner,\n * indicating the entry represents in-progress work; `color` has no visible\n * effect while `running` is set.\n *\n * @element timeline-entry\n * @slot headline - Optional headline/title for the event.\n * @slot - The event content; nest any elements here.\n */\n@customElement(\"timeline-entry\")\nexport class TimelineEntry extends LitElement {\n  /** ISO 8601 or SQLite datetime string, rendered as a relative time. */\n  @property() datetime: string | null = null;\n\n  /**\n   * Visual type of the entry's dot, from the shared status-pill palette:\n   * `primary` (default), `neutral`, `info`, `success`, `warning`, or `danger`.\n   */\n  @property() color: StatusPillColor = \"primary\";\n\n  /**\n   * Dense, one-line presentation for system-status entries: tighter vertical\n   * spacing and smaller, muted content.\n   */\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  /**\n   * Shows an animated ring spinner in place of the dot, indicating the entry\n   * represents in-progress work. Overrides `color` while set — the spinner\n   * always uses the muted/gray palette.\n   */\n  @property({ type: Boolean, reflect: true }) running = false;\n\n  /** Whether the headline slot currently has assigned content. */\n  @state() private _hasHeadline = false;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n      }\n      .entry {\n        display: flex;\n        gap: 0.75rem;\n      }\n      .rail {\n        position: relative;\n        flex: 0 0 auto;\n        width: 0.75rem;\n      }\n      .line {\n        position: absolute;\n        left: 50%;\n        width: 2px;\n        transform: translateX(-50%);\n        background: var(--ui-border, #e2e8f0);\n      }\n      .line-top {\n        top: 0;\n        height: 0.5rem;\n      }\n      .line-bottom {\n        top: 0.5rem;\n        bottom: 0;\n      }\n      .dot {\n        position: absolute;\n        top: 0.125rem;\n        left: 50%;\n        width: 0.75rem;\n        height: 0.75rem;\n        transform: translateX(-50%);\n        border-radius: 9999px;\n        /* Same lighter-on-top token gradient as map-circle/user-avatar; the\n           base color is swapped per the color property via the private\n           --_dot var. */\n        background: linear-gradient(\n          to bottom,\n          color-mix(in srgb, var(--_dot, var(--ui-primary, #4f46e5)) 70%, #ffffff) 0%,\n          color-mix(in srgb, var(--_dot, var(--ui-primary, #4f46e5)) 70%, #000000) 100%\n        );\n      }\n      .dot.neutral {\n        --_dot: var(--ui-text-muted, #64748b);\n      }\n      .dot.info {\n        --_dot: var(--ui-info, #0ea5e9);\n      }\n      .dot.primary {\n        --_dot: var(--ui-primary, #4f46e5);\n      }\n      .dot.success {\n        --_dot: var(--ui-success, #16a34a);\n      }\n      .dot.warning {\n        --_dot: var(--ui-warning, #d97706);\n      }\n      .dot.danger {\n        --_dot: var(--ui-danger, #dc2626);\n      }\n      .spinner {\n        position: absolute;\n        top: 0.125rem;\n        left: 50%;\n        width: 0.75rem;\n        height: 0.75rem;\n        transform: translateX(-50%);\n        animation: spin 0.8s linear infinite;\n      }\n      .spinner-track {\n        fill: none;\n        stroke: color-mix(in srgb, var(--ui-text-muted, #64748b) 25%, transparent);\n        stroke-width: 3;\n      }\n      .spinner-arc {\n        fill: none;\n        stroke: var(--ui-text-muted, #64748b);\n        stroke-width: 3;\n        stroke-linecap: round;\n        stroke-dasharray: 42 100;\n      }\n      @keyframes spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .spinner {\n          animation: none;\n        }\n      }\n      @media (forced-colors: active) {\n        .spinner-track {\n          stroke: GrayText;\n        }\n        .spinner-arc {\n          stroke: CanvasText;\n        }\n      }\n      :host(:first-child) .line-top {\n        display: none;\n      }\n      :host(:last-child) .line-bottom {\n        display: none;\n      }\n      .body {\n        flex: 1 1 auto;\n        min-width: 0;\n        padding-bottom: 1.5rem;\n      }\n      :host(:last-child) .body {\n        padding-bottom: 0;\n      }\n      .head {\n        display: flex;\n        align-items: baseline;\n        gap: 0.5rem;\n        flex-wrap: wrap;\n      }\n      .headline {\n        font-weight: var(--ui-font-weight-semibold, 600);\n        font-size: var(--ui-font-size, 0.875rem);\n        line-height: var(--ui-line-height-tight, 1.25);\n        color: var(--ui-text, #0f172a);\n      }\n      .headline.empty {\n        display: none;\n      }\n      .time {\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        line-height: var(--ui-line-height-tight, 1.25);\n        color: var(--ui-text-muted, #64748b);\n      }\n      .content {\n        margin-top: 0.25rem;\n        font-size: var(--ui-font-size, 0.875rem);\n        line-height: var(--ui-line-height-normal, 1.5);\n        color: var(--ui-text, #0f172a);\n      }\n      :host([compact]) .body {\n        padding-bottom: 0.5rem;\n      }\n      :host([compact]:last-child) .body {\n        padding-bottom: 0;\n      }\n      :host([compact]) .content {\n        margin-top: 0.125rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        color: var(--ui-text-muted, #64748b);\n      }\n    `,\n  ];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute(\"role\")) this.setAttribute(\"role\", \"listitem\");\n  }\n\n  /** Collapses the headline when nothing is slotted so the time sits alone. */\n  private _onHeadlineSlotChange(event: Event): void {\n    this._hasHeadline = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  }\n\n  override render() {\n    return html`\n      <div class=\"entry\">\n        <div class=\"rail\" aria-hidden=\"true\">\n          <span class=\"line line-top\"></span>\n          <span class=\"line line-bottom\"></span>\n          ${this.running\n            ? html`\n                <svg class=\"spinner\" viewBox=\"0 0 24 24\">\n                  <circle class=\"spinner-track\" cx=\"12\" cy=\"12\" r=\"9\"></circle>\n                  <circle class=\"spinner-arc\" cx=\"12\" cy=\"12\" r=\"9\"></circle>\n                </svg>\n              `\n            : html`<span class=\"dot ${this.color}\"></span>`}\n        </div>\n        <div class=\"body\">\n          <div class=\"head\">\n            <span class=\"headline ${this._hasHeadline ? \"\" : \"empty\"}\">\n              <slot name=\"headline\" @slotchange=${this._onHeadlineSlotChange}></slot>\n            </span>\n            ${this.datetime\n              ? html`<relative-time class=\"time\" datetime=${this.datetime}></relative-time>`\n              : nothing}\n          </div>\n          <div class=\"content\"><slot></slot></div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"timeline-entry\": TimelineEntry;\n  }\n}\n"]}

package/docs/timeline-entry.md

@@ -15,9 +15,12 @@ The dot's `color` types the entry using the shared status-pill palette —
 `primary` by default, plus `neutral`, `info`, `success`, `warning`, and
 `danger`.
 
-Set `compact` for dense, one-line system-status entries (running spinners,
-state changes): it tightens the vertical spacing and renders the content
-smaller and muted.
+Set `compact` for dense, one-line system-status entries: it tightens the
+vertical spacing and renders the content smaller and muted.
+
+Set `running` to replace the dot with an animated gray ring spinner,
+indicating the entry represents in-progress work; `color` has no visible
+effect while `running` is set.
 
 ## Install
 
@@ -41,6 +44,7 @@ import "@f-ewald/components/timeline-entry.js";
 | `datetime` | `datetime` | `string | null` | `null` | ISO 8601 or SQLite datetime string, rendered as a relative time. |
 | `color` | `color` | `StatusPillColor` | `"primary"` | Visual type of the entry's dot, from the shared status-pill palette: `primary` (default), `neutral`, `info`, `success`, `warning`, or `danger`. |
 | `compact` | `compact` | `boolean` | `false` | Dense, one-line presentation for system-status entries: tighter vertical spacing and smaller, muted content. |
+| `running` | `running` | `boolean` | `false` | Shows an animated ring spinner in place of the dot, indicating the entry represents in-progress work. Overrides `color` while set — the spinner always uses the muted/gray palette. |
 
 ## Events
 

package/llms.txt

@@ -1893,13 +1893,16 @@ The dot's `color` types the entry using the shared status-pill palette —
 `primary` by default, plus `neutral`, `info`, `success`, `warning`, and
 `danger`.
 
-Set `compact` for dense, one-line system-status entries (running spinners,
-state changes): it tightens the vertical spacing and renders the content
-smaller and muted.
+Set `compact` for dense, one-line system-status entries: it tightens the
+vertical spacing and renders the content smaller and muted.
+
+Set `running` to replace the dot with an animated gray ring spinner,
+indicating the entry represents in-progress work; `color` has no visible
+effect while `running` is set.
 
 Import: `import "@f-ewald/components/timeline-entry.js";`
 
-Properties: `datetime` (attribute `datetime`) : string | null, default null; `color` (attribute `color`) : StatusPillColor, default "primary"; `compact` (attribute `compact`) : boolean, default false
+Properties: `datetime` (attribute `datetime`) : string | null, default null; `color` (attribute `color`) : StatusPillColor, default "primary"; `compact` (attribute `compact`) : boolean, default false; `running` (attribute `running`) : boolean, default false
 Events: none
 CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-font-weight-semibold`, `--ui-info`, `--ui-line-height-normal`, `--ui-line-height-tight`, `--ui-primary`, `--ui-success`, `--ui-text`, `--ui-text-muted`, `--ui-warning`
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@f-ewald/components",
   "private": false,
-  "version": "1.21.1",
+  "version": "1.22.0",
   "description": "A collection of universally usable web components for various tasks.",
   "type": "module",
   "main": "dist/index.js",