From f58455baaf0d9986ce58acf896b85f528eefaa6c Mon Sep 17 00:00:00 2001
From: dvcolomban <dinh-van.colomban@contentsquare.com>
Date: Thu, 30 Jul 2026 12:34:08 +0200
Subject: [PATCH 1/2] fix(core): forward loading to json-render Button's
 underlying BaseButton
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

JrButton's props/setup never read element.props.loading, so a spec-driven
Button with loading: true silently dropped it — only disabled/icon reached
the rendered button. BaseButton already fully supports loading (spinner in
place of the icon slot); this just wires the existing prop through.
---
 .../client/webcomponents/json-render/JsonRender.stories.ts   | 4 +++-
 .../client/webcomponents/json-render/components/Button.ts    | 5 ++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/client/webcomponents/json-render/JsonRender.stories.ts b/packages/core/src/client/webcomponents/json-render/JsonRender.stories.ts
index 8e6a4eb7..92a9818f 100644
--- a/packages/core/src/client/webcomponents/json-render/JsonRender.stories.ts
+++ b/packages/core/src/client/webcomponents/json-render/JsonRender.stories.ts
@@ -55,10 +55,12 @@ export const Gallery: Story = {
       b2: { type: 'Badge', props: { text: '3 warnings', variant: 'warning' } },
       b3: { type: 'Badge', props: { text: '1 error', variant: 'danger' } },
       b4: { type: 'Badge', props: { text: 'v0.3.4', variant: 'default' } },
-      buttons: { type: 'Stack', props: { direction: 'row', gap: 8 }, children: ['btn1', 'btn2', 'btn3'] },
+      buttons: { type: 'Stack', props: { direction: 'row', gap: 8 }, children: ['btn1', 'btn2', 'btn3', 'btn4'] },
       btn1: { type: 'Button', props: { label: 'Rebuild', variant: 'primary', icon: 'ph:arrows-clockwise' } },
       btn2: { type: 'Button', props: { label: 'Open', variant: 'secondary', icon: 'ph:arrow-square-out' } },
       btn3: { type: 'Button', props: { label: 'Delete', variant: 'danger', icon: 'ph:trash' } },
+      /* `icon` is intentionally still set here — `loading` takes priority and replaces it with the spinner, so this also demonstrates that precedence. */
+      btn4: { type: 'Button', props: { label: 'Deploying…', variant: 'primary', icon: 'ph:rocket-launch', loading: true } },
       progress: { type: 'Progress', props: { value: 68, max: 100, label: 'Bundling' } },
       toggle: { type: 'Switch', props: { label: 'Notifications', value: '{{notifications}}' } },
       divider: { type: 'Divider', props: { label: 'Details' } },
diff --git a/packages/core/src/client/webcomponents/json-render/components/Button.ts b/packages/core/src/client/webcomponents/json-render/components/Button.ts
index 7c397399..59c79d27 100644
--- a/packages/core/src/client/webcomponents/json-render/components/Button.ts
+++ b/packages/core/src/client/webcomponents/json-render/components/Button.ts
@@ -11,6 +11,8 @@ export interface ButtonProps {
   variant?: BaseVariant
   icon?: string
   disabled?: boolean
+  /** Shows `BaseButton`'s spinner in place of `icon` and implies `disabled`. */
+  loading?: boolean
 }
 
 export const Button = defineComponent({
@@ -18,7 +20,7 @@ export const Button = defineComponent({
   props: registryProps<'Button', ButtonProps>(),
   setup(ctx) {
     return () => {
-      const { label, icon, variant = 'secondary', disabled } = ctx.element.props
+      const { label, icon, variant = 'secondary', disabled, loading } = ctx.element.props
       const press = ctx.on('press')
       const resolved: BaseVariant = VARIANTS.has(variant) ? variant : 'secondary'
 
@@ -26,6 +28,7 @@ export const Button = defineComponent({
         variant: resolved,
         size: 'sm',
         disabled,
+        loading,
         onClick: () => press.emit(),
       }, {
         icon: icon

From b522f3bb5326400cf905333566402274bd2358ac Mon Sep 17 00:00:00 2001
From: dvcolomban <dinh-van.colomban@contentsquare.com>
Date: Thu, 30 Jul 2026 14:58:53 +0200
Subject: [PATCH 2/2] test: update public API snapshot for Button's new loading
 prop

---
 .../tsnapi/@vitejs/devtools/client/webcomponents.snapshot.d.ts   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/__snapshots__/tsnapi/@vitejs/devtools/client/webcomponents.snapshot.d.ts b/test/__snapshots__/tsnapi/@vitejs/devtools/client/webcomponents.snapshot.d.ts
index ed75e479..43607e4b 100644
--- a/test/__snapshots__/tsnapi/@vitejs/devtools/client/webcomponents.snapshot.d.ts
+++ b/test/__snapshots__/tsnapi/@vitejs/devtools/client/webcomponents.snapshot.d.ts
@@ -13,6 +13,7 @@ export interface ButtonProps {
   variant?: BaseVariant;
   icon?: string;
   disabled?: boolean;
+  loading?: boolean;
 }
 export interface CodeBlockProps {
   code?: string;