@junoput01/junoui 0.2.0 → 0.4.0

package/src/css/components/thumb.css

@@ -9,10 +9,22 @@
  *    <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 {
@@ -23,12 +35,30 @@
   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");
@@ -67,3 +97,35 @@
   block-size: 100%;
   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;
+}

package/src/css/components/toast.css

@@ -91,7 +91,11 @@
 @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;
   }
 

package/src/css/density.css

@@ -38,3 +38,25 @@
   --juno-tile-min: 108px;
   --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);
+  }
+}

package/src/css/layout.css

@@ -82,18 +82,108 @@
   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; } }

package/src/css/utilities.css

@@ -40,8 +40,11 @@
   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);
 }