Let a docked toolbar carry a FAB

Plan step 25 (navigation Missing): M3's toolbar configuration table lists
"With FAB" for both toolbars, but the `fab` slot was gated to the floating one.
A docked toolbar now takes it at its end, inside the toolbar where the arrow
keys reach it; its controls gather at the start, and the FAB rests flat on the
bar — elevation 0 for a FAB nested in another component, as Compose's
bottomAppBarFabElevation is.

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

resources/css/components/toolbar.css

@@ -3,7 +3,8 @@
  * Apache-2.0).
  *
  *   docked     a 64px bar across the bottom of the screen in surface-container, square, its
- *              controls spread out 4 to 32px apart between 16px ends
+ *              controls spread out 4 to 32px apart between 16px ends; with a FAB, the controls
+ *              at the start and the FAB flat at the end
  *   floating   a 64px pill in surface-container (or primary-container, `vibrant`) at elevation 3,
  *              8px at its ends and 4px between controls; `vertical` stands it on end
  *
@@ -71,6 +72,24 @@
     color: var(--md-sys-color-primary);
 }
 
+/* A docked toolbar with a FAB: the controls at the start, the FAB at the end, resting on the bar
+   at elevation 0 — M3 puts a FAB nested in another component there, and Compose's
+   FloatingActionButtonDefaults.bottomAppBarFabElevation() is 0 in every state. `<x-fab>` draws its
+   shadow with utilities, which is one more reason this file is unlayered. */
+[data-toolbar][data-variant="docked"]:has(> [data-toolbar-fab]) {
+    justify-content: flex-start;
+}
+
+[data-toolbar-fab] {
+    display: flex;
+    margin-inline-start: auto;
+}
+
+[data-toolbar-fab] [data-fab],
+[data-toolbar-fab] [data-fab]:hover {
+    box-shadow: none;
+}
+
 /* A floating toolbar and its FAB, side by side (or stacked, vertical). */
 [data-toolbar-group] {
     display: inline-flex;