concertina 0.11.0 → 0.13.0

package/README.md

@@ -26,7 +26,7 @@ It's not a state problem. It's a **structure problem.** The box changed size bec
 
 Don't swap structures. Swap what's inside them.
 
-Concertina gives you three high-level components: **Bellows**, **Hum**, and **Ensemble**. They handle the math so you can focus on the music. CSS is auto-injected on first render. No manual imports needed.
+Concertina gives you four high-level components: **Bellows**, **Hum**, **Overture**, and **Ensemble**. They handle the math so you can focus on the music. CSS is auto-injected on first render. No manual imports needed.
 
 ```bash
 npm install concertina
@@ -188,18 +188,71 @@ import { Hum } from "concertina";
 
 The `className` is passed through to the shimmer so `1lh` inherits the correct font metrics. The shimmer is exactly as tall as the text it replaces because `1lh` resolves to the element's computed line-height. Not font-size, not a token, not a guess.
 
+#### Vamp: ambient loading for entire subtrees
+
+When many Hum instances share the same loading state (e.g. every cell in a table), threading `loading` to each one is boilerplate. Wrap the subtree in `<Vamp>` and every nested `<Hum>` picks it up automatically.
+
+```tsx
+import { Vamp, Hum } from "concertina";
+
+<Vamp loading={isLoading}>
+  <h2><Hum className="text-xl font-bold">{user?.name}</Hum></h2>
+  <p><Hum className="text-sm text-stone">{user?.email}</Hum></p>
+  <p><Hum className="text-sm">{user?.bio}</Hum></p>
+</Vamp>
+```
+
+No `loading` prop on any Hum. They all read from Vamp. An explicit `loading` prop on any individual Hum still overrides context.
+
+Named after musical **vamping** — repeating a pattern while waiting for a cue.
+
 #### Hum props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `loading` | `boolean` | | Show shimmer (true) or children (false) |
+| `loading` | `boolean` | Vamp context | Show shimmer (true) or children (false). Falls back to nearest `<Vamp>` when omitted. |
 | `as` | `ElementType` | `"span"` | HTML element to render |
 | `className` | `string` | | Applied to both shimmer and content states |
 
+#### Vamp props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `loading` | `boolean` | Whether the subtree is in a loading/warmup state |
+| `children` | `ReactNode` | Content to wrap |
+
 > `StableText` is an alias for `Hum`.
 
 ---
 
+## Overture: temporal stability for arbitrary content
+
+A card, table, or page loads from an API. You want shimmer bones during loading, a smooth fade-out when data arrives, and the container must never collapse during the swap. You don't have a flat list — you have complex, nested JSX.
+
+Overture composes `Vamp` (ambient loading context) + `Gigbag` (size ratchet) + `useWarmupExit` (exit transition) into a single wrapper. Write one JSX tree for both states. Nested `<Hum>` instances read loading state from the Vamp context automatically.
+
+```tsx
+import { Overture, Hum } from "concertina";
+
+<Overture loading={isLoading} exitDuration={150}>
+  <h2><Hum className="text-xl font-bold">{user?.name}</Hum></h2>
+  <p><Hum className="text-sm text-stone">{user?.email}</Hum></p>
+  <Button><Hum>Edit Profile</Hum></Button>
+</Overture>
+```
+
+During loading, every Hum renders a shimmer sized to its ghost children. When loading finishes, the shimmers fade out, real content appears, and the Gigbag ratchet prevents any height collapse.
+
+#### Overture props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `loading` | `boolean` | | Show shimmer (true) or content (false) |
+| `exitDuration` | `number` | | Exit animation duration in ms (match `--concertina-close-duration`) |
+| `as` | `ElementType` | `"div"` | HTML element to render |
+
+---
+
 ## Ensemble: temporal stability for collections
 
 A list loads from an API. You want shimmer rows while loading, then a smooth transition to real items, and the container must never collapse during the swap.
@@ -382,6 +435,8 @@ Scrolls an element to the top of its nearest scrollable ancestor. Only touches `
 |---------|------|
 | Two variants swap in one slot | Bellows + Slot |
 | Line of text loading from API | Hum |
+| Many Hum instances share one loading state | Vamp + Hum |
+| Card/table/page loading from API | Overture + Hum |
 | List loading from API | Ensemble |
 | Spinner replaced by loaded content | Gigbag + Warmup |
 | Accordion/table shimmer rows | Stub data + WarmupLine (wrapper-once pattern) |

package/dist/accordion.cjs

