@camp.dev/bones 0.4.0 → 0.4.1

package/README.md

@@ -133,7 +133,7 @@ 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` 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.
 

package/dist/css/auto.css

@@ -148,6 +148,17 @@
     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

package/dist/css/bones.css

@@ -70,8 +70,15 @@
 }
 
 img[data-bone="block"],
-video[data-bone="block"] {
+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"] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camp.dev/bones",
-  "version": "0.4.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

@@ -148,6 +148,17 @@
     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

package/src/css/bones.css

@@ -70,8 +70,15 @@
 }
 
 img[data-bone="block"],
-video[data-bone="block"] {
+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"] {