@esri/solutions-components 0.8.6-6.3 → 0.8.6

package/dist/components/slider.js

@@ -18,7 +18,7 @@ import { d as defineCustomElement$1 } from './graph.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
+ * v2.4.0
  */
 const CSS = {
     container: "container",
@@ -50,8 +50,7 @@ const CSS = {
 };
 const maxTickElementThreshold = 250;
 
-const sliderCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}.scale--s{--calcite-slider-handle-size:0.625rem;--calcite-slider-handle-extension-height:0.4rem;--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:0.875rem;--calcite-slider-handle-extension-height:0.5rem;--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:1rem;--calcite-slider-handle-extension-height:0.65rem;--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-color-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * 0.5);padding-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-inline:0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  );touch-action:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.55rem}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-inline-size:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;inset-block:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;inline-size:1em}.thumb .handle__label.hyphen--wrap{display:flex}.thumb .handle{box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;block-size:var(--calcite-slider-handle-size);inline-size:var(--calcite-slider-handle-size);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;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{inline-size:0.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-color-text-3)}.thumb:hover .handle{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-color-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.thumb:focus .handle-extension{background-color:var(--calcite-color-brand)}.thumb.thumb--minValue{transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-0.125rem}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.4375rem}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.875rem}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-2rem}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-block-start:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-2.075rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-2.75rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-3.0625rem}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-color-brand)}.track{position:relative;block-size:0.125rem;border-radius:0px;background-color:var(--calcite-color-border-2);transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;inset-block-start:0px;block-size:0.125rem;background-color:var(--calcite-color-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;inline-size:100%;content:\"\";inset-block-start:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);block-size:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}@media (forced-colors: active){.thumb{outline-width:0;outline-offset:0}.handle{outline:2px solid transparent;outline-offset:2px}.thumb:focus .handle,.thumb .handle-extension,.thumb:hover .handle-extension,.thumb:focus .handle-extension,.thumb:active .handle-extension{background-color:canvasText}.track{background-color:canvasText}.track__range{background-color:highlight}}.tick{position:absolute;block-size:0.25rem;inline-size:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-color-border-input);border-color:var(--calcite-color-foreground-1);inset-block-start:-2px;pointer-events:none;margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-color-brand)}.tick__label{pointer-events:none;margin-block-start:0.875rem;display:flex;justify-content:center}.tick__label--min{transition:opacity var(--calcite-animation-timing)}.tick__label--max{transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,: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-color-text-3)}.graph{color:var(--calcite-color-foreground-3);block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-block-end:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-block-end:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-block-start:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-block-end:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteSliderStyle0 = sliderCss;
+const sliderCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}.scale--s{--calcite-slider-handle-size:0.625rem;--calcite-slider-handle-extension-height:0.4rem;--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:0.875rem;--calcite-slider-handle-extension-height:0.5rem;--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:1rem;--calcite-slider-handle-extension-height:0.65rem;--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-color-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * 0.5);padding-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-inline:0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  );touch-action:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.55rem}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-inline-size:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;inset-block:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;inline-size:1em}.thumb .handle__label.hyphen--wrap{display:flex}.thumb .handle{box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;block-size:var(--calcite-slider-handle-size);inline-size:var(--calcite-slider-handle-size);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;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{inline-size:0.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-color-text-3)}.thumb:hover .handle{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-color-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.thumb:focus .handle-extension{background-color:var(--calcite-color-brand)}.thumb.thumb--minValue{transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-0.125rem}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.4375rem}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.875rem}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-2rem}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-block-start:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-2.075rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-2.75rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-3.0625rem}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-color-brand)}.track{position:relative;block-size:0.125rem;border-radius:0px;background-color:var(--calcite-color-border-2);transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;inset-block-start:0px;block-size:0.125rem;background-color:var(--calcite-color-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;inline-size:100%;content:\"\";inset-block-start:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);block-size:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}@media (forced-colors: active){.thumb{outline-width:0;outline-offset:0}.handle{outline:2px solid transparent;outline-offset:2px}.thumb:focus .handle,.thumb .handle-extension,.thumb:hover .handle-extension,.thumb:focus .handle-extension,.thumb:active .handle-extension{background-color:canvasText}.track{background-color:canvasText}.track__range{background-color:highlight}}.tick{position:absolute;block-size:0.25rem;inline-size:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-color-border-input);border-color:var(--calcite-color-foreground-1);inset-block-start:-2px;pointer-events:none;margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-color-brand)}.tick__label{pointer-events:none;margin-block-start:0.875rem;display:flex;justify-content:center}.tick__label--min{transition:opacity var(--calcite-animation-timing)}.tick__label--max{transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,: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-color-text-3)}.graph{color:var(--calcite-color-foreground-3);block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-block-end:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-block-end:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-block-start:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-block-end:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 
 function isRange(value) {
     return Array.isArray(value);
@@ -63,54 +62,6 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         this.__attachShadow();
         this.calciteSliderInput = createEvent(this, "calciteSliderInput", 6);
         this.calciteSliderChange = createEvent(this, "calciteSliderChange", 6);
-        //--------------------------------------------------------------------------
-        //
-        //  Event Listeners
-        //
-        //--------------------------------------------------------------------------
-        this.handleKeyDown = (event) => {
-            const mirror = this.shouldMirror();
-            const { activeProp, max, min, pageStep, step } = this;
-            const value = this[activeProp];
-            const { key } = event;
-            if (isActivationKey(key)) {
-                event.preventDefault();
-                return;
-            }
-            let adjustment;
-            if (key === "ArrowUp" || key === "ArrowRight") {
-                const directionFactor = mirror && key === "ArrowRight" ? -1 : 1;
-                adjustment = value + step * directionFactor;
-            }
-            else if (key === "ArrowDown" || key === "ArrowLeft") {
-                const directionFactor = mirror && key === "ArrowLeft" ? -1 : 1;
-                adjustment = value - step * directionFactor;
-            }
-            else if (key === "PageUp") {
-                if (pageStep) {
-                    adjustment = value + pageStep;
-                }
-            }
-            else if (key === "PageDown") {
-                if (pageStep) {
-                    adjustment = value - pageStep;
-                }
-            }
-            else if (key === "Home") {
-                adjustment = min;
-            }
-            else if (key === "End") {
-                adjustment = max;
-            }
-            if (isNaN(adjustment)) {
-                return;
-            }
-            event.preventDefault();
-            const fixedDecimalAdjustment = Number(adjustment.toFixed(decimalPlaces(step)));
-            this.setValue({
-                [activeProp]: this.clamp(fixedDecimalAdjustment, activeProp),
-            });
-        };
         this.activeProp = "value";
         this.guid = `calcite-slider-${guid()}`;
         this.onThumbBlur = () => {
@@ -203,14 +154,12 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
             return numberStringFormatter.localize(value.toString());
         };
         this.disabled = false;
-        this.fillPlacement = "start";
         this.form = undefined;
         this.groupSeparator = false;
         this.hasHistogram = false;
         this.histogram = undefined;
         this.histogramStops = undefined;
         this.labelHandles = false;
-        this.labelFormatter = undefined;
         this.labelTicks = false;
         this.max = 100;
         this.maxLabel = undefined;
@@ -320,40 +269,20 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
                 minInterval,
                 mirror,
             });
-        const fillPlacement = valueIsRange ? "start" : this.fillPlacement;
-        const trackRangePlacementStyles = fillPlacement === "none"
-            ? {
-                left: `unset`,
-                right: `unset`,
-            }
-            : fillPlacement === "end"
-                ? {
-                    left: `${mirror ? minInterval : maxInterval}%`,
-                    right: `${mirror ? maxInterval : minInterval}%`,
-                }
-                : /* default */
-                    {
-                        left: `${mirror ? 100 - maxInterval : minInterval}%`,
-                        right: `${mirror ? minInterval : 100 - maxInterval}%`,
-                    };
-        return (h(Host, { key: '86ec64bfb42495e7fc927751ad7d2a667b0a625d', id: id, onKeyDown: this.handleKeyDown, onTouchStart: this.handleTouchStart }, h(InteractiveContainer, { key: '842aacebaf4199a088f71b2d2ad7420845cf2629', disabled: this.disabled }, h("div", { key: '364511c370bbf454958accdd4c3084a1c339de22', "aria-label": getLabelText(this), class: {
+        return (h(Host, { id: id, onTouchStart: this.handleTouchStart }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { "aria-label": getLabelText(this), class: {
                 [CSS.container]: true,
                 [CSS.containerRange]: valueIsRange,
                 [`scale--${this.scale}`]: true,
-            } }, this.renderGraph(), h("div", { key: 'b382bc88c07796d339dd972bcea3459ce8664de9', class: CSS.track,
+            } }, this.renderGraph(), h("div", { class: CSS.track,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.storeTrackRef }, h("div", { key: 'ba6aeb6fca50edd0c2d13077a49ac00f0aa93cf3', class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: trackRangePlacementStyles }), h("div", { key: '013d292f6046b456443c9537facac8a6a2b1c4e6', class: CSS.ticks }, this.tickValues.map((tick) => {
+            ref: this.storeTrackRef }, h("div", { class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: {
+                left: `${mirror ? 100 - maxInterval : minInterval}%`,
+                right: `${mirror ? minInterval : 100 - maxInterval}%`,
+            } }), h("div", { class: CSS.ticks }, this.tickValues.map((tick) => {
             const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
-            let activeTicks = false;
-            if (fillPlacement === "start" || fillPlacement === "end") {
-                if (useMinValue) {
-                    activeTicks = tick >= this.minValue && tick <= this.maxValue;
-                }
-                else {
-                    const rangeStart = fillPlacement === "start" ? min : value;
-                    const rangeEnd = fillPlacement === "start" ? value : this.max;
-                    activeTicks = tick >= rangeStart && tick <= rangeEnd;
-                }
+            let activeTicks = tick >= min && tick <= value;
+            if (useMinValue) {
+                activeTicks = tick >= this.minValue && tick <= this.maxValue;
             }
             return (h("span", { class: {
                     [CSS.tick]: true,
@@ -362,7 +291,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
                     left: mirror ? "" : tickOffset,
                     right: mirror ? tickOffset : "",
                 } }, this.renderTickLabel(tick)));
-        }))), h("div", { key: '31e1150688ac0371ed3b32a839c855b79ae9ed47', class: CSS.thumbContainer }, minThumb, thumb, h(HiddenFormInputSlot, { key: '3de3bb38e26cd71ee3a49541d61534b004ff137b', component: this }))))));
+        }))), h("div", { class: CSS.thumbContainer }, minThumb, thumb, h(HiddenFormInputSlot, { component: this }))))));
     }
     renderThumb({ type, mirror, thumbPlacement, minInterval, maxInterval, }) {
         const isLabeled = type.includes("labeled");
@@ -377,11 +306,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         const valueProp = isMinThumb ? "minValue" : valueIsRange ? "maxValue" : "value";
         const ariaLabel = isMinThumb ? this.minLabel : valueIsRange ? this.maxLabel : this.minLabel;
         const ariaValuenow = isMinThumb ? this.minValue : value;
-        const displayedValue = valueProp === "minValue"
-            ? this.internalLabelFormatter(this.minValue, "min")
-            : valueProp === "maxValue"
-                ? this.internalLabelFormatter(this.maxValue, "max")
-                : this.internalLabelFormatter(value, "value");
+        const displayedValue = isMinThumb ? this.formatValue(this.minValue) : this.formatValue(value);
         const thumbStyle = isMinThumb
             ? { left: `${mirror ? 100 - minInterval : minInterval}%` }
             : { right: `${mirror ? maxInterval : 100 - maxInterval}%` };
@@ -427,7 +352,55 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
                 [CSS.tickLabel]: true,
                 [CSS.tickMin]: isMinTickLabel,
                 [CSS.tickMax]: isMaxTickLabel,
-            } }, this.internalLabelFormatter(tick, "tick"))) : null;
+            } }, this.formatValue(tick))) : null;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    keyDownHandler(event) {
+        const mirror = this.shouldMirror();
+        const { activeProp, max, min, pageStep, step } = this;
+        const value = this[activeProp];
+        const { key } = event;
+        if (isActivationKey(key)) {
+            event.preventDefault();
+            return;
+        }
+        let adjustment;
+        if (key === "ArrowUp" || key === "ArrowRight") {
+            const directionFactor = mirror && key === "ArrowRight" ? -1 : 1;
+            adjustment = value + step * directionFactor;
+        }
+        else if (key === "ArrowDown" || key === "ArrowLeft") {
+            const directionFactor = mirror && key === "ArrowLeft" ? -1 : 1;
+            adjustment = value - step * directionFactor;
+        }
+        else if (key === "PageUp") {
+            if (pageStep) {
+                adjustment = value + pageStep;
+            }
+        }
+        else if (key === "PageDown") {
+            if (pageStep) {
+                adjustment = value - pageStep;
+            }
+        }
+        else if (key === "Home") {
+            adjustment = min;
+        }
+        else if (key === "End") {
+            adjustment = max;
+        }
+        if (isNaN(adjustment)) {
+            return;
+        }
+        event.preventDefault();
+        const fixedDecimalAdjustment = Number(adjustment.toFixed(decimalPlaces(step)));
+        this.setValue({
+            [activeProp]: this.clamp(fixedDecimalAdjustment, activeProp),
+        });
     }
     pointerDownHandler(event) {
         if (this.disabled || !isPrimaryPointerButton(event)) {
@@ -443,7 +416,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
             }
             else {
                 const closerToMax = Math.abs(this.maxValue - position) < Math.abs(this.minValue - position);
-                prop = closerToMax || position >= this.maxValue ? "maxValue" : "minValue";
+                prop = closerToMax || position > this.maxValue ? "maxValue" : "minValue";
             }
         }
         this.lastDragPropValue = this[prop];
