@arcgis/common-components 5.1.0-next.7 → 5.1.0-next.71

package/dist/components/arcgis-label-input/customElement.js

@@ -1,24 +1,24 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as l } from "../../chunks/runtime.js";
-import { formatNumber as r } from "@arcgis/core/intl.js";
-import { LitElement as o, createEvent as u } from "@arcgis/lumina";
-import { createRef as n, ref as a } from "lit/directives/ref.js";
-import { css as h, html as s } from "lit";
-const c = h`:host{display:block}:host([hidden]){display:none}.readOnlyLabel{display:block;font-size:var(--calcite-font-size-sm);font-variant-numeric:tabular-nums;line-height:var(--calcite-font-line-height-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:.5rem;padding-block:3px;border-color:var(--calcite-color-transparent);border-style:solid;border-width:var(--calcite-button-border-size, 1px);color:var(--calcite-color-text-1)}:host(:not([read-only])) .readOnlyLabel{position:absolute;opacity:0}:host([alignment="start"]){.readOnlyLabel{text-align:start}}:host([alignment="end"]){.readOnlyLabel{text-align:end}}:host([alignment="center"]){.readOnlyLabel{text-align:center}}calcite-button{inline-size:100%;--calcite-offset-invert-focus: 1;--calcite-internal-animation-timing-fast: 0}calcite-input-number{inline-size:100%;--calcite-internal-animation-timing-fast: 0}`;
-class d extends o {
+import { c as o } from "../../chunks/runtime.js";
+import { formatNumber as u } from "@arcgis/core/intl.js";
+import { LitElement as c, createEvent as h, safeClassMap as d } from "@arcgis/lumina";
+import { createRef as s, ref as l } from "lit/directives/ref.js";
+import { css as p, html as n } from "lit";
+const m = p`:host{display:block}:host([hidden]){display:none}.content{display:flex;flex-direction:column}.readOnlyLabel{display:block;font-size:var(--calcite-font-size-sm);font-variant-numeric:tabular-nums;line-height:var(--calcite-font-line-height-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:.5rem;padding-block:3px;border-color:var(--calcite-color-transparent);border-style:solid;border-width:var(--calcite-button-border-size, 1px);color:var(--calcite-color-text-1)}:host(:not([read-only])) .readOnlyLabel{position:absolute;opacity:0}:host([alignment="start"]){.content{align-items:start}.readOnlyLabel{text-align:start}}:host([alignment="end"]){.content{align-items:end}.readOnlyLabel{text-align:end}}:host([alignment="center"]){.content{align-items:center}.readOnlyLabel{text-align:center}}calcite-button{inline-size:100%;--calcite-offset-invert-focus: 1;--calcite-internal-animation-timing-fast: 0}calcite-input-number{inline-size:100%;--calcite-internal-animation-timing-fast: 0}`;
+class f extends c {
   constructor() {
-    super(...arguments), this._buttonRef = n(), this._inputRef = n(), this._labelRef = n(), this._formatOptions = {
+    super(...arguments), this._buttonRef = s(), this._inputRef = s(), this._labelRef = s(), this._formatOptions = {
       style: "decimal",
       useGrouping: !0,
       minimumFractionDigits: 0,
       maximumFractionDigits: 2
-    }, this._formatValue = (t) => r(t, this._formatOptions), this._pointerDownPosition = null, this._displayedValue = "", this._editing = !1, this.alignment = "center", this.readOnly = !1, this.value = 0, this.arcgisChange = u({ cancelable: !1 });
+    }, this._formatValue = (t) => u(t, this._formatOptions), this._pointerDownPosition = null, this._displayedValue = "", this._editing = !1, this.alignment = "center", this.readOnly = !1, this.value = 0, this.arcgisChange = h({ cancelable: !1 });
   }
   static {
     this.properties = { _displayedValue: 16, _editing: 16, alignment: 3, editing: 39, labelFormatter: 0, readOnly: 7, value: 11 };
   }
   static {
-    this.styles = c;
+    this.styles = m;
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: !0 };
@@ -39,8 +39,11 @@ class d extends o {
     }
   }
   updated(t) {
-    const e = this._inputRef.value, i = this.renderRoot.querySelector(".readOnlyLabel");
-    e && i && (e.style.width = `${i.offsetWidth}px`);
+    const e = this._inputRef.value, i = this._buttonRef.value, a = this.renderRoot.querySelector(".readOnlyLabel");
+    if (e && i && a) {
+      const r = a.offsetWidth;
+      i.style.width = `${r}px`, e.style.width = `${r}px`;
+    }
   }
   _enterEdit() {
     this._editing || this.readOnly || (this._editing = !0, this.requestUpdate("editing", !1), this.updateComplete.then(async () => {
@@ -49,7 +52,7 @@ class d extends o {
     }));
   }
   _exitEdit(t, e = !1) {
-    this._editing && (t ? this._commitValue(this._inputRef.value) : this._inputRef.value && (this._displayedValue = this._internalLabelFormatter(this.value), this._inputRef.value.value = `${this.value}`), this._editing = !1, this.requestUpdate("editing", !0), e || this.updateComplete.then(async () => {
+    this._editing && (t && this._commitValue(this._inputRef.value), this._displayedValue = this._internalLabelFormatter(this.value), this._inputRef.value && (this._inputRef.value.value = `${this.value}`), this._editing = !1, this.requestUpdate("editing", !0), e || this.updateComplete.then(async () => {
       await this._buttonRef.value?.setFocus();
     }));
   }
@@ -100,12 +103,14 @@ class d extends o {
   }
   render() {
     const { alignment: t, _displayedValue: e } = this, i = [
-      s`<span class="readOnlyLabel"><span ${a(this._labelRef)}>${e}</span></span>`
+      n`<span class="readOnlyLabel"><span ${l(this._labelRef)}>${e}</span></span>`
     ];
-    return this.readOnly || i.push(s`<calcite-button .alignment=${t} appearance=transparent .hidden=${this._editing} kind=neutral @pointerdown=${this._onPointerDown} @click=${this._onClick} scale=s width=full ${a(this._buttonRef)}>${e}</calcite-button>`, s`<calcite-input-number .alignment=${t} group-separator .hidden=${!this._editing} number-button-type=none @calciteInputNumberChange=${this._onValueChange} @keydown=${this._onKeyDown} @blur=${this._onBlur} @input=${this._onInput} scale=s status=idle .value=${`${this.value}`} ${a(this._inputRef)}></calcite-input-number>`), i;
+    return this.readOnly || i.push(n`<calcite-button .alignment=${t} appearance=transparent .hidden=${this._editing} kind=neutral @pointerdown=${this._onPointerDown} @click=${this._onClick} scale=s width=full ${l(this._buttonRef)}>${e}</calcite-button>`, n`<calcite-input-number .alignment=${t} group-separator .hidden=${!this._editing} number-button-type=none @calciteInputNumberChange=${this._onValueChange} @keydown=${this._onKeyDown} @blur=${this._onBlur} @input=${this._onInput} scale=s status=idle .value=${`${this.value}`} ${l(this._inputRef)}></calcite-input-number>`), n`<div class=${d({
+      content: !0
+    })}>${i}</div>`;
   }
 }
-l("arcgis-label-input", d);
+o("arcgis-label-input", f);
 export {
-  d as ArcgisLabelInput
+  f as ArcgisLabelInput
 };

package/dist/components/arcgis-picker-input/customElement.d.ts

@@ -3,6 +3,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { IPopoverProps } from "../../utils/types.js";
 import type { Icon as Icon } from "@esri/calcite-components/components/calcite-icon";
 
+/** @internal */
 export abstract class ArcgisPickerInput extends LitElement {
   /**
    * If true, disables the component.

package/dist/components/arcgis-picker-input/customElement.js

@@ -1,18 +1,18 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as s } from "../../chunks/runtime.js";
-import { css as n, html as o } from "lit";
-import { LitElement as l, createEvent as i, safeStyleMap as a } from "@arcgis/lumina";
-import { createRef as r, ref as t } from "lit/directives/ref.js";
-const c = n`:host{display:flex}:host([disabled]){opacity:.25;pointer-events:none}button{overflow:hidden;background-color:transparent;align-items:center;border:none;border-radius:0;box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;gap:var(--calcite-space-sm);height:100%;justify-content:center;outline-color:transparent;outline-offset:0;padding:3px 0;padding-inline:3px var(--calcite-space-sm);position:relative;text-decoration:none;user-select:none;text-align:center;-webkit-appearance:none;width:100%;&:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-brand);outline-offset:var(--calcite-border-width-md)}&:hover{text-decoration:none}}.preview{border:var(--calcite-border-width-sm) solid #949494;display:flex;align-items:center;flex-grow:1}.container{display:flex;gap:5px;width:100%}::slotted([slot="preview"]){flex-grow:1;display:flex}calcite-icon{color:var(--calcite-color-text-3)}`;
-class p extends l {
+import { c as n } from "../../chunks/runtime.js";
+import { css as l, html as o } from "lit";
+import { LitElement as a, createEvent as i, safeStyleMap as r } from "@arcgis/lumina";
+import { createRef as c, ref as t } from "lit/directives/ref.js";
+const p = l`:host{display:flex}:host([disabled]){opacity:.25;pointer-events:none}button{overflow:hidden;background-color:transparent;align-items:center;border:none;border-radius:0;box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;gap:var(--calcite-space-sm);height:100%;justify-content:center;outline-color:transparent;outline-offset:0;padding:3px 0;padding-inline:3px var(--calcite-space-sm);position:relative;text-decoration:none;user-select:none;text-align:center;-webkit-appearance:none;width:100%;&:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-brand);outline-offset:var(--calcite-border-width-md)}&:hover{text-decoration:none}}.preview{border:var(--calcite-border-width-sm) solid #949494;display:flex;align-items:center;flex-grow:1}.container{display:flex;gap:5px;width:100%}::slotted([slot="preview"]){flex-grow:1;display:flex}calcite-icon{color:var(--calcite-color-text-3)}`;
+class d extends a {
   constructor() {
-    super(), this.panelEl = r(), this.open = !1, this.disabled = !1, this.iconEnd = "pencil", this.label = "", this.arcgisPopoverOpen = i(), this.arcgisPopoverClose = i(), this.listenOn(document.body, "arcgisPopoverOpen", this.onPopoverOpen);
+    super(), this.panelEl = c(), this.open = !1, this.disabled = !1, this.iconEnd = "pencil", this.label = "", this.arcgisPopoverOpen = i(), this.arcgisPopoverClose = i(), this.listenOn(document.body, "arcgisPopoverOpen", this.onPopoverOpen);
   }
   static {
     this.properties = { open: 16, disabled: 7, heading: 1, iconEnd: 1, intlDone: 1, label: 1, popoverProps: 0 };
   }
   static {
-    this.styles = c;
+    this.styles = p;
   }
   async close() {
     this.onPopoverClose();
@@ -48,10 +48,10 @@ class p extends l {
   }
   render() {
     const { popoverProps: e } = this;
-    return o`<calcite-popover pointer-disabled trigger-disabled @keyup=${this.handlePopoverKeyUp} .label=${this.label} .offsetDistance=${e?.offsetDistance ?? 0} .offsetSkidding=${e?.offsetSkidding ?? 0} .flipDisabled=${e?.flipDisabled ?? !1} .open=${this.disabled ? !1 : this.open} .overlayPositioning=${e?.overlayPositioning ?? "fixed"} .placement=${e?.placement ?? "bottom"} @calcitePopoverOpen=${this.handlePopoverOpen} .referenceElement=${e?.refElement ?? this.previewContainerEl}><calcite-panel closable .heading=${this.heading} style=${a(e?.maxHeight ? { maxHeight: e.maxHeight } : void 0)} @calcitePanelClose=${this.handlePanelClose} ${t(this.panelEl)}><slot name=content></slot><calcite-button appearance=solid slot=footer width=full .label=${this.intlDone} @click=${this.onPopoverClose}>${this.intlDone}</calcite-button></calcite-panel></calcite-popover><div class="container"><div class="preview" ${t(this.setPreviewContainerRef)}><button .disabled=${this.disabled} @click=${this.handleButtonClick} type=button .ariaLabel=${this.label} ${t(this.setButtonRef)}><slot name=preview></slot>${this.iconEnd ? o`<calcite-icon .icon=${this.iconEnd} scale=s></calcite-icon>` : null}</button></div><slot name=content-end></slot></div>`;
+    return o`<calcite-popover pointer-disabled trigger-disabled @keyup=${this.handlePopoverKeyUp} .label=${this.label} .offsetDistance=${e?.offsetDistance ?? 0} .offsetSkidding=${e?.offsetSkidding ?? 0} .flipDisabled=${e?.flipDisabled ?? !1} .open=${this.disabled ? !1 : this.open} .overlayPositioning=${e?.overlayPositioning ?? "fixed"} .placement=${e?.placement ?? "bottom"} @calcitePopoverOpen=${this.handlePopoverOpen} @calcitePopoverClose=${(s) => s.stopPropagation()} .referenceElement=${e?.refElement ?? this.previewContainerEl}><calcite-panel closable .heading=${this.heading} style=${r(e?.maxHeight ? { maxHeight: e.maxHeight } : void 0)} @calcitePanelClose=${this.handlePanelClose} ${t(this.panelEl)}><slot name=content></slot><calcite-button appearance=solid slot=footer width=full .label=${this.intlDone} @click=${this.onPopoverClose}>${this.intlDone}</calcite-button></calcite-panel></calcite-popover><div class="container"><div class="preview" ${t(this.setPreviewContainerRef)}><button .disabled=${this.disabled} @click=${this.handleButtonClick} type=button .ariaLabel=${this.label} ${t(this.setButtonRef)}><slot name=preview></slot>${this.iconEnd ? o`<calcite-icon .icon=${this.iconEnd} scale=s></calcite-icon>` : null}</button></div><slot name=content-end></slot></div>`;
   }
 }
-s("arcgis-picker-input", p);
+n("arcgis-picker-input", d);
 export {
-  p as ArcgisPickerInput
+  d as ArcgisPickerInput
 };

package/dist/components/arcgis-ramp-color/customElement.d.ts

@@ -2,6 +2,7 @@
 import type Color from "@arcgis/core/Color.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
+/** @internal */
 export abstract class ArcgisRampColor extends LitElement {
   /** @default "horizontal" */
   accessor layout: "horizontal" | "vertical";
@@ -12,6 +13,7 @@ export abstract class ArcgisRampColor extends LitElement {
   accessor stops: ColorStop[];
 }
 
+/** @internal */
 export interface ColorStop {
   color: Color | string;
   value: number;

package/dist/components/arcgis-ramp-color-break/customElement.d.ts

@@ -3,6 +3,7 @@ import type Color from "@arcgis/core/Color.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisRampColor } from "../arcgis-ramp-color/customElement.js";
 
+/** @internal */
 export abstract class ArcgisRampColorBreak extends LitElement {
   /** @default "horizontal" */
   accessor layout: ArcgisRampColor["layout"];
@@ -13,6 +14,7 @@ export abstract class ArcgisRampColorBreak extends LitElement {
   accessor stops: ColorBreak[];
 }
 
+/** @internal */
 export interface ColorBreak {
   color: Color | string;
   max: number;

package/dist/components/arcgis-ramp-opacity/customElement.d.ts

@@ -3,6 +3,7 @@ import type Color from "@arcgis/core/Color.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisRampColor } from "../arcgis-ramp-color/customElement.js";
 
+/** @internal */
 export abstract class ArcgisRampOpacity extends LitElement {
   accessor fillColor: Color | string;
   /** @default "horizontal" */

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

@@ -1,13 +1,12 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 import type { Popover as Popover } from "@esri/calcite-components/components/calcite-popover";
 
 /**
- * The Slider component is used to filter data or collect numeric input from users. It supports single or multiple thumbs, configured via the
- * [values](#values) property. The Slider can be displayed in horizontal or vertical [layouts](#layout), supports snapping to defined [steps](#steps),
- * configurable value [precision](#precision), and custom [label formatting](#labelFormatter). It also includes keyboard interaction,
+ * The slider component is used to filter data or collect numeric input from users. It supports single or multiple thumbs, configured via the
+ * [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#values) property. The slider can be displayed in a horizontal or vertical [layout](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#layout), and it supports snapping to defined [steps](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#steps),
+ * configurable value [precision](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#precision), and a custom [labelFormatter](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#labelFormatter). It also includes keyboard interaction,
  * optional editable labels, and customizable popover content.
  *
  * The slider component can be set up with the [arcgis-ticks](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-ticks/) component. See the example below:
@@ -18,17 +17,17 @@ import type { Popover as Popover } from "@esri/calcite-components/components/cal
  * </arcgis-slider>
  * ```
  *
- * ### Which slider should you use: arcgis-slider or calcite-slider?
+ * > [!TIP]
+ * > Which slider should you use: `arcgis-slider` or `calcite-slider`?
  * >
- * > In general, use [calcite-slider](https://developers.arcgis.com/calcite-design-system/components/slider/) over `arcgis-slider`.
- * > It covers common slider use cases and works well in most scenarios.
+ * > Use [calcite-slider](https://developers.arcgis.com/calcite-design-system/components/slider/) by default. It provides a consistent UI/UX and supports most common slider use cases.
  * >
- * > Use `arcgis-slider` only when you need functionality that `calcite-slider` does not provide, such as:
- * > * [Vertical layout](#layout): `arcgis-slider` supports `layout="vertical"`.
- * > * Custom range display: `arcgis-slider` supports [fullRangeMin](#fullRangeMin) and [fullRangeMax](#fullRangeMax) for displaying a wider
- * > range than the interactive range.
- * > * More than two values: `arcgis-slider` supports an arbitrary number of slider values, beyond single-value or range (two-value) sliders.
- * > * Slot support: Use the `content-start`, `content-end`, and `popover` slots to render custom content before the track, after the track, or inside the popover.
+ * > Choose `arcgis-slider` when you need more advanced behavior, such as:
+ * >
+ * > * A vertical slider via [layout](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#layout).
+ * > * More than two [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#values) in a single slider.
+ * > * A display range that extends beyond the interactive range using [fullRangeMin](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#fullRangeMin) and [fullRangeMax](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#fullRangeMax).
+ * > * Additional slotted content using the `content-start`, `content-end`, or `popover` [slots](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#slots).
  *
  * @slot [content-start] - A slot for elements before the track.
  * @slot [content-end] - A slot for elements after the track.
@@ -41,14 +40,14 @@ export abstract class ArcgisSlider extends LitElement {
    * so it may reflect the thumb’s last set position.
    *
    *
-   * It returns
+   * It returns:
    * - `undefined` when no value is active
    * - a `number` when a single value is active
    * - `"all"` when the range (segment) is active
    *
-   * Listen to [arcgisActiveValueChange](#arcgisActiveValueChange) to be notified when a value becomes active or inactive.
+   * Listen to [@arcgisActiveValueChange](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#event-arcgisActiveValueChange) to be notified when a value becomes active or inactive.
    *
-   * @see [arcgisActiveValueChange](#arcgisActiveValueChange)
+   * @see [@arcgisActiveValueChange](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#event-arcgisActiveValueChange)
    */
   get activeValue(): number | "all" | undefined;
   /**
@@ -82,13 +81,13 @@ export abstract class ArcgisSlider extends LitElement {
    */
   accessor fillPlacement: "end" | "none" | "start";
   /**
-   * Sets the maximum value of the slider display full range.
-   * When specified, the slider track is scaled from [fullRangeMin](#fullRangeMin) to `fullRangeMax`, while
-   * the thumbs remain constrained to the interactive range defined by [min](#min) and [max](#max).
+   * Sets the maximum value of the slider's displayed range.
+   * When specified, the slider track is scaled from [fullRangeMin](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#fullRangeMin) to `fullRangeMax`, while
+   * the thumbs remain constrained to the interactive range defined by [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#min) and [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#max).
    *
-   * The `fullRangeMax` must be greater than or equal to [max](#max) property of the slider.
+   * The `fullRangeMax` must be greater than or equal to [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#max) property of the slider.
    *
-   * @see [fullRangeMin](#fullRangeMin)
+   * @see [fullRangeMin](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#fullRangeMin)
    * @example
    * ```html
    * <!-- Slider with a full range from 0 to 100, while only allowing thumb values between 25 and 75. -->
@@ -97,13 +96,13 @@ export abstract class ArcgisSlider extends LitElement {
    */
   accessor fullRangeMax: number | undefined;
   /**
-   * Sets the minimum value of the slider display full range.
-   * When specified, the slider track is scaled from `fullRangeMin` to [fullRangeMax](#fullRangeMax), while
-   * the thumbs remain constrained to the range defined by [min](#min) and [max](#max).
+   * Sets the minimum value of the slider's displayed range.
+   * When specified, the slider track is scaled from `fullRangeMin` to [fullRangeMax](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#fullRangeMax), while
+   * the thumbs remain constrained to the range defined by [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#min) and [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#max).
    *
-   * The `fullRangeMin` must be less than or equal to [min](#min) property of the slider.
+   * The `fullRangeMin` must be less than or equal to [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#min) property of the slider.
    *
-   * @see [fullRangeMax](#fullRangeMax)
+   * @see [fullRangeMax](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#fullRangeMax)
    * @example
    * ```html
    * <!-- Slider with a full range from 0 to 100, while only allowing thumb values between 25 and 75. -->
@@ -123,7 +122,7 @@ export abstract class ArcgisSlider extends LitElement {
    */
   accessor keyboardLargeStep: number;
   /**
-   * Allows customizing how slider labels are formatted for [min](#min), [max](#max), and thumb values.
+   * Allows customizing how slider labels are formatted for [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#min), [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#max), and thumb values.
    * The formatted value is used for the visible labels and for the thumb’s accessible value text via `aria-valuetext`.
    * Return `null` or `undefined` to use the default formatting.
    *
@@ -150,24 +149,24 @@ export abstract class ArcgisSlider extends LitElement {
    * };
    * ```
    */
-  accessor labelFormatter: ((value: number, type: "max" | "min" | "value", defaultFormatter: (value: number) => string) => nullish | string) | undefined;
+  accessor labelFormatter: (value: number, type: "max" | "min" | "value", defaultFormatter: (value: number) => string) => string | null | undefined;
   /**
    * Determines the layout/orientation of the Slider component. By default, the slider will render horizontally with the min value on the left side
    * of the track.
    *
    * @default "horizontal"
-   * @see [mirrored](#mirrored)
+   * @see [mirrored](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#mirrored)
    */
   accessor layout: "horizontal" | "vertical";
   /**
    * The maximum value for the slider thumbs. Thumbs will not move past this value.
    *
-   * To display the `max` label on the slider, set [showRangeLabels](#showRangeLabels) to `true`.
-   * To allow the end user to modify the `max` value, set [rangeLabelsEditingEnabled](#rangeLabelsEditingEnabled) to `true`.
+   * To display the `max` label on the slider, set [showRangeLabels](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#showRangeLabels) to `true`.
+   * To allow the end user to modify the `max` value, set [rangeLabelsEditingEnabled](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#rangeLabelsEditingEnabled) to `true`.
    *
-   * @see [rangeLabelsEditingEnabled](#rangeLabelsEditingEnabled)
-   * @see [showRangeLabels](#showRangeLabels)
-   * @see [fullRangeMax](#fullRangeMax)
+   * @see [rangeLabelsEditingEnabled](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#rangeLabelsEditingEnabled)
+   * @see [showRangeLabels](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#showRangeLabels)
+   * @see [fullRangeMax](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#fullRangeMax)
    */
   accessor max: number;
   /**
@@ -201,18 +200,18 @@ export abstract class ArcgisSlider extends LitElement {
   }>;
   /**
    * The minimum value for the slider thumbs. Thumbs will not move past this value.
-   * To display the `min` label on the slider, set [showRangeLabels](#showRangeLabels) to `true`.
-   * To allow the end user to modify the `min` value, set [rangeLabelsEditingEnabled](#rangeLabelsEditingEnabled) to `true`.
+   * To display the `min` label on the slider, set [showRangeLabels](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#showRangeLabels) to `true`.
+   * To allow the end user to modify the `min` value, set [rangeLabelsEditingEnabled](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#rangeLabelsEditingEnabled) to `true`.
    *
-   * @see [rangeLabelsEditingEnabled](#rangeLabelsEditingEnabled)
-   * @see [showRangeLabels](#showRangeLabels)
+   * @see [rangeLabelsEditingEnabled](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#rangeLabelsEditingEnabled)
+   * @see [showRangeLabels](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#showRangeLabels)
    */
   accessor min: number;
   /**
    * When `true`, the slider will display values from high to low. This inverts the direction of the slider.
    *
    * @default false
-   * @see [layout](#layout)
+   * @see [layout](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#layout)
    */
   accessor mirrored: boolean;
   /**
@@ -268,8 +267,8 @@ export abstract class ArcgisSlider extends LitElement {
    * The labels of the thumbs will display two decimal places, but the precision of the actual
    * thumb values will not be lost even when the user slides or moves the thumb.
    *
-   * Keep in mind this property rounds thumb [values](#values) and shouldn't be used exclusively
-   * for formatting purposes. To format thumb `labels`, use the [labelFormatter](#labelFormatter)
+   * Keep in mind this property rounds thumb [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#values) and shouldn't be used exclusively
+   * for formatting purposes. To format thumb `labels`, use the [labelFormatter](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#labelFormatter)
    * property.
    *
    * @default 4
@@ -282,18 +281,18 @@ export abstract class ArcgisSlider extends LitElement {
    */
   accessor precision: number;
   /**
-   * When `true`, users can edit the [min](#min) and [max](#max) range labels via keyboard input.
+   * When `true`, users can edit the [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#min) and [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#max) range labels via keyboard input.
    * Editing these labels updates the slider’s interactive range.
    *
    * @default false
    */
   accessor rangeLabelsEditingEnabled: boolean;
   /**
-   * Controls where the [min](#min) and [max](#max) range labels are positioned relative to the track.
-   * This property only affects the slider when [layout](#layout) is `"horizontal"`.
+   * Controls where the [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#min) and [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#max) range labels are positioned relative to the track.
+   * This property only affects the slider when [layout](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#layout) is `"horizontal"`.
    *
-   * - `"center"` (default): Places the [min](#min) and [max](#max) labels aligned with the track.
-   * - `"end"`: Places the range labels below the the track.
+   * - `"center"` (default): Places the [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#min) and [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#max) labels aligned with the track.
+   * - `"end"`: Places the range labels below the track.
    *
    * @default "center"
    */
@@ -305,34 +304,36 @@ export abstract class ArcgisSlider extends LitElement {
    */
   accessor segmentsDraggingDisabled: boolean;
   /**
-   * Indicates whether to [min](#min) and [max](#max) range labels are visible on the slider.
+   * Indicates whether [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#min) and [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#max) range labels are visible on the slider.
    *
    * @default false
    */
   accessor showRangeLabels: boolean;
   /**
-   * Sets steps, or intervals, on the slider that restrict user
+   * Sets intervals on the slider that restrict user
    * input to specific values. If an array of numbers is passed to this
    * property, the slider thumbs may only be moved to the positions
    * specified in the array.
    *
+   * This can be set as comma-separated numbers in the attribute (e.g., `<arcgis-slider steps="10, 20, 30"></arcgis-slider>`)
+   * or programmatically as either a single number or an array of numbers (e.g., `slider.steps = 10`, `slider.steps = [10, 20, 30]`).
+   *
    * If a single number is set, then steps are set along the entire
-   * slider range at an interval of the provided value. In this scenario,
-   * the user may only slide the thumbs to values at the provided interval.
-   * For example, if a value of `0.5` is set here, and the slider
-   * [min](#min) is `0` and the slider [max](#max) is `10`, then the user will
-   * only be able to update the thumbs to values of 0, 0.5, 1.0, 1.5, 2.0, etc.
+   * slider range at an interval of the provided value. The user may
+   * only slide the thumbs to values at the provided interval.
+   * For example, if a value of `0.5` is set and the slider
+   * [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#min) is `0` and [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#max) is `2`, then the user will
+   * only be able to update the thumbs to values of 0, 0.5, 1.0, 1.5, and 2.0.
    *
    * @example
    * ```html
-   * <!-- set steps at an interval of 0.5. So the -->
-   * <!-- slider thumb snaps at values of 0.5, 1.0, 1.5, etc. -->
+   * <!-- In this example, the thumb snaps to every value evenly divisible by 0.5 between 0 and 10. -->
    * <arcgis-slider min="0" max="10" steps="0.5" values="5"></arcgis-slider>
    * ```
    * @example
    * ```html
-   * <!-- Set steps at specific slider positions -->
-   * <arcgis-slider min="0" max="100" steps="5, 10, 15, 20, 25, 30, 35, 40" values="15, 30"></arcgis-slider>
+   * <!-- In this example, the thumb snaps to the specified values in the steps array (2, 4, 6, and 8). -->
+   * <arcgis-slider min="0" max="10" steps="2, 4, 6, 8" values="4"></arcgis-slider>
    * ```
    */
   accessor steps: number[] | number | undefined;
@@ -352,7 +353,7 @@ export abstract class ArcgisSlider extends LitElement {
    * when the user clicks a thumb value label. This allows the user to move the slider
    * thumb to precise values without sliding the thumbs.
    *
-   * ![Slider with editable labels](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/sliders/slider-edit-label.png)
+   * ![Slider with editable labels](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/sliders/slider-edit-label.avif)
    *
    * @default false
    */
@@ -363,14 +364,18 @@ export abstract class ArcgisSlider extends LitElement {
    * @default "start"
    */
   accessor valueLabelsPlacement: "end" | "start";
-  /** An array of numbers representing absolute thumb positions on the slider. */
+  /**
+   * An array of numbers representing absolute thumb positions on the slider. This can be set as comma-separated
+   * numbers in the attribute (e.g., `<arcgis-slider values="10, 20, 30"></arcgis-slider>`) or programmatically as an
+   * array of numbers (e.g., `slider.values = [10, 20, 30]`).
+   */
   accessor values: number[];
   /** Permanently destroys the component. */
   destroy(): Promise<void>;
   /**
-   * Fires when the [activeValue](#activeValue) changes as a thumb or the range gains or loses focus.
-   * This event does not fire when [values](#values) change. Use [arcgisInput](#arcgisInput) for continuous updates or
-   * [arcgisChange](#arcgisChange) when the interaction is committed.
+   * Fires when the [activeValue](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#activeValue) changes as a thumb or the range gains or loses focus.
+   * This event does not fire when [values](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#values) change. Use [@arcgisInput](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#event-arcgisInput) for continuous updates or
+   * [@arcgisChange](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#event-arcgisChange) when the interaction is committed.
    *
    * @example
    * ```js
@@ -396,13 +401,13 @@ export abstract class ArcgisSlider extends LitElement {
    *
    * renderActive();
    * ```
-   * @see [activeValue](#activeValue)
+   * @see [activeValue](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#activeValue)
    */
   readonly arcgisActiveValueChange: import("@arcgis/lumina").TargetedEvent<this, void>;
   /**
-   * Fires when the thumb or range is released on the component.
+   * Fires when the thumb or range is released on the slider.
    *
-   * Use [arcgisInput](#arcgisInput) for continuous updates during a drag.
+   * Use [@arcgisInput](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#event-arcgisInput) for continuous updates during a drag.
    *
    * @example
    * ```js
@@ -450,8 +455,8 @@ export abstract class ArcgisSlider extends LitElement {
    */
   readonly arcgisInput: import("@arcgis/lumina").TargetedEvent<this, void>;
   /**
-   * Fires when the slider's [min](#min) and [max](#max) range changes.
-   * This occurs when the user edits the [min](#min) or [max](#max) range labels (when enabled).
+   * Fires when the slider's range changes.
+   * This occurs when the user edits the [min](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#min) or [max](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-slider/#max) range labels (when enabled).
    *
    * @example
    * ```js