@esri/calcite-components 5.0.0-next.9 → 5.0.0-next.90

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

@@ -1,18 +1,22 @@
-import { a as resizeShiftStep, c as customElement } from "../../chunks/runtime.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.
+v5.0.0-next.90 */
+import { b as resizeShiftStep, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
-import { i as interact } from "../../chunks/interact.min.js";
+import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverride.js";
 import { css, html } from "lit";
-import { createRef, ref } from "lit-html/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { k as getStylePixelValue } from "../../chunks/dom.js";
+import { a as getStylePixelValue } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
-import { S as SLOTS$1 } from "../../chunks/resources3.js";
+import { S as SLOTS$1 } from "../../chunks/resources6.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { u as usePreventDocumentScroll } from "../../chunks/usePreventDocumentScroll.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useTopLayer } from "../../chunks/useTopLayer.js";
 const CSS = {
   dialog: "dialog",
   panel: "panel",
@@ -40,7 +44,7 @@ const SLOTS = {
 };
 const initialDragPosition = { x: null, y: null };
 const initialResizePosition = { top: null, right: null, bottom: null, left: null };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{--calcite-dialog-scrim-background-color: rgba(0, 0, 0, .85);pointer-events:none;inset:0;display:flex;--calcite-internal-dialog-animation-offset: 20px}:host([embedded]){z-index:var(--calcite-z-index-overlay)}:host([embedded][modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0;display:flex;block-size:100%;inline-size:100%;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;z-index:calc(var(--calcite-z-index) * -1);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));--calcite-panel-icon-color: var(--calcite-dialog-icon-color);--calcite-panel-heading-text-color: var(--calcite-dialog-heading-text-color);--calcite-panel-description-text-color: var(--calcite-dialog-description-text-color);--calcite-panel-header-background-color: var(--calcite-dialog-header-background-color);--calcite-panel-header-action-background-color: var(--calcite-dialog-header-action-background-color);--calcite-panel-header-action-background-color-hover: var(--calcite-dialog-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-dialog-header-action-background-color-press);--calcite-panel-header-action-text-color: var(--calcite-dialog-header-action-text-color);--calcite-panel-header-action-text-color-press: var(--calcite-dialog-header-action-text-color-press);--calcite-panel-footer-background-color: var(--calcite-dialog-footer-background-color);--calcite-panel-space: var(--calcite-dialog-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-header-content-space: var(--calcite-dialog-header-content-space, var(--calcite-dialog-content-space));--calcite-popover-border-color: var(--calcite-dialog-action-menu-border-color, var(--calcite-color-border-1));--calcite-panel-corner-radius: var(--calcite-dialog-corner-radius)}:host([kind=brand]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-brand))}:host([kind=danger]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-danger))}:host([kind=info]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-info))}:host([kind=success]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-success))}:host([kind=warning]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-warning))}::slotted(*){--calcite-panel-background-color: initial}[popover]{padding:0;border:none;background-color:transparent;position:fixed;display:flex}[popover]:popover-open{display:flex}.dialog{pointer-events:none;position:relative;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;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);border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));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([embedded]) .dialog{z-index:var(--calcite-z-index-modal)}: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{visibility:hidden;opacity:0;border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}.container--open .panel{visibility:visible;opacity:1;transition:visibility 0ms linear,opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}.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]) .dialog{overflow:hidden}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-danger))}:host([kind=info]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-info))}:host([kind=success]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-success))}:host([kind=warning]) .dialog{border-color:var(--calcite-dialog-accent-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{z-index:var(--calcite-z-index-overlay);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}`;
+const styles = css`:host{--calcite-dialog-scrim-background-color: rgba(0, 0, 0, .85);pointer-events:none;inset:0;display:flex;--calcite-internal-dialog-animation-offset: 20px}:host([top-layer-disabled]),:host([top-layer-disabled]) .container,:host([embedded]),.container--embedded{z-index:var(--calcite-z-index-overlay)}:host([embedded][modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0;display:flex;block-size:100%;inline-size:100%;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;z-index:calc(var(--calcite-z-index) * -1)}:host([top-layer-disabled]) .scrim{z-index:unset}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));--calcite-panel-icon-color: var(--calcite-dialog-icon-color);--calcite-panel-heading-text-color: var(--calcite-dialog-heading-text-color);--calcite-panel-description-text-color: var(--calcite-dialog-description-text-color);--calcite-panel-header-background-color: var(--calcite-dialog-header-background-color);--calcite-panel-header-action-background-color: var(--calcite-dialog-header-action-background-color);--calcite-panel-header-action-background-color-hover: var(--calcite-dialog-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-dialog-header-action-background-color-press);--calcite-panel-header-action-text-color: var(--calcite-dialog-header-action-text-color);--calcite-panel-header-action-text-color-press: var(--calcite-dialog-header-action-text-color-press);--calcite-panel-footer-background-color: var(--calcite-dialog-footer-background-color);--calcite-panel-space: var(--calcite-dialog-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-header-content-space: var(--calcite-dialog-header-content-space, var(--calcite-dialog-content-space));--calcite-popover-border-color: var(--calcite-dialog-action-menu-border-color, var(--calcite-color-border-1));--calcite-panel-corner-radius: var(--calcite-dialog-corner-radius)}:host([kind=brand]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-brand))}:host([kind=danger]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-danger))}:host([kind=info]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-info))}:host([kind=success]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-success))}:host([kind=warning]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-warning))}::slotted(*){--calcite-panel-background-color: initial}[popover]{padding:0;border:none;background-color:transparent;position:fixed;display:flex}[popover]:popover-open{display:flex}.dialog{pointer-events:none;position:relative;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;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);border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));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([top-layer-disabled]) .dialog,:host([embedded]) .dialog{z-index:var(--calcite-z-index-modal)}: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{visibility:hidden;opacity:0;border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}.container--open .panel{visibility:visible;opacity:1;transition:visibility 0ms linear,opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}.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){:host(:not([fullscreen-disabled])) .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)}}:host(:not([fullscreen-disabled])) .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){:host(:not([fullscreen-disabled])) .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)}}:host(:not([fullscreen-disabled])) .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){:host(:not([fullscreen-disabled])) .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)}}:host(:not([fullscreen-disabled])) .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]) .dialog{overflow:hidden}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-danger))}:host([kind=info]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-info))}:host([kind=success]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-success))}:host([kind=warning]) .dialog{border-color:var(--calcite-dialog-accent-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}`;
 class Dialog extends LitElement {
   constructor() {
     super(...arguments);
@@ -67,17 +71,39 @@ class Dialog extends LitElement {
     this.panelRef = createRef();
     this.popoverRef = createRef();
     this.resizePosition = { ...initialResizePosition };
+    this.transitionEl = null;
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.sizeOverride = useSizeOverride({
+      targetElement: () => ({ value: this.transitionEl }),
+      getBounds: () => ({
+        inline: { min: this.resizeValues.minInlineSize, max: this.resizeValues.maxInlineSize },
+        block: { min: this.resizeValues.minBlockSize, max: this.resizeValues.maxBlockSize }
+      }),
+      fullscreenDisabled: () => this.fullscreenDisabled
+    });
+    this.topLayer = useTopLayer({
+      disabledOverride: () => this.embedded,
+      target: this.popoverRef
+    })(this);
     this.assistiveText = null;
     this.hasContentBottom = false;
     this.hasContentTop = false;
     this.hasFooter = true;
     this.opened = false;
+    this.resizeValues = {
+      inlineSize: null,
+      blockSize: null,
+      minInlineSize: null,
+      minBlockSize: null,
+      maxInlineSize: null,
+      maxBlockSize: null
+    };
     this.closeDisabled = false;
     this.dragEnabled = false;
     this.embedded = false;
     this.escapeDisabled = false;
+    this.fullscreenDisabled = false;
     this.iconFlipRtl = false;
     this.loading = false;
     this.menuOpen = false;
@@ -88,6 +114,7 @@ class Dialog extends LitElement {
     this.placement = "center";
     this.resizable = false;
     this.scale = "m";
+    this.topLayerDisabled = false;
     this.widthScale = "m";
     this.calciteDialogBeforeClose = createEvent({ cancelable: false });
     this.calciteDialogBeforeOpen = createEvent({ cancelable: false });
@@ -96,7 +123,7 @@ class Dialog extends LitElement {
     this.calciteDialogScroll = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { assistiveText: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], opened: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closeDisabled: [7, {}, { reflect: true, type: Boolean }], description: 1, dragEnabled: [7, {}, { reflect: true, type: Boolean }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], kind: [3, {}, { reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuOpen: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], modal: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], open: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
+    this.properties = { assistiveText: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], opened: [16, {}, { state: true }], resizeValues: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closeDisabled: [7, {}, { reflect: true, type: Boolean }], description: 1, dragEnabled: [7, {}, { reflect: true, type: Boolean }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], fullscreenDisabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], kind: [3, {}, { reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuOpen: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], modal: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], open: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -123,6 +150,9 @@ class Dialog extends LitElement {
     this.focusTrap.setExtraContainers(extraContainers);
     this.focusTrap.updateContainerElements();
   }
+  async updateSize(size) {
+    this.updateSizeInternal(size);
+  }
   connectedCallback() {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
@@ -154,6 +184,7 @@ class Dialog extends LitElement {
   }
   onBeforeOpen() {
     this.calciteDialogBeforeOpen.emit();
+    this.topLayer.show();
   }
   onOpen() {
     if (this.focusTrapDisabled) {
@@ -168,6 +199,7 @@ class Dialog extends LitElement {
   onClose() {
     this.focusTrap.deactivate();
     this.calciteDialogClose.emit();
+    this.topLayer.hide();
   }
   async setOpenState(value) {
     if (this.beforeClose && !value) {
@@ -183,17 +215,6 @@ class Dialog extends LitElement {
     }
     this.opened = value;
   }
-  async handlePopover() {
-    await this.componentOnReady();
-    if (this.embedded || !this.popoverRef.value) {
-      return;
-    }
-    if (this.open) {
-      this.popoverRef.value.showPopover();
-    } else {
-      this.popoverRef.value.hidePopover();
-    }
-  }
   handleOpenedChange(value) {
     const { transitionEl } = this;
     if (!transitionEl) {
@@ -201,7 +222,6 @@ class Dialog extends LitElement {
     }
     transitionEl.classList.toggle(CSS.openingActive, value);
     toggleOpenClose(this);
-    this.handlePopover();
   }
   async triggerInteractModifiers() {
     const { interaction } = this;
@@ -215,7 +235,7 @@ class Dialog extends LitElement {
       name: "resize"
     });
   }
-  getTransitionElDOMRect() {
+  getTransitionRefDOMRect() {
     return this.transitionEl.getBoundingClientRect();
   }
   handleKeyDown(event) {
@@ -230,13 +250,12 @@ class Dialog extends LitElement {
         if (shiftKey && resizable && transitionEl) {
           const { minBlockSize } = window.getComputedStyle(transitionEl);
           const minHeight = getStylePixelValue(minBlockSize);
-          const height = this.getTransitionElDOMRect().height;
+          const height = this.getTransitionRefDOMRect().height;
           if (height <= minHeight) {
             return;
           }
-          this.updateSize({
-            size: height - resizeShiftStep,
-            type: "blockSize"
+          this.updateSizeInternal({
+            block: height - resizeShiftStep
           });
           resizePosition.bottom -= resizeShiftStep;
           this.updateTransform();
@@ -251,9 +270,8 @@ class Dialog extends LitElement {
         break;
       case "ArrowDown":
         if (shiftKey && resizable && transitionEl) {
-          this.updateSize({
-            size: this.getTransitionElDOMRect().height + resizeShiftStep,
-            type: "blockSize"
+          this.updateSizeInternal({
+            block: this.getTransitionRefDOMRect().height + resizeShiftStep
           });
           resizePosition.bottom += resizeShiftStep;
           this.updateTransform();
@@ -270,13 +288,12 @@ class Dialog extends LitElement {
         if (shiftKey && resizable && transitionEl) {
           const { minInlineSize } = window.getComputedStyle(transitionEl);
           const minWidth = getStylePixelValue(minInlineSize);
-          const width = this.getTransitionElDOMRect().width;
+          const width = this.getTransitionRefDOMRect().width;
           if (width <= minWidth) {
             return;
           }
-          this.updateSize({
-            size: width - resizeShiftStep,
-            type: "inlineSize"
+          this.updateSizeInternal({
+            inline: width - resizeShiftStep
           });
           resizePosition.right -= resizeShiftStep;
           this.updateTransform();
@@ -291,9 +308,8 @@ class Dialog extends LitElement {
         break;
       case "ArrowRight":
         if (shiftKey && resizable && transitionEl) {
-          this.updateSize({
-            size: this.getTransitionElDOMRect().width + resizeShiftStep,
-            type: "inlineSize"
+          this.updateSizeInternal({
+            inline: this.getTransitionRefDOMRect().width + resizeShiftStep
           });
           resizePosition.right += resizeShiftStep;
           this.updateTransform();
@@ -320,19 +336,14 @@ class Dialog extends LitElement {
     const { top, right, bottom, left } = this.getAdjustedResizePosition(resizePosition);
     const translateX = Math.round(x + left + right);
     const translateY = Math.round(y + top + bottom);
-    transitionEl.style.transform = translateX || translateY ? `translate(${translateX}px, ${translateY}px)` : null;
-  }
-  updateSize({ type, size }) {
-    const { transitionEl } = this;
-    if (!transitionEl) {
-      return;
-    }
-    transitionEl.style[type] = size !== null ? `${Math.round(size)}px` : null;
+    this.transitionEl.style.transform = translateX || translateY ? `translate(${translateX}px, ${translateY}px)` : null;
   }
   cleanupInteractions() {
     this.interaction?.unset();
-    this.updateSize({ size: null, type: "inlineSize" });
-    this.updateSize({ size: null, type: "blockSize" });
+    this.updateSizeInternal({
+      inline: null,
+      block: null
+    });
     this.dragPosition = { ...initialDragPosition };
     this.resizePosition = { ...initialResizePosition };
     this.updateTransform();
@@ -348,7 +359,7 @@ class Dialog extends LitElement {
     }
     if (resizable) {
       await this.el.componentOnReady();
-      const { minInlineSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(transitionEl);
+      const { minInlineSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(this.transitionEl);
       this.interaction.resizable({
         edges: {
           top: true,
@@ -379,8 +390,10 @@ class Dialog extends LitElement {
               resizePosition.bottom += deltaRect.bottom;
               resizePosition.left += deltaRect.left;
             }
-            this.updateSize({ size: rect.width, type: "inlineSize" });
-            this.updateSize({ size: rect.height, type: "blockSize" });
+            this.updateSizeInternal({
+              inline: rect.width,
+              block: rect.height
+            });
             this.updateTransform();
           }
         }
@@ -438,7 +451,6 @@ class Dialog extends LitElement {
     }
     this.transitionEl = el;
     this.setupInteractions();
-    this.handlePopover();
   }
   handleInternalPanelScroll(event) {
     if (event.target !== this.panelRef.value) {
@@ -469,6 +481,22 @@ class Dialog extends LitElement {
   handleMutationObserver() {
     this.focusTrap.updateContainerElements();
   }
+  updateSizeInternal(size) {
+    const dialogElement = this.transitionEl;
+    if (!dialogElement) {
+      return;
+    }
+    const appliedSize = this.sizeOverride.resize(size);
+    this.resizeValues = {
+      ...this.resizeValues,
+      ...appliedSize.inline !== void 0 && {
+        inlineSize: appliedSize.inline
+      },
+      ...appliedSize.block !== void 0 && {
+        blockSize: appliedSize.block
+      }
+    };
+  }
   render() {
     const { assistiveText, description, heading, opened, icon, iconFlipRtl } = this;
     return html`<div .ariaDescription=${description} .ariaLabel=${heading} .ariaModal=${this.modal} class=${safeClassMap({
@@ -478,7 +506,7 @@ class Dialog extends LitElement {
     })} .popover=${!this.embedded ? "manual" : null} role=dialog ${ref(this.popoverRef)}>${this.modal ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim>` : null}<div class=${safeClassMap({
       [CSS.dialog]: true,
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
-    })} @keydown=${this.handleKeyDown} ${ref(this.setTransitionEl)}>${assistiveText ? keyed("assistive-text", html`<div aria-live=polite class=${safeClassMap(CSS.assistiveText)}>${assistiveText}</div>`) : null}<slot name=${SLOTS.customContent}><calcite-panel class=${safeClassMap(CSS.panel)} .closable=${!this.closeDisabled} .description=${description} .heading=${heading} .headingLevel=${this.headingLevel} .hidden=${!this.opened} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${this.loading} .menuOpen=${this.menuOpen} .messageOverrides=${this.messageOverrides} @keydown=${this.handlePanelKeyDown} @calcitePanelClose=${this.handleInternalPanelCloseClick} @calcitePanelScroll=${this.handleInternalPanelScroll} .overlayPositioning=${this.overlayPositioning} .scale=${this.scale} ${ref(this.panelRef)}><slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel></slot></div></div>`;
+    })} @keydown=${this.handleKeyDown} ${ref(this.setTransitionEl)}>${assistiveText ? keyed("assistive-text", html`<div aria-live=polite class=${safeClassMap(CSS.assistiveText)}>${assistiveText}</div>`) : null}<slot name=${SLOTS.customContent}><calcite-panel class=${safeClassMap(CSS.panel)} .closable=${!this.closeDisabled} .description=${description} .heading=${heading} .headingLevel=${this.headingLevel} .hidden=${!this.opened} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${this.loading} .menuOpen=${this.menuOpen} .messageOverrides=${this.messageOverrides} @keydown=${this.handlePanelKeyDown} @calcitePanelClose=${this.handleInternalPanelCloseClick} @calcitePanelScroll=${this.handleInternalPanelScroll} .overlayPositioning=${this.overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.panelRef)}><slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel></slot></div></div>`;
   }
 }
 customElement("calcite-dialog", Dialog);

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

@@ -1,3 +1 @@
-import "../calcite-scrim/index.js";
-import "../calcite-panel/index.js";
 export * from "./customElement.js";

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

@@ -1,11 +1 @@
-export type DialogPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "cover" | "center";
-export type DialogResizePosition = {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-};
-export type DialogDragPosition = {
-    x: number;
-    y: number;
-};
+export type DialogPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "cover" | "center";

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

@@ -1,116 +1,132 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { FlipPlacement, FloatingUIComponent, MenuPlacement, OverlayPositioning } from '../../utils/floating-ui';
-import { InteractiveComponent } from '../../utils/interactive';
-import { Scale, Width } from '../interfaces';
-import { DropdownItem } from '../calcite-dropdown-item/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
+import type { Scale, Width } from "../interfaces.js";
+import type { DropdownItem } from "../calcite-dropdown-item/customElement.js";
 
 /**
+ * @cssproperty [--calcite-dropdown-width] - Specifies the width of the component's wrapper.
+ * @cssproperty [--calcite-dropdown-background-color] - Specifies the component's background color.
  * @slot  - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
- * @slot [trigger] - A slot for the element that triggers the `calcite-dropdown`.
+ * @slot [trigger] - A slot for the element that triggers the component.
  */
-export declare class Dropdown extends LitElement {
-    /**
-     * When `true`, the component will remain open after a selection is made.
-     *
-     * If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close.
-     *
-     * @default false
-     */
-    closeOnSelectDisabled: boolean;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /** Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available. */
-    flipPlacements: FlipPlacement[];
-    /**
-     * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller.
-     * Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.
-     *
-     * @default 0
-     */
-    maxItems: number;
-    /**
-     * Offset the position of the component away from the `referenceElement`.
-     *
-     * @default 0
-     */
-    offsetDistance: number;
-    /**
-     * Offset the position of the component along the `referenceElement`.
-     *
-     * @default 0
-     */
-    offsetSkidding: number;
-    /**
-     * When `true`, displays and positions the component.
-     *
-     * @default false
-     */
-    open: boolean;
-    /**
-     * Determines the type of positioning to use for the overlaid content.
-     *
-     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
-     *
-     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
-     *
-     * @default "absolute"
-     */
-    overlayPositioning: OverlayPositioning;
-    /**
-     * Determines where the component will be positioned relative to the container element.
-     *
-     * @default "bottom-start"
-     */
-    placement: MenuPlacement;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /** Specifies the component's selected items. */
-    readonly selectedItems: HTMLCalciteDropdownItemElement[];
-    /**
-     * Specifies the action to open the component from the container element.
-     *
-     * @default "click"
-     */
-    type: "hover" | "click";
-    /**
-     * Specifies the width of the component.
-     *
-     * @deprecated in v3.0.0, removal target v6.0.0 - Use the `width` property instead.
-     */
-    widthScale: Scale;
-    /** Specifies the width of the component. */
-    width: Extract<Width, Scale>;
-    /**
-     * Updates the position of the component.
-     *
-     * @param delayed
-     */
-    reposition(delayed?: boolean): Promise<void>;
-    /**
-     * Sets focus on the component's first focusable element.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires when the component is requested to be closed and before the closing transition begins. */
-    readonly calciteDropdownBeforeClose: TargetedEvent<this, void>;
-    /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calciteDropdownBeforeOpen: TargetedEvent<this, void>;
-    /** Fires when the component is closed and animation is complete. */
-    readonly calciteDropdownClose: TargetedEvent<this, void>;
-    /** Fires when the component is open and animation is complete. */
-    readonly calciteDropdownOpen: TargetedEvent<this, void>;
-    /** Fires when a `calcite-dropdown-item`'s selection changes. */
-    readonly calciteDropdownSelect: TargetedEvent<this, void>;
-}
+export abstract class Dropdown extends LitElement {
+  /**
+   * When `true`, the component will remain open after a selection is made.
+   *
+   * If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close.
+   *
+   * @default false
+   */
+  accessor closeOnSelectDisabled: boolean;
+  /**
+   * When `true`, prevents interaction and decreases the component's opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /** Specifies the component's fallback `placement` for slotted `calcite-dropdown-item`s when their initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[];
+  /**
+   * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scrollbar.
+   * Value must be greater than `0`, and does not include `groupTitle`s from `calcite-dropdown-group`.
+   *
+   * @default 0
+   */
+  accessor maxItems: number;
+  /**
+   * Specifies the distance to position the component away from the `referenceElement`.
+   *
+   * @default 0
+   */
+  accessor offsetDistance: number;
+  /**
+   * Specifies the distance to position the component along the `referenceElement`.
+   *
+   * @default 0
+   */
+  accessor offsetSkidding: number;
+  /**
+   * When `true`, displays and positions the component.
+   *
+   * @default false
+   */
+  accessor open: boolean;
+  /**
+   * Specifies the type of positioning to use for overlaid content, where:
+   *
+   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   *
+   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   *
+   * @default "absolute"
+   */
+  accessor overlayPositioning: OverlayPositioning;
+  /**
+   * Determines the component's placement relative to the container element.
+   *
+   * @default "bottom-start"
+   */
+  accessor placement: MenuPlacement;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /** The component's selected items. */
+  get selectedItems(): DropdownItem[];
+  /**
+   * When `true` and the component is `open`, disables top layer placement.
+   *
+   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   *
+   * @default false
+   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   */
+  accessor topLayerDisabled: boolean;
+  /**
+   * Specifies the type of action on the container element to open the component.
+   *
+   * @default "click"
+   */
+  accessor type: "hover" | "click";
+  /** Specifies the component's width. */
+  accessor width: Extract<Width, Scale>;
+  /**
+   * Specifies the component's width.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use the `width` property instead.
+   */
+  accessor widthScale: Scale;
+  /**
+   * Updates the component's position.
+   *
+   * @param delayed
+   */
+  reposition(delayed?: boolean): Promise<void>;
+  /**
+   * Sets focus on the component's first focusable element.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  readonly calciteDropdownBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  readonly calciteDropdownBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is closed and animation is complete. */
+  readonly calciteDropdownClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is opened and animation is complete. */
+  readonly calciteDropdownOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when a `calcite-dropdown-item`'s selection changes. */
+  readonly calciteDropdownSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteDropdownBeforeClose: Dropdown["calciteDropdownBeforeClose"]["detail"];
+    calciteDropdownBeforeOpen: Dropdown["calciteDropdownBeforeOpen"]["detail"];
+    calciteDropdownClose: Dropdown["calciteDropdownClose"]["detail"];
+    calciteDropdownOpen: Dropdown["calciteDropdownOpen"]["detail"];
+    calciteDropdownSelect: Dropdown["calciteDropdownSelect"]["detail"];
+  };
+}