yaxa-svelte 1.8.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/Badge.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/Badge.test.js

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { badgeVariants } from './Badge.svelte';
+describe('Badge Component', () => {
+    it('generates solid primary badge classes by default', () => {
+        const classes = badgeVariants({ variant: 'solid', color: 'primary' });
+        expect(classes).toContain('bg-primary-600');
+        expect(classes).toContain('inline-flex');
+        expect(classes).toContain('font-medium');
+    });
+    it('supports multiple variants: outline, soft, subtle', () => {
+        const outline = badgeVariants({ variant: 'outline', color: 'success' });
+        expect(outline).toContain('border');
+        expect(outline).toContain('bg-transparent');
+        const soft = badgeVariants({ variant: 'soft', color: 'warning' });
+        expect(soft).toContain('inline-flex');
+        const subtle = badgeVariants({ variant: 'subtle', color: 'error' });
+        expect(subtle).toContain('border');
+    });
+    it('supports size scales (xs, sm, md, lg)', () => {
+        const xs = badgeVariants({ size: 'xs' });
+        expect(xs).toContain('text-[10px]');
+        expect(xs).toContain('px-1.5');
+        const lg = badgeVariants({ size: 'lg' });
+        expect(lg).toContain('text-sm');
+        expect(lg).toContain('px-3');
+    });
+});

package/dist/components/elements/Button.svelte

@@ -193,48 +193,48 @@
 	});
 
 	export type ButtonProps = VariantProps<typeof buttonVariants> & {
+		type?: 'button' | 'submit' | 'reset';
 		href?: string;
-		loading?: boolean;
+		as?: 'button' | 'a' | 'span' | 'div';
 		disabled?: boolean;
+		loading?: boolean;
 		icon?: IconSource;
 		trailingIcon?: IconSource;
-		type?: 'button' | 'submit' | 'reset';
-		class?: string;
 		leading?: Snippet;
 		trailing?: Snippet;
 		children?: Snippet;
-		onclick?: (e: MouseEvent) => void;
-		'aria-label'?: string;
-		'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean;
+		onclick?: (event: MouseEvent) => void;
+		class?: string;
 		[key: string]: unknown;
 	};
 </script>
 
 <script lang="ts">
-	import Icon from './Icon.svelte';
 	import Spinner from './Spinner.svelte';
+	import Icon from './Icon.svelte';
 
 	let {
+		type = 'button',
 		href,
+		as = 'button',
 		variant = 'solid',
 		color = 'primary',
 		size = 'md',
 		block = false,
 		square = false,
-		loading = false,
 		disabled = false,
+		loading = false,
 		icon,
 		trailingIcon,
-		type = 'button',
-		class: className = '',
 		leading,
 		trailing,
 		children,
 		onclick,
+		class: className = '',
 		...restProps
 	}: ButtonProps = $props();
 
