@esri/calcite-components 1.0.0-beta.71 → 1.0.0-beta.72

package/dist/collection/components/calcite-shell-panel/calcite-shell-panel.css

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -123,7 +127,7 @@
   pointer-events: auto;
   top: 0;
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   width: 0.125rem;

package/dist/collection/components/calcite-shell-panel/calcite-shell-panel.js

@@ -4,7 +4,7 @@
  */
 import { Component, Element, Event, Prop, Watch, h, State, forceUpdate } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
-import { getSlotted, getElementStyleDir } from "../../utils/dom";
+import { getSlotted, getElementDir } from "../../utils/dom";
 import { clamp } from "../../utils/math";
 /**
  * @slot - A slot for adding content to the shell panel.
@@ -69,7 +69,7 @@ export class CalciteShellPanel {
       if (MOVEMENT_KEYS.indexOf(key) > -1) {
         event.preventDefault();
       }
-      const dir = getElementStyleDir(el);
+      const dir = getElementDir(el);
       const directionKeys = ["ArrowLeft", "ArrowRight"];
       const directionFactor = dir === "rtl" && directionKeys.includes(key) ? -1 : 1;
       const increaseKeys = key === "ArrowUp" ||
@@ -109,7 +109,7 @@ export class CalciteShellPanel {
       event.preventDefault();
       const { el, initialContentWidth, position, initialClientX } = this;
       const offset = event.clientX - initialClientX;
-      const dir = getElementStyleDir(el);
+      const dir = getElementDir(el);
       const adjustmentDirection = dir === "rtl" ? -1 : 1;
       const adjustedOffset = position === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset;
       const width = initialContentWidth + adjustedOffset;

package/dist/collection/components/calcite-slider/calcite-slider.css

@@ -49,7 +49,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -86,6 +90,46 @@
   display: none;
 }
 
+.scale--s {
+  --calcite-slider-handle-size: 10px;
+  --calcite-slider-handle-extension-height: 6.5px;
+  --calcite-slider-container-font-size: var(--calcite-font-size--3);
+}
+
+.scale--s .handle__label,
+.scale--s .tick__label {
+  line-height: .75rem;
+}
+
+.scale--m {
+  --calcite-slider-handle-size: 14px;
+  --calcite-slider-handle-extension-height: 8px;
+  --calcite-slider-container-font-size: var(--calcite-font-size--2);
+}
+
+.scale--m .handle__label,
+.scale--m .tick__label {
+  line-height: 1rem;
+}
+
+.scale--l {
+  --calcite-slider-handle-size: 16px;
+  --calcite-slider-handle-extension-height: 10.5px;
+  --calcite-slider-container-font-size: var(--calcite-font-size--1);
+}
+
+.scale--l .handle__label,
+.scale--l .tick__label {
+  line-height: 1rem;
+}
+
+.handle__label,
+.tick__label {
+  font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-ui-text-2);
+  font-size: var(--calcite-slider-container-font-size);
+}
+
 :host {
   display: block;
 }
@@ -93,8 +137,11 @@
 .container {
   display: block;
   position: relative;
-  padding: 7px 0;
-  margin: 7px 0.5rem;
+  padding: calc(var(--calcite-slider-handle-size) * 0.5);
+  margin: calc(var(--calcite-slider-handle-size) * 0.5) 0;
+  --calcite-slider-full-handle-height: calc(
+    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)
+  );
 }
 
 :host([disabled]) {
@@ -107,34 +154,29 @@
   background-color: var(--calcite-ui-text-3);
 }
 
-:host([disabled]) .graph .graph-path--highlight {
-  fill: var(--calcite-ui-text-3);
+.scale--s .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -6px;
 }
 
-/*
- * Ensure we have enough space on variants
- * with text elements to prevent overlap
- */
-
-:host([label-handles]) .container,
-:host([precise]:not([precise=false])) .container {
-  margin-top: 21px;
+.scale--m .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -8px;
 }
 
