@esri/calcite-components 2.2.0-next.10 → 2.2.0-next.12

package/dist/cjs/calcite-graph_2.cjs.entry.js

@@ -1,26 +1,26 @@
 /*!
  * 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.2.0-next.10
+ * v2.2.0-next.12
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3f4e122c.js');
-const guid = require('./guid-f8293edf.js');
-const observers = require('./observers-325d7cbb.js');
-const dom = require('./dom-6ebda9a4.js');
-const form = require('./form-773b1282.js');
-const interactive = require('./interactive-8aa5ce2d.js');
-const key = require('./key-f1e6dc28.js');
-const label = require('./label-ebaebe46.js');
-const loadable = require('./loadable-56f61e5d.js');
-const locale = require('./locale-ad7edd77.js');
-const math = require('./math-da8126f0.js');
-require('./resources-2d961646.js');
-require('./browser-38dfc363.js');
-require('./component-b4823705.js');
+const index = require('./index-41b2d7a6.js');
+const guid = require('./guid-ce508a49.js');
+const observers = require('./observers-beba3aca.js');
+const dom = require('./dom-8573aa26.js');
+const form = require('./form-0723d4c5.js');
+const interactive = require('./interactive-317600bf.js');
+const key = require('./key-451c1254.js');
+const label = require('./label-ef786bf2.js');
+const loadable = require('./loadable-d0df67a5.js');
+const locale = require('./locale-3660b9d2.js');
+const math = require('./math-3da4ec3e.js');
+require('./resources-91df8f40.js');
+require('./browser-39257e07.js');
+require('./component-23821d6c.js');
 
 /**
  * Calculate slope of the tangents
@@ -228,11 +228,32 @@ const Graph = class {
 Graph.style = graphCss;
 
 const CSS = {
+    container: "container",
+    containerRange: "container--range",
+    graph: "graph",
+    handle: "handle",
+    handleExtension: "handle-extension",
     handleLabel: "handle__label",
     handleLabelMinValue: "handle__label--minValue",
     handleLabelValue: "handle__label--value",
-    tickMin: "tick__label--min",
+    hyphen: "hyphen",
+    hyphenWrap: "hyphen--wrap",
+    static: "static",
+    thumb: "thumb",
+    thumbActive: "thumb--active",
+    thumbContainer: "thumb-container",
+    thumbMinValue: "thumb--minValue",
+    thumbPrecise: "thumb--precise",
+    thumbValue: "thumb--value",
+    tick: "tick",
+    tickActive: "tick--active",
+    tickLabel: "tick__label",
     tickMax: "tick__label--max",
+    tickMin: "tick__label--min",
+    ticks: "ticks",
+    track: "track",
+    trackRange: "track__range",
+    transformed: "transformed",
 };
 const maxTickElementThreshold = 250;
 
@@ -248,6 +269,20 @@ const Slider = class {
         this.calciteSliderChange = index.createEvent(this, "calciteSliderChange", 6);
         this.activeProp = "value";
         this.guid = `calcite-slider-${guid.guid()}`;
+        this.onThumbBlur = () => {
+            this.activeProp = null;
+        };
+        this.onThumbFocus = (event) => {
+            const thumb = event.currentTarget;
+            this.activeProp = thumb.getAttribute("data-value-prop");
+        };
+        this.onThumbPointerDown = (event) => {
+            const thumb = event.currentTarget;
+            this.pointerDownDragStart(event, thumb.getAttribute("data-value-prop"));
+        };
+        this.onTrackPointerDown = (event) => {
+            this.pointerDownDragStart(event, "minMaxValue");
+        };
         this.dragUpdate = (event) => {
             if (this.disabled) {
                 return;
@@ -300,29 +335,28 @@ const Slider = class {
             this.maxValueDragRange = null;
             this.minMaxValueRange = null;
         };
-        /**
-         * Set the reference of the track Element
-         *
-         * @internal
-         * @param node
-         */
         this.storeTrackRef = (node) => {
             this.trackEl = node;
         };
