@grantcodes/ui 2.15.6 → 2.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantcodes/ui",
-  "version": "2.15.6",
+  "version": "2.16.0",
   "description": "A personal component system built with Lit web components",
   "type": "module",
   "main": "src/main.js",
@@ -49,33 +49,33 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@grantcodes/style-dictionary": "^1.10.2",
     "@lit/react": "^1.0.8",
-    "lit": "^3.3.1",
-    "shiki": "^3.17.1",
-    "@grantcodes/style-dictionary": "^1.10.2"
+    "lit": "^3.3.3",
+    "lucide-static": "^1.47.0",
+    "shiki": "^4.4.3"
   },
   "devDependencies": {
-    "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",
-    "@biomejs/biome": "2.3.8",
+    "@arcmantle/vite-plugin-import-css-sheet": "^1.0.14",
+    "@biomejs/biome": "2.5.14",
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@grantcodes/commit": "^2.0.0",
-    "@lit-labs/ssr-dom-shim": "^1.5.1",
-    "@playwright/test": "^1.57.0",
-    "@storybook/addon-docs": "^10.1.4",
-    "@storybook/addon-themes": "^10.1.4",
-    "@storybook/web-components-vite": "^10.1.4",
-    "@wc-toolkit/cem-inheritance": "^1.2.2",
+    "@lit-labs/ssr-dom-shim": "^1.6.0",
+    "@playwright/test": "^1.63.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-themes": "^10.6.0",
+    "@storybook/web-components-vite": "^10.6.0",
+    "@wc-toolkit/cem-inheritance": "^1.2.5",
     "@wc-toolkit/cem-sorter": "^1.0.1",
-    "@wc-toolkit/cem-validator": "^1.0.3",
-    "@wc-toolkit/module-path-resolver": "^1.0.0",
-    "@wc-toolkit/storybook-helpers": "^10.0.0",
-    "happy-dom": "^20.0.11",
-    "lucide-static": "^0.555.0",
-    "npm-run-all": "^4.1.5",
-    "plop": "^4.0.4",
-    "react": "^19.2.4",
-    "storybook": "^10.1.4",
-    "vite": "^7.2.6"
+    "@wc-toolkit/cem-validator": "^1.3.0",
+    "@wc-toolkit/module-path-resolver": "^1.0.1",
+    "@wc-toolkit/storybook-helpers": "^10.7.7",
+    "happy-dom": "^20.14.5",
+    "npm-run-all2": "^9.0.3",
+    "plop": "^4.0.5",
+    "react": "^19.3.0",
+    "storybook": "^10.6.0",
+    "vite": "^8.3.0"
   },
   "files": [
     "src/**/*",
@@ -107,6 +107,6 @@
     "fix:lint": "npx @biomejs/biome format --write src",
     "test": "run-s lint test:unit",
     "lint": "npx @biomejs/biome lint src",
-    "test:unit": "NODE_ENV=test node --import @lit-labs/ssr-dom-shim/register-css-hook.js --test --test-concurrency=1 src/**/*.test.js"
+    "test:unit": "NODE_ENV=test node --import @lit-labs/ssr-dom-shim/register-css-hook.js --test --test-concurrency=1 'src/**/*.test.js'"
   }
 }

package/src/components/accordion/accordion-item.component.js

