@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/tooltip/tooltip.css

@@ -1,79 +1,90 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 :host,
 .tooltip,
 .tooltip__slot {
-	width: fit-content;
+  width: fit-content;
 }
 
 .tooltip {
-	position: relative;
+  position: relative;
 }
 
 .tooltip__slot {
-	padding: var(--g-spacing-sm);
-	margin: calc(-1 * var(--g-spacing-sm));
-	/* Anchor name will be set via JavaScript to include unique ID */
+  padding: var(--g-spacing-sm);
+  margin: calc(-1 * var(--g-spacing-sm));
+  /* Anchor name will be set via JavaScript to include unique ID */
 }
 
 .tooltip__content {
-	display: none;
-	width: fit-content;
-	margin: 0;
-	max-width: 100%;
-	min-width: 6rem;
-	z-index: 100;
-	border-radius: var(--g-border-radius-md);
-	padding: 0.6em 1em;
-	font-size: var(--g-typography-font-size-xs);
-	line-height: 1;
-	color: var(--g-color-primary-900);
-	background-color: var(--g-color-primary-100);
-	box-shadow:
-		0 1px 3px rgba(0, 0, 0, 0.12),
-		0 1px 2px rgba(0, 0, 0, 0.24);
-	user-select: none;
-	text-align: center;
-	opacity: 0;
-	transition: opacity 0.2s;
-	transition-behavior: allow-discrete;
+  display: none;
+  width: fit-content;
+  margin: 0;
+  max-width: 100%;
+  min-width: 6rem;
+  z-index: 100;
+  border-radius: var(--g-border-radius-md);
+  padding: 0.6em 1em;
+  font-size: var(--g-typography-font-size-xs);
+  line-height: 1;
+  color: var(--g-color-primary-900);
+  background-color: var(--g-color-primary-100);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.24);
+  user-select: none;
+  text-align: center;
+  opacity: 0;
+  /* allow-discrete keeps the box rendered while it fades out. */
+  transition:
+    opacity 0.2s ease,
+    display 0.2s;
+  transition-behavior: allow-discrete;
 
-	/* Modern CSS Anchor Positioning API */
-	/* This positions the tooltip relative to its anchor (the slot) */
-	position: absolute;
+  /* Modern CSS Anchor Positioning API */
+  /* This positions the tooltip relative to its anchor (the slot) */
+  position: absolute;
 
-	/* Try anchor positioning first (modern browsers) */
-	position-anchor: var(--tooltip-anchor, none);
-	position-area: block-end;
-	margin-block-start: 0.5rem;
+  /* Try anchor positioning first (modern browsers) */
+  position-anchor: var(--tooltip-anchor, none);
+  position-area: block-end;
+  margin-block-start: 0.5rem;
 
-	/* Fallback for browsers without anchor positioning support */
-	@supports not (position-area: block-end) {
-		/* Traditional positioning as fallback */
-		position: absolute;
-		top: 100%;
-		left: 50%;
-		transform: translateX(-50%);
-		margin-top: 0.5rem;
-	}
+  /* Fallback for browsers without anchor positioning support */
+  @supports not (position-area: block-end) {
+    /* Traditional positioning as fallback */
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 0.5rem;
+  }
 }
 
 .tooltip__slot:hover + .tooltip__content,
 .tooltip__slot:focus + .tooltip__content,
 .tooltip__slot:focus-within + .tooltip__content {
-	display: block;
-	opacity: 1;
+  display: block;
+  opacity: 1;
 }
 
