@motion-proto/live-tokens 0.58.0 → 0.59.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # Changelog
 
+## 0.59.0 — The shadow traces the art
+
+### Added
+
+- **`shadow` on `ImageLightbox`.** The tile cast its shadow from its own
+  rectangle and offered no way out, so a PNG or WebP with transparency sat on a
+  phantom slab: the shadow drew the box, and the box was not the picture. Art
+  cut out against the page — a device mockup, a logo, a chart on no background —
+  showed a hard rounded rectangle behind it. `shadow` now picks where that
+  shadow falls. `box` is the old behaviour and stays the default. `content`
+  casts from the image's own alpha, so the shadow follows the silhouette.
+  `none` drops it. All three read the one `--imagelightbox-tile-shadow` the
+  theme already sets — the mode moves the shadow, it does not restyle it. The
+  open modal keeps its shadow only under `box`: it casts against a near-opaque
+  scrim where nothing reads, and filtering the pan-and-zoom surface would
+  repaint it every frame.
+
+### Changed
+
+- **A shadow token writes its spread slot only when the spread is set.**
+  `--shadow-md` read `3px 3px 6px 0px hsla(…)`, and that fourth length was the
+  reason a shadow token could not also be a filter: `drop-shadow()` has no
+  spread slot, so the declaration was invalid and dropped. Every shipped theme
+  carries a zero spread, so the slot said nothing and cost the scale half its
+  reach. The zero-spread form is now three lengths, which `box-shadow` reads
+  identically and `drop-shadow()` accepts — one token, both properties, no
+  second scale to keep in step. The spread control is untouched: dial one and
+  the token grows its fourth length back, still a shadow but no longer a
+  filter, so a theme with a real spread has no shadow under `content`.
+  Four-length values still parse, and normalise on the next save.
+
+### Fixed
+
+- **The colour edit panel wears editor chrome again.** Its confirm, cancel and
+  "Remove override" buttons were the shipped `Button` and `InlineEditActions`
+  components, which read the theme's own tokens — so the controls you edit a
+  theme *with* restyled themselves as you edited, and a saturated success or
+  danger palette turned three small chrome buttons into slabs. They are now
+  `UIInlineEditActions` and `UIPillButton`, drawn from the theme-immune `--ui-*`
+  scale like the rest of the editor. `UIInlineEditActions` is the editor's
+  check/cross pair, sized to the 1.5rem chrome buttons it sits beside.
+- **The base colour panel offers a confirm and a cancel.** Opening a palette's
+  editor showed the base panel with no way to accept or discard — every slider
+  wrote straight through, and only the docked step panel carried the pair. The
+  panel now shows both, greyed until an edit is pending; the first touch of a
+  slider, a hex field or the eyedropper opens the same session the step panel
+  uses, so cancel restores the colour the panel opened with and confirm keeps
+  the drag as one undo step.
+
 ## 0.58.0 — The sketch layer states its contract
 
 ### Added

package/dist-plugin/generateColorsAndType/index.cjs

@@ -719,15 +719,16 @@ function computeAngleDistance(x, y) {
   return { angle: Math.round(angle), distance };
 }
 function shadowTokenCss(t) {
-  return `${t.x}px ${t.y}px ${t.blur}px ${t.spread}px hsla(${t.hue}, ${t.saturation}%, ${t.lightness}%, ${t.opacity})`;
+  const spread = t.spread ? `${t.spread}px ` : "";
+  return `${t.x}px ${t.y}px ${t.blur}px ${spread}hsla(${t.hue}, ${t.saturation}%, ${t.lightness}%, ${t.opacity})`;
 }
 function parseShadowCss(variable, raw) {
-  const m = raw.trim().match(/^(-?\d+)px\s+(-?\d+)px\s+(\d+)px\s+(-?\d+)px\s+hsla\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)$/);
+  const m = raw.trim().match(/^(-?\d+)px\s+(-?\d+)px\s+(\d+)px\s+(?:(-?\d+)px\s+)?hsla\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)$/);
   if (!m) return null;
   const x = parseInt(m[1], 10);
   const y = parseInt(m[2], 10);
   const blur = parseInt(m[3], 10);
