@junoput01/junoui 0.2.0

package/src/css/components/field.css

@@ -0,0 +1,37 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Field
+ *  Wraps any control with a label, optional help, and an error message.
+ *  Usage:
+ *    <div class="juno-field">
+ *      <label class="juno-field__label" for="cs">Order ID
+ *        <span class="juno-field__req" aria-hidden="true">*</span>
+ *      </label>
+ *      <input id="cs" class="juno-input juno-mono" type="text" />
+ *      <span class="juno-field__help">Prefix + number</span>
+ *    </div>
+ *  Error: add aria-invalid="true" to the control and swap help → __error.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juno-space-4);
+}
+
+.juno-field__label {
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-10);
+  letter-spacing: var(--juno-font-tracking-wider);
+  text-transform: uppercase;
+  color: var(--juno-label);
+}
+
+/* required marker — warning hue, paired with aria-required on the control */
+.juno-field__req {
+  color: var(--juno-warning);
+  margin-inline-start: var(--juno-space-2);
+}
+
+.juno-field__help { font-size: var(--juno-font-size-11); color: var(--juno-label); }
+
+.juno-field__error { font-size: var(--juno-font-size-11); color: var(--juno-warning); }

package/src/css/components/gauge.css

@@ -0,0 +1,78 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Gauge (determinate metric ring)
+ *  A fixed-value ring for readouts (CPU / RAM / DISK …) — the metric
+ *  cousin of the arc loader. Set --juno-gauge-value (0–100) inline or
+ *  from JS; color comes from --juno-role. junoui ships no threshold
+ *  policy: the app maps value → role class (see gauge.md for the
+ *  75/90 recipe).
+ *  Usage:
+ *    <div class="juno-gauge juno--nominal" style="--juno-gauge-value: 67">
+ *      <span class="juno-gauge__value">67</span>
+ *    </div>
+ *    <span class="juno-gauge__label">DISK</span>
+ * ════════════════════════════════════════════════════════════════════ */
+
+/* registered so the sweep can transition when the value changes */
+@property --juno-gauge-value {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
+.juno-gauge {
+  --juno-role: var(--juno-active);
+  --juno-gauge-size: 64px;
+  --juno-gauge-width: 4px;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--juno-gauge-size);
+  block-size: var(--juno-gauge-size);
+}
+
+/* the ring lives on a pseudo-element: the punch-out mask would clip a
+   child, so the value stays a real child of the unmasked wrapper */
+.juno-gauge::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(
+    var(--juno-role) calc(var(--juno-gauge-value) * 1%),
+    var(--juno-border) 0
+  );
+  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--juno-gauge-width)), #000 calc(100% - var(--juno-gauge-width)));
+          mask: radial-gradient(farthest-side, #0000 calc(100% - var(--juno-gauge-width)), #000 calc(100% - var(--juno-gauge-width)));
+  transition: --juno-gauge-value var(--juno-motion-duration-base) var(--juno-motion-ease-standard);
+}
+
+.juno-gauge__value {
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-13);
+  font-weight: var(--juno-font-weight-bold);
+  color: var(--juno-role);
+}
+
+/* caption under (or beside) the ring — a sibling, app-positioned */
+.juno-gauge__label {
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-10);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-caps);
+  text-transform: uppercase;
+  color: var(--juno-label);
+}
+
+.juno-gauge--sm {
+  --juno-gauge-size: 44px;
+  --juno-gauge-width: 3px;
+}
+.juno-gauge--sm .juno-gauge__value { font-size: var(--juno-font-size-11); }
+
+.juno-gauge--lg {
+  --juno-gauge-size: 96px;
+  --juno-gauge-width: 5px;
+}
+.juno-gauge--lg .juno-gauge__value { font-size: var(--juno-font-size-20); }

package/src/css/components/icon.css

