@anton-gustafsson/snapshot-core 0.0.5 → 0.0.6

package/dist/snapshot-nav-list.d.ts

@@ -8,7 +8,7 @@ export interface NavItem {
     route?: string;
     description?: string;
 }
-export type SnapshotNavListVariant = 'list' | 'icon-only';
+export type SnapshotNavListVariant = 'list' | 'icon-only' | 'card';
 /**
  * Visual identity: a contact sheet. Every tile is a "frame" — numbered like a strip
  * of negatives — because that's literally what a snapshot thumbnail is. All colors
@@ -21,8 +21,10 @@ export declare class SnapshotNavList extends LitElement {
     variant: SnapshotNavListVariant;
     /** icon-only tile overlay: tint behind the title so it stays legible over any image. Transparent by default — opt into a scrim explicitly. */
     overlayTint: 'dark' | 'light' | 'none';
-    /** overlay tint strength, 0-1 */
-    overlayOpacity: number;
+    /** caption background tint strength, 0-1 */
+    textOverlayOpacity: number;
+    /** image scrim tint strength, 0-1 — 0 keeps the image clear (blur only) */
+    imageOverlayOpacity: number;
     /** backdrop blur behind the title, in px */
     overlayBlur: number;
     /** icon-only only: 'bottom' is the caption strip (default), 'center' centers a larger title. */
