@esri/calcite-components 1.4.0-next.23 → 1.4.0-next.25

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

@@ -1,12 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
-import { S as Sortable } from './sortable.esm.js';
 import { u as updateHostInteraction } from './interactive.js';
 import { c as createObserver } from './observers.js';
+import { d as disconnectSortableComponent, c as connectSortableComponent, o as onSortingStart, a as onSortingEnd } from './sortableComponent.js';
+import { k as focusElement } from './dom.js';
 
 const CSS = {
   sortItem: "sort-item",
@@ -25,9 +26,7 @@ const SortableList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
     this.items = [];
     this.mutationObserver = createObserver("mutation", () => {
-      this.cleanUpDragAndDrop();
-      this.items = Array.from(this.el.children);
-      this.setUpDragAndDrop();
+      this.setUpSorting();
     });
     this.dragSelector = undefined;
     this.group = undefined;
@@ -35,7 +34,6 @@ const SortableList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.layout = "vertical";
     this.disabled = false;
     this.loading = false;
-    this.handleActivated = false;
   }
   // --------------------------------------------------------------------------
   //
@@ -43,13 +41,12 @@ const SortableList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    this.items = Array.from(this.el.children);
-    this.setUpDragAndDrop();
+    this.setUpSorting();
     this.beginObserving();
   }
   disconnectedCallback() {
-    this.mutationObserver?.disconnect();
-    this.cleanUpDragAndDrop();
+    disconnectSortableComponent(this);
+    this.endObserving();
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -64,7 +61,9 @@ const SortableList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   // --------------------------------------------------------------------------
   handleNudgeEvent(event) {
     const { direction } = event.detail;
-    const handle = event.target;
+    const handle = event
+      .composedPath()
+      .find((el) => el.matches(this.handleSelector));
     const sortItem = this.items.find((item) => {
       return item.contains(handle) || event.composedPath().includes(item);
     });
@@ -91,7 +90,7 @@ const SortableList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         buddyIndex = startingIndex + 2;
       }
     }
-    this.mutationObserver?.disconnect();
+    this.endObserving();
     if (appendInstead) {
       sortItem.parentElement.appendChild(sortItem);
     }
@@ -99,42 +98,43 @@ const SortableList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
     }
     this.items = Array.from(this.el.children);
-    handle.activated = true;
-    handle.setFocus();
     this.beginObserving();
+    requestAnimationFrame(() => focusElement(handle));
+    if ("activated" in handle) {
+      handle.activated = true;
+    }
   }
