mote.css 0.4.0 → 0.5.1

package/CHANGELOG.md

@@ -5,6 +5,115 @@ 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.5.1] - 2026-10-20
+
+### 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
+
+- Semantic buttons: solid buttons take a status class (`.mote-success`,
+  `.mote-warning`, `.mote-error`, `.mote-info`, `.mote-muted`) — gated, so
+  the class must be on the button itself. Themed sections (error notes,
+  toasts, page-level status) never recolor the actions inside them; the
+  intent of an action is declared at the action site. Text color on
+  semantic solids is `--mote-on-status` (set by the status classes to the
+  page color, AA-verified in both themes).
+- Ghost buttons (`.mote-ghost`): transparent fill, status-tinted border
+  and text. Gated like solids — the status class on the element itself
+  provides the tint, never the surrounding context.
+- `.mote-default` and `.mote-reset`: control status inheritance for
+  the non-gated consumers (badges, notes, spinners, …). Default forces the
+  accent down the tree; reset clears the inherited status so each
+  element's own classes decide.
+- `.mote-row` + `.mote-push`: flex row helper + right-align helper —
+  for headers, footers, toolbars, chip lists, form rows.
+- `.mote-display` + `--mote-display` token: opt-in display/hero scale.
+- `--mote-grid-min` variable on `.mote-grid`: density without a class API.
+- `.mote-sr-only`: visually-hidden helper; doubles as a skip link when
+  focused.
+- Semantic pagination: `nav[aria-label="pagination"]` — flex row of
+  pills with `aria-current` state, no class (mirrors breadcrumbs).
+- Footer baseline: `body > footer` gets a top border and block padding
+  (the quiet sibling of the site header).
+- `.mote-card` is now `display: flex; flex-direction: column` —
+  CTA-in-bottom-of-card aligns with `margin-block-start: auto` for free.
+- Theme-aware hover deepening for buttons: `color-mix(accent/status,
+  fg 14%)` — darkens in light themes, brightens in dark ones.
+
+### Changed
+
+- Docs: buttons and statuses section (gating rationale, ghost inheritance),
+  `.mote-default`/`.mote-reset` guidance, new component table entries.
+
+### Fixed
+
+Layout shell (`mote.components.css`), from the ten-app evaluation:
+- `.mote-doc` mobile: nav/main/aside overlapped in one grid cell — the
+  collapse media query now resets `grid-row: auto`.
+- `.mote-doc` blowout on wide content: content tracks are `minmax(0, 1fr)`
+  (+ `min-width: 0` on items); a wide table scrolls inside `main`, never the page.
+- Rail nav no longer renders as the horizontal pill row: pill styles scoped
+  to `body > header nav`; rails get a quiet vertical list with
+  `aria-current` states.
+ Sticky rails and anchored content clear the site header via
+  `--mote-rail-top` (token) and automatic `scroll-padding` when
+  `body > header` exists. `body.mote-doc` gains page gutters.
+
+Core (`mote.css`):
+- `:user-invalid` kept its error border through hover and focus
+  (`:is(input, select, textarea):user-invalid`, placed to win the cascade) —
+  previously the field the user must fix showed the accent focus border.
+- `--mote-accent-deep` now brightens in dark mode (`color-mix(accent,
+  white 14%)`); dark hovers, badges and notes no longer dim.
+- `input[type="range"]` stripped of text-input chrome; `select[multiple]`
+  restored to native listbox appearance.
+- `[role="status"]` / `[role="alert"]` read `--mote-status` (semantic
+  colors as fallback) instead of hard-coding.
+- `.mote-note` gains block margin; `.mote-badge` line-height tamed in
+  headings; `blockquote` code no longer italic; `.mote-card` first/last-child
+  rules moved into `:where()` so page classes win; dialogs get
+  `max-width: min(90vw, 44rem)`; `.mote-avatar` sized by
+  `--mote-avatar` token; `.mote-skeleton` gets intrinsic size.
+- Print: the light palette is forced on paper — dark fills (zebra, notes,
+  open details) no longer print as near-black bands.
+- Focus rings no longer fade in (box-shadow removed from transitions).
+
+Components:
+- Popovers and dialogs now animate on exit, not just entrance
+  (closed-state deltas for the `allow-discrete` transitions).
+- `details[name]` content padding fixed for multiple children
+  (was padding every child; now only the last).
+- Toasts documented with `popover="manual"` (auto popovers light-dismiss);
+  samples corrected.
+
+### Changed
+
+- README and docs CDN snippets use `mote.css@0` (range pin) so they never go
+  stale; exact-version pinning documented for reproducible builds.
+- Docs: wide-table wrapper recipe, form-width guidance, document-shell
+  real-page notes (gutters, rail-top token), print caveats for exclusive
+  accordions, toast stacking guidance; section numbering fixed.
+
 ## [0.4.0] - 2026-10-20
 
 ### Fixed
