mote.css 0.10.7 → 0.10.9

package/CHANGELOG.md

@@ -5,7 +5,99 @@ 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).
 
-## [Unreleased]
+## [0.10.9] - 2026-10-29
+
+### Fixed (components — round-14 findings)
+
+- Scrollable-table header cells now become static on paper. The print
+  override follows the sticky-cell rule, so Chromium can repeat the semantic
+  `<thead>` at the top of continuation pages instead of painting it after the
+  rows.
+
+### Fixed (docs — round-14 findings)
+
+- The phone-record recipe now start-aligns numeric values in its label/value
+  branch, removes generated labels during narrow-viewport print emulation,
+  and resets sticky header cells while restoring the table.
+- The row-status recipe now includes semantic row headers
+  (`th[scope="row"]`) and uses `background-color`, preserving background
+  image layers such as the documented weekend-column shading.
+- The narrow-header recipe now states that it applies to mote's canonical
+  composition, where `.mote-row` owns the header row. Custom flex headers
+  need page-owned rules for their own structure.
+- Print guidance no longer implies that restoring `position: sticky`
+  guarantees a repeated running head; repetition depends on the browser's
+  paged-media implementation and the generated PDF must be inspected.
+- Clarified card flex behavior and bottom-aligned actions, inline SVG media
+  sizing, prose-heavy card-grid density, and badge scaling.
+
+### Tests
+
+- The regression fixture asserts that scrollable-table header cells are
+  static on paper.
+- Docs-source checks pin the phone-record print and numeric-alignment rules,
+  the row-header and background-color contract, and the canonical narrow
+  header row owner.
+
+### Evaluation
+
+- Fourteenth round: ten independent agents built ten new page types against
+  v0.10.8. All ten would use mote again. The builders' final pages had no
+  confirmed failures; remediation confirmed one library-facing print defect in
+  the scrollable-table header, fixed here alongside the documentation gaps
+  surfaced by the round.
+
+## [0.10.8] - 2026-10-28
+
+### Fixed (components — round-13 findings)
+
+- The sticky site header goes static on paper, so it no longer repeats over
+  every printed page. A page that wants a running head re-applies
+  `position: sticky` in its own print CSS.
+
+### Fixed (docs — round-13 findings)
+
+- The phone-record recipe keeps one label column for the whole table
+  (`--records-label`, 7rem by default) instead of a fixed 6rem track, so
+  longer labels no longer wrap and every record's labels line up. The label
+  keeps `text-align: start`, so a right-aligned numeric column no longer
+  drags the label away from its value.
+- The phone-record recipe now covers `<caption>` and row headers
+  (`th[scope="row"]`), and its print guard restores the table, the hidden
+  header row and the caption: the phone layout hides the header, so a print
+  rule that only reverted `display` would have printed a table with no
+  columns.
+- The phone-record recipe now states that the transform branch does not need
+  `.mote-table-scroll`, and that a table serving both branches must release
+  the panel cap in the narrow query (`--mote-table-max: none`) — the shipped
+  60vh cap otherwise crops the records it contains.
+- Status on a table row now has a documented page rule, and the status
+  reference states that progress and meter inherit a status while badges and
+  buttons are gated.
+- Small clarifications: an exclusive `<details name>` group spans the whole
+  document; badge scale follows the surrounding font size, not the body;
+  definition lists need one column in a narrow rail; a left-rail contents
+  list is a `nav` before `main`; Chromium repeats `tfoot` totals across page
+  breaks; `.mote-card-media` sizes a direct `img` or `video` child.
+
+### Added (docs — round-13 findings)
+
+- A reusable-dialog example: one `<dialog>` filled from the trigger before
+  `showModal()`. mote ships no JavaScript and the docs keep saying so.
+
+### Tests
+
+- The published phone-record recipe is pinned by a docs-source check
+  (`tests/docs-recipes.cjs`), which also fails if a code sample leaks a live
+  tag into the page.
+- The regression fixture asserts that mote's sticky header is sticky on
+  screen and static on paper.
+
+### Evaluation
+
+- Thirteenth round: ten independent agents built ten new page types against
+  v0.10.7. All ten would use mote again; no library failure was confirmed.
+  The round surfaced the recipe, print and documentation gaps fixed here.
 
 ## [0.10.7] - 2026-10-26
 
@@ -793,7 +885,9 @@ Components:
 - Opt-in helpers: `.mote-container`, `.mote-muted`, `.mote-note` surfaces.
 - Element gallery demo page (`demo.html`).
 
