docs: update README and demo for .bleed-* class rename and 60ch default

Author: Leftium

README.md

@@ -92,14 +92,15 @@ That's it. Write semantic HTML and it just works.
 
 ## Utility Classes
 
-Content is centered at `720px` by default — no class needed. These opt-in utilities handle the rest. Disable all with `$enable-utilities: false`.
+Content is centered at `60ch` by default — no class needed. These opt-in utilities handle the rest. Disable all with `$enable-utilities: false`.
 
 | Class | Description |
 |---|---|
 | `.fluid` | Full viewport width with padding (opt out of centering) |
 | `.container` | Re-center content inside a `.fluid` layout |
-| `.full-bleed` | Break out of centered layout to full width |
-| `.wide` | Break out to wide max-width (1200px) |
+| `.bleed-full` | Break out of centered layout to full viewport width |
+| `.bleed-wide` | Break out to wide max-width (1200px) |
+| `.bleed-edge` | Break out to shadow/paper edge (tracks shadow visibility) |
 | `.striped` | Striped table rows (apply to table wrapper) |
 | `.visually-hidden` | Hidden visually, accessible to screen readers |
 | `.overflow-auto` | Scrollable container |
@@ -109,19 +110,19 @@ Content is centered at `720px` by default — no class needed. These opt-in util
 nimble.css styles can conflict with third-party components (datatables, rich text editors, etc.) that expect unstyled elements. Add `.no-nimble` to opt out of nimble's component styles inside a subtree:
 
 ```html
-<main class="fluid full-bleed">
+<main class="fluid bleed-full">
   <h1>Styled by nimble</h1>
 
   <!-- Third-party component: nimble styles don't apply inside -->
-  <div class="no-nimble full-bleed">
+  <div class="no-nimble bleed-full">
     <ThirdPartyDataTable />
   </div>
 </main>
 ```
 
 **What's excluded:** Typography, links, buttons, forms, tables, code, media, article, details, dialog, and non-layout utilities.
 
-**What still applies:** Reset, colors/custom properties, body grid, layout utilities (`.fluid`, `.full-bleed`, `.wide`, `.container`), and print styles. This means layout classes work on `.no-nimble` elements.
+**What still applies:** Reset, colors/custom properties, body grid, layout utilities (`.fluid`, `.bleed-full`, `.bleed-wide`, `.bleed-edge`, `.container`), and print styles. This means layout classes work on `.no-nimble` elements.
 
 This works via CSS `@scope` (Chrome 118+, Safari 17.4+, Firefox 128+). To disable scoping entirely (smaller output, no opt-out):
 
@@ -161,7 +162,7 @@ Override at runtime — no build step needed. Hover and focus states auto-derive
   /* Layout */
   --nc-spacing: 1rem;
   --nc-radius: 0.25rem;
-  --nc-content-width: 720px;
+  --nc-content-width: 60ch;
 }
 ```
 
@@ -219,7 +220,7 @@ Build a CSS file with new defaults. SCSS-unique options listed first; the rest m
   // Layout
   $spacing: 1rem,
   $radius: 0.25rem,
-  $content-width: 720px,
+  $content-width: 60ch,
 );
 ```
 

demo/extended.html

@@ -234,7 +234,7 @@ <h3>Striped Table</h3>
       <!-- ============================================================ -->
       <section id="layout">
         <h2>Layout Utilities</h2>
-        <p>The default body grid centers content at <code>--nc-content-width</code> (720px). These utilities break out of the center column.</p>
+        <p>The default body grid centers content at <code>--nc-content-width</code> (60ch). These utilities break out of the center column.</p>
       </section>
     </main>
 

specs/pico-migration.md

@@ -261,7 +261,7 @@ Content is always centered with real padding. No breakpoints needed. This means:
 - The `.container` class exists but serves a different purpose (re-centering inside `.fluid` layouts).
 - Breakout content uses `.bleed-edge` (shadow boundary), `.bleed-wide` (1200px), or `.bleed-full` (viewport).
 
