diff --git a/app/Enums/Examples/Ai.php b/app/Enums/Examples/Ai.php
index 62541c8f..fec22098 100644
--- a/app/Enums/Examples/Ai.php
+++ b/app/Enums/Examples/Ai.php
@@ -33,29 +33,4 @@ class Ai
         }
     }
     HTML;
-
-    public const string CURSOR_PROJECT = <<<'HTML'
-    {
-        "mcpServers": {
-            "tallstackui": {
-                "type": "http",
-                "url": "https://tallstackui.com/mcp/tallstackui"
-            }
-        }
-    }
-    HTML;
-
-    public const string GEMINI_CLI = <<<'HTML'
-    gemini mcp add --transport http tallstackui https://tallstackui.com/mcp/tallstackui
-    HTML;
-
-    public const string GEMINI_SETTINGS = <<<'HTML'
-    {
-        "mcpServers": {
-            "tallstackui": {
-                "httpUrl": "https://tallstackui.com/mcp/tallstackui"
-            }
-        }
-    }
-    HTML;
 }
diff --git a/app/Enums/Examples/Form/Checkbox.php b/app/Enums/Examples/Form/Checkbox.php
index afdedb92..4bde4c58 100644
--- a/app/Enums/Examples/Form/Checkbox.php
+++ b/app/Enums/Examples/Form/Checkbox.php
@@ -98,10 +98,6 @@ class Checkbox
     ]" />
     HTML;
 
-    public const string GROUP_PROPERTY = <<<'PHP'
-    public array $features = [];
-    PHP;
-
     public const string GROUP_VARIATIONS = <<<'HTML'
     <x-checkbox.group list :options="$features" />
     <x-checkbox.group card :options="$features" />
diff --git a/app/Enums/Examples/Form/Date.php b/app/Enums/Examples/Form/Date.php
index 55dc5b9a..3d104151 100644
--- a/app/Enums/Examples/Form/Date.php
+++ b/app/Enums/Examples/Form/Date.php
@@ -36,13 +36,25 @@ class Date
     $date; // 2024-02-20
     HTML;
 
+    public const string TYPEABLE = <<<'HTML'
+    <x-date typeable />
+    HTML;
+
+    public const string TYPEABLE_FORMAT = <<<'HTML'
+    <x-date format="DD/MM/YYYY" typeable />
+    HTML;
+
+    public const string TYPEABLE_MIN_DATE = <<<'HTML'
+    <!-- A typed date before today restores the previous value on blur -->
+
+    <x-date format="DD/MM/YYYY" :min-date="today()" typeable />
+    HTML;
+
     public const string HELPERS = <<<'HTML'
     <x-date helpers />
     HTML;
 
     public const string MIN_MAX_DATES = <<<'HTML'
-    <!-- You can use dates as strings or Carbon instances -->
-
     <x-date :min-date="now()->subWeek()" :max-date="now()->addWeek()" />
     HTML;
 
diff --git a/app/Enums/Examples/Form/Range.php b/app/Enums/Examples/Form/Range.php
index 93444683..43d8be2d 100644
--- a/app/Enums/Examples/Form/Range.php
+++ b/app/Enums/Examples/Form/Range.php
@@ -14,6 +14,14 @@ class Range
     <x-range label="Quantity" hint="Select an average desired salary" />
     HTML;
 
+    public const string DUAL = <<<'HTML'
+    <x-range dual :min="0" :max="1000" :step="10" label="Price range" />
+    HTML;
+
+    public const string DUAL_TOOLTIP = <<<'HTML'
+    <x-range dual :min="0" :max="1000" color="emerald" tooltip />
+    HTML;
+
     public const string READONLY_DISABLED = <<<'HTML'
     <x-range label="Readonly" value="50" readonly />
     <x-range label="Disabled" value="50" disabled />
diff --git a/app/Enums/Examples/Ui/Badge.php b/app/Enums/Examples/Ui/Badge.php
index 6a30d70c..809289b2 100644
--- a/app/Enums/Examples/Ui/Badge.php
+++ b/app/Enums/Examples/Ui/Badge.php
@@ -56,6 +56,13 @@ class Badge
     <x-badge text="LG" lg />
     HTML;
 
+    public const string SIZES_CONFIG = <<<'HTML'
+    <!-- With 'size' => 'md' in the configuration file -->
+    <x-badge text="Medium" />
+
+    <x-badge text="Small" sm />
+    HTML;
+
     public const string COLORS = <<<'HTML'
     <x-badge text="Primary" />
     <x-badge text="Secondary" color="secondary" />
diff --git a/app/Enums/Examples/Ui/Button.php b/app/Enums/Examples/Ui/Button.php
index 6f1b315b..56d57daa 100644
--- a/app/Enums/Examples/Ui/Button.php
+++ b/app/Enums/Examples/Ui/Button.php
@@ -412,11 +412,95 @@ class Button
     <x-button.circle icon="bookmark" color="black" flat />
     HTML;
 
+    public const string SUBTLE = <<<'HTML'
+    <x-button text="Primary" subtle />
+    <x-button text="Secondary" color="secondary" subtle />
+    <x-button text="Slate" color="slate" subtle />
+    <x-button text="Gray" color="gray" subtle />
+    <x-button text="Zinc" color="zinc" subtle />
+    <x-button text="Neutral" color="neutral" subtle />
+    <x-button text="Stone" color="stone" subtle />
+    <x-button text="Red" color="red" subtle />
+    <x-button text="Orange" color="orange" subtle />
+    <x-button text="Amber" color="amber" subtle />
+    <x-button text="Yellow" color="yellow" subtle />
+    <x-button text="Lime" color="lime" subtle />
+    <x-button text="Green" color="green" subtle />
+    <x-button text="Emerald" color="emerald" subtle />
+    <x-button text="Teal" color="teal" subtle />
+    <x-button text="Cyan" color="cyan" subtle />
+    <x-button text="Sky" color="sky" subtle />
+    <x-button text="Blue" color="blue" subtle />
+    <x-button text="Indigo" color="indigo" subtle />
+    <x-button text="Violet" color="violet" subtle />
+    <x-button text="Purple" color="purple" subtle />
+    <x-button text="Fuchsia" color="fuchsia" subtle />
+    <x-button text="Pink" color="pink" subtle />
+    <x-button text="Rose" color="rose" subtle />
+    <x-button text="Mauve" color="mauve" subtle />
+    <x-button text="Olive" color="olive" subtle />
+    <x-button text="Mist" color="mist" subtle />
+    <x-button text="Taupe" color="taupe" subtle />
+    <x-button text="Black" color="black" subtle />
+    HTML;
+
+    public const string SUBTLE_TINTED = <<<'HTML'
+    <!-- Gray hover, whatever the color -->
+    <x-button text="Delete" color="red" subtle icon="trash" />
+
+    <!-- Hover tinted with the color -->
+    <x-button text="Delete" color="red" subtle tinted icon="trash" />
+    HTML;
+
     public const string UNFOCUS = <<<'HTML'
     <x-button text="With Focus" />
     <x-button text="Without Focus" unfocus />
     HTML;
 
+    public const string UNFOCUS_CONFIG = <<<'HTML'
+    <!-- With 'unfocus' => true in the configuration file -->
+    <x-button text="Quiet" />
+
+    <x-button text="Normal" :unfocus="false" />
+    HTML;
+
+    public const string CIRCLE_SUBTLE = <<<'HTML'
+    <x-button.circle icon="bookmark" subtle />
+    <x-button.circle icon="bookmark" color="secondary" subtle />
+    <x-button.circle icon="bookmark" color="slate" subtle />
+    <x-button.circle icon="bookmark" color="gray" subtle />
+    <x-button.circle icon="bookmark" color="zinc" subtle />
+    <x-button.circle icon="bookmark" color="neutral" subtle />
+    <x-button.circle icon="bookmark" color="stone" subtle />
+    <x-button.circle icon="bookmark" color="red" subtle />
+    <x-button.circle icon="bookmark" color="orange" subtle />
+    <x-button.circle icon="bookmark" color="amber" subtle />
+    <x-button.circle icon="bookmark" color="yellow" subtle />
+    <x-button.circle icon="bookmark" color="lime" subtle />
+    <x-button.circle icon="bookmark" color="green" subtle />
+    <x-button.circle icon="bookmark" color="emerald" subtle />
+    <x-button.circle icon="bookmark" color="teal" subtle />
+    <x-button.circle icon="bookmark" color="cyan" subtle />
+    <x-button.circle icon="bookmark" color="sky" subtle />
+    <x-button.circle icon="bookmark" color="blue" subtle />
+    <x-button.circle icon="bookmark" color="indigo" subtle />
+    <x-button.circle icon="bookmark" color="violet" subtle />
+    <x-button.circle icon="bookmark" color="purple" subtle />
+    <x-button.circle icon="bookmark" color="fuchsia" subtle />
+    <x-button.circle icon="bookmark" color="pink" subtle />
+    <x-button.circle icon="bookmark" color="rose" subtle />
+    <x-button.circle icon="bookmark" color="mauve" subtle />
+    <x-button.circle icon="bookmark" color="olive" subtle />
+    <x-button.circle icon="bookmark" color="mist" subtle />
+    <x-button.circle icon="bookmark" color="taupe" subtle />
+    <x-button.circle icon="bookmark" color="black" subtle />
+    HTML;
+
+    public const string CIRCLE_SUBTLE_TINTED = <<<'HTML'
+    <x-button.circle icon="pencil" subtle />
+    <x-button.circle icon="trash" color="red" subtle tinted />
+    HTML;
+
     public const string CIRCLE_UNFOCUS = <<<'HTML'
     <x-button.circle icon="x-mark" color="secondary" sm />
     <x-button.circle icon="x-mark" color="secondary" sm unfocus />
@@ -450,6 +534,14 @@ class Button
         ->block('block', 'classes');
     HTML;
 
+    public const string GROUP_SHADOWLESS = <<<'HTML'
+    <x-button.group shadowless>
+        <x-button text="Years" subtle color="secondary" sm />
+        <x-button text="Months" subtle color="secondary" sm />
+        <x-button text="Days" subtle color="secondary" sm />
+    </x-button.group>
+    HTML;
+
     public const string CUSTOMIZATION_GROUP = <<<'HTML'
     TallStackUi::customize()
         ->button('group')
