@svadmin/ui 0.58.0 → 0.60.0

package/dist/components/AICommandBar.svelte

@@ -111,6 +111,7 @@
 
 <Dialog.Dialog bind:open onOpenChange={(v: boolean) => !v && close()}>
   <Dialog.DialogContent class="overflow-hidden p-0 sm:max-w-[600px] border-none shadow-2xl">
+    <Dialog.DialogTitle class="sr-only">{i18n.t('common.actions')}</Dialog.DialogTitle>
     <Command.Root
       shouldFilter={!aiMode}
       class="flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground [&_[data-command-group-heading]]:text-muted-foreground [&_[data-command-group-heading]]:px-2 [&_[data-command-group-heading]]:py-1.5 [&_[data-command-group-heading]]:text-xs [&_[data-command-group-heading]]:font-semibold [&_[data-command-group-heading]]:uppercase [&_[data-command-group-heading]]:tracking-wider"

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

@@ -76,6 +76,7 @@
   import * as DropdownMenu from './ui/dropdown-menu/index.js';
   import * as PaginationUI from './ui/pagination/index.js';
   import * as ContextMenu from './ui/context-menu/index.js';
+  import * as Select from './ui/select/index.js';
   import {
     Plus, Pencil, Trash2,
     Search, Download, ChevronDown, ChevronUp, SlidersHorizontal, Filter as FilterIcon,
@@ -87,6 +88,7 @@
   import TooltipButton from './TooltipButton.svelte';
   import InlineEdit from './InlineEdit.svelte';
   import DraggableHeader from './DraggableHeader.svelte';
+  import DataState from './content/DataState.svelte';
   import type { Snippet } from 'svelte';
 
   const i18n = useTranslation();
@@ -1097,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}
@@ -1119,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
@@ -1141,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}
@@ -1157,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}
@@ -1172,17 +1174,17 @@
                 <div class="space-y-1">
                   <label class="text-xs text-muted-foreground" for="filter-{field.key}">{field.label}</label>
                   {#if field.type === "select" && field.options}
-                    <select
+                    <Select.Root
                       id="filter-{field.key}"
-                      class="h-9 text-sm w-full font-normal flex w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                      class="h-9 text-sm"
                       value={filterValues[field.key] ?? ""}
-                      onchange={(e) => setFilterValue(field.key, e.currentTarget.value)}
+                      onchange={(e) => setFilterValue(field.key, (e.currentTarget as HTMLSelectElement).value)}
                     >
                       <option value="">{i18n.t("common.all")}</option>
                       {#each field.options as opt, _i (_i)}
                         <option value={opt.value}>{opt.label}</option>
                       {/each}
-                    </select>
+                    </Select.Root>
                   {:else}
                     <Input
                       id="filter-{field.key}"
@@ -1213,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}
 
@@ -1222,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>
@@ -1275,12 +1277,12 @@
             </div>
             <div class="space-y-1">
               <label class="text-xs text-muted-foreground" for="saved-list-view">{i18n.t("common.currentView")}</label>
-              <select
+              <Select.Root
                 id="saved-list-view"
-                class="h-9 w-full rounded-md border border-input bg-background px-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                class="h-9 w-full"
                 value={activeSavedViewId ?? ""}
                 onchange={(event) => {
-                  const id = event.currentTarget.value;
+                  const id = (event.currentTarget as HTMLSelectElement).value;
                   const view = savedViews.find((candidate) => candidate.id === id);
                   if (view) applySavedView(view);
                   else {
@@ -1293,7 +1295,7 @@
                 {#each savedViews as view (view.id)}
                   <option value={view.id}>{view.name}</option>
                 {/each}
-              </select>
+              </Select.Root>
             </div>
             <div class="flex gap-2">
               <Input
@@ -1409,9 +1411,11 @@
         {/each}
       </div>
     {:else if query.error}
-      <div class="flex h-64 items-center justify-center text-destructive text-sm">
-        {i18n.t('common.loadFailed', { message: (query.error as Error).message })}
-      </div>
+      <DataState
+        state="error"
+        description={i18n.t('common.loadFailed', { message: (query.error as Error).message })}
+        retry={() => listResult.refetch()}
+      />
     {:else}
       <div in:fade={{ duration: 150 }}>
         <!-- Desktop Table (hidden on mobile) -->
@@ -1475,7 +1479,7 @@
             {/each}
           </Table.Header>
           <Table.Body>
-            {#each tableView.rows as row, _i (_i)}
+            {#each tableView.rows as row (row.id)}
               {@const record = row.original}
               {@const id = record[primaryKey] as string | number}
               {@const visibleCells = row_getVisibleCells(row).filter((cell) => isColumnVisible(cell.column.id))}
@@ -1702,7 +1706,7 @@
               </div>
               <!-- Card fields -->
               <div class="space-y-2">
-                {#each visibleFields.filter((field) => isColumnVisible(field.key)).slice(0, 6) as field, _i (_i)}
+                {#each visibleFields.filter((field) => isColumnVisible(field.key)).slice(0, 6) as field (field.key)}
                   {@const value = record[field.key]}
                   <div class="flex items-start justify-between gap-4">
                     <span class="text-xs font-medium text-muted-foreground shrink-0">{field.label}</span>
@@ -1737,7 +1741,7 @@
               {#if emptyState}
                 {@render emptyState()}
               {:else}
-                {i18n.t('common.noData')}
+                <DataState state="empty" class="border-0 bg-transparent px-2 py-4" />
               {/if}
             </div>
           {/each}
@@ -1750,12 +1754,13 @@
   {#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>
-      <select
-        class="h-8 w-[70px] shrink-0 px-1 py-1 flex items-center justify-between rounded-md border border-input bg-background text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+      <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 tabular-nums"
         value={String(pagination.pageSize ?? 10)}
         onchange={(e) => {
-          const size = Number((e.target as HTMLSelectElement).value);
+          const size = Number((e.currentTarget as HTMLSelectElement).value);
           if (!isNaN(size)) {
             markSavedViewDirty();
             pagination = { ...pagination, pageSize: size, current: 1 };
@@ -1766,7 +1771,7 @@
         <option value="20">20</option>
         <option value="50">50</option>
         <option value="100">100</option>
-      </select>
+      </Select.Root>
     </div>
     <PaginationUI.Root>
       <PaginationUI.Content>
@@ -1782,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/CommandPalette.svelte

@@ -45,6 +45,7 @@
 
 <Dialog.Dialog bind:open>
   <Dialog.DialogContent class="overflow-hidden p-0 sm:max-w-[560px]">
+    <Dialog.DialogTitle class="sr-only">{i18n.t('common.search')}</Dialog.DialogTitle>
     <Command.Root class="flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground [&_[data-command-group-heading]]:text-muted-foreground [&_[data-command-group-heading]]:px-2 [&_[data-command-group-heading]]:py-1.5 [&_[data-command-group-heading]]:text-xs [&_[data-command-group-heading]]:font-semibold [&_[data-command-group-heading]]:uppercase [&_[data-command-group-heading]]:tracking-wider">
       <div class="flex items-center border-b px-3" data-cmdk-input-wrapper="">
         <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />

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/EmptyState.svelte

@@ -17,8 +17,10 @@
 </script>
 
 <div
-  class="flex flex-col items-center justify-center rounded-lg bg-card/50 px-8 py-10 text-center shadow-sm"
-  in:scale={{ start: 0.95, duration: 250, opacity: 0 }}
+  class="flex flex-col items-center justify-center rounded-lg bg-card/50 px-8 py-10 text-center shadow-xs"
+  in:scale={{ start: 0.95, duration: 200, opacity: 0 }}
+  role="status"
+  aria-live="polite"
 >
   <div class="h-20 w-20 rounded-full bg-muted flex items-center justify-center mb-4">
     <PackageOpen class="h-10 w-10 text-muted-foreground" />

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/Layout.svelte

@@ -170,7 +170,14 @@
     </div>
 
     <!-- Mobile sidebar via Sheet -->
-    <Sheet.Root bind:open={mobileMenuOpen} side="left">
+    <Sheet.Root
+      bind:open={mobileMenuOpen}
+      side="left"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={`${layoutScope}-mobile-navigation-title`}
+    >
+      <Sheet.Title id={`${layoutScope}-mobile-navigation-title`} class="sr-only">{title}</Sheet.Title>
       <div class="md:hidden">
         <Sidebar collapsed={false} {identity} {title} {menu} {routeMode} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
       </div>

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/StatsCard.svelte

@@ -60,11 +60,13 @@
         <p class="text-xl font-mono font-semibold text-foreground tracking-tight">{value}</p>
         {#if trend}
           <span
-            class="text-xs font-medium {trend.value >= 0 ? 'text-success' : 'text-destructive'}"
+            class="text-xs font-medium inline-flex items-center gap-0.5 {trend.value >= 0 ? 'text-success' : 'text-destructive'}"
+            aria-label="{trend.value >= 0 ? '上升' : '下降'} {Math.abs(trend.value)}%"
           >
-            {trend.value >= 0 ? '↑' : '↓'}{Math.abs(trend.value)}%
+            <span aria-hidden="true">{trend.value >= 0 ? '↑' : '↓'}</span>
+            <span>{Math.abs(trend.value)}%</span>
             {#if trend.label}
-              <span class="text-muted-foreground">{trend.label}</span>
+              <span class="text-muted-foreground ml-0.5">{trend.label}</span>
             {/if}
           </span>
         {/if}

package/dist/components/TaskQueueDrawer.svelte

@@ -227,10 +227,19 @@
   {/if}
 </Button>
 
-<Sheet.Root bind:open side="right" class="w-full max-w-6xl border-l border-border bg-card p-0" onClose={() => open = false}>
+<Sheet.Root
+  bind:open
+  side="right"
+  class="w-full max-w-6xl border-l border-border bg-card p-0"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="svadmin-task-queue-title"
+  onClose={() => open = false}
+>
   <Sheet.Content class="h-full gap-0 p-0">
     <div class="flex h-full flex-col">
       <div class="border-b border-border bg-muted/30 px-4 py-3">
+        <Sheet.Title id="svadmin-task-queue-title" class="sr-only">{resolvedTitle}</Sheet.Title>
         <div class="flex flex-wrap items-center gap-2">
           <ListTodo class="h-5 w-5 text-muted-foreground" />
           <h2 class="text-sm font-semibold">{resolvedTitle}</h2>

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/dist/components/ui/input/input.svelte

@@ -32,7 +32,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input 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:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent px-3 py-1.5 text-base transition-colors file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input 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:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent p-1 pr-3 text-xs md:text-sm text-muted-foreground transition-colors file:mr-3 file:inline-flex file:h-7 file:cursor-pointer file:items-center file:rounded-md file:border file:border-border/60 file:bg-muted file:px-2.5 file:text-xs file:font-medium file:text-foreground file:transition-colors hover:file:bg-muted/80 focus-visible:ring-3 aria-invalid:ring-3 placeholder:text-muted-foreground w-full min-w-0 outline-none cursor-pointer disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		type="file"
@@ -44,7 +44,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input 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:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent px-3 py-1.5 text-base transition-colors file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input 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:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent px-3 py-1.5 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		{type}

package/package.json

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