@esri/calcite-components 5.2.0-next.7 → 5.2.0-next.70

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

@@ -5,17 +5,19 @@ 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 { g as guid } from "../../chunks/guid.js";
-import { j as isPrimaryPointerButton, z as intersects } from "../../chunks/dom.js";
+import { e 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 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,7 +53,7 @@ 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-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))}.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}:host([hidden]){display:none}[hidden]{display:none}`;
 function isRange(value) {
   return Array.isArray(value);
 }
@@ -65,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;
@@ -96,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) });
           }
@@ -121,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;
@@ -151,12 +167,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;
@@ -185,13 +202,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() {
@@ -212,6 +228,9 @@ class Slider extends LitElement {
     }
   }
   updated() {
+    if (!this.isConnected) {
+      return;
+    }
     if (this.labelHandles) {
       this.adjustHostObscuredHandleLabel("value");
       if (isRange(this.value)) {
@@ -225,7 +244,6 @@ class Slider extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    disconnectLabel(this);
     this.removeDragListeners();
   }
   setInitialValue() {
@@ -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";
@@ -625,10 +639,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
@@ -637,6 +654,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
@@ -656,11 +674,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") {
@@ -681,22 +699,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,
@@ -712,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;
@@ -724,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);

package/dist/components/calcite-sort-handle/customElement.d.ts

@@ -1,8 +1,8 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
-import type { MoveEventDetail, SortMenuItem, ReorderEventDetail, AddEventDetail } from "./interfaces.js";
+import type { MoveEventDetail, SortMenuItem, ReorderEventDetail, AddEventDetail } from "./types.js";
 
 export abstract class SortHandle extends LitElement {
   /** Defines the "Add to" items. */
@@ -14,20 +14,24 @@ export abstract class SortHandle extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[];
+  accessor flipPlacements: FlipPlacement[] | undefined;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
-  /** Overrides individual strings used by the component. */
+  accessor label: string | undefined;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      reorder?: string;
-      addTo?: string;
-      moveTo?: string;
-      moveToTop?: string;
-      moveToBottom?: string;
-      moveUp?: string;
-      moveDown?: string;
-      repositionLabel?: string;
-      reposition?: string;
+      reorder?: string | undefined;
+      addTo?: string | undefined;
+      moveTo?: string | undefined;
+      moveToTop?: string | undefined;
+      moveToBottom?: string | undefined;
+      moveUp?: string | undefined;
+      moveDown?: string | undefined;
+      repositionLabel?: string | undefined;
+      reposition?: string | undefined;
   };
   /** Defines the "Move to" items. */
   accessor moveToItems: SortMenuItem[];
@@ -38,11 +42,11 @@ export abstract class SortHandle extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */
@@ -60,9 +64,9 @@ export abstract class SortHandle extends LitElement {
    */
   accessor scale: Scale;
   /** Specifies the handle's current position. */
-  accessor setPosition: number;
+  accessor setPosition: number | undefined;
   /** Specifies the total number of sortable items. */
-  accessor setSize: number;
+  accessor setSize: number | undefined;
   /**
    * When `true`, prevents sorting of items.
    *
@@ -77,7 +81,7 @@ export abstract class SortHandle extends LitElement {
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the width of the component. */
-  accessor widthScale: Scale;
+  accessor widthScale: Scale | undefined;
   /**
    * Sets focus on the component.
    *

package/dist/components/calcite-sort-handle/customElement.js

@@ -4,7 +4,7 @@ import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { d as defaultMenuPlacement } from "../../chunks/floating-ui.js";
+import { a as defaultMenuPlacement } from "../../chunks/floating-ui.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
@@ -95,11 +95,11 @@ class SortHandle extends LitElement {
     return this.setPosition === 1;
   }
   get isDownReorderDisabled() {
-    return this.setPosition === this.setSize;
+    return this.hasSetInfo && this.setPosition === this.setSize;
   }
   get isBottomReorderDisabled() {
     const { setPosition, setSize } = this;
-    return setPosition === setSize || setPosition === setSize - 1;
+    return this.hasSetInfo && (setPosition === setSize || setPosition === setSize - 1);
   }
   async setFocus(options) {
     return this.focusSetter(() => this.dropdownEl, options);

package/dist/components/calcite-sortable-list/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Layout } from "../interfaces.js";
+import type { Layout } from "../types.js";
 import type { DragDetail } from "../../controllers/useSortable.js";
 
 /**
@@ -9,9 +9,9 @@ import type { DragDetail } from "../../controllers/useSortable.js";
  */
 export abstract class SortableList extends LitElement {
   /** When provided, the method will be called to determine whether the element can move from the list. */
-  accessor canPull: (detail: DragDetail) => boolean;
+  accessor canPull: ((detail: DragDetail) => boolean) | undefined;
   /** When provided, the method will be called to determine whether the element can be added from another list. */
-  accessor canPut: (detail: DragDetail) => boolean;
+  accessor canPut: ((detail: DragDetail) => boolean) | undefined;
   /**
    * When `true`, disabled prevents interaction. This state shows items with lower opacity/grayed.
    *

package/dist/components/calcite-sortable-list/customElement.js

@@ -1,10 +1,9 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { l as logger, c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { c as createObserver } from "../../chunks/observers.js";
-import { i as focusElement } from "../../chunks/dom.js";
-import { l as logger } from "../../chunks/logger.js";
+import { f as focusElement } from "../../chunks/dom.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useSortable } from "../../chunks/useSortable.js";
 const CSS = {
@@ -74,10 +73,10 @@ class SortableList extends LitElement {
     const { direction } = event.detail;
     const handle = event.composedPath().find((el) => el.matches(this.handleSelector));
     const sortItem = this.items.find((item) => {
-      return item.contains(handle) || event.composedPath().includes(item);
+      return handle && item.contains(handle) || event.composedPath().includes(item);
     });
     const lastIndex = this.items.length - 1;
-    const startingIndex = this.items.indexOf(sortItem);
+    const startingIndex = sortItem ? this.items.indexOf(sortItem) : -1;
     let appendInstead = false;
     let buddyIndex;
     if (direction === "up") {
@@ -104,7 +103,7 @@ class SortableList extends LitElement {
     this.items = Array.from(this.el.children);
     this.beginObserving();
     requestAnimationFrame(() => focusElement(handle));
-    if ("selected" in handle) {
+    if (handle && "selected" in handle) {
       handle.selected = true;
     }
   }

package/dist/components/calcite-split-button/customElement.d.ts

@@ -1,9 +1,9 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
-import type { DropdownIconType } from "../calcite-button/interfaces.js";
-import type { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { DropdownIconType } from "../calcite-button/types.js";
+import type { Appearance, FlipContext, Kind, Scale, Width } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
 /**
  * @cssproperty [--calcite-split-button-background-color] - Specifies the component's background color.
@@ -70,11 +70,11 @@ export abstract class SplitButton extends LitElement {
    */
   accessor loading: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */
@@ -121,7 +121,9 @@ export abstract class SplitButton extends LitElement {
    */
   accessor topLayerDisabled: boolean;
   /**
-   * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
+   * Specifies the width of the component.
+   *
+   * [Deprecated] The `"half"` value is deprecated in v3.0.0, removal target v6.0.0 - use `"full"` instead.
    *
    * @default "auto"
    */