@esri/calcite-components 5.2.0-next.1 → 5.2.0-next.100

package/dist/components/calcite-slider/customElement.d.ts

@@ -1,23 +1,36 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { NumberingSystem } from "../../utils/locale.js";
-import type { ColorStop, DataSeries } from "../calcite-graph/interfaces.js";
-import type { Scale, Status } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { ColorStop, DataSeries } from "../calcite-graph/types.js";
+import type { Scale, Status } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
-/**
- * @cssproperty [--calcite-slider-text-color] - Specifies the component's text color.
- * @cssproperty [--calcite-slider-track-color] - Specifies the component's track color.
- * @cssproperty [--calcite-slider-track-fill-color] - Specifies the component's track fill color.
- * @cssproperty [--calcite-slider-handle-fill-color] - Specifies the component's handle fill color.
- * @cssproperty [--calcite-slider-handle-extension-color] - Specifies the component's handle extension color.
- * @cssproperty [--calcite-slider-accent-color] - Specifies the component's accent color.
- * @cssproperty [--calcite-slider-tick-color] - Specifies the component's tick color.
- * @cssproperty [--calcite-slider-tick-border-color] - Specifies the component's tick border color.
- * @cssproperty [--calcite-slider-tick-selected-color] - Specifies the component's tick color when in selected range.
- * @cssproperty [--calcite-slider-graph-color] - Specifies the component's graph color.
- * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's text color. */
+  "--calcite-slider-text-color": "*";
+  /** Specifies the component's track color. */
+  "--calcite-slider-track-color": "*";
+  /** Specifies the component's track fill color. */
+  "--calcite-slider-track-fill-color": "*";
+  /** Specifies the component's handle fill color. */
+  "--calcite-slider-handle-fill-color": "*";
+  /** Specifies the component's handle extension color. */
+  "--calcite-slider-handle-extension-color": "*";
+  /** Specifies the component's accent color. */
+  "--calcite-slider-accent-color": "*";
+  /** Specifies the component's tick color. */
+  "--calcite-slider-tick-color": "*";
+  /** Specifies the component's tick border color. */
+  "--calcite-slider-tick-border-color": "*";
+  /** Specifies the component's tick color when in selected range. */
+  "--calcite-slider-tick-selected-color": "*";
+  /** Specifies the component's graph color. */
+  "--calcite-slider-graph-color": "*";
+}
+}
+
+/** @slot [label-content] - A slot for rendering content next to the component's `labelText`. */
 export abstract class Slider extends LitElement {
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
@@ -33,12 +46,8 @@ export abstract class Slider extends LitElement {
    * @default "start"
    */
   accessor fillPlacement: "start" | "none" | "end";
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
-  accessor form: string;
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
+  accessor form: string | undefined;
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    *
@@ -54,11 +63,13 @@ export abstract class Slider extends LitElement {
   /**
    * Specifies a list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track.
    *
-   * @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/dev/packages/components/src/components/graph/interfaces.ts#L5).
+   * @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/dev/packages/components/src/components/graph/types.ts#L5).
    */
-  accessor histogram: DataSeries;
+  accessor histogram: DataSeries | undefined;
   /** Specifies a list of single color stops for a histogram, sorted by offset in ascending order. */
-  accessor histogramStops: ColorStop[];
+  accessor histogramStops: ColorStop[] | undefined;
+  /** Specifies an accessible label for the component. */
+  accessor label: string | undefined;
   /** When specified, allows users to customize handle labels. */
   accessor labelFormatter: (value: number, type: "value" | "min" | "max" | "tick", defaultFormatter: (value: number) => string) => string | undefined;
   /**
@@ -68,7 +79,7 @@ export abstract class Slider extends LitElement {
    */
   accessor labelHandles: boolean;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * When `true` and `ticks` is specified, displays label tick marks with their numeric value.
    *
@@ -82,11 +93,15 @@ export abstract class Slider extends LitElement {
    */
   accessor max: number;
   /** When `minValue` and `maxValue` are specified for multiple values, specifies the accessible name for the `maxValue` handle, such as `"Temperature, upper bound"`. */
-  accessor maxLabel: string;
+  accessor maxLabel: string | undefined;
   /** For multiple values, specifies the component's upper value. */
   accessor maxValue: number;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { required?: string; };
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { required?: string | undefined; };
   /**
    * Specifies the component's minimum selectable value.
    *
@@ -94,7 +109,7 @@ export abstract class Slider extends LitElement {
    */
   accessor min: number;
   /** Specifies the accessible name associated with the `value` handle (for single values) or `minValue` handle (for multiple values). For instance, `"Temperature, lower bound"`. */
-  accessor minLabel: string;
+  accessor minLabel: string | undefined;
   /** For multiple values, the component's lower value. */
   accessor minValue: number;
   /**
@@ -108,13 +123,13 @@ export abstract class Slider extends LitElement {
   /**
    * Specifies the name of the component.
    *
-   * Required to pass the component's `value` on form submission
+   * Required to pass the component's `value` on form submission.
    */
-  accessor name: string;
+  accessor name: string | undefined;
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /** Specifies the interval to move with the `Page up` or `Page down` keys. */
-  accessor pageStep: number;
+  accessor pageStep: number | undefined;
   /**
    * When `true`, sets a finer point for handles.
    *
@@ -153,11 +168,11 @@ export abstract class Slider extends LitElement {
    */
   accessor step: number;
   /** Specifies the interval between tick marks on the number line. */
-  accessor ticks: number;
+  accessor ticks: number | undefined;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean;
+  accessor validationIcon: IconName | boolean | undefined;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * The component's current validation state.
    *

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

@@ -4,18 +4,21 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, stringOrBoolean, setAttribute, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { g as guid } from "../../chunks/guid.js";
-import { j as isPrimaryPointerButton, z as intersects } from "../../chunks/dom.js";
+import { h as isPrimaryPointerButton, B as intersects } from "../../chunks/dom.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { i as isActivationKey } from "../../chunks/key.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { n as numberStringFormatter, B as BigDecimal } from "../../chunks/locale.js";
 import { d as decimalPlaces, c as clamp } from "../../chunks/math.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.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",
@@ -51,28 +54,30 @@ const IDS = {
   host: (id) => `${idPrefix}-${id}`
 };
 const maxTickElementThreshold = 250;
-const styles = css`@charset "UTF-8";:host([disabled]){cursor:default;-webkit-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: var(--calcite-space-sm-plus);--calcite-slider-handle-extension-height: .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: .875rem;--calcite-slider-handle-extension-height: .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: .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-slider-text-color, var(--calcite-color-text-2));font-size:var(--calcite-slider-container-font-size)}:host{display:block}:host .validation-container{padding-block-start:0!important}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * .5);padding-block:calc(var(--calcite-slider-handle-size) * .5);margin-block:calc(var(--calcite-slider-handle-size) * .5);margin-inline:0;--calcite-slider-full-handle-height: calc( var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height) );touch-action:none;-webkit-user-select:none;user-select: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: -.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset: -.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset: -.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) * .5);position:absolute;margin:0;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0;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{white-space:nowrap}.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;outline-color:transparent;background-color:var(--calcite-slider-handle-fill-color, var(--calcite-color-foreground-1));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:.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-slider-handle-extension-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-slider-accent-color, var(--calcite-color-brand))}.thumb:focus .handle{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.thumb:focus .handle-extension{background-color:var(--calcite-slider-accent-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: -.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:.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:.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-slider-accent-color, var(--calcite-color-brand));box-shadow:0 0 8px #00000029}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-slider-accent-color, var(--calcite-color-brand))}.track{position:relative;block-size:.125rem;border-radius:0;background-color:var(--calcite-slider-track-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:.125rem;background-color:var(--calcite-slider-track-fill-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) * .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:.25rem;inline-size:.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-slider-tick-color, var(--calcite-color-border-input));border-color:var(--calcite-slider-tick-border-color, var(--calcite-color-foreground-1));inset-block-start:-2px;pointer-events:none;margin-inline-start:-.125rem}.tick--active{background-color:var(--calcite-slider-tick-selected-color, var(--calcite-color-brand))}.tick__label{pointer-events:none;margin-block-start:.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-slider-graph-color, var(--calcite-color-foreground-3));block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(.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) * .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)}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::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 styles = css`@charset "UTF-8";:host([disabled]){cursor:default;-webkit-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: var(--calcite-space-sm-plus);--calcite-slider-handle-extension-height: .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: .875rem;--calcite-slider-handle-extension-height: .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: .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-slider-text-color, var(--calcite-color-text-2));font-size:var(--calcite-slider-container-font-size)}:host{display:block}:host .validation-container{padding-block-start:0!important}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * .5);padding-block:calc(var(--calcite-slider-handle-size) * .5);margin-block:calc(var(--calcite-slider-handle-size) * .5);margin-inline:0;--calcite-slider-full-handle-height: calc( var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height) );touch-action:none;-webkit-user-select:none;user-select: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: -.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset: -.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset: -.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) * .5);position:absolute;margin:0;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0;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{white-space:nowrap}.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;outline-color:transparent;background-color:var(--calcite-slider-handle-fill-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)));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:.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-slider-handle-extension-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-slider-accent-color, var(--calcite-color-brand))}.thumb:focus .handle{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.thumb:focus .handle-extension{background-color:var(--calcite-slider-accent-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: -.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:.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:.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-slider-accent-color, var(--calcite-color-brand));box-shadow:0 0 8px #00000029}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-slider-accent-color, var(--calcite-color-brand))}.track{position:relative;block-size:.125rem;background-color:var(--calcite-slider-track-color, var(--calcite-color-border-2));transition:all var(--calcite-internal-animation-timing-medium) ease-in;border-radius:var(--calcite-corner-radius)}.track__range{position:absolute;inset-block-start:0px;block-size:.125rem;background-color:var(--calcite-slider-track-fill-color, var(--calcite-color-brand));border-radius:var(--calcite-corner-radius)}.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) * .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:.25rem;inline-size:.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-slider-tick-color, var(--calcite-color-border-input));border-color:var(--calcite-slider-tick-border-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)));inset-block-start:-2px;pointer-events:none;margin-inline-start:-.125rem}.tick--active{background-color:var(--calcite-slider-tick-selected-color, var(--calcite-color-brand))}.tick__label{pointer-events:none;margin-block-start:.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-slider-graph-color, var(--calcite-theme-color-surface-4, var(--calcite-color-foreground-3)));block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(.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) * .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)}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-theme-space-base, var(--calcite-spacing-base))}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-theme-space-md, var(--calcite-spacing-md))}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-theme-space-md, var(--calcite-spacing-md))}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}:host([hidden]){display:none}[hidden]{display:none}`;
 function isRange(value) {
   return Array.isArray(value);
 }
 const defaultValue = 0;
+const leftToRightMark = "‎";
 class Slider extends LitElement {
   constructor() {
     super();
+    this.direction = useDirection();
     this.dragEnd = (event) => {
       if (this.disabled) {
         return;
       }
       this.removeDragListeners();
       this.focusActiveHandle(event.clientX);
-      if (this.lastDragPropValue != this[this.dragProp]) {
+      if (this.dragProp && !isEqual(this.lastDragPropValue, this.getDragPropValue(this.dragProp))) {
         this.emitChange();
       }
-      this.dragProp = null;
-      this.lastDragPropValue = null;
-      this.minValueDragRange = null;
-      this.maxValueDragRange = null;
-      this.minMaxValueRange = null;
+      this.dragProp = void 0;
+      this.lastDragPropValue = void 0;
+      this.minValueDragRange = void 0;
+      this.maxValueDragRange = void 0;
+      this.minMaxValueRange = void 0;
     };
     this.dragUpdate = (event) => {
       if (this.disabled || !this.trackRef.value) {
@@ -96,11 +101,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) });
           }
@@ -115,13 +120,28 @@ class Slider extends LitElement {
         numberingSystem: this.numberingSystem,
         useGrouping: this.groupSeparator
       };
-      return numberStringFormatter.localize(value.toString());
+      const formattedValue = numberStringFormatter.localize(value.toString(), true);
+      return this.direction === "rtl" && formattedValue.startsWith(numberStringFormatter.minusSign) ? `${leftToRightMark}${formattedValue}` : formattedValue;
     };
     this.formSupport = useForm({
       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;
@@ -129,13 +149,10 @@ class Slider extends LitElement {
       this.dragEnd(event);
     };
     this.trackRef = createRef();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this._value = defaultValue;
     this.activeProp = "value";
-    this.maxValueDragRange = null;
-    this.minMaxValueRange = null;
-    this.minValueDragRange = null;
     this.tickValues = [];
     this.disabled = false;
     this.fillPlacement = "start";
@@ -154,12 +171,13 @@ class Slider extends LitElement {
     this.step = 1;
     this.calciteSliderChange = createEvent({ cancelable: false });
     this.calciteSliderInput = createEvent({ cancelable: false });
+    useLabel(this);
     this.listen("pointerdown", this.pointerDownHandler);
     this.listen("keydown", this.handleKeyDown);
     this.listen("touchstart", this.handleTouchStart);
   }
   static {
-    this.properties = { activeProp: [16, {}, { state: true }], maxValueDragRange: [16, {}, { state: true }], minMaxValueRange: [16, {}, { state: true }], minValueDragRange: [16, {}, { state: true }], tickValues: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }], fillPlacement: [3, {}, { reflect: true }], form: [3, {}, { reflect: true }], groupSeparator: [7, {}, { reflect: true, type: Boolean }], hasHistogram: [7, {}, { reflect: true, type: Boolean }], histogram: [0, {}, { attribute: false }], histogramStops: [0, {}, { attribute: false }], labelFormatter: [0, {}, { attribute: false }], labelHandles: [7, {}, { reflect: true, type: Boolean }], labelTicks: [7, {}, { reflect: true, type: Boolean }], max: [11, {}, { reflect: true, type: Number }], maxLabel: 1, maxValue: [9, {}, { type: Number }], min: [11, {}, { reflect: true, type: Number }], minLabel: 1, labelText: 1, messageOverrides: [0, {}, { attribute: false }], minValue: [9, {}, { type: Number }], mirrored: [7, {}, { reflect: true, type: Boolean }], name: [3, {}, { reflect: true }], numberingSystem: 1, pageStep: [11, {}, { reflect: true, type: Number }], precise: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], snap: [7, {}, { reflect: true, type: Boolean }], status: [3, {}, { reflect: true }], step: [11, {}, { reflect: true, type: Number }], ticks: [11, {}, { reflect: true, type: Number }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: [11, {}, { reflect: true, type: Number }] };
+    this.properties = { activeProp: [16, {}, { state: true }], maxValueDragRange: [16, {}, { state: true }], minMaxValueRange: [16, {}, { state: true }], minValueDragRange: [16, {}, { state: true }], tickValues: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }], fillPlacement: [3, {}, { reflect: true }], form: [3, {}, { reflect: true }], groupSeparator: [7, {}, { reflect: true, type: Boolean }], hasHistogram: [7, {}, { reflect: true, type: Boolean }], histogram: [0, {}, { attribute: false }], histogramStops: [0, {}, { attribute: false }], label: 1, labelFormatter: [0, {}, { attribute: false }], labelHandles: [7, {}, { reflect: true, type: Boolean }], labelTicks: [7, {}, { reflect: true, type: Boolean }], max: [11, {}, { reflect: true, type: Number }], maxLabel: 1, maxValue: [9, {}, { type: Number }], min: [11, {}, { reflect: true, type: Number }], minLabel: 1, labelText: 1, messageOverrides: [0, {}, { attribute: false }], minValue: [9, {}, { type: Number }], mirrored: [7, {}, { reflect: true, type: Boolean }], name: [3, {}, { reflect: true }], numberingSystem: 1, pageStep: [11, {}, { reflect: true, type: Number }], precise: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], snap: [7, {}, { reflect: true, type: Boolean }], status: [3, {}, { reflect: true }], step: [11, {}, { reflect: true, type: Number }], ticks: [11, {}, { reflect: true, type: Number }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: [11, {}, { reflect: true, type: Number }] };
   }
   static {
     this.formAssociated = true;
@@ -188,13 +206,12 @@ 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();
     this.setMinMaxFromValue();
     this.setValueFromMinMax();
-    connectLabel(this);
     this.previousEmittedValue = this.value;
   }
   load() {
@@ -215,6 +232,9 @@ class Slider extends LitElement {
     }
   }
   updated() {
+    if (!this.isConnected) {
+      return;
+    }
     if (this.labelHandles) {
       this.adjustHostObscuredHandleLabel("value");
       if (isRange(this.value)) {
@@ -228,7 +248,6 @@ class Slider extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    disconnectLabel(this);
     this.removeDragListeners();
   }
   setInitialValue() {
@@ -245,7 +264,7 @@ class Slider extends LitElement {
       event.preventDefault();
       return;
     }
-    let adjustment;
+    let adjustment = NaN;
     if (key === "ArrowUp" || key === "ArrowRight") {
       const directionFactor = mirror && key === "ArrowRight" ? -1 : 1;
       adjustment = value + step * directionFactor;
@@ -290,9 +309,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) });
     }
