barua-ui 0.3.0 → 0.3.2

package/css/components/content.css

@@ -33,7 +33,36 @@
   }
   .b-card__title { font-size: var(--b-text-headline); font-weight: var(--b-weight-semibold); }
   .b-card__subtitle { font-size: var(--b-text-footnote); color: var(--b-text-secondary); }
-  .b-card__media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
+  /*
+   * The media slot works two ways and only one of them used to.
+   *
+   * When the slot IS the picture — <img class="b-card__media"> — object-fit
+   * crops it and all is well. When it WRAPS one, which is what a card with a
+   * zoom button or an async image needs, object-fit does nothing: it only
+   * applies to replaced elements. The child then rendered at its natural size
+   * and burst out of the card, and anything positioned absolutely inside it
+   * escaped to the page, because there was no positioned ancestor to hold it.
+   */
+  .b-card__media {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    object-fit: cover;
+  }
+  /* Direct children fill the slot; the picture fills whatever wraps it, at any
+     depth, because a zoom button or an async-image span usually sits between. */
+  .b-card__media > * {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .b-card__media :is(img, video, picture) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
   .b-card__eyebrow {
     font-size: var(--b-text-caption);
     font-weight: var(--b-weight-semibold);

package/css/components/media.css

@@ -232,6 +232,34 @@
     opacity: 0;
     transition: opacity var(--b-duration-slow) var(--b-ease-out);
   }
+  /* ---- Blur-up ------------------------------------------------------------
+   *
+   * A shimmer says "something is coming". A blurred copy of the actual picture
+   * says "this is what is coming", which is a different and better promise —
+   * the layout is right, the colours are right, and the photograph resolves
+   * rather than appearing.
+   *
+   * The placeholder is a thumbnail small enough to inline: a 32px-wide JPEG is
+   * around a kilobyte, so it costs nothing and arrives with the markup. Give
+   * it as a data URI on --b-img-placeholder and mark the host with
+   * data-placeholder, which is what tells the shimmer to stand down.
+   */
+  .b-async-img[data-placeholder]::before { display: none; }
+
+  .b-async-img[data-placeholder]::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--b-img-placeholder) center / cover no-repeat;
+    /* Scaled up because a blur samples past the edges and would otherwise
+       leave a soft border all the way round. */
+    filter: blur(14px);
+    transform: scale(1.1);
+    transition: opacity var(--b-duration-slow) var(--b-ease-out);
+    pointer-events: none;
+  }
+  .b-async-img[data-placeholder].is-loaded::after { opacity: 0; }
+
   .b-async-img.is-loaded::before { display: none; }
   .b-async-img.is-loaded img { opacity: 1; }
 

package/dist/index.cjs

@@ -2395,7 +2395,32 @@ var OnboardingFeature = (0, import_react19.forwardRef)(
 var import_react20 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var MediaPlaceholder = block("div", "b-media-placeholder", "MediaPlaceholder");
-var AsyncImage = block("span", "b-async-img", "AsyncImage");
+var AsyncImage = (0, import_react20.forwardRef)(function AsyncImage2({ src, alt, placeholder, aspect, className, style, ...rest }, ref) {
+  const [loaded, setLoaded] = (0, import_react20.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "span",
+    {
+      className: cn("b-async-img", loaded && "is-loaded", className),
+      "data-placeholder": placeholder ? "" : void 0,
+      style: {
+        ...aspect ? { aspectRatio: aspect } : null,
+        ...placeholder ? { ["--b-img-placeholder"]: `url("${placeholder}")` } : null,
+        ...style
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "img",
+        {
+          ref,
+          src,
+          alt,
+          onLoad: () => setLoaded(true),
+          onError: () => setLoaded(true),
+          ...rest
+        }
+      )
+    }
+  );
+});
 var Web = block("div", "b-web", "Web");
 var Video = block("video", "b-video", "Video");
 var Audio = block("div", "b-audio", "Audio");