@junoput01/junoui 0.2.0

package/src/css/components/segmented.css

@@ -0,0 +1,99 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Segmented control
+ *  Exclusive-choice pill row (filters, mode switchers, sort pickers).
+ *  Zero JS: native radios carry the state; the checked pill takes the
+ *  role color (default label-neutral; add .juno--<role> to recolor).
+ *  Usage:
+ *    <fieldset class="juno-seg juno--active">
+ *      <label class="juno-seg__opt"><input type="radio" name="kind" checked /><span>ALL</span></label>
+ *      <label class="juno-seg__opt"><input type="radio" name="kind" /><span>PHOTOS</span></label>
+ *    </fieldset>
+ *  JS-driven apps may use buttons instead; the app flips aria-pressed:
+ *    <div class="juno-seg" role="group">
+ *      <button class="juno-seg__opt" aria-pressed="true">ALL</button>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-seg {
+  --juno-role: var(--juno-data);
+
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--juno-space-4);
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.juno-seg__opt {
+  display: inline-flex;
+  cursor: pointer;
+}
+
+/* visually hidden but still focusable + in the tab order */
+.juno-seg__opt input {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  opacity: 0;
+}
+
+/* the pill — a span after the radio, or the aria-pressed button itself */
+.juno-seg__opt input + span,
+button.juno-seg__opt {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-gap-control);
+  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;
+  padding: var(--juno-space-4) var(--juno-space-10);
+  color: var(--juno-label);
+  background: transparent;
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-3);
+  transition:
+    color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    border-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    background-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-seg__opt:hover input:not(:checked) + span,
+button.juno-seg__opt[aria-pressed='false']:hover {
+  background: var(--juno-s2);
+  color: var(--juno-data);
+}
+
+.juno-seg__opt input:checked + span,
+button.juno-seg__opt[aria-pressed='true'] {
+  background: var(--juno-s3);
+  border-color: var(--juno-role);
+  color: var(--juno-role);
+}
+
+.juno-seg__opt input:focus-visible + span,
+button.juno-seg__opt:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: var(--juno-space-2);
+}
+
+.juno-seg__opt input:disabled + span,
+button.juno-seg__opt:disabled {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.juno-seg:disabled .juno-seg__opt,
+.juno-seg__opt:has(:disabled) {
+  cursor: not-allowed;
+}
+
+/* Small — matches .juno-btn--sm; for dense toolbars */
+.juno-seg--sm .juno-seg__opt input + span,
+.juno-seg--sm > button.juno-seg__opt {
+  font-size: var(--juno-font-size-10);
+  letter-spacing: var(--juno-font-tracking-wide);
+  padding: var(--juno-space-2) var(--juno-space-8);
+}

package/src/css/components/select.css

@@ -0,0 +1,38 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Select
+ *  A native <select> styled as an input, with a token-colored chevron.
+ *  Usage:
+ *    <div class="juno-select">
+ *      <select class="juno-input">
+ *        <option>NOMINAL</option><option>CAUTION</option>
+ *      </select>
+ *    </div>
+ *  The inner <select> reuses .juno-input for the box; the wrapper adds the
+ *  chevron and reserves room for it (inline-end, so it mirrors under RTL).
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-select {
+  position: relative;
+  display: block;
+}
+
+.juno-select > .juno-input {
+  appearance: none;
+  padding-inline-end: var(--juno-space-32);
+  font-family: var(--juno-font-family-sans);
+  cursor: pointer;
+}
+
+/* chevron — CSS triangle so it inherits a token color, no SVG asset */
+.juno-select::after {
+  content: '';
+  position: absolute;
+  inset-inline-end: var(--juno-space-12);
+  inset-block-start: 50%;
+  inline-size: 0;
+  block-size: 0;
+  border-inline: var(--juno-space-4) solid transparent;
+  border-block-start: var(--juno-space-4) solid var(--juno-label);
+  transform: translateY(-25%);
+  pointer-events: none;
+}

package/src/css/components/skeleton.css

@@ -0,0 +1,62 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Skeleton  ·  loading placeholder
+ *  A shimmering block that stands in for content not yet loaded. Same
+ *  shimmer language as the table's row skeleton, generalized: text lines,
+ *  blocks, and circles (avatars). Zero JS — size it with width / height or
+ *  --juno-skeleton-h. Honors prefers-reduced-motion (shimmer → static).
+ *  Mark the loading region aria-busy="true" so AT announces it.
+ *  Usage:
+ *    <div aria-busy="true" aria-live="polite">
+ *      <span class="juno-skeleton juno-skeleton--circle" style="--juno-skeleton-h: 48px;"></span>
+ *      <span class="juno-skeleton juno-skeleton--text" style="inline-size: 60%;"></span>
+ *      <span class="juno-skeleton juno-skeleton--text"></span>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-skeleton {
+  --juno-skeleton-h: var(--juno-space-16);
+
+  display: block;
+  inline-size: 100%;
+  block-size: var(--juno-skeleton-h);
+  border-radius: var(--juno-radius-3);
+  background: linear-gradient(90deg, var(--juno-s2) 0%, var(--juno-s3) 50%, var(--juno-s2) 100%);
+  background-size: 200% 100%;
+  animation: juno-skeleton-shimmer 1.2s ease-in-out infinite;
+}
+
+/* a text line — caps height to one line, soft radius */
+.juno-skeleton--text {
+  --juno-skeleton-h: 1em;
+
+  border-radius: var(--juno-radius-2);
+}
+
+/* round avatar / icon placeholder — keep it square via the inline size */
+.juno-skeleton--circle {
+  inline-size: var(--juno-skeleton-h);
+  border-radius: 50%;
+}
+
+/* a larger surface (card / media) */
+.juno-skeleton--block {
+  --juno-skeleton-h: var(--juno-space-56);
+
+  border-radius: var(--juno-radius-4);
+}
+
+@keyframes juno-skeleton-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .juno-skeleton {
+    animation: none;
+  }
+}

