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

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

@@ -5,11 +5,11 @@ import o from "@arcgis/core/views/MapView.js";
 import w from "@arcgis/core/WebMap.js";
 import { LitElement as p, createEvent as a, noShadowRoot as c } from "@arcgis/lumina";
 import { c as v, i as l } from "../../chunks/component-utils.js";
-import { css as m } from "@lit/reactive-element/css-tag.js";
+import { css as m } 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 d = m`@layer{arcgis-map{display:block;height:100%;.esri-view{height:100%;width:100%}}}`, g = r(
+v4.34.0-next.81 */
+const g = m`@layer{arcgis-map{display:block;height:100%;.esri-view{height:100%;width:100%}}}`, d = r(
   w,
   /**
    * Since omitProps is only needed for typing, not runtime, `{} as { ... }` is
@@ -20,21 +20,21 @@ const d = m`@layer{arcgis-map{display:block;height:100%;.esri-view{height:100%;w
    * in an externalized package.
    */
   {}
-), y = r(o, {});
-class u extends p {
+), u = r(o, {});
+class y extends p {
   constructor() {
-    super(), this._map = g(this), this.view = y(this), this.allLayerViews = this.view.allLayerViews, this.autoDestroyDisabled = !1, this.background = this.view.background, this.basemap = this._map.basemap, this.basemapView = this.view.basemapView, this.constraints = this.view.constraints, this.displayFilterDisabled = this.view.displayFilterEnabled, this.fatalError = this.view.fatalError, this.floors = this.view.floors, this.graphics = this.view.graphics, this.ground = this._map.ground, this.highlights = this.view.highlights, this.highlightOptions = this.view.highlightOptions, this.ipsInfo = this._map.ipsInfo, this.layerViews = this.view.layerViews, this.magnifier = this.view.magnifier, this.map = this.view.map, this.navigation = this.view.navigation, this.padding = this.view.padding, this.popup = this.view.popup, this.popupDisabled = this.view.popupEnabled, this.ready = this.view.ready, this.resizeAlign = this.view.resizeAlign, this.resolution = this.view.resolution, this.rotation = this.view.rotation, this.spatialReference = this.view.spatialReference, this.suspended = this.view.suspended, this.theme = this.view.theme, this.timeExtent = this.view.timeExtent, this.timeZone = this.view.timeZone, this.updating = this.view.updating, this.visibleArea = this.view.visibleArea, this.arcgisViewChange = a(), this.arcgisViewClick = e(() => this.view, "click"), this.arcgisViewDoubleClick = e(() => this.view, "double-click"), this.arcgisViewDrag = e(() => this.view, "drag"), this.arcgisViewHold = e(() => this.view, "hold"), this.arcgisViewImmediateClick = e(() => this.view, "immediate-click"), this.arcgisViewImmediateDoubleClick = e(() => this.view, "immediate-double-click"), this.arcgisViewKeyDown = e(() => this.view, "key-down"), this.arcgisViewKeyUp = e(() => this.view, "key-up"), this.arcgisViewLayerviewCreate = e(() => this.view, "layerview-create"), this.arcgisViewLayerviewCreateError = e(() => this.view, "layerview-create-error"), this.arcgisViewLayerviewDestroy = e(() => this.view, "layerview-destroy"), this.arcgisViewMouseWheel = e(() => this.view, "mouse-wheel"), this.arcgisViewPointerDown = e(() => this.view, "pointer-down"), this.arcgisViewPointerEnter = e(() => this.view, "pointer-enter"), this.arcgisViewPointerLeave = e(() => this.view, "pointer-leave"), this.arcgisViewPointerMove = e(() => this.view, "pointer-move"), this.arcgisViewPointerUp = e(() => this.view, "pointer-up"), this.arcgisViewReadyChange = a(), this.view.ui = {
+    super(), this._map = d(this), this.view = u(this), this.allLayerViews = this.view.allLayerViews, this.autoDestroyDisabled = !1, this.background = this.view.background, this.basemap = this._map.basemap, this.basemapView = this.view.basemapView, this.constraints = this.view.constraints, this.displayFilterDisabled = this.view.displayFilterEnabled, this.fatalError = this.view.fatalError, this.floors = this.view.floors, this.graphics = this.view.graphics, this.ground = this._map.ground, this.highlights = this.view.highlights, this.highlightOptions = this.view.highlightOptions, this.ipsInfo = this._map.ipsInfo, this.layerViews = this.view.layerViews, this.magnifier = this.view.magnifier, this.map = this.view.map, this.navigation = this.view.navigation, this.padding = this.view.padding, this.popup = this.view.popup, this.popupDisabled = this.view.popupEnabled, this.ready = this.view.ready, this.resizeAlign = this.view.resizeAlign, this.resolution = this.view.resolution, this.rotation = this.view.rotation, this.spatialReference = this.view.spatialReference, this.suspended = this.view.suspended, this.theme = this.view.theme, this.timeExtent = this.view.timeExtent, this.timeZone = this.view.timeZone, this.updating = this.view.updating, this.visibleArea = this.view.visibleArea, this.arcgisViewChange = a(), this.arcgisViewClick = e(() => this.view, "click"), this.arcgisViewDoubleClick = e(() => this.view, "double-click"), this.arcgisViewDrag = e(() => this.view, "drag"), this.arcgisViewHold = e(() => this.view, "hold"), this.arcgisViewImmediateClick = e(() => this.view, "immediate-click"), this.arcgisViewImmediateDoubleClick = e(() => this.view, "immediate-double-click"), this.arcgisViewKeyDown = e(() => this.view, "key-down"), this.arcgisViewKeyUp = e(() => this.view, "key-up"), this.arcgisViewLayerviewCreate = e(() => this.view, "layerview-create"), this.arcgisViewLayerviewCreateError = e(() => this.view, "layerview-create-error"), this.arcgisViewLayerviewDestroy = e(() => this.view, "layerview-destroy"), this.arcgisViewMouseWheel = e(() => this.view, "mouse-wheel"), this.arcgisViewPointerDown = e(() => this.view, "pointer-down"), this.arcgisViewPointerEnter = e(() => this.view, "pointer-enter"), this.arcgisViewPointerLeave = e(() => this.view, "pointer-leave"), this.arcgisViewPointerMove = e(() => this.view, "pointer-move"), this.arcgisViewPointerUp = e(() => this.view, "pointer-up"), this.arcgisViewReadyChange = a(), this.view.ui = {
       components: ["attribution"]
     };
   }
   static {
-    this.properties = { _map: 16, view: 32, allLayerViews: 0, autoDestroyDisabled: 5, background: 0, basemap: 1, basemapView: 0, center: 1, constraints: 0, displayFilterDisabled: 5, extent: 0, fatalError: 0, floors: 0, gamepad: 32, graphics: 0, ground: 1, highlights: 0, highlightOptions: 0, interacting: 32, ipsInfo: 0, itemId: 3, layerViews: 0, magnifier: 0, map: 0, navigating: 32, navigation: 0, padding: 0, popup: 0, popupDisabled: 5, ready: 4, resizeAlign: 1, resolution: 8, rotation: 9, scale: 9, spatialReference: 0, stationary: 32, suspended: 7, theme: 0, timeExtent: 0, timeZone: 1, updating: 4, viewpoint: 0, visibleArea: 0, zoom: 9 };
+    this.properties = { _map: 16, view: 32, allLayerViews: 0, autoDestroyDisabled: 5, background: 0, basemap: 1, basemapView: 0, center: 1, constraints: 0, displayFilterDisabled: 5, extent: 0, fatalError: 0, floors: 0, focusAreas: 0, gamepad: 32, graphics: 0, ground: 1, highlights: 0, highlightOptions: 0, interacting: 32, ipsInfo: 0, itemId: 3, layerViews: 0, magnifier: 0, map: 0, navigating: 32, navigation: 0, padding: 0, popup: 0, popupDisabled: 5, ready: 4, resizeAlign: 1, resolution: 8, rotation: 9, scale: 9, spatialReference: 0, stationary: 32, suspended: 7, theme: 0, timeExtent: 0, timeZone: 1, updating: 4, viewpoint: 0, visibleArea: 0, zoom: 9 };
   }
   static {
     this.shadowRootOptions = c;
   }
   static {
-    this.styles = d;
+    this.styles = g;
   }
   get center() {
     return this.view.center;
@@ -49,6 +49,15 @@ class u extends p {
   set extent(i) {
     i && !this.extent?.equals(i) && (this.view.extent = i);
   }
+  get focusAreas() {
+    return this.map ? this.map.focusAreas : {
+      areas: [],
+      style: "bright"
+    };
+  }
+  set focusAreas(i) {
+    this.map && (this.map.focusAreas = i);
+  }
   get gamepad() {
     return this.view.input.gamepad;
   }
@@ -86,16 +95,16 @@ class u extends p {
     this.view.zoom = i;
   }
   async addLayer(i, t) {
-    this.map.add(i, t);
+    this.map?.add(i, t);
   }
   async addLayers(i, t) {
-    this.map.addMany(i, t);
+    this.map?.addMany(i, t);
   }
   async addTable(i) {
-    this.map.tables.add(i);
+    this.map?.tables.add(i);
   }
   async addTables(i, t) {
-    this.map.tables.addMany(i, t);
+    this.map?.tables.addMany(i, t);
   }
   async closePopup() {
     this.view.closePopup();
@@ -136,13 +145,15 @@ class u extends p {
   }
   loaded() {
     this.map ||= this._map, this.manager.onLifecycle(() => [
-      s(() => this.map, () => this._map = this.map, { initial: !0, sync: !0 }),
+      s(() => this.map, (i) => {
+        i && (this._map = i);
+      }, { initial: !0, sync: !0 }),
       s(() => this.view.stationary, () => this.arcgisViewChange.emit(), { initial: !0 }),
       s(() => this.view.ready, () => this.arcgisViewReadyChange.emit(), { initial: this.view.ready })
     ]);
   }
 }
-h("arcgis-map", u);
+h("arcgis-map", y);
 export {
-  u as ArcgisMap
+  y as ArcgisMap
 };

package/dist/components/arcgis-measurement/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 Measurement } from '@arcgis/core/widgets/Measurement.js';
 import { PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
@@ -9,8 +9,8 @@ declare const useMeasurementWidget: (component: LitElement & Pick<Measurement, "
     state?: unknown;
     viewModel?: __esri.MeasurementViewModel | 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;
@@ -45,7 +45,7 @@ export declare class ArcgisMeasurement extends LitElement {
      *
      * @default null
      */
-    readonly activeWidget: nullish | __esri.DistanceMeasurement2D | __esri.AreaMeasurement2D | __esri.AreaMeasurement3D | __esri.DirectLineMeasurement3D;
+    readonly activeWidget: nullish | __esri.AreaMeasurement2D | __esri.AreaMeasurement3D | __esri.DirectLineMeasurement3D | __esri.DistanceMeasurement2D;
     /**
      * Unit system (imperial, metric) or specific unit used for displaying the area values.
      *
@@ -83,6 +83,11 @@ export declare class ArcgisMeasurement extends LitElement {
     linearUnit: __esri.SystemOrLengthUnit;
     /** @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 ViewModel's state.
@@ -91,7 +96,7 @@ export declare class ArcgisMeasurement extends LitElement {
      *
      * @default "disabled"
      */
-    readonly state: "ready" | "disabled" | "measuring" | "measured";
+    readonly state: "ready" | "disabled" | "measured" | "measuring";
     clear(): Promise<void>;
     /** Permanently destroy the component. */
     destroy(): Promise<void>;
@@ -100,7 +105,7 @@ export declare class ArcgisMeasurement extends LitElement {
     readonly arcgisPropertyChange: TargetedEvent<this, {
         name: "state" | "activeTool";
     }>;
-    /** 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-measurement/customElement.js

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

package/dist/components/arcgis-measurement-content/customElement.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="../../index.d.ts" />
+/// <reference path="../../index.d.ts" />
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { MeasurementState, MeasurementValue } from '../../support/measurementUtils';
 

package/dist/components/arcgis-measurement-content/customElement.js

@@ -1,13 +1,12 @@
-import { c as n } from "../../chunks/runtime.js";
-import { html as i } from "lit-html";
-import o from "@arcgis/core/applications/Components/QuantityFormatter.js";
-import { LitElement as c, safeClassMap as s } from "@arcgis/lumina";
-import { f as l } from "../../chunks/measurementUtils.js";
-import { css as m } from "@lit/reactive-element/css-tag.js";
+import { c as r } from "../../chunks/runtime.js";
+import { css as o, html as i } from "lit";
+import c from "@arcgis/core/applications/Components/QuantityFormatter.js";
+import { LitElement as l, safeClassMap as s } from "@arcgis/lumina";
+import { f as 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.8 */
-const u = m`:host,.hint,.error,.section,.actions,.item{display:flex;flex-direction:column;gap:var(--calcite-spacing-md);animation:esri-fade-in .25s ease-in-out}.error{color:var(--calcite-color-status-danger)}.error,.hint{overflow:hidden;p{margin:0;padding:0}}.item-disabled{color:var(--calcite-color-text-1);opacity:var(--calcite-opacity-light)}.item-value{font-weight:var(--calcite-font-weight-semibold)}.actions{justify-content:center}`, e = {
+v4.34.0-next.81 */
+const u = o`:host,.hint,.error,.section,.actions,.item{display:flex;flex-direction:column;gap:var(--calcite-spacing-md);animation:esri-fade-in .25s ease-in-out}.error{color:var(--calcite-color-status-danger)}.error,.hint{overflow:hidden;p{margin:0;padding:0}}.item-disabled{color:var(--calcite-color-text-1);opacity:var(--calcite-opacity-light)}.item-value{font-weight:var(--calcite-font-weight-semibold)}.actions{justify-content:center}`, e = {
   error: "error",
   hint: "hint",
   actions: "actions",
@@ -17,9 +16,9 @@ const u = m`:host,.hint,.error,.section,.actions,.item{display:flex;flex-directi
   itemTitle: "item-title",
   itemValue: "item-value"
 };
-class d extends c {
+class d extends l {
   constructor() {
-    super(...arguments), this._formatter = new o(), this.items = [], this.state = "disabled", this.unsupportedLabel = "";
+    super(...arguments), this._formatter = new c(), this.items = [], this.state = "disabled", this.unsupportedLabel = "";
   }
   static {
     this.properties = { hintLabel: 1, items: 0, state: 1, unsupportedLabel: 1 };
@@ -47,13 +46,13 @@ function h(t) {
   return i`<section class=${s(e.section)}>${t.items.map((a) => f({ formatter: t.formatter, measurement: a.measurement, title: a.title }))}</section>`;
 }
 function f(t) {
-  const a = t.measurement.state === "available" ? l(t.formatter, t.measurement.value) : null, r = t.measurement.state === "unavailable";
+  const a = t.measurement.state === "available" ? m(t.formatter, t.measurement.value) : null, n = t.measurement.state === "unavailable";
   return i`<div class=${s({
     [e.item]: !0,
-    [e.itemDisabled]: r
+    [e.itemDisabled]: n
   })}><span class=${s(e.itemTitle)}>${t.title}</span><span aria-live=polite class=${s(e.itemValue)}>${a ?? "-"}</span></div>`;
 }
-n("arcgis-measurement-content", d);
+r("arcgis-measurement-content", d);
 export {
   d as ArcgisMeasurementContent
 };

package/dist/components/arcgis-navigation-toggle/customElement.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
-/// <reference types="../../index.d.ts" />
+/// <reference path="../../index.d.ts" />
 import { Use } from '@arcgis/lumina/controllers';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { PropertyValues } from 'lit';
 import { useView } from '../../controllers/useView';
 import { ArcgisReferenceElement } from '../../utils/component-utils';
 
-type State = "disabled" | "ready";
+type NavigationToggleState = "disabled" | "ready";
 type NavigationMode = "pan" | "rotate";
 type LayoutMode = "horizontal" | "vertical";
 /**
@@ -16,7 +16,9 @@ type LayoutMode = "horizontal" | "vertical";
  * to rotate the view. When the navigation mode is set to "rotate", the mouse drag gesture rotates the view and
  * right-click + drag pans the view.
  *
- * The Navigation Toggle component is only supported in 3D.
+ * **Known limitations**
+ *
+ * Navigation Toggle is only supported in a 3D [Scene](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-scene/) component.
  *
  * [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-navigation-toggle/)
  */
@@ -36,35 +38,37 @@ export declare class ArcgisNavigationToggle extends LitElement {
      * @default "vertical"
      */
     layout: LayoutMode;
-    /** 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;
     /**
-     * The navigation mode of the view. See the table below for a list of
-     * possible values.
+     * The navigation mode of the view. The possible values:
      *
-     * Possible Value | Description
-     * ---------------|-------------
-     * pan | The mouse drag gesture pans the view. Right-click + drag allows the user to perform a 3D rotate around the center of the view.
-     * rotate | The mouse drag gesture performs a 3D rotate around the center of the view and the right-click + drag gesture pans the view.
+     * * `pan` - The mouse drag gesture pans the view. Right-click + drag allows the user to perform a 3D rotate around the center of the view.
+     * * `rotate` - The mouse drag gesture performs a 3D rotate around the center of the view and the right-click + drag gesture pans the view.
      *
      * @default "pan"
      */
     navigationMode: NavigationMode;
     /** @default "top-left" */
     position: __esri.UIPosition;
-    referenceElement?: ArcgisReferenceElement | string;
     /**
-     * The current state of the component.
+     * 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.
      *
-     * @default "disabled"
+     * @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)
      */
-    state: State;
+    referenceElement?: ArcgisReferenceElement | string;
+    /** The current state of the component. */
+    get state(): NavigationToggleState;
     toggle(): 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" | "layout";
     }>;
-    /** 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-navigation-toggle/customElement.js

@@ -2,29 +2,31 @@ import { c as p } from "../../chunks/runtime.js";
 import { usePropertyChange as d } from "@arcgis/lumina/controllers";
 import { when as c } from "@arcgis/core/core/reactiveUtils.js";
 import { LitElement as g, createEvent as h, noShadowRoot as m, safeClassMap as v, nothing as r } from "@arcgis/lumina";
-import { html as u } from "lit";
-import { u as y } from "../../chunks/useT9n.js";
+import { css as u, html as y } from "lit";
+import { u as b } from "../../chunks/useT9n.js";
 import { u as f } from "../../chunks/useView.js";
-import { g as b } from "../../chunks/globalCss.js";
-import { css as M } from "@lit/reactive-element/css-tag.js";
+import { g as M } from "../../chunks/globalCss.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 $ = "arcgis-navigation-toggle", w = {
+v4.34.0-next.81 */
+const $ = "arcgis-navigation-toggle", _ = {
   base: $
-}, x = M`@layer{.arcgis-navigation-toggle{display:flex;box-shadow:0 1px 2px #0000004d;inline-size:fit-content;block-size:fit-content}}`, e = { pan: "move", rotate: "rotate" };
-class _ extends g {
+}, w = u`@layer{.arcgis-navigation-toggle{display:flex;box-shadow:0 1px 2px #0000004d;inline-size:fit-content;block-size:fit-content}}`, e = { pan: "move", rotate: "rotate" };
+class x extends g {
   constructor() {
-    super(...arguments), this.view = f(this), this._messages = y(), this.icon = e.pan, this.layout = "vertical", this.navigationMode = "pan", this.position = "top-left", this.state = "disabled", this.arcgisPropertyChange = d()("layout", "state"), this.arcgisReady = h();
+    super(...arguments), this.view = f(this), this._messages = b(), this._state = "disabled", this.icon = e.pan, this.layout = "vertical", this.navigationMode = "pan", this.position = "top-left", this.arcgisPropertyChange = d()("layout", "state"), this.arcgisReady = h();
   }
   static {
-    this.properties = { icon: 1, label: 1, layout: 3, messageOverrides: 0, navigationMode: 3, position: 1, referenceElement: 1, state: 3 };
+    this.properties = { _state: 16, icon: 1, label: 1, layout: 3, messageOverrides: 0, navigationMode: 3, position: 1, referenceElement: 1, state: 35 };
   }
   static {
     this.shadowRootOptions = m;
   }
   static {
-    this.styles = x;
+    this.styles = w;
+  }
+  get state() {
+    return this._state;
   }
   async toggle() {
     this.state !== "disabled" && (this.navigationMode = this.navigationMode !== "pan" ? "pan" : "rotate");
@@ -36,7 +38,7 @@ class _ extends g {
         const { view: t } = this;
         return t?.ready && t?.type === "3d" ? "ready" : "disabled";
       }, (t) => {
-        this.state = t;
+        this._state = t;
       }, { sync: !0, initial: !0 })
     ]);
   }
@@ -58,10 +60,10 @@ class _ extends g {
   }
   render() {
     const { _messages: t, navigationMode: a, state: l } = this, s = t.pan ?? "", o = t.rotate ?? "", i = l === "disabled", n = a === "pan";
-    return u`<calcite-action-bar class=${v({ [w.base]: !0, [b.disabled]: i })} expand-disabled .layout=${this.layout} scale=s><calcite-action .active=${n} appearance=solid .disabled=${i} .icon=${e.pan} @click=${this._onPanClick} scale=s .text=${s} title=${s ?? r}></calcite-action><calcite-action .active=${!n} appearance=solid .disabled=${i} .icon=${e.rotate} @click=${this._onRotateClick} scale=s .text=${o} title=${o ?? r}></calcite-action></calcite-action-bar>`;
+    return y`<calcite-action-bar class=${v({ [_.base]: !0, [M.disabled]: i })} expand-disabled .layout=${this.layout} scale=s><calcite-action .active=${n} appearance=solid .disabled=${i} .icon=${e.pan} @click=${this._onPanClick} scale=s .text=${s} title=${s ?? r}></calcite-action><calcite-action .active=${!n} appearance=solid .disabled=${i} .icon=${e.rotate} @click=${this._onRotateClick} scale=s .text=${o} title=${o ?? r}></calcite-action></calcite-action-bar>`;
   }
 }
-p("arcgis-navigation-toggle", _);
+p("arcgis-navigation-toggle", x);
 export {
-  _ as ArcgisNavigationToggle
+  x as ArcgisNavigationToggle
 };

package/dist/components/arcgis-oriented-imagery-viewer/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 OrientedImageryLayer } from '@arcgis/core/layers/OrientedImageryLayer.js';
 import { default as OrientedImageryViewer } from '@arcgis/core/widgets/OrientedImageryViewer.js';
@@ -11,8 +11,8 @@ declare const useOrientedImageryViewerWidget: (component: LitElement & Pick<Orie
     state?: unknown;
     viewModel?: __esri.OrientedImageryViewerViewModel | 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;
@@ -136,6 +136,11 @@ export declare class ArcgisOrientedImageryViewer extends LitElement {
     orientedImageryLayerItemId?: 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;
     /**
      * This property provides the location of an image pixel in Map coordinates when using map-image conversion tool.
@@ -149,7 +154,7 @@ export declare class ArcgisOrientedImageryViewer extends LitElement {
     readonly arcgisPropertyChange: TargetedEvent<this, {
         name: "layer" | "imageGalleryEnabled";
     }>;
-    /** 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-oriented-imagery-viewer/customElement.js

@@ -4,10 +4,10 @@ import s from "@arcgis/core/layers/OrientedImageryLayer.js";
 import r from "@arcgis/core/widgets/OrientedImageryViewer.js";
 import { LitElement as o, createEvent as d, noShadowRoot as n } from "@arcgis/lumina";
 import { m as l } from "../../chunks/useWidget.js";
-import { css as g } from "@lit/reactive-element/css-tag.js";
+import { css as g } 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 */
+v4.34.0-next.81 */
 const h = g`@layer{arcgis-oriented-imagery-viewer{display:block}}`, m = l(r);
 class y extends o {
   constructor() {

package/dist/components/arcgis-placement/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 { ArcgisReferenceElement, WidgetOrMapComponent } from '../../utils/component-utils';
 import { PropertyValues } from 'lit';
 import { ToElement, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
@@ -12,7 +12,12 @@ import { ToElement, PublicLitElement as LitElement, TargetedEvent } from '@arcgi
 export declare class ArcgisPlacement extends LitElement {
     /** @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;
-    /** 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>;
 }

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

@@ -1,10 +1,10 @@
 import { c as s } from "../../chunks/runtime.js";
 import { g as i, r, d as n, a as o } from "../../chunks/component-utils.js";
 import { LitElement as l, createEvent as a, noShadowRoot as c } from "@arcgis/lumina";
-import { css as h } from "@lit/reactive-element/css-tag.js";
+import { css as h } 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 */
+v4.34.0-next.81 */
 const d = h`@layer{arcgis-placement{display:flex;pointer-events:auto;box-shadow:none}.arcgis-placement__container{display:block}}`;
 class m extends l {
   constructor() {