@esri/calcite-components 1.0.0-beta.65 → 1.0.0-beta.69

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

@@ -1,6 +1,11 @@
-import { Component, Element, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { focusElement, closestElementCrossShadowBoundary } from "../../utils/dom";
+import { closestElementCrossShadowBoundary, focusElement } from "../../utils/dom";
+import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { hiddenInputStyle } from "../../utils/form";
 import { CSS } from "./resources";
 export class CalciteRadioButton {
@@ -30,6 +35,27 @@ export class CalciteRadioButton {
     this.required = false;
     /** The scale (size) of the radio button. `scale` is passed as a property automatically from `calcite-radio-button-group`. */
     this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.selectItem = (items, selectedIndex) => {
+      items.forEach((item, index) => {
+        const selected = index === selectedIndex;
+        item.checked = selected;
+        item.focused = selected;
+      });
+    };
+    this.toggle = () => {
+      this.uncheckAllRadioButtonsInGroup();
+      this.checked = true;
+      this.focused = true;
+      this.calciteRadioButtonChange.emit();
+    };
+    this.clickHandler = () => {
+      this.toggle();
+    };
     this.setInputEl = (el) => {
       this.inputEl = el;
     };
@@ -43,11 +69,11 @@ export class CalciteRadioButton {
     };
     this.onInputBlur = () => {
       this.focused = false;
-      this.calciteRadioButtonFocusedChange.emit();
+      this.calciteInternalRadioButtonBlur.emit();
     };
     this.onInputFocus = () => {
       this.focused = true;
-      this.calciteRadioButtonFocusedChange.emit();
+      this.calciteInternalRadioButtonFocus.emit();
     };
   }
   checkedChanged(newChecked) {
@@ -57,7 +83,7 @@ export class CalciteRadioButton {
     if (this.inputEl) {
       this.inputEl.checked = newChecked;
     }
-    this.calciteRadioButtonCheckedChange.emit(newChecked);
+    this.calciteInternalRadioButtonCheckedChange.emit(newChecked);
   }
   disabledChanged(disabled) {
     this.inputEl.disabled = disabled;
@@ -101,11 +127,21 @@ export class CalciteRadioButton {
   async setFocus() {
     focusElement(this.inputEl);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
+  onLabelClick(event) {
+    if (!this.disabled && !this.hidden) {
+      this.uncheckOtherRadioButtonsInGroup();
+      const label = event.currentTarget;
+      const radioButton = label.for
+        ? this.rootNode.querySelector(`calcite-radio-button[id="${label.for}"]`)
+        : label.querySelector(`calcite-radio-button[name="${this.name}"]`);
+      if (radioButton) {
+        radioButton.checked = true;
+        radioButton.focused = true;
+      }
+      this.calciteRadioButtonChange.emit();
+      this.setFocus();
+    }
+  }
   checkLastRadioButton() {
     const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name);
     const checkedRadioButtons = radioButtons.filter((radioButton) => radioButton.checked);
@@ -121,7 +157,7 @@ export class CalciteRadioButton {
   }
   /** @internal */
   async emitCheckedChange() {
-    this.calciteRadioButtonCheckedChange.emit();
+    this.calciteInternalRadioButtonCheckedChange.emit();
   }
   uncheckAllRadioButtonsInGroup() {
     const otherRadioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name);
@@ -146,18 +182,6 @@ export class CalciteRadioButton {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  check(event) {
-    // Prevent parent label from clicking the first radio when calcite-radio-button is clicked
-    if (this.el.closest("label") && event.composedPath().includes(this.el)) {
-      event.preventDefault();
-    }
-    if (!this.disabled && !this.hidden) {
-      this.uncheckOtherRadioButtonsInGroup();
-      this.checked = true;
-      this.focused = true;
-      this.calciteRadioButtonChange.emit();
-    }
-  }
   mouseenter() {
     this.hovered = true;
   }
@@ -180,6 +204,7 @@ export class CalciteRadioButton {
     if (form) {
       form.addEventListener("reset", this.formResetHandler);
     }
+    connectLabel(this);
   }
   componentDidLoad() {
     this.hideInputEl();
@@ -192,6 +217,7 @@ export class CalciteRadioButton {
     if (form) {
       form.removeEventListener("reset", this.formResetHandler);
     }
+    disconnectLabel(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -201,9 +227,10 @@ export class CalciteRadioButton {
   render() {
     var _a;
     const value = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString();
-    return (h("div", { class: CSS.container },
-      h("input", { "aria-label": this.label || null, checked: this.checked, disabled: this.disabled, hidden: this.hidden, id: `${this.guid}-input`, name: this.name, onBlur: this.onInputBlur, onFocus: this.onInputFocus, ref: this.setInputEl, required: this.required, type: "radio", value: value }),
-      h("calcite-radio", { checked: this.checked, disabled: this.disabled, focused: this.focused, hidden: this.hidden, hovered: this.hovered, scale: this.scale })));
+    return (h(Host, { onClick: this.clickHandler },
+      h("div", { class: CSS.container },
+        h("input", { "aria-label": getLabelText(this), checked: this.checked, disabled: this.disabled, hidden: this.hidden, id: `${this.guid}-input`, name: this.name, onBlur: this.onInputBlur, onFocus: this.onInputFocus, ref: this.setInputEl, required: this.required, type: "radio", value: value }),
+        h("calcite-radio", { checked: this.checked, disabled: this.disabled, focused: this.focused, hidden: this.hidden, hovered: this.hovered, scale: this.scale }))));
   }
   static get is() { return "calcite-radio-button"; }
   static get encapsulation() { return "scoped"; }
@@ -262,8 +289,8 @@ export class CalciteRadioButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The focused state of the radio button."
       },
@@ -318,8 +345,8 @@ export class CalciteRadioButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The hovered state of the radio button."
       },
@@ -339,8 +366,8 @@ export class CalciteRadioButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The label of the radio input"
       },
@@ -424,6 +451,24 @@ export class CalciteRadioButton {
     }
   }; }
   static get events() { return [{
+      "method": "calciteInternalRadioButtonBlur",
+      "name": "calciteInternalRadioButtonBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": "Fires when the radio button is blurred."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
       "method": "calciteRadioButtonChange",
       "name": "calciteRadioButtonChange",
       "bubbles": true,
@@ -439,15 +484,15 @@ export class CalciteRadioButton {
         "references": {}
       }
     }, {
-      "method": "calciteRadioButtonCheckedChange",
-      "name": "calciteRadioButtonCheckedChange",
+      "method": "calciteInternalRadioButtonCheckedChange",
+      "name": "calciteInternalRadioButtonCheckedChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the checked property changes.  This is an internal event used for styling purposes only.\nUse calciteRadioButtonChange or calciteRadioButtonGroupChange for responding to changes in the checked value for forms."
       },
@@ -457,17 +502,17 @@ export class CalciteRadioButton {
         "references": {}
       }
     }, {
-      "method": "calciteRadioButtonFocusedChange",
-      "name": "calciteRadioButtonFocusedChange",
+      "method": "calciteInternalRadioButtonFocus",
+      "name": "calciteInternalRadioButtonFocus",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
-        "text": "Fires when the radio button is either focused or blurred."
+        "text": "Fires when the radio button is focused."
       },
       "complexType": {
         "original": "any",
@@ -533,12 +578,6 @@ export class CalciteRadioButton {
       "methodName": "requiredChanged"
     }]; }
   static get listeners() { return [{
-      "name": "click",
-      "method": "check",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "mouseenter",
       "method": "mouseenter",
       "target": undefined,

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

@@ -1,3 +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.
+ */
 export const CSS = {
   container: "calcite-radio-button__container"
 };

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

@@ -1,4 +1,11 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Host, h, Element, Prop, Watch, Event, Listen } from "@stencil/core";
+/**
+ * @slot - A slot for adding `calcite-radio-button`s.
+ */
 export class CalciteRadioButtonGroup {
   constructor() {
     //--------------------------------------------------------------------------

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

@@ -1,6 +1,14 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Event, h, Listen, Element, Prop, Watch, Host, Build, Method } from "@stencil/core";
-import { getElementDir, hasLabel } from "../../utils/dom";
+import { getElementDir } from "../../utils/dom";
 import { getKey } from "../../utils/key";
+import { connectLabel, disconnectLabel } from "../../utils/label";
+/**
+ * @slot - A slot for adding `calcite-radio-group-item`s.
+ */
 export class CalciteRadioGroup {
   constructor() {
     //--------------------------------------------------------------------------
@@ -20,9 +28,14 @@ export class CalciteRadioGroup {
     this.width = "auto";
     //--------------------------------------------------------------------------
     //
-    //  Private State/Props
+    //  Event Listeners
     //
     //--------------------------------------------------------------------------
+    this.handleClick = (event) => {
+      if (event.target.localName === "calcite-radio-group-item") {
+        this.selectItem(event.target);
+      }
+    };
     this.hiddenInput = (() => {
       const input = document.createElement("input");
       input.type = "hidden";
@@ -72,29 +85,18 @@ export class CalciteRadioGroup {
     if (lastChecked) {
       hiddenInput.value = lastChecked.value;
     }
+    connectLabel(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
   }
   componentDidLoad() {
     this.hasLoaded = true;
   }
   render() {
-    return (h(Host, { role: "radiogroup", tabIndex: this.disabled ? -1 : null },
+    return (h(Host, { onClick: this.handleClick, role: "radiogroup", tabIndex: this.disabled ? -1 : null },
       h("slot", null)));
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  handleLabelFocus(e) {
-    if (hasLabel(e.detail.labelEl, this.el)) {
-      this.setFocus();
-    }
-  }
-  handleClick(event) {
-    if (event.target.localName === "calcite-radio-group-item") {
-      this.selectItem(event.target);
-    }
-  }
   handleSelected(event) {
     // only fire after initial setup to prevent semi-infinite loops
     if (this.hasLoaded) {
@@ -162,6 +164,9 @@ export class CalciteRadioGroup {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   getItems() {
     return this.el.querySelectorAll("calcite-radio-group-item");
   }
@@ -392,18 +397,6 @@ export class CalciteRadioGroup {
       "methodName": "handleSelectedItemChange"
     }]; }
   static get listeners() { return [{
-      "name": "calciteLabelFocus",
-      "method": "handleLabelFocus",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "handleClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "calciteRadioGroupItemChange",
       "method": "handleSelected",
       "target": undefined,

package/dist/collection/components/calcite-radio-group/interfaces.js

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

package/dist/collection/components/calcite-radio-group-item/calcite-radio-group-item.css

@@ -100,7 +100,7 @@
   pointer-events: none;
   align-items: center;
   margin: 0.125rem;
-  transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
+  transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out, color 0.1s ease-in-out;
 }
 
 .label--horizontal {
@@ -177,10 +177,6 @@
   display: inline-flex;
   position: relative;
   margin: 0;
-  transition-property: all;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
   line-height: inherit;
 }
 

package/dist/collection/components/calcite-radio-group-item/calcite-radio-group-item.js

@@ -1,3 +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.
+ */
 import { Component, Event, h, Prop, Element, Host, Watch, State } from "@stencil/core";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { SLOTS, CSS } from "./resources";
@@ -203,8 +207,8 @@ export class CalciteRadioGroupItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the item has been selected."
       },

package/dist/collection/components/calcite-radio-group-item/resources.js

@@ -1,3 +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.
+ */
 export const SLOTS = {
   input: "input"
 };

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

@@ -1,6 +1,11 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Element, Event, Fragment, h, Listen, Method, Prop, State } from "@stencil/core";
-import { getElementDir, hasLabel } from "../../utils/dom";
+import { getElementDir } from "../../utils/dom";
 import { guid } from "../../utils/guid";
+import { connectLabel, disconnectLabel } from "../../utils/label";
 import { TEXT } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 export class CalciteRating {
@@ -32,16 +37,20 @@ export class CalciteRating {
   }
   //--------------------------------------------------------------------------
   //
-  //  Event Listeners
+  //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  handleLabelFocus(e) {
-    if (hasLabel(e.detail.labelEl, this.el) &&
-      e.detail.interactedEl !== this.el &&
-      !this.el.contains(e.detail.interactedEl)) {
-      this.setFocus();
-    }
+  connectedCallback() {
+    connectLabel(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
   blurHandler() {
     this.hasFocus = false;
   }
@@ -91,6 +100,9 @@ export class CalciteRating {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   updateValue(value) {
     this.value = value;
     this.calciteRatingChange.emit({ value });
@@ -254,8 +266,8 @@ export class CalciteRating {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Rating\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Rating\""
           }],
         "text": "Localized string for \"Rating\" (used for aria label)"
       },
@@ -275,8 +287,8 @@ export class CalciteRating {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Stars: ${num}\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Stars: ${num}\""
           }],
         "text": "Localized string for labelling each star, `${num}` in the string will be replaced by the number"
       },
@@ -326,12 +338,6 @@ export class CalciteRating {
   }; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
-      "name": "calciteLabelFocus",
-      "method": "handleLabelFocus",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
       "name": "blur",
       "method": "blurHandler",
       "target": undefined,

package/dist/collection/components/calcite-rating/resources.js

@@ -1,3 +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.
+ */
 export const TEXT = {
   rating: "Rating",
   stars: "Stars: ${num}"

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

@@ -1,5 +1,12 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Element, Prop, h } from "@stencil/core";
 import { CSS, TEXT } from "./resources";
+/**
+ * @slot - A slot for adding custom content, primarily loading information.
+ */
 export class CalciteScrim {
   constructor() {
     // --------------------------------------------------------------------------
@@ -53,8 +60,8 @@ export class CalciteScrim {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },

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

@@ -1,3 +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.
+ */
 export const CSS = {
   scrim: "scrim",
   content: "content"

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

@@ -1,5 +1,10 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Element, Event, Fragment, h, Listen, Method, Prop } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";
+import { connectLabel, disconnectLabel } from "../../utils/label";
 import { CSS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 import { createObserver } from "../../utils/observers";
@@ -9,6 +14,9 @@ function isOption(optionOrGroup) {
 function isOptionGroup(optionOrGroup) {
   return optionOrGroup.tagName === "CALCITE-OPTION-GROUP";
 }
+/**
+ * @slot - A slot for adding `calcite-option`s.
+ */
 export class CalciteSelect {
   constructor() {
     //--------------------------------------------------------------------------
@@ -62,10 +70,12 @@ export class CalciteSelect {
       subtree: true,
       childList: true
     });
+    connectLabel(this);
   }
   disconnectedCallback() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    disconnectLabel(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -88,19 +98,14 @@ export class CalciteSelect {
       this.deselectAllExcept(optionOrGroup);
     }
   }
-  handleLabelFocus(event) {
-    const { requestedInput, labelEl } = event.detail;
-    const { el } = this;
-    if (labelEl.contains(el) || (requestedInput && requestedInput === el.getAttribute("id"))) {
-      this.setFocus();
-      event.stopImmediatePropagation();
-    }
-  }
   //--------------------------------------------------------------------------
   //
   //  Private Methods
   //
   //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   updateNativeElement(optionOrGroup, nativeOptionOrGroup) {
     nativeOptionOrGroup.disabled = optionOrGroup.disabled;
     nativeOptionOrGroup.label = optionOrGroup.label;
@@ -260,8 +265,8 @@ export class CalciteSelect {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "readonly"
+            "name": "readonly",
+            "text": undefined
           }],
         "text": "The currently selected option."
       }
@@ -337,11 +342,5 @@ export class CalciteSelect {
       "target": undefined,
       "capture": false,
       "passive": false
-    }, {
-      "name": "calciteLabelFocus",
-      "method": "handleLabelFocus",
-      "target": "window",
-      "capture": false,
-      "passive": false
     }]; }
 }

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

@@ -1,3 +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.
+ */
 export const CSS = {
   icon: "icon",
   iconContainer: "icon-container",

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

@@ -1,13 +1,17 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 /**
+ * @slot - A slot for adding content to the shell. This content will appear between any leading and trailing panels added to the shell. (eg. a map)
  * @slot header - A slot for adding header content. This content will be positioned at the top of the shell.
  * @slot footer - A slot for adding footer content. This content will be positioned at the bottom of the shell.
  * @slot primary-panel - A slot for adding the leading `calcite-shell-panel`.
  * @slot contextual-panel - A slot for adding the trailing `calcite-shell-panel`.
- * @slot bottom-panel - A slot for adding a bottom floating panel such as a chart or `calcite-tip-manager`.
- * @slot - A slot for adding content to the shell. This content will appear between any leading and trailing panels added to the shell. (eg. a map)
+ * @slot center-row - A slot for adding custom content in the center row.
  */
 export class CalciteShell {
   constructor() {