@esri/calcite-components 5.2.0-next.4 → 5.2.0-next.41

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,
@@ -40,6 +43,9 @@ const getOverflowCount = ({
 };
 const CSS = {
   container: "container",
+  hasActionGroups: "has-action-groups",
+  lineOverlay: "line-overlay",
+  line: "line",
   actionGroupEnd: "action-group--end",
   actionGroupStart: "action-group--start"
 };
@@ -48,59 +54,155 @@ const SLOTS = {
   actionsStart: "actions-start",
   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([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}`;
+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 getWrapItemCrossOffset = ({
+  item,
+  containerRect,
+  horizontal,
+  rtl
+}) => {
+  const rect = item.getBoundingClientRect();
+  if (horizontal) {
+    return rect.top - containerRect.top;
+  }
+  return rtl ? containerRect.right - rect.right : rect.left - containerRect.left;
+};
+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}.line-overlay{position:absolute;inset:0;pointer-events:none}.line{position:absolute;--calcite-internal-action-bar-divider-inset: calc( var(--calcite-internal-action-group-dividing-border-margin) - var(--calcite-border-width-sm) )}:host([overflow-mode=wrap][layout=horizontal]) .container,:host([overflow-mode=wrap][layout=vertical]) .container{position:relative;flex-wrap:wrap;align-content:flex-start;--calcite-internal-action-bar-line-gap: calc( var(--calcite-internal-action-bar-padding) + var(--calcite-internal-action-bar-gap) )}:host([overflow-mode=wrap][layout=horizontal]) ::slotted(calcite-action-group[slot=actions-start]),:host([overflow-mode=wrap][layout=vertical]) ::slotted(calcite-action-group[slot=actions-start]){padding-inline-end:0;padding-block-end:0;border-inline-end-width:0;border-block-end-width:0}:host([overflow-mode=wrap][layout=horizontal]) .container{row-gap:var(--calcite-internal-action-bar-line-gap)}:host([overflow-mode=wrap][layout=horizontal]) ::slotted(calcite-action-group:not([slot=actions-start])){margin-inline-start:calc(-1 * var(--calcite-border-width-sm));padding-inline:var(--calcite-internal-action-bar-padding) 0;border-inline-start-width:var(--calcite-border-width-sm);border-inline-end-width:0;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 calc(100% - var(--calcite-internal-action-group-dividing-border-margin)));border-image-slice:1}:host([overflow-mode=wrap][layout=horizontal]) .line{inset-inline:var(--calcite-internal-action-bar-padding);block-size:var(--calcite-border-width-sm);inset-block-start:calc(var(--calcite-internal-action-bar-line-offset, 0px) - var(--calcite-internal-action-bar-line-gap) / 2);background:linear-gradient(to right,transparent var(--calcite-internal-action-bar-divider-inset),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-bar-divider-inset),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-bar-divider-inset)),transparent calc(100% - var(--calcite-internal-action-bar-divider-inset)))}:host([overflow-mode=wrap][layout=horizontal]) .container.has-action-groups{overflow:hidden;padding-inline-start:0;column-gap:calc(var(--calcite-internal-action-bar-gap) + var(--calcite-border-width-sm))}:host([overflow-mode=wrap][layout=horizontal]) .container.has-action-groups .action-group--start{padding-inline-start:var(--calcite-internal-action-bar-padding)}:host([overflow-mode=wrap][layout=vertical]) .container{block-size:100%;min-block-size:0;column-gap:var(--calcite-internal-action-bar-line-gap)}:host([overflow-mode=wrap][layout=vertical]) ::slotted(calcite-action-group:not([slot=actions-start])){margin-block-start:calc(-1 * var(--calcite-border-width-sm));padding-block:var(--calcite-internal-action-bar-padding) 0;border-block-start-width:var(--calcite-border-width-sm);border-block-end-width:0;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 calc(100% - var(--calcite-internal-action-group-dividing-border-margin)));border-image-slice:1}:host([overflow-mode=wrap][layout=vertical]) .line{inset-block:var(--calcite-internal-action-bar-padding);inline-size:var(--calcite-border-width-sm);inset-inline-start:calc(var(--calcite-internal-action-bar-line-offset, 0px) - var(--calcite-internal-action-bar-line-gap) / 2);background:linear-gradient(to bottom,transparent var(--calcite-internal-action-bar-divider-inset),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-bar-divider-inset),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-bar-divider-inset)),transparent calc(100% - var(--calcite-internal-action-bar-divider-inset)))}:host([overflow-mode=wrap][layout=vertical]) .container.has-action-groups{overflow:hidden;padding-block-start:0;row-gap:calc(var(--calcite-internal-action-bar-gap) + var(--calcite-border-width-sm))}:host([overflow-mode=wrap][layout=vertical]) .container.has-action-groups .action-group--start{padding-block-start:var(--calcite-internal-action-bar-padding)}:host([overflow-mode=none][layout=horizontal]) .container{overflow-x:auto}:host([overflow-mode=none][layout=vertical]) .container{overflow-y:auto}: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;
-      if (overflowActionsDisabled || layout === "vertical" && !height || layout === "horizontal" && !width || !this.containerRef.value) {
+      const { expanded, expandToggleDisabled, layout, expandPosition } = this;
+      if (!this.containerRef.value) {
+        return;
+      }
+      if (this.usesWrap) {
+        this.scheduleLineMeasure();
+        return;
+      }
+      if (this.overflowMode !== "collapse" || layout === "vertical" && !height || layout === "horizontal" && !width) {
         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
       });
     }, DEBOUNCE.resize);
     this.resizeHandler = (entry) => {
+      if (this.usesWrap) {
+        this.scheduleLineMeasure();
+        return;
+      }
       const { width, height } = entry.contentRect;
       this.resize({ width, height });
     };
@@ -116,12 +218,14 @@ class ActionBar extends LitElement {
     };
     this.hasActionsEnd = false;
     this.hasActionsStart = false;
+    this.hasActionGroups = false;
+    this.lineOffsets = [];
     this.floating = false;
-    this.expandDisabled = false;
+    this.expandToggleDisabled = false;
     this.expanded = false;
     this.expandPosition = "end";
     this.layout = "vertical";
-    this.overflowActionsDisabled = false;
+    this.overflowMode = "collapse";
     this.overlayPositioning = "absolute";
     this.scale = "m";
     this.selectionAppearance = "neutral";
@@ -129,15 +233,47 @@ 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 }], hasActionGroups: [16, {}, { state: true }], lineOffsets: [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 }], overflowMode: [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;
+  }
+  get overflowActionsDisabled() {
+    return this.overflowMode === "none";
+  }
+  set overflowActionsDisabled(value) {
+    logger.deprecated("property", {
+      component: this,
+      name: "overflowActionsDisabled",
+      removalVersion: 7,
+      suggested: 'overflowMode="none"'
+    });
+    this.overflowMode = value ? "none" : "collapse";
+  }
   async overflowActions() {
+    if (this.overflowMode !== "collapse") {
+      if (this.usesWrap) {
+        this.scheduleLineMeasure();
+      }
+      return;
+    }
     this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });
   }
   async setFocus(options) {
@@ -145,22 +281,31 @@ 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.overflowModeHandler();
     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")) {
       this.updateGroups();
+      this.overflowModeHandler();
+      if (!this.usesWrap) {
+        this.updateLines();
+      }
     }
-    if (changes.has("overflowActionsDisabled") && (this.hasUpdated || this.overflowActionsDisabled !== false)) {
-      this.overflowActionsDisabledHandler(this.overflowActionsDisabled);
+    if (changes.has("overflowMode") && (this.hasUpdated || this.overflowMode !== "collapse")) {
+      if (!this.usesWrap && this.lineMeasureFrame != null) {
+        cancelAnimationFrame(this.lineMeasureFrame);
+        this.lineMeasureFrame = void 0;
+      }
+      if (this.usesWrap) {
+        this.scheduleLineMeasure();
+      } else {
+        this.updateLines();
+      }
+      this.overflowModeHandler();
     }
     if (changes.has("expanded") && this.hasUpdated) {
       this.expandedHandler();
@@ -175,16 +320,28 @@ class ActionBar extends LitElement {
     }
   }
   loaded() {
+    this.syncDefaultSlot();
+    this.syncActionsStartSlot();
+    this.syncActionsEndSlot();
+    this.syncActionsState();
     this.overflowActions();
   }
+  updated() {
+    if (this.usesWrap && this.lineMeasureFrame == null) {
+      this.scheduleLineMeasure();
+    }
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
+    if (this.lineMeasureFrame != null) {
+      cancelAnimationFrame(this.lineMeasureFrame);
+      this.lineMeasureFrame = void 0;
+    }
   }
   getItemSizes() {
-    const { el, layout, expandToggleEl } = this;
-    const actions = queryActions(el);
+    const { layout, expandToggleEl } = this;
+    const actions = [...this.actions];
     if (expandToggleEl) {
       actions.push(expandToggleEl);
     }
@@ -193,73 +350,248 @@ 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) {
-    if (overflowActionsDisabled) {
+  overflowModeHandler() {
+    if (this.overflowMode === "none") {
       this.resizeObserver?.disconnect();
-      return;
+    } else {
+      this.resizeObserver?.observe(this.el);
     }
-    this.resizeObserver?.observe(this.el);
     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()
+    ];
+    this.hasActionGroups = this.actionGroups.length > 0;
     groups.forEach((group) => {
       group.layout = this.layout;
       group.scale = this.scale;
     });
   }
+  get usesWrap() {
+    return this.overflowMode === "wrap" && this.layout !== "grid";
+  }
+  scheduleLineMeasure() {
+    if (this.lineMeasureFrame != null) {
+      cancelAnimationFrame(this.lineMeasureFrame);
+    }
+    this.lineMeasureFrame = requestAnimationFrame(() => {
+      this.lineMeasureFrame = void 0;
+      this.updateLines();
+    });
+  }
+  getWrapItems() {
+    const items = [];
+    const start = this.actionsStartGroupRef.value;
+    if (start && !start.hidden) {
+      items.push(start);
+    }
+    this.defaultSlotItems.forEach((el) => {
+      if (!el.hidden) {
+        items.push(el);
+      }
+    });
+    const end = this.actionsEndGroupRef.value;
+    if (end && !end.hidden) {
+      items.push(end);
+    }
+    return items;
+  }
+  updateLines() {
+    const container = this.containerRef.value;
+    if (!container || !this.usesWrap) {
+      if (this.lineOffsets.length > 0) {
+        this.lineOffsets = [];
+      }
+      return;
+    }
+    const horizontal = this.layout === "horizontal";
+    const rtl = this.direction === "rtl";
+    const containerRect = container.getBoundingClientRect();
+    const items = this.getWrapItems();
+    const lineOffsets = [];
+    let previousOffset = null;
+    items.forEach((item) => {
+      const offset = getWrapItemCrossOffset({ item, containerRect, horizontal, rtl });
+      if (previousOffset !== null && Math.abs(offset - previousOffset) > 1) {
+        lineOffsets.push(offset);
+      }
+      previousOffset = offset;
+    });
+    const changed = lineOffsets.length !== this.lineOffsets.length || lineOffsets.some((value, index) => value !== this.lineOffsets[index]);
+    if (changed) {
+      this.lineOffsets = lineOffsets;
+    }
+  }
   handleDefaultSlotChange() {
-    this.updateGroups();
-    this.queryAndStoreActions();
-    this.updateActions();
+    this.syncSlotAndActions(() => this.syncDefaultSlot());
+    if (this.usesWrap) {
+      this.scheduleLineMeasure();
+    }
   }
-  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 +638,28 @@ 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 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 hidden = !hasExpandToggle && !hasActions;
+    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({
+      [CSS.actionGroupStart]: isStart,
+      [CSS.actionGroupEnd]: !isStart
+    })} .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]: true,
+      [CSS.hasActionGroups]: this.hasActionGroups
+    })} role=toolbar ${ref(this.containerRef)}>${this.renderActionsGroup("start")}<slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.defaultSlotRef)}></slot>${this.renderActionsGroup("end")}${this.usesWrap ? html`<div aria-hidden=true class=${safeClassMap(CSS.lineOverlay)}>${this.lineOffsets.map((offset) => html`<div class=${safeClassMap(CSS.line)} style=${`--calcite-internal-action-bar-line-offset: ${offset}px`}></div>`)}</div>` : null}</div>`;
   }
 }
 customElement("calcite-action-bar", ActionBar);