@c9up/nebula 0.1.1 → 0.1.3

package/dist/configure.js

@@ -72,10 +72,7 @@ export async function configure(codemods, flags = {}) {
     // CSS dependency at all — the app owns its build tooling, and a UI library
     // quietly adding one to someone's dependency tree is how a tree gets away
     // from them.
-    const lines = [
-        "",
-        "[@c9up/nebula] configured with the " + name + " adapter.",
-    ];
+    const lines = ["", `[@c9up/nebula] configured with the ${name} adapter.`];
     if (adapter.packages.length > 0) {
         lines.push("  Install the engine yourself:", `    pnpm add -D ${adapter.packages.join(" ")}`);
     }

package/dist/organisms/Form.js

@@ -59,7 +59,15 @@ export function Form(props) {
 		novalidate
 		class="${() => cn("flex flex-col gap-6", read(props.class))}"
 		@submit="${(event) => {
-        void props.form.handleSubmit(event);
+        // A DOM listener returns nothing, so this promise is nobody's to
+        // await. `command.run` always resolves — failures route to
+        // `onFail` — but `validate()` runs first, and a validator that
+        // throws rejects here: the form would silently do nothing and leave
+        // a bare `Uncaught (in promise)` behind. Reported, so the thing
+        // that broke is the thing the console names.
+        void props.form.handleSubmit(event).catch((error) => {
+            console.error("[nebula] Form submit failed:", error);
+        });
     }}"
 	>${slot(props.children)}</form>`;
 }

package/dist/primitives/focusTrap.js

@@ -21,6 +21,20 @@
  * as a flicker and confuses assistive technology.
  */
 import { firstFocusable, focusableWithin, focusSilently } from "./focusable.js";
+/**
+ * Every active trap, in the order they were created — innermost last.
+ *
+ * Only the last one acts. `contains` was the guard before, on the assumption
+ * that a nested dialog is a DESCENDANT of the one it opened over. Every modal
+ * surface here is portalled to `document.body`, so two open dialogs are
+ * SIBLINGS: each trap saw the other's focus as outside itself and pulled it
+ * back, and the focus bounced between them until it settled in the wrong one.
+ *
+ * A stack is also what makes release order not matter: an outer surface that
+ * closes first splices itself out, and whichever trap is innermost then is the
+ * one holding focus.
+ */
+const active = [];
 /**
  * Trap focus inside `container` until the returned handle is released.
  *
@@ -30,6 +44,17 @@ import { firstFocusable, focusableWithin, focusSilently } from "./focusable.js";
  */
 export function focusTrap(container, options = {}) {
     const previouslyFocused = activeElement();
+    /**
+     * This trap's identity in the {@link active} stack, pushed BEFORE the
+     * initial focus: moving focus fires `focusin`, and a trap that was not yet
+     * on the stack had its own initial focus reclaimed by the one below it.
+     */
+    const token = {};
+    active.push(token);
+    /** Whether this is the trap the user is actually inside. */
+    function isTopmost() {
+        return active[active.length - 1] === token;
+    }
     if (!container.hasAttribute("tabindex")) {
         container.setAttribute("tabindex", "-1");
     }
@@ -40,6 +65,8 @@ export function focusTrap(container, options = {}) {
     function onKeyDown(event) {
         if (event.key !== "Tab")
             return;
+        if (!isTopmost())
+            return;
         const focusables = focusableWithin(container);
         if (focusables.length === 0) {
             // Nothing to cycle through: hold focus on the container so Tab cannot
@@ -63,11 +90,12 @@ export function focusTrap(container, options = {}) {
     /**
      * Pull focus back when it lands outside by any route other than Tab.
      *
-     * Guarded on `contains`, and only ever moves focus *into* the trap, so it
-     * cannot fight a nested trap: an inner dialog's container is a descendant
-     * of the outer one, so the outer handler sees the focus as already inside.
+     * Only the topmost trap does this. See {@link active}: guarding on
+     * `contains` alone made two portalled siblings fight over the focus.
      */
     function onFocusIn(event) {
+        if (!isTopmost())
+            return;
         const target = event.target;
         if (!(target instanceof Node))
             return;
@@ -83,6 +111,10 @@ export function focusTrap(container, options = {}) {
             if (released)
                 return;
             released = true;
+            // Spliced, not popped: surfaces do not always close innermost-first.
+            const index = active.indexOf(token);
+            if (index !== -1)
+                active.splice(index, 1);
             document.removeEventListener("keydown", onKeyDown, true);
             document.removeEventListener("focusin", onFocusIn, true);
             const target = options.returnFocus?.() ?? previouslyFocused;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c9up/nebula",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Nebula — shadcn/ui ported to Aurora, organised as atomic design. Zero-dependency headless primitives, cva reimplemented, copy-the-source registry.",
   "license": "MIT",
   "type": "module",
@@ -64,7 +64,7 @@
     "@c9up/aurora": "^0.1.30",
     "@tailwindcss/cli": "^4.3.3",
     "@types/node": "^22.19.15",
-    "happy-dom": "^15.11.7",
+    "happy-dom": "^20.12.0",
     "tailwindcss": "^4.3.3",
     "typescript": "^6.0.2",
     "vitest": "4.1.9"

package/src/configure.ts

@@ -105,10 +105,7 @@ export async function configure(
 	// CSS dependency at all — the app owns its build tooling, and a UI library
 	// quietly adding one to someone's dependency tree is how a tree gets away
 	// from them.
-	const lines = [
-		"",
-		"[@c9up/nebula] configured with the " + name + " adapter.",
-	];
+	const lines = ["", `[@c9up/nebula] configured with the ${name} adapter.`];
 
 	if (adapter.packages.length > 0) {
 		lines.push(

package/src/organisms/Form.ts

@@ -89,7 +89,15 @@ export function Form<T>(props: FormProps<T>): ReturnType<typeof html> {
 		novalidate
 		class="${() => cn("flex flex-col gap-6", read(props.class))}"
 		@submit="${(event: Event) => {
-			void props.form.handleSubmit(event);
+			// A DOM listener returns nothing, so this promise is nobody's to
+			// await. `command.run` always resolves — failures route to
+			// `onFail` — but `validate()` runs first, and a validator that
+			// throws rejects here: the form would silently do nothing and leave
+			// a bare `Uncaught (in promise)` behind. Reported, so the thing
+			// that broke is the thing the console names.
+			void props.form.handleSubmit(event).catch((error: unknown) => {
+				console.error("[nebula] Form submit failed:", error);
+			});
 		}}"
 	>${slot(props.children)}</form>`;
 }

