npm - @junoput01/junoui - Versions diffs - 0.2.0 → 0.4.0 - Mend

@junoput01/junoui 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

package/CHANGELOG.md +251 -0
package/README.md +23 -19
package/dist/css/juno-custom-media.css +32 -0
package/dist/css/juno.css +1355 -40
package/dist/icons/inline.js +22 -0
package/docs/accessibility.md +188 -0
package/docs/boot-shell.md +295 -0
package/docs/components/README.md +71 -0
package/docs/components/accordion.md +49 -0
package/docs/components/alert.md +46 -0
package/docs/components/avatar.md +45 -0
package/docs/components/badge.md +35 -0
package/docs/components/breadcrumb.md +31 -0
package/docs/components/button.md +32 -0
package/docs/components/card.md +41 -0
package/docs/components/checkbox.md +41 -0
package/docs/components/chip.md +44 -0
package/docs/components/divider.md +32 -0
package/docs/components/dock.md +215 -0
package/docs/components/drawer.md +100 -0
package/docs/components/field.md +44 -0
package/docs/components/fold-slot.md +31 -0
package/docs/components/gauge.md +48 -0
package/docs/components/icon-loader.md +122 -0
package/docs/components/icon.md +70 -0
package/docs/components/input.md +45 -0
package/docs/components/list.md +76 -0
package/docs/components/load-state.md +131 -0
package/docs/components/loader.md +88 -0
package/docs/components/menu.md +54 -0
package/docs/components/modal.md +52 -0
package/docs/components/navbar.md +53 -0
package/docs/components/pagination.md +42 -0
package/docs/components/pillbar.md +211 -0
package/docs/components/popover.md +43 -0
package/docs/components/rail.md +54 -0
package/docs/components/readout.md +39 -0
package/docs/components/reload.md +41 -0
package/docs/components/segmented.md +46 -0
package/docs/components/select.md +33 -0
package/docs/components/skeleton.md +45 -0
package/docs/components/slider.md +48 -0
package/docs/components/spark.md +51 -0
package/docs/components/status.md +30 -0
package/docs/components/stepper.md +46 -0
package/docs/components/switch.md +38 -0
package/docs/components/table.md +126 -0
package/docs/components/tabs.md +61 -0
package/docs/components/thumb.md +81 -0
package/docs/components/toast.md +48 -0
package/docs/components/toggle-button.md +40 -0
package/docs/components/tooltip.md +63 -0
package/docs/design-guidelines.md +173 -0
package/docs/flutter.md +42 -0
package/docs/getting-started.md +93 -0
package/docs/integration.md +95 -0
package/docs/ios-conformance.md +224 -0
package/docs/layout.md +271 -0
package/docs/native.md +52 -0
package/docs/roadmap.md +106 -0
package/docs/tokens-reference.md +223 -0
package/docs/web.md +95 -0
package/package.json +7 -3
package/src/css/base.css +171 -1
package/src/css/components/dock.css +335 -0
package/src/css/components/drawer.css +40 -3
package/src/css/components/fold-slot.css +44 -0
package/src/css/components/icon-loader.css +67 -0
package/src/css/components/icon.css +6 -4
package/src/css/components/load-state.css +136 -0
package/src/css/components/loader.css +6 -0
package/src/css/components/menu.css +4 -0
package/src/css/components/modal.css +24 -3
package/src/css/components/navbar.css +5 -1
package/src/css/components/pillbar.css +222 -7
package/src/css/components/rail.css +8 -0
package/src/css/components/reload.css +48 -0
package/src/css/components/skeleton.css +41 -13
package/src/css/components/tabs.css +5 -0
package/src/css/components/thumb.css +63 -1
package/src/css/components/toast.css +5 -1
package/src/css/density.css +22 -0
package/src/css/layout.css +95 -5
package/src/css/utilities.css +4 -1

package/docs/web.md ADDED Viewed

