mote.css 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -5,6 +5,64 @@ 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.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
+
+- The header hairline is now fully snippet-driven: it paints only
+  while the nav actually scrolls. With the snippet, an empty
+  `data-nav` (a single pill, nothing to scroll) leaves the line gone;
+  without the snippet there is no line at all — zero-JS headers keep
+  just the pills, and the cut pill is the overflow signal. Both states
+  fixture-pinned.
+
 ## [0.9.0] - 2026-10-22
 
 ### Added
@@ -560,6 +618,8 @@ Components:
 [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.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.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 |
@@ -161,6 +162,7 @@ mote is class-optional by design — elements are styled from tags alone; these
 | 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 |
 | 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 |

package/mote.components.css

@@ -1,6 +1,6 @@
 /*!
  * mote.components.css — opt-in components for mote.css.
- * v0.9.0 · MIT
+ * v0.10.0 · 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);
@@ -187,6 +189,14 @@ a:where(.mote-badge):hover {
   position: relative;
   flex: 1 1 0%;
   min-width: 0;
+}
+
+/* The hairline is snippet-driven: it paints only while the nav
+   actually scrolls. An empty data-nav means "nothing to scroll" —
+   no line under a single pill. No attribute at all means no snippet:
+   no line either; zero-JS headers keep just the pills, and the cut
+   pill is the overflow signal. */
+:where(body > header nav[data-nav]:not([data-nav=""]), .mote-nav[data-nav]:not([data-nav=""])) {
   background:
     linear-gradient(var(--mote-border), var(--mote-border)) left bottom / 100% 2px no-repeat;
 }
@@ -255,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);
@@ -652,7 +664,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; }

package/mote.css

@@ -1,6 +1,6 @@
 /*!
  * mote.css — a mote of styling for plain HTML.
- * v0.9.0 · MIT
+ * v0.10.0 · 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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mote.css",
-  "version": "0.9.0",
-  "description": "A mote of styling for plain HTML — tiny, semantic, class-optional CSS with zero dependencies and no build step.",
+  "version": "0.10.0",
+  "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",