@junoput01/junoui 0.2.0

package/src/css/components/modal.css

@@ -0,0 +1,161 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Modal / Dialog
+ *  Style a native <dialog>. The app owns open/close (dialog.showModal() /
+ *  .close()) and focus-trapping; junoui ships the look + entry motion.
+ *  Centered, scrim-backed. Reserved for decisions that must block the deck.
+ *  Usage:
+ *    <dialog class="juno-modal">                 (or .juno-modal.juno--warning)
+ *      <div class="juno-modal__stripe"></div>
+ *      <div class="juno-modal__head">
+ *        <span class="juno-modal__tag">CONFIGURATION</span>
+ *        <button class="juno-modal__close" aria-label="Close">✕</button>
+ *      </div>
+ *      <div class="juno-modal__body">
+ *        <h2 class="juno-modal__title">Apply configuration change?</h2>
+ *        <p class="juno-modal__text">…</p>
+ *        <div class="juno-modal__foot">
+ *          <button class="juno-btn juno-btn--ghost">CANCEL</button>
+ *          <button class="juno-btn">APPLY</button>
+ *        </div>
+ *      </div>
+ *    </dialog>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-modal {
+  --juno-role: var(--juno-active);
+
+  inline-size: 440px;
+  max-inline-size: 100%;
+  padding: 0;
+  background: var(--juno-s1);
+  color: var(--juno-data);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-8);
+  overflow: hidden;
+  box-shadow: var(--juno-shadow-3);
+
+  /* enter: scale + rise, decelerating (deliberate — it blocks the deck) */
+  opacity: 0;
+  transform: translateY(var(--juno-space-12)) scale(0.97);
+  transition:
+    opacity var(--juno-motion-duration-deliberate) var(--juno-motion-ease-decel),
+    transform var(--juno-motion-duration-deliberate) var(--juno-motion-ease-decel),
+    overlay var(--juno-motion-duration-deliberate) allow-discrete,
+    display var(--juno-motion-duration-deliberate) allow-discrete;
+}
+
+.juno-modal[open] {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+@starting-style {
+  .juno-modal[open] {
+    opacity: 0;
+    transform: translateY(var(--juno-space-12)) scale(0.97);
+  }
+}
+
+/* scrim — one at a time; dark wash + faint blur */
+.juno-modal::backdrop {
+  background: rgb(0 0 0);
+  opacity: var(--juno-opacity-scrim);
+  backdrop-filter: blur(1.5px);
+}
+
+/* status accent stripe across the top (role-colored) */
+.juno-modal__stripe {
+  block-size: var(--juno-border-width-3);
+  background: var(--juno-role);
+}
+
+.juno-modal__head {
+  display: flex;
+  align-items: center;
+  gap: var(--juno-space-8);
+  padding: var(--juno-space-16) var(--juno-pad-surface-inline) 0;
+}
+
+.juno-modal__tag {
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-10);
+  letter-spacing: var(--juno-font-tracking-wider);
+  text-transform: uppercase;
+  color: var(--juno-role);
+}
+
+.juno-modal__close {
+  margin-inline-start: auto;
+  inline-size: var(--juno-size-tap-min);
+  block-size: var(--juno-size-tap-min);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: var(--juno-border-width-1) solid transparent;
+  border-radius: var(--juno-radius-4);
+  color: var(--juno-label);
+  cursor: pointer;
+}
+
+.juno-modal__close:hover { background: var(--juno-s2); color: var(--juno-data); }
+
+.juno-modal__body { padding: var(--juno-space-12) var(--juno-pad-surface-inline) var(--juno-pad-surface-inline); }
+
+.juno-modal__title {
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-20);
+  font-weight: var(--juno-font-weight-light);
+  line-height: var(--juno-font-lineHeight-snug);
+  color: var(--juno-data);
+  margin-block-end: var(--juno-space-12);
+}
+
+.juno-modal__text {
+  font-size: var(--juno-font-size-13);
+  line-height: var(--juno-font-lineHeight-loose);
+  color: var(--juno-label);
+}
+
+.juno-modal__foot {
+  display: flex;
+  gap: var(--juno-gap-control);
+  justify-content: flex-end;
+  margin-block-start: var(--juno-space-24);
+}
+
+/* ── narrow viewports — the centered dialog becomes a bottom sheet ──────
+   Phones get the native-feeling pattern: full-width, pinned to the bottom
+   edge, top corners rounded, sliding up. Drawers opt out (:not) — they
+   already pin themselves. Scoped to the viewport (not a container): a
+   modal always lives in the top layer, so the screen IS its container. */
+@media (width <= 639.98px) {
+  .juno-modal:not(.juno-drawer) {
+    inline-size: 100%;
+    max-inline-size: 100%;
+    max-block-size: 85dvh;
+    margin-block: auto 0;
+    margin-inline: 0;
+    border: none;
+    border-block-start: var(--juno-border-width-1) solid var(--juno-border);
+    border-start-start-radius: var(--juno-radius-8);
+    border-start-end-radius: var(--juno-radius-8);
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+    transform: translateY(100%);
+  }
+
+  .juno-modal:not(.juno-drawer)[open] { transform: translateY(0); }
+
+  @starting-style {
+    .juno-modal:not(.juno-drawer)[open] { transform: translateY(100%); }
+  }
+
+  /* keep the foot's actions above the home indicator */
+  .juno-modal:not(.juno-drawer) .juno-modal__body {
+    padding-block-end: calc(var(--juno-pad-surface-inline) + env(safe-area-inset-bottom, 0));
+  }
+
+  /* full-width actions read better on a sheet */
+  .juno-modal:not(.juno-drawer) .juno-modal__foot > .juno-btn { flex: 1; }
+}