@@ -0,0 +1,95 @@
+# Web (CSS / SCSS / JS)
+## CSS — the fast path
+Import the full stylesheet (tokens + base + utilities + components):
+```js
+import '@junoput01/junoui/css'; // bundler
+```
+```css
+@import '@junoput01/junoui/css'; /* plain CSS */
+```
+Set the theme with two attributes on `<html>`:
+```html
+<html data-juno-palette="standard" data-juno-mode="dark"></html>
+```
+Both are optional. **Omit `data-juno-mode` and the theme follows the OS**
+(`prefers-color-scheme`, live — no JS): dark systems get dark, light systems
+light, in whichever palette is set (default `standard`). The base layer also
+sets `color-scheme` so scrollbars and native form chrome match. An explicit
+`data-juno-mode` pins the mode and ignores the OS.
+Other system preferences honored out of the box: `prefers-reduced-motion`
+(animations collapse), `prefers-contrast: more` (hairlines step up to the
+strong border), `prefers-reduced-transparency` (translucent surfaces go
+solid), `forced-colors` (system palette). Language is the app's job — junoui
+ships no strings and is RTL-safe via logical properties; set `lang`/`dir` and
+the layout follows.
+Switch at runtime:
+```js
+document.documentElement.dataset.junoPalette = 'colorblind';
+document.documentElement.dataset.junoMode = 'light';
+delete document.documentElement.dataset.junoMode; // back to following the OS
+```
+Use semantic variables and component classes:
+```html
+<span class="juno-badge juno--warning">WARNING</span>
+<div style="color: var(--juno-nominal); padding: var(--juno-space-16);">…</div>
+```
+Want variables only (bring your own components)? Import `@junoput01/junoui/css/tokens`.
+## SCSS
+```scss
+@use '@junoput01/junoui/scss' as juno; // $juno-color-standard-dark-nominal, $juno-space-16, …
+```
+All variables are `!default`, so you can override before `@use` if you fork values.
+## JS / TS
+```ts
+import { TOKENS, CORE, getTokens } from '@junoput01/junoui';
+getTokens('colorblind', 'light').warning; // "#BA4300"
+TOKENS.standard.dark.nominal; // "oklch(73% 0.22 148)"
+CORE.space['16']; // "16px"
+```
+Types ship with the package (`JunoPalette`, `JunoMode`, `JunoRole`, `JunoTheme`).
+## Semantic vs explicit variables
+- **Semantic** `--juno-nominal` … resolve to the _current_ theme. Use these in components.
+- **Explicit** values for a specific theme live in SCSS/JS as
+  `…-standard-dark-nominal`. Use only when you need a fixed theme regardless of context.
+## Fonts
+junoui **never fetches fonts** (a cross-origin `@import` would break a strict CSP and
+phone home). `base.css` names B612 / B612 Mono via `--juno-font-family-*` but doesn't
+load them. Two options:
+```js
+import '@junoput01/junoui/fonts.css'; // opt-in: self-hosted B612 woff2, no network (CSP-safe)
+```
+…or bring your own B612 (e.g. `@fontsource/b612`). Without either, the UI falls back to
+system sans/mono. See [integration.md](./integration.md#2-fonts-opt-in-csp-safe).
+## Boot performance
+An app that wants chrome on screen at the first HTML parse — before `juno.css`
+or any bundle arrives — and everything else loaded in the background follows
+the boot-shell ladder: [boot-shell.md](./boot-shell.md).

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@junoput01/junoui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "junoui — a token-driven design system. Color carries semantic meaning, never decoration: every hue has one assigned role (NOMINAL / ACTIVE / TARGET / CAUTION / WARNING). Ships multi-platform tokens (CSS, SCSS, JS/TS, JSON, Android, iOS, Flutter) plus a framework-agnostic CSS component layer.",
   "type": "module",
   "license": "MIT",
@@ -11,7 +11,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git@github.com-junoput:junoput/junoui.git"
+    "url": "git+https://github.com/junoput/junoui.git"
   },
   "keywords": [
     "design-system",
@@ -29,7 +29,8 @@
   "module": "./dist/js/tokens.js",
   "types": "./dist/js/tokens.d.ts",
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "./dist/icons/inline.js"
   ],
   "exports": {
     ".": {
@@ -39,6 +40,7 @@
     },
     "./css": "./dist/css/juno.css",
     "./css/tokens": "./dist/css/juno-tokens.css",
+    "./css/custom-media": "./dist/css/juno-custom-media.css",
     "./fonts.css": "./dist/css/juno-fonts.css",
     "./scss": "./dist/scss/_juno-tokens.scss",
     "./tokens.json": "./dist/json/tokens.json",
@@ -47,6 +49,7 @@
     "./ios": "./dist/ios/JunoTokens.swift",
     "./flutter": "./dist/flutter/juno_tokens.dart",
     "./icons": "./dist/icons/juno-icons.svg",
+    "./icons/inline": "./dist/icons/inline.js",
     "./package.json": "./package.json"
   },
   "files": [
@@ -54,6 +57,7 @@
     "src/css",
     "src/icons",
     "src/fonts",
+    "docs",
     "README.md",
     "CHANGELOG.md"
   ],

