mote.css 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -5,6 +5,68 @@ All notable changes to this project are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.8.0] - 2026-10-22
+
+### Added
+
+- `.mote-band`: full-bleed tinted section — CTA bands, section dividers,
+  announcement strips. Opaque `color-mix()` (unlike `--mote-accent-soft`,
+  which is transparent and can vanish over dark backgrounds). Reads
+  `--mote-status`, so bands are content surfaces under the two-tier
+  principle.
+- `.mote-skip-link`: sr-only until keyboard focus, then a fixed pill.
+  Split from `.mote-sr-only`, which is now pure hiding — using sr-only to
+  hide toggle radios made them pop a skip-link pill on focus.
+
+### Changed
+
+- `.mote-card` normalizes `text-align: start` — form labels inside a card
+  read normally even when the card sits in a centered `.mote-hero`
+  (cards already zeroed first/last-child margins; this finishes the job).
+- Page footer navs (`body > footer nav ul`) render as quiet wrapped rows —
+  no bullets — matching the header's semantic treatment. No class needed.
+- File inputs use the density tokens (`--mote-control-pad`), so their
+  height matches sibling fields in a stack (was 41px vs 44px).
+- Labels wrapping checkboxes/radios get `cursor: pointer` — the label is
+  the click target. Scoped via `label:has()`; text-input labels untouched.
+
+### Fixed (docs — the bulk of this release, from a ten-agent build round)
+
+- **Tokens reference**: new section listing every `--mote-*` knob — palette,
+  type/shape/motion, layout/density — including the actual
+  `--mote-accent-soft` definition (9% *transparent* mix) and a pointer to
+  `.mote-band` for opaque tints. Nav pill added.
+- **Simple-page header snippet now shows the real composition**
+  (`.mote-container.mote-row` + `.mote-brand` + `.mote-push` inside the
+  header) — the old "no classes at all" snippet left the brand flush at
+  the viewport edge.
+- **Notes and callouts** section: `.mote-note` (shipped since 0.3.0, never
+  documented as a concept) framed alongside the `blockquote` + status
+  quote treatment. Cross-linked from Blockquote and the consumer map.
+- `.mote-num` documented (replaces the DIY `.num` page recipe);
+  `--mote-table-max` documented next to `.mote-table-scroll` (with the
+  sticky-engages-on-scroll note); `.mote-hero` + `--mote-hero-offset`
+  documented in Layout under "Hero and bands" — all previously findable
+  only by grepping the stylesheet.
+- `.mote-card-media` documented (replaces the DIY `.card-media` recipe and
+  the false "cards don't ship this" claim); live band, hero and card-media
+  examples added.
+- `--mote-rail-top`: docs now say it auto-derives from the sticky header —
+  set it only for wrapped shells (`.mote-header`).
+- File-input treatment, badge context-scaling, and label-cursor behavior
+  documented.
+- Seven new pattern recipes: login page, marketing hero (+ CTA band),
+  stat row, CSS-only billing toggle (with the sr-only-is-not-hiding
+  warning), display pull-quote, row hover, feedback row.
+- Docs page gets a `.mote-skip-link` (dogfooding the new class).
+
+### Evaluation
+
+- Fifth round: ten agents each built a real page (pricing, blog, login,
+  404, settings, dashboard, KB, landing, release notes, contact) against
+  v0.7.0 and reported DX honestly. 10/10 would-use-again, zero rendering
+  failures; every change above traces to that round.
+
 ## [0.7.0] - 2026-10-21
 
 ### Changed
@@ -424,6 +486,7 @@ Components:
 - Element gallery demo page (`demo.html`).
 
 [0.3.0]: https://gitlab.com/abmach/mote/compare/v0.2.1...v0.3.0
+[0.8.0]: https://gitlab.com/abmach/mote/compare/v0.7.0...v0.8.0
 [0.7.0]: https://gitlab.com/abmach/mote/compare/v0.6.1...v0.7.0
 [0.6.1]: https://gitlab.com/abmach/mote/compare/v0.6.0...v0.6.1
 [0.6.0]: https://gitlab.com/abmach/mote/compare/v0.5.1...v0.6.0

package/README.md

@@ -152,6 +152,7 @@ mote is class-optional by design — elements are styled from tags alone; these
 | Ghost buttons | `.mote-ghost` — transparent fill; status tints from the button's own class (gated like solids) |
 | Solid button on any element | `.mote-btn` — the full solid recipe for anchors, spans; status classes gated |
 | Hero centering | `.mote-hero` — vertically centers content for error/login/empty-state pages |
+| CTA bands | `.mote-band` — full-bleed tinted section; opaque in both themes, reads `--mote-status` |
 | Card cover media | `.mote-card-media` — flush-top cover images with matched radius |
 | Brand/wordmark | `.mote-brand` — quiet non-nav link for site headers |
 | Media objects | `.mote-media` — avatar/icon beside body (flex, last child grows) |
@@ -163,8 +164,9 @@ mote is class-optional by design — elements are styled from tags alone; these
 | Sparse grids | `.mote-grid-sparse` — auto-fit variant, collapses empty tracks |
 | Pagination | `nav[aria-label="pagination"]` — semantic, no class |
 | Table of contents | `nav[aria-label="toc"]` — semantic, no class |
