@arcgis/map-components 4.32.0-next.7 → 4.32.0-next.9

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

@@ -11,6 +11,13 @@ declare const useAttachmentsWidget: (component: import('@arcgis/components-contr
     destroy?: (() => Promise<void>) | undefined;
 } & Pick<__esri.Attachments, "label" | "viewModel" | "icon" | "graphic" | "capabilities" | "displayType"> & {
     reactiveUtils?: __esri.reactiveUtils | undefined;
+    /**
+     * 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 temporary hide it. If this
+     * is set, make sure to call the \`destroy\` method when you are done to prevent
+     * memory leaks.
+     */
     state?: unknown;
     viewModel?: __esri.AttachmentsViewModel | undefined;
     icon: string | Nil;

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

@@ -2,16 +2,17 @@ import { c as t } from "../../chunks/runtime.js";
 import { newWidgetsAttachments as e } from "@arcgis/core-adapter";
 import { m as i } from "../../chunks/useWidget.js";
 import { usePropertyChange as s } from "@arcgis/components-controllers";
-import { LitElement as d, createEvent as a, noShadowRoot as o } from "@arcgis/lumina";
+import { LitElement as a, createEvent as d, noShadowRoot as o } from "@arcgis/lumina";
+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.7
+ * v4.32.0-next.9
 */
-const h = i(e);
-class n extends d {
+const n = h`arcgis-attachments{display:flex}`, r = i(e);
+class l extends a {
   constructor() {
-    super(...arguments), this.widget = h(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 = s()("submitting", "state"), this.arcgisReady = a();
+    super(...arguments), this.widget = r(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.capabilities = this.widget.capabilities, this.displayType = this.widget.displayType, this.graphic = this.widget.graphic, this.hideAddButton = this.widget.visibleElements.addButton, this.hideAddSubmitButton = this.widget.visibleElements.addSubmitButton, this.hideCancelAddButton = this.widget.visibleElements.cancelAddButton, this.hideCancelUpdateButton = this.widget.visibleElements.cancelUpdateButton, this.hideDeleteButton = this.widget.visibleElements.deleteButton, this.hideErrorMessage = this.widget.visibleElements.errorMessage, this.hideProgressBar = this.widget.visibleElements.progressBar, this.hideUpdateButton = this.widget.visibleElements.updateButton, this.icon = this.widget.icon, this.label = this.widget.label, this.position = "bottom-left", this.state = this.viewModel.state, this.submitting = this.widget.submitting, this.arcgisPropertyChange = s()("submitting", "state"), this.arcgisReady = d();
   }
   static {
     this.properties = { autoDestroyDisabled: 5, capabilities: 0, displayType: 1, graphic: 0, hideAddButton: 5, hideAddSubmitButton: 5, hideCancelAddButton: 5, hideCancelUpdateButton: 5, hideDeleteButton: 5, hideErrorMessage: 5, hideProgressBar: 5, hideUpdateButton: 5, icon: 1, label: 1, position: 1, referenceElement: 1, state: 3, submitting: 4 };
@@ -19,6 +20,9 @@ class n extends d {
   static {
     this.shadowRootOptions = o;
   }
+  static {
+    this.styles = n;
+  }
   // #endregion
   // #region Public Methods
   /** Permanently destroy the component */
@@ -26,7 +30,7 @@ class n extends d {
     await this.manager.destroy();
   }
 }
-t("arcgis-attachments", n);
+t("arcgis-attachments", l);
 export {
-  n as ArcgisAttachments
+  l as ArcgisAttachments
 };

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

@@ -3,15 +3,16 @@ import { newWidgetsBasemapGallery as t } from "@arcgis/core-adapter";
 import { m as s } from "../../chunks/useWidget.js";
 import { usePropertyChange as i } from "@arcgis/components-controllers";
 import { LitElement as a, createEvent as o, noShadowRoot as r } from "@arcgis/lumina";
+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.7
+ * v4.32.0-next.9
 */
-const l = s(t);
-class h extends a {
+const h = l`arcgis-basemap-gallery{display:flex}`, d = s(t);
+class m extends a {
   constructor() {
-    super(...arguments), this.widget = l(this), this.viewModel = this.widget.viewModel, this.activeBasemap = this.widget.activeBasemap, this.autoDestroyDisabled = !1, this.disabled = this.widget.disabled, this.headingLevel = this.widget.headingLevel, this.icon = this.widget.icon, this.label = this.widget.label, this.position = "bottom-left", this.source = this.widget.source, this.state = this.viewModel.state, this.arcgisPropertyChange = i()("activeBasemap", "state"), this.arcgisReady = o();
+    super(...arguments), this.widget = d(this), this.viewModel = this.widget.viewModel, this.activeBasemap = this.widget.activeBasemap, this.autoDestroyDisabled = !1, this.disabled = this.widget.disabled, this.headingLevel = this.widget.headingLevel, this.icon = this.widget.icon, this.label = this.widget.label, this.position = "bottom-left", this.source = this.widget.source, this.state = this.viewModel.state, this.arcgisPropertyChange = i()("activeBasemap", "state"), this.arcgisReady = o();
   }
   static {
     this.properties = { activeBasemap: 0, autoDestroyDisabled: 5, disabled: 7, headingLevel: 9, icon: 1, label: 1, position: 1, referenceElement: 1, source: 0, state: 3 };
@@ -19,6 +20,9 @@ class h extends a {
   static {
     this.shadowRootOptions = r;
   }
+  static {
+    this.styles = h;
+  }
   // #endregion
   // #region Public Methods
   /** Permanently destroy the component */
@@ -26,7 +30,7 @@ class h extends a {
     await this.manager.destroy();
   }
 }
-e("arcgis-basemap-gallery", h);
+e("arcgis-basemap-gallery", m);
 export {
-  h as ArcgisBasemapGallery
+  m as ArcgisBasemapGallery
 };

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

@@ -4,15 +4,16 @@ import { newWidgetsBasemapLayerList as i } from "@arcgis/core-adapter";
 import { m as s } from "../../chunks/useWidget.js";
 import { LitElement as r, createEvent as a, noShadowRoot as o } from "@arcgis/lumina";
 import { reEmitEvent as l } from "@arcgis/components-controllers/accessor";
+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.7
+ * v4.32.0-next.9
 */
-const h = s(i);
-class n extends r {
+const n = h`arcgis-basemap-layer-list{display:flex}`, d = s(i);
+class c extends r {
   constructor() {
-    super(...arguments), this.widget = h(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, 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.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 = l(() => this.widget, "triggerAction");
+    super(...arguments), this.widget = d(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, 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.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 = l(() => this.widget, "trigger-action");
   }
   static {
     this.properties = { autoDestroyDisabled: 5, baseFilterText: 1, baseItems: 32, baseListItemCreatedFunction: 0, basemapTitle: 1, catalogLayerList: 32, catalogOptions: 0, collapsed: 7, dragEnabled: 5, editingTitle: 5, filterPlaceholder: 1, headingLevel: 9, hideBaseLayers: 5, hideFlow: 5, hideHeading: 5, hideReferenceLayers: 5, hideStatusIndicators: 5, icon: 1, label: 1, minFilterItems: 9, position: 1, referenceElement: 1, referenceFilterText: 1, referenceItems: 32, referenceListItemCreatedFunction: 0, selectedItems: 0, selectionMode: 1, showCloseButton: 5, showCollapseButton: 5, showEditTitleButton: 5, showErrors: 5, showFilter: 5, showTemporaryLayerIndicators: 5, state: 3, visibilityAppearance: 1 };
@@ -20,6 +21,9 @@ class n extends r {
   static {
     this.shadowRootOptions = o;
   }
+  static {
+    this.styles = n;
+  }
   /** A collection of ListItems representing the baseLayers. */
   get baseItems() {
     return this.widget.baseItems;
@@ -39,7 +43,7 @@ class n extends r {
     await this.manager.destroy();
   }
 }
-e("arcgis-basemap-layer-list", n);
+e("arcgis-basemap-layer-list", c);
 export {
-  n as ArcgisBasemapLayerList
+  c as ArcgisBasemapLayerList
 };

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

@@ -1,15 +1,16 @@
 import { c as B } from "../../chunks/runtime.js";
 import { html as l } from "lit-html";
 import { g as b } from "../../chunks/globalCss.js";
-import { u as f, m as S } from "../../chunks/useViewModel.js";
+import { u as f, m as x } from "../../chunks/useViewModel.js";
 import { classes as r } from "@arcgis/components-utils";
-import { load as T, usePropertyChange as x } from "@arcgis/components-controllers";
+import { load as S, usePropertyChange as T } from "@arcgis/components-controllers";
 import { importApplicationsComponentsBasemapUtils as M, newWidgetsBasemapToggleBasemapToggleViewModel as k } from "@arcgis/core-adapter";
-import { LitElement as C, createEvent as I, noShadowRoot as A, safeClassMap as a, nothing as m, safeStyleMap as u } from "@arcgis/lumina";
+import { LitElement as C, createEvent as I, noShadowRoot as A, safeClassMap as a, nothing as c, safeStyleMap as u } from "@arcgis/lumina";
+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.7
+ * v4.32.0-next.9
 */
 const s = "esri-basemap-toggle", o = "esri-basemap-thumbnail", e = {
   base: s,
@@ -20,10 +21,10 @@ const s = "esri-basemap-toggle", o = "esri-basemap-thumbnail", e = {
   overlay: `${o}__overlay ${s}__image-overlay`,
   title: `${o}__title ${s}__title`,
   overlayScrim: `${o}__overlay-scrim`
-}, L = S(k);
-class U extends C {
+}, U = L`arcgis-basemap-toggle{display:flex}`, D = x(k);
+class E extends C {
   constructor() {
-    super(...arguments), this.basemapUtils = T(M), this.messages = f(), this.viewModel = L(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 = x()("nextBasemap", "state"), this.arcgisReady = I();
+    super(...arguments), this.basemapUtils = S(M), this.messages = f(), 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 = T()("nextBasemap", "state"), this.arcgisReady = I();
   }
   static {
     this.properties = { activeBasemap: 0, autoDestroyDisabled: 5, icon: 3, label: 1, messageOverrides: 0, nextBasemap: 0, position: 3, referenceElement: 1, showTitle: 5, state: 3 };
@@ -31,6 +32,9 @@ class U extends C {
   static {
     this.shadowRootOptions = A;
   }
+  static {
+    this.styles = U;
+  }
   // #endregion
   // #region Public Methods
   /** Permanently destroy the component */
@@ -50,13 +54,13 @@ class U extends C {
   // #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", p = t.state === "incompatible-next-basemap", c = i?.title ?? "", d = 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", p = t.state === "incompatible-next-basemap", m = i?.title ?? "", d = i && i.loadStatus !== "loaded";
     let g;
-    const h = this.showTitle && c, v = p, 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 ?? m}>${c}</span>` : null}${v ? l`<calcite-scrim class=${a(e.overlayScrim)} title=${this.messages.incompatibleSpatialReference ?? m}><calcite-icon icon=exclamation-mark-triangle></calcite-icon></calcite-scrim>` : null}</div>`), l`<div class=${a(r(e.base, b.widget))}><calcite-button appearance=transparent data-basemap-id=${(i ? i.id : "") ?? m} .disabled=${p} kind=neutral .label=${(this.label ?? void 0) || ""} @click=${() => void this.toggle()} title=${((this.label ?? void 0) || "") ?? m}><div class=${a(r(e.container, e.secondaryBasemapImage))}><div class=${a(e.image)} style=${u(w)}></div></div><div class=${a(e.container)}><div class=${a(r(e.image, d ? e.imageLoading : null))} style=${u(_)}>${d || $ ? l`<calcite-scrim><span aria-hidden=true class=${a(b.loaderAnimation)} role=presentation></span></calcite-scrim>` : null}</div>${g}</div></calcite-button></div>`;
+    const h = this.showTitle && m, v = p, 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=${m ?? c}>${m}</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(r(e.base, b.widget))}><calcite-button appearance=transparent data-basemap-id=${(i ? i.id : "") ?? c} .disabled=${p} kind=neutral .label=${(this.label ?? void 0) || ""} @click=${() => void this.toggle()} title=${((this.label ?? void 0) || "") ?? c}><div class=${a(r(e.container, e.secondaryBasemapImage))}><div class=${a(e.image)} style=${u(w)}></div></div><div class=${a(e.container)}><div class=${a(r(e.image, d ? e.imageLoading : null))} style=${u(_)}>${d || $ ? l`<calcite-scrim><span aria-hidden=true class=${a(b.loaderAnimation)} role=presentation></span></calcite-scrim>` : null}</div>${g}</div></calcite-button></div>`;
   }
 }
-B("arcgis-basemap-toggle", U);
+B("arcgis-basemap-toggle", E);
 export {
-  U as ArcgisBasemapToggle
+  E as ArcgisBasemapToggle
 };

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

@@ -2,23 +2,27 @@ import { c as i } from "../../chunks/runtime.js";
 import { newWidgetsBookmarks as e } from "@arcgis/core-adapter";
 import { usePropertyChange as s } from "@arcgis/components-controllers";
 import { m as o } from "../../chunks/useWidget.js";
-import { LitElement as h, createEvent as a, noShadowRoot as l } from "@arcgis/lumina";
+import { LitElement as a, createEvent as l, noShadowRoot as h } from "@arcgis/lumina";
 import { reEmitEvent as t } from "@arcgis/components-controllers/accessor";
+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.7
+ * v4.32.0-next.9
 */
-const d = o(e);
-class r extends h {
+const r = d`arcgis-bookmarks{display:flex}`, n = o(e);
+class m extends a {
   constructor() {
-    super(...arguments), this.widget = d(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, "bookmarkEdit"), this.arcgisPropertyChange = s()("state"), this.arcgisReady = a(), this.arcgisSelect = t(() => this.widget, "bookmarkSelect");
+    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 = s()("state"), this.arcgisReady = l(), this.arcgisSelect = t(() => this.widget, "bookmark-select");
   }
   static {
     this.properties = { autoDestroyDisabled: 5, bookmarks: 0, defaultCreateOptions: 0, defaultEditOptions: 0, disabled: 7, dragEnabled: 5, filterPlaceholder: 1, filterText: 1, hideFlow: 5, hideThumbnail: 5, hideTime: 5, icon: 1, label: 1, position: 1, referenceElement: 1, showAddBookmarkButton: 5, showCloseButton: 5, showCollapseButton: 5, showEditBookmarkButton: 5, showFilter: 5, showHeading: 5, state: 3 };
   }
   static {
-    this.shadowRootOptions = l;
+    this.shadowRootOptions = h;
+  }
+  static {
+    this.styles = r;
   }
   // #endregion
   // #region Public Methods
@@ -27,7 +31,7 @@ class r extends h {
     await this.manager.destroy();
   }
 }
-i("arcgis-bookmarks", r);
+i("arcgis-bookmarks", m);
 export {
-  r as ArcgisBookmarks
+  m as ArcgisBookmarks
 };

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

@@ -3,15 +3,16 @@ import { newWidgetsBuildingExplorer as i } from "@arcgis/core-adapter";
 import { m as s } from "../../chunks/useWidget.js";
 import { usePropertyChange as t } from "@arcgis/components-controllers";
 import { LitElement as l, createEvent as o, noShadowRoot as h } from "@arcgis/lumina";
+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.7
+ * v4.32.0-next.9
 */
-const a = s(i);
-class r extends l {
+const a = r`arcgis-building-explorer{display:flex}`, d = s(i);
+class n extends l {
   constructor() {
-    super(...arguments), this.widget = a(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 = t()("level", "phase", "state"), this.arcgisReady = o();
+    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 = t()("level", "phase", "state"), this.arcgisReady = o();
   }
   static {
     this.properties = { autoDestroyDisabled: 5, headingLevel: 9, hideDisciplines: 5, hideLevels: 5, hidePhases: 5, icon: 1, label: 1, layers: 0, level: 0, phase: 0, position: 1, referenceElement: 1, state: 3 };
@@ -19,6 +20,9 @@ class r extends l {
   static {
     this.shadowRootOptions = h;
   }
+  static {
+    this.styles = a;
+  }
   // #endregion
   // #region Public Methods
   /** Permanently destroy the component */
@@ -26,7 +30,7 @@ class r extends l {
     await this.manager.destroy();
   }
 }
-e("arcgis-building-explorer", r);
+e("arcgis-building-explorer", n);
 export {
-  r as ArcgisBuildingExplorer
+  n as ArcgisBuildingExplorer
 };

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

@@ -4,15 +4,16 @@ import { newWidgetsCatalogLayerList as i } from "@arcgis/core-adapter";
 import { m as s } from "../../chunks/useWidget.js";
 import { LitElement as o, createEvent as a, noShadowRoot as l } from "@arcgis/lumina";
 import { reEmitEvent as r } from "@arcgis/components-controllers/accessor";
+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.7
+ * v4.32.0-next.9
 */
-const h = s(i);
-class d extends o {
+const d = h`arcgis-catalog-layer-list{display:flex}`, n = s(i);
+class c extends o {
   constructor() {
-    super(...arguments), this.widget = h(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.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 = r(() => this.widget, "triggerAction");
+    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.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 = r(() => this.widget, "trigger-action");
   }
   static {
     this.properties = { autoDestroyDisabled: 5, catalogItems: 32, catalogLayer: 0, collapsed: 7, filterPlaceholder: 1, filterText: 1, headingLevel: 9, hideFlow: 5, hideStatusIndicators: 5, icon: 1, label: 1, listItemCreatedFunction: 0, minFilterItems: 9, position: 1, referenceElement: 1, selectedItems: 0, selectionMode: 1, showCloseButton: 5, showCollapseButton: 5, showErrors: 5, showFilter: 5, showHeading: 5, showTemporaryLayerIndicators: 5, state: 3, visibilityAppearance: 1 };
@@ -20,6 +21,9 @@ class d extends o {
   static {
     this.shadowRootOptions = l;
   }
+  static {
+    this.styles = d;
+  }
   /** A collection of ListItems representing the catalogLayers dynamicGroupLayer. */
   get catalogItems() {
     return this.widget.catalogItems;
@@ -31,7 +35,7 @@ class d extends o {
     await this.manager.destroy();
   }
 }
-t("arcgis-catalog-layer-list", d);
+t("arcgis-catalog-layer-list", c);
 export {
-  d as ArcgisCatalogLayerList
+  c as ArcgisCatalogLayerList
 };

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

@@ -3,25 +3,32 @@ import { html as l } from "lit-html";
 import { usePropertyChange as m } from "@arcgis/components-controllers";
 import { classes as d } from "@arcgis/components-utils";
 import { newWidgetsCompassCompassViewModel as h } from "@arcgis/core-adapter";
-import { u as p, m as u } from "../../chunks/useViewModel.js";
+import { u as p, m as g } from "../../chunks/useViewModel.js";
 import { g as i } from "../../chunks/globalCss.js";
-import { LitElement as g, createEvent as f, safeClassMap as e, nothing as o, safeStyleMap as w } from "@arcgis/lumina";
+import { LitElement as u, createEvent as f, noShadowRoot as w, safeClassMap as s, nothing as o, safeStyleMap as y } from "@arcgis/lumina";
+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.7
+ * v4.32.0-next.9
 */
-const a = "esri-compass", r = {
+const b = $`arcgis-compass{display:flex}`, a = "esri-compass", r = {
   base: a,
   iconContainer: `${a}__icon-container`
-}, $ = u(h);
-class b extends g {
+}, v = g(h);
+class C extends u {
   constructor() {
-    super(...arguments), this.messages = p(), this.viewModel = $(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 = f();
+    super(...arguments), this.messages = p(), 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 = f();
   }
   static {
     this.properties = { autoDestroyDisabled: 5, icon: 3, label: 1, messageOverrides: 0, orientation: 0, position: 3, referenceElement: 1, state: 3 };
   }
+  static {
+    this.shadowRootOptions = w;
+  }
+  static {
+    this.styles = b;
+  }
   get icon() {
     return this._icon ?? (this.state === "rotation" ? "arrow-up" : "compass-needle");
   }
@@ -45,13 +52,13 @@ class b extends g {
   // #region Rendering
   render() {
     const { messages: t, icon: n } = this;
-    return l`<div class=${e(d(r.base, i.widget))}><calcite-button class=${e(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=${e(r.iconContainer)} title=${t.reset ?? o}><calcite-icon .icon=${n} style=${w(v(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=${y(M(this.orientation))}></calcite-icon></div></calcite-button></div>`;
   }
 }
-const v = (s) => ({
-  transform: `rotateZ(${s.z}deg)`
+const M = (e) => ({
+  transform: `rotateZ(${e.z}deg)`
 });
-c("arcgis-compass", b);
+c("arcgis-compass", C);
 export {
-  b as ArcgisCompass
+  C as ArcgisCompass
 };

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

@@ -12,17 +12,16 @@ declare const useCoordinateConversionWidget: (component: import('@arcgis/compone
 } & Pick<__esri.CoordinateConversion, "orientation" | "label" | "viewModel" | "icon" | "mode" | "headingLevel" | "conversions" | "formats" | "locationSymbol" | "storageType"> & {
     reactiveUtils?: __esri.reactiveUtils | undefined;
     state?: unknown;
-    /**
+    viewModel?: __esri.CoordinateConversionViewModel | undefined;
+    icon: string | Nil;
+    label: string | Nil;
+    referenceElement: string | Nil | ArcgisReferenceElement; /**
      * 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 temporary hide it. If this
      * is set, make sure to call the \`destroy\` method when you are done to prevent
      * memory leaks.
      */
-    viewModel?: __esri.CoordinateConversionViewModel | undefined;
-    icon: string | Nil;
-    label: string | Nil;
-    referenceElement: string | Nil | ArcgisReferenceElement;
     position: __esri.UIPosition;
     arcgisReady: import('@arcgis/components-controllers').EventEmitter;
     arcgisPropertyChange: import('@arcgis/components-controllers').EventEmitter<{

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

@@ -3,15 +3,16 @@ import { newWidgetsCoordinateConversion as s } from "@arcgis/core-adapter";
 import { usePropertyChange as o } from "@arcgis/components-controllers";
 import { m as n } from "../../chunks/useWidget.js";
 import { LitElement as r, createEvent as a, noShadowRoot as d } from "@arcgis/lumina";
+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.7
+ * v4.32.0-next.9
 */
-const h = n(s);
-class l extends r {
+const l = h`arcgis-coordinate-conversion{display:flex}`, g = n(s);
+class c extends r {
   constructor() {
-    super(...arguments), this.widget = h(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 = o()("currentLocation", "state"), this.arcgisReady = a();
+    super(...arguments), this.widget = g(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 = o()("currentLocation", "state"), this.arcgisReady = a();
   }
   static {
     this.properties = { autoDestroyDisabled: 5, conversions: 0, currentLocation: 0, formats: 0, headingLevel: 9, hideCaptureButton: 5, hideEditButton: 5, hideExpandButton: 5, hideSettingsButton: 5, icon: 1, label: 1, locationSymbol: 0, mode: 1, multipleConversionsDisabled: 5, orientation: 1, position: 1, referenceElement: 1, state: 3, storageDisabled: 5, storageType: 1 };
@@ -19,6 +20,9 @@ class l extends r {
   static {
     this.shadowRootOptions = d;
   }
+  static {
+    this.styles = l;
+  }
   // #endregion
   // #region Public Methods
   /** Permanently destroy the component */
@@ -29,7 +33,7 @@ class l extends r {
     return await this.widget?.reverseConvert(t, e);
   }
 }
-i("arcgis-coordinate-conversion", l);
+i("arcgis-coordinate-conversion", c);
 export {
-  l as ArcgisCoordinateConversion
+  c as ArcgisCoordinateConversion
 };

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

@@ -10,6 +10,13 @@ declare const useDaylightWidget: (component: import('@arcgis/components-controll
     autoDestroyDisabled?: boolean | undefined;
     destroy?: (() => Promise<void>) | undefined;
 } & Pick<__esri.Daylight, "label" | "viewModel" | "icon" | "headingLevel" | "dateOrSeason" | "playSpeedMultiplier" | "timeSliderSteps"> & {
+    /**
+     * 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 temporary hide it. If this
+     * is set, make sure to call the \`destroy\` method when you are done to prevent
+     * memory leaks.
+     */
     reactiveUtils?: __esri.reactiveUtils | undefined;
     state?: unknown;
     viewModel?: __esri.DaylightViewModel | undefined;

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

@@ -1,22 +1,26 @@
 import { c as e } from "../../chunks/runtime.js";
 import { newWidgetsDaylight as i } from "@arcgis/core-adapter";
 import { m as t } from "../../chunks/useWidget.js";
-import { LitElement as s, createEvent as a, noShadowRoot as h } from "@arcgis/lumina";
+import { LitElement as s, createEvent as a, noShadowRoot as l } from "@arcgis/lumina";
+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.7
+ * v4.32.0-next.9
 */
-const l = t(i);
-class d extends s {
+const o = h`arcgis-daylight{display:flex}`, d = t(i);
+class n extends s {
   constructor() {
-    super(...arguments), this.widget = l(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 = a();
+    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 = a();
   }
   static {
     this.properties = { autoDestroyDisabled: 5, currentSeason: 1, dateOrSeason: 1, dayPlaying: 5, headingLevel: 9, hideDatePicker: 5, hideHeader: 5, hidePlayButtons: 5, hideShadowsToggle: 5, hideSunLightingToggle: 5, hideTimezone: 5, icon: 1, label: 1, playSpeedMultiplier: 9, position: 1, referenceElement: 1, timeSliderSteps: 9, yearPlaying: 5 };
   }
   static {
-    this.shadowRootOptions = h;
+    this.shadowRootOptions = l;
+  }
+  static {
+    this.styles = o;
   }
   // #endregion
   // #region Public Methods
@@ -25,7 +29,7 @@ class d extends s {
     await this.manager.destroy();
   }
 }
-e("arcgis-daylight", d);
+e("arcgis-daylight", n);
 export {
-  d as ArcgisDaylight
+  n as ArcgisDaylight
 };

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

@@ -1,17 +1,18 @@
 import { c as t } from "../../chunks/runtime.js";
-import { newWidgetsDirectionalPad as e } from "@arcgis/core-adapter";
-import { usePropertyChange as i } from "@arcgis/components-controllers";
+import { newWidgetsDirectionalPad as i } from "@arcgis/core-adapter";
+import { usePropertyChange as e } from "@arcgis/components-controllers";
 import { m as s } from "../../chunks/useWidget.js";
 import { LitElement as a, createEvent as o, noShadowRoot as r } from "@arcgis/lumina";
+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.7
+ * v4.32.0-next.9
 */
-const l = s(e);
-class d extends a {
+const d = l`arcgis-directional-pad{display:flex}`, c = s(i);
+class n extends a {
   constructor() {
-    super(...arguments), this.widget = l(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.disabled = this.widget.disabled, this.icon = this.widget.icon, this.label = this.widget.label, this.position = "bottom-left", this.state = this.viewModel.state, this.visualScale = this.widget.visualScale, this.arcgisPropertyChange = i()("state"), this.arcgisReady = o();
+    super(...arguments), this.widget = c(this), this.viewModel = this.widget.viewModel, this.autoDestroyDisabled = !1, this.disabled = this.widget.disabled, this.icon = this.widget.icon, this.label = this.widget.label, this.position = "bottom-left", this.state = this.viewModel.state, this.visualScale = this.widget.visualScale, this.arcgisPropertyChange = e()("state"), this.arcgisReady = o();
   }
   static {
     this.properties = { autoDestroyDisabled: 5, disabled: 5, icon: 1, label: 1, position: 1, referenceElement: 1, state: 3, visualScale: 1 };
@@ -19,6 +20,9 @@ class d extends a {
   static {
     this.shadowRootOptions = r;
   }
+  static {
+    this.styles = d;
+  }
   // #endregion
   // #region Public Methods
   /** Permanently destroy the component */
@@ -26,7 +30,7 @@ class d extends a {
     await this.manager.destroy();
   }
 }
-t("arcgis-directional-pad", d);
+t("arcgis-directional-pad", n);
 export {
-  d as ArcgisDirectionalPad
+  n as ArcgisDirectionalPad
 };