@grantcodes/ui 2.7.0 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [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.0",
   "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-image.component.js

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

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

@@ -3,17 +3,46 @@ 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 = {
+		filmstrip: { type: Boolean, reflect: true },
+	};
+
 	/** @type {any[]} */
 	images = [];
 
-	// Define reactive properties--updating a reactive property causes
-	// the component to update.
-	// @property() label = 'Button Label'
+	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");
+			}
+		}
+	}
 
 	render() {
 		return html`

package/src/components/gallery/gallery.css

@@ -55,3 +55,71 @@
   color: white;
 }
 
+/* =============================================
+   FILMSTRIP VARIANT
+   ============================================= */
+
+/* Gallery container in filmstrip mode */
+:host([filmstrip]) .gallery {
+  overflow: hidden;
+}
+
+:host([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([filmstrip]) .gallery__slot::-webkit-scrollbar {
+  display: none;
+}
+
+:host([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([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;
+  }
+}
+
+/* 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

@@ -58,3 +58,45 @@ 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: 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: {
+		filmstrip: true,
+	},
+	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,27 @@ describe("Gallery Component", () => {
 			"Images array should be empty initially",
 		);
 	});
+
+	describe("Gallery filmstrip variant", () => {
+		let element;
+
+		afterEach(() => {
+			cleanup(element);
+		});
+
+		it("should have filmstrip property default to false", async () => {
+			element = await fixture("grantcodes-gallery");
+			assert.strictEqual(element.filmstrip, false, "filmstrip should default to false");
+		});
+
+		it("should reflect filmstrip attribute when property is set", async () => {
+			element = await fixture("grantcodes-gallery");
+			element.filmstrip = true;
+			await element.updateComplete;
+			assert.ok(
+				element.hasAttribute("filmstrip"),
+				"filmstrip attribute should be reflected",
+			);
+		});
+	});
 });