@esri/calcite-components 5.0.0-next.8 → 5.0.0-next.81

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

@@ -1,15 +1,28 @@
+/* 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.81 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { S as SLOTS } from "../../chunks/resources2.js";
-import { a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { queryAssignedElements } from "lit/decorators.js";
+import { S as SLOTS } from "../../chunks/resources.js";
+import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { I as ICONS, S as SLOTS$1, C as CSS } from "../../chunks/resources8.js";
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:flex;flex-direction:column;padding:0;background-color:transparent;border-color:var(--calcite-action-group-border-color, var(--calcite-color-border-3));border-style:solid;border-width:0}.container{display:flex;flex-grow:1;flex-direction:column}:host([columns="1"]){--calcite-internal-action-group-columns: 1}:host([columns="2"]){--calcite-internal-action-group-columns: 2}:host([columns="3"]){--calcite-internal-action-group-columns: 3}:host([columns="4"]){--calcite-internal-action-group-columns: 4}:host([columns="5"]){--calcite-internal-action-group-columns: 5}:host([columns="6"]){--calcite-internal-action-group-columns: 6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]),:host([layout=horizontal]) .container{flex-direction:row}:host([layout=grid]){display:grid}:host([layout=grid]) .container{display:grid;place-content:stretch;background-color:transparent;grid-template-columns:repeat(var(--calcite-action-group-columns, var(--calcite-internal-action-group-columns, 3)),auto);gap:var(--calcite-action-group-gap, 1px);padding:var(--calcite-action-group-gap, 1px)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-inline-end:var(--calcite-size-px)}:host([hidden]){display:none}[hidden]{display:none}`;
+import { I as ICONS, S as SLOTS$1, C as CSS } from "../../chunks/resources2.js";
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([scale=s]){--calcite-internal-action-group-gap: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-group-gap: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-group-gap: var(--calcite-spacing-sm-plus)}:host{display:flex;flex-direction:column;padding:0;background-color:transparent;border-color:var(--calcite-action-group-border-color, var(--calcite-color-border-3));border-style:solid;border-width:0;gap:var(--calcite-internal-action-group-gap)}.container{display:flex;flex-grow:1;flex-direction:column;gap:inherit}:host([columns="1"]){--calcite-internal-action-group-columns: 1}:host([columns="2"]){--calcite-internal-action-group-columns: 2}:host([columns="3"]){--calcite-internal-action-group-columns: 3}:host([columns="4"]){--calcite-internal-action-group-columns: 4}:host([columns="5"]){--calcite-internal-action-group-columns: 5}:host([columns="6"]){--calcite-internal-action-group-columns: 6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]),:host([layout=horizontal]) .container{flex-direction:row}:host([layout=grid]){display:grid}:host([layout=grid]) .container{display:grid;place-content:stretch;background-color:transparent;gap:var(--calcite-action-group-gap, var(--calcite-internal-action-group-gap));grid-template-columns:repeat(var(--calcite-action-group-columns, var(--calcite-internal-action-group-columns, 3)),auto);padding:var(--calcite-action-group-gap, 1px)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-inline-end:var(--calcite-size-px)}:host([hidden]){display:none}[hidden]{display:none}`;
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
 class ActionGroup extends LitElement {
   constructor() {
-    super(...arguments);
+    super();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.hasMenuActions = false;
@@ -18,11 +31,14 @@ class ActionGroup extends LitElement {
     this.menuOpen = false;
     this.overlayPositioning = "absolute";
     this.scale = "m";
+    this.selectionMode = "none";
+    this.topLayerDisabled = false;
     this.calciteActionGroupCollapse = createEvent({ cancelable: false });
     this.calciteActionGroupExpand = createEvent({ cancelable: false });
+    this.listen("click", this.handleActionClick);
   }
   static {
-    this.properties = { hasMenuActions: [16, {}, { state: true }], columns: [11, {}, { type: Number, reflect: true }], expanded: [7, {}, { reflect: true, type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
+    this.properties = { hasMenuActions: [16, {}, { state: true }], columns: [11, {}, { type: Number, reflect: true }], expanded: [7, {}, { reflect: true, type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -34,6 +50,13 @@ class ActionGroup extends LitElement {
     return this.focusSetter(() => this.el, options);
   }
   willUpdate(changes) {
+    if (this.hasUpdated || changes.has("selectionMode")) {
+      if (this.selectionMode !== "none") {
+        this.setRoleOnActions();
+      } else if (this.selectionMode === "none") {
+        this.clearActionAriaAttributes();
+      }
+    }
     if (changes.has("expanded")) {
       if (this.hasUpdated || this.expanded !== false) {
         this.menuOpen = false;
@@ -47,20 +70,83 @@ class ActionGroup extends LitElement {
       }
     }
   }
+  setActiveAction(index, active) {
+    if (this.selectionMode === "multiple") {
+      active.active = !active.active;
+      this.setActionAriaChecked(active, active.active);
+      return;
+    }
+    if (this.selectionMode === "single") {
+      this.actions.forEach((action, i) => {
+        action.active = i === index && !action.active;
+        this.setActionAriaChecked(action, action.active);
+      });
+      return;
+    }
+    if (this.selectionMode === "single-persist") {
+      if (!this.actions[index].active) {
+        this.actions.forEach((action, i) => {
+          action.active = i === index;
+          this.setActionAriaChecked(action, action.active);
+        });
+      }
+      return;
+    }
+  }
   setMenuOpen(event) {
     this.menuOpen = !!event.currentTarget.open;
   }
   handleMenuActionsSlotChange(event) {
     this.hasMenuActions = slotChangeHasAssignedElement(event);
   }
+  handleActionClick(event) {
+    const target = event.target;
+    if (!target) {
+      return;
+    }
+    const index = this.actions.indexOf(target);
+    if (index === -1 || this.selectionMode === "none") {
+      return;
+    }
+    this.setActiveAction(index, target);
+  }
+  setRoleOnActions() {
+    this.actions.forEach((action) => {
+      action.aria = {
+        ...action.aria,
+        role: this.selectionMode === "single" || this.selectionMode === "single-persist" ? "radio" : "checkbox"
+      };
+      this.setActionAriaChecked(action, action.active);
+    });
+  }
+  setActionAriaChecked(action, checked) {
+    action.aria = {
+      ...action.aria,
+      checked: checked ? "true" : "false"
+    };
+  }
+  clearActionAriaAttributes() {
+    if (this.selectionMode === "none") {
+      this.actions.forEach((action) => {
+        if (action.aria) {
+          action.aria.checked = void 0;
+          action.aria.role = void 0;
+          action.aria = { ...action.aria };
+        }
+      });
+    }
+  }
   renderMenu() {
     const { expanded, menuOpen, scale, layout, messages, overlayPositioning, hasMenuActions, menuFlipPlacements, menuPlacement } = this;
-    return html`<calcite-action-menu .expanded=${expanded} .flipPlacements=${menuFlipPlacements ?? (layout === "horizontal" ? ["top", "bottom"] : ["left", "right"])} .hidden=${!hasMenuActions} .label=${messages.more} @calciteActionMenuOpen=${this.setMenuOpen} .open=${menuOpen} .overlayPositioning=${overlayPositioning} .placement=${menuPlacement ?? (layout === "horizontal" ? "bottom-start" : "leading-start")} .scale=${scale}><calcite-action .aria=${{ expanded }} .icon=${ICONS.menu} .scale=${scale} slot=${SLOTS.trigger} .text=${messages.more} .textEnabled=${expanded}></calcite-action><slot name=${SLOTS$1.menuActions} @slotchange=${this.handleMenuActionsSlotChange}></slot><slot name=${SLOTS$1.menuTooltip} slot=${SLOTS.tooltip}></slot></calcite-action-menu>`;
+    return html`<calcite-action-menu .expanded=${expanded} .flipPlacements=${menuFlipPlacements ?? (layout === "horizontal" ? ["top", "bottom"] : ["left", "right"])} .hidden=${!hasMenuActions} .label=${messages.more} @calciteActionMenuOpen=${this.setMenuOpen} .open=${menuOpen} .overlayPositioning=${overlayPositioning} .placement=${menuPlacement ?? (layout === "horizontal" ? "bottom-start" : "leading-start")} .scale=${scale} .topLayerDisabled=${this.topLayerDisabled}><calcite-action .aria=${{ expanded }} .icon=${ICONS.menu} .scale=${scale} slot=${SLOTS.trigger} .text=${messages.more} .textEnabled=${expanded}></calcite-action><slot name=${SLOTS$1.menuActions} @slotchange=${this.handleMenuActionsSlotChange}></slot><slot name=${SLOTS$1.menuTooltip} slot=${SLOTS.tooltip}></slot></calcite-action-menu>`;
   }
   render() {
-    return html`<div .ariaLabel=${this.label} class=${safeClassMap(CSS.container)} role=group><slot></slot>${this.renderMenu()}</div>`;
+    return html`<div .ariaLabel=${this.label} class=${safeClassMap(CSS.container)} .role=${this.selectionMode === "multiple" || this.selectionMode === "none" ? "group" : "radiogroup"}><slot></slot>${this.renderMenu()}</div>`;
   }
 }
+__decorateClass([
+  queryAssignedElements({ selector: "calcite-action" })
+], ActionGroup.prototype, "actions");
 customElement("calcite-action-group", ActionGroup);
 export {
   ActionGroup

package/dist/components/calcite-action-group/index.d.ts

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

package/dist/components/calcite-action-group/interfaces.d.ts

@@ -1 +1 @@
-export type Columns = 1 | 2 | 3 | 4 | 5 | 6;
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6;

package/dist/components/calcite-action-menu/customElement.d.ts

@@ -1,75 +1,88 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { FlipPlacement, LogicalPlacement, OverlayPositioning } from '../../utils/floating-ui';
-import { Appearance, Scale } from '../interfaces';
-import { Action } from '../calcite-action/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
+import type { Appearance, Scale } from "../interfaces.js";
 
 /**
+ * @cssproperty [--calcite-action-menu-items-space] - Specifies the space between actions in the menu.
  * @slot  - A slot for adding `calcite-action`s.
  * @slot [trigger] - A slot for adding a `calcite-action` to trigger opening the menu.
  * @slot [tooltip] - A slot for adding a tooltip for the menu.
  */
