@grantcodes/ui 2.15.7 → 2.16.0

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

@@ -1,89 +1,96 @@
-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;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("should render with default properties", async () => {
-		element = await fixture("grantcodes-gallery");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
-
-	it("should render gallery wrapper", async () => {
-		element = await fixture("grantcodes-gallery");
-		const gallery = element.shadowRoot.querySelector(".gallery");
-		assert.ok(gallery, "Gallery element should exist");
-	});
-
-	it("should have slot for gallery items", async () => {
-		element = await fixture("grantcodes-gallery");
-		const slot = element.shadowRoot.querySelector("slot");
-		assert.ok(slot, "Slot should exist");
-		assert.ok(
-			slot.classList.contains("gallery__slot"),
-			"Slot should have gallery__slot class",
-		);
-	});
-
-	it("should support multiple image slots", async () => {
-		element = await fixture("grantcodes-gallery");
-
-		const img1 = document.createElement("img");
-		img1.src = "image1.jpg";
-		const img2 = document.createElement("img");
-		img2.src = "image2.jpg";
-
-		element.appendChild(img1);
-		element.appendChild(img2);
-
-		await element.updateComplete;
-
-		assert.strictEqual(element.children.length, 2, "Should have two images");
-	});
-
-	it("should initialize images array", async () => {
-		element = await fixture("grantcodes-gallery");
-		assert.ok(Array.isArray(element.images), "Images should be an array");
-		assert.strictEqual(
-			element.images.length,
-			0,
-			"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",
-			);
-		});
-	});
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, fixture } from '../../test-utils/index.js';
+import './gallery.js';
+import './gallery-image.js';
+
+describe('Gallery Component', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('should render with default properties', async () => {
+    element = await fixture('grantcodes-gallery');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  it('should render gallery wrapper', async () => {
+    element = await fixture('grantcodes-gallery');
+    const gallery = element.shadowRoot.querySelector('.gallery');
+    assert.ok(gallery, 'Gallery element should exist');
+  });
+
+  it('should have slot for gallery items', async () => {
+    element = await fixture('grantcodes-gallery');
+    const slot = element.shadowRoot.querySelector('slot');
+    assert.ok(slot, 'Slot should exist');
+    assert.ok(slot.classList.contains('gallery__slot'), 'Slot should have gallery__slot class');
+  });
+
+  it('should support multiple image slots', async () => {
+    element = await fixture('grantcodes-gallery');
+
+    const img1 = document.createElement('img');
+    img1.src = 'image1.jpg';
+    const img2 = document.createElement('img');
+    img2.src = 'image2.jpg';
+
+    element.appendChild(img1);
+    element.appendChild(img2);
+
+    await element.updateComplete;
+
+    assert.strictEqual(element.children.length, 2, 'Should have two images');
+  });
+
+  it('should initialize images array', async () => {
+    element = await fixture('grantcodes-gallery');
+    assert.ok(Array.isArray(element.images), 'Images should be an array');
+    assert.strictEqual(element.images.length, 0, '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',
+      );
+    });
+
+    it('should make the filmstrip scroller keyboard reachable and named', async () => {
+      element = await fixture('grantcodes-gallery', { variant: 'filmstrip' });
+
+      const slot = element.shadowRoot.querySelector('.gallery__slot');
+      assert.strictEqual(slot.getAttribute('tabindex'), '0', 'Scroller should be focusable');
+      assert.strictEqual(slot.getAttribute('role'), 'region', 'Scroller should be a region');
+      assert.strictEqual(slot.getAttribute('aria-label'), 'Gallery', 'Region should be named');
+    });
+
+    it('should not add a tab stop to the non-scrolling grid', async () => {
+      element = await fixture('grantcodes-gallery');
+
+      const slot = element.shadowRoot.querySelector('.gallery__slot');
+      assert.strictEqual(slot.hasAttribute('tabindex'), false, 'Grid should not be a tab stop');
+      assert.strictEqual(slot.hasAttribute('role'), false, 'Grid should not be a region');
+      assert.strictEqual(slot.hasAttribute('aria-label'), false, 'Grid needs no label');
+    });
+  });
 });

package/src/components/gallery/index.js

@@ -1,2 +1,2 @@
-export * from "./gallery.js";
-export * from "./gallery-image.js";
+export * from './gallery.js';
+export * from './gallery-image.js';

package/src/components/hero/hero.component.js

