@camp.dev/bones 0.3.0 → 0.4.1

package/README.md

@@ -14,7 +14,7 @@ Bones skips the duplication. You write your markup once and it handles both stat
 
 - Works in Server Components. No hooks, no context, no `'use client'`.
 - One component handles both loading and loaded states.
-- Pass a promise as a prop. Bones wires up Suspense for you.
+- Pass data or a promise. A pending promise suspends to your `<Suspense>` boundary; `forceBones` renders the skeleton.
 - Skeletons are pure CSS, themed with custom properties.
 - Loading elements get `aria-busy="true"` automatically.
 
@@ -34,7 +34,7 @@ import "@camp.dev/bones/css";
 
 | Import                     | Contents                                                                                                                                                                                                                   |
 | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@camp.dev/bones/react`    | `createBones`, `readPromise`, `forceBones`, `minMax`, `<Bones>`, `<BonesForce>`                                                                                                                                            |
+| `@camp.dev/bones/react`    | `createBones`, `readPromise`, `forceBones`, `minMax`, `isMinMax`, `BonesBoundary`                                                                                                                                          |
 | `@camp.dev/bones/css`      | The skeleton stylesheet. Import once in your root layout.                                                                                                                                                                  |
 | `@camp.dev/bones/auto.css` | Skeletonizes unmarked leaves under `aria-busy="true"`. Imports the base stylesheet itself, so a separate `/css` import is optional.                                                                                        |
 | `@camp.dev/bones/element`  | `<bones-boundary>`, a custom element that sets `aria-busy` and `inert` on its subtree with `delay`, `min-duration`, and a crossfade. `precision="measured"` draws pixel-accurate per-line bones measured from the content. |
@@ -65,21 +65,23 @@ function ProfileCard({ user }: { user: Promise<User> | User }) {
 }
 ```
 
-Wrap components that receive promises in `<Bones>`. It creates a Suspense boundary and generates the skeleton fallback for you:
+Pass the promise to the component, and reuse the same component with `forceBones` as the fallback:
 
 ```tsx
-import { Bones } from "@camp.dev/bones/react";
+import { forceBones } from "@camp.dev/bones/react";
+import { Suspense } from "react";
 
 export default function Page() {
+  const user = fetchUser();
   return (
-    <Bones>
-      <ProfileCard user={fetchUser()} />
-    </Bones>
+    <Suspense fallback={<ProfileCard user={forceBones} />}>
+      <ProfileCard user={user} />
+    </Suspense>
   );
 }
 ```
 
-While the promise is pending, `<Bones>` renders the same `<ProfileCard>` tree with skeletons visible. Once it resolves, the real content swaps in.
+While the promise is pending, the fallback renders `<ProfileCard>` with skeletons visible. Once it resolves, the real content swaps in. There is no separate skeleton component to keep in sync — the fallback is the component.
 
 ## Bone types
 
@@ -99,17 +101,21 @@ import { createBones, forceBones } from "@camp.dev/bones/react";
 <ProfileCard user={forceBones} />;
 ```
 
-To force an entire subtree into skeleton mode at once, wrap it with `<BonesForce>`:
+To force a subtree into skeleton mode at once, pass `forceBones` to each component in it:
 
 ```tsx
-import { BonesForce } from "@camp.dev/bones/react";
+<ProfileCard user={forceBones} />
+<PostList posts={forceBones} />
+```
+
+`forceBones` only forces the component it's passed to. A component that derives child props from its own data must forward it itself, such as `PostList` mapping items into cards. `repeat` yields `undefined` for items that don't exist yet:
 
-<BonesForce>
-  <ProfileCard />
-  <PostList />
-</BonesForce>;
+```tsx
+<PostCard key={item?.id ?? i} post={item ?? forceBones} />
 ```
 
+For content that has no bone markup at all, wrap it in [`<bones-boundary force>`](https://github.com/campdotdev/bones/blob/main/apps/docs/content/docs/api/bones-boundary.mdx) and let `auto.css` draw leaf bones.
+
 ## Automatic skeletons
 
 For markup you haven't wired up with `bone()` — third-party components, server-rendered HTML, anything without explicit attributes — import the auto stylesheet. It imports `/css` itself, so this one file is a complete setup:
@@ -127,9 +133,9 @@ Set `aria-busy="true"` on the loading region and every unmarked leaf inside it b
 </section>
 ```
 
