@signal9/era-ui 30.2.0 → 30.2.2

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [30.2.2](https://github.com/sig-nine/era-ui/compare/v30.2.1...v30.2.2) (2026-08-16)
+
+### Bug Fixes
+
+* **provider:** portalled content keeps its axes with no trigger rendered ([ed15a44](https://github.com/sig-nine/era-ui/commit/ed15a445eccafa582907e4bf08d9735edd9140cf))
+
+## [30.2.1](https://github.com/sig-nine/era-ui/compare/v30.2.0...v30.2.1) (2026-08-16)
+
+### Bug Fixes
+
+* **select:** the multi-value chips no longer nest a button in the trigger ([c7ff9a2](https://github.com/sig-nine/era-ui/commit/c7ff9a27469b4f5ef2059e4616af38c2bdede8f7))
+
 ## [30.2.0](https://github.com/sig-nine/era-ui/compare/v30.1.4...v30.2.0) (2026-08-16)
 
 ### Features

package/dist/ui/alert-dialog/alert-dialog-root.svelte

@@ -23,8 +23,11 @@
 
 	// Capture on OPEN, not on mount: bits-ui mounts content eagerly and toggles
 	// it, so a mount-time read runs once at page load and never again.
+	// activeElement is the FALLBACK anchor, used only when no Trigger rendered —
+	// see AxisRelay.refresh(). It is read here, at the instant `open` turns true,
+	// because bits-ui moves focus into the panel a moment later.
 	$effect(() => {
-		if (open) relay.refresh();
+		if (open) relay.refresh(document.activeElement);
 	});
 </script>
 

package/dist/ui/chip/chip.svelte

@@ -61,13 +61,14 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn } from '../../utils/index.js';
-	import { Button } from '../button';
+	import { Button, buttonVariants } from '../button';
 	import X from '@lucide/svelte/icons/x';
 
 	let {
 		ref = $bindable(null),
 		size = 'chip',
 		ondismiss,
+		dismissAs = 'button',
 		lead,
 		children,
 		class: className,
@@ -78,6 +79,27 @@
 		 * that nests inside an md container (a select trigger, a button). */
 		size?: 'chip' | 'pill';
 		ondismiss?: () => void;
+		/**
+		 * What the dismiss control RENDERS AS. `button` (the default) is right
+		 * for a free-standing chip. Use `span` when the chip lives inside
+		 * another control.
+		 *
+		 * A <button> inside a <button> is not merely bad manners: it is invalid,
+		 * and the HTML parser repairs it by CLOSING the outer control before the
+		 * inner one. So the server's markup and the client's DOM disagree, Svelte
+		 * discards the page's hydration and re-renders from scratch, and the
+		 * chips briefly sit outside the trigger they belong to. era's own
+		 * multi-select shipped exactly that (a Chip with `ondismiss` inside
+		 * Select.Trigger) and logged node_invalid_placement_ssr on every load.
+		 *
+		 * `span` also drops the control from the accessibility tree rather than
+		 * announcing a button inside a button — which is the honest description
+		 * of what it is there: a pointer shortcut. The accessible way to remove
+		 * a selection is the listbox itself, which is unaffected. Keyboard focus
+		 * order is unchanged, because a nested button was never reachable in a
+		 * sensible order anyway.
+		 */
+		dismissAs?: 'button' | 'span';
 		/** Icon rendered BEFORE the label, outside it. Use this rather than putting
 		 * an icon in `children`: the label then gets its own box, which is the only
 		 * place era's ink centring can reach. */
@@ -112,16 +134,36 @@
 		     In the sm chip it nests; in the xxs chip the same button is the flush
 		     end-cap, so only its OUTER corners round — squaring the inner pair is
 		     what reads as "segment of this pill" rather than "pill on a pill". -->
-		<Button
-			icon
-			size="pill"
-			tone="destructive"
-			class={size === 'pill' ? 'rounded-l-none' : undefined}
-			onclick={ondismiss}
-			onpointerdown={(e: PointerEvent) => e.stopPropagation()}
-			onpointerup={(e: PointerEvent) => e.stopPropagation()}
-		>
-			<X />
-		</Button>
+		{#if dismissAs === 'span'}
+			<!-- Same classes, no <button> — see the `dismissAs` prop. era-interactive
+			     is in buttonVariants' base, so the focus/disabled recipe comes with
+			     it; what a span cannot inherit is the pointer cursor a button gets
+			     for free. -->
+			<span
+				aria-hidden="true"
+				class={cn(
+					buttonVariants({ icon: true, size: 'pill', tone: 'destructive' }),
+					'cursor-pointer',
+					size === 'pill' && 'rounded-l-none'
+				)}
+				onclick={ondismiss}
+				onpointerdown={(e: PointerEvent) => e.stopPropagation()}
+				onpointerup={(e: PointerEvent) => e.stopPropagation()}
+			>
+				<X />
+			</span>
+		{:else}
+			<Button
+				icon
+				size="pill"
+				tone="destructive"
+				class={size === 'pill' ? 'rounded-l-none' : undefined}
+				onclick={ondismiss}
+				onpointerdown={(e: PointerEvent) => e.stopPropagation()}
+				onpointerup={(e: PointerEvent) => e.stopPropagation()}
+			>
+				<X />
+			</Button>
+		{/if}
 	{/if}
 </div>

package/dist/ui/chip/chip.svelte.d.ts

@@ -34,6 +34,27 @@ type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
      * that nests inside an md container (a select trigger, a button). */
     size?: 'chip' | 'pill';
     ondismiss?: () => void;
+    /**
+     * What the dismiss control RENDERS AS. `button` (the default) is right
+     * for a free-standing chip. Use `span` when the chip lives inside
+     * another control.
+     *
+     * A <button> inside a <button> is not merely bad manners: it is invalid,
+     * and the HTML parser repairs it by CLOSING the outer control before the
+     * inner one. So the server's markup and the client's DOM disagree, Svelte
+     * discards the page's hydration and re-renders from scratch, and the
+     * chips briefly sit outside the trigger they belong to. era's own
+     * multi-select shipped exactly that (a Chip with `ondismiss` inside
+     * Select.Trigger) and logged node_invalid_placement_ssr on every load.
+     *
+     * `span` also drops the control from the accessibility tree rather than
+     * announcing a button inside a button — which is the honest description
+     * of what it is there: a pointer shortcut. The accessible way to remove
+     * a selection is the listbox itself, which is unaffected. Keyboard focus
+     * order is unchanged, because a nested button was never reachable in a
+     * sensible order anyway.
+     */
+    dismissAs?: 'button' | 'span';
     /** Icon rendered BEFORE the label, outside it. Use this rather than putting
      * an icon in `children`: the label then gets its own box, which is the only
      * place era's ink centring can reach. */

package/dist/ui/context-menu/context-menu-root.svelte

@@ -23,8 +23,11 @@
 
 	// Capture on OPEN, not on mount: bits-ui mounts content eagerly and toggles
 	// it, so a mount-time read runs once at page load and never again.
+	// activeElement is the FALLBACK anchor, used only when no Trigger rendered —
+	// see AxisRelay.refresh(). It is read here, at the instant `open` turns true,
+	// because bits-ui moves focus into the panel a moment later.
 	$effect(() => {
-		if (open) relay.refresh();
+		if (open) relay.refresh(document.activeElement);
 	});
 </script>
 

package/dist/ui/dialog/dialog-root.svelte

@@ -32,9 +32,15 @@
 	 * before a consumer has scoped anything, and never again. Reading when `open`
 	 * turns true is the moment the answer is actually needed, and it re-reads on
 	 * every open, so an axis that changed in between is picked up.
+	 *
+	 * `document.activeElement` is the FALLBACK anchor, used only when no Trigger
+	 * rendered — see AxisRelay.refresh() for why that case exists and what it
+	 * costs. It is read HERE, at the instant `open` turns true, because bits-ui
+	 * moves focus into the panel a moment later and the answer would be the
+	 * panel itself.
 	 */
 	$effect(() => {
-		if (open) relay.refresh();
+		if (open) relay.refresh(document.activeElement);
 	});
 </script>
 

package/dist/ui/dropdown-menu/dropdown-menu-root.svelte

@@ -23,8 +23,11 @@
 
 	// Capture on OPEN, not on mount: bits-ui mounts content eagerly and toggles
 	// it, so a mount-time read runs once at page load and never again.
+	// activeElement is the FALLBACK anchor, used only when no Trigger rendered —
+	// see AxisRelay.refresh(). It is read here, at the instant `open` turns true,
+	// because bits-ui moves focus into the panel a moment later.
 	$effect(() => {
-		if (open) relay.refresh();
+		if (open) relay.refresh(document.activeElement);
 	});
 </script>
 

package/dist/ui/link-preview/link-preview-root.svelte

@@ -23,8 +23,11 @@
 
 	// Capture on OPEN, not on mount: bits-ui mounts content eagerly and toggles
 	// it, so a mount-time read runs once at page load and never again.
+	// activeElement is the FALLBACK anchor, used only when no Trigger rendered —
+	// see AxisRelay.refresh(). It is read here, at the instant `open` turns true,
+	// because bits-ui moves focus into the panel a moment later.
 	$effect(() => {
-		if (open) relay.refresh();
+		if (open) relay.refresh(document.activeElement);
 	});
 </script>
 

package/dist/ui/menubar/menubar-root.svelte

@@ -25,7 +25,7 @@
 		relay.register(ref);
 	});
 	$effect(() => {
-		if (value) relay.refresh();
+		if (value) relay.refresh(document.activeElement);
 	});
 </script>
 

package/dist/ui/provider/axis-relay.svelte.d.ts

@@ -20,7 +20,7 @@ export declare class AxisRelay {
      * without touching surface, and closest() answers each question separately,
      * which is what makes the axes orthogonal in the first place.
      */
-    refresh(): void;
+    refresh(fallback?: Element | null): void;
     /** The class string portalled content should carry. */
     get schemeClass(): string;
 }

package/dist/ui/provider/axis-relay.svelte.js

@@ -64,8 +64,34 @@ export class AxisRelay {
      * without touching surface, and closest() answers each question separately,
      * which is what makes the axes orthogonal in the first place.
      */
-    refresh() {
-        const el = this.#anchor;
+    refresh(fallback) {
+        /*
+         * NO TRIGGER, NO ANCHOR — the gap this fallback closes.
+         *
+         * A dialog driven purely by `bind:open` renders no Trigger, so there is
+         * no node left in the subtree to read from and the content inherited
+         * from :root. That is not an edge case: driving a confirm dialog from
+         * state is the ordinary way to write one, and it is why a consumer went
+         * on restating `data-font` on every Dialog.Content long after the relay
+         * was supposed to have made that unnecessary. Measured before this: a
+         * dialog opened from a button inside a `data-font="serif"` section came
+         * up with data-font null and font-family monospace.
+         *
+         * The fallback is WHERE THE USER WAS when it opened — document.
+         * activeElement, passed in by the Root at the instant `open` turns
+         * true, before bits-ui moves focus into the panel. A state-driven
+         * dialog is nearly always opened by something the user just clicked,
+         * and that something sits exactly where the dialog logically belongs.
+         *
+         * <body> is not an anchor: with nothing focused there is nothing to
+         * learn, and reading from it would just re-derive :root the long way.
+         * A dialog opened by a timer while focus is elsewhere therefore keeps
+         * the old behaviour rather than picking up an unrelated subtree.
+         */
+        const el = this.#anchor ??
+            (fallback && fallback !== document.body && fallback !== document.documentElement
+                ? fallback
+                : null);
         if (!el?.closest)
             return;
         // The reading itself lives in axes-at.ts, runes-free, because the notes

package/dist/ui/select/select-value.svelte

@@ -56,6 +56,7 @@
 				{#each sel.selected as item (item.value)}
 					<Chip
 						size="pill"
+						dismissAs="span"
 						ondismiss={snippet.disabled
 							? undefined
 							: () =>

package/dist/ui/tooltip/tooltip-root.svelte

@@ -23,8 +23,11 @@
 
 	// Capture on OPEN, not on mount: bits-ui mounts content eagerly and toggles
 	// it, so a mount-time read runs once at page load and never again.
+	// activeElement is the FALLBACK anchor, used only when no Trigger rendered —
+	// see AxisRelay.refresh(). It is read here, at the instant `open` turns true,
+	// because bits-ui moves focus into the panel a moment later.
 	$effect(() => {
-		if (open) relay.refresh();
+		if (open) relay.refresh(document.activeElement);
 	});
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "30.2.0",
+	"version": "30.2.2",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",