@zumer/orbit-kit 0.1.0 → 2.0.0

package/src/o-rings.js

@@ -1,93 +1,82 @@
+import { OrbitKitElement, define, injectStyleOnce, universe, hub, fixed, finiteNumber, cssValue, normalizeRange, escapeHTML as e, withShared, FORMAT_ATTRS } from './base.js';
+const PALETTE = ['#fa114f', '#a3ff00', '#00fff0', '#ffd60a', '#ff9500'];
+
 /**
- * <o-rings> — Apple-style concentric activity rings.
- *
- * Collapses the Orbit recipe:
- *
- *   .bigbang > .gravity-spot
- *     ├── .orbit-{outer}   > <o-progress>   (ring 1, outermost)
- *     ├── .orbit-{outer-1} > <o-progress>   (ring 2)
- *     ├── ...
- *     └── .orbit-0 > .satellite.at-center > .capsule   (optional center label)
- *
- * ...into one tag fed by a JSON array (outer ring first):
+ * <o-rings>: concentric activity rings, outermost first.
  *
- *   <o-rings data='[{"value":80,"color":"#fa114f"},
- *                   {"value":55,"color":"#a3ff00"},
- *                   {"value":92,"color":"#00fff0"}]'></o-rings>
- *
- * Each datum may set its own `max` (default 100), `color`, and `label`.
+ * Ring i sits on orbit (12 - i × spacing) with its band hugging the inside of
+ * that lane (inner-orbit), so any thickness fits and the outer ring touches
+ * the edge of the universe. Each ring is a track <o-arc> under an <o-progress>.
  */