-[Unreleased]: https://gitlab.com/abmach/mote/compare/v0.10.7...HEAD
+[Unreleased]: https://gitlab.com/abmach/mote/compare/v0.10.9...HEAD
+[0.10.9]: https://gitlab.com/abmach/mote/compare/v0.10.8...v0.10.9
+[0.10.8]: https://gitlab.com/abmach/mote/compare/v0.10.7...v0.10.8
 [0.10.7]: https://gitlab.com/abmach/mote/compare/v0.10.6...v0.10.7
 [0.10.6]: https://gitlab.com/abmach/mote/compare/v0.10.5...v0.10.6
 [0.10.5]: https://gitlab.com/abmach/mote/compare/v0.10.4...v0.10.5

package/README.md

@@ -151,7 +151,7 @@ mote is class-optional by design — elements are styled from tags alone; these
 | Component | Hook |
 |---|---|
 | Document layout (landmark grid) | `.mote-doc` on `<body>` — `:has()` reads your `header`/`nav`/`main`/`aside`/`footer` |
-| Sticky site header / nav pills | `body > header` — semantic; `.mote-header`/`.mote-nav` only for shells wrapped in a `<div>` |
+| Sticky site header / nav pills | `body > header` — semantic; `.mote-header`/`.mote-nav` only for shells wrapped in a `<div>`; goes static on paper |
 | Semantic buttons (gated) | `class="mote-success"` etc. on the button itself — themed sections never recolor actions |
 | 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 |
@@ -184,7 +184,7 @@ mote is class-optional by design — elements are styled from tags alone; these
 | Breadcrumbs | `nav[aria-label="breadcrumb"]` — semantic, no class |
 | Card grids | `.mote-grid` — auto-fill columns from the container, no breakpoints |
 | 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; never grows past body scale |
+| Badges | `.mote-badge` — gated: status from the badge's own class, never inherited; scales with surrounding text but never enlarges with headings |
 | Avatars | `.mote-avatar` |
 | Skeleton / spinner | `.mote-skeleton`, `.mote-spinner` |
 | Tooltips | `[popover].mote-tooltip` + `popovertarget` button |

package/mote.components.css

@@ -1,6 +1,6 @@
 /*!
  * mote.components.css — opt-in components for mote.css.
- * v0.10.7 · MIT
+ * v0.10.9 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * Requires mote.css loaded first (provides the --mote-* tokens).
@@ -66,8 +66,8 @@
   display: inline-block;
   padding: 0.1rem 0.6rem;
   border-radius: 999px;
-  /* Never past body scale: 0.8em inside a heading balloons,
-     so clamp it — small contexts still scale down. */
+  /* Scale with the surrounding text, but never enlarge with headings:
+     0.8em balloons inside a heading, so cap it at 0.8rem. */
   font-size: min(0.8em, 0.8rem);
   font-weight: 500;
   line-height: 1.4;
@@ -168,6 +168,16 @@ a:where(.mote-badge):hover {
   padding-block: 0.7rem;
 }
 
+/* On paper the bar must not repeat over every sheet: a sticky header is
+   screen chrome. A print-specific layout may restore sticky positioning,
+   but repeated running heads depend on the browser's paged-media behavior
+   and are not guaranteed by this library. */
+@media print {
+  :where(body > header, .mote-header) {
+    position: static;
+  }
+}
+
 /* Long navs scroll inside the bar — they never wrap to a second line
    or push the rest of the row (brand, toggle) off it. min-width lets
    the nav yield space before the surrounding row needs to. */
@@ -390,13 +400,6 @@ 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 {
@@ -411,6 +414,20 @@ nav[aria-label="toc"] a:hover {
   background: var(--mote-bg);
 }
 
+/* The components file owns this component's print behavior. Keep the
+   override after the sticky-cell rule so paper restores a normal table:
+   Chromium can repeat the semantic thead without sticky positioning. */
+@media print {
+  .mote-table-scroll {
+    max-height: none;
+    overflow: visible;
+  }
+
+  .mote-table-scroll thead th {
+    position: static;
+  }
+}
+
 /* Page footer: the quiet sibling of the site header */
 :where(body > footer, .mote-footer) {
   margin-block-start: 3rem;

package/mote.css

@@ -1,6 +1,6 @@
 /*!
  * mote.css — a mote of styling for plain HTML.
- * v0.10.7 · MIT
+ * v0.10.9 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * The smallest thing that can carry style:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mote.css",
-  "version": "0.10.7",
+  "version": "0.10.9",
   "bugs": {
     "url": "https://gitlab.com/abmach/mote/-/issues"
   },