@@ -362,7 +382,7 @@ class Slider extends LitElement {
     return ticks;
   }
   onThumbBlur() {
-    this.activeProp = null;
+    this.activeProp = void 0;
   }
   onThumbFocus(event) {
     const thumb = event.currentTarget;
@@ -389,11 +409,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,9 +431,12 @@ class Slider extends LitElement {
     window.removeEventListener("pointercancel", this.dragEnd);
   }
   setValue(values) {
-    let valueChanged;
+    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;
@@ -429,17 +455,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") {
@@ -469,7 +484,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);
@@ -483,26 +500,26 @@ class Slider extends LitElement {
     return (num - this.min) / range;
   }
   adjustHostObscuredHandleLabel(name) {
-    const label = this.el.shadowRoot.querySelector(`.handle__label--${name}`);
-    const labelStatic = this.el.shadowRoot.querySelector(`.handle__label--${name}.static`);
-    const labelTransformed = this.el.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;
     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);
@@ -566,10 +583,10 @@ class Slider extends LitElement {
     if (this.hasHistogram && !this.precise && !this.labelHandles) {
       return;
     }
-    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}`);
+    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";
@@ -626,10 +643,13 @@ class Slider extends LitElement {
     const maxInterval = this.getUnitInterval(value) * 100;
     const mirror = this.shouldMirror();
     const valueIsRange = isRange(this.value);
+    const containerAriaLabel = getLabelText(this);
+    const useGroupRole = valueIsRange && !!containerAriaLabel;
     const thumbTypes = this.buildThumbType("max");
     const thumb = this.renderThumb({
       type: thumbTypes,
       thumbPlacement: thumbTypes.includes("histogram") ? "below" : "above",
+      labelFallback: containerAriaLabel,
       maxInterval,
       minInterval,
       mirror
@@ -638,6 +658,7 @@ class Slider extends LitElement {
     const minThumb = valueIsRange ? this.renderThumb({
       type: minThumbTypes,
       thumbPlacement: minThumbTypes.includes("histogram") || minThumbTypes.includes("precise") ? "below" : "above",
+      labelFallback: containerAriaLabel,
       maxInterval,
       minInterval,
       mirror
@@ -657,11 +678,11 @@ class Slider extends LitElement {
       }
     );
     setAttribute(this.el, "id", id);
-    return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} .ariaRequired=${this.required} class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${containerAriaLabel} .ariaRequired=${this.required} class=${safeClassMap({
       [CSS.container]: true,
       [CSS.containerRange]: valueIsRange,
       [CSS.scale(this.scale)]: true
-    })}>${this.renderGraph()}<div class=${safeClassMap(CSS.track)} ${ref(this.trackRef)}><div class=${safeClassMap(CSS.trackRange)} @pointerdown=${this.onTrackPointerDown} style=${safeStyleMap(trackRangePlacementStyles)}></div><div class=${safeClassMap(CSS.ticks)}>${this.tickValues.map((tick) => {
+    })} .role=${useGroupRole ? "group" : void 0}>${this.renderGraph()}<div class=${safeClassMap(CSS.track)} ${ref(this.trackRef)}><div class=${safeClassMap(CSS.trackRange)} @pointerdown=${this.onTrackPointerDown} style=${safeStyleMap(trackRangePlacementStyles)}></div><div class=${safeClassMap(CSS.ticks)}>${this.tickValues.map((tick) => {
       const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
       let activeTicks = false;
       if (fillPlacement === "start" || fillPlacement === "end") {
@@ -682,22 +703,23 @@ class Slider extends LitElement {
       })}>${this.renderTickLabel(tick)}</span>`;
     })}</div></div><div class=${safeClassMap(CSS.thumbContainer)}>${minThumb}${thumb}</div></div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
-  renderThumb({ type, mirror, thumbPlacement, minInterval, maxInterval }) {
+  renderThumb({ type, mirror, thumbPlacement, minInterval, maxInterval, labelFallback }) {
     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 ariaLabel = isMinThumb ? this.minLabel || labelFallback : valueIsRange ? this.maxLabel || labelFallback : this.minLabel || labelFallback;
     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 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,
@@ -713,7 +735,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;
@@ -725,11 +747,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);