-/* Optional: Position tooltip above when near bottom of viewport */
+/* Entry state for the fade, only while motion is welcome. */
 @media (prefers-reduced-motion: no-preference) {
-	.tooltip__content {
-		@starting-style {
-			opacity: 0;
-		}
-	}
+  @starting-style {
+    .tooltip__slot:hover + .tooltip__content,
+    .tooltip__slot:focus + .tooltip__content,
+    .tooltip__slot:focus-within + .tooltip__content {
+      opacity: 0;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tooltip__content {
+    transition: none;
+  }
 }

package/src/components/tooltip/tooltip.js

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

package/src/components/tooltip/tooltip.react.js

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

package/src/components/tooltip/tooltip.stories.js

@@ -1,24 +1,25 @@
-import { html } from "lit/static-html.js";
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-const { events, args, argTypes, template } =
-	getStorybookHelpers("grantcodes-tooltip");
-import "./tooltip.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit/static-html.js';
+
+const { events, args, argTypes, template } = getStorybookHelpers('grantcodes-tooltip');
+
+import './tooltip.js';
 
 const meta = {
-	title: "Components/Tooltip",
-	component: "grantcodes-tooltip",
-	args: {
-		...args,
-		label: "This is a tooltip label",
-		description: "",
-	},
-	argTypes,
-	render: (args) => template(args, html`<span>This has a tooltip</span>`),
-	parameters: {
-		actions: {
-			handles: events,
-		},
-	},
+  title: 'Components/Tooltip',
+  component: 'grantcodes-tooltip',
+  args: {
+    ...args,
+    label: 'This is a tooltip label',
+    description: '',
+  },
+  argTypes,
+  render: (args) => template(args, html`<span>This has a tooltip</span>`),
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
 };
 
 export default meta;
@@ -26,8 +27,8 @@ export default meta;
 export const Tooltip = {};
 
 export const Description = {
-	args: {
-		label: "",
-		description: "This is a tooltip description",
-	},
+  args: {
+    label: '',
+    description: 'This is a tooltip description',
+  },
 };

package/src/components/tooltip/tooltip.test.js

@@ -1,156 +1,144 @@
-import { describe, it, afterEach } from "node:test";
-import { strict as assert } from "node:assert";
-import { fixture, cleanup } from "../../test-utils/index.js";
-import "./tooltip.js";
-
-describe("Tooltip Component", () => {
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("should render with default properties", async () => {
-		element = await fixture("grantcodes-tooltip");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
-
-	it("should have label property", async () => {
-		element = await fixture("grantcodes-tooltip", {
-			label: "Tooltip label",
-		});
-
-		assert.strictEqual(
-			element.label,
-			"Tooltip label",
-			"Label property should be set",
-		);
-	});
-
-	it("should have description property", async () => {
-		element = await fixture("grantcodes-tooltip", {
-			description: "Tooltip description",
-		});
-
-		assert.strictEqual(
-			element.description,
-			"Tooltip description",
-			"Description property should be set",
-		);
-	});
-
-	it("should render tooltip wrapper", async () => {
-		element = await fixture("grantcodes-tooltip", {
-			label: "Test",
-		});
-
-		const tooltip = element.shadowRoot.querySelector(".tooltip");
-		assert.ok(tooltip, "Tooltip wrapper should exist");
-	});
-
-	it("should render tooltip content", async () => {
-		element = await fixture("grantcodes-tooltip", {
-			label: "Test label",
-		});
-
-		const content = element.shadowRoot.querySelector(".tooltip__content");
-		assert.ok(content, "Tooltip content should exist");
-		assert.strictEqual(
-			content.textContent.trim(),
-			"Test label",
-			"Content should match label",
-		);
-	});
-
-	it("should have role=tooltip on content", async () => {
-		element = await fixture("grantcodes-tooltip", {
-			label: "Test",
-		});
-
-		const content = element.shadowRoot.querySelector(".tooltip__content");
-		assert.strictEqual(
-			content.getAttribute("role"),
-			"tooltip",
-			"Should have tooltip role",
-		);
-	});
-
-	it("should generate unique ID", async () => {
-		const element1 = await fixture("grantcodes-tooltip", { label: "Test 1" });
-		const element2 = await fixture("grantcodes-tooltip", { label: "Test 2" });
-
-		assert.notStrictEqual(element1.id, element2.id, "IDs should be unique");
-
-		cleanup(element1);
-		cleanup(element2);
-	});
-
-	it("should have slot for trigger element", async () => {
-		element = await fixture("grantcodes-tooltip", {
-			label: "Tooltip",
-		});
-
-		const slot = element.shadowRoot.querySelector(".tooltip__slot slot");
-		assert.ok(slot, "Slot should exist for trigger element");
-	});
-
-	it.skip("should throw error if both label and description are provided", async () => {
-		// Skipped: Error is thrown during render which causes unhandled rejection in test environment
-		// The error handling works correctly in production, but is difficult to test properly
-		await assert.rejects(
-			async () => {
-				element = await fixture("grantcodes-tooltip", {
-					label: "Label",
-					description: "Description",
-				});
-				await element.updateComplete;
-			},
-			{
-				message: "You cannot provide both a label and a description",
-			},
-			"Should throw error when both label and description are provided",
-		);
-	});
-
-	it("should display description when provided", async () => {
-		element = await fixture("grantcodes-tooltip", {
-			description: "This is a description",
-		});
-
-		const content = element.shadowRoot.querySelector(".tooltip__content");
-		assert.strictEqual(
-			content.textContent.trim(),
-			"This is a description",
-			"Content should match description",
-		);
-	});
-
-	it("should set aria-labelledby when label is provided", async () => {
-		element = await fixture("grantcodes-tooltip", {
-			label: "Button label",
-		});
-
-		const button = document.createElement("button");
-		element.appendChild(button);
-
-		await element.updateComplete;
-
-		// The aria-labelledby is set in firstUpdated
-		// In a test environment, this might need special handling
-	});
-
-	it("should set aria-describedby when description is provided", async () => {
-		element = await fixture("grantcodes-tooltip", {
-			description: "Button description",
-		});
-
-		const button = document.createElement("button");
-		element.appendChild(button);
-
-		await element.updateComplete;
-
-		// The aria-describedby is set in firstUpdated
-		// In a test environment, this might need special handling
-	});
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, fixture } from '../../test-utils/index.js';
+import './tooltip.js';
+
+describe('Tooltip Component', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('should render with default properties', async () => {
+    element = await fixture('grantcodes-tooltip');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  it('should have label property', async () => {
+    element = await fixture('grantcodes-tooltip', {
+      label: 'Tooltip label',
+    });
+
+    assert.strictEqual(element.label, 'Tooltip label', 'Label property should be set');
+  });
+
+  it('should have description property', async () => {
+    element = await fixture('grantcodes-tooltip', {
+      description: 'Tooltip description',
+    });
+
+    assert.strictEqual(
+      element.description,
+      'Tooltip description',
+      'Description property should be set',
+    );
+  });
+
+  it('should render tooltip wrapper', async () => {
+    element = await fixture('grantcodes-tooltip', {
+      label: 'Test',
+    });
+
+    const tooltip = element.shadowRoot.querySelector('.tooltip');
+    assert.ok(tooltip, 'Tooltip wrapper should exist');
+  });
+
+  it('should render tooltip content', async () => {
+    element = await fixture('grantcodes-tooltip', {
+      label: 'Test label',
+    });
+
+    const content = element.shadowRoot.querySelector('.tooltip__content');
+    assert.ok(content, 'Tooltip content should exist');
+    assert.strictEqual(content.textContent.trim(), 'Test label', 'Content should match label');
+  });
+
+  it('should have role=tooltip on content', async () => {
+    element = await fixture('grantcodes-tooltip', {
+      label: 'Test',
+    });
+
+    const content = element.shadowRoot.querySelector('.tooltip__content');
+    assert.strictEqual(content.getAttribute('role'), 'tooltip', 'Should have tooltip role');
+  });
+
+  it('should generate unique ID', async () => {
+    const element1 = await fixture('grantcodes-tooltip', { label: 'Test 1' });
+    const element2 = await fixture('grantcodes-tooltip', { label: 'Test 2' });
+
+    assert.notStrictEqual(element1.id, element2.id, 'IDs should be unique');
+
+    cleanup(element1);
+    cleanup(element2);
+  });
+
+  it('should have slot for trigger element', async () => {
+    element = await fixture('grantcodes-tooltip', {
+      label: 'Tooltip',
+    });
+
+    const slot = element.shadowRoot.querySelector('.tooltip__slot slot');
+    assert.ok(slot, 'Slot should exist for trigger element');
+  });
+
+  it.skip('should throw error if both label and description are provided', async () => {
+    // Skipped: Error is thrown during render which causes unhandled rejection in test environment
+    // The error handling works correctly in production, but is difficult to test properly
+    await assert.rejects(
+      async () => {
+        element = await fixture('grantcodes-tooltip', {
+          label: 'Label',
+          description: 'Description',
+        });
+        await element.updateComplete;
+      },
+      {
+        message: 'You cannot provide both a label and a description',
+      },
+      'Should throw error when both label and description are provided',
+    );
+  });
+
+  it('should display description when provided', async () => {
+    element = await fixture('grantcodes-tooltip', {
+      description: 'This is a description',
+    });
+
+    const content = element.shadowRoot.querySelector('.tooltip__content');
+    assert.strictEqual(
+      content.textContent.trim(),
+      'This is a description',
+      'Content should match description',
+    );
+  });
+
+  it('should set aria-labelledby when label is provided', async () => {
+    element = await fixture('grantcodes-tooltip', {
+      label: 'Button label',
+    });
+
+    const button = document.createElement('button');
+    element.appendChild(button);
+
+    await element.updateComplete;
+
+    // The aria-labelledby is set in firstUpdated
+    // In a test environment, this might need special handling
+  });
+
+  it('should set aria-describedby when description is provided', async () => {
+    element = await fixture('grantcodes-tooltip', {
+      description: 'Button description',
+    });
+
+    const button = document.createElement('button');
+    element.appendChild(button);
+
+    await element.updateComplete;
+
+    // The aria-describedby is set in firstUpdated
+    // In a test environment, this might need special handling
+  });
 });

package/src/constructor.test.js

@@ -0,0 +1,31 @@
+import { strict as assert } from 'node:assert';
+import { describe, it } from 'node:test';
+// Side-effect import: sets up the happy-dom window and document globals.
+import './test-utils/index.js';
+import './components/dropdown/dropdown.js';
+import './components/form-field/form-field.js';
+import './components/tabs/tabs.js';
+import './components/tooltip/tooltip.js';
+
+// A custom element that gains an attribute in its constructor is never upgraded by
+// document.createElement in a real browser: the element stays inert.
+const TAGS = [
+  'grantcodes-dropdown',
+  'grantcodes-form-field',
+  'grantcodes-tabs',
+  'grantcodes-tooltip',
+];
+
+describe('component construction', () => {
+  for (const tag of TAGS) {
+    it(`should construct ${tag} without touching its attributes`, () => {
+      const element = document.createElement(tag);
+
+      assert.strictEqual(
+        element.getAttribute('id'),
+        null,
+        `${tag} set an attribute during construction, so browsers will not upgrade it`,
+      );
+    });
+  }
+});

package/src/css/base.css

@@ -5,3 +5,4 @@
 @import "./elements.css" layer(base);
 @import "./util/index.css" layer(utilities);
 @import "./helpers.css" layer(utilities);
+@import "./view-transitions.css";