diff --git a/.github/workflows/preview-pages.yml b/.github/workflows/preview-pages.yml
deleted file mode 100644
index decd86b..0000000
--- a/.github/workflows/preview-pages.yml
+++ /dev/null
@@ -1,65 +0,0 @@
-# Deploy ShellUI Preview to GitHub Pages (for docs embedding)
-name: Deploy Preview to GitHub Pages
-
-on:
-  push:
-    branches: [ main ]
-    paths:
-      - 'NET10/ShellUI.Preview/**'
-      - 'src/ShellUI.Components/**'
-      - '.github/workflows/preview-pages.yml'
-  workflow_dispatch:
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Setup .NET
-        uses: actions/setup-dotnet@v4
-        with:
-          dotnet-version: '10.0.x'
-
-      - name: Publish Preview (Blazor WASM)
-        run: |
-          dotnet publish NET10/ShellUI.Preview/ShellUI.Preview.csproj \
-            -c Release \
-            -o ./preview-publish
-        env:
-          # For GH Pages: base href = /repo-name/ (set your repo name)
-          # Leave empty for root: https://user.github.io/repo-name/
-          BASE_HREF: /
-
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-        with:
-          # Auto-enable Pages on first run so this workflow can deploy without
-          # someone clicking through Settings → Pages first. Requires the
-          # GITHUB_TOKEN to have `pages: write` (already set above).
-          enablement: true
-
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: ./preview-publish/wwwroot
-
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4
diff --git a/NET10/BlazorInteractiveServer/Components/Demo/OverlayDemo.razor b/NET10/BlazorInteractiveServer/Components/Demo/OverlayDemo.razor
index 8fb28d7..cb13e82 100644
--- a/NET10/BlazorInteractiveServer/Components/Demo/OverlayDemo.razor
+++ b/NET10/BlazorInteractiveServer/Components/Demo/OverlayDemo.razor
@@ -124,7 +124,7 @@
         <div>
             <h3 class="text-xl font-semibold mb-2 text-card-foreground">Drawer & Sheet</h3>
             <div class="flex flex-wrap gap-2">
-                <Drawer @bind-Open="drawerOpen" Side="@DrawerSide.Bottom">
+                <Drawer @bind-Open="drawerOpen" Side="@DrawerSide.Bottom" Compositional="true">
                     <DrawerTrigger>
                         <Button Variant="@ButtonVariant.Outline">Open Drawer</Button>
                     </DrawerTrigger>
@@ -134,7 +134,7 @@
                         <Button @onclick="() => drawerOpen = false">Close</Button>
                     </DrawerContent>
                 </Drawer>
-                <Sheet @bind-Open="sheetOpen" Side="@SheetSide.Right">
+                <Sheet @bind-Open="sheetOpen" Side="@SheetSide.Right" Compositional="true">
                     <SheetTrigger>
                         <Button Variant="@ButtonVariant.Outline">Open Sheet</Button>
                     </SheetTrigger>
diff --git a/NET10/BlazorInteractiveServer/Components/Models/DataTableModels.cs b/NET10/BlazorInteractiveServer/Components/Models/DataTableModels.cs
index 218233e..a7040d8 100644
--- a/NET10/BlazorInteractiveServer/Components/Models/DataTableModels.cs
+++ b/NET10/BlazorInteractiveServer/Components/Models/DataTableModels.cs
@@ -24,3 +24,20 @@ public enum SortDirection
     Ascending,
     Descending
 }
+
+// Passed to OnDataRequest when DataTable is in ServerSide mode. The server-side data
+// loader receives filter / sort / page state and returns just the current page.
+public class DataTableRequest
+{
+    public int Skip { get; set; }
+    public int Take { get; set; }
+    public string? SortBy { get; set; }
+    public SortDirection SortDirection { get; set; } = SortDirection.None;
+    public string SearchQuery { get; set; } = "";
+}
+
+public class DataTableResponse<TItem>
+{
+    public IEnumerable<TItem> Items { get; set; } = Array.Empty<TItem>();
+    public int TotalCount { get; set; }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/Services/SonnerService.cs b/NET10/BlazorInteractiveServer/Components/Services/SonnerService.cs
index de05d84..08b0a1f 100644
--- a/NET10/BlazorInteractiveServer/Components/Services/SonnerService.cs
+++ b/NET10/BlazorInteractiveServer/Components/Services/SonnerService.cs
@@ -6,13 +6,20 @@ public class SonnerToastItem
     public string Message { get; set; } = "";
     public string? Description { get; set; }
     public string Variant { get; set; } = "default";
+    // Zero or negative disables auto-dismiss (toast stays until manually closed).
+    public TimeSpan Duration { get; set; } = TimeSpan.FromSeconds(4);
     public DateTime CreatedAt { get; } = DateTime.UtcNow;
 }
 
 public interface ISonnerService
 {
     IReadOnlyList<SonnerToastItem> Toasts { get; }
-    void Show(string message, string? description = null, string variant = "default");
+    void Show(string message, string? description = null, string variant = "default", TimeSpan? duration = null);
+    void Success(string message, string? description = null, TimeSpan? duration = null);
+    void Error(string message, string? description = null, TimeSpan? duration = null);
+    void Info(string message, string? description = null, TimeSpan? duration = null);
+    void Warning(string message, string? description = null, TimeSpan? duration = null);
+    void Remove(string id);
 }
 
 public class SonnerService : ISonnerService
@@ -21,15 +28,49 @@ public class SonnerService : ISonnerService
     public IReadOnlyList<SonnerToastItem> Toasts => _toasts;
     public event Action? OnChange;
 
-    public void Show(string message, string? description = null, string variant = "default")
+    public void Show(string message, string? description = null, string variant = "default", TimeSpan? duration = null)
     {
-        _toasts.Add(new SonnerToastItem { Message = message, Description = description, Variant = variant });
+        var toast = new SonnerToastItem
+        {
+            Message = message,
+            Description = description,
+            Variant = variant,
+            Duration = duration ?? TimeSpan.FromSeconds(4)
+        };
+        _toasts.Add(toast);
         OnChange?.Invoke();
+
+        if (toast.Duration > TimeSpan.Zero)
+        {
+            _ = AutoDismissAsync(toast.Id, toast.Duration);
+        }
     }
 
+    public void Success(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "success", duration);
+
+    public void Error(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "destructive", duration);
+
+    public void Info(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "info", duration);
+
+    public void Warning(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "warning", duration);
+
     public void Remove(string id)
     {
-        _toasts.RemoveAll(t => t.Id == id);
-        OnChange?.Invoke();
+        var removed = _toasts.RemoveAll(t => t.Id == id);
+        if (removed > 0) OnChange?.Invoke();
+    }
+
+    private async Task AutoDismissAsync(string id, TimeSpan delay)
+    {
+        try
+        {
+            await Task.Delay(delay);
+            Remove(id);
+        }
+        catch { }
     }
 }
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Combobox.razor b/NET10/BlazorInteractiveServer/Components/UI/Combobox.razor
index 010736f..eeb75df 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/Combobox.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/Combobox.razor
@@ -1,4 +1,7 @@
 @namespace BlazorInteractiveServer.Components.UI
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
@@ -75,6 +78,9 @@
     [Parameter] public bool Disabled { get; set; }
     [Parameter] public IEnumerable<string>? Options { get; set; }
     [Parameter] public bool Searchable { get; set; } = true;
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public RenderFragment? ChildContent { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
@@ -82,23 +88,72 @@
     
     private bool IsOpen { get; set; }
     private string searchQuery = "";
-    
-    private void Toggle() 
+    private DotNetObjectReference<Combobox>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
+
+    private async Task Toggle()
     {
-        if (!Disabled)
+        if (Disabled) return;
+        IsOpen = !IsOpen;
+        if (IsOpen)
+        {
+            searchQuery = "";
+            await RegisterDismissAsync();
+        }
+        else
         {
-            IsOpen = !IsOpen;
-            if (IsOpen) searchQuery = "";
+            await UnregisterDismissAsync();
         }
     }
-    
-    private void Close() => IsOpen = false;
-    
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     public async Task SelectValue(string value)
     {
         Value = value;
-        await ValueChanged.InvokeAsync(value);
         IsOpen = false;
+        await UnregisterDismissAsync();
+        await ValueChanged.InvokeAsync(value);
     }
-}
 
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Command.razor b/NET10/BlazorInteractiveServer/Components/UI/Command.razor
index 8a74fe8..0fa7813 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/Command.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/Command.razor
@@ -5,7 +5,7 @@
     <DialogContent Class="overflow-hidden p-0">
         <!-- Search Input -->
         <div class="flex items-center border-b border-border px-3 py-2">
-            <svg class="mr-2 h-4 w-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg class="mr-2 h-4 w-4 text-foreground/70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
             </svg>
             <input
diff --git a/NET10/BlazorInteractiveServer/Components/UI/DataPicker.razor b/NET10/BlazorInteractiveServer/Components/UI/DataPicker.razor
index fe40efb..1239b7b 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/DataPicker.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/DataPicker.razor
@@ -1,6 +1,9 @@
 @namespace BlazorInteractiveServer.Components.UI
+@using Microsoft.JSInterop
 @typeparam TItem
 @typeparam TKey where TKey : notnull
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
@@ -30,7 +33,7 @@
     {
         <div class="absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md animate-in fade-in-0 zoom-in-95">
             <div class="flex items-center border-b border-border px-3">
-                <svg class="mr-2 h-4 w-4 shrink-0 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg class="mr-2 h-4 w-4 shrink-0 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                 </svg>
                 <input @ref="_searchInput"
@@ -103,6 +106,9 @@
     [Parameter] public string SearchPlaceholder { get; set; } = "Search...";
     [Parameter] public string EmptyText { get; set; } = "No results found.";
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -112,6 +118,9 @@
     private int _highlightedIndex;
     private ElementReference _searchInput;
     private bool _shouldFocus;
+    private DotNetObjectReference<DataPicker<TItem, TKey>>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
 
     private string DisplayFor(TItem item) => DisplaySelector?.Invoke(item) ?? item?.ToString() ?? "";
     private TKey KeyFor(TItem item) => KeySelector(item);
@@ -124,7 +133,7 @@
         return Items.Where(i => DisplayFor(i).Contains(q, StringComparison.OrdinalIgnoreCase));
     }
 
-    private void Toggle()
+    private async Task Toggle()
     {
         if (Disabled) return;
         IsOpen = !IsOpen;
@@ -133,10 +142,51 @@
             _searchQuery = "";
             _highlightedIndex = 0;
             _shouldFocus = true;
+            await RegisterDismissAsync();
+        }
+        else
+        {
+            await UnregisterDismissAsync();
+        }
+    }
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    // Fires when the page scrolls or the window resizes — bubble-phase, so scrolling
+    // through the option list inside the popover does NOT dismiss.
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
         }
     }
 
-    private void Close() => IsOpen = false;
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -151,13 +201,14 @@
     {
         Value = item;
         IsOpen = false;
+        await UnregisterDismissAsync();
         await ValueChanged.InvokeAsync(item);
     }
 
     private async Task OnKeyDown(KeyboardEventArgs e)
     {
         var filtered = Filter().ToList();
-        if (e.Key == "Escape") { Close(); return; }
+        if (e.Key == "Escape") { await Close(); return; }
         if (e.Key == "ArrowDown") { _highlightedIndex = Math.Min(_highlightedIndex + 1, filtered.Count - 1); return; }
         if (e.Key == "ArrowUp") { _highlightedIndex = Math.Max(_highlightedIndex - 1, 0); return; }
         if (e.Key == "Enter" && filtered.Count > 0)
@@ -166,4 +217,10 @@
             await SelectItem(filtered[idx]);
         }
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
diff --git a/NET10/BlazorInteractiveServer/Components/UI/DataTable.razor b/NET10/BlazorInteractiveServer/Components/UI/DataTable.razor
index 648cac6..ffdaa5d 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/DataTable.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/DataTable.razor
@@ -33,7 +33,7 @@
                     @foreach (var column in Columns)
                     {
                         <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground @(column.Sortable ? "cursor-pointer hover:bg-accent/50" : "")"
-                            @onclick="() => { if (column.Sortable) OnSortClicked(column); }">
+                            @onclick="async () => { if (column.Sortable) await OnSortClicked(column); }">
                             <div class="flex items-center gap-2">
                                 @column.Header
                                 @if (column.Sortable)
@@ -114,7 +114,7 @@
     </div>
 
     <!-- Pagination -->
-    @if (ShowPagination && _filteredItems.Any())
+    @if (ShowPagination && (_filteredItems.Any() || (ServerSide && _serverTotalCount > 0)))
     {
         <div class="flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between">
             <div class="flex-1 text-sm text-muted-foreground">
@@ -124,7 +124,7 @@
                 }
                 else
                 {
-                    @($"Showing {_startIndex} - {_endIndex} of {_filteredItems.Count()} results")
+                    @($"Showing {_startIndex} - {_endIndex} of {(ServerSide ? _serverTotalCount : _filteredItems.Count())} results")
                 }
             </div>
             <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:space-x-6 lg:space-x-8">
@@ -138,7 +138,7 @@
                             }
                         </select>
                         <div class="absolute inset-y-0 right-1 flex items-center pointer-events-none">
-                            <svg class="h-3 w-3 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <svg class="h-3 w-3 text-foreground/70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                             </svg>
                         </div>
@@ -191,6 +191,16 @@
     [Parameter]
     public EventCallback<HashSet<TItem>> SelectedItemsChanged { get; set; }
 
+    /// When true, `Items` is ignored and the table calls `OnDataRequest` for each
+    /// filter / sort / page change. Use for datasets too large to materialize client-side.
+    [Parameter]
+    public bool ServerSide { get; set; }
+
+    /// Required when `ServerSide` is true. Receives the current DataTableRequest
+    /// (skip/take/sort/search) and returns the page of items plus total count.
+    [Parameter]
+    public Func<DataTableRequest, Task<DataTableResponse<TItem>>>? OnDataRequest { get; set; }
+
     private string _filterText = "";
     private IEnumerable<TItem> _filteredItems = new List<TItem>();
     private IEnumerable<TItem> _paginatedItems = new List<TItem>();
@@ -200,11 +210,51 @@
     private int _startIndex = 1;
     private int _endIndex = 1;
     private int _pageSize = 10;
+    private int _serverTotalCount = 0;
     private TItem? _openActionsItem = default(TItem);
 
-    protected override void OnParametersSet()
+    protected override async Task OnParametersSetAsync()
+    {
+        await RefreshAsync();
+    }
+
+    private async Task RefreshAsync()
     {
-        UpdateFilteredItems();
+        if (ServerSide && OnDataRequest is not null)
+        {
+            await LoadServerPageAsync();
+        }
+        else
+        {
+            UpdateFilteredItems();
+        }
+    }
+
+    private async Task LoadServerPageAsync()
+    {
+        var sortColumn = Columns.FirstOrDefault(c => c.SortDirection != SortDirection.None);
+        var request = new DataTableRequest
+        {
+            Skip = (_currentPage - 1) * _pageSize,
+            Take = _pageSize,
+            SortBy = sortColumn?.PropertyName,
+            SortDirection = sortColumn?.SortDirection ?? SortDirection.None,
+            SearchQuery = _filterText ?? ""
+        };
+
+        var response = await OnDataRequest!(request);
+
+        _paginatedItems = response.Items;
+        _serverTotalCount = response.TotalCount;
+        _totalPages = Math.Max(1, (int)Math.Ceiling(_serverTotalCount / (double)_pageSize));
+        _currentPage = Math.Min(_currentPage, _totalPages);
+        _startIndex = _serverTotalCount == 0 ? 0 : (_currentPage - 1) * _pageSize + 1;
+        _endIndex = Math.Min(_currentPage * _pageSize, _serverTotalCount);
+        // Keep the "select-all" checkbox and count displays honest — they only ever
+        // reference the currently loaded page in server-side mode.
+        _filteredItems = _paginatedItems;
+
+        StateHasChanged();
     }
 
     private void UpdateFilteredItems()
@@ -213,7 +263,7 @@
         _filteredItems = string.IsNullOrWhiteSpace(_filterText)
             ? Items
             : Items.Where(item =>
-                Columns.Any(col => 
+                Columns.Any(col =>
                 {
                     // Simple text search - check if any property contains the filter text
                     var property = typeof(TItem).GetProperty(col.PropertyName);
@@ -243,31 +293,29 @@
         StateHasChanged();
     }
 
-    private void OnFilterInput(ChangeEventArgs e)
+    private async Task OnFilterInput(ChangeEventArgs e)
     {
         _filterText = e.Value?.ToString() ?? "";
-        _currentPage = 1; // Reset to first page
-        UpdateFilteredItems();
+        _currentPage = 1;
+        await RefreshAsync();
     }
 
-    private void OnFilterChanged(string value)
+    private async Task OnFilterChanged(string value)
     {
         _filterText = value;
-        _currentPage = 1; // Reset to first page
-        UpdateFilteredItems();
+        _currentPage = 1;
+        await RefreshAsync();
     }
 
-    private void OnSortClicked(DataTableColumn<TItem> column)
+    private async Task OnSortClicked(DataTableColumn<TItem> column)
     {
         if (!column.Sortable) return;
 
-        // Reset other columns
         foreach (var col in Columns.Where(c => c != column))
         {
             col.SortDirection = SortDirection.None;
         }
 
-        // Cycle sort direction
         column.SortDirection = column.SortDirection switch
         {
             SortDirection.None => SortDirection.Ascending,
@@ -276,7 +324,7 @@
             _ => SortDirection.Ascending
         };
 
-        UpdateFilteredItems();
+        await RefreshAsync();
     }
 
     private void OnSelectAllChanged(bool selected)
@@ -311,31 +359,31 @@
 
     private bool IsSelected(TItem item) => _selectedItems.Contains(item);
 
-    private void OnPageSizeChanged(ChangeEventArgs e)
+    private async Task OnPageSizeChanged(ChangeEventArgs e)
     {
         if (int.TryParse(e.Value?.ToString(), out var size))
         {
             _pageSize = size;
             _currentPage = 1;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
-    private void OnPreviousPage()
+    private async Task OnPreviousPage()
     {
         if (_currentPage > 1)
         {
             _currentPage--;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
-    private void OnNextPage()
+    private async Task OnNextPage()
     {
         if (_currentPage < _totalPages)
         {
             _currentPage++;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
@@ -351,3 +399,4 @@
         StateHasChanged();
     }
 }
+
diff --git a/NET10/BlazorInteractiveServer/Components/UI/DatePicker.razor b/NET10/BlazorInteractiveServer/Components/UI/DatePicker.razor
index 26fc5a7..65b5bb9 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/DatePicker.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/DatePicker.razor
@@ -1,24 +1,27 @@
 @namespace BlazorInteractiveServer.Components.UI
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <div class="relative">
         <button type="button"
                 @onclick="Toggle"
                 disabled="@Disabled"
-                class="@Shell.Cn("flex h-10 w-full items-center justify-between 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 ? "cursor-not-allowed opacity-50" : "")">
-            <span class="@(Value == null ? "text-muted-foreground" : "")">
+                class="@Shell.Cn("flex h-10 w-full items-center gap-2 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 ? "cursor-not-allowed opacity-50" : "")">
+            <span class="@("flex-1 text-left " + (Value == null ? "text-muted-foreground" : ""))">
                 @(Value?.ToString("MMM dd, yyyy") ?? Placeholder)
             </span>
-            <div class="flex items-center gap-1">
+            <div class="ml-auto flex items-center gap-1 shrink-0">
                 @if (AllowClear && Value.HasValue && !Disabled)
                 {
                     <div role="button" @onclick:stopPropagation @onclick="Clear" class="text-muted-foreground hover:text-foreground">
-                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                         </svg>
                     </div>
                 }
-                <svg class="h-4 w-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg class="h-4 w-4 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                 </svg>
             </div>
@@ -81,21 +84,68 @@
     [Parameter] public string Placeholder { get; set; } = "Pick a date";
     [Parameter] public bool Disabled { get; set; }
     [Parameter] public bool AllowClear { get; set; } = true;
+    /// Dismiss the calendar when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the calendar open across scroll.
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
     
     private bool IsOpen { get; set; }
     private DateTime currentMonth = DateTime.Now;
-    
-    private void Toggle() => IsOpen = !IsOpen;
-    private void Close() => IsOpen = false;
-    
+    private DotNetObjectReference<DatePicker>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
+
+    private async Task Toggle()
+    {
+        IsOpen = !IsOpen;
+        if (IsOpen) await RegisterDismissAsync();
+        else await UnregisterDismissAsync();
+    }
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     private async Task SelectDate(DateTime date)
     {
         Value = date;
-        await ValueChanged.InvokeAsync(date);
         IsOpen = false;
+        await UnregisterDismissAsync();
+        await ValueChanged.InvokeAsync(date);
     }
 
     private async Task Clear()
@@ -103,9 +153,14 @@
         Value = null;
         await ValueChanged.InvokeAsync(null);
     }
-    
+
     private void PreviousMonth() => currentMonth = currentMonth.AddMonths(-1);
     private void NextMonth() => currentMonth = currentMonth.AddMonths(1);
     private int GetDaysInMonth() => DateTime.DaysInMonth(currentMonth.Year, currentMonth.Month);
-}
 
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/DateRangePicker.razor b/NET10/BlazorInteractiveServer/Components/UI/DateRangePicker.razor
index 0dd7c4c..c0bb4cd 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/DateRangePicker.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/DateRangePicker.razor
@@ -1,19 +1,21 @@
 @namespace BlazorInteractiveServer.Components.UI
-@using BlazorInteractiveServer.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
             @onclick="ToggleCalendar"
             disabled="@Disabled"
-            class="@Shell.Cn("flex h-10 w-full items-center justify-between 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 cursor-not-allowed" : "")">
-        <span class="@(StartDate == null && EndDate == null ? "text-muted-foreground" : "")">
+            class="@Shell.Cn("flex h-10 w-full items-center gap-2 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 cursor-not-allowed" : "")">
+        <span class="@("flex-1 text-left " + (StartDate == null && EndDate == null ? "text-muted-foreground" : ""))">
             @GetDisplayText()
         </span>
-        <div class="flex items-center gap-1">
+        <div class="ml-auto flex items-center gap-1 shrink-0">
             @if (AllowClear && (StartDate.HasValue || EndDate.HasValue))
             {
-                <button type="button" 
-                        @onclick="ClearRange" 
+                <button type="button"
+                        @onclick="ClearRange"
                         @onclick:stopPropagation="true"
                         class="p-0.5 hover:bg-accent rounded transition-colors">
                     <svg class="h-3.5 w-3.5 text-muted-foreground hover:text-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -21,7 +23,7 @@
                     </svg>
                 </button>
             }
-            <svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg class="h-4 w-4 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
             </svg>
         </div>
@@ -73,7 +75,7 @@
 
 @if (_isOpen)
 {
-    <div class="fixed inset-0 z-40" @onclick="() => _isOpen = false"></div>
+    <div class="fixed inset-0 z-40" @onclick="CloseBackdrop"></div>
 }
 
 @code {
@@ -84,6 +86,9 @@
     [Parameter] public string Placeholder { get; set; } = "Pick a date range";
     [Parameter] public bool AllowClear { get; set; } = true;
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the calendar when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the calendar open across scroll.
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -91,6 +96,9 @@
     private bool _isOpen;
     private DateTime _currentMonth = DateTime.Now;
     private bool _selectingStart = true;
+    private DotNetObjectReference<DateRangePicker>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
     
     private string GetDisplayText()
     {
@@ -128,7 +136,43 @@
         return baseClass;
     }
     
-    private void ToggleCalendar() => _isOpen = !_isOpen;
+    private async Task ToggleCalendar()
+    {
+        _isOpen = !_isOpen;
+        if (_isOpen) await RegisterDismissAsync();
+        else await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (_isOpen)
+        {
+            _isOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     private void PreviousMonth() => _currentMonth = _currentMonth.AddMonths(-1);
     private void NextMonth() => _currentMonth = _currentMonth.AddMonths(1);
     
@@ -176,11 +220,22 @@
         var firstDay = new DateTime(_currentMonth.Year, _currentMonth.Month, 1);
         var lastDay = firstDay.AddMonths(1).AddDays(-1);
         var startDayOfWeek = (int)firstDay.DayOfWeek;
-        
+
         for (int i = 0; i < startDayOfWeek; i++) days.Add(null);
         for (int day = 1; day <= lastDay.Day; day++) days.Add(new DateTime(_currentMonth.Year, _currentMonth.Month, day));
-        
+
         return days;
     }
-}
 
+    private async Task CloseBackdrop()
+    {
+        _isOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/DialogContent.razor b/NET10/BlazorInteractiveServer/Components/UI/DialogContent.razor
index 6eb2fc1..ca643c5 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/DialogContent.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/DialogContent.razor
@@ -1,5 +1,7 @@
 @namespace BlazorInteractiveServer.Components.UI
-@using BlazorInteractiveServer.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Dialog?.Open == true)
 {
@@ -20,6 +22,8 @@
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Dialog != null)
@@ -27,6 +31,25 @@
             await Dialog.SetOpen(false);
         }
     }
-}
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Dialog?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.lockBodyScroll"); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); _isLocked = false; } catch { }
+        }
+    }
 
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); } catch { }
+        }
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/Components/UI/DrawerContent.razor b/NET10/BlazorInteractiveServer/Components/UI/DrawerContent.razor
index ca38146..206fae0 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/DrawerContent.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/DrawerContent.razor
@@ -1,5 +1,7 @@
 @namespace BlazorInteractiveServer.Components.UI
-@using BlazorInteractiveServer.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Parent?.Open == true)
 {
@@ -19,8 +21,31 @@
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Parent?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.lockBodyScroll"); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); } catch { }
+        }
+    }
 }
diff --git a/NET10/BlazorInteractiveServer/Components/UI/MultiSelect.razor b/NET10/BlazorInteractiveServer/Components/UI/MultiSelect.razor
index 8750345..300c04b 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/MultiSelect.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/MultiSelect.razor
@@ -1,6 +1,9 @@
 @namespace BlazorInteractiveServer.Components.UI
+@using Microsoft.JSInterop
 @typeparam TItem
 @typeparam TKey where TKey : notnull
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
@@ -48,7 +51,7 @@
     {
         <div class="absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md animate-in fade-in-0 zoom-in-95">
             <div class="flex items-center border-b border-border px-3">
-                <svg class="mr-2 h-4 w-4 shrink-0 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg class="mr-2 h-4 w-4 shrink-0 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                 </svg>
                 <input @ref="_searchInput"
@@ -121,6 +124,9 @@
     [Parameter] public string SearchPlaceholder { get; set; } = "Search...";
     [Parameter] public string EmptyText { get; set; } = "No results found.";
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -130,6 +136,9 @@
     private int _highlightedIndex;
     private ElementReference _searchInput;
     private bool _shouldFocus;
+    private DotNetObjectReference<MultiSelect<TItem, TKey>>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
 
     private string DisplayFor(TItem item) => DisplaySelector?.Invoke(item) ?? item?.ToString() ?? "";
     private TKey KeyFor(TItem item) => KeySelector(item);
@@ -142,7 +151,7 @@
         return Items.Where(i => DisplayFor(i).Contains(q, StringComparison.OrdinalIgnoreCase));
     }
 
