@esri/calcite-components 3.2.0-next.8 → 3.2.0

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

@@ -1,13 +1,13 @@
 /*! 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.2.0-next.8 */
-import { c as customElement } from "../../chunks/runtime.js";
+v3.2.0 */
+import { a as resizeShiftStep, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit-html/directives/keyed.js";
 import { i as interact } from "../../chunks/interact.min.js";
 import { html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { h as focusFirstTabbable, m as isPixelValue } from "../../chunks/dom.js";
+import { h as focusFirstTabbable, k as getStylePixelValue } from "../../chunks/dom.js";
 import { c as componentFocusable } from "../../chunks/component.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
@@ -15,6 +15,7 @@ import { o as onToggleOpenCloseComponent } from "../../chunks/openCloseComponent
 import { S as SLOTS$1 } from "../../chunks/resources3.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 { css } from "@lit/reactive-element/css-tag.js";
 const CSS = {
   dialog: "dialog",
@@ -42,13 +43,9 @@ const SLOTS = {
   footerStart: "footer-start",
   footerEnd: "footer-end"
 };
-const dialogResizeStep = 25;
-const dialogDragStep = 25;
-const initialDragPosition = { x: 0, y: 0 };
-const initialResizePosition = { top: 0, right: 0, bottom: 0, left: 0 };
+const initialDragPosition = { x: null, y: null };
+const initialResizePosition = { top: null, right: null, bottom: null, left: null };
 const styles = css`: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 totalOpenDialogs = 0;
-let initialDocumentOverflowStyle = "";
 class Dialog extends LitElement {
   constructor() {
     super(...arguments);
@@ -57,7 +54,7 @@ class Dialog extends LitElement {
       triggerProp: "open",
       focusTrapOptions: {
         // scrim closes on click, so we let it take over
-        clickOutsideDeactivates: () => !this.modal,
+        clickOutsideDeactivates: () => !this.modal || this.embedded,
         escapeDeactivates: (event) => {
           if (!event.defaultPrevented && !this.escapeDisabled) {
             this.open = false;
@@ -67,17 +64,15 @@ class Dialog extends LitElement {
         }
       }
     })(this);
+    this.usePreventDocumentScroll = usePreventDocumentScroll()(this);
     this.ignoreOpenChange = false;
     this.mutationObserver = createObserver("mutation", () => this.handleMutationObserver());
     this._open = false;
-    this.openEnd = () => {
-      this.setFocus();
-      this.el.removeEventListener("calciteDialogOpen", this.openEnd);
-    };
     this.openProp = "opened";
     this.transitionProp = "opacity";
     this.panelEl = createRef();
     this.resizePosition = { ...initialResizePosition };
+    this.messages = useT9n();
     this.assistiveText = null;
     this.hasContentBottom = false;
     this.hasContentTop = false;
@@ -89,7 +84,6 @@ class Dialog extends LitElement {
     this.escapeDisabled = false;
     this.loading = false;
     this.menuOpen = false;
-    this.messages = useT9n();
     this.modal = false;
     this.focusTrapDisabled = false;
     this.outsideCloseDisabled = false;
@@ -105,12 +99,14 @@ 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: [5, { type: Boolean }], escapeDisabled: [7, { reflect: true, type: Boolean }], focusTrapOptions: [0, { attribute: false }], heading: 1, headingLevel: [11, { type: Number, reflect: true }], kind: [3, { reflect: true }], 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 }], preventDocumentScroll: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closeDisabled: [7, {}, { reflect: true, type: Boolean }], description: 1, dragEnabled: [7, {}, { reflect: true, type: Boolean }], embedded: [5, {}, { type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], kind: [3, {}, { reflect: true }], 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 }] };
   }
   static {
     this.styles = styles;
   }
-  /** When `true`, displays and positions the component. */
+  get preventDocumentScroll() {
+    return !this.embedded && this.modal;
+  }
   get open() {
     return this._open;
   }
@@ -121,56 +117,23 @@ class Dialog extends LitElement {
       this.toggleDialog(open);
     }
   }
-  // #endregion
-  // #region Public Methods
-  /**
-   * Scrolls the component's content to a specified set of coordinates.
-   *
-   * @example
-   * myCalciteFlowItem.scrollContentTo({
-   *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
-   *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
-   *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
-   * });
-   * @param options - allows specific coordinates to be defined.
-   * @returns - promise that resolves once the content is scrolled to.
-   */
   async scrollContentTo(options) {
     await this.panelEl.value?.scrollContentTo(options);
   }
-  /**
-   * Sets focus on the component's "close" button (the first focusable item).
-   *
-   * @returns {Promise<void>} - A promise that is resolved when the operation has completed.
-   */
   async setFocus() {
     await componentFocusable(this);
     return this.panelEl.value?.setFocus() ?? focusFirstTabbable(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(extraContainers) {
     this.focusTrap.setExtraContainers(extraContainers);
     this.focusTrap.updateContainerElements();
   }
-  /** 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: true, subtree: true });
     this.setupInteractions();
   }
   willUpdate(changes) {
-    if (changes.has("modal") && (this.hasUpdated || this.modal !== false)) {
-      this.updateOverflowHiddenClass();
-    }
     if (changes.has("open") && (this.hasUpdated || this.open !== false) || changes.has("placement") && (this.hasUpdated || this.placement !== "center") || changes.has("resizable") && (this.hasUpdated || this.resizable !== false) || changes.has("dragEnabled") && (this.hasUpdated || this.dragEnabled !== false)) {
       this.setupInteractions();
     }
@@ -183,13 +146,13 @@ class Dialog extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeOverflowHiddenClass();
     this.mutationObserver?.disconnect();
     this.embedded = false;
     this.cleanupInteractions();
   }
-  // #endregion
-  // #region Private Methods
+  focusTrapDisabledOverride() {
+    return !this.modal && this.focusTrapDisabled;
+  }
   updateAssistiveText() {
     const { messages } = this;
     this.assistiveText = messages && (this.dragEnabled || this.resizable) ? `${this.dragEnabled ? messages.dragEnabled : ""} ${this.resizable ? messages.resizeEnabled : ""}` : null;
@@ -198,15 +161,18 @@ class Dialog extends LitElement {
     this.calciteDialogBeforeOpen.emit();
   }
   onOpen() {
-    this.calciteDialogOpen.emit();
+    if (this.focusTrapDisabled) {
+      this.setFocus();
+    }
     this.focusTrap.activate();
+    this.calciteDialogOpen.emit();
   }
   onBeforeClose() {
     this.calciteDialogBeforeClose.emit();
   }
   onClose() {
-    this.calciteDialogClose.emit();
     this.focusTrap.deactivate();
+    this.calciteDialogClose.emit();
   }
   toggleDialog(value) {
     if (this.ignoreOpenChange) {
@@ -252,15 +218,15 @@ class Dialog extends LitElement {
       case "ArrowUp":
         if (shiftKey && resizable && transitionEl) {
           this.updateSize({
-            size: this.getTransitionElDOMRect().height - dialogResizeStep,
+            size: this.getTransitionElDOMRect().height - resizeShiftStep,
             type: "blockSize"
           });
-          resizePosition.bottom -= dialogResizeStep;
+          resizePosition.bottom -= resizeShiftStep;
           this.updateTransform();
           this.triggerInteractModifiers();
           event.preventDefault();
         } else if (dragEnabled) {
-          dragPosition.y -= dialogDragStep;
+          dragPosition.y -= resizeShiftStep;
           this.updateTransform();
           this.triggerInteractModifiers();
           event.preventDefault();
@@ -269,15 +235,15 @@ class Dialog extends LitElement {
       case "ArrowDown":
         if (shiftKey && resizable && transitionEl) {
           this.updateSize({
-            size: this.getTransitionElDOMRect().height + dialogResizeStep,
+            size: this.getTransitionElDOMRect().height + resizeShiftStep,
             type: "blockSize"
           });
-          resizePosition.bottom += dialogResizeStep;
+          resizePosition.bottom += resizeShiftStep;
           this.updateTransform();
           this.triggerInteractModifiers();
           event.preventDefault();
         } else if (dragEnabled) {
-          dragPosition.y += dialogDragStep;
+          dragPosition.y += resizeShiftStep;
           this.updateTransform();
           this.triggerInteractModifiers();
           event.preventDefault();
@@ -286,15 +252,15 @@ class Dialog extends LitElement {
       case "ArrowLeft":
         if (shiftKey && resizable && transitionEl) {
           this.updateSize({
-            size: this.getTransitionElDOMRect().width - dialogResizeStep,
+            size: this.getTransitionElDOMRect().width - resizeShiftStep,
             type: "inlineSize"
           });
-          resizePosition.right -= dialogResizeStep;
+          resizePosition.right -= resizeShiftStep;
           this.updateTransform();
           this.triggerInteractModifiers();
           event.preventDefault();
         } else if (dragEnabled) {
-          dragPosition.x -= dialogDragStep;
+          dragPosition.x -= resizeShiftStep;
           this.updateTransform();
           this.triggerInteractModifiers();
           event.preventDefault();
@@ -303,15 +269,15 @@ class Dialog extends LitElement {
       case "ArrowRight":
         if (shiftKey && resizable && transitionEl) {
           this.updateSize({
-            size: this.getTransitionElDOMRect().width + dialogResizeStep,
+            size: this.getTransitionElDOMRect().width + resizeShiftStep,
             type: "inlineSize"
           });
-          resizePosition.right += dialogResizeStep;
+          resizePosition.right += resizeShiftStep;
           this.updateTransform();
           this.triggerInteractModifiers();
           event.preventDefault();
         } else if (dragEnabled) {
-          dragPosition.x += dialogDragStep;
+          dragPosition.x += resizeShiftStep;
           this.updateTransform();
           this.triggerInteractModifiers();
           event.preventDefault();
@@ -348,7 +314,7 @@ class Dialog extends LitElement {
     this.resizePosition = { ...initialResizePosition };
     this.updateTransform();
   }
-  setupInteractions() {
+  async setupInteractions() {
     this.cleanupInteractions();
     const { el, transitionEl, resizable, dragEnabled, resizePosition, dragPosition } = this;
     if (!transitionEl || !this.open) {
@@ -358,6 +324,7 @@ class Dialog extends LitElement {
       this.interaction = interact(transitionEl, { context: el.ownerDocument });
     }
     if (resizable) {
+      await this.el.componentOnReady();
       const { minInlineSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(transitionEl);
       this.interaction.resizable({
         edges: {
@@ -369,12 +336,12 @@ class Dialog extends LitElement {
         modifiers: [
           interact.modifiers.restrictSize({
             min: {
-              width: isPixelValue(minInlineSize) ? parseInt(minInlineSize) : 0,
-              height: isPixelValue(minBlockSize) ? parseInt(minBlockSize) : 0
+              width: getStylePixelValue(minInlineSize),
+              height: getStylePixelValue(minBlockSize)
             },
             max: {
-              width: isPixelValue(maxInlineSize) ? parseInt(maxInlineSize) : window.innerWidth,
-              height: isPixelValue(maxBlockSize) ? parseInt(maxBlockSize) : window.innerHeight
+              width: getStylePixelValue(maxInlineSize) || window.innerWidth,
+              height: getStylePixelValue(maxBlockSize) || window.innerHeight
             }
           }),
           interact.modifiers.restrict({
@@ -470,9 +437,7 @@ class Dialog extends LitElement {
   }
   async openDialog() {
     await this.componentOnReady();
-    this.el.addEventListener("calciteDialogOpen", this.openEnd);
     this.opened = true;
-    this.updateOverflowHiddenClass();
   }
   handleOutsideClose() {
     if (this.outsideCloseDisabled) {
@@ -493,32 +458,11 @@ class Dialog extends LitElement {
         return;
       }
     }
-    totalOpenDialogs--;
     this.opened = false;
-    this.updateOverflowHiddenClass();
-  }
-  updateOverflowHiddenClass() {
-    if (this.opened && !this.embedded && this.modal) {
-      this.addOverflowHiddenClass();
-    } else {
-      this.removeOverflowHiddenClass();
-    }
-  }
-  addOverflowHiddenClass() {
-    if (totalOpenDialogs === 0) {
-      initialDocumentOverflowStyle = document.documentElement.style.overflow;
-    }
-    totalOpenDialogs++;
-    document.documentElement.style.setProperty("overflow", "hidden");
-  }
-  removeOverflowHiddenClass() {
-    document.documentElement.style.setProperty("overflow", initialDocumentOverflowStyle);
   }
   handleMutationObserver() {
     this.focusTrap.updateContainerElements();
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { assistiveText, description, heading, opened } = this;
     return html`<div class=${safeClassMap({

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

@@ -26,7 +26,5 @@ export declare const SLOTS: {
     footerEnd: string;
 };
 export declare const dialogPlacements: DialogPlacement[];
-export declare const dialogResizeStep = 25;
-export declare const dialogDragStep = 25;
 export declare const initialDragPosition: DialogDragPosition;
 export declare const initialResizePosition: DialogResizePosition;

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

@@ -8,23 +8,31 @@ import { Scale, Width } from '../interfaces';
 import { DropdownItem } from '../calcite-dropdown-item/customElement.js';
 
 /**
- * @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  - 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`.
  */
 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. */
+    /**
+     * 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;
     /**
@@ -33,9 +41,17 @@ export declare class Dropdown extends LitElement {
      * @default 0
      */
     offsetDistance: number;
-    /** Offset the position of the component along the `referenceElement`. */
+    /**
+     * Offset the position of the component along the `referenceElement`.
+     *
+     * @default 0
+     */
     offsetSkidding: number;
-    /** When `true`, displays and positions the component. */
+    /**
+     * When `true`, displays and positions the component.
+     *
+     * @default false
+     */
     open: boolean;
     /**
      * Determines the type of positioning to use for the overlaid content.
@@ -43,6 +59,8 @@ export declare class Dropdown extends LitElement {
      * 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;
     /**
@@ -51,15 +69,19 @@ export declare class Dropdown extends LitElement {
      * @default "bottom-start"
      */
     placement: MenuPlacement;
-    /** Specifies the size of the component. */
-    scale: Scale;
     /**
-     * Specifies the component's selected items.
+     * Specifies the size of the component.
      *
-     * @readonly
+     * @default "m"
      */
+    scale: Scale;
+    /** Specifies the component's selected items. */
     readonly selectedItems: HTMLCalciteDropdownItemElement[];
-    /** Specifies the action to open the component from the container element. */
+    /**
+     * Specifies the action to open the component from the container element.
+     *
+     * @default "click"
+     */
     type: "hover" | "click";
     /**
      * Specifies the width of the component.
@@ -78,13 +100,13 @@ export declare class Dropdown extends LitElement {
     /** Sets focus on the component's first focusable element. */
     setFocus(): Promise<void>;
     /** Fires when the component is requested to be closed and before the closing transition begins. */
-    readonly calciteDropdownBeforeClose: TargetedEvent<this, undefined>;
+    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, undefined>;
+    readonly calciteDropdownBeforeOpen: TargetedEvent<this, void>;
     /** Fires when the component is closed and animation is complete. */
-    readonly calciteDropdownClose: TargetedEvent<this, undefined>;
+    readonly calciteDropdownClose: TargetedEvent<this, void>;
     /** Fires when the component is open and animation is complete. */
-    readonly calciteDropdownOpen: TargetedEvent<this, undefined>;
+    readonly calciteDropdownOpen: TargetedEvent<this, void>;
     /** Fires when a `calcite-dropdown-item`'s selection changes. */
-    readonly calciteDropdownSelect: TargetedEvent<this, undefined>;
+    readonly calciteDropdownSelect: TargetedEvent<this, void>;
 }

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

@@ -1,6 +1,6 @@
 /*! 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.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit-html/directives/ref.js";
 import { html } from "lit";
@@ -24,8 +24,6 @@ const CSS = {
 };
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}.calcite-dropdown-wrapper{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}.calcite-dropdown-wrapper .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset,left,opacity;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim{left:5px}.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}.calcite-dropdown-content{max-height:45vh;width:auto;overflow-y:auto;overflow-x:hidden;inline-size:var(--calcite-dropdown-width, var(--calcite-internal-dropdown-width));background-color:var(--calcite-dropdown-background-color, var(--calcite-color-foreground-1))}.calcite-trigger-container{position:relative;display:flex;height:100%;flex:1 1 auto;word-wrap:break-word;word-break:break-word}.width-s{--calcite-internal-dropdown-width: 12rem}.width-m{--calcite-internal-dropdown-width: 14rem}.width-l{--calcite-internal-dropdown-width: 16rem}@media (forced-colors: active){:host([open]) .calcite-dropdown-wrapper{border:var(--calcite-border-width-sm) solid canvasText}}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class Dropdown extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.focusLastDropdownItem = false;
@@ -33,10 +31,6 @@ class Dropdown extends LitElement {
     this.guid = `calcite-dropdown-${guid()}`;
     this.items = [];
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
-    this.onOpenEnd = () => {
-      this.focusOnFirstActiveOrDefaultItem();
-      this.el.removeEventListener("calciteDropdownOpen", this.onOpenEnd);
-    };
     this.transitionProp = "opacity";
     this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
     this.closeOnSelectDisabled = false;
@@ -64,7 +58,7 @@ class Dropdown extends LitElement {
     this.listen("calciteInternalDropdownItemSelect", this.handleItemSelect);
   }
   static {
-    this.properties = { closeOnSelectDisabled: [7, { reflect: true, type: Boolean }], disabled: [7, { reflect: true, type: Boolean }], flipPlacements: [0, { attribute: false }], maxItems: [11, { reflect: true, type: Number }], offsetDistance: [11, { type: Number, reflect: true }], offsetSkidding: [11, { reflect: true, type: Number }], open: [7, { reflect: true, type: Boolean }], overlayPositioning: [3, { reflect: true }], placement: [3, { reflect: true }], scale: [3, { reflect: true }], selectedItems: [0, { attribute: false }], type: [3, { reflect: true }], widthScale: [3, { reflect: true }], width: [3, { reflect: true }] };
+    this.properties = { closeOnSelectDisabled: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], maxItems: [11, {}, { reflect: true, type: Number }], offsetDistance: [11, {}, { type: Number, reflect: true }], offsetSkidding: [11, {}, { reflect: true, type: Number }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], type: [3, {}, { reflect: true }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -72,13 +66,6 @@ class Dropdown extends LitElement {
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /**
-   * Updates the position of the component.
-   *
-   * @param delayed
-   */
   async reposition(delayed = false) {
     const { filteredFlipPlacements, floatingEl, offsetDistance, offsetSkidding, overlayPositioning, placement, referenceEl } = this;
     return reposition(this, {
@@ -92,7 +79,6 @@ class Dropdown extends LitElement {
       type: "menu"
     }, delayed);
   }
-  /** Sets focus on the component's first focusable element. */
   async setFocus() {
     await componentFocusable(this);
     focusFirstTabbable(this.referenceEl);
@@ -137,8 +123,6 @@ class Dropdown extends LitElement {
     this.resizeObserver?.disconnect();
     disconnectFloatingUI(this);
   }
-  // #endregion
-  // #region Private Methods
   openHandler() {
     onToggleOpenCloseComponent(this);
     if (this.disabled) {
@@ -285,7 +269,8 @@ class Dropdown extends LitElement {
   onBeforeOpen() {
     this.calciteDropdownBeforeOpen.emit();
   }
-  onOpen() {
+  async onOpen() {
+    this.focusOnFirstActiveOrDefaultItem();
     this.calciteDropdownOpen.emit();
   }
   onBeforeClose() {
@@ -331,7 +316,6 @@ class Dropdown extends LitElement {
       event.preventDefault();
       this.focusLastDropdownItem = key === "ArrowUp";
       this.open = true;
-      this.el.addEventListener("calciteDropdownOpen", this.onOpenEnd);
     }
   }
   updateSelectedItems() {
@@ -363,17 +347,12 @@ class Dropdown extends LitElement {
   }
   toggleDropdown() {
     this.open = !this.open;
-    if (this.open) {
-      this.el.addEventListener("calciteDropdownOpen", this.onOpenEnd);
-    }
   }
   updateTabIndexOfItems(target) {
     this.items.forEach((item) => {
       item.tabIndex = target !== item ? -1 : 0;
     });
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { open, guid: guid2 } = this;
     return InteractiveContainer({ disabled: this.disabled, children: html`<div class="calcite-trigger-container" .id=${`${guid2}-menubutton`} @click=${this.toggleDropdown} @keydown=${this.keyDownHandler} ${ref(this.setReferenceEl)}><slot aria-controls=${`${guid2}-menu`} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.dropdownTrigger} @slotchange=${this.updateTriggers}></slot></div><div .ariaHidden=${!open} class=${safeClassMap({

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

@@ -4,7 +4,7 @@ import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/
 import { Scale, SelectionMode } from '../interfaces';
 import { RequestedItem } from './interfaces';
 
-/** @slot - A slot for adding `calcite-dropdown-item`s. */
+/** @slot  - A slot for adding `calcite-dropdown-item`s. */
 export declare class DropdownGroup extends LitElement {
     /** Specifies and displays a group title. */
     groupTitle: string;
@@ -12,6 +12,7 @@ export declare class DropdownGroup extends LitElement {
      * The position of the group in the dropdown menu.
      *
      * @internal
+     * @default -1
      */
     position: number;
     /**
@@ -22,6 +23,8 @@ export declare class DropdownGroup extends LitElement {
      * `"single"` allows only one selection, and
      *
      * `"none"` does not allow any selections.
+     *
+     * @default "single"
      */
     selectionMode: Extract<"none" | "single" | "multiple", SelectionMode>;
 }

package/dist/components/calcite-dropdown-group/customElement.js

@@ -1,6 +1,6 @@
 /*! 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.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
@@ -13,8 +13,6 @@ const CSS = {
 };
 const styles = css`:host{display:block}.container{text-align:start}.dropdown-title{margin-block-end:-1px;display:block;cursor:default;overflow-wrap:break-word;border-width:0px;border-block-end-width:1px;border-style:solid;font-weight:var(--calcite-font-weight-bold);border-color:var(--calcite-dropdown-group-border-color, var(--calcite-color-border-3));color:var(--calcite-dropdown-group-title-text-color, var(--calcite-color-text-2))}.dropdown-separator{display:block;block-size:1px;background-color:var(--calcite-dropdown-group-border-color, var(--calcite-color-border-3))}:host([scale=s]){font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .dropdown-title{padding:.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .dropdown-title{padding:.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .dropdown-title{padding:1rem}:host([hidden]){display:none}[hidden]{display:none}`;
 class DropdownGroup extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
@@ -25,7 +23,7 @@ class DropdownGroup extends LitElement {
     this.listen("calciteInternalDropdownItemSelect", this.updateActiveItemOnChange);
   }
   static {
-    this.properties = { groupTitle: [3, { reflect: true }], position: [9, { type: Number }], scale: [3, { reflect: true }], selectionMode: [3, { reflect: true }] };
+    this.properties = { groupTitle: [3, {}, { reflect: true }], position: [9, {}, { type: Number }], scale: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -47,8 +45,6 @@ class DropdownGroup extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
   }
-  // #endregion
-  // #region Private Methods
   updateActiveItemOnChange(event) {
     this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
     this.requestedDropdownItem = event.detail.requestedDropdownItem;
@@ -60,8 +56,6 @@ class DropdownGroup extends LitElement {
   updateItems() {
     Array.from(this.el.querySelectorAll("calcite-dropdown-item")).forEach((item) => item.selectionMode = this.selectionMode);
   }
-  // #endregion
-  // #region Rendering
   render() {
     const groupTitle = this.groupTitle ? html`<span aria-hidden=true class=${safeClassMap(CSS.title)}>${this.groupTitle}</span>` : null;
     const dropdownSeparator = this.position > 0 ? html`<div class=${safeClassMap(CSS.separator)} role=separator></div>` : null;