mote.css 0.12.0 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +46 -1
- package/README.md +7 -6
- package/mote.components.css +1 -1
- package/mote.components.min.css +45 -0
- package/mote.css +1 -1
- package/mote.min.css +11 -0
- package/package.json +3 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,49 @@ All notable changes to this project are documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [Unreleased]
|
|
9
|
+
|
|
10
|
+
## [0.13.0] - 2026-10-30
|
|
11
|
+
|
|
12
|
+
### Changed (distribution)
|
|
13
|
+
|
|
14
|
+
- 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.
|
|
15
|
+
- 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.
|
|
16
|
+
- Added `scripts/install-hooks` to configure the repository-local `core.hooksPath` and verify the active pre-commit hook after cloning.
|
|
17
|
+
|
|
18
|
+
### Fixed (documentation — round-16 findings)
|
|
19
|
+
|
|
20
|
+
- 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.
|
|
21
|
+
- Documented native dialog cancellation with required controls: the cancel button uses `formnovalidate`, while the confirm action keeps validation.
|
|
22
|
+
- Added a cross-page recipe index for phone-record tables, status rows, and bottom-aligned card actions.
|
|
23
|
+
|
|
24
|
+
### Tests
|
|
25
|
+
|
|
26
|
+
- 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.
|
|
27
|
+
- CI now runs the committed-artifact check plus the documentation outline and recipe checks before the npm staging job.
|
|
28
|
+
- Documentation checks now validate the phone-record checklist structure, the dialog cancellation example, and recipe-index link targets.
|
|
29
|
+
|
|
30
|
+
### Evaluation
|
|
31
|
+
|
|
32
|
+
- 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.
|
|
33
|
+
|
|
34
|
+
## [0.12.1] - 2026-10-30
|
|
35
|
+
|
|
36
|
+
### Changed (documentation)
|
|
37
|
+
|
|
38
|
+
- Split the monolithic live documentation into seven canonical, task-oriented pages:
|
|
39
|
+
an overview map, getting started, elements and platform behavior, layout and
|
|
40
|
+
components, helpers and print, patterns, and reference.
|
|
41
|
+
- Added shared documentation CSS and JavaScript assets plus a compact,
|
|
42
|
+
link-checked `docs/llms.txt` discovery index for retrieval tools.
|
|
43
|
+
|
|
44
|
+
### Tests
|
|
45
|
+
|
|
46
|
+
- Documentation outline checks now validate every page's local outline,
|
|
47
|
+
cross-page fragments, shared assets, and discovery-index links.
|
|
48
|
+
- Recipe checks now scan the complete documentation set rather than a single
|
|
49
|
+
monolithic page.
|
|
50
|
+
|
|
8
51
|
## [0.12.0] - 2026-10-29
|
|
9
52
|
|
|
10
53
|
### Removed
|
|
@@ -948,7 +991,9 @@ Components:
|
|
|
948
991
|
- Opt-in helpers: `.mote-container`, `.mote-muted`, `.mote-note` surfaces.
|
|
949
992
|
- Element gallery demo page (`demo.html`).
|
|
950
993
|
|
|
951
|
-
[Unreleased]: https://gitlab.com/abmach/mote/compare/v0.
|
|
994
|
+
[Unreleased]: https://gitlab.com/abmach/mote/compare/v0.13.0...HEAD
|
|
995
|
+
[0.13.0]: https://gitlab.com/abmach/mote/compare/v0.12.1...v0.13.0
|
|
996
|
+
[0.12.1]: https://gitlab.com/abmach/mote/compare/v0.12.0...v0.12.1
|
|
952
997
|
[0.12.0]: https://gitlab.com/abmach/mote/compare/v0.11.0...v0.12.0
|
|
953
998
|
[0.11.0]: https://gitlab.com/abmach/mote/compare/v0.10.9...v0.11.0
|
|
954
999
|
[0.10.9]: https://gitlab.com/abmach/mote/compare/v0.10.8...v0.10.9
|
package/README.md
CHANGED
|
@@ -32,19 +32,20 @@ Source on [GitLab](https://gitlab.com/abmach/mote) · mirrored on [GitHub](https
|
|
|
32
32
|
|
|
33
33
|
## Install
|
|
34
34
|
|
|
35
|
-
**CDN** — jsDelivr, serving the npm package, with
|
|
35
|
+
**CDN** — jsDelivr, serving the npm package, with committed minified variants:
|
|
36
36
|
|
|
37
37
|
```html
|
|
38
38
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0/mote.css">
|
|
39
|
-
<!-- minified variant
|
|
39
|
+
<!-- committed minified variant -->
|
|
40
40
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0/mote.min.css">
|
|
41
41
|
|
|
42
42
|
<!-- optional components file -->
|
|
43
43
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0/mote.components.css">
|
|
44
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0/mote.components.min.css">
|
|
44
45
|
```
|
|
45
46
|
|
|
46
47
|
`@0` tracks the latest 0.x release, so these snippets never go stale. Pin an exact
|
|
47
|
-
version (`mote.css@0.
|
|
48
|
+
version (`mote.css@0.13.0`) for reproducible production builds.
|
|
48
49
|
|
|
49
50
|
**npm**:
|
|
50
51
|
|
|
@@ -52,7 +53,7 @@ version (`mote.css@0.3.0`) for reproducible production builds.
|
|
|
52
53
|
npm install mote.css
|
|
53
54
|
```
|
|
54
55
|
|
|
55
|
-
**Download**: [`mote.css`](mote.css) and [`mote.components.css`](mote.components.css) — link them directly.
|
|
56
|
+
**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.
|
|
56
57
|
|
|
57
58
|
## Theming
|
|
58
59
|
|
|
@@ -193,7 +194,7 @@ mote is class-optional by design — elements are styled from tags alone; these
|
|
|
193
194
|
| Exclusive accordions | `<details name="group">` — the browser closes siblings |
|
|
194
195
|
| Dialog & popover entrance animations | automatic when the file is loaded |
|
|
195
196
|
|
|
196
|
-
Full live documentation
|
|
197
|
+
Full live documentation starts at **[docs/index.html](docs/index.html)** — a task-oriented map covering setup, semantic elements, layout and components, helpers and print, patterns, and reference.
|
|
197
198
|
|
|
198
199
|
## Page-owned recipes
|
|
199
200
|
|
|
@@ -225,7 +226,7 @@ animations become instant, on older engines.
|
|
|
225
226
|
|
|
226
227
|
Open [`tests/fixture.html`](tests/fixture.html) in any browser for the regression checks — the title shows PASS or FAIL.
|
|
227
228
|
|
|
228
|
-
Open [`docs/index.html`](docs/index.html) for the
|
|
229
|
+
Open [`docs/index.html`](docs/index.html) for the documentation map; the layout and components page includes the complete visual gallery.
|
|
229
230
|
|
|
230
231
|
## License
|
|
231
232
|
|
package/mote.components.css
CHANGED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* mote.components.css — opt-in components for mote.css.
|
|
3
|
+
* v0.13.0 · MIT
|
|
4
|
+
* https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
|
|
5
|
+
*
|
|
6
|
+
* Requires mote.css loaded first (provides the --mote-* tokens).
|
|
7
|
+
* Everything here is CSS-only and rides on native platform features:
|
|
8
|
+
* popovers, dialogs, exclusive <details> groups. No JavaScript required.
|
|
9
|
+
*
|
|
10
|
+
* MIT License.
|
|
11
|
+
*/.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);
|
|
12
|
+
transition:
|
|
13
|
+
opacity 180ms ease,
|
|
14
|
+
transform 180ms ease,
|
|
15
|
+
display 180ms allow-discrete,
|
|
16
|
+
overlay 180ms allow-discrete;
|
|
17
|
+
}[popover]:popover-open,dialog[open]{opacity:1;transform:none}
|
|
18
|
+
@starting-style {
|
|
19
|
+
[popover]:popover-open,
|
|
20
|
+
dialog[open] {
|
|
21
|
+
opacity: 0;
|
|
22
|
+
transform: translateY(8px) scale(0.98);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
dialog::backdrop{opacity:1;
|
|
26
|
+
transition: opacity 180ms allow-discrete;
|
|
27
|
+
}
|
|
28
|
+
@starting-style {
|
|
29
|
+
dialog::backdrop {
|
|
30
|
+
opacity: 0;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
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;
|
|
34
|
+
transition:
|
|
35
|
+
block-size 260ms ease,
|
|
36
|
+
opacity 260ms ease,
|
|
37
|
+
content-visibility 260ms allow-discrete;
|
|
38
|
+
}details[open]::details-content{block-size:auto;opacity:1}
|
|
39
|
+
@starting-style {
|
|
40
|
+
details[open]::details-content {
|
|
41
|
+
block-size: 0;
|
|
42
|
+
opacity: 0;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}.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
CHANGED
package/mote.min.css
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* mote.css — a mote of styling for plain HTML.
|
|
3
|
+
* v0.13.0 · MIT
|
|
4
|
+
* https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
|
|
5
|
+
*
|
|
6
|
+
* The smallest thing that can carry style:
|
|
7
|
+
* framework-agnostic, semantic, class-optional, zero dependencies.
|
|
8
|
+
*
|
|
9
|
+
* MIT License. Fonts (Inter, Commit Mono) are NOT bundled.
|
|
10
|
+
* See the README for one-line self-hosting instructions.
|
|
11
|
+
*/: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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mote.css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.13.0",
|
|
4
4
|
"bugs": {
|
|
5
5
|
"url": "https://gitlab.com/abmach/mote/-/issues"
|
|
6
6
|
},
|
|
@@ -8,7 +8,9 @@
|
|
|
8
8
|
"style": "mote.css",
|
|
9
9
|
"files": [
|
|
10
10
|
"mote.css",
|
|
11
|
+
"mote.min.css",
|
|
11
12
|
"mote.components.css",
|
|
13
|
+
"mote.components.min.css",
|
|
12
14
|
"README.md",
|
|
13
15
|
"LICENSE",
|
|
14
16
|
"CHANGELOG.md"
|