Head a group with M3's divider-with-subheader

Plan step 23, containment.md § Missing ("Divider: the divider-with-text /
subheader configuration"). `<x-divider text="…">` draws the label at the
start and the rule running on from it, with the divider specs table's
geometry: 4dp between the words and the rule, 8dp right margin, 8dp
bottom margin. The label is M3's subhead — title-small in
on-surface-variant, the only subhead type M3 publishes (the rich
tooltip's specs), since the divider page names none. The words stay text
naming the group; only the rule is the separator.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/showcase/sections/containment.blade.php

@@ -98,6 +98,19 @@
                 <div class="flex h-10 items-center gap-4"><span>Left</span><x-divider vertical /><span>Right</span></div>
             </div>
             BLADE,
+        'A divider with a subheader' => <<<'BLADE'
+            <div class="w-full max-w-md">
+                <x-divider text="Today" />
+                <x-list label="Today">
+                    <x-list-item title="holiday-photos.zip" description="Shared with 3 people" icon="folder_zip" />
+                    <x-list-item title="contract.pdf" description="Downloaded twice" icon="picture_as_pdf" />
+                </x-list>
+                <x-divider text="Earlier this week" class="mt-2" />
+                <x-list label="Earlier this week">
+                    <x-list-item title="minutes.docx" description="Expired" icon="description" />
+                </x-list>
+            </div>
+            BLADE,
         'Collapse bound to a property' => <<<'BLADE'
             <div x-data="{ advanced: false }" class="w-full space-y-4">
                 <div class="flex flex-wrap items-center gap-4">