mote.css 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -5,6 +5,57 @@ 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.4.0] - 2026-10-20
+
+### 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.3.0] - 2026-10-19
 
 ### Added
@@ -114,6 +165,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Element gallery demo page (`demo.html`).
 
 [0.3.0]: https://gitlab.com/abmach/mote/compare/v0.2.1...v0.3.0
+[0.4.0]: https://gitlab.com/abmach/mote/compare/v0.3.0...v0.4.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

package/README.md

@@ -35,15 +35,16 @@ Source on [GitLab](https://gitlab.com/abmach/mote) · mirrored on [GitHub](https
 **CDN** — jsDelivr, serving the npm package, with auto-minified variants:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0.2.0/mote.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0/mote.css">
 <!-- minified variant (dotted filenames minify to <name>.min.css) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0.2.0/mote.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0/mote.min.css">
 
 <!-- optional components file -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0.2.0/mote.components.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0/mote.components.css">
 ```
 
-Use `mote.css@0` to track the latest 0.x release. CDN URLs go live once the package is published.
+`@0` tracks the latest 0.x release, so these snippets never go stale. Pin an exact
+version (`mote.css@0.3.0`) for reproducible production builds.
 
 **npm**:
 

package/mote.components.css

@@ -1,6 +1,6 @@
 /*!
  * mote.components.css — opt-in components for mote.css.
- * v0.3.0 · MIT
+ * v0.4.0 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * Requires mote.css loaded first (provides the --mote-* tokens).
@@ -22,11 +22,11 @@
   box-shadow: var(--mote-shadow-sm);
 }
 
-.mote-card > :first-child {
+:where(.mote-card) > :first-child {
   margin-block-start: 0;
 }
 
-.mote-card > :last-child {
+:where(.mote-card) > :last-child {
   margin-block-end: 0;
 }
 
@@ -43,7 +43,7 @@
   border-radius: 999px;
   font-size: 0.8em;
   font-weight: 500;
-  line-height: 1.8;
+  line-height: 1.4;
   background: var(--mote-status-soft, var(--mote-accent-soft));
   color: var(--mote-status, var(--mote-accent-deep));
   user-select: none;
@@ -54,8 +54,8 @@
  * ------------------------------------------------------------------------- */
 
 .mote-avatar {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: var(--mote-avatar, 2.5rem);
+  height: var(--mote-avatar, 2.5rem);
   border-radius: 999px;
   object-fit: cover;
   border: var(--mote-border-width) solid var(--mote-border);
@@ -67,6 +67,8 @@
  * ------------------------------------------------------------------------- */
 
 .mote-skeleton {
+  display: inline-block;
+  min-height: 1em;
   border-radius: var(--mote-radius-sm);
   background:
     linear-gradient(
@@ -122,7 +124,7 @@
   border-block-end: var(--mote-border-width) solid var(--mote-border);
 }
 
-:where(body > header nav, body > nav, .mote-nav) ul {
+:where(body > header nav, .mote-nav) ul {
   display: flex;
   flex-wrap: wrap;
   gap: 0.25rem;
@@ -131,7 +133,7 @@
   list-style: none;
 }
 
-:where(body > header nav, body > nav, .mote-nav) a {
+:where(body > header nav, .mote-nav) a {
   display: inline-block;
   padding: 0.35rem 0.8rem;
   border-radius: 999px;
@@ -140,12 +142,12 @@
   transition: background var(--mote-transition), color var(--mote-transition);
 }
 
-:where(body > header nav, body > nav, .mote-nav) a:hover {
+:where(body > header nav, .mote-nav) a:hover {
   background: var(--mote-accent-soft);
   color: var(--mote-accent-deep);
 }
 
-:where(body > header nav, body > nav, .mote-nav) a[aria-current="page"] {
+:where(body > header nav, .mote-nav) a[aria-current="page"] {
   background: var(--mote-accent);
   color: var(--mote-on-accent);
 }
@@ -267,7 +269,9 @@ menu[popover] :is(button, [role="menuitem"]):focus-visible {
  * ------------------------------------------------------------------------- */
 
 [popover],
-dialog[open] {
+dialog {
+  opacity: 0;
+  transform: translateY(8px) scale(0.98);
   transition:
     opacity 180ms ease,
     transform 180ms ease,
@@ -328,7 +332,11 @@ details[name][open] summary {
 
 details[name] > :not(summary) {
   margin-block: 0;
-  padding: 0.15rem 1.2rem 0.9rem;
+  padding: 0.15rem 1.2rem 0;
+}
+
+details[name] > :not(summary):last-child {
+  padding-block-end: 0.9rem;
 }
 
 /* ---------------------------------------------------------------------------
@@ -397,31 +405,71 @@ details[name] > :not(summary) {
   grid-template-columns: 1fr;
 }
 
-/* On <body>, the middle row stretches the page so the footer pins to
-   the viewport bottom even when content is short. :where() keeps this
+/* On <body>, the middle row stretches the page so the footer pins to the
+   viewport bottom even when content is short. :where() keeps this
    at base specificity; wrappers (demo boxes, embeds) stay natural-size. */
 :where(body).mote-doc {
   min-height: 100svh;
+  padding-inline: 1.5rem;
+}
+
+/* Anchored content must clear the sticky shell header. Applies only
+   when the header actually exists. */
+html:where(:has(body > header)) {
+  scroll-padding-block-start: 5rem;
 }
 
 .mote-doc > header { grid-row: 1; grid-column: 1 / -1; }
 .mote-doc > footer { grid-row: 3; grid-column: 1 / -1; }
 
-.mote-doc > main { grid-row: 2; grid-column: 1; }
+.mote-doc > main { grid-row: 2; grid-column: 1; min-width: 0; }
 
 /* nav = left rail */
 .mote-doc > nav {
   grid-row: 2;
   grid-column: 1;
+  min-width: 0;
   align-self: start;
   position: sticky;
-  top: 1rem;
+  top: var(--mote-rail-top, 1rem);
   max-height: calc(100svh - 2rem);
   overflow: auto;
 }
 
+/* Rail links: a quiet vertical list, not the horizontal pill row.
+   --mote-rail-top should clear the shell header: 1rem by default;
+   set it on :root when a sticky body > header is taller, e.g.
+   --mote-rail-top: 4.75rem. */
+.mote-doc > nav ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.mote-doc > nav a {
+  display: block;
+  padding: 0.35rem 0.75rem;
+  border-radius: var(--mote-radius-sm);
+  text-decoration: none;
+  color: var(--mote-fg);
+  transition: background var(--mote-transition), color var(--mote-transition);
+}
+
+.mote-doc > nav a:hover {
+  background: var(--mote-accent-soft);
+  color: var(--mote-accent-deep);
+}
+
+.mote-doc > nav a[aria-current="page"] {
+  background: var(--mote-accent);
+  color: var(--mote-on-accent);
+}
+
 .mote-doc:where(:has(> nav)) {
-  grid-template-columns: minmax(12rem, 16rem) 1fr;
+  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
 }
 
 .mote-doc:where(:has(> nav)) > main {
@@ -432,6 +480,7 @@ details[name] > :not(summary) {
 .mote-doc > aside {
   grid-row: 2;
   grid-column: 2;
+  min-width: 0;
   align-self: start;
 }
 
@@ -440,11 +489,11 @@ details[name] > :not(summary) {
 }
 
 .mote-doc:where(:has(> aside)) {
-  grid-template-columns: 1fr minmax(10rem, 14rem);
+  grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem);
 }
 
 .mote-doc:where(:has(> nav)):where(:has(> aside)) {
-  grid-template-columns: minmax(12rem, 16rem) 1fr minmax(10rem, 14rem);
+  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr) minmax(10rem, 14rem);
 }
 
 @media (width < 50rem) {
@@ -456,6 +505,7 @@ details[name] > :not(summary) {
 
   .mote-doc > :is(nav, aside, main) {
     grid-column: 1 / -1;
+    grid-row: auto;
   }
 
   .mote-doc > nav {

package/mote.css

@@ -1,6 +1,6 @@
 /*!
  * mote.css — a mote of styling for plain HTML.
- * v0.3.0 · MIT
+ * v0.4.0 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * The smallest thing that can carry style:
@@ -84,6 +84,10 @@
     --mote-error: #d98a8a;
     --mote-info: #96b1d1;
 
+    /* "Deep" is the emphasis direction per theme: darker on light
+       surfaces, brighter on dark ones. Never darken in dark mode. */
+    --mote-accent-deep: color-mix(in oklab, var(--mote-accent), white 14%);
+
     --mote-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.3);
     --mote-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
     --mote-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a49c90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
@@ -105,6 +109,8 @@
   --mote-error: #d98a8a;
   --mote-info: #96b1d1;
 
+  --mote-accent-deep: color-mix(in oklab, var(--mote-accent), white 14%);
+
   --mote-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.3);
   --mote-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
   --mote-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a49c90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
@@ -245,6 +251,10 @@ blockquote {
   font-style: italic;
 }
 
+blockquote :where(code, samp, kbd, var) {
+  font-style: normal;
+}
+
 blockquote > cite {
   display: block;
   margin-block-start: 0.5rem;
@@ -403,7 +413,7 @@ input, select, textarea {
   background: var(--mote-surface);
   border: var(--mote-border-width) solid var(--mote-border);
   border-radius: var(--mote-radius-sm);
-  transition: border-color var(--mote-transition), box-shadow var(--mote-transition);
+  transition: border-color var(--mote-transition);
 }
 
 input:hover, select:hover, textarea:hover {
@@ -428,6 +438,13 @@ select {
   background-position: right 0.8rem center;
 }
 
+/* Multi-selects are listboxes, not dropdowns: restore native chrome */
+select[multiple] {
+  appearance: auto;
+  padding: 0.5rem;
+  background-image: none;
+}
+
 [type="checkbox"], [type="radio"] {
   width: 1em;
   height: 1em;
@@ -447,6 +464,14 @@ select {
   border-style: dashed;
 }
 
+/* Range inputs are sliders, not text fields: strip text chrome */
+[type="range"] {
+  padding: 0;
+  border: none;
+  background: none;
+  accent-color: var(--mote-status, var(--mote-accent));
+}
+
 ::placeholder {
   color: var(--mote-muted);
   opacity: 0.8;
@@ -457,7 +482,7 @@ select {
   cursor: not-allowed;
 }
 
-:user-invalid {
+:is(input, select, textarea):user-invalid {
   border-color: var(--mote-error);
 }
 
@@ -471,7 +496,7 @@ button, [type="button"], [type="submit"], [type="reset"] {
   border-radius: var(--mote-radius-sm);
   cursor: pointer;
   transition: background var(--mote-transition), border-color var(--mote-transition),
-    box-shadow var(--mote-transition), transform var(--mote-transition);
+    transform var(--mote-transition);
 }
 
 button:hover, [type="button"]:hover, [type="submit"]:hover, [type="reset"]:hover {
@@ -537,6 +562,7 @@ dialog {
   background: var(--mote-bg);
   color: var(--mote-fg);
   box-shadow: var(--mote-shadow);
+  max-width: min(90vw, 44rem);
 }
 
 dialog::backdrop {
@@ -550,8 +576,8 @@ progress, meter {
 }
 
 /* Semantic feedback helpers (pure HTML, works with <p>, <div>, anything) */
-[role="alert"] { color: var(--mote-error); }
-[role="status"] { color: var(--mote-info); }
+[role="alert"] { color: var(--mote-status, var(--mote-error)); }
+[role="status"] { color: var(--mote-status, var(--mote-info)); }
 
 /* ---------------------------------------------------------------------------
  * 11. Opt-in helpers
@@ -569,7 +595,7 @@ progress, meter {
 .mote-muted { color: var(--mote-muted); }
 
 /* ---------------------------------------------------------------------------
- * 11. Status classes
+ * 12. Status classes
  *
  * Statuses are pure token assignments — they set variables, never visual
  * properties. Base classes (notes, badges, toasts) consume the tokens and
@@ -597,6 +623,7 @@ progress, meter {
 
 /* Themed message surfaces — base shape only; status via the token classes */
 .mote-note {
+  margin-block: 1rem;
   padding: 0.8rem 1.1rem;
   border-radius: var(--mote-radius-sm);
   color: var(--mote-status, var(--mote-accent-deep));
@@ -604,7 +631,7 @@ progress, meter {
 }
 
 /* ---------------------------------------------------------------------------
- * 12. Motion preferences & print
+ * 13. Motion preferences & print
  * ------------------------------------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {
@@ -617,6 +644,26 @@ progress, meter {
 }
 
 @media print {
+  /* Force the light palette on paper — dark fills (zebra, notes,
+     open details) must not print as near-black bands. Placed last:
+     source order ties the dark token blocks' specificity. */
+  :root,
+  :root[data-theme="dark"],
+  :root:not([data-theme="light"]) {
+    color-scheme: light;
+    --mote-bg: #faf9f7;
+    --mote-surface: #f1eee7;
+    --mote-fg: #2b2924;
+    --mote-muted: #716a60;
+    --mote-border: #e6e0d4;
+    --mote-accent: #6f5486;
+    --mote-accent-deep: color-mix(in oklab, var(--mote-accent), black 14%);
+    --mote-success: #4e7d51;
+    --mote-warning: #8a6819;
+    --mote-error: #b34d4d;
+    --mote-info: #527097;
+  }
+
   body {
     background: #fff;
     color: #000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mote.css",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A mote of styling for plain HTML — tiny, semantic, classless CSS with zero dependencies and no build step.",
   "style": "mote.css",
   "files": [