@@ -1,73 +1,69 @@
-import { LitElement, html } from "lit";
-import heroStyles from "./hero.css" with { type: "css" };
-import "../button/button.js";
+import { html, LitElement } from 'lit';
+import heroStyles from './hero.css' with { type: 'css' };
+import '../button/button.js';
 
 export class GrantCodesHero extends LitElement {
-	static styles = [heroStyles];
+  static styles = [heroStyles];
 
-	static properties = {
-		/**
-		 * Main heading text.
-		 * @type {string}
-		 */
-		title: { type: String },
-		/**
-		 * Supporting paragraph text shown below the title.
-		 * @type {string}
-		 */
-		subtitle: { type: String },
-		/**
-		 * Label for the CTA button. Only rendered when `href` is also set.
-		 * @type {string}
-		 */
-		button: { type: String },
-		/**
-		 * URL the CTA button links to.
-		 * @type {string}
-		 */
-		href: { type: String },
-		/**
-		 * Controls the vertical height of the hero section.
-		 * @type {'sm' | 'md' | 'lg'}
-		 */
-		size: { type: String, reflect: true },
-		/**
-		 * Whether to center-align text content.
-		 * @type {boolean}
-		 */
-		center: { type: Boolean, reflect: true },
-	};
+  static properties = {
+    /**
+     * Main heading text.
+     * @type {string}
+     */
+    title: { type: String },
+    /**
+     * Supporting paragraph text shown below the title.
+     * @type {string}
+     */
+    subtitle: { type: String },
+    /**
+     * Label for the CTA button. Only rendered when `href` is also set.
+     * @type {string}
+     */
+    button: { type: String },
+    /**
+     * URL the CTA button links to.
+     * @type {string}
+     */
+    href: { type: String },
+    /**
+     * Controls the vertical height of the hero section.
+     * @type {'sm' | 'md' | 'lg'}
+     */
+    size: { type: String, reflect: true },
+    /**
+     * Whether to center-align text content.
+     * @type {boolean}
+     */
+    center: { type: Boolean, reflect: true },
+  };
 
-	constructor() {
-		super();
-		this.title = "";
-		this.subtitle = "";
-		this.button = "";
-		this.href = "";
-		this.size = "md";
-		this.center = false;
-	}
+  constructor() {
+    super();
+    this.title = '';
+    this.subtitle = '';
+    this.button = '';
+    this.href = '';
+    this.size = 'md';
+    this.center = false;
+  }
 
-	render() {
-		return html`
+  render() {
+    return html`
 			<section class="hero">
 				<div class="hero__container">
 					<h1 class="hero__title">${this.title}</h1>
+					${this.subtitle ? html`<p class="hero__text">${this.subtitle}</p>` : null}
 					${
-						this.subtitle
-							? html`<p class="hero__text">${this.subtitle}</p>`
-							: null
-					}
-					${
-						this.href && this.button
-							? html`<grantcodes-button href=${this.href}
+            this.href && this.button
+              ? html`<grantcodes-button href=${this.href}
 								>${this.button}</grantcodes-button
 							>`
-							: null
-					}
+              : null
+          }
 					<slot></slot>
 				</div>
 			</section>
 		`;
-	}
+  }
 }

package/src/components/hero/hero.css

