@esri/calcite-components 1.4.0-next.16 → 1.4.0-next.18

package/dist/collection/components/radio-button/radio-button.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 import { h, Host } from "@stencil/core";
 import { getRoundRobinIndex } from "../../utils/array";

package/dist/collection/components/radio-button/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 export const CSS = {
   container: "container"

package/dist/collection/components/radio-button-group/radio-button-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 import { h, Host } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/rating/function/star.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 import { h } from "@stencil/core";
 export const StarIcon = ({ full, scale, partial }) => (h("calcite-icon", { ...{

package/dist/collection/components/rating/rating.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 import { h, Host } from "@stencil/core";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";

package/dist/collection/components/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 export var KindIcons;
 (function (KindIcons) {

package/dist/collection/components/scrim/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 export const CSS = {
   scrim: "scrim",

package/dist/collection/components/scrim/scrim.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 import { h } from "@stencil/core";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 import { Build, h, Host } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 export const SLOTS = {
   input: "input"

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/select/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/select/select.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 import { Fragment, h } from "@stencil/core";
 import { focusElement } from "../../utils/dom";

package/dist/collection/components/shell/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 export const CSS = {
   main: "main",

package/dist/collection/components/shell/shell.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 import { Fragment, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";

package/dist/collection/components/shell-center-row/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 export const CSS = {
   actionBarContainer: "action-bar-container",

package/dist/collection/components/shell-center-row/shell-center-row.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 import { Fragment, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";

package/dist/collection/components/shell-panel/resources.js

@@ -1,14 +1,15 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 export const CSS = {
   container: "container",
   content: "content",
   contentHeader: "content__header",
   contentBody: "content__body",
-  contentDetached: "content--detached",
+  contentFloat: "content--float",
+  contentOverlay: "content--overlay",
   separator: "separator"
 };
 export const SLOTS = {

package/dist/collection/components/shell-panel/shell-panel.css

@@ -121,10 +121,10 @@
 * @prop --calcite-shell-panel-width: Specifies the width of the component.
 * @prop --calcite-shell-panel-max-width: Specifies the maximum width of the component.
 * @prop --calcite-shell-panel-min-width: Specifies the minimum width of the component.
-* @prop --calcite-shell-panel-height: When `layout` is `"horizontal"`, specifies the height of the component.
-* @prop --calcite-shell-panel-max-height: When `layout` is `"horizontal"`, specifies the maximum height of the component.
-* @prop --calcite-shell-panel-min-height: When `layout` is `"horizontal"`, specifies the minimum height of the component.
-* @prop --calcite-shell-panel-detached-max-height: When `detached` is `true`, specifies the maximum height of the component.
+* @prop --calcite-shell-panel-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the height of the component.
+* @prop --calcite-shell-panel-max-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component.
+* @prop --calcite-shell-panel-min-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the minimum height of the component.
+* @prop [Deprecated] --calcite-shell-panel-detached-max-height: When `displayMode` is `float`, specifies the maximum height of the component.
 * @prop --calcite-shell-panel-z-index: Specifies the z-index value for the component.
 *
 */
@@ -134,18 +134,32 @@
   display: flex;
   flex: 0 1 auto;
   align-items: stretch;
-  --calcite-shell-panel-detached-max-height: unset;
   z-index: var(--calcite-shell-panel-z-index, var(--calcite-app-z-index));
+  --calcite-shell-panel-detached-max-height: unset;
+  --calcite-shell-panel-max-height: unset;
+  --calcite-shell-panel-shadow-block-start-internal: 0 4px 8px -1px rgba(0, 0, 0, 0.08),
+    0 2px 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-shell-panel-shadow-block-end-internal: 0 -4px 8px -1px rgba(0, 0, 0, 0.08),
+    0 -2px 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-shell-panel-shadow-inline-start-internal: 4px 0 8px -1px rgba(0, 0, 0, 0.08),
+    2px 0 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-shell-panel-shadow-inline-end-internal: -4px 0 8px -1px rgba(0, 0, 0, 0.08),
+    -2px 0 4px -1px rgba(0, 0, 0, 0.04);
+}
+
+.calcite--rtl.content--overlay {
+  --calcite-shell-panel-shadow-inline-start-internal: -4px 0 8px -1px rgba(0, 0, 0, 0.08),
+    -2px 0 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-shell-panel-shadow-inline-end-internal: 4px 0 8px -1px rgba(0, 0, 0, 0.08),
+    2px 0 4px -1px rgba(0, 0, 0, 0.04);
 }
 
 :host([layout=vertical]) {
   z-index: var(--calcite-shell-panel-z-index, calc(var(--calcite-app-z-index) + 1));
 }
 
-:host([layout=horizontal]) .content {
-  --calcite-shell-panel-height-internal: var(--calcite-shell-panel-height, 20vh);
-  --calcite-shell-panel-max-height-internal: var(--calcite-shell-panel-max-height, 420px);
-  --calcite-shell-panel-min-height-internal: var(--calcite-shell-panel-min-height, 240px);
+:host([layout=vertical][display-mode=overlay]) {
+  z-index: var(--calcite-shell-panel-z-index, calc(var(--calcite-app-z-index-header) + 1));
 }
 
 :host([layout=vertical][width-scale=s]) .content {
@@ -166,16 +180,26 @@
   --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 340px);
 }
 
-:host([detached-height-scale=s]) .content--detached {
-  --calcite-shell-panel-detached-max-height-internal: var(--calcite-shell-panel-detached-max-height, 40vh);
+:host([layout=horizontal][height-scale=s]) .content {
+  --calcite-shell-panel-max-height-internal: var(
+    --calcite-shell-panel-max-height,
+    var(--calcite-shell-panel-detached-max-height, 20vh)
+  );
 }
 
-:host([detached-height-scale=m]) .content--detached {
-  --calcite-shell-panel-detached-max-height-internal: var(--calcite-shell-panel-detached-max-height, 60vh);
+:host([layout=horizontal]) .content {
+  --calcite-shell-panel-min-height-internal: var(--calcite-shell-panel-min-height, 5vh);
+  --calcite-shell-panel-max-height-internal: var(
+    --calcite-shell-panel-max-height,
+    var(--calcite-shell-panel-detached-max-height, 30vh)
+  );
 }
 
-:host([detached-height-scale=l]) .content--detached {
-  --calcite-shell-panel-detached-max-height-internal: var(--calcite-shell-panel-detached-max-height, 80vh);
+:host([layout=horizontal][height-scale=l]) .content {
+  --calcite-shell-panel-max-height-internal: var(
+    --calcite-shell-panel-max-height,
+    var(--calcite-shell-panel-detached-max-height, 40vh)
+  );
 }
 
 .container {
@@ -313,7 +337,44 @@
   overflow: hidden;
 }
 
-.content--detached {
+.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-shell-panel-shadow-inline-start-internal);
+}
+
+:host([layout=vertical][position=end]) .content--overlay {
+  inset-inline-end: 100%;
+  box-shadow: var(--calcite-shell-panel-shadow-inline-end-internal);
+}
+
+:host([layout=horizontal][position=start]) .content--overlay {
+  inset-block-start: 100%;
+  box-shadow: var(--calcite-shell-panel-shadow-block-start-internal);
+}
+
+:host([layout=horizontal][position=end]) .content--overlay {
+  inset-block-end: 100%;
+  box-shadow: var(--calcite-shell-panel-shadow-block-end-internal);
+}
+
+.content--float {
   margin-inline: 0.5rem;
   margin-block: 0.5rem auto;
   block-size: auto;
@@ -322,17 +383,21 @@
   --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-shell-panel-detached-max-height-internal);
+  max-block-size: var(--calcite-shell-panel-max-height-internal, calc(100% - 1rem));
 }
-.content--detached ::slotted(calcite-panel),
-.content--detached ::slotted(calcite-flow) {
+.content--float ::slotted(calcite-panel),
+.content--float ::slotted(calcite-flow) {
   max-block-size: unset;
 }
 
-:host([position=start]) .content--detached ::slotted(calcite-panel),
-:host([position=start]) .content--detached ::slotted(calcite-flow),
-:host([position=end]) .content--detached ::slotted(calcite-panel),
-:host([position=end]) .content--detached ::slotted(calcite-flow) {
+:host([layout=horizontal]) .content--float {
+  margin-block: 0.5rem;
+}
+
+:host([position=start]) .content--float ::slotted(calcite-panel),
+:host([position=start]) .content--float ::slotted(calcite-flow),
+:host([position=end]) .content--float ::slotted(calcite-panel),
+:host([position=end]) .content--float ::slotted(calcite-flow) {
   border-style: none;
 }
 

package/dist/collection/components/shell-panel/shell-panel.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 import { forceUpdate, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
@@ -10,6 +10,7 @@ import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { clamp } from "../../utils/math";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
 import { CSS, SLOTS } from "./resources";
+import { CSS_UTILITY } from "../../utils/resources";
 /**
  * @slot - A slot for adding custom content.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
@@ -169,7 +170,7 @@ export class ShellPanel {
     this.connectSeparator = (separatorEl) => {
       this.disconnectSeparator();
       this.separatorEl = separatorEl;
-      separatorEl.addEventListener("pointerdown", this.separatorPointerDown);
+      separatorEl?.addEventListener("pointerdown", this.separatorPointerDown);
     };
     this.disconnectSeparator = () => {
       this.separatorEl?.removeEventListener("pointerdown", this.separatorPointerDown);
@@ -184,10 +185,12 @@ export class ShellPanel {
     };
     this.collapsed = false;
     this.detached = false;
-    this.detachedHeightScale = "l";
+    this.displayMode = "dock";
+    this.detachedHeightScale = undefined;
+    this.heightScale = undefined;
     this.widthScale = "m";
     this.layout = "vertical";
-    this.position = undefined;
+    this.position = "start";
     this.resizable = false;
     this.messages = undefined;
     this.messageOverrides = undefined;
@@ -196,6 +199,23 @@ export class ShellPanel {
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
   }
+  handleDetached(value) {
+    if (value) {
+      this.displayMode = "float";
+    }
+    else if (this.displayMode === "float") {
+      this.displayMode = "dock";
+    }
+  }
+  handleDisplayMode(value) {
+    this.detached = value === "float";
+  }
+  handleDetachedHeightScale(value) {
+    this.heightScale = value;
+  }
+  handleHeightScale(value) {
+    this.detachedHeightScale = value;
+  }
   layoutHandler() {
     this.setActionBarsLayout(this.actionBars);
   }
@@ -238,8 +258,9 @@ export class ShellPanel {
     return hasHeader ? (h("div", { class: CSS.contentHeader, key: "header" }, h("slot", { name: SLOTS.header }))) : null;
   }
   render() {
-    const { collapsed, detached, position, initialContentWidth, initialContentHeight, contentWidth, contentWidthMax, contentWidthMin, contentHeight, contentHeightMax, contentHeightMin, resizable, layout } = this;
-    const allowResizing = !detached && resizable;
+    const { collapsed, position, initialContentWidth, initialContentHeight, contentWidth, contentWidthMax, contentWidthMin, contentHeight, contentHeightMax, contentHeightMin, resizable, layout, displayMode } = this;
+    const dir = getElementDir(this.el);
+    const allowResizing = displayMode !== "float" && resizable;
     const style = allowResizing
       ? layout === "horizontal"
         ? contentHeight
@@ -249,16 +270,34 @@ export class ShellPanel {
           ? { width: `${contentWidth}px` }
           : null
       : null;
-    const contentNode = (h("div", { class: { [CSS.content]: true, [CSS.contentDetached]: detached }, hidden: collapsed, key: "content", style: style,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: this.storeContentEl }, this.renderHeader(), h("div", { class: CSS.contentBody }, h("slot", null))));
-    const separatorNode = 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"
+    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, role: "separator", tabIndex: 0, "touch-action": "none",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.connectSeparator })) : null;
+    const getAnimationDir = () => {
+      if (layout === "horizontal") {
+        return position === "start"
+          ? CSS_UTILITY.calciteAnimateInDown
+          : CSS_UTILITY.calciteAnimateInUp;
+      }
+      else {
+        const isStart = (dir === "ltr" && position === "end") || (dir === "rtl" && position === "start");
+        return isStart ? CSS_UTILITY.calciteAnimateInLeft : CSS_UTILITY.calciteAnimateInRight;
+      }
+    };
+    const contentNode = (h("div", { class: {
+        [CSS_UTILITY.rtl]: dir === "rtl",
+        [CSS.content]: true,
+        [CSS.contentOverlay]: displayMode === "overlay",
+        [CSS.contentFloat]: displayMode === "float",
+        [CSS_UTILITY.calciteAnimate]: displayMode === "overlay",
+        [getAnimationDir()]: displayMode === "overlay"
+      }, hidden: collapsed, key: "content", style: style,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.storeContentEl }, this.renderHeader(), h("div", { class: CSS.contentBody }, h("slot", null)), separatorNode));
     const actionBarNode = (h("slot", { key: "action-bar", name: SLOTS.actionBar, onSlotchange: this.handleActionBarSlotChange }));
-    const mainNodes = [actionBarNode, contentNode, separatorNode];
+    const mainNodes = [actionBarNode, contentNode];
     if (position === "end") {
       mainNodes.reverse();
     }
@@ -368,13 +407,39 @@ export class ShellPanel {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "use `displayMode` instead."
+            }],
           "text": "When `true`, the content area displays like a floating panel."
         },
         "attribute": "detached",
         "reflect": true,
         "defaultValue": "false"
       },
+      "displayMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DisplayMode",
+          "resolved": "\"dock\" | \"float\" | \"overlay\"",
+          "references": {
+            "DisplayMode": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the display mode - `\"dock\"` (full height, displays adjacent to center content), `\"float\"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content),\nor `\"overlay\"` (full height, displays on top of center content)."
+        },
+        "attribute": "display-mode",
+        "reflect": true,
+        "defaultValue": "\"dock\""
+      },
       "detachedHeightScale": {
         "type": "string",
         "mutable": false,
@@ -391,12 +456,36 @@ export class ShellPanel {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "When `detached`, specifies the maximum height of the component."
+          "tags": [{
+              "name": "deprecated",
+              "text": "use `heightScale` instead."
+            }],
+          "text": "When `displayMode` is `float`, specifies the maximum height of the component."
         },
         "attribute": "detached-height-scale",
-        "reflect": true,
-        "defaultValue": "\"l\""
+        "reflect": true
+      },
+      "heightScale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component."
+        },
+        "attribute": "height-scale",
+        "reflect": true
       },
       "widthScale": {
         "type": "string",
@@ -415,7 +504,7 @@ export class ShellPanel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies the width of the component's content area."
+          "text": "When `layout` is `vertical`, specifies the width of the component."
         },
         "attribute": "width-scale",
         "reflect": true,
@@ -467,7 +556,8 @@ export class ShellPanel {
           "text": "Specifies the component's position. Will be flipped when the element direction is right-to-left (`\"rtl\"`)."
         },
         "attribute": "position",
-        "reflect": true
+        "reflect": true,
+        "defaultValue": "\"start\""
       },
       "resizable": {
         "type": "boolean",
@@ -481,7 +571,7 @@ export class ShellPanel {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When `true` and not `detached`, the component's content area is resizable."
+          "text": "When `true` and `displayMode` is not `float`, the component's content area is resizable."
         },
         "attribute": "resizable",
         "reflect": true,
@@ -546,6 +636,18 @@ export class ShellPanel {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "detached",
+        "methodName": "handleDetached"
+      }, {
+        "propName": "displayMode",
+        "methodName": "handleDisplayMode"
+      }, {
+        "propName": "detachedHeightScale",
+        "methodName": "handleDetachedHeightScale"
+      }, {
+        "propName": "heightScale",
+        "methodName": "handleHeightScale"
+      }, {
         "propName": "layout",
         "methodName": "layoutHandler"
       }, {

package/dist/collection/components/slider/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 export const CSS = {
   handleLabel: "handle__label",

package/dist/collection/components/slider/slider.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/sortable-list/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 export const CSS = {
   sortItem: "sort-item",

package/dist/collection/components/sortable-list/sortable-list.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 import { h } from "@stencil/core";
 import Sortable from "sortablejs";

package/dist/collection/components/split-button/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.16
+ * v1.4.0-next.18
  */
 export const CSS = {
   container: "split-button__container",