@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/footer/footer.test.js

@@ -1,112 +1,102 @@
-import { describe, it, afterEach } from "node:test";
-import { strict as assert } from "node:assert";
-import { fixture, cleanup } from "../../test-utils/index.js";
-import "./footer.js";
-
-describe("Footer Component", () => {
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("should render with default properties", async () => {
-		element = await fixture("grantcodes-footer");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
-
-	it("should have 3 columns by default", async () => {
-		element = await fixture("grantcodes-footer");
-		assert.strictEqual(element.columns, 3, "Should have 3 columns by default");
-	});
-
-	it("should render footer element", async () => {
-		element = await fixture("grantcodes-footer");
-		const footer = element.shadowRoot.querySelector("footer");
-		assert.ok(footer, "Footer element should exist");
-	});
-
-	it("should render footer columns container", async () => {
-		element = await fixture("grantcodes-footer");
-		const columns = element.shadowRoot.querySelector(".footer__columns");
-		assert.ok(columns, "Columns container should exist");
-	});
-
-	it("should apply columns CSS variable", async () => {
-		element = await fixture("grantcodes-footer", {
-			columns: 4,
-		});
-
-		const columns = element.shadowRoot.querySelector(".footer__columns");
-		const style = columns.getAttribute("style");
-		assert.ok(
-			style.includes("--footer-columns: 4"),
-			"Should set columns CSS variable",
-		);
-	});
-
-	it("should have default content slot", async () => {
-		element = await fixture("grantcodes-footer");
-		const slot = element.shadowRoot.querySelector("slot:not([name])");
-		assert.ok(slot, "Default slot should exist");
-	});
-
-	it("should render bottom section when content is provided", async () => {
-		element = await fixture("grantcodes-footer");
-
-		// Add content to bottom slot
-		const bottomContent = document.createElement("div");
-		bottomContent.setAttribute("slot", "bottom");
-		bottomContent.textContent = "Bottom content";
-		element.appendChild(bottomContent);
-
-		await element.updateComplete;
-		// Force a re-render to check the slot
-		element.requestUpdate();
-		await element.updateComplete;
-
-		const bottom = element.shadowRoot.querySelector(".footer__bottom");
-		assert.ok(bottom, "Bottom section should exist when content is slotted");
-	});
-
-	it("should support different column counts", async () => {
-		const columnCounts = [1, 2, 3, 4, 5, 6];
-
-		for (const count of columnCounts) {
-			element = await fixture("grantcodes-footer", { columns: count });
-			assert.strictEqual(
-				element.columns,
-				count,
-				`Should support ${count} columns`,
-			);
-			cleanup(element);
-		}
-	});
-
-	it("should have footer container", async () => {
-		element = await fixture("grantcodes-footer");
-		const container = element.shadowRoot.querySelector("grantcodes-container");
-		assert.ok(container, "Footer container should exist");
-	});
-
-	it("should have footer class", async () => {
-		element = await fixture("grantcodes-footer");
-		const footer = element.shadowRoot.querySelector(".footer");
-		assert.ok(footer, "Should have footer class");
-	});
-
-	it("should render slotted content", async () => {
-		element = await fixture("grantcodes-footer");
-		const content = document.createElement("div");
-		content.textContent = "Footer content";
-		element.appendChild(content);
-
-		await element.updateComplete;
-
-		assert.ok(
-			element.querySelector("div"),
-			"Slotted content should be present",
-		);
-	});
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, fixture } from '../../test-utils/index.js';
+import './footer.js';
+
+describe('Footer Component', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('should render with default properties', async () => {
+    element = await fixture('grantcodes-footer');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  it('should have 3 columns by default', async () => {
+    element = await fixture('grantcodes-footer');
+    assert.strictEqual(element.columns, 3, 'Should have 3 columns by default');
+  });
+
+  it('should render footer element', async () => {
+    element = await fixture('grantcodes-footer');
+    const footer = element.shadowRoot.querySelector('footer');
+    assert.ok(footer, 'Footer element should exist');
+  });
+
+  it('should render footer columns container', async () => {
+    element = await fixture('grantcodes-footer');
+    const columns = element.shadowRoot.querySelector('.footer__columns');
+    assert.ok(columns, 'Columns container should exist');
+  });
+
+  it('should apply columns CSS variable', async () => {
+    element = await fixture('grantcodes-footer', {
+      columns: 4,
+    });
+
+    const columns = element.shadowRoot.querySelector('.footer__columns');
+    const style = columns.getAttribute('style');
+    assert.ok(style.includes('--footer-columns: 4'), 'Should set columns CSS variable');
+  });
+
+  it('should have default content slot', async () => {
+    element = await fixture('grantcodes-footer');
+    const slot = element.shadowRoot.querySelector('slot:not([name])');
+    assert.ok(slot, 'Default slot should exist');
+  });
+
+  it('should render bottom section when content is provided', async () => {
+    element = await fixture('grantcodes-footer');
+
+    // Add content to bottom slot
+    const bottomContent = document.createElement('div');
+    bottomContent.setAttribute('slot', 'bottom');
+    bottomContent.textContent = 'Bottom content';
+    element.appendChild(bottomContent);
+
+    await element.updateComplete;
+    // Force a re-render to check the slot
+    element.requestUpdate();
+    await element.updateComplete;
+
+    const bottom = element.shadowRoot.querySelector('.footer__bottom');
+    assert.ok(bottom, 'Bottom section should exist when content is slotted');
+  });
+
+  it('should support different column counts', async () => {
+    const columnCounts = [1, 2, 3, 4, 5, 6];
+
+    for (const count of columnCounts) {
+      element = await fixture('grantcodes-footer', { columns: count });
+      assert.strictEqual(element.columns, count, `Should support ${count} columns`);
+      cleanup(element);
+    }
+  });
+
+  it('should have footer container', async () => {
+    element = await fixture('grantcodes-footer');
+    const container = element.shadowRoot.querySelector('grantcodes-container');
+    assert.ok(container, 'Footer container should exist');
+  });
+
+  it('should have footer class', async () => {
+    element = await fixture('grantcodes-footer');
+    const footer = element.shadowRoot.querySelector('.footer');
+    assert.ok(footer, 'Should have footer class');
+  });
+
+  it('should render slotted content', async () => {
+    element = await fixture('grantcodes-footer');
+    const content = document.createElement('div');
+    content.textContent = 'Footer content';
+    element.appendChild(content);
+
+    await element.updateComplete;
+
+    assert.ok(element.querySelector('div'), 'Slotted content should be present');
+  });
 });

package/src/components/footer/index.js

@@ -1,2 +1,2 @@
-export * from "./footer.js";
-export { GrantCodesFooterColumn } from "./footer-column.component.js";
+export * from './footer.js';
+export { GrantCodesFooterColumn } from './footer-column.component.js';

package/src/components/form-field/form-field.component.js

@@ -1,162 +1,204 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import { classMap } from "lit/directives/class-map.js";
-import formFieldStyles from "./form-field.css" with { type: "css" };
-import { generateId } from "../../lib/generate-id.js";
+import { LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit/static-html.js';
+import { generateId } from '../../lib/generate-id.js';
+import formFieldStyles from './form-field.css' with { type: 'css' };
 
 export class GrantCodesFormField extends LitElement {
-	static formAssociated = true;
-	static styles = [formFieldStyles];
+  static formAssociated = true;
+  static styles = [formFieldStyles];
 
-	static properties = {
+  static properties = {
     label: { type: String, reflect: true },
-		direction: { type: String },
-		error: { type: String },
-		help: { type: String },
-	};
+    direction: { type: String },
+    error: { type: String },
+    help: { type: String },
+  };
 
-	constructor() {
-		super();
+  constructor() {
+    super();
 
-		this.label = "";
-		this.error = undefined;
-		this.help = undefined;
+    this.label = '';
+    this.error = undefined;
+    this.help = undefined;
 
     this.groupInput = false;
 
     /**
-		 * Direction of the field. Generally want horizontal for checkboxes and radios.
-		 * @type {'vertical' | 'horizontal'}
-		 */
-		this.direction = "vertical";
-
-		/** @type {NodeListOf<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>} */
-		this.inputElements;
-
-		/** @type {NodeListOf<GrantCodesFormField>} */
-		this.nestedFields;
-
-		if (!this.id) {
-			this.id = generateId("form-field");
-		}
-	}
-
-	get errorId() {
-		return `${this.id}-error`;
-	}
-
-	get helpId() {
-		return `${this.id}-help`;
-	}
-
-	get ariaDescribedBy() {
-		const ids = [];
-		if (this.error) {
-			ids.push(this.errorId);
-		}
-		if (this.help) {
-			ids.push(this.helpId);
-		}
-		return ids.join(" ");
-	}
-
-	firstUpdated() {
-		// Initialize inputs and nested fields if not already set
-		if (!this.inputElements) {
-			this.inputElements = this.querySelectorAll("input, select, textarea");
-		}
-		if (!this.nestedFields) {
-			this.nestedFields = this.querySelectorAll("grantcodes-form-field");
-		}
-
-		const input = this.inputElements[0];
-
-		if (this.nestedFields.length > 0) {
-			this.groupInput = true;
-			this.requestUpdate();
-		}
-
-		if (!input) {
-			return;
-		}
-
-		input.id = this.id;
-		input.setAttribute("aria-describedby", this.ariaDescribedBy);
-
-	}
-
-	handleLabelClick() {
-		const input = this.inputElements[0];
-		if (input) {
-			input.focus();
-			if (
-				input instanceof HTMLInputElement &&
-				(input.type === "checkbox" || input.type === "radio")
-			) {
-				input.checked = !input.checked;
-			}
-		}
-	}
-
-	// handleError() {
-	//   if (this.error) {
-	//     const input = this.inputElements[0]
-	//     if (input) {
-	//       if (this.help) {
-	//         input.setAttribute('aria-describedby', `${this.errorId} ${this.helpId}`)
-	//       } else {
-	//         input.setAttribute('aria-describedby', this.errorId)
-	//       }
-	//     }
-	//   }
-	// }
-
-	errorTemplate() {
-		if (!this.error) {
-			return html``;
-		}
-
-		return html`
-      <p class="form-field__error" id=${this.errorId}>Error: ${this.error}</p>
+     * Direction of the field. Generally want horizontal for checkboxes and radios.
+     * @type {'vertical' | 'horizontal'}
+     */
+    this.direction = 'vertical';
+
+    /** @type {NodeListOf<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>} */
+    this.inputElements;
+
+    /** @type {NodeListOf<GrantCodesFormField>} */
+    this.nestedFields;
+
+    this._revalidate = this._revalidate.bind(this);
+    this._touched = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Not in the constructor: a custom element that gains an attribute there is never upgraded.
+    if (!this.id) {
+      this.id = generateId('form-field');
+    }
+    this.addEventListener('input', this._revalidate);
+    // blur/invalid do not bubble, so they are caught on the way down.
+    this.addEventListener('blur', this._revalidate, true);
+    this.addEventListener('invalid', this._revalidate, true);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('input', this._revalidate);
+    this.removeEventListener('blur', this._revalidate, true);
+    this.removeEventListener('invalid', this._revalidate, true);
+    super.disconnectedCallback();
+  }
+
+  _revalidate(event) {
+    // A consumer-set error should appear once the field has been interacted with.
+    if (event?.target?.matches?.('input, select, textarea')) {
+      this._touched = true;
+    }
+    this.requestUpdate();
+  }
+
+  get errorId() {
+    return `${this.id}-error`;
+  }
+
+  get helpId() {
+    return `${this.id}-help`;
+  }
+
+  get ariaDescribedBy() {
+    const ids = [];
+    if (this.error) {
+      ids.push(this.errorId);
+    }
+    if (this.help) {
+      ids.push(this.helpId);
+    }
+    return ids.join(' ');
+  }
+
+  /** Errors stay hidden until the field is interacted with or reports :user-invalid. */
+  get showError() {
+    if (!this.error) return false;
+    const controls = this.querySelectorAll('input, select, textarea');
+    if (controls.length === 0) return true;
+    if (this._touched) return true;
+    return Array.from(controls).some((control) => control.matches(':user-invalid'));
+  }
+
+  firstUpdated() {
+    // Initialize inputs and nested fields if not already set
+    if (!this.inputElements) {
+      this.inputElements = this.querySelectorAll('input, select, textarea');
+    }
+    if (!this.nestedFields) {
+      this.nestedFields = this.querySelectorAll('grantcodes-form-field');
+    }
+
+    const input = this.inputElements[0];
+
+    if (this.nestedFields.length > 0) {
+      this.groupInput = true;
+      this.requestUpdate();
+    }
+
+    if (!input) {
+      return;
+    }
+
+    this.syncControlAria();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('error') || changedProperties.has('help')) {
+      this.syncControlAria();
+    }
+  }
+
+  /** Mirrors the current error/help state onto the first control. */
+  syncControlAria() {
+    const input = this.inputElements?.[0];
+    if (!input) return;
+
+    if (this.ariaDescribedBy) {
+      input.setAttribute('aria-describedby', this.ariaDescribedBy);
+    } else {
+      input.removeAttribute('aria-describedby');
+    }
+
+    if (this.error) {
+      input.setAttribute('aria-invalid', 'true');
+    } else {
+      input.removeAttribute('aria-invalid');
+    }
+  }
+
+  handleLabelClick(event) {
+    const input = this.inputElements?.[0];
+    if (!input) return;
+
+    // The slotted control is not a DOM descendant of the shadow <label>, so the
+    // platform does not forward the click; do it here and suppress a duplicate.
+    event.preventDefault();
+    input.focus();
+    input.click();
+  }
+
+  errorTemplate() {
+    if (!this.error) {
+      return html``;
+    }
+
+    return html`
+      <p class="form-field__error" id=${this.errorId} ?hidden=${!this.showError}>${this.error}</p>
     `;
-	}
+  }
 
-	helpTemplate() {
-		if (!this.help) {
-			return html``;
-		}
+  helpTemplate() {
+    if (!this.help) {
+      return html``;
+    }
 
-		return html`
+    return html`
       <span class="form-field__help" id=${this.helpId}>${this.help}</span>
     `;
-	}
+  }
 
   render() {
     const wrapperClass = classMap({
       'form-field': true,
-      'form-field--horizontal': this.direction === 'horizontal'
-    })
-		if (this.groupInput) {
-			return html`
+      'form-field--horizontal': this.direction === 'horizontal',
+    });
+    if (this.groupInput) {
+      return html`
       <fieldset class=${wrapperClass}>
         <legend class="form-field__label">${this.label}</legend>
-        <slot></slot>
+        <slot @slotchange=${this._revalidate}></slot>
         ${this.errorTemplate()}
       </fieldset>
     `;
     }
 
-		return html`
+    return html`
       <div class=${wrapperClass}>
         <label>
           <span class="form-field__label" @click=${this.handleLabelClick}
             >${this.label}</span
           >
           ${this.helpTemplate()}
-          <slot></slot>
+          <slot @slotchange=${this._revalidate}></slot>
         </label>
         ${this.errorTemplate()}
       </div>
     `;
-	}
+  }
 }

package/src/components/form-field/form-field.css

@@ -1,48 +1,48 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .form-field {
-	display: flex;
-	flex-direction: column;
-	gap: var(--g-spacing-xs);
-	padding: 0;
-	margin: 0;
-	border: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-xs);
+  padding: 0;
+  margin: 0;
+  border: none;
 }
 
 .form-field label,
 .form-field slot {
-	display: flex;
-	flex-direction: column;
-	gap: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: inherit;
 }
 
 .form-field--horizontal label {
-	flex-direction: row-reverse;
-	align-items: center;
-	justify-content: flex-end;
-	gap: var(--g-spacing-sm);
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--g-spacing-sm);
 }
 
 .form-field__label {
-	margin: 0;
-	padding: 0;
+  margin: 0;
+  padding: 0;
 
-	&:where(legend) {
-		margin-bottom: var(--g-spacing-xs);
-	}
+  &:where(legend) {
+    margin-bottom: var(--g-spacing-xs);
+  }
 }
 
 .form-field__help {
-	font-size: var(--g-typography-body-sm-font-size);
-	opacity: 0.7;
+  font-size: var(--g-typography-body-sm-font-size);
+  opacity: 0.7;
 }
 
 .form-field__error {
-	margin: 0;
-	font-size: var(--g-typography-body-sm-font-size);
-	color: var(--g-color-content-utility-error);
+  margin: 0;
+  font-size: var(--g-typography-body-sm-font-size);
+  color: var(--g-color-content-utility-error);
 }

package/src/components/form-field/form-field.js

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

package/src/components/form-field/form-field.react.js

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