-`[data-bones-auto="off"]` opts a subtree out — useful for a status message you want to stay readable while its container skeletonizes. Explicit `data-bone` markup is left alone; `auto.css` only styles elements neither `bone()` nor a manual `data-bone` attribute has already claimed.
+`[data-bones-auto="off"]` opts a subtree out — useful for a status message you want to stay readable while its container skeletonizes. Images, canvas, and video without native controls get a solid bone even after they have loaded, unless page CSS sets `object-position` on them, which outranks the layered rule the same way `color` does. A loaded `iframe`, `embed`, or `object` still shows its content, because those elements ignore `object-position`. Explicit `data-bone` markup is left alone; `auto.css` only styles elements neither `bone()` nor a manual `data-bone` attribute has already claimed.
 
-Auto rules live in `@layer bones-auto`, so any page CSS that sets `color` on an element outranks the bone's transparent text, and that text stays visible over its skeleton bar. `data-bone-animate` also has to sit on an ancestor of the `aria-busy` element — set directly on it, it has no effect. The `data-bone-animate` overrides rely on `@scope`. In a browser without `@scope`, auto bones always shimmer, and `data-bone-animate="pulse"` and `"none"` cannot change that. The `prefers-reduced-motion` fallback to pulse still applies.
+Auto rules live in `@layer bones-auto`, so any page CSS that sets `color` on an element outranks the bone's transparent text, and that text stays visible over its skeleton bar. `data-bone-animate` works on the `aria-busy` element itself or on any ancestor. The `data-bone-animate` overrides rely on `@scope`. In a browser without `@scope`, every bone shimmers, and `data-bone-animate="pulse"` and `"none"` cannot change that. The `prefers-reduced-motion` fallback to pulse still applies.
 
 ## Without React
 

package/dist/css/auto.css

