@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/container/container.test.js

@@ -1,82 +1,70 @@
-import { describe, it, afterEach } from "node:test";
-import { strict as assert } from "node:assert";
-import { fixture, cleanup } from "../../test-utils/index.js";
-import "./container.js";
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, fixture } from '../../test-utils/index.js';
+import './container.js';
 
-describe("Container Component", () => {
-	let element;
+describe('Container Component', () => {
+  let element;
 
-	afterEach(() => {
-		cleanup(element);
-	});
+  afterEach(() => {
+    cleanup(element);
+  });
 
-	it("should render with default properties", async () => {
-		element = await fixture("grantcodes-container");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
+  it('should render with default properties', async () => {
+    element = await fixture('grantcodes-container');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
 
-	it("should render default align variant", async () => {
-		element = await fixture("grantcodes-container");
-		const container = element.shadowRoot.querySelector(".container");
-		assert.ok(container, "Container element should exist");
-	});
+  it('should render default align variant', async () => {
+    element = await fixture('grantcodes-container');
+    const container = element.shadowRoot.querySelector('.container');
+    assert.ok(container, 'Container element should exist');
+  });
 
-	it("should apply wide alignment class", async () => {
-		element = await fixture("grantcodes-container", {
-			align: "wide",
-		});
+  it('should apply wide alignment class', async () => {
+    element = await fixture('grantcodes-container', {
+      align: 'wide',
+    });
 
-		const container = element.shadowRoot.querySelector(".container");
-		assert.ok(
-			container.classList.contains("container--wide"),
-			"Should have wide class",
-		);
-	});
+    const container = element.shadowRoot.querySelector('.container');
+    assert.ok(container.classList.contains('container--wide'), 'Should have wide class');
+  });
 
-	it("should apply full alignment class", async () => {
-		element = await fixture("grantcodes-container", {
-			align: "full",
-		});
+  it('should apply full alignment class', async () => {
+    element = await fixture('grantcodes-container', {
+      align: 'full',
+    });
 
-		const container = element.shadowRoot.querySelector(".container");
-		assert.ok(
-			container.classList.contains("container--full"),
-			"Should have full class",
-		);
-	});
+    const container = element.shadowRoot.querySelector('.container');
+    assert.ok(container.classList.contains('container--full'), 'Should have full class');
+  });
 
-	it("should apply viewport alignment class", async () => {
-		element = await fixture("grantcodes-container", {
-			align: "viewport",
-		});
+  it('should apply viewport alignment class', async () => {
+    element = await fixture('grantcodes-container', {
+      align: 'viewport',
+    });
 
-		const container = element.shadowRoot.querySelector(".container");
-		assert.ok(
-			container.classList.contains("container--viewport"),
-			"Should have viewport class",
-		);
-	});
+    const container = element.shadowRoot.querySelector('.container');
+    assert.ok(container.classList.contains('container--viewport'), 'Should have viewport class');
+  });
 
-	it("should apply nopad class when nopad is true", async () => {
-		element = await fixture("grantcodes-container", {
-			nopad: true,
-		});
+  it('should apply nopad class when nopad is true', async () => {
+    element = await fixture('grantcodes-container', {
+      nopad: true,
+    });
 
-		const container = element.shadowRoot.querySelector(".container");
-		assert.ok(
-			container.classList.contains("container--nopad"),
-			"Should have nopad class",
-		);
-	});
+    const container = element.shadowRoot.querySelector('.container');
+    assert.ok(container.classList.contains('container--nopad'), 'Should have nopad class');
+  });
 
-	it("should render slotted content", async () => {
-		element = await fixture("grantcodes-container");
-		element.innerHTML = "<p>Container content</p>";
+  it('should render slotted content', async () => {
+    element = await fixture('grantcodes-container');
+    element.innerHTML = '<p>Container content</p>';
 
-		await element.updateComplete;
+    await element.updateComplete;
 
-		const slot = element.shadowRoot.querySelector("slot");
-		assert.ok(slot, "Slot should exist");
-	});
+    const slot = element.shadowRoot.querySelector('slot');
+    assert.ok(slot, 'Slot should exist');
+  });
 });

package/src/components/container/index.js

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

package/src/components/countdown/countdown.component.js

@@ -1,182 +1,180 @@
-import { LitElement, html, nothing } from "lit";
-import countdownStyles from "./countdown.css" with { type: "css" };
+import { html, LitElement, nothing } from 'lit';
+import countdownStyles from './countdown.css' with { type: 'css' };
 
 export class GrantCodesCountdown extends LitElement {
-	static styles = [countdownStyles];
-
-	static properties = {
-		/**
-		 * ISO 8601 datetime string for the countdown target.
-		 * @type {string}
-		 */
-		target: { type: String },
-		/**
-		 * Label for the days unit.
-		 * @type {string}
-		 */
-		"days-label": { type: String, attribute: "days-label" },
-		/**
-		 * Label for the hours unit.
-		 * @type {string}
-		 */
-		"hours-label": { type: String, attribute: "hours-label" },
-		/**
-		 * Label for the minutes unit.
-		 * @type {string}
-		 */
-		"minutes-label": { type: String, attribute: "minutes-label" },
-		/**
-		 * Label for the seconds unit (only shown when show-seconds is true).
-		 * @type {string}
-		 */
-		"seconds-label": { type: String, attribute: "seconds-label" },
-		/**
-		 * Message displayed when the target date has passed.
-		 * @type {string}
-		 */
-		"past-message": { type: String, attribute: "past-message" },
-		/**
-		 * Whether to show a seconds unit.
-		 * @type {boolean}
-		 */
-		"show-seconds": { type: Boolean, attribute: "show-seconds" },
-
-		/** @internal */
-		_days: { state: true },
-		/** @internal */
-		_hours: { state: true },
-		/** @internal */
-		_minutes: { state: true },
-		/** @internal */
-		_seconds: { state: true },
-		/** @internal */
-		_past: { state: true },
-	};
-
-	constructor() {
-		super();
-		this.target = "";
-		this["days-label"] = "days";
-		this["hours-label"] = "hours";
-		this["minutes-label"] = "minutes";
-		this["seconds-label"] = "seconds";
-		this["past-message"] = "The event has started!";
-		this["show-seconds"] = false;
-
-		this._days = "---";
-		this._hours = "--";
-		this._minutes = "--";
-		this._seconds = "--";
-		this._past = false;
-		this._intervalId = null;
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-		this._tick();
-		this._startInterval();
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._stopInterval();
-	}
-
-	updated(changed) {
-		if (changed.has("target") || changed.has("show-seconds")) {
-			this._stopInterval();
-			this._tick();
-			this._startInterval();
-		}
-		this._animateChangedValues(changed);
-	}
-
-	_startInterval() {
-		const interval = this["show-seconds"] ? 1000 : 60_000;
-		this._intervalId = setInterval(() => this._tick(), interval);
-	}
-
-	_stopInterval() {
-		if (this._intervalId !== null) {
-			clearInterval(this._intervalId);
-			this._intervalId = null;
-		}
-	}
-
-	_tick() {
-		if (!this.target) return;
-
-		const targetDate = new Date(this.target);
-		const now = new Date();
-		const diff = targetDate - now;
-
-		if (diff <= 0) {
-			this._past = true;
-			this._stopInterval();
-			return;
-		}
-
-		this._past = false;
-		const totalSeconds = Math.floor(diff / 1000);
-		const totalMinutes = Math.floor(totalSeconds / 60);
-		const totalHours = Math.floor(totalMinutes / 60);
-
-		const pad = (n) => String(n).padStart(2, "0");
-
-		this._days = Math.floor(totalHours / 24);
-		this._hours = pad(totalHours % 24);
-		this._minutes = pad(totalMinutes % 60);
-		this._seconds = pad(totalSeconds % 60);
-	}
-
-	/** Re-trigger the flip animation on value elements that changed. */
-	_animateChangedValues(changed) {
-		const keys = ["_days", "_hours", "_minutes", "_seconds"];
-		for (const key of keys) {
-			if (!changed.has(key)) continue;
-			const el = this.shadowRoot?.querySelector(
-				`[data-unit="${key.slice(1)}"]`,
-			);
-			if (!el) continue;
-			el.classList.remove("countdown__value--flip");
-			// Force reflow so re-adding the class restarts the animation
-			void el.offsetWidth;
-			el.classList.add("countdown__value--flip");
-		}
-	}
-
-	render() {
-		if (!this.target) return nothing;
-
-		if (this._past) {
-			return html`<div class="countdown__past">${this["past-message"]}</div>`;
-		}
-
-		return html`
+  static styles = [countdownStyles];
+
+  static properties = {
+    /**
+     * ISO 8601 datetime string for the countdown target.
+     * @type {string}
+     */
+    target: { type: String },
+    /**
+     * Label for the days unit.
+     * @type {string}
+     */
+    'days-label': { type: String, attribute: 'days-label' },
+    /**
+     * Label for the hours unit.
+     * @type {string}
+     */
+    'hours-label': { type: String, attribute: 'hours-label' },
+    /**
+     * Label for the minutes unit.
+     * @type {string}
+     */
+    'minutes-label': { type: String, attribute: 'minutes-label' },
+    /**
+     * Label for the seconds unit (only shown when show-seconds is true).
+     * @type {string}
+     */
+    'seconds-label': { type: String, attribute: 'seconds-label' },
+    /**
+     * Message displayed when the target date has passed.
+     * @type {string}
+     */
+    'past-message': { type: String, attribute: 'past-message' },
+    /**
+     * Whether to show a seconds unit.
+     * @type {boolean}
+     */
+    'show-seconds': { type: Boolean, attribute: 'show-seconds' },
+
+    /** @internal */
+    _days: { state: true },
+    /** @internal */
+    _hours: { state: true },
+    /** @internal */
+    _minutes: { state: true },
+    /** @internal */
+    _seconds: { state: true },
+    /** @internal */
+    _past: { state: true },
+  };
+
+  constructor() {
+    super();
+    this.target = '';
+    this['days-label'] = 'days';
+    this['hours-label'] = 'hours';
+    this['minutes-label'] = 'minutes';
+    this['seconds-label'] = 'seconds';
+    this['past-message'] = 'The event has started!';
+    this['show-seconds'] = false;
+
+    this._days = '---';
+    this._hours = '--';
+    this._minutes = '--';
+    this._seconds = '--';
+    this._past = false;
+    this._intervalId = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._tick();
+    this._startInterval();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._stopInterval();
+  }
+
+  updated(changed) {
+    if (changed.has('target') || changed.has('show-seconds')) {
+      this._stopInterval();
+      this._tick();
+      this._startInterval();
+    }
+    this._animateChangedValues(changed);
+  }
+
+  _startInterval() {
+    const interval = this['show-seconds'] ? 1000 : 60_000;
+    this._intervalId = setInterval(() => this._tick(), interval);
+  }
+
+  _stopInterval() {
+    if (this._intervalId !== null) {
+      clearInterval(this._intervalId);
+      this._intervalId = null;
+    }
+  }
+
+  _tick() {
+    if (!this.target) return;
+
+    const targetDate = new Date(this.target);
+    const now = new Date();
+    const diff = targetDate - now;
+
+    if (diff <= 0) {
+      this._past = true;
+      this._stopInterval();
+      return;
+    }
+
+    this._past = false;
+    const totalSeconds = Math.floor(diff / 1000);
+    const totalMinutes = Math.floor(totalSeconds / 60);
+    const totalHours = Math.floor(totalMinutes / 60);
+
+    const pad = (n) => String(n).padStart(2, '0');
+
+    this._days = Math.floor(totalHours / 24);
+    this._hours = pad(totalHours % 24);
+    this._minutes = pad(totalMinutes % 60);
+    this._seconds = pad(totalSeconds % 60);
+  }
+
+  /** Re-trigger the flip animation on value elements that changed. */
+  _animateChangedValues(changed) {
+    const keys = ['_days', '_hours', '_minutes', '_seconds'];
+    for (const key of keys) {
+      if (!changed.has(key)) continue;
+      const el = this.shadowRoot?.querySelector(`[data-unit="${key.slice(1)}"]`);
+      if (!el) continue;
+      el.classList.remove('countdown__value--flip');
+      // Force reflow so re-adding the class restarts the animation
+      void el.offsetWidth;
+      el.classList.add('countdown__value--flip');
+    }
+  }
+
+  render() {
+    if (!this.target) return nothing;
+
+    if (this._past) {
+      return html`<div class="countdown__past">${this['past-message']}</div>`;
+    }
+
+    return html`
 			<div class="countdown" role="timer" aria-label="Countdown">
 				<div class="countdown__unit">
 					<span class="countdown__value" data-unit="days">${this._days}</span>
-					<span class="countdown__label">${this["days-label"]}</span>
+					<span class="countdown__label">${this['days-label']}</span>
 				</div>
 				<div class="countdown__unit">
 					<span class="countdown__value" data-unit="hours">${this._hours}</span>
-					<span class="countdown__label">${this["hours-label"]}</span>
+					<span class="countdown__label">${this['hours-label']}</span>
 				</div>
 				<div class="countdown__unit">
 					<span class="countdown__value" data-unit="minutes">${this._minutes}</span>
-					<span class="countdown__label">${this["minutes-label"]}</span>
+					<span class="countdown__label">${this['minutes-label']}</span>
 				</div>
 				${
-					this["show-seconds"]
-						? html`
+          this['show-seconds']
+            ? html`
 						<div class="countdown__unit">
 							<span class="countdown__value" data-unit="seconds">${this._seconds}</span>
-							<span class="countdown__label">${this["seconds-label"]}</span>
+							<span class="countdown__label">${this['seconds-label']}</span>
 						</div>
 					`
-						: nothing
-				}
+            : nothing
+        }
 			</div>
 		`;
-	}
+  }
 }

package/src/components/countdown/countdown.css

@@ -1,62 +1,78 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .countdown {
-	display: flex;
-	justify-content: center;
-	gap: var(--g-spacing-lg, 2rem);
-	padding: var(--g-spacing-lg, 2rem) var(--g-spacing-md, 1rem);
-	text-align: center;
+  display: flex;
+  justify-content: center;
+  gap: var(--g-spacing-lg, 2rem);
+  padding: var(--g-spacing-lg, 2rem) var(--g-spacing-md, 1rem);
+  text-align: center;
 }
 
 .countdown__unit {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--g-spacing-xs, 0.25rem);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--g-spacing-xs, 0.25rem);
 }
 
 .countdown__value {
-	font-size: var(--g-typography-h1-font-size, 6.25rem);
-	font-weight: var(--g-typography-h1-font-weight, 900);
-	line-height: var(--g-typography-h1-line-height, 1.1);
-	color: var(--g-color-content-default);
-	font-variant-numeric: tabular-nums;
+  font-size: var(--g-typography-h1-font-size, 6.25rem);
+  font-weight: var(--g-typography-h1-font-weight, 900);
+  line-height: var(--g-typography-h1-line-height, 1.1);
+  color: var(--g-color-content-default);
+  font-variant-numeric: tabular-nums;
 }
 
 .countdown__value--flip {
-	animation: countdown-flip 0.35s ease-out;
+  animation: countdown-flip 0.35s ease-out;
+}
+
+/* Only the movement is dropped; the fade stays for everyone. */
+@media (prefers-reduced-motion: reduce) {
+  .countdown__value--flip {
+    animation-name: countdown-fade;
+  }
 }
 
 .countdown__label {
-	font-size: var(--g-typography-body-sm-font-size, 0.875rem);
-	color: var(--g-color-content-subtle);
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
+  font-size: var(--g-typography-body-sm-font-size, 0.875rem);
+  color: var(--g-color-content-subtle);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .countdown__past {
-	font-size: var(--g-typography-h2-font-size, 3rem);
-	font-weight: var(--g-typography-h2-font-weight, 900);
-	color: var(--g-color-content-default);
-	text-align: center;
-	padding: var(--g-spacing-lg, 2rem) var(--g-spacing-md, 1rem);
+  font-size: var(--g-typography-h2-font-size, 3rem);
+  font-weight: var(--g-typography-h2-font-weight, 900);
+  color: var(--g-color-content-default);
+  text-align: center;
+  padding: var(--g-spacing-lg, 2rem) var(--g-spacing-md, 1rem);
 }
 
 @keyframes countdown-flip {
-	0% {
-		opacity: 0;
-		transform: translateY(0.25em);
-	}
-	100% {
-		opacity: 1;
-		transform: translateY(0);
-	}
+  0% {
+    opacity: 0;
+    transform: translateY(0.25em);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes countdown-fade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }

package/src/components/countdown/countdown.js

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

package/src/components/countdown/countdown.react.js

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