@junoput01/junoui 0.2.0 → 0.4.0

package/src/css/components/dock.css

@@ -21,6 +21,14 @@
 .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);
@@ -29,6 +37,9 @@
   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 {
@@ -41,6 +52,13 @@
   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);
@@ -72,3 +90,320 @@
   outline: var(--juno-border-width-2) solid var(--juno-active);
   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;
+}

package/src/css/components/drawer.css

@@ -10,6 +10,12 @@
  *  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 {
@@ -55,15 +61,24 @@
 .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); }
@@ -72,6 +87,28 @@
   .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. */

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

@@ -0,0 +1,44 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  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;
+}

package/src/css/components/icon-loader.css

@@ -0,0 +1,67 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  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;
+}

package/src/css/components/icon.css

@@ -16,11 +16,13 @@
  * ════════════════════════════════════════════════════════════════════ */
 
 .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;