@spectrum-web-components/slider 0.11.1 → 0.12.2

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.
Files changed (15) hide show
  1. package/custom-elements.json +105 -48
  2. package/package.json +8 -8
  3. package/src/HandleController.d.ts +19 -9
  4. package/src/HandleController.js +56 -40
  5. package/src/HandleController.js.map +1 -1
  6. package/src/Slider.d.ts +4 -6
  7. package/src/Slider.js +22 -14
  8. package/src/Slider.js.map +1 -1
  9. package/src/SliderHandle.d.ts +4 -1
  10. package/src/SliderHandle.js +4 -1
  11. package/src/SliderHandle.js.map +1 -1
  12. package/src/slider.css.js +1 -1
  13. package/src/slider.css.js.map +1 -1
  14. package/stories/slider.stories.js +1 -1
  15. package/stories/slider.stories.js.map +1 -1
package/custom-elements.json CHANGED
@@ -32,12 +32,6 @@
32
32
  }
33
33
  ]
34
34
  },
35
- {
36
- "kind": "javascript-module",
37
- "path": "sync/sp-slider.ts",
38
- "declarations": [],
39
- "exports": []
40
- },
41
35
  {
42
36
  "kind": "javascript-module",
43
37
  "path": "src/HandleController.ts",
@@ -213,6 +207,11 @@
213
207
  },
214
208
  "privacy": "public"
215
209
  },
210
+ {
211
+ "kind": "field",
212
+ "name": "handleOrientation",
213
+ "privacy": "protected"
214
+ },
216
215
  {
217
216
  "kind": "method",
218
217
  "name": "hostConnected",
@@ -320,6 +319,14 @@
320
319
  }
321
320
  }
322
321
  },
322
+ {
323
+ "kind": "field",
324
+ "name": "_boundingClientRect",
325
+ "type": {
326
+ "text": "DOMRect | undefined"
327
+ },
328
+ "privacy": "private"
329
+ },
323
330
  {
324
331
  "kind": "field",
325
332
  "name": "boundingClientRect",
@@ -338,21 +345,13 @@
338
345
  }
339
346
  }
340
347
  },
341
- {
342
- "kind": "field",
343
- "name": "_boundingClientRect",
344
- "type": {
345
- "text": "DOMRect | undefined"
346
- },
347
- "privacy": "private"
348
- },
349
348
  {
350
349
  "kind": "method",
351
- "name": "beginTrackDrag",
352
- "privacy": "public",
350
+ "name": "extractDataFromEvent",
351
+ "privacy": "protected",
353
352
  "return": {
354
353
  "type": {
355
- "text": "void"
354
+ "text": "DataFromPointerEvent"
356
355
  }
357
356
  },
358
357
  "parameters": [
@@ -360,16 +359,23 @@
360
359
  "name": "event",
361
360
  "type": {
362
361
  "text": "PointerEvent"
363
- },
364
- "description": "Track click event"
362
+ }
365
363
  }
366
364
  ],
367
- "description": "Receives an event from a track click and turns it into a drag\nof the active handle"
365
+ "description": "Return the `input` and `model` associated with the event and\nwhether the `input` is a `resolvedInput` meaning it was acquired\nfrom the `model` rather than the event."
366
+ },
367
+ {
368
+ "kind": "field",
369
+ "name": "_activePointerEventData",
370
+ "type": {
371
+ "text": "DataFromPointerEvent | undefined"
372
+ },
373
+ "privacy": "private"
368
374
  },
369
375
  {
370
376
  "kind": "method",
371
377
  "name": "handlePointerdown",
372
- "privacy": "private",
378
+ "privacy": "public",
373
379
  "return": {
374
380
  "type": {
375
381
  "text": "void"
@@ -381,19 +387,13 @@
381
387
  "type": {
382
388
  "text": "PointerEvent"
383
389
  }
384
- },
385
- {
386
- "name": "model",
387
- "type": {
388
- "text": "ModelValue"
389
- }
390
390
  }
391
391
  ]
392
392
  },
393
393
  {
394
394
  "kind": "method",
395
395
  "name": "handlePointerup",
396
- "privacy": "private",
396
+ "privacy": "public",
397
397
  "return": {
398
398
  "type": {
399
399
  "text": "void"
@@ -405,19 +405,13 @@
405
405
  "type": {
406
406
  "text": "PointerEvent"
407
407
  }
408
- },
409
- {
410
- "name": "model",
411
- "type": {
412
- "text": "ModelValue"
413
- }
414
408
  }
415
409
  ]
416
410
  },
417
411
  {
418
412
  "kind": "method",
419
413
  "name": "handlePointermove",
420
- "privacy": "private",
414
+ "privacy": "public",
421
415
  "return": {
422
416
  "type": {
423
417
  "text": "void"
@@ -429,12 +423,6 @@
429
423
  "type": {
430
424
  "text": "PointerEvent"
431
425
  }
432
- },
433
- {
434
- "name": "model",
435
- "type": {
436
- "text": "ModelValue"
437
- }
438
426
  }
439
427
  ]
440
428
  },
@@ -943,8 +931,8 @@
943
931
  },
944
932
  {
945
933
  "kind": "method",
946
- "name": "handleTrackPointerdown",
947
- "privacy": "private",
934
+ "name": "handlePointerdown",
935
+ "privacy": "protected",
948
936
  "return": {
949
937
  "type": {
950
938
  "text": "void"
@@ -957,8 +945,43 @@
957
945
  "text": "PointerEvent"
958
946
  }
959
947
  }
960
- ],
961
- "description": "Move the handle under the cursor and begin start a pointer capture when the track\nis moused down"
948
+ ]
949
+ },
950
+ {
951
+ "kind": "method",
952
+ "name": "handlePointermove",
953
+ "privacy": "protected",
954
+ "return": {
955
+ "type": {
956
+ "text": "void"
957
+ }
958
+ },
959
+ "parameters": [
960
+ {
961
+ "name": "event",
962
+ "type": {
963
+ "text": "PointerEvent"
964
+ }
965
+ }
966
+ ]
967
+ },
968
+ {
969
+ "kind": "method",
970
+ "name": "handlePointerup",
971
+ "privacy": "protected",
972
+ "return": {
973
+ "type": {
974
+ "text": "void"
975
+ }
976
+ },
977
+ "parameters": [
978
+ {
979
+ "name": "event",
980
+ "type": {
981
+ "text": "PointerEvent"
982
+ }
983
+ }
984
+ ]
962
985
  },
963
986
  {
964
987
  "kind": "method",
@@ -1030,7 +1053,7 @@
1030
1053
  },
