@arcgis/map-components 4.34.0-next.8 → 4.34.0-next.81

package/dist/components/arcgis-area-measurement-3d/customElement.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
-/// <reference types="../../index.d.ts" />
-import { default as AreaMeasurementAnalysis } from '@arcgis/core/analysis/AreaMeasurementAnalysis.js';
+/// <reference path="../../index.d.ts" />
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
 import { Use } from '@arcgis/lumina/controllers';
 import { ArcgisReferenceElement } from '../../utils/component-utils';
@@ -8,14 +7,96 @@ import { default as AreaMeasurement3dViewModel } from './AreaMeasurement3dViewMo
 
 declare const useViewModel: (component: LitElement & Pick<AreaMeasurement3dViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<AreaMeasurement3dViewModel>) => AreaMeasurement3dViewModel;
 /**
- * The Area Measurement 3D component calculates and displays the area and perimeter of a polygon.
- * This component can be used in a [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html)
- * to measure the area and perimeter of a polygon.
+ * The Area Measurement 3D component can be added to a [Scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/)
+ * component to calculate and display area and perimeter of polygons.
+ *
+ * [![measurement-area-3d](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/3D_AreaMeasurement_widget.png)](https://developers.arcgis.com/javascript/latest/sample-code/measurement-3d/)
+ *
+ * How the area and perimeter are computed depends on the scene's spatial reference and the length of the measured perimeter.
+ *
+ * In **geographic coordinate systems** (GCS) and in **Web Mercator**:
+ * - If the measurement's perimeter is below 100 km, they are computed in a Euclidean manner,
+ *   in an [ECEF](https://en.wikipedia.org/wiki/ECEF) coordinate system (or equivalent on other planets).
+ * - If the perimeter is above 100 km, they are computed geodetically, and the visualization takes
+ *   the curvature of the planet into consideration.
+ *
+ * In **projected coordinate systems** (PCS), apart from Web Mercator, the area and perimeter
+ * are always calculated in a Euclidean manner (in their respective PCS).
+ *
+ * The area may be visualized and calculated in two ways:
+ * 1. If all the vertices are mostly coplanar (lying on the same plane),
+ *    the measurement polygon is formed on that plane, and area and perimeter are calculated from its geometry.
+ * 2. If the vertices don't form a planar surface, the measurement polygon
+ *    is projected to a horizontal plane, and area and perimeter are calculated from its geometry.
+ *
+ * ![area-measurement-3d-types](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/area-measurement-3d-types.png)
+ *
+ * When the component is active, a horizontal "laser" line is drawn which indicates the height at the current mouse position.
+ * This line can help in analyzing the heights of objects relative to each other and the terrain.
+ *
+ * **Things to consider**
+ *
+ * * Area Measurement 3D is designed to work in the Scene component. For measurements in the [Map](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-map/)
+ * component, use [Area Measurement 2D](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-area-measurement-2d/).
+ * * Snapping is enabled by default. Holding the `CTRL` key disables it.
+ * * Layer types currently supported for snapping are:
+ * [FeatureLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html),
+ * [GraphicsLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GraphicsLayer.html) (except Mesh geometries),
+ * [GeoJSONLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GeoJSONLayer.html),
+ * [WFSLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-WFSLayer.html),
+ * [CSVLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-CSVLayer.html),
+ * [3D Object SceneLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-SceneLayer.html),
+ * and [BuildingSceneLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-BuildingSceneLayer.html).
+ *
+ * **See also**
+ *
+ * - [AreaMeasurementAnalysis](https://developers.arcgis.com/javascript/latest/api-reference/esri-analysis-AreaMeasurementAnalysis.html)
+ * - [Sample - Measurement in 3D](https://developers.arcgis.com/javascript/latest/sample-code/measurement-3d/)
+ * - [Sample - Analysis objects](https://developers.arcgis.com/javascript/latest/sample-code/analysis-objects/)
  *
  * [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-area-measurement-3d/)
  */
 export declare class ArcgisAreaMeasurement3d extends LitElement {
-    get analysis(): AreaMeasurementAnalysis;
+    /**
+     * The [AreaMeasurementAnalysis](https://developers.arcgis.com/javascript/latest/api-reference/esri-analysis-AreaMeasurementAnalysis.html)
+     * created or modified by the component.
+     *
+     * When connecting the Area Measurement 3D component to the [Scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/)
+     * component, it automatically creates an empty analysis and adds it to the Scene's
+     * [analyses](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/#analyses) collection.
+     * Whenever the component is destroyed, the analysis is automatically removed from the collection.
+     *
+     * Alternatively, a programmatically created analysis can be provided to the component.
+     * Then, the application itself needs to add it to and later remove it from the Scene's analyses collection.
+     *
+     * ```js
+     * // Create the analysis.
+     * const areaMeasurementAnalysis = new AreaMeasurementAnalysis({
+     *    geometry: new Polygon({
+     *      spatialReference: { latestWkid: 3857, wkid: 102100 },
+     *      rings: [
+     *        [
+     *          [-13624861.22274897, 4550346.5519295, 63.378210234455764],
+     *          [-13624935.305160372, 4550273.144585712, 63.37829629518092],
+     *          [-13624995.61798748, 4550334.030096778, 63.37819860037416],
+     *          [-13624921.53589075, 4550407.42357004, 63.3783810287714],
+     *          [-13624861.22274897, 4550346.5519295, 63.378210234455764]
+     *        ]
+     *      ]
+     *    })
+     * });
+     * // Get the Scene and measurement component and wait until they are ready.
+     * const viewElement = document.querySelector("arcgis-scene");
+     * await viewElement.viewOnReady();
+     * const areaMeasurement3d = document.querySelector("arcgis-area-measurement-3d");
+     * await areaMeasurement3d.componentOnReady();
+     * // Add the analysis to the Scene component.
+     * viewElement.analyses.add(areaMeasurementAnalysis);
+     * // Connect the analysis to the measurement component:
+     * areaMeasurement3d.analysis = areaMeasurementAnalysis;
+     * ```
+     */
+    analysis: __esri.AreaMeasurementAnalysis;
     /**
      * 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
@@ -38,22 +119,43 @@ export declare class ArcgisAreaMeasurement3d extends LitElement {
     label?: string;
     /** @default "bottom-left" */
     position: __esri.UIPosition;
+    /**
+     * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+     *
+     * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
+     */
     referenceElement?: ArcgisReferenceElement | string;
-    /** The current state of the component. */
-    state: "ready" | "disabled" | "measuring" | "measured";
-    /** Unit system (imperial, metric) or specific unit used for displaying the distance values. */
+    /**
+     * The component's state. The values mean the following:
+     *
+     * * `disabled` -  not ready yet
+     * * `ready` - ready for measuring
+     * * `measuring` - currently measuring
+     * * `measured` - measuring has finished
+     */
+    readonly state: "ready" | "disabled" | "measured" | "measuring";
+    /**
+     * Unit system (imperial, metric) or specific unit used for displaying the area values. Possible values are listed in
+     * [unitOptions](#unitOptions).
+     */
     unit: __esri.SystemOrAreaUnit;
-    /** List of unit systems (imperial, metric) and specific units for displaying the distance values. */
+    /**
+     * List of available units and unit systems (imperial, metric) that are shown in the component's dropdown.
+     * By default, the following units are included: `metric`, `imperial`, `square-inches`, `square-feet`, `square-us-feet`, `square-yards`, `square-miles`, `square-meters`, `square-kilometers`, `acres`, `ares`, `hectares`.
+     * Possible [unit](#unit) values can only be a subset of this list.
+     */
     unitOptions: __esri.SystemOrAreaUnit[];
+    /** Clears the current measurement. */
     clear(): Promise<void>;
     /** Permanently destroy the component. */
     destroy(): Promise<void>;
+    /** Starts a new measurement. */
     start(): Promise<void>;
     /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
     readonly arcgisPropertyChange: TargetedEvent<this, {
         name: "state" | "analysis";
     }>;
-    /** Emitted when the component associated with a map or scene view is is ready to be interacted with. */
+    /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
     readonly arcgisReady: TargetedEvent<this, void>;
 }
 export {};

