@esri/calcite-components 5.2.0-next.66 → 5.2.0-next.68

package/dist/chunks/text.js

@@ -4,9 +4,6 @@ import { safeClassMap } from "@arcgis/lumina";
 const CSS = {
   textMatch: "text-match"
 };
-function capitalizeWord(word) {
-  return word.charAt(0).toUpperCase() + word.slice(1);
-}
 function highlightText({ text, pattern }) {
   if (!pattern || !text) {
     return text;
@@ -18,6 +15,5 @@ function highlightText({ text, pattern }) {
   return parts;
 }
 export {
-  capitalizeWord as c,
   highlightText as h
 };

package/dist/chunks/useForm.js

@@ -35,6 +35,18 @@ function isSupportedType(type) {
 }
 const joinableValueTypes = ["text", "email", "search", "hidden", "tel", "url"];
 const allValid = Object.freeze({ validity: {}, validationMessage: "" });
+const validityFlagKeys = [
+  "badInput",
+  "customError",
+  "patternMismatch",
+  "rangeOverflow",
+  "rangeUnderflow",
+  "stepMismatch",
+  "tooLong",
+  "tooShort",
+  "typeMismatch",
+  "valueMissing"
+];
 function validate({
   component,
   input,
@@ -108,8 +120,8 @@ function validateValue(inputDelegate, valueToValidate) {
 }
 function getValidityFlags(validityState) {
   const validityFlags = {};
-  for (const key in validityState) {
-    if (key !== "valid" && validityState[key]) {
+  for (const key of validityFlagKeys) {
+    if (validityState[key]) {
       validityFlags[key] = true;
     }
   }

package/dist/chunks/useTime.js

@@ -3,7 +3,6 @@ import { toFunction, GenericController } from "@arcgis/lumina/controllers";
 import { createEvent } from "@arcgis/lumina";
 import { l as localizedTwentyFourHourMeridiems, i as isValidNumber, n as numberStringFormatter, g as getDateTimeFormat, a as getSupportedNumberingSystem } from "./locale.js";
 import { d as decimalPlaces, g as getDecimals } from "./math.js";
-import { c as capitalizeWord } from "./text.js";
 import { n as numberKeys } from "./key.js";
 const maxTenthForMinuteAndSecond = 5;
 function createLocaleDateTimeFormatter({
@@ -392,6 +391,11 @@ function toISOTimeString(value, step = 60) {
   }
   return isoTimeString;
 }
+const localizedTimePartProperty = {
+  hour: "localizedHour",
+  minute: "localizedMinute",
+  second: "localizedSecond"
+};
 class TimeController extends GenericController {
   constructor() {
     super(...arguments);
@@ -828,7 +832,7 @@ class TimeController extends GenericController {
     } else {
       const oldValue = this[key];
       this[key] = typeof value === "number" ? formatTimePart(value) : value;
-      this[`localized${capitalizeWord(key)}`] = localizeTimePart({
+      this[localizedTimePartProperty[key]] = localizeTimePart({
         value: this[key],
         part: key,
         locale,

package/dist/components/calcite-action/customElement.js

@@ -16,7 +16,7 @@ const styles$1 = css`:host{box-sizing:border-box;background-color:var(--calcite-
 const styles = css`.screen-reader-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}`;
 class Action extends LitElement {
   constructor() {
-    super(...arguments);
+    super();
     this.guid = guid();
     this.buttonRef = createRef();
     this.buttonId = IDS.button(this.guid);
@@ -25,7 +25,6 @@ class Action extends LitElement {
     this.focusSetter = useSetFocus()(this);
     this.indicatorRef = createRef();
     this.interactiveContainer = useInteractive(this);
-    this.formTrigger = useFormTrigger()(this);
     this.labelElRef = createRef();
     this.active = false;
     this.activeDescendant = false;
@@ -41,6 +40,7 @@ class Action extends LitElement {
     this.width = "auto";
     this.textEnabled = false;
     this.type = "button";
+    useFormTrigger()(this);
   }
   static {
     this.properties = { aria: [0, {}, { attribute: false }], active: [7, {}, { reflect: true, type: Boolean }], activeDescendant: [7, {}, { reflect: true, type: Boolean }], alignment: [3, {}, { reflect: true }], appearance: [3, {}, { reflect: true }], compact: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], icon: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], indicator: [7, {}, { reflect: true, type: Boolean }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], overflowDisabled: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }], text: 1, textEnabled: [7, {}, { reflect: true, type: Boolean }], type: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };

package/dist/components/calcite-button/customElement.js

@@ -34,7 +34,6 @@ class Button extends LitElement {
     super();
     this.attributeWatch = useWatchAttributes(["aria-expanded"], this.handleGlobalAttributesChanged);
     this.contentRef = createRef();
-    this.formTrigger = useFormTrigger({ disabled: () => !!this.href })(this);
     this.mutationObserver = createObserver("mutation", () => this.updateHasContent());
     this.resizeObserver = createObserver("resize", () => this.setTooltipText());
     this.focusSetter = useSetFocus()(this);
@@ -52,6 +51,7 @@ class Button extends LitElement {
     this.splitChild = false;
     this.type = "button";
     this.width = "auto";
+    useFormTrigger({ disabled: () => !!this.href })(this);
     useLabel(this);
   }
   static {

package/dist/components/calcite-color-picker/customElement.js

@@ -297,10 +297,11 @@ class ColorPicker extends LitElement {
       ArrowDown: { x: 0, y: 10 },
       ArrowLeft: { x: -10, y: 0 }
     };
-    if (arrowKeyToXYOffset[key]) {
+    const offset = arrowKeyToXYOffset[key];
+    if (offset) {
       event.preventDefault();
       this.scopeOrientation = key === "ArrowDown" || key === "ArrowUp" ? "vertical" : "horizontal";
-      this.captureColorFieldColor(this.colorFieldScopeLeft + arrowKeyToXYOffset[key].x || 0, this.colorFieldScopeTop + arrowKeyToXYOffset[key].y || 0, false);
+      this.captureColorFieldColor(this.colorFieldScopeLeft === void 0 ? 0 : this.colorFieldScopeLeft + offset.x, this.colorFieldScopeTop === void 0 ? 0 : this.colorFieldScopeTop + offset.y, false);
     }
   }
   handleHueScopeKeyDown(event) {
@@ -312,9 +313,10 @@ class ColorPicker extends LitElement {
       ArrowDown: -1,
       ArrowLeft: -1
     };
-    if (arrowKeyToXOffset[key]) {
+    const offset = arrowKeyToXOffset[key];
+    if (offset) {
       event.preventDefault();
-      const delta = arrowKeyToXOffset[key] * modifier;
+      const delta = offset * modifier;
       const hue = this.baseColorFieldColor.hue();
       const color = this.baseColorFieldColor.hue(hue + delta);
       this.internalColorSet(color, false);
@@ -342,7 +344,7 @@ class ColorPicker extends LitElement {
     const input = event.currentTarget;
     const channelIndex = Number(input.getAttribute("data-channel-index"));
     const isAlphaChannel = channelIndex === 3;
-    const limit = isAlphaChannel ? OPACITY_LIMITS.max : this.channelMode === "rgb" ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]] : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
+    const limit = isAlphaChannel ? OPACITY_LIMITS.max : this.channelMode === "rgb" ? Object.values(RGB_LIMITS)[channelIndex] : Object.values(HSV_LIMITS)[channelIndex];
     let inputValue;
     if (!input.value) {
       inputValue = "";
@@ -397,7 +399,7 @@ class ColorPicker extends LitElement {
     }
   }
   getChannelInputLimit(channelIndex) {
-    return this.channelMode === "rgb" ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]] : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
+    return this.channelMode === "rgb" ? Object.values(RGB_LIMITS)[channelIndex] : Object.values(HSV_LIMITS)[channelIndex];
   }
   handleChannelChange(event) {
     const input = event.currentTarget;
@@ -512,7 +514,7 @@ class ColorPicker extends LitElement {
       return normalizeHex(hexify(color.round(), hasAlpha), hasAlpha);
     }
     if (format.includes("-css")) {
-      const value = color[format.replace("-css", "").replace("a", "")]().round().string();
+      const value = (format.startsWith("rgb") ? color.rgb() : color.hsl()).round().string();
       const needToInjectAlpha = (format.endsWith("a") || format.endsWith("a-css")) && color.alpha() === 1;
       if (needToInjectAlpha) {
         const model = value.slice(0, 3);
@@ -521,14 +523,36 @@ class ColorPicker extends LitElement {
       }
       return value;
     }
-    const colorObject = (
+    const nonAlphaMode = toNonAlphaMode(format);
+    const roundedColor = (
       /* Color() does not support hsva, hsla nor rgba, so we use the non-alpha mode */
-      color[toNonAlphaMode(format)]().round().object()
+      (nonAlphaMode === "rgb" ? color.rgb() : nonAlphaMode === "hsl" ? color.hsl() : color.hsv()).round()
     );
+    const colorObject = roundedColor.object();
     if (format.endsWith("a")) {
       return normalizeAlpha(colorObject);
     }
-    return colorObject;
+    if (nonAlphaMode === "rgb") {
+      const { r, g, b } = colorObject;
+      return {
+        r,
+        g,
+        b
+      };
+    }
+    const { h, s } = colorObject;
+    if (nonAlphaMode === "hsl") {
+      return {
+        h,
+        s,
+        l: colorObject.l
+      };
+    }
+    return {
+      h,
+      s,
+      v: colorObject.v
+    };
   }
   getSliderCapSpacing() {
     const { staticDimensions: { slider: { height }, thumb: { radius } } } = this;
@@ -805,9 +829,10 @@ class ColorPicker extends LitElement {
       ArrowDown: -0.01,
       ArrowLeft: -0.01
     };
-    if (arrowKeyToXOffset[key]) {
+    const offset = arrowKeyToXOffset[key];
+    if (offset) {
       event.preventDefault();
-      const delta = arrowKeyToXOffset[key] * modifier;
+      const delta = offset * modifier;
       const alpha = this.baseColorFieldColor.alpha();
       const color = this.baseColorFieldColor.alpha(alpha + delta);
       this.internalColorSet(color, false);
@@ -821,7 +846,7 @@ class ColorPicker extends LitElement {
   }
   toChannels(color) {
     const { channelMode } = this;
-    const channels = color[channelMode]().round().array();
+    const channels = (channelMode === "rgb" ? color.rgb() : color.hsv()).round().array();
     if (channels.length === 3) {
       channels.push(1);
     }

package/dist/components/calcite-flow/customElement.js

@@ -3,19 +3,26 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
+import { x as whenAnimationDone, a as getSlotAssignedElements } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { x as whenAnimationDone } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 const CSS = {
   frame: "frame",
   frameAdvancing: "frame--advancing",
   frameRetreating: "frame--retreating"
 };
+const SELECTORS = {
+  item: "calcite-flow-item"
+};
 const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{position:relative;display:flex;inline-size:100%;flex:1 1 auto;align-items:stretch;overflow:hidden;background-color:transparent}:host .frame{position:relative;margin:0;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;padding:0;animation-name:none;animation-duration:var(--calcite-animation-timing);background-color:var(--calcite-flow-background-color)}:host ::slotted(*){display:none;block-size:100%}:host ::slotted(*[selected]){display:flex}:host .frame--advancing{animation-name:calcite-frame-advance}:host .frame--retreating{animation-name:calcite-frame-retreat}@keyframes calcite-frame-advance{0%{--tw-bg-opacity: .5;transform:translate3d(50px,0,0)}to{--tw-bg-opacity: 1;transform:translateZ(0)}}@keyframes calcite-frame-retreat{0%{--tw-bg-opacity: .5;transform:translate3d(-50px,0,0)}to{--tw-bg-opacity: 1;transform:translateZ(0)}}:host([hidden]){display:none}[hidden]{display:none}`;
+function getFlowItemSelectors(customItemSelectors) {
+  return customItemSelectors ? `${SELECTORS.item},${customItemSelectors}` : SELECTORS.item;
+}
 class Flow extends LitElement {
   constructor() {
     super();
     this.frameRef = createRef();
+    this.defaultSlotRef = createRef();
     this.itemMutationObserver = createObserver("mutation", () => this.updateItemsAndProps());
     this.items = [];
     this.selectedIndex = -1;
@@ -96,9 +103,9 @@ class Flow extends LitElement {
     return newSelectedIndex < oldSelectedIndex ? "retreating" : "advancing";
   }
   updateItemsAndProps() {
-    const { customItemSelectors, el } = this;
-    const newItems = Array.from(el.querySelectorAll(`calcite-flow-item${customItemSelectors ? `,${customItemSelectors}` : ""}`)).filter((flowItem) => flowItem.closest("calcite-flow") === el);
-    this.items = newItems;
+    const itemSelectors = getFlowItemSelectors(this.customItemSelectors);
+    const slottedItems = this.defaultSlotRef.value ? getSlotAssignedElements(this.defaultSlotRef.value, itemSelectors) : [];
+    this.items = slottedItems;
     this.ensureSelectedFlowItemExists();
     this.updateFlowProps();
   }
@@ -142,7 +149,7 @@ class Flow extends LitElement {
       [CSS.frameAdvancing]: flowDirection === "advancing",
       [CSS.frameRetreating]: flowDirection === "retreating"
     };
-    return html`<div class=${safeClassMap(frameDirectionClasses)} ${ref(this.frameRef)}><slot></slot></div>`;
+    return html`<div class=${safeClassMap(frameDirectionClasses)} ${ref(this.frameRef)}><slot @slotchange=${this.updateItemsAndProps} ${ref(this.defaultSlotRef)}></slot></div>`;
   }
 }
 customElement("calcite-flow", Flow);

package/dist/components/calcite-input-time-zone/customElement.js

@@ -157,14 +157,18 @@ async function createTimeZoneItems(locale, messages, mode, referenceDate, standa
   }).filter((group) => !!group).sort((groupA, groupB) => groupA.value - groupB.value);
 }
 function getTimeZoneLabel(timeZone, messages) {
-  return messages[timeZone] || getCity(timeZone);
+  return getMessage(messages, timeZone) || getCity(timeZone);
 }
 function getSelectedRegionTimeZoneLabel(city, country, messages) {
   const template = messages.timeZoneRegionLabel;
   return template.replace("{city}", city).replace("{country}", getMessageOrKeyFallback(messages, country));
 }
 function getMessageOrKeyFallback(messages, key) {
-  return messages[key] || key;
+  return getMessage(messages, key) || key;
+}
+function getMessage(messages, key) {
+  const message = messages[key];
+  return typeof message === "string" ? message : void 0;
 }
 function getCity(timeZone) {
   return timeZone.split("/").pop() ?? "";

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

@@ -17,6 +17,7 @@ import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
+import { isEqual } from "es-toolkit";
 const CSS = {
   container: "container",
   containerRange: "container--range",
@@ -66,7 +67,7 @@ class Slider extends LitElement {
       }
       this.removeDragListeners();
       this.focusActiveHandle(event.clientX);
-      if (this.dragProp && this.lastDragPropValue != this[this.dragProp]) {
+      if (this.dragProp && !isEqual(this.lastDragPropValue, this.getDragPropValue(this.dragProp))) {
         this.emitChange();
       }
       this.dragProp = void 0;
@@ -97,11 +98,11 @@ class Slider extends LitElement {
             this.maxValueDragRange = this.maxValue - value;
             this.minMaxValueRange = this.maxValue - this.minValue;
           }
-        } else if (isRange(this.value) && isRange(this.previousEmittedValue) && this.dragProp === "maxValue") {
+        } else if (isRange(this.value) && this.previousEmittedValue !== void 0 && isRange(this.previousEmittedValue) && this.dragProp === "maxValue") {
           const [previousEmittedMinValue, previousEmittedMaxValue] = this.previousEmittedValue;
           if (previousEmittedMinValue === previousEmittedMaxValue && value < previousEmittedMinValue) {
             this.dragProp = "minValue";
-            this.minHandle.focus();
+            this.minHandleRef.value.focus();
           } else {
             this.setValue({ [this.dragProp]: this.clamp(value, this.dragProp) });
           }
@@ -122,7 +123,21 @@ class Slider extends LitElement {
       inputType: "range"
     })(this);
     this.guid = IDS.host(guid());
+    this.maxHandleRef = createRef();
+    this.maxValueLabelRefs = {
+      label: createRef(),
+      static: createRef(),
+      transformed: createRef()
+    };
+    this.maxTickLabelRef = createRef();
     this.messages = useT9n({ blocking: true });
+    this.minHandleRef = createRef();
+    this.minValueLabelRefs = {
+      label: createRef(),
+      static: createRef(),
+      transformed: createRef()
+    };
+    this.minTickLabelRef = createRef();
     this.pointerUpDragEnd = (event) => {
       if (this.disabled || !isPrimaryPointerButton(event)) {
         return;
@@ -187,7 +202,7 @@ class Slider extends LitElement {
     this._value = Array.isArray(this._value) ? [this.minValue, this.maxValue] : defaultValue;
   }
   async setFocus(options) {
-    return this.focusSetter(() => this.minHandle || this.maxHandle, options);
+    return this.focusSetter(() => this.minHandleRef.value || this.maxHandleRef.value, options);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -213,6 +228,9 @@ class Slider extends LitElement {
     }
   }
   updated() {
+    if (!this.isConnected) {
+      return;
+    }
     if (this.labelHandles) {
       this.adjustHostObscuredHandleLabel("value");
       if (isRange(this.value)) {
@@ -287,9 +305,10 @@ class Slider extends LitElement {
         prop = closerToMax || position >= this.maxValue ? "maxValue" : "minValue";
       }
     }
-    this.lastDragPropValue = this[prop];
+    this.lastDragPropValue = this.getDragPropValue(prop);
     this.dragStart(prop);
-    const isThumbActive = this.el.shadowRoot.querySelector(`.${CSS.thumb}:active`);
+    const eventPath = event.composedPath();
+    const isThumbActive = [this.minHandleRef.value, this.maxHandleRef.value].some((handle) => handle && eventPath.includes(handle));
     if (!isThumbActive) {
       this.setValue({ [prop]: this.clamp(position, prop) });
     }
@@ -386,11 +405,14 @@ class Slider extends LitElement {
     window.addEventListener("pointerup", this.pointerUpDragEnd);
     window.addEventListener("pointercancel", this.dragEnd);
   }
+  getDragPropValue(prop) {
+    return prop === "minMaxValue" ? this.value : this[prop];
+  }
   focusActiveHandle(valueX) {
     if (this.dragProp === "minValue") {
-      this.minHandle.focus();
+      this.minHandleRef.value.focus();
     } else if (this.dragProp === "maxValue" || this.dragProp === "value") {
-      this.maxHandle.focus();
+      this.maxHandleRef.value.focus();
     } else if (this.dragProp === "minMaxValue") {
       this.getClosestHandle(valueX).focus();
     }
@@ -408,6 +430,9 @@ class Slider extends LitElement {
     let valueChanged = false;
     Object.keys(values).forEach((propName) => {
       const newValue = values[propName];
+      if (newValue === void 0) {
+        return;
+      }
       if (!valueChanged) {
         const oldValue = this[propName];
         valueChanged = oldValue !== newValue;
@@ -426,17 +451,6 @@ class Slider extends LitElement {
     }
     this.calciteSliderInput.emit();
   }
-  setThumbEl(el) {
-    if (!el) {
-      return;
-    }
-    const valueProp = el.getAttribute("data-value-prop");
-    if (valueProp === "minValue") {
-      this.minHandle = el;
-    } else {
-      this.maxHandle = el;
-    }
-  }
   clamp(value, prop) {
     value = clamp(value, this.min, this.max);
     if (prop === "maxValue") {
@@ -466,7 +480,9 @@ class Slider extends LitElement {
     return snappedValue;
   }
   getClosestHandle(valueX) {
-    return this.getDistanceX(this.maxHandle, valueX) > this.getDistanceX(this.minHandle, valueX) ? this.minHandle : this.maxHandle;
+    const minHandle = this.minHandleRef.value;
+    const maxHandle = this.maxHandleRef.value;
+    return this.getDistanceX(maxHandle, valueX) > this.getDistanceX(minHandle, valueX) ? minHandle : maxHandle;
   }
   getDistanceX(el, valueX) {
     return Math.abs(el.getBoundingClientRect().left - valueX);
@@ -480,27 +496,26 @@ class Slider extends LitElement {
     return (num - this.min) / range;
   }
   adjustHostObscuredHandleLabel(name) {
-    const shadowRoot = this.el.shadowRoot;
-    const label = shadowRoot.querySelector(`.handle__label--${name}`);
-    const labelStatic = shadowRoot.querySelector(`.handle__label--${name}.static`);
-    const labelTransformed = shadowRoot.querySelector(`.handle__label--${name}.transformed`);
+    const labelRefs = name === "minValue" ? this.minValueLabelRefs : this.maxValueLabelRefs;
+    const label = labelRefs.label.value;
+    const labelStatic = labelRefs.static.value;
+    const labelTransformed = labelRefs.transformed.value;
     const labelStaticBounds = labelStatic.getBoundingClientRect();
     const labelStaticOffset = this.getHostOffset(labelStaticBounds.left, labelStaticBounds.right);
     label.style.transform = `translateX(${labelStaticOffset}px)`;
     labelTransformed.style.transform = `translateX(${labelStaticOffset}px)`;
   }
   hyphenateCollidingRangeHandleLabels() {
-    const shadowRoot = this.el.shadowRoot;
     const mirror = this.shouldMirror();
-    const leftModifier = mirror ? "value" : "minValue";
-    const rightModifier = mirror ? "minValue" : "value";
-    const leftValueLabel = shadowRoot.querySelector(`.handle__label--${leftModifier}`);
-    const leftValueLabelStatic = shadowRoot.querySelector(`.handle__label--${leftModifier}.static`);
-    const leftValueLabelTransformed = shadowRoot.querySelector(`.handle__label--${leftModifier}.transformed`);
+    const leftValueLabelRefs = mirror ? this.maxValueLabelRefs : this.minValueLabelRefs;
+    const rightValueLabelRefs = mirror ? this.minValueLabelRefs : this.maxValueLabelRefs;
+    const leftValueLabel = leftValueLabelRefs.label.value;
+    const leftValueLabelStatic = leftValueLabelRefs.static.value;
+    const leftValueLabelTransformed = leftValueLabelRefs.transformed.value;
     const leftValueLabelStaticHostOffset = this.getHostOffset(leftValueLabelStatic.getBoundingClientRect().left, leftValueLabelStatic.getBoundingClientRect().right);
-    const rightValueLabel = shadowRoot.querySelector(`.handle__label--${rightModifier}`);
-    const rightValueLabelStatic = shadowRoot.querySelector(`.handle__label--${rightModifier}.static`);
-    const rightValueLabelTransformed = shadowRoot.querySelector(`.handle__label--${rightModifier}.transformed`);
+    const rightValueLabel = rightValueLabelRefs.label.value;
+    const rightValueLabelStatic = rightValueLabelRefs.static.value;
+    const rightValueLabelTransformed = rightValueLabelRefs.transformed.value;
     const rightValueLabelStaticHostOffset = this.getHostOffset(rightValueLabelStatic.getBoundingClientRect().left, rightValueLabelStatic.getBoundingClientRect().right);
     const labelFontSize = this.getFontSizeForElement(leftValueLabel);
     const labelTransformedOverlap = this.getRangeLabelOverlap(leftValueLabelTransformed, rightValueLabelTransformed);
@@ -564,11 +579,10 @@ class Slider extends LitElement {
     if (this.hasHistogram && !this.precise && !this.labelHandles) {
       return;
     }
-    const shadowRoot = this.el.shadowRoot;
-    const minHandle = shadowRoot.querySelector(`.${CSS.thumbMinValue}`);
-    const maxHandle = shadowRoot.querySelector(`.${CSS.thumbValue}`);
-    const minTickLabel = shadowRoot.querySelector(`.${CSS.tickMin}`);
-    const maxTickLabel = shadowRoot.querySelector(`.${CSS.tickMax}`);
+    const minHandle = this.minHandleRef.value;
+    const maxHandle = this.maxHandleRef.value;
+    const minTickLabel = this.minTickLabelRef.value;
+    const maxTickLabel = this.maxTickLabelRef.value;
     if (!minHandle && maxHandle && minTickLabel && maxTickLabel) {
       minTickLabel.style.opacity = this.isMinTickLabelObscured(minTickLabel, maxHandle) ? "0" : "1";
       maxTickLabel.style.opacity = this.isMaxTickLabelObscured(maxTickLabel, maxHandle) ? "0" : "1";
@@ -697,10 +711,11 @@ class Slider extends LitElement {
     const displayedValue = valueProp === "minValue" ? this.internalLabelFormatter(this.minValue, "min") : valueProp === "maxValue" ? this.internalLabelFormatter(this.maxValue, "max") : this.internalLabelFormatter(value, "value");
     const thumbStyle = isMinThumb ? { left: `${mirror ? 100 - minInterval : minInterval}%` } : { right: `${mirror ? maxInterval : 100 - maxInterval}%` };
     const thumbLabelClasses = `${CSS.handleLabel} ${isMinThumb ? CSS.handleLabelMinValue : CSS.handleLabelValue}`;
+    const labelRefs = isMinThumb ? this.minValueLabelRefs : this.maxValueLabelRefs;
     const labels = isLabeled ? [
-      html`<span aria-hidden=true class=${safeClassMap(thumbLabelClasses)}>${displayedValue}</span>`,
-      html`<span aria-hidden=true class=${`${thumbLabelClasses} ${CSS.static}`}>${displayedValue}</span>`,
-      html`<span aria-hidden=true class=${`${thumbLabelClasses} ${CSS.transformed}`}>${displayedValue}</span>`
+      html`<span aria-hidden=true class=${safeClassMap(thumbLabelClasses)} ${ref(labelRefs.label)}>${displayedValue}</span>`,
+      html`<span aria-hidden=true class=${`${thumbLabelClasses} ${CSS.static}`} ${ref(labelRefs.static)}>${displayedValue}</span>`,
+      html`<span aria-hidden=true class=${`${thumbLabelClasses} ${CSS.transformed}`} ${ref(labelRefs.transformed)}>${displayedValue}</span>`
     ] : [];
     const thumbContent = [
       ...labels,
@@ -716,7 +731,7 @@ class Slider extends LitElement {
       [CSS.thumbActive]: this.lastDragProp !== "minMaxValue" && this.dragProp === valueProp,
       [CSS.thumbPrecise]: isPrecise,
       [CSS.thumbMinValue]: isMinThumb
-    })} data-value-prop=${valueProp ?? nothing} @blur=${this.onThumbBlur} @focus=${this.onThumbFocus} @pointerdown=${this.onThumbPointerDown} role=slider style=${safeStyleMap(thumbStyle)} tabindex=0 ${ref(this.setThumbEl)}>${thumbContent}</div>`);
+    })} data-value-prop=${valueProp ?? nothing} @blur=${this.onThumbBlur} @focus=${this.onThumbFocus} @pointerdown=${this.onThumbPointerDown} role=slider style=${safeStyleMap(thumbStyle)} tabindex=0 ${ref(isMinThumb ? this.minHandleRef : this.maxHandleRef)}>${thumbContent}</div>`);
   }
   renderGraph() {
     return this.histogram ? html`<calcite-graph class=${safeClassMap(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}></calcite-graph>` : null;
@@ -728,11 +743,22 @@ class Slider extends LitElement {
     const isMaxTickLabel = tick === max;
     const isAtEdge = isMinTickLabel || isMaxTickLabel;
     const shouldDisplayLabel = labelTicks && (!hasHistogram && (isAtEdge || !precise || !valueIsRange) || hasHistogram && (isAtEdge || !precise && !labelHandles));
-    return shouldDisplayLabel ? html`<span class=${safeClassMap({
+    if (!shouldDisplayLabel) {
+      return null;
+    }
+    const tickLabelClasses = {
       [CSS.tickLabel]: true,
       [CSS.tickMin]: isMinTickLabel,
       [CSS.tickMax]: isMaxTickLabel
-    })}>${this.internalLabelFormatter(tick, "tick")}</span>` : null;
+    };
+    const tickLabel = this.internalLabelFormatter(tick, "tick");
+    if (isMinTickLabel) {
+      return html`<span class=${safeClassMap(tickLabelClasses)} ${ref(this.minTickLabelRef)}>${tickLabel}</span>`;
+    }
+    if (isMaxTickLabel) {
+      return html`<span class=${safeClassMap(tickLabelClasses)} ${ref(this.maxTickLabelRef)}>${tickLabel}</span>`;
+    }
+    return html`<span class=${safeClassMap(tickLabelClasses)}>${tickLabel}</span>`;
   }
 }
 customElement("calcite-slider", Slider);