@@ -0,0 +1,35 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Icon  ·  inline SVG glyph
+ *  A zero-JS icon primitive. Reference a symbol from the sprite; the glyph
+ *  inherits the current text color (so a .juno--<role> ancestor tints it)
+ *  and sizes in `em`, tracking font-size and the [data-juno-text] scale.
+ *  Usage:
+ *    <svg class="juno-icon" aria-hidden="true">
+ *      <use href="path/to/juno-icons.svg#juno-i-gear" />
+ *    </svg>
+ *    <svg class="juno-icon juno-icon--lg juno--warning" role="img"
+ *         aria-label="Warning">
+ *      <use href="…#juno-i-warning" />
+ *    </svg>
+ *  Sizing: --juno-icon-size (default 1.25em). Color: currentColor — set
+ *  color, or add .juno-icon--role to read var(--juno-role).
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-icon {
+  --juno-icon-size: 1.25em;
+
+  display: inline-block;
+  inline-size: var(--juno-icon-size);
+  block-size: var(--juno-icon-size);
+  flex-shrink: 0;
+  vertical-align: -0.2em; /* optical baseline alignment next to text */
+  fill: currentcolor;
+}
+
+/* tint by semantic role instead of the surrounding text color */
+.juno-icon--role { color: var(--juno-role); }
+
+/* sizes — relative, so they ride the type scale */
+.juno-icon--sm { --juno-icon-size: 1em; }
+.juno-icon--lg { --juno-icon-size: 1.75em; }
+.juno-icon--xl { --juno-icon-size: 2.5em; }

package/src/css/components/input.css

@@ -0,0 +1,60 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Text input / textarea
+ *  Inputs are precise: mono by default (codes, IDs, tokens, values),
+ *  ACTIVE-cyan focus ring always visible, semantic color reserved for
+ *  validation. Add .juno-input--sans for free-text fields.
+ *  Usage:  <input class="juno-input" type="text" value="ORD-519" />
+ *          <input class="juno-input juno-input--sans" placeholder="Type…" />
+ *          <input class="juno-input juno--target" value="38000" />   (managed)
+ *          <input class="juno-input" aria-invalid="true" />          (error)
+ *          <textarea class="juno-input juno-input--sans"></textarea>
+ *
+ *  --juno-role defaults to the control edge, so the resting border is quiet;
+ *  a role class or aria-invalid re-colors it. Focus shows ACTIVE + a 1px ring.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-input {
+  --juno-role: var(--juno-control-edge-strong);
+
+  display: block;
+  inline-size: 100%;
+  min-block-size: var(--juno-size-tap-min);
+  background: var(--juno-control-surface);
+  border: var(--juno-border-width-1) solid var(--juno-role);
+  border-radius: var(--juno-radius-4);
+  padding: var(--juno-pad-control-block) var(--juno-space-12);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-14);
+  color: var(--juno-data);
+}
+
+.juno-input--sans { font-family: var(--juno-font-family-sans); }
+
+.juno-input::placeholder { color: var(--juno-muted); }
+
+/* focus — ACTIVE border + 1px ring (replaces the base outline on inputs) */
+.juno-input:focus-visible {
+  outline: none;
+  border-color: var(--juno-active);
+  box-shadow: 0 0 0 var(--juno-border-width-1) var(--juno-active);
+}
+
+/* invalid: warning border + text, tied to the a11y attribute */
+.juno-input[aria-invalid='true'] {
+  --juno-role: var(--juno-warning);
+
+  color: var(--juno-warning);
+}
+
+.juno-input:disabled {
+  background: var(--juno-s1);
+  border-color: var(--juno-border);
+  color: var(--juno-muted);
+  cursor: not-allowed;
+}
+
+textarea.juno-input {
+  min-block-size: calc(var(--juno-size-tap-min) * 3);
+  resize: vertical;
+  line-height: var(--juno-font-lineHeight-loose);
+}

package/src/css/components/list.css