package/src/css/components/navbar.css

@@ -0,0 +1,103 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Navbar (stack-navigation top bar)
+ *  The header of a pushed view on phones: a back control on the start
+ *  edge — always, so any screen can unwind — a centered truncating
+ *  title, and trailing actions. junoui ships the look; the app owns the
+ *  navigation stack (what "back" does).
+ *
+ *  Sticky top, safe-area padded. Pair with the dock or pillbar for the
+ *  tab + stack recipe: tabs switch sections, the navbar backs out of
+ *  drilled-in views (see docs/layout.md#app-shell).
+ *  Usage:
+ *    <header class="juno-navbar">
+ *      <a class="juno-navbar__back" href="…">
+ *        <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-caret-left" /></svg>
+ *        <span class="juno-navbar__back-label">Library</span>
+ *      </a>
+ *      <h1 class="juno-navbar__title">Album</h1>
+ *      <div class="juno-navbar__actions">
+ *        <button class="juno-btn juno-btn--sm juno-btn--ghost">EDIT</button>
+ *      </div>
+ *    </header>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-navbar {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--juno-z-raised);
+  display: grid;
+
+  /* sides never shrink below their (already-truncated) content, so a long
+     title ellipsizes instead of sliding under the back control; with a short
+     title the equal 1fr sides keep it optically centered */
+  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
+  align-items: center;
+  gap: var(--juno-space-8);
+  padding-inline: var(--juno-space-8);
+  padding-block-start: env(safe-area-inset-top, 0);
+  min-block-size: var(--juno-size-tap-comfortable);
+  background: var(--juno-s1);
+  border-block-end: var(--juno-border-width-1) solid var(--juno-border);
+}
+
+.juno-navbar__back {
+  appearance: none;
+  margin: 0;
+  border: none;
+  background: transparent;
+  justify-self: start;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-space-4);
+  min-block-size: var(--juno-size-tap-comfortable);
+  min-inline-size: var(--juno-size-tap-comfortable);
+  padding-inline: var(--juno-space-4);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-11);
+  font-weight: var(--juno-font-weight-semibold);
+  letter-spacing: var(--juno-font-tracking-label);
+  text-transform: uppercase;
+  text-decoration: none;
+  color: var(--juno-active);
+  cursor: pointer;
+}
+
+/* RTL: the caret glyph must point "back" in either direction */
+[dir='rtl'] .juno-navbar__back .juno-icon { transform: scaleX(-1); }
+
+.juno-navbar__back:hover { color: var(--juno-data); }
+
+.juno-navbar__back-label {
+  max-inline-size: 14ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.juno-navbar__title {
+  grid-column: 2;
+  margin: 0;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-14);
+  font-weight: var(--juno-font-weight-semibold);
+  color: var(--juno-data);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.juno-navbar__actions {
+  grid-column: 3;
+  justify-self: end;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-space-4);
+}
+
+.juno-navbar__back:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: calc(-1 * var(--juno-space-2));
+}

package/src/css/components/pagination.css

