@junoput01/junoui 0.6.0 → 0.8.0

package/docs/tokens-reference.md

@@ -113,6 +113,21 @@ Color encodes status, never decoration. Each role has exactly one meaning.
 | `shadow.2` | `0 4px 14px rgb(0 0 0 / 0.35)` | `var(--juno-shadow-2)` | `JunoTokens.shadow2` |
 | `shadow.3` | `0 12px 32px rgb(0 0 0 / 0.50)` | `var(--juno-shadow-3)` | `JunoTokens.shadow3` |
 
+### ink
+
+| Token | Value | CSS variable | Flutter / iOS |
+|---|---|---|---|
+| `ink.canvas.ink` | `#FFFFFF` | `var(--juno-ink-canvas-ink)` | `JunoTokens.inkCanvasInk` |
+| `ink.canvas.halo` | `#000000` | `var(--juno-ink-canvas-halo)` | `JunoTokens.inkCanvasHalo` |
+| `ink.canvas.halo-width` | `2px` | `var(--juno-ink-canvas-halo-width)` | `JunoTokens.inkCanvasHalo-width` |
+| `ink.canvas.halo-width-lg` | `3px` | `var(--juno-ink-canvas-halo-width-lg)` | `JunoTokens.inkCanvasHalo-width-lg` |
+| `ink.canvas.scrim` | `0.28` | `var(--juno-ink-canvas-scrim)` | `JunoTokens.inkCanvasScrim` |
+| `ink.vivid.nominal` | `oklch(76% 0.28 148)` | `var(--juno-ink-vivid-nominal)` | `JunoTokens.inkVividNominal` |
+| `ink.vivid.active` | `oklch(76% 0.24 205)` | `var(--juno-ink-vivid-active)` | `JunoTokens.inkVividActive` |
+| `ink.vivid.target` | `oklch(70% 0.30 328)` | `var(--juno-ink-vivid-target)` | `JunoTokens.inkVividTarget` |
+| `ink.vivid.caution` | `oklch(82% 0.20 82)` | `var(--juno-ink-vivid-caution)` | `JunoTokens.inkVividCaution` |
+| `ink.vivid.warning` | `oklch(68% 0.28 25)` | `var(--juno-ink-vivid-warning)` | `JunoTokens.inkVividWarning` |
+
 ### Motion
 
 | Token | Value | CSS variable | Flutter / iOS |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@junoput01/junoui",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "junoui — a token-driven design system. Color carries semantic meaning, never decoration: every hue has one assigned role (NOMINAL / ACTIVE / TARGET / CAUTION / WARNING). Ships multi-platform tokens (CSS, SCSS, JS/TS, JSON, Android, iOS, Flutter) plus a framework-agnostic CSS component layer.",
   "type": "module",
   "license": "MIT",
@@ -48,8 +48,13 @@
     "./android/dimens": "./dist/android/dimens.xml",
     "./ios": "./dist/ios/JunoTokens.swift",
     "./flutter": "./dist/flutter/juno_tokens.dart",
+    "./rust": "./dist/rust/juno_tokens.rs",
     "./icons": "./dist/icons/juno-icons.svg",
     "./subset": "./tools/subset-sprite.mjs",
+    "./tree": "./tools/tree.mjs",
+    "./gizmo": "./tools/gizmo.mjs",
+    "./testing": "./tools/testing.mjs",
+    "./classes.json": "./dist/classes.json",
     "./icons/inline": "./dist/icons/inline.js",
     "./icons/install": "./dist/icons/install.js",
     "./package.json": "./package.json"
@@ -68,7 +73,8 @@
     "build:tokens": "node style-dictionary.config.mjs",
     "build:icons": "node scripts/build-icons.mjs",
     "build:css": "node scripts/bundle-css.mjs",
