@arcgis/map-components 4.33.0-next.4 → 4.33.0-next.40

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

@@ -6,23 +6,23 @@ import { m as r } from "../../chunks/useWidget.js";
 import { css as n } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.4 */
-const m = n`arcgis-area-measurement-2d{display:block}`, h = r(
+v4.33.0-next.40 */
+const h = n`@layer{arcgis-area-measurement-2d{display:block}}`, m = r(
   // Workaround for https://devtopia.esri.com/WebGIS/arcgis-js-api/issues/61559
   s
 );
-class d extends i {
+class p extends i {
   constructor() {
-    super(...arguments), this.widget = h(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.icon = this.widget.icon, this.label = this.widget.label, this.position = "bottom-left", this.state = this.viewModel.state, this.unit = this.widget.unit, this.unitOptions = this.widget.unitOptions, this.arcgisPropertyChange = e()("state"), this.arcgisReady = o();
+    super(...arguments), this.widget = m(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.icon = this.widget.icon, this.label = this.widget.label, this.position = "bottom-left", this.snappingOptions = this.widget.snappingOptions, this.state = this.viewModel.state, this.unit = this.widget.unit, this.unitOptions = this.widget.unitOptions, this.arcgisPropertyChange = e()("state"), this.arcgisReady = o();
   }
   static {
-    this.properties = { autoDestroyDisabled: 5, icon: 1, label: 1, position: 1, referenceElement: 1, state: 3, unit: 1, unitOptions: 0 };
+    this.properties = { autoDestroyDisabled: 5, icon: 1, label: 1, position: 1, referenceElement: 1, snappingOptions: 0, state: 3, unit: 1, unitOptions: 0 };
   }
   static {
     this.shadowRootOptions = a;
   }
   static {
-    this.styles = m;
+    this.styles = h;
   }
   // #endregion
   // #region Public Methods
@@ -31,7 +31,7 @@ class d extends i {
     await this.manager.destroy();
   }
 }
-t("arcgis-area-measurement-2d", d);
+t("arcgis-area-measurement-2d", p);
 export {
-  d as ArcgisAreaMeasurement2d
+  p as ArcgisAreaMeasurement2d
 };

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

@@ -1,16 +1,16 @@
 import { c as t } from "../../chunks/runtime.js";
-import { usePropertyChange as s } from "@arcgis/components-controllers";
-import e from "@arcgis/core/widgets/AreaMeasurement3D.js";
+import { usePropertyChange as e } from "@arcgis/components-controllers";
+import s from "@arcgis/core/widgets/AreaMeasurement3D.js";
 import { LitElement as i, 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";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.4 */
-const l = n`arcgis-area-measurement-3d{display:block}`, h = r(e);
+v4.33.0-next.40 */
+const l = n`@layer{arcgis-area-measurement-3d{display:block}}`, h = r(s);
 class d extends i {
   constructor() {
-    super(...arguments), this.widget = h(this), this.viewModel = this.widget.viewModel, this.analysis = this.widget.analysis, this.autoDestroyDisabled = !1, this.icon = this.widget.icon, this.label = this.widget.label, this.position = "bottom-left", this.state = this.viewModel.state, this.unit = this.widget.unit, this.unitOptions = this.widget.unitOptions, this.arcgisPropertyChange = s()("analysis", "state"), this.arcgisReady = a();
+    super(...arguments), this.widget = h(this), this.viewModel = this.widget.viewModel, this.analysis = this.widget.analysis, this.autoDestroyDisabled = !1, this.icon = this.widget.icon, this.label = this.widget.label, this.position = "bottom-left", this.state = this.viewModel.state, this.unit = this.widget.unit, this.unitOptions = this.widget.unitOptions, this.arcgisPropertyChange = e()("analysis", "state"), this.arcgisReady = a();
   }
   static {
     this.properties = { analysis: 0, autoDestroyDisabled: 5, icon: 1, label: 1, position: 1, referenceElement: 1, state: 3, unit: 1, unitOptions: 0 };

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

@@ -6,8 +6,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.33/esri/copyright.txt for details.
-v4.33.0-next.4 */
-const n = h`arcgis-attachments{display:block}`, r = o(i);
+v4.33.0-next.40 */
+const n = h`@layer{arcgis-attachments{display:block}}`, r = o(i);
 class l extends s {
   constructor() {
     super(...arguments), this.widget = r(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.capabilities = this.widget.capabilities, this.displayType = this.widget.displayType, this.graphic = this.widget.graphic, this.hideAddButton = this.widget.visibleElements.addButton, this.hideAddSubmitButton = this.widget.visibleElements.addSubmitButton, this.hideCancelAddButton = this.widget.visibleElements.cancelAddButton, this.hideCancelUpdateButton = this.widget.visibleElements.cancelUpdateButton, this.hideDeleteButton = this.widget.visibleElements.deleteButton, this.hideErrorMessage = this.widget.visibleElements.errorMessage, this.hideProgressBar = this.widget.visibleElements.progressBar, this.hideUpdateButton = this.widget.visibleElements.updateButton, this.icon = this.widget.icon, this.label = this.widget.label, this.position = "bottom-left", this.state = this.viewModel.state, this.submitting = this.widget.submitting, this.arcgisPropertyChange = e()("submitting", "state"), this.arcgisReady = a();

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

@@ -12,12 +12,34 @@ declare const useBasemapGalleryViewModel: (component: import('@arcgis/components
     el: HTMLElement;
     autoDestroyDisabled?: boolean;
     destroy?: () => Promise<void>;
-} & Pick<BasemapGalleryViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<BasemapGalleryViewModel>, options?: {
+} & Pick<BasemapGalleryViewModel, never> & {
+    reactiveUtils?: typeof __esri.reactiveUtils;
+    state?: "ready" | "loading" | "unsupported" | "disabled" | 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?: {
     editConstructorProperties(props: unknown): unknown;
 } | undefined) => BasemapGalleryViewModel;
 /** BasemapGallery component displays a collection images representing basemaps from [ArcGIS.com](https://www.arcgis.com/index.html) or a user-defined set of map or image services. When a new basemap is selected from the BasemapGallery, the map's basemap layers are removed and replaced with the basemap layers of the associated basemap selected in the gallery.
  */
 export declare class ArcgisBasemapGallery extends LitElement {
+    /**
+     * The map's current [basemap](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#basemap).
+     */
     activeBasemap: __esri.Basemap | nullish;
     /**
      * If true, the component will not be destroyed automatically when it is

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

@@ -1,30 +1,30 @@
-import { c as y } from "../../chunks/runtime.js";
-import { html as c } from "lit-html";
+import { c as v } from "../../chunks/runtime.js";
+import { html as l } from "lit-html";
 import { usePropertyChange as f } from "@arcgis/components-controllers";
-import { classes as v } from "@arcgis/components-utils";
-import { when as b, watch as p } from "@arcgis/core/core/reactiveUtils.js";
-import M from "@arcgis/core/widgets/BasemapGallery/BasemapGalleryViewModel.js";
-import { safeClassMap as r, LitElement as $, createEvent as _, noShadowRoot as B, nothing as g, safeStyleMap as x } from "@arcgis/lumina";
-import { u as L } from "../../chunks/useView.js";
-import { m as R } from "../../chunks/useViewModel.js";
-import { unsafeStatic as E, html as I } from "lit/static-html.js";
-import { g as n } from "../../chunks/globalCss.js";
-import { c as l, B as D } from "../../chunks/basemap-gallery-item.js";
-import { css as S } from "@lit/reactive-element/css-tag.js";
+import { classes as u } from "@arcgis/components-utils";
+import { when as y, watch as b } from "@arcgis/core/core/reactiveUtils.js";
+import $ from "@arcgis/core/widgets/BasemapGallery/BasemapGalleryViewModel.js";
+import { safeClassMap as n, LitElement as M, createEvent as x, noShadowRoot as L, nothing as p, safeStyleMap as R } from "@arcgis/lumina";
+import { u as _ } from "../../chunks/useT9n.js";
+import { m as B } from "../../chunks/useViewModel.js";
+import { unsafeStatic as D, html as I } from "lit/static-html.js";
+import { g as d } from "../../chunks/globalCss.js";
+import { c as r } from "../../chunks/basemap-gallery-resources.js";
+import { css as A } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.4 */
-function A({ level: o, class: t, children: e }) {
-  const s = k(o), a = `h${s}`, i = E(a);
-  return I`<${i} .ariaLevel=${String(s)} class=${r(v(n.heading, t))} role=heading>${e}</${i}>`;
+v4.33.0-next.40 */
+function C({ level: o, class: s, children: e }) {
+  const i = k(o), t = `h${i}`, a = D(t);
+  return I`<${a} .ariaLevel=${String(i)} class=${n(u(d.heading, s))} role=heading>${e}</${a}>`;
 }
-function C(o, t, e) {
-  return Math.min(Math.max(o, t), e);
+function E(o, s, e) {
+  return Math.min(Math.max(o, s), e);
 }
 function k(o) {
-  return C(Math.ceil(o), 1, 6);
+  return E(Math.ceil(o), 1, 6);
 }
-const G = S`arcgis-basemap-gallery{display:block}`, K = R(M), m = {
+const S = A`@layer{arcgis-basemap-gallery{display:block}}`, G = B($), m = {
   // Below this width, items are displayed as a single column and the thumbnail is placed above the title.
   small: 200,
   // Below this width, items are displayed as a single column but with the thumbnail side-by-side
@@ -34,18 +34,18 @@ const G = S`arcgis-basemap-gallery{display:block}`, K = R(M), m = {
   // Above this width, items are displayed in a grid.
   wide: 420
 };
-class H extends $ {
+class K extends M {
   constructor() {
-    super(...arguments), this.messages = L({}), this.viewModel = K(this), this._width = 0, this._state = "", this._itemsState = "", this.activeBasemap = this.viewModel.activeBasemap, this.autoDestroyDisabled = !1, this.disabled = !1, this.headingLevel = 2, this.icon = "basemap", this.label = "", this.position = "bottom-left", this.source = this.viewModel.source, this.state = this.viewModel.state, this.arcgisPropertyChange = f()("activeBasemap", "state"), this.arcgisReady = _();
+    super(...arguments), this.messages = _({}), this.viewModel = G(this), this._width = 0, this._state = "", this.activeBasemap = this.viewModel.activeBasemap, this.autoDestroyDisabled = !1, this.disabled = !1, this.headingLevel = 2, this.icon = "basemap", this.label = "", this.position = "bottom-left", this.source = this.viewModel.source, this.state = this.viewModel.state, this.arcgisPropertyChange = f()("activeBasemap", "state"), this.arcgisReady = x();
   }
   static {
-    this.properties = { _width: 16, _state: 16, _itemsState: 16, activeBasemap: 0, autoDestroyDisabled: 5, disabled: 7, headingLevel: 9, icon: 1, label: 1, position: 1, referenceElement: 1, source: 0, state: 3 };
+    this.properties = { _width: 16, _state: 16, activeBasemap: 0, autoDestroyDisabled: 5, disabled: 7, headingLevel: 9, icon: 1, label: 1, position: 1, referenceElement: 1, source: 0, state: 3 };
   }
   static {
-    this.shadowRootOptions = B;
+    this.shadowRootOptions = L;
   }
   static {
-    this.styles = G;
+    this.styles = S;
   }
   //#endregion
   //#region Public Methods
@@ -57,55 +57,49 @@ class H extends $ {
   //#region Lifecycle
   loaded() {
     this.manager.onLifecycle(() => [
-      b(() => this.source, () => {
+      y(() => this.source, () => {
         this.viewModel.loadSource();
       }, { sync: !0, initial: !0 }),
-      p(() => this.source.state, () => {
+      b(() => this.source.state, () => {
         this._state = this.source.state;
-      }, { sync: !0 }),
-      p(() => this.viewModel.items.filter((s) => s.state !== "ready").length, (s) => {
-        this._itemsState = s > 0 ? "loading" : "ready";
-      }, { sync: !0 }),
-      p(() => this.viewModel.activeBasemap, () => {
-        this.el.childElem?.querySelector(`[data-basemap="${this.viewModel.activeBasemap?.id}"]`)?.focus();
       }, { sync: !0 })
     ]);
-    const t = new ResizeObserver((s) => {
-      for (const a of s)
-        this._width = a.contentRect.width;
+    const s = new ResizeObserver((i) => {
+      for (const t of i)
+        this._width = t.contentRect.width;
     }), e = this.el.childElem;
-    e && t.observe(e);
+    e && s.observe(e);
   }
   //#endregion
   //#region Private Methods
-  _getRoundRobinIndex(t, e) {
-    return (t + e) % e;
+  _getRoundRobinIndex(s, e) {
+    return (s + e) % e;
   }
-  _handleKeyDown(t) {
-    const { key: e } = t;
+  _handleKeyDown(s) {
+    const { key: e } = s;
     if (!["ArrowUp", "ArrowDown", "ArrowRight", "ArrowLeft"].includes(e))
       return;
-    t.preventDefault();
-    const { items: a, activeBasemapIndex: i } = this.viewModel, h = e === "ArrowUp" || e === "ArrowLeft" ? this._getRoundRobinIndex(Math.max(i - 1, -1), a.length) : this._getRoundRobinIndex(i + 1, a.length), d = a.at(h);
-    d?.state === "ready" && (this.viewModel.activeBasemap = d.basemap);
+    s.preventDefault();
+    const { items: t, activeBasemapIndex: a } = this.viewModel, h = e === "ArrowUp" || e === "ArrowLeft" ? this._getRoundRobinIndex(Math.max(a - 1, -1), t.length) : this._getRoundRobinIndex(a + 1, t.length), c = t.at(h);
+    c?.state === "ready" && (this.viewModel.activeBasemap = c.basemap);
   }
   //#endregion
   //#region Rendering
   render() {
-    const t = this.source.state === "loading", e = this.disabled || this.state === "disabled", s = this.viewModel.items, a = {
-      [l.sourceLoading]: t,
-      [n.disabled]: e,
+    const s = this.source.state === "loading", e = this.disabled || this.state === "disabled", i = this.viewModel.items, t = {
+      [r.sourceLoading]: s,
+      [d.disabled]: e,
       "esri-component": !0
       // For compatibility with Esri View UI
-    }, i = this._width;
-    i <= m.small || i >= m.wide ? a[l.layoutGrid] = !0 : i < m.default && (a[l.narrowItems] = !0);
-    const h = t ? c`<div class=${r(l.loader)}></div>` : null, d = t ? null : s.length > 0 ? c`<div aria-disabled=${this.disabled ?? g} aria-label=${this.label ?? g} class=${r(l.itemContainer)} @keydown=${this._handleKeyDown} role=radiogroup>${s.map((u, w) => D({ disabled: e, item: u, itemIndex: w, viewModel: this.viewModel, messages: this.messages, state: u.state }))}</div>` : c`<div class=${r(n.empty)}>${A({ level: this.headingLevel, children: this.messages.noBasemaps })}</div>`;
-    return c`<div class=${r(v(l.base, n.widget, n.panel, a))} style=${x({
+    }, a = this._width;
+    a <= m.small || a >= m.wide ? t[r.layoutGrid] = !0 : a < m.default && (t[r.narrowItems] = !0);
+    const h = s ? l`<div class=${n(r.loader)}></div>` : null, c = s ? null : i.length > 0 ? l`<div aria-disabled=${this.disabled ?? p} aria-label=${this.label ?? p} class=${n(r.itemContainer)} @keydown=${this._handleKeyDown} role=radiogroup>${i.map((g, w) => l`<arcgis-basemap-gallery-item .disabled=${e} .item=${g} .itemIndex=${w} .viewModel=${this.viewModel} .messages=${this.messages}></arcgis-basemap-gallery-item>`)}</div>` : l`<div class=${n(d.empty)}>${C({ level: this.headingLevel, children: this.messages.noBasemaps })}</div>`;
+    return l`<div class=${n(u(r.base, d.widget, d.panel, t))} style=${R({
       "--esri-basemap-gallery-small": `${m.small}px`
-    })}>${[h, d]}</div>`;
+    })}>${[h, c]}</div>`;
   }
 }
-y("arcgis-basemap-gallery", H);
+v("arcgis-basemap-gallery", K);
 export {
-  H as ArcgisBasemapGallery
+  K as ArcgisBasemapGallery
 };

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

@@ -1 +1,2 @@
+import "../arcgis-basemap-gallery-item/index.js";
 export * from "./customElement.js";

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

@@ -1 +1,2 @@
+import "../arcgis-basemap-gallery-item/index.js";
 export * from "./customElement.js";

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,63 @@
+import { g as y, c as I } from "../../chunks/runtime.js";
+import { classes as B } from "@arcgis/components-utils";
+import { watch as h } from "@arcgis/core/core/reactiveUtils.js";
+import { LitElement as w, noShadowRoot as x, nothing as r, safeClassMap as s } from "@arcgis/lumina";
+import { html as l } from "lit-html";
+import { g as A } 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.33/esri/copyright.txt for details.
+v4.33.0-next.40 */
+function C(e) {
+  return e.portalItem?.type === "Web Scene" || e.referenceLayers.some((t) => t.type === "scene");
+}
+function _(e) {
+  return !!e?.portalItem?.tags?.some((t) => t.toLowerCase() === "beta");
+}
+class S extends w {
+  constructor() {
+    super(...arguments), this._itemState = "loading", this._isActive = !1;
+  }
+  static {
+    this.properties = { _itemState: 16, _isActive: 16, disabled: 5, item: 0, itemIndex: 9, viewModel: 0, messages: 0 };
+  }
+  static {
+    this.shadowRootOptions = x;
+  }
+  //#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: n, viewModel: o, messages: u } = this, g = a.basemap.thumbnailUrl || y("assets/basemap-gallery/images/basemap-toggle-64.svg"), m = a.basemap.title, b = a.basemap.portalItem?.snippet, $ = a.error?.message || b || m, { activeBasemapIndex: p } = o, c = p === n, f = c || p === -1 && n === 0 ? 0 : -1, v = {
+      [i.selectedItem]: c,
+      [i.itemError]: a.state === "error"
+    }, d = `basemapgallery-item-${a.uid}`;
+    return l`<div .ariaChecked=${c} .ariaDisabled=${t} aria-labelledby=${d ?? r} class=${s(B(i.item, v))} role=radio tabindex=${f ?? r} title=${$ ?? r} @click=${() => {
+      a.state === "ready" && (o.activeBasemap = a.basemap);
+    }}><img alt class=${s(i.itemThumbnail)} src=${g ?? r}><div class=${s(i.itemContent)}><div class=${s(i.itemTitle)}><span id=${d ?? r}>${m}</span></div>${C(a.basemap) ? T(a.basemap, u) : null}</div>${a.state !== "loading" ? null : l`<calcite-scrim><span aria-hidden=true class=${s(A.loaderAnimation)} role=presentation></span></calcite-scrim>`}</div>`;
+  }
+}
+function T(e, t) {
+  return l`<div class=${s(i.itemTagsContainer)}>${D(t)}${_(e) ? E(t) : null}</div>`;
+}
+function D(e) {
+  return l`<calcite-chip scale=s .label=${e.tag3D}>${e.tag3D}</calcite-chip>`;
+}
+function E(e) {
+  return l`<calcite-chip appearance=outline-fill scale=s .label=${e.tagBeta}>${e.tagBeta}</calcite-chip>`;
+}
+I("arcgis-basemap-gallery-item", S);
+export {
+  S as ArcgisBasemapGalleryItem
+};

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.33/esri/copyright.txt for details.
-v4.33.0-next.4 */
-const d = h`arcgis-basemap-layer-list{display:block}`, n = o(s);
+v4.33.0-next.40 */
+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,13 +11,38 @@ declare const useBasemapToggleViewModel: (component: import('@arcgis/components-
     el: HTMLElement;
     autoDestroyDisabled?: boolean;
     destroy?: () => Promise<void>;
-} & Pick<BasemapToggleViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<BasemapToggleViewModel>, options?: {
+} & Pick<BasemapToggleViewModel, never> & {
+    reactiveUtils?: typeof __esri.reactiveUtils;
+    state?: "ready" | "loading" | "disabled" | "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?: {
     editConstructorProperties(props: unknown): unknown;
 } | undefined) => BasemapToggleViewModel;
-/** BasemapToggle component 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
@@ -28,20 +53,23 @@ 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;
+    /**
+     * The current state of the component.
+     */
     readonly state: "ready" | "loading" | "disabled" | "incompatible-next-basemap";
     /** Permanently destroy the component */
     destroy(): Promise<void>;

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

@@ -4,15 +4,15 @@ 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 } from "../../chunks/useView.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/useT9n.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.33/esri/copyright.txt for details.
-v4.33.0-next.4 */
-const A = L`arcgis-basemap-toggle{display:block}`, s = "esri-basemap-toggle", o = "esri-basemap-thumbnail", e = {
+v4.33.0-next.40 */
+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`,
@@ -54,10 +54,10 @@ 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>`;
   }
 }
 f("arcgis-basemap-toggle", E);

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.33/esri/copyright.txt for details.
-v4.33.0-next.4 */
-const r = d`arcgis-bookmarks{display:block}`, n = h(s);
+v4.33.0-next.40 */
+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.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.33/esri/copyright.txt for details.
-v4.33.0-next.4 */
-const a = r`arcgis-building-explorer{display:block}`, d = h(s);
+v4.33.0-next.40 */
+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.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.33/esri/copyright.txt for details.
-v4.33.0-next.4 */
-const d = h`arcgis-catalog-layer-list{display:block}`, n = r(s);
+v4.33.0-next.40 */
+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,7 +11,26 @@ declare const useCompassViewModel: (component: import('@arcgis/components-contro
     el: HTMLElement;
     autoDestroyDisabled?: boolean;
     destroy?: () => Promise<void>;
-} & Pick<CompassViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<CompassViewModel>, options?: {
+} & 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?: {
     editConstructorProperties(props: unknown): unknown;
 } | undefined) => CompassViewModel;
 /** 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).
@@ -30,10 +49,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

@@ -4,20 +4,20 @@ 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 o, safeStyleMap as f } from "@arcgis/lumina";
-import { u as w } from "../../chunks/useView.js";
-import { m as y } from "../../chunks/useViewModel.js";
+import { u as y } from "../../chunks/useT9n.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.33/esri/copyright.txt for details.
-v4.33.0-next.4 */
-const b = $`arcgis-compass{display:block}`, a = "esri-compass", r = {
+v4.33.0-next.40 */
+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 };