@@ -1,61 +1,61 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .hero {
-	display: flex;
-	width: 100%;
-	justify-content: center;
-	align-items: center;
-	min-height: 50vh;
-	padding: var(--g-spacing-2xl) var(--g-spacing-md);
-	background: linear-gradient(
-		135deg,
-		var(--g-color-background-primary-knockout),
-		var(--g-color-primary-900)
-	);
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  min-height: 50vh;
+  padding: var(--g-spacing-2xl) var(--g-spacing-md);
+  background: linear-gradient(
+    135deg,
+    var(--g-color-background-primary-knockout),
+    var(--g-color-primary-900)
+  );
 }
 
 .hero__container {
-	width: 100%;
-	max-width: 65ch;
-	gap: var(--g-spacing-lg);
+  width: 100%;
+  max-width: 65ch;
+  gap: var(--g-spacing-lg);
 }
 
 :host([center]) .hero {
-	text-align: center;
+  text-align: center;
 }
 
 :host([center]) .hero__container {
-	margin-inline: auto;
+  margin-inline: auto;
 }
 
 .hero__title {
-	font: var(--g-typography-h1-font);
-	color: var(--g-color-content-primary-knockout);
+  font: var(--g-typography-h1-font);
+  color: var(--g-color-content-primary-knockout);
 }
 
 .hero__text {
-	font: var(--g-typography-body-lg-font);
-	color: var(--g-color-content-primary-knockout);
+  font: var(--g-typography-body-lg-font);
+  color: var(--g-color-content-primary-knockout);
 }
 
 :host([size="sm"]) .hero {
-	min-height: 30vh;
-	padding: var(--g-spacing-xl) var(--g-spacing-md);
+  min-height: 30vh;
+  padding: var(--g-spacing-xl) var(--g-spacing-md);
 }
 
 :host([size="lg"]) .hero {
-	min-height: 70vh;
-	padding: var(--g-spacing-3xl) var(--g-spacing-md);
+  min-height: 70vh;
+  padding: var(--g-spacing-3xl) var(--g-spacing-md);
 }
 
 ::slotted(*) {
-	color: var(--g-color-content-primary-knockout, #ffffff);
+  color: var(--g-color-content-primary-knockout, #ffffff);
 }

package/src/components/hero/hero.js

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

package/src/components/hero/hero.react.js

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

package/src/components/hero/hero.stories.js

@@ -1,20 +1,20 @@
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-import { html } from "lit";
-import "./hero.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit';
+import './hero.js';
 
-const { events, args, argTypes } = getStorybookHelpers("grantcodes-hero");
+const { events, args, argTypes } = getStorybookHelpers('grantcodes-hero');
 
 const meta = {
-	title: "Blocks/Hero",
-	component: "grantcodes-hero",
-	args,
-	argTypes,
-	parameters: {
-		actions: {
-			handles: events,
-		},
-		layout: "fullscreen",
-	},
+  title: 'Blocks/Hero',
+  component: 'grantcodes-hero',
+  args,
+  argTypes,
+  parameters: {
+    actions: {
+      handles: events,
+    },
+    layout: 'fullscreen',
+  },
 };
 
 export default meta;
@@ -23,34 +23,34 @@ export default meta;
  * Default hero with title, subtitle, and CTA.
  */
 export const Default = {
-	args: {
-		title: "Build something great",
-		subtitle: "A personal web component library with a custom design system.",
-		button: "Get started",
-		href: "/docs",
-		size: "md",
-	},
+  args: {
+    title: 'Build something great',
+    subtitle: 'A personal web component library with a custom design system.',
+    button: 'Get started',
+    href: '/docs',
+    size: 'md',
+  },
 };
 
 /**
  * Centered hero — explicitly center-aligns text content.
  */
 export const Centered = {
-	args: {
-		title: "Build something great",
-		subtitle: "A personal web component library with a custom design system.",
-		button: "Get started",
-		href: "/docs",
-		size: "md",
-		center: true,
-	},
+  args: {
+    title: 'Build something great',
+    subtitle: 'A personal web component library with a custom design system.',
+    button: 'Get started',
+    href: '/docs',
+    size: 'md',
+    center: true,
+  },
 };
 
 /**
  * Hero with slotted content — custom HTML inside the hero.
  */
 export const WithSlottedContent = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-hero
 			title="Event countdown"
 			subtitle="Something exciting is coming soon."
@@ -65,19 +65,19 @@ export const WithSlottedContent = {
  * Small hero — useful for inner page headers.
  */
 export const Small = {
-	args: {
-		title: "About this project",
-		subtitle: "A brief overview of what we're building.",
-		size: "sm",
-	},
+  args: {
+    title: 'About this project',
+    subtitle: "A brief overview of what we're building.",
+    size: 'sm',
+  },
 };
 
 /**
  * Large hero with no CTA.
  */
 export const Large = {
-	args: {
-		title: "Welcome",
-		size: "lg",
-	},
+  args: {
+    title: 'Welcome',
+    size: 'lg',
+  },
 };

package/src/components/hero/index.js

@@ -1 +1 @@
-export * from "./hero.js";
+export * from './hero.js';

package/src/components/icon/icon.component.js

@@ -1,14 +1,14 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import iconStyles from "./icon.css" with { type: "css" };
+import { LitElement } from 'lit';
+import { html } from 'lit/static-html.js';
+import iconStyles from './icon.css' with { type: 'css' };
 
 export class GrantCodesIcon 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 = [iconStyles];
+  // 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 = [iconStyles];
 
-	render() {
-		return html`<span class="icon"><slot></slot></span>`;
-	}
+  render() {
+    return html`<span class="icon"><slot></slot></span>`;
+  }
 }

package/src/components/icon/icon.css

@@ -1,32 +1,32 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .icon {
-	display: block;
-	color: inherit;
-	width: 1em;
-	height: 1em;
+  display: block;
+  color: inherit;
+  width: 1em;
+  height: 1em;
 }
 
 .icon ::slotted(svg) {
-	display: block;
-	width: 100%;
-	height: 100%;
-	object-fit: contain;
-	object-position: center;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
 }
 
 .icon ::slotted(svg:not([fill])) {
-	fill: currentColor;
+  fill: currentColor;
 }
 
 .icon ::slotted(svg:not([stoke])) {
-	stroke: currentColor;
+  stroke: currentColor;
 }

package/src/components/icon/icon.js

@@ -1,8 +1,8 @@
-import { GrantCodesIcon } from "./icon.component.js";
+import { GrantCodesIcon } from './icon.component.js';
 
-export * from "./icon.component.js";
+export * from './icon.component.js';
 export default GrantCodesIcon;
 
-if (!customElements.get("grantcodes-icon")) {
-	customElements.define("grantcodes-icon", GrantCodesIcon);
+if (!customElements.get('grantcodes-icon')) {
+  customElements.define('grantcodes-icon', GrantCodesIcon);
 }