-import { OrbitKitElement, define } from './base.js';
-
 export class OrbitRings extends OrbitKitElement {
   static get observedAttributes() {
-    return ['data', 'size', 'stroke-width', 'track', 'shape',
-            'range', 'from', 'step', 'label', 'unit', 'glow'];
+    return withShared(['data', 'size', 'thickness', 'stroke-width', 'track', 'shape', 'range', 'from', 'spacing', 'step', 'label', 'min', 'max', 'glow'], FORMAT_ATTRS);
   }
-
   readConfig() {
-    const range = this._num('range', 360);
-    const data = (this._json('data', []) || []).map((d) => ({
-      value: Number(d.value) || 0,
-      max: Number(d.max) || 100,
-      color: d.color || null,
-      label: d.label != null ? String(d.label) : null
-    }));
+    const range = Math.max(0, Math.min(360, this._num('range', 360)));
+    // Each ring has its own min/max; the attributes are the defaults (0 and 100).
+    const lo = this._num('min', 0), hi = this._num('max', 100);
+    const data = this._array('data').map((d, i) => {
+      const min = finiteNumber(d.min, lo);
+      let max = finiteNumber(d.max, hi);
+      if (!(max > min)) max = min + 100;
+      const r = normalizeRange({ min, max });
+      return {
+        value: Math.min(r.max, Math.max(r.min, finiteNumber(d.value, r.min))), min: r.min, max: r.max,
+        color: cssValue(d.color, PALETTE[i % PALETTE.length]), label: d.label == null ? null : String(d.label)
+      };
+    });
+    // Spacing between ring centers, in whole lanes: as wide as fits, 1 to 3.
+    const n = Math.max(1, data.length);
+    const base = Math.max(1, Math.min(3, Math.floor(10 / n)));
+    // `spacing` (1.0: `step`) multiplies the distance between rings.
+    let spacing = Math.max(1, Math.round(base * Math.max(1, this._num('spacing', this._num('step', 1)))));
+    while (spacing > 1 && (n - 1) * spacing > 10) spacing--;
+    const thickness = this._thickness(base * .86, spacing);
     return {
-      data,
-      range,
-      from: this.hasAttribute('from') ? this._num('from', 0)
-                                      : (range === 360 ? 0 : this._autoFrom(range)),
-      size: this._str('size', '200px'),
-      strokeWidth: this._num('stroke-width', 12),
-      track: this.hasAttribute('track') ? this.getAttribute('track') : null,
-      shape: this._str('shape', 'rounded'),
-      step: Math.round(this._num('step', 1)),
-      unit: this._str('unit', ''),
-      glow: this.getAttribute('glow'),
-      label: this.hasAttribute('label') ? this.getAttribute('label') : null
+      data, range, from: this.hasAttribute('from') ? this._num('from', 0) : (range === 360 ? 0 : this._autoFrom(range)),
+      size: this._size('size', '200px'), thickness, spacing,
+      strokeWidth: Math.max(0, this._num('stroke-width', 0)),
+      track: this._color('track', ''), shape: this._str('shape', 'rounded'),
+      unit: this._unitText(), glow: this.hasAttribute('glow') ? this._glowPx() : null, label: this.getAttribute('label')
     };
   }
-
-  structuralSignature(cfg) {
-    return JSON.stringify(cfg);
-  }
-
+  structuralSignature({ data, label, unit, track, ...structure }) { return JSON.stringify({ ...structure, count: data.length }); }
+  _track(cfg, d) { return cfg.track || `color-mix(in srgb, ${d.color} 18%, transparent)`; }
   build(cfg) {
-    const palette = ['#fa114f', '#a3ff00', '#00fff0', '#ffd60a', '#ff9500'];
-    // Outermost ring gets the highest orbit number so rings nest inward.
-    const outer = 1 + cfg.data.length * cfg.step;
-    // Scale --o-force so the outer ring fits within `size` (orbit-N = N/12 *
-    // force) with a margin for the rounded caps + glow bloom, instead of the
-    // default 500px that overflows the box.
-    const sizeNum = parseFloat(cfg.size) || 200;
-    const force = (sizeNum * 12 / (outer + 1)).toFixed(1);
-
+    const stroke = cfg.strokeWidth ? `--o-stroke-width:${cfg.strokeWidth};` : '';
     const rings = cfg.data.map((d, i) => {
-      const orbit = outer - i * cfg.step;
-      const color = d.color || palette[i % palette.length];
-      // iOS-style track: a dim, OPAQUE wash of the ring's own color, drawn as a
-      // separate solid o-arc (o-progress's back only strokes a hollow outline).
-      const track = cfg.track || `color-mix(in srgb, ${color} 14%, #0c0f14)`;
-      const ring = `--o-range:${cfg.range}deg;--o-from:${cfg.from}deg;`;
-      const fill = `--o-fill:${color};--o-stroke:${color};--o-stroke-width:${cfg.strokeWidth};${this._glow(color)}`;
-      return `
-        <div class="orbit-${orbit}" style="${ring}"><o-arc value="100" shape="${cfg.shape}" style="--o-fill:${track};--o-stroke:${track};--o-stroke-width:${cfg.strokeWidth}"></o-arc></div>
-        <div class="orbit-${orbit}" style="${ring}"><o-progress value="${d.value}" max="${d.max}" shape="${cfg.shape}" style="${fill}"></o-progress></div>`;
+      const ring = `class="orbit-${12 - i * cfg.spacing}" style="--o-range:${cfg.range}deg;--o-from:${cfg.from}deg;--o-size-ratio:${fixed(cfg.thickness)};--o-gap:0"`;
+      const glow = cfg.glow == null ? '' : `filter:drop-shadow(0 0 ${cfg.glow}px ${d.color});`;
+      return `<div ${ring}><o-arc class="inner-orbit ok-rings-track" value="100" shape="${e(cfg.shape)}" style="${e(`--o-fill:${this._track(cfg, d)};${stroke}`)}"></o-arc></div>` +
+        `<div ${ring}><o-progress class="inner-orbit ok-rings-value" value="${d.value - d.min}" max="${d.max - d.min}" shape="${e(cfg.shape)}" style="${e(`--o-fill:${d.color};${stroke}${glow}`)}"></o-progress></div>`;
     }).join('');
-
-    const center = cfg.label !== null
-      ? `<div class="orbit-0"><div class="satellite at-center"><div class="capsule ok-hub">${cfg.label}${cfg.unit}</div></div></div>`
-      : '';
-
-    this.innerHTML = `
-      <div class="bigbang" style="width:${cfg.size};aspect-ratio:1;">
-        <div class="gravity-spot" style="--o-force:${force}px;">
-          ${rings}
-          ${center}
-        </div>
-      </div>`;
+    const hole = 12 - (cfg.data.length - 1) * cfg.spacing - cfg.thickness;
+    this.innerHTML = universe(cfg.size, `${rings}
+      ${hub(2 * hole - .5, `${e(cfg.label ?? '')}${cfg.label == null ? '' : e(cfg.unit)}`)}`);
+    this._rings = [...this.querySelectorAll('.ok-rings-value')];
+    this._tracks = [...this.querySelectorAll('.ok-rings-track')];
+    this._center = this.querySelector('.ok-hub');
+  }
+  sync(cfg) {
+    this._rings?.forEach((ring, i) => {
+      const d = cfg.data[i];
+      ring.setAttribute('max', String(d.max - d.min));
+      ring.setAttribute('value', String(d.value - d.min));
+      ring.style.setProperty('--o-fill', d.color);
+      if (cfg.glow != null) ring.style.setProperty('filter', `drop-shadow(0 0 ${cfg.glow}px ${d.color})`);
+      else ring.style.removeProperty?.('filter');
+      this._tracks[i]?.style.setProperty('--o-fill', this._track(cfg, d));
+    });
+    if (this._center) {
+      this._center.textContent = cfg.label == null ? '' : `${cfg.label}${cfg.unit}`;
+      this._center.hidden = cfg.label == null;
+    }
+    this._describe([cfg.label == null ? null : `${cfg.label}${cfg.unit}`, ...cfg.data.map((d, i) => `${d.label ?? `Ring ${i + 1}`}: ${this._format(d.value, { min: d.min, max: d.max })} of ${this._formatText(d.max, { min: d.min, max: d.max })}`)].filter(Boolean).join('; ') || 'Empty activity rings');
   }
 }
