@motion-proto/live-tokens 0.85.0 → 0.87.0

package/src/live-tokens/data/themes/sketchy.json

@@ -4007,6 +4007,103 @@
         "--slider-value-font-weight": "--font-weight-normal",
         "--slider-value-line-height": "--line-height-normal"
       }
+    },
+    "videolightbox": {
+      "name": "sketchy",
+      "component": "videolightbox",
+      "createdAt": "2026-09-21T17:00:00.000Z",
+      "updatedAt": "2026-09-21T17:00:00.000Z",
+      "aliases": {
+        "--videolightbox-tile-surface": "--color-transparent",
+        "--videolightbox-tile-border": "--color-transparent",
+        "--videolightbox-tile-border-width": "--border-width-1",
+        "--videolightbox-tile-radius": "--radius-none",
+        "--videolightbox-tile-shadow": "--shadow-md",
+        "--videolightbox-scrim-surface": "--scrim-high",
+        "--videolightbox-overlay-padding": "--space-64",
+        "--videolightbox-overlay-duration": "--duration-500",
+        "--videolightbox-overlay-easing": "--ease-out-quad",
+        "--videolightbox-chrome-surface": "--surface-neutral-low",
+        "--videolightbox-chrome-border": "--border-brand",
+        "--videolightbox-chrome-border-width": "--border-width-1",
+        "--videolightbox-chrome-radius": "--radius-none",
+        "--videolightbox-chrome-icon": "--text-primary",
+        "--videolightbox-chrome-hover-surface": "--surface-brand-high",
+        "--videolightbox-badge-default-surface": "--surface-brand-lower",
+        "--videolightbox-badge-default-border": "--border-brand-medium",
+        "--videolightbox-badge-default-border-width": "--border-width-2",
+        "--videolightbox-badge-default-icon": "--text-primary",
+        "--videolightbox-badge-default-size": "--space-64",
+        "--videolightbox-badge-default-icon-size": "--icon-size-4xl",
+        "--videolightbox-badge-duration": "--duration-200",
+        "--videolightbox-badge-easing": "--ease-out-quad",
+        "--videolightbox-badge-hover-surface": "--surface-brand",
+        "--videolightbox-badge-hover-border": "--border-brand-strong",
+        "--videolightbox-badge-hover-icon": "--text-primary"
+      }
+    },
+    "videoframe": {
+      "name": "sketchy",
+      "component": "videoframe",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--videoframe-frame-surface": "--surface-neutral-lowest",
+        "--videoframe-clip-surface": "--color-transparent",
+        "--videoframe-frame-border": "--border-neutral",
+        "--videoframe-frame-border-width": "--border-width-1",
+        "--videoframe-frame-radius": "--radius-none",
+        "--videoframe-badge-default-surface": "--surface-brand-lower",
+        "--videoframe-badge-default-border": "--border-brand-medium",
+        "--videoframe-badge-default-border-width": "--border-width-2",
+        "--videoframe-badge-default-icon": "--text-primary",
+        "--videoframe-badge-default-size": "--space-64",
+        "--videoframe-badge-default-icon-size": "--icon-size-4xl",
+        "--videoframe-badge-duration": "--duration-200",
+        "--videoframe-badge-easing": "--ease-out-quad",
+        "--videoframe-badge-hover-surface": "--surface-brand",
+        "--videoframe-badge-hover-border": "--border-brand-strong",
+        "--videoframe-badge-hover-icon": "--text-primary"
+      }
+    },
+    "slidepager": {
+      "name": "sketchy",
+      "component": "slidepager",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--slidepager-frame-surface": "--surface-neutral-lower",
+        "--slidepager-frame-border": "--border-neutral-subtle",
+        "--slidepager-frame-border-width": "--border-width-1",
+        "--slidepager-frame-radius": "--radius-none",
+        "--slidepager-frame-shadow": "--shadow-md",
+        "--slidepager-bar-gap": "--space-16",
+        "--slidepager-bar-padding": "--space-12",
+        "--slidepager-control-surface": "--surface-neutral-low",
+        "--slidepager-control-border": "--border-neutral",
+        "--slidepager-control-border-width": "--border-width-1",
+        "--slidepager-control-radius": "--radius-none",
+        "--slidepager-control-size": "--space-40",
+        "--slidepager-control-icon": "--text-primary",
+        "--slidepager-control-icon-size": "--icon-size-md",
+        "--slidepager-control-hover-surface": "--surface-brand-high",
+        "--slidepager-control-hover-border": "--border-brand",
+        "--slidepager-control-hover-icon": "--text-inverted",
+        "--slidepager-control-disabled-surface": "--surface-neutral-lower",
+        "--slidepager-control-disabled-border": "--border-neutral-subtle",
+        "--slidepager-control-disabled-icon": "--text-disabled",
+        "--slidepager-counter-text": "--text-secondary",
+        "--slidepager-counter-font-family": "--font-sans",
+        "--slidepager-counter-font-size": "--font-size-lg",
+        "--slidepager-counter-font-weight": "--font-weight-medium",
+        "--slidepager-counter-line-height": "--line-height-normal",
+        "--slidepager-counter-letter-spacing": "--letter-spacing-normal",
+        "--slidepager-scrim-surface": "--scrim-high",
+        "--slidepager-overlay-padding": "--space-64",
+        "--slidepager-close-margin": "--space-24",
+        "--slidepager-overlay-duration": "--duration-300",
+        "--slidepager-overlay-easing": "--ease-out-quad"
+      }
     }
   },
   "componentSchemaVersion": 38

