@arcgis/map-components 5.2.0-next.128 → 5.2.0-next.129

package/dist/components/arcgis-feature-next/customElement.js

@@ -11,8 +11,8 @@ import { substitute as T } from "@arcgis/core/intl.js";
 import { renderingSanitizer as A } from "@arcgis/core/applications/Components/sanitizerUtils.js";
 import { c as R, g as E, d as D, e as V, b as d, i as k, f as B } from "../../chunks/feature-utils.js";
 import N from "@arcgis/core/core/Collection.js";
-import { watch as H } from "@arcgis/core/core/reactiveUtils.js";
-import { stripHTML as P } from "@arcgis/core/applications/Components/stringUtils.js";
+import { watch as P } from "@arcgis/core/core/reactiveUtils.js";
+import { stripHTML as H } from "@arcgis/core/applications/Components/stringUtils.js";
 import Z from "@arcgis/core/popup/FeatureContent.js";
 const z = y`:host{display:flex;flex:1 1 auto;background-color:var(--calcite-color-foreground-1);--calcite-color-background: var(--calcite-color-foreground-1)}.root{flex:1 1 auto}.root calcite-icon{box-sizing:content-box}.loading-container{display:flex;justify-content:center;padding:var(--calcite-spacing-md) 0;width:100%}.content-element{margin-bottom:var(--calcite-spacing-lg);padding:0 var(--calcite-spacing-sm);display:flex;flex-direction:column}.content-element[empty]{display:none}.content-element:not([empty]):only-child,.content-element:not([empty]):last-child{margin-bottom:var(--calcite-spacing-xxs)}.last-edited-info{padding-top:var(--calcite-spacing-xs);font-size:var(--calcite-font-size-sm)}`, U = x(Z);
 class O extends b {
@@ -64,7 +64,7 @@ class O extends b {
   }
   loaded() {
     this.manager.onLifecycle(() => [
-      H(() => [this.internalFlowItems?.length], () => this._setFocus())
+      P(() => [this.internalFlowItems?.length], () => this._setFocus())
     ]);
   }
   _setContentElementMedia(e, t) {
@@ -252,7 +252,7 @@ class O extends b {
   }
   _renderContentContainer() {
     const { flowItems: e, hideContent: t, internalFlowItems: i, headingLevel: a, state: s, messages: o, heading: n, hideHeading: l } = this, c = t ? null : r`<div class="main">${[this._renderContent(), this._renderLastEditInfo()]}</div>`, h = o.returnToInitialFeature ?? "";
-    return e ? c : r`<calcite-flow ${w(this._storeRootFlowNode)}><calcite-flow-item .focusTrapEnabled=${this.focusTrapEnabled} .loading=${s === "loading"} .headingLevel=${a} .heading=${l ? void 0 : P(n)} .selected=${!i.length}>${!l && n ? r`<div slot=heading><div .innerHTML=${A.sanitize(n ?? "") ?? ""}></div></div>` : null}${c}</calcite-flow-item>${i.toArray().map((p, u) => r`<calcite-flow-item .focusTrapEnabled=${this.focusTrapEnabled} @calciteFlowItemBack=${(f) => {
+    return e ? c : r`<calcite-flow ${w(this._storeRootFlowNode)}><calcite-flow-item .focusTrapEnabled=${this.focusTrapEnabled} .loading=${s === "loading"} .headingLevel=${a} .heading=${l ? void 0 : H(n)} .selected=${!i.length}>${!l && n ? r`<div slot=heading><div .innerHTML=${A.sanitize(n ?? "") ?? ""}></div></div>` : null}${c}</calcite-flow-item>${i.toArray().map((p, u) => r`<calcite-flow-item .focusTrapEnabled=${this.focusTrapEnabled} @calciteFlowItemBack=${(f) => {
       f.preventDefault(), this._handleDrillInBackClick();
     }} .loading=${s === "loading"} .headingLevel=${a} .selected=${u === i.length - 1}><calcite-action icon=move-up @click=${this._removeFlowItems} slot=header-actions-start .text=${h} title=${h ?? _}></calcite-action>${p}</calcite-flow-item>`)}</calcite-flow>`;
   }

package/dist/components/arcgis-feature-relationship/customElement.js

@@ -8,7 +8,7 @@ import { renderingSanitizer as O } from "@arcgis/core/applications/Components/sa
 import { isRelatableFeatureSupportedLayer as W, findRelatedLayer as Z } from "@arcgis/core/applications/Components/featureUtils.js";
 import { substitute as z, formatNumber as V } from "@arcgis/core/intl.js";
 import { watch as g, on as G } from "@arcgis/core/core/reactiveUtils.js";
-import { o as J } from "../../chunks/feature-utils.js";
+import { p as J } from "../../chunks/feature-utils.js";
 import M from "@arcgis/core/core/Collection.js";
 import S from "@arcgis/core/rest/support/RelationshipQuery.js";
 import { ignoreAbortErrors as R } from "@arcgis/core/core/promiseUtils.js";

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

@@ -14,7 +14,7 @@ import { watch as r } from "@arcgis/core/core/reactiveUtils.js";
 import { t as j, z as G } from "../../chunks/action-utils.js";
 import { stripHTML as V } from "@arcgis/core/applications/Components/stringUtils.js";
 import E from "@arcgis/core/core/Collection.js";
-import { g as q } from "../../chunks/feature-utils.js";
+import { h as q } from "../../chunks/feature-utils.js";
 import { renderingSanitizer as F } from "@arcgis/core/applications/Components/sanitizerUtils.js";
 import { initializeProjection as W } from "@arcgis/core/applications/Components/featureUtils.js";
 import X from "@arcgis/core/support/actions/ActionButton.js";

package/dist/components/arcgis-features-next/customElement.js

@@ -8,9 +8,8 @@ import z from "@arcgis/core/popup/FeatureContentCollection.js";
 import { LitElement as P, createEvent as x, renderElement as V, nothing as h, safeClassMap as y } from "@arcgis/lumina";
 import { useDirection as Z, usePropertyChange as U, bypassReadOnly as k } from "@arcgis/lumina/controllers";
 import { classes as I } from "@arcgis/toolkit/dom";
-import { slotChangeHasContent as S } from "@arcgis/toolkit/dom/slots";
+import { slotChangeHasContent as L } from "@arcgis/toolkit/dom/slots";
 import { createRef as w, ref as f } from "lit/directives/ref.js";
-import { g as L } from "../../chunks/feature-utils.js";
 import { initializeProjection as K } from "@arcgis/core/applications/Components/featureUtils.js";
 import { t as j, z as G } from "../../chunks/action-utils.js";
 import { m as q } from "../../chunks/useViewModel.js";
@@ -20,8 +19,9 @@ import { substitute as d, formatNumber as C } from "@arcgis/core/intl.js";
 import { u as W } from "../../chunks/useT9n.js";
 import { when as X, watch as u } from "@arcgis/core/core/reactiveUtils.js";
 import { getGraphicOriginTitle as J } from "@arcgis/core/graphic/getGraphicOriginTitle.js";
-import { a as R } from "../../chunks/maybe.js";
+import { a as S } from "../../chunks/maybe.js";
 import { b as Q, a as Y, c as ee } from "../../chunks/keyboard-utils.js";
+import { g as R } from "../../chunks/feature-utils.js";
 const te = B`:host{display:flex;overflow:hidden;flex:1 1 auto}.root{--calcite-color-background: var(--calcite-color-foreground-1);display:flex;overflow:hidden;flex:1 1 auto;flex-direction:column}.root img{image-orientation:from-image}.flow-item-collapsed{--calcite-flow-item-header-border-block-end: none}.container{display:flex;flex:1 1 auto;background-color:var(--calcite-color-foreground-1)}.container calcite-list{width:100%}.container:not(:empty,.content-hidden){padding:var(--arcgis-internal-padding-md, var(--calcite-spacing-md))}.root .arcgis-feature,.root .arcgis-feature-relationship,.root .arcgis-feature-utility-network-associations{background-color:transparent}.heading{word-break:break-word;word-wrap:break-word}.header,.footer{display:flex;align-items:center;justify-content:flex-end;background-color:var(--calcite-color-foreground-1)}.footer{flex:1}.pagination-text{padding-inline:var(--calcite-spacing-sm);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size-sm)}.loader{align-self:center;padding-inline:var(--calcite-spacing-lg)}.pagination-action-bar{flex:1}.pagination-menu-button{padding-inline:var(--calcite-spacing-xxs);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3)}.icon{display:inline-block;flex:0 0 var(--calcite-spacing-lg);width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.action-image{flex:0 0 var(--calcite-spacing-lg);background-position:50% 50%;background-repeat:no-repeat;background-size:contain;width:var(--calcite-spacing-lg);height:var(--calcite-spacing-lg)}.content-feature{--calcite-flow-item-footer-padding: 0;--calcite-flow-header-top-space: 0}.feature-menu-observer{position:relative;bottom:var(--calcite-spacing-xxl);z-index:2;text-align:center}.action-exit{transform:scaleX(-1)}.flow-item-drill-in{--calcite-flow-item-footer-padding: 0}.diagnostics-notice{padding:var(--calcite-space-md)}`;
 function ie(v) {
   return v?.declaredClass.startsWith("esri.layers.") ?? !1;
@@ -42,7 +42,7 @@ class re extends P {
     }, this._featureMenuIntersectionObserver = new IntersectionObserver(this._featureMenuIntersectionObserverCallback, {
       root: window.document
     }), this._featureMenuIntersectionObserverNode = null, this._setFocusAnimationFrameId = null, this._setFocusAnimationFrameResolve = null, this._rootFlowItemNode = w(), this._featureMenuViewportNode = w(), this._actionBarMenuNode = w(), this._flowContainerNode = w(), this._aggregatedFeaturesComponent = w(), this.messages = W(), this._selectedFeatureComponent = w(), this._direction = Z(), this._cancelOpenRelatedFeature = () => {
-      this._openRelatedFeatureAbortController = R(this._openRelatedFeatureAbortController);
+      this._openRelatedFeatureAbortController = S(this._openRelatedFeatureAbortController);
     }, this._spinnerVisible = !1, this._spinnerVisibilityTimeout = null, this._openRelatedFeatureAbortController = null, this.flowItems = new D(), this._aggregatedFeatureCount = 0, this._selectedAggregatedFeatureIndex = -1, this._aggregatedFeaturesLoading = !1, this._hasActionsStartSlotContent = !1, this._hasActionsEndSlotContent = !1, this.viewModel = ae(this), this.actions = this.viewModel.actions, this.active = this.viewModel.active, this.autoDestroyDisabled = !1, this.focusTrapEnabled = !1, this.collapsed = !1, this.content = this.viewModel.content, this.diagnostics = this.viewModel.diagnostics, this.defaultPopupTemplateEnabled = this.viewModel.defaultPopupTemplateEnabled, this.effectiveHeading = this.viewModel.effectiveHeading, this.featureCount = this.viewModel.featureCount, this.featureMenuOpen = !1, this.featureNavigationTop = !1, this.features = this.viewModel.features, this.featuresPerPage = this.viewModel.featuresPerPage, this.featureItemAbilities = this.viewModel.featureItemAbilities, this.goToOverride = this.viewModel.goToOverride, this.headerActions = new D(), this.heading = this.viewModel.heading, this.headingLevel = 2, this.hideActionBar = !1, this.hideCloseButton = !1, this.hideFeatureMenuHeading = !1, this.hideFeatureNavigation = !1, this.hideFeatureListLayerTitle = !1, this.hideHeading = !1, this.hideSelectFeature = !1, this.hideSpinner = !1, this.hideContent = !1, this.chartAnimationDisabled = this.viewModel.featureItemAbilities?.chartAnimation, this.hideAttachmentsContent = this.viewModel.featureItemAbilities?.attachmentsContent, this.hideEmptyRelationshipContent = !1, this.hideCustomContent = this.viewModel.featureItemAbilities?.customContent, this.hideExpressionContent = !1, this.hideFieldsContent = this.viewModel.featureItemAbilities?.fieldsContent, this.hideMediaContent = this.viewModel.featureItemAbilities?.mediaContent, this.hideRelationshipContent = this.viewModel.featureItemAbilities?.relationshipContent, this.hideTextContent = this.viewModel.featureItemAbilities?.textContent, this.hideUtilityNetworkContent = this.viewModel.featureItemAbilities?.utilityNetworkAssociationsContent, this.hideLastEditedInfo = !1, this.highlightDisabled = this.viewModel.highlightEnabled, this.includeDefaultActionsDisabled = this.viewModel.includeDefaultActions, this.initialDisplayMode = this.viewModel.initialDisplayMode, this.location = this.viewModel.location, this.map = this.viewModel.map, this.open = this.viewModel.open, this.responsiveActionsEnabled = !1, this.selectedFeature = this.viewModel.selectedFeature, this.selectedFeatureIndex = this.viewModel.selectedFeatureIndex, this.showCollapseButton = !1, this.spatialReference = this.viewModel.spatialReference, this.state = this.viewModel.state, this.timeZone = this.viewModel.timeZone, this.updateLocationEnabled = this.viewModel.updateLocationEnabled, this.view = this.viewModel.view, this.arcgisPropertyChange = U()("active", "collapsed", "effectiveHeading", "featureCount", "featureMenuOpen", "features", "selectedDrillInFeature", "selectedFeature", "selectedFeatureComponent", "selectedFeatureIndex", "state", "open"), this.arcgisReady = x(), this.arcgisClose = x(), this.arcgisTriggerAction = x();
   }
   static {
@@ -148,6 +148,7 @@ class re extends P {
         this.hideSpinner,
         this.viewModel?.view,
         this.viewModel?.location,
+        this.viewModel?.pendingLocation,
         this.viewModel?.waitingForResult,
         this.viewModel?.open
       ], () => this._createSpinner(), { initial: !0 })
@@ -165,7 +166,7 @@ class re extends P {
     this._setFocusAnimationFrameId != null && (cancelAnimationFrame(this._setFocusAnimationFrameId), this._setFocusAnimationFrameId = null), this._resolveSetFocusAnimationFrame();
   }
   _cancelFetchingFeatures() {
-    this._fetchFeaturesController = R(this._fetchFeaturesController);
+    this._fetchFeaturesController = S(this._fetchFeaturesController);
   }
   _handleClose() {
     this.close(), this.arcgisClose.emit();
@@ -176,7 +177,7 @@ class re extends P {
       const i = s?.graphic;
       if (!i)
         return;
-      const a = L(i), n = ie(a) ? a : null;
+      const a = R(i), n = ie(a) ? a : null;
       let r = t.get(n);
       r || (r = [], t.set(n, r)), r.push(s);
     }), t;
@@ -268,8 +269,8 @@ class re extends P {
     e.disabled || (e?.type === "toggle" && (e.value = !e.value), j(e, this.viewModel), this.arcgisTriggerAction.emit({ action: e }));
   }
   _viewScaleChange() {
-    const { selectedFeature: e } = this;
-    !e?.isAggregate || se(L(e)) !== "cluster" || (this.viewModel.aggregatedFeaturesEnabled = !1, this.open = !1, this.clear());
+    const { selectedFeature: e } = this, t = R(e);
+    !e?.isAggregate || se(t) !== "cluster" || (this.viewModel.aggregatedFeaturesEnabled = !1, this.open = !1, this.clear());
   }
   _viewChange() {
     this.viewModel.clear(), this.open = !1, this._aggregatedFeatureCount = 0, this._removeFlowItems();
@@ -307,10 +308,10 @@ class re extends P {
     return !this.hideHeading && e ? e : "";
   }
   _handleActionsStartSlotChange(e) {
-    this._hasActionsStartSlotContent = S(e);
+    this._hasActionsStartSlotContent = L(e);
   }
   _handleActionsEndSlotChange(e) {
-    this._hasActionsEndSlotContent = S(e);
+    this._hasActionsEndSlotContent = L(e);
   }
   _removeSpinner(e) {
     e?.manager?.component?.extraContent?.remove(this._spinnerEl), this._spinnerEl = void 0;
@@ -325,7 +326,7 @@ class re extends P {
   }
   _createSpinner() {
     const e = this.referenceElement;
-    e && (this._removeSpinner(e), this._spinnerEl = V(o`<arcgis-spinner .label=${this.messages.loading ?? ""} .trackLocation=${this._getSpinnerTrackLocation()} .location=${this.viewModel?.location ?? void 0} .referenceElement=${e} .view=${this.viewModel?.view ?? void 0}></arcgis-spinner>`), e.manager?.component?.extraContent?.add(this._spinnerEl));
+    e && (this._removeSpinner(e), this._spinnerEl = V(o`<arcgis-spinner .label=${this.messages.loading ?? ""} .trackLocation=${this._getSpinnerTrackLocation()} .location=${this.viewModel?.pendingLocation ?? this.viewModel?.location ?? void 0} .referenceElement=${e} .view=${this.viewModel?.view ?? void 0}></arcgis-spinner>`), e.manager?.component?.extraContent?.add(this._spinnerEl));
   }
   render() {
     return o`<div class="root">${this._renderContentContainer()}</div>`;

package/dist/components/arcgis-link-chart/customElement.d.ts

@@ -53,6 +53,12 @@ export interface DeclareCssProperties {
   "--arcgis-table-row-background-color": "*";
   /** _Since 5.1_ Specifies the background color for alternate table rows. */
   "--arcgis-table-row-alt-background-color": "*";
+  /** _Since 5.2_ Specifies the outer border color of the focus region. */
+  "--arcgis-focus-region-outer-border-color": "*";
+  /** _Since 5.2_ Specifies the inner border color of the focus region. */
+  "--arcgis-focus-region-inner-border-color": "*";
+  /** _Since 5.2_ Specifies the border width of the focus region. */
+  "--arcgis-focus-region-border-width": "*";
 }
 }
 
@@ -293,16 +299,35 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   accessor fatalError: Error<any> | null | undefined;
   /**
-   * The screen rectangle of the active focus region, or `null` when disabled.
+   * The screen rectangle of the active focus region, or `null` when [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionEnabled) is `false`.
+   * This screen rectangle represents the area of the view that is currently in focus and can be used with methods that require a screen rectangle as input, such as `hitTest()`.
+   *
+   * | Action | Keyboard Shortcut / Property |
+   * |--------|----------------------------|
+   * | Enable or disable focus region | Use the `Shift` + `Alt`/`Option` + `O` keyboard shortcut while the view component is in focus or set the [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionEnabled) property to `true` or `false`. |
+   * | Resize focus region | Use the `Shift` + `Alt`/`Option` + Up/Down arrow keys while the focus region is enabled. |
+   * | Open the [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) for features in the focus region | Press `Enter` or `Spacebar` while the focus region is enabled. |
+   *
+   * **Notes:** 
+   * - To know when this focus region is selected, listen for the [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#event-arcgisViewFocusRegionSelect) event. The default behavior of the popup component opening with features in the focus region can be prevented by calling `event.preventDefault()` within the event handler.
+   * - The styling of the focus region can be customized using the [--arcgis-focus-region-outer-border-color](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#--arcgis-focus-region-outer-border-color), [--arcgis-focus-region-inner-border-color](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#--arcgis-focus-region-inner-border-color), and [--arcgis-focus-region-border-width](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#--arcgis-focus-region-border-width) CSS variables.
+   * -  When the [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionEnabled) is `true`, the opened [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupElement) or slotted [popup component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) will be docked with the dock button hidden by default to prevent it from overlapping the focus region.
    *
    * @since 5.2
+   * @see [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionEnabled)
+   * @see [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#event-arcgisViewFocusRegionSelect)
    */
   get focusRegion(): LinkChartView["focusRegion"];
   /**
-   * Indicates whether the focus region is enabled.
+   * Indicates whether the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegion) is enabled. Set this property to `true` to show the centered focus region, or `false` to hide it.
+   * The focus region can also be enabled/disabled by focusing on the ArcgisLinkChart component and pressing the `Shift` + `Alt`/`Option` + `O` keyboard shortcut.
+   *
+   * **Note:** When the focus region is enabled, the [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupElement) or slotted [popup component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) will be docked with the dock button hidden by default to prevent it from overlapping the focus region.
    *
    * @default false
    * @since 5.2
+   * @see [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegion)
+   * @see [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#event-arcgisViewFocusRegionSelect)
    */
   accessor focusRegionEnabled: boolean;
   /**
@@ -936,9 +961,27 @@ export abstract class ArcgisLinkChart extends LitElement {
   /** Fires during a pointer drag on the view. */
   readonly arcgisViewDrag: import("@arcgis/lumina").TargetedEvent<this, DragEvent>;
   /**
-   * Fires when the focus region is selected. Call `event.detail.preventDefault()` to suppress the default popup.
+   * Fires when the focus region is selected using the `Enter` or `Space` key. Use this event to react to the selection of the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegion) via keyboard input and perform any necessary actions based on that selection, such as performing a `hitTest()` on the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegion) and passing the returned graphics to the [selection toolbar](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-selection-toolbar/).
+   *           
+   * Call `event.detail.preventDefault()` to suppress the default behavior of the [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) opening with the features in the focus region.
    *
    * @since 5.2
+   * @see [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegion)
+   * @see [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionEnabled)
+   * @example
+   * ```js
+   * viewElement.addEventListener("arcgisViewFocusRegionSelect", async (event) => {
+   *   // prevent the default popup from appearing
+   *   event.detail.preventDefault();
+   *   // get the focus region and fetch the popup features for it
+   *   const focusRegion = viewElement.focusRegion;
+   *   const generator = await viewElement.fetchPopupFeatures(focusRegion, {
+   *     pointerType: event.detail.pointerType,
+   *   });
+   *   // process the features as needed
+   *   const features = await Array.fromAsync(generator);
+   * });
+   * ```
    */
   readonly arcgisViewFocusRegionSelect: import("@arcgis/lumina").TargetedEvent<this, FocusRegionSelectEvent>;
   /** Fires during a pointer drag on the view. */

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

@@ -57,6 +57,12 @@ export interface DeclareCssProperties {
   "--arcgis-table-row-background-color": "*";
   /** _Since 5.1_ Specifies the background color for alternate table rows. */
   "--arcgis-table-row-alt-background-color": "*";
+  /** _Since 5.2_ Specifies the outer border color of the focus region. */
+  "--arcgis-focus-region-outer-border-color": "*";
+  /** _Since 5.2_ Specifies the inner border color of the focus region. */
+  "--arcgis-focus-region-inner-border-color": "*";
+  /** _Since 5.2_ Specifies the border width of the focus region. */
+  "--arcgis-focus-region-border-width": "*";
 }
 }
 
@@ -452,16 +458,35 @@ export abstract class ArcgisMap extends LitElement {
    */
   accessor floors: Collection<string>;
   /**
-   * The screen rectangle of the active focus region, or `null` when disabled.
+   * The screen rectangle of the active focus region, or `null` when [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegionEnabled) is `false`.
+   * This screen rectangle represents the area of the view that is currently in focus and can be used with methods that require a screen rectangle as input, such as `hitTest()`.
+   *
+   * | Action | Keyboard Shortcut / Property |
+   * |--------|----------------------------|
+   * | Enable or disable focus region | Use the `Shift` + `Alt`/`Option` + `O` keyboard shortcut while the view component is in focus or set the [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegionEnabled) property to `true` or `false`. |
+   * | Resize focus region | Use the `Shift` + `Alt`/`Option` + Up/Down arrow keys while the focus region is enabled. |
+   * | Open the [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) for features in the focus region | Press `Enter` or `Spacebar` while the focus region is enabled. |
+   *
+   * **Notes:** 
+   * - To know when this focus region is selected, listen for the [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#event-arcgisViewFocusRegionSelect) event. The default behavior of the popup component opening with features in the focus region can be prevented by calling `event.preventDefault()` within the event handler.
+   * - The styling of the focus region can be customized using the [--arcgis-focus-region-outer-border-color](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#--arcgis-focus-region-outer-border-color), [--arcgis-focus-region-inner-border-color](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#--arcgis-focus-region-inner-border-color), and [--arcgis-focus-region-border-width](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#--arcgis-focus-region-border-width) CSS variables.
+   * -  When the [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegionEnabled) is `true`, the opened [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupElement) or slotted [popup component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) will be docked with the dock button hidden by default to prevent it from overlapping the focus region.
    *
    * @since 5.2
+   * @see [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegionEnabled)
+   * @see [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#event-arcgisViewFocusRegionSelect)
    */
   get focusRegion(): MapView["focusRegion"];
   /**
-   * Indicates whether the focus region is enabled.
+   * Indicates whether the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegion) is enabled. Set this property to `true` to show the centered focus region, or `false` to hide it.
+   * The focus region can also be enabled/disabled by focusing on the ArcgisMap component and pressing the `Shift` + `Alt`/`Option` + `O` keyboard shortcut.
+   *
+   * **Note:** When the focus region is enabled, the [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupElement) or slotted [popup component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) will be docked with the dock button hidden by default to prevent it from overlapping the focus region.
    *
    * @default false
    * @since 5.2
+   * @see [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegion)
+   * @see [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#event-arcgisViewFocusRegionSelect)
    */
   accessor focusRegionEnabled: boolean;
   /** Gamepad input specific configuration settings. */
@@ -1309,9 +1334,27 @@ export abstract class ArcgisMap extends LitElement {
   /** Fires during a pointer drag on the view. */
   readonly arcgisViewDrag: import("@arcgis/lumina").TargetedEvent<this, DragEvent>;
   /**
-   * Fires when the focus region is selected. Call `event.detail.preventDefault()` to suppress the default popup.
+   * Fires when the focus region is selected using the `Enter` or `Space` key. Use this event to react to the selection of the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegion) via keyboard input and perform any necessary actions based on that selection, such as performing a `hitTest()` on the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegion) and passing the returned graphics to the [selection toolbar](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-selection-toolbar/).
+   *           
+   * Call `event.detail.preventDefault()` to suppress the default behavior of the [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) opening with the features in the focus region.
    *
    * @since 5.2
+   * @see [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegion)
+   * @see [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#focusRegionEnabled)
+   * @example
+   * ```js
+   * viewElement.addEventListener("arcgisViewFocusRegionSelect", async (event) => {
+   *   // prevent the default popup from appearing
+   *   event.detail.preventDefault();
+   *   // get the focus region and fetch the popup features for it
+   *   const focusRegion = viewElement.focusRegion;
+   *   const generator = await viewElement.fetchPopupFeatures(focusRegion, {
+   *     pointerType: event.detail.pointerType,
+   *   });
+   *   // process the features as needed
+   *   const features = await Array.fromAsync(generator);
+   * });
+   * ```
    */
   readonly arcgisViewFocusRegionSelect: import("@arcgis/lumina").TargetedEvent<this, FocusRegionSelectEvent>;
   /** Fires after holding either a mouse button or a single finger on the view for a short amount of time. */

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

@@ -61,6 +61,12 @@ export interface DeclareCssProperties {
   "--arcgis-table-row-background-color": "*";
   /** _Since 5.1_ Specifies the background color for alternate table rows. */
   "--arcgis-table-row-alt-background-color": "*";
+  /** _Since 5.2_ Specifies the outer border color of the focus region. */
+  "--arcgis-focus-region-outer-border-color": "*";
+  /** _Since 5.2_ Specifies the inner border color of the focus region. */
+  "--arcgis-focus-region-inner-border-color": "*";
+  /** _Since 5.2_ Specifies the border width of the focus region. */
+  "--arcgis-focus-region-border-width": "*";
 }
 }
 
@@ -437,16 +443,35 @@ export abstract class ArcgisScene extends LitElement {
    */
   accessor focusAreas: FocusAreas;
   /**
-   * The screen rectangle of the active focus region, or `null` when disabled.
+   * The screen rectangle of the active focus region, or `null` when [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#focusRegionEnabled) is `false`.
+   * This screen rectangle represents the area of the view that is currently in focus and can be used with methods that require a screen rectangle as input, such as `hitTest()`.
+   *
+   * | Action | Keyboard Shortcut / Property |
+   * |--------|----------------------------|
+   * | Enable or disable focus region | Use the `Shift` + `Alt`/`Option` + `O` keyboard shortcut while the view component is in focus or set the [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#focusRegionEnabled) property to `true` or `false`. |
+   * | Resize focus region | Use the `Shift` + `Alt`/`Option` + Up/Down arrow keys while the focus region is enabled. |
+   * | Open the [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) for features in the focus region | Press `Enter` or `Spacebar` while the focus region is enabled. |
+   *
+   * **Notes:** 
+   * - To know when this focus region is selected, listen for the [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#event-arcgisViewFocusRegionSelect) event. The default behavior of the popup component opening with features in the focus region can be prevented by calling `event.preventDefault()` within the event handler.
+   * - The styling of the focus region can be customized using the [--arcgis-focus-region-outer-border-color](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#--arcgis-focus-region-outer-border-color), [--arcgis-focus-region-inner-border-color](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#--arcgis-focus-region-inner-border-color), and [--arcgis-focus-region-border-width](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#--arcgis-focus-region-border-width) CSS variables.
+   * -  When the [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#focusRegionEnabled) is `true`, the opened [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popupElement) or slotted [popup component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) will be docked with the dock button hidden by default to prevent it from overlapping the focus region.
    *
    * @since 5.2
+   * @see [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#focusRegionEnabled)
+   * @see [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#event-arcgisViewFocusRegionSelect)
    */
   get focusRegion(): SceneView["focusRegion"];
   /**
-   * Indicates whether the focus region is enabled.
+   * Indicates whether the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#focusRegion) is enabled. Set this property to `true` to show the centered focus region, or `false` to hide it.
+   * The focus region can also be enabled/disabled by focusing on the ArcgisScene component and pressing the `Shift` + `Alt`/`Option` + `O` keyboard shortcut.
+   *
+   * **Note:** When the focus region is enabled, the [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popupElement) or slotted [popup component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) will be docked with the dock button hidden by default to prevent it from overlapping the focus region.
    *
    * @default false
    * @since 5.2
+   * @see [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#focusRegion)
+   * @see [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#event-arcgisViewFocusRegionSelect)
    */
   accessor focusRegionEnabled: boolean;
   /** Gamepad input specific configuration settings. */
@@ -1206,9 +1231,27 @@ export abstract class ArcgisScene extends LitElement {
    */
   readonly arcgisViewDrag: import("@arcgis/lumina").TargetedEvent<this, DragEvent>;
   /**
-   * Fires when the focus region is selected. Call `event.detail.preventDefault()` to suppress the default popup.
+   * Fires when the focus region is selected using the `Enter` or `Space` key. Use this event to react to the selection of the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#focusRegion) via keyboard input and perform any necessary actions based on that selection, such as performing a `hitTest()` on the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#focusRegion) and passing the returned graphics to the [selection toolbar](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-selection-toolbar/).
+   *           
+   * Call `event.detail.preventDefault()` to suppress the default behavior of the [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) opening with the features in the focus region.
    *
    * @since 5.2
+   * @see [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#focusRegion)
+   * @see [focusRegionEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#focusRegionEnabled)
+   * @example
+   * ```js
+   * viewElement.addEventListener("arcgisViewFocusRegionSelect", async (event) => {
+   *   // prevent the default popup from appearing
+   *   event.detail.preventDefault();
+   *   // get the focus region and fetch the popup features for it
+   *   const focusRegion = viewElement.focusRegion;
+   *   const generator = await viewElement.fetchPopupFeatures(focusRegion, {
+   *     pointerType: event.detail.pointerType,
+   *   });
+   *   // process the features as needed
+   *   const features = await Array.fromAsync(generator);
+   * });
+   * ```
    */
   readonly arcgisViewFocusRegionSelect: import("@arcgis/lumina").TargetedEvent<this, FocusRegionSelectEvent>;
   /**

package/dist/components/arcgis-time-bar/customElement.d.ts

@@ -296,6 +296,7 @@ export abstract class ArcgisTimeBar extends LitElement {
           dateOnly?: string | undefined;
       } | undefined;
       from?: string | undefined;
+      lockTimeWindow?: string | undefined;
       loop?: string | undefined;
       mode?: string | undefined;
       modeDescription?: string | undefined;
@@ -345,6 +346,7 @@ export abstract class ArcgisTimeBar extends LitElement {
       unit?: string | undefined;
       unitPrompt?: string | undefined;
       units?: string | undefined;
+      unlockTimeWindow?: string | undefined;
   };
   /** @internal */
   protected readonly messages: {
@@ -364,6 +366,7 @@ export abstract class ArcgisTimeBar extends LitElement {
           dateOnly: string;
       };
       from: string;
+      lockTimeWindow: string;
       loop: string;
       mode: string;
       modeDescription: string;
@@ -413,6 +416,7 @@ export abstract class ArcgisTimeBar extends LitElement {
       unit: string;
       unitPrompt: string;
       units: string;
+      unlockTimeWindow: string;
   } & T9nMeta<{
       componentLabel: string;
       count: string;
@@ -430,6 +434,7 @@ export abstract class ArcgisTimeBar extends LitElement {
           dateOnly: string;
       };
       from: string;
+      lockTimeWindow: string;
       loop: string;
       mode: string;
       modeDescription: string;
@@ -479,6 +484,7 @@ export abstract class ArcgisTimeBar extends LitElement {
       unit: string;
       unitPrompt: string;
       units: string;
+      unlockTimeWindow: string;
   }>;
   /**
    * The `arcgis-time-bar` mode. The mode determines how the time extent is calculated based on the position of the thumb(s)

package/dist/components/arcgis-time-bar-slider/customElement.d.ts

@@ -153,6 +153,13 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
    * 
    */
   accessor autoDestroyDisabled: boolean;
+  /**
+   * When `true` and the time bar is in `time-window` mode, users will not be able to adjust individual thumbs. The thumbs will maintain a finite stop separation.
+   * This ensures that the time window behaves as a single unit rather than allowing individual thumbs to be moved independently.
+   *
+   * @default false
+   */
+  accessor lockTimeWindow: boolean;
   accessor messages: {
       componentLabel: string;
       count: string;
@@ -170,6 +177,7 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
           dateOnly: string;
       };
       from: string;
+      lockTimeWindow: string;
       loop: string;
       mode: string;
       modeDescription: string;
@@ -219,6 +227,7 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
       unit: string;
       unitPrompt: string;
       units: string;
+      unlockTimeWindow: string;
   } | undefined;
   /**
    * Defines how and when popovers are displayed for the slider's thumb or range.
@@ -229,6 +238,14 @@ export abstract class ArcgisTimeBarSlider extends LitElement {
    * @default "none"
    */
   accessor popoverDisplay: PopoverDisplay;
+  /**
+   * When `true`, the `arcgis-time-bar-slider` will display a button to toggle the value of the `lockTimeWindow` property.
+   * The button will appear depressed when `lockTimeWindow` is `true`.
+   * The button will appear disabled when the mode is not `time-window`.
+   *
+   * @default false
+   */
+  accessor showLockTimeWindow: boolean;
   /**
    * When `true`, displays a label for the end date of the slider.
    * The contents of this label can be customized by providing a slotted element in the "max" slot.