diff --git a/resources/css/components/fab.css b/resources/css/components/fab.css
index da57d3f4..26de0278 100644
--- a/resources/css/components/fab.css
+++ b/resources/css/components/fab.css
@@ -12,9 +12,10 @@
  * A FAB and its extended form share the height and the corner. `data-md-color` is `primary`,
  * `secondary` or `tertiary`, drawn in its container (`data-md-variant="container"`) or in the
  * colour itself (`filled`), at elevation 3, 4 under a hovering pointer, the shadow and colours on
- * the fast effects spring. The state layer and focus ring are the declarations of the foundation's
- * `md-state-layer` and `md-focus-ring`. `data-md-fab` on the root is also the hook a place uses to
- * draw a nested FAB its own way: a navigation rail or a docked toolbar flattens it to elevation 0.
+ * the fast effects spring. It renders the foundation's `md-state-layer` and `md-focus-ring`
+ * (foundation/interaction.css); every size draws at 56px or more, so it needs no `md-touch-target`.
+ * `data-md-fab` on the root is also the hook a place uses to draw a nested FAB its own way: a
+ * navigation rail or a docked toolbar flattens it to elevation 0.
  *
  * `data-md-collapse-on-scroll` is M3's extended FAB that "can collapse to a FAB on scroll-down and
  * re-expand to extended on scroll-up — when switching between FAB↔extended FAB, shape changes, the
@@ -42,8 +43,6 @@
         --md-fab-container: var(--md-sys-color-primary-container);
         --md-fab-on-container: var(--md-sys-color-on-primary-container);
 
-        position: relative;
-        isolation: isolate;
         display: inline-flex;
         flex-shrink: 0;
         align-items: center;
@@ -57,44 +56,14 @@
         cursor: pointer;
         -webkit-user-select: none;
         user-select: none;
-        outline: none;
         transition-property: box-shadow, background-color, color;
         transition-duration: var(--md-sys-motion-effects-fast-duration);
         transition-timing-function: var(--md-sys-motion-effects-fast);
 
-        &::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            z-index: -1;
-            border-radius: inherit;
-            background-color: currentColor;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast);
-        }
-
         @media (hover: hover) {
             &:hover {
                 box-shadow: var(--md-sys-elevation-4);
             }
-
-            &:hover::before {
-                opacity: var(--md-sys-state-hover-state-layer-opacity);
-            }
-        }
-
-        &:focus-visible {
-            outline: 3px solid var(--md-sys-color-secondary);
-            outline-offset: 2px;
-        }
-
-        &:focus-visible::before {
-            opacity: var(--md-sys-state-focus-state-layer-opacity);
-        }
-
-        &:active::before {
-            opacity: var(--md-sys-state-pressed-state-layer-opacity);
         }
     }
 
diff --git a/resources/views/components/fab.blade.php b/resources/views/components/fab.blade.php
index c635cfa1..94f140e4 100644
--- a/resources/views/components/fab.blade.php
+++ b/resources/views/components/fab.blade.php
@@ -73,7 +73,7 @@
         'x-bind:data-md-collapsed' => $collapsing ? "collapsed ? '' : null" : null,
         'aria-label' => ! $extended && ! $attributes->has('aria-label') ? $tooltip : null,
         'style' => $anchor ? "anchor-name: {$anchor}" : null,
-    ], fn ($value): bool => $value !== null));
+    ], fn ($value): bool => $value !== null))->class(['md-state-layer', 'md-focus-ring']);
 @endphp
 
 <{{ $tag }} {{ $attributes }}>
diff --git a/tests/Feature/Components/FabTest.php b/tests/Feature/Components/FabTest.php
index 7cd5c4cf..58d58671 100644
--- a/tests/Feature/Components/FabTest.php
+++ b/tests/Feature/Components/FabTest.php
@@ -114,7 +114,15 @@ it('collapses an extended FAB to a FAB on scroll when asked', function () {
 });
 
 it('marks its root for the places that draw a nested FAB their own way', function () {
-    expect((string) $this->blade('<x-fab icon="add" aria-label="New" />'))->toContain('data-md-fab')->not->toContain('class=');
+    expect((string) $this->blade('<x-fab icon="add" aria-label="New" />'))->toContain('data-md-fab')
+        ->toContain('class="md-state-layer md-focus-ring"');
+});
+
+it('draws its state layer and focus ring from the foundation\'s shared classes, not its own', function () {
+    $css = ComponentStylesheet::read('fab');
+
+    expect($css->has('[data-md-fab]::before'))->toBeFalse()
+        ->and($css->has('[data-md-fab]:focus-visible'))->toBeFalse();
 });
 
 it('cannot be disabled, because M3 says to remove a FAB instead', function () {