1031
1054
  {
1032
1055
  "kind": "method",
1033
- "name": "_getUpdateComplete",
1056
+ "name": "getUpdateComplete",
1034
1057
  "privacy": "protected",
1035
1058
  "return": {
1036
1059
  "type": {
@@ -1405,7 +1428,25 @@
1405
1428
  "module": "/src/SliderHandle.js"
1406
1429
  },
1407
1430
  "tagName": "sp-slider",
1408
- "customElement": true
1431
+ "customElement": true,
1432
+ "events": [
1433
+ {
1434
+ "description": "The value of the element has changed.",
1435
+ "name": "input",
1436
+ "inheritedFrom": {
1437
+ "name": "SliderHandle",
1438
+ "module": "src/SliderHandle.ts"
1439
+ }
1440
+ },
1441
+ {
1442
+ "description": "An alteration to the value of the element has been committed by the user.",
1443
+ "name": "change",
1444
+ "inheritedFrom": {
1445
+ "name": "SliderHandle",
1446
+ "module": "src/SliderHandle.ts"
1447
+ }
1448
+ }
1449
+ ]
1409
1450
  }
1410
1451
  ],
1411
1452
  "exports": [
@@ -1634,6 +1675,16 @@
1634
1675
  }
1635
1676
  }
1636
1677
  ],
