@esri/calcite-components 5.1.0-next.4 → 5.1.0-next.40

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

@@ -5,10 +5,9 @@ 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 { k as isPrimaryPointerButton, x as intersects } from "../../chunks/dom.js";
+import { j as isPrimaryPointerButton, z as intersects } from "../../chunks/dom.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
-import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { n as numberStringFormatter, B as BigDecimal } from "../../chunks/locale.js";
@@ -16,6 +15,7 @@ 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";
 const CSS = {
   container: "container",
   containerRange: "container--range",
@@ -51,7 +51,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: .625rem;--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;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}`;
 function isRange(value) {
   return Array.isArray(value);
 }
@@ -117,8 +117,11 @@ class Slider extends LitElement {
       };
       return numberStringFormatter.localize(value.toString());
     };
+    this.formSupport = useForm({
+      inputType: "range"
+    })(this);
     this.guid = IDS.host(guid());
-    this.messages = useT9n();
+    this.messages = useT9n({ blocking: true });
     this.pointerUpDragEnd = (event) => {
       if (this.disabled || !isPrimaryPointerButton(event)) {
         return;
@@ -149,19 +152,6 @@ class Slider extends LitElement {
     this.snap = false;
     this.status = "idle";
     this.step = 1;
-    this.validity = {
-      valid: false,
-      badInput: false,
-      customError: false,
-      patternMismatch: false,
-      rangeOverflow: false,
-      rangeUnderflow: false,
-      stepMismatch: false,
-      tooLong: false,
-      tooShort: false,
-      typeMismatch: false,
-      valueMissing: false
-    };
     this.calciteSliderChange = createEvent({ cancelable: false });
     this.calciteSliderInput = createEvent({ cancelable: false });
     this.listen("pointerdown", this.pointerDownHandler);
@@ -169,7 +159,10 @@ class Slider extends LitElement {
     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: [0, {}, { 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 }], 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 }] };
+  }
+  static {
+    this.formAssociated = true;
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -202,12 +195,10 @@ class Slider extends LitElement {
     this.setMinMaxFromValue();
     this.setValueFromMinMax();
     connectLabel(this);
-    connectForm(this);
     this.previousEmittedValue = this.value;
   }
   load() {
     this.setInitialValue();
-    afterConnectDefaultValueSet(this, this.value);
   }
   willUpdate(changes) {
     if (changes.has("histogram")) {
@@ -238,7 +229,6 @@ class Slider extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
     this.removeDragListeners();
   }
   setInitialValue() {
@@ -690,7 +680,7 @@ class Slider extends LitElement {
         left: mirror ? "" : tickOffset,
         right: mirror ? tickOffset : ""
       })}>${this.renderTickLabel(tick)}</span>`;
