mote.css 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -5,7 +5,96 @@ 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.6.0] - 2026-10-20
+## [0.7.0] - 2026-10-21
+
+### Changed
+
+- **Badges are gated** (same as buttons): a plain `.mote-badge` is always
+  accent-tinted; a status class on the badge itself provides the tint —
+  never inherited from context. Closes the "tag chips silently re-tint
+  inside themed cards" surprise from four evaluation rounds.
+  Two-tier principle: **content surfaces follow context; content markers
+  and actions declare their own status.**
+
+### Fixed
+
+- `.mote-table-scroll` sticky-header borders: Chromium paints collapsed
+  borders at the original flow position, not with the sticky cell —
+  switched to `border-collapse: separate; border-spacing: 0` inside the
+  wrapper.
+- `.mote-table-scroll` clips rows in print: `max-height: none;
+  overflow: visible` added to the `@media print` block.
+- Bare `<pre>` without `<code>` now gets the mono stack and 0.875rem size.
+- `.mote-btn` now reads `var(--mote-control-pad, …)` instead of hardcoded
+  `0.5rem 1.1rem` — density overrides reach all buttons uniformly.
+- Form controls (input/select/textarea) now read the same density tokens
+  as buttons: `var(--mote-control-pad, …) var(--mote-control-pad-inline, …)`.
+- `.mote-stack` now stretches `progress` and `meter` alongside fields.
+- `.mote-doc > aside` resets to `position: static` under 50rem (was
+  staying sticky while the nav went static — clipped scroll region on mobile).
+- `.mote-table-scroll` max-height tokenized: `var(--mote-table-max, 60vh)`.
+- Badge links get a hover state: `filter: brightness(0.92)`.
+- Docs: theme-toggle snippet now 3-state (auto→light→dark) matching the
+  working demo; Patterns error-page uses `.mote-hero`; docs' own header
+  uses `.mote-row`/`.mote-push` instead of inline styles.
+
+### Added
+
+- `.mote-hero`: vertically centers content in the remaining viewport
+  height — for error pages, login screens, empty states. Uses
+  `--mote-hero-offset` (default 12rem) to account for header/footer.
+- `.mote-card-media`: flush-top cover images for cards — negative margins,
+  clipped overflow, radius matched to the card, all in one class. Replaces
+  the 5-line page recipe that broke card corners.
+- `.mote-brand`: quiet wordmark link for site headers — `font-weight: 700`,
+  fg color, no underline.
+- `.mote-num`: right-aligned tabular figures for data table columns.
+
+### Changed (evaluation)
+
+- Fourth ten-app evaluation completed against v0.6.1; all round-3 fixes
+  verified holding. Round-4 findings addressed in this minor release.
+
+### Fixed
+
+- `.mote-print-only` now actually displays in print (the unconditional
+  `display: none` was after the print block at equal specificity —
+  scoped to `@media not print` and moved before it).
+- `.mote-stack` no longer stretches `.mote-sr-only` inputs to 100%
+  width (hidden file inputs were creating invisible horizontal scroll).
+- `.mote-doc > main` now uses `overflow-x: auto` (was `clip`, which
+  made wide tables invisible rather than scrollable).
+- `.mote-theme-switch` shipped in mote.css: disables transitions during
+  `data-theme` flips so Chromium doesn't wedge elements at stale colors
+  (custom-property changes don't restart CSS transitions). The docs'
+  toggle snippet now includes it; the demo uses it.
+- `.mote-doc > aside` gets the same sticky treatment as the nav rail
+  (top, max-height, overflow) — TOCs and aside content no longer scroll
+  out of view.
+- Nav rail `max-height` accounts for `--mote-rail-top` (was
+  `calc(100svh - 2rem)` regardless of header height).
+- Rail heading treatment (small uppercase labels) now applies to
+  `.mote-doc > aside` and `nav[aria-label="toc"]` headings too.
+- `legend` gets `font-weight: 600` so the group caption reads stronger
+  than the field labels inside it.
+
+### Added
+
+- `tabular-nums` on all `td` — figures align in data tables without
+  any page CSS (invisible on non-numeric content).
+- `.mote-table-scroll`: scrollable table wrapper with sticky `thead`,
+  no margin jump on scroll start, and no page-level horizontal scroll.
+- `.mote-grid-sparse`: auto-fit variant that collapses empty grid
+  tracks (footers, short card rows).
+- `--mote-control-pad` / `--mote-control-pad-inline` and
+  `--mote-cell-pad` / `--mote-cell-pad-inline` density tokens.
+- Docs: toggle snippet includes the theme-switch workaround; Chromium
+  note references the shipped class.
+
+### Changed
+
+- Third ten-app evaluation completed against v0.6.0; all round-2 fixes
+  verified holding. Round-3 findings addressed in this patch release.
 
 ### Fixed
 
@@ -335,6 +424,8 @@ Components:
 - Element gallery demo page (`demo.html`).
 
 [0.3.0]: https://gitlab.com/abmach/mote/compare/v0.2.1...v0.3.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
 [0.5.1]: https://gitlab.com/abmach/mote/compare/v0.5.0...v0.5.1
 [0.5.0]: https://gitlab.com/abmach/mote/compare/v0.4.0...v0.5.0

package/README.md

@@ -100,6 +100,8 @@ 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 |
+| `--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 |
 | `--mote-transition` | `150ms ease` | | Hover/focus timing |
 
@@ -149,19 +151,29 @@ mote is class-optional by design — elements are styled from tags alone; these
 | 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 |
+| Hero centering | `.mote-hero` — vertically centers content for error/login/empty-state pages |
+| 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) |
 | 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 |
+| 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 |
 | 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) |
 | 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) |
+| 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 |
 | Breadcrumbs | `nav[aria-label="breadcrumb"]` — semantic, no class |
 | Card grids | `.mote-grid` — auto-fill columns from the container, no breakpoints |
 | Cards | `.mote-card` |
-| Badges | `.mote-badge` + optional status class |
+| Badges | `.mote-badge` — gated: status from the badge's own class, never inherited |
 | Avatars | `.mote-avatar` |
 | Skeleton / spinner | `.mote-skeleton`, `.mote-spinner` |
 | Tooltips | `[popover].mote-tooltip` + `popovertarget` button |
@@ -183,7 +195,7 @@ animations become instant, on older engines.
 
 ## Demo
 
-Open [`docs/index.html`](docs/index.html) for the full live documentation, or [`demo.html`](demo.html) for a quick gallery of every styled element.
+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.
 
 ## License
 

package/mote.components.css

@@ -1,6 +1,6 @@
 /*!
  * mote.components.css — opt-in components for mote.css.
- * v0.6.0 · MIT
+ * v0.7.0 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * Requires mote.css loaded first (provides the --mote-* tokens).
@@ -40,6 +40,10 @@
  *    <span class="mote-badge mote-success">success</span>
  * ------------------------------------------------------------------------- */
 
+/* Badges are content markers, not surfaces — they declare their own
+   status, never inherit it from context (same gating as buttons).
+   A plain .mote-badge is always accent-tinted; a status class on the
+   badge itself provides the tint. */
 .mote-badge {
   display: inline-block;
   padding: 0.1rem 0.6rem;
@@ -47,8 +51,13 @@
   font-size: 0.8em;
   font-weight: 500;
   line-height: 1.4;
-  background: var(--mote-status-soft, var(--mote-accent-soft));
-  color: var(--mote-status, var(--mote-accent-deep));
+  background: var(--mote-accent-soft);
+  color: var(--mote-accent-deep);
+}
+
+.mote-badge:where(.mote-success, .mote-warning, .mote-error, .mote-info, .mote-muted) {
+  background: var(--mote-status-soft);
+  color: var(--mote-status);
 }
 
 /* Badges as links (tag chips, version pills): kill the underline */
@@ -56,6 +65,10 @@ a:where(.mote-badge) {
   text-decoration: none;
 }
 
+a:where(.mote-badge):hover {
+  filter: brightness(0.92);
+}
+
 /* ---------------------------------------------------------------------------
  * 3. Avatars
  * ------------------------------------------------------------------------- */
@@ -245,6 +258,44 @@ nav[aria-label="toc"] a:hover {
   color: var(--mote-accent-deep);
 }
 
+/* Flush-top cover media for cards: negative margins derived from the
+   card's own padding, clipped overflow, radius matched to the card. */
+.mote-card-media {
+  margin: -1.25rem -1.5rem 1rem;
+  overflow: clip;
+  border-radius: calc(var(--mote-radius-lg) - var(--mote-border-width))
+    calc(var(--mote-radius-lg) - var(--mote-border-width)) 0 0;
+}
+
+.mote-card-media img,
+.mote-card-media video {
+  display: block;
+  width: 100%;
+  max-width: none;
+  border-radius: inherit;
+}
+
+/* Scrollable table wrapper: sticky thead, no page scroll, no margin jump */
+.mote-table-scroll {
+  overflow-x: auto;
+  max-height: var(--mote-table-max, 60vh);
+  overflow-y: auto;
+}
+
+/* Chromium paints collapsed borders at the original flow position,
+   not with the sticky cell — separate borders belong to the cell. */
+.mote-table-scroll table {
+  margin-block: 0;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+.mote-table-scroll thead th {
+  position: sticky;
+  top: 0;
+  background: var(--mote-bg);
+}
+
 /* Page footer: the quiet sibling of the site header */
 :where(body > footer, .mote-footer) {
   margin-block-start: 3rem;
@@ -502,7 +553,7 @@ html:where(:has(body > header)) {
 /* Content stays inside the grid track — wide tables scroll here,
     not the page. */
 .mote-doc > main {
-  overflow-x: clip;
+  overflow-x: auto;
 }
 
 /* nav = left rail */
@@ -513,7 +564,7 @@ html:where(:has(body > header)) {
   align-self: start;
   position: sticky;
   top: var(--mote-rail-top, 1rem);
-  max-height: calc(100svh - 2rem);
+  max-height: calc(100svh - var(--mote-rail-top, 1rem) - 1rem);
   overflow: auto;
 }
 
@@ -550,7 +601,9 @@ html:where(:has(body > header)) {
 }
 
 /* Rail headings: small label-scale for grouped navigation */
-.mote-doc > nav :is(h2, h3) {
+.mote-doc > nav :is(h2, h3),
+.mote-doc > aside :is(h2, h3),
+nav[aria-label="toc"] :is(h2, h3) {
   margin: 1rem 0 0.3rem;
   padding-inline: 0.75rem;
   font-size: 0.72rem;
@@ -574,6 +627,10 @@ html:where(:has(body > header)) {
   grid-column: 2;
   min-width: 0;
   align-self: start;
+  position: sticky;
+  top: var(--mote-rail-top, 1rem);
+  max-height: calc(100svh - var(--mote-rail-top, 1rem) - 1rem);
+  overflow: auto;
 }
 
 .mote-doc:where(:has(> nav)) > aside {
@@ -600,6 +657,12 @@ html:where(:has(body > header)) {
     grid-row: auto;
   }
 
+  .mote-doc > aside {
+    position: static;
+    max-height: none;
+    overflow: visible;
+  }
+
   .mote-doc > nav {
     position: static;
     max-height: none;
@@ -616,3 +679,8 @@ html:where(:has(body > header)) {
      gives 3-wide pricing; 26rem gives 2-column content. */
   grid-template-columns: repeat(auto-fill, minmax(min(var(--mote-grid-min, 16rem), 100%), 1fr));
 }
+
+/* Sparse grids: collapse empty tracks (footers, short card rows) */
+.mote-grid-sparse {
+  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.6.0 · MIT
+ * v0.7.0 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * The smallest thing that can carry style:
@@ -219,7 +219,7 @@ a {
   transition: color var(--mote-transition), text-decoration-color var(--mote-transition);
 }
 
-a:hover {
+a:hover:where(:not(.mote-btn, .mote-ghost)) {
   color: var(--mote-accent-deep);
   text-decoration-color: currentColor;
 }
@@ -335,6 +335,8 @@ kbd {
 pre {
   padding: 1rem 1.2rem;
   overflow-x: auto;
+  font-family: var(--mote-font-mono);
+  font-size: 0.875rem;
   border-radius: var(--mote-radius);
   background: var(--mote-surface);
   border: var(--mote-border-width) solid var(--mote-border);
@@ -372,7 +374,8 @@ caption {
 }
 
 th, td {
-  padding: 0.6rem 0.8rem;
+  font-variant-numeric: tabular-nums;
+  padding: var(--mote-cell-pad, 0.6rem) var(--mote-cell-pad-inline, 0.8rem);
   border-block-end: var(--mote-border-width) solid var(--mote-border);
   text-align: start;
   vertical-align: top;
@@ -409,12 +412,12 @@ fieldset {
   border-radius: var(--mote-radius);
 }
 
-legend { padding-inline: 0.4rem; }
+legend { padding-inline: 0.4rem; font-weight: 600; }
 
 input, select, textarea {
   font: inherit;
   color: inherit;
-  padding: 0.5rem 0.75rem;
+  padding: var(--mote-control-pad, 0.5rem) var(--mote-control-pad-inline, 0.75rem);
   background: var(--mote-surface);
   border: var(--mote-border-width) solid var(--mote-border);
   border-radius: var(--mote-radius-sm);
@@ -501,7 +504,7 @@ button, [type="button"], [type="submit"], [type="reset"] {
   font: inherit;
   font-weight: 500;
   color: var(--mote-on-accent);
-  padding: 0.5rem 1.1rem;
+  padding: var(--mote-control-pad, 0.5rem) var(--mote-control-pad-inline, 1.1rem);
   background: var(--mote-accent);
   border: var(--mote-border-width) solid transparent;
   border-radius: var(--mote-radius-sm);
@@ -532,10 +535,13 @@ button:hover, [type="button"]:hover, [type="submit"]:hover, [type="reset"]:hover
 /* Ghost buttons: quiet, transparent fill, accent-tinted. Like solids,
    status colors come from the button's own class, never from context. */
 .mote-ghost {
+  display: inline-block;
+  font: inherit;
+  font-weight: 500;
   background: none;
   border: var(--mote-border-width) solid color-mix(in oklab, var(--mote-accent), transparent 55%);
   color: var(--mote-accent-deep);
-  padding: 0.5rem 1.1rem;
+  padding: var(--mote-control-pad, 0.5rem) var(--mote-control-pad-inline, 1.1rem);
   border-radius: var(--mote-radius-sm);
   text-decoration: none;
   cursor: pointer;
@@ -662,9 +668,20 @@ progress, meter {
 
 .mote-push { margin-inline-start: auto; }
 
+/* Hero: vertically center content in the remaining viewport height.
+   For error pages, login screens, empty states. */
+.mote-hero {
+  min-height: calc(100svh - var(--mote-hero-offset, 12rem));
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
 /* Stacked forms: stretch fields, keep checkboxes/radios compact.
    An opt-in alternative to the page-global width: 100% recipe. */
-.mote-stack :is(input, select, textarea) {
+.mote-stack :is(input, select, textarea, progress, meter) {
   width: 100%;
 }
 
@@ -672,6 +689,10 @@ progress, meter {
   width: 1em;
 }
 
+.mote-stack :is(input, select, textarea):where(.mote-sr-only) {
+  width: 1px;
+}
+
 /* Solid button on any element — anchors, spans, divs.
    Same recipe as the element-level button styles; status classes
    gated identically (class on the element itself). */
@@ -680,7 +701,7 @@ progress, meter {
   font: inherit;
   font-weight: 500;
   color: var(--mote-on-accent);
-  padding: 0.5rem 1.1rem;
+  padding: var(--mote-control-pad, 0.5rem) var(--mote-control-pad-inline, 1.1rem);
   background: var(--mote-accent);
   border: var(--mote-border-width) solid transparent;
   border-radius: var(--mote-radius-sm);
@@ -727,6 +748,19 @@ progress, meter {
 }
 
 /* Visually hidden, screen-reader available */
+/* Brand/wordmark: quiet non-nav link for site headers */
+.mote-brand {
+  font-weight: 700;
+  color: var(--mote-fg);
+  text-decoration: none;
+}
+
+/* Numeric table column: right-align tabular figures */
+.mote-num {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
 .mote-sr-only {
   position: absolute;
   width: 1px;
@@ -866,6 +900,18 @@ 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; }
 }
 
-.mote-print-only { display: none; }
+@media not print {
+  .mote-print-only { display: none; }
+}
+
+/* Theme switch: disable transitions during data-theme flips.
+   Chromium doesn't restart CSS transitions on custom-property changes,
+   so flipping data-theme leaves elements at the old theme's colors.
+   Apply this class before the flip, remove after one frame. */
+.mote-theme-switch,
+.mote-theme-switch * {
+  transition: none !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mote.css",
-  "version": "0.6.0",
+  "version": "0.7.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": [