@arcgis/map-components 5.2.0-next.1 → 5.2.0-next.100

package/dist/components/arcgis-map/customElement.d.ts

@@ -9,12 +9,12 @@ import type Ground from "@arcgis/core/Ground.js";
 import type GamepadSettings from "@arcgis/core/views/input/gamepad/GamepadSettings.js";
 import type Basemap from "@arcgis/core/Basemap.js";
 import type Map from "@arcgis/core/Map.js";
+import type Graphic from "@arcgis/core/Graphic.js";
 import type LayerView from "@arcgis/core/views/layers/LayerView.js";
 import type ColorBackground from "@arcgis/core/webmap/background/ColorBackground.js";
 import type BasemapView from "@arcgis/core/views/BasemapView.js";
 import type MapViewConstraints from "@arcgis/core/views/2d/MapViewConstraints.js";
 import type Error from "@arcgis/core/core/Error.js";
-import type Graphic from "@arcgis/core/Graphic.js";
 import type HighlightOptions from "@arcgis/core/views/support/HighlightOptions.js";
 import type IPSInfo from "@arcgis/core/webdoc/IPSInfo.js";
 import type Magnifier from "@arcgis/core/views/Magnifier.js";
@@ -33,11 +33,30 @@ import type { DoubleClickEvent, DoubleTapDragEvent, VerticalTwoFingerDragEvent,
 import type { AnalysisViewDestroyEvent, AnalysisViewCreateErrorEvent, AnalysisViewCreateEvent, ToScreenOptions2D, Screenshot, UserSettings, ViewHitTestResult, HitTestOptions, GoToOptions2D, GoToTarget2D } from "@arcgis/core/views/types.js";
 import type { AnalysisView2DUnion } from "@arcgis/core/views/2d/analysis/types.js";
 import type { ScreenPoint, ScreenRect } from "@arcgis/core/core/types.js";
-import type { ViewPopupOpenOptions } from "@arcgis/core/views/PopupView.js";
+import type { FetchPopupFeaturesOptions, ViewPopupOpenOptions } from "@arcgis/core/views/PopupView.js";
 import type { ReadonlyCollection } from "@arcgis/core/core/Collection.js";
 import type { ViewPadding } from "@arcgis/core/views/ui/types.js";
 import type { SlotGroupRefs } from "../../support/slots.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** _Since 4.34_ Specifies the top padding for the layout. */
+  "--arcgis-layout-overlay-space-top": "*";
+  /** _Since 4.34_ Specifies the bottom padding for the layout. */
+  "--arcgis-layout-overlay-space-bottom": "*";
+  /** _Since 4.34_ Specifies the left padding for the layout. */
+  "--arcgis-layout-overlay-space-left": "*";
+  /** _Since 4.34_ Specifies the right padding for the layout. */
+  "--arcgis-layout-overlay-space-right": "*";
+  /** _Since 5.0_ Specifies the focus outline color for the view. */
+  "--arcgis-view-color-focus": "*";
+  /** _Since 5.1_ Specifies the background color for table rows. */
+  "--arcgis-table-row-background-color": "*";
+  /** _Since 5.1_ Specifies the background color for alternate table rows. */
+  "--arcgis-table-row-alt-background-color": "*";
+}
+}
+
 /**
  * The ArcGIS Map component is used to add 2D maps to web applications. For 3D maps, use the
  * [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/).
@@ -48,7 +67,7 @@ import type { SlotGroupRefs } from "../../support/slots.js";
  *
  * ##### 1. Using a WebMap
  * Load a [WebMap](https://developers.arcgis.com/javascript/latest/references/core/WebMap/) from [ArcGIS Online](https://www.arcgis.com/home/index.html)
- * or an [ArcGIS Enterprise portal](https://enterprise.arcgis.com/en/portal/latest/administer/windows/what-is-portal-for-arcgis-.htm) by specifying the [itemId](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#itemId) attribute.
+ * or an [ArcGIS Enterprise portal](https://doc.esri.com/en/arcgis-enterprise/latest/plan/what-is-portal-for-arcgis-.html) by specifying the [itemId](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#itemId) attribute.
  *
  * ```html
  * <arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"></arcgis-map>
@@ -109,13 +128,6 @@ import type { SlotGroupRefs } from "../../support/slots.js";
  * - [Get started](https://developers.arcgis.com/javascript/latest/get-started/)
  * - [Programming patterns](https://developers.arcgis.com/javascript/latest/programming-patterns/)
  *
- * @cssproperty [--arcgis-layout-overlay-space-top] - _Since 4.34_ Specifies the top padding for the layout.
- * @cssproperty [--arcgis-layout-overlay-space-bottom] - _Since 4.34_ Specifies the bottom padding for the layout.
- * @cssproperty [--arcgis-layout-overlay-space-left] - _Since 4.34_ Specifies the left padding for the layout.
- * @cssproperty [--arcgis-layout-overlay-space-right] - _Since 4.34_ Specifies the right padding for the layout.
- * @cssproperty [--arcgis-view-color-focus] - _Since 5.0_ Specifies the focus outline color for the view.
- * @cssproperty [--arcgis-table-row-background-color] - _Since 5.1_ Specifies the background color for table rows.
- * @cssproperty [--arcgis-table-row-alt-background-color] - _Since 5.1_ Specifies the background color for alternate table rows.
  * @slot  - Default slot for adding components to the map. User is responsible for positioning the content via CSS.
  * @slot [top-left] - Slot for components positioned in the top-left corner.
  * @slot [top-right] - Slot for components positioned in the top-right corner.
@@ -141,11 +153,15 @@ export abstract class ArcgisMap extends LitElement {
    *
    * @since 4.34
    * @example
+   * ```js
    * // Adds an analysis to the View
    * view.analyses.add(elevationProfileAnalysis);
+   * ```
    * @example
+   * ```js
    * // Removes an analysis from the View
    * view.analyses.remove(elevationProfileAnalysis);
+   * ```
    */
   accessor analyses: Collection<Analysis>;
   /**
@@ -165,7 +181,7 @@ export abstract class ArcgisMap extends LitElement {
    */
   accessor animationsDisabled: boolean;
   /**
-   * The ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: [`label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label), [`description`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description), [`describedByElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescribedByElements), and [`labelledByElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLabelledByElements).
+   * The ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: [`label`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label), [`description`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description), [`describedByElements`](https://developer.mozilla.org/docs/Web/API/Element/ariaDescribedByElements), and [`labelledByElements`](https://developer.mozilla.org/docs/Web/API/Element/ariaLabelledByElements).
    *
    * @since 4.34
    */
