@arcgis/map-components 5.2.0-next.11 → 5.2.0-next.111

package/dist/components/arcgis-features/customElement.js

@@ -1,49 +1,50 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as R } from "../../chunks/runtime.js";
-import { css as O, html as a } from "lit";
-import { keyed as V } from "lit/directives/keyed.js";
-import L from "@arcgis/core/widgets/Features/FeaturesViewModel.js";
-import { u as B } from "../../chunks/useT9n.js";
-import { log as D } from "@arcgis/toolkit/log";
-import { classes as A } from "@arcgis/toolkit/dom";
-import { usePropertyChange as S, bypassReadOnly as x } from "@arcgis/lumina/controllers";
-import { m as H } from "../../chunks/useViewModel.js";
-import { LitElement as P, createEvent as y, renderElement as z, nothing as h, safeClassMap as I } from "@arcgis/lumina";
+import { c as L } from "../../chunks/runtime.js";
+import { css as R, html as a } from "lit";
+import { keyed as D } from "lit/directives/keyed.js";
+import B from "@arcgis/core/widgets/Features/FeaturesViewModel.js";
+import { u as H } from "../../chunks/useT9n.js";
+import { log as A } from "@arcgis/toolkit/log";
+import { classes as y } from "@arcgis/toolkit/dom";
+import { useDirection as P, usePropertyChange as z, bypassReadOnly as x } from "@arcgis/lumina/controllers";
+import { m as U } from "../../chunks/useViewModel.js";
+import { LitElement as Z, createEvent as T, renderElement as K, nothing as h, safeClassMap as I } from "@arcgis/lumina";
 import { substitute as u, formatNumber as C } from "@arcgis/core/intl.js";
 import { watch as r } from "@arcgis/core/core/reactiveUtils.js";
-import { t as U, z as Z } from "../../chunks/action-utils.js";
-import { stripHTML as T } from "@arcgis/core/applications/Components/stringUtils.js";
+import { t as j, z as G } from "../../chunks/action-utils.js";
+import { stripHTML as V } from "@arcgis/core/applications/Components/stringUtils.js";
 import E from "@arcgis/core/core/Collection.js";
