@grantcodes/ui 2.8.0 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.8.1](https://github.com/grantcodes/ui/compare/ui-v2.8.0...ui-v2.8.1) (2026-04-07)
+
+
+### Bug Fixes
+
+* **gallery:** filmstrip images should fill height with auto width, not square crop ([62d436f](https://github.com/grantcodes/ui/commit/62d436fe75f42c6d99c380c9d4384e53a97abef1))
+* **gallery:** SSR-safe filmstrip variant with variant prop refactor ([2af368c](https://github.com/grantcodes/ui/commit/2af368cba60b55021f563a06c1416219abb0b024))
+* **gallery:** use CSS custom properties for filmstrip styles instead of JS attribute propagation ([f83efcf](https://github.com/grantcodes/ui/commit/f83efcfcf24a896dcdcb943b5988a9daefcf8947))
+
 ## [2.8.0](https://github.com/grantcodes/ui/compare/ui-v2.7.0...ui-v2.8.0) (2026-04-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantcodes/ui",
-  "version": "2.8.0",
+  "version": "2.8.1",
   "description": "A personal component system built with Lit web components",
   "type": "module",
   "main": "src/main.js",

package/src/components/gallery/gallery-image.component.js

@@ -12,7 +12,6 @@ export class GrantCodesGalleryImage extends LitElement {
 		alt: { type: String },
 		caption: { type: String },
 		thumbnail: { type: String },
-		filmstrip: { type: Boolean, reflect: true },
 	};
 
 	constructor() {
@@ -24,7 +23,6 @@ export class GrantCodesGalleryImage extends LitElement {
 		this.alt = "";
 		this.caption = "";
 		this.thumbnail = "";
-		this.filmstrip = false;
 	}
 
 	captionTemplate() {

package/src/components/gallery/gallery.component.js

@@ -6,7 +6,7 @@ export class GrantCodesGallery extends LitElement {
 	static styles = [galleryStyles];
 
 	static properties = {
-		filmstrip: { type: Boolean, reflect: true },
+		variant: { type: String, reflect: true },
 	};
 
 	/** @type {any[]} */
@@ -14,34 +14,7 @@ export class GrantCodesGallery extends LitElement {
 
 	constructor() {
 		super();
-		this.filmstrip = false;
-	}
-
-	firstUpdated() {
-		const slot = this.renderRoot.querySelector(".gallery__slot");
-		if (slot) {
-			slot.addEventListener("slotchange", () => this._updateChildren());
-			this._updateChildren();
-		}
-	}
-
-	updated(changedProperties) {
-		if (changedProperties.has("filmstrip")) {
-			this._updateChildren();
-		}
-	}
-
-	_updateChildren() {
-		const slot = this.renderRoot.querySelector(".gallery__slot");
-		if (!slot) return;
-		const assigned = slot.assignedElements({ flatten: true });
-		for (const el of assigned) {
-			if (this.filmstrip) {
-				el.setAttribute("filmstrip", "");
-			} else {
-				el.removeAttribute("filmstrip");
-			}
-		}
+		this.variant = "default";
 	}
 
 	render() {

package/src/components/gallery/gallery.css

@@ -38,8 +38,6 @@
   display: block;
   width: 100%;
   height: auto;
-  /* Make the image square */
-  aspect-ratio: 1;
   object-fit: cover;
   object-position: center;
 }
@@ -55,16 +53,50 @@
   color: white;
 }
 
+/* =============================================
+   GALLERY-IMAGE DEFAULT STYLES
+   (applied inside grantcodes-gallery-image shadow DOM via :host)
+   ============================================= */
+
+/* Default square crop. :host selector comes after .gallery__image img so
+   wins on equal specificity. Uses custom properties so filmstrip mode can
+   override them via inheritance from the parent gallery element. */
+:host .gallery__image img {
+  aspect-ratio: var(--_gallery-img-aspect-ratio, 1);
+  block-size: var(--_gallery-img-block-size, auto);
+  width: var(--_gallery-img-width, 100%);
+  height: var(--_gallery-img-height, auto);
+  max-inline-size: var(--_gallery-img-max-inline-size, unset);
+}
+
+:host .gallery__image {
+  block-size: var(--_gallery-image-block-size, auto);
+  width: var(--_gallery-image-width, 100%);
+}
+
 /* =============================================
    FILMSTRIP VARIANT
    ============================================= */
 
-/* Gallery container in filmstrip mode */
-:host([filmstrip]) .gallery {
+/* Set inherited CSS custom properties on the gallery host when in filmstrip
+   mode. These cascade down to slotted grantcodes-gallery-image children
+   without requiring JS attribute propagation, making the filmstrip work
+   correctly with SSR-rendered content. */
+:host([variant="filmstrip"]) {
+  --_gallery-image-block-size: 100%;
+  --_gallery-image-width: fit-content;
+  --_gallery-img-aspect-ratio: auto;
+  --_gallery-img-block-size: 100%;
+  --_gallery-img-width: auto;
+  --_gallery-img-height: 100%;
+  --_gallery-img-max-inline-size: none;
+}
+
+:host([variant="filmstrip"]) .gallery {
   overflow: hidden;
 }
 
-:host([filmstrip]) .gallery__slot {
+:host([variant="filmstrip"]) .gallery__slot {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
@@ -76,11 +108,11 @@
   scrollbar-width: none;
 }
 
-:host([filmstrip]) .gallery__slot::-webkit-scrollbar {
+:host([variant="filmstrip"]) .gallery__slot::-webkit-scrollbar {
   display: none;
 }
 
-:host([filmstrip]) .gallery__slot::slotted(*) {
+:host([variant="filmstrip"]) .gallery__slot::slotted(*) {
   flex: 0 0 auto;
   block-size: 100%;
   scroll-snap-align: start;
@@ -89,7 +121,7 @@
 /* Scroll-driven reveal animation */
 @supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
-    :host([filmstrip]) .gallery__slot::slotted(*) {
+    :host([variant="filmstrip"]) .gallery__slot::slotted(*) {
       animation: filmstrip-reveal linear both;
       animation-timeline: view(inline);
       animation-range: entry 0% entry 60%;
@@ -107,19 +139,3 @@
     scale: 1;
   }
 }
-
-/* Gallery-image host in filmstrip mode */
-:host([filmstrip]) .gallery__image {
-  block-size: 100%;
-  width: fit-content;
-}
-
-:host([filmstrip]) .gallery__image img {
-  block-size: 100%;
-  width: auto;
-  aspect-ratio: unset;
-  max-inline-size: none;
-  object-fit: cover;
-  object-position: center;
-}
-

package/src/components/gallery/gallery.stories.js

@@ -64,6 +64,7 @@ const filmstripImages = [
 	{ w: 160, h: 240 },
 	{ w: 360, h: 240 },
 	{ w: 180, h: 240 },
+	{ w: 160, h: 900 }, // tall portrait image
 	{ w: 420, h: 240 },
 	{ w: 160, h: 240 },
 	{ w: 380, h: 240 },
@@ -76,7 +77,7 @@ const filmstripImages = [
 
 export const Filmstrip = {
 	args: {
-		filmstrip: true,
+		variant: "filmstrip",
 	},
 	render: (args) =>
 		template(

package/src/components/gallery/gallery.test.js

@@ -66,18 +66,19 @@ describe("Gallery Component", () => {
 			cleanup(element);
 		});
 
-		it("should have filmstrip property default to false", async () => {
+		it("should have variant property default to 'default'", async () => {
 			element = await fixture("grantcodes-gallery");
-			assert.strictEqual(element.filmstrip, false, "filmstrip should default to false");
+			assert.strictEqual(element.variant, "default", "variant should default to 'default'");
 		});
 
-		it("should reflect filmstrip attribute when property is set", async () => {
+		it("should reflect variant attribute when property is set", async () => {
 			element = await fixture("grantcodes-gallery");
-			element.filmstrip = true;
+			element.variant = "filmstrip";
 			await element.updateComplete;
-			assert.ok(
-				element.hasAttribute("filmstrip"),
-				"filmstrip attribute should be reflected",
+			assert.strictEqual(
+				element.getAttribute("variant"),
+				"filmstrip",
+				"variant attribute should be reflected",
 			);
 		});
 	});