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

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

@@ -2,28 +2,22 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { queryAssignedElements } from "lit/decorators.js";
-import { S as SLOTS } from "../../chunks/resources2.js";
-import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { S as SLOTS } from "../../chunks/resources3.js";
+import { b as getSlotAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { i as isAction } from "../../chunks/resources.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { I as ICONS, S as SLOTS$1, C as CSS } from "../../chunks/resources3.js";
+import { I as ICONS, S as SLOTS$1, C as CSS } from "../../chunks/resources2.js";
 const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([scale=s]){--calcite-internal-action-group-gap: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-group-gap: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-group-gap: var(--calcite-spacing-sm-plus)}:host{display:flex;flex-direction:column;padding:0;background-color:transparent;border-color:var(--calcite-action-group-border-color, var(--calcite-color-border-3));border-style:solid;border-width:0;gap:var(--calcite-internal-action-group-gap)}.container{display:flex;flex-grow:1;flex-direction:column;gap:inherit}:host([columns="1"]){--calcite-internal-action-group-columns: 1}:host([columns="2"]){--calcite-internal-action-group-columns: 2}:host([columns="3"]){--calcite-internal-action-group-columns: 3}:host([columns="4"]){--calcite-internal-action-group-columns: 4}:host([columns="5"]){--calcite-internal-action-group-columns: 5}:host([columns="6"]){--calcite-internal-action-group-columns: 6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]),:host([layout=horizontal]) .container{flex-direction:row}:host([layout=grid]){display:grid}:host([layout=grid]) .container{display:grid;place-content:stretch;background-color:transparent;gap:var(--calcite-action-group-gap, var(--calcite-internal-action-group-gap));grid-template-columns:repeat(var(--calcite-action-group-columns, var(--calcite-internal-action-group-columns, 3)),auto);padding:var(--calcite-action-group-gap, 1px)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-inline-end:var(--calcite-size-px)}:host([hidden]){display:none}[hidden]{display:none}`;
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
 class ActionGroup extends LitElement {
   constructor() {
     super();
     this.messages = useT9n();
+    this._actions = [];
     this.focusSetter = useSetFocus()(this);
+    this.defaultSlotRef = createRef();
+    this.menuActionsSlotRef = createRef();
     this.hasMenuActions = false;
     this.expanded = false;
     this.layout = "vertical";
@@ -37,10 +31,11 @@ class ActionGroup extends LitElement {
     this.calciteActionGroupCollapse = createEvent({ cancelable: false });
     this.calciteActionGroupExpand = createEvent({ cancelable: false });
     this.calciteActionGroupChange = createEvent({ cancelable: false });
+    this.calciteInternalActionGroupActionsChange = createEvent({ cancelable: false });
     this.listen("click", this.handleActionClick);
   }
   static {
-    this.properties = { hasMenuActions: [16, {}, { state: true }], columns: [11, {}, { type: Number, reflect: true }], expanded: [7, {}, { reflect: true, type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], overflowActionsDisabled: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], selectedActions: [0, {}, { attribute: false }] };
+    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 }], overflowActionsDisabled: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], actions: [32, {}, { attribute: false, readOnly: true }], selectedActions: [0, {}, { attribute: false }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -48,23 +43,15 @@ class ActionGroup extends LitElement {
   static {
     this.styles = styles;
   }
+  get actions() {
+    return this._actions;
+  }
   async setFocus(options) {
     return this.focusSetter(() => this.el, options);
   }
   willUpdate(changes) {
     if (this.hasUpdated || changes.has("selectionMode")) {
-      if (this.selectionMode !== "none") {
-        this.setRoleOnActions();
-      } else if (this.selectionMode === "none") {
-        this.clearActionAriaAttributes();
-      }
-      if (this.selectionMode === "single" || this.selectionMode === "single-persist") {
-        const selected = this.actions?.filter((action) => action.active) ?? [];
-        if (selected.length > 1) {
-          this.actions.forEach((action) => this.updateAction(action, action === selected[selected.length - 1]));
-        }
-      }
-      this.updateSelectedActions(this.selectionMode === "none" ? [] : this.actions?.filter((action) => action.active) ?? []);
+      this.syncSelectionState();
     }
     if (changes.has("expanded")) {
       if (this.hasUpdated || this.expanded !== false) {
@@ -80,34 +67,60 @@ class ActionGroup extends LitElement {
     }
   }
   setActiveAction(index, active) {
-    if (this.selectionMode === "multiple") {
-      const nextActive = !active.active;
-      this.updateAction(active, nextActive);
-      this.updateSelectedActions(this.actions.filter((action) => action.active));
-      this.calciteActionGroupChange.emit();
-      return;
+    const nextActive = !active.active;
+    switch (this.selectionMode) {
+      case "multiple":
+        this.updateAction(active, nextActive);
+        break;
+      case "single":
+        this.actions.forEach((action, i) => this.updateAction(action, i === index && nextActive));
+        break;
+      case "single-persist":
+        if (!this.actions[index].active) {
+          this.actions.forEach((action, i) => this.updateAction(action, i === index));
+          this.updateSelectedActions([active]);
+          this.calciteActionGroupChange.emit();
+        }
+        return;
+      default:
+        return;
     }
-    if (this.selectionMode === "single") {
-      const nextActive = !active.active;
-      this.actions.forEach((action, i) => this.updateAction(action, i === index && nextActive));
-      this.updateSelectedActions(this.actions.filter((action) => action.active));
-      this.calciteActionGroupChange.emit();
-      return;
+    this.updateSelectedActions(this.actions.filter((action) => action.active));
+    this.calciteActionGroupChange.emit();
+  }
+  setMenuOpen(event) {
+    this.menuOpen = !!event.currentTarget.open;
+  }
+  syncSelectionState() {
+    if (this.selectionMode !== "none") {
+      this.setRoleOnActions();
+    } else {
+      this.clearActionAriaAttributes();
     }
-    if (this.selectionMode === "single-persist") {
-      if (!this.actions[index].active) {
-        this.actions.forEach((action, i) => this.updateAction(action, i === index));
-        this.updateSelectedActions([active]);
-        this.calciteActionGroupChange.emit();
+    if (this.selectionMode === "single" || this.selectionMode === "single-persist") {
+      const selected = this.actions.filter((action) => action.active);
+      if (selected.length > 1) {
+        this.actions.forEach((action) => this.updateAction(action, action === selected.at(-1)));
       }
-      return;
     }
+    this.updateSelectedActions(this.selectionMode === "none" ? [] : this.actions.filter((action) => action.active));
   }
-  setMenuOpen(event) {
-    this.menuOpen = !!event.currentTarget.open;
+  syncActions() {
+    const defaultActions = this.defaultSlotRef.value ? getSlotAssignedElements(this.defaultSlotRef.value, "calcite-action") : [];
+    const menuActions = this.menuActionsSlotRef.value ? getSlotAssignedElements(this.menuActionsSlotRef.value, "calcite-action") : [];
+    this._actions = [...defaultActions, ...menuActions];
+    this.syncSelectionState();
+  }
+  syncActionsAndEmitChange() {
+    this.syncActions();
+    this.calciteInternalActionGroupActionsChange.emit();
+  }
+  handleDefaultSlotChange() {
+    this.syncActionsAndEmitChange();
   }
   handleMenuActionsSlotChange(event) {
     this.hasMenuActions = slotChangeHasAssignedElement(event);
+    this.syncActionsAndEmitChange();
   }
   handleActionClick(event) {
     const target = event.composedPath().find((element) => isAction(element));
@@ -162,15 +175,12 @@ class ActionGroup extends LitElement {
   }
   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} .topLayerDisabled=${this.topLayerDisabled}><calcite-action .aria=${{ expanded }} .icon=${ICONS.menu} .scale=${scale} slot=${SLOTS.trigger} .text=${messages.more} .textEnabled=${expanded}></calcite-action><slot name=${SLOTS$1.menuActions} @slotchange=${this.handleMenuActionsSlotChange}></slot><slot name=${SLOTS$1.menuTooltip} slot=${SLOTS.tooltip}></slot></calcite-action-menu>`;