@@ -177,13 +193,15 @@ export abstract class ArcgisMap extends LitElement {
    */
   get attributionItems(): MapView["attributionItems"];
   /**
-   * The light or dark mode used to display the attribution.
-   * By default, the mode is inherited from the [Calcite's mode](https://developers.arcgis.com/calcite-design-system/core-concepts/#modes).
-   * You can override the value to style the attribution alongside the map or scene content.
+   * The display mode used for the attribution. Defaults to null.
+   *
+   * Set this property to "auto" to automatically synchronize the attribution with the nearest [Calcite mode](https://developers.arcgis.com/calcite-design-system/core-concepts/#modes). If no Calcite mode is detected, the attribution defaults to light mode. **The "auto" mode was added in version 5.2.**
+   *
+   * Set this property to "light" or "dark" to explicitly use that mode without synchronization.
    *
    * @since 5.0
    */
-  accessor attributionMode: "dark" | "light" | null | undefined;
+  accessor attributionMode: AttributionMode;
   /**
    * If true, the component will not be destroyed automatically when it is
    * disconnected from the document. This is useful when you want to move the
@@ -192,30 +210,61 @@ export abstract class ArcgisMap extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-map auto-destroy-disabled></arcgis-map>
+   * ```
+   *
+   * ```js
+   * mapElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
    * The background color of the Map component.
    *
    * @example
-   * let view = new MapView({
-   *   container: "viewDiv",
-   *   map: map,
-   *   background: { // autocasts new ColorBackground()
-   *     color: "magenta" // autocasts as new Color()
-   *   }
+   * ```js
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.background = new ColorBackground ({
+   *   color: "magenta" // autocasts as new Color()
    * });
+   * ```
    */
   accessor background: ColorBackground | null | undefined;
   /**
    * Specifies a basemap for the map. The basemap is a set of layers that give
    * geographic context to the view and the other operational layers
    * in the map.
-   * It can either be set using a basemap ID string ([see values](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap)),
-   * [Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/)
-   * or [BasemapStyle](https://developers.arcgis.com/javascript/latest/references/core/support/BasemapStyle/).
    *
-   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap)
+   * The basemap can be set from a basemap ID string from the [basemap styles service](https://developers.arcgis.com/javascript/latest/references/core/support/BasemapStyle/), such as `arcgis/navigation`, or from the [Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/) class.
+   *
+   * > [!NOTE]
+   * > Accessing the basemap styles service requires authentication, see [Authentication and access tokens](https://developers.arcgis.com/javascript/latest/authentication/access-tokens/) for more information.
+   *
+   * @example
+   * ```html
+   * <!-- Basemap set using a basemap ID string from the basemap styles service -->
+   * <arcgis-map basemap="arcgis/navigation" center="-98, 39" zoom="4"></arcgis-map>
+   * ```
+   * @example
+   * ```js
+   * // Basemap set using a Basemap instance
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.basemap = new Basemap({
+   *   title: "Terrain",
+   *   baseLayers: [
+   *     new VectorTileLayer({
+   *        url: "https://arcgis.com/sharing/rest/content/items/b5676525747f499687f12746441101ef/resources/styles/root.json",
+   *     })
+   *   ]
+   * });
+   * ```
+   * @see [Map.basemap](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap)
+   * @see [Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/)
+   * @see [BasemapStyle](https://developers.arcgis.com/javascript/latest/references/core/support/BasemapStyle/)
+   * @see [Authentication and access tokens](https://developers.arcgis.com/javascript/latest/authentication/access-tokens/)
    */
   accessor basemap: Basemap | string | undefined;
   /** Represents the view for a single basemap after it has been added to the map. */
@@ -272,11 +321,11 @@ export abstract class ArcgisMap extends LitElement {
    *   x: 12804.24,
    *   y: -1894032.09,
    *   spatialReference: {
-   *     wkid: view.spatialReference  // wkid 2027
+   *     wkid: viewElement.spatialReference  // wkid 2027
    *   }
    * });
    * const viewElement = document.querySelector("arcgis-map");
