mote.css 0.10.2 → 0.10.4

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).
 
+## [Unreleased]
+
+## [0.10.4] - 2026-10-25
+
+### Fixed (docs — round-10 findings)
+
+- **Status inheritance now matches badge gating in the documentation**: the
+  status section no longer claims that a badge inherits an ancestor's status,
+  and the `.mote-reset` example now uses an inheriting `.mote-note` surface.
+  The badge section links back to the gating rules.
+
+### Changed (docs — round-10 findings)
+
+- Clarified that `.mote-table-scroll` guarantees the complete table is present
+  without artificial clipping on paper, not that every matrix fits narrow
+  paper. Added an opt-in, document-wide landscape recipe and guidance to check
+  generated PDFs for legibility.
+- Expanded the responsive-toolbar recipe to cover label-wrapped controls and
+  documented a page-owned sticky-toolbar offset for one- and two-row headers.
+- Documented the default anchored-popover gap, the `--mote-accent` /
+  `--mote-on-accent` override pair, own-row navigation for long narrow headers,
+  and the boundary between complementary representations and duplicated records.
+
+## [0.10.3] - 2026-10-25
+
+### Fixed
+
+- **Definition lists keep grouped terms and descriptions aligned**: valid
+  grouped definition-list markup no longer turns each grouping wrapper into an
+  alternating grid cell. Terms and descriptions share aligned columns within
+  each list when direct children alternate one term and one description; grouped
+  wrappers support one term and one description per group; fixture-pinned.
+- **Form fieldsets no longer force narrow pages sideways**: fieldsets may shrink
+  below their intrinsic content width, and file inputs stay within their
+  container; fixture-pinned.
+
+### Changed (docs — round-9 findings)
+
+- Added responsive-composition guidance for grids, toolbars, and narrow header
+  navigation, including a page-owned toolbar recipe; wide reference tables now
+  use contained scroll regions instead of widening the page.
+- Documented the choice between a contained scrolling table and a semantic
+  record layout for narrow screens.
+- Added a dedicated print-and-paper section covering screen/paper helpers,
+  table expansion, disclosures, and page-break rules.
+- Added a long-form reading recipe with a companion table of contents and
+  numbered references with backlinks.
+- Documented direct and grouped definition-list structures.
+
+### Evaluation
+
+- Ninth round: ten independent agents built ten new page types against
+  v0.10.2. All ten would use mote again, and every final page kept
+  page-level horizontal overflow at zero. The round exposed the grouped
+  definition-list defect and the documentation gaps fixed here. Narrow
+  documentation verification also exposed the fieldset/file-input overflow
+  fixed above.
+
 ## [0.10.2] - 2026-10-24
 
 ### Fixed
