@esri/calcite-components 1.0.0-beta.79 → 1.0.0-beta.82

package/dist/collection/components/input-time-picker/input-time-picker.js

@@ -1,12 +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.82
  */
 import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch, State } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { formatTimeString, isValidTime, localizeTimeString } from "../../utils/time";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
+import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
 export class InputTimePicker {
   constructor() {
@@ -32,6 +33,11 @@ export class InputTimePicker {
     this.required = false;
     /** The scale (size) of the time input */
     this.scale = "m";
+    /**
+     * Determines where the popover will be positioned relative to the input.
+     * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
+     */
+    this.placement = "auto";
     /** number (seconds) that specifies the granularity that the value must adhere to */
     this.step = 60;
     /** The selected time in UTC (always 24-hour format) */
@@ -64,6 +70,19 @@ export class InputTimePicker {
       const value = target.value;
       this.setValue({ value, origin: "time-picker" });
     };
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.keyDownHandler = (event) => {
+      if (event.key === "Enter" && !event.defaultPrevented) {
+        submitForm(this);
+      }
+    };
+    this.setCalcitePopoverEl = (el) => {
+      this.popoverEl = el;
+    };
     this.setCalciteInputEl = (el) => {
       this.calciteInputEl = el;
     };
@@ -119,7 +138,9 @@ export class InputTimePicker {
   activeHandler() {
     if (this.disabled) {
       this.active = false;
+      return;
     }
+    this.reposition();
   }
   handleDisabledChange(value) {
     if (!value) {
@@ -165,11 +186,11 @@ export class InputTimePicker {
   async setFocus() {
     this.calciteInputEl.setFocus();
   }
-  // --------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  // --------------------------------------------------------------------------
+  /** Updates the position of the component. */
+  async reposition() {
+    var _a;
+    (_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.reposition();
+  }
   onLabelClick() {
     this.setFocus();
   }
@@ -205,10 +226,10 @@ export class InputTimePicker {
   // --------------------------------------------------------------------------
   render() {
     const popoverId = `${this.referenceElementId}-popover`;
-    return (h(Host, null,
+    return (h(Host, { onKeyDown: this.keyDownHandler },
       h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" },
         h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })),
-      h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, referenceElement: this.referenceElementId },
+      h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId },
         h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })),
       h(HiddenFormInputSlot, { component: this })));
   }
@@ -543,6 +564,32 @@ export class InputTimePicker {
       "reflect": true,
       "defaultValue": "\"m\""
     },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "PopperPlacement",
+        "resolved": "Placement | PlacementRtl | VariationRtl",
+        "references": {
+          "PopperPlacement": {
+            "location": "import",
+            "path": "../../utils/popper"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "see",
+            "text": "[PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
+          }],
+        "text": "Determines where the popover will be positioned relative to the input."
+      },
+      "attribute": "placement",
+      "reflect": true,
+      "defaultValue": "\"auto\""
+    },
     "step": {
       "type": "number",
       "mutable": false,
@@ -615,6 +662,22 @@ export class InputTimePicker {
         "text": "Sets focus on the component.",
         "tags": []
       }
+    },
+    "reposition": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Updates the position of the component.",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "el"; }

package/dist/collection/components/interfaces.js

@@ -1,5 +1,6 @@
 /*!
  * 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.82
  */
 export {};

package/dist/collection/components/label/label.js

@@ -1,6 +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.82
  */
 import { Component, Element, Event, h, Prop, Host } from "@stencil/core";
 import { labelDisconnectedEvent, labelConnectedEvent } from "../../utils/label";

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

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

package/dist/collection/components/link/link.js

@@ -1,6 +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.82
  */
 import { Component, Element, h, Host, Method, Prop } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";

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

@@ -1,6 +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.82
  */
 import { Component, Element, h, Host, Prop, Method } from "@stencil/core";
 import { CSS } from "./resources";

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

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

package/dist/collection/components/list-item/list-item.css

@@ -118,6 +118,8 @@
   flex: 1 1 auto;
   align-items: stretch;
   padding: 0px;
+  font-family: var(--calcite-sans-family);
+  font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-2);
   outline-offset: 0;
   outline-color: transparent;