+        this.storeThumbRef = (el) => {
+            if (!el) {
+                return;
+            }
+            const valueProp = el.getAttribute("data-value-prop");
+            valueProp === "minValue" ? (this.minHandle = el) : (this.maxHandle = el);
+        };
         /**
          * Returns a string representing the localized label value based if the groupSeparator prop is parsed.
          *
          * @param value
          */
-        this.determineGroupSeparator = (value) => {
-            if (typeof value === "number") {
-                locale.numberStringFormatter.numberFormatOptions = {
-                    locale: this.effectiveLocale,
-                    numberingSystem: this.numberingSystem,
-                    useGrouping: this.groupSeparator,
-                };
-                return locale.numberStringFormatter.localize(value.toString());
-            }
+        this.formatValue = (value) => {
+            locale.numberStringFormatter.numberFormatOptions = {
+                locale: this.effectiveLocale,
+                numberingSystem: this.numberingSystem,
+                useGrouping: this.groupSeparator,
+            };
+            return locale.numberStringFormatter.localize(value.toString());
         };
         this.disabled = false;
         this.form = undefined;
@@ -414,207 +448,116 @@ const Slider = class {
     }
     render() {
         const id = this.el.id || this.guid;
-        const maxProp = isRange(this.value) ? "maxValue" : "value";
         const value = isRange(this.value) ? this.maxValue : this.value;
-        const displayedValue = this.determineGroupSeparator(value);
-        const displayedMinValue = this.determineGroupSeparator(this.minValue);
         const min = this.minValue || this.min;
         const useMinValue = this.shouldUseMinValue();
         const minInterval = this.getUnitInterval(useMinValue ? this.minValue : min) * 100;
         const maxInterval = this.getUnitInterval(value) * 100;
         const mirror = this.shouldMirror();
-        const leftThumbOffset = `${mirror ? 100 - minInterval : minInterval}%`;
-        const rightThumbOffset = `${mirror ? maxInterval : 100 - maxInterval}%`;
         const valueIsRange = isRange(this.value);
-        const handleLabelMinValueClasses = `${CSS.handleLabel} ${CSS.handleLabelMinValue}`;
-        const handleLabelValueClasses = `${CSS.handleLabel} ${CSS.handleLabelValue}`;
-        const handle = (index.h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // 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: (el) => (this.maxHandle = el) }, index.h("div", { class: "handle" })));
-        const labeledHandle = (index.h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // 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: (el) => (this.maxHandle = el) }, index.h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue), index.h("div", { class: "handle" })));
-        const histogramLabeledHandle = (index.h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // 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: (el) => (this.maxHandle = el) }, index.h("div", { class: "handle" }), index.h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue)));
-        const preciseHandle = (index.h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // 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: (el) => (this.maxHandle = el) }, index.h("div", { class: "handle" }), index.h("div", { class: "handle-extension" })));
-        const histogramPreciseHandle = (index.h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // 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: (el) => (this.maxHandle = el) }, index.h("div", { class: "handle-extension" }), index.h("div", { class: "handle" })));
-        const labeledPreciseHandle = (index.h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // 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: (el) => (this.maxHandle = el) }, index.h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue), index.h("div", { class: "handle" }), index.h("div", { class: "handle-extension" })));
-        const histogramLabeledPreciseHandle = (index.h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // 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: (el) => (this.maxHandle = el) }, index.h("div", { class: "handle-extension" }), index.h("div", { class: "handle" }), index.h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue)));
-        const minHandle = (index.h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
-                thumb: true,
-                "thumb--minValue": true,
-                "thumb--active": this.dragProp === "minValue",
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-            // 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: (el) => (this.minHandle = el) }, index.h("div", { class: "handle" })));
-        const minLabeledHandle = (index.h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
-                thumb: true,
-                "thumb--minValue": true,
-                "thumb--active": this.dragProp === "minValue",
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-            // 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: (el) => (this.minHandle = el) }, index.h("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue), index.h("div", { class: "handle" })));
-        const minHistogramLabeledHandle = (index.h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
-                thumb: true,
-                "thumb--minValue": true,
-                "thumb--active": this.dragProp === "minValue",
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-            // 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: (el) => (this.minHandle = el) }, index.h("div", { class: "handle" }), index.h("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue)));
-        const minPreciseHandle = (index.h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
-                thumb: true,
-                "thumb--minValue": true,
-                "thumb--active": this.dragProp === "minValue",
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-            // 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: (el) => (this.minHandle = el) }, index.h("div", { class: "handle-extension" }), index.h("div", { class: "handle" })));
-        const minLabeledPreciseHandle = (index.h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
-                thumb: true,
-                "thumb--minValue": true,
-                "thumb--active": this.dragProp === "minValue",
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-            // 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: (el) => (this.minHandle = el) }, index.h("div", { class: "handle-extension" }), index.h("div", { class: "handle" }), index.h("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), index.h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue)));
+        const thumbTypes = this.buildThumbType("max");
+        const thumb = this.renderThumb({
+            type: thumbTypes,
+            thumbPlacement: thumbTypes.includes("histogram") ? "below" : "above",
+            maxInterval,
+            minInterval,
+            mirror,
+        });
+        const minThumbTypes = this.buildThumbType("min");
+        const minThumb = valueIsRange &&
+            this.renderThumb({
+                type: minThumbTypes,
+                thumbPlacement: minThumbTypes.includes("histogram") || minThumbTypes.includes("precise")
+                    ? "below"
+                    : "above",
+                maxInterval,
+                minInterval,
+                mirror,
+            });
         return (index.h(index.Host, { id: id, onTouchStart: this.handleTouchStart }, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("div", { "aria-label": label.getLabelText(this), class: {
-                ["container"]: true,
-                ["container--range"]: valueIsRange,
+                [CSS.container]: true,
+                [CSS.containerRange]: valueIsRange,
                 [`scale--${this.scale}`]: true,
-            } }, this.renderGraph(), index.h("div", { class: "track",
+            } }, this.renderGraph(), index.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 }, index.h("div", { class: "track__range", onPointerDown: (event) => this.pointerDownDragStart(event, "minMaxValue"), style: {
+            ref: this.storeTrackRef }, index.h("div", { class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: {
                 left: `${mirror ? 100 - maxInterval : minInterval}%`,
                 right: `${mirror ? minInterval : 100 - maxInterval}%`,
-            } }), index.h("div", { class: "ticks" }, this.tickValues.map((tick) => {
+            } }), index.h("div", { class: CSS.ticks }, this.tickValues.map((tick) => {
             const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
             let activeTicks = tick >= min && tick <= value;
             if (useMinValue) {
                 activeTicks = tick >= this.minValue && tick <= this.maxValue;
             }
             return (index.h("span", { class: {
-                    tick: true,
-                    "tick--active": activeTicks,
+                    [CSS.tick]: true,
+                    [CSS.tickActive]: activeTicks,
                 }, style: {
                     left: mirror ? "" : tickOffset,
                     right: mirror ? tickOffset : "",
                 } }, this.renderTickLabel(tick)));
-        }))), index.h("div", { class: "thumb-container" }, !this.precise && !this.labelHandles && valueIsRange && minHandle, !this.hasHistogram &&
-            !this.precise &&
-            this.labelHandles &&
-            valueIsRange &&
-            minLabeledHandle, this.precise && !this.labelHandles && valueIsRange && minPreciseHandle, this.precise && this.labelHandles && valueIsRange && minLabeledPreciseHandle, this.hasHistogram &&
-            !this.precise &&
-            this.labelHandles &&
-            valueIsRange &&
-            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, index.h(form.HiddenFormInputSlot, { component: this }))))));
+        }))), index.h("div", { class: CSS.thumbContainer }, minThumb, thumb, index.h(form.HiddenFormInputSlot, { component: this }))))));
+    }
+    renderThumb({ type, mirror, thumbPlacement, minInterval, maxInterval, }) {
+        const isLabeled = type.includes("labeled");
+        const isPrecise = type.includes("precise");
+        const isMinThumb = type.includes("min");
+        const valueIsRange = isRange(this.value);
+        const value = isMinThumb
+            ? this.minValue
+            : valueIsRange
+                ? this.maxValue
+                : this.value;
+        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 = isMinThumb ? this.formatValue(this.minValue) : this.formatValue(value);
+        const thumbStyle = isMinThumb
+            ? { left: `${mirror ? 100 - minInterval : minInterval}%` }
+            : { right: `${mirror ? maxInterval : 100 - maxInterval}%` };
+        const thumbLabelClasses = `${CSS.handleLabel} ${isMinThumb ? CSS.handleLabelMinValue : CSS.handleLabelValue}`;
+        const labels = isLabeled
+            ? [
+                index.h("span", { "aria-hidden": "true", class: thumbLabelClasses }, displayedValue),
+                index.h("span", { "aria-hidden": "true", class: `${thumbLabelClasses} ${CSS.static}` }, displayedValue),
+                index.h("span", { "aria-hidden": "true", class: `${thumbLabelClasses} ${CSS.transformed}` }, displayedValue),
+            ]
+            : [];
+        const thumbContent = [
+            ...labels,
+            index.h("div", { class: CSS.handle }),
+            isPrecise && index.h("div", { class: CSS.handleExtension }),
+        ];
+        if (thumbPlacement === "below") {
+            thumbContent.reverse();
+        }
+        return (index.h("div", { "aria-disabled": this.disabled, "aria-label": ariaLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": ariaValuenow, class: {
+                [CSS.thumb]: true,
+                [CSS.thumbValue]: !isMinThumb,
+                [CSS.thumbActive]: this.lastDragProp !== "minMaxValue" && this.dragProp === valueProp,
+                [CSS.thumbPrecise]: isPrecise,
+                [CSS.thumbMinValue]: isMinThumb,
+            }, "data-value-prop": valueProp, key: type, onBlur: this.onThumbBlur, onFocus: this.onThumbFocus, onPointerDown: this.onThumbPointerDown, role: "slider", style: thumbStyle, tabIndex: 0,
+            // 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.storeThumbRef }, thumbContent));
     }
     renderGraph() {
-        return this.histogram ? (index.h("calcite-graph", { class: "graph", colorStops: this.histogramStops, data: this.histogram, highlightMax: isRange(this.value) ? this.maxValue : this.value, highlightMin: isRange(this.value) ? this.minValue : this.min, max: this.max, min: this.min })) : null;
+        return this.histogram ? (index.h("calcite-graph", { class: CSS.graph, colorStops: this.histogramStops, data: this.histogram, highlightMax: isRange(this.value) ? this.maxValue : this.value, highlightMin: isRange(this.value) ? this.minValue : this.min, max: this.max, min: this.min })) : null;
     }
     renderTickLabel(tick) {
-        const valueIsRange = isRange(this.value);
-        const isMinTickLabel = tick === this.min;
-        const isMaxTickLabel = tick === this.max;
-        const displayedTickValue = this.determineGroupSeparator(tick);
-        const tickLabel = (index.h("span", { class: {
-                tick__label: true,
+        const { hasHistogram, labelHandles, labelTicks, max, min, precise, value } = this;
+        const valueIsRange = isRange(value);
+        const isMinTickLabel = tick === min;
+        const isMaxTickLabel = tick === max;
+        const isAtEdge = isMinTickLabel || isMaxTickLabel;
+        const shouldDisplayLabel = labelTicks &&
+            ((!hasHistogram && (isAtEdge || !precise || !valueIsRange)) ||
+                (hasHistogram && (isAtEdge || (!precise && !labelHandles))));
+        return shouldDisplayLabel ? (index.h("span", { class: {
+                [CSS.tickLabel]: true,
                 [CSS.tickMin]: isMinTickLabel,
                 [CSS.tickMax]: isMaxTickLabel,
-            } }, displayedTickValue));
-        if (this.labelTicks && !this.hasHistogram && !valueIsRange) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            !this.hasHistogram &&
-            valueIsRange &&
-            !this.precise &&
-            !this.labelHandles) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            !this.hasHistogram &&
-            valueIsRange &&
-            !this.precise &&
-            this.labelHandles) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            !this.hasHistogram &&
-            valueIsRange &&
-            this.precise &&
-            (isMinTickLabel || isMaxTickLabel)) {
-            return tickLabel;
-        }
-        if (this.labelTicks && this.hasHistogram && !this.precise && !this.labelHandles) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            this.hasHistogram &&
-            this.precise &&
-            !this.labelHandles &&
-            (isMinTickLabel || isMaxTickLabel)) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            this.hasHistogram &&
-            !this.precise &&
-            this.labelHandles &&
-            (isMinTickLabel || isMaxTickLabel)) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            this.hasHistogram &&
-            this.precise &&
-            this.labelHandles &&
-            (isMinTickLabel || isMaxTickLabel)) {
-            return tickLabel;
-        }
-        return null;
+            } }, this.formatValue(tick))) : null;
     }
     //--------------------------------------------------------------------------
     //