-  setUpDragAndDrop() {
-    this.cleanUpDragAndDrop();
-    const options = {
+  setUpSorting() {
+    const { dragSelector, group, handleSelector } = this;
+    this.items = Array.from(this.el.children);
+    const sortableOptions = {
       dataIdAttr: "id",
-      group: this.group,
-      handle: this.handleSelector,
-      // Changed sorting within list
-      onUpdate: () => {
-        this.items = Array.from(this.el.children);
-        this.calciteListOrderChange.emit();
-      },
-      // Element dragging started
+      group,
+      handle: handleSelector,
       onStart: () => {
-        this.mutationObserver?.disconnect();
+        this.endObserving();
+        onSortingStart(this);
       },
-      // Element dragging ended
       onEnd: () => {
+        onSortingEnd(this);
         this.beginObserving();
+      },
+      onUpdate: () => {
+        this.items = Array.from(this.el.children);
+        this.calciteListOrderChange.emit();
       }
     };
-    if (this.dragSelector) {
-      options.draggable = this.dragSelector;
+    if (dragSelector) {
+      sortableOptions.draggable = dragSelector;
     }
-    this.sortable = Sortable.create(this.el, options);
-  }
-  cleanUpDragAndDrop() {
-    this.sortable?.destroy();
-    this.sortable = null;
+    connectSortableComponent(this, sortableOptions);
   }
   beginObserving() {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
+  endObserving() {
+    this.mutationObserver?.disconnect();
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -157,8 +157,7 @@ const SortableList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "handleSelector": [513, "handle-selector"],
     "layout": [513],
     "disabled": [516],
-    "loading": [516],
-    "handleActivated": [32]
+    "loading": [516]
   }, [[0, "calciteHandleNudge", "calciteHandleNudgeNextHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/calcite-split-button.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { u as updateHostInteraction } from './interactive.js';

package/dist/components/calcite-stack.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalciteStack extends Components.CalciteStack, HTMLElement {}
+export const CalciteStack: {
+  prototype: CalciteStack;
+  new (): CalciteStack;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/calcite-stack.js

@@ -0,0 +1,107 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.4.0-next.25
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
+import { e as slotChangeHasAssignedElement } from './dom.js';
+
+const CSS = {
+  container: "container",
+  actionsStart: "actions-start",
+  contentStart: "content-start",
+  content: "content",
+  contentEnd: "content-end",
+  actionsEnd: "actions-end"
+};
+const SLOTS = {
+  actionsStart: "actions-start",
+  contentStart: "content-start",
+  contentEnd: "content-end",
+  actionsEnd: "actions-end"
+};
+
+const stackCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]) .content{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) .content *,:host([disabled]) .content ::slotted(*){pointer-events:none}:host{display:flex;flex:1 1 0%;flex-direction:column}.container{display:flex;flex:1 1 auto;align-items:stretch;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}.content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;font-size:var(--calcite-font-size--2);line-height:1.375;padding-inline:var(--calcite-stack-padding-inline, 0.75rem);padding-block:var(--calcite-stack-padding-block, 0.5rem)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:0 1 auto}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items:center}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-end ::slotted(calcite-action){align-self:stretch;color:inherit}[hidden]{display:none}";
+
+const Stack = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.handleActionsStartSlotChange = (event) => {
+      this.hasActionsStart = slotChangeHasAssignedElement(event);
+    };
+    this.handleActionsEndSlotChange = (event) => {
+      this.hasActionsEnd = slotChangeHasAssignedElement(event);
+    };
+    this.handleContentStartSlotChange = (event) => {
+      this.hasContentStart = slotChangeHasAssignedElement(event);
+    };
+    this.handleContentEndSlotChange = (event) => {
+      this.hasContentEnd = slotChangeHasAssignedElement(event);
+    };
+    this.disabled = false;
+    this.hasActionsStart = false;
+    this.hasActionsEnd = false;
+    this.hasContentStart = false;
+    this.hasContentEnd = false;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderActionsStart() {
+    const { hasActionsStart } = this;
+    return (h("div", { class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
+  }
+  renderActionsEnd() {
+    const { hasActionsEnd } = this;
+    return (h("div", { class: CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
+  }
+  renderContentStart() {
+    const { hasContentStart } = this;
+    return (h("div", { class: CSS.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+  }
+  renderDefaultContent() {
+    return (h("div", { class: CSS.content }, h("slot", null)));
+  }
+  renderContentEnd() {
+    const { hasContentEnd } = this;
+    return (h("div", { class: CSS.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: CSS.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
+  }
+  static get style() { return stackCss; }
+}, [1, "calcite-stack", {
+    "disabled": [516],
+    "hasActionsStart": [32],
+    "hasActionsEnd": [32],
+    "hasContentStart": [32],
+    "hasContentEnd": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-stack"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-stack":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Stack);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteStack = Stack;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteStack, defineCustomElement };

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getElementProp, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-stepper.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { i as focusElementInGroup } from './dom.js';

package/dist/components/calcite-switch.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { S as Switch, d as defineCustomElement$1 } from './switch.js';
 

package/dist/components/calcite-tab-nav.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { T as TabNav, d as defineCustomElement$1 } from './tab-nav.js';
 

package/dist/components/calcite-tab-title.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { T as TabTitle, d as defineCustomElement$1 } from './tab-title.js';
 

package/dist/components/calcite-tab.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { T as Tab, d as defineCustomElement$1 } from './tab.js';
 

package/dist/components/calcite-tabs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { T as Tabs, d as defineCustomElement$1 } from './tabs.js';
 

package/dist/components/calcite-text-area.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';

package/dist/components/calcite-tile-select-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { u as updateHostInteraction } from './interactive.js';

package/dist/components/calcite-tile-select.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';

package/dist/components/calcite-tile.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { T as Tile, d as defineCustomElement$1 } from './tile.js';
 

package/dist/components/calcite-time-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { T as TimePicker, d as defineCustomElement$1 } from './time-picker.js';
 

package/dist/components/calcite-tip-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 

package/dist/components/calcite-tip-manager.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as getElementDir, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-tip.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/calcite-tooltip.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { T as Tooltip, d as defineCustomElement$1 } from './tooltip.js';
 

package/dist/components/calcite-tree-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { b as getSlotted, e as slotChangeHasAssignedElement, c as getElementDir, C as CSS_UTILITY, t as toAriaBoolean, q as filterDirectChildren, o as nodeListToArray } from './dom.js';

package/dist/components/calcite-tree.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { k as focusElement, o as nodeListToArray, p as getRootNode } from './dom.js';

package/dist/components/calcite-value-list-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/calcite-value-list.js

@@ -1,16 +1,17 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
-import { S as Sortable } from './sortable.esm.js';
 import { u as updateHostInteraction } from './interactive.js';
 import { a as setUpLoadableComponent, s as setComponentLoaded, c as componentLoaded } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { c as createObserver } from './observers.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { q as getItemIndex, m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as handleFilterEvent, g as getItemData, k as keyDownHandler, t as moveItemIndex, i as initialize, c as initializeObserver, f as handleInitialFilter, e as cleanUpObserver, n as calciteListFocusOutHandler, r as removeItem, j as calciteListItemChangeHandler, l as calciteInternalListItemValueChangeHandler, o as setUpItems, p as setFocus, L as List } from './shared-list-render.js';
+import { d as disconnectSortableComponent, c as connectSortableComponent, o as onSortingStart, a as onSortingEnd } from './sortableComponent.js';
+import { k as focusElement } from './dom.js';
 import { d as defineCustomElement$7 } from './filter.js';
 import { d as defineCustomElement$6 } from './icon.js';
 import { d as defineCustomElement$5 } from './input.js';
@@ -113,7 +114,7 @@ const ValueList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
       this.items = this.getItems();
       this.calciteListOrderChange.emit(this.items.map(({ value }) => value));
-      requestAnimationFrame(() => handle?.focus());
+      requestAnimationFrame(() => focusElement(handle));
       item.handleActivated = true;
       this.updateHandleAriaLabel(handle, getScreenReaderText(item, "change", this));
     };
@@ -160,6 +161,7 @@ const ValueList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     connectMessages(this);
     initialize.call(this);
     initializeObserver.call(this);
+    this.setUpSorting();
   }
   async componentWillLoad() {
     setUpLoadableComponent(this);
@@ -167,17 +169,16 @@ const ValueList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   componentDidLoad() {
     setComponentLoaded(this);
-    this.setUpDragAndDrop();
     handleInitialFilter.call(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
+    disconnectSortableComponent(this);
     disconnectLocalized(this);
     disconnectMessages(this);
     cleanUpObserver.call(this);
-    this.cleanUpDragAndDrop();
   }
   calciteListFocusOutHandler(event) {
     calciteListFocusOutHandler.call(this, event);
@@ -206,33 +207,38 @@ const ValueList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   setUpItems() {
     setUpItems.call(this, "calcite-value-list-item");
+    this.setUpSorting();
   }
   setUpFilter() {
     if (this.filterEnabled) {
       this.dataForFilter = this.getItemData();
     }
   }
-  setUpDragAndDrop() {
-    this.cleanUpDragAndDrop();
-    if (!this.dragEnabled) {
+  setUpSorting() {
+    const { dragEnabled, group } = this;
+    if (!dragEnabled) {
       return;
     }
-    this.sortable = Sortable.create(this.el, {
+    connectSortableComponent(this, {
       dataIdAttr: "id",
+      group,
       handle: `.${CSS.handle}`,
       draggable: "calcite-value-list-item",
-      group: this.group,
-      onSort: () => {
+      onStart: () => {
+        cleanUpObserver.call(this);
+        onSortingStart(this);
+      },
+      onEnd: () => {
+        onSortingEnd(this);
+        initializeObserver.call(this);
+      },
+      onUpdate: () => {
         this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
         const values = this.items.map((item) => item.value);
         this.calciteListOrderChange.emit(values);
       }
     });
   }
-  cleanUpDragAndDrop() {
-    this.sortable?.destroy();
-    this.sortable = null;
-  }
   handleBlur() {
     if (this.dragEnabled) {
       this.updateScreenReaderText("");

package/dist/components/checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean } from './dom.js';

package/dist/components/chip.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client/index.js';
 import { e as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';

package/dist/components/color-picker-hex-input.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { j as isLonghandHex, i as isValidHex, r as rgbToHex, n as normalizeHex, o as opacityToAlpha, a as hexify, k as hexChar, c as alphaToOpacity } from './utils.js';

package/dist/components/color-picker-swatch.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as color } from './index2.js';

package/dist/components/composed-offset-position.esm.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 /* eslint-disable @typescript-eslint/ban-types */
 function offsetParent(element) {

package/dist/components/conditionalSlot.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { forceUpdate } from '@stencil/core/internal/client/index.js';
 import { c as createObserver } from './observers.js';

package/dist/components/date-picker-day.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.23
+ * v1.4.0-next.25
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { b as dateToISO } from './date.js';