@@ -1,26 +1,24 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import focusRingStyles from "../../lib/styles/focus-ring.css" with {
-	type: "css",
-};
-import accordionItemStyles from "./accordion-item.css" with { type: "css" };
+import { LitElement } from 'lit';
+import { html } from 'lit/static-html.js';
+import focusRingStyles from '../../lib/styles/focus-ring.css' with { type: 'css' };
+import accordionItemStyles from './accordion-item.css' with { type: 'css' };
 
 export class GrantCodesAccordionItem extends LitElement {
-	static styles = [focusRingStyles, accordionItemStyles];
+  static styles = [focusRingStyles, accordionItemStyles];
 
-	static properties = {
-		title: { type: String },
-		open: { type: Boolean, reflect: true },
-	};
+  static properties = {
+    title: { type: String },
+    open: { type: Boolean, reflect: true },
+  };
 
-	constructor() {
-		super();
-		this.title = "";
-		this.open = false;
-	}
+  constructor() {
+    super();
+    this.title = '';
+    this.open = false;
+  }
 
-	render() {
-		return html`
+  render() {
+    return html`
 			<details class="accordion__item" ?open=${this.open}>
 				<summary class="accordion__summary focus-ring">
 					<span>${this.title}</span>
@@ -33,5 +31,5 @@ export class GrantCodesAccordionItem extends LitElement {
 				</div>
 			</details>
 		`;
-	}
+  }
 }

package/src/components/accordion/accordion-item.css

@@ -1,82 +1,78 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .accordion__item {
-	border: 1px solid
-		var(--g-color-border-subtle, var(--g-color-border-default));
-	border-radius: var(--g-border-radius-md, 0.5rem);
+  border: 1px solid var(--g-color-border-subtle, var(--g-color-border-default));
+  border-radius: var(--g-border-radius-md, 0.5rem);
 }
 
 .accordion__item::details-content {
-	block-size: 0;
-	overflow: clip;
-	transition:
-		block-size 0.25s ease,
-		content-visibility 0.25s allow-discrete;
+  block-size: 0;
+  overflow: clip;
+  transition:
+    block-size 0.25s ease,
+    content-visibility 0.25s;
+  transition-behavior: allow-discrete;
 }
 
 .accordion__item[open]::details-content {
-	block-size: auto;
+  block-size: auto;
 }
 
 .accordion__summary {
-	padding: var(--g-spacing-md);
-	cursor: pointer;
-	background: var(--g-color-background-subtle);
-	font-weight: var(--g-typography-body-font-weight);
-	list-style: none;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	gap: var(--g-spacing-md);
-	border-radius: var(--g-border-radius-md, 0.5rem);
-	transition-property: background-color, outline-width, outline-color;
+  padding: var(--g-spacing-md);
+  cursor: pointer;
+  background: var(--g-color-background-subtle);
+  font-weight: var(--g-typography-body-font-weight);
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--g-spacing-md);
+  border-radius: var(--g-border-radius-md, 0.5rem);
+  transition-property: background-color, outline-width, outline-color;
 }
 
 .accordion__summary:hover {
-	background: var(
-		--g-color-background-subtle-hover,
-		var(--g-color-background-subtle)
-	);
+  background: var(--g-color-background-subtle-hover, var(--g-color-background-subtle));
 }
 
 .accordion__summary::-webkit-details-marker {
-	display: none;
+  display: none;
 }
 
 .accordion__chevron {
-	display: block;
-	inline-size: 1em;
-	block-size: 1em;
-	flex-shrink: 0;
-	transition: transform 0.25s ease;
-	color: var(--g-color-content-subtle, currentColor);
+  display: block;
+  inline-size: 1em;
+  block-size: 1em;
+  flex-shrink: 0;
+  transition: transform 0.25s ease;
+  color: var(--g-color-content-subtle, currentColor);
 }
 
 .accordion__item[open] .accordion__chevron {
-	transform: rotateX(180deg);
+  transform: rotateX(180deg);
 }
 
 .accordion__content {
-	padding: var(--g-spacing-md);
-	background: var(--g-color-background-default);
-	border-radius: 0 0 var(--g-border-radius-md, 0.5rem)
-		var(--g-border-radius-md, 0.5rem);
+  padding: var(--g-spacing-md);
+  background: var(--g-color-background-default);
+  border-radius: 0 0 var(--g-border-radius-md, 0.5rem) var(--g-border-radius-md, 0.5rem);
 }
 
 @media (prefers-reduced-motion: reduce) {
-	.accordion__chevron {
-		transition: none;
-	}
+  .accordion__chevron {
+    transition: none;
+  }
 
-	.accordion__item::details-content {
-		transition: none;
-	}
+  .accordion__item::details-content {
+    transition: none;
+  }
 }

package/src/components/accordion/accordion.component.js

@@ -1,11 +1,11 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import accordionStyles from "./accordion.css" with { type: "css" };
+import { LitElement } from 'lit';
+import { html } from 'lit/static-html.js';
+import accordionStyles from './accordion.css' with { type: 'css' };
 
 export class GrantCodesAccordion extends LitElement {
-	static styles = [accordionStyles];
+  static styles = [accordionStyles];
 
-	render() {
-		return html`<div class="accordion"><slot></slot></div>`;
-	}
+  render() {
+    return html`<div class="accordion"><slot></slot></div>`;
+  }
 }

package/src/components/accordion/accordion.css

@@ -1,15 +1,15 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .accordion {
-	display: flex;
-	flex-direction: column;
-	gap: var(--g-spacing-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-sm);
 }

package/src/components/accordion/accordion.js

@@ -1,9 +1,9 @@
-import { GrantCodesAccordion } from "./accordion.component.js";
-import { GrantCodesAccordionItem } from "./accordion-item.component.js";
+import { GrantCodesAccordion } from './accordion.component.js';
+import { GrantCodesAccordionItem } from './accordion-item.component.js';
 
-export * from "./accordion.component.js";
-export * from "./accordion-item.component.js";
+export * from './accordion.component.js';
+export * from './accordion-item.component.js';
 export default GrantCodesAccordion;
 
-customElements.define("grantcodes-accordion", GrantCodesAccordion);
-customElements.define("grantcodes-accordion-item", GrantCodesAccordionItem);
+customElements.define('grantcodes-accordion', GrantCodesAccordion);
+customElements.define('grantcodes-accordion-item', GrantCodesAccordionItem);

package/src/components/accordion/accordion.react.js

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

package/src/components/accordion/accordion.stories.js

@@ -1,9 +1,9 @@
-import { html } from "lit";
-import "./accordion.js";
+import { html } from 'lit';
+import './accordion.js';
 
 const meta = {
-	title: "Components/Accordion",
-	component: "grantcodes-accordion",
+  title: 'Components/Accordion',
+  component: 'grantcodes-accordion',
 };
 
 export default meta;
@@ -12,7 +12,7 @@ export default meta;
  * Default accordion with multiple items.
  */
 export const Accordion = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-accordion>
 			<grantcodes-accordion-item title="What is this?">
 				This is an accordion component that allows you to collapse and expand content sections.
@@ -31,7 +31,7 @@ export const Accordion = {
  * Single item accordion.
  */
 export const SingleItem = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-accordion>
 			<grantcodes-accordion-item title="Click to expand">
 				This is the content that appears when you expand this accordion item.
@@ -44,7 +44,7 @@ export const SingleItem = {
  * Accordion with multiple items, first one expanded by default.
  */
 export const MultipleItems = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-accordion>
 			<grantcodes-accordion-item title="First Section" open>
 				Content for the first section.
@@ -66,7 +66,7 @@ export const MultipleItems = {
  * Text content in slots is plain text — HTML-looking strings display literally.
  */
 export const EscapedPlainTextContent = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-accordion>
 			<grantcodes-accordion-item title="HTML-looking plain text">
 				&lt;strong&gt;This stays text&lt;/strong&gt;
@@ -79,7 +79,7 @@ export const EscapedPlainTextContent = {
  * Slotted HTML content renders naturally — consumers compose their own markup.
  */
 export const TrustedHtmlContent = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-accordion>
 			<grantcodes-accordion-item title="Trusted rich content">
 				<p>This renders <strong>trusted HTML</strong>.</p>
@@ -96,7 +96,7 @@ export const TrustedHtmlContent = {
  * Items can slot any HTML — paragraphs, lists, images, or plain text.
  */
 export const MixedContent = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-accordion>
 			<grantcodes-accordion-item title="Rich markup">
 				<p>This panel uses <em>multiple</em> HTML elements:</p>

package/src/components/accordion/accordion.test.js

@@ -1,103 +1,103 @@
-import { describe, it, afterEach } from "node:test";
-import { strict as assert } from "node:assert";
-import { fixture, cleanup } from "../../test-utils/index.js";
-import "./accordion.js";
-
-describe("Accordion", () => {
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("renders a slot for accordion items", async () => {
-		element = await fixture("grantcodes-accordion");
-		const slot = element.shadowRoot.querySelector("slot:not([name])");
-		assert.ok(slot, "Default slot should exist");
-	});
-
-	it("renders accordion wrapper", async () => {
-		element = await fixture("grantcodes-accordion");
-		const wrapper = element.shadowRoot.querySelector(".accordion");
-		assert.ok(wrapper, "Accordion wrapper should exist");
-	});
-
-	it("accepts slotted accordion items", async () => {
-		element = await fixture("grantcodes-accordion");
-		const item = document.createElement("grantcodes-accordion-item");
-		item.setAttribute("title", "FAQ");
-		item.textContent = "Answer text";
-		element.appendChild(item);
-		await element.updateComplete;
-		await item.updateComplete;
-
-		const found = element.querySelector("grantcodes-accordion-item");
-		assert.ok(found, "Slotted accordion item should be present");
-		assert.strictEqual(found.getAttribute("title"), "FAQ");
-		assert.strictEqual(found.textContent, "Answer text");
-	});
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, fixture } from '../../test-utils/index.js';
+import './accordion.js';
+
+describe('Accordion', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('renders a slot for accordion items', async () => {
+    element = await fixture('grantcodes-accordion');
+    const slot = element.shadowRoot.querySelector('slot:not([name])');
+    assert.ok(slot, 'Default slot should exist');
+  });
+
+  it('renders accordion wrapper', async () => {
+    element = await fixture('grantcodes-accordion');
+    const wrapper = element.shadowRoot.querySelector('.accordion');
+    assert.ok(wrapper, 'Accordion wrapper should exist');
+  });
+
+  it('accepts slotted accordion items', async () => {
+    element = await fixture('grantcodes-accordion');
+    const item = document.createElement('grantcodes-accordion-item');
+    item.setAttribute('title', 'FAQ');
+    item.textContent = 'Answer text';
+    element.appendChild(item);
+    await element.updateComplete;
+    await item.updateComplete;
+
+    const found = element.querySelector('grantcodes-accordion-item');
+    assert.ok(found, 'Slotted accordion item should be present');
+    assert.strictEqual(found.getAttribute('title'), 'FAQ');
+    assert.strictEqual(found.textContent, 'Answer text');
+  });
 });
 
-describe("GrantCodesAccordionItem", () => {
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("renders a details element with summary and slot", async () => {
-		element = await fixture("grantcodes-accordion-item", {
-			title: "Section",
-		});
-		const details = element.shadowRoot.querySelector("details");
-		const summary = element.shadowRoot.querySelector("summary");
-		const slot = element.shadowRoot.querySelector("slot");
-
-		assert.ok(details, "Details element should exist");
-		assert.ok(summary, "Summary should exist");
-		assert.ok(slot, "Slot should exist");
-		assert.strictEqual(summary.textContent.trim().replace(/\s+/g, " "), "Section");
-	});
-
-	it("renders HTML content via slot", async () => {
-		element = await fixture("grantcodes-accordion-item", {
-			title: "Rich",
-		});
-		element.innerHTML = "<strong>Trusted</strong>";
-		await element.updateComplete;
-
-		const strong = element.querySelector("strong");
-		assert.ok(strong, "Slotted HTML should render a strong element");
-		assert.strictEqual(strong.textContent, "Trusted");
-	});
-
-	it("renders text content as escaped plain text", async () => {
-		element = await fixture("grantcodes-accordion-item", {
-			title: "Plain",
-		});
-		element.textContent = "<strong>Plain</strong>";
-		await element.updateComplete;
-
-		const strong = element.querySelector("strong");
-		assert.strictEqual(strong, null, "Escaped text should not create a strong element");
-		assert.strictEqual(element.textContent, "<strong>Plain</strong>");
-	});
-
-	it("supports the open attribute", async () => {
-		element = await fixture("grantcodes-accordion-item", {
-			title: "Open item",
-			open: true,
-		});
-		const details = element.shadowRoot.querySelector("details");
-		assert.ok(details.hasAttribute("open"), "Details should be open");
-	});
-
-	it("renders an empty slot by default", async () => {
-		element = await fixture("grantcodes-accordion-item", {
-			title: "Empty",
-		});
-		const content = element.shadowRoot.querySelector(".accordion__content");
-		const slot = content.querySelector("slot");
-		assert.ok(slot, "Slot should exist in content area");
-	});
+describe('GrantCodesAccordionItem', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('renders a details element with summary and slot', async () => {
+    element = await fixture('grantcodes-accordion-item', {
+      title: 'Section',
+    });
+    const details = element.shadowRoot.querySelector('details');
+    const summary = element.shadowRoot.querySelector('summary');
+    const slot = element.shadowRoot.querySelector('slot');
+
+    assert.ok(details, 'Details element should exist');
+    assert.ok(summary, 'Summary should exist');
+    assert.ok(slot, 'Slot should exist');
+    assert.strictEqual(summary.textContent.trim().replace(/\s+/g, ' '), 'Section');
+  });
+
+  it('renders HTML content via slot', async () => {
+    element = await fixture('grantcodes-accordion-item', {
+      title: 'Rich',
+    });
+    element.innerHTML = '<strong>Trusted</strong>';
+    await element.updateComplete;
+
+    const strong = element.querySelector('strong');
+    assert.ok(strong, 'Slotted HTML should render a strong element');
+    assert.strictEqual(strong.textContent, 'Trusted');
+  });
+
+  it('renders text content as escaped plain text', async () => {
+    element = await fixture('grantcodes-accordion-item', {
+      title: 'Plain',
+    });
+    element.textContent = '<strong>Plain</strong>';
+    await element.updateComplete;
+
+    const strong = element.querySelector('strong');
+    assert.strictEqual(strong, null, 'Escaped text should not create a strong element');
+    assert.strictEqual(element.textContent, '<strong>Plain</strong>');
+  });
+
+  it('supports the open attribute', async () => {
+    element = await fixture('grantcodes-accordion-item', {
+      title: 'Open item',
+      open: true,
+    });
+    const details = element.shadowRoot.querySelector('details');
+    assert.ok(details.hasAttribute('open'), 'Details should be open');
+  });
+
+  it('renders an empty slot by default', async () => {
+    element = await fixture('grantcodes-accordion-item', {
+      title: 'Empty',
+    });
+    const content = element.shadowRoot.querySelector('.accordion__content');
+    const slot = content.querySelector('slot');
+    assert.ok(slot, 'Slot should exist in content area');
+  });
 });

package/src/components/accordion/index.js

@@ -1,9 +1,9 @@
-import { GrantCodesAccordion } from "./accordion.component.js";
-import { GrantCodesAccordionItem } from "./accordion-item.component.js";
+import { GrantCodesAccordion } from './accordion.component.js';
+import { GrantCodesAccordionItem } from './accordion-item.component.js';
 
-export * from "./accordion.component.js";
-export * from "./accordion-item.component.js";
+export * from './accordion.component.js';
+export * from './accordion-item.component.js';
 export default GrantCodesAccordion;
 
-customElements.define("grantcodes-accordion", GrantCodesAccordion);
-customElements.define("grantcodes-accordion-item", GrantCodesAccordionItem);
+customElements.define('grantcodes-accordion', GrantCodesAccordion);
+customElements.define('grantcodes-accordion-item', GrantCodesAccordionItem);