@junoput01/junoui 0.3.0 → 0.5.0

package/src/css/components/load-state.css

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

package/src/css/components/loader.css

@@ -41,6 +41,12 @@
   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;

package/src/css/components/menu.css

@@ -65,6 +65,10 @@
   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;

package/src/css/components/modal.css

@@ -45,6 +45,11 @@
 }
 
 .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);
 }
@@ -60,6 +65,7 @@
 .juno-modal::backdrop {
   background: rgb(0 0 0);
   opacity: var(--juno-opacity-scrim);
+  -webkit-backdrop-filter: blur(1.5px);
   backdrop-filter: blur(1.5px);
 }
 
@@ -100,7 +106,19 @@
 
 .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);
@@ -151,9 +169,12 @@
     .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 */

package/src/css/components/navbar.css

@@ -16,7 +16,7 @@
  *      </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>
  * ════════════════════════════════════════════════════════════════════ */
@@ -97,6 +97,10 @@
   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));

package/src/css/components/pillbar.css

@@ -19,23 +19,38 @@
  *        <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;
@@ -46,8 +61,8 @@
   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;
@@ -94,6 +109,54 @@
   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);
@@ -117,10 +180,147 @@
   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;
   }
 }

package/src/css/components/reload.css

@@ -0,0 +1,48 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  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. */

package/src/css/components/skeleton.css

@@ -2,14 +2,20 @@
  *  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>
  * ════════════════════════════════════════════════════════════════════ */
 
@@ -17,11 +23,27 @@
   --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;
 }
 
@@ -45,18 +67,24 @@
   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%);
   }
 }

package/src/css/components/tabs.css

@@ -29,6 +29,11 @@
   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;