-:host([label-ticks]),
-:host([precise]:not([precise=false])) .container--range {
-  margin-bottom: 21px;
+.scale--l .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -9px;
 }
 
-:host([precise]:not([precise=false])[label-handles]) .container {
-  margin-top: 35px;
+:host([precise]:not([has-histogram])) .container .thumb--value {
+  --calcite-slider-thumb-y-offset: calc(var(--calcite-slider-full-handle-height) * -1);
 }
 
-:host([precise]:not([precise=false])[label-handles]) .container--range {
-  margin-bottom: 35px;
+.thumb-container {
+  max-width: 100%;
+  position: relative;
 }
 
 .thumb {
+  --calcite-slider-thumb-x-offset: calc(var(--calcite-slider-handle-size) * 0.5);
   position: absolute;
   border-style: none;
   background-color: transparent;
@@ -147,16 +189,7 @@
   flex-direction: column;
   align-items: center;
   font-family: inherit;
-  z-index: 2;
-  transform: translate(7px, -8px);
-}
-
-.thumb .handle__label {
-  font-size: var(--calcite-font-size--2);
-  font-weight: 500;
-  line-height: 1;
-  color: var(--calcite-ui-text-2);
-  margin-bottom: 5px;
+  transform: translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset));
 }
 
 .thumb .handle__label.static, .thumb .handle__label.transformed {
@@ -176,18 +209,18 @@
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
-  height: 14px;
-  width: 14px;
   box-sizing: border-box;
-  border-radius: 100%;
+  border-radius: 9999px;
   background-color: var(--calcite-ui-foreground-1);
+  height: var(--calcite-slider-handle-size);
+  width: var(--calcite-slider-handle-size);
   box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;
-  transition: border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
+  transition: border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease;
 }
 
 .thumb .handle-extension {
-  width: 2px;
-  height: 7px;
+  width: 0.125rem;
+  height: var(--calcite-slider-handle-extension-height);
   background-color: var(--calcite-ui-text-3);
 }
 
@@ -202,112 +235,56 @@
 .thumb:focus .handle {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
-  outline-offset: 2px;
 }
 
 .thumb:focus .handle-extension {
   background-color: var(--calcite-ui-brand);
 }
 
-.thumb--minValue {
-  transform: translate(-7px, -8px);
-}
-
-/* uncomment for helpful debugging UI */
-
-:host([label-handles]) .thumb {
-  transform: translate(50%, -25px);
-}
-
-:host([label-handles]) .thumb--minValue {
-  transform: translate(-50%, -25px);
-}
-
-:host([has-histogram][label-handles]) .thumb {
-  transform: translate(50%, -8px);
-}
-
-:host([has-histogram][label-handles]) .thumb .handle__label {
-  margin-bottom: unset;
-  margin-top: 5px;
-}
-
-:host([has-histogram][label-handles]) .thumb--minValue {
-  transform: translate(-50%, -8px);
-}
-
-:host([precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -21px);
-}
-
-:host([precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-7px, -2px);
+.thumb.thumb--minValue {
+  transform: translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset));
 }
 
-:host([precise]:not([precise=false])) .thumb--minValue .handle__label {
-  margin-bottom: unset;
-  margin-top: 5px;
+.thumb.thumb--precise {
+  --calcite-slider-thumb-y-offset: -2px;
 }
 
-:host([has-histogram][precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -2px);
-}
-
-:host([has-histogram][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -2px);
-}
-
-:host([ticks][precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -20px);
-}
-
-:host([ticks][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-7px, -3px);
-}
-
-:host([has-histogram][ticks][precise]:not([precise=false])) .thumb {
-  transform: translate(7px, -3px);
-}
-
-:host([has-histogram][ticks][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -3px);
-}
-
-:host([label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -38px);
+:host([label-handles]) .thumb {
+  --calcite-slider-thumb-x-offset: 50%;
 }
 
-:host([label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -2px);
+:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -23px;
 }
 
-:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -2px);
+:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -30px;
 }
 
-:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -2px);
+:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise) {
+  --calcite-slider-thumb-y-offset: -32px;
 }
 
-:host([ticks][label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -37px);
+:host([has-histogram][label-handles]) .handle__label,
+:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label {
+  margin-top: 0.5em;
 }
 
-:host([ticks][label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -3px);
+:host(:not([has-histogram]):not([precise])) .handle__label,
+:host([label-handles]:not([has-histogram])) .thumb--value .handle__label {
+  margin-bottom: 0.5em;
 }
 
-:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb {
-  transform: translate(50%, -3px);
+:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value {
+  --calcite-slider-thumb-y-offset: -33px;
 }
 
-:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb--minValue {
-  transform: translate(-50%, -3px);
+:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value {
+  --calcite-slider-thumb-y-offset: -44px;
 }
 
-.thumb:focus,
-.thumb--active {
-  z-index: 3;
+:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value {
+  --calcite-slider-thumb-y-offset: -49px;
 }
 
 .thumb:focus .handle,
@@ -323,18 +300,17 @@
 }
 
 .track {
-  height: 2px;
+  height: 0.125rem;
   border-radius: 0;
-  z-index: 1;
-  background-color: var(--calcite-ui-border-2);
-  transition: all 250ms ease-in;
   position: relative;
+  background-color: var(--calcite-ui-border-2);
+  transition: all var(--calcite-internal-animation-timing-medium) ease-in;
 }
 
 .track__range {
   position: absolute;
   top: 0;
-  height: 2px;
+  height: 0.125rem;
   background-color: var(--calcite-ui-brand);
 }
 
@@ -343,23 +319,24 @@
 }
 
 .container--range .track__range:after {
-  content: "";
   position: absolute;
-  top: -5px;
   width: 100%;
-  height: 14px;
+  content: "";
+  top: calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);
+  height: calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height));
 }
 
 .tick {
   position: absolute;
+  width: 0.125rem;
+  height: 0.25rem;
+  border-width: 1px;
+  border-style: solid;
+  background-color: var(--calcite-ui-border-input);
+  border-color: var(--calcite-ui-foreground-1);
   top: -2px;
-  width: 2px;
-  height: 4px;
-  left: var(--calcite-ui-border-1-offset);
-  margin-left: -2px;
-  border: 1px solid var(--calcite-ui-foreground-1);
-  background-color: var(--calcite-ui-border-1);
   pointer-events: none;
+  margin-inline-start: calc(-1 * 0.125rem);
 }
 
 .tick--active {
@@ -367,43 +344,25 @@
 }
 
 .tick__label {
-  position: absolute;
-  font-size: var(--calcite-font-size--2);
-  font-weight: 500;
-  color: var(--calcite-ui-text-2);
-  width: 4em;
-  margin: 14px -2em;
-  text-align: center;
-  display: block;
+  display: flex;
+  justify-content: center;
   pointer-events: none;
+  margin-top: 0.875rem;
 }
 
 .tick__label--min {
-  left: 0;
-  margin: 14px -3px;
-  text-align: left;
-  transition: opacity 150ms;
+  transition: opacity var(--calcite-animation-timing);
 }
 
 .tick__label--max {
-  left: unset;
-  right: 0;
-  margin: 14px -3px;
-  text-align: right;
-  transition: opacity 50ms;
+  transition: opacity var(--calcite-internal-animation-timing-fast);
 }
 
 :host([has-histogram][label-handles]) .tick__label--min,
