@junoput01/junoui 0.2.0 → 0.4.0

package/dist/css/juno.css

@@ -364,7 +364,37 @@
 /* System color scheme. Without data-juno-mode the theme follows the OS
    (`prefers-color-scheme`; see juno-tokens.css) — `dark light` here lets the
    UA pick matching scrollbars/form chrome. An explicit mode pins both. */
-:root { color-scheme: dark light; }
+:root {
+  color-scheme: dark light;
+
+  /* Floating-nav scroll clearance — a page/scroller that a fixed dock or
+     pillbar floats over reserves this much room at its foot so the last row
+     clears the overlay. Consumers write `padding-block-end:
+     var(--juno-dock-clearance)` and stay correct when the dock geometry
+     changes — no hand-rolled calc() per app. Web-only (they carry env()), so
+     they live in the CSS layer, not the cross-platform token set.
+     --juno-dock-clearance ≈ pill height + bottom margin + breathing room;
+     --juno-pillbar-clearance suits the shorter centered pill. */
+  --juno-dock-clearance: calc(var(--juno-space-72) + var(--juno-space-20) + env(safe-area-inset-bottom, 0px));
+  --juno-pillbar-clearance: calc(var(--juno-space-72) + env(safe-area-inset-bottom, 0px));
+
+  /* JS-readable motion contract. CSS-only `prefers-reduced-motion` never reaches
+     imperative JS (scrollTo/scrollIntoView smooth behavior, rAF-driven transforms,
+     an "animate or not" branch) — so the preference is also exposed as a custom
+     property script can read with one getComputedStyle call, no matchMedia
+     listener required for a one-shot check:
+       getComputedStyle(document.documentElement)
+         .getPropertyValue('--juno-motion').trim() !== 'none'
+     A component MAY author its durations through the scale rather than a raw
+     duration token — `calc(var(--juno-motion-duration-base) * var(--juno-motion-scale))`
+     — so the reduced-motion override below collapses them to 0 without its own
+     per-component media query. Web-only DOM contract, so it lives
+     here rather than in the cross-platform token set (see --juno-dock-clearance
+     above for the same reasoning). */
+  --juno-motion: auto;
+  --juno-motion-scale: 1;
+}
+
 :root[data-juno-mode='dark'] { color-scheme: dark; }
 
 /* Control surfaces. On dark panels the hairline border (~23% L) disappears, so
@@ -440,11 +470,103 @@ code, kbd, samp, pre { font-family: var(--juno-font-family-mono); }
    the contract; a phone just reads the bigger one. */
 @media (pointer: coarse) {
   :root { --juno-size-tap-min: var(--juno-size-tap-comfortable); }
+
+  /* iOS Safari is widely observed to zoom the page onto a focused text field
+     whose font-size is under 16px. NOTE: no primary WebKit/Apple source states
+     this — it is empirical behavior, not published spec, so don't cite it as
+     one (see docs/ios-conformance.md and ticket 20260803-032). The mitigation
+     is harmless either way: hold text-entry controls (.juno-input covers input,
+     textarea and the select's inner control) at a 16px floor on touch. max()
+     keeps the floor even under a scaled-down --juno-font-scale, and still grows
+     when scaled up. */
+  .juno-input { font-size: max(16px, var(--juno-font-size-16)); }
+
+  /* Kill the UA tap-highlight square on the interactive surfaces so it never
+     flashes past a rounded control on tap. Consumers were adding this by hand
+     per component; make it a first-class touch default. See 20260802-020. */
+  :where(
+    .juno-btn,
+    .juno-dock__item,
+    .juno-pillbar__item,
+    .juno-tabs__tab,
+    .juno-list__item,
+    .juno-menu__item
+  ) {
+    -webkit-tap-highlight-color: transparent;
+  }
 }
 
+/* Tappable primitives opt out of double-tap-to-zoom. A browser that still
+   recognises that gesture has to WAIT after the first tap to see whether a
+   second one is coming, which reads as a late, mushy tap on exactly the
+   surfaces a phone UI is built from. `manipulation` keeps panning and
+   pinch-zoom (so the page stays zoomable — never `none` here, that would be an
+   a11y regression) and drops only the double-tap.
+   NOT inside the pointer:coarse block above: a hybrid device (touch laptop,
+   iPad with a trackpad) reports a fine primary pointer while still taking
+   touch input, and the property is inert on a mouse anyway.
+   Community convention — no primary Apple/WebKit source names it; see
+   docs/ios-conformance.md. Named components only, so a consumer's own elements
+   are untouched. See 20260803-038. */
+:where(
+  .juno-btn,
+  .juno-dock__item,
+  .juno-pillbar__item,
+  .juno-pillbar__overflow,
+  .juno-tabs__tab,
+  .juno-list__item,
+  .juno-menu__item,
+  .juno-seg__option,
+  .juno-chip,
+  .juno-toggle-btn
+) {
+  touch-action: manipulation;
+}
+
+/* Gesture-owned surfaces — for an element whose pointer events are fully
+   driven by app JS (drag-pan, pinch-zoom, swipe classification: a state
+   machine, not a native scroller). The UA must get out of the way: no
+   scroll/zoom gesture recognition, no callout menu on long-press, no text
+   selection, no tap-highlight flash. Community convention — no primary
+   Apple/WebKit source names any of these four properties for iOS, see
+   docs/ios-conformance.md; do not attribute them to Apple. Opt-in utility
+   class (unlike the pointer:coarse reset above, which targets junoui's own
+   named components), so it isn't gated behind a pointer-type query — apply
+   it only to elements a gesture handler actually owns.
+   --juno-touch-action narrows the axis without overriding the rest of the
+   block; default `none` hands every axis to JS. */
+.juno-gesture-surface {
+  touch-action: var(--juno-touch-action, none);
+  -webkit-touch-callout: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Single-axis escape hatches: the UA keeps native scrolling on one axis
+   while JS reads gestures on the other (e.g. a vertical list row that also
+   supports horizontal swipe-to-reveal). Equivalent to
+   `--juno-touch-action: pan-x|pan-y` on .juno-gesture-surface, offered as
+   standalone classes for elements that only need the axis lock and none of
+   the callout/selection/tap-highlight resets. */
+.juno-pan-x { touch-action: pan-x; }
+.juno-pan-y { touch-action: pan-y; }
+
 @keyframes juno-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
 
+/* Softer opacity pulse — a "working / refreshing" cadence that dims rather
+   than fully blinks out (used by the reload indicator and any live dot that
+   wants a gentler beat than juno-blink). */
+@keyframes juno-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
+
 @media (prefers-reduced-motion: reduce) {
+  /* Flip the JS-readable contract declared at the top of this file. Without
+     this the property would always report `auto` and script could never see
+     the preference — the whole point of exposing it. */
+  :root {
+    --juno-motion: none;
+    --juno-motion-scale: 0;
+  }
+
   *, *::before, *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
@@ -470,6 +592,54 @@ code, kbd, samp, pre { font-family: var(--juno-font-family-mono); }
   .juno-badge { forced-color-adjust: none; } /* keep status fill meaningful */
 }
 
+/* ── iOS standalone letterbox unlock ─────────────────────────────────────────
+   iOS WebKit (observed through 26.6, iPhone 16 Pro, iOS 18.7) sizes a
+   Home-Screen standalone window whose DOCUMENT cannot scroll as if a
+   retractable browser toolbar existed: `screen.height − status bar`, pinned to
+   the top. The reserved strip — exactly env(safe-area-inset-top) — surfaces at
+   the BOTTOM of the glass, outside the window, painting black on every screen.
+   The same install with a scrollable document gets the whole screen.
+
+   Established by measurement, not inference (nexora 20260812-006): 201 device
+   readings; a four-structure A/B on one install where doc-scroll = full screen
+   and fixed-shell = letterboxed on every cold launch; and this exact mechanism
+   — the shell kept, the document left scrollable behind it by an invisible
+   in-flow spacer — verified full-screen on the device before landing here.
+   Transient scrollability is NOT enough (seven timed interventions, five
+   controlled runs, all negative): iOS samples the resting structure.
+
+   So: keep the document scrollable behind the app. The spacer is body::after
+   (a consumer that needs body::after for itself overrides this at the same
+   gate — none of ours do), invisible, 1px wide, and taller than the LARGE
+   viewport so the document always overflows whatever window iOS grants.
+   `overscroll-behavior: none` keeps the ghost scroller from rubber-banding;
+   apps put `overscroll-behavior: contain` on their real scrollers so an
+   inner fling never chains into it.
+
+   Gate, all three required:
+     display-mode: standalone       only installed apps are letterboxed
+     pointer: coarse                touch devices — keeps macOS Dock apps out
+     -webkit-touch-callout support  iOS/iPadOS WebKit only
+   Selectors carry `html:root` (0,1,2) on purpose: app resets commonly declare
+   `body { overflow: hidden }` at (0,0,1) AFTER this sheet, and the unlock must
+   win the cascade without !important. */
+@media (display-mode: standalone) and (pointer: coarse) {
+  @supports (-webkit-touch-callout: none) {
+    html:root,
+    html:root body { overflow: visible; }
+    html:root body { overscroll-behavior: none; }
+
+    html:root body::after {
+      content: '';
+      display: block;
+      width: 1px;
+      height: calc(100lvh + 80px);
+      visibility: hidden;
+      pointer-events: none;
+    }
+  }
+}
+
 /* ════════════════════════════════════════════════════════════════════
  *  junoui — layout layer (intrinsic & responsive)
  *
@@ -554,21 +724,111 @@ code, kbd, samp, pre { font-family: var(--juno-font-family-mono); }
   flex-basis: calc((var(--juno-switcher-threshold, var(--juno-bp-sm)) - 100%) * 999);
 }
 
-/* Reel — horizontal scroll row (overflowing chips, timelines). */
+/* Scroller — bare scroll-container primitive underneath every scrolling
+   region in the library (.juno-reel, .juno-app-shell__main, tab strips…).
+   Three knobs, each a custom prop with the sane-default fallback: overflow
+   axis, overscroll containment, and snap type — so a consumer opts into
+   containment/snap without re-deriving them, and opts OUT (snap: none is
+   the default here) without fighting a hardcoded value. `--x`/`--y` pick a
+   single scroll axis; `--bare` hides the scrollbar cross-browser; a
+   `.juno-snap` child opts into the snap stop once the container snaps.
+     <div class="juno-scroller juno-scroller--y">…</div>
+     <div class="juno-scroller juno-scroller--x juno-scroller--bare"
+          style="--juno-scroller-snap:x proximity">
+       <div class="juno-snap">…</div>
+     </div> */
+.juno-scroller {
+  overflow: var(--juno-scroller-overflow, auto);
+  overscroll-behavior: var(--juno-scroller-overscroll, contain);
+  scroll-snap-type: var(--juno-scroller-snap, none);
+}
+.juno-scroller--x { overflow: auto hidden; }
+.juno-scroller--y { overflow: hidden auto; }
+.juno-scroller--bare { scrollbar-width: none; }
+.juno-scroller--bare::-webkit-scrollbar { display: none; }
+.juno-scroller > .juno-snap { scroll-snap-align: var(--juno-snap-align, start); }
+
+/* Reel — horizontal scroll row (overflowing chips, timelines). A
+   .juno-scroller preset: single inline axis, mandatory snap by default —
+   override the mode per instance with --juno-scroller-snap (e.g. `inline
+   proximity` for a softer magnet, or `none` to opt out and keep only the
+   containment + layout). Default output is unchanged from before. */
 .juno-reel {
   display: flex;
   gap: var(--juno-reel-space, var(--juno-space-12));
   overflow-x: auto;
   overscroll-behavior-inline: contain;
-  scroll-snap-type: inline mandatory;
+  scroll-snap-type: var(--juno-scroller-snap, inline mandatory);
 }
 .juno-reel > * { scroll-snap-align: start; flex: 0 0 auto; }
 
+/* App shell — the standard product frame, as classes instead of the
+   copy-pasted \3c style> block every consumer used to hand-roll. A rail beside
+   a body column; the body holds an optional topbar, a scrolling main region,
+   and a dock/pillbar pinned at its foot. The MAIN region is the scroller
+   (not the page), so the dock never needs sticky/fixed to stay put and the
+   mobile address bar can't clip it. Height is 100dvh (dynamic viewport) so
+   it fills the visible area under shrinking browser chrome. Pairs with the
+   viewport helpers below to swap rail↔dock across md; see docs/layout.md#app-shell.
+     <div class="juno-app-shell">
+       <nav class="juno-rail juno-rail--responsive" aria-label="Primary">…</nav>
+       <div class="juno-app-shell__body">
+         <header class="juno-app-shell__topbar">…</header>
+         <main class="juno-app-shell__main">…</main>
+         <nav class="juno-dock juno-hide-from-md" aria-label="Primary">…</nav>
+       </div>
+     </div> */
+.juno-app-shell {
+  display: flex;
+  block-size: 100dvh;
+  overflow: hidden; /* the main region scrolls, not the shell */
+  padding-inline: env(safe-area-inset-left, 0) env(safe-area-inset-right, 0);
+}
+
+.juno-app-shell__body {
+  flex: 1;
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  min-block-size: 0; /* let __main shrink and scroll instead of the shell */
+}
+
+.juno-app-shell__topbar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--juno-space-12);
+  min-block-size: var(--juno-app-shell-topbar-size, 46px);
+  padding-inline: var(--juno-pad-surface-inline);
+  padding-block-start: env(safe-area-inset-top, 0);
+  background: var(--juno-s1);
+  border-block-end: var(--juno-border-width-1) solid var(--juno-border);
+}
+
+.juno-app-shell__main {
+  flex: 1;
+  min-block-size: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: var(--juno-pad-surface-block) var(--juno-pad-surface-inline);
+}
+
 /* Hide/show by viewport breakpoint — the rare case an intrinsic primitive
-   can't express (e.g. swap a nav for a menu button). */
-@media (width <= 767.98px) { .juno-hide-below-md { display: none !important; } }
+   can't express (e.g. swap a nav for a menu button). `hide-below-X` hides
+   under breakpoint X; `hide-from-X` hides at X and up. `show-*` are the
+   readable inverse aliases (show-from-X ≡ hide-below-X, show-below-X ≡
+   hide-from-X) — same media rule, name whichever reads clearer at the site. */
+@media (width <= 639.98px) { .juno-hide-below-sm, .juno-show-from-sm  { display: none !important; } }
+
+@media (width >= 640px)    { .juno-hide-from-sm,  .juno-show-below-sm { display: none !important; } }
+
+@media (width <= 767.98px) { .juno-hide-below-md, .juno-show-from-md  { display: none !important; } }
+
+@media (width >= 768px)    { .juno-hide-from-md,  .juno-show-below-md { display: none !important; } }
+
+@media (width <= 1023.98px) { .juno-hide-below-lg, .juno-show-from-lg  { display: none !important; } }
 