diff --git a/app/Enums/Examples/Ui/Carousel.php b/app/Enums/Examples/Ui/Carousel.php
index 25315881..850cff2b 100644
--- a/app/Enums/Examples/Ui/Carousel.php
+++ b/app/Enums/Examples/Ui/Carousel.php
@@ -30,8 +30,6 @@ class Carousel
     ]" round />
 
     <!--
-    also accept other types of "round":
-
     default => rounded-xl,
     xs      => rounded-xs,
     sm      => rounded-sm,
@@ -104,6 +102,64 @@ class Carousel
     ]" without-indicators />
     HTML;
 
+    public const string THUMBNAILS = <<<'HTML'
+    <x-carousel :images="[
+        ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
+        ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
+        ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
+    ]" thumbnails />
+    HTML;
+
+    public const string THUMBNAILS_LIMIT = <<<'HTML'
+    <x-carousel :images="[
+        ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
+        ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
+        ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
+        ['src' => url('assets/images/wallpapers/4.jpg'), 'alt' => 'Wallpaper 4'],
+        ['src' => url('assets/images/wallpapers/5.jpg'), 'alt' => 'Wallpaper 5'],
+        ['src' => url('assets/images/wallpapers/6.jpg'), 'alt' => 'Wallpaper 6'],
+        ['src' => url('assets/images/wallpapers/7.jpg'), 'alt' => 'Wallpaper 7'],
+        ['src' => url('assets/images/wallpapers/8.jpg'), 'alt' => 'Wallpaper 8'],
+        ['src' => url('assets/images/wallpapers/9.jpg'), 'alt' => 'Wallpaper 9'],
+    ]" thumbnails :limit="5" round="xl" />
+    HTML;
+
+    public const string THUMBNAILS_WITHOUT_HIGHLIGHT = <<<'HTML'
+    <x-carousel :images="[
+        ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
+        ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
+        ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
+    ]" thumbnails without-highlight />
+    HTML;
+
+    public const string THUMBNAILS_AUTOPLAY = <<<'HTML'
+    <x-carousel :images="[
+        ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
+        ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
+        ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
+    ]" thumbnails autoplay :interval="5" stop-on-hover>
+        <x-slot:footer>
+            <p class="mt-2 text-sm text-gray-500">Click a thumbnail to jump to that photo.</p>
+        </x-slot:footer>
+    </x-carousel>
+    HTML;
+
+    public const string THUMBNAILS_CONFIGURATION = <<<'PHP'
+    // ...
+
+    'carousel' => [
+        Components\Carousel\Component::class,
+        [
+            // ...
+            'thumbnails' => true, // [tl! focus:2]
+            'limit' => 6,
+            'without-highlight' => false,
+        ],
+    ],
+
+    // ...
+    PHP;
+
     public const string TITLE_DESCRIPTION = <<<'HTML'
     <x-carousel :images="[
         [
diff --git a/app/Enums/Examples/Ui/Editor.php b/app/Enums/Examples/Ui/Editor.php
index 61dc6aa8..7e71af36 100644
--- a/app/Enums/Examples/Ui/Editor.php
+++ b/app/Enums/Examples/Ui/Editor.php
@@ -64,6 +64,11 @@ class Editor
     <x-editor :toolbar="['style', 'bold', 'italic', 'link', 'image']" />
     HTML;
 
+    public const string TOOLBAR_TOOLTIP = <<<'HTML'
+    <!-- With 'toolbar_tooltip' => false in the configuration file -->
+    <x-editor />
+    HTML;
+
     public const string HEIGHTS = <<<'HTML'
     <x-editor min-height="20rem" max-height="60vh" />
     HTML;
@@ -82,14 +87,6 @@ class Editor
     <x-editor markdown />
     HTML;
 
-    public const string NATIVE = <<<'HTML'
-    <form method="POST" action="{{ route('posts.store') }}">
-        @csrf
-        <x-editor name="body" label="Body" />
-        <x-button type="submit" text="Save" />
-    </form>
-    HTML;
-
     public const string UPLOAD_BLADE = <<<'HTML'
     <x-editor upload-property="picture" upload-method="storeImage" />
     HTML;
@@ -121,11 +118,6 @@ public function storeImage(): string
               x-on:editor:fullscreen-toggled="console.log($event.detail.on)" />
     HTML;
 
-    public const string LIVEWIRE = <<<'HTML'
-    <!-- The component is wire:ignore, so a runtime attribute change needs a wire:key -->
-    <x-editor :readonly="$locked" wire:key="editor-{{ $locked ? 'locked' : 'open' }}" />
-    HTML;
-
     public const string SCOPES = <<<'PHP'
     // The two dialogs are <x-modal> instances under a fixed scope
     TallStackUi::customize('modal', scope: 'editor.modal.link')
diff --git a/app/Enums/Examples/Ui/Gallery.php b/app/Enums/Examples/Ui/Gallery.php
index 3c4bf5ed..6c2c0963 100644
--- a/app/Enums/Examples/Ui/Gallery.php
+++ b/app/Enums/Examples/Ui/Gallery.php
@@ -98,12 +98,6 @@ class="max-w-md" />
                x-on:previous="console.log($event.detail.current)" />
     HTML;
 
-    public const string PERFORMANCE = <<<'HTML'
-    TallStackUi::customize()
-        ->gallery()
-        ->block('tile.performance', '');
-    HTML;
-
     public const string CUSTOMIZATION = <<<'HTML'
     TallStackUi::customize()
         ->gallery()
diff --git a/app/Enums/Examples/Ui/Layout.php b/app/Enums/Examples/Ui/Layout.php
index 6afb14e0..24852ff1 100644
--- a/app/Enums/Examples/Ui/Layout.php
+++ b/app/Enums/Examples/Ui/Layout.php
@@ -91,6 +91,12 @@ class Layout
     </x-layout.header>
     HTML;
 
+    public const string HEADER_COLLAPSE_ICON = <<<'HTML'
+    <x-layout.header collapse-icon="chevron-double-left">
+        <!-- ... -->
+    </x-layout.header>
+    HTML;
+
     public const string JAVASCRIPT = <<<'HTML'
     <!-- Opening -->
     <button x-on:click="$dispatch('tallstackui-menu-mobile', { status : true })">
diff --git a/composer.json b/composer.json
index c2328cf3..b0e3023a 100644
--- a/composer.json
+++ b/composer.json
@@ -16,7 +16,7 @@
     "livewire/livewire": "^4.0",
     "sentry/sentry-laravel": "^4.27",
     "symfony/yaml": "^7.2",
-    "tallstackui/tallstackui": "^4.0",
+    "tallstackui/tallstackui": "^4.2",
     "torchlight/torchlight-laravel": "^0.6"
   },
   "require-dev": {
diff --git a/composer.lock b/composer.lock
index 3f15795c..0ebbee56 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "df25224656c575076a007fe483d70f6e",
+    "content-hash": "ac8b0a59dc22b0b22d175995174b4ab3",
     "packages": [
         {
             "name": "brick/math",
@@ -1119,16 +1119,16 @@
         },
         {
             "name": "laravel/framework",
-            "version": "v13.27.0",
+            "version": "v13.30.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/framework.git",
-                "reference": "f3fa8f3591fa2e8f0b7dedfffc3fc324d2aad31b"
+                "reference": "9c008e7c9a64a8ea6d6e4f1683bd569acc10bf9e"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/framework/zipball/f3fa8f3591fa2e8f0b7dedfffc3fc324d2aad31b",
-                "reference": "f3fa8f3591fa2e8f0b7dedfffc3fc324d2aad31b",
+                "url": "https://api.github.com/repos/laravel/framework/zipball/9c008e7c9a64a8ea6d6e4f1683bd569acc10bf9e",
+                "reference": "9c008e7c9a64a8ea6d6e4f1683bd569acc10bf9e",
                 "shasum": ""
             },
             "require": {
@@ -1342,7 +1342,7 @@
                 "issues": "https://github.com/laravel/framework/issues",
                 "source": "https://github.com/laravel/framework"
             },
-            "time": "2026-08-25T14:16:00+00:00"
+            "time": "2026-09-01T13:19:00+00:00"
         },
         {
             "name": "laravel/mcp",
@@ -2167,16 +2167,16 @@
         },
         {
             "name": "livewire/livewire",
-            "version": "v4.4.2",
+            "version": "v4.4.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/livewire/livewire.git",
-                "reference": "4a030935e6c255c89a114b00ece66326f78157c0"
+                "reference": "92f1427022714b34024459167aa6a85d4fb4af44"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/livewire/livewire/zipball/4a030935e6c255c89a114b00ece66326f78157c0",
-                "reference": "4a030935e6c255c89a114b00ece66326f78157c0",
+                "url": "https://api.github.com/repos/livewire/livewire/zipball/92f1427022714b34024459167aa6a85d4fb4af44",
+                "reference": "92f1427022714b34024459167aa6a85d4fb4af44",
                 "shasum": ""
             },
             "require": {
@@ -2231,7 +2231,7 @@
             "description": "A front-end framework for Laravel.",
             "support": {
                 "issues": "https://github.com/livewire/livewire/issues",
-                "source": "https://github.com/livewire/livewire/tree/v4.4.2"
+                "source": "https://github.com/livewire/livewire/tree/v4.4.3"
             },
             "funding": [
                 {
@@ -2239,7 +2239,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2026-08-24T15:02:06+00:00"
+            "time": "2026-08-31T15:40:58+00:00"
         },
         {
             "name": "monolog/monolog",
@@ -3595,16 +3595,16 @@
         },
         {
             "name": "sentry/sentry",
-            "version": "4.30.0",
+            "version": "4.31.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/getsentry/sentry-php.git",
-                "reference": "95a26e7c946651cacd69d1ded95a8190f952a3ae"
+                "reference": "39d9f86bd56c6cc6ae7b64c2b849f7f046d38394"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/getsentry/sentry-php/zipball/95a26e7c946651cacd69d1ded95a8190f952a3ae",
-                "reference": "95a26e7c946651cacd69d1ded95a8190f952a3ae",
+                "url": "https://api.github.com/repos/getsentry/sentry-php/zipball/39d9f86bd56c6cc6ae7b64c2b849f7f046d38394",
+                "reference": "39d9f86bd56c6cc6ae7b64c2b849f7f046d38394",
                 "shasum": ""
             },
             "require": {
@@ -3675,7 +3675,7 @@
             ],
             "support": {
                 "issues": "https://github.com/getsentry/sentry-php/issues",
-                "source": "https://github.com/getsentry/sentry-php/tree/4.30.0"
+                "source": "https://github.com/getsentry/sentry-php/tree/4.31.0"
             },
             "funding": [
                 {
@@ -3687,7 +3687,7 @@
                     "type": "custom"
                 }
             ],
-            "time": "2026-08-05T14:54:26+00:00"
+            "time": "2026-08-27T12:59:01+00:00"
         },
         {
             "name": "sentry/sentry-laravel",
@@ -3860,16 +3860,16 @@
         },
         {
             "name": "symfony/console",
-            "version": "v8.1.5",
+            "version": "v8.1.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/console.git",
-                "reference": "d07c06839e33047e2c894a6793248f3fb66c8129"
+                "reference": "eb7d9957d66739649e931ce7a9d05dab69f8abac"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/console/zipball/d07c06839e33047e2c894a6793248f3fb66c8129",
-                "reference": "d07c06839e33047e2c894a6793248f3fb66c8129",
+                "url": "https://api.github.com/repos/symfony/console/zipball/eb7d9957d66739649e931ce7a9d05dab69f8abac",
+                "reference": "eb7d9957d66739649e931ce7a9d05dab69f8abac",
                 "shasum": ""
             },
             "require": {
@@ -3936,7 +3936,7 @@
                 "terminal"
             ],
             "support": {
-                "source": "https://github.com/symfony/console/tree/v8.1.5"
+                "source": "https://github.com/symfony/console/tree/v8.1.6"
             },
             "funding": [
                 {
@@ -3956,20 +3956,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2026-08-21T14:29:57+00:00"
+            "time": "2026-08-25T14:18:42+00:00"
         },
         {
             "name": "symfony/css-selector",
-            "version": "v8.1.5",
+            "version": "v8.1.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/css-selector.git",
-                "reference": "a291fb5adb65f52a4bb315db2d803698315dc64d"
+                "reference": "08e2905152a39cf3fd1745d83f8c483e258887d9"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/css-selector/zipball/a291fb5adb65f52a4bb315db2d803698315dc64d",
-                "reference": "a291fb5adb65f52a4bb315db2d803698315dc64d",
+                "url": "https://api.github.com/repos/symfony/css-selector/zipball/08e2905152a39cf3fd1745d83f8c483e258887d9",
+                "reference": "08e2905152a39cf3fd1745d83f8c483e258887d9",
                 "shasum": ""
             },
             "require": {
@@ -4005,7 +4005,7 @@
             "description": "Converts CSS selectors to XPath expressions",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/css-selector/tree/v8.1.5"
+                "source": "https://github.com/symfony/css-selector/tree/v8.1.6"
             },
             "funding": [
                 {
@@ -4025,7 +4025,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2026-08-21T17:47:34+00:00"
+            "time": "2026-08-23T10:06:25+00:00"
         },
         {
             "name": "symfony/deprecation-contracts",
@@ -4415,16 +4415,16 @@
         },
         {
             "name": "symfony/http-foundation",
-            "version": "v8.1.5",
+            "version": "v8.1.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/http-foundation.git",
-                "reference": "ee16f97e95cfa011a742714d7c8c8f70fe7423f4"
+                "reference": "093b78326f649c3a9db922b9f17123b6aeb3b8fb"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/http-foundation/zipball/ee16f97e95cfa011a742714d7c8c8f70fe7423f4",
-                "reference": "ee16f97e95cfa011a742714d7c8c8f70fe7423f4",
+                "url": "https://api.github.com/repos/symfony/http-foundation/zipball/093b78326f649c3a9db922b9f17123b6aeb3b8fb",
+                "reference": "093b78326f649c3a9db922b9f17123b6aeb3b8fb",
                 "shasum": ""
             },
             "require": {
@@ -4472,7 +4472,7 @@
             "description": "Defines an object-oriented layer for the HTTP specification",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/http-foundation/tree/v8.1.5"
+                "source": "https://github.com/symfony/http-foundation/tree/v8.1.6"
             },
             "funding": [
                 {
@@ -4492,20 +4492,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2026-08-20T09:59:12+00:00"
+            "time": "2026-08-30T20:10:55+00:00"
         },
         {
             "name": "symfony/http-kernel",
-            "version": "v8.1.5",
+            "version": "v8.1.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/http-kernel.git",
-                "reference": "0306e1e65b90023fe40de6c6be95d06396bcb2e6"
+                "reference": "2f73beb7c6f1a97d2c17bbf4dbd59da8cc18b355"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/http-kernel/zipball/0306e1e65b90023fe40de6c6be95d06396bcb2e6",
-                "reference": "0306e1e65b90023fe40de6c6be95d06396bcb2e6",
+                "url": "https://api.github.com/repos/symfony/http-kernel/zipball/2f73beb7c6f1a97d2c17bbf4dbd59da8cc18b355",
+                "reference": "2f73beb7c6f1a97d2c17bbf4dbd59da8cc18b355",
                 "shasum": ""
             },
             "require": {
@@ -4582,7 +4582,7 @@
             "description": "Provides a structured process for converting a Request into a Response",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/http-kernel/tree/v8.1.5"
+                "source": "https://github.com/symfony/http-kernel/tree/v8.1.6"
             },
             "funding": [
                 {
@@ -4602,7 +4602,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2026-08-22T13:45:00+00:00"
+            "time": "2026-08-30T21:40:49+00:00"
         },
         {
             "name": "symfony/mailer",
@@ -4686,7 +4686,7 @@
         },
         {
             "name": "symfony/mime",
-            "version": "v8.1.5",
+            "version": "v8.1.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/mime.git",
@@ -4748,7 +4748,7 @@
                 "mime-type"
             ],
             "support": {
-                "source": "https://github.com/symfony/mime/tree/v8.1.5"
+                "source": "https://github.com/symfony/mime/tree/v8.1.6"
             },
             "funding": [
                 {
@@ -5672,7 +5672,7 @@
         },
         {
             "name": "symfony/process",
-            "version": "v8.1.5",
+            "version": "v8.1.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/process.git",
@@ -5713,7 +5713,7 @@
             "description": "Executes commands in sub-processes",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/process/tree/v8.1.5"
+                "source": "https://github.com/symfony/process/tree/v8.1.6"
             },
             "funding": [
                 {
@@ -5824,7 +5824,7 @@
         },
         {
             "name": "symfony/routing",
-            "version": "v8.1.5",
+            "version": "v8.1.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/routing.git",
@@ -5880,7 +5880,7 @@
                 "url"
             ],
             "support": {
-                "source": "https://github.com/symfony/routing/tree/v8.1.5"
+                "source": "https://github.com/symfony/routing/tree/v8.1.6"
             },
             "funding": [
                 {
@@ -5904,16 +5904,16 @@
         },
         {
             "name": "symfony/service-contracts",
-            "version": "v3.7.1",
+            "version": "v3.7.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/service-contracts.git",
-                "reference": "c0a284bab1ed8aa0417e3d69250ab437739563a0"
+                "reference": "15e6a07ec2a2c75ceb1b21dd98105ee8456d2257"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/service-contracts/zipball/c0a284bab1ed8aa0417e3d69250ab437739563a0",
-                "reference": "c0a284bab1ed8aa0417e3d69250ab437739563a0",
+                "url": "https://api.github.com/repos/symfony/service-contracts/zipball/15e6a07ec2a2c75ceb1b21dd98105ee8456d2257",
+                "reference": "15e6a07ec2a2c75ceb1b21dd98105ee8456d2257",
                 "shasum": ""
             },
             "require": {
@@ -5967,7 +5967,7 @@
                 "standards"
             ],
             "support": {
-                "source": "https://github.com/symfony/service-contracts/tree/v3.7.1"
+                "source": "https://github.com/symfony/service-contracts/tree/v3.7.3"
             },
             "funding": [
                 {
@@ -5987,7 +5987,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2026-06-16T09:55:08+00:00"
+            "time": "2026-07-27T15:39:01+00:00"
         },
         {
             "name": "symfony/string",
@@ -6334,16 +6334,16 @@
         },
         {
             "name": "symfony/var-dumper",
-            "version": "v8.1.5",
+            "version": "v8.1.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/var-dumper.git",
-                "reference": "61743d9bc7ab23b194527ca1be2fafd7dc93b74a"
+                "reference": "3783365b58972f4779254d98372af80fbf15e170"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/var-dumper/zipball/61743d9bc7ab23b194527ca1be2fafd7dc93b74a",
-                "reference": "61743d9bc7ab23b194527ca1be2fafd7dc93b74a",
+                "url": "https://api.github.com/repos/symfony/var-dumper/zipball/3783365b58972f4779254d98372af80fbf15e170",
+                "reference": "3783365b58972f4779254d98372af80fbf15e170",
                 "shasum": ""
             },
             "require": {
@@ -6397,7 +6397,7 @@
                 "dump"
             ],
             "support": {
-                "source": "https://github.com/symfony/var-dumper/tree/v8.1.5"
+                "source": "https://github.com/symfony/var-dumper/tree/v8.1.6"
             },
             "funding": [
                 {
@@ -6417,20 +6417,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2026-08-21T12:16:08+00:00"
+            "time": "2026-08-30T20:10:55+00:00"
         },
         {
             "name": "symfony/yaml",
-            "version": "v7.4.17",
+            "version": "v7.4.18",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/yaml.git",
-                "reference": "0b040d7b66ceb10b7bb24c8e6656257932693a12"
+                "reference": "4cef939e55b8a21c5780418de0d98ab00d0736e1"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/yaml/zipball/0b040d7b66ceb10b7bb24c8e6656257932693a12",
-                "reference": "0b040d7b66ceb10b7bb24c8e6656257932693a12",
+                "url": "https://api.github.com/repos/symfony/yaml/zipball/4cef939e55b8a21c5780418de0d98ab00d0736e1",
+                "reference": "4cef939e55b8a21c5780418de0d98ab00d0736e1",
                 "shasum": ""
             },
             "require": {
@@ -6473,7 +6473,7 @@
             "description": "Loads and dumps YAML files",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/yaml/tree/v7.4.17"
+                "source": "https://github.com/symfony/yaml/tree/v7.4.18"
             },
             "funding": [
                 {
@@ -6493,20 +6493,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2026-08-21T12:09:28+00:00"
+            "time": "2026-08-30T00:47:26+00:00"
         },
         {
             "name": "tallstackui/tallstackui",
-            "version": "v4.1.0",
+            "version": "v4.2.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/tallstackui/tallstackui.git",
-                "reference": "8bc2d5ea42a7df23c6e1db30555d5de5382e1a5f"
+                "reference": "825f8670f0975e1025b421fe2131958ab40e171d"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/tallstackui/tallstackui/zipball/8bc2d5ea42a7df23c6e1db30555d5de5382e1a5f",
-                "reference": "8bc2d5ea42a7df23c6e1db30555d5de5382e1a5f",
+                "url": "https://api.github.com/repos/tallstackui/tallstackui/zipball/825f8670f0975e1025b421fe2131958ab40e171d",
+                "reference": "825f8670f0975e1025b421fe2131958ab40e171d",
                 "shasum": ""
             },
             "require": {
@@ -6565,7 +6565,7 @@
             "description": "TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.",
             "support": {
                 "issues": "https://github.com/tallstackui/tallstackui/issues",
-                "source": "https://github.com/tallstackui/tallstackui/tree/v4.1.0"
+                "source": "https://github.com/tallstackui/tallstackui/tree/v4.2.0"
             },
             "funding": [
                 {
@@ -6573,7 +6573,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2026-08-21T17:31:28+00:00"
+            "time": "2026-09-21T18:36:20+00:00"
         },
         {
             "name": "tijsverkoyen/css-to-inline-styles",
@@ -7635,16 +7635,16 @@
         },
         {
             "name": "pestphp/pest",
-            "version": "v5.1.2",
+            "version": "v5.1.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/pestphp/pest.git",
-                "reference": "627092ecfc467d9263c750b966c7b341f7a21874"
+                "reference": "20a5aacaca4fce9116922f42d2942b3f9f5bbfc6"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/pestphp/pest/zipball/627092ecfc467d9263c750b966c7b341f7a21874",
-                "reference": "627092ecfc467d9263c750b966c7b341f7a21874",
+                "url": "https://api.github.com/repos/pestphp/pest/zipball/20a5aacaca4fce9116922f42d2942b3f9f5bbfc6",
+                "reference": "20a5aacaca4fce9116922f42d2942b3f9f5bbfc6",
                 "shasum": ""
             },
             "require": {
@@ -7661,6 +7661,7 @@
             },
             "conflict": {
                 "filp/whoops": "<2.18.3",
+                "laravel/boost": "<2.6.0",
                 "phpunit/phpunit": ">13.3.1",
                 "sebastian/exporter": "<7.0.0",
                 "webmozart/assert": "<1.11.0"
@@ -7738,7 +7739,7 @@
             ],
             "support": {
                 "issues": "https://github.com/pestphp/pest/issues",
-                "source": "https://github.com/pestphp/pest/tree/v5.1.2"
+                "source": "https://github.com/pestphp/pest/tree/v5.1.3"
             },
             "funding": [
                 {
@@ -7750,7 +7751,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2026-08-24T13:06:57+00:00"
+            "time": "2026-08-25T18:15:02+00:00"
         },
         {
             "name": "pestphp/pest-plugin",
@@ -8531,16 +8532,16 @@
         },
         {
             "name": "phpstan/phpdoc-parser",
-            "version": "2.3.3",
+            "version": "2.3.5",
             "source": {
                 "type": "git",
                 "url": "https://github.com/phpstan/phpdoc-parser.git",
-                "reference": "fb19eedd2bb67ff8cf7a5502ad329e701d6398a3"
+                "reference": "148cefffaf0233e4c08cc13db8a195a56dd6dfe9"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/phpstan/phpdoc-parser/zipball/fb19eedd2bb67ff8cf7a5502ad329e701d6398a3",
-                "reference": "fb19eedd2bb67ff8cf7a5502ad329e701d6398a3",
+                "url": "https://api.github.com/repos/phpstan/phpdoc-parser/zipball/148cefffaf0233e4c08cc13db8a195a56dd6dfe9",
+                "reference": "148cefffaf0233e4c08cc13db8a195a56dd6dfe9",
                 "shasum": ""
             },
             "require": {
@@ -8572,17 +8573,17 @@
             "description": "PHPDoc parser with support for nullable, intersection and generic types",
             "support": {
                 "issues": "https://github.com/phpstan/phpdoc-parser/issues",
-                "source": "https://github.com/phpstan/phpdoc-parser/tree/2.3.3"
+                "source": "https://github.com/phpstan/phpdoc-parser/tree/2.3.5"
             },
-            "time": "2026-07-08T07:01:06+00:00"
+            "time": "2026-08-31T16:05:28+00:00"
         },
         {
             "name": "phpstan/phpstan",
-            "version": "2.2.9",
+            "version": "2.2.12",
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/phpstan/phpstan/zipball/13d6b4f347bad222da436580c8304fa6f83e6bd0",
-                "reference": "13d6b4f347bad222da436580c8304fa6f83e6bd0",
+                "url": "https://api.github.com/repos/phpstan/phpstan/zipball/174b0d88710f00a42598886504dd7a146f91ace5",
+                "reference": "174b0d88710f00a42598886504dd7a146f91ace5",
                 "shasum": ""
             },
             "require": {
@@ -8638,7 +8639,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2026-08-22T07:38:16+00:00"
+            "time": "2026-08-31T19:09:43+00:00"
         },
         {
             "name": "phpunit/php-code-coverage",
@@ -10823,16 +10824,16 @@
         },
         {
             "name": "tomasvotruba/type-coverage",
-            "version": "2.3.4",
+            "version": "2.3.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/TomasVotruba/type-coverage.git",
-                "reference": "7b4aec57af15514dac9a3c5a9671da501444ecd0"
+                "reference": "bb2e1d115bfc38b2b29c98ea64762d70607a684f"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/TomasVotruba/type-coverage/zipball/7b4aec57af15514dac9a3c5a9671da501444ecd0",
-                "reference": "7b4aec57af15514dac9a3c5a9671da501444ecd0",
+                "url": "https://api.github.com/repos/TomasVotruba/type-coverage/zipball/bb2e1d115bfc38b2b29c98ea64762d70607a684f",
+                "reference": "bb2e1d115bfc38b2b29c98ea64762d70607a684f",
                 "shasum": ""
             },
             "require": {
@@ -10878,7 +10879,7 @@
             ],
             "support": {
                 "issues": "https://github.com/TomasVotruba/type-coverage/issues",
-                "source": "https://github.com/TomasVotruba/type-coverage/tree/2.3.4"
+                "source": "https://github.com/TomasVotruba/type-coverage/tree/2.3.6"
             },
             "funding": [
                 {
@@ -10890,7 +10891,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2026-08-18T07:48:32+00:00"
+            "time": "2026-08-29T08:21:40+00:00"
         },
         {
             "name": "webmozart/assert",
diff --git a/contents/documentation.yaml b/contents/documentation.yaml
index 12869f04..69023a71 100644
--- a/contents/documentation.yaml
+++ b/contents/documentation.yaml
@@ -210,6 +210,7 @@ form:
   range:
     - Basic Usage
     - Label & Hint
+    - Dual Mode
     - Readonly & Disabled
     - Size Variations
     - Color Variations
@@ -264,6 +265,7 @@ form:
     - Label & Hint
     - Readonly & Disabled
     - Available Formats
+    - Typeable
     - Helpers
     - Min & Max Dates
     - Min & Max Years
@@ -444,6 +446,7 @@ ui:
         - Light Variations
         - Outline Variations
         - Flat Variations
+        - Subtle Variations
         - Unfocus
     Circle:
       contents:
@@ -459,12 +462,14 @@ ui:
         - Light Variations
         - Outline Variations
         - Flat Variations
+        - Subtle Variations
         - Unfocus
     Group:
       contents:
         - Concept
         - Basic Usage
         - Vertical Orientation
+        - Shadowless
   boolean:
     - Concept
     - Basic Usage
@@ -504,6 +509,7 @@ ui:
     - Autoplay, Stop on Hover
     - Autoplay, Without Loop
     - Without Indicators
+    - Thumbnails
     - Image Title & Description
     - Clickable
     - Clickable Caption
diff --git a/resources/views/components/layout/navigation/tree.blade.php b/resources/views/components/layout/navigation/tree.blade.php
index 0f10b8b1..718f1a07 100644
--- a/resources/views/components/layout/navigation/tree.blade.php
+++ b/resources/views/components/layout/navigation/tree.blade.php
@@ -92,6 +92,7 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['form', 'date'])"
                             text="Date"
+                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -116,7 +117,6 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['form', 'password'])"
                             text="Password"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -129,13 +129,13 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['form', 'radio'])"
                             text="Radio"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
                         <x-layout.navigation.link
                             :href="route('documentation', ['form', 'range'])"
                             text="Range"
+                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -148,7 +148,6 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['form', 'time'])"
                             text="Time"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -207,7 +206,6 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'avatar'])"
                             text="Avatar"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -220,6 +218,7 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'badge'])"
                             text="Badge"
+                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -257,13 +256,13 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'card'])"
                             text="Card"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'carousel'])"
                             text="Carousel"
+                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -295,7 +294,6 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'dropdown'])"
                             text="Dropdown"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -303,13 +301,13 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                             :href="route('documentation', ['ui', 'editor'])"
                             text="Editor"
                             new
+                            changed
                         />
                     </li>
                     <li class="relative ml-4">
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'error'])"
                             text="Error"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -329,14 +327,12 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'icon'])"
                             text="Icon"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'modal'])"
                             text="Modal"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -356,28 +352,24 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'list'])"
                             text="List"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'loading'])"
                             text="Loading"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'kbd'])"
                             text="Kbd"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'key-value'])"
                             text="KeyValue"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -397,7 +389,6 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'reaction'])"
                             text="Reaction"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -410,14 +401,12 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'signature'])"
                             text="Signature"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'slide'])"
                             text="Slide"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -431,14 +420,12 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'stats'])"
                             text="Stats"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'step'])"
                             text="Step"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -452,14 +439,12 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'tab'])"
                             text="Tab"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'table'])"
                             text="Table"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -478,7 +463,6 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['ui', 'tooltip'])"
                             text="Tooltip"
