mote.css 0.5.0 → 0.6.0

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.6.0] - 2026-10-20
+
+### Fixed
+
+- Pagination `<span>` current page: the pill box (display, min-width,
+  padding) now targets `[aria-current="page"]` as well as `<a>` — the
+  docs-recommended span form renders correctly (was a 6.5px sliver).
+- Pagination: `flex-wrap: wrap` on the link row — 10 pills at 390px
+  no longer scroll the page horizontally.
+- Anchor ghosts: `.mote-ghost` now carries its own padding, border-radius,
+  text-decoration:none and cursor:pointer — `<a class="mote-ghost">`
+  renders as a proper pill (was an underlined unpadded rectangle).
+- Badge links: `a.mote-badge` no longer underlines; `user-select: none`
+  dropped from badges so version numbers and tags can be copied.
+- `.mote-display` reads `--mote-status` — themed pages (error, warning)
+  tint their giant display text automatically.
+- Default `--mote-rail-top` is now 4.75rem when `body > header` exists
+  (the sticky rail clears the sticky header without manual overrides).
+- `.mote-doc > main` gets `overflow-x: clip` — wide tables truly scroll
+  inside main, never the page.
+- Sticky header: default `padding-block: 0.7rem` — content no longer hugs
+  the border.
+- `.mote-row` zeroes heading margins inside the row — version headers
+  and card titles no longer balloon the flex context.
+- Checkbox/radio `width: 1em` hardened against page-level
+  `width: 100%` rules.
+
+### Added
+
+- `.mote-btn`: solid button recipe on any element (anchors, spans) —
+  the full solid chrome including gated status classes; hero CTAs and
+  pricing links no longer need page CSS.
+- `.mote-media`: media object (avatar/icon beside body) — flex row,
+  last child grows; forum posts, comments, chat.
+- `nav[aria-label="toc"]`: semantic table-of-contents pattern (mirrors
+  breadcrumbs and pagination) — right-rail asides, "On this page" nav.
+- `.mote-no-print` / `.mote-print-only`: opt-in print visibility helpers.
+- `aria-invalid="true"` styled alongside `:user-invalid` — programmatic
+  validation states (server-side, failed-save) without waiting for user
+  interaction.
+- Rail headings: `.mote-doc > nav :is(h2, h3)` at label scale —
+  grouped sidebar navigation without page CSS.
+- `.mote-card` reads `--mote-status` for its border — featured/emphasized
+  cards from one status class.
+- Docs recipes: card flush-media, numeric table columns with sticky
+  headers, sparse grids (auto-fit), canonical search form.
+- `.mote-stack` opt-in class: stretches form fields to 100% while
+  keeping checkboxes/radios at native 1em — no page CSS needed.
+- `--mote-container-max` token (default 70rem): narrow the reading
+  measure for long-form pages without new classes.
+- Spinner sized in em (1.25em, 0.15em border) — scales with context
+  (buttons, table rows, loading text).
+- Docs: display text section with error-code example and status tinting;
+  `--mote-avatar` sizing variable documented; `--mote-grid-min` density
+  variable documented; `[role="alert"]`/`[role="status"]` semantic
+  feedback helpers documented; safe stacked-form recipe and `.mote-stack`;
+  Chromium theme-toggle transition workaround.
+
+### Changed
+
+- Second ten-app evaluation completed against v0.5.1; all round-1 fixes
+  verified holding. Round-2 findings addressed in this release.
+
+### Fixed
+
+- Pagination: the current page (`aria-current`) kept its pill state on
+  hover — previously the generic link hover overrode the accent pill,
+  making "you are here" indistinguishable from hovering any other page.
+  The current page now deepens on hover (same accent-mix pattern as solid
+  buttons); non-current links keep the soft-tint hover. Docs recommend a
+  `<span>` for the current page (you are already there — not a link).
+
+### Added
+
+- Logo: a cinematic photograph of a single dust mote floating in warm
+  golden sunbeams (docs/img/mote-logo.jpg), integrated into the docs hero.
+- Repositioned from "classless" to "class-optional" throughout — more
+  honest now that the library ships ~25 opt-in classes for statuses,
+  components, helpers, and layout. The core promise is unchanged:
+  zero classes required, semantic elements are the default.
+- Pagination documentation: code sample and live example in the Layout
+  section, alongside the breadcrumbs it mirrors.
+
 ## [0.5.0] - 2026-10-20
 
 ### Added
