@zubra/runtime 5.4.0 → 5.5.0

package/dist/production/element.js

@@ -523,6 +523,19 @@ function clearBetween(open, close) {
   while (open.nextSibling && open.nextSibling !== close) open.nextSibling.remove();
 }
 
+/**
+ * `animate`: the region's nodes leave (`motion`, @zubra/runtime/motion, which the compiled module
+ * imports only when a component animates) instead of going at once. They stay where they are,
+ * and the region starts after them, so what replaces them is rendered beside them.
+ */
+function departBetween(open, close, motion) {
+  const nodes = [];
+  for (let node = open.nextSibling; node && node !== close; node = node.nextSibling) nodes.push(node);
+  if (!nodes.length) return;
+  nodes[nodes.length - 1].after(open);
+  motion.leave(nodes);
+}
+
 /** Remove everything between `open` and `close` in one operation. */
 function deleteBetween(open, close) {
   if (open.nextSibling === close) return;
@@ -1118,6 +1131,7 @@ function bindWhen(part, open, hydrating, context) {
     first = false;
     // Effects created while mounting belong to this effect, so switching branches disposes them.
     untrack(() => {
+      if (part.animate && !hydrate) departBetween(open, close, part.animate);
       if (block) mountBlock(block, [], open, close, hydrate, context);
       else clearBetween(open, close);
     });
@@ -1258,8 +1272,10 @@ function bindEach(part, open, hydrating, context) {
   };
   const removeRow = (row) => {
     row.owner.dispose();
-    for (const node of nodesOf(row)) node.remove();
+    if (part.animate) part.animate.leave(nodesOf(row), { float: true });
+    else for (const node of nodesOf(row)) node.remove();
   };
+  const elementsOf = (row) => nodesOf(row).filter((node) => node.nodeType === 1);
   const placeRow = (row, before) => {
     const parent = close.parentNode;
     for (const node of nodesOf(row)) move(parent, node, before);
@@ -1331,7 +1347,7 @@ function bindEach(part, open, hydrating, context) {
       const byKey = new Map(rows.map((row) => [row.key, row]));
       // Nothing reused (cleared, or replaced wholesale): drop every row at once, then build the
       // new ones in one fragment and insert it once.
-      if (rows.length && !keys.some((key) => byKey.has(key))) {
+      if (!part.animate && rows.length && !keys.some((key) => byKey.has(key))) {
         batch(() => { for (const row of rows) row.owner.dispose(); });
         deleteBetween(open, close);
         rows = [];
@@ -1347,25 +1363,33 @@ function bindEach(part, open, hydrating, context) {
         close.before(fragment);
         return;
       }
-      const next = list.map((value, index) => {
-        const row = byKey.get(keys[index]);
-        if (!row) return createRow(value, index, keys[index]);
-        byKey.delete(keys[index]);
-        row.item.set(value);
-        row.position.set(index);
-        return row;
-      });
-      batch(() => { for (const row of byKey.values()) removeRow(row); });
-      let at = open.nextSibling;
-      while (at && at.nodeType === TEXT) at = at.nextSibling;
-      for (const row of next) {
-        if (row.open === at) {
-          at = row.close.nextSibling;
-          continue;
+      // `animate`: the rows that stay glide from where they were (@zubra/runtime/motion).
+      const reorder = () => {
+        const next = list.map((value, index) => {
+          const row = byKey.get(keys[index]);
+          if (!row) return createRow(value, index, keys[index]);
+          byKey.delete(keys[index]);
+          row.item.set(value);
+          row.position.set(index);
+          return row;
+        });
+        batch(() => { for (const row of byKey.values()) removeRow(row); });
+        // Text between rows, and rows on their way out, aren't rows to place against.
+        const skip = (node) => node && (node.nodeType === TEXT || part.animate?.isLeaving(node));
+        let at = open.nextSibling;
+        while (skip(at)) at = at.nextSibling;
+        for (const row of next) {
+          if (row.open === at) {
+            at = row.close.nextSibling;
+            while (skip(at)) at = at.nextSibling;
+            continue;
+          }
+          placeRow(row, at ?? close);
         }
-        placeRow(row, at ?? close);
-      }
-      rows = next;
+        rows = next;
+      };
+      if (part.animate) part.animate.glide(rows.flatMap(elementsOf), reorder);
+      else reorder();
     });
   });
 }

package/dist/production/motion.js

@@ -0,0 +1,122 @@
+// Generated by scripts/build-production.js from src/motion.js: the runtime without hot reloading or the DevTools hook. Do not edit.
+// @zubra/runtime/motion: what `animate` on <zb-if>, <zb-switch> and <zb-each> does, as three
+// functions any code can call.
+//
+// The platform animates an element coming in on its own: `@starting-style` gives a transition
+// somewhere to start from, and a CSS animation runs when the element is inserted. What it can't do
+// is animate one going out, because a removed element is gone. And a list that reorders jumps,
+// because moving an element doesn't transition its position. These fill those two gaps, with CSS
+// still deciding how everything looks:
+//
+//   [data-leaving] { opacity: 0; transition: opacity 150ms; }   (on its way out)
+//   .row { --zb-move-duration: 250ms; --zb-move-easing: ease-out; }   (gliding to a new place)
+//
+// Under `prefers-reduced-motion: reduce`, elements leave at once and lists don't glide.
+
+/** Whether the person has asked for less motion. */
+export const reducedMotion = () => !!globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+// An element on its way out: it stays in the document until its animations end.
+const LEAVING = Symbol('leaving');
+/** Whether `node` is an element on its way out (`leave()` was called on it). */
+export const isLeaving = (node) => !!node?.[LEAVING];
+
+/** The animations that will end: CSS transitions and animations, except infinite ones (a spinner). */
+function finite(element) {
+  if (typeof element.getAnimations !== 'function') return [];
+  // getAnimations() brings styles up to date first, so the transitions `data-leaving` starts are here.
+  return element.getAnimations({ subtree: true }).filter((animation) => {
+    const end = animation.effect?.getComputedTiming?.().endTime;
+    return end !== Infinity && animation.playState !== 'finished';
+  });
+}
+
+/**
+ * Lets `nodes` finish their exit before they go. Each element gets the `data-leaving` attribute
+ * (and `inert`, so it can't be clicked or focused on the way out); it's removed once the
+ * transitions and animations that starts have ended, or at once if there are none. Text, comments,
+ * and everything under reduced motion are removed at once.
+ *
+ * - `float`: take leaving elements out of the flow first, fixed where they are, so what's around
+ *   them can move into their space as they go (a list does this).
+ *
+ * Returns a promise for when every element is gone.
+ */
+export function leave(nodes, { float = false } = {}) {
+  const reduced = reducedMotion();
+  const elements = [];
+  for (const node of nodes) {
+    if (node.nodeType === 1 && !reduced && node.isConnected) elements.push(node);
+    else node.remove();
+  }
+  // Read every position before changing any: floating one element moves the next.
+  const places = float ? elements.map(placeOf) : [];
+  elements.forEach((element, index) => {
+    element[LEAVING] = true;
+    if (float) Object.assign(element.style, places[index]);
+    element.inert = true;
+    element.setAttribute('data-leaving', '');
+  });
+  return Promise.all(elements.map((element) => {
+    const running = finite(element);
+    if (!running.length) return element.remove();
+    return Promise.allSettled(running.map((animation) => animation.finished)).then(() => element.remove());
+  }));
+}
+
+/** Where an element is, as styles that hold it there out of the flow. */
+function placeOf(element) {
+  const { width, height } = element.getBoundingClientRect();
+  return {
+    position: 'absolute',
+    top: `${element.offsetTop}px`,
+    left: `${element.offsetLeft}px`,
+    width: `${width}px`,
+    height: `${height}px`,
+    margin: '0',
+  };
+}
+
+/** A CSS time (`250ms`, `0.3s`) in milliseconds, or null. */
+function milliseconds(text) {
+  const match = /^\s*(-?[\d.]+)(ms|s)\s*$/.exec(text ?? '');
+  if (!match) return null;
+  return Number(match[1]) * (match[2] === 's' ? 1000 : 1);
+}
+
+/**
+ * Runs `change` (which moves `elements` about), then animates each element from where it was to
+ * where it is now: First, Last, Invert, Play. Elements added or leaving in `change` aren't moved.
+ * How long and how: each element's `--zb-move-duration` (250ms) and `--zb-move-easing` (a quick
+ * ease-out), so a theme or one list can change them. A duration of 0, or reduced motion, moves
+ * them without animating.
+ */
+export function glide(elements, change) {
+  if (reducedMotion()) return change();
+  const before = new Map();
+  for (const element of elements) if (element.isConnected) before.set(element, element.getBoundingClientRect());
+  const result = change();
+  for (const [element, was] of before) {
+    if (!element.isConnected) continue;
+    const now = element.getBoundingClientRect();
+    const x = was.left - now.left;
+    const y = was.top - now.top;
+    if (!x && !y) continue;
+    if (element[LEAVING]) {
+      // Held in place as it leaves: where it was on screen, even if its container moved (one
+      // anchored to the bottom shrinks from the top).
+      element.style.top = `${parseFloat(element.style.top) + y}px`;
+      element.style.left = `${parseFloat(element.style.left) + x}px`;
+      continue;
+    }
+    const style = getComputedStyle(element);
+    const duration = milliseconds(style.getPropertyValue('--zb-move-duration')) ?? 250;
+    if (duration <= 0) continue;
+    element.animate(
+      [{ transform: `translate(${x}px, ${y}px)` }, { transform: 'none' }],
+      // `add`: on top of whatever transform the element has of its own.
+      { duration, easing: style.getPropertyValue('--zb-move-easing').trim() || 'cubic-bezier(0.2, 0, 0, 1)', composite: 'add' },
+    );
+  }
+  return result;
+}

package/dist/production/spread.js

@@ -27,6 +27,11 @@ const kebab = (key) => (key.startsWith('--') ? key : key.replace(/[A-Z]/g, (lett
  */
 export function spread(part, node) {
   const own = new Set(part.own ?? []);
+  // On a component (`part.props`): the entries that are its props are set as props, as the
+  // component's own `prop={...}` is, and anything else lands on its host like on any element.
+  const normalize = (name) => name.replace(/-/g, '').toLowerCase();
+  const props = new Map((part.props ?? []).map((name) => [normalize(name), name]));
+  let givenProps = new Set();
   const listeners = new Map(); // event → { latest, listener }
   let previous = new Map(); // normalized name → value
   let classes = [];
@@ -39,12 +44,20 @@ export function spread(part, node) {
       given = {};
     }
     const next = new Map();
+    const nextProps = new Map();
     const events = new Set();
     let nextClasses = [];
     let nextStyles = new Set();
     for (const [key, value] of Object.entries(given)) {
       if (value === undefined) continue;
       const lower = key.toLowerCase();
+      const prop = props.get(normalize(key));
+      if (prop) {
+        // The element's own `prop={...}` wins, in either spelling. `null` isn't a value: the
+        // prop's default, as on the server.
+        if (value !== null && !own.has(prop.toLowerCase()) && !own.has(kebab(prop))) nextProps.set(prop, value);
+        continue;
+      }
       if (lower.length > 2 && lower.startsWith('on') && (typeof value === 'function' || typeof value === 'string')) {
         if (typeof value === 'string') {
           console.error(`zubra: a spread can't add a handler as text ("${key}"); pass a function${see('safety')}`);
@@ -89,6 +102,15 @@ export function spread(part, node) {
       if (own.has(name.toLowerCase())) continue;
       next.set(name, value);
     }
+    // Props: set, and back to the component's default once the key is gone (or null), which is
+    // what the server renders for a spread without it.
+    for (const name of givenProps) {
+      if (nextProps.has(name)) continue;
+      const fallback = node.constructor.zubra?.props[name]?.default;
+      node[name] = fallback && typeof fallback === 'object' ? structuredClone(fallback) : fallback;
+    }
+    for (const [name, value] of nextProps) node[name] = value; // not read first: that would subscribe this effect to the child's own prop
+    givenProps = new Set(nextProps.keys());
     // Listeners whose keys went away.
     for (const [event, entry] of listeners) {
       if (!events.has(event)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zubra/runtime",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "description": "Browser runtime for Zubra compiled components, built on the TC39 Signals API",
   "license": "ISC",
   "repository": {
@@ -40,6 +40,11 @@
       "production": "./dist/production/primitives.js",
       "default": "./src/primitives.js"
     },
+    "./motion": {
+      "types": "./types/motion.d.ts",
+      "production": "./dist/production/motion.js",
+      "default": "./src/motion.js"
+    },
     "./react": {
       "types": "./types/react.d.ts",
       "production": "./dist/production/react.js",

package/src/element.js

@@ -542,6 +542,19 @@ function clearBetween(open, close) {
   while (open.nextSibling && open.nextSibling !== close) open.nextSibling.remove();
 }
 
+/**
+ * `animate`: the region's nodes leave (`motion`, @zubra/runtime/motion, which the compiled module
+ * imports only when a component animates) instead of going at once. They stay where they are,
+ * and the region starts after them, so what replaces them is rendered beside them.
+ */
+function departBetween(open, close, motion) {
+  const nodes = [];
+  for (let node = open.nextSibling; node && node !== close; node = node.nextSibling) nodes.push(node);
+  if (!nodes.length) return;
+  nodes[nodes.length - 1].after(open);
+  motion.leave(nodes);
+}
+
 /** Remove everything between `open` and `close` in one operation. */
 function deleteBetween(open, close) {
   if (open.nextSibling === close) return;
@@ -1146,6 +1159,7 @@ function bindWhen(part, open, hydrating, context) {
     first = false;
     // Effects created while mounting belong to this effect, so switching branches disposes them.
     untrack(() => {
+      if (part.animate && !hydrate) departBetween(open, close, part.animate);
       if (block) mountBlock(block, [], open, close, hydrate, context);
       else clearBetween(open, close);
     });
@@ -1286,8 +1300,10 @@ function bindEach(part, open, hydrating, context) {
   };
   const removeRow = (row) => {
     row.owner.dispose();
-    for (const node of nodesOf(row)) node.remove();
+    if (part.animate) part.animate.leave(nodesOf(row), { float: true });
+    else for (const node of nodesOf(row)) node.remove();
   };
+  const elementsOf = (row) => nodesOf(row).filter((node) => node.nodeType === 1);
   const placeRow = (row, before) => {
     const parent = close.parentNode;
     for (const node of nodesOf(row)) move(parent, node, before);
@@ -1359,7 +1375,7 @@ function bindEach(part, open, hydrating, context) {
       const byKey = new Map(rows.map((row) => [row.key, row]));
       // Nothing reused (cleared, or replaced wholesale): drop every row at once, then build the
       // new ones in one fragment and insert it once.
-      if (rows.length && !keys.some((key) => byKey.has(key))) {
+      if (!part.animate && rows.length && !keys.some((key) => byKey.has(key))) {
         batch(() => { for (const row of rows) row.owner.dispose(); });
         deleteBetween(open, close);
         rows = [];
@@ -1375,25 +1391,33 @@ function bindEach(part, open, hydrating, context) {
         close.before(fragment);
         return;
       }
-      const next = list.map((value, index) => {
-        const row = byKey.get(keys[index]);
-        if (!row) return createRow(value, index, keys[index]);
-        byKey.delete(keys[index]);
-        row.item.set(value);
-        row.position.set(index);
-        return row;
-      });
-      batch(() => { for (const row of byKey.values()) removeRow(row); });
-      let at = open.nextSibling;
-      while (at && at.nodeType === TEXT) at = at.nextSibling;
-      for (const row of next) {
-        if (row.open === at) {
-          at = row.close.nextSibling;
-          continue;
+      // `animate`: the rows that stay glide from where they were (@zubra/runtime/motion).
+      const reorder = () => {
+        const next = list.map((value, index) => {
+          const row = byKey.get(keys[index]);
+          if (!row) return createRow(value, index, keys[index]);
+          byKey.delete(keys[index]);
+          row.item.set(value);
+          row.position.set(index);
+          return row;
+        });
+        batch(() => { for (const row of byKey.values()) removeRow(row); });
+        // Text between rows, and rows on their way out, aren't rows to place against.
+        const skip = (node) => node && (node.nodeType === TEXT || part.animate?.isLeaving(node));
+        let at = open.nextSibling;
+        while (skip(at)) at = at.nextSibling;
+        for (const row of next) {
+          if (row.open === at) {
+            at = row.close.nextSibling;
+            while (skip(at)) at = at.nextSibling;
+            continue;
+          }
+          placeRow(row, at ?? close);
         }
-        placeRow(row, at ?? close);
-      }
-      rows = next;
+        rows = next;
+      };
+      if (part.animate) part.animate.glide(rows.flatMap(elementsOf), reorder);
+      else reorder();
     });
   });
 }

package/src/motion.js

@@ -0,0 +1,121 @@
+// @zubra/runtime/motion: what `animate` on <zb-if>, <zb-switch> and <zb-each> does, as three
+// functions any code can call.
+//
+// The platform animates an element coming in on its own: `@starting-style` gives a transition
+// somewhere to start from, and a CSS animation runs when the element is inserted. What it can't do
+// is animate one going out, because a removed element is gone. And a list that reorders jumps,
+// because moving an element doesn't transition its position. These fill those two gaps, with CSS
+// still deciding how everything looks:
+//
+//   [data-leaving] { opacity: 0; transition: opacity 150ms; }   (on its way out)
+//   .row { --zb-move-duration: 250ms; --zb-move-easing: ease-out; }   (gliding to a new place)
+//
+// Under `prefers-reduced-motion: reduce`, elements leave at once and lists don't glide.
+
+/** Whether the person has asked for less motion. */
+export const reducedMotion = () => !!globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+// An element on its way out: it stays in the document until its animations end.
+const LEAVING = Symbol('leaving');
+/** Whether `node` is an element on its way out (`leave()` was called on it). */
+export const isLeaving = (node) => !!node?.[LEAVING];
+
+/** The animations that will end: CSS transitions and animations, except infinite ones (a spinner). */
+function finite(element) {
+  if (typeof element.getAnimations !== 'function') return [];
+  // getAnimations() brings styles up to date first, so the transitions `data-leaving` starts are here.
+  return element.getAnimations({ subtree: true }).filter((animation) => {
+    const end = animation.effect?.getComputedTiming?.().endTime;
+    return end !== Infinity && animation.playState !== 'finished';
+  });
+}
+
+/**
+ * Lets `nodes` finish their exit before they go. Each element gets the `data-leaving` attribute
+ * (and `inert`, so it can't be clicked or focused on the way out); it's removed once the
+ * transitions and animations that starts have ended, or at once if there are none. Text, comments,
+ * and everything under reduced motion are removed at once.
+ *
+ * - `float`: take leaving elements out of the flow first, fixed where they are, so what's around
+ *   them can move into their space as they go (a list does this).
+ *
+ * Returns a promise for when every element is gone.
+ */
+export function leave(nodes, { float = false } = {}) {
+  const reduced = reducedMotion();
+  const elements = [];
+  for (const node of nodes) {
+    if (node.nodeType === 1 && !reduced && node.isConnected) elements.push(node);
+    else node.remove();
+  }
+  // Read every position before changing any: floating one element moves the next.
+  const places = float ? elements.map(placeOf) : [];
+  elements.forEach((element, index) => {
+    element[LEAVING] = true;
+    if (float) Object.assign(element.style, places[index]);
+    element.inert = true;
+    element.setAttribute('data-leaving', '');
+  });
+  return Promise.all(elements.map((element) => {
+    const running = finite(element);
+    if (!running.length) return element.remove();
+    return Promise.allSettled(running.map((animation) => animation.finished)).then(() => element.remove());
+  }));
+}
+
+/** Where an element is, as styles that hold it there out of the flow. */
+function placeOf(element) {
+  const { width, height } = element.getBoundingClientRect();
+  return {
+    position: 'absolute',
+    top: `${element.offsetTop}px`,
+    left: `${element.offsetLeft}px`,
+    width: `${width}px`,
+    height: `${height}px`,
+    margin: '0',
+  };
+}
+
+/** A CSS time (`250ms`, `0.3s`) in milliseconds, or null. */
+function milliseconds(text) {
+  const match = /^\s*(-?[\d.]+)(ms|s)\s*$/.exec(text ?? '');
+  if (!match) return null;
+  return Number(match[1]) * (match[2] === 's' ? 1000 : 1);
+}
+
+/**
+ * Runs `change` (which moves `elements` about), then animates each element from where it was to
+ * where it is now: First, Last, Invert, Play. Elements added or leaving in `change` aren't moved.
+ * How long and how: each element's `--zb-move-duration` (250ms) and `--zb-move-easing` (a quick
+ * ease-out), so a theme or one list can change them. A duration of 0, or reduced motion, moves
+ * them without animating.
+ */
+export function glide(elements, change) {
+  if (reducedMotion()) return change();
+  const before = new Map();
+  for (const element of elements) if (element.isConnected) before.set(element, element.getBoundingClientRect());
+  const result = change();
+  for (const [element, was] of before) {
+    if (!element.isConnected) continue;
+    const now = element.getBoundingClientRect();
+    const x = was.left - now.left;
+    const y = was.top - now.top;
+    if (!x && !y) continue;
+    if (element[LEAVING]) {
+      // Held in place as it leaves: where it was on screen, even if its container moved (one
+      // anchored to the bottom shrinks from the top).
+      element.style.top = `${parseFloat(element.style.top) + y}px`;
+      element.style.left = `${parseFloat(element.style.left) + x}px`;
+      continue;
+    }
+    const style = getComputedStyle(element);
+    const duration = milliseconds(style.getPropertyValue('--zb-move-duration')) ?? 250;
+    if (duration <= 0) continue;
+    element.animate(
+      [{ transform: `translate(${x}px, ${y}px)` }, { transform: 'none' }],
+      // `add`: on top of whatever transform the element has of its own.
+      { duration, easing: style.getPropertyValue('--zb-move-easing').trim() || 'cubic-bezier(0.2, 0, 0, 1)', composite: 'add' },
+    );
+  }
+  return result;
+}

package/src/spread.js

@@ -26,6 +26,11 @@ const kebab = (key) => (key.startsWith('--') ? key : key.replace(/[A-Z]/g, (lett
  */
 export function spread(part, node) {
   const own = new Set(part.own ?? []);
+  // On a component (`part.props`): the entries that are its props are set as props, as the
+  // component's own `prop={...}` is, and anything else lands on its host like on any element.
+  const normalize = (name) => name.replace(/-/g, '').toLowerCase();
+  const props = new Map((part.props ?? []).map((name) => [normalize(name), name]));
+  let givenProps = new Set();
   const listeners = new Map(); // event → { latest, listener }
   let previous = new Map(); // normalized name → value
   let classes = [];
@@ -38,12 +43,20 @@ export function spread(part, node) {
       given = {};
     }
     const next = new Map();
+    const nextProps = new Map();
     const events = new Set();
     let nextClasses = [];
     let nextStyles = new Set();
     for (const [key, value] of Object.entries(given)) {
       if (value === undefined) continue;
       const lower = key.toLowerCase();
+      const prop = props.get(normalize(key));
+      if (prop) {
+        // The element's own `prop={...}` wins, in either spelling. `null` isn't a value: the
+        // prop's default, as on the server.
+        if (value !== null && !own.has(prop.toLowerCase()) && !own.has(kebab(prop))) nextProps.set(prop, value);
+        continue;
+      }
       if (lower.length > 2 && lower.startsWith('on') && (typeof value === 'function' || typeof value === 'string')) {
         if (typeof value === 'string') {
           console.error(`zubra: a spread can't add a handler as text ("${key}"); pass a function${see('safety')}`);
@@ -88,6 +101,15 @@ export function spread(part, node) {
       if (own.has(name.toLowerCase())) continue;
       next.set(name, value);
     }
+    // Props: set, and back to the component's default once the key is gone (or null), which is
+    // what the server renders for a spread without it.
+    for (const name of givenProps) {
+      if (nextProps.has(name)) continue;
+      const fallback = node.constructor.zubra?.props[name]?.default;
+      node[name] = fallback && typeof fallback === 'object' ? structuredClone(fallback) : fallback;
+    }
+    for (const [name, value] of nextProps) node[name] = value; // not read first: that would subscribe this effect to the child's own prop
+    givenProps = new Set(nextProps.keys());
     // Listeners whose keys went away.
     for (const [event, entry] of listeners) {
       if (!events.has(event)) {

package/types/motion.d.ts

@@ -0,0 +1,15 @@
+/** Whether the person has asked for less motion (`prefers-reduced-motion: reduce`). */
+export declare function reducedMotion(): boolean;
+/** Whether `node` is an element on its way out (`leave()` was called on it). */
+export declare function isLeaving(node: Node | null | undefined): boolean;
+/**
+ * Lets `nodes` finish their exit: each element gets `data-leaving` and `inert`, and is removed
+ * once the transitions and animations that starts have ended (at once under reduced motion).
+ * `float` takes them out of the flow first, so what's around them can move into their space.
+ */
+export declare function leave(nodes: Iterable<Node>, options?: { float?: boolean }): Promise<unknown>;
+/**
+ * Runs `change`, then animates each of `elements` from where it was to where it is now (FLIP),
+ * using its `--zb-move-duration` and `--zb-move-easing`. Returns what `change` returns.
+ */
+export declare function glide<T>(elements: Iterable<Element>, change: () => T): T;