@esri/calcite-components 1.7.0-next.0 → 1.7.0-next.2

package/dist/components/calcite-chip-group.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { i as focusElementInGroup, t as toAriaBoolean } from './dom.js';
@@ -38,7 +38,7 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.setSelectedItems = (emit, elToMatch) => {
       if (elToMatch) {
-        this.items.forEach((el) => {
+        this.items?.forEach((el) => {
           const matchingEl = elToMatch === el;
           switch (this.selectionMode) {
             case "multiple":
@@ -55,7 +55,7 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           }
         });
       }
-      this.selectedItems = this.items.filter((el) => el.selected);
+      this.selectedItems = this.items?.filter((el) => el.selected);
       if (emit) {
         this.calciteChipGroupSelect.emit();
       }
@@ -98,7 +98,7 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //--------------------------------------------------------------------------
   calciteInternalChipKeyEventListener(event) {
     if (event.composedPath().includes(this.el)) {
-      const interactiveItems = this.items.filter((el) => !el.disabled);
+      const interactiveItems = this.items?.filter((el) => !el.disabled);
       switch (event.detail.key) {
         case "ArrowRight":
           focusElementInGroup(interactiveItems, event.detail.target, "next");
@@ -117,18 +117,18 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   calciteChipCloseListener(event) {
     const item = event.target;
-    if (this.items.includes(item)) {
-      if (this.items.indexOf(item) > 0) {
+    if (this.items?.includes(item)) {
+      if (this.items?.indexOf(item) > 0) {
         focusElementInGroup(this.items, item, "previous");
       }
-      else if (this.items.indexOf(item) === 0) {
+      else if (this.items?.indexOf(item) === 0) {
         focusElementInGroup(this.items, item, "next");
       }
       else {
         focusElementInGroup(this.items, item, "first");
       }
     }
-    this.items = this.items.filter((el) => el !== item);
+    this.items = this.items?.filter((el) => el !== item);
   }
   calciteChipSelectListener(event) {
     if (event.composedPath().includes(this.el)) {

package/dist/components/calcite-chip.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { C as Chip, d as defineCustomElement$1 } from './chip.js';
 

package/dist/components/calcite-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-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { e as ColorPickerHexInput, d as defineCustomElement$1 } from './color-picker-hex-input.js';
 

package/dist/components/calcite-color-picker-swatch.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { C as ColorPickerSwatch, d as defineCustomElement$1 } from './color-picker-swatch.js';
 

package/dist/components/calcite-color-picker.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as color } from './index2.js';
@@ -547,26 +547,26 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(hueLeft, hueTop);
     const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(opacityLeft, opacityTop);
     return (h("div", { class: CSS.container }, h("div", { class: CSS.controlAndScope }, h("canvas", { class: CSS.colorField, onPointerDown: this.handleColorFieldPointerDown,
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.initColorField }), h("div", { "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, role: "slider", style: {
         top: `${adjustedColorFieldScopeTop || 0}px`,
         left: `${adjustedColorFieldScopeLeft || 0}px`,
       }, tabindex: "0",
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.storeColorFieldScope })), h("div", { class: CSS.previewAndSliders }, h("calcite-color-picker-swatch", { class: CSS.preview, color: selectedColorInHex, scale: "l" }), h("div", { class: CSS.sliders }, h("div", { class: CSS.controlAndScope }, h("canvas", { class: { [CSS.slider]: true, [CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown,
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.initHueSlider }), h("div", { "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, role: "slider", style: {
         top: `${adjustedHueScopeTop}px`,
         left: `${adjustedHueScopeLeft}px`,
       }, tabindex: "0",
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.storeHueScope })), alphaChannel ? (h("div", { class: CSS.controlAndScope }, h("canvas", { class: { [CSS.slider]: true, [CSS.opacitySlider]: true }, onPointerDown: this.handleOpacitySliderPointerDown,
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.initOpacitySlider }), h("div", { "aria-label": messages.opacity, "aria-valuemax": OPACITY_LIMITS.max, "aria-valuemin": OPACITY_LIMITS.min, "aria-valuenow": (color || DEFAULT_COLOR).round().alpha(), class: { [CSS.scope]: true, [CSS.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, role: "slider", style: {
         top: `${adjustedOpacityScopeTop}px`,
         left: `${adjustedOpacityScopeLeft}px`,
       }, tabindex: "0",
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.storeOpacityScope }))) : null)), noHex && noChannels ? null : (h("div", { class: {
         [CSS.controlSection]: true,
         [CSS.section]: true,

package/dist/components/calcite-combobox-item-group.js

@@ -1,10 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
-import { k as getElementProp } from './dom.js';
 import { g as guid } from './guid.js';
 import { g as getAncestors, a as getDepth } from './utils2.js';
 
@@ -22,10 +21,10 @@ const ComboboxItemGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.__registerHost();
     this.__attachShadow();
     this.guid = guid();
-    this.scale = "m";
     this.afterEmptyGroup = false;
     this.ancestors = undefined;
     this.label = undefined;
+    this.scale = "m";
   }
   // --------------------------------------------------------------------------
   //
@@ -34,7 +33,6 @@ const ComboboxItemGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   // --------------------------------------------------------------------------
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
-    this.scale = getElementProp(this.el, "scale", this.scale);
   }
   // --------------------------------------------------------------------------
   //
@@ -51,7 +49,8 @@ const ComboboxItemGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
 }, [1, "calcite-combobox-item-group", {
     "afterEmptyGroup": [516, "after-empty-group"],
     "ancestors": [1040],
-    "label": [1]
+    "label": [1],
+    "scale": [1]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/calcite-combobox-item.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { C as ComboboxItem, d as defineCustomElement$1 } from './combobox-item.js';
 

package/dist/components/calcite-combobox.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { C as Combobox, d as defineCustomElement$1 } from './combobox.js';
 

package/dist/components/calcite-date-picker-day.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { D as DatePickerDay, d as defineCustomElement$1 } from './date-picker-day.js';
 

package/dist/components/calcite-date-picker-month-header.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { D as DatePickerMonthHeader, d as defineCustomElement$1 } from './date-picker-month-header.js';
 

package/dist/components/calcite-date-picker-month.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { D as DatePickerMonth, d as defineCustomElement$1 } from './date-picker-month.js';
 

package/dist/components/calcite-date-picker.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { D as DatePicker, d as defineCustomElement$1 } from './date-picker.js';
 

package/dist/components/calcite-dropdown-group.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { k as getElementProp } from './dom.js';

package/dist/components/calcite-dropdown-item.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { k as getElementProp, t as toAriaBoolean } from './dom.js';
@@ -84,7 +84,7 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
           ? [contentNode, iconEndEl]
           : contentNode;
     const contentEl = !href ? (slottedContent) : (h("a", { "aria-label": label, class: CSS.link, href: href, rel: this.rel, tabIndex: -1, target: this.target,
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.childLink = el) }, slottedContent));
     const itemRole = href
       ? null

package/dist/components/calcite-dropdown.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { D as Dropdown, d as defineCustomElement$1 } from './dropdown.js';
 

package/dist/components/calcite-fab.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { l as focusElement } from './dom.js';
@@ -75,7 +75,7 @@ const Fab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl, } = this;
     const title = !textEnabled ? label || text || null : null;
     return (h("calcite-button", { appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, round: true, scale: scale, title: title, type: "button", width: "auto",
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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: (buttonEl) => {
         this.buttonEl = buttonEl;
       } }, this.textEnabled ? this.text : null));

package/dist/components/calcite-filter.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { F as Filter, d as defineCustomElement$1 } from './filter.js';
 

package/dist/components/calcite-flow-item.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { b as getElementDir } from './dom.js';
@@ -157,13 +157,13 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const label = messages.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
     return showBackButton ? (h("calcite-action", { "aria-label": label, class: CSS.backButton, icon: icon, key: "flow-back-button", onClick: backButtonClick, scale: "s", slot: "header-actions-start", text: label, title: label,
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.setBackRef })) : null;
   }
   render() {
     const { closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, } = this;
     return (h(Host, null, h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll,
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.setContainerRef }, this.renderBackButton(), h("slot", { name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", null))));
   }
   static get assetsDirs() { return ["assets"]; }

package/dist/components/calcite-flow.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client/index.js';
 import { c as createObserver } from './observers.js';

package/dist/components/calcite-graph.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { G as Graph, d as defineCustomElement$1 } from './graph.js';
 

package/dist/components/calcite-handle.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { H as Handle, d as defineCustomElement$1 } from './handle.js';
 

package/dist/components/calcite-icon.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { I as Icon, d as defineCustomElement$1 } from './icon.js';
 

package/dist/components/calcite-inline-editable.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { g as getSlotted } from './dom.js';
@@ -168,13 +168,13 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
         opacity: this.editingEnabled ? "0" : "1",
         width: this.editingEnabled ? "0" : "inherit",
       }, type: "button",
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.enableEditingButton = el) }), this.shouldShowControls && [
       h("div", { class: CSS.cancelEditingButtonWrapper }, h("calcite-button", { appearance: "transparent", class: CSS.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, scale: this.scale, type: "button",
-        // eslint-disable-next-line react/jsx-sort-props
+        // 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.cancelEditingButton = el) })),
       h("calcite-button", { appearance: "solid", class: CSS.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, scale: this.scale, type: "button",
-        // eslint-disable-next-line react/jsx-sort-props
+        // 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.confirmEditingButton = el) }),
     ])));
   }

package/dist/components/calcite-input-date-picker.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { d as datePartsFromLocalizedString, a as dateFromLocalizedString, i as inRange, b as dateToISO, c as dateFromISO, e as dateFromRange } from './date.js';
@@ -473,30 +473,30 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       useGrouping: false,
     };
     return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler }, this.localeData && (h("div", { class: "input-container" }, h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick,
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.setStartWrapper }, h("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.setStartInput }), !this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "start"), h("span", { "aria-hidden": "true", class: CSS.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), h("div", { "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
         [CSS.menu]: true,
         [CSS.menuActive]: this.open,
       }, id: this.dialogId, role: "dialog",
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.setFloatingEl }, h("div", { class: {
         ["calendar-picker-wrapper"]: true,
         ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: this.open,
       },
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.setTransitionEl }, h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate,
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.setDatePickerRef }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: this.scale === "l" ? "m" : "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: this.scale === "l" ? "m" : "s" }))), this.range && (h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick,
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.setEndWrapper }, h("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range,
       }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.setEndInput }), !this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "end"))))), h(HiddenFormInputSlot, { component: this })));
   }
   renderToggleIcon(open) {

package/dist/components/calcite-input-message.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { h as setRequestedIcon } from './dom.js';

package/dist/components/calcite-input-number.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { I as InputNumber, d as defineCustomElement$1 } from './input-number.js';
 

package/dist/components/calcite-input-text.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { I as InputText, d as defineCustomElement$1 } from './input-text.js';
 

package/dist/components/calcite-input-time-picker.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
@@ -1687,11 +1687,11 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   render() {
     const { disabled, messages, readOnly, dialogId } = this;
     return (h(Host, { onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input", { "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, step: this.step,
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.setCalciteInputEl }), !this.readOnly && this.renderToggleIcon(this.open)), h("calcite-popover", { focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, referenceElement: this.referenceElementId, triggerDisabled: true,
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.setCalcitePopoverEl }, h("calcite-time-picker", { lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value,
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.setCalciteTimePickerEl })), h(HiddenFormInputSlot, { component: this })));
   }
   renderToggleIcon(open) {

package/dist/components/calcite-input-time-zone.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectLabel, d as disconnectLabel } from './label2.js';
@@ -173,7 +173,7 @@ const InputTimeZone = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   render() {
     return (h(Host, null, h("calcite-combobox", { clearDisabled: true, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, open: this.open, overlayPositioning: this.overlayPositioning, scale: this.scale, selectionMode: "single",
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.setComboboxRef }, this.timeZoneGroups.map((group) => {
       const selected = this.selectedTimeZoneGroup === group;
       const label = group.offsetLabel;

package/dist/components/calcite-input.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { I as Input, d as defineCustomElement$1 } from './input.js';
 

package/dist/components/calcite-label.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { L as Label, d as defineCustomElement$1 } from './label.js';
 

package/dist/components/calcite-link.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { L as Link, d as defineCustomElement$1 } from './link.js';
 

package/dist/components/calcite-list-item-group.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';

package/dist/components/calcite-list-item.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.
- * v1.7.0-next.0
+ * v1.7.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { e as slotChangeHasAssignedElement, b as getElementDir, t as toAriaBoolean } from './dom.js';
@@ -277,13 +277,13 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   renderActionsStart() {
     const { label, hasActionsStart } = this;
     return (h("td", { "aria-label": label, class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", role: "gridcell",
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.actionsStartEl = el) }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
   }
   renderActionsEnd() {
     const { label, hasActionsEnd, closable, messages } = this;
     return (h("td", { "aria-label": label, class: CSS.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", role: "gridcell",
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.actionsEndEl = el) }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (h("calcite-action", { appearance: "transparent", icon: ICONS.close, key: "close-action", label: messages.close, onClick: this.closeClickHandler, text: messages.close })) : null));
   }
   renderContentStart() {
@@ -316,7 +316,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         [CSS.contentContainerSelectable]: selectionMode !== "none",
         [CSS.contentContainerHasCenterContent]: hasCenterContent,
       }, key: "content-container", onClick: this.itemClicked, role: "gridcell",
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.contentEl = el) }, content));
   }
   render() {
@@ -329,7 +329,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         [CSS.containerBorderSelected]: borderSelected,
         [CSS.containerBorderUnselected]: borderUnselected,
       }, hidden: closed, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1,
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), h("div", { class: {
         [CSS.nestedContainer]: true,
         [CSS.nestedContainerHidden]: openable && !open,