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

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.11
+ * v2.2.0-next.12
  */
 'use strict';
 
@@ -9803,7 +9803,7 @@ const SLOTS$y = {
     tooltip: "tooltip",
 };
 
-const actionCss = "/*!@:host*/.sc-calcite-action-h{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-action-h *.sc-calcite-action{box-sizing:border-box}/*!@:host([disabled])*/[disabled].sc-calcite-action-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-action-h *.sc-calcite-action,.sc-calcite-action-h[disabled].sc-calcite-action-s>*,.sc-calcite-action-h[disabled] .sc-calcite-action-s>*{pointer-events:none}/*!@:host*/.sc-calcite-action-h{display:flex;background-color:transparent;--calcite-action-indicator-color:var(--calcite-color-brand)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-action-h[disabled] .sc-calcite-action-s>[calcite-hydrated][disabled],[disabled].sc-calcite-action-h [calcite-hydrated][disabled].sc-calcite-action{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-action{display:contents}/*!@.button*/.button.sc-calcite-action{position:relative;margin:0px;display:flex;inline-size:auto;cursor:pointer;align-items:center;justify-content:flex-start;border-style:none;background-color:var(--calcite-color-foreground-1);fill:var(--calcite-color-text-3);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);outline-color:transparent;text-align:unset;flex:1 0 auto}/*!@.button:hover*/.button.sc-calcite-action:hover{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}/*!@.button:focus*/.button.sc-calcite-action:focus{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1);outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}/*!@.button:active*/.button.sc-calcite-action:active{background-color:var(--calcite-color-foreground-3)}/*!@.button .icon-container*/.button.sc-calcite-action .icon-container.sc-calcite-action{pointer-events:none;margin:0px;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1rem}/*!@.button .text-container*/.button.sc-calcite-action .text-container.sc-calcite-action{margin:0px;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:margin;transition-property:inline-size}/*!@.button .text-container--visible*/.button.sc-calcite-action .text-container--visible.sc-calcite-action{inline-size:auto;flex:1 1 auto;opacity:1}/*!@:host([data-active]) .button*/[data-active].sc-calcite-action-h .button.sc-calcite-action{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}/*!@:host([scale=s]) .button*/[scale=s].sc-calcite-action-h .button.sc-calcite-action{padding-inline:0.5rem;padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}/*!@:host([scale=s]) .button--text-visible .icon-container*/[scale=s].sc-calcite-action-h .button--text-visible.sc-calcite-action .icon-container.sc-calcite-action{margin-inline-end:0.5rem}/*!@:host([scale=m]) .button*/[scale=m].sc-calcite-action-h .button.sc-calcite-action{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}/*!@:host([scale=m]) .button--text-visible .icon-container*/[scale=m].sc-calcite-action-h .button--text-visible.sc-calcite-action .icon-container.sc-calcite-action{margin-inline-end:0.75rem}/*!@:host([scale=l]) .button*/[scale=l].sc-calcite-action-h .button.sc-calcite-action{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}/*!@:host([scale=l]) .button--text-visible .icon-container*/[scale=l].sc-calcite-action-h .button--text-visible.sc-calcite-action .icon-container.sc-calcite-action{margin-inline-end:1rem}/*!@:host([alignment=center]) .button*/[alignment=center].sc-calcite-action-h .button.sc-calcite-action{justify-content:center}/*!@:host([alignment=end]) .button*/[alignment=end].sc-calcite-action-h .button.sc-calcite-action{justify-content:flex-end}/*!@:host([alignment=center]) .button .text-container--visible,\n:host([alignment=end]) .button .text-container--visible*/[alignment=center].sc-calcite-action-h .button.sc-calcite-action .text-container--visible.sc-calcite-action,[alignment=end].sc-calcite-action-h .button.sc-calcite-action .text-container--visible.sc-calcite-action{flex:0 1 auto}/*!@:host([scale=s][compact]) .button,\n:host([scale=m][compact]) .button,\n:host([scale=l][compact]) .button*/[scale=s][compact].sc-calcite-action-h .button.sc-calcite-action,[scale=m][compact].sc-calcite-action-h .button.sc-calcite-action,[scale=l][compact].sc-calcite-action-h .button.sc-calcite-action{padding-inline:0px}/*!@.slot-container*/.slot-container.sc-calcite-action{display:flex}/*!@.slot-container--hidden*/.slot-container--hidden.sc-calcite-action{display:none}/*!@.button--text-visible*/.button--text-visible.sc-calcite-action{inline-size:100%}/*!@:host([active]) .button,\n:host([active]) .button:hover,\n:host([active]) .button:focus,\n:host([active][loading]) .button*/[active].sc-calcite-action-h .button.sc-calcite-action,[active].sc-calcite-action-h .button.sc-calcite-action:hover,[active].sc-calcite-action-h .button.sc-calcite-action:focus,[active][loading].sc-calcite-action-h .button.sc-calcite-action{background-color:var(--calcite-color-foreground-3);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}/*!@:host([active]) .button:active*/[active].sc-calcite-action-h .button.sc-calcite-action:active{background-color:var(--calcite-color-foreground-1)}/*!@:host([appearance=transparent]) .button*/[appearance=transparent].sc-calcite-action-h .button.sc-calcite-action{background-color:transparent}/*!@:host([appearance=transparent][active]) .button,\n:host([appearance=transparent]) .button:hover,\n:host([appearance=transparent]) .button:focus*/[appearance=transparent][active].sc-calcite-action-h .button.sc-calcite-action,[appearance=transparent].sc-calcite-action-h .button.sc-calcite-action:hover,[appearance=transparent].sc-calcite-action-h .button.sc-calcite-action:focus{background-color:var(--calcite-button-transparent-hover)}/*!@:host([appearance=transparent]) .button:active*/[appearance=transparent].sc-calcite-action-h .button.sc-calcite-action:active{background-color:var(--calcite-button-transparent-press)}/*!@:host([appearance=transparent][disabled]) .button*/[appearance=transparent][disabled].sc-calcite-action-h .button.sc-calcite-action{background-color:transparent}/*!@:host([loading][appearance=solid]) .button,\n:host([loading][appearance=solid]) .button:hover,\n:host([loading][appearance=solid]) .button:focus*/[loading][appearance=solid].sc-calcite-action-h .button.sc-calcite-action,[loading][appearance=solid].sc-calcite-action-h .button.sc-calcite-action:hover,[loading][appearance=solid].sc-calcite-action-h .button.sc-calcite-action:focus{background-color:var(--calcite-color-foreground-1)}/*!@:host([loading][appearance=solid]) .button .text-container,\n:host([loading][appearance=solid]) .button:hover .text-container,\n:host([loading][appearance=solid]) .button:focus .text-container*/[loading][appearance=solid].sc-calcite-action-h .button.sc-calcite-action .text-container.sc-calcite-action,[loading][appearance=solid].sc-calcite-action-h .button.sc-calcite-action:hover .text-container.sc-calcite-action,[loading][appearance=solid].sc-calcite-action-h .button.sc-calcite-action:focus .text-container.sc-calcite-action{opacity:var(--calcite-opacity-disabled)}/*!@:host([loading]) calcite-loader[inline]*/[loading].sc-calcite-action-h calcite-loader[inline].sc-calcite-action{color:var(--calcite-color-text-3);margin-inline-end:0px}/*!@:host([disabled]) .button,\n:host([disabled]) .button:hover,\n:host([disabled]) .button:focus*/[disabled].sc-calcite-action-h .button.sc-calcite-action,[disabled].sc-calcite-action-h .button.sc-calcite-action:hover,[disabled].sc-calcite-action-h .button.sc-calcite-action:focus{cursor:default;background-color:var(--calcite-color-foreground-1);opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled][active]) .button,\n:host([disabled][active]) .button:hover,\n:host([disabled][active]) .button:focus*/[disabled][active].sc-calcite-action-h .button.sc-calcite-action,[disabled][active].sc-calcite-action-h .button.sc-calcite-action:hover,[disabled][active].sc-calcite-action-h .button.sc-calcite-action:focus{background-color:var(--calcite-color-foreground-3);opacity:var(--calcite-opacity-disabled)}/*!@:host([appearance=transparent]) .button*/[appearance=transparent].sc-calcite-action-h .button.sc-calcite-action{background-color:transparent;transition-property:box-shadow;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}/*!@.indicator-with-icon*/.indicator-with-icon.sc-calcite-action{position:relative}/*!@.indicator-with-icon::after*/.indicator-with-icon.sc-calcite-action::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}/*!@.indicator-without-icon*/.indicator-without-icon.sc-calcite-action{margin-inline:0.25rem;inline-size:1rem;position:relative}/*!@.indicator-without-icon::after*/.indicator-without-icon.sc-calcite-action::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}/*!@.indicator-text*/.indicator-text.sc-calcite-action{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}/*!@:host([hidden])*/[hidden].sc-calcite-action-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-action{display:none}";
+const actionCss = "/*!@:host*/.sc-calcite-action-h{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-action-h *.sc-calcite-action{box-sizing:border-box}/*!@:host([disabled])*/[disabled].sc-calcite-action-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-action-h *.sc-calcite-action,.sc-calcite-action-h[disabled].sc-calcite-action-s>*,.sc-calcite-action-h[disabled] .sc-calcite-action-s>*{pointer-events:none}/*!@:host*/.sc-calcite-action-h{display:flex;background-color:transparent;--calcite-action-indicator-color:var(--calcite-color-brand);--calcite-action-color-transparent-hover:var(--calcite-color-transparent-hover);--calcite-action-color-transparent-press:var(--calcite-color-transparent-press)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-action-h[disabled] .sc-calcite-action-s>[calcite-hydrated][disabled],[disabled].sc-calcite-action-h [calcite-hydrated][disabled].sc-calcite-action{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-action{display:contents}/*!@.button*/.button.sc-calcite-action{position:relative;margin:0px;display:flex;inline-size:auto;cursor:pointer;align-items:center;justify-content:flex-start;border-style:none;background-color:var(--calcite-color-foreground-1);fill:var(--calcite-color-text-3);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3);outline-color:transparent;text-align:unset;flex:1 0 auto}/*!@.button:hover*/.button.sc-calcite-action:hover{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}/*!@.button:focus*/.button.sc-calcite-action:focus{background-color:var(--calcite-color-foreground-2);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1);outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}/*!@.button:active*/.button.sc-calcite-action:active{background-color:var(--calcite-color-foreground-3)}/*!@.button .icon-container*/.button.sc-calcite-action .icon-container.sc-calcite-action{pointer-events:none;margin:0px;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1rem}/*!@.button .text-container*/.button.sc-calcite-action .text-container.sc-calcite-action{margin:0px;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:margin;transition-property:inline-size}/*!@.button .text-container--visible*/.button.sc-calcite-action .text-container--visible.sc-calcite-action{inline-size:auto;flex:1 1 auto;opacity:1}/*!@:host([data-active]) .button*/[data-active].sc-calcite-action-h .button.sc-calcite-action{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}/*!@:host([scale=s]) .button*/[scale=s].sc-calcite-action-h .button.sc-calcite-action{padding-inline:0.5rem;padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}/*!@:host([scale=s]) .button--text-visible .icon-container*/[scale=s].sc-calcite-action-h .button--text-visible.sc-calcite-action .icon-container.sc-calcite-action{margin-inline-end:0.5rem}/*!@:host([scale=m]) .button*/[scale=m].sc-calcite-action-h .button.sc-calcite-action{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}/*!@:host([scale=m]) .button--text-visible .icon-container*/[scale=m].sc-calcite-action-h .button--text-visible.sc-calcite-action .icon-container.sc-calcite-action{margin-inline-end:0.75rem}/*!@:host([scale=l]) .button*/[scale=l].sc-calcite-action-h .button.sc-calcite-action{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}/*!@:host([scale=l]) .button--text-visible .icon-container*/[scale=l].sc-calcite-action-h .button--text-visible.sc-calcite-action .icon-container.sc-calcite-action{margin-inline-end:1rem}/*!@:host([alignment=center]) .button*/[alignment=center].sc-calcite-action-h .button.sc-calcite-action{justify-content:center}/*!@:host([alignment=end]) .button*/[alignment=end].sc-calcite-action-h .button.sc-calcite-action{justify-content:flex-end}/*!@:host([alignment=center]) .button .text-container--visible,\n:host([alignment=end]) .button .text-container--visible*/[alignment=center].sc-calcite-action-h .button.sc-calcite-action .text-container--visible.sc-calcite-action,[alignment=end].sc-calcite-action-h .button.sc-calcite-action .text-container--visible.sc-calcite-action{flex:0 1 auto}/*!@:host([scale=s][compact]) .button,\n:host([scale=m][compact]) .button,\n:host([scale=l][compact]) .button*/[scale=s][compact].sc-calcite-action-h .button.sc-calcite-action,[scale=m][compact].sc-calcite-action-h .button.sc-calcite-action,[scale=l][compact].sc-calcite-action-h .button.sc-calcite-action{padding-inline:0px}/*!@.slot-container*/.slot-container.sc-calcite-action{display:flex}/*!@.slot-container--hidden*/.slot-container--hidden.sc-calcite-action{display:none}/*!@.button--text-visible*/.button--text-visible.sc-calcite-action{inline-size:100%}/*!@:host([active]) .button,\n:host([active]) .button:hover,\n:host([active]) .button:focus,\n:host([active][loading]) .button*/[active].sc-calcite-action-h .button.sc-calcite-action,[active].sc-calcite-action-h .button.sc-calcite-action:hover,[active].sc-calcite-action-h .button.sc-calcite-action:focus,[active][loading].sc-calcite-action-h .button.sc-calcite-action{background-color:var(--calcite-color-foreground-3);fill:var(--calcite-color-text-1);color:var(--calcite-color-text-1)}/*!@:host([active]) .button:active*/[active].sc-calcite-action-h .button.sc-calcite-action:active{background-color:var(--calcite-color-foreground-1)}/*!@:host([appearance=transparent]) .button*/[appearance=transparent].sc-calcite-action-h .button.sc-calcite-action{background-color:transparent}/*!@:host([appearance=transparent][active]) .button,\n:host([appearance=transparent]) .button:hover,\n:host([appearance=transparent]) .button:focus*/[appearance=transparent][active].sc-calcite-action-h .button.sc-calcite-action,[appearance=transparent].sc-calcite-action-h .button.sc-calcite-action:hover,[appearance=transparent].sc-calcite-action-h .button.sc-calcite-action:focus{background-color:var(--calcite-action-color-transparent-hover)}/*!@:host([appearance=transparent]) .button:active*/[appearance=transparent].sc-calcite-action-h .button.sc-calcite-action:active{background-color:var(--calcite-action-color-transparent-press)}/*!@:host([appearance=transparent][disabled]) .button*/[appearance=transparent][disabled].sc-calcite-action-h .button.sc-calcite-action{background-color:transparent}/*!@:host([loading][appearance=solid]) .button,\n:host([loading][appearance=solid]) .button:hover,\n:host([loading][appearance=solid]) .button:focus*/[loading][appearance=solid].sc-calcite-action-h .button.sc-calcite-action,[loading][appearance=solid].sc-calcite-action-h .button.sc-calcite-action:hover,[loading][appearance=solid].sc-calcite-action-h .button.sc-calcite-action:focus{background-color:var(--calcite-color-foreground-1)}/*!@:host([loading][appearance=solid]) .button .text-container,\n:host([loading][appearance=solid]) .button:hover .text-container,\n:host([loading][appearance=solid]) .button:focus .text-container*/[loading][appearance=solid].sc-calcite-action-h .button.sc-calcite-action .text-container.sc-calcite-action,[loading][appearance=solid].sc-calcite-action-h .button.sc-calcite-action:hover .text-container.sc-calcite-action,[loading][appearance=solid].sc-calcite-action-h .button.sc-calcite-action:focus .text-container.sc-calcite-action{opacity:var(--calcite-opacity-disabled)}/*!@:host([loading]) calcite-loader[inline]*/[loading].sc-calcite-action-h calcite-loader[inline].sc-calcite-action{color:var(--calcite-color-text-3);margin-inline-end:0px}/*!@:host([disabled]) .button,\n:host([disabled]) .button:hover,\n:host([disabled]) .button:focus*/[disabled].sc-calcite-action-h .button.sc-calcite-action,[disabled].sc-calcite-action-h .button.sc-calcite-action:hover,[disabled].sc-calcite-action-h .button.sc-calcite-action:focus{cursor:default;background-color:var(--calcite-color-foreground-1);opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled][active]) .button,\n:host([disabled][active]) .button:hover,\n:host([disabled][active]) .button:focus*/[disabled][active].sc-calcite-action-h .button.sc-calcite-action,[disabled][active].sc-calcite-action-h .button.sc-calcite-action:hover,[disabled][active].sc-calcite-action-h .button.sc-calcite-action:focus{background-color:var(--calcite-color-foreground-3);opacity:var(--calcite-opacity-disabled)}/*!@:host([appearance=transparent]) .button*/[appearance=transparent].sc-calcite-action-h .button.sc-calcite-action{background-color:transparent;transition-property:box-shadow;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}/*!@.indicator-with-icon*/.indicator-with-icon.sc-calcite-action{position:relative}/*!@.indicator-with-icon::after*/.indicator-with-icon.sc-calcite-action::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}/*!@.indicator-without-icon*/.indicator-without-icon.sc-calcite-action{margin-inline:0.25rem;inline-size:1rem;position:relative}/*!@.indicator-without-icon::after*/.indicator-without-icon.sc-calcite-action::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;inset-block-end:-0.275rem;inset-inline-end:-0.275rem;background-color:var(--calcite-action-indicator-color)}/*!@.indicator-text*/.indicator-text.sc-calcite-action{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}/*!@:host([hidden])*/[hidden].sc-calcite-action-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-action{display:none}";
 
 /**
  * @slot - A slot for adding a `calcite-icon`.
@@ -13444,10 +13444,11 @@ function disconnectForm(component) {
 function afterConnectDefaultValueSet(component, value) {
     component.defaultValue = value;
 }
-const hiddenInputChangeHandler = (event) => {
-    event.target.dispatchEvent(new CustomEvent("calciteInternalHiddenInputChange", { bubbles: true }));
+const internalHiddenInputInputEvent = "calciteInternalHiddenInputInput";
+const hiddenInputInputHandler = (event) => {
+    event.target.dispatchEvent(new CustomEvent(internalHiddenInputInputEvent, { bubbles: true }));
 };
-const removeHiddenInputChangeEventListener = (input) => input.removeEventListener("change", hiddenInputChangeHandler);
+const removeHiddenInputChangeEventListener = (input) => input.removeEventListener("input", hiddenInputInputHandler);
 /**
  * Helper for maintaining a form-associated's hidden input in sync with the component.
  *
@@ -13496,7 +13497,7 @@ function syncHiddenFormInput(component) {
         }
         docFrag.append(input);
         // emits when hidden input is autofilled
-        input.addEventListener("change", hiddenInputChangeHandler);
+        input.addEventListener("input", hiddenInputInputHandler);
         defaultSyncHiddenFormInput(component, input, value);
     });
     if (docFrag) {
@@ -14534,7 +14535,7 @@ class CalciteNavigation {
     //  Public Methods
     //
     //--------------------------------------------------------------------------
-    /** When `navigation-action` is `true`, sets focus on the component's action element. */
+    /** When `navigationAction` is `true`, sets focus on the component's action element. */
     async setFocus() {
         await componentFocusable(this);
         return this.navigationActionEl?.setFocus();
@@ -20770,7 +20771,7 @@ function XButton({ disabled, key, label, onClick, ref, scale, }) {
 
 /**
  * Do not edit directly
- * Generated on Fri, 05 Jan 2024 16:59:14 GMT
+ * Generated on Tue, 09 Jan 2024 00:59:10 GMT
  */
 const calciteSize48 = "48px";
 
@@ -25807,13 +25808,14 @@ class Input {
                 this.nudgeNumberValue(direction, event);
             }
         };
-        this.hiddenInputChangeHandler = (event) => {
+        this.onHiddenFormInputInput = (event) => {
             if (event.target.name === this.name) {
                 this.setValue({
                     value: event.target.value,
                     origin: "direct",
                 });
             }
+            this.setFocus();
             event.stopPropagation();
         };
         this.setChildElRef = (el) => {
@@ -26009,7 +26011,7 @@ class Input {
         }
         this.mutationObserver?.observe(this.el, { childList: true });
         this.setDisabledAction();
-        this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
+        this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
     }
     disconnectedCallback() {
         disconnectInteractive(this);
@@ -26018,7 +26020,7 @@ class Input {
         disconnectLocalized(this);
         disconnectMessages(this);
         this.mutationObserver?.disconnect();
-        this.el.removeEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
+        this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
     }
     async componentWillLoad() {
         setUpLoadableComponent(this);
@@ -28279,13 +28281,14 @@ class InputNumber {
                 this.nudgeNumberValue(direction, event);
             }
         };
-        this.hiddenInputChangeHandler = (event) => {
+        this.onHiddenFormInputInput = (event) => {
             if (event.target.name === this.name) {
                 this.setNumberValue({
                     value: event.target.value,
                     origin: "direct",
                 });
             }
+            this.setFocus();
             event.stopPropagation();
         };
         this.setChildNumberElRef = (el) => {
@@ -28462,7 +28465,7 @@ class InputNumber {
         });
         this.mutationObserver?.observe(this.el, { childList: true });
         this.setDisabledAction();
-        this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
+        this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
     }
     componentDidLoad() {
         setComponentLoaded(this);
@@ -28474,7 +28477,7 @@ class InputNumber {
         disconnectLocalized(this);
         disconnectMessages(this);
         this.mutationObserver?.disconnect();
-        this.el.removeEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
+        this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
     }
     async componentWillLoad() {
         setUpLoadableComponent(this);
@@ -28775,13 +28778,14 @@ class InputText {
                 this.emitChangeIfUserModified();
             }
         };
-        this.hiddenInputChangeHandler = (event) => {
+        this.onHiddenFormInputInput = (event) => {
             if (event.target.name === this.name) {
                 this.setValue({
                     value: event.target.value,
                     origin: "direct",
                 });
             }
+            this.setFocus();
             event.stopPropagation();
         };
         this.setChildElRef = (el) => {
@@ -28896,7 +28900,7 @@ class InputText {
         connectForm(this);
         this.mutationObserver?.observe(this.el, { childList: true });
         this.setDisabledAction();
-        this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
+        this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
     }
     disconnectedCallback() {
         disconnectInteractive(this);
@@ -28905,7 +28909,7 @@ class InputText {
         disconnectLocalized(this);
         disconnectMessages(this);
         this.mutationObserver?.disconnect();
-        this.el.removeEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
+        this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
     }
     async componentWillLoad() {
         setUpLoadableComponent(this);
@@ -36730,7 +36734,7 @@ const ICONS$6 = {
 
 /**
  * Do not edit directly
- * Generated on Fri, 05 Jan 2024 16:59:16 GMT
+ * Generated on Tue, 09 Jan 2024 00:59:12 GMT
  */
 const calciteContainerSizeWidthXxs = {"min":"0","max":"320px"}; // Small handheld devices and mini-windows
 const calciteContainerSizeWidthXs = {"min":"321px","max":"476px"}; // Handheld devices
@@ -40121,7 +40125,7 @@ class Sheet {
     //
     //--------------------------------------------------------------------------
     /**
-     * Sets focus on the component's "close" button (the first focusable item).
+     * Sets focus on the component's "close" button - the first focusable item.
      *
      */
     async setFocus() {
@@ -40856,11 +40860,32 @@ class ShellPanel {
 }
 
 const CSS$l = {
+    container: "container",
+    containerRange: "container--range",
+    graph: "graph",
+    handle: "handle",
+    handleExtension: "handle-extension",
     handleLabel: "handle__label",
     handleLabelMinValue: "handle__label--minValue",
     handleLabelValue: "handle__label--value",
-    tickMin: "tick__label--min",
+    hyphen: "hyphen",
+    hyphenWrap: "hyphen--wrap",
+    static: "static",
+    thumb: "thumb",
+    thumbActive: "thumb--active",
+    thumbContainer: "thumb-container",
+    thumbMinValue: "thumb--minValue",
+    thumbPrecise: "thumb--precise",
+    thumbValue: "thumb--value",
+    tick: "tick",
+    tickActive: "tick--active",
+    tickLabel: "tick__label",
     tickMax: "tick__label--max",
+    tickMin: "tick__label--min",
+    ticks: "ticks",
+    track: "track",
+    trackRange: "track__range",
+    transformed: "transformed",
 };
 const maxTickElementThreshold = 250;
 
@@ -40876,6 +40901,20 @@ class Slider {
         this.calciteSliderChange = createEvent(this, "calciteSliderChange", 6);
         this.activeProp = "value";
         this.guid = `calcite-slider-${guid()}`;
+        this.onThumbBlur = () => {
+            this.activeProp = null;
+        };
+        this.onThumbFocus = (event) => {
+            const thumb = event.currentTarget;
+            this.activeProp = thumb.getAttribute("data-value-prop");
+        };
+        this.onThumbPointerDown = (event) => {
+            const thumb = event.currentTarget;
+            this.pointerDownDragStart(event, thumb.getAttribute("data-value-prop"));
+        };
+        this.onTrackPointerDown = (event) => {
+            this.pointerDownDragStart(event, "minMaxValue");
+        };
         this.dragUpdate = (event) => {
             if (this.disabled) {
                 return;
@@ -40928,29 +40967,28 @@ class Slider {
             this.maxValueDragRange = null;
             this.minMaxValueRange = null;
         };
-        /**
-         * Set the reference of the track Element
-         *
-         * @internal
-         * @param node
-         */
         this.storeTrackRef = (node) => {
             this.trackEl = node;
         };
+        this.storeThumbRef = (el) => {
+            if (!el) {
+                return;
+            }
+            const valueProp = el.getAttribute("data-value-prop");
+            valueProp === "minValue" ? (this.minHandle = el) : (this.maxHandle = el);
+        };
         /**
          * Returns a string representing the localized label value based if the groupSeparator prop is parsed.
          *
          * @param value
          */
-        this.determineGroupSeparator = (value) => {
-            if (typeof value === "number") {
-                numberStringFormatter.numberFormatOptions = {
-                    locale: this.effectiveLocale,
-                    numberingSystem: this.numberingSystem,
-                    useGrouping: this.groupSeparator,
-                };
-                return numberStringFormatter.localize(value.toString());
-            }
+        this.formatValue = (value) => {
+            numberStringFormatter.numberFormatOptions = {
+                locale: this.effectiveLocale,
+                numberingSystem: this.numberingSystem,
+                useGrouping: this.groupSeparator,
+            };
+            return numberStringFormatter.localize(value.toString());
         };
         this.disabled = false;
         this.form = undefined;
@@ -41042,207 +41080,116 @@ class Slider {
     }
     render() {
         const id = this.el.id || this.guid;
-        const maxProp = isRange(this.value) ? "maxValue" : "value";
         const value = isRange(this.value) ? this.maxValue : this.value;
-        const displayedValue = this.determineGroupSeparator(value);
-        const displayedMinValue = this.determineGroupSeparator(this.minValue);
         const min = this.minValue || this.min;
         const useMinValue = this.shouldUseMinValue();
         const minInterval = this.getUnitInterval(useMinValue ? this.minValue : min) * 100;
         const maxInterval = this.getUnitInterval(value) * 100;
         const mirror = this.shouldMirror();
-        const leftThumbOffset = `${mirror ? 100 - minInterval : minInterval}%`;
-        const rightThumbOffset = `${mirror ? maxInterval : 100 - maxInterval}%`;
         const valueIsRange = isRange(this.value);
-        const handleLabelMinValueClasses = `${CSS$l.handleLabel} ${CSS$l.handleLabelMinValue}`;
-        const handleLabelValueClasses = `${CSS$l.handleLabel} ${CSS$l.handleLabelValue}`;
-        const handle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.maxHandle = el) }, hAsync("div", { class: "handle" })));
-        const labeledHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.maxHandle = el) }, hAsync("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue), hAsync("div", { class: "handle" })));
-        const histogramLabeledHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.maxHandle = el) }, hAsync("div", { class: "handle" }), hAsync("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue)));
-        const preciseHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.maxHandle = el) }, hAsync("div", { class: "handle" }), hAsync("div", { class: "handle-extension" })));
-        const histogramPreciseHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.maxHandle = el) }, hAsync("div", { class: "handle-extension" }), hAsync("div", { class: "handle" })));
-        const labeledPreciseHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.maxHandle = el) }, hAsync("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue), hAsync("div", { class: "handle" }), hAsync("div", { class: "handle-extension" })));
-        const histogramLabeledPreciseHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
-                thumb: true,
-                "thumb--value": true,
-                "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.maxHandle = el) }, hAsync("div", { class: "handle-extension" }), hAsync("div", { class: "handle" }), hAsync("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue)));
-        const minHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
-                thumb: true,
-                "thumb--minValue": true,
-                "thumb--active": this.dragProp === "minValue",
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.minHandle = el) }, hAsync("div", { class: "handle" })));
-        const minLabeledHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
-                thumb: true,
-                "thumb--minValue": true,
-                "thumb--active": this.dragProp === "minValue",
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.minHandle = el) }, hAsync("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue), hAsync("div", { class: "handle" })));
-        const minHistogramLabeledHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
-                thumb: true,
-                "thumb--minValue": true,
-                "thumb--active": this.dragProp === "minValue",
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.minHandle = el) }, hAsync("div", { class: "handle" }), hAsync("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue)));
-        const minPreciseHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
-                thumb: true,
-                "thumb--minValue": true,
-                "thumb--active": this.dragProp === "minValue",
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.minHandle = el) }, hAsync("div", { class: "handle-extension" }), hAsync("div", { class: "handle" })));
-        const minLabeledPreciseHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
-                thumb: true,
-                "thumb--minValue": true,
-                "thumb--active": this.dragProp === "minValue",
-                "thumb--precise": true,
-            }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.minHandle = el) }, hAsync("div", { class: "handle-extension" }), hAsync("div", { class: "handle" }), hAsync("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue)));
+        const thumbTypes = this.buildThumbType("max");
+        const thumb = this.renderThumb({
+            type: thumbTypes,
+            thumbPlacement: thumbTypes.includes("histogram") ? "below" : "above",
+            maxInterval,
+            minInterval,
+            mirror,
+        });
+        const minThumbTypes = this.buildThumbType("min");
+        const minThumb = valueIsRange &&
+            this.renderThumb({
+                type: minThumbTypes,
+                thumbPlacement: minThumbTypes.includes("histogram") || minThumbTypes.includes("precise")
+                    ? "below"
+                    : "above",
+                maxInterval,
+                minInterval,
+                mirror,
+            });
         return (hAsync(Host, { id: id, onTouchStart: this.handleTouchStart }, hAsync(InteractiveContainer, { disabled: this.disabled }, hAsync("div", { "aria-label": getLabelText(this), class: {
-                ["container"]: true,
-                ["container--range"]: valueIsRange,
+                [CSS$l.container]: true,
+                [CSS$l.containerRange]: valueIsRange,
                 [`scale--${this.scale}`]: true,
-            } }, this.renderGraph(), hAsync("div", { class: "track",
+            } }, this.renderGraph(), hAsync("div", { class: CSS$l.track,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.storeTrackRef }, hAsync("div", { class: "track__range", onPointerDown: (event) => this.pointerDownDragStart(event, "minMaxValue"), style: {
+            ref: this.storeTrackRef }, hAsync("div", { class: CSS$l.trackRange, onPointerDown: this.onTrackPointerDown, style: {
                 left: `${mirror ? 100 - maxInterval : minInterval}%`,
                 right: `${mirror ? minInterval : 100 - maxInterval}%`,
-            } }), hAsync("div", { class: "ticks" }, this.tickValues.map((tick) => {
+            } }), hAsync("div", { class: CSS$l.ticks }, this.tickValues.map((tick) => {
             const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
             let activeTicks = tick >= min && tick <= value;
             if (useMinValue) {
                 activeTicks = tick >= this.minValue && tick <= this.maxValue;
             }
             return (hAsync("span", { class: {
-                    tick: true,
-                    "tick--active": activeTicks,
+                    [CSS$l.tick]: true,
+                    [CSS$l.tickActive]: activeTicks,
                 }, style: {
                     left: mirror ? "" : tickOffset,
                     right: mirror ? tickOffset : "",
                 } }, this.renderTickLabel(tick)));
-        }))), hAsync("div", { class: "thumb-container" }, !this.precise && !this.labelHandles && valueIsRange && minHandle, !this.hasHistogram &&
-            !this.precise &&
-            this.labelHandles &&
-            valueIsRange &&
-            minLabeledHandle, this.precise && !this.labelHandles && valueIsRange && minPreciseHandle, this.precise && this.labelHandles && valueIsRange && minLabeledPreciseHandle, this.hasHistogram &&
-            !this.precise &&
-            this.labelHandles &&
-            valueIsRange &&
-            minHistogramLabeledHandle, !this.precise && !this.labelHandles && handle, !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle, !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle, this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle, !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle, this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle, this.hasHistogram &&
-            this.precise &&
-            this.labelHandles &&
-            histogramLabeledPreciseHandle, hAsync(HiddenFormInputSlot, { component: this }))))));
+        }))), hAsync("div", { class: CSS$l.thumbContainer }, minThumb, thumb, hAsync(HiddenFormInputSlot, { component: this }))))));
+    }
+    renderThumb({ type, mirror, thumbPlacement, minInterval, maxInterval, }) {
+        const isLabeled = type.includes("labeled");
+        const isPrecise = type.includes("precise");
+        const isMinThumb = type.includes("min");
+        const valueIsRange = isRange(this.value);
+        const value = isMinThumb
+            ? this.minValue
+            : valueIsRange
+                ? this.maxValue
+                : this.value;
+        const valueProp = isMinThumb ? "minValue" : valueIsRange ? "maxValue" : "value";
+        const ariaLabel = isMinThumb ? this.minLabel : valueIsRange ? this.maxLabel : this.minLabel;
+        const ariaValuenow = isMinThumb ? this.minValue : value;
+        const displayedValue = isMinThumb ? this.formatValue(this.minValue) : this.formatValue(value);
+        const thumbStyle = isMinThumb
+            ? { left: `${mirror ? 100 - minInterval : minInterval}%` }
+            : { right: `${mirror ? maxInterval : 100 - maxInterval}%` };
+        const thumbLabelClasses = `${CSS$l.handleLabel} ${isMinThumb ? CSS$l.handleLabelMinValue : CSS$l.handleLabelValue}`;
+        const labels = isLabeled
+            ? [
+                hAsync("span", { "aria-hidden": "true", class: thumbLabelClasses }, displayedValue),
+                hAsync("span", { "aria-hidden": "true", class: `${thumbLabelClasses} ${CSS$l.static}` }, displayedValue),
+                hAsync("span", { "aria-hidden": "true", class: `${thumbLabelClasses} ${CSS$l.transformed}` }, displayedValue),
+            ]
+            : [];
+        const thumbContent = [
+            ...labels,
+            hAsync("div", { class: CSS$l.handle }),
+            isPrecise && hAsync("div", { class: CSS$l.handleExtension }),
+        ];
+        if (thumbPlacement === "below") {
+            thumbContent.reverse();
+        }
+        return (hAsync("div", { "aria-disabled": this.disabled, "aria-label": ariaLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": ariaValuenow, class: {
+                [CSS$l.thumb]: true,
+                [CSS$l.thumbValue]: !isMinThumb,
+                [CSS$l.thumbActive]: this.lastDragProp !== "minMaxValue" && this.dragProp === valueProp,
+                [CSS$l.thumbPrecise]: isPrecise,
+                [CSS$l.thumbMinValue]: isMinThumb,
+            }, "data-value-prop": valueProp, key: type, onBlur: this.onThumbBlur, onFocus: this.onThumbFocus, onPointerDown: this.onThumbPointerDown, role: "slider", style: thumbStyle, tabIndex: 0,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.storeThumbRef }, thumbContent));
     }
     renderGraph() {
-        return this.histogram ? (hAsync("calcite-graph", { class: "graph", colorStops: this.histogramStops, data: this.histogram, highlightMax: isRange(this.value) ? this.maxValue : this.value, highlightMin: isRange(this.value) ? this.minValue : this.min, max: this.max, min: this.min })) : null;
+        return this.histogram ? (hAsync("calcite-graph", { class: CSS$l.graph, colorStops: this.histogramStops, data: this.histogram, highlightMax: isRange(this.value) ? this.maxValue : this.value, highlightMin: isRange(this.value) ? this.minValue : this.min, max: this.max, min: this.min })) : null;
     }
     renderTickLabel(tick) {
-        const valueIsRange = isRange(this.value);
-        const isMinTickLabel = tick === this.min;
-        const isMaxTickLabel = tick === this.max;
-        const displayedTickValue = this.determineGroupSeparator(tick);
-        const tickLabel = (hAsync("span", { class: {
-                tick__label: true,
+        const { hasHistogram, labelHandles, labelTicks, max, min, precise, value } = this;
+        const valueIsRange = isRange(value);
+        const isMinTickLabel = tick === min;
+        const isMaxTickLabel = tick === max;
+        const isAtEdge = isMinTickLabel || isMaxTickLabel;
+        const shouldDisplayLabel = labelTicks &&
+            ((!hasHistogram && (isAtEdge || !precise || !valueIsRange)) ||
+                (hasHistogram && (isAtEdge || (!precise && !labelHandles))));
+        return shouldDisplayLabel ? (hAsync("span", { class: {
+                [CSS$l.tickLabel]: true,
                 [CSS$l.tickMin]: isMinTickLabel,
                 [CSS$l.tickMax]: isMaxTickLabel,
-            } }, displayedTickValue));
-        if (this.labelTicks && !this.hasHistogram && !valueIsRange) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            !this.hasHistogram &&
-            valueIsRange &&
-            !this.precise &&
-            !this.labelHandles) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            !this.hasHistogram &&
-            valueIsRange &&
-            !this.precise &&
-            this.labelHandles) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            !this.hasHistogram &&
-            valueIsRange &&
-            this.precise &&
-            (isMinTickLabel || isMaxTickLabel)) {
-            return tickLabel;
-        }
-        if (this.labelTicks && this.hasHistogram && !this.precise && !this.labelHandles) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            this.hasHistogram &&
-            this.precise &&
-            !this.labelHandles &&
-            (isMinTickLabel || isMaxTickLabel)) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            this.hasHistogram &&
-            !this.precise &&
-            this.labelHandles &&
-            (isMinTickLabel || isMaxTickLabel)) {
-            return tickLabel;
-        }
-        if (this.labelTicks &&
-            this.hasHistogram &&
-            this.precise &&
-            this.labelHandles &&
-            (isMinTickLabel || isMaxTickLabel)) {
-            return tickLabel;
-        }
-        return null;
+            } }, this.formatValue(tick))) : null;
     }
     //--------------------------------------------------------------------------
     //