+    return html`<calcite-action-menu .expanded=${expanded} .flipPlacements=${menuFlipPlacements ?? (layout === "horizontal" ? ["top", "bottom"] : ["left", "right"])} .hidden=${!hasMenuActions} .label=${messages.more} @calciteActionMenuOpen=${this.setMenuOpen} .open=${menuOpen} .overlayPositioning=${overlayPositioning} .placement=${menuPlacement ?? (layout === "horizontal" ? "bottom-start" : "leading-start")} .scale=${scale} .topLayerDisabled=${this.topLayerDisabled}><calcite-action .aria=${{ expanded }} .icon=${ICONS.menu} .scale=${scale} slot=${SLOTS.trigger} .text=${messages.more} .textEnabled=${expanded}></calcite-action><slot name=${SLOTS$1.menuActions} @slotchange=${this.handleMenuActionsSlotChange} ${ref(this.menuActionsSlotRef)}></slot><slot name=${SLOTS$1.menuTooltip} slot=${SLOTS.tooltip}></slot></calcite-action-menu>`;
   }
   render() {
-    return html`<div .ariaLabel=${this.label} class=${safeClassMap(CSS.container)} .role=${this.selectionMode === "multiple" || this.selectionMode === "none" ? "group" : "radiogroup"}><slot></slot>${this.renderMenu()}</div>`;
+    return html`<div .ariaLabel=${this.label} class=${safeClassMap(CSS.container)} .role=${this.selectionMode === "multiple" || this.selectionMode === "none" ? "group" : "radiogroup"}><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.defaultSlotRef)}></slot>${this.renderMenu()}</div>`;
   }
 }