@@ -42,7 +44,10 @@ export declare class SnapshotNavList extends LitElement {
     willUpdate(changed: Map<string, unknown>): void;
     updated(changed: Map<string, unknown>): void;
     private loadThumb;
-    private get overlayStyle();
+    /** image scrim: blur + its own (usually 0) tint strength — independent of the caption's. */
+    private get imageOverlayStyle();
+    /** caption background: tint (to pop the text) + the same blur. */
+    private get metaStyle();
     private select;
     private edit;
     render(): import("lit-html").TemplateResult<1>;

package/dist/snapshot-nav-list.js

@@ -25,8 +25,10 @@ export class SnapshotNavList extends LitElement {
         this.variant = 'icon-only';
         /** icon-only tile overlay: tint behind the title so it stays legible over any image. Transparent by default — opt into a scrim explicitly. */
         this.overlayTint = 'none';
-        /** overlay tint strength, 0-1 */
-        this.overlayOpacity = 0.35;
+        /** caption background tint strength, 0-1 */
+        this.textOverlayOpacity = 0.35;
+        /** image scrim tint strength, 0-1 — 0 keeps the image clear (blur only) */
+        this.imageOverlayOpacity = 0;
         /** backdrop blur behind the title, in px */
         this.overlayBlur = 0;
         /** icon-only only: 'bottom' is the caption strip (default), 'center' centers a larger title. */
@@ -171,7 +173,7 @@ export class SnapshotNavList extends LitElement {
       }
     }
 
-    /* tint/blur controls apply only to the image, via this scrim layered on top of it */
+    /* independent from .meta's tint — image-overlay-opacity defaults to 0 so the image stays clear (blur only) */
     .image-overlay {
       position: absolute;
       inset: 0;
@@ -298,6 +300,72 @@ export class SnapshotNavList extends LitElement {
       font-weight: 600;
       text-align: center;
     }
+
+    /* card: a contained (never cropped) preview above real body text below it —
+       text never sits on top of the image, so unlike icon-only it needs no
+       overlay tint to stay legible. Modeled on a typical "preview card"
+       pattern: framed shot, title + description underneath, shadow on hover. */
+    :host([variant='card']) ul {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(var(--snapshot-nav-list-card-min-width, 220px), 1fr));
+      gap: var(--snapshot-nav-list-card-gap, 1.25rem);
+    }
+    :host([variant='card']) li {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0;
+      padding: var(--snapshot-nav-list-card-padding, 0.5rem);
+      background: var(--snapshot-nav-list-card-bg, transparent);
+      border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+      box-shadow: none;
+      transition:
+        box-shadow var(--snapshot-nav-list-card-transition-dur, 0.15s) ease,
+        border-color var(--snapshot-nav-list-card-transition-dur, 0.15s) ease;
+    }
+    :host([variant='card']) li:hover,
+    :host([variant='card']) li:focus-visible {
+      background: var(--snapshot-nav-list-card-bg, transparent);
+      box-shadow: var(--snapshot-nav-list-card-shadow, 0 2px 8px color-mix(in srgb, currentColor 18%, transparent));
+      border-color: color-mix(in srgb, currentColor 22%, transparent);
+    }
+    :host([variant='card']) li:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-accent) 55%, transparent);
+    }
+    :host([variant='card']) li:focus-visible .thumb-wrap {
+      outline: none;
+    }
+    :host([variant='card']) .thumb-wrap {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 2 / 1;
+      border-radius: var(--snapshot-nav-list-radius-sm, 7px);
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
+      background: color-mix(in srgb, currentColor 4%, transparent);
+      display: grid;
+      place-items: center;
+    }
+    :host([variant='card']) .thumb-wrap::before,
+    :host([variant='card']) .thumb-wrap::after {
+      display: none;
+    }
+    :host([variant='card']) img.thumb {
+      /* contain, not cover — the whole dashboard stays readable, nothing cropped */
+      object-fit: contain;
+    }
+    :host([variant='card']) .meta {
+      padding: 0.75rem 0.5rem 0.5rem;
+      gap: 0.25rem;
+    }
+    :host([variant='card']) .label {
+      white-space: normal;
+      font-size: 1rem;
+      font-weight: 600;
+    }
+    :host([variant='card']) .description {
+      white-space: normal;
+      font-size: 0.8125rem;
+    }
   `; }
     subscribeToService() {
         this.unsubscribe?.();
@@ -371,13 +439,24 @@ export class SnapshotNavList extends LitElement {
             this.requestUpdate();
         }
     }
-    get overlayStyle() {
+    /** image scrim: blur + its own (usually 0) tint strength — independent of the caption's. */
+    get imageOverlayStyle() {
+        const blur = `${this.overlayBlur}px`;
+        if (this.overlayTint === 'none' || this.imageOverlayOpacity === 0) {
+            return { '--overlay-blur': blur };
+        }
+        const tintColor = this.overlayTint === 'light' ? '#fff' : '#000';
+        const bg = `color-mix(in srgb, ${tintColor} ${Math.round(this.imageOverlayOpacity * 100)}%, transparent)`;
+        return { '--overlay-bg': bg, '--overlay-blur': blur };
+    }
+    /** caption background: tint (to pop the text) + the same blur. */
+    get metaStyle() {
         const blur = `${this.overlayBlur}px`;
         if (this.overlayTint === 'none') {
             return { '--overlay-bg': 'transparent', '--overlay-text': 'inherit', '--overlay-blur': blur };
         }
         const tintColor = this.overlayTint === 'light' ? '#fff' : '#000';
-        const bg = `color-mix(in srgb, ${tintColor} ${Math.round(this.overlayOpacity * 100)}%, transparent)`;
+        const bg = `color-mix(in srgb, ${tintColor} ${Math.round(this.textOverlayOpacity * 100)}%, transparent)`;
         const text = this.overlayTint === 'light' ? '#111' : '#fff';
         return { '--overlay-bg': bg, '--overlay-text': text, '--overlay-blur': blur };
     }
@@ -397,7 +476,8 @@ export class SnapshotNavList extends LitElement {
         }));
     }
     render() {
-        const overlayStyle = this.overlayStyle;
+        const imageOverlayStyle = this.imageOverlayStyle;
+        const metaStyle = this.metaStyle;
         return html `
       <ul role="listbox">
         ${this.items.map((item) => html `
@@ -420,7 +500,7 @@ export class SnapshotNavList extends LitElement {
                           >${item.icon ? (isMarkupIcon(item.icon) ? unsafeHTML(item.icon) : item.icon) : ''}</span
                         >
                       </div>`}
-                <div class="image-overlay" part="overlay" style=${styleMap(overlayStyle)}></div>
+                <div class="image-overlay" part="overlay" style=${styleMap(imageOverlayStyle)}></div>
                 ${this.editable
             ? html `<button
                       type="button"
@@ -433,7 +513,7 @@ export class SnapshotNavList extends LitElement {
                     </button>`
             : ''}
               </div>
-              <div class="meta" part="meta" style=${styleMap(overlayStyle)}>
+              <div class="meta" part="meta" style=${styleMap(metaStyle)}>
                 <span class="label" part="label">${item.label}</span>
                 ${item.description ? html `<span class="description" part="description">${item.description}</span>` : ''}
               </div>
@@ -453,8 +533,11 @@ __decorate([
     property({ attribute: 'overlay-tint' })
 ], SnapshotNavList.prototype, "overlayTint", void 0);
 __decorate([
-    property({ type: Number, attribute: 'overlay-opacity' })
-], SnapshotNavList.prototype, "overlayOpacity", void 0);
+    property({ type: Number, attribute: 'text-overlay-opacity' })
+], SnapshotNavList.prototype, "textOverlayOpacity", void 0);
+__decorate([
+    property({ type: Number, attribute: 'image-overlay-opacity' })
+], SnapshotNavList.prototype, "imageOverlayOpacity", void 0);
 __decorate([
     property({ type: Number, attribute: 'overlay-blur' })
 ], SnapshotNavList.prototype, "overlayBlur", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anton-gustafsson/snapshot-core",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A pluggable snapshot service that turns any DOM element into a stored, shareable image, plus an optional <snapshot-nav-list> web component to display them.",
   "license": "MIT",
   "repository": {