-    private void Toggle()
+    private async Task Toggle()
     {
         if (Disabled) return;
         IsOpen = !IsOpen;
@@ -151,10 +160,49 @@
             _searchQuery = "";
             _highlightedIndex = 0;
             _shouldFocus = true;
+            await RegisterDismissAsync();
+        }
+        else
+        {
+            await UnregisterDismissAsync();
         }
     }
 
-    private void Close() => IsOpen = false;
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -186,7 +234,7 @@
     private async Task OnKeyDown(KeyboardEventArgs e)
     {
         var filtered = Filter().ToList();
-        if (e.Key == "Escape") { Close(); return; }
+        if (e.Key == "Escape") { await Close(); return; }
         if (e.Key == "ArrowDown") { _highlightedIndex = Math.Min(_highlightedIndex + 1, filtered.Count - 1); return; }
         if (e.Key == "ArrowUp") { _highlightedIndex = Math.Max(_highlightedIndex - 1, 0); return; }
         if (e.Key == "Enter" && filtered.Count > 0)
@@ -195,4 +243,10 @@
             await ToggleItem(filtered[idx]);
         }
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
diff --git a/NET10/BlazorInteractiveServer/Components/UI/SheetContent.razor b/NET10/BlazorInteractiveServer/Components/UI/SheetContent.razor
index 80a1c94..f44099e 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/SheetContent.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/SheetContent.razor
@@ -1,5 +1,7 @@
 @namespace BlazorInteractiveServer.Components.UI
-@using BlazorInteractiveServer.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Parent?.Open == true)
 {
@@ -18,8 +20,31 @@
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Parent?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.lockBodyScroll"); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); } catch { }
+        }
+    }
 }
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Sonner.razor b/NET10/BlazorInteractiveServer/Components/UI/Sonner.razor
index 78b93ff..8756d4b 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/Sonner.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/Sonner.razor
@@ -1,6 +1,5 @@
 @namespace BlazorInteractiveServer.Components.UI
 @using BlazorInteractiveServer.Components.Services
-@using BlazorInteractiveServer.Components
 @implements IDisposable
 @inject SonnerService SonnerService
 
@@ -14,7 +13,7 @@
         var stackClass = i > 0 ? (IsTop ? "-mt-20 group-hover:mt-0" : "-mb-20 group-hover:mb-0") : "";
         <div @key="toast.Id"
              style="z-index: @(i + 1)"
-             class="@stackClass @GetToastClasses(toast.Variant) pointer-events-auto relative flex min-w-0 w-full items-center gap-3 overflow-hidden rounded-lg p-4 shadow-lg transition-all duration-300 animate-in fade-in-0 @SonnerVariants.GetToastAnimation(Position) shrink-0">
+             class="@stackClass @GetToastClasses(toast.Variant) pointer-events-auto relative flex min-w-0 w-full items-center gap-3 overflow-hidden rounded-lg p-4 shadow-lg transition-all duration-300 motion-reduce:transition-none animate-in fade-in-0 motion-reduce:animate-none @SonnerVariants.GetToastAnimation(Position) shrink-0">
             <div class="grid flex-1 gap-1">
                 @if (!string.IsNullOrEmpty(toast.Message))
                 {
@@ -51,6 +50,8 @@
     {
         "destructive" => "bg-destructive text-destructive-foreground",
         "success" => "bg-green-500/20 text-green-700 dark:bg-green-900/30 dark:text-green-100",
+        "info" => "bg-blue-500/20 text-blue-700 dark:bg-blue-900/30 dark:text-blue-100",
+        "warning" => "bg-yellow-500/20 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-100",
         _ => "bg-background text-foreground"
     };
 }
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Stepper.razor b/NET10/BlazorInteractiveServer/Components/UI/Stepper.razor
index 907d4b9..5d26546 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/Stepper.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/Stepper.razor
@@ -1,7 +1,7 @@
 @namespace BlazorInteractiveServer.Components.UI
 @using BlazorInteractiveServer.Components.Models
 
-<CascadingValue Value="this" IsFixed="true">
+<CascadingValue Value="this">
     <div class="@Shell.Cn("w-full", Class)">
         @if (StepItems.Count > 0)
         {
@@ -13,13 +13,22 @@
                     var isActive = i == _activeStep;
                     var isCompleted = i < _highestStepReached;
                     var isClickable = i <= _highestStepReached;
+                    var capturedIndex = i;
+
+                    string stateClass;
+                    if (isActive)
+                        stateClass = "border-primary bg-primary text-primary-foreground ring-2 ring-primary/20 ring-offset-2 ring-offset-background";
+                    else if (isCompleted)
+                        stateClass = "border-primary bg-primary/10 text-primary";
+                    else
+                        stateClass = "border-muted bg-background text-muted-foreground";
 
                     <div class="flex flex-col items-center relative">
                         <button type="button"
-                                class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", isCompleted ? "border-primary bg-primary text-primary-foreground" : isActive ? "border-primary bg-background text-primary" : "border-muted bg-background text-muted-foreground", isClickable ? "cursor-pointer hover:border-primary/50" : "cursor-not-allowed")"
+                                class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", stateClass, isClickable ? "cursor-pointer" : "cursor-not-allowed", isClickable && !isActive ? "hover:border-primary/50" : "")"
                                 disabled="@(!isClickable)"
-                                @onclick="async () => await GoToStepAsync(i)">
-                            @if (isCompleted)
+                                @onclick="async () => await GoToStepAsync(capturedIndex)">
+                            @if (isCompleted && !isActive)
                             {
                                 <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
diff --git a/NET10/BlazorInteractiveServer/Components/UI/StepperStep.razor b/NET10/BlazorInteractiveServer/Components/UI/StepperStep.razor
index adeafd5..aec19c9 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/StepperStep.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/StepperStep.razor
@@ -5,13 +5,21 @@
     var isActive = ParentStepper?.ActiveStep == index;
     var isCompleted = ParentStepper != null && index < ParentStepper.HighestStepReached;
     var isClickable = ParentStepper != null && index <= ParentStepper.HighestStepReached;
+
+    string stateClass;
+    if (isActive)
+        stateClass = "border-primary bg-primary text-primary-foreground ring-2 ring-primary/20 ring-offset-2 ring-offset-background";
+    else if (isCompleted)
+        stateClass = "border-primary bg-primary/10 text-primary";
+    else
+        stateClass = "border-muted bg-background text-muted-foreground";
 }
 <div class="flex flex-col items-center relative">
     <button type="button"
-            class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", isCompleted ? "border-primary bg-primary text-primary-foreground" : isActive ? "border-primary bg-background text-primary" : "border-muted bg-background text-muted-foreground", isClickable ? "cursor-pointer hover:border-primary/50" : "cursor-not-allowed")"
+            class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", stateClass, isClickable ? "cursor-pointer" : "cursor-not-allowed", isClickable && !isActive ? "hover:border-primary/50" : "")"
             disabled="@(!isClickable)"
             @onclick="async () => { if (ParentStepper != null) await ParentStepper.GoToStepAsync(index); }">
-        @if (isCompleted)
+        @if (isCompleted && !isActive)
         {
             <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
diff --git a/NET10/BlazorInteractiveServer/Components/UI/Toast.razor b/NET10/BlazorInteractiveServer/Components/UI/Toast.razor
index 8e74a53..f4729ec 100644
--- a/NET10/BlazorInteractiveServer/Components/UI/Toast.razor
+++ b/NET10/BlazorInteractiveServer/Components/UI/Toast.razor
@@ -1,10 +1,9 @@
 @namespace BlazorInteractiveServer.Components.UI
-@using BlazorInteractiveServer.Components
 
 @if (IsVisible)
 {
     <div class="@Shell.Cn("fixed z-50 flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:flex-col md:max-w-[420px]", GetPositionClass())">
-        <div class="@Shell.Cn("pointer-events-auto group relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-border p-6 pr-8 shadow-lg transition-all", GetVariantClass(), Class)"
+        <div class="@Shell.Cn("pointer-events-auto group relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-border p-6 pr-8 shadow-lg transition-all motion-reduce:transition-none", GetVariantClass(), Class)"
              @attributes="AdditionalAttributes">
             <div class="grid gap-1">
                 @if (!string.IsNullOrEmpty(Title))
@@ -60,4 +59,3 @@
         _ => "bottom-0 right-0"
     };
 }
-
diff --git a/NET10/BlazorInteractiveServer/Components/UI/TypedSelect.razor b/NET10/BlazorInteractiveServer/Components/UI/TypedSelect.razor
new file mode 100644
index 0000000..3a76a46
--- /dev/null
+++ b/NET10/BlazorInteractiveServer/Components/UI/TypedSelect.razor
@@ -0,0 +1,76 @@
+@namespace BlazorInteractiveServer.Components.UI
+@typeparam TValue
+@using System.Globalization
+
+<div class="relative w-full">
+    <select value="@FormatValue()"
+            @onchange="OnChange"
+            disabled="@Disabled"
+            class="@ComputedClass"
+            @attributes="AdditionalAttributes">
+        @ChildContent
+    </select>
+    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+        <svg class="h-4 w-4 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+    </div>
+</div>
+
+@code {
+    [Parameter] public TValue? Value { get; set; }
+    [Parameter] public EventCallback<TValue?> ValueChanged { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string ComputedClass => Shell.Cn(
+        "flex h-10 w-full appearance-none rounded-md border border-input bg-background pl-3 pr-9 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        Class
+    );
+
+    // InvariantCulture on IFormattable so decimals/dates round-trip cleanly across a
+    // German user's `0,5` vs an English user's `0.5` (the browser sends whatever the
+    // user's <option value=""> literal was).
+    private string? FormatValue() => Value switch
+    {
+        null => null,
+        IFormattable f => f.ToString(null, CultureInfo.InvariantCulture),
+        _ => Value.ToString()
+    };
+
+    private async Task OnChange(ChangeEventArgs e)
+    {
+        var raw = e.Value?.ToString();
+        if (raw is null)
+        {
+            await ValueChanged.InvokeAsync(default);
+            return;
+        }
+
+        // Unwrap Nullable<T> so switch matches T, not T?.
+        var targetType = Nullable.GetUnderlyingType(typeof(TValue)) ?? typeof(TValue);
+
+        try
+        {
+            object? parsed = targetType switch
+            {
+                _ when targetType == typeof(string) => raw,
+                _ when targetType.IsEnum => string.IsNullOrEmpty(raw) ? null : Enum.Parse(targetType, raw),
+                _ when targetType == typeof(Guid) => string.IsNullOrEmpty(raw) ? Guid.Empty : Guid.Parse(raw),
+                _ when targetType == typeof(bool) => bool.Parse(raw),
+                _ when string.IsNullOrEmpty(raw) => null,
+                _ => Convert.ChangeType(raw, targetType, CultureInfo.InvariantCulture)
+            };
+            await ValueChanged.InvokeAsync(parsed is null ? default : (TValue?)parsed);
+        }
+        catch
+        {
+            // Placeholder <option value=""> and other unparseable values gracefully
+            // resolve to default(TValue) instead of throwing across the render loop.
+            await ValueChanged.InvokeAsync(default);
+        }
+    }
+}
diff --git a/NET10/BlazorInteractiveServer/wwwroot/shellui.js b/NET10/BlazorInteractiveServer/wwwroot/shellui.js
index e90b373..73ce727 100644
--- a/NET10/BlazorInteractiveServer/wwwroot/shellui.js
+++ b/NET10/BlazorInteractiveServer/wwwroot/shellui.js
@@ -140,6 +140,41 @@ window.ShellUI = {
             window.removeEventListener("keydown", listener);
             this._shortcutHandlers.delete(handle);
         }
+    },
+
+    _scrollLockCount: 0,
+    _originalOverflow: "",
+    lockBodyScroll: function () {
+        if (this._scrollLockCount === 0) {
+            this._originalOverflow = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+        }
+        this._scrollLockCount++;
+    },
+    unlockBodyScroll: function () {
+        if (this._scrollLockCount === 0) return;
+        this._scrollLockCount--;
+        if (this._scrollLockCount === 0) {
+            document.body.style.overflow = this._originalOverflow;
+        }
+    },
+
+    // Fire a .NET callback when the window scrolls or resizes. Used by dropdowns
+    // to close when the page scrolls (Blazor can't reposition popovers natively).
+    _dismissHandlers: new Map(),
+    onDismissEvents: function (handle, dotNetRef) {
+        const listener = () => dotNetRef.invokeMethodAsync("OnDismissEvent");
+        window.addEventListener("scroll", listener);
+        window.addEventListener("resize", listener);
+        this._dismissHandlers.set(handle, listener);
+    },
+    offDismissEvents: function (handle) {
+        const listener = this._dismissHandlers.get(handle);
+        if (listener) {
+            window.removeEventListener("scroll", listener);
+            window.removeEventListener("resize", listener);
+            this._dismissHandlers.delete(handle);
+        }
     }
 };
 
