@at-flux/astroflare 1.0.10 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/ImageFade.astro +7 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@at-flux/astroflare",
3
- "version": "1.0.10",
3
+ "version": "1.0.11",
4
4
  "type": "module",
5
5
  "description": "Reusable headless components, styles, and utilities for Astro + Tailwind v4 + Cloudflare projects",
6
6
  "author": "atflux <dev@atflux.uk>",
package/src/components/ImageFade.astro CHANGED
@@ -10,6 +10,10 @@
10
10
  * Reserve layout space with `aspectRatio` to avoid CLS. Styling is theme-aware
11
11
  * via `--color-brand` (override with `spinnerColor`).
12
12
  *
13
+ * The wrapper only controls the slotted image's opacity — size the image and
14
+ * choose its `object-fit` with your own classes, exactly as you would without
15
+ * this wrapper.
16
+ *
13
17
  * @example
14
18
  * <ImageFade aspectRatio="16/9" rounded="rounded-2xl">
15
19
  * <Image src={hero} alt="…" />
@@ -63,13 +67,12 @@ const style = [
63
67
  background: color-mix(in oklab, var(--if-accent, var(--color-brand, #7c5cff)) 8%, transparent);
64
68
  }
65
69
 
66
- /* Slotted image starts hidden, fades in once loaded */
70
+ /* Slotted image starts hidden, fades in once loaded.
71
+ Only opacity is owned here — sizing and `object-fit` stay with the caller
72
+ so consumer classes (`object-contain`, `object-fill`, …) are not overridden. */
67
73
  image-fade.image-fade > img,
68
74
  image-fade.image-fade > picture > img {
69
75
  display: block;
70
- width: 100%;
71
- height: 100%;
72
- object-fit: cover;
73
76
  opacity: 0;
74
77
  transition: opacity var(--if-duration, 500ms) ease-out;
75
78
  }