mote.css 0.8.0 → 0.9.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.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
+
+- **`tests/fixture.html` — the regression fixture**: a self-checking page
+  loading the real committed stylesheets, with 54 assertions pinning the
+  principle invariants (two-tier gating, status inheritance, control
+  density, stack behavior, zebra-vs-`aria-current` order, skip-link states,
+  landmark styling, theme flip). Open it in any browser — the title shows
+  PASS or FAIL. Its first run caught two real bugs, both fixed in this
+  release.
+- `tr[aria-current]` current-row treatment: accent-soft tint that reads
+  over zebra (same vocabulary as nav pills and pagination). The fixture
+  asserts it on both parities.
+- `.mote-grid-sparse` is now standalone-complete (`display: grid` + gap) —
+  it was a columns-only modifier that silently rendered as a plain block
+  when used alone, as the README advertised it (fixture-caught).
+
+### Changed
+
+- **Badges never grow past body scale**: `font-size: min(0.8em, 0.8rem)` —
+  a pill inside a heading stays readable (three round-6 builds hit the old
+  heading-scale default), small contexts still scale down with the em side.
+- **`.mote-stack` is now a real stack**: flex column with
+  `--mote-stack-gap` (default 1.25rem) and zeroed child margins, so the
+  name is honest for any content — form rhythm is designed, not `<p>`
+  margin luck. Field stretching and the 1em checkbox/radio exception are
+  unchanged. The sr-only control rule inside stacks was strengthened to
+  beat the checkbox width rule on specificity.
+- **Header navs scroll instead of wrapping**: `body > header nav` /
+  `.mote-nav` pill rows stay one line at any width — a long section list
+  (the docs' own ten pills) scrolls inside the bar instead of pushing the
+  brand or the theme toggle to a second row. The scrollbar is hidden;
+  a hairline under the pills carries directional accent fades pinned to
+  the nav edges — they never float with scroll position. Pure CSS cannot
+  distinguish "at the start" from "nothing to scroll", so the fades key
+  off a `data-nav` attribute kept current by a seven-line documented
+  snippet (the theme-toggle precedent, including a webfont-load re-sync);
+  without it, the hairline and the
+  cut pill are the whole hint. Direction-agnostic snippet math; the
+  gradients flip under `[dir="rtl"]`.
+- Tokenized the hardcoded paddings: `--mote-grid-gap` (1.25rem) and
+  `--mote-band-pad` (4rem) — thin strips and matched split rhythms no
+  longer need hand-copied values.
+
+### Fixed (docs — round-6 build findings)
+
+- Band placement warning: inside `main.mote-container` a band bleeds only
+  to the container edge — the docs now say so (the one round-6 trap that
+  actually broke a build mid-flight)
+- `.mote-card` + `.mote-media` merge warning: the card's column direction
+  silently wins; nest instead.
+- `aria-label` case-sensitivity warning on the semantic selectors.
+- `.mote-num` widened: "table columns or any figure block".
+- Media-object default alignment (`flex-start`) documented.
+- Skip-link mechanism wording: clipped via `clip-path`, not `display: none`.
+- Badge and stack paragraphs rewritten for the new behavior; note-width
+  recipe added; three new token rows.
+- Six new pattern recipes: toolbar row, result rows, price line, post
+  actions, growing input, prominent search.
+- **`demo.html` merged into the docs page as the Gallery section** (every
+  input type, footnoted table, sample output) and deleted — one canonical
+  page, no drift risk. README and in-page links updated.
+
+### Evaluation
+
+- Sixth round: ten agents built ten NEW page types (forum, product,
+  status, checkout, inbox, gallery, profile, FAQ, poll, playlist) against
+  v0.8.0. 10/10 would-use-again, zero rendering failures; every v0.8.0
+  fix verified load-bearing. Asymmetric grid splits stay page CSS by
+  design (documented, not a gap).
+
 ## [0.8.0] - 2026-10-22
 
 ### Added
@@ -487,6 +570,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.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

@@ -158,12 +158,13 @@ mote is class-optional by design — elements are styled from tags alone; these
 | Media objects | `.mote-media` — avatar/icon beside body (flex, last child grows) |
 | Display text | `.mote-display` — opt-in hero/error-code scale via `--mote-display` |
 | Content rows | `.mote-row` + `.mote-push` — flex row, right-align helper |
-| Stacked forms | `.mote-stack` — opt-in full-width fields, checkboxes stay 1em |
+| 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 |
-| Sparse grids | `.mote-grid-sparse` — auto-fit variant, collapses empty tracks |
+| 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 |
@@ -172,10 +173,13 @@ mote is class-optional by design — elements are styled from tags alone; these
 | Status inheritance control | `.mote-default` (force accent) · `.mote-reset` (clear inherited status) |
 | Hero offset | `--mote-hero-offset` (default 12rem) — space for header/footer in `.mote-hero` |
 | Table max height | `--mote-table-max` (default 60vh) — `.mote-table-scroll` panel cap |
+| Stack gap | `--mote-stack-gap` (default 1.25rem) — `.mote-stack` vertical rhythm |
+| Grid gap | `--mote-grid-gap` (default 1.25rem) — `.mote-grid` / `.mote-grid-sparse` |
+| Band padding | `--mote-band-pad` (default 4rem) — `.mote-band`; 1rem for thin strips |
 | 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 |
+| Badges | `.mote-badge` — gated: status from the badge's own class, never inherited; never grows past body scale |
 | Avatars | `.mote-avatar` |
 | Skeleton / spinner | `.mote-skeleton`, `.mote-spinner` |
 | Tooltips | `[popover].mote-tooltip` + `popovertarget` button |
@@ -197,7 +201,9 @@ animations become instant, on older engines.
 
 ## Demo
 
-Open [`docs/index.html`](docs/index.html) for the full live documentation, or [`docs/demo.html`](docs/demo.html) for a quick gallery of every styled element.
+Open [`tests/fixture.html`](tests/fixture.html) in any browser for the regression checks — the title shows PASS or FAIL.
+
+Open [`docs/index.html`](docs/index.html) for the full live documentation — it ends with a gallery of every styled element.
 
 ## License
 

package/mote.components.css

@@ -1,6 +1,6 @@
 /*!
  * mote.components.css — opt-in components for mote.css.
- * v0.8.0 · MIT
+ * v0.9.1 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * Requires mote.css loaded first (provides the --mote-* tokens).
@@ -47,7 +47,7 @@
      </section>
 */
 .mote-band {
-  padding-block: 4rem;
+  padding-block: var(--mote-band-pad, 4rem);
   background: color-mix(in oklab, var(--mote-status, var(--mote-accent)) 12%, var(--mote-bg));
 }
 
@@ -66,7 +66,9 @@
   display: inline-block;
   padding: 0.1rem 0.6rem;
   border-radius: 999px;
-  font-size: 0.8em;
+  /* Never past body scale: 0.8em inside a heading balloons,
+     so clamp it — small contexts still scale down. */
+  font-size: min(0.8em, 0.8rem);
   font-weight: 500;
   line-height: 1.4;
   background: var(--mote-accent-soft);
@@ -164,13 +166,97 @@ a:where(.mote-badge):hover {
   padding-block: 0.7rem;
 }
 
+/* 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. */
+:where(body > header nav, .mote-nav) {
+  /* basis 0 keeps the nav on the row's first line no matter how long
+     (line-breaking sees the unshrunk basis, so a content-sized basis
+     would push trailing controls to a second line); it then grows
+     into the free space and the pill row scrolls inside it. */
+  flex: 1 1 0%;
+  min-width: 0;
+}
+
+/* Long navs: basis 0 keeps the nav on the row's first line no matter
+   how long (line-breaking sees the unshrunk basis, so a content-sized
+   basis would push trailing controls to a second line); it then grows
+   into the free space and the pill row scrolls inside it. The nav also
+   carries the hairline under the pills and hosts the fade pseudos. */
+:where(body > header nav, .mote-nav) {
+  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;
+}
+
+/* Scroll hints: the hairline under the pills carries directional fades
+   that bloom toward whichever side holds more content. Pure CSS cannot
+   distinguish "scrolled to the start" from "nothing to scroll", so the
+   fades key off a data-nav attribute kept current by the seven-line
+   documented snippet (same opt-in pattern as the theme toggle).
+   Without it: the hairline and the cut pill are the whole hint.
+   The pseudos pin to the nav edges — the accent never floats inward,
+   whatever the scroll position. */
+:where(body > header nav, .mote-nav)::before,
+:where(body > header nav, .mote-nav)::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  width: 4rem;
+  height: 2px;
+  opacity: 0;
+  transition: opacity var(--mote-transition);
+  pointer-events: none;
+}
+
+:where(body > header nav, .mote-nav)::before {
+  inset-inline-start: 0;
+  background: linear-gradient(to left, transparent, color-mix(in oklab, var(--mote-accent) 55%, var(--mote-bg)) 40%);
+}
+
+:where(body > header nav, .mote-nav)::after {
+  inset-inline-end: 0;
+  background: linear-gradient(to right, transparent, color-mix(in oklab, var(--mote-accent) 55%, var(--mote-bg)) 40%);
+}
+
+:where(body > header nav[data-nav~="start"], nav.mote-nav[data-nav~="start"])::before,
+:where(body > header nav[data-nav~="end"], nav.mote-nav[data-nav~="end"])::after {
+  opacity: 1;
+}
+
+/* RTL: the logical anchors flip on their own; the gradients flip with them. */
+[dir="rtl"] :where(body > header nav, .mote-nav)::before {
+  background: linear-gradient(to right, transparent, color-mix(in oklab, var(--mote-accent) 55%, var(--mote-bg)) 40%);
+}
+
+[dir="rtl"] :where(body > header nav, .mote-nav)::after {
+  background: linear-gradient(to left, transparent, color-mix(in oklab, var(--mote-accent) 55%, var(--mote-bg)) 40%);
+}
+
 :where(body > header nav, .mote-nav) ul {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 0.25rem;
   padding: 0;
   margin: 0;
   list-style: none;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+:where(body > header nav, .mote-nav) ul::-webkit-scrollbar {
+  display: none;
 }
 
 :where(body > header nav, .mote-nav) a {
@@ -703,7 +789,7 @@ nav[aria-label="toc"] :is(h2, h3) {
    Columns are computed from the container: as many as fit in 16rem. */
 .mote-grid {
   display: grid;
-  gap: 1.25rem;
+  gap: var(--mote-grid-gap, 1.25rem);
   /* Density is a variable, not a class API: --mote-grid-min: 22rem
      gives 3-wide pricing; 26rem gives 2-column content. */
   grid-template-columns: repeat(auto-fill, minmax(min(var(--mote-grid-min, 16rem), 100%), 1fr));
@@ -711,5 +797,7 @@ nav[aria-label="toc"] :is(h2, h3) {
 
 /* Sparse grids: collapse empty tracks (footers, short card rows) */
 .mote-grid-sparse {
+  display: grid;
+  gap: var(--mote-grid-gap, 1.25rem);
   grid-template-columns: repeat(auto-fit, minmax(min(var(--mote-grid-min, 16rem), 100%), 1fr));
 }

package/mote.css

@@ -1,6 +1,6 @@
 /*!
  * mote.css — a mote of styling for plain HTML.
- * v0.8.0 · MIT
+ * v0.9.1 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * The smallest thing that can carry style:
@@ -396,6 +396,13 @@ tbody tr:nth-child(even) {
   background: color-mix(in oklab, var(--mote-surface) 55%, transparent);
 }
 
+/* The current row — same aria-current vocabulary as nav pills and
+   pagination. Opt-in via the attribute; accent-soft reads over zebra
+   because this rule follows it in source order. */
+tbody tr[aria-current] {
+  background: var(--mote-accent-soft);
+}
+
 /* ---------------------------------------------------------------------------
  * 8. Forms & buttons
  * ------------------------------------------------------------------------- */
@@ -684,8 +691,20 @@ progress, meter {
   text-align: center;
 }
 
-/* Stacked forms: stretch fields, keep checkboxes/radios compact.
-   An opt-in alternative to the page-global width: 100% recipe. */
+/* Stack: a vertical rhythm for forms and lists — gap drives the
+   spacing, children's block margins are zeroed, fields stretch full
+   width while checkboxes/radios stay at 1em. Works on any content;
+   --mote-stack-gap tunes it. */
+.mote-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mote-stack-gap, 1.25rem);
+}
+
+.mote-stack > * {
+  margin-block: 0;
+}
+
 .mote-stack :is(input, select, textarea, progress, meter) {
   width: 100%;
 }
@@ -694,7 +713,7 @@ progress, meter {
   width: 1em;
 }
 
-.mote-stack :is(input, select, textarea):where(.mote-sr-only) {
+.mote-stack .mote-sr-only:is(input, select, textarea) {
   width: 1px;
 }
 

package/package.json

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