@@ -683,7 +626,7 @@ const Slider = class {
         }
         this.lastDragPropValue = this[prop];
         this.dragStart(prop);
-        const isThumbActive = this.el.shadowRoot.querySelector(".thumb:active");
+        const isThumbActive = this.el.shadowRoot.querySelector(`.${CSS.thumb}:active`);
         if (!isThumbActive) {
             this.setValue({ [prop]: this.clamp(position, prop) });
         }
@@ -709,6 +652,19 @@ const Slider = class {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    buildThumbType(type) {
+        const thumbTypeParts = [type];
+        if (this.labelHandles) {
+            thumbTypeParts.push("labeled");
+        }
+        if (this.precise) {
+            thumbTypeParts.push("precise");
+        }
+        if (this.hasHistogram) {
+            thumbTypeParts.push("histogram");
+        }
+        return thumbTypeParts.join("-");
+    }
     setValueFromMinMax() {
         const { minValue, maxValue } = this;
         if (typeof minValue === "number" && typeof maxValue === "number") {
@@ -919,7 +875,7 @@ const Slider = class {
         const hyphenLabel = leftValueLabel;
         const labelOffset = labelFontSize / 2;
         if (labelTransformedOverlap > 0) {
-            hyphenLabel.classList.add("hyphen", "hyphen--wrap");
+            hyphenLabel.classList.add(CSS.hyphen, CSS.hyphenWrap);
             if (rightValueLabelStaticHostOffset === 0 && leftValueLabelStaticHostOffset === 0) {
                 // Neither handle overlaps the host boundary
                 let leftValueLabelTranslate = labelTransformedOverlap / 2 - labelOffset;
@@ -965,7 +921,7 @@ const Slider = class {
             }
         }
         else {
-            hyphenLabel.classList.remove("hyphen", "hyphen--wrap");
+            hyphenLabel.classList.remove(CSS.hyphen, CSS.hyphenWrap);
             leftValueLabel.style.transform = `translateX(${leftValueLabelStaticHostOffset}px)`;
             leftValueLabelTransformed.style.transform = `translateX(${leftValueLabelStaticHostOffset}px)`;
             rightValueLabel.style.transform = `translateX(${rightValueLabelStaticHostOffset}px)`;
@@ -995,10 +951,10 @@ const Slider = class {
         if (this.hasHistogram && !this.precise && !this.labelHandles) {
             return;
         }
-        const minHandle = this.el.shadowRoot.querySelector(".thumb--minValue");
-        const maxHandle = this.el.shadowRoot.querySelector(".thumb--value");
-        const minTickLabel = this.el.shadowRoot.querySelector(".tick__label--min");
-        const maxTickLabel = this.el.shadowRoot.querySelector(".tick__label--max");
+        const minHandle = this.el.shadowRoot.querySelector(`.${CSS.thumbMinValue}`);
+        const maxHandle = this.el.shadowRoot.querySelector(`.${CSS.thumbValue}`);
+        const minTickLabel = this.el.shadowRoot.querySelector(`.${CSS.tickMin}`);
+        const maxTickLabel = this.el.shadowRoot.querySelector(`.${CSS.tickMax}`);
         if (!minHandle && maxHandle && minTickLabel && maxTickLabel) {
             minTickLabel.style.opacity = this.isMinTickLabelObscured(minTickLabel, maxHandle) ? "0" : "1";
             maxTickLabel.style.opacity = this.isMaxTickLabelObscured(maxTickLabel, maxHandle) ? "0" : "1";