1678
+ "events": [
1679
+ {
1680
+ "description": "The value of the element has changed.",
1681
+ "name": "input"
1682
+ },
1683
+ {
1684
+ "description": "An alteration to the value of the element has been committed by the user.",
1685
+ "name": "change"
1686
+ }
1687
+ ],
1637
1688
  "attributes": [
1638
1689
  {
1639
1690
  "name": "value",
@@ -1769,7 +1820,7 @@
1769
1820
  {
1770
1821
  "kind": "variable",
1771
1822
  "name": "styles",
1772
- "default": "css`\n:host{--spectrum-slider-tick-mark-width:var(\n--spectrum-slider-m-tick-mark-width,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-tick-mark-height:var(\n--spectrum-slider-m-tick-mark-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-slider-tick-mark-border-radius:var(\n--spectrum-slider-m-tick-mark-border-radius,var(--spectrum-alias-border-radius-xsmall)\n);--spectrum-slider-track-border-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-slider-track-height:var(\n--spectrum-slider-m-track-height,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-handle-width:var(\n--spectrum-slider-m-handle-width,var(--spectrum-alias-control-two-size-l)\n);--spectrum-slider-handle-height:var(\n--spectrum-slider-m-handle-height,var(--spectrum-alias-control-two-size-l)\n);--spectrum-slider-handle-gap:var(\n--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker)\n);--spectrum-slider-handle-border-size:var(\n--spectrum-slider-m-handle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-handle-border-radius:var(\n--spectrum-slider-m-handle-border-radius,var(--spectrum-global-dimension-size-100)\n);--spectrum-slider-height:var(\n--spectrum-slider-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-slider-min-width:var(\n--spectrum-slider-m-min-width,var(--spectrum-global-dimension-size-1250)\n);--spectrum-slider-animation-duration:var(\n--spectrum-slider-m-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-slider-ramp-track-color-disabled:var(\n--spectrum-slider-m-ramp-track-color-disabled,var(--spectrum-global-color-gray-300)\n);--spectrum-slider-ramp-track-height:var(\n--spectrum-slider-m-ramp-track-height,var(--spectrum-global-dimension-size-200)\n);--spectrum-slider-label-gap-y:var(--spectrum-global-dimension-size-85);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-width)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-handle-margin-top:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-width)/2);--spectrum-slider-input-top:calc(var(--spectrum-slider-handle-margin-top)/4);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-ramp-margin-top:0;--spectrum-slider-range-track-reset:0;--spectrum-slide-label-text-size:var(\n--spectrum-global-dimension-font-size-75\n);--spectrum-slide-label-text-line-height:var(\n--spectrum-global-font-line-height-small,1.3\n);--spectrum-slide-label-margin-bottom:-3px;--spectrum-slider-label-gap-x:var(\n--spectrum-alias-item-control-gap-m,var(--spectrum-global-dimension-size-125)\n)}:host{display:block;min-height:var(--spectrum-slider-height);min-width:var(--spectrum-slider-min-width);position:relative;-webkit-user-select:none;user-select:none;z-index:1}:host([dir=ltr]) #controls{margin-left:var(\n--spectrum-slider-controls-margin\n)}:host([dir=rtl]) #controls{margin-right:var(\n--spectrum-slider-controls-margin\n)}#controls{box-sizing:border-box;display:inline-block;min-height:var(--spectrum-slider-height);position:relative;vertical-align:top;width:calc(100% - var(--spectrum-slider-controls-margin)*2);z-index:auto}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{left:0}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{right:auto}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{left:auto}#fill,.track{box-sizing:border-box;height:var(\n--spectrum-slider-track-height\n);margin-top:calc(var(--spectrum-slider-track-height)/-2);pointer-events:none;position:absolute;top:calc(var(--spectrum-slider-height)/2);z-index:1}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}#fill,.track{padding-bottom:0;padding-top:0}#fill:before,.track:before{border-radius:var(--spectrum-slider-track-border-radius);content:\"\";display:block;height:100%}:host([dir=ltr]) #fill{margin-left:0}:host([dir=rtl]) #fill{margin-right:0}:host([dir=ltr]) #fill{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}:host([dir=rtl]) #fill{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}#fill{padding-bottom:0;padding-top:0}:host([dir=ltr]) .spectrum-Slider-fill--right{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}:host([dir=rtl]) .spectrum-Slider-fill--right{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}.spectrum-Slider-fill--right{padding-bottom:0;padding-top:0}:host([dir=ltr]) .track~.track{left:auto}:host([dir=rtl]) .track~.track{right:auto}:host([dir=ltr]) .track~.track{right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl]) .track~.track{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr]) .track~.track{padding-left:var(\n--spectrum-slider-track-handleoffset\n);padding-right:0}:host([dir=rtl]) .track~.track{padding-left:0;padding-right:var(\n--spectrum-slider-track-handleoffset\n)}:host([dir=ltr]) .track~.track{margin-left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl]) .track~.track{margin-right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr]) .track~.track{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) .track~.track{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}.track~.track{padding-bottom:0;padding-top:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([dir=ltr][variant=range]) .track:first-of-type{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl][variant=range]) .track:first-of-type{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=ltr][variant=range]) .track:first-of-type{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl][variant=range]) .track:first-of-type{right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr][variant=range]) .track:first-of-type{right:auto}:host([dir=rtl][variant=range]) .track:first-of-type{left:auto}:host([dir=ltr][variant=range]) .track:first-of-type{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl][variant=range]) .track:first-of-type{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([variant=range]) .track:first-of-type{padding-bottom:0;padding-top:0}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{padding-bottom:0;padding-left:var(--spectrum-slider-track-middle-handleoffset);padding-right:var(--spectrum-slider-track-middle-handleoffset);padding-top:0}:host([dir=ltr][variant=range]) .track:last-of-type{padding-left:var(\n--spectrum-slider-track-handleoffset\n);padding-right:0}:host([dir=rtl][variant=range]) .track:last-of-type{padding-left:0;padding-right:var(\n--spectrum-slider-track-handleoffset\n)}:host([dir=ltr][variant=range]) .track:last-of-type{left:auto}:host([dir=rtl][variant=range]) .track:last-of-type{right:auto}:host([dir=ltr][variant=range]) .track:last-of-type{right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl][variant=range]) .track:last-of-type{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr][variant=range]) .track:last-of-type{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl][variant=range]) .track:last-of-type{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([variant=range]) .track:last-of-type{padding-bottom:0;padding-top:0}:host([dir=ltr]) #ramp{left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #ramp{right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=ltr]) #ramp{right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #ramp{left:var(\n--spectrum-slider-track-margin-offset\n)}#ramp{height:var(--spectrum-slider-ramp-track-height);margin-top:var(\n--spectrum-slider-ramp-margin-top\n);position:absolute;top:calc(var(--spectrum-slider-ramp-track-height)/2)}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{height:100%;width:100%}:host([dir=ltr]) .handle{left:0}:host([dir=rtl]) .handle{right:0}:host([dir=ltr]) .handle{margin-left:calc(var(--spectrum-slider-handle-width)/-2);margin-right:0}:host([dir=rtl]) .handle{margin-left:0;margin-right:calc(var(--spectrum-slider-handle-width)/-2)}.handle{border-radius:var(--spectrum-slider-handle-border-radius);border-style:solid;border-width:var(--spectrum-slider-handle-border-size);box-sizing:border-box;display:inline-block;height:var(--spectrum-slider-handle-height);margin-bottom:0;margin-top:var(--spectrum-slider-handle-margin-top);outline:none;position:absolute;top:calc(var(--spectrum-slider-height)/2);transition:border-width var(--spectrum-slider-animation-duration) ease-in-out;width:var(--spectrum-slider-handle-width);z-index:2}.handle.dragging,.handle.handle-highlight,.handle:active{border-width:var(\n--spectrum-slider-handle-border-size\n)}.handle.dragging,.handle.handle-highlight,.handle.is-tophandle,.handle:active{z-index:3}.handle:before{border-radius:100%;content:\" \";display:block;height:var(--spectrum-slider-handle-height);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,width var(--spectrum-global-animation-duration-100,.13s) ease-out,height var(--spectrum-global-animation-duration-100,.13s) ease-out;width:var(--spectrum-slider-handle-width)}.handle.handle-highlight:before{height:calc(var(--spectrum-slider-handle-height) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*2);width:calc(var(--spectrum-slider-handle-width) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*2)}:host([dir=ltr]) .input{left:var(\n--spectrum-slider-input-left\n)}:host([dir=rtl]) .input{right:var(\n--spectrum-slider-input-left\n)}.input{-webkit-appearance:none;border:0;cursor:default;height:var(--spectrum-slider-handle-height);margin:0;opacity:.000001;overflow:hidden;padding:0;pointer-events:none;position:absolute;top:var(--spectrum-slider-input-top);width:var(--spectrum-slider-handle-width)}.input:focus{outline:none}#label-container{display:flex;font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height);margin-bottom:var(--spectrum-slide-label-margin-bottom);padding-top:var(\n--spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50)\n);position:relative;width:auto}:host([dir=ltr]) #label{padding-left:0}:host([dir=rtl]) #label{padding-right:0}#label{flex-grow:1}:host([dir=ltr]) #value{padding-right:0}:host([dir=rtl]) #value{padding-left:0}:host([dir=ltr]) #value{text-align:right}:host([dir=rtl]) #value{text-align:left}#value{font-feature-settings:\"tnum\";cursor:default;flex-grow:0}:host([dir=ltr]) #value{margin-left:var(\n--spectrum-slider-label-gap-x\n)}:host([dir=rtl]) #value{margin-right:var(\n--spectrum-slider-label-gap-x\n)}.ticks{display:flex;justify-content:space-between;margin:0 var(--spectrum-slider-track-margin-offset);margin-top:calc(var(--spectrum-slider-tick-mark-height) + var(--spectrum-slider-track-height)/2);z-index:0}.tick{position:relative;width:var(--spectrum-slider-tick-mark-width)}:host([dir=ltr]) .tick:after{left:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}:host([dir=rtl]) .tick:after{right:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}.tick:after{border-radius:var(--spectrum-slider-tick-mark-border-radius);content:\"\";display:block;height:var(--spectrum-slider-tick-mark-height);position:absolute;top:0;width:var(--spectrum-slider-tick-mark-width)}.tick .tickLabel{align-items:center;display:flex;font-size:var(--spectrum-slide-label-text-size);justify-content:center;line-height:var(--spectrum-slide-label-text-line-height);margin-bottom:0;margin-left:calc(var(--spectrum-slider-label-gap-x)*-1);margin-right:calc(var(--spectrum-slider-label-gap-x)*-1);margin-top:calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height))}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;margin-left:0;margin-right:0;position:absolute}:host([dir=ltr]) .tick:first-of-type{left:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=rtl]) .tick:first-of-type{right:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=ltr]) .tick:first-of-type .tickLabel{left:0}:host([dir=rtl]) .tick:first-of-type .tickLabel{right:0}:host([dir=ltr]) .tick:last-of-type{right:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=rtl]) .tick:last-of-type{left:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=ltr]) .tick:last-of-type .tickLabel{right:0}:host([dir=rtl]) .tick:last-of-type .tickLabel{left:0}:host([disabled]){cursor:default}:host([disabled]) .handle{cursor:default;pointer-events:none}.spectrum-Slider-handleContainer,.spectrum-Slider-trackContainer{margin-left:calc(var(--spectrum-slider-handle-width)/2*-1);position:absolute;top:calc(var(--spectrum-slider-track-height)/2 - 1px);width:calc(100% + var(--spectrum-slider-handle-width))}.spectrum-Slider-trackContainer{height:var(--spectrum-slider-height);overflow:hidden}:host{--spectrum-slider-m-focus-ring-size:var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-slider-m-handle-border-color-key-focus:var(\n--spectrum-global-color-gray-800\n);--spectrum-slider-m-handle-focus-ring-color-key-focus:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);--spectrum-slider-m-label-text-color:var(\n--spectrum-alias-label-text-color,var(--spectrum-global-color-gray-700)\n);--spectrum-slider-m-label-text-color-disabled:var(\n--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}.track:before{background:var(\n--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400)\n)}#label-container{color:var(\n--spectrum-slider-m-label-text-color\n)}:host([variant=filled]) .track:first-child:before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}#fill:before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}#ramp path{fill:var(\n--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400)\n)}.handle{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700)\n)}.handle:hover{border-color:var(\n--spectrum-slider-m-handle-border-color-hover,var(--spectrum-global-color-gray-800)\n)}.handle.handle-highlight{border-color:var(\n--spectrum-slider-m-handle-border-color-key-focus,var(--spectrum-global-color-gray-800)\n)}.handle.handle-highlight:before{box-shadow:0 0 0 var(\n--spectrum-slider-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(--spectrum-slider-m-handle-focus-ring-color-key-focus)}.handle.dragging,.handle:active{border-color:var(\n--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host([variant=ramp]) .handle{box-shadow:0 0 0 4px var(\n--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100)\n)}.input{background:transparent}.tick:after{background-color:var(\n--spectrum-slider-m-tick-mark-color,var(--spectrum-global-color-gray-400)\n)}.handle.dragging{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}:host([disabled]) #label-container{color:var(\n--spectrum-slider-m-label-text-color-disabled\n)}:host([disabled]) .handle{background:var(\n--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([disabled]) .track:before{background:var(\n--spectrum-slider-m-track-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled][variant=filled]) .track:first-child:before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) #fill:before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) #ramp path{fill:var(\n--spectrum-slider-ramp-track-color-disabled\n)}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host{--spectrum-slider-handle-default-background-color:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);--spectrum-slider-handle-default-border-color:var(\n--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700)\n)}sp-field-label{padding-bottom:0;padding-top:0}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:\"label .\" \"slider number\";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{--spectrum-stepper-width:var(\n--spectrum-slider-editable-number-field-width,var(--spectrum-global-dimension-size-1000)\n);grid-area:number}:host([hide-stepper]) sp-number-field{--spectrum-stepper-width:var(\n--spectrum-slider-editable-number-field-width,var(--spectrum-global-dimension-size-900)\n)}:host([editable][dir=ltr]) sp-number-field{margin-left:var(--spectrum-global-dimension-size-200)}:host([editable][dir=rtl]) sp-number-field{margin-right:var(--spectrum-global-dimension-size-200)}:host([editable]) output{opacity:0}:host([disabled]){pointer-events:none}.track{touch-action:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:before{background:var(\n--spectrum-slider-track-color,var(--spectrum-global-color-gray-300)\n)}:host([dir=rtl]) .track:before{background:var(\n--spectrum-slider-track-color-rtl,var(\n--spectrum-slider-track-color,var(--spectrum-global-color-gray-300)\n)\n)}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}.track:not(:first-of-type):not(:last-of-type){padding-left:calc(var(--spectrum-slider-handle-width)/2 + var(--spectrum-slider-track-handleoffset))!important;padding-right:calc(var(--spectrum-slider-handle-width)/2 + var(--spectrum-slider-track-handleoffset))!important}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{margin:var(--spectrum-slider-range-track-reset);margin-top:calc(var(--spectrum-slider-track-height)/-2)}:host([dir=ltr]) .track:not(:first-of-type):not(:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type):not(:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}\n`"
1823
+ "default": "css`\n:host{--spectrum-slider-tick-mark-width:var(\n--spectrum-slider-m-tick-mark-width,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-tick-mark-height:var(\n--spectrum-slider-m-tick-mark-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-slider-tick-mark-border-radius:var(\n--spectrum-slider-m-tick-mark-border-radius,var(--spectrum-alias-border-radius-xsmall)\n);--spectrum-slider-track-border-radius:var(\n--spectrum-slider-m-track-border-radius,var(--spectrum-global-dimension-static-size-10)\n);--spectrum-slider-track-height:var(\n--spectrum-slider-m-track-height,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-handle-width:var(\n--spectrum-slider-m-handle-width,var(--spectrum-alias-control-two-size-l)\n);--spectrum-slider-handle-height:var(\n--spectrum-slider-m-handle-height,var(--spectrum-alias-control-two-size-l)\n);--spectrum-slider-handle-gap:var(\n--spectrum-slider-m-handle-gap,var(--spectrum-alias-border-size-thicker)\n);--spectrum-slider-handle-border-size:var(\n--spectrum-slider-m-handle-border-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-slider-handle-border-radius:var(\n--spectrum-slider-m-handle-border-radius,var(--spectrum-global-dimension-size-100)\n);--spectrum-slider-height:var(\n--spectrum-slider-m-height,var(--spectrum-global-dimension-size-400)\n);--spectrum-slider-min-width:var(\n--spectrum-slider-m-min-width,var(--spectrum-global-dimension-size-1250)\n);--spectrum-slider-animation-duration:var(\n--spectrum-slider-m-animation-duration,var(--spectrum-global-animation-duration-100)\n);--spectrum-slider-ramp-track-color-disabled:var(\n--spectrum-slider-m-ramp-track-color-disabled,var(--spectrum-global-color-gray-300)\n);--spectrum-slider-ramp-track-height:var(\n--spectrum-slider-m-ramp-track-height,var(--spectrum-global-dimension-size-200)\n);--spectrum-slider-label-gap-y:var(--spectrum-global-dimension-size-85);--spectrum-slider-controls-margin:calc(var(--spectrum-slider-handle-width)/2);--spectrum-slider-track-margin-offset:calc(var(--spectrum-slider-controls-margin)*-1);--spectrum-slider-handle-margin-top:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-handle-margin-left:calc(var(--spectrum-slider-handle-width)/-2);--spectrum-slider-track-handleoffset:var(--spectrum-slider-handle-gap);--spectrum-slider-track-middle-handleoffset:calc(var(--spectrum-slider-handle-gap) + var(--spectrum-slider-handle-width)/2);--spectrum-slider-input-top:calc(var(--spectrum-slider-handle-margin-top)/4);--spectrum-slider-input-left:calc(var(--spectrum-slider-handle-margin-left)/4);--spectrum-slider-ramp-margin-top:0;--spectrum-slider-range-track-reset:0;--spectrum-slide-label-text-size:var(\n--spectrum-global-dimension-font-size-75\n);--spectrum-slide-label-text-line-height:var(\n--spectrum-global-font-line-height-small,1.3\n);--spectrum-slide-label-margin-bottom:-3px;--spectrum-slider-label-gap-x:var(\n--spectrum-alias-item-control-gap-m,var(--spectrum-global-dimension-size-125)\n)}:host{display:block;min-height:var(--spectrum-slider-height);min-width:var(--spectrum-slider-min-width);position:relative;-webkit-user-select:none;user-select:none;z-index:1}:host([dir=ltr]) #controls{margin-left:var(\n--spectrum-slider-controls-margin\n)}:host([dir=rtl]) #controls{margin-right:var(\n--spectrum-slider-controls-margin\n)}#controls{box-sizing:border-box;display:inline-block;min-height:var(--spectrum-slider-height);position:relative;vertical-align:top;width:calc(100% - var(--spectrum-slider-controls-margin)*2);z-index:auto}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{left:0}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{right:auto}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{left:auto}#fill,.track{box-sizing:border-box;height:var(\n--spectrum-slider-track-height\n);margin-top:calc(var(--spectrum-slider-track-height)/-2);pointer-events:none;position:absolute;top:calc(var(--spectrum-slider-height)/2);z-index:1}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=ltr]) #fill,:host([dir=ltr]) .track{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #fill,:host([dir=rtl]) .track{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}#fill,.track{padding-bottom:0;padding-top:0}#fill:before,.track:before{border-radius:var(--spectrum-slider-track-border-radius);content:\"\";display:block;height:100%}:host([dir=ltr]) #fill{margin-left:0}:host([dir=rtl]) #fill{margin-right:0}:host([dir=ltr]) #fill{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}:host([dir=rtl]) #fill{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}#fill{padding-bottom:0;padding-top:0}:host([dir=ltr]) .spectrum-Slider-fill--right{padding-left:0;padding-right:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset))}:host([dir=rtl]) .spectrum-Slider-fill--right{padding-left:calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));padding-right:0}.spectrum-Slider-fill--right{padding-bottom:0;padding-top:0}:host([dir=ltr]) .track~.track{left:auto}:host([dir=rtl]) .track~.track{right:auto}:host([dir=ltr]) .track~.track{right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl]) .track~.track{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr]) .track~.track{padding-left:var(\n--spectrum-slider-track-handleoffset\n);padding-right:0}:host([dir=rtl]) .track~.track{padding-left:0;padding-right:var(\n--spectrum-slider-track-handleoffset\n)}:host([dir=ltr]) .track~.track{margin-left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl]) .track~.track{margin-right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr]) .track~.track{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) .track~.track{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}.track~.track{padding-bottom:0;padding-top:0}:host([variant=range]) #value{-webkit-user-select:text;user-select:text}:host([dir=ltr][variant=range]) .track:first-of-type{padding-left:0;padding-right:var(--spectrum-slider-track-handleoffset)}:host([dir=rtl][variant=range]) .track:first-of-type{padding-left:var(--spectrum-slider-track-handleoffset);padding-right:0}:host([dir=ltr][variant=range]) .track:first-of-type{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl][variant=range]) .track:first-of-type{right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr][variant=range]) .track:first-of-type{right:auto}:host([dir=rtl][variant=range]) .track:first-of-type{left:auto}:host([dir=ltr][variant=range]) .track:first-of-type{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl][variant=range]) .track:first-of-type{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([variant=range]) .track:first-of-type{padding-bottom:0;padding-top:0}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=ltr] .track,:host([dir=ltr][variant=range]) [dir=rtl] .track{right:auto}:host([dir=ltr][variant=range]) [dir=rtl] .track,:host([dir=rtl][variant=range]) [dir=rtl] .track{left:auto}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{padding-bottom:0;padding-left:var(--spectrum-slider-track-middle-handleoffset);padding-right:var(--spectrum-slider-track-middle-handleoffset);padding-top:0}:host([dir=ltr][variant=range]) .track:last-of-type{padding-left:var(\n--spectrum-slider-track-handleoffset\n);padding-right:0}:host([dir=rtl][variant=range]) .track:last-of-type{padding-left:0;padding-right:var(\n--spectrum-slider-track-handleoffset\n)}:host([dir=ltr][variant=range]) .track:last-of-type{left:auto}:host([dir=rtl][variant=range]) .track:last-of-type{right:auto}:host([dir=ltr][variant=range]) .track:last-of-type{right:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=rtl][variant=range]) .track:last-of-type{left:var(\n--spectrum-slider-range-track-reset\n)}:host([dir=ltr][variant=range]) .track:last-of-type{margin-right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl][variant=range]) .track:last-of-type{margin-left:var(\n--spectrum-slider-track-margin-offset\n)}:host([variant=range]) .track:last-of-type{padding-bottom:0;padding-top:0}:host([dir=ltr]) #ramp{left:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #ramp{right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=ltr]) #ramp{right:var(\n--spectrum-slider-track-margin-offset\n)}:host([dir=rtl]) #ramp{left:var(\n--spectrum-slider-track-margin-offset\n)}#ramp{height:var(--spectrum-slider-ramp-track-height);margin-top:var(\n--spectrum-slider-ramp-margin-top\n);position:absolute;top:calc(var(--spectrum-slider-ramp-track-height)/2)}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{height:100%;width:100%}:host([dir=ltr]) .handle{left:0}:host([dir=rtl]) .handle{right:0}:host([dir=ltr]) .handle{margin-left:calc(var(--spectrum-slider-handle-width)/-2);margin-right:0}:host([dir=rtl]) .handle{margin-left:0;margin-right:calc(var(--spectrum-slider-handle-width)/-2)}.handle{border-radius:var(--spectrum-slider-handle-border-radius);border-style:solid;border-width:var(--spectrum-slider-handle-border-size);box-sizing:border-box;display:inline-block;height:var(--spectrum-slider-handle-height);margin-bottom:0;margin-top:var(--spectrum-slider-handle-margin-top);outline:none;position:absolute;top:calc(var(--spectrum-slider-height)/2);transition:border-width var(--spectrum-slider-animation-duration) ease-in-out;width:var(--spectrum-slider-handle-width);z-index:2}.handle.dragging,.handle.handle-highlight,.handle:active{border-width:var(\n--spectrum-slider-handle-border-size\n)}.handle.dragging,.handle.handle-highlight,.handle.is-tophandle,.handle:active{z-index:3}.handle:before{border-radius:100%;content:\" \";display:block;height:var(--spectrum-slider-handle-height);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-out,width var(--spectrum-global-animation-duration-100,.13s) ease-out,height var(--spectrum-global-animation-duration-100,.13s) ease-out;width:var(--spectrum-slider-handle-width)}.handle.handle-highlight:before{height:calc(var(--spectrum-slider-handle-height) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*2);width:calc(var(--spectrum-slider-handle-width) + var(\n--spectrum-alias-focus-ring-gap,\nvar(--spectrum-global-dimension-static-size-25)\n)*2)}:host([dir=ltr]) .input{left:var(\n--spectrum-slider-input-left\n)}:host([dir=rtl]) .input{right:var(\n--spectrum-slider-input-left\n)}.input{-webkit-appearance:none;border:0;cursor:default;height:var(--spectrum-slider-handle-height);margin:0;opacity:.000001;overflow:hidden;padding:0;pointer-events:none;position:absolute;top:var(--spectrum-slider-input-top);width:var(--spectrum-slider-handle-width)}.input:focus{outline:none}#label-container{display:flex;font-size:var(--spectrum-slide-label-text-size);line-height:var(--spectrum-slide-label-text-line-height);margin-bottom:var(--spectrum-slide-label-margin-bottom);padding-top:var(\n--spectrum-fieldlabel-m-padding-top,var(--spectrum-global-dimension-size-50)\n);position:relative;width:auto}:host([dir=ltr]) #label{padding-left:0}:host([dir=rtl]) #label{padding-right:0}#label{flex-grow:1}:host([dir=ltr]) #value{padding-right:0}:host([dir=rtl]) #value{padding-left:0}:host([dir=ltr]) #value{text-align:right}:host([dir=rtl]) #value{text-align:left}#value{font-feature-settings:\"tnum\";cursor:default;flex-grow:0}:host([dir=ltr]) #value{margin-left:var(\n--spectrum-slider-label-gap-x\n)}:host([dir=rtl]) #value{margin-right:var(\n--spectrum-slider-label-gap-x\n)}.ticks{display:flex;justify-content:space-between;margin:0 var(--spectrum-slider-track-margin-offset);margin-top:calc(var(--spectrum-slider-tick-mark-height) + var(--spectrum-slider-track-height)/2);z-index:0}.tick{position:relative;width:var(--spectrum-slider-tick-mark-width)}:host([dir=ltr]) .tick:after{left:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}:host([dir=rtl]) .tick:after{right:calc(50% - var(--spectrum-slider-tick-mark-width)/2)}.tick:after{border-radius:var(--spectrum-slider-tick-mark-border-radius);content:\"\";display:block;height:var(--spectrum-slider-tick-mark-height);position:absolute;top:0;width:var(--spectrum-slider-tick-mark-width)}.tick .tickLabel{align-items:center;display:flex;font-size:var(--spectrum-slide-label-text-size);justify-content:center;line-height:var(--spectrum-slide-label-text-line-height);margin-bottom:0;margin-left:calc(var(--spectrum-slider-label-gap-x)*-1);margin-right:calc(var(--spectrum-slider-label-gap-x)*-1);margin-top:calc(var(--spectrum-slider-label-gap-y) + var(--spectrum-slider-tick-mark-height))}.tick:first-of-type .tickLabel,.tick:last-of-type .tickLabel{display:block;margin-left:0;margin-right:0;position:absolute}:host([dir=ltr]) .tick:first-of-type{left:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=rtl]) .tick:first-of-type{right:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=ltr]) .tick:first-of-type .tickLabel{left:0}:host([dir=rtl]) .tick:first-of-type .tickLabel{right:0}:host([dir=ltr]) .tick:last-of-type{right:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=rtl]) .tick:last-of-type{left:calc(var(--spectrum-slider-tick-mark-width)/-2)}:host([dir=ltr]) .tick:last-of-type .tickLabel{right:0}:host([dir=rtl]) .tick:last-of-type .tickLabel{left:0}:host([disabled]){cursor:default}:host([disabled]) .handle{cursor:default;pointer-events:none}.spectrum-Slider-handleContainer,.spectrum-Slider-trackContainer{margin-left:calc(var(--spectrum-slider-handle-width)/2*-1);position:absolute;top:calc(var(--spectrum-slider-track-height)/2 - 1px);width:calc(100% + var(--spectrum-slider-handle-width))}.spectrum-Slider-trackContainer{height:var(--spectrum-slider-height);overflow:hidden}:host{--spectrum-slider-m-focus-ring-size:var(\n--spectrum-alias-focus-ring-size,var(--spectrum-global-dimension-static-size-25)\n);--spectrum-slider-m-handle-border-color-key-focus:var(\n--spectrum-global-color-gray-800\n);--spectrum-slider-m-handle-focus-ring-color-key-focus:var(\n--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400)\n);--spectrum-slider-m-label-text-color:var(\n--spectrum-alias-label-text-color,var(--spectrum-global-color-gray-700)\n);--spectrum-slider-m-label-text-color-disabled:var(\n--spectrum-alias-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}.track:before{background:var(\n--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400)\n)}#label-container{color:var(\n--spectrum-slider-m-label-text-color\n)}:host([variant=filled]) .track:first-child:before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}#fill:before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}#ramp path{fill:var(\n--spectrum-slider-m-track-color,var(--spectrum-global-color-gray-400)\n)}.handle{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700)\n)}.handle:hover{border-color:var(\n--spectrum-slider-m-handle-border-color-hover,var(--spectrum-global-color-gray-800)\n)}.handle.handle-highlight{border-color:var(\n--spectrum-slider-m-handle-border-color-key-focus,var(--spectrum-global-color-gray-800)\n)}.handle.handle-highlight:before{box-shadow:0 0 0 var(\n--spectrum-slider-m-focus-ring-size,var(--spectrum-alias-focus-ring-size)\n) var(--spectrum-slider-m-handle-focus-ring-color-key-focus)}.handle.dragging,.handle:active{border-color:var(\n--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host([variant=ramp]) .handle{box-shadow:0 0 0 4px var(\n--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100)\n)}.input{background:transparent}.tick:after{background-color:var(\n--spectrum-slider-m-tick-mark-color,var(--spectrum-global-color-gray-400)\n)}.handle.dragging{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-down,var(--spectrum-global-color-gray-800)\n)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--spectrum-slider-m-track-fill-color,var(--spectrum-global-color-gray-700)\n)}:host([disabled]) #label-container{color:var(\n--spectrum-slider-m-label-text-color-disabled\n)}:host([disabled]) .handle{background:var(\n--spectrum-alias-background-color-default,var(--spectrum-global-color-gray-100)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);border-color:var(\n--spectrum-slider-m-handle-border-color-disabled,var(--spectrum-global-color-gray-400)\n)}:host([disabled]) .track:before{background:var(\n--spectrum-slider-m-track-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled][variant=filled]) .track:first-child:before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) #fill:before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host([disabled]) #ramp path{fill:var(\n--spectrum-slider-ramp-track-color-disabled\n)}:host([disabled][variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var(\n--spectrum-slider-m-track-fill-color-disabled,var(--spectrum-global-color-gray-300)\n)}:host{--spectrum-slider-handle-default-background-color:var(\n--spectrum-slider-m-handle-background-color,var(--spectrum-alias-background-color-transparent)\n);--spectrum-slider-handle-default-border-color:var(\n--spectrum-slider-m-handle-border-color,var(--spectrum-global-color-gray-700)\n)}sp-field-label{padding-bottom:0;padding-top:0}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:\"label .\" \"slider number\";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{--spectrum-stepper-width:var(\n--spectrum-slider-editable-number-field-width,var(--spectrum-global-dimension-size-1000)\n);grid-area:number}:host([hide-stepper]) sp-number-field{--spectrum-stepper-width:var(\n--spectrum-slider-editable-number-field-width,var(--spectrum-global-dimension-size-900)\n)}:host([editable][dir=ltr]) sp-number-field{margin-left:var(--spectrum-global-dimension-size-200)}:host([editable][dir=rtl]) sp-number-field{margin-right:var(--spectrum-global-dimension-size-200)}:host([editable]) output{opacity:0}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:none;-webkit-user-select:none;user-select:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:before{background:var(\n--spectrum-slider-track-color,var(--spectrum-global-color-gray-300)\n)}:host([dir=rtl]) .track:before{background:var(\n--spectrum-slider-track-color-rtl,var(\n--spectrum-slider-track-color,var(--spectrum-global-color-gray-300)\n)\n)}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}.track:not(:first-of-type):not(:last-of-type){padding-left:calc(var(--spectrum-slider-handle-width)/2 + var(--spectrum-slider-track-handleoffset))!important;padding-right:calc(var(--spectrum-slider-handle-width)/2 + var(--spectrum-slider-track-handleoffset))!important}:host([dir=ltr][variant=range]) .track,:host([dir=rtl][variant=range]) .track{margin:var(--spectrum-slider-range-track-reset);margin-top:calc(var(--spectrum-slider-track-height)/-2)}:host([dir=ltr]) .track:not(:first-of-type):not(:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type):not(:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}\n`"
1773
1824
  }
1774
1825
  ],
1775
1826
  "exports": [
@@ -1803,6 +1854,12 @@
1803
1854
  }
1804
1855
  }
