@junoput01/junoui 0.3.0 → 0.5.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,13 +82,41 @@
   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; }
 

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);
 }
 

package/src/icons/cloud-slash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M56.88,31.93A12,12,0,1,0,39.12,48.07L71.79,84A68,68,0,0,0,72,220h88a91.26,91.26,0,0,0,30.66-5.24l8.46,9.31a12,12,0,0,0,17.76-16.14ZM160,196H72a44,44,0,0,1-1.8-87.95A91.91,91.91,0,0,0,68,128a12,12,0,0,0,24,0,68.22,68.22,0,0,1,2.66-18.84l77.88,85.67A68.67,68.67,0,0,1,160,196Zm92-68a91.32,91.32,0,0,1-17.53,54,12,12,0,1,1-19.41-14.11,68,68,0,0,0-89.57-98.53,12,12,0,0,1-12.2-20.66A92,92,0,0,1,252,128Z"/></svg>

package/tools/subset-sprite.mjs

@@ -0,0 +1,56 @@
+// ════════════════════════════════════════════════════════════════════════
+//  junoui — icon sprite subsetter (build tooling for consumers)
+// ════════════════════════════════════════════════════════════════════════
+//  The sprite ships every icon junoui has (65 and growing). An app that
+//  inlines it — which is what Safari's flaky external-<use> rendering forces
+//  (see scripts/build-icons.mjs) — therefore ships every icon in its main
+//  bundle, not the ~20 it draws. This module is the missing half: a pure,
+//  dependency-free subsetter a consumer's build step (Vite/webpack plugin,
+//  npm script) runs over the shipped sprite.
+//
+//  Node-only tooling, deliberately NOT part of the browser CSS/JS surface:
+//  subsetting at runtime would defeat the point.
+//
+//      import { subsetSprite, spriteSymbolNames } from '@junoput01/junoui/subset';
+//      const svg = subsetSprite(readFileSync(spritePath, 'utf8'), ['gear', 'x']);
+//
+//  Contract: names are bare icon names ('gear'), never prefixed ids. The
+//  result keeps the sprite's banner and wrapper attributes verbatim, so the
+//  license notice travels with every subset (the icons are MIT Phosphor and
+//  the notice is a condition of redistribution).
+// ════════════════════════════════════════════════════════════════════════
+
+const SYMBOL_RE = /<symbol\s+id="juno-i-([^"]+)"[\s\S]*?<\/symbol>/g;
+
+/** Every icon name the sprite defines, in document order. */
+export function spriteSymbolNames(sprite) {
+  return [...sprite.matchAll(SYMBOL_RE)].map((m) => m[1]);
+}
+
+/**
+ * The same sprite carrying only `names`.
+ *
+ * Throws on a name the sprite does not define: a silently dropped icon
+ * renders as an empty <svg> in the consuming app — visible to nobody until a
+ * user reports a blank space — so an unknown name is a build failure, not a
+ * warning. Unused names in the sprite are simply omitted; order follows the
+ * sprite, not the request, so the output is stable under a reordered list.
+ */
+export function subsetSprite(sprite, names) {
+  const wanted = new Set(names);
+  const have = new Set(spriteSymbolNames(sprite));
+  const missing = [...wanted].filter((n) => !have.has(n));
+  if (missing.length) {
+    throw new Error(
+      `subsetSprite: the sprite defines no icon named ${missing.map((n) => `'${n}'`).join(', ')} — ` +
+        `available: ${[...have].join(', ')}`,
+    );
+  }
+  const kept = [];
+  for (const m of sprite.matchAll(SYMBOL_RE)) if (wanted.has(m[1])) kept.push(m[0]);
+  // Keep everything outside the symbols verbatim (banner + <svg> open/close),
+  // so the license notice and the wrapper's fill/display attributes survive.
+  const head = sprite.slice(0, sprite.indexOf('<symbol'));
+  const tail = sprite.slice(sprite.lastIndexOf('</symbol>') + '</symbol>'.length);
+  return `${head}${kept.join('\n')}${tail}`;
+}