diff --git a/NET10/ShellUI.Preview/App.razor b/NET10/ShellUI.Preview/App.razor
deleted file mode 100644
index edffe82..0000000
--- a/NET10/ShellUI.Preview/App.razor
+++ /dev/null
@@ -1,11 +0,0 @@
-<Router AppAssembly="@typeof(App).Assembly">
-    <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.PreviewLayout)" />
-        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
-    </Found>
-    <NotFound>
-        <LayoutView Layout="@typeof(Layout.PreviewLayout)">
-            <NotFound />
-        </LayoutView>
-    </NotFound>
-</Router>
diff --git a/NET10/ShellUI.Preview/Components/DashboardBlockPreview.razor b/NET10/ShellUI.Preview/Components/DashboardBlockPreview.razor
deleted file mode 100644
index 014011f..0000000
--- a/NET10/ShellUI.Preview/Components/DashboardBlockPreview.razor
+++ /dev/null
@@ -1,32 +0,0 @@
-@using ShellUI.Components
-
-@* Renders dashboard block inside a bounded container (shadcn-style preview) *@
-<div class="h-full min-h-0 flex">
-<SidebarProvider Class="h-full min-h-0 flex-1">
-    <AppSidebar />
-    <SidebarInset>
-        <header class="@(StickyHeader ? "sticky top-0 z-10 bg-background" : "") flex h-16 shrink-0 items-center gap-2 border-b border-border px-4">
-            <SidebarTrigger Class="-ml-1 shrink-0" />
-            <Separator Orientation="vertical" Class="mr-2 h-4 shrink-0" />
-            <Breadcrumb Class="flex flex-1 min-w-0 items-center">
-                <BreadcrumbItem Href="/">Home</BreadcrumbItem>
-                <BreadcrumbItem Href="/dashboard">Dashboard</BreadcrumbItem>
-                <BreadcrumbItem IsLast="true">Preview</BreadcrumbItem>
-            </Breadcrumb>
-            <ThemeToggle Size="sm" Variant="outline" Class="ml-auto" />
-        </header>
-        <div class="flex flex-1 flex-col gap-4 overflow-auto p-4">
-            <div class="grid auto-rows-min gap-4 md:grid-cols-3">
-                <div class="aspect-video rounded-xl bg-muted/50" />
-                <div class="aspect-video rounded-xl bg-muted/50" />
-                <div class="aspect-video rounded-xl bg-muted/50" />
-            </div>
-            <div class="min-h-[120px] flex-1 rounded-xl bg-muted/50" />
-        </div>
-    </SidebarInset>
-</SidebarProvider>
-</div>
-
-@code {
-    [Parameter] public bool StickyHeader { get; set; }
-}
diff --git a/NET10/ShellUI.Preview/Components/DialogPreview.razor b/NET10/ShellUI.Preview/Components/DialogPreview.razor
deleted file mode 100644
index 1f95431..0000000
--- a/NET10/ShellUI.Preview/Components/DialogPreview.razor
+++ /dev/null
@@ -1,26 +0,0 @@
-@using ShellUI.Components
-
-<Dialog Open="_open" OpenChanged="@(v => { _open = v; StateHasChanged(); })">
-    <DialogTrigger>
-        <Button>Open Dialog</Button>
-    </DialogTrigger>
-    <DialogContent>
-        <DialogHeader>
-            <DialogTitle>Dialog Title</DialogTitle>
-            <DialogDescription>Preview for docs embedding.</DialogDescription>
-        </DialogHeader>
-        <p class="text-sm text-muted-foreground">Content goes here.</p>
-        <DialogFooter>
-            <DialogClose>
-                <Button Variant="@ButtonVariant.Outline">Cancel</Button>
-            </DialogClose>
-            <DialogClose>
-                <Button>Confirm</Button>
-            </DialogClose>
-        </DialogFooter>
-    </DialogContent>
-</Dialog>
-
-@code {
-    private bool _open;
-}
diff --git a/NET10/ShellUI.Preview/Layout/MainLayout.razor b/NET10/ShellUI.Preview/Layout/MainLayout.razor
deleted file mode 100644
index 41ebcea..0000000
--- a/NET10/ShellUI.Preview/Layout/MainLayout.razor
+++ /dev/null
@@ -1,14 +0,0 @@
-@inherits LayoutComponentBase
-<div class="min-h-screen bg-background text-foreground flex">
-    <aside class="w-48 border-r border-border p-4 shrink-0">
-        <nav class="space-y-2 text-sm">
-            <a href="/" class="block text-muted-foreground hover:text-foreground">Home</a>
-            <a href="/preview/button" class="block text-muted-foreground hover:text-foreground">Button</a>
-            <a href="/preview/dialog" class="block text-muted-foreground hover:text-foreground">Dialog</a>
-            <a href="/preview/accordion" class="block text-muted-foreground hover:text-foreground">Accordion</a>
-        </nav>
-    </aside>
-    <main class="flex-1 p-8">
-        @Body
-    </main>
-</div>
diff --git a/NET10/ShellUI.Preview/Layout/PreviewLayout.razor b/NET10/ShellUI.Preview/Layout/PreviewLayout.razor
deleted file mode 100644
index b2b5c2d..0000000
--- a/NET10/ShellUI.Preview/Layout/PreviewLayout.razor
+++ /dev/null
@@ -1,11 +0,0 @@
-@inherits LayoutComponentBase
-
-<div class="min-h-screen bg-background text-foreground flex flex-col">
-    <header class="flex items-center gap-4 border-b border-border px-4 py-2 shrink-0">
-        <a href="/" class="text-sm text-muted-foreground hover:text-foreground transition-colors">← Components</a>
-    </header>
-    <main class="flex-1 flex items-center justify-center p-8">
-        @Body
-    </main>
-</div>
-
diff --git a/NET10/ShellUI.Preview/Pages/ComponentPreview.razor b/NET10/ShellUI.Preview/Pages/ComponentPreview.razor
deleted file mode 100644
index 6ee4409..0000000
--- a/NET10/ShellUI.Preview/Pages/ComponentPreview.razor
+++ /dev/null
@@ -1,249 +0,0 @@
-@page "/preview/{ComponentName}"
-@layout Layout.PreviewLayout
-@using ShellUI.Components
-@using ShellUI.Components.Models
-@using ShellUI.Preview.Components
-
-<div class="preview-container">
-    @switch (_id)
-    {
-        case "button":
-            <Button Variant="@_buttonVariant" Size="@_buttonSize">Button</Button>
-            break;
-        case "badge":
-            <Badge Variant="@_badgeVariant">Badge</Badge>
-            break;
-        case "switch":
-            <Switch />
-            break;
-        case "checkbox":
-            <Checkbox Label="Accept terms" />
-            break;
-        case "input":
-            <Input Placeholder="Type something..." />
-            break;
-        case "textarea":
-            <Textarea Placeholder="Enter your message..." Class="min-h-[100px] w-full max-w-md" />
-            break;
-        case "alert":
-            <Alert Variant="@_alertVariant" Title="Heads up!">You can add components to your app using the cli.</Alert>
-            break;
-        case "card":
-            <Card Class="w-[350px]">
-                <CardHeader>
-                    <CardTitle>Create project</CardTitle>
-                    <CardDescription>Deploy your new project in one-click.</CardDescription>
-                </CardHeader>
-                <CardContent>
-                    <p class="text-sm text-muted-foreground">Card Content Area</p>
-                </CardContent>
-                <CardFooter>
-                    <Button>Deploy</Button>
-                </CardFooter>
-            </Card>
-            break;
-        case "tabs":
-            <Tabs Items="@_tabItems" Class="w-[400px]" />
-            break;
-        case "combobox":
-            <Combobox Options="@_comboboxOptions" Placeholder="Select framework..." />
-            break;
-        case "data-picker":
-            <div class="w-[280px]">
-                <DataPicker TItem="Framework" TKey="string"
-                            Items="@_frameworks"
-                            Value="@_pickedFramework"
-                            ValueChanged="@(f => _pickedFramework = f)"
-                            KeySelector="@(f => f.Id)"
-                            DisplaySelector="@(f => f.Name)"
-                            Placeholder="Select framework..." />
-                @if (_pickedFramework is not null)
-                {
-                    <p class="mt-3 text-xs text-muted-foreground">Picked: <span class="font-mono">@_pickedFramework.Name</span> (@_pickedFramework.Category)</p>
-                }
-            </div>
-            break;
-        case "multi-select":
-            <div class="w-[320px]">
-                <MultiSelect TItem="Framework" TKey="string"
-                             Items="@_frameworks"
-                             Values="@_pickedFrameworks"
-                             ValuesChanged="@(vs => _pickedFrameworks = vs)"
-                             KeySelector="@(f => f.Id)"
-                             DisplaySelector="@(f => f.Name)"
-                             Placeholder="Pick multiple frameworks..." />
-                <p class="mt-3 text-xs text-muted-foreground">Selected: @_pickedFrameworks.Count</p>
-            </div>
-            break;
-        case "tag-input":
-            <div class="w-[320px]">
-                <TagInput Tags="@_tags"
-                          TagsChanged="@(ts => _tags = ts)"
-                          Placeholder="Add tag, Enter to confirm..." />
-                <p class="mt-3 text-xs text-muted-foreground">Enter to add, Backspace to remove last, paste comma/newline-separated to bulk-add.</p>
-            </div>
-            break;
-        case "command-palette":
-            <div class="flex flex-col items-center gap-3">
-                <p class="text-sm text-muted-foreground">Press <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-xs">Ctrl</kbd> + <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-xs">K</kbd> (or <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-xs">⌘K</kbd>) to open.</p>
-                <CommandPalette Commands="@_paletteCommands" CommandSelected="@(c => _lastCommand = c.Title)" />
-                @if (_lastCommand is not null)
-                {
-                    <p class="text-xs text-muted-foreground">Last selected: <span class="font-mono">@_lastCommand</span></p>
-                }
-            </div>
-            break;
-        case "select":
-            <div class="w-full max-w-[200px]">
-                <Select @bind-Value="_selectValue">
-                    <option value="">Choose...</option>
-                    <option value="a">Option A</option>
-                    <option value="b">Option B</option>
-                    <option value="c">Option C</option>
-                </Select>
-            </div>
-            break;
-        case "datepicker":
-            <DatePicker />
-            break;
-        case "skeleton":
-            <div class="flex items-center space-x-4">
-                <Skeleton Class="h-12 w-12 rounded-full" />
-                <div class="space-y-2">
-                    <Skeleton Class="h-4 w-[250px]" />
-                    <Skeleton Class="h-4 w-[200px]" />
-                </div>
-            </div>
-            break;
-        case "dialog":
-            <DialogPreview />
-            break;
-        case "accordion":
-            <Accordion>
-                <AccordionItem Title="Is it accessible?">
-                    <p class="text-sm text-muted-foreground">Yes. It adheres to the WAI-ARIA design pattern.</p>
-                </AccordionItem>
-                <AccordionItem Title="Is it styled?">
-                    <p class="text-sm text-muted-foreground">Yes. It comes with default styles.</p>
-                </AccordionItem>
-                <AccordionItem Title="Is it animated?">
-                    <p class="text-sm text-muted-foreground">Yes. Animated with Tailwind CSS transitions.</p>
-                </AccordionItem>
-            </Accordion>
-            break;
-        case "avatar":
-            <div class="flex items-center gap-4">
-                <Avatar Fallback="AB" />
-                <Avatar Fallback="CD" Class="h-10 w-10" />
-                <Avatar Fallback="EF" Class="h-14 w-14" />
-            </div>
-            break;
-        case "breadcrumb":
-            <Breadcrumb>
-                <BreadcrumbItem Href="/">Home</BreadcrumbItem>
-                <BreadcrumbItem Href="/components">Components</BreadcrumbItem>
-                <BreadcrumbItem IsLast="true">Breadcrumb</BreadcrumbItem>
-            </Breadcrumb>
-            break;
-        case "progress":
-            <div class="space-y-4 w-full max-w-xs">
-                <Progress Value="@(33)" />
-                <Progress Value="@(66)" />
-                <Progress Value="@(100)" />
-            </div>
-            break;
-        case "slider":
-            <div class="w-full max-w-xs">
-                <Slider Value="@(50)" />
-            </div>
-            break;
-        case "separator":
-            <div class="flex flex-col gap-4 w-full max-w-xs">
-                <div class="space-y-1">
-                    <h4 class="text-sm font-medium">Section</h4>
-                    <p class="text-sm text-muted-foreground">Content above separator.</p>
-                </div>
-                <Separator />
-                <div class="space-y-1">
-                    <h4 class="text-sm font-medium">Section</h4>
-                    <p class="text-sm text-muted-foreground">Content below separator.</p>
-                </div>
-            </div>
-            break;
-        case "label":
-            <div class="space-y-2">
-                <Label>Your email</Label>
-                <Input Placeholder="name@example.com" Type="email" />
-            </div>
-            break;
-        case "toggle":
-            <Toggle>Toggle</Toggle>
-            break;
-        case "dashboard-01":
-        case "dashboard-02":
-            <div class="w-full max-w-4xl">
-                <div class="rounded-xl border border-border bg-card shadow-sm overflow-hidden" style="min-height: 520px; height: 560px;">
-                    <DashboardBlockPreview StickyHeader="@(_id == "dashboard-02")" />
-                </div>
-                <p class="mt-2 text-xs text-muted-foreground">@(_id == "dashboard-02" ? "Sticky header (breadcrumb bar stays fixed on scroll)" : "Header scrolls with content")</p>
-            </div>
-            break;
-        default:
-            <div class="text-muted-foreground text-sm">
-                Component <span class="font-mono bg-muted px-1 rounded">@ComponentName</span> not found.
-            </div>
-            break;
-    }
-</div>
-
-@code {
-    [Parameter] public string ComponentName { get; set; } = "";
-
-    [SupplyParameterFromQuery] public string? Variant { get; set; }
-    [SupplyParameterFromQuery] public string? Size { get; set; }
-
-    private string _id => ComponentName?.ToLowerInvariant() ?? "";
-
-    private ButtonVariant _buttonVariant => Enum.TryParse<ButtonVariant>(Variant, true, out var v) ? v : ButtonVariant.Default;
-    private ButtonSize _buttonSize => Enum.TryParse<ButtonSize>(Size, true, out var s) ? s : ButtonSize.Default;
-    private BadgeVariant _badgeVariant => Enum.TryParse<BadgeVariant>(Variant, true, out var b) ? b : BadgeVariant.Default;
-    private AlertVariant _alertVariant => Enum.TryParse<AlertVariant>(Variant, true, out var a) ? a : AlertVariant.Default;
-
-    private List<TabItem> _tabItems => new()
-    {
-        new() { Id = "account", Label = "Account", Content = b => b.AddMarkupContent(0, "<div class='p-4 border rounded mt-2'>Account settings here.</div>") },
-        new() { Id = "password", Label = "Password", Content = b => b.AddMarkupContent(0, "<div class='p-4 border rounded mt-2'>Change password here.</div>") }
-    };
-
-    private List<string> _comboboxOptions => new() { "Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro" };
-
-    private string _selectValue { get; set; } = "";
-
-    private record Framework(string Id, string Name, string Category);
-
-    private List<Framework> _frameworks => new()
-    {
-        new("next", "Next.js", "React"),
-        new("sveltekit", "SvelteKit", "Svelte"),
-        new("nuxt", "Nuxt.js", "Vue"),
-        new("remix", "Remix", "React"),
-        new("astro", "Astro", "Multi"),
-        new("qwik", "Qwik", "Fresh"),
-        new("solidstart", "SolidStart", "Solid"),
-        new("blazor", "Blazor", ".NET"),
-    };
-    private Framework? _pickedFramework;
-    private List<Framework> _pickedFrameworks = new();
-
-    private List<string> _tags = new() { "blazor", "shellui" };
-
-    private List<CommandItem> _paletteCommands => new()
-    {
-        new() { Title = "Go to Home", Description = "Navigate to home page", Shortcut = "Ctrl+H" },
-        new() { Title = "Toggle Theme", Description = "Switch light/dark mode", Shortcut = "Ctrl+T" },
-        new() { Title = "Search Components", Description = "Open component search" },
-        new() { Title = "Open Settings", Description = "Application preferences" },
-        new() { Title = "Sign Out", Description = "End your session" },
-    };
-    private string? _lastCommand;
-}
diff --git a/NET10/ShellUI.Preview/Pages/Home.razor b/NET10/ShellUI.Preview/Pages/Home.razor
deleted file mode 100644
index ca30643..0000000
--- a/NET10/ShellUI.Preview/Pages/Home.razor
+++ /dev/null
@@ -1,59 +0,0 @@
-@page "/"
-
-<PageTitle>ShellUI Components</PageTitle>
-
-<div class="w-fit max-w-5xl mx-auto px-6 py-10">
-    <div class="mb-8">
-        <h1 class="text-2xl font-semibold tracking-tight text-foreground">ShellUI Components</h1>
-        <p class="mt-1 text-sm text-muted-foreground">Click a component to view its preview.</p>
-    </div>
-
-    <Separator Class="mb-6" />
-
-    <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2">
-        @foreach (var item in _components)
-        {
-            <a href="/preview/@item.Id"
-               class="flex flex-col items-center gap-2 rounded-lg border border-border bg-card px-3 py-3 text-center text-xs font-medium text-foreground transition-colors hover:border-primary/50 hover:bg-accent/50 min-w-0">
-                <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted/60 text-muted-foreground [&>svg]:size-4">
-                    @((MarkupString)item.IconSvg)
-                </span>
-                <span class="truncate w-full">@item.Label</span>
-            </a>
-        }
-    </div>
-</div>
-
-@code {
-    private readonly List<(string Id, string Label, string IconSvg)> _components = new()
-    {
-        ("button", "Button", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"8\" width=\"16\" height=\"8\" rx=\"2\"/></svg>"),
-        ("badge", "Badge", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L5 9h7z\"/></svg>"),
-        ("switch", "Switch", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"6\"/><circle cx=\"8\" cy=\"12\" r=\"4\" fill=\"currentColor\"/></svg>"),
-        ("checkbox", "Checkbox", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/><path d=\"M9 12l2 2 4-4\"/></svg>"),
-        ("input", "Input", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"6\" width=\"16\" height=\"12\" rx=\"2\"/><path d=\"M8 10h8M8 14h4\"/></svg>"),
-        ("textarea", "Textarea", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/><path d=\"M8 8h8M8 12h8M8 16h4\"/></svg>"),
-        ("alert", "Alert", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 9v2M12 17h.01\"/><path d=\"M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"/></svg>"),
-        ("card", "Card", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"/><path d=\"M2 10h20\"/></svg>"),
-        ("tabs", "Tabs", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"1\"/><path d=\"M2 10h20\"/><rect x=\"4\" y=\"8\" width=\"6\" height=\"4\" fill=\"currentColor\" opacity=\"0.3\"/></svg>"),
-        ("combobox", "Combobox", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 6h16M4 12h16M4 18h8\"/><path d=\"M18 15l3 3-3 3\"/></svg>"),
-        ("data-picker", "DataPicker", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"6\" rx=\"1\"/><path d=\"M7 14h10M7 18h6\"/><circle cx=\"18\" cy=\"18\" r=\"1.5\" fill=\"currentColor\"/></svg>"),
-        ("multi-select", "MultiSelect", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"5\" width=\"7\" height=\"4\" rx=\"1\"/><rect x=\"12\" y=\"5\" width=\"9\" height=\"4\" rx=\"1\"/><path d=\"M3 14h18M3 18h12\"/></svg>"),
-        ("tag-input", "TagInput", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z\"/><circle cx=\"7\" cy=\"7\" r=\"1.5\" fill=\"currentColor\"/></svg>"),
-        ("command-palette", "CommandPalette", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M8 12h8M8 15h5\"/><rect x=\"6\" y=\"7\" width=\"12\" height=\"3\" rx=\"1\" fill=\"currentColor\" opacity=\"0.2\"/></svg>"),
-        ("select", "Select", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"6\" width=\"16\" height=\"12\" rx=\"2\"/><path d=\"M9 10h6M9 14h4\"/><path d=\"M12 16l2-2 2 2\"/></svg>"),
-        ("datepicker", "DatePicker", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"18\" rx=\"2\"/><path d=\"M16 2v4M8 2v4M4 10h16\"/></svg>"),
-        ("skeleton", "Skeleton", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\" stroke-dasharray=\"4 2\"/></svg>"),
-        ("dialog", "Dialog", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"/><path d=\"M8 8h8M8 12h6\"/></svg>"),
-        ("accordion", "Accordion", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 6h16M4 12h16M4 18h10\"/><path d=\"M16 10l2 2-2 2\"/></svg>"),
-        ("avatar", "Avatar", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 20c0-4 4-6 8-6s8 2 8 6\"/></svg>"),
-        ("breadcrumb", "Breadcrumb", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 12h8M4 12l4-4M4 12l4 4\"/><path d=\"M16 12h4\"/></svg>"),
-        ("progress", "Progress", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"8\" width=\"20\" height=\"8\" rx=\"4\"/><rect x=\"4\" y=\"10\" width=\"8\" height=\"4\" rx=\"2\" fill=\"currentColor\"/></svg>"),
-        ("slider", "Slider", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 12h16\"/><circle cx=\"8\" cy=\"12\" r=\"2\" fill=\"currentColor\"/></svg>"),
-        ("separator", "Separator", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 12h16\"/></svg>"),
-        ("label", "Label", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M4 6h8l2 4-2 4H4\"/><path d=\"M14 6h6v12h-6\"/></svg>"),
-        ("toggle", "Toggle", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"4\" y=\"6\" width=\"16\" height=\"12\" rx=\"2\"/><circle cx=\"10\" cy=\"12\" r=\"3\" fill=\"currentColor\"/></svg>"),
-        ("dashboard-01", "Dashboard 01", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"/><path d=\"M2 10h20\"/><path d=\"M8 14h8\"/></svg>"),
-        ("dashboard-02", "Dashboard 02", "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"/><path d=\"M2 10h20\"/><rect x=\"4\" y=\"10\" width=\"16\" height=\"2\" fill=\"currentColor\" opacity=\"0.3\"/></svg>"),
-    };
-}
diff --git a/NET10/ShellUI.Preview/Pages/NotFound.razor b/NET10/ShellUI.Preview/Pages/NotFound.razor
deleted file mode 100644
index 917ada1..0000000
--- a/NET10/ShellUI.Preview/Pages/NotFound.razor
+++ /dev/null
@@ -1,5 +0,0 @@
-@page "/not-found"
-@layout MainLayout
-
-<h3>Not Found</h3>
-<p>Sorry, the content you are looking for does not exist.</p>
\ No newline at end of file
diff --git a/NET10/ShellUI.Preview/Program.cs b/NET10/ShellUI.Preview/Program.cs
deleted file mode 100644
index 16b0e85..0000000
--- a/NET10/ShellUI.Preview/Program.cs
+++ /dev/null
@@ -1,11 +0,0 @@
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
-using ShellUI.Preview;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
-await builder.Build().RunAsync();
diff --git a/NET10/ShellUI.Preview/Properties/launchSettings.json b/NET10/ShellUI.Preview/Properties/launchSettings.json
deleted file mode 100644
index 730f848..0000000
--- a/NET10/ShellUI.Preview/Properties/launchSettings.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/launchsettings.json",
-  "profiles": {
-    "http": {
-      "commandName": "Project",
-      "dotnetRunMessages": true,
-      "launchBrowser": true,
-      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "http://localhost:5222",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
-    },
-    "https": {
-      "commandName": "Project",
-      "dotnetRunMessages": true,
-      "launchBrowser": true,
-      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "https://localhost:7208;http://localhost:5222",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
-    }
-  }
-}
diff --git a/NET10/ShellUI.Preview/ShellUI.Preview.csproj b/NET10/ShellUI.Preview/ShellUI.Preview.csproj
deleted file mode 100644
index 073b212..0000000
--- a/NET10/ShellUI.Preview/ShellUI.Preview.csproj
+++ /dev/null
@@ -1,20 +0,0 @@
-<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
-
-  <PropertyGroup>
-    <TargetFramework>net10.0</TargetFramework>
-    <Nullable>enable</Nullable>
-    <ImplicitUsings>enable</ImplicitUsings>
-    <OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
-    <RootNamespace>ShellUI.Preview</RootNamespace>
-  </PropertyGroup>
-
-  <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.0" PrivateAssets="all" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <ProjectReference Include="..\..\src\ShellUI.Components\ShellUI.Components.csproj" />
-  </ItemGroup>
-
-</Project>
diff --git a/NET10/ShellUI.Preview/_Imports.razor b/NET10/ShellUI.Preview/_Imports.razor
deleted file mode 100644
index 9777ed8..0000000
--- a/NET10/ShellUI.Preview/_Imports.razor
+++ /dev/null
@@ -1,13 +0,0 @@
-@using System.Net.Http
-@using System.Net.Http.Json
-@using Microsoft.AspNetCore.Components.Forms
-@using Microsoft.AspNetCore.Components.Routing
-@using Microsoft.AspNetCore.Components.Web
-@using Microsoft.AspNetCore.Components.Web.Virtualization
-@using Microsoft.AspNetCore.Components.WebAssembly.Http
-@using Microsoft.JSInterop
-@using ShellUI.Preview
-@using ShellUI.Preview.Pages
-@using ShellUI.Preview.Layout
-@using ShellUI.Preview.Components
-@using ShellUI.Components
diff --git a/NET10/ShellUI.Preview/tailwind.config.js b/NET10/ShellUI.Preview/tailwind.config.js
deleted file mode 100644
index e3e016d..0000000
--- a/NET10/ShellUI.Preview/tailwind.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    './Components/**/*.{razor,html,cshtml}',
-    './Pages/**/*.{razor,html,cshtml}',
-  ],
-  darkMode: 'class',
-}
diff --git a/NET10/ShellUI.Preview/wwwroot/css/app.css b/NET10/ShellUI.Preview/wwwroot/css/app.css
deleted file mode 100644
index 7bb7dde..0000000
--- a/NET10/ShellUI.Preview/wwwroot/css/app.css
+++ /dev/null
@@ -1,2721 +0,0 @@
-/*! tailwindcss v4.1.0 | MIT License | https://tailwindcss.com */
-@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-  @layer base {
-    *, ::before, ::after, ::backdrop {
-      --tw-translate-x: 0;
-      --tw-translate-y: 0;
-      --tw-translate-z: 0;
-      --tw-rotate-x: rotateX(0);
-      --tw-rotate-y: rotateY(0);
-      --tw-rotate-z: rotateZ(0);
-      --tw-skew-x: skewX(0);
-      --tw-skew-y: skewY(0);
-      --tw-space-y-reverse: 0;
-      --tw-space-x-reverse: 0;
-      --tw-border-style: solid;
-      --tw-gradient-position: initial;
-      --tw-gradient-from: #0000;
-      --tw-gradient-via: #0000;
-      --tw-gradient-to: #0000;
-      --tw-gradient-stops: initial;
-      --tw-gradient-via-stops: initial;
-      --tw-gradient-from-position: 0%;
-      --tw-gradient-via-position: 50%;
-      --tw-gradient-to-position: 100%;
-      --tw-leading: initial;
-      --tw-font-weight: initial;
-      --tw-tracking: initial;
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
-      --tw-blur: initial;
-      --tw-brightness: initial;
-      --tw-contrast: initial;
-      --tw-grayscale: initial;
-      --tw-hue-rotate: initial;
-      --tw-invert: initial;
-      --tw-opacity: initial;
-      --tw-saturate: initial;
-      --tw-sepia: initial;
-      --tw-drop-shadow: initial;
-      --tw-drop-shadow-color: initial;
-      --tw-drop-shadow-alpha: 100%;
-      --tw-drop-shadow-size: initial;
-      --tw-backdrop-blur: initial;
-      --tw-backdrop-brightness: initial;
-      --tw-backdrop-contrast: initial;
-      --tw-backdrop-grayscale: initial;
-      --tw-backdrop-hue-rotate: initial;
-      --tw-backdrop-invert: initial;
-      --tw-backdrop-opacity: initial;
-      --tw-backdrop-saturate: initial;
-      --tw-backdrop-sepia: initial;
-      --tw-duration: initial;
-      --tw-ease: initial;
-    }
-  }
-}
-@layer theme, base, components, utilities;
-@layer theme {
-  :root, :host {
-    --font-sans: var(--font-sans);
-    --font-serif: var(--font-serif);
-    --font-mono: var(--font-mono);
-    --color-yellow-400: oklch(85.2% 0.199 91.936);
-    --color-yellow-500: oklch(79.5% 0.184 86.047);
-    --color-yellow-600: oklch(68.1% 0.162 75.834);
-    --color-yellow-700: oklch(55.4% 0.135 66.442);
-    --color-green-50: oklch(98.2% 0.018 155.826);
-    --color-green-100: oklch(96.2% 0.044 156.743);
-    --color-green-400: oklch(79.2% 0.209 151.711);
-    --color-green-500: oklch(72.3% 0.219 149.579);
-    --color-green-600: oklch(62.7% 0.194 149.214);
-    --color-green-700: oklch(52.7% 0.154 150.069);
-    --color-green-900: oklch(39.3% 0.095 152.535);
-    --color-blue-400: oklch(70.7% 0.165 254.624);
-    --color-blue-500: oklch(62.3% 0.214 259.815);
-    --color-blue-600: oklch(54.6% 0.245 262.881);
-    --color-blue-700: oklch(48.8% 0.243 264.376);
-    --color-gray-400: oklch(70.7% 0.022 261.325);
-    --color-gray-800: oklch(27.8% 0.033 256.848);
-    --color-black: #000;
-    --color-white: #fff;
-    --spacing: 0.25rem;
-    --container-xs: 20rem;
-    --container-sm: 24rem;
-    --container-md: 28rem;
-    --container-lg: 32rem;
-    --container-4xl: 56rem;
-    --text-xs: 0.75rem;
-    --text-xs--line-height: calc(1 / 0.75);
-    --text-sm: 0.875rem;
-    --text-sm--line-height: calc(1.25 / 0.875);
-    --text-base: 1rem;
-    --text-base--line-height: calc(1.5 / 1);
-    --text-lg: 1.125rem;
-    --text-lg--line-height: calc(1.75 / 1.125);
-    --text-xl: 1.25rem;
-    --text-xl--line-height: calc(1.75 / 1.25);
-    --text-2xl: 1.5rem;
-    --text-2xl--line-height: calc(2 / 1.5);
-    --text-3xl: 1.875rem;
-    --text-3xl--line-height: calc(2.25 / 1.875);
-    --text-4xl: 2.25rem;
-    --text-4xl--line-height: calc(2.5 / 2.25);
-    --text-5xl: 3rem;
-    --text-5xl--line-height: 1;
-    --font-weight-normal: 400;
-    --font-weight-medium: 500;
-    --font-weight-semibold: 600;
-    --font-weight-bold: 700;
-    --tracking-tight: -0.025em;
-    --shadow-2xs: var(--shadow-2xs);
-    --shadow-xs: var(--shadow-xs);
-    --shadow-sm: var(--shadow-sm);
-    --shadow-md: var(--shadow-md);
-    --shadow-lg: var(--shadow-lg);
-    --shadow-xl: var(--shadow-xl);
-    --shadow-2xl: var(--shadow-2xl);
-    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-    --animate-spin: spin 1s linear infinite;
-    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-    --animate-bounce: bounce 1s infinite;
-    --blur-sm: 8px;
-    --blur-md: 12px;
-    --default-transition-duration: 150ms;
-    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    --default-font-family: var(--font-sans);
-    --default-mono-font-family: var(--font-mono);
-    --shadow: var(--shadow);
-  }
-}
-@layer base {
-  *, ::after, ::before, ::backdrop, ::file-selector-button {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    border: 0 solid;
-  }
-  html, :host {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
-    font-feature-settings: var(--default-font-feature-settings, normal);
-    font-variation-settings: var(--default-font-variation-settings, normal);
-    -webkit-tap-highlight-color: transparent;
-  }
-  hr {
-    height: 0;
-    color: inherit;
-    border-top-width: 1px;
-  }
-  abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-  h1, h2, h3, h4, h5, h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-  a {
-    color: inherit;
-    -webkit-text-decoration: inherit;
-    text-decoration: inherit;
-  }
-  b, strong {
-    font-weight: bolder;
-  }
-  code, kbd, samp, pre {
-    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
-    font-feature-settings: var(--default-mono-font-feature-settings, normal);
-    font-variation-settings: var(--default-mono-font-variation-settings, normal);
-    font-size: 1em;
-  }
-  small {
-    font-size: 80%;
-  }
-  sub, sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.5em;
-  }
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-  :-moz-focusring {
-    outline: auto;
-  }
-  progress {
-    vertical-align: baseline;
-  }
-  summary {
-    display: list-item;
-  }
-  ol, ul, menu {
-    list-style: none;
-  }
-  img, svg, video, canvas, audio, iframe, embed, object {
-    display: block;
-    vertical-align: middle;
-  }
-  img, video {
-    max-width: 100%;
-    height: auto;
-  }
-  button, input, select, optgroup, textarea, ::file-selector-button {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    border-radius: 0;
-    background-color: transparent;
-    opacity: 1;
-  }
-  :where(select:is([multiple], [size])) optgroup {
-    font-weight: bolder;
-  }
-  :where(select:is([multiple], [size])) optgroup option {
-    padding-inline-start: 20px;
-  }
-  ::file-selector-button {
-    margin-inline-end: 4px;
-  }
-  ::placeholder {
-    opacity: 1;
-  }
-  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
-    ::placeholder {
-      color: color-mix(in oklab, currentColor 50%, transparent);
-    }
-  }
-  textarea {
-    resize: vertical;
-  }
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  ::-webkit-date-and-time-value {
-    min-height: 1lh;
-    text-align: inherit;
-  }
-  ::-webkit-datetime-edit {
-    display: inline-flex;
-  }
-  ::-webkit-datetime-edit-fields-wrapper {
-    padding: 0;
-  }
-  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
-    padding-block: 0;
-  }
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
-    appearance: button;
-  }
-  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
-    height: auto;
-  }
-  [hidden]:where(:not([hidden='until-found'])) {
-    display: none !important;
-  }
-}
-@layer utilities {
-  .pointer-events-auto {
-    pointer-events: auto;
-  }
-  .pointer-events-none {
-    pointer-events: none;
-  }
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-  .absolute {
-    position: absolute;
-  }
-  .fixed {
-    position: fixed;
-  }
-  .relative {
-    position: relative;
-  }
-  .static {
-    position: static;
-  }
-  .sticky {
-    position: sticky;
-  }
-  .inset-0 {
-    inset: calc(var(--spacing) * 0);
-  }
-  .inset-x-0 {
-    inset-inline: calc(var(--spacing) * 0);
-  }
-  .inset-y-0 {
-    inset-block: calc(var(--spacing) * 0);
-  }
-  .top-0 {
-    top: calc(var(--spacing) * 0);
-  }
-  .top-1\/2 {
-    top: calc(1/2 * 100%);
-  }
-  .top-2 {
-    top: calc(var(--spacing) * 2);
-  }
-  .top-4 {
-    top: calc(var(--spacing) * 4);
-  }
-  .top-5 {
-    top: calc(var(--spacing) * 5);
-  }
-  .top-8 {
-    top: calc(var(--spacing) * 8);
-  }
-  .top-\[1px\] {
-    top: 1px;
-  }
-  .top-\[50\%\] {
-    top: 50%;
-  }
-  .top-full {
-    top: 100%;
-  }
-  .right-0 {
-    right: calc(var(--spacing) * 0);
-  }
-  .right-1 {
-    right: calc(var(--spacing) * 1);
-  }
-  .right-2 {
-    right: calc(var(--spacing) * 2);
-  }
-  .right-4 {
-    right: calc(var(--spacing) * 4);
-  }
-  .right-full {
-    right: 100%;
-  }
-  .bottom-0 {
-    bottom: calc(var(--spacing) * 0);
-  }
-  .bottom-4 {
-    bottom: calc(var(--spacing) * 4);
-  }
-  .bottom-full {
-    bottom: 100%;
-  }
-  .left-0 {
-    left: calc(var(--spacing) * 0);
-  }
-  .left-1\/2 {
-    left: calc(1/2 * 100%);
-  }
-  .left-2 {
-    left: calc(var(--spacing) * 2);
-  }
-  .left-4 {
-    left: calc(var(--spacing) * 4);
-  }
-  .left-\[50\%\] {
-    left: 50%;
-  }
-  .left-full {
-    left: 100%;
-  }
-  .z-10 {
-    z-index: 10;
-  }
-  .z-40 {
-    z-index: 40;
-  }
-  .z-50 {
-    z-index: 50;
-  }
-  .container {
-    width: 100%;
-    @media (width >= 40rem) {
-      max-width: 40rem;
-    }
-    @media (width >= 48rem) {
-      max-width: 48rem;
-    }
-    @media (width >= 64rem) {
-      max-width: 64rem;
-    }
-    @media (width >= 80rem) {
-      max-width: 80rem;
-    }
-    @media (width >= 96rem) {
-      max-width: 96rem;
-    }
-  }
-  .mx-auto {
-    margin-inline: auto;
-  }
-  .my-1 {
-    margin-block: calc(var(--spacing) * 1);
-  }
-  .my-4 {
-    margin-block: calc(var(--spacing) * 4);
-  }
-  .mt-1 {
-    margin-top: calc(var(--spacing) * 1);
-  }
-  .mt-2 {
-    margin-top: calc(var(--spacing) * 2);
-  }
-  .mt-4 {
-    margin-top: calc(var(--spacing) * 4);
-  }
-  .mt-6 {
-    margin-top: calc(var(--spacing) * 6);
-  }
-  .mt-8 {
-    margin-top: calc(var(--spacing) * 8);
-  }
-  .mt-12 {
-    margin-top: calc(var(--spacing) * 12);
-  }
-  .mt-24 {
-    margin-top: calc(var(--spacing) * 24);
-  }
-  .mt-auto {
-    margin-top: auto;
-  }
-  .mr-2 {
-    margin-right: calc(var(--spacing) * 2);
-  }
-  .mr-3 {
-    margin-right: calc(var(--spacing) * 3);
-  }
-  .mb-1 {
-    margin-bottom: calc(var(--spacing) * 1);
-  }
-  .mb-2 {
-    margin-bottom: calc(var(--spacing) * 2);
-  }
-  .mb-3 {
-    margin-bottom: calc(var(--spacing) * 3);
-  }
-  .mb-4 {
-    margin-bottom: calc(var(--spacing) * 4);
-  }
-  .mb-6 {
-    margin-bottom: calc(var(--spacing) * 6);
-  }
-  .mb-8 {
-    margin-bottom: calc(var(--spacing) * 8);
-  }
-  .mb-24 {
-    margin-bottom: calc(var(--spacing) * 24);
-  }
-  .-ml-1 {
-    margin-left: calc(var(--spacing) * -1);
-  }
-  .ml-1 {
-    margin-left: calc(var(--spacing) * 1);
-  }
-  .ml-2 {
-    margin-left: calc(var(--spacing) * 2);
-  }
-  .ml-3 {
-    margin-left: calc(var(--spacing) * 3);
-  }
-  .ml-64 {
-    margin-left: calc(var(--spacing) * 64);
-  }
-  .ml-auto {
-    margin-left: auto;
-  }
-  .block {
-    display: block;
-  }
-  .flex {
-    display: flex;
-  }
-  .grid {
-    display: grid;
-  }
-  .hidden {
-    display: none;
-  }
-  .inline-block {
-    display: inline-block;
-  }
-  .inline-flex {
-    display: inline-flex;
-  }
-  .table {
-    display: table;
-  }
-  .table-cell {
-    display: table-cell;
-  }
-  .table-row {
-    display: table-row;
-  }
-  .aspect-square {
-    aspect-ratio: 1 / 1;
-  }
-  .h-1\.5 {
-    height: calc(var(--spacing) * 1.5);
-  }
-  .h-1\/2 {
-    height: calc(1/2 * 100%);
-  }
-  .h-2 {
-    height: calc(var(--spacing) * 2);
-  }
-  .h-2\.5 {
-    height: calc(var(--spacing) * 2.5);
-  }
-  .h-3 {
-    height: calc(var(--spacing) * 3);
-  }
-  .h-3\.5 {
-    height: calc(var(--spacing) * 3.5);
-  }
-  .h-4 {
-    height: calc(var(--spacing) * 4);
-  }
-  .h-5 {
-    height: calc(var(--spacing) * 5);
-  }
-  .h-6 {
-    height: calc(var(--spacing) * 6);
-  }
-  .h-7 {
-    height: calc(var(--spacing) * 7);
-  }
-  .h-8 {
-    height: calc(var(--spacing) * 8);
-  }
-  .h-9 {
-    height: calc(var(--spacing) * 9);
-  }
-  .h-10 {
-    height: calc(var(--spacing) * 10);
-  }
-  .h-11 {
-    height: calc(var(--spacing) * 11);
-  }
-  .h-12 {
-    height: calc(var(--spacing) * 12);
-  }
-  .h-14 {
-    height: calc(var(--spacing) * 14);
-  }
-  .h-16 {
-    height: calc(var(--spacing) * 16);
-  }
-  .h-20 {
-    height: calc(var(--spacing) * 20);
-  }
-  .h-24 {
-    height: calc(var(--spacing) * 24);
-  }
-  .h-32 {
-    height: calc(var(--spacing) * 32);
-  }
-  .h-64 {
-    height: calc(var(--spacing) * 64);
-  }
-  .h-96 {
-    height: calc(var(--spacing) * 96);
-  }
-  .h-\[1px\] {
-    height: 1px;
-  }
-  .h-auto {
-    height: auto;
-  }
-  .h-full {
-    height: 100%;
-  }
-  .h-px {
-    height: 1px;
-  }
-  .h-screen {
-    height: 100vh;
-  }
-  .max-h-60 {
-    max-height: calc(var(--spacing) * 60);
-  }
-  .max-h-\[300px\] {
-    max-height: 300px;
-  }
-  .max-h-screen {
-    max-height: 100vh;
-  }
-  .min-h-\[80px\] {
-    min-height: 80px;
-  }
-  .min-h-screen {
-    min-height: 100vh;
-  }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
-  }
-  .w-1\.5 {
-    width: calc(var(--spacing) * 1.5);
-  }
-  .w-1\/2 {
-    width: calc(1/2 * 100%);
-  }
-  .w-2 {
-    width: calc(var(--spacing) * 2);
-  }
-  .w-2\.5 {
-    width: calc(var(--spacing) * 2.5);
-  }
-  .w-2\/3 {
-    width: calc(2/3 * 100%);
-  }
-  .w-3 {
-    width: calc(var(--spacing) * 3);
-  }
-  .w-3\.5 {
-    width: calc(var(--spacing) * 3.5);
-  }
-  .w-3\/4 {
-    width: calc(3/4 * 100%);
-  }
-  .w-4 {
-    width: calc(var(--spacing) * 4);
-  }
-  .w-5 {
-    width: calc(var(--spacing) * 5);
-  }
-  .w-6 {
-    width: calc(var(--spacing) * 6);
-  }
-  .w-7 {
-    width: calc(var(--spacing) * 7);
-  }
-  .w-8 {
-    width: calc(var(--spacing) * 8);
-  }
-  .w-9 {
-    width: calc(var(--spacing) * 9);
-  }
-  .w-10 {
-    width: calc(var(--spacing) * 10);
-  }
-  .w-11 {
-    width: calc(var(--spacing) * 11);
-  }
-  .w-12 {
-    width: calc(var(--spacing) * 12);
-  }
-  .w-16 {
-    width: calc(var(--spacing) * 16);
-  }
-  .w-20 {
-    width: calc(var(--spacing) * 20);
-  }
-  .w-24 {
-    width: calc(var(--spacing) * 24);
-  }
-  .w-56 {
-    width: calc(var(--spacing) * 56);
-  }
-  .w-64 {
-    width: calc(var(--spacing) * 64);
-  }
-  .w-72 {
-    width: calc(var(--spacing) * 72);
-  }
-  .w-80 {
-    width: calc(var(--spacing) * 80);
-  }
-  .w-\[1px\] {
-    width: 1px;
-  }
-  .w-\[70px\] {
-    width: 70px;
-  }
-  .w-\[100px\] {
-    width: 100px;
-  }
-  .w-full {
-    width: 100%;
-  }
-  .w-max {
-    width: max-content;
-  }
-  .max-w-4xl {
-    max-width: var(--container-4xl);
-  }
-  .max-w-lg {
-    max-width: var(--container-lg);
-  }
-  .max-w-max {
-    max-width: max-content;
-  }
-  .max-w-md {
-    max-width: var(--container-md);
-  }
-  .max-w-sm {
-    max-width: var(--container-sm);
-  }
-  .max-w-xs {
-    max-width: var(--container-xs);
-  }
-  .min-w-0 {
-    min-width: calc(var(--spacing) * 0);
-  }
-  .min-w-\[8rem\] {
-    min-width: 8rem;
-  }
-  .min-w-\[640px\] {
-    min-width: 640px;
-  }
-  .flex-1 {
-    flex: 1;
-  }
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
-  .shrink-0 {
-    flex-shrink: 0;
-  }
-  .caption-bottom {
-    caption-side: bottom;
-  }
-  .origin-top-right {
-    transform-origin: top right;
-  }
-  .-translate-x-1\/2 {
-    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .-translate-x-full {
-    --tw-translate-x: -100%;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .translate-x-0 {
-    --tw-translate-x: calc(var(--spacing) * 0);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .translate-x-5 {
-    --tw-translate-x: calc(var(--spacing) * 5);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .translate-x-\[-50\%\] {
-    --tw-translate-x: -50%;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .-translate-y-1\/2 {
-    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .translate-y-\[-50\%\] {
-    --tw-translate-y: -50%;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .scale-\[1\.02\] {
-    scale: 1.02;
-  }
-  .rotate-180 {
-    rotate: 180deg;
-  }
-  .transform {
-    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
-  }
-  .animate-bounce {
-    animation: var(--animate-bounce);
-  }
-  .animate-pulse {
-    animation: var(--animate-pulse);
-  }
-  .animate-spin {
-    animation: var(--animate-spin);
-  }
-  .cursor-default {
-    cursor: default;
-  }
-  .cursor-not-allowed {
-    cursor: not-allowed;
-  }
-  .cursor-pointer {
-    cursor: pointer;
-  }
-  .touch-none {
-    touch-action: none;
-  }
-  .list-none {
-    list-style-type: none;
-  }
-  .appearance-none {
-    appearance: none;
-  }
-  .grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-  .grid-cols-7 {
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-  }
-  .flex-col {
-    flex-direction: column;
-  }
-  .flex-col-reverse {
-    flex-direction: column-reverse;
-  }
-  .flex-row {
-    flex-direction: row;
-  }
-  .flex-wrap {
-    flex-wrap: wrap;
-  }
-  .items-center {
-    align-items: center;
-  }
-  .items-end {
-    align-items: flex-end;
-  }
-  .items-start {
-    align-items: flex-start;
-  }
-  .justify-between {
-    justify-content: space-between;
-  }
-  .justify-center {
-    justify-content: center;
-  }
-  .justify-end {
-    justify-content: flex-end;
-  }
-  .gap-0\.5 {
-    gap: calc(var(--spacing) * 0.5);
-  }
-  .gap-1 {
-    gap: calc(var(--spacing) * 1);
-  }
-  .gap-1\.5 {
-    gap: calc(var(--spacing) * 1.5);
-  }
-  .gap-2 {
-    gap: calc(var(--spacing) * 2);
-  }
-  .gap-3 {
-    gap: calc(var(--spacing) * 3);
-  }
-  .gap-4 {
-    gap: calc(var(--spacing) * 4);
-  }
-  .gap-6 {
-    gap: calc(var(--spacing) * 6);
-  }
-  .gap-8 {
-    gap: calc(var(--spacing) * 8);
-  }
-  .space-y-1\.5 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-y-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-y-3 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-y-4 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-y-6 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-y-8 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .space-x-1 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-4 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .space-x-6 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
-  .truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .overflow-auto {
-    overflow: auto;
-  }
-  .overflow-hidden {
-    overflow: hidden;
-  }
-  .overflow-x-auto {
-    overflow-x: auto;
-  }
-  .overflow-y-auto {
-    overflow-y: auto;
-  }
-  .rounded {
-    border-radius: 0.25rem;
-  }
-  .rounded-full {
-    border-radius: calc(infinity * 1px);
-  }
-  .rounded-lg {
-    border-radius: var(--radius);
-  }
-  .rounded-md {
-    border-radius: calc(var(--radius) - 2px);
-  }
-  .rounded-sm {
-    border-radius: calc(var(--radius) - 4px);
-  }
-  .rounded-t-\[10px\] {
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-  }
-  .rounded-b-\[10px\] {
-    border-bottom-right-radius: 10px;
-    border-bottom-left-radius: 10px;
-  }
-  .border {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-  }
-  .border-2 {
-    border-style: var(--tw-border-style);
-    border-width: 2px;
-  }
-  .border-4 {
-    border-style: var(--tw-border-style);
-    border-width: 4px;
-  }
-  .border-t {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
-  }
-  .border-r {
-    border-right-style: var(--tw-border-style);
-    border-right-width: 1px;
-  }
-  .border-b {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 1px;
-  }
-  .border-l {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 1px;
-  }
-  .border-dashed {
-    --tw-border-style: dashed;
-    border-style: dashed;
-  }
-  .border-blue-500\/50 {
-    border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
-    }
-  }
-  .border-border {
-    border-color: var(--border);
-  }
-  .border-destructive {
-    border-color: var(--destructive);
-  }
-  .border-destructive\/50 {
-    border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
-  }
-  .border-green-500 {
-    border-color: var(--color-green-500);
-  }
-  .border-green-500\/50 {
-    border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
-    }
-  }
-  .border-input {
-    border-color: var(--input);
-  }
-  .border-muted {
-    border-color: var(--muted);
-  }
-  .border-primary {
-    border-color: var(--primary);
-  }
-  .border-primary\/20 {
-    border-color: color-mix(in oklab, var(--primary) 20%, transparent);
-  }
-  .border-ring {
-    border-color: var(--ring);
-  }
-  .border-transparent {
-    border-color: transparent;
-  }
-  .border-yellow-500\/50 {
-    border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-yellow-500) 50%, transparent);
-    }
-  }
-  .border-t-primary {
-    border-top-color: var(--primary);
-  }
-  .border-r-primary\/50 {
-    border-right-color: color-mix(in oklab, var(--primary) 50%, transparent);
-  }
-  .bg-accent {
-    background-color: var(--accent);
-  }
-  .bg-accent\/30 {
-    background-color: color-mix(in oklab, var(--accent) 30%, transparent);
-  }
-  .bg-background {
-    background-color: var(--background);
-  }
-  .bg-background\/80 {
-    background-color: color-mix(in oklab, var(--background) 80%, transparent);
-  }
-  .bg-background\/95 {
-    background-color: color-mix(in oklab, var(--background) 95%, transparent);
-  }
-  .bg-black\/50 {
-    background-color: color-mix(in srgb, #000 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
-    }
-  }
-  .bg-black\/80 {
-    background-color: color-mix(in srgb, #000 80%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
-    }
-  }
-  .bg-blue-500 {
-    background-color: var(--color-blue-500);
-  }
-  .bg-border {
-    background-color: var(--border);
-  }
-  .bg-card {
-    background-color: var(--card);
-  }
-  .bg-destructive {
-    background-color: var(--destructive);
-  }
-  .bg-green-50 {
-    background-color: var(--color-green-50);
-  }
-  .bg-green-500 {
-    background-color: var(--color-green-500);
-  }
-  .bg-input {
-    background-color: var(--input);
-  }
-  .bg-muted {
-    background-color: var(--muted);
-  }
-  .bg-muted\/30 {
-    background-color: color-mix(in oklab, var(--muted) 30%, transparent);
-  }
-  .bg-muted\/50 {
-    background-color: color-mix(in oklab, var(--muted) 50%, transparent);
-  }
-  .bg-popover {
-    background-color: var(--popover);
-  }
-  .bg-primary {
-    background-color: var(--primary);
-  }
-  .bg-primary\/10 {
-    background-color: color-mix(in oklab, var(--primary) 10%, transparent);
-  }
-  .bg-primary\/20 {
-    background-color: color-mix(in oklab, var(--primary) 20%, transparent);
-  }
-  .bg-secondary {
-    background-color: var(--secondary);
-  }
-  .bg-transparent {
-    background-color: transparent;
-  }
-  .bg-yellow-500 {
-    background-color: var(--color-yellow-500);
-  }
-  .bg-gradient-to-br {
-    --tw-gradient-position: to bottom right in oklab;
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
-  .from-white {
-    --tw-gradient-from: var(--color-white);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-gray-400 {
-    --tw-gradient-to: var(--color-gray-400);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .fill-primary-foreground {
-    fill: var(--primary-foreground);
-  }
-  .object-cover {
-    object-fit: cover;
-  }
-  .p-0 {
-    padding: calc(var(--spacing) * 0);
-  }
-  .p-0\.5 {
-    padding: calc(var(--spacing) * 0.5);
-  }
-  .p-1 {
-    padding: calc(var(--spacing) * 1);
-  }
-  .p-2 {
-    padding: calc(var(--spacing) * 2);
-  }
-  .p-3 {
-    padding: calc(var(--spacing) * 3);
-  }
-  .p-4 {
-    padding: calc(var(--spacing) * 4);
-  }
-  .p-6 {
-    padding: calc(var(--spacing) * 6);
-  }
-  .p-8 {
-    padding: calc(var(--spacing) * 8);
-  }
-  .px-1 {
-    padding-inline: calc(var(--spacing) * 1);
-  }
-  .px-1\.5 {
-    padding-inline: calc(var(--spacing) * 1.5);
-  }
-  .px-2 {
-    padding-inline: calc(var(--spacing) * 2);
-  }
-  .px-2\.5 {
-    padding-inline: calc(var(--spacing) * 2.5);
-  }
-  .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
-  }
-  .px-4 {
-    padding-inline: calc(var(--spacing) * 4);
-  }
-  .px-5 {
-    padding-inline: calc(var(--spacing) * 5);
-  }
-  .px-8 {
-    padding-inline: calc(var(--spacing) * 8);
-  }
-  .py-0\.5 {
-    padding-block: calc(var(--spacing) * 0.5);
-  }
-  .py-1 {
-    padding-block: calc(var(--spacing) * 1);
-  }
-  .py-1\.5 {
-    padding-block: calc(var(--spacing) * 1.5);
-  }
-  .py-2 {
-    padding-block: calc(var(--spacing) * 2);
-  }
-  .py-4 {
-    padding-block: calc(var(--spacing) * 4);
-  }
-  .py-6 {
-    padding-block: calc(var(--spacing) * 6);
-  }
-  .py-12 {
-    padding-block: calc(var(--spacing) * 12);
-  }
-  .pt-0 {
-    padding-top: calc(var(--spacing) * 0);
-  }
-  .pt-2 {
-    padding-top: calc(var(--spacing) * 2);
-  }
-  .pr-2 {
-    padding-right: calc(var(--spacing) * 2);
-  }
-  .pr-2\.5 {
-    padding-right: calc(var(--spacing) * 2.5);
-  }
-  .pr-3 {
-    padding-right: calc(var(--spacing) * 3);
-  }
-  .pr-6 {
-    padding-right: calc(var(--spacing) * 6);
-  }
-  .pr-8 {
-    padding-right: calc(var(--spacing) * 8);
-  }
-  .pb-4 {
-    padding-bottom: calc(var(--spacing) * 4);
-  }
-  .pl-2 {
-    padding-left: calc(var(--spacing) * 2);
-  }
-  .pl-2\.5 {
-    padding-left: calc(var(--spacing) * 2.5);
-  }
-  .pl-4 {
-    padding-left: calc(var(--spacing) * 4);
-  }
-  .text-center {
-    text-align: center;
-  }
-  .text-left {
-    text-align: left;
-  }
-  .align-middle {
-    vertical-align: middle;
-  }
-  .font-mono {
-    font-family: var(--font-mono);
-  }
-  .text-2xl {
-    font-size: var(--text-2xl);
-    line-height: var(--tw-leading, var(--text-2xl--line-height));
-  }
-  .text-5xl {
-    font-size: var(--text-5xl);
-    line-height: var(--tw-leading, var(--text-5xl--line-height));
-  }
-  .text-lg {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
-  }
-  .text-sm {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-  }
-  .text-xl {
-    font-size: var(--text-xl);
-    line-height: var(--tw-leading, var(--text-xl--line-height));
-  }
-  .text-xs {
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
-  }
-  .text-\[10px\] {
-    font-size: 10px;
-  }
-  .leading-none {
-    --tw-leading: 1;
-    line-height: 1;
-  }
-  .font-bold {
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-  .font-medium {
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-  }
-  .font-normal {
-    --tw-font-weight: var(--font-weight-normal);
-    font-weight: var(--font-weight-normal);
-  }
-  .font-semibold {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-  }
-  .tracking-tight {
-    --tw-tracking: var(--tracking-tight);
-    letter-spacing: var(--tracking-tight);
-  }
-  .break-words {
-    overflow-wrap: break-word;
-  }
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
-  .text-accent-foreground {
-    color: var(--accent-foreground);
-  }
-  .text-blue-700 {
-    color: var(--color-blue-700);
-  }
-  .text-card-foreground {
-    color: var(--card-foreground);
-  }
-  .text-destructive {
-    color: var(--destructive);
-  }
-  .text-destructive-foreground {
-    color: var(--destructive-foreground);
-  }
-  .text-foreground {
-    color: var(--foreground);
-  }
-  .text-gray-800 {
-    color: var(--color-gray-800);
-  }
-  .text-green-700 {
-    color: var(--color-green-700);
-  }
-  .text-green-900 {
-    color: var(--color-green-900);
-  }
-  .text-muted-foreground {
-    color: var(--muted-foreground);
-  }
-  .text-popover-foreground {
-    color: var(--popover-foreground);
-  }
-  .text-primary {
-    color: var(--primary);
-  }
-  .text-primary-foreground {
-    color: var(--primary-foreground);
-  }
-  .text-secondary-foreground {
-    color: var(--secondary-foreground);
-  }
-  .text-white {
-    color: var(--color-white);
-  }
-  .text-yellow-700 {
-    color: var(--color-yellow-700);
-  }
-  .underline {
-    text-decoration-line: underline;
-  }
-  .underline-offset-4 {
-    text-underline-offset: 4px;
-  }
-  .opacity-0 {
-    opacity: 0%;
-  }
-  .opacity-25 {
-    opacity: 25%;
-  }
-  .opacity-50 {
-    opacity: 50%;
-  }
-  .opacity-70 {
-    opacity: 70%;
-  }
-  .opacity-75 {
-    opacity: 75%;
-  }
-  .opacity-90 {
-    opacity: 90%;
-  }
-  .shadow-lg {
-    --tw-shadow: var(--shadow-lg);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-md {
-    --tw-shadow: var(--shadow-md);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-sm {
-    --tw-shadow: var(--shadow-sm);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-xl {
-    --tw-shadow: var(--shadow-xl);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .ring {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .ring-0 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .ring-2 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .ring-ring {
-    --tw-ring-color: var(--ring);
-  }
-  .ring-offset-2 {
-    --tw-ring-offset-width: 2px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  }
-  .ring-offset-background {
-    --tw-ring-offset-color: var(--background);
-  }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
-  .blur {
-    --tw-blur: blur(8px);
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
-  .filter {
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
-  .backdrop-blur {
-    --tw-backdrop-blur: blur(8px);
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
-  .backdrop-blur-md {
-    --tw-backdrop-blur: blur(var(--blur-md));
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
-  .backdrop-blur-sm {
-    --tw-backdrop-blur: blur(var(--blur-sm));
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
-  .transition {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .transition-all {
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .transition-colors {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .transition-opacity {
-    transition-property: opacity;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .transition-transform {
-    transition-property: transform, translate, scale, rotate;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .duration-200 {
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-  }
-  .duration-300 {
-    --tw-duration: 300ms;
-    transition-duration: 300ms;
-  }
-  .ease-in-out {
-    --tw-ease: var(--ease-in-out);
-    transition-timing-function: var(--ease-in-out);
-  }
-  .outline-none {
-    --tw-outline-style: none;
-    outline-style: none;
-  }
-  .select-none {
-    -webkit-user-select: none;
-    user-select: none;
-  }
-  .group-hover\:opacity-100 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        opacity: 100%;
-      }
-    }
-  }
-  .peer-disabled\:cursor-not-allowed {
-    &:is(:where(.peer):disabled ~ *) {
-      cursor: not-allowed;
-    }
-  }
-  .peer-disabled\:opacity-70 {
-    &:is(:where(.peer):disabled ~ *) {
-      opacity: 70%;
-    }
-  }
-  .file\:border-0 {
-    &::file-selector-button {
-      border-style: var(--tw-border-style);
-      border-width: 0px;
-    }
-  }
-  .file\:bg-transparent {
-    &::file-selector-button {
-      background-color: transparent;
-    }
-  }
-  .file\:text-sm {
-    &::file-selector-button {
-      font-size: var(--text-sm);
-      line-height: var(--tw-leading, var(--text-sm--line-height));
-    }
-  }
-  .file\:font-medium {
-    &::file-selector-button {
-      --tw-font-weight: var(--font-weight-medium);
-      font-weight: var(--font-weight-medium);
-    }
-  }
-  .placeholder\:text-muted-foreground {
-    &::placeholder {
-      color: var(--muted-foreground);
-    }
-  }
-  .hover\:border-primary\/50 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: color-mix(in oklab, var(--primary) 50%, transparent);
-      }
-    }
-  }
-  .hover\:bg-accent {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--accent);
-      }
-    }
-  }
-  .hover\:bg-accent\/50 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
-      }
-    }
-  }
-  .hover\:bg-background\/90 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--background) 90%, transparent);
-      }
-    }
-  }
-  .hover\:bg-black\/70 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, #000 70%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-blue-600 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-600);
-      }
-    }
-  }
-  .hover\:bg-destructive\/80 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--destructive) 80%, transparent);
-      }
-    }
-  }
-  .hover\:bg-destructive\/90 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
-      }
-    }
-  }
-  .hover\:bg-green-600 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-green-600);
-      }
-    }
-  }
-  .hover\:bg-muted {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--muted);
-      }
-    }
-  }
-  .hover\:bg-muted\/50 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
-      }
-    }
-  }
-  .hover\:bg-primary {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--primary);
-      }
-    }
-  }
-  .hover\:bg-primary\/80 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--primary) 80%, transparent);
-      }
-    }
-  }
-  .hover\:bg-primary\/90 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
-      }
-    }
-  }
-  .hover\:bg-secondary\/80 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
-      }
-    }
-  }
-  .hover\:bg-yellow-600 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-yellow-600);
-      }
-    }
-  }
-  .hover\:text-accent-foreground {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--accent-foreground);
-      }
-    }
-  }
-  .hover\:text-destructive {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--destructive);
-      }
-    }
-  }
-  .hover\:text-foreground {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--foreground);
-      }
-    }
-  }
-  .hover\:text-foreground\/80 {
-    &:hover {
-      @media (hover: hover) {
-        color: color-mix(in oklab, var(--foreground) 80%, transparent);
-      }
-    }
-  }
-  .hover\:text-muted-foreground {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--muted-foreground);
-      }
-    }
-  }
-  .hover\:text-primary-foreground {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--primary-foreground);
-      }
-    }
-  }
-  .hover\:underline {
-    &:hover {
-      @media (hover: hover) {
-        text-decoration-line: underline;
-      }
-    }
-  }
-  .hover\:opacity-100 {
-    &:hover {
-      @media (hover: hover) {
-        opacity: 100%;
-      }
-    }
-  }
-  .focus\:border-ring {
-    &:focus {
-      border-color: var(--ring);
-    }
-  }
-  .focus\:bg-accent {
-    &:focus {
-      background-color: var(--accent);
-    }
-  }
-  .focus\:bg-primary {
-    &:focus {
-      background-color: var(--primary);
-    }
-  }
-  .focus\:text-accent-foreground {
-    &:focus {
-      color: var(--accent-foreground);
-    }
-  }
-  .focus\:text-primary-foreground {
-    &:focus {
-      color: var(--primary-foreground);
-    }
-  }
-  .focus\:ring-2 {
-    &:focus {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .focus\:ring-ring {
-    &:focus {
-      --tw-ring-color: var(--ring);
-    }
-  }
-  .focus\:ring-offset-2 {
-    &:focus {
-      --tw-ring-offset-width: 2px;
-      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    }
-  }
-  .focus\:outline-none {
-    &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-  }
-  .focus-visible\:ring-1 {
-    &:focus-visible {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .focus-visible\:ring-2 {
-    &:focus-visible {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .focus-visible\:ring-destructive {
-    &:focus-visible {
-      --tw-ring-color: var(--destructive);
-    }
-  }
-  .focus-visible\:ring-ring {
-    &:focus-visible {
-      --tw-ring-color: var(--ring);
-    }
-  }
-  .focus-visible\:ring-offset-2 {
-    &:focus-visible {
-      --tw-ring-offset-width: 2px;
-      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    }
-  }
-  .focus-visible\:ring-offset-background {
-    &:focus-visible {
-      --tw-ring-offset-color: var(--background);
-    }
-  }
-  .focus-visible\:outline-none {
-    &:focus-visible {
-      --tw-outline-style: none;
-      outline-style: none;
-    }
-  }
-  .active\:scale-\[0\.98\] {
-    &:active {
-      scale: 0.98;
-    }
-  }
-  .disabled\:pointer-events-none {
-    &:disabled {
-      pointer-events: none;
-    }
-  }
-  .disabled\:cursor-not-allowed {
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-  .disabled\:opacity-50 {
-    &:disabled {
-      opacity: 50%;
-    }
-  }
-  .data-\[disabled\]\:pointer-events-none {
-    &[data-disabled] {
-      pointer-events: none;
-    }
-  }
-  .data-\[disabled\]\:opacity-50 {
-    &[data-disabled] {
-      opacity: 50%;
-    }
-  }
-  .data-\[state\=closed\]\:duration-300 {
-    &[data-state="closed"] {
-      --tw-duration: 300ms;
-      transition-duration: 300ms;
-    }
-  }
-  .data-\[state\=open\]\:bg-accent {
-    &[data-state="open"] {
-      background-color: var(--accent);
-    }
-  }
-  .data-\[state\=open\]\:bg-secondary {
-    &[data-state="open"] {
-      background-color: var(--secondary);
-    }
-  }
-  .data-\[state\=open\]\:text-muted-foreground {
-    &[data-state="open"] {
-      color: var(--muted-foreground);
-    }
-  }
-  .data-\[state\=open\]\:duration-500 {
-    &[data-state="open"] {
-      --tw-duration: 500ms;
-      transition-duration: 500ms;
-    }
-  }
-  .data-\[state\=selected\]\:bg-muted {
-    &[data-state="selected"] {
-      background-color: var(--muted);
-    }
-  }
-  .supports-\[backdrop-filter\]\:bg-background\/60 {
-    @supports (backdrop-filter: var(--tw)) {
-      background-color: color-mix(in oklab, var(--background) 60%, transparent);
-    }
-  }
-  .sm\:block {
-    @media (width >= 40rem) {
-      display: block;
-    }
-  }
-  .sm\:inline-flex {
-    @media (width >= 40rem) {
-      display: inline-flex;
-    }
-  }
-  .sm\:w-auto {
-    @media (width >= 40rem) {
-      width: auto;
-    }
-  }
-  .sm\:max-w-sm {
-    @media (width >= 40rem) {
-      max-width: var(--container-sm);
-    }
-  }
-  .sm\:flex-col {
-    @media (width >= 40rem) {
-      flex-direction: column;
-    }
-  }
-  .sm\:flex-row {
-    @media (width >= 40rem) {
-      flex-direction: row;
-    }
-  }
-  .sm\:items-center {
-    @media (width >= 40rem) {
-      align-items: center;
-    }
-  }
-  .sm\:justify-between {
-    @media (width >= 40rem) {
-      justify-content: space-between;
-    }
-  }
-  .sm\:justify-end {
-    @media (width >= 40rem) {
-      justify-content: flex-end;
-    }
-  }
-  .sm\:gap-2\.5 {
-    @media (width >= 40rem) {
-      gap: calc(var(--spacing) * 2.5);
-    }
-  }
-  .sm\:space-x-2 {
-    @media (width >= 40rem) {
-      :where(& > :not(:last-child)) {
-        --tw-space-x-reverse: 0;
-        margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
-        margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
-      }
-    }
-  }
-  .sm\:space-x-6 {
-    @media (width >= 40rem) {
-      :where(& > :not(:last-child)) {
-        --tw-space-x-reverse: 0;
-        margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
-        margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
-      }
-    }
-  }
-  .sm\:rounded-lg {
-    @media (width >= 40rem) {
-      border-radius: var(--radius);
-    }
-  }
-  .sm\:p-6 {
-    @media (width >= 40rem) {
-      padding: calc(var(--spacing) * 6);
-    }
-  }
-  .sm\:text-left {
-    @media (width >= 40rem) {
-      text-align: left;
-    }
-  }
-  .sm\:text-3xl {
-    @media (width >= 40rem) {
-      font-size: var(--text-3xl);
-      line-height: var(--tw-leading, var(--text-3xl--line-height));
-    }
-  }
-  .sm\:text-base {
-    @media (width >= 40rem) {
-      font-size: var(--text-base);
-      line-height: var(--tw-leading, var(--text-base--line-height));
-    }
-  }
-  .sm\:text-xl {
-    @media (width >= 40rem) {
-      font-size: var(--text-xl);
-      line-height: var(--tw-leading, var(--text-xl--line-height));
-    }
-  }
-  .md\:inline-flex {
-    @media (width >= 48rem) {
-      display: inline-flex;
-    }
-  }
-  .md\:max-w-\[420px\] {
-    @media (width >= 48rem) {
-      max-width: 420px;
-    }
-  }
-  .md\:grid-cols-2 {
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-  .md\:p-8 {
-    @media (width >= 48rem) {
-      padding: calc(var(--spacing) * 8);
-    }
-  }
-  .md\:text-4xl {
-    @media (width >= 48rem) {
-      font-size: var(--text-4xl);
-      line-height: var(--tw-leading, var(--text-4xl--line-height));
-    }
-  }
-  .lg\:flex {
-    @media (width >= 64rem) {
-      display: flex;
-    }
-  }
-  .lg\:hidden {
-    @media (width >= 64rem) {
-      display: none;
-    }
-  }
-  .lg\:space-x-8 {
-    @media (width >= 64rem) {
-      :where(& > :not(:last-child)) {
-        --tw-space-x-reverse: 0;
-        margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
-        margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
-      }
-    }
-  }
-  .dark\:border-blue-500 {
-    @media (prefers-color-scheme: dark) {
-      border-color: var(--color-blue-500);
-    }
-  }
-  .dark\:border-destructive {
-    @media (prefers-color-scheme: dark) {
-      border-color: var(--destructive);
-    }
-  }
-  .dark\:border-green-500 {
-    @media (prefers-color-scheme: dark) {
-      border-color: var(--color-green-500);
-    }
-  }
-  .dark\:border-yellow-500 {
-    @media (prefers-color-scheme: dark) {
-      border-color: var(--color-yellow-500);
-    }
-  }
-  .dark\:bg-green-900\/20 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent);
-      }
-    }
-  }
-  .dark\:text-blue-400 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-blue-400);
-    }
-  }
-  .dark\:text-green-100 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-green-100);
-    }
-  }
-  .dark\:text-green-400 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-green-400);
-    }
-  }
-  .dark\:text-yellow-400 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-yellow-400);
-    }
-  }
-  .\[\&_tr\]\:border-b {
-    & tr {
-      border-bottom-style: var(--tw-border-style);
-      border-bottom-width: 1px;
-    }
-  }
-  .\[\&_tr\:last-child\]\:border-0 {
-    & tr:last-child {
-      border-style: var(--tw-border-style);
-      border-width: 0px;
-    }
-  }
-  .\[\&\:\:-moz-range-thumb\]\:h-5 {
-    &::-moz-range-thumb {
-      height: calc(var(--spacing) * 5);
-    }
-  }
-  .\[\&\:\:-moz-range-thumb\]\:w-5 {
-    &::-moz-range-thumb {
-      width: calc(var(--spacing) * 5);
-    }
-  }
-  .\[\&\:\:-moz-range-thumb\]\:rounded-full {
-    &::-moz-range-thumb {
-      border-radius: calc(infinity * 1px);
-    }
-  }
-  .\[\&\:\:-moz-range-thumb\]\:bg-primary {
-    &::-moz-range-thumb {
-      background-color: var(--primary);
-    }
-  }
-  .\[\&\:\:-moz-range-thumb\]\:ring-offset-background {
-    &::-moz-range-thumb {
-      --tw-ring-offset-color: var(--background);
-    }
-  }
-  .\[\&\:\:-moz-range-thumb\]\:transition-colors {
-    &::-moz-range-thumb {
-      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
-    }
-  }
-  .focus-visible\:\[\&\:\:-moz-range-thumb\]\:ring-2 {
-    &:focus-visible {
-      &::-moz-range-thumb {
-        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
-  .focus-visible\:\[\&\:\:-moz-range-thumb\]\:ring-ring {
-    &:focus-visible {
-      &::-moz-range-thumb {
-        --tw-ring-color: var(--ring);
-      }
-    }
-  }
-  .focus-visible\:\[\&\:\:-moz-range-thumb\]\:ring-offset-2 {
-    &:focus-visible {
-      &::-moz-range-thumb {
-        --tw-ring-offset-width: 2px;
-        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-      }
-    }
-  }
-  .\[\&\:\:-webkit-slider-thumb\]\:h-5 {
-    &::-webkit-slider-thumb {
-      height: calc(var(--spacing) * 5);
-    }
-  }
-  .\[\&\:\:-webkit-slider-thumb\]\:w-5 {
-    &::-webkit-slider-thumb {
-      width: calc(var(--spacing) * 5);
-    }
-  }
-  .\[\&\:\:-webkit-slider-thumb\]\:appearance-none {
-    &::-webkit-slider-thumb {
-      appearance: none;
-    }
-  }
-  .\[\&\:\:-webkit-slider-thumb\]\:rounded-full {
-    &::-webkit-slider-thumb {
-      border-radius: calc(infinity * 1px);
-    }
-  }
-  .\[\&\:\:-webkit-slider-thumb\]\:bg-primary {
-    &::-webkit-slider-thumb {
-      background-color: var(--primary);
-    }
-  }
-  .\[\&\:\:-webkit-slider-thumb\]\:ring-offset-background {
-    &::-webkit-slider-thumb {
-      --tw-ring-offset-color: var(--background);
-    }
-  }
-  .\[\&\:\:-webkit-slider-thumb\]\:transition-colors {
-    &::-webkit-slider-thumb {
-      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
-    }
-  }
-  .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-2 {
-    &:focus-visible {
-      &::-webkit-slider-thumb {
-        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-      }
-    }
-  }
-  .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-ring {
-    &:focus-visible {
-      &::-webkit-slider-thumb {
-        --tw-ring-color: var(--ring);
-      }
-    }
-  }
-  .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-offset-2 {
-    &:focus-visible {
-      &::-webkit-slider-thumb {
-        --tw-ring-offset-width: 2px;
-        --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-      }
-    }
-  }
-  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
-    &:has([role=checkbox]) {
-      padding-right: calc(var(--spacing) * 0);
-    }
-  }
-  .\[\&\>svg\]\:absolute {
-    &>svg {
-      position: absolute;
-    }
-  }
-  .\[\&\>svg\]\:top-4 {
-    &>svg {
-      top: calc(var(--spacing) * 4);
-    }
-  }
-  .\[\&\>svg\]\:left-4 {
-    &>svg {
-      left: calc(var(--spacing) * 4);
-    }
-  }
-  .\[\&\>svg\]\:text-blue-600 {
-    &>svg {
-      color: var(--color-blue-600);
-    }
-  }
-  .\[\&\>svg\]\:text-destructive {
-    &>svg {
-      color: var(--destructive);
-    }
-  }
-  .\[\&\>svg\]\:text-foreground {
-    &>svg {
-      color: var(--foreground);
-    }
-  }
-  .\[\&\>svg\]\:text-green-600 {
-    &>svg {
-      color: var(--color-green-600);
-    }
-  }
-  .\[\&\>svg\]\:text-yellow-600 {
-    &>svg {
-      color: var(--color-yellow-600);
-    }
-  }
-  .\[\&\>svg\+div\]\:translate-y-\[-3px\] {
-    &>svg+div {
-      --tw-translate-y: -3px;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
-  .\[\&\>svg\~\*\]\:pl-7 {
-    &>svg~* {
-      padding-left: calc(var(--spacing) * 7);
-    }
-  }
-}
-:root {
-  --background: oklch(0.9900 0 0);
-  --foreground: oklch(0 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0 0 0);
-  --popover: oklch(0.9900 0 0);
-  --popover-foreground: oklch(0 0 0);
-  --primary: oklch(0 0 0);
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.9400 0 0);
-  --secondary-foreground: oklch(0 0 0);
-  --muted: oklch(0.9700 0 0);
-  --muted-foreground: oklch(0.4400 0 0);
-  --accent: oklch(0.9400 0 0);
-  --accent-foreground: oklch(0 0 0);
-  --destructive: oklch(0.6300 0.1900 23.0300);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.9200 0 0);
-  --input: oklch(0.9400 0 0);
-  --ring: oklch(0 0 0);
-  --chart-1: oklch(0.8100 0.1700 75.3500);
-  --chart-2: oklch(0.5500 0.2200 264.5300);
-  --chart-3: oklch(0.7200 0 0);
-  --chart-4: oklch(0.9200 0 0);
-  --chart-5: oklch(0.5600 0 0);
-  --sidebar: oklch(0.9900 0 0);
-  --sidebar-foreground: oklch(0 0 0);
-  --sidebar-primary: oklch(0 0 0);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.9400 0 0);
-  --sidebar-accent-foreground: oklch(0 0 0);
-  --sidebar-border: oklch(0.9400 0 0);
-  --sidebar-ring: oklch(0 0 0);
-  --font-sans: Geist, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
-  --radius: 0.5rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 2px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.18;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
-  --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
-  --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
-  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
-  --tracking-normal: 0em;
-  --spacing: 0.25rem;
-}
-.dark {
-  --background: oklch(0 0 0);
-  --foreground: oklch(1 0 0);
-  --card: oklch(0.1400 0 0);
-  --card-foreground: oklch(1 0 0);
-  --popover: oklch(0.1800 0 0);
-  --popover-foreground: oklch(1 0 0);
-  --primary: oklch(1 0 0);
-  --primary-foreground: oklch(0 0 0);
-  --secondary: oklch(0.2500 0 0);
-  --secondary-foreground: oklch(1 0 0);
-  --muted: oklch(0.2300 0 0);
-  --muted-foreground: oklch(0.7200 0 0);
-  --accent: oklch(0.3200 0 0);
-  --accent-foreground: oklch(1 0 0);
-  --destructive: oklch(0.6900 0.2000 23.9100);
-  --destructive-foreground: oklch(0 0 0);
-  --border: oklch(0.2600 0 0);
-  --input: oklch(0.3200 0 0);
-  --ring: oklch(0.7200 0 0);
-  --chart-1: oklch(0.8100 0.1700 75.3500);
-  --chart-2: oklch(0.5800 0.2100 260.8400);
-  --chart-3: oklch(0.5600 0 0);
-  --chart-4: oklch(0.4400 0 0);
-  --chart-5: oklch(0.9200 0 0);
-  --sidebar: oklch(0.1800 0 0);
-  --sidebar-foreground: oklch(1 0 0);
-  --sidebar-primary: oklch(1 0 0);
-  --sidebar-primary-foreground: oklch(0 0 0);
-  --sidebar-accent: oklch(0.3200 0 0);
-  --sidebar-accent-foreground: oklch(1 0 0);
-  --sidebar-border: oklch(0.3200 0 0);
-  --sidebar-ring: oklch(0.7200 0 0);
-  --font-sans: Geist, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
-  --radius: 0.5rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 2px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.18;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
-  --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
-  --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
-  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
-}
-html, body, :host {
-  font-family: var(--font-sans) !important;
-}
-@keyframes bars {
-  0%, 100% {
-    transform: scaleY(0.4);
-    opacity: 0.7;
-  }
-  50% {
-    transform: scaleY(1);
-    opacity: 1;
-  }
-}
-@keyframes bars-vertical {
-  0%, 100% {
-    transform: scaleY(0.4);
-    opacity: 0.7;
-  }
-  50% {
-    transform: scaleY(1);
-    opacity: 1;
-  }
-}
-@keyframes bars-pulse {
-  0%, 100% {
-    transform: scaleY(0.3);
-    opacity: 0.5;
-  }
-  50% {
-    transform: scaleY(1);
-    opacity: 1;
-  }
-}
-@keyframes orbit {
-  0% {
-    transform: translate(-50%, 0) rotate(0deg) translateX(calc((var(--size, 1rem) - 0.5rem) / 2)) rotate(0deg);
-  }
-  100% {
-    transform: translate(-50%, 0) rotate(360deg) translateX(calc((var(--size, 1rem) - 0.5rem) / 2)) rotate(-360deg);
-  }
-}
-@property --tw-translate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-translate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: rotateX(0);
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: rotateY(0);
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: rotateZ(0);
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: skewX(0);
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: skewY(0);
-}
-@property --tw-space-y-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-space-x-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-gradient-position {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-via {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-to {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-via-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-@property --tw-gradient-via-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 50%;
-}
-@property --tw-gradient-to-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-tracking {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-sepia {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-drop-shadow-size {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-sepia {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-duration {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ease {
-  syntax: "*";
-  inherits: false;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@keyframes pulse {
-  50% {
-    opacity: 0.5;
-  }
-}
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-  }
-  50% {
-    transform: none;
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-}
diff --git a/NET10/ShellUI.Preview/wwwroot/index.html b/NET10/ShellUI.Preview/wwwroot/index.html
deleted file mode 100644
index c0d3e2a..0000000
--- a/NET10/ShellUI.Preview/wwwroot/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ShellUI Preview</title>
-    <base href="/" />
-    <link rel="icon" type="image/png" href="favicon.png" />
-    
-    <!-- Use the same CSS as the main library -->
-    <link rel="stylesheet" href="css/app.css" />
-    
-    <!-- Google Fonts (Inter) -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    
-    <style>
-        body { font-family: 'Inter', sans-serif; }
-        /* Blazor error UI - hidden by default, only visible when Blazor adds .show on error */
-        #blazor-error-ui { display: none !important; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #dc2626; color: #fff; padding: 1rem; text-align: center; }
-        #blazor-error-ui.show { display: block !important; }
-        #blazor-error-ui a { color: inherit; text-decoration: underline; }
-        #blazor-error-ui .dismiss { cursor: pointer; margin-left: 1rem; }
-    </style>
-</head>
-
-<body>
-    <div id="app">
-        <!-- Simple Loading State -->
-        <div style="display:flex;align-items:center;justify-content:center;height:100vh;background:#09090b;color:#fff">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin">
-                <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-            </svg>
-        </div>
-    </div>
-
-    <div id="blazor-error-ui">
-        An unhandled error has occurred.
-        <a href="." class="reload">Reload</a>
-        <span class="dismiss">×</span>
-    </div>
-    
-    <!-- Blazor Boot -->
-    <script src="_framework/blazor.webassembly.js"></script>
-    
-    <!-- Theme Script -->
-    <script>
-        // Force dark mode for now, or read from query param
-        document.documentElement.classList.add('dark');
-    </script>
-</body>
-
-</html>
diff --git a/NET10/ShellUI.Preview/wwwroot/input.css b/NET10/ShellUI.Preview/wwwroot/input.css
deleted file mode 100644
index 1428af4..0000000
--- a/NET10/ShellUI.Preview/wwwroot/input.css
+++ /dev/null
@@ -1,188 +0,0 @@
-@import "tailwindcss";
-
-:root {
-  --background: oklch(0.9900 0 0);
-  --foreground: oklch(0 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0 0 0);
-  --popover: oklch(0.9900 0 0);
-  --popover-foreground: oklch(0 0 0);
-  --primary: oklch(0 0 0);
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.9400 0 0);
-  --secondary-foreground: oklch(0 0 0);
-  --muted: oklch(0.9700 0 0);
-  --muted-foreground: oklch(0.4400 0 0);
-  --accent: oklch(0.9400 0 0);
-  --accent-foreground: oklch(0 0 0);
-  --destructive: oklch(0.6300 0.1900 23.0300);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.9200 0 0);
-  --input: oklch(0.9400 0 0);
-  --ring: oklch(0 0 0);
-  --chart-1: oklch(0.8100 0.1700 75.3500);
-  --chart-2: oklch(0.5500 0.2200 264.5300);
-  --chart-3: oklch(0.7200 0 0);
-  --chart-4: oklch(0.9200 0 0);
-  --chart-5: oklch(0.5600 0 0);
-  --sidebar: oklch(0.9900 0 0);
-  --sidebar-foreground: oklch(0 0 0);
-  --sidebar-primary: oklch(0 0 0);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.9400 0 0);
-  --sidebar-accent-foreground: oklch(0 0 0);
-  --sidebar-border: oklch(0.9400 0 0);
-  --sidebar-ring: oklch(0 0 0);
-  --font-sans: Geist, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
-  --radius: 0.5rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 2px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.18;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
-  --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
-  --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
-  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
-  --tracking-normal: 0em;
-  --spacing: 0.25rem;
-}
-
-.dark {
-  --background: oklch(0 0 0);
-  --foreground: oklch(1 0 0);
-  --card: oklch(0.1400 0 0);
-  --card-foreground: oklch(1 0 0);
-  --popover: oklch(0.1800 0 0);
-  --popover-foreground: oklch(1 0 0);
-  --primary: oklch(1 0 0);
-  --primary-foreground: oklch(0 0 0);
-  --secondary: oklch(0.2500 0 0);
-  --secondary-foreground: oklch(1 0 0);
-  --muted: oklch(0.2300 0 0);
-  --muted-foreground: oklch(0.7200 0 0);
-  --accent: oklch(0.3200 0 0);
-  --accent-foreground: oklch(1 0 0);
-  --destructive: oklch(0.6900 0.2000 23.9100);
-  --destructive-foreground: oklch(0 0 0);
-  --border: oklch(0.2600 0 0);
-  --input: oklch(0.3200 0 0);
-  --ring: oklch(0.7200 0 0);
-  --chart-1: oklch(0.8100 0.1700 75.3500);
-  --chart-2: oklch(0.5800 0.2100 260.8400);
-  --chart-3: oklch(0.5600 0 0);
-  --chart-4: oklch(0.4400 0 0);
-  --chart-5: oklch(0.9200 0 0);
-  --sidebar: oklch(0.1800 0 0);
-  --sidebar-foreground: oklch(1 0 0);
-  --sidebar-primary: oklch(1 0 0);
-  --sidebar-primary-foreground: oklch(0 0 0);
-  --sidebar-accent: oklch(0.3200 0 0);
-  --sidebar-accent-foreground: oklch(1 0 0);
-  --sidebar-border: oklch(0.3200 0 0);
-  --sidebar-ring: oklch(0.7200 0 0);
-  --font-sans: Geist, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
-  --radius: 0.5rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 2px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.18;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
-  --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
-  --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
-  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --font-serif: var(--font-serif);
-
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-}
-
-/* Ensure font-family updates when theme changes - must come after @theme inline */
-html, body, :host {
-  font-family: var(--font-sans) !important;
-}
-
-/* Loading component animations - Add these when installing the loading component */
-@keyframes bars {
-  0%, 100% { transform: scaleY(0.4); opacity: 0.7; }
-  50% { transform: scaleY(1); opacity: 1; }
-}
-
-@keyframes bars-vertical {
-  0%, 100% { transform: scaleY(0.4); opacity: 0.7; }
-  50% { transform: scaleY(1); opacity: 1; }
-}
-
-@keyframes bars-pulse {
-  0%, 100% { transform: scaleY(0.3); opacity: 0.5; }
-  50% { transform: scaleY(1); opacity: 1; }
-}
-
-@keyframes orbit {
-  0% { transform: translate(-50%, 0) rotate(0deg) translateX(calc((var(--size, 1rem) - 0.5rem) / 2)) rotate(0deg); }
-  100% { transform: translate(-50%, 0) rotate(360deg) translateX(calc((var(--size, 1rem) - 0.5rem) / 2)) rotate(-360deg); }
-}
diff --git a/NET10/ShellUI.Preview/wwwroot/sample-data/weather.json b/NET10/ShellUI.Preview/wwwroot/sample-data/weather.json
deleted file mode 100644
index b745973..0000000
--- a/NET10/ShellUI.Preview/wwwroot/sample-data/weather.json
+++ /dev/null
@@ -1,27 +0,0 @@
-[
-  {
-    "date": "2022-01-06",
-    "temperatureC": 1,
-    "summary": "Freezing"
-  },
-  {
-    "date": "2022-01-07",
-    "temperatureC": 14,
-    "summary": "Bracing"
-  },
-  {
-    "date": "2022-01-08",
-    "temperatureC": -13,
-    "summary": "Freezing"
-  },
-  {
-    "date": "2022-01-09",
-    "temperatureC": -16,
-    "summary": "Balmy"
-  },
-  {
-    "date": "2022-01-10",
-    "temperatureC": -2,
-    "summary": "Chilly"
-  }
-]
diff --git a/docs/PROJECT_STATUS.md b/docs/PROJECT_STATUS.md
index 251701f..73daff0 100644
--- a/docs/PROJECT_STATUS.md
+++ b/docs/PROJECT_STATUS.md
@@ -83,7 +83,7 @@ Counts are top-level components users invoke directly via `shellui add <name>`.
 | v0.3.0 stable (after testing) | 🎯 Next |
 | v1.0 - Full release | 🎯 Target Q2-Q3 2026 |
 
-*Note: Stepper active-state highlighting known issue; shipping as-is for alpha.*
+*Stepper active-state highlighting fixed in polish/component-quality — active step now wins over completed for both fill and icon.*
 
 ## How to Get Started with Development
 
diff --git a/src/ShellUI.Components/Components/Combobox.razor b/src/ShellUI.Components/Components/Combobox.razor
index d263f79..a9b26c0 100644
--- a/src/ShellUI.Components/Components/Combobox.razor
+++ b/src/ShellUI.Components/Components/Combobox.razor
@@ -1,4 +1,7 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
@@ -75,6 +78,9 @@
     [Parameter] public bool Disabled { get; set; }
     [Parameter] public IEnumerable<string>? Options { get; set; }
     [Parameter] public bool Searchable { get; set; } = true;
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public RenderFragment? ChildContent { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
@@ -82,22 +88,72 @@
     
     private bool IsOpen { get; set; }
     private string searchQuery = "";
-    
-    private void Toggle() 
+    private DotNetObjectReference<Combobox>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
+
+    private async Task Toggle()
     {
-        if (!Disabled)
+        if (Disabled) return;
+        IsOpen = !IsOpen;
+        if (IsOpen)
+        {
+            searchQuery = "";
+            await RegisterDismissAsync();
+        }
+        else
         {
-            IsOpen = !IsOpen;
-            if (IsOpen) searchQuery = "";
+            await UnregisterDismissAsync();
         }
     }
-    
-    private void Close() => IsOpen = false;
-    
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     public async Task SelectValue(string value)
     {
         Value = value;
-        await ValueChanged.InvokeAsync(value);
         IsOpen = false;
+        await UnregisterDismissAsync();
+        await ValueChanged.InvokeAsync(value);
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
     }
 }
diff --git a/src/ShellUI.Components/Components/Command.razor b/src/ShellUI.Components/Components/Command.razor
index 0222115..72ed30a 100644
--- a/src/ShellUI.Components/Components/Command.razor
+++ b/src/ShellUI.Components/Components/Command.razor
@@ -5,7 +5,7 @@
     <DialogContent Class="overflow-hidden p-0">
         <!-- Search Input -->
         <div class="flex items-center border-b border-border px-3 py-2">
-            <svg class="mr-2 h-4 w-4 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg class="mr-2 h-4 w-4 text-foreground/70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
             </svg>
             <input
diff --git a/src/ShellUI.Components/Components/DataPicker.razor b/src/ShellUI.Components/Components/DataPicker.razor
index b7c2dd0..afcbb08 100644
--- a/src/ShellUI.Components/Components/DataPicker.razor
+++ b/src/ShellUI.Components/Components/DataPicker.razor
@@ -1,6 +1,9 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
 @typeparam TItem
 @typeparam TKey where TKey : notnull
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
@@ -30,7 +33,7 @@
     {
         <div class="absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md animate-in fade-in-0 zoom-in-95">
             <div class="flex items-center border-b border-border px-3">
-                <svg class="mr-2 h-4 w-4 shrink-0 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg class="mr-2 h-4 w-4 shrink-0 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                 </svg>
                 <input @ref="_searchInput"
@@ -103,6 +106,9 @@
     [Parameter] public string SearchPlaceholder { get; set; } = "Search...";
     [Parameter] public string EmptyText { get; set; } = "No results found.";
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -112,6 +118,9 @@
     private int _highlightedIndex;
     private ElementReference _searchInput;
     private bool _shouldFocus;
+    private DotNetObjectReference<DataPicker<TItem, TKey>>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
 
     private string DisplayFor(TItem item) => DisplaySelector?.Invoke(item) ?? item?.ToString() ?? "";
     private TKey KeyFor(TItem item) => KeySelector(item);
@@ -124,7 +133,7 @@
         return Items.Where(i => DisplayFor(i).Contains(q, StringComparison.OrdinalIgnoreCase));
     }
 
-    private void Toggle()
+    private async Task Toggle()
     {
         if (Disabled) return;
         IsOpen = !IsOpen;
@@ -133,10 +142,51 @@
             _searchQuery = "";
             _highlightedIndex = 0;
             _shouldFocus = true;
+            await RegisterDismissAsync();
+        }
+        else
+        {
+            await UnregisterDismissAsync();
+        }
+    }
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    // Fires when the page scrolls or the window resizes — bubble-phase, so scrolling
+    // through the option list inside the popover does NOT dismiss.
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
         }
     }
 
-    private void Close() => IsOpen = false;
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -151,13 +201,14 @@
     {
         Value = item;
         IsOpen = false;
+        await UnregisterDismissAsync();
         await ValueChanged.InvokeAsync(item);
     }
 
     private async Task OnKeyDown(KeyboardEventArgs e)
     {
         var filtered = Filter().ToList();
-        if (e.Key == "Escape") { Close(); return; }
+        if (e.Key == "Escape") { await Close(); return; }
         if (e.Key == "ArrowDown") { _highlightedIndex = Math.Min(_highlightedIndex + 1, filtered.Count - 1); return; }
         if (e.Key == "ArrowUp") { _highlightedIndex = Math.Max(_highlightedIndex - 1, 0); return; }
         if (e.Key == "Enter" && filtered.Count > 0)
@@ -166,4 +217,10 @@
             await SelectItem(filtered[idx]);
         }
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
diff --git a/src/ShellUI.Components/Components/DataTable.razor b/src/ShellUI.Components/Components/DataTable.razor
index e726b90..6cd2839 100644
--- a/src/ShellUI.Components/Components/DataTable.razor
+++ b/src/ShellUI.Components/Components/DataTable.razor
@@ -33,7 +33,7 @@
                     @foreach (var column in Columns)
                     {
                         <th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground @(column.Sortable ? "cursor-pointer hover:bg-accent/50" : "")"
-                            @onclick="() => { if (column.Sortable) OnSortClicked(column); }">
+                            @onclick="async () => { if (column.Sortable) await OnSortClicked(column); }">
                             <div class="flex items-center gap-2">
                                 @column.Header
                                 @if (column.Sortable)
@@ -114,7 +114,7 @@
     </div>
 
     <!-- Pagination -->
-    @if (ShowPagination && _filteredItems.Any())
+    @if (ShowPagination && (_filteredItems.Any() || (ServerSide && _serverTotalCount > 0)))
     {
         <div class="flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between">
             <div class="flex-1 text-sm text-muted-foreground">
@@ -124,7 +124,7 @@
                 }
                 else
                 {
-                    @($"Showing {_startIndex} - {_endIndex} of {_filteredItems.Count()} results")
+                    @($"Showing {_startIndex} - {_endIndex} of {(ServerSide ? _serverTotalCount : _filteredItems.Count())} results")
                 }
             </div>
             <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:space-x-6 lg:space-x-8">
@@ -138,7 +138,7 @@
                             }
                         </select>
                         <div class="absolute inset-y-0 right-1 flex items-center pointer-events-none">
-                            <svg class="h-3 w-3 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <svg class="h-3 w-3 text-foreground/70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                             </svg>
                         </div>
@@ -191,6 +191,16 @@
     [Parameter]
     public EventCallback<HashSet<TItem>> SelectedItemsChanged { get; set; }
 
+    /// When true, `Items` is ignored and the table calls `OnDataRequest` for each
+    /// filter / sort / page change. Use for datasets too large to materialize client-side.
+    [Parameter]
+    public bool ServerSide { get; set; }
+
+    /// Required when `ServerSide` is true. Receives the current DataTableRequest
+    /// (skip/take/sort/search) and returns the page of items plus total count.
+    [Parameter]
+    public Func<DataTableRequest, Task<DataTableResponse<TItem>>>? OnDataRequest { get; set; }
+
     private string _filterText = "";
     private IEnumerable<TItem> _filteredItems = new List<TItem>();
     private IEnumerable<TItem> _paginatedItems = new List<TItem>();
@@ -200,11 +210,51 @@
     private int _startIndex = 1;
     private int _endIndex = 1;
     private int _pageSize = 10;
+    private int _serverTotalCount = 0;
     private TItem? _openActionsItem = default(TItem);
 
-    protected override void OnParametersSet()
+    protected override async Task OnParametersSetAsync()
+    {
+        await RefreshAsync();
+    }
+
+    private async Task RefreshAsync()
+    {
+        if (ServerSide && OnDataRequest is not null)
+        {
+            await LoadServerPageAsync();
+        }
+        else
+        {
+            UpdateFilteredItems();
+        }
+    }
+
+    private async Task LoadServerPageAsync()
     {
-        UpdateFilteredItems();
+        var sortColumn = Columns.FirstOrDefault(c => c.SortDirection != SortDirection.None);
+        var request = new DataTableRequest
+        {
+            Skip = (_currentPage - 1) * _pageSize,
+            Take = _pageSize,
+            SortBy = sortColumn?.PropertyName,
+            SortDirection = sortColumn?.SortDirection ?? SortDirection.None,
+            SearchQuery = _filterText ?? ""
+        };
+
+        var response = await OnDataRequest!(request);
+
+        _paginatedItems = response.Items;
+        _serverTotalCount = response.TotalCount;
+        _totalPages = Math.Max(1, (int)Math.Ceiling(_serverTotalCount / (double)_pageSize));
+        _currentPage = Math.Min(_currentPage, _totalPages);
+        _startIndex = _serverTotalCount == 0 ? 0 : (_currentPage - 1) * _pageSize + 1;
+        _endIndex = Math.Min(_currentPage * _pageSize, _serverTotalCount);
+        // Keep the "select-all" checkbox and count displays honest — they only ever
+        // reference the currently loaded page in server-side mode.
+        _filteredItems = _paginatedItems;
+
+        StateHasChanged();
     }
 
     private void UpdateFilteredItems()
@@ -213,7 +263,7 @@
         _filteredItems = string.IsNullOrWhiteSpace(_filterText)
             ? Items
             : Items.Where(item =>
-                Columns.Any(col => 
+                Columns.Any(col =>
                 {
                     // Simple text search - check if any property contains the filter text
                     var property = typeof(TItem).GetProperty(col.PropertyName);
@@ -243,31 +293,29 @@
         StateHasChanged();
     }
 
-    private void OnFilterInput(ChangeEventArgs e)
+    private async Task OnFilterInput(ChangeEventArgs e)
     {
         _filterText = e.Value?.ToString() ?? "";
-        _currentPage = 1; // Reset to first page
-        UpdateFilteredItems();
+        _currentPage = 1;
+        await RefreshAsync();
     }
 
-    private void OnFilterChanged(string value)
+    private async Task OnFilterChanged(string value)
     {
         _filterText = value;
-        _currentPage = 1; // Reset to first page
-        UpdateFilteredItems();
+        _currentPage = 1;
+        await RefreshAsync();
     }
 
-    private void OnSortClicked(DataTableColumn<TItem> column)
+    private async Task OnSortClicked(DataTableColumn<TItem> column)
     {
         if (!column.Sortable) return;
 
-        // Reset other columns
         foreach (var col in Columns.Where(c => c != column))
         {
             col.SortDirection = SortDirection.None;
         }
 
-        // Cycle sort direction
         column.SortDirection = column.SortDirection switch
         {
             SortDirection.None => SortDirection.Ascending,
@@ -276,7 +324,7 @@
             _ => SortDirection.Ascending
         };
 
-        UpdateFilteredItems();
+        await RefreshAsync();
     }
 
     private void OnSelectAllChanged(bool selected)
@@ -311,31 +359,31 @@
 
     private bool IsSelected(TItem item) => _selectedItems.Contains(item);
 
-    private void OnPageSizeChanged(ChangeEventArgs e)
+    private async Task OnPageSizeChanged(ChangeEventArgs e)
     {
         if (int.TryParse(e.Value?.ToString(), out var size))
         {
             _pageSize = size;
             _currentPage = 1;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
-    private void OnPreviousPage()
+    private async Task OnPreviousPage()
     {
         if (_currentPage > 1)
         {
             _currentPage--;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
-    private void OnNextPage()
+    private async Task OnNextPage()
     {
         if (_currentPage < _totalPages)
         {
             _currentPage++;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
diff --git a/src/ShellUI.Components/Components/DatePicker.razor b/src/ShellUI.Components/Components/DatePicker.razor
index ff7a00e..c620e2d 100644
--- a/src/ShellUI.Components/Components/DatePicker.razor
+++ b/src/ShellUI.Components/Components/DatePicker.razor
@@ -1,24 +1,27 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <div class="relative">
         <button type="button"
                 @onclick="Toggle"
                 disabled="@Disabled"
-                class="@Shell.Cn("flex h-10 w-full items-center justify-between 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 ? "cursor-not-allowed opacity-50" : "")">
-            <span class="@(Value == null ? "text-muted-foreground" : "")">
+                class="@Shell.Cn("flex h-10 w-full items-center gap-2 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 ? "cursor-not-allowed opacity-50" : "")">
+            <span class="@("flex-1 text-left " + (Value == null ? "text-muted-foreground" : ""))">
                 @(Value?.ToString("MMM dd, yyyy") ?? Placeholder)
             </span>
-            <div class="flex items-center gap-1">
+            <div class="ml-auto flex items-center gap-1 shrink-0">
                 @if (AllowClear && Value.HasValue && !Disabled)
                 {
                     <div role="button" @onclick:stopPropagation @onclick="Clear" class="text-muted-foreground hover:text-foreground">
-                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                         </svg>
                     </div>
                 }
-                <svg class="h-4 w-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg class="h-4 w-4 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                 </svg>
             </div>
@@ -81,21 +84,68 @@
     [Parameter] public string Placeholder { get; set; } = "Pick a date";
     [Parameter] public bool Disabled { get; set; }
     [Parameter] public bool AllowClear { get; set; } = true;
+    /// Dismiss the calendar when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the calendar open across scroll.
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
     
     private bool IsOpen { get; set; }
     private DateTime currentMonth = DateTime.Now;
-    
-    private void Toggle() => IsOpen = !IsOpen;
-    private void Close() => IsOpen = false;
-    
+    private DotNetObjectReference<DatePicker>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
+
+    private async Task Toggle()
+    {
+        IsOpen = !IsOpen;
+        if (IsOpen) await RegisterDismissAsync();
+        else await UnregisterDismissAsync();
+    }
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     private async Task SelectDate(DateTime date)
     {
         Value = date;
-        await ValueChanged.InvokeAsync(date);
         IsOpen = false;
+        await UnregisterDismissAsync();
+        await ValueChanged.InvokeAsync(date);
     }
 
     private async Task Clear()
@@ -103,8 +153,14 @@
         Value = null;
         await ValueChanged.InvokeAsync(null);
     }
-    
+
     private void PreviousMonth() => currentMonth = currentMonth.AddMonths(-1);
     private void NextMonth() => currentMonth = currentMonth.AddMonths(1);
     private int GetDaysInMonth() => DateTime.DaysInMonth(currentMonth.Year, currentMonth.Month);
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
diff --git a/src/ShellUI.Components/Components/DateRangePicker.razor b/src/ShellUI.Components/Components/DateRangePicker.razor
index e3bc2e2..9eff0e8 100644
--- a/src/ShellUI.Components/Components/DateRangePicker.razor
+++ b/src/ShellUI.Components/Components/DateRangePicker.razor
@@ -1,18 +1,21 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
             @onclick="ToggleCalendar"
             disabled="@Disabled"
-            class="@Shell.Cn("flex h-10 w-full items-center justify-between 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 cursor-not-allowed" : "")">
-        <span class="@(StartDate == null && EndDate == null ? "text-muted-foreground" : "")">
+            class="@Shell.Cn("flex h-10 w-full items-center gap-2 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 cursor-not-allowed" : "")">
+        <span class="@("flex-1 text-left " + (StartDate == null && EndDate == null ? "text-muted-foreground" : ""))">
             @GetDisplayText()
         </span>
-        <div class="flex items-center gap-1">
+        <div class="ml-auto flex items-center gap-1 shrink-0">
             @if (AllowClear && (StartDate.HasValue || EndDate.HasValue))
             {
-                <button type="button" 
-                        @onclick="ClearRange" 
+                <button type="button"
+                        @onclick="ClearRange"
                         @onclick:stopPropagation="true"
                         class="p-0.5 hover:bg-accent rounded transition-colors">
                     <svg class="h-3.5 w-3.5 text-muted-foreground hover:text-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -20,7 +23,7 @@
                     </svg>
                 </button>
             }
-            <svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg class="h-4 w-4 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
             </svg>
         </div>
@@ -72,7 +75,7 @@
 
 @if (_isOpen)
 {
-    <div class="fixed inset-0 z-40" @onclick="() => _isOpen = false"></div>
+    <div class="fixed inset-0 z-40" @onclick="CloseBackdrop"></div>
 }
 
 @code {
@@ -83,6 +86,9 @@
     [Parameter] public string Placeholder { get; set; } = "Pick a date range";
     [Parameter] public bool AllowClear { get; set; } = true;
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the calendar when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the calendar open across scroll.
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -90,6 +96,9 @@
     private bool _isOpen;
     private DateTime _currentMonth = DateTime.Now;
     private bool _selectingStart = true;
+    private DotNetObjectReference<DateRangePicker>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
     
     private string GetDisplayText()
     {
@@ -127,7 +136,43 @@
         return baseClass;
     }
     
-    private void ToggleCalendar() => _isOpen = !_isOpen;
+    private async Task ToggleCalendar()
+    {
+        _isOpen = !_isOpen;
+        if (_isOpen) await RegisterDismissAsync();
+        else await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (_isOpen)
+        {
+            _isOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     private void PreviousMonth() => _currentMonth = _currentMonth.AddMonths(-1);
     private void NextMonth() => _currentMonth = _currentMonth.AddMonths(1);
     
@@ -175,10 +220,22 @@
         var firstDay = new DateTime(_currentMonth.Year, _currentMonth.Month, 1);
         var lastDay = firstDay.AddMonths(1).AddDays(-1);
         var startDayOfWeek = (int)firstDay.DayOfWeek;
-        
+
         for (int i = 0; i < startDayOfWeek; i++) days.Add(null);
         for (int day = 1; day <= lastDay.Day; day++) days.Add(new DateTime(_currentMonth.Year, _currentMonth.Month, day));
-        
+
         return days;
     }
+
+    private async Task CloseBackdrop()
+    {
+        _isOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
diff --git a/src/ShellUI.Components/Components/DialogContent.razor b/src/ShellUI.Components/Components/DialogContent.razor
index 11aed6e..5540fea 100644
--- a/src/ShellUI.Components/Components/DialogContent.razor
+++ b/src/ShellUI.Components/Components/DialogContent.razor
@@ -1,4 +1,7 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Dialog?.Open == true)
 {
@@ -19,6 +22,8 @@
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Dialog != null)
@@ -26,5 +31,25 @@
             await Dialog.SetOpen(false);
         }
     }
-}
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Dialog?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.lockBodyScroll"); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); } catch { }
+        }
+    }
+}
diff --git a/src/ShellUI.Components/Components/DrawerContent.razor b/src/ShellUI.Components/Components/DrawerContent.razor
index e3a38f4..4cdb3b7 100644
--- a/src/ShellUI.Components/Components/DrawerContent.razor
+++ b/src/ShellUI.Components/Components/DrawerContent.razor
@@ -1,4 +1,7 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Parent?.Open == true)
 {
@@ -18,8 +21,31 @@
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Parent?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.lockBodyScroll"); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); } catch { }
+        }
+    }
 }
