yaxa-svelte 1.9.0 → 1.10.0

package/dist/admin/components/AdminDashboard.svelte

@@ -284,8 +284,11 @@
 						<div class="flex items-center gap-2">
 							<form onsubmit={handleSearch} class="relative">
 								<input
+									id="admin-search-input"
+									name="adminSearch"
 									type="search"
 									placeholder="Search records..."
+									aria-label="Search records"
 									bind:value={searchQuery}
 									class="w-48 rounded-lg border border-neutral-300 bg-white py-1.5 pr-3 pl-8 text-xs text-neutral-900 placeholder-neutral-400 transition-all focus:w-60 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
 								/>
@@ -424,6 +427,7 @@
 						{#if col.dataType === 'boolean'}
 							<input
 								id={`create-${col.name}`}
+								name={col.name}
 								type="checkbox"
 								class="h-4 w-4 rounded border-neutral-300 text-primary-600 focus:ring-primary-500"
 								checked={Boolean(newRecordData[col.name])}
@@ -432,6 +436,7 @@
 						{:else if col.dataType === 'number' || col.dataType === 'integer'}
 							<input
 								id={`create-${col.name}`}
+								name={col.name}
 								type="number"
 								placeholder={col.primaryKey ? '(Auto-generated if empty)' : ''}
 								class="w-full rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-xs dark:border-neutral-700 dark:bg-neutral-900"
@@ -443,6 +448,7 @@
 						{:else}
 							<input
 								id={`create-${col.name}`}
+								name={col.name}
 								type="text"
 								placeholder={col.primaryKey ? '(Auto-generated UUID if empty)' : ''}
 								class="w-full rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-xs dark:border-neutral-700 dark:bg-neutral-900"

package/dist/admin/components/DevSandbox.svelte

@@ -5,7 +5,7 @@
 	import Icon from '../../components/elements/Icon.svelte';
 	import Progress from '../../components/elements/Progress.svelte';
 	import { useUpload } from '../../composables/useUpload.svelte';
-	import { getAuthUserContext } from '../../site/context';
+	import { useYaxa } from '../../site/context';
 
 	interface Props {
 		apiPrefix?: string;
@@ -15,7 +15,8 @@
 	let { apiPrefix = '/admin/api', class: className = '' }: Props = $props();
 
 	// Auth & Context info
-	const user = $derived(getAuthUserContext());
+	const yaxa = useYaxa();
+	const user = $derived(yaxa.user);
 
 	// Email Sandbox State
 	let emailTo = $state('developer@example.com');
@@ -96,6 +97,7 @@
 				>
 				<input
 					id="email-to"
+					name="emailTo"
 					type="email"
 					bind:value={emailTo}
 					placeholder="you@example.com"
@@ -109,6 +111,7 @@
 				>
 				<select
 					id="email-template"
+					name="emailTemplate"
 					bind:value={emailTemplate}
 					class="w-full rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-xs text-neutral-900 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
 				>
@@ -172,6 +175,7 @@
 				>
 				<input
 					id="storage-file"
+					name="storageFile"
 					type="file"
 					onchange={(e) => {
 						const files = e.currentTarget.files;

package/dist/admin/components/RecordDrawer.svelte

@@ -138,6 +138,7 @@
 								<div class="flex items-center gap-2 pt-1">
 									<input
 										id={`field-${col.name}`}
+										name={col.name}
 										type="checkbox"
 										class="h-4 w-4 rounded border-neutral-300 text-primary-600 focus:ring-primary-500 dark:border-neutral-700 dark:bg-neutral-800"
 										checked={Boolean(formData[col.name])}
@@ -150,6 +151,7 @@
 							{:else if col.dataType === 'number' || col.dataType === 'integer'}
 								<input
 									id={`field-${col.name}`}
+									name={col.name}
 									type="number"
 									class="w-full rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-sm text-neutral-900 placeholder-neutral-400 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
 									disabled={col.primaryKey}
@@ -162,6 +164,7 @@
 							{:else if String(formData[col.name] ?? '').length > 60 || col.name.includes('description') || col.name.includes('body')}
 								<textarea
 									id={`field-${col.name}`}
+									name={col.name}
 									rows={3}
 									class="w-full rounded-md border border-neutral-300 bg-white px-3 py-1.5 font-mono text-sm text-xs text-neutral-900 placeholder-neutral-400 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
 									disabled={col.primaryKey}
@@ -172,6 +175,7 @@
 							{:else}
 								<input
 									id={`field-${col.name}`}
+									name={col.name}
 									type="text"
 									class="w-full rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-sm text-neutral-900 placeholder-neutral-400 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
 									disabled={col.primaryKey}

package/dist/components/elements/Icon.svelte

@@ -126,7 +126,38 @@
 			'<circle cx="12" cy="12" r="1.5" fill="currentColor"/><circle cx="12" cy="5" r="1.5" fill="currentColor"/><circle cx="12" cy="19" r="1.5" fill="currentColor"/>',
 		user: '<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/><circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" fill="none"/>',
 		users:
-			'<path d="M17 21v-2a4 4 0 00-3-3.87M9 21v-2a4 4 0 013-3.87M16 3.13a4 4 0 010 7.75M8 3.13a4 4 0 000 7.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/>'
+			'<path d="M17 21v-2a4 4 0 00-3-3.87M9 21v-2a4 4 0 013-3.87M16 3.13a4 4 0 010 7.75M8 3.13a4 4 0 000 7.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/>',
+		list: '<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		'help-circle':
+			'<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3m.08 4h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+		help: '<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3m.08 4h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+		bolt: '<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		cube: '<path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/><polyline points="3.27 6.96 12 12.01 20.73 6.96" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="12" y1="22.08" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+		swatch:
+			'<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c.88 0 1.6-.72 1.6-1.6 0-.41-.17-.79-.44-1.06-.27-.28-.44-.65-.44-1.06 0-.88.72-1.6 1.6-1.6h1.88c3.15 0 5.72-2.57 5.72-5.72C21.32 6.16 17.14 2 12 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="6.5" cy="11.5" r="1.5" fill="currentColor"/><circle cx="9.5" cy="7.5" r="1.5" fill="currentColor"/><circle cx="14.5" cy="7.5" r="1.5" fill="currentColor"/><circle cx="17.5" cy="11.5" r="1.5" fill="currentColor"/>',
+		star: '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		photo:
+			'<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" fill="none"/><circle cx="8.5" cy="8.5" r="1.5" fill="currentColor"/><polyline points="21 15 16 10 5 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		'document-text':
+			'<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/><polyline points="14 2 14 8 20 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/><line x1="8" y1="13" x2="16" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="8" y1="17" x2="13" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>',
+		'clipboard-document':
+			'<path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/><rect x="8" y="2" width="8" height="4" rx="1" stroke="currentColor" stroke-width="2" fill="none"/><line x1="9" y1="12" x2="15" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="9" y1="16" x2="13" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>',
+		'arrow-path':
+			'<path d="M21.5 2v6h-6M21.34 15.57a10 10 0 11-.57-8.38l5.67-5.19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		'code-bracket':
+			'<polyline points="16 18 22 12 16 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/><polyline points="8 6 2 12 8 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		'squares-2x2':
+			'<rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/><rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/><rect x="14" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/><rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/>',
+		'squares-plus':
+			'<rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/><rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/><rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2" fill="none"/><line x1="17.5" y1="14" x2="17.5" y2="21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="14" y1="17.5" x2="21" y2="17.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>',
+		'arrow-top-right-on-square':
+			'<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
+		sidebar:
+			'<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" fill="none"/><line x1="9" y1="3" x2="9" y2="21" stroke="currentColor" stroke-width="2"/>',
+		'layout-top':
+			'<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" fill="none"/><line x1="3" y1="9" x2="21" y2="9" stroke="currentColor" stroke-width="2"/>',
+		'panel-right':
+			'<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" fill="none"/><line x1="15" y1="3" x2="15" y2="21" stroke="currentColor" stroke-width="2"/>'
 	};
 </script>
 

package/dist/components/forms/Checkbox.svelte

@@ -3,6 +3,7 @@
 	import Icon from '../elements/Icon.svelte';
 
 	interface Props {
+		id?: string;
 		checked?: boolean;
 		label?: string;
 		description?: string;
@@ -17,6 +18,7 @@
 	}
 
 	let {
+		id,
 		checked = $bindable(false),
 		label,
 		description,
@@ -38,6 +40,7 @@
 >
 	<div class="flex h-5 items-center">
 		<input
+			id={id || name}
 			type="checkbox"
 			bind:checked
 			aria-label={ariaLabelAttr || ariaLabel || label}

package/dist/components/forms/Checkbox.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 interface Props {
+    id?: string;
     checked?: boolean;
     label?: string;
     description?: string;

package/dist/components/forms/ColorPicker.svelte

@@ -3,6 +3,11 @@
 	import Icon from '../elements/Icon.svelte';
 
 	interface Props {
+		id?: string;
+		name?: string;
+		label?: string;
+		'aria-label'?: string;
+		ariaLabel?: string;
 		value?: string;
 		presets?: string[];
 		disabled?: boolean;
@@ -23,6 +28,11 @@
 	];
 
 	let {
+		id,
+		name,
+		label,
+		'aria-label': ariaLabelAttr,
+		ariaLabel,
 		value = $bindable('#ff3e00'),
 		presets = defaultPresets,
 		disabled = false,
@@ -62,18 +72,23 @@
 				style="background-color: {value};"
 			>
 				<input
+					id={id ? `${id}-color` : name ? `${name}-color` : undefined}
+					name={name ? `${name}-color` : 'colorPickerValue'}
 					type="color"
 					bind:value
 					{disabled}
 					class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
-					aria-label="Pick color"
+					aria-label={ariaLabelAttr || ariaLabel || label || 'Pick color'}
 				/>
 			</label>
 			<input
+				id={id ? `${id}-hex` : name ? `${name}-hex` : undefined}
+				name={name || 'colorHex'}
 				type="text"
 				bind:value
 				{disabled}
 				placeholder="#ff3e00"
+				aria-label="Hex color code"
 				class="h-8 w-full rounded-md border border-neutral-200 bg-neutral-50 px-2.5 font-mono text-sm text-neutral-800 focus:border-primary-500 focus:outline-none dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-200"
 			/>
 		</div>
@@ -124,16 +139,21 @@
 					style="background-color: {value};"
 				>
 					<input
+						id={id ? `${id}-popover-color` : name ? `${name}-popover-color` : undefined}
+						name={name ? `${name}-popover-color` : 'colorPickerValue'}
 						type="color"
 						bind:value
 						class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
-						aria-label="Pick color"
+						aria-label={ariaLabelAttr || ariaLabel || label || 'Pick color'}
 					/>
 				</label>
 				<input
+					id={id ? `${id}-popover-hex` : name ? `${name}-popover-hex` : undefined}
+					name={name || 'colorHex'}
 					type="text"
 					bind:value
 					placeholder="#ff3e00"
+					aria-label="Hex color code"
 					class="h-8 w-full rounded-md border border-neutral-200 bg-neutral-50 px-2.5 font-mono text-sm text-neutral-800 focus:border-primary-500 focus:outline-none dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-200"
 				/>
 			</div>

package/dist/components/forms/ColorPicker.svelte.d.ts

@@ -1,4 +1,9 @@
 interface Props {
+    id?: string;
+    name?: string;
+    label?: string;
+    'aria-label'?: string;
+    ariaLabel?: string;
     value?: string;
     presets?: string[];
     disabled?: boolean;

package/dist/components/forms/Combobox.svelte

@@ -180,9 +180,12 @@
 			>
 				<Icon name="search" size="xs" class="mr-2 shrink-0 text-neutral-400" />
 				<input
+					id={name ? `${name}-search` : undefined}
+					name={name ? `${name}-search` : 'comboboxSearch'}
 					type="text"
 					bind:value={query}
 					placeholder={searchPlaceholder}
+					aria-label={searchPlaceholder || 'Search options'}
 					onkeydown={handleKeydown}
 					class="h-8 w-full bg-transparent text-xs text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white"
 				/>

package/dist/components/forms/Dropzone.svelte

@@ -1,5 +1,9 @@
 <script module lang="ts">
 	export interface DropzoneProps {
+		id?: string;
+		name?: string;
+		'aria-label'?: string;
+		ariaLabel?: string;
 		accept?: string;
 		multiple?: boolean;
 		maxSize?: number; // in bytes
@@ -23,6 +27,10 @@
 	import { useUpload } from '../../composables/useUpload.svelte';
 
 	let {
+		id,
+		name = 'dropzoneFiles',
+		'aria-label': ariaLabelAttr,
+		ariaLabel,
 		accept = '*/*',
 		multiple = false,
 		maxSize = 10 * 1024 * 1024, // 10MB default
@@ -166,11 +174,14 @@
 		aria-disabled={disabled}
 	>
 		<input
+			id={id || name || 'dropzone-file-input'}
+			name={name || 'dropzoneFiles'}
 			bind:this={fileInputEl}
 			type="file"
 			{accept}
 			{multiple}
 			{disabled}
+			aria-label={ariaLabelAttr || ariaLabel || label || 'Upload files'}
 			class="hidden"
 			onchange={handleInputChange}
 		/>

package/dist/components/forms/Dropzone.svelte.d.ts

@@ -1,4 +1,8 @@
 export interface DropzoneProps {
+    id?: string;
+    name?: string;
+    'aria-label'?: string;
+    ariaLabel?: string;
     accept?: string;
     multiple?: boolean;
     maxSize?: number;

package/dist/components/forms/FormField.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 
 	interface Props {
+		id?: string;
 		label?: string;
 		description?: string;
 		error?: string;
@@ -13,6 +14,7 @@
 	}
 
 	let {
+		id,
 		label,
 		description,
 		error,
@@ -28,7 +30,10 @@
 	{#if label || hint}
 		<div class="flex items-center justify-between">
 			{#if label}
-				<label for={name} class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
+				<label
+					for={id || name}
+					class="block text-sm font-medium text-neutral-700 dark:text-neutral-300"
+				>
 					{label}
 					{#if required}
 						<span class="ml-0.5 text-rose-500">*</span>

package/dist/components/forms/FormField.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 interface Props {
+    id?: string;
     label?: string;
     description?: string;
     error?: string;

package/dist/components/forms/InputOTP.svelte

@@ -2,6 +2,8 @@
 	import { cn } from '../../utils/cn';
 
 	interface Props {
+		id?: string;
+		name?: string;
 		length?: number;
 		value?: string;
 		type?: 'number' | 'text' | 'password';
@@ -17,6 +19,8 @@
 	}
 
 	let {
+		id,
+		name = 'otp',
 		length = 6,
 		value = $bindable(''),
 		type = 'number',
@@ -139,6 +143,8 @@
 		{/if}
 
 		<input
+			id={`${id || name}-${index + 1}`}
+			name={`${name}-${index + 1}`}
 			bind:this={inputRefs[index]}
 			type={type === 'password' ? 'password' : 'text'}
 			inputmode={type === 'number' ? 'numeric' : 'text'}

package/dist/components/forms/InputOTP.svelte.d.ts

@@ -1,4 +1,6 @@
 interface Props {
+    id?: string;
+    name?: string;
     length?: number;
     value?: string;
     type?: 'number' | 'text' | 'password';

package/dist/components/forms/MultiSelect.svelte

@@ -180,9 +180,12 @@
 			>
 				<Icon name="search" size="xs" class="mr-2 shrink-0 text-neutral-400" />
 				<input
+					id={name ? `${name}-search` : undefined}
+					name={name ? `${name}-search` : 'multiselectSearch'}
 					type="text"
 					bind:value={searchQuery}
 					placeholder={searchPlaceholder}
+					aria-label={searchPlaceholder || 'Search options'}
 					onkeydown={handleKeyDown}
 					class="h-8 w-full bg-transparent text-xs text-neutral-900 placeholder:text-neutral-400 focus:outline-none dark:text-white"
 				/>

package/dist/components/forms/NumberInput.svelte

@@ -23,6 +23,7 @@
 	});
 
 	export type NumberInputProps = VariantProps<typeof numberInputVariants> & {
+		id?: string;
 		value?: number;
 		min?: number;
 		max?: number;
@@ -32,6 +33,9 @@
 		placeholder?: string;
 		disabled?: boolean;
 		name?: string;
+		label?: string;
+		'aria-label'?: string;
+		ariaLabel?: string;
 		class?: string;
 	};
 </script>
@@ -40,6 +44,7 @@
 	import Icon from '../elements/Icon.svelte';
 
 	let {
+		id,
 		value = $bindable(0),
 		min,
 		max,
@@ -49,6 +54,9 @@
 		placeholder,
 		disabled = false,
 		name,
+		label,
+		'aria-label': ariaLabelAttr,
+		ariaLabel,
 		size = 'md',
 		status = 'default',
 		class: className = ''
@@ -110,14 +118,16 @@
 		{/if}
 
 		<input
+			id={id || name}
 			type="number"
-			{name}
+			name={name || id || 'number-input'}
 			{min}
 			{max}
 			{step}
 			{disabled}
 			{placeholder}
 			{value}
+			aria-label={ariaLabelAttr || ariaLabel || label || placeholder || name || 'Number input'}
 			oninput={handleInput}
 			onkeydown={handleKeydown}
 			class="w-full [appearance:textfield] bg-transparent text-center font-mono focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"

package/dist/components/forms/NumberInput.svelte.d.ts

@@ -31,6 +31,7 @@ export declare const numberInputVariants: import("tailwind-variants").TVReturnTy
     };
 }, undefined>>;
 export type NumberInputProps = VariantProps<typeof numberInputVariants> & {
+    id?: string;
     value?: number;
     min?: number;
     max?: number;
@@ -40,6 +41,9 @@ export type NumberInputProps = VariantProps<typeof numberInputVariants> & {
     placeholder?: string;
     disabled?: boolean;
     name?: string;
+    label?: string;
+    'aria-label'?: string;
+    ariaLabel?: string;
     class?: string;
 };
 declare const NumberInput: import("svelte").Component<NumberInputProps, {}, "value">;

package/dist/components/forms/RadioGroup.svelte

@@ -45,11 +45,13 @@
 				: ''}"
 		>
 			<input
+				id={`${name}-${opt.value}`}
 				type="radio"
 				{name}
 				value={opt.value}
 				disabled={opt.disabled}
 				checked={isSelected}
+				aria-label={opt.label}
 				onchange={() => (value = opt.value)}
 				class="sr-only"
 			/>

package/dist/components/forms/Select.svelte

@@ -31,13 +31,18 @@
 	});
 
 	export type SelectProps = VariantProps<typeof selectVariants> & {
+		id?: string;
 		value?: string;
 		options?: SelectOption[];
 		placeholder?: string;
 		icon?: IconSource;
 		disabled?: boolean;
 		name?: string;
+		label?: string;
+		'aria-label'?: string;
+		ariaLabel?: string;
 		class?: string;
+		[key: string]: any;
 	};
 </script>
 
@@ -45,15 +50,20 @@
 	import Icon from '../elements/Icon.svelte';
 
 	let {
+		id,
 		value = $bindable(''),
 		options = [],
 		placeholder = 'Select an option...',
 		icon,
 		disabled = false,
 		name,
+		label,
+		'aria-label': ariaLabelAttr,
+		ariaLabel,
 		size = 'md',
 		status = 'default',
-		class: className = ''
+		class: className = '',
+		...restProps
 	}: SelectProps = $props();
 </script>
 
@@ -65,14 +75,17 @@
 	{/if}
 
 	<select
+		id={id || name}
 		bind:value
 		{disabled}
 		{name}
+		aria-label={ariaLabelAttr || ariaLabel || label || placeholder || name || 'Select option'}
 		class="{selectVariants({ size, status, class: className })} {icon
 			? size === 'sm'
 				? 'pl-8'
 				: 'pl-10'
 			: ''}"
+		{...restProps}
 	>
 		{#if placeholder}
 			<option value="" disabled selected={!value}>

package/dist/components/forms/Select.svelte.d.ts

@@ -38,13 +38,18 @@ export declare const selectVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined>>;
 export type SelectProps = VariantProps<typeof selectVariants> & {
+    id?: string;
     value?: string;
     options?: SelectOption[];
     placeholder?: string;
     icon?: IconSource;
     disabled?: boolean;
     name?: string;
+    label?: string;
+    'aria-label'?: string;
+    ariaLabel?: string;
     class?: string;
+    [key: string]: any;
 };
 declare const Select: import("svelte").Component<SelectProps, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/components/forms/Slider.svelte

@@ -1,21 +1,29 @@
 <script lang="ts">
 	interface Props {
+		id?: string;
 		value?: number;
 		min?: number;
 		max?: number;
 		step?: number;
 		disabled?: boolean;
 		name?: string;
+		label?: string;
+		'aria-label'?: string;
+		ariaLabel?: string;
 		class?: string;
 	}
 
 	let {
+		id,
 		value = $bindable(50),
 		min = 0,
 		max = 100,
 		step = 1,
 		disabled = false,
-		name,
+		name = 'slider',
+		label,
+		'aria-label': ariaLabelAttr,
+		ariaLabel,
 		class: className = ''
 	}: Props = $props();
 
@@ -24,6 +32,7 @@
 
 <div class="relative flex w-full touch-none items-center select-none {className}">
 	<input
+		id={id || name}
 		type="range"
 		bind:value
 		{min}
@@ -31,6 +40,10 @@
 		{step}
 		{disabled}
 		{name}
+		aria-label={ariaLabelAttr || ariaLabel || label || 'Slider'}
+		aria-valuenow={value}
+		aria-valuemin={min}
+		aria-valuemax={max}
 		class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-neutral-200 accent-primary-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-800"
 		style="background: linear-gradient(to right, rgb(37 99 235) {percentage}%, rgb(228 228 231) {percentage}%);"
 	/>

package/dist/components/forms/Slider.svelte.d.ts

@@ -1,10 +1,14 @@
 interface Props {
+    id?: string;
     value?: number;
     min?: number;
     max?: number;
     step?: number;
     disabled?: boolean;
     name?: string;
+    label?: string;
+    'aria-label'?: string;
+    ariaLabel?: string;
     class?: string;
 }
 declare const Slider: import("svelte").Component<Props, {}, "value">;