@esri/solutions-components 0.6.15 → 0.6.17

package/dist/cjs/calcite-segmented-control_2.cjs.entry.js

@@ -8,13 +8,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
-const dom = require('./dom-456f9f13.js');
-const form = require('./form-28bc6597.js');
-const interactive = require('./interactive-48299817.js');
-const label = require('./label-166e2d81.js');
-const loadable = require('./loadable-13605f73.js');
-require('./guid-d1123d5e.js');
-require('./resources-993f6faf.js');
+const dom = require('./dom-8d00cc3f.js');
+const form = require('./form-44895e53.js');
+const interactive = require('./interactive-7837b73d.js');
+const label = require('./label-39887629.js');
+const loadable = require('./loadable-5d36908d.js');
+const observers = require('./observers-62ea89bc.js');
+require('./guid-c351776c.js');
+require('./resources-2278b321.js');
+require('./browser-596d8e1e.js');
 
 const segmentedControlCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;background-color:var(--calcite-ui-foreground-1);inline-size:-moz-fit-content;inline-size:fit-content;outline:1px solid var(--calcite-ui-border-input);outline-offset:-1px}:host([appearance=outline]){background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([layout=vertical]){flex-direction:column;align-items:flex-start;align-self:flex-start}:host([width=full]){inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content}:host([width=full]) ::slotted(calcite-segmented-control-item){flex:1 1 auto}:host([width=full][layout=vertical]) ::slotted(calcite-segmented-control-item){justify-content:flex-start}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 
@@ -35,17 +37,21 @@ const SegmentedControl = class {
         this.selectItem(event.target, true);
       }
     };
+    this.mutationObserver = observers.createObserver("mutation", () => this.setUpItems());
     this.appearance = "solid";
     this.disabled = false;
     this.form = undefined;
     this.required = false;
-    this.layout = "horizontal";
     this.name = undefined;
+    this.layout = "horizontal";
     this.scale = "m";
     this.value = null;
     this.selectedItem = undefined;
     this.width = "auto";
   }
