@junoput01/junoui 0.4.0 → 0.6.0

package/src/css/base.css

@@ -19,13 +19,48 @@
   /* Floating-nav scroll clearance — a page/scroller that a fixed dock or
      pillbar floats over reserves this much room at its foot so the last row
      clears the overlay. Consumers write `padding-block-end:
-     var(--juno-dock-clearance)` and stay correct when the dock geometry
-     changes — no hand-rolled calc() per app. Web-only (they carry env()), so
-     they live in the CSS layer, not the cross-platform token set.
-     --juno-dock-clearance ≈ pill height + bottom margin + breathing room;
-     --juno-pillbar-clearance suits the shorter centered pill. */
-  --juno-dock-clearance: calc(var(--juno-space-72) + var(--juno-space-20) + env(safe-area-inset-bottom, 0px));
-  --juno-pillbar-clearance: calc(var(--juno-space-72) + env(safe-area-inset-bottom, 0px));
+     var(--juno-dock-clearance)`. Web-only (they carry env()), so they live in
+     the CSS layer, not the cross-platform token set.
+
+     DERIVED, not constant. These used to be `space-72 + space-20 + env()`,
+     which promised in this very comment to "stay correct when the dock
+     geometry changes" and could not: the floating pill measures 62px with the
+     default 44px bubble, and junoui explicitly invites a consumer to
+     parameterize that bubble (--juno-size-tap-comfortable). Past a 58px bubble
+     the old constant reserved LESS than the pill's own height plus its margin
+     — content hid under the dock, silently, on exactly the consumers who took
+     the invitation (20260815-026).
+
+     So the parts are named and the arithmetic is visible:
+       --juno-dock-h        the pill's laid-out height: the bubble, the item's
+                            padding-block, the pill's own padding, its border.
+       * -clearance-scale   consumers that SHRINK the bar while scrolling
+                            reserve at the small size, not the live one — a
+                            reservation that tracks a value which changes after
+                            the last scroll event relayouts content under a
+                            finger that has already stopped moving. Default 1.
+       + space-16 + env()   the pill's own bottom margin (dock.css), additive
+                            because a floating element sits OFF the edge —
+                            docs/ios-conformance.md, "max() vs addition".
+       + space-8            breathing room, so the last row is not flush. */
+  --juno-dock-h: calc(
+    var(--juno-size-tap-comfortable) + 4 * var(--juno-space-4) + 2 * var(--juno-border-width-1)
+  );
+  --juno-dock-clearance-scale: 1;
+  --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)
+  );
+
+  /* The pillbar is the same shape one size down: no bubble, so its height is
+     the tap target plus its own padding and border. */
+  --juno-pillbar-h: calc(
+    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)
+  );
 
   /* JS-readable motion contract. CSS-only `prefers-reduced-motion` never reaches
      imperative JS (scrollTo/scrollIntoView smooth behavior, rAF-driven transforms,
@@ -127,8 +162,11 @@ code, kbd, samp, pre { font-family: var(--juno-font-family-mono); }
      is harmless either way: hold text-entry controls (.juno-input covers input,
      textarea and the select's inner control) at a 16px floor on touch. max()
      keeps the floor even under a scaled-down --juno-font-scale, and still grows
-     when scaled up. */
-  .juno-input { font-size: max(16px, var(--juno-font-size-16)); }
+     when scaled up.
+     THE RULE ITSELF LIVES IN components/input.css, not here: a media query adds
+     no specificity, so this file's `.juno-input` would lose to input.css's own
+     `.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
@@ -229,17 +267,11 @@ code, kbd, samp, pre { font-family: var(--juno-font-family-mono); }
   :root { --juno-border: var(--juno-border-strong); }
 }
 
-/* Windows High Contrast / forced-colors: opt into the system palette so
-   borders and focus stay visible when our colors are overridden. */
-@media (forced-colors: active) {
-  *:focus-visible { outline-color: Highlight; }
-
-  .juno-badge,
-  .juno-btn,
-  .juno-card,
-  .juno-readout { border: 1px solid CanvasText; }
-  .juno-badge { forced-color-adjust: none; } /* keep status fill meaningful */
-}
+/* Windows High Contrast / forced-colors: the opt-in lives in
+   overrides.css, NOT here. A media query adds no specificity, and this file is
+   bundled BEFORE components/, so `.juno-btn { border: … }` in button.css beat
+   the forced-colors border every time — same 0,1,0 selector, later in the
+   bundle. See src/css/overrides.css and ticket 20260815-029. */
 
 /* ── iOS standalone letterbox unlock ─────────────────────────────────────────
    iOS WebKit (observed through 26.6, iPhone 16 Pro, iOS 18.7) sizes a
@@ -288,3 +320,30 @@ code, kbd, samp, pre { font-family: var(--juno-font-family-mono); }
     }
   }
 }
+
+/* ── Popover API absent (Safari/iOS < 17.0) ──────────────────────────────────
+   junoui's overlay surfaces are built on the native Popover API. Without it
+   `popovertarget` does nothing, so they cannot open — an inconvenience. The
+   part that is a BUG is that the UA rule which hides a closed popover
+   (`[popover]:not(:popover-open) { display: none }`) does not exist either, so
+   the panel participates in layout: .juno-menu and .juno-popover are
+   `position: fixed` with `opacity: 0` and no pointer-events reset, i.e. a
+   256-280px INVISIBLE panel parked at its static position, swallowing taps on
+   whatever it covers. (.juno-tooltip__bubble escapes it — it inherits
+   `pointer-events: none` from the CSS-only tooltip rule — and is listed anyway
+   so the set matches the docs.)
+
+   So: hide them. Absent beats invisibly-present. Apps detect the same condition
+   with CSS.supports('selector(:popover-open)') and render a fallback.
+
+   @supports selector() is itself Safari 14.1+; below that this condition is
+   invalid, the block is skipped, and behaviour is what it is today. Fail-open,
+   and far below any supported floor. Guards live here rather than per component
+   so the next popover-based component inherits it — see docs/browser-support.md
+   for the rule about when a feature gap earns a guard at all (functional
+   failures only; a missing animation does not get one). */
+@supports not selector(:popover-open) {
+  .juno-menu[popover],
+  .juno-popover[popover],
+  .juno-tooltip__bubble[popover] { display: none; }
+}

