@junoput01/junoui 0.5.0 → 0.7.0

package/src/css/components/dock.css

@@ -29,6 +29,55 @@
      media query. */
   --juno-dock-scale: 1;
 
+  /* ── Horizontal budget contract ──────────────────────────────────────
+     Published so a consumer's capacity planner ("how many items fit, and
+     do they still hold a tap target?") reads junoui's real geometry
+     instead of re-deriving it from the numbers in this file. Two
+     consumers had derived it by hand, twice, in prose — and both had
+     drifted: they subtracted 12px of inline padding where the pill
+     actually spends 8, so their per-item width came out ~0.8px low at
+     every viewport (20260826-027).
+
+     --juno-dock-items      the item budget. junoui does not enforce it —
+                            __item is `flex: 1 1 0`, so the layout divides
+                            by however many items are present — it is the
+                            number the DERIVATIONS below are about, and the
+                            consumer sets it to what it renders.
+     --juno-dock-item-inline  the width one item gets. A prediction of what
+                            the flex layout produces, not an input to it;
+                            asserted against the measured box in the test
+                            suite so it cannot drift from the layout.
+     --juno-dock-fit-inline  the narrowest viewport at which every item
+                            still holds --juno-size-tap-comfortable. Use it
+                            in a media query and DROP an item; that is the
+                            answer junoui can give exactly.
+
+     A SCALE floor (44px / the item's width) is deliberately not published:
+     it is a ratio of two lengths, and CSS cannot divide by a length. A
+     consumer that must scale rather than drop compares
+     --juno-dock-item-inline against --juno-size-tap-comfortable itself.
+
+     The three inline terms are declared ONCE here and consumed by both the
+     variants' own margin/padding/border and the sums below, so the budget
+     cannot disagree with the bar it describes — the same reason
+     --juno-dock-edge-offset exists (20260815-055). The base bar is
+     full-bleed with a top-edge border only, so all three are zero; --pill
+     and --float set them. */
+  --juno-dock-items: 5;
+  --juno-dock-margin-inline: 0px;
+  --juno-dock-pad-inline: 0px;
+  --juno-dock-border-inline: 0px;
+  --juno-dock-chrome-inline: calc(
+    2 * (var(--juno-dock-margin-inline) + var(--juno-dock-pad-inline) + var(--juno-dock-border-inline))
+  );
+  --juno-dock-avail: 100vw;
+  --juno-dock-item-inline: calc(
+    (var(--juno-dock-avail) - var(--juno-dock-chrome-inline)) / var(--juno-dock-items)
+  );
+  --juno-dock-fit-inline: calc(
+    var(--juno-dock-items) * var(--juno-size-tap-comfortable) + var(--juno-dock-chrome-inline)
+  );
+
   position: sticky;
   inset-block-end: 0;
   z-index: var(--juno-z-raised);
@@ -123,16 +172,21 @@
 .juno-dock--pill {
   --juno-role: var(--juno-active);
 
+  /* the three inline terms the budget contract sums — see .juno-dock */
+  --juno-dock-margin-inline: var(--juno-space-12);
+  --juno-dock-pad-inline: var(--juno-space-4);
+  --juno-dock-border-inline: var(--juno-border-width-1);
+
   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);
+  margin: 0 var(--juno-dock-margin-inline) var(--juno-dock-edge-offset);
+  padding: var(--juno-dock-pad-inline);
   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: var(--juno-dock-border-inline) solid var(--juno-border);
   border-radius: 999px;
   box-shadow: var(--juno-shadow-2);
 }
@@ -226,17 +280,22 @@
    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 {
+  /* the three inline terms the budget contract sums — see .juno-dock */
+  --juno-dock-margin-inline: var(--juno-space-12);
+  --juno-dock-pad-inline: var(--juno-space-4);
+  --juno-dock-border-inline: var(--juno-border-width-1);
+
   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);
+  margin: 0 var(--juno-dock-margin-inline) var(--juno-dock-edge-offset);
+  padding: var(--juno-dock-pad-inline);
   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: var(--juno-dock-border-inline) solid var(--juno-border);
   border-radius: 999px;
   box-shadow: var(--juno-shadow-2);
 }

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

@@ -12,17 +12,44 @@
  *  gap, the folded slot still occupies one gap — name it in
  *  --juno-fold-gap and the fold swallows it with a negative margin.
  *
