@svadmin/ui 0.68.1 → 0.69.0

package/dist/components/content/AuditTimeline.svelte

@@ -33,51 +33,51 @@
   }: Props = $props();
 
   const dotClass: Record<Status, string> = {
-    success: 'bg-success border-success/30 text-success',
-    warning: 'bg-warning border-warning/30 text-warning-foreground',
-    danger: 'bg-destructive border-destructive/30 text-destructive',
-    info: 'bg-primary border-primary/30 text-primary',
-    neutral: 'bg-muted-foreground border-border text-muted-foreground',
+    success: 'svadmin-u-3355648fe22b svadmin-u-18a6e7a36f29 svadmin-u-76747e5e02ff',
+    warning: 'svadmin-u-a486cacb3a15 svadmin-u-2f960aa0c478 svadmin-u-3a4ff758c2ab',
+    danger: 'svadmin-u-fb1b0d05046d svadmin-u-9d5d8b4711b4 svadmin-u-811148b13d1e',
+    info: 'svadmin-u-75b1bec3ea0e svadmin-u-05f954a846d6 svadmin-u-20aaf08a7ed1',
+    neutral: 'svadmin-u-43ed7af3fc8a svadmin-u-18049387f0af svadmin-u-bfa603190748',
   };
 </script>
 
-<div class={cn('space-y-4', className)}>
+<div class={cn('svadmin-u-3e7ce58d64fa', className)}>
   {#if items.length === 0}
     <DataState state="empty" title={emptyTitle} description={emptyDescription} />
   {:else}
-    <div class="relative pl-6 space-y-6 before:absolute before:left-2 before:top-2 before:bottom-2 before:w-0.5 before:bg-border">
+    <div class="svadmin-u-d89972fe17d6 svadmin-u-9079b62ef1cb svadmin-u-b3542e058833 svadmin-u-884dada40b17 svadmin-u-699f6fc4b3e0 svadmin-u-37f34e63818d svadmin-u-f76c7493f919 svadmin-u-8f848a57f066 svadmin-u-3242dfaf010c">
       {#each items as item (item.id)}
         {@const statusTone = item.status ?? 'info'}
-        <div class="relative flex flex-col gap-1 text-sm group">
+        <div class="svadmin-u-d89972fe17d6 svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-44ee8ba0a421 svadmin-u-fc7473ca09eb group">
           <span
             class={cn(
-              'absolute -left-6 top-1 flex h-4 w-4 items-center justify-center rounded-full border-2 bg-background transition-transform group-hover:scale-110',
-              item.status ? dotClass[statusTone] : 'border-border bg-muted'
+              'svadmin-u-da4dbfbc4fdc svadmin-u-e9cbeabe7285 svadmin-u-c55dcda26eec svadmin-u-60fbb7713999 svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-ac204c108886 svadmin-u-65935df577ba svadmin-u-e6f9e383a762 svadmin-u-eadef238231e svadmin-u-0b9c5172dd56',
+              item.status ? dotClass[statusTone] : 'svadmin-u-18049387f0af svadmin-u-2ef11f1cb219'
             )}
             aria-hidden="true"
           ></span>
 
-          <div class="flex flex-wrap items-center justify-between gap-2">
-            <div class="flex items-center gap-2">
-              <span class="font-medium text-foreground">{item.title}</span>
+          <div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-77a2a20e90d4">
+            <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
+              <span class="svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{item.title}</span>
               {#if item.actor}
-                <span class="text-xs text-muted-foreground">by {item.actor}</span>
+                <span class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">by {item.actor}</span>
               {/if}
               {#if item.status}
-                <StatusBadge status={item.status} label={item.tag ?? item.status} class="text-[11px] py-0 h-4" />
+                <StatusBadge status={item.status} label={item.tag ?? item.status} class="svadmin-u-d058ca6de60f svadmin-u-68ecb30dbec6 svadmin-u-11e59c6d5f6b" />
               {:else if item.tag}
-                <span class="inline-flex items-center rounded border border-border px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground bg-muted">
+                <span class="svadmin-u-52083e7da442 svadmin-u-3960ffc248d9 svadmin-u-07389a777c1f svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-45d828117213 svadmin-u-465609a240a8 svadmin-u-d058ca6de60f svadmin-u-2689f3958069 svadmin-u-bfa603190748 svadmin-u-2ef11f1cb219">
                   {item.tag}
                 </span>
               {/if}
             </div>
             {#if item.timestamp}
-              <time class="text-xs tabular-nums text-muted-foreground font-mono">{item.timestamp}</time>
+              <time class="svadmin-u-359090c2d529 svadmin-u-3032cae0badb svadmin-u-bfa603190748 svadmin-u-0e65706bcccd">{item.timestamp}</time>
             {/if}
           </div>
 
           {#if item.description}
-            <p class="text-xs text-muted-foreground leading-relaxed whitespace-pre-wrap">{item.description}</p>
+            <p class="svadmin-u-359090c2d529 svadmin-u-bfa603190748 svadmin-u-6b189c6edadb svadmin-u-a2edcb1a3a6b">{item.description}</p>
           {/if}
         </div>
       {/each}

package/dist/components/content/ContentPageHeader.svelte

@@ -11,21 +11,21 @@
   let { title, eyebrow, description, breadcrumbs = [], actions, class: className = '' }: Props = $props();
 </script>
 
-<header class={'space-y-3 ' + className} data-svadmin-page-header>
+<header class={'svadmin-u-6ed543e2fbbb ' + className} data-svadmin-page-header>
   {#if breadcrumbs.length > 0}
-    <nav aria-label="Breadcrumb" class="flex items-center gap-2 text-xs text-muted-foreground">
+    <nav aria-label="Breadcrumb" class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-359090c2d529 svadmin-u-bfa603190748">
       {#each breadcrumbs as crumb, index (crumb)}
         {#if index > 0}<span aria-hidden="true">/</span>{/if}
-        <span class={index === breadcrumbs.length - 1 ? 'text-foreground' : ''}>{crumb}</span>
+        <span class={index === breadcrumbs.length - 1 ? 'svadmin-u-d4108abe6359' : ''}>{crumb}</span>
       {/each}
     </nav>
   {/if}
-  <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div class="min-w-0 space-y-1">
-      {#if eyebrow}<p class="text-xs font-medium text-muted-foreground">{eyebrow}</p>{/if}
-      <h1 class="text-xl font-semibold leading-tight tracking-normal text-foreground">{title}</h1>
-      {#if description}<p class="max-w-2xl text-sm leading-6 text-muted-foreground">{description}</p>{/if}
+  <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-0c3bc98565dd svadmin-u-020ba687fa12 svadmin-u-64cac80d2e9a svadmin-u-3b9871a0bf93">
+    <div class="svadmin-u-7e0b7cdf1a94 svadmin-u-da7c36cd8867">
+      {#if eyebrow}<p class="svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-bfa603190748">{eyebrow}</p>{/if}
+      <h1 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-e9fadafbd4a2 svadmin-u-d9256981a032 svadmin-u-d4108abe6359">{title}</h1>
+      {#if description}<p class="svadmin-u-2cc8041eca99 svadmin-u-fc7473ca09eb svadmin-u-18550d5945ae svadmin-u-bfa603190748">{description}</p>{/if}
     </div>
-    {#if actions}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render actions()}</div>{/if}
+    {#if actions}<div class="svadmin-u-60fbb7713999 svadmin-u-012fbd121f37 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">{@render actions()}</div>{/if}
   </div>
 </header>

package/dist/components/content/ContentPageShell.svelte

@@ -26,14 +26,14 @@
 
   const widthClass = $derived(
     width === 'narrow'
-      ? 'max-w-3xl'
+      ? 'svadmin-u-fa3f7111e53b'
       : width === 'wide'
         ? 'max-w-[92rem]'
         : 'max-w-[74rem]',
   );
 </script>
 
-<div data-svadmin-content-page={pageId} class={'mx-auto w-full ' + widthClass + ' space-y-6 ' + className}>
+<div data-svadmin-content-page={pageId} class={'svadmin-u-0e12dc7de920 svadmin-u-6da6a3c3f741 ' + widthClass + ' svadmin-u-b3542e058833 ' + className}>
   {#if title}<ContentPageHeader {title} {eyebrow} {description} {actions} />{/if}
   {@render children()}
 </div>

package/dist/components/content/DataState.svelte

@@ -41,20 +41,20 @@
 </script>
 
 {#if state === 'loading'}
-  <div class={'space-y-3 rounded-lg border border-border bg-card p-5 ' + className} role="status" aria-live="polite" aria-label={resolvedLoadingLabel} aria-busy="true">
-    <Skeleton class="h-5 w-40" /><Skeleton class="h-4 w-full max-w-md" /><Skeleton class="h-20 w-full" />
+  <div class={'svadmin-u-6ed543e2fbbb svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-c07e54fd1439 ' + className} role="status" aria-live="polite" aria-label={resolvedLoadingLabel} aria-busy="true">
+    <Skeleton class="svadmin-u-cd0d9c512cdc svadmin-u-84789e8a20cd" /><Skeleton class="svadmin-u-11e59c6d5f6b svadmin-u-6da6a3c3f741 svadmin-u-9794ab45094d" /><Skeleton class="svadmin-u-0a769880db93 svadmin-u-6da6a3c3f741" />
   </div>
 {:else if state === 'error' || state === 'forbidden'}
   <Alert.Root variant={state === 'error' ? 'destructive' : 'warning'} class={className}>
-    {#if state === 'error'}<AlertTriangle class="size-4" aria-hidden="true" />{:else}<LockKeyhole class="size-4" aria-hidden="true" />{/if}
+    {#if state === 'error'}<AlertTriangle class="svadmin-u-f7b5fa971871" aria-hidden="true" />{:else}<LockKeyhole class="svadmin-u-f7b5fa971871" 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" aria-hidden="true" />{resolvedRetryLabel}</Button>{/if}
-    {#if action}<div class="mt-3">{@render action()}</div>{/if}
+    {#if retry}<Button variant="outline" size="sm" class="svadmin-u-eccd13ef4f2f" onclick={retry}><RefreshCw class="svadmin-u-783b0d9d1e2c" aria-hidden="true" />{resolvedRetryLabel}</Button>{/if}
+    {#if action}<div class="svadmin-u-eccd13ef4f2f">{@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} 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 class={'svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-a29b7a649c77 svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-f92d02360b8f svadmin-u-a1f611f027dd svadmin-u-ca6bf63030aa ' + className} role="status" aria-live="polite">
+    <Inbox class="svadmin-u-d8f5213f0fe0 svadmin-u-bfa603190748" aria-hidden="true" /><h3 class="svadmin-u-eccd13ef4f2f svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{resolvedTitle}</h3><p class="svadmin-u-b6b02c0ebef6 svadmin-u-2472e9b81a97 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{resolvedDescription}</p>
+    {#if action}<div class="svadmin-u-0ab8667228fd">{@render action()}</div>{/if}
   </div>
 {/if}

package/dist/components/content/DescriptionList.svelte

@@ -40,11 +40,11 @@
   const columnClass = $derived.by(() => {
     switch (columns) {
       case 4:
-        return 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4';
+        return 'svadmin-u-d7c8339810d3 svadmin-u-e00ad81645a2 svadmin-u-9a638cfe8212 svadmin-u-4558bce6d8c0';
       case 3:
-        return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
+        return 'svadmin-u-d7c8339810d3 svadmin-u-e00ad81645a2 svadmin-u-19d9b25e8fae';
       case 2:
-        return 'grid-cols-1 sm:grid-cols-2';
+        return 'svadmin-u-d7c8339810d3 svadmin-u-e00ad81645a2';
       default:
         return 'grid-cols-1';
     }
@@ -52,38 +52,38 @@
 </script>
 
 {#if bordered}
-  <div class={cn('overflow-hidden rounded-lg border border-border bg-card text-foreground', className)}>
-    <dl class={cn('grid divide-y divide-border/60 sm:divide-y-0', columnClass)}>
+  <div class={cn('svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-d4108abe6359', className)}>
+    <dl class={cn('svadmin-u-f3c543ad5fe9 svadmin-u-fa6acbf81d74 svadmin-u-d2c3932343f5 svadmin-u-4d9da416df16', columnClass)}>
       {#each items as item, idx (item.label ? `${item.label}-${idx}` : idx)}
         <div
           class={cn(
-            'flex flex-col border-b border-r border-border/40 last:border-b-0',
-            isHorizontal ? 'sm:flex-row' : '',
+            'svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-65fdbade2025 svadmin-u-5ceb636bd9f3 svadmin-u-6ee2d41e2d2d svadmin-u-b4cf72cd1cd8',
+            isHorizontal ? 'svadmin-u-020ba687fa12' : '',
             spanClass(Math.min(item.span ?? 1, columns)),
           )}
         >
           <dt
             class={cn(
-              'bg-muted/30 font-medium text-muted-foreground shrink-0 border-b sm:border-b-0 sm:border-r border-border/30',
-              isCompact ? 'px-3 py-1.5 text-xs' : 'px-4 py-2.5 text-xs sm:text-sm',
-              isHorizontal ? 'sm:w-1/3' : '',
+              'svadmin-u-2859c861d7de svadmin-u-2689f3958069 svadmin-u-bfa603190748 svadmin-u-012fbd121f37 svadmin-u-65fdbade2025 svadmin-u-a968a4123359 svadmin-u-27165ed73e86 svadmin-u-cdf6e054e5e0',
+              isCompact ? 'svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529' : 'svadmin-u-f0faeb26d656 svadmin-u-e7ee55ac7ffe svadmin-u-359090c2d529 svadmin-u-e2327d142859',
+              isHorizontal ? 'svadmin-u-b03f3c253900' : '',
             )}
           >
             {item.label}
           </dt>
           <dd
             class={cn(
-              'break-words font-medium text-foreground bg-card flex-1 min-w-0',
-              isCompact ? 'px-3 py-1.5 text-xs' : 'px-4 py-2.5 text-xs sm:text-sm',
+              'svadmin-u-170cee3ff4e4 svadmin-u-2689f3958069 svadmin-u-d4108abe6359 svadmin-u-cd0ad9a56558 svadmin-u-36e579c0b41c svadmin-u-7e0b7cdf1a94',
+              isCompact ? 'svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529' : 'svadmin-u-f0faeb26d656 svadmin-u-e7ee55ac7ffe svadmin-u-359090c2d529 svadmin-u-e2327d142859',
             )}
           >
             {#if item.href}
-              <a class="text-primary underline-offset-4 hover:underline" href={item.href}>{String(item.value ?? '—')}</a>
+              <a class="svadmin-u-20aaf08a7ed1 svadmin-u-02af9e5da98e svadmin-u-f673f4a7d061" href={item.href}>{String(item.value ?? '—')}</a>
             {:else}
               {item.value != null ? String(item.value) : '—'}
             {/if}
             {#if item.description}
-              <p class="mt-0.5 text-xs font-normal text-muted-foreground">{item.description}</p>
+              <p class="svadmin-u-15e1b1f444fe svadmin-u-359090c2d529 svadmin-u-8ecebc9f80e6 svadmin-u-bfa603190748">{item.description}</p>
             {/if}
           </dd>
         </div>
@@ -93,42 +93,42 @@
 {:else}
   <dl
     class={cn(
-      'grid',
+      'svadmin-u-f3c543ad5fe9',
       columnClass,
-      isCompact ? 'gap-x-4 gap-y-3' : 'gap-x-6 gap-y-5',
+      isCompact ? 'svadmin-u-513d5c30bf66 svadmin-u-bcf14a5a5472' : 'svadmin-u-706c16d853e6 svadmin-u-375f36f67650',
       className,
     )}
   >
     {#each items as item, idx (item.label ? `${item.label}-${idx}` : idx)}
       <div
         class={cn(
-          'min-w-0',
-          isHorizontal ? 'flex items-baseline gap-2' : '',
+          'svadmin-u-7e0b7cdf1a94',
+          isHorizontal ? 'svadmin-u-60fbb7713999 svadmin-u-b7012bb243cc svadmin-u-77a2a20e90d4' : '',
           spanClass(Math.min(item.span ?? 1, columns)),
         )}
       >
         <dt
           class={cn(
-            'font-medium text-muted-foreground',
-            isCompact ? 'text-xs' : 'text-xs',
-            isHorizontal ? 'shrink-0 min-w-20' : '',
+            'svadmin-u-2689f3958069 svadmin-u-bfa603190748',
+            isCompact ? 'svadmin-u-359090c2d529' : 'svadmin-u-359090c2d529',
+            isHorizontal ? 'svadmin-u-012fbd121f37 svadmin-u-2e7a6d18a20d' : '',
           )}
         >
           {item.label}
         </dt>
         <dd
           class={cn(
-            'break-words font-medium text-foreground min-w-0 flex-1',
-            isHorizontal ? 'text-xs sm:text-sm' : isCompact ? 'mt-0.5 text-xs sm:text-sm' : 'mt-1 text-sm',
+            'svadmin-u-170cee3ff4e4 svadmin-u-2689f3958069 svadmin-u-d4108abe6359 svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c',
+            isHorizontal ? 'svadmin-u-359090c2d529 svadmin-u-e2327d142859' : isCompact ? 'svadmin-u-15e1b1f444fe svadmin-u-359090c2d529 svadmin-u-e2327d142859' : 'svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb',
           )}
         >
           {#if item.href}
-            <a class="text-primary underline-offset-4 hover:underline" href={item.href}>{String(item.value ?? '—')}</a>
+            <a class="svadmin-u-20aaf08a7ed1 svadmin-u-02af9e5da98e svadmin-u-f673f4a7d061" href={item.href}>{String(item.value ?? '—')}</a>
           {:else}
             {item.value != null ? String(item.value) : '—'}
           {/if}
           {#if item.description}
-            <p class="mt-1 text-xs font-normal text-muted-foreground">{item.description}</p>
+            <p class="svadmin-u-b6b02c0ebef6 svadmin-u-359090c2d529 svadmin-u-8ecebc9f80e6 svadmin-u-bfa603190748">{item.description}</p>
           {/if}
         </dd>
       </div>

package/dist/components/content/FeedbackNotice.svelte

@@ -25,10 +25,10 @@
   const isBlocking = $derived(priority === 'blocking' || tone === 'danger');
   const toneClass = $derived(
     tone === 'danger'
-      ? 'border-destructive/40 bg-destructive/5 text-destructive'
+      ? 'svadmin-u-26e4f7bdbd56 svadmin-u-7a0854fdbc30 svadmin-u-811148b13d1e'
       : tone === 'warning'
-        ? 'border-warning/50 bg-warning/10 text-warning-foreground'
-        : 'border-border bg-muted/40 text-foreground',
+        ? 'svadmin-u-d008dee27eaa svadmin-u-283481e780bb svadmin-u-3a4ff758c2ab'
+        : 'svadmin-u-18049387f0af svadmin-u-b00f43c30c2b svadmin-u-d4108abe6359',
   );
 </script>
 
@@ -39,23 +39,23 @@
   role={isBlocking ? 'alert' : 'status'}
   aria-live={isBlocking ? 'assertive' : 'polite'}
   class={cn(
-    'flex w-full flex-col gap-3 rounded-md border px-3 py-2.5 text-sm sm:flex-row sm:items-center',
-    isBlocking && 'border-l-2',
+    'svadmin-u-60fbb7713999 svadmin-u-6da6a3c3f741 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-0e17f2bd9074 svadmin-u-e7ee55ac7ffe svadmin-u-fc7473ca09eb svadmin-u-020ba687fa12 svadmin-u-9f76a62f4f44',
+    isBlocking && 'svadmin-u-f57e7530965b',
     toneClass,
     className,
   )}
 >
-  <div class="flex min-w-0 flex-1 items-start gap-2.5">
+  <div class="svadmin-u-60fbb7713999 svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c svadmin-u-60541e1e26f8 svadmin-u-7e9a2a250cc3">
     {#if tone === 'danger'}
-      <CircleAlert class="mt-0.5 size-4 shrink-0" aria-hidden="true" />
+      <CircleAlert class="svadmin-u-15e1b1f444fe svadmin-u-f7b5fa971871 svadmin-u-012fbd121f37" aria-hidden="true" />
     {:else if tone === 'warning'}
-      <TriangleAlert class="mt-0.5 size-4 shrink-0" aria-hidden="true" />
+      <TriangleAlert class="svadmin-u-15e1b1f444fe svadmin-u-f7b5fa971871 svadmin-u-012fbd121f37" aria-hidden="true" />
     {:else}
-      <Info class="mt-0.5 size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+      <Info class="svadmin-u-15e1b1f444fe svadmin-u-f7b5fa971871 svadmin-u-012fbd121f37 svadmin-u-bfa603190748" aria-hidden="true" />
     {/if}
-    <p class="min-w-0 leading-5">{message}</p>
+    <p class="svadmin-u-7e0b7cdf1a94 svadmin-u-7054e2767710">{message}</p>
   </div>
   {#if action}
-    <div class="shrink-0">{@render action()}</div>
+    <div class="svadmin-u-012fbd121f37">{@render action()}</div>
   {/if}
 </div>

package/dist/components/content/FileList.svelte

@@ -13,9 +13,9 @@
 {#if resolvedState}
   <DataState state={resolvedState} title={stateTitle ?? emptyTitle} description={stateDescription ?? emptyDescription} {retry} {retryLabel} {loadingLabel} class={className} />
 {:else}
-<div class={'divide-y divide-border overflow-hidden rounded-lg border border-border bg-card ' + className}>
+<div class={'svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3 svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className}>
   {#each files as file, index (file.id ?? file.name + '-' + index)}
-    <div class="flex items-center gap-3 px-4 py-3"><span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"><File class="size-4" /></span><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium text-foreground">{file.name}</p><p class="text-xs text-muted-foreground">{file.size ?? file.type ?? (i18n.locale === 'zh-CN' ? '文件' : 'File')}{file.updatedAt ? ' / ' + file.updatedAt : ''}</p></div>{#if ondownload}<Button variant="ghost" size="icon-sm" aria-label={(i18n.locale === 'zh-CN' ? '下载 ' : 'Download ') + file.name} onclick={() => ondownload?.(file)}><Download class="size-4" /></Button>{/if}{#if onremove}<Button variant="ghost" size="icon-sm" aria-label={(i18n.locale === 'zh-CN' ? '移除 ' : 'Remove ') + file.name} onclick={() => onremove?.(file)}><Trash2 class="size-4" /></Button>{/if}</div>
+    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-1004c0c3954c svadmin-u-f0faeb26d656 svadmin-u-1b2d54a3fd12"><span class="svadmin-u-60fbb7713999 svadmin-u-665f07fe73cc svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-421ac2be5045 svadmin-u-2ef11f1cb219 svadmin-u-bfa603190748"><File class="svadmin-u-f7b5fa971871" /></span><div class="svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c"><p class="svadmin-u-f283ea9bea0e svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{file.name}</p><p class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">{file.size ?? file.type ?? (i18n.locale === 'zh-CN' ? '文件' : 'File')}{file.updatedAt ? ' / ' + file.updatedAt : ''}</p></div>{#if ondownload}<Button variant="ghost" size="icon-sm" aria-label={(i18n.locale === 'zh-CN' ? '下载 ' : 'Download ') + file.name} onclick={() => ondownload?.(file)}><Download class="svadmin-u-f7b5fa971871" /></Button>{/if}{#if onremove}<Button variant="ghost" size="icon-sm" aria-label={(i18n.locale === 'zh-CN' ? '移除 ' : 'Remove ') + file.name} onclick={() => onremove?.(file)}><Trash2 class="svadmin-u-f7b5fa971871" /></Button>{/if}</div>
   {/each}
 </div>
 {/if}

package/dist/components/content/FilterToolbar.svelte

@@ -42,33 +42,33 @@
   const advancedPanelId = `svadmin-filter-toolbar-advanced-${uid}`;
 </script>
 
-<div class={cn('space-y-2', className)} data-svadmin-filter-toolbar data-advanced-open={advanced && advancedOpen ? 'true' : 'false'}>
-  <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
+<div class={cn('svadmin-filter-toolbar', className)} data-density={density} data-svadmin-filter-toolbar data-advanced-open={advanced && advancedOpen ? 'true' : 'false'}>
+  <div class="svadmin-filter-toolbar__row">
     {#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')} aria-hidden="true" />
+      <div class="svadmin-filter-toolbar__search">
+        <Search class="svadmin-filter-toolbar__search-icon" aria-hidden="true" />
         <Input
           bind:value={query}
           {placeholder}
-          class={cn('pl-9 pr-9', isCompact ? 'h-8 text-xs' : 'h-9 text-sm')}
+          class="svadmin-filter-toolbar__input"
           aria-label={placeholder}
         />
         {#if query}
           <Button
             variant="ghost"
             size="icon-xs"
-            class="absolute right-1 top-1/2 -translate-y-1/2"
+            class="svadmin-filter-toolbar__clear"
             aria-label={clearLabel}
             title={clearLabel}
             onclick={() => query = ''}
           >
-            <X class="size-3.5" aria-hidden="true" />
+            <X class="svadmin-filter-toolbar__control-icon" aria-hidden="true" />
           </Button>
         {/if}
       </div>
     {/if}
     {#if filters}
-      <div class="flex flex-wrap items-center gap-2">
+      <div class="svadmin-filter-toolbar__filters">
         {@render filters()}
       </div>
     {/if}
@@ -76,33 +76,33 @@
       <Button
         variant={advancedOpen ? 'secondary' : 'outline'}
         size={isCompact ? 'sm' : 'default'}
-        class={cn('gap-1.5 shrink-0', isCompact ? 'h-8 text-xs px-2.5' : '')}
+        class="svadmin-filter-toolbar__toggle"
         onclick={() => advancedOpen = !advancedOpen}
         aria-expanded={advancedOpen}
         aria-controls={advancedPanelId}
       >
-        <SlidersHorizontal class="size-3.5" aria-hidden="true" />
+        <SlidersHorizontal class="svadmin-filter-toolbar__control-icon" 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 tabular-nums">
+          <Badge variant="secondary" class="svadmin-filter-toolbar__count">
             {activeFilterCount}
           </Badge>
         {/if}
         {#if advancedOpen}
-          <ChevronUp class="size-3 text-muted-foreground ml-0.5" aria-hidden="true" />
+          <ChevronUp class="svadmin-filter-toolbar__chevron" aria-hidden="true" />
         {:else}
-          <ChevronDown class="size-3 text-muted-foreground ml-0.5" aria-hidden="true" />
+          <ChevronDown class="svadmin-filter-toolbar__chevron" aria-hidden="true" />
         {/if}
       </Button>
     {/if}
     {#if actions}
-      <div class="flex shrink-0 flex-wrap items-center gap-2">
+      <div class="svadmin-filter-toolbar__actions">
         {@render actions()}
       </div>
     {/if}
   </div>
   {#if advanced && advancedOpen}
-    <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">
+    <div id={advancedPanelId} role="region" aria-label={advancedLabel} class="svadmin-filter-toolbar-advanced" aria-hidden="false">
       {@render advanced()}
     </div>
   {/if}

package/dist/components/content/ImportDropzone.svelte

@@ -10,10 +10,10 @@
     if (files?.length) onimport?.(files);
   }
 </script>
-<div class={'rounded-lg border border-dashed border-border bg-card p-6 text-center ' + className} data-svadmin-import-dropzone>
-  <UploadCloud class="mx-auto size-8 text-muted-foreground" /><p class="mt-3 text-sm font-medium text-foreground">Import records</p><p class="mt-1 text-xs text-muted-foreground">CSV or spreadsheet files are accepted.</p>
-  <Input class="mx-auto mt-4 max-w-sm" type="file" {accept} onchange={choose} disabled={loading} />
-  {#if loading}<p class="mt-3 text-xs text-muted-foreground" aria-live="polite">Importing...</p>{/if}
-  {#if status}<p class="mt-3 text-xs text-success" role="status">{status}</p>{/if}
-  {#if !loading && files?.length}<Button class="mt-4" size="sm" onclick={() => onimport?.(files)}>Import {files.length} file{files.length === 1 ? '' : 's'}</Button>{/if}
+<div class={'svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-a29b7a649c77 svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-0478c89a150f svadmin-u-ca6bf63030aa ' + className} data-svadmin-import-dropzone>
+  <UploadCloud class="svadmin-u-0e12dc7de920 svadmin-u-d8f5213f0fe0 svadmin-u-bfa603190748" /><p class="svadmin-u-eccd13ef4f2f svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">Import records</p><p class="svadmin-u-b6b02c0ebef6 svadmin-u-359090c2d529 svadmin-u-bfa603190748">CSV or spreadsheet files are accepted.</p>
+  <Input class="svadmin-u-0e12dc7de920 svadmin-u-0ab8667228fd svadmin-u-2472e9b81a97" type="file" {accept} onchange={choose} disabled={loading} />
+  {#if loading}<p class="svadmin-u-eccd13ef4f2f svadmin-u-359090c2d529 svadmin-u-bfa603190748" aria-live="polite">Importing...</p>{/if}
+  {#if status}<p class="svadmin-u-eccd13ef4f2f svadmin-u-359090c2d529 svadmin-u-76747e5e02ff" role="status">{status}</p>{/if}
+  {#if !loading && files?.length}<Button class="svadmin-u-0ab8667228fd" size="sm" onclick={() => onimport?.(files)}>Import {files.length} file{files.length === 1 ? '' : 's'}</Button>{/if}
 </div>

package/dist/components/content/IntegrationCard.svelte

@@ -8,9 +8,9 @@
   let { integration, onconnect, class: className = '' }: Props = $props();
 </script>
 <Card.Card class={className}>
-  <Card.CardContent class="flex items-start gap-3 p-4">
-    <span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"><PlugZap class="size-4" /></span>
-    <div class="min-w-0 flex-1"><div class="flex flex-wrap items-center gap-2"><h3 class="text-sm font-semibold text-foreground">{integration.name}</h3>{#if integration.connected}<Badge variant="outline" class="border-success/30 bg-success/10 text-success"><Check class="size-3" />Connected</Badge>{/if}</div><p class="mt-1 text-sm text-muted-foreground">{integration.description ?? 'Connect this provider to unlock synchronized workflows.'}</p>{#if integration.account}<p class="mt-2 text-xs text-muted-foreground">{integration.account}</p>{/if}</div>
-    {#if onconnect}<Button variant={integration.connected ? 'outline' : 'default'} size="sm" onclick={onconnect}>{integration.connected ? 'Manage' : 'Connect'}{#if !integration.connected}<ExternalLink class="size-3.5" />{/if}</Button>{/if}
+  <Card.CardContent class="svadmin-u-60fbb7713999 svadmin-u-60541e1e26f8 svadmin-u-1004c0c3954c svadmin-u-8e63407b5ceb">
+    <span class="svadmin-u-60fbb7713999 svadmin-u-665f07fe73cc svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-421ac2be5045 svadmin-u-2ef11f1cb219 svadmin-u-bfa603190748"><PlugZap class="svadmin-u-f7b5fa971871" /></span>
+    <div class="svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c"><div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4"><h3 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{integration.name}</h3>{#if integration.connected}<Badge variant="outline" class="svadmin-u-18a6e7a36f29 svadmin-u-17a9f7af2265 svadmin-u-76747e5e02ff"><Check class="svadmin-u-ef2d6f74d3d0" />Connected</Badge>{/if}</div><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{integration.description ?? 'Connect this provider to unlock synchronized workflows.'}</p>{#if integration.account}<p class="svadmin-u-50d0d216a2f8 svadmin-u-359090c2d529 svadmin-u-bfa603190748">{integration.account}</p>{/if}</div>
+    {#if onconnect}<Button variant={integration.connected ? 'outline' : 'default'} size="sm" onclick={onconnect}>{integration.connected ? 'Manage' : 'Connect'}{#if !integration.connected}<ExternalLink class="svadmin-u-783b0d9d1e2c" />{/if}</Button>{/if}
   </Card.CardContent>
 </Card.Card>

package/dist/components/content/MediaThumbnail.svelte

@@ -49,10 +49,10 @@
     || (src && !mimeType && !fileName && !/\.(pdf|docx?|xlsx?|zip|tar|gz|txt|csv|json)$/i.test(src))
   ));
   const sizeClasses: Record<MediaThumbnailSize, string> = {
-    sm: 'h-16 min-w-16 max-w-24',
-    md: 'min-h-20 max-h-56 w-full',
-    lg: 'min-h-32 max-h-80 w-full',
-    full: 'h-full w-full',
+    sm: 'svadmin-u-acaee62117b1 svadmin-u-0277bd2c2996 svadmin-u-ecf9478d01e6',
+    md: 'svadmin-u-3f2a1ff6358f svadmin-u-520bb7118c41 svadmin-u-6da6a3c3f741',
+    lg: 'svadmin-u-152267a018a5 svadmin-u-e5738cbd2714 svadmin-u-6da6a3c3f741',
+    full: 'svadmin-u-668b21aa5409 svadmin-u-6da6a3c3f741',
   };
   const fitClasses: Record<MediaThumbnailFit, string> = {
     contain: 'object-contain',
@@ -79,31 +79,31 @@
 </script>
 
 {#if isImage && src}
-  <div class={cn('relative flex items-center justify-center overflow-hidden rounded-lg border border-border bg-muted/30 transition-colors', sizeClasses[size], className)} style:aspect-ratio={aspectRatio} data-slot="media-thumbnail" data-size={size} data-media-state={imageState} aria-busy={imageState === 'loading' || undefined}>
-    <img {src} alt={alt || title || fileName || 'Thumbnail'} class={cn('block max-h-full max-w-full transition-transform duration-200', showOverlay && 'group-hover:scale-[1.02]', fitClasses[fit], imageState !== 'loaded' && 'invisible')} loading="lazy" onload={() => imageState = 'loaded'} onerror={() => imageState = 'error'} />
+  <div class={cn('svadmin-u-d89972fe17d6 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-2859c861d7de svadmin-u-ceb69a6b0e5f', sizeClasses[size], className)} style:aspect-ratio={aspectRatio} data-slot="media-thumbnail" data-size={size} data-media-state={imageState} aria-busy={imageState === 'loading' || undefined}>
+    <img {src} alt={alt || title || fileName || 'Thumbnail'} class={cn('svadmin-u-0214b4b355d1 svadmin-u-a201da4b0d91 svadmin-u-c0980a65a70d svadmin-u-eadef238231e svadmin-u-625a4c3fbeb2', showOverlay && 'svadmin-u-7b9cdafaf68a', fitClasses[fit], imageState !== 'loaded' && 'invisible')} loading="lazy" onload={() => imageState = 'loaded'} onerror={() => imageState = 'error'} />
 
     {#if imageState === 'loading'}
-      <div class="absolute inset-0 flex items-center justify-center bg-muted/40" role="status" aria-label={loadingLabel}><Loader2 class="size-4 animate-spin text-muted-foreground" aria-hidden="true" /></div>
+      <div class="svadmin-u-da4dbfbc4fdc svadmin-u-7b7df0449b80 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-b00f43c30c2b" role="status" aria-label={loadingLabel}><Loader2 class="svadmin-u-f7b5fa971871 svadmin-u-afbdd13a380e svadmin-u-bfa603190748" aria-hidden="true" /></div>
     {:else if imageState === 'error'}
-      <div class="absolute inset-0 flex flex-col items-center justify-center gap-1 p-3 text-center text-xs text-muted-foreground" role="img" aria-label={errorLabel} data-slot="media-thumbnail-error"><ImageOff class="size-5" aria-hidden="true" /><span class="max-w-[12rem] truncate text-[11px]">{errorLabel}</span></div>
+      <div class="svadmin-u-da4dbfbc4fdc svadmin-u-7b7df0449b80 svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-44ee8ba0a421 svadmin-u-eb6e8b881acd svadmin-u-ca6bf63030aa svadmin-u-359090c2d529 svadmin-u-bfa603190748" role="img" aria-label={errorLabel} data-slot="media-thumbnail-error"><ImageOff class="svadmin-u-add63bc6753d" aria-hidden="true" /><span class="svadmin-u-4bfac3b6a99f svadmin-u-f283ea9bea0e svadmin-u-d058ca6de60f">{errorLabel}</span></div>
     {:else if showOverlay}
       <Dialog.Root bind:open={previewOpen}>
-        <button type="button" class="group absolute inset-0 cursor-zoom-in outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset" onclick={openMedia} aria-label={alt ? `Preview ${alt}` : overlayText}>
-          <span class="pointer-events-none absolute inset-0 flex items-center justify-center gap-1.5 bg-background/60 text-foreground opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100" aria-hidden="true"><Eye class="size-4" /><span class="text-xs font-semibold">{overlayText}</span></span>
+        <button type="button" class="group svadmin-u-da4dbfbc4fdc svadmin-u-7b7df0449b80 svadmin-u-3bbc8c13feec svadmin-u-df37b1fd9495 svadmin-u-793c80e97ffb svadmin-u-9c1295a6914a svadmin-u-77923ba6606a" onclick={openMedia} aria-label={alt ? `Preview ${alt}` : overlayText}>
+          <span class="svadmin-u-a4326536b8f5 svadmin-u-da4dbfbc4fdc svadmin-u-7b7df0449b80 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-58284b4ea568 svadmin-u-f160abf88b25 svadmin-u-d4108abe6359 svadmin-u-7065497e1ca0 svadmin-u-67d6184a0024 svadmin-u-181f3d6c9821 svadmin-u-bd301bde45ea" aria-hidden="true"><Eye class="svadmin-u-f7b5fa971871" /><span class="svadmin-u-359090c2d529 svadmin-u-e83a7042bc91">{overlayText}</span></span>
         </button>
         {#if !onopen}
-          <Dialog.Content class="max-w-[min(92vw,72rem)] border-none bg-transparent p-0 shadow-none">
-            <Dialog.Header class="sr-only"><Dialog.Title>{alt || title || fileName || 'Media preview'}</Dialog.Title><Dialog.Description>{alt || title || fileName || 'Expanded media preview'}</Dialog.Description></Dialog.Header>
-            <img {src} alt={alt || title || fileName || 'Media preview'} class="max-h-[82vh] w-full rounded-md object-contain" />
+          <Dialog.Content class="svadmin-u-53eae0624db1 svadmin-u-4a5f0ea04648 svadmin-u-7f19cdf4c5bb svadmin-u-8a539c7fe216 svadmin-u-ad47d17e603c">
+            <Dialog.Header class="svadmin-u-2daa8e5e2f2e"><Dialog.Title>{alt || title || fileName || 'Media preview'}</Dialog.Title><Dialog.Description>{alt || title || fileName || 'Expanded media preview'}</Dialog.Description></Dialog.Header>
+            <img {src} alt={alt || title || fileName || 'Media preview'} class="svadmin-u-467420585af4 svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-b1104f41444a" />
           </Dialog.Content>
         {/if}
       </Dialog.Root>
     {/if}
   </div>
 {:else if src || fileName}
-  <button type="button" class={cn('inline-flex items-center gap-2 rounded-lg border border-border bg-muted/20 px-3 py-2 text-left text-xs text-foreground transition-colors hover:bg-muted/40', className)} onclick={openDocument} data-slot="media-thumbnail-document">
-    <FileText class="size-4 shrink-0 text-muted-foreground" /><span class="truncate font-medium" title={fileName || alt || title}>{fileName || alt || title || 'Document'}</span>
+  <button type="button" class={cn('svadmin-u-52083e7da442 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-967d113a1451 svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b svadmin-u-2eba0d65d059 svadmin-u-359090c2d529 svadmin-u-d4108abe6359 svadmin-u-ceb69a6b0e5f svadmin-u-f6e31b39b8e4', className)} onclick={openDocument} data-slot="media-thumbnail-document">
+    <FileText class="svadmin-u-f7b5fa971871 svadmin-u-012fbd121f37 svadmin-u-bfa603190748" /><span class="svadmin-u-f283ea9bea0e svadmin-u-2689f3958069" title={fileName || alt || title}>{fileName || alt || title || 'Document'}</span>
   </button>
 {:else}
-  <span class={cn('inline-flex items-center gap-1 text-xs text-muted-foreground', className)} data-media-state="empty"><ImageOff class="size-3.5" aria-hidden="true" /><span>{emptyLabel}</span></span>
+  <span class={cn('svadmin-u-52083e7da442 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421 svadmin-u-359090c2d529 svadmin-u-bfa603190748', className)} data-media-state="empty"><ImageOff class="svadmin-u-783b0d9d1e2c" aria-hidden="true" /><span>{emptyLabel}</span></span>
 {/if}

package/dist/components/content/MemberList.svelte

@@ -16,9 +16,9 @@
 {#if resolvedState}
   <DataState state={resolvedState} title={stateTitle ?? emptyTitle} description={stateDescription ?? emptyDescription} {retry} {retryLabel} {loadingLabel} class={className} />
 {:else}
-<div class={'divide-y divide-border overflow-hidden rounded-lg border border-border bg-card ' + className}>
+<div class={'svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3 svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className}>
   {#each members as member (member.id)}
-    <div class="flex items-center gap-3 px-4 py-3"><Avatar src={member.avatar} alt={member.name} fallback={initials(member.name)} size="sm" /><div class="min-w-0 flex-1"><p class="truncate text-sm font-medium text-foreground">{member.name}</p><p class="truncate text-xs text-muted-foreground">{member.email ?? member.department ?? i18n.t('profileSections.members')}</p></div>{#if member.role}<span class="hidden text-xs text-muted-foreground sm:inline">{member.role}</span>{/if}{#if member.status}<StatusBadge status={member.status} label={member.status} />{/if}{#if onaction}<Button variant="ghost" size="icon-sm" aria-label={i18n.t('common.actions') + ' ' + member.name} onclick={() => onaction?.(member)}><MoreHorizontal class="size-4" /></Button>{/if}</div>
+    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-1004c0c3954c svadmin-u-f0faeb26d656 svadmin-u-1b2d54a3fd12"><Avatar src={member.avatar} alt={member.name} fallback={initials(member.name)} size="sm" /><div class="svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c"><p class="svadmin-u-f283ea9bea0e svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{member.name}</p><p class="svadmin-u-f283ea9bea0e svadmin-u-359090c2d529 svadmin-u-bfa603190748">{member.email ?? member.department ?? i18n.t('profileSections.members')}</p></div>{#if member.role}<span class="svadmin-u-99d72c7fc3e2 svadmin-u-359090c2d529 svadmin-u-bfa603190748 svadmin-u-ee3c1259a368">{member.role}</span>{/if}{#if member.status}<StatusBadge status={member.status} label={member.status} />{/if}{#if onaction}<Button variant="ghost" size="icon-sm" aria-label={i18n.t('common.actions') + ' ' + member.name} onclick={() => onaction?.(member)}><MoreHorizontal class="svadmin-u-f7b5fa971871" /></Button>{/if}</div>
   {/each}
 </div>
 {/if}