@esri/calcite-components 2.2.0-next.10 → 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.10
+ * v2.2.0-next.12
  */
 'use strict';
 
@@ -9108,10 +9108,7 @@ const CSS$1j = {
     container: "interaction-container",
 };
 function InteractiveContainer({ disabled }, children) {
-    return (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore-error - `inert` is missing from Stencil's types (see https://github.com/ionic-team/stencil/issues/5071)
-    hAsync("div", { class: CSS$1j.container, inert: disabled }, ...children));
+    return (hAsync("div", { class: CSS$1j.container, inert: disabled }, ...children));
 }
 
 const resolveMap = new WeakMap();
@@ -9806,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`.
@@ -13447,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.
  *
@@ -13499,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) {
@@ -13769,7 +13767,7 @@ class Button {
         this.setTooltipText = () => {
             const { contentEl } = this;
             if (contentEl) {
-                this.tooltipText = contentEl.offsetWidth < contentEl.scrollWidth ? this.el.innerText : null;
+                this.tooltipText = contentEl.offsetWidth < contentEl.scrollWidth ? this.el.innerText || null : null;
             }
         };
         this.setChildEl = (el) => {
@@ -14537,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();
@@ -20773,7 +20771,7 @@ function XButton({ disabled, key, label, onClick, ref, scale, }) {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jan 2024 20:04:12 GMT
+ * Generated on Tue, 09 Jan 2024 00:59:10 GMT
  */
 const calciteSize48 = "48px";
 
@@ -25810,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) => {
@@ -26012,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);
@@ -26021,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);
@@ -27349,21 +27348,15 @@ class InputDatePicker {
         };
         this.onInputWrapperClick = (event) => {
             const { range, endInput, startInput, currentOpenInput } = this;
-            if (!range || !this.open) {
-                this.open = !this.open;
-                return;
-            }
             const currentTarget = event.currentTarget;
             const position = currentTarget.getAttribute("data-position");
             const path = event.composedPath();
-            const wasToggleClicked = path.find((el) => {
-                return el.classList?.contains(CSS$M.toggleIcon);
-            });
+            const wasToggleClicked = path.find((el) => el.classList?.contains(CSS$M.toggleIcon));
             if (wasToggleClicked) {
                 const targetInput = position === "start" ? startInput : endInput;
                 targetInput.setFocus();
             }
-            if (currentOpenInput === position) {
+            if (!range || !this.open || currentOpenInput === position) {
                 this.open = !this.open;
             }
         };
@@ -27799,7 +27792,9 @@ class InputDatePicker {
             this.renderToggleIcon(this.open && this.focusedInput === "end"))))), hAsync(HiddenFormInputSlot, { component: this }), this.validationMessage ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     renderToggleIcon(open) {
-        return (hAsync("span", { class: CSS$M.toggleIcon }, hAsync("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
+        return (
+        // we set tab index to -1 to prevent delegatesFocus from stealing focus before we can set it
+        hAsync("span", { class: CSS$M.toggleIcon, tabIndex: -1 }, hAsync("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
     }
     setReferenceEl() {
         const { focusedInput, layout, endWrapper, startWrapper } = this;
@@ -28286,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) => {
@@ -28469,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);
@@ -28481,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);
@@ -28782,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) => {
@@ -28903,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);
@@ -28912,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);
@@ -34530,7 +34527,7 @@ class List$1 {
         this.handleSelector = "calcite-handle";
         this.listItems = [];
         this.mutationObserver = createObserver();
-        this.openItems = [];
+        this.visibleItems = [];
         this.handleDefaultSlotChange = (event) => {
             updateListItemChildren(getListItemChildren(event.target));
             if (this.parentListEl) {
@@ -34552,16 +34549,16 @@ class List$1 {
             }
         };
         this.updateSelectedItems = (emit = false) => {
-            this.selectedItems = this.openItems.filter((item) => item.selected);
+            this.selectedItems = this.visibleItems.filter((item) => item.selected);
             if (emit) {
                 this.calciteListChange.emit();
             }
         };
         this.updateFilteredItems = (emit = false) => {
-            const { openItems, filteredData, filterText } = this;
+            const { visibleItems, filteredData, filterText } = this;
             const values = filteredData.map((item) => item.value);
-            const lastDescendantItems = openItems?.filter((listItem) => openItems.every((li) => li === listItem || !listItem.contains(li)));
-            const filteredItems = openItems.filter((item) => !filterText || values.includes(item.value)) || [];
+            const lastDescendantItems = visibleItems?.filter((listItem) => visibleItems.every((li) => li === listItem || !listItem.contains(li)));
+            const filteredItems = visibleItems.filter((item) => !filterText || values.includes(item.value)) || [];
             const visibleParents = new WeakSet();
             lastDescendantItems.forEach((listItem) => this.filterElements({ el: listItem, filteredItems, visibleParents }));
             if (filteredItems.length > 0) {
@@ -34616,7 +34613,7 @@ class List$1 {
                     this.filterEl.items = this.dataForFilter;
                 }
             }
-            this.openItems = this.listItems.filter((item) => !item.closed);
+            this.visibleItems = this.listItems.filter((item) => !item.closed && !item.hidden);
             this.updateFilteredItems(emit);
             this.focusableItems = this.filteredItems.filter((item) => !item.disabled);
             this.setActiveListItem();
@@ -34933,13 +34930,13 @@ class List$1 {
         this.parentListEl = this.el.parentElement?.closest("calcite-list");
     }
     filterElements({ el, filteredItems, visibleParents, }) {
-        const hidden = !visibleParents.has(el) && !filteredItems.includes(el);
-        el.hidden = hidden;
+        const filterHidden = !visibleParents.has(el) && !filteredItems.includes(el);
+        el.filterHidden = filterHidden;
         const closestParent = el.parentElement.closest(parentSelector);
         if (!closestParent) {
             return;
         }
-        if (!hidden) {
+        if (!filterHidden) {
             visibleParents.add(closestParent);
         }
         this.filterElements({
@@ -35055,7 +35052,7 @@ class List$1 {
     }; }
 }
 
-const listItemCss = "/*!@:host([disabled])*/[disabled].sc-calcite-list-item-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-list-item-h *.sc-calcite-list-item,.sc-calcite-list-item-h[disabled].sc-calcite-list-item-s>*,.sc-calcite-list-item-h[disabled] .sc-calcite-list-item-s>*{pointer-events:none}/*!@:host*/.sc-calcite-list-item-h{display:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-color-brand);--calcite-list-item-spacing-indent:1rem}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-list-item-h[disabled] .sc-calcite-list-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-list-item-h [calcite-hydrated][disabled].sc-calcite-list-item{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-list-item{display:contents}/*!@.container*/.container.sc-calcite-list-item{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-color-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}/*!@.container **/.container.sc-calcite-list-item *.sc-calcite-list-item{box-sizing:border-box}/*!@.container--hover:hover*/.container--hover.sc-calcite-list-item:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2)}/*!@.container:active*/.container.sc-calcite-list-item:active{background-color:var(--calcite-color-foreground-1)}/*!@.container--border*/.container--border.sc-calcite-list-item{border-inline-start-width:4px;border-inline-start-style:solid}/*!@.container--border-selected*/.container--border-selected.sc-calcite-list-item{border-inline-start-color:var(--calcite-color-brand)}/*!@.container--border-unselected*/.container--border-unselected.sc-calcite-list-item{border-inline-start-color:transparent}/*!@.container:hover.container--border-unselected*/.container.sc-calcite-list-item:hover.container--border-unselected{border-color:var(--calcite-color-border-1)}/*!@.nested-container*/.nested-container.sc-calcite-list-item{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1)}/*!@.nested-container--hidden*/.nested-container--hidden.sc-calcite-list-item{display:none}/*!@.content-container*/.content-container.sc-calcite-list-item{display:flex;flex:1 1 auto;-webkit-user-select:none;user-select:none;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}/*!@tr,\ntd*/tr.sc-calcite-list-item,td.sc-calcite-list-item{outline-color:transparent}/*!@tr:focus,\ntd:focus*/tr.sc-calcite-list-item:focus,td.sc-calcite-list-item:focus{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          )}/*!@.content,\n.custom-content*/.content.sc-calcite-list-item,.custom-content.sc-calcite-list-item{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}/*!@.label,\n.description,\n.content-bottom*/.label.sc-calcite-list-item,.description.sc-calcite-list-item,.content-bottom.sc-calcite-list-item{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}/*!@.label:only-child,\n.description:only-child,\n.content-bottom:only-child*/.label.sc-calcite-list-item:only-child,.description.sc-calcite-list-item:only-child,.content-bottom.sc-calcite-list-item:only-child{margin:0px;padding-block:0.25rem}/*!@.label*/.label.sc-calcite-list-item{color:var(--calcite-color-text-1)}/*!@:host([selected]) .label*/[selected].sc-calcite-list-item-h .label.sc-calcite-list-item{font-weight:var(--calcite-font-weight-medium)}/*!@.description*/.description.sc-calcite-list-item{margin-block-start:0.125rem;color:var(--calcite-color-text-3)}/*!@:host([selected]) .description*/[selected].sc-calcite-list-item-h .description.sc-calcite-list-item{color:var(--calcite-color-text-2)}/*!@.content-start*/.content-start.sc-calcite-list-item{justify-content:flex-start}/*!@.content-end*/.content-end.sc-calcite-list-item{justify-content:flex-end}/*!@.content-start,\n.content-end*/.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item{flex:1 1 auto}/*!@.content-bottom*/.content-bottom.sc-calcite-list-item{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}/*!@.content-container--has-center-content .content-start,\n.content-container--has-center-content .content-end*/.content-container--has-center-content.sc-calcite-list-item .content-start.sc-calcite-list-item,.content-container--has-center-content.sc-calcite-list-item .content-end.sc-calcite-list-item{flex:0 1 auto}/*!@.selection-container*/.selection-container.sc-calcite-list-item{display:flex;padding-inline:0.75rem;color:var(--calcite-color-border-input)}/*!@.selection-container--single*/.selection-container--single.sc-calcite-list-item{color:transparent}/*!@:host(:not([disabled]):not([selected])) .container:hover .selection-container--single*/.sc-calcite-list-item-h:not([disabled]):not([selected]) .container.sc-calcite-list-item:hover .selection-container--single.sc-calcite-list-item{color:var(--calcite-color-border-1)}/*!@:host([selected]:hover) .selection-container,\n:host([selected]:hover) .selection-container--single,\n:host([selected]) .selection-container*/[selected].sc-calcite-list-item-h:hover .selection-container.sc-calcite-list-item,[selected].sc-calcite-list-item-h:hover .selection-container--single.sc-calcite-list-item,[selected].sc-calcite-list-item-h .selection-container.sc-calcite-list-item{color:var(--calcite-list-item-icon-color)}/*!@.open-container*/.open-container.sc-calcite-list-item{color:var(--calcite-color-text-3)}/*!@:host(:not([disabled])) .container:hover .open-container*/.sc-calcite-list-item-h:not([disabled]) .container.sc-calcite-list-item:hover .open-container.sc-calcite-list-item{color:var(--calcite-color-text-1)}/*!@.actions-start,\n.actions-end,\n.content-start,\n.content-end,\n.selection-container,\n.drag-container,\n.open-container*/.actions-start.sc-calcite-list-item,.actions-end.sc-calcite-list-item,.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item,.selection-container.sc-calcite-list-item,.drag-container.sc-calcite-list-item,.open-container.sc-calcite-list-item{display:flex;align-items:center}/*!@.open-container,\n.selection-container*/.open-container.sc-calcite-list-item,.selection-container.sc-calcite-list-item{cursor:pointer}/*!@.content-start ::slotted(calcite-icon),\n.content-end ::slotted(calcite-icon)*/.content-start .sc-calcite-list-item-s>calcite-icon,.content-end.sc-calcite-list-item-s>calcite-icon,.content-end .sc-calcite-list-item-s>calcite-icon{margin-inline:0.75rem;align-self:center}/*!@.actions-start ::slotted(calcite-action),\n.actions-start ::slotted(calcite-action-menu),\n.actions-start ::slotted(calcite-handle),\n.actions-start ::slotted(calcite-dropdown),\n.actions-end ::slotted(calcite-action),\n.actions-end ::slotted(calcite-action-menu),\n.actions-end ::slotted(calcite-handle),\n.actions-end ::slotted(calcite-dropdown)*/.actions-start .sc-calcite-list-item-s>calcite-action,.actions-start.sc-calcite-list-item-s>calcite-action-menu,.actions-start .sc-calcite-list-item-s>calcite-action-menu,.actions-start.sc-calcite-list-item-s>calcite-handle,.actions-start .sc-calcite-list-item-s>calcite-handle,.actions-start.sc-calcite-list-item-s>calcite-dropdown,.actions-start .sc-calcite-list-item-s>calcite-dropdown,.actions-end.sc-calcite-list-item-s>calcite-action,.actions-end .sc-calcite-list-item-s>calcite-action,.actions-end.sc-calcite-list-item-s>calcite-action-menu,.actions-end .sc-calcite-list-item-s>calcite-action-menu,.actions-end.sc-calcite-list-item-s>calcite-handle,.actions-end .sc-calcite-list-item-s>calcite-handle,.actions-end.sc-calcite-list-item-s>calcite-dropdown,.actions-end .sc-calcite-list-item-s>calcite-dropdown{align-self:stretch;color:inherit}/*!@::slotted(calcite-list-item)*/.sc-calcite-list-item-s>calcite-list-item{border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}/*!@::slotted(calcite-list:empty)*/.sc-calcite-list-item-s>calcite-list:empty{padding-block:0.75rem}/*!@:host([hidden])*/[hidden].sc-calcite-list-item-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-list-item{display:none}";
+const listItemCss = "/*!@:host([disabled])*/[disabled].sc-calcite-list-item-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-list-item-h *.sc-calcite-list-item,.sc-calcite-list-item-h[disabled].sc-calcite-list-item-s>*,.sc-calcite-list-item-h[disabled] .sc-calcite-list-item-s>*{pointer-events:none}/*!@:host*/.sc-calcite-list-item-h{display:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-color-brand);--calcite-list-item-spacing-indent:1rem}/*!@:host([filter-hidden])*/[filter-hidden].sc-calcite-list-item-h{display:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-list-item-h[disabled] .sc-calcite-list-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-list-item-h [calcite-hydrated][disabled].sc-calcite-list-item{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-list-item{display:contents}/*!@.container*/.container.sc-calcite-list-item{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-color-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}/*!@.container **/.container.sc-calcite-list-item *.sc-calcite-list-item{box-sizing:border-box}/*!@.container--hover:hover*/.container--hover.sc-calcite-list-item:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2)}/*!@.container:active*/.container.sc-calcite-list-item:active{background-color:var(--calcite-color-foreground-1)}/*!@.container--border*/.container--border.sc-calcite-list-item{border-inline-start-width:4px;border-inline-start-style:solid}/*!@.container--border-selected*/.container--border-selected.sc-calcite-list-item{border-inline-start-color:var(--calcite-color-brand)}/*!@.container--border-unselected*/.container--border-unselected.sc-calcite-list-item{border-inline-start-color:transparent}/*!@.container:hover.container--border-unselected*/.container.sc-calcite-list-item:hover.container--border-unselected{border-color:var(--calcite-color-border-1)}/*!@.nested-container*/.nested-container.sc-calcite-list-item{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1)}/*!@.nested-container--hidden*/.nested-container--hidden.sc-calcite-list-item{display:none}/*!@.content-container*/.content-container.sc-calcite-list-item{display:flex;flex:1 1 auto;-webkit-user-select:none;user-select:none;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}/*!@tr,\ntd*/tr.sc-calcite-list-item,td.sc-calcite-list-item{outline-color:transparent}/*!@tr:focus,\ntd:focus*/tr.sc-calcite-list-item:focus,td.sc-calcite-list-item:focus{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          )}/*!@.content,\n.custom-content*/.content.sc-calcite-list-item,.custom-content.sc-calcite-list-item{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}/*!@.label,\n.description,\n.content-bottom*/.label.sc-calcite-list-item,.description.sc-calcite-list-item,.content-bottom.sc-calcite-list-item{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}/*!@.label:only-child,\n.description:only-child,\n.content-bottom:only-child*/.label.sc-calcite-list-item:only-child,.description.sc-calcite-list-item:only-child,.content-bottom.sc-calcite-list-item:only-child{margin:0px;padding-block:0.25rem}/*!@.label*/.label.sc-calcite-list-item{color:var(--calcite-color-text-1)}/*!@:host([selected]) .label*/[selected].sc-calcite-list-item-h .label.sc-calcite-list-item{font-weight:var(--calcite-font-weight-medium)}/*!@.description*/.description.sc-calcite-list-item{margin-block-start:0.125rem;color:var(--calcite-color-text-3)}/*!@:host([selected]) .description*/[selected].sc-calcite-list-item-h .description.sc-calcite-list-item{color:var(--calcite-color-text-2)}/*!@.content-start*/.content-start.sc-calcite-list-item{justify-content:flex-start}/*!@.content-end*/.content-end.sc-calcite-list-item{justify-content:flex-end}/*!@.content-start,\n.content-end*/.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item{flex:1 1 auto}/*!@.content-bottom*/.content-bottom.sc-calcite-list-item{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}/*!@.content-container--has-center-content .content-start,\n.content-container--has-center-content .content-end*/.content-container--has-center-content.sc-calcite-list-item .content-start.sc-calcite-list-item,.content-container--has-center-content.sc-calcite-list-item .content-end.sc-calcite-list-item{flex:0 1 auto}/*!@.selection-container*/.selection-container.sc-calcite-list-item{display:flex;padding-inline:0.75rem;color:var(--calcite-color-border-input)}/*!@.selection-container--single*/.selection-container--single.sc-calcite-list-item{color:transparent}/*!@:host(:not([disabled]):not([selected])) .container:hover .selection-container--single*/.sc-calcite-list-item-h:not([disabled]):not([selected]) .container.sc-calcite-list-item:hover .selection-container--single.sc-calcite-list-item{color:var(--calcite-color-border-1)}/*!@:host([selected]:hover) .selection-container,\n:host([selected]:hover) .selection-container--single,\n:host([selected]) .selection-container*/[selected].sc-calcite-list-item-h:hover .selection-container.sc-calcite-list-item,[selected].sc-calcite-list-item-h:hover .selection-container--single.sc-calcite-list-item,[selected].sc-calcite-list-item-h .selection-container.sc-calcite-list-item{color:var(--calcite-list-item-icon-color)}/*!@.open-container*/.open-container.sc-calcite-list-item{color:var(--calcite-color-text-3)}/*!@:host(:not([disabled])) .container:hover .open-container*/.sc-calcite-list-item-h:not([disabled]) .container.sc-calcite-list-item:hover .open-container.sc-calcite-list-item{color:var(--calcite-color-text-1)}/*!@.actions-start,\n.actions-end,\n.content-start,\n.content-end,\n.selection-container,\n.drag-container,\n.open-container*/.actions-start.sc-calcite-list-item,.actions-end.sc-calcite-list-item,.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item,.selection-container.sc-calcite-list-item,.drag-container.sc-calcite-list-item,.open-container.sc-calcite-list-item{display:flex;align-items:center}/*!@.open-container,\n.selection-container*/.open-container.sc-calcite-list-item,.selection-container.sc-calcite-list-item{cursor:pointer}/*!@.content-start ::slotted(calcite-icon),\n.content-end ::slotted(calcite-icon)*/.content-start .sc-calcite-list-item-s>calcite-icon,.content-end.sc-calcite-list-item-s>calcite-icon,.content-end .sc-calcite-list-item-s>calcite-icon{margin-inline:0.75rem;align-self:center}/*!@.actions-start ::slotted(calcite-action),\n.actions-start ::slotted(calcite-action-menu),\n.actions-start ::slotted(calcite-handle),\n.actions-start ::slotted(calcite-dropdown),\n.actions-end ::slotted(calcite-action),\n.actions-end ::slotted(calcite-action-menu),\n.actions-end ::slotted(calcite-handle),\n.actions-end ::slotted(calcite-dropdown)*/.actions-start .sc-calcite-list-item-s>calcite-action,.actions-start.sc-calcite-list-item-s>calcite-action-menu,.actions-start .sc-calcite-list-item-s>calcite-action-menu,.actions-start.sc-calcite-list-item-s>calcite-handle,.actions-start .sc-calcite-list-item-s>calcite-handle,.actions-start.sc-calcite-list-item-s>calcite-dropdown,.actions-start .sc-calcite-list-item-s>calcite-dropdown,.actions-end.sc-calcite-list-item-s>calcite-action,.actions-end .sc-calcite-list-item-s>calcite-action,.actions-end.sc-calcite-list-item-s>calcite-action-menu,.actions-end .sc-calcite-list-item-s>calcite-action-menu,.actions-end.sc-calcite-list-item-s>calcite-handle,.actions-end .sc-calcite-list-item-s>calcite-handle,.actions-end.sc-calcite-list-item-s>calcite-dropdown,.actions-end .sc-calcite-list-item-s>calcite-dropdown{align-self:stretch;color:inherit}/*!@::slotted(calcite-list-item)*/.sc-calcite-list-item-s>calcite-list-item{border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}/*!@::slotted(calcite-list:empty)*/.sc-calcite-list-item-s>calcite-list:empty{padding-block:0.75rem}/*!@:host([hidden])*/[hidden].sc-calcite-list-item-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-list-item{display:none}";
 
 const focusMap = new Map();
 const listSelector = "calcite-list";
@@ -35241,6 +35238,7 @@ class ListItem {
         this.dragDisabled = false;
         this.dragHandle = false;
         this.dragSelected = false;
+        this.filterHidden = false;
         this.label = undefined;
         this.metadata = undefined;
         this.open = false;
@@ -35369,17 +35367,10 @@ class ListItem {
             ref: (el) => (this.handleGridEl = el) }, hAsync("calcite-handle", { disabled: dragDisabled, label: label, onCalciteHandleChange: this.dragHandleSelectedChangeHandler, selected: dragSelected, setPosition: setPosition, setSize: setSize }))) : null;
     }
     renderOpen() {
-        const { el, open, openable, parentListEl } = this;
+        const { el, open, openable } = this;
         const dir = getElementDir(el);
-        const icon = openable
-            ? open
-                ? ICONS$8.open
-                : dir === "rtl"
-                    ? ICONS$8.closedRTL
-                    : ICONS$8.closedLTR
-            : ICONS$8.blank;
-        const clickHandler = openable ? this.handleToggleClick : this.handleItemClick;
-        return openable || parentListEl?.openable ? (hAsync("td", { class: CSS$H.openContainer, key: "open-container", onClick: clickHandler }, hAsync("calcite-icon", { icon: icon, key: icon, scale: "s" }))) : null;
+        const icon = open ? ICONS$8.open : dir === "rtl" ? ICONS$8.closedRTL : ICONS$8.closedLTR;
+        return openable ? (hAsync("td", { class: CSS$H.openContainer, key: "open-container", onClick: this.handleToggleClick }, hAsync("calcite-icon", { icon: icon, key: icon, scale: "s" }))) : null;
     }
     renderActionsStart() {
         const { label, hasActionsStart } = this;
@@ -35470,18 +35461,10 @@ class ListItem {
         if (!slotEl) {
             return;
         }
-        const { parentListEl } = this;
         const listItemChildren = getListItemChildren(slotEl);
         const listItemChildLists = getListItemChildLists(slotEl);
         updateListItemChildren(listItemChildren);
-        const openable = !!listItemChildren.length || !!listItemChildLists.length;
-        if (openable && parentListEl && !parentListEl.openable) {
-            parentListEl.openable = true;
-        }
-        this.openable = openable;
-        if (!openable) {
-            this.open = false;
-        }
+        this.openable = !!listItemChildren.length || !!listItemChildLists.length;
     }
     getGridCells() {
         return [this.handleGridEl, this.actionsStartEl, this.contentEl, this.actionsEndEl].filter((el) => el && !el.hidden);
@@ -35509,6 +35492,7 @@ class ListItem {
             "dragDisabled": [516, "drag-disabled"],
             "dragHandle": [4, "drag-handle"],
             "dragSelected": [1540, "drag-selected"],
+            "filterHidden": [516, "filter-hidden"],
             "label": [1],
             "metadata": [16],
             "open": [1540],
@@ -35536,7 +35520,7 @@ class ListItem {
         },
         "$listeners$": [[0, "calciteInternalListItemGroupDefaultSlotChange", "handleCalciteInternalListDefaultSlotChanges"], [0, "calciteInternalListDefaultSlotChange", "handleCalciteInternalListDefaultSlotChanges"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["closable", "closable"], ["closed", "closed"], ["disabled", "disabled"], ["dragDisabled", "drag-disabled"], ["dragSelected", "drag-selected"], ["open", "open"], ["selected", "selected"]]
+        "$attrsToReflect$": [["closable", "closable"], ["closed", "closed"], ["disabled", "disabled"], ["dragDisabled", "drag-disabled"], ["dragSelected", "drag-selected"], ["filterHidden", "filter-hidden"], ["open", "open"], ["selected", "selected"]]
     }; }
 }
 
@@ -35545,7 +35529,7 @@ const CSS$D = {
     heading: "heading",
 };
 
-const listItemGroupCss = "/*!@:host([disabled])*/[disabled].sc-calcite-list-item-group-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-list-item-group-h *.sc-calcite-list-item-group,.sc-calcite-list-item-group-h[disabled].sc-calcite-list-item-group-s>*,.sc-calcite-list-item-group-h[disabled] .sc-calcite-list-item-group-s>*{pointer-events:none}/*!@:host*/.sc-calcite-list-item-group-h{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1);--calcite-list-item-spacing-indent:1rem}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-list-item-group-h[disabled] .sc-calcite-list-item-group-s>[calcite-hydrated][disabled],[disabled].sc-calcite-list-item-group-h [calcite-hydrated][disabled].sc-calcite-list-item-group{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-list-item-group{display:contents}/*!@.container*/.container.sc-calcite-list-item-group{margin:0px;display:flex;flex:1 1 0%;background-color:var(--calcite-color-foreground-2);padding:0.75rem;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-2)}/*!@.heading*/.heading.sc-calcite-list-item-group{padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}/*!@::slotted(calcite-list-item)*/.sc-calcite-list-item-group-s>calcite-list-item{--tw-shadow:0 -1px 0 var(--calcite-color-border-3);--tw-shadow-colored:0 -1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:1px}/*!@::slotted(calcite-list-item:nth-child(1 of :not([hidden])))*/(calcite-list-item.sc-calcite-list-item-group-h:nth-child(1 of :not(__ph-0__))){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:0px}/*!@:host([hidden])*/[hidden].sc-calcite-list-item-group-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-list-item-group{display:none}";
+const listItemGroupCss = "/*!@:host([disabled])*/[disabled].sc-calcite-list-item-group-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-list-item-group-h *.sc-calcite-list-item-group,.sc-calcite-list-item-group-h[disabled].sc-calcite-list-item-group-s>*,.sc-calcite-list-item-group-h[disabled] .sc-calcite-list-item-group-s>*{pointer-events:none}/*!@:host*/.sc-calcite-list-item-group-h{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1);--calcite-list-item-spacing-indent:1rem}/*!@:host([filter-hidden])*/[filter-hidden].sc-calcite-list-item-group-h{display:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-list-item-group-h[disabled] .sc-calcite-list-item-group-s>[calcite-hydrated][disabled],[disabled].sc-calcite-list-item-group-h [calcite-hydrated][disabled].sc-calcite-list-item-group{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-list-item-group{display:contents}/*!@.container*/.container.sc-calcite-list-item-group{margin:0px;display:flex;flex:1 1 0%;background-color:var(--calcite-color-foreground-2);padding:0.75rem;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-2)}/*!@.heading*/.heading.sc-calcite-list-item-group{padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}/*!@::slotted(calcite-list-item)*/.sc-calcite-list-item-group-s>calcite-list-item{--tw-shadow:0 -1px 0 var(--calcite-color-border-3);--tw-shadow-colored:0 -1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:1px}/*!@::slotted(calcite-list-item:nth-child(1 of :not([hidden])))*/(calcite-list-item.sc-calcite-list-item-group-h:nth-child(1 of :not(__ph-0__))){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:0px}/*!@:host([hidden])*/[hidden].sc-calcite-list-item-group-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-list-item-group{display:none}";
 
 /**
  * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
@@ -35563,6 +35547,7 @@ class ListItemGroup {
             this.calciteInternalListItemGroupDefaultSlotChange.emit();
         };
         this.disabled = false;
+        this.filterHidden = false;
         this.heading = undefined;
         this.visualLevel = null;
     }
@@ -35598,12 +35583,13 @@ class ListItemGroup {
         "$tagName$": "calcite-list-item-group",
         "$members$": {
             "disabled": [516],
+            "filterHidden": [516, "filter-hidden"],
             "heading": [513],
             "visualLevel": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["disabled", "disabled"], ["heading", "heading"]]
+        "$attrsToReflect$": [["disabled", "disabled"], ["filterHidden", "filter-hidden"], ["heading", "heading"]]
     }; }
 }
 
@@ -36748,7 +36734,7 @@ const ICONS$6 = {
 
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jan 2024 20:04:14 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
@@ -40139,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() {
@@ -40874,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;
 
@@ -40894,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;
@@ -40946,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;
@@ -41060,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;
     }
     //--------------------------------------------------------------------------
     //
@@ -41329,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) });
         }
@@ -41355,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") {
@@ -41565,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;
@@ -41611,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)`;
@@ -41641,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";
@@ -47722,7 +47664,7 @@ class ValueList {
     //  Public Methods
     //
     // --------------------------------------------------------------------------
-    /** Returns the currently selected items */
+    /** Returns the component's selected items. */
     async getSelectedItems() {
         return this.selectedValues;
     }