-__decorateClass([
-  queryAssignedElements({ selector: "calcite-action" })
-], ActionGroup.prototype, "actions");
 customElement("calcite-action-group", ActionGroup);
 export {
   ActionGroup

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

@@ -2,6 +2,7 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
 import type { Appearance, Scale } from "../interfaces.js";
+import type { Action } from "../calcite-action/customElement.js";
 
 /**
  * @cssproperty [--calcite-action-menu-items-space] - Specifies the space between actions in the menu.
@@ -10,6 +11,12 @@ import type { Appearance, Scale } from "../interfaces.js";
  * @slot [tooltip] - A slot for adding a tooltip for the menu.
  */
 export abstract class ActionMenu extends LitElement {
+  /**
+   * Specifies the `calcite-action`s in the menu.
+   *
+   * @internal
+   */
+  get actions(): Action[];
   /**
    * Specifies the appearance of the component.
    *
@@ -22,8 +29,8 @@ export abstract class ActionMenu extends LitElement {
    * @default false
    */
   accessor expanded: boolean;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[];
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[] | undefined;
   /**
    * Specifies an accessible label for the component.
    *
@@ -59,9 +66,7 @@ export abstract class ActionMenu extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * 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)
@@ -80,9 +85,12 @@ export abstract class ActionMenu extends LitElement {
   readonly calciteActionMenuExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires when the `open` property is toggled. */
   readonly calciteActionMenuOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires after the component's slotted `calcite-action`s change. */
+  readonly calciteInternalActionMenuActionsChange: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteActionMenuCollapse: ActionMenu["calciteActionMenuCollapse"]["detail"];
     calciteActionMenuExpand: ActionMenu["calciteActionMenuExpand"]["detail"];
     calciteActionMenuOpen: ActionMenu["calciteActionMenuOpen"]["detail"];
+    calciteInternalActionMenuActionsChange: ActionMenu["calciteInternalActionMenuActionsChange"]["detail"];
   };
 }

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

@@ -1,30 +1,35 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
-import { ref } from "lit/directives/ref.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
+import { createRef, ref } from "lit/directives/ref.js";
 import { g as getRoundRobinIndex } from "../../chunks/array.js";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
+import { b as getSlotAssignedElements } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { i as isAction } from "../../chunks/resources.js";
+import { i as isActionGroup } from "../../chunks/resources2.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { I as IDS, S as SLOTS, a as ICONS, C as CSS } from "../../chunks/resources2.js";
+import { I as IDS, C as CSS, S as SLOTS, a as ICONS } from "../../chunks/resources3.js";
 const styles = css`:host([scale=s]){--calcite-internal-action-menu-gap: var(--calcite-action-menu-items-space, var(--calcite-spacing-xxs));--calcite-internal-action-menu-padding: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-menu-gap: var(--calcite-action-menu-items-space, var(--calcite-spacing-sm));--calcite-internal-action-menu-padding: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-menu-gap: var(--calcite-action-menu-items-space, var(--calcite-spacing-sm-plus));--calcite-internal-action-menu-padding: var(--calcite-spacing-sm-plus)}:host{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-relative-lg)}::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm);padding-block-end:var(--calcite-internal-action-menu-padding)}.default-trigger{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}.menu{display:flex;max-block-size:45vh;flex-direction:column;flex-wrap:nowrap;overflow-y:auto;overflow-x:hidden;outline:2px solid transparent;outline-offset:2px;gap:var(--calcite-internal-action-menu-gap);padding:var(--calcite-internal-action-menu-padding)}:host([hidden]){display:none}[hidden]{display:none}`;
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
 class ActionMenu extends LitElement {
   constructor() {
-    super(...arguments);
+    super();
     this.guid = guid();
-    this.actionElements = [];
+    this._actions = [];
+    this.navigableActions = [];
+    this.defaultSlotRef = createRef();
+    this.triggerSlotRef = createRef();
     this.menuButtonClick = () => {
       this.toggleOpen();
     };
     this.menuButtonId = IDS.button(this.guid);
     this.menuButtonKeyDown = (event) => {
       const { key } = event;
-      const { actionElements, activeMenuItemIndex, open } = this;
-      if (!actionElements.length) {
+      const { activeMenuItemIndex, navigableActions, open } = this;
+      if (!navigableActions.length) {
         return;
       }
       if (isActivationKey(key)) {
@@ -33,7 +38,7 @@ class ActionMenu extends LitElement {
           this.toggleOpen();
           return;
         }
-        const action = actionElements[activeMenuItemIndex];
+        const action = navigableActions[activeMenuItemIndex];
         if (action) {
           action.click();
         } else {
@@ -49,7 +54,7 @@ class ActionMenu extends LitElement {
         event.preventDefault();
         return;
       }
-      this.handleActionNavigation(event, key, actionElements);
+      this.handleActionNavigation(event, key, navigableActions);
     };
     this.menuId = IDS.menu(this.guid);
     this._open = false;
@@ -68,7 +73,7 @@ class ActionMenu extends LitElement {
       if (!event.composedPath().some(isAction)) {
         return;
       }
-      this.activeMenuItemIndex = this.actionElements?.findIndex((action) => action === event.target);
+      this.activeMenuItemIndex = this.navigableActions.findIndex((action) => action === event.target);
     };
     this.activeMenuItemIndex = -1;
     this.appearance = "solid";
@@ -80,9 +85,11 @@ class ActionMenu extends LitElement {
     this.calciteActionMenuCollapse = createEvent({ cancelable: false });
     this.calciteActionMenuExpand = createEvent({ cancelable: false });
     this.calciteActionMenuOpen = createEvent({ cancelable: false });
+    this.calciteInternalActionMenuActionsChange = createEvent({ cancelable: false });
+    this.listen("calciteInternalActionGroupActionsChange", this.handleActionGroupActionsChange);
   }
   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 }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }] };
+    this.properties = { activeMenuItemIndex: [16, {}, { state: true }], menuButtonEl: [16, {}, { state: true }], appearance: [3, {}, { reflect: true }], expanded: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], label: 1, open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], actions: [32, {}, { attribute: false, readOnly: true }] };
   }
   static {
     this.styles = styles;
@@ -97,6 +104,9 @@ class ActionMenu extends LitElement {
       this.openHandler(open);
     }
   }
+  get actions() {
+    return this._actions;
+  }
   async setFocus(options) {
     return this.focusSetter(() => this.menuButtonEl, options);
   }