-  const spread = parseInt(m[4], 10);
+  const spread = m[4] === void 0 ? 0 : parseInt(m[4], 10);
   const hue = Math.round(parseFloat(m[5]));
   const saturation = Math.round(parseFloat(m[6]));
   const lightness = Math.round(parseFloat(m[7]));

package/dist-plugin/generateColorsAndType/index.js

@@ -105,15 +105,16 @@ function computeAngleDistance(x, y) {
   return { angle: Math.round(angle), distance };
 }
 function shadowTokenCss(t) {
-  return `${t.x}px ${t.y}px ${t.blur}px ${t.spread}px hsla(${t.hue}, ${t.saturation}%, ${t.lightness}%, ${t.opacity})`;
+  const spread = t.spread ? `${t.spread}px ` : "";
+  return `${t.x}px ${t.y}px ${t.blur}px ${spread}hsla(${t.hue}, ${t.saturation}%, ${t.lightness}%, ${t.opacity})`;
 }
 function parseShadowCss(variable, raw) {
-  const m = raw.trim().match(/^(-?\d+)px\s+(-?\d+)px\s+(\d+)px\s+(-?\d+)px\s+hsla\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)$/);
+  const m = raw.trim().match(/^(-?\d+)px\s+(-?\d+)px\s+(\d+)px\s+(?:(-?\d+)px\s+)?hsla\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)$/);
   if (!m) return null;
   const x = parseInt(m[1], 10);
   const y = parseInt(m[2], 10);
   const blur = parseInt(m[3], 10);
-  const spread = parseInt(m[4], 10);
+  const spread = m[4] === void 0 ? 0 : parseInt(m[4], 10);
   const hue = Math.round(parseFloat(m[5]));
   const saturation = Math.round(parseFloat(m[6]));
   const lightness = Math.round(parseFloat(m[7]));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.58.0",
+  "version": "0.59.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

package/src/editor/component-editor/ImageLightboxEditor.svelte

@@ -44,12 +44,13 @@
   ];
 
   let multiple = $state(true);
+  let shadow = $state<'box' | 'content' | 'none'>('box');
 </script>
 
 <ComponentEditorBase
   {component}
   title="Image Lightbox"
-  description="Click an inline image to expand it into a centered modal with a backdrop. Pass multiple images for a gallery (chevrons + counter). Extended mode adds zoom controls and drag panning."
+  description="Click an inline image to expand it into a centered modal with a backdrop. Pass multiple images for a gallery (chevrons + counter). Extended mode adds zoom controls and drag panning. `shadow` picks where the one tile-shadow token falls: `box` casts it from the tile rectangle, `content` from the image's own alpha, or `none`."
   tokens={allTokens}
 >
   <VariantGroup name="imagelightbox" title="Image Lightbox" {states} {component}>
@@ -58,9 +59,17 @@
         <input type="checkbox" checked={multiple} onchange={(e) => (multiple = e.currentTarget.checked)} />
         <span>Multiple images</span>
       </label>
+      <label class="preview-toggle">
+        <span>Shadow</span>
+        <select value={shadow} onchange={(e) => (shadow = e.currentTarget.value as typeof shadow)}>
+          <option value="box">Box</option>
+          <option value="content">Content</option>
+          <option value="none">None</option>
+        </select>
+      </label>
     {/snippet}
     <div class="preview-frame">
-      <ImageLightbox images={multiple ? demoImages : [demoImages[0]]} extended />
+      <ImageLightbox images={multiple ? demoImages : [demoImages[0]]} {shadow} extended />
     </div>
   </VariantGroup>
 </ComponentEditorBase>

package/src/editor/core/sketch/sketchPresets.ts