@@ -0,0 +1,72 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Pagination  ·  page navigation
+ *  A row of page controls: prev / next plus numbered pages, with the
+ *  current page marked aria-current="page". Built on a real <nav>; the
+ *  app owns which page is active and renders the list. Zero JS.
+ *  Usage:
+ *    <nav class="juno-pagination" aria-label="Pagination">
+ *      <button class="juno-pagination__item" aria-label="Previous" disabled>‹</button>
+ *      <button class="juno-pagination__item" aria-current="page">1</button>
+ *      <button class="juno-pagination__item">2</button>
+ *      <span class="juno-pagination__gap">…</span>
+ *      <button class="juno-pagination__item">9</button>
+ *      <button class="juno-pagination__item" aria-label="Next">›</button>
+ *    </nav>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-pagination {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--juno-space-4);
+}
+
+.juno-pagination__item {
+  display: inline-grid;
+  place-content: center;
+  min-inline-size: var(--juno-size-tap-min, var(--juno-space-32));
+  block-size: var(--juno-space-32);
+  padding-inline: var(--juno-space-8);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge-strong);
+  border-radius: var(--juno-radius-4);
+  background: var(--juno-control-surface);
+  color: var(--juno-data);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-13);
+  cursor: pointer;
+  transition:
+    border-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    background-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-pagination__item:hover:not(:disabled, [aria-current='page']) {
+  border-color: var(--juno-active);
+  color: var(--juno-active);
+}
+
+.juno-pagination__item:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: var(--juno-space-2);
+}
+
+/* current page — filled active accent, not actionable */
+.juno-pagination__item[aria-current='page'] {
+  border-color: var(--juno-active);
+  background: color-mix(in srgb, var(--juno-active) 18%, var(--juno-control-surface));
+  color: var(--juno-active);
+  cursor: default;
+}
+
+.juno-pagination__item:disabled {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* the … gap between page ranges */
+.juno-pagination__gap {
+  display: inline-grid;
+  place-content: center;
+  min-inline-size: var(--juno-space-20);
+  color: var(--juno-muted);
+  font-family: var(--juno-font-family-mono);
+}

package/src/css/components/pillbar.css

@@ -0,0 +1,111 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Pillbar (floating pill toolbar / tab bar)
+ *  A floating rounded bar hovering above the content's bottom edge —
+ *  the iOS-style alternative to the full-width dock. Holds 2–5 icon
+ *  actions or destinations; the active one styles off aria-current
+ *  (nav links) or aria-pressed (toggle buttons), zero JS.
+ *
+ *  Sticky (not fixed): put it last inside the scrolling column and it
+ *  floats over the content while staying in flow. Clears the home
+ *  indicator via safe-area-inset.
+ *  Usage:
+ *    <nav class="juno-pillbar" aria-label="Primary">
+ *      <a class="juno-pillbar__item" href="…" aria-current="page" aria-label="Library">
+ *        <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-squares-four" /></svg>
+ *        <span class="juno-pillbar__label">Library</span>
+ *      </a>
+ *      <span class="juno-pillbar__sep"></span>
+ *      <button class="juno-pillbar__item" aria-label="Sync">
+ *        <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-arrows-clockwise" /></svg>
+ *      </button>
+ *    </nav>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-pillbar {
+  --juno-role: var(--juno-active);
+
+  position: sticky;
+  inset-block-end: calc(var(--juno-space-16) + env(safe-area-inset-bottom, 0px));
+  z-index: var(--juno-z-raised);
+  margin-inline: auto;
+  margin-block-end: var(--juno-space-16);
+  inline-size: fit-content;
+  max-inline-size: calc(100% - 2 * var(--juno-space-16));
+  display: flex;
+  align-items: center;
+  gap: var(--juno-space-2);
+  padding: var(--juno-space-4);
+  background: color-mix(in srgb, var(--juno-s1) 88%, transparent);
+  backdrop-filter: blur(12px);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: 999px;
+  box-shadow: var(--juno-shadow-2);
+}
+
+.juno-pillbar__item {
+  appearance: none;
+  margin: 0;
+  border: none;
+  min-inline-size: var(--juno-size-tap-comfortable);
+  min-block-size: var(--juno-size-tap-comfortable);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--juno-space-4);
+  padding-inline: var(--juno-space-10);
+  background: transparent;
+  border-radius: 999px;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-10);
+  font-weight: var(--juno-font-weight-semibold);
+  letter-spacing: var(--juno-font-tracking-label);
+  text-transform: uppercase;
+  text-decoration: none;
+  color: var(--juno-label);
+  cursor: pointer;
+  transition:
+    color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    background-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-pillbar__label {
+  max-inline-size: 12ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.juno-pillbar__item:hover { color: var(--juno-data); }
+
+/* active = attribute, not class: aria-current (links) / aria-pressed (buttons) */
+.juno-pillbar__item[aria-current],
+.juno-pillbar__item[aria-pressed='true'] {
+  background: var(--juno-s3);
+  color: var(--juno-role);
+}
+
+.juno-pillbar__item:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: calc(-1 * var(--juno-space-2));
+}
+
+.juno-pillbar__item:disabled {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.juno-pillbar__sep {
+  align-self: center;
+  inline-size: var(--juno-border-width-1);
+  block-size: var(--juno-space-20);
+  background: var(--juno-border);
+  flex-shrink: 0;
+}
+
+/* reduced-transparency preference → solid surface, no blur */
+@media (prefers-reduced-transparency: reduce) {
+  .juno-pillbar {
+    background: var(--juno-s1);
+    backdrop-filter: none;
+  }
+}

package/src/css/components/popover.css

@@ -0,0 +1,73 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Popover
+ *  Anchored, click-triggered surface for rich, interactive content (filters,
+ *  quick-edits, detail cards). Unlike a tooltip it holds focusable controls
+ *  and persists until dismissed.
+ *
+ *  Built on the native Popover API: the panel lives in the browser TOP LAYER,
+ *  so it is never clipped by an ancestor's overflow/transform and never fights
+ *  z-index. A `popovertarget` button is its implicit anchor; CSS anchor
+ *  positioning pins it below, inline-end aligned. Open/close, light-dismiss,
+ *  and ESC all come from the platform — zero JS.
+ *  Usage:
+ *    <button popovertarget="pf" aria-expanded="false">RANGE FILTER ▾</button>
+ *    <div class="juno-popover" id="pf" popover role="dialog">
+ *      …controls…
+ *      <span class="juno-popover__arrow"></span>
+ *    </div>
+ *  (Older engines without anchor positioning fall back to the app setting
+ *   inset on the `toggle` event — junoui ships the surface; the app may pin it.)
+ * ════════════════════════════════════════════════════════════════════ */
+
+/* legacy grouping wrapper — kept for layout; positioning no longer needs it */
+.juno-popover-anchor { position: relative; }
+
+.juno-popover {
+  position: fixed;
+  margin: 0;
+  inset: auto;
+  position-area: block-end span-inline-start;
+  position-try-fallbacks: flip-block, flip-inline;
+  margin-block-start: var(--juno-space-12);
+  inline-size: 280px;
+  max-inline-size: calc(100vw - var(--juno-space-24));
+  background: var(--juno-s2);
+  color: var(--juno-data);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-5);
+  box-shadow: var(--juno-shadow-2);
+  padding: var(--juno-pad-surface-block) var(--juno-pad-surface-inline);
+  opacity: 0;
+  transform: translateY(calc(-1 * var(--juno-space-4)));
+  transition:
+    opacity var(--juno-motion-duration-quick) var(--juno-motion-ease-decel),
+    transform var(--juno-motion-duration-quick) var(--juno-motion-ease-decel),
+    overlay var(--juno-motion-duration-quick) allow-discrete,
+    display var(--juno-motion-duration-quick) allow-discrete;
+}
+
+.juno-popover:popover-open {
+  opacity: 1;
+  transform: none;
+}
+
+@starting-style {
+  .juno-popover:popover-open {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--juno-space-4)));
+  }
+}
+
+/* arrow back to the anchor (top-end corner) */
+.juno-popover__arrow {
+  position: absolute;
+  inset-block-start: calc(-1 * var(--juno-space-4) - var(--juno-border-width-1));
+  inset-inline-end: var(--juno-space-24);
+  inline-size: var(--juno-space-8);
+  block-size: var(--juno-space-8);
+  background: var(--juno-s2);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-block-end: none;
+  border-inline-end: none;
+  transform: rotate(45deg);
+}

