@f-ewald/components 1.7.0 → 1.9.0

package/dist/index.d.ts

@@ -52,6 +52,8 @@ export { KanbanBoard, type KanbanCardData, type KanbanColumnData, type KanbanCar
 export { KanbanColumn } from "./kanban-column.js";
 export { KanbanCard } from "./kanban-card.js";
 export { TextArea } from "./text-area.js";
+export { LinkCard, type LinkCardStatus } from "./link-card.js";
+export { CardGrid } from "./card-grid.js";
 export { formatDuration, type DurationFormat } from "./utils/duration.js";
 export { tokens, tokenValues, darkTokenValues } from "./tokens.js";
 export * from "./icons.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -52,6 +52,8 @@ export { KanbanBoard, } from "./kanban-board.js";
 export { KanbanColumn } from "./kanban-column.js";
 export { KanbanCard } from "./kanban-card.js";
 export { TextArea } from "./text-area.js";
+export { LinkCard } from "./link-card.js";
+export { CardGrid } from "./card-grid.js";
 export { formatDuration } from "./utils/duration.js";
 export { tokens, tokenValues, darkTokenValues } from "./tokens.js";
 export * from "./icons.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export { AnimateConfetti } from \"./animate-confetti.js\";\nexport { GalleryItem } from \"./gallery-item.js\";\nexport { GalleryItemVariant } from \"./gallery-item-variant.js\";\nexport {\n  PhotoGallery,\n  type PhotoGalleryChangeReason,\n  type PhotoGalleryObjectFit,\n  type PhotoGallerySlideChangeDetail,\n} from \"./photo-gallery.js\";\nexport { RevealButton } from \"./reveal-button.js\";\nexport { RomanNumeral } from \"./roman-numeral.js\";\nexport { ConfirmDialog } from \"./confirm-dialog.js\";\nexport { ContentDivider } from \"./content-divider.js\";\nexport {\n  ToastNotification,\n  notifySuccess,\n  notifyError,\n  notifyInfo,\n  type ToastVariant,\n} from \"./toast-notification.js\";\nexport { SlidePanel } from \"./slide-panel.js\";\nexport { CopyLinkButton } from \"./copy-link-button.js\";\nexport { RelativeTime } from \"./relative-time.js\";\nexport { DistanceValue } from \"./distance-value.js\";\nexport { PriceHistoryChart, type PricePoint } from \"./price-history-chart.js\";\nexport { DistributionChart, type DistributionValue } from \"./distribution-chart.js\";\nexport { PercentBarChart, type PercentBarGroup } from \"./percent-bar-chart.js\";\nexport { WeightBarChart, type WeightBarItem } from \"./weight-bar-chart.js\";\nexport {\n  AddressAutocomplete,\n  type AddressSuggestion,\n} from \"./address-autocomplete.js\";\nexport {\n  AutocompleteInput,\n  type AutocompleteOption,\n} from \"./autocomplete-input.js\";\nexport { UserAvatar } from \"./user-avatar.js\";\nexport { MapPin } from \"./map-pin.js\";\nexport { MapCircle } from \"./map-circle.js\";\nexport { RadioCards, type RadioCardOption } from \"./radio-cards.js\";\nexport { RadioPills, type RadioPillOption } from \"./radio-pills.js\";\nexport { UiButton, type ButtonVariant } from \"./ui-button.js\";\nexport { StatMeter } from \"./stat-meter.js\";\nexport { StatusPill, type StatusPillColor } from \"./status-pill.js\";\nexport { EditableText } from \"./editable-text.js\";\nexport { LiveTimer } from \"./live-timer.js\";\nexport {\n  ChatMessage,\n  type ChatMessageRole,\n  type ChatMessageVariant,\n} from \"./chat-message.js\";\nexport { FormSelect, type SelectOption } from \"./form-select.js\";\nexport {\n  MultiSelect,\n  type MultiSelectOption,\n  type MultiSelectVariant,\n} from \"./multi-select.js\";\nexport { DataTable, type DataTableColumn } from \"./data-table.js\";\nexport { TileGrid } from \"./tile-grid.js\";\nexport { PopoverPanel } from \"./popover-panel.js\";\nexport { DropdownButton, type DropdownOption } from \"./dropdown-button.js\";\nexport { IconButton } from \"./icon-button.js\";\nexport { KbdHint, type KbdPlatform } from \"./kbd-hint.js\";\nexport { FrameBox } from \"./frame-box.js\";\nexport { AppShell, type SidebarToggleDetail } from \"./app-shell.js\";\nexport { AppSidebar } from \"./app-sidebar.js\";\nexport { ActionBar } from \"./action-bar.js\";\nexport { PageHeader } from \"./page-header.js\";\nexport { PaginationNav, type PageChangeDetail } from \"./pagination-nav.js\";\nexport { FormActions } from \"./form-actions.js\";\nexport { TimelineContainer } from \"./timeline-container.js\";\nexport { TimelineEntry } from \"./timeline-entry.js\";\nexport { CalendarEntry } from \"./calendar-entry.js\";\nexport { CalendarMonth } from \"./calendar-month.js\";\nexport { CalendarYear } from \"./calendar-year.js\";\nexport {\n  KanbanBoard,\n  type KanbanCardData,\n  type KanbanColumnData,\n  type KanbanCardMoveDetail,\n  type KanbanCardOpenDetail,\n} from \"./kanban-board.js\";\nexport { KanbanColumn } from \"./kanban-column.js\";\nexport { KanbanCard } from \"./kanban-card.js\";\nexport { TextArea } from \"./text-area.js\";\nexport { formatDuration, type DurationFormat } from \"./utils/duration.js\";\nexport { tokens, tokenValues, darkTokenValues } from \"./tokens.js\";\nexport * from \"./icons.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export { AnimateConfetti } from \"./animate-confetti.js\";\nexport { GalleryItem } from \"./gallery-item.js\";\nexport { GalleryItemVariant } from \"./gallery-item-variant.js\";\nexport {\n  PhotoGallery,\n  type PhotoGalleryChangeReason,\n  type PhotoGalleryObjectFit,\n  type PhotoGallerySlideChangeDetail,\n} from \"./photo-gallery.js\";\nexport { RevealButton } from \"./reveal-button.js\";\nexport { RomanNumeral } from \"./roman-numeral.js\";\nexport { ConfirmDialog } from \"./confirm-dialog.js\";\nexport { ContentDivider } from \"./content-divider.js\";\nexport {\n  ToastNotification,\n  notifySuccess,\n  notifyError,\n  notifyInfo,\n  type ToastVariant,\n} from \"./toast-notification.js\";\nexport { SlidePanel } from \"./slide-panel.js\";\nexport { CopyLinkButton } from \"./copy-link-button.js\";\nexport { RelativeTime } from \"./relative-time.js\";\nexport { DistanceValue } from \"./distance-value.js\";\nexport { PriceHistoryChart, type PricePoint } from \"./price-history-chart.js\";\nexport { DistributionChart, type DistributionValue } from \"./distribution-chart.js\";\nexport { PercentBarChart, type PercentBarGroup } from \"./percent-bar-chart.js\";\nexport { WeightBarChart, type WeightBarItem } from \"./weight-bar-chart.js\";\nexport {\n  AddressAutocomplete,\n  type AddressSuggestion,\n} from \"./address-autocomplete.js\";\nexport {\n  AutocompleteInput,\n  type AutocompleteOption,\n} from \"./autocomplete-input.js\";\nexport { UserAvatar } from \"./user-avatar.js\";\nexport { MapPin } from \"./map-pin.js\";\nexport { MapCircle } from \"./map-circle.js\";\nexport { RadioCards, type RadioCardOption } from \"./radio-cards.js\";\nexport { RadioPills, type RadioPillOption } from \"./radio-pills.js\";\nexport { UiButton, type ButtonVariant } from \"./ui-button.js\";\nexport { StatMeter } from \"./stat-meter.js\";\nexport { StatusPill, type StatusPillColor } from \"./status-pill.js\";\nexport { EditableText } from \"./editable-text.js\";\nexport { LiveTimer } from \"./live-timer.js\";\nexport {\n  ChatMessage,\n  type ChatMessageRole,\n  type ChatMessageVariant,\n} from \"./chat-message.js\";\nexport { FormSelect, type SelectOption } from \"./form-select.js\";\nexport {\n  MultiSelect,\n  type MultiSelectOption,\n  type MultiSelectVariant,\n} from \"./multi-select.js\";\nexport { DataTable, type DataTableColumn } from \"./data-table.js\";\nexport { TileGrid } from \"./tile-grid.js\";\nexport { PopoverPanel } from \"./popover-panel.js\";\nexport { DropdownButton, type DropdownOption } from \"./dropdown-button.js\";\nexport { IconButton } from \"./icon-button.js\";\nexport { KbdHint, type KbdPlatform } from \"./kbd-hint.js\";\nexport { FrameBox } from \"./frame-box.js\";\nexport { AppShell, type SidebarToggleDetail } from \"./app-shell.js\";\nexport { AppSidebar } from \"./app-sidebar.js\";\nexport { ActionBar } from \"./action-bar.js\";\nexport { PageHeader } from \"./page-header.js\";\nexport { PaginationNav, type PageChangeDetail } from \"./pagination-nav.js\";\nexport { FormActions } from \"./form-actions.js\";\nexport { TimelineContainer } from \"./timeline-container.js\";\nexport { TimelineEntry } from \"./timeline-entry.js\";\nexport { CalendarEntry } from \"./calendar-entry.js\";\nexport { CalendarMonth } from \"./calendar-month.js\";\nexport { CalendarYear } from \"./calendar-year.js\";\nexport {\n  KanbanBoard,\n  type KanbanCardData,\n  type KanbanColumnData,\n  type KanbanCardMoveDetail,\n  type KanbanCardOpenDetail,\n} from \"./kanban-board.js\";\nexport { KanbanColumn } from \"./kanban-column.js\";\nexport { KanbanCard } from \"./kanban-card.js\";\nexport { TextArea } from \"./text-area.js\";\nexport { LinkCard, type LinkCardStatus } from \"./link-card.js\";\nexport { CardGrid } from \"./card-grid.js\";\nexport { formatDuration, type DurationFormat } from \"./utils/duration.js\";\nexport { tokens, tokenValues, darkTokenValues } from \"./tokens.js\";\nexport * from \"./icons.js\";\n"]}