-import { g as j } from "../../chunks/feature-utils.js";
-import { renderingSanitizer as _ } from "@arcgis/core/applications/Components/sanitizerUtils.js";
-import { initializeProjection as G } from "@arcgis/core/applications/Components/featureUtils.js";
-import K from "@arcgis/core/support/actions/ActionButton.js";
-import { createRef as b, ref as m } from "lit/directives/ref.js";
-const q = O`:host{display:flex;overflow:hidden;flex:1 1 auto}.root{--calcite-color-background: var(--calcite-color-foreground-1);display:flex;overflow:hidden;flex:1 1 auto;flex-direction:column}.root img{image-orientation:from-image}.flow-item-collapsed{--calcite-flow-item-header-border-block-end: none}.container{display:flex;flex:1 1 auto;background-color:var(--calcite-color-foreground-1)}.container calcite-list{width:100%}.container:not(:empty,.content-hidden){padding:var(--arcgis-internal-padding-md, var(--calcite-spacing-md))}.root .arcgis-feature,.root .arcgis-feature-relationship,.root .arcgis-feature-utility-network-associations{background-color:transparent}.heading{word-break:break-word;word-wrap:break-word}.header,.footer{display:flex;align-items:center;justify-content:flex-end;background-color:var(--calcite-color-foreground-1)}.footer{flex:1}.pagination-text{padding-inline:var(--calcite-spacing-sm);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size-sm)}.loader{align-self:center;padding-inline:var(--calcite-spacing-lg)}.pagination-action-bar{flex:1}.pagination-menu-button{padding-inline:var(--calcite-spacing-xxs);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.icon{display:inline-block;flex:0 0 var(--calcite-spacing-lg);width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.action-image{flex:0 0 var(--calcite-spacing-lg);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.header{border-block-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.content-feature{--calcite-flow-item-footer-padding: 0}.feature-menu-observer{position:relative;bottom:var(--calcite-spacing-xxl);z-index:2;text-align:center}.action-exit{transform:scaleX(-1)}`, W = new K({
+import { g as q } from "../../chunks/feature-utils.js";
+import { renderingSanitizer as F } from "@arcgis/core/applications/Components/sanitizerUtils.js";
+import { initializeProjection as W } from "@arcgis/core/applications/Components/featureUtils.js";
+import X from "@arcgis/core/support/actions/ActionButton.js";
+import { createRef as b, ref as w } from "lit/directives/ref.js";
+import { b as J, a as Q, c as Y } from "../../chunks/keyboard-utils.js";
+const ee = R`:host{display:flex;overflow:hidden;flex:1 1 auto}.root{--calcite-color-background: var(--calcite-color-foreground-1);display:flex;overflow:hidden;flex:1 1 auto;flex-direction:column}.root img{image-orientation:from-image}.flow-item-collapsed{--calcite-flow-item-header-border-block-end: none}.container{display:flex;flex:1 1 auto;background-color:var(--calcite-color-foreground-1)}.container calcite-list{width:100%}.container:not(:empty,.content-hidden){padding:var(--arcgis-internal-padding-md, var(--calcite-spacing-md))}.root .arcgis-feature,.root .arcgis-feature-relationship,.root .arcgis-feature-utility-network-associations{background-color:transparent}.heading{word-break:break-word;word-wrap:break-word}.header,.footer{display:flex;align-items:center;justify-content:flex-end;background-color:var(--calcite-color-foreground-1)}.footer{flex:1}.pagination-text{padding-inline:var(--calcite-spacing-sm);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size-sm)}.loader{align-self:center;padding-inline:var(--calcite-spacing-lg)}.pagination-action-bar{flex:1}.pagination-menu-button{padding-inline:var(--calcite-spacing-xxs);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.icon{display:inline-block;flex:0 0 var(--calcite-spacing-lg);width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.action-image{flex:0 0 var(--calcite-spacing-lg);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.header{border-block-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.content-feature{--calcite-flow-item-footer-padding: 0}.feature-menu-observer{position:relative;bottom:var(--calcite-spacing-xxl);z-index:2;text-align:center}.action-exit{transform:scaleX(-1)}`, te = new X({
   icon: "magnifying-glass-plus",
   id: "zoom-to-feature",
   title: "{messages.zoom}"
-}), M = W.clone();
-function X(k) {
+}), M = te.clone(), ie = 25;
+function se(k) {
   return k?.declaredClass.startsWith("esri.layers.") ?? !1;
 }
-const J = H(L);
-class Q extends P {
+const ne = U(B);
+class oe extends Z {
   constructor() {
-    super(...arguments), this._fetchFeaturesController = null, this._featureMenuIntersectionObserverCallback = ([e]) => {
+    super(...arguments), this._direction = P(), this._fetchFeaturesController = null, this._featureMenuIntersectionObserverCallback = ([e]) => {
       e?.isIntersecting && this.viewModel.featurePage != null && this.viewModel.featurePage++;
     }, this._featureMenuIntersectionObserver = new IntersectionObserver(this._featureMenuIntersectionObserverCallback, {
       root: window.document
-    }), this._featureMenuIntersectionObserverNode = null, this._rootFlowItemNode = b(), this._featureMenuViewportNode = b(), this._actionBarMenuNode = b(), this._flowContainerNode = b(), this.messages = B(), this._selectedFeatureComponent = b(), this._cancelOpenRelatedFeature = () => {
+    }), this._featureMenuIntersectionObserverNode = null, this._rootFlowItemNode = b(), this._featureMenuViewportNode = b(), this._actionBarMenuNode = b(), this._flowContainerNode = b(), this.messages = H(), this._selectedFeatureComponent = b(), this._cancelOpenRelatedFeature = () => {
       const { _openRelatedFeatureAbortController: e } = this;
       e && e.abort(), this._openRelatedFeatureAbortController = null;
-    }, this._openRelatedFeatureAbortController = null, this.flowItems = new E(), this.viewModel = J(this), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.autoDestroyDisabled = !1, this.collapsed = !1, this.content = this.viewModel.content, this.defaultPopupTemplateEnabled = this.viewModel.defaultPopupTemplateEnabled, this.featureCount = this.viewModel.featureCount, this.featureMenuOpen = this.viewModel.featureMenuOpen, this.featureMenuTitle = this.viewModel.featureMenuTitle, this.featureNavigationTop = !1, this.features = this.viewModel.features, this.featuresPerPage = this.viewModel.featuresPerPage, this.featureViewModelAbilities = this.viewModel.featureViewModelAbilities, this.goToOverride = this.viewModel.goToOverride, this.headerActions = new E(), this.heading = this.viewModel.title, this.headingLevel = 2, this.hideActionBar = !1, this.hideCloseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideHeading = !1, this.hideSelectFeature = !1, this.hideSpinner = !1, this.hideContent = !1, this.hideExpressionContent = !1, this.hideLastEditedInfo = !1, this.highlightDisabled = this.viewModel.highlightEnabled, this.includeDefaultActionsDisabled = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.map = this.viewModel.map, this.open = this.viewModel.visible, this.promises = this.viewModel.promises, this.responsiveActionsEnabled = !1, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.showCollapseButton = !1, this.spatialReference = this.viewModel.spatialReference, this.state = this.viewModel.state, this.timeZone = this.viewModel.timeZone, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.view = this.viewModel.view, this.arcgisPropertyChange = S()("active", "collapsed", "effectiveHeading", "featureCount", "featureMenuOpen", "features", "promises", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "open"), this.arcgisReady = y(), this.arcgisClose = y(), this.arcgisTriggerAction = y();
+    }, this._spinnerVisible = !1, this._spinnerVisibilityTimeout = null, this._openRelatedFeatureAbortController = null, this.flowItems = new E(), this.viewModel = ne(this), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.autoDestroyDisabled = !1, this.collapsed = !1, this.content = this.viewModel.content, this.defaultPopupTemplateEnabled = this.viewModel.defaultPopupTemplateEnabled, this.featureCount = this.viewModel.featureCount, this.featureMenuOpen = this.viewModel.featureMenuOpen, this.featureMenuTitle = this.viewModel.featureMenuTitle, this.featureNavigationTop = !1, this.features = this.viewModel.features, this.featuresPerPage = this.viewModel.featuresPerPage, this.featureViewModelAbilities = this.viewModel.featureViewModelAbilities, this.goToOverride = this.viewModel.goToOverride, this.headerActions = new E(), this.heading = this.viewModel.title, this.headingLevel = 2, this.hideActionBar = !1, this.hideCloseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideHeading = !1, this.hideSelectFeature = !1, this.hideSpinner = !1, this.hideContent = !1, this.hideExpressionContent = !1, this.hideLastEditedInfo = !1, this.highlightDisabled = this.viewModel.highlightEnabled, this.includeDefaultActionsDisabled = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.map = this.viewModel.map, this.open = this.viewModel.visible, this.promises = this.viewModel.promises, this.responsiveActionsEnabled = !1, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.showCollapseButton = !1, this.spatialReference = this.viewModel.spatialReference, this.state = this.viewModel.state, this.timeZone = this.viewModel.timeZone, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.view = this.viewModel.view, this.arcgisPropertyChange = z()("active", "collapsed", "effectiveHeading", "featureCount", "featureMenuOpen", "features", "promises", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "open"), this.arcgisReady = T(), this.arcgisClose = T(), this.arcgisTriggerAction = T();
   }
   static {
-    this.properties = { _openRelatedFeatureAbortController: 16, flowItems: 16, _hideActionText: 16, _featureNavigationVisible: 16, _isCollapsed: 16, _collapseEnabled: 16, _featureFlowItemSelected: 16, viewModel: 0, actions: 0, active: 0, autoDestroyDisabled: 5, collapsed: 5, content: 1, defaultPopupTemplateEnabled: 5, effectiveHeading: 32, featureCount: 9, featureMenuOpen: 5, featureMenuTitle: 1, featureNavigationTop: 5, features: 0, featuresPerPage: 9, featureViewModelAbilities: 0, goToOverride: 0, headerActions: 0, heading: 1, headingLevel: 9, hideActionBar: 5, hideCloseButton: 5, hideFeatureMenuHeading: 5, hideFeatureNavigation: 5, hideFeatureListLayerTitle: 5, hideHeading: 5, hideSelectFeature: 5, hideSpinner: 5, hideContent: 5, chartAnimationDisabled: 5, hideAttachmentsContent: 5, hideCustomContent: 5, hideExpressionContent: 5, hideFieldsContent: 5, hideMediaContent: 5, hideRelationshipContent: 5, hideTextContent: 5, hideUtilityNetworkContent: 5, hideLastEditedInfo: 5, highlightDisabled: 5, icon: 1, includeDefaultActionsDisabled: 5, initialDisplayMode: 1, label: 1, location: 0, map: 0, messageOverrides: 0, open: 5, referenceElement: 1, promises: 0, responsiveActionsEnabled: 5, selectedDrillInFeature: 32, selectedFeature: 0, selectedFeatureComponent: 32, selectedFeatureIndex: 9, showCollapseButton: 5, spatialReference: 0, state: 32, timeZone: 1, updateLocationEnabled: 5, view: 0 };
+    this.properties = { _openRelatedFeatureAbortController: 16, flowItems: 16, _hideActionText: 16, _featureNavigationVisible: 16, _isCollapsed: 16, _collapseEnabled: 16, _featureFlowItemSelected: 16, viewModel: 0, actions: 0, active: 0, autoDestroyDisabled: 5, collapseDirection: 1, collapsed: 5, content: 1, defaultPopupTemplateEnabled: 5, effectiveHeading: 32, featureCount: 9, featureMenuOpen: 5, featureMenuTitle: 1, featureNavigationTop: 5, features: 0, featuresPerPage: 9, featureViewModelAbilities: 0, goToOverride: 0, headerActions: 0, heading: 1, headingLevel: 9, hideActionBar: 5, hideCloseButton: 5, hideFeatureMenuHeading: 5, hideFeatureNavigation: 5, hideFeatureListLayerTitle: 5, hideHeading: 5, hideSelectFeature: 5, hideSpinner: 5, hideContent: 5, chartAnimationDisabled: 5, hideAttachmentsContent: 5, hideCustomContent: 5, hideExpressionContent: 5, hideFieldsContent: 5, hideMediaContent: 5, hideRelationshipContent: 5, hideTextContent: 5, hideUtilityNetworkContent: 5, hideLastEditedInfo: 5, highlightDisabled: 5, icon: 1, includeDefaultActionsDisabled: 5, initialDisplayMode: 1, label: 1, location: 0, map: 0, messageOverrides: 0, open: 5, referenceElement: 1, promises: 0, responsiveActionsEnabled: 5, selectedDrillInFeature: 32, selectedFeature: 0, selectedFeatureComponent: 32, selectedFeatureIndex: 9, showCollapseButton: 5, spatialReference: 0, state: 32, timeZone: 1, updateLocationEnabled: 5, view: 0 };
   }
   static {
-    this.styles = q;
+    this.styles = ee;
   }
   get _hideActionText() {
     if (!this.responsiveActionsEnabled)
@@ -118,12 +119,12 @@ class Q extends P {
     this.open = !1;
   }
   async destroy() {
-    await this.manager.destroy(), this._removeSpinner(this.referenceElement), this._cancelOpenRelatedFeature(), this._removeFlowItems(), this._unobserveFeatureMenuObserver(), this._cancelFetchingFeatures(), this._featureMenuIntersectionObserver?.disconnect();
+    await this.manager.destroy(), this._clearSpinnerVisibilityTimeout(), this._removeSpinner(this.referenceElement), this._cancelOpenRelatedFeature(), this._removeFlowItems(), this._unobserveFeatureMenuObserver(), this._cancelFetchingFeatures(), this._featureMenuIntersectionObserver?.disconnect();
   }
   async fetchFeatures(e, t) {
     this._cancelFetchingFeatures();
     const { signal: s } = t ?? {}, i = new AbortController(), { signal: n } = i, o = s ? AbortSignal.any([n, s]) : n;
-    if (this._fetchFeaturesController = i, !e && this.view && this.location && (await G(this.location.spatialReference, this.view.spatialReference, null, {
+    if (this._fetchFeaturesController = i, !e && this.view && this.location && (await W(this.location.spatialReference, this.view.spatialReference, null, {
       signal: o
     }), e = this.view.toScreen(this.location) ?? void 0), !e)
       return;
@@ -134,23 +135,25 @@ class Q extends P {
     this.location = l.location, this.promises = l.pendingFeatures;
   }
   async next() {
-    return D("warn", this, "The return type of FeaturesViewModel on the next() method is deprecated. At 6.0, this method will return void."), this.viewModel.next();
+    return A("warn", this, "The return type of FeaturesViewModel on the next() method is deprecated. At 6.0, this method will return void."), this.viewModel.next();
   }
   async previous() {
-    return D("warn", this, "The return type of FeaturesViewModel on the previous() method is deprecated. At 6.0, this method will return void."), this.viewModel.previous();
+    return A("warn", this, "The return type of FeaturesViewModel on the previous() method is deprecated. At 6.0, this method will return void."), this.viewModel.previous();
   }
   async setFocus() {
     this._flowContainerNode.value?.setFocus();
   }
   async triggerAction(e) {
-    if (!e.disabled)
-      return e?.type === "toggle" && (e.value = !e.value), await U(e, this.viewModel);
+    if (A("warn", this, "The triggerAction() method is deprecated since 5.1. Trigger actions with manual user interaction within the component.", {
+      once: !0
+    }), !e.disabled)
+      return e?.type === "toggle" && (e.value = !e.value), await j(e, this.viewModel);
   }
   connectedCallback() {
     super.connectedCallback(), this._createSpinner();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._removeSpinner(this.referenceElement);
+    super.disconnectedCallback(), this._clearSpinnerVisibilityTimeout(), this._removeSpinner(this.referenceElement);
   }
   loaded() {
     this.manager.onLifecycle(() => [
@@ -204,7 +207,7 @@ class Q extends P {
       const i = s?.graphic;
       if (!i)
         return;
-      const n = j(i), o = X(n) ? n : null, l = t.get(o) ?? [];
+      const n = q(i), o = se(n) ? n : null, l = t.get(o) ?? [];
       t.set(o, [...l, s]);
     }), t;
   }
@@ -275,7 +278,7 @@ class Q extends P {
   }
   _onMainKeydown(e) {
     const { key: t } = e;
-    t === "ArrowLeft" && (e.stopPropagation(), this._handleFeatureMenuBack(), this.previous(), this.setFocus()), t === "ArrowRight" && (e.stopPropagation(), this._handleFeatureMenuBack(), this.next(), this.setFocus());
+    e.defaultPrevented || J(e) || (Q(t, this._direction, { horizontalOnly: !0 }) && (e.stopPropagation(), e.preventDefault(), this._handleFeatureMenuBack(), this.previous(), this.setFocus()), Y(t, this._direction, { horizontalOnly: !0 }) && (e.stopPropagation(), e.preventDefault(), this._handleFeatureMenuBack(), this.next(), this.setFocus()));
   }
   _featureMenuViewportScrollTop() {
     this._featureMenuViewportNode.value?.scrollContentTo({ top: 0 });
@@ -321,9 +324,17 @@ class Q extends P {
   _removeSpinner(e) {
     e?.manager?.component?.extraContent?.remove(this._spinnerEl), this._spinnerEl = void 0;
   }
+  _clearSpinnerVisibilityTimeout() {
+    this._spinnerVisibilityTimeout != null && (clearTimeout(this._spinnerVisibilityTimeout), this._spinnerVisibilityTimeout = null);
+  }
+  _getSpinnerTrackLocation() {
+    return !this.hideSpinner && this.viewModel.visible && this.viewModel?.waitingForResult ? this._spinnerVisible ? !0 : (this._spinnerVisibilityTimeout ??= setTimeout(() => {
+      this._spinnerVisibilityTimeout = null, this._spinnerVisible = !0, this._createSpinner();
+    }, ie), !1) : (this._clearSpinnerVisibilityTimeout(), this._spinnerVisible = !1, !1);
+  }
   _createSpinner() {
     const e = this.referenceElement;
-    e && (this._removeSpinner(e), this._spinnerEl = z(a`<arcgis-spinner .label=${this.messages.loading ?? ""} .trackLocation=${!this.hideSpinner && this.viewModel.visible && this.viewModel?.waitingForResult} .location=${this.viewModel?.location ?? void 0} .view=${this.viewModel?.view ?? void 0}></arcgis-spinner>`), e.manager?.component?.extraContent?.add(this._spinnerEl));
+    e && (this._removeSpinner(e), this._spinnerEl = K(a`<arcgis-spinner .label=${this.messages.loading ?? ""} .trackLocation=${this._getSpinnerTrackLocation()} .location=${this.viewModel?.location ?? void 0} .view=${this.viewModel?.view ?? void 0}></arcgis-spinner>`), e.manager?.component?.extraContent?.add(this._spinnerEl));
   }
   render() {
     return a`<div class="root" @keydown=${this._onMainKeydown}>${this._renderHeader()}${this._renderContentContainer()}</div>`;
@@ -348,25 +359,25 @@ class Q extends P {
     })}</div>`;
   }
   _renderFeatureMenuButton() {
-    const { messages: e, viewModel: t } = this, { featureCount: s, selectedFeatureIndex: i, pendingPromisesCount: n } = t;
-    return a`<calcite-action class="pagination-menu-button" icon=list .label=${e.selectFeature} .loading=${n > 0} @click=${this._handlePaginationMenuButton} .text=${u(e.pageText ?? "", {
-      index: C(i + 1),
+    const { messages: e, viewModel: t } = this, { featureCount: s, streamingFeatures: i, selectedFeatureIndex: n, pendingPromisesCount: o } = t, l = o > 0 || i;
+    return a`<calcite-action class="pagination-menu-button" icon=list .label=${e.selectFeature} .loading=${l} @click=${this._handlePaginationMenuButton} .text=${u(e.pageText ?? "", {
+      index: C(n + 1),
       total: C(s)
     })} text-enabled title=${e.selectFeature ?? h}></calcite-action>`;
   }
   _renderPagination() {
     const { previous: e, next: t } = this.messages;
-    return a`<calcite-action-bar class="pagination-action-bar" expand-disabled layout=horizontal overflow-actions-disabled scale=s><calcite-action-group scale=s><calcite-action class="pagination-previous" icon=chevron-left icon-flip-rtl .label=${e ?? ""} @click=${this._previousFeature} .text=${e ?? ""} title=${e ?? "" ?? h}></calcite-action><calcite-action icon=chevron-right icon-flip-rtl .label=${t ?? ""} @click=${this._nextFeature} .text=${t ?? ""} title=${t ?? "" ?? h}></calcite-action></calcite-action-group></calcite-action-bar>`;
+    return a`<calcite-action-bar class="pagination-action-bar" expand-toggle-disabled layout=horizontal overflow-mode=none scale=s><calcite-action-group scale=s><calcite-action class="pagination-previous" icon=chevron-left icon-flip-rtl .label=${e ?? ""} @click=${this._previousFeature} .text=${e ?? ""} title=${e ?? "" ?? h}></calcite-action><calcite-action icon=chevron-right icon-flip-rtl .label=${t ?? ""} @click=${this._nextFeature} .text=${t ?? ""} title=${t ?? "" ?? h}></calcite-action></calcite-action-group></calcite-action-bar>`;
   }
   _renderFeatureMenuItem(e) {
     const { initialDisplayMode: t } = this, { selectedFeatureViewModel: s, featureViewModels: i } = this.viewModel, n = e === s, o = i.indexOf(e);
-    return a`<calcite-list-item @blur=${this._removeActiveFeature} @focus=${() => this._setActiveFeature(o)} @mouseleave=${this._removeActiveFeature} @mouseover=${() => this._setActiveFeature(o)} .selected=${n} @calciteListItemSelect=${() => this._selectFeature(o)}><span .innerHTML=${(_.sanitize(e.title) || this.messages.untitled) ?? ""} slot=content></span>${t === "list" ? a`<calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon>` : null}</calcite-list-item>`;
+    return a`<calcite-list-item @blur=${this._removeActiveFeature} @focus=${() => this._setActiveFeature(o)} @mouseleave=${this._removeActiveFeature} @mouseover=${() => this._setActiveFeature(o)} .selected=${n} @calciteListItemSelect=${() => this._selectFeature(o)}><span .innerHTML=${(F.sanitize(e.title) || this.messages.untitled) ?? ""} slot=content></span>${t === "list" ? a`<calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon>` : null}</calcite-list-item>`;
   }
   _renderFeatureMenu() {
     const { messages: e, viewModel: t } = this, s = this._groupResultsByLayer(), i = this.initialDisplayMode === "list" ? "none" : "single";
     return t.featureViewModels.length ? a`<calcite-list display-mode=flat .label=${e?.featuresList ?? ""} selection-appearance=icon .selectionMode=${i}>${Array.from(s.keys(), (n) => {
       const o = s.get(n)?.map((c) => this._renderFeatureMenuItem(c)), l = n ? n.title ?? this.messages.untitled : null;
-      return !this.hideFeatureListLayerTitle && l !== null ? V(n ?? "map-graphics", a`<calcite-list-item-group .heading=${l}>${o}</calcite-list-item-group>`) : o;
+      return !this.hideFeatureListLayerTitle && l !== null ? D(n ?? "map-graphics", a`<calcite-list-item-group .heading=${l}>${o}</calcite-list-item-group>`) : o;
     })}</calcite-list>` : null;
   }
   _renderHeaderAction(e) {
@@ -377,43 +388,43 @@ class Q extends P {
     return this.headerActions.map((e) => this._renderHeaderAction(e)).toArray();
   }
   _renderContentFeature() {
-    const { headingLevel: e, hideCloseButton: t, _isCollapsed: s, _collapseEnabled: i, _featureFlowItemSelected: n, featureNavigationTop: o, flowItems: l, initialDisplayMode: c, selectedFeature: f, hideHeading: v } = this, { active: g, selectedFeatureViewModel: p, content: w } = this.viewModel, d = this._getHeading();
+    const { headingLevel: e, hideCloseButton: t, _isCollapsed: s, _collapseEnabled: i, _featureFlowItemSelected: n, featureNavigationTop: o, flowItems: l, initialDisplayMode: c, selectedFeature: f, hideHeading: g } = this, { active: v, selectedFeatureViewModel: p, content: m } = this.viewModel, d = this._getHeading();
     if (c === "list" && !f)
       return null;
-    const F = l.length === 0 && n, $ = p ? !p.content : !w;
-    return a`<calcite-flow-item class=${I(A({
+    const _ = l.length === 0 && n, $ = p ? !p.content : !m;
+    return a`<calcite-flow-item class=${I(y({
       "content-feature": !0,
       "flow-item-collapsed": s
-    }))} .closable=${!t} .closed=${!g} .collapsed=${s} .collapseDirection=${o ? "down" : "up"} .collapsible=${i} .headingLevel=${e} .selected=${F} @calciteFlowItemBack=${this._handleFeatureBack} .loading=${!!this._openRelatedFeatureAbortController} .messageOverrides=${{ collapse: this.messages.collapse, expand: this.messages.expand }} @calciteFlowItemClose=${this._handleClose} @calciteFlowItemToggle=${this._handleCollapseToggle} .heading=${!v && d ? T(d) : void 0} ${m(this._rootFlowItemNode)}>${!v && d ? a`<div slot=heading><div .innerHTML=${_.sanitize(d ?? "") ?? ""}></div></div>` : null}${this._renderHeaderActions()}${this._renderActionBar()}<div class=${I(A("container", "content-container", {
+    }))} .closable=${!t} .closed=${!v} .collapsed=${s} .collapseDirection=${this.collapseDirection ?? (o ? "down" : "up")} .collapsible=${i} .headingLevel=${e} .selected=${_} @calciteFlowItemBack=${this._handleFeatureBack} .loading=${!!this._openRelatedFeatureAbortController} .messageOverrides=${{ collapse: this.messages.collapse, expand: this.messages.expand }} @calciteFlowItemClose=${this._handleClose} @calciteFlowItemToggle=${this._handleCollapseToggle} .heading=${!g && d ? V(d) : void 0} ${w(this._rootFlowItemNode)}>${!g && d ? a`<div slot=heading><div .innerHTML=${F.sanitize(d ?? "") ?? ""}></div></div>` : null}${this._renderHeaderActions()}${this._renderActionBar()}<div class=${I(y("container", "content-container", {
       "content-hidden": $
     }))}>${this._renderContent()}</div>${this._renderFooter()}</calcite-flow-item>`;
   }
   _renderFeatureMenuContainer() {
-    const { viewModel: e, hideCloseButton: t, featureMenuTitle: s, messages: i, initialDisplayMode: n, featureMenuOpen: o, _featureFlowItemSelected: l, _collapseEnabled: c, _isCollapsed: f, featureNavigationTop: v, headingLevel: g } = this, { active: p, featureViewModels: w, pendingPromisesCount: d } = e, F = s ?? i.selectFeature;
+    const { viewModel: e, hideCloseButton: t, featureMenuTitle: s, messages: i, initialDisplayMode: n, featureMenuOpen: o, _featureFlowItemSelected: l, _collapseEnabled: c, _isCollapsed: f, featureNavigationTop: g, headingLevel: v } = this, { active: p, featureViewModels: m, streamingFeatures: d, pendingPromisesCount: _ } = e, $ = _ > 0 || d, N = s ?? i.selectFeature;
     if (n === "feature" && !o)
       return null;
-    const $ = !l;
-    return a`<calcite-flow-item class=${I(A({
+    const O = !l;
+    return a`<calcite-flow-item class=${I(y({
       "flow-item-collapsed": f
-    }))} .closable=${n === "list" && !t} .closed=${!p} .collapsed=${n === "list" && f} .collapseDirection=${v ? "down" : "up"} .collapsible=${n === "list" && c} .messageOverrides=${{ collapse: this.messages.collapse, expand: this.messages.expand }} .description=${this.hideFeatureMenuHeading ? void 0 : u(i.total ?? "", {
-      total: w.length
-    })} .heading=${this.hideFeatureMenuHeading ? void 0 : F} .headingLevel=${g} .loading=${e.waitingForContents} .selected=${$} @calciteFlowItemBack=${(N) => {
-      N.preventDefault(), this._handleFeatureMenuBack();
-    }} @calciteFlowItemClose=${this._handleClose} @calciteFlowItemToggle=${this._handleCollapseToggle} ${m(this._featureMenuViewportNode)}>${n === "list" ? this._renderHeaderActions() : null}${d > 0 ? a`<calcite-loader class="loader" inline .label=${i.loading ?? ""} slot=header-actions-end></calcite-loader>` : null}<div class="container">${this._renderFeatureMenu()}</div><div class="feature-menu-observer" ${m(this._featureMenuIntersectionObserverCreated)}></div>${n === "feature" ? a`<calcite-button appearance=transparent @click=${this._handleFeatureMenuBack} slot=footer-start width=full>${i.back}</calcite-button>` : null}</calcite-flow-item>`;
+    }))} .closable=${n === "list" && !t} .closed=${!p} .collapsed=${n === "list" && f} .collapseDirection=${this.collapseDirection ?? (g ? "down" : "up")} .collapsible=${n === "list" && c} .messageOverrides=${{ collapse: this.messages.collapse, expand: this.messages.expand }} .description=${this.hideFeatureMenuHeading ? void 0 : u(i.total ?? "", {
+      total: m.length
+    })} .heading=${this.hideFeatureMenuHeading ? void 0 : N} .headingLevel=${v} .loading=${e.waitingForContents} .selected=${O} @calciteFlowItemBack=${(S) => {
+      S.preventDefault(), this._handleFeatureMenuBack();
+    }} @calciteFlowItemClose=${this._handleClose} @calciteFlowItemToggle=${this._handleCollapseToggle} ${w(this._featureMenuViewportNode)}>${n === "list" ? this._renderHeaderActions() : null}${$ ? a`<calcite-loader class="loader" inline .label=${i.loading ?? ""} slot=header-actions-end></calcite-loader>` : null}<div class="container">${this._renderFeatureMenu()}</div><div class="feature-menu-observer" ${w(this._featureMenuIntersectionObserverCreated)}></div>${n === "feature" ? a`<calcite-button appearance=transparent @click=${this._handleFeatureMenuBack} slot=footer-start width=full>${i.back}</calcite-button>` : null}</calcite-flow-item>`;
   }
   _renderFlowItem(e, t) {
-    const { messages: s, hideCloseButton: i, hideSelectFeature: n, active: o, hideHeading: l } = this, c = "graphic" in e && "isFeatureFromTable" in e && !e.isFeatureFromTable, f = c && !n, v = e.flowType === "feature-association", g = s.returnToInitialFeature ?? "", p = s?.selectFeature, w = this._getActionTitle(M), d = !this.hideActionBar && v && c;
-    return a`<calcite-flow-item .closable=${!i} .closed=${!o} .description=${T(this._getDrillInFlowItemDescription(e) ?? "")} .heading=${l ? void 0 : T(e.heading ?? "")} .selected=${t} @calciteFlowItemBack=${(F) => {
-      F.preventDefault(), this._handleDrillInBackClick();
-    }} .loading=${!!this._openRelatedFeatureAbortController} @calciteFlowItemClose=${this._handleClose}>${l ? null : a`<div slot=heading><div .innerHTML=${_.sanitize(e.heading ?? "") ?? ""}></div></div>`}<div slot=description><div .innerHTML=${_.sanitize(this._getDrillInFlowItemDescription(e) ?? "") ?? ""}></div></div><calcite-action class="action-exit" icon=move-up @click=${this._removeFlowItems} slot=header-actions-start .text=${g ?? ""} title=${g ?? "" ?? h}></calcite-action>${f ? a`<calcite-action icon=zoom-to-object @click=${() => this._openRelatedFeature(e)} slot=header-actions-end .text=${p ?? ""} title=${p ?? h}></calcite-action>` : null}${d ? a`<calcite-action-bar expand-disabled expanded scale=s slot=action-bar><calcite-action-group overlay-positioning=fixed scale=s><calcite-action .disabled=${M.disabled} .icon=${M.icon ?? void 0} .loading=${M.active} scale=s text-enabled .text=${w} title=${w ?? h} @click=${() => Z(this.viewModel, M, e)}></calcite-action></calcite-action-group></calcite-action-bar>` : null}<div class="container">${e}</div></calcite-flow-item>`;
+    const { messages: s, hideCloseButton: i, hideSelectFeature: n, active: o, hideHeading: l } = this, c = "graphic" in e && "isFeatureFromTable" in e && !e.isFeatureFromTable, f = c && !n, g = e.flowType === "feature-association", v = s.returnToInitialFeature ?? "", p = s?.selectFeature, m = this._getActionTitle(M), d = !this.hideActionBar && g && c;
+    return a`<calcite-flow-item .closable=${!i} .closed=${!o} .description=${V(this._getDrillInFlowItemDescription(e) ?? "")} .heading=${l ? void 0 : V(e.heading ?? "")} .selected=${t} @calciteFlowItemBack=${(_) => {
+      _.preventDefault(), this._handleDrillInBackClick();
+    }} .loading=${!!this._openRelatedFeatureAbortController} @calciteFlowItemClose=${this._handleClose}>${l ? null : a`<div slot=heading><div .innerHTML=${F.sanitize(e.heading ?? "") ?? ""}></div></div>`}<div slot=description><div .innerHTML=${F.sanitize(this._getDrillInFlowItemDescription(e) ?? "") ?? ""}></div></div><calcite-action class="action-exit" icon=move-up @click=${this._removeFlowItems} slot=header-actions-start .text=${v ?? ""} title=${v ?? "" ?? h}></calcite-action>${f ? a`<calcite-action icon=zoom-to-object @click=${() => this._openRelatedFeature(e)} slot=header-actions-end .text=${p ?? ""} title=${p ?? h}></calcite-action>` : null}${d ? a`<calcite-action-bar expand-toggle-disabled expanded scale=s slot=action-bar><calcite-action-group overlay-positioning=fixed scale=s><calcite-action .disabled=${M.disabled} .icon=${M.icon ?? void 0} .loading=${M.active} scale=s text-enabled .text=${m} title=${m ?? h} @click=${() => G(this.viewModel, M, e)}></calcite-action></calcite-action-group></calcite-action-bar>` : null}<div class="container">${e}</div></calcite-flow-item>`;
   }
   _renderContentContainer() {
     const e = this.flowItems?.toArray(), t = e?.map((i, n) => this._renderFlowItem(i, this._featureFlowItemSelected && n === e.length - 1)), s = this.initialDisplayMode === "list" ? [this._renderFeatureMenuContainer(), this._renderContentFeature(), t] : [this._renderContentFeature(), t, this._renderFeatureMenuContainer()];
-    return a`<calcite-flow ${m(this._flowContainerNode)}>${s}</calcite-flow>`;
+    return a`<calcite-flow ${w(this._flowContainerNode)}>${s}</calcite-flow>`;
   }
   _renderActionBar() {
     const t = this.viewModel.selectedFeatureViewModel?.isFeatureFromTable && !this.location ? this.viewModel.allActions.filter((s) => s.id !== M.id) : this.viewModel.allActions;
-    return !this._isCollapsed && !this.hideActionBar && t.length ? a`<calcite-action-bar expand-disabled .expanded=${!this._hideActionText} scale=s slot=action-bar><calcite-action-group overlay-positioning=fixed scale=s ${m(this._actionBarMenuNode)}>${this._renderActions()}</calcite-action-group></calcite-action-bar>` : null;
+    return !this._isCollapsed && !this.hideActionBar && t.length ? a`<calcite-action-bar expand-toggle-disabled .expanded=${!this._hideActionText} scale=s slot=action-bar><calcite-action-group overlay-positioning=fixed scale=s ${w(this._actionBarMenuNode)}>${this._renderActions()}</calcite-action-group></calcite-action-bar>` : null;
   }
   _renderActions() {
     return this.viewModel.allActions.toArray().map((e) => {
@@ -423,10 +434,10 @@ class Q extends P {
   }
   _renderContent() {
     const { content: e, selectedFeatureViewModel: t } = this.viewModel;
-    return t ? a`<arcgis-feature .autoDestroyDisabled=${this.autoDestroyDisabled} .chartAnimationDisabled=${this.chartAnimationDisabled} .defaultPopupTemplateEnabled=${this.defaultPopupTemplateEnabled} .flowItems=${this.flowItems} .graphic=${t.graphic} .headingLevel=${this.headingLevel + 1} .hideAttachmentsContent=${this.hideAttachmentsContent} .hideContent=${this.hideContent} .hideCustomContent=${this.hideCustomContent} .hideExpressionContent=${this.hideExpressionContent} .hideFieldsContent=${this.hideFieldsContent} hide-heading .hideLastEditedInfo=${this.hideLastEditedInfo} .hideMediaContent=${this.hideMediaContent} .hideTextContent=${this.hideTextContent} .location=${this.location} .map=${this.map} .referenceElement=${this.referenceElement} .showRelationshipContent=${!this.hideRelationshipContent} .showUtilityNetworkContent=${!this.hideUtilityNetworkContent} .spatialReference=${this.spatialReference} .timeZone=${this.timeZone} ${m(this._selectedFeatureComponent)}></arcgis-feature>` : typeof e == "string" ? V(e, a`<div .innerHTML=${_.sanitize(e) ?? ""}></div>`) : e ?? null;
+    return t ? a`<arcgis-feature .autoDestroyDisabled=${this.autoDestroyDisabled} .chartAnimationDisabled=${this.chartAnimationDisabled} .defaultPopupTemplateEnabled=${this.defaultPopupTemplateEnabled} .flowItems=${this.flowItems} .graphic=${t.graphic} .headingLevel=${this.headingLevel + 1} .hideAttachmentsContent=${this.hideAttachmentsContent} .hideContent=${this.hideContent} .hideCustomContent=${this.hideCustomContent} .hideExpressionContent=${this.hideExpressionContent} .hideFieldsContent=${this.hideFieldsContent} hide-heading .hideLastEditedInfo=${this.hideLastEditedInfo} .hideMediaContent=${this.hideMediaContent} .hideTextContent=${this.hideTextContent} .location=${this.location} .map=${this.map} .messageOverrides=${this.messageOverrides} .referenceElement=${this.referenceElement} .showRelationshipContent=${!this.hideRelationshipContent} .showUtilityNetworkContent=${!this.hideUtilityNetworkContent} .spatialReference=${this.spatialReference} .timeZone=${this.timeZone} ${w(this._selectedFeatureComponent)}></arcgis-feature>` : typeof e == "string" ? D(e, a`<div .innerHTML=${F.sanitize(e) ?? ""}></div>`) : e ?? null;
   }
 }
-R("arcgis-features", Q);
+L("arcgis-features", oe);
 export {
-  Q as ArcgisFeatures
+  oe as ArcgisFeatures
 };

package/dist/components/arcgis-features-next/customElement.d.ts

@@ -36,6 +36,8 @@ import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.j
  * The Features (next) component should be used if needing to use the Popup functionality outside of the map or scene component. To show a single feature's content without
  * actions, related records, clustering configuration, etc., then use the [arcgis-feature-next](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-feature-next/) component.
  *
+ * @slot [actions-start] - _Since 5.2._ Slot for adding Calcite [actions](https://developers.arcgis.com/calcite-design-system/components/action/) or [action groups](https://developers.arcgis.com/calcite-design-system/components/action-group/) to the start of the action bar. Multiple actions or action groups can be placed in this slot. Slotted actions remain at the start of the action bar and are not automatically grouped if they exceed the available width. To group actions, place them in a Calcite action group. Actions in this slot remain separate from other actions, including default actions (such as "Zoom to" and "Browse features"), [PopupTemplate actions](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#actions), and [actions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#actions).
+ * @slot [actions-end] - _Since 5.2._ Slot for adding Calcite [actions](https://developers.arcgis.com/calcite-design-system/components/action/) or [action groups](https://developers.arcgis.com/calcite-design-system/components/action-group/) to the end of the action bar. Multiple actions or action groups can be placed in this slot. Slotted actions remain at the end of the action bar and are not automatically grouped if they exceed the available width. To group actions, place them in a Calcite action group. Actions in this slot remain separate from other actions, including default actions (such as "Zoom to" and "Browse features"), [PopupTemplate actions](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#actions), and [actions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#actions).
  * @see [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/)
  * @see [arcgis-feature-next](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-feature-next/)
  * @see [arcgis-popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/)
@@ -54,7 +56,7 @@ export abstract class ArcgisFeaturesNext extends LitElement {
    */
   accessor actions: Collection<PopupAction>;
   /**
-   * Indicates if the component is active when it is visible and is not [waiting](https://developers.arcgis.com/javascript/latest/references/core/popup/Features/#waitingForResult) for results.
+   * Indicates if the component is active when it is visible and is not [waiting](https://developers.arcgis.com/javascript/latest/references/core/popup/FeatureContentCollection/#waitingForResult) for results.
    *
    * @default false
    */
@@ -67,6 +69,15 @@ export abstract class ArcgisFeaturesNext extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-features-next auto-destroy-disabled></arcgis-features-next>
+   * ```
+   *
+   * ```js
+   * featuresNextElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
@@ -82,6 +93,15 @@ export abstract class ArcgisFeaturesNext extends LitElement {
    * @default false
    */
   accessor collapsed: boolean;
+  /**
+   * Controls the direction the content collapses when the collapse button is used.
+   * When unset, the component chooses a direction based on the [feature navigation placement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#featureNavigationTop).
+   *
+   * @see [showCollapseButton](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#showCollapseButton)
+   * @see [collapsed](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#collapsed)
+   * @see [featureNavigationTop](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#featureNavigationTop)
+   */
+  accessor collapseDirection: "down" | "up" | undefined;
   /**
    * The content of the component. When set directly on the component, this content is static and cannot use fields to set content templates. To set a template for the content based on field or attribute names, see [PopupTemplate.content](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#content).
    *
@@ -125,8 +145,11 @@ export abstract class ArcgisFeaturesNext extends LitElement {
   /**
    * Indicates whether the feature navigation arrows are displayed at the top of the component.
    * By default, the navigation arrows are displayed at the bottom of the component.
+   * This property also controls the collapse button's icon direction when the [collapseDirection](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#collapseDirection) property is not set. When `featureNavigationTop` is `true`, the collapse button icon defaults to collapsing "up" and when `false` it defaults to collapsing "down".
    *
    * @default false
+   * @see [collapseDirection](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#collapseDirection)
+   * @see [showCollapseButton](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#showCollapseButton)
    */
   accessor featureNavigationTop: boolean;
   /**
@@ -199,9 +222,19 @@ export abstract class ArcgisFeaturesNext extends LitElement {
    */
   accessor heading: string | null | undefined;
   /**
-   * Indicates the heading level to use for the headings in the component.
+   * Indicates the heading level to use for the heading of the component. By default, the heading is rendered as a `<h2>`. Depending on the component's placement in your app, you may need to adjust this heading for proper semantics. This is important for meeting accessibility standards.
    *
    * @default 2
+   * @see [HTML heading elements](https://developer.mozilla.org/docs/Web/HTML/Element/Heading_Elements)
+   * @example
+   * ```html
+   * <arcgis-features-next heading-level="2"></arcgis-features-next>
+   * ```
+   *
+   * ```js
+   * featuresNextElement.headingLevel = 2;
+   * ```
+   * 
    */
   accessor headingLevel: HeadingLevel;
   /**
@@ -234,6 +267,13 @@ export abstract class ArcgisFeaturesNext extends LitElement {
    * @default false
    */
   accessor hideCustomContent: boolean | undefined;
+  /**
+   * Indicates whether to hide relationship content when there are no relationship items to display.
+   *
+   * @default false
+   * @since 5.2
+   */
+  accessor hideEmptyRelationshipContent: boolean;
   /**
    * Indicates whether to hide [expression content](https://developers.arcgis.com/javascript/latest/references/core/popup/content/ExpressionContent/) within the component.
    *
@@ -268,6 +308,15 @@ export abstract class ArcgisFeaturesNext extends LitElement {
    * Indicates whether to hide the component's [heading](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#heading).
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-features-next hide-heading></arcgis-features-next>
+   * ```
+   *
+   * ```js
+   * featuresNextElement.hideHeading = true;
+   * ```
+   * 
    */
   accessor hideHeading: boolean;
   /**
@@ -363,9 +412,10 @@ export abstract class ArcgisFeaturesNext extends LitElement {
    *
    * _**Note**: Individual message keys may change between releases._
    */
-  accessor messageOverrides: {
+  accessor messageOverrides: NonNullable<ArcgisFeatureNext["messageOverrides"]> & {
       componentLabel?: string | undefined;
       zoom?: string | undefined;
+      zoomLabel?: string | undefined;
       browseAggregatedFeatures?: string | undefined;
       aggregatedFeatures?: string | undefined;
       aggregatedFeaturesPlaceholder?: string | undefined;
@@ -376,6 +426,7 @@ export abstract class ArcgisFeaturesNext extends LitElement {
       total?: string | undefined;
       pageText?: string | undefined;
       selectFeature?: string | undefined;
+      showAllFeatures?: string | undefined;
       down?: string | undefined;
       first?: string | undefined;
       last?: string | undefined;
@@ -386,6 +437,7 @@ export abstract class ArcgisFeaturesNext extends LitElement {
       untitled?: string | undefined;
       loading?: string | undefined;
       back?: string | undefined;
+      backLabel?: string | undefined;
       errorMessage?: string | undefined;
       returnToInitialFeature?: string | undefined;
       maxRecordCountHeading?: string | undefined;
@@ -397,6 +449,7 @@ export abstract class ArcgisFeaturesNext extends LitElement {
   protected messages: Partial<{
       componentLabel: string;
       zoom: string;
+      zoomLabel: string;
       browseAggregatedFeatures: string;
       aggregatedFeatures: string;
       aggregatedFeaturesPlaceholder: string;
@@ -407,6 +460,7 @@ export abstract class ArcgisFeaturesNext extends LitElement {
       total: string;
       pageText: string;
       selectFeature: string;
+      showAllFeatures: string;
       down: string;
       first: string;
       last: string;
@@ -417,6 +471,7 @@ export abstract class ArcgisFeaturesNext extends LitElement {
       untitled: string;
       loading: string;
       back: string;
+      backLabel: string;
       errorMessage: string;
       returnToInitialFeature: string;
       maxRecordCountHeading: string;
@@ -426,6 +481,7 @@ export abstract class ArcgisFeaturesNext extends LitElement {
   }> & T9nMeta<{
       componentLabel: string;
       zoom: string;
+      zoomLabel: string;
       browseAggregatedFeatures: string;
       aggregatedFeatures: string;
       aggregatedFeaturesPlaceholder: string;
@@ -436,6 +492,7 @@ export abstract class ArcgisFeaturesNext extends LitElement {
       total: string;
       pageText: string;
       selectFeature: string;
+      showAllFeatures: string;
       down: string;
       first: string;
       last: string;
@@ -446,6 +503,7 @@ export abstract class ArcgisFeaturesNext extends LitElement {
       untitled: string;
       loading: string;
       back: string;
+      backLabel: string;
       errorMessage: string;
       returnToInitialFeature: string;
       maxRecordCountHeading: string;
@@ -508,6 +566,8 @@ export abstract class ArcgisFeaturesNext extends LitElement {
    * Indicates whether to show the collapse button in the component.
    *
    * @default false
+   * @see [collapsed](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#collapsed)
+   * @see [collapseDirection](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#collapseDirection)
    */
   accessor showCollapseButton: boolean;
   /**
@@ -529,12 +589,12 @@ export abstract class ArcgisFeaturesNext extends LitElement {
   get state(): State;
   /**
    * Dates and times displayed in the component will be displayed in this time zone. By default this time zone is
-   * inherited from [arcgis-map.timeZone](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#timeZone) if the [view](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#view) property is set. When a MapView is not associated with the component
+   * inherited from the associated [arcgis-map.timeZone](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#timeZone) or [arcgis-scene.timeZone](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#timeZone) if the [view](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#view) property is set. When a view is not associated with the component
    * then the property will fallback to the `system` time zone.
    *
    * **Possible Values**
    * - `system`: Dates and times will be displayed in the timezone of the device or browser.
-   * - `unknown`: Dates and time are not adjusted for any timezone.
+   * - `unknown`: Dates and times are not adjusted for any timezone.
    * - `Specified IANA timezone`: Dates and times will be displayed in the specified IANA time zone. See [wikipedia - List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
    *
    * @since 5.1
@@ -586,18 +646,11 @@ export abstract class ArcgisFeaturesNext extends LitElement {
    * @since 5.1
    */
   setFocus(): Promise<void>;
-  /**
-   * Triggers the [@arcgisTriggerAction](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#event-arcgisTriggerAction) event and executes the action
-   * at the specified index in the [actions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features-next/#actions) array.
-   *
-   * @param action
-   */
-  triggerAction(action: ActionButton | ActionToggle): Promise<void>;
   /** Emitted when the component's close button is clicked. */
   readonly arcgisClose: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
   readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "active" | "collapsed" | "effectiveHeading" | "featureCount" | "featureMenuOpen" | "features" | "promises" | "selectedDrillInFeature" | "selectedFeature" | "selectedFeatureComponent" | "selectedFeatureIndex" | "state" | "open"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   /**
    * Fires after the user clicks on an action in the component.