package/src/css/components/rail.css

@@ -0,0 +1,96 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Rail (app-shell side navigation)
+ *  A collapsible icon-and-label nav column: the left edge of the standard
+ *  junoui app shell (see docs/layout.md#app-shell). Zero JS here — the
+ *  app toggles .juno-rail--collapsed and sets aria-current="page"; the
+ *  active item is styled off the attribute, not a class.
+ *  Usage:
+ *    <nav class="juno-rail" aria-label="Primary">
+ *      <div class="juno-rail__brand">JUNO</div>
+ *      <a class="juno-rail__item" href="…" aria-current="page">
+ *        <svg class="juno-icon"><use href="…#juno-i-squares-four" /></svg>
+ *        <span class="juno-rail__label">Library</span>
+ *      </a>
+ *    </nav>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-rail {
+  --juno-role: var(--juno-active);
+  --juno-rail-width: 180px;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--juno-space-2);
+  inline-size: var(--juno-rail-width);
+  min-block-size: 100%;
+  padding-block: var(--juno-space-8);
+  background: var(--juno-s1);
+  border-inline-end: var(--juno-border-width-1) solid var(--juno-border);
+  transition: inline-size var(--juno-motion-duration-base) var(--juno-motion-ease-standard);
+}
+
+.juno-rail__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--juno-gap-control);
+  padding: var(--juno-space-8) var(--juno-space-16);
+  margin-block-end: var(--juno-space-8);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-13);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-wide);
+  text-transform: uppercase;
+  color: var(--juno-data);
+  white-space: nowrap;
+}
+
+.juno-rail__item {
+  display: flex;
+  align-items: center;
+  gap: var(--juno-gap-control);
+  padding: var(--juno-space-8) var(--juno-space-16);
+  border-inline-start: var(--juno-border-width-2) solid transparent;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-12);
+  font-weight: var(--juno-font-weight-semibold);
+  letter-spacing: var(--juno-font-tracking-label);
+  text-transform: uppercase;
+  text-decoration: none;
+  color: var(--juno-label);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.juno-rail__item:hover {
+  background: var(--juno-s2);
+  color: var(--juno-data);
+}
+
+/* active = attribute, not class: <a aria-current="page"> */
+.juno-rail__item[aria-current] {
+  background: var(--juno-s3);
+  border-inline-start-color: var(--juno-role);
+  color: var(--juno-data);
+}
+
+.juno-rail__item:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: calc(-1 * var(--juno-space-2));
+}
+
+/* Collapsed — icons only; labels leave the accessibility tree too, so
+   give collapsed items a title or aria-label from the app. */
+.juno-rail--collapsed {
+  --juno-rail-width: var(--juno-space-56);
+}
+
+.juno-rail--collapsed .juno-rail__label,
+.juno-rail--collapsed .juno-rail__brand .juno-rail__label {
+  display: none;
+}
+
+.juno-rail--collapsed .juno-rail__item,
+.juno-rail--collapsed .juno-rail__brand {
+  justify-content: center;
+  padding-inline: 0;
+}

