@esri/calcite-components 2.2.0-next.3 → 2.2.0-next.5

package/dist/esm/calcite-input-time-zone.entry.js

@@ -1,22 +1,22 @@
 /*!
  * 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.3
+ * v2.2.0-next.5
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-bb33e690.js';
-import { c as connectLabel, d as disconnectLabel } from './label-7a797a8a.js';
-import { u as updateHostInteraction, I as InteractiveContainer } from './interactive-b0008218.js';
-import { e as getDateTimeFormat, c as connectLocalized, d as disconnectLocalized } from './locale-d0a7b749.js';
-import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-873a0eb6.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-388e5055.js';
-import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form-a24ad917.js';
-import './dom-afa4ffe6.js';
-import './guid-459bec8a.js';
-import './resources-a15ffb41.js';
-import './component-deaceeba.js';
-import './browser-3d269982.js';
-import './key-c1d55161.js';
-import './observers-d5968520.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-df3b8b6e.js';
+import { c as connectLabel, d as disconnectLabel } from './label-7cacb8c6.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive-f29315c9.js';
+import { e as getDateTimeFormat, c as connectLocalized, d as disconnectLocalized } from './locale-2be4c54f.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-193eb2e2.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-5baa5bbb.js';
+import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form-03697097.js';
+import './dom-9b2a186a.js';
+import './guid-96ea246d.js';
+import './resources-77e3e2de.js';
+import './component-e65a4497.js';
+import './browser-963eddc7.js';
+import './key-e2da0bef.js';
+import './observers-79f91cbc.js';
 
 const hourToMinutes = 60;
 const timeZoneNameBlockList = [
@@ -70,8 +70,8 @@ async function createTimeZoneItems(locale, messages, mode, referenceDate) {
     if (mode === "offset") {
         if (!timeZoneGroups) {
             timeZoneGroups = Promise.all([
-                import('./index-f21a511a.js'),
-                import('./index-9d17a923.js'),
+                import('./index-6da309bb.js'),
+                import('./index-19dc5a83.js'),
             ]);
         }
         return timeZoneGroups.then(async ([{ groupTimeZones }, { DateEngine }]) => {

package/dist/esm/calcite-input.entry.js

@@ -1,23 +1,23 @@
 /*!
  * 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.3
+ * v2.2.0-next.5
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-bb33e690.js';
-import { e as getSlotted, i as isPrimaryPointerButton, h as setRequestedIcon, g as getElementDir } from './dom-afa4ffe6.js';
-import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-a24ad917.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-b0008218.js';
-import { n as numberKeys } from './key-c1d55161.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-7a797a8a.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-388e5055.js';
-import { n as numberStringFormatter, i as isValidNumber, p as parseNumberString, s as sanitizeNumberString, a as addLocalizedTrailingDecimalZeros, c as connectLocalized, d as disconnectLocalized, B as BigDecimal } from './locale-d0a7b749.js';
-import { c as createObserver } from './observers-d5968520.js';
-import { C as CSS_UTILITY } from './resources-a15ffb41.js';
-import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-873a0eb6.js';
-import { g as getIconScale } from './component-deaceeba.js';
-import { V as Validation } from './Validation-c75285cf.js';
-import './guid-459bec8a.js';
-import './browser-3d269982.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-df3b8b6e.js';
+import { e as getSlotted, i as isPrimaryPointerButton, h as setRequestedIcon, g as getElementDir } from './dom-9b2a186a.js';
+import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-03697097.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-f29315c9.js';
+import { n as numberKeys } from './key-e2da0bef.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-7cacb8c6.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-5baa5bbb.js';
+import { n as numberStringFormatter, i as isValidNumber, p as parseNumberString, s as sanitizeNumberString, a as addLocalizedTrailingDecimalZeros, c as connectLocalized, d as disconnectLocalized, B as BigDecimal } from './locale-2be4c54f.js';
+import { c as createObserver } from './observers-79f91cbc.js';
+import { C as CSS_UTILITY } from './resources-77e3e2de.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-193eb2e2.js';
+import { g as getIconScale } from './component-e65a4497.js';
+import { V as Validation } from './Validation-dc524ef1.js';
+import './guid-96ea246d.js';
+import './browser-963eddc7.js';
 
 const CSS = {
     loader: "loader",

package/dist/esm/calcite-label.entry.js

@@ -1,14 +1,14 @@
 /*!
  * 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.3
+ * v2.2.0-next.5
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-bb33e690.js';
-import { a as associateExplicitLabelToUnlabeledComponent, l as labelConnectedEvent, b as labelDisconnectedEvent } from './label-7a797a8a.js';
-import './dom-afa4ffe6.js';
-import './guid-459bec8a.js';
-import './resources-a15ffb41.js';
-import './component-deaceeba.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-df3b8b6e.js';
+import { a as associateExplicitLabelToUnlabeledComponent, l as labelConnectedEvent, b as labelDisconnectedEvent } from './label-7cacb8c6.js';
+import './dom-9b2a186a.js';
+import './guid-96ea246d.js';
+import './resources-77e3e2de.js';
+import './component-e65a4497.js';
 
 const CSS = {
     container: "container",

package/dist/esm/calcite-link.entry.js

@@ -1,15 +1,15 @@
 /*!
  * 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.3
+ * v2.2.0-next.5
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-bb33e690.js';
-import { g as getElementDir, d as focusElement } from './dom-afa4ffe6.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-b0008218.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-388e5055.js';
-import { C as CSS_UTILITY } from './resources-a15ffb41.js';
-import './guid-459bec8a.js';
-import './browser-3d269982.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-df3b8b6e.js';
+import { g as getElementDir, d as focusElement } from './dom-9b2a186a.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-f29315c9.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-5baa5bbb.js';
+import { C as CSS_UTILITY } from './resources-77e3e2de.js';
+import './guid-96ea246d.js';
+import './browser-963eddc7.js';
 
 const linkCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline}:host a,:host span{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0px;border-style:none;font-family:inherit;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host span:hover{text-decoration:none}:host a,:host span{outline-color:transparent}:host a:focus,:host span: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          )}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;margin-block-start:-0.25em}:host .calcite-link--icon.icon-start{margin-inline-end:0.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:0.5rem}:host span,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0px;color:var(--calcite-color-text-link);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor, currentColor), linear-gradient(var(--calcite-color-brand-underline), var(--calcite-color-brand-underline));background-position-x:0%, 100%;background-position-y:min(1.5em, 100%);background-repeat:no-repeat, no-repeat;background-size:0% 1px, 100% 1px}:host span:hover,:host span:focus,:host a:hover,:host a:focus{background-size:100% 1px, 100% 1px}:host span:active,:host a:active{background-size:100% 2px, 100% 2px}:host span.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%, 100% 100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 

package/dist/esm/calcite-list_3.entry.js

@@ -1,22 +1,22 @@
 /*!
  * 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.3
+ * v2.2.0-next.5
  */
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-bb33e690.js';
-import { b as slotChangeHasAssignedElement, t as toAriaBoolean, D as getFirstTabbable, g as getElementDir } from './dom-afa4ffe6.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-b0008218.js';
-import { c as createObserver } from './observers-d5968520.js';
-import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-00aec81d.js';
-import { S as SLOTS$2 } from './resources-527d2a03.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-388e5055.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-873a0eb6.js';
-import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale-d0a7b749.js';
-import { d as debounce } from './debounce-65a5ee53.js';
-import './guid-459bec8a.js';
-import './resources-a15ffb41.js';
-import './browser-3d269982.js';
-import './key-c1d55161.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-df3b8b6e.js';
+import { b as slotChangeHasAssignedElement, t as toAriaBoolean, D as getFirstTabbable, g as getElementDir } from './dom-9b2a186a.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-f29315c9.js';
+import { c as createObserver } from './observers-79f91cbc.js';
+import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-1e9b1c1e.js';
+import { S as SLOTS$2 } from './resources-6681bdbd.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-5baa5bbb.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-193eb2e2.js';
+import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale-2be4c54f.js';
+import { d as debounce } from './debounce-236501d4.js';
+import './guid-96ea246d.js';
+import './resources-77e3e2de.js';
+import './browser-963eddc7.js';
+import './key-e2da0bef.js';
 
 const CSS$2 = {
     container: "container",
@@ -122,10 +122,11 @@ const List = class {
         this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
         this.calciteInternalListDefaultSlotChange = createEvent(this, "calciteInternalListDefaultSlotChange", 6);
         this.dragSelector = "calcite-list-item";
-        this.enabledListItems = [];
+        this.focusableItems = [];
         this.handleSelector = "calcite-handle";
         this.listItems = [];
         this.mutationObserver = createObserver("mutation", () => this.updateListItems());
+        this.openItems = [];
         this.handleDefaultSlotChange = (event) => {
             updateListItemChildren(getListItemChildren(event.target));
             if (this.parentListEl) {
@@ -139,24 +140,24 @@ const List = class {
             this.hasFilterActionsEnd = slotChangeHasAssignedElement(event);
         };
         this.setActiveListItem = () => {
-            const { enabledListItems } = this;
-            if (!enabledListItems.some((item) => item.active)) {
-                if (enabledListItems[0]) {
-                    enabledListItems[0].active = true;
+            const { focusableItems } = this;
+            if (!focusableItems.some((item) => item.active)) {
+                if (focusableItems[0]) {
+                    focusableItems[0].active = true;
                 }
             }
         };
         this.updateSelectedItems = (emit = false) => {
-            this.selectedItems = this.enabledListItems.filter((item) => item.selected);
+            this.selectedItems = this.openItems.filter((item) => item.selected);
             if (emit) {
                 this.calciteListChange.emit();
             }
         };
         this.updateFilteredItems = (emit = false) => {
-            const { listItems, filteredData, filterText } = this;
+            const { openItems, filteredData, filterText } = this;
             const values = filteredData.map((item) => item.value);
-            const lastDescendantItems = listItems?.filter((listItem) => listItems.every((li) => li === listItem || !listItem.contains(li)));
-            const filteredItems = listItems.filter((item) => !filterText || values.includes(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 visibleParents = new WeakSet();
             lastDescendantItems.forEach((listItem) => this.filterElements({ el: listItem, filteredItems, visibleParents }));
             if (filteredItems.length > 0) {
@@ -211,8 +212,9 @@ const List = class {
                     this.filterEl.items = this.dataForFilter;
                 }
             }
+            this.openItems = this.listItems.filter((item) => !item.closed);
             this.updateFilteredItems(emit);
-            this.enabledListItems = this.filteredItems.filter((item) => !item.disabled && !item.closed);
+            this.focusableItems = this.filteredItems.filter((item) => !item.disabled);
             this.setActiveListItem();
             this.updateSelectedItems(emit);
             this.setUpSorting();
@@ -221,11 +223,11 @@ const List = class {
             return Array.from(this.el.querySelectorAll(direct ? listItemSelectorDirect : listItemSelector));
         };
         this.focusRow = (focusEl) => {
-            const { enabledListItems } = this;
+            const { focusableItems } = this;
             if (!focusEl) {
                 return;
             }
-            enabledListItems.forEach((listItem) => (listItem.active = listItem === focusEl));
+            focusableItems.forEach((listItem) => (listItem.active = listItem === focusEl));
             focusEl.setFocus();
         };
         this.isNavigable = (listItem) => {
@@ -240,13 +242,13 @@ const List = class {
                 return;
             }
             const { key } = event;
-            const filteredItems = this.enabledListItems.filter((listItem) => this.isNavigable(listItem));
-            const currentIndex = filteredItems.findIndex((listItem) => listItem.active);
+            const navigableItems = this.focusableItems.filter((listItem) => this.isNavigable(listItem));
+            const currentIndex = navigableItems.findIndex((listItem) => listItem.active);
             if (key === "ArrowDown") {
                 event.preventDefault();
                 const nextIndex = event.target === this.filterEl ? 0 : currentIndex + 1;
-                if (filteredItems[nextIndex]) {
-                    this.focusRow(filteredItems[nextIndex]);
+                if (navigableItems[nextIndex]) {
+                    this.focusRow(navigableItems[nextIndex]);
                 }
             }
             else if (key === "ArrowUp") {
@@ -256,20 +258,20 @@ const List = class {
                     return;
                 }
                 const prevIndex = currentIndex - 1;
-                if (filteredItems[prevIndex]) {
-                    this.focusRow(filteredItems[prevIndex]);
+                if (navigableItems[prevIndex]) {
+                    this.focusRow(navigableItems[prevIndex]);
                 }
             }
             else if (key === "Home") {
                 event.preventDefault();
-                const homeItem = filteredItems[0];
+                const homeItem = navigableItems[0];
                 if (homeItem) {
                     this.focusRow(homeItem);
                 }
             }
             else if (key === "End") {
                 event.preventDefault();
-                const endItem = filteredItems[filteredItems.length - 1];
+                const endItem = navigableItems[navigableItems.length - 1];
                 if (endItem) {
                     this.focusRow(endItem);
                 }
@@ -337,11 +339,11 @@ const List = class {
             return;
         }
         event.stopPropagation();
-        const { enabledListItems } = this;
-        const currentIndex = enabledListItems.findIndex((listItem) => listItem.active);
+        const { focusableItems } = this;
+        const currentIndex = focusableItems.findIndex((listItem) => listItem.active);
         const prevIndex = currentIndex - 1;
-        if (enabledListItems[prevIndex]) {
-            this.focusRow(enabledListItems[prevIndex]);
+        if (focusableItems[prevIndex]) {
+            this.focusRow(focusableItems[prevIndex]);
         }
     }
     handleCalciteInternalListItemActive(event) {
@@ -389,14 +391,14 @@ const List = class {
         }
         event.stopPropagation();
         const { target, detail } = event;
-        const { enabledListItems, lastSelectedInfo } = this;
+        const { focusableItems, lastSelectedInfo } = this;
         const selectedItem = target;
         if (detail.selectMultiple && !!lastSelectedInfo) {
-            const currentIndex = enabledListItems.indexOf(selectedItem);
-            const lastSelectedIndex = enabledListItems.indexOf(lastSelectedInfo.selectedItem);
+            const currentIndex = focusableItems.indexOf(selectedItem);
+            const lastSelectedIndex = focusableItems.indexOf(lastSelectedInfo.selectedItem);
             const startIndex = Math.min(lastSelectedIndex, currentIndex);
             const endIndex = Math.max(lastSelectedIndex, currentIndex);
-            enabledListItems
+            focusableItems
                 .slice(startIndex, endIndex + 1)
                 .forEach((item) => (item.selected = lastSelectedInfo.selected));
         }
@@ -467,7 +469,7 @@ const List = class {
         if (this.filterEnabled) {
             return this.filterEl?.setFocus();
         }
-        return this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
+        return this.focusableItems.find((listItem) => listItem.active)?.setFocus();
     }
     // --------------------------------------------------------------------------
     //
@@ -486,12 +488,12 @@ const List = class {
     //
     // --------------------------------------------------------------------------
     renderItemAriaLive() {
-        const { messages, enabledListItems, parentListEl, effectiveLocale, numberingSystem, filterEnabled, filterText, filteredData, } = this;
+        const { messages, filteredItems, parentListEl, effectiveLocale, numberingSystem, filterEnabled, filterText, filteredData, } = this;
         numberStringFormatter.numberFormatOptions = {
             locale: effectiveLocale,
             numberingSystem,
         };
-        return !parentListEl ? (h("div", { "aria-live": "polite", class: CSS$1.assistiveText }, filterEnabled && filterText && filteredData?.length ? (h("div", { key: "aria-filter-enabled" }, messages.filterEnabled)) : null, h("div", { key: "aria-item-count" }, messages.total.replace("{count}", numberStringFormatter.localize(enabledListItems.length.toString()))), enabledListItems.length ? (h("ol", { key: "aria-item-list" }, enabledListItems.map((item) => (h("li", null, item.label))))) : null)) : null;
+        return !parentListEl ? (h("div", { "aria-live": "polite", class: CSS$1.assistiveText }, filterEnabled && filterText && filteredData?.length ? (h("div", { key: "aria-filter-enabled" }, messages.filterEnabled)) : null, h("div", { key: "aria-item-count" }, messages.total.replace("{count}", numberStringFormatter.localize(filteredItems.length.toString()))), filteredItems.length ? (h("ol", { key: "aria-item-list" }, filteredItems.map((item) => (h("li", null, item.label))))) : null)) : null;
     }
     connectObserver() {
         this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
@@ -570,40 +572,22 @@ const List = class {
         if (!parentEl) {
             return;
         }
-        const { enabledListItems } = this;
-        const sameParentItems = enabledListItems.filter((item) => item.parentElement === parentEl);
+        const { filteredItems } = this;
+        const sameParentItems = filteredItems.filter((item) => item.parentElement === parentEl);
         const lastIndex = sameParentItems.length - 1;
         const oldIndex = sameParentItems.indexOf(sortItem);
-        let appendInstead = false;
         let newIndex;
         if (direction === "up") {
-            if (oldIndex === 0) {
-                appendInstead = true;
-                newIndex = lastIndex;
-            }
-            else {
-                newIndex = oldIndex - 1;
-            }
+            newIndex = oldIndex === 0 ? lastIndex : oldIndex - 1;
         }
         else {
-            if (oldIndex === lastIndex) {
-                newIndex = 0;
-            }
-            else if (oldIndex === lastIndex - 1) {
-                appendInstead = true;
-                newIndex = lastIndex;
-            }
-            else {
-                newIndex = oldIndex + 1;
-            }
+            newIndex = oldIndex === lastIndex ? 0 : oldIndex + 1;
         }
         this.disconnectObserver();
-        if (appendInstead) {
-            parentEl.appendChild(sortItem);
-        }
-        else {
-            parentEl.insertBefore(sortItem, sameParentItems[direction === "up" ? newIndex : newIndex + 1]);
-        }
+        const referenceEl = (direction === "up" && newIndex !== lastIndex) || (direction === "down" && newIndex === 0)
+            ? sameParentItems[newIndex]
+            : sameParentItems[newIndex].nextSibling;
+        parentEl.insertBefore(sortItem, referenceEl);
         this.updateListItems();
         this.connectObserver();
         this.calciteListOrderChange.emit({