-                            changed
                         />
                     </li>
                 </ul>
@@ -494,14 +478,12 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['interactions', 'dialog'])"
                             text="Dialog"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
                         <x-layout.navigation.link
                             :href="route('documentation', ['interactions', 'toast'])"
                             text="Toast"
-                            changed
                         />
                     </li>
                 </ul>
@@ -576,7 +558,6 @@ class="dark:text-dark-500 font-mono text-[0.65rem] font-semibold tracking-[0.16e
                 <x-layout.navigation.link
                     :href="route('documentation', ['without-livewire'])"
                     text="Without Livewire"
-                    changed
                 />
             </li>
             <li class="relative ml-4">
@@ -596,7 +577,6 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['customization', 'soft'])"
                             text="Soft Customization"
-                            changed
                         />
                     </li>
                     <li class="relative ml-4">
@@ -615,7 +595,6 @@ class="dark:text-dark-500 mt-6 font-mono text-[0.65rem] font-semibold tracking-[
                         <x-layout.navigation.link
                             :href="route('documentation', ['customization', 'globals'])"
                             text="Globals"
-                            changed
                         />
                     </li>
                 </ul>
diff --git a/resources/views/documentation/ai.blade.php b/resources/views/documentation/ai.blade.php
index 9e520ecc..1d773f26 100644
--- a/resources/views/documentation/ai.blade.php
+++ b/resources/views/documentation/ai.blade.php
@@ -175,7 +175,7 @@ class="underline"
             </x-table>
         </div>
     </x-section>