-@media (width >= 768px)    { .juno-hide-from-md  { display: none !important; } }
+@media (width >= 1024px)    { .juno-hide-from-lg,  .juno-show-below-lg { display: none !important; } }
 
 /* ════════════════════════════════════════════════════════════════════
  *  junoui — density layer
@@ -611,6 +871,28 @@ code, kbd, samp, pre { font-family: var(--juno-font-family-mono); }
   --juno-gap-content: var(--juno-space-4);
 }
 
+/* auto — OPT-IN. `comfortable`/`compact` never change meaning; a consumer
+ * must explicitly write `data-juno-density="auto"` to get this behavior.
+ * Baseline (any pointer, any viewport ≥ 640px) is comfortable — no rule
+ * needed here, it inherits the :root defaults above by not matching
+ * `[data-juno-density='compact']`. Only a small-viewport COARSE pointer
+ * (phone, not a touch laptop) re-densifies, mirroring the precedent already
+ * set by base.css's own `@media (pointer: coarse)` tap-target rule — this is
+ * a viewport-level document concern (set on <html>/<body>), not a component
+ * in an unknown layout, so a viewport query is the right tool here (container
+ * queries can't see pointer type anyway).
+ *
+ * NEVER shrinks a control's min-height — --juno-size-tap-min stays governed
+ * solely by base.css's coarse-pointer rule (20260802-020 / WCAG 2.5.5).
+ * This block only shrinks padding/gap/tile sizing, same contract as compact. */
+@media (pointer: coarse) and (width <= 639.98px) {
+  [data-juno-density='auto'] {
+    --juno-tile-min: 104px;
+    --juno-gap-content: var(--juno-space-2);
+    --juno-pad-surface-inline: var(--juno-space-12);
+  }
+}
+
 /* ════════════════════════════════════════════════════════════════════
  *  junoui — type-scale layer
  *  One multiplier, --juno-font-scale, scales every --juno-font-size-*
@@ -1401,6 +1683,14 @@ button.juno-chip {
 .juno-dock {
   --juno-role: var(--juno-active);
 
+  /* Consumer-driven shrink (e.g. dim/compact the bar on scroll) — default 1,
+     a no-op. Applies to the whole bar regardless of variant (plain/--fixed/
+     --pill/--float/--icon). Transition duration is authored through the
+     motion scale (see base.css's JS-readable --juno-motion contract) so
+     prefers-reduced-motion collapses it to 0 without a component-local
+     media query. */
+  --juno-dock-scale: 1;
+
   position: sticky;
   inset-block-end: 0;
   z-index: var(--juno-z-raised);