-:host([has-histogram][label-handles]) .tick__label--max {
-  margin: 6px -3px;
-  font-weight: 300;
-  color: var(--calcite-ui-text-3);
-}
-
-:host([has-histogram][precise]:not([precise=false])) .tick__label--min,
-:host([has-histogram][precise]:not([precise=false])) .tick__label--max {
-  margin: 6px -3px;
-  font-weight: 300;
+:host([has-histogram][label-handles]) .tick__label--max,
+:host([has-histogram][precise]) .tick__label--min,
+:host([has-histogram][precise]) .tick__label--max {
+  font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-3);
 }
 
@@ -411,16 +370,40 @@
   color: var(--calcite-ui-foreground-3);
 }
 
-:host([mirrored]:not([has-histogram])) .tick__label--min {
-  right: 0;
-  left: unset;
-  text-align: right;
+:host([label-ticks][ticks]) .container {
+  padding-bottom: calc(0.875rem + var(--calcite-slider-container-font-size));
+}
+
+:host([has-histogram]):host([precise][label-handles]) .container {
+  padding-bottom: calc(var(--calcite-slider-full-handle-height) + 1em);
+}
+
+:host([has-histogram]):host([label-handles]:not([precise])) .container {
+  padding-bottom: calc(var(--calcite-slider-handle-size) * 0.5 + 1em);
+}
+
+:host([has-histogram]):host([precise]:not([label-handles])) .container {
+  padding-bottom: var(--calcite-slider-full-handle-height);
+}
+
+:host(:not([has-histogram])):host([precise]:not([label-handles])) .container {
+  padding-top: var(--calcite-slider-full-handle-height);
+}
+
+:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range {
+  padding-bottom: var(--calcite-slider-full-handle-height);
+}
+
+:host(:not([has-histogram])):host([label-handles]:not([precise])) .container {
+  padding-top: calc(var(--calcite-slider-full-handle-height) + 4px);
+}
+
+:host(:not([has-histogram])):host([label-handles][precise]) .container {
+  padding-top: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }
 
-:host([mirrored]:not([has-histogram])) .tick__label--max {
-  right: unset;
-  left: 0;
-  text-align: left;
+:host(:not([has-histogram])):host([label-handles][precise]) .container--range {
+  padding-bottom: calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px);
 }
 
 ::slotted(input[slot=hidden-form-input]) {

package/dist/collection/components/calcite-slider/calcite-slider.js

@@ -4,9 +4,8 @@
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { getKey } from "../../utils/key";
 import { intersects } from "../../utils/dom";
-import { clamp } from "../../utils/math";
+import { clamp, decimalPlaces } from "../../utils/math";
 import { connectLabel, disconnectLabel } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 export class CalciteSlider {
@@ -46,6 +45,10 @@ export class CalciteSlider {
     this.step = 1;
     /** Currently selected number (if single select) */
     this.value = null;
+    /**
+     * Specify the scale of the slider, defaults to m
+     */
+    this.scale = "m";
     this.guid = `calcite-slider-${guid()}`;
     this.isRange = false;
     this.activeProp = "value";
@@ -260,7 +263,11 @@ export class CalciteSlider {
       h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()),
       h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
     return (h(Host, { id: id, onTouchStart: this.handleTouchStart },
-      h("div", { class: { container: true, "container--range": this.isRange } },
+      h("div", { class: {
+          ["container"]: true,
+          ["container--range"]: this.isRange,
+          [`scale--${this.scale}`]: true
+        } },
         this.renderGraph(),
         h("div", { class: "track", ref: this.storeTrackRef },
           h("div", { class: "track__range", onPointerDown: () => this.dragStart("minMaxValue"), style: {
@@ -281,27 +288,31 @@ export class CalciteSlider {
                 right: mirror ? tickOffset : ""
               } }, this.renderTickLabel(tick)));
           }))),
-        !this.precise && !this.labelHandles && this.isRange && minHandle,
-        !this.hasHistogram &&
-          !this.precise &&
-          this.labelHandles &&
-          this.isRange &&
-          minLabeledHandle,
-        this.precise && !this.labelHandles && this.isRange && minPreciseHandle,
-        this.precise && this.labelHandles && this.isRange && minLabeledPreciseHandle,
-        this.hasHistogram &&
-          !this.precise &&
-          this.labelHandles &&
-          this.isRange &&
-          minHistogramLabeledHandle,
-        !this.precise && !this.labelHandles && handle,
-        !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle,
-        !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle,
-        this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle,
-        !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle,
-        this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle,
-        this.hasHistogram && this.precise && this.labelHandles && histogramLabeledPreciseHandle,
-        h(HiddenFormInputSlot, { component: this }))));
+        h("div", { class: "thumb-container" },
+          !this.precise && !this.labelHandles && this.isRange && minHandle,
+          !this.hasHistogram &&
+            !this.precise &&
+            this.labelHandles &&
+            this.isRange &&
+            minLabeledHandle,
+          this.precise && !this.labelHandles && this.isRange && minPreciseHandle,
+          this.precise && this.labelHandles && this.isRange && minLabeledPreciseHandle,
+          this.hasHistogram &&
+            !this.precise &&
+            this.labelHandles &&
+            this.isRange &&
+            minHistogramLabeledHandle,
+          !this.precise && !this.labelHandles && handle,
+          !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle,
+          !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle,
+          this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle,
+          !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle,
+          this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle,
+          this.hasHistogram &&
+            this.precise &&
+            this.labelHandles &&
+            histogramLabeledPreciseHandle,
+          h(HiddenFormInputSlot, { component: this })))));
   }
   renderGraph() {
     return this.histogram ? (h("div", { class: "graph" },
@@ -374,7 +385,7 @@ export class CalciteSlider {
     const mirror = this.shouldMirror();
     const { activeProp, max, min, pageStep, step } = this;
     const value = this[activeProp];
-    const key = getKey(event.key);
+    const key = event.key;
     if (key === "Enter" || key === " ") {
       event.preventDefault();
       return;
@@ -408,7 +419,8 @@ export class CalciteSlider {
       return;
     }
     event.preventDefault();
-    this.setValue(activeProp, this.clamp(adjustment, activeProp));
+    const fixedDecimalAdjustment = Number(adjustment.toFixed(decimalPlaces(step)));
+    this.setValue(activeProp, this.clamp(fixedDecimalAdjustment, activeProp));
   }
   clickHandler(event) {
     this.focusActiveHandle(event.clientX);
@@ -546,7 +558,8 @@ export class CalciteSlider {
     const { left, width } = this.trackEl.getBoundingClientRect();
     const percent = (x - left) / width;
     const mirror = this.shouldMirror();
-    let value = this.clamp(this.min + range * (mirror ? 1 - percent : percent));
+    const clampedValue = this.clamp(this.min + range * (mirror ? 1 - percent : percent));
+    let value = Number(clampedValue.toFixed(decimalPlaces(this.step)));
     if (this.snap && this.step) {
       value = this.getClosestStep(value);
     }
@@ -557,10 +570,10 @@ export class CalciteSlider {
    * @internal
    */
   getClosestStep(num) {
-    num = this.clamp(num);
+    num = Number(this.clamp(num).toFixed(decimalPlaces(this.step)));
     if (this.step) {
       const step = Math.round(num / this.step) * this.step;
-      num = this.clamp(step);
+      num = Number(this.clamp(step).toFixed(decimalPlaces(this.step)));
     }
     return num;
   }
@@ -1142,6 +1155,29 @@ export class CalciteSlider {
       "attribute": "value",
       "reflect": true,
       "defaultValue": "null"
+    },
+    "scale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Scale",
+        "resolved": "\"l\" | \"m\" | \"s\"",
+        "references": {
+          "Scale": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specify the scale of the slider, defaults to m"
+      },
+      "attribute": "scale",
+      "reflect": false,
+      "defaultValue": "\"m\""
     }
   }; }
   static get states() { return {

package/dist/collection/components/calcite-sortable-list/calcite-sortable-list.css

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {