diff --git a/resources/views/components/account-menu.blade.php b/resources/views/components/account-menu.blade.php
index b5417baf..00c968a9 100644
--- a/resources/views/components/account-menu.blade.php
+++ b/resources/views/components/account-menu.blade.php
@@ -38,10 +38,10 @@
type="button"
aria-label="{{ $label }}"
data-account-menu
- class="focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-corner-full bg-primary-container type-label-lg text-on-primary-container"
+ class="touch-target focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-corner-full bg-primary-container type-label-lg text-on-primary-container"
>
@if ($image)
-
+
@elseif (filled($initials))
{{ $initials }}
@else
diff --git a/resources/views/components/navigation-rail.blade.php b/resources/views/components/navigation-rail.blade.php
index 469d530c..c9b4fa6a 100644
--- a/resources/views/components/navigation-rail.blade.php
+++ b/resources/views/components/navigation-rail.blade.php
@@ -109,7 +109,7 @@
x-on:click="menu()"
x-bind:aria-label="expanded ? @js(__('Collapse navigation')) : @js(__('Expand navigation'))"
x-bind:aria-expanded="expanded.toString()"
- class="state-layer focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-corner-full text-on-surface-variant after:absolute after:top-1/2 after:left-1/2 after:size-12 after:-translate-x-1/2 after:-translate-y-1/2"
+ class="state-layer touch-target focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-corner-full text-on-surface-variant"
>
diff --git a/resources/views/components/theme-toggle.blade.php b/resources/views/components/theme-toggle.blade.php
index 47181f7a..a364c132 100644
--- a/resources/views/components/theme-toggle.blade.php
+++ b/resources/views/components/theme-toggle.blade.php
@@ -93,7 +93,7 @@
x-bind:aria-pressed="($store.theme.resolved === 'dark').toString()"
x-on:click="$store.theme.toggle()"
@endif
- {{ $attributes->class(['state-layer focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-corner-full text-on-surface-variant transition-[border-radius] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast active:rounded-corner-sm']) }}
+ {{ $attributes->class(['state-layer touch-target focus-ring inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-corner-full text-on-surface-variant transition-[border-radius] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast active:rounded-corner-sm']) }}
>
@if ($mode === 'cycle')
diff --git a/tests/Feature/Components/AppBarTest.php b/tests/Feature/Components/AppBarTest.php
index db85e50b..95760299 100644
--- a/tests/Feature/Components/AppBarTest.php
+++ b/tests/Feature/Components/AppBarTest.php
@@ -86,6 +86,8 @@ it('switches the theme through the store in three shapes', function () {
expect((string) $this->blade(''))
->toContain('data-theme-toggle="toggle"')
->toContain('aria-label="Dark theme"')
+ // 40px drawn, 48px reached: M3's minimum target (N-01).
+ ->toContain('touch-target')
->toContain('$store.theme.toggle()')
->and((string) $this->blade(''))
->toContain('data-theme-toggle="cycle"')
@@ -107,12 +109,15 @@ it('opens an account menu from the initials of a name', function () {
expect($html)
->toContain('aria-label="Account"')
->toContain('data-account-menu')
+ // The 40px avatar reaches 48px, and nothing clips the pseudo-target (N-01).
+ ->toContain('touch-target')
+ ->not->toContain('overflow-hidden')
->toMatch('/>\s*AM\s*<\/button>/')
->toContain('anna@example.com')
->toContain('Settings')
->toContain('data-account-theme')
->toContain('Sign out')
->and((string) $this->blade(''))
- ->toContain('
toContain('
')
->not->toContain('data-account-theme');
});
diff --git a/tests/Feature/Components/NavigationRailTest.php b/tests/Feature/Components/NavigationRailTest.php
index cc571388..99223e02 100644
--- a/tests/Feature/Components/NavigationRailTest.php
+++ b/tests/Feature/Components/NavigationRailTest.php
@@ -22,6 +22,8 @@ it('gives the collapsible, modal and adaptive rails a menu button and the store'
->toContain('data-navigation-rail-menu')
->toContain('aria-label="Collapse navigation"')
->toContain('aria-expanded="true"')
+ // The 40px menu button reaches M3's 48px target through the shared utility (N-01).
+ ->toContain('touch-target')
->not->toContain('data-navigation-rail-scrim')
->not->toContain('x-trap')
->and((string) $this->blade(''))