@svadmin/ui 0.59.0 → 0.60.1

package/dist/app.css

@@ -596,13 +596,11 @@ main {
   50% { opacity: 0; }
 }
 
-/* Handle copied state for dynamically injected buttons */
+/* Handle copied state for dynamically injected buttons.
+ * The check icon itself is swapped in by MarkdownRenderer (createCheckIcon)
+ * with stroke="currentColor" so it inherits this semantic token color. */
 .copy-btn[data-copied-id] {
-  color: #10b981; /* Tailwind emerald-500 */
-}
-.copy-btn[data-copied-id] svg {
-  /* Swap to Check icon */
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2310b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
+  color: var(--success);
 }
 
 /* ChatDialog Styles */

package/dist/app.theme.css

@@ -595,13 +595,11 @@ main {
   50% { opacity: 0; }
 }
 
-/* Handle copied state for dynamically injected buttons */
+/* Handle copied state for dynamically injected buttons.
+ * The check icon itself is swapped in by MarkdownRenderer (createCheckIcon)
+ * with stroke="currentColor" so it inherits this semantic token color. */
 .copy-btn[data-copied-id] {
-  color: #10b981; /* Tailwind emerald-500 */
-}
-.copy-btn[data-copied-id] svg {
-  /* Swap to Check icon */
-  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2310b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
+  color: var(--success);
 }
 
 /* ChatDialog Styles */

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

