@svadmin/ui 0.59.0 → 0.60.0

package/dist/components/AnomalyBadge.svelte

@@ -41,10 +41,13 @@
   );
 
   const percentLabel = $derived(`${Math.abs(diff * 100).toFixed(1)}%`);
+  const anomalyAriaLabel = $derived(
+    `Anomaly: current ${formatter(value)}, baseline ${formatter(baseline)} (${diff > 0 ? '+' : '-'}${percentLabel})`
+  );
 </script>
 
 {#if !isAnomaly}
-  <span class="text-muted-foreground text-sm font-medium {className}">
+  <span class="text-muted-foreground text-sm font-medium tabular-nums {className}">
     {formatter(value)}
   </span>
 {:else}
@@ -53,15 +56,16 @@
     variant="ghost" 
     size="sm" 
     class="p-0 h-auto hover:bg-transparent"
+    aria-label={anomalyAriaLabel}
   >
     <Badge 
       variant={isGood ? 'default' : 'destructive'} 
-      class="flex items-center gap-1 font-mono text-xs px-1.5 py-0 {isGood ? 'bg-success hover:bg-success/90 text-success-foreground' : ''} {className}"
+      class="flex items-center gap-1 font-mono text-xs tabular-nums px-1.5 py-0 {isGood ? 'bg-success hover:bg-success/90 text-success-foreground' : ''} {className}"
     >
       {#if diff > 0}
-        <TrendingUp class="h-3 w-3" />
+        <TrendingUp class="h-3 w-3" aria-hidden="true" />
       {:else}
-        <TrendingDown class="h-3 w-3" />
+        <TrendingDown class="h-3 w-3" aria-hidden="true" />
       {/if}
       {formatter(value)}
     </Badge>

package/dist/components/AutoForm.svelte

@@ -198,14 +198,14 @@
         tooltip={i18n.t('common.back')}
         onclick={() => guardNavigate(() => navigation.list(resourceName))}
       >
-        <ArrowLeft class="h-5 w-5" />
+        <ArrowLeft class="h-5 w-5" aria-hidden="true" />
       </TooltipButton>
       <h1 class="text-xl font-semibold text-foreground">{pageTitle}</h1>
       {#if headerContent}
         {@render headerContent()}
       {/if}
       {#if form.isTainted()}
-        <Badge variant="outline" class="border-warning/30 bg-warning/10 text-warning-foreground">{i18n.t('common.unsaved')}</Badge>
+        <Badge variant="outline" role="status" aria-live="polite" class="border-warning/30 bg-warning/10 text-warning-foreground">{i18n.t('common.unsaved')}</Badge>
       {/if}
     </div>
   {/if}
@@ -226,7 +226,7 @@
       {#if submitError}
         <div transition:slide={{ duration: 300, axis: 'y' }} class="svadmin-shake">
           <Alert.Root variant="destructive">
-            <AlertCircle class="h-4 w-4" />
+            <AlertCircle class="h-4 w-4" aria-hidden="true" />
             <Alert.Description>{submitError}</Alert.Description>
           </Alert.Root>
         </div>
@@ -301,9 +301,9 @@
         {:else if !isReadonly}
           <Button type="submit" size={isCompact ? 'sm' : 'default'} disabled={form.submitting}>
             {#if form.submitting}
-              <Loader2 class="h-4 w-4 animate-spin" data-icon="inline-start" />
+              <Loader2 class="h-4 w-4 animate-spin" data-icon="inline-start" aria-hidden="true" />
             {:else}
-              <Save class="h-4 w-4" data-icon="inline-start" />
+              <Save class="h-4 w-4" data-icon="inline-start" aria-hidden="true" />
             {/if}
             {i18n.t('common.save')}
           </Button>

package/dist/components/AutoSaveIndicator.svelte

@@ -16,20 +16,20 @@
   }>();
 </script>
 
-<div class="flex items-center gap-2 text-sm text-muted-foreground">
+<div class="flex items-center gap-2 text-sm text-muted-foreground" role="status" aria-live="polite">
   {#key status}
     <div class="flex items-center gap-2" in:fly={{ y: -8, duration: 200 }} out:fade={{ duration: 150 }}>
       {#if status === 'idle'}
-        <Cloud class="h-4 w-4" />
+        <Cloud class="h-4 w-4" aria-hidden="true" />
         <span>{i18n.t('autoSave.idle')}</span>
       {:else if status === 'loading'}
-        <Loader2 class="h-4 w-4 animate-spin text-primary" />
+        <Loader2 class="h-4 w-4 animate-spin text-primary" aria-hidden="true" />
         <span>{i18n.t('autoSave.saving')}</span>
       {:else if status === 'success'}
-        <Check class="h-4 w-4 text-green-500" />
-        <span class="text-green-500">{i18n.t('autoSave.saved')}</span>
+        <Check class="h-4 w-4 text-success" aria-hidden="true" />
+        <span class="text-success">{i18n.t('autoSave.saved')}</span>
       {:else if status === 'error'}
-        <X class="h-4 w-4 text-destructive" />
+        <X class="h-4 w-4 text-destructive" aria-hidden="true" />
         <span class="text-destructive" title={error}>{i18n.t('autoSave.error')}</span>
       {/if}
     </div>

package/dist/components/AutoTable.svelte

@@ -1099,12 +1099,12 @@
   <!-- Selection Banner (Enterprise Batch Actions) -->
   {#if selectedCount > 0}
     <div
-      class="flex flex-col gap-3 border border-primary/20 bg-primary/10 px-3.5 py-2 rounded-lg text-sm text-foreground animate-in fade-in duration-200 sm:flex-row sm:items-center sm:justify-between"
+      class="flex flex-col gap-3 border border-primary/20 bg-primary/10 px-3.5 py-2 rounded-lg text-sm text-foreground animate-in fade-in duration-200 motion-reduce:animate-none sm:flex-row sm:items-center sm:justify-between"
       aria-label={i18n.t("common.selectedCount", { count: selectedCount })}
       data-svadmin-batch-toolbar
     >
       <div class="flex min-w-0 items-center gap-2 text-sm">
-        <span class="font-medium text-foreground">{i18n.t("common.selectedCount", { count: selectedCount })}</span>
+        <span class="font-medium text-foreground tabular-nums">{i18n.t("common.selectedCount", { count: selectedCount })}</span>
         {#if deleteManyMutation.isPending}
           <span class="text-muted-foreground" role="status">{i18n.t("common.processing")}</span>
         {/if}
@@ -1121,7 +1121,7 @@
             disabled={deleteManyMutation.isPending}
             onclick={confirmBatchDelete}
           >
-            <Trash2 class="h-3.5 w-3.5" data-icon="inline-start" /> {i18n.t("common.batchDelete", { count: selectedCount })}
+            <Trash2 class="h-3.5 w-3.5" data-icon="inline-start" aria-hidden="true" /> {i18n.t("common.batchDelete", { count: selectedCount })}
           </Button>
         {/if}
         <Button
@@ -1143,7 +1143,7 @@
     <div class="flex flex-wrap items-center gap-2 flex-1 min-w-[200px]">
       {#if searchableFields.length > 0}
         <div class="relative max-w-sm flex-1 sm:min-w-[220px]">
-          <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" aria-hidden="true" />
           <Input
             type="text"
             value={searchText}
@@ -1159,10 +1159,10 @@
           <Popover.Trigger>
             {#snippet child({ props })}
               <Button variant="outline" size="sm" class="h-9 px-3" {...props}>
-                <FilterIcon class="h-4 w-4" data-icon="inline-start" />
+                <FilterIcon class="h-4 w-4" data-icon="inline-start" aria-hidden="true" />
                 {i18n.t("common.filter")}
                 {#if activeFilterCount > 0}
-                  <Badge variant="secondary" class="ml-1 h-5 min-w-5 px-1">{activeFilterCount}</Badge>
+                  <Badge variant="secondary" class="ml-1 h-5 min-w-5 px-1 tabular-nums">{activeFilterCount}</Badge>
                 {/if}
               </Button>
             {/snippet}
@@ -1215,7 +1215,7 @@
     <div class="flex items-center gap-1.5 shrink-0">
       {#if !showHeader && canExport}
         <TooltipButton tooltip={i18n.t("common.export")} variant="outline" size="sm" class="h-9 px-2.5" onclick={exportCSV}>
-          <Download class="h-4 w-4" />
+          <Download class="h-4 w-4" aria-hidden="true" />
         </TooltipButton>
       {/if}
 
@@ -1224,7 +1224,7 @@
           <DropdownMenu.Trigger>
             {#snippet child({ props })}
               <TooltipButton tooltip={i18n.t("common.density")} variant="outline" size="sm" class="h-9 px-2.5" {...props}>
-                <Rows class="h-4 w-4" />
+                <Rows class="h-4 w-4" aria-hidden="true" />
               </TooltipButton>
             {/snippet}
           </DropdownMenu.Trigger>
@@ -1754,10 +1754,10 @@
   {#if totalPages > 0}
   <div class="flex flex-col sm:flex-row items-center justify-between gap-3 px-1 py-2 text-sm text-muted-foreground">
     <div class="flex shrink-0 items-center gap-3 leading-8">
-      <span class="shrink-0 whitespace-nowrap">{i18n.t('common.total', { total: query.data?.total ?? 0 })}</span>
+      <span class="shrink-0 whitespace-nowrap tabular-nums">{i18n.t('common.total', { total: query.data?.total ?? 0 })}</span>
       <Select.Root
         aria-label={i18n.t('common.perPage')}
-        class="h-8 w-[78px] shrink-0"
+        class="h-8 w-[78px] shrink-0 tabular-nums"
         value={String(pagination.pageSize ?? 10)}
         onchange={(e) => {
           const size = Number((e.currentTarget as HTMLSelectElement).value);
@@ -1787,6 +1787,7 @@
               <PaginationUI.Ellipsis />
             {:else}
               <PaginationUI.Link
+                class="tabular-nums"
                 isActive={page === currentPage}
                 onclick={() => goToPage(page as number)}
               >

package/dist/components/BatchActionBar.svelte

@@ -44,15 +44,15 @@
   {#if variant === 'floating'}
     <div
       class={cn(
-        'fixed bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-3 rounded-lg border border-border/80 bg-background/95 px-4 py-2.5 shadow-2xl backdrop-blur-md transition-all duration-200 animate-in fade-in-0 slide-in-from-bottom-4',
+        'fixed bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-3 rounded-lg border border-border/80 bg-background/95 px-4 py-2.5 shadow-2xl backdrop-blur-md transition-all duration-200 animate-in fade-in-0 slide-in-from-bottom-4 motion-reduce:animate-none',
         className
       )}
       role="region"
       aria-label="Batch Actions"
     >
       <div class="flex items-center gap-2 pr-2 border-r border-border/60">
-        <CheckCircle2 class="h-4 w-4 text-primary" />
-        <span class="text-xs font-medium text-foreground">{displayText}</span>
+        <CheckCircle2 class="h-4 w-4 text-primary" aria-hidden="true" />
+        <span class="text-xs font-medium text-foreground tabular-nums">{displayText}</span>
       </div>
 
       {#if actions}
@@ -75,7 +75,7 @@
           onclick={onclear}
           aria-label={clearLabel}
         >
-          <X class="h-3.5 w-3.5 mr-1" />
+          <X class="h-3.5 w-3.5 mr-1" aria-hidden="true" />
           {clearLabel}
         </Button>
       {/if}
@@ -91,14 +91,14 @@
       aria-label="Batch Actions"
     >
       <div class="flex items-center gap-2">
-        <Badge variant="secondary" class="h-5 px-1.5 font-semibold text-[11px] bg-primary/15 text-primary border-primary/20">
+        <Badge variant="secondary" class="h-5 px-1.5 font-semibold text-[11px] tabular-nums bg-primary/15 text-primary border-primary/20">
           {selectedCount}
         </Badge>
-        <span class="font-medium text-foreground">{displayText}</span>
+        <span class="font-medium text-foreground tabular-nums">{displayText}</span>
         {#if onclear}
           <button
             type="button"
-            class="text-muted-foreground hover:text-foreground underline underline-offset-2 ml-1 text-xs cursor-pointer focus:outline-none"
+            class="text-muted-foreground hover:text-foreground underline underline-offset-2 ml-1 text-xs cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded-xs"
             onclick={onclear}
           >
             {clearLabel}

package/dist/components/ConfirmDialog.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import * as AlertDialog from './ui/alert-dialog/index.js';
   import { Button } from './ui/button/index.js';
+  import { Loader2 } from '@lucide/svelte';
   import { useTranslation } from '@svadmin/core/i18n';
 
   const i18n = useTranslation();
@@ -61,6 +62,9 @@
       <AlertDialog.Action>
         {#snippet child({ props })}
           <Button variant={variantMap[variant as keyof typeof variantMap]} {...props} disabled={confirming} onclick={handleConfirm}>
+            {#if confirming}
+              <Loader2 class="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
+            {/if}
             {resolvedConfirmText}
           </Button>
         {/snippet}

package/dist/components/InlineEdit.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { useUpdate } from '@svadmin/core';
   import type { FieldDefinition } from '@svadmin/core';
+  import { Loader2 } from '@lucide/svelte';
 
   interface Props {
     resourceName: string;
@@ -19,6 +20,7 @@
   let saving = $state(false);
   let savePending = false;
   const displayValue = $derived(String(value ?? ''));
+  const fieldLabel = $derived(field.label || field.key);
 
   const { mutation } = useUpdate({ get resource() { return resourceName; } });
 
@@ -75,24 +77,32 @@
 </script>
 
 {#if editing}
-  <input
-    bind:this={inputRef}
-    type={field.type === 'number' ? 'number' : 'text'}
-    bind:value={editValue}
-    onkeydown={handleKeydown}
-    onblur={handleBlur}
-    disabled={saving}
-    class="h-7 w-full rounded border bg-background px-2 text-sm outline-none ring-1 ring-primary/50 focus:ring-2 focus:ring-primary transition-all"
-  />
+  <div class="relative flex items-center w-full">
+    <input
+      bind:this={inputRef}
+      type={field.type === 'number' ? 'number' : 'text'}
+      bind:value={editValue}
+      onkeydown={handleKeydown}
+      onblur={handleBlur}
+      disabled={saving}
+      aria-label={fieldLabel}
+      class="h-7 w-full rounded border bg-background px-2 text-sm outline-none ring-1 ring-primary/50 focus:ring-2 focus:ring-primary transition-all disabled:opacity-60"
+    />
+    {#if saving}
+      <span class="absolute right-2 flex items-center pointer-events-none" role="status" aria-label="Saving...">
+        <Loader2 class="size-3.5 animate-spin text-muted-foreground" aria-hidden="true" />
+      </span>
+    {/if}
+  </div>
 {:else}
   <span
-    class="inline-block cursor-pointer rounded px-1 py-0.5 -mx-1 hover:bg-accent/50 transition-colors"
+    class="inline-flex items-center cursor-pointer rounded px-1.5 py-0.5 -mx-1 text-sm text-foreground hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 transition-colors"
     ondblclick={startEdit}
-    title="Double-click to edit"
+    title={`Double-click to edit ${fieldLabel}`}
     role="button"
     tabindex="0"
-    onkeydown={(e) => { if (e.key === 'Enter' || e.key === 'F2') startEdit(); }}
+    onkeydown={(e) => { if (e.key === 'Enter' || e.key === 'F2') { e.preventDefault(); startEdit(); } }}
   >
-    {value ?? '—'}
+    {value != null && value !== '' ? String(value) : '—'}
   </span>
 {/if}

package/dist/components/InsightCard.svelte

@@ -95,25 +95,36 @@ ${scopedContext}`;
   }
 </script>
 
-<div class="rounded-xl border bg-card text-card-foreground shadow-sm flex flex-col {className}">
+<div
+  class="rounded-xl border bg-card text-card-foreground shadow-sm flex flex-col {className}"
+  role="region"
+  aria-label={title}
+>
   <div class="flex items-center justify-between p-4 border-b">
     <div class="flex items-center gap-2 font-medium">
-      <Sparkles class="h-4 w-4 text-amber-500" />
+      <Sparkles class="h-4 w-4 text-amber-500" aria-hidden="true" />
       {title}
     </div>
-    <Button variant="ghost" size="icon-sm" class="h-6 w-6" onclick={getInsights} disabled={isPredicting || !provider}>
-      <RefreshCcw class="h-3 w-3 {isPredicting ? 'animate-spin' : ''}" />
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      class="h-6 w-6"
+      onclick={getInsights}
+      disabled={isPredicting || !provider}
+      aria-label="Refresh AI Insights"
+    >
+      <RefreshCcw class="h-3 w-3 {isPredicting ? 'animate-spin' : ''}" aria-hidden="true" />
     </Button>
   </div>
   
-  <div class="p-4 flex-1">
+  <div class="p-4 flex-1" role="status" aria-live="polite" aria-busy={isPredicting}>
     {#if !provider}
       <div class="text-sm text-muted-foreground italic flex items-center justify-center h-full">
         ChatProvider not configured.
       </div>
     {:else if isPredicting && !insightText}
       <div class="flex items-center justify-center gap-2 text-sm text-muted-foreground h-full py-4">
-        <Loader2 class="h-4 w-4 animate-spin" /> Analyzing data...
+        <Loader2 class="h-4 w-4 animate-spin" aria-hidden="true" /> Analyzing data...
       </div>
     {:else if !insightText}
       <div class="text-sm text-muted-foreground italic flex items-center justify-center h-full">

package/dist/components/LiveIndicator.svelte

@@ -38,11 +38,17 @@
 
 {#key status}
   <div transition:fade={{ duration: 200 }}>
-    <Badge variant={cfg.variant} class="gap-1.5 select-none" title={cfg.label}>
-      <span class="relative flex h-2 w-2">
+    <Badge
+      variant={cfg.variant}
+      class="gap-1.5 select-none"
+      title={cfg.label}
+      role="status"
+      aria-label={`Connection status: ${cfg.label}${resource ? ` for ${resource}` : ''}`}
+    >
+      <span class="relative flex h-2 w-2" aria-hidden="true">
         <span class="{cfg.dotClass} rounded-full h-2 w-2"></span>
         {#if status === 'connected'}
-          <span class="absolute inset-0 rounded-full {cfg.dotClass} opacity-40 animate-ping"></span>
+          <span class="absolute inset-0 rounded-full {cfg.dotClass} opacity-40 animate-ping motion-reduce:animate-none"></span>
         {/if}
       </span>
       <span class="text-[0.6875rem] font-semibold uppercase tracking-wide">{cfg.label}</span>
@@ -55,7 +61,7 @@
         <span class="text-[0.625rem] opacity-70">
           {lastEvent.type}
           {#if timeSinceEvent !== null && timeSinceEvent < 60}
-            <span class="opacity-60">{timeSinceEvent}s ago</span>
+            <span class="opacity-60 tabular-nums">{timeSinceEvent}s ago</span>
           {/if}
         </span>
       {/if}

package/dist/components/RecordDetailDrawer.svelte

@@ -61,7 +61,7 @@
   data-svadmin-record-detail
 >
   {#if permissionPending || (canReadRecord && query.isLoading)}
-    <div class="divide-y divide-border/60" aria-label={i18n.t('common.loading')}>
+    <div class="divide-y divide-border/60" role="status" aria-live="polite" aria-label={i18n.t('common.loading')} aria-busy="true">
       {#each showFields.slice(0, 6) as field (field.key)}
         <div class="grid gap-2 py-4 sm:grid-cols-[minmax(8rem,1fr)_2fr] sm:gap-6">
           <Skeleton class="h-4 w-24" />
@@ -104,7 +104,7 @@
     {#if canReadRecord && recordId != null && resource.canShow !== false}
       <CanAccess resource={resourceName} action="show" params={{ id: recordId }}>
         <Button variant="outline" onclick={() => navigateTo('show')}>
-          <Eye class="h-4 w-4" data-icon="inline-start" />
+          <Eye class="h-4 w-4" data-icon="inline-start" aria-hidden="true" />
           {i18n.t('common.openFullDetail')}
         </Button>
       </CanAccess>
@@ -112,7 +112,7 @@
     {#if canReadRecord && recordId != null && resource.canEdit !== false}
       <CanAccess resource={resourceName} action="edit" params={{ id: recordId }}>
         <Button onclick={() => navigateTo('edit')}>
-          <Pencil class="h-4 w-4" data-icon="inline-start" />
+          <Pencil class="h-4 w-4" data-icon="inline-start" aria-hidden="true" />
           {i18n.t('common.edit')}
         </Button>
       </CanAccess>

package/dist/components/content/DataState.svelte

@@ -46,15 +46,15 @@
   </div>
 {:else if state === 'error' || state === 'forbidden'}
   <Alert.Root variant={state === 'error' ? 'destructive' : 'warning'} class={className}>
-    {#if state === 'error'}<AlertTriangle class="size-4" />{:else}<LockKeyhole class="size-4" />{/if}
+    {#if state === 'error'}<AlertTriangle class="size-4" aria-hidden="true" />{:else}<LockKeyhole class="size-4" aria-hidden="true" />{/if}
     <Alert.Title>{resolvedTitle}</Alert.Title>
     <Alert.Description>{resolvedDescription}</Alert.Description>
-    {#if retry}<Button variant="outline" size="sm" class="mt-3" onclick={retry}><RefreshCw class="size-3.5" />{resolvedRetryLabel}</Button>{/if}
+    {#if retry}<Button variant="outline" size="sm" class="mt-3" onclick={retry}><RefreshCw class="size-3.5" aria-hidden="true" />{resolvedRetryLabel}</Button>{/if}
     {#if action}<div class="mt-3">{@render action()}</div>{/if}
   </Alert.Root>
 {:else}
-  <div class={'flex flex-col items-center justify-center rounded-lg border border-dashed border-border bg-card px-6 py-8 text-center ' + className}>
-    <Inbox class="size-8 text-muted-foreground" /><h3 class="mt-3 text-sm font-semibold text-foreground">{resolvedTitle}</h3><p class="mt-1 max-w-sm text-sm text-muted-foreground">{resolvedDescription}</p>
+  <div class={'flex flex-col items-center justify-center rounded-lg border border-dashed border-border bg-card px-6 py-8 text-center ' + className} role="status" aria-live="polite">
+    <Inbox class="size-8 text-muted-foreground" aria-hidden="true" /><h3 class="mt-3 text-sm font-semibold text-foreground">{resolvedTitle}</h3><p class="mt-1 max-w-sm text-sm text-muted-foreground">{resolvedDescription}</p>
     {#if action}<div class="mt-4">{@render action()}</div>{/if}
   </div>
 {/if}

package/dist/components/content/FeedbackNotice.svelte

@@ -47,11 +47,11 @@
 >
   <div class="flex min-w-0 flex-1 items-start gap-2.5">
     {#if tone === 'danger'}
-      <CircleAlert class="mt-0.5 size-4 shrink-0" />
+      <CircleAlert class="mt-0.5 size-4 shrink-0" aria-hidden="true" />
     {:else if tone === 'warning'}
-      <TriangleAlert class="mt-0.5 size-4 shrink-0" />
+      <TriangleAlert class="mt-0.5 size-4 shrink-0" aria-hidden="true" />
     {:else}
-      <Info class="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+      <Info class="mt-0.5 size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
     {/if}
     <p class="min-w-0 leading-5">{message}</p>
   </div>

package/dist/components/content/FilterToolbar.svelte

@@ -46,7 +46,7 @@
   <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
     {#if showSearch}
       <div class="relative min-w-0 flex-1">
-        <Search class={cn('pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground', isCompact ? 'size-3.5' : 'size-4')} />
+        <Search class={cn('pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground', isCompact ? 'size-3.5' : 'size-4')} aria-hidden="true" />
         <Input
           bind:value={query}
           {placeholder}
@@ -62,7 +62,7 @@
             title={clearLabel}
             onclick={() => query = ''}
           >
-            <X class="size-3.5" />
+            <X class="size-3.5" aria-hidden="true" />
           </Button>
         {/if}
       </div>
@@ -81,17 +81,17 @@
         aria-expanded={advancedOpen}
         aria-controls={advancedPanelId}
       >
-        <SlidersHorizontal class="size-3.5" />
+        <SlidersHorizontal class="size-3.5" aria-hidden="true" />
         <span>{advancedLabel}</span>
         {#if activeFilterCount > 0}
-          <Badge variant="secondary" class="ml-0.5 h-4 min-w-4 px-1 text-[10px] leading-none font-semibold">
+          <Badge variant="secondary" class="ml-0.5 h-4 min-w-4 px-1 text-[10px] leading-none font-semibold tabular-nums">
             {activeFilterCount}
           </Badge>
         {/if}
         {#if advancedOpen}
-          <ChevronUp class="size-3 text-muted-foreground ml-0.5" />
+          <ChevronUp class="size-3 text-muted-foreground ml-0.5" aria-hidden="true" />
         {:else}
-          <ChevronDown class="size-3 text-muted-foreground ml-0.5" />
+          <ChevronDown class="size-3 text-muted-foreground ml-0.5" aria-hidden="true" />
         {/if}
       </Button>
     {/if}
@@ -102,7 +102,7 @@
     {/if}
   </div>
   {#if advanced && advancedOpen}
-    <div id={advancedPanelId} class="svadmin-filter-toolbar-advanced rounded-lg border border-border/60 bg-muted/20 p-3" aria-hidden="false">
+    <div id={advancedPanelId} role="region" aria-label={advancedLabel} class="svadmin-filter-toolbar-advanced rounded-lg border border-border/60 bg-muted/20 p-3" aria-hidden="false">
       {@render advanced()}
     </div>
   {/if}

package/dist/components/content/MetricBlock.svelte

@@ -30,15 +30,15 @@
   };
 </script>
 
-<div data-svadmin-metric-card class={'min-w-0 rounded-lg border border-border bg-card p-4 shadow-sm ' + className}>
+<div data-svadmin-metric-card role="region" aria-label={label} class={'min-w-0 rounded-lg border border-border bg-card p-4 shadow-sm ' + className}>
   <div class="flex items-start justify-between gap-3">
     <p class="text-sm text-muted-foreground">{label}</p>
-    {#if icon}<span class="text-muted-foreground">{@render icon()}</span>{/if}
+    {#if icon}<span class="text-muted-foreground" aria-hidden="true">{@render icon()}</span>{/if}
   </div>
   {#if loading}
     <Skeleton class="mt-3 h-8 w-24" />
   {:else}
-    <p class="mt-2 truncate text-2xl font-semibold tracking-normal text-foreground">{value}</p>
-    {#if detail || trend}<div class="mt-2 flex flex-wrap gap-2 text-xs">{#if trend}<span class={'font-medium ' + trendClass[trendTone]}>{trend}</span>{/if}{#if detail}<span class="text-muted-foreground">{detail}</span>{/if}</div>{/if}
+    <p class="mt-2 truncate text-2xl font-semibold tracking-normal text-foreground tabular-nums">{value}</p>
+    {#if detail || trend}<div class="mt-2 flex flex-wrap gap-2 text-xs">{#if trend}<span class={'font-medium tabular-nums ' + trendClass[trendTone]}>{trend}</span>{/if}{#if detail}<span class="text-muted-foreground">{detail}</span>{/if}</div>{/if}
   {/if}
 </div>

package/dist/components/content/OtpInput.svelte

@@ -1,22 +1,76 @@
 <script lang="ts">
   import { Input } from '../ui/input/index.js';
-  interface Props { value?: string[]; length?: number; disabled?: boolean; 'aria-label'?: string; class?: string; }
-  let { value = $bindable<string[]>([]), length = 6, disabled = false, 'aria-label': ariaLabel = 'One-time password', class: className = '' }: Props = $props();
+  interface Props {
+    value?: string[];
+    length?: number;
+    disabled?: boolean;
+    'aria-label'?: string;
+    class?: string;
+  }
+  let {
+    value = $bindable<string[]>([]),
+    length = 6,
+    disabled = false,
+    'aria-label': ariaLabel = 'One-time password',
+    class: className = '',
+  }: Props = $props();
+
   const slots = $derived(Array.from({ length }, (_, index) => index));
+
   function updateDigit(event: Event, index: number) {
     const input = event.currentTarget as HTMLInputElement;
     const digit = input.value.replace(/\D/g, '').slice(-1);
     const next = [...value];
+    while (next.length < length) next.push('');
     next[index] = digit;
     value = next;
     if (digit && index < length - 1) {
-      const sibling = input.parentElement?.querySelectorAll('input')[index + 1] as HTMLInputElement | undefined;
+      const inputs = input.parentElement?.querySelectorAll('input');
+      const sibling = inputs?.[index + 1] as HTMLInputElement | undefined;
       sibling?.focus();
     }
   }
+
+  function handleKeydown(event: KeyboardEvent, index: number) {
+    const input = event.currentTarget as HTMLInputElement;
+    if (event.key === 'Backspace' && !input.value && index > 0) {
+      const inputs = input.parentElement?.querySelectorAll('input');
+      const prev = inputs?.[index - 1] as HTMLInputElement | undefined;
+      prev?.focus();
+    }
+  }
+
+  function handlePaste(event: ClipboardEvent) {
+    event.preventDefault();
+    const pasted = event.clipboardData?.getData('text/plain') ?? '';
+    const digits = pasted.replace(/\D/g, '').slice(0, length).split('');
+    if (digits.length === 0) return;
+    const next = [...value];
+    while (next.length < length) next.push('');
+    digits.forEach((digit, i) => {
+      next[i] = digit;
+    });
+    value = next;
+    const targetIndex = Math.min(digits.length, length - 1);
+    const inputs = (event.currentTarget as HTMLElement).parentElement?.querySelectorAll('input');
+    inputs?.[targetIndex]?.focus();
+  }
 </script>
+
 <div class={'flex justify-center gap-2 ' + className} role="group" aria-label={ariaLabel}>
   {#each slots as index (index)}
-    <Input class="size-12 text-center text-lg font-semibold" value={value[index] ?? ''} maxlength={1} inputmode="numeric" pattern="[0-9]*" aria-label={ariaLabel + ' digit ' + (index + 1)} {disabled} oninput={(event) => updateDigit(event, index)} />
+    <Input
+      class="size-12 text-center text-lg font-semibold tabular-nums"
+      value={value[index] ?? ''}
+      maxlength={1}
+      inputmode="numeric"
+      pattern="[0-9]*"
+      autocomplete="one-time-code"
+      aria-label={ariaLabel + ' digit ' + (index + 1)}
+      {disabled}
+      oninput={(event) => updateDigit(event, index)}
+      onkeydown={(event) => handleKeydown(event, index)}
+      onpaste={handlePaste}
+    />
   {/each}
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.59.0",
+  "version": "0.60.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [