@esri/solutions-components 0.6.15 → 0.6.16

package/dist/components/panel.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { h as slotChangeHasAssignedElement, e as slotChangeGetAssignedElements, j as focusFirstTabbable, t as toAriaBoolean } from './dom.js';
+import { j as slotChangeHasAssignedElement, h as slotChangeGetAssignedElements, k as focusFirstTabbable, t as toAriaBoolean } from './dom.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as createObserver } from './observers.js';
@@ -21,7 +21,7 @@ import { d as defineCustomElement$1 } from './scrim.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",
@@ -249,7 +249,7 @@ const Panel = /*@__PURE__*/ proxyCustomElement(class Panel extends HTMLElement {
     const { close, hasEndActions, messages, closable, hasMenuItems } = this;
     const text = messages.close;
     const closableNode = closable ? (h("calcite-action", { "aria-label": text, "data-test": "close", icon: ICONS.close, onClick: close, text: text, title: text,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setCloseRef })) : null;
     const slotNode = (h("slot", { name: SLOTS.headerActionsEnd, onSlotchange: this.handleHeaderActionsEndSlotChange }));
     const showContainer = hasEndActions || closableNode || hasMenuItems;
@@ -278,7 +278,7 @@ const Panel = /*@__PURE__*/ proxyCustomElement(class Panel extends HTMLElement {
   }
   renderContent() {
     return (h("div", { class: CSS.contentWrapper, onScroll: this.panelScrollHandler,
-      // 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.setPanelScrollEl }, h("slot", null), this.renderFab()));
   }
   renderFab() {
@@ -287,7 +287,7 @@ const Panel = /*@__PURE__*/ proxyCustomElement(class Panel extends HTMLElement {
   render() {
     const { loading, panelKeyDownHandler, closed, closable } = this;
     const panelNode = (h("article", { "aria-busy": toAriaBoolean(loading), class: CSS.container, hidden: closed, onKeyDown: panelKeyDownHandler, tabIndex: closable ? 0 : -1,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setContainerRef }, this.renderHeaderNode(), this.renderContent(), this.renderFooterNode()));
     return (h(Fragment, null, loading ? h("calcite-scrim", { loading: loading }) : null, panelNode));
   }

package/dist/components/pick-list-item.js

@@ -10,7 +10,7 @@ import { c as connectInteractive, d as disconnectInteractive, u as updateHostInt
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
-import { I as ICON_TYPES } from './resources3.js';
+import { I as ICON_TYPES } from './resources4.js';
 import { d as defineCustomElement$3 } from './action.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './loader.js';
@@ -18,7 +18,7 @@ import { d as defineCustomElement$1 } from './loader.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 = {
   actions: "actions",
@@ -200,7 +200,7 @@ const PickListItem = /*@__PURE__*/ proxyCustomElement(class PickListItem extends
   render() {
     const { description, label } = this;
     return (h(Fragment, null, this.renderIcon(), this.renderActionsStart(), h("label", { "aria-label": label, class: CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, 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: (focusEl) => (this.focusEl = focusEl) }, h("div", { "aria-checked": toAriaBoolean(this.selected), class: CSS.textContainer, role: "menuitemcheckbox" }, h("span", { class: CSS.title }, label), description ? h("span", { class: CSS.description }, description) : null)), this.renderActionsEnd()));
   }
   static get assetsDirs() { return ["assets"]; }

package/dist/components/popover.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { f as filterComputedPlacements, c as connectFloatingUI, d as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui.js';
 import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent.js';
-import { i as isPrimaryPointerButton, t as toAriaBoolean, j as focusFirstTabbable, q as queryElementRoots } from './dom.js';
+import { i as isPrimaryPointerButton, t as toAriaBoolean, k as focusFirstTabbable, q as queryElementRoots } from './dom.js';
 import { g as guid } from './guid.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { H as Heading } from './Heading.js';
@@ -23,7 +23,7 @@ import { d as defineCustomElement$1 } from './loader.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",
@@ -43,7 +43,7 @@ const ARIA_EXPANDED = "aria-expanded";
 /*!
  * 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
  */
 class PopoverManager {
   constructor() {
@@ -372,7 +372,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
   renderCloseButton() {
     const { messages, closable } = this;
     return closable ? (h("div", { class: CSS.closeButtonContainer, key: CSS.closeButtonContainer }, h("calcite-action", { appearance: "transparent", class: CSS.closeButton, onClick: this.hide, scale: this.scale, text: messages.close,
-      // 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: (closeButtonEl) => (this.closeButtonEl = closeButtonEl) }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : this.scale })))) : null;
   }
   renderHeader() {
@@ -385,13 +385,13 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
     const arrowNode = !pointerDisabled ? (h(FloatingArrow, { floatingLayout: floatingLayout, key: "floating-arrow",
-      // 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.storeArrowEl })) : null;
     return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" }, h("div", { class: {
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: displayed,
       },
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setTransitionEl }, arrowNode, h("div", { class: {
         [CSS.hasHeader]: !!heading,
         [CSS.container]: true,

package/dist/components/resources.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const autoMode = "calcite-mode-auto";
 const darkMode = "calcite-mode-dark";

package/dist/components/resources2.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 var KindIcons;
 (function (KindIcons) {

package/dist/components/resources3.js

@@ -6,19 +6,19 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const CSS = {
-  sticky: "sticky-pos",
-};
-var ICON_TYPES;
-(function (ICON_TYPES) {
-  ICON_TYPES["circle"] = "circle";
-  ICON_TYPES["square"] = "square";
-  ICON_TYPES["grip"] = "grip";
-})(ICON_TYPES || (ICON_TYPES = {}));
-const SLOTS = {
-  menuActions: "menu-actions",
+  container: "container",
+  containerLink: "container--link",
+  containerMulti: "container--multi-selection",
+  containerSingle: "container--single-selection",
+  containerNone: "container--none-selection",
+  icon: "dropdown-item-icon",
+  iconEnd: "dropdown-item-icon-end",
+  iconStart: "dropdown-item-icon-start",
+  itemContent: "dropdown-item-content",
+  link: "dropdown-link",
 };
 
-export { CSS as C, ICON_TYPES as I, SLOTS as S };
+export { CSS as C };

package/dist/components/resources4.js

@@ -6,15 +6,19 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const CSS = {
-  heading: "heading",
-  container: "container",
-  indented: "container--indented",
+  sticky: "sticky-pos",
 };
+var ICON_TYPES;
+(function (ICON_TYPES) {
+  ICON_TYPES["circle"] = "circle";
+  ICON_TYPES["square"] = "square";
+  ICON_TYPES["grip"] = "grip";
+})(ICON_TYPES || (ICON_TYPES = {}));
 const SLOTS = {
-  parentItem: "parent-item",
+  menuActions: "menu-actions",
 };
 
-export { CSS as C, SLOTS as S };
+export { CSS as C, ICON_TYPES as I, SLOTS as S };

package/dist/components/resources5.js

@@ -0,0 +1,20 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/*!
+ * 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 = {
+  heading: "heading",
+  container: "container",
+  indented: "container--indented",
+};
+const SLOTS = {
+  parentItem: "parent-item",
+};
+
+export { CSS as C, SLOTS as S };

package/dist/components/scrim.js

@@ -7,13 +7,13 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { c as createObserver } from './observers.js';
-import { u as slotChangeHasContent } from './dom.js';
+import { v as slotChangeHasContent } from './dom.js';
 import { d as defineCustomElement$1 } from './loader.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 = {
   scrim: "scrim",

package/dist/components/segmented-control-item.js

@@ -4,13 +4,13 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { y as getElementProp, t as toAriaBoolean } from './dom.js';
+import { t as toAriaBoolean } from './dom.js';
 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 SLOTS = {
   input: "input",
@@ -32,15 +32,20 @@ const SegmentedControlItem = /*@__PURE__*/ proxyCustomElement(class SegmentedCon
     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: {
@@ -62,7 +67,10 @@ const SegmentedControlItem = /*@__PURE__*/ proxyCustomElement(class SegmentedCon
     "iconFlipRtl": [516, "icon-flip-rtl"],
     "iconStart": [513, "icon-start"],
     "iconEnd": [513, "icon-end"],
-    "value": [1032]
+    "value": [1032],
+    "appearance": [1],
+    "layout": [1],
+    "scale": [1]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/segmented-control.js

@@ -9,6 +9,7 @@ import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { c as connectLabel, d as disconnectLabel } from './label.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
+import { c as createObserver } from './observers.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 +32,21 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
         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 +72,26 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
   //--------------------------------------------------------------------------
   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 +159,14 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
     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 +202,21 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
       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 this; }
   static get watchers() { return {
+    "appearance": ["handlePropsChange"],
+    "layout": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
     "value": ["valueHandler"],
     "selectedItem": ["handleSelectedItemChange"]
   }; }
@@ -202,8 +226,8 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
     "disabled": [516],
     "form": [513],
     "required": [516],
-    "layout": [513],
     "name": [513],
+    "layout": [513],
     "scale": [513],
     "value": [1025],
     "selectedItem": [1040],

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") {