@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/icon/icon.react.js

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

package/src/components/icon/icon.stories.js

@@ -1,22 +1,21 @@
-import { html } from "lit/static-html.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import "./icon.js";
-import { ArrowRight, Heart, Star, CheckCircle2 } from "../../icons.js";
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { html } from 'lit/static-html.js';
+import './icon.js';
+import { ArrowRight, CheckCircle2, Heart, Star } from '../../icons.js';
 
 const meta = {
-	title: "Components/Icon",
-	component: "grantcodes-icon",
+  title: 'Components/Icon',
+  component: 'grantcodes-icon',
 };
 
 export default meta;
 
 export const Icon = {
-	render: () =>
-		html`<grantcodes-icon>${unsafeHTML(ArrowRight)}</grantcodes-icon>`,
+  render: () => html`<grantcodes-icon>${unsafeHTML(ArrowRight)}</grantcodes-icon>`,
 };
 
 export const MultipleIcons = {
-	render: () => html`
+  render: () => html`
 		<div style="display: flex; gap: 1rem;">
 			<grantcodes-icon>${unsafeHTML(Heart)}</grantcodes-icon>
 			<grantcodes-icon>${unsafeHTML(Star)}</grantcodes-icon>

package/src/components/icon/icon.test.js

@@ -1,56 +1,55 @@
-import { describe, it, afterEach } from "node:test";
-import { strict as assert } from "node:assert";
-import { fixture, cleanup } from "../../test-utils/index.js";
-import "./icon.js";
-
-describe("Icon Component", () => {
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("should render with default properties", async () => {
-		element = await fixture("grantcodes-icon");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
-
-	it("should have icon wrapper span", async () => {
-		element = await fixture("grantcodes-icon");
-		const iconSpan = element.shadowRoot.querySelector(".icon");
-		assert.ok(iconSpan, "Icon span should exist");
-	});
-
-	it("should have slot for SVG content", async () => {
-		element = await fixture("grantcodes-icon");
-		const slot = element.shadowRoot.querySelector("slot");
-		assert.ok(slot, "Slot should exist");
-	});
-
-	it("should render slotted SVG content", async () => {
-		element = await fixture("grantcodes-icon");
-		const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-		svg.setAttribute("width", "24");
-		svg.setAttribute("height", "24");
-		element.appendChild(svg);
-
-		await element.updateComplete;
-
-		const slottedSvg = element.querySelector("svg");
-		assert.ok(slottedSvg, "SVG should be slotted");
-		assert.strictEqual(slottedSvg.getAttribute("width"), "24");
-	});
-
-	it("should accept any SVG as slot content", async () => {
-		element = await fixture("grantcodes-icon");
-		element.innerHTML =
-			'<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>';
-
-		await element.updateComplete;
-
-		const svg = element.querySelector("svg");
-		assert.ok(svg, "SVG should be present");
-		assert.ok(svg.querySelector("circle"), "SVG content should be preserved");
-	});
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, fixture } from '../../test-utils/index.js';
+import './icon.js';
+
+describe('Icon Component', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('should render with default properties', async () => {
+    element = await fixture('grantcodes-icon');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  it('should have icon wrapper span', async () => {
+    element = await fixture('grantcodes-icon');
+    const iconSpan = element.shadowRoot.querySelector('.icon');
+    assert.ok(iconSpan, 'Icon span should exist');
+  });
+
+  it('should have slot for SVG content', async () => {
+    element = await fixture('grantcodes-icon');
+    const slot = element.shadowRoot.querySelector('slot');
+    assert.ok(slot, 'Slot should exist');
+  });
+
+  it('should render slotted SVG content', async () => {
+    element = await fixture('grantcodes-icon');
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('width', '24');
+    svg.setAttribute('height', '24');
+    element.appendChild(svg);
+
+    await element.updateComplete;
+
+    const slottedSvg = element.querySelector('svg');
+    assert.ok(slottedSvg, 'SVG should be slotted');
+    assert.strictEqual(slottedSvg.getAttribute('width'), '24');
+  });
+
+  it('should accept any SVG as slot content', async () => {
+    element = await fixture('grantcodes-icon');
+    element.innerHTML = '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>';
+
+    await element.updateComplete;
+
+    const svg = element.querySelector('svg');
+    assert.ok(svg, 'SVG should be present');
+    assert.ok(svg.querySelector('circle'), 'SVG content should be preserved');
+  });
 });

package/src/components/icon/index.js

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

package/src/components/loading/index.js

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

package/src/components/loading/loading.component.js

@@ -1,21 +1,48 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import loadingStyles from "./loading.css" with { type: "css" };
+import { LitElement, nothing } from 'lit';
+import { html } from 'lit/static-html.js';
+import { SlotPresenceController } from '../../lib/slot-presence-controller.js';
+import loadingStyles from './loading.css' with { type: 'css' };
 
 export class GrantCodesLoading 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 = [loadingStyles];
+  // 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 = [loadingStyles];
 
-	// Define reactive properties--updating a reactive property causes
-	// the component to update.
+  // Define reactive properties--updating a reactive property causes
+  // the component to update.
+  static properties = {
+    _hasLabel: { state: true },
+  };
 
-	render() {
-		return html`
-      <span class="loading">
-        <slot></slot>
+  constructor() {
+    super();
+
+    // Slotted text is visually hidden and doubles as the status label.
+    this._hasLabel = false;
+    this._labelPresence = new SlotPresenceController(this, '', (present) => {
+      this._hasLabel = present;
+    });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('aria-busy', 'true');
+  }
+
+  _handleSlotChange() {
+    this._labelPresence.refresh();
+  }
+
+  render() {
+    return html`
+      <span
+        class="loading"
+        role="status"
+        aria-label=${this._hasLabel ? nothing : 'Loading'}
+      >
+        <slot @slotchange=${this._handleSlotChange}></slot>
       </span>
     `;
-	}
+  }
 }

package/src/components/loading/loading.css

@@ -1,43 +1,60 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	--height: 0.5rem;
-	--inner-width: 40%;
-	--starting-position: calc(0% - (var(--inner-width) * 2));
-	--ending-position: calc(100% + (var(--inner-width) * 2));
+  --height: 0.5rem;
+  --inner-width: 40%;
+  --starting-position: calc(0% - (var(--inner-width) * 2));
+  --ending-position: calc(100% + (var(--inner-width) * 2));
 }
 
 .loading {
-	display: block;
-	height: var(--height);
-	border-radius: calc(var(--height) / 2);
-	overflow: hidden;
-	padding-top: var(--height);
-	background-repeat: no-repeat;
-	background-color: var(--g-color-primary-500);
-	background-image: linear-gradient(
-		to right,
-		transparent 0%,
-		var(--g-color-background-shimmer) 10%,
-		var(--g-color-background-shimmer) 90%,
-		transparent 100%
-	);
-	background-size: var(--inner-width) 100%;
-	background-position-x: var(--starting-position);
-	animation: loading 2s linear infinite;
-	/* This is probably a bad way of hiding the text */
-	font-size: 0;
+  display: block;
+  height: var(--height);
+  border-radius: calc(var(--height) / 2);
+  overflow: hidden;
+  padding-top: var(--height);
+  background-repeat: no-repeat;
+  background-color: var(--g-color-primary-500);
+  background-image: linear-gradient(
+    to right,
+    transparent 0%,
+    var(--g-color-background-shimmer) 10%,
+    var(--g-color-background-shimmer) 90%,
+    transparent 100%
+  );
+  background-size: var(--inner-width) 100%;
+  background-position-x: var(--starting-position);
+  animation: loading 2s linear infinite;
+  /* This is probably a bad way of hiding the text */
+  font-size: 0;
 }
 
 @keyframes loading {
-	0% {
-		background-position-x: var(--starting-position);
-	}
-	100% {
-		background-position-x: var(--ending-position);
-	}
+  0% {
+    background-position-x: var(--starting-position);
+  }
+  100% {
+    background-position-x: var(--ending-position);
+  }
+}
+
+/* A static bar reads as stuck, so reduced motion gets a pulse instead of movement. */
+@media (prefers-reduced-motion: reduce) {
+  .loading {
+    animation: loading-pulse 2s ease-in-out infinite;
+  }
+}
+
+@keyframes loading-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
 }

package/src/components/loading/loading.js

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

package/src/components/loading/loading.react.js

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

package/src/components/loading/loading.stories.js

@@ -1,23 +1,24 @@
-import { html } from "lit/static-html.js";
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-const { events, args, argTypes, template } =
-	getStorybookHelpers("grantcodes-loading");
-import "./loading.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit/static-html.js';
+
+const { events, args, argTypes, template } = getStorybookHelpers('grantcodes-loading');
+
+import './loading.js';
 
 const meta = {
-	title: "Components/Loading",
-	component: "grantcodes-loading",
-	args: {
-		...args,
-		text: "Loading...",
-	},
-	argTypes,
-	render: (args) => template(args, html`${args.text}`),
-	parameters: {
-		actions: {
-			handles: events,
-		},
-	},
+  title: 'Components/Loading',
+  component: 'grantcodes-loading',
+  args: {
+    ...args,
+    text: 'Loading...',
+  },
+  argTypes,
+  render: (args) => template(args, html`${args.text}`),
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
 };
 
 export default meta;

package/src/components/loading/loading.test.js

@@ -1,55 +1,78 @@
-import { describe, it, afterEach } from "node:test";
-import { strict as assert } from "node:assert";
-import { fixture, cleanup } from "../../test-utils/index.js";
-import "./loading.js";
-
-describe("Loading Component", () => {
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("should render with default properties", async () => {
-		element = await fixture("grantcodes-loading");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
-
-	it("should have loading wrapper span", async () => {
-		element = await fixture("grantcodes-loading");
-		const loadingSpan = element.shadowRoot.querySelector(".loading");
-		assert.ok(loadingSpan, "Loading span should exist");
-	});
-
-	it("should have slot for content", async () => {
-		element = await fixture("grantcodes-loading");
-		const slot = element.shadowRoot.querySelector("slot");
-		assert.ok(slot, "Slot should exist");
-	});
-
-	it("should render slotted content", async () => {
-		element = await fixture("grantcodes-loading");
-		element.textContent = "Loading...";
-
-		await element.updateComplete;
-
-		assert.strictEqual(
-			element.textContent,
-			"Loading...",
-			"Slotted text should be present",
-		);
-	});
-
-	it("should support custom loading indicators", async () => {
-		element = await fixture("grantcodes-loading");
-		const spinner = document.createElement("div");
-		spinner.className = "custom-spinner";
-		element.appendChild(spinner);
-
-		await element.updateComplete;
-
-		const customSpinner = element.querySelector(".custom-spinner");
-		assert.ok(customSpinner, "Custom spinner should be slotted");
-	});
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, fixture } from '../../test-utils/index.js';
+import './loading.js';
+
+describe('Loading Component', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('should render with default properties', async () => {
+    element = await fixture('grantcodes-loading');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  it('should have loading wrapper span', async () => {
+    element = await fixture('grantcodes-loading');
+    const loadingSpan = element.shadowRoot.querySelector('.loading');
+    assert.ok(loadingSpan, 'Loading span should exist');
+  });
+
+  it('should have slot for content', async () => {
+    element = await fixture('grantcodes-loading');
+    const slot = element.shadowRoot.querySelector('slot');
+    assert.ok(slot, 'Slot should exist');
+  });
+
+  it('should render slotted content', async () => {
+    element = await fixture('grantcodes-loading');
+    element.textContent = 'Loading...';
+
+    await element.updateComplete;
+
+    assert.strictEqual(element.textContent, 'Loading...', 'Slotted text should be present');
+  });
+
+  it('should support custom loading indicators', async () => {
+    element = await fixture('grantcodes-loading');
+    const spinner = document.createElement('div');
+    spinner.className = 'custom-spinner';
+    element.appendChild(spinner);
+
+    await element.updateComplete;
+
+    const customSpinner = element.querySelector('.custom-spinner');
+    assert.ok(customSpinner, 'Custom spinner should be slotted');
+  });
+
+  it('should expose status semantics', async () => {
+    element = await fixture('grantcodes-loading');
+
+    const span = element.shadowRoot.querySelector('.loading');
+    assert.strictEqual(span.getAttribute('role'), 'status', 'Loading should be a status region');
+    assert.strictEqual(
+      span.getAttribute('aria-label'),
+      'Loading',
+      'Status region needs a fallback name',
+    );
+    assert.strictEqual(element.getAttribute('aria-busy'), 'true', 'Host should be marked busy');
+  });
+
+  it('should let slotted text name the status region', async () => {
+    element = document.createElement('grantcodes-loading');
+    element.textContent = 'Loading images';
+    document.body.appendChild(element);
+    await element.updateComplete;
+
+    const span = element.shadowRoot.querySelector('.loading');
+    assert.strictEqual(
+      span.hasAttribute('aria-label'),
+      false,
+      'Slotted text already names the status region',
+    );
+  });
 });

package/src/components/logo-cloud/index.js

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

package/src/components/logo-cloud/logo-cloud.component.js

@@ -1,54 +1,50 @@
-import { LitElement, html } from "lit";
-import logoCloudStyles from "./logo-cloud.css" with { type: "css" };
-import "../container/container.js";
+import { html, LitElement } from 'lit';
+import logoCloudStyles from './logo-cloud.css' with { type: 'css' };
+import '../container/container.js';
 
 export class GrantCodesLogoCloud extends LitElement {
-	static styles = [logoCloudStyles];
+  static styles = [logoCloudStyles];
 
-	static properties = {
-		/**
-		 * Optional label shown above the logos.
-		 * @type {string}
-		 */
-		title: { type: String },
-		/**
-		 * Logo items as a JSON string array: `[{"name":"...","src":"...","alt":"...","href":"..."}]`.
-		 * @type {string}
-		 */
-		logos: { type: String },
-	};
+  static properties = {
+    /**
+     * Optional label shown above the logos.
+     * @type {string}
+     */
+    title: { type: String },
+    /**
+     * Logo items as a JSON string array: `[{"name":"...","src":"...","alt":"...","href":"..."}]`.
+     * @type {string}
+     */
+    logos: { type: String },
+  };
 
-	constructor() {
-		super();
-		this.title = "";
-		this.logos = "[]";
-	}
+  constructor() {
+    super();
+    this.title = '';
+    this.logos = '[]';
+  }
 
-	get _logos() {
-		try {
-			return JSON.parse(this.logos);
-		} catch {
-			return [];
-		}
-	}
+  get _logos() {
+    try {
+      return JSON.parse(this.logos);
+    } catch {
+      return [];
+    }
+  }
 
-	render() {
-		const logos = this._logos;
-		return html`
+  render() {
+    const logos = this._logos;
+    return html`
 			<section class="logo-cloud">
 				<grantcodes-container>
-					${
-						this.title
-							? html`<p class="logo-cloud__title">${this.title}</p>`
-							: null
-					}
+					${this.title ? html`<p class="logo-cloud__title">${this.title}</p>` : null}
 					<ul class="logo-cloud__grid" role="list">
 						${logos.map(
-							(logo) => html`
+              (logo) => html`
 								<li class="logo-cloud__item">
 									${
-										logo.href
-											? html`
+                    logo.href
+                      ? html`
 												<a
 													href=${logo.href}
 													class="logo-cloud__link"
@@ -62,7 +58,7 @@ export class GrantCodesLogoCloud extends LitElement {
 													/>
 												</a>
 											`
-											: html`
+                      : html`
 												<img
 													src=${logo.src}
 													alt=${logo.alt ?? logo.name}
@@ -70,13 +66,13 @@ export class GrantCodesLogoCloud extends LitElement {
 													loading="lazy"
 												/>
 											`
-									}
+                  }
 								</li>
 							`,
-						)}
+            )}
 					</ul>
 				</grantcodes-container>
 			</section>
 		`;
-	}
+  }
 }