@esri/solutions-components 0.6.14 → 0.6.16

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

@@ -4,13 +4,15 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c7de2486.js';
-import { a as getElementDir, e as getElementProp, t as toAriaBoolean } from './dom-2b326ec3.js';
-import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-0871d2c6.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-bd6837bc.js';
-import { c as connectLabel, d as disconnectLabel } from './label-b8caf984.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-f848be11.js';
-import './guid-70cda807.js';
-import './resources-1e6d76df.js';
+import { a as getElementDir, t as toAriaBoolean } from './dom-ae3d8818.js';
+import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-65431957.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-22a66feb.js';
+import { c as connectLabel, d as disconnectLabel } from './label-7187f15b.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-d0274dee.js';
+import { c as createObserver } from './observers-a3cec8e4.js';
+import './guid-d34fe102.js';
+import './resources-4d5cdf35.js';
+import './browser-2ab8d297.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}";
 
@@ -31,17 +33,21 @@ const SegmentedControl = class {
         this.selectItem(event.target, true);
       }
     };
+    this.mutationObserver = 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));
@@ -67,28 +73,26 @@ const SegmentedControl = class {
   //--------------------------------------------------------------------------
   componentWillLoad() {
     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() {
     afterConnectDefaultValueSet(this, this.value);
     setComponentLoaded(this);
   }
   connectedCallback() {
+    var _a;
     connectInteractive(this);
     connectLabel(this);
     connectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.handleItemPropChange();
   }
   disconnectedCallback() {
+    var _a;
     disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.el);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -156,6 +160,14 @@ const SegmentedControl = class {
     await 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
@@ -191,8 +203,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 getElement(this); }
   static get watchers() { return {
+    "appearance": ["handlePropsChange"],
+    "layout": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
     "value": ["valueHandler"],
     "selectedItem": ["handleSelectedItemChange"]
   }; }
@@ -202,7 +227,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",
@@ -222,15 +247,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 = getElementProp(this.el, "scale", "m");
-    const appearance = getElementProp(this.el, "appearance", "solid");
-    const layout = getElementProp(this.el, "layout", "horizontal");
+    const { appearance, checked, layout, scale, value } = this;
     const iconStartEl = this.iconStart ? (h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
     const iconEndEl = this.iconEnd ? (h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
     return (h(Host, { "aria-checked": toAriaBoolean(checked), "aria-label": value, role: "radio" }, h("label", { class: {

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

@@ -0,0 +1,223 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c7de2486.js';
+import { v as ensureId, a as getElementDir, f as focusFirstTabbable } from './dom-ae3d8818.js';
+import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent-b7f65d9e.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-d0274dee.js';
+import { c as createObserver } from './observers-a3cec8e4.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent-c3d01cbc.js';
+import { C as CSS_UTILITY } from './resources-4d5cdf35.js';
+import './guid-d34fe102.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) {
+    registerInstance(this, hostRef);
+    this.calciteSheetBeforeClose = createEvent(this, "calciteSheetBeforeClose", 6);
+    this.calciteSheetClose = createEvent(this, "calciteSheetClose", 6);
+    this.calciteSheetBeforeOpen = createEvent(this, "calciteSheetBeforeOpen", 6);
+    this.calciteSheetOpen = createEvent(this, "calciteSheetOpen", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Private Properties/ State
+    //
+    //--------------------------------------------------------------------------
+    this.openTransitionProp = "opacity";
+    this.ignoreOpenChange = false;
+    this.mutationObserver = createObserver("mutation", () => this.handleMutationObserver());
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+      this.contentId = 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 ? deactivateFocusTrap(this) : activateFocusTrap(this);
+  }
+  toggleSheet(value) {
+    if (this.ignoreOpenChange) {
+      return;
+    }
+    if (value) {
+      this.openSheet();
+    }
+    else {
+      this.closeSheet();
+    }
+  }
+  handleOpenedChange() {
+    onToggleOpenCloseComponent(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  async componentWillLoad() {
+    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() {
+    setComponentLoaded(this);
+  }
+  connectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    connectFocusTrap(this);
+  }
+  disconnectedCallback() {
+    var _a;
+    this.removeOverflowHiddenClass();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    deactivateFocusTrap(this);
+    this.slottedInShell = false;
+  }
+  render() {
+    const dir = getElementDir(this.el);
+    return (h(Host, { "aria-describedby": this.contentId, "aria-label": this.label, "aria-modal": "true", role: "dialog" }, h("div", { class: {
+        [CSS.container]: true,
+        [CSS.containerOpen]: this.opened,
+        [CSS.containerSlottedInShell]: this.slottedInShell,
+        [CSS_UTILITY.rtl]: dir === "rtl",
+      } }, h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }), 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 }, 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 componentFocusable(this);
+    focusFirstTabbable(this.el);
+  }
+  /**
+   * Updates the element(s) that are used within the focus-trap of the component.
+   */
+  async updateFocusTrapElements() {
+    updateFocusTrapElements(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onBeforeOpen() {
+    this.calciteSheetBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteSheetOpen.emit();
+    activateFocusTrap(this);
+  }
+  onBeforeClose() {
+    this.calciteSheetBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteSheetClose.emit();
+    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 getElement(this); }
+  static get watchers() { return {
+    "focusTrapDisabled": ["handleFocusTrapDisabled"],
+    "open": ["toggleSheet"],
+    "opened": ["handleOpenedChange"]
+  }; }
+};
+Sheet.style = sheetCss;
+
+export { Sheet as calcite_sheet };

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

@@ -4,16 +4,16 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, h, g as getElement, F as Fragment } from './index-c7de2486.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-dff8f839.js';
-import { g as getSlotted } from './dom-2b326ec3.js';
-import './observers-95c50046.js';
-import './guid-70cda807.js';
-import './resources-1e6d76df.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-1fee63c6.js';
+import { g as getSlotted } from './dom-ae3d8818.js';
+import './observers-a3cec8e4.js';
+import './guid-d34fe102.js';
+import './resources-4d5cdf35.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/esm/calcite-shell-panel_14.entry.js

@@ -4,26 +4,27 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, h, f as forceUpdate, g as getElement, c as createEvent, H as Host, F as Fragment } from './index-c7de2486.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-dff8f839.js';
-import { a as getElementDir, i as isPrimaryPointerButton, s as slotChangeGetAssignedElements, r as slotChangeHasAssignedElement, n as nodeListToArray, d as focusElementInGroup, y as filterDirectChildren, e as getElementProp, t as toAriaBoolean, h as focusElement, g as getSlotted } from './dom-2b326ec3.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-00000ab4.js';
-import { c as clamp } from './math-0d6817c3.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-9791aa0c.js';
-import { C as CSS_UTILITY } from './resources-1e6d76df.js';
-import { g as guid } from './guid-70cda807.js';
-import { c as createObserver } from './observers-95c50046.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-bd6837bc.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-f848be11.js';
-import { q as getItemIndex, m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as handleFilterEvent, g as getItemData, k as keyDownHandler, t as moveItemIndex, i as initialize, c as initializeObserver, f as handleInitialFilter, e as cleanUpObserver, n as calciteListFocusOutHandler, r as removeItem, j as calciteListItemChangeHandler, l as calciteInternalListItemValueChangeHandler, o as setUpItems, p as setFocus, L as List } from './shared-list-render-ec232615.js';
-import { d as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-ebd6bb72.js';
-import { C as CSS$3, S as SLOTS$3 } from './resources-2e5aa562.js';
-import { I as ICON_TYPES$1 } from './resources-2edfa0af.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-1fee63c6.js';
+import { a as getElementDir, i as isPrimaryPointerButton, s as slotChangeGetAssignedElements, u as slotChangeHasAssignedElement, n as nodeListToArray, d as focusElementInGroup, y as filterDirectChildren, z as getElementProp, t as toAriaBoolean, e as focusElement, g as getSlotted } from './dom-ae3d8818.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-56a910a3.js';
+import { c as clamp } from './math-158e90ac.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-142cc7d6.js';
+import { C as CSS_UTILITY } from './resources-4d5cdf35.js';
+import { g as guid } from './guid-d34fe102.js';
+import { c as createObserver } from './observers-a3cec8e4.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-22a66feb.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-d0274dee.js';
+import { q as getItemIndex, m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as handleFilterEvent, g as getItemData, k as keyDownHandler, t as moveItemIndex, i as initialize, c as initializeObserver, f as handleInitialFilter, e as cleanUpObserver, n as calciteListFocusOutHandler, r as removeItem, j as calciteListItemChangeHandler, l as calciteInternalListItemValueChangeHandler, o as setUpItems, p as setFocus, L as List } from './shared-list-render-e8aa5fa4.js';
+import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-eda78521.js';
+import { C as CSS$3, S as SLOTS$3 } from './resources-fa3b8717.js';
+import { I as ICON_TYPES$1 } from './resources-cc801037.js';
 import { g as getLocaleComponentStrings } from './locale-9624832c.js';
 import { s as state, E as EFileType } from './solution-store-b29d50f7.js';
 import { d as EUpdateType } from './interfaces-7470d906.js';
-import './key-02fa06ae.js';
-import './array-d95985ad.js';
-import './resources-24255b05.js';
+import './key-554ad3f4.js';
+import './browser-2ab8d297.js';
+import './array-3eac6aac.js';
+import './resources-99f5fcbf.js';
 import './debounce-229b1a22.js';
 import './_commonjsHelpers-d5f9d613.js';
 import './index-f4bd5aa3.js';
@@ -32,7 +33,7 @@ import './clean-url-bce022e6.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",
@@ -314,7 +315,7 @@ const ShellPanel = class {
     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$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") {
@@ -335,7 +336,7 @@ const ShellPanel = class {
         [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$2.contentBody }, h("slot", null)), separatorNode));
     const actionBarNode = (h("slot", { key: "action-bar", name: SLOTS$2.actionBar, onSlotchange: this.handleActionBarSlotChange }));
     const mainNodes = [actionBarNode, contentNode];
@@ -619,11 +620,11 @@ const TabNav = class {
     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) })))));
   }
   //--------------------------------------------------------------------------
@@ -742,7 +743,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",
@@ -870,13 +871,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); } }, h("div", { class: { [CSS$1.content]: true, [CSS$1.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$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) }, h("calcite-icon", { icon: ICONS$1.close, scale: this.scale === "l" ? "m" : "s" }))) : null;
   }
   async componentDidLoad() {
@@ -1016,7 +1017,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",
@@ -1136,7 +1137,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",
@@ -1150,7 +1151,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;
@@ -1283,6 +1284,9 @@ const ValueList = class {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    if (dragActive(this)) {
+      return;
+    }
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
@@ -1302,6 +1306,9 @@ const ValueList = class {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
+    if (dragActive(this)) {
+      return;
+    }
     disconnectInteractive(this);
     disconnectSortableComponent(this);
     disconnectLocalized(this);
@@ -1423,7 +1430,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",
@@ -1546,7 +1553,7 @@ const ValueListItem = class {
   }
   render() {
     return (h(Host, { id: this.el.id || this.guid }, this.renderHandle(), 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 getElement(this); }

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

@@ -4,17 +4,18 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c7de2486.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-bd6837bc.js';
-import { c as createObserver } from './observers-95c50046.js';
-import { d as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-ebd6bb72.js';
-import { h as focusElement } from './dom-2b326ec3.js';
-import './guid-70cda807.js';
-import './resources-1e6d76df.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-22a66feb.js';
+import { c as createObserver } from './observers-a3cec8e4.js';
+import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-eda78521.js';
+import { e as focusElement } from './dom-ae3d8818.js';
+import './browser-2ab8d297.js';
+import './guid-d34fe102.js';
+import './resources-4d5cdf35.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",
@@ -49,11 +50,17 @@ const SortableList = class {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    if (dragActive(this)) {
+      return;
+    }
     this.setUpSorting();
     this.beginObserving();
     connectInteractive(this);
   }
   disconnectedCallback() {
+    if (dragActive(this)) {
+      return;
+    }
     disconnectInteractive(this);
     disconnectSortableComponent(this);
     this.endObserving();