-    <x-section title="Connecting to Claude Code">
+    <x-section title="Connecting to Claude Code" disable-copy>
         <div class="space-y-4">
             <p>
                 The quickest way to connect the MCP server to
diff --git a/resources/views/documentation/form/autocomplete.blade.php b/resources/views/documentation/form/autocomplete.blade.php
index 94862c8a..c2406aba 100644
--- a/resources/views/documentation/form/autocomplete.blade.php
+++ b/resources/views/documentation/form/autocomplete.blade.php
@@ -93,6 +93,7 @@
     <x-section
         title="Metadata"
         description="An option to pass special or additional values."
+        disable-copy
     >
         <x-code language="php" :contents="$metadata" />
         <x-code class="mt-4" language="blade" :contents="$metadataUsage" />
@@ -104,6 +105,7 @@
     <x-section
         title="Field Mapping"
         description="An option to remap the item keys when they do not match the expected structure."
+        disable-copy
     >
         <div class="space-y-4">
             <p>
diff --git a/resources/views/documentation/form/checkbox.blade.php b/resources/views/documentation/form/checkbox.blade.php
index 7d86988f..ec4dd90a 100644
--- a/resources/views/documentation/form/checkbox.blade.php
+++ b/resources/views/documentation/form/checkbox.blade.php
@@ -235,7 +235,7 @@
             />
         </x-preview>
     </x-section>
