@at-flux/astroflare 1.0.10 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@at-flux/astroflare",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "type": "module",
   "description": "Reusable headless components, styles, and utilities for Astro + Tailwind v4 + Cloudflare projects",
   "author": "atflux <dev@atflux.uk>",

package/src/components/ImageFade.astro

@@ -10,6 +10,10 @@
  * Reserve layout space with `aspectRatio` to avoid CLS. Styling is theme-aware
  * via `--color-brand` (override with `spinnerColor`).
  *
+ * The wrapper only controls the slotted image's opacity — size the image and
+ * choose its `object-fit` with your own classes, exactly as you would without
+ * this wrapper.
+ *
  * @example
  * <ImageFade aspectRatio="16/9" rounded="rounded-2xl">
  *   <Image src={hero} alt="…" />
@@ -26,6 +30,12 @@ interface Props {
   duration?: number;
   /** Spinner/skeleton accent colour (defaults to `--color-brand`). */
   spinnerColor?: string;
+  /** Second accent, used by the counter-rotating inner ring (defaults to `spinnerColor`). */
+  spinnerColorSecondary?: string;
+  /** Outer ring diameter, any CSS length. */
+  spinnerSize?: string;
+  /** Wrapper background shown behind the image. Pass `"transparent"` for `object-contain` images. */
+  background?: string;
   /** Show a shimmer skeleton instead of a spinner. */
   skeleton?: boolean;
 }
@@ -36,12 +46,18 @@ const {
   aspectRatio,
   duration = 500,
   spinnerColor,
+  spinnerColorSecondary,
+  spinnerSize,
+  background,
   skeleton = false,
 } = Astro.props;
 
 const style = [
   aspectRatio ? `aspect-ratio:${aspectRatio}` : '',
   spinnerColor ? `--if-accent:${spinnerColor}` : '',
+  spinnerColorSecondary ? `--if-accent-2:${spinnerColorSecondary}` : '',
+  spinnerSize ? `--if-size:${spinnerSize}` : '',
+  background ? `--if-bg:${background}` : '',
   `--if-duration:${duration}ms`,
 ]
   .filter(Boolean)
@@ -50,7 +66,13 @@ const style = [
 
 <image-fade class:list={['image-fade', skeleton && 'is-skeleton', rounded, className]} style={style}>
   <span class='image-fade__placeholder' aria-hidden='true'>
-    {!skeleton && <span class='image-fade__ring'></span>}
+    {
+      !skeleton && (
+        <span class='image-fade__ring'>
+          <span class='image-fade__ring-inner' />
+        </span>
+      )
+    }
   </span>
   <slot />
 </image-fade>
@@ -60,16 +82,18 @@ const style = [
     position: relative;
     display: block;
     overflow: hidden;
-    background: color-mix(in oklab, var(--if-accent, var(--color-brand, #7c5cff)) 8%, transparent);
+    background: var(
+      --if-bg,
+      color-mix(in oklab, var(--if-accent, var(--color-brand, #7c5cff)) 8%, transparent)
+    );
   }
 
-  /* Slotted image starts hidden, fades in once loaded */
+  /* Slotted image starts hidden, fades in once loaded.
+     Only opacity is owned here — sizing and `object-fit` stay with the caller
+     so consumer classes (`object-contain`, `object-fill`, …) are not overridden. */
   image-fade.image-fade > img,
   image-fade.image-fade > picture > img {
     display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
     opacity: 0;
     transition: opacity var(--if-duration, 500ms) ease-out;
   }
@@ -93,8 +117,10 @@ const style = [
   }
 
   .image-fade__ring {
-    width: 2.5rem;
-    height: 2.5rem;
+    position: relative;
+    display: block;
+    width: var(--if-size, 2.5rem);
+    height: var(--if-size, 2.5rem);
     border: 3px solid transparent;
     border-top-color: var(--if-accent, var(--color-brand, #7c5cff));
     border-right-color: color-mix(
@@ -103,7 +129,28 @@ const style = [
       transparent
     );
     border-radius: 50%;
-    animation: image-fade-spin 0.9s linear infinite;
+    /* `transform` is reset explicitly: a host page may set a base transform on
+       every element (e.g. a `* { transform: translateZ(0) }` GPU hint), which
+       would otherwise make the keyframes interpolate as matrices and cancel the
+       full turn out to no visible rotation. */
+    transform: rotate(0deg);
+    animation: image-fade-spin 1.2s linear infinite;
+  }
+
+  .image-fade__ring-inner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    width: 60%;
+    height: 60%;
+    margin: -30% 0 0 -30%;
+    border: 2px solid transparent;
+    border-top-color: var(--if-accent-2, var(--if-accent, var(--color-brand, #7c5cff)));
+    border-right-color: var(--if-accent-2, var(--if-accent, var(--color-brand, #7c5cff)));
+    border-radius: 50%;
+    transform: rotate(0deg);
+    animation: image-fade-spin 0.8s linear infinite reverse;
   }
 
   /* Skeleton variant: shimmer sweep instead of a spinner */
@@ -118,7 +165,13 @@ const style = [
     animation: image-fade-shimmer 1.4s ease-in-out infinite;
   }
 
+  /* Both frames are explicit so the interpolation stays angular. An implicit
+     `from` would be taken from the element's computed transform, which is not
+     guaranteed to be `none` on every host page. */
   @keyframes image-fade-spin {
+    from {
+      transform: rotate(0deg);
+    }
     to {
       transform: rotate(360deg);
     }
@@ -138,7 +191,8 @@ const style = [
     .image-fade__placeholder {
       transition: none;
     }
-    .image-fade__ring {
+    .image-fade__ring,
+    .image-fade__ring-inner {
       animation: none;
     }
     image-fade.image-fade.is-skeleton .image-fade__placeholder {