package/src/live-tokens/data/themes/spring-meadow.json

@@ -3980,6 +3980,103 @@
         "--slider-value-font-weight": "--font-weight-normal",
         "--slider-value-line-height": "--line-height-normal"
       }
+    },
+    "videolightbox": {
+      "name": "spring-meadow",
+      "component": "videolightbox",
+      "createdAt": "2026-09-21T17:00:00.000Z",
+      "updatedAt": "2026-09-21T17:00:00.000Z",
+      "aliases": {
+        "--videolightbox-tile-surface": "--color-transparent",
+        "--videolightbox-tile-border": "--color-transparent",
+        "--videolightbox-tile-border-width": "--border-width-0",
+        "--videolightbox-tile-radius": "--radius-3xl",
+        "--videolightbox-tile-shadow": "--shadow-md",
+        "--videolightbox-scrim-surface": "--scrim-high",
+        "--videolightbox-overlay-padding": "--space-64",
+        "--videolightbox-overlay-duration": "--duration-500",
+        "--videolightbox-overlay-easing": "--ease-out-quad",
+        "--videolightbox-chrome-surface": "--surface-neutral-low",
+        "--videolightbox-chrome-border": "--border-brand",
+        "--videolightbox-chrome-border-width": "--border-width-1",
+        "--videolightbox-chrome-radius": "--radius-full",
+        "--videolightbox-chrome-icon": "--text-primary",
+        "--videolightbox-chrome-hover-surface": "--surface-brand-high",
+        "--videolightbox-badge-default-surface": "--surface-brand-lower",
+        "--videolightbox-badge-default-border": "--border-brand-medium",
+        "--videolightbox-badge-default-border-width": "--border-width-2",
+        "--videolightbox-badge-default-icon": "--text-primary",
+        "--videolightbox-badge-default-size": "--space-64",
+        "--videolightbox-badge-default-icon-size": "--icon-size-4xl",
+        "--videolightbox-badge-duration": "--duration-200",
+        "--videolightbox-badge-easing": "--ease-out-quad",
+        "--videolightbox-badge-hover-surface": "--surface-brand",
+        "--videolightbox-badge-hover-border": "--border-brand-strong",
+        "--videolightbox-badge-hover-icon": "--text-primary"
+      }
+    },
+    "videoframe": {
+      "name": "spring-meadow",
+      "component": "videoframe",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--videoframe-frame-surface": "--surface-neutral-lowest",
+        "--videoframe-clip-surface": "--color-transparent",
+        "--videoframe-frame-border": "--border-neutral",
+        "--videoframe-frame-border-width": "--border-width-1",
+        "--videoframe-frame-radius": "--radius-3xl",
+        "--videoframe-badge-default-surface": "--surface-brand-lower",
+        "--videoframe-badge-default-border": "--border-brand-medium",
+        "--videoframe-badge-default-border-width": "--border-width-2",
+        "--videoframe-badge-default-icon": "--text-primary",
+        "--videoframe-badge-default-size": "--space-64",
+        "--videoframe-badge-default-icon-size": "--icon-size-4xl",
+        "--videoframe-badge-duration": "--duration-200",
+        "--videoframe-badge-easing": "--ease-out-quad",
+        "--videoframe-badge-hover-surface": "--surface-brand",
+        "--videoframe-badge-hover-border": "--border-brand-strong",
+        "--videoframe-badge-hover-icon": "--text-primary"
+      }
+    },
+    "slidepager": {
+      "name": "spring-meadow",
+      "component": "slidepager",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--slidepager-frame-surface": "--surface-neutral-lower",
+        "--slidepager-frame-border": "--border-neutral-subtle",
+        "--slidepager-frame-border-width": "--border-width-1",
+        "--slidepager-frame-radius": "--radius-3xl",
+        "--slidepager-frame-shadow": "--shadow-md",
+        "--slidepager-bar-gap": "--space-16",
+        "--slidepager-bar-padding": "--space-12",
+        "--slidepager-control-surface": "--surface-neutral-low",
+        "--slidepager-control-border": "--border-neutral",
+        "--slidepager-control-border-width": "--border-width-1",
+        "--slidepager-control-radius": "--radius-full",
+        "--slidepager-control-size": "--space-40",
+        "--slidepager-control-icon": "--text-primary",
+        "--slidepager-control-icon-size": "--icon-size-md",
+        "--slidepager-control-hover-surface": "--surface-brand-high",
+        "--slidepager-control-hover-border": "--border-brand",
+        "--slidepager-control-hover-icon": "--text-inverted",
+        "--slidepager-control-disabled-surface": "--surface-neutral-lower",
+        "--slidepager-control-disabled-border": "--border-neutral-subtle",
+        "--slidepager-control-disabled-icon": "--text-disabled",
+        "--slidepager-counter-text": "--text-secondary",
+        "--slidepager-counter-font-family": "--font-sans",
+        "--slidepager-counter-font-size": "--font-size-lg",
+        "--slidepager-counter-font-weight": "--font-weight-medium",
+        "--slidepager-counter-line-height": "--line-height-normal",
+        "--slidepager-counter-letter-spacing": "--letter-spacing-normal",
+        "--slidepager-scrim-surface": "--scrim-high",
+        "--slidepager-overlay-padding": "--space-64",
+        "--slidepager-close-margin": "--space-24",
+        "--slidepager-overlay-duration": "--duration-300",
+        "--slidepager-overlay-easing": "--ease-out-quad"
+      }
     }
   },
   "componentSchemaVersion": 38