@@ -151,10 +151,10 @@ export const SKETCH_PRESETS: Record<string, SketchSettings> = {
     blurb: 'Broad translucent nib gone round twice on the same line, so the overlap darkens and the ink pools where it slows.',
     fillTravel: 2, strokeTravel: 1.5, wobble: 56, waveform: 1.4, borderWavelength: 1.3,
     strokeWidth: 4, doubleStroke: true, retracePass: 'copy', strokeInk: 0.52, retraceOffset: 2.2,
-    maskBlob: 95, maskOutputMin: 0.5, maskOutputMax: 0.92, maskOctaves: 2, maskPosterize: 4, maskSoftness: 2.8,
+    maskBlob: 115, maskOutputMin: 0.21, maskOutputMax: 1, maskOctaves: 3, maskPosterize: 4, maskSoftness: 2.5,
     jitterX: 3, jitterY: 3, jitterRot: 0.8, jitterScale: 0.045,
     cornerSpread: 10, cornerTravel: 8,
-    pressure: 0.2, pressureMod: 0.25, pooling: 2, iconTravel: 1.25,
+    pressure: 0.2, pressureMod: 0.25, pooling: 2, iconTravel: 1.25, iconMaskScale: 4,
   },
 
   whiteboard: {
@@ -196,22 +196,22 @@ export const SKETCH_PRESETS: Record<string, SketchSettings> = {
     blurb: 'Ballpoint in a hurry. Everything loose at once: a square wave sends every edge to full travel, and the second pass lands wherever it lands.',
     fillTravel: 3, strokeTravel: 2.25, wobble: 50, roughness: 3, waveform: 2.5,
     strokeWidth: 2.25, doubleStroke: true, retracePass: 'reseeded', retraceOffset: 4, strokeInk: 1,
-    maskBlob: 150, maskOutputMin: 0.45, maskOutputMax: 1, maskOctaves: 2, maskPosterize: 2, maskSoftness: 6.7,
+    maskBlob: 150, maskOutputMin: 0.43, maskOutputMax: 0.95, maskOctaves: 2, maskPosterize: 2, maskSoftness: 6.7,
     jitterX: 6, jitterY: 6, jitterRot: 1.8, jitterScale: 0.1,
     cornerSpread: 20, cornerTravel: 17,
-    pressure: 0.45, pressureMod: 0.6, pooling: 2.5, iconTravel: 2.25,
+    pressure: 0.45, pressureMod: 0.6, pooling: 2.5, iconTravel: 2.25, iconMaskScale: 3.6,
   },
 
   dry: {
     ...base, label: 'Dry marker',
-    blurb: 'Ink that ran out. One scratchy pass that breaks up along its length, over a fill the mask has torn holes clean through.',
+    blurb: 'Ink that ran out. One scratchy pass that breaks up along its length, over a fill the mask has worn nearly through in patches.',
     fillTravel: 2.25, strokeTravel: 1.75, wobble: 50, waveform: 2, borderWavelength: 0.5,
     strokeWidth: 3.5, doubleStroke: false, strokeInk: 0.4,
-    maskBlob: 150, maskOutputMin: 0, maskOutputMax: 0.85,
-    maskOctaves: 2, maskPosterize: 4, maskSoftness: 2,
+    maskBlob: 150, maskOutputMin: 0.15, maskOutputMax: 0.91,
+    maskOctaves: 2, maskPosterize: 4, maskSoftness: 1.75,
     jitterX: 5, jitterY: 5, jitterRot: 1.4, jitterScale: 0.08,
     cornerSpread: 16, cornerTravel: 13,
-    pressure: 0.4, pressureMod: 0.8, pooling: 1.5, iconTravel: 1.75, iconMaskScale: 0.65,
+    pressure: 0.4, pressureMod: 0.8, pooling: 1.5, iconTravel: 1.75, iconMaskScale: 3.8,
   },
 };
 

package/src/editor/core/themes/parsers/shadow.ts