package/dist/components/arcgis-area-measurement-3d/customElement.js

@@ -1,22 +1,21 @@
 import { c as h } from "../../chunks/runtime.js";
-import { html as y } from "lit-html";
-import { LitElement as g, createEvent as f, noShadowRoot as w, nothing as v, safeClassMap as b } from "@arcgis/lumina";
-import { usePropertyChange as M } from "@arcgis/lumina/controllers";
-import { u as O } from "../../chunks/useT9n.js";
-import { m as $ } from "../../chunks/useViewModel.js";
-import { g as m } from "../../chunks/globalCss.js";
-import { css as A } from "@lit/reactive-element/css-tag.js";
+import { css as y, html as g } from "lit";
+import { LitElement as f, createEvent as w, noShadowRoot as v, nothing as b, safeClassMap as M } from "@arcgis/lumina";
+import { usePropertyChange as O } from "@arcgis/lumina/controllers";
+import { u as $ } from "../../chunks/useT9n.js";
+import { m as A } from "../../chunks/useViewModel.js";
+import { g as p } from "../../chunks/globalCss.js";
 import U from "@arcgis/core/analysis/AreaMeasurementAnalysis.js";
 import { getDefaultUnitForView as V } from "@arcgis/core/applications/Components/getDefaultUnits.js";
 import { property as o, subclass as _ } from "@arcgis/core/core/accessorSupport/decorators.js";
 import { watch as D } from "@arcgis/core/core/reactiveUtils.js";
 import { A as C } from "../../chunks/AnalysisViewModel.js";