-
+injectStyleOnce('orbit-kit-rings', `
+o-rings :is(.ok-rings-track, .ok-rings-value) { --o-stroke: var(--o-fill); }
+o-rings .ok-hub { --ok-hub-size: 1.2em; }
+`);
 define('o-rings', OrbitRings);

package/src/o-spinner.js

@@ -0,0 +1,214 @@
+/**
+ * <o-spinner>: a circular loading indicator, in five variants.
+ *
+ *   ring       .orbit-12 > o-arc × 2, turning at two paces, so the arc
+ *              they draw together stretches and shrinks as it goes round
+ *   dots       .orbit-9  > .satellite × count, pulsing one after another
+ *   segments   .orbit-12 > .vector × count, ticks fading in turn (iOS-like)
+ *   orbit      .orbit-11 and .orbit-6, each with satellites, turning at
+ *              their own pace around a core in .orbit-0
+ *   progress   .orbit-12 > o-arc track + value; determinate once `value`
+ *              is set, a turning arc until then
+ *
+ * Everything moves with CSS (rotate / opacity / scale), so a spinner costs no
+ * script while it runs. With prefers-reduced-motion nothing turns: the arcs,
+ * dots and ticks breathe slowly in place instead.
+ */
+import { OrbitKitElement, define, injectStyleOnce, universe, hub, fixed, escapeHTML as e, withShared, RANGE_ATTRS, FORMAT_ATTRS } from './base.js';
+
+export const SPINNER_VARIANTS = ['ring', 'dots', 'segments', 'orbit', 'progress'];
+
+const SPINNER_CSS = `
+:where(o-spinner) { display: inline-block; vertical-align: middle; line-height: 0; }
+o-spinner {
+  --ok-font-size: 17cqmin;
+  --_c: var(--ok-spinner-color, var(--ok-fill, #4fd1c5));
+  --_t: var(--ok-spinner-track, var(--ok-track, rgba(127,127,127,.2)));
+  --_a: var(--ok-spinner-accent, var(--ok-accent, #ffb547));
+  --_s: var(--ok-spinner-speed, 1s);
+}
+o-spinner .ok-track { --o-fill: var(--_t); --o-stroke: var(--o-fill); }
+o-spinner .ok-value { --o-fill: var(--_c); --o-stroke: var(--o-fill); }
+
+/* ring: two equal arcs, one turning steadily and one easing around it. */
+o-spinner .ok-spin-rotor { animation: ok-spin-turn calc(var(--_s) * 1.1) linear infinite; }
+o-spinner .ok-spin-rotor.is-lead { animation-timing-function: cubic-bezier(.55, .1, .45, .9); }
+@keyframes ok-spin-turn { to { rotate: 360deg; } }
+
+/* dots: each one swells and brightens in turn. */
+o-spinner .ok-spin-dot {
+  width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--_c);
+  animation: ok-spin-dot var(--_s) ease-in-out infinite;
+  animation-delay: calc(var(--i) / var(--n) * var(--_s) - var(--_s));
+}
+@keyframes ok-spin-dot { 0%, 100% { scale: .42; opacity: .3; } 30% { scale: 1; opacity: 1; } }
+
+/* segments: rounded ticks; the bright one walks around. */
+o-spinner .ok-spin-tick {
+  height: max(1.5px, 7.2cqmin * var(--ok-spinner-weight, 1)); border-radius: 99px; background: var(--_c);
+  animation: ok-spin-fade var(--_s) linear infinite;
+  animation-delay: calc(var(--i) / var(--n) * var(--_s) - var(--_s));
+}
+@keyframes ok-spin-fade { 0% { opacity: 1; } 100% { opacity: .16; } }
+
+/* orbit: two lanes turning at their own pace around a breathing core. */
+o-spinner .ok-spin-path { box-shadow: inset 0 0 0 max(1px, .9cqmin) var(--_t); }
+o-spinner .ok-spin-path.is-outer { animation: ok-spin-turn calc(var(--_s) * 1.6) linear infinite; }
+o-spinner .ok-spin-path.is-inner { animation: ok-spin-turn calc(var(--_s) * 1.1) linear infinite reverse; }
+o-spinner .ok-spin-planet { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--_c); box-shadow: 0 0 6cqmin color-mix(in srgb, var(--_c) 60%, transparent); }
+o-spinner .ok-spin-moon { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--_a); }
+o-spinner .ok-spin-core {
+  width: 100%; aspect-ratio: 1; border-radius: 50%;
+  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--_c) 55%, #fff), var(--_c));
+  animation: ok-spin-core calc(var(--_s) * 1.6) ease-in-out infinite;
+}
+@keyframes ok-spin-core { 50% { scale: .72; opacity: .7; } }
+
+o-spinner .ok-spin-readout { font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
+
+/* Reduced motion: nothing turns or swells; the drawing breathes in place. */
+@keyframes ok-spin-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  o-spinner .ok-spin-rotor { animation: ok-spin-breathe calc(var(--_s) * 2.4) ease-in-out infinite; }
+  o-spinner .ok-spin-rotor.is-lead { visibility: hidden; }
+  o-spinner .ok-spin-dot { animation-name: ok-spin-breathe; animation-duration: calc(var(--_s) * 2.4); scale: .8; }
+  o-spinner .ok-spin-tick { animation-duration: calc(var(--_s) * 2.4); }
+  o-spinner .ok-spin-path.is-outer, o-spinner .ok-spin-path.is-inner { animation: none; }
+  o-spinner .ok-spin-planet, o-spinner .ok-spin-moon { animation: ok-spin-breathe calc(var(--_s) * 2.4) ease-in-out infinite; }
+  o-spinner .ok-spin-moon { animation-delay: calc(var(--_s) * -1.2); }
+  o-spinner .ok-spin-core { animation: none; }
+}
+o-spinner[paused] *, o-spinner[paused] { animation-play-state: paused; }
+`;
+
+const DEFAULT_COUNT = { dots: 8, segments: 12, orbit: 2 };
+
+export class OrbitSpinner extends OrbitKitElement {
+  static get observedAttributes() {
+    return withShared(['variant', 'value', 'size', 'speed', 'color', 'track', 'accent', 'thickness', 'count', 'label', 'readout', 'shape', 'paused'], RANGE_ATTRS, FORMAT_ATTRS);
+  }
+
+  constructor() {
+    super();
+    this._shown = null;
+    this._tween = 0;
+  }
+
+  readConfig() {
+    const variant = SPINNER_VARIANTS.includes(this.getAttribute('variant')) ? this.getAttribute('variant') : 'ring';
+    const raw = this.getAttribute('value');
+    const determinate = variant === 'progress' && raw != null && raw.trim() !== '' && Number.isFinite(Number(raw));
+    const r = this._range({ min: 0, max: 100, step: 0 });
+    const count = Math.round(this._num('count', DEFAULT_COUNT[variant] || 0));
+    return {
+      variant, determinate, value: r.value, min: r.min, max: r.max, fraction: r.fraction,
+      size: this._size('size', '48px'), speed: Math.max(.05, this._num('speed', 1)),
+      color: this._color('color', null), track: this._color('track', null), accent: this._color('accent', null),
+      thickness: this._thickness(variant === 'progress' ? 1.8 : 2, 6),
+      count: variant === 'orbit' ? Math.max(1, Math.min(4, count)) : Math.max(3, Math.min(36, count)),
+      label: this.getAttribute('label'), shape: this._str('shape', 'rounded'),
+      readout: variant === 'progress' && this.hasAttribute('readout') && this.getAttribute('readout') !== 'false'
+    };
+  }
+
+  structuralSignature({ variant, determinate, size, count, thickness, shape, readout }) {
+    return JSON.stringify({ variant, determinate, size, count, thickness, shape, readout });
+  }
+
+  build(cfg) {
+    this.onDisconnected();
+    this._shown = null;
+    const T = fixed(cfg.thickness);
+    const shape = e(cfg.shape);
+    const arc = (cls, value, extra = '') => `<o-arc class="inner-orbit ${cls}" value="${value}" shape="${shape}"${extra}></o-arc>`;
+    let body = '';
+    if (cfg.variant === 'dots') {
+      body = `<div class="orbit-9" style="--o-size-ratio:3.4">${Array.from({ length: cfg.count }, (_, i) =>
+        `<div class="satellite"><div class="capsule ok-spin-dot" style="--i:${i};--n:${cfg.count}"></div></div>`).join('')}</div>`;
+    } else if (cfg.variant === 'segments') {
+      body = `<div class="orbit-12">${Array.from({ length: cfg.count }, (_, i) =>
+        `<div class="vector inner-orbit ok-spin-tick" style="--o-size-ratio:4.6;--i:${i};--n:${cfg.count}"></div>`).join('')}</div>`;
+    } else if (cfg.variant === 'orbit') {
+      const planets = '<div class="satellite"><div class="capsule ok-spin-planet"></div></div>';
+      const moons = '<div class="satellite"><div class="capsule ok-spin-moon"></div></div>'.repeat(cfg.count);
+      body = `<div class="orbit-10 ok-spin-path is-outer" style="--o-size-ratio:3.2">${planets}</div>
+        <div class="orbit-5 ok-spin-path is-inner" style="--o-size-ratio:2.2">${moons}</div>
+        <div class="orbit-0" style="--o-size-ratio:4.2"><div class="satellite at-center"><div class="capsule ok-spin-core"></div></div></div>`;
+    } else {
+      const ring = `--o-size-ratio:${T};--o-gap:0`;
+      const track = `<div class="orbit-12" style="${ring}"><o-arc class="inner-orbit ok-track" value="100"></o-arc></div>`;
+      if (cfg.determinate) {
+        body = `${track}<div class="orbit-12" style="${ring}">${arc('ok-value ok-spin-fill', 0)}</div>` +
+          (cfg.readout ? hub(2 * (12 - cfg.thickness) - 2, '', 'ok-hub ok-spin-readout', ' aria-hidden="true"') : '');
+      } else {
+        // Two equal arcs: one turns steadily, the other eases ahead and falls
+        // behind, so together they draw an arc that stretches and shrinks.
+        body = `${track}<div class="orbit-12 ok-spin-rotor" style="${ring}">${arc('ok-value', 18)}</div>` +
+          `<div class="orbit-12 ok-spin-rotor is-lead" style="${ring}">${arc('ok-value', 18)}</div>`;
+      }
+    }
+    this.innerHTML = universe(cfg.size, body);
+    this._fill = this.querySelector('.ok-spin-fill');
+    this._readout = this.querySelector('.ok-spin-readout');
+  }
+
+  sync(cfg) {
+    this._applyTheme({
+      '--ok-spinner-color': cfg.color, '--ok-spinner-track': cfg.track, '--ok-spinner-accent': cfg.accent,
+      '--ok-spinner-speed': this.hasAttribute('speed') ? `${fixed(cfg.speed)}s` : null
+    });
+    const name = this.getAttribute('label') || 'Loading';
+    if (cfg.determinate) {
+      const range = { min: cfg.min, max: cfg.max };
+      // Without a format, the readout is the share done: 40 of 200 reads 20%.
+      const fallback = () => `${Math.round(cfg.fraction * 100)}%`;
+      const unit = this._formatOptions() ? this._unitText() : '';
+      const text = this._formatText(cfg.value, { ...range, fallback }, unit);
+      if (this._readout) this._readout.textContent = text;
+      this._describe(name, 'progressbar');
+      this._ariaRange(cfg, cfg.value, this._formatText(cfg.value, { ...range, kind: 'aria', fallback }, unit));
+      this.setAttribute('aria-busy', String(cfg.fraction < 1));
+      this._animateTo(cfg.fraction * 100);
+    } else {
+      this._describe(name, 'progressbar');
+      for (const a of ['aria-valuenow', 'aria-valuemin', 'aria-valuemax', 'aria-valuetext']) this.removeAttribute(a);
+      this.setAttribute('aria-busy', 'true');
+    }
+  }
+
+  /** Determinate progress glides to its new value (instantly with reduced motion). */
+  _animateTo(target) {
+    if (!this._fill) return;
+    this.onDisconnected();
+    const from = this._shown;
+    const reduce = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (from == null || reduce || Math.abs(target - from) < .05 || typeof requestAnimationFrame !== 'function') {
+      this._shown = target;
+      this._fill.setAttribute('value', target.toFixed(2));
+      return;
+    }
+    const start = performance.now(), duration = 360;
+    const step = (now) => {
+      const t = Math.min(1, (now - start) / duration), k = 1 - (1 - t) ** 3;
+      this._shown = from + (target - from) * k;
+      this._fill?.setAttribute('value', this._shown.toFixed(2));
+      if (t < 1) this._tween = requestAnimationFrame(step);
+    };
+    this._tween = requestAnimationFrame(step);
+  }
+
+  onDisconnected() { if (this._tween && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(this._tween); this._tween = 0; }
+
+  /** The progress value; undefined while indeterminate. Setting it does not fire events. */
+  get value() {
+    const raw = this.getAttribute('value');
+    return raw == null || raw.trim() === '' ? undefined : this.readConfig().value;
+  }
+  set value(v) {
+    if (v == null || v === '') this.removeAttribute('value');
+    else this.setAttribute('value', String(v));
+  }
+}
+
+injectStyleOnce('orbit-kit-spinner', SPINNER_CSS);
+define('o-spinner', OrbitSpinner);

package/src/o-status.js

@@ -0,0 +1,209 @@
+/**
+ * <o-status>: layered status rings. Each item is a segment colored by its
+ * status; items with `children` become an inner ring of groups with their
+ * children fanned out around them, like a sunburst.
+ *
+ *   .orbit-12 > o-arc[value] × leaves        outer ring (the deepest level)
+ *   .orbit-10 > o-arc[value] × groups        inner ring, each as wide as its children
+ *   .orbit-0  > .satellite.at-center         summary, or the item under the pointer
+ *
+ * Arcs with a `value` stack around their ring, so every group lines up with
+ * its children. Segments are `interactive`, focusable and fire `select`.
+ */
+import { OrbitKitElement, define, injectStyleOnce, universe, hub, fixed, cssValue, escapeHTML as e } from './base.js';
+
+export const STATUSES = ['error', 'warn', 'info', 'ok', 'off'];
+const ALIASES = { good: 'ok', up: 'ok', healthy: 'ok', success: 'ok', warning: 'warn', degraded: 'warn', down: 'error', critical: 'error', fail: 'error', failed: 'error', danger: 'error', unknown: 'off', idle: 'off', disabled: 'off', maintenance: 'info' };
+const WORDS = { ok: 'OK', warn: 'Warning', error: 'Error', info: 'Info', off: 'Off' };
+
+export function normalizeStatus(value) {
+  const key = String(value ?? '').trim().toLowerCase();
+  return STATUSES.includes(key) ? key : (ALIASES[key] || 'off');
+}
+
+const STATUS_CSS = `
+o-status { --ok-font-size: 4.6cqmin; }
+o-status .ok-status-seg { --o-color: var(--ok-status-text, #fff); cursor: pointer; outline: none; transition: filter .15s, opacity .15s; }
+o-status .ok-status-seg[data-status="ok"]    { --o-fill: var(--ok-status-ok, #16a34a); }
+o-status .ok-status-seg[data-status="warn"]  { --o-fill: var(--ok-status-warn, #d97706); }
+o-status .ok-status-seg[data-status="error"] { --o-fill: var(--ok-status-error, #dc2626); }
+o-status .ok-status-seg[data-status="info"]  { --o-fill: var(--ok-status-info, #2563eb); }
+o-status .ok-status-seg[data-status="off"]   { --o-fill: var(--ok-status-off, #475569); }
+o-status .ok-status-seg { --o-stroke: var(--o-fill); }
+o-status .ok-status-seg:is(:hover, :focus-visible) { filter: brightness(1.25) drop-shadow(0 0 4px var(--o-fill)); }
+o-status .ok-status-seg:focus-visible { --o-stroke: var(--ok-focus, #fff); }
+o-status .ok-status-seg.is-selected { filter: brightness(1.3); }
+o-status .ok-status-spacer { --o-fill: transparent; --o-stroke: transparent; }
+o-status[pulse] .ok-status-seg[data-status="error"] { animation: ok-status-pulse 1.6s ease-in-out infinite; }
+@keyframes ok-status-pulse { 50% { opacity: .55; } }
+o-status .ok-status-hub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em; padding: 8%; }
+o-status .ok-status-title { font-size: .95em; opacity: .7; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+o-status .ok-status-main { font-size: 1.9em; font-weight: 700; line-height: 1.05; overflow-wrap: anywhere; }
+o-status .ok-status-sub { font-size: 1em; font-weight: 700; }
+o-status .ok-status-sub[data-status="ok"]    { color: var(--ok-status-ok, #16a34a); }
+o-status .ok-status-sub[data-status="warn"]  { color: var(--ok-status-warn, #d97706); }
+o-status .ok-status-sub[data-status="error"] { color: var(--ok-status-error, #dc2626); }
+o-status .ok-status-sub[data-status="info"]  { color: var(--ok-status-info, #2563eb); }
+o-status .ok-status-sub[data-status="off"]   { color: var(--ok-status-off, #94a3b8); }
+@media (prefers-reduced-motion: reduce) { o-status[pulse] .ok-status-seg { animation: none; } o-status .ok-status-seg { transition: none; } }
+`;
+
+export class OrbitStatus extends OrbitKitElement {
+  static get observedAttributes() {
+    return ['data', 'size', 'thickness', 'gap', 'range', 'from', 'label', 'labels', 'shape', 'pulse'];
+  }
+
+  _norm(items, depth = 0) {
+    if (!Array.isArray(items) || depth > 2) return [];
+    return items.filter((item) => item && typeof item === 'object' && !Array.isArray(item)).map((item, i) => {
+      const children = this._norm(item.children, depth + 1);
+      const own = item.status == null ? null : normalizeStatus(item.status);
+      // A group without its own status shows the worst of its children.
+      const worst = children.length ? STATUSES.find((s) => children.some((c) => c.status === s)) : null;
+      return {
+        label: item.label != null ? String(item.label) : `Item ${i + 1}`,
+        status: own ?? worst ?? 'off',
+        note: item.note == null ? null : String(item.note),
+        color: cssValue(item.color, null),
+        value: item.value,
+        children,
+        leaves: children.length ? children.reduce((n, c) => n + c.leaves, 0) : 1
+      };
+    });
+  }
+
+  readConfig() {
+    const items = this._norm(this._json('data', []));
+    const depth = (list) => list.reduce((n, item) => Math.max(n, item.children.length ? 1 + depth(item.children) : 1), 0);
+    const levels = Math.max(1, depth(items));
+    const thickness = this._thickness(levels === 1 ? 2.4 : 2, 4);
+    const range = Math.max(0, Math.min(360, this._num('range', 360)));
+    return {
+      items, levels, thickness, spacing: Math.max(1, Math.ceil(thickness + .15)),
+      range, from: this.hasAttribute('from') ? this._num('from', 0) : (range === 360 ? 0 : this._autoFrom(range)),
+      gap: this._gap(.8), size: this._size('size', '220px'), label: this.getAttribute('label'),
+      labels: this.hasAttribute('labels') && this.getAttribute('labels') !== 'false', shape: this._str('shape', 'none')
+    };
+  }
+
+  structuralSignature(cfg) { const { label, ...rest } = cfg; return JSON.stringify(rest); }
+
+  build(cfg) {
+    injectStyleOnce('orbit-kit-status', STATUS_CSS);
+    const total = cfg.items.reduce((n, item) => n + item.leaves, 0) || 1;
+    this._levels = [];
+    let rings = '';
+    // Level d holds the items at depth d; an item that ends early leaves a
+    // transparent spacer in the outer rings so everything stays aligned.
+    let row = cfg.items.map((item, i) => ({ item, path: [i] }));
+    for (let d = 0; d < cfg.levels; d++) {
+      const orbit = 12 - (cfg.levels - 1 - d) * cfg.spacing;
+      let before = 0;
+      const arcs = row.map(({ item, path, spacer }) => {
+        const value = fixed(item.leaves / total * 100, 4);
+        const phi = ((cfg.from + (before + item.leaves / 2) / total * cfg.range) % 360 + 360) % 360;
+        before += item.leaves;
+        if (spacer) return `<o-arc class="inner-orbit ok-status-spacer" value="${value}" aria-hidden="true"></o-arc>`;
+        const name = `${item.label}: ${WORDS[item.status]}${item.note ? `, ${item.note}` : ''}`;
+        const color = item.color ? ` style="--o-fill:${e(item.color)}"` : '';
+        return `<o-arc class="inner-orbit ok-status-seg" interactive role="button" tabindex="-1" data-path="${path.join('.')}" data-status="${item.status}" aria-label="${e(name)}" value="${value}" shape="${e(cfg.shape)}"${cfg.labels && phi > 90 && phi < 270 ? ' flip' : ''}${color}>${cfg.labels ? e(item.label) : ''}</o-arc>`;
+      }).join('');
+      rings += `<div class="orbit-${orbit} ok-status-ring" style="--o-range:${cfg.range}deg;--o-from:${fixed(cfg.from)}deg;--o-size-ratio:${fixed(cfg.thickness)};--o-gap:${fixed(cfg.gap * 6)};font-weight:700">${arcs}</div>`;
+      row = row.flatMap(({ item, path, spacer }) => item.children.length && !spacer
+        ? item.children.map((child, i) => ({ item: child, path: [...path, i] }))
+        : [{ item, path, spacer: true }]);
+    }
+    const hole = 12 - (cfg.levels - 1) * cfg.spacing - cfg.thickness;
+    this.innerHTML = universe(cfg.size, `${rings}
+      ${hub(2 * hole - .6, '<span class="ok-status-title" hidden></span><span class="ok-status-main"></span><span class="ok-status-sub"></span>', 'ok-hub ok-status-hub', ' aria-hidden="true"')}`);
+    this._segments = [...this.querySelectorAll('.ok-status-seg')];
+    this._title = this.querySelector('.ok-status-title');
+    this._main = this.querySelector('.ok-status-main');
+    this._sub = this.querySelector('.ok-status-sub');
+    for (const seg of this._segments) {
+      seg.addEventListener('click', () => { seg.focus(); this._select(seg); });
+      seg.addEventListener('pointerenter', () => this._show(seg));
+      seg.addEventListener('pointerleave', () => this._show(this.contains(this.ownerDocument.activeElement) ? this.ownerDocument.activeElement : null));
+      seg.addEventListener('focus', () => { this._roving(seg); this._show(seg); });
+      seg.addEventListener('blur', () => this._show(null));
+    }
+    this._roving(this._segments.find((s) => s.dataset.path === this._focusPath) || this._segments[0]);
+    if (!this._keys) {
+      this._keys = true;
+      this.addEventListener('keydown', (event) => this._onKey(event));
+    }
+  }
+
+  sync(cfg) {
+    this._cfg = cfg;
+    const leaves = [];
+    const walk = (list) => list.forEach((item) => (item.children.length ? walk(item.children) : leaves.push(item)));
+    walk(cfg.items);
+    const counts = Object.fromEntries(STATUSES.map((s) => [s, leaves.filter((l) => l.status === s).length]));
+    this._counts = counts;
+    this._leaves = leaves;
+    if (this._title) { this._title.textContent = cfg.label ?? ''; this._title.hidden = !cfg.label; }
+    this._show(this.contains?.(this.ownerDocument?.activeElement) ? this.ownerDocument.activeElement : null);
+    const parts = STATUSES.filter((s) => counts[s]).map((s) => `${counts[s]} ${WORDS[s].toLowerCase()}`);
+    this._describe(`${cfg.label ? `${cfg.label}: ` : ''}${parts.join(', ') || 'no items'}`, 'group');
+  }
+
+  /** The hub: the item under the pointer or in focus, else a summary. */
+  _show(seg) {
+    if (!this._main || !this._cfg) return;
+    const item = seg?.dataset?.path ? this._itemAt(seg.dataset.path) : null;
+    if (item) {
+      this._main.textContent = item.label;
+      this._sub.textContent = item.note ? `${WORDS[item.status]} · ${item.note}` : WORDS[item.status];
+      this._sub.dataset.status = item.status;
+      return;
+    }
+    const counts = this._counts || {};
+    const issues = (counts.error || 0) + (counts.warn || 0);
+    const worst = STATUSES.find((s) => s !== 'off' && s !== 'info' && counts[s]) || 'off';
+    this._main.textContent = issues ? String(issues) : `${counts.ok || 0}/${this._leaves?.length || 0}`;
+    const total = this._leaves?.length || 0;
+    this._sub.textContent = issues ? (issues === 1 ? 'issue' : 'issues') : (!total ? 'no items' : counts.ok === total ? 'all OK' : 'OK');
+    this._sub.dataset.status = issues ? worst : (counts.ok ? 'ok' : 'off');
+  }
+
+  _itemAt(path) {
+    let list = this._cfg.items, item;
+    for (const index of String(path).split('.').map(Number)) { item = list[index]; if (!item) return null; list = item.children; }
+    return item;
+  }
+
+  _roving(seg) {
+    if (!seg) return;
+    this._focusPath = seg.dataset.path;
+    for (const other of this._segments || []) other.tabIndex = other === seg ? 0 : -1;
+  }
+
+  _select(seg) {
+    const item = this._itemAt(seg.dataset.path);
+    if (!item) return;
+    for (const other of this._segments) other.classList.toggle('is-selected', other === seg);
+    const path = seg.dataset.path.split('.').map(Number);
+    this.dispatchEvent(new CustomEvent('select', { detail: { label: item.label, status: item.status, note: item.note, value: item.value, item, path }, bubbles: true, composed: true }));
+  }
+
+  _onKey(event) {
+    const current = event.target?.closest?.('.ok-status-seg');
+    if (!current) return;
+    const depth = current.dataset.path.split('.').length;
+    const same = this._segments.filter((s) => s.dataset.path.split('.').length === depth);
+    const i = same.indexOf(current);
+    let next = null;
+    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') next = same[(i + (event.key === 'ArrowRight' ? 1 : -1) + same.length) % same.length];
+    else if (event.key === 'Home') next = same[0];
+    else if (event.key === 'End') next = same[same.length - 1];
+    else if (event.key === 'ArrowUp') next = this._segments.find((s) => s.dataset.path.startsWith(`${current.dataset.path}.`));
+    else if (event.key === 'ArrowDown') next = depth > 1 ? this._segments.find((s) => s.dataset.path === current.dataset.path.split('.').slice(0, -1).join('.')) : null;
+    else if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); this._select(current); return; }
+    else return;
+    event.preventDefault();
+    if (next) { this._roving(next); next.focus(); }
+  }
+}
+
+define('o-status', OrbitStatus);