Key the views on M3's window size classes, not Tailwind's

Plan step 15. Every `sm:`/`md:`/`lg:`/`xl:` in the components, the showcase
(sections, layout, shell) and the pagination and error views becomes the M3
window size class the audits' breakpoint maps prescribe: the full-screen
dialog, the FAB, the snackbar's width, `radio inline`, the section picker and
the page numbers move from 640px to `medium` (600px, M3's compact boundary,
N-07 / C-07 / IN-28); `button responsive` moves from 1024px to `expanded`
(840px); `section-nav`'s grid-to-row switch from 1280px to `large` (1200px,
N-07); and `drawer pane` from 1280px to `expanded`, where M3 shows two panes
for list-detail (C-07). The pane's default width is now 360dp, M3's fixed
supporting pane at expanded.

Showcase example grids take two columns from `medium` and three or more from
`expanded`; the showcase's own theme picker swaps at `expanded`, the nearest
class boundary to the 768px it used (no M3 rule applies to it).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/components/modal.blade.php

@@ -19,7 +19,8 @@
      high, extra-large corner, elevation 3, a headline-small `title`, body-medium `subtitle` in
      on-surface-variant, and the `actions` slot at the end. `icon` puts a secondary-coloured icon
      above a centred title, as M3 draws a dialog with a hero icon. `fullscreen` makes a dialog that
-     holds a form take the whole screen below `sm`, with a close button and the title in a top bar
+     holds a form take the whole screen on a compact window (below `medium`, 600px — M3 uses
+     full-screen dialogs "only in compact breakpoints"), with a close button and the title in a top bar
      clear of the notch. `persistent` ignores Escape and the scrim, for a dialog that must be
      answered. It opens on the fast spatial spring and closes at once, as M3's do. --}}
 
@@ -58,17 +59,17 @@
         'm-auto max-h-[calc(100dvh-3rem)] w-[calc(100vw-3rem)] max-w-[35rem] min-w-70 overflow-visible bg-transparent p-0 text-on-surface',
         'backdrop:bg-scrim/32',
         'opacity-100 scale-100 starting:opacity-0 starting:scale-95 transition-[opacity,scale] duration-(--md-sys-motion-spatial-fast-duration) ease-spatial-fast',
-        'max-sm:m-0 max-sm:h-dvh max-sm:max-h-none max-sm:w-full max-sm:max-w-none max-sm:min-w-0' => $fullscreen,
+        'max-medium:m-0 max-medium:h-dvh max-medium:max-h-none max-medium:w-full max-medium:max-w-none max-medium:min-w-0' => $fullscreen,
         $attributes->get('class'),
     ])
 >
     <div @class([
         'flex max-h-[inherit] flex-col overflow-y-auto rounded-corner-xl bg-surface-container-high p-6 shadow-elevation-3',
-        'max-sm:h-full max-sm:rounded-none max-sm:p-0 max-sm:pt-[var(--material-safe-top,env(safe-area-inset-top))]' => $fullscreen,
+        'max-medium:h-full max-medium:rounded-none max-medium:p-0 max-medium:pt-[var(--material-safe-top,env(safe-area-inset-top))]' => $fullscreen,
         $boxClass,
     ])>
         @if ($fullscreen)
-            <div class="flex h-16 shrink-0 items-center gap-1 px-1 sm:hidden">
+            <div class="flex h-16 shrink-0 items-center gap-1 px-1 medium:hidden">
                 <x-livewire-material::button icon="close" :tooltip="__('Close')" x-on:click="close()" />
 
                 @if (filled($title))
@@ -77,20 +78,20 @@
             </div>
         @endif
 
-        <div @class(['min-h-0 flex-1', 'max-sm:overflow-y-auto max-sm:px-6 max-sm:pb-6' => $fullscreen])>
+        <div @class(['min-h-0 flex-1', 'max-medium:overflow-y-auto max-medium:px-6 max-medium:pb-6' => $fullscreen])>
             @if (filled($title) || filled($subtitle) || $icon)
                 {{-- A full-screen dialog's bar names it on a phone, so only the subtitle stays there. --}}
-                <div @class(['mb-4', 'max-sm:hidden' => $fullscreen && ! $icon && blank($subtitle), 'text-center' => $icon])>
+                <div @class(['mb-4', 'max-medium:hidden' => $fullscreen && ! $icon && blank($subtitle), 'text-center' => $icon])>
                     @if ($icon)
                         <x-livewire-material::icon :name="$icon" class="mx-auto mb-4 size-6 text-secondary" />
                     @endif
 
                     @if (filled($title))
-                        <h2 id="{{ $id }}-title" @class(['type-headline-sm', 'max-sm:hidden' => $fullscreen && ! $icon])>{{ $title }}</h2>
+                        <h2 id="{{ $id }}-title" @class(['type-headline-sm', 'max-medium:hidden' => $fullscreen && ! $icon])>{{ $title }}</h2>
                     @endif
 
                     @if (filled($subtitle))
-                        <p @class(['type-body-md text-on-surface-variant', 'mt-4' => filled($title) || $icon, 'max-sm:mt-0' => $fullscreen && ! $icon])>{{ $subtitle }}</p>
+                        <p @class(['type-body-md text-on-surface-variant', 'mt-4' => filled($title) || $icon, 'max-medium:mt-0' => $fullscreen && ! $icon])>{{ $subtitle }}</p>
                     @endif
 
                     @if ($separator)
@@ -105,7 +106,7 @@
         @isset($actions)
             <div @class([
                 'flex shrink-0 flex-wrap items-center justify-end gap-2 pt-6',
-                'max-sm:border-t max-sm:border-outline-variant max-sm:px-6 max-sm:py-4' => $fullscreen,
+                'max-medium:border-t max-medium:border-outline-variant max-medium:px-6 max-medium:py-4' => $fullscreen,
             ])>
                 {{ $actions }}
             </div>