diff --git a/src/ShellUI.Components/Components/MultiSelect.razor b/src/ShellUI.Components/Components/MultiSelect.razor
index e90bb93..60c93ad 100644
--- a/src/ShellUI.Components/Components/MultiSelect.razor
+++ b/src/ShellUI.Components/Components/MultiSelect.razor
@@ -1,6 +1,9 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
 @typeparam TItem
 @typeparam TKey where TKey : notnull
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class="@Shell.Cn("relative", Class)" @attributes="AdditionalAttributes">
     <button type="button"
@@ -48,7 +51,7 @@
     {
         <div class="absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md animate-in fade-in-0 zoom-in-95">
             <div class="flex items-center border-b border-border px-3">
-                <svg class="mr-2 h-4 w-4 shrink-0 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg class="mr-2 h-4 w-4 shrink-0 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                 </svg>
                 <input @ref="_searchInput"
@@ -121,6 +124,9 @@
     [Parameter] public string SearchPlaceholder { get; set; } = "Search...";
     [Parameter] public string EmptyText { get; set; } = "No results found.";
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -130,6 +136,9 @@
     private int _highlightedIndex;
     private ElementReference _searchInput;
     private bool _shouldFocus;
+    private DotNetObjectReference<MultiSelect<TItem, TKey>>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString("N");
+    private bool _dismissRegistered;
 
     private string DisplayFor(TItem item) => DisplaySelector?.Invoke(item) ?? item?.ToString() ?? "";
     private TKey KeyFor(TItem item) => KeySelector(item);
@@ -142,7 +151,7 @@
         return Items.Where(i => DisplayFor(i).Contains(q, StringComparison.OrdinalIgnoreCase));
     }
 