@@ -1409,6 +1699,9 @@ button.juno-chip {
   background: var(--juno-s1);
   border-block-start: var(--juno-border-width-1) solid var(--juno-border);
   padding-block-end: env(safe-area-inset-bottom, 0);
+  transform: scale(var(--juno-dock-scale));
+  transform-origin: bottom center;
+  transition: transform calc(var(--juno-motion-duration-quick) * var(--juno-motion-scale)) var(--juno-motion-ease-standard);
 }
 
 .juno-dock__item {
@@ -1421,6 +1714,13 @@ button.juno-chip {
   justify-content: center;
   gap: var(--juno-space-2);
   padding-block: var(--juno-space-4);
+
+  /* Full reset, not just the top edge: a plain `border-block-start` override
+     leaves the UA default border on the other three sides of a <button>
+     item (links have none, so this went unnoticed until <button> showed up
+     in the pill variant's usage). Re-add only the edge that carries the
+     active accent. */
+  border: none;
   border-block-start: var(--juno-border-width-2) solid transparent;
   font-family: var(--juno-font-family-sans);
   font-size: var(--juno-font-size-10);
@@ -1453,6 +1753,323 @@ button.juno-chip {
   outline-offset: calc(-1 * var(--juno-space-2));
 }
 
+/* Fixed — same story as the pillbar: sticky only pins while the column
+   overflows, so on a short page the dock lands mid-content. Pin to the
+   viewport foot in a page-scroll shell where content height varies. Since
+   fixed leaves the flow, reserve its height at the page foot (e.g.
+   padding-block-end) so it doesn't cover the last row. In-flow
+   .juno-app-shell (main is the scroller, dock at the body foot) needs none
+   of this — prefer it. */
+.juno-dock--fixed {
+  position: fixed;
+  inset-inline: 0;
+  inset-block-end: 0;
+}
+
+/* ── Pill variant — the full-width bar becomes a rounded floating pill with
+   big glyphs in circular bubbles. Labels drop; each icon sits in a circular
+   .juno-dock__bubble that fills only on the active tab (not the whole item).
+   Out of flow (fixed) so the page scrolls UNDER it — reserve room on the
+   scroller with padding-block-end: var(--juno-dock-clearance).
+   Usage — pair the bubble with .juno-icon-loader, junoui's concentric-stack
+   primitive, so a loading arc can be dropped in without re-rolling geometry:
+     <nav class="juno-dock juno-dock--pill juno-hide-from-md" aria-label="Primary">
+       <a class="juno-dock__item" href="…" aria-current="page" aria-label="Library">
+         <span class="juno-dock__bubble juno-icon-loader">
+           <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-squares-four" /></svg>
+         </span>
+       </a>
+     </nav>
+   Labels are hidden, so every item MUST carry an aria-label (on the <a>/<button>)
+   — the glyph alone is not an accessible name. */
+.juno-dock--pill {
+  --juno-role: var(--juno-active);
+
+  position: fixed;
+  inset-inline: 0;
+  inset-block-end: 0;
+  z-index: var(--juno-z-raised);
+  margin: 0 var(--juno-space-12) calc(var(--juno-space-16) + env(safe-area-inset-bottom, 0px));
+  padding: var(--juno-space-4);
+  background: color-mix(in srgb, var(--juno-s1) 88%, transparent);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: 999px;
+  box-shadow: var(--juno-shadow-2);
+}
+
+.juno-dock--pill .juno-dock__item {
+  min-block-size: 0;
+  gap: 0;
+  padding-block: var(--juno-space-4);
+
+  /* full reset: the base only zeroes the block-start border, but the pill has
+     no top edge to accent — the active state moves to the bubble. Also kill the
+     UA tap-highlight so no square flashes past the round bubble on tap. */
+  border: none;
+  background: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.juno-dock--pill .juno-dock__label { display: none; }
+
+/* Focus lands on the bubble so the ring hugs the round target, not the wide
+   item box. */
+.juno-dock--pill .juno-dock__item:focus-visible { outline: none; }
+
+.juno-dock--pill .juno-dock__item:focus-visible .juno-dock__bubble {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: var(--juno-space-2);
+}
+
+/* The bubble is a definite-size circular surface that centres its glyph. It
+   declares the same single-cell grid as .juno-icon-loader so composing the
+   two (see the usage block above) can't fight over `display`, and so the
+   ring — when one is present — is concentric with the glyph. */
+.juno-dock__bubble {
+  /* Section-loading ring — with .juno-icon-loader on the same element, an
+     indeterminate .juno-arc dropped inside rings the bubble's EDGE (diameter
+     = the bubble, thin stroke) instead of the glyph. Because the bubble's box
+     is definite, adding or removing the arc never resizes it. */
+  --juno-icon-loader-ring: var(--juno-size-tap-comfortable);
+  --juno-icon-loader-ring-width: 2px;
+
+  display: grid;
+  place-items: center;
+  inline-size: var(--juno-size-tap-comfortable);
+  block-size: var(--juno-size-tap-comfortable);
+  border-radius: 50%;
+  transition: background-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+/* Explicit big glyph so the pill reads at a glance. Set on the glyph itself so
+   it wins regardless of context (the base .juno-icon no longer pins a size —
+   see 20260727-011). */
+.juno-dock--pill .juno-icon { --juno-icon-size: var(--juno-space-32); }
+
+/* Active reads on the bubble alone — suppress the base full-item fill so only
+   the circular highlight shows. */
+.juno-dock--pill .juno-dock__item[aria-current] {
+  background: none;
+  color: var(--juno-role);
+}
+
+.juno-dock--pill .juno-dock__item[aria-current] .juno-dock__bubble {
+  background: var(--juno-s3);
+}
+
+/* reduced-transparency → solid surface, no blur (matches the pillbar) */
+@media (prefers-reduced-transparency: reduce) {
+  .juno-dock--pill {
+    background: var(--juno-s1);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+
+/* ── Float variant — the pillbar's floating capsule chrome (fixed, rounded
+   shell, blur, shadow, off-edge margin) applied to the dock's OWN item model:
+   unlike --pill it keeps icon+label items and the full-item active fill —
+   only the exterior changes. Combine with --icon below for the bubble
+   treatment inside a capsule (the old --pill look, decomposed). `border`
+   fully replaces the base's `border-block-start` (no top seam on a capsule),
+   and `padding` fully replaces the base's safe-area padding (the margin
+   below carries the safe area instead — additive offset off the edge, not
+   `max()`: see docs/ios-conformance.md). `overflow: hidden` clips the
+   items' square corners to the capsule's rounded shape.
+   Usage:
+     <nav class="juno-dock juno-dock--float juno-hide-from-md" aria-label="Primary">
+       <a class="juno-dock__item" href="…" aria-current="page">
+         <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-squares-four" /></svg>
+         <span class="juno-dock__label">Library</span>
+       </a>
+     </nav>
+   Out of flow (fixed) so the page scrolls UNDER it — reserve room on the
+   scroller with padding-block-end: var(--juno-dock-clearance). */
+.juno-dock--float {
+  position: fixed;
+  inset-inline: 0;
+  inset-block-end: 0;
+  z-index: var(--juno-z-raised);
+  margin: 0 var(--juno-space-12) calc(var(--juno-space-16) + env(safe-area-inset-bottom, 0px));
+  padding: var(--juno-space-4);
+  overflow: hidden;
+  background: color-mix(in srgb, var(--juno-s1) 88%, transparent);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: 999px;
+  box-shadow: var(--juno-shadow-2);
+}
+
+/* reduced-transparency → solid surface, no blur (matches the pillbar / --pill) */
+@media (prefers-reduced-transparency: reduce) {
+  .juno-dock--float {
+    background: var(--juno-s1);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+
+/* ── Icon variant — labels drop, glyphs grow, and the active state moves to
+   a circular .juno-dock__bubble instead of filling the whole item, WITHOUT
+   forcing the floating capsule chrome (that's --float, above — combine both
+   for the old --pill look). Usable standalone on a plain sticky/--fixed bar
+   for a compact, icon-only full-width dock.
+   Usage — same .juno-dock__bubble contract as --pill (pair with
+   .juno-icon-loader; see docs/components/dock.md#pill-variant):
+     <nav class="juno-dock juno-dock--icon juno-hide-from-md" aria-label="Primary">
+       <a class="juno-dock__item" href="…" aria-current="page" aria-label="Library">
+         <span class="juno-dock__bubble juno-icon-loader">
+           <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-squares-four" /></svg>
+         </span>
+       </a>
+     </nav>
+   Labels are hidden, so every item MUST carry an aria-label — the glyph
+   alone is not an accessible name. */
+.juno-dock--icon .juno-dock__item {
+  gap: 0;
+
+  /* accent moves to the bubble; kill the item-edge border in both states */
+  border-color: transparent;
+}
+
+.juno-dock--icon .juno-dock__label { display: none; }
+
+/* Explicit big glyph so the icon-only bar reads at a glance — set on the
+   glyph itself so it wins regardless of context (the base .juno-icon no
+   longer pins a size — see 20260727-011). */
+.juno-dock--icon .juno-icon { --juno-icon-size: var(--juno-space-32); }
+
+/* Focus lands on the bubble so the ring hugs the round target, not the wide
+   item box. */
+.juno-dock--icon .juno-dock__item:focus-visible { outline: none; }
+
+.juno-dock--icon .juno-dock__item:focus-visible .juno-dock__bubble {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: var(--juno-space-2);
+}
+
+/* Active reads on the bubble alone — suppress the base full-item fill so
+   only the circular highlight shows. */
+.juno-dock--icon .juno-dock__item[aria-current] {
+  background: none;
+  color: var(--juno-role);
+}
+
+.juno-dock--icon .juno-dock__item[aria-current] .juno-dock__bubble {
+  background: var(--juno-s3);
+}
+
+/* ── Collapsible variant — the whole bar folds into a single circular
+   .juno-dock__knob at the inline-end edge, and unfolds back to full width.
+   Driven by ONE inherited custom prop the app writes (junoui ships no JS):
+   --juno-dock-fold, 0 = fully open … 1 = the circle. Write it per scroll
+   frame for a gesture-tracked fold (set it on the dock, an ancestor, or
+   :root — it is only CONSUMED here, never declared, so an inherited value
+   always lands), or flip it 0/1 for a plain toggle.
+
+   The fold has two phases, split at --juno-dock-fold-split: first the bar
+   SHRINKS in place to --juno-dock-fold-scale (transform, no relayout),
+   then it SLIDES shut to --juno-dock-collapsed-size. Width interpolates
+   between two definite lengths because a transition cannot run to or from
+   an intrinsic size; --juno-dock-fold-smoothing is smoothing over
+   scroll-event discretization, not the fold itself — anything longer lags
+   the finger driving it.
+
+   Compose with a fixed placement (--pill, --float, or --fixed): the fold
+   re-anchors the bar to the inline-end edge, which only means something
+   out of flow. Transform-origin is the physical bottom right — the fold's
+   own scale REPLACES the base --juno-dock-scale hook (one transform slot);
+   RTL consumers flip the origin and inset overrides together.
+
+   Structure — items live in a tray; the knob is the circle's face:
+     <nav class="juno-dock juno-dock--pill juno-dock--collapsible …"
+          data-juno-collapsed>
+       <div class="juno-dock__tray"> …the usual __item children… </div>
+       <button class="juno-dock__knob" aria-label="Show navigation">
+         <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-dots-three" /></svg>
+       </button>
+     </nav>
+
+   data-juno-collapsed is the END state, set by the app only at fold = 1
+   (and removed the moment the fold reopens): it flips the tray to
+   visibility:hidden — which removes its items from the tab order — and
+   reveals the knob. Mid-fold both stay live; the tray's opacity empties
+   ahead of the slide (×1.6) so the glyphs are gone before the circle
+   closes. The knob MUST carry an aria-label; collapsing while focus is
+   inside the tray is the app's edge — move focus to the knob first.
+   prefers-reduced-motion needs nothing component-local: the base layer
+   zeroes every transition, and the fold value itself is app-driven. */
+.juno-dock--collapsible {
+  --juno-dock-fold-split: 0.35;
+  --juno-dock-fold-scale: 0.78;
+  --juno-dock-collapsed-size: calc(
+    var(--juno-size-tap-comfortable) + 2 * var(--juno-space-4) + 2 * var(--juno-border-width-1)
+  );
+  --juno-dock-edge-gap: calc(2 * var(--juno-space-12));
+  --juno-dock-fold-smoothing: 90ms;
+
+  /* per-phase normalized progress, derived — never set these directly */
+  --juno-dock-fold-shrink: min(1, var(--juno-dock-fold, 0) / var(--juno-dock-fold-split));
+  --juno-dock-fold-slide: clamp(
+    0,
+    (var(--juno-dock-fold, 0) - var(--juno-dock-fold-split)) / (1 - var(--juno-dock-fold-split)),
+    1
+  );
+
+  inset-inline-start: auto;
+  inline-size: calc(
+    var(--juno-dock-collapsed-size) +
+      (100% - var(--juno-dock-edge-gap) - var(--juno-dock-collapsed-size)) *
+      (1 - var(--juno-dock-fold-slide))
+  );
+  overflow: hidden;
+  transform: scale(calc(1 - (1 - var(--juno-dock-fold-scale)) * var(--juno-dock-fold-shrink)));
+  transform-origin: bottom right;
+  transition:
+    transform var(--juno-dock-fold-smoothing) linear,
+    inline-size var(--juno-dock-fold-smoothing) linear;
+}
+
+.juno-dock__tray {
+  flex: 1;
+  min-inline-size: 0;
+  display: flex;
+  align-items: stretch;
+  opacity: calc(1 - var(--juno-dock-fold-slide, 0) * 1.6);
+  transition: opacity var(--juno-dock-fold-smoothing, 90ms) linear;
+}
+
+.juno-dock__knob {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: var(--juno-space-4);
+  margin-block: auto;
+  inline-size: var(--juno-size-tap-comfortable);
+  block-size: var(--juno-size-tap-comfortable);
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: var(--juno-label);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-dock--collapsible[data-juno-collapsed] .juno-dock__tray { visibility: hidden; }
+
+.juno-dock--collapsible[data-juno-collapsed] .juno-dock__knob {
+  opacity: 1;
+  visibility: visible;
+}
+
 /* ════════════════════════════════════════════════════════════════════
  *  Component — Status dot + label
  *  Usage:
@@ -1501,6 +2118,12 @@ button.juno-chip {
  *  Reuses .juno-modal for the surface + scrim; this file re-pins + re-slides.
  *  Selectors are compound (.juno-modal.juno-drawer) so they override the
  *  modal's centered transform regardless of bundle order.
+ *
+ *  --bottom is a real bottom sheet: a grab handle (.juno-sheet__handle,
+ *  decorative) plus a CSS height knob (--juno-sheet-h, default 60dvh —
+ *  apps swap it for peek/half/full snap points, capped by --juno-sheet-max).
+ *  No drag gesture ships here: resizing/dismissing by drag is stateful and
+ *  stays in the app. See docs/components/drawer.md and 20260802-019.
  * ════════════════════════════════════════════════════════════════════ */
 
 .juno-modal.juno-drawer {
@@ -1546,15 +2169,24 @@ button.juno-chip {
 .juno-modal.juno-drawer--bottom {
   inline-size: 100%;
   max-inline-size: 100%;
-  block-size: 60dvh;
+
+  /* height knob: swap --juno-sheet-h for snap points (peek/half/full).
+     --juno-sheet-max is the hard ceiling so a swapped value can't run past
+     it. CSS-only — the drag gesture a real snap-point picker needs is
+     stateful and stays in the app. */
+  block-size: var(--juno-sheet-h, 60dvh);
+  max-block-size: var(--juno-sheet-max, 92dvh);
   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);
   transform: translateY(100%);
 
-  /* keep content above the home indicator */
-  padding-block-end: env(safe-area-inset-bottom, 0);
+  /* safe area moves to .juno-modal__body below (the scroll port) — padding
+     here would just be dead space under the grab handle. See 20260802-019. */
+  padding-block-end: 0;
 }
 
 .juno-modal.juno-drawer--bottom[open] { transform: translateY(0); }
@@ -1563,6 +2195,28 @@ button.juno-chip {
   .juno-modal.juno-drawer--bottom[open] { transform: translateY(100%); }
 }
 
+/* grab handle — visual affordance only. aria-hidden in markup: the dialog's
+   own aria-labelledby (→ the title) stays the accessible name. Dragging it
+   to resize/dismiss is stateful, so junoui draws it but never wires a
+   gesture to it — see docs/accessibility.md. */
+.juno-sheet__handle {
+  inline-size: var(--juno-space-40);
+  block-size: var(--juno-space-4);
+  margin: var(--juno-space-8) auto;
+  border-radius: 999px;
+  background: var(--juno-border-strong);
+}
+
+/* the scrolling body owns the safe area now, mirroring modal.css's mobile
+   sheet. Compound selector for specificity: drawer.css sorts before
+   modal.css in the bundle (scripts/bundle-css.mjs), so a bare
+   .juno-modal__body override here would lose to modal.css's own rule at
+   equal specificity. env() fallback keeps its unit inside calc() — see
+   docs/ios-conformance.md. */
+.juno-modal.juno-drawer--bottom .juno-modal__body {
+  padding-block-end: calc(var(--juno-pad-surface-inline) + env(safe-area-inset-bottom, 0px));
+}
+
 /* ── narrow viewports ────────────────────────────────────────────────────
    Side drawers cap below the full width so a sliver of scrim survives —
    the visual cue (and tap target) that "outside" closes the panel. */
@@ -1608,6 +2262,51 @@ button.juno-chip {
 
 .juno-field__error { font-size: var(--juno-font-size-11); color: var(--juno-warning); }
 
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Fold slot (animated presence for a row member)
+ *  A slot inside any flex/grid row that animates between PRESENT and
+ *  FOLDED-AWAY instead of popping in and out of the DOM: its inline-size
+ *  folds to zero, it fades, and at the end of the fold it leaves the
+ *  tab order via visibility (discrete transition: instant coming in,
+ *  end-of-fade going out). Keep the element mounted; drive the state
+ *  with the data-juno-in attribute — zero JS here, the app owns when.
+ *
+ *  The size must be DEFINITE (--juno-fold-size) because a transition
+ *  cannot run to or from an intrinsic width. If the row uses a flex/grid
+ *  gap, the folded slot still occupies one gap — name it in
+ *  --juno-fold-gap and the fold swallows it with a negative margin.
+ *
+ *  Canonical use: a transient action in a toolbar/pill row (a
+ *  scroll-to-top arrow, a contextual button) whose arrival should slide
+ *  the row open rather than jump it.
+ *  Usage:
+ *    <div style="display:flex; gap:4px">                  (any row)
+ *      <button class="juno-fold" data-juno-in aria-label="Scroll to top">…</button>
+ *      …other members…
+ *    </div>
+ *  prefers-reduced-motion needs nothing component-local — the base
+ *  layer zeroes every transition duration. */
+.juno-fold {
+  --juno-fold-size: var(--juno-size-tap-comfortable);
+  --juno-fold-gap: 0px;
+
+  flex-shrink: 0;
+  inline-size: var(--juno-fold-size);
+  overflow: hidden;
+  transition:
+    inline-size var(--juno-motion-duration-base) var(--juno-motion-ease-standard),
+    margin var(--juno-motion-duration-base) var(--juno-motion-ease-standard),
+    opacity var(--juno-motion-duration-base) var(--juno-motion-ease-standard),
+    visibility var(--juno-motion-duration-base) var(--juno-motion-ease-standard);
+}
+
+.juno-fold:not([data-juno-in]) {
+  inline-size: 0;
+  margin-inline-end: calc(-1 * var(--juno-fold-gap));
+  opacity: 0;
+  visibility: hidden;
+}
+
 /* ════════════════════════════════════════════════════════════════════
  *  Component — Gauge (determinate metric ring)
  *  A fixed-value ring for readouts (CPU / RAM / DISK …) — the metric
@@ -1687,6 +2386,74 @@ button.juno-chip {
 }
 .juno-gauge--lg .juno-gauge__value { font-size: var(--juno-font-size-20); }
 
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Icon loader (the ring-a-control primitive)
+ *  A control ringed by the spinning arc while its section loads — the
+ *  "this is loading" affordance for a rail / dock / pillbar item, but also
+ *  any other control an app needs to ring: an icon button, a badge, an
+ *  avatar. What it wraps stays static on top; the arc rings it and eats no
+ *  pointer events, so the wrapped control still clicks through.
+ *
+ *  This is the ONLY concentric-ring mechanism in junoui: anything that
+ *  wants an arc around it — a nav glyph, a dock bubble, an arbitrary
+ *  button or badge — composes this class instead of re-rolling absolute
+ *  positioning. Both ring dimensions are custom props, so one wrapper
+ *  serves a 14px glyph and a 44px bubble:
+ *    --juno-icon-loader-ring        diameter (default 1.9em — em, so it
+ *                                   tracks the glyph it wraps)
+ *    --juno-icon-loader-ring-width  stroke  (default 0.14em)
+ *  A host with a definite box (a dock bubble, an icon button) sets the
+ *  diameter to that box's size, so the ring hugs the edge and the box does
+ *  not resize when the arc appears or leaves — ring it without changing
+ *  its box. Below ~24px, add .juno-arc--smooth (loader.css) alongside
+ *  --indeterminate: the default 12-step sweep reads as jitter that small.
+ *
+ *  The app owns the state: add .juno-arc--indeterminate to spin, drop it
+ *  when loaded (gate the blink to first-load, not every refetch). For a
+ *  determinate ring, set --juno-progress on the .juno-arc instead.
+ *  Usage:
+ *    <a class="juno-rail__item" href="…" aria-current="page">
+ *      <span class="juno-icon-loader">
+ *        <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-squares-four" /></svg>
+ *        <span class="juno-arc juno-arc--indeterminate" role="status" aria-label="Loading"></span>
+ *      </span>
+ *      <span class="juno-rail__label">Library</span>
+ *    </a>
+ *
+ *  Gotcha encoded here: the arc's rotate animation overrides `transform`, so
+ *  the ring is centred with a single-cell grid — never translate(-50%,-50%),
+ *  which the spin would clobber.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-icon-loader {
+  --juno-role: var(--juno-active);
+
+  /* Single-cell grid: every child occupies the SAME cell and is centred in
+     it, so the ring and what it rings are guaranteed concentric — no
+     transform (the arc's rotation would clobber a translate) and no fragile
+     margin math. With no explicit size the cell sizes to its largest child
+     (normally the ring, --juno-icon-loader-ring); give the host a definite
+     inline/block size to pin the cell and keep the box jitter-free. */
+  display: inline-grid;
+  place-items: center;
+  line-height: 0; /* drop the inline strut so the box hugs the ring */
+}
+
+/* every child shares the one cell; the ringed content paints above the ring */
+.juno-icon-loader > * {
+  grid-area: 1 / 1;
+  z-index: 1;
+}
+
+/* the ring: sized from the two custom props, transparent to clicks */
+.juno-icon-loader > .juno-arc {
+  --juno-arc-size: var(--juno-icon-loader-ring, 1.9em);
+  --juno-arc-width: var(--juno-icon-loader-ring-width, 0.14em);
+
+  z-index: 0;
+  pointer-events: none;
+}
+
 /* ════════════════════════════════════════════════════════════════════
  *  Component — Icon  ·  inline SVG glyph
  *  A zero-JS icon primitive. Reference a symbol from the sprite; the glyph
@@ -1705,11 +2472,13 @@ button.juno-chip {
  * ════════════════════════════════════════════════════════════════════ */
 
 .juno-icon {
-  --juno-icon-size: 1.25em;
-
+  /* Default lives in the var() fallback, NOT as an element-level declaration:
+     declaring --juno-icon-size on the element would shadow an ancestor that
+     sets it for contextual sizing (e.g. .juno-list__chevron). Explicit
+     modifiers below still set it on the element and win. See 20260727-011. */
   display: inline-block;
-  inline-size: var(--juno-icon-size);
-  block-size: var(--juno-icon-size);
+  inline-size: var(--juno-icon-size, 1.25em);
+  block-size: var(--juno-icon-size, 1.25em);
   flex-shrink: 0;
   vertical-align: -0.2em; /* optical baseline alignment next to text */
   fill: currentcolor;
@@ -1920,6 +2689,143 @@ button.juno-list__row:disabled {
   color: var(--juno-muted);
 }
 
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Load state  ·  a vocabulary so nothing spins forever
+ *  Names the treatment for every way a load can go, so no consumer reaches
+ *  for a spinner on a state that will never resolve:
+ *    resolving, ETA known    → .juno-arc / .juno-beacon / .juno-bar (loader.css)
+ *    layout known, no data   → .juno-skeleton (skeleton.css)
+ *    working, NO ETA         → .juno-shimmer  — motion without a completion promise
+ *    failed (terminal)       → .juno-fault    — static, never animates
+ *    legitimately none       → .juno-empty    — static, never animates
+ *  Full decision table + a11y contract: docs/components/load-state.md.
+ *
+ *  Also ships an optional CSS-only switch: mark each treatment's wrapper
+ *  with data-juno-when, set data-juno-state on the .juno-state parent, and
+ *  the matching wrapper alone gets display:flex. Zero JS in junoui — the
+ *  app still decides WHEN a fetch becomes an error or an empty result.
+ *  Usage:
+ *    <div class="juno-state" data-juno-state="processing">
+ *      <div data-juno-when="loading">
+ *        <div class="juno-arc juno-arc--indeterminate" role="status" aria-label="Loading"></div>
+ *      </div>
+ *      <div data-juno-when="processing" aria-busy="true" aria-live="polite">
+ *        <div class="juno-shimmer" style="block-size: 120px;"></div>
+ *      </div>
+ *      <div data-juno-when="error">
+ *        <div class="juno-fault" role="status">
+ *          <span class="juno-fault__icon" aria-hidden="true">!</span>
+ *          <p>Couldn't load this.</p>
+ *        </div>
+ *      </div>
+ *      <div data-juno-when="empty">
+ *        <div class="juno-empty">
+ *          <span class="juno-empty__icon" aria-hidden="true">∅</span>
+ *          <p>Nothing here yet.</p>
+ *        </div>
+ *      </div>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+/* ── STATE SWITCH — mechanical only ─────────────────────────────────────
+   Hide every marked child; show only the one(s) whose data-juno-when token
+   list contains the parent's current data-juno-state. */
+.juno-state > [data-juno-when] { display: none; }
+
+.juno-state[data-juno-state='loading']    > [data-juno-when~='loading'],
+.juno-state[data-juno-state='processing'] > [data-juno-when~='processing'],
+.juno-state[data-juno-state='error']      > [data-juno-when~='error'],
+.juno-state[data-juno-state='empty']      > [data-juno-when~='empty'] { display: flex; }
+
+/* ── SHIMMER — work in progress, no completion promise ──────────────────
+   For server-side work with no ETA (transcoding, indexing…): a spinner
+   would spin forever, and a .juno-skeleton implies a known layout that
+   doesn't exist here either — just "something is happening". Shares
+   .juno-skeleton's compositor-only band verbatim (same @keyframes,
+   defined once in skeleton.css — not redefined here) so there is one
+   shimmer implementation, not two. Mark the region aria-busy="true". */
+.juno-shimmer {
+  position: relative;
+  overflow: hidden;
+  background: var(--juno-s2);
+  border-radius: var(--juno-radius-3);
+}
+
+.juno-shimmer::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    100deg,
+    transparent 20%,
+    color-mix(in srgb, var(--juno-s3) 70%, transparent) 50%,
+    transparent 80%
+  );
+  animation: juno-skeleton-shimmer var(--juno-shimmer-dur, 1.4s) ease-in-out infinite;
+}
+
+/* ── FAULT — terminal, never animates ────────────────────────────────────
+   The load will not resolve on its own (404, decode failure, permanent
+   backend error). Static by design — motion here would lie about the
+   state. Role defaults to caution; recolor with a .juno--<role> class for
+   a different severity, never hardcode a color. This is a per-region
+   fault, not a page-level alert — .juno-alert (role="alert") is for that;
+   here the app wires role="status" so AT announces the failure once,
+   politely, without interrupting. */
+.juno-fault {
+  --juno-role: var(--juno-caution);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--juno-space-8);
+  padding: var(--juno-space-24);
+  text-align: center;
+  color: var(--juno-role);
+}
+
+.juno-fault__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--juno-space-40);
+  block-size: var(--juno-space-40);
+  border-radius: var(--juno-radius-8);
+  border: var(--juno-border-width-1) solid currentcolor;
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-18);
+}
+
+/* ── EMPTY — legitimately nothing, terminal ──────────────────────────────
+   The load resolved; there is no data, and none will appear without new
+   input from the user. Generalized, table-agnostic form of the existing
+   .juno-table__empty (table.css) — same anatomy, any region. Neutral
+   (muted) — an empty result isn't a failure, don't tint it like one. */
+.juno-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--juno-space-12);
+  padding: var(--juno-space-56) var(--juno-space-24);
+  text-align: center;
+  color: var(--juno-label);
+}
+
+.juno-empty__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--juno-space-40);
+  block-size: var(--juno-space-40);
+  border-radius: var(--juno-radius-8);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge);
+  color: var(--juno-muted);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-18);
+}
+
 /* ════════════════════════════════════════════════════════════════════
  *  Component — Loaders (Arc · Beacon · Linear bar)
  *
@@ -1963,6 +2869,12 @@ button.juno-list__row:disabled {
   animation: juno-arc-rot 1.1s steps(12) infinite; /* mechanical, 12-step sweep */
 }
 
