@grantcodes/ui 2.15.7 → 2.16.0

package/src/exports.test.js

@@ -1,125 +1,109 @@
-import { describe, it } from "node:test";
-import assert from "node:assert";
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
+import assert from 'node:assert';
+import fs from 'node:fs';
+import path from 'node:path';
+import { describe, it } from 'node:test';
+import { fileURLToPath } from 'node:url';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const pkgPath = path.resolve(__dirname, "..", "package.json");
+const pkgPath = path.resolve(__dirname, '..', 'package.json');
 const pkgRoot = path.dirname(pkgPath);
-const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
 const exports = pkg.exports;
 
 // All 34 component CSS files expected to exist on disk
 // These are resolved via the ./components/* wildcard export
 const expectedComponentCss = [
-	"accordion/accordion.css",
-	"app-bar/app-bar.css",
-	"avatar/avatar.css",
-	"badge/badge.css",
-	"breadcrumb/breadcrumb.css",
-	"button/button.css",
-	"button-group/button-group.css",
-	"card/card.css",
-	"code-preview/code-preview.css",
-	"container/container.css",
-	"cta/cta.css",
-	"dialog/dialog.css",
-	"dropdown/dropdown.css",
-	"dropzone/dropzone.css",
-	"feature-list/feature-list.css",
-	"footer/footer.css",
-	"footer/footer-column.css",
-	"form-field/form-field.css",
-	"gallery/gallery.css",
-	"hero/hero.css",
-	"icon/icon.css",
-	"loading/loading.css",
-	"logo-cloud/logo-cloud.css",
-	"media-text/media-text.css",
-	"newsletter/newsletter.css",
-	"notice/notice.css",
-	"pagination/pagination.css",
-	"pricing/pricing.css",
-	"sidebar/sidebar.css",
-	"stats/stats.css",
-	"tabs/tabs.css",
-	"testimonials/testimonials.css",
-	"toast/toast.css",
-	"tooltip/tooltip.css",
+  'accordion/accordion.css',
+  'app-bar/app-bar.css',
+  'avatar/avatar.css',
+  'badge/badge.css',
+  'breadcrumb/breadcrumb.css',
+  'button/button.css',
+  'button-group/button-group.css',
+  'card/card.css',
+  'code-preview/code-preview.css',
+  'container/container.css',
+  'cta/cta.css',
+  'dialog/dialog.css',
+  'dropdown/dropdown.css',
+  'dropzone/dropzone.css',
+  'feature-list/feature-list.css',
+  'footer/footer.css',
+  'footer/footer-column.css',
+  'form-field/form-field.css',
+  'gallery/gallery.css',
+  'hero/hero.css',
+  'icon/icon.css',
+  'loading/loading.css',
+  'logo-cloud/logo-cloud.css',
+  'media-text/media-text.css',
+  'newsletter/newsletter.css',
+  'notice/notice.css',
+  'pagination/pagination.css',
+  'pricing/pricing.css',
+  'sidebar/sidebar.css',
+  'stats/stats.css',
+  'tabs/tabs.css',
+  'testimonials/testimonials.css',
+  'toast/toast.css',
+  'tooltip/tooltip.css',
 ];
 