@@ -143,6 +145,9 @@
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
+.content-container--button .content-start, .content-container--button .content-end {
+  pointer-events: none;
+}
 
 .content {
   display: flex;
@@ -179,8 +184,19 @@
   color: var(--calcite-ui-text-3);
 }
 
+.content-start {
+  justify-content: flex-start;
+}
+
+.content-end {
+  justify-content: flex-end;
+}
+
 .content-start, .content-end {
-  pointer-events: none;
+  flex: 1 1 auto;
+}
+
+.has-center-content .content-start, .has-center-content .content-end {
   flex: 0 1 auto;
 }
 

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

@@ -1,6 +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.82
  */
 import { Component, Element, Prop, h, Host, Method } from "@stencil/core";
 import { SLOTS, CSS } from "./resources";
@@ -91,9 +92,14 @@ export class ListItem {
       description ? h("div", { class: CSS.description }, description) : null)) : null;
   }
   renderContentContainer() {
-    const { disabled, nonInteractive } = this;
+    const { description, disabled, label, nonInteractive } = this;
+    const hasCenterContent = !!label || !!description;
     const content = [this.renderContentStart(), this.renderContent(), this.renderContentEnd()];
-    return !nonInteractive ? (h("button", { class: { [CSS.contentContainer]: true, [CSS.contentContainerButton]: true }, disabled: disabled, ref: (focusEl) => (this.focusEl = focusEl) }, content)) : (h("div", { class: CSS.contentContainer, ref: () => (this.focusEl = null) }, content));
+    return !nonInteractive ? (h("button", { class: {
+        [CSS.contentContainer]: true,
+        [CSS.contentContainerButton]: true,
+        [CSS.hasCenterContent]: hasCenterContent
+      }, disabled: disabled, ref: (focusEl) => (this.focusEl = focusEl) }, content)) : (h("div", { class: { [CSS.contentContainer]: true, [CSS.hasCenterContent]: hasCenterContent }, ref: () => (this.focusEl = null) }, content));
   }
   render() {
     return (h(Host, { role: "listitem" },

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

@@ -1,6 +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.82
  */
 export const CSS = {
   container: "container",
@@ -13,7 +14,8 @@ export const CSS = {
   label: "label",
   description: "description",
   contentEnd: "content-end",
-  actionsEnd: "actions-end"
+  actionsEnd: "actions-end",
+  hasCenterContent: "has-center-content"
 };
 export const SLOTS = {
   actionsStart: "actions-start",

package/dist/collection/components/list-item-group/list-item-group.js

@@ -1,6 +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.82
  */
 import { Component, Element, Prop, h, Host } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/list-item-group/resources.js

@@ -1,6 +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.82
  */
 export const CSS = {
   heading: "heading",

package/dist/collection/components/loader/loader.js

@@ -1,6 +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.82
  */
 import { Component, Element, h, Host, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";

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

@@ -1,5 +1,6 @@
 /*!
  * 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.82
  */
 export {};

package/dist/collection/components/modal/modal.css

@@ -146,13 +146,13 @@
   display: flex;
   width: 100%;
   flex-direction: column;
+  overflow: hidden;
   border-radius: 0.25rem;
   background-color: var(--calcite-ui-foreground-1);
   opacity: 0;
   --tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
   --tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -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);
-  overflow: hidden;
   z-index: 102;
   -webkit-overflow-scrolling: touch;
   visibility: hidden;
@@ -328,20 +328,10 @@ slot[name=primary] {
 @media screen and (max-width: 35rem) {
   :host([width=s]) .modal {
     margin: 0px;
-  }
-  :host([width=s]) .modal {
     height: 100%;
-  }
-  :host([width=s]) .modal {
     max-height: 100%;
-  }
-  :host([width=s]) .modal {
     width: 100%;
-  }
-  :host([width=s]) .modal {
     max-width: 100%;
-  }
-  :host([width=s]) .modal {
     border-radius: 0px;
   }
   :host([width=s]) .content {
@@ -360,20 +350,10 @@ slot[name=primary] {
 @media screen and (max-width: 51rem) {
   :host([width=m]) .modal {
     margin: 0px;
-  }
-  :host([width=m]) .modal {
     height: 100%;
-  }
-  :host([width=m]) .modal {
     max-height: 100%;
-  }
-  :host([width=m]) .modal {
     width: 100%;
-  }
-  :host([width=m]) .modal {
     max-width: 100%;
-  }
-  :host([width=m]) .modal {
     border-radius: 0px;
   }
   :host([width=m]) .content {
@@ -392,20 +372,10 @@ slot[name=primary] {
 @media screen and (max-width: 97rem) {
   :host([width=l]) .modal {
     margin: 0px;
-  }
-  :host([width=l]) .modal {
     height: 100%;
-  }
-  :host([width=l]) .modal {
     max-height: 100%;
-  }
-  :host([width=l]) .modal {
     width: 100%;
-  }
-  :host([width=l]) .modal {
     max-width: 100%;
-  }
-  :host([width=l]) .modal {
     border-radius: 0px;
   }
   :host([width=l]) .content {
@@ -497,9 +467,6 @@ slot[name=primary] {
 
   .footer {
     position: sticky;
-  }
-
-  .footer {
     bottom: 0px;
   }
 }
@@ -513,9 +480,6 @@ slot[name=primary] {
 
   .back, .secondary {
     margin: 0px;
-  }
-
-  .back, .secondary {
     margin-bottom: 0.25rem;
   }
 }

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

@@ -1,6 +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.82
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";
@@ -86,7 +87,7 @@ export class Modal {
       });
     };
     this.focusFirstElement = () => {
-      focusElement(this.closeButtonEl);
+      focusElement(this.disableCloseButton ? getFocusableElements(this.el)[0] : this.closeButtonEl);
     };
     this.focusLastElement = () => {
       const focusableElements = getFocusableElements(this.el).filter((el) => !el.getAttribute("data-focus-fence"));

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

@@ -1,6 +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.82
  */
 export const CSS = {
   title: "title",

package/dist/collection/components/notice/notice.js

@@ -1,6 +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.82
  */
 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,6 +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.82
  */
 export const TEXT = {
   close: "Close"

package/dist/collection/components/option/option.js

@@ -1,6 +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.82
  */
 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,6 +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.82
  */
 import { Component, h, Prop, Watch, Event, Fragment } from "@stencil/core";
 /**

package/dist/collection/components/pagination/pagination.js

@@ -1,6 +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.82
  */
 import { Component, Element, Event, h, Prop, Method, Fragment } from "@stencil/core";
 import { CSS, TEXT } from "./resources";

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

@@ -1,6 +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.82
  */
 export const CSS = {
   page: "page",

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

@@ -217,7 +217,6 @@ h4.heading, h5.heading {
 
 :host([loading]) .container, :host([disabled]) .container {
   position: relative;
-  z-index: 1;
 }
 
 .header {
@@ -230,17 +229,16 @@ h4.heading, h5.heading {
   background-color: var(--calcite-ui-foreground-1);
   border-bottom-color: var(--calcite-ui-border-3);
   flex: 0 0 auto;
-  z-index: 2;
 }
 
 .header-content {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.875rem;
   padding-bottom: 0.875rem;
-  overflow: hidden;
   margin-inline-end: auto;
 }
 .header-content .heading, .header-content .summary {
@@ -341,5 +339,4 @@ h4.heading, h5.heading {
   padding: 0.5rem;
   width: -moz-fit-content;
   width: fit-content;
-  z-index: 1;
 }

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

@@ -1,14 +1,16 @@
 /*!
  * 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.82
  */
 import { Component, Element, Event, Method, Prop, Watch, h, Fragment } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
-import { getElementDir, getSlotted } from "../../utils/dom";
+import { getElementDir, getSlotted, 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";
 /**
  * @slot - A slot for adding custom content.
  * @slot header-actions-start - A slot for adding actions or content to the start side of the panel header.
@@ -50,11 +52,21 @@ export class Panel {
      * Opens the action menu.
      */
     this.menuOpen = false;
+    this.resizeObserver = createObserver("resize", () => this.resizeHandler());
     // --------------------------------------------------------------------------
     //
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    this.resizeHandler = () => {
+      const { panelScrollEl } = this;
+      if (!panelScrollEl ||
+        typeof panelScrollEl.scrollHeight !== "number" ||
+        typeof panelScrollEl.offsetHeight !== "number") {
+        return;
+      }
+      panelScrollEl.tabIndex = panelScrollEl.scrollHeight > panelScrollEl.offsetHeight ? 0 : -1;
+    };
     this.setContainerRef = (node) => {
       this.containerEl = node;
     };
@@ -71,6 +83,7 @@ export class Panel {
     };
     this.dismiss = () => {
       this.dismissed = true;
+      this.calcitePanelDismiss.emit();
     };
     this.panelScrollHandler = () => {
       this.calcitePanelScroll.emit();
@@ -78,6 +91,15 @@ export class Panel {
     this.backButtonClick = () => {
       this.calcitePanelBackClick.emit();
     };
+    this.setPanelScrollEl = (el) => {
+      var _a, _b;
+      this.panelScrollEl = el;
+      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+      if (el) {
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
+        this.resizeHandler();
+      }
+    };
   }
   dismissedHandler() {
     this.calcitePanelDismissedChange.emit();
@@ -99,7 +121,9 @@ export class Panel {
     connectConditionalSlotComponent(this);
   }
   disconnectedCallback() {
+    var _a;
     disconnectConditionalSlotComponent(this);
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   // --------------------------------------------------------------------------
   //
@@ -218,9 +242,9 @@ export class Panel {
     const hasFab = getSlotted(el, SLOTS.fab);
     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: (el) => (this.panelScrollEl = el), tabIndex: 0 },
+    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: (el) => (this.panelScrollEl = el), tabIndex: 0 }, defaultSlotNode));
+      this.renderFab())) : (h("section", { class: { [CSS.contentWrapper]: true, [CSS.contentContainer]: true }, key: contentWrapperKey, onScroll: this.panelScrollHandler, ref: this.setPanelScrollEl }, defaultSlotNode));
   }
   renderFab() {
     return (h("div", { class: CSS.fabContainer },
@@ -228,7 +252,7 @@ export class Panel {
   }
   render() {
     const { dismissed, dismissible, loading, panelKeyDownHandler } = this;
-    const panelNode = (h("article", { "aria-busy": loading.toString(), class: CSS.container, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
+    const panelNode = (h("article", { "aria-busy": toAriaBoolean(loading), class: CSS.container, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
       this.renderHeaderNode(),
       this.renderContent(),
       this.renderFooterNode()));
@@ -525,13 +549,31 @@ export class Panel {
     }
   }; }
   static get events() { return [{
+      "method": "calcitePanelDismiss",
+      "name": "calcitePanelDismiss",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the close button has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
       "method": "calcitePanelDismissedChange",
       "name": "calcitePanelDismissedChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use calcitePanelDismiss instead."
+          }],
         "text": "Emitted when the close button has been clicked."
       },
       "complexType": {

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

@@ -1,6 +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.82
  */
 export const CSS = {
   backButton: "back-button",