-    })}</div></div><div class=${safeClassMap(CSS.thumbContainer)}>${minThumb}${thumb}${HiddenFormInputSlot({ component: this })}</div></div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })}</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 }) {
     const isLabeled = type.includes("labeled");

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

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Scale } from "../interfaces.js";
-import type { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
+import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
 import type { MoveEventDetail, SortMenuItem, ReorderEventDetail, AddEventDetail } from "./interfaces.js";
 
 export abstract class SortHandle extends LitElement {
@@ -52,7 +52,7 @@ export abstract class SortHandle extends LitElement {
    *
    * @default "bottom-start"
    */
-  accessor placement: MenuPlacement;
+  accessor placement: LogicalPlacement;
   /**
    * Specifies the size of the component.
    *
@@ -75,7 +75,7 @@ export abstract class SortHandle extends LitElement {
    * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
-   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the width of the component. */
@@ -84,7 +84,7 @@ export abstract class SortHandle extends LitElement {
    * Sets focus on the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when an add item has been selected. */

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

@@ -64,13 +64,42 @@ class SortHandle extends LitElement {
     return typeof this.setPosition === "number" && typeof this.setSize === "number";
   }
   get hasValidSetInfo() {
-    return this.hasSetInfo ? this.setPosition > 0 && this.setSize > 1 : true;
+    return this.hasSetInfo ? this.setPosition > 0 && this.setPosition <= this.setSize && this.setSize > 0 : true;
   }
   get hasReorderItems() {
     return !this.sortDisabled && this.hasValidSetInfo;
   }
+  get hasMoveToItems() {
+    return this.moveToItems.length > 0;
+  }
+  get hasAddToItems() {
+    return this.addToItems.length > 0;
+  }
+  get reorderGroupTitle() {
+    return this.hasMoveToItems || this.hasAddToItems ? this.messages.reorder : "";
+  }
   get hasNoItems() {
-    return !this.hasReorderItems && this.moveToItems.length < 1 && this.addToItems.length < 1;
+    return !this.hasReorderItems && !this.hasMoveToItems && !this.hasAddToItems;
+  }
+  get hasAllReorderItemsDisabled() {
+    return this.hasReorderItems && this.isTopReorderDisabled && this.isUpReorderDisabled && this.isDownReorderDisabled && this.isBottomReorderDisabled;
+  }
+  get hasOnlyDisabledReorderItems() {
+    return this.hasReorderItems && !this.hasMoveToItems && !this.hasAddToItems && this.hasAllReorderItemsDisabled;
+  }
+  get isTopReorderDisabled() {
+    const { setPosition } = this;
+    return setPosition === 1 || setPosition === 2;
+  }
+  get isUpReorderDisabled() {
+    return this.setPosition === 1;
+  }
+  get isDownReorderDisabled() {
+    return this.setPosition === this.setSize;
+  }
+  get isBottomReorderDisabled() {
+    const { setPosition, setSize } = this;
+    return setPosition === setSize || setPosition === setSize - 1;
   }
   async setFocus(options) {
     return this.focusSetter(() => this.dropdownEl, options);
@@ -139,9 +168,9 @@ class SortHandle extends LitElement {
     this.calciteSortHandleAdd.emit({ addTo });
   }
   render() {
-    const { disabled, flipPlacements, open, overlayPositioning, placement, scale, widthScale, hasNoItems } = this;
+    const { disabled, flipPlacements, hasOnlyDisabledReorderItems, open, overlayPositioning, placement, scale, widthScale, hasNoItems } = this;
     const text = this.getLabel();
-    const isDisabled = disabled || hasNoItems;
+    const isDisabled = disabled || hasNoItems || hasOnlyDisabledReorderItems;
     return this.interactiveContainer({ disabled, children: html`<calcite-dropdown class=${safeClassMap(CSS.dropdown)} .disabled=${isDisabled} .flipPlacements=${flipPlacements} @calciteDropdownBeforeClose=${this.handleBeforeClose} @calciteDropdownBeforeOpen=${this.handleBeforeOpen} @calciteDropdownClose=${this.handleClose} @calciteDropdownOpen=${this.handleOpen} .overlayPositioning=${overlayPositioning} .placement=${placement} .scale=${scale} .topLayerDisabled=${this.topLayerDisabled} .widthScale=${widthScale} ${ref(this.setDropdownEl)}><calcite-action .active=${open} .aria=${{ expanded: open }} class=${safeClassMap(CSS.handle)} .dragHandle=${true} .icon=${disabled ? ICONS.blank : ICONS.drag} .label=${text} .scale=${scale} slot=${SLOTS.trigger} .text=${text} title=${text ?? nothing}></calcite-action>${this.renderReorderGroup()}${this.renderMoveToGroup()}${this.renderAddToGroup()}</calcite-dropdown>` });
   }
   renderAddToItem(addToItem) {
@@ -151,32 +180,30 @@ class SortHandle extends LitElement {
     return keyed(moveToItem.id, html`<calcite-dropdown-item data-id=${moveToItem.id ?? nothing} .label=${moveToItem.label} @calciteDropdownItemSelect=${this.handleMoveTo}>${moveToItem.label}</calcite-dropdown-item>`);
   }
   renderReorderGroup() {
-    return this.hasReorderItems ? keyed("reorder", html`<calcite-dropdown-group .groupTitle=${this.messages.reorder} id=${IDS.reorder} .scale=${this.scale} selection-mode=none>${this.renderTop()}${this.renderUp()}${this.renderDown()}${this.renderBottom()}</calcite-dropdown-group>`) : null;
+    return this.hasReorderItems ? keyed("reorder", html`<calcite-dropdown-group .groupTitle=${this.reorderGroupTitle} id=${IDS.reorder} .scale=${this.scale} selection-mode=none>${this.renderTop()}${this.renderUp()}${this.renderDown()}${this.renderBottom()}</calcite-dropdown-group>`) : null;
   }
   renderAddToGroup() {
-    const { messages, addToItems, scale } = this;
-    return addToItems.length ? keyed("add-to-items", html`<calcite-dropdown-group .groupTitle=${messages.addTo} id=${IDS.add} .scale=${scale} selection-mode=none>${addToItems.map((addToItem) => this.renderAddToItem(addToItem))}</calcite-dropdown-group>`) : null;
+    const { messages, addToItems, scale, hasAddToItems } = this;
+    return hasAddToItems ? keyed("add-to-items", html`<calcite-dropdown-group .groupTitle=${messages.addTo} id=${IDS.add} .scale=${scale} selection-mode=none>${addToItems.map((addToItem) => this.renderAddToItem(addToItem))}</calcite-dropdown-group>`) : null;
   }
   renderMoveToGroup() {
-    const { messages, moveToItems, scale } = this;
-    return moveToItems.length ? keyed("move-to-items", html`<calcite-dropdown-group .groupTitle=${messages.moveTo} id=${IDS.move} .scale=${scale} selection-mode=none>${moveToItems.map((moveToItem) => this.renderMoveToItem(moveToItem))}</calcite-dropdown-group>`) : null;
+    const { messages, moveToItems, scale, hasMoveToItems } = this;
+    return hasMoveToItems ? keyed("move-to-items", html`<calcite-dropdown-group .groupTitle=${messages.moveTo} id=${IDS.move} .scale=${scale} selection-mode=none>${moveToItems.map((moveToItem) => this.renderMoveToItem(moveToItem))}</calcite-dropdown-group>`) : null;
   }
-  renderDropdownItem(positionIndex, label) {
-    return keyed(REORDER_VALUES[positionIndex], html`<calcite-dropdown-item data-value=${REORDER_VALUES[positionIndex] ?? nothing} .label=${label} @calciteDropdownItemSelect=${this.handleReorder}>${label}</calcite-dropdown-item>`);
+  renderDropdownItem(positionIndex, label, disabled = false) {
+    return keyed(REORDER_VALUES[positionIndex], html`<calcite-dropdown-item data-value=${REORDER_VALUES[positionIndex] ?? nothing} .disabled=${disabled} .label=${label} @calciteDropdownItemSelect=${this.handleReorder}>${label}</calcite-dropdown-item>`);
   }
   renderTop() {
-    const { setPosition } = this;
-    return setPosition !== 1 && setPosition !== 2 ? this.renderDropdownItem(0, this.messages.moveToTop) : null;
+    return this.renderDropdownItem(0, this.messages.moveToTop, this.isTopReorderDisabled);
   }
   renderUp() {
-    return this.setPosition !== 1 ? this.renderDropdownItem(1, this.messages.moveUp) : null;
+    return this.renderDropdownItem(1, this.messages.moveUp, this.isUpReorderDisabled);
   }
   renderDown() {
-    return this.setPosition !== this.setSize ? this.renderDropdownItem(2, this.messages.moveDown) : null;
+    return this.renderDropdownItem(2, this.messages.moveDown, this.isDownReorderDisabled);
   }
   renderBottom() {
-    const { setPosition, setSize } = this;
-    return setPosition !== setSize && setPosition !== setSize - 1 ? this.renderDropdownItem(3, this.messages.moveToBottom) : null;
+    return this.renderDropdownItem(3, this.messages.moveToBottom, this.isBottomReorderDisabled);
   }
 }
 customElement("calcite-sort-handle", SortHandle);

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

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Layout } from "../interfaces.js";
-import type { DragDetail } from "../../utils/sortableComponent.js";
+import type { DragDetail } from "../../controllers/useSortable.js";
 
 /**
  * @deprecated Use the `calcite-block-group` component instead.

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

@@ -3,10 +3,10 @@ import { 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 { d as disconnectSortableComponent, c as connectSortableComponent } from "../../chunks/sortableComponent.js";
-import { j as focusElement } from "../../chunks/dom.js";
+import { i as focusElement } from "../../chunks/dom.js";
 import { l as logger } from "../../chunks/logger.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useSortable } from "../../chunks/useSortable.js";
 const CSS = {
   container: "container",
   containerHorizontal: "container--horizontal",
@@ -21,6 +21,7 @@ class SortableList extends LitElement {
     this.mutationObserver = createObserver("mutation", () => {
       this.setUpSorting();
     });
+    this.sortable = useSortable()(this);
     this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.handleSelector = "calcite-handle";
@@ -50,7 +51,6 @@ class SortableList extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    disconnectSortableComponent(this);
     this.endObserving();
   }
   calciteHandleNudgeNextHandler(event) {
@@ -110,7 +110,7 @@ class SortableList extends LitElement {
   }
   setUpSorting() {
     this.items = Array.from(this.el.children);
-    connectSortableComponent(this);
+    this.sortable.reset();
   }
   beginObserving() {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });

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

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
+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";
@@ -42,7 +42,7 @@ export abstract class SplitButton extends LitElement {
    * Without a value, the browser will suggest a filename/extension.
    *
    * @default false
-   * @see [Global download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
+   * @see [MDN - Global download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
    */
   accessor download: string | boolean;
   /**
@@ -84,21 +84,21 @@ export abstract class SplitButton extends LitElement {
    *
    * @default "bottom-end"
    */
-  accessor placement: MenuPlacement;
+  accessor placement: LogicalPlacement;
   /** Specifies an icon to display at the end of the primary button. */
   accessor primaryIconEnd: IconName;
   /** Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   accessor primaryIconFlipRtl: FlipContext;
   /** Specifies an icon to display at the start of the primary button. */
   accessor primaryIconStart: IconName;
-  /** Speficies an accessible name for the primary button. */
+  /** Specifies an accessible name for the primary button. */
   accessor primaryLabel: string;
   /** Specifies the text displayed in the primary button. */
   accessor primaryText: string;
   /**
    * Defines the relationship between the `href` value and the current document.
    *
-   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
+   * @see [MDN - rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
    */
   accessor rel: string;
   /**
@@ -110,7 +110,7 @@ export abstract class SplitButton extends LitElement {
   /**
    * Specifies where to open the linked document defined in the `href` property.
    *
-   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
+   * @see [MDN - target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
    */
   accessor target: string;
   /**
@@ -119,7 +119,7 @@ export abstract class SplitButton extends LitElement {
    * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
-   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
    */
   accessor topLayerDisabled: boolean;
   /**
@@ -132,7 +132,7 @@ export abstract class SplitButton extends LitElement {
    * Sets focus on the component's first focusable element.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the primary button is clicked. */

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

@@ -7,8 +7,8 @@ import type { StepperLayout } from "./interfaces.js";
 
 /**
  * @cssproperty [--calcite-stepper-bar-gap] - Specifies the space between the component's `calcite-stepper-item`s.
- * @cssproperty [--calcite-stepper-bar-inactive-fill-color] - Specifies the `calcite-stepper-item`s' bar fill color of the component's `calcite-stepper-item`s.
- * @cssproperty [--calcite-stepper-bar-active-fill-color] - Specifies the `calcite-stepper-item`s' bar fill color of the component's active `calcite-stepper-item`s.
+ * @cssproperty [--calcite-stepper-bar-inactive-fill-color] - [Deprecated] in 5.1.0, removal target v6.0.0 - Use `--calcite-stepper-bar-fill-color` instead. Specifies the `calcite-stepper-item`s' bar fill color of the component's `calcite-stepper-item`s.
+ * @cssproperty [--calcite-stepper-bar-active-fill-color] - [Deprecated] in 5.1.0, removal target v6.0.0 - Use `--calcite-stepper-bar-selected-fill-color` instead. Specifies the `calcite-stepper-item`s' bar fill color of the component's active `calcite-stepper-item`s.
  * @cssproperty [--calcite-stepper-bar-complete-fill-color] - When `calcite-stepper-item`s are `complete`, specifies the component's `calcite-stepper-item`s' bar fill color.
  * @cssproperty [--calcite-stepper-bar-error-fill-color] - When `calcite-stepper-item`s contain an `error`, specifies the component's `calcite-stepper-item`s' bar fill color.
  * @slot  - A slot for adding `calcite-stepper-item`s.

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

@@ -3,11 +3,10 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { svg, html, css, nothing } from "lit";
 import { safeClassMap, LitElement, createEvent } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { f as focusElementInGroup, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { f as focusElementInGroup, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { i as isHidden } from "../../chunks/component.js";
 const CSS$1 = {
   actionIcon: "action-icon",
   actionContainer: "action-container",
@@ -44,9 +43,9 @@ class Stepper extends LitElement {
   constructor() {
     super();
     this.containerRef = createRef();
-    this.enabledItems = [];
+    this.visibleItems = [];
+    this.focusableItems = [];
     this.guid = guid();
-    this.itemMap = /* @__PURE__ */ new Map();
     this.items = [];
     this.multipleViewMode = false;
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
@@ -61,7 +60,10 @@ class Stepper extends LitElement {
     });
     this.calciteStepperChange = createEvent({ cancelable: false });
     this.listen("calciteInternalStepperItemKeyEvent", this.calciteInternalStepperItemKeyEvent);
-    this.listen("calciteInternalStepperItemRegister", this.registerItem);
+    this.listen("calciteInternalStepperItemUpdate", (event) => {
+      event.stopPropagation();
+      this.updateItems();
+    });
     this.listen("calciteInternalStepperItemSelect", this.updateItem);
     this.listen("calciteStepperItemSelect", this.handleItemSelect);
   }
@@ -72,7 +74,7 @@ class Stepper extends LitElement {
     this.styles = styles;
   }
   async endStep() {
-    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, "previous");
+    const enabledStepIndex = this.getEnabledStepIndex(this.visibleItems.length - 1, "previous");
     if (typeof enabledStepIndex !== "number") {
       return;
     }
@@ -111,12 +113,8 @@ class Stepper extends LitElement {
     this.updateItems();
   }
   willUpdate(changes) {
-    if (changes.has("icon") && (this.hasUpdated || this.icon !== false) || changes.has("layout") && (this.hasUpdated || this.layout !== "horizontal") || changes.has("numbered") && (this.hasUpdated || this.numbered !== false) || changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
+    if (changes.has("layout") && (this.hasUpdated || this.layout !== "horizontal") || changes.has("icon") && (this.hasUpdated || this.icon !== false) || changes.has("numbered") && (this.hasUpdated || this.numbered !== false) || changes.has("scale") && (this.hasUpdated || this.scale !== "m") || changes.has("numberingSystem") && (this.hasUpdated || this.numberingSystem !== void 0)) {
       this.updateItems();
-      this.determineActiveStepper();
-    }
-    if (changes.has("numberingSystem")) {
-      this.setStepperItemNumberingSystem();
     }
     if (changes.has("currentActivePosition")) {
       requestAnimationFrame(() => {
@@ -145,28 +143,21 @@ class Stepper extends LitElement {
     switch (item.key) {
       case "ArrowDown":
       case "ArrowRight":
-        focusElementInGroup(this.enabledItems, itemToFocus, "next");
+        focusElementInGroup(this.focusableItems, itemToFocus, "next");
         break;
       case "ArrowUp":
       case "ArrowLeft":
-        focusElementInGroup(this.enabledItems, itemToFocus, "previous");
+        focusElementInGroup(this.focusableItems, itemToFocus, "previous");
         break;
       case "Home":
-        focusElementInGroup(this.enabledItems, itemToFocus, "first");
+        focusElementInGroup(this.focusableItems, itemToFocus, "first");
         break;
       case "End":
-        focusElementInGroup(this.enabledItems, itemToFocus, "last");
+        focusElementInGroup(this.focusableItems, itemToFocus, "last");
         break;
     }
     event.stopPropagation();
   }
-  registerItem(event) {
-    const item = event.target;
-    const { content, position } = event.detail;
-    this.itemMap.set(item, { position, content });
-    this.enabledItems = this.filterItems();
-    event.stopPropagation();
-  }
   updateItem(event) {
     const { position } = event.detail;
     if (typeof position === "number") {
@@ -184,31 +175,35 @@ class Stepper extends LitElement {
     this.calciteStepperChange.emit();
   }
   updateItems() {
-    this.el.querySelectorAll("calcite-stepper-item").forEach((item) => {
+    this.visibleItems = this.items.filter((item) => !item.hidden);
+    this.determineActiveStepper();
+    this.focusableItems = this.visibleItems.filter((item) => !item.disabled && !item.itemHidden);
+    this.items.forEach((item) => {
       item.icon = this.icon;
       item.numbered = this.numbered;
       item.layout = this.layout;
       item.scale = this.scale;
+      item.numberingSystem = this.numberingSystem;
     });
   }
   determineActiveStepper() {
-    const { items } = this;
-    if (items.length < 2) {
+    const { visibleItems } = this;
+    if (visibleItems.length < 2) {
       return;
     }
     const { currentActivePosition, layout } = this;
     this.multipleViewMode = layout !== "horizontal-single";
-    items.forEach((item, index) => {
+    visibleItems.forEach((item, index) => {
       item.itemHidden = layout === "horizontal-single" && index !== (currentActivePosition || 0);
     });
   }
   getEnabledStepIndex(startIndex, direction = "next") {
-    const { items, currentActivePosition } = this;
+    const { visibleItems, currentActivePosition } = this;
     let newIndex = startIndex;
-    while (newIndex >= 0 && newIndex < items.length && items[newIndex]?.disabled) {
+    while (newIndex >= 0 && newIndex < visibleItems.length && visibleItems[newIndex]?.disabled) {
       newIndex = newIndex + (direction === "previous" ? -1 : 1);
     }
-    return newIndex !== currentActivePosition && newIndex < items.length && newIndex >= 0 ? newIndex : null;
+    return newIndex !== currentActivePosition && newIndex < visibleItems.length && newIndex >= 0 ? newIndex : null;
   }
   updateStep(position) {
     this.currentActivePosition = position;
@@ -216,14 +211,6 @@ class Stepper extends LitElement {
       position
     });
   }
-  filterItems() {
-    return this.items.filter((item) => !item.disabled && !isHidden(item));
-  }
-  setStepperItemNumberingSystem() {
-    this.items.forEach((item) => {
-      item.numberingSystem = this.numberingSystem;
-    });
-  }
   handleActionClick(event) {
     const currentActivePosition = this.currentActivePosition;
     const target = event.target;
@@ -232,29 +219,29 @@ class Stepper extends LitElement {
     } else {
       this.nextStep();
     }
-    if (typeof this.currentActivePosition === "number" && currentActivePosition !== this.currentActivePosition && !this.items[this.currentActivePosition].disabled) {
+    if (typeof this.currentActivePosition === "number" && currentActivePosition !== this.currentActivePosition && this.visibleItems[this.currentActivePosition] && !this.visibleItems[this.currentActivePosition].disabled) {
       this.emitItemSelect();
     }
   }
   getFirstEnabledStepperPosition() {
-    const enabledStepIndex = this.items.findIndex((item) => !item.disabled);
+    const enabledStepIndex = this.visibleItems.findIndex((item) => !item.disabled);
     if (enabledStepIndex > -1) {
       return enabledStepIndex;
     }
     return 0;
   }
   handleDefaultSlotChange(event) {
-    const items = slotChangeGetAssignedElements(event).filter((el) => el?.tagName === "CALCITE-STEPPER-ITEM" && !isHidden(el));
+    const items = slotChangeGetAssignedElements(event).filter((el) => el?.tagName === "CALCITE-STEPPER-ITEM");
     this.items = items;
-    const spacing = Array(items.length).fill("1fr").join(" ");
+    this.updateItems();
+    const spacing = Array(this.visibleItems.length).fill("1fr").join(" ");
     this.containerRef.value.style.gridTemplateAreas = spacing;
     this.containerRef.value.style.gridTemplateColumns = spacing;
-    this.setStepperItemNumberingSystem();
   }
   render() {
     this.el.ariaLabel = this.messages.label;
     this.el.role = "region";
-    return html`<div class=${safeClassMap({ container: true, [CSS$1.singleView]: this.layout === "horizontal-single" })} ${ref(this.containerRef)}>${this.layout === "horizontal-single" && html`<div class=${safeClassMap({ [CSS$1.stepBarContainer]: true })}>${this.items.map((item, index) => StepBar({ active: index === this.currentActivePosition, complete: item.complete && index !== this.currentActivePosition && !item.error, disabled: item.disabled && index !== this.currentActivePosition, error: item.error && index !== this.currentActivePosition }))}</div>` || ""}${this.layout === "horizontal-single" && html`<div class=${safeClassMap({ [CSS$1.actionContainer]: true })}>${this.renderAction("start")}${this.renderAction("end")}</div>` || ""}<slot @slotchange=${this.handleDefaultSlotChange}></slot></div>`;
+    return html`<div class=${safeClassMap({ container: true, [CSS$1.singleView]: this.layout === "horizontal-single" })} ${ref(this.containerRef)}>${this.layout === "horizontal-single" && html`<div class=${safeClassMap({ [CSS$1.stepBarContainer]: true })}>${this.visibleItems.map((item, index) => StepBar({ active: index === this.currentActivePosition, complete: item.complete && index !== this.currentActivePosition && !item.error, disabled: item.disabled && index !== this.currentActivePosition, error: item.error && index !== this.currentActivePosition }))}</div>` || ""}${this.layout === "horizontal-single" && html`<div class=${safeClassMap({ [CSS$1.actionContainer]: true })}>${this.renderAction("start")}${this.renderAction("end")}</div>` || ""}<slot @slotchange=${this.handleDefaultSlotChange}></slot></div>`;
   }
   renderAction(position) {
     const isPositionStart = position === "start";

package/dist/components/calcite-stepper-item/customElement.d.ts

@@ -67,7 +67,7 @@ export abstract class StepperItem extends LitElement {
    * Sets focus on the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the active `calcite-stepper-item` changes. */