package/src/css/base.css CHANGED Viewed

@@ -13,7 +13,37 @@
 /* System color scheme. Without data-juno-mode the theme follows the OS
    (`prefers-color-scheme`; see juno-tokens.css) — `dark light` here lets the
    UA pick matching scrollbars/form chrome. An explicit mode pins both. */
-:root { color-scheme: dark light; }
+:root {
+  color-scheme: dark light;
+  /* 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));
+  /* JS-readable motion contract. CSS-only `prefers-reduced-motion` never reaches
+     imperative JS (scrollTo/scrollIntoView smooth behavior, rAF-driven transforms,
+     an "animate or not" branch) — so the preference is also exposed as a custom
+     property script can read with one getComputedStyle call, no matchMedia
+     listener required for a one-shot check:
+       getComputedStyle(document.documentElement)
+         .getPropertyValue('--juno-motion').trim() !== 'none'
+     A component MAY author its durations through the scale rather than a raw
+     duration token — `calc(var(--juno-motion-duration-base) * var(--juno-motion-scale))`
+     — so the reduced-motion override below collapses them to 0 without its own
+     per-component media query. Web-only DOM contract, so it lives
+     here rather than in the cross-platform token set (see --juno-dock-clearance
+     above for the same reasoning). */
+  --juno-motion: auto;
+  --juno-motion-scale: 1;
+}
 :root[data-juno-mode='dark'] { color-scheme: dark; }
 /* Control surfaces. On dark panels the hairline border (~23% L) disappears, so
@@ -89,11 +119,103 @@ code, kbd, samp, pre { font-family: var(--juno-font-family-mono); }
    the contract; a phone just reads the bigger one. */
 @media (pointer: coarse) {
   :root { --juno-size-tap-min: var(--juno-size-tap-comfortable); }
+  /* iOS Safari is widely observed to zoom the page onto a focused text field
+     whose font-size is under 16px. NOTE: no primary WebKit/Apple source states
+     this — it is empirical behavior, not published spec, so don't cite it as
+     one (see docs/ios-conformance.md and ticket 20260803-032). The mitigation
+     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)); }
+  /* 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
+     per component; make it a first-class touch default. See 20260802-020. */
+  :where(
+    .juno-btn,
+    .juno-dock__item,
+    .juno-pillbar__item,
+    .juno-tabs__tab,
+    .juno-list__item,
+    .juno-menu__item
+  ) {
+    -webkit-tap-highlight-color: transparent;
+  }
+}
+/* Tappable primitives opt out of double-tap-to-zoom. A browser that still
+   recognises that gesture has to WAIT after the first tap to see whether a
+   second one is coming, which reads as a late, mushy tap on exactly the
+   surfaces a phone UI is built from. `manipulation` keeps panning and
+   pinch-zoom (so the page stays zoomable — never `none` here, that would be an
+   a11y regression) and drops only the double-tap.
+   NOT inside the pointer:coarse block above: a hybrid device (touch laptop,
+   iPad with a trackpad) reports a fine primary pointer while still taking
+   touch input, and the property is inert on a mouse anyway.
+   Community convention — no primary Apple/WebKit source names it; see
+   docs/ios-conformance.md. Named components only, so a consumer's own elements
+   are untouched. See 20260803-038. */
+:where(
+  .juno-btn,
+  .juno-dock__item,
+  .juno-pillbar__item,
+  .juno-pillbar__overflow,
+  .juno-tabs__tab,
+  .juno-list__item,
+  .juno-menu__item,
+  .juno-seg__option,
+  .juno-chip,
+  .juno-toggle-btn
+) {
+  touch-action: manipulation;
+}
+/* Gesture-owned surfaces — for an element whose pointer events are fully
+   driven by app JS (drag-pan, pinch-zoom, swipe classification: a state
+   machine, not a native scroller). The UA must get out of the way: no
+   scroll/zoom gesture recognition, no callout menu on long-press, no text
+   selection, no tap-highlight flash. Community convention — no primary
+   Apple/WebKit source names any of these four properties for iOS, see
+   docs/ios-conformance.md; do not attribute them to Apple. Opt-in utility
+   class (unlike the pointer:coarse reset above, which targets junoui's own
+   named components), so it isn't gated behind a pointer-type query — apply
+   it only to elements a gesture handler actually owns.
+   --juno-touch-action narrows the axis without overriding the rest of the
+   block; default `none` hands every axis to JS. */
+.juno-gesture-surface {
+  touch-action: var(--juno-touch-action, none);
+  -webkit-touch-callout: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
 }