@@ -1,7 +1,14 @@
 /**
  * The single source of truth for the CSS form of a shadow scale token:
  *
- *   <x>px <y>px <blur>px <spread>px hsla(<h>, <s>%, <l>%, <a>)
+ *   <x>px <y>px <blur>px [<spread>px] hsla(<h>, <s>%, <l>%, <a>)
+ *
+ * The spread slot is written only when it is non-zero. A three-length shadow is
+ * legal in `box-shadow` (spread defaults to 0) and in `filter: drop-shadow()`,
+ * which has no spread slot at all — so one token dresses both, and a component
+ * casting from an image's alpha reads the same variable as one casting from a
+ * box. Dial a spread and the token grows its fourth length: still a shadow,
+ * no longer a filter.
  *
  * Everything that reads or writes that form goes through `parseShadowCss` /
  * `shadowTokenCss`, so the theme generator (Node, no store) and the editor
@@ -33,16 +40,17 @@ export function computeAngleDistance(x: number, y: number): { angle: number; dis
 }
 
 export function shadowTokenCss(t: ShadowValue): string {
-  return `${t.x}px ${t.y}px ${t.blur}px ${t.spread}px hsla(${t.hue}, ${t.saturation}%, ${t.lightness}%, ${t.opacity})`;
+  const spread = t.spread ? `${t.spread}px ` : '';
+  return `${t.x}px ${t.y}px ${t.blur}px ${spread}hsla(${t.hue}, ${t.saturation}%, ${t.lightness}%, ${t.opacity})`;
 }
 
 export function parseShadowCss(variable: string, raw: string): ShadowToken | null {
-  const m = raw.trim().match(/^(-?\d+)px\s+(-?\d+)px\s+(\d+)px\s+(-?\d+)px\s+hsla\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)$/);
+  const m = raw.trim().match(/^(-?\d+)px\s+(-?\d+)px\s+(\d+)px\s+(?:(-?\d+)px\s+)?hsla\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)$/);
   if (!m) return null;
   const x = parseInt(m[1], 10);
   const y = parseInt(m[2], 10);
   const blur = parseInt(m[3], 10);
-  const spread = parseInt(m[4], 10);
+  const spread = m[4] === undefined ? 0 : parseInt(m[4], 10);
   const hue = Math.round(parseFloat(m[5]));
   const saturation = Math.round(parseFloat(m[6]));
   const lightness = Math.round(parseFloat(m[7]));

package/src/editor/ui/ColorEditPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { hexToOklch, oklchToHex, gamutClamp } from '../core/palettes/oklch';
-  import InlineEditActions from '../../system/components/InlineEditActions.svelte';
-  import Button from '../../system/components/Button.svelte';
+  import UIInlineEditActions from './UIInlineEditActions.svelte';
+  import UIPillButton from './UIPillButton.svelte';
 
   
 
@@ -15,6 +15,8 @@
     /** Hide the confirm/cancel actions for live-apply consumers (Colors view
      *  readout) where edits commit through the store as they happen. */
     hideActions?: boolean;
+    /** Greys the confirm/cancel pair out while no edit is pending. */
+    actionsDisabled?: boolean;
     /** Hide the preview square where the surrounding view already shows the
      *  color (Colors view: wheel, swatches and derived scale all do). */
     hidePreview?: boolean;
@@ -43,6 +45,7 @@
     highlighted = false,
     showRemoveOverride = false,
     hideActions = false,
+    actionsDisabled = false,
     hidePreview = false,
     onConfirm = () => {},
     onCancel = () => {},
