@anton-gustafsson/snapshot-core 0.0.4 → 0.0.5

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

@@ -19,7 +19,7 @@ export declare class SnapshotNavList extends LitElement {
     static styles: import("lit").CSSResult;
     items: NavItem[];
     variant: SnapshotNavListVariant;
-    /** icon-only tile overlay: tint behind the title so it stays legible over any image. */
+    /** 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;

package/dist/snapshot-nav-list.js

@@ -23,8 +23,8 @@ export class SnapshotNavList extends LitElement {
         super(...arguments);
         this.items = [];
         this.variant = 'icon-only';
-        /** icon-only tile overlay: tint behind the title so it stays legible over any image. */
-        this.overlayTint = 'dark';
+        /** 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;
         /** backdrop blur behind the title, in px */
@@ -269,10 +269,15 @@ export class SnapshotNavList extends LitElement {
     :host([variant='icon-only']) .meta {
       position: absolute;
       inset: auto 0 0 0;
+      margin: var(--snapshot-nav-list-overlay-margin, 0);
+      border-radius: var(--snapshot-nav-list-overlay-radius, 0);
       align-items: flex-start;
       gap: 0.15rem;
       padding: 0.4rem 0.5rem;
       color: var(--overlay-text, #fff);
+      background: var(--overlay-bg, transparent);
+      backdrop-filter: blur(var(--overlay-blur, 0px));
+      -webkit-backdrop-filter: blur(var(--overlay-blur, 0px));
     }
     :host([variant='icon-only']) .label {
       white-space: normal;
@@ -428,7 +433,7 @@ export class SnapshotNavList extends LitElement {
                     </button>`
             : ''}
               </div>
-              <div class="meta" part="meta">
+              <div class="meta" part="meta" style=${styleMap(overlayStyle)}>
                 <span class="label" part="label">${item.label}</span>
                 ${item.description ? html `<span class="description" part="description">${item.description}</span>` : ''}
               </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anton-gustafsson/snapshot-core",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "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": {