@rcarls/rc-slider 0.1.0

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 ADDED
@@ -0,0 +1,32 @@
1
+ # @rcarls/rc-slider
2
+
3
+ Styled range input web component with composable shadow-DOM track and value
4
+ display hooks.
5
+
6
+ ## Styling Hooks
7
+
8
+ `rc-slider` progressively enhances a direct child `<input type="range">`. The
9
+ input remains consumer-owned light DOM for native form participation and direct
10
+ consumer styling, while the component renders its track and value display in
11
+ shadow DOM.
12
+
13
+ Consumers can decorate the track with a real named slot:
14
+
15
+ ```html
16
+ <rc-slider>
17
+ <span slot="track-background" class="threshold-bands"></span>
18
+ <input type="range" min="0" max="100" value="40">
19
+ </rc-slider>
20
+ ```
21
+
22
+ The component exposes `root`, `control`, `track`, `progress`, and
23
+ `value-display` CSS parts. The root part reflects `data-readonly`,
24
+ `data-disabled`, and `data-has-value-text`.
25
+
26
+ Native input styling stays with the consumer:
27
+
28
+ ```css
29
+ rc-slider > input[type="range"] {
30
+ appearance: auto;
31
+ }
32
+ ```
@@ -0,0 +1,608 @@
1
+ {
2
+ "schemaVersion": "1.0.0",
3
+ "readme": "",
4
+ "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "src/define.ts",
8
+ "declarations": [],
9
+ "exports": [
10
+ {
11
+ "kind": "custom-element-definition",
12
+ "name": "rc-slider",
13
+ "declaration": {
14
+ "name": "RCSlider",
15
+ "module": "/src/index.js"
16
+ }
17
+ },
18
+ {
19
+ "kind": "js",
20
+ "name": "*",
21
+ "declaration": {
22
+ "name": "*",
23
+ "module": "src/index.js"
24
+ }
25
+ }
26
+ ]
27
+ },
28
+ {
29
+ "kind": "javascript-module",
30
+ "path": "src/index.ts",
31
+ "declarations": [],
32
+ "exports": [
33
+ {
34
+ "kind": "js",
35
+ "name": "*",
36
+ "declaration": {
37
+ "name": "*",
38
+ "module": "src/rc-slider.js"
39
+ }
40
+ }
41
+ ]
42
+ },
43
+ {
44
+ "kind": "javascript-module",
45
+ "path": "src/rc-slider.ts",
46
+ "declarations": [
47
+ {
48
+ "kind": "class",
49
+ "description": "Progressive enhancement wrapper for a consumer-provided `<input type=\"range\">`.\nThe native input must be supplied as a direct child element — the component\nadds a styled track, optional live value display, and the APG keyboard\nenhancement (Page Up/Down, ±10 steps).\n\nLabel association:\n- Explicit `for`/`id`: `<label for=\"vol\">Volume</label><rc-slider><input id=\"vol\" …></rc-slider>`\n- Direct `aria-label` on the input: `<input aria-label=\"Volume\" …>`\n\nThese patterns all work without JavaScript. The component does not render a\nlabel element itself — the consumer is responsible for accessible naming.\n\nForm participation is handled natively by the consumer-provided input's `name`\nattribute; no `ElementInternals` setup is required.",
50
+ "name": "RCSlider",
51
+ "cssProperties": [
52
+ {
53
+ "description": "Half the thumb width; used to position the float value display.",
54
+ "name": "--rc-thumb-radius",
55
+ "default": "9px"
56
+ },
57
+ {
58
+ "description": "Gap between track and inline value display.",
59
+ "name": "--rc-slider-gap",
60
+ "default": "var(--rc-control-gap)"
61
+ },
62
+ {
63
+ "description": "Track hit-area block size.",
64
+ "name": "--rc-slider-control-size",
65
+ "default": "var(--rc-control-block-size)"
66
+ },
67
+ {
68
+ "description": "Visual track thickness.",
69
+ "name": "--rc-slider-track-size",
70
+ "default": "0.1875rem"
71
+ },
72
+ {
73
+ "description": "Unfilled track color.",
74
+ "name": "--rc-slider-track-background",
75
+ "default": "CanvasText"
76
+ },
77
+ {
78
+ "description": "Unfilled track opacity.",
79
+ "name": "--rc-slider-track-opacity",
80
+ "default": "0.25"
81
+ },
82
+ {
83
+ "description": "Track border radius.",
84
+ "name": "--rc-slider-track-radius",
85
+ "default": "var(--rc-control-radius)"
86
+ },
87
+ {
88
+ "description": "Filled track color.",
89
+ "name": "--rc-slider-progress-background",
90
+ "default": "var(--rc-accent)"
91
+ },
92
+ {
93
+ "description": "Value display text color.",
94
+ "name": "--rc-slider-value-color",
95
+ "default": "var(--rc-text-disabled)"
96
+ },
97
+ {
98
+ "description": "Block-axis offset for horizontal float value display.",
99
+ "name": "--rc-slider-float-value-block-offset",
100
+ "default": "-1.4em"
101
+ },
102
+ {
103
+ "description": "Inline-axis offset for vertical float value display.",
104
+ "name": "--rc-slider-float-value-inline-offset",
105
+ "default": "calc(100% + 0.5rem)"
106
+ }
107
+ ],
108
+ "cssParts": [
109
+ {
110
+ "description": "Root layout wrapper.",
111
+ "name": "root"
112
+ },
113
+ {
114
+ "description": "Track/input positioning wrapper.",
115
+ "name": "control"
116
+ },
117
+ {
118
+ "description": "Visual slider track.",
119
+ "name": "track"
120
+ },
121
+ {
122
+ "description": "Filled progress segment.",
123
+ "name": "progress"
124
+ },
125
+ {
126
+ "description": "Rendered value text.",
127
+ "name": "value-display"
128
+ }
129
+ ],
130
+ "slots": [
131
+ {
132
+ "description": "Optional decorative content rendered inside the track before the progress fill.",
133
+ "name": "track-background"
134
+ },
135
+ {
136
+ "description": "Optional replacement for the rendered value text.",
137
+ "name": "value-display"
138
+ }
139
+ ],
140
+ "members": [
141
+ {
142
+ "kind": "field",
143
+ "name": "min",
144
+ "type": {
145
+ "text": "number"
146
+ },
147
+ "default": "0",
148
+ "description": "Minimum slider value.",
149
+ "attribute": "min"
150
+ },
151
+ {
152
+ "kind": "field",
153
+ "name": "max",
154
+ "type": {
155
+ "text": "number"
156
+ },
157
+ "default": "100",
158
+ "description": "Maximum slider value.",
159
+ "attribute": "max"
160
+ },
161
+ {
162
+ "kind": "field",
163
+ "name": "step",
164
+ "type": {
165
+ "text": "number"
166
+ },
167
+ "default": "1",
168
+ "description": "Slider step.",
169
+ "attribute": "step"
170
+ },
171
+ {
172
+ "kind": "field",
173
+ "name": "_value",
174
+ "type": {
175
+ "text": "number | undefined"
176
+ },
177
+ "privacy": "private"
178
+ },
179
+ {
180
+ "kind": "field",
181
+ "name": "_defaultValue",
182
+ "type": {
183
+ "text": "number | undefined"
184
+ },
185
+ "privacy": "private"
186
+ },
187
+ {
188
+ "kind": "field",
189
+ "name": "_valueInitialized",
190
+ "type": {
191
+ "text": "boolean"
192
+ },
193
+ "privacy": "private",
194
+ "default": "false"
195
+ },
196
+ {
197
+ "kind": "field",
198
+ "name": "value",
199
+ "type": {
200
+ "text": "number"
201
+ },
202
+ "description": "Current slider value.",
203
+ "attribute": "value"
204
+ },
205
+ {
206
+ "kind": "field",
207
+ "name": "defaultValue",
208
+ "type": {
209
+ "text": "number | undefined"
210
+ },
211
+ "description": "Initial uncontrolled slider value. Has no effect after the first user interaction or `value` write.",
212
+ "attribute": "default-value"
213
+ },
214
+ {
215
+ "kind": "field",
216
+ "name": "disabled",
217
+ "type": {
218
+ "text": "boolean"
219
+ },
220
+ "default": "false",
221
+ "description": "Disable the underlying input.",
222
+ "attribute": "disabled",
223
+ "reflects": true
224
+ },
225
+ {
226
+ "kind": "field",
227
+ "name": "readonly",
228
+ "type": {
229
+ "text": "boolean"
230
+ },
231
+ "default": "false",
232
+ "description": "Prevents edits while preserving normal display. Not a native range attribute.",
233
+ "attribute": "readonly",
234
+ "reflects": true
235
+ },
236
+ {
237
+ "kind": "field",
238
+ "name": "display",
239
+ "type": {
240
+ "text": "DisplayValue"
241
+ },
242
+ "default": "null",
243
+ "description": "Controls the live value display.\n\n- Absent (default) — no value shown.\n- `display` or `display=\"float\"` — floats above the thumb.\n- `display=\"inline-start\"` — rendered before the track, inline in the grid.\n- `display=\"inline-end\"` — rendered after the track, inline in the grid.",
244
+ "attribute": "display",
245
+ "reflects": true
246
+ },
247
+ {
248
+ "kind": "field",
249
+ "name": "valueText",
250
+ "type": {
251
+ "text": "string"
252
+ },
253
+ "default": "\"\"",
254
+ "description": "Screen-reader value text. When set, forwarded as `aria-valuetext` on the native input.",
255
+ "attribute": "value-text"
256
+ },
257
+ {
258
+ "kind": "field",
259
+ "name": "orientation",
260
+ "type": {
261
+ "text": "\"horizontal\" | \"vertical\""
262
+ },
263
+ "default": "\"horizontal\"",
264
+ "description": "Orientation; reflected as an attribute and forwarded to `aria-orientation`.",
265
+ "attribute": "orientation",
266
+ "reflects": true
267
+ },
268
+ {
269
+ "kind": "field",
270
+ "name": "_nativeInput",
271
+ "type": {
272
+ "text": "HTMLInputElement | null"
273
+ },
274
+ "privacy": "private",
275
+ "default": "null"
276
+ },
277
+ {
278
+ "kind": "field",
279
+ "name": "_displayText",
280
+ "type": {
281
+ "text": "string"
282
+ },
283
+ "privacy": "private",
284
+ "readonly": true
285
+ },
286
+ {
287
+ "kind": "field",
288
+ "name": "_nativeInputValue",
289
+ "type": {
290
+ "text": "number"
291
+ },
292
+ "privacy": "private",
293
+ "readonly": true
294
+ },
295
+ {
296
+ "kind": "method",
297
+ "name": "_findInput",
298
+ "privacy": "private",
299
+ "return": {
300
+ "type": {
301
+ "text": "void"
302
+ }
303
+ },
304
+ "description": "Finds the consumer-provided native input and wires event listeners.\nThe input remains in the DOM permanently; the component enhances it\nrather than replacing it."
305
+ },
306
+ {
307
+ "kind": "field",
308
+ "name": "_onDefaultSlotChange",
309
+ "privacy": "private"
310
+ },
311
+ {
312
+ "kind": "method",
313
+ "name": "_applyInitialValueToInput",
314
+ "privacy": "private",
315
+ "return": {
316
+ "type": {
317
+ "text": "void"
318
+ }
319
+ },
320
+ "parameters": [
321
+ {
322
+ "name": "input",
323
+ "type": {
324
+ "text": "HTMLInputElement"
325
+ }
326
+ }
327
+ ]
328
+ },
329
+ {
330
+ "kind": "method",
331
+ "name": "_applyValueToInput",
332
+ "privacy": "private",
333
+ "return": {
334
+ "type": {
335
+ "text": "void"
336
+ }
337
+ },
338
+ "parameters": [
339
+ {
340
+ "name": "value",
341
+ "type": {
342
+ "text": "number"
343
+ }
344
+ }
345
+ ]
346
+ },
347
+ {
348
+ "kind": "method",
349
+ "name": "_wireInput",
350
+ "privacy": "private",
351
+ "return": {
352
+ "type": {
353
+ "text": "void"
354
+ }
355
+ },
356
+ "parameters": [
357
+ {
358
+ "name": "input",
359
+ "type": {
360
+ "text": "HTMLInputElement"
361
+ }
362
+ }
363
+ ]
364
+ },
365
+ {
366
+ "kind": "method",
367
+ "name": "_unwireInput",
368
+ "privacy": "private",
369
+ "return": {
370
+ "type": {
371
+ "text": "void"
372
+ }
373
+ }
374
+ },
375
+ {
376
+ "kind": "method",
377
+ "name": "_syncAriaAttributes",
378
+ "privacy": "private",
379
+ "return": {
380
+ "type": {
381
+ "text": "void"
382
+ }
383
+ },
384
+ "parameters": [
385
+ {
386
+ "name": "input",
387
+ "type": {
388
+ "text": "HTMLInputElement"
389
+ }
390
+ }
391
+ ]
392
+ },
393
+ {
394
+ "kind": "field",
395
+ "name": "_onInput",
396
+ "privacy": "private",
397
+ "readonly": true
398
+ },
399
+ {
400
+ "kind": "field",
401
+ "name": "_onChange",
402
+ "privacy": "private",
403
+ "readonly": true
404
+ },
405
+ {
406
+ "kind": "method",
407
+ "name": "_handleRangeEvent",
408
+ "privacy": "private",
409
+ "return": {
410
+ "type": {
411
+ "text": "void"
412
+ }
413
+ },
414
+ "parameters": [
415
+ {
416
+ "name": "e",
417
+ "type": {
418
+ "text": "Event"
419
+ }
420
+ },
421
+ {
422
+ "name": "type",
423
+ "type": {
424
+ "text": "\"rc-slider-input\" | \"rc-slider-change\""
425
+ }
426
+ }
427
+ ]
428
+ },
429
+ {
430
+ "kind": "field",
431
+ "name": "_onKeydown",
432
+ "privacy": "private",
433
+ "readonly": true
434
+ },
435
+ {
436
+ "kind": "method",
437
+ "name": "_commitInputValue",
438
+ "privacy": "private",
439
+ "return": {
440
+ "type": {
441
+ "text": "void"
442
+ }
443
+ },
444
+ "parameters": [
445
+ {
446
+ "name": "input",
447
+ "type": {
448
+ "text": "HTMLInputElement"
449
+ }
450
+ }
451
+ ]
452
+ },
453
+ {
454
+ "kind": "method",
455
+ "name": "_progressStyle",
456
+ "privacy": "private",
457
+ "return": {
458
+ "type": {
459
+ "text": "string"
460
+ }
461
+ }
462
+ },
463
+ {
464
+ "kind": "method",
465
+ "name": "_floatStyle",
466
+ "privacy": "private",
467
+ "return": {
468
+ "type": {
469
+ "text": "string"
470
+ }
471
+ }
472
+ }
473
+ ],
474
+ "events": [
475
+ {
476
+ "name": "type",
477
+ "type": {
478
+ "text": "CustomEvent"
479
+ }
480
+ },
481
+ {
482
+ "description": "Fires continuously while the value changes. Detail: `{ value }`.",
483
+ "name": "rc-slider-input"
484
+ },
485
+ {
486
+ "description": "Fires when the committed value changes (on release). Detail: `{ value }`.",
487
+ "name": "rc-slider-change"
488
+ }
489
+ ],
490
+ "attributes": [
491
+ {
492
+ "name": "min",
493
+ "type": {
494
+ "text": "number"
495
+ },
496
+ "default": "0",
497
+ "description": "Minimum slider value.",
498
+ "fieldName": "min"
499
+ },
500
+ {
501
+ "name": "max",
502
+ "type": {
503
+ "text": "number"
504
+ },
505
+ "default": "100",
506
+ "description": "Maximum slider value.",
507
+ "fieldName": "max"
508
+ },
509
+ {
510
+ "name": "step",
511
+ "type": {
512
+ "text": "number"
513
+ },
514
+ "default": "1",
515
+ "description": "Slider step.",
516
+ "fieldName": "step"
517
+ },
518
+ {
519
+ "name": "value",
520
+ "type": {
521
+ "text": "number"
522
+ },
523
+ "description": "Current slider value.",
524
+ "fieldName": "value"
525
+ },
526
+ {
527
+ "name": "default-value",
528
+ "type": {
529
+ "text": "number | undefined"
530
+ },
531
+ "description": "Initial uncontrolled slider value. Has no effect after the first user interaction or `value` write.",
532
+ "fieldName": "defaultValue"
533
+ },
534
+ {
535
+ "name": "disabled",
536
+ "type": {
537
+ "text": "boolean"
538
+ },
539
+ "default": "false",
540
+ "description": "Disable the underlying input.",
541
+ "fieldName": "disabled"
542
+ },
543
+ {
544
+ "name": "readonly",
545
+ "type": {
546
+ "text": "boolean"
547
+ },
548
+ "default": "false",
549
+ "description": "Prevents edits while preserving normal display. Not a native range attribute.",
550
+ "fieldName": "readonly"
551
+ },
552
+ {
553
+ "name": "display",
554
+ "type": {
555
+ "text": "DisplayValue"
556
+ },
557
+ "default": "null",
558
+ "description": "Controls the live value display.\n\n- Absent (default) — no value shown.\n- `display` or `display=\"float\"` — floats above the thumb.\n- `display=\"inline-start\"` — rendered before the track, inline in the grid.\n- `display=\"inline-end\"` — rendered after the track, inline in the grid.",
559
+ "fieldName": "display"
560
+ },
561
+ {
562
+ "name": "value-text",
563
+ "type": {
564
+ "text": "string"
565
+ },
566
+ "default": "\"\"",
567
+ "description": "Screen-reader value text. When set, forwarded as `aria-valuetext` on the native input.",
568
+ "fieldName": "valueText"
569
+ },
570
+ {
571
+ "name": "orientation",
572
+ "type": {
573
+ "text": "\"horizontal\" | \"vertical\""
574
+ },
575
+ "default": "\"horizontal\"",
576
+ "description": "Orientation; reflected as an attribute and forwarded to `aria-orientation`.",
577
+ "fieldName": "orientation"
578
+ }
579
+ ],
580
+ "superclass": {
581
+ "name": "LitElement",
582
+ "package": "lit"
583
+ },
584
+ "tagName": "rc-slider",
585
+ "customElement": true
586
+ }
587
+ ],
588
+ "exports": [
589
+ {
590
+ "kind": "js",
591
+ "name": "RCSlider",
592
+ "declaration": {
593
+ "name": "RCSlider",
594
+ "module": "src/rc-slider.ts"
595
+ }
596
+ },
597
+ {
598
+ "kind": "js",
599
+ "name": "default",
600
+ "declaration": {
601
+ "name": "RCSlider",
602
+ "module": "src/rc-slider.ts"
603
+ }
604
+ }
605
+ ]
606
+ }
607
+ ]
608
+ }