@@ -0,0 +1,135 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — List (grouped rows / vertical data organization)
+ *  The settings-screen pattern: labeled groups of full-width rows, each
+ *  row a leading icon + label (+ support line) with a trailing value,
+ *  control, or drill-in chevron. Rows are plain <div>s for static data
+ *  or <a>/<button> when they navigate — the look is the same; only
+ *  interactive rows get hover/press feedback. Zero JS.
+ *  Usage:
+ *    <section class="juno-list">
+ *      <h3 class="juno-list__header">Playback</h3>
+ *      <ul class="juno-list__group">
+ *        <li><a class="juno-list__row" href="…">
+ *          <svg class="juno-icon juno-list__icon" aria-hidden="true"><use href="…#juno-i-sliders" /></svg>
+ *          <span class="juno-list__main">
+ *            <span class="juno-list__label">Quality</span>
+ *            <span class="juno-list__support">Streaming resolution</span>
+ *          </span>
+ *          <span class="juno-list__value">1080p</span>
+ *          <svg class="juno-icon juno-list__chevron" aria-hidden="true"><use href="…#juno-i-caret-right" /></svg>
+ *        </a></li>
+ *      </ul>
+ *    </section>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juno-space-8);
+}
+
+.juno-list + .juno-list { margin-block-start: var(--juno-space-20); }
+
+.juno-list__header {
+  margin: 0;
+  padding-inline: var(--juno-space-16);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-11);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-label);
+  text-transform: uppercase;
+  color: var(--juno-label);
+}
+
+.juno-list__group {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: var(--juno-s1);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-8);
+  overflow: hidden;
+}
+
+.juno-list__row {
+  display: flex;
+  align-items: center;
+  gap: var(--juno-space-12);
+  inline-size: 100%;
+  min-block-size: var(--juno-size-tap-comfortable);
+  padding: var(--juno-space-8) var(--juno-space-16);
+  background: transparent;
+  border: none;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  text-align: start;
+  text-decoration: none;
+  color: var(--juno-data);
+}
+
+/* hairline between rows only — works for <li>-wrapped and bare rows */
+.juno-list__group > li + li > .juno-list__row,
+.juno-list__group > .juno-list__row + .juno-list__row {
+  border-block-start: var(--juno-border-width-1) solid var(--juno-border);
+}
+
+/* feedback only where a row actually goes somewhere */
+a.juno-list__row,
+button.juno-list__row { cursor: pointer; }
+
+a.juno-list__row:hover,
+button.juno-list__row:hover,
+a.juno-list__row:focus-visible,
+button.juno-list__row:focus-visible { background: var(--juno-s2); }
+
+.juno-list__row:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: calc(-1 * var(--juno-space-2));
+}
+
+button.juno-list__row:disabled {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.juno-list__icon {
+  flex-shrink: 0;
+  color: var(--juno-label);
+}
+
+.juno-list__main {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--juno-space-2);
+}
+
+.juno-list__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.juno-list__support {
+  font-size: var(--juno-font-size-11);
+  color: var(--juno-label);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.juno-list__value {
+  flex-shrink: 0;
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-12);
+  color: var(--juno-label);
+}
+
+.juno-list__chevron {
+  flex-shrink: 0;
+
+  --juno-icon-size: var(--juno-space-16);
+
+  color: var(--juno-muted);
+}

package/src/css/components/loader.css