package/src/primitives/focusTrap.ts

@@ -23,6 +23,21 @@
 
 import { firstFocusable, focusableWithin, focusSilently } from "./focusable.js";
 
+/**
+ * Every active trap, in the order they were created — innermost last.
+ *
+ * Only the last one acts. `contains` was the guard before, on the assumption
+ * that a nested dialog is a DESCENDANT of the one it opened over. Every modal
+ * surface here is portalled to `document.body`, so two open dialogs are
+ * SIBLINGS: each trap saw the other's focus as outside itself and pulled it
+ * back, and the focus bounced between them until it settled in the wrong one.
+ *
+ * A stack is also what makes release order not matter: an outer surface that
+ * closes first splices itself out, and whichever trap is innermost then is the
+ * one holding focus.
+ */
+const active: object[] = [];
+
 export interface FocusTrapOptions {
 	/**
 	 * Where focus goes when the trap activates. Defaults to the first focusable
@@ -56,6 +71,19 @@ export function focusTrap(
 ): FocusTrap {
 	const previouslyFocused = activeElement();
 
+	/**
+	 * This trap's identity in the {@link active} stack, pushed BEFORE the
+	 * initial focus: moving focus fires `focusin`, and a trap that was not yet
+	 * on the stack had its own initial focus reclaimed by the one below it.
+	 */
+	const token = {};
+	active.push(token);
+
+	/** Whether this is the trap the user is actually inside. */
+	function isTopmost(): boolean {
+		return active[active.length - 1] === token;
+	}
+
 	if (!container.hasAttribute("tabindex")) {
 		container.setAttribute("tabindex", "-1");
 	}
@@ -68,6 +96,7 @@ export function focusTrap(
 
 	function onKeyDown(event: KeyboardEvent): void {
 		if (event.key !== "Tab") return;
+		if (!isTopmost()) return;
 
 		const focusables = focusableWithin(container);
 		if (focusables.length === 0) {
@@ -94,11 +123,11 @@ export function focusTrap(
 	/**
 	 * Pull focus back when it lands outside by any route other than Tab.
 	 *
-	 * Guarded on `contains`, and only ever moves focus *into* the trap, so it
-	 * cannot fight a nested trap: an inner dialog's container is a descendant
-	 * of the outer one, so the outer handler sees the focus as already inside.
+	 * Only the topmost trap does this. See {@link active}: guarding on
+	 * `contains` alone made two portalled siblings fight over the focus.
 	 */
 	function onFocusIn(event: FocusEvent): void {
+		if (!isTopmost()) return;
 		const target = event.target;
 		if (!(target instanceof Node)) return;
 		if (container.contains(target)) return;
@@ -113,6 +142,9 @@ export function focusTrap(
 		release(): void {
 			if (released) return;
 			released = true;
+			// Spliced, not popped: surfaces do not always close innermost-first.
+			const index = active.indexOf(token);
+			if (index !== -1) active.splice(index, 1);
 			document.removeEventListener("keydown", onKeyDown, true);
 			document.removeEventListener("focusin", onFocusIn, true);