mote.css 0.0.0-stage → 0.2.1

package/CHANGELOG.md

@@ -0,0 +1,95 @@
+# Changelog
+
+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.2.1] - 2026-10-16
+
+### Fixed
+
+- README: correct minified CDN URL — jsDelivr publishes the minified variant
+  of a dotted filename as `mote.min.css`, not `mote.css.min.css` (verified live).
+
+### Changed
+
+- Release CI moved to GitLab CI (`.gitlab-ci.yml`): tag-triggered `npm stage
+  publish` with OIDC trusted publishing — no tokens anywhere; a maintainer
+  still approves every release with 2FA. The GitHub mirror is distribution-only.
+- Publishes now carry npm provenance attestations (the source repository is
+  public).
+- Package metadata points to the canonical GitLab source; GitHub remains the
+  distribution mirror.
+
+## [0.2.0] - 2026-10-15
+
+### Added
+
+- Documentation completeness pass: every documented item now has a working
+  live example and its code sample; all status variations are shown —
+  notes and toasts in all four statuses, spinner status variants,
+  status-tinted blockquote rule and summary marker, plus a live
+  token-cascade demo (a card re-themed by two inline variables).
+- `mote.components.css`: opt-in, CSS-only components — cards, badges, avatars,
+  skeleton, spinner, sticky header, nav pills, breadcrumbs (semantic selector),
+  popover tooltips/menus/toasts, exclusive `<details name>` accordions, and
+  popover/dialog entrance animations via `@starting-style` + `allow-discrete`.
+- Status classes (`mote-success`, `mote-warning`, `mote-error`, `mote-info`,
+  `mote-muted`) as pure `--mote-status` / `--mote-status-soft` token assignments,
+  consumed by notes, badges and toasts with accent fallback — one override re-skins
+  every status surface; inline `--mote-status` works too.
+- Live documentation page at `docs/index.html`.
+- Anchored popover placement via CSS anchor positioning (Chrome 125+,
+  Safari 26+): inline `anchor-name` + `position-anchor` places a popover
+  below its trigger with viewport flip; centered fallback elsewhere.
+- Accordion open/close animation in Chromium via `details::details-content`
+  + `interpolate-size` (gated on support; instant toggle elsewhere).
+- Status-token consumption extended to blockquote rules, `progress`/`meter`,
+  spinners and `summary` markers.
+
+### Fixed
+
+- Accordion end-of-transition snap: content margins do not interpolate, so
+  the animated `details::details-content` height target differed from the
+  settled layout by exactly the content's bottom margin (16px jump on open).
+  The animated box is now kept flush (child margins zeroed inside the
+  `@supports` gate, spacing provided by padding, `display: flow-root`
+  containment), verified frame-by-frame.
+- Popovers no longer snap to the viewport's top-left corner: mote no longer
+  overrides the native `margin: auto` centering.
+- Spinner no longer rides high next to text: baseline-lowered alignment.
+
+### Changed
+
+- `.mote-note-*` and `.mote-badge-*` compound status classes replaced by the
+  shared status classes (`.mote-note mote-success` instead of
+  `.mote-note mote-note-success`).
+
+## [0.1.0] - 2026-10-15
+
+### Added
+
+- Initial release: a tiny, semantic, classless CSS layer for plain HTML.
+- Variable-driven token system (`--mote-*`) — palette, typography, shape, depth,
+  motion; derived tones computed via `color-mix()`.
+- Automatic dark mode via `prefers-color-scheme` with manual `data-theme`
+  overrides on `<html>`.
+- Warm-paper / warm-charcoal palettes with muted plum accent and moss, honey,
+  brick, dusty-blue semantic colors — all WCAG AA or better.
+- Element styles: headings and inline text, links, lists, definition lists,
+  blockquotes, `hr`, `figure`/`figcaption`, `code`/`pre`/`kbd`/`samp`/`var`,
+  tables (with caption, footer, zebra), all form controls and states, buttons,
+  `details`/`summary`, `dialog`, `progress`/`meter`, media elements.
+- Focus-visible rings, `:user-invalid` feedback, reduced-motion support,
+  minimal print styles.
+- Opt-in helpers: `.mote-container`, `.mote-muted`, `.mote-note` surfaces.
+- Element gallery demo page (`demo.html`).
+
+[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
+
+---
+
+Copyright (c) 2026 Arthur Biazon Machado. All rights reserved.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Arthur Biazon Machado
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,171 @@
-# Temporary Holding Version
+# mote.css
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> The smallest thing that can carry style — a tiny, semantic, classless CSS layer for plain HTML.
+
+A mote of styling for plain HTML: **zero dependencies, zero build step, zero classes required**. Write semantic HTML, drop in one file, and it looks like a place you'd want to stay a while — modern, warm, unobtrusive. Inspired by the quiet excellence of [oat](https://github.com/knadh/oat), with its own cozy voice.
+
+Source on [GitLab](https://gitlab.com/abmach/mote) · mirrored on [GitHub](https://github.com/abmach/mote).
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="mote.css">
+  </head>
+  <body>
+    <main>
+      <h1>Hello, cozy.</h1>
+      <p>That's the whole setup.</p>
+    </main>
+  </body>
+</html>
+```
+
+## Principles
+
+- **Semantic HTML is the API.** mote styles elements by what they *are* — headings, forms, `dialog`, `menu` — not by the classes they wear. Classes exist only where the platform has no semantic carrier (a "card" is not a semantic concept).
+- **The platform before the library.** Interactive components ride on native features: `popover`, `dialog`, `<details name>`, `:user-invalid`. Where the browser can do it, mote never ships JavaScript to do it worse.
+- **Tokens all the way down.** Every color, radius, shadow, font and status is a `--mote-*` custom property, and derived tones are computed with `color-mix()`. Status classes set tokens and nothing else — one override re-skins every note, badge and toast. Re-theme by overriding variables, never by fighting selectors.
+- **Weightless by default.** `mote.css` styles your elements; `mote.components.css` is opt-in and CSS-only. You ship zero bytes of library JavaScript, ever.
+- **Framework-agnostic.** It's just CSS — plain HTML, Svelte, Vue, React, HTMX, PHP, your CMS, anything.
+- **Cozy, and unobtrusive about it.** Warm neutrals, soft edges, generous rhythm — styling that never shouts. Automatic light/dark, AA+ contrast, visible focus, reduced-motion respected.
+
+## Install
+
+**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">
+<!-- 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">
+
+<!-- optional components file -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0.2.0/mote.components.css">
+```
+
+Use `mote.css@0` to track the latest 0.x release. CDN URLs go live once the package is published.
+
+**npm**:
+
+```sh
+npm install mote.css
+```
+
+**Download**: [`mote.css`](mote.css) and [`mote.components.css`](mote.components.css) — link them directly.
+
+## Theming
+
+Everything is a variable. Override the ones you care about:
+
+```css
+:root {
+  --mote-accent: #4a7a5b;   /* your brand color */
+  --mote-bg: #fffdf5;       /* your paper */
+  --mote-radius: 6px;       /* your edges */
+}
+```
+
+### The token cascade
+
+Values flow in layers, each computed from the last — retune a base token and everything downstream re-derives automatically:
+
+1. **Base palette** — the raw tokens: `--mote-bg`, `--mote-fg`, `--mote-accent`, the four semantics, fonts, radii, shadows. Light values live in `:root`; dark values swap in via `prefers-color-scheme` or `data-theme`.
+2. **Derived tones** — computed from the base with `color-mix()`: `--mote-accent-deep` (hover deepening), `--mote-accent-soft`, the four `--mote-*-soft` tints, `--mote-focus-ring`, `--mote-border-strong`. They can never go stale — change `--mote-accent` and every tint, ring and hover shade follows.
+3. **Status indirection** — status classes assign `--mote-status` / `--mote-status-soft` and nothing else. Components read them with accent fallbacks: `color: var(--mote-status, var(--mote-accent-deep))`.
+
+The consequence: theming is a handful of variable overrides, and an inline tweak (`style="--mote-status: …"`) slots into the same chain at any level.
+
+### Token reference
+
+| Token | Light | Dark | Used for |
+|---|---|---|---|
+| `--mote-bg` | `#faf9f7` | `#1c1a17` | Page background |
+| `--mote-surface` | `#f1eee7` | `#262320` | Code blocks, cards, inputs |
+| `--mote-fg` | `#2b2924` | `#eae6de` | Body text |
+| `--mote-muted` | `#716a60` | `#a49c90` | Secondary text, captions |
+| `--mote-border` | `#e6e0d4` | `#3b362f` | Rules, borders |
+| `--mote-accent` | `#6f5486` | `#b8a1ca` | Links, buttons, focus, markers |
+| `--mote-on-accent` | `#ffffff` | `#241d28` | Text on accent (buttons) |
+| `--mote-success` | `#4e7d51` | `#8ab88c` | Positive semantics |
+| `--mote-warning` | `#8a6819` | `#d4b465` | Cautious semantics |
+| `--mote-error` | `#b34d4d` | `#d98a8a` | Destructive semantics |
+| `--mote-info` | `#527097` | `#96b1d1` | Neutral semantics |
+| `--mote-font` | `"Inter", system-ui, …` | | Content typeface stack |
+| `--mote-font-mono` | `"Commit Mono", ui-monospace, …` | | Code typeface stack |
+| `--mote-radius` | `10px` | | Default corner softness |
+| `--mote-radius-sm` | `6px` | | Controls, inline code |
+| `--mote-radius-lg` | `16px` | | Dialogs |
+| `--mote-shadow` / `--mote-shadow-sm` | warm diffuse | | Elevation |
+| `--mote-transition` | `150ms ease` | | Hover/focus timing |
+
+Derived tones (soft tints, focus ring, hover deepening) are computed from these via `color-mix()`, so changing a base token re-themes everything consistently — no redundant palette bookkeeping.
+
+### Dark mode
+
+By default, mote follows the user's system preference. To force a theme, set an attribute on `<html>`:
+
+```html
+<html data-theme="dark">  <!-- or "light" -->
+```
+
+The accent hue is deliberately plum: it's the one family that doesn't collide with the success/warning/error/info semantics, so a link never looks like a status.
+
+### Fonts (optional, not bundled)
+
+mote's stacks fall back to your system fonts out of the box. For the full experience, add Inter and Commit Mono (both free; Inter is OFL, Commit Mono is OFL):
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5/index.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/commit-mono@5/index.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/commit-mono@5/700.css">
+```
+
+Or self-host with `npm install @fontsource-variable/inter @fontsource/commit-mono` — or any fonts you like; the stacks are just variables.
+
+## Opt-in helpers
+
+mote is classless by design; these are the only escape hatches, plus status classes that every status-consuming component reads:
+
+| Class | Purpose |
+|---|---|
+| `.mote-container` | Centered page wrapper: `width: min(100% - 3rem, 70rem)` |
+| `.mote-muted` | Dimmed secondary text (also a neutral status) |
+| `.mote-note` + status class | Tinted message surfaces |
+| `.mote-success` · `.mote-warning` · `.mote-error` · `.mote-info` | Pure status tokens: they only set `--mote-status` / `--mote-status-soft`, so one override re-skins every note, badge and toast |
+
+## Components
+
+`mote.components.css` is the optional second file: opt-in components, **CSS-only**, riding on native platform features — popovers, dialogs, exclusive `<details>` groups. No JavaScript anywhere.
+
+| Component | Hook |
+|---|---|
+| Cards | `.mote-card` |
+| Badges | `.mote-badge` + optional status class |
+| Avatars | `.mote-avatar` |
+| Skeleton / spinner | `.mote-skeleton`, `.mote-spinner` |
+| Sticky site header / nav pills | `.mote-header`, `.mote-nav` |
+| Breadcrumbs | `nav[aria-label="breadcrumb"]` — semantic, no class |
+| Tooltips | `[popover].mote-tooltip` + `popovertarget` button |
+| Menus | `menu[popover]` + `popovertarget` button |
+| Toasts | `[popover].mote-toast` + status class |
+| 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)**.
+
+## Browser support
+
+Modern evergreen browsers (uses `color-mix()`, `:focus-visible`, `accent-color`, `:user-invalid`):
+Chrome/Edge 111+, Firefox 113+, Safari 16.2+. `color-mix()`-dependent niceties degrade gracefully on older browsers.
+
+The components file additionally uses Baseline 2024 platform features — `popover`, `<details name>`,
+`@starting-style`, `allow-discrete` — each degrading gracefully: accordions stay independent,
+animations become instant, on older engines.
+
+## Demo
+
+Open [`docs/index.html`](docs/index.html) for the full live documentation, or [`demo.html`](demo.html) for a quick gallery of every styled element.
+
+## License
+
+[MIT](LICENSE). Fonts referenced by the stacks (Inter, Commit Mono) are SIL OFL 1.1 — see their respective projects.

package/mote.components.css

@@ -0,0 +1,372 @@
+/*!
+ * mote.components.css — opt-in components for mote.css.
+ * v0.2.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.
+ */
+
+/* ---------------------------------------------------------------------------
+ * 1. Cards
+ * ------------------------------------------------------------------------- */
+
+.mote-card {
+  padding: 1.25rem 1.5rem;
+  border: var(--mote-border-width) solid var(--mote-border);
+  border-radius: var(--mote-radius-lg);
+  background: color-mix(in oklab, var(--mote-surface) 55%, var(--mote-bg));
+  box-shadow: var(--mote-shadow-sm);
+}
+
+.mote-card > :first-child {
+  margin-block-start: 0;
+}
+
+.mote-card > :last-child {
+  margin-block-end: 0;
+}
+
+/* ---------------------------------------------------------------------------
+ * 2. Badges — .mote-badge + a status class from mote.css (optional)
+ *
+ *    <span class="mote-badge">accent</span>
+ *    <span class="mote-badge mote-success">success</span>
+ * ------------------------------------------------------------------------- */
+
+.mote-badge {
+  display: inline-block;
+  padding: 0.1rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.8em;
+  font-weight: 500;
+  line-height: 1.8;
+  background: var(--mote-status-soft, var(--mote-accent-soft));
+  color: var(--mote-status, var(--mote-accent-deep));
+  user-select: none;
+}
+
+/* ---------------------------------------------------------------------------
+ * 3. Avatars
+ * ------------------------------------------------------------------------- */
+
+.mote-avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 999px;
+  object-fit: cover;
+  border: var(--mote-border-width) solid var(--mote-border);
+  box-shadow: var(--mote-shadow-sm);
+}
+
+/* ---------------------------------------------------------------------------
+ * 4. Skeleton loading placeholder
+ * ------------------------------------------------------------------------- */
+
+.mote-skeleton {
+  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: mote-shimmer 1.6s ease-in-out infinite;
+}
+
+@keyframes mote-shimmer {
+  from { background-position: 200% 0; }
+  to   { background-position: -200% 0; }
+}
+
+/* ---------------------------------------------------------------------------
+ * 5. Spinner
+ * ------------------------------------------------------------------------- */
+
+.mote-spinner {
+  display: inline-block;
+  vertical-align: -0.25em;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px 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: mote-spin 0.7s linear infinite;
+}
+
+@keyframes mote-spin {
+  to { rotate: 1turn; }
+}
+
+/* ---------------------------------------------------------------------------
+ * 6. Site header and nav
+ * ------------------------------------------------------------------------- */
+
+.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);
+}
+
+.mote-nav ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.mote-nav a {
+  display: inline-block;
+  padding: 0.35rem 0.8rem;
+  border-radius: 999px;
+  color: var(--mote-fg);
+  text-decoration: none;
+  transition: background var(--mote-transition), color var(--mote-transition);
+}
+
+.mote-nav a:hover {
+  background: var(--mote-accent-soft);
+  color: var(--mote-accent-deep);
+}
+
+.mote-nav a[aria-current="page"] {
+  background: var(--mote-accent);
+  color: var(--mote-on-accent);
+}
+
+/* ---------------------------------------------------------------------------
+ * 7. Breadcrumbs — semantic selector, no class needed
+ * ------------------------------------------------------------------------- */
+
+nav[aria-label="breadcrumb"] ol {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0;
+  margin: 0;
+  font-size: 0.9em;
+  list-style: none;
+  color: var(--mote-muted);
+}
+
+nav[aria-label="breadcrumb"] li + li::before {
+  content: "/";
+  margin-inline-end: 0.5rem;
+  color: var(--mote-border-strong);
+}
+
+nav[aria-label="breadcrumb"] [aria-current="page"] {
+  color: var(--mote-fg);
+  font-weight: 500;
+}
+
+/* ---------------------------------------------------------------------------
+ * 8. Popover surfaces — tooltips, menus, toasts
+ *
+ * Any element with the `popover` attribute gets the mote surface.
+ * Toggle it with a `popovertarget` button — zero JavaScript.
+ * ------------------------------------------------------------------------- */
+
+[popover] {
+  padding: 0.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);
+}
+
+/* Anchored popovers (Chrome 125+, Safari 26+): by default the browser
+   centers popovers in the viewport. To place one next to its trigger,
+   give the trigger an anchor name and the popover a matching
+   position-anchor (unique names per pair) — mote positions it below
+   the trigger and flips it when it would overflow the viewport.
+
+     <button popovertarget="menu" style="anchor-name: --menu-a">Options</button>
+     <menu popover id="menu" style="position-anchor: --menu-a">…</menu>
+
+   Engines without support keep the centered fallback. */
+@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: 0.45rem;
+  }
+}
+
+/* Menus: <menu popover> + buttons — semantic, no classes */
+menu[popover] {
+  min-width: 11rem;
+  padding: 0.35rem;
+}
+
+menu[popover] li {
+  margin: 0;
+  list-style: none;
+}
+
+menu[popover] :is(button, [role="menuitem"]) {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: none;
+  border-radius: var(--mote-radius-sm);
+  background: none;
+  color: var(--mote-fg);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+menu[popover] :is(button, [role="menuitem"]):hover,
+menu[popover] :is(button, [role="menuitem"]):focus-visible {
+  background: var(--mote-accent-soft);
+  color: var(--mote-accent-deep);
+}
+
+/* Tooltips: add .mote-tooltip to the popover element */
+[popover].mote-tooltip {
+  max-width: 18rem;
+  padding: 0.4rem 0.7rem;
+  font-size: 0.85em;
+  border-radius: var(--mote-radius-sm);
+  box-shadow: var(--mote-shadow-sm);
+}
+
+/* Toasts: popover + .mote-toast + optional status class, shown with el.showPopover() */
+[popover].mote-toast {
+  position: fixed;
+  inset: auto 1.25rem 1.25rem auto;
+  max-width: 22rem;
+  font-size: 0.9em;
+  border-block-start-width: 3px;
+  border-block-start-color: var(--mote-status, var(--mote-accent));
+}
+
+/* ---------------------------------------------------------------------------
+ * 9. Open/close animations for popovers and dialogs
+ * (transition-behavior + @starting-style — Baseline 2024, degrades to
+ * instant open/close on older browsers)
+ * ------------------------------------------------------------------------- */
+
+[popover],
+dialog[open] {
+  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;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * 10. Exclusive accordions — <details name="group">
+ * Siblings sharing a name auto-close each other; one open at a time.
+ * ------------------------------------------------------------------------- */
+
+details[name] {
+  padding: 0;
+  border: none;
+  border-block-end: var(--mote-border-width) solid var(--mote-border);
+  border-radius: 0;
+  background: none;
+}
+
+details[name]:last-of-type {
+  border-block-end: none;
+}
+
+details[name] summary {
+  padding: 0.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: 0.15rem 1.2rem 0.9rem;
+}
+
+/* ---------------------------------------------------------------------------
+ * 11. Accordion open/close animation
+ *
+ * Chromium's ::details-content pseudo-element + interpolate-size allow
+ * height to animate to `auto`. Gated on support — other engines keep
+ * the instant toggle.
+ * ------------------------------------------------------------------------- */
+
+@supports selector(details::details-content) and (interpolate-size: allow-keywords) {
+  :root {
+    interpolate-size: allow-keywords;
+  }
+
+  /* Margins do not interpolate: a first/last child margin makes the
+     animated block-size target differ from the settled layout, which
+     snaps at the transition's end. Keep the animated box flush;
+     spacing comes from padding (which lives inside it) instead. */
+  details::details-content > :first-child { margin-block-start: 0; }
+  details::details-content > :last-child { margin-block-end: 0; }
+
+  details::details-content {
+    /* flow-root contains arbitrary content margins (overflow: clip
+       does not create a BFC), keeping the animated box flush. */
+    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;
+    }
+  }
+}

package/mote.css

@@ -0,0 +1,627 @@
+/*!
+ * mote.css — a mote of styling for plain HTML.
+ * v0.2.1 · MIT
+ * https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
+ *
+ * The smallest thing that can carry style:
+ * framework-agnostic, semantic, classless, zero dependencies.
+ *
+ * MIT License. Fonts (Inter, Commit Mono) are NOT bundled.
+ * See the README for one-line self-hosting instructions.
+ */
+
+/* ---------------------------------------------------------------------------
+ * 1. Design tokens
+ *
+ * Every color, radius, shadow and font in mote flows from these variables.
+ * Override any of them to theme your site — no selectors, no rebuild, no Sass.
+ *
+ * Theme switching:
+ *   • Automatic: honors `prefers-color-scheme` when no data-theme is set.
+ *   • Manual:    set `data-theme="light"` or `data-theme="dark"` on <html>.
+ * ------------------------------------------------------------------------- */
+
+:root {
+  color-scheme: light;
+
+  /* Palette — warm paper + muted plum */
+  --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;
+
+  /* Typography */
+  --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;
+
+  /* Shape & depth */
+  --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;
+
+  /* Derived values — computed, never hand-tuned twice */
+  --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;
+
+    /* Palette — warm charcoal + light plum */
+    --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-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-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");
+}
+
+/* ---------------------------------------------------------------------------
+ * 2. Base
+ * ------------------------------------------------------------------------- */
+
+*,
+*::before,
+*::after {
+  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: none;
+  box-shadow: var(--mote-focus-ring);
+  border-radius: var(--mote-radius-sm);
+}
+
+/* ---------------------------------------------------------------------------
+ * 3. Typography
+ * ------------------------------------------------------------------------- */
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 2rem 0 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);
+}
+
+p, ul, ol, dl, blockquote, figure, table, pre, fieldset, details {
+  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: 0.85em; }
+
+sub, sup {
+  font-size: 0.7em;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+/* ---------------------------------------------------------------------------
+ * 4. Inline elements
+ * ------------------------------------------------------------------------- */
+
+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 {
+  color: var(--mote-accent-deep);
+  text-decoration-color: currentColor;
+}
+
+strong, b { font-weight: 650; }
+
+abbr[title] {
+  text-decoration: underline dotted var(--mote-muted);
+  text-underline-offset: 0.15em;
+  cursor: help;
+}
+
+mark {
+  padding: 0.1em 0.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); }
+
+/* ---------------------------------------------------------------------------
+ * 5. Block content
+ * ------------------------------------------------------------------------- */
+
+blockquote {
+  padding: 0.2rem 0 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 > cite {
+  display: block;
+  margin-block-start: 0.5rem;
+  font-size: 0.85em;
+  text-align: end;
+}
+
+hr {
+  margin-block: 2.5rem;
+  border: none;
+  border-block-start: 1px solid var(--mote-border);
+}
+
+ul, ol {
+  padding-inline-start: 1.6rem;
+}
+
+li { margin-block: 0.3rem; }
+
+li::marker {
+  color: var(--mote-muted);
+}
+
+dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.4rem 1.5rem;
+}
+
+dt { font-weight: 600; }
+
+dd {
+  margin: 0;
+  color: var(--mote-muted);
+}
+
+figure {
+  margin-inline: 0;
+}
+
+figcaption {
+  margin-block-start: 0.5rem;
+  font-size: 0.85em;
+  color: var(--mote-muted);
+  text-align: center;
+}
+
+/* ---------------------------------------------------------------------------
+ * 6. Code & keyboard
+ * ------------------------------------------------------------------------- */
+
+code, kbd, samp, var {
+  font-family: var(--mote-font-mono);
+  font-size: 0.875em;
+}
+
+code, samp {
+  padding: 0.15em 0.4em;
+  border-radius: var(--mote-radius-sm);
+  background: var(--mote-surface);
+  border: var(--mote-border-width) solid var(--mote-border);
+}
+
+kbd {
+  padding: 0.15em 0.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: 0.8em;
+}
+
+pre {
+  padding: 1rem 1.2rem;
+  overflow-x: auto;
+  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: none;
+  border: none;
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+var {
+  font-style: italic;
+  color: var(--mote-accent-deep);
+}
+
+/* ---------------------------------------------------------------------------
+ * 7. Tables
+ * ------------------------------------------------------------------------- */
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.95em;
+}
+
+caption {
+  margin-block-end: 0.6rem;
+  font-size: 0.85em;
+  color: var(--mote-muted);
+  text-align: start;
+}
+
+th, td {
+  padding: 0.6rem 0.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(even) {
+  background: color-mix(in oklab, var(--mote-surface) 55%, transparent);
+}
+
+/* ---------------------------------------------------------------------------
+ * 8. Forms & buttons
+ * ------------------------------------------------------------------------- */
+
+label {
+  display: inline-block;
+  margin-block-end: 0.4rem;
+  font-weight: 500;
+}
+
+fieldset {
+  padding: 1rem 1.2rem;
+  border: var(--mote-border-width) solid var(--mote-border);
+  border-radius: var(--mote-radius);
+}
+
+legend { padding-inline: 0.4rem; }
+
+input, select, textarea {
+  font: inherit;
+  color: inherit;
+  padding: 0.5rem 0.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), box-shadow 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 0.8rem center;
+}
+
+[type="checkbox"], [type="radio"] {
+  width: 1em;
+  height: 1em;
+  padding: 0;
+  accent-color: var(--mote-accent);
+  vertical-align: baseline;
+}
+
+[type="color"] {
+  padding: 0.2rem;
+  height: 2.4rem;
+}
+
+[type="file"] {
+  padding: 0.4rem;
+  background: none;
+  border-style: dashed;
+}
+
+::placeholder {
+  color: var(--mote-muted);
+  opacity: 0.8;
+}
+
+:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+:user-invalid {
+  border-color: var(--mote-error);
+}
+
+button, [type="button"], [type="submit"], [type="reset"] {
+  font: inherit;
+  font-weight: 500;
+  color: var(--mote-on-accent);
+  padding: 0.5rem 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),
+    box-shadow var(--mote-transition), transform var(--mote-transition);
+}
+
+button:hover, [type="button"]:hover, [type="submit"]:hover, [type="reset"]:hover {
+  background: var(--mote-accent-deep);
+  box-shadow: var(--mote-shadow-sm);
+}
+
+button:active, [type="button"]:active, [type="submit"]:active, [type="reset"]:active {
+  transform: translateY(1px);
+}
+
+/* ---------------------------------------------------------------------------
+ * 9. Media
+ * ------------------------------------------------------------------------- */
+
+img, video, canvas, svg, iframe {
+  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);
+}
+
+/* ---------------------------------------------------------------------------
+ * 10. Interactive elements
+ * ------------------------------------------------------------------------- */
+
+details {
+  padding: 0.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);
+}
+
+dialog::backdrop {
+  background: color-mix(in oklab, var(--mote-fg) 32%, transparent);
+  backdrop-filter: blur(2px);
+}
+
+progress, meter {
+  height: 0.9rem;
+  accent-color: var(--mote-status, var(--mote-accent));
+}
+
+/* Semantic feedback helpers (pure HTML, works with <p>, <div>, anything) */
+[role="alert"] { color: var(--mote-error); }
+[role="status"] { color: var(--mote-info); }
+
+/* ---------------------------------------------------------------------------
+ * 11. Opt-in helpers
+ *
+ * mote is classless by design; these are the only three escape hatches.
+ * ------------------------------------------------------------------------- */
+
+/* Centered page wrapper: <main class="mote-container"> */
+.mote-container {
+  width: min(100% - 3rem, 70rem);
+  margin-inline: auto;
+}
+
+/* Dimmed text: <small class="mote-muted"> */
+.mote-muted { color: var(--mote-muted); }
+
+/* ---------------------------------------------------------------------------
+ * 11. Status classes
+ *
+ * Statuses are pure token assignments — they set variables, never visual
+ * properties. Base classes (notes, badges, toasts) consume the tokens and
+ * fall back to the accent color when no status class is present.
+ *
+ *   <div class="mote-note mote-success">…</div>
+ *   <span class="mote-badge mote-error">404</span>
+ *
+ * Restyle a status once and every component follows; or set the variables
+ * inline: style="--mote-status: rebeccapurple".
+ * ------------------------------------------------------------------------- */
+
+.mote-success { --mote-status: var(--mote-success); --mote-status-soft: var(--mote-success-soft); }
+.mote-warning { --mote-status: var(--mote-warning); --mote-status-soft: var(--mote-warning-soft); }
+.mote-error   { --mote-status: var(--mote-error);   --mote-status-soft: var(--mote-error-soft); }
+.mote-info    { --mote-status: var(--mote-info);    --mote-status-soft: var(--mote-info-soft); }
+
+/* .mote-muted does double duty: dimmed text where nothing consumes the
+   tokens, and a neutral status where something does. */
+.mote-muted {
+  color: var(--mote-muted);
+  --mote-status: var(--mote-muted);
+  --mote-status-soft: color-mix(in oklab, var(--mote-fg) 7%, transparent);
+}
+
+/* Themed message surfaces — base shape only; status via the token classes */
+.mote-note {
+  padding: 0.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));
+}
+
+/* ---------------------------------------------------------------------------
+ * 12. Motion preferences & print
+ * ------------------------------------------------------------------------- */
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+@media print {
+  body {
+    background: #fff;
+    color: #000;
+  }
+  a { color: #000; }
+  details { border: none; }
+  dialog { box-shadow: none; }
+}

package/package.json

@@ -1,6 +1,30 @@
 {
   "name": "mote.css",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.1",
+  "description": "A mote of styling for plain HTML — tiny, semantic, classless CSS with zero dependencies and no build step.",
+  "style": "mote.css",
+  "files": [
+    "mote.css",
+    "mote.components.css",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "keywords": [
+    "css",
+    "classless",
+    "semantic",
+    "framework-agnostic",
+    "dark-mode",
+    "custom-properties",
+    "design-system",
+    "cozy"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/abmach/mote.git"
+  },
+  "author": "Arthur Biazon Machado",
+  "license": "MIT",
+  "homepage": "https://gitlab.com/abmach/mote#readme"
+}