+ *  COMPOSITION. The canonical use puts .juno-fold on an element that is
+ *  already a component — a .juno-pillbar__item, a .juno-btn, a .juno-chip
+ *  — because that is where the capsule chrome (tap floor, padding, hover,
+ *  focus ring, aria-pressed) lives. Two things follow, and both are
+ *  load-bearing rather than defensive:
+ *
+ *  1. The fold's own declarations are stated at ATTRIBUTE specificity
+ *     (0,2,0), on both branches of data-juno-in, i.e. always. A component
+ *     class is (0,1,0), and `transition` is a SHORTHAND: a later rule does
+ *     not add to the list, it replaces it. Measured in Chromium against the
+ *     built bundle, before this was raised: on a
+ *     .juno-fold.juno-pillbar__item, transition-property resolved to
+ *     `color, background-color` — pillbar.css sorts after this file, so the
+ *     fold had no transition at all and jumped shut instead of folding.
+ *     inline-size and overflow would lose the same way to a component that
+ *     sets either.
+ *
+ *  2. Owning `transition` means owning ALL of it, so the capsule chrome
+ *     properties are in the fold's list too, at the quick duration the
+ *     components themselves use. Dropping them would trade a broken fold
+ *     for a broken hover.
+ *
+ *  Which floors the fold RELEASES when folded — see the folded rule below:
+ *  min-inline-size, padding-inline, border-inline-width. Those are exactly
+ *  the three inputs that can hold a border-box inline size above zero.
+ *
  *  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>
+ *      <button class="juno-fold juno-pillbar__item" 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[data-juno-in],
+.juno-fold:not([data-juno-in]) {
   --juno-fold-size: var(--juno-size-tap-comfortable);
   --juno-fold-gap: 0px;
 
@@ -31,13 +58,32 @@
   overflow: hidden;
   transition:
     inline-size var(--juno-motion-duration-base) var(--juno-motion-ease-standard),
+    min-inline-size var(--juno-motion-duration-base) var(--juno-motion-ease-standard),
+    padding var(--juno-motion-duration-base) var(--juno-motion-ease-standard),
+    border-width 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);
+    visibility var(--juno-motion-duration-base) var(--juno-motion-ease-standard),
+    color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    background-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
 }
 
+/* Folded away. A min-* floor clamps the USED value whichever rule won the
+   cascade, and a border-box inline size can never resolve below its own
+   padding plus border — so a composed capsule holds the slot open however
+   hard the fold pushes. Measured against the built bundle, composed with
+   .juno-pillbar__item at a 390px viewport: 44px with both floors in place
+   (the tap target), 20px with min-inline-size released (the padding alone),
+   0px with all of them released.
+   min-inline-size is in the transition list above for the OPENING half:
+   released to 0 it would otherwise snap back to the capsule's tap floor the
+   instant data-juno-in returns, and the used width — max(inline-size,
+   min-inline-size) — would jump to full width with nothing to animate. */
 .juno-fold:not([data-juno-in]) {
   inline-size: 0;
+  min-inline-size: 0;
+  padding-inline: 0;
+  border-inline-width: 0;
   margin-inline-end: calc(-1 * var(--juno-fold-gap));
   opacity: 0;
   visibility: hidden;

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/components/segmented.css

@@ -38,11 +38,20 @@
   opacity: 0;
 }
 
