@arcgis/map-components 4.32.0-next.99 → 4.32.1

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

@@ -1,9 +1,11 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
 /// <reference types="../../index.d.ts" />
-import { TemplateResult } from 'lit-html';
-import { ArcgisBasemapGallery } from '../../customElement.js';
+import { JsxNode, ToElement, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
+import { ArcgisBasemapGallery } from '../arcgis-basemap-gallery/customElement.js';
+
 type BasemapGalleryMessages = ArcgisBasemapGallery["messages"];
-export declare function BasemapGalleryItem({ disabled, item, itemIndex, viewModel, messages, state, }: {
+/** @private **/
+export declare class ArcgisBasemapGalleryItem extends LitElement {
     disabled: boolean;
     item: __esri.BasemapGalleryItem & {
         uid: string;
@@ -11,6 +13,5 @@ export declare function BasemapGalleryItem({ disabled, item, itemIndex, viewMode
     itemIndex: number;
     viewModel: __esri.BasemapGalleryViewModel;
     messages: BasemapGalleryMessages;
-    state: string;
-}): TemplateResult;
+}
 export {};

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

@@ -0,0 +1,65 @@
+import { g as y, c as I } from "../../chunks/runtime.js";
+import { classes as _ } from "@arcgis/components-utils";
+import { watch as h } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as B, noShadowRoot as T, nothing as l, safeClassMap as s } from "@arcgis/lumina";
+import { html as r } from "lit-html";
+import { g as w } from "../../chunks/globalCss.js";
+import { c as i } from "../../chunks/basemap-gallery-resources.js";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/4.32/esri/copyright.txt for details.
+v4.32.1 */
+function L(e) {
+  return e.portalItem?.type === "Web Scene" || e.referenceLayers.some((t) => t.type === "scene");
+}
+function x(e) {
+  return !!e?.portalItem?.tags?.some((t) => t.toLowerCase() === "beta");
+}
+class A extends B {
+  constructor() {
+    super(...arguments), this._itemState = "loading", this._isThumbnailLoaded = !1, this._isActive = !1;
+  }
+  static {
+    this.properties = { _itemState: 16, _isThumbnailLoaded: 16, _isActive: 16, disabled: 5, item: 0, itemIndex: 9, viewModel: 0, messages: 0 };
+  }
+  static {
+    this.shadowRootOptions = T;
+  }
+  //#endregion
+  //#region Lifecycle
+  loaded() {
+    this.manager.onLifecycle(() => [
+      h(() => this.item.state, (t) => {
+        this._itemState = t;
+      }, { sync: !0 }),
+      h(() => this.viewModel.activeBasemap, (t) => {
+        this._isActive = this.item.basemap.id === t?.id, this._isActive && (this.el.childElem?.focus(), this.el.scrollIntoView({ block: "nearest" }));
+      }, { initial: !0, sync: !0 })
+    ]);
+  }
+  //#endregion
+  //#region Rendering
+  render() {
+    const { disabled: t, item: a, itemIndex: o, viewModel: c, messages: u } = this, b = a.basemap.thumbnailUrl || y("assets/basemap-gallery/images/basemap-toggle-64.svg"), m = a.basemap.title, g = a.basemap.portalItem?.snippet, $ = a.error?.message || g || m, { activeBasemapIndex: d } = c, n = d === o, f = n || d === -1 && o === 0 ? 0 : -1, v = {
+      [i.selectedItem]: n,
+      [i.itemError]: a.state === "error"
+    }, p = `basemapgallery-item-${a.uid}`;
+    return r`<div .ariaChecked=${n} .ariaDisabled=${t} aria-labelledby=${p ?? l} class=${s(_(i.item, v))} role=radio tabindex=${f ?? l} title=${$ ?? l} @click=${() => {
+      a.state === "ready" && (c.activeBasemap = a.basemap);
+    }}><img alt class=${s(i.itemThumbnail)} src=${b ?? l} @load=${() => {
+      a.state !== "loading" && (this._isThumbnailLoaded = !0);
+    }}><div class=${s(i.itemContent)}><div class=${s(i.itemTitle)}><span id=${p ?? l}>${m}</span></div>${L(a.basemap) ? C(a.basemap, u) : null}</div>${a.state !== "loading" && this._isThumbnailLoaded ? null : r`<calcite-scrim><span aria-hidden=true class=${s(w.loaderAnimation)} role=presentation></span></calcite-scrim>`}</div>`;
+  }
+}
+function C(e, t) {
+  return r`<div class=${s(i.itemTagsContainer)}>${S(t)}${x(e) ? D(t) : null}</div>`;
+}
+function S(e) {
+  return r`<calcite-chip scale=s .label=${e.tag3D}>${e.tag3D}</calcite-chip>`;
+}
+function D(e) {
+  return r`<calcite-chip appearance=outline-fill scale=s .label=${e.tagBeta}>${e.tagBeta}</calcite-chip>`;
+}
+I("arcgis-basemap-gallery-item", A);
+export {
+  A as ArcgisBasemapGalleryItem
+};

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

@@ -34,7 +34,7 @@ declare const useBasemapLayerListWidget: (component: import('@arcgis/components-
 }, options?: {
     editConstructorProperties(props: __esri.BasemapLayerListProperties | undefined): __esri.BasemapLayerListProperties | Promise<__esri.BasemapLayerListProperties | undefined> | undefined;
 } | undefined) => BasemapLayerList;
-/** [BasemapLayerList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapLayerList.html) provides a way to display a list of [Basemap](https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html) layers and switch on/off their visibility. [Base layers](https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html#baseLayers) and [reference layers](https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html#referenceLayers) are divided into separate sections. When editing is enabled, layers can be reordered by dragging and dropping between the lists and the title can be edited.
+/** BasemapLayerList component provides a way to display a list of [Basemap](https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html) layers and switch on/off their visibility. [Base layers](https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html#baseLayers) and [reference layers](https://developers.arcgis.com/javascript/latest/api-reference/esri-Basemap.html#referenceLayers) are divided into separate sections. When editing is enabled, layers can be reordered by dragging and dropping between the lists and the title can be edited.
  */
 export declare class ArcgisBasemapLayerList extends LitElement {
     /**
@@ -88,7 +88,7 @@ export declare class ArcgisBasemapLayerList extends LitElement {
     showErrors: boolean;
     showFilter: boolean;
     showTemporaryLayerIndicators: boolean;
-    readonly state: "ready" | "disabled" | "loading";
+    readonly state: "ready" | "loading" | "disabled";
     visibilityAppearance: "default" | "checkbox";
     /** Permanently destroy the component */
     destroy(): Promise<void>;

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

@@ -7,8 +7,8 @@ import { m as o } from "../../chunks/useWidget.js";
 import { css as h } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.32/esri/copyright.txt for details.
-v4.32.0-next.99 */
-const d = h`arcgis-basemap-layer-list{display:block}`, n = o(s);
+v4.32.1 */
+const d = h`@layer{arcgis-basemap-layer-list{display:block}}`, n = o(s);
 class c extends r {
   constructor() {
     super(...arguments), this.widget = n(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.baseFilterPredicate = this.widget.baseFilterPredicate, this.baseFilterText = this.widget.baseFilterText, this.baseListItemCreatedFunction = this.widget.baseListItemCreatedFunction, this.basemapTitle = this.widget.basemapTitle, this.catalogOptions = this.widget.catalogOptions, this.collapsed = this.widget.collapsed, this.dragEnabled = this.widget.dragEnabled, this.editingTitle = this.widget.editingTitle, this.filterPlaceholder = this.widget.filterPlaceholder, this.headingLevel = this.widget.headingLevel, this.hideBaseLayers = this.widget.visibleElements.baseLayers, this.hideFlow = this.widget.visibleElements.flow, this.hideHeading = this.widget.visibleElements.heading, this.hideReferenceLayers = this.widget.visibleElements.referenceLayers, this.hideStatusIndicators = this.widget.visibleElements.statusIndicators, this.icon = this.widget.icon, this.label = this.widget.label, this.minFilterItems = this.widget.minFilterItems, this.position = "bottom-left", this.referenceFilterPredicate = this.widget.referenceFilterPredicate, this.referenceFilterText = this.widget.referenceFilterText, this.referenceListItemCreatedFunction = this.widget.referenceListItemCreatedFunction, this.selectedItems = this.widget.selectedItems, this.selectionMode = this.widget.selectionMode, this.showCloseButton = this.widget.visibleElements.closeButton, this.showCollapseButton = this.widget.visibleElements.collapseButton, this.showEditTitleButton = this.widget.visibleElements.editTitleButton, this.showErrors = this.widget.visibleElements.errors, this.showFilter = this.widget.visibleElements.filter, this.showTemporaryLayerIndicators = this.widget.visibleElements.temporaryLayerIndicators, this.state = this.viewModel.state, this.visibilityAppearance = this.widget.visibilityAppearance, this.arcgisPropertyChange = t()("state"), this.arcgisReady = a(), this.arcgisTriggerAction = i(() => this.widget, "trigger-action");

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

@@ -11,32 +11,19 @@ declare const useBasemapToggleViewModel: (component: import('@arcgis/components-
     el: HTMLElement;
     autoDestroyDisabled?: boolean;
     destroy?: () => Promise<void>;
-} & Pick<BasemapToggleViewModel, never> & {
-    reactiveUtils?: typeof __esri.reactiveUtils;
-    state?: "ready" | "disabled" | "loading" | "incompatible-next-basemap" | undefined;
-    icon: Nil | string;
-    label: Nil | string;
-    referenceElement: ArcgisReferenceElement | Nil | string;
-    arcgisReady: import('@arcgis/components-controllers').EventEmitter;
-    position: __esri.UIPosition;
-    arcgisPropertyChange: import('@arcgis/components-controllers').EventEmitter<{
-        name: string;
-    }> | undefined;
-    el: HTMLElement & {
-        childElem?: HTMLElement & {
-            ownedBy?: HTMLElement;
-        };
-        view?: __esri.MapView | __esri.SceneView | undefined;
-    };
-    autoDestroyDisabled: boolean;
-    destroy: () => Promise<void>;
-}, options?: {
+} & Pick<BasemapToggleViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<BasemapToggleViewModel>, options?: {
     editConstructorProperties(props: unknown): unknown;
 } | undefined) => BasemapToggleViewModel;
-/** [BasemapToggle](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapToggle.html) allows an end-user to switch between two basemaps. The toggled basemap is set inside the [view's](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapToggle.html#view) [map](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html#map) object.
+/**
+ * Basemap Toggle component allows an end-user to switch between two basemaps.
+ *
+ * The basemaps can have different spatial references.
  */
 export declare class ArcgisBasemapToggle extends LitElement {
     private messages;
+    /**
+     * The map's current [basemap](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#basemap).
+     */
     readonly activeBasemap: __esri.Basemap | nullish;
     /**
      * If true, the component will not be destroyed automatically when
@@ -47,21 +34,24 @@ export declare class ArcgisBasemapToggle extends LitElement {
      */
     autoDestroyDisabled: boolean;
     /**
-     * Icon which represents the widget. It is typically used when the widget is controlled by another
-     * one (e.g. in the Expand widget).
+     * Icon which represents the component.
+     * Typically used when the component is controlled by another component (e.g. by the Expand component).
      */
     icon: Nil | string;
     /** The component's default label. */
     label: string | undefined;
-    /** Overwrite localized strings for this component */
+    /** Replace localized message strings with your own strings. */
     messageOverrides?: typeof this.messages._overrides;
     /** The next basemap for toggling. */
     nextBasemap: __esri.Basemap | nullish;
     position: __esri.UIPosition;
     referenceElement: ArcgisReferenceElement | Nil | string;
-    /** The visible elements that are displayed within the widget. */
+    /** Indicates if the Basemap title is displayed. */
     showTitle: boolean;
-    readonly state: "ready" | "disabled" | "loading" | "incompatible-next-basemap";
+    /**
+     * The current state of the component.
+     */
+    readonly state: "ready" | "loading" | "disabled" | "incompatible-next-basemap";
     /** Permanently destroy the component */
     destroy(): Promise<void>;
     /** Toggles to the [next basemap](#nextBasemap). */

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

@@ -1,17 +1,18 @@
-import { c as B } from "../../chunks/runtime.js";
+import { c as f } from "../../chunks/runtime.js";
 import { html as l } from "lit-html";
-import { usePropertyChange as f } from "@arcgis/components-controllers";
+import { usePropertyChange as B } from "@arcgis/components-controllers";
 import { classes as m } from "@arcgis/components-utils";
 import { getBasemapThumbnailUrl as S } from "@arcgis/core/applications/Components/basemapUtils.js";
 import x from "@arcgis/core/widgets/BasemapToggle/BasemapToggleViewModel.js";
-import { LitElement as T, createEvent as M, noShadowRoot as k, safeClassMap as a, nothing as c, safeStyleMap as b } from "@arcgis/lumina";
-import { u as I, m as C } from "../../chunks/useViewModel.js";
+import { LitElement as T, createEvent as M, noShadowRoot as k, safeClassMap as a, nothing as r, safeStyleMap as b } from "@arcgis/lumina";
+import { u as I } from "../../chunks/useView.js";
+import { m as C } from "../../chunks/useViewModel.js";
 import { g as u } from "../../chunks/globalCss.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.32/esri/copyright.txt for details.
-v4.32.0-next.99 */
-const A = L`arcgis-basemap-toggle{display:block}`, s = "esri-basemap-toggle", o = "esri-basemap-thumbnail", e = {
+v4.32.1 */
+const A = L`@layer{arcgis-basemap-toggle{display:block}}`, s = "esri-basemap-toggle", o = "esri-basemap-thumbnail", e = {
   base: s,
   secondaryBasemapImage: `${s}__image--secondary`,
   container: `${o} ${s}__container`,
@@ -23,7 +24,7 @@ const A = L`arcgis-basemap-toggle{display:block}`, s = "esri-basemap-toggle", o
 }, D = C(x);
 class E extends T {
   constructor() {
-    super(...arguments), this.messages = I(), this.viewModel = D(this), this.activeBasemap = this.viewModel.activeBasemap, this.autoDestroyDisabled = !1, this.icon = "layer-basemap", this.nextBasemap = this.viewModel.nextBasemap, this.position = "top-left", this.showTitle = !1, this.state = this.viewModel.state, this.arcgisPropertyChange = f()("nextBasemap", "state"), this.arcgisReady = M();
+    super(...arguments), this.messages = I(), this.viewModel = D(this), this.activeBasemap = this.viewModel.activeBasemap, this.autoDestroyDisabled = !1, this.icon = "layer-basemap", this.nextBasemap = this.viewModel.nextBasemap, this.position = "top-left", this.showTitle = !1, this.state = this.viewModel.state, this.arcgisPropertyChange = B()("nextBasemap", "state"), this.arcgisReady = M();
   }
   static {
     this.properties = { activeBasemap: 0, autoDestroyDisabled: 5, icon: 3, label: 1, messageOverrides: 0, nextBasemap: 0, position: 3, referenceElement: 1, showTitle: 5, state: 3 };
@@ -53,13 +54,13 @@ class E extends T {
   // #endregion
   // #region Rendering
   render() {
-    const t = this.viewModel, n = t.state === "disabled" ? null : t.activeBasemap, i = t.state === "disabled" ? null : t.nextBasemap, $ = t.state === "loading", d = t.state === "incompatible-next-basemap", r = i?.title ?? "", p = i && i.loadStatus !== "loaded";
+    const t = this.viewModel, n = t.state === "disabled" ? null : t.activeBasemap, i = t.state === "disabled" ? null : t.nextBasemap, $ = t.state === "loading", d = t.state === "incompatible-next-basemap", c = i?.title ?? "", p = i && i.loadStatus !== "loaded";
     let g;
-    const h = this.showTitle && r, v = d, y = h || v, w = this._getThumbnailStyles(n), _ = this._getThumbnailStyles(i);
-    return y && (g = l`<div class=${a(e.overlay)}>${h ? l`<span class=${a(e.title)} title=${r ?? c}>${r}</span>` : null}${v ? l`<calcite-scrim class=${a(e.overlayScrim)} title=${this.messages.incompatibleSpatialReference ?? c}><calcite-icon icon=exclamation-mark-triangle></calcite-icon></calcite-scrim>` : null}</div>`), l`<div class=${a(m(e.base, u.widget))}><calcite-button appearance=transparent data-basemap-id=${(i ? i.id : "") ?? c} .disabled=${d} kind=neutral .label=${this.label ?? void 0} @click=${() => void this.toggle()} title=${this.label ?? void 0 ?? c}><div class=${a(m(e.container, e.secondaryBasemapImage))}><div class=${a(e.image)} style=${b(w)}></div></div><div class=${a(e.container)}><div class=${a(m(e.image, p ? e.imageLoading : null))} style=${b(_)}>${p || $ ? l`<calcite-scrim><span aria-hidden=true class=${a(u.loaderAnimation)} role=presentation></span></calcite-scrim>` : null}</div>${g}</div></calcite-button></div>`;
+    const h = this.showTitle && c, v = d, y = h || v, w = this._getThumbnailStyles(n), _ = this._getThumbnailStyles(i);
+    return y && (g = l`<div class=${a(e.overlay)}>${h ? l`<span class=${a(e.title)} title=${c ?? r}>${c}</span>` : null}${v ? l`<calcite-scrim class=${a(e.overlayScrim)} title=${this.messages.incompatibleSpatialReference ?? r}><calcite-icon icon=exclamation-mark-triangle></calcite-icon></calcite-scrim>` : null}</div>`), l`<div class=${a(m(e.base, u.widget))}><calcite-button appearance=transparent data-basemap-id=${(i ? i.id : "") ?? r} .disabled=${d} kind=neutral .label=${this.label ?? void 0} @click=${() => void this.toggle()} title=${this.label ?? void 0 ?? r}><div class=${a(m(e.container, e.secondaryBasemapImage))}><div class=${a(e.image)} style=${b(w)}></div></div><div class=${a(e.container)}><div class=${a(m(e.image, p ? e.imageLoading : null))} style=${b(_)}>${p || $ ? l`<calcite-scrim><span aria-hidden=true class=${a(u.loaderAnimation)} role=presentation></span></calcite-scrim>` : null}</div>${g}</div></calcite-button></div>`;
   }
 }
-B("arcgis-basemap-toggle", E);
+f("arcgis-basemap-toggle", E);
 export {
   E as ArcgisBasemapToggle
 };

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

@@ -34,7 +34,7 @@ declare const useBookmarksWidget: (component: import('@arcgis/components-control
 }, options?: {
     editConstructorProperties(props: __esri.BookmarksProperties | undefined): __esri.BookmarksProperties | Promise<__esri.BookmarksProperties | undefined> | undefined;
 } | undefined) => Bookmarks;
-/** [Bookmarks](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Bookmarks.html) allow end users to quickly navigate to a particular area of interest. It displays a list of [bookmarks](https://developers.arcgis.com/javascript/latest/api-reference/esri-webmap-Bookmark.html), which are typically defined inside the [WebMap](https://developers.arcgis.com/javascript/latest/api-reference/esri-WebMap.html#bookmarks).
+/** Bookmarks component allow end users to quickly navigate to a particular area of interest. It displays a list of [bookmarks](https://developers.arcgis.com/javascript/latest/api-reference/esri-webmap-Bookmark.html), which are typically defined inside the [WebMap](https://developers.arcgis.com/javascript/latest/api-reference/esri-WebMap.html#bookmarks).
  */
 export declare class ArcgisBookmarks extends LitElement {
     /**

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

@@ -7,8 +7,8 @@ import { m as h } from "../../chunks/useWidget.js";
 import { css as d } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.32/esri/copyright.txt for details.
-v4.32.0-next.99 */
-const r = d`arcgis-bookmarks{display:block}`, n = h(s);
+v4.32.1 */
+const r = d`@layer{arcgis-bookmarks{display:block}}`, n = h(s);
 class m extends o {
   constructor() {
     super(...arguments), this.widget = n(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.bookmarks = this.widget.bookmarks, this.defaultCreateOptions = this.widget.defaultCreateOptions, this.defaultEditOptions = this.widget.defaultEditOptions, this.disabled = this.widget.disabled, this.dragEnabled = this.widget.dragEnabled, this.filterPlaceholder = this.widget.filterPlaceholder, this.filterText = this.widget.filterText, this.hideFlow = this.widget.visibleElements.flow, this.hideThumbnail = this.widget.visibleElements.thumbnail, this.hideTime = this.widget.visibleElements.time, this.icon = this.widget.icon, this.label = this.widget.label, this.position = "bottom-left", this.showAddBookmarkButton = this.widget.visibleElements.addBookmarkButton, this.showCloseButton = this.widget.visibleElements.closeButton, this.showCollapseButton = this.widget.visibleElements.collapseButton, this.showEditBookmarkButton = this.widget.visibleElements.editBookmarkButton, this.showFilter = this.widget.visibleElements.filter, this.showHeading = this.widget.visibleElements.heading, this.state = this.viewModel.state, this.arcgisEdit = t(() => this.widget, "bookmark-edit"), this.arcgisPropertyChange = e()("state"), this.arcgisReady = a(), this.arcgisSelect = t(() => this.widget, "bookmark-select");

package/dist/components/arcgis-building-explorer/customElement.d.ts

@@ -34,7 +34,7 @@ declare const useBuildingExplorerWidget: (component: import('@arcgis/components-
 }, options?: {
     editConstructorProperties(props: __esri.BuildingExplorerProperties | undefined): __esri.BuildingExplorerProperties | Promise<__esri.BuildingExplorerProperties | undefined> | undefined;
 } | undefined) => BuildingExplorer;
-/** [BuildingExplorer](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BuildingExplorer.html) is used to filter and explore the various components of [BuildingSceneLayers](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-BuildingSceneLayer.html). BuildingSceneLayers are complex digital models of buildings and interiors and can contain thousands of components grouped in sublayers. Using this component, buildings can be filtered by level, construction phase or by disciplines and categories.
+/** BuildingExplorer component is used to filter and explore the various components of [BuildingSceneLayers](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-BuildingSceneLayer.html). BuildingSceneLayers are complex digital models of buildings and interiors and can contain thousands of components grouped in sublayers. Using this component, buildings can be filtered by level, construction phase or by disciplines and categories.
  */
 export declare class ArcgisBuildingExplorer extends LitElement {
     /**
@@ -62,7 +62,7 @@ export declare class ArcgisBuildingExplorer extends LitElement {
     readonly phase: __esri.BuildingPhase;
     position: __esri.UIPosition;
     referenceElement: ArcgisReferenceElement | Nil | string;
-    readonly state: "ready" | "disabled" | "loading" | "failed";
+    readonly state: "ready" | "loading" | "failed" | "disabled";
     /** Permanently destroy the component */
     destroy(): Promise<void>;
     readonly arcgisPropertyChange: TargetedEvent<this, {

package/dist/components/arcgis-building-explorer/customElement.js

@@ -6,8 +6,8 @@ import { m as h } from "../../chunks/useWidget.js";
 import { css as r } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.32/esri/copyright.txt for details.
-v4.32.0-next.99 */
-const a = r`arcgis-building-explorer{display:block}`, d = h(s);
+v4.32.1 */
+const a = r`@layer{arcgis-building-explorer{display:block}}`, d = h(s);
 class n extends t {
   constructor() {
     super(...arguments), this.widget = d(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.headingLevel = this.widget.headingLevel, this.hideDisciplines = this.widget.visibleElements.disciplines, this.hideLevels = this.widget.visibleElements.levels, this.hidePhases = this.widget.visibleElements.phases, this.icon = this.widget.icon, this.label = this.widget.label, this.layers = this.widget.layers, this.level = this.viewModel.level, this.phase = this.viewModel.phase, this.position = "bottom-left", this.state = this.viewModel.state, this.arcgisPropertyChange = i()("level", "phase", "state"), this.arcgisReady = l();

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

@@ -18,7 +18,15 @@ declare const useCatalogLayerListWidget: (component: import('@arcgis/components-
     icon: Nil | string;
     label: Nil | string;
     referenceElement: ArcgisReferenceElement | Nil | string;
-    position: __esri.UIPosition;
+    position: __esri.
+    /**
+     * 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
+     * component to a different place on the page, or temporarily hide it. If this
+     * is set, make sure to call the \`destroy\` method when you are done to prevent
+     * memory leaks.
+     */
+    UIPosition;
     arcgisReady: import('@arcgis/components-controllers').EventEmitter;
     arcgisPropertyChange: import('@arcgis/components-controllers').EventEmitter<{
         name: string;
@@ -34,7 +42,7 @@ declare const useCatalogLayerListWidget: (component: import('@arcgis/components-
 }, options?: {
     editConstructorProperties(props: __esri.CatalogLayerListProperties | undefined): __esri.CatalogLayerListProperties | Promise<__esri.CatalogLayerListProperties | undefined> | undefined;
 } | undefined) => CatalogLayerList;
-/** The [CatalogLayerList](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-CatalogLayerList.html) provides a way to display and interact with CatalogLayers.
+/** The CatalogLayerList component provides a way to display and interact with CatalogLayers.
  */
 export declare class ArcgisCatalogLayerList extends LitElement {
     /**
@@ -75,7 +83,7 @@ export declare class ArcgisCatalogLayerList extends LitElement {
     showFilter: boolean;
     showHeading: boolean;
     showTemporaryLayerIndicators: boolean;
-    readonly state: "ready" | "disabled" | "loading";
+    readonly state: "ready" | "loading" | "disabled";
     visibilityAppearance: "default" | "checkbox";
     /** Permanently destroy the component */
     destroy(): Promise<void>;

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

@@ -7,8 +7,8 @@ import { m as r } from "../../chunks/useWidget.js";
 import { css as h } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.32/esri/copyright.txt for details.
-v4.32.0-next.99 */
-const d = h`arcgis-catalog-layer-list{display:block}`, n = r(s);
+v4.32.1 */
+const d = h`@layer{arcgis-catalog-layer-list{display:block}}`, n = r(s);
 class c extends o {
   constructor() {
     super(...arguments), this.widget = n(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.catalogLayer = this.widget.catalogLayer, this.collapsed = this.widget.collapsed, this.filterPlaceholder = this.widget.filterPlaceholder, this.filterPredicate = this.widget.filterPredicate, this.filterText = this.widget.filterText, this.headingLevel = this.widget.headingLevel, this.hideFlow = this.widget.visibleElements.flow, this.hideStatusIndicators = this.widget.visibleElements.statusIndicators, this.icon = this.widget.icon, this.label = this.widget.label, this.listItemCreatedFunction = this.widget.listItemCreatedFunction, this.minFilterItems = this.widget.minFilterItems, this.position = "bottom-left", this.selectedItems = this.widget.selectedItems, this.selectionMode = this.widget.selectionMode, this.showCloseButton = this.widget.visibleElements.closeButton, this.showCollapseButton = this.widget.visibleElements.collapseButton, this.showErrors = this.widget.visibleElements.errors, this.showFilter = this.widget.visibleElements.filter, this.showHeading = this.widget.visibleElements.heading, this.showTemporaryLayerIndicators = this.widget.visibleElements.temporaryLayerIndicators, this.state = this.viewModel.state, this.visibilityAppearance = this.widget.visibilityAppearance, this.arcgisPropertyChange = e()("state"), this.arcgisReady = a(), this.arcgisTriggerAction = i(() => this.widget, "trigger-action");

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

@@ -11,29 +11,10 @@ declare const useCompassViewModel: (component: import('@arcgis/components-contro
     el: HTMLElement;
     autoDestroyDisabled?: boolean;
     destroy?: () => Promise<void>;
-} & Pick<CompassViewModel, never> & {
-    reactiveUtils?: typeof __esri.reactiveUtils;
-    state?: "rotation" | "disabled" | "compass" | undefined;
-    icon: Nil | string;
-    label: Nil | string;
-    referenceElement: ArcgisReferenceElement | Nil | string;
-    arcgisReady: import('@arcgis/components-controllers').EventEmitter;
-    position: __esri.UIPosition;
-    arcgisPropertyChange: import('@arcgis/components-controllers').EventEmitter<{
-        name: string;
-    }> | undefined;
-    el: HTMLElement & {
-        childElem?: HTMLElement & {
-            ownedBy?: HTMLElement;
-        };
-        view?: __esri.MapView | __esri.SceneView | undefined;
-    };
-    autoDestroyDisabled: boolean;
-    destroy: () => Promise<void>;
-}, options?: {
+} & Pick<CompassViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<CompassViewModel>, options?: {
     editConstructorProperties(props: unknown): unknown;
 } | undefined) => CompassViewModel;
-/** The [Compass](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Compass.html) indicates where north is in relation to the current view [rotation](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#rotation) or [camera heading](https://developers.arcgis.com/javascript/latest/api-reference/esri-Camera.html#heading).
+/** The Compass component indicates where north is in relation to the current view [rotation](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#rotation) or [camera heading](https://developers.arcgis.com/javascript/latest/api-reference/esri-Camera.html#heading).
  */
 export declare class ArcgisCompass extends LitElement {
     private messages;
@@ -49,10 +30,17 @@ export declare class ArcgisCompass extends LitElement {
     set icon(value: string | undefined);
     /** The component's default label. */
     label: Nil | string;
+    /** Replace localized message strings with your own strings. */
     messageOverrides?: typeof this.messages._overrides;
+    /**
+     * The z axis orientation.
+     */
     readonly orientation: __esri.Orientation;
     position: __esri.UIPosition;
     referenceElement: ArcgisReferenceElement | Nil | string;
+    /**
+     * The current state of the component.
+     */
     readonly state: "rotation" | "disabled" | "compass";
     destroy(): Promise<void>;
     reset(): Promise<void>;

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

@@ -3,20 +3,21 @@ import { html as l } from "lit-html";
 import { usePropertyChange as m } from "@arcgis/components-controllers";
 import { classes as d } from "@arcgis/components-utils";
 import h from "@arcgis/core/widgets/Compass/CompassViewModel.js";
-import { LitElement as p, createEvent as g, noShadowRoot as u, safeClassMap as s, nothing as i, safeStyleMap as f } from "@arcgis/lumina";
-import { u as w, m as y } from "../../chunks/useViewModel.js";
-import { g as o } from "../../chunks/globalCss.js";
+import { LitElement as p, createEvent as g, noShadowRoot as u, safeClassMap as s, nothing as o, safeStyleMap as f } from "@arcgis/lumina";
+import { u as y } from "../../chunks/useView.js";
+import { m as w } from "../../chunks/useViewModel.js";
+import { g as i } from "../../chunks/globalCss.js";
 import { css as $ } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.32/esri/copyright.txt for details.
-v4.32.0-next.99 */
-const b = $`arcgis-compass{display:block}`, a = "esri-compass", r = {
+v4.32.1 */
+const b = $`@layer{arcgis-compass{display:block}}`, a = "esri-compass", r = {
   base: a,
   iconContainer: `${a}__icon-container`
-}, v = y(h);
+}, v = w(h);
 class C extends p {
   constructor() {
-    super(...arguments), this.messages = w(), this.viewModel = v(this), this.autoDestroyDisabled = !1, this.orientation = this.viewModel.orientation, this.position = "top-left", this.state = this.viewModel.state, this.arcgisPropertyChange = m()("state", "orientation"), this.arcgisReady = g();
+    super(...arguments), this.messages = y(), this.viewModel = v(this), this.autoDestroyDisabled = !1, this.orientation = this.viewModel.orientation, this.position = "top-left", this.state = this.viewModel.state, this.arcgisPropertyChange = m()("state", "orientation"), this.arcgisReady = g();
   }
   static {
     this.properties = { autoDestroyDisabled: 5, icon: 3, label: 1, messageOverrides: 0, orientation: 0, position: 3, referenceElement: 1, state: 3 };
@@ -50,7 +51,7 @@ class C extends p {
   // #region Rendering
   render() {
     const { messages: t, icon: n } = this;
-    return l`<div class=${s(d(r.base, o.widget))}><calcite-button class=${s(o.widgetButton)} .disabled=${this.state === "disabled"} kind=neutral .label=${t.reset} @click=${this._reset} round scale=s title=${t.reset ?? i}><div aria-hidden=true class=${s(r.iconContainer)} title=${t.reset ?? i}><calcite-icon .icon=${n} style=${f(M(this.orientation))}></calcite-icon></div></calcite-button></div>`;
+    return l`<div class=${s(d(r.base, i.widget))}><calcite-button class=${s(i.widgetButton)} .disabled=${this.state === "disabled"} kind=neutral .label=${t.reset} @click=${this._reset} round scale=s title=${t.reset ?? o}><div aria-hidden=true class=${s(r.iconContainer)} title=${t.reset ?? o}><calcite-icon .icon=${n} style=${f(M(this.orientation))}></calcite-icon></div></calcite-button></div>`;
   }
 }
 const M = (e) => ({

package/dist/components/arcgis-coordinate-conversion/customElement.d.ts

@@ -34,7 +34,7 @@ declare const useCoordinateConversionWidget: (component: import('@arcgis/compone
 }, options?: {
     editConstructorProperties(props: __esri.CoordinateConversionProperties | undefined): __esri.CoordinateConversionProperties | Promise<__esri.CoordinateConversionProperties | undefined> | undefined;
 } | undefined) => CoordinateConversion;
-/** [CoordinateConversion](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-CoordinateConversion.html) provides a way to display user cursor position either as map coordinates or as any of several popular coordinate notations. Additionally, the component provides a way to convert user input coordinates into a [Point](https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Point.html).
+/** CoordinateConversion component provides a way to display user cursor position either as map coordinates or as any of several popular coordinate notations. Additionally, the component provides a way to convert user input coordinates into a [Point](https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Point.html).
  */
 export declare class ArcgisCoordinateConversion extends LitElement {
     /**
@@ -63,11 +63,22 @@ export declare class ArcgisCoordinateConversion extends LitElement {
     label: string;
     locationSymbol: __esri.SimpleMarkerSymbol | __esri.PictureMarkerSymbol | __esri.PointSymbol3D | __esri.CIMSymbol;
     mode: "capture" | "live";
+    /**
+     * If this property is set to `false`, multiple conversions cannot be displayed.
+     *
+     * @default false
+     */
     multipleConversionsDisabled: boolean;
     orientation: "auto" | "expand-up" | "expand-down";
     position: __esri.UIPosition;
     referenceElement: ArcgisReferenceElement | Nil | string;
-    readonly state: "ready" | "disabled" | "loading";
+    readonly state: "ready" | "loading" | "disabled";
+    /**
+     * Unless this property is set to `false`, sessionStorage or localStorage (depending on [storageType](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-CoordinateConversion.html#storageType))
+     * will be used to hydrate and persist the CoordinateConversion widget's state.
+     *
+     * @default false
+     */
     storageDisabled: boolean;
     storageType: "local" | "session";
     /** Permanently destroy the component */

package/dist/components/arcgis-coordinate-conversion/customElement.js

@@ -6,8 +6,8 @@ import { m as d } from "../../chunks/useWidget.js";
 import { css as h } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.32/esri/copyright.txt for details.
-v4.32.0-next.99 */
-const l = h`arcgis-coordinate-conversion{display:block}`, c = d(o);
+v4.32.1 */
+const l = h`@layer{arcgis-coordinate-conversion{display:block}}`, c = d(o);
 class g extends n {
   constructor() {
     super(...arguments), this.widget = c(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.conversions = this.widget.conversions, this.currentLocation = this.widget.currentLocation, this.formats = this.widget.formats, this.headingLevel = this.widget.headingLevel, this.hideCaptureButton = this.widget.visibleElements.captureButton, this.hideEditButton = this.widget.visibleElements.editButton, this.hideExpandButton = this.widget.visibleElements.expandButton, this.hideSettingsButton = this.widget.visibleElements.settingsButton, this.icon = this.widget.icon, this.label = this.widget.label, this.locationSymbol = this.widget.locationSymbol, this.mode = this.widget.mode, this.multipleConversionsDisabled = this.widget.multipleConversions, this.orientation = this.widget.orientation, this.position = "bottom-left", this.state = this.viewModel.state, this.storageDisabled = this.widget.storageEnabled, this.storageType = this.widget.storageType, this.arcgisPropertyChange = s()("currentLocation", "state"), this.arcgisReady = r();

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

@@ -34,7 +34,7 @@ declare const useDaylightWidget: (component: import('@arcgis/components-controll
 }, options?: {
     editConstructorProperties(props: __esri.DaylightProperties | undefined): __esri.DaylightProperties | Promise<__esri.DaylightProperties | undefined> | undefined;
 } | undefined) => Daylight;
-/** [Daylight](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Daylight.html) can be used to manipulate the lighting conditions of a [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html).
+/** Daylight component can be used to manipulate the lighting conditions of a [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html).
  */
 export declare class ArcgisDaylight extends LitElement {
     /**

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

@@ -5,8 +5,8 @@ import { m as l } from "../../chunks/useWidget.js";
 import { css as h } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.32/esri/copyright.txt for details.
-v4.32.0-next.99 */
-const o = h`arcgis-daylight{display:block}`, d = l(i);
+v4.32.1 */
+const o = h`@layer{arcgis-daylight{display:block}}`, d = l(i);
 class n extends t {
   constructor() {
     super(...arguments), this.widget = d(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.currentSeason = this.viewModel.currentSeason, this.dateOrSeason = this.widget.dateOrSeason, this.dayPlaying = this.viewModel.dayPlaying, this.headingLevel = this.widget.headingLevel, this.hideDatePicker = this.widget.visibleElements.datePicker, this.hideHeader = this.widget.visibleElements.header, this.hidePlayButtons = this.widget.visibleElements.playButtons, this.hideShadowsToggle = this.widget.visibleElements.shadowsToggle, this.hideSunLightingToggle = this.widget.visibleElements.sunLightingToggle, this.hideTimezone = this.widget.visibleElements.timezone, this.icon = this.widget.icon, this.label = this.widget.label, this.playSpeedMultiplier = this.widget.playSpeedMultiplier, this.position = "bottom-left", this.timeSliderSteps = this.widget.timeSliderSteps, this.yearPlaying = this.viewModel.yearPlaying, this.arcgisReady = s();

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

@@ -11,48 +11,7 @@ declare const useDirectionalPadViewModel: (component: import('@arcgis/components
     el: HTMLElement;
     autoDestroyDisabled?: boolean;
     destroy?: () => Promise<void>;
-} & Pick<DirectionalPadViewModel, never> & {
-    reactiveUtils?: typeof __esri.reactiveUtils;
-    state?: "ready" | "disabled" | "moving" | undefined;
-    icon: Nil | string;
-    label: Nil | string;
-    referenceElement: ArcgisReferenceElement | Nil | string;
-    arcgisReady: import('@arcgis/components-controllers').EventEmitter;
-    position: __esri.UIPosition;
-    arcgisPropertyChange: import('@arcgis/components-controllers').EventEmitter<{
-        name: string;
-    }> | undefined;
-    el: HTMLElement & {
-        childElem?: HTMLElement & {
-            ownedBy?: HTMLElement;
-        };
-        view
-        /**
-         * A directional pad (D-Pad) component can be used to control the position and
-         * rotation of the map. The D-Pad provides eight directions of movement, a small
-         * compass which indicates the current orientation of the map and a slider for
-         * rotating the map.
-         *
-         * It is also possible to disable the map's rotation controls or change the size
-         * of the component.
-         *
-         * The DirectionalPad component is not supported in 3d.
-         */
-        ? /**
-         * A directional pad (D-Pad) component can be used to control the position and
-         * rotation of the map. The D-Pad provides eight directions of movement, a small
-         * compass which indicates the current orientation of the map and a slider for
-         * rotating the map.
-         *
-         * It is also possible to disable the map's rotation controls or change the size
-         * of the component.
-         *
-         * The DirectionalPad component is not supported in 3d.
-         */: __esri.MapView | __esri.SceneView | undefined;
-    };
-    autoDestroyDisabled: boolean;
-    destroy: () => Promise<void>;
-}, options?: {
+} & Pick<DirectionalPadViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<DirectionalPadViewModel>, options?: {
     editConstructorProperties(props: unknown): unknown;
 } | undefined) => DirectionalPadViewModel;
 /**
@@ -64,7 +23,7 @@ declare const useDirectionalPadViewModel: (component: import('@arcgis/components
  * It is also possible to disable the map's rotation controls or change the size
  * of the component.
  *
- * The DirectionalPad component is not supported in 3d.
+ * The Directional Pad component is not supported in 3D.
  */
 export declare class ArcgisDirectionalPad extends LitElement {
     private messages;
@@ -109,6 +68,9 @@ export declare class ArcgisDirectionalPad extends LitElement {
      * Whether to display the map rotation slider.
      */
     showRotationSlider: boolean;
+    /**
+     * The current state of the component.
+     */
     readonly state: "ready" | "disabled" | "moving";
     /**
      * Determines the size of directional pad buttons and the slider.