-    private void Toggle()
+    private async Task Toggle()
     {
         if (Disabled) return;
         IsOpen = !IsOpen;
@@ -151,10 +160,49 @@
             _searchQuery = "";
             _highlightedIndex = 0;
             _shouldFocus = true;
+            await RegisterDismissAsync();
+        }
+        else
+        {
+            await UnregisterDismissAsync();
         }
     }
 
-    private void Close() => IsOpen = false;
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync("ShellUI.onDismissEvents", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync("ShellUI.offDismissEvents", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -186,7 +234,7 @@
     private async Task OnKeyDown(KeyboardEventArgs e)
     {
         var filtered = Filter().ToList();
-        if (e.Key == "Escape") { Close(); return; }
+        if (e.Key == "Escape") { await Close(); return; }
         if (e.Key == "ArrowDown") { _highlightedIndex = Math.Min(_highlightedIndex + 1, filtered.Count - 1); return; }
         if (e.Key == "ArrowUp") { _highlightedIndex = Math.Max(_highlightedIndex - 1, 0); return; }
         if (e.Key == "Enter" && filtered.Count > 0)
@@ -195,4 +243,10 @@
             await ToggleItem(filtered[idx]);
         }
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
diff --git a/src/ShellUI.Components/Components/SheetContent.razor b/src/ShellUI.Components/Components/SheetContent.razor
index a901a9b..ccd9d70 100644
--- a/src/ShellUI.Components/Components/SheetContent.razor
+++ b/src/ShellUI.Components/Components/SheetContent.razor
@@ -1,4 +1,7 @@
 @namespace ShellUI.Components
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Parent?.Open == true)
 {
@@ -17,8 +20,31 @@
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Parent?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.lockBodyScroll"); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync("ShellUI.unlockBodyScroll"); } catch { }
+        }
+    }
 }
