mote.css 0.12.1 → 0.13.1

package/CHANGELOG.md

@@ -7,6 +7,44 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.13.1] - 2026-10-30
+
+### Fixed (documentation — round-17 findings)
+
+- Grouped the complete phone-record recipe into transform/visible-label and print-restoration behavior, with shared label-column setup, and made the all-or-nothing checklist explicit.
+- Clarified that a direct body-level header receives the sticky site-shell treatment, and made the intentional wrapper opt-out prominent.
+- Strengthened status-row discoverability with reciprocal links between the status contract and the page-owned table recipe.
+- Expanded paper guidance to distinguish visible PDF composition from text-extraction order, and documented the no-JavaScript and progressively enhanced form-feedback paths.
+- Clarified that progress bars keep their intrinsic width unless the page sets an explicit width.
+
+### Tests
+
+- Removed prose-bound documentation assertions while retaining behavioral recipe checks, structural outline checks, and the complete phone-record checklist coverage.
+
+## [0.13.0] - 2026-10-30
+
+### Changed (distribution)
+
+- Added committed `mote.min.css` and `mote.components.min.css` to the npm package so jsDelivr serves project-owned bytes instead of generating variants on demand.
+- Added a staged-blob pre-commit minification gate that regenerates and stages the minified artifacts and manifest after enforcing warnings, byte budgets, version stamps, and Baseline 2024 construct counts. The manifest records the exact resolved `clean-css-cli` and `clean-css` versions used by that invocation.
+- Added `scripts/install-hooks` to configure the repository-local `core.hooksPath` and verify the active pre-commit hook after cloning.
+
+### Fixed (documentation — round-16 findings)
+
+- Added a phone-record completion checklist covering selected transforms, data labels, print restoration, scroll-panel caps, narrow overflow, and generated-PDF inspection while preserving retained comparison matrices as a valid representation.
+- Documented native dialog cancellation with required controls: the cancel button uses `formnovalidate`, while the confirm action keeps validation.
+- Added a cross-page recipe index for phone-record tables, status rows, and bottom-aligned card actions.
+
+### Tests
+
+- Added `tests/minified-artifacts.cjs` to verify the committed minified outputs and manifest, including source/output hashes, byte budgets, version stamps, and preserved Baseline 2024 constructs.
+- CI now runs the committed-artifact check plus the documentation outline and recipe checks before the npm staging job.
+- Documentation checks now validate the phone-record checklist structure, the dialog cancellation example, and recipe-index link targets.
+
+### Evaluation
+
+- Sixteenth round: ten independent builders created ten new page types against v0.12.1. All ten would use mote again, and no confirmed library failures were reported. The three documentation fixes in this release address the recurring authoring friction surfaced by the round.
+
 ## [0.12.1] - 2026-10-30
 
 ### Changed (documentation)