@@ -171,16 +174,17 @@
     {#if !hideActions}
       <div class="hsl-panel-actions">
         {#if showRemoveOverride}
-          <Button
-            variant="danger"
-            size="small"
-            icon="fas fa-trash"
-            on:click={onRemoveOverride}
-          >Remove override</Button>
+          <UIPillButton
+            size="compact"
+            variant="outline"
+            icon="fa-trash"
+            onclick={onRemoveOverride}
+          >Remove override</UIPillButton>
         {/if}
-        <InlineEditActions
+        <UIInlineEditActions
           onSave={onConfirm}
           onCancel={onCancel}
+          disabled={actionsDisabled}
           saveTitle="Apply changes"
           cancelTitle="Discard changes"
         />

package/src/editor/ui/PaletteEditor.svelte

@@ -203,6 +203,14 @@
 
   function startBaseEdit() {
     if (editing.kind === 'editingBase') { confirmEdit(); return; }
+    ensureBaseSession();
+  }
+
+  // The base panel applies every change straight to the store, so its
+  // confirm/cancel pair needs a session to act on. Opening one lazily on the
+  // first touch keeps the panel's mere presence from clipping the undo floor.
+  function ensureBaseSession() {
+    if (editing.kind === 'editingBase') return;
     editing = { kind: 'editingBase' };
     openSession();
   }
@@ -626,18 +634,18 @@
         <ColorEditPanel
           title={basePanelTitle}
           showRemoveOverride={false}
-          hideActions={!isEditingBase}
+          actionsDisabled={!isEditingBase}
           hidePreview
           hue={baseColor.h}
           chroma={baseColor.c}
           lightness={baseColor.l * 100}
           chromaMax={BASE_CHROMA_MAX}
           chromaHint={neutral ? NEUTRAL_CALM_CHROMA : undefined}
-          onHueChromaChange={(h, c, l) => setBaseColor(label, { l: l / 100, c, h })}
+          onHueChromaChange={(h, c, l) => { ensureBaseSession(); setBaseColor(label, { l: l / 100, c, h }); }}
           onConfirm={confirmEdit}
           onCancel={cancelEdit}
           onRemoveOverride={() => {}}
-          onSliderStart={() => beginSliderGesture(`edit ${label} base`)}
+          onSliderStart={() => { ensureBaseSession(); beginSliderGesture(`edit ${label} base`); }}
         />
       </div>
     </div>

package/src/editor/ui/UIInlineEditActions.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  interface Props {
+    onSave: () => void | Promise<void>;
+    onCancel: () => void;
+    disabled?: boolean;
+    saveTitle?: string;
+    cancelTitle?: string;
+  }
+
+  let {
+    onSave,
+    onCancel,
+    disabled = false,
+    saveTitle = 'Save',
+    cancelTitle = 'Cancel'
+  }: Props = $props();
+</script>
+
+<div class="ui-inline-actions">
+  <button
+    class="ui-ia ui-ia-save"
+    type="button"
+    {disabled}
+    title={saveTitle}
+    aria-label={saveTitle}
+    onclick={onSave}
+  ><i class="fas fa-check" aria-hidden="true"></i></button>
+  <button
+    class="ui-ia ui-ia-cancel"
+    type="button"
+    {disabled}
+    title={cancelTitle}
+    aria-label={cancelTitle}
+    onclick={onCancel}
+  ><i class="fas fa-xmark" aria-hidden="true"></i></button>
+</div>
+
+<style>
+  .ui-inline-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-4);
+  }
+
+  /* Sized to the 1.5rem chrome buttons it sits beside (eyedropper, swatch). */
+  .ui-ia {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border-radius: var(--ui-radius-sm);
+    font-size: var(--ui-font-size-xs);
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      background var(--ui-transition-fast),
+      border-color var(--ui-transition-fast),
+      color var(--ui-transition-fast);
+  }
+
+  .ui-ia-save {
+    background: linear-gradient(180deg, rgba(90, 168, 94, 0.35) 0%, rgba(90, 168, 94, 0.18) 100%);
+    border: 1px solid rgba(90, 168, 94, 0.6);
+    color: var(--ui-text-primary);
+  }
+
+  .ui-ia-save:hover:not(:disabled) {
+    background: linear-gradient(180deg, rgba(90, 168, 94, 0.48) 0%, rgba(90, 168, 94, 0.26) 100%);
+    border-color: rgba(90, 168, 94, 0.78);
+  }
+
+  .ui-ia-cancel {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: var(--ui-text-secondary);
+  }
+
+  .ui-ia-cancel:hover:not(:disabled) {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
+    border-color: rgba(255, 255, 255, 0.5);
+    color: var(--ui-text-primary);
+  }
+
+  .ui-ia:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
+  }
+
+  .ui-ia:disabled {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
+    border-color: rgba(255, 255, 255, 0.14);
+    color: var(--ui-text-disabled);
+    cursor: not-allowed;
+  }
+</style>

package/src/live-tokens/data/colors-and-type/autumn.json

@@ -2265,11 +2265,11 @@
     "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
     "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
     "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.25)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.25)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.25)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.25)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.25)"