package/src/css/components/input.css

@@ -28,6 +28,18 @@
   color: var(--juno-data);
 }
 
+/* The iOS focus-zoom floor, and it has to live HERE, not in base.css's
+   `@media (pointer: coarse)` block where it was written. A media query adds no
+   specificity, so `.juno-input { font-size: var(--juno-font-size-14) }` above —
+   same 0,1,0 selector, later in the bundle (base.css sorts before components/)
+   — simply won it, and the floor never applied on any touch device. Nothing
+   caught it because the suite had no coarse-pointer project until 20260815-006
+   added one; the numeric assertion in test/visual/tap-targets.spec.mjs is what
+   surfaced it. See base.css for the sourcing caveat on the behavior itself. */
+@media (pointer: coarse) {
+  .juno-input { font-size: max(16px, var(--juno-font-size-16)); }
+}
+
 .juno-input--sans { font-family: var(--juno-font-family-sans); }
 
 .juno-input::placeholder { color: var(--juno-muted); }

package/src/css/components/pillbar.css

@@ -257,7 +257,7 @@
          <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 -->
+         <div>\3c !-- single wrapper, any element -->
            …the usual __item / __sep / __input children…
          </div>
        </div>

package/src/css/overrides.css

@@ -0,0 +1,51 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Overrides — cross-cutting gates, bundled LAST
+ * ════════════════════════════════════════════════════════════════════
+ *  A @media or @supports block adds NO specificity. So a gate written in
+ *  base.css — which the bundler emits before components/ — loses to any
+ *  component rule declaring the same property on the same selector, purely
+ *  on source order, and loses SILENTLY: the gate looks right in the file it
+ *  was written in, and there is no error anywhere.
+ *
+ *  Four instances of that shipped before this file existed (2026-08-15):
+ *    - .juno-input's 16px iOS focus-zoom floor, beaten by input.css. The floor
+ *      never applied on any touch device, in any release (20260815-011).
+ *    - the forced-colors border below, beaten by button.css / badge.css /
+ *      card.css (20260815-029).
+ *    - the Popover fallback, which happens to win today only because nothing
+ *      later declares `display` on those selectors — pinned by a test rather
+ *      than by structure (20260815-013).
+ *
+ *  So: gates whose whole job is to BEAT a component default live here, after
+ *  everything they guard. Same reasoning the bundler already applies to
+ *  utilities.css (role helpers must outrank component defaults) — see
+ *  scripts/bundle-css.mjs.
+ *
+ *  What does NOT belong here: a gate that only has to beat the UA or another
+ *  rule in its own file. Keep those next to what they modify; this file is for
+ *  the cross-file case, or it becomes a dumping ground and the cascade gets
+ *  harder to read rather than easier.
+ *
+ *  A build test (test/build.test.mjs) asserts the bundle contains no gated
+ *  declaration that a later ungated rule overrides at equal-or-lower
+ *  specificity. It asserts an EMPTY SET — no allowlist, because an allowlist
+ *  is where violations go to be forgotten.
+ * ════════════════════════════════════════════════════════════════════ */
+
+/* Windows High Contrast / forced-colors: opt into the system palette so
+   borders and focus stay visible when the user's palette replaces ours.
+
+   .juno-badge additionally sets `forced-color-adjust: none` to keep its status
+   fill meaningful — and that opt-out is why the badge was the one element where
+   the lost cascade actually reached the screen: it also disables the UA's own
+   repaint, which was silently rescuing .juno-btn and .juno-card. Measured, not
+   inferred (20260815-029). */
+@media (forced-colors: active) {
+  *:focus-visible { outline-color: Highlight; }
+
+  .juno-badge,
+  .juno-btn,
+  .juno-card,
+  .juno-readout { border: 1px solid CanvasText; }
+  .juno-badge { forced-color-adjust: none; } /* keep status fill meaningful */
+}

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}`;
+}