@@ -41311,7 +41258,7 @@ class Slider {
         }
         this.lastDragPropValue = this[prop];
         this.dragStart(prop);
-        const isThumbActive = this.el.shadowRoot.querySelector(".thumb:active");
+        const isThumbActive = this.el.shadowRoot.querySelector(`.${CSS$l.thumb}:active`);
         if (!isThumbActive) {
             this.setValue({ [prop]: this.clamp(position, prop) });
         }
@@ -41337,6 +41284,19 @@ class Slider {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    buildThumbType(type) {
+        const thumbTypeParts = [type];
+        if (this.labelHandles) {
+            thumbTypeParts.push("labeled");
+        }
+        if (this.precise) {
+            thumbTypeParts.push("precise");
+        }
+        if (this.hasHistogram) {
+            thumbTypeParts.push("histogram");
+        }
+        return thumbTypeParts.join("-");
+    }
     setValueFromMinMax() {
         const { minValue, maxValue } = this;
         if (typeof minValue === "number" && typeof maxValue === "number") {
@@ -41547,7 +41507,7 @@ class Slider {
         const hyphenLabel = leftValueLabel;
         const labelOffset = labelFontSize / 2;
         if (labelTransformedOverlap > 0) {
-            hyphenLabel.classList.add("hyphen", "hyphen--wrap");
+            hyphenLabel.classList.add(CSS$l.hyphen, CSS$l.hyphenWrap);
             if (rightValueLabelStaticHostOffset === 0 && leftValueLabelStaticHostOffset === 0) {
                 // Neither handle overlaps the host boundary
                 let leftValueLabelTranslate = labelTransformedOverlap / 2 - labelOffset;
@@ -41593,7 +41553,7 @@ class Slider {
             }
         }
         else {
-            hyphenLabel.classList.remove("hyphen", "hyphen--wrap");
+            hyphenLabel.classList.remove(CSS$l.hyphen, CSS$l.hyphenWrap);
             leftValueLabel.style.transform = `translateX(${leftValueLabelStaticHostOffset}px)`;
             leftValueLabelTransformed.style.transform = `translateX(${leftValueLabelStaticHostOffset}px)`;
             rightValueLabel.style.transform = `translateX(${rightValueLabelStaticHostOffset}px)`;
@@ -41623,10 +41583,10 @@ class Slider {
         if (this.hasHistogram && !this.precise && !this.labelHandles) {
             return;
         }
-        const minHandle = this.el.shadowRoot.querySelector(".thumb--minValue");
-        const maxHandle = this.el.shadowRoot.querySelector(".thumb--value");
-        const minTickLabel = this.el.shadowRoot.querySelector(".tick__label--min");
-        const maxTickLabel = this.el.shadowRoot.querySelector(".tick__label--max");
+        const minHandle = this.el.shadowRoot.querySelector(`.${CSS$l.thumbMinValue}`);
+        const maxHandle = this.el.shadowRoot.querySelector(`.${CSS$l.thumbValue}`);
+        const minTickLabel = this.el.shadowRoot.querySelector(`.${CSS$l.tickMin}`);
+        const maxTickLabel = this.el.shadowRoot.querySelector(`.${CSS$l.tickMax}`);
         if (!minHandle && maxHandle && minTickLabel && maxTickLabel) {
             minTickLabel.style.opacity = this.isMinTickLabelObscured(minTickLabel, maxHandle) ? "0" : "1";
             maxTickLabel.style.opacity = this.isMaxTickLabelObscured(maxTickLabel, maxHandle) ? "0" : "1";