@esri/solutions-components 0.10.27 → 0.10.29

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

@@ -20,7 +20,7 @@ import { d as defineCustomElement$4 } from './scrim.js';
 import { d as defineCustomElement$3 } from './stack.js';
 import { d as defineCustomElement$2 } from './solution-item-icon2.js';
 
-const solutionItemAccordionCss = ":host{display:block}.padding-start-1{padding-inline-start:1rem}";
+const solutionItemAccordionCss = ":host{display:block}.padding-start-1{padding-inline-start:1rem}.font-size-override{--calcite-font-size--2:var(--calcite-font-size--1)}";
 const SolutionItemAccordionStyle0 = solutionItemAccordionCss;
 
 const SolutionItemAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SolutionItemAccordion extends HTMLElement {
@@ -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
@@ -165,7 +172,8 @@ const SolutionItemAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SolutionI
      * @protected
      */
     _getList(templateInfos) {
-        return (h("calcite-list", { class: "padding-start-1" }, templateInfos.map(t => this._getListItem(t))));
+        const sortedTemplateInfos = this._sortTemplatesByTitle(templateInfos);
+        return (h("calcite-list", null, sortedTemplateInfos.map(t => this._getListItem(t))));
     }
     /**
      * Get list item for the current type
@@ -177,7 +185,25 @@ const SolutionItemAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SolutionI
      * @protected
      */
     _getListItem(templateInfo) {
-        return (h("calcite-list-item", { description: templateInfo.snippet, label: templateInfo.title, value: templateInfo.id }));
+        return (h("calcite-list-item", { class: "font-size-override", description: templateInfo.snippet, label: templateInfo.title, value: templateInfo.id }));
+    }
+    /**
+     * Sort the templates based on the title
+     *
+     * @returns the sorted templates
+     *
+     * @protected
+     */
+    _sortTemplatesByTitle(templateInfos) {
+        return templateInfos.sort((a, b) => {
+            if (a.title < b.title) {
+                return -1;
+            }
+            if (a.title > b.title) {
+                return 1;
+            }
+            return 0;
+        });
     }
     /**
      * Sort the templates based on the defined order in _sortOrder
@@ -188,42 +214,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
      *