@f-ewald/components 1.8.0 → 1.10.0

package/dist/card-grid.js

@@ -0,0 +1,44 @@
+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 } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+/**
+ * A responsive auto-filling grid shell for `link-card` (or any card-shaped
+ * content) — each slotted child becomes a grid item, wrapping to a new row
+ * once the container is too narrow for another `15rem` column.
+ *
+ * @element card-grid
+ * @slot - `link-card` elements (or other card-shaped content).
+ */
+let CardGrid = class CardGrid extends LitElement {
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+        gap: 1rem;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="grid">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+CardGrid = __decorate([
+    customElement("card-grid")
+], CardGrid);
+export { CardGrid };
+//# sourceMappingURL=card-grid.js.map

package/dist/card-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-grid.js","sourceRoot":"","sources":["../src/card-grid.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;GAOG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;aACtB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;KASF;KACF,AAZqB,CAYpB;IAEO,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF,CAAA;AAtBY,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsBpB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * A responsive auto-filling grid shell for `link-card` (or any card-shaped\n * content) — each slotted child becomes a grid item, wrapping to a new row\n * once the container is too narrow for another `15rem` column.\n *\n * @element card-grid\n * @slot - `link-card` elements (or other card-shaped content).\n */\n@customElement(\"card-grid\")\nexport class CardGrid extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      .grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));\n        gap: 1rem;\n      }\n    `,\n  ];\n\n  override render() {\n    return html`\n      <div class=\"grid\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"card-grid\": CardGrid;\n  }\n}\n"]}

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export { MapPin } from "./map-pin.js";
 export { MapCircle } from "./map-circle.js";
 export { RadioCards, type RadioCardOption } from "./radio-cards.js";
 export { RadioPills, type RadioPillOption } from "./radio-pills.js";
+export { ButtonGroup, type ButtonGroupOption } from "./button-group.js";
 export { UiButton, type ButtonVariant } from "./ui-button.js";
 export { StatMeter } from "./stat-meter.js";
 export { StatusPill, type StatusPillColor } from "./status-pill.js";
@@ -52,6 +53,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

@@ -22,6 +22,7 @@ export { MapPin } from "./map-pin.js";
 export { MapCircle } from "./map-circle.js";
 export { RadioCards } from "./radio-cards.js";
 export { RadioPills } from "./radio-pills.js";
+export { ButtonGroup } from "./button-group.js";
 export { UiButton } from "./ui-button.js";
 export { StatMeter } from "./stat-meter.js";
 export { StatusPill } from "./status-pill.js";
@@ -52,6 +53,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 { ButtonGroup, type ButtonGroupOption } from \"./button-group.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/docs/button-group.md

@@ -0,0 +1,64 @@
+# `<button-group>`
+
+Single-select segmented control — a strip of buttons joined into one
+shared-border shape, for a small, persistent set of mutually exclusive
+choices (a view switcher, a theme picker) where the *currently selected*
+option should read as visually "pressed," not just checked. For many
+short, individually pill-shaped choices, use `radio-pills` instead. Wraps
+native radio inputs for keyboard/a11y and fires `change` rather than
+relying on form submission.
+
+## Install
+
+```js
+import "@f-ewald/components/button-group.js";
+```
+
+## Usage
+
+```html
+<button-group></button-group>
+<script type="module">
+  const el = document.querySelector("button-group");
+  el.options = [
+    { value: "list", label: "List" },
+    { value: "kanban", label: "Kanban" },
+  ];
+  el.value = "list";
+  el.addEventListener("change", (e) => console.log(e.detail.value));
+</script>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `options` | _(JS property only)_ | `ButtonGroupOption[]` | `[]` | Options to render, one segment each. |
+| `value` | `value` | `string` | `""` | Currently selected value. |
+| `disabled` | `disabled` | `boolean` | `false` | Disables every native radio in the group. |
+
+## Events
+
+| Event | Description |
+| --- | --- |
+| `change` | A segment was selected; detail: { value }. |
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-border` |
+| `--ui-focus-ring` |
+| `--ui-font` |
+| `--ui-font-size-sm` |
+| `--ui-font-weight-medium` |
+| `--ui-line-height-tight` |
+| `--ui-on-accent` |
+| `--ui-primary` |
+| `--ui-radius-sm` |
+| `--ui-surface-muted` |
+| `--ui-text` |

package/docs/card-grid.md

@@ -0,0 +1,44 @@
+# `<card-grid>`
+
+A responsive auto-filling grid shell for `link-card` (or any card-shaped
+content) — each slotted child becomes a grid item, wrapping to a new row
+once the container is too narrow for another `15rem` column.
+
+## Install
+
+```js
+import "@f-ewald/components/card-grid.js";
+```
+
+## Usage
+
+```html
+<card-grid>
+  <link-card
+    heading="Grafana"
+    description="Metrics dashboards."
+    href="https://grafana.example.com"
+    logo="/logos/grafana.svg"
+    status="up"
+  ></link-card>
+  <link-card heading="Plex" description="Media server." href="https://plex.example.com" status="up"></link-card>
+</card-grid>
+```
+
+## Attributes / properties
+
+_None._
+
+## Events
+
+_None._
+
+## Slots
+
+| Slot | Description |
+| --- | --- |
+| `(default)` | `link-card` elements (or other card-shaped content). |
+
+## CSS custom properties
+
+_None._

package/docs/link-card.md

@@ -0,0 +1,65 @@
+# `<link-card>`
+
+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`.
+
+## Install
+
+```js
+import "@f-ewald/components/link-card.js";
+```
+
+## Usage
+
+```html
+<link-card
+  heading="Grafana"
+  description="Metrics dashboards."
+  href="https://grafana.example.com"
+  logo="/logos/grafana.svg"
+  status="up"
+></link-card>
+<link-card heading="Backup Server" description="Nightly restic snapshots." status="checking"></link-card>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `heading` | `heading` | `string` | `""` | Card title. |
+| `description` | `description` | `string` | `""` | Optional supporting text shown below the heading. |
+| `href` | `href` | `string` | `""` | Destination URL. When set, the card renders as a link (opened in a new tab); when unset, a non-interactive tile. |
+| `logo` | `logo` | `string` | `""` | Logo image URL. Falls back to the first letter of `heading` if unset or it fails to load. |
+| `status` | `status` | `LinkCardStatus` | `""` | Reachability state for the corner status dot. `""` (default) renders no dot. |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-border` |
+| `--ui-danger` |
+| `--ui-focus-ring` |
+| `--ui-font` |
+| `--ui-font-size` |
+| `--ui-font-size-lg` |
+| `--ui-font-weight-semibold` |
+| `--ui-line-height-normal` |
+| `--ui-line-height-tight` |
+| `--ui-radius` |
+| `--ui-shadow` |
+| `--ui-success` |
+| `--ui-surface` |
+| `--ui-surface-muted` |
+| `--ui-text` |
+| `--ui-text-muted` |