@at-flux/astroflare 1.0.12 → 1.0.14

package/package.json

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

package/src/components/ClientRouterLoadingSpinner.astro

@@ -3,7 +3,10 @@
  * Loading spinner for Astro view transitions.
  * Uses native <dialog> shown during page transitions.
  * Override styles via CSS custom properties or by targeting #loading.
+ *
+ * The indicator itself is `LoadingSpinner`; fill the default slot to replace it.
  */
+import LoadingSpinner from './LoadingSpinner.astro';
 ---
 
 <dialog
@@ -13,7 +16,7 @@
   <div class='flex items-center justify-center min-h-full p-0'>
     <div class='loading-spinner'>
       <slot>
-        <div class='loading-ring' />
+        <LoadingSpinner size='3rem' />
       </slot>
     </div>
   </div>
@@ -37,23 +40,8 @@
     transition: opacity 0.15s ease-out, transform 0.15s ease-out;
   }
 
-  .loading-ring {
-    width: 3rem;
-    height: 3rem;
-    border: 3px solid transparent;
-    border-top-color: var(--color-brand, #7c5cff);
-    border-right-color: color-mix(in oklab, var(--color-brand, #7c5cff) 50%, transparent);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .loading-spinner { transition: none; }
-    .loading-ring { animation: none; border-top-color: var(--color-brand, #7c5cff); }
   }
 </style>
 

package/src/components/ImageFade.astro

@@ -14,11 +14,24 @@
  * choose its `object-fit` with your own classes, exactly as you would without
  * this wrapper.
  *
+ * The default placeholder is a plain `LoadingSpinner` (or a shimmer skeleton).
+ * Anything fancier belongs in the `placeholder` slot rather than in props —
+ * whatever you put there is centred in the frame and faded out on load exactly
+ * like the default.
+ *
  * @example
  * <ImageFade aspectRatio="16/9" rounded="rounded-2xl">
  *   <Image src={hero} alt="…" />
  * </ImageFade>
+ *
+ * @example Custom indicator
+ * <ImageFade aspectRatio="16/9">
+ *   <LoadingSpinner slot="placeholder" dual size="3rem" color="var(--brand)" />
+ *   <Image src={hero} alt="…" />
+ * </ImageFade>
  */
+import LoadingSpinner from './LoadingSpinner.astro';
+
 interface Props {
   /** Extra classes merged onto the wrapper. */
   class?: string;
@@ -28,12 +41,8 @@ interface Props {
   aspectRatio?: string;
   /** Fade-in duration in ms. */
   duration?: number;
-  /** Spinner/skeleton accent colour (defaults to `--color-brand`). */
+  /** Accent for the default spinner, the skeleton shimmer and the wrapper tint. */
   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. */
@@ -46,8 +55,6 @@ const {
   aspectRatio,
   duration = 500,
   spinnerColor,
-  spinnerColorSecondary,
-  spinnerSize,
   background,
   skeleton = false,
 } = Astro.props;
@@ -55,8 +62,6 @@ const {
 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`,
 ]
@@ -66,13 +71,9 @@ 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 class='image-fade__ring-inner' />
-        </span>
-      )
-    }
+    <slot name='placeholder'>
+      {!skeleton && <LoadingSpinner color={spinnerColor} />}
+    </slot>
   </span>
   <slot />
 </image-fade>
@@ -116,43 +117,6 @@ const style = [
     opacity: 0;
   }
 
-  .image-fade__ring {
-    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(
-      in oklab,
-      var(--if-accent, var(--color-brand, #7c5cff)) 50%,
-      transparent
-    );
-    border-radius: 50%;
-    /* `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 */
   image-fade.image-fade.is-skeleton .image-fade__placeholder {
     background: linear-gradient(
@@ -165,36 +129,12 @@ 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);
-    }
-  }
-  @keyframes image-fade-shimmer {
-    from {
-      background-position: 200% 0;
-    }
-    to {
-      background-position: -200% 0;
-    }
-  }
-
   @media (prefers-reduced-motion: reduce) {
     image-fade.image-fade > img,
     image-fade.image-fade > picture > img,
     .image-fade__placeholder {
       transition: none;
     }
-    .image-fade__ring,
-    .image-fade__ring-inner {
-      animation: none;
-    }
     image-fade.image-fade.is-skeleton .image-fade__placeholder {
       animation: none;
     }

package/src/components/LoadingSpinner.astro

@@ -0,0 +1,109 @@
+---
+/**
+ * LoadingSpinner — a plain rotating ring.
+ *
+ * Deliberately unopinionated: one ring, brand colour, no flourish. Use it
+ * anywhere something is pending. `ClientRouterLoadingSpinner` and `ImageFade`
+ * both fall back to it, and both let you replace it via a slot.
+ *
+ * Set `dual` for a second, counter-rotating inner ring.
+ *
+ * @example
+ * <LoadingSpinner size="3rem" />
+ * <LoadingSpinner dual color="var(--brand)" colorSecondary="var(--brand-light)" />
+ */
+interface Props {
+  /** Outer ring diameter, any CSS length. */
+  size?: string;
+  /** Ring colour (defaults to `--color-brand`). */
+  color?: string;
+  /** Inner ring colour when `dual` is set (defaults to `color`). */
+  colorSecondary?: string;
+  /** Seconds for one full outer rotation. */
+  speed?: number;
+  /** Add a counter-rotating inner ring. */
+  dual?: boolean;
+  /** Extra classes on the ring element. */
+  class?: string;
+}
+
+const {
+  size,
+  color,
+  colorSecondary,
+  speed = 1,
+  dual = false,
+  class: className = '',
+} = Astro.props;
+
+const style = [
+  size ? `--ls-size:${size}` : '',
+  color ? `--ls-color:${color}` : '',
+  colorSecondary ? `--ls-color-2:${colorSecondary}` : '',
+  `--ls-speed:${speed}s`,
+]
+  .filter(Boolean)
+  .join(';');
+---
+
+<span class:list={['loading-spinner-ring', className]} style={style} aria-hidden='true'>
+  {dual && <span class='loading-spinner-ring__inner' />}
+</span>
+
+<style is:global>
+  .loading-spinner-ring {
+    position: relative;
+    display: block;
+    width: var(--ls-size, 2.5rem);
+    height: var(--ls-size, 2.5rem);
+    border: 3px solid transparent;
+    border-top-color: var(--ls-color, var(--color-brand, #7c5cff));
+    border-right-color: color-mix(
+      in oklab,
+      var(--ls-color, var(--color-brand, #7c5cff)) 50%,
+      transparent
+    );
+    border-radius: 50%;
+    /* Reset explicitly: a host page may set a base transform on every element
+       (a `* { transform: translateZ(0) }` GPU hint is common), which would make
+       the keyframes interpolate as matrices and cancel the full turn out to no
+       visible rotation. */
+    transform: rotate(0deg);
+    animation: loading-spinner-spin var(--ls-speed, 1s) linear infinite;
+  }
+
+  .loading-spinner-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(--ls-color-2, var(--ls-color, var(--color-brand, #7c5cff)));
+    border-right-color: var(--ls-color-2, var(--ls-color, var(--color-brand, #7c5cff)));
+    border-radius: 50%;
+    transform: rotate(0deg);
+    animation: loading-spinner-spin calc(var(--ls-speed, 1s) * 0.7) linear infinite reverse;
+  }
+
+  /* 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 loading-spinner-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .loading-spinner-ring,
+    .loading-spinner-ring__inner {
+      animation: none;
+    }
+  }
+</style>