@signal9/era-ui 30.2.0 → 30.2.1

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [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/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/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/package.json

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