@@ -1229,12 +1229,13 @@ var styles_default = `/* concertina \u2014 Radix Accordion expand/collapse with
 }
 
 /* Inactive Slot hiding \u2014 belt and suspenders.
-   Inline style sets visibility: hidden + opacity: 0 on the Slot div.
-   CSS backup catches edge cases where inline styles are overridden.
+   Primary: inline style on the Slot element (visibility: hidden + opacity: 0).
+   Inline styles can't be overridden by any CSS cascade \u2014 this is the
+   bulletproof layer.
+   Backup: CSS rules below catch edge cases (e.g. if inline styles are
+   stripped by a framework or test harness).
    transition: none on descendants prevents children with transition-all
-   from animating the inherited visibility change (CSS visibility is
-   inherited; transition-all transitions it over the child's duration
-   instead of hiding instantly). */
+   from animating the inherited visibility change. */
 .concertina-stable-slot > [inert] {
   visibility: hidden;
   opacity: 0;

package/dist/accordion.js

@@ -8,7 +8,7 @@ import {
   Trigger2,
   useConcertina,
   useExpanded
-} from "./chunk-4DDADLSW.js";
+} from "./chunk-OGJMPKZX.js";
 export {
   ConcertinaContext,
   ConcertinaStore,

package/dist/{chunk-4DDADLSW.js → chunk-OGJMPKZX.js}

@@ -1190,12 +1190,13 @@ var styles_default = `/* concertina \u2014 Radix Accordion expand/collapse with
 }
 
 /* Inactive Slot hiding \u2014 belt and suspenders.
-   Inline style sets visibility: hidden + opacity: 0 on the Slot div.
-   CSS backup catches edge cases where inline styles are overridden.
+   Primary: inline style on the Slot element (visibility: hidden + opacity: 0).
+   Inline styles can't be overridden by any CSS cascade \u2014 this is the
+   bulletproof layer.
+   Backup: CSS rules below catch edge cases (e.g. if inline styles are
+   stripped by a framework or test harness).
    transition: none on descendants prevents children with transition-all
-   from animating the inherited visibility change (CSS visibility is
-   inherited; transition-all transitions it over the child's duration
-   instead of hiding instantly). */
+   from animating the inherited visibility change. */
 .concertina-stable-slot > [inert] {
   visibility: hidden;
   opacity: 0;

package/dist/index.cjs

@@ -40,12 +40,15 @@ __export(index_exports, {
   Header: () => Header,
   Hum: () => Hum,
   Item: () => Item2,
+  Overture: () => Overture,
   Root: () => Root3,
   Slot: () => Slot,
   StableCollection: () => Ensemble,
   StableSlot: () => Bellows,
   StableText: () => Hum,
   Trigger: () => Trigger2,
+  Vamp: () => Vamp,
+  VampContext: () => VampContext,
   Warmup: () => Warmup,
   WarmupLine: () => WarmupLine,
   pinToScrollTop: () => pinToScrollTop,
@@ -56,6 +59,7 @@ __export(index_exports, {
   useSize: () => useSize,
   useStableSlot: () => useStableSlot,
   useTransitionLock: () => useTransitionLock,
+  useVamp: () => useVamp,
   useWarmupExit: () => useWarmupExit
 });
 module.exports = __toCommonJS(index_exports);
@@ -1247,12 +1251,13 @@ var styles_default = `/* concertina \u2014 Radix Accordion expand/collapse with
 }
 
 /* Inactive Slot hiding \u2014 belt and suspenders.
-   Inline style sets visibility: hidden + opacity: 0 on the Slot div.
-   CSS backup catches edge cases where inline styles are overridden.
+   Primary: inline style on the Slot element (visibility: hidden + opacity: 0).
+   Inline styles can't be overridden by any CSS cascade \u2014 this is the
+   bulletproof layer.
+   Backup: CSS rules below catch edge cases (e.g. if inline styles are
+   stripped by a framework or test harness).
    transition: none on descendants prevents children with transition-all
-   from animating the inherited visibility change (CSS visibility is
-   inherited; transition-all transitions it over the child's duration
-   instead of hiding instantly). */
+   from animating the inherited visibility change. */
 .concertina-stable-slot > [inert] {
   visibility: hidden;
   opacity: 0;
@@ -1412,18 +1417,20 @@ var Bellows = (0, import_react11.forwardRef)(
 // src/components/slot.tsx
 var import_react12 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
+var HIDDEN_STYLE = { visibility: "hidden", opacity: 0 };
 var Slot = (0, import_react12.forwardRef)(
   function Slot2({ active, note, as: Tag = "div", style, children, ...props }, ref) {
     (0, import_react12.useInsertionEffect)(injectStyles, []);
     (0, import_react12.useContext)(AxisContext);
     const activeNote = (0, import_react12.useContext)(ActiveNoteContext);
-    const isActive = active ?? (note != null && activeNote != null ? note === activeNote : true);
+    const isActive = active ?? (note != null ? note === activeNote : true);
+    const merged = isActive ? style : style ? { ...style, ...HIDDEN_STYLE } : HIDDEN_STYLE;
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       Tag,
       {
         ref,
         inert: !isActive || void 0,
-        style,
+        style: merged,
         ...props,
         children
       }
@@ -1432,34 +1439,49 @@ var Slot = (0, import_react12.forwardRef)(
 );
 
 // src/components/hum.tsx
+var import_react14 = require("react");
+
+// src/components/vamp.tsx
 var import_react13 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var Hum = (0, import_react13.forwardRef)(
+var VampContext = (0, import_react13.createContext)(false);
+function useVamp() {
+  return (0, import_react13.useContext)(VampContext);
+}
+function Vamp({ loading, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(VampContext.Provider, { value: loading, children });
+}
+
+// src/components/hum.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Hum = (0, import_react14.forwardRef)(
   function Hum2({ loading, as: Tag = "span", className, children, ...props }, ref) {
-    (0, import_react13.useInsertionEffect)(injectStyles, []);
-    if (loading) {
+    (0, import_react14.useInsertionEffect)(injectStyles, []);
+    const vampLoading = useVamp();
+    const isLoading = loading ?? vampLoading;
+    if (isLoading) {
       const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Tag, { ref, className: merged, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Tag, { inert: true, children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { ref, className: merged, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { inert: true, children }) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Tag, { ref, className, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { ref, className, ...props, children });
   }
 );
 
-// src/components/ensemble.tsx
+// src/components/overture.tsx
 var import_react18 = require("react");
 
 // src/components/gigbag.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/primitives/use-stable-slot.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 var RATCHET_FLOOR = -Infinity;
 function useStableSlot(options = {}) {
   const { axis = "both" } = options;
-  const [style, setStyle] = (0, import_react14.useState)({});
-  const maxRef = (0, import_react14.useRef)({ w: RATCHET_FLOOR, h: RATCHET_FLOOR });
-  const observerRef = (0, import_react14.useRef)(null);
-  const ref = (0, import_react14.useCallback)(
+  const [style, setStyle] = (0, import_react15.useState)({});
+  const maxRef = (0, import_react15.useRef)({ w: RATCHET_FLOOR, h: RATCHET_FLOOR });
+  const observerRef = (0, import_react15.useRef)(null);
+  const ref = (0, import_react15.useCallback)(
     (el) => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -1506,13 +1528,13 @@ function useStableSlot(options = {}) {
 }
 
 // src/components/gigbag.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Gigbag = (0, import_react15.forwardRef)(
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Gigbag = (0, import_react16.forwardRef)(
   function Gigbag2({ axis = "height", as: Tag = "div", className, style, children, ...props }, fwdRef) {
-    (0, import_react15.useInsertionEffect)(injectStyles, []);
+    (0, import_react16.useInsertionEffect)(injectStyles, []);
     const { ref: ratchetRef, style: ratchetStyle } = useStableSlot({ axis });
     const merged = className ? `concertina-gigbag ${className}` : "concertina-gigbag";
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       Tag,
       {
         ref: mergeRefs(ratchetRef, fwdRef),
@@ -1525,32 +1547,6 @@ var Gigbag = (0, import_react15.forwardRef)(
   }
 );
 
-// src/components/warmup.tsx
-var import_react16 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Warmup = (0, import_react16.forwardRef)(
-  function Warmup2({ rows, columns, as: Tag = "div", className, children, ...props }, ref) {
-    (0, import_react16.useInsertionEffect)(injectStyles, []);
-    const merged = className ? `concertina-warmup ${className}` : "concertina-warmup";
-    const count2 = columns ? rows * columns : rows;
-    const cells = Array.from({ length: count2 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "concertina-warmup-bone", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "concertina-warmup-line" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "concertina-warmup-line" })
-    ] }, i));
-    const gridStyle = columns ? { gridTemplateColumns: `repeat(${columns}, auto)`, gridTemplateAreas: `'${"chamber ".repeat(columns).trim()}'` } : { gridTemplateAreas: "'chamber'" };
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      Tag,
-      {
-        ref,
-        className: merged,
-        style: gridStyle,
-        ...props,
-        children: cells
-      }
-    );
-  }
-);
-
 // src/primitives/use-warmup-exit.ts
 var import_react17 = require("react");
 function useWarmupExit(loading, duration) {
@@ -1573,8 +1569,48 @@ function useWarmupExit(loading, duration) {
   };
 }
 
-// src/components/ensemble.tsx
+// src/components/overture.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
+var Overture = (0, import_react18.forwardRef)(
+  function Overture2({ loading, exitDuration, as: Tag = "div", className, children, ...props }, ref) {
+    (0, import_react18.useInsertionEffect)(injectStyles, []);
+    const { showWarmup, exiting } = useWarmupExit(loading, exitDuration);
+    const merged = exiting ? className ? `concertina-warmup-exiting ${className}` : "concertina-warmup-exiting" : className;
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Gigbag, { ref, axis: "height", as: Tag, className: merged, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Vamp, { loading: showWarmup, children }) });
+  }
+);
+
+// src/components/ensemble.tsx
+var import_react20 = require("react");
+
+// src/components/warmup.tsx
+var import_react19 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Warmup = (0, import_react19.forwardRef)(
+  function Warmup2({ rows, columns, as: Tag = "div", className, children, ...props }, ref) {
+    (0, import_react19.useInsertionEffect)(injectStyles, []);
+    const merged = className ? `concertina-warmup ${className}` : "concertina-warmup";
+    const count2 = columns ? rows * columns : rows;
+    const cells = Array.from({ length: count2 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "concertina-warmup-bone", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "concertina-warmup-line" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "concertina-warmup-line" })
+    ] }, i));
+    const gridStyle = columns ? { gridTemplateColumns: `repeat(${columns}, auto)`, gridTemplateAreas: `'${"chamber ".repeat(columns).trim()}'` } : { gridTemplateAreas: "'chamber'" };
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      Tag,
+      {
+        ref,
+        className: merged,
+        style: gridStyle,
+        ...props,
+        children: cells
+      }
+    );
+  }
+);
+
+// src/components/ensemble.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function EnsembleInner({
   items,
   loading,
@@ -1585,33 +1621,33 @@ function EnsembleInner({
   className,
   ...props
 }, ref) {
-  (0, import_react18.useInsertionEffect)(injectStyles, []);
+  (0, import_react20.useInsertionEffect)(injectStyles, []);
   const { showWarmup, exiting } = useWarmupExit(loading, exitDuration);
   const warmupClass = exiting ? className ? `concertina-warmup-exiting ${className}` : "concertina-warmup-exiting" : className;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Gigbag, { ref, axis: "height", as: Tag, ...props, children: showWarmup ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Warmup, { rows: stubCount, className: warmupClass }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tag, { className, children: items.map(renderItem) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Gigbag, { ref, axis: "height", as: Tag, ...props, children: showWarmup ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Warmup, { rows: stubCount, className: warmupClass }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tag, { className, children: items.map(renderItem) }) });
 }
-var Ensemble = (0, import_react18.forwardRef)(EnsembleInner);
+var Ensemble = (0, import_react20.forwardRef)(EnsembleInner);
 
 // src/components/warmup-line.tsx
-var import_react19 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var WarmupLine = (0, import_react19.forwardRef)(
+var import_react21 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var WarmupLine = (0, import_react21.forwardRef)(
   function WarmupLine2({ as: Tag = "div", className, ...props }, ref) {
-    (0, import_react19.useInsertionEffect)(injectStyles, []);
+    (0, import_react21.useInsertionEffect)(injectStyles, []);
     const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tag, { ref, className: merged, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Tag, { ref, className: merged, ...props });
   }
 );
 
 // src/components/glide.tsx
-var import_react21 = require("react");
+var import_react23 = require("react");
 
 // src/primitives/use-presence.ts
-var import_react20 = require("react");
+var import_react22 = require("react");
 function usePresence2(show) {
-  const [mounted, setMounted] = (0, import_react20.useState)(show);
-  const [phase, setPhase] = (0, import_react20.useState)(show ? "entered" : "exiting");
-  (0, import_react20.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react22.useState)(show);
+  const [phase, setPhase] = (0, import_react22.useState)(show ? "entered" : "exiting");
+  (0, import_react22.useEffect)(() => {
     if (show) {
       setMounted(true);
       setPhase("entering");
@@ -1619,7 +1655,7 @@ function usePresence2(show) {
       setPhase("exiting");
     }
   }, [show]);
-  const onAnimationEnd = (0, import_react20.useCallback)(
+  const onAnimationEnd = (0, import_react22.useCallback)(
     (e) => {
       if (e.target !== e.currentTarget) return;
       if (phase === "entering") setPhase("entered");
@@ -1631,15 +1667,15 @@ function usePresence2(show) {
 }
 
 // src/components/glide.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var Glide = (0, import_react21.forwardRef)(
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Glide = (0, import_react23.forwardRef)(
   function Glide2({ show, as: Tag = "div", className, children, ...props }, ref) {
-    (0, import_react21.useInsertionEffect)(injectStyles, []);
+    (0, import_react23.useInsertionEffect)(injectStyles, []);
     const { mounted, phase, onAnimationEnd } = usePresence2(show);
     if (!mounted) return null;
     const phaseClass = phase === "entering" ? "concertina-glide-entering" : phase === "exiting" ? "concertina-glide-exiting" : "";
     const merged = ["concertina-glide", phaseClass, className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       Tag,
       {
         ref,
@@ -1653,12 +1689,12 @@ var Glide = (0, import_react21.forwardRef)(
 );
 
 // src/primitives/use-size.ts
-var import_react22 = require("react");
+var import_react24 = require("react");
 var NO_OBSERVATION = { width: Number.NaN, height: Number.NaN };
 function useSize() {
-  const [size, setSize] = (0, import_react22.useState)(NO_OBSERVATION);
-  const observerRef = (0, import_react22.useRef)(null);
-  const ref = (0, import_react22.useCallback)((el) => {
+  const [size, setSize] = (0, import_react24.useState)(NO_OBSERVATION);
+  const observerRef = (0, import_react24.useRef)(null);
+  const ref = (0, import_react24.useCallback)((el) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -1687,12 +1723,12 @@ function useSize() {
 }
 
 // src/accordion/use-concertina.ts
-var import_react23 = require("react");
+var import_react25 = require("react");
 function useConcertina() {
-  const [value, setValue] = (0, import_react23.useState)("");
-  const [switching, setSwitching] = (0, import_react23.useState)(false);
-  const itemRefs = (0, import_react23.useRef)({});
-  const onValueChange = (0, import_react23.useCallback)(
+  const [value, setValue] = (0, import_react25.useState)("");
+  const [switching, setSwitching] = (0, import_react25.useState)(false);
+  const itemRefs = (0, import_react25.useRef)({});
+  const onValueChange = (0, import_react25.useCallback)(
     (newValue) => {
       if (!newValue) {
         setSwitching(false);
@@ -1704,14 +1740,14 @@ function useConcertina() {
     },
     [value]
   );
-  (0, import_react23.useLayoutEffect)(() => {
+  (0, import_react25.useLayoutEffect)(() => {
     if (!value) return;
     pinToScrollTop(itemRefs.current[value]);
   }, [value]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (switching) setSwitching(false);
   }, [switching]);
-  const getItemRef = (0, import_react23.useCallback)(
+  const getItemRef = (0, import_react25.useCallback)(
     (id) => (el) => {
       itemRefs.current[id] = el;
     },
@@ -1736,12 +1772,15 @@ function useConcertina() {
   Header,
   Hum,
   Item,
+  Overture,
   Root,
   Slot,
   StableCollection,
   StableSlot,
   StableText,
   Trigger,
+  Vamp,
+  VampContext,
   Warmup,
   WarmupLine,
   pinToScrollTop,
@@ -1752,5 +1791,6 @@ function useConcertina() {
   useSize,
   useStableSlot,
   useTransitionLock,
+  useVamp,
   useWarmupExit
 });

package/dist/index.d.cts

@@ -2,6 +2,7 @@ export { ConcertinaContext, ConcertinaRootProps, ConcertinaStore, Content, Item,
 export { Header, Trigger } from '@radix-ui/react-accordion';
 import * as react from 'react';
 import { HTMLAttributes, ElementType, ReactNode, Ref, ReactElement, AnimationEvent, DependencyList, CSSProperties } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type Axis = "width" | "height" | "both";
 interface BellowsProps extends HTMLAttributes<HTMLElement> {
@@ -34,15 +35,18 @@ interface SlotProps extends HTMLAttributes<HTMLElement> {
  * All slots overlap via CSS grid. Inactive slots are hidden
  * but still contribute to grid cell sizing.
  *
- * Inactive hiding is handled entirely by CSS via the [inert] attribute:
- *   .concertina-stable-slot > [inert] { visibility: hidden; opacity: 0; }
- * No inline style overrides needed — injectStyles guarantees the rules exist.
+ * Inactive hiding uses inline styles (can't be overridden by CSS cascade)
+ * plus the [inert] attribute for accessibility (non-focusable, non-interactive).
+ * CSS `.concertina-stable-slot > [inert]` serves as a backup.
  */
 declare const Slot: react.ForwardRefExoticComponent<SlotProps & react.RefAttributes<HTMLElement>>;
 
 interface HumProps extends HTMLAttributes<HTMLElement> {
-    /** Whether data is loading. Shows shimmer when true, children when false. */
-    loading: boolean;
+    /**
+     * Whether data is loading. Shows shimmer when true, children when false.
+     * When omitted, falls back to the nearest `<Vamp>` ancestor's loading state.
+     */
+    loading?: boolean;
     /** HTML element to render. Default: "span". */
     as?: ElementType;
 }
@@ -56,9 +60,63 @@ interface HumProps extends HTMLAttributes<HTMLElement> {
  *
  * The className is passed through so `1lh` inherits the correct font
  * metrics from the consuming context.
+ *
+ * When no explicit `loading` prop is provided, Hum reads from the
+ * nearest `<Vamp>` ancestor. This lets a single provider control
+ * shimmer state for an entire subtree.
  */
 declare const Hum: react.ForwardRefExoticComponent<HumProps & react.RefAttributes<HTMLElement>>;
 
+/** Context carrying the ambient loading state set by Vamp. */
+declare const VampContext: react.Context<boolean>;
+/**
+ * Read the nearest Vamp's loading state.
+ * Returns `false` when no Vamp ancestor exists.
+ */
+declare function useVamp(): boolean;
+interface VampProps {
+    /** Whether the subtree is in a loading/warmup state. */
+    loading: boolean;
+    children: ReactNode;
+}
+/**
+ * Ambient loading provider — musical "vamping" (repeating a pattern
+ * while waiting for a cue).
+ *
+ * Wrapping a subtree in `<Vamp loading>` lets every nested `<Hum>`
+ * pick up the loading state automatically, without threading an
+ * explicit `loading` prop through every cell.
+ */
+declare function Vamp({ loading, children }: VampProps): react_jsx_runtime.JSX.Element;
+
+interface OvertureProps extends HTMLAttributes<HTMLElement> {
+    /** Whether data is loading. Sets Vamp context for all nested Hum instances. */
+    loading: boolean;
+    /** Exit animation duration in ms. Must match CSS --concertina-close-duration. */
+    exitDuration: number;
+    /** HTML element to render. Default: "div". */
+    as?: ElementType;
+}
+/**
+ * Loading-aware subtree wrapper — the opening act before the real content.
+ *
+ * Composes three behaviors into one component:
+ * - **Vamp** context: every nested `<Hum>` reads loading state automatically.
+ * - **Gigbag** ratchet: container never shrinks during the shimmer-to-content swap.
+ * - **Exit transition**: applies `concertina-warmup-exiting` class during the
+ *   fade-out so shimmer lines animate before real content mounts.
+ *
+ * Write one JSX tree for both states. Hum instances handle the visual toggle.
+ *
+ * ```tsx
+ * <Overture loading={isLoading} exitDuration={150}>
+ *   <h2><Hum className="text-xl">{user?.name}</Hum></h2>
+ *   <p><Hum className="text-sm">{user?.bio}</Hum></p>
+ * </Overture>
+ * ```
+ */
+declare const Overture: react.ForwardRefExoticComponent<OvertureProps & react.RefAttributes<HTMLElement>>;
+
 interface EnsembleProps<T> extends Omit<HTMLAttributes<HTMLElement>, "children"> {
     /** Data items to render. */
     items: T[];
@@ -286,4 +344,4 @@ declare function useWarmupExit(loading: boolean, duration: number): {
     exiting: boolean;
 };
 
-export { type Axis, Bellows, type BellowsProps, Ensemble, type EnsembleProps, Gigbag, type GigbagProps, Glide, type GlideProps, Hum, type HumProps, type Phase, type Size, Slot, type SlotProps, Ensemble as StableCollection, type EnsembleProps as StableCollectionProps, Bellows as StableSlot, type BellowsProps as StableSlotProps, Hum as StableText, type HumProps as StableTextProps, type UsePresenceReturn, Warmup, WarmupLine, type WarmupLineProps, type WarmupProps, pinToScrollTop, usePresence, useScrollPin, useSize, useStableSlot, useTransitionLock, useWarmupExit };
+export { type Axis, Bellows, type BellowsProps, Ensemble, type EnsembleProps, Gigbag, type GigbagProps, Glide, type GlideProps, Hum, type HumProps, Overture, type OvertureProps, type Phase, type Size, Slot, type SlotProps, Ensemble as StableCollection, type EnsembleProps as StableCollectionProps, Bellows as StableSlot, type BellowsProps as StableSlotProps, Hum as StableText, type HumProps as StableTextProps, type UsePresenceReturn, Vamp, VampContext, type VampProps, Warmup, WarmupLine, type WarmupLineProps, type WarmupProps, pinToScrollTop, usePresence, useScrollPin, useSize, useStableSlot, useTransitionLock, useVamp, useWarmupExit };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { ConcertinaContext, ConcertinaRootProps, ConcertinaStore, Content, Item,
 export { Header, Trigger } from '@radix-ui/react-accordion';
 import * as react from 'react';
 import { HTMLAttributes, ElementType, ReactNode, Ref, ReactElement, AnimationEvent, DependencyList, CSSProperties } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type Axis = "width" | "height" | "both";
 interface BellowsProps extends HTMLAttributes<HTMLElement> {
@@ -34,15 +35,18 @@ interface SlotProps extends HTMLAttributes<HTMLElement> {
  * All slots overlap via CSS grid. Inactive slots are hidden
  * but still contribute to grid cell sizing.
  *
- * Inactive hiding is handled entirely by CSS via the [inert] attribute:
- *   .concertina-stable-slot > [inert] { visibility: hidden; opacity: 0; }
- * No inline style overrides needed — injectStyles guarantees the rules exist.
+ * Inactive hiding uses inline styles (can't be overridden by CSS cascade)
+ * plus the [inert] attribute for accessibility (non-focusable, non-interactive).
+ * CSS `.concertina-stable-slot > [inert]` serves as a backup.
  */
 declare const Slot: react.ForwardRefExoticComponent<SlotProps & react.RefAttributes<HTMLElement>>;
 
 interface HumProps extends HTMLAttributes<HTMLElement> {
-    /** Whether data is loading. Shows shimmer when true, children when false. */
-    loading: boolean;
+    /**
+     * Whether data is loading. Shows shimmer when true, children when false.
+     * When omitted, falls back to the nearest `<Vamp>` ancestor's loading state.
+     */
+    loading?: boolean;
     /** HTML element to render. Default: "span". */
     as?: ElementType;
 }
@@ -56,9 +60,63 @@ interface HumProps extends HTMLAttributes<HTMLElement> {
  *
  * The className is passed through so `1lh` inherits the correct font
  * metrics from the consuming context.
+ *
+ * When no explicit `loading` prop is provided, Hum reads from the
+ * nearest `<Vamp>` ancestor. This lets a single provider control
+ * shimmer state for an entire subtree.
  */
 declare const Hum: react.ForwardRefExoticComponent<HumProps & react.RefAttributes<HTMLElement>>;
 
+/** Context carrying the ambient loading state set by Vamp. */
+declare const VampContext: react.Context<boolean>;
+/**
+ * Read the nearest Vamp's loading state.
+ * Returns `false` when no Vamp ancestor exists.
+ */
+declare function useVamp(): boolean;
+interface VampProps {
+    /** Whether the subtree is in a loading/warmup state. */
+    loading: boolean;
+    children: ReactNode;
+}
+/**
+ * Ambient loading provider — musical "vamping" (repeating a pattern
+ * while waiting for a cue).
+ *
+ * Wrapping a subtree in `<Vamp loading>` lets every nested `<Hum>`
+ * pick up the loading state automatically, without threading an
+ * explicit `loading` prop through every cell.
+ */
+declare function Vamp({ loading, children }: VampProps): react_jsx_runtime.JSX.Element;
+
+interface OvertureProps extends HTMLAttributes<HTMLElement> {
+    /** Whether data is loading. Sets Vamp context for all nested Hum instances. */
+    loading: boolean;
+    /** Exit animation duration in ms. Must match CSS --concertina-close-duration. */
+    exitDuration: number;
+    /** HTML element to render. Default: "div". */
+    as?: ElementType;
+}
+/**
+ * Loading-aware subtree wrapper — the opening act before the real content.
+ *
+ * Composes three behaviors into one component:
+ * - **Vamp** context: every nested `<Hum>` reads loading state automatically.
+ * - **Gigbag** ratchet: container never shrinks during the shimmer-to-content swap.
+ * - **Exit transition**: applies `concertina-warmup-exiting` class during the
+ *   fade-out so shimmer lines animate before real content mounts.
+ *
+ * Write one JSX tree for both states. Hum instances handle the visual toggle.
+ *
+ * ```tsx
+ * <Overture loading={isLoading} exitDuration={150}>
+ *   <h2><Hum className="text-xl">{user?.name}</Hum></h2>
+ *   <p><Hum className="text-sm">{user?.bio}</Hum></p>
+ * </Overture>
+ * ```
+ */
+declare const Overture: react.ForwardRefExoticComponent<OvertureProps & react.RefAttributes<HTMLElement>>;
+
 interface EnsembleProps<T> extends Omit<HTMLAttributes<HTMLElement>, "children"> {
     /** Data items to render. */
     items: T[];
@@ -286,4 +344,4 @@ declare function useWarmupExit(loading: boolean, duration: number): {
     exiting: boolean;
 };
 
-export { type Axis, Bellows, type BellowsProps, Ensemble, type EnsembleProps, Gigbag, type GigbagProps, Glide, type GlideProps, Hum, type HumProps, type Phase, type Size, Slot, type SlotProps, Ensemble as StableCollection, type EnsembleProps as StableCollectionProps, Bellows as StableSlot, type BellowsProps as StableSlotProps, Hum as StableText, type HumProps as StableTextProps, type UsePresenceReturn, Warmup, WarmupLine, type WarmupLineProps, type WarmupProps, pinToScrollTop, usePresence, useScrollPin, useSize, useStableSlot, useTransitionLock, useWarmupExit };
+export { type Axis, Bellows, type BellowsProps, Ensemble, type EnsembleProps, Gigbag, type GigbagProps, Glide, type GlideProps, Hum, type HumProps, Overture, type OvertureProps, type Phase, type Size, Slot, type SlotProps, Ensemble as StableCollection, type EnsembleProps as StableCollectionProps, Bellows as StableSlot, type BellowsProps as StableSlotProps, Hum as StableText, type HumProps as StableTextProps, type UsePresenceReturn, Vamp, VampContext, type VampProps, Warmup, WarmupLine, type WarmupLineProps, type WarmupProps, pinToScrollTop, usePresence, useScrollPin, useSize, useStableSlot, useTransitionLock, useVamp, useWarmupExit };

package/dist/index.js

@@ -13,7 +13,7 @@ import {
   useExpanded,
   useScrollPin,
   useTransitionLock
-} from "./chunk-4DDADLSW.js";
+} from "./chunk-OGJMPKZX.js";
 
 // src/components/bellows.tsx
 import {
@@ -39,18 +39,20 @@ import {
   useInsertionEffect as useInsertionEffect2
 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
+var HIDDEN_STYLE = { visibility: "hidden", opacity: 0 };
 var Slot = forwardRef2(
   function Slot2({ active, note, as: Tag = "div", style, children, ...props }, ref) {
     useInsertionEffect2(injectStyles, []);
     useContext(AxisContext);
     const activeNote = useContext(ActiveNoteContext);
-    const isActive = active ?? (note != null && activeNote != null ? note === activeNote : true);
+    const isActive = active ?? (note != null ? note === activeNote : true);
+    const merged = isActive ? style : style ? { ...style, ...HIDDEN_STYLE } : HIDDEN_STYLE;
     return /* @__PURE__ */ jsx2(
       Tag,
       {
         ref,
         inert: !isActive || void 0,
-        style,
+        style: merged,
         ...props,
         children
       }
@@ -63,22 +65,37 @@ import {
   forwardRef as forwardRef3,
   useInsertionEffect as useInsertionEffect3
 } from "react";
+
+// src/components/vamp.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
+var VampContext = createContext2(false);
+function useVamp() {
+  return useContext2(VampContext);
+}
+function Vamp({ loading, children }) {
+  return /* @__PURE__ */ jsx3(VampContext.Provider, { value: loading, children });
+}
+
+// src/components/hum.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
 var Hum = forwardRef3(
   function Hum2({ loading, as: Tag = "span", className, children, ...props }, ref) {
     useInsertionEffect3(injectStyles, []);
-    if (loading) {
+    const vampLoading = useVamp();
+    const isLoading = loading ?? vampLoading;
+    if (isLoading) {
       const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
-      return /* @__PURE__ */ jsx3(Tag, { ref, className: merged, ...props, children: /* @__PURE__ */ jsx3(Tag, { inert: true, children }) });
+      return /* @__PURE__ */ jsx4(Tag, { ref, className: merged, ...props, children: /* @__PURE__ */ jsx4(Tag, { inert: true, children }) });
     }
-    return /* @__PURE__ */ jsx3(Tag, { ref, className, ...props, children });
+    return /* @__PURE__ */ jsx4(Tag, { ref, className, ...props, children });
   }
 );
 
-// src/components/ensemble.tsx
+// src/components/overture.tsx
 import {
-  forwardRef as forwardRef6,
-  useInsertionEffect as useInsertionEffect6
+  forwardRef as forwardRef5,
+  useInsertionEffect as useInsertionEffect5
 } from "react";
 
 // src/components/gigbag.tsx
@@ -139,13 +156,13 @@ function useStableSlot(options = {}) {
 }
 
 // src/components/gigbag.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var Gigbag = forwardRef4(
   function Gigbag2({ axis = "height", as: Tag = "div", className, style, children, ...props }, fwdRef) {
     useInsertionEffect4(injectStyles, []);
     const { ref: ratchetRef, style: ratchetStyle } = useStableSlot({ axis });
     const merged = className ? `concertina-gigbag ${className}` : "concertina-gigbag";
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx5(
       Tag,
       {
         ref: mergeRefs(ratchetRef, fwdRef),
@@ -158,32 +175,6 @@ var Gigbag = forwardRef4(
   }
 );
 
-// src/components/warmup.tsx
-import { forwardRef as forwardRef5, useInsertionEffect as useInsertionEffect5 } from "react";
-import { jsx as jsx5, jsxs } from "react/jsx-runtime";
-var Warmup = forwardRef5(
-  function Warmup2({ rows, columns, as: Tag = "div", className, children, ...props }, ref) {
-    useInsertionEffect5(injectStyles, []);
-    const merged = className ? `concertina-warmup ${className}` : "concertina-warmup";
-    const count = columns ? rows * columns : rows;
-    const cells = Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "concertina-warmup-bone", children: [
-      /* @__PURE__ */ jsx5("div", { className: "concertina-warmup-line" }),
-      /* @__PURE__ */ jsx5("div", { className: "concertina-warmup-line" })
-    ] }, i));
-    const gridStyle = columns ? { gridTemplateColumns: `repeat(${columns}, auto)`, gridTemplateAreas: `'${"chamber ".repeat(columns).trim()}'` } : { gridTemplateAreas: "'chamber'" };
-    return /* @__PURE__ */ jsx5(
-      Tag,
-      {
-        ref,
-        className: merged,
-        style: gridStyle,
-        ...props,
-        children: cells
-      }
-    );
-  }
-);
-
 // src/primitives/use-warmup-exit.ts
 import { useState as useState2, useEffect, useRef as useRef2 } from "react";
 function useWarmupExit(loading, duration) {
@@ -206,8 +197,51 @@ function useWarmupExit(loading, duration) {
   };
 }
 
-// src/components/ensemble.tsx
+// src/components/overture.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
+var Overture = forwardRef5(
+  function Overture2({ loading, exitDuration, as: Tag = "div", className, children, ...props }, ref) {
+    useInsertionEffect5(injectStyles, []);
+    const { showWarmup, exiting } = useWarmupExit(loading, exitDuration);
+    const merged = exiting ? className ? `concertina-warmup-exiting ${className}` : "concertina-warmup-exiting" : className;
+    return /* @__PURE__ */ jsx6(Gigbag, { ref, axis: "height", as: Tag, className: merged, ...props, children: /* @__PURE__ */ jsx6(Vamp, { loading: showWarmup, children }) });
+  }
+);
+
+// src/components/ensemble.tsx
+import {
+  forwardRef as forwardRef7,
+  useInsertionEffect as useInsertionEffect7
+} from "react";
+
+// src/components/warmup.tsx
+import { forwardRef as forwardRef6, useInsertionEffect as useInsertionEffect6 } from "react";
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+var Warmup = forwardRef6(
+  function Warmup2({ rows, columns, as: Tag = "div", className, children, ...props }, ref) {
+    useInsertionEffect6(injectStyles, []);
+    const merged = className ? `concertina-warmup ${className}` : "concertina-warmup";
+    const count = columns ? rows * columns : rows;
+    const cells = Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "concertina-warmup-bone", children: [
+      /* @__PURE__ */ jsx7("div", { className: "concertina-warmup-line" }),
+      /* @__PURE__ */ jsx7("div", { className: "concertina-warmup-line" })
+    ] }, i));
+    const gridStyle = columns ? { gridTemplateColumns: `repeat(${columns}, auto)`, gridTemplateAreas: `'${"chamber ".repeat(columns).trim()}'` } : { gridTemplateAreas: "'chamber'" };
+    return /* @__PURE__ */ jsx7(
+      Tag,
+      {
+        ref,
+        className: merged,
+        style: gridStyle,
+        ...props,
+        children: cells
+      }
+    );
+  }
+);
+
+// src/components/ensemble.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
 function EnsembleInner({
   items,
   loading,
@@ -218,28 +252,28 @@ function EnsembleInner({
   className,
   ...props
 }, ref) {
-  useInsertionEffect6(injectStyles, []);
+  useInsertionEffect7(injectStyles, []);
   const { showWarmup, exiting } = useWarmupExit(loading, exitDuration);
   const warmupClass = exiting ? className ? `concertina-warmup-exiting ${className}` : "concertina-warmup-exiting" : className;
-  return /* @__PURE__ */ jsx6(Gigbag, { ref, axis: "height", as: Tag, ...props, children: showWarmup ? /* @__PURE__ */ jsx6(Warmup, { rows: stubCount, className: warmupClass }) : /* @__PURE__ */ jsx6(Tag, { className, children: items.map(renderItem) }) });
+  return /* @__PURE__ */ jsx8(Gigbag, { ref, axis: "height", as: Tag, ...props, children: showWarmup ? /* @__PURE__ */ jsx8(Warmup, { rows: stubCount, className: warmupClass }) : /* @__PURE__ */ jsx8(Tag, { className, children: items.map(renderItem) }) });
 }
-var Ensemble = forwardRef6(EnsembleInner);
+var Ensemble = forwardRef7(EnsembleInner);
 
 // src/components/warmup-line.tsx
-import { forwardRef as forwardRef7, useInsertionEffect as useInsertionEffect7 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var WarmupLine = forwardRef7(
+import { forwardRef as forwardRef8, useInsertionEffect as useInsertionEffect8 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var WarmupLine = forwardRef8(
   function WarmupLine2({ as: Tag = "div", className, ...props }, ref) {
-    useInsertionEffect7(injectStyles, []);
+    useInsertionEffect8(injectStyles, []);
     const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
-    return /* @__PURE__ */ jsx7(Tag, { ref, className: merged, ...props });
+    return /* @__PURE__ */ jsx9(Tag, { ref, className: merged, ...props });
   }
 );
 
 // src/components/glide.tsx
 import {
-  forwardRef as forwardRef8,
-  useInsertionEffect as useInsertionEffect8
+  forwardRef as forwardRef9,
+  useInsertionEffect as useInsertionEffect9
 } from "react";
 
 // src/primitives/use-presence.ts
@@ -271,15 +305,15 @@ function usePresence(show) {
 }
 
 // src/components/glide.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Glide = forwardRef8(
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Glide = forwardRef9(
   function Glide2({ show, as: Tag = "div", className, children, ...props }, ref) {
-    useInsertionEffect8(injectStyles, []);
+    useInsertionEffect9(injectStyles, []);
     const { mounted, phase, onAnimationEnd } = usePresence(show);
     if (!mounted) return null;
     const phaseClass = phase === "entering" ? "concertina-glide-entering" : phase === "exiting" ? "concertina-glide-exiting" : "";
     const merged = ["concertina-glide", phaseClass, className].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx10(
       Tag,
       {
         ref,
@@ -336,12 +370,15 @@ export {
   Header,
   Hum,
   Item,
+  Overture,
   Root,
   Slot,
   Ensemble as StableCollection,
   Bellows as StableSlot,
   Hum as StableText,
   Trigger2 as Trigger,
+  Vamp,
+  VampContext,
   Warmup,
   WarmupLine,
   pinToScrollTop,
@@ -352,5 +389,6 @@ export {
   useSize,
   useStableSlot,
   useTransitionLock,
+  useVamp,
   useWarmupExit
 };

package/dist/styles.css

@@ -67,12 +67,13 @@
 }
 
 /* Inactive Slot hiding — belt and suspenders.
-   Inline style sets visibility: hidden + opacity: 0 on the Slot div.
-   CSS backup catches edge cases where inline styles are overridden.
+   Primary: inline style on the Slot element (visibility: hidden + opacity: 0).
+   Inline styles can't be overridden by any CSS cascade — this is the
+   bulletproof layer.
+   Backup: CSS rules below catch edge cases (e.g. if inline styles are
+   stripped by a framework or test harness).
    transition: none on descendants prevents children with transition-all
-   from animating the inherited visibility change (CSS visibility is
-   inherited; transition-all transitions it over the child's duration
-   instead of hiding instantly). */
+   from animating the inherited visibility change. */
 .concertina-stable-slot > [inert] {
   visibility: hidden;
   opacity: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "concertina",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "React toolkit for layout stability.",
   "type": "module",
   "main": "./dist/index.cjs",