package/src/css/components/slider.css

@@ -0,0 +1,117 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Slider  ·  track + grip lever
+ *  A recessed channel with detent notches, an accent fill, and a gripped
+ *  lever. Value-driven: the app sets --juno-slider-pct (0–100) and owns
+ *  drag / keyboard / ARIA (role="slider" + aria-value*), the same split as
+ *  the overlays. Two sizes: standard (lever always full) and --compact
+ *  (lever recedes to a slim marker until hover / focus / drag).
+ *  Usage:
+ *    <div class="juno-slider" style="--juno-slider-pct: 72" role="slider"
+ *         tabindex="0" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100">
+ *      <span class="juno-slider__channel"></span>
+ *      <span class="juno-slider__lever"></span>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-slider {
+  --juno-role: var(--juno-active);
+  --juno-slider-pct: 0;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  block-size: 48px;
+  cursor: pointer;
+  touch-action: none;
+}
+
+.juno-slider__channel {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  block-size: var(--juno-space-20);
+  background-color: var(--juno-s0);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge-strong);
+  border-radius: var(--juno-radius-4);
+  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.5);
+  overflow: hidden;
+}
+
+/* detent notches every 10% */
+.juno-slider__channel::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: repeating-linear-gradient(
+    90deg,
+    transparent 0 calc(10% - 1px),
+    var(--juno-muted) calc(10% - 1px),
+    var(--juno-muted) 10%
+  );
+  opacity: 0.5;
+}
+
+/* accent fill up to the value */
+.juno-slider__channel::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inline-size: calc(var(--juno-slider-pct) * 1%);
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--juno-role) 8%, transparent),
+    color-mix(in srgb, var(--juno-role) 34%, transparent)
+  );
+}
+
+/* gripped lever, positioned at the value */
+.juno-slider__lever {
+  position: absolute;
+  inset-inline-start: calc(var(--juno-slider-pct) * 1%);
+  inset-block-start: 50%;
+  transform: translate(-50%, -50%);
+  inline-size: 26px;
+  block-size: 40px;
+  border-radius: var(--juno-radius-4);
+  border: var(--juno-border-width-1) solid var(--juno-knob-edge);
+  background:
+    repeating-linear-gradient(90deg, var(--juno-knob-grip) 0 2px, transparent 2px 5px) center / 12px
+      16px no-repeat,
+    linear-gradient(180deg, var(--juno-knob-face-hi), var(--juno-knob-face-lo));
+  box-shadow: 0 2px 4px rgb(0 0 0 / 0.5);
+  pointer-events: none;
+  transition:
+    inline-size var(--juno-motion-duration-base) ease,
+    block-size var(--juno-motion-duration-base) ease,
+    box-shadow var(--juno-motion-duration-base) ease;
+}
+
+/* compact — lever minimizes to a slim marker until engaged */
+.juno-slider--compact .juno-slider__lever {
+  inline-size: 10px;
+  block-size: 22px;
+  border-radius: var(--juno-radius-3);
+  background: linear-gradient(180deg, var(--juno-knob-face-hi), var(--juno-knob-face-lo));
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.45);
+}
+
+.juno-slider--compact:hover .juno-slider__lever,
+.juno-slider--compact:focus-visible .juno-slider__lever,
+.juno-slider--compact:active .juno-slider__lever {
+  inline-size: 26px;
+  block-size: 40px;
+  border-radius: var(--juno-radius-4);
+  background:
+    repeating-linear-gradient(90deg, var(--juno-knob-grip) 0 2px, transparent 2px 5px) center / 12px
+      16px no-repeat,
+    linear-gradient(180deg, var(--juno-knob-face-hi), var(--juno-knob-face-lo));
+  box-shadow: 0 2px 4px rgb(0 0 0 / 0.5);
+}
+
+.juno-slider[aria-disabled='true'] {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}

