From e872b2b844d2cdfe6ea0af3da3f24b2ecdaa6c10 Mon Sep 17 00:00:00 2001
From: Arman <arman.khachatryan.dev@gmail.com>
Date: Tue, 11 Aug 2026 01:46:45 +0400
Subject: [PATCH 1/2] Keep datatable styles inside Livewire root

---
 .../livewire/datatables/datatable.blade.php   |  4 +-
 .../hide-column-multiselect.blade.php         |  2 +-
 tests/LivewireDatatableTemplateTest.php       | 46 +++++++++++++++++++
 3 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/resources/views/livewire/datatables/datatable.blade.php b/resources/views/livewire/datatables/datatable.blade.php
index 8e8bf46c..dd82c654 100644
--- a/resources/views/livewire/datatables/datatable.blade.php
+++ b/resources/views/livewire/datatables/datatable.blade.php
@@ -1,6 +1,6 @@
-@include('datatables::theme')
-
 <div class="ld-table">
+    @include('datatables::theme')
+
     @includeIf($beforeTableSlot)
     <div class="relative">
         <div class="ld-toolbar flex items-center justify-between mb-1">
diff --git a/resources/views/livewire/datatables/hide-column-multiselect.blade.php b/resources/views/livewire/datatables/hide-column-multiselect.blade.php
index 3b0fad47..4173e23c 100644
--- a/resources/views/livewire/datatables/hide-column-multiselect.blade.php
+++ b/resources/views/livewire/datatables/hide-column-multiselect.blade.php
@@ -36,7 +36,6 @@
             </div>
         </div>
     </div>
-</div>
 
 <style>
     .top-100 {
@@ -52,3 +51,4 @@
     }
 
 </style>
+</div>
diff --git a/tests/LivewireDatatableTemplateTest.php b/tests/LivewireDatatableTemplateTest.php
index 9acc2405..1189da6b 100644
--- a/tests/LivewireDatatableTemplateTest.php
+++ b/tests/LivewireDatatableTemplateTest.php
@@ -3,12 +3,58 @@
 namespace Arm092\LivewireDatatables\Tests;
 
 use Arm092\LivewireDatatables\Livewire\LivewireDatatable;
+use Arm092\LivewireDatatables\Tests\Classes\SecureDummyTable;
 use Arm092\LivewireDatatables\Tests\Models\DummyModel;
+use DOMDocument;
+use DOMXPath;
 use Livewire\Livewire;
 use PHPUnit\Framework\Attributes\Test;
 
 class LivewireDatatableTemplateTest extends TestCase
 {
+    #[Test]
+    public function the_theme_and_column_picker_styles_stay_inside_the_livewire_root(): void
+    {
+        factory(DummyModel::class, 12)->create([
+            'category' => 'allowed',
+        ]);
+
+        $component = Livewire::test(SecureDummyTable::class, [
+            'hideable' => 'select',
+        ]);
+
+        $document = new DOMDocument;
+        $previous = libxml_use_internal_errors(true);
+        $document->loadHTML('<body>'.$component->html().'</body>', LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
+        libxml_clear_errors();
+        libxml_use_internal_errors($previous);
+
+        $body = $document->getElementsByTagName('body')->item(0);
+        $roots = array_values(array_filter(
+            iterator_to_array($body->childNodes),
+            static fn ($node) => $node->nodeType === XML_ELEMENT_NODE,
+        ));
+
+        $this->assertCount(1, $roots);
+        $this->assertSame('div', $roots[0]->tagName);
+        $this->assertStringContainsString('ld-table', $roots[0]->getAttribute('class'));
+        $this->assertNotSame('', $roots[0]->getAttribute('wire:id'));
+        $this->assertNotSame('', $roots[0]->getAttribute('wire:snapshot'));
+
+        $xpath = new DOMXPath($document);
+        $this->assertGreaterThan(0, $xpath->query('.//*[name() = "style"]', $roots[0])->count());
+        $this->assertGreaterThan(0, $xpath->query('.//*[@*[name() = "wire:click"]]', $roots[0])->count());
+        $this->assertGreaterThan(0, $xpath->query('.//*[@*[name() = "wire:model.live"]]', $roots[0])->count());
+
+        $component->call('sort', 1, 'asc')
+            ->assertSet('sortIndex', 1)
+            ->set('search', 'definitely absent')
+            ->assertSee("There's Nothing to show at the moment")
+            ->set('search', null)
+            ->call('gotoPage', 2)
+            ->assertSet('paginators.page', 2);
+    }
+
     #[Test]
     public function the_default_template_includes_the_scoped_apricode_theme()
     {

From 052789498cc37560a4d8516b9345f237a3acef79 Mon Sep 17 00:00:00 2001
From: Arman <arman.khachatryan.dev@gmail.com>
Date: Tue, 11 Aug 2026 01:47:10 +0400
Subject: [PATCH 2/2] Document the 3.2.2 root fix

---
 CHANGELOG.md | 9 +++++++++
 README.md    | 2 ++
 2 files changed, 11 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 537fcbe8..9f15e8a4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 All notable changes to `livewire-datatables` will be documented in this file
 
+## 3.2.2 ( 2026-08-11 )
+
+### What's Changed
+
+- Keep the default theme inside the datatable's single Livewire root so Livewire 4 attaches `wire:id` and `wire:snapshot` to `.ld-table` instead of the preceding `<style>` element.
+- Keep the column picker styles inside its own container rather than emitting a sibling after the partial.
+- Add a Laravel 13 / Livewire 4 regression covering the root DOM, sort, search, and pagination interactions.
+- Document the view refresh required for applications with published package templates.
+
 ## 3.2.1 ( 2026-08-09 )
 
 ### What's Changed
diff --git a/README.md b/README.md
index 8de6f7a4..91b5543e 100644
--- a/README.md
+++ b/README.md
@@ -41,6 +41,8 @@ This will enable you to modify the blade views and apply your own styling, the d
 
 The default table views include a self-contained Apricode theme with graphite headers, warm paper surfaces, orange primary accents, green success states, pink destructive states, and cyan informational accents. The theme is scoped to the package's own controls, requires no Tailwind configuration, and does not override HTML returned by custom callbacks or column views. Publishing the views remains the supported way to replace or customize the theme.
 
+Livewire 4 requires every component to render one root element. Keep the theme include inside the root ```<div class="ld-table">``` and keep partial-specific styles inside their partial container. After upgrading from 3.2.1 or earlier, applications with published views must refresh ```datatable.blade.php``` and ```hide-column-multiselect.blade.php``` (or move those style blocks manually); avoid overwriting unrelated customized views with a blanket ```vendor:publish --force```.
+
 Several of the built-in dynamic components use Alpine JS, so to remove flickers on page load, make sure you have
 ```css
 [x-cloak] {