package/src/live-tokens/data/themes/sunset.json

@@ -4032,6 +4032,103 @@
         "--slider-value-font-weight": "--font-weight-normal",
         "--slider-value-line-height": "--line-height-normal"
       }
+    },
+    "videolightbox": {
+      "name": "sunset",
+      "component": "videolightbox",
+      "createdAt": "2026-09-21T17:00:00.000Z",
+      "updatedAt": "2026-09-21T17:00:00.000Z",
+      "aliases": {
+        "--videolightbox-tile-surface": "--color-transparent",
+        "--videolightbox-tile-border": "--color-transparent",
+        "--videolightbox-tile-border-width": "--border-width-0",
+        "--videolightbox-tile-radius": "--radius-3xl",
+        "--videolightbox-tile-shadow": "--shadow-md",
+        "--videolightbox-scrim-surface": "--scrim-high",
+        "--videolightbox-overlay-padding": "--space-64",
+        "--videolightbox-overlay-duration": "--duration-500",
+        "--videolightbox-overlay-easing": "--ease-out-quad",
+        "--videolightbox-chrome-surface": "--surface-neutral-low",
+        "--videolightbox-chrome-border": "--border-brand",
+        "--videolightbox-chrome-border-width": "--border-width-1",
+        "--videolightbox-chrome-radius": "--radius-full",
+        "--videolightbox-chrome-icon": "--text-primary",
+        "--videolightbox-chrome-hover-surface": "--surface-brand-high",
+        "--videolightbox-badge-default-surface": "--surface-brand-lower",
+        "--videolightbox-badge-default-border": "--border-brand-medium",
+        "--videolightbox-badge-default-border-width": "--border-width-2",
+        "--videolightbox-badge-default-icon": "--text-primary",
+        "--videolightbox-badge-default-size": "--space-64",
+        "--videolightbox-badge-default-icon-size": "--icon-size-4xl",
+        "--videolightbox-badge-duration": "--duration-200",
+        "--videolightbox-badge-easing": "--ease-out-quad",
+        "--videolightbox-badge-hover-surface": "--surface-brand",
+        "--videolightbox-badge-hover-border": "--border-brand-strong",
+        "--videolightbox-badge-hover-icon": "--text-primary"
+      }
+    },
+    "videoframe": {
+      "name": "sunset",
+      "component": "videoframe",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--videoframe-frame-surface": "--surface-neutral-lowest",
+        "--videoframe-clip-surface": "--color-transparent",
+        "--videoframe-frame-border": "--border-neutral",
+        "--videoframe-frame-border-width": "--border-width-1",
+        "--videoframe-frame-radius": "--radius-3xl",
+        "--videoframe-badge-default-surface": "--surface-brand-lower",
+        "--videoframe-badge-default-border": "--border-brand-medium",
+        "--videoframe-badge-default-border-width": "--border-width-2",
+        "--videoframe-badge-default-icon": "--text-primary",
+        "--videoframe-badge-default-size": "--space-64",
+        "--videoframe-badge-default-icon-size": "--icon-size-4xl",
+        "--videoframe-badge-duration": "--duration-200",
+        "--videoframe-badge-easing": "--ease-out-quad",
+        "--videoframe-badge-hover-surface": "--surface-brand",
+        "--videoframe-badge-hover-border": "--border-brand-strong",
+        "--videoframe-badge-hover-icon": "--text-primary"
+      }
+    },
+    "slidepager": {
+      "name": "sunset",
+      "component": "slidepager",
+      "createdAt": "2026-09-21T18:00:00.000Z",
+      "updatedAt": "2026-09-21T18:00:00.000Z",
+      "aliases": {
+        "--slidepager-frame-surface": "--surface-neutral-lower",
+        "--slidepager-frame-border": "--border-neutral-subtle",
+        "--slidepager-frame-border-width": "--border-width-1",
+        "--slidepager-frame-radius": "--radius-3xl",
+        "--slidepager-frame-shadow": "--shadow-md",
+        "--slidepager-bar-gap": "--space-16",
+        "--slidepager-bar-padding": "--space-12",
+        "--slidepager-control-surface": "--surface-neutral-low",
+        "--slidepager-control-border": "--border-neutral",
+        "--slidepager-control-border-width": "--border-width-1",
+        "--slidepager-control-radius": "--radius-full",
+        "--slidepager-control-size": "--space-40",
+        "--slidepager-control-icon": "--text-primary",
+        "--slidepager-control-icon-size": "--icon-size-md",
+        "--slidepager-control-hover-surface": "--surface-brand-high",
+        "--slidepager-control-hover-border": "--border-brand",
+        "--slidepager-control-hover-icon": "--text-inverted",
+        "--slidepager-control-disabled-surface": "--surface-neutral-lower",
+        "--slidepager-control-disabled-border": "--border-neutral-subtle",
+        "--slidepager-control-disabled-icon": "--text-disabled",
+        "--slidepager-counter-text": "--text-secondary",
+        "--slidepager-counter-font-family": "--font-sans",
+        "--slidepager-counter-font-size": "--font-size-lg",
+        "--slidepager-counter-font-weight": "--font-weight-medium",
+        "--slidepager-counter-line-height": "--line-height-normal",
+        "--slidepager-counter-letter-spacing": "--letter-spacing-normal",
+        "--slidepager-scrim-surface": "--scrim-high",
+        "--slidepager-overlay-padding": "--space-64",
+        "--slidepager-close-margin": "--space-24",
+        "--slidepager-overlay-duration": "--duration-300",
+        "--slidepager-overlay-easing": "--ease-out-quad"
+      }
     }
   },
   "componentSchemaVersion": 38