@@ -0,0 +1,159 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Loaders (Arc · Beacon · Linear bar)
+ *
+ *  Indeterminate variants loop on their own (CSS only). Determinate
+ *  variants track real progress: set --juno-progress (0–100) on the
+ *  element, inline or from JS:
+ *      el.style.setProperty('--juno-progress', 63);
+ *  Color comes from --juno-role (default = active).
+ * ════════════════════════════════════════════════════════════════════ */
+
+@keyframes juno-arc-rot   { to { transform: rotate(360deg); } }
+
+@keyframes juno-beacon-pulse { 0% { transform: scale(0.28); opacity: 0.85; } 100% { transform: scale(1); opacity: 0; } }
+
+@keyframes juno-bar-slide { 0% { left: -42%; } 100% { left: 100%; } }
+
+/* ── ARC — circular ring ────────────────────────────────────────────── */
+.juno-arc {
+  --juno-role: var(--juno-active);
+  --juno-arc-size: 76px;
+  --juno-arc-width: 4px;
+
+  position: relative;
+  width: var(--juno-arc-size);
+  height: var(--juno-arc-size);
+  border-radius: 50%;
+
+  /* determinate sweep: filled portion = progress */
+  background: conic-gradient(
+    var(--juno-role) calc(var(--juno-progress, 0) * 1%),
+    var(--juno-s3) 0
+  );
+
+  /* punch out the centre to leave a ring */
+  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--juno-arc-width)), #000 calc(100% - var(--juno-arc-width)));
+          mask: radial-gradient(farthest-side, #0000 calc(100% - var(--juno-arc-width)), #000 calc(100% - var(--juno-arc-width)));
+}
+
+.juno-arc--indeterminate {
+  background: conic-gradient(var(--juno-role) 0 70%, #0000 0);
+  animation: juno-arc-rot 1.1s steps(12) infinite; /* mechanical, 12-step sweep */
+}
+
+/* centred readout for determinate arcs — place a span inside */
+.juno-arc__label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--juno-font-family-mono);
+  font-weight: var(--juno-font-weight-bold);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+
+  /* the mask clips the ring, not this label: keep it on a sibling when
+     a value is shown — see loader.md */
+}
+
+/* ── BEACON — radiating pulse ───────────────────────────────────────── */
+.juno-beacon {
+  --juno-role: var(--juno-active);
+  --juno-beacon-size: 76px;
+
+  position: relative;
+  width: var(--juno-beacon-size);
+  height: var(--juno-beacon-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.juno-beacon__core {
+  width: 24%;
+  height: 24%;
+  border-radius: 50%;
+  background: var(--juno-role);
+}
+
+/* two pulse rings (staggered) */
+.juno-beacon::before,
+.juno-beacon::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 1.5px solid var(--juno-role);
+  animation: juno-beacon-pulse 1.9s ease-out infinite;
+}
+.juno-beacon::after { animation-delay: 0.95s; }
+
+/* determinate: fill grows centre → rim by progress, keeps pulsing + readout */
+.juno-beacon--determinate { --juno-beacon-fill-stop: calc(44% + 0.56% * var(--juno-progress, 0)); }
+.juno-beacon--determinate .juno-beacon__core { display: none; }
+
+.juno-beacon__track {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 1px solid var(--juno-border);
+}
+
+.juno-beacon__fill {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: var(--juno-role);
+  -webkit-mask: radial-gradient(circle closest-side, #0000 0 44%, #000 44% var(--juno-beacon-fill-stop), #0000 var(--juno-beacon-fill-stop));
+          mask: radial-gradient(circle closest-side, #0000 0 44%, #000 44% var(--juno-beacon-fill-stop), #0000 var(--juno-beacon-fill-stop));
+}
+
+.juno-beacon__hub {
+  position: absolute;
+  left: 50%; top: 50%;
+  transform: translate(-50%, -50%);
+  width: 42%; height: 42%;
+  border-radius: 50%;
+  background: var(--juno-s1);
+  border: 1px solid var(--juno-border);
+}
+
+.juno-beacon__label {
+  position: relative;
+  font-family: var(--juno-font-family-mono);
+  font-weight: var(--juno-font-weight-bold);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+}
+
+/* ── LINEAR BAR ─────────────────────────────────────────────────────── */
+.juno-bar {
+  --juno-role: var(--juno-active);
+
+  position: relative;
+  width: 100%;
+  height: 6px;
+  border-radius: var(--juno-radius-3);
+  background: var(--juno-s2);
+  overflow: hidden;
+}
+
+.juno-bar__fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: var(--juno-radius-3);
+  background: var(--juno-role);
+  width: calc(var(--juno-progress, 0) * 1%);
+  transition: width var(--juno-motion-duration-quick) linear;
+}
+
+/* indeterminate: a 40% segment slides across */
+.juno-bar--indeterminate .juno-bar__fill {
+  width: 40%;
+  left: -42%;
+  transition: none;
+  animation: juno-bar-slide 1.3s ease-in-out infinite;
+}

package/src/css/components/menu.css

@@ -0,0 +1,114 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Menu / Dropdown
+ *  A list of immediate actions anchored to its trigger. Section dividers,
+ *  keyboard shortcuts, and a destructive item set apart by WARNING. junoui
+ *  ships the look; the app owns roving focus. Open/close, light-dismiss, and
+ *  ESC come from the native Popover API — the menu lives in the TOP LAYER, so
+ *  it is never clipped by an ancestor's overflow and never fights z-index.
+ *  Usage:
+ *    <button popovertarget="acts" aria-haspopup="menu" aria-expanded="false">ACTIONS ▾</button>
+ *    <ul class="juno-menu" id="acts" popover role="menu">
+ *      <li><button class="juno-menu__item" role="menuitem"
+ *            popovertarget="acts" popovertargetaction="hide">
+ *        <span class="juno-menu__icon">⤓</span>Import data
+ *        <span class="juno-menu__kbd">⌘O</span>
+ *      </button></li>
+ *      <li class="juno-menu__sep" role="separator"></li>
+ *      <li><button class="juno-menu__item juno--warning" role="menuitem"
+ *            popovertarget="acts" popovertargetaction="hide">
+ *        <span class="juno-menu__icon">⨯</span>Delete project
+ *      </button></li>
+ *    </ul>
+ *  (Each item carries popovertargetaction="hide" so activating it closes the
+ *   menu with no JS. The invoker is the menu's implicit anchor.)
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-menu {
+  position: fixed;
+  margin: 0;
+  inset: auto;
+  position-area: block-end span-inline-start;
+  position-try-fallbacks: flip-block, flip-inline;
+  margin-block-start: var(--juno-space-8);
+  min-inline-size: 256px;
+  background: var(--juno-s2);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-5);
+  box-shadow: var(--juno-shadow-2);
+  padding: var(--juno-space-4);
+  list-style: none;
+  opacity: 0;
+  transform: translateY(calc(-1 * var(--juno-space-4)));
+  transition:
+    opacity var(--juno-motion-duration-quick) var(--juno-motion-ease-decel),
+    transform var(--juno-motion-duration-quick) var(--juno-motion-ease-decel),
+    overlay var(--juno-motion-duration-quick) allow-discrete,
+    display var(--juno-motion-duration-quick) allow-discrete;
+}
+
+.juno-menu:popover-open {
+  opacity: 1;
+  transform: none;
+}
+
+@starting-style {
+  .juno-menu:popover-open {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--juno-space-4)));
+  }
+}
+
+.juno-menu__item {
+  --juno-role: var(--juno-data);
+
+  display: flex;
+  align-items: center;
+  gap: var(--juno-gap-control);
+  inline-size: 100%;
+  padding: var(--juno-space-8) var(--juno-space-10);
+  background: transparent;
+  border: none;
+  border-radius: var(--juno-radius-4);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-role);
+  text-align: start;
+  text-decoration: none; /* items may be <a> (nav menus), not only <button> */
+  cursor: pointer;
+}
+
+.juno-menu__item:hover,
+.juno-menu__item:focus-visible { background: var(--juno-s3); }
+
+/* destructive item — .juno--warning sets --juno-role to warning */
+.juno-menu__item.juno--warning:hover,
+.juno-menu__item.juno--warning:focus-visible {
+  background: color-mix(in srgb, var(--juno-role) 14%, transparent);
+}
+
+.juno-menu__item:disabled,
+.juno-menu__item[aria-disabled='true'] { opacity: var(--juno-opacity-disabled); cursor: not-allowed; }
+
+.juno-menu__icon {
+  flex-shrink: 0;
+  inline-size: var(--juno-space-16);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-11);
+  color: var(--juno-label);
+}
+
+.juno-menu__item.juno--warning .juno-menu__icon { color: var(--juno-role); }
+
+.juno-menu__kbd {
+  margin-inline-start: auto;
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-10);
+  color: var(--juno-muted);
+}
+
+.juno-menu__sep {
+  block-size: var(--juno-border-width-1);
+  background: var(--juno-border);
+  margin-block: var(--juno-space-4);
+  list-style: none;
+}