-/* the pill — a span after the radio, or the aria-pressed button itself */
+/* the pill — a span after the radio, or the aria-pressed button itself.
+   The tap floor is on the PAINTED box, not on the label that wraps it: the
+   label is a bare inline-flex and takes its height from this. Segmented is a
+   phone-first control and is routinely the only control on a whole settings
+   section, so it holds --juno-size-tap-min like .juno-btn does — 24px (WCAG
+   2.2 AA, 2.5.8) on a fine pointer, promoted to the 44px comfortable target
+   under (pointer: coarse) by base.css. Without it the pill computed ~25px
+   from its padding alone, which is the AA floor by accident and nothing on
+   touch. See 20260826-025. */
 .juno-seg__opt input + span,
 button.juno-seg__opt {
   display: inline-flex;
   align-items: center;
+  min-block-size: var(--juno-size-tap-min);
   gap: var(--juno-gap-control);
   font-family: var(--juno-font-family-sans);
   font-size: var(--juno-font-size-11);
@@ -90,7 +99,11 @@ button.juno-seg__opt:disabled {
   cursor: not-allowed;
 }
 
-/* Small — matches .juno-btn--sm; for dense toolbars */
+/* Small — dense toolbars: less type, tighter padding. UNLIKE .juno-btn--sm it
+   does NOT drop below the tap floor, which the base rule above holds: --sm is a
+   density modifier here, not an opt-out of the touch target. A segmented row is
+   often the only control on a settings section, so a sub-tap variant of it has
+   no safe use on a phone. */
 .juno-seg--sm .juno-seg__opt input + span,
 .juno-seg--sm > button.juno-seg__opt {
   font-size: var(--juno-font-size-10);

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/tools/testing.mjs

@@ -0,0 +1,177 @@
+// ════════════════════════════════════════════════════════════════════════
+//  junoui/testing — guards a consumer can run against its own source
+// ════════════════════════════════════════════════════════════════════════
+//  Framework-agnostic: throws an Error with a readable message, so it works
+//  under vitest, node:test, jest or a plain script. No dependencies.
+//
+//    import { assertJunoClasses } from 'junoui/testing';
+//    assertJunoClasses(['src/**/*.tsx']);
+//
+//  WHAT IT ANSWERS, and what it does not. It answers "junoui defines a rule
+//  mentioning this class". It does not answer "the class does what your
+//  component assumes" — a class that exists but was repurposed upstream
+//  passes. What it catches with certainty is a name that matches NOTHING,
+//  which is the whole of the defect it was written for: eleven such names
+//  once compiled silently in a consumer and rendered a phone dialog as
+//  unstyled UA defaults, with its confirm button off the bottom of the screen.
+//
+//  See docs/conformance-kit.md.
+// ════════════════════════════════════════════════════════════════════════
+
+import { readFileSync, readdirSync, statSync } from 'node:fs';
+import { join, dirname, relative, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+
+/** `juno-` or the role form `juno--`, then BEM segments.
+ *  The leading boundary keeps `--juno-warning` out: a custom property is
+ *  always preceded by a hyphen and a class never is. Getting this wrong makes
+ *  the guard report components that have no defect. */
+const CLASS_RE = /(?<![-\w])juno-{1,2}[a-z0-9]+(?:[-_]{1,2}[a-z0-9]+)*/g;
+
+/** The manifest this build ships. */
+export function loadJunoClasses() {
+  return JSON.parse(readFileSync(join(HERE, '..', 'dist', 'classes.json'), 'utf8'));
+}
+
+/**
+ * Source with comments removed.
+ *
+ * Crude by design — it does not parse string literals, so a `//` inside one
+ * truncates that line. Worth the simplicity: a class name does not live inside
+ * a URL, and the alternative is a second implementation of a compiler to
+ * answer a question about strings. Comments MUST be stripped: a file that
+ * documents a typo in order to explain it would otherwise be reported for it.
+ */
+export function stripComments(source) {
+  return source.replace(/\/\*[\s\S]*?\*\//g, ' ').replace(/\/\/[^\n]*/g, ' ');
+}
+
+/**
+ * `juno-*` class names appearing in a source file, comments excluded.
+ *
+ * Matches anywhere in the code rather than parsing JSX: a class reaches the
+ * DOM through a template literal, a ternary or a helper as often as through a
+ * literal `className="…"`, and a matcher that only understood the literal form
+ * would skip the conditional ones — which is exactly where a typo hides.
+ */
+export function junoClassesIn(source) {
+  return [...new Set([...stripComments(source).matchAll(CLASS_RE)].map((m) => m[0]))].sort();
+}
+
+/** Minimal glob: supports `**`, `*` and `?`. No braces, no negation — a
+ *  consumer wanting more can pass an explicit file list instead. */
+function globToRegExp(pattern) {
+  let out = '';
+  for (let i = 0; i < pattern.length; i++) {
+    const c = pattern[i];
+    if (c === '*') {
+      if (pattern[i + 1] === '*') {
+        out += '.*';
+        i++;
+        if (pattern[i + 1] === '/') i++;
+      } else out += '[^/]*';
+    } else if (c === '?') out += '[^/]';
+    else out += c.replace(/[.+^${}()|[\]\\]/g, '\\$&');
+  }
+  return new RegExp('^' + out + '$');
+}
+
+function walk(dir, acc = []) {
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    if (entry.name === 'node_modules' || entry.name.startsWith('.')) continue;
+    const p = join(dir, entry.name);
+    if (entry.isDirectory()) walk(p, acc);
+    else acc.push(p);
+  }
+  return acc;
+}
+
+/** Files matching any of `patterns`, resolved from `cwd`. */
+export function resolveFiles(patterns, cwd = process.cwd()) {
+  const res = patterns.map(globToRegExp);
+  const roots = new Set();
+  for (const p of patterns) {
+    const literal = p.split(/[*?]/)[0];
+    const base = literal.endsWith('/') ? literal : dirname(literal);
+    roots.add(base === '' || base === '.' ? cwd : join(cwd, base));
+  }
+  const files = [];
+  for (const root of roots) {
+    let st;
+    try {
+      st = statSync(root);
+    } catch {
+      continue;
+    }
+    if (!st.isDirectory()) continue;
+    for (const f of walk(root)) {
+      const rel = relative(cwd, f).split(sep).join('/');
+      if (res.some((r) => r.test(rel))) files.push(rel);
+    }
+  }
+  return files.sort();
+}
+
+/**
+ * Throw if any file names a `juno-*` class this build does not define.
+ *
+ * @param patterns  globs or explicit paths, relative to `cwd`
+ * @param options.allowed  names the CONSUMER defines in its own stylesheet.
+ *   Each one is a claim the caller is making; check it against that stylesheet
+ *   rather than treating this as a waiver list.
+ * @param options.surface  `'all'` (default) or `'public'`.
+ *
+ *   'all' is the default deliberately, against this kit's own first proposal.
+ *   Measured on the 0.7.0 build: 310 classes have rules, 277 are named in
+ *   docs/. The 33-name difference is NOT an internals list — it is
+ *   `juno-sr-only`, `juno-bg-s0`, `juno-hide-below-lg`, `juno-eyebrow` and
+ *   friends, i.e. public utilities nobody wrote up. Defaulting to 'public'
+ *   would have failed consumers for using shipped API. 'public' remains
+ *   available for a stricter check, and the docs gap is junoui's to close.
+ */
+export function assertJunoClasses(patterns, options = {}) {
+  const { allowed = [], surface = 'all', cwd = process.cwd() } = options;
+  const manifest = loadJunoClasses();
+  // The claim is "junoui ships NOTHING by this name", not "this is not a
+  // class". A consumer writes `junoPx('juno-pillbar-gap')` and `#juno-i-${n}`,
+  // and no regex over source text can tell those from a class name — so a
+  // guard that only knew about classes would report correct code. Measured on
+  // a real consumer: 8 of 24 reports were tokens, an icon-id template and a
+  // keyframe, all of them names junoui does ship.
+  const shipped = [...manifest.keyframes, ...manifest.tokens, ...manifest.icons];
+  const defined = new Set(
+    surface === 'public'
+      ? [...manifest.public, ...manifest.roles, ...shipped]
+      : [...manifest.all, ...shipped],
+  );
+  const waived = new Set(allowed);
+
+  const files = Array.isArray(patterns)
+    ? resolveFiles(patterns, cwd)
+    : resolveFiles([patterns], cwd);
+  if (files.length === 0) {
+    // A guard that inspected nothing and passed is the failure mode this
+    // whole kit exists to stop.
+    throw new Error(
+      `assertJunoClasses: no files matched ${JSON.stringify(patterns)} under ${cwd} — ` +
+        `the check would have passed vacuously`,
+    );
+  }
+
+  const offenders = [];
+  for (const f of files) {
+    for (const cls of junoClassesIn(readFileSync(join(cwd, f), 'utf8'))) {
+      if (!defined.has(cls) && !waived.has(cls)) offenders.push(`${f}: ${cls}`);
+    }
+  }
+  if (offenders.length) {
+    throw new Error(
+      `junoui ${manifest.version} ships nothing named by ${offenders.length} \`juno-*\` name(s) ` +
+        `(surface: ${surface}, ${files.length} file(s) checked):\n  ` +
+        offenders.join('\n  '),
+    );
+  }
+  return { files: files.length, checked: defined.size };
+}