+    "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.25)",
+    "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.25)",
+    "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.25)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.25)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.25)"
   },
   "fontSources": [
     {

package/src/live-tokens/data/colors-and-type/default.json

@@ -2296,11 +2296,11 @@
     "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
     "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
     "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+    "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
   },
   "fontSources": [
     {

package/src/live-tokens/data/colors-and-type/halloween.json

@@ -2312,11 +2312,11 @@
     "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
     "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
     "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+    "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
   },
   "fontSources": [
     {

package/src/live-tokens/data/colors-and-type/midnight-study.json

@@ -2312,11 +2312,11 @@
     "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
     "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
     "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+    "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
   },
   "fontSources": [
     {

package/src/live-tokens/data/colors-and-type/ocean.json

@@ -2265,11 +2265,11 @@
     "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
     "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
     "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
+    "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.2)"
   },
   "fontSources": [
     {

package/src/live-tokens/data/colors-and-type/royal-velvet.json

@@ -2297,11 +2297,11 @@
     "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
     "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
     "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+    "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
   },
   "fontSources": [
     {

package/src/live-tokens/data/colors-and-type/sketchy.json

@@ -2251,11 +2251,11 @@
     "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
     "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
     "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
+    "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.2)"
   },
   "fontSources": [
     {

package/src/live-tokens/data/colors-and-type/spring-meadow.json

@@ -2251,11 +2251,11 @@
     "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
     "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
     "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
+    "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.2)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.2)"
   },
   "fontSources": [
     {

package/src/live-tokens/data/colors-and-type/sunset.json

@@ -2312,11 +2312,11 @@
     "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
     "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
     "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-    "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-    "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+    "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+    "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
   },
   "fontSources": [
     {

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

@@ -2270,11 +2270,11 @@
       "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
       "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
       "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.25)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.25)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.25)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.25)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.25)"
+      "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.25)",
+      "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.25)",
+      "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.25)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.25)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.25)"
     },
     "fontSources": [
       {

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

@@ -2317,11 +2317,11 @@
       "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
       "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
       "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+      "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
     },
     "fontSources": [
       {

package/src/live-tokens/data/themes/midnight-study.json

@@ -2317,11 +2317,11 @@
       "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
       "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
       "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+      "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
     },
     "fontSources": [
       {

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

@@ -2270,11 +2270,11 @@
       "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
       "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
       "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
+      "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.2)"
     },
     "fontSources": [
       {

package/src/live-tokens/data/themes/royal-velvet.json

@@ -2302,11 +2302,11 @@
       "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
       "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
       "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+      "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
     },
     "fontSources": [
       {

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

@@ -2256,11 +2256,11 @@
       "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
       "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
       "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
+      "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.2)"
     },
     "fontSources": [
       {

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

@@ -2256,11 +2256,11 @@
       "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
       "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
       "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.2)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.2)"
+      "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.2)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.2)"
     },
     "fontSources": [
       {

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

@@ -2317,11 +2317,11 @@
       "--hover-low": "color-mix(in srgb, var(--text-primary) 5%, transparent)",
       "--hover": "color-mix(in srgb, var(--text-primary) 10%, transparent)",
       "--hover-high": "color-mix(in srgb, var(--text-primary) 15%, transparent)",
-      "--shadow-sm": "1px 1px 2px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-md": "3px 3px 6px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-lg": "5px 5px 9px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-xl": "6px 7px 13px 0px hsla(237, 18%, 3%, 0.9)",
-      "--shadow-2xl": "8px 9px 16px 0px hsla(237, 18%, 3%, 0.9)"
+      "--shadow-sm": "1px 1px 2px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-md": "3px 3px 6px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-lg": "5px 5px 9px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-xl": "6px 7px 13px hsla(237, 18%, 3%, 0.9)",
+      "--shadow-2xl": "8px 9px 16px hsla(237, 18%, 3%, 0.9)"
     },
     "fontSources": [
       {

package/src/live-tokens/data/tokens.generated.css

@@ -53,11 +53,11 @@
   --hover-low: color-mix(in srgb, var(--text-primary) 5%, transparent);
   --hover: color-mix(in srgb, var(--text-primary) 10%, transparent);
   --hover-high: color-mix(in srgb, var(--text-primary) 15%, transparent);
-  --shadow-sm: 1px 1px 2px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-md: 3px 3px 6px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-lg: 5px 5px 9px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-xl: 6px 7px 13px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-2xl: 8px 9px 16px 0px hsla(237, 18%, 3%, 0.9);
+  --shadow-sm: 1px 1px 2px hsla(237, 18%, 3%, 0.9);
+  --shadow-md: 3px 3px 6px hsla(237, 18%, 3%, 0.9);
+  --shadow-lg: 5px 5px 9px hsla(237, 18%, 3%, 0.9);
+  --shadow-xl: 6px 7px 13px hsla(237, 18%, 3%, 0.9);
+  --shadow-2xl: 8px 9px 16px hsla(237, 18%, 3%, 0.9);
   --color-brand-100: oklch(0.95 0.0279 355.35);
   --color-brand-200: oklch(0.8508 0.0915 355.35);
   --color-brand-300: oklch(0.7516 0.1697 355.35);

package/src/system/components/ImageLightbox.svelte

@@ -24,6 +24,13 @@
         `cover` only crops when the thumbnail has its own box (an aspect from
         `width`/`height`, or a CSS-constrained container). */
     fit?: 'contain' | 'cover';
+    /** Where the tile's shadow lands. Both modes read
+        `--imagelightbox-tile-shadow`: `box` casts it from the tile's rectangle,
+        `content` casts it from the image's own alpha, so art with transparency
+        doesn't sit on a phantom rectangle. `none` drops it. A theme that dials
+        a non-zero spread has no shadow under `content` — `drop-shadow()` has no
+        spread slot. */
+    shadow?: 'box' | 'content' | 'none';
     /** 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. */
     extended?: boolean;
     /** Maximum zoom, as a multiple of the image's natural resolution: `1` = 100%
@@ -55,6 +62,7 @@
     images = undefined,
     maxWidth = undefined,
     fit = 'contain',
+    shadow = 'box',
     extended = false,
     maxZoom = undefined,
     capNatural = false,
@@ -582,6 +590,8 @@
   <button
     bind:this={thumbEl}
     class="image-lightbox-thumb"
+    class:shadow-box={shadow === 'box'}
+    class:shadow-content={shadow === 'content'}
     style:--imagelightbox-tile-object-fit={fit}
     type="button"
     aria-label={cover?.alt ? `Expand image: ${cover.alt}` : 'Expand image'}
@@ -618,6 +628,8 @@
     <div
       bind:this={stageEl}
       class="image-lightbox-stage"
+      class:shadow-box={shadow === 'box'}
+      class:shadow-content={shadow === 'content'}
       role="presentation"
       tabindex="-1"
       onclick={onStageClick}
@@ -747,12 +759,25 @@
     cursor: zoom-in;
     border: var(--imagelightbox-tile-border-width) solid var(--imagelightbox-tile-border);
     border-radius: var(--imagelightbox-tile-radius);
-    box-shadow: var(--imagelightbox-tile-shadow);
     background: transparent;
     overflow: hidden;
     transition: transform 250ms ease;
   }
 
+  .image-lightbox-thumb.shadow-box,
+  .image-lightbox-stage.shadow-box {
+    box-shadow: var(--imagelightbox-tile-shadow);
+  }
+
+  /* Content mode traces the image's alpha. The filter goes on the tile, not the
+     <img>: applied to the element it runs after that element's own overflow
+     clip, so the shadow lands outside the box instead of being cropped by it.
+     The open modal stays bare — it casts against a near-opaque scrim where no
+     shadow reads, and a filter over the pan/zoom surface repaints every frame. */
+  .image-lightbox-thumb.shadow-content {
+    filter: drop-shadow(var(--imagelightbox-tile-shadow));
+  }
+
   .image-lightbox-thumb:hover {
     transform: scale(1.02);
   }
@@ -793,7 +818,6 @@
     cursor: zoom-out;
     border: var(--imagelightbox-tile-border-width) solid var(--imagelightbox-tile-border);
     border-radius: var(--imagelightbox-tile-radius);
-    box-shadow: var(--imagelightbox-tile-shadow);
     background: transparent;
   }
 

package/src/system/styles/tokens.css

@@ -530,11 +530,11 @@
 
   /* Shadows (elevation scale) */
   --shadow-none: none;
-  --shadow-sm: 1px 1px 2px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-md: 3px 3px 6px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-lg: 5px 5px 9px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-xl: 6px 7px 13px 0px hsla(237, 18%, 3%, 0.9);
-  --shadow-2xl: 8px 9px 16px 0px hsla(237, 18%, 3%, 0.9);
+  --shadow-sm: 1px 1px 2px hsla(237, 18%, 3%, 0.9);
+  --shadow-md: 3px 3px 6px hsla(237, 18%, 3%, 0.9);
+  --shadow-lg: 5px 5px 9px hsla(237, 18%, 3%, 0.9);
+  --shadow-xl: 6px 7px 13px hsla(237, 18%, 3%, 0.9);
+  --shadow-2xl: 8px 9px 16px hsla(237, 18%, 3%, 0.9);
 
   /* Focus rings (box-shadow outline) */
   --ring-focus-sm: 0 0 0 2px hsla(0, 78%, 60%, 0.1);