package/src/css/components/spark.css

@@ -0,0 +1,26 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Spark (sparkline contract)
+ *  junoui ships no charting: the app generates the <polyline> points;
+ *  this class supplies the size / stroke / role-color contract so every
+ *  sparkline matches. Generator recipe: docs/components/spark.md.
+ *  Usage:
+ *    <svg class="juno-spark juno--nominal" viewBox="0 0 120 24" preserveAspectRatio="none">
+ *      <polyline points="0,20 8,14 16,17 …" />
+ *    </svg>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-spark {
+  --juno-role: var(--juno-active);
+
+  display: block;
+  inline-size: 100%;
+  block-size: var(--juno-space-24);
+}
+
+.juno-spark polyline {
+  fill: none;
+  stroke: var(--juno-role);
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}

package/src/css/components/stepper.css

@@ -0,0 +1,121 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Stepper  ·  multi-step progress
+ *  A horizontal sequence of steps with numbered markers and connectors.
+ *  Each step carries data-state: complete · current · upcoming. Mark the
+ *  active step aria-current="step". Built on a real <ol>; the app sets the
+ *  states. Zero JS. Reads --juno-role (default active) for the accent.
+ *  Usage:
+ *    <ol class="juno-stepper">
+ *      <li class="juno-stepper__step" data-state="complete">
+ *        <span class="juno-stepper__marker">
+ *          <svg class="juno-icon juno-icon--sm"><use href="…#juno-i-check" /></svg>
+ *        </span>
+ *        <span class="juno-stepper__label">Plan</span>
+ *      </li>
+ *      <li class="juno-stepper__step" data-state="current" aria-current="step">
+ *        <span class="juno-stepper__marker">2</span>
+ *        <span class="juno-stepper__label">Build</span>
+ *      </li>
+ *      <li class="juno-stepper__step" data-state="upcoming">
+ *        <span class="juno-stepper__marker">3</span>
+ *        <span class="juno-stepper__label">Ship</span>
+ *      </li>
+ *    </ol>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-stepper {
+  --juno-stepper-marker: var(--juno-space-28);
+  --juno-role: var(--juno-active);
+
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.juno-stepper__step {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--juno-space-8);
+  text-align: center;
+}
+
+/* connector — a line from the previous marker into this one */
+.juno-stepper__step:not(:first-child)::before {
+  content: '';
+  position: absolute;
+  inset-block-start: calc(var(--juno-stepper-marker) / 2);
+  inset-inline-end: 50%;
+  inline-size: 100%;
+  block-size: var(--juno-border-width-1);
+  background: var(--juno-muted);
+}
+
+/* a reached step (complete or current) lights its incoming connector */
+.juno-stepper__step[data-state='complete']::before,
+.juno-stepper__step[data-state='current']::before {
+  background: var(--juno-role);
+}
+
+.juno-stepper__marker {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-content: center;
+  inline-size: var(--juno-stepper-marker);
+  block-size: var(--juno-stepper-marker);
+  border-radius: 50%;
+  border: var(--juno-border-width-1) solid var(--juno-control-edge-strong);
+  background: var(--juno-control-surface);
+  color: var(--juno-label);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-12);
+  font-weight: var(--juno-font-weight-bold);
+}
+
+.juno-stepper__step[data-state='complete'] .juno-stepper__marker {
+  border-color: var(--juno-role);
+  background: color-mix(in srgb, var(--juno-role) 18%, var(--juno-control-surface));
+  color: var(--juno-role);
+}
+
+.juno-stepper__step[data-state='current'] .juno-stepper__marker {
+  border-color: var(--juno-role);
+  color: var(--juno-role);
+  box-shadow: 0 0 0 var(--juno-border-width-2) color-mix(in srgb, var(--juno-role) 30%, transparent);
+}
+
+.juno-stepper__label {
+  max-inline-size: 14ch;
+  color: var(--juno-label);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-12);
+}
+
+.juno-stepper__step[data-state='complete'] .juno-stepper__label,
+.juno-stepper__step[data-state='current'] .juno-stepper__label {
+  color: var(--juno-data);
+}
+
+/* vertical — steps stack; connector runs down the marker column */
+.juno-stepper--vertical {
+  flex-direction: column;
+}
+
+.juno-stepper--vertical .juno-stepper__step {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--juno-space-12);
+  text-align: start;
+  padding-block-end: var(--juno-space-16);
+}
+
+.juno-stepper--vertical .juno-stepper__step:not(:first-child)::before {
+  inset-block: calc(var(--juno-stepper-marker) / -2) auto;
+  inset-inline: calc(var(--juno-stepper-marker) / 2) auto;
+  inline-size: var(--juno-border-width-1);
+  block-size: 100%;
+}