package/src/css/components/readout.css

@@ -0,0 +1,45 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Data readout tile
+ *  Usage:
+ *    <div class="juno-readout juno--nominal">
+ *      <span class="juno-readout__label">N1</span>
+ *      <span class="juno-readout__value">89.3</span>
+ *      <span class="juno-readout__unit">%</span>
+ *    </div>
+ *  The value takes --juno-role; default role is the neutral data color.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-readout {
+  --juno-role: var(--juno-data);
+
+  display: flex;
+  flex-direction: column;
+  background: var(--juno-s2);
+  border-radius: var(--juno-radius-5);
+  padding: var(--juno-space-20) var(--juno-space-16);
+}
+
+.juno-readout--alert { border: var(--juno-border-width-1) solid var(--juno-role); }
+
+.juno-readout__label {
+  font-size: var(--juno-font-size-10);
+  letter-spacing: var(--juno-font-tracking-wider);
+  text-transform: uppercase;
+  color: var(--juno-label);
+  margin-bottom: var(--juno-space-8);
+}
+
+.juno-readout__value {
+  font-family: var(--juno-font-family-mono);
+  font-weight: var(--juno-font-weight-bold);
+  font-size: var(--juno-font-size-38);
+  line-height: var(--juno-font-lineHeight-none);
+  color: var(--juno-role);
+  font-variant-numeric: tabular-nums;
+}
+
+.juno-readout__unit {
+  font-size: var(--juno-font-size-11);
+  color: var(--juno-label);
+  margin-top: var(--juno-space-4);
+}