Teach the ink classes and lines on the Colour page again

Plan step 38 review: the Colour section dropped its "Ink and lines"
group with the retired Tailwind ink names and put nothing in its
place, so no page showed the md-ink-* classes that replaced them or
how to draw a line. A new "Ink and lines" example writes md-ink,
md-ink-variant and md-ink-quiet with their roles, the state inks, and
a line as <x-divider> and an edge as <x-surface outlined>.

Doc comments teach too: the Icons intro showed optical="20" alone for
a 20px icon, where <x-icon size="20"> picks the cut itself; icon's
header still spoke of a caller's size-5 class, the navigation rail's
usage wrapped it in flex/min-w-0 utilities, and the menu item's
icon-class example named a Tailwind-style text- class.

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

resources/views/components/icon.blade.php

@@ -8,9 +8,8 @@
      falls back to 24, and `filled` combines with either. M3's optical size axis redraws a
      symbol so its strokes look equally heavy at every size, which means an icon drawn at
      20px or smaller uses the 20 cut: scaling the 24 cut down to 20px instead makes its
-     strokes about a sixth too thin (docs/reference/m3/styles.md § Icons). The cut and the
+     strokes about a sixth too thin (docs/reference/m3/styles.md § Icons). `size` makes that
-     size are separate decisions, so a caller that draws `size-5` passes `optical="20"`
+     choice for you; `optical` is for an icon sized some other way, by the caller's own CSS.
-     with it; the components that size their own icons do that for you.
 
      Decorative by default and hidden from screen readers, because nearly every icon sits
      beside words that already say what it means. Pass `label` when the icon alone carries
@@ -19,9 +18,8 @@
      `size` is the drawn size in px (`16`, `18`, `20`, `24`, `32`, `40`, `48` …, any whole number
      from 8 to 256; 24 when left out), written as `--md-icon-size` and drawn by
      resources/css/components/icon.css. An icon given a size of 20 or less takes the 20 cut
-     unless `optical` says otherwise, which is M3's rule. A size class from the caller still
+     unless `optical` says otherwise, which is M3's rule. A caller's unlayered class or `style`
-     works while the components that pass one are rewritten (plan step 36): a utility outranks
+     setting a width and height still outranks the package's layer.
-     the package's layer.
 
      `mirror-rtl` flips a directional symbol (an arrow, a chevron) in a right-to-left document,
      as M3's bidirectionality rules ask; symbols that mean the same in both directions do not

resources/views/components/menu-item.blade.php

@@ -30,9 +30,9 @@
      come back to the item, and Escape closes nothing more.
 
      `icon-class` is for an icon whose colour means something of its own, a sport's glyph in the
-     sport's colour (`icon-class="text-sport-run"`). A colour there paints the icon over the ink
+     sport's colour (`icon-class="sport-run"`, the application's own class). A colour there paints
-     this file gives it, because a caller's unlayered class always outranks the package's layer —
+     the icon over the ink this file gives it, because a caller's unlayered class always outranks
-     except a disabled item's icon, which stays disabled regardless.
+     the package's layer — except a disabled item's icon, which stays disabled regardless.
 
      48px tall (M3's published row height wins over SegmentedMenuTokens' own 44dp, ACT-28),
      body-large label, 20px icons, 16px either side (SegmentedMenuTokens' Expressive spacing,

resources/views/components/navigation-rail.blade.php

@@ -1,9 +1,9 @@
 {{-- M3 Expressive's navigation rail: destinations down the start edge of a `medium` or wider
      window, collapsed (96px, icon over label) or expanded (icon beside label in a full-width pill).
 
-         <div class="flex min-h-dvh">
+         <x-row align="stretch" style="min-height: 100dvh">
              <x-navigation-rail mode="collapsible">
-                 <x-slot:brand><span class="type-title-lg">Mail</span></x-slot:brand>
+                 <x-slot:brand><span class="md-type-title-lg">Mail</span></x-slot:brand>
                  <x-slot:header>
                      <x-fab label="Compose" icon="edit" />
                  </x-slot:header>
@@ -18,8 +18,8 @@
                  </x-slot:footer>
              </x-navigation-rail>
 
-             <main class="min-w-0 flex-1">…</main>
+             <main style="flex: 1; min-width: 0">…</main>
-         </div>
+         </x-row>
 
      `mode` says what decides its width:
      - `collapsed` — always collapsed; `expanded` — always expanded.

resources/views/showcase/sections/colour.blade.php

@@ -25,6 +25,27 @@
         'Contrast level' => <<<'BLADE'
             <x-theme-toggle mode="contrast" />
             BLADE,
+        'Ink and lines' => <<<'BLADE'
+            <x-stack gap="space200" style="width: 100%;">
+                <p class="md-type-body-lg md-ink">Text reads in <code>md-ink</code>, on-surface.</p>
+                <p class="md-type-body-md md-ink-variant">Secondary text and metadata in <code>md-ink-variant</code>, on-surface-variant.</p>
+                <x-row gap="space100" align="center">
+                    <x-icon name="drag_indicator" class="md-ink-quiet" />
+                    <span class="md-type-body-md md-ink-variant">Decoration in <code>md-ink-quiet</code>, outline: never text that has to be read.</span>
+                </x-row>
+                <x-row gap="space200" wrap align="center">
+                    <span class="md-type-label-lg md-ink-primary">md-ink-primary</span>
+                    <span class="md-type-label-lg md-ink-error">md-ink-error</span>
+                    <span class="md-type-label-lg md-ink-success">md-ink-success</span>
+                    <span class="md-type-label-lg md-ink-warning">md-ink-warning</span>
+                    <span class="md-type-label-lg md-ink-info">md-ink-info</span>
+                </x-row>
+                <x-divider />
+                <x-surface outlined corner="md" padding="space200">
+                    <p class="md-type-body-md md-ink-variant">A line between groups is <code>&lt;x-divider&gt;</code>, an edge around a region <code>&lt;x-surface outlined&gt;</code>; both draw outline-variant.</p>
+                </x-surface>
+            </x-stack>
+            BLADE,
     ];
 @endphp
 

resources/views/showcase/sections/icons.blade.php

@@ -23,11 +23,11 @@
     <p class="md-type-body-md md-ink-variant">
         Every Material Symbol (Rounded, 400, grade 0) as <code>&lt;x-icon name="…" /&gt;</code>, outlined or <code>filled</code>,
         drawn from the optical size 24 cut or — for an icon 20px or smaller, where 24's strokes would look thin —
-        the 20 cut: <code>&lt;x-icon name="…" optical="20" /&gt;</code>.
+        the 20 cut, which <code>size</code> picks on its own: <code>&lt;x-icon name="…" size="20" /&gt;</code>.
     </p>
 
     <p class="md-type-body-md md-ink-variant" data-test="when-to-use">
-        <code>filled</code> means active or selected; <code>optical="20"</code> when an icon is drawn at 20px or less; one weight per group. An icon takes the size and colour of the text beside it. An icon-only control carries an accessible name; a decorative icon is hidden.
+        <code>filled</code> means active or selected; <code>size</code> for any size but 24 (20 or less draws the 20 cut, and <code>optical</code> chooses a cut by hand); one weight per group. An icon takes the size and colour of the text beside it. An icon-only control carries an accessible name; a decorative icon is hidden.
     </p>
 
     <x-livewire-material::row gap="space200" wrap align="center">