Rewrite the divider without Tailwind

Plan step 36 (containment group): <x-divider> moves its class lists
into resources/css/components/divider.css, keyed on data-md-divider,
data-md-orientation, data-md-inset/middle and data-md-divider-heading/
-text for the subheader form (DividerTokens.kt; docs/reference/m3
§ Divider). Imported from the Containment block of components.css.

Hooks renamed: none of divider's own (it had no data-* hooks before),
but its rendered attribute order moved data-md-* ahead of role/aria-*,
which ToolbarTest.php's regex for a toolbar's vertical divider depended
on; fixed in the same commit. form.css picks up the @import './divider.css'
its TODO(step 36) marker was waiting on, since form.blade.php renders
<x-divider> and divider.css now carries the material.components layer.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/components.css

@@ -56,5 +56,6 @@
 @import './components/timepicker.css';
 
 /* Containment */
+@import './components/divider.css';
 
 /* Navigation */

resources/css/components/divider.css

@@ -0,0 +1,75 @@
+/*
+ * <x-divider>: M3's divider (DividerTokens.kt, androidx Compose Material 3, Apache-2.0) — a single
+ * 1px outline-variant line, full-width by default, `data-md-inset` 16px from the start or
+ * `data-md-middle` 16px from both ends (docs/reference/m3/components-actions-communication-containment.md
+ * § Divider → Specs: "Divider inset left margin 16dp", "Divider middle-inset left/right margin
+ * 16dp"). A vertical divider (`data-md-orientation="vertical"`) stretches the height of its row
+ * instead of drawing a width.
+ *
+ * `data-md-divider-heading` draws the divider with a subheader, M3's way to head a group in a list
+ * or a menu: the words lead, 4px of gap to the rule that runs on from them, 8px short of the end
+ * and 8px above the next row (the same section's "Space between divider & supporting text 4dp",
+ * "Divider right margin 8dp", "Divider bottom margin 8dp"). The label, `data-md-divider-text`, is
+ * the rich tooltip's subhead type — title-small in on-surface-variant — since the divider's own
+ * page names no type role for it.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@layer material.components {
+    [data-md-divider] {
+        flex-shrink: 0;
+        background-color: var(--md-sys-color-outline-variant);
+    }
+
+    [data-md-divider][data-md-orientation='horizontal'] {
+        width: auto;
+        height: 1px;
+    }
+
+    [data-md-divider][data-md-orientation='vertical'] {
+        width: 1px;
+        align-self: stretch;
+    }
+
+    [data-md-divider][data-md-orientation='horizontal'][data-md-inset] {
+        margin-inline-start: var(--md-sys-measurement-space200);
+    }
+
+    [data-md-divider][data-md-orientation='horizontal'][data-md-middle] {
+        margin-inline: var(--md-sys-measurement-space200);
+    }
+
+    [data-md-divider][data-md-orientation='vertical'][data-md-middle] {
+        margin-block: var(--md-sys-measurement-space100);
+    }
+
+    [data-md-divider-heading] {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        gap: var(--md-sys-measurement-space50);
+        padding-bottom: var(--md-sys-measurement-space100);
+    }
+
+    [data-md-divider-heading][data-md-inset] {
+        margin-inline-start: var(--md-sys-measurement-space200);
+    }
+
+    [data-md-divider-heading][data-md-middle] {
+        margin-inline: var(--md-sys-measurement-space200);
+    }
+
+    [data-md-divider-text] {
+        flex-shrink: 0;
+        color: var(--md-sys-color-on-surface-variant);
+        font: var(--md-sys-typescale-title-sm);
+        letter-spacing: var(--md-sys-typescale-title-sm-tracking);
+    }
+
+    [data-md-divider-heading] [data-md-divider] {
+        flex: 1 1 0%;
+        min-width: 0;
+        margin-inline-end: var(--md-sys-measurement-space100);
+    }
+}

resources/css/components/form.css

@@ -17,7 +17,7 @@
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
 
-/* TODO(step 36): @import './divider.css' once <x-divider> leaves Tailwind (containment stream). */
+@import './divider.css';
 
 @layer material.components {
     [data-md-form] {

resources/views/components/divider.blade.php

@@ -13,7 +13,11 @@
      page names none (docs/reference/m3/components-actions-communication-containment.md
      § Divider → Specs, § Tooltips → Specs). The words stay readable text that names the group
      after them; only the rule is the separator, and `decorative` hides the rule and leaves the
-     words. `text` is for a horizontal divider; a vertical one ignores it. --}}
+     words. `text` is for a horizontal divider; a vertical one ignores it.
+
+     `data-md-divider` is the rule itself, `data-md-orientation="horizontal"|"vertical"` and
+     `data-md-inset`/`data-md-middle` the geometry; `data-md-divider-heading` wraps a subheader's
+     label and its rule (resources/css/components/divider.css draws all four). --}}
 
 @props([
     'vertical' => false,
@@ -23,28 +27,31 @@
     'text' => null,
 ])
 
+@php
+    $orientation = $vertical ? 'vertical' : 'horizontal';
+@endphp
+
 @if (filled($text) && ! $vertical)
-    <div {{ $attributes->class([
+    <div {{ $attributes->merge(array_filter([
-        'flex shrink-0 items-center gap-1 pb-2',
+        'data-md-divider-heading' => true,
-        'ms-4' => $inset,
+        'data-md-inset' => $inset ? true : null,
-        'mx-4' => $middle,
+        'data-md-middle' => $middle ? true : null,
-    ]) }}>
+    ], fn ($value): bool => $value !== null)) }}>
-        <span class="shrink-0 type-title-sm text-on-surface-variant">{{ $text }}</span>
+        <span data-md-divider-text>{{ $text }}</span>
         <div
