mote.css 0.10.9 → 0.12.0

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).
 
+## [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)
+
+- `.mote-card-media` now sizes a direct inline SVG cover while preserving the
+  SVG's own `viewBox` ratio. Nested SVG icons remain unaffected.
+- `.mote-card-actions` bottom-aligns a card action row without owning the
+  row's display, gap, or wrapping.
+- `.mote-row-status` paints a status row's direct cells with
+  `background-color`, preserving semantic row headers and background-image
+  layers. Status classes remain token carriers without the helper.
+
+### Fixed (docs — round-15 findings)
+
+- The phone-record recipe now requires a non-empty `data-label` on every
+  transformed data cell and warns that a missing label renders blank.
+- The recipe states that its breakpoint is an example, that media-query
+  thresholds cannot be parameterized with CSS variables, and that the
+  transform and cap-release queries must use the same chosen threshold.
+- Table documentation now distinguishes page and wrapper scrolling and
+  explains that the 60vh cap does not crop content.
+- Print guidance now includes a practical paper checklist covering content,
+  tables, pagination, forms, and generated-PDF inspection.
+- Card documentation now covers direct inline SVG covers and the
+  `.mote-card-actions` helper.
+
+### Tests
+
+- The regression fixture asserts direct SVG cover sizing and ratio, nested SVG
+  isolation, card-action bottom alignment, status-row painting, background
+  image preservation, and gated badge behavior.
+- Documentation source checks cover the new guidance, reject leaked live
+  tags in copy-ready samples, and pin both the encoded and live SVG card-cover
+  structures, including their wrapper, SVG, rectangle, and circle elements.
+- The fixture's screen-only status and card probes stay off paper through a
+  fixture-local print rule, so the print-emulation PDF remains a focused
+  four-page regression artifact without repurposing `.mote-no-print`.
+
+### Evaluation
+
+- Fifteenth round: ten independent agents built ten new page types against
+  v0.10.9. All ten would use mote again. The final pages had no confirmed
+  library failures; these changes address the recurring authoring friction
+  and documentation gaps surfaced by the round.
+
 ## [0.10.9] - 2026-10-29
 
 ### Fixed (components — round-14 findings)
@@ -885,7 +948,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.9...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
 [0.10.7]: https://gitlab.com/abmach/mote/compare/v0.10.6...v0.10.7

package/README.md

@@ -157,7 +157,7 @@ mote is class-optional by design — elements are styled from tags alone; these
 | Solid button on any element | `.mote-btn` — the full solid recipe for anchors, spans; status classes gated |
 | Hero centering | `.mote-hero` — vertically centers content for error/login/empty-state pages |
 | CTA bands | `.mote-band` — full-bleed tinted section; opaque in both themes, reads `--mote-status` |
-| Card cover media | `.mote-card-media` — flush-top cover images with matched radius |
+| Card cover media | `.mote-card-media` — flush-top cover images, video, or direct inline SVG with matched radius |
 | Brand/wordmark | `.mote-brand` — quiet non-nav link for site headers |
 | 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` |
@@ -193,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.10.9 · 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).
@@ -393,6 +393,17 @@ nav[aria-label="toc"] a:hover {
   border-radius: inherit;
 }
 
+/* A direct inline SVG is a card cover too. Keep this direct-child only:
+   nested icons must keep their own dimensions. No fixed aspect ratio —
+   the SVG's viewBox determines the rendered height. */
+.mote-card-media > svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-width: none;
+  border-radius: inherit;
+}
+
 /* 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.10.9 · 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.10.9",
+  "version": "0.12.0",
   "bugs": {
     "url": "https://gitlab.com/abmach/mote/-/issues"
   },