@arcgis/map-components 5.2.0-next.16 → 5.2.0-next.160

package/dist/components/arcgis-slider-scale-range/customElement.d.ts

@@ -7,11 +7,19 @@ import type SubtypeSublayer from "@arcgis/core/layers/support/SubtypeSublayer.js
 import type LinkChartView from "@arcgis/core/views/LinkChartView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisReferenceElement, IconName } from "../types.js";
-import type { SupportedRegion } from "./spriteSheetsUtils.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**
- * The Scale Range Slider component allows the user to set a minimum and maximum scale based on named scale ranges. When a layer is provided, the component's minScale and maxScale properties will be set to the scale range of the layer.
+ * The supported lowercase [ISO 3166-1 alpha-2 code](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes)region codes for scale preview thumbnails.
+ * The [region](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-scale-range/#region) property also accepts uppercase versions of these codes.
+ *
+ * @since 5.2
+ */
+export type Region = "ae" | "ar" | "at" | "au" | "be" | "bg" | "bo" | "br" | "ca" | "ch" | "ci" | "cl" | "cn" | "co" | "cr" | "cz" | "de" | "dk" | "ee" | "eg" | "es" | "fi" | "fr" | "gb" | "gl" | "gr" | "gt" | "hk" | "id" | "ie" | "il" | "in" | "iq" | "is" | "it" | "jp" | "ke" | "kr" | "kw" | "li" | "lt" | "lu" | "lv" | "ma" | "mg" | "ml" | "mo" | "mx" | "my" | "ni" | "nl" | "no" | "nz" | "pe" | "pl" | "pr" | "pt" | "ro" | "ru" | "rw" | "se" | "sg" | "sk" | "sr" | "sv" | "th" | "tn" | "tw" | "us" | "ve" | "vi" | "za";
+
+/**
+ * The Scale Range Slider component allows the user to set a minimum and maximum scale based on named scale ranges.
+ * When a layer is provided, the component's minScale and maxScale properties will be set to the scale range of the layer.
  *
  * @since 5.1
  */
@@ -24,10 +32,19 @@ export abstract class ArcgisSliderScaleRange extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-slider-scale-range auto-destroy-disabled></arcgis-slider-scale-range>
+   * ```
+   *
+   * ```js
+   * sliderScaleRangeElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
-   * When true, the component is visually withdrawn and cannot receive user interaction.
+   * When true, the component is visually de-emphasized and does not accept user interaction.
    *
    * @default false
    */
@@ -231,9 +248,22 @@ export abstract class ArcgisSliderScaleRange extends LitElement {
   /**
    * The region that the scale thumbnails will focus on.
    * Each region comes from the [ISO 3166-1 alpha-2 code](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes).
-   * See [SupportedRegion](https://developers.arcgis.com/javascript/latest/references/core/widgets/ScaleRangeSlider/types/#SupportedRegion) for the list of regions that are currently supported.
+   * Both lowercase and uppercase region codes are supported.
+   */
+  accessor region: Region | Uppercase<Region> | undefined;
+  /**
+   * If an [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/) is associated with the component and this property
+   * is set to `true`, the current scale indicator will be represented as a highlighted range of the slider track. The width of the indicator will increase
+   * as the [camera's tilt](https://developers.arcgis.com/javascript/latest/references/core/Camera/#tilt) approaches 90 degrees. If this property is set to `false`,
+   * a small caret will render under the track indicating the current scale instead.
+   *
+   * > [!WARNING]
+   * > This property is not supported when the component is used in 2D maps.
+   *
+   * @default false
+   * @since 5.2
    */
-  accessor region: SupportedRegion | undefined;
+  accessor showScaleRangeIndicator: boolean;
   /**
    * Indicates whether the world scale value is shown in the scale menu.
    *
@@ -247,8 +277,8 @@ export abstract class ArcgisSliderScaleRange extends LitElement {
    */
   get state(): "disabled" | "ready";
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-slider-scale-range component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-slider-scale-range component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: LinkChartView | MapView | SceneView | undefined;
   /** Permanently destroy the component. */
@@ -259,7 +289,7 @@ export abstract class ArcgisSliderScaleRange extends LitElement {
   readonly arcgisInput: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
   readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state" | "minScale" | "maxScale"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     arcgisChange: ArcgisSliderScaleRange["arcgisChange"]["detail"];

package/dist/components/arcgis-slider-scale-range/customElement.js

@@ -1,14 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { g as x, c as _ } from "../../chunks/runtime.js";
+import { g as x, c as g } from "../../chunks/runtime.js";
 import { keyed as p } from "lit/directives/keyed.js";
-import { LitElement as g, createEvent as d, safeStyleMap as u, nothing as M } from "@arcgis/lumina";
-import { watch as f } from "@arcgis/core/core/reactiveUtils.js";
-import { u as v } from "../../chunks/useView.js";
-import { u as y } from "../../chunks/useT9n.js";
-import { css as b, html as o } from "lit";
-import { usePropertyChange as $ } from "@arcgis/lumina/controllers";
-import { createRef as L, ref as w } from "lit/directives/ref.js";
-import R from "@arcgis/core/portal/Portal.js";
+import { LitElement as _, createEvent as d, safeClassMap as v, safeStyleMap as f, nothing as M } from "@arcgis/lumina";
+import { watch as u } from "@arcgis/core/core/reactiveUtils.js";
+import { u as y } from "../../chunks/useView.js";
+import { u as $ } from "../../chunks/useT9n.js";
+import { css as b, html as r } from "lit";
+import { usePropertyChange as L } from "@arcgis/lumina/controllers";
+import { createRef as w, ref as R } from "lit/directives/ref.js";
+import I from "@arcgis/core/portal/Portal.js";
 const h = /* @__PURE__ */ new Set([
   "ar-iq",
   "ar-kw",
@@ -112,7 +112,7 @@ const h = /* @__PURE__ */ new Set([
   sv: "se",
   th: "th",
   zh: "cn"
-}, P = b`:host{display:block;width:310px;max-width:100%}.slider{height:50px}.scale-indicator-container{position:relative;width:100%;margin-top:2px}.scale-indicator-icon{transform:scale(.8,1.7);margin-left:-6px;width:1px;--calcite-icon-color: var(--calcite-color-text-3)}.scale-menu-list{max-height:220px;overflow-y:auto}.scale-menu-input{max-width:120px}.scale-menu-button-container{display:flex;direction:ltr;justify-content:space-between}.scale-menu-button{min-width:0}:dir(rtl) .scale-menu-button-container>*{direction:rtl}.preview-container{padding:6px;background-color:var(--calcite-color-foreground-1);box-shadow:0 1px 2px #0000004d}`, l = [
+}, k = b`:host{display:block;width:310px;max-width:100%}.slider{height:50px}.scale-indicator-container{position:relative;width:100%;margin-top:2px}.scale-indicator-container[slot=track-overlay]{position:absolute;inset:0;pointer-events:none;margin-top:0}.scale-indicator-icon{left:var(--arcgis-internal-scale-indicator-offset);transform:scale(.8,1.7);margin-left:-6px;width:1px;--calcite-icon-color: var(--calcite-color-text-3)}.scale-indicator-range{top:-1px;left:var(--arcgis-internal-scale-indicator-left);width:calc(var(--arcgis-internal-scale-indicator-right) - var(--arcgis-internal-scale-indicator-left));height:4px;background-color:oklch(from var(--calcite-color-brand) calc(l*1.5) c h);mask-image:linear-gradient(to right,transparent 0%,black 30%,black 70%,transparent 100%);pointer-events:none}.scale-menu-list{max-height:220px;overflow-y:auto}.scale-menu-input{max-width:120px}.scale-menu-button-container{display:flex;direction:ltr;justify-content:space-between}.scale-menu-button{min-width:0}:dir(rtl) .scale-menu-button-container>*{direction:rtl}.preview-container{padding:6px;background-color:var(--calcite-color-foreground-1);box-shadow:0 1px 2px #0000004d}`, l = [
   { id: "world", scale: 147914382, minScale: 147914382, maxScale: 1e8 },
   { id: "continent", scale: 5e7, minScale: 99999999, maxScale: 35e6 },
   { id: "countriesBig", scale: 25e6, minScale: 34999999, maxScale: 15e6 },
@@ -134,15 +134,15 @@ const h = /* @__PURE__ */ new Set([
   { id: "rooms", scale: 400, minScale: 400, maxScale: 101 },
   { id: "room", scale: 100, minScale: 100, maxScale: 0 }
 ];
-class I extends g {
+class P extends _ {
   constructor() {
-    super(...arguments), this.messages = y(), this._sliderRef = L(), this._activeMenu = null, this._customScaleSelected = null, this._portalRegion = null, this._layerMaxScaleLimit = l[l.length - 1].maxScale, this._layerMinScaleLimit = l[0].minScale, this.autoDestroyDisabled = !1, this.disabled = !1, this.hidePreview = !1, this.hideMaxScaleMenu = !1, this.hideMinScaleMenu = !1, this.icon = "actual-size", this.maxScale = 0, this.maxScaleLimit = l[l.length - 1].maxScale, this.minScale = 0, this.minScaleLimit = l[0].minScale, this.mode = "range", this.showWorldValue = !1, this.view = v(this), this.arcgisChange = d(), this.arcgisInput = d(), this.arcgisPropertyChange = $()("state", "minScale", "maxScale"), this.arcgisReady = d();
+    super(...arguments), this.messages = $(), this._sliderRef = w(), this._activeMenu = null, this._customScaleSelected = null, this._portalRegion = null, this._layerMaxScaleLimit = l[l.length - 1].maxScale, this._layerMinScaleLimit = l[0].minScale, this.autoDestroyDisabled = !1, this.disabled = !1, this.hidePreview = !1, this.hideMaxScaleMenu = !1, this.hideMinScaleMenu = !1, this.icon = "actual-size", this.maxScale = 0, this.maxScaleLimit = l[l.length - 1].maxScale, this.minScale = 0, this.minScaleLimit = l[0].minScale, this.mode = "range", this.showScaleRangeIndicator = !1, this.showWorldValue = !1, this.view = y(this), this.arcgisChange = d(), this.arcgisInput = d(), this.arcgisPropertyChange = L()("state", "minScale", "maxScale"), this.arcgisReady = d();
   }
   static {
-    this.properties = { _activeMenu: 16, _customScaleSelected: 16, _portalRegion: 16, _layerMaxScaleLimit: 16, _layerMinScaleLimit: 16, autoDestroyDisabled: 5, disabled: 7, hidePreview: 5, hideMaxScaleMenu: 5, hideMinScaleMenu: 5, icon: 1, label: 1, layer: 0, maxScale: 9, maxScaleLimit: 9, minScale: 9, minScaleLimit: 9, mode: 1, referenceElement: 1, region: 1, showWorldValue: 5, state: 32, view: 0 };
+    this.properties = { _activeMenu: 16, _customScaleSelected: 16, _portalRegion: 16, _layerMaxScaleLimit: 16, _layerMinScaleLimit: 16, autoDestroyDisabled: 5, disabled: 7, hidePreview: 5, hideMaxScaleMenu: 5, hideMinScaleMenu: 5, icon: 1, label: 1, layer: 0, maxScale: 9, maxScaleLimit: 9, minScale: 9, minScaleLimit: 9, mode: 1, referenceElement: 1, region: 1, showScaleRangeIndicator: 5, showWorldValue: 5, state: 32, view: 0 };
   }
   static {
-    this.styles = P;
+    this.styles = k;
   }
   get state() {
     const { view: e, layer: i } = this;
@@ -166,13 +166,16 @@ class I extends g {
     }) : (this._layerMinScaleLimit = l[0].minScale, this._layerMaxScaleLimit = l[l.length - 1].maxScale)), e.has("mode") && (this.mode === "max-scale-only" ? this.minScale = 0 : this.mode === "min-scale-only" && (this.maxScale = 0), e.get("mode") !== void 0 && this._syncLayerScale());
   }
   loaded() {
-    R.getDefault().load().then((i) => {
+    I.getDefault().load().then((i) => {
       const a = i.user?.culture ?? i.culture;
       a && (this._portalRegion = a.split("-")[1]?.toLowerCase() ?? null);
     }).catch(() => {
     }), this.manager.onLifecycle(() => [
-      f(() => this.view?.scale, () => this.requestUpdate(), { initial: !0 }),
-      f(() => ({
+      u(() => this.view?.scale, () => this.requestUpdate(), { initial: !0 }),
+      u(() => this.view?.type === "3d" ? this.view.camera?.tilt : void 0, () => {
+        this.showScaleRangeIndicator && this.requestUpdate();
+      }, { initial: !0 }),
+      u(() => ({
         // Layer type has loaded property, but Sublayer and SubtypeSublayer use loadStatus instead
         loaded: this.layer?.loadStatus === "loaded",
         ready: this.view?.ready
@@ -185,8 +188,8 @@ class I extends g {
           !("resampling" in this.layer) || this.layer.resampling || (this._layerMinScaleLimit = s[0].scale === 0 ? l[0].minScale : Math.min(l[0].minScale, s[0].scale), this._layerMaxScaleLimit = s[s.length - 1].scale);
         else {
           const n = this.layer && "maxScaleRange" in this.layer ? this.layer.maxScaleRange : null;
-          let r = 0, m = 0;
-          n && (r = n.minScale, m = n.maxScale), m !== 0 && (this._layerMaxScaleLimit = m), r !== 0 && (this._layerMinScaleLimit = r);
+          let o = 0, m = 0;
+          n && (o = n.minScale, m = n.maxScale), m !== 0 && (this._layerMaxScaleLimit = m), o !== 0 && (this._layerMinScaleLimit = o);
         }
         const c = this.layer;
         c && "minScale" in c && "maxScale" in c && (c.minScale !== 0 && this.minScale === 0 && (this.minScale = Math.min(c.minScale, this._interactiveMinScale)), c.maxScale !== 0 && this.maxScale === 0 && (this.maxScale = Math.max(c.maxScale, this._interactiveMaxScale)));
@@ -218,6 +221,10 @@ class I extends g {
     const i = e === "min" ? this._effectiveMinScale : this._effectiveMaxScale, a = Math.floor(this._mapScaleToSlider(i)), t = this.messages.scaleRangeLabels;
     return t ? t[l[a].id] : "";
   }
+  _getScaleRangeIndicatorWidth() {
+    const e = this.view?.type === "3d" ? this.view.camera?.tilt ?? 0 : 0, i = e <= 90 ? e : 180 - e;
+    return Math.min(33 + i / 90 * 30, 60);
+  }
   _getSpriteSheetFile() {
     if (this.region) {
       const a = this.region.toLowerCase(), t = `${this.messages._t9nLocale}-${a}`;
@@ -267,7 +274,7 @@ class I extends g {
     }
   }
   _mapScaleToSlider(e) {
-    const i = Math.min(l[0].minScale, Math.max(l[l.length - 1].maxScale, e)), a = l.findIndex((r) => i >= r.maxScale && i <= r.minScale), t = l[a], s = a, c = a + 0.9999;
+    const i = Math.min(l[0].minScale, Math.max(l[l.length - 1].maxScale, e)), a = l.findIndex((o) => i >= o.maxScale && i <= o.minScale), t = l[a], s = a, c = a + 0.9999;
     return t ? s + (i - t.minScale) * (c - s) / (t.maxScale - t.minScale) : 0;
   }
   _mapSliderToScale(e) {
@@ -282,22 +289,27 @@ class I extends g {
   }
   _renderScalePreviewPopover() {
     const e = this._renderScalePreview();
-    return this.hidePreview || !e ? null : o`<div slot=popover>${e}</div>`;
+    return this.hidePreview || !e ? null : r`<div slot=popover>${e}</div>`;
   }
   render() {
     const e = this._mapScaleToSlider(this._interactiveMinScale), i = this._mapScaleToSlider(this._interactiveMaxScale), a = this._sliderFullRangeMin, t = this._sliderFullRangeMax;
-    return o`<div><arcgis-slider class="slider" .disabled=${this.disabled} layout=horizontal .fillPlacement=${this.mode === "max-scale-only" ? "start" : this.mode === "min-scale-only" ? "end" : void 0} .fullRangeMin=${a < e ? a : void 0} .fullRangeMax=${t > i ? t : void 0} .max=${i} .min=${e} .labelFormatter=${(s, c, n) => n(Math.round(this._mapSliderToScale(s)))} .values=${this.mode === "max-scale-only" ? [this._mapScaleToSlider(this._effectiveMaxScale)] : this.mode === "min-scale-only" ? [this._mapScaleToSlider(this._effectiveMinScale)] : [this._mapScaleToSlider(this._effectiveMinScale), this._mapScaleToSlider(this._effectiveMaxScale)]} @arcgisInput=${this._handleSliderThumbDrag} ${w(this._sliderRef)}>${this._renderScalePreviewPopover()}${this.view?.scale != null && this._renderCurrentScaleIndicator(this.view.scale) || ""}</arcgis-slider><div class="scale-menu-button-container" slot=content-end>${this.mode !== "max-scale-only" && !this.hideMinScaleMenu ? [this._renderScaleMenuButtons("min"), this._renderScaleMenuPopover("min")] : o`<div></div>`}${this.mode !== "min-scale-only" && !this.hideMaxScaleMenu && [this._renderScaleMenuButtons("max"), this._renderScaleMenuPopover("max")] || ""}</div></div>`;
+    return r`<div><arcgis-slider class="slider" .disabled=${this.disabled} layout=horizontal .fillPlacement=${this.mode === "max-scale-only" ? "start" : this.mode === "min-scale-only" ? "end" : void 0} .fullRangeMin=${a < e ? a : void 0} .fullRangeMax=${t > i ? t : void 0} .max=${i} .min=${e} .labelFormatter=${(s, c, n) => n(Math.round(this._mapSliderToScale(s)))} .values=${this.mode === "max-scale-only" ? [this._mapScaleToSlider(this._effectiveMaxScale)] : this.mode === "min-scale-only" ? [this._mapScaleToSlider(this._effectiveMinScale)] : [this._mapScaleToSlider(this._effectiveMinScale), this._mapScaleToSlider(this._effectiveMaxScale)]} @arcgisInput=${this._handleSliderThumbDrag} ${R(this._sliderRef)}>${this._renderScalePreviewPopover()}${this.view?.scale != null && this._renderCurrentScaleIndicator(this.view.scale) || ""}</arcgis-slider><div class="scale-menu-button-container" slot=content-end>${this.mode !== "max-scale-only" && !this.hideMinScaleMenu ? [this._renderScaleMenuButtons("min"), this._renderScaleMenuPopover("min")] : r`<div></div>`}${this.mode !== "min-scale-only" && !this.hideMaxScaleMenu && [this._renderScaleMenuButtons("max"), this._renderScaleMenuPopover("max")] || ""}</div></div>`;
   }
   _renderCurrentScaleIndicator(e) {
-    const i = this._sliderFullRangeMin, t = this._sliderFullRangeMax - i, s = Math.min(100, Math.max(0, (this._mapScaleToSlider(e) - i) / t * 100));
-    return p("scale-indicator", o`<div class="scale-indicator-container" slot=content-end><div class="scale-indicator-icon" style=${u({
+    const i = this._sliderFullRangeMin, t = this._sliderFullRangeMax - i, s = this.view?.type === "3d" && this.showScaleRangeIndicator, c = Math.min(100, Math.max(0, (this._mapScaleToSlider(e) - i) / t * 100));
+    return p("scale-indicator", r`<div class="scale-indicator-container" .slot=${s ? "track-overlay" : "content-end"}><div class=${v(s ? "scale-indicator-range" : "scale-indicator-icon")} style=${f({
       position: "absolute",
-      left: `${s}%`
-    })} .title=${`${this.messages.currentScale} 1:${Math.round(e).toLocaleString(this.messages._t9nLocale)}`}><calcite-icon icon=caret-up scale=s></calcite-icon></div></div>`);
+      "--arcgis-internal-scale-indicator-offset": `${c}%`,
+      // calculate the intended position of each edge of the scale indicator and clamp to the slider track bounds
+      ...s ? {
+        "--arcgis-internal-scale-indicator-left": `max(0%, calc(${c}% - ${this._getScaleRangeIndicatorWidth() / 2}px))`,
+        "--arcgis-internal-scale-indicator-right": `min(100%, calc(${c}% + ${this._getScaleRangeIndicatorWidth() / 2}px))`
+      } : {}
+    })} .title=${`${this.messages.currentScale} 1:${Math.round(e).toLocaleString(this.messages._t9nLocale)}`}>${s ? null : r`<calcite-icon icon=caret-up scale=s></calcite-icon>`}</div></div>`);
   }
   _renderCustomScaleValue(e, i) {
     const a = Math.round(i).toString();
-    return o`<calcite-list-item .label=${this.messages?.featuredScaleLabels?.custom} .selected=${this._customScaleSelected === e} @calciteListItemSelect=${(t) => {
+    return r`<calcite-list-item .label=${this.messages?.featuredScaleLabels?.custom} .selected=${this._customScaleSelected === e} @calciteListItemSelect=${(t) => {
       const s = t.target.querySelector("calcite-input-number");
       this._handleCustomScaleInput(e, s?.value ?? ""), this._customScaleSelected = e;
     }}><calcite-input-number dir=ltr class="scale-menu-input" slot=content-end group-separator inputmode=numeric .max=${l[0].minScale} .min=${l[l.length - 1].maxScale} number-button-type=none .placeholder=${this.messages?.customScaleInputTooltip} prefix-text=1: scale=s step=1 .value=${a} @click=${(t) => t.stopPropagation()} @keydown=${(t) => {
@@ -305,10 +317,10 @@ class I extends g {
     }}></calcite-input-number></calcite-list-item>`;
   }
   _renderScaleMenuButtons(e) {
-    return o`<calcite-button .disabled=${this.disabled} class="scale-menu-button" .id=${`scale-menu-button-${e}`} icon-end=chevron-down scale=s .appearance=${this._activeMenu === e ? "outline" : "transparent"}>${this._getDropdownLabel(e)}</calcite-button>`;
+    return r`<calcite-button .disabled=${this.disabled} class="scale-menu-button" .id=${`scale-menu-button-${e}`} icon-end=chevron-down scale=s .appearance=${this._activeMenu === e ? "outline" : "transparent"}>${this._getDropdownLabel(e)}</calcite-button>`;
   }
   _renderScaleMenuPopover(e) {
-    return o`<calcite-popover auto-close .label=${`${e === "min" ? "Min" : "Max"} scale menu`} .referenceElement=${`scale-menu-button-${e}`} .placement=${e === "max" ? "bottom-end" : "bottom-start"} .open=${this._activeMenu === e} scale=s @calcitePopoverOpen=${() => this._activeMenu = e} @calcitePopoverClose=${() => {
+    return r`<calcite-popover auto-close .label=${`${e === "min" ? "Min" : "Max"} scale menu`} .referenceElement=${`scale-menu-button-${e}`} .placement=${e === "max" ? "bottom-end" : "bottom-start"} .open=${this._activeMenu === e} scale=s @calcitePopoverOpen=${() => this._activeMenu = e} @calcitePopoverClose=${() => {
       this._activeMenu === e && (this._activeMenu = null);
     }}>${this._renderScaleMenu(e)}</calcite-popover>`;
   }
@@ -316,24 +328,24 @@ class I extends g {
     const i = Math.floor(this._mapScaleToSlider(this._effectiveMaxScale)), a = Math.floor(this._mapScaleToSlider(this._effectiveMinScale)), t = e === "min" ? this._effectiveMinScale : this._effectiveMaxScale, s = this.messages.featuredScaleLabels;
     if (!s)
       return;
-    const c = Math.floor(this._mapScaleToSlider(this._interactiveMaxScale)), n = Math.floor(this._mapScaleToSlider(this._interactiveMinScale)), r = l.filter((m, S) => e === "min" ? S < i && S >= n : S > a && S <= c).map((m) => this._renderScaleMenuItem({
+    const c = Math.floor(this._mapScaleToSlider(this._interactiveMaxScale)), n = Math.floor(this._mapScaleToSlider(this._interactiveMinScale)), o = l.filter((m, S) => e === "min" ? S < i && S >= n : S > a && S <= c).map((m) => this._renderScaleMenuItem({
       scaleLabel: s[m.id],
       scaleValue: m.scale,
       isSelected: t === m.scale,
       valueVisible: m.id !== "world" || this.showWorldValue,
       type: e
     }));
-    return o`<calcite-list label="Scale Menu List" scale=s class="scale-menu-list" selection-appearance=icon selection-mode=single-persist>${this.view?.scale != null && this._renderCustomScaleValue(e, t) || ""}${this.view?.scale != null ? this._renderScaleMenuItem({
+    return r`<calcite-list label="Scale Menu List" scale=s class="scale-menu-list" selection-appearance=icon selection-mode=single-persist>${this._renderCustomScaleValue(e, t)}${this.view?.scale != null ? this._renderScaleMenuItem({
       scaleValue: this.view.scale,
       scaleLabel: s.current,
       isSelected: t === this.view.scale,
       valueVisible: !0,
       type: e
-    }) : null}${r}</calcite-list>`;
+    }) : null}${o}</calcite-list>`;
   }
   _renderScaleMenuItem(e) {
     const { scaleValue: i, scaleLabel: a, isSelected: t, valueVisible: s } = e, c = i === l[0].scale ? ` ${this.messages.aboveSuffix}` : i === l[l.length - 1].scale ? ` ${this.messages.belowSuffix}` : "";
-    return o`<calcite-list-item .label=${a} .selected=${t && this._customScaleSelected !== e.type} .description=${s ? `1:${Math.round(i).toLocaleString(this.messages._t9nLocale)}${c}` : void 0} @calciteListItemSelect=${() => {
+    return r`<calcite-list-item .label=${a} .selected=${t && this._customScaleSelected !== e.type} .description=${s ? `1:${Math.round(i).toLocaleString(this.messages._t9nLocale)}${c}` : void 0} @calciteListItemSelect=${() => {
       this._setScale(e.type, i), this._customScaleSelected = null;
     }}></calcite-list-item>`;
   }
@@ -341,8 +353,8 @@ class I extends g {
     const e = this._sliderRef.value?.activeValue;
     if (typeof e != "number")
       return null;
-    const i = Math.min(l.length - 1, Math.max(0, Math.floor(e))), a = 5, t = 128, s = t * (i % a), c = t * Math.floor(i / a), n = `-${s}px -${c}px`, r = this._getSpriteSheetFile();
-    return o`<div class="preview-container"><img src=${x(`./assets/slider-scale-range/images/${r}.avif`) ?? M} style=${u({
+    const i = Math.min(l.length - 1, Math.max(0, Math.floor(e))), a = 5, t = 128, s = t * (i % a), c = t * Math.floor(i / a), n = `-${s}px -${c}px`, o = this._getSpriteSheetFile();
+    return r`<div class="preview-container"><img src=${x(`./assets/slider-scale-range/images/${o}.avif`) ?? M} style=${f({
       display: "block",
       height: `${t}px`,
       width: `${t}px`,
@@ -351,7 +363,7 @@ class I extends g {
     })}></div>`;
   }
 }
-_("arcgis-slider-scale-range", I);
+g("arcgis-slider-scale-range", P);
 export {
-  I as ArcgisSliderScaleRange
+  P as ArcgisSliderScaleRange
 };

package/dist/components/arcgis-slider-scale-range/spriteSheetsUtils.d.ts

@@ -1,5 +1,10 @@
-export type SupportedRegion = LowerCaseRegion | UpperCaseRegion;
+import type { Region } from "./customElement.js";
 
-export type LowerCaseRegion = "ae" | "ar" | "at" | "au" | "be" | "bg" | "bo" | "br" | "ca" | "ch" | "ci" | "cl" | "cn" | "co" | "cr" | "cz" | "de" | "dk" | "ee" | "eg" | "es" | "fi" | "fr" | "gb" | "gl" | "gr" | "gt" | "hk" | "id" | "ie" | "il" | "in" | "iq" | "is" | "it" | "jp" | "ke" | "kr" | "kw" | "li" | "lt" | "lu" | "lv" | "ma" | "mg" | "ml" | "mo" | "mx" | "my" | "ni" | "nl" | "no" | "nz" | "pe" | "pl" | "pr" | "pt" | "ro" | "ru" | "rw" | "se" | "sg" | "sk" | "sr" | "sv" | "th" | "tn" | "tw" | "us" | "ve" | "vi" | "za";
+/** @deprecated Use [Region](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-scale-range/#Region) instead. */
+export type LowerCaseRegion = Region;
 
-export type UpperCaseRegion = Uppercase<LowerCaseRegion>;
+/** @deprecated Use `Uppercase<Region>` with [Region](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-scale-range/#Region) instead. */
+export type UpperCaseRegion = Uppercase<LowerCaseRegion>;
+
+/** @deprecated Use `Region | Uppercase<Region>` with [Region](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-slider-scale-range/#Region) instead. */
+export type SupportedRegion = LowerCaseRegion | UpperCaseRegion;

package/dist/components/arcgis-slider-size-legacy/customElement.d.ts

@@ -6,10 +6,9 @@ import type { ContinuousRendererResult } from "@arcgis/core/smartMapping/rendere
 import type { HistogramResult } from "@arcgis/core/smartMapping/statistics/types.js";
 import type { ArcgisReferenceElement, IconName } from "../types.js";
 import type { ThumbDragEvent, ThumbChangeEvent } from "@arcgis/core/widgets/Slider/types.js";
-import type { HistogramConfig, ZoomOptions } from "@arcgis/core/widgets/smartMapping/types.js";
+import type { HistogramConfig, SliderState, ZoomOptions } from "../slider-legacy/types.js";
 import type { LabelFormatFunction, InputParseFunction } from "@arcgis/core/widgets/types.js";
 import type { SizeSliderStyle } from "@arcgis/core/widgets/smartMapping/SizeSlider.js";
-import type { SmartMappingSliderBaseState } from "@arcgis/core/widgets/smartMapping/SmartMappingSliderBase.js";
 
 /**
  * > [!WARNING]
@@ -98,6 +97,15 @@ export abstract class ArcgisSliderSizeLegacy extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-slider-size-legacy auto-destroy-disabled></arcgis-slider-size-legacy>
+   * ```
+   *
+   * ```js
+   * sliderSizeLegacyElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
@@ -271,7 +279,7 @@ export abstract class ArcgisSliderSizeLegacy extends LitElement {
    */
   accessor sliderStyle: SizeSliderStyle;
   /** The current state of the component. */
-  get state(): SmartMappingSliderBaseState;
+  get state(): SliderState;
   /**
    * The size stops from the [SizeVariable](https://developers.arcgis.com/javascript/latest/references/core/renderers/visualVariables/SizeVariable/) to link to the slider.
    *
@@ -338,7 +346,7 @@ export abstract class ArcgisSliderSizeLegacy extends LitElement {
    * };
    * ```
    */
-  accessor zoomOptions: ZoomOptions | null | undefined;
+  accessor zoomOptions: null | undefined | ZoomOptions;
   /** Permanently destroy the component. */
   destroy(): Promise<void>;
   /**
@@ -391,7 +399,7 @@ export abstract class ArcgisSliderSizeLegacy extends LitElement {
   updateVisualVariable(sizeVariable: SizeVariable): null | undefined | SizeVariable;
   /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
   readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "histogramConfig" | "max" | "min" | "precision" | "sliderStyle" | "state" | "stops" | "zoomOptions"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires when a user changes the value of a thumb via the arrow keys or by keyboard editing of the label on the slider. */
   readonly arcgisThumbChange: import("@arcgis/lumina").TargetedEvent<this, ThumbChangeEvent>;

package/dist/components/arcgis-slider-size-legacy/customElement.js

@@ -5,7 +5,7 @@ import { m as o } from "../../chunks/useWidget.js";
 import { LitElement as l, createEvent as a } from "@arcgis/lumina";
 import { usePropertyChange as d } from "@arcgis/lumina/controllers";
 import { css as n } from "lit";
-import { reEmitEvent as i } from "@arcgis/lumina/controllers/accessor";
+import { reEmitEvent as i } from "@arcgis/lumina-toolkit/reEmitEvent";
 const c = n`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}.esri-widget{box-sizing:border-box;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-tight)}.esri-widget *,.esri-widget :before,.esri-widget :after{box-sizing:inherit}.esri-widget.esri-widget--disabled>*{opacity:.4;pointer-events:none}.esri-widget.esri-widget--compact{--esri-widget-padding-y: 0;--esri-widget-padding-x: 0}.esri-widget__anchor{color:var(--calcite-color-text-2)}.esri-widget__anchor:hover{color:var(--calcite-color-text-3)}.esri-widget__anchor:hover,.esri-widget__anchor:focus{text-decoration:underline}.esri-widget__anchor--disabled{opacity:.4;pointer-events:none}.esri-widget__header{background-color:var(--calcite-color-foreground-1);flex:1 0 100%;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:12px 0 12px 15px;display:flex}.esri-widget__heading{word-break:break-word}.esri-widget__header .esri-widget__heading{width:calc(100% - 48px);text-align:initial;color:var(--calcite-color-text-1);align-items:center;margin:0;padding:0;display:flex}.esri-widget__header-button{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);border:none;flex:0 0 48px;justify-content:center;align-self:stretch;align-items:center;width:48px;padding:0;display:flex}.esri-widget__footer{background-color:var(--calcite-color-foreground-1);justify-content:center;align-items:center;width:100%;min-height:48px;display:flex}.esri-widget__footer-pagination{color:var(--calcite-color-text-2);justify-content:space-between;align-items:center;display:flex}.esri-widget__footer-pagination-previous-button,.esri-widget__footer-pagination-next-button{cursor:pointer;background-color:var(--calcite-color-foreground-1);border:0;margin:0 7px;padding:12px 15px;transition:background-color .125s ease-in-out}.esri-widget__footer-pagination-previous-button:hover,.esri-widget__footer-pagination-previous-button:focus,.esri-widget__footer-pagination-next-button:hover,.esri-widget__footer-pagination-next-button:focus{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1)}.esri-menu{visibility:hidden;z-index:1;background-clip:padding;background-color:var(--calcite-color-foreground-1);background-clip:padding-box;width:100%;max-height:0;margin:2px 0 0;padding:0;font-size:var(--calcite-font-size);line-height:var(--calcite-spacing-xl);position:absolute;top:100%;left:0;overflow:hidden;box-shadow:0 1px 2px #0000004d}.esri-menu .esri-menu__header{color:var(--calcite-color-text-inverse);background-color:var(--calcite-color-inverse);padding:6px 12px}.esri-menu__list{margin:0;padding:0;list-style:none}.esri-menu__list-item{cursor:pointer;border-top:1px solid #adadad4d;border-left:3px solid #0000;padding:.8em 1em}.esri-menu__list-item [class^=esri-icon-],.esri-menu__list-item [class*=" esri-icon-"]{padding-right:2.8px}.esri-menu__list-item:first-child{border-top:none}.esri-menu__list-item--focus,.esri-menu__list-item:hover,.esri-menu__list-item:focus{background-color:var(--calcite-color-foreground-1)}.esri-menu__list-item:active{background-color:var(--calcite-color-foreground-current)}.esri-menu__list-item--active,.esri-menu__list-item--active:hover,.esri-menu__list-item--active:focus{background-color:var(--calcite-color-foreground-1);border-left-color:var(--calcite-color-brand)}.esri-widget__table{border-collapse:collapse;color:var(--calcite-color-text-1);border:none;width:100%;line-height:var(--calcite-font-line-height-relative-tight)}.esri-widget__table tr:nth-child(odd){background-color:var(--calcite-color-transparent)}.esri-widget__table tr:nth-child(2n){background-color:var(--calcite-color-transparent-press)}.esri-widget__table tr a{color:var(--calcite-color-text-2)}.esri-widget__table tr a:hover,.esri-widget__table tr a:focus{color:var(--calcite-color-text-1)}.esri-widget__table tr td,.esri-widget__table tr th{vertical-align:top;word-break:break-word;padding:.5em .7em;font-size:var(--calcite-font-size-sm);font-weight:var(--calcite-font-weight-regular)}.esri-widget__table tr th{text-align:left;border-right:3px solid #0000000d;width:50%}.esri-widget__table tr td{width:50%}.esri-input{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1);border:1px solid #959595;font-size:var(--calcite-font-size)}.esri-input::-ms-clear{display:none}.esri-input::placeholder{opacity:1;color:var(--calcite-color-text-2)}.esri-input:placeholder-shown{text-overflow:ellipsis}.esri-input[type=text],.esri-input[type=password],.esri-input[type=number]{height:32px;padding:0 .5em}calcite-combobox.esri-input{border:none}.esri-widget__content--empty{text-align:center;color:var(--calcite-color-border-input);flex-flow:column wrap;align-items:center;padding:18px 22px;display:flex}.esri-widget__content--empty h1.esri-widget__heading,.esri-widget__content--empty h2.esri-widget__heading,.esri-widget__content--empty h3.esri-widget__heading,.esri-widget__content--empty h4.esri-widget__heading,.esri-widget__content--empty h5.esri-widget__heading{font-weight:var(--calcite-font-weight-regular)}.esri-widget__content-illustration--empty{width:128px;padding:1rem 0}.esri-widget__content-icon--empty{width:32px;padding:.5rem 0}.esri-select{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background:var(--calcite-color-foreground-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 32 32' width='32' height='32'%3E%3Cpath d='M8 11.207l-4-4V5.793l4 4 4-4v1.414z' fill='%23adadad' fillrule='nonzero'/%3E%3C/svg%3E") 100% no-repeat;border:1px solid #959595;border-radius:0;width:100%;height:32px;margin:0;padding:0 .5em;font-family:inherit;font-size:.85em;display:block}.esri-select[disabled]{cursor:auto}.esri-select::-ms-expand{display:none}.esri-disabled a,.esri-disabled [role=menu],.esri-disabled [role=checkbox],.esri-disabled [class^=esri-icon-],.esri-disabled [class*=" esri-icon-"]{color:var(--calcite-color-text-3)}.keynav-mode .esri-widget:focus,.keynav-mode .esri-widget :focus{z-index:1;outline-offset:2px;outline:2px solid #adadad}.esri-widget__loader-animation{border:.15em solid #adadad4d;border-top-color:var(--calcite-color-border-input);border-radius:100%;width:1em;height:1em;font-size:var(--calcite-font-size-md);animation:1.25s linear infinite esri-rotate;display:block;transform:translateZ(0)}:dir(rtl) .esri-widget__table th{text-align:right;border-left:3px solid #0000000d;border-right:none}:dir(rtl) .esri-select{background-position:0}:dir(rtl) .esri-menu__list-item{border-left:none;border-right:3px solid #0000}:dir(rtl) .esri-menu__list-item [class^=esri-icon-],:dir(rtl) .esri-menu__list-item [class*=" esri-icon-"]{padding-left:2px;padding-right:0}:dir(rtl) .esri-menu__list-item--active{border-right-color:var(--calcite-color-brand)}.esri-icon-font-fallback-text{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.esri-rotating{animation:1.25s linear infinite esri-rotate;transform:translateZ(0)}.esri-clearfix:before,.esri-clearfix:after{content:" ";display:table}.esri-clearfix:after{clear:both}.esri-interactive{cursor:pointer}.esri-hidden{display:none!important}.esri-invisible{visibility:hidden!important}.esri-offscreen{position:absolute;top:-999em;left:-999em}.esri-match-height{flex-direction:column;flex:auto;display:flex;overflow:hidden}@supports (-ms-ime-align: auto){.esri-slider__anchor:focus{outline:1px dotted var(--calcite-color-foreground-current)}}.esri-slider{-webkit-user-select:none;user-select:none;direction:ltr;width:100%;height:100%;display:flex}.esri-disabled{pointer-events:none}.esri-disabled .esri-slider__content,.esri-disabled .esri-slider__min,.esri-disabled .esri-slider__max{opacity:var(--calcite-opacity-light)}.esri-slider--reversed.esri-slider--horizontal{flex-direction:row-reverse}.esri-slider--reversed.esri-slider--vertical{flex-direction:column}.esri-slider--horizontal{flex-direction:row}.esri-slider--horizontal .esri-slider__content{height:auto}.esri-slider--horizontal .esri-slider__track{width:100%;height:2px}.esri-slider--horizontal .esri-slider__segment--interactive:hover{cursor:ew-resize}.esri-slider--horizontal .esri-slider__anchor{width:1px;height:100%}.esri-slider--horizontal .esri-slider__label{text-align:center;margin:0 11px;top:-30px;left:-50px}.esri-slider--horizontal .esri-slider__label-input{text-align:center}.esri-slider--horizontal .esri-slider__max,.esri-slider--horizontal .esri-slider__min{flex:none;width:50px;height:auto;margin:auto}.esri-slider--horizontal .esri-slider__ticks{width:100%;margin:9px 0 0;top:100%;left:0}.esri-slider--horizontal .esri-slider__tick{width:1px;height:5px}.esri-slider--horizontal .esri-slider__tick-label{margin-top:18px}.esri-slider--vertical{flex-direction:column-reverse}.esri-slider--vertical .esri-slider__content{flex-direction:column;width:auto}.esri-slider--vertical .esri-slider__track{flex-direction:column;flex:1 0 0;width:2px;height:100%}.esri-slider--vertical .esri-slider__segment--interactive:hover{cursor:ns-resize}.esri-slider--vertical .esri-slider__anchor{width:100%;height:1px}.esri-slider--vertical .esri-slider__label{text-align:left;top:-10px;left:20px}.esri-slider--vertical .esri-slider__max,.esri-slider--vertical .esri-slider__min{flex:0 0 22px;width:100%;margin:auto}.esri-slider--vertical .esri-slider__ticks{margin:0 0 0 11px;top:0;left:100%}.esri-slider--vertical .esri-slider__tick{width:5px;height:1px}.esri-slider--vertical .esri-slider__tick-label{margin-left:30px}.esri-slider__content{z-index:0;flex:1 0 auto;justify-content:center;align-items:center;margin:auto;line-height:0;display:flex;position:relative}.esri-slider__track{touch-action:none;background-color:var(--calcite-color-border-ghost);display:inline-block;position:relative}.esri-slider__segment{transform-origin:0 0;will-change:transform;touch-action:none;width:100%;height:100%;position:absolute;top:0;left:0}.esri-slider__segment:hover{cursor:pointer}.esri-slider__anchor{touch-action:none;-webkit-user-select:none;user-select:none;background-color:var(--calcite-color-brand);position:absolute}.esri-slider__anchor:focus .esri-slider__thumb,.esri-slider__anchor:focus .esri-slider__label{outline:inherit}.esri-slider__anchor--moving:focus .esri-slider__thumb{cursor:grabbing;border:3px solid var(--calcite-color-brand-press)}.esri-slider__anchor--moving .esri-slider__label:hover,.esri-slider__anchor--moving .esri-slider__label--interactive:hover{cursor:grabbing}.esri-slider__thumb{box-sizing:border-box;z-index:1;touch-action:none;background-color:var(--calcite-color-foreground-2);border:2px solid var(--calcite-color-brand);border-radius:16px;width:16px;height:16px;transition:all .125s ease-in-out;position:absolute;top:-7px;left:-7px}.esri-slider__thumb:hover{cursor:grab;border-width:3px;border-color:var(--calcite-color-brand-press);width:19.2px;height:19.2px;top:-8.6px;left:-8.6px}.esri-slider__label{min-width:80px;line-height:var(--calcite-font-line-height-fixed-xl);position:absolute}.esri-slider__label:hover{cursor:grab}.esri-slider__label--interactive:hover,.esri-slider__max--interactive:hover,.esri-slider__min--interactive:hover{cursor:pointer;text-decoration:underline}.esri-slider__label-input{z-index:1;width:100%;position:relative}.esri-slider__extra-content{display:inline-block}.esri-slider__max,.esri-slider__min{text-align:center;justify-content:center;align-items:center;height:22px;line-height:var(--calcite-font-line-height-fixed-xl);display:flex}.esri-slider__max--interactive:hover,.esri-slider__min--interactive:hover{background-color:var(--calcite-color-foreground-2)}.esri-slider__range-input{text-align:center;width:100%;padding:1px 0}.esri-slider__ticks{z-index:0;height:100%;display:inline-block;position:absolute}.esri-slider__tick{background:var(--calcite-color-foreground-1);position:absolute}.esri-slider__tick-label{width:max-content;position:absolute}:dir(rtl) .esri-slider__label,:dir(rtl) .esri-slider__max,:dir(rtl) .esri-slider__min,:dir(rtl) .esri-slider__tick-label{direction:rtl;unicode-bidi:plaintext}:dir(rtl) .esri-slider__range-input,:dir(rtl) .esri-slider__label-input{unicode-bidi:plaintext}.esri-histogram{direction:ltr;width:100%;height:100%}.esri-histogram__content{width:100%;height:100%}.esri-histogram__svg{width:100%;height:100%;display:inline-block;overflow:hidden}.esri-histogram__data-line{stroke:var(--calcite-color-text-3);stroke-width:1px;shape-rendering:crispEdges}.esri-histogram__label{stroke:var(--calcite-color-text-1);stroke-width:0;direction:ltr;unicode-bidi:plaintext;font-size:var(--calcite-font-size-sm)}.esri-histogram__average-data-line{stroke:var(--calcite-color-text-3)}.esri-histogram__average-symbol{font-family:Georgia\\, serif,sans-serif;font-style:italic}.esri-expand__panel-content .esri-histogram{width:100%}:dir(rtl) .esri-histogram{direction:rtl}:dir(rtl) .esri-histogram .esri-histogram__average-label{direction:rtl;unicode-bidi:plaintext}:host{min-width:260px}.esri-size-slider{direction:ltr}.esri-size-slider .esri-slider{z-index:1;font-size:var(--calcite-font-size-sm);position:relative}.esri-size-slider .esri-slider .esri-slider__content{flex-direction:row;height:240px;margin:0 auto 0 40%}.esri-size-slider .esri-slider .esri-slider__track{background-color:var(--calcite-color-transparent);flex:none;display:flex}.esri-size-slider .esri-slider .esri-slider__anchor{border-top:1px solid var(--calcite-color-foreground-1);border-bottom:1px solid var(--calcite-color-text-3);width:30px}.esri-size-slider .esri-slider .esri-slider__anchor:hover .esri-slider__label,.esri-size-slider .esri-slider .esri-slider__anchor:focus .esri-slider__label{text-decoration:underline}.esri-size-slider .esri-slider .esri-slider__anchor:hover .esri-slider__thumb,.esri-size-slider .esri-slider .esri-slider__anchor:focus .esri-slider__thumb{background-color:var(--calcite-color-inverse-press);border:none;transform:none}.esri-size-slider .esri-slider .esri-slider__anchor:hover .esri-slider__thumb:after,.esri-size-slider .esri-slider .esri-slider__anchor:focus .esri-slider__thumb:after{border-left-color:var(--calcite-color-inverse-press)}.esri-size-slider .esri-slider .esri-slider__anchor:hover .esri-slider__thumb:before,.esri-size-slider .esri-slider .esri-slider__anchor:focus .esri-slider__thumb:before{background-color:var(--calcite-color-brand);transform:translate(-1.5px)}.esri-size-slider .esri-slider .esri-slider__thumb{background-color:var(--calcite-color-text-3);border:none;border-radius:0;width:6px;height:12px;top:-6px;left:-12px}.esri-size-slider .esri-slider .esri-slider__thumb:before{content:"";background-color:var(--calcite-color-text-3);width:3px;height:12px;transition:transform .125s ease-in-out,background-color .125s ease-in-out;position:absolute;top:0;left:-1.5px}.esri-size-slider .esri-slider .esri-slider__thumb:after{content:"";border-top:6px solid var(--calcite-color-transparent);border-bottom:6px solid var(--calcite-color-transparent);border-left:6px solid var(--calcite-color-text-3);width:0;height:0;position:absolute;top:0;left:6px}.esri-size-slider .esri-slider .esri-slider__label{text-align:right;min-width:50px;line-height:20px;left:auto;right:50px}.esri-size-slider .esri-slider .esri-slider__label:hover{background-color:var(--calcite-color-foreground-2)}.esri-size-slider .esri-slider .esri-slider__segment:hover{cursor:default}.esri-size-slider .esri-slider .esri-slider__range-input{text-align:center;width:50%;margin:auto}.esri-size-slider .esri-slider .esri-slider__label-input{text-align:right;width:70px}.esri-size-slider .esri-slider .esri-slider__max,.esri-size-slider .esri-slider .esri-slider__min{z-index:0;flex:none;width:auto;margin:9px auto;padding:9px 12px;position:relative}.esri-size-slider .esri-slider .esri-slider__max:before,.esri-size-slider .esri-slider .esri-slider__min:before{z-index:-1;content:"";width:100%;height:100%;position:absolute;top:0;left:0}.esri-size-slider .esri-slider .esri-slider__max.esri-slider__range--active,.esri-size-slider .esri-slider .esri-slider__min.esri-slider__range--active{background-color:var(--calcite-color-foreground-1)}.esri-size-slider .esri-slider .esri-slider__max .esri-slider__range-input,.esri-size-slider .esri-slider .esri-slider__min .esri-slider__range-input{margin:0 auto}.esri-size-slider .esri-slider .esri-slider__extra-content{height:100%;display:flex}.esri-size-slider .esri-slider .esri-histogram__svg{overflow:visible}.esri-size-slider .esri-slider .esri-histogram__label{fill:var(--calcite-color-text-2);stroke-width:2px}.esri-size-slider .esri-slider .esri-histogram__average-line,.esri-size-slider .esri-slider .esri-histogram__label{paint-order:stroke;stroke:var(--calcite-color-border-3)}.esri-size-slider .esri-slider .zoom-cap--max{position:absolute;top:0}.esri-size-slider .esri-slider .zoom-cap--min{position:absolute;bottom:0}.esri-size-slider .esri-slider .zoom-cap{stroke-width:0;width:30px;height:11px}.esri-size-slider .esri-slider .zoom-cap:hover{cursor:pointer}.esri-size-slider .esri-slider .zoom-cap:hover .zoom-cap--mask{fill:var(--calcite-color-foreground-1)}.esri-size-slider .esri-slider .zoom-cap:hover .zoom-cap--line{fill:var(--calcite-color-brand)}.esri-size-slider .esri-slider .zoom-cap:hover .zoom-cap--underline,.esri-size-slider .esri-slider .zoom-cap .zoom-cap--mask,.esri-size-slider .esri-slider .zoom-cap .zoom-cap--line{fill:var(--calcite-color-foreground-1)}.esri-size-slider .esri-slider .zoom-cap .zoom-cap--underline{fill:var(--calcite-color-inverse)}.esri-size-slider__ramp{width:30px;height:100%;display:flex;position:relative}.esri-size-slider__ramp svg{stroke:var(--calcite-color-text-3);stroke-width:1px;width:100%;height:100%;position:absolute;left:0}.esri-size-slider__ramp svg rect{width:100%;height:100%}.esri-size-slider__ramp svg path{stroke-width:.5px}.esri-size-slider__histogram-container{flex:1 1 0;width:120px;height:100%;display:flex}.esri-size-slider.esri-size-slider--interactive-track .esri-slider .esri-slider__content{margin:0 auto 0 35%}.esri-size-slider.esri-size-slider--interactive-track .esri-slider .esri-slider__track{background-color:var(--calcite-color-transparent);width:12px}.esri-size-slider.esri-size-slider--interactive-track .esri-slider__anchor--active .esri-slider__label{text-decoration:underline}.esri-size-slider.esri-size-slider--interactive-track .esri-slider__anchor--active .esri-slider__thumb{background-color:var(--calcite-color-inverse-press);border:none;transform:none}.esri-size-slider.esri-size-slider--interactive-track .esri-slider__anchor--active .esri-slider__thumb:after{border-left-color:var(--calcite-color-inverse-press)}.esri-size-slider.esri-size-slider--interactive-track .esri-slider__anchor--active .esri-slider__thumb:before{background-color:var(--calcite-color-brand);transform:translate(-1.5px)}`, h = o(s);
 class _ extends l {
   constructor() {

package/dist/components/arcgis-snapping-controls/customElement.d.ts

@@ -1,4 +1,5 @@
 /// <reference path="../../index.d.ts" />
+import type VisibleElements from "@arcgis/core/widgets/support/SnappingControls/VisibleElements.js";
 import type SnappingOptions from "@arcgis/core/views/interactive/snapping/SnappingOptions.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisReferenceElement, IconName } from "../types.js";
@@ -15,6 +16,15 @@ export abstract class ArcgisSnappingControls extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-snapping-controls auto-destroy-disabled></arcgis-snapping-controls>
+   * ```
+   *
+   * ```js
+   * snappingControlsElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
@@ -124,7 +134,7 @@ export abstract class ArcgisSnappingControls extends LitElement {
    */
   accessor showHeader: boolean;
   /**
-   * The [SnappingOptions](https://developers.arcgis.com/javascript/latest/references/core/views/interactive/snapping/SnappingOptions/)
+   * The [SnappingOptions](https://developers.arcgis.com/javascript/latest/references/core/views/interactive/options/SnappingOptions/)
    * that will be controlled by this component if the snapping toggle is enabled for display.
    * If SnappingOptions are provided, grid display will be automatically enabled or disabled to match snapping state.
    */
@@ -136,10 +146,16 @@ export abstract class ArcgisSnappingControls extends LitElement {
    */
   get state(): SnappingControlsViewModelState;
   /**
-   * The view associated with the component. 
-   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-snapping-controls component will be associated with a map or scene component rather than using the `view` property.
+   * The view associated with the component.
+   * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-snapping-controls component will be associated with a map or scene component rather than using the `view` property.
    */
   accessor view: MapViewOrSceneView | null | undefined;
+  /**
+   * Use of VisibleElements simplifies configuration of the settings supporting components.
+   *
+   * @internal
+   */
+  accessor visibleElements: VisibleElements;
   /** Permanently destroy the component. */
   destroy(): Promise<void>;
   "@setterTypes": {
@@ -147,7 +163,7 @@ export abstract class ArcgisSnappingControls extends LitElement {
   };
   /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
   readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "snappingOptions" | "state"; }>;
-  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+  /** Emitted when the component associated with a map or scene view is ready for user interaction. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     arcgisPropertyChange: ArcgisSnappingControls["arcgisPropertyChange"]["detail"];

package/dist/components/arcgis-snapping-controls/customElement.js

@@ -1,26 +1,32 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as e } from "../../chunks/runtime.js";
-import { usePropertyChange as i } from "@arcgis/lumina/controllers";
-import t from "@arcgis/core/widgets/support/SnappingControls.js";
-import { LitElement as r, createEvent as o } from "@arcgis/lumina";
-import { m as n } from "../../chunks/useWidget.js";
-import { css as l } from "lit";
-const s = l`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}.esri-widget{box-sizing:border-box;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-tight)}.esri-widget *,.esri-widget :before,.esri-widget :after{box-sizing:inherit}.esri-widget.esri-widget--disabled>*{opacity:.4;pointer-events:none}.esri-widget.esri-widget--compact{--esri-widget-padding-y: 0;--esri-widget-padding-x: 0}.esri-widget__anchor{color:var(--calcite-color-text-2)}.esri-widget__anchor:hover{color:var(--calcite-color-text-3)}.esri-widget__anchor:hover,.esri-widget__anchor:focus{text-decoration:underline}.esri-widget__anchor--disabled{opacity:.4;pointer-events:none}.esri-widget__header{background-color:var(--calcite-color-foreground-1);flex:1 0 100%;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:12px 0 12px 15px;display:flex}.esri-widget__heading{word-break:break-word}.esri-widget__header .esri-widget__heading{width:calc(100% - 48px);text-align:initial;color:var(--calcite-color-text-1);align-items:center;margin:0;padding:0;display:flex}.esri-widget__header-button{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);border:none;flex:0 0 48px;justify-content:center;align-self:stretch;align-items:center;width:48px;padding:0;display:flex}.esri-widget__footer{background-color:var(--calcite-color-foreground-1);justify-content:center;align-items:center;width:100%;min-height:48px;display:flex}.esri-widget__footer-pagination{color:var(--calcite-color-text-2);justify-content:space-between;align-items:center;display:flex}.esri-widget__footer-pagination-previous-button,.esri-widget__footer-pagination-next-button{cursor:pointer;background-color:var(--calcite-color-foreground-1);border:0;margin:0 7px;padding:12px 15px;transition:background-color .125s ease-in-out}.esri-widget__footer-pagination-previous-button:hover,.esri-widget__footer-pagination-previous-button:focus,.esri-widget__footer-pagination-next-button:hover,.esri-widget__footer-pagination-next-button:focus{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1)}.esri-menu{visibility:hidden;z-index:1;background-clip:padding;background-color:var(--calcite-color-foreground-1);background-clip:padding-box;width:100%;max-height:0;margin:2px 0 0;padding:0;font-size:var(--calcite-font-size);line-height:var(--calcite-spacing-xl);position:absolute;top:100%;left:0;overflow:hidden;box-shadow:0 1px 2px #0000004d}.esri-menu .esri-menu__header{color:var(--calcite-color-text-inverse);background-color:var(--calcite-color-inverse);padding:6px 12px}.esri-menu__list{margin:0;padding:0;list-style:none}.esri-menu__list-item{cursor:pointer;border-top:1px solid #adadad4d;border-left:3px solid #0000;padding:.8em 1em}.esri-menu__list-item [class^=esri-icon-],.esri-menu__list-item [class*=" esri-icon-"]{padding-right:2.8px}.esri-menu__list-item:first-child{border-top:none}.esri-menu__list-item--focus,.esri-menu__list-item:hover,.esri-menu__list-item:focus{background-color:var(--calcite-color-foreground-1)}.esri-menu__list-item:active{background-color:var(--calcite-color-foreground-current)}.esri-menu__list-item--active,.esri-menu__list-item--active:hover,.esri-menu__list-item--active:focus{background-color:var(--calcite-color-foreground-1);border-left-color:var(--calcite-color-brand)}.esri-widget__table{border-collapse:collapse;color:var(--calcite-color-text-1);border:none;width:100%;line-height:var(--calcite-font-line-height-relative-tight)}.esri-widget__table tr:nth-child(odd){background-color:var(--calcite-color-transparent)}.esri-widget__table tr:nth-child(2n){background-color:var(--calcite-color-transparent-press)}.esri-widget__table tr a{color:var(--calcite-color-text-2)}.esri-widget__table tr a:hover,.esri-widget__table tr a:focus{color:var(--calcite-color-text-1)}.esri-widget__table tr td,.esri-widget__table tr th{vertical-align:top;word-break:break-word;padding:.5em .7em;font-size:var(--calcite-font-size-sm);font-weight:var(--calcite-font-weight-regular)}.esri-widget__table tr th{text-align:left;border-right:3px solid #0000000d;width:50%}.esri-widget__table tr td{width:50%}.esri-input{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1);border:1px solid #959595;font-size:var(--calcite-font-size)}.esri-input::-ms-clear{display:none}.esri-input::placeholder{opacity:1;color:var(--calcite-color-text-2)}.esri-input:placeholder-shown{text-overflow:ellipsis}.esri-input[type=text],.esri-input[type=password],.esri-input[type=number]{height:32px;padding:0 .5em}calcite-combobox.esri-input{border:none}.esri-widget__content--empty{text-align:center;color:var(--calcite-color-border-input);flex-flow:column wrap;align-items:center;padding:18px 22px;display:flex}.esri-widget__content--empty h1.esri-widget__heading,.esri-widget__content--empty h2.esri-widget__heading,.esri-widget__content--empty h3.esri-widget__heading,.esri-widget__content--empty h4.esri-widget__heading,.esri-widget__content--empty h5.esri-widget__heading{font-weight:var(--calcite-font-weight-regular)}.esri-widget__content-illustration--empty{width:128px;padding:1rem 0}.esri-widget__content-icon--empty{width:32px;padding:.5rem 0}.esri-select{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background:var(--calcite-color-foreground-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 32 32' width='32' height='32'%3E%3Cpath d='M8 11.207l-4-4V5.793l4 4 4-4v1.414z' fill='%23adadad' fillrule='nonzero'/%3E%3C/svg%3E") 100% no-repeat;border:1px solid #959595;border-radius:0;width:100%;height:32px;margin:0;padding:0 .5em;font-family:inherit;font-size:.85em;display:block}.esri-select[disabled]{cursor:auto}.esri-select::-ms-expand{display:none}.esri-disabled a,.esri-disabled [role=menu],.esri-disabled [role=checkbox],.esri-disabled [class^=esri-icon-],.esri-disabled [class*=" esri-icon-"]{color:var(--calcite-color-text-3)}.keynav-mode .esri-widget:focus,.keynav-mode .esri-widget :focus{z-index:1;outline-offset:2px;outline:2px solid #adadad}.esri-widget__loader-animation{border:.15em solid #adadad4d;border-top-color:var(--calcite-color-border-input);border-radius:100%;width:1em;height:1em;font-size:var(--calcite-font-size-md);animation:1.25s linear infinite esri-rotate;display:block;transform:translateZ(0)}:dir(rtl) .esri-widget__table th{text-align:right;border-left:3px solid #0000000d;border-right:none}:dir(rtl) .esri-select{background-position:0}:dir(rtl) .esri-menu__list-item{border-left:none;border-right:3px solid #0000}:dir(rtl) .esri-menu__list-item [class^=esri-icon-],:dir(rtl) .esri-menu__list-item [class*=" esri-icon-"]{padding-left:2px;padding-right:0}:dir(rtl) .esri-menu__list-item--active{border-right-color:var(--calcite-color-brand)}.esri-icon-font-fallback-text{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.esri-rotating{animation:1.25s linear infinite esri-rotate;transform:translateZ(0)}.esri-clearfix:before,.esri-clearfix:after{content:" ";display:table}.esri-clearfix:after{clear:both}.esri-interactive{cursor:pointer}.esri-hidden{display:none!important}.esri-invisible{visibility:hidden!important}.esri-offscreen{position:absolute;top:-999em;left:-999em}.esri-match-height{flex-direction:column;flex:auto;display:flex;overflow:hidden}calcite-block>.esri-grid-controls{background:0 0;padding:0}.esri-grid-controls{-webkit-user-select:none;user-select:none;padding:var(--arcgis-internal-padding);flex-flow:column wrap;display:flex;calcite-label.esri-labeled-switch__label{margin-block-end:var(--calcite-spacing-sm, .5rem)}}.esri-grid-controls__switch--bordered{border-width:0 0 var(--calcite-spacing-px) 0;border-style:solid;border-color:var(--calcite-color-border-1)}.esri-grid-controls__container{gap:var(--calcite-spacing-sm);flex-direction:column;flex:auto;display:flex}.esri-grid-controls__tilegroup{column-gap:var(--calcite-spacing-sm);align-items:start;display:flex;flex-wrap:wrap}.esri-grid-controls__tile__content{row-gap:var(--calcite-spacing-md);padding:var(--calcite-spacing-md);color:var(--calcite-color-text-2);flex-direction:column;align-items:center;display:flex}.esri-grid-controls__tile__content calcite-label{margin-bottom:calc(0px - var(--calcite-label-margin-bottom, .75rem));font-weight:var(--calcite-font-weight-medium)}.esri-grid-controls__tile{position:relative}.esri-grid-controls__tile:focus-within{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.esri-grid-controls__tile--disabled{opacity:var(--calcite-opacity-disabled)}.esri-grid-controls__tile input[type=radio]{appearance:none;opacity:.001;border:var(--calcite-spacing-px) solid transparent;cursor:pointer;position:absolute;inset:0}.esri-grid-controls__tile input[type=radio]:checked+.esri-grid-controls__tile__content{border:var(--calcite-spacing-px) solid var(--calcite-color-brand)}.esri-grid-controls__tile input[type=radio]+.esri-grid-controls__tile__content{border:var(--calcite-spacing-px) solid transparent}.esri-grid-controls__numeric-inputs__container{gap:var(--calcite-spacing-sm);grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.esri-grid-controls__inline-icon{margin-left:var(--calcite-spacing-xs);vertical-align:top;color:var(--calcite-color-status-warning)}.esri-labeled-switch__label{--calcite-label-margin-bottom: 0}.esri-labeled-switch__label-content{text-wrap:balance;flex:1;align-items:center;gap:7px;display:flex}.esri-labeled-switch__label-content>div{flex-grow:1}.esri-labeled-switch__icon{margin-top:-1px}.esri-labeled-switch__icon_info{color:var(--calcite-color-status-info)}.esri-labeled-switch__icon_warning{color:var(--calcite-color-status-warning)}.esri-labeled-switch__tooltip{text-wrap:wrap}.esri-sketch-tooltip-controls__block{border-block-end:none;margin:0}.esri-sketch-tooltip-controls__block-content{flex-direction:column;gap:6px;display:flex}.esri-sketch-tooltip-controls calcite-label:last-child{--calcite-label-margin-bottom: 0}.esri-snapping-controls__toggle-block{min-width:100%;margin:0}.esri-snapping-controls__layer-list-block{border-bottom:none;min-width:225px}.esri-snapping-controls__layer-list-block[open]{margin-block:0}.esri-snapping-controls__layer-list{overflow:auto}.esri-snapping-controls__layer-list__filter{margin-bottom:10px}.esri-snapping-controls__layer-list__button{margin-bottom:6px}.esri-snapping-controls__layer-list__item calcite-accordion-item calcite-icon,.esri-snapping-controls__layer-list__item calcite-action calcite-icon{margin-inline-start:0}.esri-snapping-controls__layer-list__item calcite-icon{color:var(--calcite-color-brand);margin-inline-start:var(--calcite-list-item-spacing-indent, 1em)}.esri-snapping-controls{flex-flow:column wrap;display:flex}.esri-snapping-controls__container{flex-direction:column;flex:auto;display:flex}.esri-snapping-controls__container :only-child{border-block-end:none}.esri-snapping-controls__panel{width:320px}.esri-snapping-controls__item{border:1px solid #adadad4d;cursor:pointer;background-color:var(--calcite-color-foreground-2);border-color:var(--calcite-color-border-1);border-radius:2px;justify-content:space-between;margin:3px 0;padding:3px;transition:border-color .125s ease-in-out;display:flex;box-shadow:0 1px #adadad4d}.esri-snapping-controls__item-action-icon{flex:0 0 16px;width:16px;height:16px;margin-top:.1em;font-size:var(--calcite-font-size-md);display:inline-block}.esri-snapping-controls__action-toggle{opacity:1;cursor:pointer;border:1px solid var(--calcite-color-border-1);flex-flow:row-reverse;justify-content:space-between;align-items:flex-start;width:100%;margin:0;padding:6px 15px;font-size:var(--calcite-font-size-sm);transition:opacity .25s ease-in-out .25s,background-color .25s ease-in-out;display:flex}.esri-snapping-controls__action-toggle .esri-snapping-controls__item-action-title{margin-left:0}.esri-snapping-controls__action-toggle .esri-snapping-controls__item-action-icon{background-color:var(--calcite-color-foreground-1);border-radius:16px;flex:0 0 28px;width:16px;height:16px;padding:0;transition:background-color .125s ease-in-out;position:relative;overflow:hidden;box-shadow:0 0 0 1px #adadad}.esri-snapping-controls__action-toggle .esri-snapping-controls__item-action-icon:before{content:"";background-color:var(--calcite-color-foreground-2);border-radius:100%;width:12px;height:12px;margin:2px;transition:background-color .125s ease-in-out,left .125s ease-in-out;display:block;position:absolute;top:0;left:0;box-shadow:0 0 0 1px #242424}.esri-snapping-controls__action-toggle--on .esri-snapping-controls__item-action-icon{background-color:var(--calcite-color-foreground-1);box-shadow:0 0 0 1px #adadad}.esri-snapping-controls__action-toggle--on .esri-snapping-controls__item-action-icon:before{background-color:var(--calcite-color-foreground-3);left:12px}.esri-snapping-controls__nested-container{flex-direction:column;gap:6px;display:flex}.esri-snapping-controls__nested-container:not(:empty){padding-top:6px;padding-inline-start:1em}`, a = n(t);
-class c extends r {
+import { c as i } from "../../chunks/runtime.js";
+import { usePropertyChange as t } from "@arcgis/lumina/controllers";
+import r from "@arcgis/core/widgets/support/SnappingControls.js";
+import { LitElement as o, createEvent as n } from "@arcgis/lumina";
+import { m as l } from "../../chunks/useWidget.js";
+import { css as s } from "lit";
+const a = s`.esri-widget__heading{color:var(--calcite-color-text-2);margin:0 0 .5rem;font-weight:var(--calcite-font-weight-semibold)}h1.esri-widget__heading{font-size:var(--calcite-font-size-xl)}h2.esri-widget__heading{font-size:var(--calcite-font-size-md)}h3.esri-widget__heading,h4.esri-widget__heading,h5.esri-widget__heading,h6.esri-widget__heading{font-size:var(--calcite-font-size)}.esri-widget{box-sizing:border-box;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-relative-tight)}.esri-widget *,.esri-widget :before,.esri-widget :after{box-sizing:inherit}.esri-widget.esri-widget--disabled>*{opacity:.4;pointer-events:none}.esri-widget.esri-widget--compact{--esri-widget-padding-y: 0;--esri-widget-padding-x: 0}.esri-widget__anchor{color:var(--calcite-color-text-2)}.esri-widget__anchor:hover{color:var(--calcite-color-text-3)}.esri-widget__anchor:hover,.esri-widget__anchor:focus{text-decoration:underline}.esri-widget__anchor--disabled{opacity:.4;pointer-events:none}.esri-widget__header{background-color:var(--calcite-color-foreground-1);flex:1 0 100%;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:12px 0 12px 15px;display:flex}.esri-widget__heading{word-break:break-word}.esri-widget__header .esri-widget__heading{width:calc(100% - 48px);text-align:initial;color:var(--calcite-color-text-1);align-items:center;margin:0;padding:0;display:flex}.esri-widget__header-button{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background-color:var(--calcite-color-foreground-1);border:none;flex:0 0 48px;justify-content:center;align-self:stretch;align-items:center;width:48px;padding:0;display:flex}.esri-widget__footer{background-color:var(--calcite-color-foreground-1);justify-content:center;align-items:center;width:100%;min-height:48px;display:flex}.esri-widget__footer-pagination{color:var(--calcite-color-text-2);justify-content:space-between;align-items:center;display:flex}.esri-widget__footer-pagination-previous-button,.esri-widget__footer-pagination-next-button{cursor:pointer;background-color:var(--calcite-color-foreground-1);border:0;margin:0 7px;padding:12px 15px;transition:background-color .125s ease-in-out}.esri-widget__footer-pagination-previous-button:hover,.esri-widget__footer-pagination-previous-button:focus,.esri-widget__footer-pagination-next-button:hover,.esri-widget__footer-pagination-next-button:focus{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1)}.esri-menu{visibility:hidden;z-index:1;background-clip:padding;background-color:var(--calcite-color-foreground-1);background-clip:padding-box;width:100%;max-height:0;margin:2px 0 0;padding:0;font-size:var(--calcite-font-size);line-height:var(--calcite-spacing-xl);position:absolute;top:100%;left:0;overflow:hidden;box-shadow:0 1px 2px #0000004d}.esri-menu .esri-menu__header{color:var(--calcite-color-text-inverse);background-color:var(--calcite-color-inverse);padding:6px 12px}.esri-menu__list{margin:0;padding:0;list-style:none}.esri-menu__list-item{cursor:pointer;border-top:1px solid #adadad4d;border-left:3px solid #0000;padding:.8em 1em}.esri-menu__list-item [class^=esri-icon-],.esri-menu__list-item [class*=" esri-icon-"]{padding-right:2.8px}.esri-menu__list-item:first-child{border-top:none}.esri-menu__list-item--focus,.esri-menu__list-item:hover,.esri-menu__list-item:focus{background-color:var(--calcite-color-foreground-1)}.esri-menu__list-item:active{background-color:var(--calcite-color-foreground-current)}.esri-menu__list-item--active,.esri-menu__list-item--active:hover,.esri-menu__list-item--active:focus{background-color:var(--calcite-color-foreground-1);border-left-color:var(--calcite-color-brand)}.esri-widget__table{border-collapse:collapse;color:var(--calcite-color-text-1);border:none;width:100%;line-height:var(--calcite-font-line-height-relative-tight)}.esri-widget__table tr:nth-child(odd){background-color:var(--calcite-color-transparent)}.esri-widget__table tr:nth-child(2n){background-color:var(--calcite-color-transparent-press)}.esri-widget__table tr a{color:var(--calcite-color-text-2)}.esri-widget__table tr a:hover,.esri-widget__table tr a:focus{color:var(--calcite-color-text-1)}.esri-widget__table tr td,.esri-widget__table tr th{vertical-align:top;word-break:break-word;padding:.5em .7em;font-size:var(--calcite-font-size-sm);font-weight:var(--calcite-font-weight-regular)}.esri-widget__table tr th{text-align:left;border-right:3px solid #0000000d;width:50%}.esri-widget__table tr td{width:50%}.esri-input{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-1);border:1px solid #959595;font-size:var(--calcite-font-size)}.esri-input::-ms-clear{display:none}.esri-input::placeholder{opacity:1;color:var(--calcite-color-text-2)}.esri-input:placeholder-shown{text-overflow:ellipsis}.esri-input[type=text],.esri-input[type=password],.esri-input[type=number]{height:32px;padding:0 .5em}calcite-combobox.esri-input{border:none}.esri-widget__content--empty{text-align:center;color:var(--calcite-color-border-input);flex-flow:column wrap;align-items:center;padding:18px 22px;display:flex}.esri-widget__content--empty h1.esri-widget__heading,.esri-widget__content--empty h2.esri-widget__heading,.esri-widget__content--empty h3.esri-widget__heading,.esri-widget__content--empty h4.esri-widget__heading,.esri-widget__content--empty h5.esri-widget__heading{font-weight:var(--calcite-font-weight-regular)}.esri-widget__content-illustration--empty{width:128px;padding:1rem 0}.esri-widget__content-icon--empty{width:32px;padding:.5rem 0}.esri-select{appearance:none;cursor:pointer;color:var(--calcite-color-text-2);background:var(--calcite-color-foreground-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 32 32' width='32' height='32'%3E%3Cpath d='M8 11.207l-4-4V5.793l4 4 4-4v1.414z' fill='%23adadad' fillrule='nonzero'/%3E%3C/svg%3E") 100% no-repeat;border:1px solid #959595;border-radius:0;width:100%;height:32px;margin:0;padding:0 .5em;font-family:inherit;font-size:.85em;display:block}.esri-select[disabled]{cursor:auto}.esri-select::-ms-expand{display:none}.esri-disabled a,.esri-disabled [role=menu],.esri-disabled [role=checkbox],.esri-disabled [class^=esri-icon-],.esri-disabled [class*=" esri-icon-"]{color:var(--calcite-color-text-3)}.keynav-mode .esri-widget:focus,.keynav-mode .esri-widget :focus{z-index:1;outline-offset:2px;outline:2px solid #adadad}.esri-widget__loader-animation{border:.15em solid #adadad4d;border-top-color:var(--calcite-color-border-input);border-radius:100%;width:1em;height:1em;font-size:var(--calcite-font-size-md);animation:1.25s linear infinite esri-rotate;display:block;transform:translateZ(0)}:dir(rtl) .esri-widget__table th{text-align:right;border-left:3px solid #0000000d;border-right:none}:dir(rtl) .esri-select{background-position:0}:dir(rtl) .esri-menu__list-item{border-left:none;border-right:3px solid #0000}:dir(rtl) .esri-menu__list-item [class^=esri-icon-],:dir(rtl) .esri-menu__list-item [class*=" esri-icon-"]{padding-left:2px;padding-right:0}:dir(rtl) .esri-menu__list-item--active{border-right-color:var(--calcite-color-brand)}.esri-icon-font-fallback-text{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.esri-rotating{animation:1.25s linear infinite esri-rotate;transform:translateZ(0)}.esri-clearfix:before,.esri-clearfix:after{content:" ";display:table}.esri-clearfix:after{clear:both}.esri-interactive{cursor:pointer}.esri-hidden{display:none!important}.esri-invisible{visibility:hidden!important}.esri-offscreen{position:absolute;top:-999em;left:-999em}.esri-match-height{flex-direction:column;flex:auto;display:flex;overflow:hidden}calcite-block>.esri-grid-controls{background:0 0;padding:0}.esri-grid-controls{-webkit-user-select:none;user-select:none;padding:var(--arcgis-internal-padding);flex-flow:column wrap;display:flex;calcite-label.esri-labeled-switch__label{margin-block-end:var(--calcite-spacing-sm, .5rem)}}.esri-grid-controls__switch--bordered{border-width:0 0 var(--calcite-spacing-px) 0;border-style:solid;border-color:var(--calcite-color-border-1)}.esri-grid-controls__container{gap:var(--calcite-spacing-sm);flex-direction:column;flex:auto;display:flex}.esri-grid-controls__tilegroup{column-gap:var(--calcite-spacing-sm);align-items:start;display:flex;flex-wrap:wrap}.esri-grid-controls__tile__content{row-gap:var(--calcite-spacing-md);padding:var(--calcite-spacing-md);color:var(--calcite-color-text-2);flex-direction:column;align-items:center;display:flex}.esri-grid-controls__tile__content calcite-label{margin-bottom:calc(0px - var(--calcite-label-margin-bottom, .75rem));font-weight:var(--calcite-font-weight-medium)}.esri-grid-controls__tile{position:relative}.esri-grid-controls__tile:focus-within{outline:2px solid var(--calcite-color-brand);outline-offset:2px}.esri-grid-controls__tile--disabled{opacity:var(--calcite-opacity-disabled)}.esri-grid-controls__tile input[type=radio]{appearance:none;opacity:.001;border:var(--calcite-spacing-px) solid transparent;cursor:pointer;position:absolute;inset:0}.esri-grid-controls__tile input[type=radio]:checked+.esri-grid-controls__tile__content{border:var(--calcite-spacing-px) solid var(--calcite-color-brand)}.esri-grid-controls__tile input[type=radio]+.esri-grid-controls__tile__content{border:var(--calcite-spacing-px) solid transparent}.esri-grid-controls__numeric-inputs__container{gap:var(--calcite-spacing-sm);grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.esri-grid-controls__inline-icon{margin-left:var(--calcite-spacing-xs);vertical-align:top;color:var(--calcite-color-status-warning)}.esri-labeled-switch__label{--calcite-label-margin-bottom: 0}.esri-labeled-switch__label-content{text-wrap:balance;flex:1;align-items:center;gap:7px;display:flex}.esri-labeled-switch__label-content>div{flex-grow:1}.esri-labeled-switch__icon{margin-top:-1px}.esri-labeled-switch__icon_info{color:var(--calcite-color-status-info)}.esri-labeled-switch__icon_warning{color:var(--calcite-color-status-warning)}.esri-labeled-switch__tooltip{text-wrap:wrap}.esri-sketch-tooltip-controls__block{border-block-end:none;margin:0}.esri-sketch-tooltip-controls__block-content{flex-direction:column;gap:6px;display:flex}.esri-sketch-tooltip-controls calcite-label:last-child{--calcite-label-margin-bottom: 0}.esri-snapping-controls__toggle-block{min-width:100%;margin:0}.esri-snapping-controls__layer-list-block{border-bottom:none}.esri-snapping-controls__layer-list-block[open]{margin-block:0}.esri-snapping-controls__layer-list{overflow:auto}.esri-snapping-controls__layer-list__filter{margin-bottom:10px}.esri-snapping-controls__layer-list__button{margin-bottom:6px}.esri-snapping-controls__layer-list__item calcite-accordion-item calcite-icon,.esri-snapping-controls__layer-list__item calcite-action calcite-icon{margin-inline-start:0}.esri-snapping-controls__layer-list__item calcite-icon{color:var(--calcite-color-brand);margin-inline-start:var(--calcite-list-item-spacing-indent, 1em)}.esri-snapping-controls{flex-flow:column wrap;display:flex}.esri-snapping-controls__container{flex-direction:column;flex:auto;display:flex}.esri-snapping-controls__container :only-child{border-block-end:none}.esri-snapping-controls__panel{width:320px}.esri-snapping-controls__item{border:1px solid #adadad4d;cursor:pointer;background-color:var(--calcite-color-foreground-2);border-color:var(--calcite-color-border-1);border-radius:2px;justify-content:space-between;margin:3px 0;padding:3px;transition:border-color .125s ease-in-out;display:flex;box-shadow:0 1px #adadad4d}.esri-snapping-controls__item-action-icon{flex:0 0 16px;width:16px;height:16px;margin-top:.1em;font-size:var(--calcite-font-size-md);display:inline-block}.esri-snapping-controls__action-toggle{opacity:1;cursor:pointer;border:1px solid var(--calcite-color-border-1);flex-flow:row-reverse;justify-content:space-between;align-items:flex-start;width:100%;margin:0;padding:6px 15px;font-size:var(--calcite-font-size-sm);transition:opacity .25s ease-in-out .25s,background-color .25s ease-in-out;display:flex}.esri-snapping-controls__action-toggle .esri-snapping-controls__item-action-title{margin-left:0}.esri-snapping-controls__action-toggle .esri-snapping-controls__item-action-icon{background-color:var(--calcite-color-foreground-1);border-radius:16px;flex:0 0 28px;width:16px;height:16px;padding:0;transition:background-color .125s ease-in-out;position:relative;overflow:hidden;box-shadow:0 0 0 1px #adadad}.esri-snapping-controls__action-toggle .esri-snapping-controls__item-action-icon:before{content:"";background-color:var(--calcite-color-foreground-2);border-radius:100%;width:12px;height:12px;margin:2px;transition:background-color .125s ease-in-out,left .125s ease-in-out;display:block;position:absolute;top:0;left:0;box-shadow:0 0 0 1px #242424}.esri-snapping-controls__action-toggle--on .esri-snapping-controls__item-action-icon{background-color:var(--calcite-color-foreground-1);box-shadow:0 0 0 1px #adadad}.esri-snapping-controls__action-toggle--on .esri-snapping-controls__item-action-icon:before{background-color:var(--calcite-color-foreground-3);left:12px}.esri-snapping-controls__nested-container{flex-direction:column;gap:6px;display:flex}.esri-snapping-controls__nested-container:not(:empty){padding-top:6px;padding-inline-start:1em}`, c = l(r);
+class d extends o {
   constructor() {
-    super(...arguments), this.widget = a(this), this.viewModel = this.widget.viewModel, this.view = this.widget.view, this.autoDestroyDisabled = !1, this.hideEnabledToggle = this.widget.visibleElements.enabledToggle, this.hideFeatureEnabledToggle = this.widget.visibleElements.featureEnabledToggle, this.hideGridControls = this.widget.visibleElements.gridControls, this.hideGridControlsElementsColorSelection = this.widget.visibleElements.gridControlsElements.colorSelection, this.hideGridControlsElementsDynamicScaleToggle = this.widget.visibleElements.gridControlsElements.dynamicScaleToggle, this.hideGridControlsElementsLineIntervalInput = this.widget.visibleElements.gridControlsElements.lineIntervalInput, this.hideGridControlsElementsNumericInputs = this.widget.visibleElements.gridControlsElements.numericInputs, this.hideGridControlsElementsOutOfScaleWarning = this.widget.visibleElements.gridControlsElements.outOfScaleWarning, this.hideGridControlsElementsPlacementButtons = this.widget.visibleElements.gridControlsElements.placementButtons, this.hideGridControlsElementsRotateWithMapToggle = this.widget.visibleElements.gridControlsElements.rotateWithMapToggle, this.showHeader = this.widget.visibleElements.header, this.showGridControlsElementsGridEnabledToggle = this.widget.visibleElements.gridControlsElements.gridEnabledToggle, this.hideLayerList = this.widget.visibleElements.layerList, this.hideSelfEnabledToggle = this.widget.visibleElements.selfEnabledToggle, this.icon = this.widget.icon, this.label = this.widget.label, this.snappingOptions = this.widget.snappingOptions, this.state = this.viewModel.state, this.arcgisPropertyChange = i()("snappingOptions", "state"), this.arcgisReady = o();
+    super(...arguments), this.widget = c(this), this.viewModel = this.widget.viewModel, this.view = this.widget.view, this.autoDestroyDisabled = !1, this.hideEnabledToggle = this.widget.visibleElements.enabledToggle, this.hideFeatureEnabledToggle = this.widget.visibleElements.featureEnabledToggle, this.hideGridControls = this.widget.visibleElements.gridControls, this.hideGridControlsElementsColorSelection = this.widget.visibleElements.gridControlsElements.colorSelection, this.hideGridControlsElementsDynamicScaleToggle = this.widget.visibleElements.gridControlsElements.dynamicScaleToggle, this.hideGridControlsElementsLineIntervalInput = this.widget.visibleElements.gridControlsElements.lineIntervalInput, this.hideGridControlsElementsNumericInputs = this.widget.visibleElements.gridControlsElements.numericInputs, this.hideGridControlsElementsOutOfScaleWarning = this.widget.visibleElements.gridControlsElements.outOfScaleWarning, this.hideGridControlsElementsPlacementButtons = this.widget.visibleElements.gridControlsElements.placementButtons, this.hideGridControlsElementsRotateWithMapToggle = this.widget.visibleElements.gridControlsElements.rotateWithMapToggle, this.showHeader = this.widget.visibleElements.header, this.showGridControlsElementsGridEnabledToggle = this.widget.visibleElements.gridControlsElements.gridEnabledToggle, this.hideLayerList = this.widget.visibleElements.layerList, this.hideSelfEnabledToggle = this.widget.visibleElements.selfEnabledToggle, this.icon = this.widget.icon, this.label = this.widget.label, this.snappingOptions = this.widget.snappingOptions, this.state = this.viewModel.state, this.arcgisPropertyChange = t()("snappingOptions", "state"), this.arcgisReady = n();
   }
   static {
-    this.properties = { view: 0, autoDestroyDisabled: 5, hideEnabledToggle: 5, hideFeatureEnabledToggle: 5, hideGridControls: 5, hideGridControlsElementsColorSelection: 5, hideGridControlsElementsDynamicScaleToggle: 5, hideGridControlsElementsLineIntervalInput: 5, hideGridControlsElementsNumericInputs: 5, hideGridControlsElementsOutOfScaleWarning: 5, hideGridControlsElementsPlacementButtons: 5, hideGridControlsElementsRotateWithMapToggle: 5, showHeader: 5, showGridControlsElementsGridEnabledToggle: 5, hideLayerList: 5, hideSelfEnabledToggle: 5, icon: 1, label: 1, referenceElement: 1, snappingOptions: 0, state: 35 };
+    this.properties = { view: 0, autoDestroyDisabled: 5, visibleElements: 0, hideEnabledToggle: 5, hideFeatureEnabledToggle: 5, hideGridControls: 5, hideGridControlsElementsColorSelection: 5, hideGridControlsElementsDynamicScaleToggle: 5, hideGridControlsElementsLineIntervalInput: 5, hideGridControlsElementsNumericInputs: 5, hideGridControlsElementsOutOfScaleWarning: 5, hideGridControlsElementsPlacementButtons: 5, hideGridControlsElementsRotateWithMapToggle: 5, showHeader: 5, showGridControlsElementsGridEnabledToggle: 5, hideLayerList: 5, hideSelfEnabledToggle: 5, icon: 1, label: 1, referenceElement: 1, snappingOptions: 0, state: 35 };
   }
   static {
-    this.styles = s;
+    this.styles = a;
+  }
+  get visibleElements() {
+    return this.widget.visibleElements;
+  }
+  set visibleElements(e) {
+    this.widget.visibleElements = e;
   }
   async destroy() {
     await this.manager.destroy();
   }
 }
-e("arcgis-snapping-controls", c);
+i("arcgis-snapping-controls", d);
 export {
-  c as ArcgisSnappingControls
+  d as ArcgisSnappingControls
 };