@esri/calcite-components 1.0.0-beta.92 → 1.0.0-beta.94

package/dist/collection/components/modal/modal.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.0.0-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";
@@ -67,6 +67,12 @@ export class Modal {
     //
     //--------------------------------------------------------------------------
     this.hasFooter = true;
+    /**
+     * We use internal variable to make sure initially open modal can transition from closed state when rendered
+     *
+     * @private
+     */
+    this.isOpen = false;
     this.mutationObserver = createObserver("mutation", () => this.updateFooterVisibility());
     this.openTransitionProp = "opacity";
     //--------------------------------------------------------------------------
@@ -92,6 +98,7 @@ export class Modal {
     this.close = () => {
       return this.beforeClose(this.el).then(() => {
         this.open = false;
+        this.isOpen = false;
         focusElement(this.previousActiveElement);
         this.removeOverflowHiddenClass();
       });
@@ -120,7 +127,7 @@ export class Modal {
   componentWillLoad() {
     // when modal initially renders, if active was set we need to open as watcher doesn't fire
     if (this.open) {
-      this.openModal();
+      requestAnimationFrame(() => this.openModal());
     }
   }
   connectedCallback() {
@@ -147,7 +154,10 @@ export class Modal {
     return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" },
       h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }),
       this.renderStyle(),
-      h("div", { class: CSS.modal, ref: this.setTransitionEl },
+      h("div", { class: {
+          [CSS.modal]: true,
+          [CSS.modalOpen]: this.isOpen
+        }, ref: this.setTransitionEl },
         h("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }),
         h("div", { class: CSS.header },
           this.renderCloseButton(),
@@ -290,6 +300,7 @@ export class Modal {
     this.previousActiveElement = document.activeElement;
     this.el.addEventListener("calciteModalOpen", this.openEnd);
     this.open = true;
+    this.isOpen = true;
     const titleEl = getSlotted(this.el, SLOTS.header);
     const contentEl = getSlotted(this.el, SLOTS.content);
     this.titleId = ensureId(titleEl);
@@ -385,7 +396,7 @@ export class Modal {
         "text": "When true, disables the component's close button."
       },
       "attribute": "disable-close-button",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "disableOutsideClose": {
@@ -403,7 +414,7 @@ export class Modal {
         "text": "When true, disables the closing of the component when clicked outside."
       },
       "attribute": "disable-outside-close",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "intlClose": {
@@ -456,7 +467,7 @@ export class Modal {
         "text": "When true, disables the default close on escape behavior."
       },
       "attribute": "disable-escape",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "scale": {
@@ -580,12 +591,13 @@ export class Modal {
         "text": "When true, disables spacing to the content area slot."
       },
       "attribute": "no-padding",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     }
   }; }
   static get states() { return {
-    "hasFooter": {}
+    "hasFooter": {},
+    "isOpen": {}
   }; }
   static get events() { return [{
       "method": "calciteModalBeforeClose",

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

@@ -1,10 +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.
- * v1.0.0-beta.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   modal: "modal",
+  modalOpen: "modal--open",
   title: "title",
   header: "header",
   footer: "footer",

package/dist/collection/components/notice/notice.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.0.0-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";

package/dist/collection/components/notice/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.0.0-beta.92
+ * v1.0.0-beta.94
  */
 export const TEXT = {
   close: "Close"

package/dist/collection/components/option/option.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.0.0-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, h, Prop, Element, Event, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/option-group/option-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.0.0-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, h, Prop, Watch, Event, Fragment } from "@stencil/core";
 /**

package/dist/collection/components/pagination/pagination.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.0.0-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Prop, Method, Fragment, State } from "@stencil/core";
 import { unwatchGlobalAttributes, watchGlobalAttributes } from "../../utils/globalAttributes";
@@ -15,6 +15,10 @@ export class Pagination {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
+    /**
+     * When true, number values are displayed with a group separator corresponding to the language and country format.
+     */
+    this.groupSeparator = false;
     /** Specifies the number of items per page. */
     this.num = 20;
     /** Specifies the starting item number. */
@@ -49,6 +53,17 @@ export class Pagination {
       this.nextPage();
       this.emitUpdate();
     };
+    /**
+     * Returns a string representing the localized label value based on groupSeparator prop being on or off.
+     *
+     * @param value
+     */
+    this.determineGroupSeparator = (value) => {
+      const lang = this.globalAttributes["lang"] || document.documentElement.lang || "en";
+      return this.groupSeparator
+        ? localizeNumberString(value.toString(), lang, this.groupSeparator, this.numberingSystem)
+        : value;
+    };
   }
   // --------------------------------------------------------------------------
   //
@@ -139,15 +154,15 @@ export class Pagination {
     return pages.map((page) => this.renderPage(page));
   }
   renderPage(start) {
-    const lang = this.globalAttributes["lang"] || document.documentElement.lang || "en";
     const page = Math.floor(start / this.num) + (this.num === 1 ? 0 : 1);
+    const displayedPage = this.determineGroupSeparator(page);
     return (h("button", { class: {
         [CSS.page]: true,
         [CSS.selected]: start === this.start
       }, onClick: () => {
         this.start = start;
         this.emitUpdate();
-      } }, localizeNumberString(page.toString(), lang, true)));
+      } }, displayedPage));
   }
   renderLeftEllipsis() {
     if (this.total / this.num > maxPagesDisplayed && this.showLeftEllipsis()) {
@@ -189,6 +204,24 @@ export class Pagination {
     "$": ["pagination.css"]
   }; }
   static get properties() { return {
+    "groupSeparator": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, number values are displayed with a group separator corresponding to the language and country format."
+      },
+      "attribute": "group-separator",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "num": {
       "type": "number",
       "mutable": false,
@@ -204,9 +237,29 @@ export class Pagination {
         "text": "Specifies the number of items per page."
       },
       "attribute": "num",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "20"
     },
+    "numberingSystem": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "mdn",
+            "text": "[numberingSystem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem)"
+          }],
+        "text": "Specifies the Unicode numeral system used by the component for localization."
+      },
+      "attribute": "numbering-system",
+      "reflect": false
+    },
     "start": {
       "type": "number",
       "mutable": true,
@@ -222,7 +275,7 @@ export class Pagination {
         "text": "Specifies the starting item number."
       },
       "attribute": "start",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "1"
     },
     "total": {
@@ -240,7 +293,7 @@ export class Pagination {
         "text": "Specifies the total number of items."
       },
       "attribute": "total",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "0"
     },
     "textLabelNext": {

package/dist/collection/components/pagination/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.0.0-beta.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   page: "page",

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

@@ -253,23 +253,10 @@
   align-items: stretch;
 }
 
-.header-actions--end,
-.menu-container:only-child {
+.header-actions--end {
   margin-inline-start: auto;
 }
 
-.menu-button {
-  position: relative;
-  block-size: 100%;
-  flex: 0 1 auto;
-  align-self: stretch;
-}
-
-.menu {
-  min-inline-size: 10rem;
-  flex-flow: column nowrap;
-}
-
 .content-wrapper {
   overflow: auto;
 }
@@ -312,4 +299,8 @@
   padding: 0.5rem;
   inline-size: -moz-fit-content;
   inline-size: fit-content;
+}
+
+[hidden] {
+  display: none;
 }

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

@@ -1,14 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.92
+ * v1.0.0-beta.94
  */
-import { Component, Element, Event, Method, Prop, Watch, h, Fragment } from "@stencil/core";
+import { Component, Element, Event, Method, Prop, Watch, h, Fragment, State } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
-import { getElementDir, getSlotted, toAriaBoolean } from "../../utils/dom";
+import { getElementDir, toAriaBoolean } from "../../utils/dom";
 import { Heading } from "../functional/Heading";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
-import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { updateHostInteraction } from "../../utils/interactive";
 import { createObserver } from "../../utils/observers";
 /**
@@ -50,6 +49,8 @@ export class Panel {
     this.closable = false;
     /**
      * When true, displays a back button in the header.
+     *
+     * @deprecated use `calcite-flow-item` instead.
      */
     this.showBackButton = false;
     /**
@@ -61,6 +62,13 @@ export class Panel {
      */
     this.menuOpen = false;
     this.resizeObserver = createObserver("resize", () => this.resizeHandler());
+    this.hasStartActions = false;
+    this.hasEndActions = false;
+    this.hasMenuItems = false;
+    this.hasHeaderContent = false;
+    this.hasFooterContent = false;
+    this.hasFooterActions = false;
+    this.hasFab = false;
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -100,6 +108,48 @@ export class Panel {
     this.backButtonClick = () => {
       this.calcitePanelBackClick.emit();
     };
+    this.handleHeaderActionsStartSlotChange = (event) => {
+      const elements = event.target.assignedElements({
+        flatten: true
+      });
+      this.hasStartActions = !!elements.length;
+    };
+    this.handleHeaderActionsEndSlotChange = (event) => {
+      const elements = event.target.assignedElements({
+        flatten: true
+      });
+      this.hasEndActions = !!elements.length;
+    };
+    this.handleHeaderMenuActionsSlotChange = (event) => {
+      const elements = event.target.assignedElements({
+        flatten: true
+      });
+      this.hasMenuItems = !!elements.length;
+    };
+    this.handleHeaderContentSlotChange = (event) => {
+      const elements = event.target.assignedElements({
+        flatten: true
+      });
+      this.hasHeaderContent = !!elements.length;
+    };
+    this.handleFooterSlotChange = (event) => {
+      const elements = event.target.assignedElements({
+        flatten: true
+      });
+      this.hasFooterContent = !!elements.length;
+    };
+    this.handleFooterActionsSlotChange = (event) => {
+      const elements = event.target.assignedElements({
+        flatten: true
+      });
+      this.hasFooterActions = !!elements.length;
+    };
+    this.handleFabSlotChange = (event) => {
+      const elements = event.target.assignedElements({
+        flatten: true
+      });
+      this.hasFab = !!elements.length;
+    };
     this.setPanelScrollEl = (el) => {
       var _a, _b;
       this.panelScrollEl = el;
@@ -137,7 +187,6 @@ export class Panel {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    connectConditionalSlotComponent(this);
     const isClosed = this.dismissed || this.closed;
     const isClosable = this.dismissible || this.closable;
     if (isClosed) {
@@ -151,7 +200,6 @@ export class Panel {
   }
   disconnectedCallback() {
     var _a;
-    disconnectConditionalSlotComponent(this);
     (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   // --------------------------------------------------------------------------
@@ -165,16 +213,24 @@ export class Panel {
    * @param focusId
    */
   async setFocus(focusId) {
-    var _a, _b, _c;
+    const { backButtonEl, closeButtonEl, containerEl } = this;
+    if (focusId === "back-button") {
+      backButtonEl === null || backButtonEl === void 0 ? void 0 : backButtonEl.setFocus();
+      return;
+    }
     if (focusId === "dismiss-button") {
-      (_a = this.closeButtonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+      closeButtonEl === null || closeButtonEl === void 0 ? void 0 : closeButtonEl.setFocus();
       return;
     }
-    if (focusId === "back-button") {
-      (_b = this.backButtonEl) === null || _b === void 0 ? void 0 : _b.setFocus();
+    if (backButtonEl) {
+      backButtonEl.setFocus();
+      return;
+    }
+    if (closeButtonEl) {
+      closeButtonEl.setFocus();
       return;
     }
-    (_c = this.containerEl) === null || _c === void 0 ? void 0 : _c.focus();
+    containerEl === null || containerEl === void 0 ? void 0 : containerEl.focus();
   }
   /**
    * Scrolls the component's content to a specified set of coordinates.
@@ -207,10 +263,10 @@ export class Panel {
     return showBackButton ? (h("calcite-action", { "aria-label": label, class: CSS.backButton, icon: icon, key: "back-button", onClick: backButtonClick, ref: this.setBackRef, scale: "s", slot: SLOTS.headerActionsStart, text: label })) : null;
   }
   renderHeaderContent() {
-    const { heading, headingLevel, summary, description } = this;
+    const { heading, headingLevel, summary, description, hasHeaderContent } = this;
     const headingNode = heading ? (h(Heading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, heading)) : null;
     const descriptionNode = description || summary ? h("span", { class: CSS.description }, description || summary) : null;
-    return headingNode || descriptionNode ? (h("div", { class: CSS.headerContent, key: "header-content" },
+    return !hasHeaderContent && (headingNode || descriptionNode) ? (h("div", { class: CSS.headerContent, key: "header-content" },
       headingNode,
       descriptionNode)) : null;
   }
@@ -218,73 +274,67 @@ export class Panel {
    * Allows user to override the entire header-content node.
    */
   renderHeaderSlottedContent() {
-    return (h("div", { class: CSS.headerContent, key: "slotted-header-content" },
-      h("slot", { name: SLOTS.headerContent })));
+    return (h("div", { class: CSS.headerContent, hidden: !this.hasHeaderContent, key: "slotted-header-content" },
+      h("slot", { name: SLOTS.headerContent, onSlotchange: this.handleHeaderContentSlotChange })));
   }
   renderHeaderStartActions() {
-    const { el } = this;
-    const hasStartActions = getSlotted(el, SLOTS.headerActionsStart);
-    return hasStartActions ? (h("div", { class: { [CSS.headerActionsStart]: true, [CSS.headerActions]: true }, key: "header-actions-start" },
-      h("slot", { name: SLOTS.headerActionsStart }))) : null;
+    const { hasStartActions } = this;
+    return (h("div", { class: { [CSS.headerActionsStart]: true, [CSS.headerActions]: true }, hidden: !hasStartActions, key: "header-actions-start" },
+      h("slot", { name: SLOTS.headerActionsStart, onSlotchange: this.handleHeaderActionsStartSlotChange })));
   }
   renderHeaderActionsEnd() {
-    const { close, el, intlClose, closable } = this;
+    const { close, hasEndActions, intlClose, closable } = this;
     const text = intlClose || TEXT.close;
     const closableNode = closable ? (h("calcite-action", { "aria-label": text, icon: ICONS.close, onClick: close, ref: this.setCloseRef, text: text })) : null;
-    const slotNode = h("slot", { name: SLOTS.headerActionsEnd });
-    const hasEndActions = getSlotted(el, SLOTS.headerActionsEnd);
-    return hasEndActions || closableNode ? (h("div", { class: { [CSS.headerActionsEnd]: true, [CSS.headerActions]: true }, key: "header-actions-end" },
+    const slotNode = (h("slot", { name: SLOTS.headerActionsEnd, onSlotchange: this.handleHeaderActionsEndSlotChange }));
+    const showContainer = hasEndActions || closableNode;
+    return (h("div", { class: { [CSS.headerActionsEnd]: true, [CSS.headerActions]: true }, hidden: !showContainer, key: "header-actions-end" },
       slotNode,
-      closableNode)) : null;
+      closableNode));
   }
   renderMenu() {
-    const { el, intlOptions, menuOpen } = this;
-    const hasMenuItems = getSlotted(el, SLOTS.headerMenuActions);
-    return hasMenuItems ? (h("calcite-action-menu", { flipPlacements: ["top", "bottom"], key: "menu", label: intlOptions || TEXT.options, open: menuOpen, placement: "bottom-end" },
+    const { hasMenuItems, intlOptions, menuOpen } = this;
+    return (h("calcite-action-menu", { flipPlacements: ["top", "bottom"], hidden: !hasMenuItems, key: "menu", label: intlOptions || TEXT.options, open: menuOpen, placement: "bottom-end" },
       h("calcite-action", { icon: ICONS.menu, slot: ACTION_MENU_SLOTS.trigger, text: intlOptions || TEXT.options }),
-      h("slot", { name: SLOTS.headerMenuActions }))) : null;
+      h("slot", { name: SLOTS.headerMenuActions, onSlotchange: this.handleHeaderMenuActionsSlotChange })));
   }
   renderHeaderNode() {
-    const { el, showBackButton } = this;
-    const backButtonNode = this.renderBackButton();
-    const hasHeaderSlottedContent = getSlotted(el, SLOTS.headerContent);
-    const headerContentNode = hasHeaderSlottedContent
-      ? this.renderHeaderSlottedContent()
-      : this.renderHeaderContent();
-    const actionsNodeStart = this.renderHeaderStartActions();
-    const actionsNodeEnd = this.renderHeaderActionsEnd();
-    const headerMenuNode = this.renderMenu();
-    return actionsNodeStart ||
+    const { showBackButton, hasHeaderContent, hasStartActions, hasEndActions, closable, hasMenuItems } = this;
+    const headerContentNode = this.renderHeaderContent();
+    const showHeader = showBackButton ||
+      hasHeaderContent ||
       headerContentNode ||
-      actionsNodeEnd ||
-      headerMenuNode ||
-      showBackButton ? (h("header", { class: CSS.header },
-      backButtonNode,
-      actionsNodeStart,
+      hasStartActions ||
+      hasEndActions ||
+      closable ||
+      hasMenuItems;
+    return (h("header", { class: CSS.header, hidden: !showHeader },
+      this.renderBackButton(),
+      this.renderHeaderStartActions(),
+      this.renderHeaderSlottedContent(),
       headerContentNode,
-      actionsNodeEnd,
-      headerMenuNode)) : null;
+      this.renderHeaderActionsEnd(),
+      this.renderMenu()));
   }
   renderFooterNode() {
-    const { el } = this;
-    const hasFooterSlottedContent = getSlotted(el, SLOTS.footer);
-    const hasFooterActions = getSlotted(el, SLOTS.footerActions);
-    return hasFooterSlottedContent || hasFooterActions ? (h("footer", { class: CSS.footer, key: "footer" },
-      hasFooterSlottedContent ? h("slot", { key: "footer-slot", name: SLOTS.footer }) : null,
-      hasFooterActions ? h("slot", { key: "footer-actions-slot", name: SLOTS.footerActions }) : null)) : null;
+    const { hasFooterContent, hasFooterActions } = this;
+    const showFooter = hasFooterContent || hasFooterActions;
+    return (h("footer", { class: CSS.footer, hidden: !showFooter, key: "footer" },
+      h("slot", { key: "footer-slot", name: SLOTS.footer, onSlotchange: this.handleFooterSlotChange }),
+      h("slot", { key: "footer-actions-slot", name: SLOTS.footerActions, onSlotchange: this.handleFooterActionsSlotChange })));
   }
   renderContent() {
-    const { el } = this;
-    const hasFab = getSlotted(el, SLOTS.fab);
+    const { hasFab } = this;
     const defaultSlotNode = h("slot", { key: "default-slot" });
     const contentWrapperKey = "content-wrapper";
-    return hasFab ? (h("div", { class: { [CSS.contentWrapper]: true, [CSS.contentHeight]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: this.setPanelScrollEl },
-      h("section", { class: CSS.contentContainer }, defaultSlotNode),
-      this.renderFab())) : (h("section", { class: { [CSS.contentWrapper]: true, [CSS.contentContainer]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: this.setPanelScrollEl }, defaultSlotNode));
+    const containerNode = hasFab ? (h("section", { class: CSS.contentContainer }, defaultSlotNode)) : (defaultSlotNode);
+    return (h("div", { class: { [CSS.contentWrapper]: true, [CSS.contentHeight]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: this.setPanelScrollEl },
+      containerNode,
+      this.renderFab()));
   }
   renderFab() {
-    return (h("div", { class: CSS.fabContainer },
-      h("slot", { name: SLOTS.fab })));
+    return (h("div", { class: CSS.fabContainer, hidden: !this.hasFab },
+      h("slot", { name: SLOTS.fab, onSlotchange: this.handleFabSlotChange })));
   }
   render() {
     const { loading, panelKeyDownHandler, closed, closable } = this;
@@ -359,7 +409,10 @@ export class Panel {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use `calcite-flow-item` instead."
+          }],
         "text": "When provided, this method will be called before it is removed from the parent flow."
       }
     },
@@ -440,7 +493,7 @@ export class Panel {
         "text": "Specifies the number at which section headings should start."
       },
       "attribute": "heading-level",
-      "reflect": false
+      "reflect": true
     },
     "showBackButton": {
       "type": "boolean",
@@ -453,7 +506,10 @@ export class Panel {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use `calcite-flow-item` instead."
+          }],
         "text": "When true, displays a back button in the header."
       },
       "attribute": "show-back-button",
@@ -471,7 +527,10 @@ export class Panel {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use `calcite-flow-item` instead."
+          }],
         "text": "Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true."
       },
       "attribute": "intl-back",
@@ -646,6 +705,15 @@ export class Panel {
       "defaultValue": "false"
     }
   }; }
+  static get states() { return {
+    "hasStartActions": {},
+    "hasEndActions": {},
+    "hasMenuItems": {},
+    "hasHeaderContent": {},
+    "hasFooterContent": {},
+    "hasFooterActions": {},
+    "hasFab": {}
+  }; }
   static get events() { return [{
       "method": "calcitePanelDismiss",
       "name": "calcitePanelDismiss",
@@ -701,7 +769,10 @@ export class Panel {
       "cancelable": false,
       "composed": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use `calcite-flow-item` instead."
+          }],
         "text": "Fires when the back button is clicked."
       },
       "complexType": {
@@ -713,7 +784,7 @@ export class Panel {
   static get methods() { return {
     "setFocus": {
       "complexType": {
-        "signature": "(focusId?: \"dismiss-button\" | \"back-button\") => Promise<void>",
+        "signature": "(focusId?: \"back-button\" | \"dismiss-button\") => Promise<void>",
         "parameters": [{
             "tags": [{
                 "name": "param",