diff --git a/docs/LumexUI.Docs.Client/Components/Callout.razor b/docs/LumexUI.Docs.Client/Components/Callout.razor
index cfaf28d9..a5955350 100644
--- a/docs/LumexUI.Docs.Client/Components/Callout.razor
+++ b/docs/LumexUI.Docs.Client/Components/Callout.razor
@@ -42,7 +42,7 @@
         {
             CalloutVariant.Info => typeof( InfoIcon ),
             CalloutVariant.Warning => typeof( ShieldAlertIcon ),
-            CalloutVariant.Danger => typeof( OctagonAlertIcon ),
+            CalloutVariant.Danger => typeof( OctagonAlertFilledIcon ),
             CalloutVariant.Success => typeof( CircleCheckIcon ),
             CalloutVariant.Tip => typeof( InfoIcon ),
             _ => throw new NotImplementedException()
diff --git a/docs/LumexUI.Docs.Client/Components/CodeSnippet.razor b/docs/LumexUI.Docs.Client/Components/CodeSnippet.razor
index a69a8efc..9c065b18 100644
--- a/docs/LumexUI.Docs.Client/Components/CodeSnippet.razor
+++ b/docs/LumexUI.Docs.Client/Components/CodeSnippet.razor
@@ -1,18 +1,30 @@
 @namespace LumexUI.Docs.Client.Components
 @rendermode InteractiveWebAssembly
 
-<div class="relative my-6 first:mt-0 last:mb-0 rounded-large overflow-hidden" @ref="@_ref">
-    <div class="prose prose-zinc bg-zinc-800">
-        @if( !string.IsNullOrEmpty( Code.Name ) )
-        {
-            <div class="flex items-center px-3 py-2 text-xs leading-6 border-b border-zinc-600/50">
-                <div class="flex items-center px-2 py-0.5 text-orange-400 bg-zinc-700/40 rounded-lg">
+<div class="group relative my-6 first:mt-0 last:mb-0"
+     data-expanded="@(Expandable ? _isExpanded.ToAttributeValue() : null)">
+    <div class="rounded-large overflow-hidden group-data-[expanded=false]:max-h-72">
+        <div class="prose prose-zinc dark:prose-invert">
+            @if( !string.IsNullOrEmpty( Code.Name ) )
+            {
+                <div class="flex items-center px-4 py-2.5 gap-2 border-b border-zinc-700 text-small text-foreground-400 bg-zinc-800 dark:text-foreground-500 dark:bg-zinc-900">
+                    <CodeXmlIcon Size="16" />
                     @Code.Name
                 </div>
+            }
+
+            <div id="@Id" class="*:my-0" @ref="@_ref">
+                @_renderCodeSnippet
             </div>
-        }
-        <div id="@Id" class="*:my-0">
-            @_renderCodeSnippet
         </div>
     </div>
+
+    @if( Expandable )
+    {
+        <button type="button"
+                class="absolute inset-x-0 bottom-0 flex h-20 items-center justify-center rounded-b-large bg-linear-to-b from-default-800/70 to-default-800 text-foreground-200 text-small group-data-[expanded=true]:hidden dark:from-default-50/70 dark:to-default-50 dark:text-foreground-700"
+                @onclick="@(() => _isExpanded = true)">
+            Expand
+        </button>
+    }
 </div>
diff --git a/docs/LumexUI.Docs.Client/Components/CodeSnippet.razor.cs b/docs/LumexUI.Docs.Client/Components/CodeSnippet.razor.cs
index 2d6b1265..551f4ad8 100644
--- a/docs/LumexUI.Docs.Client/Components/CodeSnippet.razor.cs
+++ b/docs/LumexUI.Docs.Client/Components/CodeSnippet.razor.cs
@@ -9,14 +9,16 @@ namespace LumexUI.Docs.Client.Components;
 public partial class CodeSnippet
 {
     [Parameter] public string? Id { get; set; }
+	[Parameter] public bool Expandable { get; set; }
     [Parameter, EditorRequired] public CodeBlock Code { get; set; } = default!;
 
     [Inject] private IJSRuntime JSRuntime { get; set; } = default!;
 
     private readonly RenderFragment _renderCodeSnippet;
     private ElementReference _ref;
+	private bool _isExpanded;
 
-    public CodeSnippet()
+	public CodeSnippet()
     {
         _renderCodeSnippet = RenderCodeSnippet;
     }
diff --git a/docs/LumexUI.Docs.Client/Components/CodeSnippetCollapsible.razor b/docs/LumexUI.Docs.Client/Components/CodeSnippetCollapsible.razor
deleted file mode 100644
index 913e3c11..00000000
--- a/docs/LumexUI.Docs.Client/Components/CodeSnippetCollapsible.razor
+++ /dev/null
@@ -1,17 +0,0 @@
-@namespace LumexUI.Docs.Client.Components
-@inherits CodeSnippet
-
-<div class="group relative"
-     data-expanded="@_isExpanded.ToAttributeValue()">
-    <div class="rounded-b-large overflow-hidden group-data-[expanded=false]:max-h-72">
-        @{
-            base.BuildRenderTree( __builder );
-        }
-    </div>
-
-    <button type="button"
-            class="absolute inset-x-0 bottom-0 flex h-20 items-center justify-center rounded-b-large bg-linear-to-b from-default-800/70 to-default-800 text-default text-small group-data-[expanded=true]:hidden"
-            @onclick="@Expand">
-        Expand
-    </button>
-</div>
diff --git a/docs/LumexUI.Docs.Client/Components/CodeSnippetCollapsible.razor.cs b/docs/LumexUI.Docs.Client/Components/CodeSnippetCollapsible.razor.cs
deleted file mode 100644
index 025ca26c..00000000
--- a/docs/LumexUI.Docs.Client/Components/CodeSnippetCollapsible.razor.cs
+++ /dev/null
@@ -1,15 +0,0 @@
-// Copyright (c) LumexUI 2024
-// LumexUI licenses this file to you under the MIT license
-// See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
-
-namespace LumexUI.Docs.Client.Components;
-
-public partial class CodeSnippetCollapsible : CodeSnippet
-{
-	private bool _isExpanded;
-
-	private void Expand()
-	{
-		_isExpanded = true;
-	}
-}
diff --git a/docs/LumexUI.Docs.Client/Components/DocsApiSection.razor b/docs/LumexUI.Docs.Client/Components/DocsApiSection.razor
index b702b7e5..6ccc1d57 100644
--- a/docs/LumexUI.Docs.Client/Components/DocsApiSection.razor
+++ b/docs/LumexUI.Docs.Client/Components/DocsApiSection.razor
@@ -12,14 +12,21 @@
             var componentPathSegment = component.Replace( "Lumex", "" ).SplitPascalCase().ToKebabCase();
 
             <li>
-                <LumexLink Href="@($"{NavigationManager.BaseUri}docs/api/{componentPathSegment}")"
-                           Class="border-none text-orange-500 text-xs font-normal not-prose">
-                    <span class="px-1 py-0.5 rounded-md ring ring-orange-200 bg-orange-50">
+                <LumexChip Size="@Size.Small"
+                           Radius="@Radius.Small"
+                           Variant="@ChipVariant.Flat"
+                           Class="not-prose bg-default-50 ring ring-default-900/10">
+                    <LumexLink Href="@($"{NavigationManager.BaseUri}docs/api/{componentPathSegment}")"
+                               Class="font-mono text-orange-600 dark:text-orange-400">
                         @($"<{component} />")
-                    </span>
-                </LumexLink>
+                    </LumexLink>
+                </LumexChip>
             </li>
         }
+
+        @* <span class="px-1 py-0.5 rounded-md ring ring-orange-200 bg-default-50">
+            @($"<{component} />")
+        </span> *@
     </ul>
 </DocsSection>
 
diff --git a/docs/LumexUI.Docs.Client/Components/DocsCompositionSection.razor b/docs/LumexUI.Docs.Client/Components/DocsCompositionSection.razor
index f2b2cc3f..738c9314 100644
--- a/docs/LumexUI.Docs.Client/Components/DocsCompositionSection.razor
+++ b/docs/LumexUI.Docs.Client/Components/DocsCompositionSection.razor
@@ -8,7 +8,7 @@
         @foreach( var component in Components )
         {
             <li>
-                <strong class="text-orange-500">@component.Name</strong>: @component.Description
+                <strong class="text-orange-500 dark:text-orange-400">@component.Name</strong>: @component.Description
             </li>
         }
     </ul>
diff --git a/docs/LumexUI.Docs.Client/Components/DocsSection.razor b/docs/LumexUI.Docs.Client/Components/DocsSection.razor
index 43f49bba..d14e5da7 100644
--- a/docs/LumexUI.Docs.Client/Components/DocsSection.razor
+++ b/docs/LumexUI.Docs.Client/Components/DocsSection.razor
@@ -7,10 +7,9 @@
     <LumexComponent As="@(IsSubsection ? "h3" : "h2")"
                     id="@_id">
         <LumexLink Href="@($"{RelativePath}#{_id}")"
-                   Color="@ThemeColor.None"
-                   Class="border-none">
+                   Color="@ThemeColor.None">
             @Title
-            <span class="flex items-center justify-center size-6 ml-2 rounded-md text-foreground-400 shadow-xs ring ring-foreground-900/10 hover:ring-orange-200 hover:bg-orange-50 hover:text-orange-500">
+            <span class="flex items-center justify-center size-6 ml-2 rounded-md text-foreground-400 shadow-xs ring ring-default-900/10 hover:ring-orange-300 hover:bg-orange-400/10 hover:text-orange-500 dark:text-foreground-500 dark:hover:ring-orange-300/60 dark:hover:text-orange-200">
                 <Link2Icon Size="16" />
             </span>
         </LumexLink>
diff --git a/docs/LumexUI.Docs.Client/Components/DocsSlotsSection.razor b/docs/LumexUI.Docs.Client/Components/DocsSlotsSection.razor
index 2a66a03e..65fb5e5e 100644
--- a/docs/LumexUI.Docs.Client/Components/DocsSlotsSection.razor
+++ b/docs/LumexUI.Docs.Client/Components/DocsSlotsSection.razor
@@ -9,7 +9,7 @@
         @foreach( var slot in Slots )
         {
             <li>
-                <strong class="text-orange-500">@slot.Name:</strong> @slot.Description
+                <strong class="text-orange-500 dark:text-orange-400">@slot.Name:</strong> @slot.Description
             </li>
         }
     </ul>
diff --git a/docs/LumexUI.Docs.Client/Components/Header.razor b/docs/LumexUI.Docs.Client/Components/Header.razor
index 4d94370f..c525336e 100644
--- a/docs/LumexUI.Docs.Client/Components/Header.razor
+++ b/docs/LumexUI.Docs.Client/Components/Header.razor
@@ -4,7 +4,7 @@
 <LumexNavbar Sticky="@true"
              Bordered="@true"
              MaxWidth="@MaxWidth.XLarge"
-             Classes="@_navbarClasses">
+             Classes="@(new() { Wrapper = "gap-6" })">
     <LumexNavbarBrand>
         <LumexLink Href="/"
                    Class="font-bold text-xl text-foreground-900">
@@ -18,13 +18,13 @@
             <LumexNavbarItem>
                 <LumexLink Href="@item.Link"
                            Color="@ThemeColor.None"
-                           Class="hover:text-orange-500 data-[active=true]:text-orange-500">
+                           Class="data-[active=true]:text-orange-500 dark:text-foreground-700 dark:data-[active=true]:text-orange-400">
                     @item.Name
                 </LumexLink>
             </LumexNavbarItem>
         }
 
-        <LumexNavbarItem Class="h-full">
+        <LumexNavbarItem Class="h-6">
             <LumexDivider Orientation="@Orientation.Vertical" />
         </LumexNavbarItem>
         @_headerActions