diff --git a/src/ShellUI.Components/Components/Sonner.razor b/src/ShellUI.Components/Components/Sonner.razor
index 5d28106..9db9ad7 100644
--- a/src/ShellUI.Components/Components/Sonner.razor
+++ b/src/ShellUI.Components/Components/Sonner.razor
@@ -13,7 +13,7 @@
         var stackClass = i > 0 ? (IsTop ? "-mt-20 group-hover:mt-0" : "-mb-20 group-hover:mb-0") : "";
         <div @key="toast.Id"
              style="z-index: @(i + 1)"
-             class="@stackClass @GetToastClasses(toast.Variant) pointer-events-auto relative flex min-w-0 w-full items-center gap-3 overflow-hidden rounded-lg p-4 shadow-lg transition-all duration-300 animate-in fade-in-0 @SonnerVariants.GetToastAnimation(Position) shrink-0">
+             class="@stackClass @GetToastClasses(toast.Variant) pointer-events-auto relative flex min-w-0 w-full items-center gap-3 overflow-hidden rounded-lg p-4 shadow-lg transition-all duration-300 motion-reduce:transition-none animate-in fade-in-0 motion-reduce:animate-none @SonnerVariants.GetToastAnimation(Position) shrink-0">
             <div class="grid flex-1 gap-1">
                 @if (!string.IsNullOrEmpty(toast.Message))
                 {
@@ -50,6 +50,8 @@
     {
         "destructive" => "bg-destructive text-destructive-foreground",
         "success" => "bg-green-500/20 text-green-700 dark:bg-green-900/30 dark:text-green-100",
+        "info" => "bg-blue-500/20 text-blue-700 dark:bg-blue-900/30 dark:text-blue-100",
+        "warning" => "bg-yellow-500/20 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-100",
         _ => "bg-background text-foreground"
     };
 }
diff --git a/src/ShellUI.Components/Components/Stepper.razor b/src/ShellUI.Components/Components/Stepper.razor
index 6a31099..803e564 100644
--- a/src/ShellUI.Components/Components/Stepper.razor
+++ b/src/ShellUI.Components/Components/Stepper.razor
@@ -1,7 +1,7 @@
 @namespace ShellUI.Components
 @using ShellUI.Components.Models
 