@@ -44,7 +44,7 @@
       select *,
       object *
     ) {
-    color: transparent;
+    color: rgb(from currentcolor r g b / 0);
     position: relative;
     min-width: 4ch;
     min-height: 1lh;
@@ -144,10 +144,21 @@
       progress,
       meter
     ):not([data-bone], [data-bone] *, [data-bones-auto="off"], [data-bones-auto="off"] *) {
-    color: transparent;
+    color: rgb(from currentcolor r g b / 0);
     background-color: var(--bone-base);
     border-radius: var(--bone-radius);
     border-color: transparent;
+    /* A loaded image paints over its own background, so the bone color alone
+       does not cover it. Pushing the picture out of its content box leaves
+       the box and its background in place (BON-15). Only img, video, and
+       canvas honor this; a loaded iframe, embed, or object still shows, and
+       native video controls paint over the bone. object-position is
+       interpolable, so a page `transition: all` on images would slide the
+       picture out over the transition's duration; transition: none stops
+       that on the way in. On the way out the page's own transition applies,
+       and the picture reappears at the end of it instead of the start. */
+    object-position: 9999px 0;
+    transition: none;
   }
 
   /* Width variance: text leaves cycle 85 / 100 / 92 / 60 so runs of lines
@@ -283,10 +294,13 @@
 }
 
 @layer bones-auto {
-  /* Auto bones default to shimmer. bones.css only animates inside a
-     [data-bone-animate] scope; a zero-markup page has no such attribute, so
-     the default lives here and the scopes below mirror bones.css for pages
-     that do set it. */
+  /* Auto bones default to shimmer. bones.css has its own default, but its
+     rules match [data-bone] elements only and never the unmarked leaves
+     targeted here, so the default is restated for them, and the scopes below
+     mirror bones.css for pages that set the attribute (BON-16). In those
+     scopes, :is(:scope, :scope *) lets the attribute
+     sit on the aria-busy element itself: a scoped selector's implicit :scope
+     prefix matches strict descendants only (BON-17). */
   [aria-busy="true"]
     :not(:has(*)):not(
       [data-bone],
@@ -374,7 +388,7 @@
   }
 
   @scope ([data-bone-animate="shimmer"]) to ([data-bone-animate]:not([data-bone-animate="shimmer"])) {
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -403,7 +417,7 @@
         select *,
         object *
       )::before,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -432,7 +446,7 @@
         select *,
         object *
       )::after,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :is(
         img,
         svg,
@@ -461,7 +475,7 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -490,7 +504,7 @@
           select *,
           object *
         )::before,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -519,7 +533,7 @@
           select *,
           object *
         )::after,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :is(
           img,
           svg,
@@ -544,7 +558,7 @@
     }
 
     @media (forced-colors: active) {
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -573,7 +587,7 @@
           select *,
           object *
         )::after,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :is(
           img,
           svg,
@@ -598,7 +612,7 @@
   }
 
   @scope ([data-bone-animate="pulse"]) to ([data-bone-animate]:not([data-bone-animate="pulse"])) {
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -627,7 +641,7 @@
         select *,
         object *
       )::before,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -656,7 +670,7 @@
         select *,
         object *
       )::after,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :is(
         img,
         svg,
@@ -680,7 +694,7 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -709,7 +723,7 @@
           select *,
           object *
         )::before,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -738,7 +752,7 @@
           select *,
           object *
         )::after,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :is(
           img,
           svg,
@@ -763,7 +777,7 @@
     }
 
     @media (forced-colors: active) {
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -792,7 +806,7 @@
           select *,
           object *
         )::after,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :is(
           img,
           svg,
@@ -817,7 +831,7 @@
   }
 
   @scope ([data-bone-animate="none"]) to ([data-bone-animate]:not([data-bone-animate="none"])) {
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -846,7 +860,7 @@
         select *,
         object *
       )::before,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -875,7 +889,7 @@
         select *,
         object *
       )::after,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :is(
         img,
         svg,
@@ -899,7 +913,7 @@
     }
 
     @media (forced-colors: active) {
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -928,7 +942,7 @@
           select *,
           object *
         )::after,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :is(
           img,
           svg,

package/dist/css/bones.css

@@ -1,19 +1,18 @@
 :root {
-  --bone-base: rgba(0, 0, 0, 0.12);
-  --bone-highlight: rgba(0, 0, 0, 0.06);
+  /* Bones derive their color from the text color in effect at the bone, so
+     they inherit the page's own contrast guarantee on any background in any
+     scheme (BON-13). currentColor resolves where var() is used, not here.
+     The alpha reset matters: bones hide their content by zeroing the alpha
+     of the color property (never with the transparent keyword, which would
+     discard the channels), and the mix restores it. */
+  --bone-base: color-mix(in srgb, rgb(from currentcolor r g b / 1) 12%, transparent);
+  --bone-highlight: color-mix(in srgb, rgb(from currentcolor r g b / 1) 6%, transparent);
   --bone-radius: 4px;
   --bone-duration: 1.5s;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bone-base: rgba(255, 255, 255, 0.12);
-    --bone-highlight: rgba(255, 255, 255, 0.06);
-  }
-}
-
 [data-bone="text"] {
-  color: transparent;
+  color: rgb(from currentcolor r g b / 0);
   position: relative;
   min-width: 4ch;
   min-height: 1lh;
@@ -71,8 +70,15 @@
 }
 
 img[data-bone="block"],