@@ -41,22 +41,20 @@
 </LumexNavbar>
 
 @code {
-    private static RenderFragment _headerActions =
+    private readonly RenderFragment _headerActions =
     @<text>
         <LumexNavbarItem Class="flex">
             <LumexLink Href="https://github.com/LumexUI/lumexui"
                        External="@true"
-                       Class="text-foreground-400 hover:text-foreground-600">
+                       Class="text-foreground-500 hover:text-foreground-600 hover:opacity-100">
                 <GithubIcon Size="20" />
             </LumexLink>
         </LumexNavbarItem>
+        <LumexNavbarItem Class="flex">
+            <ThemeToggle />
+        </LumexNavbarItem>
     </text>;
 
-    private readonly NavbarSlots _navbarClasses = new()
-        {
-            Wrapper = "py-5 gap-6"
-        };
-
     private readonly NavItem[] _navItems = new NavItem[]
     {
         new("/", "Docs"),
diff --git a/docs/LumexUI.Docs.Client/Components/InstallationSteps.razor b/docs/LumexUI.Docs.Client/Components/InstallationSteps.razor
index 7e8e08f0..3205042c 100644
--- a/docs/LumexUI.Docs.Client/Components/InstallationSteps.razor
+++ b/docs/LumexUI.Docs.Client/Components/InstallationSteps.razor
@@ -5,12 +5,12 @@
     {
         foreach( var step in Steps )
         {
-            <li class="relative pl-10 pb-8 xl:grid xl:grid-cols-5 xl:gap-10 before:absolute before:content-[counter(step)] before:left-0 before:flex before:items-center before:justify-center before:size-6 before:text-[0.625rem] before:font-bold before:text-zinc-700 before:rounded-md before:shadow-xs before:ring before:ring-foreground-900/10 after:absolute after:top-8 after:bottom-0 after:left-3 after:w-px after:bg-divider" style="counter-increment: step;">
+            <li class="relative pl-10 pb-8 xl:grid xl:grid-cols-5 xl:gap-10 before:absolute before:content-[counter(step)] before:left-0 before:flex before:items-center before:justify-center before:size-6 before:text-[0.625rem] before:font-bold before:text-foreground before:rounded-md before:shadow-xs before:ring before:ring-default-900/5 after:absolute after:top-8 after:bottom-0 after:left-3 after:w-px after:bg-divider last:after:w-0 dark:before:bg-default-200 dark:before:highlight-white/15" style="counter-increment: step;">
                 <div class="mb-6 xl:mb-0 xl:col-span-2">
-                    <h4 class="text-sm leading-6 font-semibold mb-2">
+                    <h4 class="mb-2 text-foreground-900 text-sm font-semibold leading-6">
                         @step.Title
                     </h4>
-                    <div class="prose prose-zinc prose-sm">
+                    <div class="prose prose-zinc prose-sm dark:prose-invert">
                         @step.Body
                     </div>
                 </div>
diff --git a/docs/LumexUI.Docs.Client/Components/Layouts/DocsContentLayout.razor b/docs/LumexUI.Docs.Client/Components/Layouts/DocsContentLayout.razor
index eac48971..09e9b9d7 100644
--- a/docs/LumexUI.Docs.Client/Components/Layouts/DocsContentLayout.razor
+++ b/docs/LumexUI.Docs.Client/Components/Layouts/DocsContentLayout.razor
@@ -11,14 +11,14 @@
                     Description="@_description"
                     LinksProps="@_linksProps" />
 
-        <main class="mt-8 prose prose-zinc">
+        <main class="mt-8 prose prose-zinc dark:prose-invert">
             <LumexDivider />
 
             @Body
         </main>
 
         <DocsFooter />
-        <div class="scrollbar hidden fixed z-20 overflow-y-auto top-[4.0625rem] right-[max(0px,calc(50%-40rem))] bottom-0 w-[13rem] pb-10 xl:block">
+        <div class="hidden fixed z-20 overflow-y-auto top-[4.0625rem] right-[max(0px,calc(50%-40rem))] bottom-0 w-[13rem] pb-10 xl:block">
             @TableOfContents
         </div>
     </div>
diff --git a/docs/LumexUI.Docs.Client/Components/Layouts/DocsLayout.razor b/docs/LumexUI.Docs.Client/Components/Layouts/DocsLayout.razor
index 1a7a3ab1..cb7a6572 100644
--- a/docs/LumexUI.Docs.Client/Components/Layouts/DocsLayout.razor
+++ b/docs/LumexUI.Docs.Client/Components/Layouts/DocsLayout.razor
@@ -5,7 +5,7 @@
 <Header />
 
 <div class="container max-w-7xl mx-auto px-6">
-    <aside class="scrollbar hidden fixed z-20 overflow-y-auto inset-0 top-[4.0625rem] left-[max(0px,calc(50%-40rem))] right-auto w-[16rem] pl-6 pb-10 lg:block">
+    <aside class="hidden fixed z-20 overflow-y-auto inset-0 top-[4.0625rem] left-[max(0px,calc(50%-40rem))] right-auto w-[16rem] pl-6 pb-10 lg:block">
         <NavMenu />
     </aside>
     <div class="lg:pl-[14.5rem]">
diff --git a/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor b/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor
index da808021..c1783696 100644
--- a/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor
+++ b/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor
@@ -10,7 +10,7 @@
                 Description="Follow the steps below to get started with LumexUI quickly!" />
 
     <main class="mt-8">
-        <div class="mb-8 prose prose-zinc">
+        <div class="mb-8 prose prose-zinc dark:prose-invert">
             <DocsSection Title="Prerequisites">
                 <p>Before you begin, ensure that you have the following:</p>
                 <ul>
diff --git a/docs/LumexUI.Docs.Client/Components/NavItemBadge.razor b/docs/LumexUI.Docs.Client/Components/NavItemBadge.razor
index 5a853a4a..68084015 100644
--- a/docs/LumexUI.Docs.Client/Components/NavItemBadge.razor
+++ b/docs/LumexUI.Docs.Client/Components/NavItemBadge.razor
@@ -2,31 +2,35 @@
 
 @if( Status.HasValue )
 {
-    <span class="@RootClasses">
+    <LumexChip Size="@Size.Small"
+               Radius="@Radius.Full"
+               Variant="@ChipVariant.Flat"
+               Classes="@Classes">
         @Status.ToString()
-    </span>
+    </LumexChip>
 }
 
 @code {
     [Parameter] public PageStatus? Status { get; set; }
 
-    private string? RootClasses => ElementClass.Empty()
-        .Add( "px-1.5" )
-        .Add( "py-[3px]" )
-        .Add( "rounded-full" )
-        .Add( "ring" )
-        .Add( "font-semibold" )
-        .Add( "text-[9px]" )
-        .Add( "uppercase" )
-        .Add( "leading-none" )
-        .Add( _variants[Status!.Value], when: Status.HasValue )
-        .ToString();
+    private ChipSlots Classes => new()
+    {
+        Base = new ElementClass()
+            .Add( "h-4" )
+            .Add( "ring" )
+            .Add( _variants[Status!.Value] ),
+        Content = new ElementClass()
+            .Add( "uppercase" )
+            .Add( "text-[10px]" )
+            .Add( "font-medium" )
+            .Add( "leading-none" )
+    };
 
     private static readonly Dictionary<PageStatus, string> _variants = new()
     {
-        [PageStatus.New] = "bg-orange-100 ring-orange-300 text-orange-600",
-        [PageStatus.Soon] = "bg-foreground-100 ring-foreground-300 text-foreground-600",
-        [PageStatus.Preview] = "bg-indigo-50 ring-indigo-200 text-indigo-600",
-        [PageStatus.Updated] = "bg-teal-50 ring-teal-200 text-teal-600",
+        [PageStatus.New] = "bg-orange-400/15 ring-orange-300 text-orange-600 dark:ring-orange-300/60 dark:text-orange-200",
+        [PageStatus.Soon] = "bg-teal-400/15 ring-teal-300 text-teal-600 dark:ring-teal-300/60 dark:text-teal-200",
+        [PageStatus.Preview] = "bg-indigo-400/15 ring-indigo-200 text-indigo-600 dark:ring-indigo-300/60 dark:text-indigo-200",
+        [PageStatus.Updated] = "bg-zinc-400/15 ring-zinc-300 text-zinc-500 dark:ring-zinc-300/60 dark:text-zinc-300",
     };
 }
diff --git a/docs/LumexUI.Docs.Client/Components/NavMenu.razor b/docs/LumexUI.Docs.Client/Components/NavMenu.razor
index fb86b72b..345c4ccf 100644
--- a/docs/LumexUI.Docs.Client/Components/NavMenu.razor
+++ b/docs/LumexUI.Docs.Client/Components/NavMenu.razor
@@ -39,7 +39,7 @@
             <li>
                 <LumexLink Href="@($"docs/api/{formattedName.ToKebabCase()}")"
                            Match="@NavLinkMatch.Prefix"
-                           Class="block border-l pl-4 -ml-px border-transparent text-foreground hover:border-foreground-400 data-[active=true]:text-orange-500 data-[active=true]:border-current">
+                           Class="block border-l pl-4 -ml-px border-transparent text-foreground hover:border-foreground-400 data-[active=true]:text-orange-500 data-[active=true]:border-current/80 dark:data-[active=true]:text-orange-400">
                     @item.Name.Replace( "Lumex", "" )
                 </LumexLink>
             </li>
@@ -55,7 +55,7 @@
             <li class="@styles">
                 <LumexLink Href="@($"docs/{categoryName.ToKebabCase()}/{formattedName.ToKebabCase()}")"
                            Match="@NavLinkMatch.Prefix"
-                           Class="block border-l pl-4 -ml-px border-transparent text-foreground hover:border-foreground-400 data-[active=true]:text-orange-500 data-[active=true]:border-current">
+                           Class="block border-l pl-4 -ml-px border-transparent text-foreground hover:border-foreground-400 data-[active=true]:text-orange-500 data-[active=true]:border-current/80 dark:data-[active=true]:text-orange-400">
                     @formattedName
                 </LumexLink>
                 <NavItemBadge Status="@item.Status" />
diff --git a/docs/LumexUI.Docs.Client/Components/Preview.razor b/docs/LumexUI.Docs.Client/Components/Preview.razor
index eaab2758..a0a5f1c0 100644
--- a/docs/LumexUI.Docs.Client/Components/Preview.razor
+++ b/docs/LumexUI.Docs.Client/Components/Preview.razor
@@ -23,11 +23,11 @@
         TwMerge.Merge( _slots.Preview, Classes?.Preview );
 
     private readonly Slots _slots = new()
-        {
-            Preview = "relative p-4 flex flex-wrap items-center gap-4 overflow-visible scrollbar-hide",
-            PreviewWrapper = "relative p-4 rounded-large ring ring-foreground-900/10 not-prose",
-            Background = "absolute inset-0 [mask-image:radial-gradient(#fff_0%,transparent_100%)]",
-        };
+    {
+        Preview = "relative p-4 flex flex-wrap items-center gap-4 overflow-visible scrollbar-hide",
+        PreviewWrapper = "relative p-4 rounded-large ring ring-default-900/10 not-prose",
+        Background = "absolute inset-0 [mask-image:radial-gradient(#fff_0%,transparent_100%)]",
+    };
 
     public class Slots
     {
diff --git a/docs/LumexUI.Docs.Client/Components/PreviewCode.razor b/docs/LumexUI.Docs.Client/Components/PreviewCode.razor
index 51e271be..2b465e14 100644
--- a/docs/LumexUI.Docs.Client/Components/PreviewCode.razor
+++ b/docs/LumexUI.Docs.Client/Components/PreviewCode.razor
@@ -8,25 +8,25 @@
     </Preview>
 
     <div class="@ToolbarClass">
-        <div class="flex items-center justify-end">
+        <div class="flex items-center justify-end gap-2">
             <LumexButton Size="@Size.Small"
+                         Radius="@Radius.Full"
                          OnClick="@Expand"
-                         Class="h-6 px-2 me-1 rounded-full bg-orange-50 border border-orange-300 text-orange-500 text-[11px]">
+                         Class="h-6 px-2 bg-orange-400/10 border border-orange-300 text-orange-500 text-[11px] dark:text-orange-200 dark:border-orange-300/60">
                 @(_expanded ? "Collapse code" : "Expand code")
             </LumexButton>
             <LumexButton IconOnly="@true"
                          Size="@Size.Small"
                          Variant="@Variant.Light"
                          OnClick="@CopyToClipboard">
-                @(_copied
-                    ? @<CheckIcon Size="16" class="text-foreground-500" />
-                    : @<CopyIcon Size="16" class="text-foreground-500" />
-                )
+                <DynamicIcon Type="@(_copied ? typeof( CheckIcon ) : typeof( CopyIcon ))"
+                             Size="16"
+                             class="text-foreground-500" />
             </LumexButton>
         </div>
     </div>
 
-    <LumexCollapse Expanded="@_expanded" Class="*:rounded-t-none">
+    <LumexCollapse Expanded="@_expanded" Class="**:rounded-t-none">
         <CodeSnippet Id="@_id" Code="@Code" />
     </LumexCollapse>
 </div>
diff --git a/docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs b/docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs
index 1da3c1a3..b7282208 100644
--- a/docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs
+++ b/docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs
@@ -16,7 +16,7 @@ public partial class PreviewCode
     private string? BaseClass => ElementClass.Empty()
         .Add( "rounded-2xl" )
         .Add( "ring" )
-        .Add( "ring-foreground-900/10" )
+        .Add( "ring-default-900/10" )
         .Add( "shadow-xs" )
         .Add( "overflow-hidden" )
         .Add( Class )
@@ -25,8 +25,7 @@ public partial class PreviewCode
     private string ToolbarClass => ElementClass.Empty()
         .Add( "p-2" )
         .Add( "bg-default-50/50" )
-        .Add( "border-t" )
-        .Add( "border-foreground-900/10" )
+        .Add( "border-default-900/10" )
         .Add( "border-b", when: _expanded )
         .Add( "rounded-b-xl", when: !_expanded )
         .ToString();
diff --git a/docs/LumexUI.Docs.Client/Components/QuickLink.razor b/docs/LumexUI.Docs.Client/Components/QuickLink.razor
index fb4298dc..9e285877 100644
--- a/docs/LumexUI.Docs.Client/Components/QuickLink.razor
+++ b/docs/LumexUI.Docs.Client/Components/QuickLink.razor
@@ -2,26 +2,24 @@
 
 @using LumexUI.Shared.Icons
 
-<li class="relative flex flex-col items-start p-1">
-    <div class="peer flex items-end gap-3 mb-3">
-        <div class="flex items-center justify-center size-8 rounded-xl bg-indigo-50/75 text-indigo-500 border border-indigo-300 ring-2 ring-indigo-100">
+<LumexCard As="li" Shadow="@Shadow.None" Class="bg-slate-50 border border-default-900/5 transition-colors hover:border-default-900/15 dark:bg-default-50">
+    <LumexCardHeader Class="gap-3 p-5 pb-0 overflow-visible">
+        <span class="flex items-center justify-center size-9 rounded-xl bg-indigo-50 text-indigo-500 border border-indigo-300 ring-2 ring-indigo-100 dark:bg-indigo-900/15 dark:text-indigo-400 dark:border-indigo-300/25 dark:ring-indigo-400/10">
             <DynamicIcon Type="@Icon" Size="20" />
-        </div>
+        </span>
         <h3 class="font-semibold text-foreground-900">
             <LumexLink Href="@Link"
                        Color="@ThemeColor.None"
-                       Class="before:absolute before:-inset-3 before:rounded-2xl">
+                       Class="before:absolute before:inset-0">
                 @Title
             </LumexLink>
         </h3>
-    </div>
-    <div>
-        <p class="text-sm text-foreground-500 leading-6">
-            @Description
-        </p>
-    </div>
-    <div class="absolute -z-10 -inset-3 rounded-2xl bg-gray-50 peer-hover:ring peer-hover:ring-foreground-900/10"></div>
-</li>
+    </LumexCardHeader>
+
+    <LumexCardBody Class="p-5 pt-4">
+        <p class="text-small/6 text-foreground">@Description</p>
+    </LumexCardBody>
+</LumexCard>
 
 @code {
     [Parameter] public Type? Icon { get; set; }
diff --git a/docs/LumexUI.Docs.Client/Components/ThemeToggle.razor b/docs/LumexUI.Docs.Client/Components/ThemeToggle.razor
new file mode 100644
index 00000000..f64f1978
--- /dev/null
+++ b/docs/LumexUI.Docs.Client/Components/ThemeToggle.razor
@@ -0,0 +1,12 @@
+@namespace LumexUI.Docs.Client.Components
+@inject ThemeService ThemeService
+
+@using LumexUI.Shared.Icons
+
+<LumexButton IconOnly="@true"
+             Variant="@Variant.Light"
+             Class="min-w-6 w-6 h-6 text-foreground-500 hover:text-foreground-600 hover:bg-transparent"
+             OnClick="@(async () => await ThemeService.ToggleThemeAsync())">
+    <MoonIcon Size="20" class="hidden dark:block" />
+    <SunIcon Size="20" class="dark:hidden" />
+</LumexButton>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Badge/Examples/Variants.razor b/docs/LumexUI.Docs.Client/Pages/Components/Badge/Examples/Variants.razor
index da8ca643..c08702c6 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Badge/Examples/Variants.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Badge/Examples/Variants.razor
@@ -1,10 +1,10 @@
 <div class="flex gap-3 items-center">
     <LumexBadge Text="5" Color="@ThemeColor.Warning" Variant="@BadgeVariant.Solid">
-        <LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=2" />
+        <LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=6" />
     </LumexBadge>
 
     <LumexBadge Text="5" Color="@ThemeColor.Warning" Variant="@BadgeVariant.Flat">
-        <LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=6" />
+        <LumexAvatar Radius="@Radius.Medium" Src="https://i.pravatar.cc/150?img=2" />
     </LumexBadge>
 
     <LumexBadge Text="5" Color="@ThemeColor.Warning" Variant="@BadgeVariant.Shadow">
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/BlurredCard.razor b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/BlurredCard.razor
index f8fad1d7..5ce69871 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/BlurredCard.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/BlurredCard.razor
@@ -2,20 +2,20 @@
 
 <LumexCard Blurred="@true"
            Shadow="@Shadow.Large"
-           Class="bg-background/20 rounded-2xl">
+           Class="bg-background/20">
     <LumexCardHeader Class="justify-between">
         <LumexButton IconOnly="@true"
                      Size="@Size.Small"
                      Radius="@Radius.Full"
                      Variant="@Variant.Flat"
-                     Class="bg-background/40">
+                     Class="bg-background/40 dark:bg-background/20">
             <TimerIcon Size="20" class="text-foreground" />
         </LumexButton>
         <LumexButton IconOnly="@true"
                      Size="@Size.Small"
                      Radius="@Radius.Full"
                      Variant="@Variant.Flat"
-                     Class="bg-background/40">
+                     Class="bg-background/40 dark:bg-background/20">
             <ActivityIcon Size="20" class="text-foreground" />
         </LumexButton>
     </LumexCardHeader>
@@ -29,11 +29,11 @@
                     <div class="absolute w-16 h-16 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-black" />
                 </div>
             </div>
-            <div class="col-span-1 font-bold text-right text-xl drop-shadow-lg">
-                <p class="text-foreground">7:26</p>
-                <p class="text-pink-800">427</p>
-                <p class="text-lime-400">41</p>
-                <p class="text-cyan-400">9</p>
+            <div class="col-span-1 font-bold text-right text-xl">
+                <p class="text-foreground text-shadow-lg">7:26</p>
+                <p class="text-pink-800 text-shadow-lg">427</p>
+                <p class="text-lime-400 text-shadow-lg">41</p>
+                <p class="text-cyan-400 text-shadow-lg">9</p>
             </div>
         </div>
     </LumexCardBody>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/BlurredFooter.razor b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/BlurredFooter.razor
index c7912316..6a1f6632 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/BlurredFooter.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/BlurredFooter.razor
@@ -5,17 +5,13 @@
     <LumexCardFooter Blurred="@true"
                      Class="absolute z-10 left-2 bottom-2 w-[calc(100%_-_1rem)] py-2 bg-background/10 rounded-large">
         <div class="flex flex-col flex-grow text-white/85">
-            <h4 class="font-bold text-base">
-                How VR Enhances Learning
-            </h4>
-            <p class="text-xs">
-                Discover how VR enables immersive learning
-            </p>
+            <h4 class="font-bold text-base">Learning with VR</h4>
+            <p class="text-tiny">Discover how VR enables immersive learning</p>
         </div>
-        <LumexButton Variant="@Variant.Flat"
-                     Radius="@Radius.Large"
-                     Size="@Size.Small"
-                     Class="text-xs text-white bg-white/15">
+        <LumexButton Size="@Size.Small"
+                     Radius="@Radius.Full"
+                     Variant="@Variant.Flat"
+                     Class="text-tiny text-white bg-white/15">
             Learn
         </LumexButton>
     </LumexCardFooter>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/Complex.razor b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/Complex.razor
index d2b7bbc7..6f79027e 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/Complex.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/Complex.razor
@@ -3,8 +3,8 @@
 <LumexCard Class="max-w-sm">
     <LumexCardHeader Class="justify-between pb-0">
         <div class="flex items-center">
-            <CalendarClockIcon Size="20" class="text-primary mr-1" />
-            <p class="text-sm text-foreground-500">16:15, 3 Dec</p>
+            <CalendarClockIcon Size="20" class="mr-1.5 text-primary" />
+            <p class="text-small text-foreground-500">16:15, 3 Dec</p>
         </div>
         <LumexButton IconOnly="@true"
                      Size="@Size.Small"
@@ -20,7 +20,7 @@
         <div class="grid grid-cols-5 mt-2 items-center">
             <div class="col-span-3">
                 <p class="font-semibold">London, England</p>
-                <p class="text-sm">06.09.2024 - 13.09.2024</p>
+                <p class="text-small">06.09.2024 - 13.09.2024</p>
             </div>
             <LumexAvatarGroup Max="2" Class="col-span-2">
                 <LumexAvatar Name="A S" Src="https://i.pravatar.cc/150?img=11" />
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/CoverImage.razor b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/CoverImage.razor
index dafeb099..bf19fa82 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/CoverImage.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/CoverImage.razor
@@ -1,9 +1,9 @@
 <LumexCard Class="max-w-sm">
     <LumexCardHeader Class="absolute z-10 top-2 flex-col items-start">
-        <p class="text-tiny text-sky-100 uppercase font-medium">
+        <p class="text-tiny text-zinc-100 uppercase font-medium">
             Premium Sound, All-Day Comfort
         </p>
-        <h4 class="text-sky-50 font-bold text-xl">
+        <h4 class="text-zinc-50 font-bold text-xl">
             SonicWave X1
         </h4>
     </LumexCardHeader>
@@ -12,15 +12,15 @@
          width="300"
          alt="Card background" />
     <LumexCardFooter Blurred="@true"
-                     Class="absolute z-10 bottom-0 bg-white/40 border-t border-orange-100">
-        <div class="flex flex-col flex-grow gap-1 text-small text-slate-900">
-            <p class="font-bold">SonicWave X1</p>
+                     Class="absolute z-10 bottom-0 bg-orange-100/30">
+        <div class="flex flex-col flex-grow gap-1 text-small text-zinc-50">
+            <p class="font-semibold">SonicWave X1</p>
             <p class="font-medium">Discover a world of crystal-clear audio</p>
         </div>
-        <LumexButton Variant="@Variant.Flat"
-                     Radius="@Radius.Large"
-                     Size="@Size.Small"
-                     Class="text-tiny text-white font-semibold bg-fuchsia-950 rounded-full">
+        <LumexButton Size="@Size.Small"
+                     Radius="@Radius.Full"
+                     Variant="@Variant.Flat"
+                     Class="font-medium text-white bg-rose-950">
             Order
         </LumexButton>
     </LumexCardFooter>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/CustomStyles.razor
index 16567b2d..3f5bdc85 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/CustomStyles.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/CustomStyles.razor
@@ -1,25 +1,31 @@
 <LumexCard Classes="@_classes">
     <LumexCardHeader>
-        <h4 class="text-large font-extrabold">
+        <h4 class="text-large text-foreground-900 font-bold">
             The Ultimate Cyberpunk Experience
         </h4>
     </LumexCardHeader>
     <LumexCardBody>
-        <blockquote class="italic text-foreground-500">
+        <blockquote class="italic text-foreground-600 text-small md:text-medium">
             "Neon Shadows" blends noir and cyberpunk in a gripping tale of intrigue,
             set in a decaying futuristic city. A must-read for fans of the genre.
         </blockquote>
     </LumexCardBody>
     <LumexCardFooter>
-        <p class="text-small text-foreground-600">A. Carter</p>
-        <p class="text-indigo-400">★★★★★</p>
+        <p class="text-small text-foreground-500">A. Carter</p>
+        <p class="text-indigo-300">★★★★★</p>
     </LumexCardFooter>
 </LumexCard>
 
 @code {
     private CardSlots _classes = new()
     {
-        Root = "max-w-md py-4 rounded-3xl bg-zinc-100 shadow-[5px_5px_10px_var(--color-zinc-200),-5px_-5px_10px_var(--color-zinc-50)]",
+        Root = new ElementClass()
+            .Add( "max-w-md" )
+            .Add( "py-4" )
+            .Add( "rounded-3xl" )
+            .Add( "bg-default-50" )
+            .Add( "shadow-[2px_2px_4px_var(--lumex-default-200),-2px_-2px_4px_var(--lumex-background)]" )
+            .Add( "dark:shadow-[2px_2px_4px_var(--lumex-background),-2px_-2px_4px_var(--lumex-default-200)]" ),
         Header = "justify-center text-center",
         Body = "py-0 justify-center text-center",
         Footer = "justify-center gap-2"
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/Dividers.razor b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/Dividers.razor
index 8f22cce4..da5d795d 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/Dividers.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/Dividers.razor
@@ -5,7 +5,7 @@
         <span class="size-10 rounded-lg bg-gradient-to-tr from-indigo-100 to-indigo-300" />
         <div class="flex flex-col">
             <p class="font-semibold">LumexUI</p>
-            <p class="text-sm text-default-500">lumexui.org</p>
+            <p class="text-small text-foreground-500">lumexui.org</p>
         </div>
     </LumexCardHeader>
     <LumexDivider />
@@ -16,7 +16,7 @@
     <LumexCardFooter>
         <LumexLink Href="https://github.com/LumexUI/lumexui"
                    External="@true"
-                   Class="text-indigo-500">
+                   Class="text-indigo-500 dark:text-indigo-400">
             Visit source code on GitHub
             <ExternalLinkIcon Size="16" class="ml-1" />
         </LumexLink>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/Image.razor b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/Image.razor
index 79d98e78..d0785165 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/Image.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/Image.razor
@@ -1,18 +1,12 @@
 <LumexCard Class="py-1">
     <LumexCardHeader Class="pb-0 flex-col items-start">
-        <p class="text-xs font-medium uppercase">
-            J.D. Vaughn
-        </p>
-        <small class="text-default-400">
-            Cyberpunk Noir
-        </small>
-        <h4 class="font-extrabold text-lg">
-            Neon Shadows
-        </h4>
+        <p class="text-tiny font-medium uppercase">J.D. Vaughn</p>
+        <small class="text-foreground-500">Cyberpunk Noir</small>
+        <h4 class="font-semibold text-large">Neon Shadows</h4>
     </LumexCardHeader>
     <LumexCardBody>
         <img src="assets/images/card-1.jpg"
-             class="aspect-[4/3] object-cover rounded-xl"
+             class="aspect-[4/3] object-cover rounded-medium"
              width="270"
              alt="Card image" />
     </LumexCardBody>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Card/PreviewCodes/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Card/PreviewCodes/CustomStyles.razor
index 5451e204..fc44a9e1 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Card/PreviewCodes/CustomStyles.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Card/PreviewCodes/CustomStyles.razor
@@ -1,6 +1,6 @@
 @rendermode InteractiveWebAssembly
 
 <PreviewCode Code="@new(name: null, snippet: "Card.Code.CustomStyles")"
-             PreviewClasses="@(new() { Preview = "justify-center", PreviewWrapper = "bg-zinc-100" })">
+             PreviewClasses="@(new() { Preview = "justify-center", PreviewWrapper = "bg-default-50" })">
     <LumexUI.Docs.Client.Pages.Components.Card.Examples.CustomStyles />
 </PreviewCode>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Chip/Examples/CloseButton.razor b/docs/LumexUI.Docs.Client/Pages/Components/Chip/Examples/CloseButton.razor
index ca58ef38..e0f1958c 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Chip/Examples/CloseButton.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Chip/Examples/CloseButton.razor
@@ -1,10 +1,5 @@
-<div class="flex gap-4">
-    <LumexChip OnClose="@OnClose">Chip</LumexChip>
-</div>
+<LumexChip OnClose="@OnClose">Chip</LumexChip>
 
 @code {
-    private void OnClose( MouseEventArgs args )
-    {
-        // ...
-    }
+    private void OnClose( MouseEventArgs args ) { /* */ }
 }
\ No newline at end of file
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Chip/Examples/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Chip/Examples/CustomStyles.razor
index 637b83e8..bf60338a 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Chip/Examples/CustomStyles.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Chip/Examples/CustomStyles.razor
@@ -6,7 +6,7 @@
 @code {
     private ChipSlots _classes = new()
     {
-        Base = "bg-radial-[at_50%_0%] from-sky-200 via-blue-400 to-indigo-900 to-90% border border-sky-100 shadow-sky-200",
-        Content = "drop-shadow text-white"
+        Base = "bg-linear-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30",
+        Content = "drop-shadow-xs shadow-black text-white"
     };
 }
\ No newline at end of file
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Collapse/Examples/Usage.razor b/docs/LumexUI.Docs.Client/Pages/Components/Collapse/Examples/Usage.razor
index 7ba11dbb..f83c0d2c 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Collapse/Examples/Usage.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Collapse/Examples/Usage.razor
@@ -2,15 +2,14 @@
 
 <ul class="min-w-48">
     <li>
-        <div class="flex items-center gap-2 px-2 py-1 cursor-pointer rounded-lg hover:bg-indigo-50 hover:text-indigo-600"
-             @onclick="@(() => _expanded = !_expanded)">
+        <div class="@_directoryStyles" @onclick="@(() => _expanded = !_expanded)">
             @(_expanded ? @<FolderOpenIcon /> : @<FolderIcon />)
             <span>src</span>
         </div>
         <LumexCollapse As="ul" Expanded="@_expanded" Class="ml-4">
             @foreach( var dir in new[] { "app", "pages", "components" } )
             {
-                <li class="flex items-center gap-2 px-2 py-1 cursor-pointer rounded-lg hover:bg-indigo-50 hover:text-indigo-600">
+                <li class="@_directoryStyles">
                     <FolderIcon />
                     <span>@dir</span>
                 </li>
@@ -21,4 +20,18 @@
 
 @code {
     private bool _expanded = true;
+
+    private string _directoryStyles = new ElementClass()
+        .Add( "flex" )
+        .Add( "items-center" )
+        .Add( "gap-2" )
+        .Add( "px-2" )
+        .Add( "py-1" )
+        .Add( "py-1" )
+        .Add( "rounded-medium" )
+        .Add( "cursor-pointer" )
+        .Add( "hover:bg-indigo-50" )
+        .Add( "hover:text-indigo-600" )
+        .Add( "dark:hover:bg-indigo-500/15" )
+        .Add( "dark:hover:text-indigo-200" );
 }
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/CustomCells.razor b/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/CustomCells.razor
index 39278c18..801c5847 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/CustomCells.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/CustomCells.razor
@@ -5,9 +5,12 @@
         <Content>
             @{
                 var status = context.Status;
-                <span class="px-1.5 py-0.5 text-tiny rounded-full @(_statusVariants[status])">
+                <LumexChip Size="@Size.Small"
+                           Variant="@ChipVariant.Dot"
+                           Color="@_statusColors[status]"
+                           Class="@_statusStyles[status]">
                     @status
-                </span>
+                </LumexChip>
             }
         </Content>
     </PropertyColumn>
@@ -22,11 +25,18 @@
         new( "Diana Lee", "Moderator", "Active" )
     }.AsQueryable();
 
-    private readonly Dictionary<string, string> _statusVariants = new()
+    private readonly Dictionary<string, string> _statusStyles = new()
     {
-        ["Pending"] = "border border-primary-300 bg-primary-50 text-primary",
-        ["Active"] = "border border-danger-300 bg-danger-50 text-danger",
-        ["Inactive"] = "border border-default-300 bg-default-100 text-default-500"
+        ["Active"] = "border-primary-300 bg-primary-50 text-primary dark:bg-primary/15 dark:text-primary-500",
+        ["Inactive"] = "border-danger-300 bg-danger-50 text-danger dark:bg-danger/15 dark:text-danger-500",
+        ["Pending"] = "border-default-300 bg-default-50 text-foreground dark:bg-default-100"
+    };
+
+    private readonly Dictionary<string, ThemeColor> _statusColors = new()
+    {
+        ["Active"] = ThemeColor.Primary,
+        ["Inactive"] = ThemeColor.Danger,
+        ["Pending"] = ThemeColor.Default
     };
 
     private record User( string Name, string Role, string Status );
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/LoadingContent.razor b/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/LoadingContent.razor
index 8e30bb20..d62d6f4a 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/LoadingContent.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/LoadingContent.razor
@@ -1,31 +1,16 @@
-<LumexDataGrid Data="@_users"
-               Loading="@true"
-               LoadingContent="@_loadingContent">
-    <PropertyColumn Property="@(p => p.Name)" />
-    <PropertyColumn Property="@(p => p.Role)" />
-    <PropertyColumn Property="@(p => p.Status)" />
+<LumexDataGrid Data="@_users" Loading="@true">
+    <LoadingContent>
+        <LumexSpinner Size="@Size.Small" Class="mr-3" />
+        Fetching data...
+    </LoadingContent>
+    <ChildContent>
+        <PropertyColumn Property="@(p => p.Name)" />
+        <PropertyColumn Property="@(p => p.Role)" />
+        <PropertyColumn Property="@(p => p.Status)" />
+    </ChildContent>
 </LumexDataGrid>
 
 @code {
-    private readonly RenderFragment _loadingContent =
-    @<text>
-        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-indigo-500"
-             xmlns="http://www.w3.org/2000/svg"
-             fill="none"
-             viewBox="0 0 24 24">
-            <circle class="opacity-25"
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    stroke-width="4" />
-            <path class="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-        </svg>
-        Fetching data...
-    </text>;
-
     private readonly IQueryable<User> _users = new List<User>
     {
         new( "Alice Johnson", "Administrator", "Active" ),
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/Usage.razor b/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/Usage.razor
index 3fc147b3..15aa0fad 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/Usage.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/Usage.razor
@@ -1,11 +1,9 @@
-<div class="grid max-w-sm gap-4 p-4 rounded-xl bg-white ring ring-black/5 shadow-md">
+<div class="max-w-sm grid gap-4 p-6 rounded-large bg-background ring ring-default-900/10">
     <div class="flex gap-4">
-        <div class="flex w-12 h-12 items-center justify-center shrink-0 rounded-full bg-violet-200 text-black">
-            <span class="font-semibold text-lg">RG</span>
-        </div>
+        <LumexAvatar Name="Rachel Green" Class="shrink-0" />
         <div class="space-y-1">
-            <h4 class="font-semibold">Coffee Catch-up?</h4>
-            <p class="text-sm text-foreground-500 line-clamp-2">
+            <h4 class="font-semibold text-small">Coffee Catch-up?</h4>
+            <p class="text-small text-foreground-500 line-clamp-2">
                 Hi Rachel,
                 Hope you’re doing well! Are you free for a quick coffee catch-up later this week?
                 It’s been a while, and I’d love to catch up on things.
@@ -14,13 +12,11 @@
     </div>
     <LumexDivider />
     <div class="flex gap-4">
-        <div class="flex w-12 h-12 items-center justify-center shrink-0 rounded-full bg-sky-200 text-black">
-            <span class="font-semibold text-lg">SC</span>
-        </div>
+        <LumexAvatar Name="Sarah Salvatore" Class="shrink-0" />
         <div class="space-y-1">
-            <h4 class="font-semibold">Welcome to the Team!</h4>
-            <p class="text-sm text-foreground-500 line-clamp-2">
-                Hey Sara,
+            <h4 class="font-semibold text-small">Welcome to the Team!</h4>
+            <p class="text-small text-foreground-500 line-clamp-2">
+                Hey Sarah,
                 Welcome aboard! We’re excited to have you with us. 
                 Let me know if you need anything while settling in. 
                 Looking forward to working together!
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/_Orientation.razor b/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/_Orientation.razor
index 7ef374e7..c72b4e20 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/_Orientation.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/_Orientation.razor
@@ -1,6 +1,6 @@
 @using LumexUI.Shared.Icons
 
-<div class="flex h-8 p-1 space-x-2 items-center bg-white ring ring-black/5 rounded-sm shadow-md">
+<div class="flex h-8 px-2 py-1 space-x-2 items-center bg-background ring ring-default-900/10 rounded-sm">
     <AlignLeftIcon Size="20" />
     <AlignCenterIcon Size="20" />
     <AlignRightIcon Size="20" />
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Dropdown/Examples/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Dropdown/Examples/CustomStyles.razor
index 7403a707..14c22050 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Dropdown/Examples/CustomStyles.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Dropdown/Examples/CustomStyles.razor
@@ -17,12 +17,18 @@
                        ItemClasses="@_itemClasses">
         <LumexDropdownItem Disabled="@true"
                            Class="h-14 gap-2 opacity-100">
-            <div class="inline-flex flex-col items-start">
-                <span class="text-small text-default-600">John Doe</span>
-                <span class="text-tiny text-default-500">@@johndoe</span>
+            <div class="flex items-center gap-2">
+                <LumexAvatar Size="@Size.Small"
+                             Name="John Doe"
+                             Src="https://i.pravatar.cc/150?img=2" />
+                <div class="inline-flex flex-col items-start">
+                    <span class="text-small text-default-600">John Doe</span>
+                    <span class="text-tiny text-default-500">@@johndoe</span>
+                </div>
             </div>
         </LumexDropdownItem>
         <LumexDropdownItem>Dashboard</LumexDropdownItem>
+        <LumexDropdownItem>Notifications</LumexDropdownItem>
         <LumexDropdownItem ShowDivider="@true">
             Settings
         </LumexDropdownItem>
@@ -56,7 +62,7 @@
 @code {
     private PopoverSlots _classes = new()
     {
-        Content = "p-0 border-small border-divider bg-background",
+        Content = "p-0 border border-divider bg-background",
         Arrow = "bg-default-200"
     };
 
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/ColorsVariants.razor b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/ColorsVariants.razor
index fcaa8e27..e54ce4af 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/ColorsVariants.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/ColorsVariants.razor
@@ -1,4 +1,4 @@
-<div class="w-full max-w-60 px-1 py-2 border border-default-200 rounded-small">
+<div class="w-full max-w-60 px-1 py-2 border border-default-900/10 rounded-small">
     <LumexListbox TValue="string" Color="@_color" Variant="@_variant">
         <LumexListboxItem>New file</LumexListboxItem>
         <LumexListboxItem>Edit file</LumexListboxItem>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/CustomStyles.razor
index 8c9241ab..5d288915 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/CustomStyles.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/CustomStyles.razor
@@ -78,6 +78,6 @@
 
     private ListboxItemSlots _itemClasses = new()
     {
-        Root = "px-3 first:rounded-t-medium last:rounded-b-medium rounded-none gap-3 h-12 hover:bg-default/15"
+        Root = "px-3 first:rounded-t-medium last:rounded-b-medium rounded-none gap-3 h-12"
     };
 }
\ No newline at end of file
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/Description.razor b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/Description.razor
index c03ecc4f..867e577f 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/Description.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/Description.razor
@@ -1,6 +1,6 @@
 @using LumexUI.Shared.Icons
 
-<div class="w-full max-w-60 px-1 py-2 border border-default-200 rounded-small">
+<div class="w-full max-w-60 px-1 py-2 border border-default-900/10 rounded-small">
     <LumexListbox TValue="string" Variant="@ListboxVariant.Flat">
         <LumexListboxItem Description="Create a new file">
             <StartContent>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/Disabled.razor b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/Disabled.razor
index 1e367960..d0d63b38 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/Disabled.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/Disabled.razor
@@ -1,4 +1,4 @@
-<div class="w-full max-w-60 px-1 py-2 border border-default-200 rounded-small">
+<div class="w-full max-w-60 px-1 py-2 border border-default-900/10 rounded-small">
     <LumexListbox TValue="string">
         <LumexListboxItem>New file</LumexListboxItem>
         <LumexListboxItem Disabled="@true">Edit file</LumexListboxItem>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/DisabledItems.razor b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/DisabledItems.razor
index cca7ecc7..29a68d98 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/DisabledItems.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/DisabledItems.razor
@@ -1,4 +1,4 @@
-<div class="w-full max-w-60 px-1 py-2 border border-default-200 rounded-small">
+<div class="w-full max-w-60 px-1 py-2 border border-default-900/10 rounded-small">
     <LumexListbox TValue="string" DisabledItems="@(["new", "delete"])">
         <LumexListboxItem Value="@("new")">New file</LumexListboxItem>
         <LumexListboxItem Value="@("edit")">Edit file</LumexListboxItem>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/EmptyContent.razor b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/EmptyContent.razor
index 380d2d18..c2619dc0 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/EmptyContent.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/EmptyContent.razor
@@ -1,4 +1,4 @@
-<div class="w-full max-w-60 px-1 py-2 border border-default-200 rounded-small">
+<div class="w-full max-w-60 px-1 py-2 border border-default-900/10 rounded-small">
     <LumexListbox TValue="string">
         <EmptyContent>
             <span class="text-small">No items \(o_o)/</span>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/StartEndContent.razor b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/StartEndContent.razor
index 6a23b7c2..1e41a8a7 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/StartEndContent.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/StartEndContent.razor
@@ -1,6 +1,6 @@
 @using LumexUI.Shared.Icons
 
-<div class="w-full max-w-60 px-1 py-2 border border-default-200 rounded-small">
+<div class="w-full max-w-60 px-1 py-2 border border-default-900/10 rounded-small">
     <LumexListbox TValue="string" Variant="@ListboxVariant.Flat">
         <LumexListboxItem>
             <StartContent>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/TwoWayDataBindingMultiple.razor b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/TwoWayDataBindingMultiple.razor
index 7a2bd063..c6b61b8a 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/TwoWayDataBindingMultiple.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/TwoWayDataBindingMultiple.razor
@@ -1,5 +1,5 @@
 <div class="w-full flex flex-col gap-2">
-    <div class="max-w-60 px-1 py-2 border border-default-200 rounded-small">
+    <div class="max-w-60 px-1 py-2 border border-default-900/10 rounded-small">
         <LumexListbox @bind-Values="@_selectedValues">
             <LumexListboxItem Value="@("cat")">Cat</LumexListboxItem>
             <LumexListboxItem Value="@("dog")">Dog</LumexListboxItem>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/TwoWayDataBindingSingle.razor b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/TwoWayDataBindingSingle.razor
index e018c99f..e391ffd9 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/TwoWayDataBindingSingle.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/TwoWayDataBindingSingle.razor
@@ -1,5 +1,5 @@
 <div class="w-full flex flex-col gap-2">
-    <div class="max-w-60 px-1 py-2 border border-default-200 rounded-small">
+    <div class="max-w-60 px-1 py-2 border border-default-900/10 rounded-small">
         <LumexListbox @bind-Value="@_selectedValue">
             <LumexListboxItem Value="@("cat")">Cat</LumexListboxItem>
             <LumexListboxItem Value="@("dog")">Dog</LumexListboxItem>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/Usage.razor b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/Usage.razor
index 260caf22..995ff66b 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/Usage.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Listbox/Examples/Usage.razor
@@ -1,4 +1,4 @@
-<div class="w-full max-w-60 px-1 py-2 border border-default-200 rounded-small">
+<div class="w-full max-w-60 px-1 py-2 border border-default-900/10 rounded-small">
     <LumexListbox TValue="string">
         <LumexListboxItem>New file</LumexListboxItem>
         <LumexListboxItem>Edit file</LumexListboxItem>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/CustomStyles.razor
index 40b8e4cd..6485641b 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/CustomStyles.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/CustomStyles.razor
@@ -12,13 +12,15 @@
     <LumexNavbarContent Class="hidden sm:flex">
         <LumexNavbarItem>
             <LumexLink Href="/examples/navbar/custom-styles#"
-                       Color="@ThemeColor.None">
+                       Color="@ThemeColor.None"
+                       Class="px-4 py-1.5">
                 Home
             </LumexLink>
         </LumexNavbarItem>
         <LumexNavbarItem>
             <LumexLink Href="/examples/navbar/custom-styles#"
-                       Color="@ThemeColor.None">
+                       Color="@ThemeColor.None"
+                       Class="px-4 py-1.5">
                 About
             </LumexLink>
         </LumexNavbarItem>
@@ -26,8 +28,6 @@
 
     <LumexNavbarContent Align="@Align.End">
         <LumexTextbox Type="@InputType.Search"
-                      Color="@ThemeColor.Info"
-                      Variant="@InputVariant.Flat"
                       Size="@Size.Small"
                       Placeholder="Type to search..."
                       Classes="@_inputClasses">
@@ -41,10 +41,10 @@
 @code {
     private NavbarSlots _navbarClasses = new()
     {
-        Root = "border-b-2 border-sky-100",
-        Brand = "bg-clip-text bg-gradient-to-r from-sky-900 to-sky-600 text-transparent",
+        Root = "border-b-2 border-default-100",
+        Brand = "bg-clip-text bg-gradient-to-r from-foreground-900 to-foreground-600 text-transparent",
         Content = "gap-3",
-        Item = "px-4 py-1.5 rounded-lg text-sky-600 bg-sky-50 font-medium"
+        Item = "rounded-lg font-medium text-foreground bg-default-100 dark:bg-default-50"
     };
 
     private InputFieldSlots _inputClasses = new()
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/ExampleLayout.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/ExampleLayout.razor
index e2c928f9..1d012701 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/ExampleLayout.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/ExampleLayout.razor
@@ -1,6 +1,33 @@
 @inherits LayoutComponentBase
 @layout MainLayout
 
+<script>
+    function syncThemeWithParent() {
+      const parentHtml = window.parent.document.documentElement;
+      const iframeHtml = document.documentElement;
+
+      const applyTheme = () => {
+        const isDark = parentHtml.classList.contains('dark');
+        iframeHtml.classList.toggle('dark', isDark);
+      };
+
+      // Initial sync
+      applyTheme();
+
+      // Observe for class changes
+      const observer = new MutationObserver(() => {
+        applyTheme();
+      });
+
+      observer.observe(parentHtml, {
+        attributes: true,
+        attributeFilter: ['class'],
+      });
+    }
+
+    window.addEventListener('DOMContentLoaded', syncThemeWithParent);
+</script>
+
 @Body
 
 <article class="p-6 space-y-4">
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Blurred.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Blurred.razor
index f786c834..b54fa60d 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Blurred.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Blurred.razor
@@ -1,6 +1,10 @@
 @rendermode InteractiveWebAssembly
 
-<PreviewCode Code="@new(name: null, snippet: "Navbar.Code.Blurred")"
-             PreviewClasses="@(new() { Preview = "bg-background h-96 ring ring-black/5 shadow-md" })">
-    <iframe class="w-full h-full overflow-scroll" src="/examples/navbar/blurred" />
+<PreviewCode Code="@new( name: null, snippet: "Navbar.Code.Blurred" )"
+             PreviewClasses="@(new()
+             {
+                 PreviewWrapper = "p-8",
+                 Preview = "bg-background h-96 p-0 ring ring-default-900/10 rounded-small shadow-md",
+             })">
+    <iframe class="w-full h-full rounded-small overflow-scroll" src="/examples/navbar/blurred" />
 </PreviewCode>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Bordered.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Bordered.razor
index a1a0f22c..e65d0014 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Bordered.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Bordered.razor
@@ -1,6 +1,10 @@
 @rendermode InteractiveWebAssembly
 
 <PreviewCode Code="@new(name: null, snippet: "Navbar.Code.Bordered")"
-             PreviewClasses="@(new() { Preview = "bg-background h-96 ring ring-black/5 shadow-md" })">
-    <iframe class="w-full h-full overflow-scroll" src="/examples/navbar/bordered" />
+             PreviewClasses="@(new()
+             {
+                 PreviewWrapper = "p-8",
+                 Preview = "bg-background h-96 p-0 ring ring-default-900/10 rounded-small shadow-md",
+             })">
+    <iframe class="w-full h-full rounded-small overflow-scroll" src="/examples/navbar/bordered" />
 </PreviewCode>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Brand.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Brand.razor
index b40096ce..ab46188d 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Brand.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Brand.razor
@@ -1,6 +1,10 @@
 @rendermode InteractiveWebAssembly
 
 <PreviewCode Code="@new(name: null, snippet: "Navbar.Code.Brand")"
-             PreviewClasses="@(new() { Preview = "bg-background h-96 ring ring-black/5 shadow-md" })">
-    <iframe class="w-full h-full overflow-scroll" src="/examples/navbar/brand" />
+             PreviewClasses="@(new()
+             {
+                 PreviewWrapper = "p-8",
+                 Preview = "bg-background h-96 p-0 ring ring-default-900/10 rounded-small shadow-md",
+             })">
+    <iframe class="w-full h-full rounded-small overflow-scroll" src="/examples/navbar/brand" />
 </PreviewCode>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/CustomStyles.razor
index da1cd5e6..e1fb20d3 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/CustomStyles.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/CustomStyles.razor
@@ -1,6 +1,10 @@
 @rendermode InteractiveWebAssembly
 
 <PreviewCode Code="@new(name: null, snippet: "Navbar.Code.CustomStyles")"
-             PreviewClasses="@(new() { Preview = "bg-background h-96 ring ring-black/5 shadow-md" })">
-    <iframe class="w-full h-full overflow-scroll" src="/examples/navbar/custom-styles" />
+             PreviewClasses="@(new()
+             {
+                 PreviewWrapper = "p-8",
+                 Preview = "bg-background h-96 p-0 ring ring-default-900/10 rounded-small shadow-md",
+             })">
+    <iframe class="w-full h-full rounded-small overflow-scroll" src="/examples/navbar/custom-styles" />
 </PreviewCode>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Height.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Height.razor
index 7470c3d3..04f89edd 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Height.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Height.razor
@@ -1,6 +1,10 @@
 @rendermode InteractiveWebAssembly
 
 <PreviewCode Code="@new(name: null, snippet: "Navbar.Code.Height")"
-             PreviewClasses="@(new() { Preview = "bg-background h-96 ring ring-black/5 shadow-md" })">
-    <iframe class="w-full h-full overflow-scroll" src="/examples/navbar/height" />
+             PreviewClasses="@(new()
+             {
+                 PreviewWrapper = "p-8",
+                 Preview = "bg-background h-96 p-0 ring ring-default-900/10 rounded-small shadow-md",
+             })">
+    <iframe class="w-full h-full rounded-small overflow-scroll" src="/examples/navbar/height" />
 </PreviewCode>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/MaxWidth.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/MaxWidth.razor
index c6643208..56c54761 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/MaxWidth.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/MaxWidth.razor
@@ -1,6 +1,10 @@
 @rendermode InteractiveWebAssembly
 
 <PreviewCode Code="@new(name: null, snippet: "Navbar.Code._MaxWidth")"
-             PreviewClasses="@(new() { Preview = "bg-background h-96 ring ring-black/5 shadow-md" })">
-    <iframe class="w-full h-full overflow-scroll" src="/examples/navbar/max-width" />
+             PreviewClasses="@(new()
+             {
+                 PreviewWrapper = "p-8",
+                 Preview = "bg-background h-96 p-0 ring ring-default-900/10 rounded-small shadow-md",
+             })">
+    <iframe class="w-full h-full rounded-small overflow-scroll" src="/examples/navbar/max-width" />
 </PreviewCode>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Menu.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Menu.razor
index 7efc6fc0..455e1e53 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Menu.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Menu.razor
@@ -1,7 +1,11 @@
 @rendermode InteractiveWebAssembly
 
 <PreviewCode Code="@new(name: null, snippet: "Navbar.Code.Menu")"
-             PreviewClasses="@(new() { Preview = "bg-background h-96 ring ring-black/5 shadow-md" })"
+             PreviewClasses="@(new()
+             {
+                 PreviewWrapper = "p-8",
+                 Preview = "bg-background h-96 p-0 ring ring-default-900/10 rounded-small shadow-md",
+             })"
              Class="max-w-sm">
-    <iframe class="max-w-sm w-full h-full overflow-scroll" src="/examples/navbar/menu" />
+    <iframe class="max-w-sm w-full h-full rounded-small overflow-scroll" src="/examples/navbar/menu" />
 </PreviewCode>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Sticky.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Sticky.razor
index 5e0674e4..bb34dcb6 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Sticky.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Sticky.razor
@@ -1,6 +1,10 @@
 @rendermode InteractiveWebAssembly
 
 <PreviewCode Code="@new(name: null, snippet: "Navbar.Code.Sticky")"
-             PreviewClasses="@(new() { Preview = "bg-background h-96 ring ring-black/5 shadow-md" })">
-    <iframe class="w-full h-full overflow-scroll" src="/examples/navbar/sticky" />
+             PreviewClasses="@(new()
+             {
+                 PreviewWrapper = "p-8",
+                 Preview = "bg-background h-96 p-0 ring ring-default-900/10 rounded-small shadow-md",
+             })">
+    <iframe class="w-full h-full rounded-small overflow-scroll" src="/examples/navbar/sticky" />
 </PreviewCode>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Usage.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Usage.razor
index c5e889dc..ee081c40 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Usage.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/PreviewCodes/Usage.razor
@@ -1,6 +1,10 @@
 @rendermode InteractiveWebAssembly
 
 <PreviewCode Code="@new(name: null, snippet: "Navbar.Code.Usage")"
-             PreviewClasses="@(new() { Preview = "bg-background h-96 ring ring-black/5 shadow-md" })">
-    <iframe class="w-full h-full overflow-scroll" src="/examples/navbar/usage" />
+             PreviewClasses="@(new()
+             {
+                 PreviewWrapper = "p-8",
+                 Preview = "bg-background h-96 p-0 ring ring-default-900/10 rounded-small shadow-md",
+             })">
+    <iframe class="w-full h-full rounded-small overflow-scroll" src="/examples/navbar/usage" />
 </PreviewCode>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/PreviewCodes/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/PreviewCodes/CustomStyles.razor
index d3bef62f..20b3b3b6 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/PreviewCodes/CustomStyles.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/PreviewCodes/CustomStyles.razor
@@ -8,7 +8,7 @@
 @code {
     private Preview.Slots _classes = new()
     {
-        Background = "bg-gradient-to-tr from-indigo-200 to-violet-300 [mask-image:none]",
+        Background = "mask-none bg-default-50",
         Preview = "justify-center"
     };
 }
\ No newline at end of file
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Popover/Examples/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Popover/Examples/CustomStyles.razor
index ca0a7f2c..9f93daea 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Popover/Examples/CustomStyles.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Popover/Examples/CustomStyles.razor
@@ -8,9 +8,9 @@
 </LumexButton>
 
 <LumexPopover Id="@_popoverId"
-              Placement="@PopoverPlacement.Right"
-              ShowArrow="@true"
               Offset="16"
+              ShowArrow="@true"
+              Placement="@PopoverPlacement.Right"       
               Classes="@_classes">
     <LumexPopoverContent>
         <div class="px-1 py-2">
@@ -25,7 +25,8 @@
     {
         Content = ElementClass.Empty()
             .Add( "py-3 px-4 border border-default-200" )
-            .Add( "bg-gradient-to-br from-white to-default-200" )
+            .Add( "bg-linear-to-br from-white to-default-200" )
+            .Add( "dark:from-default-100 dark:to-default-50" )
             .ToString(),
         Arrow = "bg-default-200"
     };
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/CustomStyles.razor
index a7c7dc6c..7728d960 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/CustomStyles.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/RadioGroup/Examples/CustomStyles.razor
@@ -1,14 +1,13 @@
 @using LumexUI.Shared.Icons
 
 <LumexRadioGroup Label="Choose your preferred meal"
-                 Classes="@_groupSlots"
-                 RadioClasses="@_radioClasses" 
-                 @bind-Value="@_chosenFood">
+                 RadioClasses="@_radioClasses"
+                 @bind-Value="@_value">
     <LumexRadio Value="@("Kebab")">
         <div class="flex items-center gap-4">
             <BeefIcon Size="32" />
             <div>
-                <div class="font-semibold">Steak</div>
+                <div class="font-medium">Steak</div>
                 <p class="text-sm text-primary">$39.99</p>
             </div>
         </div>
@@ -18,8 +17,8 @@
         <div class="flex items-center gap-4">
             <SoupIcon Size="32" />
             <div>
-                <div class="font-semibold">Soup</div>
-                <p class="text-sm text-primary">$18.99</p>
+                <div class="font-medium">Soup</div>
+                <p class="text-small text-primary">$18.99</p>
             </div>
         </div>
     </LumexRadio>
@@ -28,8 +27,8 @@
         <div class="flex items-center gap-4">
             <PizzaIcon Size="32" />
             <div>
-                <div class="font-semibold">Pizza</div>
-                <p class="text-sm text-primary">$15.99</p>
+                <div class="font-medium">Pizza</div>
+                <p class="text-small text-primary">$15.99</p>
             </div>
         </div>
     </LumexRadio>
@@ -38,8 +37,8 @@
         <div class="flex items-center gap-4">
             <CircleSlashIcon Size="32" />
             <div>
-                <div class="font-semibold">No Food</div>
-                <p class="text-sm text-primary">No Cost</p>
+                <div class="font-medium">No Food</div>
+                <p class="text-small text-primary">No Cost</p>
             </div>
         </div>
     </LumexRadio>
@@ -47,21 +46,14 @@
 
 @code
 {
-    private string? _chosenFood;
-
-    private RadioGroupSlots _groupSlots = new()
-    {
-        Label = "text-neutral-700 font-medium"
-    };
+    private string? _value;
 
     private RadioSlots _radioClasses = new()
     {
         Root = ElementClass.Empty()
-            .Add("inline-flex m-0 bg-surface1 hover:bg-surface2 items-center justify-between")
-            .Add("flex-row-reverse max-w-[300px] rounded-lg gap-4 p-4 border-2 border-default-200")
-            .Add("data-[selected=true]:border-primary")
-            .Add("data-[selected=true]:bg-primary-100/25")
-            .Add("transition-colors")
-            .ToString()
+            .Add( "m-0 justify-between bg-surface1 hover:bg-surface2" )
+            .Add( "flex-row-reverse max-w-sm rounded-lg p-4 border-2 border-default-200" )
+            .Add( "data-[selected=true]:border-primary data-[selected=true]:bg-primary/10" )
+            .Add( "transition-colors" )
     };
 }
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Tabs/Examples/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Tabs/Examples/CustomStyles.razor
index 54962df3..18a50cf9 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Tabs/Examples/CustomStyles.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Tabs/Examples/CustomStyles.razor
@@ -2,9 +2,8 @@
 
 <div class="w-full flex flex-col">
     <LumexTabs Variant="@TabVariant.Underlined"
-               Color="@ThemeColor.Primary"
                Classes="@_classes">
-        <LumexTab>
+        <LumexTab Id="photos">
             <TitleContent>
                 <div class="flex items-center space-x-2">
                     <ImagesIcon Size="20" />
@@ -15,7 +14,7 @@
                 </div>
             </TitleContent>
         </LumexTab>
-        <LumexTab>
+        <LumexTab Id="music">
             <TitleContent>
                 <div class="flex items-center space-x-2">
                     <MusicIcon Size="20" />
@@ -26,7 +25,7 @@
                 </div>
             </TitleContent>
         </LumexTab>
-        <LumexTab>
+        <LumexTab Id="videos">
             <TitleContent>
                 <div class="flex items-center space-x-2">
                     <ClapperboardIcon Size="20" />
@@ -45,7 +44,7 @@
     {
         TabList = "gap-6 w-full rounded-none p-0 border-b border-divider",
         Tab = "max-w-fit px-0 h-12",
-        TabContent = "group-data-[selected=true]:text-secondary",
-        Cursor = "w-full bg-secondary"
+        TabContent = "group-data-[selected=true]:text-secondary-500",
+        Cursor = "w-full bg-secondary-500"
     };
 }
\ No newline at end of file
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Tabs/Examples/Sizes.razor b/docs/LumexUI.Docs.Client/Pages/Components/Tabs/Examples/Sizes.razor
index 848ed615..d9198bce 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Tabs/Examples/Sizes.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Tabs/Examples/Sizes.razor
@@ -1,4 +1,4 @@
-<div class="flex flex-wrap gap-4">
+<div class="flex flex-col gap-4">
     @foreach (var size in Enum.GetValues<Size>())
     {
         <LumexTabs Size="@size">
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Textbox/PreviewCodes/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Textbox/PreviewCodes/CustomStyles.razor
index 7bc83b38..3e901585 100644
--- a/docs/LumexUI.Docs.Client/Pages/Components/Textbox/PreviewCodes/CustomStyles.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Components/Textbox/PreviewCodes/CustomStyles.razor
@@ -8,7 +8,7 @@
 @code {
     private Preview.Slots _classes = new()
     {
-        Background = "bg-gradient-to-tr from-indigo-200 to-violet-300 [mask-image:none]",
+        Background = "mask-none bg-default-50",
         Preview = "justify-center"
     };
 }
\ No newline at end of file
diff --git a/docs/LumexUI.Docs.Client/Pages/Getting Started/Overview.razor b/docs/LumexUI.Docs.Client/Pages/Getting Started/Overview.razor
index abb71294..98298fde 100644
--- a/docs/LumexUI.Docs.Client/Pages/Getting Started/Overview.razor	
+++ b/docs/LumexUI.Docs.Client/Pages/Getting Started/Overview.razor	
@@ -48,7 +48,7 @@
         although we do recommend going over all of the content, if possible!
     </p>
 
-    <ul class="not-prose grid grid-cols-1 gap-12 mt-8 md:grid-cols-2">
+    <ul class="not-prose grid grid-cols-1 gap-8 mt-8 md:grid-cols-2">
         @foreach( var quickLink in _quickLinks )
         {
             <QuickLink Icon="@quickLink.Icon"
diff --git a/docs/LumexUI.Docs.Client/Pages/Theming/Customization/CustomThemesPreview.razor b/docs/LumexUI.Docs.Client/Pages/Theming/Customization/CustomThemesPreview.razor
index befbfc15..d6dcf658 100644
--- a/docs/LumexUI.Docs.Client/Pages/Theming/Customization/CustomThemesPreview.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Theming/Customization/CustomThemesPreview.razor
@@ -3,12 +3,12 @@
 <Preview>
     <div class="absolute top-0 right-0 flex gap-2">
         <button type="button"
-                class="size-6 rounded-full bg-primary ring-offset-2 data-[selected=true]:ring-2 data-[selected=true]:ring-primary"
+                class="size-6 rounded-full bg-primary ring-offset-2 ring-offset-background data-[selected=true]:ring-2 data-[selected=true]:ring-primary"
                 data-selected="@(_isCustomSelected is false ? "true" : "false")"
                 @onclick="@(() => _isCustomSelected = false)">
         </button>
         <button type="button"
-                class="size-6 rounded-full bg-orange-500 ring-offset-2 data-[selected=true]:ring-2 data-[selected=true]:ring-orange-500"
+                class="size-6 rounded-full bg-orange-500 ring-offset-2 ring-offset-background data-[selected=true]:ring-2 data-[selected=true]:ring-orange-500"
                 data-selected="@(_isCustomSelected is true ? "true" : "false")"
                 @onclick="@(() => _isCustomSelected = true)">
         </button>
diff --git a/docs/LumexUI.Docs.Client/Pages/Theming/DesignTokens.razor b/docs/LumexUI.Docs.Client/Pages/Theming/DesignTokens.razor
index 218c31ae..d629afbc 100644
--- a/docs/LumexUI.Docs.Client/Pages/Theming/DesignTokens.razor
+++ b/docs/LumexUI.Docs.Client/Pages/Theming/DesignTokens.razor
@@ -59,13 +59,13 @@
     </p>
 
     <ColorSwatches />
-    <CodeSnippetCollapsible Code="@(new CodeBlock( name: "globals.css", snippet: "designTokensColors" ))" />
+    <CodeSnippet Code="@(new CodeBlock( name: "globals.css", snippet: "designTokensColors" ))" Expandable="@true" />
 </DocsSection>
 
 <DocsSection Title="Themes reference">
     <p>Here's the full list of variables available for customization:</p>
 
-    <CodeSnippetCollapsible Code="@(new CodeBlock( name: "globals.css", snippet: "designTokensThemesRef" ))" />
+    <CodeSnippet Code="@(new CodeBlock( name: "globals.css", snippet: "designTokensThemesRef" ))" Expandable="@true" />
 </DocsSection>
 
 @code {
diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationConfig.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationConfig.html
index ffe01102..bb40f7ef 100644
--- a/docs/LumexUI.Docs.Client/Samples/Installation/installationConfig.html
+++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationConfig.html
@@ -1,4 +1,4 @@
-<pre data-line="2,4"><code class="language-css">@import &quot;tailwindcss&quot;;
+<pre class="line-numbers" data-line="2,4"><code class="language-css">@import &quot;tailwindcss&quot;;
 @import &quot;../bin/lumexui/theme&quot;; /* theme file */
 
 @source &quot;../bin/lumexui/*.cs&quot;; /* components styles */
diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationFiles.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationFiles.html
index 0143f296..0ef2dc8b 100644
--- a/docs/LumexUI.Docs.Client/Samples/Installation/installationFiles.html
+++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationFiles.html
@@ -1,4 +1,4 @@
-<pre data-line="6,9"><code class="language-html">&lt;!DOCTYPE html&gt;
+<pre class="line-numbers" data-line="6,9"><code class="language-html">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
     &lt;meta charset=&quot;utf-8&quot; /&gt;
diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationImport.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationImport.html
index de05f913..85136be1 100644
--- a/docs/LumexUI.Docs.Client/Samples/Installation/installationImport.html
+++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationImport.html
@@ -1,2 +1,2 @@
-<pre><code class="language-razor">@using LumexUI
+<pre class="line-numbers"><code class="language-razor">@using LumexUI
 </code></pre>
diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationPackage.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationPackage.html
index b71e28ab..ef9b87a7 100644
--- a/docs/LumexUI.Docs.Client/Samples/Installation/installationPackage.html
+++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationPackage.html
@@ -1,2 +1,2 @@
-<pre><code class="language-shell">&rsaquo; dotnet add package LumexUI
+<pre class="no-line-numbers"><code class="language-shell">&rsaquo; dotnet add package LumexUI
 </code></pre>
diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationServices.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationServices.html
index 947a9b74..5901f684 100644
--- a/docs/LumexUI.Docs.Client/Samples/Installation/installationServices.html
+++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationServices.html
@@ -1,4 +1,4 @@
-<pre><code class="language-csharp">using LumexUI.Extensions;
+<pre class="line-numbers"><code class="language-csharp">using LumexUI.Extensions;
 
 // ...
 builder.Services.AddLumexServices();
diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationThemeProvider.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationThemeProvider.html
index 4086a884..bf647c0c 100644
--- a/docs/LumexUI.Docs.Client/Samples/Installation/installationThemeProvider.html
+++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationThemeProvider.html
@@ -1,2 +1,2 @@
-<pre><code class="language-razor">&lt;LumexThemeProvider /&gt;
+<pre class="line-numbers"><code class="language-razor">&lt;LumexThemeProvider /&gt;
 </code></pre>
diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationUsage.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationUsage.html
index 9d8ddf3f..217a38b3 100644
--- a/docs/LumexUI.Docs.Client/Samples/Installation/installationUsage.html
+++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationUsage.html
@@ -1,2 +1,2 @@
-<pre><code class="language-razor">&lt;LumexButton&gt;Click Me&lt;/LumexButton&gt;
+<pre class="line-numbers"><code class="language-razor">&lt;LumexButton&gt;Click Me&lt;/LumexButton&gt;
 </code></pre>
diff --git a/docs/LumexUI.Docs.Client/Samples/Theming/Customization/customizationCustom.html b/docs/LumexUI.Docs.Client/Samples/Theming/Customization/customizationCustom.html
index 3df649ce..2a0f846f 100644
--- a/docs/LumexUI.Docs.Client/Samples/Theming/Customization/customizationCustom.html
+++ b/docs/LumexUI.Docs.Client/Samples/Theming/Customization/customizationCustom.html
@@ -1,4 +1,4 @@
-<pre><code class="language-css">.theme-orange {
+<pre class="line-numbers"><code class="language-css">.theme-orange {
     --lumex-primary: var(--color-orange-600);
     --lumex-primary-foreground: var(--color-white);
     --lumex-focus: var(--color-orange-600);
diff --git a/docs/LumexUI.Docs.Client/Samples/Theming/Customization/customizationGlobal.html b/docs/LumexUI.Docs.Client/Samples/Theming/Customization/customizationGlobal.html
index 791c6bbd..ef524573 100644
--- a/docs/LumexUI.Docs.Client/Samples/Theming/Customization/customizationGlobal.html
+++ b/docs/LumexUI.Docs.Client/Samples/Theming/Customization/customizationGlobal.html
@@ -1,4 +1,4 @@
-<pre><code class="language-css">:root {
+<pre class="line-numbers"><code class="language-css">:root {
     --lumex-radius-medium: .25rem;
     --lumex-opacity-disabled: 0.5;
 }
diff --git a/docs/LumexUI.Docs.Client/Samples/Theming/Customization/customizationToggle.html b/docs/LumexUI.Docs.Client/Samples/Theming/Customization/customizationToggle.html
index 431875f0..d1411573 100644
--- a/docs/LumexUI.Docs.Client/Samples/Theming/Customization/customizationToggle.html
+++ b/docs/LumexUI.Docs.Client/Samples/Theming/Customization/customizationToggle.html
@@ -1,2 +1,12 @@
-<pre><code class="language-html">&lt;body class=&quot;theme-orange&quot;>...&lt;/body&gt;
-</code></pre>
+<pre class="line-numbers" data-line="8"><code class="language-html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset=&quot;utf-8&quot; /&gt;
+    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
+    &lt;link href=&quot;app.css&quot; rel=&quot;stylesheet&quot; /&gt;
+&lt;/head&gt;
+&lt;body class=&quot;theme-orange&quot;&gt;
+    &lt;!-- --&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
\ No newline at end of file
diff --git a/docs/LumexUI.Docs.Client/Samples/Theming/Dark Mode/darkModeProvider.html b/docs/LumexUI.Docs.Client/Samples/Theming/Dark Mode/darkModeProvider.html
index 97248d97..d266494b 100644
--- a/docs/LumexUI.Docs.Client/Samples/Theming/Dark Mode/darkModeProvider.html	
+++ b/docs/LumexUI.Docs.Client/Samples/Theming/Dark Mode/darkModeProvider.html	
@@ -1,2 +1,2 @@
-<pre><code class="language-razor">&lt;LumexThemeProvider @rendermode="@InteractiveWebAssembly" /&gt;
+<pre class="line-numbers"><code class="language-razor">&lt;LumexThemeProvider @rendermode="@InteractiveWebAssembly" /&gt;
 </code></pre>
\ No newline at end of file
diff --git a/docs/LumexUI.Docs.Client/Samples/Theming/Dark Mode/darkModeRoot.html b/docs/LumexUI.Docs.Client/Samples/Theming/Dark Mode/darkModeRoot.html
index 1a2a6bf7..20c0261e 100644
--- a/docs/LumexUI.Docs.Client/Samples/Theming/Dark Mode/darkModeRoot.html	
+++ b/docs/LumexUI.Docs.Client/Samples/Theming/Dark Mode/darkModeRoot.html	
@@ -1,4 +1,4 @@
-<pre data-line="2"><code class="language-html">&lt;!DOCTYPE html&gt;
+<pre class="line-numbers" data-line="2"><code class="language-html">&lt;!DOCTYPE html&gt;
 &lt;html class=&quot;dark&quot;&gt;
 &lt;head&gt;
     &lt;meta charset=&quot;utf-8&quot; /&gt;
diff --git a/docs/LumexUI.Docs.Client/Samples/Theming/Dark Mode/darkModeToggle.html b/docs/LumexUI.Docs.Client/Samples/Theming/Dark Mode/darkModeToggle.html
index 2db0dbdc..f99a7a9f 100644
--- a/docs/LumexUI.Docs.Client/Samples/Theming/Dark Mode/darkModeToggle.html	
+++ b/docs/LumexUI.Docs.Client/Samples/Theming/Dark Mode/darkModeToggle.html	
@@ -1,4 +1,4 @@
-<pre><code class="language-razor">@using LumexUI.Shared.Icons
+<pre class="line-numbers"><code class="language-razor">@using LumexUI.Shared.Icons
 
 @inject ThemeService ThemeService
 @inject IPopoverService PopoverService
diff --git a/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensColors.html b/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensColors.html
index e68599a7..ad7c101c 100644
--- a/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensColors.html	
+++ b/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensColors.html	
@@ -1,4 +1,4 @@
-<pre><code class="language-css">:root, .light {
+<pre class="line-numbers"><code class="language-css">:root, .light {
     --lumex-background: var(--color-white);
     --lumex-foreground-50: var(--color-zinc-50);
     --lumex-foreground-100: var(--color-zinc-100);
diff --git a/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensConventionCss.html b/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensConventionCss.html
index 4c557306..c73a8575 100644
--- a/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensConventionCss.html	
+++ b/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensConventionCss.html	
@@ -1,3 +1,3 @@
-<pre><code class="language-css">--lumex-primary: var(--color-blue-500);
+<pre class="line-numbers"><code class="language-css">--lumex-primary: var(--color-blue-500);
 --lumex-primary-foreground: var(--color-white);
 </code></pre>
diff --git a/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensConventionHtml.html b/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensConventionHtml.html
index aa2a82b7..4c0632e7 100644
--- a/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensConventionHtml.html	
+++ b/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensConventionHtml.html	
@@ -1,2 +1,2 @@
-<pre><code class="language-html">&lt;div class=&quot;bg-primary text-primary-foreground&quot;>Hello&lt;/div&gt;
+<pre class="line-numbers"><code class="language-html">&lt;div class=&quot;bg-primary text-primary-foreground&quot;>Hello&lt;/div&gt;
 </code></pre>
diff --git a/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensLayout.html b/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensLayout.html
index e3c5e954..b081c1b6 100644
--- a/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensLayout.html	
+++ b/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensLayout.html	
@@ -1,4 +1,4 @@
-<pre><code class="language-css">:root {
+<pre class="line-numbers"><code class="language-css">:root {
     --lumex-text-tiny: .75rem;
     --lumex-text-small: .875rem;
     --lumex-text-medium: 1rem;
diff --git a/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensThemesRef.html b/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensThemesRef.html
index 3c15a44d..3b546394 100644
--- a/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensThemesRef.html	
+++ b/docs/LumexUI.Docs.Client/Samples/Theming/Design Tokens/designTokensThemesRef.html	
@@ -1,4 +1,4 @@
-<pre><code class="language-css">:root {
+<pre class="line-numbers"><code class="language-css">:root {
     --lumex-text-tiny: .75rem;
     --lumex-text-small: .875rem;
     --lumex-text-medium: 1rem;
diff --git a/docs/LumexUI.Docs.Generator/CodeSnippets.cs b/docs/LumexUI.Docs.Generator/CodeSnippets.cs
index 385dd8c0..518f08db 100644
--- a/docs/LumexUI.Docs.Generator/CodeSnippets.cs
+++ b/docs/LumexUI.Docs.Generator/CodeSnippets.cs
@@ -63,8 +63,9 @@ private static async Task ProcessFileAsync( FileInfo file )
 
         var markdownContent = ConvertRazorToMarkdown( file );
         var htmlContent = Markdown.ToHtml( markdownContent, _pipeline );
+		htmlContent = htmlContent.Replace( "<pre>", "<pre class=\"line-numbers\">" );
 
-        await using var streamWriter = new StreamWriter( markdownPath );
+		await using var streamWriter = new StreamWriter( markdownPath );
         await streamWriter.WriteAsync( htmlContent );
     }
 
diff --git a/docs/LumexUI.Docs/Components/Routes.razor b/docs/LumexUI.Docs/Components/Routes.razor
index bac7308b..3bc9881d 100644
--- a/docs/LumexUI.Docs/Components/Routes.razor
+++ b/docs/LumexUI.Docs/Components/Routes.razor
@@ -2,6 +2,5 @@
 <Router AppAssembly="typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }">
     <Found Context="routeData">
         <RouteView RouteData="@routeData" DefaultLayout="typeof(MainLayout)" />
-        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
     </Found>
 </Router>
diff --git a/docs/LumexUI.Docs/LumexUI.Docs.csproj b/docs/LumexUI.Docs/LumexUI.Docs.csproj
index 6b7ad587..07c4fddc 100644
--- a/docs/LumexUI.Docs/LumexUI.Docs.csproj
+++ b/docs/LumexUI.Docs/LumexUI.Docs.csproj
@@ -28,11 +28,11 @@
 	<Target Name="InstallTailwindCSS" AfterTargets="Build" Condition="!Exists('tailwindcss.exe')">
 		<PropertyGroup>
 			<!-- Tailwind standalone CLI for Windows -->
-			<TailwindURL Condition="'$(OS)' == 'Windows_NT'">https://github.com/tailwindlabs/tailwindcss/releases/download/v4.0.9/tailwindcss-windows-x64.exe</TailwindURL>
+			<TailwindURL Condition="'$(OS)' == 'Windows_NT'">https://github.com/tailwindlabs/tailwindcss/releases/download/v4.1.11/tailwindcss-windows-x64.exe</TailwindURL>
 			<TailwindFile Condition="'$(OS)' == 'Windows_NT'">tailwindcss-windows-x64.exe</TailwindFile>
 
 			<!-- Tailwind standalone CLI for Linux -->
-			<TailwindURL Condition="'$(OS)' != 'Windows_NT'">https://github.com/tailwindlabs/tailwindcss/releases/download/v4.0.9/tailwindcss-linux-x64</TailwindURL>
+			<TailwindURL Condition="'$(OS)' != 'Windows_NT'">https://github.com/tailwindlabs/tailwindcss/releases/download/v4.1.11/tailwindcss-linux-x64</TailwindURL>
 			<TailwindFile Condition="'$(OS)' != 'Windows_NT'">tailwindcss-linux-x64</TailwindFile>
 		</PropertyGroup>
 
diff --git a/docs/LumexUI.Docs/Styles/globals.css b/docs/LumexUI.Docs/Styles/globals.css
index 7567c751..352445d8 100644
--- a/docs/LumexUI.Docs/Styles/globals.css
+++ b/docs/LumexUI.Docs/Styles/globals.css
@@ -22,21 +22,7 @@
 @custom-variant scrollbar-thumb (&::-webkit-scrollbar-thumb);
 
 .dark {
-    color-scheme: dark;
-}
-
-.light {
-    color-scheme: light;
-}
-
-.scrollbar {
-    @apply 
-        scrollbar:h-2 
-        scrollbar:w-2 
-        scrollbar-thumb:rounded-sm
-        scrollbar-thumb:bg-foreground-200 
-        scrollbar-track:rounded-sm
-        scrollbar-track:bg-foreground-100;
+    --lumex-background: var(--color-zinc-950);
 }
 
 .bordered-link {
@@ -48,3 +34,7 @@
         border-current 
         hover:border-b-2;
 }
+
+@utility highlight-* {
+    box-shadow: inset 0 1px 0 0 --alpha(--value(--color- *, [color]) / --modifier(integer)%);
+}
diff --git a/docs/LumexUI.Docs/Styles/prism.css b/docs/LumexUI.Docs/Styles/prism.css
index 22943e4a..b5487a02 100644
--- a/docs/LumexUI.Docs/Styles/prism.css
+++ b/docs/LumexUI.Docs/Styles/prism.css
@@ -17,6 +17,10 @@
     @apply text-zinc-500;
 }
 
+.token.named-parameter {
+    @apply text-zinc-400;
+}
+
 .token.comment,
 .token.operator {
     @apply text-zinc-400;
@@ -46,3 +50,58 @@ pre[class^='language-diff-'] {
     pre[class^='language-diff-'] > code {
         @apply flex-none min-w-full;
     }
+
+.line-numbers .line-highlight:after, 
+.line-numbers .line-highlight:before {
+    content: none
+}
+
+pre[id].linkable-line-numbers span.line-numbers-rows {
+    pointer-events: all
+}
+
+    pre[id].linkable-line-numbers span.line-numbers-rows > span:before {
+        cursor: pointer
+    }
+
+    pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
+        background-color: rgba(128,128,128,.2)
+    }
+
+pre[class*=language-].line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber
+}
+
+    pre[class*=language-].line-numbers > code {
+        position: relative;
+        white-space: inherit
+    }
+
+.line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em;
+    letter-spacing: -1px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none
+}
+
+.line-numbers-rows > span {
+    display: block;
+    counter-increment: linenumber
+}
+
+    .line-numbers-rows > span:before {
+        content: counter(linenumber);
+        color: var(--color-zinc-500);
+        display: block;
+        padding-right: .8em;
+        text-align: right
+    }
diff --git a/docs/LumexUI.Docs/Styles/typography.css b/docs/LumexUI.Docs/Styles/typography.css
index e2400236..90481289 100644
--- a/docs/LumexUI.Docs/Styles/typography.css
+++ b/docs/LumexUI.Docs/Styles/typography.css
@@ -4,6 +4,10 @@
     max-width: none;
 }
 
+.prose-zinc {
+    --tw-prose-invert-pre-bg: var(--color-zinc-900);
+}
+
     .prose :is(h2, h3, h4):where(:not(.not-prose, .not-prose *)) {
         scroll-margin-top: var(--scroll-mt);
     }
@@ -31,6 +35,15 @@
         color: var(--color-zinc-100);
     }
 
+    .prose pre:where(:is(.line-numbers)) {
+        padding-block: 1.5em;
+        padding-inline: 3.8em 1.5em;
+    }
+
+    .prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+        border-radius: 0;
+    }
+
     .prose :where(code[class]):not(:where([class~=not-prose],[class~=not-prose] *)):before,
     .prose :where(code[class]):not(:where([class~=not-prose],[class~=not-prose] *)):after {
         content: none;
diff --git a/docs/LumexUI.Docs/wwwroot/js/docs.js b/docs/LumexUI.Docs/wwwroot/js/docs.js
index 4dd02f9c..c262167e 100644
--- a/docs/LumexUI.Docs/wwwroot/js/docs.js
+++ b/docs/LumexUI.Docs/wwwroot/js/docs.js
@@ -8,6 +8,12 @@
         }
 
         currentUrl = newUrl;
+
+        let currentTheme = localStorage.getItem('lumexui.theme');
+        if (currentTheme) {
+            document.documentElement.classList.remove('light', 'dark');
+            document.documentElement.classList.add(currentTheme);
+        }
     });
 };
 
diff --git a/docs/LumexUI.Docs/wwwroot/js/prism.js b/docs/LumexUI.Docs/wwwroot/js/prism.js
index 7beda3bd..f7994af8 100644
--- a/docs/LumexUI.Docs/wwwroot/js/prism.js
+++ b/docs/LumexUI.Docs/wwwroot/js/prism.js
@@ -1,14 +1,14 @@
-/* PrismJS 1.29.0
-https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+csharp+diff+powershell+cshtml&plugins=line-highlight+diff-highlight */
-var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(n,t){var r,i;switch(t=t||{},a.util.type(n)){case"Object":if(i=a.util.objId(n),t[i])return t[i];for(var l in r={},t[i]=r,n)n.hasOwnProperty(l)&&(r[l]=e(n[l],t));return r;case"Array":return i=a.util.objId(n),t[i]?t[i]:(r=[],t[i]=r,n.forEach((function(n,a){r[a]=e(n,t)})),r);default:return n}},getLanguage:function(e){for(;e;){var t=n.exec(e.className);if(t)return t[1].toLowerCase();e=e.parentElement}return"none"},setLanguage:function(e,t){e.className=e.className.replace(RegExp(n,"gi"),""),e.classList.add("language-"+t)},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(r){var e=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(r.stack)||[])[1];if(e){var n=document.getElementsByTagName("script");for(var t in n)if(n[t].src==e)return n[t]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:r,plaintext:r,text:r,txt:r,extend:function(e,n){var t=a.util.clone(a.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(e,n,t,r){var i=(r=r||a.languages)[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in t)t.hasOwnProperty(s)&&(l[s]=t[s]);t.hasOwnProperty(o)||(l[o]=i[o])}var u=r[e];return r[e]=l,a.languages.DFS(a.languages,(function(n,t){t===u&&n!=e&&(this[n]=l)})),l},DFS:function e(n,t,r,i){i=i||{};var l=a.util.objId;for(var o in n)if(n.hasOwnProperty(o)){t.call(n,o,n[o],r||o);var s=n[o],u=a.util.type(s);"Object"!==u||i[l(s)]?"Array"!==u||i[l(s)]||(i[l(s)]=!0,e(s,t,o,i)):(i[l(s)]=!0,e(s,t,null,i))}}},plugins:{},highlightAll:function(e,n){a.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};a.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),a.hooks.run("before-all-elements-highlight",r);for(var i,l=0;i=r.elements[l++];)a.highlightElement(i,!0===n,r.callback)},highlightElement:function(n,t,r){var i=a.util.getLanguage(n),l=a.languages[i];a.util.setLanguage(n,i);var o=n.parentElement;o&&"pre"===o.nodeName.toLowerCase()&&a.util.setLanguage(o,i);var s={element:n,language:i,grammar:l,code:n.textContent};function u(e){s.highlightedCode=e,a.hooks.run("before-insert",s),s.element.innerHTML=s.highlightedCode,a.hooks.run("after-highlight",s),a.hooks.run("complete",s),r&&r.call(s.element)}if(a.hooks.run("before-sanity-check",s),(o=s.element.parentElement)&&"pre"===o.nodeName.toLowerCase()&&!o.hasAttribute("tabindex")&&o.setAttribute("tabindex","0"),!s.code)return a.hooks.run("complete",s),void(r&&r.call(s.element));if(a.hooks.run("before-highlight",s),s.grammar)if(t&&e.Worker){var c=new Worker(a.filename);c.onmessage=function(e){u(e.data)},c.postMessage(JSON.stringify({language:s.language,code:s.code,immediateClose:!0}))}else u(a.highlight(s.code,s.grammar,s.language));else u(a.util.encode(s.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};if(a.hooks.run("before-tokenize",r),!r.grammar)throw new Error('The language "'+r.language+'" has no grammar.');return r.tokens=a.tokenize(r.code,r.grammar),a.hooks.run("after-tokenize",r),i.stringify(a.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new s;return u(a,a.head,e),o(e,a,n,a.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=a.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=a.hooks.all[e];if(t&&t.length)for(var r,i=0;r=t[i++];)r(n)}},Token:i};function i(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function l(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function o(e,n,t,r,s,g){for(var f in t)if(t.hasOwnProperty(f)&&t[f]){var h=t[f];h=Array.isArray(h)?h:[h];for(var d=0;d<h.length;++d){if(g&&g.cause==f+","+d)return;var v=h[d],p=v.inside,m=!!v.lookbehind,y=!!v.greedy,k=v.alias;if(y&&!v.pattern.global){var x=v.pattern.toString().match(/[imsuy]*$/)[0];v.pattern=RegExp(v.pattern.source,x+"g")}for(var b=v.pattern||v,w=r.next,A=s;w!==n.tail&&!(g&&A>=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(j<O||"string"==typeof C.value);C=C.next)L++,j+=C.value.length;L--,E=e.slice(A,j),P.index-=A}else if(!(P=l(b,0,E,m)))continue;S=P.index;var N=P[0],_=E.slice(0,S),M=E.slice(S+N.length),W=A+E.length;g&&W>g.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;n.next=r,r.prev=n,e.length-=a}if(e.Prism=a,i.stringify=function e(n,t){if("string"==typeof n)return n;if(Array.isArray(n)){var r="";return n.forEach((function(n){r+=e(n,t)})),r}var i={type:n.type,content:e(n.content,t),tag:"span",classes:["token",n.type],attributes:{},language:t},l=n.alias;l&&(Array.isArray(l)?Array.prototype.push.apply(i.classes,l):i.classes.push(l)),a.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=" "+s+'="'+(i.attributes[s]||"").replace(/"/g,"&quot;")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+o+">"+i.content+"</"+i.tag+">"},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
+/* PrismJS 1.30.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+bash+csharp+diff+powershell+cshtml&plugins=line-highlight+line-numbers+diff-highlight */
+var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(n,t){var r,i;switch(t=t||{},a.util.type(n)){case"Object":if(i=a.util.objId(n),t[i])return t[i];for(var l in r={},t[i]=r,n)n.hasOwnProperty(l)&&(r[l]=e(n[l],t));return r;case"Array":return i=a.util.objId(n),t[i]?t[i]:(r=[],t[i]=r,n.forEach((function(n,a){r[a]=e(n,t)})),r);default:return n}},getLanguage:function(e){for(;e;){var t=n.exec(e.className);if(t)return t[1].toLowerCase();e=e.parentElement}return"none"},setLanguage:function(e,t){e.className=e.className.replace(RegExp(n,"gi"),""),e.classList.add("language-"+t)},currentScript:function(){if("undefined"==typeof document)return null;if(document.currentScript&&"SCRIPT"===document.currentScript.tagName)return document.currentScript;try{throw new Error}catch(r){var e=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(r.stack)||[])[1];if(e){var n=document.getElementsByTagName("script");for(var t in n)if(n[t].src==e)return n[t]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:r,plaintext:r,text:r,txt:r,extend:function(e,n){var t=a.util.clone(a.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(e,n,t,r){var i=(r=r||a.languages)[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in t)t.hasOwnProperty(s)&&(l[s]=t[s]);t.hasOwnProperty(o)||(l[o]=i[o])}var u=r[e];return r[e]=l,a.languages.DFS(a.languages,(function(n,t){t===u&&n!=e&&(this[n]=l)})),l},DFS:function e(n,t,r,i){i=i||{};var l=a.util.objId;for(var o in n)if(n.hasOwnProperty(o)){t.call(n,o,n[o],r||o);var s=n[o],u=a.util.type(s);"Object"!==u||i[l(s)]?"Array"!==u||i[l(s)]||(i[l(s)]=!0,e(s,t,o,i)):(i[l(s)]=!0,e(s,t,null,i))}}},plugins:{},highlightAll:function(e,n){a.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};a.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),a.hooks.run("before-all-elements-highlight",r);for(var i,l=0;i=r.elements[l++];)a.highlightElement(i,!0===n,r.callback)},highlightElement:function(n,t,r){var i=a.util.getLanguage(n),l=a.languages[i];a.util.setLanguage(n,i);var o=n.parentElement;o&&"pre"===o.nodeName.toLowerCase()&&a.util.setLanguage(o,i);var s={element:n,language:i,grammar:l,code:n.textContent};function u(e){s.highlightedCode=e,a.hooks.run("before-insert",s),s.element.innerHTML=s.highlightedCode,a.hooks.run("after-highlight",s),a.hooks.run("complete",s),r&&r.call(s.element)}if(a.hooks.run("before-sanity-check",s),(o=s.element.parentElement)&&"pre"===o.nodeName.toLowerCase()&&!o.hasAttribute("tabindex")&&o.setAttribute("tabindex","0"),!s.code)return a.hooks.run("complete",s),void(r&&r.call(s.element));if(a.hooks.run("before-highlight",s),s.grammar)if(t&&e.Worker){var c=new Worker(a.filename);c.onmessage=function(e){u(e.data)},c.postMessage(JSON.stringify({language:s.language,code:s.code,immediateClose:!0}))}else u(a.highlight(s.code,s.grammar,s.language));else u(a.util.encode(s.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};if(a.hooks.run("before-tokenize",r),!r.grammar)throw new Error('The language "'+r.language+'" has no grammar.');return r.tokens=a.tokenize(r.code,r.grammar),a.hooks.run("after-tokenize",r),i.stringify(a.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new s;return u(a,a.head,e),o(e,a,n,a.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=a.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=a.hooks.all[e];if(t&&t.length)for(var r,i=0;r=t[i++];)r(n)}},Token:i};function i(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function l(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function o(e,n,t,r,s,g){for(var f in t)if(t.hasOwnProperty(f)&&t[f]){var h=t[f];h=Array.isArray(h)?h:[h];for(var d=0;d<h.length;++d){if(g&&g.cause==f+","+d)return;var v=h[d],p=v.inside,m=!!v.lookbehind,y=!!v.greedy,k=v.alias;if(y&&!v.pattern.global){var x=v.pattern.toString().match(/[imsuy]*$/)[0];v.pattern=RegExp(v.pattern.source,x+"g")}for(var b=v.pattern||v,w=r.next,A=s;w!==n.tail&&!(g&&A>=g.reach);A+=w.value.length,w=w.next){var P=w.value;if(n.length>e.length)return;if(!(P instanceof i)){var E,S=1;if(y){if(!(E=l(b,A,e,m))||E.index>=e.length)break;var L=E.index,O=E.index+E[0].length,C=A;for(C+=w.value.length;L>=C;)C+=(w=w.next).value.length;if(A=C-=w.value.length,w.value instanceof i)continue;for(var j=w;j!==n.tail&&(C<O||"string"==typeof j.value);j=j.next)S++,C+=j.value.length;S--,P=e.slice(A,C),E.index-=A}else if(!(E=l(b,0,P,m)))continue;L=E.index;var N=E[0],_=P.slice(0,L),M=P.slice(L+N.length),W=A+P.length;g&&W>g.reach&&(g.reach=W);var I=w.prev;if(_&&(I=u(n,I,_),A+=_.length),c(n,I,S),w=u(n,I,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),S>1){var T={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,T),g&&T.reach>g.reach&&(g.reach=T.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;n.next=r,r.prev=n,e.length-=a}if(e.Prism=a,i.stringify=function e(n,t){if("string"==typeof n)return n;if(Array.isArray(n)){var r="";return n.forEach((function(n){r+=e(n,t)})),r}var i={type:n.type,content:e(n.content,t),tag:"span",classes:["token",n.type],attributes:{},language:t},l=n.alias;l&&(Array.isArray(l)?Array.prototype.push.apply(i.classes,l):i.classes.push(l)),a.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=" "+s+'="'+(i.attributes[s]||"").replace(/"/g,"&quot;")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+o+">"+i.content+"</"+i.tag+">"},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
 Prism.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var t={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
 !function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|"+e.source+")*?(?:;|(?=\\s*\\{))"),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism);
 Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
-Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;
 !function(e){var t="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",a={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:!0,alias:"punctuation",inside:null},n={bash:a,environment:{pattern:RegExp("\\$"+t),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?:\.\w+)*(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},parameter:{pattern:/(^|\s)-{1,2}(?:\w+:[+-]?)?\w+(?:\.\w+)*(?=[=\s]|$)/,alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:n},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:a}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:n},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:n.entity}}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:n.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cargo|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|java|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|sysctl|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},a.inside=e.languages.bash;for(var s=["comment","function-name","for-or-select","assign-left","parameter","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],o=n.variable[1].inside,i=0;i<s.length;i++)o[s[i]]=e.languages.bash[s[i]];e.languages.sh=e.languages.bash,e.languages.shell=e.languages.bash}(Prism);
 !function(e){function n(e,n){return e.replace(/<<(\d+)>>/g,(function(e,s){return"(?:"+n[+s]+")"}))}function s(e,s,a){return RegExp(n(e,s),a||"")}function a(e,n){for(var s=0;s<n;s++)e=e.replace(/<<self>>/g,(function(){return"(?:"+e+")"}));return e.replace(/<<self>>/g,"[^\\s\\S]")}var t="bool byte char decimal double dynamic float int long object sbyte short string uint ulong ushort var void",r="class enum interface record struct",i="add alias and ascending async await by descending from(?=\\s*(?:\\w|$)) get global group into init(?=\\s*;) join let nameof not notnull on or orderby partial remove select set unmanaged value when where with(?=\\s*{)",o="abstract as base break case catch checked const continue default delegate do else event explicit extern finally fixed for foreach goto if implicit in internal is lock namespace new null operator out override params private protected public readonly ref return sealed sizeof stackalloc static switch this throw try typeof unchecked unsafe using virtual volatile while yield";function l(e){return"\\b(?:"+e.trim().replace(/ /g,"|")+")\\b"}var d=l(r),p=RegExp(l(t+" "+r+" "+i+" "+o)),c=l(r+" "+i+" "+o),u=l(t+" "+r+" "+o),g=a("<(?:[^<>;=+\\-*/%&|^]|<<self>>)*>",2),b=a("\\((?:[^()]|<<self>>)*\\)",2),h="@?\\b[A-Za-z_]\\w*\\b",f=n("<<0>>(?:\\s*<<1>>)?",[h,g]),m=n("(?!<<0>>)<<1>>(?:\\s*\\.\\s*<<1>>)*",[c,f]),k="\\[\\s*(?:,\\s*)*\\]",y=n("<<0>>(?:\\s*(?:\\?\\s*)?<<1>>)*(?:\\s*\\?)?",[m,k]),w=n("[^,()<>[\\];=+\\-*/%&|^]|<<0>>|<<1>>|<<2>>",[g,b,k]),v=n("\\(<<0>>+(?:,<<0>>+)+\\)",[w]),x=n("(?:<<0>>|<<1>>)(?:\\s*(?:\\?\\s*)?<<2>>)*(?:\\s*\\?)?",[v,m,k]),$={keyword:p,punctuation:/[<>()?,.:[\]]/},_="'(?:[^\r\n'\\\\]|\\\\.|\\\\[Uux][\\da-fA-F]{1,8})'",B='"(?:\\\\.|[^\\\\"\r\n])*"';e.languages.csharp=e.languages.extend("clike",{string:[{pattern:s("(^|[^$\\\\])<<0>>",['@"(?:""|\\\\[^]|[^\\\\"])*"(?!")']),lookbehind:!0,greedy:!0},{pattern:s("(^|[^@$\\\\])<<0>>",[B]),lookbehind:!0,greedy:!0}],"class-name":[{pattern:s("(\\busing\\s+static\\s+)<<0>>(?=\\s*;)",[m]),lookbehind:!0,inside:$},{pattern:s("(\\busing\\s+<<0>>\\s*=\\s*)<<1>>(?=\\s*;)",[h,x]),lookbehind:!0,inside:$},{pattern:s("(\\busing\\s+)<<0>>(?=\\s*=)",[h]),lookbehind:!0},{pattern:s("(\\b<<0>>\\s+)<<1>>",[d,f]),lookbehind:!0,inside:$},{pattern:s("(\\bcatch\\s*\\(\\s*)<<0>>",[m]),lookbehind:!0,inside:$},{pattern:s("(\\bwhere\\s+)<<0>>",[h]),lookbehind:!0},{pattern:s("(\\b(?:is(?:\\s+not)?|as)\\s+)<<0>>",[y]),lookbehind:!0,inside:$},{pattern:s("\\b<<0>>(?=\\s+(?!<<1>>|with\\s*\\{)<<2>>(?:\\s*[=,;:{)\\]]|\\s+(?:in|when)\\b))",[x,u,h]),inside:$}],keyword:p,number:/(?:\b0(?:x[\da-f_]*[\da-f]|b[01_]*[01])|(?:\B\.\d+(?:_+\d+)*|\b\d+(?:_+\d+)*(?:\.\d+(?:_+\d+)*)?)(?:e[-+]?\d+(?:_+\d+)*)?)(?:[dflmu]|lu|ul)?\b/i,operator:/>>=?|<<=?|[-=]>|([-+&|])\1|~|\?\?=?|[-+*/%&|^!=<>]=?/,punctuation:/\?\.?|::|[{}[\];(),.:]/}),e.languages.insertBefore("csharp","number",{range:{pattern:/\.\./,alias:"operator"}}),e.languages.insertBefore("csharp","punctuation",{"named-parameter":{pattern:s("([(,]\\s*)<<0>>(?=\\s*:)",[h]),lookbehind:!0,alias:"punctuation"}}),e.languages.insertBefore("csharp","class-name",{namespace:{pattern:s("(\\b(?:namespace|using)\\s+)<<0>>(?:\\s*\\.\\s*<<0>>)*(?=\\s*[;{])",[h]),lookbehind:!0,inside:{punctuation:/\./}},"type-expression":{pattern:s("(\\b(?:default|sizeof|typeof)\\s*\\(\\s*(?!\\s))(?:[^()\\s]|\\s(?!\\s)|<<0>>)*(?=\\s*\\))",[b]),lookbehind:!0,alias:"class-name",inside:$},"return-type":{pattern:s("<<0>>(?=\\s+(?:<<1>>\\s*(?:=>|[({]|\\.\\s*this\\s*\\[)|this\\s*\\[))",[x,m]),inside:$,alias:"class-name"},"constructor-invocation":{pattern:s("(\\bnew\\s+)<<0>>(?=\\s*[[({])",[x]),lookbehind:!0,inside:$,alias:"class-name"},"generic-method":{pattern:s("<<0>>\\s*<<1>>(?=\\s*\\()",[h,g]),inside:{function:s("^<<0>>",[h]),generic:{pattern:RegExp(g),alias:"class-name",inside:$}}},"type-list":{pattern:s("\\b((?:<<0>>\\s+<<1>>|record\\s+<<1>>\\s*<<5>>|where\\s+<<2>>)\\s*:\\s*)(?:<<3>>|<<4>>|<<1>>\\s*<<5>>|<<6>>)(?:\\s*,\\s*(?:<<3>>|<<4>>|<<6>>))*(?=\\s*(?:where|[{;]|=>|$))",[d,f,h,x,p.source,b,"\\bnew\\s*\\(\\s*\\)"]),lookbehind:!0,inside:{"record-arguments":{pattern:s("(^(?!new\\s*\\()<<0>>\\s*)<<1>>",[f,b]),lookbehind:!0,greedy:!0,inside:e.languages.csharp},keyword:p,"class-name":{pattern:RegExp(x),greedy:!0,inside:$},punctuation:/[,()]/}},preprocessor:{pattern:/(^[\t ]*)#.*/m,lookbehind:!0,alias:"property",inside:{directive:{pattern:/(#)\b(?:define|elif|else|endif|endregion|error|if|line|nullable|pragma|region|undef|warning)\b/,lookbehind:!0,alias:"keyword"}}}});var E=B+"|"+_,R=n("/(?![*/])|//[^\r\n]*[\r\n]|/\\*(?:[^*]|\\*(?!/))*\\*/|<<0>>",[E]),z=a(n("[^\"'/()]|<<0>>|\\(<<self>>*\\)",[R]),2),S="\\b(?:assembly|event|field|method|module|param|property|return|type)\\b",j=n("<<0>>(?:\\s*\\(<<1>>*\\))?",[m,z]);e.languages.insertBefore("csharp","class-name",{attribute:{pattern:s("((?:^|[^\\s\\w>)?])\\s*\\[\\s*)(?:<<0>>\\s*:\\s*)?<<1>>(?:\\s*,\\s*<<1>>)*(?=\\s*\\])",[S,j]),lookbehind:!0,greedy:!0,inside:{target:{pattern:s("^<<0>>(?=\\s*:)",[S]),alias:"keyword"},"attribute-arguments":{pattern:s("\\(<<0>>*\\)",[z]),inside:e.languages.csharp},"class-name":{pattern:RegExp(m),inside:{punctuation:/\./}},punctuation:/[:,]/}}});var A=":[^}\r\n]+",F=a(n("[^\"'/()]|<<0>>|\\(<<self>>*\\)",[R]),2),P=n("\\{(?!\\{)(?:(?![}:])<<0>>)*<<1>>?\\}",[F,A]),U=a(n("[^\"'/()]|/(?!\\*)|/\\*(?:[^*]|\\*(?!/))*\\*/|<<0>>|\\(<<self>>*\\)",[E]),2),Z=n("\\{(?!\\{)(?:(?![}:])<<0>>)*<<1>>?\\}",[U,A]);function q(n,a){return{interpolation:{pattern:s("((?:^|[^{])(?:\\{\\{)*)<<0>>",[n]),lookbehind:!0,inside:{"format-string":{pattern:s("(^\\{(?:(?![}:])<<0>>)*)<<1>>(?=\\}$)",[a,A]),lookbehind:!0,inside:{punctuation:/^:/}},punctuation:/^\{|\}$/,expression:{pattern:/[\s\S]+/,alias:"language-csharp",inside:e.languages.csharp}}},string:/[\s\S]+/}}e.languages.insertBefore("csharp","string",{"interpolation-string":[{pattern:s('(^|[^\\\\])(?:\\$@|@\\$)"(?:""|\\\\[^]|\\{\\{|<<0>>|[^\\\\{"])*"',[P]),lookbehind:!0,greedy:!0,inside:q(P,F)},{pattern:s('(^|[^@\\\\])\\$"(?:\\\\.|\\{\\{|<<0>>|[^\\\\"{])*"',[Z]),lookbehind:!0,greedy:!0,inside:q(Z,U)}],char:{pattern:RegExp(_),greedy:!0}}),e.languages.dotnet=e.languages.cs=e.languages.csharp}(Prism);
 !function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var n={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(n).forEach((function(a){var i=n[a],r=[];/^\w+$/.test(a)||r.push(/\w+/.exec(a)[0]),"diff"===a&&r.push("bold"),e.languages.diff[a]={pattern:RegExp("^(?:["+i+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:r,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(a)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:n})}(Prism);
 !function(e){var i=e.languages.powershell={comment:[{pattern:/(^|[^`])<#[\s\S]*?#>/,lookbehind:!0},{pattern:/(^|[^`])#.*/,lookbehind:!0}],string:[{pattern:/"(?:`[\s\S]|[^`"])*"/,greedy:!0,inside:null},{pattern:/'(?:[^']|'')*'/,greedy:!0}],namespace:/\[[a-z](?:\[(?:\[[^\]]*\]|[^\[\]])*\]|[^\[\]])*\]/i,boolean:/\$(?:false|true)\b/i,variable:/\$\w+\b/,function:[/\b(?:Add|Approve|Assert|Backup|Block|Checkpoint|Clear|Close|Compare|Complete|Compress|Confirm|Connect|Convert|ConvertFrom|ConvertTo|Copy|Debug|Deny|Disable|Disconnect|Dismount|Edit|Enable|Enter|Exit|Expand|Export|Find|ForEach|Format|Get|Grant|Group|Hide|Import|Initialize|Install|Invoke|Join|Limit|Lock|Measure|Merge|Move|New|Open|Optimize|Out|Ping|Pop|Protect|Publish|Push|Read|Receive|Redo|Register|Remove|Rename|Repair|Request|Reset|Resize|Resolve|Restart|Restore|Resume|Revoke|Save|Search|Select|Send|Set|Show|Skip|Sort|Split|Start|Step|Stop|Submit|Suspend|Switch|Sync|Tee|Test|Trace|Unblock|Undo|Uninstall|Unlock|Unprotect|Unpublish|Unregister|Update|Use|Wait|Watch|Where|Write)-[a-z]+\b/i,/\b(?:ac|cat|chdir|clc|cli|clp|clv|compare|copy|cp|cpi|cpp|cvpa|dbp|del|diff|dir|ebp|echo|epal|epcsv|epsn|erase|fc|fl|ft|fw|gal|gbp|gc|gci|gcs|gdr|gi|gl|gm|gp|gps|group|gsv|gu|gv|gwmi|iex|ii|ipal|ipcsv|ipsn|irm|iwmi|iwr|kill|lp|ls|measure|mi|mount|move|mp|mv|nal|ndr|ni|nv|ogv|popd|ps|pushd|pwd|rbp|rd|rdr|ren|ri|rm|rmdir|rni|rnp|rp|rv|rvpa|rwmi|sal|saps|sasv|sbp|sc|select|set|shcm|si|sl|sleep|sls|sort|sp|spps|spsv|start|sv|swmi|tee|trcm|type|write)\b/i],keyword:/\b(?:Begin|Break|Catch|Class|Continue|Data|Define|Do|DynamicParam|Else|ElseIf|End|Exit|Filter|Finally|For|ForEach|From|Function|If|InlineScript|Parallel|Param|Process|Return|Sequence|Switch|Throw|Trap|Try|Until|Using|Var|While|Workflow)\b/i,operator:{pattern:/(^|\W)(?:!|-(?:b?(?:and|x?or)|as|(?:Not)?(?:Contains|In|Like|Match)|eq|ge|gt|is(?:Not)?|Join|le|lt|ne|not|Replace|sh[lr])\b|-[-=]?|\+[+=]?|[*\/%]=?)/i,lookbehind:!0},punctuation:/[|{}[\];(),.]/};i.string[0].inside={function:{pattern:/(^|[^`])\$\((?:\$\([^\r\n()]*\)|(?!\$\()[^\r\n)])*\)/,lookbehind:!0,inside:i},boolean:i.boolean,variable:i.variable}}(Prism);
 !function(e){function s(e,s){for(var a=0;a<s;a++)e=e.replace(/<self>/g,(function(){return"(?:"+e+")"}));return e.replace(/<self>/g,"[^\\s\\S]").replace(/<str>/g,'(?:@(?!")|"(?:[^\r\n\\\\"]|\\\\.)*"|@"(?:[^\\\\"]|""|\\\\[^])*"(?!")|\'(?:(?:[^\r\n\'\\\\]|\\\\.|\\\\[Uux][\\da-fA-F]{1,8})\'|(?=[^\\\\](?!\'))))').replace(/<comment>/g,"(?:/(?![/*])|//.*[\r\n]|/\\*[^*]*(?:\\*(?!/)[^*]*)*\\*/)")}var a=s("\\((?:[^()'\"@/]|<str>|<comment>|<self>)*\\)",2),t=s("\\[(?:[^\\[\\]'\"@/]|<str>|<comment>|<self>)*\\]",1),r=s("\\{(?:[^{}'\"@/]|<str>|<comment>|<self>)*\\}",2),n="@(?:await\\b\\s*)?(?:(?!await\\b)\\w+\\b|"+a+")(?:[?!]?\\.\\w+\\b|(?:"+s("<(?:[^<>'\"@/]|<comment>|<self>)*>",1)+")?"+a+"|"+t+")*(?![?!\\.(\\[]|<(?!/))",l="(?:\"[^\"@]*\"|'[^'@]*'|[^\\s'\"@>=]+(?=[\\s>])|[\"'][^\"'@]*(?:(?:@(?![\\w()])|"+n+")[^\"'@]*)+[\"'])",i="(?:\\s(?:\\s*[^\\s>/=]+(?:\\s*=\\s*<tagAttrValue>|(?=[\\s/>])))+)?".replace(/<tagAttrValue>/,l),g="(?!\\d)[^\\s>/=$<%]+"+i+"\\s*/?>",o="\\B@?(?:<([a-zA-Z][\\w:]*)"+i+"\\s*>(?:[^<]|</?(?!\\1\\b)"+g+"|"+s("<\\1"+i+"\\s*>(?:[^<]|</?(?!\\1\\b)"+g+"|<self>)*</\\1\\s*>",2)+")*</\\1\\s*>|<"+g+")";e.languages.cshtml=e.languages.extend("markup",{});var c={pattern:/\S[\s\S]*/,alias:"language-csharp",inside:e.languages.insertBefore("csharp","string",{html:{pattern:RegExp(o),greedy:!0,inside:e.languages.cshtml}},{csharp:e.languages.extend("csharp",{})})},p={pattern:RegExp("(^|[^@])"+n),lookbehind:!0,greedy:!0,alias:"variable",inside:{keyword:/^@/,csharp:c}};e.languages.cshtml.tag.pattern=RegExp("</?"+g),e.languages.cshtml.tag.inside["attr-value"].pattern=RegExp("=\\s*"+l),e.languages.insertBefore("inside","punctuation",{value:p},e.languages.cshtml.tag.inside["attr-value"]),e.languages.insertBefore("cshtml","prolog",{"razor-comment":{pattern:/@\*[\s\S]*?\*@/,greedy:!0,alias:"comment"},block:{pattern:RegExp("(^|[^@])@(?:"+[r,"(?:code|functions)\\s*"+r,"(?:for|foreach|lock|switch|using|while)\\s*"+a+"\\s*"+r,"do\\s*"+r+"\\s*while\\s*"+a+"(?:\\s*;)?","try\\s*"+r+"\\s*catch\\s*"+a+"\\s*"+r+"\\s*finally\\s*"+r,"if\\s*"+a+"\\s*"+r+"(?:\\s*else(?:\\s+if\\s*"+a+")?\\s*"+r+")*","helper\\s+\\w+\\s*"+a+"\\s*"+r].join("|")+")"),lookbehind:!0,greedy:!0,inside:{keyword:/^@\w*/,csharp:c}},directive:{pattern:/^([ \t]*)@(?:addTagHelper|attribute|implements|inherits|inject|layout|model|namespace|page|preservewhitespace|removeTagHelper|section|tagHelperPrefix|using)(?=\s).*/m,lookbehind:!0,greedy:!0,inside:{keyword:/^@\w+/,csharp:c}},value:p,"delegate-operator":{pattern:/(^|[^@])@(?=<)/,lookbehind:!0,alias:"operator"}}),e.languages.razor=e.languages.cshtml}(Prism);
 !function(){if("undefined"!=typeof Prism&&"undefined"!=typeof document&&document.querySelector){var e,t="line-numbers",i="linkable-line-numbers",n=/\n(?!$)/g,r=!0;Prism.plugins.lineHighlight={highlightLines:function(o,u,c){var h=(u="string"==typeof u?u:o.getAttribute("data-line")||"").replace(/\s+/g,"").split(",").filter(Boolean),d=+o.getAttribute("data-line-offset")||0,f=(function(){if(void 0===e){var t=document.createElement("div");t.style.fontSize="13px",t.style.lineHeight="1.5",t.style.padding="0",t.style.border="0",t.innerHTML="&nbsp;<br />&nbsp;",document.body.appendChild(t),e=38===t.offsetHeight,document.body.removeChild(t)}return e}()?parseInt:parseFloat)(getComputedStyle(o).lineHeight),p=Prism.util.isActive(o,t),g=o.querySelector("code"),m=p?o:g||o,v=[],y=g.textContent.match(n),b=y?y.length+1:1,A=g&&m!=g?function(e,t){var i=getComputedStyle(e),n=getComputedStyle(t);function r(e){return+e.substr(0,e.length-2)}return t.offsetTop+r(n.borderTopWidth)+r(n.paddingTop)-r(i.paddingTop)}(o,g):0;h.forEach((function(e){var t=e.split("-"),i=+t[0],n=+t[1]||i;if(!((n=Math.min(b+d,n))<i)){var r=o.querySelector('.line-highlight[data-range="'+e+'"]')||document.createElement("div");if(v.push((function(){r.setAttribute("aria-hidden","true"),r.setAttribute("data-range",e),r.className=(c||"")+" line-highlight"})),p&&Prism.plugins.lineNumbers){var s=Prism.plugins.lineNumbers.getLine(o,i),l=Prism.plugins.lineNumbers.getLine(o,n);if(s){var a=s.offsetTop+A+"px";v.push((function(){r.style.top=a}))}if(l){var u=l.offsetTop-s.offsetTop+l.offsetHeight+"px";v.push((function(){r.style.height=u}))}}else v.push((function(){r.setAttribute("data-start",String(i)),n>i&&r.setAttribute("data-end",String(n)),r.style.top=(i-d-1)*f+A+"px",r.textContent=new Array(n-i+2).join(" \n")}));v.push((function(){r.style.width=o.scrollWidth+"px"})),v.push((function(){m.appendChild(r)}))}}));var P=o.id;if(p&&Prism.util.isActive(o,i)&&P){l(o,i)||v.push((function(){o.classList.add(i)}));var E=parseInt(o.getAttribute("data-start")||"1");s(".line-numbers-rows > span",o).forEach((function(e,t){var i=t+E;e.onclick=function(){var e=P+"."+i;r=!1,location.hash=e,setTimeout((function(){r=!0}),1)}}))}return function(){v.forEach(a)}}};var o=0;Prism.hooks.add("before-sanity-check",(function(e){var t=e.element.parentElement;if(u(t)){var i=0;s(".line-highlight",t).forEach((function(e){i+=e.textContent.length,e.parentNode.removeChild(e)})),i&&/^(?: \n)+$/.test(e.code.slice(-i))&&(e.code=e.code.slice(0,-i))}})),Prism.hooks.add("complete",(function e(i){var n=i.element.parentElement;if(u(n)){clearTimeout(o);var r=Prism.plugins.lineNumbers,s=i.plugins&&i.plugins.lineNumbers;l(n,t)&&r&&!s?Prism.hooks.add("line-numbers",e):(Prism.plugins.lineHighlight.highlightLines(n)(),o=setTimeout(c,1))}})),window.addEventListener("hashchange",c),window.addEventListener("resize",(function(){s("pre").filter(u).map((function(e){return Prism.plugins.lineHighlight.highlightLines(e)})).forEach(a)}))}function s(e,t){return Array.prototype.slice.call((t||document).querySelectorAll(e))}function l(e,t){return e.classList.contains(t)}function a(e){e()}function u(e){return!!(e&&/pre/i.test(e.nodeName)&&(e.hasAttribute("data-line")||e.id&&Prism.util.isActive(e,i)))}function c(){var e=location.hash.slice(1);s(".temporary.line-highlight").forEach((function(e){e.parentNode.removeChild(e)}));var t=(e.match(/\.([\d,-]+)$/)||[,""])[1];if(t&&!document.getElementById(e)){var i=e.slice(0,e.lastIndexOf(".")),n=document.getElementById(i);n&&(n.hasAttribute("data-line")||n.setAttribute("data-line",""),Prism.plugins.lineHighlight.highlightLines(n,t,"temporary ")(),r&&document.querySelector(".temporary.line-highlight").scrollIntoView())}}}();
+!function(){if("undefined"!=typeof Prism&&"undefined"!=typeof document){var e="line-numbers",n=/\n(?!$)/g,t=Prism.plugins.lineNumbers={getLine:function(n,t){if("PRE"===n.tagName&&n.classList.contains(e)){var i=n.querySelector(".line-numbers-rows");if(i){var r=parseInt(n.getAttribute("data-start"),10)||1,s=r+(i.children.length-1);t<r&&(t=r),t>s&&(t=s);var l=t-r;return i.children[l]}}},resize:function(e){r([e])},assumeViewportIndependence:!0},i=void 0;window.addEventListener("resize",(function(){t.assumeViewportIndependence&&i===window.innerWidth||(i=window.innerWidth,r(Array.prototype.slice.call(document.querySelectorAll("pre.line-numbers"))))})),Prism.hooks.add("complete",(function(t){if(t.code){var i=t.element,s=i.parentNode;if(s&&/pre/i.test(s.nodeName)&&!i.querySelector(".line-numbers-rows")&&Prism.util.isActive(i,e)){i.classList.remove(e),s.classList.add(e);var l,o=t.code.match(n),a=o?o.length+1:1,u=new Array(a+1).join("<span></span>");(l=document.createElement("span")).setAttribute("aria-hidden","true"),l.className="line-numbers-rows",l.innerHTML=u,s.hasAttribute("data-start")&&(s.style.counterReset="linenumber "+(parseInt(s.getAttribute("data-start"),10)-1)),t.element.appendChild(l),r([s]),Prism.hooks.run("line-numbers",t)}}})),Prism.hooks.add("line-numbers",(function(e){e.plugins=e.plugins||{},e.plugins.lineNumbers=!0}))}function r(e){if(0!=(e=e.filter((function(e){var n,t=(n=e,n?window.getComputedStyle?getComputedStyle(n):n.currentStyle||null:null)["white-space"];return"pre-wrap"===t||"pre-line"===t}))).length){var t=e.map((function(e){var t=e.querySelector("code"),i=e.querySelector(".line-numbers-rows");if(t&&i){var r=e.querySelector(".line-numbers-sizer"),s=t.textContent.split(n);r||((r=document.createElement("span")).className="line-numbers-sizer",t.appendChild(r)),r.innerHTML="0",r.style.display="block";var l=r.getBoundingClientRect().height;return r.innerHTML="",{element:e,lines:s,lineHeights:[],oneLinerHeight:l,sizer:r}}})).filter(Boolean);t.forEach((function(e){var n=e.sizer,t=e.lines,i=e.lineHeights,r=e.oneLinerHeight;i[t.length-1]=void 0,t.forEach((function(e,t){if(e&&e.length>1){var s=n.appendChild(document.createElement("span"));s.style.display="block",s.textContent=e}else i[t]=r}))})),t.forEach((function(e){for(var n=e.sizer,t=e.lineHeights,i=0,r=0;r<t.length;r++)void 0===t[r]&&(t[r]=n.children[i++].getBoundingClientRect().height)})),t.forEach((function(e){var n=e.sizer,t=e.element.querySelector(".line-numbers-rows");n.style.display="none",n.innerHTML="",e.lineHeights.forEach((function(e,n){t.children[n].style.height=e+"px"}))}))}}}();
 !function(){if("undefined"!=typeof Prism){var e=/^diff-([\w-]+)/i,i=/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/g,a=RegExp("(?:__|[^\r\n<])*(?:\r\n?|\n|(?:__|[^\r\n<])(?![^\r\n]))".replace(/__/g,(function(){return i.source})),"gi"),s=!1;Prism.hooks.add("before-sanity-check",(function(i){var a=i.language;e.test(a)&&!i.grammar&&(i.grammar=Prism.languages[a]=Prism.languages.diff)})),Prism.hooks.add("before-tokenize",(function(i){s||Prism.languages.diff||Prism.plugins.autoloader||(s=!0,console.warn("Prism's Diff Highlight plugin requires the Diff language definition (prism-diff.js).Make sure the language definition is loaded or use Prism's Autoloader plugin."));var a=i.language;e.test(a)&&!Prism.languages[a]&&(Prism.languages[a]=Prism.languages.diff)})),Prism.hooks.add("wrap",(function(s){var r,n;if("diff"!==s.language){var g=e.exec(s.language);if(!g)return;r=g[1],n=Prism.languages[r]}var f=Prism.languages.diff&&Prism.languages.diff.PREFIXES;if(f&&s.type in f){var u,l=s.content.replace(i,"").replace(/&lt;/g,"<").replace(/&amp;/g,"&"),t=l.replace(/(^|[\r\n])./g,"$1");u=n?Prism.highlight(t,n,r):Prism.util.encode(t);var o,m=new Prism.Token("prefix",f[s.type],[/\w+/.exec(s.type)[0]]),d=Prism.Token.stringify(m,s.language),c=[];for(a.lastIndex=0;o=a.exec(u);)c.push(d+o[0]);/(?:^|[\r\n]).$/.test(l)&&c.push(d),s.content=c.join(""),n&&s.classes.push("language-"+r)}}))}}();
diff --git a/src/LumexUI.Shared.Icons/CodeXmlIcon.razor b/src/LumexUI.Shared.Icons/CodeXmlIcon.razor
new file mode 100644
index 00000000..55dd3ec3
--- /dev/null
+++ b/src/LumexUI.Shared.Icons/CodeXmlIcon.razor
@@ -0,0 +1,17 @@
+@inherits IconBase
+
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="@Width"
+     height="@Height"
+     viewBox="0 0 24 24"
+     focusable="false"
+     fill="none"
+     stroke="currentColor"
+     stroke-width="@StrokeWidth"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     @attributes="@AdditionalAttributes">
+    <path d="m18 16 4-4-4-4" />
+    <path d="m6 8-4 4 4 4" />
+    <path d="m14.5 4-5 16" />
+</svg>
\ No newline at end of file
diff --git a/src/LumexUI.Shared.Icons/DynamicIcon.cs b/src/LumexUI.Shared.Icons/DynamicIcon.cs
index 772db8c7..d2d56272 100644
--- a/src/LumexUI.Shared.Icons/DynamicIcon.cs
+++ b/src/LumexUI.Shared.Icons/DynamicIcon.cs
@@ -9,11 +9,9 @@ public class DynamicIcon : IComponent
 
 	[Parameter] public string Size { get; set; } = "24";
 
-	[Parameter( CaptureUnmatchedValues = true )]
-	public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }
-
 	private RenderHandle _renderHandle;
 	private readonly RenderFragment _render;
+	private readonly Dictionary<string, object> _attributes = [];
 
 	public DynamicIcon()
 	{
@@ -39,6 +37,10 @@ public Task SetParametersAsync( ParameterView parameters )
 			{
 				Size = (string)entry.Value;
 			}
+			else
+			{
+				_attributes.TryAdd( entry.Name, entry.Value );
+			}
 		}
 
 		if( Type is null )
@@ -54,7 +56,7 @@ void Render( RenderTreeBuilder builder )
 	{
 		builder.OpenComponent( 0, Type );
 		builder.AddComponentParameter( 1, nameof( Size ), Size );
-		builder.AddMultipleAttributes( 2, AdditionalAttributes );
+		builder.AddMultipleAttributes( 2, _attributes );
 		builder.CloseComponent();
 	}
 }
diff --git a/src/LumexUI/Components/Tabs/LumexTabs.razor b/src/LumexUI/Components/Tabs/LumexTabs.razor
index f2511541..0752cfcb 100644
--- a/src/LumexUI/Components/Tabs/LumexTabs.razor
+++ b/src/LumexUI/Components/Tabs/LumexTabs.razor
@@ -29,12 +29,12 @@
 </CascadingValue>
 
 @code {
-    private void RenderTabs(RenderTreeBuilder __builder)
+    private void RenderTabs( RenderTreeBuilder __builder )
     {
         <LayoutGroup Id="@_layoutGroupId">
-            @foreach (var (id, tab) in _context.Tabs)
+            @foreach( var (id, tab) in _context.Tabs )
             {
-                tab.Render(__builder2);
+                tab.Render( __builder2 );
             }
         </LayoutGroup>
     }
diff --git a/src/LumexUI/Components/Tabs/TabPanel.razor b/src/LumexUI/Components/Tabs/TabPanel.razor
index b6bb8a37..f0c069d6 100644
--- a/src/LumexUI/Components/Tabs/TabPanel.razor
+++ b/src/LumexUI/Components/Tabs/TabPanel.razor
@@ -1,8 +1,11 @@
 @namespace LumexUI.Internal
 @inherits LumexComponentBase
 
-<LumexComponent As="@As"
-                Class="@Slots.TabPanel"
-                data-slot="tab-panel">
-    @SelectedTab?.ChildContent
-</LumexComponent>
+@if( SelectedTab?.ChildContent is not null )
+{
+    <LumexComponent As="@As"
+                    Class="@Slots.TabPanel"
+                    data-slot="tab-panel">
+        @SelectedTab?.ChildContent
+    </LumexComponent>
+}
diff --git a/src/LumexUI/Styles/Badge.cs b/src/LumexUI/Styles/Badge.cs
index c12f45b2..1d0d18de 100644
--- a/src/LumexUI/Styles/Badge.cs
+++ b/src/LumexUI/Styles/Badge.cs
@@ -265,7 +265,7 @@ public static ComponentVariant Style( TwMerge twMerge )
 					},
 					Classes = new SlotCollection()
 					{
-						[nameof( BadgeSlots.Badge )] = ColorVariants.Flat[ThemeColor.Default]
+						[nameof( BadgeSlots.Badge )] = "bg-default-300/80 text-default-700 dark:bg-default/40"
 					}
 				},
 				new CompoundVariant()
@@ -277,7 +277,7 @@ public static ComponentVariant Style( TwMerge twMerge )
 					},
 					Classes = new SlotCollection()
 					{
-						[nameof( BadgeSlots.Badge )] = ColorVariants.Flat[ThemeColor.Primary]
+						[nameof( BadgeSlots.Badge )] = "bg-primary-200/80 text-primary-600 dark:bg-primary/20"
 					}
 				},
 				new CompoundVariant()
@@ -289,7 +289,7 @@ public static ComponentVariant Style( TwMerge twMerge )
 					},
 					Classes = new SlotCollection()
 					{
-						[nameof( BadgeSlots.Badge )] = ColorVariants.Flat[ThemeColor.Secondary]
+						[nameof( BadgeSlots.Badge )] = "bg-secondary-200/80 text-secondary-600 dark:bg-secondary/20"
 					}
 				},
 				new CompoundVariant()
@@ -301,7 +301,7 @@ public static ComponentVariant Style( TwMerge twMerge )
 					},
 					Classes = new SlotCollection()
 					{
-						[nameof( BadgeSlots.Badge )] = ColorVariants.Flat[ThemeColor.Success]
+						[nameof( BadgeSlots.Badge )] = "bg-success-200/80 text-success-700 dark:bg-success/20 dark:text-success-600"
 					}
 				},
 				new CompoundVariant()
@@ -313,7 +313,7 @@ public static ComponentVariant Style( TwMerge twMerge )
 					},
 					Classes = new SlotCollection()
 					{
-						[nameof( BadgeSlots.Badge )] = ColorVariants.Flat[ThemeColor.Warning]
+						[nameof( BadgeSlots.Badge )] = "bg-warning-200/80 text-warning-800 dark:bg-warning/20 dark:text-warning-700"
 					}
 				},
 				new CompoundVariant()
@@ -325,7 +325,7 @@ public static ComponentVariant Style( TwMerge twMerge )
 					},
 					Classes = new SlotCollection()
 					{
-						[nameof( BadgeSlots.Badge )] = ColorVariants.Flat[ThemeColor.Danger]
+						[nameof( BadgeSlots.Badge )] = "bg-danger-200/80 text-danger-600 dark:bg-danger/20"
 					}
 				},
 				new CompoundVariant()
@@ -337,7 +337,7 @@ public static ComponentVariant Style( TwMerge twMerge )
 					},
 					Classes = new SlotCollection()
 					{
-						[nameof( BadgeSlots.Badge )] = ColorVariants.Flat[ThemeColor.Info]
+						[nameof( BadgeSlots.Badge )] = "bg-info-200/80 text-info-600 dark:bg-info/20"
 					}
 				},