From 5b19d2476462369a5bf2da49b9553d25bf962cc0 Mon Sep 17 00:00:00 2001
From: Jakub Jagielka <jjagielka@gmail.com>
Date: Mon, 17 Nov 2025 09:48:40 +0100
Subject: [PATCH 1/2] Button loading uses Spinner

---
 src/lib/buttons/Button.svelte                           | 6 ++----
 src/lib/spinner/Spinner.svelte                          | 5 +++++
 src/lib/spinner/theme.ts                                | 8 ++++++--
 src/lib/types.ts                                        | 7 ++-----
 src/routes/docs-examples/components/spinner/Type.svelte | 1 +
 5 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/lib/buttons/Button.svelte b/src/lib/buttons/Button.svelte
index 879b98a0f5..ad8f8e09c2 100644
--- a/src/lib/buttons/Button.svelte
+++ b/src/lib/buttons/Button.svelte
@@ -4,6 +4,7 @@
   import type { SizeType, ButtonProps } from "$lib";
   import { getTheme } from "$lib/theme/themeUtils";
   import { button } from "./theme";
+  import Spinner from "$lib/spinner/Spinner.svelte";
 
   const group: SizeType = getContext("group");
   const ctxDisabled: boolean | undefined = getContext("disabled");
@@ -28,10 +29,7 @@
   <button type="button" {...restProps} class={btnCls} disabled={isDisabled}>
     {@render children?.()}
     {#if loading}
-      <svg class="ml-2 h-4 w-4 animate-spin text-white" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
-      </svg>
+      <Spinner size="4" class="ms-2" type="loading" {color} />
     {/if}
   </button>
 {:else}
diff --git a/src/lib/spinner/Spinner.svelte b/src/lib/spinner/Spinner.svelte
index 829379db9b..83e7972aeb 100644
--- a/src/lib/spinner/Spinner.svelte
+++ b/src/lib/spinner/Spinner.svelte
@@ -77,6 +77,11 @@
       <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1.2s" repeatCount="indefinite" />
     </g>
   </svg>
+{:else if type === "loading"}
+  <svg class={spinnerClass} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+  </svg>
 {/if}
 
 <!--
diff --git a/src/lib/spinner/theme.ts b/src/lib/spinner/theme.ts
index 40af8712e3..e5e38ca4e8 100644
--- a/src/lib/spinner/theme.ts
+++ b/src/lib/spinner/theme.ts
@@ -10,7 +10,8 @@ export const spinner = tv({
       dots: "inline-flex items-center justify-center",
       bars: "inline-flex items-center justify-center",
       pulse: "animate-pulse",
-      orbit: ""
+      orbit: "",
+      loading: "animate-spin"
     },
     color: {
       primary: "fill-primary-600 text-gray-300",
@@ -32,7 +33,10 @@ export const spinner = tv({
       purple: "fill-purple-600 text-gray-300",
       fuchsia: "fill-fuchsia-600 text-gray-300",
       pink: "fill-pink-600 text-gray-300",
-      rose: "fill-rose-600 text-gray-300"
+      rose: "fill-rose-600 text-gray-300",
+      light: "fill-white text-gray-900",
+      dark: "fill-gray-800 text-white",
+      alternative: "fill-transparent text-gray-900"
     },
     size: {
       "4": "w-4 h-4",
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 03b32bf766..4234a9e2ae 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -978,7 +978,7 @@ export interface TimepickerProps {
   timeIntervals?: string[];
   columns?: ColumnCount;
   // Callback props instead of events
-  onselect?: (data: { time: string; endTime: string; [key: string]: string }) => void;
+  onselect?: (data: { time: string; endTime: string;[key: string]: string }) => void;
 }
 
 // textarea
@@ -1551,10 +1551,7 @@ export type SpeedDialButtonProps = ButtonProps &
   };
 
 // spinner
-export interface SpinnerProps extends SVGAttributes<SVGSVGElement> {
-  type?: "default" | "dots" | "bars" | "pulse" | "orbit";
-  color?: SpinnerVaraiants["color"];
-  size?: SpinnerVaraiants["size"];
+export interface SpinnerProps extends SpinnerVaraiants, Omit<SVGAttributes<SVGSVGElement>, "color" | "type"> {
   currentFill?: string;
   currentColor?: string;
 }
diff --git a/src/routes/docs-examples/components/spinner/Type.svelte b/src/routes/docs-examples/components/spinner/Type.svelte
index 5036c0e7ad..1cfaf828bf 100644
--- a/src/routes/docs-examples/components/spinner/Type.svelte
+++ b/src/routes/docs-examples/components/spinner/Type.svelte
@@ -7,3 +7,4 @@
 <Spinner type="bars" color="blue" />
 <Spinner type="orbit" color="rose" />
 <Spinner type="pulse" color="green" />
+<Spinner type="loading" color="light" />

From c2ded96a1d9f679d5608599f0fb126ebfb465724 Mon Sep 17 00:00:00 2001
From: Jakub Jagielka <jjagielka@gmail.com>
Date: Mon, 17 Nov 2025 09:59:50 +0100
Subject: [PATCH 2/2] coderabbit

---
 src/lib/buttons/Button.svelte  | 2 +-
 src/lib/spinner/Spinner.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/buttons/Button.svelte b/src/lib/buttons/Button.svelte
index ad8f8e09c2..f810819fc5 100644
--- a/src/lib/buttons/Button.svelte
+++ b/src/lib/buttons/Button.svelte
@@ -29,7 +29,7 @@
   <button type="button" {...restProps} class={btnCls} disabled={isDisabled}>
     {@render children?.()}
     {#if loading}
-      <Spinner size="4" class="ms-2" type="loading" {color} />
+      <Spinner size="4" class="ms-2" type="loading" color={actualColor} />
     {/if}
   </button>
 {:else}
diff --git a/src/lib/spinner/Spinner.svelte b/src/lib/spinner/Spinner.svelte
index 83e7972aeb..9afd7425f4 100644
--- a/src/lib/spinner/Spinner.svelte
+++ b/src/lib/spinner/Spinner.svelte
@@ -78,7 +78,7 @@
     </g>
   </svg>
 {:else if type === "loading"}
-  <svg class={spinnerClass} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <svg {...restProps} role="status" class={spinnerClass} fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
     <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
   </svg>