@f-ewald/components 1.7.0 → 1.9.0

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` |

package/docs/stat-meter.md

@@ -27,6 +27,7 @@ import "@f-ewald/components/stat-meter.js";
 | `label` | `label` | `string` | `""` | Short label shown before the bar, e.g. "CPU" or "MEM". |
 | `percent` | `percent` | `number | null` | `null` | Percentage 0-100. `null` renders an empty bar and a "—" value instead of "0%". |
 | `color` | `color` | `string` | `""` | Fill color override; falls back to the `--ui-success` token. |
+| `trackColor` | `track-color` | `string` | `""` | Track (inactive portion) background override; falls back to the `--ui-surface-muted` token. |
 
 ## Events
 

package/docs/timeline-entry.md

@@ -15,6 +15,10 @@ The dot's `color` types the entry using the shared status-pill palette —
 `primary` by default, plus `neutral`, `info`, `success`, `warning`, and
 `danger`.
 
+Set `compact` for dense, one-line system-status entries (running spinners,
+state changes): it tightens the vertical spacing and renders the content
+smaller and muted.
+
 ## Install
 
 ```js
@@ -36,6 +40,7 @@ import "@f-ewald/components/timeline-entry.js";
 | --- | --- | --- | --- | --- |
 | `datetime` | `datetime` | `string | null` | `null` | ISO 8601 or SQLite datetime string, rendered as a relative time. |
 | `color` | `color` | `StatusPillColor` | `"primary"` | Visual type of the entry's dot, from the shared status-pill palette: `primary` (default), `neutral`, `info`, `success`, `warning`, or `danger`. |
+| `compact` | `compact` | `boolean` | `false` | Dense, one-line presentation for system-status entries: tighter vertical spacing and smaller, muted content. |
 
 ## Events
 

package/llms.txt

@@ -310,6 +310,32 @@ Example:
 </calendar-year>
 ```
 
+## <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.
+
+Import: `import "@f-ewald/components/card-grid.js";`
+
+Properties: none
+Events: none
+CSS custom properties: none
+
+Example:
+```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>
+```
+
 ## <chat-message>
 
 One conversation entry in a chat-style activity feed. Tool calls and
@@ -809,6 +835,32 @@ Example:
 <kbd-hint keys="Mod+Shift+Enter" platform="mac"></kbd-hint>
 ```
 
+## <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`.
+
+Import: `import "@f-ewald/components/link-card.js";`
+
+Properties: `heading` (attribute `heading`) : string, default ""; `description` (attribute `description`) : string, default ""; `href` (attribute `href`) : string, default ""; `logo` (attribute `logo`) : string, default ""; `status` (attribute `status`) : LinkCardStatus, default ""
+Events: none
+CSS custom properties: `--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`
+
+Example:
+```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>
+```
+
 ## <live-timer>
 
 Per-second ticking count-up timer, e.g. a live "running for 12s" or
@@ -1235,7 +1287,7 @@ bar then renders empty and the value shows an em dash instead of "0%".
 
 Import: `import "@f-ewald/components/stat-meter.js";`
 
-Properties: `label` (attribute `label`) : string, default ""; `percent` (attribute `percent`) : number | null, default null; `color` (attribute `color`) : string, default ""
+Properties: `label` (attribute `label`) : string, default ""; `percent` (attribute `percent`) : number | null, default null; `color` (attribute `color`) : string, default ""; `trackColor` (attribute `track-color`) : string, default ""
 Events: none
 CSS custom properties: `--ui-font`, `--ui-font-size-sm`, `--ui-font-weight-medium`, `--ui-font-weight-semibold`, `--ui-success`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`, `--ui-tracking-wide`
 
@@ -1369,9 +1421,13 @@ The dot's `color` types the entry using the shared status-pill palette —
 `primary` by default, plus `neutral`, `info`, `success`, `warning`, and
 `danger`.
 
+Set `compact` for dense, one-line system-status entries (running spinners,
+state changes): it tightens the vertical spacing and renders the content
+smaller and muted.
+
 Import: `import "@f-ewald/components/timeline-entry.js";`
 
-Properties: `datetime` (attribute `datetime`) : string | null, default null; `color` (attribute `color`) : StatusPillColor, default "primary"
+Properties: `datetime` (attribute `datetime`) : string | null, default null; `color` (attribute `color`) : StatusPillColor, default "primary"; `compact` (attribute `compact`) : boolean, default false
 Events: none
 CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-font-weight-semibold`, `--ui-info`, `--ui-line-height-normal`, `--ui-line-height-tight`, `--ui-primary`, `--ui-success`, `--ui-text`, `--ui-text-muted`, `--ui-warning`
 

package/package.json

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