-export declare class ActionMenu extends LitElement {
-    /**
-     * Specifies the appearance of the component.
-     *
-     * @default "solid"
-     */
-    appearance: Extract<"solid" | "transparent", Appearance>;
-    /**
-     * When `true`, expands the component and its contents.
-     *
-     * @default false
-     */
-    expanded: boolean;
-    /** Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available. */
-    flipPlacements: FlipPlacement[];
-    /**
-     * Specifies the text string for the component.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * When `true`, the component is open.
-     *
-     * @default false
-     */
-    get open(): boolean;
-    set open(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 `referenceElement`.
-     *
-     * @default "auto"
-     */
-    placement: LogicalPlacement;
-    /**
-     * Specifies the size of the component's trigger `calcite-action`.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * Sets focus on the component.
-     *
-     * @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's content area is collapsed. */
-    readonly calciteActionMenuCollapse: TargetedEvent<this, void>;
-    /** Fires when the component's content area is expanded. */
-    readonly calciteActionMenuExpand: TargetedEvent<this, void>;
-    /** Fires when the `open` property is toggled. */
-    readonly calciteActionMenuOpen: TargetedEvent<this, void>;
-}
+export abstract class ActionMenu extends LitElement {
+  /**
+   * Specifies the appearance of the component.
+   *
+   * @default "solid"
+   */
+  accessor appearance: Extract<"solid" | "transparent", Appearance>;
+  /**
+   * When `true`, expands the component and its contents.
+   *
+   * @default false
+   */
+  accessor expanded: boolean;
+  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[];
+  /**
+   * Specifies an accessible label for the component.
+   *
+   * @required
+   */
+  accessor label: string;
+  /**
+   * When `true`, the component is open.
+   *
+   * @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 where the component will be positioned relative to the `referenceElement`.
+   *
+   * @default "auto"
+   */
+  accessor placement: LogicalPlacement;
+  /**
+   * Specifies the size of the component's trigger `calcite-action`.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * 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;
+  /**
+   * Sets focus on the component.
+   *
+   * @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's content area is collapsed. */
+  readonly calciteActionMenuCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's content area is expanded. */
+  readonly calciteActionMenuExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the `open` property is toggled. */
+  readonly calciteActionMenuOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteActionMenuCollapse: ActionMenu["calciteActionMenuCollapse"]["detail"];
+    calciteActionMenuExpand: ActionMenu["calciteActionMenuExpand"]["detail"];
+    calciteActionMenuOpen: ActionMenu["calciteActionMenuOpen"]["detail"];
+  };
+}

