@monabbous/slidebox 1.2.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 +358 -158
- package/dist/css/group.css +121 -0
- package/dist/css/slidebox.css +2 -0
- package/experimental/range.css +99 -0
- package/experimental/range.d.mts +14 -0
- package/experimental/range.mjs +213 -0
- package/less/experimental.less +119 -0
- package/less/slidebox.less +139 -0
- package/package.json +7 -3
- package/scss/_experimental.scss +109 -0
- package/scss/_mixins.scss +129 -0
- package/scss/group.scss +2 -0
- package/tailwind/experimental-rules.json +125 -0
- package/tailwind/group-rules.json +152 -0
- package/tailwind/index.cjs +8 -6
- package/tailwind/rules.json +2 -0
package/less/slidebox.less
CHANGED
|
@@ -43,6 +43,7 @@
|
|
|
43
43
|
}
|
|
44
44
|
&::after {
|
|
45
45
|
--_start: 0; --_end: 1;
|
|
46
|
+
box-sizing: border-box;
|
|
46
47
|
content: "";
|
|
47
48
|
display: block;
|
|
48
49
|
flex: 1 1 auto;
|
|
@@ -53,6 +54,7 @@
|
|
|
53
54
|
margin-inline-start: calc((1em * var(--_container-width-ratio) - 1em) * var(--_start) + var(--_thumb-spacing-ratio) * .5em);
|
|
54
55
|
margin-inline-end: calc((1em * var(--_container-width-ratio) - 1em) * var(--_end) + var(--_thumb-spacing-ratio) * .5em);
|
|
55
56
|
border-radius: inherit;
|
|
57
|
+
border: 1px solid var(--_track);
|
|
56
58
|
background: var(--_off);
|
|
57
59
|
transition: background var(--_duration) var(--_easing-function), margin-inline-start var(--_duration) var(--_easing-function), margin-inline-end var(--_duration) var(--_easing-function);
|
|
58
60
|
transition-delay: 0s, 0s, calc(var(--_duration) * var(--_deform));
|
|
@@ -77,3 +79,140 @@
|
|
|
77
79
|
&::after { transition-duration: .01ms; transition-delay: 0ms; }
|
|
78
80
|
}
|
|
79
81
|
}
|
|
82
|
+
|
|
83
|
+
.slidebox-group(@width: false; @spacing: false; @deform: false; @duration: false; @easing: false; @track: false; @border: false; @off: false; @on: false; @size: false; @radius: false; @text: false; @selected-text: false) {
|
|
84
|
+
.slidebox-option(width; @width);
|
|
85
|
+
.slidebox-option(spacing; @spacing);
|
|
86
|
+
.slidebox-option(deform; @deform);
|
|
87
|
+
.slidebox-option(duration; @duration);
|
|
88
|
+
.slidebox-option(easing; @easing);
|
|
89
|
+
.slidebox-option(track; @track);
|
|
90
|
+
.slidebox-option(border; @border);
|
|
91
|
+
.slidebox-option(off; @off);
|
|
92
|
+
.slidebox-option(on; @on);
|
|
93
|
+
.slidebox-option(size; @size);
|
|
94
|
+
.slidebox-option(radius; @radius);
|
|
95
|
+
.slidebox-option(text; @text);
|
|
96
|
+
.slidebox-option(selected-text; @selected-text);
|
|
97
|
+
& {
|
|
98
|
+
--_size: var(--slidebox-size, 36px);
|
|
99
|
+
--_spacing: var(--slidebox-spacing, .12);
|
|
100
|
+
--_deform: var(--slidebox-deform, .06);
|
|
101
|
+
--_duration: var(--slidebox-duration, 200ms);
|
|
102
|
+
--_easing: var(--slidebox-easing, ease-in-out);
|
|
103
|
+
--_track: var(--slidebox-track, Field);
|
|
104
|
+
--_border: var(--slidebox-border, ButtonBorder);
|
|
105
|
+
--_off: var(--slidebox-off, FieldText);
|
|
106
|
+
--_on: var(--slidebox-on, var(--_accent, light-dark(#0b75ff, SelectedItem)));
|
|
107
|
+
--_text: var(--slidebox-text, var(--slidebox-off, FieldText));
|
|
108
|
+
--_selected-text: var(--slidebox-selected-text, HighlightText);
|
|
109
|
+
--_press-start: 0px;
|
|
110
|
+
--_press-end: 0px;
|
|
111
|
+
display: inline-grid;
|
|
112
|
+
grid-auto-flow: column;
|
|
113
|
+
grid-auto-columns: minmax(0, 1fr);
|
|
114
|
+
box-sizing: border-box;
|
|
115
|
+
padding: calc(var(--_size) * var(--_spacing));
|
|
116
|
+
gap: calc(var(--_size) * var(--_spacing));
|
|
117
|
+
border: 1px solid var(--_border);
|
|
118
|
+
border-radius: var(--slidebox-radius, 100vw);
|
|
119
|
+
background: var(--_track);
|
|
120
|
+
color: var(--_text);
|
|
121
|
+
isolation: isolate;
|
|
122
|
+
position: relative;
|
|
123
|
+
}
|
|
124
|
+
& > label {
|
|
125
|
+
position: relative;
|
|
126
|
+
display: grid;
|
|
127
|
+
min-width: 0;
|
|
128
|
+
cursor: pointer;
|
|
129
|
+
}
|
|
130
|
+
& > label > input[type="radio"] {
|
|
131
|
+
position: absolute;
|
|
132
|
+
width: 1px;
|
|
133
|
+
height: 1px;
|
|
134
|
+
padding: 0;
|
|
135
|
+
margin: -1px;
|
|
136
|
+
overflow: hidden;
|
|
137
|
+
clip-path: inset(50%);
|
|
138
|
+
white-space: nowrap;
|
|
139
|
+
}
|
|
140
|
+
& > label > span {
|
|
141
|
+
position: relative;
|
|
142
|
+
isolation: isolate;
|
|
143
|
+
display: grid;
|
|
144
|
+
place-items: center;
|
|
145
|
+
box-sizing: border-box;
|
|
146
|
+
min-height: var(--_size);
|
|
147
|
+
padding: .35em 1em;
|
|
148
|
+
border: 1px solid transparent;
|
|
149
|
+
border-radius: var(--slidebox-radius, 100vw);
|
|
150
|
+
color: var(--_text);
|
|
151
|
+
background: transparent;
|
|
152
|
+
transition: color var(--_duration) var(--_easing);
|
|
153
|
+
}
|
|
154
|
+
& > label > input:checked + span {
|
|
155
|
+
color: var(--_selected-text);
|
|
156
|
+
}
|
|
157
|
+
& > label > input:checked + span::before {
|
|
158
|
+
content: "";
|
|
159
|
+
position: absolute;
|
|
160
|
+
inset: 0;
|
|
161
|
+
z-index: -1;
|
|
162
|
+
pointer-events: none;
|
|
163
|
+
border-radius: inherit;
|
|
164
|
+
background: var(--_on);
|
|
165
|
+
margin-inline-start: var(--_press-start);
|
|
166
|
+
margin-inline-end: var(--_press-end);
|
|
167
|
+
transition: margin-inline-start var(--_duration) var(--_easing), margin-inline-end var(--_duration) var(--_easing);
|
|
168
|
+
}
|
|
169
|
+
& > label > input:not(:checked) + span { color: var(--_text); }
|
|
170
|
+
&:has(> label > input:checked):has(> label:active > input:not(:checked):not(:disabled)):not(:has(> label:active ~ label > input:checked)) {
|
|
171
|
+
--_press-end: calc(-1 * var(--_size) * var(--_deform));
|
|
172
|
+
}
|
|
173
|
+
&:has(> label:active > input:not(:disabled)):has(> label:active ~ label > input:checked) {
|
|
174
|
+
--_press-start: calc(-1 * var(--_size) * var(--_deform));
|
|
175
|
+
}
|
|
176
|
+
& > label > input:focus-visible + span {
|
|
177
|
+
outline: 2px solid var(--_on);
|
|
178
|
+
outline-offset: 2px;
|
|
179
|
+
}
|
|
180
|
+
& > label:has(> input:disabled) { cursor: not-allowed; }
|
|
181
|
+
& > label > input:disabled + span { opacity: .5; }
|
|
182
|
+
@supports (color: AccentColor) {
|
|
183
|
+
& { --_accent: AccentColor; }
|
|
184
|
+
}
|
|
185
|
+
/* A shared sliding indicator where scoped CSS anchor positioning is available.
|
|
186
|
+
Other browsers retain the per-segment highlight above. Neither needs JS. */
|
|
187
|
+
@supports (anchor-scope: --slidebox-selection) and (left: anchor(left)) {
|
|
188
|
+
& { anchor-scope: --slidebox-selection; }
|
|
189
|
+
& > label:has(> input:checked) { anchor-name: --slidebox-selection; }
|
|
190
|
+
&:has(> label > input:checked)::before {
|
|
191
|
+
content: "";
|
|
192
|
+
position: absolute;
|
|
193
|
+
position-anchor: --slidebox-selection;
|
|
194
|
+
left: ~"anchor(left)";
|
|
195
|
+
right: ~"anchor(right)";
|
|
196
|
+
top: ~"anchor(top)";
|
|
197
|
+
height: ~"anchor-size(height)";
|
|
198
|
+
margin-inline-start: var(--_press-start);
|
|
199
|
+
margin-inline-end: var(--_press-end);
|
|
200
|
+
z-index: -1;
|
|
201
|
+
border-radius: var(--slidebox-radius, 100vw);
|
|
202
|
+
background: var(--_on);
|
|
203
|
+
pointer-events: none;
|
|
204
|
+
transition: left var(--_duration) var(--_easing), right var(--_duration) var(--_easing), top var(--_duration) var(--_easing), height var(--_duration) var(--_easing), margin-inline-start var(--_duration) var(--_easing), margin-inline-end var(--_duration) var(--_easing);
|
|
205
|
+
}
|
|
206
|
+
& > label > input:checked + span::before { content: none; }
|
|
207
|
+
}
|
|
208
|
+
@media (forced-colors: active) {
|
|
209
|
+
& { --_track: Field; --_border: ButtonBorder; --_off: FieldText; --_on: Highlight; --_text: FieldText; --_selected-text: HighlightText; }
|
|
210
|
+
& > label > input:checked + span { border-color: Highlight; outline: 2px solid Highlight; outline-offset: -2px; }
|
|
211
|
+
& > label > input:disabled + span { color: GrayText; }
|
|
212
|
+
}
|
|
213
|
+
@media (prefers-reduced-motion: reduce) {
|
|
214
|
+
& > label > span { transition-duration: .01ms; }
|
|
215
|
+
& > label > input:checked + span::before { transition-duration: .01ms; }
|
|
216
|
+
&::before { transition-duration: .01ms; }
|
|
217
|
+
}
|
|
218
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@monabbous/slidebox",
|
|
3
|
-
"version": "1.
|
|
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",
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
"less": "./less/slidebox.less",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist/css/slidebox.css",
|
|
11
|
+
"dist/css/group.css",
|
|
11
12
|
"scss/",
|
|
12
13
|
"less/",
|
|
13
14
|
"tailwind/",
|
|
@@ -28,14 +29,17 @@
|
|
|
28
29
|
"type": "git",
|
|
29
30
|
"url": "git+https://github.com/monabbous/slidebox.git"
|
|
30
31
|
},
|
|
31
|
-
"homepage": "https://
|
|
32
|
+
"homepage": "https://nabous.dev/lab/slidebox/",
|
|
32
33
|
"bugs": {
|
|
33
34
|
"url": "https://github.com/monabbous/slidebox/issues"
|
|
34
35
|
},
|
|
35
36
|
"scripts": {
|
|
36
|
-
"build": "node scripts/build.mjs",
|
|
37
|
+
"build": "node scripts/build.mjs && node scripts/build-public.mjs",
|
|
37
38
|
"test": "node --test tests/*.test.mjs",
|
|
38
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",
|
|
39
43
|
"prepack": "npm run build"
|
|
40
44
|
},
|
|
41
45
|
"keywords": [
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
// Generated by scripts/build.mjs.
|
|
2
|
+
@use "sass:map";
|
|
3
|
+
|
|
4
|
+
$defaults: () !default;
|
|
5
|
+
|
|
6
|
+
@mixin range($options: ()) {
|
|
7
|
+
@each $name, $value in map.merge($defaults, $options) {
|
|
8
|
+
--slidebox-#{$name}: #{$value};
|
|
9
|
+
}
|
|
10
|
+
& {
|
|
11
|
+
--_size: var(--slidebox-size, 24px);
|
|
12
|
+
--_spacing: var(--slidebox-spacing, .33);
|
|
13
|
+
--_range-inset: max(0px, calc(var(--_size) * var(--_spacing) * .5));
|
|
14
|
+
--_thumb-size: calc(var(--_size) * (1 - var(--_spacing)));
|
|
15
|
+
--_deform: var(--slidebox-deform, .1);
|
|
16
|
+
--_duration: var(--slidebox-duration, 200ms);
|
|
17
|
+
--_easing: var(--slidebox-easing, ease-in-out);
|
|
18
|
+
--_track: var(--slidebox-track, Field);
|
|
19
|
+
--_border: var(--slidebox-border, ButtonBorder);
|
|
20
|
+
--_on: var(--slidebox-on, var(--_accent, light-dark(#0b75ff, SelectedItem)));
|
|
21
|
+
appearance: none;
|
|
22
|
+
-webkit-appearance: none;
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
width: 100%;
|
|
25
|
+
min-width: 0;
|
|
26
|
+
height: var(--_size);
|
|
27
|
+
margin: 0;
|
|
28
|
+
padding-block: 0;
|
|
29
|
+
padding-inline: var(--_range-inset);
|
|
30
|
+
border: 1px solid var(--_border);
|
|
31
|
+
border-radius: var(--slidebox-radius, 100vw);
|
|
32
|
+
background: var(--_track);
|
|
33
|
+
color: var(--_on);
|
|
34
|
+
cursor: pointer;
|
|
35
|
+
accent-color: var(--_on);
|
|
36
|
+
}
|
|
37
|
+
&[data-slidebox-range-fill] {
|
|
38
|
+
--_fill-size: max(0px, min(var(--_thumb-size), calc(var(--_size) - 2px)));
|
|
39
|
+
--_fill-stop: clamp(0px, calc(var(--_thumb-size) * .5 + (100% - var(--_thumb-size)) * clamp(0, var(--slidebox-range-fill, 0), 1)), 100%);
|
|
40
|
+
background-image:
|
|
41
|
+
radial-gradient(circle closest-side, var(--_fill-color, var(--_on)) calc(100% - .5px), transparent 100%),
|
|
42
|
+
linear-gradient(to right, transparent 0 calc(var(--_fill-size) * .5), var(--_fill-color, var(--_on)) calc(var(--_fill-size) * .5) var(--_fill-stop), transparent var(--_fill-stop)),
|
|
43
|
+
var(--_range-track-image, none);
|
|
44
|
+
background-size: var(--_fill-size) var(--_fill-size), max(0px, calc(100% - 2 * var(--_range-inset))) var(--_fill-size), 100vw 100vh;
|
|
45
|
+
background-position: left var(--_range-inset) center, center, 0 0;
|
|
46
|
+
background-repeat: no-repeat;
|
|
47
|
+
background-attachment: scroll, scroll, fixed;
|
|
48
|
+
background-clip: padding-box;
|
|
49
|
+
}
|
|
50
|
+
&[data-slidebox-range-fill]:dir(rtl) {
|
|
51
|
+
background-image:
|
|
52
|
+
radial-gradient(circle closest-side, var(--_fill-color, var(--_on)) calc(100% - .5px), transparent 100%),
|
|
53
|
+
linear-gradient(to left, transparent 0 calc(var(--_fill-size) * .5), var(--_fill-color, var(--_on)) calc(var(--_fill-size) * .5) var(--_fill-stop), transparent var(--_fill-stop)),
|
|
54
|
+
var(--_range-track-image, none);
|
|
55
|
+
background-position: right var(--_range-inset) center, center, 0 0;
|
|
56
|
+
}
|
|
57
|
+
&::-webkit-slider-runnable-track {
|
|
58
|
+
box-sizing: border-box;
|
|
59
|
+
height: calc(var(--_size) - 2px);
|
|
60
|
+
border: 0;
|
|
61
|
+
border-radius: var(--slidebox-radius, 100vw);
|
|
62
|
+
background: transparent;
|
|
63
|
+
}
|
|
64
|
+
&::-moz-range-track {
|
|
65
|
+
box-sizing: border-box;
|
|
66
|
+
height: calc(var(--_size) - 2px);
|
|
67
|
+
border: 0;
|
|
68
|
+
border-radius: var(--slidebox-radius, 100vw);
|
|
69
|
+
background: transparent;
|
|
70
|
+
}
|
|
71
|
+
&::-webkit-slider-thumb {
|
|
72
|
+
appearance: none;
|
|
73
|
+
-webkit-appearance: none;
|
|
74
|
+
box-sizing: border-box;
|
|
75
|
+
width: calc(var(--_size) * (1 - var(--_spacing)));
|
|
76
|
+
height: calc(var(--_size) * (1 - var(--_spacing)));
|
|
77
|
+
margin-top: calc(var(--_size) * var(--_spacing) / 2 - 1px);
|
|
78
|
+
border: 1px solid var(--_track);
|
|
79
|
+
border-radius: var(--slidebox-radius, 100vw);
|
|
80
|
+
background: var(--_on);
|
|
81
|
+
transition: none;
|
|
82
|
+
}
|
|
83
|
+
&::-moz-range-thumb {
|
|
84
|
+
box-sizing: border-box;
|
|
85
|
+
width: calc(var(--_size) * (1 - var(--_spacing)));
|
|
86
|
+
height: calc(var(--_size) * (1 - var(--_spacing)));
|
|
87
|
+
border: 1px solid var(--_track);
|
|
88
|
+
border-radius: var(--slidebox-radius, 100vw);
|
|
89
|
+
background: var(--_on);
|
|
90
|
+
transition: none;
|
|
91
|
+
}
|
|
92
|
+
&:focus-visible { outline: 2px solid var(--_on); outline-offset: 3px; }
|
|
93
|
+
&[data-slidebox-range-dragging]::-webkit-slider-thumb { background: transparent; border-color: transparent; transition: none; }
|
|
94
|
+
&[data-slidebox-range-dragging]::-moz-range-thumb { background: transparent; border-color: transparent; transition: none; }
|
|
95
|
+
&:disabled { cursor: not-allowed; opacity: .5; }
|
|
96
|
+
@supports (color: AccentColor) {
|
|
97
|
+
& { --_accent: AccentColor; }
|
|
98
|
+
}
|
|
99
|
+
@media (forced-colors: active) {
|
|
100
|
+
& { --_track: Field; --_border: ButtonBorder; --_on: Highlight; }
|
|
101
|
+
&::-webkit-slider-thumb { border-color: Highlight; }
|
|
102
|
+
&::-moz-range-thumb { border-color: Highlight; }
|
|
103
|
+
}
|
|
104
|
+
@media (prefers-reduced-motion: reduce) {
|
|
105
|
+
& { transition-duration: .01ms; }
|
|
106
|
+
&::-webkit-slider-thumb { transition-duration: .01ms; }
|
|
107
|
+
&::-moz-range-thumb { transition-duration: .01ms; }
|
|
108
|
+
}
|
|
109
|
+
}
|
package/scss/_mixins.scss
CHANGED
|
@@ -37,6 +37,7 @@ $defaults: () !default;
|
|
|
37
37
|
}
|
|
38
38
|
&::after {
|
|
39
39
|
--_start: 0; --_end: 1;
|
|
40
|
+
box-sizing: border-box;
|
|
40
41
|
content: "";
|
|
41
42
|
display: block;
|
|
42
43
|
flex: 1 1 auto;
|
|
@@ -47,6 +48,7 @@ $defaults: () !default;
|
|
|
47
48
|
margin-inline-start: calc((1em * var(--_container-width-ratio) - 1em) * var(--_start) + var(--_thumb-spacing-ratio) * .5em);
|
|
48
49
|
margin-inline-end: calc((1em * var(--_container-width-ratio) - 1em) * var(--_end) + var(--_thumb-spacing-ratio) * .5em);
|
|
49
50
|
border-radius: inherit;
|
|
51
|
+
border: 1px solid var(--_track);
|
|
50
52
|
background: var(--_off);
|
|
51
53
|
transition: background var(--_duration) var(--_easing-function), margin-inline-start var(--_duration) var(--_easing-function), margin-inline-end var(--_duration) var(--_easing-function);
|
|
52
54
|
transition-delay: 0s, 0s, calc(var(--_duration) * var(--_deform));
|
|
@@ -71,3 +73,130 @@ $defaults: () !default;
|
|
|
71
73
|
&::after { transition-duration: .01ms; transition-delay: 0ms; }
|
|
72
74
|
}
|
|
73
75
|
}
|
|
76
|
+
|
|
77
|
+
@mixin group($options: ()) {
|
|
78
|
+
@each $name, $value in map.merge($defaults, $options) {
|
|
79
|
+
--slidebox-#{$name}: #{$value};
|
|
80
|
+
}
|
|
81
|
+
& {
|
|
82
|
+
--_size: var(--slidebox-size, 36px);
|
|
83
|
+
--_spacing: var(--slidebox-spacing, .12);
|
|
84
|
+
--_deform: var(--slidebox-deform, .06);
|
|
85
|
+
--_duration: var(--slidebox-duration, 200ms);
|
|
86
|
+
--_easing: var(--slidebox-easing, ease-in-out);
|
|
87
|
+
--_track: var(--slidebox-track, Field);
|
|
88
|
+
--_border: var(--slidebox-border, ButtonBorder);
|
|
89
|
+
--_off: var(--slidebox-off, FieldText);
|
|
90
|
+
--_on: var(--slidebox-on, var(--_accent, light-dark(#0b75ff, SelectedItem)));
|
|
91
|
+
--_text: var(--slidebox-text, var(--slidebox-off, FieldText));
|
|
92
|
+
--_selected-text: var(--slidebox-selected-text, HighlightText);
|
|
93
|
+
--_press-start: 0px;
|
|
94
|
+
--_press-end: 0px;
|
|
95
|
+
display: inline-grid;
|
|
96
|
+
grid-auto-flow: column;
|
|
97
|
+
grid-auto-columns: minmax(0, 1fr);
|
|
98
|
+
box-sizing: border-box;
|
|
99
|
+
padding: calc(var(--_size) * var(--_spacing));
|
|
100
|
+
gap: calc(var(--_size) * var(--_spacing));
|
|
101
|
+
border: 1px solid var(--_border);
|
|
102
|
+
border-radius: var(--slidebox-radius, 100vw);
|
|
103
|
+
background: var(--_track);
|
|
104
|
+
color: var(--_text);
|
|
105
|
+
isolation: isolate;
|
|
106
|
+
position: relative;
|
|
107
|
+
}
|
|
108
|
+
& > label {
|
|
109
|
+
position: relative;
|
|
110
|
+
display: grid;
|
|
111
|
+
min-width: 0;
|
|
112
|
+
cursor: pointer;
|
|
113
|
+
}
|
|
114
|
+
& > label > input[type="radio"] {
|
|
115
|
+
position: absolute;
|
|
116
|
+
width: 1px;
|
|
117
|
+
height: 1px;
|
|
118
|
+
padding: 0;
|
|
119
|
+
margin: -1px;
|
|
120
|
+
overflow: hidden;
|
|
121
|
+
clip-path: inset(50%);
|
|
122
|
+
white-space: nowrap;
|
|
123
|
+
}
|
|
124
|
+
& > label > span {
|
|
125
|
+
position: relative;
|
|
126
|
+
isolation: isolate;
|
|
127
|
+
display: grid;
|
|
128
|
+
place-items: center;
|
|
129
|
+
box-sizing: border-box;
|
|
130
|
+
min-height: var(--_size);
|
|
131
|
+
padding: .35em 1em;
|
|
132
|
+
border: 1px solid transparent;
|
|
133
|
+
border-radius: var(--slidebox-radius, 100vw);
|
|
134
|
+
color: var(--_text);
|
|
135
|
+
background: transparent;
|
|
136
|
+
transition: color var(--_duration) var(--_easing);
|
|
137
|
+
}
|
|
138
|
+
& > label > input:checked + span {
|
|
139
|
+
color: var(--_selected-text);
|
|
140
|
+
}
|
|
141
|
+
& > label > input:checked + span::before {
|
|
142
|
+
content: "";
|
|
143
|
+
position: absolute;
|
|
144
|
+
inset: 0;
|
|
145
|
+
z-index: -1;
|
|
146
|
+
pointer-events: none;
|
|
147
|
+
border-radius: inherit;
|
|
148
|
+
background: var(--_on);
|
|
149
|
+
margin-inline-start: var(--_press-start);
|
|
150
|
+
margin-inline-end: var(--_press-end);
|
|
151
|
+
transition: margin-inline-start var(--_duration) var(--_easing), margin-inline-end var(--_duration) var(--_easing);
|
|
152
|
+
}
|
|
153
|
+
& > label > input:not(:checked) + span { color: var(--_text); }
|
|
154
|
+
&:has(> label > input:checked):has(> label:active > input:not(:checked):not(:disabled)):not(:has(> label:active ~ label > input:checked)) {
|
|
155
|
+
--_press-end: calc(-1 * var(--_size) * var(--_deform));
|
|
156
|
+
}
|
|
157
|
+
&:has(> label:active > input:not(:disabled)):has(> label:active ~ label > input:checked) {
|
|
158
|
+
--_press-start: calc(-1 * var(--_size) * var(--_deform));
|
|
159
|
+
}
|
|
160
|
+
& > label > input:focus-visible + span {
|
|
161
|
+
outline: 2px solid var(--_on);
|
|
162
|
+
outline-offset: 2px;
|
|
163
|
+
}
|
|
164
|
+
& > label:has(> input:disabled) { cursor: not-allowed; }
|
|
165
|
+
& > label > input:disabled + span { opacity: .5; }
|
|
166
|
+
@supports (color: AccentColor) {
|
|
167
|
+
& { --_accent: AccentColor; }
|
|
168
|
+
}
|
|
169
|
+
/* A shared sliding indicator where scoped CSS anchor positioning is available.
|
|
170
|
+
Other browsers retain the per-segment highlight above. Neither needs JS. */
|
|
171
|
+
@supports (anchor-scope: --slidebox-selection) and (left: anchor(left)) {
|
|
172
|
+
& { anchor-scope: --slidebox-selection; }
|
|
173
|
+
& > label:has(> input:checked) { anchor-name: --slidebox-selection; }
|
|
174
|
+
&:has(> label > input:checked)::before {
|
|
175
|
+
content: "";
|
|
176
|
+
position: absolute;
|
|
177
|
+
position-anchor: --slidebox-selection;
|
|
178
|
+
left: anchor(left);
|
|
179
|
+
right: anchor(right);
|
|
180
|
+
top: anchor(top);
|
|
181
|
+
height: anchor-size(height);
|
|
182
|
+
margin-inline-start: var(--_press-start);
|
|
183
|
+
margin-inline-end: var(--_press-end);
|
|
184
|
+
z-index: -1;
|
|
185
|
+
border-radius: var(--slidebox-radius, 100vw);
|
|
186
|
+
background: var(--_on);
|
|
187
|
+
pointer-events: none;
|
|
188
|
+
transition: left var(--_duration) var(--_easing), right var(--_duration) var(--_easing), top var(--_duration) var(--_easing), height var(--_duration) var(--_easing), margin-inline-start var(--_duration) var(--_easing), margin-inline-end var(--_duration) var(--_easing);
|
|
189
|
+
}
|
|
190
|
+
& > label > input:checked + span::before { content: none; }
|
|
191
|
+
}
|
|
192
|
+
@media (forced-colors: active) {
|
|
193
|
+
& { --_track: Field; --_border: ButtonBorder; --_off: FieldText; --_on: Highlight; --_text: FieldText; --_selected-text: HighlightText; }
|
|
194
|
+
& > label > input:checked + span { border-color: Highlight; outline: 2px solid Highlight; outline-offset: -2px; }
|
|
195
|
+
& > label > input:disabled + span { color: GrayText; }
|
|
196
|
+
}
|
|
197
|
+
@media (prefers-reduced-motion: reduce) {
|
|
198
|
+
& > label > span { transition-duration: .01ms; }
|
|
199
|
+
& > label > input:checked + span::before { transition-duration: .01ms; }
|
|
200
|
+
&::before { transition-duration: .01ms; }
|
|
201
|
+
}
|
|
202
|
+
}
|
package/scss/group.scss
ADDED
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
{
|
|
2
|
+
".slidebox-range": {
|
|
3
|
+
"--_size": "var(--slidebox-size, 24px)",
|
|
4
|
+
"--_spacing": "var(--slidebox-spacing, .33)",
|
|
5
|
+
"--_range-inset": "max(0px, calc(var(--_size) * var(--_spacing) * .5))",
|
|
6
|
+
"--_thumb-size": "calc(var(--_size) * (1 - var(--_spacing)))",
|
|
7
|
+
"--_deform": "var(--slidebox-deform, .1)",
|
|
8
|
+
"--_duration": "var(--slidebox-duration, 200ms)",
|
|
9
|
+
"--_easing": "var(--slidebox-easing, ease-in-out)",
|
|
10
|
+
"--_track": "var(--slidebox-track, Field)",
|
|
11
|
+
"--_border": "var(--slidebox-border, ButtonBorder)",
|
|
12
|
+
"--_on": "var(--slidebox-on, var(--_accent, light-dark(#0b75ff, SelectedItem)))",
|
|
13
|
+
"appearance": "none",
|
|
14
|
+
"-webkit-appearance": "none",
|
|
15
|
+
"box-sizing": "border-box",
|
|
16
|
+
"width": "100%",
|
|
17
|
+
"min-width": "0",
|
|
18
|
+
"height": "var(--_size)",
|
|
19
|
+
"margin": "0",
|
|
20
|
+
"padding-block": "0",
|
|
21
|
+
"padding-inline": "var(--_range-inset)",
|
|
22
|
+
"border": "1px solid var(--_border)",
|
|
23
|
+
"border-radius": "var(--slidebox-radius, 100vw)",
|
|
24
|
+
"background": "var(--_track)",
|
|
25
|
+
"color": "var(--_on)",
|
|
26
|
+
"cursor": "pointer",
|
|
27
|
+
"accent-color": "var(--_on)",
|
|
28
|
+
"&[data-slidebox-range-fill]": {
|
|
29
|
+
"--_fill-size": "max(0px, min(var(--_thumb-size), calc(var(--_size) - 2px)))",
|
|
30
|
+
"--_fill-stop": "clamp(0px, calc(var(--_thumb-size) * .5 + (100% - var(--_thumb-size)) * clamp(0, var(--slidebox-range-fill, 0), 1)), 100%)",
|
|
31
|
+
"background-image": "radial-gradient(circle closest-side, var(--_fill-color, var(--_on)) calc(100% - .5px), transparent 100%),\n linear-gradient(to right, transparent 0 calc(var(--_fill-size) * .5), var(--_fill-color, var(--_on)) calc(var(--_fill-size) * .5) var(--_fill-stop), transparent var(--_fill-stop)),\n var(--_range-track-image, none)",
|
|
32
|
+
"background-size": "var(--_fill-size) var(--_fill-size), max(0px, calc(100% - 2 * var(--_range-inset))) var(--_fill-size), 100vw 100vh",
|
|
33
|
+
"background-position": "left var(--_range-inset) center, center, 0 0",
|
|
34
|
+
"background-repeat": "no-repeat",
|
|
35
|
+
"background-attachment": "scroll, scroll, fixed",
|
|
36
|
+
"background-clip": "padding-box"
|
|
37
|
+
},
|
|
38
|
+
"&[data-slidebox-range-fill]:dir(rtl)": {
|
|
39
|
+
"background-image": "radial-gradient(circle closest-side, var(--_fill-color, var(--_on)) calc(100% - .5px), transparent 100%),\n linear-gradient(to left, transparent 0 calc(var(--_fill-size) * .5), var(--_fill-color, var(--_on)) calc(var(--_fill-size) * .5) var(--_fill-stop), transparent var(--_fill-stop)),\n var(--_range-track-image, none)",
|
|
40
|
+
"background-position": "right var(--_range-inset) center, center, 0 0"
|
|
41
|
+
},
|
|
42
|
+
"&::-webkit-slider-runnable-track": {
|
|
43
|
+
"box-sizing": "border-box",
|
|
44
|
+
"height": "calc(var(--_size) - 2px)",
|
|
45
|
+
"border": "0",
|
|
46
|
+
"border-radius": "var(--slidebox-radius, 100vw)",
|
|
47
|
+
"background": "transparent"
|
|
48
|
+
},
|
|
49
|
+
"&::-moz-range-track": {
|
|
50
|
+
"box-sizing": "border-box",
|
|
51
|
+
"height": "calc(var(--_size) - 2px)",
|
|
52
|
+
"border": "0",
|
|
53
|
+
"border-radius": "var(--slidebox-radius, 100vw)",
|
|
54
|
+
"background": "transparent"
|
|
55
|
+
},
|
|
56
|
+
"&::-webkit-slider-thumb": {
|
|
57
|
+
"appearance": "none",
|
|
58
|
+
"-webkit-appearance": "none",
|
|
59
|
+
"box-sizing": "border-box",
|
|
60
|
+
"width": "calc(var(--_size) * (1 - var(--_spacing)))",
|
|
61
|
+
"height": "calc(var(--_size) * (1 - var(--_spacing)))",
|
|
62
|
+
"margin-top": "calc(var(--_size) * var(--_spacing) / 2 - 1px)",
|
|
63
|
+
"border": "1px solid var(--_track)",
|
|
64
|
+
"border-radius": "var(--slidebox-radius, 100vw)",
|
|
65
|
+
"background": "var(--_on)",
|
|
66
|
+
"transition": "none"
|
|
67
|
+
},
|
|
68
|
+
"&::-moz-range-thumb": {
|
|
69
|
+
"box-sizing": "border-box",
|
|
70
|
+
"width": "calc(var(--_size) * (1 - var(--_spacing)))",
|
|
71
|
+
"height": "calc(var(--_size) * (1 - var(--_spacing)))",
|
|
72
|
+
"border": "1px solid var(--_track)",
|
|
73
|
+
"border-radius": "var(--slidebox-radius, 100vw)",
|
|
74
|
+
"background": "var(--_on)",
|
|
75
|
+
"transition": "none"
|
|
76
|
+
},
|
|
77
|
+
"&:focus-visible": {
|
|
78
|
+
"outline": "2px solid var(--_on)",
|
|
79
|
+
"outline-offset": "3px"
|
|
80
|
+
},
|
|
81
|
+
"&[data-slidebox-range-dragging]::-webkit-slider-thumb": {
|
|
82
|
+
"background": "transparent",
|
|
83
|
+
"border-color": "transparent",
|
|
84
|
+
"transition": "none"
|
|
85
|
+
},
|
|
86
|
+
"&[data-slidebox-range-dragging]::-moz-range-thumb": {
|
|
87
|
+
"background": "transparent",
|
|
88
|
+
"border-color": "transparent",
|
|
89
|
+
"transition": "none"
|
|
90
|
+
},
|
|
91
|
+
"&:disabled": {
|
|
92
|
+
"cursor": "not-allowed",
|
|
93
|
+
"opacity": ".5"
|
|
94
|
+
},
|
|
95
|
+
"@supports (color: AccentColor)": {
|
|
96
|
+
"&": {
|
|
97
|
+
"--_accent": "AccentColor"
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
"@media (forced-colors: active)": {
|
|
101
|
+
"&": {
|
|
102
|
+
"--_track": "Field",
|
|
103
|
+
"--_border": "ButtonBorder",
|
|
104
|
+
"--_on": "Highlight"
|
|
105
|
+
},
|
|
106
|
+
"&::-webkit-slider-thumb": {
|
|
107
|
+
"border-color": "Highlight"
|
|
108
|
+
},
|
|
109
|
+
"&::-moz-range-thumb": {
|
|
110
|
+
"border-color": "Highlight"
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
"@media (prefers-reduced-motion: reduce)": {
|
|
114
|
+
"&": {
|
|
115
|
+
"transition-duration": ".01ms"
|
|
116
|
+
},
|
|
117
|
+
"&::-webkit-slider-thumb": {
|
|
118
|
+
"transition-duration": ".01ms"
|
|
119
|
+
},
|
|
120
|
+
"&::-moz-range-thumb": {
|
|
121
|
+
"transition-duration": ".01ms"
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|