+  handlePropsChange() {
+    this.handleItemPropChange();
+  }
   valueHandler(value) {
     const items = this.getItems();
     items.forEach((item) => (item.checked = item.value === value));
@@ -71,28 +77,26 @@ const SegmentedControl = class {
   //--------------------------------------------------------------------------
   componentWillLoad() {
     loadable.setUpLoadableComponent(this);
-    const items = this.getItems();
-    const lastChecked = items.filter((item) => item.checked).pop();
-    if (lastChecked) {
-      this.selectItem(lastChecked);
-    }
-    else if (items[0]) {
-      items[0].tabIndex = 0;
-    }
+    this.setUpItems();
   }
   componentDidLoad() {
     form.afterConnectDefaultValueSet(this, this.value);
     loadable.setComponentLoaded(this);
   }
   connectedCallback() {
+    var _a;
     interactive.connectInteractive(this);
     label.connectLabel(this);
     form.connectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.handleItemPropChange();
   }
   disconnectedCallback() {
+    var _a;
     interactive.disconnectInteractive(this);
     label.disconnectLabel(this);
     form.disconnectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.el);
   }
   componentDidRender() {
     interactive.updateHostInteraction(this);
@@ -160,6 +164,14 @@ const SegmentedControl = class {
     await loadable.componentFocusable(this);
     (_a = (this.selectedItem || this.getItems()[0])) === null || _a === void 0 ? void 0 : _a.focus();
   }
+  handleItemPropChange() {
+    const items = this.getItems();
+    items.forEach((item) => {
+      item.appearance = this.appearance;
+      item.layout = this.layout;
+      item.scale = this.scale;
+    });
+  }
   //--------------------------------------------------------------------------
   //
   //  Private Methods
@@ -195,8 +207,21 @@ const SegmentedControl = class {
       match.focus();
     }
   }
+  setUpItems() {
+    const items = this.getItems();
+    const lastChecked = items.filter((item) => item.checked).pop();
+    if (lastChecked) {
+      this.selectItem(lastChecked);
+    }
+    else if (items[0]) {
+      items[0].tabIndex = 0;
+    }
+  }
   get el() { return index.getElement(this); }
   static get watchers() { return {
+    "appearance": ["handlePropsChange"],
+    "layout": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
     "value": ["valueHandler"],
     "selectedItem": ["handleSelectedItemChange"]
   }; }
@@ -206,7 +231,7 @@ SegmentedControl.style = segmentedControlCss;
 /*!
  * 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 SLOTS = {
   input: "input",
@@ -226,15 +251,20 @@ const SegmentedControlItem = class {
     this.iconStart = undefined;
     this.iconEnd = undefined;
     this.value = undefined;
+    this.appearance = "solid";
+    this.layout = "horizontal";
+    this.scale = "m";
   }
   handleCheckedChange() {
     this.calciteInternalSegmentedControlItemChange.emit();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
   render() {
-    const { checked, value } = this;
-    const scale = dom.getElementProp(this.el, "scale", "m");
-    const appearance = dom.getElementProp(this.el, "appearance", "solid");
-    const layout = dom.getElementProp(this.el, "layout", "horizontal");
+    const { appearance, checked, layout, scale, value } = this;
     const iconStartEl = this.iconStart ? (index.h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
     const iconEndEl = this.iconEnd ? (index.h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
     return (index.h(index.Host, { "aria-checked": dom.toAriaBoolean(checked), "aria-label": value, role: "radio" }, index.h("label", { class: {

package/dist/cjs/calcite-sheet.cjs.entry.js

@@ -0,0 +1,227 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ee37804b.js');
+const dom = require('./dom-8d00cc3f.js');
+const focusTrapComponent = require('./focusTrapComponent-93fc2e12.js');
+const loadable = require('./loadable-5d36908d.js');
+const observers = require('./observers-62ea89bc.js');
+const openCloseComponent = require('./openCloseComponent-078fbb79.js');
+const resources = require('./resources-2278b321.js');
+require('./guid-c351776c.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.8.0
+ */
+const CSS = {
+  scrim: "scrim",
+  container: "container",
+  containerOpen: "container--open",
+  content: "content",
+  containerSlottedInShell: "container--slotted-in-shell",
+};
+
+const sheetCss = ":host{position:absolute;inset:0px;z-index:var(--calcite-app-z-index-overlay);display:flex;visibility:hidden !important;--calcite-sheet-scrim-background-internal:rgba(0, 0, 0, 0.85);--calcite-scrim-shadow-block-start-internal:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-scrim-shadow-block-end-internal:0 -4px 8px -1px rgba(0, 0, 0, 0.08), 0 -2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-scrim-shadow-inline-start-internal:4px 0 8px -1px rgba(0, 0, 0, 0.08), 2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-scrim-shadow-inline-end-internal:-4px 0 8px -1px rgba(0, 0, 0, 0.08), -2px 0 4px -1px rgba(0, 0, 0, 0.04)}.calcite--rtl{--calcite-scrim-shadow-inline-start-internal:-4px 0 8px -1px rgba(0, 0, 0, 0.08), -2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-scrim-shadow-inline-end-internal:4px 0 8px -1px rgba(0, 0, 0, 0.08), 2px 0 4px -1px rgba(0, 0, 0, 0.04)}.container{visibility:hidden;position:fixed;z-index:var(--calcite-app-z-index-overlay);display:flex;overflow-y:hidden;color:var(--calcite-ui-text-2);opacity:0;transition:visibility 0ms linear var(--calcite-internal-animation-timing-medium), opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88)}:host([position=inline-start]) .container{justify-content:flex-start;inset-block:0;inset-inline:0 auto;--calcite-sheet-hidden-position-internal:translate3d(-1rem, 0, 0)}:host([position=inline-end]) .container{justify-content:flex-end;inset-block:0;inset-inline:auto 0;--calcite-sheet-hidden-position-internal:translate3d(1rem, 0, 0)}:host([position=block-start]) .container{align-items:flex-start;inset-block:0 auto;inset-inline:0;--calcite-sheet-hidden-position-internal:translate3d(0, -1rem, 0)}:host([position=block-end]) .container{align-items:flex-end;inset-block:auto 0;inset-inline:0;--calcite-sheet-hidden-position-internal:translate3d(0, 1rem, 0)}:host([display-mode=float]) .content{--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([display-mode=overlay][position=inline-start]) .container{box-shadow:var(--calcite-scrim-shadow-inline-start-internal)}:host([display-mode=overlay][position=inline-end]) .container{box-shadow:var(--calcite-scrim-shadow-inline-end-internal)}:host([display-mode=overlay][position=block-start]) .container{box-shadow:var(--calcite-scrim-shadow-block-start-internal)}:host([display-mode=overlay][position=block-end]) .container{box-shadow:var(--calcite-scrim-shadow-block-end-internal)}:host([position^=inline]) .container,:host([position^=inline]) .content{inline-size:var(--calcite-sheet-width-internal);max-inline-size:var(--calcite-sheet-max-width-internal);min-inline-size:var(--calcite-sheet-min-width-internal)}:host([position^=block]) .container,:host([position^=block]) .content{block-size:var(--calcite-sheet-height-internal);max-block-size:var(--calcite-sheet-max-height-internal);min-block-size:var(--calcite-sheet-min-height-internal)}:host([display-mode=float][position^=inline]) .container{block-size:calc(100% - 1.5rem);max-block-size:calc(100% - 1.5rem);min-block-size:calc(100% - 1.5rem)}:host([display-mode=float][position^=block]) .container{inline-size:calc(100% - 1.5rem);max-inline-size:calc(100% - 1.5rem);min-inline-size:calc(100% - 1.5rem)}:host([position^=inline][width-scale=s]){--calcite-sheet-width-internal:var(--calcite-sheet-width, 15vw);--calcite-sheet-max-width-internal:var(--calcite-sheet-max-width, 360px);--calcite-sheet-min-width-internal:var(--calcite-sheet-min-width, 260px)}:host([position^=inline][width-scale=m]){--calcite-sheet-width-internal:var(--calcite-sheet-width, 25vw);--calcite-sheet-max-width-internal:var(--calcite-sheet-max-width, 420px);--calcite-sheet-min-width-internal:var(--calcite-sheet-min-width, 300px)}:host([position^=inline][width-scale=l]){--calcite-sheet-width-internal:var(--calcite-sheet-width, 45vw);--calcite-sheet-max-width-internal:var(--calcite-sheet-max-width, 680px);--calcite-sheet-min-width-internal:var(--calcite-sheet-min-width, 340px)}:host([position^=block][height-scale=s]){--calcite-sheet-min-height-internal:var(--calcite-sheet-min-height, 160px);--calcite-sheet-height-internal:var(--calcite-sheet-height, 30vh);--calcite-sheet-max-height-internal:var(--calcite-sheet-max-height, 30vh)}:host([position^=block][height-scale=m]){--calcite-sheet-min-height-internal:var(--calcite-sheet-min-height, 200px);--calcite-sheet-height-internal:var(--calcite-sheet-height, 45vh);--calcite-sheet-max-height-internal:var(--calcite-sheet-max-height, 50vh)}:host([position^=block][height-scale=l]){--calcite-sheet-min-height-internal:var(--calcite-sheet-min-height, 240px);--calcite-sheet-height-internal:var(--calcite-sheet-height, 60vh);--calcite-sheet-max-height-internal:var(--calcite-sheet-max-height, 70vh)}.scrim{--calcite-scrim-background:var(--calcite-sheet-scrim-background, var(--calcite-sheet-scrim-background-internal));position:fixed;inset:0px;display:flex;overflow-y:hidden}:host([opened]){visibility:visible !important}.content{position:relative;z-index:var(--calcite-app-z-index-modal);box-sizing:border-box;display:block;max-inline-size:100%;overflow-y:hidden;padding:0px;background-color:var(--calcite-ui-foreground-1);max-block-size:100%;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear var(--calcite-internal-animation-timing-medium), opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88);transform:var(--calcite-sheet-hidden-position-internal)}.container--open .content{transform:translate3d(0, 0, 0)}:host([display-mode=float]) .content,:host([display-mode=float]) .container{border-radius:0.25rem}:host([display-mode=float]) .container{padding:0.75rem}.container--open{visibility:visible;opacity:1;transition-delay:0ms}.container--open .content{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}:host([position=inline-start]) .content,:host([position=inline-end]) .content{block-size:100%}:host([position=block-start]) .content,:host([position=block-end]) .content{inline-size:100%}:host([position]) .container--slotted-in-shell{pointer-events:auto;position:absolute;inline-size:100%;max-inline-size:100%;min-inline-size:100%;block-size:100%;max-block-size:100%;min-block-size:100%}:host([position]) .container--slotted-in-shell calcite-scrim{position:absolute}:host([hidden]){display:none}[hidden]{display:none}";
+
+const Sheet = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.calciteSheetBeforeClose = index.createEvent(this, "calciteSheetBeforeClose", 6);
+    this.calciteSheetClose = index.createEvent(this, "calciteSheetClose", 6);
+    this.calciteSheetBeforeOpen = index.createEvent(this, "calciteSheetBeforeOpen", 6);
+    this.calciteSheetOpen = index.createEvent(this, "calciteSheetOpen", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Private Properties/ State
+    //
+    //--------------------------------------------------------------------------
+    this.openTransitionProp = "opacity";
+    this.ignoreOpenChange = false;
+    this.mutationObserver = observers.createObserver("mutation", () => this.handleMutationObserver());
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+      this.contentId = dom.ensureId(el);
+    };
+    this.openEnd = () => {
+      this.setFocus();
+      this.el.removeEventListener("calciteSheetOpen", this.openEnd);
+    };
+    this.handleOutsideClose = () => {
+      if (this.outsideCloseDisabled) {
+        return;
+      }
+      this.open = false;
+    };
+    this.closeSheet = async () => {
+      if (this.beforeClose) {
+        try {
+          await this.beforeClose(this.el);
+        }
+        catch (_error) {
+          // close prevented
+          requestAnimationFrame(() => {
+            this.ignoreOpenChange = true;
+            this.open = true;
+            this.ignoreOpenChange = false;
+          });
+          return;
+        }
+      }
+      this.opened = false;
+      this.removeOverflowHiddenClass();
+    };
+    this.beforeClose = undefined;
+    this.displayMode = "overlay";
+    this.escapeDisabled = false;
+    this.heightScale = "m";
+    this.focusTrapDisabled = false;
+    this.label = undefined;
+    this.open = false;
+    this.opened = false;
+    this.outsideCloseDisabled = false;
+    this.position = "inline-start";
+    this.slottedInShell = undefined;
+    this.widthScale = "m";
+  }
+  handleFocusTrapDisabled(focusTrapDisabled) {
+    if (!this.open) {
+      return;
+    }
+    focusTrapDisabled ? focusTrapComponent.deactivateFocusTrap(this) : focusTrapComponent.activateFocusTrap(this);
+  }
+  toggleSheet(value) {
+    if (this.ignoreOpenChange) {
+      return;
+    }
+    if (value) {
+      this.openSheet();
+    }
+    else {
+      this.closeSheet();
+    }
+  }
+  handleOpenedChange() {
+    openCloseComponent.onToggleOpenCloseComponent(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  async componentWillLoad() {
+    loadable.setUpLoadableComponent(this);
+    // when sheet initially renders, if active was set we need to open as watcher doesn't fire
+    if (this.open) {
+      requestAnimationFrame(() => this.openSheet());
+    }
+  }
+  componentDidLoad() {
+    loadable.setComponentLoaded(this);
+  }
+  connectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    focusTrapComponent.connectFocusTrap(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    this.removeOverflowHiddenClass();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    focusTrapComponent.deactivateFocusTrap(this);
+    this.slottedInShell = false;
+  }
+  render() {
+    const dir = dom.getElementDir(this.el);
+    return (index.h(index.Host, { "aria-describedby": this.contentId, "aria-label": this.label, "aria-modal": "true", role: "dialog" }, index.h("div", { class: {
+        [CSS.container]: true,
+        [CSS.containerOpen]: this.opened,
+        [CSS.containerSlottedInShell]: this.slottedInShell,
+        [resources.CSS_UTILITY.rtl]: dir === "rtl",
+      } }, index.h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }), index.h("div", { class: {
+        [CSS.content]: true,
+      },
+      // 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 }, index.h("slot", null)))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  handleEscape(event) {
+    if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) {
+      this.open = false;
+      event.preventDefault();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Sets focus on the component's "close" button (the first focusable item).
+   *
+   */
+  async setFocus() {
+    await loadable.componentFocusable(this);
+    dom.focusFirstTabbable(this.el);
+  }
+  /**
+   * Updates the element(s) that are used within the focus-trap of the component.
+   */
+  async updateFocusTrapElements() {
+    focusTrapComponent.updateFocusTrapElements(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onBeforeOpen() {
+    this.calciteSheetBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteSheetOpen.emit();
+    focusTrapComponent.activateFocusTrap(this);
+  }
+  onBeforeClose() {
+    this.calciteSheetBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteSheetClose.emit();
+    focusTrapComponent.deactivateFocusTrap(this);
+  }
+  openSheet() {
+    this.el.addEventListener("calciteSheetOpen", this.openEnd);
+    this.opened = true;
+    if (!this.slottedInShell) {
+      this.initialOverflowCSS = document.documentElement.style.overflow;
+      // use an inline style instead of a utility class to avoid global class declarations.
+      document.documentElement.style.setProperty("overflow", "hidden");
+    }
+  }
+  removeOverflowHiddenClass() {
+    document.documentElement.style.setProperty("overflow", this.initialOverflowCSS);
+  }
+  handleMutationObserver() {
+    this.updateFocusTrapElements();
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "focusTrapDisabled": ["handleFocusTrapDisabled"],
+    "open": ["toggleSheet"],
+    "opened": ["handleOpenedChange"]
+  }; }
+};
+Sheet.style = sheetCss;
+
+exports.calcite_sheet = Sheet;

package/dist/cjs/calcite-shell-center-row.cjs.entry.js

@@ -8,16 +8,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
-const conditionalSlot = require('./conditionalSlot-f10611d3.js');
-const dom = require('./dom-456f9f13.js');
-require('./observers-9912f013.js');
-require('./guid-d1123d5e.js');
-require('./resources-993f6faf.js');
+const conditionalSlot = require('./conditionalSlot-c989690a.js');
+const dom = require('./dom-8d00cc3f.js');
+require('./observers-62ea89bc.js');
+require('./guid-c351776c.js');
+require('./resources-2278b321.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 = {
   actionBarContainer: "action-bar-container",

package/dist/cjs/calcite-shell-panel_14.cjs.entry.js

@@ -8,26 +8,27 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
-const conditionalSlot = require('./conditionalSlot-f10611d3.js');
-const dom = require('./dom-456f9f13.js');
-const locale = require('./locale-79c3d30e.js');
-const math = require('./math-f28069f3.js');
-const t9n = require('./t9n-58d20225.js');
-const resources = require('./resources-993f6faf.js');
-const guid = require('./guid-d1123d5e.js');
-const observers = require('./observers-9912f013.js');
-const interactive = require('./interactive-48299817.js');
-const loadable = require('./loadable-13605f73.js');
-const sharedListRender = require('./shared-list-render-e5821654.js');
-const sortableComponent = require('./sortableComponent-70bf79de.js');
-const resources$2 = require('./resources-030a27ed.js');
-const resources$1 = require('./resources-8f4e8ba8.js');
+const conditionalSlot = require('./conditionalSlot-c989690a.js');
+const dom = require('./dom-8d00cc3f.js');
+const locale = require('./locale-6479f239.js');
+const math = require('./math-3dc91b82.js');
+const t9n = require('./t9n-a3d7ce48.js');
+const resources = require('./resources-2278b321.js');
+const guid = require('./guid-c351776c.js');
+const observers = require('./observers-62ea89bc.js');
+const interactive = require('./interactive-7837b73d.js');
+const loadable = require('./loadable-5d36908d.js');
+const sharedListRender = require('./shared-list-render-a5fb8233.js');
+const sortableComponent = require('./sortableComponent-c4833f8d.js');
+const resources$2 = require('./resources-dc8e5f07.js');
+const resources$1 = require('./resources-d000455c.js');
 const locale$1 = require('./locale-67f5f6b6.js');
 const solutionStore = require('./solution-store-c443e657.js');
 const interfaces = require('./interfaces-000be6de.js');
-require('./key-8de93212.js');
-require('./array-2db3fd4a.js');
-require('./resources-2b51cf4c.js');
+require('./key-07312a4b.js');
+require('./browser-596d8e1e.js');
+require('./array-a3f9baa5.js');
+require('./resources-56cd0ba8.js');
 require('./debounce-30afab47.js');
 require('./_commonjsHelpers-384729db.js');
 require('./index-feeb7b6a.js');
@@ -36,7 +37,7 @@ require('./clean-url-d5326abb.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$2 = {
   container: "container",
@@ -318,7 +319,7 @@ const ShellPanel = class {
     const separatorNode = !collapsed && allowResizing ? (index.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$2.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") {
@@ -339,7 +340,7 @@ const ShellPanel = class {
         [resources.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(), index.h("div", { class: CSS$2.contentBody }, index.h("slot", null)), separatorNode));
     const actionBarNode = (index.h("slot", { key: "action-bar", name: SLOTS$2.actionBar, onSlotchange: this.handleActionBarSlotChange }));
     const mainNodes = [actionBarNode, contentNode];
@@ -623,11 +624,11 @@ const TabNav = class {
     const offset = `${this.indicatorOffset}px`;
     const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
     return (index.h(index.Host, { role: "tablist" }, index.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) }, index.h("slot", null), index.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) }, index.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) })))));
   }
   //--------------------------------------------------------------------------
@@ -746,7 +747,7 @@ TabNav.style = tabNavCss;
 /*!
  * 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$1 = {
   closeButton: "close-button",
@@ -874,13 +875,13 @@ const TabTitle = class {
         container: true,
         [CSS$1.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); } }, index.h("div", { class: { [CSS$1.content]: true, [CSS$1.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, index.h("slot", null), this.iconEnd ? iconEndEl : null), this.renderCloseButton())));
   }
   renderCloseButton() {
     const { closable, messages } = this;
     return closable ? (index.h("button", { "aria-label": messages.close, class: CSS$1.closeButton, disabled: false, key: CSS$1.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) }, index.h("calcite-icon", { icon: ICONS$1.close, scale: this.scale === "l" ? "m" : "s" }))) : null;
   }
   async componentDidLoad() {
@@ -1020,7 +1021,7 @@ TabTitle.style = tabTitleCss;
 /*!
  * 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 SLOTS$1 = {
   titleGroup: "title-group",
@@ -1140,7 +1141,7 @@ Tabs.style = tabsCss;
 /*!
  * 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",
@@ -1154,7 +1155,7 @@ var ICON_TYPES;
 /*!
  * 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 getScreenReaderText(item, status, valueList) {
   const { items, messages } = valueList;
@@ -1287,6 +1288,9 @@ const ValueList = class {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    if (sortableComponent.dragActive(this)) {
+      return;
+    }
     interactive.connectInteractive(this);
     locale.connectLocalized(this);
     t9n.connectMessages(this);
@@ -1306,6 +1310,9 @@ const ValueList = class {
     interactive.updateHostInteraction(this);
   }
   disconnectedCallback() {
+    if (sortableComponent.dragActive(this)) {
+      return;
+    }
     interactive.disconnectInteractive(this);
     sortableComponent.disconnectSortableComponent(this);
     locale.disconnectLocalized(this);
@@ -1427,7 +1434,7 @@ ValueList.style = valueListCss;
 /*!
  * 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 ICONS = {
   drag: "drag",
@@ -1550,7 +1557,7 @@ const ValueListItem = class {
   }
   render() {
     return (index.h(index.Host, { id: this.el.id || this.guid }, this.renderHandle(), index.h("calcite-pick-list-item", { description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, removable: this.removable, selected: this.selected, 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.getPickListRef }, this.renderActionsStart(), this.renderActionsEnd())));
   }
   get el() { return index.getElement(this); }

package/dist/cjs/calcite-sortable-list.cjs.entry.js

@@ -8,17 +8,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
-const interactive = require('./interactive-48299817.js');
-const observers = require('./observers-9912f013.js');
-const sortableComponent = require('./sortableComponent-70bf79de.js');
-const dom = require('./dom-456f9f13.js');
-require('./guid-d1123d5e.js');
-require('./resources-993f6faf.js');
+const interactive = require('./interactive-7837b73d.js');
+const observers = require('./observers-62ea89bc.js');
+const sortableComponent = require('./sortableComponent-c4833f8d.js');
+const dom = require('./dom-8d00cc3f.js');
+require('./browser-596d8e1e.js');
+require('./guid-c351776c.js');
+require('./resources-2278b321.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 = {
   sortItem: "sort-item",
@@ -53,11 +54,17 @@ const SortableList = class {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    if (sortableComponent.dragActive(this)) {
+      return;
+    }
     this.setUpSorting();
     this.beginObserving();
     interactive.connectInteractive(this);
   }
   disconnectedCallback() {
+    if (sortableComponent.dragActive(this)) {
+      return;
+    }
     interactive.disconnectInteractive(this);
     sortableComponent.disconnectSortableComponent(this);
     this.endObserving();