mote.css 0.9.1 → 0.10.1

package/CHANGELOG.md

@@ -5,6 +5,89 @@ 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.10.1] - 2026-10-24
+
+### Fixed
+
+- **Narrow `.mote-doc` layouts keep landmark order**: the collapsed shell no
+  longer places the footer before `main` when guide and context rails are
+  present.
+- **`.mote-table-scroll` expands on paper**: the optional components file
+  now owns its print override, so loading it can no longer undo the core
+  print behavior.
+- **`.mote-skip-link` reveals on any focus**: programmatic focus now gets
+  the same fixed skip-link pill as keyboard focus, removing a focus-modality
+  dependency from the accessibility helper and regression fixture.
+
+### Changed (tests — round-8 findings)
+
+- The regression fixture now selects an active screen or print-specific
+  assertion suite, rebuilds its results on media changes, and self-checks both
+  paper helpers and printable table expansion.
+
+### Changed (docs — round-8 findings)
+
+- Document-layout guidance now states that the collapsed shell preserves
+  source order, distinguishes `main` overflow from table-wrapper overflow,
+  and calls out the body-level gutter.
+- Header guidance now includes a narrow-screen recipe that gives the nav its
+  own row when the brand and pushed controls leave too little room.
+- The helper map now includes print helpers and a right-rail TOC recipe.
+
+### Evaluation
+
+- Eighth round: ten independent agents built ten new page types against
+  v0.10.0. All ten would use mote again and kept page-level horizontal
+  overflow at zero; the round exposed the collapsed document-order and
+  cross-file print defects fixed in this release.
+
+## [0.10.0] - 2026-10-23
+
+### Fixed
+
+- **`.mote-doc > header` was missing `min-width: 0`** (the shell gives it
+  to main, nav, and aside but not the header): a header carrying long nav
+  content pushed the *page* sideways at narrow viewports. Found by the
+  round-7 course builder; fixture-pinned.
+
+### Added
+
+- `.mote-tabular`: tabular figures without the right-alignment — day
+  numbers, headline balances, meta lines. `.mote-num` keeps
+  alignment + figures for table columns (tables already render tabular
+  numerals on every cell, so alignment is the column class's real job).
+  Five round-7 builds hit the old coupling.
+- `--mote-avatar-radius` (default 999px): square cover art and favicons
+  no longer fight the circular default — three round-7 builds overrode it
+  by hand.
+
+### Changed
+
+- Header nav pills never break mid-label (`white-space: nowrap`): the
+  pill row scrolls instead — three round-7 builds added this rule by
+  hand; deferred from round 6 as a recipe, three recurrences made it a
+  default.
+
+### Fixed (docs — round-7 findings)
+
+- Status classes are token carriers, not text colors — documented with
+  the tinted-text recipe (`color: var(--mote-success)`).
+- `.mote-stack` on a `<fieldset>` flattens the legend notch — documented.
+- Nav hints only exist while the pills overflow — documented.
+- New recipes: small indicator dots (skeleton `min-height`), grouped
+  messages (`.mote-media` + `aria-hidden` spacer), weekend columns
+  (row-tint-safe column shading), quiet captions.
+- `--mote-avatar-radius` and `.mote-tabular` in the token and class
+  tables.
+
+### Evaluation
+
+- Seventh round: ten agents built ten NEW page types (chat, job board,
+  calendar, recipe, transactions, lesson, search results, team, hotel,
+  podcast) against v0.9.1 on a faster builder model. 10/10
+  would-use-again, zero final-state rendering failures; every v0.9.x
+  feature verified in the wild by every agent that touched it.
+
 ## [0.9.1] - 2026-10-23
 
 ### Fixed
@@ -572,6 +655,8 @@ Components:
 [0.8.0]: https://gitlab.com/abmach/mote/compare/v0.7.0...v0.8.0
 [0.9.0]: https://gitlab.com/abmach/mote/compare/v0.8.0...v0.9.0
 [0.9.1]: https://gitlab.com/abmach/mote/compare/v0.9.0...v0.9.1
+[0.10.1]: https://gitlab.com/abmach/mote/compare/v0.10.0...v0.10.1
+[0.10.0]: https://gitlab.com/abmach/mote/compare/v0.9.1...v0.10.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

@@ -100,6 +100,7 @@ The consequence: theming is a handful of variable overrides, and an inline tweak
 | `--mote-display` | `clamp(2.75rem, 1.5rem + 4vw, 5rem)` | | Display text scale (opt-in) |
 | `--mote-grid-min` | `16rem` | | Card grid minimum track width |
 | `--mote-avatar` | `2.5rem` | | Avatar size |
+| Avatar corners | `--mote-avatar-radius` (default 999px) — 0 for square covers and favicons |
 | `--mote-control-pad` | `0.5rem` | | Button/control vertical padding |
 | `--mote-cell-pad` | `0.6rem` | | Table cell vertical padding |
 | `--mote-shadow` / `--mote-shadow-sm` | warm diffuse | | Elevation |
@@ -159,15 +160,16 @@ mote is class-optional by design — elements are styled from tags alone; these
 | Display text | `.mote-display` — opt-in hero/error-code scale via `--mote-display` |
 | Content rows | `.mote-row` + `.mote-push` — flex row, right-align helper |
 | Stacks | `.mote-stack` — vertical rhythm with `--mote-stack-gap`; fields full width, checkboxes 1em, works on any content |
-| Scrollable tables | `.mote-table-scroll` — sticky `thead`, no page scroll, no margin jump |
+| Scrollable tables | `.mote-table-scroll` — sticky `thead`, no page scroll, no margin jump; expands on paper |
 | Numeric columns | `.mote-num` — right-aligned tabular figures |
+| Tabular figures | `.mote-tabular` — tabular numerals without the right-alignment (day numbers, meta lines) |
 | Sparse grids | `.mote-grid-sparse` — standalone auto-fit variant, collapses empty tracks |
 | Pagination | `nav[aria-label="pagination"]` — semantic, no class |
 | Table of contents | `nav[aria-label="toc"]` — semantic, no class |
 | Current table row | `tr[aria-current]` — accent-tinted row, reads over zebra |
 | 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 |
+| Skip link | `.mote-skip-link` — sr-only until focused, 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) |