@@ -172,7 +172,7 @@
           {#if loading}<DataState state="loading" />{:else if error}<DataState state="error" description={error} retry={loadCredentials} />{:else}<ApiKeyList class="rounded-none border-0" keys={keys.map((key) => ({ id: key.id, name: key.name, prefix: key.prefix, createdAt: new Date(key.createdAt).toLocaleString(), lastUsedAt: key.lastUsedAt ? new Date(key.lastUsedAt).toLocaleString() : undefined, permissions: key.permissions }))} stateTitle={i18n.t('api.noKeys')} stateDescription={credentialProvider ? i18n.t('api.generateDesc') : (isZh ? '配置 CredentialProvider 后可管理真实凭据。' : 'Configure CredentialProvider to manage real credentials.')} onrevoke={credentialProvider ? (key) => revokeKey(key.id) : undefined} />{/if}
         </SettingsGroup>
         <SettingsGroup title={i18n.t('api.webhooks')} description={i18n.t('api.webhooksDesc')} bodyClass="space-y-5">
-          <form class="grid min-w-0 gap-4 md:grid-cols-2" onsubmit={handleAddWebhook}><div class="space-y-2"><Label for="webhook-name">{i18n.t('api.webhookName')}</Label><Input id="webhook-name" bind:value={newWebhookName} placeholder="Order Events" disabled={!credentialProvider || submitting} /></div><div class="space-y-2"><Label for="webhook-url">{i18n.t('api.webhookUrl')}</Label><Input id="webhook-url" type="url" bind:value={newWebhookUrl} placeholder="https://api.example.com/hooks" disabled={!credentialProvider || submitting} /></div><div class="space-y-2"><Label for="webhook-event">{i18n.t('api.eventType')}</Label><select id="webhook-event" bind:value={newWebhookEvent} disabled={!credentialProvider || submitting} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50"><option value="resource.created">resource.created</option><option value="resource.updated">resource.updated</option><option value="resource.deleted">resource.deleted</option><option value="auth.login">auth.login</option></select></div><div class="flex items-end"><Button type="submit" class="w-full" disabled={!credentialProvider || submitting || !newWebhookName.trim() || !newWebhookUrl.trim()}><Plus class="size-4" />{i18n.t('api.addWebhook')}</Button></div></form>
+          <form class="grid min-w-0 gap-4 md:grid-cols-2" onsubmit={handleAddWebhook}><div class="space-y-2"><Label for="webhook-name">{i18n.t('api.webhookName')}</Label><Input id="webhook-name" bind:value={newWebhookName} placeholder="Order Events" disabled={!credentialProvider || submitting} /></div><div class="space-y-2 md:col-span-2"><Label for="webhook-url">{i18n.t('api.webhookUrl')}</Label><Input id="webhook-url" type="url" bind:value={newWebhookUrl} placeholder="https://api.example.com/hooks" disabled={!credentialProvider || submitting} /></div><div class="space-y-2"><Label for="webhook-event">{i18n.t('api.eventType')}</Label><select id="webhook-event" bind:value={newWebhookEvent} disabled={!credentialProvider || submitting} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50"><option value="resource.created">resource.created</option><option value="resource.updated">resource.updated</option><option value="resource.deleted">resource.deleted</option><option value="auth.login">auth.login</option></select></div><div class="flex items-end"><Button type="submit" class="w-full" disabled={!credentialProvider || submitting || !newWebhookName.trim() || !newWebhookUrl.trim()}><Plus class="size-4" />{i18n.t('api.addWebhook')}</Button></div></form>
           {#if webhooks.length === 0}<DataState state="empty" title={i18n.t('api.noWebhooks')} description={credentialProvider ? i18n.t('api.webhooksDesc') : (isZh ? '配置 CredentialProvider 后可管理真实 Webhook。' : 'Configure CredentialProvider to manage real webhooks.')} />{:else}<div class="divide-y divide-border border-t border-border">{#each webhooks as hook (hook.id)}<div class="flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between"><div class="min-w-0"><p class="text-sm font-medium text-foreground">{hook.name}</p><p class="truncate font-mono text-xs text-muted-foreground">{hook.url}</p></div><div class="flex items-center justify-between gap-3 sm:justify-end"><span class="rounded bg-muted px-2 py-1 font-mono text-xs text-muted-foreground">{hook.eventType}</span><Button variant="ghost" size="icon-sm" onclick={() => deleteWebhook(hook.id)} aria-label={i18n.t('common.delete') + ' ' + hook.name}><Trash2 class="size-4" /></Button></div></div>{/each}</div>{/if}
         </SettingsGroup>
       </div>

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

@@ -81,7 +81,7 @@
                   onclick={() => copyToClipboard(`${v.key}=`, v.key)}
                 >
                   {#if copied[v.key]}
-                    <CheckCircle class="h-3.5 w-3.5 text-green-500" />
+                    <CheckCircle class="h-3.5 w-3.5 text-success" />
                   {:else}
                     <Copy class="h-3.5 w-3.5" />
                   {/if}
@@ -103,7 +103,7 @@
                 onclick={copyAll}
               >
                 {#if copied['__all__']}
-                  <CheckCircle class="h-3.5 w-3.5 text-green-500" />
+                  <CheckCircle class="h-3.5 w-3.5 text-success" />
                   <span class="text-xs">{i18n.t('common.copied')}</span>
                 {:else}
                   <Copy class="h-3.5 w-3.5" />

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

@@ -194,8 +194,8 @@
           <span>Generated ResourceDefinition</span>
           <Button variant="ghost" size="sm" class="h-6 text-xs gap-1" onclick={copyCode}>
             {#if copied}
-              <Check class="h-3 w-3 text-emerald-500" />
-              <span class="text-emerald-500">Copied!</span>
+              <Check class="h-3 w-3 text-success" />
+              <span class="text-success">Copied!</span>
             {:else}
               <Copy class="h-3 w-3" />
               Copy

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-warning" 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/MarkdownRenderer.svelte

@@ -106,12 +106,35 @@
     const id = Math.random().toString(36);
     copiedBlock = id;
     button.setAttribute("data-copied-id", id);
+    // Swap to a semantic check icon; color comes from the .copy-btn CSS token.
+    button.querySelector("svg")?.replaceWith(createCheckIcon());
 
     setTimeout(() => {
       if (copiedBlock === id) copiedBlock = null;
     }, 2000);
   }
 
+  function createCheckIcon(): SVGSVGElement {
+    const svgNamespace = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(svgNamespace, "svg");
+    svg.setAttribute("width", "14");
+    svg.setAttribute("height", "14");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    svg.setAttribute("aria-hidden", "true");
+    svg.classList.add("lucide", "lucide-check");
+
+    const polyline = document.createElementNS(svgNamespace, "polyline");
+    polyline.setAttribute("points", "20 6 9 17 4 12");
+    svg.appendChild(polyline);
+
+    return svg;
+  }
+
   function createCopyIcon(): SVGSVGElement {
     const svgNamespace = "http://www.w3.org/2000/svg";
     const svg = document.createElementNS(svgNamespace, "svg");
@@ -161,7 +184,7 @@
 
         const header = document.createElement("div");
         header.className =
-          "flex items-center justify-between px-4 py-2 text-xs text-zinc-400 border-b border-zinc-800";
+          "flex items-center justify-between px-4 py-2 text-xs text-background/70 border-b border-background/15";
 
         const lang =
           Array.from(pre.querySelector("code")?.classList || [])
@@ -173,7 +196,7 @@
         const copyButton = document.createElement("button");
         copyButton.type = "button";
         copyButton.className =
-          "copy-btn hover:text-white transition-colors flex items-center gap-1";
+          "copy-btn hover:text-background transition-colors flex items-center gap-1";
         copyButton.setAttribute("aria-label", "Copy code");
         copyButton.appendChild(createCopyIcon());
 

package/dist/components/PermissionMatrix.svelte

@@ -67,7 +67,7 @@
     
     <!-- Toast Feedback -->
     {#if message}
-      <div class={`px-4 py-2 rounded-lg text-sm font-medium shadow-sm transition-all flex items-center gap-2 ${messageType === 'success' ? 'bg-green-500/10 text-green-600 dark:text-green-400 ring-1 ring-green-500/20' : 'bg-destructive/10 text-destructive ring-1 ring-destructive/20'}`}>
+      <div class={`px-4 py-2 rounded-lg text-sm font-medium shadow-sm transition-all flex items-center gap-2 ${messageType === 'success' ? 'bg-success/10 text-success ring-1 ring-success/20' : 'bg-destructive/10 text-destructive ring-1 ring-destructive/20'}`}>
         {#if messageType === 'success'}
            <Check class="w-4 h-4" />
         {:else}

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

@@ -285,12 +285,14 @@
   });
 </script>
 
-{#snippet languageMenu()}
+{#snippet languageMenu(collapsed: boolean)}
   <select
     aria-label={i18n.t('common.switchLanguage')}
     value={i18n.locale}
     onchange={(event) => selectLocale((event.target as HTMLSelectElement).value)}
-    class="h-8 w-14 rounded-md border border-border bg-sidebar px-1 text-[11px] font-semibold text-sidebar-foreground/70 outline-none focus:ring-2 focus:ring-ring"
+    class={collapsed
+      ? 'h-8 w-auto min-w-0 max-w-full appearance-none rounded-md border border-border bg-sidebar px-1 text-center text-[10px] font-semibold text-sidebar-foreground/70 outline-none focus:ring-2 focus:ring-ring'
+      : 'h-8 w-auto min-w-0 max-w-full rounded-md border border-border bg-sidebar px-1.5 text-[11px] font-semibold text-sidebar-foreground/70 outline-none focus:ring-2 focus:ring-ring'}
   >
     {#each i18n.getAvailableLocales() as locale (locale)}
       <option value={locale}>{localeName(locale)}</option>
@@ -425,6 +427,8 @@
               class="h-3 w-3 rounded-full ring-1 ring-offset-1 ring-offset-sidebar"
               style="background-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#6366f1'}; --tw-ring-color: {getColorThemes().find(c => c.id === getColorTheme())?.color ?? '#6366f1'}"
             ></span>
+            <!-- The dot previews the user-selected runtime theme swatch; the hex
+                 fallback only covers the case where no registered theme matches. -->
           </button>
           {#if colorPickerOpen}
             <div class="absolute bottom-full left-0 mb-1 z-50 w-40 rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95">
@@ -468,7 +472,7 @@
         </div>
         <div class="mt-1 flex items-center justify-between px-1">
           <div class="flex items-center gap-0.5">
-            {@render languageMenu()}
+            {@render languageMenu(false)}
             <TooltipButton tooltip={i18n.t('common.toggleTheme')} variant="ghost" size="icon-sm" onclick={toggleTheme} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
               {#if getResolvedTheme() === 'dark'}
                 <Sun class="h-3.5 w-3.5" />
@@ -486,8 +490,8 @@
         </div>
       </div>
     {:else if collapsed}
-      <div class="flex flex-col items-center gap-0.5 px-2 py-3">
-        {@render languageMenu()}
+      <div class="flex flex-col items-center gap-0.5 px-1 py-3">
+        {@render languageMenu(true)}
         <Tooltip.Root>
           <Tooltip.Trigger>
             {#snippet child({ props }: { props: Record<string, unknown> })}
@@ -525,7 +529,7 @@
       </div>
     {:else}
       <div class="flex justify-center gap-1 p-3">
-        {@render languageMenu()}
+        {@render languageMenu(false)}
         <TooltipButton tooltip={i18n.t('common.toggleTheme')} variant="ghost" size="icon" onclick={toggleTheme} class="h-8 w-8 rounded-md text-sidebar-foreground/50 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground">
           {#if getResolvedTheme() === 'dark'}
             <Sun class="h-3.5 w-3.5" />

package/dist/components/TaskStatusBadge.svelte

@@ -41,7 +41,7 @@
           label: translateStatus(normalizedStatus),
           variant: 'secondary' as const,
           icon: CheckCircle2,
-          iconClass: 'text-green-600 dark:text-green-400',
+          iconClass: 'text-success',
         };
       case 'failed':
         return {

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/fields/AvatarField.svelte

@@ -45,14 +45,14 @@
   };
 
   const statusColors: Record<AvatarStatus, string> = {
-    online: 'bg-emerald-500',
-    success: 'bg-emerald-500',
-    busy: 'bg-rose-500',
-    error: 'bg-rose-500',
-    warning: 'bg-amber-500',
-    away: 'bg-amber-500',
-    offline: 'bg-slate-400',
-    neutral: 'bg-slate-400',
+    online: 'bg-success',
+    success: 'bg-success',
+    busy: 'bg-destructive',
+    error: 'bg-destructive',
+    warning: 'bg-warning',
+    away: 'bg-warning',
+    offline: 'bg-muted-foreground',
+    neutral: 'bg-muted-foreground',
   };
 
   function getInitials(value?: string | null): string {

package/dist/components/fields/JsonField.svelte

@@ -59,7 +59,7 @@
         aria-label={i18n.t('common.copy')}
       >
         {#if copied}
-          <Check class="h-3 w-3 text-emerald-500" />
+          <Check class="h-3 w-3 text-success" />
         {:else}
           <Copy class="h-3 w-3" />
         {/if}

package/dist/components/fields/RatingField.svelte

@@ -63,15 +63,15 @@
 {:else}
   <div class={cn('field-rating inline-flex items-center gap-1.5', className)}>
     <div
-      class="inline-flex items-center gap-0.5 text-amber-500"
+      class="inline-flex items-center gap-0.5 text-warning"
       role="img"
       aria-label={`${numericValue} out of ${normalizedMax}`}
     >
       {#each stars as starType, idx (idx)}
         {#if starType === 'full'}
-          <Star aria-hidden="true" class={cn(sizeClasses[size].icon, 'fill-amber-500 text-amber-500')} />
+          <Star aria-hidden="true" class={cn(sizeClasses[size].icon, 'fill-warning text-warning')} />
         {:else if starType === 'half'}
-          <StarHalf aria-hidden="true" class={cn(sizeClasses[size].icon, 'fill-amber-500 text-amber-500')} />
+          <StarHalf aria-hidden="true" class={cn(sizeClasses[size].icon, 'fill-warning text-warning')} />
         {:else}
           <Star aria-hidden="true" class={cn(sizeClasses[size].icon, 'text-muted-foreground/30')} />
         {/if}

package/dist/components/profile/ProfileVariantSections.svelte

@@ -32,15 +32,16 @@
   ];
   const skills = ['TypeScript', 'Svelte', 'Node.js', 'GraphQL', 'Design Systems', 'Accessibility'];
   const badges: { name: string; Icon: Component; tone: string }[] = [
-    { name: 'Top Contributor', Icon: Medal, tone: 'bg-amber-500/10 text-amber-600' },
-    { name: 'Early Adopter', Icon: Star, tone: 'bg-blue-500/10 text-blue-600' },
-    { name: 'Community Mentor', Icon: Award, tone: 'bg-violet-500/10 text-violet-600' },
-    { name: 'Launch Partner', Icon: Crown, tone: 'bg-emerald-500/10 text-emerald-600' },
+    // Decorative demo tones — use the chart palette, not status tokens.
+    { name: 'Top Contributor', Icon: Medal, tone: 'bg-chart-1/10 text-chart-1' },
+    { name: 'Early Adopter', Icon: Star, tone: 'bg-chart-2/10 text-chart-2' },
+    { name: 'Community Mentor', Icon: Award, tone: 'bg-chart-3/10 text-chart-3' },
+    { name: 'Launch Partner', Icon: Crown, tone: 'bg-chart-4/10 text-chart-4' },
   ];
   const recentUploads: { name: string; size: string; Icon: Component; tone: string }[] = [
-    { name: 'dashboard-spec.fig', size: '4.2 MB', Icon: Image, tone: 'bg-pink-500/10 text-pink-600' },
-    { name: 'release-notes.md', size: '18 KB', Icon: FileText, tone: 'bg-blue-500/10 text-blue-600' },
-    { name: 'assets-bundle.zip', size: '24 MB', Icon: FileArchive, tone: 'bg-amber-500/10 text-amber-600' },
+    { name: 'dashboard-spec.fig', size: '4.2 MB', Icon: Image, tone: 'bg-chart-5/10 text-chart-5' },
+    { name: 'release-notes.md', size: '18 KB', Icon: FileText, tone: 'bg-chart-2/10 text-chart-2' },
+    { name: 'assets-bundle.zip', size: '24 MB', Icon: FileArchive, tone: 'bg-chart-3/10 text-chart-3' },
   ];
   const contributors = ['Mia Torres', 'Chen Wei', 'Ava Novak', 'Liam Ortiz', 'Sofia Petrova', '+8'];
 
@@ -252,7 +253,7 @@
             <p class="text-xs text-muted-foreground">{item.label}</p>
             <div class="mt-1 flex items-baseline gap-2">
               <span class="text-xl font-bold text-foreground">{item.value}</span>
-              <span class="flex items-center gap-0.5 text-xs font-medium text-green-600"><TrendingUp class="h-3 w-3" />{item.delta}</span>
+              <span class="flex items-center gap-0.5 text-xs font-medium text-success"><TrendingUp class="h-3 w-3" />{item.delta}</span>
             </div>
           </Card.CardContent>
         </Card.Card>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.59.0",
+  "version": "0.60.1",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -39,7 +39,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.42.0",
+    "@svadmin/core": "^0.42.1",
     "@tanstack/svelte-query": "^6.1.38",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.22.0",