kuinetic 0.2.2 → 0.2.4

package/dist/esm/{chunk-XDDJVANU.mjs → chunk-EHS45PIK.mjs}

@@ -1,23 +1,29 @@
 import {
   ABSOLUTE_BASIS,
+  ALL_TIMING_TOKENS,
   ATTR,
   CHANNEL,
   DEFAULT_SPRING,
   Registry,
   SCOPE_PARAM,
+  SUBTREE_CHANNEL,
   TIME_SCALE_ATTR,
+  attributeChannel,
   clamp01,
   continuousSetup,
   createMeasureCache,
   createSpringRunner,
   cssEasingValue,
   decimalNumber,
+  declareTimingContract,
   defaultSpringDeps,
   deferPrepare,
   deferredInstance,
   effectDurationMs,
   inertInstance,
+  inheritTimingContract,
   isSameOriginPath,
+  queryControls,
   queryScoped,
   resolveTarget,
   scopeParam,
@@ -26,7 +32,7 @@ import {
   toPixels,
   validate,
   waapiEasingValue
-} from "./chunk-K2M7O6W5.mjs";
+} from "./chunk-FASAEQDR.mjs";
 import {
   createAttributeLedger,
   createStyleLedger
@@ -36,7 +42,6 @@ import {
 var TRIGGER_DELAY_PARAM = {
   delay: { type: "time", default: "0ms", cssProperty: "--kui-delay" }
 };
-var ALL_TIMING_TOKENS = ["duration", "delay", "ease"];
 function authoredTiming(params, token) {
   if (token === "ease") return params.timing.easing;
   const ms = token === "duration" ? params.timing.durationMs : params.timing.delayMs;
@@ -64,20 +69,20 @@ function mirrorTimingToCss(id, honours, params, ctx) {
   }
 }
 function withTimingContract(id, contract, prepare) {
-  return (el, params, ctx) => {
+  return declareTimingContract((el, params, ctx) => {
     warnUnhonouredTiming(id, contract, params, ctx.warn);
     return prepare(el, params, ctx);
-  };
+  }, contract);
 }
 function stylesheetTimingPrepare(id, contract) {
-  return (el, params, ctx) => {
+  return declareTimingContract((el, params, ctx) => {
     warnUnhonouredTiming(id, contract, params, ctx.warn);
     return deferredInstance(() => {
       mirrorTimingToCss(id, contract.honours ?? [], params, ctx);
       return () => {
       };
     });
-  };
+  }, contract);
 }
 var TIMELINE_AGNOSTIC = ["time", "view", "scroll", "pin"];
 var COMMON = {
@@ -154,12 +159,12 @@ var AMBIENT_PRIMITIVES = [
    * What the ring rules actually write (`ambient.css`) beyond the gradient: `mask` +
    * `mask-composite`, which subtract the element's own content box to leave a ring — the same
    * physical property `media-mask` claims under the `'mask'` channel — and `position: relative`
-   * plus a `padding` that *is* the ring's thickness, which is a claim on the host's box in the
-   * sense `pin` and `background-media` already use `'layout'` for. Declared only as
-   * `background`, a `gradient-border, pin-section` pair composed silently while both decided the
-   * host's `position`, and `gradient-border, mask-reveal` while both wrote `mask`.
+   * plus a `padding` that *is* the ring's thickness — `position` as `pin` and `background-media`
+   * claim it, `padding` as `header-shrink` does. Declared only as `background`, a
+   * `gradient-border, pin-section` pair composed silently while both decided the host's
+   * `position`, and `gradient-border, mask-reveal` while both wrote `mask`.
    */
-  cssPrimitive("ambient-gradient-ring", [CHANNEL.background, "mask", "layout"], {
+  cssPrimitive("ambient-gradient-ring", [CHANNEL.background, "mask", "position", "padding"], {
     parameters: drift,
     defaultActivation: "load",
     reducedMotion: "disable",
@@ -837,22 +842,287 @@ var GROUP_PRESETS = [
 var STATE_PRIMITIVES = [...PRESS_PRIMITIVES, ...GROUP_PRIMITIVES];
 var STATE_PRESETS = [...PRESS_PRESETS, ...GROUP_PRESETS];
 
+// src/core/element-size.ts
+function watchElementSize(win, onChange) {
+  const ResizeObserverCtor = win.ResizeObserver;
+  const observer = ResizeObserverCtor ? new ResizeObserverCtor(onChange) : void 0;
+  const elements = /* @__PURE__ */ new Set();
+  win.addEventListener("resize", onChange, { passive: true });
+  return {
+    observe(element) {
+      if (elements.has(element)) return;
+      elements.add(element);
+      observer?.observe(element);
+    },
+    unobserve(element) {
+      elements.delete(element);
+      observer?.unobserve(element);
+    },
+    disconnect() {
+      win.removeEventListener("resize", onChange);
+      observer?.disconnect();
+      elements.clear();
+    }
+  };
+}
+function frameScheduler(win, callback) {
+  let frame;
+  let timeout;
+  const run = () => {
+    frame = void 0;
+    timeout = void 0;
+    callback();
+  };
+  return {
+    request() {
+      if (frame !== void 0 || timeout !== void 0) return;
+      if (win.requestAnimationFrame) frame = win.requestAnimationFrame(run);
+      else timeout = win.setTimeout(run, 16);
+    },
+    cancel() {
+      if (frame !== void 0) win.cancelAnimationFrame(frame);
+      if (timeout !== void 0) win.clearTimeout(timeout);
+      frame = void 0;
+      timeout = void 0;
+    }
+  };
+}
+
 // src/effects/catalog/interaction-reveal.ts
-function revealPrimitive(id, channels, parameters, perfClass = "compositor") {
+function revealPrimitive(id, channels, parameters, { perfClass = "compositor", placed } = {}) {
+  const contract = {
+    honours: ALL_TIMING_TOKENS,
+    because: "interaction.css pins that value on this effect"
+  };
   return {
     id,
     renderer: "javascript",
-    channels,
+    // A placed family publishes the resolved side, and a running tease, on its host.
+    channels: placed ? [...channels, attributeChannel(placed.attribute), attributeChannel(placed.tease)] : channels,
     parameters,
     supportedTimelines: ["time"],
     supportedActivations: ["load"],
     defaultActivation: "load",
     perfClass,
     reducedMotion: "shorten",
-    prepare: stylesheetTimingPrepare(id, {
-      honours: ALL_TIMING_TOKENS,
-      because: "interaction.css pins that value on this effect"
-    })
+    prepare: placed ? withTimingContract(
+      id,
+      contract,
+      (el, params, ctx) => deferredInstance(() => {
+        mirrorTimingToCss(id, ALL_TIMING_TOKENS, params, ctx);
+        return prepareReveal(el, params, placed, ctx);
+      })
+    ) : stylesheetTimingPrepare(id, contract)
+  };
+}
+var OPPOSITE = { top: "bottom", bottom: "top", left: "right", right: "left" };
+function isSide(value) {
+  return value !== null && Object.hasOwn(OPPOSITE, value);
+}
+function chooseSide(preferred, room, extent) {
+  if (room[preferred] >= extent) return preferred;
+  const opposite = OPPOSITE[preferred];
+  return room[opposite] > room[preferred] ? opposite : preferred;
+}
+function extentOf(part, host, side) {
+  switch (side) {
+    case "top":
+      return -part.offsetTop;
+    case "bottom":
+      return part.offsetTop + part.offsetHeight - host.clientHeight;
+    case "left":
+      return -part.offsetLeft;
+    case "right":
+      return part.offsetLeft + part.offsetWidth - host.clientWidth;
+  }
+}
+function prepareReveal(el, params, spec, ctx) {
+  const release2 = claimPart(el, params, spec, ctx);
+  const attrs = createAttributeLedger(el);
+  const restore = () => {
+    attrs.restore();
+    release2();
+  };
+  const place2 = params.text("place");
+  const teaseMs = params.ms("tease", 0);
+  const auto = place2 === "auto";
+  if (!auto && isSide(place2)) attrs.set(spec.attribute, place2);
+  const placeSide = auto ? autoPlacer(el, spec, attrs, ctx.win) : void 0;
+  const shift = shifter(el, spec, ctx);
+  const measure = () => {
+    placeSide?.();
+    shift();
+  };
+  let endTease = () => {
+  };
+  const shown = whileShown(el, ctx, measure, () => endTease());
+  const tease = teaseMs > 0 ? teaseOnEnter(el, ctx, { ms: teaseMs, attribute: spec.tease, attrs, shown }) : void 0;
+  if (tease) endTease = tease.end;
+  return () => {
+    tease?.stop();
+    shown.stop();
+    restore();
+  };
+}
+function claimPart(el, params, spec, ctx) {
+  const selector = resolveTarget(params.text("target"), ctx, spec.name);
+  if (!selector) return () => {
+  };
+  const matches = queryScoped(el, ctx, selector, "self");
+  const part = matches[0];
+  if (!part) {
+    ctx.warn(`${spec.name} target "${selector}" matched nothing inside this element`);
+    return () => {
+    };
+  }
+  if (matches.length > 1) {
+    ctx.warn(
+      `${spec.name} target "${selector}" matched ${matches.length} elements; only the first is used`
+    );
+  }
+  const ledger = createAttributeLedger(part);
+  if (!part.hasAttribute(spec.marker)) ledger.set(spec.marker, "");
+  return () => ledger.restore();
+}
+function autoPlacer(el, spec, attrs, win) {
+  const preferred = spec.preferred(el);
+  let side = preferred;
+  attrs.set(spec.attribute, side);
+  return () => {
+    const part = el.querySelector(`[${spec.marker}]`);
+    if (!part) return;
+    const rect = el.getBoundingClientRect();
+    const room = {
+      top: rect.top,
+      bottom: win.innerHeight - rect.bottom,
+      left: rect.left,
+      right: win.innerWidth - rect.right
+    };
+    const next = chooseSide(preferred, room, extentOf(part, el, side));
+    if (next === side) return;
+    side = next;
+    attrs.set(spec.attribute, side);
+  };
+}
+var VIEWPORT_MARGIN = 8;
+function shiftWithin(start, size, viewport, margin = VIEWPORT_MARGIN) {
+  const low = margin;
+  const high = viewport - margin;
+  if (start < low || size > high - low) return low - start;
+  if (start + size > high) return high - start - size;
+  return 0;
+}
+function shifter(el, spec, ctx) {
+  let written = 0;
+  return () => {
+    const part = el.querySelector(`[${spec.marker}]`);
+    if (!part) return;
+    const stamped = el.getAttribute(spec.attribute);
+    const side = isSide(stamped) ? stamped : spec.preferred(el);
+    const rect = part.getBoundingClientRect();
+    const hostRect = el.getBoundingClientRect();
+    const [startKey, sizeKey, offsetKey, borderKey, layoutKey, viewportKey, windowKey] = side === "top" || side === "bottom" ? ["left", "width", "offsetLeft", "clientLeft", "offsetWidth", "clientWidth", "innerWidth"] : ["top", "height", "offsetTop", "clientTop", "offsetHeight", "clientHeight", "innerHeight"];
+    const hostSize = el[layoutKey];
+    const zoom = hostSize > 0 ? hostRect[sizeKey] / hostSize : 1;
+    if (zoom <= 0) return;
+    const entranceScale = parseFloat(ctx.win.getComputedStyle(part).scale) || 1;
+    const size = rect[sizeKey] / entranceScale;
+    const start = hostRect[startKey] + (el[borderKey] + part[offsetKey]) * zoom - size / 2;
+    const viewport = ctx.doc.documentElement[viewportKey] || ctx.win[windowKey];
+    const next = shiftWithin(start, size, viewport) / zoom;
+    if (next === written) return;
+    written = next;
+    ctx.style.set(spec.shift, `${next}px`);
+  };
+}
+function whileShown(el, ctx, measure, onUser) {
+  const { win } = ctx;
+  const frame = frameScheduler(win, measure);
+  let hovered = false;
+  let focused = false;
+  let teasing = false;
+  let watching;
+  const sync = () => {
+    const shown = hovered || focused || teasing;
+    if (shown && !watching) {
+      measure();
+      watching = new AbortController();
+      const options = { capture: true, passive: true, signal: watching.signal };
+      win.addEventListener("scroll", frame.request, options);
+      win.addEventListener("resize", frame.request, options);
+    } else if (!shown && watching) {
+      watching.abort();
+      watching = void 0;
+      frame.cancel();
+    }
+  };
+  const on = (type, update) => el.addEventListener(type, (event) => {
+    update(event);
+    sync();
+  }, { signal: ctx.signal });
+  on("pointerenter", () => {
+    hovered = true;
+    onUser();
+  });
+  on("pointerleave", () => hovered = false);
+  on("focusin", () => {
+    focused = true;
+    onUser();
+  });
+  on("focusout", (event) => {
+    focused = el.contains(event.relatedTarget);
+  });
+  return {
+    setTeasing(on2) {
+      teasing = on2;
+      sync();
+    },
+    stop() {
+      watching?.abort();
+      frame.cancel();
+    }
+  };
+}
+function teaseOnEnter(el, ctx, {
+  ms,
+  attribute,
+  attrs,
+  shown
+}) {
+  const { win } = ctx;
+  let timer;
+  let observer;
+  const end = () => {
+    if (timer === void 0) return;
+    win.clearTimeout(timer);
+    timer = void 0;
+    attrs.remove(attribute);
+    shown.setTeasing(false);
+  };
+  const start = () => {
+    shown.setTeasing(true);
+    attrs.set(attribute, "");
+    timer = win.setTimeout(end, ms);
+  };
+  const Observer = win.IntersectionObserver;
+  if (Observer) {
+    observer = new Observer(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting && entry.intersectionRatio >= 0.5)) return;
+        observer.disconnect();
+        start();
+      },
+      { threshold: 0.5 }
+    );
+    observer.observe(el);
+  }
+  return {
+    end,
+    stop() {
+      observer?.disconnect();
+      if (timer !== void 0) win.clearTimeout(timer);
+      timer = void 0;
+    }
   };
 }
 var labelSwapParams = {
@@ -885,10 +1155,34 @@ var hoverIntentParams = {
   duration: { type: "time", default: "160ms", cssProperty: "--kui-duration" },
   delay: { type: "time", default: "1000ms", cssProperty: "--kui-delay" },
   ease: { type: "easing", default: "ease-out", cssProperty: "--kui-ease" },
-  distance: { type: "length", default: "4px", cssProperty: "--kui-hover-intent-distance" }
+  distance: { type: "length", default: "4px", cssProperty: "--kui-hover-intent-distance" },
+  color: { type: "color", default: "#f4f4f0", cssProperty: "--kui-hover-intent-color" },
+  "bg-color": { type: "color", default: "#111111", cssProperty: "--kui-hover-intent-bg-color" },
+  radius: { type: "length", default: "12px", cssProperty: "--kui-hover-intent-radius" },
+  // `place` and `tease` are read by `prepareReveal`, not by any stylesheet — see
+  // `ParamSpecBase.cssProperty`.
+  place: {
+    type: "keyword",
+    default: "top",
+    keywords: ["top", "bottom", "auto"],
+    cssProperty: "--kui-hover-intent-place"
+  },
+  tease: { type: "time", default: "0ms", cssProperty: "--kui-hover-intent-tease" },
+  // Names the hint, in place of a `data-kui-hint` in the markup — see `claimPart`. Declared, so
+  // `compile.ts` leaves it here rather than moving the effect onto the hint.
+  target: { type: "text", default: "", cssProperty: "--kui-target" }
 };
 var HOVER_INTENT_PRIMITIVES = [
-  revealPrimitive("hover-intent", ["hint"], hoverIntentParams)
+  revealPrimitive("hover-intent", ["hint"], hoverIntentParams, {
+    placed: {
+      name: "hover-intent",
+      marker: "data-kui-hint",
+      attribute: "data-kui-hint-place",
+      tease: "data-kui-hint-tease",
+      shift: "--kui-hover-intent-shift",
+      preferred: () => "top"
+    }
+  })
 ];
 var HOVER_INTENT_PRESETS = [
   { name: "hover-intent", phase: "state", primitive: "hover-intent" }
@@ -906,16 +1200,65 @@ var anchoredPreviewParams = {
     finite: true,
     minimum: 0,
     maximum: 1
-  }
+  },
+  color: { type: "color", default: "currentcolor", cssProperty: "--kui-anchored-preview-color" },
+  "bg-color": {
+    type: "color",
+    default: "transparent",
+    cssProperty: "--kui-anchored-preview-bg-color"
+  },
+  radius: { type: "length", default: "0px", cssProperty: "--kui-anchored-preview-radius" },
+  // `place` and `tease` are read by `prepareReveal`, not by any stylesheet — see
+  // `ParamSpecBase.cssProperty`. `tease` is `hover-intent`'s, unchanged: `0ms` is off.
+  place: {
+    type: "keyword",
+    default: "top",
+    keywords: ["top", "bottom", "left", "right", "auto"],
+    cssProperty: "--kui-anchored-preview-place"
+  },
+  tease: { type: "time", default: "0ms", cssProperty: "--kui-anchored-preview-tease" },
+  // Names the preview, in place of a `data-kui-preview` in the markup — see `claimPart`.
+  target: { type: "text", default: "", cssProperty: "--kui-target" }
 };
+function previewSideOf(el) {
+  for (const token of (el.getAttribute(ATTR.normalized) ?? "").split(/\s+/)) {
+    const side = /^anchored-preview(?:-(bottom|left|right))?$/.exec(token);
+    if (side) return side[1] ?? "top";
+  }
+  return "top";
+}
 var ANCHORED_PREVIEW_PRIMITIVES = [
-  revealPrimitive("anchored-preview", ["preview"], anchoredPreviewParams)
+  revealPrimitive("anchored-preview", ["preview"], anchoredPreviewParams, {
+    placed: {
+      name: "anchored-preview",
+      marker: "data-kui-preview",
+      attribute: "data-kui-preview-place",
+      tease: "data-kui-preview-tease",
+      shift: "--kui-anchored-preview-shift",
+      preferred: previewSideOf
+    }
+  })
 ];
 var ANCHORED_PREVIEW_PRESETS = [
   { name: "anchored-preview", phase: "state", primitive: "anchored-preview" },
-  { name: "anchored-preview-bottom", phase: "state", primitive: "anchored-preview" },
-  { name: "anchored-preview-left", phase: "state", primitive: "anchored-preview" },
-  { name: "anchored-preview-right", phase: "state", primitive: "anchored-preview" }
+  {
+    name: "anchored-preview-bottom",
+    phase: "state",
+    primitive: "anchored-preview",
+    params: { place: "bottom" }
+  },
+  {
+    name: "anchored-preview-left",
+    phase: "state",
+    primitive: "anchored-preview",
+    params: { place: "left" }
+  },
+  {
+    name: "anchored-preview-right",
+    phase: "state",
+    primitive: "anchored-preview",
+    params: { place: "right" }
+  }
 ];
 var searchExpandParams = {
   duration: { type: "time", default: "260ms", cssProperty: "--kui-duration" },
@@ -933,7 +1276,7 @@ var SEARCH_EXPAND_PRIMITIVES = [
     "search-expand",
     ["expand", "discrete", "search-field"],
     searchExpandParams,
-    "layout"
+    { perfClass: "layout" }
   )
 ];
 var SEARCH_EXPAND_PRESETS = [
@@ -1349,7 +1692,10 @@ var cursorDotParams = {
   label: { type: "text", default: "", cssProperty: "--kui-label" }
 };
 var POINTER_PRIMITIVES = [
-  pointerPrimitive("tilt-3d", ["rotate"], tiltParams, deferPrepare(prepareTilt3d)),
+  // `skew` is the `transform` shorthand's channel, which is what `prepareTilt3d` writes (a
+  // perspective and two axis rotations) — never the `rotate` property — beside an inline
+  // `transition` for its settle.
+  pointerPrimitive("tilt-3d", ["skew", "transition"], tiltParams, deferPrepare(prepareTilt3d)),
   pointerPrimitive("tilt-parallax", ["translate"], parallaxParams, deferPrepare(prepareTiltParallax)),
   pointerPrimitive("cursor-follow", ["translate"], cursorDotParams, deferPrepare(prepareCursorFollow)),
   pointerPrimitive("cursor-lag", ["translate"], cursorDotParams, deferPrepare(prepareCursorLag)),
@@ -1358,7 +1704,13 @@ var POINTER_PRIMITIVES = [
   // `pseudo-before`: the glow overlay is a `::before` rule in `interaction.css`, so this primitive
   // owns that box the same way the border family does. See `border-draw`'s comment in
   // `HOVER_PRIMITIVES` for what the token means and why it was added here in the same change.
-  pointerPrimitive("cursor-spotlight", ["spotlight", "pseudo-before"], {}, deferPrepare(prepareSpotlight))
+  // `position`: the `relative` it gives an unpositioned host so that overlay has an anchor.
+  pointerPrimitive(
+    "cursor-spotlight",
+    ["spotlight", "pseudo-before", "position"],
+    {},
+    deferPrepare(prepareSpotlight)
+  )
 ];
 function prepareCursorFollow(el, params, ctx) {
   return prepareCursorDot(el, params, ctx, "kui-cursor-dot-follow");
@@ -1838,52 +2190,6 @@ function installBackgroundMedia(el, ctx, options) {
   };
 }
 
-// src/core/element-size.ts
-function watchElementSize(win, onChange) {
-  const ResizeObserverCtor = win.ResizeObserver;
-  const observer = ResizeObserverCtor ? new ResizeObserverCtor(onChange) : void 0;
-  const elements = /* @__PURE__ */ new Set();
-  win.addEventListener("resize", onChange, { passive: true });
-  return {
-    observe(element) {
-      if (elements.has(element)) return;
-      elements.add(element);
-      observer?.observe(element);
-    },
-    unobserve(element) {
-      elements.delete(element);
-      observer?.unobserve(element);
-    },
-    disconnect() {
-      win.removeEventListener("resize", onChange);
-      observer?.disconnect();
-      elements.clear();
-    }
-  };
-}
-function frameScheduler(win, callback) {
-  let frame;
-  let timeout;
-  const run = () => {
-    frame = void 0;
-    timeout = void 0;
-    callback();
-  };
-  return {
-    request() {
-      if (frame !== void 0 || timeout !== void 0) return;
-      if (win.requestAnimationFrame) frame = win.requestAnimationFrame(run);
-      else timeout = win.setTimeout(run, 16);
-    },
-    cancel() {
-      if (frame !== void 0) win.cancelAnimationFrame(frame);
-      if (timeout !== void 0) win.clearTimeout(timeout);
-      frame = void 0;
-      timeout = void 0;
-    }
-  };
-}
-
 // src/effects/catalog/media-shared.ts
 var AXIS_DEGREES = { vertical: 0, horizontal: 90 };
 var UNIT_DEGREES = { deg: 1, d: 1, grad: 0.9, rad: 180 / Math.PI, turn: 360 };
@@ -2242,14 +2548,14 @@ function prepareSlatAssemble(el, params, ctx) {
     settle2 = resolve;
   });
   let landed = false;
-  const land = () => {
+  const land2 = () => {
     if (landed) return;
     landed = true;
     stage.classList.remove("kui-slat-animating");
     built.restore();
     settle2();
   };
-  const timer = ctx.win.setTimeout(land, slatAssembleFinishMs(params, count));
+  const timer = ctx.win.setTimeout(land2, slatAssembleFinishMs(params, count));
   return {
     cleanup: () => {
       ctx.win.clearTimeout(timer);
@@ -2260,7 +2566,7 @@ function prepareSlatAssemble(el, params, ctx) {
     finished,
     finish: () => {
       ctx.win.clearTimeout(timer);
-      land();
+      land2();
     }
   };
 }
@@ -2395,7 +2701,9 @@ var MEDIA_JS_PRIMITIVES = [
   {
     id: "slat-assemble",
     renderer: "javascript",
-    channels: [CHANNEL.opacity, CHANNEL.translate, CHANNEL.rotate],
+    // `position` for the `relative` it gives an unpositioned host, and the subtree because
+    // `installSlatStage` appends its slat stage there.
+    channels: [CHANNEL.opacity, CHANNEL.translate, CHANNEL.rotate, "position", SUBTREE_CHANNEL],
     parameters: slatParams,
     supportedTimelines: ["time"],
     supportedActivations: ["load", "enter", "hover", "focus", "click", "manual"],
@@ -2419,12 +2727,15 @@ var MEDIA_JS_PRIMITIVES = [
      * and it is what makes `background-media, video-scrub` on one element a reported conflict
      * rather than two effects silently fighting over the same picture.
      *
-     * `layout` is claimed for the same reason `pin` claims it: preparation writes `position` and
-     * `isolation` on the *host*, which is a stacking-context claim on someone else's element. Left
-     * undeclared, `background-media, pin-section` composed silently while both decided what
-     * `position` the host has — the conflict detector cannot report a claim it was never told about.
+     * `position` and `isolation` are the two properties preparation writes on the *host*, a
+     * stacking-context claim on someone else's element. Left undeclared, `background-media,
+     * pin-section` composed silently while both decided what `position` the host has — the
+     * conflict detector cannot report a claim it was never told about.
+     *
+     * And the subtree, because the layer is appended into the host (`installBackgroundMedia`): it
+     * would become a deck's last slide, or `scroll-story`'s `:last-child` in place of its sections.
      */
-    channels: ["media", "layout"],
+    channels: ["media", "position", "isolation", SUBTREE_CHANNEL],
     renderer: "javascript",
     parameters: backgroundMediaParams,
     // Not a claim to support four timelines — an abstention. A backdrop is not driven by progress
@@ -2953,7 +3264,9 @@ function countPrimitive(id, parameters, prepare) {
   return {
     id,
     renderer: "javascript",
-    channels: ["content"],
+    // The subtree too: both counters rebuild the host's children (the number, or the odometer's
+    // digit columns), so a deck or a widget beside one would lose what it put there.
+    channels: ["content", SUBTREE_CHANNEL],
     parameters,
     supportedTimelines: ["time"],
     supportedActivations: ["load", "enter", "hover", "focus", "click", "manual"],
@@ -3341,7 +3654,9 @@ function jsTextPrimitive(id, channels, options) {
   return {
     id,
     renderer: "javascript",
-    channels,
+    // Every one of these replaces the host's children with its own spans or layers, so it owns
+    // them: beside a deck it would split the slides, beside `slow-mo` it would swallow the toggle.
+    channels: [...channels, SUBTREE_CHANNEL],
     parameters: options.parameters,
     supportedTimelines: ["time"],
     supportedActivations: ["load", "enter", "hover", "focus", "click", "manual"],
@@ -3471,21 +3786,21 @@ function lineCompletion(ctx, params, layers, count) {
   const finished = new Promise((resolve) => {
     settle2 = resolve;
   });
-  const land = () => {
+  const land2 = () => {
     ctx.win.clearTimeout(timer);
     timer = void 0;
     layers.decorative.removeAttribute("aria-hidden");
     layers.srOnly.remove();
     settle2();
   };
-  let timer = ctx.win.setTimeout(land, splitRevealFinishMs(params, count));
+  let timer = ctx.win.setTimeout(land2, splitRevealFinishMs(params, count));
   return {
     finished,
-    land,
+    land: land2,
     rearm(nextCount) {
       if (timer === void 0) return;
       ctx.win.clearTimeout(timer);
-      timer = ctx.win.setTimeout(land, splitRevealFinishMs(params, nextCount));
+      timer = ctx.win.setTimeout(land2, splitRevealFinishMs(params, nextCount));
     },
     cancel() {
       if (timer !== void 0) ctx.win.clearTimeout(timer);
@@ -3724,7 +4039,8 @@ var TEXT_JS_PRIMITIVES = [
     prepare: deferPrepare(prepareTypewriter),
     perfClass: "continuous"
   }),
-  jsTextPrimitive("scramble-text", ["content"], {
+  // `min-width`/`min-height`: the rest box it pins while the glyphs churn (`prepareScramble`).
+  jsTextPrimitive("scramble-text", ["content", "min-width", "min-height"], {
     parameters: scrambleParams,
     prepare: deferPrepare(prepareScramble),
     perfClass: "continuous"
@@ -4133,6 +4449,36 @@ function registerCore(registry) {
   return registry;
 }
 
+// src/core/deck-viewer.ts
+var provided = null;
+function provideDeckViewer(viewer) {
+  provided = viewer;
+}
+function attachDeckViewer(request) {
+  return provided ? provided(request) : null;
+}
+var VIEWER_EVENT = "kui:viewer";
+function announceViewer(doc, opener, open2) {
+  const Ctor = doc.defaultView?.CustomEvent ?? CustomEvent;
+  const source = opener.isConnected ? opener : doc;
+  source.dispatchEvent(new Ctor(VIEWER_EVENT, { bubbles: true, detail: { open: open2 } }));
+}
+var DECK_LIGHTBOX_PARAM = {
+  type: "keyword",
+  default: "false",
+  cssProperty: "--kui-deck-lightbox",
+  keywords: ["true", "false"]
+};
+function deckLightbox(enabled, request, warn) {
+  if (!enabled) return () => {
+  };
+  const release2 = attachDeckViewer(request);
+  if (release2) return release2;
+  warn("lightbox:true needs the showcase module (the lightbox gallery), which is not loaded; cards will not open");
+  return () => {
+  };
+}
+
 // src/effects/step-marking.ts
 var STEP_STATE_ATTR = "data-kui-step-state";
 var STEP_OFFSET_ATTR = "data-kui-step-offset";
@@ -4221,28 +4567,49 @@ function countSteps(params, resolveSteps) {
   }
   return Math.max(1, ...groups.values());
 }
+function bindControl(request, param, run) {
+  const { el, ctx, params, label } = request;
+  const selector = resolveTarget(params.text(param), ctx, `${label} ${param}`);
+  if (!selector) return null;
+  if (queryControls(el, ctx, selector).length === 0) ctx.warn(`${label} ${param} "${selector}" matched nothing`);
+  return { selector, run };
+}
 function delegateControls(request) {
-  const { el, ctx, scope, groups } = request;
+  const { el, ctx, groups } = request;
   if (groups.length === 0) return () => {
   };
-  const root = scope === "page" ? ctx.doc : el;
-  const onClick = (event) => {
-    const from = event.target;
-    if (typeof from?.closest !== "function") return;
+  const press = (from, inside) => {
     for (const { selector, run } of groups) {
-      const matches = queryScoped(el, ctx, selector, scope);
+      const matches = queryControls(el, ctx, selector);
       const matched = new Set(matches);
+      const stop = inside ? el : null;
       let node = from;
-      while (node && !matched.has(node)) node = node.parentElement;
-      if (!node) continue;
+      while (node && node !== stop && !matched.has(node)) node = node.parentElement;
+      if (!node || node === stop) continue;
       run(node, matches.indexOf(node));
     }
   };
-  root.addEventListener("click", onClick);
-  return () => root.removeEventListener("click", onClick);
+  const pressed = (event) => {
+    const from = event.target;
+    return typeof from?.closest === "function" ? from : null;
+  };
+  const onInside = (event) => {
+    const from = pressed(event);
+    if (from) press(from, true);
+  };
+  const onOutside = (event) => {
+    const from = pressed(event);
+    if (from && !el.contains(from)) press(from, false);
+  };
+  el.addEventListener("click", onInside);
+  ctx.doc.addEventListener("click", onOutside);
+  return () => {
+    el.removeEventListener("click", onInside);
+    ctx.doc.removeEventListener("click", onOutside);
+  };
 }
 function createStepIndex(options) {
-  const { el, params, ctx, scope, resolveSteps, onRender } = options;
+  const { el, params, ctx, resolveSteps, onRender } = options;
   const name = options.name ?? "step-progress";
   const marker = createStepMarker(resolveSteps, (message) => ctx.warn(`${name} ${message}`));
   const self = createAttributeLedger(el);
@@ -4261,26 +4628,23 @@ function createStepIndex(options) {
   };
   const next = () => goTo(nextStep(step, total()));
   const prev = () => goTo(prevStep(step, total()));
-  const groups = [];
-  const bindControl = (param, run) => {
-    const selector = resolveTarget(params.text(param), ctx, `${name} ${param}`);
-    if (!selector) return false;
-    if (queryScoped(el, ctx, selector, scope).length === 0) {
-      ctx.warn(`${name} ${param} "${selector}" matched nothing`);
-    }
-    groups.push({ selector, run });
-    return true;
+  const byHand = (move) => {
+    options.onInput?.();
+    move();
   };
-  const named = [
-    bindControl("next", next),
-    bindControl("prev", prev),
-    bindControl("jump", (_node, position) => {
-      if (position >= 0) goTo(position);
-    })
-  ].some(Boolean);
-  const fallback = options.clickFallback !== false && !named;
-  if (fallback) el.addEventListener("click", next);
-  const releaseControls = delegateControls({ el, ctx, scope, groups });
+  const request = { el, ctx, params, label: name };
+  const groups = [
+    bindControl(request, "next", () => byHand(next)),
+    bindControl(request, "prev", () => byHand(prev)),
+    bindControl(request, "jump", (_node, position) => {
+      if (position >= 0) byHand(() => goTo(position));
+    }),
+    ...options.controls ?? []
+  ].filter((group) => group !== null);
+  const fallback = options.clickFallback !== false && groups.length === 0;
+  const onContainerClick = () => byHand(next);
+  if (fallback) el.addEventListener("click", onContainerClick);
+  const releaseControls = delegateControls({ el, ctx, groups });
   render();
   return {
     goTo,
@@ -4289,7 +4653,7 @@ function createStepIndex(options) {
     current: () => step,
     total,
     release: () => {
-      if (fallback) el.removeEventListener("click", next);
+      if (fallback) el.removeEventListener("click", onContainerClick);
       releaseControls();
       self.restore();
       selfStyle.restore();
@@ -4298,51 +4662,327 @@ function createStepIndex(options) {
   };
 }
 
-// src/effects/forms/primitives.ts
-var timing = {
-  duration: { type: "time", default: "400ms", cssProperty: "--kui-duration" },
-  ...TRIGGER_DELAY_PARAM,
-  ease: { type: "easing", default: "ease-out", cssProperty: "--kui-ease" }
-};
-var FORM_STATE_TIMING = {
-  because: "forms.css pins its timing literally \u2014 the motion lands on a sibling that inline custom properties cannot reach"
-};
-var NATIVE_STATE_PRIMITIVE = {
-  id: "native-state",
-  renderer: "javascript",
-  channels: [CHANNEL.translate, CHANNEL.scale, CHANNEL.opacity, CHANNEL.stroke, CHANNEL.color],
-  parameters: {},
-  supportedTimelines: ["time"],
-  supportedActivations: ["load"],
-  defaultActivation: "load",
-  perfClass: "compositor",
-  // Native pseudo-classes drive these and the motion lands on a sibling, not on the control that
-  // carries the attribute, so base.css's policy layer enforces this through its sibling
-  // `transition-duration` rules rather than the `animation-*` ones.
-  reducedMotion: "disable",
-  prepare: withTimingContract("native-state", FORM_STATE_TIMING, () => inertInstance())
-};
-function prepareSiblingScale(cssProperty) {
-  return (el, params) => {
-    const sibling = el.nextElementSibling;
-    sibling?.style.setProperty(cssProperty, String(params.num("scale", 1)));
-    return () => sibling?.style.removeProperty(cssProperty);
-  };
+// src/effects/auto-motion.ts
+var MIN_PERIOD_MS = 2e3;
+var MAX_FRAME_MS = 100;
+function clampPeriod(ms) {
+  if (!Number.isFinite(ms) || ms === 0) return 0;
+  return Math.sign(ms) * Math.max(MIN_PERIOD_MS, Math.abs(ms));
+}
+function cyclesFor(dtMs, periodMs) {
+  return Math.min(Math.max(dtMs, 0), MAX_FRAME_MS) / periodMs;
+}
+function isKeyboardFocus(target) {
+  const node = target;
+  if (typeof node?.matches !== "function") return true;
+  try {
+    return node.matches(":focus-visible");
+  } catch {
+    return true;
+  }
 }
-function siblingScalePrimitive(id, cssProperty) {
-  return {
-    id,
-    renderer: "javascript",
-    channels: [CHANNEL.translate, CHANNEL.scale, CHANNEL.opacity, CHANNEL.stroke, CHANNEL.color],
-    parameters: { scale: { type: "number", default: "1", cssProperty } },
-    supportedTimelines: ["time"],
-    supportedActivations: ["load"],
-    defaultActivation: "load",
-    perfClass: "compositor",
-    reducedMotion: "disable",
-    prepare: withTimingContract(id, FORM_STATE_TIMING, deferPrepare(prepareSiblingScale(cssProperty)))
+function createAutoMotion(request) {
+  const { el, ctx, spinMs, autoplayMs, settleMs, advance, step, setSpinning, onPausedChange } = request;
+  const pauseOnHover = request.pauseOnHover ?? true;
+  const enabled = spinMs !== 0 || autoplayMs !== 0;
+  if (!enabled) {
+    return {
+      enabled,
+      interrupt() {
+      },
+      hold() {
+      },
+      toggle() {
+      },
+      release() {
+      }
+    };
+  }
+  const win = ctx.win;
+  let userPaused = ctx.reducedMotion;
+  let hovered = false;
+  let focused = false;
+  let onscreen = true;
+  let gesture = false;
+  let held = false;
+  let viewing = false;
+  let viewerOpen = false;
+  let focusBeforeViewer = false;
+  let frame = 0;
+  let lastFrameAt = null;
+  let timer = null;
+  let holdTimer = null;
+  let spinning = false;
+  const active = () => !userPaused && !hovered && !focused && onscreen && !gesture && !held && !viewing && !ctx.doc.hidden;
+  const requestFrame = (callback) => typeof win.requestAnimationFrame === "function" ? win.requestAnimationFrame(callback) : win.setTimeout(() => callback(Date.now()), 16);
+  const cancelFrame = (handle) => {
+    if (typeof win.cancelAnimationFrame === "function") win.cancelAnimationFrame(handle);
+    else win.clearTimeout(handle);
+  };
+  const publishSpinning = (next) => {
+    if (next === spinning) return;
+    spinning = next;
+    setSpinning(next);
+  };
+  const tick = (now) => {
+    frame = 0;
+    if (!active()) return;
+    if (lastFrameAt !== null) advance(cyclesFor(now - lastFrameAt, spinMs));
+    lastFrameAt = now;
+    frame = requestFrame(tick);
+  };
+  const startSpin = () => {
+    if (frame !== 0) return;
+    publishSpinning(true);
+    lastFrameAt = null;
+    frame = requestFrame(tick);
+  };
+  const stopSpin = () => {
+    if (frame !== 0) cancelFrame(frame);
+    frame = 0;
+    publishSpinning(false);
+  };
+  const armAutoplay = () => {
+    if (timer !== null) return;
+    timer = win.setTimeout(() => {
+      timer = null;
+      step(autoplayMs > 0 ? 1 : -1);
+      update();
+    }, Math.abs(autoplayMs));
   };
-}
+  const clearAutoplay = () => {
+    if (timer === null) return;
+    win.clearTimeout(timer);
+    timer = null;
+  };
+  function update() {
+    const running = active();
+    if (spinMs !== 0) (running ? startSpin : stopSpin)();
+    if (autoplayMs !== 0) (running ? armAutoplay : clearAutoplay)();
+  }
+  const onEnter = () => {
+    hovered = true;
+    update();
+  };
+  const onLeave = () => {
+    hovered = false;
+    update();
+  };
+  const onFocusIn = (event) => {
+    focused = (!viewerOpen || focusBeforeViewer) && isKeyboardFocus(event.target);
+    update();
+  };
+  const onFocusOut = (event) => {
+    if (!viewerOpen) focusBeforeViewer = focused;
+    const next = event.relatedTarget;
+    focused = next !== null && el.contains(next) && isKeyboardFocus(next);
+    update();
+  };
+  const onVisibility = () => update();
+  const onViewer = (event) => {
+    const open2 = event.detail?.open === true;
+    viewerOpen = open2;
+    viewing = open2 && el.contains(event.target);
+    update();
+  };
+  if (pauseOnHover) {
+    el.addEventListener("pointerenter", onEnter);
+    el.addEventListener("pointerleave", onLeave);
+  }
+  el.addEventListener("focusin", onFocusIn);
+  el.addEventListener("focusout", onFocusOut);
+  ctx.doc.addEventListener("visibilitychange", onVisibility);
+  ctx.doc.addEventListener(VIEWER_EVENT, onViewer);
+  const Observer = win.IntersectionObserver;
+  const observer = Observer ? new Observer((entries) => {
+    for (const entry of entries) onscreen = entry.isIntersecting;
+    update();
+  }) : null;
+  observer?.observe(el);
+  onPausedChange(userPaused);
+  update();
+  return {
+    enabled,
+    interrupt() {
+      held = true;
+      if (holdTimer !== null) win.clearTimeout(holdTimer);
+      holdTimer = win.setTimeout(() => {
+        holdTimer = null;
+        held = false;
+        update();
+      }, Math.max(0, settleMs));
+      update();
+    },
+    hold(holding) {
+      gesture = holding;
+      update();
+    },
+    toggle() {
+      userPaused = !userPaused;
+      onPausedChange(userPaused);
+      update();
+    },
+    release() {
+      if (frame !== 0) cancelFrame(frame);
+      frame = 0;
+      if (timer !== null) win.clearTimeout(timer);
+      if (holdTimer !== null) win.clearTimeout(holdTimer);
+      timer = null;
+      holdTimer = null;
+      observer?.disconnect();
+      el.removeEventListener("pointerenter", onEnter);
+      el.removeEventListener("pointerleave", onLeave);
+      el.removeEventListener("focusin", onFocusIn);
+      el.removeEventListener("focusout", onFocusOut);
+      ctx.doc.removeEventListener("visibilitychange", onVisibility);
+      ctx.doc.removeEventListener(VIEWER_EVENT, onViewer);
+      publishSpinning(false);
+    }
+  };
+}
+var AUTOPLAY_PARAM = { type: "time", default: "0s", cssProperty: "--kui-autoplay" };
+var PAUSE_PARAM = { type: "text", default: "", cssProperty: "--kui-pause" };
+var HOVER_PARAM = {
+  type: "keyword",
+  default: "pause",
+  keywords: ["pause", "none"],
+  cssProperty: "--kui-hover"
+};
+function motionPeriods(request) {
+  const { params, ctx, label } = request;
+  const spinRaw = request.spin ? params.ms("spin", 0) : 0;
+  const autoplayRaw = params.ms("autoplay", 0);
+  const spin2 = clampPeriod(spinRaw);
+  const autoplay = clampPeriod(autoplayRaw);
+  if (spin2 !== spinRaw) ctx.warn(`${label} spin: minimum is 2s; clamped to ${Math.abs(spin2) / 1e3}s`);
+  if (autoplay !== autoplayRaw) {
+    ctx.warn(`${label} autoplay: minimum is 2s; clamped to ${Math.abs(autoplay) / 1e3}s`);
+  }
+  if (spin2 !== 0 && autoplay !== 0) {
+    ctx.warn(`${label}: spin: and autoplay: are both set; spin: wins`);
+    return { spin: spin2, autoplay: 0 };
+  }
+  return { spin: spin2, autoplay };
+}
+function createDeckMotion(request) {
+  const { el, ctx, params, label, settleMs, step } = request;
+  const { spin: spin2, autoplay } = motionPeriods(request);
+  const ledgers = /* @__PURE__ */ new Map();
+  const pauseSelector = resolveTarget(params.text("pause"), ctx, `${label} pause`);
+  const reflectPaused = (paused) => {
+    if (!pauseSelector) return;
+    for (const node of queryControls(el, ctx, pauseSelector)) {
+      let ledger = ledgers.get(node);
+      if (!ledger) {
+        ledger = createAttributeLedger(node);
+        ledgers.set(node, ledger);
+      }
+      ledger.set("aria-pressed", String(paused));
+    }
+  };
+  const motion = createAutoMotion({
+    el,
+    ctx,
+    spinMs: spin2,
+    autoplayMs: autoplay,
+    settleMs,
+    pauseOnHover: !params.is("hover", "none"),
+    advance: request.spin?.advance,
+    step,
+    setSpinning: request.spin?.setSpinning,
+    onPausedChange: reflectPaused
+  });
+  let pause = null;
+  if (pauseSelector && !motion.enabled) {
+    ctx.warn(`${label} pause: has nothing to pause without ${request.spin ? "spin: or " : ""}autoplay:`);
+  } else if (pauseSelector) {
+    pause = bindControl({ el, ctx, params, label }, "pause", () => motion.toggle());
+  }
+  return {
+    motion,
+    pause,
+    release() {
+      motion.release();
+      for (const ledger of ledgers.values()) ledger.restore();
+      ledgers.clear();
+    }
+  };
+}
+
+// src/effects/swipe-event.ts
+var SWIPE_EVENT = "kui:swipe";
+var DIRECTIONS = /* @__PURE__ */ new Set(["left", "right", "up", "down"]);
+function announceSwipe(win, el, direction) {
+  const Ctor = win.CustomEvent;
+  el.dispatchEvent(new Ctor(SWIPE_EVENT, { bubbles: true, detail: { direction } }));
+}
+function swipeStep(direction) {
+  return direction === "left" || direction === "up" ? 1 : -1;
+}
+function swipeReaches(source, el) {
+  if (source === el) return true;
+  if (!source.contains(el)) return false;
+  for (let node = el.parentElement; node && node !== source; node = node.parentElement) {
+    if (node.hasAttribute("data-kui-step")) return false;
+  }
+  return true;
+}
+function stepOnSwipe(doc, el, step) {
+  const onSwipe = (event) => {
+    const direction = event.detail?.direction;
+    const source = event.target;
+    if (!direction || !DIRECTIONS.has(direction) || source.nodeType !== 1) return;
+    if (swipeReaches(source, el)) step(swipeStep(direction));
+  };
+  doc.addEventListener(SWIPE_EVENT, onSwipe);
+  return () => doc.removeEventListener(SWIPE_EVENT, onSwipe);
+}
+
+// src/effects/forms/primitives.ts
+var timing = {
+  duration: { type: "time", default: "400ms", cssProperty: "--kui-duration" },
+  ...TRIGGER_DELAY_PARAM,
+  ease: { type: "easing", default: "ease-out", cssProperty: "--kui-ease" }
+};
+var FORM_STATE_TIMING = {
+  because: "forms.css pins its timing literally \u2014 the motion lands on a sibling that inline custom properties cannot reach"
+};
+var NATIVE_STATE_PRIMITIVE = {
+  id: "native-state",
+  renderer: "javascript",
+  channels: [CHANNEL.translate, CHANNEL.scale, CHANNEL.opacity, CHANNEL.stroke, CHANNEL.color],
+  parameters: {},
+  supportedTimelines: ["time"],
+  supportedActivations: ["load"],
+  defaultActivation: "load",
+  perfClass: "compositor",
+  // Native pseudo-classes drive these and the motion lands on a sibling, not on the control that
+  // carries the attribute, so base.css's policy layer enforces this through its sibling
+  // `transition-duration` rules rather than the `animation-*` ones.
+  reducedMotion: "disable",
+  prepare: withTimingContract("native-state", FORM_STATE_TIMING, () => inertInstance())
+};
+function prepareSiblingScale(cssProperty) {
+  return (el, params) => {
+    const sibling = el.nextElementSibling;
+    sibling?.style.setProperty(cssProperty, String(params.num("scale", 1)));
+    return () => sibling?.style.removeProperty(cssProperty);
+  };
+}
+function siblingScalePrimitive(id, cssProperty) {
+  return {
+    id,
+    renderer: "javascript",
+    channels: [CHANNEL.translate, CHANNEL.scale, CHANNEL.opacity, CHANNEL.stroke, CHANNEL.color],
+    parameters: { scale: { type: "number", default: "1", cssProperty } },
+    supportedTimelines: ["time"],
+    supportedActivations: ["load"],
+    defaultActivation: "load",
+    perfClass: "compositor",
+    reducedMotion: "disable",
+    prepare: withTimingContract(id, FORM_STATE_TIMING, deferPrepare(prepareSiblingScale(cssProperty)))
+  };
+}
 var TOGGLE_MORPH_PRIMITIVE = siblingScalePrimitive("toggle-morph", "--kui-toggle-scale");
 var RADIO_FILL_PRIMITIVE = siblingScalePrimitive("radio-fill", "--kui-radio-scale");
 var FOCUS_RING_PRIMITIVE = cssPrimitive("focus-ring", ["shadow"], {
@@ -4418,7 +5058,7 @@ function prepareRangeFill(el, params, ctx) {
 }
 var STRENGTH_METER_PRIMITIVE = jsInputPrimitive(
   "strength-meter",
-  ["meter"],
+  ["meter", attributeChannel("data-kui-strength-level")],
   {},
   deferPrepare(prepareStrengthMeter)
 );
@@ -4429,14 +5069,55 @@ var RANGE_FILL_PRIMITIVE = jsInputPrimitive(
   deferPrepare(prepareRangeFill)
 );
 function prepareStepProgress(el, params, ctx) {
-  const selector = resolveTarget(params.text("target"), ctx, "step-progress");
+  const label = "step-progress";
+  const selector = resolveTarget(params.text("target"), ctx, label);
   const scope = scopeParam(params, "page");
   const resolveSteps = () => selector ? queryScoped(el, ctx, selector, scope) : el.children;
-  return createStepIndex({ el, params, ctx, scope, resolveSteps }).release;
+  const lightbox = params.is("lightbox");
+  const { motion, pause, release: releaseMotion } = createDeckMotion({
+    el,
+    ctx,
+    params,
+    label,
+    settleMs: effectDurationMs(params, 400),
+    step: (direction) => direction > 0 ? index.next() : index.prev()
+  });
+  const index = createStepIndex({
+    el,
+    params,
+    ctx,
+    resolveSteps,
+    controls: pause ? [pause] : [],
+    onInput: () => motion.interrupt(),
+    /*
+     * With `lightbox:true` a click on a slide opens the viewer, so the container click cannot also
+     * advance the deck: one press would both open the gallery and move the slide behind it. The
+     * deck still moves on its arrows, dots, swipe and autoplay.
+     */
+    clickFallback: !lightbox
+  });
+  const releaseViewer = deckLightbox(
+    lightbox,
+    { host: el, cards: resolveSteps, doc: ctx.doc, reducedMotion: ctx.reducedMotion },
+    (message) => ctx.warn(`${label} ${message}`)
+  );
+  const releaseSwipe = stepOnSwipe(ctx.doc, el, (direction) => {
+    motion.interrupt();
+    if (direction > 0) index.next();
+    else index.prev();
+  });
+  return () => {
+    releaseViewer();
+    releaseSwipe();
+    releaseMotion();
+    index.release();
+  };
 }
 var STEP_PROGRESS_BASE = jsInputPrimitive(
   "step-progress",
-  ["state"],
+  // The host's children are its steps unless `target:` says otherwise, so a widget that inserts
+  // one (`slow-mo`'s toggle) would become a step: the subtree is this deck's.
+  [SUBTREE_CHANNEL, attributeChannel("data-kui-step")],
   {
     // Empty default, not '4': `readParams` fills every declared default in unconditionally and
     // does not validate it, so an empty one is how `prepareStepProgress` tells "unauthored" from
@@ -4483,6 +5164,16 @@ var STEP_PROGRESS_BASE = jsInputPrimitive(
      * at 390px and at 1440px, and the page keeps owning the box. Same reason `rest:` is a number.
      */
     main: { type: "number", default: "1", cssProperty: "--kui-main", finite: true, minimum: 0 },
+    /*
+     * The deck steps itself every `autoplay:` (`0s`, the default, is off), and `pause:` names the
+     * author's play/pause control, and `hover:none` stops a resting pointer pausing it. The spatial
+     * decks' declarations and scheduler, shared — see `prepareStepProgress` and `effects/auto-motion.ts`.
+     */
+    autoplay: AUTOPLAY_PARAM,
+    pause: PAUSE_PARAM,
+    hover: HOVER_PARAM,
+    // A click on a slide opens every slide in the lightbox gallery. See `core/deck-viewer.ts`.
+    lightbox: DECK_LIGHTBOX_PARAM,
     // Which tree `target:` is searched in. Unset means this primitive's own historical answer —
     // see `prepareStepProgress`. One declaration, shared: `effects/step-marking.ts`.
     scope: SCOPE_PARAM
@@ -4529,7 +5220,7 @@ function prepareSubmitFlow(el, params, ctx) {
 }
 var SUBMIT_FLOW_PRIMITIVE = jsInputPrimitive(
   "submit-flow",
-  ["state"],
+  [attributeChannel("data-kui-stage")],
   {
     load: { type: "time", default: "1200ms", cssProperty: "--kui-load" },
     hold: { type: "time", default: "1500ms", cssProperty: "--kui-hold" }
@@ -4579,9 +5270,12 @@ var FORMS_PRESETS = [
    * two readings is the stylesheet. `step-progress` was the wrong word to type on a deck of
    * slides, which is the only reason this alias exists; nothing behaves differently under it.
    *
-   * It is still an *index*, not a carousel component: no ARIA, no roving focus, no autoplay. That
-   * boundary is the one section H states — the library animates elements you control and does not
-   * own the widget — and naming this `carousel` does not move it.
+   * It is still an *index*, not a carousel component: no ARIA, no roving focus. That boundary is
+   * the one section H states — the library animates elements you control and does not own the
+   * widget — and naming this `carousel` does not move it. `autoplay:`/`pause:` do not cross it: they
+   * press the same "next" a visitor's control does, on a timer, and the control is still the
+   * author's markup (`effects/auto-motion.ts`, shared with the spatial decks). Likewise
+   * `lightbox:true` hands a click on a slide to the showcase gallery (`core/deck-viewer.ts`).
    *
    * No `requiresOwnSubtree` here, unlike `step-progress` beside it. That flag means "this name's
    * shipped CSS reaches past the element into its descendants, so the universal `target:` must
@@ -4660,6 +5354,17 @@ function recognise(el, handlers, options = {}, deps = defaultGestureDeps()) {
     longPressTimer = null;
   }
   function onDown(event) {
+    if (origin && pointerId !== null && event.pointerId !== pointerId) {
+      clearLongPress();
+      const last = samples[samples.length - 1];
+      releaseCapture(pointerId);
+      finish({ x: last.x, y: last.y, time: deps.now() });
+      return;
+    }
+    if (options.accept && !options.accept(event)) {
+      origin = null;
+      return;
+    }
     origin = sampleOf(event);
     samples = [origin];
     active = false;
@@ -4743,7 +5448,9 @@ function recognise(el, handlers, options = {}, deps = defaultGestureDeps()) {
     stopListeningOnDocument();
     releaseCapture(event.pointerId);
     if (!origin) return;
-    const sample = sampleOf(event);
+    finish(sampleOf(event));
+  }
+  function finish(sample) {
     samples.push(sample);
     reportEnd(vectorNow(sample), sample);
     origin = null;
@@ -4752,6 +5459,7 @@ function recognise(el, handlers, options = {}, deps = defaultGestureDeps()) {
     samples = [];
   }
   function onLostCapture(event) {
+    if (event.target !== el) return;
     if (!captured || event.pointerId !== pointerId) return;
     captured = false;
     onUp(event);
@@ -4906,16 +5614,19 @@ function settle(runners, offset, vector, mode) {
   runners.x.to(offset.x + vector.vx * carry);
   runners.y.to(offset.y + vector.vy * carry);
 }
-function prepareSwipeable(el, params) {
+function prepareSwipeable(el, params, ctx) {
+  const axis = params.text("axis", "both");
+  if (axis !== "both") ctx.style.set("touch-action", `${axis === "x" ? "pan-y" : "pan-x"} pinch-zoom`);
   const stop = recognise(
     el,
     {
       onSwipe(direction) {
         el.setAttribute("data-kui-swipe", direction);
+        announceSwipe(ctx.win, el, direction);
       }
     },
     {
-      axis: params.text("axis", "both"),
+      axis,
       swipeVelocity: params.num("velocity", 300),
       // This primitive moves nothing, so it must not hold the pointer from `pointerdown` — that
       // retargets the following `click` at this element and kills every interactive child (a
@@ -4981,7 +5692,7 @@ function prepareMagnetic(el, params, ctx) {
 var GESTURE_PRIMITIVES = [
   gesturePrimitive(
     "draggable",
-    ["translate"],
+    ["translate", attributeChannel("data-kui-dragging")],
     {
       ...springParams2,
       axis: { type: "keyword", default: "both", cssProperty: "--kui-axis", keywords: ["x", "y", "both"] },
@@ -5012,7 +5723,7 @@ var GESTURE_PRIMITIVES = [
   ),
   gesturePrimitive(
     "swipeable",
-    ["state"],
+    [attributeChannel("data-kui-swipe")],
     {
       axis: { type: "keyword", default: "both", cssProperty: "--kui-axis", keywords: ["x", "y", "both"] },
       velocity: { type: "number", default: "300", cssProperty: "--kui-velocity" }
@@ -5021,7 +5732,7 @@ var GESTURE_PRIMITIVES = [
   ),
   gesturePrimitive(
     "pressable",
-    ["state"],
+    [attributeChannel("data-kui-pressed")],
     { duration: { type: "time", default: "500ms", cssProperty: "--kui-duration" } },
     // `duration` here is the hold threshold, not a span of motion — `long-press 800ms` means
     // "count it once the finger has been down for 800ms". It is read (see `preparePressable`), so
@@ -5072,6 +5783,7 @@ var GESTURE_PRESETS = [
   },
   { name: "swipe", primitive: "swipeable", phase: "state" },
   { name: "swipe-x", primitive: "swipeable", params: { axis: "x" }, phase: "state" },
+  { name: "swipe-y", primitive: "swipeable", params: { axis: "y" }, phase: "state" },
   { name: "long-press", primitive: "pressable", phase: "state" },
   { name: "magnetic", primitive: "magnetic", phase: "state" },
   {
@@ -5367,13 +6079,15 @@ var LAYOUT_PRIMITIVES = [
   ),
   layoutPrimitive(
     "auto-height",
-    ["layout"],
+    // The two properties it writes on the panel: `overflow: hidden`, and the `height` it animates.
+    ["overflow", "height"],
     { attribute: { type: "text", default: "data-open", cssProperty: "--kui-attribute" } },
     deferPrepare(prepareAutoHeight)
   ),
   layoutPrimitive(
     "flip-indicator",
-    ["translate", "layout"],
+    // The bar's landing spot (`translate`) and its `width`, matched to the selected tab.
+    ["translate", "width"],
     {
       follow: { type: "text", default: "", cssProperty: "--kui-follow" },
       attribute: { type: "text", default: "aria-selected", cssProperty: "--kui-attribute" }
@@ -5622,26 +6336,25 @@ function prepareBackToTop(el, params, ctx) {
 var NAV_JS_PRIMITIVES = [
   navPrimitive(
     "header-shrink",
-    // `'shadow'` alongside `'layout'`: `header-shrink`'s host rule also transitions `box-shadow`
-    // (navigation.css), which `layout` alone does not cover — see `header-shrink`'s own
-    // `Preset.transitions` below and `channel-properties.ts`'s `layout` entry for why the two
-    // interpolated properties (`padding-block`/`font-size`) stay on `layout` while this one moves
-    // to the channel that already owns every other box-shadow writer (`lift-shadow`,
-    // `border-glow`). Composing `header-shrink` with either of those is now a refused conflict
-    // instead of a silent clobber on the same property — the self-consistency bug this closes.
-    ["layout", "shadow"],
+    // The three properties its host rule writes (navigation.css): the two it interpolates from
+    // `--kui-shrink`, `padding-block` and `font-size`, each under its own name, and `box-shadow`
+    // on the channel that already owns every other box-shadow writer (`lift-shadow`,
+    // `border-glow`), so composing `header-shrink` with either of those is a refused conflict
+    // instead of a silent clobber. The two used to sit in the shared `'layout'` bucket, which also
+    // refused `header-shrink, pin-until` — a sticky header that shrinks — over nothing they share.
+    ["padding", "font-size", "shadow", attributeChannel("data-kui-shrunk")],
     { offset: { type: "number", default: "120", cssProperty: "--kui-offset" } },
     deferPrepare(prepareHeaderShrink)
   ),
   navPrimitive(
     "header-hide-on-scroll",
-    [CHANNEL.translate],
+    [CHANNEL.translate, attributeChannel("data-kui-hidden")],
     { offset: { type: "number", default: "8", cssProperty: "--kui-offset" } },
     deferPrepare(prepareHeaderHide)
   ),
   navPrimitive(
     "back-to-top-fade",
-    [CHANNEL.opacity, CHANNEL.translate],
+    [CHANNEL.opacity, CHANNEL.translate, attributeChannel("data-kui-visible")],
     { offset: { type: "number", default: "400", cssProperty: "--kui-offset" } },
     deferPrepare(prepareBackToTop)
   )
@@ -6204,7 +6917,10 @@ function installSnapContainer(axis, ctx) {
 var SCROLL_PRIMITIVES = [
   scrollPrimitive({
     id: "pin",
-    channels: ["layout", "progress"],
+    // `position: sticky` and its `top` (`installSticky`): the host's position is what it holds. The
+    // spacer it can insert is a sibling, not a child, so the host's subtree is not claimed. And the
+    // `data-kui-pinned` flag it publishes while holding.
+    channels: ["position", "progress", attributeChannel("data-kui-pinned")],
     parameters: {
       ...distanceParam2,
       ...stickyParams
@@ -6214,7 +6930,13 @@ var SCROLL_PRIMITIVES = [
   }),
   scrollPrimitive({
     id: "scroll-progress",
-    channels: ["progress"],
+    // `data-kui-step` beside `progress`: with `steps:` this publishes the same index attribute (and
+    // its `--kui-step` twin) a `carousel` does, so the two on one element would overwrite each
+    // other's step every frame. The claim is static, so it holds with `steps:0` too — a list can't
+    // be composed or refused per param value. One claim covers both writes: every primitive that
+    // writes the `--kui-step` index also writes the attribute, so a separate channel for the
+    // property could never change a decision.
+    channels: ["progress", attributeChannel("data-kui-step")],
     parameters: {
       ...distanceParam2,
       steps: { type: "number", default: "0", cssProperty: "--kui-steps" },
@@ -6250,7 +6972,8 @@ var SCROLL_PRIMITIVES = [
   }),
   scrollPrimitive({
     id: "media-scrub",
-    channels: ["media", "progress"],
+    // `position`: it holds its host the way a pin does (`position: sticky` and its `top`).
+    channels: ["media", "progress", "position"],
     parameters: {
       ...distanceParam2,
       // A scrub is a hold, so it needs the same two knobs a pin does. Declaring them here is what
@@ -6269,7 +6992,7 @@ var SCROLL_PRIMITIVES = [
   }),
   scrollPrimitive({
     id: "scroll-spy",
-    channels: ["state"],
+    channels: [attributeChannel("data-kui-active")],
     parameters: {
       // `distance`: the per-section form only. `offset-top`: the container form only. Each is a
       // no-op — warned, not silent — in the other; see `prepareScrollSpySingle` and
@@ -6295,8 +7018,8 @@ var SCROLL_PRIMITIVES = [
   scrollPrimitive({
     id: "smooth-scroll",
     /*
-     * Its own channel, not the `'layout'` it used to share with `pin`, `stacking-cards` and
-     * `scroll-snap`. The channel model exists to stop two effects fighting over the same CSS
+     * Its own channel, not the `'layout'` bucket it used to share with `pin`, `stacking-cards` and
+     * `scroll-snap` (a bucket since split into the properties each writes). The channel model exists to stop two effects fighting over the same CSS
      * property, and this one writes exactly `scroll-behavior` — a property that describes how a
      * *user-or-script-initiated* scroll is performed, and that no other primitive touches.
      *
@@ -6317,7 +7040,11 @@ var SCROLL_PRIMITIVES = [
   }),
   scrollPrimitive({
     id: "scroll-snap",
-    channels: ["layout"],
+    // `scroll-snap-type`, and with `target:` the container it makes of the host (`installSnapContainer`):
+    // `overflow`, and `display: flex` on the x axis — `discrete`'s property. A claim is static, so
+    // it holds without `target:` too. The subtree likewise: with no `target:` the host's children
+    // are the snap items, each given a `scroll-snap-align`.
+    channels: ["scroll-snap-type", "overflow", "discrete", SUBTREE_CHANNEL],
     parameters: {
       axis: { type: "keyword", default: "y", cssProperty: "--kui-axis", keywords: ["x", "y"] },
       strictness: {
@@ -6659,7 +7386,7 @@ function findBars(el) {
   return children.filter((child) => child.textContent.trim() === "");
 }
 function withIconParts(inner) {
-  return (el, params, ctx) => {
+  return inheritTimingContract(inner, (el, params, ctx) => {
     if (!el.querySelector(".kui-bar")) {
       const bars = findBars(el);
       if (bars.length > 0) {
@@ -6678,7 +7405,7 @@ function withIconParts(inner) {
       }
     }
     return inner(el, params, ctx);
-  };
+  });
 }
 
 // src/effects/svg/index.ts
@@ -6717,18 +7444,18 @@ function prepareMorph(el, params, ctx) {
   };
   let current = 0;
   const enter = () => drive(1);
-  const leave = () => drive(0);
+  const leave2 = () => drive(0);
   el.addEventListener("pointerenter", enter, { passive: true });
   el.addEventListener("focusin", enter, { passive: true });
-  el.addEventListener("pointerleave", leave, { passive: true });
-  el.addEventListener("focusout", leave, { passive: true });
+  el.addEventListener("pointerleave", leave2, { passive: true });
+  el.addEventListener("focusout", leave2, { passive: true });
   return () => {
     cancelled = true;
     cancelAnimationFrame(frame);
     el.removeEventListener("pointerenter", enter);
     el.removeEventListener("focusin", enter);
-    el.removeEventListener("pointerleave", leave);
-    el.removeEventListener("focusout", leave);
+    el.removeEventListener("pointerleave", leave2);
+    el.removeEventListener("focusout", leave2);
     path2.setAttribute("d", startPath);
   };
 }
@@ -6749,7 +7476,16 @@ var LOGO_BUILD_PRIMITIVE = cssPrimitive("logo-assemble", [
 var ICON_TOGGLE_PRIMITIVE = {
   id: "icon-toggle",
   renderer: "javascript",
-  channels: [CHANNEL.translate, CHANNEL.rotate, CHANNEL.scale, CHANNEL.opacity, CHANNEL.clip],
+  // The subtree too: with no `.kui-bar` markup the host's own children are the bars
+  // (`icon-parts.ts` stamps them), so a deck or widget beside it would have its children moved.
+  channels: [
+    CHANNEL.translate,
+    CHANNEL.rotate,
+    CHANNEL.scale,
+    CHANNEL.opacity,
+    CHANNEL.clip,
+    SUBTREE_CHANNEL
+  ],
   parameters: {
     duration: { type: "time", default: "260ms", cssProperty: "--kui-duration" },
     // The state flip is the start moment: `aria-expanded` goes true and the bars begin to move.
@@ -6947,8 +7683,10 @@ var CARD_TOGGLE_PRIMITIVE = {
   // `'discrete'` alongside `rotate`: the unconditional `[data-kui-fx~='flip-card']` rule pins
   // `display: grid` so the two faces stack in one cell instead of flowing as normal block
   // siblings — unrelated to `catalog/discrete.ts`'s show/hide use of the same physical property,
-  // but `display` is tracked as one channel regardless of the value written into it.
-  channels: [CHANNEL.rotate, "discrete"],
+  // but `display` is tracked as one channel regardless of the value written into it. The subtree
+  // because the host's children are the two faces (`flip-parts.ts` marks them, and injects the
+  // toggle button when none is authored).
+  channels: [CHANNEL.rotate, "discrete", SUBTREE_CHANNEL],
   parameters: {
     duration: { type: "time", default: "700ms", cssProperty: "--kui-duration" },
     // The turn has a start moment — the click, or the pointer arriving — so a delay before it is
@@ -7086,8 +7824,8 @@ function projectRelease(position, velocityPxPerSec, travelPx) {
 function snapTo(projected) {
   return Math.round(projected) + 0;
 }
-function wrapPlace(place, total) {
-  return total > 0 ? (place % total + total) % total : 0;
+function wrapPlace(place2, total) {
+  return total > 0 ? (place2 % total + total) % total : 0;
 }
 var KEY_DELTAS = {
   ArrowRight: 1,
@@ -7099,8 +7837,26 @@ var KEY_DELTAS = {
   Home: null,
   End: null
 };
-function createRingDrag(request) {
-  const { el, ctx, enabled, travelPx, total, positionOf, moveTo, setDragging } = request;
+function holdSelection(doc) {
+  let ledger;
+  const release2 = () => {
+    ledger?.restore();
+    ledger = void 0;
+  };
+  return {
+    hold() {
+      release2();
+      doc.getSelection()?.removeAllRanges();
+      ledger = createStyleLedger(doc.documentElement);
+      ledger.claim("user-select");
+      ledger.claim("-webkit-user-select");
+      ledger.set("user-select", "none");
+      ledger.set("-webkit-user-select", "none");
+    },
+    release: release2
+  };
+}
+function guardClicks(el, enabled) {
   let suppressClick = false;
   const onClickCapture = (event) => {
     if (!suppressClick) return;
@@ -7108,19 +7864,49 @@ function createRingDrag(request) {
     event.stopPropagation();
     event.preventDefault();
   };
+  const onPressCapture = () => {
+    suppressClick = false;
+  };
+  const onNativeDrag = (event) => {
+    event.preventDefault();
+  };
+  el.addEventListener("click", onClickCapture, true);
+  el.addEventListener("pointerdown", onPressCapture, true);
+  if (enabled) el.addEventListener("dragstart", onNativeDrag);
+  return {
+    arm() {
+      suppressClick = true;
+    },
+    release() {
+      el.removeEventListener("click", onClickCapture, true);
+      el.removeEventListener("pointerdown", onPressCapture, true);
+      el.removeEventListener("dragstart", onNativeDrag);
+    }
+  };
+}
+function createRingDrag(request) {
+  const { el, ctx, enabled, travelPx, total, positionOf, moveTo, setDragging } = request;
+  const clicks = guardClicks(el, enabled);
+  let dragFrom = 0;
+  let sign = 1;
+  const selection = holdSelection(el.ownerDocument);
   const stopRecognising = enabled ? recognise(
     el,
     {
       onStart() {
+        dragFrom = positionOf();
+        sign = request.travelSign();
+        selection.hold();
         setDragging(true);
       },
       onMove(vector) {
-        moveTo(positionOf() - vector.dx / travelPx);
+        moveTo(dragFrom - sign * vector.dx / travelPx);
       },
       onEnd(vector) {
+        selection.release();
         setDragging(false);
-        suppressClick = true;
-        const settled = snapTo(projectRelease(positionOf(), vector.vx, travelPx));
+        clicks.arm();
+        const settled = snapTo(projectRelease(positionOf(), sign * vector.vx, travelPx));
         moveTo(wrapPlace(settled, total()));
       }
     },
@@ -7129,7 +7915,15 @@ function createRingDrag(request) {
     // threshold than `recognise`'s own default of 4px is what buys that — a ring occupies a
     // large slab of a phone screen, and a scroll that begins with a two-pixel horizontal wobble
     // should not capture the pointer away from the page.
-    { axis: "x", threshold: DRAG_THRESHOLD_PX }
+    //
+    // Capture only once the press becomes a drag (`'drag'`), never on `pointerdown`. Held from
+    // the press, capture retargets the `click` that ends a plain tap at this host instead of the
+    // card under the pointer — found by the `lightbox:true` browser tier, where a real click on
+    // a card arrived as a click on the ring and opened nothing. The same retargeting made every
+    // link and button inside a card dead in a real browser while jsdom (which has no capture)
+    // stayed green. The host never moves under the pointer — its cards do — so the press has
+    // nothing to stay captured for until it is a drag, and a drag's click is swallowed above.
+    { axis: "x", threshold: DRAG_THRESHOLD_PX, capturePointer: "drag" }
   ) : () => {
   };
   if (enabled) ctx.style.set("touch-action", "pan-y");
@@ -7148,216 +7942,213 @@ function createRingDrag(request) {
   const grantedFocus = el.getAttribute("tabindex") === null;
   if (grantedFocus) el.setAttribute("tabindex", "0");
   el.addEventListener("keydown", onKeyDown);
-  el.addEventListener("click", onClickCapture, true);
   return () => {
     stopRecognising();
+    selection.release();
     el.removeEventListener("keydown", onKeyDown);
-    el.removeEventListener("click", onClickCapture, true);
+    clicks.release();
     if (grantedFocus) el.removeAttribute("tabindex");
   };
 }
 
-// src/effects/carousel/index.ts
+// src/effects/carousel/deck.ts
 var DRAGGING_ATTR = "data-kui-ring-dragging";
-var FACE_ATTR = "data-kui-ring-face";
-var QUARTER_TURN_DEG = 90;
-var FLATTENING = [
-  ["overflow", (value) => value !== "" && value !== "visible"],
-  ["clip-path", (value) => value !== "" && value !== "none"],
-  ["opacity", (value) => value !== "" && Number(value) < 1],
-  ["filter", (value) => value !== "" && value !== "none"],
-  ["backdrop-filter", (value) => value !== "" && value !== "none"]
+var SPATIAL_DECK_CHANNELS = [
+  SUBTREE_CHANNEL,
+  attributeChannel("data-kui-step"),
+  attributeChannel(DRAGGING_ATTR),
+  attributeChannel("tabindex")
 ];
-function warnFlatteningAncestor(el, ctx) {
-  const body = el.ownerDocument.body;
-  let node = el.parentElement;
-  while (node && node !== body) {
-    const found = flatteningDeclaration(node, ctx);
-    if (found) {
-      ctx.warn(
-        `carousel: an ancestor <${node.localName}> has ${found.property}: ${found.value}, which flattens transform-style: preserve-3d \u2014 the ring will render as flat overlapping cards. Move the ring out of it, or drop that property on the ancestor.`
-      );
-      return;
-    }
-    node = node.parentElement;
-  }
-}
-function flatteningDeclaration(node, ctx) {
-  const style = ctx.win.getComputedStyle?.(node);
-  if (!style) return null;
-  for (const [property2, flattens] of FLATTENING) {
-    const value = style.getPropertyValue(property2);
-    if (flattens(value)) return { property: property2, value };
-  }
-  return null;
-}
-function ledgersFor(store, node) {
-  let attributes = store.attributes.get(node);
-  if (!attributes) {
-    attributes = createAttributeLedger(node);
-    store.attributes.set(node, attributes);
-  }
-  let styles = store.styles.get(node);
-  if (!styles) {
-    styles = createStyleLedger(node);
-    store.styles.set(node, styles);
-  }
-  return { attributes, styles };
+var SPINNING_ATTR = "data-kui-ring-spinning";
+var FACE_ATTR = "data-kui-ring-face";
+var WRAP_ATTR = "data-kui-ring-wrap";
+function commitStyle(win, node) {
+  return win.getComputedStyle?.(node).transform;
 }
-function faceAt(angleDeg) {
-  return Math.abs(normaliseDegrees(angleDeg)) >= QUARTER_TURN_DEG ? "back" : "front";
+function travelSign(liveX, nextX, previousX) {
+  if (nextX !== null) return nextX < liveX ? -1 : 1;
+  if (previousX !== null) return previousX > liveX ? -1 : 1;
+  return 1;
 }
-function normaliseDegrees(angleDeg) {
-  const wrapped = (angleDeg % 360 + 360) % 360;
-  return wrapped > 180 ? wrapped - 360 : wrapped;
+function offsetWrapped(previous, next, count) {
+  return Math.abs(next - previous) > count / 2;
 }
 function snapPosition(position, total) {
   if (total <= 0) return { step: 0, drift: 0 };
   const nearest = Math.round(position);
   return { step: (nearest % total + total) % total, drift: position - nearest };
 }
-var RING_PARAMETERS = {
+var DECK_PARAMETERS = {
   duration: { type: "time", default: "620ms", cssProperty: "--kui-duration" },
   ...TRIGGER_DELAY_PARAM,
   ease: { type: "easing", default: "cubic-bezier(0.22, 1, 0.36, 1)", cssProperty: "--kui-ease" },
-  /*
-   * A real CSS `<angle>`, not a normalised scalar.
-   *
-   * A designer specifies fifteen degrees; nobody specifies 0.375 of an unstated maximum. A
-   * normalised knob also bakes taste into a coordinate — the maximum *is* an opinion about how much
-   * tilt is too much, expressed as a unit — and it cannot be typed in the spelling the rest of the
-   * attribute grammar uses (`0.05turn` is a legal angle and means something exact). Legibility is
-   * still bounded, but the bound is applied to the angle, in `carousel.css`, where it is one
-   * `clamp()` an author can see in devtools rather than a hidden rescale.
-   *
-   * Sign convention: **positive tilts the camera up and over the ring**, looking down at it. That
-   * is the opposite sign from the `rotateX()` it compiles to — see `carousel.css` for the
-   * derivation — and the inversion is deliberate: "18 degrees above" is the sentence a designer
-   * says, and it should not be spelled `-18deg` because of which way a matrix happens to turn.
-   */
-  tilt: { type: "angle", default: "0deg", cssProperty: "--kui-tilt" },
-  /*
-   * How far the ring spreads. `360deg` is a full ring; anything less is a slice.
-   *
-   * This is the parameter the concave name exists around. From the centre of a *full* ring most of
-   * it is behind your head, so a 360-degree spread there is not a design choice but a way of hiding
-   * two thirds of the content — the inside name defaults to a slice for that reason.
-   */
-  arc: { type: "angle", default: "360deg", cssProperty: "--kui-arc" },
-  /*
-   * The ring's radius, or unset for one derived from the content.
-   *
-   * Empty default, not a number, and for the same reason `step-progress`'s `steps` is empty:
-   * `readParams` fills every declared default in unconditionally, so an empty one is the only way
-   * to tell "the author said nothing" from "the author said 320px". Unset, `carousel.css` computes
-   * the circumradius of a regular polygon with this many sides and this much side length —
-   * `(width + gap) / (2 * tan(step / 2))` — which is the arrangement where neighbours just touch.
-   * Every consumer solving that by hand was the alternative, and they would all have solved it
-   * differently.
-   *
-   * The width half of that has to come from JavaScript: CSS can compute with a measurement but
-   * cannot take one. See `measureItemWidth`.
-   */
-  radius: { type: "length", default: "", cssProperty: "--kui-radius" },
-  /** Breathing room between neighbours, spent by the derived radius above. */
-  gap: { type: "length", default: "24px", cssProperty: "--kui-gap" },
-  /** Camera distance. Shorter is a wider lens: more foreshortening, more drama, more distortion. */
-  perspective: { type: "length", default: "1600px", cssProperty: "--kui-perspective" },
-  /*
-   * Whether a slot keeps its own outward orientation, or turns to keep facing the viewer.
-   *
-   * `radial` is the ring's natural state and needs nothing: a slot placed by
-   * `rotateY(θ) translateZ(R)` already faces outward along its own radius, which is why the live
-   * one faces you. It is what you want for a cover-flow, and it is what makes the far side of the
-   * ring read as the far side.
-   *
-   * `camera` counter-rotates each slot's *child* — never the slot itself; the placement transform
-   * and the billboard have to stay on separate boxes or every later change to one silently
-   * multiplies into the other — so text stays readable at every position, which is what a raised
-   * camera needs. Costs one element of markup per slide; see `docs/catalog.md`.
-   */
-  facing: {
-    type: "keyword",
-    default: "radial",
-    cssProperty: "--kui-facing",
-    keywords: ["radial", "camera"]
-  },
-  /** Whether a pointer can spin the ring by hand. */
+  /** Whether a pointer can move the deck by hand. */
   grab: { type: "keyword", default: "true", cssProperty: "--kui-grab", keywords: ["true", "false"] },
   /*
-   * How far the pointer travels, in pixels, to move the ring one place.
+   * How far the pointer travels, in pixels, to move the deck one place.
    *
    * A pixels-per-step mapping rather than pixels-per-degree, because a step is the unit everything
    * else here is in — the index, the offset, the snap — and a degree is not: the same drag would
    * move a six-item ring one place and a sixty-item ring ten, purely because the spacing changed.
    */
   travel: { type: "number", default: "220", cssProperty: "--kui-travel", finite: true, minimum: 1 },
-  /** Which elements sit on the ring. Unset means this element's own children. */
+  /** Which elements are the slides. Unset means this element's own children. */
   target: { type: "text", default: "", cssProperty: "--kui-target" },
   /** Optional controls, resolved exactly as `step-progress` resolves its own. */
   next: { type: "text", default: "", cssProperty: "--kui-next" },
   prev: { type: "text", default: "", cssProperty: "--kui-prev" },
   jump: { type: "text", default: "", cssProperty: "--kui-jump" },
+  /** A control that pauses and resumes `spin:`/`autoplay:`. See `PAUSE_PARAM` (`auto-motion.ts`). */
+  pause: PAUSE_PARAM,
+  /** `hover:none`: a resting pointer no longer pauses `spin:`/`autoplay:`. See `HOVER_PARAM`. */
+  hover: HOVER_PARAM,
+  /*
+   * Continuous rotation: how long one full cycle of the deck takes. `0s` is off.
+   *
+   * A period rather than a speed because a period is what a designer can picture ("one turn every
+   * forty seconds") and it is a `time`, which the attribute grammar already reads, clamps and
+   * documents. A full cycle is every slide passing once — one revolution of a full ring — so adding a
+   * card does not change how fast the ring turns. **Negative runs the other way**: `spin:-40s`. A
+   * signed value rather than a `direction:` keyword so one row can say everything about its motion
+   * in one token, which is what three rows at three speeds on one page want.
+   */
+  spin: { type: "time", default: "0s", cssProperty: "--kui-spin" },
+  /*
+   * Stepped motion: how long the deck rests on each slide. When both are set `spin:` wins, because a
+   * deck cannot be both gliding and resting. See `AUTOPLAY_PARAM` (`auto-motion.ts`).
+   */
+  autoplay: AUTOPLAY_PARAM,
+  /*
+   * `lightbox:true`: a click on a card opens every card of this deck in the shared lightbox gallery,
+   * at the card clicked. A drag still only moves the deck — its click is swallowed before it can
+   * reach a card (`drag.ts`). The gallery itself lives in the showcase module; see
+   * `core/deck-viewer.ts` for how a deck reaches it without importing it.
+   */
+  lightbox: DECK_LIGHTBOX_PARAM,
   scope: SCOPE_PARAM
 };
-function measureItemWidth(styles, slots) {
-  for (const slot of slots) {
-    const width = slot.offsetWidth;
-    if (width > 0) styles.set("--kui-item-width", `${width}px`);
-    return;
-  }
-}
-function prepareSpatialRing(el, params, ctx) {
-  warnFlatteningAncestor(el, ctx);
-  mirrorTimingToCss("spatial-ring", ALL_TIMING_TOKENS, params, ctx);
-  const selector = resolveTarget(params.text("target"), ctx, "carousel");
+function ledgerFor(store, node) {
+  let ledger = store.attributes.get(node);
+  if (!ledger) {
+    ledger = createAttributeLedger(node);
+    store.attributes.set(node, ledger);
+  }
+  return ledger;
+}
+function measureItem(styles, slots) {
+  const first = slots[0];
+  if (!first) return;
+  if (first.offsetWidth > 0) styles.set("--kui-item-width", `${first.offsetWidth}px`);
+  if (first.offsetHeight > 0) styles.set("--kui-item-height", `${first.offsetHeight}px`);
+}
+function prepareSpatialDeck(el, params, ctx, layout) {
+  const { label } = layout;
+  mirrorTimingToCss(layout.id, ALL_TIMING_TOKENS, params, ctx);
+  const selector = resolveTarget(params.text("target"), ctx, label);
   const scope = scopeParam(params, "self");
   const resolveSlots = () => selector ? queryScoped(el, ctx, selector, scope) : el.children;
-  const marker = createStepMarker(resolveSlots, (message) => ctx.warn(`carousel ${message}`));
+  const marker = createStepMarker(resolveSlots, (message) => ctx.warn(`${label} ${message}`));
   const total = () => countSteps(params, resolveSlots);
   const hostAttributes = createAttributeLedger(el);
   const hostStyles = createStyleLedger(el);
-  hostAttributes.set("data-kui-ring-facing", params.text("facing", "radial"));
-  const slots = { attributes: /* @__PURE__ */ new Map(), styles: /* @__PURE__ */ new Map() };
-  const derivesRadius = params.text("radius") === "";
+  for (const [name, value] of Object.entries(layout.hostAttributes ?? {})) hostAttributes.set(name, value);
+  const slots = { attributes: /* @__PURE__ */ new Map() };
+  const attachment = layout.attach?.(hostStyles);
   let position = 0;
-  const arcDeg = degreesOf(params.text("arc", "360deg"), 360);
-  const render = () => {
-    const count = total();
-    const { step, drift: drift2 } = snapPosition(position, count);
-    hostAttributes.set("data-kui-step", String(step));
-    hostStyles.set("--kui-step", String(step));
+  let rendered = { step: -1, count: 1, nodes: [] };
+  const lastOffsets = /* @__PURE__ */ new WeakMap();
+  const settleWrapped = (nodes, count) => {
+    for (const node of nodes) {
+      const raw = Number(node.getAttribute("data-kui-step-offset"));
+      const offset = layout.placeOf ? layout.placeOf(raw, count) : raw;
+      const previous = lastOffsets.get(node);
+      lastOffsets.set(node, offset);
+      if (previous === void 0 || !offsetWrapped(previous, offset, count)) continue;
+      const flag = createAttributeLedger(node);
+      flag.set(WRAP_ATTR, "true");
+      commitStyle(ctx.win, node);
+      flag.restore();
+    }
+  };
+  const markFaces = (nodes, count, drift2) => {
+    for (const node of nodes) {
+      const offset = Number(node.getAttribute("data-kui-step-offset"));
+      const face = layout.faceOf(offset - drift2, offset, count);
+      if (node.getAttribute(FACE_ATTR) !== face) ledgerFor(slots, node).set(FACE_ATTR, face);
+    }
+  };
+  const publishPosition = (step, drift2) => {
     hostStyles.set("--kui-step-position", (step + drift2).toFixed(4));
+  };
+  const render = () => {
+    const count = total();
+    const { step, drift: drift2 } = snapPosition(position, count);
+    hostAttributes.set("data-kui-step", String(step));
+    hostStyles.set("--kui-step", String(step));
+    hostStyles.set("--kui-item-count", String(count));
+    publishPosition(step, drift2);
     marker.mark(step);
-    const slotNodes = [...resolveSlots()];
-    if (derivesRadius) measureItemWidth(hostStyles, slotNodes);
-    const spacing = arcDeg / count;
-    for (const node of slotNodes) {
-      const offset = Number(node.getAttribute("data-kui-step-offset"));
-      const angle = (offset - drift2) * spacing;
-      ledgersFor(slots, node).attributes.set(FACE_ATTR, faceAt(angle));
+    const nodes = [...resolveSlots()];
+    if (layout.measure) measureItem(hostStyles, nodes);
+    markFaces(nodes, count, drift2);
+    settleWrapped(nodes, count);
+    attachment?.render(nodes, count);
+    rendered = { step, count, nodes };
+  };
+  const renderFrame = () => {
+    const { step, drift: drift2 } = snapPosition(position, rendered.count);
+    if (step !== rendered.step) {
+      render();
+      return;
     }
+    publishPosition(step, drift2);
+    markFaces(rendered.nodes, rendered.count, drift2);
   };
+  const { motion, pause, release: releaseMotion } = createDeckMotion({
+    el,
+    ctx,
+    params,
+    label,
+    settleMs: effectDurationMs(params, 620),
+    step(direction) {
+      const count = total();
+      const { step } = snapPosition(position, count);
+      position = direction > 0 ? nextStep(step, count) : prevStep(step, count);
+      render();
+    },
+    spin: {
+      advance(cycles) {
+        position = wrapPlace(position + cycles * rendered.count, rendered.count);
+        renderFrame();
+      },
+      setSpinning: (spinning) => hostAttributes.set(SPINNING_ATTR, String(spinning))
+    }
+  });
   const goTo = (next) => {
+    motion.interrupt();
     position = next;
     render();
   };
-  const groups = [];
-  const bindControl = (param, run) => {
-    const control = resolveTarget(params.text(param), ctx, `carousel ${param}`);
-    if (!control) return false;
-    if (queryScoped(el, ctx, control, scope).length === 0) {
-      ctx.warn(`carousel ${param} "${control}" matched nothing`);
+  const request = { el, ctx, params, label };
+  const groups = [
+    bindControl(request, "next", () => goTo(nextStep(snapPosition(position, total()).step, total()))),
+    bindControl(request, "prev", () => goTo(prevStep(snapPosition(position, total()).step, total()))),
+    bindControl(request, "jump", (_node, at) => {
+      if (at >= 0) goTo(at);
+    }),
+    pause
+  ].filter((group) => group !== null);
+  const releaseControls = delegateControls({ el, ctx, groups });
+  const screenTravel = () => {
+    const centres = /* @__PURE__ */ new Map();
+    for (const node of rendered.nodes) {
+      const offset = Number(node.getAttribute("data-kui-step-offset"));
+      if (Math.abs(offset) > 1) continue;
+      const box = node.getBoundingClientRect();
+      centres.set(offset, box.left + box.width / 2);
     }
-    groups.push({ selector: control, run });
-    return true;
+    return travelSign(centres.get(0) ?? 0, centres.get(1) ?? null, centres.get(-1) ?? null);
   };
-  bindControl("next", () => goTo(nextStep(snapPosition(position, total()).step, total())));
-  bindControl("prev", () => goTo(prevStep(snapPosition(position, total()).step, total())));
-  bindControl("jump", (_node, at) => {
-    if (at >= 0) goTo(at);
-  });
-  const releaseControls = delegateControls({ el, ctx, scope, groups });
   const releaseDrag = createRingDrag({
     el,
     ctx,
@@ -7365,22 +8156,406 @@ function prepareSpatialRing(el, params, ctx) {
     travelPx: params.num("travel", 220),
     total,
     positionOf: () => position,
+    travelSign: screenTravel,
     moveTo: goTo,
-    setDragging: (dragging) => hostAttributes.set(DRAGGING_ATTR, String(dragging))
+    setDragging: (dragging) => {
+      hostAttributes.set(DRAGGING_ATTR, String(dragging));
+      motion.hold(dragging);
+    }
   });
+  const releaseViewer = deckLightbox(
+    params.is("lightbox"),
+    { host: el, cards: resolveSlots, doc: ctx.doc, reducedMotion: ctx.reducedMotion },
+    (message) => ctx.warn(`${label} ${message}`)
+  );
   render();
   return () => {
+    releaseViewer();
+    releaseMotion();
     releaseDrag();
     releaseControls();
     marker.restore();
     for (const ledger of slots.attributes.values()) ledger.restore();
-    for (const ledger of slots.styles.values()) ledger.restore();
     slots.attributes.clear();
-    slots.styles.clear();
+    attachment?.release();
     hostAttributes.restore();
     hostStyles.restore();
   };
 }
+
+// src/effects/carousel/fit.ts
+var RING_FIT_PROPERTY = "--kui-ring-fit";
+var SAMPLE_DEG = 0.25;
+var SEARCH_CEILING_PX = 1e5;
+var SEARCH_STEPS = 34;
+var RAD = Math.PI / 180;
+function reachableAngles(arcDeg, count) {
+  if (Math.abs(arcDeg) >= 360) return { fromDeg: -180, toDeg: 180 };
+  const places = Math.max(1, count);
+  const spacing = arcDeg / places;
+  const high = Math.floor(places / 2);
+  const low = high - places + 1;
+  const ends = [(low - 0.5) * spacing, (high + 0.5) * spacing];
+  return { fromDeg: Math.min(...ends), toDeg: Math.max(...ends) };
+}
+function place(point, { sinA, cosA, sinT, cosT }) {
+  const [x, y, z] = point;
+  const x1 = x * cosA + z * sinA;
+  const z1 = -x * sinA + z * cosA;
+  return [x1, y * cosT - z1 * sinT, y * sinT + z1 * cosT];
+}
+function cardFits(g, r, rotation) {
+  const z0 = (g.inside ? -1 : 1) * r;
+  const centre = place([0, 0, z0], rotation);
+  const hw = g.width / 2;
+  const hh = g.height / 2;
+  for (const [cx, cy] of [[-hw, -hh], [hw, -hh], [-hw, hh], [hw, hh]]) {
+    const [x, , z] = g.facing === "camera" ? [centre[0] + cx, centre[1] + cy, centre[2]] : place([cx, cy, z0], rotation);
+    if (z >= g.perspective - 1) return false;
+    const scale = Number.isFinite(g.perspective) ? g.perspective / (g.perspective - z) : 1;
+    const screen = (g.originOffset + x) * scale;
+    if (screen < g.minX || screen > g.maxX) return false;
+  }
+  return true;
+}
+function fitsAt(g, r, angles) {
+  const sinT = Math.sin(g.tiltDeg * RAD);
+  const cosT = Math.cos(g.tiltDeg * RAD);
+  return angles.every((angle) => cardFits(g, r, { sinA: Math.sin(angle * RAD), cosA: Math.cos(angle * RAD), sinT, cosT }));
+}
+function sampleAngles(g) {
+  const from = g.inside ? Math.max(g.fromDeg, -90) : g.fromDeg;
+  const to = g.inside ? Math.min(g.toDeg, 90) : g.toDeg;
+  const steps = Math.max(1, Math.ceil((to - from) / SAMPLE_DEG));
+  return Array.from({ length: steps + 1 }, (_, i) => from + (to - from) * i / steps);
+}
+function solveRingFit(g) {
+  const angles = sampleAngles(g);
+  if (!fitsAt(g, 0, angles)) return 0;
+  if (fitsAt(g, SEARCH_CEILING_PX, angles)) return Infinity;
+  let low = 0;
+  let high = SEARCH_CEILING_PX;
+  for (let i = 0; i < SEARCH_STEPS; i++) {
+    const mid = (low + high) / 2;
+    if (fitsAt(g, mid, angles)) low = mid;
+    else high = mid;
+  }
+  return Math.floor(low * 100) / 100;
+}
+function fitBounds(el, win) {
+  const doc = el.ownerDocument;
+  for (let node = el.parentElement; node && node !== doc.body && node !== doc.documentElement; node = node.parentElement) {
+    const overflow = win.getComputedStyle(node).overflowX;
+    if (overflow === "clip" || overflow === "hidden") return null;
+    if (overflow === "auto" || overflow === "scroll") {
+      const left2 = node.getBoundingClientRect().left + node.clientLeft;
+      return { left: left2, right: left2 + node.clientWidth };
+    }
+  }
+  const left = -win.scrollX;
+  return { left, right: left + doc.documentElement.clientWidth };
+}
+function pixels(value, fallback) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+function createRingFit(options) {
+  const { el, ctx, styles } = options;
+  if (typeof ctx.win.getComputedStyle !== "function" || typeof ctx.win.addEventListener !== "function") {
+    return { render() {
+    }, release() {
+    } };
+  }
+  const tiltDeg = Math.min(80, Math.max(-80, -options.tiltParamDeg));
+  let card;
+  let count = 1;
+  const solve = () => {
+    const bounds = fitBounds(el, ctx.win);
+    if (!bounds || !card || card.offsetWidth === 0) {
+      styles.set(RING_FIT_PROPERTY, "");
+      return;
+    }
+    const style = ctx.win.getComputedStyle(el);
+    const host = el.getBoundingClientRect();
+    const originX = host.left + pixels(style.perspectiveOrigin, host.width / 2);
+    const fit = solveRingFit({
+      width: card.offsetWidth,
+      height: card.offsetHeight,
+      perspective: pixels(style.perspective, Infinity),
+      tiltDeg,
+      // The stylesheet's own selector for the concave placement, read rather than threaded through
+      // as a parameter: the name is what `carousel.css` branches on, so it is what this must too.
+      inside: el.matches("[data-kui-fx~='carousel-3d-inside']"),
+      // `facing:camera` counter-rotates the slot's element *children* (`carousel.css`); a slot with
+      // none — bare text — is drawn at its radial angle, and is fitted as the radial card it is.
+      facing: card.firstElementChild ? options.facing : "radial",
+      ...reachableAngles(options.arcDeg, count),
+      originOffset: host.left + host.width / 2 - originX,
+      minX: bounds.left - originX,
+      maxX: bounds.right - originX
+    });
+    styles.set(RING_FIT_PROPERTY, Number.isFinite(fit) ? `${fit}px` : "");
+  };
+  const frame = frameScheduler(ctx.win, solve);
+  const watch = watchElementSize(ctx.win, frame.request);
+  watch.observe(el);
+  watch.observe(el.ownerDocument.documentElement);
+  return {
+    render(nodes, total) {
+      const first = nodes[0];
+      if (first === card && total === count) return;
+      card = first;
+      count = total;
+      solve();
+    },
+    release() {
+      watch.disconnect();
+      frame.cancel();
+    }
+  };
+}
+
+// src/effects/carousel/stack.ts
+function stackFace(offset, drift2, count, depth) {
+  const ahead = stackPlace(offset, count) - drift2;
+  return ahead > -0.5 && ahead < depth + 1 ? "front" : "back";
+}
+function stackPlace(offset, count) {
+  return wrapPlace(offset + 1, count) - 1;
+}
+var STACK_PARAMETERS = {
+  ...DECK_PARAMETERS,
+  /*
+   * How far each card behind the front one steps sideways. Positive is to the right, negative to
+   * the left. A length rather than a percentage because the host reserves `depth × shift` of room
+   * on that side (cards moved by a transform take no layout space) and a padding percentage would
+   * resolve against a different box than a translate percentage does.
+   */
+  shift: { type: "length", default: "48px", cssProperty: "--kui-stack-shift" },
+  /** How far each card behind steps upward. Negative recedes downward instead. */
+  rise: { type: "length", default: "36px", cssProperty: "--kui-stack-rise" },
+  /** Scale lost per place behind the front: `0.08` makes the third card back 76% size. */
+  shrink: { type: "number", default: "0.08", cssProperty: "--kui-stack-shrink", finite: true, minimum: 0, maximum: 0.3 },
+  /** Blur added per place behind the front. The front card is always sharp. */
+  blur: { type: "length", default: "2px", cssProperty: "--kui-stack-blur" },
+  /** Opacity lost per place behind the front. */
+  fade: { type: "number", default: "0.2", cssProperty: "--kui-stack-fade", finite: true, minimum: 0, maximum: 1 },
+  /*
+   * How many cards show behind the front one. The rest wait, hidden, at the back — `visibility`,
+   * not only `opacity`, so a card nobody can see is also not a tab stop or a click target.
+   */
+  depth: { type: "number", default: "3", cssProperty: "--kui-stack-depth", integer: true, minimum: 1, maximum: 8 }
+};
+function prepareSpatialStack(el, params, ctx) {
+  const depth = params.num("depth", 3);
+  return prepareSpatialDeck(el, params, ctx, {
+    id: "spatial-stack",
+    label: "carousel-stack",
+    faceOf: (place2, offset, count) => stackFace(offset, offset - place2, count, depth),
+    placeOf: stackPlace,
+    measure: false
+  });
+}
+var SPATIAL_STACK_PRIMITIVE = {
+  id: "spatial-stack",
+  renderer: "javascript",
+  // What `deck.ts` writes on the host: the cards (the subtree), the step index, the drag.
+  channels: [CHANNEL.skew, "discrete", CHANNEL.opacity, CHANNEL.filter, ...SPATIAL_DECK_CHANNELS],
+  parameters: STACK_PARAMETERS,
+  supportedTimelines: ["time"],
+  supportedActivations: ["load", "enter", "click", "manual"],
+  defaultActivation: "load",
+  perfClass: "compositor",
+  reducedMotion: "shorten",
+  prepare: deferPrepare(prepareSpatialStack)
+};
+var STACK_PRESETS = [
+  {
+    name: "carousel-stack",
+    primitive: "spatial-stack",
+    requiresOwnSubtree: true,
+    phase: "idle",
+    cloak: true
+  }
+];
+
+// src/effects/carousel/index.ts
+var QUARTER_TURN_DEG = 90;
+var FLATTENING = [
+  ["overflow", (value) => value !== "" && value !== "visible"],
+  ["clip-path", (value) => value !== "" && value !== "none"],
+  ["opacity", (value) => value !== "" && Number(value) < 1],
+  ["filter", (value) => value !== "" && value !== "none"],
+  ["backdrop-filter", (value) => value !== "" && value !== "none"],
+  ["isolation", (value) => value === "isolate"],
+  ["mix-blend-mode", (value) => value !== "" && value !== "normal"],
+  ["mask-image", (value) => value !== "" && value !== "none"]
+];
+function warnFlattenedHost(el, ctx) {
+  const found = flatteningDeclaration(el, ctx);
+  if (!found) return;
+  ctx.warn(
+    `carousel: the ring's own <${el.localName}> has ${found.property}: ${found.value}, which flattens transform-style: preserve-3d \u2014 the ring will render as flat overlapping cards. Move that property to a wrapper around the ring: an ancestor does not flatten it.`
+  );
+}
+function flatteningDeclaration(node, ctx) {
+  const style = ctx.win.getComputedStyle?.(node);
+  if (!style) return null;
+  for (const [property2, flattens] of FLATTENING) {
+    const value = style.getPropertyValue(property2);
+    if (flattens(value)) return { property: property2, value };
+  }
+  return null;
+}
+function faceAt(angleDeg) {
+  return Math.abs(normaliseDegrees(angleDeg)) >= QUARTER_TURN_DEG ? "back" : "front";
+}
+function normaliseDegrees(angleDeg) {
+  const wrapped = (angleDeg % 360 + 360) % 360;
+  return wrapped > 180 ? wrapped - 360 : wrapped;
+}
+var RING_PARAMETERS = {
+  ...DECK_PARAMETERS,
+  /*
+   * A real CSS `<angle>`, not a normalised scalar.
+   *
+   * A designer specifies fifteen degrees; nobody specifies 0.375 of an unstated maximum. A
+   * normalised knob also bakes taste into a coordinate — the maximum *is* an opinion about how much
+   * tilt is too much, expressed as a unit — and it cannot be typed in the spelling the rest of the
+   * attribute grammar uses (`0.05turn` is a legal angle and means something exact). Legibility is
+   * still bounded, but the bound is applied to the angle, in `carousel.css`, where it is one
+   * `clamp()` an author can see in devtools rather than a hidden rescale.
+   *
+   * Sign convention: **positive tilts the camera up and over the ring**, looking down at it. That
+   * is the opposite sign from the `rotateX()` it compiles to — see `carousel.css` for the
+   * derivation — and the inversion is deliberate: "18 degrees above" is the sentence a designer
+   * says, and it should not be spelled `-18deg` because of which way a matrix happens to turn.
+   */
+  tilt: { type: "angle", default: "0deg", cssProperty: "--kui-tilt" },
+  /*
+   * How far the ring spreads. `360deg` is a full ring; anything less is a slice.
+   *
+   * This is the parameter the concave name exists around. From the centre of a *full* ring most of
+   * it is behind your head, so a 360-degree spread there is not a design choice but a way of hiding
+   * two thirds of the content — the inside name defaults to a slice for that reason.
+   */
+  arc: { type: "angle", default: "360deg", cssProperty: "--kui-arc" },
+  /*
+   * The ring's radius, or unset for one derived from the content.
+   *
+   * Empty default, not a number, and for the same reason `step-progress`'s `steps` is empty:
+   * `readParams` fills every declared default in unconditionally, so an empty one is the only way
+   * to tell "the author said nothing" from "the author said 320px". Unset, `carousel.css` computes
+   * the circumradius of a regular polygon with this many sides and this much side length —
+   * `(width + gap) / (2 * tan(step / 2))` — which is the arrangement where neighbours just touch.
+   * Every consumer solving that by hand was the alternative, and they would all have solved it
+   * differently.
+   *
+   * The width half of that has to come from JavaScript: CSS can compute with a measurement but
+   * cannot take one. See `measureItem` in `deck.ts`.
+   *
+   * Authored or derived, a depth ring's radius is a ceiling: a ring that would push its page
+   * sideways is pulled in exactly as far as it has to be (`fit.ts`, `--kui-ring-fit`), and one that
+   * already fits — or sits inside an ancestor that clips it — keeps this radius to the pixel.
+   */
+  radius: { type: "length", default: "", cssProperty: "--kui-radius" },
+  /** Breathing room between neighbours, spent by the derived radius above. */
+  gap: { type: "length", default: "24px", cssProperty: "--kui-gap" },
+  /** Camera distance. Shorter is a wider lens: more foreshortening, more drama, more distortion. */
+  perspective: { type: "length", default: "1600px", cssProperty: "--kui-perspective" },
+  /*
+   * Whether a slot keeps its own outward orientation, or turns to keep facing the viewer.
+   *
+   * `radial` is the ring's natural state and needs nothing: a slot placed by
+   * `rotateY(θ) translateZ(R)` already faces outward along its own radius, which is why the live
+   * one faces you. It is what you want for a cover-flow, and it is what makes the far side of the
+   * ring read as the far side.
+   *
+   * `camera` counter-rotates each slot's *child* — never the slot itself; the placement transform
+   * and the billboard have to stay on separate boxes or every later change to one silently
+   * multiplies into the other — so text stays readable at every position, which is what a raised
+   * camera needs. Costs one element of markup per slide; see `docs/catalog.md`.
+   */
+  facing: {
+    type: "keyword",
+    default: "radial",
+    cssProperty: "--kui-facing",
+    keywords: ["radial", "camera"]
+  },
+  /*
+   * Which plane the ring lies in: `depth` (the default — a carousel you look *at*, turning about a
+   * vertical pole) or `screen` (a clock face, turning about the axis that points at you).
+   *
+   * ## Why a parameter of this primitive, and not a new one
+   *
+   * A flat ring of cards around a centred word is the same object as the 3D ring seen from its
+   * pole: N slots, evenly spaced by `arc / count`, placed from `--kui-offset` and the shared drift,
+   * advanced by the same drag, keys, controls and `spin:`. Every number this primitive publishes
+   * means the same thing in both planes; only the three transform functions that turn a place into
+   * a position differ, and those live in `carousel.css` anyway. A second primitive would have
+   * duplicated the whole index to change one stylesheet rule and one face test.
+   *
+   * It is a parameter rather than only a name (unlike convex/concave, which differ in every
+   * default and so earned two names) because the runtime has to know it: a flat slot is never
+   * turned away from the viewer, so the quarter-turn face test that stops the back of a 3D ring
+   * swallowing clicks would, on a clock face, disable every card in the bottom half. The name that
+   * ships it, `carousel-orbit`, sets it; the stylesheet gates on the published attribute rather
+   * than the name, so `carousel-3d plane:screen` is equally honoured — same rule as `facing:`.
+   *
+   * `facing:` keeps its meaning here. `radial` turns each card with the ring, top edge outward like
+   * the numerals on a watch bezel; `camera` keeps every card upright. In the screen plane upright
+   * needs no child counter-rotation at all — the slot is *translated* to its place on the circle
+   * instead of rotated there — so it costs no extra markup, unlike the 3D billboard.
+   */
+  plane: {
+    type: "keyword",
+    default: "depth",
+    cssProperty: "--kui-ring-plane",
+    keywords: ["depth", "screen"]
+  }
+};
+function prepareSpatialRing(el, params, ctx) {
+  const plane = params.text("plane", "depth");
+  if (plane === "depth") warnFlattenedHost(el, ctx);
+  const arcDeg = degreesOf(params.text("arc", "360deg"), 360);
+  const faceOf = (place2, _offset, count) => plane === "screen" ? "front" : faceAt(place2 * (arcDeg / count));
+  return prepareSpatialDeck(el, params, ctx, {
+    id: "spatial-ring",
+    label: "carousel",
+    faceOf,
+    /*
+     * A derived radius needs a card width; a flat ring also needs a card's size to reserve its own
+     * circle (the host is sized to it, since transformed slots take no layout space), so it measures
+     * even when the author named a radius.
+     */
+    measure: params.text("radius") === "" || plane === "screen",
+    hostAttributes: {
+      /*
+       * `facing:` and `plane:` reach CSS as attributes, not only as the custom properties their
+       * specs declare. A stylesheet cannot select on the *value* of a custom property — `@container
+       * style(--kui-facing: camera)` can, and is not supported widely enough to hang a documented
+       * parameter on — so the one thing a selector needs is published in the one form a selector
+       * can read. Same pairing, for the same reason, as the number/attribute pair `step-marking.ts`
+       * publishes for the ring place.
+       */
+      "data-kui-ring-facing": params.text("facing", "radial"),
+      "data-kui-ring-plane": plane
+    },
+    /*
+     * The fit to the page (`fit.ts`). Depth plane only: a flat ring already reserves and clamps to
+     * its own square (`carousel.css`, `[data-kui-ring-plane='screen']`), and its cards never leave
+     * the plane that square is measured in.
+     */
+    attach: plane === "depth" ? (styles) => createRingFit({
+      el,
+      ctx,
+      styles,
+      arcDeg,
+      tiltParamDeg: degreesOf(params.text("tilt", "0deg"), 0),
+      facing: params.text("facing", "radial") === "camera" ? "camera" : "radial"
+    }) : void 0
+  });
+}
 function degreesOf(value, fallbackDeg) {
   const match = /^(-?[\d.]+)(deg|rad|turn|grad)?$/i.exec(value.trim());
   if (!match) return fallbackDeg;
@@ -7400,7 +8575,15 @@ function degreesOf(value, fallbackDeg) {
 var SPATIAL_RING_PRIMITIVE = {
   id: "spatial-ring",
   renderer: "javascript",
-  channels: [CHANNEL.skew, "discrete"],
+  // What `deck.ts` writes on the host (the cards, the step index, the drag), then the two
+  // attributes only the ring's own layout publishes.
+  channels: [
+    CHANNEL.skew,
+    "discrete",
+    ...SPATIAL_DECK_CHANNELS,
+    attributeChannel("data-kui-ring-facing"),
+    attributeChannel("data-kui-ring-plane")
+  ],
   parameters: RING_PARAMETERS,
   supportedTimelines: ["time"],
   // `load`, not `enter`: a carousel that only wires its arrows once scrolled into view is broken,
@@ -7411,28 +8594,31 @@ var SPATIAL_RING_PRIMITIVE = {
   reducedMotion: "shorten",
   prepare: deferPrepare(prepareSpatialRing)
 };
-var CAROUSEL_PRIMITIVES = [SPATIAL_RING_PRIMITIVE];
+var CAROUSEL_PRIMITIVES = [SPATIAL_RING_PRIMITIVE, SPATIAL_STACK_PRIMITIVE];
 var CAROUSEL_PRESETS = [
   {
     name: "carousel-3d",
     primitive: "spatial-ring",
     params: { tilt: "12deg" },
     requiresOwnSubtree: true,
-    phase: "idle"
+    phase: "idle",
+    cloak: true
   },
   {
     name: "carousel-3d-high",
     primitive: "spatial-ring",
     params: { tilt: "30deg", perspective: "1200px" },
     requiresOwnSubtree: true,
-    phase: "idle"
+    phase: "idle",
+    cloak: true
   },
   {
     name: "carousel-3d-low",
     primitive: "spatial-ring",
     params: { tilt: "-18deg", perspective: "1800px" },
     requiresOwnSubtree: true,
-    phase: "idle"
+    phase: "idle",
+    cloak: true
   },
   /*
    * The concave name. `arc:120deg` is the default the outside names cannot want and this one cannot
@@ -7447,11 +8633,34 @@ var CAROUSEL_PRESETS = [
     primitive: "spatial-ring",
     params: { arc: "120deg", facing: "camera", perspective: "900px" },
     requiresOwnSubtree: true,
-    phase: "idle"
+    phase: "idle",
+    cloak: true
+  },
+  /*
+   * The flat ring: cards on a clock face around whatever sits in the middle of the host (a word, a
+   * logo — anything the `target:` does not name stays centred and off the ring). `plane:screen` is
+   * the whole difference; see the parameter's note for why that is a parameter of this primitive and
+   * not a new one.
+   *
+   * Named for what it does rather than which way it goes — `orbit` is the motion, and it has no
+   * direction to name (the directional-naming rule, "named by travel", is about entrances that
+   * *have* one; a ring's direction is the sign of `spin:`). Not `carousel-3d-*`, because it is not
+   * three-dimensional, and a name that promised depth would send people looking for a `tilt:`.
+   *
+   * `facing:camera` by default: upright cards read as a set of things; radially turned ones read as
+   * a dial, which is the less common ask and one keyword away.
+   */
+  {
+    name: "carousel-orbit",
+    primitive: "spatial-ring",
+    params: { plane: "screen", facing: "camera" },
+    requiresOwnSubtree: true,
+    phase: "idle",
+    cloak: true
   }
 ];
 function registerCarousel(registry) {
-  return registry.registerPrimitives(CAROUSEL_PRIMITIVES).registerPresets(CAROUSEL_PRESETS);
+  return registry.registerPrimitives(CAROUSEL_PRIMITIVES).registerPresets(CAROUSEL_PRESETS).registerPresets(STACK_PRESETS);
 }
 
 // src/effects/tween/properties.ts
@@ -8007,7 +9216,10 @@ var deviceFrameParams = {
     keywords: [...DEVICE_FRAME_KINDS]
   },
   color: { type: "color", default: "#111", cssProperty: "--kui-device-color" },
-  radius: { type: "length", default: RADIUS_UNSET, cssProperty: "--kui-device-radius" }
+  radius: { type: "length", default: RADIUS_UNSET, cssProperty: "--kui-device-radius" },
+  // Its own knob rather than a reading of `radius:`: the frame's corner and the screen's are two
+  // shapes, and the derived screen value already follows `radius:` when this is left unwritten.
+  "screen-radius": { type: "length", default: RADIUS_UNSET, cssProperty: "--kui-device-screen-radius" }
 };
 function prepareDeviceFrame(el, params) {
   const state = createAttributeLedger(el);
@@ -8020,8 +9232,9 @@ var DEVICE_FRAME_PRIMITIVE = widgetPrimitive(
     // Exclusive ownership of the frame chrome. Its static box-model declarations are outside
     // the channel-property audit, as they are for the existing catalog. The chrome also reaches
     // into the direct media child (`object-fit: cover` etc.); that is a `requiresOwnSubtree`
-    // question, as with the other showcase widgets.
-    channels: ["frame"],
+    // question, as with the other showcase widgets. The frame kind it stamps on the host is an
+    // attribute it writes, so it claims that too.
+    channels: ["frame", attributeChannel("data-kui-device")],
     parameters: deviceFrameParams,
     // `'layout'`: the bezel's `border`+`padding` are box-model properties added once, at
     // activation, which is a real (if one-time) layout — not the "transform/opacity only" budget
@@ -8056,10 +9269,12 @@ function lock(state) {
   state.lock = ledger;
 }
 function clearContent(state) {
-  state.current?.onClose?.();
+  const closing = state.current;
+  closing?.onClose?.();
   state.current = void 0;
   state.currentOwner = void 0;
   state.slot?.replaceChildren();
+  if (closing?.opener) announceViewer(state.doc, closing.opener, false);
 }
 function onClose(state) {
   state.dialog?.classList.remove("is-open");
@@ -8078,11 +9293,9 @@ function dismiss(state) {
   }, state.current.reducedMotion ? 0 : state.current.duration);
 }
 function clickedOutside(state, target) {
-  const content = state.current.node;
-  if (content.classList.contains("kui-lightbox-gallery")) {
-    return !content.contains(target) || !target.matches("img") && !target.closest("button");
-  }
-  return !content.contains(target) && !target.closest("button");
+  const { node, inside } = state.current;
+  if (inside) return !inside(target);
+  return !node.contains(target) && !target.closest("button");
 }
 function forceReflow(element) {
   return element.offsetWidth;
@@ -8132,6 +9345,7 @@ function open(state, content, owner) {
   dialog.scrollTop = 0;
   forceReflow(dialog);
   dialog.classList.add("is-open");
+  if (content.opener) announceViewer(state.doc, content.opener, true);
 }
 function closeNow(state) {
   if (state.timer !== void 0) clearTimeout(state.timer);
@@ -8211,25 +9425,38 @@ function resolveMediaSource(href) {
 }
 
 // src/showcase/lightbox.ts
+var DEFAULT_DURATION_MS = 280;
+var DEFAULT_SCALE = "0.965";
+var DEFAULT_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
 var paramsSchema = {
-  media: { type: "keyword", default: "image", cssProperty: "--kui-lightbox-media", keywords: ["image", "video"] },
+  media: { type: "keyword", default: "image", cssProperty: "--kui-lightbox-media", keywords: ["image", "video", "mixed"] },
   target: { type: "text", default: "", cssProperty: "--kui-target" },
   scope: SCOPE_PARAM,
-  scale: { type: "number", default: "0.965", cssProperty: "--kui-from-scale", finite: true, minimum: 0 },
-  duration: { type: "time", default: "280ms", cssProperty: "--kui-lightbox-duration" },
-  ease: { type: "easing", default: "cubic-bezier(0.22, 1, 0.36, 1)", cssProperty: "--kui-lightbox-ease" },
+  scale: { type: "number", default: DEFAULT_SCALE, cssProperty: "--kui-from-scale", finite: true, minimum: 0 },
+  duration: { type: "time", default: `${DEFAULT_DURATION_MS}ms`, cssProperty: "--kui-lightbox-duration" },
+  ease: { type: "easing", default: DEFAULT_EASE, cssProperty: "--kui-lightbox-ease" },
   loop: { type: "keyword", default: "true", cssProperty: "--kui-lightbox-loop", keywords: ["true", "false"] },
   aspect: { type: "keyword", default: "", cssProperty: "--kui-lightbox-aspect", keywords: ["wide", "tall", "square"] },
-  caption: { type: "keyword", default: "figcaption", cssProperty: "--kui-lightbox-caption", keywords: ["figcaption", "alt", "title", "none"] }
+  caption: { type: "keyword", default: "figcaption", cssProperty: "--kui-lightbox-caption", keywords: ["figcaption", "alt", "title", "none"] },
+  arrows: {
+    type: "keyword",
+    default: "bottom-right",
+    cssProperty: "--kui-lightbox-arrows",
+    keywords: ["bottom-right", "bottom-left", "bottom", "bottom-apart", "top-right", "top-left", "sides"]
+  },
+  "arrow-gap": { type: "length", default: "", cssProperty: "--kui-lightbox-arrow-gap" }
 };
 function defaultTargets(el, media) {
-  if (el.matches("a[href]") || media === "image" && el.matches("img")) return [el];
+  if (el.matches("a[href]") || media !== "video" && el.matches("img")) return [el];
   return [...el.querySelectorAll(media === "video" ? ":scope a[href]" : ":scope a[href], :scope img")];
 }
+function effectName(media) {
+  return media === "video" ? "video-lightbox" : "lightbox";
+}
 function targets(el, params, ctx, media) {
   const authored = params.text("target");
   if (!authored) return defaultTargets(el, media);
-  const selector = resolveTarget(authored, ctx, media === "video" ? "video-lightbox" : "lightbox");
+  const selector = resolveTarget(authored, ctx, effectName(media));
   return selector ? queryScoped(el, ctx, selector, scopeParam(params, "self")) : [];
 }
 function imageTrigger(target) {
@@ -8240,52 +9467,137 @@ function imageIn(trigger) {
 }
 function captionFor(trigger, image, source) {
   if (source === "none") return "";
-  if (source === "alt") return image.alt;
-  if (source === "title") return (trigger.getAttribute("title") || image.title).trim();
-  return trigger.closest("figure")?.querySelector("figcaption")?.textContent?.trim() || image.alt;
+  const alt = image?.alt ?? "";
+  if (source === "alt") return alt;
+  if (source === "title") return titleOf(trigger, image);
+  return trigger.closest("figure")?.querySelector("figcaption")?.textContent?.trim() || alt;
+}
+function titleOf(trigger, image) {
+  return (trigger.getAttribute("title") || image?.title || "").trim();
 }
 function imageItem(trigger, captionSource) {
   const image = imageIn(trigger);
   if (!image) return null;
   const link = trigger instanceof HTMLAnchorElement ? trigger : null;
   return {
+    kind: "image",
     trigger,
     image,
     src: link?.href ?? (image.currentSrc || image.src),
     caption: captionFor(trigger, image, captionSource)
   };
 }
-function imageItems(targets2, captionSource) {
+function videoTitle(link, poster) {
+  return link.title || poster?.getAttribute("alt") || link.getAttribute("aria-label")?.trim() || link.textContent?.trim() || "Video";
+}
+function videoItem(link, captionSource) {
+  const source = resolveMediaSource(link.getAttribute("href") ?? "");
+  if (!source) return null;
+  const poster = link.querySelector("img");
+  return { kind: "video", trigger: link, source, title: videoTitle(link, poster), caption: captionFor(link, poster, captionSource) };
+}
+function itemFor(trigger, media, captionSource) {
+  if (media !== "image" && trigger instanceof HTMLAnchorElement) {
+    const video = videoItem(trigger, captionSource);
+    if (video || media === "video") return video;
+  }
+  return imageItem(trigger, captionSource);
+}
+function triggersFor(found, media) {
   const seen = /* @__PURE__ */ new Set();
-  const items = [];
-  for (const target of targets2) {
-    const trigger = imageTrigger(target);
+  const triggers = [];
+  for (const target of found) {
+    const trigger = media === "video" ? target : imageTrigger(target);
     if (seen.has(trigger)) continue;
-    const item = imageItem(trigger, captionSource);
-    if (!item) continue;
+    if (!usable(trigger, media)) continue;
     seen.add(trigger);
-    items.push(item);
+    triggers.push(trigger);
   }
-  return items;
+  return triggers;
+}
+function usable(trigger, media) {
+  const link = trigger instanceof HTMLAnchorElement;
+  if (media === "video") return link;
+  const image = imageIn(trigger) !== null;
+  return media === "image" ? image : link || image;
 }
 function modalOptions(params, ctx) {
   return {
-    duration: params.timing.durationMs ?? params.ms("duration", 280),
-    scale: params.text("scale", "0.965"),
-    ease: params.timing.easing ?? params.text("ease", "cubic-bezier(0.22, 1, 0.36, 1)"),
+    duration: params.timing.durationMs ?? params.ms("duration", DEFAULT_DURATION_MS),
+    scale: params.text("scale", DEFAULT_SCALE),
+    ease: params.timing.easing ?? params.text("ease", DEFAULT_EASE),
     reducedMotion: ctx.reducedMotion
   };
 }
-function showImage(item, view, caption) {
+function showImage(item, view) {
   view.src = item.src;
   view.alt = item.image.alt;
-  caption.textContent = item.caption;
-  caption.hidden = item.caption === "";
   const ratio = item.image.naturalWidth ? item.image.naturalHeight / item.image.naturalWidth : 1;
   view.className = ratio > 1.5 ? "is-tall" : "is-fit";
 }
+function videoFrame(item, aspect, doc) {
+  const frame = doc.createElement("div");
+  frame.className = `kui-lightbox-frame kui-lightbox-frame--${aspect || item.source.aspect}`;
+  if (item.source.kind === "file") {
+    const video = doc.createElement("video");
+    video.src = item.source.embedUrl;
+    video.controls = true;
+    video.autoplay = true;
+    video.playsInline = true;
+    video.setAttribute("aria-label", item.title);
+    frame.append(video);
+  } else {
+    const iframe = doc.createElement("iframe");
+    iframe.src = item.source.embedUrl;
+    iframe.title = item.title;
+    iframe.allow = "autoplay; encrypted-media; picture-in-picture; fullscreen";
+    iframe.allowFullscreen = true;
+    frame.append(iframe);
+  }
+  return frame;
+}
+function pauseVideo(video) {
+  if (video.readyState > 0) video.pause();
+}
+function stopMedia(frame) {
+  const video = frame.querySelector("video");
+  if (video) {
+    pauseVideo(video);
+    video.removeAttribute("src");
+  }
+  frame.replaceChildren();
+}
+function leave(state, node) {
+  if (node === state.view) return;
+  const video = node.querySelector("video");
+  if (video) pauseVideo(video);
+  else node.replaceChildren();
+}
+function land(state, item) {
+  if (item.kind === "image") {
+    showImage(item, state.view);
+    return state.view;
+  }
+  const cached = state.players.get(item);
+  if (cached) {
+    void cached.querySelector("video").play().catch(() => {
+    });
+    return cached;
+  }
+  const frame = videoFrame(item, state.aspect, state.figure.ownerDocument);
+  if (item.source.kind === "file") state.players.set(item, frame);
+  return frame;
+}
 function renderGallery(state, focus) {
-  showImage(state.items[state.index], state.view, state.caption);
+  const item = state.items[state.index];
+  if (state.shown?.item !== item) {
+    if (state.shown) leave(state, state.shown.node);
+    const node = land(state, item);
+    state.shown = { item, node };
+    state.caption.textContent = item.caption;
+    state.caption.hidden = item.caption === "";
+    state.figure.replaceChildren(node, state.caption);
+  }
   state.counter.textContent = `${state.index + 1} of ${state.items.length}`;
   state.previous.disabled = !state.loop && state.index === 0;
   state.next.disabled = !state.loop && state.index === state.items.length - 1;
@@ -8303,6 +9615,7 @@ function clickGallery(state, delta, button2) {
 }
 function galleryKey(state, event) {
   if (state.items.length < 2) return;
+  if (event.target.closest("video")) return;
   if (event.key === "ArrowLeft") moveGallery(state, -1, true);
   else if (event.key === "ArrowRight") moveGallery(state, 1, true);
   else if (event.key === "Home") {
@@ -8314,8 +9627,51 @@ function galleryKey(state, event) {
   } else return;
   event.preventDefault();
 }
-function galleryContent(items, initial, loop2, options) {
-  const doc = items[initial].image.ownerDocument;
+function swipeGallery(state, box) {
+  const viewport = box.ownerDocument.defaultView?.visualViewport ?? null;
+  const zoomed = () => (viewport?.scale ?? 1) > 1.01;
+  const sync = () => {
+    box.classList.toggle("is-swipeable", !zoomed());
+  };
+  sync();
+  viewport?.addEventListener("resize", sync);
+  const stop = recognise(box, {
+    onSwipe(direction) {
+      if (direction === "left" || direction === "right") moveGallery(state, swipeStep(direction), false);
+    }
+  }, {
+    // A press on a button still clicks it: capture is taken only once the finger has moved.
+    capturePointer: "drag",
+    accept: (event) => event.pointerType !== "mouse" && !zoomed() && event.target.closest("video") === null
+  });
+  return () => {
+    stop();
+    viewport?.removeEventListener("resize", sync);
+  };
+}
+function closeViewer(state) {
+  state.view.removeAttribute("src");
+  for (const frame of state.players.values()) stopMedia(frame);
+  if (state.shown && state.shown.node !== state.view) stopMedia(state.shown.node);
+}
+function vocabulary(items) {
+  const kinds = new Set(items.map((item) => item.kind));
+  if (kinds.size > 1) return { noun: "item", label: "Media viewer" };
+  return kinds.has("video") ? { noun: "video", label: "Video viewer" } : { noun: "image", label: "Image viewer" };
+}
+var SVG_NS = "http://www.w3.org/2000/svg";
+function chevron(doc, path2) {
+  const svg = doc.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  const stroke = doc.createElementNS(SVG_NS, "path");
+  stroke.setAttribute("d", path2);
+  svg.append(stroke);
+  return svg;
+}
+function galleryContent(items, initial, options) {
+  const doc = items[initial].trigger.ownerDocument;
   const box = doc.createElement("div");
   box.className = "kui-lightbox-gallery";
   const figure = doc.createElement("figure");
@@ -8323,7 +9679,6 @@ function galleryContent(items, initial, loop2, options) {
   const view = doc.createElement("img");
   view.decoding = "async";
   const caption = doc.createElement("figcaption");
-  figure.append(view, caption);
   box.append(figure);
   const counter = doc.createElement("span");
   counter.className = "kui-lightbox-counter";
@@ -8331,151 +9686,259 @@ function galleryContent(items, initial, loop2, options) {
   const previous = doc.createElement("button");
   const next = doc.createElement("button");
   previous.type = next.type = "button";
-  previous.textContent = "\u2039";
-  next.textContent = "\u203A";
-  previous.setAttribute("aria-label", "Previous image");
-  next.setAttribute("aria-label", "Next image");
+  previous.append(chevron(doc, "M15 5l-7 7 7 7"));
+  next.append(chevron(doc, "M9 5l7 7-7 7"));
+  const { noun, label } = vocabulary(items);
+  previous.setAttribute("aria-label", `Previous ${noun}`);
+  next.setAttribute("aria-label", `Next ${noun}`);
   previous.className = "kui-lightbox-prev";
   next.className = "kui-lightbox-next";
-  const state = { items, index: initial, loop: loop2, figure, view, caption, counter, previous, next };
+  const state = {
+    items,
+    index: initial,
+    loop: options.loop,
+    aspect: options.aspect,
+    figure,
+    view,
+    caption,
+    counter,
+    previous,
+    next,
+    players: /* @__PURE__ */ new Map()
+  };
   if (items.length > 1) {
-    box.append(previous, next, counter);
+    const nav = doc.createElement("div");
+    nav.className = `kui-lightbox-nav kui-lightbox-nav--${options.arrows}`;
+    if (options.arrowGap) nav.style.setProperty("--kui-lightbox-arrow-gap", options.arrowGap);
+    nav.append(previous, next);
+    box.append(nav, counter);
     previous.addEventListener("click", () => clickGallery(state, -1, previous));
     next.addEventListener("click", () => clickGallery(state, 1, next));
   }
   renderGallery(state, false);
+  const unswipe = items.length > 1 ? swipeGallery(state, box) : void 0;
+  const { duration, scale, ease, reducedMotion } = options;
   return {
-    ...options,
+    duration,
+    scale,
+    ease,
+    reducedMotion,
     node: box,
-    label: "Image viewer",
-    onClose: () => view.removeAttribute("src"),
+    label,
+    // The media and the controls (the arrow group included, so a click in the gap between the
+    // arrows is not a close) keep the viewer open; the empty figure around them closes it.
+    inside: (target) => box.contains(target) && target.closest("img, video, iframe, button, .kui-lightbox-nav") !== null,
+    onClose: () => {
+      unswipe?.();
+      closeViewer(state);
+    },
     onKey: (event) => galleryKey(state, event)
   };
 }
-function stopMedia(frame) {
-  const video = frame.querySelector("video");
-  if (video) {
-    if (video.readyState > 0) video.pause();
-    video.removeAttribute("src");
-  }
-  frame.replaceChildren();
-}
-function videoContent(link, source, options, aspect) {
-  const doc = link.ownerDocument;
-  const frame = doc.createElement("div");
-  frame.className = `kui-lightbox-frame kui-lightbox-frame--${aspect}`;
-  const poster = link.querySelector("img");
-  const title = link.title || poster?.getAttribute("alt") || link.getAttribute("aria-label")?.trim() || link.textContent?.trim() || "Video";
-  if (source.kind === "file") {
-    const video = doc.createElement("video");
-    video.src = source.embedUrl;
-    video.controls = true;
-    video.autoplay = true;
-    video.playsInline = true;
-    video.setAttribute("aria-label", title);
-    frame.append(video);
-  } else {
-    const iframe = doc.createElement("iframe");
-    iframe.src = source.embedUrl;
-    iframe.title = title;
-    iframe.allow = "autoplay; encrypted-media; picture-in-picture; fullscreen";
-    iframe.allowFullscreen = true;
-    frame.append(iframe);
-  }
-  return { ...options, node: frame, label: "Video viewer", onClose: () => stopMedia(frame) };
-}
 function primaryClick(event) {
   return event.button === 0 && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey;
 }
-function wireImages(items, wiring, loop2) {
+function openAt(triggers, trigger, wiring) {
+  const items = [];
+  let initial = -1;
+  for (const candidate of triggers) {
+    const item = itemFor(candidate, wiring.media, wiring.captionSource);
+    if (!item) continue;
+    if (candidate === trigger) initial = items.length;
+    items.push(item);
+  }
+  if (initial < 0) {
+    const href = trigger.getAttribute("href") ?? "";
+    if (!wiring.warned.has(href)) wiring.ctx.warn(`${effectName(wiring.media)} cannot embed "${href}"; the link will navigate normally`);
+    wiring.warned.add(href);
+    return false;
+  }
+  wiring.shell.open({ ...galleryContent(items, initial, wiring.options), opener: trigger });
+  return true;
+}
+function wireTriggers(triggers, wiring) {
   const restore = [];
-  items.forEach((item, index) => {
-    const bare = item.trigger === item.image;
+  for (const trigger of triggers) {
+    const bare = trigger instanceof HTMLImageElement;
     if (bare) {
-      const attrs = createAttributeLedger(item.image);
+      const attrs = createAttributeLedger(trigger);
       attrs.set("role", "button");
       attrs.set("tabindex", "0");
-      attrs.set("aria-label", item.image.alt ? `Open larger image: ${item.image.alt}` : "Open larger image");
+      attrs.set("aria-label", trigger.alt ? `Open larger image: ${trigger.alt}` : "Open larger image");
       restore.push(() => attrs.restore());
-      item.image.addEventListener("keydown", (event) => {
+      trigger.addEventListener("keydown", (event) => {
         if (event.key !== "Enter" && event.key !== " ") return;
         event.preventDefault();
-        wiring.shell.open(galleryContent(items, index, loop2, wiring.options));
+        openAt(triggers, trigger, wiring);
       }, { signal: wiring.signal });
     }
-    item.trigger.addEventListener("click", (event) => {
+    trigger.addEventListener("click", (event) => {
       if (!primaryClick(event)) return;
-      if (!bare) event.preventDefault();
-      wiring.shell.open(galleryContent(items, index, loop2, wiring.options));
+      if (openAt(triggers, trigger, wiring)) event.preventDefault();
     }, { signal: wiring.signal });
-  });
+  }
   return restore;
 }
-function wireVideos(targets2, wiring, aspect, ctx) {
-  const warned = /* @__PURE__ */ new Set();
-  for (const target of targets2) {
-    if (!(target instanceof HTMLAnchorElement)) continue;
-    target.addEventListener("click", (event) => {
-      if (!primaryClick(event)) return;
-      const href = target.getAttribute("href") ?? "";
-      const source = resolveMediaSource(href);
-      if (!source) {
-        if (!warned.has(href)) ctx.warn(`video-lightbox cannot embed "${href}"; the link will navigate normally`);
-        warned.add(href);
-        return;
-      }
-      event.preventDefault();
-      wiring.shell.open(videoContent(target, source, wiring.options, aspect || source.aspect));
-    }, { signal: wiring.signal });
-  }
+function cardItem(card) {
+  const link = card.matches("a[href]") ? card : card.querySelector("a[href]");
+  return link && itemFor(link, "mixed", "figcaption") || itemFor(card, "mixed", "figcaption");
+}
+var OWN_CLICK = "button, input, select, textarea, label, summary, [contenteditable]";
+function attachDeckLightbox(request) {
+  const { host, cards, doc, reducedMotion } = request;
+  const shell = acquireModalShell(doc);
+  const options = {
+    duration: DEFAULT_DURATION_MS,
+    scale: DEFAULT_SCALE,
+    ease: DEFAULT_EASE,
+    reducedMotion,
+    loop: true,
+    aspect: "",
+    arrows: "bottom-right",
+    arrowGap: ""
+  };
+  const turnedAway = (card) => card.getAttribute("data-kui-ring-face") === "back";
+  const openAt2 = (pick, faceChecked = false) => {
+    const all = [...cards()];
+    const card = all.find(pick);
+    if (!card || !faceChecked && turnedAway(card)) return false;
+    const items = [];
+    let initial = -1;
+    for (const candidate of all) {
+      const item = cardItem(candidate);
+      if (!item) continue;
+      if (candidate === card) initial = items.length;
+      items.push(item);
+    }
+    if (initial < 0) return false;
+    shell.open({ ...galleryContent(items, initial, options), opener: card });
+    return true;
+  };
+  let pressed = null;
+  const cardUnder = (event) => {
+    const all = [...cards()];
+    const hits = typeof doc.elementsFromPoint === "function" ? doc.elementsFromPoint(event.clientX, event.clientY) : [];
+    for (const node of [...hits, event.target]) {
+      const card = all.find((candidate) => candidate.contains(node));
+      if (card) return turnedAway(card) ? null : { card, node };
+    }
+    return null;
+  };
+  const onPress = (event) => {
+    pressed = event.button === 0 ? cardUnder(event) : null;
+  };
+  const onClick = (event) => {
+    const press = event.detail > 0 ? pressed : null;
+    pressed = null;
+    const target = event.target;
+    if (event.defaultPrevented || !primaryClick(event) || target.closest(OWN_CLICK)) return;
+    if (press?.node.closest(OWN_CLICK)) return;
+    const opened = press ? openAt2((card) => card === press.card, true) : openAt2((card) => card.contains(target));
+    if (opened) event.preventDefault();
+  };
+  const onKeyDown = (event) => {
+    const key = event.key;
+    if (event.target !== host || key !== "Enter" && key !== " ") return;
+    if (openAt2((card) => card.getAttribute(STEP_STATE_ATTR) === "active")) event.preventDefault();
+  };
+  host.addEventListener("pointerdown", onPress);
+  host.addEventListener("click", onClick);
+  host.addEventListener("keydown", onKeyDown);
+  return () => {
+    host.removeEventListener("pointerdown", onPress);
+    host.removeEventListener("click", onClick);
+    host.removeEventListener("keydown", onKeyDown);
+    shell.release();
+  };
 }
 function prepareLightbox(el, params, ctx) {
   const media = params.text("media", "image");
-  const found = targets(el, params, ctx, media);
-  if (found.length === 0) return () => {
+  const triggers = triggersFor(targets(el, params, ctx, media), media);
+  if (triggers.length === 0) return () => {
   };
   const controller = new AbortController();
   const shell = acquireModalShell(ctx.doc);
-  const wiring = { shell, options: modalOptions(params, ctx), signal: controller.signal };
-  let restore = [];
-  if (media === "video") {
-    wireVideos(found, wiring, params.text("aspect"), ctx);
-  } else {
-    const items = imageItems(found, params.text("caption", "figcaption"));
-    restore = wireImages(items, wiring, params.is("loop"));
-  }
+  const options = {
+    ...modalOptions(params, ctx),
+    loop: params.is("loop"),
+    aspect: params.text("aspect"),
+    arrows: params.text("arrows", "bottom-right"),
+    arrowGap: params.text("arrow-gap")
+  };
+  const restore = wireTriggers(triggers, {
+    shell,
+    options,
+    signal: controller.signal,
+    media,
+    captionSource: params.text("caption", "figcaption"),
+    ctx,
+    warned: /* @__PURE__ */ new Set()
+  });
   return continuousSetup(() => {
     controller.abort();
     for (const undo of restore) undo();
     shell.release();
   });
 }
+var TRIGGERS_CHANNEL = "lightbox:triggers";
 var LIGHTBOX_PRIMITIVE = widgetPrimitive(
   "lightbox",
-  { channels: ["widget"], parameters: paramsSchema, perfClass: "paint" },
+  { channels: [TRIGGERS_CHANNEL], parameters: paramsSchema, perfClass: "paint" },
   withTimingContract("lightbox", { honours: ["duration", "ease"], because: "the dialog opens immediately, so it has no delay phase" }, deferPrepare(prepareLightbox))
 );
 var LIGHTBOX_PRESETS = [
   { name: "lightbox", primitive: "lightbox", params: { media: "image" } },
-  { name: "video-lightbox", primitive: "lightbox", params: { media: "video" } }
+  // A video row has never shown captions; `caption:figcaption` opts one in.
+  { name: "video-lightbox", primitive: "lightbox", params: { media: "video", caption: "none" } }
 ];
 
 // src/showcase/compare.ts
 var COMPARE_AXES = ["x", "y"];
 var COMPARE_AXIS_ATTR = "data-kui-compare-axis";
+var COMPARE_DIVIDERS_ATTR = "data-kui-compare-dividers";
 var compareParams = {
   position: {
     type: "percentage",
     default: "50%",
     cssProperty: "--kui-compare"
   },
+  /*
+   * Where each divider of a three-or-more frame starts, as one quoted, space-separated list —
+   * `positions:'20% 45% 80%'` — because a comma would start a new step, not a new value. Default
+   * (empty) is an even split. `position:` stays the two-media spelling: it is a single percentage
+   * and every existing page relies on it validating as one.
+   */
+  positions: { type: "text", default: "", cssProperty: "--kui-compare-positions" },
   axis: {
     type: "keyword",
     default: "x",
     cssProperty: "--kui-compare-axis",
     keywords: [...COMPARE_AXES]
-  }
+  },
+  /*
+   * The auto-drag, in `background-media`'s words (`src/effects/catalog/media.ts`): `always` starts
+   * at load, `in-view` the first time the slider is on screen, `never` (default) not at all.
+   *
+   * Not `on:load` / `on:enter`, because the activation grammar already has a job here: it is what
+   * *builds* the slider, and a widget accepts only `on:load` (`src/showcase/shared.ts`) so the
+   * control exists before a keyboard user tabs to it. `on:enter` would defer the widget, not the
+   * motion — so the motion's start is its own parameter.
+   */
+  autoplay: {
+    type: "keyword",
+    default: "never",
+    cssProperty: "--kui-compare-autoplay",
+    keywords: ["never", "in-view", "always"]
+  },
+  /** One edge-to-edge sweep. The positional spelling (`compare 4s`) means the same thing. */
+  duration: { type: "time", default: "3s", cssProperty: "--kui-compare-duration" },
+  /** Head toward 0% first instead of 100%. */
+  reverse: { type: "keyword", default: "false", cssProperty: "--kui-compare-reverse", keywords: ["true", "false"] },
+  /** Sweep back and forth until someone takes the handle, instead of one pass. */
+  loop: { type: "keyword", default: "false", cssProperty: "--kui-compare-loop", keywords: ["true", "false"] }
 };
+var MIN_SWEEP_MS = 250;
+var MAX_FRAME_MS2 = 100;
 var VERTICAL_KEY_DELTA = { ArrowUp: -1, ArrowDown: 1 };
 function getMediaName(item, fallback) {
   const alt = item.localName === "picture" ? item.querySelector("img")?.getAttribute("alt") : item.getAttribute("alt");
@@ -8491,76 +9954,402 @@ function resolveCompareLabel(el, media) {
   }
   return "Compare";
 }
-function createCompareElements(doc, label, initialPercent, axis) {
+function createRange(doc, label, value, axis) {
   const range = doc.createElement("input");
   range.type = "range";
   range.className = "kui-compare-range";
   range.min = "0";
   range.max = "100";
   range.step = "1";
-  range.value = String(initialPercent);
-  range.setAttribute("aria-label", label);
-  range.setAttribute("aria-valuetext", `${initialPercent}% after`);
+  range.value = String(value);
+  range.setAttribute("aria-label", label.name);
+  range.setAttribute("aria-valuetext", label.valueText);
   if (axis === "y") range.setAttribute("aria-orientation", "vertical");
+  return range;
+}
+function createHandle(doc) {
   const handle = doc.createElement("span");
   handle.className = "kui-compare-handle";
   handle.setAttribute("aria-hidden", "true");
-  return { range, handle };
+  return handle;
 }
-function prepareCompare(el, params, ctx) {
-  const media = Array.from(el.querySelectorAll(":scope > :is(img, picture, video)"));
-  if (media.length < 2) {
-    ctx.warn("compare requires at least two media children (img, picture, or video)");
+function verticalKeys(range, axis, onInput) {
+  return (event) => {
+    const delta = VERTICAL_KEY_DELTA[event.key];
+    if (axis !== "y" || delta === void 0) return;
+    event.preventDefault();
+    if (delta < 0) range.stepDown();
+    else range.stepUp();
+    onInput();
+  };
+}
+function sweepPercent(phase) {
+  return 50 - 50 * Math.cos(Math.PI * phase / 100);
+}
+function startPhase(percent, reverse) {
+  const outbound = 100 / Math.PI * Math.acos(1 - percent / 50);
+  return reverse ? 200 - outbound : outbound;
+}
+function sweepDuration(params, ctx) {
+  const authored = params.timing.durationMs ?? params.ms("duration", 3e3);
+  if (authored >= MIN_SWEEP_MS) return authored;
+  ctx.warn(`compare duration: minimum is ${MIN_SWEEP_MS}ms; clamped to ${MIN_SWEEP_MS}ms`);
+  return MIN_SWEEP_MS;
+}
+function bindAutoDrag(options) {
+  const { host, grab, ctx, mode, loop: loop2 } = options;
+  if (mode === "never" || ctx.reducedMotion) return () => {
+  };
+  const run = runAutoDrag(options, () => stop());
+  let observer = null;
+  if (mode === "in-view" || loop2) {
+    observer = observeOnscreen(ctx.win, host, run.setOnscreen);
   }
-  const axis = params.text("axis", "x");
-  const attrs = createAttributeLedger(el);
-  attrs.set(COMPARE_AXIS_ATTR, axis);
+  const stop = () => {
+    run.stop();
+    observer?.disconnect();
+    observer = null;
+    for (const target of grab) {
+      target.removeEventListener("pointerdown", stop);
+      target.removeEventListener("focus", stop);
+    }
+  };
+  for (const target of grab) {
+    target.addEventListener("pointerdown", stop);
+    target.addEventListener("focus", stop);
+  }
+  run.setOnscreen(mode === "always" || observer === null);
+  return stop;
+}
+function sweepPlan(options) {
+  const { write, homes, bounds, durationMs, reverse, loop: loop2 } = options;
+  const order = homes.map((_, index) => index);
+  if (reverse) order.reverse();
+  const cycleMs = 2 * durationMs;
+  const totalMs = cycleMs * order.length;
+  const phases = homes.map((home, index) => {
+    const [lo, hi] = bounds[index];
+    return hi > lo ? startPhase(100 * (home - lo) / (hi - lo), reverse) : 0;
+  });
+  const park = (slot2) => write(order[slot2], homes[order[slot2]]);
+  let slot = 0;
+  return {
+    show(elapsed) {
+      if (!loop2 && elapsed >= totalMs) {
+        park(slot);
+        return false;
+      }
+      const into = elapsed % totalMs;
+      const next = Math.floor(into / cycleMs);
+      if (next !== slot) park(slot);
+      slot = next;
+      const index = order[slot];
+      const [lo, hi] = bounds[index];
+      const phase = phases[index] + 100 * (into - slot * cycleMs) / durationMs;
+      write(index, lo + (hi - lo) * sweepPercent(phase) / 100);
+      return true;
+    }
+  };
+}
+function observeOnscreen(win, host, onChange) {
+  const Observer = win.IntersectionObserver;
+  if (!Observer) return null;
+  const observer = new Observer((entries) => {
+    for (const entry of entries) onChange(entry.isIntersecting);
+  });
+  observer.observe(host);
+  return observer;
+}
+function runAutoDrag(options, finish) {
+  const win = options.ctx.win;
+  const plan = sweepPlan(options);
+  let elapsed = 0;
+  let lastFrameAt = null;
+  let frame = 0;
+  let done = false;
+  let onscreen = false;
+  const update = () => {
+    const active = !done && onscreen;
+    if (active && frame === 0) {
+      lastFrameAt = null;
+      frame = win.requestAnimationFrame(tick);
+    } else if (!active && frame !== 0) {
+      win.cancelAnimationFrame(frame);
+      frame = 0;
+    }
+  };
+  function tick(now) {
+    frame = 0;
+    if (lastFrameAt !== null) elapsed += Math.min(now - lastFrameAt, MAX_FRAME_MS2);
+    lastFrameAt = now;
+    if (plan.show(elapsed)) frame = win.requestAnimationFrame(tick);
+    else finish();
+  }
+  return {
+    setOnscreen(next) {
+      onscreen = next;
+      update();
+    },
+    stop() {
+      done = true;
+      update();
+    }
+  };
+}
+function buildPair({ el, media, params, ctx, axis, timing: timing3 }) {
   const initialPercent = Math.round(params.num("position", 0.5) * 100);
   const style = createStyleLedger(el);
   style.set("--kui-compare", params.text("position", "50%"));
-  const { range, handle } = createCompareElements(
-    el.ownerDocument,
-    resolveCompareLabel(el, media),
+  const doc = el.ownerDocument;
+  const range = createRange(
+    doc,
+    { name: resolveCompareLabel(el, media), valueText: `${initialPercent}% after` },
     initialPercent,
     axis
   );
+  const handle = createHandle(doc);
   const onInput = () => {
     const val = range.value;
     style.set("--kui-compare", `${val}%`);
     range.setAttribute("aria-valuetext", `${val}% after`);
   };
-  const onKeyDown = (event) => {
-    const delta = VERTICAL_KEY_DELTA[event.key];
-    if (axis !== "y" || delta === void 0) return;
-    event.preventDefault();
-    if (delta < 0) range.stepDown();
-    else range.stepUp();
-    onInput();
+  const writeAuto = (_index, percent) => {
+    range.value = String(Math.round(percent));
+    style.set("--kui-compare", `${Number(percent.toFixed(3))}%`);
+    range.setAttribute("aria-valuetext", `${range.value}% after`);
   };
+  const onKeyDown = verticalKeys(range, axis, onInput);
   range.addEventListener("input", onInput);
   range.addEventListener("keydown", onKeyDown);
   el.appendChild(range);
   el.appendChild(handle);
-  return continuousSetup(() => {
+  const stopAutoDrag = bindAutoDrag({
+    ...timing3,
+    host: el,
+    grab: [range],
+    ctx,
+    write: writeAuto,
+    homes: [params.num("position", 0.5) * 100],
+    bounds: [[0, 100]]
+  });
+  return () => {
+    stopAutoDrag();
     range.removeEventListener("input", onInput);
     range.removeEventListener("keydown", onKeyDown);
     range.remove();
     handle.remove();
-    attrs.restore();
     style.restore();
+  };
+}
+var PERCENT_TOKEN = /^(\d+(?:\.\d+)?)%$/;
+function resolvePositions(authored, count, warn) {
+  const even = Array.from({ length: count }, (_, k) => Math.round(100 * (k + 1) / (count + 1)));
+  if (authored.trim() === "") return even;
+  const tokens = authored.trim().split(/\s+/);
+  const values = tokens.map((token) => PERCENT_TOKEN.exec(token)?.[1]);
+  const numbers = values.map(Number);
+  const usable2 = tokens.length === count && values.every((value) => value !== void 0) && numbers.every((value, k) => value <= 100 && (k === 0 || value >= numbers[k - 1]));
+  if (usable2) return numbers.map(Math.round);
+  const example = even.map((value) => String(value) + "%").join(" ");
+  warn(
+    `compare positions: expected ${count} ascending percentages between 0% and 100% for ${count + 1} media (e.g. positions:'${example}'); using an even split`
+  );
+  return even;
+}
+function buildMulti({ el, media, params, ctx, axis, timing: timing3 }) {
+  if (params.text("position", "50%") !== "50%") {
+    ctx.warn(`compare position: sets the one divider of two media; with ${media.length}, use positions:`);
+  }
+  const positions = resolvePositions(params.text("positions", ""), media.length - 1, ctx.warn);
+  const homes = [...positions];
+  const attrs = createAttributeLedger(el);
+  attrs.set(COMPARE_DIVIDERS_ATTR, String(homes.length));
+  const dividers = createDividers(el, media, axis, positions);
+  const surface = bindSurface(el, axis, dividers);
+  const stopAutoDrag = bindAutoDrag({
+    ...timing3,
+    host: el,
+    grab: [surface.node, ...dividers.ranges],
+    ctx,
+    write: dividers.render,
+    homes,
+    bounds: homes.map((_, k) => boundsOf(homes, k))
+  });
+  return () => {
+    stopAutoDrag();
+    surface.destroy();
+    dividers.destroy();
+    attrs.restore();
+  };
+}
+function boundsOf(positions, k) {
+  return [k > 0 ? positions[k - 1] : 0, k < positions.length - 1 ? positions[k + 1] : 100];
+}
+function dividerLabel(el, media, k) {
+  const count = media.length - 1;
+  const authored = el.getAttribute("aria-label")?.trim();
+  if (authored) return `${authored}: divider ${k + 1} of ${count}`;
+  const before = getMediaName(media[k], `Image ${k + 1}`);
+  const after = getMediaName(media[k + 1], `Image ${k + 2}`);
+  return `Divider ${k + 1} of ${count}: ${before} / ${after}`;
+}
+function createDividers(el, media, axis, positions) {
+  const doc = el.ownerDocument;
+  const count = positions.length;
+  const clip = axis === "y" ? "inset(var(--kui-compare) 0 0 0)" : "inset(0 0 0 var(--kui-compare))";
+  const mediaStyles = media.slice(1).map((item) => createStyleLedger(item));
+  for (const ledger of mediaStyles) ledger.set("clip-path", clip);
+  const ranges = [];
+  const handles = [];
+  const cleanups = [];
+  const render = (k, shown) => {
+    positions[k] = Math.round(shown);
+    const css = `${Number(shown.toFixed(3))}%`;
+    handles[k].style.setProperty("--kui-compare", css);
+    mediaStyles[k].set("--kui-compare", css);
+    ranges[k].value = String(positions[k]);
+    ranges[k].setAttribute("aria-valuetext", `${positions[k]}%`);
+    if (k > 0) ranges[k - 1].max = String(positions[k]);
+    if (k < count - 1) ranges[k + 1].min = String(positions[k]);
+  };
+  for (let k = 0; k < count; k++) {
+    const range = createRange(doc, { name: dividerLabel(el, media, k), valueText: `${positions[k]}%` }, positions[k], axis);
+    const handle = createHandle(doc);
+    ranges.push(range);
+    handles.push(handle);
+    el.append(range, handle);
+    const onInput = () => render(k, Number(range.value));
+    const onKeyDown = verticalKeys(range, axis, onInput);
+    range.addEventListener("input", onInput);
+    range.addEventListener("keydown", onKeyDown);
+    cleanups.push(() => {
+      range.removeEventListener("input", onInput);
+      range.removeEventListener("keydown", onKeyDown);
+    });
+  }
+  for (let k = 0; k < count; k++) {
+    const [lo, hi] = boundsOf(positions, k);
+    ranges[k].min = String(lo);
+    ranges[k].max = String(hi);
+    render(k, positions[k]);
+  }
+  return {
+    ranges,
+    render,
+    moveTo(k, percent) {
+      const [lo, hi] = boundsOf(positions, k);
+      render(k, Math.min(hi, Math.max(lo, percent)));
+    },
+    nearest: (percent) => nearestDivider(positions, percent),
+    destroy() {
+      for (const cleanup of cleanups) cleanup();
+      for (const node of [...ranges, ...handles]) node.remove();
+      for (const ledger of mediaStyles) ledger.restore();
+    }
+  };
+}
+function nearestDivider(positions, percent) {
+  let best = 0;
+  for (let k = 1; k < positions.length; k++) {
+    const distance2 = Math.abs(positions[k] - percent);
+    const bestDistance = Math.abs(positions[best] - percent);
+    if (distance2 < bestDistance || distance2 === bestDistance && percent >= positions[k]) best = k;
+  }
+  return best;
+}
+function bindSurface(el, axis, dividers) {
+  const surface = el.ownerDocument.createElement("div");
+  surface.className = "kui-compare-surface";
+  surface.setAttribute("aria-hidden", "true");
+  el.appendChild(surface);
+  let dragging = -1;
+  let pointerId = null;
+  const percentAt = (event) => {
+    const rect = el.getBoundingClientRect();
+    const along = axis === "y" ? event.clientY - rect.top : event.clientX - rect.left;
+    const size = axis === "y" ? rect.height : rect.width;
+    return size > 0 ? 100 * along / size : 0;
+  };
+  const onPointerDown = (event) => {
+    if (event.button > 0 || pointerId !== null) return;
+    pointerId = event.pointerId;
+    const percent = percentAt(event);
+    dragging = dividers.nearest(percent);
+    event.preventDefault();
+    surface.setPointerCapture?.(event.pointerId);
+    dividers.ranges[dragging].focus({ preventScroll: true });
+    dividers.moveTo(dragging, percent);
+  };
+  const onPointerMove = (event) => {
+    if (dragging >= 0 && event.pointerId === pointerId) dividers.moveTo(dragging, percentAt(event));
+  };
+  const onPointerUp = (event) => {
+    if (event.pointerId !== pointerId) return;
+    dragging = -1;
+    pointerId = null;
+  };
+  const onLostCapture = (event) => {
+    if (event.target !== surface) return;
+    onPointerUp(event);
+  };
+  const listeners = [
+    ["pointerdown", onPointerDown],
+    ["pointermove", onPointerMove],
+    ["pointerup", onPointerUp],
+    ["pointercancel", onPointerUp],
+    ["lostpointercapture", onLostCapture]
+  ];
+  for (const [type, listener] of listeners) surface.addEventListener(type, listener);
+  return {
+    node: surface,
+    destroy() {
+      for (const [type, listener] of listeners) surface.removeEventListener(type, listener);
+      surface.remove();
+    }
+  };
+}
+function prepareCompare(el, params, ctx) {
+  const media = Array.from(el.querySelectorAll(":scope > :is(img, picture, video)"));
+  if (media.length < 2) {
+    ctx.warn("compare requires at least two media children (img, picture, or video)");
+  }
+  const axis = params.text("axis", "x");
+  const attrs = createAttributeLedger(el);
+  attrs.set(COMPARE_AXIS_ATTR, axis);
+  const build2 = media.length > 2 ? buildMulti : buildPair;
+  const teardown = build2({
+    el,
+    media,
+    params,
+    ctx,
+    axis,
+    timing: {
+      mode: params.text("autoplay", "never"),
+      durationMs: sweepDuration(params, ctx),
+      reverse: params.is("reverse"),
+      loop: params.is("loop")
+    }
+  });
+  return continuousSetup(() => {
+    teardown();
+    attrs.restore();
   });
 }
 var COMPARE_PRIMITIVE = widgetPrimitive(
   "compare",
   {
-    channels: ["clip", "widget"],
+    // The layers it stacks and the range, handle and surface it appends; the axis and divider
+    // markers it writes on the host. Not `clip`: its `clip-path` is on the after layer, never the
+    // host, so a `wipe-up` revealing the whole slider is not a fight over one property.
+    channels: [SUBTREE_CHANNEL, attributeChannel(COMPARE_AXIS_ATTR), attributeChannel(COMPARE_DIVIDERS_ATTR)],
     parameters: compareParams,
     perfClass: "paint"
   },
   withTimingContract(
     "compare",
     {
-      because: "it builds an interactive before/after slider; there is no motion to time"
+      honours: ["duration"],
+      because: "its only motion is the autoplay: sweep, which starts on autoplay: rather than after a delay and eases into each edge on its own curve"
     },
     deferPrepare(prepareCompare)
   )
@@ -8734,7 +10523,8 @@ function prepareHotspots(el, params, ctx) {
 var HOTSPOTS_PRIMITIVE = widgetPrimitive(
   "hotspots",
   {
-    channels: ["widget"],
+    // The marker buttons it appends, placed in percent of the host, and the marker style it writes.
+    channels: [SUBTREE_CHANNEL, attributeChannel("data-kui-hotspot-marker")],
     parameters: hotspotsParams,
     perfClass: "layout"
   },
@@ -8938,7 +10728,7 @@ function bindAutoplay(options) {
     hovered = true;
     update();
   };
-  const leave = () => {
+  const leave2 = () => {
     hovered = false;
     update();
   };
@@ -8955,7 +10745,7 @@ function bindAutoplay(options) {
     update();
   };
   el.addEventListener("pointerenter", enter);
-  el.addEventListener("pointerleave", leave);
+  el.addEventListener("pointerleave", leave2);
   el.addEventListener("focusin", focus);
   el.addEventListener("focusout", blur);
   ctx.doc.addEventListener("visibilitychange", update);
@@ -8964,7 +10754,7 @@ function bindAutoplay(options) {
   return () => {
     if (timer !== null) clearTimeout(timer);
     el.removeEventListener("pointerenter", enter);
-    el.removeEventListener("pointerleave", leave);
+    el.removeEventListener("pointerleave", leave2);
     el.removeEventListener("focusin", focus);
     el.removeEventListener("focusout", blur);
     ctx.doc.removeEventListener("visibilitychange", update);
@@ -9030,7 +10820,6 @@ function prepareSlideshow(el, params, ctx) {
     el,
     params,
     ctx,
-    scope,
     resolveSteps,
     name: "slideshow",
     clickFallback: false,
@@ -9058,7 +10847,19 @@ function prepareSlideshow(el, params, ctx) {
 }
 var SLIDESHOW_PRIMITIVE = widgetPrimitive(
   "slideshow",
-  { channels: ["widget"], parameters: slideshowParams, perfClass: "layout" },
+  // The controls it inserts, then what it writes on the host: `createStepIndex`'s `data-kui-step`,
+  // as every step deck does, and `decorateHost`'s mode and carousel roles.
+  {
+    channels: [
+      SUBTREE_CHANNEL,
+      attributeChannel("data-kui-step"),
+      attributeChannel(SLIDE_MODE_ATTR),
+      attributeChannel("role"),
+      attributeChannel("aria-roledescription")
+    ],
+    parameters: slideshowParams,
+    perfClass: "layout"
+  },
   withTimingContract(
     "slideshow",
     { honours: ["duration", "ease"], because: "the slideshow has no delayed start" },
@@ -9220,7 +11021,14 @@ function prepareScrollStory(el, params, ctx) {
 }
 var SCROLL_STORY_PRIMITIVE = widgetPrimitive(
   "scroll-story",
-  { channels: ["widget"], parameters: scrollStoryParams, perfClass: "layout" },
+  // Its stylesheet lays out the host's first and last child, so nothing else may insert one. The
+  // step index on the host (`applyStep`) is claimed so a `carousel` or `scroll-progress` beside it
+  // is refused rather than left to overwrite it.
+  {
+    channels: [SUBTREE_CHANNEL, attributeChannel("data-kui-step"), attributeChannel(STORY_SIDE_ATTR)],
+    parameters: scrollStoryParams,
+    perfClass: "layout"
+  },
   withTimingContract(
     "scroll-story",
     { because: "scroll position" },
@@ -9323,7 +11131,8 @@ function prepareSlowMo(el, params) {
 }
 var SLOW_MO_PRIMITIVE = widgetPrimitive(
   "slow-mo",
-  { channels: ["widget"], parameters: slowMoParams, perfClass: "compositor" },
+  // The toggle it prepends into the host, and the time scale it writes there.
+  { channels: [SUBTREE_CHANNEL, attributeChannel(TIME_SCALE_ATTR)], parameters: slowMoParams, perfClass: "compositor" },
   withTimingContract(
     "slow-mo",
     { because: "it changes playback rate rather than defining an animation timeline" },
@@ -9352,6 +11161,7 @@ var SHOWCASE_PRESETS = [
   ...SLOW_MO_PRESETS
 ];
 function registerShowcase(target) {
+  provideDeckViewer(attachDeckLightbox);
   return registerInto(target, SHOWCASE_PRIMITIVES, SHOWCASE_PRESETS, "Showcase");
 }