+/* Single-axis escape hatches: the UA keeps native scrolling on one axis
+   while JS reads gestures on the other (e.g. a vertical list row that also
+   supports horizontal swipe-to-reveal). Equivalent to
+   `--juno-touch-action: pan-x|pan-y` on .juno-gesture-surface, offered as
+   standalone classes for elements that only need the axis lock and none of
+   the callout/selection/tap-highlight resets. */
+.juno-pan-x { touch-action: pan-x; }
+.juno-pan-y { touch-action: pan-y; }
 @keyframes juno-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+/* Softer opacity pulse — a "working / refreshing" cadence that dims rather
+   than fully blinks out (used by the reload indicator and any live dot that
+   wants a gentler beat than juno-blink). */
+@keyframes juno-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
 @media (prefers-reduced-motion: reduce) {
+  /* Flip the JS-readable contract declared at the top of this file. Without
+     this the property would always report `auto` and script could never see
+     the preference — the whole point of exposing it. */
+  :root {
+    --juno-motion: none;
+    --juno-motion-scale: 0;
+  }
   *, *::before, *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
@@ -118,3 +240,51 @@ code, kbd, samp, pre { font-family: var(--juno-font-family-mono); }
   .juno-readout { border: 1px solid CanvasText; }
   .juno-badge { forced-color-adjust: none; } /* keep status fill meaningful */
 }
+/* ── iOS standalone letterbox unlock ─────────────────────────────────────────
+   iOS WebKit (observed through 26.6, iPhone 16 Pro, iOS 18.7) sizes a
+   Home-Screen standalone window whose DOCUMENT cannot scroll as if a
+   retractable browser toolbar existed: `screen.height − status bar`, pinned to
+   the top. The reserved strip — exactly env(safe-area-inset-top) — surfaces at
+   the BOTTOM of the glass, outside the window, painting black on every screen.
+   The same install with a scrollable document gets the whole screen.
+   Established by measurement, not inference (nexora 20260812-006): 201 device
+   readings; a four-structure A/B on one install where doc-scroll = full screen
+   and fixed-shell = letterboxed on every cold launch; and this exact mechanism
+   — the shell kept, the document left scrollable behind it by an invisible
+   in-flow spacer — verified full-screen on the device before landing here.
+   Transient scrollability is NOT enough (seven timed interventions, five
+   controlled runs, all negative): iOS samples the resting structure.
+   So: keep the document scrollable behind the app. The spacer is body::after
+   (a consumer that needs body::after for itself overrides this at the same
+   gate — none of ours do), invisible, 1px wide, and taller than the LARGE
+   viewport so the document always overflows whatever window iOS grants.
+   `overscroll-behavior: none` keeps the ghost scroller from rubber-banding;
+   apps put `overscroll-behavior: contain` on their real scrollers so an
+   inner fling never chains into it.
+   Gate, all three required:
+     display-mode: standalone       only installed apps are letterboxed
+     pointer: coarse                touch devices — keeps macOS Dock apps out
+     -webkit-touch-callout support  iOS/iPadOS WebKit only
+   Selectors carry `html:root` (0,1,2) on purpose: app resets commonly declare
+   `body { overflow: hidden }` at (0,0,1) AFTER this sheet, and the unlock must
+   win the cascade without !important. */
+@media (display-mode: standalone) and (pointer: coarse) {
+  @supports (-webkit-touch-callout: none) {
+    html:root,
+    html:root body { overflow: visible; }
+    html:root body { overscroll-behavior: none; }
+    html:root body::after {
+      content: '';
+      display: block;
+      width: 1px;
+      height: calc(100lvh + 80px);
+      visibility: hidden;
+      pointer-events: none;
+    }
+  }
+}