package/dist/link-card.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from "lit";
+/** Reachability state for the optional corner status dot. `""` renders no dot. */
+export type LinkCardStatus = "up" | "down" | "checking" | "";
+/**
+ * A single linked-resource tile — logo (or an initial-letter fallback),
+ * heading, optional description, and an optional reachability status dot.
+ * Renders as a real `<a>` (opening in a new tab) when `href` is set, or a
+ * non-interactive `<div>` otherwise. Meant to be laid out inside
+ * `card-grid`, mirroring how `gallery-item` pairs with `photo-gallery`.
+ *
+ * @element link-card
+ */
+export declare class LinkCard extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Card title. */
+    heading: string;
+    /** Optional supporting text shown below the heading. */
+    description: string;
+    /** Destination URL. When set, the card renders as a link (opened in a new tab); when unset, a non-interactive tile. */
+    href: string;
+    /** Logo image URL. Falls back to the first letter of `heading` if unset or it fails to load. */
+    logo: string;
+    /** Reachability state for the corner status dot. `""` (default) renders no dot. */
+    status: LinkCardStatus;
+    private _imgError;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "link-card": LinkCard;
+    }
+}
+//# sourceMappingURL=link-card.d.ts.map

package/dist/link-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-card.d.ts","sourceRoot":"","sources":["../src/link-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,kFAAkF;AAClF,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,UAAU,GAAG,EAAE,CAAC;AAQ7D;;;;;;;;GAQG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BA0GpB;IAEF,kBAAkB;IACN,OAAO,SAAM;IACzB,wDAAwD;IAC5C,WAAW,SAAM;IAC7B,uHAAuH;IAC3G,IAAI,SAAM;IACtB,gGAAgG;IACpF,IAAI,SAAM;IACtB,mFAAmF;IACvE,MAAM,EAAE,cAAc,CAAM;IAE/B,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAmB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QAE1D;IAEQ,MAAM,yCAuBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/link-card.js

