@svadmin/ui 0.5.13 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.5.13",
+  "version": "0.6.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -22,7 +22,7 @@
   "peerDependencies": {
     "svelte": "^5.0.0",
     "@svadmin/core": "^0.5.0",
-    "@tanstack/svelte-query": "^5.0.0",
+    "@tanstack/svelte-query": "^6.0.0",
     "bits-ui": "^2.0.0",
     "tailwind-variants": "^3.0.0",
     "clsx": "^2.0.0",

package/src/app.css

@@ -1,110 +1,100 @@
-/* Typography — Inter font should be imported in index.html for New York style */
+/* Typography — Inter font for clean, modern look */
 
-/* @svadmin/ui — Design Tokens (Shadcn New York style)
+/* @svadmin/ui — Design Tokens (Elygate-inspired)
  * Auto-imported by AdminApp. Can be overridden by consumer's CSS.
  *
- * Based on shadcn/ui "New York" theme with oklch() color space.
- * Differences from "Default" style:
- *   - Smaller border-radius (0.5rem vs 0.625rem)
- *   - Refined color palette with deeper contrast
- *   - Chart color tokens included
- *   - More polished dark mode
+ * Based on Elygate dashboard style: Indigo primary, light glassmorphism,
+ * professional admin aesthetic with subtle depth.
  */
 
-/* Auto-register svadmin source files for Tailwind 4 content scanning.
- * This ensures all utility classes used in @svadmin/ui and @svadmin/core
- * components are generated without manual @source in consumer projects. */
-@source "@svadmin/ui/src/**/*.{svelte,ts,js}";
-@source "@svadmin/core/src/**/*.{svelte,ts,js}";
-
 @layer base {
   :root {
     --radius: 0.5rem;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
+    --background: oklch(0.98 0.002 264);
+    --foreground: oklch(0.13 0.02 265);
     --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
+    --card-foreground: oklch(0.13 0.02 265);
     --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.13 0.02 265);
+    --primary: oklch(0.488 0.243 264.376);
     --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.965 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-    --muted: oklch(0.965 0 0);
-    --muted-foreground: oklch(0.45 0 0);
-    --accent: oklch(0.965 0 0);
-    --accent-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.955 0.008 264);
+    --secondary-foreground: oklch(0.2 0.04 265);
+    --muted: oklch(0.955 0.005 264);
+    --muted-foreground: oklch(0.45 0.03 260);
+    --accent: oklch(0.955 0.008 264);
+    --accent-foreground: oklch(0.2 0.04 265);
     --destructive: oklch(0.577 0.245 27.325);
     --destructive-foreground: oklch(0.985 0 0);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.646 0.222 41.116);
+    --border: oklch(0.912 0.008 264);
+    --input: oklch(0.912 0.008 264);
+    --ring: oklch(0.488 0.243 264.376);
+    --chart-1: oklch(0.488 0.243 264.376);
     --chart-2: oklch(0.6 0.118 184.704);
     --chart-3: oklch(0.398 0.07 227.392);
     --chart-4: oklch(0.828 0.189 84.429);
     --chart-5: oklch(0.769 0.188 70.08);
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar: oklch(1 0 0 / 80%);
+    --sidebar-foreground: oklch(0.13 0.02 265);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
     --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.965 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
+    --sidebar-accent: oklch(0.94 0.025 264);
+    --sidebar-accent-foreground: oklch(0.33 0.17 264);
+    --sidebar-border: oklch(0.912 0.008 264);
+    --sidebar-ring: oklch(0.488 0.243 264.376);
   }
 
   .dark {
-    --background: oklch(0.145 0 0);
+    --background: oklch(0.13 0.015 265);
     --foreground: oklch(0.985 0 0);
-    --card: oklch(0.178 0 0);
+    --card: oklch(0.16 0.015 265);
     --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.178 0 0);
+    --popover: oklch(0.16 0.015 265);
     --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.985 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
+    --primary: oklch(0.585 0.233 264);
+    --primary-foreground: oklch(0.15 0.04 265);
+    --secondary: oklch(0.23 0.025 265);
     --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
+    --muted: oklch(0.23 0.025 265);
+    --muted-foreground: oklch(0.7 0.02 260);
+    --accent: oklch(0.23 0.025 265);
     --accent-foreground: oklch(0.985 0 0);
     --destructive: oklch(0.704 0.191 22.216);
     --destructive-foreground: oklch(0.985 0 0);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.488 0.243 264.376);
+    --border: oklch(0.23 0.025 265);
+    --input: oklch(0.23 0.025 265);
+    --ring: oklch(0.55 0.18 264);
+    --chart-1: oklch(0.585 0.233 264);
     --chart-2: oklch(0.696 0.17 162.48);
     --chart-3: oklch(0.769 0.188 70.08);
     --chart-4: oklch(0.627 0.265 303.9);
     --chart-5: oklch(0.645 0.246 16.439);
-    --sidebar: oklch(0.178 0 0);
+    --sidebar: oklch(0.16 0.015 265 / 80%);
     --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary: oklch(0.585 0.233 264);
     --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+    --sidebar-accent: oklch(0.488 0.243 264.376 / 10%);
+    --sidebar-accent-foreground: oklch(0.7 0.15 264);
+    --sidebar-border: oklch(0.23 0.025 265);
+    --sidebar-ring: oklch(0.55 0.18 264);
   }
 
