@esri/calcite-components 5.2.0-next.3 → 5.2.0-next.31

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

@@ -5,13 +5,16 @@ import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { g as getStylePixelValue, s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements, f as focusElementInGroup } from "../../chunks/dom.js";
+import { g as getStylePixelValue, a as slotChangeGetAssignedElements, b as getSlotAssignedElements, f as focusElementInGroup } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { o as overflowActions, q as queryActions, t as toggleChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
+import { t as toggleActionBarChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
+import { l as logger } from "../../chunks/logger.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { i as isAction } from "../../chunks/resources.js";
+import { S as SLOTS$1, i as isActionGroup } from "../../chunks/resources2.js";
+import { i as isActionMenu, S as SLOTS$2 } from "../../chunks/resources3.js";
 const calculateMaxItems = ({
   bufferSize = 0,
   containerSize,
@@ -48,54 +51,127 @@ const SLOTS = {
   actionsStart: "actions-start",
   expandTooltip: "expand-tooltip"
 };
+const queryActions = (items) => items.flatMap((item) => {
+  if (isActionGroup(item)) {
+    return item.actions;
+  }
+  if (isActionMenu(item)) {
+    return item.actions.filter((action) => action.slot === SLOTS$2.trigger);
+  }
+  return item;
+}).filter((action) => !!action);
+const overflowActions = ({
+  actionGroups,
+  expanded,
+  overflowCount
+}) => {
+  let needToSlotCount = overflowCount;
+  [...actionGroups].reverse().forEach((group) => {
+    let slottedWithinGroupCount = 0;
+    const directGroupActions = group.actions.filter((action) => action.parentElement === group).reverse();
+    directGroupActions.forEach((groupAction) => {
+      if (groupAction.slot === SLOTS$1.menuActions) {
+        groupAction.removeAttribute("slot");
+        groupAction.textEnabled = expanded;
+      }
+    });
+    if (needToSlotCount > 0 && !group.overflowActionsDisabled) {
+      directGroupActions.some((groupAction) => {
+        const unslottedActions = directGroupActions.filter((action) => !action.slot);
+        if (unslottedActions.length > 1 && directGroupActions.length > 2 && !groupAction.closest("calcite-action-menu") && !groupAction.overflowDisabled) {
+          groupAction.textEnabled = true;
+          groupAction.setAttribute("slot", SLOTS$1.menuActions);
+          slottedWithinGroupCount++;
+          if (slottedWithinGroupCount > 1) {
+            needToSlotCount--;
+          }
+        }
+        return needToSlotCount < 1;
+      });
+    }
+    group.manager.component.requestUpdate();
+  });
+};
 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-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-spacing-xxs));--calcite-internal-action-bar-padding: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-spacing-sm));--calcite-internal-action-bar-padding: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-space-sm-plus));--calcite-internal-action-bar-padding: var(--calcite-spacing-sm-plus)}:host{display:inline-flex;align-self:stretch;background:transparent;--calcite-internal-action-group-dividing-border-margin: calc(var(--calcite-spacing-base) + 1px)}.container{display:inline-flex;flex:1 1 auto;flex-direction:column;background-color:var(--calcite-action-bar-background-color, var(--calcite-color-foreground-1));gap:var(--calcite-internal-action-bar-gap);padding:var(--calcite-internal-action-bar-padding)}@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));box-shadow:var(--calcite-action-bar-shadow, var(--calcite-shadow-md))}: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);border-image:linear-gradient(to right,transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent var(--calcite-internal-action-group-dividing-border-margin));border-image-slice:1;padding-block-end:var(--calcite-internal-action-bar-padding)}: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-image:linear-gradient(transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent var(--calcite-internal-action-group-dividing-border-margin));border-image-slice:1;border-inline-end-width:var(--calcite-border-width-sm);padding-inline-end:var(--calcite-internal-action-bar-padding)}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}`;
 class ActionBar extends LitElement {
   constructor() {
     super();
     this.actions = [];
     this.containerRef = createRef();
+    this.defaultSlotRef = createRef();
+    this.actionsStartSlotRef = createRef();
+    this.actionsEndSlotRef = createRef();
+    this.actionsStartGroupRef = createRef();
+    this.actionsEndGroupRef = createRef();
     this.direction = useDirection();
+    this.defaultSlotItems = [];
     this.actionGroups = [];
-    this.mutationObserver = createObserver("mutation", () => this.mutationObserverHandler());
+    this.actionMenus = [];
+    this.actionsStart = [];
+    this.actionsStartGroups = [];
+    this.actionsEnd = [];
+    this.actionsEndGroups = [];
+    this.overflowPassId = 0;
+    this.suppressedActionGroupActionsChange = /* @__PURE__ */ new WeakMap();
     this.cancelable = useCancelable()(this);
     this.resize = debounce(({ width, height }) => {
-      const { expanded, expandDisabled, layout, overflowActionsDisabled, expandPosition } = this;
+      const { expanded, expandToggleDisabled, layout, overflowActionsDisabled, expandPosition } = this;
       if (overflowActionsDisabled || layout === "vertical" && !height || layout === "horizontal" && !width || !this.containerRef.value) {
         return;
       }
       this.updateGroups();
       const itemSizes = this.getItemSizes();
-      const { actionGroups } = this;
-      const actionsEndCount = this.hasActionsEnd || !expandDisabled && expandPosition === "end" ? 1 : 0;
-      const actionsStartCount = this.hasActionsStart || !expandDisabled && expandPosition === "start" ? 1 : 0;
-      const groupCount = actionGroups.length + actionsEndCount + actionsStartCount;
-      let bufferSize = groupCount;
+      const { actionGroups: defaultActionGroups, actionsEnd, actionsEndGroups, actionsStart, actionsStartGroups, defaultSlotItems } = this;
+      const slottedActionGroups = [
+        ...actionsStartGroups,
+        ...defaultActionGroups,
+        ...actionsEndGroups
+      ];
+      const actionsEndCount = this.hasActionsEnd || !expandToggleDisabled && expandPosition === "end" ? 1 : 0;
+      const actionsStartCount = this.hasActionsStart || !expandToggleDisabled && expandPosition === "start" ? 1 : 0;
+      const visibleSectionCount = defaultSlotItems.length + actionsEndCount + actionsStartCount;
+      let bufferSize = visibleSectionCount;
       const actionBarContainerStyle = getComputedStyle(this.containerRef.value);
       bufferSize += getStylePixelValue(layout === "horizontal" ? actionBarContainerStyle.paddingInlineStart : actionBarContainerStyle.paddingBlockStart) + getStylePixelValue(layout === "horizontal" ? actionBarContainerStyle.paddingInlineEnd : actionBarContainerStyle.paddingBlockEnd);
-      if (actionGroups.length > 0) {
-        actionGroups.forEach((actionGroup, i) => {
+      if (slottedActionGroups.length > 0) {
+        const lastSlottedActionGroupIndex = slottedActionGroups.length - 1;
+        slottedActionGroups.forEach((actionGroup, index) => {
           const actionGroupStyle = getComputedStyle(actionGroup);
           const actionGroupGap = getStylePixelValue(actionGroupStyle.gap);
-          const actionGroupGapQuantity = actionGroup.childElementCount - 1;
+          const defaultActionsCount = actionGroup.actions.filter((action) => action.slot !== SLOTS$1.menuActions).length;
+          const hasMenuActions = actionGroup.actions.some((action) => action.slot === SLOTS$1.menuActions);
+          const actionGroupItemCount = defaultActionsCount + (hasMenuActions ? 1 : 0);
+          const actionGroupGapQuantity = Math.max(actionGroupItemCount - 1, 0);
           bufferSize += actionGroupGap * actionGroupGapQuantity;
-          if (i < actionGroups.length - 1) {
+          if (index !== lastSlottedActionGroupIndex) {
             bufferSize += getStylePixelValue(layout === "horizontal" ? actionGroupStyle.paddingInlineEnd : actionGroupStyle.paddingBlockEnd);
             bufferSize += getStylePixelValue(layout === "horizontal" ? actionGroupStyle.borderInlineEndWidth : actionGroupStyle.borderBlockEndWidth);
           }
         });
       }
-      if (groupCount > 0) {
-        for (let i = 1; i < groupCount; i++) {
-          bufferSize += getStylePixelValue(actionBarContainerStyle.gap);
+      const addWrappedSectionGap = (items, wrapper, hasExpandToggle) => {
+        if (!wrapper || items.length < 1) {
+          return;
         }
+        const wrapperStyle = getComputedStyle(wrapper);
+        const wrapperGap = getStylePixelValue(wrapperStyle.gap);
+        const wrapperItemCount = items.length + (hasExpandToggle ? 1 : 0);
+        bufferSize += wrapperGap * Math.max(wrapperItemCount - 1, 0);
+      };
+      const hasExpandToggleAtStart = !expandToggleDisabled && expandPosition === "start";
+      const hasExpandToggleAtEnd = !expandToggleDisabled && expandPosition === "end";
+      addWrappedSectionGap(actionsStart, this.actionsStartGroupRef.value, hasExpandToggleAtStart);
+      addWrappedSectionGap(actionsEnd, this.actionsEndGroupRef.value, hasExpandToggleAtEnd);
+      if (visibleSectionCount > 1) {
+        bufferSize += getStylePixelValue(actionBarContainerStyle.gap) * (visibleSectionCount - 1);
       }
       const overflowCount = getOverflowCount({
         bufferSize,
         containerSize: layout === "horizontal" ? width : height,
         itemSizes
       });
-      overflowActions({
-        actionGroups,
+      this.runOverflowActions({
+        actionGroups: slottedActionGroups,
         expanded,
         overflowCount
       });
@@ -117,7 +193,7 @@ class ActionBar extends LitElement {
     this.hasActionsEnd = false;
     this.hasActionsStart = false;
     this.floating = false;
-    this.expandDisabled = false;
+    this.expandToggleDisabled = false;
     this.expanded = false;
     this.expandPosition = "end";
     this.layout = "vertical";
@@ -129,14 +205,28 @@ class ActionBar extends LitElement {
     this.calciteActionBarExpand = createEvent({ cancelable: false });
     this.calciteActionBarToggle = createEvent({ cancelable: false });
     this.listen("calciteActionMenuOpen", this.actionMenuOpenHandler);
+    this.listen("calciteInternalActionGroupActionsChange", this.handleActionGroupActionsChange);
+    this.listen("calciteInternalActionMenuActionsChange", this.handleActionMenuActionsChange);
     this.listen("keydown", this.handleKeyDown);
   }
   static {
-    this.properties = { expandTooltip: [16, {}, { state: true }], hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], actionsEndGroupLabel: 1, actionsStartGroupLabel: 1, floating: [7, {}, { reflect: true, type: Boolean }], expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], expandPosition: [3, {}, { reflect: true }], 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 }], selectionAppearance: [3, {}, { reflect: true }] };
+    this.properties = { expandTooltip: [16, {}, { state: true }], hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], actionsEndGroupLabel: 1, actionsStartGroupLabel: 1, floating: [7, {}, { reflect: true, type: Boolean }], expandToggleDisabled: [7, {}, { reflect: true, type: Boolean }], expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], expandPosition: [3, {}, { reflect: true }], 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 }], selectionAppearance: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
+  get expandDisabled() {
+    return this.expandToggleDisabled;
+  }
+  set expandDisabled(value) {
+    logger.deprecated("property", {
+      component: this,
+      name: "expandDisabled",
+      removalVersion: 6,
+      suggested: "expandToggleDisabled"
+    });
+    this.expandToggleDisabled = value;
+  }
   async overflowActions() {
     this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });
   }
@@ -145,15 +235,11 @@ class ActionBar extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.updateGroups();
-    this.overflowActions();
-    this.updateActions();
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.overflowActionsDisabledHandler(this.overflowActionsDisabled);
     this.cancelable.add(this.resize);
   }
   willUpdate(changes) {
-    if (changes.has("expandDisabled") && (this.hasUpdated || this.expandDisabled !== false) || changes.has("expandPosition") && (this.hasUpdated || this.expandPosition !== "end")) {
+    if (changes.has("expandDisabled") && (this.hasUpdated || this.expandDisabled !== false) || changes.has("expandToggleDisabled") && (this.hasUpdated || this.expandToggleDisabled !== false) || changes.has("expandPosition") && (this.hasUpdated || this.expandPosition !== "end")) {
       this.overflowActions();
     }
     if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) {
@@ -175,16 +261,19 @@ class ActionBar extends LitElement {
     }
   }
   loaded() {
+    this.syncDefaultSlot();
+    this.syncActionsStartSlot();
+    this.syncActionsEndSlot();
+    this.syncActionsState();
     this.overflowActions();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
   }
   getItemSizes() {
-    const { el, layout, expandToggleEl } = this;
-    const actions = queryActions(el);
+    const { layout, expandToggleEl } = this;
+    const actions = [...this.actions];
     if (expandToggleEl) {
       actions.push(expandToggleEl);
     }
@@ -193,8 +282,7 @@ class ActionBar extends LitElement {
     return actions.map((action) => action[clientSize] || fallbackSize);
   }
   expandedHandler() {
-    const { el, expanded } = this;
-    toggleChildActionText({ el, expanded });
+    this.syncActionsState(true);
     this.overflowActions();
   }
   overflowActionsDisabledHandler(overflowActionsDisabled) {
@@ -206,60 +294,177 @@ class ActionBar extends LitElement {
     this.overflowActions();
   }
   actionMenuOpenHandler(event) {
-    if (event.target.menuOpen) {
-      const composedPath = event.composedPath();
-      this.actionGroups?.forEach((group) => {
-        if (!composedPath.includes(group)) {
-          group.menuOpen = false;
-        }
-      });
+    const composedPath = event.composedPath();
+    const source = composedPath.find((element) => isActionGroup(element) || isActionMenu(element));
+    if (!source) {
+      return;
+    }
+    if (isActionGroup(source) && !source.menuOpen || isActionMenu(source) && !source.open) {
+      return;
     }
+    this.getTrackedActionGroups().forEach((group) => {
+      if (!composedPath.includes(group)) {
+        group.menuOpen = false;
+      }
+    });
+    this.getTrackedActionMenus().forEach((menu) => {
+      if (!composedPath.includes(menu)) {
+        menu.open = false;
+      }
+    });
   }
-  mutationObserverHandler() {
-    this.updateGroups();
-    this.overflowActions();
-    this.queryAndStoreActions();
-    this.updateActions();
+  runOverflowActions({ actionGroups, expanded, overflowCount }) {
+    const overflowPassId = ++this.overflowPassId;
+    const slotStateByGroup = /* @__PURE__ */ new Map();
+    actionGroups.forEach((group) => {
+      const directActions = group.actions.filter((action) => action.parentElement === group);
+      slotStateByGroup.set(group, directActions.map((action) => action.slot ?? "").join("|"));
+    });
+    overflowActions({
+      actionGroups,
+      expanded,
+      overflowCount
+    });
+    actionGroups.forEach((group) => {
+      const directActions = group.actions.filter((action) => action.parentElement === group);
+      const nextSlotState = directActions.map((action) => action.slot ?? "").join("|");
+      if (slotStateByGroup.get(group) !== nextSlotState) {
+        this.suppressedActionGroupActionsChange.set(group, overflowPassId);
+        this.queueSuppressedActionGroupActionsChangeCleanup(group, overflowPassId);
+      }
+    });
+  }
+  queueSuppressedActionGroupActionsChangeCleanup(group, overflowPassId) {
+    queueMicrotask(() => {
+      if (this.suppressedActionGroupActionsChange.get(group) === overflowPassId) {
+        this.suppressedActionGroupActionsChange.delete(group);
+      }
+    });
   }
   resizeHandlerEntries(entries) {
     entries.forEach(this.resizeHandler);
   }
+  getSectionWrapperGroups() {
+    return [this.actionsStartGroupRef.value, this.actionsEndGroupRef.value].filter((group) => !!group);
+  }
   updateGroups() {
-    const groups = Array.from(this.el.querySelectorAll("calcite-action-group"));
-    this.actionGroups = groups;
+    const groups = [
+      ...this.actionGroups,
+      ...this.actionsStartGroups,
+      ...this.actionsEndGroups,
+      ...this.getSectionWrapperGroups()
+    ];
     groups.forEach((group) => {
       group.layout = this.layout;
       group.scale = this.scale;
     });
   }
   handleDefaultSlotChange() {
-    this.updateGroups();
-    this.queryAndStoreActions();
-    this.updateActions();
+    this.syncSlotAndActions(() => this.syncDefaultSlot());
   }
-  handleActionsEndSlotChange(event) {
-    this.hasActionsEnd = slotChangeHasAssignedElement(event);
-    this.overflowActions();
+  handleActionsEndSlotChange() {
+    this.syncSlotAndActions(() => this.syncActionsEndSlot());
   }
-  handleActionsStartSlotChange(event) {
-    this.hasActionsStart = slotChangeHasAssignedElement(event);
-    this.overflowActions();
+  handleActionsStartSlotChange() {
+    this.syncSlotAndActions(() => this.syncActionsStartSlot());
   }
   handleTooltipSlotChange(event) {
     const tooltips = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-tooltip"));
     this.expandTooltip = tooltips[0];
   }
   updateActions() {
-    this.actions.forEach((action) => {
+    const actions = new Set(this.actions);
+    this.getTrackedActionMenus().forEach((menu) => {
+      menu.actions.forEach((action) => actions.add(action));
+    });
+    actions.forEach((action) => {
       action.selectionAppearance = this.selectionAppearance;
     });
   }
-  queryAndStoreActions() {
-    this.actions = Array.from(this.el.querySelectorAll("calcite-action"));
+  syncActions() {
+    this.actions = queryActions([
+      ...this.actionsStart,
+      ...this.defaultSlotItems,
+      ...this.actionsEnd
+    ]);
+  }
+  syncActionsAndOverflow() {
+    this.syncActionsState();
+    this.overflowActions();
+  }
+  syncSlotAndActions(syncSlot) {
+    syncSlot();
+    this.syncActionsAndOverflow();
+  }
+  syncActionsState(syncExpandedState = false) {
+    this.syncActions();
+    this.updateActions();
+    if (!syncExpandedState) {
+      return;
+    }
+    toggleActionBarChildActionText({
+      actions: this.actions,
+      expandables: [
+        ...this.getTrackedActionGroups(),
+        ...this.getTrackedActionMenus(),
+        ...this.getSectionWrapperGroups()
+      ],
+      expanded: this.expanded
+    });
+  }
+  getTrackedActionGroups() {
+    return [...this.actionGroups, ...this.actionsStartGroups, ...this.actionsEndGroups];
+  }
+  getTrackedActionMenus() {
+    return [...this.actionMenus, ...this.actionsStart, ...this.actionsEnd].filter((item) => isActionMenu(item));
+  }
+  getAssignedActionBarItems(slot) {
+    if (!slot) {
+      return [];
+    }
+    return getSlotAssignedElements(slot).filter((element) => isAction(element) || isActionGroup(element) || isActionMenu(element));
+  }
+  syncDefaultSlot() {
+    this.defaultSlotItems = this.getAssignedActionBarItems(this.defaultSlotRef.value);
+    this.actionGroups = this.defaultSlotItems.filter((item) => isActionGroup(item));
+    this.actionMenus = this.defaultSlotItems.filter((item) => isActionMenu(item));
+    this.updateGroups();
+  }
+  syncActionsStartSlot() {
+    this.actionsStart = this.getAssignedActionBarItems(this.actionsStartSlotRef.value);
+    this.actionsStartGroups = this.actionsStart.filter((item) => isActionGroup(item));
+    this.hasActionsStart = this.actionsStart.length > 0;
+    this.updateGroups();
+  }
+  syncActionsEndSlot() {
+    this.actionsEnd = this.getAssignedActionBarItems(this.actionsEndSlotRef.value);
+    this.actionsEndGroups = this.actionsEnd.filter((item) => isActionGroup(item));
+    this.hasActionsEnd = this.actionsEnd.length > 0;
+    this.updateGroups();
+  }
+  handleActionGroupActionsChange(event) {
+    const group = event.target;
+    const trackedGroups = this.getTrackedActionGroups();
+    if (!trackedGroups.includes(group)) {
+      return;
+    }
+    if (this.suppressedActionGroupActionsChange.has(group)) {
+      return;
+    }
+    this.syncActionsAndOverflow();
+  }
+  handleActionMenuActionsChange(event) {
+    const menu = event.target;
+    if (!this.getTrackedActionMenus().includes(menu)) {
+      return;
+    }
+    this.syncActionsAndOverflow();
+  }
+  getNavigableActions() {
+    return this.actions.filter((action) => !action.disabled && action.slot !== SLOTS$1.menuActions);
   }
   handleKeyDown(event) {
-    this.queryAndStoreActions();
-    const actions = this.actions.filter((action) => !action.disabled);
+    const actions = this.getNavigableActions();
     const current = document.activeElement;
     if (!isAction(current) || !actions.includes(current)) {
       return;
@@ -306,18 +511,23 @@ class ActionBar extends LitElement {
     return ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, direction: this.direction, el, expanded, expandLabel: messages.expandLabel, expandText: messages.expand, position, ref: this.setExpandToggleEl, scale, toggle: toggleExpand, tooltip: this.expandTooltip });
   }
   renderActionsGroup(position) {
-    const { expandDisabled, scale, layout, overlayPositioning, expandPosition } = this;
+    const { expandToggleDisabled, scale, layout, overlayPositioning, expandPosition } = this;
     const isStart = position === "start";
-    const hasExpandToggle = !expandDisabled && expandPosition === position;
+    const hasExpandToggle = !expandToggleDisabled && expandPosition === position;
+    const hasActions = isStart ? this.hasActionsStart : this.hasActionsEnd;
     const slotName = isStart ? SLOTS.actionsStart : SLOTS.actionsEnd;
     const onSlotChange = isStart ? this.handleActionsStartSlotChange : this.handleActionsEndSlotChange;
     const label = isStart ? this.actionsStartGroupLabel : this.actionsEndGroupLabel;
-    const hidden = !hasExpandToggle && !(isStart ? this.hasActionsStart : this.hasActionsEnd);
+    const hidden = !hasExpandToggle && !hasActions;
     const className = isStart ? CSS.actionGroupStart : CSS.actionGroupEnd;
-    return html`<calcite-action-group class=${safeClassMap(className)} .hidden=${hidden} .label=${label} .layout=${layout} .overlayPositioning=${overlayPositioning} .scale=${scale}>${isStart && hasExpandToggle ? this.renderExpandToggle() : null}<slot name=${slotName ?? nothing} @slotchange=${onSlotChange}></slot>${hasExpandToggle ? this.renderExpandTooltipSlot() : null}${!isStart && hasExpandToggle ? this.renderExpandToggle() : null}</calcite-action-group>`;
+    const actionGroupRef = isStart ? this.actionsStartGroupRef : this.actionsEndGroupRef;
+    const slotRef = isStart ? this.actionsStartSlotRef : this.actionsEndSlotRef;
+    const expandToggle = hasExpandToggle ? this.renderExpandToggle() : null;
+    return html`<calcite-action-group class=${safeClassMap(className)} .hidden=${hidden} .label=${label} .layout=${layout} .overlayPositioning=${overlayPositioning} .scale=${scale} ${ref(actionGroupRef)}>${isStart ? expandToggle : null}<slot name=${slotName ?? nothing} @slotchange=${onSlotChange} ${ref(slotRef)}></slot>${hasExpandToggle ? this.renderExpandTooltipSlot() : null}${isStart ? null : expandToggle}</calcite-action-group>`;
   }
   render() {
-    return html`<div .ariaOrientation=${this.layout === "horizontal" ? "horizontal" : "vertical"} class=${safeClassMap(CSS.container)} role=toolbar ${ref(this.containerRef)}>${this.renderActionsGroup("start")}<slot @slotchange=${this.handleDefaultSlotChange}></slot>${this.renderActionsGroup("end")}</div>`;
+    const ariaOrientation = this.layout === "horizontal" ? "horizontal" : "vertical";
+    return html`<div .ariaOrientation=${ariaOrientation} class=${safeClassMap(CSS.container)} role=toolbar ${ref(this.containerRef)}>${this.renderActionsGroup("start")}<slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.defaultSlotRef)}></slot>${this.renderActionsGroup("end")}</div>`;
   }
 }
 customElement("calcite-action-bar", ActionBar);

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

@@ -15,6 +15,12 @@ import type { Columns } from "./interfaces.js";
  * @slot [menu-tooltip] - A slot for adding a `calcite-tooltip` for the menu.
  */
 export abstract class ActionGroup extends LitElement {
+  /**
+   * Specifies the `calcite-action`s in the group.
+   *
+   * @internal
+   */
+  get actions(): Action[];
   /** Specifies the number of columns. */
   accessor columns: Columns | undefined;
   /**
@@ -32,7 +38,7 @@ export abstract class ActionGroup extends LitElement {
    * @internal
    */
   accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
-  /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
+  /** Specifies the component's fallback `menuPlacement` when its initial or specified `menuPlacement` has insufficient space available. */
   accessor menuFlipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, the `calcite-action-menu` is open.
@@ -42,8 +48,12 @@ export abstract class ActionGroup extends LitElement {
   accessor menuOpen: boolean;
   /** Specifies the position of the action menu. */
   accessor menuPlacement: LogicalPlacement | undefined;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { more?: string; };
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { more?: string | undefined; };
   /**
    * When `true`, the component's actions will not be overflowed into a menu by a parent `calcite-action-bar`.
    *
@@ -83,9 +93,7 @@ export abstract class ActionGroup extends LitElement {
    */
   accessor selectionMode: Extract<"single" | "single-persist" | "multiple" | "none", SelectionMode>;
   /**
-   * 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.
+   * 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
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
@@ -104,9 +112,12 @@ export abstract class ActionGroup extends LitElement {
   readonly calciteActionGroupCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires when the component's content area is expanded. */
   readonly calciteActionGroupExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires after the component's slotted `calcite-action`s change. */
+  readonly calciteInternalActionGroupActionsChange: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteActionGroupChange: ActionGroup["calciteActionGroupChange"]["detail"];
     calciteActionGroupCollapse: ActionGroup["calciteActionGroupCollapse"]["detail"];
     calciteActionGroupExpand: ActionGroup["calciteActionGroupExpand"]["detail"];
+    calciteInternalActionGroupActionsChange: ActionGroup["calciteInternalActionGroupActionsChange"]["detail"];
   };
 }