@esri/calcite-components 1.7.0-next.1 → 1.7.0-next.3

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

@@ -1,25 +1,25 @@
 /*!
  * 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.1
+ * v1.7.0-next.3
  */
-import { h, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-12f96d86.js';
-import { f as filter } from './filter-96875580.js';
-import { A as nodeListToArray, i as isPrimaryPointerButton, t as toAriaBoolean, z as getElementProp, h as getSlotted } from './dom-257fb429.js';
-import { d as defaultMenuPlacement, f as filterComputedPlacements, c as connectFloatingUI, r as reposition, a as disconnectFloatingUI, F as FloatingCSS } from './floating-ui-39a53610.js';
-import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form-f849dd0a.js';
-import { g as guid } from './guid-4b604798.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-999431b3.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-6c5eadac.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-871af43e.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-5cade090.js';
-import { c as createObserver } from './observers-39183e56.js';
-import { o as onToggleOpenCloseComponent } from './openCloseComponent-3f0f20c5.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-fda07909.js';
-import { d as debounce } from './debounce-95474f0d.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-5cc4cc84.js';
-import './resources-084474bf.js';
-import './key-c4381172.js';
+import { h, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-48fee311.js';
+import { f as filter } from './filter-27fd6fd2.js';
+import { A as nodeListToArray, i as isPrimaryPointerButton, t as toAriaBoolean, h as getSlotted } from './dom-3322efa0.js';
+import { d as defaultMenuPlacement, f as filterComputedPlacements, c as connectFloatingUI, r as reposition, a as disconnectFloatingUI, F as FloatingCSS } from './floating-ui-fceaf7c1.js';
+import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form-f2480f8d.js';
+import { g as guid } from './guid-31592e79.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-61b7adf7.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-34a8dd0e.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-86f381c2.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-d3a92d28.js';
+import { c as createObserver } from './observers-f036448e.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent-81e7682b.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-431f088b.js';
+import { d as debounce } from './debounce-d8552ac3.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-66e7c0ff.js';
+import './resources-b762bf79.js';
+import './key-170477d8.js';
 
 const ComboboxItem$1 = "CALCITE-COMBOBOX-ITEM";
 const ComboboxItemGroup$1 = "CALCITE-COMBOBOX-ITEM-GROUP";
@@ -53,7 +53,7 @@ const CSS$2 = {
 };
 function XButton({ disabled, key, label, onClick, ref, scale, }) {
   return (h("button", { "aria-label": label, class: CSS$2.button, disabled: disabled, key: key, onClick: onClick, tabIndex: -1, 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: ref },
     h("calcite-icon", { icon: "x", scale: scale === "l" ? "m" : "s" })));
 }
@@ -334,6 +334,10 @@ const Combobox = class {
       this.selectedItems = this.getSelectedItems();
       this.filteredItems = this.getFilteredItems();
       this.needsIcon = this.getNeedsIcon();
+      this.items.forEach((item) => {
+        item.selectionMode = this.selectionMode;
+        item.scale = this.scale;
+      });
       if (!this.allowCustomValues) {
         this.setMaxScrollerHeight();
       }
@@ -420,6 +424,9 @@ const Combobox = class {
   overlayPositioningHandler() {
     this.reposition(true);
   }
+  handlePropsChange() {
+    this.updateItems();
+  }
   valueHandler(value) {
     if (!this.internalValueChangeFlag) {
       const items = this.getItems();
@@ -504,12 +511,13 @@ const Combobox = class {
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
+    connectLabel(this);
+    connectForm(this);
     this.internalValueChangeFlag = true;
     this.value = this.getValue();
     this.internalValueChangeFlag = false;
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-    connectLabel(this);
-    connectForm(this);
+    this.updateItems();
     this.setFilteredPlacements();
     this.reposition(true);
     if (this.open) {
@@ -844,7 +852,7 @@ const Combobox = class {
         "input--hidden": showLabel,
         "input--icon": !!this.placeholderIcon,
       }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, 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: (el) => (this.textInput = el) })));
   }
   renderListBoxOptions() {
@@ -861,9 +869,9 @@ const Combobox = class {
         "floating-ui-container": true,
         "floating-ui-container--active": 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: setFloatingEl }, h("div", { class: classes,
-      // 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: setContainerEl }, h("ul", { class: { list: true, "list--hide": !open } }, h("slot", null)))));
   }
   renderIconStart() {
@@ -889,7 +897,7 @@ const Combobox = class {
         "wrapper--single": single || !this.selectedItems.length,
         "wrapper--active": open,
       }, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, role: "combobox",
-      // 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.setReferenceEl }, h("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), isClearable ? (h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, this.renderIconEnd()), h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { component: this })));
   }
   static get assetsDirs() { return ["assets"]; }
@@ -899,6 +907,8 @@ const Combobox = class {
     "disabled": ["handleDisabledChange"],
     "maxItems": ["maxItemsHandler"],
     "overlayPositioning": ["overlayPositioningHandler"],
+    "selectionMode": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
     "value": ["valueHandler"],
     "messageOverrides": ["onMessagesChange"],
     "flipPlacements": ["flipPlacementsHandler"],
@@ -929,8 +939,6 @@ const ComboboxItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteComboboxItemChange = createEvent(this, "calciteComboboxItemChange", 6);
-    /** Specifies the scale of the combobox-item controlled by parent, defaults to m */
-    this.scale = "m";
     this.itemClickHandler = (event) => {
       event.preventDefault();
       this.toggleSelected();
@@ -945,6 +953,8 @@ const ComboboxItem = class {
     this.textLabel = undefined;
     this.value = undefined;
     this.filterDisabled = undefined;
+    this.selectionMode = "multiple";
+    this.scale = "m";
   }
   selectedWatchHandler() {
     this.calciteComboboxItemChange.emit();
@@ -956,7 +966,6 @@ const ComboboxItem = class {
   // --------------------------------------------------------------------------
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
-    this.scale = getElementProp(this.el, "scale", this.scale);
     connectConditionalSlotComponent(this);
     connectInteractive(this);
   }
@@ -1008,7 +1017,7 @@ const ComboboxItem = class {
     return null;
   }
   render() {
-    const isSingleSelect = getElementProp(this.el, "selection-mode", "multiple") === "single";
+    const isSingleSelect = this.selectionMode === "single";
     const showDot = isSingleSelect && !this.disabled;
     const defaultIcon = isSingleSelect ? "dot" : "check";
     const iconPath = this.disabled ? "circle-disallowed" : defaultIcon;
@@ -1040,10 +1049,10 @@ const ComboboxItemGroup = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.guid = guid();
-    this.scale = "m";
     this.afterEmptyGroup = false;
     this.ancestors = undefined;
     this.label = undefined;
+    this.scale = "m";
   }
   // --------------------------------------------------------------------------
   //
@@ -1052,7 +1061,6 @@ const ComboboxItemGroup = class {
   // --------------------------------------------------------------------------
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
-    this.scale = getElementProp(this.el, "scale", this.scale);
   }
   // --------------------------------------------------------------------------
   //

package/dist/esm/calcite-date-picker_4.entry.js

@@ -1,20 +1,20 @@
 /*!
  * 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.1
+ * v1.7.0-next.3
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, F as Fragment } from './index-12f96d86.js';
-import { h as getDaysDiff, b as dateToISO, c as dateFromISO, g as getValueAsDateRange, f as dateFromRange, e as getLocaleData, s as setEndOfDay, j as sameDate, i as inRange, k as getOrder, n as nextMonth, p as prevMonth, l as formatCalendarYear, m as parseCalendarYear } from './utils-bf7d553a.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-871af43e.js';
-import { c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter, b as getDateTimeFormat } from './locale-5cade090.js';
-import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n-fda07909.js';
-import { c as closestElementCrossShadowBoundary, g as getElementDir, t as toAriaBoolean } from './dom-257fb429.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-999431b3.js';
-import { i as isActivationKey } from './key-c4381172.js';
-import { C as CSS_UTILITY } from './resources-084474bf.js';
-import { H as Heading } from './Heading-322edf26.js';
-import './observers-39183e56.js';
-import './guid-4b604798.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, F as Fragment } from './index-48fee311.js';
+import { h as getDaysDiff, b as dateToISO, c as dateFromISO, g as getValueAsDateRange, f as dateFromRange, e as getLocaleData, s as setEndOfDay, j as sameDate, i as inRange, k as getOrder, n as nextMonth, p as prevMonth, l as formatCalendarYear, m as parseCalendarYear } from './utils-3d92b96f.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-86f381c2.js';
+import { c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter, b as getDateTimeFormat } from './locale-d3a92d28.js';
+import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n-431f088b.js';
+import { c as closestElementCrossShadowBoundary, g as getElementDir, t as toAriaBoolean } from './dom-3322efa0.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-61b7adf7.js';
+import { i as isActivationKey } from './key-170477d8.js';
+import { C as CSS_UTILITY } from './resources-b762bf79.js';
+import { H as Heading } from './Heading-57b488c1.js';
+import './observers-f036448e.js';
+import './guid-31592e79.js';
 
 const HEADING_LEVEL = 2;
 const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
@@ -829,7 +829,7 @@ const DatePickerMonth = class {
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart,
       }, currentMonth: currentMonth, dateTimeFormat: this.dateTimeFormat, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), onCalciteDaySelect: this.daySelect, onCalciteInternalDayHover: this.dayHover, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeEdge: dayInWeek === 0 ? "start" : dayInWeek === 6 ? "end" : undefined, rangeHover: this.isRangeHover(date), scale: this.scale, selected: this.isSelected(date), startOfRange: this.isStartOfRange(date), value: date,
-      // 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) => {
         // when moving via keyboard, focus must be updated on active date
         if (ref && active && this.activeFocus) {
@@ -997,7 +997,7 @@ const DatePickerMonthHeader = class {
         year: true,
         [CSS.yearSuffix]: !!suffix,
       }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", type: "text", value: localizedYear,
-      // 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.yearInput = el) }), suffix && h("span", { class: CSS.suffix }, suffix))), h("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": messages.nextMonth, class: CSS.chevron, href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronRight, scale: iconScale }))));
   }
   setNextPrevMonthDates() {

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

@@ -1,19 +1,19 @@
 /*!
  * 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.1
+ * v1.7.0-next.3
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-12f96d86.js';
-import { t as toAriaBoolean, i as isPrimaryPointerButton, l as focusElementInGroup, d as focusElement, z as getElementProp } from './dom-257fb429.js';
-import { f as filterComputedPlacements, c as connectFloatingUI, d as defaultMenuPlacement, a as disconnectFloatingUI, F as FloatingCSS, r as reposition } from './floating-ui-39a53610.js';
-import { g as guid } from './guid-4b604798.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-999431b3.js';
-import { i as isActivationKey } from './key-c4381172.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-871af43e.js';
-import { c as createObserver } from './observers-39183e56.js';
-import { o as onToggleOpenCloseComponent } from './openCloseComponent-3f0f20c5.js';
-import './resources-084474bf.js';
-import './debounce-95474f0d.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-48fee311.js';
+import { t as toAriaBoolean, i as isPrimaryPointerButton, l as focusElementInGroup, d as focusElement, z as getElementProp } from './dom-3322efa0.js';
+import { f as filterComputedPlacements, c as connectFloatingUI, d as defaultMenuPlacement, a as disconnectFloatingUI, F as FloatingCSS, r as reposition } from './floating-ui-fceaf7c1.js';
+import { g as guid } from './guid-31592e79.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-61b7adf7.js';
+import { i as isActivationKey } from './key-170477d8.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-86f381c2.js';
+import { c as createObserver } from './observers-f036448e.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent-81e7682b.js';
+import './resources-b762bf79.js';
+import './debounce-d8552ac3.js';
 
 const SLOTS = {
   dropdownTrigger: "trigger",
@@ -243,15 +243,15 @@ const Dropdown = class {
   render() {
     const { open, guid } = this;
     return (h(Host, null, h("div", { class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler,
-      // 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.setReferenceEl }, h("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), h("div", { "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper",
-      // 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", { "aria-labelledby": `${guid}-menubutton`, class: {
         ["calcite-dropdown-content"]: true,
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: open,
       }, id: `${guid}-menu`, role: "menu",
-      // 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.setScrollerAndTransitionEl }, h("slot", { onSlotchange: this.updateGroups })))));
   }
   //--------------------------------------------------------------------------
@@ -545,7 +545,7 @@ const DropdownItem = class {
           ? [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/esm/calcite-fab.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.
- * v1.7.0-next.1
+ * v1.7.0-next.3
  */
-import { r as registerInstance, h, a as getElement } from './index-12f96d86.js';
-import { d as focusElement } from './dom-257fb429.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-999431b3.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-871af43e.js';
-import './guid-4b604798.js';
-import './resources-084474bf.js';
+import { r as registerInstance, h, a as getElement } from './index-48fee311.js';
+import { d as focusElement } from './dom-3322efa0.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-61b7adf7.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-86f381c2.js';
+import './guid-31592e79.js';
+import './resources-b762bf79.js';
 
 const CSS = {
   button: "button",
@@ -72,7 +72,7 @@ const Fab = class {
     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/esm/calcite-filter.entry.js

@@ -1,20 +1,20 @@
 /*!
  * 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.1
+ * v1.7.0-next.3
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-12f96d86.js';
-import { f as filter } from './filter-96875580.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-999431b3.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-871af43e.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-5cade090.js';
-import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-fda07909.js';
-import { d as debounce } from './debounce-95474f0d.js';
-import './dom-257fb429.js';
-import './guid-4b604798.js';
-import './resources-084474bf.js';
-import './key-c4381172.js';
-import './observers-39183e56.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-48fee311.js';
+import { f as filter } from './filter-27fd6fd2.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-61b7adf7.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-86f381c2.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-d3a92d28.js';
+import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-431f088b.js';
+import { d as debounce } from './debounce-d8552ac3.js';
+import './dom-3322efa0.js';
+import './guid-31592e79.js';
+import './resources-b762bf79.js';
+import './key-170477d8.js';
+import './observers-f036448e.js';
 
 const CSS = {
   container: "container",
@@ -146,7 +146,7 @@ const Filter = class {
   render() {
     const { disabled, scale } = this;
     return (h(Fragment, null, h("div", { class: CSS.container }, h("label", null, h("calcite-input", { "aria-label": this.messages.label, clearable: true, disabled: disabled, icon: ICONS.search, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", 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: (el) => {
         this.textInput = el;
       } })))));

package/dist/esm/calcite-flow-item.entry.js

@@ -1,19 +1,19 @@
 /*!
  * 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.1
+ * v1.7.0-next.3
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-12f96d86.js';
-import { g as getElementDir } from './dom-257fb429.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-999431b3.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-871af43e.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-5cade090.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-fda07909.js';
-import { S as SLOTS$1 } from './resources-3387c71e.js';
-import './guid-4b604798.js';
-import './resources-084474bf.js';
-import './key-c4381172.js';
-import './observers-39183e56.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-48fee311.js';
+import { g as getElementDir } from './dom-3322efa0.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-61b7adf7.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-86f381c2.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-d3a92d28.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-431f088b.js';
+import { S as SLOTS$1 } from './resources-4348103c.js';
+import './guid-31592e79.js';
+import './resources-b762bf79.js';
+import './key-170477d8.js';
+import './observers-f036448e.js';
 
 const CSS = {
   backButton: "back-button",
@@ -153,13 +153,13 @@ const FlowItem = class {
     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/esm/calcite-flow.entry.js

@@ -1,11 +1,11 @@
 /*!
  * 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.1
+ * v1.7.0-next.3
  */
-import { r as registerInstance, h, a as getElement } from './index-12f96d86.js';
-import { c as createObserver } from './observers-39183e56.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-871af43e.js';
+import { r as registerInstance, h, a as getElement } from './index-48fee311.js';
+import { c as createObserver } from './observers-f036448e.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-86f381c2.js';
 
 const CSS = {
   frame: "frame",

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

@@ -1,20 +1,20 @@
 /*!
  * 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.1
+ * v1.7.0-next.3
  */
-import { r as registerInstance, h, a as getElement, f as forceUpdate, c as createEvent, H as Host } from './index-12f96d86.js';
-import { g as guid } from './guid-4b604798.js';
-import { c as createObserver } from './observers-39183e56.js';
-import { i as isPrimaryPointerButton, v as intersects } from './dom-257fb429.js';
-import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form-f849dd0a.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-999431b3.js';
-import { i as isActivationKey } from './key-c4381172.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-6c5eadac.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-871af43e.js';
-import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale-5cade090.js';
-import { d as decimalPlaces, c as clamp } from './math-22a2f19c.js';
-import './resources-084474bf.js';
+import { r as registerInstance, h, a as getElement, f as forceUpdate, c as createEvent, H as Host } from './index-48fee311.js';
+import { g as guid } from './guid-31592e79.js';
+import { c as createObserver } from './observers-f036448e.js';
+import { i as isPrimaryPointerButton, v as intersects } from './dom-3322efa0.js';
+import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form-f2480f8d.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-61b7adf7.js';
+import { i as isActivationKey } from './key-170477d8.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-34a8dd0e.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-86f381c2.js';
+import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale-d3a92d28.js';
+import { d as decimalPlaces, c as clamp } from './math-c8d2ad31.js';
+import './resources-b762bf79.js';
 
 /**
  * Calculate slope of the tangents
@@ -427,21 +427,21 @@ const Slider = class {
         "thumb--value": true,
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.maxHandle = el) }, h("div", { class: "handle" })));
     const labeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
         "thumb--value": true,
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.maxHandle = el) }, h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue), h("div", { class: "handle" })));
     const histogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
         "thumb--value": true,
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.maxHandle = el) }, h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue)));
     const preciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
@@ -449,7 +449,7 @@ const Slider = class {
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         "thumb--precise": true,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.maxHandle = el) }, h("div", { class: "handle" }), h("div", { class: "handle-extension" })));
     const histogramPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
@@ -457,7 +457,7 @@ const Slider = class {
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         "thumb--precise": true,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.maxHandle = el) }, h("div", { class: "handle-extension" }), h("div", { class: "handle" })));
     const labeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
@@ -465,7 +465,7 @@ const Slider = class {
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         "thumb--precise": true,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.maxHandle = el) }, h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue), h("div", { class: "handle" }), h("div", { class: "handle-extension" })));
     const histogramLabeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
@@ -473,28 +473,28 @@ const Slider = class {
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         "thumb--precise": true,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.maxHandle = el) }, h("div", { class: "handle-extension" }), h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), h("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue)));
     const minHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
         thumb: true,
         "thumb--minValue": true,
         "thumb--active": this.dragProp === "minValue",
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.minHandle = el) }, h("div", { class: "handle" })));
     const minLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
         thumb: true,
         "thumb--minValue": true,
         "thumb--active": this.dragProp === "minValue",
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.minHandle = el) }, h("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue), h("div", { class: "handle" })));
     const minHistogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
         thumb: true,
         "thumb--minValue": true,
         "thumb--active": this.dragProp === "minValue",
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.minHandle = el) }, h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue)));
     const minPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
         thumb: true,
@@ -502,7 +502,7 @@ const Slider = class {
         "thumb--active": this.dragProp === "minValue",
         "thumb--precise": true,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.minHandle = el) }, h("div", { class: "handle-extension" }), h("div", { class: "handle" })));
     const minLabeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
         thumb: true,
@@ -510,14 +510,14 @@ const Slider = class {
         "thumb--active": this.dragProp === "minValue",
         "thumb--precise": true,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.minHandle = el) }, h("div", { class: "handle-extension" }), h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), h("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue)));
     return (h(Host, { id: id, onTouchStart: this.handleTouchStart }, h("div", { "aria-label": getLabelText(this), class: {
         ["container"]: true,
         ["container--range"]: valueIsRange,
         [`scale--${this.scale}`]: true,
       } }, this.renderGraph(), h("div", { class: "track",
-      // 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.storeTrackRef }, h("div", { class: "track__range", onPointerDown: (event) => this.pointerDownDragStart(event, "minMaxValue"), style: {
         left: `${mirror ? 100 - maxInterval : minInterval}%`,
         right: `${mirror ? minInterval : 100 - maxInterval}%`,