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

package/dist/components/calcite-action-bar/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 { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
 import { debounce } from "lodash-es";
 import { html } from "lit";
@@ -8,10 +8,37 @@ import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { h as focusFirstTabbable, a as slotChangeHasAssignedElement, s as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { c as componentFocusable } from "../../chunks/component.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { q as queryActions, g as geActionDimensions, o as overflowActions, t as toggleChildActionText, E as ExpandToggle, a as getOverflowCount } from "../../chunks/ExpandToggle.js";
+import { o as overflowActions, q as queryActions, t as toggleChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { css } from "@lit/reactive-element/css-tag.js";
+const calculateMaxItems = ({
+  bufferSize = 0,
+  containerSize,
+  itemSizes
+}) => {
+  const maxSize = containerSize - bufferSize;
+  let breakpoint = itemSizes.length;
+  let sizeSum = 0;
+  for (const [index, size] of itemSizes.entries()) {
+    sizeSum = sizeSum + size;
+    if (sizeSum > maxSize) {
+      breakpoint = index;
+      break;
+    } else {
+      continue;
+    }
+  }
+  return breakpoint;
+};
+const getOverflowCount = ({
+  bufferSize = 0,
+  containerSize,
+  itemSizes
+}) => {
+  return Math.max(itemSizes.length - calculateMaxItems({ bufferSize, itemSizes, containerSize }), 0);
+};
 const CSS = {
+  container: "container",
   actionGroupEnd: "action-group--end"
 };
 const SLOTS = {
@@ -19,31 +46,24 @@ const SLOTS = {
   bottomActions: "bottom-actions",
   expandTooltip: "expand-tooltip"
 };
-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{pointer-events:auto;display:inline-flex;align-self:stretch;gap:var(--calcite-action-bar-items-space, 0)}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]):host([overflow-actions-disabled]){overflow-y:auto}:host([layout=vertical]):host([expanded]){max-inline-size:var(--calcite-action-bar-expanded-max-width, auto)}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm)}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]):host([overflow-actions-disabled]){overflow-x:auto}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=horizontal]) ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:var(--calcite-border-width-sm)}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}`;
+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{display:inline-flex;align-self:stretch;background:transparent}.container{display:inline-flex;flex:1 1 auto;flex-direction:column;gap:var(--calcite-action-bar-items-space, 0);background-color:var(--calcite-action-bar-background-color, var(--calcite-color-foreground-1))}@keyframes in{0%{opacity:0}to{opacity:1}}:host([floating]) .container{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;overflow:hidden;border-radius:var(--calcite-action-bar-corner-radius, var(--calcite-corner-radius-round));--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--calcite-action-bar-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow))}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]):host([overflow-actions-disabled]) .container{overflow-y:auto}:host([layout=vertical]):host([expanded]) .container{max-inline-size:var(--calcite-action-bar-expanded-max-width, auto)}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm)}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]):host([overflow-actions-disabled]) .container{overflow-x:auto}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=horizontal]) ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:var(--calcite-border-width-sm)}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}`;
 class ActionBar extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.mutationObserver = createObserver("mutation", () => this.mutationObserverHandler());
     this.resize = debounce(({ width, height }) => {
-      const { el, expanded, expandDisabled, layout, overflowActionsDisabled, actionGroups } = this;
+      const { expanded, expandDisabled, layout, overflowActionsDisabled, actionGroups } = this;
       if (overflowActionsDisabled || layout === "vertical" && !height || layout === "horizontal" && !width) {
         return;
       }
-      const actions = queryActions(el);
-      const actionCount = expandDisabled ? actions.length : actions.length + 1;
+      const itemSizes = this.getItemSizes();
       this.updateGroups();
       const groupCount = this.hasActionsEnd || this.hasBottomActions || !expandDisabled ? actionGroups.length + 1 : actionGroups.length;
-      const { actionHeight, actionWidth } = geActionDimensions(actions);
       const overflowCount = getOverflowCount({
-        layout,
-        actionCount,
-        actionHeight,
-        actionWidth,
-        height,
-        width,
-        groupCount
+        bufferSize: groupCount,
+        // 1px border for each group
+        containerSize: layout === "horizontal" ? width : height,
+        itemSizes
       });
       overflowActions({
         actionGroups,
@@ -60,12 +80,13 @@ class ActionBar extends LitElement {
       this.expanded = !this.expanded;
       this.calciteActionBarToggle.emit();
     };
+    this.messages = useT9n();
     this.hasActionsEnd = false;
     this.hasBottomActions = false;
+    this.floating = false;
     this.expandDisabled = false;
     this.expanded = false;
     this.layout = "vertical";
-    this.messages = useT9n();
     this.overflowActionsDisabled = false;
     this.overlayPositioning = "absolute";
     this.scale = "m";
@@ -73,22 +94,14 @@ class ActionBar extends LitElement {
     this.listen("calciteActionMenuOpen", this.actionMenuOpenHandler);
   }
   static {
-    this.properties = { expandTooltip: [16, { state: true }], hasActionsEnd: [16, { state: true }], hasBottomActions: [16, { state: true }], actionsEndGroupLabel: 1, expandDisabled: [7, { reflect: true, type: Boolean }], expanded: [7, { reflect: true, type: Boolean }], layout: [3, { reflect: true }], messageOverrides: [0, { attribute: false }], overflowActionsDisabled: [7, { reflect: true, type: Boolean }], overlayPositioning: [3, { reflect: true }], position: [3, { reflect: true }], scale: [3, { reflect: true }] };
+    this.properties = { expandTooltip: [16, {}, { state: true }], hasActionsEnd: [16, {}, { state: true }], hasBottomActions: [16, {}, { state: true }], actionsEndGroupLabel: 1, floating: [7, {}, { reflect: true, type: Boolean }], expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overflowActionsDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /**
-   * Overflows actions that won't fit into menus.
-   *
-   * @private
-   */
   async overflowActions() {
     this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });
   }
-  /** Sets focus on the component's first focusable element. */
   async setFocus() {
     await componentFocusable(this);
     focusFirstTabbable(this.el);
@@ -122,8 +135,16 @@ class ActionBar extends LitElement {
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
   }
-  // #endregion
-  // #region Private Methods
+  getItemSizes() {
+    const { el, layout, expandToggleEl } = this;
+    const actions = queryActions(el);
+    if (expandToggleEl) {
+      actions.push(expandToggleEl);
+    }
+    const clientSize = layout === "horizontal" ? "clientWidth" : "clientHeight";
+    const fallbackSize = Math.max(...actions.map((action) => action[clientSize] || 0));
+    return actions.map((action) => action[clientSize] || fallbackSize);
+  }
   expandedHandler() {
     const { el, expanded } = this;
     toggleChildActionText({ el, expanded });
@@ -157,10 +178,10 @@ class ActionBar extends LitElement {
   updateGroups() {
     const groups = Array.from(this.el.querySelectorAll("calcite-action-group"));
     this.actionGroups = groups;
-    this.setGroupLayout(groups);
-  }
-  setGroupLayout(groups) {
-    groups.forEach((group) => group.layout = this.layout);
+    groups.forEach((group) => {
+      group.layout = this.layout;
+      group.scale = this.scale;
+    });
   }
   handleDefaultSlotChange() {
     this.updateGroups();
@@ -175,15 +196,13 @@ class ActionBar extends LitElement {
     const tooltips = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-tooltip"));
     this.expandTooltip = tooltips[0];
   }
-  // #endregion
-  // #region Rendering
   renderBottomActionGroup() {
     const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages, actionsEndGroupLabel, overlayPositioning } = this;
-    const expandToggleNode = !expandDisabled ? ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, el, expandLabel: messages.expandLabel, expandText: messages.expand, expanded, position, scale, toggle: toggleExpand, tooltip: this.expandTooltip }) : null;
+    const expandToggleNode = !expandDisabled ? ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, el, expandLabel: messages.expandLabel, expandText: messages.expand, expanded, position, ref: (el2) => this.expandToggleEl = el2, scale, toggle: toggleExpand, tooltip: this.expandTooltip }) : null;
     return html`<calcite-action-group class=${safeClassMap(CSS.actionGroupEnd)} .hidden=${this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions)} .label=${actionsEndGroupLabel} .layout=${layout} .overlayPositioning=${overlayPositioning} .scale=${scale}><slot name=${SLOTS.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot><slot name=${SLOTS.bottomActions} @slotchange=${this.handleBottomActionsSlotChange}></slot><slot name=${SLOTS.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${expandToggleNode}</calcite-action-group>`;
   }
   render() {
-    return html`<slot @slotchange=${this.handleDefaultSlotChange}></slot>${this.renderBottomActionGroup()}`;
+    return html`<div class=${safeClassMap(CSS.container)}><slot @slotchange=${this.handleDefaultSlotChange}></slot>${this.renderBottomActionGroup()}</div>`;
   }
 }
 customElement("calcite-action-bar", ActionBar);

package/dist/components/calcite-action-bar/resources.d.ts

@@ -1,4 +1,5 @@
 export declare const CSS: {
+    container: string;
     actionGroupEnd: string;
 };
 export declare const SLOTS: {

package/dist/components/calcite-action-bar/utils.d.ts

@@ -1,19 +1,5 @@
-import { Layout } from '../interfaces';
 import { ActionGroup } from '../calcite-action-group/customElement.js';
 import { Action } from '../calcite-action/customElement.js';
-export declare const geActionDimensions: (actions: HTMLCalciteActionElement[]) => {
-    actionWidth: number;
-    actionHeight: number;
-};
-export declare const getOverflowCount: ({ layout, actionCount, actionWidth, width, actionHeight, height, groupCount, }: {
-    layout: Extract<"horizontal" | "vertical", Layout>;
-    actionCount: number;
-    actionWidth: number;
-    width: number;
-    actionHeight: number;
-    height: number;
-    groupCount: number;
-}) => number;
 export declare const queryActions: (el: HTMLElement) => HTMLCalciteActionElement[];
 export declare const overflowActions: ({ actionGroups, expanded, overflowCount, }: {
     actionGroups: HTMLCalciteActionGroupElement[];

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

@@ -6,14 +6,18 @@ import { FlipPlacement, LogicalPlacement, OverlayPositioning } from '../../utils
 import { Columns } from './interfaces';
 
 /**
- * @slot - A slot for adding a group of `calcite-action`s.
- * @slot menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
- * @slot menu-tooltip - A slot for adding a `calcite-tooltip` for the menu.
+ * @slot  - A slot for adding a group of `calcite-action`s.
+ * @slot [menu-actions] - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
+ * @slot [menu-tooltip] - A slot for adding a `calcite-tooltip` for the menu.
  */
 export declare class ActionGroup extends LitElement {
     /** Indicates number of columns. */
     columns: Columns;
-    /** When `true`, the component is expanded. */
+    /**
+     * When `true`, the component is expanded.
+     *
+     * @default false
+     */
     expanded: boolean;
     /** Accessible name for the component. */
     label: string;
@@ -21,35 +25,41 @@ export declare class ActionGroup extends LitElement {
      * Indicates the layout of the component.
      *
      * @internal
+     * @default "vertical"
      */
     layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
     /** Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. */
     menuFlipPlacements: FlipPlacement[];
-    /** When `true`, the `calcite-action-menu` is open. */
+    /**
+     * When `true`, the `calcite-action-menu` is open.
+     *
+     * @default false
+     */
     menuOpen: boolean;
     /** Determines where the action menu will be positioned. */
     menuPlacement: LogicalPlacement;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Made into a prop for testing purposes only
-     *
-     * @private
-     */
-    private messages: Partial<{
-        more: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        more: string;
-    }>;
     /**
      * 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;
-    /** Specifies the size of the `calcite-action-menu`. */
+    /**
+     * Specifies the size of the `calcite-action-menu`.
+     *
+     * @default "m"
+     */
     scale: Scale;
     /** Sets focus on the component's first focusable element. */
     setFocus(): Promise<void>;
+    private messages: Partial<{
+        more: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        more: string;
+    }>;
 }

package/dist/components/calcite-action-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, safeClassMap } from "@arcgis/lumina";
@@ -14,16 +14,16 @@ const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-co
 class ActionGroup extends LitElement {
   constructor() {
     super(...arguments);
+    this.messages = useT9n();
     this.hasMenuActions = false;
     this.expanded = false;
     this.layout = "vertical";
     this.menuOpen = false;
-    this.messages = useT9n();
     this.overlayPositioning = "absolute";
     this.scale = "m";
   }
   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 }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -31,30 +31,21 @@ class ActionGroup extends LitElement {
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component's first focusable element. */
   async setFocus() {
     await componentFocusable(this);
     focusFirstTabbable(this.el);
   }
-  // #endregion
-  // #region Lifecycle
   willUpdate(changes) {
     if (changes.has("expanded") && (this.hasUpdated || this.expanded !== false)) {
       this.menuOpen = false;
     }
   }
-  // #endregion
-  // #region Private Methods
   setMenuOpen(event) {
     this.menuOpen = !!event.currentTarget.open;
   }
   handleMenuActionsSlotChange(event) {
     this.hasMenuActions = slotChangeHasAssignedElement(event);
   }
-  // #endregion
-  // #region Rendering
   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 .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>`;

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

@@ -6,14 +6,22 @@ import { Appearance, Scale } from '../interfaces';
 import { Action } from '../calcite-action/customElement.js';
 
 /**
- * @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.
+ * @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. */
+    /**
+     * Specifies the appearance of the component.
+     *
+     * @default "solid"
+     */
     appearance: Extract<"solid" | "transparent", Appearance>;
-    /** When `true`, the component is expanded. */
+    /**
+     * When `true`, the component is expanded.
+     *
+     * @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[];
@@ -23,7 +31,11 @@ export declare class ActionMenu extends LitElement {
      * @required
      */
     label: string;
-    /** When `true`, the component is open. */
+    /**
+     * When `true`, the component is open.
+     *
+     * @default false
+     */
     get open(): boolean;
     set open(open: boolean);
     /**
@@ -31,14 +43,24 @@ export declare class ActionMenu 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;
-    /** Determines where the component will be positioned relative to the `referenceElement`. */
+    /**
+     * 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`. */
+    /**
+     * Specifies the size of the component's trigger `calcite-action`.
+     *
+     * @default "m"
+     */
     scale: Scale;
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
     /** Fires when the `open` property is toggled. */
-    readonly calciteActionMenuOpen: TargetedEvent<this, undefined>;
+    readonly calciteActionMenuOpen: TargetedEvent<this, void>;
 }

package/dist/components/calcite-action-menu/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, nothing } from "lit";
@@ -74,12 +74,11 @@ class ActionMenu extends LitElement {
     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 }], scale: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  /** When `true`, the component is open. */
   get open() {
     return this._open;
   }
@@ -90,15 +89,10 @@ class ActionMenu extends LitElement {
       this.openHandler(open);
     }
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     return focusElement(this.menuButtonEl);
   }
-  // #endregion
-  // #region Lifecycle
   connectedCallback() {
     super.connectedCallback();
     this.connectMenuButtonEl();
@@ -115,8 +109,6 @@ class ActionMenu extends LitElement {
     super.disconnectedCallback();
     this.disconnectMenuButtonEl();
   }
-  // #endregion
-  // #region Private Methods
   expandedHandler() {
     this.open = false;
     this.setTooltipReferenceElement();
@@ -259,15 +251,15 @@ class ActionMenu extends LitElement {
   toggleOpen(value = !this.open) {
     this.open = value;
   }
-  handlePopoverOpen() {
+  handlePopoverOpen(event) {
+    event.stopPropagation();
     this.open = true;
     this.setFocus();
   }
-  handlePopoverClose() {
+  handlePopoverClose(event) {
+    event.stopPropagation();
     this.open = false;
   }
-  // #endregion
-  // #region Rendering
   renderMenuButton() {
     const { appearance, label, scale, expanded } = this;
     const menuButtonSlot = html`<slot name=${SLOTS.trigger} @slotchange=${this.setMenuButtonEl}><calcite-action .appearance=${appearance} class=${safeClassMap(CSS.defaultTrigger)} .icon=${ICONS.menu} .scale=${scale} .text=${label} .textEnabled=${expanded} ${ref(this.setDefaultMenuButtonEl)}></calcite-action></slot>`;

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

@@ -6,50 +6,64 @@ import { OverlayPositioning } from '../../utils/floating-ui';
 import { Tooltip } from '../calcite-tooltip/customElement.js';
 
 /**
- * @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.
+ * @deprecated Use the `calcite-action-pad` component instead.
+ * @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. */
+    /**
+     * When `true`, the expand-toggling behavior is disabled.
+     *
+     * @default false
+     */
     expandDisabled: boolean;
-    /** When `true`, the component is expanded. */
+    /**
+     * When `true`, the component is expanded.
+     *
+     * @default false
+     */
     expanded: boolean;
-    /** Indicates the layout of the component. */
-    layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
     /**
-     * Made into a prop for testing purposes only
+     * Indicates the layout of the component.
      *
-     * @private
+     * @default "vertical"
      */
-    private messages: Partial<{
-        expand: string;
-        collapse: string;
-        expandLabel: string;
-        collapseLabel: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        expand: string;
-        collapse: string;
-        expandLabel: string;
-        collapseLabel: string;
-    }>;
+    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`. */
+    /**
+     * Specifies the size of the expand `calcite-action`.
+     *
+     * @default "m"
+     */
     scale: Scale;
     /** Sets focus on the component's first focusable element. */
     setFocus(): Promise<void>;
     /** Fires when the `expanded` property is toggled. */
-    readonly calciteActionPadToggle: TargetedEvent<this, undefined>;
+    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;
+    }>;
 }

package/dist/components/calcite-action-pad/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";
@@ -9,6 +9,7 @@ import { c as componentFocusable } from "../../chunks/component.js";
 import { t as toggleChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
+import { l as logger } from "../../chunks/logger.js";
 import { css } from "@lit/reactive-element/css-tag.js";
 const CSS = {
   actionGroupEnd: "action-group--end",
@@ -19,8 +20,6 @@ const SLOTS = {
 };
 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{display:block}@keyframes in{0%{opacity:0}to{opacity:1}}:host{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:var(--calcite-action-pad-corner-radius, .125rem);background:transparent}:host([expanded][layout=vertical]) .container{max-inline-size:var(--calcite-action-pad-expanded-max-width, auto)}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:1px}.container{display:inline-flex;flex-direction:column;overflow:hidden;--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -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);gap:var(--calcite-action-pad-items-space, 0);border-radius:calc(var(--calcite-action-pad-corner-radius, .125rem) * 2);background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}.action-group--bottom{flex-grow:1;justify-content:flex-end;padding-block-end:0px}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:1px}:host([hidden]){display:none}[hidden]{display:none}`;
 class ActionPad extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.mutationObserver = createObserver("mutation", () => this.updateGroups());
@@ -28,17 +27,17 @@ class ActionPad extends LitElement {
       this.expanded = !this.expanded;
       this.calciteActionPadToggle.emit();
     };
+    this.messages = useT9n();
     this.expandDisabled = false;
     this.expanded = false;
     this.layout = "vertical";
-    this.messages = useT9n();
     this.overlayPositioning = "absolute";
     this.scale = "m";
     this.calciteActionPadToggle = createEvent({ cancelable: false });
     this.listen("calciteActionMenuOpen", this.actionMenuOpenHandler);
   }
   static {
-    this.properties = { expandTooltip: [16, { state: true }], actionsEndGroupLabel: 1, expandDisabled: [7, { reflect: true, type: Boolean }], expanded: [7, { reflect: true, type: Boolean }], layout: [3, { reflect: true }], messageOverrides: [0, { attribute: false }], overlayPositioning: [3, { reflect: true }], position: [3, { reflect: true }], scale: [3, { reflect: true }] };
+    this.properties = { expandTooltip: [16, {}, { state: true }], actionsEndGroupLabel: 1, expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -46,9 +45,6 @@ class ActionPad extends LitElement {
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component's first focusable element. */
   async setFocus() {
     await componentFocusable(this);
     focusFirstTabbable(this.el);
@@ -57,6 +53,13 @@ class ActionPad extends LitElement {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
+  async load() {
+    logger.deprecated("component", {
+      name: "action-pad",
+      removalVersion: 4,
+      suggested: "action-bar"
+    });
+  }
   willUpdate(changes) {
     if (changes.has("expanded") && this.hasUpdated) {
       toggleChildActionText({ el: this.el, expanded: this.expanded });
@@ -69,8 +72,6 @@ class ActionPad extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
   }
-  // #endregion
-  // #region Private Methods
   actionMenuOpenHandler(event) {
     if (event.target.menuOpen) {
       const composedPath = event.composedPath();
@@ -96,8 +97,6 @@ class ActionPad extends LitElement {
     const tooltips = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-tooltip"));
     this.expandTooltip = tooltips[0];
   }
-  // #endregion
-  // #region Rendering
   renderBottomActionGroup() {
     const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout, actionsEndGroupLabel, overlayPositioning } = this;
     const expandToggleNode = !expandDisabled ? ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, el, expandLabel: messages.expandLabel, expandText: messages.expand, expanded, position, scale, toggle: toggleExpand, tooltip: this.expandTooltip }) : null;