package/mote.components.css

@@ -1,6 +1,6 @@
 /*!
  * mote.components.css — opt-in components for mote.css.
- * v0.9.1 · MIT
+ * v0.10.1 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * Requires mote.css loaded first (provides the --mote-* tokens).
@@ -96,7 +96,9 @@ a:where(.mote-badge):hover {
 .mote-avatar {
   width: var(--mote-avatar, 2.5rem);
   height: var(--mote-avatar, 2.5rem);
-  border-radius: 999px;
+  /* Round by default (people); square cover art and favicons set
+     --mote-avatar-radius: 0 (or any corner value). */
+  border-radius: var(--mote-avatar-radius, 999px);
   object-fit: cover;
   border: var(--mote-border-width) solid var(--mote-border);
   box-shadow: var(--mote-shadow-sm);
@@ -263,6 +265,8 @@ a:where(.mote-badge):hover {
   display: inline-block;
   padding: 0.35rem 0.8rem;
   border-radius: 999px;
+  /* Pills never break mid-label; the row scrolls instead. */
+  white-space: nowrap;
   color: var(--mote-fg);
   text-decoration: none;
   transition: background var(--mote-transition), color var(--mote-transition);
@@ -386,6 +390,13 @@ nav[aria-label="toc"] a:hover {
   overflow-y: auto;
 }
 
+/* The components file owns this component's print behavior. Keep the
+   override after the screen rule so loading the optional file cannot
+   undo the core print promise. */
+@media print {
+  .mote-table-scroll { max-height: none; overflow: visible; }
+}
+
 /* Chromium paints collapsed borders at the original flow position,
    not with the sticky cell — separate borders belong to the cell. */
 .mote-table-scroll table {
@@ -660,7 +671,7 @@ html:where(:has(body > header)) {
   --mote-rail-top: 4.75rem;
 }
 
-.mote-doc > header { grid-row: 1; grid-column: 1 / -1; }
+.mote-doc > header { grid-row: 1; grid-column: 1 / -1; min-width: 0; }
 .mote-doc > footer { grid-row: 3; grid-column: 1 / -1; }
 
 .mote-doc > main { grid-row: 2; grid-column: 1; min-width: 0; }
@@ -761,15 +772,13 @@ nav[aria-label="toc"] :is(h2, h3) {
 }
 
 @media (width < 50rem) {
-  .mote-doc:where(:has(> nav)),
-  .mote-doc:where(:has(> aside)),
-  .mote-doc:where(:has(> nav)):where(:has(> aside)) {
-    grid-template-columns: 1fr;
+  .mote-doc {
+    display: flex;
+    flex-direction: column;
   }
 
-  .mote-doc > :is(nav, aside, main) {
-    grid-column: 1 / -1;
-    grid-row: auto;
+  .mote-doc > main {
+    flex: 1 0 auto;
   }
 
   .mote-doc > aside {

package/mote.css

@@ -1,6 +1,6 @@
 /*!
  * mote.css — a mote of styling for plain HTML.
- * v0.9.1 · MIT
+ * v0.10.1 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * The smallest thing that can carry style:
@@ -785,6 +785,14 @@ progress, meter {
   font-variant-numeric: tabular-nums;
 }
 
+/* Tabular figures without the right-alignment — day numbers, headline
+   figures, meta lines. Tables already render tabular numerals on every
+   cell; this is for figures outside them (or cells that must not align
+   end). */
+.mote-tabular {
+  font-variant-numeric: tabular-nums;
+}
+
 .mote-sr-only,
 .mote-skip-link {
   position: absolute;
@@ -802,7 +810,7 @@ progress, meter {
    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 {
+.mote-skip-link:focus {
   position: fixed;
   top: 1rem;
   left: 1rem;
@@ -928,7 +936,6 @@ progress, meter {
   /* Opt-in print helpers */
   .mote-no-print { display: none !important; }
   .mote-print-only { display: block; }
-  .mote-table-scroll { max-height: none; overflow: visible; }
 }
 
 @media not print {

package/package.json

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