@esri/calcite-components 3.0.0-next.98 → 3.0.0

package/dist/components/calcite-dialog/customElement.js

@@ -1,23 +1,21 @@
-import { c as O } from "../../chunks/runtime.js";
-import { keyed as S } from "lit-html/directives/keyed.js";
+import { c as E } from "../../chunks/runtime.js";
+import { keyed as O } from "lit-html/directives/keyed.js";
 import { i as v } from "../../chunks/interact.min.js";
 import { html as x } from "lit";
 import { createRef as T, ref as k } from "lit-html/directives/ref.js";
-import { LitElement as P, createEvent as u, safeClassMap as b } from "@arcgis/lumina";
-import { h as I, m as z } from "../../chunks/dom.js";
-import { u as A, c as M, d as D, a as B } from "../../chunks/focusTrapComponent.js";
-import { c as L, s as F, a as R } from "../../chunks/loadable.js";
-import { c as U } from "../../chunks/observers.js";
-import { g as H } from "../../chunks/dynamicClasses.js";
-import { o as j } from "../../chunks/openCloseComponent.js";
+import { LitElement as S, createEvent as u, safeClassMap as b } from "@arcgis/lumina";
+import { h as P, m as z } from "../../chunks/dom.js";
+import { c as I } from "../../chunks/loadable.js";
+import { c as A } from "../../chunks/observers.js";
+import { g as M } from "../../chunks/dynamicClasses.js";
+import { o as B } from "../../chunks/openCloseComponent.js";
 import { S as c } from "../../chunks/resources3.js";