@@ -110,7 +120,7 @@ class ActionMenu extends LitElement {
       this.expandedHandler();
     }
     if (changes.has("activeMenuItemIndex") && (this.hasUpdated || this.activeMenuItemIndex !== -1)) {
-      this.updateActions(this.actionElements);
+      this.updateActions(this.navigableActions);
     }
     if (changes.has("expanded") && this.hasUpdated) {
       if (this.expanded) {
@@ -177,15 +187,51 @@ class ActionMenu extends LitElement {
     }
     menuButtonEl.removeEventListener("click", this.menuButtonClick);
     menuButtonEl.removeEventListener("keydown", this.menuButtonKeyDown);
-    this.menuButtonEl = null;
+    this.menuButtonEl = void 0;
   }
-  setMenuButtonEl(event) {
-    const actions = event.target.assignedElements({
-      flatten: true
-    }).filter((el) => el?.matches("calcite-action"));
-    this.slottedMenuButtonEl = actions[0];
+  syncActions() {
+    const triggerSlot = this.triggerSlotRef.value;
+    const triggerActions = triggerSlot ? getSlotAssignedElements(triggerSlot, "calcite-action").filter((action) => !action.classList.contains(CSS.defaultTrigger)) : [];
+    const triggerActionsSet = new Set(triggerActions);
+    const defaultActions = this.defaultSlotRef.value ? getSlotAssignedElements(this.defaultSlotRef.value).flatMap((element) => {
+      if (isAction(element)) {
+        return element;
+      }
+      if (isActionGroup(element)) {
+        return element.actions;
+      }
+      return [];
+    }) : [];
+    const dedupedActions = [];
+    const seenActions = /* @__PURE__ */ new Set();
+    [...triggerActions, ...defaultActions].forEach((action) => {
+      if (seenActions.has(action)) {
+        return;
+      }
+      seenActions.add(action);
+      dedupedActions.push(action);
+    });
+    this._actions = dedupedActions;
+    this.navigableActions = dedupedActions.filter((action) => !triggerActionsSet.has(action) && !action.disabled && !action.hidden);
+    if (!this.open || !this.navigableActions.length) {
+      this.activeMenuItemIndex = -1;
+    } else if (this.activeMenuItemIndex < 0 || this.activeMenuItemIndex >= this.navigableActions.length) {
+      this.activeMenuItemIndex = 0;
+    }
+    this.updateActions(this.navigableActions);
+  }
+  setMenuButtonEl() {
+    this.slottedMenuButtonEl = this.triggerSlotRef.value ? getSlotAssignedElements(this.triggerSlotRef.value, "calcite-action")[0] : void 0;
     this.connectMenuButtonEl();
   }
+  syncActionsAndEmitChange() {
+    this.syncActions();
+    this.calciteInternalActionMenuActionsChange.emit();
+  }
+  handleTriggerSlotChange() {
+    this.setMenuButtonEl();
+    this.syncActionsAndEmitChange();
+  }
   setDefaultMenuButtonEl(el) {
     this.defaultMenuButtonEl = el;
     this.connectMenuButtonEl();
@@ -198,7 +244,7 @@ class ActionMenu extends LitElement {
     el.open = this.open;
   }
   handleCalciteActionClick(event) {
-    if (this.actionElements?.some((action) => event.composedPath().includes(action))) {
+    if (this.navigableActions.some((action) => event.composedPath().includes(action))) {
       this.open = false;
       this.setFocus();
     }
@@ -213,27 +259,23 @@ class ActionMenu extends LitElement {
   setTooltipReferenceElement() {
     const { tooltipEl, expanded, menuButtonEl, open } = this;
     if (tooltipEl) {
-      tooltipEl.referenceElement = !expanded && !open ? menuButtonEl : null;
+      tooltipEl.referenceElement = !expanded && !open ? menuButtonEl : void 0;
     }
   }
   updateActions(actions) {
-    actions?.forEach(this.updateAction);
+    actions.forEach(this.updateAction);
   }
-  async handleDefaultSlotChange(event) {
-    const actions = event.target.assignedElements({
-      flatten: true
-    }).reduce((previousValue, currentValue) => {
-      if (currentValue?.matches("calcite-action")) {
-        previousValue.push(currentValue);
-        return previousValue;
-      }
-      if (currentValue?.matches("calcite-action-group")) {
-        return previousValue.concat(Array.from(currentValue.querySelectorAll("calcite-action")));
-      }
-      return previousValue;
-    }, []);
+  async handleDefaultSlotChange() {
     await this.componentOnReady();
-    this.actionElements = actions.filter((action) => !action.disabled && !action.hidden);
+    this.syncActionsAndEmitChange();
+  }
+  handleActionGroupActionsChange(event) {
+    const group = event.target;
+    const slottedActionGroups = this.defaultSlotRef.value ? getSlotAssignedElements(this.defaultSlotRef.value).filter((element) => isActionGroup(element)) : [];
+    if (!slottedActionGroups.includes(group)) {
+      return;
+    }
+    this.syncActionsAndEmitChange();
   }
   isValidKey(key, supportedKeys) {
     return !!supportedKeys.find((k) => k === key);
@@ -281,14 +323,14 @@ class ActionMenu extends LitElement {
   }
   renderMenuButton() {
     const { appearance, label, scale, expanded } = this;
-    const menuButtonSlot = html`<slot name=${SLOTS.trigger} @slotchange=${this.setMenuButtonEl}><calcite-action .appearance=${appearance} .aria=${{ expanded }} class=${safeClassMap(CSS.defaultTrigger)} .icon=${ICONS.menu} .scale=${scale} .text=${label} .textEnabled=${expanded} ${ref(this.setDefaultMenuButtonEl)}></calcite-action></slot>`;
+    const menuButtonSlot = html`<slot name=${SLOTS.trigger} @slotchange=${this.handleTriggerSlotChange} ${ref(this.triggerSlotRef)}><calcite-action .appearance=${appearance} .aria=${{ expanded }} class=${safeClassMap(CSS.defaultTrigger)} .icon=${ICONS.menu} .scale=${scale} .text=${label} .textEnabled=${expanded} ${ref(this.setDefaultMenuButtonEl)}></calcite-action></slot>`;
     return menuButtonSlot;
   }
   renderMenuItems() {
-    const { actionElements, activeMenuItemIndex, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements } = this;
-    const activeAction = actionElements[activeMenuItemIndex];
+    const { navigableActions, activeMenuItemIndex, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements } = this;
+    const activeAction = navigableActions[activeMenuItemIndex];
     const activeDescendantId = activeAction?.id || null;
-    return html`<calcite-popover auto-close .flipPlacements=${flipPlacements} focus-trap-disabled .label=${label} offset-distance=0 @calcitePopoverClose=${this.handlePopoverClose} @calcitePopoverOpen=${this.handlePopoverOpen} .overlayPositioning=${overlayPositioning} .placement=${placement} pointer-disabled .referenceElement=${menuButtonEl} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} trigger-disabled ${ref(this.setPopoverEl)}><div aria-activedescendant=${activeDescendantId ?? nothing} aria-labelledby=${menuButtonEl?.id ?? nothing} class=${safeClassMap(CSS.menu)} id=${menuId ?? nothing} @click=${this.handleCalciteActionClick} role=menu tabindex=-1><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></calcite-popover>`;
+    return html`<calcite-popover auto-close .flipPlacements=${flipPlacements} focus-trap-disabled .label=${label} offset-distance=0 @calcitePopoverClose=${this.handlePopoverClose} @calcitePopoverOpen=${this.handlePopoverOpen} .overlayPositioning=${overlayPositioning} .placement=${placement} pointer-disabled .referenceElement=${menuButtonEl} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} trigger-disabled ${ref(this.setPopoverEl)}><div aria-activedescendant=${activeDescendantId ?? void 0 ?? nothing} aria-labelledby=${menuButtonEl?.id ?? nothing} class=${safeClassMap(CSS.menu)} id=${menuId ?? nothing} @click=${this.handleCalciteActionClick} role=menu tabindex=-1><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.defaultSlotRef)}></slot></div></calcite-popover>`;
   }
   render() {
     return html`${this.renderMenuButton()}${this.renderMenuItems()}<slot name=${SLOTS.tooltip} @slotchange=${this.updateTooltip}></slot>`;

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

@@ -32,12 +32,16 @@ export abstract class ActionPad extends LitElement {
    * @default "vertical"
    */
   accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      expand?: string;
-      collapse?: string;
-      expandLabel?: string;
-      collapseLabel?: string;
+      expand?: string | undefined;
+      collapse?: string | undefined;
+      expandLabel?: string | undefined;
+      collapseLabel?: string | undefined;
   };
   /**
    * Specifies the type of positioning to use for overlaid content, where:

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

@@ -4,7 +4,7 @@ import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
 import { a as slotChangeGetAssignedElements, f as focusElementInGroup } from "../../chunks/dom.js";
-import { t as toggleChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
+import { l as legacyToggleChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { i as isAction } from "../../chunks/resources.js";
@@ -69,7 +69,7 @@ class ActionPad extends LitElement {
   }
   willUpdate(changes) {
     if (changes.has("expanded") && this.hasUpdated) {
-      toggleChildActionText({ el: this.el, expanded: this.expanded });
+      legacyToggleChildActionText({ el: this.el, expanded: this.expanded });
     }
     if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) {
       this.updateGroups();

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

@@ -56,8 +56,12 @@ export abstract class Alert extends LitElement {
    * @required
    */
   accessor label: string;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { close?: string; };
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { close?: string | undefined; };
   /** Specifies the Unicode numeral system used by the component for localization. */
   accessor numberingSystem: NumberingSystem | undefined;
   /**
@@ -85,9 +89,7 @@ export abstract class Alert extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * 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)

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

@@ -4,7 +4,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { s as slotChangeHasAssignedElement, b as setRequestedIcon } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, d as setRequestedIcon } from "../../chunks/dom.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { N as NumberStringFormat } from "../../chunks/locale.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";

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

@@ -53,13 +53,9 @@ export abstract class Autocomplete extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
   accessor flipPlacements: FlipPlacement[] | undefined;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
   accessor form: string | undefined;
   /**
    * When `true` or not set, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
@@ -92,11 +88,15 @@ export abstract class Autocomplete extends LitElement {
    * @see [MDN - maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
    */
   accessor maxLength: number | undefined;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      clear?: string;
-      loading?: string;
-      required?: string;
+      clear?: string | undefined;
+      loading?: string | undefined;
+      required?: string | undefined;
   };
   /**
    * When the component resides in a form,
@@ -180,9 +180,7 @@ export abstract class Autocomplete extends LitElement {
   /** Specifies the component's suffix text. */
   accessor suffixText: string | undefined;
   /**
-   * 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)

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

@@ -8,7 +8,7 @@ import { debounce } from "es-toolkit";
 import { escapeRegExp } from "es-toolkit/compat";
 import { createRef, ref } from "lit/directives/ref.js";
 import { d as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -21,6 +21,7 @@ import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
 import { u as useForm } from "../../chunks/useForm.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:block}.input-container{position:relative;display:flex;flex:1 1 auto;flex-wrap:nowrap}.input{width:100%;--calcite-input-prefix-size: var(--calcite-autocomplete-input-prefix-size);--calcite-input-suffix-size: var(--calcite-autocomplete-input-suffix-size);--calcite-input-background-color: var(--calcite-autocomplete-input-background-color);--calcite-input-border-color: var(--calcite-autocomplete-input-border-color);--calcite-input-corner-radius: var(--calcite-autocomplete-input-corner-radius);--calcite-input-shadow: var(--calcite-autocomplete-input-shadow);--calcite-input-icon-color: var(--calcite-autocomplete-input-icon-color);--calcite-input-text-color: var(--calcite-autocomplete-input-text-color);--calcite-input-placeholder-text-color: var(--calcite-autocomplete-input-placeholder-text-color);--calcite-input-actions-background-color: var(--calcite-autocomplete-input-actions-background-color);--calcite-input-actions-background-color-hover: var(--calcite-autocomplete-input-actions-background-color-hover);--calcite-input-actions-background-color-press: var(--calcite-autocomplete-input-actions-background-color-press);--calcite-input-actions-icon-color: var(--calcite-autocomplete-input-actions-icon-color);--calcite-input-actions-icon-color-hover: var(--calcite-autocomplete-input-actions-icon-color-hover);--calcite-input-actions-icon-color-press: var(--calcite-autocomplete-input-actions-icon-color-press);--calcite-input-loading-background-color: var(--calcite-autocomplete-input-loading-background-color);--calcite-input-loading-fill-color: var(--calcite-autocomplete-input-loading-fill-color);--calcite-input-prefix-text-color: var(--calcite-autocomplete-input-prefix-text-color);--calcite-input-suffix-text-color: var(--calcite-autocomplete-input-suffix-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.content-container{box-sizing:border-box;width:100%}.floating-ui-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.floating-ui-container{opacity:0;inset-block-start:0;left:0}}:host([top-layer-disabled]) .floating-ui-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown)}.floating-ui-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.floating-ui-container:popover-open{display:block}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.content-container .calcite-floating-ui-anim{width:100%;overflow-y:auto;box-shadow:var(--calcite-shadow-md);max-block-size:var(--calcite-autocomplete-menu-max-size-y, 45vh);color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-autocomplete-corner-radius, var(--calcite-corner-radius-round))}.content--hidden{display:none}@media(forced-colors:active){.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
 const SLOTS = {
   contentBottom: "content-bottom",
@@ -55,6 +56,7 @@ class Autocomplete extends LitElement {
       inputType: "text"
     })(this);
     this.inputId = IDS.input(this.guid);
+    this.labelable = useLabel(this);
     this.listId = IDS.list(this.guid);
     this.messages = useT9n();
     this.transitionProp = "opacity";
@@ -143,7 +145,6 @@ class Autocomplete extends LitElement {
       childList: true,
       subtree: true
     });
-    connectLabel(this);
     this.getAllItemsDebounced();
     connectFloatingUI(this);
     this.cancelable.add(this.getAllItemsDebounced);
@@ -184,7 +185,6 @@ class Autocomplete extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
-    disconnectLabel(this);
     disconnectFloatingUI(this);
   }
   setFloatingElSize() {