@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/button/index.js

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

package/src/components/button-group/button-group.component.js

@@ -1,27 +1,27 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import buttonGroupStyles from "./button-group.css" with { type: "css" };
+import { LitElement } from 'lit';
+import { html } from 'lit/static-html.js';
+import buttonGroupStyles from './button-group.css' with { type: 'css' };
 
 export class GrantCodesButtonGroup 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 = [buttonGroupStyles];
+  // 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 = [buttonGroupStyles];
 
-	// Define reactive properties--updating a reactive property causes
-	// the component to update.
-	// @property() label = 'Button Label'
+  // Define reactive properties--updating a reactive property causes
+  // the component to update.
+  // @property() label = 'Button Label'
 
-	// The render() method is called any time reactive properties change.
-	// Return HTML in a string template literal tagged with the `html`
-	// tag function to describe the component's internal DOM.
-	// Expressions can set attribute values, property values, event handlers,
-	// and child nodes/text.
-	render() {
-		return html`
+  // The render() method is called any time reactive properties change.
+  // Return HTML in a string template literal tagged with the `html`
+  // tag function to describe the component's internal DOM.
+  // Expressions can set attribute values, property values, event handlers,
+  // and child nodes/text.
+  render() {
+    return html`
       <div class="button-group">
         <slot></slot>
       </div>
     `;
-	}
+  }
 }

package/src/components/button-group/button-group.css

@@ -2,38 +2,38 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
+  display: block;
 }
 
 .button-group {
-	display: inline-flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	background: var(--g-color-background-default);
-	border-radius: var(--g-border-radius-md);
-	min-width: fit-content;
-	max-width: 100%;
-	overflow: hidden;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  background: var(--g-color-background-default);
+  border-radius: var(--g-border-radius-md);
+  min-width: fit-content;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .button-group ::slotted(grantcodes-button) {
-	--button-border-radius-start: 0;
-	--button-border-radius-end: 0;
+  --_button-border-radius-start: 0;
+  --_button-border-radius-end: 0;
 }
 
 .button-group ::slotted(grantcodes-button:first-child) {
-	--button-border-radius-start: var(--g-border-radius-md);
+  --_button-border-radius-start: var(--g-border-radius-md);
 }
 
 .button-group ::slotted(grantcodes-button:last-child) {
-	--button-border-radius-end: var(--g-border-radius-md);
+  --_button-border-radius-end: var(--g-border-radius-md);
 }
 
 .button-group ::slotted(grantcodes-button:focus-visible) {
-	position: relative;
-	z-index: 1;
+  position: relative;
+  z-index: 1;
 }

package/src/components/button-group/button-group.js

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

package/src/components/button-group/button-group.react.js

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

package/src/components/button-group/button-group.stories.js

@@ -1,31 +1,31 @@
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-const { events, args, argTypes, template } = getStorybookHelpers(
-	"grantcodes-button-group",
-);
-import { html } from "lit/static-html.js";
-import "./button-group";
-import "../button/button";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+
+const { events, args, argTypes, template } = getStorybookHelpers('grantcodes-button-group');
+
+import { html } from 'lit/static-html.js';
+import './button-group';
+import '../button/button';
 
 const meta = {
-	title: "Components/ButtonGroup",
-	component: "grantcodes-button-group",
-	args: {
-		...args,
-	},
-	argTypes,
-	render: (args) =>
-		template(
-			args,
-			html`
+  title: 'Components/ButtonGroup',
+  component: 'grantcodes-button-group',
+  args: {
+    ...args,
+  },
+  argTypes,
+  render: (args) =>
+    template(
+      args,
+      html`
     <grantcodes-button>Button 1</grantcodes-button>
     <grantcodes-button>Button 2</grantcodes-button>
     <grantcodes-button>Button 3</grantcodes-button>`,
-		),
-	parameters: {
-		actions: {
-			handles: events,
-		},
-	},
+    ),
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
 };
 
 export default meta;

