@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/dropzone/dropzone.test.js

@@ -1,114 +1,106 @@
-import { describe, it, afterEach } from "node:test";
-import { strict as assert } from "node:assert";
-import { fixture, cleanup } from "../../test-utils/index.js";
-import "./dropzone.js";
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, fixture } from '../../test-utils/index.js';
+import './dropzone.js';
 
-describe("Dropzone Component", () => {
-	let element;
+describe('Dropzone Component', () => {
+  let element;
 
-	afterEach(() => {
-		cleanup(element);
-	});
+  afterEach(() => {
+    cleanup(element);
+  });
 
-	it("should render with default properties", async () => {
-		element = await fixture("grantcodes-dropzone");
-		// Add required file input after fixture (component allows missing input in tests)
-		const input = document.createElement("input");
-		input.type = "file";
-		input.placeholder = "Drop files here";
-		element.appendChild(input);
-		await element.updateComplete;
-		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-dropzone');
+    // Add required file input after fixture (component allows missing input in tests)
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.placeholder = 'Drop files here';
+    element.appendChild(input);
+    await element.updateComplete;
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
 
-	it("should have fullscreenOnDrag property set to false by default", async () => {
-		element = await fixture("grantcodes-dropzone");
-		const input = document.createElement("input");
-		input.type = "file";
-		element.appendChild(input);
-		await element.updateComplete;
-		assert.strictEqual(
-			element.fullscreenOnDrag,
-			false,
-			"fullscreenOnDrag should be false by default",
-		);
-	});
+  it('should have fullscreenOnDrag property set to false by default', async () => {
+    element = await fixture('grantcodes-dropzone');
+    const input = document.createElement('input');
+    input.type = 'file';
+    element.appendChild(input);
+    await element.updateComplete;
+    assert.strictEqual(
+      element.fullscreenOnDrag,
+      false,
+      'fullscreenOnDrag should be false by default',
+    );
+  });
 
-	it("should render dropzone wrapper", async () => {
-		element = await fixture("grantcodes-dropzone");
-		const input = document.createElement("input");
-		input.type = "file";
-		element.appendChild(input);
-		await element.updateComplete;
-		const dropzone = element.shadowRoot.querySelector(".dropzone");
-		assert.ok(dropzone, "Dropzone element should exist");
-	});
+  it('should render dropzone wrapper', async () => {
+    element = await fixture('grantcodes-dropzone');
+    const input = document.createElement('input');
+    input.type = 'file';
+    element.appendChild(input);
+    await element.updateComplete;
+    const dropzone = element.shadowRoot.querySelector('.dropzone');
+    assert.ok(dropzone, 'Dropzone element should exist');
+  });
 
-	it("should render placeholder span", async () => {
-		element = await fixture("grantcodes-dropzone");
-		const input = document.createElement("input");
-		input.type = "file";
-		input.placeholder = "Drop files here";
-		element.appendChild(input);
-		await element.updateComplete;
-		const placeholder = element.shadowRoot.querySelector(
-			".dropzone__placeholder",
-		);
-		assert.ok(placeholder, "Placeholder element should exist");
-	});
+  it('should render placeholder span', async () => {
+    element = await fixture('grantcodes-dropzone');
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.placeholder = 'Drop files here';
+    element.appendChild(input);
+    await element.updateComplete;
+    const placeholder = element.shadowRoot.querySelector('.dropzone__placeholder');
+    assert.ok(placeholder, 'Placeholder element should exist');
+  });
 
-	it("should have slot for file input", async () => {
-		element = await fixture("grantcodes-dropzone");
-		const input = document.createElement("input");
-		input.type = "file";
-		element.appendChild(input);
-		await element.updateComplete;
-		const slot = element.shadowRoot.querySelector("slot");
-		assert.ok(slot, "Slot should exist");
-	});
+  it('should have slot for file input', async () => {
+    element = await fixture('grantcodes-dropzone');
+    const input = document.createElement('input');
+    input.type = 'file';
+    element.appendChild(input);
+    await element.updateComplete;
+    const slot = element.shadowRoot.querySelector('slot');
+    assert.ok(slot, 'Slot should exist');
+  });
 
-	it("should support fullscreenOnDrag property", async () => {
-		element = await fixture("grantcodes-dropzone", {
-			fullscreenOnDrag: true,
-		});
-		const input = document.createElement("input");
-		input.type = "file";
-		element.appendChild(input);
-		await element.updateComplete;
+  it('should support fullscreenOnDrag property', async () => {
+    element = await fixture('grantcodes-dropzone', {
+      fullscreenOnDrag: true,
+    });
+    const input = document.createElement('input');
+    input.type = 'file';
+    element.appendChild(input);
+    await element.updateComplete;
 
-		assert.strictEqual(
-			element.fullscreenOnDrag,
-			true,
-			"fullscreenOnDrag should be true",
-		);
-	});
+    assert.strictEqual(element.fullscreenOnDrag, true, 'fullscreenOnDrag should be true');
+  });
 
-	it("should have drag event handlers", async () => {
-		element = await fixture("grantcodes-dropzone");
-		const input = document.createElement("input");
-		input.type = "file";
-		element.appendChild(input);
-		await element.updateComplete;
-		const dropzone = element.shadowRoot.querySelector(".dropzone");
+  it('should have drag event handlers', async () => {
+    element = await fixture('grantcodes-dropzone');
+    const input = document.createElement('input');
+    input.type = 'file';
+    element.appendChild(input);
+    await element.updateComplete;
+    const dropzone = element.shadowRoot.querySelector('.dropzone');
 
-		// Check that the element has the event listener attributes
-		assert.ok(dropzone, "Dropzone should exist to attach handlers");
-	});
+    // Check that the element has the event listener attributes
+    assert.ok(dropzone, 'Dropzone should exist to attach handlers');
+  });
 
-	it("should handle file input placeholder", async () => {
-		element = await fixture("grantcodes-dropzone");
-		const input = document.createElement("input");
-		input.type = "file";
-		input.placeholder = "Drop files here";
-		element.appendChild(input);
+  it('should handle file input placeholder', async () => {
+    element = await fixture('grantcodes-dropzone');
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.placeholder = 'Drop files here';
+    element.appendChild(input);
 
-		await element.updateComplete;
+    await element.updateComplete;
 
-		const placeholder = element.shadowRoot.querySelector(
-			".dropzone__placeholder",
-		);
-		// The placeholder text is set from the input's placeholder in firstUpdated
-		assert.ok(placeholder, "Placeholder should exist");
-	});
+    const placeholder = element.shadowRoot.querySelector('.dropzone__placeholder');
+    // The placeholder text is set from the input's placeholder in firstUpdated
+    assert.ok(placeholder, 'Placeholder should exist');
+  });
 });

package/src/components/dropzone/index.js

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

package/src/components/feature-list/feature-list.component.js

@@ -1,131 +1,123 @@
-import { LitElement, html } from "lit";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import * as icons from "lucide-static";
-import featureListStyles from "./feature-list.css" with { type: "css" };
-import "../icon/icon.js";
-import "../container/container.js";
+import { html, LitElement } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import * as icons from 'lucide-static';
+import featureListStyles from './feature-list.css' with { type: 'css' };
+import '../icon/icon.js';
+import '../container/container.js';
 
 export class GrantCodesFeatureList extends LitElement {
-	static styles = [featureListStyles];
+  static styles = [featureListStyles];
 
-	static properties = {
-		/**
-		 * Optional section heading.
-		 * @type {string}
-		 */
-		title: { type: String },
-		/**
-		 * Optional supporting text below the heading.
-		 * @type {string}
-		 */
-		subtitle: { type: String },
-		/**
-		 * Feature items as a JSON string array: `[{"title":"...","description":"...","icon":"...","href":"..."}]`.
-		 * @type {string}
-		 */
-		items: { type: String },
-		/**
-		 * Number of columns in the grid (1–4).
-		 * @type {number}
-		 */
-		columns: { type: Number },
-	};
+  static properties = {
+    /**
+     * Optional section heading.
+     * @type {string}
+     */
+    title: { type: String },
+    /**
+     * Optional supporting text below the heading.
+     * @type {string}
+     */
+    subtitle: { type: String },
+    /**
+     * Feature items as a JSON string array: `[{"title":"...","description":"...","icon":"...","href":"..."}]`.
+     * @type {string}
+     */
+    items: { type: String },
+    /**
+     * Number of columns in the grid (1–4).
+     * @type {number}
+     */
+    columns: { type: Number },
+  };
 
-	constructor() {
-		super();
-		this.title = "";
-		this.subtitle = "";
-		this.items = "[]";
-		this.columns = 3;
-	}
+  constructor() {
+    super();
+    this.title = '';
+    this.subtitle = '';
+    this.items = '[]';
+    this.columns = 3;
+  }
 
-	get _items() {
-		try {
-			return JSON.parse(this.items);
-		} catch {
-			return [];
-		}
-	}
+  get _items() {
+    try {
+      return JSON.parse(this.items);
+    } catch {
+      return [];
+    }
+  }
 
-	_iconSvg(name) {
-		if (!name) return null;
-		// Convert kebab-case to PascalCase for lucide-static lookup
-		const key = name
-			.split("-")
-			.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-			.join("");
-		// biome-ignore lint/performance/noDynamicNamespaceImportAccess: icon names are runtime strings; static imports are not feasible here
-		return icons[key] ?? null;
-	}
+  _iconSvg(name) {
+    if (!name) return null;
+    // Convert kebab-case to PascalCase for lucide-static lookup
+    const key = name
+      .split('-')
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join('');
+    // biome-ignore lint/performance/noDynamicNamespaceImportAccess: icon names are runtime strings; static imports are not feasible here
+    return icons[key] ?? null;
+  }
 
-	_renderIcon(name) {
-		const svg = this._iconSvg(name);
-		if (!svg) return null;
-		return html`<grantcodes-icon class="feature-list__icon" aria-hidden="true">${unsafeHTML(svg)}</grantcodes-icon>`;
-	}
+  _renderIcon(name) {
+    const svg = this._iconSvg(name);
+    if (!svg) return null;
+    return html`<grantcodes-icon class="feature-list__icon" aria-hidden="true">${unsafeHTML(svg)}</grantcodes-icon>`;
+  }
 
-	render() {
-		const items = this._items;
-		return html`
+  render() {
+    const items = this._items;
+    return html`
 			<section class="feature-list">
 				<grantcodes-container>
-					${
-						this.title
-							? html`<h2 class="feature-list__title">${this.title}</h2>`
-							: null
-					}
-					${
-						this.subtitle
-							? html`<p class="feature-list__subtitle">${this.subtitle}</p>`
-							: null
-					}
+					${this.title ? html`<h2 class="feature-list__title">${this.title}</h2>` : null}
+					${this.subtitle ? html`<p class="feature-list__subtitle">${this.subtitle}</p>` : null}
 					<ul
 						class="feature-list__grid"
 						style="--columns: ${this.columns}"
 						role="list"
 					>
 						${items.map(
-							(item) => html`
+              (item) => html`
 								<li class="feature-list__item">
 									${
-										item.href
-											? html`
+                    item.href
+                      ? html`
 												<a href=${item.href} class="feature-list__link">
 												${this._renderIcon(item.icon)}
 												<h3 class="feature-list__item-title">
 														${item.title}
 													</h3>
 													${
-														item.description
-															? html`<p class="feature-list__item-desc">
+                            item.description
+                              ? html`<p class="feature-list__item-desc">
 																${item.description}
 															</p>`
-															: null
-													}
+                              : null
+                          }
 												</a>
 											`
-											: html`
+                      : html`
 												<div class="feature-list__content">
 												${this._renderIcon(item.icon)}
 												<h3 class="feature-list__item-title">
 														${item.title}
 													</h3>
 													${
-														item.description
-															? html`<p class="feature-list__item-desc">
+                            item.description
+                              ? html`<p class="feature-list__item-desc">
 																${item.description}
 															</p>`
-															: null
-													}
+                              : null
+                          }
 												</div>
 											`
-									}
+                  }
 								</li>
 							`,
-						)}
+            )}
 					</ul>
 				</grantcodes-container>
 			</section>
 		`;
-	}
+  }
 }

package/src/components/feature-list/feature-list.css

@@ -1,78 +1,78 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .feature-list {
-	padding-block: var(--g-spacing-3xl);
+  padding-block: var(--g-spacing-3xl);
 }
 
 .feature-list__title {
-	margin: 0 0 var(--g-spacing-sm);
-	font: var(--g-typography-h3-font);
-	text-align: center;
-	color: var(--g-color-content-default);
+  margin: 0 0 var(--g-spacing-sm);
+  font: var(--g-typography-h3-font);
+  text-align: center;
+  color: var(--g-color-content-default);
 }
 
 .feature-list__subtitle {
-	margin: 0 auto var(--g-spacing-2xl);
-	font: var(--g-typography-body-lg-font);
-	text-align: center;
-	color: var(--g-color-content-subtle);
-	max-width: 55ch;
+  margin: 0 auto var(--g-spacing-2xl);
+  font: var(--g-typography-body-lg-font);
+  text-align: center;
+  color: var(--g-color-content-subtle);
+  max-width: 55ch;
 }
 
 .feature-list__grid {
-	display: grid;
-	grid-template-columns: repeat(var(--columns, 3), 1fr);
-	gap: var(--g-spacing-xl);
-	padding: 0;
-	margin: 0;
-	list-style: none;
+  display: grid;
+  grid-template-columns: repeat(var(--columns, 3), 1fr);
+  gap: var(--g-spacing-xl);
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
 
 @media (max-width: 768px) {
-	.feature-list__grid {
-		grid-template-columns: 1fr;
-	}
+  .feature-list__grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (min-width: 769px) and (max-width: 1024px) {
-	.feature-list__grid {
-		grid-template-columns: repeat(min(var(--columns, 3), 2), 1fr);
-	}
+  .feature-list__grid {
+    grid-template-columns: repeat(min(var(--columns, 3), 2), 1fr);
+  }
 }
 
 .feature-list__link,
 .feature-list__content {
-	display: block;
-	text-decoration: none;
-	color: inherit;
+  display: block;
+  text-decoration: none;
+  color: inherit;
 }
 
 .feature-list__link:hover .feature-list__item-title {
-	color: var(--g-color-content-primary, #7c3aed);
+  color: var(--g-color-content-primary, #7c3aed);
 }
 
 .feature-list__icon {
-	display: block;
-	padding: var(--g-spacing-md);
-	border-radius: 50%;
-	inline-size: fit-content;
-	margin-block-end: var(--g-spacing-md);
-	color: var(--g-color-content-primary, currentColor);
-	background-color: var(--g-color-background-primary);
+  display: block;
+  padding: var(--g-spacing-md);
+  border-radius: 50%;
+  inline-size: fit-content;
+  margin-block-end: var(--g-spacing-md);
+  color: var(--g-color-content-primary, currentColor);
+  background-color: var(--g-color-background-primary);
 }
 
 .feature-list__item-title {
-	font: var(--g-typography-h5-font);
+  font: var(--g-typography-h5-font);
 }
 
 .feature-list__item-desc {
-	color: var(--g-color-content-subtle);
+  color: var(--g-color-content-subtle);
 }

package/src/components/feature-list/feature-list.js

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

package/src/components/feature-list/feature-list.react.js

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