@grantcodes/ui 2.15.7 → 2.16.0

package/src/components/badge/badge.css

@@ -1,84 +1,71 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host {
-	display: inline-flex;
+  display: inline-flex;
 }
 
 .badge {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--g-spacing-xs);
-	padding-inline: 0.625em;
-	padding-block: 0.375em;
-	border-radius: var(--g-border-radius-md);
-	font: var(--g-typography-body-sm-font);
-	font-size: var(--g-typography-font-size-2xs);
-	line-height: 1;
-	white-space: nowrap;
-	border-width: 1px;
-	border-style: solid;
-	transition: all 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--g-spacing-xs);
+  padding-inline: 0.625em;
+  padding-block: 0.375em;
+  border-radius: var(--g-border-radius-md);
+  font: var(--g-typography-body-sm-font);
+  font-size: var(--g-typography-font-size-2xs);
+  line-height: 1;
+  white-space: nowrap;
+  border-width: 1px;
+  border-style: solid;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
 }
 
 /* Soft style variants */
 .badge--primary {
-	background-color: var(--g-color-primary-200);
-	color: var(--g-color-primary-600);
-	border-color: transparent;
+  background-color: var(--g-color-primary-200);
+  color: var(--g-color-primary-600);
+  border-color: transparent;
 }
 
 .badge--success {
-	background-color: color-mix(
-		in srgb,
-		var(--g-color-utility-success) 15%,
-		transparent
-	);
-	color: var(--g-color-content-utility-success);
-	border-color: transparent;
+  background-color: color-mix(in srgb, var(--g-color-utility-success) 15%, transparent);
+  color: var(--g-color-content-utility-success);
+  border-color: transparent;
 }
 
 .badge--warning {
-	background-color: color-mix(
-		in srgb,
-		var(--g-color-utility-warning) 15%,
-		transparent
-	);
-	color: var(--g-color-content-utility-warning);
-	border-color: transparent;
+  background-color: color-mix(in srgb, var(--g-color-utility-warning) 15%, transparent);
+  color: var(--g-color-content-utility-warning);
+  border-color: transparent;
 }
 
 .badge--error {
-	background-color: color-mix(
-		in srgb,
-		var(--g-color-utility-error) 15%,
-		transparent
-	);
-	color: var(--g-color-content-utility-error);
-	border-color: transparent;
+  background-color: color-mix(in srgb, var(--g-color-utility-error) 15%, transparent);
+  color: var(--g-color-content-utility-error);
+  border-color: transparent;
 }
 
 .badge--info {
-	background-color: color-mix(
-		in srgb,
-		var(--g-color-utility-info) 15%,
-		transparent
-	);
-	color: var(--g-color-content-utility-info);
-	border-color: transparent;
+  background-color: color-mix(in srgb, var(--g-color-utility-info) 15%, transparent);
+  color: var(--g-color-content-utility-info);
+  border-color: transparent;
 }
 
 .badge--neutral {
-	background-color: var(--g-color-background-subtle);
-	color: var(--g-color-content-default);
-	border-color: transparent;
+  background-color: var(--g-color-background-subtle);
+  color: var(--g-color-content-default);
+  border-color: transparent;
 }
 
 .badge__content {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.25em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
 }

package/src/components/badge/badge.js

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

package/src/components/badge/badge.react.js

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

package/src/components/badge/badge.stories.js

@@ -1,19 +1,19 @@
-import { html } from "lit";
-import "./badge.js";
+import { html } from 'lit';
+import './badge.js';
 
 const meta = {
-	title: "Components/Badge",
-	component: "grantcodes-badge",
-	args: {
-		variant: "neutral",
-	},
-	argTypes: {
-		variant: {
-			control: "select",
-			options: ["primary", "success", "warning", "error", "info", "neutral"],
-		},
-	},
-	render: (args) => html`
+  title: 'Components/Badge',
+  component: 'grantcodes-badge',
+  args: {
+    variant: 'neutral',
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'success', 'warning', 'error', 'info', 'neutral'],
+    },
+  },
+  render: (args) => html`
 		<grantcodes-badge variant=${args.variant} style=${args.style}>
 			Badge
 		</grantcodes-badge>
@@ -28,19 +28,19 @@ export default meta;
 export const Badge = {};
 
 export const Primary = {
-	args: {
-		variant: "primary",
-	},
+  args: {
+    variant: 'primary',
+  },
 };
 
 export const Success = {
-	args: {
-		variant: "success",
-	},
+  args: {
+    variant: 'success',
+  },
 };
 
 export const Warning = {
-	args: {
-		variant: "warning",
-	},
+  args: {
+    variant: 'warning',
+  },
 };

package/src/components/badge/badge.test.js

@@ -1,83 +1,68 @@
-import { describe, it, afterEach } from "node:test";
-import { strict as assert } from "node:assert";
-import { fixture, cleanup } from "../../test-utils/index.js";
-import "./badge.js";
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, fixture } from '../../test-utils/index.js';
+import './badge.js';
 
