Draw the FAB without Tailwind

Plan step 36. <x-fab> renders data-md-fab with data-md-size,
data-md-color, data-md-variant, data-md-extended and, collapsing on
scroll, data-md-collapse-on-scroll with a bound data-md-collapsed; it
passes its glyph's size to <x-icon>. fab.css draws FabBaseline/Medium/
LargeTokens and ExtendedFab*Tokens per size, the container and filled
colours, elevation 3 and 4 on hover, the state layer and focus ring,
and the collapse morph that leaves actions.css.

data-fab becomes data-md-fab, also in navigation.css (the rail flattens
a nested FAB) and toolbar.css (a docked toolbar's FAB), with their tests.
The actions browser test gains the owed collapse-on-scroll test.

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

resources/css/components/navigation.css

@@ -806,8 +806,8 @@
  * within another component, such as the navigation rail, the FAB's resting elevation should be
  * level 0"). Unlayered on purpose: the FAB draws its shadow with a utility, and a rule in any
  * layer loses to a utility — the same reason toolbar.css gives for its vibrant recolouring. */
-[data-navigation-rail-header] [data-fab],
-[data-navigation-rail-header] [data-fab]:hover {
+[data-navigation-rail-header] [data-md-fab],
+[data-navigation-rail-header] [data-md-fab]:hover {
     box-shadow: none;
 }
 
@@ -821,7 +821,7 @@
  * same reason as the rule above: `gap-2` and `min-w-20` are utilities, and a layer would lose to
  * them. The cap is there because a transition needs a length to travel to; a rail FAB's label is a
  * word or two. */
-[data-navigation-rail-header] [data-fab] > span {
+[data-navigation-rail-header] [data-md-fab] > span {
     max-width: 16rem;
     overflow: hidden;
     white-space: nowrap;
@@ -835,7 +835,7 @@
     }
 }
 
-[data-navigation-rail-header] [data-fab] {
+[data-navigation-rail-header] [data-md-fab] {
     @variant rail-collapsed {
         min-width: 0;
         aspect-ratio: 1;