@@ -550,14 +523,17 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         window.addEventListener("pointercancel", this.dragEnd);
     }
     focusActiveHandle(valueX) {
-        if (this.dragProp === "minValue") {
-            this.minHandle.focus();
-        }
-        else if (this.dragProp === "maxValue" || this.dragProp === "value") {
-            this.maxHandle.focus();
-        }
-        else if (this.dragProp === "minMaxValue") {
-            this.getClosestHandle(valueX).focus();
+        switch (this.dragProp) {
+            case "minValue":
+                this.minHandle.focus();
+                break;
+            case "maxValue":
+            case "value":
+                this.maxHandle.focus();
+                break;
+            case "minMaxValue":
+                this.getClosestHandle(valueX).focus();
+                break;
         }
     }
     emitInput() {
@@ -625,23 +601,25 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         const percent = (x - left) / width;
         const mirror = this.shouldMirror();
         const clampedValue = this.clamp(this.min + range * (mirror ? 1 - percent : percent));
-        const value = Number(clampedValue.toFixed(decimalPlaces(this.step)));
-        return !(this.snap && this.step) ? value : this.getClosestStep(value);
+        let value = Number(clampedValue.toFixed(decimalPlaces(this.step)));
+        if (this.snap && this.step) {
+            value = this.getClosestStep(value);
+        }
+        return value;
     }
     /**
      * Get closest allowed value along stepped values
      *
-     * @param value
+     * @param num
      * @internal
      */
-    getClosestStep(value) {
-        const { max, min, step } = this;
-        let snappedValue = Math.floor((value - min) / step) * step + min;
-        snappedValue = Math.min(Math.max(snappedValue, min), max);
-        if (snappedValue > max) {
-            snappedValue -= step;
+    getClosestStep(num) {
+        num = Number(this.clamp(num).toFixed(decimalPlaces(this.step)));
+        if (this.step) {
+            const step = Math.round(num / this.step) * this.step;
+            num = Number(this.clamp(step).toFixed(decimalPlaces(this.step)));
         }
-        return snappedValue;
+        return num;
     }
     getClosestHandle(valueX) {
         return this.getDistanceX(this.maxHandle, valueX) > this.getDistanceX(this.minHandle, valueX)
@@ -844,17 +822,6 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         const handleBounds = handle.getBoundingClientRect();
         return intersects(maxLabelBounds, handleBounds);
     }
-    internalLabelFormatter(value, type) {
-        const customFormatter = this.labelFormatter;
-        if (!customFormatter) {
-            return this.formatValue(value);
-        }
-        const formattedValue = customFormatter(value, type, this.formatValue);
-        if (formattedValue == null) {
-            return this.formatValue(value);
-        }
-        return formattedValue;
-    }
     static get delegatesFocus() { return true; }
     get el() { return this; }
     static get watchers() { return {
@@ -864,17 +831,15 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         "minValue": ["minMaxValueHandler"],
         "maxValue": ["minMaxValueHandler"]
     }; }
-    static get style() { return CalciteSliderStyle0; }
+    static get style() { return sliderCss; }
 }, [17, "calcite-slider", {
         "disabled": [516],
-        "fillPlacement": [513, "fill-placement"],
         "form": [513],
         "groupSeparator": [516, "group-separator"],
         "hasHistogram": [1540, "has-histogram"],
         "histogram": [16],
         "histogramStops": [16],
         "labelHandles": [516, "label-handles"],
-        "labelFormatter": [16],
         "labelTicks": [516, "label-ticks"],
         "max": [514],
         "maxLabel": [1, "max-label"],
@@ -899,7 +864,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         "maxValueDragRange": [32],
         "tickValues": [32],
         "setFocus": [64]
-    }, [[1, "pointerdown", "pointerDownHandler"]], {
+    }, [[0, "keydown", "keyDownHandler"], [1, "pointerdown", "pointerDownHandler"]], {
         "histogram": ["histogramWatcher"],
         "ticks": ["ticksWatcher"],
         "value": ["valueHandler"],