Name the monospace faces once, as a typeface token and md-mono

Both applications show values a person reads or types character by
character: SealShare's share tokens and recovery codes, ReStride's file
and folder names and its keyboard shortcuts. The package wrote the
platform's monospace stack twice (the reset's <code>, <kbd>, <samp> and
the mono field) and gave everything else nothing, so an app copied the
stack by hand. --md-ref-typeface-mono now holds it, read by the reset,
the field and a new md-mono text class; the guard points font-mono at
<code> or md-mono. Not an M3 token: M3 names a brand and a plain
typeface and nothing for code. Decided with the user (plan step 46).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

resources/boost/skills/livewire-material-development/SKILL.md

@@ -90,7 +90,7 @@ Scheme::resolveProfileUsing(fn (): ?string => Setting::get('color_profile'));
 
 ## Tokens
 
-2.0.0's vocabulary is plain CSS, without Tailwind. `resources/css/foundation.css` is the one required import, first in the entry, followed by the stylesheets of the components the views render (see Setup; 1.x's `material.css` shortcut is gone). It declares the layer order `material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility`, so an application's unlayered CSS beats every package rule, and `hidden` or `x-cloak` hides any element. It brings the reset, the page's `surface` and `on-surface` in the brand typeface smoothed in grayscale (drop Tailwind's `antialiased`), every `--md-sys-*` token (spacing included: `--md-sys-measurement-space25` … `space900`, 2–72px), and `md-state-layer`, `md-focus-ring`, `md-touch-target`, `md-link`. Text on plain elements takes the fixed text classes of `resources/css/text.css` and nothing else: `md-type-{display|headline|title|body|label}-{lg|md|sm}` and `md-type-emphasized-…`; `md-ink` (on-surface), `md-ink-variant`, `md-ink-quiet`, `md-ink-primary`, `md-ink-error`, `md-ink-success`, `md-ink-warning`, `md-ink-info`, `md-ink-inverse`; `md-text-start|center|end`, `md-truncate`, `md-line-clamp-2|3`, `md-nowrap`, `md-tabular`, `md-visually-hidden`. Every component is plain CSS now; the Tailwind names below stay for the showcase and an application's own views, until Tailwind itself leaves the package.
+2.0.0's vocabulary is plain CSS, without Tailwind. `resources/css/foundation.css` is the one required import, first in the entry, followed by the stylesheets of the components the views render (see Setup; 1.x's `material.css` shortcut is gone). It declares the layer order `material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility`, so an application's unlayered CSS beats every package rule, and `hidden` or `x-cloak` hides any element. It brings the reset, the page's `surface` and `on-surface` in the brand typeface smoothed in grayscale (drop Tailwind's `antialiased`), every `--md-sys-*` token (spacing included: `--md-sys-measurement-space25` … `space900`, 2–72px), and `md-state-layer`, `md-focus-ring`, `md-touch-target`, `md-link`. Text on plain elements takes the fixed text classes of `resources/css/text.css` and nothing else: `md-type-{display|headline|title|body|label}-{lg|md|sm}` and `md-type-emphasized-…`; `md-ink` (on-surface), `md-ink-variant`, `md-ink-quiet`, `md-ink-primary`, `md-ink-error`, `md-ink-success`, `md-ink-warning`, `md-ink-info`, `md-ink-inverse`; `md-text-start|center|end`, `md-truncate`, `md-line-clamp-2|3`, `md-nowrap`, `md-tabular`, `md-mono`, `md-visually-hidden`. Monospace is for a value read or typed character by character (a token, a recovery code, a file name, a key): put it in `<code>`, `<kbd>` or `<samp>`, which take `--md-ref-typeface-mono` already, or give another element `md-mono` after its `md-type-*` class; `<x-input mono>` for a field. `--md-ref-typeface-mono` is the package's addition, the platform's monospace faces, not an M3 token. Every component is plain CSS now; the Tailwind names below stay for the showcase and an application's own views, until Tailwind itself leaves the package.
 
 Tailwind's default palette is cleared: every colour class names an M3 role. `text-red-600`, `bg-base-200` or `text-gray-500` compile to nothing. The rules behind the names below — which role, surface container, corner, type style, elevation level, motion spring, state and window size class to use, and M3's don'ts — are the `material-3` guideline (always on) and the `material-3-design` skill (the tables and Google's source pages); activate that skill before designing a screen.
 

resources/css/components/field.css

@@ -123,7 +123,7 @@
     }
 
     [data-md-field][data-md-mono] [data-md-field-control] {
-        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+        font-family: var(--md-ref-typeface-mono);
     }
 
     [data-md-field-control]::placeholder {

resources/css/foundation/reset.css

@@ -78,7 +78,7 @@
     kbd,
     samp,
     pre {
-        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+        font-family: var(--md-ref-typeface-mono);
         font-feature-settings: normal;
         font-variation-settings: normal;
         font-size: 1em;

resources/css/text.css

@@ -42,6 +42,9 @@
  *   md-nowrap                 never wraps: a figure with its unit, a short label
  *   md-tabular                tabular figures, where digits change often (tables, clocks,
  *                             counters), so the layout does not shift
+ *   md-mono                   the monospace typeface (`--md-ref-typeface-mono`), for a value read
+ *                             character by character outside `<code>`; after an `md-type-*` class,
+ *                             whose `font` would otherwise set the brand face
  *   md-visually-hidden        read by assistive technology, not drawn: a label a picture already
  *                             gives the eye
  *
@@ -309,6 +312,10 @@
         font-variant-numeric: tabular-nums;
     }
 
+    .md-mono {
+        font-family: var(--md-ref-typeface-mono);
+    }
+
     .md-visually-hidden {
         position: absolute;
         width: 1px;

resources/css/tokens/type.css

@@ -17,6 +17,12 @@
  * heavier and fully rounded ("ROND" 100) — the axis that typeface exists for, verified by
  * `npm run check:font` — and they carry their own tracking, because M3 widens four of them and
  * takes Display Large's negative tracking back to zero.
+ *
+ * `--md-ref-typeface-mono` is the package's, not M3's (M3 names a brand and a plain typeface and
+ * nothing for code): the platform's own monospace faces, nothing downloaded, for what a person
+ * reads or types character by character — a token, a recovery code, a file or folder name, a key.
+ * `<code>`, `<kbd>` and `<samp>` take it from the reset, a `mono` field from field.css, any other
+ * element from `md-mono` (text.css).
  */
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@@ -25,6 +31,7 @@
     :root {
         --md-ref-typeface-brand: 'Google Sans Flex', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
         --md-ref-typeface-plain: var(--md-ref-typeface-brand);
+        --md-ref-typeface-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
         --md-ref-typeface-weight-regular: 400;
         --md-ref-typeface-weight-medium: 500;
         --md-ref-typeface-weight-bold: 700;