@grantcodes/ui 2.7.0 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 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)
+
+
+### Features
+
+* **09-gallery-film-strip:** add filmstrip and marquee gallery variants ([0a4ff3e](https://github.com/grantcodes/ui/commit/0a4ff3e620bc21a6d291943acc72608d1c08d371))
+* **ui:** gallery filmstrip variant ([d22a93d](https://github.com/grantcodes/ui/commit/d22a93d615874ca76fcf7525ea8d1dfa71721e2b))
+
 ## [2.7.0](https://github.com/grantcodes/ui/compare/ui-v2.6.0...ui-v2.7.0) (2026-04-06)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantcodes/ui",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "description": "A personal component system built with Lit web components",
   "type": "module",
   "main": "src/main.js",
@@ -47,7 +47,7 @@
     "@lit/react": "^1.0.8",
     "lit": "^3.3.1",
     "shiki": "^3.17.1",
-    "@grantcodes/style-dictionary": "^1.4.1"
+    "@grantcodes/style-dictionary": "^1.4.2"
   },
   "devDependencies": {
     "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",

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

@@ -3,17 +3,19 @@ import { html } from "lit/static-html.js";
 import galleryStyles from "./gallery.css" with { type: "css" };
 
 export class GrantCodesGallery extends LitElement {
-	// Styles are scoped to this element: they won't conflict with styles
-	// on the main page or in other components. Styling API can be exposed
-	// via CSS custom properties.
 	static styles = [galleryStyles];
 
+	static properties = {
+		variant: { type: String, reflect: true },
+	};
+
 	/** @type {any[]} */
 	images = [];
 
-	// Define reactive properties--updating a reactive property causes
-	// the component to update.
-	// @property() label = 'Button Label'
+	constructor() {
+		super();
+		this.variant = "default";
+	}
 
 	render() {
 		return html`

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,3 +53,89 @@
   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
+   ============================================= */
+
+/* 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([variant="filmstrip"]) .gallery__slot {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  block-size: var(--filmstrip-height, 240px);
+  gap: var(--gallery-gap, 4px);
+  scroll-snap-type: x mandatory;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+
+:host([variant="filmstrip"]) .gallery__slot::-webkit-scrollbar {
+  display: none;
+}
+
+:host([variant="filmstrip"]) .gallery__slot::slotted(*) {
+  flex: 0 0 auto;
+  block-size: 100%;
+  scroll-snap-align: start;
+}
+
+/* Scroll-driven reveal animation */
+@supports (animation-timeline: view()) {
+  @media (prefers-reduced-motion: no-preference) {
+    :host([variant="filmstrip"]) .gallery__slot::slotted(*) {
+      animation: filmstrip-reveal linear both;
+      animation-timeline: view(inline);
+      animation-range: entry 0% entry 60%;
+    }
+  }
+}
+
+@keyframes filmstrip-reveal {
+  from {
+    opacity: 0.3;
+    scale: 0.92;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}

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

@@ -58,3 +58,46 @@ const meta = {
 export default meta;
 
 export const Gallery = {};
+
+const filmstripImages = [
+	{ w: 400, h: 240 },
+	{ 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 },
+	{ w: 200, h: 240 },
+	{ w: 440, h: 240 },
+	{ w: 160, h: 240 },
+	{ w: 350, h: 240 },
+	{ w: 170, h: 240 },
+];
+
+export const Filmstrip = {
+	args: {
+		variant: "filmstrip",
+	},
+	render: (args) =>
+		template(
+			args,
+			html`${filmstripImages.map(
+				({ w, h }, i) =>
+					html`<grantcodes-gallery-image
+						src="https://picsum.photos/seed/${i + 10}/${w}/${h}"
+						alt="Photo ${i + 1}"
+						width="${w}"
+						height="${h}"
+					></grantcodes-gallery-image>`,
+			)}`,
+		),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Filmstrip variant: images in a scrollable horizontal row at uniform height. Uses scroll-snap and scroll-driven animations.",
+			},
+		},
+	},
+};

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

@@ -2,6 +2,7 @@ import { describe, it, afterEach } from "node:test";
 import { strict as assert } from "node:assert";
 import { fixture, cleanup } from "../../test-utils/index.js";
 import "./gallery.js";
+import "./gallery-image.js";
 
 describe("Gallery Component", () => {
 	let element;
@@ -57,4 +58,28 @@ describe("Gallery Component", () => {
 			"Images array should be empty initially",
 		);
 	});
+
+	describe("Gallery filmstrip variant", () => {
+		let element;
+
+		afterEach(() => {
+			cleanup(element);
+		});
+
+		it("should have variant property default to 'default'", async () => {
+			element = await fixture("grantcodes-gallery");
+			assert.strictEqual(element.variant, "default", "variant should default to 'default'");
+		});
+
+		it("should reflect variant attribute when property is set", async () => {
+			element = await fixture("grantcodes-gallery");
+			element.variant = "filmstrip";
+			await element.updateComplete;
+			assert.strictEqual(
+				element.getAttribute("variant"),
+				"filmstrip",
+				"variant attribute should be reflected",
+			);
+		});
+	});
 });