1805
1856
  ]
1857
+ },
1858
+ {
1859
+ "kind": "javascript-module",
1860
+ "path": "sync/sp-slider.ts",
1861
+ "declarations": [],
1862
+ "exports": []
1806
1863
  }
1807
1864
  ]
1808
1865
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/slider",
3
- "version": "0.11.1",
3
+ "version": "0.12.2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -49,15 +49,15 @@
49
49
  ],
50
50
  "dependencies": {
51
51
  "@internationalized/number": "^3.0.0",
52
- "@spectrum-web-components/base": "^0.4.6",
53
- "@spectrum-web-components/field-label": "^0.6.1",
54
- "@spectrum-web-components/number-field": "^0.2.1",
55
- "@spectrum-web-components/shared": "^0.12.11",
56
- "@spectrum-web-components/theme": "^0.8.16",
52
+ "@spectrum-web-components/base": "^0.5.1",
53
+ "@spectrum-web-components/field-label": "^0.7.2",
54
+ "@spectrum-web-components/number-field": "^0.3.2",
55
+ "@spectrum-web-components/shared": "^0.13.2",
56
+ "@spectrum-web-components/theme": "^0.9.2",
57
57
  "tslib": "^2.0.0"
58
58
  },
59
59
  "devDependencies": {
60
- "@spectrum-css/slider": "^3.0.4"
60
+ "@spectrum-css/slider": "^3.0.9"
61
61
  },