@@ -661,10 +719,13 @@ 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.4...HEAD
+[0.10.4]: https://gitlab.com/abmach/mote/compare/v0.10.3...v0.10.4
 [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.3]: https://gitlab.com/abmach/mote/compare/v0.10.2...v0.10.3
 [0.10.2]: https://gitlab.com/abmach/mote/compare/v0.10.1...v0.10.2
 [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

package/README.md

@@ -25,7 +25,7 @@ Source on [GitLab](https://gitlab.com/abmach/mote) · mirrored on [GitHub](https
 
 - **Semantic HTML is the API.** mote styles elements by what they *are* — headings, forms, `dialog`, `menu` — not by the classes they wear. Zero classes are required; optional classes exist as opt-in conveniences for statuses, components, and helpers.
 - **The platform before the library.** Interactive components ride on native features: `popover`, `dialog`, `<details name>`, `:user-invalid`. Where the browser can do it, mote never ships JavaScript to do it worse.
-- **Tokens all the way down.** Every color, radius, shadow, font and status is a `--mote-*` custom property, and derived tones are computed with `color-mix()`. Status classes set tokens and nothing else — one override re-skins every note, badge and toast. Re-theme by overriding variables, never by fighting selectors.
+- **Tokens all the way down.** Every color, radius, shadow, font and status is a `--mote-*` custom property, and derived tones are computed with `color-mix()`. Status classes set tokens and nothing else — one override re-skins inheriting content surfaces, while gated actions and badges declare their own status. Re-theme by overriding variables, never by fighting selectors.
 - **Weightless by default.** `mote.css` styles your elements; `mote.components.css` is opt-in and CSS-only. You ship zero bytes of library JavaScript, ever.
 - **Framework-agnostic.** It's just CSS — plain HTML, Svelte, Vue, React, HTMX, PHP, your CMS, anything.
 - **Cozy, and unobtrusive about it.** Warm neutrals, soft edges, generous rhythm — styling that never shouts. Automatic light/dark, AA+ contrast, visible focus, reduced-motion respected.
@@ -60,19 +60,22 @@ Everything is a variable. Override the ones you care about:
 
 ```css
 :root {
-  --mote-accent: #4a7a5b;   /* your brand color */
-  --mote-bg: #fffdf5;       /* your paper */
-  --mote-radius: 6px;       /* your edges */
+  --mote-accent: #4a7a5b;    /* your brand color */
+  --mote-on-accent: #ffffff; /* readable text on accent fills */
+  --mote-bg: #fffdf5;        /* your paper */
+  --mote-radius: 6px;        /* your edges */
 }
 ```
 
+When replacing `--mote-accent`, replace `--mote-on-accent` too. mote cannot infer whether white or dark text has enough contrast on an arbitrary brand color; a separate dark-theme accent may need its own foreground token.
+
 ### The token cascade
 
 Values flow in layers, each computed from the last — retune a base token and everything downstream re-derives automatically:
 
 1. **Base palette** — the raw tokens: `--mote-bg`, `--mote-fg`, `--mote-accent`, the four semantics, fonts, radii, shadows. Light values live in `:root`; dark values swap in via `prefers-color-scheme` or `data-theme`.
 2. **Derived tones** — computed from the base with `color-mix()`: `--mote-accent-deep` (hover deepening), `--mote-accent-soft`, the four `--mote-*-soft` tints, `--mote-focus-ring`, `--mote-border-strong`. They can never go stale — change `--mote-accent` and every tint, ring and hover shade follows.
-3. **Status indirection** — status classes assign `--mote-status` / `--mote-status-soft` and nothing else. Components read them with accent fallbacks: `color: var(--mote-status, var(--mote-accent-deep))`.
+3. **Status indirection** — status classes assign `--mote-status` / `--mote-status-soft` and nothing else. Inheriting surfaces read them with accent fallbacks: `color: var(--mote-status, var(--mote-accent-deep))`; gated buttons and badges declare their own status.
 
 The consequence: theming is a handful of variable overrides, and an inline tweak (`style="--mote-status: …"`) slots into the same chain at any level.
 
@@ -139,7 +142,7 @@ mote is class-optional by design — elements are styled from tags alone; these
 | `.mote-container` | Centered page wrapper: `width: min(100% - 3rem, 70rem)` |
 | `.mote-muted` | Dimmed secondary text (also a neutral status) |
 | `.mote-note` + status class | Tinted message surfaces |
-| `.mote-success` · `.mote-warning` · `.mote-error` · `.mote-info` | Pure status tokens: they only set `--mote-status` / `--mote-status-soft`, so one override re-skins every note, badge and toast |
+| `.mote-success` · `.mote-warning` · `.mote-error` · `.mote-info` | Pure status tokens: they only set `--mote-status` / `--mote-status-soft`, so one override re-skins inheriting content surfaces; gated actions and badges use their own status |
 
 ## Components
 
@@ -172,7 +175,7 @@ mote is class-optional by design — elements are styled from tags alone; these
 | 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) |
+| Status inheritance control | `.mote-default` (set inherited accent status tokens for inheriting surfaces) · `.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 |

package/mote.components.css

@@ -1,6 +1,6 @@
 /*!
  * mote.components.css — opt-in components for mote.css.
- * v0.10.2 · MIT
+ * v0.10.4 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * Requires mote.css loaded first (provides the --mote-* tokens).

package/mote.css

@@ -1,6 +1,6 @@
 /*!
  * mote.css — a mote of styling for plain HTML.
- * v0.10.2 · MIT
+ * v0.10.4 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * The smallest thing that can carry style:
@@ -285,10 +285,13 @@ li::marker {
 
 dl {
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto minmax(0, 1fr);
   gap: 0.4rem 1.5rem;
 }
 
+/* Grouping wrappers are structural, not grid items. */
+dl > div { display: contents; }
+
 dt { font-weight: 600; }
 
 dd {
@@ -418,7 +421,9 @@ label {
   cursor: pointer;
 }
 
+/* Fieldsets default to min-content and can force a narrow page sideways. */
 fieldset {
+  min-inline-size: 0;
   padding: 1rem 1.2rem;
   border: var(--mote-border-width) solid var(--mote-border);
   border-radius: var(--mote-radius);
@@ -484,7 +489,9 @@ select[multiple] {
   height: 2.4rem;
 }
 
+/* Native file controls have a wide intrinsic size; keep them inside their parent. */
 [type="file"] {
+  max-width: 100%;
   padding: var(--mote-control-pad, 0.5rem) var(--mote-control-pad-inline, 0.75rem);
   background: none;
   border-style: dashed;

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "mote.css",
-  "version": "0.10.2",
+  "version": "0.10.4",
+  "bugs": {
+    "url": "https://gitlab.com/abmach/mote/-/issues"
+  },
   "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": [