@esri/solutions-components 0.6.14 → 0.6.16

package/dist/components/select.js

@@ -15,7 +15,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * 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.6.1
+ * v1.8.0
  */
 const CSS = {
   icon: "icon",
@@ -210,7 +210,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
   }
   render() {
     return (h(Fragment, null, h("select", { "aria-label": getLabelText(this), class: CSS.select, disabled: this.disabled, onChange: this.handleInternalSelectChange,
-      // 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.storeSelectRef }, h("slot", null)), this.renderChevron(), h(HiddenFormInputSlot, { component: this })));
   }
   get el() { return this; }

package/dist/components/shared-list-render.js

@@ -5,15 +5,15 @@
  */
 import { g as getRoundRobinIndex } from './array.js';
 import { f as focusElement, a as getSlotted, t as toAriaBoolean } from './dom.js';
-import { S as SLOTS } from './resources4.js';
+import { S as SLOTS } from './resources5.js';
 import { d as debounce } from './debounce.js';
 import { h, Host } from '@stencil/core/internal/client';
-import { C as CSS, S as SLOTS$1 } from './resources3.js';
+import { C as CSS, S as SLOTS$1 } from './resources4.js';
 
 /*!
  * 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.6.1
+ * v1.8.0
  */
 function mutationObserverCallback() {
   this.setUpItems();
@@ -328,14 +328,14 @@ function getItemData() {
 /*!
  * 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.6.1
+ * v1.8.0
  */
 const List = ({ props: { disabled, loading, filterEnabled, dataForFilter, handleFilterEvent, filterPlaceholder, filterText, setFilterEl, dragEnabled, storeAssistiveEl, }, ...rest }) => {
   const defaultSlot = h("slot", null);
   return (h(Host, { "aria-busy": toAriaBoolean(loading), role: "menu", ...rest }, h("section", null, dragEnabled ? (h("span", { "aria-live": "assertive", class: "assistive-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: storeAssistiveEl })) : null, h("header", { class: { [CSS.sticky]: true } }, filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilterEvent, placeholder: filterPlaceholder, value: filterText,
-    // 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: setFilterEl })) : null, h("slot", { name: SLOTS$1.menuActions })), loading ? h("calcite-scrim", { loading: loading }) : null, defaultSlot)));
 };
 

package/dist/components/shell-panel.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, forceUpdate } from '@stencil/core/internal/client';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
-import { g as getElementDir, i as isPrimaryPointerButton, e as slotChangeGetAssignedElements, h as slotChangeHasAssignedElement } from './dom.js';
+import { g as getElementDir, i as isPrimaryPointerButton, h as slotChangeGetAssignedElements, j as slotChangeHasAssignedElement } from './dom.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { c as clamp } from './math.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
@@ -14,7 +14,7 @@ import { C as CSS_UTILITY } from './resources.js';
 /*!
  * 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.6.1
+ * v1.8.0
  */
 const CSS = {
   container: "container",
@@ -298,7 +298,7 @@ const ShellPanel = /*@__PURE__*/ proxyCustomElement(class ShellPanel extends HTM
     const separatorNode = !collapsed && allowResizing ? (h("div", { "aria-label": this.messages.resize, "aria-orientation": layout === "horizontal" ? "vertical" : "horizontal", "aria-valuemax": layout == "horizontal" ? contentHeightMax : contentWidthMax, "aria-valuemin": layout == "horizontal" ? contentHeightMin : contentWidthMin, "aria-valuenow": layout == "horizontal"
         ? contentHeight !== null && contentHeight !== void 0 ? contentHeight : initialContentHeight
         : contentWidth !== null && contentWidth !== void 0 ? contentWidth : initialContentWidth, class: CSS.separator, key: "separator", onKeyDown: this.separatorKeyDown, role: "separator", tabIndex: 0, "touch-action": "none",
-      // 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.connectSeparator })) : null;
     const getAnimationDir = () => {
       if (layout === "horizontal") {
@@ -319,7 +319,7 @@ const ShellPanel = /*@__PURE__*/ proxyCustomElement(class ShellPanel extends HTM
         [CSS_UTILITY.calciteAnimate]: displayMode === "overlay",
         [getAnimationDir()]: displayMode === "overlay",
       }, hidden: collapsed, key: "content", style: style,
-      // 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.storeContentEl }, this.renderHeader(), h("div", { class: CSS.contentBody }, h("slot", null)), separatorNode));
     const actionBarNode = (h("slot", { key: "action-bar", name: SLOTS.actionBar, onSlotchange: this.handleActionBarSlotChange }));
     const mainNodes = [actionBarNode, contentNode];

package/dist/components/shell.js

@@ -5,12 +5,12 @@
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
-import { h as slotChangeHasAssignedElement, e as slotChangeGetAssignedElements } from './dom.js';
+import { j as slotChangeHasAssignedElement, h as slotChangeGetAssignedElements } from './dom.js';
 
 /*!
  * 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.6.1
+ * v1.8.0
  */
 const CSS = {
   main: "main",
@@ -30,6 +30,7 @@ const SLOTS = {
   header: "header",
   footer: "footer",
   alerts: "alerts",
+  sheets: "sheets",
   modals: "modals",
 };
 
@@ -60,6 +61,15 @@ const Shell = /*@__PURE__*/ proxyCustomElement(class Shell extends HTMLElement {
         }
       });
     };
+    this.handleSheetsSlotChange = (event) => {
+      var _a;
+      this.hasSheets = !!slotChangeHasAssignedElement(event);
+      (_a = slotChangeGetAssignedElements(event)) === null || _a === void 0 ? void 0 : _a.map((el) => {
+        if (el.nodeName === "CALCITE-SHEET") {
+          el.slottedInShell = true;
+        }
+      });
+    };
     this.handleModalsSlotChange = (event) => {
       var _a;
       this.hasModals = !!slotChangeHasAssignedElement(event);
@@ -74,6 +84,7 @@ const Shell = /*@__PURE__*/ proxyCustomElement(class Shell extends HTMLElement {
     this.hasFooter = false;
     this.hasAlerts = false;
     this.hasModals = false;
+    this.hasSheets = false;
   }
   // --------------------------------------------------------------------------
   //
@@ -100,6 +111,9 @@ const Shell = /*@__PURE__*/ proxyCustomElement(class Shell extends HTMLElement {
   renderAlerts() {
     return (h("div", { hidden: !this.hasAlerts }, h("slot", { key: "alerts", name: SLOTS.alerts, onSlotchange: this.handleAlertsSlotChange })));
   }
+  renderSheets() {
+    return (h("div", { hidden: !this.hasSheets }, h("slot", { key: "sheets", name: SLOTS.sheets, onSlotchange: this.handleSheetsSlotChange })));
+  }
   renderModals() {
     return (h("div", { hidden: !this.hasModals }, h("slot", { key: "modals", name: SLOTS.modals, onSlotchange: this.handleModalsSlotChange })));
   }
@@ -126,7 +140,7 @@ const Shell = /*@__PURE__*/ proxyCustomElement(class Shell extends HTMLElement {
     return (h("div", { class: CSS.main }, h("slot", { name: SLOTS.panelStart }), this.renderContent(), h("slot", { name: SLOTS.panelEnd })));
   }
   renderPositionedSlots() {
-    return (h("div", { class: CSS.positionedSlotWrapper }, this.renderAlerts(), this.renderModals()));
+    return (h("div", { class: CSS.positionedSlotWrapper }, this.renderAlerts(), this.renderModals(), this.renderSheets()));
   }
   render() {
     return (h(Fragment, null, this.renderHeader(), this.renderMain(), this.renderFooter(), this.renderPositionedSlots()));
@@ -138,7 +152,8 @@ const Shell = /*@__PURE__*/ proxyCustomElement(class Shell extends HTMLElement {
     "hasHeader": [32],
     "hasFooter": [32],
     "hasAlerts": [32],
-    "hasModals": [32]
+    "hasModals": [32],
+    "hasSheets": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/slider.js

@@ -18,7 +18,7 @@ import { d as defineCustomElement$1 } from './graph.js';
 /*!
  * 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.6.1
+ * v1.8.0
  */
 const CSS = {
   handleLabel: "handle__label",
@@ -228,21 +228,21 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         "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,
@@ -250,7 +250,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         "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,
@@ -258,7 +258,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         "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,
@@ -266,7 +266,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         "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,
@@ -274,28 +274,28 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         "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,
@@ -303,7 +303,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         "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,
@@ -311,14 +311,14 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         "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}%`,

package/dist/components/sortableComponent.js

@@ -3,8 +3,6 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { d as containsCrossShadowBoundary } from './dom.js';
-
 /**!
  * Sortable 1.15.0
  * @author	RubaXa   <trash@rubaxa.org>
@@ -3028,10 +3026,14 @@ Sortable.mount(Remove, Revert);
 /*!
  * 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.6.1
+ * v1.8.0
  */
 const sortableComponentSet = new Set();
-const inactiveSortableComponentSet = new WeakSet();
+const CSS = {
+  ghostClass: "calcite-sortable--ghost",
+  chosenClass: "calcite-sortable--chosen",
+  dragClass: "calcite-sortable--drag",
+};
 /**
  * Helper to keep track of a SortableComponent. This should be called in the `connectedCallback` lifecycle method as well as any other method necessary to rebuild the sortable instance.
  *
@@ -3040,13 +3042,11 @@ const inactiveSortableComponentSet = new WeakSet();
 function connectSortableComponent(component) {
   disconnectSortableComponent(component);
   sortableComponentSet.add(component);
-  if (inactiveSortableComponentSet.has(component)) {
-    return;
-  }
   const dataIdAttr = "id";
   const { group, handleSelector: handle, dragSelector: draggable } = component;
   component.sortable = Sortable.create(component.el, {
     dataIdAttr,
+    ...CSS,
     ...(!!draggable && { draggable }),
     ...(!!group && {
       group: {
@@ -3060,16 +3060,16 @@ function connectSortableComponent(component) {
       },
     }),
     handle,
-    onStart: (event) => {
-      onSortingStart(component);
-      component.onDragStart(event);
+    onStart: () => {
+      dragState.active = true;
+      onDragStart();
     },
-    onEnd: (event) => {
-      onSortingEnd(component);
-      component.onDragEnd(event);
+    onEnd: () => {
+      dragState.active = false;
+      onDragEnd();
     },
-    onSort: (event) => {
-      component.onDragSort(event);
+    onSort: ({ from: fromEl, item: dragEl, to: toEl }) => {
+      component.onDragSort({ fromEl, dragEl, toEl });
     },
   });
 }
@@ -3080,30 +3080,24 @@ function connectSortableComponent(component) {
  */
 function disconnectSortableComponent(component) {
   sortableComponentSet.delete(component);
-  if (inactiveSortableComponentSet.has(component)) {
-    return;
-  }
   component.sortable?.destroy();
   component.sortable = null;
 }
-function getNestedSortableComponents(activeComponent) {
-  return Array.from(sortableComponentSet).filter((component) => component !== activeComponent && containsCrossShadowBoundary(activeComponent.el, component.el));
-}
+const dragState = { active: false };
 /**
- * Helper to handle nested SortableComponents on `Sortable.onStart`.
+ * Helper to determine if dragging is currently active.
  *
- * @param {SortableComponent} activeComponent - The active sortable component.
+ * @param component The sortable component.
+ * @returns {boolean} a boolean value.
  */
-function onSortingStart(activeComponent) {
-  getNestedSortableComponents(activeComponent).forEach((component) => inactiveSortableComponentSet.add(component));
+function dragActive(component) {
+  return component.dragEnabled && dragState.active;
 }
-/**
- * Helper to handle nested SortableComponents on `Sortable.onEnd`.
- *
- * @param {SortableComponent} activeComponent - The active sortable component.
- */
-function onSortingEnd(activeComponent) {
-  getNestedSortableComponents(activeComponent).forEach((component) => inactiveSortableComponentSet.delete(component));
+function onDragStart() {
+  Array.from(sortableComponentSet).forEach((component) => component.onDragStart());
+}
+function onDragEnd() {
+  Array.from(sortableComponentSet).forEach((component) => component.onDragEnd());
 }
 
-export { connectSortableComponent as c, disconnectSortableComponent as d };
+export { disconnectSortableComponent as a, connectSortableComponent as c, dragActive as d };

package/dist/components/stack.js

@@ -4,12 +4,12 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { h as slotChangeHasAssignedElement } from './dom.js';
+import { j as slotChangeHasAssignedElement } from './dom.js';
 
 /*!
  * 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.6.1
+ * v1.8.0
  */
 const CSS = {
   container: "container",

package/dist/components/switch.js

@@ -101,7 +101,7 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends HTMLElement
   // --------------------------------------------------------------------------
   render() {
     return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "container", role: "switch", 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.setSwitchEl }, h("div", { class: "track" }, h("div", { class: "handle" })), h(HiddenFormInputSlot, { component: this }))));
   }
   get el() { return this; }

package/dist/components/t9n.js

@@ -9,7 +9,7 @@ import { g as getSupportedLocale } from './locale2.js';
 /*!
  * 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.6.1
+ * v1.8.0
  */
 const componentLangToMessageBundleCache = {};
 async function getMessageBundle(lang, component) {

package/dist/components/tab-nav.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { v as focusElementInGroup, g as getElementDir, x as filterDirectChildren } from './dom.js';
+import { w as focusElementInGroup, g as getElementDir, y as filterDirectChildren } from './dom.js';
 import { c as createObserver } from './observers.js';
 
 const tabNavCss = ":host{position:relative;display:flex}:host([scale=s]){min-block-size:1.5rem}:host([scale=m]){min-block-size:2rem}:host([scale=l]){min-block-size:2.75rem}.tab-nav{display:flex;inline-size:100%;justify-content:flex-start;overflow:auto}.tab-nav-active-indicator-container{position:absolute;inset-inline:0px;inset-block-end:0px;block-size:0.125rem;inline-size:100%;overflow:hidden}.tab-nav-active-indicator{position:absolute;inset-block-end:0px;display:block;block-size:0.125rem;background-color:var(--calcite-ui-brand);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host([layout=center]) .tab-nav{justify-content:space-evenly}:host([position=bottom]) .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host([position=bottom]) .tab-nav-active-indicator-container{inset-block-end:unset;inset-block-start:0px}:host([bordered]) .tab-nav-active-indicator-container{inset-block-end:unset}:host([bordered][position=bottom]) .tab-nav-active-indicator-container{inset-block-end:0;inset-block-start:unset}@media (forced-colors: active){.tab-nav-active-indicator{background-color:highlight}}:host([hidden]){display:none}[hidden]{display:none}";
@@ -119,11 +119,11 @@ const TabNav = /*@__PURE__*/ proxyCustomElement(class TabNav extends HTMLElement
     const offset = `${this.indicatorOffset}px`;
     const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
     return (h(Host, { role: "tablist" }, h("div", { class: "tab-nav", onScroll: this.handleContainerScroll,
-      // 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.tabNavEl = el) }, h("slot", null), h("div", { class: "tab-nav-active-indicator-container",
-      // 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.activeIndicatorContainerEl = el) }, h("div", { class: "tab-nav-active-indicator", style: indicatorStyle,
-      // 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.activeIndicatorEl = el) })))));
   }
   //--------------------------------------------------------------------------

package/dist/components/tab-title.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
-import { y as getElementProp, t as toAriaBoolean, g as getElementDir, w as nodeListToArray } from './dom.js';
+import { z as getElementProp, t as toAriaBoolean, g as getElementDir, x as nodeListToArray } from './dom.js';
 import { g as guid } from './guid.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { c as createObserver } from './observers.js';
@@ -15,7 +15,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * 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.6.1
+ * v1.8.0
  */
 const CSS = {
   closeButton: "close-button",
@@ -145,13 +145,13 @@ const TabTitle = /*@__PURE__*/ proxyCustomElement(class TabTitle extends HTMLEle
         container: true,
         [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd,
       }, hidden: closed,
-      // 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) => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); } }, h("div", { class: { [CSS.content]: true, [CSS.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null), this.renderCloseButton())));
   }
   renderCloseButton() {
     const { closable, messages } = this;
     return closable ? (h("button", { "aria-label": messages.close, class: CSS.closeButton, disabled: false, key: CSS.closeButton, onClick: this.closeClickHandler, title: messages.close, 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.closeButtonEl = el) }, h("calcite-icon", { icon: ICONS.close, scale: this.scale === "l" ? "m" : "s" }))) : null;
   }
   async componentDidLoad() {

package/dist/components/tab.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { w as nodeListToArray } from './dom.js';
+import { x as nodeListToArray } from './dom.js';
 import { g as guid } from './guid.js';
 
 const tabCss = ":host([selected]) section,:host([selected]) .container{display:block}:host{display:none;block-size:100%;inline-size:100%}:host([selected]){display:block;block-size:100%;inline-size:100%;overflow:auto}section,.container{display:none;block-size:100%;inline-size:100%}:host([scale=s]){padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-block:13px}:host([hidden]){display:none}[hidden]{display:none}";