-**Migration note:** If your Pico project wraps everything in `<main class="container">`, you can keep it (nimble's `.container` applies `max-width` + `margin-inline: auto`), but you may not need it. The body grid already centers direct children at `--nc-content-width` (720px).
+**Migration note:** If your Pico project wraps everything in `<main class="container">`, you can keep it (nimble's `.container` applies `max-width` + `margin-inline: auto`), but you may not need it. The body grid already centers direct children at `--nc-content-width` (`60ch`).
 
 ### 3.3 Container Width
 

specs/vanilla-migration.md

@@ -129,7 +129,7 @@ Projects with form elements (rift-transcription, veneer, weather-sense) have han
 - Create or update `src/app.css` with nimble import
 - Update `+layout.svelte` to import app.css
 - Remove duplicated `max-width`/`margin`/`padding`/`font-family` from 3 pages
-- Set `--nc-content-width: 640px` (narrower than nimble's 720px default)
+- Set `--nc-content-width: 640px` (narrower than nimble's `60ch` default)
 - Possibly add `.no-nimble` on TranscriptArea container
 - Remove or reduce custom form styles that nimble now provides
 
@@ -241,7 +241,7 @@ Projects with form elements (rift-transcription, veneer, weather-sense) have han
 - **Custom elements everywhere** — `<d-item>`, `<d-title>`, `<d-metadata>`, `<s-points>`, `<s-comments>`, `<s-time>`, `<s-url>`, `<s-scroll>`, `<s-index>`, `<wrap-page>`, `<s-config>`, `<s-top-icon>`. nimble won't style any of these — no conflicts.
 - **`wrap-page` element** — Has `box-shadow` and border styling at the `42.875em` breakpoint. nimble's body grid replaces the centering but `wrap-page` styling is project-specific.
 - **Open Props tokens** — Used throughout (`--size-1` through `--size-6`, `--font-size-0` through `--font-size-2`, `--font-weight-2/4/6`, `--shadow-6`). These are independent of nimble and should remain.
-- **Content width** — Currently `42.875em` (686px). nimble defaults to `60ch` (~720px). Either keep `42.875em` via `--nc-content-width` or adjust.
+- **Content width** — Currently `42.875em` (686px). nimble defaults to `60ch`. Either keep `42.875em` via `--nc-content-width` or adjust.
 - **CSS `light-dark()` function** — Project uses this modern CSS feature for dark mode. nimble also uses `light-dark()`. Good alignment.
 - **Config page form controls** — Radio button groups use CSS `columns: 150px` (multi-column layout). nimble's form styling may change radio/checkbox appearance. Verify.
 - **Progressive enhancement** — `.js-only` / `.no-js-only` classes toggled on `<html>`. No conflict with nimble.
@@ -577,7 +577,7 @@ Layout utilities (`.fluid`, `.bleed-edge`, `.bleed-wide`, `.bleed-full`, `.conta
 12. Kept all `pre`/`pre code` styles on sherpa and local-setup (project adds border, specific font)
 13. Kept `.copy-btn` overlay styles on sherpa/local-setup (positioned absolute, white background — intentionally different from standard buttons)
 
-**Content width:** Using nimble default (`60ch` ≈ 720px) instead of original `640px`. Wider but not dramatically different — can set `--nc-content-width: 640px` if needed.
+**Content width:** Using nimble default (`60ch`) instead of original `640px`. Wider but not dramatically different — can set `--nc-content-width: 640px` if needed.
 
 **TranscriptArea:** `.no-nimble` turned out to be unnecessary — the component's scoped styles (`.input`, `.preview`) explicitly set every property that matters (padding, margin, font, border, background, width, position) and beat nimble's `:where()` selectors. The debug `<details>` inside the component gets nimble's details styling (border, animation) which is a visual improvement.