-    <x-section title="Option Keys" anchor="group-option-keys">
+    <x-section title="Option Keys" anchor="group-option-keys" disable-copy>
         <x-table
             :headers="[
                 ['index' => 'key', 'label' => 'Key'],
diff --git a/resources/views/documentation/form/date.blade.php b/resources/views/documentation/form/date.blade.php
index a104487e..4985de70 100644
--- a/resources/views/documentation/form/date.blade.php
+++ b/resources/views/documentation/form/date.blade.php
@@ -126,6 +126,66 @@
             </p>
         </div>
     </x-section>
+    <x-section
+        title="Typeable"
+        new
+        description="An option to type the date directly into the input."
+    >
+        <div class="space-y-4">
+            <x-preview language="blade" :contents="$typeable">
+                <x-date typeable />
+            </x-preview>
+            <p>
+                The input becomes a regular text field with an auto-formatting
+                mask derived from the
+                <x-block>format</x-block>
+                tokens:
+                <x-block>YYYY</x-block>
+                takes four digits,
+                <x-block>MM</x-block>
+                and
+                <x-block>DD</x-block>
+                take two, and any other character is inserted as the user types.
+                Clicking the input no longer opens the picker, but the calendar
+                icon still does.
+            </p>
+            <x-preview language="blade" :contents="$typeableFormat">
+                <x-date format="DD/MM/YYYY" typeable />
+            </x-preview>
+            <p>
+                On blur the typed value is parsed against the format and
+                validated by the same rules as the picker: min and max dates,
+                disabled dates, weekdays, weekends and
+                <x-block>only</x-block>
+                . An invalid, impossible or out-of-range date, like
+                <x-block>31/02/2020</x-block>
+                , restores the previous value, while clearing the field and
+                leaving empties the model.
+            </p>
+            <x-preview language="blade" :contents="$typeableMinDate">
+                <x-date format="DD/MM/YYYY" :min-date="today()" typeable />
+            </x-preview>
+            <x-warning class="mt-4">
+                The
+                <x-block>format</x-block>
+                must contain the
+                <x-block>YYYY</x-block>
+                ,
+                <x-block>MM</x-block>
+                and
+                <x-block>DD</x-block>
+                tokens for the mask to make sense.
+                <x-block>typeable</x-block>
+                cannot be combined with
+                <x-block>range</x-block>
+                ,
+                <x-block>multiple</x-block>
+                or
+                <x-block>month-year-only</x-block>
+                , and combining them throws.
+            </x-warning>
+        </div>
+    </x-section>
     <x-section title="Helpers">
         <x-preview language="blade" :contents="$helpers">
             <x-date helpers />
diff --git a/resources/views/documentation/form/radio.blade.php b/resources/views/documentation/form/radio.blade.php
index 2d5cf4fa..8201ff5f 100644
--- a/resources/views/documentation/form/radio.blade.php
+++ b/resources/views/documentation/form/radio.blade.php
@@ -212,7 +212,7 @@
             />
         </x-preview>
     </x-section>
-    <x-section title="Option Keys" anchor="group-option-keys">
+    <x-section title="Option Keys" anchor="group-option-keys" disable-copy>
         <x-table
             :headers="[
                 ['index' => 'key', 'label' => 'Key'],
diff --git a/resources/views/documentation/form/range.blade.php b/resources/views/documentation/form/range.blade.php
index d07e8ef5..af202a25 100644
--- a/resources/views/documentation/form/range.blade.php
+++ b/resources/views/documentation/form/range.blade.php
@@ -25,6 +25,80 @@
             </div>
         </x-preview>
     </x-section>
+    <x-section
+        title="Dual Mode"
+        new
+        description="An option to pick an interval with two thumbs over a shared track."
+    >
+        <div class="space-y-4">
+            <x-preview language="blade" :contents="$dual">
+                <livewire:documentation.form.range :mode="1" />
+            </x-preview>
+            <p>
+                Unlike the single mode, the bound property is always an indexed
+                pair,
+                <x-block>[start, end]</x-block>
+                . When the bound value is blank the pair starts at
+                <x-block>[min, max]</x-block>
+                . In dual mode
+                <x-block>min</x-block>
+                ,
+                <x-block>max</x-block>
+                and
+                <x-block>step</x-block>
+                default to
+                <x-block>0</x-block>
+                ,
+                <x-block>100</x-block>
+                and
+                <x-block>1</x-block>
+                . The segment between the thumbs is painted with the component
+                <x-block>color</x-block>
+                .
+            </p>
+            <p>
+                The thumbs never cross. Dragging the starting thumb past the
+                ending one stops it at that value, and the other way around.
+                Both landing on the same value is allowed, and while they
+                overlap the one that still has room to move stays on top, so
+                neither gets stuck.
+            </p>
+            <x-preview language="blade" :contents="$dualTooltip">
+                <livewire:documentation.form.range :mode="2" />
+            </x-preview>
+            <p>
+                Use
+                <x-block>tooltip</x-block>
+                to show the value of the thumb being dragged, hidden on release.
+                The bubble is the same balloon the
+                <x-refer :doc="['ui', 'tooltip']">tooltip</x-refer>
+                component renders, anchored on an invisible marker kept over the
+                thumb, so it follows the balloon color, scale and styling set
+                for every tooltip and has no color or size settings of its own.
+                The pair reaches the server when the thumb is released rather
+                than on every intermediate value, so a drag costs a single round
+                trip,
+                <x-block>wire:model.live</x-block>
+                included.
+            </p>
+            <x-warning class="mt-4">
+                <x-block>tooltip</x-block>
+                and an array
+                <x-block>value</x-block>
+                both require
+                <x-block>dual</x-block>
+                and throw otherwise. In dual mode the component also throws when
+                <x-block>min</x-block>
+                is not below
+                <x-block>max</x-block>
+                , when
+                <x-block>step</x-block>
+                is zero, negative or wider than the distance between the
+                boundaries, or when the bound value is not a numeric pair inside
+                those boundaries with the first value below the second.
+            </x-warning>
+        </div>
+    </x-section>
     <x-section title="Readonly & Disabled">
         <x-preview language="blade" :contents="$readonlyDisabled">
             <div class="space-y-2">
diff --git a/resources/views/documentation/form/upload-async.blade.php b/resources/views/documentation/form/upload-async.blade.php
index 5ee53424..c2cdee81 100644
--- a/resources/views/documentation/form/upload-async.blade.php
+++ b/resources/views/documentation/form/upload-async.blade.php
@@ -124,6 +124,7 @@
     <x-section
         title="Uploader Trait"
         description="All options of the upload method."
+        disable-copy
     >
         <div class="space-y-4">
             <p>
diff --git a/resources/views/documentation/form/upload.blade.php b/resources/views/documentation/form/upload.blade.php
index b7d1cb72..5ba00766 100644
--- a/resources/views/documentation/form/upload.blade.php
+++ b/resources/views/documentation/form/upload.blade.php
@@ -171,7 +171,7 @@ class="underline"
             </p>
         </div>
     </x-section>
-    <x-section title="Events">
+    <x-section title="Events" anchor="upload-events">
         <div class="space-y-4">
             <x-preview language="blade" :contents="$events">
                 <livewire:documentation.form.upload.upload :model="7" />
@@ -205,7 +205,11 @@ class="underline"
         benefit of this usage format is that it allows people to view files,
         including preview images, and can choose to delete them.
     </x-section>
-    <x-section title="Prepare the Usage" anchor="static-prepare-the-usage">
+    <x-section
+        title="Prepare the Usage"
+        anchor="static-prepare-the-usage"
+        disable-copy
+    >
         <div class="space-y-4">
             <ul class="list-inside list-decimal space-y-2">
                 <li>
diff --git a/resources/views/documentation/internal/floating.blade.php b/resources/views/documentation/internal/floating.blade.php
index 1d4719d1..c4da5c7a 100644
--- a/resources/views/documentation/internal/floating.blade.php
+++ b/resources/views/documentation/internal/floating.blade.php
@@ -63,9 +63,10 @@
         title="Scroll Lock"
         new
         description="An option to block the overflow when the floating is opened."