-describe("Badge Component", () => {
-	let element;
+describe('Badge Component', () => {
+  let element;
 
-	afterEach(() => {
-		cleanup(element);
-	});
+  afterEach(() => {
+    cleanup(element);
+  });
 
-	it("should render with default properties", async () => {
-		element = await fixture("grantcodes-badge");
-		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-badge');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
 
-	it("should have neutral variant by default", async () => {
-		element = await fixture("grantcodes-badge");
-		assert.strictEqual(
-			element.variant,
-			"neutral",
-			"Default variant should be neutral",
-		);
-	});
+  it('should have neutral variant by default', async () => {
+    element = await fixture('grantcodes-badge');
+    assert.strictEqual(element.variant, 'neutral', 'Default variant should be neutral');
+  });
 
-	// it("should have outline style by default", async () => {
-	// 	element = await fixture("grantcodes-badge");
-	// 	assert.strictEqual(element.style, "outline", "Default style should be outline");
-	// });
+  // it("should have outline style by default", async () => {
+  // 	element = await fixture("grantcodes-badge");
+  // 	assert.strictEqual(element.style, "outline", "Default style should be outline");
+  // });
 
-	// it("should render badge with correct style class", async () => {
-	// 	element = await fixture("grantcodes-badge", {
-	// 		style: "outline",
-	// 	});
+  // it("should render badge with correct style class", async () => {
+  // 	element = await fixture("grantcodes-badge", {
+  // 		style: "outline",
+  // 	});
 
-	// 	const badge = element.shadowRoot.querySelector(".badge--outline");
-	// 	assert.ok(badge, "Badge should have outline style class");
-	// });
+  // 	const badge = element.shadowRoot.querySelector(".badge--outline");
+  // 	assert.ok(badge, "Badge should have outline style class");
+  // });
 
-	it("should render slotted content", async () => {
-		element = await fixture("grantcodes-badge");
-		element.textContent = "Badge Text";
+  it('should render slotted content', async () => {
+    element = await fixture('grantcodes-badge');
+    element.textContent = 'Badge Text';
 
-		await element.updateComplete;
+    await element.updateComplete;
 
-		assert.strictEqual(
-			element.textContent,
-			"Badge Text",
-			"Slotted content should be rendered",
-		);
-	});
+    assert.strictEqual(element.textContent, 'Badge Text', 'Slotted content should be rendered');
+  });
 
-	it("should support all variant types", async () => {
-		const variants = [
-			"primary",
-			"success",
-			"warning",
-			"error",
-			"info",
-			"neutral",
-		];
+  it('should support all variant types', async () => {
+    const variants = ['primary', 'success', 'warning', 'error', 'info', 'neutral'];
 
-		for (const variant of variants) {
-			element = await fixture("grantcodes-badge", { variant });
-			const badge = element.shadowRoot.querySelector(`.badge--${variant}`);
-			assert.ok(badge, `Badge should have ${variant} variant class`);
-			cleanup(element);
-		}
-	});
+    for (const variant of variants) {
+      element = await fixture('grantcodes-badge', { variant });
+      const badge = element.shadowRoot.querySelector(`.badge--${variant}`);
+      assert.ok(badge, `Badge should have ${variant} variant class`);
+      cleanup(element);
+    }
+  });
 
-	// it("should support all style types", async () => {
-	// 	const styles = ["outline", "soft"];
+  // it("should support all style types", async () => {
+  // 	const styles = ["outline", "soft"];
 
-	// 	for (const style of styles) {
-	// 		element = await fixture("grantcodes-badge", { style });
-	// 		const badge = element.shadowRoot.querySelector(`.badge--${style}`);
-	// 		assert.ok(badge, `Badge should have ${style} style class`);
-	// 		cleanup(element);
-	// 	}
-	// });
+  // 	for (const style of styles) {
+  // 		element = await fixture("grantcodes-badge", { style });
+  // 		const badge = element.shadowRoot.querySelector(`.badge--${style}`);
+  // 		assert.ok(badge, `Badge should have ${style} style class`);
+  // 		cleanup(element);
+  // 	}
+  // });
 });

package/src/components/badge/index.js

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

package/src/components/breadcrumb/breadcrumb.component.js

@@ -1,112 +1,111 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import focusRingStyles from "../../lib/styles/focus-ring.css" with {
-	type: "css",
-};
-import breadcrumbStyles from "./breadcrumb.css" with { type: "css" };
+import { LitElement } from 'lit';
+import { html } from 'lit/static-html.js';
+import linkStyles from '../../css/elements/a.css' with { type: 'css' };
+import focusRingStyles from '../../lib/styles/focus-ring.css' with { type: 'css' };
+import breadcrumbStyles from './breadcrumb.css' with { type: 'css' };
 
 export class GrantCodesBreadcrumb extends LitElement {
-	static styles = [focusRingStyles, breadcrumbStyles];
-
-	static properties = {
-		separator: { type: String },
-	};
-
-	constructor() {
-		super();
-
-		/**
-		 * Custom separator between breadcrumb items
-		 * @type {string}
-		 */
-		this.separator = "/";
-	}
-
-	firstUpdated() {
-		const value = this.separator ?? "/";
-		this.style.setProperty("--component-breadcrumb-separator", `'${value}'`);
-
-		// Track slot content changes to update separators
-		const slot = this.renderRoot.querySelector("slot:not([name])");
-		if (slot) {
-			slot.addEventListener("slotchange", () => this._updateSeparators());
-			this._updateSeparators();
-		}
-	}
-
-	updated(changed) {
-		if (changed.has("separator")) {
-			// Reflect separator into CSS custom property for pseudo-element content
-			const value = this.separator ?? "/";
-			this.style.setProperty("--component-breadcrumb-separator", `'${value}'`);
-		}
-
-		// Recalculate separators if light DOM may have changed
-		if (changed.size > 0) {
-			this._updateSeparators();
-		}
-	}
-
-	_updateSeparators() {
-		const slot = this.renderRoot.querySelector("slot:not([name])");
-		if (!slot) return;
-		const items = slot
-			.assignedElements({ flatten: true })
-			.filter((el) => el.tagName === "GRANTCODES-BREADCRUMB-ITEM");
-		items.forEach((el, index) => {
-			if (index < items.length - 1) {
-				el.setAttribute("data-has-separator", "");
-			} else {
-				el.removeAttribute("data-has-separator");
-			}
-		});
-	}
-
-	render() {
-		return html`
+  static styles = [focusRingStyles, breadcrumbStyles];
+
+  static properties = {
+    separator: { type: String },
+  };
+
+  constructor() {
+    super();
+
+    /**
+     * Custom separator between breadcrumb items
+     * @type {string}
+     */
+    this.separator = '/';
+  }
+
+  firstUpdated() {
+    const value = this.separator ?? '/';
+    this.style.setProperty('--component-breadcrumb-separator', `'${value}'`);
+
+    // Track slot content changes to update separators
+    const slot = this.renderRoot.querySelector('slot:not([name])');
+    if (slot) {
+      slot.addEventListener('slotchange', () => this._updateSeparators());
+      this._updateSeparators();
+    }
+  }
+
+  updated(changed) {
+    if (changed.has('separator')) {
+      // Reflect separator into CSS custom property for pseudo-element content
+      const value = this.separator ?? '/';
+      this.style.setProperty('--component-breadcrumb-separator', `'${value}'`);
+    }
+
+    // Recalculate separators if light DOM may have changed
+    if (changed.size > 0) {
+      this._updateSeparators();
+    }
+  }
+
+  _updateSeparators() {
+    const slot = this.renderRoot.querySelector('slot:not([name])');
+    if (!slot) return;
+    const items = slot
+      .assignedElements({ flatten: true })
+      .filter((el) => el.tagName === 'GRANTCODES-BREADCRUMB-ITEM');
+    items.forEach((el, index) => {
+      if (index < items.length - 1) {
+        el.setAttribute('data-has-separator', '');
+      } else {
+        el.removeAttribute('data-has-separator');
+      }
+    });
+  }
+
+  render() {
+    return html`
 			<nav aria-label="Breadcrumb" class="breadcrumb">
 				<ol class="breadcrumb__list">
 					<slot></slot>
 				</ol>
 			</nav>
 		`;
-	}
+  }
 }
 
 export class GrantCodesBreadcrumbItem extends LitElement {
-	static styles = [focusRingStyles, breadcrumbStyles];
-
-	static properties = {
-		href: { type: String },
-		current: { type: Boolean },
-	};
-
-	constructor() {
-		super();
-
-		/**
-		 * URL for the breadcrumb item
-		 * @type {string}
-		 */
-		this.href = "";
-
-		/**
-		 * Whether this is the current page
-		 * @type {boolean}
-		 */
-		this.current = false;
-	}
-
-	render() {
-		const content =
-			this.href && !this.current
-				? html`<a href="${this.href}" class="breadcrumb__link focus-ring"><slot></slot></a>`
-				: html`<span class="breadcrumb__text"><slot></slot></span>`;
-
-		return html`
+  static styles = [linkStyles, focusRingStyles, breadcrumbStyles];
+
+  static properties = {
+    href: { type: String },
+    current: { type: Boolean },
+  };
+
+  constructor() {
+    super();
+
+    /**
+     * URL for the breadcrumb item
+     * @type {string}
+     */
+    this.href = '';
+
+    /**
+     * Whether this is the current page
+     * @type {boolean}
+     */
+    this.current = false;
+  }
+
+  render() {
+    const content =
+      this.href && !this.current
+        ? html`<a href="${this.href}" class="breadcrumb__link focus-ring"><slot></slot></a>`
+        : html`<span class="breadcrumb__text"><slot></slot></span>`;
+
+    return html`
 			<li class="breadcrumb__item" ?data-current=${this.current}>
 				${content}
 			</li>
 		`;
-	}
+  }
 }