-| Footer baseline | `body > footer` — semantic top-border + padding |
-| Screen-reader helper | `.mote-sr-only` (doubles as a skip link when focused) |
+| Footer baseline | `body > footer` — semantic top-border + padding; its `nav` renders as a quiet wrapped row |
+| Screen-reader helper | `.mote-sr-only` — pure hiding, never appears |
+| Skip link | `.mote-skip-link` — sr-only until keyboard focus, then a fixed pill |
 | Print helpers | `.mote-no-print` / `.mote-print-only` |
 | Theme-switch guard | `.mote-theme-switch` — prevents Chromium stale-color bug on `data-theme` flips |
 | Status inheritance control | `.mote-default` (force accent) · `.mote-reset` (clear inherited status) |
@@ -172,7 +174,7 @@ mote is class-optional by design — elements are styled from tags alone; these
 | Table max height | `--mote-table-max` (default 60vh) — `.mote-table-scroll` panel cap |
 | Breadcrumbs | `nav[aria-label="breadcrumb"]` — semantic, no class |
 | Card grids | `.mote-grid` — auto-fill columns from the container, no breakpoints |
-| Cards | `.mote-card` |
+| Cards | `.mote-card` — normalizes content: alignment reads start even inside centered regions |
 | Badges | `.mote-badge` — gated: status from the badge's own class, never inherited |
 | Avatars | `.mote-avatar` |
 | Skeleton / spinner | `.mote-skeleton`, `.mote-spinner` |

package/mote.components.css

@@ -1,6 +1,6 @@
 /*!
  * mote.components.css — opt-in components for mote.css.
- * v0.7.0 · MIT
+ * v0.8.0 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * Requires mote.css loaded first (provides the --mote-* tokens).
@@ -23,6 +23,9 @@
   border-radius: var(--mote-radius-lg);
   background: color-mix(in oklab, var(--mote-surface) 55%, var(--mote-bg));
   box-shadow: var(--mote-shadow-sm);
+  /* Cards normalize their content: alignment reads normally even when the
+     card sits inside a centered region (.mote-hero, centered sections). */
+  text-align: start;
 }
 
 :where(.mote-card) > :first-child {
@@ -33,6 +36,21 @@
   margin-block-end: 0;
 }
 
+/* Band: a full-bleed tinted section — CTA bands, section dividers,
+   announcement strips. An opaque mix (unlike --mote-accent-soft, which is
+   transparent and can vanish over dark backgrounds), so it reads as a
+   deliberate section in both palettes. Content surfaces follow context:
+   a status class on an ancestor tints the band.
+
+     <section class="mote-band">
+       <div class="mote-container">…</div>
+     </section>
+*/
+.mote-band {
+  padding-block: 4rem;
+  background: color-mix(in oklab, var(--mote-status, var(--mote-accent)) 12%, var(--mote-bg));
+}
+
 /* ---------------------------------------------------------------------------
  * 2. Badges — .mote-badge + a status class from mote.css (optional)
  *
@@ -303,6 +321,17 @@ nav[aria-label="toc"] a:hover {
   border-block-start: var(--mote-border-width) solid var(--mote-border);
 }
 
+/* The page footer's nav is a quiet wrapped row — not pills like the
+   header. The landmark styles itself; no class needed. */
+:where(body > footer, .mote-footer) nav ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 1.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 /* ---------------------------------------------------------------------------
  * 8. Popover surfaces — tooltips, menus, toasts
  *

package/mote.css

@@ -1,6 +1,6 @@
 /*!
  * mote.css — a mote of styling for plain HTML.
- * v0.7.0 · MIT
+ * v0.8.0 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * The smallest thing that can carry style:
@@ -406,6 +406,11 @@ label {
   font-weight: 500;
 }
 
+/* A label that wraps a checkbox or radio is the click target itself */
+:where(label:has(:is([type="checkbox"], [type="radio"]))) {
+  cursor: pointer;
+}
+
 fieldset {
   padding: 1rem 1.2rem;
   border: var(--mote-border-width) solid var(--mote-border);
@@ -473,7 +478,7 @@ select[multiple] {
 }
 
 [type="file"] {
-  padding: 0.4rem;
+  padding: var(--mote-control-pad, 0.5rem) var(--mote-control-pad-inline, 0.75rem);
   background: none;
   border-style: dashed;
 }
@@ -761,7 +766,8 @@ progress, meter {
   font-variant-numeric: tabular-nums;
 }
 
-.mote-sr-only {
+.mote-sr-only,
+.mote-skip-link {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -773,8 +779,11 @@ progress, meter {
   border: 0;
 }
 
-/* Skip link: sr-only until focused, then a fixed pill */
-.mote-sr-only:focus-visible {
+/* Skip link: sr-only until focused, then a fixed pill.
+   Use .mote-skip-link for the accessibility skip link;
+   use plain .mote-sr-only to hide things that must never
+   appear (radios driving CSS toggles, visually hidden labels). */
+.mote-skip-link:focus-visible {
   position: fixed;
   top: 1rem;
   left: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mote.css",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A mote of styling for plain HTML — tiny, semantic, class-optional CSS with zero dependencies and no build step.",
   "style": "mote.css",
   "files": [