-video[data-bone="block"] {
-  color: transparent;
+video[data-bone="block"],
+canvas[data-bone="block"] {
+  color: rgb(from currentcolor r g b / 0);
+  /* A loaded picture paints over the bone's background-color; pushing it out
+     of the content box keeps the box and background visible (BON-15).
+     transition: none keeps a page `transition: all` from sliding the picture
+     out on the way in; see the matching comment in auto.css. */
+  object-position: 9999px 0;
+  transition: none;
 }
 
 [data-bone="container"] {
@@ -111,11 +117,43 @@ video[data-bone="block"] {
   }
 }
 
-@scope ([data-bone-animate="shimmer"]) to ([data-bone-animate]:not([data-bone-animate="shimmer"])) {
+/* Marked bones shimmer by default, the same as auto bones and the measured
+   overlay (BON-16). data-bone-animate="none" is the opt-out; the @scope
+   blocks below override this at higher specificity, so their order relative
+   to this rule does not matter. */
+[data-bone="text"]::after,
+[data-bone="block"],
+[data-bone="container"]::before {
+  animation: bone-shimmer var(--bone-duration) ease-in-out infinite;
+  background: linear-gradient(
+    90deg,
+    var(--bone-base) 25%,
+    var(--bone-highlight) 50%,
+    var(--bone-base) 75%
+  );
+  background-size: 200% 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
   [data-bone="text"]::after,
-  [data-bone="text"]::before,
   [data-bone="block"],
   [data-bone="container"]::before {
+    animation: bone-pulse 2s ease-in-out infinite;
+    background: var(--bone-base);
+    background-size: auto;
+  }
+}
+
+/* :is(:scope, :scope *) lets the attribute work from the bone itself, not
+   only from a wrapper: a scoped selector's implicit :scope prefix matches
+   strict descendants only, so a plain compound never matches the scope root
+   (BON-17). The reduced-motion override sits inside each animated scope so it
+   matches at the scope's own specificity; "none" has no override because none
+   still means none. */
+@scope ([data-bone-animate="shimmer"]) to ([data-bone-animate]:not([data-bone-animate="shimmer"])) {
+  [data-bone="text"]:is(:scope, :scope *)::after,
+  [data-bone="block"]:is(:scope, :scope *),
+  [data-bone="container"]:is(:scope, :scope *)::before {
     animation: bone-shimmer var(--bone-duration) ease-in-out infinite;
     background: linear-gradient(
       90deg,
@@ -125,32 +163,42 @@ video[data-bone="block"] {
     );
     background-size: 200% 100%;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-bone="text"]:is(:scope, :scope *)::after,
+    [data-bone="block"]:is(:scope, :scope *),
+    [data-bone="container"]:is(:scope, :scope *)::before {
+      animation: bone-pulse 2s ease-in-out infinite;
+      background: var(--bone-base);
+      background-size: auto;
+    }
+  }
 }
 
 @scope ([data-bone-animate="pulse"]) to ([data-bone-animate]:not([data-bone-animate="pulse"])) {
-  [data-bone="text"]::after,
-  [data-bone="text"]::before,
-  [data-bone="block"],
-  [data-bone="container"]::before {
+  [data-bone="text"]:is(:scope, :scope *)::after,
+  [data-bone="block"]:is(:scope, :scope *),
+  [data-bone="container"]:is(:scope, :scope *)::before {
     animation: bone-pulse var(--bone-duration) ease-in-out infinite;
     background: var(--bone-base);
     background-size: auto;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-bone="text"]:is(:scope, :scope *)::after,
+    [data-bone="block"]:is(:scope, :scope *),
+    [data-bone="container"]:is(:scope, :scope *)::before {
+      animation: bone-pulse 2s ease-in-out infinite;
+    }
+  }
 }
 
 @scope ([data-bone-animate="none"]) to ([data-bone-animate]:not([data-bone-animate="none"])) {
-  [data-bone="text"]::after,
-  [data-bone="text"]::before,
-  [data-bone="block"],
-  [data-bone="container"]::before {
+  [data-bone="text"]:is(:scope, :scope *)::after,
+  [data-bone="block"]:is(:scope, :scope *),
+  [data-bone="container"]:is(:scope, :scope *)::before {
     animation: none;
     background: var(--bone-base);
     background-size: auto;
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  [aria-busy="true"] {
-    animation: bone-pulse 2s ease-in-out infinite;
-  }
-}

package/dist/element/overlay.mjs

@@ -19,7 +19,7 @@ const OVERLAY_CSS = `
 }
 [part~="bone"] {
   position: absolute;
-  background: var(--bone-base, rgba(0, 0, 0, 0.12));
+  background: var(--bone-base, color-mix(in srgb, rgb(from currentcolor r g b / 1) 12%, transparent));
   border-radius: var(--bone-radius, 4px);
 }
 @keyframes bone-shimmer {
@@ -35,9 +35,9 @@ const OVERLAY_CSS = `
   animation: bone-shimmer var(--bone-duration, 1.5s) ease-in-out infinite;
   background: linear-gradient(
     90deg,
-    var(--bone-base, rgba(0, 0, 0, 0.12)) 25%,
-    var(--bone-highlight, rgba(0, 0, 0, 0.06)) 50%,
-    var(--bone-base, rgba(0, 0, 0, 0.12)) 75%
+    var(--bone-base, color-mix(in srgb, rgb(from currentcolor r g b / 1) 12%, transparent)) 25%,
+    var(--bone-highlight, color-mix(in srgb, rgb(from currentcolor r g b / 1) 6%, transparent)) 50%,
+    var(--bone-base, color-mix(in srgb, rgb(from currentcolor r g b / 1) 12%, transparent)) 75%
   );
   background-size: 200% 100%;
 }
@@ -55,7 +55,7 @@ const OVERLAY_CSS = `
   [part~="overlay"][data-bone-animate="shimmer"] [part~="bone"],
   [part~="overlay"][data-bone-animate="pulse"] [part~="bone"] {
     animation: bone-pulse 2s ease-in-out infinite;
-    background: var(--bone-base, rgba(0, 0, 0, 0.12));
+    background: var(--bone-base, color-mix(in srgb, rgb(from currentcolor r g b / 1) 12%, transparent));
     background-size: auto;
   }
 }

package/dist/react/create-bones.mjs

@@ -1,7 +1,6 @@
 import { boneAttributes } from "../core/attributes.mjs";
-import { cache, cloneElement, createElement, isValidElement } from "react";
+import { cloneElement, createElement, isValidElement } from "react";
 //#region src/react/create-bones.ts
-const getBonesContext = cache(() => ({ loading: false }));
 function withKey(node, key) {
 	return isValidElement(node) ? cloneElement(node, { key }) : node;
 }
@@ -40,9 +39,6 @@ function createBones(dataOrOptions, maybeOptions) {
 	} else if (data != null && data === forceBones) {
 		isLoading = true;
 		resolved = void 0;
-	} else if (getBonesContext().loading) {
-		isLoading = true;
-		resolved = void 0;
 	} else if (data != null && data instanceof Promise) resolved = readPromise(data);
 	else resolved = data;
 	let boneCallIndex = 0;
@@ -70,4 +66,4 @@ function createBones(dataOrOptions, maybeOptions) {
 	};
 }
 //#endregion
-export { createBones, forceBones, getBonesContext, readPromise };
+export { createBones, forceBones, readPromise };

package/dist/react/index.d.mts

@@ -1,5 +1,4 @@
 import { BoneOptions, BoneType, MinMax, isMinMax, minMax } from "../core/attributes.mjs";
 import { CreateBonesOptions, CreateBonesReturn, createBones, forceBones, readPromise } from "./create-bones.mjs";
-import { Bones, BonesForce } from "./bones.mjs";
 import { BonesBoundary, BonesBoundaryProps } from "./boundary.mjs";
-export { type BoneOptions, type BoneType, Bones, BonesBoundary, type BonesBoundaryProps, BonesForce, type CreateBonesOptions, type CreateBonesReturn, type MinMax, createBones, forceBones, isMinMax, minMax, readPromise };
+export { type BoneOptions, type BoneType, BonesBoundary, type BonesBoundaryProps, type CreateBonesOptions, type CreateBonesReturn, type MinMax, createBones, forceBones, isMinMax, minMax, readPromise };

package/dist/react/index.mjs

@@ -1,5 +1,4 @@
 import { isMinMax, minMax } from "../core/attributes.mjs";
 import { createBones, forceBones, readPromise } from "./create-bones.mjs";
-import { Bones, BonesForce } from "./bones.mjs";
 import { BonesBoundary } from "./boundary.mjs";
-export { Bones, BonesBoundary, BonesForce, createBones, forceBones, isMinMax, minMax, readPromise };
+export { BonesBoundary, createBones, forceBones, isMinMax, minMax, readPromise };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camp.dev/bones",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Skeleton loaders designed for React Server Components and streaming.",
   "homepage": "https://github.com/campdotdev/bones#readme",
   "bugs": {

package/src/css/auto.css

@@ -44,7 +44,7 @@
       select *,
       object *
     ) {
-    color: transparent;
+    color: rgb(from currentcolor r g b / 0);
     position: relative;
     min-width: 4ch;
     min-height: 1lh;
@@ -144,10 +144,21 @@
       progress,
       meter
     ):not([data-bone], [data-bone] *, [data-bones-auto="off"], [data-bones-auto="off"] *) {
-    color: transparent;
+    color: rgb(from currentcolor r g b / 0);
     background-color: var(--bone-base);
     border-radius: var(--bone-radius);
     border-color: transparent;
+    /* A loaded image paints over its own background, so the bone color alone
+       does not cover it. Pushing the picture out of its content box leaves
+       the box and its background in place (BON-15). Only img, video, and
+       canvas honor this; a loaded iframe, embed, or object still shows, and
+       native video controls paint over the bone. object-position is
+       interpolable, so a page `transition: all` on images would slide the
+       picture out over the transition's duration; transition: none stops
+       that on the way in. On the way out the page's own transition applies,
+       and the picture reappears at the end of it instead of the start. */
+    object-position: 9999px 0;
+    transition: none;
   }
 
   /* Width variance: text leaves cycle 85 / 100 / 92 / 60 so runs of lines
@@ -283,10 +294,13 @@
 }
 
 @layer bones-auto {
-  /* Auto bones default to shimmer. bones.css only animates inside a
-     [data-bone-animate] scope; a zero-markup page has no such attribute, so
-     the default lives here and the scopes below mirror bones.css for pages
-     that do set it. */
+  /* Auto bones default to shimmer. bones.css has its own default, but its
+     rules match [data-bone] elements only and never the unmarked leaves
+     targeted here, so the default is restated for them, and the scopes below
+     mirror bones.css for pages that set the attribute (BON-16). In those
+     scopes, :is(:scope, :scope *) lets the attribute
+     sit on the aria-busy element itself: a scoped selector's implicit :scope
+     prefix matches strict descendants only (BON-17). */
   [aria-busy="true"]
     :not(:has(*)):not(
       [data-bone],
@@ -374,7 +388,7 @@
   }
 
   @scope ([data-bone-animate="shimmer"]) to ([data-bone-animate]:not([data-bone-animate="shimmer"])) {
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -403,7 +417,7 @@
         select *,
         object *
       )::before,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -432,7 +446,7 @@
         select *,
         object *
       )::after,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :is(
         img,
         svg,
@@ -461,7 +475,7 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -490,7 +504,7 @@
           select *,
           object *
         )::before,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -519,7 +533,7 @@
           select *,
           object *
         )::after,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :is(
           img,
           svg,
@@ -544,7 +558,7 @@
     }
 
     @media (forced-colors: active) {
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -573,7 +587,7 @@
           select *,
           object *
         )::after,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :is(
           img,
           svg,
@@ -598,7 +612,7 @@
   }
 
   @scope ([data-bone-animate="pulse"]) to ([data-bone-animate]:not([data-bone-animate="pulse"])) {
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -627,7 +641,7 @@
         select *,
         object *
       )::before,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -656,7 +670,7 @@
         select *,
         object *
       )::after,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :is(
         img,
         svg,
@@ -680,7 +694,7 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -709,7 +723,7 @@
           select *,
           object *
         )::before,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -738,7 +752,7 @@
           select *,
           object *
         )::after,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :is(
           img,
           svg,
@@ -763,7 +777,7 @@
     }
 
     @media (forced-colors: active) {
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -792,7 +806,7 @@
           select *,
           object *
         )::after,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :is(
           img,
           svg,
@@ -817,7 +831,7 @@
   }
 
   @scope ([data-bone-animate="none"]) to ([data-bone-animate]:not([data-bone-animate="none"])) {
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -846,7 +860,7 @@
         select *,
         object *
       )::before,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :not(:has(*)):not(
         [data-bone],
         [data-bone] *,
@@ -875,7 +889,7 @@
         select *,
         object *
       )::after,
-    [aria-busy="true"]
+    [aria-busy="true"]:is(:scope, :scope *)
       :is(
         img,
         svg,
@@ -899,7 +913,7 @@
     }
 
     @media (forced-colors: active) {
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :not(:has(*)):not(
           [data-bone],
           [data-bone] *,
@@ -928,7 +942,7 @@
           select *,
           object *
         )::after,
-      [aria-busy="true"]
+      [aria-busy="true"]:is(:scope, :scope *)
         :is(
           img,
           svg,

package/src/css/bones.css

@@ -1,19 +1,18 @@
 :root {
-  --bone-base: rgba(0, 0, 0, 0.12);
-  --bone-highlight: rgba(0, 0, 0, 0.06);
+  /* Bones derive their color from the text color in effect at the bone, so
+     they inherit the page's own contrast guarantee on any background in any
+     scheme (BON-13). currentColor resolves where var() is used, not here.
+     The alpha reset matters: bones hide their content by zeroing the alpha
+     of the color property (never with the transparent keyword, which would
+     discard the channels), and the mix restores it. */
+  --bone-base: color-mix(in srgb, rgb(from currentcolor r g b / 1) 12%, transparent);
+  --bone-highlight: color-mix(in srgb, rgb(from currentcolor r g b / 1) 6%, transparent);
   --bone-radius: 4px;
   --bone-duration: 1.5s;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bone-base: rgba(255, 255, 255, 0.12);
-    --bone-highlight: rgba(255, 255, 255, 0.06);
-  }
-}
-
 [data-bone="text"] {
-  color: transparent;
+  color: rgb(from currentcolor r g b / 0);
   position: relative;
   min-width: 4ch;
   min-height: 1lh;
@@ -71,8 +70,15 @@
 }
 
 img[data-bone="block"],
-video[data-bone="block"] {
-  color: transparent;
+video[data-bone="block"],
+canvas[data-bone="block"] {
+  color: rgb(from currentcolor r g b / 0);
+  /* A loaded picture paints over the bone's background-color; pushing it out
+     of the content box keeps the box and background visible (BON-15).
+     transition: none keeps a page `transition: all` from sliding the picture
+     out on the way in; see the matching comment in auto.css. */
+  object-position: 9999px 0;
+  transition: none;
 }
 
 [data-bone="container"] {
@@ -111,11 +117,43 @@ video[data-bone="block"] {
   }
 }
 
-@scope ([data-bone-animate="shimmer"]) to ([data-bone-animate]:not([data-bone-animate="shimmer"])) {
+/* Marked bones shimmer by default, the same as auto bones and the measured
+   overlay (BON-16). data-bone-animate="none" is the opt-out; the @scope
+   blocks below override this at higher specificity, so their order relative
+   to this rule does not matter. */
+[data-bone="text"]::after,
+[data-bone="block"],
+[data-bone="container"]::before {
+  animation: bone-shimmer var(--bone-duration) ease-in-out infinite;
+  background: linear-gradient(
+    90deg,
+    var(--bone-base) 25%,
+    var(--bone-highlight) 50%,
+    var(--bone-base) 75%
+  );
+  background-size: 200% 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
   [data-bone="text"]::after,
-  [data-bone="text"]::before,
   [data-bone="block"],
   [data-bone="container"]::before {
+    animation: bone-pulse 2s ease-in-out infinite;
+    background: var(--bone-base);
+    background-size: auto;
+  }
+}
+
+/* :is(:scope, :scope *) lets the attribute work from the bone itself, not
+   only from a wrapper: a scoped selector's implicit :scope prefix matches
+   strict descendants only, so a plain compound never matches the scope root
+   (BON-17). The reduced-motion override sits inside each animated scope so it
+   matches at the scope's own specificity; "none" has no override because none
+   still means none. */
+@scope ([data-bone-animate="shimmer"]) to ([data-bone-animate]:not([data-bone-animate="shimmer"])) {
+  [data-bone="text"]:is(:scope, :scope *)::after,
+  [data-bone="block"]:is(:scope, :scope *),
+  [data-bone="container"]:is(:scope, :scope *)::before {
     animation: bone-shimmer var(--bone-duration) ease-in-out infinite;
     background: linear-gradient(
       90deg,
@@ -125,32 +163,42 @@ video[data-bone="block"] {
     );
     background-size: 200% 100%;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-bone="text"]:is(:scope, :scope *)::after,
+    [data-bone="block"]:is(:scope, :scope *),
+    [data-bone="container"]:is(:scope, :scope *)::before {
+      animation: bone-pulse 2s ease-in-out infinite;
+      background: var(--bone-base);
+      background-size: auto;
+    }
+  }
 }
 
 @scope ([data-bone-animate="pulse"]) to ([data-bone-animate]:not([data-bone-animate="pulse"])) {
-  [data-bone="text"]::after,
-  [data-bone="text"]::before,
-  [data-bone="block"],
-  [data-bone="container"]::before {
+  [data-bone="text"]:is(:scope, :scope *)::after,
+  [data-bone="block"]:is(:scope, :scope *),
+  [data-bone="container"]:is(:scope, :scope *)::before {
     animation: bone-pulse var(--bone-duration) ease-in-out infinite;
     background: var(--bone-base);
     background-size: auto;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-bone="text"]:is(:scope, :scope *)::after,
+    [data-bone="block"]:is(:scope, :scope *),
+    [data-bone="container"]:is(:scope, :scope *)::before {
+      animation: bone-pulse 2s ease-in-out infinite;
+    }
+  }
 }
 
 @scope ([data-bone-animate="none"]) to ([data-bone-animate]:not([data-bone-animate="none"])) {
-  [data-bone="text"]::after,
-  [data-bone="text"]::before,
-  [data-bone="block"],
-  [data-bone="container"]::before {
+  [data-bone="text"]:is(:scope, :scope *)::after,
+  [data-bone="block"]:is(:scope, :scope *),
+  [data-bone="container"]:is(:scope, :scope *)::before {
     animation: none;
     background: var(--bone-base);
     background-size: auto;
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  [aria-busy="true"] {
-    animation: bone-pulse 2s ease-in-out infinite;
-  }
-}

package/dist/react/bones.d.mts

@@ -1,15 +0,0 @@
-import { ReactNode } from "react";
-
-//#region src/react/bones.d.ts
-declare function BonesForce({
-  children
-}: {
-  children: ReactNode;
-}): ReactNode;
-declare function Bones({
-  children
-}: {
-  children: ReactNode;
-}): ReactNode;
-//#endregion
-export { Bones, BonesForce };

package/dist/react/bones.mjs

@@ -1,27 +0,0 @@
-import { forceBones, getBonesContext } from "./create-bones.mjs";
-import { Children, Fragment, Suspense, cloneElement, createElement, isValidElement } from "react";
-//#region src/react/bones.ts
-function BonesStart() {
-	getBonesContext().loading = true;
-	return null;
-}
-function BonesEnd() {
-	getBonesContext().loading = false;
-	return null;
-}
-function swapPromises(children) {
-	return Children.map(children, (child) => {
-		if (!isValidElement(child)) return child;
-		const props = {};
-		for (const [key, value] of Object.entries(child.props)) props[key] = value instanceof Promise ? forceBones : value;
-		return cloneElement(child, props);
-	});
-}
-function BonesForce({ children }) {
-	return createElement(Fragment, null, createElement(BonesStart), children, createElement(BonesEnd));
-}
-function Bones({ children }) {
-	return createElement(Suspense, { fallback: createElement(Fragment, null, createElement(BonesStart), swapPromises(children), createElement(BonesEnd)) }, children);
-}
-//#endregion
-export { Bones, BonesForce };