package/src/css/components/switch.css

@@ -0,0 +1,131 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Switch (toggle)  ·  labeled rocker
+ *  A wide squared slide-switch with the state printed inside the track
+ *  (ON / OFF, mono) and a gripped knob; lit nominal-green when ON. A real
+ *  checkbox drives it; the app owns state. Honors prefers-reduced-motion.
+ *  Usage:
+ *    <label class="juno-switch">
+ *      <input class="juno-switch__input" type="checkbox" role="switch" />
+ *      <span class="juno-switch__track"></span>
+ *      <span>AUTO-SCALING</span>
+ *    </label>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-gap-control);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+  cursor: pointer;
+}
+
+/* visually hidden but still focusable + in the tab order */
+.juno-switch__input {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  opacity: 0;
+}
+
+.juno-switch__track {
+  --juno-role: var(--juno-nominal);
+
+  position: relative;
+  flex-shrink: 0;
+  inline-size: 70px;
+  block-size: var(--juno-space-28);
+  background: var(--juno-control-surface);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge-strong);
+  border-radius: var(--juno-radius-4);
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.4);
+  transition:
+    border-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    background-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+/* ON / OFF legend, printed opposite the knob */
+.juno-switch__track::after {
+  content: 'OFF';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: var(--juno-space-8);
+  display: flex;
+  align-items: center;
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-10);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-wide);
+  color: var(--juno-muted);
+}
+
+/* knob — gradient face, three grip lines; slides via inset-inline-start (RTL) */
+.juno-switch__track::before {
+  content: '';
+  position: absolute;
+  inset-block-start: var(--juno-space-2);
+  inset-inline-start: var(--juno-space-2);
+  inline-size: 26px;
+  block-size: 22px;
+  border-radius: var(--juno-radius-4);
+  border: var(--juno-border-width-1) solid var(--juno-knob-edge);
+  background:
+    repeating-linear-gradient(90deg, var(--juno-knob-grip) 0 2px, transparent 2px 5px) center / 12px
+      14px no-repeat,
+    linear-gradient(180deg, var(--juno-knob-face-hi), var(--juno-knob-face-lo));
+  box-shadow: 0 2px 4px rgb(0 0 0 / 0.5);
+  transition: inset-inline-start var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+/* ON fills the track with a role tint — the filled/empty contrast reads at a
+   squint in both modes, where a border-color flip alone does not. */
+.juno-switch__input:checked + .juno-switch__track {
+  border-color: var(--juno-role);
+  background: color-mix(in srgb, var(--juno-role) 28%, var(--juno-control-surface));
+}
+
+.juno-switch__input:checked + .juno-switch__track::after {
+  content: 'ON';
+  inset-inline: var(--juno-space-8) auto;
+  color: var(--juno-data);
+}
+
+.juno-switch__input:checked + .juno-switch__track::before {
+  inset-inline-start: calc(70px - 26px - var(--juno-space-2));
+}
+
+/* Small — quiet per-row toggle (plugin lists, table rows). Drops the printed
+   ON/OFF legend; keeps grip, role tint and inset shadow so it reads junoui. */
+.juno-switch--sm .juno-switch__track {
+  inline-size: var(--juno-space-40);
+  block-size: var(--juno-space-20);
+}
+
+.juno-switch--sm .juno-switch__track::after,
+.juno-switch--sm .juno-switch__input:checked + .juno-switch__track::after {
+  content: none;
+}
+
+.juno-switch--sm .juno-switch__track::before {
+  inline-size: var(--juno-space-16);
+  block-size: var(--juno-space-12);
+  background:
+    repeating-linear-gradient(90deg, var(--juno-knob-grip) 0 2px, transparent 2px 5px) center / 8px
+      8px no-repeat,
+    linear-gradient(180deg, var(--juno-knob-face-hi), var(--juno-knob-face-lo));
+}
+
+.juno-switch--sm .juno-switch__input:checked + .juno-switch__track::before {
+  inset-inline-start: calc(var(--juno-space-40) - var(--juno-space-16) - var(--juno-space-2));
+}
+
+.juno-switch__input:focus-visible + .juno-switch__track {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: var(--juno-space-2);
+}
+
+.juno-switch__input:disabled + .juno-switch__track {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}