-<CascadingValue Value="this" IsFixed="true">
+<CascadingValue Value="this">
     <div class="@Shell.Cn("w-full", Class)">
         @if (StepItems.Count > 0)
         {
@@ -13,13 +13,22 @@
                     var isActive = i == _activeStep;
                     var isCompleted = i < _highestStepReached;
                     var isClickable = i <= _highestStepReached;
+                    var capturedIndex = i;
+
+                    string stateClass;
+                    if (isActive)
+                        stateClass = "border-primary bg-primary text-primary-foreground ring-2 ring-primary/20 ring-offset-2 ring-offset-background";
+                    else if (isCompleted)
+                        stateClass = "border-primary bg-primary/10 text-primary";
+                    else
+                        stateClass = "border-muted bg-background text-muted-foreground";
 
                     <div class="flex flex-col items-center relative">
                         <button type="button"
-                                class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", isCompleted ? "border-primary bg-primary text-primary-foreground" : isActive ? "border-primary bg-background text-primary" : "border-muted bg-background text-muted-foreground", isClickable ? "cursor-pointer hover:border-primary/50" : "cursor-not-allowed")"
+                                class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", stateClass, isClickable ? "cursor-pointer" : "cursor-not-allowed", isClickable && !isActive ? "hover:border-primary/50" : "")"
                                 disabled="@(!isClickable)"
-                                @onclick="async () => await GoToStepAsync(i)">
-                            @if (isCompleted)
+                                @onclick="async () => await GoToStepAsync(capturedIndex)">
+                            @if (isCompleted && !isActive)
                             {
                                 <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
diff --git a/src/ShellUI.Components/Components/StepperStep.razor b/src/ShellUI.Components/Components/StepperStep.razor
index fe51d2f..d26bb2c 100644
--- a/src/ShellUI.Components/Components/StepperStep.razor
+++ b/src/ShellUI.Components/Components/StepperStep.razor
@@ -5,13 +5,24 @@
     var isActive = ParentStepper?.ActiveStep == index;
     var isCompleted = ParentStepper != null && index < ParentStepper.HighestStepReached;
     var isClickable = ParentStepper != null && index <= ParentStepper.HighestStepReached;
+
+    // Active wins over completed so clicking back to a visited step still shows
+    // "you are here" instead of the completed checkmark. Ring adds a subtle glow
+    // that reads as "current" independent of fill.
+    string stateClass;
+    if (isActive)
+        stateClass = "border-primary bg-primary text-primary-foreground ring-2 ring-primary/20 ring-offset-2 ring-offset-background";
+    else if (isCompleted)
+        stateClass = "border-primary bg-primary/10 text-primary";
+    else
+        stateClass = "border-muted bg-background text-muted-foreground";
 }
 <div class="flex flex-col items-center relative">
     <button type="button"
-            class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", isCompleted ? "border-primary bg-primary text-primary-foreground" : isActive ? "border-primary bg-background text-primary" : "border-muted bg-background text-muted-foreground", isClickable ? "cursor-pointer hover:border-primary/50" : "cursor-not-allowed")"
+            class="@Shell.Cn("flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors", stateClass, isClickable ? "cursor-pointer" : "cursor-not-allowed", isClickable && !isActive ? "hover:border-primary/50" : "")"
             disabled="@(!isClickable)"
             @onclick="async () => { if (ParentStepper != null) await ParentStepper.GoToStepAsync(index); }">
-        @if (isCompleted)
+        @if (isCompleted && !isActive)
         {
             <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
diff --git a/src/ShellUI.Components/Components/Toast.razor b/src/ShellUI.Components/Components/Toast.razor
index 71a1d7f..1946e41 100644
--- a/src/ShellUI.Components/Components/Toast.razor
+++ b/src/ShellUI.Components/Components/Toast.razor
@@ -3,7 +3,7 @@
 @if (IsVisible)
 {
     <div class="@Shell.Cn("fixed z-50 flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:flex-col md:max-w-[420px]", GetPositionClass())">
-        <div class="@Shell.Cn("pointer-events-auto group relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-border p-6 pr-8 shadow-lg transition-all", GetVariantClass(), Class)"
+        <div class="@Shell.Cn("pointer-events-auto group relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-border p-6 pr-8 shadow-lg transition-all motion-reduce:transition-none", GetVariantClass(), Class)"
              @attributes="AdditionalAttributes">
             <div class="grid gap-1">
                 @if (!string.IsNullOrEmpty(Title))
diff --git a/src/ShellUI.Components/Components/TypedSelect.razor b/src/ShellUI.Components/Components/TypedSelect.razor
new file mode 100644
index 0000000..b03d077
--- /dev/null
+++ b/src/ShellUI.Components/Components/TypedSelect.razor
@@ -0,0 +1,76 @@
+@namespace ShellUI.Components
+@typeparam TValue
+@using System.Globalization
+
+<div class="relative w-full">
+    <select value="@FormatValue()"
+            @onchange="OnChange"
+            disabled="@Disabled"
+            class="@ComputedClass"
+            @attributes="AdditionalAttributes">
+        @ChildContent
+    </select>
+    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+        <svg class="h-4 w-4 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+    </div>
+</div>
+
+@code {
+    [Parameter] public TValue? Value { get; set; }
+    [Parameter] public EventCallback<TValue?> ValueChanged { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string ComputedClass => Shell.Cn(
+        "flex h-10 w-full appearance-none rounded-md border border-input bg-background pl-3 pr-9 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        Class
+    );
+
+    // InvariantCulture on IFormattable so decimals/dates round-trip cleanly across a
+    // German user's `0,5` vs an English user's `0.5` (the browser sends whatever the
+    // user's <option value=""> literal was).
+    private string? FormatValue() => Value switch
+    {
+        null => null,
+        IFormattable f => f.ToString(null, CultureInfo.InvariantCulture),
+        _ => Value.ToString()
+    };
+
+    private async Task OnChange(ChangeEventArgs e)
+    {
+        var raw = e.Value?.ToString();
+        if (raw is null)
+        {
+            await ValueChanged.InvokeAsync(default);
+            return;
+        }
+
+        // Unwrap Nullable<T> so switch matches T, not T?.
+        var targetType = Nullable.GetUnderlyingType(typeof(TValue)) ?? typeof(TValue);
+
+        try
+        {
+            object? parsed = targetType switch
+            {
+                _ when targetType == typeof(string) => raw,
+                _ when targetType.IsEnum => string.IsNullOrEmpty(raw) ? null : Enum.Parse(targetType, raw),
+                _ when targetType == typeof(Guid) => string.IsNullOrEmpty(raw) ? Guid.Empty : Guid.Parse(raw),
+                _ when targetType == typeof(bool) => bool.Parse(raw),
+                _ when string.IsNullOrEmpty(raw) => null,
+                _ => Convert.ChangeType(raw, targetType, CultureInfo.InvariantCulture)
+            };
+            await ValueChanged.InvokeAsync(parsed is null ? default : (TValue?)parsed);
+        }
+        catch
+        {
+            // Placeholder <option value=""> and other unparseable values gracefully
+            // resolve to default(TValue) instead of throwing across the render loop.
+            await ValueChanged.InvokeAsync(default);
+        }
+    }
+}
diff --git a/src/ShellUI.Components/Models/DataTableModels.cs b/src/ShellUI.Components/Models/DataTableModels.cs
index 5c433d0..623d6a4 100644
--- a/src/ShellUI.Components/Models/DataTableModels.cs
+++ b/src/ShellUI.Components/Models/DataTableModels.cs
@@ -25,3 +25,19 @@ public enum SortDirection
     Descending
 }
 
+// Passed to OnDataRequest when DataTable is in ServerSide mode. The server-side data
+// loader receives filter / sort / page state and returns just the current page.
+public class DataTableRequest
+{
+    public int Skip { get; set; }
+    public int Take { get; set; }
+    public string? SortBy { get; set; }
+    public SortDirection SortDirection { get; set; } = SortDirection.None;
+    public string SearchQuery { get; set; } = "";
+}
+
+public class DataTableResponse<TItem>
+{
+    public IEnumerable<TItem> Items { get; set; } = Array.Empty<TItem>();
+    public int TotalCount { get; set; }
+}
diff --git a/src/ShellUI.Components/Services/SonnerService.cs b/src/ShellUI.Components/Services/SonnerService.cs
index 467f785..5ec4c06 100644
--- a/src/ShellUI.Components/Services/SonnerService.cs
+++ b/src/ShellUI.Components/Services/SonnerService.cs
@@ -6,13 +6,20 @@ public class SonnerToastItem
     public string Message { get; set; } = "";
     public string? Description { get; set; }
     public string Variant { get; set; } = "default";
+    // Zero or negative disables auto-dismiss (toast stays until manually closed).
+    public TimeSpan Duration { get; set; } = TimeSpan.FromSeconds(4);
     public DateTime CreatedAt { get; } = DateTime.UtcNow;
 }
 
 public interface ISonnerService
 {
     IReadOnlyList<SonnerToastItem> Toasts { get; }
-    void Show(string message, string? description = null, string variant = "default");
+    void Show(string message, string? description = null, string variant = "default", TimeSpan? duration = null);
+    void Success(string message, string? description = null, TimeSpan? duration = null);
+    void Error(string message, string? description = null, TimeSpan? duration = null);
+    void Info(string message, string? description = null, TimeSpan? duration = null);
+    void Warning(string message, string? description = null, TimeSpan? duration = null);
+    void Remove(string id);
 }
 
 public class SonnerService : ISonnerService
@@ -21,15 +28,49 @@ public class SonnerService : ISonnerService
     public IReadOnlyList<SonnerToastItem> Toasts => _toasts;
     public event Action? OnChange;
 
-    public void Show(string message, string? description = null, string variant = "default")
+    public void Show(string message, string? description = null, string variant = "default", TimeSpan? duration = null)
     {
-        _toasts.Add(new SonnerToastItem { Message = message, Description = description, Variant = variant });
+        var toast = new SonnerToastItem
+        {
+            Message = message,
+            Description = description,
+            Variant = variant,
+            Duration = duration ?? TimeSpan.FromSeconds(4)
+        };
+        _toasts.Add(toast);
         OnChange?.Invoke();
+
+        if (toast.Duration > TimeSpan.Zero)
+        {
+            _ = AutoDismissAsync(toast.Id, toast.Duration);
+        }
     }
 
+    public void Success(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "success", duration);
+
+    public void Error(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "destructive", duration);
+
+    public void Info(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "info", duration);
+
+    public void Warning(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, "warning", duration);
+
     public void Remove(string id)
     {
-        _toasts.RemoveAll(t => t.Id == id);
-        OnChange?.Invoke();
+        var removed = _toasts.RemoveAll(t => t.Id == id);
+        if (removed > 0) OnChange?.Invoke();
+    }
+
+    private async Task AutoDismissAsync(string id, TimeSpan delay)
+    {
+        try
+        {
+            await Task.Delay(delay);
+            Remove(id);
+        }
+        catch { }
     }
 }
diff --git a/src/ShellUI.Components/build/ShellUI.Components.targets b/src/ShellUI.Components/build/ShellUI.Components.targets
index 425df85..2e6a434 100644
--- a/src/ShellUI.Components/build/ShellUI.Components.targets
+++ b/src/ShellUI.Components/build/ShellUI.Components.targets
@@ -207,6 +207,8 @@
     <ShellUISafelistEntry Include="min-w-[8rem]" />
     <ShellUISafelistEntry Include="ml-3" />
     <ShellUISafelistEntry Include="ml-auto" />
+    <ShellUISafelistEntry Include="motion-reduce:animate-none" />
+    <ShellUISafelistEntry Include="motion-reduce:transition-none" />
     <ShellUISafelistEntry Include="mr-2" />
     <ShellUISafelistEntry Include="mr-3" />
     <ShellUISafelistEntry Include="mt-0.5" />
@@ -318,6 +320,7 @@
     <ShellUISafelistEntry Include="text-center" />
     <ShellUISafelistEntry Include="text-destructive-foreground" />
     <ShellUISafelistEntry Include="text-foreground" />
+    <ShellUISafelistEntry Include="text-foreground/70" />
     <ShellUISafelistEntry Include="text-left" />
     <ShellUISafelistEntry Include="text-lg" />
     <ShellUISafelistEntry Include="text-muted-foreground" />
diff --git a/src/ShellUI.Components/wwwroot/shellui-classes.txt b/src/ShellUI.Components/wwwroot/shellui-classes.txt
index 35e5294..71a213c 100644
--- a/src/ShellUI.Components/wwwroot/shellui-classes.txt
+++ b/src/ShellUI.Components/wwwroot/shellui-classes.txt
@@ -204,6 +204,8 @@ min-w-[640px]
 min-w-[8rem]
 ml-3
 ml-auto
+motion-reduce:animate-none
+motion-reduce:transition-none
 mr-2
 mr-3
 mt-0.5
@@ -315,6 +317,7 @@ text-card-foreground
 text-center
 text-destructive-foreground
 text-foreground
+text-foreground/70
 text-left
 text-lg
 text-muted-foreground
diff --git a/src/ShellUI.Components/wwwroot/shellui.js b/src/ShellUI.Components/wwwroot/shellui.js
index 7ae5a4e..80a690c 100644
--- a/src/ShellUI.Components/wwwroot/shellui.js
+++ b/src/ShellUI.Components/wwwroot/shellui.js
@@ -33,6 +33,48 @@ Object.assign(window.ShellUI, {
             window.removeEventListener("keydown", listener);
             shortcutHandlers.delete(handle);
         }
+    },
+
+    // Ref-counted body-scroll lock so nested modals (dialog opens a drawer opens a
+    // sheet) don't prematurely unlock when the innermost closes.
+    _scrollLockCount: 0,
+    _originalOverflow: "",
+    lockBodyScroll: function () {
+        if (this._scrollLockCount === 0) {
+            this._originalOverflow = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+        }
+        this._scrollLockCount++;
+    },
+    unlockBodyScroll: function () {
+        if (this._scrollLockCount === 0) return;
+        this._scrollLockCount--;
+        if (this._scrollLockCount === 0) {
+            document.body.style.overflow = this._originalOverflow;
+        }
+    },
+
+    // Fire a .NET callback when the window scrolls or resizes. Used by dropdowns
+    // to close when the page scrolls (native Blazor can't reposition popovers).
+    // Bubble-phase listener means inner scrolling inside the dropdown itself
+    // (e.g. scrolling through options) does NOT fire this — only page scroll does.
+    // Fire a .NET callback when the page (window) scrolls or the window resizes.
+    // Bubble-phase intentionally — scrolling inside an inner element (e.g. an option
+    // list with overflow:auto) does NOT fire this, only page-level scroll does.
+    _dismissHandlers: new Map(),
+    onDismissEvents: function (handle, dotNetRef) {
+        const listener = () => dotNetRef.invokeMethodAsync("OnDismissEvent");
+        window.addEventListener("scroll", listener);
+        window.addEventListener("resize", listener);
+        this._dismissHandlers.set(handle, listener);
+    },
+    offDismissEvents: function (handle) {
+        const listener = this._dismissHandlers.get(handle);
+        if (listener) {
+            window.removeEventListener("scroll", listener);
+            window.removeEventListener("resize", listener);
+            this._dismissHandlers.delete(handle);
+        }
     }
 });
 
@@ -43,3 +85,7 @@ export function registerShortcut(handle, key, ctrl, meta, shift, alt, dotNetRef)
     return window.ShellUI.registerShortcut(handle, key, ctrl, meta, shift, alt, dotNetRef);
 }
 export function unregisterShortcut(handle) { return window.ShellUI.unregisterShortcut(handle); }
+export function lockBodyScroll() { return window.ShellUI.lockBodyScroll(); }
+export function unlockBodyScroll() { return window.ShellUI.unlockBodyScroll(); }
+export function onDismissEvents(handle, dotNetRef) { return window.ShellUI.onDismissEvents(handle, dotNetRef); }
+export function offDismissEvents(handle) { return window.ShellUI.offDismissEvents(handle); }
diff --git a/src/ShellUI.Templates/ComponentRegistry.cs b/src/ShellUI.Templates/ComponentRegistry.cs
index 4ab28b9..b156164 100644
--- a/src/ShellUI.Templates/ComponentRegistry.cs
+++ b/src/ShellUI.Templates/ComponentRegistry.cs
@@ -35,6 +35,7 @@ public static class ComponentRegistry
         { "progress", ProgressTemplate.Metadata },
         { "separator", SeparatorTemplate.Metadata },
         { "select", SelectTemplate.Metadata },
+        { "typed-select", TypedSelectTemplate.Metadata },
         { "select-trigger", SelectTriggerTemplate.Metadata },
         { "select-content", SelectContentTemplate.Metadata },
         { "select-item", SelectItemTemplate.Metadata },
@@ -211,6 +212,7 @@ public static class ComponentRegistry
             "progress" => ProgressTemplate.Content,
             "separator" => SeparatorTemplate.Content,
             "select" => SelectTemplate.Content,
+            "typed-select" => TypedSelectTemplate.Content,
             "select-trigger" => SelectTriggerTemplate.Content,
             "select-content" => SelectContentTemplate.Content,
             "select-item" => SelectItemTemplate.Content,
diff --git a/src/ShellUI.Templates/Templates/ComboboxTemplate.cs b/src/ShellUI.Templates/Templates/ComboboxTemplate.cs
index e225cb0..36c003e 100644
--- a/src/ShellUI.Templates/Templates/ComboboxTemplate.cs
+++ b/src/ShellUI.Templates/Templates/ComboboxTemplate.cs
@@ -15,6 +15,9 @@ public static class ComboboxTemplate
     };
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class=""@Shell.Cn(""relative"", Class)"" @attributes=""AdditionalAttributes"">
     <button type=""button""
@@ -91,6 +94,9 @@ public static class ComboboxTemplate
     [Parameter] public bool Disabled { get; set; }
     [Parameter] public IEnumerable<string>? Options { get; set; }
     [Parameter] public bool Searchable { get; set; } = true;
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll.
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public RenderFragment? ChildContent { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
@@ -98,23 +104,73 @@ public static class ComboboxTemplate
     
     private bool IsOpen { get; set; }
     private string searchQuery = """";
-    
-    private void Toggle() 
+    private DotNetObjectReference<Combobox>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString(""N"");
+    private bool _dismissRegistered;
+
+    private async Task Toggle()
     {
-        if (!Disabled)
+        if (Disabled) return;
+        IsOpen = !IsOpen;
+        if (IsOpen)
+        {
+            searchQuery = """";
+            await RegisterDismissAsync();
+        }
+        else
         {
-            IsOpen = !IsOpen;
-            if (IsOpen) searchQuery = """";
+            await UnregisterDismissAsync();
         }
     }
-    
-    private void Close() => IsOpen = false;
-    
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync(""ShellUI.onDismissEvents"", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync(""ShellUI.offDismissEvents"", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     public async Task SelectValue(string value)
     {
         Value = value;
-        await ValueChanged.InvokeAsync(value);
         IsOpen = false;
+        await UnregisterDismissAsync();
+        await ValueChanged.InvokeAsync(value);
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
     }
 }
 ";
diff --git a/src/ShellUI.Templates/Templates/CommandTemplate.cs b/src/ShellUI.Templates/Templates/CommandTemplate.cs
index f5b2a88..8b6cf88 100644
--- a/src/ShellUI.Templates/Templates/CommandTemplate.cs
+++ b/src/ShellUI.Templates/Templates/CommandTemplate.cs
@@ -23,7 +23,7 @@ @using Microsoft.JSInterop
     <div class=""fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-0 shadow-lg duration-200 sm:rounded-lg"">
         <!-- Search Input -->
         <div class=""flex items-center border-b px-3"">
-            <svg class=""mr-2 h-4 w-4 shrink-0 opacity-50"" xmlns=""http://www.w3.org/2000/svg"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
+            <svg class=""mr-2 h-4 w-4 shrink-0 text-foreground/70"" xmlns=""http://www.w3.org/2000/svg"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
                 <path stroke-linecap=""round"" stroke-linejoin=""round"" stroke-width=""2"" d=""M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"" />
             </svg>
             <input
diff --git a/src/ShellUI.Templates/Templates/DataPickerTemplate.cs b/src/ShellUI.Templates/Templates/DataPickerTemplate.cs
index baf69fb..9abcb3e 100644
--- a/src/ShellUI.Templates/Templates/DataPickerTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DataPickerTemplate.cs
@@ -14,8 +14,11 @@ public static class DataPickerTemplate
     };
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using Microsoft.JSInterop
 @typeparam TItem
 @typeparam TKey where TKey : notnull
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class=""@Shell.Cn(""relative"", Class)"" @attributes=""AdditionalAttributes"">
     <button type=""button""
@@ -45,7 +48,7 @@ @typeparam TItem
     {
         <div class=""absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md animate-in fade-in-0 zoom-in-95"">
             <div class=""flex items-center border-b border-border px-3"">
-                <svg class=""mr-2 h-4 w-4 shrink-0 text-muted-foreground"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
+                <svg class=""mr-2 h-4 w-4 shrink-0 text-foreground/70"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
                     <path stroke-linecap=""round"" stroke-linejoin=""round"" stroke-width=""2"" d=""M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"" />
                 </svg>
                 <input @ref=""_searchInput""
@@ -118,6 +121,9 @@ @typeparam TItem
     [Parameter] public string SearchPlaceholder { get; set; } = ""Search..."";
     [Parameter] public string EmptyText { get; set; } = ""No results found."";
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -127,6 +133,9 @@ @typeparam TItem
     private int _highlightedIndex;
     private ElementReference _searchInput;
     private bool _shouldFocus;
+    private DotNetObjectReference<DataPicker<TItem, TKey>>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString(""N"");
+    private bool _dismissRegistered;
 
     private string DisplayFor(TItem item) => DisplaySelector?.Invoke(item) ?? item?.ToString() ?? """";
     private TKey KeyFor(TItem item) => KeySelector(item);
@@ -139,7 +148,7 @@ private IEnumerable<TItem> Filter()
         return Items.Where(i => DisplayFor(i).Contains(q, StringComparison.OrdinalIgnoreCase));
     }
 
-    private void Toggle()
+    private async Task Toggle()
     {
         if (Disabled) return;
         IsOpen = !IsOpen;
@@ -148,10 +157,49 @@ private void Toggle()
             _searchQuery = """";
             _highlightedIndex = 0;
             _shouldFocus = true;
+            await RegisterDismissAsync();
+        }
+        else
+        {
+            await UnregisterDismissAsync();
+        }
+    }
+
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
         }
     }
 
-    private void Close() => IsOpen = false;
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync(""ShellUI.onDismissEvents"", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync(""ShellUI.offDismissEvents"", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -166,13 +214,14 @@ private async Task SelectItem(TItem item)
     {
         Value = item;
         IsOpen = false;
+        await UnregisterDismissAsync();
         await ValueChanged.InvokeAsync(item);
     }
 
     private async Task OnKeyDown(KeyboardEventArgs e)
     {
         var filtered = Filter().ToList();
-        if (e.Key == ""Escape"") { Close(); return; }
+        if (e.Key == ""Escape"") { await Close(); return; }
         if (e.Key == ""ArrowDown"") { _highlightedIndex = Math.Min(_highlightedIndex + 1, filtered.Count - 1); return; }
         if (e.Key == ""ArrowUp"") { _highlightedIndex = Math.Max(_highlightedIndex - 1, 0); return; }
         if (e.Key == ""Enter"" && filtered.Count > 0)
@@ -181,6 +230,12 @@ private async Task OnKeyDown(KeyboardEventArgs e)
             await SelectItem(filtered[idx]);
         }
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
 ";
 }
diff --git a/src/ShellUI.Templates/Templates/DataTableModelsTemplate.cs b/src/ShellUI.Templates/Templates/DataTableModelsTemplate.cs
index a5b8c38..9988565 100644
--- a/src/ShellUI.Templates/Templates/DataTableModelsTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DataTableModelsTemplate.cs
@@ -41,6 +41,22 @@ public enum SortDirection
     Ascending,
     Descending
 }
+
+// Passed to OnDataRequest when DataTable is in ServerSide mode.
+public class DataTableRequest
+{
+    public int Skip { get; set; }
+    public int Take { get; set; }
+    public string? SortBy { get; set; }
+    public SortDirection SortDirection { get; set; } = SortDirection.None;
+    public string SearchQuery { get; set; } = """";
+}
+
+public class DataTableResponse<TItem>
+{
+    public IEnumerable<TItem> Items { get; set; } = Array.Empty<TItem>();
+    public int TotalCount { get; set; }
+}
 ";
 }
 
diff --git a/src/ShellUI.Templates/Templates/DataTableTemplate.cs b/src/ShellUI.Templates/Templates/DataTableTemplate.cs
index 62c168b..fdc8ec6 100644
--- a/src/ShellUI.Templates/Templates/DataTableTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DataTableTemplate.cs
@@ -55,7 +55,7 @@ @namespace YourProjectNamespace.Components.UI
                     @foreach (var column in Columns)
                     {
                         <th class=""h-12 px-4 text-left align-middle font-medium text-muted-foreground @(column.Sortable ? ""cursor-pointer hover:bg-accent/50"" : """")""
-                            @onclick=""() => { if (column.Sortable) OnSortClicked(column); }"">
+                            @onclick=""async () => { if (column.Sortable) await OnSortClicked(column); }"">
                             <div class=""flex items-center gap-2"">
                                 @column.Header
                                 @if (column.Sortable)
@@ -136,7 +136,7 @@ No results found.
     </div>
 
     <!-- Pagination -->
-    @if (ShowPagination && _filteredItems.Any())
+    @if (ShowPagination && (_filteredItems.Any() || (ServerSide && _serverTotalCount > 0)))
     {
         <div class=""flex flex-col gap-4 px-2 py-4 sm:flex-row sm:items-center sm:justify-between"">
             <div class=""flex-1 text-sm text-muted-foreground"">
@@ -146,7 +146,7 @@ No results found.
                 }
                 else
                 {
-                    @($""Showing {_startIndex} - {_endIndex} of {_filteredItems.Count()} results"")
+                    @($""Showing {_startIndex} - {_endIndex} of {(ServerSide ? _serverTotalCount : _filteredItems.Count())} results"")
                 }
             </div>
             <div class=""flex flex-col gap-4 sm:flex-row sm:items-center sm:space-x-6 lg:space-x-8"">
@@ -160,7 +160,7 @@ No results found.
                             }
                         </select>
                         <div class=""absolute inset-y-0 right-1 flex items-center pointer-events-none"">
-                            <svg class=""h-3 w-3 text-muted-foreground"" xmlns=""http://www.w3.org/2000/svg"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
+                            <svg class=""h-3 w-3 text-foreground/70"" xmlns=""http://www.w3.org/2000/svg"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
                                 <path stroke-linecap=""round"" stroke-linejoin=""round"" stroke-width=""2"" d=""M19 9l-7 7-7-7"" />
                             </svg>
                         </div>
@@ -213,6 +213,16 @@ Page @_currentPage of @_totalPages
     [Parameter]
     public EventCallback<HashSet<TItem>> SelectedItemsChanged { get; set; }
 
+    /// When true, `Items` is ignored and the table calls `OnDataRequest` for each
+    /// filter / sort / page change. Use for datasets too large to materialize client-side.
+    [Parameter]
+    public bool ServerSide { get; set; }
+
+    /// Required when `ServerSide` is true. Receives the current DataTableRequest
+    /// (skip/take/sort/search) and returns the page of items plus total count.
+    [Parameter]
+    public Func<DataTableRequest, Task<DataTableResponse<TItem>>>? OnDataRequest { get; set; }
+
     private string _filterText = """";
     private IEnumerable<TItem> _filteredItems = new List<TItem>();
     private IEnumerable<TItem> _paginatedItems = new List<TItem>();
@@ -222,11 +232,49 @@ Page @_currentPage of @_totalPages
     private int _startIndex = 1;
     private int _endIndex = 1;
     private int _pageSize = 10;
+    private int _serverTotalCount = 0;
     private TItem? _openActionsItem = default(TItem);
 
-    protected override void OnParametersSet()
+    protected override async Task OnParametersSetAsync()
+    {
+        await RefreshAsync();
+    }
+
+    private async Task RefreshAsync()
+    {
+        if (ServerSide && OnDataRequest is not null)
+        {
+            await LoadServerPageAsync();
+        }
+        else
+        {
+            UpdateFilteredItems();
+        }
+    }
+
+    private async Task LoadServerPageAsync()
     {
-        UpdateFilteredItems();
+        var sortColumn = Columns.FirstOrDefault(c => c.SortDirection != SortDirection.None);
+        var request = new DataTableRequest
+        {
+            Skip = (_currentPage - 1) * _pageSize,
+            Take = _pageSize,
+            SortBy = sortColumn?.PropertyName,
+            SortDirection = sortColumn?.SortDirection ?? SortDirection.None,
+            SearchQuery = _filterText ?? """"
+        };
+
+        var response = await OnDataRequest!(request);
+
+        _paginatedItems = response.Items;
+        _serverTotalCount = response.TotalCount;
+        _totalPages = Math.Max(1, (int)Math.Ceiling(_serverTotalCount / (double)_pageSize));
+        _currentPage = Math.Min(_currentPage, _totalPages);
+        _startIndex = _serverTotalCount == 0 ? 0 : (_currentPage - 1) * _pageSize + 1;
+        _endIndex = Math.Min(_currentPage * _pageSize, _serverTotalCount);
+        _filteredItems = _paginatedItems;
+
+        StateHasChanged();
     }
 
     private void UpdateFilteredItems()
@@ -235,9 +283,8 @@ private void UpdateFilteredItems()
         _filteredItems = string.IsNullOrWhiteSpace(_filterText)
             ? Items
             : Items.Where(item =>
-                Columns.Any(col => 
+                Columns.Any(col =>
                 {
-                    // Simple text search - check if any property contains the filter text
                     var property = typeof(TItem).GetProperty(col.PropertyName);
                     if (property != null)
                     {
@@ -265,31 +312,29 @@ private void UpdateFilteredItems()
         StateHasChanged();
     }
 
-    private void OnFilterInput(ChangeEventArgs e)
+    private async Task OnFilterInput(ChangeEventArgs e)
     {
         _filterText = e.Value?.ToString() ?? """";
-        _currentPage = 1; // Reset to first page
-        UpdateFilteredItems();
+        _currentPage = 1;
+        await RefreshAsync();
     }
 
-    private void OnFilterChanged(string value)
+    private async Task OnFilterChanged(string value)
     {
         _filterText = value;
-        _currentPage = 1; // Reset to first page
-        UpdateFilteredItems();
+        _currentPage = 1;
+        await RefreshAsync();
     }
 
-    private void OnSortClicked(DataTableColumn<TItem> column)
+    private async Task OnSortClicked(DataTableColumn<TItem> column)
     {
         if (!column.Sortable) return;
 
-        // Reset other columns
         foreach (var col in Columns.Where(c => c != column))
         {
             col.SortDirection = SortDirection.None;
         }
 
-        // Cycle sort direction
         column.SortDirection = column.SortDirection switch
         {
             SortDirection.None => SortDirection.Ascending,
@@ -298,7 +343,7 @@ private void OnSortClicked(DataTableColumn<TItem> column)
             _ => SortDirection.Ascending
         };
 
-        UpdateFilteredItems();
+        await RefreshAsync();
     }
 
     private void OnSelectAllChanged(bool selected)
@@ -333,31 +378,31 @@ private void OnItemSelectionChanged(TItem item, bool selected)
 
     private bool IsSelected(TItem item) => _selectedItems.Contains(item);
 
-    private void OnPageSizeChanged(ChangeEventArgs e)
+    private async Task OnPageSizeChanged(ChangeEventArgs e)
     {
         if (int.TryParse(e.Value?.ToString(), out var size))
         {
             _pageSize = size;
             _currentPage = 1;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
-    private void OnPreviousPage()
+    private async Task OnPreviousPage()
     {
         if (_currentPage > 1)
         {
             _currentPage--;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
-    private void OnNextPage()
+    private async Task OnNextPage()
     {
         if (_currentPage < _totalPages)
         {
             _currentPage++;
-            UpdateFilteredItems();
+            await RefreshAsync();
         }
     }
 
diff --git a/src/ShellUI.Templates/Templates/DatePickerTemplate.cs b/src/ShellUI.Templates/Templates/DatePickerTemplate.cs
index 5b68ca7..c9ae0cd 100644
--- a/src/ShellUI.Templates/Templates/DatePickerTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DatePickerTemplate.cs
@@ -16,20 +16,23 @@ public class DatePickerTemplate
     };
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class=""@(""relative "" + ClassName)"" @attributes=""AdditionalAttributes"">
     <button type=""button""
             @onclick=""ToggleCalendar""
             disabled=""@Disabled""
-            class=""@(""flex h-10 w-full items-center justify-between 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 cursor-not-allowed"" : """"))"">
-        <span class=""@(SelectedDate == null ? ""text-muted-foreground"" : """")"">
+            class=""@(""flex h-10 w-full items-center gap-2 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 cursor-not-allowed"" : """"))"">
+        <span class=""@(""flex-1 text-left "" + (SelectedDate == null ? ""text-muted-foreground"" : """"))"">
             @(SelectedDate?.ToString(""MMM dd, yyyy"") ?? Placeholder)
         </span>
-        <div class=""flex items-center gap-1"">
+        <div class=""ml-auto flex items-center gap-1 shrink-0"">
             @if (AllowClear && SelectedDate.HasValue)
             {
-                <button type=""button"" 
-                        @onclick=""ClearDate"" 
+                <button type=""button""
+                        @onclick=""ClearDate""
                         @onclick:stopPropagation=""true""
                         class=""p-0.5 hover:bg-accent rounded transition-colors"">
                     <svg class=""h-3.5 w-3.5 text-muted-foreground hover:text-foreground"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
@@ -37,7 +40,7 @@ public class DatePickerTemplate
                     </svg>
                 </button>
             }
-            <svg class=""h-4 w-4 text-muted-foreground"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
+            <svg class=""h-4 w-4 text-foreground/70"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
                 <path stroke-linecap=""round"" stroke-linejoin=""round"" stroke-width=""2"" d=""M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"" />
             </svg>
         </div>
@@ -102,7 +105,12 @@ public class DatePickerTemplate
     
     [Parameter]
     public bool Disabled { get; set; }
-    
+
+    /// Dismiss the calendar when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the calendar open across scroll.
+    [Parameter]
+    public bool CloseOnScroll { get; set; }
+
     [Parameter]
     public string ClassName { get; set; } = """";
     
@@ -111,24 +119,71 @@ public class DatePickerTemplate
     
     private bool _isOpen;
     private DateTime _currentMonth = DateTime.Now;
-    
-    private void ToggleCalendar() => _isOpen = !_isOpen;
+    private DotNetObjectReference<DatePicker>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString(""N"");
+    private bool _dismissRegistered;
+
+    private async Task ToggleCalendar()
+    {
+        _isOpen = !_isOpen;
+        if (_isOpen) await RegisterDismissAsync();
+        else await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (_isOpen)
+        {
+            _isOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync(""ShellUI.onDismissEvents"", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync(""ShellUI.offDismissEvents"", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     private void PreviousMonth() => _currentMonth = _currentMonth.AddMonths(-1);
     private void NextMonth() => _currentMonth = _currentMonth.AddMonths(1);
-    
+
     private async Task SelectDate(DateTime date)
     {
         SelectedDate = date;
         _isOpen = false;
+        await UnregisterDismissAsync();
         await SelectedDateChanged.InvokeAsync(date);
     }
-    
+
     private async Task ClearDate()
     {
         SelectedDate = null;
         _isOpen = false;
+        await UnregisterDismissAsync();
         await SelectedDateChanged.InvokeAsync(null);
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
     
     private List<DateTime?> GetCalendarDays()
     {
diff --git a/src/ShellUI.Templates/Templates/DateRangePickerTemplate.cs b/src/ShellUI.Templates/Templates/DateRangePickerTemplate.cs
index c5e6bdc..d26df79 100644
--- a/src/ShellUI.Templates/Templates/DateRangePickerTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DateRangePickerTemplate.cs
@@ -16,20 +16,23 @@ public class DateRangePickerTemplate
     };
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class=""@(""relative "" + ClassName)"" @attributes=""AdditionalAttributes"">
     <button type=""button""
             @onclick=""ToggleCalendar""
             disabled=""@Disabled""
-            class=""@(""flex h-10 w-full items-center justify-between 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 cursor-not-allowed"" : """"))"">
-        <span class=""@(StartDate == null && EndDate == null ? ""text-muted-foreground"" : """")"">
+            class=""@(""flex h-10 w-full items-center gap-2 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 cursor-not-allowed"" : """"))"">
+        <span class=""@(""flex-1 text-left "" + (StartDate == null && EndDate == null ? ""text-muted-foreground"" : """"))"">
             @GetDisplayText()
         </span>
-        <div class=""flex items-center gap-1"">
+        <div class=""ml-auto flex items-center gap-1 shrink-0"">
             @if (AllowClear && (StartDate.HasValue || EndDate.HasValue))
             {
-                <button type=""button"" 
-                        @onclick=""ClearRange"" 
+                <button type=""button""
+                        @onclick=""ClearRange""
                         @onclick:stopPropagation=""true""
                         class=""p-0.5 hover:bg-accent rounded transition-colors"">
                     <svg class=""h-3.5 w-3.5 text-muted-foreground hover:text-foreground"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
@@ -37,7 +40,7 @@ public class DateRangePickerTemplate
                     </svg>
                 </button>
             }
-            <svg class=""h-4 w-4 text-muted-foreground"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
+            <svg class=""h-4 w-4 text-foreground/70"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
                 <path stroke-linecap=""round"" stroke-linejoin=""round"" stroke-width=""2"" d=""M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"" />
             </svg>
         </div>
@@ -108,7 +111,12 @@ public class DateRangePickerTemplate
     
     [Parameter]
     public bool Disabled { get; set; }
-    
+
+    /// Dismiss the calendar when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the calendar open across scroll.
+    [Parameter]
+    public bool CloseOnScroll { get; set; }
+
     [Parameter]
     public string ClassName { get; set; } = """";
     
@@ -118,6 +126,9 @@ public class DateRangePickerTemplate
     private bool _isOpen;
     private DateTime _currentMonth = DateTime.Now;
     private bool _selectingStart = true;
+    private DotNetObjectReference<DateRangePicker>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString(""N"");
+    private bool _dismissRegistered;
     
     private string GetDisplayText()
     {
@@ -155,7 +166,43 @@ private string GetDateButtonClass(DateTime date)
         return baseClass;
     }
     
-    private void ToggleCalendar() => _isOpen = !_isOpen;
+    private async Task ToggleCalendar()
+    {
+        _isOpen = !_isOpen;
+        if (_isOpen) await RegisterDismissAsync();
+        else await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (_isOpen)
+        {
+            _isOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync(""ShellUI.onDismissEvents"", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync(""ShellUI.offDismissEvents"", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
+
     private void PreviousMonth() => _currentMonth = _currentMonth.AddMonths(-1);
     private void NextMonth() => _currentMonth = _currentMonth.AddMonths(1);
     
@@ -206,9 +253,15 @@ private async Task ClearRange()
         
         for (int i = 0; i < startDayOfWeek; i++) days.Add(null);
         for (int day = 1; day <= lastDay.Day; day++) days.Add(new DateTime(_currentMonth.Year, _currentMonth.Month, day));
-        
+
         return days;
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
 ";
 }
diff --git a/src/ShellUI.Templates/Templates/DialogContentTemplate.cs b/src/ShellUI.Templates/Templates/DialogContentTemplate.cs
index 596a543..d09a7c5 100644
--- a/src/ShellUI.Templates/Templates/DialogContentTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DialogContentTemplate.cs
@@ -16,6 +16,9 @@ public static class DialogContentTemplate
     };
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Dialog?.Open == true)
 {
@@ -36,6 +39,8 @@ public static class DialogContentTemplate
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Dialog != null)
@@ -43,8 +48,27 @@ private async Task Close()
             await Dialog.SetOpen(false);
         }
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Dialog?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.lockBodyScroll""); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.unlockBodyScroll""); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.unlockBodyScroll""); } catch { }
+        }
+    }
 }
 ";
 }
-
-
diff --git a/src/ShellUI.Templates/Templates/DrawerContentTemplate.cs b/src/ShellUI.Templates/Templates/DrawerContentTemplate.cs
index d68f652..256b87d 100644
--- a/src/ShellUI.Templates/Templates/DrawerContentTemplate.cs
+++ b/src/ShellUI.Templates/Templates/DrawerContentTemplate.cs
@@ -18,6 +18,9 @@ public class DrawerContentTemplate
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
 @using YourProjectNamespace.Components.UI.Variants
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Parent?.Open == true)
 {
@@ -37,10 +40,33 @@ @using YourProjectNamespace.Components.UI.Variants
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Parent?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.lockBodyScroll""); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.unlockBodyScroll""); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.unlockBodyScroll""); } catch { }
+        }
+    }
 }
 ";
 }
