@junoput01/junoui 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,199 @@
+# Changelog
+
+## 0.2.0
+
+### Minor Changes
+
+- 7d8a890: Consumer-driven improvements (from the buzz chat-app integration):
+
+  - **Fonts self-hosted, CSP-safe.** `base.css` no longer fetches Google Fonts
+    cross-origin (broke strict CSP, phoned home). B612/B612 Mono ship as woff2 with
+    a local `@font-face` sheet, opt-in via `import 'junoui/fonts.css'` (not bundled
+    into `juno.css`). **Behavior change:** consumers that relied on junoui pulling the
+    font now get a system fallback until they import `junoui/fonts.css` or load B612
+    themselves.
+  - **Neutral ramp extended:** new `--juno-data-dim` (faint metadata — timestamps,
+    tick labels) and `--juno-border-strong` (divider heavier than the hairline
+    border), across all three palettes × both modes and every platform output.
+  - **Integration guide** (`docs/integration.md`): import order for app shells, the
+    token-bridge recipe, fonts opt-in, "accent is semantic (not a brand hue)", and the
+    extension/palette policy.
+
+- d96b163: Field-driven components + patterns (first production consumer, a media-server web
+  client — features landed generic, origin logged in `docs/roadmap.md`):
+
+  - **Dense sizes:** `.juno-btn--sm` (toolbar-scale button; documented WCAG tap-min
+    trade-off) and `.juno-switch--sm` (quiet 40×20 per-row toggle, no printed legend).
+  - **Segmented control:** `.juno-seg` — exclusive-choice pill row on native radios,
+    zero JS; `aria-pressed` button flavor for JS-driven apps; `--sm` size; role-colored
+    checked pill.
+  - **Gauge:** `.juno-gauge` — determinate metric ring (conic-gradient + registered
+    `--juno-gauge-value`, no SVG); `--sm`/`--lg`; thresholds stay app policy (recipe
+    documented).
+  - **Spark:** `.juno-spark` — sparkline size/stroke/role contract; app supplies the
+    polyline (junoui still ships no charting).
+  - **Micro badge:** `.juno-badge--micro` — mono data-UI atom for provenance/kind tags
+    and threshold values.
+  - **Rail:** `.juno-rail` — collapsible app-shell nav; active styled via
+    `aria-current`, logical edges (RTL-safe).
+  - **Content density:** `--juno-tile-min` + `--juno-gap-content` archetype and
+    `.juno-grid-auto--tiles`, so media walls re-densify from `data-juno-density`.
+  - **Icons:** 14 media/system Phosphor glyphs (squares-four, images, hexagon,
+    puzzle-piece, play, film-strip, cloud, cloud-arrow-down, arrows-clockwise, cpu,
+    hard-drives, sliders, arrows-out, upload-simple).
+  - **Docs:** app-shell recipe (`layout.md#app-shell`), drawer slide-over pattern,
+    spark point-generator; new `.juno-sr-only` utility.
+
+- 02a983b: Mobile adaptations — components restructure themselves on narrow viewports and
+  touch devices, no extra classes for most of it:
+
+  - `.juno-dock` — new bottom-navigation component, the phone counterpart of the
+    rail (sticky, safe-area padded, `aria-current` active styling). App-shell
+    swap recipe in `layout.md#app-shell`.
+  - Modal becomes a bottom sheet below `bp.sm`: full-width, top corners rounded,
+    slides up, footer buttons stretch, body pads past the home indicator.
+  - Side drawers cap at `85vw` on phones so a sliver of scrim stays tappable;
+    the bottom drawer pads for the home indicator.
+  - Toast stack goes full-width along the bottom edge on phones; toasts slide up
+    instead of sideways.
+  - Tab strip scrolls sideways instead of overflowing — every tab stays
+    reachable at any width.
+  - `.juno-table--stack` (opt-in) — rows become label/value cards below a 480px
+    container; give each `td` a `data-label`. Semantics stay a real `<table>`.
+  - Touch ergonomics: under `pointer: coarse` the base layer raises
+    `--juno-size-tap-min` to the 44px comfortable target; hover-revealed table
+    row actions stay visible under `hover: none`.
+
+- e7a117f: Mobile navigation kit — the tab + stack pattern, all CSS:
+
+  - `.juno-pillbar` — floating pill bar (the iOS-style alternative to the dock):
+    2–5 icon destinations or actions in a translucent, blurred, fully-rounded
+    capsule hovering above the bottom edge; sticky + safe-area cleared. Active
+    styles off `aria-current` (links) / `aria-pressed` (toggles); optional
+    `__sep` divider between groups.
+  - `.juno-navbar` — stack-navigation top bar: a back control **always on the
+    start edge** (caret flips under RTL), centered truncating title, trailing
+    actions; sticky, safe-area padded on top.
+  - `.juno-list` — grouped rows for vertical data organization (the settings
+    pattern): uppercase group header over an `s1` card of hairline-divided rows;
+    each row = leading icon + label/support + trailing value, control, or
+    drill-in chevron. Interactive rows (`<a>`/`<button>`) get hover; static rows
+    don't.
+  - Tab + stack shell recipe in `layout.md`: dock/pillbar switches sections,
+    navbar backs out of pushed views, list rows do the drilling.
+
+- 6eb33da: System-preference detection, all CSS:
+
+  - **Auto color scheme** — `data-juno-mode` is now optional: without it the
+    theme follows the OS via `prefers-color-scheme` (per palette, live). An
+    explicit mode pins it, exactly as before. The base layer sets
+    `color-scheme` so scrollbars/native form chrome match the effective mode.
+  - A palette attribute without a mode now resolves to that palette's dark
+    theme (previously fell back to standard's colors).
+  - `prefers-contrast: more` → hairline borders step up to `border-strong`.
+  - `prefers-reduced-transparency` → the pillbar drops its blur/translucency
+    for a solid surface.
+
+  Showcase: mode control gains **AUTO** (the new default); the quick flip
+  button resolves the effective OS mode and pins the opposite; the header
+  clock formats in the browser's preferred language.
+
+- 9426e38: `.juno-thumb` — media thumbnail frame with a built-in unavailable placeholder.
+  Muted glyph on `s2` sits under the media; the image covers it while present.
+  Failed media removes itself via the optional stateless
+  `onerror="this.remove()"`; known-missing media ships no element and the
+  placeholder just shows. `--video` flavor (play glyph), `__label` micro-caption.
+  Loading remains `.juno-skeleton`'s job. Pairs with `.juno-grid-auto--tiles`.
+
+  Also: date & time house format documented in `design-guidelines.md`
+  (`dd.mm.yyyy`, 24-hour, `05.07.2026 · 14:32`, en-dash ranges) with an
+  `Intl.DateTimeFormat` recipe — content convention, no code.
+
+- 6cb57ee: WCAG 2.2 contrast audit — dark-mode surface separation + verified AA/AAA claims.
+
+  Full measured audit added (`scripts/audit-contrast.mjs`, run with `node`) covering every
+  text / status / non-text pair across `standard` · `soft` · `colorblind` × dark · light.
+  It surfaced three gaps, now fixed:
+
+  - **Dark `label` failed AA on the `s3` (selected/overlay) surface** (≈ 4.0:1). Lifted
+    dark `label` to `oklch(63% …)` across all three palettes so secondary text now clears
+    **1.4.3** Contrast (Minimum), AA (≥ 4.5:1) on **every** surface `s0`–`s3` (≈ 4.6–5.9:1),
+    data > label > muted hierarchy preserved.
+  - **Dark blocks were imperceptible against the background.** Adjacent surface fills
+    differ by only ~1.05:1, and the old dark `border`/`border-strong` sat at 1.2:1/1.7:1 vs
+    the base surface — cards, panels and dividers had no visible edge. Lifted dark `border`
+    and `border-strong` (standard/colorblind → 30% / 40%, soft → 31% / 41%) to ≈ 1.5:1 /
+    2.2:1: a quiet-but-visible hairline. (Container boundaries are decorative and exempt
+    from **1.4.11**; component-identifying edges already use `--juno-control-edge*`.)
+  - **Colorblind AAA claim was overstated on `s3`** (≈ 6.97:1). Docs corrected: colorblind
+    status roles meet **1.4.6** AAA on `s0`–`s2`, AA on `s3` — matching how the `data` AAA
+    claim is already surface-scoped. Carbon role hues are unchanged (colorblind-safety).
+
+  `docs/accessibility.md` Color section rewritten to state the measured, surface-scoped
+  guarantees and to mark `muted`/`data-dim` as decorative / WCAG-exempt roles.
+
+  **Breaking:** dark `--juno-color-*-label`, `-border`, `-border-strong` values change
+  across `standard`, `soft`, and `colorblind`. Visual only; no API/class changes.
+
+### Patch Changes
+
+- 2c14c29: Menu items may be links: `a.juno-menu__item` no longer shows the browser
+  underline (nav menus render `<a>`s, not only `<button>`s).
+- 8dbb800: Bundle `utilities.css` last in `juno.css`: role helpers (`.juno--nominal` …) set
+  `--juno-role` at the same specificity as component defaults
+  (`.juno-gauge { --juno-role: … }`), so with utilities first every same-element
+  role recolor silently lost the cascade to the component's own default.
+  Utilities-last restores `.juno-badge.juno--warning`, `.juno-gauge.juno--caution`,
+  `.juno-spark.juno--nominal`, etc. (Found by the Nexora integration.)
+
+All notable changes to junoui are documented here. Format follows
+[Keep a Changelog](https://keepachangelog.com/); the package follows
+[semantic versioning](https://semver.org/). Tokens are the public contract: a
+changed token value or removed token is a breaking change.
+
+From 0.1.0 on, entries below the `[Unreleased]` heading are generated by
+[Changesets](https://github.com/changesets/changesets) — add one with
+`npm run changeset` rather than editing this file by hand.
+
+## [Unreleased]
+
+_Nothing yet — managed by Changesets._
+
+## [0.1.0] — 2026-06-30
+
+### Added
+
+- DTCG token source (`tokens/`): color (3 palettes × dark/light), spacing,
+  radius, border, sizing, typography, plus foundation scales — motion,
+  z-index, elevation/shadow, opacity.
+- Style Dictionary build → CSS, SCSS, JS/TS, JSON, Android, iOS, Flutter;
+  dependency-free OKLCH → sRGB hex conversion for native/Flutter.
+- Theming by attribute: `data-juno-palette` × `data-juno-mode`, with
+  `data-juno-density` (comfortable/compact) and `data-juno-text`
+  (type-scale via `--juno-font-scale`).
+- Framework-agnostic CSS layer driven by one `--juno-role` property —
+  **30+ components**: badge, button, card, readout, status dot, loaders;
+  form controls (field, input, select, checkbox, radio, switch, slider);
+  overlays (modal, drawer, tooltip, popover, menu); table/data-grid;
+  alert + toast; tabs + accordion; **icon** (SVG sprite, Phosphor bold, MIT);
+  skeleton, avatar, divider, chip/tag, breadcrumb, pagination, stepper.
+- Loaders — arc, beacon, linear bar; indeterminate (CSS-only) and
+  determinate (`--juno-progress`).
+- Responsive layout layer: breakpoint tokens + intrinsic primitives (`stack`,
+  `cluster`, `grid-auto`, `sidebar`, `switcher`, `reel`, `center`) +
+  container-query reflow.
+- Higher-contrast form controls: shared `--juno-control-edge-strong` on inputs,
+  checkbox/radio, toggle buttons, switch, slider; lifted switch/slider knobs.
+- npm packaging with `exports` for every platform (incl. `junoui/icons`);
+  `prepare` builds `dist/`.
+- Docs: getting-started, web, native, flutter, design-guidelines, accessibility
+  (per-component ARIA contract), generated token reference, per-component specs.
+- Interactive `showcase/` demo (repo-only; excluded from the package).
+- Quality: stylelint + prettier, `node:test` integrity suite, Playwright
+  visual-regression snapshots, Changesets-driven versioning + publish, CI gate.
+
+### Changed
+
+- Raised `label` and `muted` text-role contrast to legible levels across all
+  three palettes (hue/chroma kept, lightness adjusted) — placeholder/helper
+  text now meets contrast on page + panel surfaces.

package/README.md

@@ -0,0 +1,117 @@
+# junoui — a modern, accessible UI foundation
+
+junoui is a design system for building interfaces that are **modern, futuristic and
+visually pleasing** while staying **highly readable and genuinely accessible** — for
+critical systems where legibility is a safety concern, and for everyday apps that
+simply deserve to feel good to use.
+
+Mechanically, it is the single graphics source for your UIs: you build the UI
+skeleton; junoui defines color, spacing, typography, radii and sizing. Tokens are
+authored once and compiled to every platform.
+
+## Goals
+
+- **Look modern.** A futuristic, cohesive aesthetic — dark-first, high-contrast OKLCH
+  color, mono numerics, deliberate density and motion — that reads as considered, not
+  decorated.
+- **Be accessible by reference, not by vibes.** Built to the international web
+  accessibility standards — **WCAG 2.2** (AA throughout, AAA where it counts) and
+  **WAI-ARIA** — and we cite the exact success criteria we meet, per component. See
+  [Accessibility](./docs/accessibility.md).
+- **Stay readable.** High text contrast, fixed-width digits that don't jitter,
+  color-blind-safe palettes, a low-fatigue `soft` palette, and visible focus at all
+  times. Readability is the default, not an option you switch on.
+- **Keep improving.** Usability and accessibility are a moving target; junoui treats
+  them as ongoing work — tightening contrast, coverage and standards references release
+  over release, never regressing them.
+
+**Semantic-first:** color encodes status, never decoration —
+every hue has one role (NOMINAL · ACTIVE · TARGET · CAUTION · WARNING).
+
+## Install
+
+```sh
+npm install @junoput01/junoui
+```
+
+```js
+import '@junoput01/junoui/css'; // styles + 30+ components
+import { TOKENS, getTokens } from '@junoput01/junoui'; // values in JS/TS
+// icons: the SVG sprite resolves at '@junoput01/junoui/icons'
+```
+
+```html
+<html data-juno-palette="standard" data-juno-mode="dark">
+  <span class="juno-badge juno--warning">WARNING</span>
+  <svg class="juno-icon juno--active" aria-hidden="true">
+    <use href="node_modules/junoui/dist/icons/juno-icons.svg#juno-i-bell" />
+  </svg>
+</html>
+```
+
+3 palettes (`standard` · `colorblind` · `soft`) × 2 modes (`dark` · `light`),
+switched by two HTML attributes.
+
+## Platforms
+
+One source → every target. Web keeps authored `oklch()`; native/Flutter get
+build-time sRGB hex (identical rendering).
+
+| Web              | Native                     | Cross-platform                  |
+| ---------------- | -------------------------- | ------------------------------- |
+| CSS, SCSS, JS/TS | Android (xml), iOS (Swift) | Flutter (Dart), JSON (W3C DTCG) |
+
+## Documentation
+
+|                                                                                  |                                                              |
+| -------------------------------------------------------------------------------- | ------------------------------------------------------------ |
+| [Getting started](./docs/getting-started.md)                                     | Install, model, what ships                                   |
+| [Integration](./docs/integration.md)                                             | Consuming in an app: import order, fonts, token bridge       |
+| [Web](./docs/web.md) · [Native](./docs/native.md) · [Flutter](./docs/flutter.md) | Per-platform usage                                           |
+| [Design guidelines](./docs/design-guidelines.md)                                 | Color semantics, a11y — for any tool                         |
+| [Layout](./docs/layout.md)                                                       | Responsive primitives + container queries (how blocks adapt) |
+| [Accessibility](./docs/accessibility.md)                                         | WCAG 2.2 + WAI-ARIA references, focus, motion, targets, RTL  |
+| [Token reference](./docs/tokens-reference.md)                                    | Every token + value + platform name (generated)              |
+| [Components](./docs/components/README.md)                                        | 30+ — forms, overlays, table, alerts, tabs, icons, nav, more |
+| [Contributing](./CONTRIBUTING.md)                                                | Add tokens/components, lint, test, release                   |
+| [Roadmap](./docs/roadmap.md)                                                     | Missing capabilities, prioritised                            |
+
+## Repository
+
+```
+tokens/        DTCG token source — the single source of truth
+src/css/       authored CSS layer (base, utilities, components)
+src/icons/     vendored SVG icon sources (Phosphor bold, MIT) → sprite
+dist/          built outputs (generated; gitignored)
+docs/          guides + generated token reference
+showcase/      interactive demo (repo-only — not in the npm package)
+scripts/       build helpers (css bundle, doc gen, color conversion)
+design/        original Claude Design canvas source (reference)
+```
+
+## Develop
+
+```sh
+npm install          # installs deps and builds dist/ (prepare)
+npm run build        # tokens (Style Dictionary) + CSS bundle + icon sprite
+npm run gen-docs     # regenerate docs/tokens-reference.md
+npm run showcase     # build + serve the showcase at :8137
+npm test             # build + node:test integrity suite
+npm run test:visual  # Playwright screenshot diff (needs `npx playwright install chromium`)
+```
+
+Edit values in `tokens/`, rebuild, and every platform updates together.
+The interactive demo lives at `showcase/` and is excluded from the published package.
+
+## Releasing
+
+Versioning + changelog are automated with [Changesets](https://github.com/changesets/changesets).
+Add a changeset with your change (`npm run changeset`). This repo does not allow
+GitHub Actions to create pull requests, so prepare the "Version Packages" PR manually
+with `npm run version`; once that PR is merged, CI publishes to npm. Bump by the token
+contract: remove/rename a token or class → major, additive → minor, fix → patch. See
+[CONTRIBUTING](./CONTRIBUTING.md#releasing).
+
+## License
+
+MIT

package/dist/android/colors.xml

@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- junoui color tokens. Generated; do not edit. -->
+<resources>
+  <color name="colorblind_dark_nominal">#78A9FF</color>
+  <color name="colorblind_dark_active">#BE95FF</color>
+  <color name="colorblind_dark_target">#FF7EB6</color>
+  <color name="colorblind_dark_caution">#F1C21B</color>
+  <color name="colorblind_dark_warning">#FF832B</color>
+  <color name="colorblind_dark_data">#EAE7E2</color>
+  <color name="colorblind_dark_label">#8C8981</color>
+  <color name="colorblind_dark_muted">#625F59</color>
+  <color name="colorblind_dark_border">#312D27</color>
+  <color name="colorblind_dark_s0">#060402</color>
+  <color name="colorblind_dark_s1">#0D0B06</color>
+  <color name="colorblind_dark_s2">#16130E</color>
+  <color name="colorblind_dark_s3">#221F19</color>
+  <color name="colorblind_dark_data_dim">#45423C</color>
+  <color name="colorblind_dark_border_strong">#4B4740</color>
+  <color name="colorblind_light_nominal">#0043CE</color>
+  <color name="colorblind_light_active">#6929C4</color>
+  <color name="colorblind_light_target">#9F1853</color>
+  <color name="colorblind_light_caution">#7D4F00</color>
+  <color name="colorblind_light_warning">#BA4300</color>
+  <color name="colorblind_light_data">#0B0906</color>
+  <color name="colorblind_light_label">#504D47</color>
+  <color name="colorblind_light_muted">#8B8984</color>
+  <color name="colorblind_light_border">#C7C4BD</color>
+  <color name="colorblind_light_s0">#F8F5EF</color>
+  <color name="colorblind_light_s1">#EBE7E0</color>
+  <color name="colorblind_light_s2">#DEDAD3</color>
+  <color name="colorblind_light_s3">#D1CDC7</color>
+  <color name="colorblind_light_data_dim">#A19E99</color>
+  <color name="colorblind_light_border_strong">#AEAAA4</color>
+  <color name="soft_dark_nominal">#38A065</color>
+  <color name="soft_dark_active">#00A8BE</color>
+  <color name="soft_dark_target">#9C5CAF</color>
+  <color name="soft_dark_caution">#D09945</color>
+  <color name="soft_dark_warning">#D15D4D</color>
+  <color name="soft_dark_data">#E0DED8</color>
+  <color name="soft_dark_label">#8C8982</color>
+  <color name="soft_dark_muted">#615F59</color>
+  <color name="soft_dark_border">#32302B</color>
+  <color name="soft_dark_s0">#070602</color>
+  <color name="soft_dark_s1">#0F0D08</color>
+  <color name="soft_dark_s2">#181610</color>
+  <color name="soft_dark_s3">#24211B</color>
+  <color name="soft_dark_data_dim">#47453F</color>
+  <color name="soft_dark_border_strong">#4D4A44</color>
+  <color name="soft_light_nominal">#00582C</color>
+  <color name="soft_light_active">#006174</color>
+  <color name="soft_light_target">#673477</color>
+  <color name="soft_light_caution">#8A5700</color>
+  <color name="soft_light_warning">#86281D</color>
+  <color name="soft_light_data">#0A0906</color>
+  <color name="soft_light_label">#55524C</color>
+  <color name="soft_light_muted">#8A8782</color>
+  <color name="soft_light_border">#CDCAC3</color>
+  <color name="soft_light_s0">#F4F2EA</color>
+  <color name="soft_light_s1">#E7E4DD</color>
+  <color name="soft_light_s2">#DAD7D0</color>
+  <color name="soft_light_s3">#CDCAC3</color>
+  <color name="soft_light_data_dim">#9D9B96</color>
+  <color name="soft_light_border_strong">#B4B1AA</color>
+  <color name="standard_dark_nominal">#00CB4C</color>
+  <color name="standard_dark_active">#00CDDF</color>
+  <color name="standard_dark_target">#D63DE6</color>
+  <color name="standard_dark_caution">#F4A000</color>
+  <color name="standard_dark_warning">#F13A32</color>
+  <color name="standard_dark_data">#EAE7E2</color>
+  <color name="standard_dark_label">#8C8981</color>
+  <color name="standard_dark_muted">#625F59</color>
+  <color name="standard_dark_border">#312D27</color>
+  <color name="standard_dark_s0">#060402</color>
+  <color name="standard_dark_s1">#0D0B06</color>
+  <color name="standard_dark_s2">#16130E</color>
+  <color name="standard_dark_s3">#221F19</color>
+  <color name="standard_dark_data_dim">#45423C</color>
+  <color name="standard_dark_border_strong">#4B4740</color>
+  <color name="standard_light_nominal">#006400</color>
+  <color name="standard_light_active">#006B98</color>
+  <color name="standard_light_target">#8B0097</color>
+  <color name="standard_light_caution">#9B4C00</color>
+  <color name="standard_light_warning">#A10000</color>
+  <color name="standard_light_data">#0B0906</color>
+  <color name="standard_light_label">#504D47</color>
+  <color name="standard_light_muted">#8B8984</color>
+  <color name="standard_light_border">#C7C4BD</color>
+  <color name="standard_light_s0">#F8F5EF</color>
+  <color name="standard_light_s1">#EBE7E0</color>
+  <color name="standard_light_s2">#DEDAD3</color>
+  <color name="standard_light_s3">#D1CDC7</color>
+  <color name="standard_light_data_dim">#A19E99</color>
+  <color name="standard_light_border_strong">#AEAAA4</color>
+</resources>

package/dist/android/dimens.xml

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- junoui dimension tokens. Generated; do not edit. -->
+<resources>
+  <dimen name="border_width_1">1dp</dimen>
+  <dimen name="border_width_2">2dp</dimen>
+  <dimen name="border_width_3">3dp</dimen>
+  <dimen name="bp_sm">640dp</dimen>
+  <dimen name="bp_md">768dp</dimen>
+  <dimen name="bp_lg">1024dp</dimen>
+  <dimen name="bp_xl">1280dp</dimen>
+  <dimen name="bp_2xl">1536dp</dimen>
+  <dimen name="radius_2">2dp</dimen>
+  <dimen name="radius_3">3dp</dimen>
+  <dimen name="radius_4">4dp</dimen>
+  <dimen name="radius_5">5dp</dimen>
+  <dimen name="radius_8">8dp</dimen>
+  <dimen name="size_tap_min">24dp</dimen>
+  <dimen name="size_tap_comfortable">44dp</dimen>
+  <dimen name="size_dot_sm">8dp</dimen>
+  <dimen name="size_dot_md">10dp</dimen>
+  <dimen name="space_2">2dp</dimen>
+  <dimen name="space_4">4dp</dimen>
+  <dimen name="space_8">8dp</dimen>
+  <dimen name="space_10">10dp</dimen>
+  <dimen name="space_12">12dp</dimen>
+  <dimen name="space_16">16dp</dimen>
+  <dimen name="space_20">20dp</dimen>
+  <dimen name="space_24">24dp</dimen>
+  <dimen name="space_28">28dp</dimen>
+  <dimen name="space_32">32dp</dimen>
+  <dimen name="space_40">40dp</dimen>
+  <dimen name="space_56">56dp</dimen>
+  <dimen name="space_72">72dp</dimen>
+  <dimen name="space_96">96dp</dimen>
+  <dimen name="font_size_10">10sp</dimen>
+  <dimen name="font_size_11">11sp</dimen>
+  <dimen name="font_size_12">12sp</dimen>
+  <dimen name="font_size_13">13sp</dimen>
+  <dimen name="font_size_14">14sp</dimen>
+  <dimen name="font_size_16">16sp</dimen>
+  <dimen name="font_size_18">18sp</dimen>
+  <dimen name="font_size_20">20sp</dimen>
+  <dimen name="font_size_28">28sp</dimen>
+  <dimen name="font_size_32">32sp</dimen>
+  <dimen name="font_size_36">36sp</dimen>
+  <dimen name="font_size_38">38sp</dimen>
+  <dimen name="font_size_48">48sp</dimen>
+  <dimen name="font_size_52">52sp</dimen>
+</resources>

package/dist/css/juno-fonts.css

@@ -0,0 +1,45 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  junoui — fonts (opt-in)
+ *  Self-hosted B612 / B612 Mono (@font-face, local woff2). This file is NOT
+ *  bundled into juno.css — import it separately if you want junoui to supply
+ *  the typeface, or skip it and load B612 yourself (e.g. @fontsource):
+ *
+ *      import 'junoui/css';        // tokens + components (no network fonts)
+ *      import 'junoui/fonts.css';  // ← only if you want junoui's fonts
+ *
+ *  Never fetches cross-origin, so it is safe under a strict CSP. Paths are
+ *  relative to dist/css/, resolving to the woff2 shipped in dist/fonts/.
+ *  B612 is licensed under the SIL OFL 1.1 — see the fonts' LICENSE.
+ * ════════════════════════════════════════════════════════════════════ */
+
+@font-face {
+  font-family: 'B612';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/b612-400.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'B612';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/b612-700.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'B612 Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/b612-mono-400.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'B612 Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/b612-mono-700.woff2') format('woff2');
+}