Adds icon size variants and data-slot attributes

Adds new size variants for icon buttons, allowing for more flexible icon sizing.
Adds a `data-slot` attribute to input, separator, and textarea components
for improved styling and accessibility.
Also migrates form button to a simplified component.

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/button/button.svelte

@@ -22,6 +22,8 @@
 				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
 				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
 				icon: "size-9",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
 			},
 		},
 		defaultVariants: {

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/form/form-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import * as Button from "$comp/ui/button/index.js";
+	import { Button, type ButtonProps } from "$comp/ui/button/index.js";
 
-	let { ref = $bindable(null), ...restProps }: Button.Props = $props();
+	let { ref = $bindable(null), ...restProps }: ButtonProps = $props();
 </script>
 
-<Button.Root bind:ref type="submit" {...restProps} />
+<Button bind:ref type="submit" {...restProps} />

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/input/input.svelte

@@ -15,16 +15,17 @@
 		type,
 		files = $bindable(),
 		class: className,
+		"data-slot": dataSlot = "input",
 		...restProps
 	}: Props = $props();
 </script>
 
 {#if type === "file"}
 	<input
 		bind:this={ref}
-		data-slot="input"
+		data-slot={dataSlot}
 		class={cn(
-			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50",
 			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 			className
@@ -37,7 +38,7 @@
 {:else}
 	<input
 		bind:this={ref}
-		data-slot="input"
+		data-slot={dataSlot}
 		class={cn(
 			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/separator/separator.svelte

@@ -5,13 +5,14 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		"data-slot": dataSlot = "separator",
 		...restProps
 	}: SeparatorPrimitive.RootProps = $props();
 </script>
 
 <SeparatorPrimitive.Root
 	bind:ref
-	data-slot="separator"
+	data-slot={dataSlot}
 	class={cn(
 		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
 		className

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/textarea/textarea.svelte

@@ -6,13 +6,14 @@
 		ref = $bindable(null),
 		value = $bindable(),
 		class: className,
+		"data-slot": dataSlot = "textarea",
 		...restProps
 	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
 </script>
 
 <textarea
 	bind:this={ref}
-	data-slot="textarea"
+	data-slot={dataSlot}
 	class={cn(
 		"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 field-sizing-content shadow-xs flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 		className