mote.css 0.10.3 → 0.10.5

package/CHANGELOG.md

@@ -5,6 +5,69 @@ 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.5] - 2026-10-25
+
+### Fixed (docs — round-11 findings)
+
+- **A lone `:root` brand override no longer looks like it works**: the theming
+  section now carries a complete brand recipe — base, explicit dark,
+  automatic dark, and print — because mote's own palette rules outrank a plain
+  `:root` declaration in automatic dark mode and on paper. Every state pairs
+  `--mote-accent` with `--mote-on-accent`.
+- **The anchored-popover separation is now described as measured**: the popover
+  section states the 0.45rem margin and Chromium's own offset to the popover's
+  placement, instead of promising a gap the browser does not produce.
+- The status reference is now one table: every status-consuming surface carries
+  an *Inheriting* or *Gated* mode, and the missing Cards row is in.
+- The theme-toggle snippet now writes the current state into the button label.
+- The own-row narrow-navigation recipe is labeled as page CSS, so it is no
+  longer read as a rule mote ships.
+- The sticky-toolbar section now explains how to measure the header's real
+  bottom edge instead of copying a sample offset; the console expression lives
+  in a code block, so the documentation page keeps its width on narrow screens.
+- Added the native `<progress>` width note and the native validity-timing note
+  for required selects.
+
+### Added (tests)
+
+- Narrow-header containment coverage for both documented header shapes
+  (`body > header nav` and `.mote-header` + `.mote-nav`): the nav yields space,
+  stays inside its row and the viewport, and its pill row scrolls instead of
+  widening the page.
+- Anchored-popover coverage: the 0.45rem separation margin, placement below
+  the trigger with horizontal centering, and the viewport-edge flip.
+
+### Evaluation
+
+- Eleventh round: ten independent agents built ten new page types against
+  v0.10.4. All ten would use mote again; every final page kept page-level
+  horizontal overflow at zero at 1280px and 390px, and no library failure was
+  confirmed. The round surfaced the documentation gaps fixed here and left the
+  anchored-popover promise uncovered — the new fixture checks cover it now.
+
+## [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
@@ -696,6 +759,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.5...HEAD
+[0.10.5]: https://gitlab.com/abmach/mote/compare/v0.10.4...v0.10.5
+[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

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.3 · MIT
+ * v0.10.5 · 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.3 · MIT
+ * v0.10.5 · 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.3",
+  "version": "0.10.5",
   "bugs": {
     "url": "https://gitlab.com/abmach/mote/-/issues"
   },