mote.css 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -5,6 +5,28 @@ 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
@@ -252,6 +274,7 @@ 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

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,13 +141,13 @@ 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` — classless top-border + padding |
+| 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 |

package/mote.components.css

@@ -1,6 +1,6 @@
 /*!
  * mote.components.css — opt-in components for mote.css.
- * v0.5.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).
@@ -110,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
@@ -200,7 +200,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 +210,11 @@ 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);
+}
+
 /* Page footer: the quiet sibling of the site header */
 :where(body > footer, .mote-footer) {
   margin-block-start: 3rem;

package/mote.css

@@ -1,10 +1,10 @@
 /*!
  * mote.css — a mote of styling for plain HTML.
- * v0.5.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.
@@ -625,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"> */

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.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",