-	let classes = $derived(
+	const classes = $derived(
 		buttonVariants({
 			variant,
 			color,
@@ -246,7 +246,47 @@
 	);
 </script>
 
-{#if href}
+{#if as === 'span'}
+	<span class={classes} aria-disabled={disabled || loading} {onclick} {...restProps}>
+		{#if loading}
+			<Spinner size={size === 'xs' || size === 'sm' ? 'sm' : 'md'} />
+		{:else if leading}
+			{@render leading()}
+		{:else if icon}
+			<Icon name={icon} size={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'} />
+		{/if}
+
+		{#if children}
+			{@render children()}
+		{/if}
+
+		{#if trailing}
+			{@render trailing()}
+		{:else if trailingIcon}
+			<Icon name={trailingIcon} size={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'} />
+		{/if}
+	</span>
+{:else if as === 'div'}
+	<div class={classes} aria-disabled={disabled || loading} {onclick} {...restProps}>
+		{#if loading}
+			<Spinner size={size === 'xs' || size === 'sm' ? 'sm' : 'md'} />
+		{:else if leading}
+			{@render leading()}
+		{:else if icon}
+			<Icon name={icon} size={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'} />
+		{/if}
+
+		{#if children}
+			{@render children()}
+		{/if}
+
+		{#if trailing}
+			{@render trailing()}
+		{:else if trailingIcon}
+			<Icon name={trailingIcon} size={size === 'xs' ? 'xs' : size === 'sm' ? 'sm' : 'md'} />
+		{/if}
+	</div>
+{:else if href || as === 'a'}
 	<a
 		{href}
 		class={classes}

package/dist/components/elements/Button.svelte.d.ts

@@ -90,19 +90,18 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined>>;
 export type ButtonProps = VariantProps<typeof buttonVariants> & {
+    type?: 'button' | 'submit' | 'reset';
     href?: string;
-    loading?: boolean;
+    as?: 'button' | 'a' | 'span' | 'div';
     disabled?: boolean;
+    loading?: boolean;
     icon?: IconSource;
     trailingIcon?: IconSource;
-    type?: 'button' | 'submit' | 'reset';
-    class?: string;
     leading?: Snippet;
     trailing?: Snippet;
     children?: Snippet;
-    onclick?: (e: MouseEvent) => void;
-    'aria-label'?: string;
-    'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean;
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
     [key: string]: unknown;
 };
 declare const Button: import("svelte").Component<ButtonProps, {}, "">;

package/dist/components/elements/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/Button.test.js

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import { buttonVariants } from './Button.svelte';
+describe('Button Component', () => {
+    it('generates solid primary button classes by default', () => {
+        const classes = buttonVariants({ variant: 'solid', color: 'primary' });
+        expect(classes).toContain('bg-primary-600');
+        expect(classes).toContain('inline-flex');
+        expect(classes).toContain('select-none');
+    });
+    it('supports multiple variants: outline, ghost, soft, subtle, link', () => {
+        const outline = buttonVariants({ variant: 'outline', color: 'neutral' });
+        expect(outline).toContain('border');
+        expect(outline).toContain('bg-transparent');
+        const ghost = buttonVariants({ variant: 'ghost', color: 'error' });
+        expect(ghost).toContain('bg-transparent');
+        const link = buttonVariants({ variant: 'link' });
+        expect(link).toContain('underline-offset-4');
+    });
+    it('supports size scales and square/block modifiers', () => {
+        const xs = buttonVariants({ size: 'xs' });
+        expect(xs).toContain('text-xs');
+        expect(xs).toContain('px-2');
+        const xl = buttonVariants({ size: 'xl' });
+        expect(xl).toContain('text-base');
+        expect(xl).toContain('px-5');
+        const block = buttonVariants({ block: true });
+        expect(block).toContain('w-full');
+        const square = buttonVariants({ square: true });
+        expect(square).toContain('aspect-square');
+    });
+    it('applies compound color classes for success, warning, and error', () => {
+        const success = buttonVariants({ variant: 'solid', color: 'success' });
+        expect(success).toContain('bg-emerald-600');
+        const warning = buttonVariants({ variant: 'solid', color: 'warning' });
+        expect(warning).toContain('bg-amber-600');
+        const error = buttonVariants({ variant: 'solid', color: 'error' });
+        expect(error).toContain('bg-rose-600');
+    });
+});

package/dist/components/elements/DataTable.dom.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/DataTable.dom.test.js

@@ -0,0 +1,74 @@
+import { describe, it, expect } from 'vitest';
+import { flushSync } from 'svelte';
+import { renderComponent } from '../../testing';
+import DataTable, {} from './DataTable.svelte';
+const testData = [
+    { id: '1', name: 'Alice Smith', role: 'Engineer', score: 95 },
+    { id: '2', name: 'Bob Jones', role: 'Designer', score: 82 },
+    { id: '3', name: 'Charlie Brown', role: 'Manager', score: 88 }
+];
+const testColumns = [
+    { key: 'name', label: 'Full Name', sortable: true },
+    { key: 'role', label: 'Job Role', sortable: true },
+    { key: 'score', label: 'Performance Score', sortable: true }
+];
+describe('DataTable Component (DOM & Interactions)', () => {
+    it('renders table headers and rows accurately', () => {
+        const { target, cleanup } = renderComponent(DataTable, {
+            data: testData,
+            columns: testColumns
+        });
+        const thElements = target.querySelectorAll('thead th');
+        expect(thElements.length).toBe(3);
+        expect(thElements[0].textContent).toContain('Full Name');
+        expect(thElements[1].textContent).toContain('Job Role');
+        const trElements = target.querySelectorAll('tbody tr');
+        expect(trElements.length).toBe(3);
+        expect(trElements[0].textContent).toContain('Alice Smith');
+        expect(trElements[1].textContent).toContain('Bob Jones');
+        cleanup();
+    });
+    it('filters rows according to searchQuery', () => {
+        const { target, cleanup } = renderComponent(DataTable, {
+            data: testData,
+            columns: testColumns,
+            searchQuery: 'Designer'
+        });
+        const trElements = target.querySelectorAll('tbody tr');
+        expect(trElements.length).toBe(1);
+        expect(trElements[0].textContent).toContain('Bob Jones');
+        expect(trElements[0].textContent).toContain('Designer');
+        cleanup();
+    });
+    it('displays custom emptyText when no matching rows are found', () => {
+        const { target, cleanup } = renderComponent(DataTable, {
+            data: testData,
+            columns: testColumns,
+            searchQuery: 'NonExistentQueryXYZ',
+            emptyText: 'No members found'
+        });
+        const trElements = target.querySelectorAll('tbody tr');
+        expect(trElements.length).toBe(1);
+        expect(trElements[0].textContent).toContain('No members found');
+        cleanup();
+    });
+    it('sorts rows when clicking on sortable column headers', () => {
+        const { target, cleanup } = renderComponent(DataTable, {
+            data: testData,
+            columns: testColumns
+        });
+        const sortButton = target.querySelector('thead th button');
+        expect(sortButton).toBeDefined();
+        // Click to sort by name (ascending)
+        sortButton.click();
+        flushSync();
+        let firstRowName = target.querySelector('tbody tr td')?.textContent;
+        expect(firstRowName).toContain('Alice Smith');
+        // Click again to sort by name (descending)
+        sortButton.click();
+        flushSync();
+        firstRowName = target.querySelector('tbody tr td')?.textContent;
+        expect(firstRowName).toContain('Charlie Brown');
+        cleanup();
+    });
+});

package/dist/components/elements/DataTable.svelte

@@ -48,15 +48,14 @@
 
 	let sortKey = $state<string | null>(null);
 	let sortOrder = $state<'asc' | 'desc'>('asc');
-	let columnWidths = $state<Record<string, number>>({});
+	let customWidths = $state<Record<string, number>>({});
 
-	// Initialize defined column widths
-	$effect(() => {
-		const initial: Record<string, number> = {};
+	let effectiveWidths = $derived.by(() => {
+		const widths: Record<string, number> = {};
 		columns.forEach((c) => {
-			if (c.width) initial[String(c.key)] = c.width;
+			if (c.width) widths[String(c.key)] = c.width;
 		});
-		columnWidths = { ...initial, ...columnWidths };
+		return { ...widths, ...customWidths };
 	});
 
 	function handleSort(key: string) {
@@ -73,7 +72,7 @@
 
 		const startX = 'touches' in e ? e.touches[0].clientX : e.clientX;
 		const currentCol = columns.find((c) => String(c.key) === columnKey);
-		const currentWidth = columnWidths[columnKey] || 150;
+		const currentWidth = effectiveWidths[columnKey] || 150;
 		const minWidth = currentCol?.minWidth || 60;
 		const maxWidth = currentCol?.maxWidth || 600;
 
@@ -81,7 +80,7 @@
 			const clientX = 'touches' in moveEvent ? moveEvent.touches[0].clientX : moveEvent.clientX;
 			const delta = clientX - startX;
 			const newWidth = Math.max(minWidth, Math.min(maxWidth, currentWidth + delta));
-			columnWidths[columnKey] = newWidth;
+			customWidths[columnKey] = newWidth;
 		}
 
 		function onEnd() {
@@ -180,8 +179,8 @@
 					{/if}
 					{#each columns as column}
 						{@const colKey = String(column.key)}
-						{@const widthStyle = columnWidths[colKey]
-							? `width: ${columnWidths[colKey]}px; min-width: ${columnWidths[colKey]}px;`
+						{@const widthStyle = effectiveWidths[colKey]
+							? `width: ${effectiveWidths[colKey]}px; min-width: ${effectiveWidths[colKey]}px;`
 							: ''}
 						<th
 							class="relative px-4 py-3 {getPinClass(column.pinned)} {column.class || ''}"
@@ -291,8 +290,8 @@
 							{/if}
 							{#each columns as column}
 								{@const colKey = String(column.key)}
-								{@const widthStyle = columnWidths[colKey]
-									? `width: ${columnWidths[colKey]}px; min-width: ${columnWidths[colKey]}px;`
+								{@const widthStyle = effectiveWidths[colKey]
+									? `width: ${effectiveWidths[colKey]}px; min-width: ${effectiveWidths[colKey]}px;`
 									: ''}
 								<td
 									class="px-4 py-3.5 {getPinClass(column.pinned)} {column.class || ''}"

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/elements/Skeleton.svelte

@@ -7,7 +7,7 @@
 			variant: {
 				pulse: 'animate-pulse',
 				shimmer:
-					'before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent dark:before:via-white/10',
+					'before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer-slide_1.5s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent dark:before:via-white/20',
 				none: ''
 			},
 			shape: {

package/dist/components/elements/Skeleton.svelte.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from '../../utils/cn';
 export declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         pulse: "animate-pulse";
-        shimmer: "before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent dark:before:via-white/10";
+        shimmer: "before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer-slide_1.5s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent dark:before:via-white/20";
         none: "";
     };
     shape: {
@@ -14,7 +14,7 @@ export declare const skeletonVariants: import("tailwind-variants").TVReturnType<
 }, undefined, "relative overflow-hidden bg-neutral-200 dark:bg-neutral-800 select-none", {
     variant: {
         pulse: "animate-pulse";
-        shimmer: "before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent dark:before:via-white/10";
+        shimmer: "before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer-slide_1.5s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent dark:before:via-white/20";
         none: "";
     };
     shape: {
@@ -26,7 +26,7 @@ export declare const skeletonVariants: import("tailwind-variants").TVReturnType<
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         pulse: "animate-pulse";
-        shimmer: "before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent dark:before:via-white/10";
+        shimmer: "before:absolute before:inset-0 before:-translate-x-full before:animate-[yaxa-shimmer-slide_1.5s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent dark:before:via-white/20";
         none: "";
     };
     shape: {

package/dist/components/elements/Skeleton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/Skeleton.test.js

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import { renderComponent } from '../../testing';
+import Skeleton, { skeletonVariants } from './Skeleton.svelte';
+describe('Skeleton Component (DOM & Variants)', () => {
+    it('generates pulse animation classes by default', () => {
+        const classes = skeletonVariants({ variant: 'pulse', shape: 'rectangle' });
+        expect(classes).toContain('animate-pulse');
+        expect(classes).toContain('rounded-lg');
+    });
+    it('generates shimmer sliding gradient classes for variant shimmer', () => {
+        const classes = skeletonVariants({ variant: 'shimmer' });
+        expect(classes).toContain('yaxa-shimmer-slide');
+        expect(classes).toContain('before:bg-gradient-to-r');
+    });
+    it('supports shape variants: circle, pill, text', () => {
+        const circle = skeletonVariants({ shape: 'circle' });
+        expect(circle).toContain('rounded-full');
+        expect(circle).toContain('aspect-square');
+        const pill = skeletonVariants({ shape: 'pill' });
+        expect(pill).toContain('rounded-full');
+        const text = skeletonVariants({ shape: 'text' });
+        expect(text).toContain('h-4');
+    });
+    it('mounts single skeleton DOM element with custom width and height', () => {
+        const { target, cleanup } = renderComponent(Skeleton, {
+            variant: 'shimmer',
+            shape: 'circle',
+            width: '48px',
+            height: '48px'
+        });
+        const el = target.querySelector('div');
+        expect(el).toBeDefined();
+        expect(el?.getAttribute('aria-hidden')).toBe('true');
+        expect(el?.style.width).toBe('48px');
+        expect(el?.style.height).toBe('48px');
+        expect(el?.className).toContain('rounded-full');
+        cleanup();
+    });
+    it('renders multiple lines for lines prop > 1', () => {
+        const { target, cleanup } = renderComponent(Skeleton, {
+            lines: 4,
+            variant: 'shimmer'
+        });
+        const container = target.querySelector('.space-y-2');
+        expect(container).toBeDefined();
+        expect(container?.children.length).toBe(4);
+        cleanup();
+    });
+});

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;