diff --git a/src/ShellUI.Templates/Templates/MultiSelectTemplate.cs b/src/ShellUI.Templates/Templates/MultiSelectTemplate.cs
index 468ee8d..1221963 100644
--- a/src/ShellUI.Templates/Templates/MultiSelectTemplate.cs
+++ b/src/ShellUI.Templates/Templates/MultiSelectTemplate.cs
@@ -14,8 +14,11 @@ public static class MultiSelectTemplate
     };
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
+@using Microsoft.JSInterop
 @typeparam TItem
 @typeparam TKey where TKey : notnull
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 <div class=""@Shell.Cn(""relative"", Class)"" @attributes=""AdditionalAttributes"">
     <button type=""button""
@@ -63,7 +66,7 @@ @typeparam TItem
     {
         <div class=""absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md animate-in fade-in-0 zoom-in-95"">
             <div class=""flex items-center border-b border-border px-3"">
-                <svg class=""mr-2 h-4 w-4 shrink-0 text-muted-foreground"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
+                <svg class=""mr-2 h-4 w-4 shrink-0 text-foreground/70"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
                     <path stroke-linecap=""round"" stroke-linejoin=""round"" stroke-width=""2"" d=""M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"" />
                 </svg>
                 <input @ref=""_searchInput""
@@ -136,6 +139,9 @@ @typeparam TItem
     [Parameter] public string SearchPlaceholder { get; set; } = ""Search..."";
     [Parameter] public string EmptyText { get; set; } = ""No results found."";
     [Parameter] public bool Disabled { get; set; }
+    /// Dismiss the dropdown when the page scrolls. Matches shadcn/Radix behavior.
+    /// Set false to keep the dropdown open across scroll (useful for infinite-scroll pages).
+    [Parameter] public bool CloseOnScroll { get; set; }
     [Parameter] public string? Class { get; set; }
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
@@ -145,6 +151,9 @@ @typeparam TItem
     private int _highlightedIndex;
     private ElementReference _searchInput;
     private bool _shouldFocus;
+    private DotNetObjectReference<MultiSelect<TItem, TKey>>? _selfRef;
+    private readonly string _dismissHandle = Guid.NewGuid().ToString(""N"");
+    private bool _dismissRegistered;
 
     private string DisplayFor(TItem item) => DisplaySelector?.Invoke(item) ?? item?.ToString() ?? """";
     private TKey KeyFor(TItem item) => KeySelector(item);
@@ -157,7 +166,7 @@ private IEnumerable<TItem> Filter()
         return Items.Where(i => DisplayFor(i).Contains(q, StringComparison.OrdinalIgnoreCase));
     }
 
-    private void Toggle()
+    private async Task Toggle()
     {
         if (Disabled) return;
         IsOpen = !IsOpen;
@@ -166,10 +175,49 @@ private void Toggle()
             _searchQuery = """";
             _highlightedIndex = 0;
             _shouldFocus = true;
+            await RegisterDismissAsync();
+        }
+        else
+        {
+            await UnregisterDismissAsync();
         }
     }
 
-    private void Close() => IsOpen = false;
+    private async Task Close()
+    {
+        IsOpen = false;
+        await UnregisterDismissAsync();
+    }
+
+    [JSInvokable]
+    public async Task OnDismissEvent()
+    {
+        if (IsOpen)
+        {
+            IsOpen = false;
+            await UnregisterDismissAsync();
+            StateHasChanged();
+        }
+    }
+
+    private async Task RegisterDismissAsync()
+    {
+        if (!CloseOnScroll || _dismissRegistered) return;
+        _selfRef ??= DotNetObjectReference.Create(this);
+        try
+        {
+            await JS.InvokeVoidAsync(""ShellUI.onDismissEvents"", _dismissHandle, _selfRef);
+            _dismissRegistered = true;
+        }
+        catch { }
+    }
+
+    private async Task UnregisterDismissAsync()
+    {
+        if (!_dismissRegistered) return;
+        try { await JS.InvokeVoidAsync(""ShellUI.offDismissEvents"", _dismissHandle); } catch { }
+        _dismissRegistered = false;
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -201,7 +249,7 @@ private async Task RemoveItem(TItem item)
     private async Task OnKeyDown(KeyboardEventArgs e)
     {
         var filtered = Filter().ToList();
-        if (e.Key == ""Escape"") { Close(); return; }
+        if (e.Key == ""Escape"") { await Close(); return; }
         if (e.Key == ""ArrowDown"") { _highlightedIndex = Math.Min(_highlightedIndex + 1, filtered.Count - 1); return; }
         if (e.Key == ""ArrowUp"") { _highlightedIndex = Math.Max(_highlightedIndex - 1, 0); return; }
         if (e.Key == ""Enter"" && filtered.Count > 0)
@@ -210,6 +258,12 @@ private async Task OnKeyDown(KeyboardEventArgs e)
             await ToggleItem(filtered[idx]);
         }
     }
+
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterDismissAsync();
+        _selfRef?.Dispose();
+    }
 }
 ";
 }
diff --git a/src/ShellUI.Templates/Templates/SheetContentTemplate.cs b/src/ShellUI.Templates/Templates/SheetContentTemplate.cs
index 1ffb0b1..0c4c7f8 100644
--- a/src/ShellUI.Templates/Templates/SheetContentTemplate.cs
+++ b/src/ShellUI.Templates/Templates/SheetContentTemplate.cs
@@ -18,6 +18,9 @@ public class SheetContentTemplate
 
     public static string Content => @"@namespace YourProjectNamespace.Components.UI
 @using YourProjectNamespace.Components.UI.Variants
+@using Microsoft.JSInterop
+@implements IAsyncDisposable
+@inject IJSRuntime JS
 
 @if (Parent?.Open == true)
 {
@@ -36,10 +39,33 @@ @using YourProjectNamespace.Components.UI.Variants
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
+    private bool _isLocked;
+
     private async Task Close()
     {
         if (Parent != null) await Parent.SetOpen(false);
     }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        var shouldBeLocked = Parent?.Open == true;
+        if (shouldBeLocked && !_isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.lockBodyScroll""); _isLocked = true; } catch { }
+        }
+        else if (!shouldBeLocked && _isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.unlockBodyScroll""); _isLocked = false; } catch { }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_isLocked)
+        {
+            try { await JS.InvokeVoidAsync(""ShellUI.unlockBodyScroll""); } catch { }
+        }
+    }
 }
 ";
 }
diff --git a/src/ShellUI.Templates/Templates/ShellUIJsTemplate.cs b/src/ShellUI.Templates/Templates/ShellUIJsTemplate.cs
index c4185d2..91d37db 100644
--- a/src/ShellUI.Templates/Templates/ShellUIJsTemplate.cs
+++ b/src/ShellUI.Templates/Templates/ShellUIJsTemplate.cs
@@ -119,6 +119,39 @@ function handleDrop(e) {
             window.removeEventListener("keydown", listener);
             this._shortcutHandlers.delete(handle);
         }
+    },
+
+    _scrollLockCount: 0,
+    _originalOverflow: "",
+    lockBodyScroll: function () {
+        if (this._scrollLockCount === 0) {
+            this._originalOverflow = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+        }
+        this._scrollLockCount++;
+    },
+    unlockBodyScroll: function () {
+        if (this._scrollLockCount === 0) return;
+        this._scrollLockCount--;
+        if (this._scrollLockCount === 0) {
+            document.body.style.overflow = this._originalOverflow;
+        }
+    },
+
+    _dismissHandlers: new Map(),
+    onDismissEvents: function (handle, dotNetRef) {
+        const listener = () => dotNetRef.invokeMethodAsync("OnDismissEvent");
+        window.addEventListener("scroll", listener);
+        window.addEventListener("resize", listener);
+        this._dismissHandlers.set(handle, listener);
+    },
+    offDismissEvents: function (handle) {
+        const listener = this._dismissHandlers.get(handle);
+        if (listener) {
+            window.removeEventListener("scroll", listener);
+            window.removeEventListener("resize", listener);
+            this._dismissHandlers.delete(handle);
+        }
     }
 };
 """;
diff --git a/src/ShellUI.Templates/Templates/SonnerServiceTemplate.cs b/src/ShellUI.Templates/Templates/SonnerServiceTemplate.cs
index 07406fe..1df6ea9 100644
--- a/src/ShellUI.Templates/Templates/SonnerServiceTemplate.cs
+++ b/src/ShellUI.Templates/Templates/SonnerServiceTemplate.cs
@@ -23,13 +23,20 @@ public class SonnerToastItem
     public string Message { get; set; } = """";
     public string? Description { get; set; }
     public string Variant { get; set; } = ""default"";
+    // Zero or negative disables auto-dismiss (toast stays until manually closed).
+    public TimeSpan Duration { get; set; } = TimeSpan.FromSeconds(4);
     public DateTime CreatedAt { get; } = DateTime.UtcNow;
 }
 
 public interface ISonnerService
 {
     IReadOnlyList<SonnerToastItem> Toasts { get; }
-    void Show(string message, string? description = null, string variant = ""default"");
+    void Show(string message, string? description = null, string variant = ""default"", TimeSpan? duration = null);
+    void Success(string message, string? description = null, TimeSpan? duration = null);
+    void Error(string message, string? description = null, TimeSpan? duration = null);
+    void Info(string message, string? description = null, TimeSpan? duration = null);
+    void Warning(string message, string? description = null, TimeSpan? duration = null);
+    void Remove(string id);
 }
 
 public class SonnerService : ISonnerService
@@ -38,16 +45,50 @@ public class SonnerService : ISonnerService
     public IReadOnlyList<SonnerToastItem> Toasts => _toasts;
     public event Action? OnChange;
 
-    public void Show(string message, string? description = null, string variant = ""default"")
+    public void Show(string message, string? description = null, string variant = ""default"", TimeSpan? duration = null)
     {
-        _toasts.Add(new SonnerToastItem { Message = message, Description = description, Variant = variant });
+        var toast = new SonnerToastItem
+        {
+            Message = message,
+            Description = description,
+            Variant = variant,
+            Duration = duration ?? TimeSpan.FromSeconds(4)
+        };
+        _toasts.Add(toast);
         OnChange?.Invoke();
+
+        if (toast.Duration > TimeSpan.Zero)
+        {
+            _ = AutoDismissAsync(toast.Id, toast.Duration);
+        }
     }
 
+    public void Success(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, ""success"", duration);
+
+    public void Error(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, ""destructive"", duration);
+
+    public void Info(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, ""info"", duration);
+
+    public void Warning(string message, string? description = null, TimeSpan? duration = null)
+        => Show(message, description, ""warning"", duration);
+
     public void Remove(string id)
     {
-        _toasts.RemoveAll(t => t.Id == id);
-        OnChange?.Invoke();
+        var removed = _toasts.RemoveAll(t => t.Id == id);
+        if (removed > 0) OnChange?.Invoke();
+    }
+
+    private async Task AutoDismissAsync(string id, TimeSpan delay)
+    {
+        try
+        {
+            await Task.Delay(delay);
+            Remove(id);
+        }
+        catch { }
     }
 }
 ";
diff --git a/src/ShellUI.Templates/Templates/SonnerTemplate.cs b/src/ShellUI.Templates/Templates/SonnerTemplate.cs
index f9bdb71..556e71c 100644
--- a/src/ShellUI.Templates/Templates/SonnerTemplate.cs
+++ b/src/ShellUI.Templates/Templates/SonnerTemplate.cs
@@ -32,7 +32,7 @@ @inject SonnerService SonnerService
         var stackClass = i > 0 ? (IsTop ? ""-mt-20 group-hover:mt-0"" : ""-mb-20 group-hover:mb-0"") : """";
         <div @key=""toast.Id""
              style=""z-index: @(i + 1)""
-             class=""@stackClass @GetToastClasses(toast.Variant) pointer-events-auto relative flex min-w-0 w-full items-center gap-3 overflow-hidden rounded-lg p-4 shadow-lg transition-all duration-300 animate-in fade-in-0 @SonnerVariants.GetToastAnimation(Position) shrink-0"">
+             class=""@stackClass @GetToastClasses(toast.Variant) pointer-events-auto relative flex min-w-0 w-full items-center gap-3 overflow-hidden rounded-lg p-4 shadow-lg transition-all duration-300 motion-reduce:transition-none animate-in fade-in-0 motion-reduce:animate-none @SonnerVariants.GetToastAnimation(Position) shrink-0"">
             <div class=""grid flex-1 gap-1"">
                 @if (!string.IsNullOrEmpty(toast.Message))
                 {
@@ -69,6 +69,8 @@ @inject SonnerService SonnerService
     {
         ""destructive"" => ""bg-destructive text-destructive-foreground"",
         ""success"" => ""bg-green-500/20 text-green-700 dark:bg-green-900/30 dark:text-green-100"",
+        ""info"" => ""bg-blue-500/20 text-blue-700 dark:bg-blue-900/30 dark:text-blue-100"",
+        ""warning"" => ""bg-yellow-500/20 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-100"",
         _ => ""bg-background text-foreground""
     };
 }
diff --git a/src/ShellUI.Templates/Templates/StepperStepTemplate.cs b/src/ShellUI.Templates/Templates/StepperStepTemplate.cs
index 8360502..7d2ab02 100644
--- a/src/ShellUI.Templates/Templates/StepperStepTemplate.cs
+++ b/src/ShellUI.Templates/Templates/StepperStepTemplate.cs
@@ -21,13 +21,21 @@ public static class StepperStepTemplate
     var isActive = ParentStepper?.CurrentStep == index;
     var isCompleted = ParentStepper != null && index < ParentStepper.HighestStepReached;
     var isClickable = ParentStepper != null && index <= ParentStepper.HighestStepReached;
+
+    string stateClass;
+    if (isActive)
+        stateClass = ""border-primary bg-primary text-primary-foreground ring-2 ring-primary/20 ring-offset-2 ring-offset-background"";
+    else if (isCompleted)
+        stateClass = ""border-primary bg-primary/10 text-primary"";
+    else
+        stateClass = ""border-muted bg-background text-muted-foreground"";
 }
 <div class=""flex flex-col items-center relative"">
     <button type=""button""
-            class=""@Shell.Cn(""flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors"", isCompleted ? ""border-primary bg-primary text-primary-foreground"" : isActive ? ""border-primary bg-background text-primary"" : ""border-muted bg-background text-muted-foreground"", isClickable ? ""cursor-pointer hover:border-primary/50"" : ""cursor-not-allowed"")""
+            class=""@Shell.Cn(""flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors"", stateClass, isClickable ? ""cursor-pointer"" : ""cursor-not-allowed"", isClickable && !isActive ? ""hover:border-primary/50"" : """")""
             disabled=""@(!isClickable)""
             @onclick=""async () => { if (ParentStepper != null) await ParentStepper.GoToStepAsync(index); }"">
-        @if (isCompleted)
+        @if (isCompleted && !isActive)
         {
             <svg class=""h-4 w-4"" xmlns=""http://www.w3.org/2000/svg"" fill=""none"" viewBox=""0 0 24 24"" stroke=""currentColor"">
                 <path stroke-linecap=""round"" stroke-linejoin=""round"" stroke-width=""2"" d=""M5 13l4 4L19 7"" />
diff --git a/src/ShellUI.Templates/Templates/StepperTemplate.cs b/src/ShellUI.Templates/Templates/StepperTemplate.cs
index c5141ce..1bbe0ae 100644
--- a/src/ShellUI.Templates/Templates/StepperTemplate.cs
+++ b/src/ShellUI.Templates/Templates/StepperTemplate.cs
@@ -18,7 +18,7 @@ public static class StepperTemplate
     public const string Content = """
 @namespace YourProjectNamespace.Components.UI
 
-<CascadingValue Value="this" IsFixed="true">
+<CascadingValue Value="this">
     <div class="@Shell.Cn("w-full", Class)">
         @ChildContent
         @if (ShowNavigation)
diff --git a/src/ShellUI.Templates/Templates/ToastTemplate.cs b/src/ShellUI.Templates/Templates/ToastTemplate.cs
index 9a76fe4..506d5e6 100644
--- a/src/ShellUI.Templates/Templates/ToastTemplate.cs
+++ b/src/ShellUI.Templates/Templates/ToastTemplate.cs
@@ -22,7 +22,7 @@ @implements IAsyncDisposable
 @if (IsVisible)
 {
     <div class=""@(""fixed z-50 flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:flex-col md:max-w-[420px] "" + (Position == ""top-left"" ? ""top-0 left-0"" : Position == ""top-right"" ? ""top-0 right-0"" : Position == ""bottom-left"" ? ""bottom-0 left-0"" : ""bottom-0 right-0""))"">
-        <div class=""@(""pointer-events-auto group relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all text-foreground "" + (Variant == ""destructive"" ? ""border-red-500 bg-red-50 dark:bg-red-900/20 dark:border-red-500/50"" : Variant == ""success"" ? ""border-green-500 bg-green-50 dark:bg-green-900/20 dark:border-green-500/50"" : Variant == ""warning"" ? ""border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 dark:border-yellow-500/50"" : ""border-border bg-background"") + "" "" + ClassName)""
+        <div class=""@(""pointer-events-auto group relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all motion-reduce:transition-none text-foreground "" + (Variant == ""destructive"" ? ""border-red-500 bg-red-50 dark:bg-red-900/20 dark:border-red-500/50"" : Variant == ""success"" ? ""border-green-500 bg-green-50 dark:bg-green-900/20 dark:border-green-500/50"" : Variant == ""warning"" ? ""border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20 dark:border-yellow-500/50"" : ""border-border bg-background"") + "" "" + ClassName)""
              @attributes=""AdditionalAttributes"">
             <div class=""grid gap-1"">
                 @if (!string.IsNullOrEmpty(Title))
diff --git a/src/ShellUI.Templates/Templates/TypedSelectTemplate.cs b/src/ShellUI.Templates/Templates/TypedSelectTemplate.cs
new file mode 100644
index 0000000..b1fae4c
--- /dev/null
+++ b/src/ShellUI.Templates/Templates/TypedSelectTemplate.cs
@@ -0,0 +1,88 @@
+using ShellUI.Core.Models;
+
+namespace ShellUI.Templates.Templates;
+
+public static class TypedSelectTemplate
+{
+    public static ComponentMetadata Metadata => new()
+    {
+        Name = "typed-select",
+        DisplayName = "TypedSelect",
+        Description = "Generic <select> that binds to any type — string, enum (nullable), Guid, bool, int, decimal — via InvariantCulture round-tripping. No external font dependency.",
+        Category = ComponentCategory.Form,
+        FilePath = "TypedSelect.razor"
+    };
+
+    public static string Content => """"
+@namespace YourProjectNamespace.Components.UI
+@typeparam TValue
+@using System.Globalization
+
+<div class="relative w-full">
+    <select value="@FormatValue()"
+            @onchange="OnChange"
+            disabled="@Disabled"
+            class="@ComputedClass"
+            @attributes="AdditionalAttributes">
+        @ChildContent
+    </select>
+    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+        <svg class="h-4 w-4 text-foreground/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+    </div>
+</div>
+
+@code {
+    [Parameter] public TValue? Value { get; set; }
+    [Parameter] public EventCallback<TValue?> ValueChanged { get; set; }
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public bool Disabled { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string ComputedClass => Shell.Cn(
+        "flex h-10 w-full appearance-none rounded-md border border-input bg-background pl-3 pr-9 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        Class
+    );
+
+    private string? FormatValue() => Value switch
+    {
+        null => null,
+        IFormattable f => f.ToString(null, CultureInfo.InvariantCulture),
+        _ => Value.ToString()
+    };
+
+    private async Task OnChange(ChangeEventArgs e)
+    {
+        var raw = e.Value?.ToString();
+        if (raw is null)
+        {
+            await ValueChanged.InvokeAsync(default);
+            return;
+        }
+
+        var targetType = Nullable.GetUnderlyingType(typeof(TValue)) ?? typeof(TValue);
+
+        try
+        {
+            object? parsed = targetType switch
+            {
+                _ when targetType == typeof(string) => raw,
+                _ when targetType.IsEnum => string.IsNullOrEmpty(raw) ? null : Enum.Parse(targetType, raw),
+                _ when targetType == typeof(Guid) => string.IsNullOrEmpty(raw) ? Guid.Empty : Guid.Parse(raw),
+                _ when targetType == typeof(bool) => bool.Parse(raw),
+                _ when string.IsNullOrEmpty(raw) => null,
+                _ => Convert.ChangeType(raw, targetType, CultureInfo.InvariantCulture)
+            };
+            await ValueChanged.InvokeAsync(parsed is null ? default : (TValue?)parsed);
+        }
+        catch
+        {
+            await ValueChanged.InvokeAsync(default);
+        }
+    }
+}
+"""";
+}