62
62
  "types": "./src/index.d.ts",
63
63
  "customElements": "custom-elements.json",
@@ -65,5 +65,5 @@
65
65
  "./sp-*.js",
66
66
  "./sync/sp-*.js"
67
67
  ],
68
- "gitHead": "9c7ac25264762a9b7bad2ef3f111d5eb613f9d05"
68
+ "gitHead": "5ad16bd185710525afa48bd76099cb0ebde4c4cb"
69
69
  }
package/src/HandleController.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { TemplateResult } from '@spectrum-web-components/base';
2
2
  import { Slider } from './Slider.js';
3
- import { SliderHandle, SliderNormalization, Controller } from './SliderHandle.js';
3
+ import { Controller, SliderHandle, SliderNormalization } from './SliderHandle.js';
4
4
  interface RangeAndClamp {
5
5
  range: {
6
6
  min: number;
@@ -21,6 +21,14 @@ interface ModelValue extends RangeAndClamp {
21
21
  normalization: SliderNormalization;
22
22
  handle: SliderHandle;
23
23
  }
24
+ interface InputWithModel extends HTMLInputElement {
25
+ model: ModelValue;
26
+ }
27
+ interface DataFromPointerEvent {
28
+ resolvedInput: boolean;
29
+ input: InputWithModel;
30
+ model?: ModelValue;
31
+ }
24
32
  export interface HandleValueDictionary {
25
33
  [key: string]: number;
26
34
  }
@@ -49,6 +57,7 @@ export declare class HandleController implements Controller {
49
57
  formattedValueForHandle(model: ModelValue): string;
50
58
  get formattedValues(): Map<string, string>;
51
59
  get focusElement(): HTMLElement;
60
+ protected handleOrientation: () => void;
52
61
  hostConnected(): void;
53
62
  hostDisconnected(): void;
54
63
  hostUpdate(): void;
@@ -59,18 +68,19 @@ export declare class HandleController implements Controller {
59
68
  private getActiveHandleElements;
60
69
  private getHandleElements;
61
70
  private clearHandleComponentCache;
71
+ private _boundingClientRect?;
62
72
  private get boundingClientRect();
63
73
  private updateBoundingRect;
64
- private _boundingClientRect?;
65
74
  /**
66
- * Receives an event from a track click and turns it into a drag
67
- * of the active handle
68
- * @param event Track click event
75
+ * Return the `input` and `model` associated with the event and
76
+ * whether the `input` is a `resolvedInput` meaning it was acquired
77
+ * from the `model` rather than the event.
69
78
  */
70
- beginTrackDrag(event: PointerEvent): void;
71
- private handlePointerdown;
72
- private handlePointerup;
73
- private handlePointermove;
79
+ protected extractDataFromEvent(event: PointerEvent): DataFromPointerEvent;
80
+ private _activePointerEventData;
81
+ handlePointerdown(event: PointerEvent): void;
82
+ handlePointerup(event: PointerEvent): void;
83
+ handlePointermove(event: PointerEvent): void;
74
84
  /**
75
85
  * Keep the slider value property in sync with the input element's value
76
86
  */
package/src/HandleController.js CHANGED
@@ -9,13 +9,16 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
9
9
  OF ANY KIND, either express or implied. See the License for the specific language
10
10
  governing permissions and limitations under the License.
11
11
  */
12
- import { html, ifDefined, classMap, styleMap, } from '@spectrum-web-components/base';
13
- import { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js';
12
+ import { html } from '@spectrum-web-components/base';
13
+ import { classMap, ifDefined, styleMap, } from '@spectrum-web-components/base/src/directives.js';
14
14
  export class HandleController {
15
15
  constructor(host) {
16
16
  this.handles = new Map();
17
17
  this.model = [];
18
18
  this.handleOrder = [];
19
+ this.handleOrientation = () => {
20
+ this.updateBoundingRect();
21
+ };
19
22
  this.extractModelFromLightDom = () => {
20
23
  let handles = [
21
24
  ...this.host.querySelectorAll('[slot="handle"]'),
@@ -151,9 +154,21 @@ export class HandleController {
151
154
  }
152
155
  this.observer.observe(this.host, { subtree: true, childList: true });
153
156
  this.extractModelFromLightDom();
157
+ if ('orientation' in screen) {
158
+ screen.orientation.addEventListener('change', this.handleOrientation);
159
+ }
160
+ else {
161
+ window.addEventListener('orientationchange', this.handleOrientation);
162
+ }
154
163
  }
155
164
  hostDisconnected() {
156
165
  this.observer.disconnect();
166
+ if ('orientation' in screen) {
167
+ screen.orientation.removeEventListener('change', this.handleOrientation);
168
+ }
169
+ else {
170
+ window.removeEventListener('orientationchange', this.handleOrientation);
171
+ }
157
172
  }
158
173
  hostUpdate() {
159
174
  this.updateModel();
@@ -208,59 +223,70 @@ export class HandleController {
208
223
  delete this._boundingClientRect;
209
224
  }
210
225
  /**
211
- * Receives an event from a track click and turns it into a drag
212
- * of the active handle
213
- * @param event Track click event
226
+ * Return the `input` and `model` associated with the event and
227
+ * whether the `input` is a `resolvedInput` meaning it was acquired
228
+ * from the `model` rather than the event.
214
229
  */
215
- beginTrackDrag(event) {
216
- const { handle } = this.getActiveHandleElements();
217
- const model = this.model.find((item) => item.name === this.activeHandle);
218
- /* c8 ignore next */
219
- if (!model)
220
- return;
221
- event.stopPropagation();
222
- event.preventDefault();
223
- const applyDefault = handle.dispatchEvent(new PointerEvent('pointerdown', event));
224
- if (applyDefault) {
225
- const model = this.model.find((model) => model.name === this.activeHandle);
226
- if (model) {
227
- this.handlePointermove(event, model);
230
+ extractDataFromEvent(event) {
231
+ if (!this._activePointerEventData) {
232
+ let input = event.target.querySelector(':scope > .input');
233
+ const resolvedInput = !input;
234
+ const model = input
235
+ ? input.model
236
+ : this.model.find((item) => item.name === this.activeHandle);
237
+ if (!input && !!model) {
238
+ input = model.handle.focusElement;
228
239
  }
240
+ this._activePointerEventData = {
241
+ input,
242
+ model,
243
+ resolvedInput,
244
+ };
229
245
  }
246
+ return this._activePointerEventData;
230
247
  }
231
- handlePointerdown(event, model) {
232
- const handle = event.target;
233
- if (this.host.disabled || event.button !== 0) {
248
+ handlePointerdown(event) {
249
+ const { resolvedInput, model } = this.extractDataFromEvent(event);
250
+ if (!model || this.host.disabled || event.button !== 0) {
234
251
  event.preventDefault();
235
252
  return;
236
253
  }
254
+ this.host.track.setPointerCapture(event.pointerId);
237
255
  this.updateBoundingRect();
238
256
  this.host.labelEl.click();
239
257
  this.draggingHandle = model.handle;
240
258
  model.handle.dragging = true;
241
259
  this.activateHandle(model.name);
242
- handle.setPointerCapture(event.pointerId);
243
- this.host.requestUpdate();
260
+ if (resolvedInput) {
261
+ // When the input is resolved forward the pointer event to
262
+ // `handlePointermove` in order to update the value/UI becuase
263
+ // the pointer event was on the track not a handle
264
+ this.handlePointermove(event);
265
+ }
266
+ this.requestUpdate();
244
267
  }
245
- handlePointerup(event, model) {
246
- // Retain focus on input element after mouse up to enable keyboard interactions
247
- const handle = event.target;
248
- const input = handle.querySelector('input');
268
+ handlePointerup(event) {
269
+ const { input, model } = this.extractDataFromEvent(event);
270
+ delete this._activePointerEventData;
271
+ if (!model)
272
+ return;
249
273
  this.host.labelEl.click();
250
274
  model.handle.highlight = false;
251
275
  delete this.draggingHandle;
252
276
  model.handle.dragging = false;
253
277
  this.requestUpdate();
254
- handle.releasePointerCapture(event.pointerId);
278
+ this.host.track.releasePointerCapture(event.pointerId);
255
279
  this.dispatchChangeEvent(input, model.handle);
256
280
  }
257
- handlePointermove(event, model) {
281
+ handlePointermove(event) {
282
+ const { input, model } = this.extractDataFromEvent(event);
283
+ if (!model)
284
+ return;
258
285
  /* c8 ignore next 3 */
259
286
  if (!this.draggingHandle) {
260
287
  return;
261
288
  }
262
289
  event.stopPropagation();
263
- const { input } = this.getHandleElements(model.handle);
264
290
  input.value = this.calculateHandlePosition(event, model).toString();
265
291
  model.handle.value = parseFloat(input.value);
266
292
  this.requestUpdate();
@@ -308,16 +334,6 @@ export class HandleController {
308
334
  class=${classMap(classes)}
309
335
  name=${model.name}
310
336
  style=${styleMap(style)}
311
- @manage=${streamingListener({
312
- type: 'pointerdown',
313
- fn: (event) => this.handlePointerdown(event, model),
314
- }, {
315
- type: 'pointermove',
316
- fn: (event) => this.handlePointermove(event, model),
317
- }, {
318
- type: ['pointerup', 'pointercancel'],
319
- fn: (event) => this.handlePointerup(event, model),
320
- })}
321
337
  role="presentation"
322
338
  >
323
339
  <input