package/src/components/button-group/button-group.test.js

@@ -1,55 +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 "./button-group.js";
-
-describe("Button Group Component", () => {
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("should render with default properties", async () => {
-		element = await fixture("grantcodes-button-group");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
-
-	it("should render button group wrapper", async () => {
-		element = await fixture("grantcodes-button-group");
-		const group = element.shadowRoot.querySelector(".button-group");
-		assert.ok(group, "Button group wrapper should exist");
-	});
-
-	it("should have slot for buttons", async () => {
-		element = await fixture("grantcodes-button-group");
-		const slot = element.shadowRoot.querySelector("slot");
-		assert.ok(slot, "Slot should exist for buttons");
-	});
-
-	it("should support multiple slotted buttons", async () => {
-		element = await fixture("grantcodes-button-group");
-
-		const button1 = document.createElement("button");
-		button1.textContent = "Button 1";
-		const button2 = document.createElement("button");
-		button2.textContent = "Button 2";
-		const button3 = document.createElement("button");
-		button3.textContent = "Button 3";
-
-		element.appendChild(button1);
-		element.appendChild(button2);
-		element.appendChild(button3);
-
-		await element.updateComplete;
-
-		assert.strictEqual(element.children.length, 3, "Should have three buttons");
-	});
-
-	it("should group buttons together visually", async () => {
-		element = await fixture("grantcodes-button-group");
-		const group = element.shadowRoot.querySelector(".button-group");
-		assert.ok(group, "Button group should provide visual grouping");
-	});
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, fixture } from '../../test-utils/index.js';
+import './button-group.js';
+
+describe('Button Group Component', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('should render with default properties', async () => {
+    element = await fixture('grantcodes-button-group');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  it('should render button group wrapper', async () => {
+    element = await fixture('grantcodes-button-group');
+    const group = element.shadowRoot.querySelector('.button-group');
+    assert.ok(group, 'Button group wrapper should exist');
+  });
+
+  it('should have slot for buttons', async () => {
+    element = await fixture('grantcodes-button-group');
+    const slot = element.shadowRoot.querySelector('slot');
+    assert.ok(slot, 'Slot should exist for buttons');
+  });
+
+  it('should support multiple slotted buttons', async () => {
+    element = await fixture('grantcodes-button-group');
+
+    const button1 = document.createElement('button');
+    button1.textContent = 'Button 1';
+    const button2 = document.createElement('button');
+    button2.textContent = 'Button 2';
+    const button3 = document.createElement('button');
+    button3.textContent = 'Button 3';
+
+    element.appendChild(button1);
+    element.appendChild(button2);
+    element.appendChild(button3);
+
+    await element.updateComplete;
+
+    assert.strictEqual(element.children.length, 3, 'Should have three buttons');
+  });
+
+  it('should group buttons together visually', async () => {
+    element = await fixture('grantcodes-button-group');
+    const group = element.shadowRoot.querySelector('.button-group');
+    assert.ok(group, 'Button group should provide visual grouping');
+  });
 });

package/src/components/button-group/index.js

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

package/src/components/card/card.component.js

@@ -1,48 +1,46 @@
-import { LitElement, html } from "lit";
-import cardStyles from "./card.css" with { type: "css" };
+import { html, LitElement } from 'lit';
+import cardStyles from './card.css' with { type: 'css' };
 
 export class GrantCodesCard extends LitElement {
-	static properties = {
-		hasHeader: { type: Boolean, reflect: true },
-		hasFooter: { type: Boolean, reflect: true },
-	};
+  static properties = {
+    hasHeader: { type: Boolean, reflect: true },
+    hasFooter: { type: Boolean, reflect: true },
+  };
 
-	static styles = [cardStyles];
+  static styles = [cardStyles];
 
-	constructor() {
-		super();
-		this.hasHeader = false;
-		this.hasFooter = false;
-	}
+  constructor() {
+    super();
+    this.hasHeader = false;
+    this.hasFooter = false;
+  }
 
-	firstUpdated() {
-		this._checkSlots();
-		this.shadowRoot.querySelectorAll("slot").forEach((slot) => {
-			slot.addEventListener("slotchange", () => this._checkSlots());
-		});
-	}
+  firstUpdated() {
+    this._checkSlots();
+    this.shadowRoot.querySelectorAll('slot').forEach((slot) => {
+      slot.addEventListener('slotchange', () => this._checkSlots());
+    });
+  }
 
-	_checkSlots() {
-		const headerSlot = this.shadowRoot?.querySelector('slot[name="header"]');
-		const footerSlot = this.shadowRoot?.querySelector('slot[name="footer"]');
-		this.hasHeader =
-			(headerSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
-		this.hasFooter =
-			(footerSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
+  _checkSlots() {
+    const headerSlot = this.shadowRoot?.querySelector('slot[name="header"]');
+    const footerSlot = this.shadowRoot?.querySelector('slot[name="footer"]');
+    this.hasHeader = (headerSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
+    this.hasFooter = (footerSlot?.assignedNodes({ flatten: true }).length ?? 0) > 0;
 
-		const headerEl = this.shadowRoot?.querySelector(".card__header");
-		const footerEl = this.shadowRoot?.querySelector(".card__footer");
-		headerEl?.toggleAttribute("data-has-content", this.hasHeader);
-		footerEl?.toggleAttribute("data-has-content", this.hasFooter);
-	}
+    const headerEl = this.shadowRoot?.querySelector('.card__header');
+    const footerEl = this.shadowRoot?.querySelector('.card__footer');
+    headerEl?.toggleAttribute('data-has-content', this.hasHeader);
+    footerEl?.toggleAttribute('data-has-content', this.hasFooter);
+  }
 
-	render() {
-		return html`
+  render() {
+    return html`
       <div class="card">
         <div class="card__header"><slot name="header"></slot></div>
         <div class="card__content"><slot></slot></div>
         <div class="card__footer"><slot name="footer"></slot></div>
       </div>
     `;
-	}
+  }
 }

package/src/components/card/card.css

@@ -2,149 +2,149 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: block;
-	flex-grow: 1;
-	/* Enable container queries for responsive card layouts */
-	container-type: inline-size;
-	container-name: card;
+  display: block;
+  flex-grow: 1;
+  /* Enable container queries for responsive card layouts */
+  container-type: inline-size;
+  container-name: card;
 }
 
 .card {
-	display: flex;
-	inline-size: 100%;
-	min-block-size: 100%;
-	flex-direction: column;
-	justify-content: flex-start;
-	overflow: hidden;
-	background: var(--g-color-background-default);
-	border-style: solid;
-	border-width: var(--g-border-width-sm);
-	border-color: var(--g-color-border-default);
-	border-radius: var(--g-border-radius-md);
-	box-shadow: var(--g-box-shadow-md);
-	transition:
-		box-shadow 0.2s ease,
-		transform 0.2s ease,
-		border-color 0.2s ease,
-		background-color 0.2s ease;
+  display: flex;
+  inline-size: 100%;
+  min-block-size: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow: hidden;
+  background: var(--g-color-background-default);
+  border-style: solid;
+  border-width: var(--g-border-width-sm);
+  border-color: var(--g-color-border-default);
+  border-radius: var(--g-border-radius-md);
+  box-shadow: var(--g-box-shadow-md);
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    background-color 0.2s ease;
 }
 
 /* Image support - images in header or content will be styled appropriately */
 .card__header img,
 .card__content img {
-	display: block;
-	inline-size: 100%;
-	block-size: auto;
-	border-radius: inherit;
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+  border-radius: inherit;
 }
 
 .card__header {
-	padding-inline: var(--g-spacing-md);
-	padding-block: var(--g-spacing-sm);
-	border-block-end: 1px solid var(--g-color-border-default);
+  padding-inline: var(--g-spacing-md);
+  padding-block: var(--g-spacing-sm);
+  border-block-end: 1px solid var(--g-color-border-default);
 }
 
 .card__header:not([data-has-content]) {
-	display: none;
+  display: none;
 }
 
 .card__header ::slotted(*) {
-	margin: 0;
-	font: var(--g-typography-h5-font);
+  margin: 0;
+  font: var(--g-typography-h5-font);
 }
 
 .card__content {
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	gap: var(--g-spacing-md);
-	padding-block: var(--g-spacing-md);
-	padding-inline: var(--g-spacing-md);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: var(--g-spacing-md);
+  padding-block: var(--g-spacing-md);
+  padding-inline: var(--g-spacing-md);
 }
 
 .card__content:has(::slotted(:empty)) {
-	display: none;
+  display: none;
 }
 
 .card__content > * {
-	margin: 0;
+  margin: 0;
 }
 
 .card__footer {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: flex-start;
-	align-items: center;
-	gap: var(--g-spacing-sm);
-	padding-inline: var(--g-spacing-md);
-	padding-block: var(--g-spacing-sm);
-	border-block-start: 1px solid var(--g-color-border-default);
-	background: var(--g-color-background-default);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--g-spacing-sm);
+  padding-inline: var(--g-spacing-md);
+  padding-block: var(--g-spacing-sm);
+  border-block-start: 1px solid var(--g-color-border-default);
+  background: var(--g-color-background-default);
 }
 
 .card__footer:not([data-has-content]) {
-	display: none;
+  display: none;
 }
 
 .card__footer ::slotted(grantcodes-button-group) {
-	width: 100%;
-	justify-content: flex-end;
+  width: 100%;
+  justify-content: flex-end;
 }
 
 .card__meta {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: var(--g-spacing-md);
-	margin: 0;
-	padding-inline: var(--g-spacing-md);
-	padding-block: 1em;
-	font-size: var(--g-typography-font-size-xs);
-	/* Use color-mix() for modern color manipulation */
-	background-color: color-mix(
-		in srgb,
-		var(--g-color-background-default) 90%,
-		var(--g-color-primary-500) 10%
-	);
-	color: var(--g-color-content-default);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--g-spacing-md);
+  margin: 0;
+  padding-inline: var(--g-spacing-md);
+  padding-block: 1em;
+  font-size: var(--g-typography-font-size-xs);
+  /* Use color-mix() for modern color manipulation */
+  background-color: color-mix(
+    in srgb,
+    var(--g-color-background-default) 90%,
+    var(--g-color-primary-500) 10%
+  );
+  color: var(--g-color-content-default);
 }
 
 .card__meta__item {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	flex-wrap: nowrap;
-	gap: 0.3em;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 0.3em;
 }
 
 .card__meta__item dt,
 .card__meta__item dd {
-	display: block;
-	margin: 0;
-	padding: 0;
+  display: block;
+  margin: 0;
+  padding: 0;
 }
 
 .card__meta__item dt::after {
-	content: ":";
+  content: ":";
 }
 
 :host(.is-clickable) .card {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 :host(.is-clickable:hover) .card {
-	transform: translateY(-2px);
-	box-shadow: var(--g-box-shadow-lg);
-	border-color: var(--g-color-border-default);
+  transform: translateY(-2px);
+  box-shadow: var(--g-box-shadow-lg);
+  border-color: var(--g-color-border-default);
 }
 
 :host(.is-clickable:active) .card {
-	transform: translateY(-1px);
-	border-color: var(--g-color-border-primary);
+  transform: translateY(-1px);
+  border-color: var(--g-color-border-primary);
 }

package/src/components/card/card.js

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

package/src/components/card/card.react.js

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