+        disable-copy
     >
         <div class="space-y-4">
-            <x-code language="php" :contents="$scrollLock" />
+            <x-code language="php" :contents="$scrollLock" disable-copy />
             <x-warning>
                 Nested and stacked popups share a single lock, counted by
                 reference, so the first popup to open takes it and the last to
diff --git a/resources/views/documentation/ui/avatar.blade.php b/resources/views/documentation/ui/avatar.blade.php
index c3b7323c..62a9a045 100644
--- a/resources/views/documentation/ui/avatar.blade.php
+++ b/resources/views/documentation/ui/avatar.blade.php
@@ -207,6 +207,7 @@
         anchor="gravatar-from-another-column"
         new
         description="An option to use a different property to generate the gravatar"
+        disable-copy
     >
         <x-code language="blade" :contents="$gravatarColumn" />
     </x-section>
diff --git a/resources/views/documentation/ui/badge.blade.php b/resources/views/documentation/ui/badge.blade.php
index 6731100c..e6183005 100644
--- a/resources/views/documentation/ui/badge.blade.php
+++ b/resources/views/documentation/ui/badge.blade.php
@@ -65,14 +65,32 @@
         </x-preview>
     </x-section>
     <x-section title="Size Variations">
-        <x-preview language="blade" :contents="$sizes">
-            <div class="flex items-center gap-2">
-                <x-badge text="XS" xs />
-                <x-badge text="SM" sm />
-                <x-badge text="MD" md />
-                <x-badge text="LG" lg />
-            </div>
-        </x-preview>
+        <div class="space-y-4">
+            <x-preview language="blade" :contents="$sizes">
+                <div class="flex items-center gap-2">
+                    <x-badge text="XS" xs />
+                    <x-badge text="SM" sm />
+                    <x-badge text="MD" md />
+                    <x-badge text="LG" lg />
+                </div>
+            </x-preview>
+            <x-code language="blade" :contents="$sizesConfig" disable-copy />
+            <x-warning info>
+                You can set the default
+                <x-block>size</x-block>
+                of every badge in the
+                <x-refer doc="configuration">configuration file.</x-refer>
+                The inline attributes always win, so any of
+                <x-block>xs</x-block>
+                ,
+                <x-block>sm</x-block>
+                ,
+                <x-block>md</x-block>
+                or
+                <x-block>lg</x-block>
+                replaces the global size.
+            </x-warning>
+        </div>
     </x-section>
     <x-section title="Color Variations">
         <x-preview language="blade" :contents="$colors">
diff --git a/resources/views/documentation/ui/banner.blade.php b/resources/views/documentation/ui/banner.blade.php
index 2cca6bc0..ae00ed54 100644
--- a/resources/views/documentation/ui/banner.blade.php
+++ b/resources/views/documentation/ui/banner.blade.php
@@ -197,6 +197,7 @@
     <x-section
         title="Display After Redirects"
         anchor="livewire-integration-display-after-redirects"
+        disable-copy
     >
         <div class="space-y-4">
             <p>
@@ -206,7 +207,7 @@
                 but yes stored temporarily in the session and displayed in the
                 next request when you redirect to another page.
             </p>
-            <x-code :contents="$flash" />
+            <x-code :contents="$flash" disable-copy />
         </div>
     </x-section>
 </x-layout>
diff --git a/resources/views/documentation/ui/button.blade.php b/resources/views/documentation/ui/button.blade.php
index e82428f4..9671a262 100644
--- a/resources/views/documentation/ui/button.blade.php
+++ b/resources/views/documentation/ui/button.blade.php
@@ -340,17 +340,98 @@ class="flex flex-col items-center justify-center space-y-2 sm:flex-row sm:justif
             </div>
         </x-preview>
     </x-section>
+    <x-section
+        title="Subtle Variations"
+        new
+        anchor="normal-subtle-variations"
+        description="A neutral body, with the color applied to the text, the icon and the focus ring only."
+    >
+        <div class="space-y-4">
+            <x-preview language="blade" :contents="$subtle">
+                <div class="gap-2 space-y-2">
+                    <x-button text="Primary" subtle />
+                    <x-button text="Secondary" color="secondary" subtle />
+                    <x-button text="Slate" color="slate" subtle />
+                    <x-button text="Gray" color="gray" subtle />
+                    <x-button text="Zinc" color="zinc" subtle />
+                    <x-button text="Neutral" color="neutral" subtle />
+                    <x-button text="Stone" color="stone" subtle />
+                    <x-button text="Red" color="red" subtle />
+                    <x-button text="Orange" color="orange" subtle />
+                    <x-button text="Amber" color="amber" subtle />
+                    <x-button text="Yellow" color="yellow" subtle />
+                    <x-button text="Lime" color="lime" subtle />
+                    <x-button text="Green" color="green" subtle />
+                    <x-button text="Emerald" color="emerald" subtle />
+                    <x-button text="Teal" color="teal" subtle />
+                    <x-button text="Cyan" color="cyan" subtle />
+                    <x-button text="Sky" color="sky" subtle />
+                    <x-button text="Blue" color="blue" subtle />
+                    <x-button text="Indigo" color="indigo" subtle />
+                    <x-button text="Violet" color="violet" subtle />
+                    <x-button text="Purple" color="purple" subtle />
+                    <x-button text="Fuchsia" color="fuchsia" subtle />
+                    <x-button text="Pink" color="pink" subtle />
+                    <x-button text="Rose" color="rose" subtle />
+                    <x-button text="Mauve" color="mauve" subtle />
+                    <x-button text="Olive" color="olive" subtle />
+                    <x-button text="Mist" color="mist" subtle />
+                    <x-button text="Taupe" color="taupe" subtle />
+                    <x-button text="Black" color="black" subtle />
+                </div>
+            </x-preview>
+            <p>
+                <x-block>subtle</x-block>
+                borrows the border and background of the
+                <x-refer :doc="['form', 'input']">input</x-refer>
+                and hovers in gray whatever the color. Add
+                <x-block>tinted</x-block>
+                to tint the hover with the color instead:
+            </p>
+            <x-preview language="blade" :contents="$subtleTinted">
+                <div class="inline-flex items-center gap-x-2">
+                    <x-button text="Delete" color="red" subtle icon="trash" />
+                    <x-button
+                        text="Delete"
+                        color="red"
+                        subtle
+                        tinted
+                        icon="trash"
+                    />
+                </div>
+            </x-preview>
+            <x-warning class="mt-4">
+                <x-block>tinted</x-block>
+                is a modifier of
+                <x-block>subtle</x-block>
+                and throws on its own.
+            </x-warning>
+        </div>
+    </x-section>
     <x-section
         title="Unfocus"
         anchor="normal-unfocus"
         description="Suppresses the focus halo when the button is activated by mouse."
     >
-        <x-preview language="blade" :contents="$unfocus">
-            <div class="inline-flex items-center gap-x-2">
-                <x-button text="With Focus" />
-                <x-button text="Without Focus" unfocus />
-            </div>
-        </x-preview>
+        <div class="space-y-4">
+            <x-preview language="blade" :contents="$unfocus">
+                <div class="inline-flex items-center gap-x-2">
+                    <x-button text="With Focus" />
+                    <x-button text="Without Focus" unfocus />
+                </div>
+            </x-preview>
+            <x-code language="blade" :contents="$unfocusConfig" disable-copy />
+            <x-warning info>
+                You can set
+                <x-block>unfocus</x-block>
+                for every button in the
+                <x-refer doc="configuration">configuration file.</x-refer>
+                The key is shared with the circle button. The inline attribute
+                always wins, so
+                <x-block>:unfocus="false"</x-block>
+                keeps a single button focusable by click.
+            </x-warning>
+        </div>
     </x-section>
     <x-separator text="Circle" />
     <x-section title="Basic Usage" anchor="circle-basic-usage">
@@ -559,6 +640,60 @@ class="flex flex-col items-center justify-center space-y-2 sm:flex-row sm:justif
             </div>
         </x-preview>
     </x-section>
+    <x-section
+        title="Subtle Variations"
+        new
+        anchor="circle-subtle-variations"
+        description="The circle button reads the same subtle and tinted props as the normal one."
+    >
+        <div class="space-y-4">
+            <x-preview language="blade" :contents="$circleSubtle">
+                <div class="gap-2 space-y-2">
+                    <x-button.circle icon="bookmark" subtle />
+                    <x-button.circle icon="bookmark" color="secondary" subtle />
+                    <x-button.circle icon="bookmark" color="slate" subtle />
+                    <x-button.circle icon="bookmark" color="gray" subtle />
+                    <x-button.circle icon="bookmark" color="zinc" subtle />
+                    <x-button.circle icon="bookmark" color="neutral" subtle />
+                    <x-button.circle icon="bookmark" color="stone" subtle />
+                    <x-button.circle icon="bookmark" color="red" subtle />
+                    <x-button.circle icon="bookmark" color="orange" subtle />
+                    <x-button.circle icon="bookmark" color="amber" subtle />
+                    <x-button.circle icon="bookmark" color="yellow" subtle />
+                    <x-button.circle icon="bookmark" color="lime" subtle />
+                    <x-button.circle icon="bookmark" color="green" subtle />
+                    <x-button.circle icon="bookmark" color="emerald" subtle />
+                    <x-button.circle icon="bookmark" color="teal" subtle />
+                    <x-button.circle icon="bookmark" color="cyan" subtle />
+                    <x-button.circle icon="bookmark" color="sky" subtle />
+                    <x-button.circle icon="bookmark" color="blue" subtle />
+                    <x-button.circle icon="bookmark" color="indigo" subtle />
+                    <x-button.circle icon="bookmark" color="violet" subtle />
+                    <x-button.circle icon="bookmark" color="purple" subtle />
+                    <x-button.circle icon="bookmark" color="fuchsia" subtle />
+                    <x-button.circle icon="bookmark" color="pink" subtle />
+                    <x-button.circle icon="bookmark" color="rose" subtle />
+                    <x-button.circle icon="bookmark" color="mauve" subtle />
+                    <x-button.circle icon="bookmark" color="olive" subtle />
+                    <x-button.circle icon="bookmark" color="mist" subtle />
+                    <x-button.circle icon="bookmark" color="taupe" subtle />
+                    <x-button.circle icon="bookmark" color="black" subtle />
+                </div>
+            </x-preview>
+            <x-preview language="blade" :contents="$circleSubtleTinted">
+                <div class="inline-flex items-center gap-x-2">
+                    <x-button.circle icon="pencil" subtle />
+                    <x-button.circle icon="trash" color="red" subtle tinted />
+                </div>
+            </x-preview>
+            <x-warning class="mt-4">
+                <x-block>tinted</x-block>
+                is a modifier of
+                <x-block>subtle</x-block>
+                and throws on its own.
+            </x-warning>
+        </div>
+    </x-section>
     <x-section
         title="Unfocus"
         anchor="circle-unfocus"