@@ -967,7 +1005,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.12.1...HEAD
+[Unreleased]: https://gitlab.com/abmach/mote/compare/v0.13.1...HEAD
+[0.13.1]: https://gitlab.com/abmach/mote/compare/v0.13.0...v0.13.1
+[0.13.0]: https://gitlab.com/abmach/mote/compare/v0.12.1...v0.13.0
 [0.12.1]: https://gitlab.com/abmach/mote/compare/v0.12.0...v0.12.1
 [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

package/README.md

@@ -32,19 +32,20 @@ Source on [GitLab](https://gitlab.com/abmach/mote) · mirrored on [GitHub](https
 
 ## Install
 
-**CDN** — jsDelivr, serving the npm package, with auto-minified variants:
+**CDN** — jsDelivr, serving the npm package, with committed minified variants:
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0/mote.css">
-<!-- minified variant (dotted filenames minify to <name>.min.css) -->
+<!-- committed minified variant -->
 <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/mote.components.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0/mote.components.min.css">
 ```
 
 `@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.
+version (`mote.css@0.13.1`) for reproducible production builds.
 
 **npm**:
 
@@ -52,7 +53,7 @@ version (`mote.css@0.3.0`) for reproducible production builds.
 npm install mote.css
 ```
 
-**Download**: [`mote.css`](mote.css) and [`mote.components.css`](mote.components.css) — link them directly.
+**Download**: [`mote.css`](mote.css), [`mote.min.css`](mote.min.css), [`mote.components.css`](mote.components.css), and [`mote.components.min.css`](mote.components.min.css) — link them directly.
 
 ## Theming
 

package/mote.components.css

@@ -1,6 +1,6 @@
 /*!
  * mote.components.css — opt-in components for mote.css.
- * v0.12.1 · MIT
+ * v0.13.1 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * Requires mote.css loaded first (provides the --mote-* tokens).

package/mote.components.min.css

@@ -0,0 +1,45 @@
+/*!
+ * mote.components.css — opt-in components for mote.css.
+ * v0.13.1 · MIT
+ * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
+ *
+ * Requires mote.css loaded first (provides the --mote-* tokens).
+ * Everything here is CSS-only and rides on native platform features:
+ * popovers, dialogs, exclusive <details> groups. No JavaScript required.
+ *
+ * MIT License.
+ */.mote-card{display:flex;flex-direction:column;padding:1.25rem 1.5rem;border:var(--mote-border-width) solid var(--mote-border);border-color:color-mix(in oklab,var(--mote-status,var(--mote-border)),var(--mote-border) 60%);border-radius:var(--mote-radius-lg);background:color-mix(in oklab,var(--mote-surface) 55%,var(--mote-bg));box-shadow:var(--mote-shadow-sm);text-align:start}:where(.mote-card)>:first-child{margin-block-start:0}:where(.mote-card)>:last-child{margin-block-end:0}.mote-band{padding-block:var(--mote-band-pad,4rem);background:color-mix(in oklab,var(--mote-status,var(--mote-accent)) 12%,var(--mote-bg))}.mote-badge{display:inline-block;padding:.1rem .6rem;border-radius:999px;font-size:min(.8em, .8rem);font-weight:500;line-height:1.4;background:var(--mote-accent-soft);color:var(--mote-accent-deep)}.mote-badge:where(.mote-success,.mote-warning,.mote-error,.mote-info,.mote-muted){background:var(--mote-status-soft);color:var(--mote-status)}a:where(.mote-badge){text-decoration:none}a:where(.mote-badge):hover{filter:brightness(.92)}.mote-avatar{width:var(--mote-avatar,2.5rem);height:var(--mote-avatar,2.5rem);border-radius:var(--mote-avatar-radius,999px);object-fit:cover;border:var(--mote-border-width) solid var(--mote-border);box-shadow:var(--mote-shadow-sm)}.mote-skeleton{display:inline-block;min-height:1em;border-radius:var(--mote-radius-sm);background:linear-gradient(100deg,color-mix(in oklab,var(--mote-fg) 5%,transparent) 40%,color-mix(in oklab,var(--mote-fg) 9%,transparent) 50%,color-mix(in oklab,var(--mote-fg) 5%,transparent) 60%);background-size:200% 100%;animation:1.6s ease-in-out infinite mote-shimmer}@keyframes mote-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}.mote-spinner{display:inline-block;vertical-align:-.25em;width:1.25em;height:1.25em;border:.15em solid color-mix(in oklab,var(--mote-status,var(--mote-accent)),transparent 65%);border-block-start-color:var(--mote-status,var(--mote-accent));border-radius:999px;animation:.7s linear infinite mote-spin}@keyframes mote-spin{to{rotate:1turn}}:where(body > header,.mote-header){position:sticky;top:0;z-index:10;background:color-mix(in oklab,var(--mote-bg) 82%,transparent);backdrop-filter:blur(10px);border-block-end:var(--mote-border-width) solid var(--mote-border);padding-block:0.7rem}@media print{:where(body > header,.mote-header){position:static}}:where(body > header nav,.mote-nav){flex:1 1 0%;position:relative;flex:1 1 0%;min-width:0}:where(body > header nav[data-nav]:not([data-nav=""]),.mote-nav[data-nav]:not([data-nav=""])){background:linear-gradient(var(--mote-border),var(--mote-border)) left bottom/100% 2px no-repeat}:where(body > header nav,.mote-nav)::after,:where(body > header nav,.mote-nav)::before{content:"";position:absolute;bottom:0;width:4rem;height:2px;opacity:0;transition:opacity var(--mote-transition);pointer-events:none}:where(body > header nav,.mote-nav)::before{inset-inline-start:0;background:linear-gradient(to left,transparent,color-mix(in oklab,var(--mote-accent) 55%,var(--mote-bg)) 40%)}:where(body > header nav,.mote-nav)::after{inset-inline-end:0;background:linear-gradient(to right,transparent,color-mix(in oklab,var(--mote-accent) 55%,var(--mote-bg)) 40%)}:where(body > header nav[data-nav~=end],nav.mote-nav[data-nav~=end])::after,:where(body > header nav[data-nav~=start],nav.mote-nav[data-nav~=start])::before{opacity:1}[dir=rtl] :where(body > header nav,.mote-nav)::before{background:linear-gradient(to right,transparent,color-mix(in oklab,var(--mote-accent) 55%,var(--mote-bg)) 40%)}[dir=rtl] :where(body > header nav,.mote-nav)::after{background:linear-gradient(to left,transparent,color-mix(in oklab,var(--mote-accent) 55%,var(--mote-bg)) 40%)}:where(body > header nav,.mote-nav) ul{display:flex;flex-wrap:nowrap;gap:.25rem;padding:0;margin:0;list-style:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}:where(body > header nav,.mote-nav) ul::-webkit-scrollbar{display:none}:where(body > header nav,.mote-nav) a{display:inline-block;padding:.35rem .8rem;border-radius:999px;white-space:nowrap;color:var(--mote-fg);text-decoration:none;transition:background var(--mote-transition),color var(--mote-transition)}:where(body > header nav,.mote-nav) a:hover{background:var(--mote-accent-soft);color:var(--mote-accent-deep)}:where(body > header nav,.mote-nav) a[aria-current=page]{background:var(--mote-accent);color:var(--mote-on-accent)}nav[aria-label=breadcrumb] ol{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0;font-size:.9em;list-style:none;color:var(--mote-muted)}nav[aria-label=breadcrumb] li+li::before{content:"/";margin-inline-end:.5rem;color:var(--mote-border-strong)}nav[aria-label=breadcrumb] [aria-current=page]{color:var(--mote-fg);font-weight:500}nav[aria-label=pagination] ul{display:flex;flex-wrap:wrap;gap:.25rem;padding:0;margin:0;list-style:none}nav[aria-label=pagination] :is(a,[aria-current=page]){display:inline-block;min-width:2.2rem;padding:.35rem .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)}nav[aria-label=toc] ul{padding-inline-start:0.8rem;margin:0;list-style:none;font-size:.9em}nav[aria-label=toc] li{margin-block:0.2rem}nav[aria-label=toc] a{color:var(--mote-muted);text-decoration:none;transition:color var(--mote-transition)}nav[aria-label=toc] a:hover{color:var(--mote-accent-deep)}.mote-card-media{margin:-1.25rem -1.5rem 1rem;overflow:clip;border-radius:calc(var(--mote-radius-lg) - var(--mote-border-width)) calc(var(--mote-radius-lg) - var(--mote-border-width)) 0 0}.mote-card-media img,.mote-card-media video{display:block;width:100%;max-width:none;border-radius:inherit}.mote-card-media>svg{display:block;width:100%;height:auto;max-width:none;border-radius:inherit}.mote-table-scroll{overflow-x:auto;max-height:var(--mote-table-max,60vh);overflow-y:auto}.mote-table-scroll table{margin-block:0;border-collapse:separate;border-spacing:0}.mote-table-scroll thead th{position:sticky;top:0;background:var(--mote-bg)}@media print{.mote-table-scroll{max-height:none;overflow:visible}.mote-table-scroll thead th{position:static}}:where(body > footer,.mote-footer){margin-block-start:3rem;padding-block:1.5rem;border-block-start:var(--mote-border-width) solid var(--mote-border)}:where(body > footer,.mote-footer) nav ul{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;list-style:none;margin:0;padding:0}[popover]{padding:.8rem 1rem;border:var(--mote-border-width) solid var(--mote-border);border-radius:var(--mote-radius);background:var(--mote-bg);color:var(--mote-fg);box-shadow:var(--mote-shadow)}@supports (anchor-name:--mote-a){[popover][style*=position-anchor]{position-area:block-end;justify-self:anchor-center;position-try-fallbacks:flip-block,flip-inline;margin:.45rem}}menu[popover]{min-width:11rem;padding:.35rem}menu[popover] li{margin:0;list-style:none}menu[popover] :is(button,[role=menuitem]){display:block;width:100%;padding:.5rem .75rem;border:none;border-radius:var(--mote-radius-sm);background:0 0;color:var(--mote-fg);font:inherit;text-align:start;cursor:pointer}menu[popover] :is(button,[role=menuitem]):focus-visible,menu[popover] :is(button,[role=menuitem]):hover{background:var(--mote-accent-soft);color:var(--mote-accent-deep)}[popover].mote-tooltip{max-width:18rem;padding:.4rem .7rem;font-size:.85em;border-radius:var(--mote-radius-sm);box-shadow:var(--mote-shadow-sm)}[popover].mote-toast{position:fixed;inset:auto 1.25rem 1.25rem auto;max-width:22rem;font-size:.9em;border-block-start-width:3px;border-block-start-color:var(--mote-status,var(--mote-accent))}[popover],dialog{opacity:0;transform:translateY(8px) scale(.98);
+  transition:
+    opacity 180ms ease,
+    transform 180ms ease,
+    display 180ms allow-discrete,
+    overlay 180ms allow-discrete;
+  }[popover]:popover-open,dialog[open]{opacity:1;transform:none}
+@starting-style {
+  [popover]:popover-open,
+  dialog[open] {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+}
+dialog::backdrop{opacity:1;
+  transition: opacity 180ms allow-discrete;
+  }
+@starting-style {
+  dialog::backdrop {
+    opacity: 0;
+  }
+}
+details[name]{padding:0;border:none;border-block-end:var(--mote-border-width) solid var(--mote-border);border-radius:0;background:0 0}details[name]:last-of-type{border-block-end:none}details[name] summary{padding:.9rem 1.2rem;transition:color var(--mote-transition)}details[name][open] summary{color:var(--mote-accent-deep)}details[name]>:not(summary){margin-block:0;padding:.15rem 1.2rem 0}details[name]>:not(summary):last-child{padding-block-end:0.9rem}@supports selector(details::details-content) and (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}details::details-content>:first-child{margin-block-start:0}details::details-content>:last-child{margin-block-end:0}details::details-content{display:flow-root;block-size:0;overflow:clip;opacity:0;
+    transition:
+      block-size 260ms ease,
+      opacity 260ms ease,
+      content-visibility 260ms allow-discrete;
+    }details[open]::details-content{block-size:auto;opacity:1}
+  @starting-style {
+    details[open]::details-content {
+      block-size: 0;
+      opacity: 0;
+    }
+  }
+  }.mote-doc{display:grid;column-gap:1.5rem;grid-template-rows:auto 1fr auto;grid-template-columns:1fr}:where(body).mote-doc{min-height:100svh;padding-inline:1.5rem}html:where(:has(body > header)){scroll-padding-block-start:5rem;--mote-rail-top:4.75rem}.mote-doc>header{grid-row:1;grid-column:1/-1;min-width:0}.mote-doc>footer{grid-row:3;grid-column:1/-1}.mote-doc>main{grid-row:2;grid-column:1;min-width:0;overflow-x:auto}.mote-doc>nav{grid-row:2;grid-column:1;min-width:0;align-self:start;position:sticky;top:var(--mote-rail-top,1rem);max-height:calc(100svh - var(--mote-rail-top,1rem) - 1rem);overflow:auto}.mote-doc>nav ul{display:flex;flex-direction:column;gap:.15rem;padding:0;margin:0;list-style:none}.mote-doc>nav a{display:block;padding:.35rem .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>aside :is(h2,h3),.mote-doc>nav :is(h2,h3),nav[aria-label=toc] :is(h2,h3){margin:1rem 0 .3rem;padding-inline:0.75rem;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--mote-muted)}.mote-doc:where(:has(> nav)){grid-template-columns:minmax(12rem,16rem) minmax(0,1fr)}.mote-doc:where(:has(> nav))>main{grid-column:2}.mote-doc>aside{grid-row:2;grid-column:2;min-width:0;align-self:start;position:sticky;top:var(--mote-rail-top,1rem);max-height:calc(100svh - var(--mote-rail-top,1rem) - 1rem);overflow:auto}.mote-doc:where(:has(> nav))>aside{grid-column:3}.mote-doc:where(:has(> aside)){grid-template-columns:minmax(0,1fr) minmax(10rem,14rem)}.mote-doc:where(:has(> nav)):where(:has(> aside)){grid-template-columns:minmax(12rem,16rem) minmax(0,1fr) minmax(10rem,14rem)}@media (width < 50rem){.mote-doc{display:flex;flex-direction:column}.mote-doc>main{flex:1 0 auto}.mote-doc>aside,.mote-doc>nav{position:static;max-height:none;overflow:visible}}.mote-grid{display:grid;gap:var(--mote-grid-gap,1.25rem);grid-template-columns:repeat(auto-fill,minmax(min(var(--mote-grid-min,16rem),100%),1fr))}.mote-grid-sparse{display:grid;gap:var(--mote-grid-gap,1.25rem);grid-template-columns:repeat(auto-fit,minmax(min(var(--mote-grid-min,16rem),100%),1fr))}

package/mote.css

@@ -1,6 +1,6 @@
 /*!
  * mote.css — a mote of styling for plain HTML.
- * v0.12.1 · MIT
+ * v0.13.1 · MIT
  * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
  *
  * The smallest thing that can carry style:

package/mote.min.css

@@ -0,0 +1,11 @@
+/*!
+ * mote.css — a mote of styling for plain HTML.
+ * v0.13.1 · MIT
+ * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
+ *
+ * The smallest thing that can carry style:
+ * 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.
+ */:root{color-scheme:light;--mote-bg:#faf9f7;--mote-surface:#f1eee7;--mote-fg:#2b2924;--mote-muted:#716a60;--mote-border:#e6e0d4;--mote-accent:#6f5486;--mote-on-accent:#ffffff;--mote-success:#4e7d51;--mote-warning:#8a6819;--mote-error:#b34d4d;--mote-info:#527097;--mote-font:"Inter","Inter Variable",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--mote-font-mono:"Commit Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;--mote-line-height:1.65;--mote-tracking:-0.011em;--mote-display:clamp(2.75rem, 1.5rem + 4vw, 5rem);--mote-container-max:70rem;--mote-radius:10px;--mote-radius-sm:6px;--mote-radius-lg:16px;--mote-border-width:1px;--mote-shadow:0 1px 2px rgba(43, 41, 36, 0.05),0 4px 16px rgba(43, 41, 36, 0.06);--mote-shadow-sm:0 1px 2px rgba(43, 41, 36, 0.08);--mote-transition:150ms ease;--mote-accent-deep:color-mix(in oklab, var(--mote-accent), black 14%);--mote-accent-soft:color-mix(in oklab, var(--mote-accent) 9%, transparent);--mote-selection:color-mix(in oklab, var(--mote-accent) 18%, transparent);--mote-focus-ring:0 0 0 3px color-mix(in oklab, var(--mote-accent) 32%, transparent);--mote-success-soft:color-mix(in oklab, var(--mote-success) 10%, transparent);--mote-warning-soft:color-mix(in oklab, var(--mote-warning) 12%, transparent);--mote-error-soft:color-mix(in oklab, var(--mote-error) 10%, transparent);--mote-info-soft:color-mix(in oklab, var(--mote-info) 10%, transparent);--mote-border-strong:color-mix(in oklab, var(--mote-border) 55%, var(--mote-fg));--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='%23716a60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--mote-bg:#1c1a17;--mote-surface:#262320;--mote-fg:#eae6de;--mote-muted:#a49c90;--mote-border:#3b362f;--mote-accent:#b8a1ca;--mote-on-accent:#241d28;--mote-success:#8ab88c;--mote-warning:#d4b465;--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")}}:root[data-theme=dark]{color-scheme:dark;--mote-bg:#1c1a17;--mote-surface:#262320;--mote-fg:#eae6de;--mote-muted:#a49c90;--mote-border:#3b362f;--mote-accent:#b8a1ca;--mote-on-accent:#241d28;--mote-success:#8ab88c;--mote-warning:#d4b465;--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")}*,::after,::before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;font-family:var(--mote-font);font-size:1rem;line-height:var(--mote-line-height);color:var(--mote-fg);background:var(--mote-bg);-webkit-font-smoothing:antialiased}::selection{background:var(--mote-selection)}:focus-visible{outline:0;box-shadow:var(--mote-focus-ring);border-radius:var(--mote-radius-sm)}h1,h2,h3,h4,h5,h6{margin:2rem 0 .8rem;line-height:1.25;font-weight:600;text-wrap:balance}h1{margin-block-start:1rem;font-size:clamp(1.85rem, 1.3rem + 2.2vw, 2.6rem);letter-spacing:var(--mote-tracking)}h2{font-size:clamp(1.45rem, 1.15rem + 1.2vw, 1.85rem);letter-spacing:var(--mote-tracking)}h3{font-size:1.3rem}h4{font-size:1.15rem}h5{font-size:1rem}h6{font-size:1rem;color:var(--mote-muted)}blockquote,details,dl,fieldset,figure,ol,p,pre,table,ul{margin-block:1rem}:is(h1,h2,h3,h4,h5,h6)+:is(p,ul,ol,dl,blockquote,figure,table,pre){margin-block-start:0.6rem}small{font-size:.85em}sub,sup{font-size:.7em;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a{color:var(--mote-accent);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--mote-accent),transparent 55%);text-decoration-thickness:1px;text-underline-offset:0.15em;transition:color var(--mote-transition),text-decoration-color var(--mote-transition)}a:hover:where(:not(.mote-btn,.mote-ghost)){color:var(--mote-accent-deep);text-decoration-color:currentColor}b,strong{font-weight:650}abbr[title]{text-decoration:underline dotted var(--mote-muted);text-underline-offset:0.15em;cursor:help}mark{padding:.1em .3em;border-radius:var(--mote-radius-sm);background:var(--mote-warning-soft);color:var(--mote-fg)}del{color:var(--mote-error)}ins{color:var(--mote-success)}q{font-style:italic}cite{font-style:normal;color:var(--mote-muted)}blockquote{padding:.2rem 0 .2rem 1.2rem;border-inline-start:3px solid color-mix(in oklab,var(--mote-status,var(--mote-accent)),transparent 45%);color:var(--mote-muted);font-style:italic}blockquote :where(code,samp,kbd,var){font-style:normal}blockquote>cite{display:block;margin-block-start:0.5rem;font-size:.85em;text-align:end}hr{margin-block:2.5rem;border:none;border-block-start:1px solid var(--mote-border)}ol,ul{padding-inline-start:1.6rem}li{margin-block:0.3rem}li::marker{color:var(--mote-muted)}dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1.5rem}dl>div{display:contents}dt{font-weight:600}dd{margin:0;color:var(--mote-muted)}figure{margin-inline:0}figcaption{margin-block-start:0.5rem;font-size:.85em;color:var(--mote-muted);text-align:center}code,kbd,samp,var{font-family:var(--mote-font-mono);font-size:.875em}code,samp{padding:.15em .4em;border-radius:var(--mote-radius-sm);background:var(--mote-surface);border:var(--mote-border-width) solid var(--mote-border)}kbd{padding:.15em .45em;border-radius:var(--mote-radius-sm);background:var(--mote-surface);border:var(--mote-border-width) solid var(--mote-border-strong);border-block-end-width:2px;font-size:.8em}pre{padding:1rem 1.2rem;overflow-x:auto;font-family:var(--mote-font-mono);font-size:.875rem;border-radius:var(--mote-radius);background:var(--mote-surface);border:var(--mote-border-width) solid var(--mote-border);tab-size:4}pre code,pre samp{padding:0;background:0 0;border:none;font-size:.875rem;line-height:1.6}var{font-style:italic;color:var(--mote-accent-deep)}table{width:100%;border-collapse:collapse;font-size:.95em}caption{margin-block-end:0.6rem;font-size:.85em;color:var(--mote-muted);text-align:start}td,th{font-variant-numeric:tabular-nums;padding:var(--mote-cell-pad,.6rem) var(--mote-cell-pad-inline,.8rem);border-block-end:var(--mote-border-width) solid var(--mote-border);text-align:start;vertical-align:top}thead th{border-block:2px solid var(--mote-border-strong);border-block-end-width:1px;font-weight:600}tfoot td{border-block:2px solid var(--mote-border-strong);border-block-start-width:1px}tbody tr:nth-child(2n){background:color-mix(in oklab,var(--mote-surface) 55%,transparent)}tbody tr[aria-current]{background:var(--mote-accent-soft)}label{display:inline-block;margin-block-end:0.4rem;font-weight:500}:where(label:has(:is([type=checkbox],[type=radio]))){cursor:pointer}fieldset{min-inline-size:0;padding:1rem 1.2rem;border:var(--mote-border-width) solid var(--mote-border);border-radius:var(--mote-radius)}legend{padding-inline:0.4rem;font-weight:600}input,select,textarea{font:inherit;color:inherit;padding:var(--mote-control-pad,.5rem) var(--mote-control-pad-inline,.75rem);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)}input:hover,select:hover,textarea:hover{border-color:var(--mote-border-strong)}input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:color-mix(in oklab,var(--mote-accent),var(--mote-border) 30%);box-shadow:var(--mote-focus-ring)}textarea{min-height:8rem;resize:vertical}select{appearance:none;padding-inline-end:2.4rem;background-image:var(--mote-chevron);background-repeat:no-repeat;background-position:right .8rem center}select[multiple]{appearance:auto;padding:.5rem;background-image:none}[type=checkbox],[type=radio]{width:1em;height:1em;padding:0;accent-color:var(--mote-status,var(--mote-accent));vertical-align:baseline}:is([type=checkbox],[type=radio]):where(input){width:1em}[type=color]{padding:.2rem;height:2.4rem}[type=file]{max-width:100%;padding:var(--mote-control-pad,.5rem) var(--mote-control-pad-inline,.75rem);background:0 0;border-style:dashed}[type=range]{padding:0;border:none;background:0 0;accent-color:var(--mote-status,var(--mote-accent))}::placeholder{color:var(--mote-muted);opacity:.8}:disabled{opacity:.55;cursor:not-allowed}:is(input,select,textarea):is(:user-invalid,[aria-invalid=true]){border-color:var(--mote-error)}[type=button],[type=reset],[type=submit],button{font:inherit;font-weight:500;color:var(--mote-on-accent);padding:var(--mote-control-pad,.5rem) var(--mote-control-pad-inline,1.1rem);background:var(--mote-accent);border:var(--mote-border-width) solid transparent;border-radius:var(--mote-radius-sm);cursor:pointer;transition:background var(--mote-transition),border-color var(--mote-transition),transform var(--mote-transition)}[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{background:color-mix(in oklab,var(--mote-accent),var(--mote-fg) 14%);box-shadow:var(--mote-shadow-sm)}: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%)}.mote-ghost{display:inline-block;font:inherit;font-weight:500;background:0 0;border:var(--mote-border-width) solid color-mix(in oklab,var(--mote-accent),transparent 55%);color:var(--mote-accent-deep);padding:var(--mote-control-pad,.5rem) var(--mote-control-pad-inline,1.1rem);border-radius:var(--mote-radius-sm);text-decoration:none;cursor:pointer}.mote-ghost:hover{background:var(--mote-accent-soft);color:var(--mote-accent-deep);box-shadow:none}.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)}[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{transform:translateY(1px)}canvas,iframe,img,svg,video{max-width:100%;height:auto}img,video{border-radius:var(--mote-radius)}audio{width:100%}iframe{border:var(--mote-border-width) solid var(--mote-border);border-radius:var(--mote-radius)}details{padding:.8rem 1.2rem;border:var(--mote-border-width) solid var(--mote-border);border-radius:var(--mote-radius);background:color-mix(in oklab,var(--mote-surface) 45%,transparent)}details[open]{background:var(--mote-surface)}summary{cursor:pointer;font-weight:500;list-style:revert}summary::marker{color:var(--mote-status,var(--mote-accent))}dialog{padding:1.6rem 2rem;border:var(--mote-border-width) solid var(--mote-border);border-radius:var(--mote-radius-lg);background:var(--mote-bg);color:var(--mote-fg);box-shadow:var(--mote-shadow);max-width:min(90vw,44rem)}dialog::backdrop{background:color-mix(in oklab,var(--mote-fg) 32%,transparent);backdrop-filter:blur(2px)}meter,progress{height:.9rem;accent-color:var(--mote-status,var(--mote-accent))}[role=alert]{color:var(--mote-status,var(--mote-error))}[role=status]{color:var(--mote-status,var(--mote-info))}.mote-container{width:min(100% - 3rem,var(--mote-container-max));margin-inline:auto}.mote-muted{color:var(--mote-muted)}.mote-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.mote-push{margin-inline-start:auto}.mote-hero{min-height:calc(100svh - var(--mote-hero-offset,12rem));display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.mote-stack{display:flex;flex-direction:column;gap:var(--mote-stack-gap,1.25rem)}.mote-stack>*{margin-block:0}.mote-stack :is(input,select,textarea,progress,meter){width:100%}.mote-stack :is([type=checkbox],[type=radio]){width:1em}.mote-stack .mote-sr-only:is(input,select,textarea){width:1px}.mote-btn{display:inline-block;font:inherit;font-weight:500;color:var(--mote-on-accent);padding:var(--mote-control-pad,.5rem) var(--mote-control-pad-inline,1.1rem);background:var(--mote-accent);border:var(--mote-border-width) solid transparent;border-radius:var(--mote-radius-sm);text-decoration:none;cursor:pointer;transition:background var(--mote-transition),border-color var(--mote-transition),transform var(--mote-transition)}.mote-btn:hover{background:color-mix(in oklab,var(--mote-accent),var(--mote-fg) 14%);box-shadow:var(--mote-shadow-sm)}.mote-btn:active{transform:translateY(1px)}.mote-btn: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))}.mote-btn: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%)}.mote-media{display:flex;align-items:flex-start;gap:1rem}.mote-media>:last-child{flex:1;min-width:0}:where(.mote-row)>:is(h1,h2,h3,h4,h5,h6){margin-block:0}.mote-brand{font-weight:700;color:var(--mote-fg);text-decoration:none}.mote-num{text-align:end;font-variant-numeric:tabular-nums}.mote-tabular{font-variant-numeric:tabular-nums}.mote-skip-link,.mote-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.mote-skip-link:focus{position:fixed;top:1rem;left:1rem;width:auto;height:auto;margin:0;padding:.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}.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{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{--mote-status:var(--mote-accent);--mote-status-soft:var(--mote-accent-soft)}.mote-reset{--mote-status:initial;--mote-status-soft:initial;--mote-on-status:initial}.mote-note{margin-block:1rem;padding:.8rem 1.1rem;border-radius:var(--mote-radius-sm);color:var(--mote-status,var(--mote-accent-deep));background:var(--mote-status-soft,var(--mote-accent-soft))}.mote-display{font-size:var(--mote-display);line-height:1.1;letter-spacing:var(--mote-tracking);color:var(--mote-status,inherit);text-wrap:balance}@media (prefers-reduced-motion:reduce){*,::after,::before{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}@media print{:root,:root:not([data-theme=light]),:root[data-theme=dark]{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}a{color:#000}details{border:none}dialog{box-shadow:none}.mote-no-print{display:none!important}.mote-print-only{display:block}}@media not print{.mote-print-only{display:none}}.mote-theme-switch,.mote-theme-switch *{transition:none!important}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mote.css",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "bugs": {
     "url": "https://gitlab.com/abmach/mote/-/issues"
   },
@@ -8,7 +8,9 @@
   "style": "mote.css",
   "files": [
     "mote.css",
+    "mote.min.css",
     "mote.components.css",
+    "mote.components.min.css",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"