-import { u as K } from "../../chunks/useT9n.js";
-import { css as _ } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
+import { u as L } from "../../chunks/useT9n.js";
+import { u as R } from "../../chunks/useFocusTrap.js";
+import { css as F } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.0 */
 const p = {
   dialog: "dialog",
   panel: "panel",
@@ -27,10 +25,11 @@ const p = {
   containerEmbedded: "container--embedded",
   assistiveText: "assistive-text",
   openingActive: "dialog--opening-active"
-}, r = {
+}, o = {
   actionBar: "action-bar",
   alerts: "alerts",
   content: "content",
+  customContent: "custom-content",
   contentTop: "content-top",
   contentBottom: "content-bottom",
   headerActionsStart: "header-actions-start",
@@ -41,19 +40,26 @@ const p = {
   footer: "footer",
   footerStart: "footer-start",
   footerEnd: "footer-end"
-}, m = 25, w = 25, $ = { x: 0, y: 0 }, C = { top: 0, right: 0, bottom: 0, left: 0 }, q = _`:host{--calcite-dialog-scrim-background-color: rgba(0, 0, 0, .85);pointer-events:none;inset:0;z-index:var(--calcite-z-index-overlay);display:flex;--calcite-internal-dialog-animation-offset: 20px}:host([modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0;z-index:var(--calcite-z-index-overlay);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}:host([placement=top]) .container{align-items:flex-start;justify-content:center}:host([placement=top-start]) .container{align-items:flex-start;justify-content:flex-start}:host([placement=top-end]) .container{align-items:flex-start;justify-content:flex-end}:host([placement=bottom]) .container{align-items:flex-end;justify-content:center}:host([placement=bottom-start]) .container{align-items:flex-end;justify-content:flex-start}:host([placement=bottom-end]) .container{align-items:flex-end;justify-content:flex-end}:host(:not([modal])) .container{pointer-events:none}:host([scale=s]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-sm));--calcite-internal-dialog-min-size-x: 198px;--calcite-internal-dialog-min-size-y: 140px}:host([scale=m]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md));--calcite-internal-dialog-min-size-x: 288px;--calcite-internal-dialog-min-size-y: 180px}:host([scale=l]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md-plus));--calcite-internal-dialog-min-size-x: 388px;--calcite-internal-dialog-min-size-y: 220px}.scrim{--calcite-scrim-background: var(--calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim));--calcite-scrim-background-color: var( --calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim) );position:fixed;inset:0;display:flex;overflow-y:hidden}calcite-panel{--calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-footer-space: var(--calcite-dialog-footer-space);--calcite-panel-border-color: var(--calcite-dialog-border-color);--calcite-panel-background-color: var(--calcite-dialog-background-color, var(--calcite-color-foreground-1))}::slotted(*){--calcite-panel-background-color: initial}.dialog{pointer-events:none;position:relative;z-index:var(--calcite-z-index-modal);margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;border-radius:.25rem;opacity:0;--tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(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);-webkit-overflow-scrolling:touch;visibility:hidden;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);min-inline-size:var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));max-inline-size:var(--calcite-dialog-max-size-x, 100%);min-block-size:var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));max-block-size:var(--calcite-dialog-max-size-y, 100%);--calcite-internal-dialog-hidden-position: calc( var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset) );--calcite-internal-dialog-shown-position: var(--calcite-dialog-offset-y, 0);inset-inline-start:var(--calcite-dialog-offset-x, 0);inset-block-start:var(--calcite-internal-dialog-hidden-position)}.dialog--opening-active{inset-block-start:var(--calcite-internal-dialog-shown-position)}:host([menu-open]) .dialog{transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}.panel{border-radius:.25rem}.container--open{opacity:1;visibility:visible;transition-delay:0ms}.container--open .dialog{pointer-events:auto;visibility:visible;opacity:1;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);transition-delay:0ms}.width-s{inline-size:auto;inline-size:var(--calcite-dialog-size-x, 32rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 35rem){.width-s{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}.width-s.dialog--opening-active{inset-block-start:0}}.width-m{inline-size:var(--calcite-dialog-size-x, 48rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 51rem){.width-m{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}.width-m.dialog--opening-active{inset-block-start:0}}.width-l{inline-size:var(--calcite-dialog-size-x, 94rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 97rem){.width-l{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}.width-l.dialog--opening-active{inset-block-start:0}}:host([placement=cover]) .dialog{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0}:host([placement=cover]) .panel{border-radius:0}:host([kind]) .panel{border-start-start-radius:0px;border-start-end-radius:0px}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .dialog{border-color:var(--calcite-color-status-info)}:host([kind=success]) .dialog{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .dialog{border-color:var(--calcite-color-status-warning)}:host([kind=brand][open]) .dialog,:host([kind=danger][open]) .dialog,:host([kind=info][open]) .dialog,:host([kind=success][open]) .dialog,:host([kind=warning][open]) .dialog{border-width:0px;border-block-start-width:4px;border-style:solid}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}`;
-let y = 0, E = "";
-class V extends P {
+}, m = 25, w = 25, D = { x: 0, y: 0 }, $ = { top: 0, right: 0, bottom: 0, left: 0 }, U = F`:host{--calcite-dialog-scrim-background-color: rgba(0, 0, 0, .85);pointer-events:none;inset:0;z-index:var(--calcite-z-index-overlay);display:flex;--calcite-internal-dialog-animation-offset: 20px}:host([modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0;z-index:var(--calcite-z-index-overlay);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}:host([placement=top]) .container{align-items:flex-start;justify-content:center}:host([placement=top-start]) .container{align-items:flex-start;justify-content:flex-start}:host([placement=top-end]) .container{align-items:flex-start;justify-content:flex-end}:host([placement=bottom]) .container{align-items:flex-end;justify-content:center}:host([placement=bottom-start]) .container{align-items:flex-end;justify-content:flex-start}:host([placement=bottom-end]) .container{align-items:flex-end;justify-content:flex-end}:host(:not([modal])) .container{pointer-events:none}:host([scale=s]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-sm));--calcite-internal-dialog-min-size-x: 198px;--calcite-internal-dialog-min-size-y: 140px}:host([scale=m]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md));--calcite-internal-dialog-min-size-x: 288px;--calcite-internal-dialog-min-size-y: 180px}:host([scale=l]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md-plus));--calcite-internal-dialog-min-size-x: 388px;--calcite-internal-dialog-min-size-y: 220px}.scrim{--calcite-scrim-background: var(--calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim));--calcite-scrim-background-color: var( --calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim) );position:fixed;inset:0;display:flex;overflow-y:hidden}calcite-panel{--calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-footer-space: var(--calcite-dialog-footer-space);--calcite-panel-border-color: var(--calcite-dialog-border-color);--calcite-panel-background-color: var(--calcite-dialog-background-color, var(--calcite-color-foreground-1))}::slotted(*){--calcite-panel-background-color: initial}.dialog{pointer-events:none;position:relative;z-index:var(--calcite-z-index-modal);margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;border-radius:.25rem;opacity:0;--tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(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);-webkit-overflow-scrolling:touch;visibility:hidden;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);min-inline-size:var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));max-inline-size:var(--calcite-dialog-max-size-x, 100%);min-block-size:var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));max-block-size:var(--calcite-dialog-max-size-y, 100%);--calcite-internal-dialog-hidden-position: calc( var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset) );--calcite-internal-dialog-shown-position: var(--calcite-dialog-offset-y, 0);inset-inline-start:var(--calcite-dialog-offset-x, 0);inset-block-start:var(--calcite-internal-dialog-hidden-position)}.dialog--opening-active{inset-block-start:var(--calcite-internal-dialog-shown-position)}:host([menu-open]) .dialog{transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}.panel{border-radius:.25rem}.container--open{opacity:1;visibility:visible;transition-delay:0ms}.container--open .dialog{pointer-events:auto;visibility:visible;opacity:1;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);transition-delay:0ms}.width-s{inline-size:auto;inline-size:var(--calcite-dialog-size-x, 32rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 35rem){.width-s{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}.width-s.dialog--opening-active{inset-block-start:0}}.width-m{inline-size:var(--calcite-dialog-size-x, 48rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 51rem){.width-m{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}.width-m.dialog--opening-active{inset-block-start:0}}.width-l{inline-size:var(--calcite-dialog-size-x, 94rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 97rem){.width-l{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}.width-l.dialog--opening-active{inset-block-start:0}}:host([placement=cover]) .dialog{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0}:host([placement=cover]) .panel{border-radius:0}:host([kind]) .panel{border-start-start-radius:0px;border-start-end-radius:0px}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .dialog{border-color:var(--calcite-color-status-info)}:host([kind=success]) .dialog{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .dialog{border-color:var(--calcite-color-status-warning)}:host([kind=brand][open]) .dialog,:host([kind=danger][open]) .dialog,:host([kind=info][open]) .dialog,:host([kind=success][open]) .dialog,:host([kind=warning][open]) .dialog{border-width:0px;border-block-start-width:4px;border-style:solid}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}`;
+let y = 0, C = "";
+class H extends S {
   constructor() {
-    super(...arguments), this.dragPosition = { ...$ }, this.ignoreOpenChange = !1, this.mutationObserver = U("mutation", () => this.handleMutationObserver()), this._open = !1, this.openEnd = () => {
+    super(...arguments), this.dragPosition = { ...D }, this.focusTrap = R({
+      triggerProp: "open",
+      focusTrapOptions: {
+        // scrim closes on click, so we let it take over
+        clickOutsideDeactivates: () => !this.modal,
+        escapeDeactivates: (e) => (!e.defaultPrevented && !this.escapeDisabled && (this.open = !1, e.preventDefault()), !1)
+      }
+    })(this), this.ignoreOpenChange = !1, this.mutationObserver = A("mutation", () => this.handleMutationObserver()), this._open = !1, this.openEnd = () => {
       this.setFocus(), this.el.removeEventListener("calciteDialogOpen", this.openEnd);
-    }, this.openTransitionProp = "opacity", this.panelEl = T(), this.resizePosition = { ...C }, this.assistiveText = null, this.hasContentBottom = !1, this.hasContentTop = !1, this.hasFooter = !0, this.opened = !1, this.closeDisabled = !1, this.dragEnabled = !1, this.embedded = !1, this.escapeDisabled = !1, this.loading = !1, this.menuOpen = !1, this.messages = K(), this.modal = !1, this.outsideCloseDisabled = !1, this.overlayPositioning = "absolute", this.placement = "center", this.resizable = !1, this.scale = "m", this.widthScale = "m", this.calciteDialogBeforeClose = u({ cancelable: !1 }), this.calciteDialogBeforeOpen = u({ cancelable: !1 }), this.calciteDialogClose = u({ cancelable: !1 }), this.calciteDialogOpen = u({ cancelable: !1 }), this.calciteDialogScroll = u({ cancelable: !1 });
+    }, this.openProp = "opened", this.transitionProp = "opacity", this.panelEl = T(), this.resizePosition = { ...$ }, this.assistiveText = null, this.hasContentBottom = !1, this.hasContentTop = !1, this.hasFooter = !0, this.opened = !1, this.closeDisabled = !1, this.dragEnabled = !1, this.embedded = !1, this.escapeDisabled = !1, this.loading = !1, this.menuOpen = !1, this.messages = L(), this.modal = !1, this.focusTrapDisabled = !1, this.outsideCloseDisabled = !1, this.overlayPositioning = "absolute", this.placement = "center", this.resizable = !1, this.scale = "m", this.widthScale = "m", this.calciteDialogBeforeClose = u({ cancelable: !1 }), this.calciteDialogBeforeOpen = u({ cancelable: !1 }), this.calciteDialogClose = u({ cancelable: !1 }), this.calciteDialogOpen = u({ cancelable: !1 }), this.calciteDialogScroll = u({ cancelable: !1 });
   }
   static {
-    this.properties = { assistiveText: 16, hasContentBottom: 16, hasContentTop: 16, hasFooter: 16, opened: 16, beforeClose: 0, closeDisabled: 7, description: 1, dragEnabled: 7, embedded: 5, escapeDisabled: 7, heading: 1, headingLevel: 11, kind: 3, loading: 7, menuOpen: 7, messageOverrides: 0, modal: 7, open: 7, outsideCloseDisabled: 7, overlayPositioning: 3, placement: 3, resizable: 7, scale: 3, widthScale: 3, width: 3 };
+    this.properties = { assistiveText: 16, hasContentBottom: 16, hasContentTop: 16, hasFooter: 16, opened: 16, beforeClose: 0, closeDisabled: 7, description: 1, dragEnabled: 7, embedded: 5, escapeDisabled: 7, focusTrapOptions: 0, heading: 1, headingLevel: 11, kind: 3, loading: 7, menuOpen: 7, messageOverrides: 0, modal: 7, focusTrapDisabled: 7, open: 7, outsideCloseDisabled: 7, overlayPositioning: 3, placement: 3, resizable: 7, scale: 3, widthScale: 3, width: 3 };
   }
   static {
-    this.styles = q;
+    this.styles = U;
   }
   /** When `true`, displays and positions the component. */
   get open() {
@@ -86,34 +92,34 @@ class V extends P {
    * @returns {Promise<void>} - A promise that is resolved when the operation has completed.
    */
   async setFocus() {
-    return await L(this), this.panelEl.value?.setFocus() ?? I(this.el);
+    return await I(this), this.panelEl.value?.setFocus() ?? P(this.el);
+  }
+  /**
+   * Updates the element(s) that are included in the focus-trap of the component.
+   *
+   * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
+   */
+  async updateFocusTrapElements(e) {
+    this.focusTrap.updateContainerElements(e);
   }
-  /** Updates the element(s) that are used within the focus-trap of the component. */
-  async updateFocusTrapElements() {
-    A(this);
+  /** When defined, provides a condition to disable focus trapping. When `true`, prevents focus trapping. */
+  focusTrapDisabledOverride() {
+    return !this.modal && this.focusTrapDisabled;
   }
   // #endregion
   // #region Lifecycle
   connectedCallback() {
-    super.connectedCallback(), this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 }), M(this, {
-      focusTrapOptions: {
-        // scrim closes on click, so we let it take over
-        clickOutsideDeactivates: () => !this.modal,
-        escapeDeactivates: (e) => (!e.defaultPrevented && !this.escapeDisabled && (this.open = !1, e.preventDefault()), !1)
-      }
-    }), this.setupInteractions();
+    super.connectedCallback(), this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 }), this.setupInteractions();
   }
   async load() {
-    F(this), this.open && this.openDialog();
   }
   willUpdate(e) {
     e.has("modal") && (this.hasUpdated || this.modal !== !1) && this.updateOverflowHiddenClass(), (e.has("open") && (this.hasUpdated || this.open !== !1) || e.has("placement") && (this.hasUpdated || this.placement !== "center") || e.has("resizable") && (this.hasUpdated || this.resizable !== !1) || e.has("dragEnabled") && (this.hasUpdated || this.dragEnabled !== !1)) && this.setupInteractions(), (e.has("messages") || e.has("dragEnabled") && (this.hasUpdated || this.dragEnabled !== !1) || e.has("resizable") && (this.hasUpdated || this.resizable !== !1)) && this.updateAssistiveText(), e.has("opened") && (this.hasUpdated || this.opened !== !1) && this.handleOpenedChange(this.opened);
   }
   loaded() {
-    R(this);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeOverflowHiddenClass(), this.mutationObserver?.disconnect(), D(this), this.embedded = !1, this.cleanupInteractions();
+    super.disconnectedCallback(), this.removeOverflowHiddenClass(), this.mutationObserver?.disconnect(), this.embedded = !1, this.cleanupInteractions();
   }
   // #endregion
   // #region Private Methods
@@ -125,20 +131,20 @@ class V extends P {
     this.calciteDialogBeforeOpen.emit();
   }
   onOpen() {
-    this.calciteDialogOpen.emit(), B(this);
+    this.calciteDialogOpen.emit(), this.focusTrap.activate();
   }
   onBeforeClose() {
     this.calciteDialogBeforeClose.emit();
   }
   onClose() {
-    this.calciteDialogClose.emit(), D(this);
+    this.calciteDialogClose.emit(), this.focusTrap.deactivate();
   }
   toggleDialog(e) {
     this.ignoreOpenChange || (e ? this.openDialog() : this.closeDialog());
   }
   handleOpenedChange(e) {
     const { transitionEl: t } = this;
-    t && (t.classList.toggle(p.openingActive, e), j(this));
+    t && (t.classList.toggle(p.openingActive, e), B(this));
   }
   async triggerInteractModifiers() {
     const { interaction: e } = this;
@@ -152,44 +158,44 @@ class V extends P {
     return this.transitionEl.getBoundingClientRect();
   }
   handleKeyDown(e) {
-    const { key: t, shiftKey: i, defaultPrevented: a } = e, { dragEnabled: o, resizable: n, resizePosition: l, dragPosition: s, transitionEl: d } = this;
+    const { key: t, shiftKey: i, defaultPrevented: a } = e, { dragEnabled: n, resizable: l, resizePosition: r, dragPosition: s, transitionEl: d } = this;
     if (!(a || !["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(t)))
       switch (t) {
         case "ArrowUp":
-          i && n && d ? (this.updateSize({
+          i && l && d ? (this.updateSize({
             size: this.getTransitionElDOMRect().height - m,
             type: "blockSize"
-          }), l.bottom -= m, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault()) : o && (s.y -= w, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault());
+          }), r.bottom -= m, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault()) : n && (s.y -= w, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault());
           break;
         case "ArrowDown":
-          i && n && d ? (this.updateSize({
+          i && l && d ? (this.updateSize({
             size: this.getTransitionElDOMRect().height + m,
             type: "blockSize"
-          }), l.bottom += m, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault()) : o && (s.y += w, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault());
+          }), r.bottom += m, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault()) : n && (s.y += w, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault());
           break;
         case "ArrowLeft":
-          i && n && d ? (this.updateSize({
+          i && l && d ? (this.updateSize({
             size: this.getTransitionElDOMRect().width - m,
             type: "inlineSize"
-          }), l.right -= m, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault()) : o && (s.x -= w, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault());
+          }), r.right -= m, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault()) : n && (s.x -= w, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault());
           break;
         case "ArrowRight":
-          i && n && d ? (this.updateSize({
+          i && l && d ? (this.updateSize({
             size: this.getTransitionElDOMRect().width + m,
             type: "inlineSize"
-          }), l.right += m, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault()) : o && (s.x += w, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault());
+          }), r.right += m, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault()) : n && (s.x += w, this.updateTransform(), this.triggerInteractModifiers(), e.preventDefault());
           break;
       }
   }
   updateTransform() {
-    const { dragPosition: { x: e, y: t }, resizePosition: i, transitionEl: a, dragEnabled: o, resizable: n } = this;
+    const { dragPosition: { x: e, y: t }, resizePosition: i, transitionEl: a, dragEnabled: n, resizable: l } = this;
     if (!a)
       return;
-    if (!o && !n) {
+    if (!n && !l) {
       a.style.transform = null;
       return;
     }
-    const { top: l, right: s, bottom: d, left: g } = this.getAdjustedResizePosition(i), f = Math.round(e + g + s), h = Math.round(t + l + d);
+    const { top: r, right: s, bottom: d, left: g } = this.getAdjustedResizePosition(i), f = Math.round(e + g + s), h = Math.round(t + r + d);
     a.style.transform = f || h ? `translate(${f}px, ${h}px)` : null;
   }
   updateSize({ type: e, size: t }) {
@@ -197,14 +203,14 @@ class V extends P {
     i && (i.style[e] = t !== null ? `${Math.round(t)}px` : null);
   }
   cleanupInteractions() {
-    this.interaction?.unset(), this.updateSize({ size: null, type: "inlineSize" }), this.updateSize({ size: null, type: "blockSize" }), this.dragPosition = { ...$ }, this.resizePosition = { ...C }, this.updateTransform();
+    this.interaction?.unset(), this.updateSize({ size: null, type: "inlineSize" }), this.updateSize({ size: null, type: "blockSize" }), this.dragPosition = { ...D }, this.resizePosition = { ...$ }, this.updateTransform();
   }
   setupInteractions() {
     this.cleanupInteractions();
-    const { el: e, transitionEl: t, resizable: i, dragEnabled: a, resizePosition: o, dragPosition: n } = this;
+    const { el: e, transitionEl: t, resizable: i, dragEnabled: a, resizePosition: n, dragPosition: l } = this;
     if (!(!t || !this.open)) {
       if ((i || a) && (this.interaction = v(t, { context: e.ownerDocument })), i) {
-        const { minInlineSize: l, minBlockSize: s, maxInlineSize: d, maxBlockSize: g } = window.getComputedStyle(t);
+        const { minInlineSize: r, minBlockSize: s, maxInlineSize: d, maxBlockSize: g } = window.getComputedStyle(t);
         this.interaction.resizable({
           edges: {
             top: !0,
@@ -215,7 +221,7 @@ class V extends P {
           modifiers: [
             v.modifiers.restrictSize({
               min: {
-                width: z(l) ? parseInt(l) : 0,
+                width: z(r) ? parseInt(r) : 0,
                 height: z(s) ? parseInt(s) : 0
               },
               max: {
@@ -229,7 +235,7 @@ class V extends P {
           ],
           listeners: {
             move: ({ rect: f, deltaRect: h }) => {
-              h && (o.top += h.top, o.right += h.right, o.bottom += h.bottom, o.left += h.left), this.updateSize({ size: f.width, type: "inlineSize" }), this.updateSize({ size: f.height, type: "blockSize" }), this.updateTransform();
+              h && (n.top += h.top, n.right += h.right, n.bottom += h.bottom, n.left += h.left), this.updateSize({ size: f.width, type: "inlineSize" }), this.updateSize({ size: f.height, type: "blockSize" }), this.updateTransform();
             }
           }
         });
@@ -241,24 +247,24 @@ class V extends P {
           })
         ],
         listeners: {
-          move: ({ dx: l, dy: s }) => {
-            n.x += l, n.y += s, this.updateTransform();
+          move: ({ dx: r, dy: s }) => {
+            l.x += r, l.y += s, this.updateTransform();
           }
         }
       });
     }
   }
   getAdjustedResizePosition({ top: e, right: t, bottom: i, left: a }) {
-    const o = e / 2, n = t / 2, l = i / 2, s = a / 2;
+    const n = e / 2, l = t / 2, r = i / 2, s = a / 2;
     switch (this.placement) {
       case "top":
-        return { top: e, right: n, bottom: 0, left: s };
+        return { top: e, right: l, bottom: 0, left: s };
       case "top-start":
         return { top: e, right: 0, bottom: 0, left: a };
       case "top-end":
         return { top: e, right: t, bottom: 0, left: 0 };
       case "bottom":
-        return { top: 0, right: n, bottom: i, left: s };
+        return { top: 0, right: l, bottom: i, left: s };
       case "bottom-start":
         return { top: 0, right: 0, bottom: i, left: a };
       case "bottom-end":
@@ -267,9 +273,9 @@ class V extends P {
       case "center":
       default:
         return {
-          top: o,
-          right: n,
-          bottom: l,
+          top: n,
+          right: l,
+          bottom: r,
           left: s
         };
     }
@@ -308,10 +314,10 @@ class V extends P {
     this.opened && !this.embedded && this.modal ? this.addOverflowHiddenClass() : this.removeOverflowHiddenClass();
   }
   addOverflowHiddenClass() {
-    y === 0 && (E = document.documentElement.style.overflow), y++, document.documentElement.style.setProperty("overflow", "hidden");
+    y === 0 && (C = document.documentElement.style.overflow), y++, document.documentElement.style.setProperty("overflow", "hidden");
   }
   removeOverflowHiddenClass() {
-    document.documentElement.style.setProperty("overflow", E);
+    document.documentElement.style.setProperty("overflow", C);
   }
   handleMutationObserver() {
     this.updateFocusTrapElements();
@@ -326,11 +332,11 @@ class V extends P {
       [p.containerEmbedded]: this.embedded
     })}>${this.modal ? x`<calcite-scrim class=${b(p.scrim)} @click=${this.handleOutsideClose}></calcite-scrim>` : null}<div .ariaDescription=${t} .ariaLabel=${i} .ariaModal=${this.modal} class=${b({
       [p.dialog]: !0,
-      [H("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
-    })} @keydown=${this.handleKeyDown} role=dialog ${k(this.setTransitionEl)}>${e ? S("assistive-text", x`<div aria-live=polite class=${b(p.assistiveText)}>${e}</div>`) : null}<slot name=${r.content}><calcite-panel .beforeClose=${this.beforeClose} class=${b(p.panel)} .closable=${!this.closeDisabled} .closed=${!a} .description=${t} .heading=${i} .headingLevel=${this.headingLevel} .loading=${this.loading} .menuOpen=${this.menuOpen} .messageOverrides=${this.messageOverrides} @keydown=${this.handlePanelKeyDown} @calcitePanelClose=${this.handleInternalPanelCloseClick} @calcitePanelScroll=${this.handleInternalPanelScroll} .overlayPositioning=${this.overlayPositioning} .scale=${this.scale} ${k(this.panelEl)}><slot name=${r.actionBar} slot=${c.actionBar}></slot><slot name=${r.alerts} slot=${c.alerts}></slot><slot name=${r.headerActionsStart} slot=${c.headerActionsStart}></slot><slot name=${r.headerActionsEnd} slot=${c.headerActionsEnd}></slot><slot name=${r.headerContent} slot=${c.headerContent}></slot><slot name=${r.headerMenuActions} slot=${c.headerMenuActions}></slot><slot name=${r.fab} slot=${c.fab}></slot><slot name=${r.contentTop} slot=${c.contentTop}></slot><slot name=${r.contentBottom} slot=${c.contentBottom}></slot><slot name=${r.footerStart} slot=${c.footerStart}></slot><slot name=${r.footer} slot=${c.footer}></slot><slot name=${r.footerEnd} slot=${c.footerEnd}></slot><slot></slot></calcite-panel></slot></div></div>`;
+      [M("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
+    })} @keydown=${this.handleKeyDown} role=dialog ${k(this.setTransitionEl)}>${e ? O("assistive-text", x`<div aria-live=polite class=${b(p.assistiveText)}>${e}</div>`) : null}<slot name=${o.customContent}><slot name=${o.content}><calcite-panel .beforeClose=${this.beforeClose} class=${b(p.panel)} .closable=${!this.closeDisabled} .closed=${!a} .description=${t} .heading=${i} .headingLevel=${this.headingLevel} .loading=${this.loading} .menuOpen=${this.menuOpen} .messageOverrides=${this.messageOverrides} @keydown=${this.handlePanelKeyDown} @calcitePanelClose=${this.handleInternalPanelCloseClick} @calcitePanelScroll=${this.handleInternalPanelScroll} .overlayPositioning=${this.overlayPositioning} .scale=${this.scale} ${k(this.panelEl)}><slot name=${o.actionBar} slot=${c.actionBar}></slot><slot name=${o.alerts} slot=${c.alerts}></slot><slot name=${o.headerActionsStart} slot=${c.headerActionsStart}></slot><slot name=${o.headerActionsEnd} slot=${c.headerActionsEnd}></slot><slot name=${o.headerContent} slot=${c.headerContent}></slot><slot name=${o.headerMenuActions} slot=${c.headerMenuActions}></slot><slot name=${o.fab} slot=${c.fab}></slot><slot name=${o.contentTop} slot=${c.contentTop}></slot><slot name=${o.contentBottom} slot=${c.contentBottom}></slot><slot name=${o.footerStart} slot=${c.footerStart}></slot><slot name=${o.footer} slot=${c.footer}></slot><slot name=${o.footerEnd} slot=${c.footerEnd}></slot><slot></slot></calcite-panel></slot></slot></div></div>`;
   }
 }
-O("calcite-dialog", V);
+E("calcite-dialog", H);
 export {
-  V as Dialog
+  H as Dialog
 };

package/dist/components/calcite-dialog/resources.d.ts

@@ -13,6 +13,7 @@ export declare const SLOTS: {
     actionBar: string;
     alerts: string;
     content: string;
+    customContent: string;
     contentTop: string;
     contentBottom: string;
     headerActionsStart: string;

package/dist/components/calcite-dropdown/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="../../index.d.ts" />
 import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { FlipPlacement, FloatingUIComponent, MenuPlacement, OverlayPositioning } from '../../utils/floating-ui';
 import { InteractiveComponent } from '../../utils/interactive';
 import { LoadableComponent } from '../../utils/loadable';