-    "build": "npm run build:tokens && npm run build:icons && npm run build:css",
+    "build:classes": "node scripts/build-classes.mjs",
+    "build": "npm run build:tokens && npm run build:icons && npm run build:css && npm run build:classes",
     "gen-docs": "node scripts/gen-docs.mjs",
     "clean": "node -e \"import('node:fs').then(fs=>fs.rmSync('dist',{recursive:true,force:true}))\"",
     "lint:css": "stylelint \"src/css/**/*.css\"",

package/src/css/base.css

@@ -47,9 +47,30 @@
     var(--juno-size-tap-comfortable) + 4 * var(--juno-space-4) + 2 * var(--juno-border-width-1)
   );
   --juno-dock-clearance-scale: 1;
+
+  /* The bar's own offset from the bottom edge — declared ONCE and consumed by
+     both the bar's margin (dock.css) and the clearance below, so the two cannot
+     disagree about where the bar sits.
+
+     That is the whole reason this is a token rather than a literal in each
+     place. junoui's default is additive, per docs/ios-conformance.md: a
+     FLOATING element sits off the edge, so its gap and the inset stack. A
+     consumer whose design wants the bar flush above the home indicator instead
+     writes `max(8px, env(safe-area-inset-bottom, 0px))` here and BOTH the
+     margin and the reservation follow it. Before this token the form was baked
+     into each site separately, so a consumer that changed one silently
+     disagreed with the other — measured at 16px of dead band at inset 0 and
+     24px at inset 34 (20260815-055), and no single --juno-dock-h could
+     reconcile them because one side added the inset and the other maxed it. */
+  --juno-dock-edge-offset: calc(var(--juno-space-16) + env(safe-area-inset-bottom, 0px));
+
+  /* Gap between the bar's top edge and the last row of content. Zero is a
+     legitimate setting: a translucent bar that content is MEANT to scroll under
+     wants overlap, not breathing room. */
+  --juno-dock-clearance-breathing: var(--juno-space-8);
   --juno-dock-clearance: calc(
-    var(--juno-dock-h) * var(--juno-dock-clearance-scale) + var(--juno-space-16) +
-      var(--juno-space-8) + env(safe-area-inset-bottom, 0px)
+    var(--juno-dock-h) * var(--juno-dock-clearance-scale) + var(--juno-dock-edge-offset) +
+      var(--juno-dock-clearance-breathing)
   );
 
   /* The pillbar is the same shape one size down: no bubble, so its height is
@@ -58,8 +79,8 @@
     var(--juno-size-tap-comfortable) + 2 * var(--juno-space-4) + 2 * var(--juno-border-width-1)
   );
   --juno-pillbar-clearance: calc(
-    var(--juno-pillbar-h) * var(--juno-dock-clearance-scale) + var(--juno-space-16) +
-      var(--juno-space-8) + env(safe-area-inset-bottom, 0px)
+    var(--juno-pillbar-h) * var(--juno-dock-clearance-scale) + var(--juno-dock-edge-offset) +
+      var(--juno-dock-clearance-breathing)
   );
 
   /* JS-readable motion contract. CSS-only `prefers-reduced-motion` never reaches
@@ -168,47 +189,18 @@ code, kbd, samp, pre { font-family: var(--juno-font-family-mono); }
      `.juno-input` font-size later in the bundle. It did, silently, until
      20260815-006's coarse-pointer project measured it. */
 
-  /* 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;
-  }
+  /* The tap-highlight default that used to live here is GENERATED now, from
+     src/css/touch-surfaces.mjs, together with the touch-action default that
+     shares its member list. Two hand-maintained lists had drifted from the
+     classes and from each other; see that file. */
 }
 