package/dist/components/calcite-action-menu/customElement.js

@@ -1,3 +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.
+v5.0.0-next.81 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { css, html, nothing } from "lit";
@@ -7,8 +10,8 @@ import { t as toAriaBoolean } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { I as IDS, S as SLOTS, a as ICONS, C as CSS } from "../../chunks/resources2.js";
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-1)}::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm)}.default-trigger{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}.menu{display:flex;max-block-size:45vh;flex-direction:column;flex-wrap:nowrap;overflow-y:auto;overflow-x:hidden;outline:2px solid transparent;outline-offset:2px;gap:var(--calcite-action-menu-items-space, 0)}:host([hidden]){display:none}[hidden]{display:none}`;
+import { I as IDS, S as SLOTS, a as ICONS, C as CSS } from "../../chunks/resources.js";
+const styles = css`:host([scale=s]){--calcite-internal-action-menu-gap: var(--calcite-action-menu-items-space, var(--calcite-spacing-xxs));--calcite-internal-action-menu-padding: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-menu-gap: var(--calcite-action-menu-items-space, var(--calcite-spacing-sm));--calcite-internal-action-menu-padding: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-menu-gap: var(--calcite-action-menu-items-space, var(--calcite-spacing-sm-plus));--calcite-internal-action-menu-padding: var(--calcite-spacing-sm-plus)}:host{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-relative-lg)}::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm);padding-block-end:var(--calcite-internal-action-menu-padding)}.default-trigger{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}.menu{display:flex;max-block-size:45vh;flex-direction:column;flex-wrap:nowrap;overflow-y:auto;overflow-x:hidden;outline:2px solid transparent;outline-offset:2px;gap:var(--calcite-internal-action-menu-gap);padding:var(--calcite-internal-action-menu-padding)}:host([hidden]){display:none}[hidden]{display:none}`;
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
 class ActionMenu extends LitElement {
   constructor() {
@@ -62,18 +65,23 @@ class ActionMenu extends LitElement {
       action.activeDescendant = index === activeMenuItemIndex;
     };
     this.focusSetter = useSetFocus()(this);
+    this.actionMouseDownHandler = (event) => {
+      event.stopPropagation();
+      this.activeMenuItemIndex = this.actionElements?.findIndex((action) => action === event.target);
+    };
     this.activeMenuItemIndex = -1;
     this.appearance = "solid";
     this.expanded = false;
     this.overlayPositioning = "absolute";
     this.placement = "auto";
+    this.topLayerDisabled = false;
     this.scale = "m";
     this.calciteActionMenuCollapse = createEvent({ cancelable: false });
     this.calciteActionMenuExpand = createEvent({ cancelable: false });
     this.calciteActionMenuOpen = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { activeMenuItemIndex: [16, {}, { state: true }], menuButtonEl: [16, {}, { state: true }], appearance: [3, {}, { reflect: true }], expanded: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], label: 1, open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
+    this.properties = { activeMenuItemIndex: [16, {}, { state: true }], menuButtonEl: [16, {}, { state: true }], appearance: [3, {}, { reflect: true }], expanded: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], label: 1, open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -94,6 +102,7 @@ class ActionMenu extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.connectMenuButtonEl();
+    this.el.addEventListener("calciteInternalActionMouseDown", this.actionMouseDownHandler);
   }
   willUpdate(changes) {
     if (changes.has("expanded") && (this.hasUpdated || this.expanded !== false)) {
@@ -113,6 +122,7 @@ class ActionMenu extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.disconnectMenuButtonEl();
+    this.el.removeEventListener("calciteInternalActionMouseDown", this.actionMouseDownHandler);
   }
   expandedHandler() {
     this.open = false;
@@ -187,9 +197,11 @@ class ActionMenu extends LitElement {
     this.popoverEl = el;
     el.open = this.open;
   }
-  handleCalciteActionClick() {
-    this.open = false;
-    this.setFocus();
+  handleCalciteActionClick(event) {
+    if (this.actionElements?.some((action) => event.composedPath().includes(action))) {
+      this.open = false;
+      this.setFocus();
+    }
   }
   updateTooltip(event) {
     const tooltips = event.target.assignedElements({
@@ -276,7 +288,7 @@ class ActionMenu extends LitElement {
     const { actionElements, activeMenuItemIndex, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements } = this;
     const activeAction = actionElements[activeMenuItemIndex];
     const activeDescendantId = activeAction?.id || null;
-    return html`<calcite-popover auto-close .flipPlacements=${flipPlacements} focus-trap-disabled .label=${label} offset-distance=0 @calcitePopoverClose=${this.handlePopoverClose} @calcitePopoverOpen=${this.handlePopoverOpen} .overlayPositioning=${overlayPositioning} .placement=${placement} pointer-disabled .referenceElement=${menuButtonEl} trigger-disabled ${ref(this.setPopoverEl)}><div aria-activedescendant=${activeDescendantId ?? nothing} aria-labelledby=${menuButtonEl?.id ?? nothing} class=${safeClassMap(CSS.menu)} id=${menuId ?? nothing} @click=${this.handleCalciteActionClick} role=menu tabindex=-1><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></calcite-popover>`;
+    return html`<calcite-popover auto-close .flipPlacements=${flipPlacements} focus-trap-disabled .label=${label} offset-distance=0 @calcitePopoverClose=${this.handlePopoverClose} @calcitePopoverOpen=${this.handlePopoverOpen} .overlayPositioning=${overlayPositioning} .placement=${placement} pointer-disabled .referenceElement=${menuButtonEl} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} trigger-disabled ${ref(this.setPopoverEl)}><div aria-activedescendant=${activeDescendantId ?? nothing} aria-labelledby=${menuButtonEl?.id ?? nothing} class=${safeClassMap(CSS.menu)} id=${menuId ?? nothing} @click=${this.handleCalciteActionClick} role=menu tabindex=-1><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></calcite-popover>`;
   }
   render() {
     return html`${this.renderMenuButton()}${this.renderMenuItems()}<slot name=${SLOTS.tooltip} @slotchange=${this.updateTooltip}></slot>`;

package/dist/components/calcite-action-menu/index.d.ts

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

package/dist/components/calcite-action-pad/customElement.d.ts

@@ -1,84 +1,93 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Layout, Position, Scale, SelectionAppearance } from '../interfaces';
-import { OverlayPositioning } from '../../utils/floating-ui';
-import { Tooltip } from '../calcite-tooltip/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Layout, Position, Scale, SelectionAppearance } from "../interfaces.js";
+import type { OverlayPositioning } from "../../utils/floating-ui.js";
 
 /**
  * @deprecated in v5.0.0, removal target v6.0.0 - Use the `calcite-action-bar` component instead.
+ * @cssproperty [--calcite-action-pad-corner-radius] - Specifies the component's border radius.
+ * @cssproperty [--calcite-action-pad-expanded-max-width] - When `expanded` and `layout` is `"vertical"`, specifies the component's maximum width.
+ * @cssproperty [--calcite-action-pad-items-space] - Specifies the component's space between slotted components.
  * @slot  - A slot for adding `calcite-action`s to the component.
  * @slot [expand-tooltip] - A slot to set the `calcite-tooltip` for the expand toggle.
  */
-export declare class ActionPad extends LitElement {
-    /** Specifies the accessible label for the last `calcite-action-group`. */
-    actionsEndGroupLabel: string;
-    /**
-     * When `true`, the expand-toggling behavior is disabled.
-     *
-     * @default false
-     */
-    expandDisabled: boolean;
-    /**
-     * When `true`, expands the component and its contents.
-     *
-     * @default false
-     */
-    expanded: boolean;
-    /**
-     * Indicates the layout of the component.
-     *
-     * @default "vertical"
-     */
-    layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * 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;
-    /** Arranges the component depending on the element's `dir` property. */
-    position: Extract<"start" | "end", Position>;
-    /**
-     * Specifies the size of the expand `calcite-action`.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * Specifies the selection appearance of the component
-     *
-     * @default "neutral"
-     */
-    selectionAppearance: Extract<"neutral" | "highlight", SelectionAppearance>;
-    /**
-     * 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's content area is collapsed. */
-    readonly calciteActionPadCollapse: TargetedEvent<this, void>;
-    /** Fires when the component's content area is expanded. */
-    readonly calciteActionPadExpand: TargetedEvent<this, void>;
-    /** Fires when the `expanded` property is toggled. */
-    readonly calciteActionPadToggle: TargetedEvent<this, void>;
-    private messages: Partial<{
-        expand: string;
-        collapse: string;
-        expandLabel: string;
-        collapseLabel: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        expand: string;
-        collapse: string;
-        expandLabel: string;
-        collapseLabel: string;
-    }>;
-}
+export abstract class ActionPad extends LitElement {
+  /** Specifies the accessible label for the last `calcite-action-group`. */
+  accessor actionsEndGroupLabel: string;
+  /**
+   * When `true`, the expand-toggling behavior is disabled.
+   *
+   * @default false
+   */
+  accessor expandDisabled: boolean;
+  /**
+   * When `true`, expands the component and its contents.
+   *
+   * @default false
+   */
+  accessor expanded: boolean;
+  /**
+   * Specifies the layout of the component.
+   *
+   * @default "vertical"
+   */
+  accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      expand?: string;
+      collapse?: string;
+      expandLabel?: string;
+      collapseLabel?: string;
+  };
+  /**
+   * 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;
+  /** Specifies the position of the component depending on the element's `dir` property. */
+  accessor position: Extract<"start" | "end", Position>;
+  /**
+   * Specifies the size of the expand `calcite-action`.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * Specifies the selection appearance of the component
+   *
+   * @default "neutral"
+   */
+  accessor selectionAppearance: Extract<"neutral" | "highlight", SelectionAppearance>;
+  /**
+   * 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;
+  /**
+   * 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's content area is collapsed. */
+  readonly calciteActionPadCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's content area is expanded. */
+  readonly calciteActionPadExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the `expanded` property is toggled. */
+  readonly calciteActionPadToggle: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteActionPadCollapse: ActionPad["calciteActionPadCollapse"]["detail"];
+    calciteActionPadExpand: ActionPad["calciteActionPadExpand"]["detail"];
+    calciteActionPadToggle: ActionPad["calciteActionPadToggle"]["detail"];
+  };
+}