@arcgis/map-components 4.34.0-next.7 → 4.34.0-next.70

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

@@ -1,6 +1,5 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
-/// <reference types="../../index.d.ts" />
-import { default as DirectLineMeasurementAnalysis } from '@arcgis/core/analysis/DirectLineMeasurementAnalysis';
+/// <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 DirectLineMeasurement3DViewModel } from './DirectLineMeasure
 
 declare const useViewModel: (component: LitElement & Pick<DirectLineMeasurement3DViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<DirectLineMeasurement3DViewModel>) => DirectLineMeasurement3DViewModel;
 /**
- * The Direct Line Measurement 3D component calculates and displays the 3D distance between two points. This component
- * can be used in a [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html)
- * to measure the vertical, horizontal, and direct distance between two points.
+ * The Direct Line 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 vertical, horizontal, and direct distances between two points.
+ *
+ * [![measurement-line-3d](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/3D_DirectLineMeasurement_widget.png)](https://developers.arcgis.com/javascript/latest/sample-code/measurement-3d/)
+ *
+ * How distances are computed depends on the scene's spatial reference.
+ *
+ * In **geographic coordinate systems** (GCS) and in **Web Mercator**:
+ * - Direct distance is computed in a Euclidean manner, in an [ECEF](https://en.wikipedia.org/wiki/ECEF) coordinate system (or equivalent on other planets);
+ * - Horizontal distance is computed geodetically, taking into consideration the curvature of the planet;
+ * - Vertical distance is computed as an elevation difference.
+ *
+ * In **projected coordinate systems** (PCS), apart from Web Mercator, all three distances (direct, horizontal, and vertical)
+ *  are computed in a Euclidean manner (in their respective PCS).
+ *
+ * Direct Line Measurement 3D component visualizes and labels the direct, horizontal, and vertical distances and displays the same values
+ * in the UI panel. When the distance between the points is greater than 100 kilometers,
+ * the measurement visualization is simplified, and only the horizontal and vertical distances are calculated.
+ * The direct distance option becomes unavailable.
+ *
+ * ![measurement-line-3d](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/direct-line-measurement-3d.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.
+ * A second laser line shows the intersection of the scene with the vertical plane that passes through the checkered line.
+ *
+ * **Things to consider**
+ *
+ * * Direct Line 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 [Distance Measurement 2D](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-distance-measurement-2d/).
+ * * Snapping is enabled by default. This can be temporarily disabled by holding the `CTRL` key.
+ * * 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**
+ *
+ * - [DirectLineMeasurementAnalysis](https://developers.arcgis.com/javascript/latest/api-reference/esri-analysis-DirectLineMeasurementAnalysis.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/)
+ * - [Sample - Color theming for interactive tools](https://developers.arcgis.com/javascript/latest/sample-code/view-theme/)
  *
  * [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-direct-line-measurement-3d/)
  */
 export declare class ArcgisDirectLineMeasurement3d extends LitElement {
-    get analysis(): DirectLineMeasurementAnalysis;
+    /**
+     * The [DirectLineMeasurementAnalysis](https://developers.arcgis.com/javascript/latest/api-reference/esri-analysis-DirectLineMeasurementAnalysis.html)
+     * created or modified by the component.
+     *
+     * When connecting the Direct Line 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 directLineAnalysis = new DirectLineMeasurementAnalysis({
+     *    startPoint: new Point({
+     *      spatialReference: { latestWkid: 3857, wkid: 102100 },
+     *      x: -13624995.61798748,
+     *      y: 4550334.030096778,
+     *      z: 63.378210234455764
+     *    }),
+     *    endPoint: new Point({
+     *      spatialReference: { latestWkid: 3857, wkid: 102100 },
+     *      x: -13624921.53589075,
+     *      y: 4550407.42357004,
+     *      z: 63.3783810287714
+     *    }),
+     * });
+     * // Get the Scene and measurement component and wait until they are ready.
+     * const viewElement = document.querySelector("arcgis-scene");
+     * await viewElement.viewOnReady();
+     * const directLineMeasurement3d = document.querySelector("arcgis-direct-line-measurement-3d");
+     * await directLineMeasurement3d.componentOnReady();
+     * // Add the analysis to the Scene component.
+     * viewElement.analyses.add(directLineAnalysis);
+     * // Connect the analysis to the measurement component:
+     * directLineMeasurement3d.analysis = directLineAnalysis;
+     * ```
+     */
+    analysis: __esri.DirectLineMeasurementAnalysis;
     /**
      * 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,25 +119,47 @@ export declare class ArcgisDirectLineMeasurement3d 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;
-    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 distance values. Possible values are listed in
+     * [unitOptions](#unitOptions).
+     */
     unit: __esri.SystemOrLengthUnit;
-    /** 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`, `inches`, `feet`, `us-feet`, `yards`, `miles`, `nautical-miles`, `meters`, `kilometers`.
+     * Possible [unit](#unit) values can only be a subset of this list.
+     */
     unitOptions: __esri.SystemOrLengthUnit[];
+    /** 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>;
 }
 /**
- * The Direct Line Measurement 3D component calculates and displays the 3D distance between two points. This component can be used in a [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html) to measure the vertical, horizontal, and direct distance between two points.
+ * The Directline Measurement 3D component calculates and displays the 3D distance between two points. It can be used in a [Scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/) component to measure the vertical, horizontal, and direct distance between two points.
  *
  * [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-directline-measurement-3d/)
  *

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

@@ -1,11 +1,10 @@
 import { c as p } from "../../chunks/runtime.js";
-import { html as g } from "lit-html";
-import { LitElement as v, createEvent as f, noShadowRoot as w, nothing as D, 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 U } from "../../chunks/useViewModel.js";
+import { css as g, html as v } from "lit";
+import { LitElement as f, createEvent as w, noShadowRoot as D, nothing as b, safeClassMap as M } from "@arcgis/lumina";
+import { usePropertyChange as O } from "@arcgis/lumina/controllers";
+import { u as U } from "../../chunks/useT9n.js";
+import { m as $ } from "../../chunks/useViewModel.js";
 import { g as d } from "../../chunks/globalCss.js";
-import { css as $ } from "@lit/reactive-element/css-tag.js";
 import L from "@arcgis/core/analysis/DirectLineMeasurementAnalysis.js";
 import { isAboveGeodesicDistanceThreshold as _ } from "@arcgis/core/applications/Components/analysisUtils.js";
 import { getDefaultUnitForView as V } from "@arcgis/core/applications/Components/getDefaultUnits.js";
@@ -15,8 +14,8 @@ import { A as C } from "../../chunks/AnalysisViewModel.js";
 import { g as c, m } from "../../chunks/measurementUtils.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.7 */
-const z = $`@layer{arcgis-directline-measurement-3d,arcgis-direct-line-measurement-3d{display:block}.arcgis-direct-line-measurement-3d{position:relative;padding:var(--esri-widget-padding);overflow-y:auto}}`;
+v4.34.0-next.70 */
+const z = g`@layer{arcgis-directline-measurement-3d,arcgis-direct-line-measurement-3d{display:block}.arcgis-direct-line-measurement-3d{position:relative;padding:var(--esri-widget-padding);overflow-y:auto}}`;
 var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (e, t, s, a) => {
   for (var n = a > 1 ? void 0 : a ? E(t, s) : t, l = e.length - 1, u; l >= 0; l--)
     (u = e[l]) && (n = (a ? u(t, s, n) : u(n)) || n);
@@ -131,23 +130,20 @@ r([
 i = r([
   P("components.direct-line-measurement-3d.DirectLineMeasurement3dViewModel")
 ], i);
-const x = "arcgis-direct-line-measurement-3d", T = { base: x }, R = U(i);
-class h extends v {
+const x = "arcgis-direct-line-measurement-3d", T = { base: x }, R = $(i);
+class h extends f {
   constructor() {
-    super(...arguments), this.viewModel = R(this), this.messages = O({ name: "directline-measurement-3d", blocking: !0 }), this.autoDestroyDisabled = !1, this.icon = "measure-line", 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 = R(this), this.messages = U({ name: "directline-measurement-3d", blocking: !0 }), this.analysis = this.viewModel.analysis, this.autoDestroyDisabled = !1, this.icon = "measure-line", 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: 1, 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 = D;
   }
   static {
     this.styles = z;
   }
-  get analysis() {
-    return this.viewModel.analysis;
-  }
   async clear() {
     this.viewModel.clear();
   }
@@ -159,7 +155,7 @@ class h extends v {
   }
   render() {
     const { messages: t, unit: s, unitOptions: a, viewModel: n } = this, { measurement: l, state: u } = n;
-    return g`<div aria-label=${t.componentLabel ?? D} class=${b({
+    return v`<div aria-label=${t.componentLabel ?? b} class=${M({
       [T.base]: !0,
       [d.widget]: !0,
       [d.panel]: !0

package/dist/components/arcgis-directional-pad/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 DirectionalPadViewModel } from '@arcgis/core/widgets/DirectionalPad/DirectionalPadViewModel.js';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
@@ -54,10 +54,19 @@ export declare class ArcgisDirectionalPad extends LitElement {
     icon?: string;
     /** The component's default label. */
     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;
     /**
      * Whether to display the button to reset the rotation angle. This only takes
@@ -93,7 +102,7 @@ export declare class ArcgisDirectionalPad 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>;
     private messages: Partial<{
         componentLabel: string;

package/dist/components/arcgis-directional-pad/customElement.js

@@ -1,20 +1,19 @@
 import { c as p } from "../../chunks/runtime.js";
-import { html as o } from "lit-html";
-import { ref as m } from "lit-html/directives/ref.js";
-import { keyed as d } from "lit-html/directives/keyed.js";
-import { usePropertyChange as b } from "@arcgis/lumina/controllers";
-import { focusElement as g } from "@arcgis/components-utils";
-import { watch as _ } from "@arcgis/core/core/reactiveUtils.js";
+import { css as m, html as o } from "lit";
+import { ref as b } from "lit/directives/ref.js";
+import { keyed as d } from "lit/directives/keyed.js";
+import { usePropertyChange as g } from "@arcgis/lumina/controllers";
+import { focusElement as _ } from "@arcgis/toolkit/dom";
+import { watch as v } from "@arcgis/core/core/reactiveUtils.js";
 import f from "@arcgis/core/widgets/DirectionalPad/DirectionalPadViewModel.js";
-import { LitElement as v, createEvent as $, noShadowRoot as w, safeClassMap as n, nothing as l, safeStyleMap as R } from "@arcgis/lumina";
-import { u as C } from "../../chunks/useT9n.js";
-import { m as x } from "../../chunks/useViewModel.js";
-import { g as y } from "../../chunks/component-utils.js";
+import { LitElement as $, createEvent as w, noShadowRoot as R, safeClassMap as n, nothing as l, safeStyleMap as C } from "@arcgis/lumina";
+import { u as x } from "../../chunks/useT9n.js";
+import { m as y } from "../../chunks/useViewModel.js";
+import { g as M } from "../../chunks/component-utils.js";
 import { g as h } from "../../chunks/globalCss.js";
-import { css as M } 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.7 */
+v4.34.0-next.70 */
 const u = [-45, 0, 45, -90, 90, -135, 180, 135], S = {
   0: { label: "north", iconName: "chevron-up" },
   45: { label: "northEast", iconName: "chevron-up-right" },
@@ -33,7 +32,7 @@ const u = [-45, 0, 45, -90, 90, -135, 180, 135], S = {
   rotationSliderContainer: `${a}__rotation-slider-container`,
   rotationReset: `${a}__rotation-reset-button`,
   error: `${a}__error`
-}, B = M`@layer{.arcgis-directional-pad{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm);outline:none;box-shadow:none!important;background-color:transparent!important;user-select:none;calcite-action-pad{display:contents}calcite-action-group{touch-action:none}calcite-action{aspect-ratio:1}}.arcgis-directional-pad__buttons-container{--calcite-color-background: transparent;--calcite-action-group-gap: 0;--calcite-action-group-padding: 0;calcite-action{--calcite-color-focus: var(--calcite-color-foreground-3)}calcite-action:not([active]){--calcite-action-background-color-press: var(--calcite-color-foreground-1)}calcite-action[active]{--calcite-action-background-color: var(--calcite-color-foreground-3)}calcite-icon{transform:var(--rotation, unset)}@media (hover: none){calcite-action{--calcite-action-background-color-hover: var(--calcite-color-foreground-1);--calcite-action-text-color-press: var(--calcite-color-text-3)}}}.arcgis-directional-pad__rotation-container{display:block;width:100%;calcite-action{flex:.3}}.arcgis-directional-pad__rotation-slider-container{display:flex;flex:1;align-items:center;calcite-slider{flex:1;padding-inline:var(--calcite-spacing-xxs)}}}`;
+}, B = m`@layer{.arcgis-directional-pad{display:flex;flex-direction:column;gap:var(--calcite-spacing-sm);outline:none;box-shadow:none!important;background-color:transparent!important;user-select:none;calcite-action-pad{display:contents}calcite-action-group{touch-action:none}calcite-action{aspect-ratio:1}}.arcgis-directional-pad__buttons-container{--calcite-color-background: transparent;--calcite-action-group-gap: 0;--calcite-action-group-padding: 0;calcite-action{--calcite-color-focus: var(--calcite-color-foreground-3)}calcite-action:not([active]){--calcite-action-background-color-press: var(--calcite-color-foreground-1)}calcite-action[active]{--calcite-action-background-color: var(--calcite-color-foreground-3)}calcite-icon{transform:var(--rotation, unset)}@media (hover: none){calcite-action{--calcite-action-background-color-hover: var(--calcite-color-foreground-1);--calcite-action-text-color-press: var(--calcite-color-text-3)}}}.arcgis-directional-pad__rotation-container{display:block;width:100%;calcite-action{flex:.3}}.arcgis-directional-pad__rotation-slider-container{display:flex;flex:1;align-items:center;calcite-slider{flex:1;padding-inline:var(--calcite-spacing-xxs)}}}`;
 function E(c) {
   const { x: t, y: e, width: i, height: r } = c.getBoundingClientRect();
   return { x: t + i / 2, y: e + r / 2 };
@@ -41,16 +40,16 @@ function E(c) {
 function D(c) {
   return c?.spatialReference?.isWebMercator || c?.spatialReference?.isGeographic || !1;
 }
-const k = x(f);
-class P extends v {
+const k = y(f);
+class P extends $ {
   constructor() {
-    super(...arguments), this.messages = C({}), this._onContextMenu = (t) => t.preventDefault(), this._buttons = {}, this.viewModel = k(this), this.angle = this.viewModel.angle, this.rotation = this.viewModel.rotation, this.autoDestroyDisabled = !1, this.disabled = this.viewModel.disabled, this.hideDirectionalButtons = !1, this.icon = "move", this.position = "bottom-left", this.showRotationResetButton = !1, this.showRotationSlider = !1, this.state = this.viewModel.state, this.visualScale = "s", this.arcgisPropertyChange = b()("state"), this.arcgisReady = $();
+    super(...arguments), this.messages = x({}), this._onContextMenu = (t) => t.preventDefault(), this._buttons = {}, this.viewModel = k(this), this.angle = this.viewModel.angle, this.rotation = this.viewModel.rotation, this.autoDestroyDisabled = !1, this.disabled = this.viewModel.disabled, this.hideDirectionalButtons = !1, this.icon = "move", this.position = "bottom-left", this.showRotationResetButton = !1, this.showRotationSlider = !1, this.state = this.viewModel.state, this.visualScale = "s", this.arcgisPropertyChange = g()("state"), this.arcgisReady = w();
   }
   static {
     this.properties = { _rotationEnabled: 16, angle: 16, rotation: 16, autoDestroyDisabled: 5, disabled: 5, hideDirectionalButtons: 5, icon: 1, label: 1, messageOverrides: 0, position: 3, referenceElement: 1, showRotationResetButton: 5, showRotationSlider: 5, state: 3, visualScale: 1 };
   }
   static {
-    this.shadowRootOptions = w;
+    this.shadowRootOptions = R;
   }
   static {
     this.styles = B;
@@ -64,8 +63,8 @@ class P extends v {
   loaded() {
     this.manager.onLifecycle(() => [
       // Move focus when movement angle changed by touch/mouse (not keyboard!)
-      _(() => this.viewModel.angle, () => {
-        this._buttonsContainer?.contains(document.activeElement) && (this.viewModel.angle == null ? y(this)?.focus() : g(this._buttons[this.viewModel.angle]));
+      v(() => this.viewModel.angle, () => {
+        this._buttonsContainer?.contains(document.activeElement) && (this.viewModel.angle == null ? M(this)?.focus() : _(this._buttons[this.viewModel.angle]));
       })
     ]);
   }
@@ -115,7 +114,7 @@ class P extends v {
     return d("directional-buttons-container", o`<calcite-action-bar expand-disabled floating layout=grid overflow-actions-disabled><calcite-action-group class=${n(s.buttonsContainer)} dir=ltr @contextmenu=${{
       handleEvent: this._onContextMenu,
       capture: !0
-    }} ${m(this._setButtonContainerRef)}>${u.slice(0, 4).map(this._renderButton, this)}${this._renderCompass()}${u.slice(4).map(this._renderButton, this)}</calcite-action-group></calcite-action-bar>`);
+    }} ${b(this._setButtonContainerRef)}>${u.slice(0, 4).map(this._renderButton, this)}${this._renderCompass()}${u.slice(4).map(this._renderButton, this)}</calcite-action-group></calcite-action-bar>`);
   }
   _renderButton(t) {
     const { label: e, iconName: i } = S[t], r = this.messages[e];
@@ -123,7 +122,7 @@ class P extends v {
   }
   _renderCompass() {
     const t = this.disabled || D(this.view) ? "compass-needle" : "arrow-up", e = this.rotation === 0, i = this.messages.resetHeading;
-    return o`<calcite-action alignment=center class=${n(s.compassButton)} .disabled=${this.disabled || !this._rotationEnabled || e} @click=${this._onRotationReset} .scale=${this.visualScale} style=${R(this._rotateIcon(this.rotation))} .text=${i ?? ""} title=${i ?? l}>${!e && o`<calcite-icon .icon=${t} .scale=${this.visualScale}></calcite-icon>` || ""}</calcite-action>`;
+    return o`<calcite-action alignment=center class=${n(s.compassButton)} .disabled=${this.disabled || !this._rotationEnabled || e} @click=${this._onRotationReset} .scale=${this.visualScale} style=${C(this._rotateIcon(this.rotation))} .text=${i ?? ""} title=${i ?? l}>${!e && o`<calcite-icon .icon=${t} .scale=${this.visualScale}></calcite-icon>` || ""}</calcite-action>`;
   }
   _renderRotation() {
     return d("slider-container", o`<calcite-action-bar expand-disabled floating layout=horizontal><calcite-action-group class=${n(s.rotationContainer)}>${this.showRotationResetButton ? this._renderRotationResetButton() : null}${this._renderRotationSlider()}</calcite-action-group></calcite-action-bar>`);

package/dist/components/arcgis-directional-pad/utils.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
-import { Nil } from '@arcgis/components-utils';
+import { nil } from '@arcgis/toolkit/type';
 import { DirectionalPadAngle } from './constants';
 export interface Vector {
     readonly x: number;
@@ -22,4 +22,4 @@ export declare function toUnitVector(first: Vector, second: Vector): Vector;
  * @private
  */
 export declare function findElementCenter(element: Element): Vector;
-export declare function canShowNorth(view: __esri.MapView | __esri.SceneView | Nil): boolean;
+export declare function canShowNorth(view: __esri.MapView | __esri.SceneView | nil): boolean;

package/dist/components/arcgis-directions/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 RouteLayer } from '@arcgis/core/layers/RouteLayer.js';
 import { default as Directions } from '@arcgis/core/widgets/Directions.js';
@@ -11,8 +11,8 @@ declare const useDirectionsWidget: (component: LitElement & Pick<Directions, "ic
     state?: unknown;
     viewModel?: __esri.DirectionsViewModel | 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;
@@ -107,12 +107,17 @@ export declare class ArcgisDirections extends LitElement {
     maxStops: 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;
     routeLayerItemId?: string;
     /**
-     * Controls the default properties used when [searching](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html).
+     * Controls the default properties used when searching.
      *
-     * @default null
+     * @default { popupEnabled: false, resultGraphicEnabled: false }
      */
     searchProperties: nullish | __esri.DirectionsSearchProperties;
     /**
@@ -143,7 +148,7 @@ export declare class ArcgisDirections extends LitElement {
     readonly arcgisPropertyChange: TargetedEvent<this, {
         name: "state" | "lastRoute";
     }>;
-    /** 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-directions/customElement.js

@@ -6,10 +6,10 @@ import d from "@arcgis/core/widgets/Directions.js";
 import { LitElement as n, createEvent as l, noShadowRoot as w } from "@arcgis/lumina";
 import { m } from "../../chunks/useWidget.js";
 import { e as u } from "../../chunks/component-utils.js";
-import { css as y } from "@lit/reactive-element/css-tag.js";
+import { css as y } 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.7 */
+v4.34.0-next.70 */
 const c = y`@layer{arcgis-directions{display:block}}`, g = m(d), i = "map-components:arcgis-directions";
 class p extends n {
   constructor() {

package/dist/components/arcgis-distance-measurement-2d/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 DistanceMeasurement2D } from '@arcgis/core/widgets/DistanceMeasurement2D.js';
 import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
@@ -9,8 +9,8 @@ declare const useDistanceMeasurement2dWidget: (component: LitElement & Pick<Dist
     state?: unknown;
     viewModel?: __esri.DistanceMeasurement2DViewModel | 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;
@@ -57,6 +57,11 @@ export declare class ArcgisDistanceMeasurement2d 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 [SnappingOptions](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-interactive-snapping-SnappingOptions.html) for sketching.
@@ -71,7 +76,7 @@ export declare class ArcgisDistanceMeasurement2d extends LitElement {
      *
      * @default "disabled"
      */
-    readonly state: "ready" | "disabled" | "measuring" | "measured";
+    readonly state: "ready" | "disabled" | "measured" | "measuring";
     /**
      * Unit system (imperial, metric) or specific unit used for displaying the distance values.
      *
@@ -94,7 +99,7 @@ export declare class ArcgisDistanceMeasurement2d 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>;
 }
 export {};

package/dist/components/arcgis-distance-measurement-2d/customElement.js

@@ -3,10 +3,10 @@ import { usePropertyChange as s } from "@arcgis/lumina/controllers";
 import e from "@arcgis/core/widgets/DistanceMeasurement2D.js";
 import { LitElement as i, createEvent as o, noShadowRoot as a } from "@arcgis/lumina";
 import { m as n } from "../../chunks/useWidget.js";
-import { css as r } from "@lit/reactive-element/css-tag.js";
+import { css as r } 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.7 */
+v4.34.0-next.70 */
 const c = r`@layer{arcgis-distance-measurement-2d{display:block}}`, h = n(e);
 class d extends i {
   constructor() {

package/dist/components/arcgis-editor/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 Editor } from '@arcgis/core/widgets/Editor.js';
 import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
@@ -9,8 +9,8 @@ declare const useEditorWidget: (component: LitElement & Pick<Editor, "icon" | "l
     state?: unknown;
     viewModel?: __esri.EditorViewModel | 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;
@@ -97,6 +97,11 @@ export declare class ArcgisEditor extends LitElement {
     layerInfos: nullish | __esri.EditorLayerInfo[];
     /** @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;
     /** @default false */
     showSnappingControlsElementsHeader: boolean;
@@ -111,7 +116,7 @@ export declare class ArcgisEditor extends LitElement {
      *
      * [Read more...](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor-EditorViewModel.html#state)
      */
-    readonly state: "ready" | "disabled" | "add-association-create-association" | "add-association-select-feature" | "add-association-select-layer" | "adding-attachment" | "awaiting-feature-creation-info" | "awaiting-feature-to-create" | "awaiting-feature-to-update" | "awaiting-update-feature-candidate" | "creating-features" | "editing-attributes" | "editing-attachment" | "editing-existing-feature" | "editing-features" | "editing-new-feature" | "viewing-selection-list";
+    readonly state: "ready" | "disabled" | "add-association-create-association" | "add-association-select-feature" | "add-association-select-layer" | "adding-attachment" | "awaiting-feature-creation-info" | "awaiting-feature-to-create" | "awaiting-feature-to-update" | "awaiting-update-feature-candidate" | "creating-features" | "editing-attributes" | "editing-attachment" | "editing-existing-feature" | "editing-features" | "viewing-selection-list";
     /**
      * This property allows customization of supporting Editor widgets and their default behavior.
      *
@@ -137,7 +142,7 @@ export declare class ArcgisEditor extends LitElement {
     readonly arcgisPropertyChange: TargetedEvent<this, {
         name: "state" | "activeWorkflow";
     }>;
-    /** 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-editor/customElement.js

@@ -3,10 +3,10 @@ import { usePropertyChange as i } from "@arcgis/lumina/controllers";
 import s from "@arcgis/core/widgets/Editor.js";
 import { LitElement as o, createEvent as a, noShadowRoot as l } from "@arcgis/lumina";
 import { m as n } from "../../chunks/useWidget.js";
-import { css as r } from "@lit/reactive-element/css-tag.js";
+import { css as r } 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.7 */
+v4.34.0-next.70 */
 const g = r`@layer{arcgis-editor{display:block}}`, d = n(s);
 class h extends o {
   constructor() {