mote.css 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -5,6 +5,24 @@ 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.12.0] - 2026-10-29
+
+### Removed
+
+- Removed the public `.mote-card-actions` and `.mote-row-status` micro-helpers. Card action rows
+  now use the page-owned `.card-actions` class with
+  `.mote-card > .card-actions { margin-block-start: auto; }`; status rows use
+  the page-owned `.status-row` class with
+  `tr.status-row:is(.mote-success, .mote-warning, .mote-error, .mote-info) > :is(td, th[scope="row"]) { background-color: var(--mote-status-soft); }`.
+- This is a clean cutover: there are no aliases, shims, or replacement mote
+  classes. `.mote-row` continues to own content-row layout.
+
+### Tests
+
+- The minification gate now enforces byte-exact minified budgets of 18,000
+  bytes for `mote.css` and 13,000 bytes for `mote.components.css`. A focused
+  regression proves that an over-budget result fails the gate.
+
 ## [0.11.0] - 2026-10-29
 
 ### Added (components — round-15 findings)
@@ -930,7 +948,8 @@ 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.11.0...HEAD
+[Unreleased]: https://gitlab.com/abmach/mote/compare/v0.12.0...HEAD
+[0.12.0]: https://gitlab.com/abmach/mote/compare/v0.11.0...v0.12.0
 [0.11.0]: https://gitlab.com/abmach/mote/compare/v0.10.9...v0.11.0
 [0.10.9]: https://gitlab.com/abmach/mote/compare/v0.10.8...v0.10.9
 [0.10.8]: https://gitlab.com/abmach/mote/compare/v0.10.7...v0.10.8

package/README.md

@@ -170,7 +170,6 @@ mote is class-optional by design — elements are styled from tags alone; these
 | Pagination | `nav[aria-label="pagination"]` — semantic, no class |
 | Table of contents | `nav[aria-label="toc"]` — semantic, no class |
 | Current table row | `tr[aria-current]` — accent-tinted row, reads over zebra |
-| Status table row | `.mote-row-status` + a status class — paints direct cells while preserving background-image layers |
 | Footer baseline | `body > footer` — semantic top-border + padding; its `nav` renders as a quiet wrapped row |
 | Screen-reader helper | `.mote-sr-only` — pure hiding, never appears |
 | Skip link | `.mote-skip-link` — sr-only until focused, then a fixed pill |
@@ -185,7 +184,6 @@ mote is class-optional by design — elements are styled from tags alone; these
 | Breadcrumbs | `nav[aria-label="breadcrumb"]` — semantic, no class |
 | Card grids | `.mote-grid` — auto-fill columns from the container, no breakpoints |
 | Cards | `.mote-card` — normalizes content: alignment reads start even inside centered regions |
-| Card actions | `.mote-card-actions` — bottom-aligns an action row inside a card without owning the row layout |
 | Badges | `.mote-badge` — gated: status from the badge's own class, never inherited; scales with surrounding text but never enlarges with headings |
 | Avatars | `.mote-avatar` |
 | Skeleton / spinner | `.mote-skeleton`, `.mote-spinner` |
@@ -195,7 +193,24 @@ mote is class-optional by design — elements are styled from tags alone; these
 | Exclusive accordions | `<details name="group">` — the browser closes siblings |
 | Dialog & popover entrance animations | automatic when the file is loaded |
 
-Full live documentation with copyable markup for everything above: **[docs/index.html](docs/index.html)**.
+Full live documentation with copyable markup for the components and recipes: **[docs/index.html](docs/index.html)**.
+
+## Page-owned recipes
+
+These compositions belong to the page, not mote. Copy the rules you need and name the classes in your markup.
+
+```css
+/* Bottom-align actions in a card; .mote-row still owns the row layout. */
+.mote-card > .card-actions {
+  margin-block-start: auto;
+}
+
+/* Paint a status row's direct cells while preserving background images. */
+tr.status-row:is(.mote-success, .mote-warning, .mote-error, .mote-info)
+  > :is(td, th[scope="row"]) {
+  background-color: var(--mote-status-soft);
+}
+```
 
 ## Browser support
 

package/mote.components.css

@@ -1,6 +1,6 @@
 /*!
  * mote.components.css — opt-in components for mote.css.
- * v0.11.0 · MIT
+ * v0.12.0 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * Requires mote.css loaded first (provides the --mote-* tokens).
@@ -36,13 +36,6 @@
   margin-block-end: 0;
 }
 
-/* Bottom-align a card's action row without owning the row's layout.
-   .mote-card is a vertical flex column, so the auto margin consumes the
-   space above the actions. Pair with .mote-row for the row itself. */
-.mote-card-actions {
-  margin-block-start: auto;
-}
-
 /* Band: a full-bleed tinted section — CTA bands, section dividers,
    announcement strips. An opaque mix (unlike --mote-accent-soft, which is
    transparent and can vanish over dark backgrounds), so it reads as a
@@ -411,14 +404,6 @@ nav[aria-label="toc"] a:hover {
   border-radius: inherit;
 }
 
-/* Paint a status row's direct cells when the row opts in. Status classes
-   remain token carriers; this helper is the visual step. background-color
-   deliberately preserves any existing background-image layer. */
-tr.mote-row-status:is(.mote-success, .mote-warning, .mote-error, .mote-info)
-  > :is(td, th[scope="row"]) {
-  background-color: var(--mote-status-soft);
-}
-
 /* Scrollable table wrapper: sticky thead, no page scroll, no margin jump */
 .mote-table-scroll {
   overflow-x: auto;

package/mote.css

@@ -1,6 +1,6 @@
 /*!
  * mote.css — a mote of styling for plain HTML.
- * v0.11.0 · MIT
+ * v0.12.0 · 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.11.0",
+  "version": "0.12.0",
   "bugs": {
     "url": "https://gitlab.com/abmach/mote/-/issues"
   },