@@ -165,11 +274,10 @@ Components:
 - Element gallery demo page (`demo.html`).
 
 [0.3.0]: https://gitlab.com/abmach/mote/compare/v0.2.1...v0.3.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
 [0.2.1]: https://gitlab.com/abmach/mote/compare/v0.2.0...v0.2.1
 [0.2.0]: https://gitlab.com/abmach/mote/compare/v0.1.0...v0.2.0
 [0.1.0]: https://gitlab.com/abmach/mote/-/tags/v0.1.0
-
----
-
-Copyright (c) 2026 Arthur Biazon Machado. All rights reserved.

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.
@@ -125,7 +125,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,7 +141,15 @@ 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) |
+| 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` — semantic top-border + padding |
+| Screen-reader helper | `.mote-sr-only` (doubles as a skip link when focused) |
+| 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 |
 | Cards | `.mote-card` |

package/mote.components.css

@@ -1,6 +1,6 @@
 /*!
  * mote.components.css — opt-in components for mote.css.
- * v0.4.0 · MIT
+ * v0.5.1 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * Requires mote.css loaded first (provides the --mote-* tokens).
@@ -15,6 +15,8 @@
  * ------------------------------------------------------------------------- */
 
 .mote-card {
+  display: flex;
+  flex-direction: column;
   padding: 1.25rem 1.5rem;
   border: var(--mote-border-width) solid var(--mote-border);
   border-radius: var(--mote-radius-lg);
@@ -108,7 +110,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
@@ -178,6 +180,48 @@ nav[aria-label="breadcrumb"] [aria-current="page"] {
   font-weight: 500;
 }
 
+/* Pagination — semantic selector, no class (mirrors breadcrumbs) */
+nav[aria-label="pagination"] ul {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+nav[aria-label="pagination"] a {
+  display: inline-block;
+  min-width: 2.2rem;
+  padding: 0.35rem 0.6rem;
+  border-radius: var(--mote-radius-sm);
+  text-align: center;
+  text-decoration: none;
+  color: var(--mote-fg);
+  transition: background var(--mote-transition), color var(--mote-transition);
+}
+
+nav[aria-label="pagination"] a:hover:not([aria-current]) {
+  background: var(--mote-accent-soft);
+  color: var(--mote-accent-deep);
+}
+
+nav[aria-label="pagination"] [aria-current="page"] {
+  background: var(--mote-accent);
+  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);
+}
+
+/* Page footer: the quiet sibling of the site header */
+:where(body > footer, .mote-footer) {
+  margin-block-start: 3rem;
+  padding-block: 1.5rem;
+  border-block-start: var(--mote-border-width) solid var(--mote-border);
+}
+
 /* ---------------------------------------------------------------------------
  * 8. Popover surfaces — tooltips, menus, toasts
  *
@@ -520,5 +564,7 @@ html:where(:has(body > header)) {
 .mote-grid {
   display: grid;
   gap: 1.25rem;
-  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
+  /* 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));
 }

package/mote.css

@@ -1,10 +1,10 @@
 /*!
  * mote.css — a mote of styling for plain HTML.
- * v0.4.0 · MIT
+ * v0.5.1 · 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.
@@ -44,6 +44,8 @@
     "Liberation Mono", monospace;
   --mote-line-height: 1.65;
   --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);
 
   /* Shape & depth */
   --mote-radius: 10px;
@@ -500,10 +502,51 @@ button, [type="button"], [type="submit"], [type="reset"] {
 }
 
 button:hover, [type="button"]:hover, [type="submit"]:hover, [type="reset"]:hover {
-  background: var(--mote-accent-deep);
+  /* Theme-aware deepening: fg is dark in light themes, light in dark ones. */
+  background: color-mix(in oklab, var(--mote-accent), var(--mote-fg) 14%);
   box-shadow: var(--mote-shadow-sm);
 }
 
+/* Semantic solids are gated: the status class must sit on the button
+   itself, so a themed section (body.mote-error, a note, a toast) never
+   recolors the actions inside it. The token read below is therefore
+   the button's own, never an inherited one. */
+:is(button, [type="button"], [type="submit"], [type="reset"]):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));
+}
+
+:is(button, [type="button"], [type="submit"], [type="reset"]):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%);
+}
+
+/* Ghost buttons: quiet, transparent fill, accent-tinted. Like solids,
+   status colors come from the button's own class, never from context. */
+.mote-ghost {
+  background: none;
+  border: var(--mote-border-width) solid color-mix(in oklab, var(--mote-accent), transparent 55%);
+  color: var(--mote-accent-deep);
+}
+
+.mote-ghost:hover {
+  background: var(--mote-accent-soft);
+  color: var(--mote-accent-deep);
+  box-shadow: none;
+}
+
+/* Gated ghost+status: the status class on the element itself tints the
+   border and text (same gating as the solid buttons). Works on buttons
+   and anchors alike — .mote-ghost is element-agnostic. */
+.mote-ghost:where(.mote-success, .mote-warning, .mote-error, .mote-info, .mote-muted) {
+  border-color: color-mix(in oklab, var(--mote-status), transparent 55%);
+  color: var(--mote-status);
+}
+
+.mote-ghost:where(.mote-success, .mote-warning, .mote-error, .mote-info, .mote-muted):hover {
+  background: var(--mote-status-soft);
+  color: var(--mote-status);
+}
+
 button:active, [type="button"]:active, [type="submit"]:active, [type="reset"]:active {
   transform: translateY(1px);
 }
@@ -582,7 +625,8 @@ 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"> */
@@ -594,6 +638,47 @@ progress, meter {
 /* Dimmed text: <small class="mote-muted"> */
 .mote-muted { color: var(--mote-muted); }
 
+/* Row of things: headers, footers, toolbars, chip lists.
+   .mote-push on a child right-aligns it (and everything after). */
+.mote-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.mote-push { margin-inline-start: auto; }
+
+/* Visually hidden, screen-reader available */
+.mote-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Skip link: sr-only until focused, then a fixed pill */
+.mote-sr-only:focus-visible {
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  width: auto;
+  height: auto;
+  margin: 0;
+  padding: 0.5rem 1rem;
+  clip-path: none;
+  z-index: 20;
+  background: var(--mote-accent);
+  color: var(--mote-on-accent);
+  border-radius: var(--mote-radius-sm);
+  text-decoration: none;
+}
+
 /* ---------------------------------------------------------------------------
  * 12. Status classes
  *
@@ -608,10 +693,10 @@ progress, meter {
  * inline: style="--mote-status: rebeccapurple".
  * ------------------------------------------------------------------------- */
 
-.mote-success { --mote-status: var(--mote-success); --mote-status-soft: var(--mote-success-soft); }
-.mote-warning { --mote-status: var(--mote-warning); --mote-status-soft: var(--mote-warning-soft); }
-.mote-error   { --mote-status: var(--mote-error);   --mote-status-soft: var(--mote-error-soft); }
-.mote-info    { --mote-status: var(--mote-info);    --mote-status-soft: var(--mote-info-soft); }
+.mote-success { --mote-status: var(--mote-success); --mote-status-soft: var(--mote-success-soft); --mote-on-status: var(--mote-bg); }
+.mote-warning { --mote-status: var(--mote-warning); --mote-status-soft: var(--mote-warning-soft); --mote-on-status: var(--mote-bg); }
+.mote-error   { --mote-status: var(--mote-error);   --mote-status-soft: var(--mote-error-soft);   --mote-on-status: var(--mote-bg); }
+.mote-info    { --mote-status: var(--mote-info);    --mote-status-soft: var(--mote-info-soft);    --mote-on-status: var(--mote-bg); }
 
 /* .mote-muted does double duty: dimmed text where nothing consumes the
    tokens, and a neutral status where something does. */
@@ -619,6 +704,25 @@ progress, meter {
   color: var(--mote-muted);
   --mote-status: var(--mote-muted);
   --mote-status-soft: color-mix(in oklab, var(--mote-fg) 7%, transparent);
+  --mote-on-status: var(--mote-bg);
+}
+
+/* .mote-default: the accent as an explicit status — "keep this (and its
+   descendants) plum" inside a themed section. Unlike the semantics, this
+   IS meant to be applied contextually. */
+.mote-default {
+  --mote-status: var(--mote-accent);
+  --mote-status-soft: var(--mote-accent-soft);
+}
+
+/* .mote-reset: clear an inherited status for a subtree — consumers inside
+   fall back to their own defaults; their own classes re-apply locally.
+   Where .mote-default forces the accent down the tree, .mote-reset
+   removes the theme and lets each element speak for itself. */
+.mote-reset {
+  --mote-status: initial;
+  --mote-status-soft: initial;
+  --mote-on-status: initial;
 }
 
 /* Themed message surfaces — base shape only; status via the token classes */
@@ -630,6 +734,15 @@ progress, meter {
   background: var(--mote-status-soft, var(--mote-accent-soft));
 }
 
+/* Display text: opt-in hero / error-code scale. Widen per use with
+   style="--mote-display: clamp(6rem, 24vw, 12rem)". */
+.mote-display {
+  font-size: var(--mote-display);
+  line-height: 1.1;
+  letter-spacing: var(--mote-tracking);
+  text-wrap: balance;
+}
+
 /* ---------------------------------------------------------------------------
  * 13. Motion preferences & print
  * ------------------------------------------------------------------------- */

package/package.json

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