@@ -252,6 +335,8 @@ Components:
 - Element gallery demo page (`demo.html`).
 
 [0.3.0]: https://gitlab.com/abmach/mote/compare/v0.2.1...v0.3.0
+[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
 [0.4.0]: https://gitlab.com/abmach/mote/compare/v0.3.0...v0.4.0
 [0.3.0]: https://gitlab.com/abmach/mote/compare/v0.2.1...v0.3.0

package/README.md

@@ -1,8 +1,8 @@
 # mote.css
 
-> The smallest thing that can carry style — a tiny, semantic, classless CSS layer for plain HTML.
+> The smallest thing that can carry style — a tiny, semantic, class-optional CSS layer for plain HTML.
 
-A mote of styling for plain HTML: **zero dependencies, zero build step, zero classes required**. Write semantic HTML, drop in one file, and it looks like a place you'd want to stay a while — modern, warm, unobtrusive. Inspired by the quiet excellence of [oat](https://github.com/knadh/oat), with its own cozy voice.
+A mote of styling for plain HTML: **zero dependencies, zero build step, zero classes required** — but opt-in classes exist for statuses, components, and layout when you want them. Write semantic HTML, drop in one file, and it looks like a place you'd want to stay a while — modern, warm, unobtrusive. Inspired by the quiet excellence of [oat](https://github.com/knadh/oat), with its own cozy voice.
 
 Source on [GitLab](https://gitlab.com/abmach/mote) · mirrored on [GitHub](https://github.com/abmach/mote).
 
@@ -23,7 +23,7 @@ Source on [GitLab](https://gitlab.com/abmach/mote) · mirrored on [GitHub](https
 
 ## Principles
 
-- **Semantic HTML is the API.** mote styles elements by what they *are* — headings, forms, `dialog`, `menu` — not by the classes they wear. Classes exist only where the platform has no semantic carrier (a "card" is not a semantic concept).
+- **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.
 - **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.
@@ -96,6 +96,10 @@ The consequence: theming is a handful of variable overrides, and an inline tweak
 | `--mote-radius` | `10px` | | Default corner softness |
 | `--mote-radius-sm` | `6px` | | Controls, inline code |
 | `--mote-radius-lg` | `16px` | | Dialogs |
+| `--mote-container-max` | `70rem` | | Page wrapper max width (narrow for reading) |
+| `--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-shadow` / `--mote-shadow-sm` | warm diffuse | | Elevation |
 | `--mote-transition` | `150ms ease` | | Hover/focus timing |
 
@@ -125,7 +129,7 @@ Or self-host with `npm install @fontsource-variable/inter @fontsource/commit-mon
 
 ## Opt-in helpers
 
-mote is classless by design; these are the only escape hatches, plus status classes that every status-consuming component reads:
+mote is class-optional by design — elements are styled from tags alone; these classes are opt-in conveniences, never a required API:
 
 | Class | Purpose |
 |---|---|
@@ -141,14 +145,18 @@ mote is classless by design; these are the only escape hatches, plus status clas
 | 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` — classless; `.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>` |
 | 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 |
+| 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 |
 | Pagination | `nav[aria-label="pagination"]` — semantic, no class |
-| Footer baseline | `body > footer` — classless top-border + padding |
+| 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` |
 | Status inheritance control | `.mote-default` (force accent) · `.mote-reset` (clear inherited status) |
 | Breadcrumbs | `nav[aria-label="breadcrumb"]` — semantic, no class |
 | Card grids | `.mote-grid` — auto-fill columns from the container, no breakpoints |

package/mote.components.css

@@ -1,6 +1,6 @@
 /*!
  * mote.components.css — opt-in components for mote.css.
- * v0.5.0 · MIT
+ * v0.6.0 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * Requires mote.css loaded first (provides the --mote-* tokens).
@@ -19,6 +19,7 @@
   flex-direction: column;
   padding: 1.25rem 1.5rem;
   border: var(--mote-border-width) solid var(--mote-border);
+  border-color: color-mix(in oklab, var(--mote-status, var(--mote-border)), var(--mote-border) 60%);
   border-radius: var(--mote-radius-lg);
   background: color-mix(in oklab, var(--mote-surface) 55%, var(--mote-bg));
   box-shadow: var(--mote-shadow-sm);
@@ -48,7 +49,11 @@
   line-height: 1.4;
   background: var(--mote-status-soft, var(--mote-accent-soft));
   color: var(--mote-status, var(--mote-accent-deep));
-  user-select: none;
+}
+
+/* Badges as links (tag chips, version pills): kill the underline */
+a:where(.mote-badge) {
+  text-decoration: none;
 }
 
 /* ---------------------------------------------------------------------------
@@ -95,9 +100,10 @@
 .mote-spinner {
   display: inline-block;
   vertical-align: -0.25em;
-  width: 1.25rem;
-  height: 1.25rem;
-  border: 2px solid color-mix(in oklab, var(--mote-status, var(--mote-accent)), transparent 65%);
+  /* em sizing: scales with context (buttons, table rows, loading text) */
+  width: 1.25em;
+  height: 1.25em;
+  border: 0.15em solid color-mix(in oklab, var(--mote-status, var(--mote-accent)), transparent 65%);
   border-block-start-color: var(--mote-status, var(--mote-accent));
   border-radius: 999px;
   animation: mote-spin 0.7s linear infinite;
@@ -110,7 +116,7 @@
 /* ---------------------------------------------------------------------------
  * 6. Site header and nav
  *
- * The page shell is styled classlessly: a header that is a direct
+ * The page shell is styled semantically: a header that is a direct
  * child of <body> is the site bar, its nav the pill row. The classes
  * exist for the one case landmarks cannot express — a shell wrapped
  * in a <div> (common with frameworks), where body > header cannot
@@ -124,6 +130,7 @@
   background: color-mix(in oklab, var(--mote-bg) 82%, transparent);
   backdrop-filter: blur(10px);
   border-block-end: var(--mote-border-width) solid var(--mote-border);
+  padding-block: 0.7rem;
 }
 
 :where(body > header nav, .mote-nav) ul {
@@ -183,13 +190,14 @@ nav[aria-label="breadcrumb"] [aria-current="page"] {
 /* Pagination — semantic selector, no class (mirrors breadcrumbs) */
 nav[aria-label="pagination"] ul {
   display: flex;
+  flex-wrap: wrap;
   gap: 0.25rem;
   padding: 0;
   margin: 0;
   list-style: none;
 }
 
-nav[aria-label="pagination"] a {
+nav[aria-label="pagination"] :is(a, [aria-current="page"]) {
   display: inline-block;
   min-width: 2.2rem;
   padding: 0.35rem 0.6rem;
@@ -200,7 +208,7 @@ nav[aria-label="pagination"] a {
   transition: background var(--mote-transition), color var(--mote-transition);
 }
 
-nav[aria-label="pagination"] a:hover {
+nav[aria-label="pagination"] a:hover:not([aria-current]) {
   background: var(--mote-accent-soft);
   color: var(--mote-accent-deep);
 }
@@ -210,6 +218,33 @@ nav[aria-label="pagination"] [aria-current="page"] {
   color: var(--mote-on-accent);
 }
 
+nav[aria-label="pagination"] [aria-current="page"]:hover {
+  background: color-mix(in oklab, var(--mote-accent), var(--mote-fg) 14%);
+  color: var(--mote-on-accent);
+}
+
+/* Table of contents — semantic selector (mirrors breadcrumbs/pagination) */
+nav[aria-label="toc"] ul {
+  padding-inline-start: 0.8rem;
+  margin: 0;
+  list-style: none;
+  font-size: 0.9em;
+}
+
+nav[aria-label="toc"] li {
+  margin-block: 0.2rem;
+}
+
+nav[aria-label="toc"] a {
+  color: var(--mote-muted);
+  text-decoration: none;
+  transition: color var(--mote-transition);
+}
+
+nav[aria-label="toc"] a:hover {
+  color: var(--mote-accent-deep);
+}
+
 /* Page footer: the quiet sibling of the site header */
 :where(body > footer, .mote-footer) {
   margin-block-start: 3rem;
@@ -456,6 +491,7 @@ details[name] > :not(summary):last-child {
    when the header actually exists. */
 html:where(:has(body > header)) {
   scroll-padding-block-start: 5rem;
+  --mote-rail-top: 4.75rem;
 }
 
 .mote-doc > header { grid-row: 1; grid-column: 1 / -1; }
@@ -463,6 +499,12 @@ html:where(:has(body > header)) {
 
 .mote-doc > main { grid-row: 2; grid-column: 1; min-width: 0; }
 
+/* Content stays inside the grid track — wide tables scroll here,
+    not the page. */
+.mote-doc > main {
+  overflow-x: clip;
+}
+
 /* nav = left rail */
 .mote-doc > nav {
   grid-row: 2;
@@ -507,6 +549,17 @@ html:where(:has(body > header)) {
   color: var(--mote-on-accent);
 }
 
+/* Rail headings: small label-scale for grouped navigation */
+.mote-doc > nav :is(h2, h3) {
+  margin: 1rem 0 0.3rem;
+  padding-inline: 0.75rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--mote-muted);
+}
+
 .mote-doc:where(:has(> nav)) {
   grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
 }

package/mote.css

@@ -1,10 +1,10 @@
 /*!
  * mote.css — a mote of styling for plain HTML.
- * v0.5.0 · MIT
+ * v0.6.0 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * The smallest thing that can carry style:
- * framework-agnostic, semantic, classless, zero dependencies.
+ * framework-agnostic, semantic, class-optional, zero dependencies.
  *
  * MIT License. Fonts (Inter, Commit Mono) are NOT bundled.
  * See the README for one-line self-hosting instructions.
@@ -46,6 +46,9 @@
   --mote-tracking: -0.011em;
   /* Display scale — opt-in, for heroes and error pages; body scale untouched */
   --mote-display: clamp(2.75rem, 1.5rem + 4vw, 5rem);
+  /* Reading measure: the comfortable max width for long-form content.
+     Override per-page for narrow or wide layouts. */
+  --mote-container-max: 70rem;
 
   /* Shape & depth */
   --mote-radius: 10px;
@@ -451,10 +454,16 @@ select[multiple] {
   width: 1em;
   height: 1em;
   padding: 0;
-  accent-color: var(--mote-accent);
+  accent-color: var(--mote-status, var(--mote-accent));
   vertical-align: baseline;
 }
 
+/* Harden checkbox/radio sizing against page-level width: 100% rules
+   (the documented stacked-form recipe). :where() keeps it overridable. */
+:is([type="checkbox"], [type="radio"]):where(input) {
+  width: 1em;
+}
+
 [type="color"] {
   padding: 0.2rem;
   height: 2.4rem;
@@ -484,7 +493,7 @@ select[multiple] {
   cursor: not-allowed;
 }
 
-:is(input, select, textarea):user-invalid {
+:is(input, select, textarea):is(:user-invalid, [aria-invalid="true"]) {
   border-color: var(--mote-error);
 }
 
@@ -526,6 +535,10 @@ button:hover, [type="button"]:hover, [type="submit"]:hover, [type="reset"]:hover
   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;
+  border-radius: var(--mote-radius-sm);
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .mote-ghost:hover {
@@ -625,12 +638,13 @@ progress, meter {
 /* ---------------------------------------------------------------------------
  * 11. Opt-in helpers
  *
- * mote is classless by design; these are the only three escape hatches.
+ * mote is class-optional by design — elements are styled from tags
+ * alone; these classes are opt-in conveniences, never a required API.
  * ------------------------------------------------------------------------- */
 
 /* Centered page wrapper: <main class="mote-container"> */
 .mote-container {
-  width: min(100% - 3rem, 70rem);
+  width: min(100% - 3rem, var(--mote-container-max));
   margin-inline: auto;
 }
 
@@ -648,6 +662,70 @@ progress, meter {
 
 .mote-push { margin-inline-start: auto; }
 
+/* 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) {
+  width: 100%;
+}
+
+.mote-stack :is([type="checkbox"], [type="radio"]) {
+  width: 1em;
+}
+
+/* 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). */
+.mote-btn {
+  display: inline-block;
+  font: inherit;
+  font-weight: 500;
+  color: var(--mote-on-accent);
+  padding: 0.5rem 1.1rem;
+  background: var(--mote-accent);
+  border: var(--mote-border-width) solid transparent;
+  border-radius: var(--mote-radius-sm);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background var(--mote-transition), border-color var(--mote-transition),
+    transform var(--mote-transition);
+}
+
+.mote-btn:hover {
+  background: color-mix(in oklab, var(--mote-accent), var(--mote-fg) 14%);
+  box-shadow: var(--mote-shadow-sm);
+}
+
+.mote-btn:active {
+  transform: translateY(1px);
+}
+
+.mote-btn:where(.mote-success, .mote-warning, .mote-error, .mote-info, .mote-muted):where(:not(.mote-ghost)) {
+  background: var(--mote-status);
+  color: var(--mote-on-status, var(--mote-bg));
+}
+
+.mote-btn:where(.mote-success, .mote-warning, .mote-error, .mote-info, .mote-muted):where(:not(.mote-ghost)):hover {
+  background: color-mix(in oklab, var(--mote-status), var(--mote-fg) 14%);
+}
+
+/* Media object: avatar/icon beside body (forum posts, comments, chat) */
+.mote-media {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.mote-media > :last-child {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Headings inside rows (version headers, card titles): default heading
+   margins balloon the row — zero them inside the flex context. */
+:where(.mote-row) > :is(h1, h2, h3, h4, h5, h6) {
+  margin-block: 0;
+}
+
 /* Visually hidden, screen-reader available */
 .mote-sr-only {
   position: absolute;
@@ -739,6 +817,7 @@ progress, meter {
   font-size: var(--mote-display);
   line-height: 1.1;
   letter-spacing: var(--mote-tracking);
+  color: var(--mote-status, inherit);
   text-wrap: balance;
 }
 
@@ -783,4 +862,10 @@ progress, meter {
   a { color: #000; }
   details { border: none; }
   dialog { box-shadow: none; }
+
+  /* Opt-in print helpers */
+  .mote-no-print { display: none !important; }
+  .mote-print-only { display: block; }
 }
+
+.mote-print-only { display: none; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mote.css",
-  "version": "0.5.0",
-  "description": "A mote of styling for plain HTML — tiny, semantic, classless CSS with zero dependencies and no build step.",
+  "version": "0.6.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": [
     "mote.css",
@@ -12,7 +12,7 @@
   ],
   "keywords": [
     "css",
-    "classless",
+    "class-optional",
     "semantic",
     "framework-agnostic",
     "dark-mode",