@grantcodes/ui 2.15.6 → 2.16.0

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

@@ -1,9 +1,9 @@
-import React from "react";
-import { createComponent } from "@lit/react";
-import { GrantCodesGalleryImage } from "./gallery-image.js";
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { GrantCodesGalleryImage } from './gallery-image.js';
 
 export const GalleryImage = createComponent({
-	tagName: "grantcodes-gallery-image",
-	elementClass: GrantCodesGalleryImage,
-	react: React,
+  tagName: 'grantcodes-gallery-image',
+  elementClass: GrantCodesGalleryImage,
+  react: React,
 });

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

@@ -1,27 +1,34 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import galleryStyles from "./gallery.css" with { type: "css" };
+import { LitElement, nothing } from 'lit';
+import { html } from 'lit/static-html.js';
+import galleryStyles from './gallery.css' with { type: 'css' };
 
 export class GrantCodesGallery extends LitElement {
-	static styles = [galleryStyles];
+  static styles = [galleryStyles];
 
-	static properties = {
-		variant: { type: String, reflect: true },
-	};
+  static properties = {
+    variant: { type: String, reflect: true },
+  };
 
-	/** @type {any[]} */
-	images = [];
+  /** @type {any[]} */
+  images = [];
 
-	constructor() {
-		super();
-		this.variant = "default";
-	}
+  constructor() {
+    super();
+    this.variant = 'default';
+  }
 
-	render() {
-		return html`
+  render() {
+    // Only the filmstrip scrolls, so only it becomes a named, focusable region.
+    const scrollable = this.variant === 'filmstrip';
+    return html`
       <div class="gallery">
-        <slot class="gallery__slot"></slot>
+        <slot
+          class="gallery__slot"
+          tabindex=${scrollable ? '0' : nothing}
+          role=${scrollable ? 'region' : nothing}
+          aria-label=${scrollable ? 'Gallery' : nothing}
+        ></slot>
       </div>
     `;
-	}
+  }
 }

package/src/components/gallery/gallery.css

@@ -1,56 +1,56 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .gallery {
-	display: block;
+  display: block;
 }
 
 .gallery__slot {
-	display: grid;
-	grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
-	width: 100%;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: var(--gallery-gap, 0);
+  display: grid;
+  grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
+  width: 100%;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--gallery-gap, 0);
 }
 
 .gallery__slot > * {
-	display: block;
-	width: 100%;
+  display: block;
+  width: 100%;
 }
 
 .gallery--has-lightbox > * {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 .gallery__image {
-	position: relative;
-	width: 100%;
-	display: block;
-	flex-direction: column;
-	margin: 0;
+  position: relative;
+  width: 100%;
+  display: block;
+  flex-direction: column;
+  margin: 0;
 }
 
 .gallery__image img {
-	display: block;
-	width: 100%;
-	height: auto;
-	object-fit: cover;
-	object-position: center;
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  object-position: center;
 }
 
 .gallery__image__caption {
-	position: absolute;
-	inset: 0;
-	inset-block-start: auto;
-	background-color: rgba(0, 0, 0, 0.4);
-	padding-inline: 0.5em;
-	padding-block: 0.3em;
-	line-height: 1.2;
-	color: white;
+  position: absolute;
+  inset: 0;
+  inset-block-start: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+  padding-inline: 0.5em;
+  padding-block: 0.3em;
+  line-height: 1.2;
+  color: white;
 }
 
 /* =============================================
@@ -62,16 +62,16 @@
    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);
+  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%);
+  block-size: var(--_gallery-image-block-size, auto);
+  width: var(--_gallery-image-width, 100%);
 }
 
 /* =============================================
@@ -83,59 +83,66 @@
    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;
+  --_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;
+  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;
+  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;
+  scroll-behavior: smooth;
 }
 
 :host([variant="filmstrip"]) .gallery__slot::-webkit-scrollbar {
-	display: none;
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([variant="filmstrip"]) .gallery__slot {
+    scroll-behavior: auto;
+  }
 }
 
 :host([variant="filmstrip"]) .gallery__slot::slotted(*) {
-	flex: 0 0 auto;
-	block-size: 100%;
-	scroll-snap-align: start;
+  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%;
-		}
-	}
+  @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;
-	}
+  from {
+    opacity: 0.3;
+    scale: 0.92;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
 }

package/src/components/gallery/gallery.js

@@ -1,6 +1,6 @@
-import { GrantCodesGallery } from "./gallery.component.js";
+import { GrantCodesGallery } from './gallery.component.js';
 
-export * from "./gallery.component.js";
+export * from './gallery.component.js';
 export default GrantCodesGallery;
 
-customElements.define("grantcodes-gallery", GrantCodesGallery);
+customElements.define('grantcodes-gallery', GrantCodesGallery);

package/src/components/gallery/gallery.react.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { createComponent } from "@lit/react";
-import { GrantCodesGallery } from "./gallery.js";
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { GrantCodesGallery } from './gallery.js';
 
 export const Gallery = createComponent({
-	tagName: "grantcodes-gallery",
-	elementClass: GrantCodesGallery,
-	react: React,
+  tagName: 'grantcodes-gallery',
+  elementClass: GrantCodesGallery,
+  react: React,
 });

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

@@ -1,58 +1,59 @@
-import { html } from "lit/static-html.js";
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-const { events, args, argTypes, template } =
-	getStorybookHelpers("grantcodes-gallery");
-import "./gallery.js";
-import "./gallery-image.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit/static-html.js';
+
+const { events, args, argTypes, template } = getStorybookHelpers('grantcodes-gallery');
+
+import './gallery.js';
+import './gallery-image.js';
 
 function getRandomSize() {
-	return Math.floor(Math.random() * (800 - 100 + 1) + 100);
+  return Math.floor(Math.random() * (800 - 100 + 1) + 100);
 }
 
 const getTestImage = () => {
-	const width = getRandomSize();
-	const height = getRandomSize();
+  const width = getRandomSize();
+  const height = getRandomSize();
 
-	return {
-		src: `https://picsum.photos/${width}/${height}`,
-		alt: "Image",
-		width,
-		height,
-	};
+  return {
+    src: `https://picsum.photos/${width}/${height}`,
+    alt: 'Image',
+    width,
+    height,
+  };
 };
 
 const testImages = [];
 for (let i = 0; i < 12; i++) {
-	testImages.push(getTestImage());
+  testImages.push(getTestImage());
 }
 
 const meta = {
-	title: "Components/Gallery",
-	component: "grantcodes-gallery",
-	args: {
-		...args,
-		caption: "This is a test caption",
-	},
-	argTypes,
-	render: (args) =>
-		template(
-			args,
-			html`${testImages.map(
-				({ src, alt, width, height }) =>
-					html`<grantcodes-gallery-image
+  title: 'Components/Gallery',
+  component: 'grantcodes-gallery',
+  args: {
+    ...args,
+    caption: 'This is a test caption',
+  },
+  argTypes,
+  render: (args) =>
+    template(
+      args,
+      html`${testImages.map(
+        ({ src, alt, width, height }) =>
+          html`<grantcodes-gallery-image
 						src=${src}
 						alt=${alt}
 						width=${width}
 						height=${height}
 						caption=${args.caption}
 					></grantcodes-gallery-image>`,
-			)}`,
-		),
-	parameters: {
-		actions: {
-			handles: events,
-		},
-	},
+      )}`,
+    ),
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
 };
 
 export default meta;
@@ -60,44 +61,44 @@ 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 },
+  { 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
+  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.",
-			},
-		},
-	},
+      )}`,
+    ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Filmstrip variant: images in a scrollable horizontal row at uniform height. Uses scroll-snap and scroll-driven animations.',
+      },
+    },
+  },
 };