+/* the 12-step sweep reads as jitter under ~24px (e.g. rung around a small
+   badge via .juno-icon-loader) — swap to a continuous rotation there */
+.juno-arc--smooth.juno-arc--indeterminate {
+  animation-timing-function: linear;
+}
+
 /* centred readout for determinate arcs — place a span inside */
 .juno-arc__label {
   position: absolute;
@@ -2147,6 +3059,10 @@ button.juno-list__row:disabled {
   align-items: center;
   gap: var(--juno-gap-control);
   inline-size: 100%;
+
+  /* Dock overflow routes here on phones, making this a touch surface; hold the
+     tap minimum (auto-promotes to 44px on coarse pointers). See 20260802-020. */
+  min-block-size: var(--juno-size-tap-min);
   padding: var(--juno-space-8) var(--juno-space-10);
   background: transparent;
   border: none;
@@ -2242,6 +3158,11 @@ button.juno-list__row:disabled {
 }
 
 .juno-modal[open] {
+  /* Column so __body can be the bounded scroll port: the surface caps its own
+     height (85dvh as a sheet) and clips, so without this a tall body is simply
+     cut off and unreachable. See 20260803-029. */
+  display: flex;
+  flex-direction: column;
   opacity: 1;
   transform: translateY(0) scale(1);
 }
@@ -2257,6 +3178,7 @@ button.juno-list__row:disabled {
 .juno-modal::backdrop {
   background: rgb(0 0 0);
   opacity: var(--juno-opacity-scrim);
+  -webkit-backdrop-filter: blur(1.5px);
   backdrop-filter: blur(1.5px);
 }
 
@@ -2297,7 +3219,19 @@ button.juno-list__row:disabled {
 
 .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__body {
+  padding: var(--juno-space-12) var(--juno-pad-surface-inline) var(--juno-pad-surface-inline);
+
+  /* The scroll port (the docs already promised it "scrolls on its own").
+     min-block-size:0 lets a flex item shrink below its content so overflow-y
+     actually engages. overscroll-behavior stops the scroll chaining to the page
+     behind once the body hits its end — the rubber-band-under-the-sheet effect
+     on iOS. NOTE: overscroll-behavior is community convention here, not Apple
+     guidance; no primary Apple source covers it. See 20260803-029. */
+  min-block-size: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
 
 .juno-modal__title {
   font-family: var(--juno-font-family-sans);
@@ -2348,9 +3282,12 @@ button.juno-list__row:disabled {
     .juno-modal:not(.juno-drawer)[open] { transform: translateY(100%); }
   }
 
-  /* keep the foot's actions above the home indicator */
+  /* keep the foot's actions above the home indicator.
+     The env() fallback MUST carry a unit: inside calc(), a unitless `0` is a
+     <number>, the addition is invalid, and the whole declaration is dropped —
+     silently losing the padding on every device without a safe area. */
   .juno-modal:not(.juno-drawer) .juno-modal__body {
-    padding-block-end: calc(var(--juno-pad-surface-inline) + env(safe-area-inset-bottom, 0));
+    padding-block-end: calc(var(--juno-pad-surface-inline) + env(safe-area-inset-bottom, 0px));
   }
 
   /* full-width actions read better on a sheet */
@@ -2375,7 +3312,7 @@ button.juno-list__row:disabled {
  *      </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>
+ *        <button class="juno-btn juno-btn--ghost">EDIT</button>
  *      </div>
  *    </header>
  * ════════════════════════════════════════════════════════════════════ */
@@ -2456,6 +3393,10 @@ button.juno-list__row:disabled {
   gap: var(--juno-space-4);
 }
 
+/* Top-bar action controls are a touch surface: hold the tap minimum
+   (auto-promotes to 44px on coarse pointers). See 20260802-020. */
+.juno-navbar__actions > * { min-block-size: var(--juno-size-tap-min); }
+
 .juno-navbar__back:focus-visible {
   outline: var(--juno-border-width-2) solid var(--juno-active);
   outline-offset: calc(-1 * var(--juno-space-2));
@@ -2555,23 +3496,38 @@ button.juno-list__row:disabled {
  *        <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-arrows-clockwise" /></svg>
  *      </button>
  *    </nav>
+ *  Overflow: for variable-membership pills (an app-owned capacity planner
+ *  decides how many __item fit, reading --juno-pillbar-item/-gap/-pad below),
+ *  swap the last __item for .juno-pillbar__overflow anchoring a .juno-menu —
+ *  see docs/components/pillbar.md#overflow-slot and menu.css.
  * ════════════════════════════════════════════════════════════════════ */
 
 .juno-pillbar {
   --juno-role: var(--juno-active);
 
+  /* Geometry contract — published so a consumer's overflow/capacity planner
+     (deciding how many __item fit before routing the rest to __overflow)
+     reads real values instead of re-declaring junoui's px constants in JS.
+     Base-rule values only; the corner variants below keep their own literal
+     offsets (distinct block vs. inline edges) and are not wired to -edge. */
+  --juno-pillbar-item: var(--juno-size-tap-comfortable);
+  --juno-pillbar-gap: var(--juno-space-2);
+  --juno-pillbar-pad: var(--juno-space-4);
+  --juno-pillbar-edge: var(--juno-space-16);
+
   position: sticky;
-  inset-block-end: calc(var(--juno-space-16) + env(safe-area-inset-bottom, 0px));
+  inset-block-end: calc(var(--juno-pillbar-edge) + env(safe-area-inset-bottom, 0px));
   z-index: var(--juno-z-raised);
   margin-inline: auto;
-  margin-block-end: var(--juno-space-16);
+  margin-block-end: var(--juno-pillbar-edge);
   inline-size: fit-content;
-  max-inline-size: calc(100% - 2 * var(--juno-space-16));
+  max-inline-size: calc(100% - 2 * var(--juno-pillbar-edge));
   display: flex;
   align-items: center;
-  gap: var(--juno-space-2);
-  padding: var(--juno-space-4);
+  gap: var(--juno-pillbar-gap);
+  padding: var(--juno-pillbar-pad);
   background: color-mix(in srgb, var(--juno-s1) 88%, transparent);
+  -webkit-backdrop-filter: blur(12px);
   backdrop-filter: blur(12px);
   border: var(--juno-border-width-1) solid var(--juno-border);
   border-radius: 999px;
@@ -2582,8 +3538,8 @@ button.juno-list__row:disabled {
   appearance: none;
   margin: 0;
   border: none;
-  min-inline-size: var(--juno-size-tap-comfortable);
-  min-block-size: var(--juno-size-tap-comfortable);
+  min-inline-size: var(--juno-pillbar-item);
+  min-block-size: var(--juno-pillbar-item);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2630,6 +3586,54 @@ button.juno-list__row:disabled {
   cursor: not-allowed;
 }
 
+/* Overflow slot — the "more" trigger for items that don't fit the pill.
+   Styled like __item (same tap target, radius, hover/focus) but a dedicated
+   element because it opens a menu instead of acting as a nav/toggle item.
+   Pair with .juno-menu (menu.css) via popovertarget — the invoker is the
+   menu's implicit anchor, so no extra anchor-positioning is needed here.
+   junoui ships the docking point only: DECIDING which items overflow (and
+   when) is app policy — mount/unmount this button and move the spilled
+   __item markup into the menu, sizing the decision off the
+   --juno-pillbar-item/-gap/-pad custom props above instead of hardcoded px.
+   Zero JS in this file; aria-expanded is toggled by the app or a stateless
+   enhancer, same convention as __item's [aria-pressed].
+   .juno-pillbar__toggle (the --collapsible variant's expand/collapse control,
+   below) shares this exact chrome: same circle, same states. */
+.juno-pillbar__overflow,
+.juno-pillbar__toggle {
+  appearance: none;
+  margin: 0;
+  border: none;
+  flex-shrink: 0;
+  min-inline-size: var(--juno-pillbar-item);
+  min-block-size: var(--juno-pillbar-item);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border-radius: 999px;
+  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__overflow:hover,
+.juno-pillbar__toggle:hover { color: var(--juno-data); }
+
+.juno-pillbar__overflow[aria-expanded='true'],
+.juno-pillbar__toggle[aria-expanded='true'] {
+  background: var(--juno-s3);
+  color: var(--juno-role);
+}
+
+.juno-pillbar__overflow:focus-visible,
+.juno-pillbar__toggle:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: calc(-1 * var(--juno-space-2));
+}
+
 .juno-pillbar__sep {
   align-self: center;
   inline-size: var(--juno-border-width-1);
@@ -2638,10 +3642,162 @@ button.juno-list__row:disabled {
   flex-shrink: 0;
 }
 
+/* Fixed — pin to the viewport instead of flowing at the column's end.
+   Sticky only pins while the column overflows; on a short (non-scrolling)
+   page the sticky pillbar lands mid-content. Use --fixed in a page-scroll
+   shell where content height varies. Centered via inset-inline:0 + the base
+   margin-inline:auto (NOT translateX, which the app-shell model avoids
+   anyway). Leaves the viewport foot free — reserve space so it doesn't cover
+   the last row (e.g. padding-block-end on the scroll region). Prefer the
+   in-flow .juno-app-shell (main scrolls, pillbar sits at the body foot) —
+   that needs no fixed at all. */
+.juno-pillbar--fixed {
+  position: fixed;
+  inset-inline: 0;
+  z-index: var(--juno-z-anchored);
+}
+
+/* Corner placement — a floating cluster pinned to one viewport corner rather
+   than the centered bottom bar (e.g. a top-right search/filter cluster, or a
+   bottom-right action pill). Each variant is self-contained: it flips to
+   fixed, clears the base's bottom-center geometry (auto margins / bottom
+   inset), and clamps the corner with safe-area insets so it never lands under
+   a notch or the home indicator. Keep the base blur/border/shadow. Pair with a
+   scroll-clearance reservation on the scroller if the corner overlaps content
+   (var(--juno-pillbar-clearance) for the bottom corners). */
+.juno-pillbar--top-right,
+.juno-pillbar--top-left,
+.juno-pillbar--bottom-right,
+.juno-pillbar--bottom-left {
+  position: fixed;
+  inset-block: auto;
+  inset-inline: auto;
+  z-index: var(--juno-z-anchored);
+  margin: 0;
+}
+
+.juno-pillbar--top-right {
+  inset-block-start: calc(var(--juno-space-10) + env(safe-area-inset-top, 0px));
+  inset-inline-end: calc(var(--juno-space-12) + env(safe-area-inset-right, 0px));
+}
+
+.juno-pillbar--top-left {
+  inset-block-start: calc(var(--juno-space-10) + env(safe-area-inset-top, 0px));
+  inset-inline-start: calc(var(--juno-space-12) + env(safe-area-inset-left, 0px));
+}
+
+.juno-pillbar--bottom-right {
+  inset-block-end: calc(var(--juno-space-16) + env(safe-area-inset-bottom, 0px));
+  inset-inline-end: calc(var(--juno-space-12) + env(safe-area-inset-right, 0px));
+}
+
+.juno-pillbar--bottom-left {
+  inset-block-end: calc(var(--juno-space-16) + env(safe-area-inset-bottom, 0px));
+  inset-inline-start: calc(var(--juno-space-12) + env(safe-area-inset-left, 0px));
+}
+
+/* Input slot — an expandable search field living inside the pill. Borderless
+   and transparent so it reads as part of the pill, not a boxed control. The
+   font-size floor matters: iOS Safari zooms the whole page onto any focused
+   text field under 16px, so hold this at max(16px, …) exactly like the base
+   .juno-input touch rule. Give it an accessible label (aria-label or a
+   visually-hidden <label>) — the placeholder is not a label. */
+.juno-pillbar__input {
+  flex: 0 1 auto;
+  min-inline-size: 0;
+  inline-size: min(52vw, 240px);
+  margin: 0;
+  padding-inline: var(--juno-space-8);
+  border: none;
+  background: transparent;
+  outline: none;
+  font-family: var(--juno-font-family-sans);
+  font-size: max(16px, var(--juno-font-size-16));
+  color: var(--juno-data);
+}
+
+.juno-pillbar__input::placeholder { color: var(--juno-muted); }
+
+.juno-pillbar__input:focus-visible {
+  outline: none;
+}
+
+/* Collapsible — the whole pill folds into a single circular toggle, and a
+   tap expands it back to full width. State lives on the toggle's
+   aria-expanded (app-owned, like __item's aria-pressed — zero JS here);
+   the bar reads it via :has(), so DOM order of toggle vs. tray is free
+   (toggle-first for a left-anchored pill, toggle-last for right-anchored).
+
+   Usage:
+     <nav class="juno-pillbar juno-pillbar--collapsible" aria-label="Tools">
+       <button class="juno-pillbar__toggle" aria-expanded="false" aria-label="Show toolbar">
+         <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-dots-three" /></svg>
+       </button>
+       <div class="juno-pillbar__tray">
+         <div><!-- single wrapper, any element -->
+           …the usual __item / __sep / __input children…
+         </div>
+       </div>
+     </nav>
+
+   Mechanism: the tray is a one-column grid whose track animates 0fr ↔ 1fr —
+   the only widely-supported way to TRANSITION to an intrinsic width (Safari 16+;
+   width: fit-content and interpolate-size aren't animatable there). The track
+   needs one shrinkable child, hence the mandatory single wrapper (any element:
+   it's selected as > *, so there is no class to forget). visibility rides the
+   same transition — discrete animation keeps the tray visible while it slides
+   shut, then hides it, which also drops the hidden items from the tab order
+   (collapsing while focus is inside the tray is the app's edge to handle:
+   move focus to the toggle first). prefers-reduced-motion needs nothing
+   component-local — the base layer zeroes every transition duration. */
+.juno-pillbar--collapsible {
+  transition: gap var(--juno-motion-duration-deliberate) var(--juno-motion-ease-standard);
+}
+
+.juno-pillbar__tray {
+  display: grid;
+  grid-template-columns: 1fr;
+  transition:
+    grid-template-columns var(--juno-motion-duration-deliberate) var(--juno-motion-ease-standard),
+    opacity var(--juno-motion-duration-deliberate) var(--juno-motion-ease-standard),
+    visibility var(--juno-motion-duration-deliberate) var(--juno-motion-ease-standard);
+}
+
+.juno-pillbar__tray > * {
+  display: flex;
+  align-items: center;
+  gap: var(--juno-pillbar-gap);
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+.juno-pillbar--collapsible:has(> .juno-pillbar__toggle[aria-expanded='false']) {
+  /* gap → 0 so the collapsed pill is exactly the toggle's circle, whichever
+     side the tray sits on (a negative margin would have to know the side) */
+  gap: 0;
+}
+
+.juno-pillbar--collapsible:has(> .juno-pillbar__toggle[aria-expanded='false']) .juno-pillbar__tray {
+  grid-template-columns: 0fr;
+  opacity: 0;
+  visibility: hidden;
+}
+
+/* the toggle's glyph turns a quarter as the tray opens — motion reads as
+   "this button did it" even when the expansion pushes the pill off-center */
+.juno-pillbar__toggle .juno-icon {
+  transition: transform var(--juno-motion-duration-deliberate) var(--juno-motion-ease-standard);
+}
+
+.juno-pillbar__toggle[aria-expanded='true'] .juno-icon {
+  transform: rotate(90deg);
+}
+
 /* reduced-transparency preference → solid surface, no blur */
 @media (prefers-reduced-transparency: reduce) {
   .juno-pillbar {
     background: var(--juno-s1);
+    -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
 }
@@ -2817,6 +3973,14 @@ button.juno-list__row:disabled {
   padding-inline: 0;
 }
 
+/* Responsive — the rail self-hides below md, so you pair it with a
+   .juno-dock (or .juno-pillbar) carrying .juno-hide-from-md and get the
+   rail↔dock swap without hanging a juno-hide-below-md on the rail yourself.
+   Reciprocal of the dock's md pairing; see dock.css / docs/layout.md#app-shell. */
+@media (width <= 767.98px) {
+  .juno-rail--responsive { display: none !important; }
+}
+
 /* ════════════════════════════════════════════════════════════════════
  *  Component — Data readout tile
  *  Usage:
@@ -2863,6 +4027,55 @@ button.juno-list__row:disabled {
   margin-top: var(--juno-space-4);
 }
 
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Reload indicator (refetch-in-place)
+ *  The non-blocking counterpart to the skeleton. Skeletons stand in for
+ *  content that isn't there yet (first paint); the reload dot signals a
+ *  refresh happening OVER content that's already on screen — the stale data
+ *  stays readable and interactive while fresh data lands.
+ *
+ *  A small pulsing dot with a soft halo, centered as a fixed overlay that
+ *  eats no pointer events (the page underneath stays fully usable). Color
+ *  comes from --juno-role (default = active). The app owns the state: render
+ *  it while a background refetch is in flight, drop it when it settles.
+ *
+ *  a11y: role="status" + aria-label so assistive tech announces the refresh
+ *  politely without stealing focus. Keep it a live status, not an alert.
+ *  Usage:
+ *    <div class="juno-reload" role="status" aria-label="Reloading">
+ *      <span class="juno-reload__dot"></span>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-reload {
+  --juno-role: var(--juno-active);
+
+  position: fixed;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -50%);
+  z-index: var(--juno-z-anchored);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none; /* refresh is non-blocking — never trap clicks */
+}
+
+.juno-reload__dot {
+  inline-size: var(--juno-space-16);
+  block-size: var(--juno-space-16);
+  border-radius: 50%;
+  background: var(--juno-role);
+
+  /* soft halo so the dot reads over any surface without a hard edge */
+  box-shadow: 0 0 0 var(--juno-space-8) color-mix(in srgb, var(--juno-role) 20%, transparent);
+  animation: juno-pulse 1.4s ease-in-out infinite;
+}
+
+/* prefers-reduced-motion: the base layer already slows every animation to a
+   stop; the dot + halo stay visible (steady), so the "refreshing" state is
+   still conveyed without the pulse. */
+
 /* ════════════════════════════════════════════════════════════════════
  *  Component — Segmented control
  *  Exclusive-choice pill row (filters, mode switchers, sort pickers).
@@ -3006,14 +4219,20 @@ button.juno-seg__opt:disabled {
  *  Component — Skeleton  ·  loading placeholder
  *  A shimmering block that stands in for content not yet loaded. Same
  *  shimmer language as the table's row skeleton, generalized: text lines,
- *  blocks, and circles (avatars). Zero JS — size it with width / height or
- *  --juno-skeleton-h. Honors prefers-reduced-motion (shimmer → static).
- *  Mark the loading region aria-busy="true" so AT announces it.
+ *  blocks, circles (avatars), and aspect-ratio tiles (media grids). Zero
+ *  JS — size it with width / height, --juno-skeleton-h, or (for --tile)
+ *  --juno-skeleton-ratio. The shimmer is a `::before` overlay animated on
+ *  transform/opacity only — never background-position — so it stays on
+ *  the compositor instead of repainting the gradient every frame; the
+ *  base fill is a plain solid color. Reduced motion is handled globally
+ *  (base.css collapses all animation-duration to ~0), no local override
+ *  needed here. Mark the loading region aria-busy="true" so AT announces it.
  *  Usage:
  *    <div aria-busy="true" aria-live="polite">
  *      <span class="juno-skeleton juno-skeleton--circle" style="--juno-skeleton-h: 48px;"></span>
  *      <span class="juno-skeleton juno-skeleton--text" style="inline-size: 60%;"></span>
  *      <span class="juno-skeleton juno-skeleton--text"></span>
+ *      <span class="juno-skeleton juno-skeleton--tile"></span>
  *    </div>
  * ════════════════════════════════════════════════════════════════════ */
 
@@ -3021,11 +4240,27 @@ button.juno-seg__opt:disabled {
   --juno-skeleton-h: var(--juno-space-16);
 
   display: block;
+  position: relative;
+  overflow: hidden;
   inline-size: 100%;
   block-size: var(--juno-skeleton-h);
   border-radius: var(--juno-radius-3);
-  background: linear-gradient(90deg, var(--juno-s2) 0%, var(--juno-s3) 50%, var(--juno-s2) 100%);
-  background-size: 200% 100%;
+  background: var(--juno-s2);
+}
+
+/* the shimmer itself: a diagonal highlight band that slides across via
+   transform only (compositor-only — no layout/paint per frame). Clipped to
+   the parent's border-radius by the overflow: hidden above. */
+.juno-skeleton::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    100deg,
+    transparent 20%,
+    color-mix(in srgb, var(--juno-s3) 70%, transparent) 50%,
+    transparent 80%
+  );
   animation: juno-skeleton-shimmer 1.2s ease-in-out infinite;
 }
 
@@ -3049,19 +4284,25 @@ button.juno-seg__opt:disabled {
   border-radius: var(--juno-radius-4);
 }
 
+/* content-box mode: size from an aspect ratio instead of a fixed height —
+   the dominant case for media-grid tiles standing in for a real image/card
+   of known proportions. Default 1 (square); override per instance with
+   --juno-skeleton-ratio (e.g. "16 / 9"). */
+.juno-skeleton--tile {
+  --juno-skeleton-ratio: 1;
+
+  aspect-ratio: var(--juno-skeleton-ratio);
+  block-size: auto;
+  border-radius: var(--juno-radius-4);
+}
+
 @keyframes juno-skeleton-shimmer {
   from {
-    background-position: 200% 0;
+    transform: translateX(-100%);
   }
 
   to {
-    background-position: -200% 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .juno-skeleton {
-    animation: none;
+    transform: translateX(100%);
   }
 }
 
@@ -3939,6 +5180,11 @@ button.juno-seg__opt:disabled {
   scrollbar-width: none;
 }
 
+/* scrollbar-width only reached Safari 18.2, so the scrollable strip still shows
+   a bar on older iOS — keep the WebKit pseudo-element alongside it (same pair
+   .juno-scroller--bare uses). */
+.juno-tabs__list::-webkit-scrollbar { display: none; }
+
 .juno-tabs__tab {
   appearance: none;
   margin: 0;
@@ -3986,10 +5232,22 @@ button.juno-seg__opt:disabled {
  *    <figure class="juno-thumb" style="aspect-ratio: 1">
  *      <img src="…" alt="Sunset clip" onerror="this.remove()" />
  *    </figure>
- *    <!-- known-missing: ship no <img>; label the figure instead -->
+ *    \3c !-- known-missing: ship no <img>; label the figure instead -->
  *    <figure class="juno-thumb juno-thumb--video" role="img" aria-label="Preview unavailable"></figure>
  *  The onerror one-liner is the whole JS contract (optional, stateless):
  *  a broken image removes itself and the placeholder underneath shows.
+ *  Aspect is locked by default (--juno-thumb-ratio, square) so a media wall's
+ *  scroll height is stable before anything loads; override per instance with
+ *  style="--juno-thumb-ratio: 16/9" (an inline aspect-ratio still wins too).
+ *  Selection is an outline (never a border — a border would shift the frame)
+ *  toggled by a class/data-attr; junoui never decides what's selected.
+ *  Corner slots anchor badges/duration chips over the media with logical
+ *  inset so they swap sides correctly under dir="rtl".
+ *  Usage:
+ *    <figure class="juno-thumb juno-thumb--selected">
+ *      <img src="…" alt="Sunset clip" onerror="this.remove()" />
+ *      <span class="juno-thumb__corner juno-thumb__corner--top-end badge">0:42</span>
+ *    </figure>
  * ════════════════════════════════════════════════════════════════════ */
 
 .juno-thumb {
@@ -4000,12 +5258,30 @@ button.juno-seg__opt:disabled {
   justify-content: center;
   gap: var(--juno-space-4);
   margin: 0;
+  aspect-ratio: var(--juno-thumb-ratio, 1);
   overflow: hidden;
   background: var(--juno-s2);
   border: var(--juno-border-width-1) solid var(--juno-border);
   border-radius: var(--juno-radius-3);
 }
 
+/* Flush — drop the border/radius for tight walls where the frame's own edge
+   would fight the grid (full-bleed tiles); the media stays edge-to-edge via
+   object-fit: cover regardless. */
+.juno-thumb--flush {
+  border: none;
+  border-radius: 0;
+}
+
+/* Selected — an inset outline, not a border: it overlays the existing frame
+   edge instead of adding to the box, so nothing reflows when selection
+   toggles. Role-neutral (--juno-active), matching the checkbox/switch focus
+   ring elsewhere in the system. */
+.juno-thumb--selected {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: calc(-1 * var(--juno-border-width-2));
+}
+
 /* placeholder glyph (Phosphor "images", masked so it takes any color) */
 .juno-thumb::before {
   --juno-thumb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M160,88a16,16,0,1,1,16,16A16,16,0,0,1,160,88Zm76-32V160a20,20,0,0,1-20,20H204v20a20,20,0,0,1-20,20H40a20,20,0,0,1-20-20V88A20,20,0,0,1,40,68H60V56A20,20,0,0,1,80,36H216A20,20,0,0,1,236,56ZM180,180H80a20,20,0,0,1-20-20V92H44V196H180Zm-21.66-24L124,121.66,89.66,156ZM212,60H84v67.72l25.86-25.86a20,20,0,0,1,28.28,0L192.28,156H212Z'/%3E%3C/svg%3E");
@@ -4045,6 +5321,38 @@ button.juno-seg__opt:disabled {
   object-fit: cover;
 }
 
+/* Corner overlay — anchor a badge, check, or duration chip over the media
+   without joining flow or touching the frame's aspect-ratio. Pick one
+   position modifier; the base only sets stacking + inset from the frame
+   edge. Logical inset (not top/left) so start/end swap under dir="rtl" —
+   and the modifiers are named start/end for the same reason: a `--top-right`
+   that renders top-LEFT in RTL would be a trap. */
+.juno-thumb__corner {
+  position: absolute;
+  z-index: 1;
+  margin: var(--juno-space-4);
+}
+
+.juno-thumb__corner--top-start {
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.juno-thumb__corner--top-end {
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}
+
+.juno-thumb__corner--bottom-start {
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+
+.juno-thumb__corner--bottom-end {
+  inset-block-end: 0;
+  inset-inline-end: 0;
+}
+
 /* ════════════════════════════════════════════════════════════════════
  *  Component — Toast / snackbar
  *  A transient, floating notification. Same role-rail language as the
@@ -4138,7 +5446,11 @@ button.juno-seg__opt:disabled {
 @media (width <= 639.98px) {
   .juno-toast-stack {
     inset-inline: var(--juno-space-12);
-    inset-block-end: calc(var(--juno-space-12) + env(safe-area-inset-bottom, 0));
+
+    /* unit-bearing env() fallback: inside calc() a unitless `0` is a <number>,
+       which invalidates the sum and drops the whole declaration (the stack
+       would then sit flush at 0 on any device without a safe area). */
+    inset-block-end: calc(var(--juno-space-12) + env(safe-area-inset-bottom, 0px));
     inline-size: auto;
   }
 
@@ -4445,8 +5757,11 @@ button.juno-seg__opt:disabled {
   font-variant-numeric: tabular-nums;
 }
 
+/* --juno-label-size: optional size override, set by an ancestor (e.g. a
+ * density wrapper or a "compact" section) — never declared here, so it
+ * isn't shadowed for descendants that also want to read it. */
 .juno-label {
-  font-size: var(--juno-font-size-13);
+  font-size: var(--juno-label-size, var(--juno-font-size-13));
   color: var(--juno-label);
 }