@@ -0,0 +1,197 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+const STATUS_LABEL = {
+    up: "Reachable",
+    down: "Unreachable",
+    checking: "Checking…",
+};
+/**
+ * A single linked-resource tile — logo (or an initial-letter fallback),
+ * heading, optional description, and an optional reachability status dot.
+ * Renders as a real `<a>` (opening in a new tab) when `href` is set, or a
+ * non-interactive `<div>` otherwise. Meant to be laid out inside
+ * `card-grid`, mirroring how `gallery-item` pairs with `photo-gallery`.
+ *
+ * @element link-card
+ */
+let LinkCard = class LinkCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Card title. */
+        this.heading = "";
+        /** Optional supporting text shown below the heading. */
+        this.description = "";
+        /** Destination URL. When set, the card renders as a link (opened in a new tab); when unset, a non-interactive tile. */
+        this.href = "";
+        /** Logo image URL. Falls back to the first letter of `heading` if unset or it fails to load. */
+        this.logo = "";
+        /** Reachability state for the corner status dot. `""` (default) renders no dot. */
+        this.status = "";
+        this._imgError = false;
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        font-family: var(
+          --ui-font,
+          ui-sans-serif,
+          system-ui,
+          sans-serif,
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        );
+      }
+      .card {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        height: 100%;
+        box-sizing: border-box;
+        padding: 1.5rem;
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: var(--ui-radius, 0.5rem);
+        background: var(--ui-surface, #ffffff);
+        color: inherit;
+        text-decoration: none;
+        transition:
+          border-color 150ms ease,
+          box-shadow 150ms ease,
+          transform 150ms ease;
+      }
+      a.card {
+        cursor: pointer;
+      }
+      .card:hover {
+        border-color: var(--ui-text-muted, #64748b);
+        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+        transform: translateY(-0.0625rem);
+      }
+      .card:focus-visible {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      .status {
+        position: absolute;
+        top: 1.25rem;
+        right: 1.25rem;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 9999px;
+        background: var(--ui-text-muted, #64748b);
+      }
+      .status--up {
+        background: var(--ui-success, #16a34a);
+      }
+      .status--down {
+        background: var(--ui-danger, #dc2626);
+      }
+      .logo {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: center;
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: var(--ui-radius, 0.5rem);
+        background: var(--ui-surface-muted, #f8fafc);
+        overflow: hidden;
+      }
+      .logo img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+      .initial {
+        font-size: var(--ui-font-size-lg, 1rem);
+        font-weight: var(--ui-font-weight-semibold, 600);
+        color: var(--ui-text-muted, #64748b);
+      }
+      .heading {
+        font-size: var(--ui-font-size-lg, 1rem);
+        font-weight: var(--ui-font-weight-semibold, 600);
+        line-height: var(--ui-line-height-tight, 1.25);
+        color: var(--ui-text, #0f172a);
+      }
+      .description {
+        font-size: var(--ui-font-size, 0.875rem);
+        line-height: var(--ui-line-height-normal, 1.5);
+        color: var(--ui-text-muted, #64748b);
+      }
+      @media (forced-colors: active) {
+        .card:focus-visible {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .card {
+          transition: none;
+        }
+      }
+    `,
+    ]; }
+    willUpdate(changed) {
+        if (changed.has("logo"))
+            this._imgError = false;
+    }
+    render() {
+        const showImage = !!this.logo && !this._imgError;
+        const initial = this.heading.trim().charAt(0).toUpperCase();
+        const body = html `
+      ${this.status
+            ? html `<span
+            class="status status--${this.status}"
+            role="img"
+            title=${STATUS_LABEL[this.status]}
+            aria-label=${STATUS_LABEL[this.status]}
+          ></span>`
+            : nothing}
+      <span class="logo">
+        ${showImage
+            ? html `<img src=${this.logo} alt="" @error=${() => (this._imgError = true)} />`
+            : html `<span class="initial" aria-hidden="true">${initial}</span>`}
+      </span>
+      <span class="heading">${this.heading}</span>
+      ${this.description ? html `<span class="description">${this.description}</span>` : nothing}
+    `;
+        return this.href
+            ? html `<a class="card" href=${this.href} target="_blank" rel="noopener noreferrer">${body}</a>`
+            : html `<div class="card">${body}</div>`;
+    }
+};
+__decorate([
+    property()
+], LinkCard.prototype, "heading", void 0);
+__decorate([
+    property()
+], LinkCard.prototype, "description", void 0);
+__decorate([
+    property()
+], LinkCard.prototype, "href", void 0);
+__decorate([
+    property()
+], LinkCard.prototype, "logo", void 0);
+__decorate([
+    property()
+], LinkCard.prototype, "status", void 0);
+__decorate([
+    state()
+], LinkCard.prototype, "_imgError", void 0);
+LinkCard = __decorate([
+    customElement("link-card")
+], LinkCard);
+export { LinkCard };
+//# sourceMappingURL=link-card.js.map

package/dist/link-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-card.js","sourceRoot":"","sources":["../src/link-card.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,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAKrC,MAAM,YAAY,GAAgD;IAChE,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEF;;;;;;;;GAQG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QA6GL,kBAAkB;QACN,YAAO,GAAG,EAAE,CAAC;QACzB,wDAAwD;QAC5C,gBAAW,GAAG,EAAE,CAAC;QAC7B,uHAAuH;QAC3G,SAAI,GAAG,EAAE,CAAC;QACtB,gGAAgG;QACpF,SAAI,GAAG,EAAE,CAAC;QACtB,mFAAmF;QACvE,WAAM,GAAmB,EAAE,CAAC;QAEvB,cAAS,GAAG,KAAK,CAAC;IA8BrC,CAAC;aArJiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuGF;KACF,AA1GqB,CA0GpB;IAeiB,UAAU,CAAC,OAA6B;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IAClD,CAAC;IAEQ,MAAM;QACb,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;QACjD,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC5D,MAAM,IAAI,GAAG,IAAI,CAAA;QACb,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA;oCACsB,IAAI,CAAC,MAAM;;oBAE3B,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC;yBACpB,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC;mBAC/B;YACX,CAAC,CAAC,OAAO;;UAEP,SAAS;YACT,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,CAAC,IAAI,kBAAkB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK;YAC/E,CAAC,CAAC,IAAI,CAAA,4CAA4C,OAAO,SAAS;;8BAE9C,IAAI,CAAC,OAAO;QAClC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,WAAW,SAAS,CAAC,CAAC,CAAC,OAAO;KAC1F,CAAC;QACF,OAAO,IAAI,CAAC,IAAI;YACd,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,IAAI,8CAA8C,IAAI,MAAM;YAC/F,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,QAAQ,CAAC;IAC5C,CAAC;CACF,CAAA;AAxCa;IAAX,QAAQ,EAAE;yCAAc;AAEb;IAAX,QAAQ,EAAE;6CAAkB;AAEjB;IAAX,QAAQ,EAAE;sCAAW;AAEV;IAAX,QAAQ,EAAE;sCAAW;AAEV;IAAX,QAAQ,EAAE;wCAA6B;AAEvB;IAAhB,KAAK,EAAE;2CAA2B;AAxHxB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsJpB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/** Reachability state for the optional corner status dot. `\"\"` renders no dot. */\nexport type LinkCardStatus = \"up\" | \"down\" | \"checking\" | \"\";\n\nconst STATUS_LABEL: Record<Exclude<LinkCardStatus, \"\">, string> = {\n  up: \"Reachable\",\n  down: \"Unreachable\",\n  checking: \"Checking…\",\n};\n\n/**\n * A single linked-resource tile — logo (or an initial-letter fallback),\n * heading, optional description, and an optional reachability status dot.\n * Renders as a real `<a>` (opening in a new tab) when `href` is set, or a\n * non-interactive `<div>` otherwise. Meant to be laid out inside\n * `card-grid`, mirroring how `gallery-item` pairs with `photo-gallery`.\n *\n * @element link-card\n */\n@customElement(\"link-card\")\nexport class LinkCard extends LitElement {\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      .card {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        gap: 0.75rem;\n        height: 100%;\n        box-sizing: border-box;\n        padding: 1.5rem;\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius, 0.5rem);\n        background: var(--ui-surface, #ffffff);\n        color: inherit;\n        text-decoration: none;\n        transition:\n          border-color 150ms ease,\n          box-shadow 150ms ease,\n          transform 150ms ease;\n      }\n      a.card {\n        cursor: pointer;\n      }\n      .card:hover {\n        border-color: var(--ui-text-muted, #64748b);\n        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));\n        transform: translateY(-0.0625rem);\n      }\n      .card:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .status {\n        position: absolute;\n        top: 1.25rem;\n        right: 1.25rem;\n        width: 0.5rem;\n        height: 0.5rem;\n        border-radius: 9999px;\n        background: var(--ui-text-muted, #64748b);\n      }\n      .status--up {\n        background: var(--ui-success, #16a34a);\n      }\n      .status--down {\n        background: var(--ui-danger, #dc2626);\n      }\n      .logo {\n        display: flex;\n        flex: 0 0 auto;\n        align-items: center;\n        justify-content: center;\n        width: 2.5rem;\n        height: 2.5rem;\n        border-radius: var(--ui-radius, 0.5rem);\n        background: var(--ui-surface-muted, #f8fafc);\n        overflow: hidden;\n      }\n      .logo img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n      }\n      .initial {\n        font-size: var(--ui-font-size-lg, 1rem);\n        font-weight: var(--ui-font-weight-semibold, 600);\n        color: var(--ui-text-muted, #64748b);\n      }\n      .heading {\n        font-size: var(--ui-font-size-lg, 1rem);\n        font-weight: var(--ui-font-weight-semibold, 600);\n        line-height: var(--ui-line-height-tight, 1.25);\n        color: var(--ui-text, #0f172a);\n      }\n      .description {\n        font-size: var(--ui-font-size, 0.875rem);\n        line-height: var(--ui-line-height-normal, 1.5);\n        color: var(--ui-text-muted, #64748b);\n      }\n      @media (forced-colors: active) {\n        .card:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .card {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  /** Card title. */\n  @property() heading = \"\";\n  /** Optional supporting text shown below the heading. */\n  @property() description = \"\";\n  /** Destination URL. When set, the card renders as a link (opened in a new tab); when unset, a non-interactive tile. */\n  @property() href = \"\";\n  /** Logo image URL. Falls back to the first letter of `heading` if unset or it fails to load. */\n  @property() logo = \"\";\n  /** Reachability state for the corner status dot. `\"\"` (default) renders no dot. */\n  @property() status: LinkCardStatus = \"\";\n\n  @state() private _imgError = false;\n\n  protected override willUpdate(changed: Map<string, unknown>) {\n    if (changed.has(\"logo\")) this._imgError = false;\n  }\n\n  override render() {\n    const showImage = !!this.logo && !this._imgError;\n    const initial = this.heading.trim().charAt(0).toUpperCase();\n    const body = html`\n      ${this.status\n        ? html`<span\n            class=\"status status--${this.status}\"\n            role=\"img\"\n            title=${STATUS_LABEL[this.status]}\n            aria-label=${STATUS_LABEL[this.status]}\n          ></span>`\n        : nothing}\n      <span class=\"logo\">\n        ${showImage\n          ? html`<img src=${this.logo} alt=\"\" @error=${() => (this._imgError = true)} />`\n          : html`<span class=\"initial\" aria-hidden=\"true\">${initial}</span>`}\n      </span>\n      <span class=\"heading\">${this.heading}</span>\n      ${this.description ? html`<span class=\"description\">${this.description}</span>` : nothing}\n    `;\n    return this.href\n      ? html`<a class=\"card\" href=${this.href} target=\"_blank\" rel=\"noopener noreferrer\">${body}</a>`\n      : html`<div class=\"card\">${body}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"link-card\": LinkCard;\n  }\n}\n"]}

package/dist/stat-meter.d.ts

@@ -15,6 +15,8 @@ export declare class StatMeter extends LitElement {
     percent: number | null;
     /** Fill color override; falls back to the `--ui-success` token. */
     color: string;
+    /** Track (inactive portion) background override; falls back to the `--ui-surface-muted` token. */
+    trackColor: string;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/stat-meter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-meter.d.ts","sourceRoot":"","sources":["../src/stat-meter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA6DpB;IAEF,6DAA6D;IACjD,KAAK,SAAM;IAEvB,qFAAqF;IACzD,OAAO,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1D,mEAAmE;IACvD,KAAK,SAAM;IAEd,MAAM,yCAWd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"stat-meter.d.ts","sourceRoot":"","sources":["../src/stat-meter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;GAOG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA6DpB;IAEF,6DAA6D;IACjD,KAAK,SAAM;IAEvB,qFAAqF;IACzD,OAAO,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1D,mEAAmE;IACvD,KAAK,SAAM;IAEvB,kGAAkG;IAC1D,UAAU,SAAM;IAE/C,MAAM,yCAYd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/stat-meter.js

@@ -24,6 +24,8 @@ let StatMeter = class StatMeter extends LitElement {
         this.percent = null;
         /** Fill color override; falls back to the `--ui-success` token. */
         this.color = "";
+        /** Track (inactive portion) background override; falls back to the `--ui-surface-muted` token. */
+        this.trackColor = "";
     }
     static { this.styles = [
         tokens,
@@ -56,7 +58,7 @@ let StatMeter = class StatMeter extends LitElement {
         width: 4rem;
         height: 0.375rem;
         border-radius: 9999px;
-        background: var(--ui-surface-muted, #f8fafc);
+        background: var(--track-color, var(--ui-surface-muted, #f8fafc));
         overflow: hidden;
       }
 
@@ -91,9 +93,10 @@ let StatMeter = class StatMeter extends LitElement {
         const pct = this.percent;
         const clamped = pct === null ? 0 : Math.min(100, Math.max(0, pct));
         const fillStyle = this.color ? `width: ${clamped}%; --fill-color: ${this.color}` : `width: ${clamped}%`;
+        const trackStyle = this.trackColor ? `--track-color: ${this.trackColor}` : "";
         return html `
       <span class="label">${this.label}</span>
-      <span class="track" role="img" aria-label="${this.label} ${pct === null ? "no reading" : `${pct}%`}">
+      <span class="track" role="img" style=${trackStyle} aria-label="${this.label} ${pct === null ? "no reading" : `${pct}%`}">
         <span class="fill" style=${fillStyle}></span>
       </span>
       <span class="value">${pct === null ? "—" : `${pct}%`}</span>
@@ -109,6 +112,9 @@ __decorate([
 __decorate([
     property()
 ], StatMeter.prototype, "color", void 0);
+__decorate([
+    property({ attribute: "track-color" })
+], StatMeter.prototype, "trackColor", void 0);
 StatMeter = __decorate([
     customElement("stat-meter")
 ], StatMeter);

package/dist/stat-meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat-meter.js","sourceRoot":"","sources":["../src/stat-meter.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;GAOG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAgEL,6DAA6D;QACjD,UAAK,GAAG,EAAE,CAAC;QAEvB,qFAAqF;QACzD,YAAO,GAAkB,IAAI,CAAC;QAE1D,mEAAmE;QACvD,UAAK,GAAG,EAAE,CAAC;IAczB,CAAC;aApFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0DF;KACF,AA7DqB,CA6DpB;IAWO,MAAM;QACb,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC;QACzB,MAAM,OAAO,GAAG,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;QACnE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,OAAO,oBAAoB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,OAAO,GAAG,CAAC;QACxG,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,KAAK;mDACa,IAAI,CAAC,KAAK,IAAI,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG;mCACrE,SAAS;;4BAEhB,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG;KACrD,CAAC;IACJ,CAAC;CACF,CAAA;AApBa;IAAX,QAAQ,EAAE;wCAAY;AAGK;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA+B;AAG9C;IAAX,QAAQ,EAAE;wCAAY;AAvEZ,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAqFrB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * A compact labeled meter for a single percentage reading — e.g. CPU or\n * memory usage in a dashboard header. `percent` may be `null` when no\n * reading is available yet (e.g. the first tick of a polling metric); the\n * bar then renders empty and the value shows an em dash instead of \"0%\".\n *\n * @element stat-meter\n */\n@customElement(\"stat-meter\")\nexport class StatMeter extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.5rem;\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\n      .label {\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: var(--ui-font-weight-semibold, 600);\n        letter-spacing: var(--ui-tracking-wide, 0.04em);\n        color: var(--ui-text-muted, #64748b);\n      }\n\n      .track {\n        display: block;\n        width: 4rem;\n        height: 0.375rem;\n        border-radius: 9999px;\n        background: var(--ui-surface-muted, #f8fafc);\n        overflow: hidden;\n      }\n\n      .fill {\n        display: block;\n        height: 100%;\n        /* Keep the top highlight while softening the dark edge for compact meters. */\n        background: linear-gradient(\n          to bottom,\n          color-mix(in srgb, var(--fill-color, var(--ui-success, #16a34a)) 70%, #ffffff) 0%,\n          color-mix(in srgb, var(--fill-color, var(--ui-success, #16a34a)) 80%, #000000) 100%\n        );\n        transition: width 200ms ease;\n      }\n\n      .value {\n        min-width: 2rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: var(--ui-font-weight-medium, 500);\n        color: var(--ui-text, #0f172a);\n        font-variant-numeric: tabular-nums;\n        text-align: right;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .fill {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  /** Short label shown before the bar, e.g. \"CPU\" or \"MEM\". */\n  @property() label = \"\";\n\n  /** Percentage 0-100. `null` renders an empty bar and a \"—\" value instead of \"0%\". */\n  @property({ type: Number }) percent: number | null = null;\n\n  /** Fill color override; falls back to the `--ui-success` token. */\n  @property() color = \"\";\n\n  override render() {\n    const pct = this.percent;\n    const clamped = pct === null ? 0 : Math.min(100, Math.max(0, pct));\n    const fillStyle = this.color ? `width: ${clamped}%; --fill-color: ${this.color}` : `width: ${clamped}%`;\n    return html`\n      <span class=\"label\">${this.label}</span>\n      <span class=\"track\" role=\"img\" aria-label=\"${this.label} ${pct === null ? \"no reading\" : `${pct}%`}\">\n        <span class=\"fill\" style=${fillStyle}></span>\n      </span>\n      <span class=\"value\">${pct === null ? \"—\" : `${pct}%`}</span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"stat-meter\": StatMeter;\n  }\n}\n"]}
+{"version":3,"file":"stat-meter.js","sourceRoot":"","sources":["../src/stat-meter.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;GAOG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAgEL,6DAA6D;QACjD,UAAK,GAAG,EAAE,CAAC;QAEvB,qFAAqF;QACzD,YAAO,GAAkB,IAAI,CAAC;QAE1D,mEAAmE;QACvD,UAAK,GAAG,EAAE,CAAC;QAEvB,kGAAkG;QAC1D,eAAU,GAAG,EAAE,CAAC;IAe1D,CAAC;aAxFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0DF;KACF,AA7DqB,CA6DpB;IAcO,MAAM;QACb,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC;QACzB,MAAM,OAAO,GAAG,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;QACnE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,OAAO,oBAAoB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,OAAO,GAAG,CAAC;QACxG,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC9E,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,KAAK;6CACO,UAAU,gBAAgB,IAAI,CAAC,KAAK,IAAI,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG;mCACzF,SAAS;;4BAEhB,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG;KACrD,CAAC;IACJ,CAAC;CACF,CAAA;AAxBa;IAAX,QAAQ,EAAE;wCAAY;AAGK;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA+B;AAG9C;IAAX,QAAQ,EAAE;wCAAY;AAGiB;IAAvC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;6CAAiB;AA1E7C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAyFrB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * A compact labeled meter for a single percentage reading — e.g. CPU or\n * memory usage in a dashboard header. `percent` may be `null` when no\n * reading is available yet (e.g. the first tick of a polling metric); the\n * bar then renders empty and the value shows an em dash instead of \"0%\".\n *\n * @element stat-meter\n */\n@customElement(\"stat-meter\")\nexport class StatMeter extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.5rem;\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\n      .label {\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: var(--ui-font-weight-semibold, 600);\n        letter-spacing: var(--ui-tracking-wide, 0.04em);\n        color: var(--ui-text-muted, #64748b);\n      }\n\n      .track {\n        display: block;\n        width: 4rem;\n        height: 0.375rem;\n        border-radius: 9999px;\n        background: var(--track-color, var(--ui-surface-muted, #f8fafc));\n        overflow: hidden;\n      }\n\n      .fill {\n        display: block;\n        height: 100%;\n        /* Keep the top highlight while softening the dark edge for compact meters. */\n        background: linear-gradient(\n          to bottom,\n          color-mix(in srgb, var(--fill-color, var(--ui-success, #16a34a)) 70%, #ffffff) 0%,\n          color-mix(in srgb, var(--fill-color, var(--ui-success, #16a34a)) 80%, #000000) 100%\n        );\n        transition: width 200ms ease;\n      }\n\n      .value {\n        min-width: 2rem;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: var(--ui-font-weight-medium, 500);\n        color: var(--ui-text, #0f172a);\n        font-variant-numeric: tabular-nums;\n        text-align: right;\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .fill {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  /** Short label shown before the bar, e.g. \"CPU\" or \"MEM\". */\n  @property() label = \"\";\n\n  /** Percentage 0-100. `null` renders an empty bar and a \"—\" value instead of \"0%\". */\n  @property({ type: Number }) percent: number | null = null;\n\n  /** Fill color override; falls back to the `--ui-success` token. */\n  @property() color = \"\";\n\n  /** Track (inactive portion) background override; falls back to the `--ui-surface-muted` token. */\n  @property({ attribute: \"track-color\" }) trackColor = \"\";\n\n  override render() {\n    const pct = this.percent;\n    const clamped = pct === null ? 0 : Math.min(100, Math.max(0, pct));\n    const fillStyle = this.color ? `width: ${clamped}%; --fill-color: ${this.color}` : `width: ${clamped}%`;\n    const trackStyle = this.trackColor ? `--track-color: ${this.trackColor}` : \"\";\n    return html`\n      <span class=\"label\">${this.label}</span>\n      <span class=\"track\" role=\"img\" style=${trackStyle} aria-label=\"${this.label} ${pct === null ? \"no reading\" : `${pct}%`}\">\n        <span class=\"fill\" style=${fillStyle}></span>\n      </span>\n      <span class=\"value\">${pct === null ? \"—\" : `${pct}%`}</span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"stat-meter\": StatMeter;\n  }\n}\n"]}

package/dist/text-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../src/text-area.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;GAUG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,4BAA4B;IAChB,KAAK,SAAM;IACvB,oDAAoD;IACxB,IAAI,SAAK;IACrC,yCAAyC;IAC7B,WAAW,SAAM;IAC7B,kEAAkE;IACrC,QAAQ,UAAS;IAC9C,4DAA4D;IAC/B,QAAQ,UAAS;IAE9C,OAAgB,MAAM,4BAqDpB;IAEF,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,SAAS;IAOR,MAAM,yCAYd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../src/text-area.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;GAUG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,4BAA4B;IAChB,KAAK,SAAM;IACvB,oDAAoD;IACxB,IAAI,SAAK;IACrC,yCAAyC;IAC7B,WAAW,SAAM;IAC7B,kEAAkE;IACrC,QAAQ,UAAS;IAC9C,4DAA4D;IAC/B,QAAQ,UAAS;IAE9C,OAAgB,MAAM,4BAqDpB;IAEF,OAAO,CAAC,QAAQ;IAahB,OAAO,CAAC,SAAS;IAQR,MAAM,yCAYd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/text-area.js

@@ -87,10 +87,17 @@ let TextArea = class TextArea extends LitElement {
     `,
     ]; }
     _onInput(e) {
+        // The native textarea's own "input" event is composed (crosses the shadow
+        // boundary) — stop it so only our re-dispatched CustomEvent (carrying
+        // `detail.value`) reaches consumers. Otherwise the native event bubbles
+        // out afterwards too, re-invoking the same "input" listener with a plain
+        // UIEvent whose `detail` defaults to 0, clobbering consumer state.
+        e.stopPropagation();
         this.value = e.target.value;
         this.dispatchEvent(new CustomEvent("input", { detail: { value: this.value }, bubbles: true, composed: true }));
     }
     _onChange(e) {
+        e.stopPropagation();
         this.value = e.target.value;
         this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value }, bubbles: true, composed: true }));
     }

package/dist/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../src/text-area.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;GAUG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QACL,4BAA4B;QAChB,UAAK,GAAG,EAAE,CAAC;QACvB,oDAAoD;QACxB,SAAI,GAAG,CAAC,CAAC;QACrC,yCAAyC;QAC7B,gBAAW,GAAG,EAAE,CAAC;QAC7B,kEAAkE;QACrC,aAAQ,GAAG,KAAK,CAAC;QAC9C,4DAA4D;QAC/B,aAAQ,GAAG,KAAK,CAAC;IAoFhD,CAAC;aAlFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;KACF,AArDqB,CAqDpB;IAEM,QAAQ,CAAC,CAAQ;QACvB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA8B,CAAC,KAAK,CAAC;QACrD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAC3F,CAAC;IACJ,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA8B,CAAC,KAAK,CAAC;QACrD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAC5F,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;eACZ,IAAI,CAAC,IAAI;sBACF,IAAI,CAAC,WAAW;oBAClB,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,QAAQ;kBACZ,IAAI,CAAC,SAAS;;KAE3B,CAAC;IACJ,CAAC;CACF,CAAA;AA5Fa;IAAX,QAAQ,EAAE;uCAAY;AAEK;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAU;AAEzB;IAAX,QAAQ,EAAE;6CAAkB;AAEA;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAVnC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA8FpB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Plain multi-line text field — a thin, tokenized wrapper around a native\n * `<textarea>`, styled to match the other value-entry form fields\n * (autocomplete-input, form-select, ...). Not a rich editor; use `readonly`\n * to display pre-formatted text (e.g. an error message) that the user can\n * still select and copy, typically paired with `<copy-link-button>`.\n *\n * @element text-area\n * @fires input - Fires on every keystroke; detail: { value: string }.\n * @fires change - Native change semantics (on blur, if the value changed); detail: { value: string }.\n */\n@customElement(\"text-area\")\nexport class TextArea extends LitElement {\n  /** Current text content. */\n  @property() value = \"\";\n  /** Visible row count (native `<textarea rows>`). */\n  @property({ type: Number }) rows = 4;\n  /** Placeholder text shown when empty. */\n  @property() placeholder = \"\";\n  /** When true, the value can be selected/copied but not edited. */\n  @property({ type: Boolean }) readonly = false;\n  /** Disables the field entirely (no interaction, dimmed). */\n  @property({ type: Boolean }) disabled = false;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      textarea {\n        display: block;\n        box-sizing: border-box;\n        width: 100%;\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        font-size: var(--ui-font-size-sm, 0.75rem);\n        line-height: var(--ui-line-height-normal, 1.5);\n        color: var(--ui-text, #0f172a);\n        background: var(--ui-surface, #ffffff);\n        padding: 0.5rem 0.75rem;\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        resize: vertical;\n      }\n      textarea:read-only {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      textarea:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      textarea:focus-visible {\n        outline: none;\n        border-color: var(--ui-primary, #4f46e5);\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      @media (forced-colors: active) {\n        textarea:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n        textarea:disabled {\n          color: GrayText;\n          opacity: 1;\n        }\n      }\n    `,\n  ];\n\n  private _onInput(e: Event): void {\n    this.value = (e.target as HTMLTextAreaElement).value;\n    this.dispatchEvent(\n      new CustomEvent(\"input\", { detail: { value: this.value }, bubbles: true, composed: true }),\n    );\n  }\n\n  private _onChange(e: Event): void {\n    this.value = (e.target as HTMLTextAreaElement).value;\n    this.dispatchEvent(\n      new CustomEvent(\"change\", { detail: { value: this.value }, bubbles: true, composed: true }),\n    );\n  }\n\n  override render() {\n    return html`\n      <textarea\n        .value=${this.value}\n        rows=${this.rows}\n        placeholder=${this.placeholder}\n        ?readonly=${this.readonly}\n        ?disabled=${this.disabled}\n        @input=${this._onInput}\n        @change=${this._onChange}\n      ></textarea>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"text-area\": TextArea;\n  }\n}\n"]}
+{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../src/text-area.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;;GAUG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QACL,4BAA4B;QAChB,UAAK,GAAG,EAAE,CAAC;QACvB,oDAAoD;QACxB,SAAI,GAAG,CAAC,CAAC;QACrC,yCAAyC;QAC7B,gBAAW,GAAG,EAAE,CAAC;QAC7B,kEAAkE;QACrC,aAAQ,GAAG,KAAK,CAAC;QAC9C,4DAA4D;QAC/B,aAAQ,GAAG,KAAK,CAAC;IA2FhD,CAAC;aAzFiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;KACF,AArDqB,CAqDpB;IAEM,QAAQ,CAAC,CAAQ;QACvB,0EAA0E;QAC1E,sEAAsE;QACtE,wEAAwE;QACxE,yEAAyE;QACzE,mEAAmE;QACnE,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA8B,CAAC,KAAK,CAAC;QACrD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAC3F,CAAC;IACJ,CAAC;IAEO,SAAS,CAAC,CAAQ;QACxB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA8B,CAAC,KAAK,CAAC;QACrD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAC5F,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;eACZ,IAAI,CAAC,IAAI;sBACF,IAAI,CAAC,WAAW;oBAClB,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,QAAQ;kBACZ,IAAI,CAAC,SAAS;;KAE3B,CAAC;IACJ,CAAC;CACF,CAAA;AAnGa;IAAX,QAAQ,EAAE;uCAAY;AAEK;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAU;AAEzB;IAAX,QAAQ,EAAE;6CAAkB;AAEA;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAVnC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAqGpB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Plain multi-line text field — a thin, tokenized wrapper around a native\n * `<textarea>`, styled to match the other value-entry form fields\n * (autocomplete-input, form-select, ...). Not a rich editor; use `readonly`\n * to display pre-formatted text (e.g. an error message) that the user can\n * still select and copy, typically paired with `<copy-link-button>`.\n *\n * @element text-area\n * @fires input - Fires on every keystroke; detail: { value: string }.\n * @fires change - Native change semantics (on blur, if the value changed); detail: { value: string }.\n */\n@customElement(\"text-area\")\nexport class TextArea extends LitElement {\n  /** Current text content. */\n  @property() value = \"\";\n  /** Visible row count (native `<textarea rows>`). */\n  @property({ type: Number }) rows = 4;\n  /** Placeholder text shown when empty. */\n  @property() placeholder = \"\";\n  /** When true, the value can be selected/copied but not edited. */\n  @property({ type: Boolean }) readonly = false;\n  /** Disables the field entirely (no interaction, dimmed). */\n  @property({ type: Boolean }) disabled = false;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      textarea {\n        display: block;\n        box-sizing: border-box;\n        width: 100%;\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        font-size: var(--ui-font-size-sm, 0.75rem);\n        line-height: var(--ui-line-height-normal, 1.5);\n        color: var(--ui-text, #0f172a);\n        background: var(--ui-surface, #ffffff);\n        padding: 0.5rem 0.75rem;\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        resize: vertical;\n      }\n      textarea:read-only {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      textarea:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      textarea:focus-visible {\n        outline: none;\n        border-color: var(--ui-primary, #4f46e5);\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      @media (forced-colors: active) {\n        textarea:focus-visible {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n        textarea:disabled {\n          color: GrayText;\n          opacity: 1;\n        }\n      }\n    `,\n  ];\n\n  private _onInput(e: Event): void {\n    // The native textarea's own \"input\" event is composed (crosses the shadow\n    // boundary) — stop it so only our re-dispatched CustomEvent (carrying\n    // `detail.value`) reaches consumers. Otherwise the native event bubbles\n    // out afterwards too, re-invoking the same \"input\" listener with a plain\n    // UIEvent whose `detail` defaults to 0, clobbering consumer state.\n    e.stopPropagation();\n    this.value = (e.target as HTMLTextAreaElement).value;\n    this.dispatchEvent(\n      new CustomEvent(\"input\", { detail: { value: this.value }, bubbles: true, composed: true }),\n    );\n  }\n\n  private _onChange(e: Event): void {\n    e.stopPropagation();\n    this.value = (e.target as HTMLTextAreaElement).value;\n    this.dispatchEvent(\n      new CustomEvent(\"change\", { detail: { value: this.value }, bubbles: true, composed: true }),\n    );\n  }\n\n  override render() {\n    return html`\n      <textarea\n        .value=${this.value}\n        rows=${this.rows}\n        placeholder=${this.placeholder}\n        ?readonly=${this.readonly}\n        ?disabled=${this.disabled}\n        @input=${this._onInput}\n        @change=${this._onChange}\n      ></textarea>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"text-area\": TextArea;\n  }\n}\n"]}

package/dist/timeline-entry.d.ts

@@ -17,6 +17,10 @@ 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.
+ *
  * @element timeline-entry
  * @slot headline - Optional headline/title for the event.
  * @slot - The event content; nest any elements here.
@@ -29,6 +33,11 @@ export declare class TimelineEntry extends LitElement {
      * `primary` (default), `neutral`, `info`, `success`, `warning`, or `danger`.
      */
     color: StatusPillColor;
+    /**
+     * Dense, one-line presentation for system-status entries: tighter vertical
+     * spacing and smaller, muted content.
+     */
+    compact: 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;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,uEAAuE;IAC3D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3C;;;OAGG;IACS,KAAK,EAAE,eAAe,CAAa;IAE/C,gEAAgE;IACvD,OAAO,CAAC,YAAY,CAAS;IAEtC,OAAgB,MAAM,4BAoHpB;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;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/timeline-entry.js

@@ -24,6 +24,10 @@ 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.
+ *
  * @element timeline-entry
  * @slot headline - Optional headline/title for the event.
  * @slot - The event content; nest any elements here.
@@ -38,6 +42,11 @@ let TimelineEntry = class TimelineEntry extends LitElement {
          * `primary` (default), `neutral`, `info`, `success`, `warning`, or `danger`.
          */
         this.color = "primary";
+        /**
+         * Dense, one-line presentation for system-status entries: tighter vertical
+         * spacing and smaller, muted content.
+         */
+        this.compact = false;
         /** Whether the headline slot currently has assigned content. */
         this._hasHeadline = false;
     }
@@ -156,6 +165,17 @@ let TimelineEntry = class TimelineEntry extends LitElement {
         line-height: var(--ui-line-height-normal, 1.5);
         color: var(--ui-text, #0f172a);
       }
+      :host([compact]) .body {
+        padding-bottom: 0.5rem;
+      }
+      :host([compact]:last-child) .body {
+        padding-bottom: 0;
+      }
+      :host([compact]) .content {
+        margin-top: 0.125rem;
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        color: var(--ui-text-muted, #64748b);
+      }
     `,
     ]; }
     connectedCallback() {
@@ -196,6 +216,9 @@ __decorate([
 __decorate([
     property()
 ], TimelineEntry.prototype, "color", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TimelineEntry.prototype, "compact", 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;;;;;;;;;;;;;;;;;;;GAmBG;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,gEAAgE;QAC/C,iBAAY,GAAG,KAAK,CAAC;IAwJxC,CAAC;aAtJiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiHF;KACF,AApHqB,CAoHpB;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;AAjKa;IAAX,QAAQ,EAAE;+CAAgC;AAM/B;IAAX,QAAQ,EAAE;4CAAoC;AAG9B;IAAhB,KAAK,EAAE;mDAA8B;AAX3B,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAmKzB","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 * @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  /** 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    `,\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;;;;;;;;;;;;;;;;;;;;;;;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"]}