-import { g as p, a as d } from "../../chunks/measurementUtils.js";
+import { g as m, a as d } from "../../chunks/measurementUtils.js";
 import { hasValidAreaResult as L } from "@arcgis/core/applications/Components/analysisUtils.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.8 */
-const P = A`@layer{arcgis-area-measurement-3d{display:block}.arcgis-area-measurement-3d{position:relative;padding:var(--esri-widget-padding);overflow-y:auto}}`;
+v4.34.0-next.81 */
+const P = y`@layer{arcgis-area-measurement-3d{display:block}.arcgis-area-measurement-3d{position:relative;padding:var(--esri-widget-padding);overflow-y:auto}}`;
 var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, n = (e, t, s, a) => {
   for (var r = a > 1 ? void 0 : a ? E(t, s) : t, l = e.length - 1, u; l >= 0; l--)
     (u = e[l]) && (r = (a ? u(t, s, r) : u(r)) || r);
@@ -61,8 +60,8 @@ let i = class extends C {
     const { analysisView: e } = this, t = e?.result, s = t?.mode ?? "euclidean", a = e != null && L(e);
     return {
       mode: s,
-      area: p(t?.area, a),
-      perimeter: p(t?.perimeter, a)
+      area: m(t?.area, a),
+      perimeter: m(t?.perimeter, a)
     };
   }
   get unitOptions() {
@@ -122,23 +121,20 @@ n([
 i = n([
   _("components.area-measurement-3d.AreaMeasurement3dViewModel")
 ], i);
-const R = "arcgis-area-measurement-3d", x = { base: R }, T = $(i);
-class j extends g {
+const R = "arcgis-area-measurement-3d", x = { base: R }, T = A(i);
+class j extends f {
   constructor() {
-    super(...arguments), this.viewModel = T(this), this.messages = O({ blocking: !0 }), this.autoDestroyDisabled = !1, this.icon = "measure-area", this.position = "bottom-left", this.state = this.viewModel.state, this.unit = this.viewModel.unit, this.unitOptions = this.viewModel.unitOptions, this.arcgisPropertyChange = M()("analysis", "state"), this.arcgisReady = f();
+    super(...arguments), this.viewModel = T(this), this.messages = $({ blocking: !0 }), this.analysis = this.viewModel.analysis, this.autoDestroyDisabled = !1, this.icon = "measure-area", this.position = "bottom-left", this.state = this.viewModel.state, this.unit = this.viewModel.unit, this.unitOptions = this.viewModel.unitOptions, this.arcgisPropertyChange = O()("analysis", "state"), this.arcgisReady = w();
   }
   static {
-    this.properties = { analysis: 32, autoDestroyDisabled: 5, icon: 3, label: 1, position: 1, referenceElement: 1, state: 3, unit: 1, unitOptions: 0 };
+    this.properties = { analysis: 0, autoDestroyDisabled: 5, icon: 3, label: 1, position: 1, referenceElement: 1, state: 35, unit: 1, unitOptions: 0 };
   }
   static {
-    this.shadowRootOptions = w;
+    this.shadowRootOptions = v;
   }
   static {
     this.styles = P;
   }
-  get analysis() {
-    return this.viewModel.analysis;
-  }
   async clear() {
     this.viewModel.clear();
   }
@@ -150,10 +146,10 @@ class j extends g {
   }
   render() {
     const { messages: t, unit: s, unitOptions: a, viewModel: r } = this, { measurement: l, state: u } = r;
-    return y`<div aria-label=${t.componentLabel ?? v} class=${b({
+    return g`<div aria-label=${t.componentLabel ?? b} class=${M({
       [x.base]: !0,
-      [m.widget]: !0,
-      [m.panel]: !0
+      [p.widget]: !0,
+      [p.panel]: !0
     })} role=presentation><arcgis-measurement-content .state=${r.displayState} .hintLabel=${t.hint} .unsupportedLabel=${t.unsupported} .items=${[
       {
         title: t.area,

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

@@ -1,5 +1,5 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
-/// <reference types="../../index.d.ts" />
+/// <reference path="../../index.d.ts" />
 import { Use } from '@arcgis/lumina/controllers';
 import { default as Attachments } from '@arcgis/core/widgets/Attachments.js';
 import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
@@ -9,8 +9,8 @@ declare const useAttachmentsWidget: (component: LitElement & Pick<Attachments, "
     state?: unknown;
     viewModel?: __esri.AttachmentsViewModel | undefined;
     closed?: boolean;
-    icon: import('@arcgis/components-utils').Nil | string;
-    label: import('@arcgis/components-utils').Nil | string;
+    icon: import('@arcgis/toolkit/type').nil | string;
+    label: import('@arcgis/toolkit/type').nil | string;
     referenceElement?: ArcgisReferenceElement | string;
     position: __esri.UIPosition;
     arcgisReady: import('@arcgis/lumina').EventEmitter;
@@ -91,6 +91,11 @@ export declare class ArcgisAttachments extends LitElement {
     label: string | nullish;
     /** @default "bottom-left" */
     position: __esri.UIPosition;
+    /**
+     * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+     *
+     * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
+     */
     referenceElement?: ArcgisReferenceElement | string;
     /**
      * The current state of the widget.
@@ -108,13 +113,19 @@ export declare class ArcgisAttachments extends LitElement {
      * @default false
      */
     readonly submitting: boolean;
+    /**
+     * A collection of [AttachmentInfo](https://developers.arcgis.com/javascript/latest/api-reference/esri-rest-query-support-AttachmentInfo.html) defined on a feature.
+     *
+     * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Attachments-AttachmentsViewModel.html#attachmentInfos)
+     */
+    readonly attachmentInfos: __esri.Collection<__esri.AttachmentInfo>;
     /** Permanently destroy the component. */
     destroy(): Promise<void>;
     /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
     readonly arcgisPropertyChange: TargetedEvent<this, {
-        name: "state" | "submitting";
+        name: "state" | "submitting" | "attachmentInfos";
     }>;
-    /** Emitted when the component associated with a map or scene view is is ready to be interacted with. */
+    /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
     readonly arcgisReady: TargetedEvent<this, void>;
 }
 export {};

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

@@ -1,22 +1,22 @@
 import { c as t } from "../../chunks/runtime.js";
 import { usePropertyChange as e } from "@arcgis/lumina/controllers";
 import i from "@arcgis/core/widgets/Attachments.js";
-import { LitElement as s, createEvent as a, noShadowRoot as d } from "@arcgis/lumina";
-import { m as o } from "../../chunks/useWidget.js";
-import { css as h } from "@lit/reactive-element/css-tag.js";
+import { LitElement as s, createEvent as a, noShadowRoot as o } from "@arcgis/lumina";
+import { m as h } from "../../chunks/useWidget.js";
+import { css as d } from "lit";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.8 */
-const n = h`@layer{arcgis-attachments{display:block}}`, r = o(i);
+v4.34.0-next.81 */
+const n = d`@layer{arcgis-attachments{display:block}}`, r = h(i);
 class l extends s {
   constructor() {
-    super(...arguments), this.widget = r(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.capabilities = this.widget.capabilities, this.displayType = this.widget.displayType, this.graphic = this.widget.graphic, this.hideAddButton = this.widget.visibleElements.addButton, this.hideAddSubmitButton = this.widget.visibleElements.addSubmitButton, this.hideCancelAddButton = this.widget.visibleElements.cancelAddButton, this.hideCancelUpdateButton = this.widget.visibleElements.cancelUpdateButton, this.hideDeleteButton = this.widget.visibleElements.deleteButton, this.hideErrorMessage = this.widget.visibleElements.errorMessage, this.hideProgressBar = this.widget.visibleElements.progressBar, this.hideUpdateButton = this.widget.visibleElements.updateButton, this.icon = this.widget.icon, this.label = this.widget.label, this.position = "bottom-left", this.state = this.viewModel.state, this.submitting = this.widget.submitting, this.arcgisPropertyChange = e()("submitting", "state"), this.arcgisReady = a();
+    super(...arguments), this.widget = r(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.capabilities = this.widget.capabilities, this.displayType = this.widget.displayType, this.graphic = this.widget.graphic, this.hideAddButton = this.widget.visibleElements.addButton, this.hideAddSubmitButton = this.widget.visibleElements.addSubmitButton, this.hideCancelAddButton = this.widget.visibleElements.cancelAddButton, this.hideCancelUpdateButton = this.widget.visibleElements.cancelUpdateButton, this.hideDeleteButton = this.widget.visibleElements.deleteButton, this.hideErrorMessage = this.widget.visibleElements.errorMessage, this.hideProgressBar = this.widget.visibleElements.progressBar, this.hideUpdateButton = this.widget.visibleElements.updateButton, this.icon = this.widget.icon, this.label = this.widget.label, this.position = "bottom-left", this.state = this.viewModel.state, this.submitting = this.widget.submitting, this.attachmentInfos = this.viewModel.attachmentInfos, this.arcgisPropertyChange = e()("submitting", "state", "attachmentInfos"), this.arcgisReady = a();
   }
   static {
-    this.properties = { autoDestroyDisabled: 5, capabilities: 0, displayType: 1, graphic: 0, hideAddButton: 5, hideAddSubmitButton: 5, hideCancelAddButton: 5, hideCancelUpdateButton: 5, hideDeleteButton: 5, hideErrorMessage: 5, hideProgressBar: 5, hideUpdateButton: 5, icon: 1, label: 1, position: 1, referenceElement: 1, state: 3, submitting: 4 };
+    this.properties = { autoDestroyDisabled: 5, capabilities: 0, displayType: 1, graphic: 0, hideAddButton: 5, hideAddSubmitButton: 5, hideCancelAddButton: 5, hideCancelUpdateButton: 5, hideDeleteButton: 5, hideErrorMessage: 5, hideProgressBar: 5, hideUpdateButton: 5, icon: 1, label: 1, position: 1, referenceElement: 1, state: 3, submitting: 4, attachmentInfos: 0 };
   }
   static {
-    this.shadowRootOptions = d;
+    this.shadowRootOptions = o;
   }
   static {
     this.styles = n;

package/dist/components/arcgis-basemap-gallery/customElement.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
-/// <reference types="../../index.d.ts" />
-import { Use } from '@arcgis/lumina/controllers';
+/// <reference path="../../index.d.ts" />
 import { default as BasemapGalleryViewModel } from '@arcgis/core/widgets/BasemapGallery/BasemapGalleryViewModel.js';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { Use } from '@arcgis/lumina/controllers';
 import { HeadingLevel } from '../../support/heading';
 import { ArcgisReferenceElement } from '../../utils/component-utils';
 
@@ -52,10 +52,19 @@ export declare class ArcgisBasemapGallery extends LitElement {
      * @default ""
      */
     label: string;
-    /** Replace localized message strings with your own strings. **Warning**: individual message keys may change between releases. */
+    /**
+     * Replace localized message strings with your own strings.
+     *
+     * _**Note**: Individual message keys may change between releases._
+     */
     messageOverrides?: typeof this.messages._overrides;
     /** @default "bottom-left" */
     position: __esri.UIPosition;
+    /**
+     * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+     *
+     * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
+     */
     referenceElement?: ArcgisReferenceElement | string;
     /** The source for basemaps that the component will display. */
     source: __esri.LocalBasemapsSource | __esri.PortalBasemapsSource;
@@ -73,7 +82,7 @@ export declare class ArcgisBasemapGallery extends LitElement {
     readonly arcgisPropertyChange: TargetedEvent<this, {
         name: "state" | "activeBasemap";
     }>;
-    /** Emitted when the component associated with a map or scene view is is ready to be interacted with. */
+    /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
     readonly arcgisReady: TargetedEvent<this, void>;
     private messages: Partial<{
         componentLabel: string;

package/dist/components/arcgis-basemap-gallery/customElement.js

@@ -1,20 +1,19 @@
 import { c as u } from "../../chunks/runtime.js";
-import { html as r } from "lit-html";
-import { usePropertyChange as w } from "@arcgis/lumina/controllers";
-import { classes as v } from "@arcgis/components-utils";
-import { when as y, watch as b } from "@arcgis/core/core/reactiveUtils.js";
-import f from "@arcgis/core/widgets/BasemapGallery/BasemapGalleryViewModel.js";
-import { LitElement as $, createEvent as M, noShadowRoot as x, safeClassMap as n, nothing as h, safeStyleMap as R } from "@arcgis/lumina";
-import { u as _ } from "../../chunks/useT9n.js";
-import { m as B } from "../../chunks/useViewModel.js";
-import { H as I } from "../../chunks/heading.js";
+import { css as w, html as r } from "lit";
+import { classes as v } from "@arcgis/toolkit/dom";
+import { when as y } from "@arcgis/core/core/reactiveUtils.js";
+import b from "@arcgis/core/widgets/BasemapGallery/BasemapGalleryViewModel.js";
+import { LitElement as f, createEvent as $, noShadowRoot as M, safeClassMap as n, nothing as h, safeStyleMap as x } from "@arcgis/lumina";
+import { usePropertyChange as R } from "@arcgis/lumina/controllers";
+import { u as B } from "../../chunks/useT9n.js";
+import { m as I } from "../../chunks/useViewModel.js";
+import { H as L } from "../../chunks/heading.js";
 import { g as d } from "../../chunks/globalCss.js";
 import { c as a } from "../../chunks/basemap-gallery-resources.js";
-import { css as L } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.8 */
-const D = L`@layer{arcgis-basemap-gallery{display:block}}`, A = B(f), m = {
+v4.34.0-next.81 */
+const _ = w`@layer{arcgis-basemap-gallery{display:block}}`, D = I(b), m = {
   // Below this width, items are displayed as a single column and the thumbnail is placed above the title.
   small: 200,
   // Below this width, items are displayed as a single column but with the thumbnail side-by-side
@@ -24,18 +23,18 @@ const D = L`@layer{arcgis-basemap-gallery{display:block}}`, A = B(f), m = {
   // Above this width, items are displayed in a grid.
   wide: 420
 };
-class C extends $ {
+class A extends f {
   constructor() {
-    super(...arguments), this.messages = _({}), this.viewModel = A(this), this._width = 0, this._state = "", this.activeBasemap = this.viewModel.activeBasemap, this.autoDestroyDisabled = !1, this.disabled = !1, this.headingLevel = 2, this.icon = "basemap", this.label = "", this.position = "bottom-left", this.source = this.viewModel.source, this.state = this.viewModel.state, this.arcgisPropertyChange = w()("activeBasemap", "state"), this.arcgisReady = M();
+    super(...arguments), this.messages = B({}), this.viewModel = D(this), this._width = 0, this.activeBasemap = this.viewModel.activeBasemap, this.autoDestroyDisabled = !1, this.disabled = !1, this.headingLevel = 2, this.icon = "basemap", this.label = "", this.position = "bottom-left", this.source = this.viewModel.source, this.state = this.viewModel.state, this.arcgisPropertyChange = R()("activeBasemap", "state"), this.arcgisReady = $();
   }
   static {
-    this.properties = { _width: 16, _state: 16, activeBasemap: 1, autoDestroyDisabled: 5, disabled: 7, headingLevel: 9, icon: 1, label: 1, messageOverrides: 0, position: 1, referenceElement: 1, source: 0, state: 3 };
+    this.properties = { _width: 16, activeBasemap: 1, autoDestroyDisabled: 5, disabled: 7, headingLevel: 9, icon: 1, label: 1, messageOverrides: 0, position: 1, referenceElement: 1, source: 0, state: 3 };
   }
   static {
-    this.shadowRootOptions = x;
+    this.shadowRootOptions = M;
   }
   static {
-    this.styles = D;
+    this.styles = _;
   }
   async destroy() {
     await this.manager.destroy();
@@ -45,15 +44,18 @@ class C extends $ {
       y(() => this.source, () => {
         this.viewModel.loadSource();
       }, { sync: !0, initial: !0 }),
-      b(() => this.source.state, () => {
-        this._state = this.source.state;
-      }, { sync: !0 })
+      (() => {
+        const s = new ResizeObserver((o) => {
+          for (const t of o)
+            this._width = t.contentRect.width;
+        }), e = this.el.childElem;
+        return e && s.observe(e), {
+          remove() {
+            s?.disconnect();
+          }
+        };
+      })()
     ]);
-    const s = new ResizeObserver((o) => {
-      for (const t of o)
-        this._width = t.contentRect.width;
-    }), e = this.el.childElem;
-    e && s.observe(e);
   }
   _getRoundRobinIndex(s, e) {
     return (s + e) % e;
@@ -74,13 +76,13 @@ class C extends $ {
       // For compatibility with Esri View UI
     }, i = this._width;
     i <= m.small || i >= m.wide ? t[a.layoutGrid] = !0 : i < m.default && (t[a.narrowItems] = !0);
-    const c = s ? r`<div class=${n(a.loader)}></div>` : null, l = s ? null : o.length > 0 ? r`<div aria-disabled=${this.disabled ?? h} aria-label=${this.label ?? h} class=${n(a.itemContainer)} @keydown=${this._handleKeyDown} role=radiogroup>${o.map((p, g) => r`<arcgis-basemap-gallery-item .disabled=${e} .item=${p} .itemIndex=${g} .viewModel=${this.viewModel} .messages=${this.messages}></arcgis-basemap-gallery-item>`)}</div>` : r`<div class=${n(d.empty)}>${I({ level: this.headingLevel, children: this.messages.noBasemaps })}</div>`;
-    return r`<div class=${n(v(a.base, d.widget, d.panel, t))} style=${R({
+    const c = s ? r`<div class=${n(a.loader)}></div>` : null, l = s ? null : o.length > 0 ? r`<div aria-disabled=${this.disabled ?? h} aria-label=${this.label ?? h} class=${n(a.itemContainer)} @keydown=${this._handleKeyDown} role=radiogroup>${o.map((p, g) => r`<arcgis-basemap-gallery-item .disabled=${e} .item=${p} .itemIndex=${g} .viewModel=${this.viewModel} .messages=${this.messages}></arcgis-basemap-gallery-item>`)}</div>` : r`<div class=${n(d.empty)}>${L({ level: this.headingLevel, children: this.messages.noBasemaps })}</div>`;
+    return r`<div class=${n(v(a.base, d.widget, d.panel, t))} style=${x({
       "--esri-basemap-gallery-small": `${m.small}px`
     })}>${[c, l]}</div>`;
   }
 }
-u("arcgis-basemap-gallery", C);
+u("arcgis-basemap-gallery", A);
 export {
-  C as ArcgisBasemapGallery
+  A as ArcgisBasemapGallery
 };

package/dist/components/arcgis-basemap-gallery-item/customElement.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
-/// <reference types="../../index.d.ts" />
+/// <reference path="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { ArcgisBasemapGallery } from '../arcgis-basemap-gallery/customElement.js';
 

package/dist/components/arcgis-basemap-gallery-item/customElement.js

@@ -1,6 +1,6 @@
 import { g as y, c as I } from "../../chunks/runtime.js";
-import { classes as B } from "@arcgis/components-utils";
-import { watch as g } from "@arcgis/core/core/reactiveUtils.js";
+import { classes as B } from "@arcgis/toolkit/dom";
+import { watch as u } from "@arcgis/core/core/reactiveUtils.js";
 import { LitElement as w, noShadowRoot as C, nothing as r, safeClassMap as s } from "@arcgis/lumina";
 import { html as l } from "lit-html";
 import { g as x } from "../../chunks/globalCss.js";
@@ -8,7 +8,7 @@ import { c as i } from "../../chunks/basemap-gallery-resources.js";
 import { g as A } from "../../chunks/component-utils.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.8 */
+v4.34.0-next.81 */
 function _(e) {
   return e.portalItem?.type === "Web Scene" || e.referenceLayers.some((t) => t.type === "scene");
 }
@@ -27,22 +27,25 @@ class T extends w {
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      g(() => this.item.state, (t) => {
+      u(() => this.item.state, (t) => {
         this._itemState = t;
       }, { sync: !0 }),
-      g(() => this.viewModel.activeBasemap, (t) => {
+      u(() => this.viewModel.activeBasemap, (t) => {
         this._isActive = this.item.basemap.id === t?.id, this._isActive && (A(this)?.focus(), this.el.scrollIntoView({ block: "nearest" }));
       }, { initial: !0, sync: !0 })
     ]);
   }
   render() {
-    const { disabled: t, item: a, itemIndex: o, viewModel: c, messages: h } = this, u = a.basemap.thumbnailUrl || y("assets/basemap-gallery/images/basemap-toggle-64.svg"), m = a.basemap.title, b = a.basemap.portalItem?.snippet, $ = a.error?.message || b || m, { activeBasemapIndex: p } = c, n = p === o, f = n || p === -1 && o === 0 ? 0 : -1, v = {
+    const { disabled: t, item: a, itemIndex: o, viewModel: c, messages: g } = this;
+    if (!a.basemap)
+      return null;
+    const h = a.basemap.thumbnailUrl || y("assets/basemap-gallery/images/basemap-toggle-64.svg"), m = a.basemap.title, b = a.basemap.portalItem?.snippet, $ = a.error?.message || b || m, { activeBasemapIndex: p } = c, n = p === o, f = n || p === -1 && o === 0 ? 0 : -1, v = {
       [i.selectedItem]: n,
       [i.itemError]: a.state === "error"
     }, d = `basemapgallery-item-${a.uid}`;
     return l`<div .ariaChecked=${n} .ariaDisabled=${t} aria-labelledby=${d ?? r} class=${s(B(i.item, v))} role=radio tabindex=${f ?? r} title=${$ ?? r} @click=${() => {
       a.state === "ready" && (c.activeBasemap = a.basemap);
-    }}><img alt class=${s(i.itemThumbnail)} src=${u ?? r}><div class=${s(i.itemContent)}><div class=${s(i.itemTitle)}><span id=${d ?? r}>${m}</span></div>${_(a.basemap) ? D(a.basemap, h) : null}</div>${a.state !== "loading" ? null : l`<calcite-scrim><span aria-hidden=true class=${s(x.loaderAnimation)} role=presentation></span></calcite-scrim>`}</div>`;
+    }}><img alt class=${s(i.itemThumbnail)} src=${h ?? r}><div class=${s(i.itemContent)}><div class=${s(i.itemTitle)}><span id=${d ?? r}>${m}</span></div>${_(a.basemap) ? D(a.basemap, g) : null}</div>${a.state !== "loading" ? null : l`<calcite-scrim><span aria-hidden=true class=${s(x.loaderAnimation)} role=presentation></span></calcite-scrim>`}</div>`;
   }
 }
 function D(e, t) {

package/dist/components/arcgis-basemap-layer-list/customElement.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
-/// <reference types="../../index.d.ts" />
+/// <reference path="../../index.d.ts" />
 import { Use } from '@arcgis/lumina/controllers';
 import { default as BasemapLayerList } from '@arcgis/core/widgets/BasemapLayerList.js';
 import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
@@ -9,8 +9,8 @@ declare const useBasemapLayerListWidget: (component: LitElement & Pick<BasemapLa
     state?: unknown;
     viewModel?: __esri.BasemapLayerListViewModel | undefined;
     closed?: boolean;
-    icon: import('@arcgis/components-utils').Nil | string;
-    label: import('@arcgis/components-utils').Nil | string;
+    icon: import('@arcgis/toolkit/type').nil | string;
+    label: import('@arcgis/toolkit/type').nil | string;
     referenceElement?: ArcgisReferenceElement | string;
     position: __esri.UIPosition;
     arcgisReady: import('@arcgis/lumina').EventEmitter;
@@ -150,6 +150,11 @@ export declare class ArcgisBasemapLayerList extends LitElement {
     minFilterItems: number;
     /** @default "bottom-left" */
     position: __esri.UIPosition;
+    /**
+     * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
+     *
+     * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
+     */
     referenceElement?: ArcgisReferenceElement | string;
     /**
      * Specifies a function to handle filtering reference layer [list items](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList-ListItem.html).
@@ -183,7 +188,7 @@ export declare class ArcgisBasemapLayerList extends LitElement {
      *
      * @default "none"
      */
-    selectionMode: "single" | "multiple" | "none" | "single-persist";
+    selectionMode: "single" | "none" | "multiple" | "single-persist";
     /** @default false */
     showCloseButton: boolean;
     /** @default false */
@@ -216,7 +221,7 @@ export declare class ArcgisBasemapLayerList extends LitElement {
     readonly arcgisPropertyChange: TargetedEvent<this, {
         name: "state";
     }>;
-    /** Emitted when the component associated with a map or scene view is is ready to be interacted with. */
+    /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
     readonly arcgisReady: TargetedEvent<this, void>;
     /** Emitted when an action is triggered on the component. */
     readonly arcgisTriggerAction: TargetedEvent<this, __esri.BasemapLayerListTriggerActionEvent>;

package/dist/components/arcgis-basemap-layer-list/customElement.js

@@ -4,11 +4,11 @@ import { reEmitEvent as i } from "@arcgis/lumina/controllers/accessor";
 import s from "@arcgis/core/widgets/BasemapLayerList.js";
 import { LitElement as r, createEvent as a, noShadowRoot as l } from "@arcgis/lumina";
 import { m as o } from "../../chunks/useWidget.js";
-import { css as h } from "@lit/reactive-element/css-tag.js";
+import { css as h } from "lit";
 import { c as d } from "../../chunks/createCloseEvent.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.34/esri/copyright.txt for details.
-v4.34.0-next.8 */
+v4.34.0-next.81 */
 const n = h`@layer{arcgis-basemap-layer-list{display:block}}`, c = o(s);
 class g extends r {
   constructor() {