@zumer/orbit-kit 0.1.0 → 2.1.0

package/README.md

@@ -1,395 +1,189 @@
-# @zumer/orbit-kit
+# Orbit Kit
 
-High-level, declarative web components built on top of the
-[Orbit](https://github.com/zumerlab/orbit) CSS framework.
-
-Orbit gives you **primitives** — a CSS engine for radial layout. It's powerful,
-but composing a single widget means nesting five levels
-(`.bigbang > .gravity-spot > .orbit-N > .satellite > .capsule`) and getting the
-rules exactly right. That depth is the main barrier to entry, for humans *and*
-for LLMs.
-
-**orbit-kit** wraps the common radial patterns into one-line custom elements —
-gauges, charts, activity rings, knobs, pie menus, cockpit instruments, analog
-clocks, compasses and radars:
+Ready-made radial components built on [Orbit](https://github.com/zumerlab/orbit): gauges, donut charts, activity rings, knobs, radial menus, instruments, clocks, compasses, radars, timers and status rings. One tag each.
 
 ```html
-<!-- Before: raw primitives -->
-<div class="bigbang" style="width:200px;aspect-ratio:1">
-  <div class="gravity-spot">
-    <div class="orbit-4" style="--o-range:270deg;--o-from:225deg">
-      <o-progress value="72" shape="rounded"
-        style="--o-fill:#6366f1;--o-stroke-width:8"></o-progress>
-    </div>
-    <div class="orbit-0">
-      <div class="satellite at-center"><div class="capsule">72%</div></div>
-    </div>
-  </div>
-</div>
-
-<!-- After: orbit-kit -->
 <o-gauge value="72" unit="%"></o-gauge>
 ```
 
----
+That tag writes the Orbit structure you would write by hand into the page: a `.bigbang`, a `.gravity-spot`, a ring, two arcs and a readout. It scales with its box, takes your CSS and shows up as plain elements in the inspector. When you need something the kit does not do, start from what it built.
+
+[Documentation and live examples](https://zumerlab.com/orbit/kit/)
 
 ## Install
 
-```bash
+The kit needs Orbit 2 on the page: its stylesheet, and its script, which draws the arcs.
+
+```sh
 npm install @zumer/orbit @zumer/orbit-kit
 ```
 
 ```js
-import '@zumer/orbit/style'   // Orbit CSS engine
-import '@zumer/orbit'         // Orbit core web components (<o-arc>, <o-progress>)
-import '@zumer/orbit-kit'     // registers every kit component
+import '@zumer/orbit/style'
+import '@zumer/orbit'
+import '@zumer/orbit-kit'
 ```
 
-Or straight from a CDN — no build step:
+Or in a plain page:
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css">
-<script src="https://unpkg.com/@zumer/orbit@latest/dist/orbit.js"></script>
-<script type="module" src="https://unpkg.com/@zumer/orbit-kit@latest/src/orbit-kit.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/@zumer/orbit/dist/orbit.min.css">
+<script defer src="https://unpkg.com/@zumer/orbit/dist/orbit.min.js"></script>
+<script type="module" src="https://unpkg.com/@zumer/orbit-kit/src/orbit-kit.js"></script>
 ```
 
-`@zumer/orbit` is a **peer dependency** — the kit assumes the Orbit core (CSS +
-`<o-arc>` / `<o-progress>`) is present on the page.
-
-Every component is a standard custom element, so it works in plain HTML and in
-any framework (React, Vue, Svelte, Angular). Import the whole kit, or just the
-components you use:
+The entry registers every component. To load only the ones you use, import their files:
 
 ```js
-import '@zumer/orbit-kit/src/o-gauge.js'
-import '@zumer/orbit-kit/src/o-clock.js'
+import '@zumer/orbit-kit/o-gauge.js'
+import '@zumer/orbit-kit/o-timer.js'
 ```
 
----
+`@zumer/orbit` 2 is a peer dependency. The kit does not work with Orbit 1.x. Components are standard custom elements, so they work in plain HTML and in any framework that renders the DOM.
+
+Inside a shadow root (a card, a component of yours) the page's stylesheets do not reach the components. The kit adopts its own stylesheets into that root on its own. Orbit's stylesheet is yours to put there, as for any Orbit layout in shadow DOM: `root.adoptedStyleSheets = [orbitSheet]`, or a `<link>` inside the root. `base.js` exports `adoptKitStyles(root)` for a root you fill before any component connects.
 
 ## Components
 
 | Tag | What it is |
-|-----|------------|
-| [`<o-gauge>`](#o-gauge) | Single-value radial gauge |
-| [`<o-donut>`](#o-donut) | Data-driven donut / pie chart |
-| [`<o-rings>`](#o-rings) | Apple-style concentric activity rings |
-| [`<o-knob>`](#o-knob) | Interactive rotary control (drag / wheel / keys) |
-| [`<o-menu>`](#o-menu) | Radial / pie menu — single- & multi-level |
-| [`<o-instrument>`](#o-instrument) | Cockpit / dashboard gauges (tach, speedo, fuel, airspeed…) |
-| [`<o-clock>`](#o-clock) | Analog clock / watch face — the flagship |
-| [`<o-compass>`](#o-compass) | Heading indicator |
-| [`<o-radar>`](#o-radar) | Radar / scope display |
-
-Common conventions across the kit:
-
-- **`size`** sets the widget's pixel width (square aspect). Components scale
-  Orbit's `--o-force` internally so they actually fill that box.
-- **`glow`** is an opt-in neon drop-shadow tinted with the indicator color
-  (`glow` or `glow="12"` for the blur radius).
-- **`data` / `items` / `zones` / `targets`** take a JSON array in the attribute.
-- Set attributes to update live (`el.setAttribute('value', 88)`); interactive
-  components also expose JS properties and events.
-
----
-
-### `<o-gauge>`
-
-A single value on an arc, with a center readout.
+| --- | --- |
+| [`<o-gauge>`](https://zumerlab.com/orbit/kit/gauge.html) | One value on an arc, with a readout. |
+| [`<o-donut>`](https://zumerlab.com/orbit/kit/donut.html) | A donut chart from a JSON array. |
+| [`<o-rings>`](https://zumerlab.com/orbit/kit/rings.html) | Concentric activity rings. |
+| [`<o-knob>`](https://zumerlab.com/orbit/kit/knob.html) | A rotary control: pointer, wheel and keys. |
+| [`<o-menu>`](https://zumerlab.com/orbit/kit/menu.html) | A radial menu, flat or nested. |
+| [`<o-instrument>`](https://zumerlab.com/orbit/kit/instrument.html) | Needle gauges with ticks, zones and presets. |
+| [`<o-clock>`](https://zumerlab.com/orbit/kit/clock.html) | Clocks and watch faces, live or fixed. |
+| [`<o-compass>`](https://zumerlab.com/orbit/kit/compass.html) | A heading indicator. |
+| [`<o-radar>`](https://zumerlab.com/orbit/kit/radar.html) | A scope with a sweep and blips. |
+| [`<o-timer>`](https://zumerlab.com/orbit/kit/timer.html) | A countdown ring with start, pause and reset. |
+| [`<o-status>`](https://zumerlab.com/orbit/kit/status.html) | Health of many things as colored segments, in layers. |
+| [`<o-range>`](https://zumerlab.com/orbit/kit/range.html) | A circular range slider: two handles, numbers or times of day. |
+| [`<o-time-picker>`](https://zumerlab.com/orbit/kit/time-picker.html) | A clock-face time picker: hours, then minutes. |
+| [`<o-spinner>`](https://zumerlab.com/orbit/kit/spinner.html) | A loading indicator in five variants, with determinate progress. |
+| [`<o-radar-chart>`](https://zumerlab.com/orbit/kit/radar-chart.html) | A radar (spider) chart: one polygon per series on a shared web. |
+| [`<o-sunburst>`](https://zumerlab.com/orbit/kit/sunburst.html) | A tree as nested rings: hover a branch, click to zoom in. |
+| [`<o-wheel>`](https://zumerlab.com/orbit/kit/wheel.html) | A prize wheel: spins, slows down and lands on a result picked by weight. |
+| [`<o-color-wheel>`](https://zumerlab.com/orbit/kit/color-wheel.html) | A color picker: hue ring, saturation and brightness square, swatches. A form control. |
+
+`<o-meter>`, a basic needle gauge from 0.x, still ships. `<o-instrument>` does all it does and more.
+
+A few of them:
 
 ```html
-<o-gauge value="72" unit="%"></o-gauge>
-<o-gauge value="125" max="240" label="125 km/h" range="360" glow></o-gauge>
-```
+<o-donut label="$2.4k" data='[{"value":52,"label":"Rent"},{"value":28,"label":"Food"},{"value":20,"label":"Other"}]'></o-donut>
 
-| Attribute | Default | Description |
-|---|---|---|
-| `value` | `0` | Current value. |
-| `max` | `100` | Value that fills the whole arc. |
-| `range` | `270` | Arc span in degrees (`360` = full ring, `180` = semicircle). |
-| `from` | auto | Start angle; defaults so the gap sits at the bottom. |
-| `size` | `200px` | Widget width. |
-| `label` | — | Center text; overrides the auto `value`+`unit`. |
-| `unit` | `""` | Suffix on the value (`%`, `km/h`). |
-| `fill` | `#6366f1` | Progress color. |
-| `track` | `#262d38` | Background ring color. |
-| `stroke-width` | `8` | Ring thickness. |
-| `shape` | `rounded` | Arc cap shape (`rounded`, `none`). |
-| `glow` | off | Neon glow on the progress arc. |
+<o-knob value="65" unit="%" aria-label="Volume"></o-knob>
 
----
+<o-instrument preset="tachometer" value="6.2"></o-instrument>
 
-### `<o-donut>`
+<o-clock preset="chrono" live></o-clock>
 
-A donut / pie chart from a JSON data array. Values are normalized to their sum,
-or to an explicit `total` for a partial ring.
+<o-timer duration="1:30" label="Tea"></o-timer>
 
-```html
-<o-donut label="$2.4k"
-  data='[{"value":52,"color":"#f97316","label":"Rent"},
-         {"value":28,"color":"#eab308"},
-         {"value":20,"color":"#22c55e"}]'></o-donut>
+<o-status label="Services" data='[{"label":"API","status":"ok"},{"label":"DB","status":"warn"},{"label":"Queue","status":"down"}]'></o-status>
 ```
 
-| Attribute | Default | Description |
-|---|---|---|
-| `data` | `[]` | `[{ value, color?, label? }]`. Colors fall back to a palette. |
-| `total` | sum | Denominator; set it for a partial ring (e.g. `total="100"`). |
-| `range` / `from` | `360` / `0` | Arc span and start angle. |
-| `stroke-width` | `14` | Ring thickness. |
-| `gap` | `2` | Spacing between segments. |
-| `shape` | `none` | Segment caps (`none`, or `rounded` to opt in). |
-| `track` | faint | Background ring color. |
-| `label` / `unit` | — | Center text. |
-| `glow` | off | Neon glow per segment. |
+Every attribute, event and custom property is on the component's page in the documentation.
 
----
+## What they share
 
-### `<o-rings>`
+- `size` sets the width with any CSS length. `100%` follows the container as it resizes.
+- `thickness` sets band thickness in lanes, Orbit's unit: a twelfth of the radius.
+- `fill` and `track` color the band components; `accent` is the highlight of the dial components.
+- `label` and `unit` set the text in the middle; `range` and `from` the arc span and start angle.
+- `min`, `max`, `step`, `format` and `theme`: see [Shared options](#shared-options).
+- `glow` adds a glow in the indicator color (`glow="12"` for the blur in px).
+- Lists (`data`, `items`, `targets`, `zones`) are JSON in the attribute.
+- Change an attribute and the component updates. Values only move what moves.
 
-Apple-style concentric activity rings (outer ring first). Each ring gets a dim,
-solid track in its own color.
+Colors are custom properties that inherit, so one rule themes a whole panel:
 
-```html
-<o-rings data='[{"value":80,"color":"#fa114f"},
-                {"value":55,"color":"#a3ff00"},
-                {"value":92,"color":"#00fff0"}]'></o-rings>
+```css
+.dashboard {
+  --ok-fill: #2dd4bf;
+  --ok-track: #12302c;
+  --ok-accent: #f97316;
+  --ok-text: #e2e8f0;
+}
 ```
 
-| Attribute | Default | Description |
-|---|---|---|
-| `data` | `[]` | `[{ value, max?, color?, label? }]`. |
-| `range` / `from` | `360` | Arc span and start angle. |
-| `stroke-width` | `12` | Ring thickness. |
-| `step` | `1` | Orbit gap between rings. |
-| `track` | auto | Track color (defaults to a dim wash of each ring's color). |
-| `shape` | `rounded` | Cap shape. |
-| `label` / `unit` | — | Center text. |
-| `glow` | off | Neon glow per ring. |
+Text scales with the widget: the base font size is a share of its box (`--ok-font-size`) and readouts are sized in `em`.
 
----
+## Shared options
 
-### `<o-knob>`
+Four things work the same in every component that has them.
 
-An interactive rotary control that behaves like a form input.
+**Themes.** `theme="dark"`, `"light"` or `"glass"` on a component, or the class `ok-theme-dark`, `ok-theme-light` or `ok-theme-glass` on a container, and everything inside follows. A theme is only a set of the `--ok-*` properties above, at zero specificity, so any rule of yours still wins. Without a theme nothing changes.
 
 ```html
-<o-knob value="65" unit="%" fill="#3da9fc"></o-knob>
+<section class="ok-theme-light">
+  <o-gauge value="64" unit="%"></o-gauge>
+  <o-knob value="40"></o-knob>
+</section>
 ```
 
-```js
-knob.addEventListener('input',  e => console.log(e.detail.value)); // while dragging
-knob.addEventListener('change', e => console.log(e.detail.value)); // on release
-knob.value = 40;                                                   // read / write
-```
-
-Drag vertically, scroll the wheel, or use arrow keys / Page Up·Down / Home·End
-when focused. `role="slider"` + ARIA values are set for you.
-
-| Attribute | Default | Description |
-|---|---|---|
-| `value` | `min` | Current value. |
-| `min` / `max` | `0` / `100` | Range. |
-| `step` | `1` | Increment for keys / wheel and snapping. |
-| `range` / `from` | `270` / auto | Arc span and start angle. |
-| `size` | `160px` | Widget width. |
-| `fill` | `#a1a1aa` | Value color. |
-| `track` | `#27272a` | Track color. |
-| `stroke-width` | `14` | Ring thickness. |
-| `unit` / `label` | — | Center readout. |
-| `disabled` | off | Non-interactive + dimmed. |
-| `glow` | off | Neon glow on the value arc. |
-
----
-
-### `<o-menu>`
-
-A radial / pie menu. Items may nest via `children` for multi-level menus, with
-two ways to reveal a branch.
+**Number format.** `format` is `decimal`, `percent`, `currency`, `unit` or `compact`, with `decimals`, `currency` and `locale`. It goes through `Intl.NumberFormat` and reaches readouts, tick labels and `aria-valuetext`. `percent` shows where the value sits between `min` and `max`. `unit` stays plain text after the number, except with `format="unit"`, where it names an Intl unit. For full control, set a function:
 
 ```html
-<o-menu label="EDIT" expand="concentric"
-  items='[
-    {"label":"Size","icon":"🔠","children":[
-      {"label":"Bigger","value":"size.up"},
-      {"label":"Smaller","value":"size.down"}]},
-    {"label":"Format","icon":"✏️","children":[
-      {"label":"Bold","value":"fmt.bold"},
-      {"label":"Italic","value":"fmt.italic"}]},
-    {"label":"Color","icon":"🎨","value":"color"}]'></o-menu>
+<o-gauge value="1234.5" max="5000" format="currency" currency="EUR" locale="de-DE"></o-gauge>
+<o-instrument max="240" value="88" format="unit" unit="kilometer-per-hour"></o-instrument>
 ```
 
 ```js
-menu.addEventListener('select',   e => e.detail); // { value, label, item, path }
-menu.addEventListener('navigate', e => e.detail); // { path, depth }
-menu.back(); menu.reset(); menu.path;             // navigation API
+gauge.formatter = (value, { kind }) => kind === 'tick' ? `${value}` : `${value} pts`
 ```
 
-| Attribute | Default | Description |
-|---|---|---|
-| `items` | `[]` | `[{ label, value?, color?, icon?, children? }]` (recursive). |
-| `expand` | `drill` | `drill` (ring replaces itself, center = back) or `concentric` (parent stays, children fan out — the editor look). |
-| `theme` | `mono` | `mono` (slate sectors tinted by `accent` on hover/active) or `color` (refined per-item palette). |
-| `accent` | `#3da9fc` | Accent for the `mono` theme. |
-| `range` / `from` | `360` | Arc span and start angle (`270` for a quick action wheel). |
-| `size` | `280px` | Widget width. |
-| `gap` | `6` | Spacing between sectors. |
-| `label` | `MENU` | Center / breadcrumb text. |
+**min, max and step.** Every component with a value reads them the way `<input type="range">` does: values are clamped, `step` snaps them (`step="any"` turns it off), and a `max` below `min` becomes `min`. Arrow keys move one step, Page Up and Page Down ten.
 
-Keyboard: arrows move focus, Enter activates, Esc / Backspace goes back.
-
----
-
-### `<o-instrument>`
-
-Cockpit / dashboard gauges with major + minor ticks, color zones, a redline, a
-numeric scale, a needle and a digital readout. Driven by **presets**, or
-configured by hand.
-
-```html
-<o-instrument preset="tachometer" value="6.2"></o-instrument>
-<o-instrument preset="airspeed" value="120"></o-instrument>
-<o-instrument min="0" max="100" value="40" unit="%" label="LOAD"
-  zones='[{"from":85,"to":100,"color":"#ef4444"}]'></o-instrument>
-```
-
-**Presets:** `tachometer`, `speedometer`, `fuel`, `temp`, `boost`, `voltmeter`,
-`airspeed`, `altimeter`, `cpu`, `gpu`, `vu`. Any attribute below overrides the
-preset.
-
-| Attribute | Default | Description |
-|---|---|---|
-| `value` | `min` | Current reading. |
-| `min` / `max` | `0` / `100` | Scale range. |
-| `range` / `from` | `270` / auto | Arc span and start angle. |
-| `ticks` | `7` | Major tick / label count. |
-| `minor` | `5` | Minor ticks between each pair of majors. |
-| `zones` | `[]` | `[{ from, to, color }]` color bands (in value units). |
-| `redline` | — | Sugar: a red zone from this value to `max`. |
-| `tick-labels` | numeric | Custom scale labels, e.g. `'["E","½","F"]'`. |
-| `unit` / `label` | — | Readout unit and caption. |
-| `digital` | on | Show the numeric readout. |
-| `case` | auto | `round`, `square`, `rounded`, or `bare` (auto for ≤180° arcs). |
-| `accent` / `needle-color` / `tick-color` / `face` / `bezel` | — | Theming. |
-| `size` | `240px` | Widget width. |
-| `glow` | off | Neon glow on the needle / zones. |
-
-> `<o-meter>` (a basic speedometer) still ships for back-compat but is
-> superseded by `<o-instrument preset="speedometer">`.
-
----
-
-### `<o-clock>`
-
-The flagship: an analog clock / watch face. Live or static, with case shapes,
-an oval (tonneau) dial, numerals, smartwatch complications, chronograph
-sub-dials, and an iOS activity-rings face.
+**Forms.** `<o-knob>` and `<o-menu>` are form controls. Give them a `name` and they submit with the form, follow `disabled` (also from a `<fieldset>`), reset with it and come back on page restore. The menu takes `required` and a `value` to start from. Both fire `input` and `change` like native inputs; setting `value` from code fires neither.
 
 ```html
-<o-clock live seconds></o-clock>                          <!-- ticking wall clock -->
-<o-clock time="10:08:42" numerals="roman" case="square"></o-clock>
-<o-clock preset="smartwatch" live brand="ORBIT"></o-clock>
-<o-clock preset="chrono" live></o-clock>                   <!-- tri-compax sub-dials -->
-<o-clock case="rectangle" dial="oval" live smooth></o-clock>   <!-- tonneau -->
-<o-clock dial="rings" live seconds></o-clock>              <!-- iOS activity-ring clock -->
+<form>
+  <o-knob name="volume" value="30"></o-knob>
+  <o-menu name="action" required items='[{"label":"Cut","value":"cut"},{"label":"Copy","value":"copy"}]'></o-menu>
+</form>
 ```
 
-**Presets:** `classic`, `roman`, `minimal`, `chrono`, `smartwatch`.
-
-| Attribute | Default | Description |
-|---|---|---|
-| `time` | now | Static `HH:MM[:SS]`. Omit for the current time. |
-| `live` | off | Tick with the real clock. |
-| `smooth` | off | Sweeping (not ticking) second hand; implies `seconds`. |
-| `seconds` | off | Show a second hand. |
-| `numerals` | `arabic` | `arabic`, `roman`, or `none`. |
-| `case` | `round` | `round`, `square`, `rounded`, `rectangle`. |
-| `dial` | `round` | `round`, `oval` (tonneau, matches the case), or `rings` (iOS face). |
-| `digital` / `date` / `brand` | off / off / — | Complications. |
-| `subdials` | off | Chronograph sub-dials (small-seconds / 24h / date). |
-| `accent` / `hand-color` / `tick-color` / `face` / `bezel` / `case-bg` | — | Theming (also via CSS vars, e.g. `--ok-clock-accent`). |
-| `size` | `300px` | Widget width. |
-| `glow` | off | Neon glow on the hands. |
+Every component has a role and a name that follow its value: gauges and instruments are meters, the knob is a slider, the menu is a menu, the timer is a timer. `aria-valuetext` uses the number format. An `aria-label` of yours is kept. Decorative motion stops with `prefers-reduced-motion`.
 
----
+## How it works
 
-### `<o-compass>`
+Components render into the light DOM on purpose. Orbit places things with global CSS and inherited `--o-*` properties, and its runtime watches the document to number rings and draw arcs, so the kit's markup has to live where both can reach it. Each component is sized by its universe, like any Orbit 2 layout: the `.bigbang` is as wide as `size`, `orbit-12` touches its edge, and everything else is laid out in lanes.
 
-A heading indicator: a fixed dial with a top lubber index; the card (ticks +
-cardinals) rotates so the current `heading` sits under the index.
+## Coming from 0.x
 
-```html
-<o-compass heading="045"></o-compass>
-<o-compass heading="120" labels="N,NE,E,SE,S,SW,W,NW"></o-compass>
-```
+Tag names and attributes still work. What changed is underneath:
 
-| Attribute | Default | Description |
-|---|---|---|
-| `heading` | `0` | Heading in degrees (clockwise from North). |
-| `labels` | `N,E,S,W` | Cardinal labels (comma-separated). |
-| `fill` | `#ef4444` | Accent (north tick + lubber). |
-| `unit` | `°` | Readout suffix. |
-| `size` | `220px` | Widget width. |
+- The kit runs on Orbit 2.
+- Components are sized by their universe instead of a scaled `--o-force`. The outer band touches the edge of the widget, so a gauge looks a little bigger in the same `size`.
+- `thickness` sets band thickness. `orbit` and `stroke-width` still work as before.
+- `gap` is a share of the widget width, the same in the donut, the menu and the status ring.
+- Colors are custom properties you can set from CSS.
+- New: `<o-timer>`, `<o-status>`, `min` on the gauge, `accent` on the compass and the radar.
 
----
+The [CHANGELOG](CHANGELOG.md) has the full list.
 
-### `<o-radar>`
+## Development
 
-A radar / scope: concentric range rings, cross-hair spokes, a rotating
-conic-gradient sweep, and glowing blips.
-
-```html
-<o-radar rings="4" spokes="12" label="SCAN"
-  targets='[{"angle":60,"dist":0.8},
-            {"angle":200,"dist":0.45},
-            {"angle":310,"dist":0.65,"color":"#ef4565"}]'></o-radar>
+```sh
+npm install
+npx playwright install chromium
+npm test
 ```
 
-| Attribute | Default | Description |
-|---|---|---|
-| `targets` | `[]` | `[{ angle, dist, color? }]` — `angle` °CW from top, `dist` 0–1. |
-| `rings` | `4` | Concentric range rings. |
-| `spokes` | `8` | Radial cross-hair lines. |
-| `sweep` | on | The rotating beam (`sweep="false"` to hide). |
-| `sweep-width` | `110` | Beam span in degrees. |
-| `speed` | `4` | Seconds per revolution. |
-| `color` | `#22d3ee` | Scope color. |
-| `label` | — | Center label. |
-| `size` | `240px` | Widget width. |
-
----
-
-## How it works
-
-orbit-kit components render their structure into the **light DOM** (not shadow
-DOM) on purpose. Orbit positions elements through global CSS (`cos()` / `sin()`
-/ `:has()`) and inherited `--o-*` custom properties, so a layout-composing
-component must live in the light DOM for the engine and the cascade to reach it.
-The generated markup is exactly the documented Orbit structure — "view source"
-stays honest. Inspect any component in devtools to see the rings, satellites and
-arcs it expands into.
+`npm test` runs the Node checks and a browser suite against a real Orbit 2 build. It uses `ORBIT_DIR` when set, then a sibling `../orbit` checkout with a fresh `dist/`, then `node_modules/@zumer/orbit`. Chromium is required; Firefox and WebKit run when installed (`BROWSERS=chromium,firefox,webkit` makes them required). The browser suite fails on page errors, console errors and any `[orbit]` warning.
 
-Everything is theme-able through plain CSS custom properties; the convenience
-attributes above just map onto them.
+To try changes in the documentation site, copy `src/` to `docs/kit/src/` in the Orbit repository and run its `npm run demo`; a sibling `orbit-kit` checkout is picked up on its own.
 
-## Examples
-
-Live showcase of every component: **[zumerlab.com/orbit-kit](https://zumerlab.com/orbit-kit)**
-(source in [`docs/index.html`](docs/index.html)).
+## Browser support
 
-To run it locally, serve the repo over HTTP so the ES modules load:
+Modern evergreen browsers. Orbit needs CSS `sin()`, `cos()`, container query units and `:has()`; the radar and clock faces also use `conic-gradient` and `color-mix()`.
 
-```bash
-npx serve .
-# then open /docs/index.html
-```
-
-## Browser support
+## Sponsor
 
-Modern evergreen browsers. Orbit relies on `:has()` and CSS trigonometric
-functions (`cos`, `sin`); the radar/clock visuals use `conic-gradient` and
-`color-mix`. Orbit shows an upgrade notice on unsupported browsers.
+Orbit Kit is free and made in spare time. If it saves you time, you can [sponsor it on GitHub](https://github.com/sponsors/tinchox5).
 
 ## License
 
-[MIT](LICENSE) — Juan Martin Muda · [Zumerlab](https://github.com/zumerlab)
+[MIT](LICENSE). Juan Martín Muda, [Zumerlab](https://github.com/zumerlab).

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@zumer/orbit-kit",
-  "version": "0.1.0",
-  "description": "High-level, declarative web components on top of the Orbit CSS framework — gauges, charts, activity rings, knobs, pie menus, cockpit instruments, analog clocks, compasses and radars, each in one tag.",
+  "version": "2.1.0",
+  "description": "Ready-made radial web components built on Orbit 2: gauges, donut charts, activity rings, knobs, radial menus, instruments, clocks, compasses, radars, timers and status rings, one tag each.",
   "type": "module",
   "main": "src/orbit-kit.js",
   "module": "src/orbit-kit.js",
   "exports": {
     ".": "./src/orbit-kit.js",
+    "./src/*": "./src/*",
     "./*": "./src/*"
   },
   "files": [
@@ -16,12 +17,15 @@
     "./src/*.js"
   ],
   "scripts": {
-    "test": "node test/smoke.mjs",
+    "demo": "node scripts/demo.mjs",
+    "test": "npm run test:unit && npm run test:browser",
     "shots": "node test/shoot.mjs",
-    "shots:menus": "node test/shoot-menus.mjs"
+    "shots:menus": "node test/shoot-menus.mjs",
+    "test:unit": "node test/package.mjs && node test/smoke.mjs && node test/control-regressions.mjs && node test/data-regressions.mjs && node test/shared-options.mjs && node test/spinner.mjs && node test/radar-chart.mjs && node test/range.mjs && node test/time-picker.mjs && node test/sunburst.mjs && node test/wheel.mjs && node test/color-wheel.mjs",
+    "test:browser": "node test/browser.mjs && node test/browser-spinner.mjs && node test/browser-radar-chart.mjs && node test/browser-range.mjs && node test/browser-time-picker.mjs && node test/browser-sunburst.mjs && node test/browser-wheel.mjs && node test/browser-color-wheel.mjs"
   },
   "peerDependencies": {
-    "@zumer/orbit": "^1.4.9"
+    "@zumer/orbit": "^2.0.0"
   },
   "devDependencies": {
     "playwright": "^1.55.1"
@@ -42,9 +46,13 @@
     "dashboard",
     "circular",
     "ui",
-    "zumerlab"
+    "zumerlab",
+    "timer",
+    "countdown",
+    "status",
+    "health"
   ],
-  "homepage": "https://zumerlab.com/orbit-kit",
+  "homepage": "https://zumerlab.com/orbit/kit/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zumerlab/orbit-kit.git"
@@ -53,5 +61,9 @@
     "url": "https://github.com/zumerlab/orbit-kit/issues"
   },
   "author": "Juan Martin Muda - Zumerlab",
-  "license": "MIT"
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tinchox5"
+  }
 }