@signal9/era-ui 30.1.3 → 30.1.4

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [30.1.4](https://github.com/sig-nine/era-ui/compare/v30.1.3...v30.1.4) (2026-08-16)
+
+### Bug Fixes
+
+* **button:** loading no longer changes the control's width ([7931edb](https://github.com/sig-nine/era-ui/commit/7931edbdb7cbcabf496586983836fc8bf1832e42))
+
 ## [30.1.3](https://github.com/sig-nine/era-ui/compare/v30.1.2...v30.1.3) (2026-08-16)
 
 ### Bug Fixes

package/dist/ui/button/button.svelte

@@ -28,9 +28,25 @@
 		active?: boolean;
 		icon?: boolean;
 		/**
-		 * When true, disables the button, sets `aria-busy`, and prepends a
-		 * spinner. The existing label stays rendered so focus, click targets,
-		 * and screen-reader accessible names don't change shape mid-flight.
+		 * In flight: disables the button, sets `aria-busy`, and puts a spinner
+		 * over the label.
+		 *
+		 * THE GEOMETRY DOES NOT MOVE. That is the requirement, not a detail. A
+		 * button is loading because it was just CLICKED, so anything `loading`
+		 * changes about the box moves the page under the pointer that is still
+		 * on it — and a spinner PREPENDED to the label (what this used to do)
+		 * costs an icon's width plus a gap, measured on a wrapping header row
+		 * that reflowed everything beside it. A consumer hit exactly that and
+		 * stopped using the prop, hand-rolling `disabled` + `aria-busy`
+		 * instead, which is the report that produced this note.
+		 *
+		 * So the spinner is absolutely positioned and takes no part in the
+		 * flex layout, and the label goes to `opacity-0` rather than being
+		 * unmounted: the box that holds the width stays, and the text stays in
+		 * the accessibility tree as the button's accessible name.
+		 *
+		 * The visible label is therefore HIDDEN in flight — the one thing this
+		 * trades away, and the reason `loadingLabel` exists.
 		 */
 		loading?: boolean;
 		/** Screen-reader-only label announced while `loading` is true. */
@@ -109,7 +125,15 @@
 	aria-busy={loading || undefined}
 	data-state={active ? 'on' : undefined}
 	data-size={size}
-	class={cn(buttonVariants({ variant, tone, size, icon, active }), className)}
+	class={cn(
+		buttonVariants({ variant, tone, size, icon, active }),
+		// Positioned only while loading — the spinner overlay below needs a
+		// containing block, and giving EVERY button one would change paint order
+		// against its non-positioned neighbours for a state most of them never
+		// enter.
+		loading && 'relative',
+		className
+	)}
 	{...restProps}
 >
 	<!--
@@ -142,6 +166,13 @@
 		data-button-content
 		class={cn(
 			'inline-flex items-center justify-center [gap:inherit]',
+			// THE LABEL KEEPS ITS BOX AND LOSES ITS INK. opacity, not `hidden` or
+			// `invisible`: the box has to stay (it is what holds the width) and the
+			// text has to stay in the accessibility tree (it is the button's
+			// accessible name, and a control that loses its name mid-flight is worse
+			// than one that shifts). See the `loading` prop for why the spinner
+			// cannot simply sit beside it.
+			loading && 'opacity-0',
 			// A link is running text, so its wrapper flows inline and takes NO ink
 			// centring. era-label-ink blockifies the box and trims it to the
 			// typographic band — right for a label in a fixed-height control, and
@@ -151,10 +182,6 @@
 			variant === 'link' ? 'inline' : 'not-has-[svg]:era-label-ink'
 		)}
 	>
-		{#if loading}
-			<LoaderCircle class="size-icon shrink-0 animate-spin" aria-hidden="true" />
-			{#if loadingLabel}<span class="sr-only">{loadingLabel}</span>{/if}
-		{/if}
 		<!-- The label box exists ONLY when `lead`/`trail` are used. Rendering it
 		     unconditionally changed the DOM for every legacy call site: a
 		     `display:contents` span has no box, and the geometry audits walk real
@@ -171,4 +198,15 @@
 			{@render children?.()}
 		{/if}
 	</span>
+	<!--
+		The spinner is OUT OF FLOW, which is the whole point. Absolutely positioned
+		children take no part in flex layout, so the button's width, height, gap and
+		min-w are the same in flight as at rest.
+	-->
+	{#if loading}
+		<span class="absolute inset-0 flex items-center justify-center">
+			<LoaderCircle class="size-icon shrink-0 animate-spin" aria-hidden="true" />
+		</span>
+		{#if loadingLabel}<span class="sr-only">{loadingLabel}</span>{/if}
+	{/if}
 </Button.Root>

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

@@ -7,9 +7,25 @@ type $$ComponentProps = Button.RootProps & {
     active?: boolean;
     icon?: boolean;
     /**
-     * When true, disables the button, sets `aria-busy`, and prepends a
-     * spinner. The existing label stays rendered so focus, click targets,
-     * and screen-reader accessible names don't change shape mid-flight.
+     * In flight: disables the button, sets `aria-busy`, and puts a spinner
+     * over the label.
+     *
+     * THE GEOMETRY DOES NOT MOVE. That is the requirement, not a detail. A
+     * button is loading because it was just CLICKED, so anything `loading`
+     * changes about the box moves the page under the pointer that is still
+     * on it — and a spinner PREPENDED to the label (what this used to do)
+     * costs an icon's width plus a gap, measured on a wrapping header row
+     * that reflowed everything beside it. A consumer hit exactly that and
+     * stopped using the prop, hand-rolling `disabled` + `aria-busy`
+     * instead, which is the report that produced this note.
+     *
+     * So the spinner is absolutely positioned and takes no part in the
+     * flex layout, and the label goes to `opacity-0` rather than being
+     * unmounted: the box that holds the width stays, and the text stays in
+     * the accessibility tree as the button's accessible name.
+     *
+     * The visible label is therefore HIDDEN in flight — the one thing this
+     * trades away, and the reason `loadingLabel` exists.
      */
     loading?: boolean;
     /** Screen-reader-only label announced while `loading` is true. */

package/package.json

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