-describe("package.json exports", () => {
-	describe("component CSS files exist (resolved via ./components/* wildcard)", () => {
-		for (const cssFile of expectedComponentCss) {
-			it(`src/components/${cssFile} exists on disk`, () => {
-				const fullPath = path.resolve(pkgRoot, "src", "components", cssFile);
-				assert.ok(
-					fs.existsSync(fullPath),
-					`CSS file does not exist: ${fullPath}`,
-				);
-			});
-		}
+describe('package.json exports', () => {
+  describe('component CSS files exist (resolved via ./components/* wildcard)', () => {
+    for (const cssFile of expectedComponentCss) {
+      it(`src/components/${cssFile} exists on disk`, () => {
+        const fullPath = path.resolve(pkgRoot, 'src', 'components', cssFile);
+        assert.ok(fs.existsSync(fullPath), `CSS file does not exist: ${fullPath}`);
+      });
+    }
 
-		it("has ./components/* wildcard export that covers CSS files", () => {
-			assert.ok(
-				exports["./components/*"],
-				"Missing ./components/* wildcard export",
-			);
-		});
-	});
+    it('has ./components/* wildcard export that covers CSS files', () => {
+      assert.ok(exports['./components/*'], 'Missing ./components/* wildcard export');
+    });
+  });
 
-	describe("focus-ring shared styles export", () => {
-		it("has export for ./styles/focus-ring.css", () => {
-			assert.ok(
-				exports["./styles/focus-ring.css"] !== undefined,
-				"Missing export for ./styles/focus-ring.css",
-			);
-		});
+  describe('focus-ring shared styles export', () => {
+    it('has export for ./styles/focus-ring.css', () => {
+      assert.ok(
+        exports['./styles/focus-ring.css'] !== undefined,
+        'Missing export for ./styles/focus-ring.css',
+      );
+    });
 
-		it("./styles/focus-ring.css points to an existing file", () => {
-			const exportValue = exports["./styles/focus-ring.css"];
-			const filePath =
-				typeof exportValue === "string" ? exportValue : exportValue?.import;
-			assert.ok(filePath, "No file path found for ./styles/focus-ring.css");
-			const fullPath = path.resolve(pkgRoot, filePath);
-			assert.ok(fs.existsSync(fullPath), `File does not exist: ${fullPath}`);
-		});
-	});
+    it('./styles/focus-ring.css points to an existing file', () => {
+      const exportValue = exports['./styles/focus-ring.css'];
+      const filePath = typeof exportValue === 'string' ? exportValue : exportValue?.import;
+      assert.ok(filePath, 'No file path found for ./styles/focus-ring.css');
+      const fullPath = path.resolve(pkgRoot, filePath);
+      assert.ok(fs.existsSync(fullPath), `File does not exist: ${fullPath}`);
+    });
+  });
 
-	describe("existing exports preserved", () => {
-		it("has root export (.)", () => {
-			assert.ok(exports["."], "Missing root export");
-			assert.ok(exports["."].import, "Missing root import");
-		});
+  describe('existing exports preserved', () => {
+    it('has root export (.)', () => {
+      assert.ok(exports['.'], 'Missing root export');
+      assert.ok(exports['.'].import, 'Missing root import');
+    });
 
-		it("has ./icons export", () => {
-			assert.ok(exports["./icons"], "Missing ./icons export");
-		});
+    it('has ./icons export', () => {
+      assert.ok(exports['./icons'], 'Missing ./icons export');
+    });
 
-		it("has ./styles/base.css export", () => {
-			assert.ok(
-				exports["./styles/base.css"],
-				"Missing ./styles/base.css export",
-			);
-		});
+    it('has ./styles/base.css export', () => {
+      assert.ok(exports['./styles/base.css'], 'Missing ./styles/base.css export');
+    });
 
-		it("has ./styles/themes/* export", () => {
-			assert.ok(
-				exports["./styles/themes/*"],
-				"Missing ./styles/themes/* export",
-			);
-		});
+    it('has ./styles/themes/* export', () => {
+      assert.ok(exports['./styles/themes/*'], 'Missing ./styles/themes/* export');
+    });
 
-		it("has ./components/* wildcard export", () => {
-			assert.ok(
-				exports["./components/*"],
-				"Missing ./components/* wildcard export",
-			);
-		});
+    it('has ./components/* wildcard export', () => {
+      assert.ok(exports['./components/*'], 'Missing ./components/* wildcard export');
+    });
 
-		it("has ./fonts/* export", () => {
-			assert.ok(exports["./fonts/*"], "Missing ./fonts/* export");
-		});
-	});
+    it('has ./fonts/* export', () => {
+      assert.ok(exports['./fonts/*'], 'Missing ./fonts/* export');
+    });
+  });
 });

package/src/icons.js

@@ -1,3 +1,3 @@
 // Map icons to Lucide icons
 
-export * from "lucide-static";
+export * from 'lucide-static';

package/src/lib/generate-id.js

@@ -4,7 +4,7 @@
  * @returns {string} Generated unique ID
  */
 function generateId(prefix) {
-	return `${prefix || "id"}-${Math.random().toString(36).substr(2, 9)}`;
+  return `${prefix || 'id'}-${Math.random().toString(36).substr(2, 9)}`;
 }
 
 export { generateId };

package/src/lib/slot-presence-controller.js

@@ -0,0 +1,48 @@
+/**
+ * Tracks whether a slot has slotted content.
+ *
+ * CSS cannot do this: `:has(slot:empty)` always matches because the `<slot>`
+ * element itself is always empty in the shadow tree. `:host(:has([slot=x]))`
+ * does not help either — a `:has()` inside a shadow root cannot match light-DOM
+ * children (checked in Chromium 153), so the check has to happen in JS.
+ */
+export class SlotPresenceController {
+  /**
+   * @param {import('lit').ReactiveControllerHost} host
+   * @param {string} slotName - Slot to watch; `''` for the default slot.
+   * @param {(present: boolean) => void} onChange
+   */
+  constructor(host, slotName, onChange) {
+    this.host = host;
+    this.slotName = slotName;
+    this.onChange = onChange;
+    /** @type {boolean | undefined} */
+    this.present = undefined;
+    host.addController(this);
+  }
+
+  hostUpdate() {
+    this.refresh();
+  }
+
+  /** Re-checks the light DOM and notifies on the first check and on changes. */
+  refresh() {
+    const present = this._detect();
+    if (present === this.present) return;
+    this.present = present;
+    this.onChange(present);
+  }
+
+  _nodes() {
+    if (this.slotName) {
+      return Array.from(this.host.querySelectorAll(`[slot="${this.slotName}"]`));
+    }
+    return Array.from(this.host.childNodes).filter((node) => !node.getAttribute?.('slot'));
+  }
+
+  _detect() {
+    return this._nodes().some(
+      (node) => node.nodeType === 1 || (node.textContent ?? '').trim() !== '',
+    );
+  }
+}

package/src/lib/styles/all.css

@@ -1,39 +1,40 @@
 @layer components {
-	@import "./focus-ring.css";
-	@import "../../components/accordion/accordion.css";
-	@import "../../components/app-bar/app-bar.css";
-	@import "../../components/avatar/avatar.css";
-	@import "../../components/badge/badge.css";
-	@import "../../components/breadcrumb/breadcrumb.css";
-	@import "../../components/button/button.css";
-	@import "../../components/button-group/button-group.css";
-	@import "../../components/card/card.css";
-	@import "../../components/code-preview/code-preview.css";
-	@import "../../components/container/container.css";
-	@import "../../components/countdown/countdown.css";
-	@import "../../components/cta/cta.css";
-	@import "../../components/dialog/dialog.css";
-	@import "../../components/dropdown/dropdown.css";
-	@import "../../components/dropzone/dropzone.css";
-	@import "../../components/feature-list/feature-list.css";
-	@import "../../components/footer/footer.css";
-	@import "../../components/footer/footer-column.css";
-	@import "../../components/form-field/form-field.css";
-	@import "../../components/gallery/gallery.css";
-	@import "../../components/hero/hero.css";
-	@import "../../components/icon/icon.css";
-	@import "../../components/loading/loading.css";
-	@import "../../components/logo-cloud/logo-cloud.css";
-	@import "../../components/map/map.css";
-	@import "../../components/media-text/media-text.css";
-	@import "../../components/newsletter/newsletter.css";
-	@import "../../components/notice/notice.css";
-	@import "../../components/pagination/pagination.css";
-	@import "../../components/pricing/pricing.css";
-	@import "../../components/sidebar/sidebar.css";
-	@import "../../components/stats/stats.css";
-	@import "../../components/tabs/tabs.css";
-	@import "../../components/testimonials/testimonials.css";
-	@import "../../components/toast/toast.css";
-	@import "../../components/tooltip/tooltip.css";
+  @import "./focus-ring.css";
+  @import "../../css/view-transitions.css";
+  @import "../../components/accordion/accordion.css";
+  @import "../../components/app-bar/app-bar.css";
+  @import "../../components/avatar/avatar.css";
+  @import "../../components/badge/badge.css";
+  @import "../../components/breadcrumb/breadcrumb.css";
+  @import "../../components/button/button.css";
+  @import "../../components/button-group/button-group.css";
+  @import "../../components/card/card.css";
+  @import "../../components/code-preview/code-preview.css";
+  @import "../../components/container/container.css";
+  @import "../../components/countdown/countdown.css";
+  @import "../../components/cta/cta.css";
+  @import "../../components/dialog/dialog.css";
+  @import "../../components/dropdown/dropdown.css";
+  @import "../../components/dropzone/dropzone.css";
+  @import "../../components/feature-list/feature-list.css";
+  @import "../../components/footer/footer.css";
+  @import "../../components/footer/footer-column.css";
+  @import "../../components/form-field/form-field.css";
+  @import "../../components/gallery/gallery.css";
+  @import "../../components/hero/hero.css";
+  @import "../../components/icon/icon.css";
+  @import "../../components/loading/loading.css";
+  @import "../../components/logo-cloud/logo-cloud.css";
+  @import "../../components/map/map.css";
+  @import "../../components/media-text/media-text.css";
+  @import "../../components/newsletter/newsletter.css";
+  @import "../../components/notice/notice.css";
+  @import "../../components/pagination/pagination.css";
+  @import "../../components/pricing/pricing.css";
+  @import "../../components/sidebar/sidebar.css";
+  @import "../../components/stats/stats.css";
+  @import "../../components/tabs/tabs.css";
+  @import "../../components/testimonials/testimonials.css";
+  @import "../../components/toast/toast.css";
+  @import "../../components/tooltip/tooltip.css";
 }

package/src/lib/styles/focus-ring.css

@@ -1,30 +1,22 @@
 .focus-ring,
 :host(.focus-ring) {
-	outline: 0px solid transparent;
-	outline-offset: var(--g-focus-ring-offset-default);
-	transition-duration: var(--g-animation-move-quick);
-	transition-property: outline-color, width;
+  outline: 0px solid transparent;
+  outline-offset: var(--g-focus-ring-offset-default);
+  transition-duration: var(--g-animation-move-quick);
+  transition-property: outline-color, width;
 }
 
 .focus-ring:focus-visible,
 :host(.focus-ring):focus-visible {
-	outline: var(--g-focus-ring-width-default) solid
-		var(--g-focus-ring-color-default);
+  outline: var(--g-focus-ring-width-default) solid var(--g-focus-ring-color-default);
 }
 
 @media (prefers-contrast: more) {
-	.focus-ring:focus-visible,
-	:host(.focus-ring):focus-visible {
-		outline: var(--g-focus-ring-width-default) solid
-			var(--g-focus-ring-color-contrast);
-		box-shadow: 0 0 0
-			calc(
-				(
-					var(--g-focus-ring-width-default) +
-					var(--g-focus-ring-offset-default)
-				) *
-				1.5
-			)
-			var(--g-focus-ring-color-contrast-shadow);
-	}
+  .focus-ring:focus-visible,
+  :host(.focus-ring):focus-visible {
+    outline: var(--g-focus-ring-width-default) solid var(--g-focus-ring-color-contrast);
+    box-shadow: 0 0 0
+      calc((var(--g-focus-ring-width-default) + var(--g-focus-ring-offset-default)) * 1.5)
+      var(--g-focus-ring-color-contrast-shadow);
+  }
 }

package/src/lib/view-transition.js

@@ -0,0 +1,42 @@
+/**
+ * True when the user has asked for reduced motion.
+ *
+ * @returns {boolean}
+ */
+export function prefersReducedMotion() {
+  return (
+    typeof window !== 'undefined' &&
+    Boolean(window.matchMedia?.('(prefers-reduced-motion: reduce)').matches)
+  );
+}
+
+/**
+ * True when `startViewTransition` would actually run a transition, so callers can
+ * keep their previous animation as the fallback path.
+ *
+ * @returns {boolean}
+ */
+export function canViewTransition() {
+  return (
+    typeof document !== 'undefined' &&
+    typeof document.startViewTransition === 'function' &&
+    !prefersReducedMotion()
+  );
+}
+
+/**
+ * Runs `update` inside a view transition when the platform supports one and the
+ * user has not asked for reduced motion. Returns the transition, or `null` when
+ * `update` ran synchronously.
+ *
+ * @param {() => void | Promise<unknown>} update
+ * @returns {ViewTransition | null}
+ */
+export function startViewTransition(update) {
+  if (!canViewTransition()) {
+    update();
+    return null;
+  }
+
+  return document.startViewTransition(update);
+}

package/src/lib/view-transition.test.js

@@ -0,0 +1,105 @@
+import { strict as assert } from 'node:assert';
+import { afterEach, describe, it } from 'node:test';
+// Side-effect import: sets up the happy-dom window and document globals.
+import '../test-utils/index.js';
+import { startViewTransition, canViewTransition } from './view-transition.js';
+
+describe('startViewTransition', () => {
+  const originalMatchMedia = globalThis.window?.matchMedia;
+  const originalStartViewTransition = globalThis.document?.startViewTransition;
+
+  const stubMotion = (reduce) => {
+    globalThis.window.matchMedia = () => ({ matches: reduce });
+  };
+
+  afterEach(() => {
+    globalThis.window.matchMedia = originalMatchMedia;
+    globalThis.document.startViewTransition = originalStartViewTransition;
+  });
+
+  it('runs the update inside a transition when motion is allowed', () => {
+    stubMotion(false);
+    const transition = { finished: Promise.resolve() };
+    let transitions = 0;
+    let updates = 0;
+    globalThis.document.startViewTransition = (callback) => {
+      transitions++;
+      callback();
+      return transition;
+    };
+
+    const result = startViewTransition(() => {
+      updates++;
+    });
+
+    assert.strictEqual(transitions, 1, 'Expected one view transition');
+    assert.strictEqual(updates, 1, 'Expected the update to run once');
+    assert.strictEqual(result, transition, 'Expected the transition to be returned');
+  });
+
+  it('runs the update directly when reduced motion is preferred', () => {
+    stubMotion(true);
+    let transitions = 0;
+    let updates = 0;
+    globalThis.document.startViewTransition = () => {
+      transitions++;
+      return { finished: Promise.resolve() };
+    };
+
+    const result = startViewTransition(() => {
+      updates++;
+    });
+
+    assert.strictEqual(transitions, 0, 'Reduced motion must skip the transition');
+    assert.strictEqual(updates, 1, 'Expected the update to run once');
+    assert.strictEqual(result, null);
+  });
+
+  it('runs the update directly when the platform has no view transitions', () => {
+    stubMotion(false);
+    globalThis.document.startViewTransition = undefined;
+    let updates = 0;
+
+    const result = startViewTransition(() => {
+      updates++;
+    });
+
+    assert.strictEqual(updates, 1, 'Expected the update to run once');
+    assert.strictEqual(result, null);
+  });
+});
+
+describe('canViewTransition', () => {
+  const originalMatchMedia = globalThis.window?.matchMedia;
+  const originalStartViewTransition = globalThis.document?.startViewTransition;
+
+  const stubMotion = (reduce) => {
+    globalThis.window.matchMedia = () => ({ matches: reduce });
+  };
+
+  afterEach(() => {
+    globalThis.window.matchMedia = originalMatchMedia;
+    globalThis.document.startViewTransition = originalStartViewTransition;
+  });
+
+  it('reports support when the API is present and motion is allowed', () => {
+    stubMotion(false);
+    globalThis.document.startViewTransition = () => ({ finished: Promise.resolve() });
+
+    assert.strictEqual(canViewTransition(), true);
+  });
+
+  it('reports no support under reduced motion', () => {
+    stubMotion(true);
+    globalThis.document.startViewTransition = () => ({ finished: Promise.resolve() });
+
+    assert.strictEqual(canViewTransition(), false);
+  });
+
+  it('reports no support when the API is missing', () => {
+    stubMotion(false);
+    globalThis.document.startViewTransition = undefined;
+
+    assert.strictEqual(canViewTransition(), false);
+  });
+});

package/src/main.js

@@ -1,29 +1,29 @@
-export * from "./components/accordion/index.js";
-export * from "./components/avatar/index.js";
-export * from "./components/button/index.js";
-export * from "./components/button-group/index.js";
-export * from "./components/card/index.js";
-export * from "./components/code-preview/index.js";
-export * from "./components/container/index.js";
-export * from "./components/countdown/index.js";
-export * from "./components/cta/index.js";
-export * from "./components/dialog/index.js";
-export * from "./components/dropzone/index.js";
-export * from "./components/feature-list/index.js";
-export * from "./components/form-field/index.js";
-export * from "./components/gallery/index.js";
-export * from "./components/hero/index.js";
-export * from "./components/icon/index.js";
-export * from "./components/loading/index.js";
-export * from "./components/logo-cloud/index.js";
-export * from "./components/map/index.js";
-export * from "./components/media-text/index.js";
-export * from "./components/newsletter/index.js";
-export * from "./components/notice/index.js";
-export * from "./components/pagination/index.js";
-export * from "./components/person/index.js";
-export * from "./components/pricing/index.js";
-export * from "./components/stats/index.js";
-export * from "./components/tabs/index.js";
-export * from "./components/testimonials/index.js";
-export * from "./components/tooltip/index.js";
+export * from './components/accordion/index.js';
+export * from './components/avatar/index.js';
+export * from './components/button/index.js';
+export * from './components/button-group/index.js';
+export * from './components/card/index.js';
+export * from './components/code-preview/index.js';
+export * from './components/container/index.js';
+export * from './components/countdown/index.js';
+export * from './components/cta/index.js';
+export * from './components/dialog/index.js';
+export * from './components/dropzone/index.js';
+export * from './components/feature-list/index.js';
+export * from './components/form-field/index.js';
+export * from './components/gallery/index.js';
+export * from './components/hero/index.js';
+export * from './components/icon/index.js';
+export * from './components/loading/index.js';
+export * from './components/logo-cloud/index.js';
+export * from './components/map/index.js';
+export * from './components/media-text/index.js';
+export * from './components/newsletter/index.js';
+export * from './components/notice/index.js';
+export * from './components/pagination/index.js';
+export * from './components/person/index.js';
+export * from './components/pricing/index.js';
+export * from './components/stats/index.js';
+export * from './components/tabs/index.js';
+export * from './components/testimonials/index.js';
+export * from './components/tooltip/index.js';