-/* 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;
-}
+/* The touch defaults that used to be two hand-maintained `:where()` lists here
+   are GENERATED from src/css/touch-surfaces.mjs and emitted straight after this
+   file. Both lists had drifted — from the classes (`.juno-seg__option`,
+   `.juno-list__item`: neither exists, so `:where()` matched nothing and the
+   rule parsed anyway) and from each other. One declared set now feeds both.
+   See 20260826-024 and docs/conformance-kit.md. */
 
 /* Gesture-owned surfaces — for an element whose pointer events are fully
    driven by app JS (drag-pan, pinch-zoom, swipe classification: a state

package/src/css/components/button.css

@@ -40,8 +40,10 @@
 .juno-btn--ghost:hover { background: var(--juno-s2); filter: none; }
 
 /* Small — for dense desktop toolbars (40–46px bars) where the default
-   control would not fit. Deliberately under the WCAG tap-min target:
-   keep the default size for touch surfaces. Combines with --ghost + roles. */
+   control would not fit. Combines with --ghost + roles.
+   On a FINE pointer this is 24px: the WCAG 2.2 AA floor (2.5.8) exactly, and
+   no more. On a coarse pointer it promotes to the comfortable target — see
+   below. */
 .juno-btn--sm {
   min-height: var(--juno-space-24);
   font-size: var(--juno-font-size-11);
@@ -50,6 +52,44 @@
   border-radius: var(--juno-radius-3);
 }
 
