@esri/solutions-components 0.10.27 → 0.10.28

package/dist/components/segmented-control.js

@@ -4,19 +4,18 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { t as toAriaBoolean, g as getElementDir } from './dom.js';
+import { h as slotChangeGetAssignedElements, t as toAriaBoolean, g as getElementDir } from './dom.js';
 import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } 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';
 import { V as Validation } from './Validation.js';
 import { i as isBrowser } from './browser.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     itemWrapper: "item-wrapper",
@@ -47,7 +46,13 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
                 this.selectItem(event.target, true);
             }
         };
-        this.mutationObserver = createObserver("mutation", () => this.setUpItems());
+        this.items = [];
+        this.handleDefaultSlotChange = (event) => {
+            const items = slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-segmented-control-item"));
+            this.items = items;
+            this.handleSelectedItem();
+            this.handleItemPropChange();
+        };
         this.appearance = "solid";
         this.disabled = false;
         this.form = undefined;
@@ -79,7 +84,7 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
         this.handleItemPropChange();
     }
     valueHandler(value) {
-        const items = this.getItems();
+        const { items } = this;
         items.forEach((item) => (item.checked = item.value === value));
     }
     handleSelectedItemChange(newItem, oldItem) {
@@ -87,7 +92,7 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
         if (newItem === oldItem) {
             return;
         }
-        const items = this.getItems();
+        const { items } = this;
         const match = items.filter((item) => item === newItem).pop();
         if (match) {
             this.selectItem(match);
@@ -103,30 +108,24 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
     //--------------------------------------------------------------------------
     componentWillLoad() {
         setUpLoadableComponent(this);
-        this.setUpItems();
     }
     componentDidLoad() {
         afterConnectDefaultValueSet(this, this.value);
         setComponentLoaded(this);
     }
     connectedCallback() {
-        connectInteractive(this);
         connectLabel(this);
         connectForm(this);
-        this.mutationObserver?.observe(this.el, { childList: true });
-        this.handleItemPropChange();
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
-        this.mutationObserver?.unobserve(this.el);
     }
     componentDidRender() {
         updateHostInteraction(this);
     }
     render() {
-        return (h(Host, { key: '15d2892515a26a3d97657819a2f7e4ec1bfa132b', onClick: this.handleClick, role: "radiogroup" }, h("div", { key: '5cf92b36bed0d722d548bbda4804fe3e2a8c0c6a', "aria-errormessage": IDS.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), class: CSS.itemWrapper }, h(InteractiveContainer, { key: '3cdc812ffe33a9651dd4308b8fe8db582e3055de', disabled: this.disabled }, h("slot", { key: '4e81e1944e237c65f4bf06b8270a5c23f8c49bd3' }), h(HiddenFormInputSlot, { key: 'b0ccbb1b76b295ab87912c43b0cbbb936c7fea6e', component: this }))), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null));
+        return (h(Host, { key: 'ac313987378a112da88c90e368d19efc06ce79f3', onClick: this.handleClick, role: "radiogroup" }, h("div", { key: 'bef3d657abe624bb76e57561b5a035f374c38faf', "aria-errormessage": IDS.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), class: CSS.itemWrapper }, h(InteractiveContainer, { key: 'a6e66f9d51e2aa5eabdc3cda5a551c16b9493563', disabled: this.disabled }, h("slot", { key: 'e7b4be362a356570aa639b3c32074ed686391d86', onSlotchange: this.handleDefaultSlotChange }), h(HiddenFormInputSlot, { key: '22afaeb8f4250514b981079875183561b5432393', component: this }))), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null));
     }
     handleSelected(event) {
         event.preventDefault();
@@ -152,7 +151,7 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
                 adjustedKey = "ArrowRight";
             }
         }
-        const items = this.getItems();
+        const { items } = this;
         let selectedIndex = -1;
         items.forEach((item, index) => {
             if (item === selectedItem) {
@@ -190,32 +189,39 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
     /** Sets focus on the component. */
     async setFocus() {
         await componentFocusable(this);
-        (this.selectedItem || this.getItems()[0])?.focus();
+        (this.selectedItem || this.items[0])?.focus();
     }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
     handleItemPropChange() {
-        const items = this.getItems();
+        const { items } = this;
         items.forEach((item) => {
             item.appearance = this.appearance;
             item.layout = this.layout;
             item.scale = this.scale;
         });
     }
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
+    handleSelectedItem() {
+        const { items } = this;
+        const lastChecked = items.filter((item) => item.checked).pop();
+        if (lastChecked) {
+            this.selectItem(lastChecked);
+        }
+        else if (items[0]) {
+            items[0].tabIndex = 0;
+        }
+    }
     onLabelClick() {
         this.setFocus();
     }
-    getItems() {
-        return Array.from(this.el.querySelectorAll("calcite-segmented-control-item"));
-    }
     selectItem(selected, emit = false) {
         if (selected === this.selectedItem) {
             return;
         }
-        const items = this.getItems();
+        const { items } = this;
         let match = null;
         items.forEach((item) => {
             const matches = item === selected;
@@ -235,16 +241,6 @@ 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"],

package/dist/components/select.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { f as focusElement, t as toAriaBoolean } from './dom.js';
 import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as createObserver } from './observers.js';
@@ -17,7 +17,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/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     icon: "icon",
@@ -108,13 +108,11 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             subtree: true,
             childList: true,
         });
-        connectInteractive(this);
         connectLabel(this);
         connectForm(this);
     }
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
     }
@@ -237,7 +235,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     }
     render() {
         const { disabled } = this;
-        return (h(Host, { key: '70938120b9aaac3ab07b8bd73ca8e7909c2ea11d' }, h(InteractiveContainer, { key: 'bd7b8839b27ff53f51d1a4fc2e3590b9fb8ab913', disabled: disabled }, h("div", { key: '3dbf7d32dc39c929f7f939e1e1cc72ca6d0b386f', class: CSS.wrapper }, h("select", { key: 'e6763a83fed5e7162d94d93e82e770dbbd238bd7', "aria-errormessage": IDS.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), "aria-label": getLabelText(this), class: CSS.select, disabled: disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef }, h("slot", { key: '68fc9d08be9144e1f874602ecdf46f3cc0eceb05' })), this.renderChevron(), h(HiddenFormInputSlot, { key: '6d5ec3ed6f6d2551679a7e17c9023f32b67b4a2c', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        return (h(Host, { key: 'd2e0ad4197079513f4e9e0070fb397c4f8331597' }, h(InteractiveContainer, { key: '5eee0d42742248209469fb7a5e3541cdbe373d30', disabled: disabled }, h("div", { key: 'e12c66d415dfe7c24e63731f2a83a081687fba8a', class: CSS.wrapper }, h("select", { key: '22685962db75d2527740d288f016665ec5e6053e', "aria-errormessage": IDS.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), "aria-label": getLabelText(this), class: CSS.select, disabled: disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef }, h("slot", { key: '1b105206faa1f0765add18140b0f99f3d273c11f' })), this.renderChevron(), h(HiddenFormInputSlot, { key: '5767128465128a9fb5f69c9241bef0da56b9432e', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -4,17 +4,17 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { g as getRoundRobinIndex } from './array.js';
-import { f as focusElement, a as getSlotted, t as toAriaBoolean } from './dom.js';
+import { f as focusElement, a as getSlotted } from './dom.js';
 import { S as SLOTS } from './resources6.js';
 import { d as debounce } from './debounce.js';
-import { h, Host } from '@stencil/core/internal/client';
+import { h } from '@stencil/core/internal/client';
 import { I as InteractiveContainer } from './interactive.js';
 import { C as CSS, S as SLOTS$1 } from './resources5.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 function mutationObserverCallback() {
     this.setUpItems();
@@ -329,11 +329,11 @@ function getItemData() {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
-const List = ({ props: { disabled, loading, filterEnabled, dataForFilter, handleFilterEvent, filterPlaceholder, filterText, setFilterEl, dragEnabled, storeAssistiveEl, }, ...rest }) => {
+const List = ({ props: { disabled, loading, filterEnabled, dataForFilter, handleFilterEvent, filterPlaceholder, filterText, setFilterEl, dragEnabled, storeAssistiveEl, }, }) => {
     const defaultSlot = h("slot", null);
-    return (h(Host, { "aria-busy": toAriaBoolean(loading), role: "menu", ...rest }, h(InteractiveContainer, { disabled: disabled }, h("section", null, dragEnabled ? (h("span", { "aria-live": "assertive", class: "assistive-text", ref: storeAssistiveEl })) : null, h("header", { class: { [CSS.sticky]: true } }, filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, items: dataForFilter, onCalciteFilterChange: handleFilterEvent, placeholder: filterPlaceholder, ref: setFilterEl, value: filterText })) : null, h("slot", { name: SLOTS$1.menuActions })), loading ? h("calcite-scrim", { loading: loading }) : null, defaultSlot))));
+    return (h(InteractiveContainer, { disabled: disabled }, h("section", null, dragEnabled ? (h("span", { "aria-live": "assertive", class: "assistive-text", ref: storeAssistiveEl })) : null, h("header", { class: { [CSS.sticky]: true } }, filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, items: dataForFilter, onCalciteFilterChange: handleFilterEvent, placeholder: filterPlaceholder, ref: setFilterEl, value: filterText })) : null, h("slot", { name: SLOTS$1.menuActions })), loading ? h("calcite-scrim", { loading: loading }) : null, defaultSlot)));
 };
 
 export { List as L, deselectSiblingItems as a, handleFilterEvent as b, initializeObserver as c, deselectRemovedItems as d, cleanUpObserver as e, handleInitialFilter as f, getItemData as g, handleFilter as h, initialize as i, calciteListItemChangeHandler as j, keyDownHandler as k, calciteInternalListItemValueChangeHandler as l, mutationObserverCallback as m, calciteListFocusOutHandler as n, setUpItems as o, setFocus as p, getItemIndex as q, removeItem as r, selectSiblings as s, moveItemIndex as t };

package/dist/components/shell-panel.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/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     container: "container",
@@ -32,7 +32,7 @@ const SLOTS = {
     header: "header",
 };
 
-const shellPanelCss = ":host{pointer-events:none;position:relative;display:flex;flex:0 1 auto;align-items:stretch;z-index:var(--calcite-shell-panel-z-index, var(--calcite-z-index));--calcite-shell-panel-detached-max-height:unset;--calcite-shell-panel-max-height:unset;--calcite-internal-shell-panel-shadow-block-start:0 4px 8px -1px rgba(0, 0, 0, 0.08),\n    0 2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-block-end:0 -4px 8px -1px rgba(0, 0, 0, 0.08),\n    0 -2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-inline-start:4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-inline-end:-4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    -2px 0 4px -1px rgba(0, 0, 0, 0.04)}.calcite--rtl.content--overlay{--calcite-internal-shell-panel-shadow-inline-start:-4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    -2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-inline-end:4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    2px 0 4px -1px rgba(0, 0, 0, 0.04)}:host([layout=vertical]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index) + 1))}:host([layout=vertical][display-mode=overlay]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index-header) + 1))}:host([layout=vertical][display-mode=float-all]) .content{flex:2}:host([layout=vertical][width-scale=s]:not([display-mode=float-all])) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-max-width:var(--calcite-shell-panel-max-width, 300px);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][width-scale=s][display-mode=float-all]) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][width-scale=m]:not([display-mode=float-all])) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-max-width:var(--calcite-shell-panel-max-width, 420px);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][width-scale=m][display-mode=float-all]) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][width-scale=l]:not([display-mode=float-all])) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-max-width:var(--calcite-shell-panel-max-width, 680px);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 340px)}:host([layout=vertical][width-scale=l][display-mode=float-all]) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 340px)}:host([layout=horizontal][height-scale=s]) .content{--calcite-internal-shell-panel-max-height:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 20vh)\n  )}:host([layout=horizontal]) .content{--calcite-internal-shell-panel-min-height:var(--calcite-shell-panel-min-height, 5vh);--calcite-internal-shell-panel-max-height:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 30vh)\n  )}:host([layout=horizontal][height-scale=l]) .content{--calcite-internal-shell-panel-max-height:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 40vh)\n  )}.container{pointer-events:none;box-sizing:border-box;display:flex;flex:1 1 auto;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2)}.container *{box-sizing:border-box}.container.float-all{margin-block:0.5rem;margin-inline:0.5rem}:host([layout=horizontal]) .container{flex-direction:column}:host(:hover) .separator:not(:hover):not(:focus),:host(:focus-within) .separator:not(:hover):not(:focus){opacity:1;background-color:var(--calcite-color-border-3)}.separator{pointer-events:auto;position:absolute;display:flex;background-color:transparent;opacity:0;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;cursor:col-resize;outline:none}.separator:hover{opacity:1;background-color:var(--calcite-color-border-2)}.separator:focus{background-color:var(--calcite-color-brand);opacity:1}:host([layout=vertical]) .separator{inset-block:0px;block-size:100%;inline-size:0.125rem;cursor:col-resize}:host([layout=horizontal][position=start]) .separator{inset-block-end:0px}:host([layout=horizontal][position=end]) .separator{inset-block-start:0px}:host([layout=horizontal]) .separator{inset-inline-end:0px;block-size:0.125rem;inline-size:100%;cursor:row-resize}:host([layout=vertical][position=start]) .separator{inset-inline-end:-2px}:host([layout=horizontal][position=start]) .separator{inset-block-end:-2px}:host([layout=vertical][position=end]) .separator{inset-inline-start:-2px}:host([layout=horizontal][position=end]) .separator{inset-block-start:-2px}::slotted(calcite-panel),::slotted(calcite-flow){block-size:100%;inline-size:100%;flex:1 1 auto;max-block-size:unset;max-inline-size:unset}::slotted(.calcite-match-height){display:flex;flex:1 1 auto;overflow:hidden}.content{pointer-events:auto;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-self:stretch;background-color:var(--calcite-color-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing)}:host([layout=vertical]:not([display-mode=float-all])) .content{inline-size:var(--calcite-internal-shell-panel-width);max-inline-size:var(--calcite-internal-shell-panel-max-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=vertical][display-mode=float-all]) .content{inline-size:var(--calcite-internal-shell-panel-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=horizontal]) .content{block-size:var(--calcite-internal-shell-panel-height);max-block-size:var(--calcite-internal-shell-panel-max-height);min-block-size:var(--calcite-internal-shell-panel-min-height)}.content__header{display:flex;flex:0 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch}.content__body{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.content--overlay{position:absolute;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px 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([layout=vertical]) .content--overlay{inset-block-start:0px;block-size:100%}:host([layout=horizontal]) .content--overlay{inset-inline-start:0px;inline-size:100%}:host([layout=vertical][position=start]) .content--overlay{inset-inline-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-start)}:host([layout=vertical][position=end]) .content--overlay{inset-inline-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-end)}:host([layout=horizontal][position=start]) .content--overlay{inset-block-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-start)}:host([layout=horizontal][position=end]) .content--overlay{inset-block-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-end)}.float--content{margin-inline:0.5rem;margin-block:0.5rem auto;block-size:auto;overflow:hidden;border-radius:0.25rem;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);max-block-size:var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem))}.float--content ::slotted(calcite-panel),.float--content ::slotted(calcite-flow){max-block-size:unset}:host([layout=horizontal]) .float--content{margin-block:0.5rem}:host([position=start]) .float--content ::slotted(calcite-panel),:host([position=start]) .float--content ::slotted(calcite-flow),:host([position=end]) .float--content ::slotted(calcite-panel),:host([position=end]) .float--content ::slotted(calcite-flow){border-style:none}.content[hidden]{display:none}slot[name=action-bar]::slotted(calcite-action-bar),.content ::slotted(calcite-flow),.content ::slotted(calcite-panel:not([closed])){border-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) .content ::slotted(calcite-flow),:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) .content ::slotted(calcite-panel),:host([position=end][slot=panel-start]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end][slot=panel-start]) .content ::slotted(calcite-flow),:host([position=end][slot=panel-start]) .content ::slotted(calcite-panel){border-inline-start:none}:host([position=end]:not([slot=panel-start])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-flow),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-panel),:host([position=start][slot=panel-end]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start][slot=panel-end]) .content ::slotted(calcite-flow),:host([position=start][slot=panel-end]) .content ::slotted(calcite-panel){border-inline-end:none}:host([layout=horizontal]:not([display-mode=float-all])) slot[name=action-bar]::slotted(calcite-action-bar){border-inline:0}:host([layout=horizontal][position=start]:not([display-mode=float-all])) .content ::slotted(calcite-flow),:host([layout=horizontal][position=start]:not([display-mode=float-all])) .content ::slotted(calcite-panel){border-inline:0;border-block-start:0}:host([layout=horizontal][position=end]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=end]) .content ::slotted(calcite-panel){border-inline:0;border-block-end:0}:host([hidden]){display:none}[hidden]{display:none}";
+const shellPanelCss = ":host{pointer-events:none;position:relative;display:flex;flex:0 1 auto;align-items:stretch;z-index:var(--calcite-shell-panel-z-index, var(--calcite-z-index));--calcite-shell-panel-detached-max-height:unset;--calcite-shell-panel-max-height:unset;--calcite-internal-shell-panel-shadow-block-start:0 4px 8px -1px rgba(0, 0, 0, 0.08),\n    0 2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-block-end:0 -4px 8px -1px rgba(0, 0, 0, 0.08),\n    0 -2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-inline-start:4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-inline-end:-4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    -2px 0 4px -1px rgba(0, 0, 0, 0.04)}.calcite--rtl.content--overlay{--calcite-internal-shell-panel-shadow-inline-start:-4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    -2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-internal-shell-panel-shadow-inline-end:4px 0 8px -1px rgba(0, 0, 0, 0.08),\n    2px 0 4px -1px rgba(0, 0, 0, 0.04)}:host([layout=vertical]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index) + 1))}:host([layout=vertical][display-mode=overlay]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index-header) + 1))}:host([layout=vertical][display-mode=float-all]) .content{flex:2}:host([layout=vertical][width-scale=s]:not([display-mode=float-all])) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-max-width:var(--calcite-shell-panel-max-width, 300px);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][width-scale=s][display-mode=float-all]) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][width-scale=m]:not([display-mode=float-all])) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-max-width:var(--calcite-shell-panel-max-width, 420px);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][width-scale=m][display-mode=float-all]) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][width-scale=l]:not([display-mode=float-all])) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-max-width:var(--calcite-shell-panel-max-width, 680px);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 340px)}:host([layout=vertical][width-scale=l][display-mode=float-all]) .content{--calcite-internal-shell-panel-width:var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-min-width:var(--calcite-shell-panel-min-width, 340px)}:host([layout=horizontal][height-scale=s]) .content{--calcite-internal-shell-panel-max-height:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 20vh)\n  )}:host([layout=horizontal]) .content{--calcite-internal-shell-panel-min-height:var(--calcite-shell-panel-min-height, 5vh);--calcite-internal-shell-panel-max-height:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 30vh)\n  )}:host([layout=horizontal][height-scale=l]) .content{--calcite-internal-shell-panel-max-height:var(\n    --calcite-shell-panel-max-height,\n    var(--calcite-shell-panel-detached-max-height, 40vh)\n  )}.container{pointer-events:none;box-sizing:border-box;display:flex;block-size:100%;flex:1 1 auto;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2)}.container *{box-sizing:border-box}.container.float-all{margin-block:0.5rem;margin-inline:0.5rem}:host([layout=horizontal]) .container{block-size:auto;inline-size:100%;flex-direction:column}:host(:hover) .separator:not(:hover):not(:focus),:host(:focus-within) .separator:not(:hover):not(:focus){opacity:1;background-color:var(--calcite-color-border-3)}.separator{pointer-events:auto;position:absolute;display:flex;background-color:transparent;opacity:0;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;cursor:col-resize;outline:none}.separator:hover{opacity:1;background-color:var(--calcite-color-border-2)}.separator:focus{background-color:var(--calcite-color-brand);opacity:1}:host([layout=vertical]) .separator{inset-block:0px;block-size:100%;inline-size:0.125rem;cursor:col-resize}:host([layout=horizontal][position=start]) .separator{inset-block-end:0px}:host([layout=horizontal][position=end]) .separator{inset-block-start:0px}:host([layout=horizontal]) .separator{inset-inline-end:0px;block-size:0.125rem;inline-size:100%;cursor:row-resize}:host([layout=vertical][position=start]) .separator{inset-inline-end:-2px}:host([layout=horizontal][position=start]) .separator{inset-block-end:-2px}:host([layout=vertical][position=end]) .separator{inset-inline-start:-2px}:host([layout=horizontal][position=end]) .separator{inset-block-start:-2px}::slotted(calcite-panel),::slotted(calcite-flow){block-size:100%;inline-size:100%;flex:1 1 auto;max-block-size:unset;max-inline-size:unset}::slotted(.calcite-match-height){display:flex;flex:1 1 auto;overflow:hidden}.content{pointer-events:auto;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-self:stretch;background-color:var(--calcite-color-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), max-inline-size var(--calcite-animation-timing)}:host([layout=vertical]:not([display-mode=float-all])) .content{inline-size:var(--calcite-internal-shell-panel-width);max-inline-size:var(--calcite-internal-shell-panel-max-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=vertical][display-mode=float-all]) .content{inline-size:var(--calcite-internal-shell-panel-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=horizontal]) .content{block-size:var(--calcite-internal-shell-panel-height);max-block-size:var(--calcite-internal-shell-panel-max-height);min-block-size:var(--calcite-internal-shell-panel-min-height)}.content__header{display:flex;flex:0 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch}.content__body{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.content--overlay{position:absolute;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px 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([layout=vertical]) .content--overlay{inset-block-start:0px;block-size:100%}:host([layout=horizontal]) .content--overlay{inset-inline-start:0px;inline-size:100%}:host([layout=vertical][position=start]) .content--overlay{inset-inline-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-start)}:host([layout=vertical][position=end]) .content--overlay{inset-inline-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-end)}:host([layout=horizontal][position=start]) .content--overlay{inset-block-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-start)}:host([layout=horizontal][position=end]) .content--overlay{inset-block-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-end)}.float--content{margin-inline:0.5rem;margin-block:0.5rem auto;block-size:auto;overflow:hidden;border-radius:0.25rem;--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);max-block-size:var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem))}.float--content ::slotted(calcite-panel),.float--content ::slotted(calcite-flow){max-block-size:unset}:host([layout=horizontal]) .float--content{margin-block:0.5rem}:host([position=start]) .float--content ::slotted(calcite-panel),:host([position=start]) .float--content ::slotted(calcite-flow),:host([position=end]) .float--content ::slotted(calcite-panel),:host([position=end]) .float--content ::slotted(calcite-flow){border-style:none}.content[hidden]{display:none}slot[name=action-bar]::slotted(calcite-action-bar),.content ::slotted(calcite-flow),.content ::slotted(calcite-panel:not([closed])){border-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) .content ::slotted(calcite-flow),:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) .content ::slotted(calcite-panel),:host([position=end][slot=panel-start]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end][slot=panel-start]) .content ::slotted(calcite-flow),:host([position=end][slot=panel-start]) .content ::slotted(calcite-panel){border-inline-start:none}:host([position=end]:not([slot=panel-start])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-flow),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-panel),:host([position=start][slot=panel-end]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start][slot=panel-end]) .content ::slotted(calcite-flow),:host([position=start][slot=panel-end]) .content ::slotted(calcite-panel){border-inline-end:none}:host([layout=horizontal]:not([display-mode=float-all])) slot[name=action-bar]::slotted(calcite-action-bar){border-inline:0}:host([layout=horizontal][position=start]:not([display-mode=float-all])) .content ::slotted(calcite-flow),:host([layout=horizontal][position=start]:not([display-mode=float-all])) .content ::slotted(calcite-panel){border-inline:0;border-block-start:0}:host([layout=horizontal][position=end]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=end]) .content ::slotted(calcite-panel){border-inline:0;border-block-end:0}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteShellPanelStyle0 = shellPanelCss;
 
 const ShellPanel = /*@__PURE__*/ proxyCustomElement(class ShellPanel extends HTMLElement {
@@ -300,8 +300,8 @@ const ShellPanel = /*@__PURE__*/ proxyCustomElement(class ShellPanel extends HTM
                     : null
             : null;
         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 ?? initialContentHeight
-                : contentWidth ?? initialContentWidth, class: CSS.separator, key: "separator", onKeyDown: this.separatorKeyDown, ref: this.connectSeparator, role: "separator", tabIndex: 0, "touch-action": "none" })) : null;
+                ? (contentHeight ?? initialContentHeight)
+                : (contentWidth ?? initialContentWidth), class: CSS.separator, key: "separator", onKeyDown: this.separatorKeyDown, ref: this.connectSeparator, role: "separator", tabIndex: 0, "touch-action": "none" })) : null;
         const getAnimationDir = () => {
             if (layout === "horizontal") {
                 return position === "start"

package/dist/components/shell.js

@@ -10,7 +10,7 @@ import { j as slotChangeHasAssignedElement, h as slotChangeGetAssignedElements }
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     main: "main",
@@ -37,7 +37,7 @@ const SLOTS = {
     dialogs: "dialogs",
 };
 
-const shellCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{position:absolute;inset:0px;display:flex;block-size:100%;inline-size:100%;flex-direction:column;overflow:hidden;--calcite-shell-tip-spacing:26vw}.main{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;flex-direction:row;justify-content:space-between;overflow:hidden}.content{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;overflow:auto;justify-content:space-between}.content ::slotted(:not(calcite-tip-manager)){position:relative;z-index:var(--calcite-z-index)}.content ::slotted(calcite-shell-center-row),.content ::slotted(calcite-panel),.content ::slotted(calcite-flow){flex:1 1 auto;align-self:stretch;max-block-size:unset}.content--behind{position:absolute;inset:0px;border-width:0px;z-index:calc(var(--calcite-z-index) - 1);display:initial}.content--non-interactive{pointer-events:none;display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap}::slotted(calcite-shell-center-row){inline-size:unset}::slotted(.header .heading){font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal)}slot[name=panel-start]::slotted(calcite-shell-panel),slot[name=panel-end]::slotted(calcite-shell-panel){position:relative;z-index:calc(var(--calcite-z-index) + 1)}slot[name=panel-end]::slotted(calcite-shell-panel){margin-inline-start:auto}::slotted(calcite-panel),::slotted(calcite-flow){border-width:1px;border-inline-start-width:0px;border-inline-end-width:0px;border-style:solid;border-color:var(--calcite-color-border-3)}slot[name=center-row]::slotted(calcite-shell-center-row:not([detached])),slot[name=panel-top]::slotted(calcite-shell-center-row:not([detached])),slot[name=panel-bottom]::slotted(calcite-shell-center-row:not([detached])){border-inline-start-width:1px;border-inline-end-width:1px;border-color:var(--calcite-color-border-3)}.center-content{display:flex;flex-direction:column;justify-content:space-between;block-size:100%;inline-size:100%;min-inline-size:0}.content-bottom{justify-content:flex-end}::slotted(calcite-shell-center-row){flex:none;align-self:stretch}::slotted(calcite-tip-manager){position:absolute;z-index:var(--calcite-z-index-toast);box-sizing:border-box}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}::slotted(calcite-tip-manager){animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:0.25rem;--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -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);inset-block-end:0.5rem;inset-inline:var(--calcite-shell-tip-spacing)}slot[name=center-row]::slotted(calcite-shell-center-row),slot[name=panel-bottom]::slotted(calcite-shell-center-row){margin-block-start:auto}slot[name=panel-top]::slotted(calcite-shell-center-row){margin-block-end:auto}.position-wrapper{position:absolute;pointer-events:none;inset:0}:host([hidden]){display:none}[hidden]{display:none}";
+const shellCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{position:absolute;inset:0px;display:flex;block-size:100%;inline-size:100%;flex-direction:column;overflow:hidden;--calcite-shell-tip-spacing:26vw}.main{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;flex-direction:row;justify-content:space-between;overflow:hidden}.content{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;overflow:auto;justify-content:space-between}.content ::slotted(calcite-shell-center-row),.content ::slotted(calcite-panel),.content ::slotted(calcite-flow){flex:1 1 auto;align-self:stretch;max-block-size:unset}.content--behind{position:absolute;inset:0px;border-width:0px;z-index:calc(var(--calcite-z-index) - 1);display:initial}.content--non-interactive{pointer-events:none;display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap}::slotted(calcite-shell-center-row){inline-size:unset}::slotted(.header .heading){font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal)}slot[name=panel-start]::slotted(calcite-shell-panel),slot[name=panel-end]::slotted(calcite-shell-panel){position:relative;z-index:calc(var(--calcite-z-index) + 1)}slot[name=panel-end]::slotted(calcite-shell-panel){margin-inline-start:auto}::slotted(calcite-panel),::slotted(calcite-flow){border-width:1px;border-inline-start-width:0px;border-inline-end-width:0px;border-style:solid;border-color:var(--calcite-color-border-3)}slot[name=center-row]::slotted(calcite-shell-center-row:not([detached])),slot[name=panel-top]::slotted(calcite-shell-center-row:not([detached])),slot[name=panel-bottom]::slotted(calcite-shell-center-row:not([detached])){border-inline-start-width:1px;border-inline-end-width:1px;border-color:var(--calcite-color-border-3)}.center-content{display:flex;flex-direction:column;justify-content:space-between;block-size:100%;inline-size:100%;min-inline-size:0}.content-bottom{justify-content:flex-end}::slotted(calcite-shell-center-row){flex:none;align-self:stretch}::slotted(calcite-tip-manager){position:absolute;z-index:var(--calcite-z-index-toast);box-sizing:border-box}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}::slotted(calcite-tip-manager){animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:0.25rem;--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -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);inset-block-end:0.5rem;inset-inline:var(--calcite-shell-tip-spacing)}slot[name=center-row]::slotted(calcite-shell-center-row),slot[name=panel-bottom]::slotted(calcite-shell-center-row){margin-block-start:auto}slot[name=panel-top]::slotted(calcite-shell-center-row){margin-block-end:auto}.position-wrapper{position:absolute;pointer-events:none;inset:0}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteShellStyle0 = shellCss;
 
 const Shell = /*@__PURE__*/ proxyCustomElement(class Shell extends HTMLElement {
@@ -187,7 +187,7 @@ const Shell = /*@__PURE__*/ proxyCustomElement(class Shell extends HTMLElement {
         return (h("div", { class: CSS.positionedSlotWrapper }, this.renderAlerts(), this.renderModals(), this.renderDialogs(), this.renderSheets()));
     }
     render() {
-        return (h(Fragment, { key: 'd5aba67d8b89161985cdf81c74b8532a522b3fda' }, this.renderHeader(), this.renderMain(), this.renderFooter(), this.renderPositionedSlots()));
+        return (h(Fragment, { key: '6864b8b95b6edd871ad622b0d49a3f4a42a0a8a8' }, this.renderHeader(), this.renderMain(), this.renderFooter(), this.renderPositionedSlots()));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/slider.js

@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { g as guid } from './guid.js';
 import { i as isPrimaryPointerButton, b as intersects } from './dom.js';
 import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { i as isActivationKey } from './key.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
@@ -18,7 +18,7 @@ import { d as defineCustomElement$1 } from './graph.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     container: "container",
@@ -133,7 +133,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
             }
             event.preventDefault();
             if (this.dragProp) {
-                const value = this.translate(event.clientX || event.pageX);
+                const value = this.mapToRange(event.clientX || event.pageX);
                 if (isRange(this.value) && this.dragProp === "minMaxValue") {
                     if (this.minValueDragRange && this.maxValueDragRange && this.minMaxValueRange) {
                         const newMinValue = value - this.minValueDragRange;
@@ -253,7 +253,6 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         this.setMinMaxFromValue();
         this.setValueFromMinMax();
@@ -261,7 +260,6 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         connectForm(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectForm(this);
         disconnectLocalized(this);
@@ -336,11 +334,11 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
                         left: `${mirror ? 100 - maxInterval : minInterval}%`,
                         right: `${mirror ? minInterval : 100 - maxInterval}%`,
                     };
-        return (h(Host, { key: 'c0ebc9073b3609d1d47379b5efccbe31c68915ed', id: id, onKeyDown: this.handleKeyDown, onTouchStart: this.handleTouchStart }, h(InteractiveContainer, { key: '1f6930631e4c83e5b47ae1d5c64c10dbe58ed8e7', disabled: this.disabled }, h("div", { key: '09a30ae372ca5e52fde36a0a85adc76d14ca1461', "aria-label": getLabelText(this), class: {
+        return (h(Host, { key: 'dee9376120224b51dfa12f3e87fbdce4a481a1ed', id: id, onKeyDown: this.handleKeyDown, onTouchStart: this.handleTouchStart }, h(InteractiveContainer, { key: '65bca4d477d57ced846ef97b466917b6d7fc2f21', disabled: this.disabled }, h("div", { key: '99dd57b50ded2302ca1d255708d9e4bd90de3ecb', "aria-label": getLabelText(this), class: {
                 [CSS.container]: true,
                 [CSS.containerRange]: valueIsRange,
                 [`scale--${this.scale}`]: true,
-            } }, this.renderGraph(), h("div", { key: 'e996119bc9bba42340d24b2dc8b2ad7daaf02e6e', class: CSS.track, ref: this.storeTrackRef }, h("div", { key: 'fb768d8462137621d7a891d0767e2e27864307fc', class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: trackRangePlacementStyles }), h("div", { key: '408a0a05ef7503b1af724cfd95e3fb40f94bcbf8', class: CSS.ticks }, this.tickValues.map((tick) => {
+            } }, this.renderGraph(), h("div", { key: '47647c0d347232a0ddb384333b15860a0264aefa', class: CSS.track, ref: this.storeTrackRef }, h("div", { key: '3dc176871f6245f2dde77a016ddc747ad9571d3d', class: CSS.trackRange, onPointerDown: this.onTrackPointerDown, style: trackRangePlacementStyles }), h("div", { key: '0c08b977678d6ac7e8b9944157e51948969a5dc5', class: CSS.ticks }, this.tickValues.map((tick) => {
             const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
             let activeTicks = false;
             if (fillPlacement === "start" || fillPlacement === "end") {
@@ -360,7 +358,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
                     left: mirror ? "" : tickOffset,
                     right: mirror ? tickOffset : "",
                 } }, this.renderTickLabel(tick)));
-        }))), h("div", { key: 'c511ee11206dadb2b23199708abf2d2703423559', class: CSS.thumbContainer }, minThumb, thumb, h(HiddenFormInputSlot, { key: 'f6684d5f25ade745730db775a5e51298b5eb8048', component: this }))))));
+        }))), h("div", { key: '51996cb05142dbeec20093ca12b017adee23f293', class: CSS.thumbContainer }, minThumb, thumb, h(HiddenFormInputSlot, { key: '6fd5c00374205d47e226a417674264417323a5c3', component: this }))))));
     }
     renderThumb({ type, mirror, thumbPlacement, minInterval, maxInterval, }) {
         const isLabeled = type.includes("labeled");
@@ -399,7 +397,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
         if (thumbPlacement === "below") {
             thumbContent.reverse();
         }
-        return (h("div", { "aria-disabled": this.disabled, "aria-label": ariaLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": ariaValuenow, class: {
+        return (h("div", { "aria-label": ariaLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": ariaValuenow, class: {
                 [CSS.thumb]: true,
                 [CSS.thumbValue]: !isMinThumb,
                 [CSS.thumbActive]: this.lastDragProp !== "minMaxValue" && this.dragProp === valueProp,
@@ -430,7 +428,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
             return;
         }
         const x = event.clientX || event.pageX;
-        const position = this.translate(x);
+        const position = this.mapToRange(x);
         let prop = "value";
         if (isRange(this.value)) {
             const inRange = position >= this.minValue && position <= this.maxValue;
@@ -614,7 +612,7 @@ const Slider = /*@__PURE__*/ proxyCustomElement(class Slider extends HTMLElement
      * @param x
      * @internal
      */
-    translate(x) {
+    mapToRange(x) {
         const range = this.max - this.min;
         const { left, width } = this.trackEl.getBoundingClientRect();
         const percent = (x - left) / width;

package/dist/components/solution-item-accordion.js

@@ -136,8 +136,9 @@ const SolutionItemAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SolutionI
      */
     _getAccordion() {
         return (h("calcite-accordion", { selectionMode: "single" }, this._sortedTemplateInfos.reduce((prev, cur) => {
-            if (this._types.indexOf(cur.type) < 0) {
-                this._types.push(cur.type);
+            const displayType = this._getTypeForDisplay(cur.type, cur.typeKeywords);
+            if (this._types.indexOf(displayType) < 0) {
+                this._types.push(displayType);
                 prev.push(this._getAccordionItem(cur));
             }
             return prev;
@@ -147,13 +148,19 @@ const SolutionItemAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SolutionI
      * Get the Accordion Item component with the appropriate icon and template type
      * Only one accordion item per type.
      *
+     * @param templateInfo the current templateInfo to handle
+     *
      * @returns the Accordion Item component
      *
      * @protected
      */
     _getAccordionItem(templateInfo) {
-        const templateInfos = this._sortedTemplateInfos.filter(t => t.type === templateInfo.type);
-        return (h("calcite-accordion-item", { description: `${templateInfo.type} (${templateInfos.length})` }, h("solution-item-icon", { class: "padding-start-1", slot: "actions-start", type: templateInfo.type, typeKeywords: templateInfo.typeKeywords }), this._getList(templateInfos)));
+        const _type = this._getTypeForDisplay(templateInfo.type, templateInfo.typeKeywords);
+        const templateInfos = this._sortedTemplateInfos.filter(t => {
+            const tType = this._getTypeForDisplay(t.type, t.typeKeywords);
+            return tType === _type;
+        });
+        return (h("calcite-accordion-item", { description: `${_type} (${templateInfos.length})` }, h("solution-item-icon", { class: "padding-start-1", slot: "actions-start", type: templateInfo.type, typeKeywords: templateInfo.typeKeywords }), this._getList(templateInfos)));
     }
     /**
      * Get the list of template infos for the current type
@@ -188,42 +195,53 @@ const SolutionItemAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SolutionI
      */
     _sortTemplates() {
         return this.templateInfos.sort((a, b) => {
-            const aType = this._updateType(a);
-            const bType = this._updateType(b);
+            const aType = this._getTypeForSort(a);
+            const bType = this._getTypeForSort(b);
             const indexA = this._sortOrder.indexOf(aType);
             const indexB = this._sortOrder.indexOf(bType);
             return indexA - indexB;
         });
     }
     /**
-     * Some template types are displayed with a value that is different than the stored type value.
-     * This function will catch and update the type value to match how we would like it sorted and displayed.
+     * This function will update the type value to match how we would like it sorted.
+     *
+     * @param templateInfo
      *
      * @returns the sorted templates
      *
      * @protected
      */
-    _updateType(templateInfo) {
-        let updatedType = templateInfo.type;
-        if (templateInfo.type === "Feature Service") {
-            updatedType = templateInfo.typeKeywords.indexOf("View Service") > -1 ?
-                "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
-        }
-        if (templateInfo.type === "Web Mapping Application") {
-            updatedType = templateInfo.typeKeywords.indexOf("configurableApp") > -1 ?
-                "Instant App" : updatedType;
-        }
-        templateInfo.type = templateInfo.type === "Geoprocessing Service" ? "Tool" :
-            templateInfo.type === "Vector Tile Service" ? "Tile Layer" : updatedType;
+    _getTypeForSort(templateInfo) {
+        let updatedType = this._getTypeForDisplay(templateInfo.type, templateInfo.typeKeywords);
         if (this._sortOrder.indexOf(updatedType) < 0) {
             // If we encounter an item type that is not in the list
             // put it between the "Desktop Application Template" and "Web Map" section
-            // Do not set this as the templates type value as we want its actual type to be displayed
-            // this is just used for sorting
             updatedType = "TypeNotFound";
         }
         return updatedType;
     }
+    /**
+     * This function will update the type value to match how we would like it displayed.
+     *
+     * @param type the current item type
+     * @param typeKeywords the type keywords for the current item
+     *
+     * @returns the updated type value
+     *
+     * @protected
+     */
+    _getTypeForDisplay(type, typeKeywords) {
+        let _type = type;
+        if (type === "Feature Service") {
+            _type = typeKeywords.indexOf("View Service") > -1 ?
+                "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
+        }
+        if (type === "Web Mapping Application") {
+            _type = typeKeywords.indexOf("configurableApp") > -1 ?
+                "Instant App" : _type;
+        }
+        return _type;
+    }
     /**
      * Fetches the component's translations
      *