-   * view.center = centerPoint;
+   * viewElement.center = centerPoint;
    * ```
    * @example
    * ```js
@@ -306,7 +355,9 @@ export abstract class ArcgisMap extends LitElement {
    * @see [TileInfo#create()](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/#create)
    * @see [Zoom and LODs](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#mapview-lods)
    * @example
-   * view.constraints = new MapViewConstraints({
+   * ```js
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.constraints = new MapViewConstraints({
    *   geometry: { // Constrain lateral movement to Lower Manhattan
    *     type: "extent",
    *     xmin: -74.020,
@@ -318,7 +369,9 @@ export abstract class ArcgisMap extends LitElement {
    *   maxScale: 0, // User can overzoom tiles
    *   rotationEnabled: false // Disables map rotation
    * });
+   * ```
    * @example
+   * ```js
    * // This snippet shows how to set the Map scale 1:1 while generating additional LODs for the constraints.
    * const spatialReference = new SpatialReference({
    *   wkid: 2154
@@ -341,16 +394,17 @@ export abstract class ArcgisMap extends LitElement {
    *   lods
    * });
    *
-   * const arcgisMap = document.querySelector("arcgis-map");
-   * arcgisMap.spatialReference = spatialReference;
-   * arcgisMap.center = center;
-   * arcgisMap.scale = 1;
-   * arcgisMap.constraints = constraints;
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.spatialReference = spatialReference;
+   * viewElement.center = center;
+   * viewElement.scale = 1;
+   * viewElement.constraints = constraints;
+   * ```
    */
   accessor constraints: MapViewConstraints;
   /**
    * Indicates whether a layer's `displayFilterInfo` is honored when rendering layers in the view.
-   * If `false`, display filters are ignored and all features are rendered.
+   * If `true`, display filters are ignored and all features are rendered.
    *
    * @default false
    */
@@ -378,13 +432,15 @@ export abstract class ArcgisMap extends LitElement {
    * @since 4.12
    * @see [tryFatalErrorRecovery()](https://developers.arcgis.com/javascript/latest/references/core/views/View/#tryFatalErrorRecovery)
    * @example
+   * ```js
    * reactiveUtils.when(
-   *   () => view.fatalError,
+   *   () => viewElement.fatalError,
    *   () => {
    *     console.error("Fatal Error! View has lost its WebGL context. Attempting to recover...");
-   *     view.tryFatalErrorRecovery();
+   *     viewElement.tryFatalErrorRecovery();
    *   }
    * );
+   * ```
    */
   accessor fatalError: Error<any> | null | undefined;
   /**
@@ -395,17 +451,17 @@ export abstract class ArcgisMap extends LitElement {
   /** Gamepad input specific configuration settings. */
   get gamepad(): GamepadSettings;
   /**
-   * Allows for adding graphics directly to the default graphics in the View.
+   * Allows for adding graphics directly to the default graphics in the map component.
    *
    * @example
    * ```js
-   * // Adds a graphic to the View
-   * graphics.add(pointGraphic);
+   * // Adds a graphic to the map component.
+   * viewElement.graphics.add(pointGraphic);
    * ```
    * @example
    * ```js
-   * // Removes a graphic from the View
-   * graphics.remove(pointGraphic);
+   * // Removes a graphic from the map component.
+   * viewElement.graphics.remove(pointGraphic);
    * ```
    * @see [Graphic](https://developers.arcgis.com/javascript/latest/references/core/Graphic/)
    * @see [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer/)
@@ -418,12 +474,7 @@ export abstract class ArcgisMap extends LitElement {
    * @see [ElevationLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/ElevationLayer/)
    * @see [Ground](https://developers.arcgis.com/javascript/latest/references/core/Ground/)
    * @example
-   * // Use the world elevation service
-   * const map = new Map({
-   *   basemap: "topo-vector",
-   *   ground: "world-elevation"
-   * });
-   * @example
+   * ```js
    * // Create a map with the world elevation layer overlaid by a custom elevation layer
    * const worldElevation = new ElevationLayer({
    *   url: "//elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
@@ -437,6 +488,9 @@ export abstract class ArcgisMap extends LitElement {
    *    layers: [ worldElevation, customElevation ]
    *   })
    * });
+   *
+   * viewElement.map = map;
+   * ```
    */
   get ground(): Ground;
   set ground(value: Ground | string);
@@ -481,40 +535,47 @@ export abstract class ArcgisMap extends LitElement {
    * @see [Sample: Highlight point features](https://developers.arcgis.com/javascript/latest/sample-code/highlight-point-features/)
    * @since 4.32
    * @example
+   * ```js
    * // Use the default highlights collection to apply a highlight to features when you hover over them
-   *
    * // A handler can be used to remove any previous highlight when applying a new one
    * let hoverHighlight;
    *
-   * view.on("pointer-move", (event) => {
-   *   // Search for the first feature in the featureLayer at the hovered location
-   *   view.hitTest(event, { include: featureLayer }).then((response) => {
-   *     if (response.results[0]) {
-   *        const graphic = response.results[0].graphic;
-   *        view.whenLayerView(graphic.layer).then((layerView) => {
-   *          // Remove any previous highlight, if it exists
-   *          hoverHighlight?.remove();
-   *          // Highlight the hit features with the temporary highlight options, which are pre-configured for this use case
-   *          hoverHighlight = layerView.highlight(graphic, { name: "temporary"});
-   *        });
+   * viewElement.addEventListener("arcgisViewPointerMove", async (event) => {
+   *   try {
+   *     await updateHoverHighlight(event);
+   *   } catch (error) {
+   *     if (error.name !== "AbortError") {
+   *       console.error(error);
    *     }
-   *   });
+   *   }
    * });
-   * @example
-   * // Override the default highlights collection
    *
-   * const view = new MapView({
-   *   map: map,
-   *   container: "viewDiv",
+   * const updateHoverHighlight = promiseUtils.debounce(async (event) => {
+   *   // Search for the first feature in the featureLayer at the hovered location
+   *   const response = await viewElement.hitTest(event.detail, { include: featureLayer });
+   *   const result = response.results[0];
+   *
+   *   // Remove any previous highlight, if it exists
+   *   hoverHighlight?.remove();
    *
-   *   // Set the highlight options to be used in the view
-   *   highlights: [
-   *     { name: "default", color: "orange" },
-   *     { name: "temporary", color: "magenta" },
-   *     { name: "table", color: "cyan", fillOpacity: 0.5, haloOpacity: 0}
-   *   ]
+   *   if (result?.type === "graphic") {
+   *     // Highlight the hit feature with the temporary highlight options
+   *     hoverHighlight = layerView.highlight(result.graphic, { name: "temporary" });
+   *   }
    * });
+   * ```
    * @example
+   * ```js
+   * // Override the default highlights collection
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.highlights = new Collection([
+   *   { name: "default", color: "orange" },
+   *   { name: "temporary", color: "magenta" },
+   *   { name: "table", color: "cyan", fillOpacity: 0.5, haloOpacity: 0}
+   * ]);
+   * ```
+   * @example
+   * ```js
    * // Add highlight options to the collection after initialization
    *
    * const selectionHighlightOptions = {
@@ -525,7 +586,8 @@ export abstract class ArcgisMap extends LitElement {
    * };
    *
    * // Add the options to the highlights collection at the first position
-   * view.highlights.add(selectionGroup, 0);
+   * viewElement.highlights.add(selectionGroup, 0);
+   * ```
    */
   accessor highlights: Collection<HighlightOptions>;
   /**
@@ -569,7 +631,7 @@ export abstract class ArcgisMap extends LitElement {
   /** An instance of a [Map](https://developers.arcgis.com/javascript/latest/references/core/Map/) object to display in the view. */
   accessor map: Map | null | undefined;
   /**
-   * Indication whether the view is being navigated (for example when panning).
+   * Indicates whether the view is being navigated (for example when panning).
    *
    * @default false
    */
@@ -579,26 +641,21 @@ export abstract class ArcgisMap extends LitElement {
    *
    * @since 4.9
    * @example
+   * ```js
    * // Disable the gamepad usage, single touch panning, panning momentum and mouse wheel zooming.
-   * const view = new MapView({
-   *   container: "viewDiv",
-   *   map: new Map({
-   *     basemap: "satellite"
-   *   }),
-   *   center: [176.185, -37.643],
-   *   zoom: 13,
-   *   navigation: {
-   *     gamepad: {
-   *       enabled: false
-   *     },
-   *     actionMap: {
-   *       dragSecondary: "none", // Disable rotating the view with the right mouse button
-   *       mouseWheel: "none" // Disable zooming with the mouse wheel
-   *     },
-   *     browserTouchPanEnabled: false,
-   *     momentumEnabled: false,
-   *   }
-   * });
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.navigation = {
+   *   gamepad: {
+   *     enabled: false
+   *   },
+   *   actionMap: {
+   *     dragSecondary: "none", // Disable rotating the view with the right mouse button
+   *     mouseWheel: "none" // Disable zooming with the mouse wheel
+   *   },
+   *   browserTouchPanEnabled: false,
+   *   momentumEnabled: false,
+   * };
+   * ```
    */
   accessor navigation: Navigation;
   /**
@@ -708,22 +765,32 @@ export abstract class ArcgisMap extends LitElement {
    *
    * @default 0
    * @example
-   * // Due north is rotated 90 degrees, pointing to the right side of the view
-   * view.rotation = 90;
+   * ```html
+   * <!-- Due north is rotated 90 degrees, pointing to the right side of the view -->
+   * <arcgis-map basemap="satellite" rotation="90"></arcgis-map>
+   * ```
    * @example
+   * ```js
    * // Due north is rotated 180 degrees, pointing to the bottom of the view
-   * view.rotation = 180;
+   * viewElement.rotation = 180;
+   * ```
    * @example
+   * ```js
    * // Due north is rotated 270 degrees, pointing to the left side of the view
-   * view.rotation = 270;
+   * viewElement.rotation = 270;
+   * ```
    * @example
+   * ```js
    * // Due north is rotated 0 degrees, pointing to the top of the view (the default)
-   * view.rotation = 0; // 360 or multiple of 360 (e.g. 720) works here as well.
+   * viewElement.rotation = 0; // 360 or multiple of 360 (e.g. 720) works here as well.
+   * ```
    * @example
+   * ```js
    * // Disables map rotation
-   * view.constraints = {
+   * viewElement.constraints = {
    *   rotationEnabled: false
    * };
+   * ```
    */
   accessor rotation: number;
   /**
@@ -762,7 +829,7 @@ export abstract class ArcgisMap extends LitElement {
    * reference. The [scale](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#scale) and [rotation](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#rotation) properties are adjusted to keep the content of the map at the same size and orientation on screen.
    * * To ensure [TileLayers](https://developers.arcgis.com/javascript/latest/references/core/layers/TileLayer/) and
    * [VectorTileLayers](https://developers.arcgis.com/javascript/latest/references/core/layers/VectorTileLayer/)
-   * are displayed in a [basemap](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#basemap) correctly, the spatialReference of the view must be set match their
+   * are displayed in a [basemap](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#basemap) correctly, the spatialReference of the view must be set to match their
    * [tileInfo's](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/) spatial reference.
    * * Switching spatial reference with an [imageCoordinateSystem](https://developers.arcgis.com/javascript/latest/references/core/geometry/SpatialReference/#imageCoordinateSystem)
    * is not supported.
@@ -801,7 +868,7 @@ export abstract class ArcgisMap extends LitElement {
    */
   accessor spatialReferenceLocked: boolean;
   /**
-   * Indication whether the view is animating, being navigated with or resizing.
+   * Indicates whether the view is animating, being navigated with or resizing.
    *
    * @default false
    */
@@ -819,12 +886,14 @@ export abstract class ArcgisMap extends LitElement {
    * @see [Theme](https://developers.arcgis.com/javascript/latest/references/core/views/Theme/)
    * @see [Sample - Color theming for interactive tools](https://developers.arcgis.com/javascript/latest/sample-code/view-theme/)
    * @example
+   * ```js
    * // Update the theme to use purple graphics
    * // and slightly transparent green text
    * view.theme = new Theme({
    *   accentColor: "purple",
    *   textColor: [125, 255, 13, 0.9]
    * });
+   * ```
    */
   accessor theme: Theme | null | undefined;
   /**
@@ -835,23 +904,21 @@ export abstract class ArcgisMap extends LitElement {
    *
    * @since 4.12
    * @example
+   * ```js
    * // Create a csv layer from an online spreadsheet.
-   * let csvLayer = new CSVLayer({
+   * const csvLayer = new CSVLayer({
    *   url: "http://test.com/daily-magazines-sold-in-new-york.csv",
    *   timeInfo: {
    *     startField: "SaleDate" // The csv field contains date information.
    *   }
    * });
+   * viewElement.map.add(csvLayer);
    *
-   * // Create a mapview showing sales for the last week of March 2019 only.
-   * const view = new MapView({
-   *   map: map,
-   *   container: "viewDiv",
-   *   timeExtent: {
-   *     start: new Date("2019, 2, 24"),
-   *     end:   new Date("2019, 2, 31")
-   *   }
-   * });
+   * viewElement.timeExtent = {
+   *   start: new Date("2019, 2, 24"),
+   *   end: new Date("2019, 2, 31")
+   * };
+   * ```
    */
   accessor timeExtent: TimeExtent | null | undefined;
   /**
@@ -862,12 +929,11 @@ export abstract class ArcgisMap extends LitElement {
    * @default "system"
    * @see [wikipedia - List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
    * @example
+   * ```js
    * // Date and time will be displayed in Pacific/Auckland (NZ) time zone
-   * const view = new MapView({
-   *   map: map,
-   *   container: "viewDiv",
-   *   timeZone: "Pacific/Auckland"
-   * });
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.timeZone = "Pacific/Auckland";
+   * ```
    */
   accessor timeZone: string;
   /**
@@ -883,6 +949,26 @@ export abstract class ArcgisMap extends LitElement {
    * Represents the current view as a Viewpoint or point of observation on the view.
    * Setting the viewpoint immediately changes the current view. For animating
    * the view, see this component's [goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#goTo) method.
+   *
+   * @example
+   * ```js
+   * // Set the viewpoint to the Empire State Building in New York City
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.viewpoint = new Viewpoint({
+   *   targetGeometry: new Point({
+   *     longitude: -73.9857,
+   *     latitude: 40.7484
+   *   }),
+   *   scale: 5000
+   * });
+   * ```
+   * @example
+   * ```js
+   * // Get the initial viewpoint of the view once the view is ready
+   * const viewElement = document.querySelector("arcgis-map");
+   * await viewElement.viewOnReady();
+   * const initialViewpoint = viewElement.viewpoint.clone();
+   * ```
    */
   accessor viewpoint: Viewpoint;
   /**
@@ -911,7 +997,40 @@ export abstract class ArcgisMap extends LitElement {
   closePopup(): Promise<void>;
   /** Destroys the view, and any associated resources, including its map, popup, and UI elements. */
   destroy(): Promise<void>;
-  focusPopup(): Promise<void>;
+  /**
+   * Use this method to query for features at a given screen location. These features come from origins (layers and sublayers) configured with a [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) and have its [FeatureLayer.popupEnabled](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/#popupEnabled) set. One example could be a custom side panel that displays feature-specific information based on an end user's click location. This method allows a developer to control how the input location is handled, and then subsequently, what to do with the results.
+   * > [!WARNING]
+   * > Using [ScreenRect](https://developers.arcgis.com/javascript/latest/references/core/core/types/#ScreenRect) as the hit target is considered **[beta](https://developers.arcgis.com/javascript/latest/faq/#what-does-the-beta-tag-mean)** functionality.
+   *
+   * @param hitTarget
+   * @param options
+   * @since 5.1
+   * @example
+   * ```js
+   * const viewElement = document.querySelector("arcgis-map");
+   * // Get viewElement's click event
+   * viewElement.addEventListener("arcgisViewClick", async (event) => {
+   *   const generator = await viewElement.fetchPopupFeatures(event.detail.screenPoint, {
+   *     pointerType: event.detail.pointerType
+   *   });
+   *   // Access the features returned from the generator
+   *   for await (const feature of generator) {
+   *     console.log(feature);
+   *   }
+   * });
+   * ```
+   * @example
+   * ```js
+   * // Wait for all the features to be available
+   * view.on("click", async (event) => {
+   *   const generator = view.fetchPopupFeatures(event.screenPoint, {
+   *     pointerType: event.pointerType
+   *   });
+   *
+   *   const features = await Array.fromAsync(generator);
+   * });
+   */
+  fetchPopupFeatures(hitTarget: ScreenPoint | ScreenRect, options?: FetchPopupFeaturesOptions): Promise<AsyncGenerator<Graphic>>;
   /**
    * Sets the view to a given target.
    *
@@ -920,57 +1039,44 @@ export abstract class ArcgisMap extends LitElement {
    */
   goTo(target: GoToTarget2D, options?: GoToOptions2D): Promise<unknown>;
   /**
-   * Returns [hit test results](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#HitTestResult)
-   * from each layer that intersects the specified screen coordinates. The results are
-   * organized as an array of objects containing different [result types](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#HitTestResult).
-   *
-   * The following layer types will return all [features](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#GraphicHit) if a hit is
-   * made on intersecting features: [FeatureLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/),
-   * [CatalogLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/CatalogLayer/),
-   * [CSVLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/CSVLayer/),
-   * [GeoJSONLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GeoJSONLayer/),
-   * [GeoRSSLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GeoRSSLayer/),
-   * [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer/),
-   * [KMLLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/KMLLayer/),
-   * [MapNotesLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MapNotesLayer/),
-   * [OGCFeatureLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/OGCFeatureLayer/),
-   * [StreamLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/StreamLayer/),
-   * [SubtypeSublayer](https://developers.arcgis.com/javascript/latest/references/core/layers/support/SubtypeSublayer/),
-   * [VectorTileLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/VectorTileLayer/), and
-   * [WFSLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/WFSLayer/).
-   *
-   * The [ParquetLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/ParquetLayer/) hit result returns only the topmost feature
-   * when the hit occurs on overlapping features in a ParquetLayer.
-   *
-   * The [VectorTileLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/VectorTileLayer/) hit test result contains an array of objects containing
-   * a [graphic](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#GraphicHit).
-   * The graphic returns attributes of a style layer. In addition, the graphic's [origin](https://developers.arcgis.com/javascript/latest/references/core/Graphic/#origin)
-   * contains the style layer's [id](https://maplibre.org/maplibre-style-spec/layers/#id) and layer index within the [vector tile style](https://doc.arcgis.com/en/arcgis-online/reference/tile-layers.htm#ESRI_SECTION1_8F68399EB47B48FF9EF46719FCC96978).
-   * Spatial information about the actual feature represented in the style layer is returned only if the style layer is a [symbol layer](https://maplibre.org/maplibre-style-spec/layers/#symbol).
-   * Otherwise, the graphic's geometry is `null`.
-   *
-   * The [MediaLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MediaLayer/) hit test result contains all media elements if the hit is made on intersecting elements.
-   * The [RouteLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/RouteLayer/) hit test result contains all route elements if the hit is made on intersecting elements.
-   *
-   * If the [polygon](https://developers.arcgis.com/javascript/latest/references/core/geometry/Polygon/) feature's symbol
-   * [style](https://developers.arcgis.com/javascript/latest/references/core/symbols/SimpleFillSymbol/#style) is set to `none`, the hitTest method will not
+   * Returns [hit test results](https://developers.arcgis.com/javascript/latest/references/core/views/types/#ViewHitTestResult) from each layer that intersects the specified screen point or screen rectangle.
+   * The results are organized as an array of objects containing different [ViewHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#ViewHit) result types such as  graphics, raster pixels, media elements, or routes.
+   *
+   * **2D hitTest() behavior by layer type**
+   * | Layer type | Hit test behavior |
+   * | :--- | :--- |
+   * | [FeatureLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer), [CatalogFootprintLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/catalog/CatalogFootprintLayer), [CSVLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/CSVLayer), [GeoJSONLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GeoJSONLayer), [OGCFeatureLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/OGCFeatureLayer), [OrientedImageryLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/OrientedImageryLayer), [ParquetLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/ParquetLayer), [StreamLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/StreamLayer), [SubtypeGroupLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/SubtypeGroupLayer), [WFSLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/WFSLayer) | Returns all intersecting [GraphicHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#GraphicHit) features at the hit location. |
+   * | [GeoRSSLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GeoRSSLayer), [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer), [KMLLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/KMLLayer), [MapNotesLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MapNotesLayer) | Returns all intersecting [GraphicHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#GraphicHit) features at the hit location. |
+   * | [ImageryLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/ImageryLayer),  [ImageryTileLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/ImageryTileLayer)| Returns [RasterHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#RasterHit) result containing raster pixel value used in rendering and bandId info on intersecting pixels. Support was added in version 5.1. The `screenRect` hitTarget returns hit result at the center of the rectangle. |
+   * | [VectorTileLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/VectorTileLayer) | Returns a result for all intersecting [GraphicHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#GraphicHit) features containing attributes of style layers (as of version 4.29; in prior releases, only the topmost style layer result was returned). In addition, the graphic's [origin](https://developers.arcgis.com/javascript/latest/references/core/Graphic#origin) contains the style layer's [id](https://maplibre.org/maplibre-style-spec/layers/#id) and layer index within the [vector tile style](https://doc.arcgis.com/en/arcgis-online/reference/tile-layers.htm#ESRI_SECTION1_8F68399EB47B48FF9EF46719FCC96978). Spatial information about the actual feature represented in the style layer is returned only if the style layer is a [symbol layer](https://maplibre.org/maplibre-style-spec/layers/#symbol). Otherwise, the graphic's geometry is `null`. |
+   * | [MediaLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MediaLayer) | Returns [MediaHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#MediaHit) result containing all media elements if the hit is made on intersecting elements. |
+   * | [RouteLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/RouteLayer) | Returns [RouteHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#RouteHit) result containing all intersecting route elements if the hit is made on intersecting elements. |
+   *
+   * **Note:** If the [Polygon](https://developers.arcgis.com/javascript/latest/references/core/geometry/Polygon) feature's symbol [SimpleFillSymbol.style](https://developers.arcgis.com/javascript/latest/references/core/symbols/SimpleFillSymbol#style) is set to "none", the hitTest method will not
    * return results when the fill is clicked. However, it will return results when the outline is clicked. To get results when clicking the fill, set the
-   * [color](https://developers.arcgis.com/javascript/latest/references/core/symbols/SimpleFillSymbol/#color) to a transparent color instead.
+   * [SimpleFillSymbol.color](https://developers.arcgis.com/javascript/latest/references/core/symbols/SimpleFillSymbol#color) to a transparent color instead.
+   *
+   * Release-specific changes:
+   * * At version 5.1, **[beta](https://developers.arcgis.com/javascript/latest/faq/#what-does-the-beta-tag-mean)** support was added for [ScreenRect](https://developers.arcgis.com/javascript/latest/references/core/core/types/#ScreenRect), allowing hit tests across rectangular screen areas.
+   * * At version 4.24, [ViewHitTestResult](https://developers.arcgis.com/javascript/latest/references/core/views/types/#ViewHitTestResult) returns an array of objects containing [GraphicHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#GraphicHit) graphic, [MediaHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#MediaHit) media element, and [RouteHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#RouteHit) route.
+   * * At version 4.23, all hit test features from feature layers are returned in the result. In prior releases, only the topmost feature was returned.
    *
    * @param hitTarget
    * @param options
+   * @see [Sample - Access features with hitTest](https://developers.arcgis.com/javascript/latest/sample-code/map-component-hittest/)
+   * @see [Sample - Hit test features by screen rectangle](https://developers.arcgis.com/javascript/latest/sample-code/map-hittest-screen-rectangle/)
+   * @see [Sample - VectorTileLayer hitTest](https://developers.arcgis.com/javascript/latest/sample-code/layers-vectortilelayer-hittest/)
    * @example
    * ```js
-   * viewElement.addEventListener("arcgisViewClick", (event) => {
-   *    viewElement.hitTest(event.detail).then((response) => {
-   *       const result = response.results[0];
-   *       if (result?.type === "graphic") {
-   *          const { longitude, latitude } = result.mapPoint;
-   *          console.log(`Hit graphic at (${longitude}, ${latitude})`, result.graphic);
-   *       } else {
-   *          console.log("Did not hit any graphic");
-   *       }
-   *    });
+   * viewElement.addEventListener("arcgisViewClick", async (event) => {
+   *    const response = await viewElement.hitTest(event.detail);
+   *    const result = response.results[0];
+   *    if (result?.type === "graphic") {
+   *       const { longitude, latitude } = result.mapPoint;
+   *       console.log(`Hit graphic at (${longitude}, ${latitude})`, result.graphic);
+   *    } else {
+   *       console.log("Did not hit any graphic");
+   *    }
    * });
    * ```
    * @example
@@ -1326,4 +1432,6 @@ export abstract class ArcgisMap extends LitElement {
     arcgisViewReadyError: ArcgisMap["arcgisViewReadyError"]["detail"];
     arcgisViewVerticalTwoFingerDrag: ArcgisMap["arcgisViewVerticalTwoFingerDrag"]["detail"];
   };
-}
+}
+
+export type AttributionMode = MapView["attributionMode"] | "auto";