+/* --sm names a DENSITY, and consumers reach for it as a SEMANTIC. Audited
+   across one app: 40 call sites, nearly all of them `--sm --ghost` meaning
+   "secondary", shipping a 24px target on a phone — and junoui's own showcase
+   does it twice in a navbar action slot. A size modifier should not quietly
+   become a tap-target decision, so on touch it holds the same floor every
+   other control does. Type and padding still shrink: --sm stays a density
+   modifier, it just stops being a touch-target one (20260826-026).
+
+   THE RULE LIVES HERE, not in base.css's (pointer: coarse) block: a media
+   query adds no specificity, so a `.juno-btn--sm` there would lose to this
+   file's own `.juno-btn--sm` later in the bundle. That is not a guess — it is
+   what silently happened to the .juno-input font floor until 20260815-006
+   measured it.
+
+   --dense is the opt-out, and it is deliberately only meaningful ON --sm:
+   a dense touch toolbar is a real thing (a media scrubber, an editor rail),
+   but it is a decision someone has to make by name rather than inherit from a
+   size.
+
+   The two rules below are REDUNDANT ON PURPOSE, and mutation testing is how
+   that became a decision rather than an accident: deleting either one leaves
+   --dense at 24px. The `:not()` excludes a dense button from the promotion, so
+   the pairing below it is dead weight — until the `:not()` names the wrong
+   class, at which point the pairing (also (0,2,0), and later in the file) is
+   the only thing holding the opt-out. Each covers the other's failure, so a
+   single edit to either cannot silently promote a --dense button. Both
+   selectors are (0,2,0) and mutually exclusive in the correct state, so they
+   never race. */
+@media (pointer: coarse) {
+  .juno-btn--sm:not(.juno-btn--dense) {
+    min-height: var(--juno-size-tap-min);
+  }
+
+  .juno-btn--sm.juno-btn--dense {
+    min-height: var(--juno-space-24);
+  }
+}
+
 .juno-btn:disabled {
   background: var(--juno-muted);
   color: var(--juno-label);

package/src/css/components/canvas-ink.css

@@ -0,0 +1,97 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Canvas ink (marks drawn over arbitrary imagery)
+ *  For text and vector ink sitting on a photo, a map, a video frame or a
+ *  camera feed: anywhere the background is CONTENT rather than one of
+ *  junoui's surfaces.
+ *
+ *  WHY IT IS NOT JUST A COLOUR. junoui's whole contrast story assumes a
+ *  controlled surface, s0 through s3 — every role colour's ratio is
+ *  computed against a known background. Over imagery there is no known
+ *  background. In one orthophoto a black shadow and a snowfield are
+ *  adjacent pixels, so no single ink colour is legible and no contrast
+ *  ratio can be asserted about one. The answer is a PAIR that spans the
+ *  luminance range: over a light backing the halo carries the contrast,
+ *  over a dark one the ink does. Neither half works alone, which is why
+ *  they are applied together by one class.
+ *
+ *  NOT THEMED, on purpose. A satellite image does not get lighter because
+ *  the user chose light mode. Theming this pair would make it track the
+ *  app's surface, which is precisely the background it is NOT over.
+ *  Usage:
+ *    <figcaption class="juno-canvas-ink">Sector 7 · 1.2 km</figcaption>
+ *    <svg class="juno-canvas-ink"><path class="juno-canvas-ink__stroke" …/></svg>
+ *    <div class="juno-canvas-scrim">…chrome floating over the content…</div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+/* Text. Four offset shadows rather than one blur: a blurred shadow fades at
+   the glyph's corners, which is exactly where a thin stroke needs the most
+   help, and it costs the same. `paint-order` is for SVG text, where a real
+   stroke is available and better. */
+.juno-canvas-ink {
+  color: var(--juno-ink-canvas-ink);
+  paint-order: stroke fill;
+  stroke: var(--juno-ink-canvas-halo);
+  stroke-width: var(--juno-ink-canvas-halo-width);
+  text-shadow:
+    var(--juno-ink-canvas-halo-width) 0 0 var(--juno-ink-canvas-halo),
+    calc(-1 * var(--juno-ink-canvas-halo-width)) 0 0 var(--juno-ink-canvas-halo),
+    0 var(--juno-ink-canvas-halo-width) 0 var(--juno-ink-canvas-halo),
+    0 calc(-1 * var(--juno-ink-canvas-halo-width)) 0 var(--juno-ink-canvas-halo);
+}
+
+/* Display sizes: a 2px halo reads as a hairline against a heavier stroke. */
+.juno-canvas-ink--lg {
+  stroke-width: var(--juno-ink-canvas-halo-width-lg);
+  text-shadow:
+    var(--juno-ink-canvas-halo-width-lg) 0 0 var(--juno-ink-canvas-halo),
+    calc(-1 * var(--juno-ink-canvas-halo-width-lg)) 0 0 var(--juno-ink-canvas-halo),
+    0 var(--juno-ink-canvas-halo-width-lg) 0 var(--juno-ink-canvas-halo),
+    0 calc(-1 * var(--juno-ink-canvas-halo-width-lg)) 0 var(--juno-ink-canvas-halo);
+}
+
+/* Vector ink — measurement lines, selection outlines. Two passes: the halo
+   is the same path drawn wider underneath. In SVG give the halo element
+   this class and the mark element __stroke; in canvas, stroke twice. */
+.juno-canvas-ink__halo {
+  fill: none;
+  stroke: var(--juno-ink-canvas-halo);
+  stroke-width: calc(var(--juno-ink-canvas-halo-width) * 2);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.juno-canvas-ink__stroke {
+  fill: none;
+  stroke: var(--juno-ink-canvas-ink);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Status over canvas. The themed role hues are chosen against s0–s3 and wash
+   out over a saturated backdrop, so these are the same hues at raised chroma.
+   Louder than the panel roles by design — they will look wrong on a panel. */
+.juno-canvas-ink--nominal { color: var(--juno-ink-vivid-nominal); }
+.juno-canvas-ink--active { color: var(--juno-ink-vivid-active); }
+.juno-canvas-ink--target { color: var(--juno-ink-vivid-target); }
+.juno-canvas-ink--caution { color: var(--juno-ink-vivid-caution); }
+.juno-canvas-ink--warning { color: var(--juno-ink-vivid-warning); }
+
+/* Chrome floating over live content. Deliberately NOT --juno-opacity-scrim
+   (0.62): that value suppresses a modal's background, and here the background
+   is the thing the chrome is annotating — greying it out defeats the purpose. */
+.juno-canvas-scrim {
+  background: color-mix(in srgb, var(--juno-s0) calc(var(--juno-ink-canvas-scrim) * 100%), transparent);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+
+/* A translucent bar over moving content is the case where reduced
+   transparency matters most — the motion behind the text is the problem, not
+   the blur. Fall back to the opaque surface. */
+@media (prefers-reduced-transparency: reduce) {
+  .juno-canvas-scrim {
+    background: var(--juno-s0);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}

package/src/css/components/dock.css

@@ -29,6 +29,55 @@
      media query. */
   --juno-dock-scale: 1;
 
+  /* ── Horizontal budget contract ──────────────────────────────────────
+     Published so a consumer's capacity planner ("how many items fit, and
+     do they still hold a tap target?") reads junoui's real geometry
+     instead of re-deriving it from the numbers in this file. Two
+     consumers had derived it by hand, twice, in prose — and both had
+     drifted: they subtracted 12px of inline padding where the pill
+     actually spends 8, so their per-item width came out ~0.8px low at
+     every viewport (20260826-027).
+
+     --juno-dock-items      the item budget. junoui does not enforce it —
+                            __item is `flex: 1 1 0`, so the layout divides
+                            by however many items are present — it is the
+                            number the DERIVATIONS below are about, and the
+                            consumer sets it to what it renders.
+     --juno-dock-item-inline  the width one item gets. A prediction of what
+                            the flex layout produces, not an input to it;
+                            asserted against the measured box in the test
+                            suite so it cannot drift from the layout.
+     --juno-dock-fit-inline  the narrowest viewport at which every item
+                            still holds --juno-size-tap-comfortable. Use it
+                            in a media query and DROP an item; that is the
+                            answer junoui can give exactly.
+
+     A SCALE floor (44px / the item's width) is deliberately not published:
+     it is a ratio of two lengths, and CSS cannot divide by a length. A
+     consumer that must scale rather than drop compares
+     --juno-dock-item-inline against --juno-size-tap-comfortable itself.
+
+     The three inline terms are declared ONCE here and consumed by both the
+     variants' own margin/padding/border and the sums below, so the budget
+     cannot disagree with the bar it describes — the same reason
+     --juno-dock-edge-offset exists (20260815-055). The base bar is
+     full-bleed with a top-edge border only, so all three are zero; --pill
+     and --float set them. */
+  --juno-dock-items: 5;
+  --juno-dock-margin-inline: 0px;
+  --juno-dock-pad-inline: 0px;
+  --juno-dock-border-inline: 0px;
+  --juno-dock-chrome-inline: calc(
+    2 * (var(--juno-dock-margin-inline) + var(--juno-dock-pad-inline) + var(--juno-dock-border-inline))
+  );
+  --juno-dock-avail: 100vw;
+  --juno-dock-item-inline: calc(
+    (var(--juno-dock-avail) - var(--juno-dock-chrome-inline)) / var(--juno-dock-items)
+  );
+  --juno-dock-fit-inline: calc(
+    var(--juno-dock-items) * var(--juno-size-tap-comfortable) + var(--juno-dock-chrome-inline)
+  );
+
   position: sticky;
   inset-block-end: 0;
   z-index: var(--juno-z-raised);
@@ -123,16 +172,21 @@
 .juno-dock--pill {
   --juno-role: var(--juno-active);
 
+  /* the three inline terms the budget contract sums — see .juno-dock */
+  --juno-dock-margin-inline: var(--juno-space-12);
+  --juno-dock-pad-inline: var(--juno-space-4);
+  --juno-dock-border-inline: var(--juno-border-width-1);
+
   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);
+  margin: 0 var(--juno-dock-margin-inline) var(--juno-dock-edge-offset);
+  padding: var(--juno-dock-pad-inline);
   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: var(--juno-dock-border-inline) solid var(--juno-border);
   border-radius: 999px;
   box-shadow: var(--juno-shadow-2);
 }
@@ -226,17 +280,22 @@
    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 {
+  /* the three inline terms the budget contract sums — see .juno-dock */
+  --juno-dock-margin-inline: var(--juno-space-12);
+  --juno-dock-pad-inline: var(--juno-space-4);
+  --juno-dock-border-inline: var(--juno-border-width-1);
+
   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);
+  margin: 0 var(--juno-dock-margin-inline) var(--juno-dock-edge-offset);
+  padding: var(--juno-dock-pad-inline);
   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: var(--juno-dock-border-inline) solid var(--juno-border);
   border-radius: 999px;
   box-shadow: var(--juno-shadow-2);
 }

package/src/css/components/fold-slot.css

@@ -12,17 +12,44 @@
  *  gap, the folded slot still occupies one gap — name it in
  *  --juno-fold-gap and the fold swallows it with a negative margin.
  *
+ *  COMPOSITION. The canonical use puts .juno-fold on an element that is
+ *  already a component — a .juno-pillbar__item, a .juno-btn, a .juno-chip
+ *  — because that is where the capsule chrome (tap floor, padding, hover,
+ *  focus ring, aria-pressed) lives. Two things follow, and both are
+ *  load-bearing rather than defensive:
+ *
+ *  1. The fold's own declarations are stated at ATTRIBUTE specificity
+ *     (0,2,0), on both branches of data-juno-in, i.e. always. A component
+ *     class is (0,1,0), and `transition` is a SHORTHAND: a later rule does
+ *     not add to the list, it replaces it. Measured in Chromium against the
+ *     built bundle, before this was raised: on a
+ *     .juno-fold.juno-pillbar__item, transition-property resolved to
+ *     `color, background-color` — pillbar.css sorts after this file, so the
+ *     fold had no transition at all and jumped shut instead of folding.
+ *     inline-size and overflow would lose the same way to a component that
+ *     sets either.
+ *
+ *  2. Owning `transition` means owning ALL of it, so the capsule chrome
+ *     properties are in the fold's list too, at the quick duration the
+ *     components themselves use. Dropping them would trade a broken fold
+ *     for a broken hover.
+ *
+ *  Which floors the fold RELEASES when folded — see the folded rule below:
+ *  min-inline-size, padding-inline, border-inline-width. Those are exactly
+ *  the three inputs that can hold a border-box inline size above zero.
+ *
  *  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>
+ *      <button class="juno-fold juno-pillbar__item" 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[data-juno-in],
+.juno-fold:not([data-juno-in]) {
   --juno-fold-size: var(--juno-size-tap-comfortable);
   --juno-fold-gap: 0px;
 
@@ -31,13 +58,32 @@
   overflow: hidden;
   transition:
     inline-size var(--juno-motion-duration-base) var(--juno-motion-ease-standard),
+    min-inline-size var(--juno-motion-duration-base) var(--juno-motion-ease-standard),
+    padding var(--juno-motion-duration-base) var(--juno-motion-ease-standard),
+    border-width 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);
+    visibility var(--juno-motion-duration-base) var(--juno-motion-ease-standard),
+    color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    background-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
 }
 
+/* Folded away. A min-* floor clamps the USED value whichever rule won the
+   cascade, and a border-box inline size can never resolve below its own
+   padding plus border — so a composed capsule holds the slot open however
+   hard the fold pushes. Measured against the built bundle, composed with
+   .juno-pillbar__item at a 390px viewport: 44px with both floors in place
+   (the tap target), 20px with min-inline-size released (the padding alone),
+   0px with all of them released.
+   min-inline-size is in the transition list above for the OPENING half:
+   released to 0 it would otherwise snap back to the capsule's tap floor the
+   instant data-juno-in returns, and the used width — max(inline-size,
+   min-inline-size) — would jump to full width with nothing to animate. */
 .juno-fold:not([data-juno-in]) {
   inline-size: 0;
+  min-inline-size: 0;
+  padding-inline: 0;
+  border-inline-width: 0;
   margin-inline-end: calc(-1 * var(--juno-fold-gap));
   opacity: 0;
   visibility: hidden;