@arcgis/map-components 5.1.0-next.83 → 5.1.0-next.85

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

@@ -1,83 +1,103 @@
 /// <reference path="../../index.d.ts" />
-import type WebMap from "@arcgis/core/WebMap.js";
-import type Collection from "@arcgis/core/core/Collection.js";
 import type TimeExtent from "@arcgis/core/time/TimeExtent.js";
+import type Collection from "@arcgis/core/core/Collection.js";
+import type WebMap from "@arcgis/core/WebMap.js";
+import type WebScene from "@arcgis/core/WebScene.js";
+import type MapView from "@arcgis/core/views/MapView.js";
+import type SceneView from "@arcgis/core/views/SceneView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ArcgisReferenceElement, IconName } from "../types.js";
-import type { TimeSliderViewModelTriggerActionEvent } from "@arcgis/core/widgets/TimeSlider/TimeSliderViewModel.js";
-import type { TimeSliderSettings, Action, TimeSliderMode, TimeSliderState, Stops } from "@arcgis/core/widgets/TimeSlider/types.js";
-import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.js";
-import type { Icon } from "@esri/calcite-components/components/calcite-icon";
-import type { TimeSliderLayout } from "@arcgis/core/widgets/TimeSlider.js";
-import type { TickConfig } from "@arcgis/core/widgets/Slider/types.js";
+import type { Action, DateLabelFormatter, Layout, TickConfig, TimeSliderSettings, TriggerActionEvent, Mode, State, Stops } from "./types.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**
- * The Time Slider component simplifies visualization of temporal data in your application.
+ * The `<arcgis-time-slider>` component provides interactive time selection and playback within a defined temporal extent.
  *
  * @since 4.28
  */
 export abstract class ArcgisTimeSlider extends LitElement {
+  /** @internal */
+  protected readonly _messages: {
+      componentLabel: string;
+      control: {
+          play: string;
+          stop: string;
+      };
+      emptyTimeExtent: string;
+      noTimeExtent: string;
+      options: string;
+      pagination: {
+          next: string;
+          previous: string;
+      };
+  } & T9nMeta<{
+      componentLabel: string;
+      control: {
+          play: string;
+          stop: string;
+      };
+      emptyTimeExtent: string;
+      noTimeExtent: string;
+      options: string;
+      pagination: {
+          next: string;
+          previous: string;
+      };
+  }>;
   /**
-   * Defines actions that will appear in a menu when the user clicks the ellipsis button
-   * ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/ellipsis.avif) in the component. The
-   * ellipsis button will not display if this property is `null` or if the collection is empty.
-   * Each [Action](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/types/#Action) is defined with a unique id, a title,
-   * and an icon.
+   * When defined, the actions will be displayed in an ellipsis button menu within the component.
+   * This property accepts a collection of actions.
+   * Each action is an object that must contain a unique `id`, a `title`, and an `icon`.
    *
-   * The [@trigger-action](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#event-trigger-action) event fires each time an action in the menu is clicked. This event
-   * can be used to execute custom code such as setting the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) to a specific date or copying the
-   * timeExtent to the browser's clipboard.
+   * When an action is clicked, the component emits a [@arcgisTriggerAction](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-slider/#event-arcgisTriggerAction) event.
    *
    * [![widgets-timeSlider-actions](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/widgets-timeslider-actions.avif)](https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-timeslider-offset)
    *
-   * @since 4.21
-   * @see [Sample - TimeSlider with offset](https://developers.arcgis.com/javascript/latest/sample-code/widgets-timeslider-offset/)
    * @example
-   * // Create a TimeSlider with two actions to snap the thumb to
-   * // two specific time extents.
-   * const timeSlider = new TimeSlider({
-   *   container: "timeSliderDiv",
-   *   fullTimeExtent: {
-   *     start: new Date(2011, 0, 1),
-   *     end: new Date(2012, 0, 1)
-   *   },
-   *   mode: "instant",
-   *   actions: [
-   *     {
-   *       id: "quake",
-   *       icon: "exclamation-mark-triangle",
-   *       title: "Jump to Earthquake"
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-right"></arcgis-time-slider>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent, Collection, reactiveUtils] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *     "@arcgis/core/core/Collection.js",
+   *     "@arcgis/core/core/reactiveUtils.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2000, 0, 1),
+   *     end: new Date(2010, 0, 1),
+   *   });
+   *   timeSliderElement.actions = new Collection([
+   *     { id: "quake", icon: "exclamation-mark-triangle", title: "Jump to Earthquake" },
+   *     { id: "quake-plus-one-month", icon: "organization", title: "One month later" },
+   *   ]);
+   *
+   *   reactiveUtils.on(
+   *     () => timeSliderElement,
+   *     "arcgisTriggerAction",
+   *     (event) => {
+   *       const id = event.detail.action.id;
+   *       switch (id) {
+   *         case "quake":
+   *           console.log("Jump to Earthquake action triggered");
+   *           break;
+   *         case "quake-plus-one-month":
+   *           console.log("One month later action triggered");
+   *           break;
+   *       }
    *     },
-   *     {
-   *       id: "quake-plus-one-month",
-   *       icon: "organization",
-   *       title: "One month later"
-   *     }
-   *   ]
-   * });
-   *
-   * // listen to timeSlider's trigger-action event
-   * // check what action user clicked on and respond accordingly.
-   * timeSlider.on("trigger-action", (event) => {
-   *   const quake = new Date(Date.UTC(2011, 3, 11, 8, 16, 12));
-   *   const oneMonthLater = new Date(quake.getTime()).setMonth(quake.getMonth() + 1);
-   *   switch(event.action.id) {
-   *     case "quake":
-   *       timeSlider.timeExtent = {
-   *         start: quake,
-   *         end: quake
-   *       };
-   *       break;
-   *     case "quake-plus-one-month":
-   *       timeSlider.timeExtent = {
-   *         start: oneMonthLater,
-   *         end: oneMonthLater
-   *       };
-   *       break;
-   *   }
-   * });
+   *   );
+   * </script>
+   * ```
    */
-  accessor actions: Collection<Action>;
+  accessor actions: Collection<Action> | undefined;
   /**
    * If true, the component will not be destroyed automatically when it is
    * disconnected from the document. This is useful when you want to move the
@@ -93,46 +113,94 @@ export abstract class ArcgisTimeSlider extends LitElement {
    *
    * @default false
    * @example
-   * // Create a timeslider widget that is initially disabled.
-   * const timeSlider = new TimeSlider({
-   *   container: "timeSliderDiv",
-   *   fullTimeExtent: {
-   *     start: new Date(2000, 5, 1),
-   *     end: new Date(2010, 0, 1)
-   *   },
-   *   disabled: true
-   * });
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-right" disabled></arcgis-time-slider>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2000, 0, 1),
+   *     end: new Date(2010, 0, 1),
+   *   });
+   *
+   *   console.log("Time slider disabled:", timeSliderElement.disabled); // true
+   * </script>
+   * ```
    */
   accessor disabled: boolean;
   /**
-   * Lists the specific locations on the timeline where handle(s) will snap to when manipulated.
+   * The dates that the time slider's handles will snap to when manipulated.
    *
    * @example
-   * timeSlider.effectiveStops.forEach((stop) => {
-   *   console.log(stop);
-   * });
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-right"></arcgis-time-slider>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   // The time-slider will span the first five days of 2000.
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2000, 0, 1),
+   *     end: new Date(2000, 0, 6),
+   *   });
+   *
+   *   // Specify stops at five evenly spaced intervals.
+   *   timeSliderElement.stops = {
+   *     count: 5,
+   *   };
+   *
+   *   // Display the effective stops to the console.
+   *   console.log(timeSliderElement.effectiveStops.map(
+   *     (date) => new Intl.DateTimeFormat("en-US", { dateStyle: "short" }).format(date)
+   *   ).join(", "));
+   *   // Output: "1/1/00", "1/2/00", "1/3/00", "1/4/00", "1/6/00"
+   * </script>
+   * ```
    */
-  get effectiveStops(): Array<Date> | null | undefined;
+  get effectiveStops(): Date[] | null | undefined;
   /**
-   * The temporal extent of the entire slider.
-   * It defines the entire time period within which you can visualize
-   * your time aware data using the time slider component.
+   * The temporal extent of the entire slider. It defines the upper and lower bounds of the time slider and the range
+   * within which the thumbs can be manipulated.
    *
    * @example
-   * // Create a new TimeSlider with set dates
-   * const timeSlider = new TimeSlider({
-   *   container: "timeSliderDiv",
-   *   view: view
-   * });
-   *
-   * // wait for the time-aware layer to load
-   * layer.when(() => {
-   *   // set up time slider properties based on layer timeInfo
-   *   timeSlider.fullTimeExtent = layer.timeInfo.fullTimeExtent;
-   *   timeSlider.stops = {
-   *    interval: layer.timeInfo.interval
-   *   };
-   * });
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-right"></arcgis-time-slider>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   // The time-slider will span ten years from 2000 to 2010.
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2000, 0, 1),
+   *     end: new Date(2010, 0, 1),
+   *   });
+   * </script>
+   * ```
    */
   accessor fullTimeExtent: TimeExtent | null | undefined;
   /**
@@ -140,95 +208,139 @@ export abstract class ArcgisTimeSlider extends LitElement {
    * Typically used when the component is controlled by another component (e.g. by the Expand component).
    *
    * @default "clock"
-   * @since 4.27
    * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
    */
-  get icon(): Icon["icon"];
-  set icon(value: IconName);
+  accessor icon: IconName | undefined;
+  /** The component's default label. */
+  accessor label: string | undefined;
   /**
-   * The component's default label.
+   * An optional callback function that can be used to customize the content of the minimum, maximum, and extent labels.
+   * The function receives the date(s) to be formatted, the type of label to format, the HTML element in which the
+   * formatted string will be placed, and the layout of the component as arguments.
    *
-   * @since 4.11
+   * @example
+   * The following snippet will display the day of the week (e.g. Monday, Tuesday, etc.) rather than the default
+   * date format for the min, max, and extent labels.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-right" mode="instant"></arcgis-time-slider>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent, TimeInterval] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *     "@arcgis/core/time/TimeInterval.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2026, 3, 6),
+   *     end: new Date(2026, 3, 10),
+   *   });
+   *   timeSliderElement.stops = {
+   *     interval: new TimeInterval({
+   *       unit: "days",
+   *       value: 1,
+   *     }),
+   *   };
+   *
+   *   function getDayOfTheWeek(date: Date): string {
+   *     return date.toLocaleDateString("en-US", { weekday: "long" });
+   *   }
+   *
+   *   timeSliderElement.labelFormatFunction = (value, type, element, layout) => {
+   *   element.innerHTML =
+   *     type === "extent"
+   *       ? getDayOfTheWeek(date[0]) // Format the start date of the time-slider's current time extent.
+   *       : getDayOfTheWeek(date);   // Format the min/max of the time-slider's full time extent.
+   *   };
+   * </script>
+   * ```
    */
-  accessor label: string;
+  accessor labelFormatFunction: DateLabelFormatter | undefined;
   /**
-   * Determines the layout used by the TimeSlider component.
+   * Defines the layout of the component. The layout determines the orientation of the component elements and how much space they consume.
    *
-   * Possible values are listed below:
-   * | Value   | Description |
-   * | ---     | --- |
-   * | auto    | Automatically uses the "compact" layout when the component width is less than 858 pixels. Otherwise the "wide" layout it used. |
-   * | compact | Component elements are oriented vertically. This layout is better suited to narrower widths. |
-   * | wide    | Component elements are oriented laterally. This thinner design is better suited to wide applications. |
+   * There are main layouts, "compact" and "wide", and an "auto" layout that switches between the two based on the component's width.
+   * The "compact" layout stacks the elements vertically and is better suited for narrow widths, while the "wide"
+   * layout arranges the elements laterally and is better for wider applications.
    *
    * @default "auto"
-   * @since 4.16
-   * @example timeSlider.layout = "compact";
+   * @example
+   * Explicitly set the layout to "wide".
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-right" layout="wide"></arcgis-time-slider>
+   * </arcgis-map>
+   * ```
    */
-  accessor layout: TimeSliderLayout;
+  accessor layout: Layout;
   /**
-   * When `true`, the time slider will play its animation in a loop.
+   * When `true`, time slider will restart from the beginning when it reaches the end of the slider when playing.
    *
    * @default false
    * @example
-   * // Start a time slider animation that advances every second
-   * // and restarts when it reaches the end.
-   * timeSlider.set({
-   *   loop: true,
-   *   playRate: 1000
-   * });
-   * timeSlider.play();
+   * Set the time slider to loop continuously while playing.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-right" loop></arcgis-time-slider>
+   * </arcgis-map>
+   * ```
    */
   accessor loop: boolean;
   /**
-   * The time slider mode. This property is used for defining if the temporal data will be displayed
-   * cumulatively up to a point in time, a single instant in time, or within a time range. See
-   * the following table for possible values.
+   * Replace localized message strings with your own strings.
    *
-   * Possible Values       | Description   | Example |
-   * ----------------------|-------------- | ------- |
-   * instant               | The slider will show temporal data that falls on a single instance in time. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `end` dates to same date: `{start: sameDate, end: sameDate}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-instance.avif"> |
-   * time-window           | The slider will show temporal data that falls within a given time range. This is the default. Set [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` and `date` properties to desired dates. | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-time-window.avif"> |
-   * cumulative-from-start | Similar to `time-window` with the start time is always pinned to the start of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to `null` and set `end` date to a desired date: `{start: null, end: date}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-start.avif"> |
-   * cumulative-from-end   | Also, similar to the `time-window` with the end time pinned to the end of the slider. Set the [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property's `start` date to a desired date and set `end` date to `null`: `{start: date, end: null}` | <img alt="mode-instance" src="https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/timeslider/mode-from-end.avif"> |
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: {
+      componentLabel?: string | undefined;
+      control?: {
+          play?: string | undefined;
+          stop?: string | undefined;
+      } | undefined;
+      emptyTimeExtent?: string | undefined;
+      noTimeExtent?: string | undefined;
+      options?: string | undefined;
+      pagination?: {
+          next?: string | undefined;
+          previous?: string | undefined;
+      } | undefined;
+  };
+  /**
+   * The time slider mode. The mode determines how the time extent is calculated based on the position of the thumb(s)
+   * and the behavior of the component when the thumbs are manipulated.
    *
    * @default "time-window"
-   * @see [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent)
    * @example
-   * // Create a single thumbed time slider that includes all historic content.
-   * const timeSlider = new TimeSlider({
-   *   container: "timeSliderDiv",
-   *   view: view,
-   *   mode: "cumulative-from-start",
-   *   fullTimeExtent: {
-   *     start: new Date(2000, 0, 1),
-   *     end: new Date(2010, 0, 1)
-   *   },
-   *   timeExtent: {
-   *     start: null,
-   *     end: new Date(2001, 0, 1) //end date
-   *   }
-   * });
+   * Set the mode to "instant" to show temporal data that falls on a single instance in time.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-right" mode="instant"></arcgis-time-slider>
+   * </arcgis-map>
+   * ```
    */
-  accessor mode: TimeSliderMode;
+  accessor mode: Mode;
   /**
-   * The time (in milliseconds) between animation steps.
+   * When `arcgis-time-slider` is playing, the play rate determines the interval (in milliseconds) between animation steps.
    *
    * > [!WARNING]
    * >
-   * > When a [View](https://developers.arcgis.com/javascript/latest/references/core/views/View/) is associated with a TimeSlider and the TimeSlider is playing, the playback will pause before advancing if the View is still updating.
-   * > For example, if the `playRate` is set to 1,000 (one second) and the `View` takes 1.5 seconds to render then the TimeSlider thumb(s) will advance every
-   * > 1.5 seconds rather than every second.
+   * > When `arcgis-time-slider` is associated with a `arcgis-map` or `argis-scene` component, the actual playback rate may differ.
+   * > Specifically, the current time extent will only advance after the designated play rate interval and after the view has finished updating.
+   * > This means that if the view takes longer to update than the specified play rate, the effective play rate will be slower than expected.
    *
    * @default 1000
    * @example
-   * // Start a time slider animation that advances
-   * // ten times a second and stops when it reaches the end.
-   * timeSlider.set({
-   *   loop: false,
-   *   playRate: 100
-   * });
-   * timeSlider.play();
+   * Set the play rate to 500 milliseconds (half a second).
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-right" play-rate="500"></arcgis-time-slider>
+   * </arcgis-map>
+   * ```
    */
   accessor playRate: number;
   /**
@@ -242,260 +354,483 @@ export abstract class ArcgisTimeSlider extends LitElement {
    *
    * @default "disabled"
    * @example
-   * // Display the current state of the view model.
-   * switch (timeSlider.viewModel.state) {
-   *   case "disabled":
-   *     console.log("The view is not ready or some property are not set.");
-   *     break;
-   *   case "ready":
-   *     console.log("The time slider is ready for use.");
-   *     break;
-   *   case "playing":
-   *     console.log("The time slider is currently animating.");
-   *     break;
-   * }
+   * The following snippet will log the time slider's state to the console whenever it changes.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-right"></arcgis-time-slider>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent, reactiveUtils] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *     "@arcgis/core/core/reactiveUtils.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2026, 3, 6),
+   *     end: new Date(2026, 3, 10),
+   *   });
+   *   reactiveUtils.watch(
+   *     () => timeSliderElement.state,
+   *     (state) => {
+   *       console.log("Time slider state:", state);
+   *     },
+   *   );
+   * </script>
+   * ```
    */
-  get state(): TimeSliderState;
+  get state(): State;
   /**
-   * Defines specific locations on the time slider where thumbs will snap to when manipulated.
-   * If unspecified, ten evenly spaced stops will be added.
+   * Defines the stops on the time slider. Stops are specific dates that the thumb, or thumbs, will snap to when manipulated.
    *
-   * For continuous sliding, set `stops` to `null`:
+   * @default { count : 10 }
+   * @example
+   * To allow thumbs to snap to evenly spaced intervals, assign an object with a `count` property as shown below.
+   * The default value for stops is ten evenly spaced intervals across the full time extent.
    * ```js
-   * timeSlider.stops = null;
-   * ```
-   *
-   * To define regularly spaced stops, parse an object with `interval` and `timeExtent` properties
-   * with types [TimeInterval](https://developers.arcgis.com/javascript/latest/references/core/time/TimeInterval/) and [TimeExtent](https://developers.arcgis.com/javascript/latest/references/core/time/TimeExtent/) respectively.
-   * The [timeExtent](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#timeExtent) property is optional and used to confine stops to a certain date range.
-   * This property is useful to commence stops on a specific day of the week or month.
-   * If a stop definition by interval results in excess of 10,000 stops, then the view model
-   * will default to ten evenly spaced stops.
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
    *
+   *   timeSliderElement.stops = {
+   *     count: 10,
+   *   };
+   * </script>
+   * ```
+   * @example
+   * To allow thumbs to be manipulated continuously without snapping to specific dates, set `stops` to `null`:
    * ```js
-   * // Add yearly intervals starting from the beginning of the TimeSlider.
-   * timeSlider.stops = {
-   *   interval: {
-   *     value: 1,
-   *     unit: "years"
-   *   }
-   * };
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   timeSliderElement.stops = null;
+   * </script>
    * ```
-   * Rather than setting the stops as time intervals, the TimeSlider can be divided into evenly spaced
-   * stops using the `count` property. Similar to the previous method, divisions can be confined to a specific date range
-   * using the optional timeExtent property.
+   * @example
+   * To allow thumbs to snap to specific dates, assign an array of dates to a `dates` property as shown below.
    * ```js
-   * // Add stops at 15 evenly spaced intervals.
-   * timeSlider.stops = {
-   *   count: 15
-   * };
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   timeSliderElement.stops = {
+   *     dates: [
+   *       new Date(2000, 0, 1), new Date(2001, 3, 8), new Date(2002, 0, 10),
+   *       new Date(2003, 12, 8), new Date(2004, 2, 19), new Date(2005, 7, 5),
+   *       new Date(2006, 9, 11), new Date(2007, 11, 21), new Date(2008, 1, 10)
+   *     ],
+   *   };
+   * </script>
    * ```
-   * For irregularly spaced stops, simply assign an array of dates as demonstrated below.
+   * @example
+   * To allow thumbs to snap at a regular interval, such as daily, month or yearly, assign a `TimeInterval` object to an `interval` property as shown below.
    * ```js
-   * // Add nine irregular stops.
-   * timeSlider.stops = {
-   *   dates: [
-   *     new Date(2000, 0, 1), new Date(2001, 3, 8), new Date(2002, 0, 10),
-   *     new Date(2003, 12, 8), new Date(2004, 2, 19), new Date(2005, 7, 5),
-   *     new Date(2006, 9, 11), new Date(2007, 11, 21), new Date(2008, 1, 10)
-   *   ]
-   * };
-   * ```
-   * Lastly, to constrain or offset division by count or interval use the optional timeExtent property.
+   * <script type="module">
+   *   const [TimeInterval] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeInterval.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   timeSliderElement.stops = {
+   *     interval: new TimeInterval({
+   *       value: 1,
+   *       unit: "years"
+   *     }),
+   *   };
+   * </script>
+   * ```
+   * @example
+   * Lastly, both the interval and count stop definitions can optionally use a `timeExtent` property to confine the definitions to a specific range.
+   * For example, the following defines a time slider with a full time extent of the year 2026. However, daily stops only exist in the month of April.
    * ```js
-   * // Add yearly stops from Christmas 2019 to Christmas 2029 only
-   * timeSlider.stops = {
-   *   interval: {
-   *     value: 1,
-   *     unit: "years"
-   *   },
-   *   timeExtent: {
-   *     start: new Date(2019, 11, 25),
-   *     end: new Date(2029, 11, 25)
-   *   }
-   * };
-   *
-   * // Likewise, add stops that represent quarters of 2019 only.
-   * timeSlider.stops = {
-   *   count: 4,
-   *   timeExtent: {
-   *     start: new Date(2019, 0, 1),
-   *     end: new Date(2020, 0, 1)
-   *   }
-   * };
+   * <script type="module">
+   *   const [TimeExtent, TimeInterval] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *     "@arcgis/core/time/TimeInterval.js",
+   *   ]);
+   *
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   // The time-slider will span the entire year of 2026.
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2026, 0, 1),
+   *     end: new Date(2027, 0, 1),
+   *   });
+   *
+   *   // However, the slider's thumbs will only snap to days within the month of April.
+   *   timeSliderElement.stops = {
+   *     interval: new TimeInterval({
+   *       value: 1,
+   *       unit: "days"
+   *     }),
+   *     timeExtent: new TimeExtent({
+   *       start: new Date(2026, 3, 1),
+   *       end: new Date(2026, 4, 1),
+   *     }),
+   *   };
+   * </script>
    * ```
-   *
-   * @default { count : 10 }
    */
   accessor stops: Stops | null | undefined;
   /**
-   * When set, overrides the default TimeSlider ticks labelling system.
-   * Please refer to [TickConfig](https://developers.arcgis.com/javascript/latest/references/core/widgets/Slider/types/#TickConfig) for detailed documentation
-   * on how to configure tick placement, style, and behavior.
+   * Use `tickConfigs` to define custom ticks on the time slider.
+   * Custom ticks can be used instead of the default ticks provided by the component.
    *
-   * @since 4.16
    * @example
-   * // By default in "en-US" the TimeSlider will display ticks with "2010, 2011, 2012, etc".
-   * // Overwrite TimeSlider tick configuration so that labels display "'10, '12, '14, etc" in red.
-   * const timeSlider = new TimeSlider({
-   *   container: "timeSliderDiv",
-   *   fullTimeExtent: {
-   *     start: new Date(2010, 0, 1),
-   *     end: new Date(2020, 0, 1)
-   *   },
-   *   tickConfigs: [{
-   *     mode: "position",
-   *     values: [
-   *       new Date(2010, 0, 1), new Date(2012, 0, 1), new Date(2014, 0, 1),
-   *       new Date(2016, 0, 1), new Date(2018, 0, 1), new Date(2020, 0, 1)
-   *     ].map((date) => date.getTime()),
-   *     labelsVisible: true,
-   *     labelFormatFunction: (value) => {
-   *       const date = new Date(value);
-   *       return `'${date.getUTCFullYear() - 2000}`;
+   * The following example adds labelled ticks representing the Northern Hemisphere seasons.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-left" mode="instant"></arcgis-time-slider>
+   * </arcgis-map>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [TimeExtent] = await $arcgis.import([
+   *     "@arcgis/core/time/TimeExtent.js",
+   *   ]);
+   *
+   *   // Define custom ticks with a label and date.
+   *   interface Tick {
+   *     label: string;
+   *     date: Date;
+   *   }
+   *   const ticks: Tick[] = [
+   *     { label: "Winter", date: new Date(2026, 0, 1) },
+   *     { label: "Spring", date: new Date(2026, 2, 20) },
+   *     { label: "Summer", date: new Date(2026, 5, 21) },
+   *     { label: "Fall", date: new Date(2026, 8, 22) },
+   *     { label: "Winter", date: new Date(2027, 0, 1) },
+   *   ];
+   *
+   *   // Convenience function to match the tick's date to the corresponding label.
+   *   function getLabelForEpoch(epoch: number): string {
+   *     const tick = ticks.find(({ date }) => date.getTime() === epoch);
+   *     return tick?.label ?? "";
+   *   }
+   *
+   *   // Obtain a reference to the time slider element.
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   // Set the time slider's full time extent to span the year 2026.
+   *   timeSliderElement.fullTimeExtent = new TimeExtent({
+   *     start: new Date(2026, 0, 1),
+   *     end: new Date(2027, 0, 1),
+   *   });
+   *
+   *   // Set the time slider's stops to the custom ticks.
+   *   const dates = ticks.map(({ date }) => date);
+   *   timeSliderElement.stops = { dates };
+   *
+   *   // Set the time slider's tick configurations to the custom ticks.
+   *   const values = dates.map((date) => date.getTime());
+   *   timeSliderElement.tickConfigs = [
+   *     {
+   *       // Position ticks absolutely based on the date, rather than at regular intervals.
+   *       mode: "position",
+   *       // Show labels for the ticks.
+   *       labelsVisible: true,
+   *       // Match the tick's date to the corresponding label.
+   *       labelFormatFunction: (epoch) => getLabelForEpoch(epoch),
+   *       // Location of the ticks based on the date.
+   *       values,
    *     },
-   *     tickCreatedFunction: (value, tickElement, labelElement) => {
-   *       tickElement.classList.add("custom-ticks");
-   *       labelElement.classList.add("custom-labels");
-   *     }
-   *   }]
-   * };
-   * @example
-   * // this CSS goes with the snippet above.
-   * #timeSlider .custom-ticks {
-   *   background-color: red;
-   *   width: 1px;
-   *   height: 8px;
-   * }
-   * #timeSlider .custom-labels {
-   *   font-family: Georgia, 'Times New Roman', Times, serif;
-   *   font-size: 15px;
-   *   color: red;
-   * }
+   *   ];
+   * </script>
+   * ```
    */
-  accessor tickConfigs: Array<TickConfig> | null | undefined;
+  accessor tickConfigs: TickConfig[] | undefined;
   /**
-   * The current time extent of the time slider. This property can be watched for
-   * updates and used to update the time extent property in queries and/or the layer filters and effects.
-   * The following table shows the `timeExtent` values returned for each [mode](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/#mode).
+   * The current time extent of the time slider.
+   *
+   * When the `arcgis-time-slider` is associated with an `arcgis-map` or `arcgis-scene` component,
+   * the time slider's time extent will synchronize with the view's time extent.
+   * Meaning that any changes to one time extent property will be mirrored in the other.
+   *
+   * It is important to note that the time extent returned by this property will conform to the format in the table
+   * below based on the current `mode` of the time slider. Similarly, this format should be followed when assigning
+   * a new time extent to ensure proper behavior of the component and synchronization with an attached map or scene's
+   * time extent.
    *
-   * | Mode    | The timeExtent value |
-   * | ------- | -------------------- |
-   * | `time-window` | `{start: startDate, end: endDate}` |
-   * | `instant` | `{start: sameDate, end: sameDate}` |
-   * | `cumulative-from-start` | `{start: null, end: endDate}` |
-   * | `cumulative-from-end` | `{start: startDate, end: null}` |
+   *
+   * | Mode                    | Description                   | Example                                                       |
+   * |-------------------------|-------------------------------|---------------------------------------------------------------|
+   * | `time-window`           | Non-null start and end dates  | `{ start: new Date(2019, 2, 1), end: new Date(2019, 2, 28) }` |
+   * | `instant`               | Identical start and end dates | `{ start: new Date(2019, 2, 1), end: new Date(2019, 2, 1) }`  |
+   * | `cumulative-from-start` | `null` start date             | `{ start: null, end: new Date(2019, 2, 28) }`                 |
+   * | `cumulative-from-end`   | `null` end date               | `{ start: new Date(2019, 2, 1), end: null }`                  |
    *
    * @example
-   * // Display the time extent to the console whenever it changes.
-   * const timeSlider = new TimeSlider({
-   *   container: "timeSliderDiv",
-   *   mode: "time-window",
-   *   fullTimeExtent: {
-   *     start: new Date(2019, 2, 3),
-   *     end: new Date(2019, 2, 5)
-   *   },
-   *   timeExtent: {
-   *     start: new Date(2019, 2, 1),
-   *     end: new Date(2019, 2, 28)
-   *   }
-   * });
+   * The `arcgis-time-slider` may be used indepentantly of an `arcgis-map` or `arcgis-scene` component.
+   * In the following example, the time slider does not reference an `arcgis-map` and is used to update a single layer's filter.
+   * ```html
+   *   <arcgis-map basemap="dark-gray-vector" zoom="13" center="-117.512764, 34.04355"></arcgis-map>
+   *   <arcgis-time-slider mode="time-window" play-rate="50"></arcgis-time-slider>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const [GeoJSONLayer, TimeInterval, reactiveUtils] = await $arcgis.import([
+   *     "@arcgis/core/layers/GeoJSONLayer.js",
+   *     "@arcgis/core/time/TimeInterval.js",
+   *     "@arcgis/core/core/reactiveUtils.js",
+   *   ]);
+   *   const layer = new GeoJSONLayer({
+   *     url: "https://bsvensson.github.io/various-tests/geojson/usgs-earthquakes-06182019.geojson",
+   *     timeInfo: {
+   *       startField: "time",
+   *       interval: { unit: "days", value: 1 },
+   *     },
+   *   });
    *
-   * reactiveUtils.watch(
-   *   () => timeSlider.timeExtent,
-   *   (timeExtent) => {
-   *     console.log("Time extent now starts at", timeExtent.start, "and finishes at:", timeExtent.end);
-   *   }
-   * );
+   *   const viewElement = document.querySelector("arcgis-map");
+   *   await viewElement.viewOnReady();
+   *   viewElement.add(layer);
+   *
+   *   await viewElement.viewOnReady();
+   *   const layerView = await viewElement.whenLayerView(layer);
+   *
+   *   const timeSlider = document.querySelector("arcgis-time-slider");
+   *   await timeSlider.componentOnReady()
+   *
+   *   timeSlider.fullTimeExtent = layer.timeInfo.fullTimeExtent.expandTo("hours");
+   *   timeSlider.stops = {
+   *     interval: new TimeInterval({ value: 1, unit: "hours" }),
+   *   };
+   *
+   *   // Whenever the time slider's time extent changes, update the layer view's feature effect to highlight features
+   *   // that fall within the current time extent and dim features that fall outside of it.
+   *   reactiveUtils.watch(
+   *     () => timeSlider.timeExtent,
+   *     (timeExtent) => {
+   *       layerView.featureEffect = {
+   *         filter: { timeExtent },
+   *         excludedEffect: "grayscale(20%) opacity(12%)",
+   *       };
+   *     }
+   *   );
+   * ```
    */
   accessor timeExtent: TimeExtent | null | undefined;
   /**
-   * Shows/hides time in the display.
+   * If `true`, the time component of dates is displayed in the minimum, maximum, and time extent labels.
+   * This property is useful when the time extent of the slider is narrow or when the time component of the date is relevant to the user.
    *
    * @default false
    * @example
-   * // For time sliders with a small time extent it may be useful to display times as shown below.
-   * const timeSlider = new TimeSlider({
-   *   container: "timeSliderDiv",
-   *   mode: "time-window",
-   *   timeVisible: true,
-   *   fullTimeExtent: {
-   *     start: new Date(2019, 2, 3),
-   *     end: new Date(2019, 2, 5)
-   *   },
-   *   timeExtent: {
-   *     start: new Date(2019, 2, 1),
-   *     end: new Date(2019, 2, 28)
-   *   }
-   * });
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-left" time-visible></arcgis-time-slider>
+   * </arcgis-map>
+   * ```
    */
   accessor timeVisible: boolean;
   /**
-   * Dates and times displayed in the component will be displayed in this time zone. By default this time zone is
-   * inherited from [MapView#timeZone](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#timeZone). When a MapView is not associated with the component
-   * then the property will fallback to the `system` time zone.
+   * The `arcgis-time-slider` component will display dates and times in the time zone specified by this property.
+   * By default, the time zone is inherited from an associated `arcgis-map` or `arcgis-scene` component's view.
+   * If there is no associated view, the time zone will default to `"system"`, the device's time zone.
    *
-   * **Possible Values**
-   *
-   * Value | Description |
-   * ----- | ----------- |
-   * system  | Dates and times will be displayed in the timezone of the device or browser.
-   * unknown | Dates and time are not adjusted for any timezone. [TimeSlider](https://developers.arcgis.com/javascript/latest/references/core/widgets/TimeSlider/) will be disabled.
-   * Specified IANA timezone | Dates and times will be displayed in the specified IANA time zone. See [wikipedia - List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones).
-   *
-   * @since 4.28
+   * @example
+   * To specify a particular time zone, assign a valid IANA time zone string to the `time-zone` property as shown below.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-left" time-zone="Pacific/Auckland"></arcgis-time-slider>
+   * </arcgis-map>
+   * ```
+   * @see [wikipedia - List of tz database time zones](https://wikipedia.org/wiki/List_of_tz_database_time_zones)
+   * @see [arcgis-map.timeZone](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#timeZone)
+   * @see [MapView#timeZone](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#timeZone)
    */
-  accessor timeZone: string;
+  accessor timeZone: string | undefined;
   /**
    * 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-time-slider component will be associated with a map or scene component rather than using the `view` property.
+   */
+  accessor view: MapView | SceneView | null | undefined;
+  /**
+   * This method will update multiple time slider properties and is intended to be used in conjunction with
+   * [getTimeSliderSettingsFromWebDocument](https://developers.arcgis.com/javascript/latest/references/core/support/timeUtils/#getTimeSliderSettingsFromWebDocument).
+   *
+   * `getTimeSliderSettingsFromWebDocument` is a utility function that extracts time slider settings (if any) from a
+   * published web map or web scene. This method can be used to apply those settings to the time slider component.
    *
+   * @param settings
    * @example
+   * The following example demonstrates how to use `getTimeSliderSettingsFromWebDocument` and `applyTimeSliderSettings`
+   * together to extract time slider settings from a web map and apply them to the time slider component.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-left"></arcgis-time-slider>
+   * </arcgis-map>
+   * ```
    * ```js
-   * // Create and then add a TimeSlider component and then listen to changes in the View's time extent.
-   * const timeSlider = new TimeSlider({
-   *   container: "timeSliderDiv",
-   *   view: view,
-   *   mode: "instant",
-   *   fullTimeExtent: {
-   *     start: new Date(2000, 0, 1),
-   *     end: new Date(2010, 0, 1)
-   *   },
-   *   timeExtent: {
-   *     start: new Date(2000, 0, 1),
-   *     end: new Date(2000, 0, 1)
-   *   }
-   * });
-   * view.ui.add(timeSlider, "top-left");
+   * <script type="module">
+   *   const [timeUtils] = await $arcgis.import([
+   *     "@arcgis/core/support/timeUtils.js",
+   *   ]);
+   *
+   *   const webMap = new WebMap({
+   *     portalItem: {
+   *       id: "your-webmap-id",
+   *     }
+   *   });
+   *   await webMap.load();
    *
-   * reactiveUtils.watch(
-   *   () => view.timeExtent,
-   *   (timeExtent) => {
-   *     console.log("New view time is: ", timeExtent.start);
-   *   }
-   * );
+   *   const timeSliderSettings = await timeUtils.getTimeSliderSettingsFromWebDocument(webMap);
+   *
+   *   const timeSlider = document.querySelector("arcgis-time-slider");
+   *   await timeSlider.componentOnReady();
+   *   timeSlider.applyTimeSliderSettings(timeSliderSettings);
+   * </script>
    * ```
    */
-  accessor view: MapViewOrSceneView | null | undefined;
-  /** @param settings */
   applyTimeSliderSettings(settings: TimeSliderSettings): Promise<void>;
   /** Permanently destroy the component. */
   destroy(): Promise<void>;
+  /**
+   * Incrementally moves the [timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-slider/#timeExtent) forward one stop.
+   *
+   * @example
+   * The following example demonstrates how to use the `next` method to move the time slider's time extent forward one
+   * stop when a button is clicked.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-left" mode="instant"></arcgis-time-slider>
+   * </arcgis-map>
+   * <button id="next-button">Next</button>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   document.getElementById("next-button").addEventListener("click", () => {
+   *     timeSliderElement.next();
+   *   });
+   * </script>
+   * ```
+   */
   next(): Promise<void>;
+  /**
+   * Initiates playback of the time slider, causing the [timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-slider/#timeExtent) to
+   * incrementally move forward based on the defined [playRate](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-slider/#playRate) and
+   * [stops](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-slider/#stops).
+   *
+   * Note that when [loop](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-slider/#loop) is `true`, the time slider will restart from the
+   * beginning when it reaches the end of the slider while playing.
+   *
+   * @example
+   * The following example demonstrates how to use the `play` method to start playback of the time slider when a button
+   * is clicked.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-left" mode="instant"></arcgis-time-slider>
+   * </arcgis-map>
+   * <button id="play-button">Play</button>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   document.getElementById("play-button").addEventListener("click", () => {
+   *     timeSliderElement.play();
+   *   });
+   * </script>
+   * ```
+   */
   play(): Promise<void>;
+  /**
+   * Incrementally moves the [timeExtent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-slider/#timeExtent) backward one stop.
+   *
+   * @example
+   * The following example demonstrates how to use the `previous` method to move the time slider's time extent backward
+   * one stop when a button is clicked.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-left" mode="instant"></arcgis-time-slider>
+   * </arcgis-map>
+   * <button id="previous-button">Previous</button>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   document.getElementById("previous-button").addEventListener("click", () => {
+   *     timeSliderElement.previous();
+   *   });
+   * </script>
+   * ```
+   */
   previous(): Promise<void>;
+  /**
+   * Stops time slider playback.
+   *
+   * @example
+   * The following example demonstrates how to use the `stop` method to stop time slider playback when a button
+   * is clicked.
+   * ```html
+   * <arcgis-map basemap="satellite" zoom="6" center="-2,54">
+   *   <arcgis-time-slider slot="top-left" mode="instant"></arcgis-time-slider>
+   * </arcgis-map>
+   * <button id="stop-button">Stop</button>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   document.getElementById("stop-button").addEventListener("click", () => {
+   *     timeSliderElement.stop();
+   *   });
+   * </script>
+   * ```
+   */
   stop(): Promise<void>;
-  /** @param webmap */
-  updateWebDocument(webmap: WebMap): Promise<void>;
-  "@setterTypes": {
-    icon?: IconName;
-  };
+  /**
+   * Updates the time slider definition in the parsed web document.
+   *
+   * @param document
+   * @example
+   * The following example demonstrates how to use the `stop` method to stop time slider playback when a button
+   * is clicked.
+   * ```html
+   * <arcgis-map item-id="acea555a4b6f412dae98994bcfdbc002">
+   *   <arcgis-time-slider slot="top-left"></arcgis-time-slider>
+   * </arcgis-map>
+   * <button id="save-button">Save</button>
+   * ```
+   * ```js
+   * <script type="module">
+   *   const timeSliderElement = document.querySelector("arcgis-time-slider");
+   *   await timeSliderElement.componentOnReady();
+   *
+   *   const viewElement = document.querySelector("arcgis-map");
+   *   await viewElement.viewOnReady();
+   *
+   *   document.getElementById("save-button").addEventListener("click", async () => {
+   *     timeSliderElement.updateWebDocument(viewElement.map);
+   *     const portalItem = await viewElement.map.save();
+   *   });
+   * </script>
+   * ```
+   * @see [timeSlider](https://developers.arcgis.com/javascript/latest/references/core/webdoc/Widgets/#timeSlider)
+   */
+  updateWebDocument(document: WebMap | WebScene): Promise<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: "effectiveStops" | "fullTimeExtent" | "timeExtent" | "state"; }>;
+  readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "state"; }>;
   /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
   readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted when an action is triggered on the component. */
-  readonly arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, TimeSliderViewModelTriggerActionEvent>;
+  readonly arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, TriggerActionEvent>;
   readonly "@eventTypes": {
     arcgisPropertyChange: ArcgisTimeSlider["arcgisPropertyChange"]["detail"];
     arcgisReady: ArcgisTimeSlider["arcgisReady"]["detail"];