@monabbous/slidebox 1.3.0 → 1.3.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 +28 -10
- package/package.json +6 -3
package/README.md
CHANGED
|
@@ -10,12 +10,12 @@ Elastic checkboxes and grouped radios. Still real inputs: labels, keyboard contr
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
<p align="center">
|
|
13
|
-
<img src="https://
|
|
13
|
+
<img src="https://nabous.dev/project-assets/slidebox/assets/slidebox-demo.webp" width="520" alt="A Material-style native checkbox stretching and springing between checked and unchecked, using CSS">
|
|
14
14
|
</p>
|
|
15
15
|
|
|
16
16
|
The header demo is CSS-only: width `2.5`, spacing `−.27`, deform `.2`, and a `350ms` elastic easing. The thumb changes shape through margins, not scaling.
|
|
17
17
|
|
|
18
|
-
[Try the playground](https://
|
|
18
|
+
[Try the playground](https://nabous.dev/lab/slidebox/) · [Read the story](https://nabous.dev/blog/slidebox/) · [npm](https://www.npmjs.com/package/@monabbous/slidebox) · [Source](https://github.com/monabbous/slidebox)
|
|
19
19
|
|
|
20
20
|
Switches and radio groups need no JavaScript. The range slider is **experimental**; its optional motion and progress fill use JavaScript. Checkbox dragging is also optional and experimental.
|
|
21
21
|
|
|
@@ -36,6 +36,7 @@ Switches and radio groups need no JavaScript. The range slider is **experimental
|
|
|
36
36
|
- [Experimental checkbox dragging](#experimental-checkbox-dragging)
|
|
37
37
|
- [Experimental range slider](#experimental-range-slider)
|
|
38
38
|
- [Accessibility and browser support](#accessibility-and-browser-support)
|
|
39
|
+
- [Benchmarks](#benchmarks)
|
|
39
40
|
- [Development](#development)
|
|
40
41
|
|
|
41
42
|
## Demos
|
|
@@ -46,21 +47,21 @@ Click any preview to open the playground. These are crops of the actual recordin
|
|
|
46
47
|
|
|
47
48
|
| Preset | nabous.dev | Browser colors | Width | Spacing | Deform |
|
|
48
49
|
| --- | --- | --- | --- | --- | --- |
|
|
49
|
-
| Default | [](https://nabous.dev/lab/slidebox/) | [](https://nabous.dev/lab/slidebox/) | 2 | .33 | .1 |
|
|
51
|
+
| Material UI | [](https://nabous.dev/lab/slidebox/) | [](https://nabous.dev/lab/slidebox/) | 2.5 | −.33 | .1 |
|
|
52
|
+
| Old iOS | [](https://nabous.dev/lab/slidebox/) | [](https://nabous.dev/lab/slidebox/) | 1.6 | .03 | 0 |
|
|
52
53
|
|
|
53
54
|
These are geometry presets, not framework integrations or exact replicas. The browser-color Material UI and Old iOS previews are stills; those two weren't toggled in the recording.
|
|
54
55
|
|
|
55
56
|
**Material UI geometry, elastic easing:**
|
|
56
57
|
|
|
57
|
-
[](https://nabous.dev/lab/slidebox/)
|
|
58
59
|
|
|
59
60
|
The header shows the larger custom variant. [Copy either configuration](#checkbox-presets).
|
|
60
61
|
|
|
61
62
|
### Radio group demo
|
|
62
63
|
|
|
63
|
-
[](https://nabous.dev/lab/slidebox/)
|
|
64
65
|
|
|
65
66
|
Week → Day → Week → Month. Pressing the active choice does nothing; selecting before or after it stretches the highlight in that direction. CSS only. [Radio group setup](#grouped-radio-buttons).
|
|
66
67
|
|
|
@@ -68,15 +69,15 @@ Week → Day → Week → Month. Pressing the active choice does nothing; select
|
|
|
68
69
|
|
|
69
70
|
**Native range, no JS enhancements** — an unfilled still reference:
|
|
70
71
|
|
|
71
|
-
[](https://nabous.dev/lab/slidebox/)
|
|
72
73
|
|
|
73
74
|
**Clicking to a value — motion and fill enabled (JS):**
|
|
74
75
|
|
|
75
|
-
[](https://nabous.dev/lab/slidebox/)
|
|
76
77
|
|
|
77
78
|
**Dragging — motion and fill enabled (JS):**
|
|
78
79
|
|
|
79
|
-
[](https://nabous.dev/lab/slidebox/)
|
|
80
81
|
|
|
81
82
|
The native control still owns its value. The helpers only add motion and fill. [Range setup and options](#experimental-range-slider).
|
|
82
83
|
|
|
@@ -445,6 +446,23 @@ In the playground, the range has its own section below the switch/radio controls
|
|
|
445
446
|
|
|
446
447
|
The automated browser checks run in Chromium. Firefox/WebKit range rules are included, but those browsers and real touch devices still need testing. No claim that every control looks identical in every browser.
|
|
447
448
|
|
|
449
|
+
## Benchmarks
|
|
450
|
+
|
|
451
|
+
Slidebox is a small, configurable native-input implementation, not a claim to be the fastest switch. Other CSS-only approaches can produce similar deformation, and being free of a required JS runtime does not mean animating margins is free of layout work.
|
|
452
|
+
|
|
453
|
+
The source checkout includes a reproducible technique comparison:
|
|
454
|
+
|
|
455
|
+
```sh
|
|
456
|
+
npm ci
|
|
457
|
+
npm run build
|
|
458
|
+
npx playwright install chromium
|
|
459
|
+
npm run benchmark -- --headed
|
|
460
|
+
```
|
|
461
|
+
|
|
462
|
+
It triggers 500 and 2,000 visible controls together, comparing margins, delayed edges, transform/grid slides, and an unanimated native reference. It tests property-specific `will-change` hints, saves raw data, and generates offline SVG graphs for callback cadence, layout/style work, and layout shifts. Optional tracing adds separate paint diagnostics.
|
|
463
|
+
|
|
464
|
+
**The cadence graphs measure rAF callbacks, not actual GPU-presented FPS.** The scenes are technique illustrations with different visual effects, not whole-library rankings. Read the [benchmark guide](benchmarks/README.md) for sources, options, warmup, limitations, and sharing results. Generated data stays out of Git and the npm package.
|
|
465
|
+
|
|
448
466
|
## Development
|
|
449
467
|
|
|
450
468
|
```sh
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@monabbous/slidebox",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.1",
|
|
4
4
|
"description": "Elastic, system-color-aware CSS checkbox switch.",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"style": "./dist/css/slidebox.css",
|
|
@@ -29,14 +29,17 @@
|
|
|
29
29
|
"type": "git",
|
|
30
30
|
"url": "git+https://github.com/monabbous/slidebox.git"
|
|
31
31
|
},
|
|
32
|
-
"homepage": "https://
|
|
32
|
+
"homepage": "https://nabous.dev/lab/slidebox/",
|
|
33
33
|
"bugs": {
|
|
34
34
|
"url": "https://github.com/monabbous/slidebox/issues"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
37
|
-
"build": "node scripts/build.mjs",
|
|
37
|
+
"build": "node scripts/build.mjs && node scripts/build-public.mjs",
|
|
38
38
|
"test": "node --test tests/*.test.mjs",
|
|
39
39
|
"test:browser": "playwright test",
|
|
40
|
+
"benchmark": "node benchmarks/run.mjs",
|
|
41
|
+
"benchmark:report": "node benchmarks/report.mjs",
|
|
42
|
+
"benchmark:serve": "node benchmarks/serve.mjs",
|
|
40
43
|
"prepack": "npm run build"
|
|
41
44
|
},
|
|
42
45
|
"keywords": [
|