@@ -568,6 +703,13 @@ class="flex flex-col items-center justify-center space-y-2 sm:flex-row sm:justif
             <x-button.circle icon="x-mark" color="secondary" sm />
             <x-button.circle icon="x-mark" color="secondary" sm unfocus />
         </x-preview>
+        <x-warning info class="mt-4">
+            The circle button reads the same
+            <x-block>unfocus</x-block>
+            key of the
+            <x-refer doc="configuration">configuration file.</x-refer>
+            The inline attribute always wins.
+        </x-warning>
     </x-section>
     <x-separator text="Group" />
     <x-section title="Concept" anchor="group-concept" disable-copy>
@@ -626,4 +768,42 @@ class="flex flex-col items-center justify-center space-y-2 sm:flex-row sm:justif
             </x-button.group>
         </x-preview>
     </x-section>
+    <x-section
+        title="Shadowless"
+        new
+        anchor="group-shadowless"
+        description="An option to drop the shadow of the wrapper."
+    >
+        <div class="space-y-4">
+            <x-preview language="blade" :contents="$groupShadowless">
+                <x-button.group shadowless>
+                    <x-button text="Years" subtle color="secondary" sm />
+                    <x-button text="Months" subtle color="secondary" sm />
+                    <x-button text="Days" subtle color="secondary" sm />
+                </x-button.group>
+            </x-preview>
+            <p>
+                The wrapper carries a
+                <x-block>shadow-xs</x-block>
+                of its own. Use
+                <x-block>shadowless</x-block>
+                with
+                <x-block>subtle</x-block>
+                children, which have no shadow of their own.
+            </p>
+            <x-warning info>
+                The
+                <x-block>shadow-xs</x-block>
+                moved out of
+                <x-block>wrapper.base</x-block>
+                into
+                <x-block>wrapper.shadow</x-block>
+                . A customization that removed it from
+                <x-block>wrapper.base</x-block>
+                should target
+                <x-block>wrapper.shadow</x-block>
+                instead, or use the attribute.
+            </x-warning>
+        </div>
+    </x-section>
 </x-layout>
diff --git a/resources/views/documentation/ui/carousel.blade.php b/resources/views/documentation/ui/carousel.blade.php
index eea302c9..99614b9a 100644
--- a/resources/views/documentation/ui/carousel.blade.php
+++ b/resources/views/documentation/ui/carousel.blade.php
@@ -125,6 +125,159 @@
             />
         </x-preview>
     </x-section>
+    <x-section
+        title="Thumbnails"
+        new
+        description="An option to render a row of small square tiles below the slides."
+    >
+        <div class="space-y-4">
+            <x-preview
+                language="blade"
+                :background="false"
+                :contents="$thumbnails"
+            >
+                <x-carousel
+                    :images="[
+                        ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
+                        ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
+                        ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
+                    ]"
+                    thumbnails
+                />
+            </x-preview>
+            <p>
+                Clicking a tile moves the carousel to that slide and restarts
+                the autoplay timer, exactly like the dot indicators. The tile of
+                the current slide carries a primary ring and
+                <x-block>aria-current="true"</x-block>
+                , the other tiles carry a subtle gray ring. The strip already
+                shows the position, so
+                <x-block>thumbnails</x-block>
+                implies
+                <x-block>without-indicators</x-block>
+                . The tiles follow the
+                <x-block>shuffle</x-block>
+                order and
+                <x-block>round</x-block>
+                applies to them the same way it applies to the slides.
+            </p>
+            <x-preview
+                language="blade"
+                :background="false"
+                :contents="$thumbnailsLimit"
+            >
+                <x-carousel
+                    :images="[
+                        ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
+                        ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
+                        ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
+                        ['src' => url('assets/images/wallpapers/4.jpg'), 'alt' => 'Wallpaper 4'],
+                        ['src' => url('assets/images/wallpapers/5.jpg'), 'alt' => 'Wallpaper 5'],
+                        ['src' => url('assets/images/wallpapers/6.jpg'), 'alt' => 'Wallpaper 6'],
+                        ['src' => url('assets/images/wallpapers/7.jpg'), 'alt' => 'Wallpaper 7'],
+                        ['src' => url('assets/images/wallpapers/8.jpg'), 'alt' => 'Wallpaper 8'],
+                        ['src' => url('assets/images/wallpapers/9.jpg'), 'alt' => 'Wallpaper 9'],
+                    ]"
+                    thumbnails
+                    :limit="5"
+                    round="xl"
+                />
+            </x-preview>
+            <p>
+                <x-block>limit</x-block>
+                caps the number of tiles, six by default. When the carousel
+                holds more images than the limit, the last tile keeps its image
+                under a
+                <x-block>+N</x-block>
+                overlay counting the images left out of the strip. Clicking it
+                moves to that image and the arrows keep going from there. While
+                the current slide sits beyond the visible tiles, the last tile
+                keeps the highlight.
+            </p>
+            <x-preview
+                language="blade"
+                :background="false"
+                :contents="$thumbnailsWithoutHighlight"
+            >
+                <x-carousel
+                    :images="[
+                        ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
+                        ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
+                        ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
+                    ]"
+                    thumbnails
+                    without-highlight
+                />
+            </x-preview>
+            <p>
+                <x-block>without-highlight</x-block>
+                drops the primary ring, so every tile shares the inactive look
+                while
+                <x-block>aria-current</x-block>
+                keeps marking the current slide for assistive technology.
+            </p>
+            <x-preview
+                language="blade"
+                :background="false"
+                :contents="$thumbnailsAutoplay"
+            >
+                <x-carousel
+                    :images="[
+                        ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
+                        ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
+                        ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
+                    ]"
+                    thumbnails
+                    autoplay
+                    :interval="5"
+                    stop-on-hover
+                >
+                    <x-slot:footer>
+                        <p class="mt-2 text-sm text-gray-500">
+                            Click a thumbnail to jump to that photo.
+                        </p>
+                    </x-slot>
+                </x-carousel>
+            </x-preview>
+            <p>
+                The strip sits between the slides and the
+                <x-block>footer</x-block>
+                slot.
+            </p>
+            <x-warning class="mt-4">
+                <x-block>limit</x-block>
+                and
+                <x-block>without-highlight</x-block>
+                require
+                <x-block>thumbnails</x-block>
+                , and
+                <x-block>limit</x-block>
+                must be at least
+                <x-block>2</x-block>
+            </x-warning>
+            <x-warning info class="mt-4">
+                You can turn the strip on for every carousel, and set the
+                default
+                <x-block>limit</x-block>
+                and
+                <x-block>without-highlight</x-block>
+                , in the
+                <x-refer doc="configuration">configuration file.</x-refer>
+                The inline attributes always win, so
+                <x-block>:thumbnails="false"</x-block>
+                hides the strip on a single carousel.
+                <x-block>without-highlight</x-block>
+                is only read when the strip renders, so a carousel without
+                <x-block>thumbnails</x-block>
+                ignores it instead of throwing.
+            </x-warning>
+            <x-code
+                language="php"
+                :contents="$thumbnailsConfiguration"
+                disable-copy
+            />
+        </div>
+    </x-section>
     <x-section title="Image Title & Description">
         <x-preview
             language="blade"
diff --git a/resources/views/documentation/ui/chart.blade.php b/resources/views/documentation/ui/chart.blade.php
index 21a3fe65..3d80234d 100644
--- a/resources/views/documentation/ui/chart.blade.php
+++ b/resources/views/documentation/ui/chart.blade.php
@@ -460,7 +460,7 @@
             </div>
         </x-preview>
     </x-section>
-    <x-section title="Configuration">
+    <x-section title="Configuration" disable-copy>
         <p>
             There are a few things that can be configured using the
             <x-refer doc="configuration">configuration file.</x-refer>
@@ -510,6 +510,7 @@
     <x-section
         title="Invalid Input"
         description="What happens when the data cannot be drawn."
+        disable-copy
     >
         <x-table
             :headers="[
diff --git a/resources/views/documentation/ui/command-palette.blade.php b/resources/views/documentation/ui/command-palette.blade.php
index 8873900e..c892d6b3 100644
--- a/resources/views/documentation/ui/command-palette.blade.php
+++ b/resources/views/documentation/ui/command-palette.blade.php
@@ -84,7 +84,7 @@
             </x-warning>
         </div>
     </x-section>
-    <x-section title="Field Mapping">
+    <x-section title="Field Mapping" disable-copy>
         <div class="space-y-4">
             <p>
                 The
@@ -240,6 +240,7 @@ class offers two response types: redirect the user to a page
     <x-section
         title="AlpineJS Helper"
         description="Helpers to open and close the command palette using AlpineJS."
+        disable-copy
     >
         <x-code language="blade" :contents="$alpinejs" disable-copy />
     </x-section>
@@ -252,7 +253,7 @@ class offers two response types: redirect the user to a page
         configuration. When set to true, the command palette will be centered on
         mobile devices.
     </x-section>
-    <x-section title="Overlay">
+    <x-section title="Overlay" disable-copy>
         <div class="space-y-4">
             <p>
                 By default, the command palette renders a dimmed overlay behind
diff --git a/resources/views/documentation/ui/editor.blade.php b/resources/views/documentation/ui/editor.blade.php
index c017885b..36713909 100644
--- a/resources/views/documentation/ui/editor.blade.php
+++ b/resources/views/documentation/ui/editor.blade.php
@@ -229,6 +229,21 @@ class on every element. Learn more about it below.
                     <x-block>{{ $row["slug"] }}</x-block>
                 @endinteract
             </x-table>