package/src/system/components/ImageLightbox.svelte

@@ -6,6 +6,8 @@
     whenToUse: 'a screenshot, artwork, or chart whose detail is the point, and for a gallery of them.',
     whenNotToUse: [
       { when: 'the reader takes the picture in at a glance, with no detail to open.', use: 'image' },
+      { when: 'a video clip the reader opens from its still.', use: 'videolightbox' },
+      { when: 'slides or pages the reader reads in order.', use: 'slidepager' },
     ],
   } satisfies CatalogueEntry;
 </script>
@@ -62,7 +64,7 @@
         The modal portals to <body>, out of reach of a wrapper around the tile,
         so a page that wants its own scrim has to say so here. */
     scrim?: string | undefined;
-    /** When true, shows a bottom toolbar (zoom in/out + percent) and a top-right close button, and enables wheel/drag zoom inside the open modal. When false, click anywhere closes. */
+    /** When true, shows a bottom toolbar (zoom in/out + percent) and enables wheel/drag zoom inside the open modal. Either way, a click on the unzoomed image closes. */
     extended?: boolean;
     /** Maximum zoom, as a multiple of the image's natural resolution: `1` = 100%
         of the source's real pixels (1 source px = 1 screen px), `2` = 200%. The
@@ -314,8 +316,7 @@
       });
     }
 
-    // Move focus into the modal so keyboard users land inside the dialog; the
-    // stage (tabindex -1) is the fallback when there is no chrome to focus.
+    // Move focus into the modal so keyboard users land inside the dialog.
     (closeBtnEl ?? stageEl)?.focus();
   }
 
@@ -323,7 +324,7 @@
   // the zoom toolbar keeps its bespoke slide so it's handled separately.
   function chromeFadeEls(): HTMLElement[] {
     const els: (HTMLElement | undefined)[] = [];
-    if (extended || isGallery) els.push(closeBtnEl);
+    els.push(closeBtnEl);
     if (isGallery) els.push(prevBtnEl, nextBtnEl, counterEl);
     return els.filter((el): el is HTMLElement => !!el);
   }
@@ -549,11 +550,11 @@
       didDrag = false;
       return;
     }
-    if (!extended && !isGallery) closeLightbox();
+    if (!isGallery && scale <= MIN_SCALE) closeLightbox();
   }
 
   // Keep Tab inside the open dialog. The stage (tabindex -1) is excluded, so an
-  // image-only lightbox with no chrome simply holds focus on the stage.
+  // image-only lightbox holds focus on its close button.
   function trapTab(e: KeyboardEvent) {
     if (!modalEl) return;
     const f = [
@@ -688,21 +689,19 @@
       </div>
     </div>
 
-    {#if extended || isGallery}
-      <button
-        bind:this={closeBtnEl}
-        class="image-lightbox-chrome image-lightbox-close"
-        class:active={open}
-        type="button"
-        aria-label="Close"
-        onclick={closeLightbox}
-      >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <path d="M18 6L6 18" />
-          <path d="M6 6l12 12" />
-        </svg>
-      </button>
-    {/if}
+    <button
+      bind:this={closeBtnEl}
+      class="image-lightbox-chrome image-lightbox-close"
+      class:active={open}
+      type="button"
+      aria-label="Close"
+      onclick={closeLightbox}
+    >
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M18 6L6 18" />
+        <path d="M6 6l12 12" />
+      </svg>
+    </button>
 
     {#if isGallery}
       <button