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/section-nav.blade.php

@@ -2,8 +2,10 @@
      single destination in the app's own navigation.
 
      `items`, a list of `['title' => …, 'url' => …]` with an optional `icon`, `active` and `badge`
-     (an item is current when `active` is true, or when its `url` is the page's). From `sm` they
-     are M3's secondary tabs as links, the current one underlined; below `sm`, where a row of them
+     (an item is current when `active` is true, or when its `url` is the page's). From `medium`
+     (600px) they
+     are M3's secondary tabs as links, the current one underlined; on a compact window, where a row
+     of them
      never fits, a button naming the current section opens a menu of all of them, the current one
      marked `aria-current="page"` and each with its badge. The same list is
      rendered for both, and CSS shows one.
@@ -11,7 +13,8 @@
      The page's URL is `Livewire::originalUrl()`: while a Livewire component on the page updates, the
      request is Livewire's update endpoint, and comparing with it left no section lit.
 
-     A row too long for its column wraps onto a grid rather than scrolling: below `xl` five or six
+     A row too long for its column wraps onto a grid rather than scrolling: below `large` (1200px)
+     five or six
      sections go 3 + 3 and seven or more go four to a row — tabs that scroll hid the last sections on
      a tablet. `label` names the navigation ("Sections"). Links use `wire:navigate` unless
      `no-wire-navigate`. --}}
@@ -29,15 +32,15 @@
     $current = collect($items)->first($isCurrent) ?? ($items[0] ?? null);
 
     $layout = match (true) {
-        count($items) < 5 => 'sm:flex',
-        count($items) < 7 => 'sm:grid sm:grid-cols-3 xl:flex',
-        default => 'sm:grid sm:grid-cols-4 xl:flex',
+        count($items) < 5 => 'medium:flex',
+        count($items) < 7 => 'medium:grid medium:grid-cols-3 large:flex',
+        default => 'medium:grid medium:grid-cols-4 large:flex',
     };
 @endphp
 
 <div {{ $attributes->class(['min-w-0']) }} data-section-nav>
     @if ($current)
-        <div class="sm:hidden" data-section-picker>
+        <div class="medium:hidden" data-section-picker>
             <x-livewire-material::menu :$label position="bottom-start">
                 <x-slot:trigger>
                     <button type="button" class="focus-ring flex h-12 w-[min(20rem,calc(100vw-2rem))] cursor-pointer items-center gap-3 rounded-corner-xs border border-outline px-4 text-start type-body-lg text-on-surface">
@@ -56,7 +59,7 @@
         </div>
     @endif
 
-    <nav aria-label="{{ $label }}" class="max-sm:hidden">
+    <nav aria-label="{{ $label }}" class="max-medium:hidden">
         <ul data-tabs-bar data-variant="secondary" class="{{ $layout }}">
             @foreach ($items as $item)
                 @php($on = $isCurrent($item))