+            <x-code
+                language="blade"
+                :contents="$toolbarTooltip"
+                disable-copy
+            />
+            <x-warning info>
+                Every button names itself through a tooltip that opens as soon
+                as the pointer arrives. You can render the toolbar without any
+                tooltip by setting
+                <x-block>toolbar_tooltip</x-block>
+                to
+                <x-block>false</x-block>
+                in the
+                <x-refer doc="configuration">configuration file.</x-refer>
+            </x-warning>
         </div>
     </x-section>
     <x-section
@@ -269,6 +284,7 @@ class on every element. Learn more about it below.
     <x-section
         title="Markdown Mapping"
         description="Tables, task lists and footnotes are not covered, in either direction."
+        disable-copy
     >
         <x-table
             :headers="[
@@ -297,6 +313,7 @@ class on every element. Learn more about it below.
     <x-section
         title="Markdown Autoformat"
         description="Applied as you type. Ctrl+Z undoes the formatting and keeps the characters. Nothing changes inside a code block."
+        disable-copy
     >
         <x-table
             :headers="[
@@ -320,6 +337,7 @@ class on every element. Learn more about it below.
     <x-section
         title="Image Upload"
         description="An option to allow upload of image using normal Livewire way"
+        disable-copy
     >
         <div class="space-y-4">
             <x-code language="blade" :contents="$uploadBlade" />
@@ -335,7 +353,7 @@ class on every element. Learn more about it below.
             </x-warning>
         </div>
     </x-section>
-    <x-section title="Events">
+    <x-section title="Events" disable-copy>
         <div class="space-y-4">
             <x-code language="blade" :contents="$events" />
             <x-table
@@ -361,7 +379,7 @@ class on every element. Learn more about it below.
             </x-table>
         </div>
     </x-section>
-    <x-section title="Keyboard">
+    <x-section title="Keyboard" disable-copy>
         <x-table
             :headers="[
                 ['index' => 'shortcut', 'label' => 'Shortcut'],
@@ -384,6 +402,7 @@ class on every element. Learn more about it below.
     <x-section
         title="Security"
         description="The sanitizer is defense in depth, not the defense."
+        disable-copy
     >
         <div class="space-y-4">
             <p>
@@ -409,7 +428,7 @@ class on every element. Learn more about it below.
             </x-warning>
         </div>
     </x-section>
-    <x-section title="Configuration">
+    <x-section title="Configuration" disable-copy>
         <p>
             There are a lot things that can be configured using the
             <x-refer doc="configuration">configuration file.</x-refer>
@@ -421,7 +440,9 @@ class on every element. Learn more about it below.
             <x-block>toolbar</x-block>
             ,
             <x-block>output_classes_prefix</x-block>
-            and heights. The default
+            and heights, or turn the toolbar tooltips off with
+            <x-block>toolbar_tooltip</x-block>
+            . The default
             <x-block>min-height</x-block>
             is
             <x-block>12rem</x-block>
diff --git a/resources/views/documentation/ui/environment.blade.php b/resources/views/documentation/ui/environment.blade.php
index d0531586..bf981a47 100644
--- a/resources/views/documentation/ui/environment.blade.php
+++ b/resources/views/documentation/ui/environment.blade.php
@@ -15,7 +15,7 @@
             <x-environment />
         </x-preview>
     </x-section>
-    <x-section title="Beyond Basic, EnvBar">
+    <x-section title="Beyond Basic, EnvBar" disable-copy>
         <div class="space-y-4">
             <p>
                 With the example above you should realize that the environment
@@ -62,7 +62,7 @@
             <x-environment without-branch />
         </x-preview>
     </x-section>
-    <x-section title="Branch Detection Algorithm">
+    <x-section title="Branch Detection Algorithm" disable-copy>
         <div class="space-y-4">
             <p>
                 Internally TallStackUI uses a simple algorithm to get the
@@ -80,7 +80,7 @@
             <x-code :contents="$customAlgorithm" disable-copy />
         </div>
     </x-section>
-    <x-section title="Color Scheme">
+    <x-section title="Color Scheme" disable-copy>
         <div class="space-y-4">
             <p>
                 You may have noticed that there is no way to define component
diff --git a/resources/views/documentation/ui/gallery.blade.php b/resources/views/documentation/ui/gallery.blade.php
index cf0331e3..b8168449 100644
--- a/resources/views/documentation/ui/gallery.blade.php
+++ b/resources/views/documentation/ui/gallery.blade.php
@@ -131,7 +131,7 @@ class="max-w-xl"
             </x-gallery>
         </x-preview>
     </x-section>
-    <x-section title="Events">
+    <x-section title="Events" disable-copy>
         <div class="space-y-4">
             <x-code language="blade" :contents="$events" />
             <x-table
@@ -157,7 +157,7 @@ class="max-w-xl"
             </x-table>
         </div>
     </x-section>
-    <x-section title="Image Object">
+    <x-section title="Image Object" disable-copy>
         <x-table
             :headers="[
                 ['index' => 'key', 'label' => 'Key'],
diff --git a/resources/views/documentation/ui/layout.blade.php b/resources/views/documentation/ui/layout.blade.php
index 6d3f500a..12fbfcd3 100644
--- a/resources/views/documentation/ui/layout.blade.php
+++ b/resources/views/documentation/ui/layout.blade.php
@@ -177,6 +177,27 @@
                 on mobile devices. You will learn more about this as you
                 continue reading the documentation below.
             </p>
+            <p>
+                The icon of the button that collapses the
+                <x-block>side-bar</x-block>
+                into its rail can be replaced through the
+                <x-block>collapse-icon</x-block>
+                attribute:
+            </p>
+            <x-code
+                language="blade"
+                :contents="$headerCollapseIcon"
+                disable-copy
+            />
+            <x-warning info>
+                You can also set
+                <x-block>collapse-icon</x-block>
+                for every header in the
+                <x-refer doc="configuration">configuration file.</x-refer>
+                The attribute wins over the configuration, and both win over the
+                <x-block>collapse.icon</x-block>
+                customization block, which stays the last fallback.
+            </x-warning>
         </div>
     </x-section>
     <x-section
diff --git a/resources/views/documentation/ui/modal.blade.php b/resources/views/documentation/ui/modal.blade.php
index 8be95885..1d07b548 100644
--- a/resources/views/documentation/ui/modal.blade.php
+++ b/resources/views/documentation/ui/modal.blade.php
@@ -377,6 +377,7 @@ class="mt-4"
     <x-section
         title="AlpineJS Helper"
         description="Helpers to open and close the modal using AlpineJS."
+        disable-copy
     >
         <x-code language="blade" :contents="$alpinejs" />
     </x-section>
@@ -431,6 +432,7 @@ class="mt-4"
     <x-section
         title="Focus Helper"
         description="Ah helper to interact with modal events to easily focus an input when modal open."
+        disable-copy
     >
         <div class="space-y-4">
             <x-code language="blade" :contents="$focus" />
diff --git a/resources/views/documentation/ui/slide.blade.php b/resources/views/documentation/ui/slide.blade.php
index f5413e82..7dffe00f 100644
--- a/resources/views/documentation/ui/slide.blade.php
+++ b/resources/views/documentation/ui/slide.blade.php
@@ -198,6 +198,7 @@ class="mt-4"
     <x-section
         title="AlpineJS Helper"
         description="Helpers to open and close the slide using AlpineJS."
+        disable-copy
     >
         <x-code language="blade" :contents="$alpinejs" />
     </x-section>
@@ -252,6 +253,7 @@ class="mt-4"
     <x-section
         title="Focus Helper"
         description="Ah helper to interact with slide events to easily focus an input when slide open."
+        disable-copy
     >
         <div class="space-y-4">
             <x-code language="blade" :contents="$focus" />
diff --git a/resources/views/documentation/ui/tab.blade.php b/resources/views/documentation/ui/tab.blade.php
index fb70006e..f39026a4 100644
--- a/resources/views/documentation/ui/tab.blade.php
+++ b/resources/views/documentation/ui/tab.blade.php
@@ -79,7 +79,7 @@
             </x-tab>
         </x-preview>
     </x-section>
-    <x-section title="Route-Based Tabs">
+    <x-section title="Route-Based Tabs" disable-copy>
         <div class="space-y-4">
             <p>
                 Tabs can be associated with URLs using the
diff --git a/resources/views/documentation/ui/table.blade.php b/resources/views/documentation/ui/table.blade.php
index 4830d9f1..99b2864a 100644
--- a/resources/views/documentation/ui/table.blade.php
+++ b/resources/views/documentation/ui/table.blade.php
@@ -269,6 +269,7 @@ class="underline"
     <x-section
         title="Expandable"
         description="An option to expand rows to display sub-content such as nested tables."
+        disable-copy
     >
         <div class="space-y-4">
             <x-code language="blade" :contents="$expandableNested" />
diff --git a/resources/views/documentation/ui/tooltip.blade.php b/resources/views/documentation/ui/tooltip.blade.php
index 7bdb05a4..9af4db89 100644
--- a/resources/views/documentation/ui/tooltip.blade.php
+++ b/resources/views/documentation/ui/tooltip.blade.php
@@ -201,6 +201,7 @@ class="cursor-help underline"
         title="Styling the Balloon"
         new
         description="The balloon is created by JavaScript and shared by anchors that have no component behind them."
+        disable-copy
     >
         <x-code language="css" :contents="$styling" />
     </x-section>
diff --git a/resources/views/livewire/documentation/form/range.blade.php b/resources/views/livewire/documentation/form/range.blade.php
new file mode 100644
index 00000000..7d916175
--- /dev/null
+++ b/resources/views/livewire/documentation/form/range.blade.php
@@ -0,0 +1,45 @@
+<?php
+
+declare(strict_types=1);
+
+use Livewire\Component;
+
+new class extends Component {
+    public int $mode = 1;
+
+    public array $price = [200, 800];
+
+    public array $budget = [250, 750];
+};
+
+?>
+
+<div>
+    @if ($mode === 1)
+        <div class="space-y-2">
+            <x-range
+                dual
+                wire:model.live="price"
+                :min="0"
+                :max="1000"
+                :step="10"
+                label="Price range"
+            />
+            <p class="dark:text-dark-400 text-sm text-gray-500">
+                Bound value:
+                <b>{{ $price[0] }}</b>
+                to
+                <b>{{ $price[1] }}</b>
+            </p>
+        </div>
+    @elseif ($mode === 2)
+        <x-range
+            dual
+            wire:model="budget"
+            :min="0"
+            :max="1000"
+            color="emerald"
+            tooltip
+        />
+    @endif
+</div>