+            data-md-divider
+            data-md-orientation="horizontal"
             @if ($decorative) aria-hidden="true" @else role="separator" aria-orientation="horizontal" @endif
-            class="me-2 h-px min-w-0 flex-1 bg-outline-variant"
         ></div>
     </div>
 @else
     <div
-        @if ($decorative) aria-hidden="true" @else role="separator" aria-orientation="{{ $vertical ? 'vertical' : 'horizontal' }}" @endif
+        data-md-divider
-        {{ $attributes->class([
+        data-md-orientation="{{ $orientation }}"
-            'shrink-0 bg-outline-variant',
+        @if ($decorative) aria-hidden="true" @else role="separator" aria-orientation="{{ $orientation }}" @endif
-            'h-px w-auto' => ! $vertical,
+        {{ $attributes->merge(array_filter([
-            'w-px self-stretch' => $vertical,
+            'data-md-inset' => $inset && ! $vertical ? true : null,
-            'ms-4' => $inset && ! $vertical,
+            'data-md-middle' => $middle ? true : null,
-            'mx-4' => $middle && ! $vertical,
+        ], fn ($value): bool => $value !== null)) }}
-            'my-2' => $middle && $vertical,
-        ]) }}
     ></div>
 @endif

tests/Feature/Components/ContainmentStylesheetsTest.php

@@ -16,7 +16,7 @@ use NoNameWeb\LivewireMaterial\Tests\Support\ViewClasses;
  * follow. It starts empty: this file lands before any containment component is rewritten.
  */
 dataset('containment components', [
-    //
+    'divider',
 ]);
 
 /**

tests/Feature/Components/DividerTest.php

@@ -1,9 +1,15 @@
 <?php
 
 it('separates horizontally or vertically, inset on request', function () {
-    expect((string) $this->blade('<x-divider />'))->toContain('role="separator"')->toContain('aria-orientation="horizontal"')->toContain('h-px')->toContain('bg-outline-variant')
+    expect((string) $this->blade('<x-divider />'))
-        ->and((string) $this->blade('<x-divider vertical />'))->toContain('aria-orientation="vertical"')->toContain('w-px')
+        ->toContain('data-md-divider')
-        ->and((string) $this->blade('<x-divider inset />'))->toContain('ms-4')
+        ->toContain('data-md-orientation="horizontal"')
+        ->toContain('role="separator"')
+        ->toContain('aria-orientation="horizontal"')
+        ->and((string) $this->blade('<x-divider vertical />'))
+        ->toContain('data-md-orientation="vertical"')
+        ->toContain('aria-orientation="vertical"')
+        ->and((string) $this->blade('<x-divider inset />'))->toContain('data-md-inset')
         ->and((string) $this->blade('<x-divider decorative />'))->toContain('aria-hidden="true"')->not->toContain('role="separator"');
 });
 
@@ -11,11 +17,11 @@ it('heads a group with a subheader, the rule running on from the words', functio
     $html = (string) $this->blade('<x-divider text="Recent" />');
 
     expect($html)
-        ->toContain('flex shrink-0 items-center gap-1 pb-2')
+        ->toContain('data-md-divider-heading')
-        ->toContain('<span class="shrink-0 type-title-sm text-on-surface-variant">Recent</span>')
+        ->toContain('<span data-md-divider-text>Recent</span>')
-        ->toMatch('/role="separator" aria-orientation="horizontal"\s+class="me-2 h-px min-w-0 flex-1 bg-outline-variant"/')
+        ->toMatch('/data-md-divider\s+data-md-orientation="horizontal"\s+role="separator" aria-orientation="horizontal"/')
         ->and(strpos($html, 'Recent'))->toBeLessThan(strpos($html, 'role="separator"'))
-        ->and((string) $this->blade('<x-divider text="Recent" inset />'))->toContain('flex shrink-0 items-center gap-1 pb-2 ms-4')
+        ->and((string) $this->blade('<x-divider text="Recent" inset />'))->toContain('data-md-divider-heading')->toContain('data-md-inset')
         ->and((string) $this->blade('<x-divider text="Recent" decorative />'))
         ->toContain('>Recent</span>')
         ->toContain('aria-hidden="true"')

tests/Feature/Components/ToolbarTest.php

@@ -14,7 +14,7 @@ it('gives a docked toolbar the rounded large-screen form on request, and only a
     expect($docked)
         ->toMatch('/role="toolbar"[^>]*data-variant="docked"\s+data-rounded/')
         // The divider between two groups is the toolbar's child, where toolbar.css stands it up.
-        ->toMatch('/role="toolbar".*aria-label="Undo".*<div\s+role="separator" aria-orientation="vertical"[^>]*>\s*<\/div>.*aria-label="Bold"/s')
+        ->toMatch('/role="toolbar".*aria-label="Undo".*<div\s+data-md-divider\s+data-md-orientation="vertical"\s+role="separator" aria-orientation="vertical"[^>]*>\s*<\/div>.*aria-label="Bold"/s')
         ->and((string) $this->blade('<x-toolbar rounded><x-button icon="undo" tooltip="Undo" /></x-toolbar>'))
         ->toContain('data-variant="floating"')
         ->not->toContain('data-rounded')