-  /* Emulate new-york style shadows on inputs and buttons */
+  /* Elygate-style shadows — subtle depth without heaviness */
   [data-slot="button"],
   [data-slot="input"],
   [data-slot="select-trigger"],
   [data-slot="select"],
   [data-slot="textarea"] {
-    @apply shadow-sm;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   }
   
   [data-slot="card"] {
-    @apply shadow-sm;
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
   }
 
   [data-slot="dialog-content"],
   [data-slot="sheet-content"] {
-    @apply shadow-lg;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   }
 }
 
@@ -122,10 +112,7 @@ body {
 .dark ::-webkit-scrollbar-thumb { background: oklch(0.35 0 0); }
 .dark ::-webkit-scrollbar-thumb:hover { background: oklch(0.45 0 0); }
 
-/* Tailwind CSS v4 — Map design tokens to utility classes
- * This enables bg-primary, text-muted-foreground, border-input, etc.
- * Without this, Tailwind 4 utility classes referencing these tokens are no-ops.
- */
+/* Tailwind CSS v4 — Map design tokens to utility classes */
 @theme {
   --color-background: var(--background);
   --color-foreground: var(--foreground);

package/src/components/AdminApp.svelte

@@ -119,7 +119,7 @@
           {@render dashboard()}
         {:else}
           <div class="space-y-4">
-            <h1 class="text-2xl font-bold text-foreground">{t('common.welcome', { title })}</h1>
+            <h1 class="text-xl font-semibold text-foreground">{t('common.welcome', { title })}</h1>
             <p class="text-muted-foreground">{t('common.dashboardHint')}</p>
           </div>
         {/if}

package/src/components/AutoForm.svelte

@@ -222,7 +222,7 @@
     >
       <ArrowLeft class="h-5 w-5" />
     </TooltipButton>
-    <h1 class="text-2xl font-bold text-foreground">{pageTitle}</h1>
+    <h1 class="text-xl font-semibold text-foreground">{pageTitle}</h1>
     {#if isDirty}
       <Badge variant="outline" class="border-amber-200 bg-amber-50 text-amber-700">{t('common.unsaved')}</Badge>
     {/if}
@@ -230,7 +230,7 @@
 
   {#if isLoading}
     <div class="max-w-3xl space-y-6">
-      <div class="rounded-xl border p-6 space-y-5">
+      <div class="rounded-lg border p-6 space-y-5">
         {#each Array(4) as _}
           <div class="space-y-2">
             <Skeleton class="h-4 w-24" />

package/src/components/AutoTable.svelte

@@ -311,7 +311,7 @@
 <div class="space-y-4">
   <!-- Header -->
   <div class="flex items-center justify-between">
-    <h1 class="text-2xl font-bold text-foreground">{resource.label}</h1>
+    <h1 class="text-xl font-semibold text-foreground">{resource.label}</h1>
     <div class="flex items-center gap-2">
       {#if canExport}
         <Button variant="outline" size="sm" onclick={exportCSV}>
@@ -414,7 +414,7 @@
   {/if}
 
   <!-- Table (TanStack-powered) -->
-  <div class="rounded-xl border border-border/60 bg-card shadow-md overflow-hidden">
+  <div class="rounded-lg bg-card shadow-sm overflow-hidden">
     {#if query.isLoading}
       <div class="p-4 space-y-3">
         <div class="flex gap-4 mb-2">

package/src/components/ConfigErrorScreen.svelte

@@ -48,14 +48,14 @@
   }
 </script>
 
-<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-destructive/[0.05] via-background to-destructive/[0.03] p-4">
+<div class="min-h-screen flex items-center justify-center bg-background p-4">
   <div class="w-full max-w-[480px]">
-    <Card.Card class="backdrop-blur-xl border-border/50 shadow-[0_8px_32px_hsl(var(--destructive)/0.08),0_2px_8px_hsl(0_0%_0%/0.06)]">
+    <Card.Card>
       <Card.CardHeader class="text-center pb-2">
-        <div class="inline-flex items-center justify-center w-14 h-14 rounded-[14px] bg-destructive/10 text-destructive mx-auto mb-3">
-          <AlertTriangle class="h-7 w-7" />
+        <div class="inline-flex items-center justify-center w-12 h-12 rounded-lg bg-destructive/10 text-destructive mx-auto mb-3">
+          <AlertTriangle class="h-6 w-6" />
         </div>
-        <Card.CardTitle class="text-xl font-bold">{displayTitle}</Card.CardTitle>
+        <Card.CardTitle class="text-xl">{displayTitle}</Card.CardTitle>
         <p class="text-sm text-muted-foreground">
           {t('config.missingEnvDescription')}
         </p>

package/src/components/EmptyState.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <div
-  class="flex flex-col items-center justify-center p-8 text-center min-h-[300px] bg-card rounded-lg border border-dashed border-border/50 shadow-sm"
+  class="flex flex-col items-center justify-center p-8 text-center min-h-[300px] bg-card/50 rounded-lg shadow-sm"
   in:scale={{ start: 0.95, duration: 250, opacity: 0 }}
 >
   <div class="h-20 w-20 rounded-full bg-muted flex items-center justify-center mb-4">

package/src/components/ForgotPasswordPage.svelte

@@ -34,18 +34,18 @@
   }
 </script>
 
-<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/[0.08] via-background to-primary/[0.04] p-4">
-  <div class="w-full max-w-[420px]">
-    <Card.Card class="backdrop-blur-xl border-border/50 shadow-[0_8px_32px_hsl(var(--primary)/0.08),0_2px_8px_hsl(0_0%_0%/0.06)]">
+<div class="min-h-screen flex items-center justify-center bg-background p-4">
+  <div class="w-full max-w-[380px]">
+    <Card.Card>
       <Card.CardHeader class="text-center pb-2">
-        <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10 text-primary mx-auto mb-3">
+        <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary mx-auto mb-3">
           {#if sent}
-            <CheckCircle class="h-6 w-6" />
+            <CheckCircle class="h-5 w-5" />
           {:else}
-            <KeyRound class="h-6 w-6" />
+            <KeyRound class="h-5 w-5" />
           {/if}
         </div>
-        <Card.CardTitle class="text-2xl font-bold">
+        <Card.CardTitle class="text-xl">
           {sent ? t('auth.resetLinkSent') : t('auth.forgotPassword')}
         </Card.CardTitle>
         {#if !sent}

package/src/components/Header.svelte

@@ -7,7 +7,7 @@
   import { t } from '@svadmin/core/i18n';
 
   let {
-    showThemeToggle = true,
+    showThemeToggle = false,
     showBreadcrumbs = true,
     showSearch = true,
     onSearchClick,
@@ -21,20 +21,19 @@
   }>();
 </script>
 
-<header class="sticky top-0 z-30 flex h-16 w-full shrink-0 items-center justify-between border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/60 md:px-6">
+<header class="sticky top-0 z-30 flex h-14 w-full shrink-0 items-center justify-between bg-white/60 dark:bg-slate-900/60 backdrop-blur-md px-4 md:px-6">
   <div class="flex items-center gap-4">
+    {#if children}
+      {@render children()}
+    {/if}
     {#if showBreadcrumbs}
       <Breadcrumbs />
     {/if}
   </div>
   <div class="ml-auto flex items-center gap-2">
-    {#if children}
-      {@render children()}
-    {/if}
-
     {#if showSearch && onSearchClick}
-      <Button variant="outline" size="sm" onclick={onSearchClick} class="gap-2 text-muted-foreground">
-        <Search class="h-4 w-4" />
+      <Button variant="outline" size="sm" onclick={onSearchClick} class="gap-2 text-muted-foreground h-8 px-3">
+        <Search class="h-3.5 w-3.5" />
         <span class="hidden sm:inline text-xs">Search...</span>
         <kbd class="hidden sm:inline-flex items-center gap-0.5 rounded border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
           <span class="text-xs">⌘</span>K
@@ -45,9 +44,9 @@
     {#if showThemeToggle}
       <TooltipButton tooltip={t('common.toggleTheme')} onclick={() => toggleTheme()} class="rounded-full">
         {#if getResolvedTheme() === 'dark'}
-          <Moon class="h-5 w-5 transition-all" />
+          <Moon class="h-4 w-4 transition-all" />
         {:else}
-          <Sun class="h-5 w-5 transition-all" />
+          <Sun class="h-4 w-4 transition-all" />
         {/if}
       </TooltipButton>
     {/if}

package/src/components/Layout.svelte

@@ -64,7 +64,7 @@
 <div role="application" onkeydown={(e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; } }}>
 {#if loading}
   <div class="flex h-screen" in:fade={{ duration: 150 }}>
-    <div class="hidden md:block w-64 border-r bg-sidebar/80 p-4 space-y-4">
+    <div class="hidden md:block w-64 bg-sidebar/80 p-4 space-y-4">
       <Skeleton class="h-8 w-32" />
       <div class="space-y-2 mt-6">
         {#each Array(5) as _}
@@ -82,7 +82,7 @@
     </div>
   </div>
 {:else}
-  <div class="flex h-screen bg-gradient-to-br from-background via-background to-muted/30" in:fade={{ duration: 200, delay: 50 }}>
+  <div class="flex h-screen bg-slate-50 dark:bg-slate-950" in:fade={{ duration: 200, delay: 50 }}>
     <!-- Desktop sidebar -->
     <div class="hidden md:block">
       <Sidebar {collapsed} {identity} {title} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />

package/src/components/LoginPage.svelte

@@ -61,14 +61,14 @@
   }
 </script>
 
-<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/[0.08] via-background to-primary/[0.04] p-4">
-  <div class="w-full max-w-[420px]">
-    <Card.Card class="backdrop-blur-xl border-border/50 shadow-[0_8px_32px_hsl(var(--primary)/0.08),0_2px_8px_hsl(0_0%_0%/0.06)]">
+<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-100 via-blue-50/30 to-indigo-50/40 dark:from-slate-950 dark:via-slate-900 dark:to-indigo-950/20 p-4">
+  <div class="w-full max-w-[380px]">
+    <Card.Card>
       <Card.CardHeader class="text-center pb-2">
-        <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10 text-primary mx-auto mb-3">
-          <LogIn class="h-6 w-6" />
+        <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary mx-auto mb-3">
+          <LogIn class="h-5 w-5" />
         </div>
-        <Card.CardTitle class="text-2xl font-bold">{t('auth.welcomeBack')}</Card.CardTitle>
+        <Card.CardTitle class="text-xl">{t('auth.welcomeBack')}</Card.CardTitle>
         <p class="text-sm text-muted-foreground">{t('auth.welcomeMessage')}</p>
       </Card.CardHeader>
       <Card.CardContent>
@@ -155,8 +155,9 @@
       </Card.CardContent>
     </Card.Card>
 
-    <p class="text-xs text-muted-foreground mt-4 text-center opacity-60">
+    <p class="text-xs text-muted-foreground mt-4 text-center">
       Powered by {title}
     </p>
   </div>
 </div>
+

package/src/components/PageHeader.svelte

@@ -25,7 +25,7 @@
   {/if}
   <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
     <div>
-      <h1 class="text-2xl font-bold tracking-tight text-foreground">{title}</h1>
+      <h1 class="text-xl font-semibold tracking-tight text-foreground">{title}</h1>
       {#if description}
         <p class="text-sm text-muted-foreground">{description}</p>
       {/if}

package/src/components/ProfilePage.svelte

@@ -72,10 +72,10 @@
               <img
                 src={identity.data.avatar}
                 alt={identity.data.name ?? ''}
-                class="h-20 w-20 rounded-xl object-cover ring-2 ring-primary/20"
+                class="h-20 w-20 rounded-lg object-cover ring-2 ring-primary/20"
               />
             {:else}
-              <div class="h-20 w-20 rounded-xl bg-primary/10 text-primary flex items-center justify-center text-2xl font-bold">
+              <div class="h-20 w-20 rounded-lg bg-primary/10 text-primary flex items-center justify-center text-2xl font-bold">
                 {initials}
               </div>
             {/if}

package/src/components/RegisterPage.svelte

@@ -39,14 +39,14 @@
   }
 </script>
 
-<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/[0.08] via-background to-primary/[0.04] p-4">
-  <div class="w-full max-w-[420px]">
-    <Card.Card class="backdrop-blur-xl border-border/50 shadow-[0_8px_32px_hsl(var(--primary)/0.08),0_2px_8px_hsl(0_0%_0%/0.06)]">
+<div class="min-h-screen flex items-center justify-center bg-background p-4">
+  <div class="w-full max-w-[380px]">
+    <Card.Card>
       <Card.CardHeader class="text-center pb-2">
-        <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10 text-primary mx-auto mb-3">
-          <UserPlus class="h-6 w-6" />
+        <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary mx-auto mb-3">
+          <UserPlus class="h-5 w-5" />
         </div>
-        <Card.CardTitle class="text-2xl font-bold">{t('auth.createAccount')}</Card.CardTitle>
+        <Card.CardTitle class="text-xl">{t('auth.createAccount')}</Card.CardTitle>
         <p class="text-sm text-muted-foreground">{t('auth.createAccountMessage')}</p>
       </Card.CardHeader>
       <Card.CardContent>

package/src/components/Sidebar.svelte

@@ -1,20 +1,19 @@
 <script lang="ts">
   import { getResources } from '@svadmin/core';
   import type { Identity } from '@svadmin/core';
-  import { currentPath, navigate } from '@svadmin/core/router';
+  import { currentPath } from '@svadmin/core/router';
   import { t, getLocale, setLocale, getAvailableLocales } from '@svadmin/core/i18n';
   import { toggleTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme, canAccessAsync } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
   import * as Tooltip from './ui/tooltip/index.js';
-  import * as DropdownMenu from './ui/dropdown-menu/index.js';
-  import { Separator } from './ui/separator/index.js';
+
   import { ScrollArea } from './ui/scroll-area/index.js';
   import * as Collapsible from './ui/collapsible/index.js';
   import { Avatar } from './ui/avatar/index.js';
   import {
     LayoutDashboard, FileText, Users, Settings, Home,
-    ChevronLeft, ChevronRight, ChevronDown, LogOut, Sun, Moon, Languages, Palette
+    ChevronLeft, ChevronDown, LogOut, Sun, Moon, Palette
   } from 'lucide-svelte';
 
   let { collapsed, identity, title, onToggle, onLogout } = $props<{
@@ -118,34 +117,57 @@
 
   // Track which groups are open
   let openGroups = $state<Set<string>>(new Set());
+  let colorPickerOpen = $state(false);
+  let colorPickerRef = $state<HTMLDivElement | null>(null);
+  let colorPickerOpenedAt = 0;
+
+  // Click-outside to close color picker
+  $effect(() => {
+    if (!colorPickerOpen) return;
+    function handleMouseDown(e: MouseEvent) {
+      // Ignore if opened within last 200ms (same interaction)
+      if (Date.now() - colorPickerOpenedAt < 200) return;
+      if (colorPickerRef && !colorPickerRef.contains(e.target as Node)) {
+        colorPickerOpen = false;
+      }
+    }
+    document.addEventListener('mousedown', handleMouseDown, true);
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown, true);
+    };
+  });
 </script>
 
 <svelte:window onhashchange={onHashChange} />
 
 <aside
   aria-label="Sidebar navigation"
-  class="fixed inset-y-0 left-0 z-30 flex flex-col bg-sidebar/80 backdrop-blur-xl border-r border-sidebar-border/50 shadow-xl transition-all duration-300"
+  class="fixed inset-y-0 left-0 z-30 flex flex-col backdrop-blur-xl transition-all duration-300"
+  style="background-color: var(--sidebar);"
   class:w-64={!collapsed}
   class:w-16={collapsed}
 >
   <!-- Logo -->
-  <div class="flex h-16 items-center justify-between border-b border-sidebar-border px-4">
+  <div class="flex h-16 items-center justify-between px-4">
     {#if !collapsed}
-      <span class="text-lg font-bold text-sidebar-primary">{title}</span>
+      <div class="flex items-center gap-3">
+        <div class="w-8 h-8 rounded-lg bg-gradient-to-tr from-primary to-purple-500 shrink-0" style="box-shadow: 0 4px 12px oklch(0.488 0.243 264.376 / 20%);"></div>
+        <span class="font-semibold text-lg tracking-tight text-sidebar-foreground">{title}</span>
+      </div>
     {:else}
-      <span class="text-lg font-bold text-sidebar-primary">{title.charAt(0)}</span>
+      <div class="w-8 h-8 rounded-lg bg-gradient-to-tr from-primary to-purple-500 shrink-0 mx-auto" style="box-shadow: 0 4px 12px oklch(0.488 0.243 264.376 / 20%);"></div>
     {/if}
-    <TooltipButton tooltip={t('common.toggleSidebar')} variant="ghost" size="icon-sm" onclick={onToggle}>
-      {#if collapsed}
-        <ChevronRight class="h-4 w-4" />
-      {:else}
+    {#if !collapsed}
+      <TooltipButton tooltip={t('common.toggleSidebar')} variant="ghost" size="icon-sm" onclick={onToggle}>
         <ChevronLeft class="h-4 w-4" />
-      {/if}
-    </TooltipButton>
+      </TooltipButton>
+    {:else}
+      <div></div>
+    {/if}
   </div>
 
   <ScrollArea class="flex-1">
-  <nav aria-label="Main menu" class="py-4 px-2 space-y-1">
+  <nav aria-label="Main menu" class="py-4 px-3 space-y-4">
     {#each navGroups as group}
       {#if group.name && !collapsed}
         <!-- Grouped section with Collapsible -->
@@ -155,24 +177,24 @@
           openGroups = next;
         }}>
           <Collapsible.Trigger
-            class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-xs font-semibold uppercase tracking-wider text-sidebar-foreground/60 hover:bg-sidebar-accent/50 transition-colors"
+            class="flex w-full items-center justify-between px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider text-sidebar-foreground/40 hover:text-sidebar-foreground/60 transition-colors"
           >
             <span>{group.name}</span>
             <ChevronDown class="h-3 w-3 transition-transform {openGroups.has(group.name) ? 'rotate-180' : ''}" />
           </Collapsible.Trigger>
           <Collapsible.Content>
-            <div class="mt-1 space-y-0.5 pl-1">
+            <div class="mt-1 space-y-1">
               {#each group.items as item}
                 {@const active = isActive(item.path)}
                 <a
                   href={`#${item.path}`}
-                  class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors"
-                  class:bg-sidebar-accent={active}
-                  class:text-sidebar-accent-foreground={active}
-                  class:text-sidebar-foreground={!active}
-                  class:hover:bg-sidebar-accent={!active}
+                  class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
+                  {active
+                    ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                    : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+                  style={active ? 'box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);' : ''}
                 >
-                  <item.Icon class="h-5 w-5 flex-shrink-0" />
+                  <item.Icon class="h-4 w-4 flex-shrink-0" />
                   <span>{item.label}</span>
                 </a>
               {/each}
@@ -190,13 +212,12 @@
                   <a
                     {...props}
                     href={`#${item.path}`}
-                    class="flex items-center justify-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors"
-                    class:bg-sidebar-accent={active}
-                    class:text-sidebar-accent-foreground={active}
-                    class:text-sidebar-foreground={!active}
-                    class:hover:bg-sidebar-accent={!active}
+                    class="flex items-center justify-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
+                    {active
+                      ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                      : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
                   >
-                    <item.Icon class="h-5 w-5 flex-shrink-0" />
+                    <item.Icon class="h-4 w-4 flex-shrink-0" />
                   </a>
                 {/snippet}
               </Tooltip.Trigger>
@@ -207,13 +228,13 @@
           {:else}
             <a
               href={`#${item.path}`}
-              class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors"
-              class:bg-sidebar-accent={active}
-              class:text-sidebar-accent-foreground={active}
-              class:text-sidebar-foreground={!active}
-              class:hover:bg-sidebar-accent={!active}
+              class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
+              {active
+                ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
+              style={active ? 'box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);' : ''}
             >
-              <item.Icon class="h-5 w-5 flex-shrink-0" />
+              <item.Icon class="h-4 w-4 flex-shrink-0" />
               <span>{item.label}</span>
             </a>
           {/if}
@@ -224,111 +245,121 @@
   </ScrollArea>
 
   <!-- Footer -->
-  <Separator class="bg-sidebar-border" />
-  <div class="p-3 space-y-2">
-    <!-- Color theme picker via DropdownMenu -->
+  <div>
+    <!-- Color theme picker -->
     {#if !collapsed}
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          {#snippet child({ props })}
-            <Button
-              {...props}
-              variant="ghost"
-              class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-sidebar-foreground hover:bg-sidebar-accent transition-colors h-auto justify-start"
-            >
-              <Palette class="h-4 w-4" />
-              <span class="flex-1 text-left text-xs">{t('common.toggleTheme')}</span>
-              <span
-                class="h-4 w-4 rounded-full ring-1 ring-offset-1 ring-offset-sidebar"
-                style="background-color: {colorThemes.find(c => c.id === getColorTheme())?.color ?? '#3b82f6'}; --tw-ring-color: {colorThemes.find(c => c.id === getColorTheme())?.color ?? '#3b82f6'}"
-              ></span>
-            </Button>
-          {/snippet}
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content align="end" class="w-40">
-          {#each colorThemes as ct}
-            <DropdownMenu.Item onclick={() => setColorTheme(ct.id)} class="gap-2">
-              <span
-                class="h-4 w-4 rounded-full {getColorTheme() === ct.id ? 'ring-2 ring-offset-2 scale-110' : 'opacity-70'}"
-                style="background-color: {ct.color}; {getColorTheme() === ct.id ? `--tw-ring-color: ${ct.color}` : ''}"
-              ></span>
-              {ct.label}
-            </DropdownMenu.Item>
-          {/each}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+      <div class="px-3 pt-3 pb-1">
+        <div class="relative" bind:this={colorPickerRef}>
+          <Button
+            variant="ghost"
+            class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground transition-colors h-auto justify-start"
+            onclick={() => { if (!colorPickerOpen) colorPickerOpenedAt = Date.now(); colorPickerOpen = !colorPickerOpen; }}
+          >
+            <Palette class="h-4 w-4" />
+            <span class="flex-1 text-left text-xs">{t('common.toggleTheme')}</span>
+            <span
+              class="h-3.5 w-3.5 rounded-full ring-1 ring-offset-1 ring-offset-sidebar"
+              style="background-color: {colorThemes.find(c => c.id === getColorTheme())?.color ?? '#6366f1'}; --tw-ring-color: {colorThemes.find(c => c.id === getColorTheme())?.color ?? '#6366f1'}"
+            ></span>
+          </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">
+              {#each colorThemes as ct}
+                <button
+                  class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground transition-colors"
+                  onclick={() => { setColorTheme(ct.id); colorPickerOpen = false; }}
+                >
+                  <span
+                    class="h-3.5 w-3.5 rounded-full {getColorTheme() === ct.id ? 'ring-2 ring-offset-1 scale-110' : 'opacity-70'}"
+                    style="background-color: {ct.color}; {getColorTheme() === ct.id ? `--tw-ring-color: ${ct.color}` : ''}"
+                  ></span>
+                  <span class="text-xs">{ct.label}</span>
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </div>
     {/if}
 
+    <!-- User info -->
     {#if !collapsed && identity}
-      <div class="flex items-center gap-3 rounded-lg px-2 py-2">
-        <Avatar
-          src={(identity as Record<string, unknown>).avatar as string | undefined}
-          alt={identity.name ?? 'User'}
-          fallback={identity.name?.charAt(0).toUpperCase() ?? 'U'}
-          size="sm"
-        />
-        <div class="flex-1 min-w-0">
-          <p class="truncate text-sm font-medium text-sidebar-foreground">{identity.name}</p>
+      <div class="px-3 pb-3 pt-1">
+        <div class="flex items-center gap-3 rounded-lg p-2 hover:bg-sidebar-accent/50 transition-colors">
+          <Avatar
+            src={(identity as Record<string, unknown>).avatar as string | undefined}
+            alt={identity.name ?? 'User'}
+            fallback={identity.name?.charAt(0).toUpperCase() ?? 'U'}
+            size="sm"
+          />
+          <div class="flex-1 min-w-0">
+            <p class="truncate text-sm font-medium text-sidebar-foreground">{identity.name}</p>
+            <p class="truncate text-[10px] text-sidebar-foreground/50">Administrator</p>
+          </div>
+        </div>
+        <div class="flex items-center justify-between px-1 mt-1">
+          <TooltipButton tooltip={t('common.switchLanguage')} variant="ghost" size="icon-sm" onclick={toggleLocale} class="text-sidebar-foreground/60 hover:text-sidebar-foreground">
+            <span class="text-xs font-bold">{localeLabel}</span>
+          </TooltipButton>
+          <TooltipButton tooltip={t('common.toggleTheme')} variant="ghost" size="icon-sm" onclick={toggleTheme} class="text-sidebar-foreground/60 hover:text-sidebar-foreground">
+            {#if getResolvedTheme() === 'dark'}
+              <Sun class="h-4 w-4" />
+            {:else}
+              <Moon class="h-4 w-4" />
+            {/if}
+          </TooltipButton>
+          <TooltipButton tooltip={t('common.logout')} variant="ghost" size="icon-sm" onclick={onLogout} class="text-sidebar-foreground/60 hover:text-destructive">
+            <LogOut class="h-4 w-4" />
+          </TooltipButton>
         </div>
-        <TooltipButton tooltip={t('common.switchLanguage')} variant="ghost" size="icon-sm" onclick={toggleLocale} class="text-sidebar-foreground">
-          <span class="text-xs font-bold">{localeLabel}</span>
-        </TooltipButton>
-        <TooltipButton tooltip={t('common.toggleTheme')} variant="ghost" size="icon-sm" onclick={toggleTheme} class="text-sidebar-foreground">
-          {#if getResolvedTheme() === 'dark'}
-            <Sun class="h-4 w-4" />
-          {:else}
-            <Moon class="h-4 w-4" />
-          {/if}
-        </TooltipButton>
-        <TooltipButton tooltip={t('common.logout')} variant="ghost" size="icon-sm" onclick={onLogout} class="text-sidebar-foreground hover:text-destructive">
-          <LogOut class="h-4 w-4" />
-        </TooltipButton>
       </div>
     {:else if collapsed}
-      <Tooltip.Root>
-        <Tooltip.Trigger>
-          {#snippet child({ props })}
-            <Button {...props} variant="ghost" size="icon" onclick={toggleLocale} class="w-full text-sidebar-foreground">
-              <span class="text-xs font-bold">{localeLabel}</span>
-            </Button>
-          {/snippet}
-        </Tooltip.Trigger>
-        <Tooltip.Content side="right">{t('common.switchLanguage')}</Tooltip.Content>
-      </Tooltip.Root>
-      <Tooltip.Root>
-        <Tooltip.Trigger>
-          {#snippet child({ props })}
-            <Button {...props} variant="ghost" size="icon" onclick={toggleTheme} class="w-full text-sidebar-foreground">
-              {#if getResolvedTheme() === 'dark'}
-                <Sun class="h-5 w-5" />
-              {:else}
-                <Moon class="h-5 w-5" />
-              {/if}
-            </Button>
-          {/snippet}
-        </Tooltip.Trigger>
-        <Tooltip.Content side="right">{t('common.toggleTheme')}</Tooltip.Content>
-      </Tooltip.Root>
-      <Tooltip.Root>
-        <Tooltip.Trigger>
-          {#snippet child({ props })}
-            <Button {...props} variant="ghost" size="icon" onclick={onLogout} class="w-full text-sidebar-foreground hover:text-destructive">
-              <LogOut class="h-5 w-5" />
-            </Button>
-          {/snippet}
-        </Tooltip.Trigger>
-        <Tooltip.Content side="right">{t('common.logout')}</Tooltip.Content>
-      </Tooltip.Root>
+      <div class="px-1 py-3 space-y-1">
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button {...props} variant="ghost" size="icon" onclick={toggleLocale} class="w-full text-sidebar-foreground/60 hover:text-sidebar-foreground">
+                <span class="text-xs font-bold">{localeLabel}</span>
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content side="right">{t('common.switchLanguage')}</Tooltip.Content>
+        </Tooltip.Root>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button {...props} variant="ghost" size="icon" onclick={toggleTheme} class="w-full text-sidebar-foreground/60 hover:text-sidebar-foreground">
+                {#if getResolvedTheme() === 'dark'}
+                  <Sun class="h-4 w-4" />
+                {:else}
+                  <Moon class="h-4 w-4" />
+                {/if}
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content side="right">{t('common.toggleTheme')}</Tooltip.Content>
+        </Tooltip.Root>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            {#snippet child({ props })}
+              <Button {...props} variant="ghost" size="icon" onclick={onLogout} class="w-full text-sidebar-foreground/60 hover:text-destructive">
+                <LogOut class="h-4 w-4" />
+              </Button>
+            {/snippet}
+          </Tooltip.Trigger>
+          <Tooltip.Content side="right">{t('common.logout')}</Tooltip.Content>
+        </Tooltip.Root>
+      </div>
     {:else}
-      <div class="flex gap-1">
-        <TooltipButton tooltip={t('common.switchLanguage')} variant="ghost" size="icon" onclick={toggleLocale} class="flex-1 text-sidebar-foreground">
+      <div class="flex gap-1 p-3">
+        <TooltipButton tooltip={t('common.switchLanguage')} variant="ghost" size="icon" onclick={toggleLocale} class="flex-1 text-sidebar-foreground/60 hover:text-sidebar-foreground">
           <span class="text-xs font-bold">{localeLabel}</span>
         </TooltipButton>
-        <TooltipButton tooltip={t('common.toggleTheme')} variant="ghost" size="icon" onclick={toggleTheme} class="flex-1 text-sidebar-foreground">
+        <TooltipButton tooltip={t('common.toggleTheme')} variant="ghost" size="icon" onclick={toggleTheme} class="flex-1 text-sidebar-foreground/60 hover:text-sidebar-foreground">
           {#if getResolvedTheme() === 'dark'}
-            <Sun class="h-5 w-5" />
+            <Sun class="h-4 w-4" />
           {:else}
-            <Moon class="h-5 w-5" />
+            <Moon class="h-4 w-4" />
           {/if}
         </TooltipButton>
       </div>

package/src/components/StatsCard.svelte

@@ -14,7 +14,7 @@
   };
 
   const variantMap: Record<StyleVariant, string> = {
-    default: 'border border-border bg-card shadow-sm',
+    default: 'bg-card shadow-sm hover:shadow-md transition-shadow duration-300',
     outline: 'border-2 border-border bg-transparent',
     filled: 'border-0 bg-muted/50 shadow-sm',
   };
@@ -45,9 +45,9 @@
   }: Props = $props();
 </script>
 
-<div class="flex items-center gap-4 rounded-xl p-5 {variantMap[variant]} {className}">
+<div class="flex items-center gap-4 rounded-lg p-5 {variantMap[variant]} {className}">
   {#if Icon}
-    <div class="flex h-12 w-12 items-center justify-center rounded-xl {colorMap[color]}">
+    <div class="flex h-12 w-12 items-center justify-center rounded-lg {colorMap[color]}">
       <Icon class="h-6 w-6" />
     </div>
   {/if}
@@ -57,7 +57,7 @@
       <Skeleton class="mt-1 h-7 w-20" />
     {:else}
       <div class="flex items-baseline gap-2">
-        <p class="text-2xl font-bold text-foreground">{value}</p>
+        <p class="text-xl font-semibold text-foreground">{value}</p>
         {#if trend}
           <span
             class="text-xs font-medium {trend.value >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}"

package/src/components/UndoableNotification.svelte

@@ -49,7 +49,7 @@
 
 {#if !dismissed}
   <div
-    class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[100] min-w-80 max-w-lg rounded-xl border bg-card shadow-2xl overflow-hidden"
+    class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[100] min-w-80 max-w-lg rounded-lg border bg-card shadow-lg overflow-hidden"
     transition:slide={{ duration: 250 }}
   >
     <div class="flex items-center justify-between px-4 py-3 gap-3">

package/src/components/UpdatePasswordPage.svelte

@@ -32,14 +32,14 @@
   }
 </script>
 
-<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/[0.08] via-background to-primary/[0.04] p-4">
-  <div class="w-full max-w-[420px]">
-    <Card.Card class="backdrop-blur-xl border-border/50 shadow-[0_8px_32px_hsl(var(--primary)/0.08),0_2px_8px_hsl(0_0%_0%/0.06)]">
+<div class="min-h-screen flex items-center justify-center bg-background p-4">
+  <div class="w-full max-w-[380px]">
+    <Card.Card>
       <Card.CardHeader class="text-center pb-2">
-        <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-primary/10 text-primary mx-auto mb-3">
-          <ShieldCheck class="h-6 w-6" />
+        <div class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 text-primary mx-auto mb-3">
+          <ShieldCheck class="h-5 w-5" />
         </div>
-        <Card.CardTitle class="text-2xl font-bold">{t('auth.resetPassword')}</Card.CardTitle>
+        <Card.CardTitle class="text-xl">{t('auth.resetPassword')}</Card.CardTitle>
         <p class="text-sm text-muted-foreground">{t('auth.resetPasswordDescription')}</p>
       </Card.CardHeader>
       <Card.CardContent>

package/src/components/ui/avatar/avatar.svelte

@@ -19,7 +19,7 @@
 	// AvatarSize type is exported from the package index.ts
 	type AvatarSize = VariantProps<typeof avatarVariants>["size"];
 
-	type Props = WithElementRef<HTMLImgAttributes> & {
+	type Props = WithElementRef<HTMLImgAttributes, HTMLImageElement> & {
 		size?: AvatarSize;
 		fallback?: string;
 	};

package/src/components/ui/button/button.svelte

@@ -34,8 +34,8 @@
 	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
 	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 
-	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-		WithElementRef<HTMLAnchorAttributes> & {
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> &
+		WithElementRef<HTMLAnchorAttributes, HTMLAnchorElement> & {
 			variant?: ButtonVariant;
 			size?: ButtonSize;
 		};

package/src/components/ui/card/card-footer.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-footer"
-	class={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
+	class={cn("bg-muted/50 rounded-b-xl p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/components/ui/card/card.svelte

@@ -15,7 +15,7 @@
 	bind:this={ref}
 	data-slot="card"
 	data-size={size}
-	class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+	class={cn("shadow-sm bg-card text-card-foreground gap-4 overflow-hidden rounded-lg py-4 text-sm has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg group/card flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/components/ui/dialog/dialog-content.svelte

@@ -28,7 +28,7 @@
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-lg fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-lg p-6 text-sm ring-1 duration-100 sm:max-w-lg fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
 			className
 		)}
 		{...restProps}

package/src/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLButtonAttributes> & {
+	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
 		checked?: boolean;
 		onCheckedChange?: (checked: boolean) => void;
 	};

package/src/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLButtonAttributes> & {
+	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
 		inset?: boolean;
 		destructive?: boolean;
 	};

package/src/components/ui/dropdown-menu/dropdown-menu-trigger.svelte

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLButtonAttributes>;
+	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement>;
 
 	let {
 		ref = $bindable(null),

package/src/components/ui/label/label.svelte

@@ -2,7 +2,7 @@
   import { cn, type WithElementRef } from '../../../utils.js';
   import type { HTMLLabelAttributes } from 'svelte/elements';
 
-  let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLabelAttributes> = $props();
+  let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLabelAttributes, HTMLLabelElement> = $props();
 </script>
 
 <label

package/src/components/ui/select/select.svelte

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLSelectAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLSelectAttributes> & {
+	type Props = WithElementRef<HTMLSelectAttributes, HTMLSelectElement> & {
 		placeholder?: string;
 	};
 

package/src/components/ui/switch/switch.svelte

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLButtonAttributes> & {
+	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
 		checked?: boolean;
 		disabled?: boolean;
 		onCheckedChange?: (checked: boolean) => void;

package/src/components/ui/table/table-body.svelte

@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<tbody bind:this={ref} data-slot="table-body" class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
+<tbody bind:this={ref} data-slot="table-body" class={cn(className)} {...restProps}>
 	{@render children?.()}
 </tbody>

package/src/components/ui/table/table-cell.svelte

@@ -7,7 +7,7 @@
 		class: className,
 		children,
 		...restProps
-	}: WithElementRef<HTMLTdAttributes> = $props();
+	}: WithElementRef<HTMLTdAttributes, HTMLTableCellElement> = $props();
 </script>
 
 <td bind:this={ref} data-slot="table-cell" class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>

package/src/components/ui/table/table-footer.svelte

@@ -13,7 +13,7 @@
 <tfoot
 	bind:this={ref}
 	data-slot="table-footer"
-	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	class={cn("bg-muted/50 font-medium", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/components/ui/table/table-head.svelte

@@ -7,7 +7,7 @@
 		class: className,
 		children,
 		...restProps
-	}: WithElementRef<HTMLThAttributes> = $props();
+	}: WithElementRef<HTMLThAttributes, HTMLTableCellElement> = $props();
 </script>
 
 <th bind:this={ref} data-slot="table-head" class={cn("text-foreground h-9 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>

package/src/components/ui/table/table-header.svelte

@@ -13,7 +13,7 @@
 <thead
 	bind:this={ref}
 	data-slot="table-header"
-	class={cn("[&_tr]:border-b", className)}
+	class={cn(className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/components/ui/table/table-row.svelte

@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
 </script>
 
-<tr bind:this={ref} data-slot="table-row" class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)} {...restProps}>
+<tr bind:this={ref} data-slot="table-row" class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted transition-colors", className)} {...restProps}>
 	{@render children?.()}
 </tr>

package/src/components/ui/table/table.svelte

@@ -7,7 +7,7 @@
 		class: className,
 		children,
 		...restProps
-	}: WithElementRef<HTMLTableAttributes> = $props();
+	}: WithElementRef<HTMLTableAttributes, HTMLTableElement> = $props();
 </script>
 
 <div data-slot="table-container" class="relative w-full overflow-x-auto">

package/src/components/ui/tabs/tabs-trigger.svelte

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLButtonAttributes> & {
+	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
 		value: string;
 		active?: boolean;
 	};

package/src/components/ui/textarea/textarea.svelte

@@ -2,7 +2,7 @@
 	import type { HTMLTextareaAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
 
-	type Props = WithElementRef<HTMLTextareaAttributes>;
+	type Props = WithElementRef<HTMLTextareaAttributes, HTMLTextAreaElement>;
 
 	let {
 		ref = $bindable(null),