@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/toast/toast.test.js

@@ -1,224 +1,263 @@
-import { describe, it, afterEach } from "node:test";
-import { strict as assert } from "node:assert";
-import { fixture, cleanup, click } from "../../test-utils/index.js";
-import "./toast.js";
-
-describe("Toast Component", () => {
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("should render with default properties", async () => {
-		element = await fixture("grantcodes-toast");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
-
-	it("should have info variant by default", async () => {
-		element = await fixture("grantcodes-toast");
-		assert.strictEqual(
-			element.variant,
-			"info",
-			"Default variant should be info",
-		);
-	});
-
-	it("should have 5000ms duration by default", async () => {
-		element = await fixture("grantcodes-toast");
-		assert.strictEqual(
-			element.duration,
-			5000,
-			"Default duration should be 5000ms",
-		);
-	});
-
-	it("should have top-right position by default", async () => {
-		element = await fixture("grantcodes-toast");
-		assert.strictEqual(
-			element.position,
-			"top-right",
-			"Default position should be top-right",
-		);
-	});
-
-	it("should be dismissible by default", async () => {
-		element = await fixture("grantcodes-toast");
-		assert.strictEqual(
-			element.dismissible,
-			true,
-			"Should be dismissible by default",
-		);
-	});
-
-	it("should render toast with correct variant class", async () => {
-		element = await fixture("grantcodes-toast", {
-			variant: "success",
-		});
-
-		const toast = element.shadowRoot.querySelector(".toast--success");
-		assert.ok(toast, "Toast should have success variant class");
-	});
-
-	it("should render title when provided", async () => {
-		element = await fixture("grantcodes-toast", {
-			title: "Test Title",
-		});
-
-		const title = element.shadowRoot.querySelector(".toast__title");
-		assert.ok(title, "Title element should exist");
-		assert.strictEqual(
-			title.textContent,
-			"Test Title",
-			"Title text should match",
-		);
-	});
-
-	it("should not render title when not provided", async () => {
-		element = await fixture("grantcodes-toast");
-
-		const title = element.shadowRoot.querySelector(".toast__title");
-		assert.ok(!title, "Title element should not exist");
-	});
-
-	it("should render dismiss button when dismissible", async () => {
-		element = await fixture("grantcodes-toast", {
-			dismissible: true,
-		});
-
-		const closeButton = element.shadowRoot.querySelector(".toast__close");
-		assert.ok(closeButton, "Close button should exist");
-	});
-
-	it("should not render dismiss button when not dismissible", async () => {
-		element = await fixture("grantcodes-toast", {
-			dismissible: false,
-		});
-
-		const closeButton = element.shadowRoot.querySelector(".toast__close");
-		assert.ok(!closeButton, "Close button should not exist");
-	});
-
-	it("should have role=status", async () => {
-		element = await fixture("grantcodes-toast");
-
-		const toast = element.shadowRoot.querySelector(".toast");
-		assert.strictEqual(
-			toast.getAttribute("role"),
-			"status",
-			"Should have status role",
-		);
-	});
-
-	it("should have aria-live=polite", async () => {
-		element = await fixture("grantcodes-toast");
-
-		const toast = element.shadowRoot.querySelector(".toast");
-		assert.strictEqual(
-			toast.getAttribute("aria-live"),
-			"polite",
-			"Should have aria-live polite",
-		);
-	});
-
-	it("should render icon based on variant", async () => {
-		element = await fixture("grantcodes-toast", {
-			variant: "success",
-		});
-
-		const icon = element.shadowRoot.querySelector(".toast__icon");
-		assert.ok(icon, "Icon should exist");
-	});
-
-	it("should emit dismiss event when dismissed", async () => {
-		element = await fixture("grantcodes-toast", {
-			dismissible: true,
-			duration: 0, // Disable auto-dismiss
-		});
-
-		let dismissed = false;
-		element.addEventListener("dismiss", () => {
-			dismissed = true;
-		});
-
-		const closeButton = element.shadowRoot.querySelector(".toast__close");
-		click(closeButton);
-
-		// Wait a bit for animation
-		await new Promise((resolve) => setTimeout(resolve, 350));
-
-		assert.ok(dismissed, "Dismiss event should have fired");
-	});
-
-	it("should support all variant types", async () => {
-		const variants = ["info", "success", "warning", "error"];
-
-		for (const variant of variants) {
-			element = await fixture("grantcodes-toast", { variant });
-			const toast = element.shadowRoot.querySelector(`.toast--${variant}`);
-			assert.ok(toast, `Toast should have ${variant} variant class`);
-			cleanup(element);
-		}
-	});
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+import { cleanup, click, fixture } from '../../test-utils/index.js';
+import './toast.js';
+
+describe('Toast Component', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('should render with default properties', async () => {
+    element = await fixture('grantcodes-toast');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  it('should have info variant by default', async () => {
+    element = await fixture('grantcodes-toast');
+    assert.strictEqual(element.variant, 'info', 'Default variant should be info');
+  });
+
+  it('should have 5000ms duration by default', async () => {
+    element = await fixture('grantcodes-toast');
+    assert.strictEqual(element.duration, 5000, 'Default duration should be 5000ms');
+  });
+
+  it('should have top-right position by default', async () => {
+    element = await fixture('grantcodes-toast');
+    assert.strictEqual(element.position, 'top-right', 'Default position should be top-right');
+  });
+
+  it('should be dismissible by default', async () => {
+    element = await fixture('grantcodes-toast');
+    assert.strictEqual(element.dismissible, true, 'Should be dismissible by default');
+  });
+
+  it('should render toast with correct variant class', async () => {
+    element = await fixture('grantcodes-toast', {
+      variant: 'success',
+    });
+
+    const toast = element.shadowRoot.querySelector('.toast--success');
+    assert.ok(toast, 'Toast should have success variant class');
+  });
+
+  it('should render title when provided', async () => {
+    element = await fixture('grantcodes-toast', {
+      title: 'Test Title',
+    });
+
+    const title = element.shadowRoot.querySelector('.toast__title');
+    assert.ok(title, 'Title element should exist');
+    assert.strictEqual(title.textContent, 'Test Title', 'Title text should match');
+  });
+
+  it('should not render title when not provided', async () => {
+    element = await fixture('grantcodes-toast');
+
+    const title = element.shadowRoot.querySelector('.toast__title');
+    assert.ok(!title, 'Title element should not exist');
+  });
+
+  it('should render dismiss button when dismissible', async () => {
+    element = await fixture('grantcodes-toast', {
+      dismissible: true,
+    });
+
+    const closeButton = element.shadowRoot.querySelector('.toast__close');
+    assert.ok(closeButton, 'Close button should exist');
+  });
+
+  it('should not render dismiss button when not dismissible', async () => {
+    element = await fixture('grantcodes-toast', {
+      dismissible: false,
+    });
+
+    const closeButton = element.shadowRoot.querySelector('.toast__close');
+    assert.ok(!closeButton, 'Close button should not exist');
+  });
+
+  it('should have role=status', async () => {
+    element = await fixture('grantcodes-toast');
+
+    const toast = element.shadowRoot.querySelector('.toast');
+    assert.strictEqual(toast.getAttribute('role'), 'status', 'Should have status role');
+  });
+
+  it('should have aria-live=polite', async () => {
+    element = await fixture('grantcodes-toast');
+
+    const toast = element.shadowRoot.querySelector('.toast');
+    assert.strictEqual(toast.getAttribute('aria-live'), 'polite', 'Should have aria-live polite');
+  });
+
+  it('should render icon based on variant', async () => {
+    element = await fixture('grantcodes-toast', {
+      variant: 'success',
+    });
+
+    const icon = element.shadowRoot.querySelector('.toast__icon');
+    assert.ok(icon, 'Icon should exist');
+  });
+
+  it('should emit dismiss event when dismissed', async () => {
+    element = await fixture('grantcodes-toast', {
+      dismissible: true,
+      duration: 0, // Disable auto-dismiss
+    });
+
+    let dismissed = false;
+    element.addEventListener('dismiss', () => {
+      dismissed = true;
+    });
+
+    const closeButton = element.shadowRoot.querySelector('.toast__close');
+    click(closeButton);
+
+    // Wait a bit for animation
+    await new Promise((resolve) => setTimeout(resolve, 350));
+
+    assert.ok(dismissed, 'Dismiss event should have fired');
+  });
+
+  it('should support all variant types', async () => {
+    const variants = ['info', 'success', 'warning', 'error'];
+
+    for (const variant of variants) {
+      element = await fixture('grantcodes-toast', { variant });
+      const toast = element.shadowRoot.querySelector(`.toast--${variant}`);
+      assert.ok(toast, `Toast should have ${variant} variant class`);
+      cleanup(element);
+    }
+  });
+
+  it('should announce errors assertively and other variants politely', async () => {
+    element = await fixture('grantcodes-toast', { variant: 'error' });
+
+    const errorToast = element.shadowRoot.querySelector('.toast--error');
+    assert.strictEqual(errorToast.getAttribute('role'), 'alert', 'Errors should interrupt');
+    assert.strictEqual(errorToast.getAttribute('aria-live'), 'assertive');
+
+    const info = await fixture('grantcodes-toast', { variant: 'info' });
+    const infoToast = info.shadowRoot.querySelector('.toast--info');
+    assert.strictEqual(infoToast.getAttribute('role'), 'status', 'Other variants should wait');
+    assert.strictEqual(infoToast.getAttribute('aria-live'), 'polite');
+    cleanup(info);
+  });
+
+  it('should hold the toast open while it is hovered', async () => {
+    element = await fixture('grantcodes-toast', { duration: 60 });
+
+    const toast = element.shadowRoot.querySelector('.toast');
+    toast.dispatchEvent(new Event('mouseenter'));
+    await new Promise((resolve) => setTimeout(resolve, 120));
+
+    assert.ok(element.isConnected, 'A hovered toast must not auto-dismiss');
+  });
+
+  it('should restart the auto-dismiss timer when the pointer leaves', async () => {
+    element = await fixture('grantcodes-toast', { duration: 60 });
+
+    const toast = element.shadowRoot.querySelector('.toast');
+    toast.dispatchEvent(new Event('mouseenter'));
+    await new Promise((resolve) => setTimeout(resolve, 40));
+    toast.dispatchEvent(new Event('mouseleave'));
+    await new Promise((resolve) => setTimeout(resolve, 400));
+
+    assert.strictEqual(
+      element.isConnected,
+      false,
+      'Toast should dismiss once the pointer leaves',
+    );
+  });
+
+  it('should skip the exit animation when reduced motion is preferred', async () => {
+    element = await fixture('grantcodes-toast', { duration: 0 });
+
+    const originalMatchMedia = globalThis.window.matchMedia;
+    globalThis.window.matchMedia = () => ({ matches: true });
+
+    click(element.shadowRoot.querySelector('.toast__close'));
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    globalThis.window.matchMedia = originalMatchMedia;
+
+    assert.strictEqual(element.isConnected, false, 'No exit animation to wait for');
+  });
+
+  it('should dismiss through a view transition when motion is allowed', async () => {
+    const originalMatchMedia = globalThis.window.matchMedia;
+    const originalStartViewTransition = globalThis.document.startViewTransition;
+    let transitions = 0;
+    globalThis.window.matchMedia = () => ({ matches: false });
+    globalThis.document.startViewTransition = (callback) => {
+      transitions++;
+      callback();
+      return { finished: Promise.resolve() };
+    };
+
+    element = await fixture('grantcodes-toast', { dismissible: true, duration: 0 });
+    click(element.shadowRoot.querySelector('.toast__close'));
+    await new Promise((resolve) => setTimeout(resolve, 20));
+
+    globalThis.window.matchMedia = originalMatchMedia;
+    globalThis.document.startViewTransition = originalStartViewTransition;
+
+    assert.strictEqual(transitions, 2, 'Enter and exit should both animate');
+    assert.strictEqual(element.isConnected, false, 'Toast should be removed');
+  });
 });
 
-describe("Toast Container Component", () => {
-	let element;
-
-	afterEach(() => {
-		cleanup(element);
-	});
-
-	it("should render toast container", async () => {
-		element = await fixture("grantcodes-toast-container");
-		assert.ok(element, "Element should be created");
-		assert.ok(element.shadowRoot, "Element should have shadow root");
-	});
-
-	it("should have top-right position by default", async () => {
-		element = await fixture("grantcodes-toast-container");
-		assert.strictEqual(
-			element.position,
-			"top-right",
-			"Default position should be top-right",
-		);
-	});
-
-	it("should render container with correct position class", async () => {
-		element = await fixture("grantcodes-toast-container", {
-			position: "bottom-left",
-		});
-
-		const container = element.shadowRoot.querySelector(
-			".toast-container--bottom-left",
-		);
-		assert.ok(container, "Container should have bottom-left position class");
-	});
-
-	it("should have slot for toast items", async () => {
-		element = await fixture("grantcodes-toast-container");
-		const slot = element.shadowRoot.querySelector("slot");
-		assert.ok(slot, "Slot should exist for toast items");
-	});
-
-	it("should support all position types", async () => {
-		const positions = [
-			"top-left",
-			"top-center",
-			"top-right",
-			"bottom-left",
-			"bottom-center",
-			"bottom-right",
-		];
-
-		for (const position of positions) {
-			element = await fixture("grantcodes-toast-container", { position });
-			const container = element.shadowRoot.querySelector(
-				`.toast-container--${position}`,
-			);
-			assert.ok(container, `Container should have ${position} position class`);
-			cleanup(element);
-		}
-	});
+describe('Toast Container Component', () => {
+  let element;
+
+  afterEach(() => {
+    cleanup(element);
+  });
+
+  it('should render toast container', async () => {
+    element = await fixture('grantcodes-toast-container');
+    assert.ok(element, 'Element should be created');
+    assert.ok(element.shadowRoot, 'Element should have shadow root');
+  });
+
+  it('should have top-right position by default', async () => {
+    element = await fixture('grantcodes-toast-container');
+    assert.strictEqual(element.position, 'top-right', 'Default position should be top-right');
+  });
+
+  it('should render container with correct position class', async () => {
+    element = await fixture('grantcodes-toast-container', {
+      position: 'bottom-left',
+    });
+
+    const container = element.shadowRoot.querySelector('.toast-container--bottom-left');
+    assert.ok(container, 'Container should have bottom-left position class');
+  });
+
+  it('should have slot for toast items', async () => {
+    element = await fixture('grantcodes-toast-container');
+    const slot = element.shadowRoot.querySelector('slot');
+    assert.ok(slot, 'Slot should exist for toast items');
+  });
+
+  it('should support all position types', async () => {
+    const positions = [
+      'top-left',
+      'top-center',
+      'top-right',
+      'bottom-left',
+      'bottom-center',
+      'bottom-right',
+    ];
+
+    for (const position of positions) {
+      element = await fixture('grantcodes-toast-container', { position });
+      const container = element.shadowRoot.querySelector(`.toast-container--${position}`);
+      assert.ok(container, `Container should have ${position} position class`);
+      cleanup(element);
+    }
+  });
 });

package/src/components/tooltip/index.js

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

package/src/components/tooltip/tooltip.component.js

@@ -1,62 +1,69 @@
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-import tooltipStyles from "./tooltip.css" with { type: "css" };
-import { generateId } from "../../lib/generate-id.js";
+import { LitElement } from 'lit';
+import { html } from 'lit/static-html.js';
+import { generateId } from '../../lib/generate-id.js';
+import tooltipStyles from './tooltip.css' with { type: 'css' };
 
 export class GrantCodesTooltip 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 = [tooltipStyles];
+  // 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 = [tooltipStyles];
 
-	static properties = {
-		label: { type: String },
-		description: { type: String },
-	};
+  static properties = {
+    label: { type: String },
+    description: { type: String },
+  };
 
-	constructor() {
-		super();
+  constructor() {
+    super();
 
-		this.id = generateId("tooltip");
-		/**
-		 * Label for the tooltip, used when the tooltip is the main label for the item.
-		 */
-		this.label = "";
+    /**
+     * Label for the tooltip, used when the tooltip is the main label for the item.
+     */
+    this.label = '';
 
-		/**
-		 * Description for the tooltip, used when the tooltip is additional descriptive text for the item.
-		 */
-		this.description = "";
-	}
+    /**
+     * Description for the tooltip, used when the tooltip is additional descriptive text for the item.
+     */
+    this.description = '';
+  }
 
-	/** @type {Element[]} */
-	slotted = [];
+  /** @type {Element[]} */
+  slotted = [];
 
-	firstUpdated() {
-		const slot = this.renderRoot.querySelector("slot");
-		this.slotted = slot ? slot.assignedElements() : [];
-		const labeledElement = this.slotted[0];
-		if (labeledElement) {
-			// Set up anchor name for CSS anchor positioning
-			const tooltipSlot = this.renderRoot.querySelector(".tooltip__slot");
-			if (tooltipSlot) {
-				tooltipSlot.style.anchorName = `--tooltip-${this.id}`;
-			}
+  connectedCallback() {
+    super.connectedCallback();
+    // Not in the constructor: a custom element that gains an attribute there is never upgraded.
+    if (!this.id) {
+      this.id = generateId('tooltip');
+    }
+  }
 
-			if (this.label) {
-				labeledElement.setAttribute("aria-labelledby", this.id);
-			} else if (this.description) {
-				labeledElement.setAttribute("aria-describedby", this.id);
-			}
-		}
-	}
+  firstUpdated() {
+    const slot = this.renderRoot.querySelector('slot');
+    this.slotted = slot ? slot.assignedElements() : [];
+    const labeledElement = this.slotted[0];
+    if (labeledElement) {
+      // Set up anchor name for CSS anchor positioning
+      const tooltipSlot = this.renderRoot.querySelector('.tooltip__slot');
+      if (tooltipSlot) {
+        tooltipSlot.style.anchorName = `--tooltip-${this.id}`;
+      }
 
-	render() {
-		if (this.label && this.description) {
-			throw new Error("You cannot provide both a label and a description");
-		}
+      if (this.label) {
+        labeledElement.setAttribute('aria-labelledby', this.id);
+      } else if (this.description) {
+        labeledElement.setAttribute('aria-describedby', this.id);
+      }
+    }
+  }
 
-		return html`
+  render() {
+    if (this.label && this.description) {
+      throw new Error('You cannot provide both a label and a description');
+    }
+
+    return html`
       <div class="tooltip">
         <div class="tooltip__slot">
           <slot></slot>
@@ -66,5 +73,5 @@ export class GrantCodesTooltip extends LitElement {
         </p>
       </div>
     `;
-	}
+  }
 }