Give a docked toolbar M3's rounded large-screen form

Plan step 25, item 8 (navigation Missing: "Toolbar, large-screen
treatments"). M3's toolbar guidelines (Adaptive design, Resizing) say it
of the docked toolbar: "On web and large screens, the docked toolbar can
be rounded. Dividers can be used to organize large amounts of items",
and it can be placed in different parts of the page. `rounded` does that
from expanded (840px): fully rounded, spanning its container, lifted
16px off the window's edges at place="bottom"; below expanded it stays
the square full-width bar. An <x-divider vertical /> between groups of
controls stands as tall as the icon buttons inside any toolbar. The
floating toolbar is already fully rounded and gets no new form.

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

resources/views/components/toolbar.blade.php

@@ -11,6 +11,17 @@
      one beside a floating toolbar keeps its own. It is one of the toolbar's controls then, so the
      arrow keys reach it. `label` names it for screen readers.
 
+     `rounded` gives a docked toolbar the form M3 lets it take on web and large screens: "the docked
+     toolbar can be rounded. Dividers can be used to organize large amounts of items", and it "can be
+     … placed in different parts of the page" (docs/reference/m3/components-navigation-selection-inputs.md
+     § Toolbars → Behaviour and guidelines; toolbars/guidelines § Adaptive design → Resizing). From `expanded`
+     (840px) it is a fully rounded bar that spans what it is written in, and at `place="bottom"` it
+     lifts clear of the window's edges; below `expanded` it is the square, full-width docked toolbar,
+     as M3 requires there. Separate groups of controls with `<x-divider vertical />` between them (in
+     a vertical toolbar, `<x-divider />`): inside a toolbar it stands as tall as an icon button rather
+     than across the whole bar. The floating toolbar has no such form — it is fully rounded already,
+     and M3's large-screen advice for it is to show more controls, or two toolbars at opposite edges.
+
      A docked toolbar and a navigation bar occupy the same region of the screen and M3 says never to
      show both at once: the bar belongs on a primary page, the toolbar on a secondary or contextual
      one. Either way a toolbar placed at `bottom` clears `--material-bottom-bar`, so it is never
@@ -26,12 +37,14 @@
     'vertical' => false,
     'place' => null,
     'label' => null,
+    'rounded' => false,
 ])
 
 @php
     $variant = $variant === 'docked' ? 'docked' : 'floating';
     $vertical = $vertical && $variant === 'floating';
     $place = in_array($place, ['bottom', 'end'], true) ? $place : null;
+    $rounded = $rounded && $variant === 'docked';
     $grouped = isset($fab) && $variant === 'floating';
     $docksFab = isset($fab) && $variant === 'docked';
 @endphp
@@ -48,6 +61,7 @@
     data-variant="{{ $variant }}"
     @if ($vertical) data-vertical aria-orientation="vertical" @endif
     @if ($vibrant && $variant === 'floating') data-vibrant @endif
+    @if ($rounded) data-rounded @endif
     @if ($place && ! $grouped) data-toolbar-place="{{ $place }}" @endif
     @if (filled($label)) aria-label="{{ $label }}" @endif
     {{ $attributes }}

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

@@ -96,6 +96,19 @@
                         <x-slot:fab><x-fab icon="add" tooltip="New note" color="secondary" /></x-slot:fab>
                     </x-toolbar>
                 </div>
+
+                {{-- M3's docked toolbar on a large screen: rounded from 840px, its groups of controls divided. Narrower, it is the square docked bar. --}}
+                <div class="w-full overflow-hidden rounded-corner-lg bg-surface expanded:p-4">
+                    <x-toolbar variant="docked" rounded label="Text formatting">
+                        <x-button icon="undo" tooltip="Undo" />
+                        <x-button icon="redo" tooltip="Redo" />
+                        <x-divider vertical />
+                        <x-button icon="format_bold" tooltip="Bold" :selected="false" />
+                        <x-button icon="format_italic" tooltip="Italic" :selected="false" />
+                        <x-divider vertical />
+                        <x-button icon="link" tooltip="Insert link" />
+                    </x-toolbar>
+                </div>
             </div>
             BLADE,
         'Primary tabs' => <<<'BLADE'