@zumer/orbit 1.6.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +218 -89
- package/dist/custom-elements.json +250 -0
- package/dist/orbit.css +2776 -1261
- package/dist/orbit.d.ts +107 -0
- package/dist/orbit.js +373 -209
- package/dist/orbit.min.css +1 -1
- package/dist/orbit.min.js +48 -26
- package/dist/orbit.mjs +373 -209
- package/dist/react.d.ts +25 -0
- package/dist/style.d.ts +3 -0
- package/dist/vscode.html-custom-data.json +166 -0
- package/package.json +21 -3
package/README.md
CHANGED
|
@@ -1,10 +1,17 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<picture>
|
|
3
|
+
<source media="(prefers-color-scheme: dark)" srcset="orbit-logo-blanco.svg">
|
|
4
|
+
<img src="orbit-logo-negro.svg" alt="Orbit" width="120">
|
|
5
|
+
</picture>
|
|
6
|
+
</p>
|
|
7
|
+
|
|
1
8
|
# Orbit
|
|
2
9
|
|
|
3
|
-
Orbit
|
|
10
|
+
Orbit puts HTML on circles. Gauges, dials, knobs, radial menus, donut charts, watch faces, sci-fi panels: anything that grows around a center instead of down a page.
|
|
4
11
|
|
|
5
|
-
CSS
|
|
12
|
+
You write plain HTML with a few classes. CSS does the geometry and the look; a small runtime keeps numbering, spacing and SVG arcs right as things change. It works the same in plain HTML, React, Vue, Svelte or anything else that renders the DOM.
|
|
6
13
|
|
|
7
|
-
[
|
|
14
|
+
[Documentation and examples](https://zumerlab.com/orbit/) · [npm](https://www.npmjs.com/package/@zumer/orbit) · [Orbit 1.x docs](https://zumerlab.com/orbit-docs/)
|
|
8
15
|
|
|
9
16
|
## Install
|
|
10
17
|
|
|
@@ -12,18 +19,21 @@ CSS controls geometry and appearance. A small JavaScript runtime updates the lay
|
|
|
12
19
|
npm install @zumer/orbit
|
|
13
20
|
```
|
|
14
21
|
|
|
15
|
-
Import the stylesheet and runtime in your app's client entrypoint:
|
|
16
|
-
|
|
17
22
|
```js
|
|
18
23
|
import '@zumer/orbit/style'
|
|
19
24
|
import '@zumer/orbit'
|
|
20
25
|
```
|
|
21
26
|
|
|
22
|
-
|
|
27
|
+
Or, in a plain page:
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<link rel="stylesheet" href="https://unpkg.com/@zumer/orbit/dist/orbit.min.css">
|
|
31
|
+
<script defer src="https://unpkg.com/@zumer/orbit/dist/orbit.min.js"></script>
|
|
32
|
+
```
|
|
23
33
|
|
|
24
|
-
##
|
|
34
|
+
## Your first universe
|
|
25
35
|
|
|
26
|
-
Save this as `index.html` and open it
|
|
36
|
+
Save this as `index.html` and open it. It draws a progress ring with a label in the middle, and the whole thing is as big as its 240px box.
|
|
27
37
|
|
|
28
38
|
```html
|
|
29
39
|
<!doctype html>
|
|
@@ -31,23 +41,25 @@ Save this as `index.html` and open it in a browser. It loads Orbit from the CDN
|
|
|
31
41
|
<head>
|
|
32
42
|
<meta charset="utf-8">
|
|
33
43
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
34
|
-
<title>
|
|
35
|
-
<link rel="stylesheet" href="https://unpkg.com/@zumer/orbit
|
|
36
|
-
<script defer src="https://unpkg.com/@zumer/orbit
|
|
44
|
+
<title>A first Orbit</title>
|
|
45
|
+
<link rel="stylesheet" href="https://unpkg.com/@zumer/orbit/dist/orbit.min.css">
|
|
46
|
+
<script defer src="https://unpkg.com/@zumer/orbit/dist/orbit.min.js"></script>
|
|
37
47
|
<style>
|
|
38
|
-
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
|
|
39
|
-
.gauge
|
|
40
|
-
.gauge > .gravity-spot { --o-force: 400px; }
|
|
48
|
+
body { margin: 0; min-height: 100vh; display: grid; place-items: center; font-family: system-ui, sans-serif; }
|
|
49
|
+
.gauge { width: 240px; }
|
|
41
50
|
.gauge o-progress { --o-fill: #3da9fc; --o-back-fill: #1d3749; --o-stroke: none; }
|
|
51
|
+
.gauge .value { font-size: 40px; font-weight: 600; }
|
|
42
52
|
</style>
|
|
43
53
|
</head>
|
|
44
54
|
<body>
|
|
45
55
|
<div class="gauge bigbang">
|
|
46
56
|
<div class="gravity-spot">
|
|
47
|
-
<div class="orbit-
|
|
57
|
+
<div class="orbit-10" style="--o-size-ratio: 2">
|
|
48
58
|
<o-progress value="72" shape="rounded" role="progressbar"
|
|
49
|
-
aria-label="Upload
|
|
50
|
-
|
|
59
|
+
aria-label="Upload" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></o-progress>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="orbit-0" style="--o-size-ratio: 12">
|
|
62
|
+
<div class="satellite at-center"><div class="capsule value">72%</div></div>
|
|
51
63
|
</div>
|
|
52
64
|
</div>
|
|
53
65
|
</div>
|
|
@@ -55,43 +67,144 @@ Save this as `index.html` and open it in a browser. It loads Orbit from the CDN
|
|
|
55
67
|
</html>
|
|
56
68
|
```
|
|
57
69
|
|
|
58
|
-
Change
|
|
70
|
+
Change `width` on `.gauge` and everything follows: the ring, its thickness, the space for the label. Change `value` and the ring redraws.
|
|
71
|
+
|
|
72
|
+
## How Orbit thinks
|
|
73
|
+
|
|
74
|
+
Orbit borrows its words from a solar system. It sounds like a gimmick for about a minute; after that it is the easiest way to remember what each piece does.
|
|
75
|
+
|
|
76
|
+
**First there is a big bang.** A `.bigbang` creates the universe: the space your layout lives in. Its box is the only size you ever set. It is square by default, as wide as its parent, and a parent with a height keeps it from growing taller.
|
|
77
|
+
|
|
78
|
+
**Then gravity.** Inside it, a `.gravity-spot` is the center of mass. Its gravity reaches as far as the shorter side of the universe; that reach is `--o-force`, and it is the diameter of the outermost orbit, `orbit-12`.
|
|
79
|
+
|
|
80
|
+
**Gravity draws orbits.** From the center to that edge there are 12 lanes. `orbit-1` is the first lane, `orbit-6` is halfway out, `orbit-12` touches the edge. `orbit-0` is the center itself, and `orbit-13` to `orbit-24` exist too, past the edge, for things that should stick out.
|
|
81
|
+
|
|
82
|
+
**Satellites travel the orbits.** A `.satellite` sits on a ring, and Orbit spreads all the satellites of a ring around it on its own. Each one carries a `.capsule`, where your content goes, kept upright however far around the ring it is.
|
|
83
|
+
|
|
84
|
+
**And there is more up there.** A `.vector` is a ray pointing out from the center: ticks, needles. A `.side` is a chord between neighbors: polygons. `<o-arc>` draws a piece of a lane, with text along it if you want. `<o-progress>` fills a lane up to a value.
|
|
59
85
|
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
86
|
+
```
|
|
87
|
+
.bigbang the universe: its box sets the size
|
|
88
|
+
└── .gravity-spot the center; reaches the shorter side
|
|
89
|
+
├── .orbit-N a lane, N twelfths of the way out
|
|
90
|
+
│ ├── .satellite > .capsule ← your content
|
|
91
|
+
│ ├── .vector · .side rays and chords
|
|
92
|
+
│ └── <o-arc> · <o-progress>
|
|
93
|
+
└── .orbit-M …
|
|
64
94
|
```
|
|
65
95
|
|
|
66
|
-
|
|
96
|
+
That is all the structure there is. A few rules keep it working:
|
|
67
97
|
|
|
68
|
-
|
|
98
|
+
- Rings are direct children of a `.gravity-spot`, never of another ring.
|
|
99
|
+
- A ring holds only `.satellite`, `.vector`, `.side`, `<o-arc>` and `<o-progress>`.
|
|
100
|
+
- Content goes in a `.capsule` inside a `.satellite`. Centered content goes in `.orbit-0 > .satellite.at-center > .capsule`.
|
|
69
101
|
|
|
70
|
-
|
|
102
|
+
Add `dev-orbit` to the `.bigbang` while you build. It draws the lanes, outlines anything in the wrong place and explains it in the console.
|
|
71
103
|
|
|
72
|
-
|
|
73
|
-
| --- | --- |
|
|
74
|
-
| `.bigbang` | Container that centers the layout. |
|
|
75
|
-
| `.gravity-spot` | Layout origin; holds rings and defines their scale with `--o-force`. |
|
|
76
|
-
| `.orbit` / `.orbit-N` | Ring with an automatic index or an explicit level, such as `.orbit-6`. |
|
|
77
|
-
| `.satellite` | Positions an item on a ring. |
|
|
78
|
-
| `.capsule` | Wraps content inside a satellite. |
|
|
79
|
-
| `.vector` | Places a tick or marker on a ring. |
|
|
80
|
-
| `.side` | Places content along the straight line between adjacent ring positions. |
|
|
81
|
-
| `<o-arc>` | Draws a segment. Sibling arcs stack in HTML order. |
|
|
82
|
-
| `<o-progress>` | Draws a progress value over a background arc. |
|
|
104
|
+
### Size is a fraction of the universe
|
|
83
105
|
|
|
84
|
-
|
|
106
|
+
Every element on a ring is one lane thick: a twelfth of the radius. A satellite on `orbit-8` is a circle one lane across; a band of `<o-progress>` is one lane wide. To make things thicker or thinner, set `--o-size-ratio`, in lanes, on the element, on its ring, or on the whole `.gravity-spot`:
|
|
85
107
|
|
|
86
|
-
|
|
108
|
+
```html
|
|
109
|
+
<div class="orbit-8" style="--o-size-ratio: 2">
|
|
110
|
+
<div class="satellite"><div class="capsule">A</div></div>
|
|
111
|
+
<div class="satellite"><div class="capsule">B</div></div>
|
|
112
|
+
<div class="satellite"><div class="capsule">C</div></div>
|
|
113
|
+
</div>
|
|
114
|
+
```
|
|
87
115
|
|
|
88
|
-
|
|
116
|
+
An element on `orbit-N` reaches half its thickness past lane N. So a band two lanes thick on `orbit-11` ends exactly at the edge of the universe.
|
|
89
117
|
|
|
90
|
-
|
|
118
|
+
Because everything is a fraction of one box, an Orbit layout is responsive without any code. Put it in a sidebar, a card or a full screen and it scales as one piece. If you need a fixed size instead, give the reach a length: `.gravity-spot { --o-force: 400px }`.
|
|
91
119
|
|
|
92
|
-
###
|
|
120
|
+
### Universes inside universes
|
|
93
121
|
|
|
94
|
-
|
|
122
|
+
A satellite is a universe too. Put a `.gravity-spot` inside one and its reach is the satellite's edge, like a moon system around a planet:
|
|
123
|
+
|
|
124
|
+
```html
|
|
125
|
+
<div class="orbit-9" style="--o-size-ratio: 4">
|
|
126
|
+
<div class="satellite">
|
|
127
|
+
<div class="gravity-spot">
|
|
128
|
+
<div class="orbit-12"><o-progress value="40"></o-progress></div>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
Every `.gravity-spot` starts from the defaults, so a nested system does not inherit the sizes or angles of the one around it.
|
|
135
|
+
|
|
136
|
+
### Angles
|
|
137
|
+
|
|
138
|
+
Angles start at the top and grow clockwise. `--o-range` is how much of the circle a ring uses, and `--o-from` where it starts:
|
|
139
|
+
|
|
140
|
+
```html
|
|
141
|
+
<div class="orbit-10" style="--o-range: 240deg; --o-from: 240deg">…</div>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
Classes cover the common values: `range-180`, `from-270`, `ccw` to go counterclockwise, and `fit-range` to put the first and last satellite or tick on the two ends of a partial range.
|
|
145
|
+
|
|
146
|
+
| Property | Default | Set it on | What it does |
|
|
147
|
+
| --- | --- | --- | --- |
|
|
148
|
+
| `--o-force` | `100cqmin` | `.gravity-spot` | Reach: the diameter of `orbit-12`. |
|
|
149
|
+
| `--o-size-ratio` | `1` | system, ring or element | Thickness, in lanes. |
|
|
150
|
+
| `--o-range` | `360deg` | system or ring | How much of the circle the ring uses. |
|
|
151
|
+
| `--o-from` | `0deg` | system or ring | Where the range starts. |
|
|
152
|
+
| `--o-gap` | `1` | system, ring or arc | Space between sibling arcs. |
|
|
153
|
+
| `--o-alignment` | `0px` | element | Moves an element in (positive) or out (negative) from its lane. Also set by `.inner-orbit` and `.outer-orbit`. |
|
|
154
|
+
|
|
155
|
+
Values cascade, so set them once on the `.gravity-spot` for the whole system or on a ring for its elements.
|
|
156
|
+
|
|
157
|
+
### Which way is out
|
|
158
|
+
|
|
159
|
+
Each satellite tells its content where it sits: `--o-dir-x` and `--o-dir-y` are the direction from the center, from `-1` to `1` (`y` grows down, and both are `0` on the center satellite). It is handy for labels that should hang outward, above the satellites of the upper half and below the rest:
|
|
160
|
+
|
|
161
|
+
```css
|
|
162
|
+
.label {
|
|
163
|
+
/* -1 in the upper half, 1 in the lower half */
|
|
164
|
+
--side: clamp(-1, var(--o-dir-y) * 1000, 1);
|
|
165
|
+
position: absolute; left: 50%;
|
|
166
|
+
top: calc(50% + var(--side) * (50% + 4px));
|
|
167
|
+
translate: -50% calc((var(--side) - 1) * 50%);
|
|
168
|
+
}
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
## Arcs and progress
|
|
172
|
+
|
|
173
|
+
`<o-arc>` and `<o-progress>` go straight into a ring. Both take a `value` out of `max` (100 by default) and an ending: `shape="rounded"`, `circle`, `arrow`, `slash`, `zigzag` and a few more, all scaled to the band.
|
|
174
|
+
|
|
175
|
+
Without `value`, sibling arcs split the ring between them: that is a segmented ring or a pie. With `value`, they stack one after another: that is a donut chart.
|
|
176
|
+
|
|
177
|
+
```html
|
|
178
|
+
<div class="orbit-10" style="--o-size-ratio: 3">
|
|
179
|
+
<o-arc value="45" style="--o-fill: #3da9fc"></o-arc>
|
|
180
|
+
<o-arc value="30" style="--o-fill: #ef4565"></o-arc>
|
|
181
|
+
<o-arc value="25" style="--o-fill: #90b4ce"></o-arc>
|
|
182
|
+
</div>
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
Text inside an arc is drawn along it. With `range="auto"` the arc is as long as its text, and consecutive auto arcs follow each other, which makes curved menus easy. `text-anchor="middle"` centers an auto arc on its angle:
|
|
186
|
+
|
|
187
|
+
```html
|
|
188
|
+
<div class="orbit-11 from-300">
|
|
189
|
+
<o-arc range="auto">Home</o-arc><o-arc range="auto">Projects</o-arc><o-arc range="auto">About</o-arc>
|
|
190
|
+
</div>
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
Progress rings draw filled bands. For a thin gauge line, use `variant="stroke"`: a 2px line over a gray track, colored with `--o-stroke` and `--o-back-stroke`.
|
|
194
|
+
|
|
195
|
+
Arcs and progress are decorative until you say otherwise. `interactive` makes the whole band clickable, transparent or not, and `hit-width="12"` adds 12px of touch area on each side:
|
|
196
|
+
|
|
197
|
+
```html
|
|
198
|
+
<div class="orbit-10" style="--o-size-ratio: 2">
|
|
199
|
+
<o-arc interactive hit-width="8" style="--o-fill: transparent" aria-label="Volume"></o-arc>
|
|
200
|
+
</div>
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
You bring the keyboard behavior and the accessible names for any control you build. Arcs are placed with the `rotate` property, so a `transform` or `scale` of yours adds to it instead of replacing it.
|
|
204
|
+
|
|
205
|
+
## Depth
|
|
206
|
+
|
|
207
|
+
A system can stack its rings in 3D. Add `depth` to the `.gravity-spot` and each ring becomes a layer: `data-depth="1"` sends it one step back, `.layer-front` marks the one in front. Layers keep their apparent size, because the scale makes up for the perspective, and they animate when their depth changes.
|
|
95
208
|
|
|
96
209
|
```html
|
|
97
210
|
<div class="gravity-spot depth" style="--o-depth-grow: .42">
|
|
@@ -101,94 +214,110 @@ Add `depth` to a `.gravity-spot` to stack its rings in 3D. Each direct child rin
|
|
|
101
214
|
</div>
|
|
102
215
|
```
|
|
103
216
|
|
|
104
|
-
| Property | Default |
|
|
217
|
+
| Property | Default | What it does |
|
|
105
218
|
| --- | --- | --- |
|
|
106
|
-
| `--o-z` | `depth × step` | Position on the z axis in unitless pixels; negative
|
|
107
|
-
| `--o-depth-step` | `-110` | Distance between
|
|
108
|
-
| `--o-perspective` | `900` | Perspective in unitless pixels. |
|
|
109
|
-
| `--o-depth-grow` | `0` | Extra size per step back
|
|
110
|
-
| `--o-depth-compensate` | `1` |
|
|
111
|
-
| `--o-back-opacity` | `1` | Opacity of layers behind the front one. |
|
|
112
|
-
| `--o-depth-duration` / `--o-depth-easing` | `.8s` / `cubic-bezier(.2,.8,.2,1)` |
|
|
219
|
+
| `--o-z` | `depth × step` | Position on the z axis in unitless pixels; negative is farther. Overrides `data-depth`. |
|
|
220
|
+
| `--o-depth-step` | `-110` | Distance between steps. |
|
|
221
|
+
| `--o-perspective` | `900` | Perspective, in unitless pixels. |
|
|
222
|
+
| `--o-depth-grow` | `0` | Extra size per step back: `.42` gives 1×, 1.42×, 1.84×. |
|
|
223
|
+
| `--o-depth-compensate` | `1` | `0` lets farther layers look smaller. |
|
|
224
|
+
| `--o-back-opacity` | `1` | Opacity of the layers behind the front one. |
|
|
225
|
+
| `--o-depth-duration` / `--o-depth-easing` | `.8s` / `cubic-bezier(.2,.8,.2,1)` | The depth transition. Off with `prefers-reduced-motion`. |
|
|
113
226
|
|
|
114
|
-
`data-depth
|
|
227
|
+
A layer can be a whole system, ring, label and face together: make it a nested `.gravity-spot` with `data-depth`. To tilt the whole object from outside (with the pointer, say), add `outer-perspective` next to `depth` and set `--o-perspective` to the perspective of the ancestor that owns it. The [depth demo](https://zumerlab.com/orbit/demos/11-depth-layers.html) shows both.
|
|
115
228
|
|
|
116
229
|
## In an app
|
|
117
230
|
|
|
118
|
-
Orbit
|
|
231
|
+
Orbit watches the DOM for you: added, removed and reordered elements, attribute and style changes, and resized containers. Updates are batched into the next animation frame.
|
|
119
232
|
|
|
120
|
-
|
|
233
|
+
The package is safe to import during server rendering; import it in the browser entry too, so it can register the elements and watch the page. It exports `Orbit`, `OrbitArc`, `OrbitProgress` and `registerOrbit`; registration happens on import and calling `registerOrbit()` again is harmless.
|
|
121
234
|
|
|
122
|
-
|
|
235
|
+
A few things for when you need them:
|
|
123
236
|
|
|
124
237
|
```js
|
|
125
238
|
import { Orbit } from '@zumer/orbit'
|
|
126
239
|
|
|
127
|
-
|
|
128
|
-
|
|
240
|
+
await Orbit.ready() // every pending arc is drawn
|
|
241
|
+
gauge.addEventListener('o-rendered', () => measure(gauge)) // one arc redrew
|
|
242
|
+
Orbit.refresh(panel) // update now, e.g. after editing a stylesheet through CSSOM
|
|
129
243
|
```
|
|
130
244
|
|
|
131
|
-
`
|
|
245
|
+
`Orbit.resize(target)` only matters for systems with a fixed px `--o-force`: it scales them with the target's width, taking 500px as 1×, and returns a function that stops it.
|
|
132
246
|
|
|
133
|
-
|
|
247
|
+
For shadow DOM, include the stylesheet inside each shadow root. Arcs and progress register their shadow root on their own; for a shadow tree with only CSS elements, call `Orbit.refresh(shadowRoot)` once.
|
|
134
248
|
|
|
135
|
-
|
|
136
|
-
|
|
249
|
+
Override Orbit through the documented custom properties. The runtime manages `data-orbit-ring`, `--o-layout-*` and `--o-arc-start` itself.
|
|
250
|
+
|
|
251
|
+
### TypeScript and editors
|
|
137
252
|
|
|
138
|
-
|
|
253
|
+
The package ships types for the API and for `document.querySelector('o-progress')`. For JSX, load the element types once, for example in a `.d.ts` file:
|
|
254
|
+
|
|
255
|
+
```ts
|
|
256
|
+
import type {} from '@zumer/orbit/react'
|
|
139
257
|
```
|
|
140
258
|
|
|
141
|
-
`
|
|
259
|
+
`@zumer/orbit/custom-elements.json` is a [Custom Elements Manifest](https://custom-elements-manifest.open-wc.org/). For attribute completion in VS Code:
|
|
142
260
|
|
|
143
|
-
|
|
261
|
+
```json
|
|
262
|
+
{ "html.customData": ["./node_modules/@zumer/orbit/dist/vscode.html-custom-data.json"] }
|
|
263
|
+
```
|
|
144
264
|
|
|
145
|
-
|
|
265
|
+
## When something looks wrong
|
|
146
266
|
|
|
147
|
-
|
|
267
|
+
Orbit explains common mistakes in the browser console, starting with `[orbit]`:
|
|
148
268
|
|
|
149
|
-
|
|
269
|
+
| You see | Because | Fix |
|
|
270
|
+
| --- | --- | --- |
|
|
271
|
+
| Nothing, and the console says *has no size* | The `.bigbang` is 0px wide or tall, usually in a parent that shrinks to fit. | Give the `.bigbang` or its parent a width. |
|
|
272
|
+
| A layout as big as the window | The `.gravity-spot` is not inside a `.bigbang`, so it measures the viewport. | Wrap it in a `.bigbang`. |
|
|
273
|
+
| An empty arc or ring | `value` is not a number, or `max` is not positive. | Fix the attribute; the console names it. |
|
|
274
|
+
| Content overlapping or off the ring | It sits directly in a ring instead of a `.satellite`. | Add `dev-orbit` to see where, then wrap it. |
|
|
275
|
+
| Curved text cut off | The text is longer than its arc. | Shorten it, widen `--o-range`, use `range="auto"`, or `fit-range`. |
|
|
276
|
+
| Everything thin | Elements are one lane thick. | Raise `--o-size-ratio` on the ring or the system. |
|
|
277
|
+
| An arc that ignores clicks | Arcs are decorative by default. | Add `interactive`, and `hit-width` for a bigger target. |
|
|
150
278
|
|
|
151
|
-
|
|
279
|
+
The reset and the default theme have zero specificity, so a single class of yours always wins, also inside a `.capsule`. `theme-cyan` gives a ready-made cyan look and combines with `dev-orbit`.
|
|
152
280
|
|
|
153
|
-
|
|
154
|
-
<div class="bigbang theme-cyan dev-orbit">...</div>
|
|
155
|
-
```
|
|
281
|
+
Orbit needs CSS `sin()`, `cos()` and container query units. Without JavaScript, a CSS fallback still places simple layouts (up to 24 rings and 60 children per type; it also needs `:has()` and `:nth-child(… of …)`); `<o-arc>` and `<o-progress>` always need the runtime.
|
|
156
282
|
|
|
157
|
-
|
|
283
|
+
## Coming from 1.x
|
|
158
284
|
|
|
159
|
-
|
|
285
|
+
Version 2 changes where size comes from. In 1.x every system was 500px across, whatever the size of its `.bigbang`, and you needed `Orbit.resize()` to make it responsive. Now `orbit-12` reaches the edge of the `.bigbang`.
|
|
160
286
|
|
|
161
|
-
|
|
287
|
+
- **To keep the 1.x size**, set `.gravity-spot { --o-force: 500px }`. `Orbit.resize()` still scales those systems.
|
|
288
|
+
- **To move to the new model**, remove `--o-force` and `Orbit.resize()` and pick rings by their share of the space. A 1.x `orbit-N` in a box `W` px wide lands near `orbit-(N × 500 / W)`, and its thickness near `--o-size-ratio: 500 / W`.
|
|
289
|
+
- A `.bigbang` is a size container, so it is the containing block of `position: fixed` descendants. Directly in `<body>` it is capped at the viewport height instead of forced to it.
|
|
290
|
+
- `.satellite` no longer resets `--o-size-ratio`, so a value on its ring reaches it. `shrink-N` on a ring only changes how close it sits to the previous lane.
|
|
291
|
+
- `--o-gap` cascades from the ring and the system. `--o-aligment` still works; `--o-alignment` is the right spelling.
|
|
292
|
+
- `fit-range` on a ring of arcs no longer overflows the range.
|
|
293
|
+
- Satellites have no border by default. The reset, the default theme and `theme-cyan` have zero specificity apart from their own class, so your styles apply without `!important`.
|
|
294
|
+
- `<o-arc>` and `<o-progress>` are placed with `rotate` instead of `transform`, and endings scale with the band. `interactive` makes the whole band clickable.
|
|
295
|
+
- `variant="stroke"` on `<o-progress>` draws a 2px line over a gray track by default.
|
|
162
296
|
|
|
163
|
-
[
|
|
297
|
+
The [1.x documentation](https://zumerlab.com/orbit-docs/) stays online.
|
|
164
298
|
|
|
165
|
-
##
|
|
299
|
+
## Demos
|
|
166
300
|
|
|
167
|
-
From a
|
|
301
|
+
From a checkout:
|
|
168
302
|
|
|
169
303
|
```sh
|
|
170
304
|
npm ci
|
|
171
|
-
npm run
|
|
305
|
+
npm run docs
|
|
172
306
|
```
|
|
173
307
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
To run the tests:
|
|
308
|
+
Then open <http://127.0.0.1:5174> (`PORT=5175 npm run docs` for another port). That is this repo's documentation site, from `docs/`, running on your local build. Start with [the universe model](docs/demos/00-universe.html): drag the corner of the box and watch the system follow. All the examples are in the gallery, from full pages to small pieces with their code open.
|
|
177
309
|
|
|
178
|
-
|
|
179
|
-
npx playwright install chromium firefox webkit
|
|
180
|
-
BROWSERS=chromium,firefox,webkit npm test
|
|
181
|
-
```
|
|
310
|
+
The [documentation site](https://zumerlab.com/orbit/) has many more: [gauges](https://zumerlab.com/orbit/examples/gauges/), [charts](https://zumerlab.com/orbit/examples/charts/), [radial menus](https://zumerlab.com/orbit/examples/piemenu.html), [knobs](https://zumerlab.com/orbit/examples/knobs/), [watch faces](https://zumerlab.com/orbit/examples/watches/). [Orbit Kit](https://zumerlab.com/orbit/kit/) has ready-made components built on Orbit.
|
|
182
311
|
|
|
183
|
-
|
|
312
|
+
## Help and contributing
|
|
184
313
|
|
|
185
|
-
|
|
314
|
+
Report bugs in [Issues](https://github.com/zumerlab/orbit/issues), share what you made or ask in [Discussions](https://github.com/zumerlab/orbit/discussions), or say hi in the [Telegram group](https://t.me/ZumlyCommunity). To work on Orbit itself, see [CONTRIBUTING.md](CONTRIBUTING.md).
|
|
186
315
|
|
|
187
|
-
|
|
316
|
+
For coding assistants, [llms.txt](https://zumerlab.com/orbit/llms.txt) is a short reference and [llms-full.txt](https://zumerlab.com/orbit/llms-full.txt) the complete one.
|
|
188
317
|
|
|
189
|
-
|
|
318
|
+
## Sponsor
|
|
190
319
|
|
|
191
|
-
|
|
320
|
+
Orbit is free and made in spare time. If it saves you time, you can [sponsor it on GitHub](https://github.com/sponsors/tinchox5).
|
|
192
321
|
|
|
193
322
|
## License
|
|
194
323
|
|