@arcgis/common-components 5.2.0-next.98 → 6.0.0-next.0

package/dist/components/arcgis-toolbar-more-button/customElement.js

@@ -1,9 +1,9 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as A } from "../../chunks/runtime.js";
-import { ref as f } from "lit/directives/ref.js";
+import { ref as u } from "lit/directives/ref.js";
 import { html as m } from "lit";
 import { LitElement as C, nothing as v, safeClassMap as $ } from "@arcgis/lumina";
-import { L as u } from "../../chunks/utils.js";
+import { L as f } from "../../chunks/types.js";
 import { E as w } from "../../chunks/element-reference-controller.js";
 import { a as g, u as _, g as y } from "../../chunks/utils2.js";
 import { b as L } from "../../chunks/utils3.js";
@@ -11,7 +11,7 @@ class R extends C {
   constructor() {
     super(...arguments), this._elementReferenceController = new w(this), this._childrenObserver = new MutationObserver(() => {
       this._syncChildren();
-    }), this.priority = u.Medium, this.menuAppearance = "action-menu", this.overflowActionLabel = "More actions";
+    }), this.priority = f.Medium, this.menuAppearance = "action-menu", this.overflowActionLabel = "More actions";
   }
   static {
     this.properties = { _children: 16, priority: 9, menuAppearance: 1, overflowActionLabel: 1 };
@@ -21,10 +21,10 @@ class R extends C {
     if (!t)
       return [0];
     const i = g(e), l = t * i;
-    if (!(this.priority < u.NeverCollapse && t > 2))
+    if (!(this.priority < f.NeverCollapse && t > 2))
       return [l];
     const s = Math.min(t, 2) * i, o = [s];
-    if (t <= 2 || this.priority <= u.ForceCollapse)
+    if (t <= 2 || this.priority <= f.ForceCollapse)
       return o;
     for (let n = 1; n < t - 1; n++)
       o.push(s + i * n);
@@ -34,8 +34,8 @@ class R extends C {
     const i = this._children;
     if (!i)
       return;
-    const { visible: l, hidden: r } = this._resolveActionsFromBudget(i, e, t), s = "hamburger", o = this.overflowActionLabel, n = e.tooltipAppearance, c = n !== "native", a = this._elementReferenceController.element, p = n === "calcite-dark" ? "calcite-mode-dark" : void 0, h = y(e), b = this.menuAppearance === "action-menu" ? m`<calcite-action-menu .label=${o} overlay-positioning=fixed .placement=${h}><calcite-action .icon=${s} .scale=${e.scale} slot=trigger .text=${o} title=${(n === "native" ? o : "") ?? v} ${f(this._elementReferenceController.ref)}></calcite-action>${r.map((d) => d.proxiedRender(e, "expanded-action"))}</calcite-action-menu>` : m`<calcite-dropdown overlay-positioning=fixed .placement=${h}><calcite-action .icon=${s} .scale=${e.scale} slot=trigger .text=${o} title=${(n === "native" ? o : "") ?? v} ${f(this._elementReferenceController.ref)}></calcite-action><calcite-dropdown-group selection-mode=none>${r.map((d) => d.proxiedRender(e, "dropdown-item"))}</calcite-dropdown-group></calcite-dropdown>`;
-    return m`${l.map((d) => d.proxiedRender(e, "collapsed-action"))}${r.length ? b : void 0}${r.length && c ? m`<calcite-tooltip class=${$(p)} overlay-positioning=fixed .placement=${h} .referenceElement=${a}><span>${o}</span></calcite-tooltip>` : void 0}`;
+    const { visible: l, hidden: r } = this._resolveActionsFromBudget(i, e, t), s = "hamburger", o = this.overflowActionLabel, n = e.tooltipAppearance, c = n !== "native", a = this._elementReferenceController.element, p = n === "calcite-dark" ? "calcite-mode-dark" : void 0, h = y(e), b = this.menuAppearance === "action-menu" ? m`<calcite-action-menu .label=${o} overlay-positioning=fixed .placement=${h}><calcite-action .icon=${s} .scale=${e.scale} slot=trigger .text=${o} title=${(n === "native" ? o : "") ?? v} ${u(this._elementReferenceController.ref)}></calcite-action>${r.map((d) => d.proxiedRender(e, "expanded-action"))}</calcite-action-menu>` : m`<calcite-action .icon=${s} .scale=${e.scale} .text=${o} title=${(n === "native" ? o : "") ?? v} ${u(this._elementReferenceController.ref)}></calcite-action><calcite-dropdown overlay-positioning=fixed .placement=${h} .referenceElement=${a}><calcite-dropdown-group selection-mode=none>${r.map((d) => d.proxiedRender(e, "dropdown-item"))}</calcite-dropdown-group></calcite-dropdown>`;
+    return m`${l.map((d) => d.proxiedRender(e, "collapsed-action"))}${r.length ? b : void 0}${r.length && c ? m`<calcite-tooltip class=${$(p)} close-on-click overlay-positioning=fixed .placement=${h} .referenceElement=${a}><span>${o}</span></calcite-tooltip>` : void 0}`;
   }
   connectedCallback() {
     super.connectedCallback(), this._childrenObserver.observe(this.el, { childList: !0 }), this._syncChildren();

package/dist/components/arcgis-toolbar-split-button/customElement.js

@@ -1,12 +1,13 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as y } from "../../chunks/runtime.js";
-import { ref as b } from "lit/directives/ref.js";
+import { ref as $ } from "lit/directives/ref.js";
 import { html as d } from "lit";
 import { LitElement as _, nothing as h, safeClassMap as a } from "@arcgis/lumina";
 import { E as L } from "../../chunks/element-reference-controller.js";
-import { L as f, W as R } from "../../chunks/utils.js";
-import { a as $, u as E, g as k } from "../../chunks/utils2.js";
-import { b as O } from "../../chunks/utils3.js";
+import { L as f } from "../../chunks/types.js";
+import { a as C, u as R, g as E } from "../../chunks/utils2.js";
+import { b as k } from "../../chunks/utils3.js";
+import { W as O } from "../../chunks/utils.js";
 class S extends _ {
   constructor() {
     super(...arguments), this._elementReferenceController = new L(this), this._childrenObserver = new MutationObserver(() => this._syncChildren()), this.priority = f.Medium, this.menuAppearance = "dropdown", this.overflowActionLabel = "More actions";
@@ -18,18 +19,18 @@ class S extends _ {
     const { priority: n, _children: i } = this, r = i?.length ?? 0;
     if (!r)
       return [0];
-    const o = $(e), s = r * o;
+    const o = C(e), s = r * o;
     if (!(n < f.NeverCollapse) || r <= 1)
       return [s];
-    const l = o + M(e);
-    return n <= f.ForceCollapse ? [l] : E([l, s]);
+    const l = o + W(e);
+    return n <= f.ForceCollapse ? [l] : R([l, s]);
   }
   proxiedRender(e, n) {
     const i = this._children;
     if (!i)
       return;
-    const { visible: r, hidden: o } = this._resolveActionsFromBudget(i, e, n, this.menuAppearance === "dropdown"), s = W(e), t = this.overflowActionLabel, l = e.tooltipAppearance, m = l !== "native", C = this._elementReferenceController.element, A = l === "calcite-dark" ? "calcite-mode-dark" : void 0, g = "split-anchor", v = o.length ? "split-menu" : "", u = k(e), w = this.menuAppearance === "action-menu" ? d`<calcite-action-menu .label=${t} overlay-positioning=fixed .placement=${u} class=${a(v)}><calcite-action .icon=${s} .scale=${e.scale} class=${a(g)} data-layout=${e.layout ?? h} slot=trigger title=${t ?? h} .label=${t} .text=${t} ${b(this._elementReferenceController.ref)}></calcite-action>${o.map((c) => c.proxiedRender(e, "expanded-action"))}</calcite-action-menu>` : d`<calcite-dropdown overlay-positioning=fixed .placement=${u} .scale=${e.scale} class=${a(v)}><calcite-action class=${a(g)} data-layout=${e.layout ?? h} .icon=${s} .label=${t} .scale=${e.scale} slot=trigger .text=${l === "native" ? t : ""} title=${t ?? h} ${b(this._elementReferenceController.ref)}></calcite-action><calcite-dropdown-group selection-mode=single>${o.map((c) => c.proxiedRender(e, "dropdown-item", c === r.at(0)))}</calcite-dropdown-group></calcite-dropdown>`;
-    return d`<div class="split-host">${r.map((c) => c.proxiedRender(e, "collapsed-action"))}${o.length ? w : void 0}${o.length && m ? d`<calcite-tooltip class=${a(A)} overlay-positioning=fixed .placement=${u} .referenceElement=${C}><span>${t}</span></calcite-tooltip>` : void 0}</div>`;
+    const { visible: r, hidden: o } = this._resolveActionsFromBudget(i, e, n, this.menuAppearance === "dropdown"), s = T(e), t = this.overflowActionLabel, l = e.tooltipAppearance, m = l !== "native", v = this._elementReferenceController.element, A = l === "calcite-dark" ? "calcite-mode-dark" : void 0, g = "split-anchor", b = o.length ? "split-menu" : "", u = E(e), w = this.menuAppearance === "action-menu" ? d`<calcite-action-menu class=${a(b)} .label=${t} overlay-positioning=fixed .placement=${u}><calcite-action class=${a(g)} data-layout=${e.layout ?? h} .icon=${s} .label=${t} .scale=${e.scale} slot=trigger .text=${t} title=${t ?? h} ${$(this._elementReferenceController.ref)}></calcite-action>${o.map((c) => c.proxiedRender(e, "expanded-action"))}</calcite-action-menu>` : d`<calcite-action class=${a(g)} data-layout=${e.layout ?? h} .icon=${s} .label=${t} .scale=${e.scale} .text=${l === "native" ? t : ""} title=${t ?? h} ${$(this._elementReferenceController.ref)}></calcite-action><calcite-dropdown class=${a(b)} overlay-positioning=fixed .placement=${u} .referenceElement=${v} .scale=${e.scale}><calcite-dropdown-group selection-mode=single>${o.map((c) => c.proxiedRender(e, "dropdown-item", c === r.at(0)))}</calcite-dropdown-group></calcite-dropdown>`;
+    return d`<div class="split-host">${r.map((c) => c.proxiedRender(e, "collapsed-action"))}${o.length ? w : void 0}${o.length && m ? d`<calcite-tooltip class=${a(A)} close-on-click overlay-positioning=fixed .placement=${u} .referenceElement=${v}><span>${t}</span></calcite-tooltip>` : void 0}</div>`;
   }
   connectedCallback() {
     super.connectedCallback(), this._childrenObserver.observe(this.el, { childList: !0 }), this._syncChildren();
@@ -38,8 +39,8 @@ class S extends _ {
     this._childrenObserver.disconnect(), super.disconnectedCallback();
   }
   _resolveActionsFromBudget(e, n, i, r) {
-    const o = e.find((m) => m.active) ?? e?.toSorted(O)?.at(0);
-    if (Math.floor(i / $(n)) >= e.length)
+    const o = e.find((m) => m.active) ?? e?.toSorted(k)?.at(0);
+    if (Math.floor(i / C(n)) >= e.length)
       return { visible: [...e], hidden: [] };
     if (r)
       return { visible: [o ?? e[0]], hidden: [...e] };
@@ -54,11 +55,11 @@ class S extends _ {
     });
   }
 }
-function W({ layout: p, relativePosition: e }) {
+function T({ layout: p, relativePosition: e }) {
   return p === "horizontal" ? e.startsWith("top") ? "chevron-down" : "chevron-up" : e.endsWith("left") ? "chevron-right" : "chevron-left";
 }
-function M({ layout: p, scale: e }) {
-  return R.splitButtonPart[p][e];
+function W({ layout: p, scale: e }) {
+  return O.splitButtonPart[p][e];
 }
 y("arcgis-toolbar-split-button", S);
 export {

package/dist/components/arcgis-toolbar-stack/customElement.d.ts

@@ -0,0 +1,48 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+
+/**
+ * Component to support laying out multiple toolbars.
+ *
+ * This is intended to be relatively simple; toolbars are 'stacked' vertically and horizontally
+ * according to layout, docking behavior, and available space.
+ *
+ * A single ruler element is shared across toolbars to simplify the calculations and avoid
+ * issues (e.g. if the toolbar is offset relative to another toolbar, that would affect the positioning of the ruler element).
+ *
+ * The general rule is the input order of the toolbar elements determines the semantic priority. Based on that priority,
+ * higher priority elements are stuck to the outside, with smaller/lower priority elements flowing towards the center.
+ *
+ * @internal
+ */
+export abstract class ArcgisToolbarStack extends LitElement {
+  /** Toolbar orientation */
+  accessor layout: "horizontal" | "vertical";
+  /**
+   * Relative position is used to control how popover element placement and directional arrows
+   * are chosen. This is used in conjunction with the layout property.
+   *
+   * This will affect how split buttons, overflow menus, and tooltips are displayed.
+   *
+   * @default "top-left"
+   */
+  accessor relativePosition: "bottom-end" | "bottom-left" | "bottom-right" | "bottom-start" | "top-end" | "top-left" | "top-right" | "top-start";
+  /**
+   * Action scale, will be applied to all rendered actions.
+   *
+   * @default "m"
+   */
+  accessor scale: "l" | "m" | "s";
+  /**
+   * Toolbar visual appearance - affects layout decisions.
+   *
+   * @default "floating"
+   */
+  accessor toolbarKind: "docked" | "floating";
+  /**
+   * Controls whether individual actions render native tooltips or Calcite tooltips.
+   *
+   * @default "native"
+   */
+  accessor tooltipAppearance: "calcite-dark" | "calcite" | "native";
+}

package/dist/components/arcgis-toolbar-stack/customElement.js

@@ -0,0 +1,174 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+import { c as k } from "../../chunks/runtime.js";
+import { ref as _ } from "lit/directives/ref.js";
+import { css as C, render as w, nothing as P, html as p } from "lit";
+import { LitElement as z, nothing as v } from "@arcgis/lumina";
+import { useDirection as L } from "@arcgis/lumina/controllers";
+import { s as x, a as T, b as $, c as A } from "../../chunks/toolbar.js";
+import { AsyncDirective as R } from "lit/async-directive.js";
+import { directive as M, PartType as D } from "lit/directive.js";
+import { getCommittedValue as u, clearPart as E, insertPart as b, setCommittedValue as f } from "lit/directive-helpers.js";
+const V = C`:host{--calcite-internal-animation-timing-slow: 0}.toolbar-stack{align-items:stretch;display:flex;max-inline-size:min(100cqw,100vw);max-block-size:min(100cqh,100vh);min-inline-size:0;min-block-size:0;gap:8px}.stack{display:flex}.stack[data-horizontal-position=right]{justify-content:right}.stack[data-horizontal-position=left]{justify-content:left}.line{display:flex;flex:none;gap:8px}:host([layout="vertical"]) .line{flex-direction:column;max-height:min(100cqh - var(--arcgis-internal-attribution-space-top) - 2 * var(--calcite-space-lg),100vh - 2 * var(--calcite-space-lg))}:host([layout="horizontal"]) .line{flex-direction:row}.line[data-alignment=top]{justify-content:flex-start}.line[data-alignment=bottom]{justify-content:flex-end}.line[data-alignment=left]{justify-content:left}.line[data-alignment=right]{justify-content:right}:host([layout="vertical"]) .toolbar-stack{flex-direction:row}:host([layout="horizontal"]) .toolbar-stack{flex-direction:column}:host([toolbar-kind="docked"][layout="horizontal"]) .toolbar-stack{min-inline-size:100%;calcite-action-bar{min-width:auto}}:host([toolbar-kind="docked"][layout="vertical"]) .toolbar-stack{min-block-size:100%;calcite-action-bar{min-height:auto}}:host([toolbar-kind="floating"]) .toolbar-shadow-wrapper{box-shadow:var(--calcite-shadow-md);background-color:var(--calcite-action-bar-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-action-bar-corner-radius, var(--calcite-corner-radius-round));min-inline-size:0;min-block-size:0}`;
+class j {
+  constructor(t = /* @__PURE__ */ new Map(), e = /* @__PURE__ */ new Set()) {
+    this.cachedParts = t, this.directives = e;
+  }
+  moveAllToCache() {
+    for (const t of this.directives)
+      t.moveToCache();
+  }
+}
+class S extends R {
+  #e;
+  #i;
+  #t;
+  constructor(t) {
+    if (super(t), t.type !== D.CHILD)
+      throw new Error("sharedCache() can only be used in child expressions");
+  }
+  /**
+   * @param _store Shared store backing this and other caching directives with the shared cache
+   * @param _key Uniquely identifies the element being rendered
+   * @param value The content to render
+   */
+  render(t, e, o) {
+    return [o];
+  }
+  update(t, [e, o, a]) {
+    this.#t !== e && (this.#t && this.#t.directives.delete(this), e.directives.add(this), this.#t = e), this.#e = t, this.#i = o;
+    const i = e.cachedParts.get(o), s = i ? u(i).pop() : void 0;
+    return s && (E(t), b(t, void 0, s), f(t, [s])), this.render(e, o, a);
+  }
+  /**
+   * During the update phase, a toolbar may need to be pulled from the cache in a situation
+   * where it was still on the page from the previous render.
+   *
+   * To work around this problem, during parent component render phase a pre-caching
+   * step moves all cacheable elements into the cache. This is the method called by
+   * that pre-caching step.
+   *
+   * @returns
+   */
+  moveToCache() {
+    const t = this.#e, e = this.#t;
+    if (!t || !e)
+      return;
+    const a = u(t).pop();
+    if (!a)
+      return;
+    let i = e.cachedParts.get(this.#i);
+    if (!i) {
+      const c = document.createDocumentFragment();
+      i = w(P, c), e.cachedParts.set(this.#i, i);
+    }
+    if (u(i).length > 0)
+      throw new Error("sharedCache() keys must be unique");
+    f(i, [a]), b(i, void 0, a);
+  }
+  disconnected() {
+    this.#t?.directives.delete(this);
+  }
+  reconnected() {
+    this.#t?.directives.add(this);
+  }
+}
+const q = M(S), O = 8;
+class K extends z {
+  constructor() {
+    super(), this.#e = new ResizeObserver((t) => this._updateMeasurement(t)), this.#i = new MutationObserver(() => this._syncToolbars()), this.#r = L(), this.#o = new j(), this._layout = "horizontal", this._availableLength = 0, this.scale = "m", this.tooltipAppearance = "native", this.relativePosition = "top-left", this.toolbarKind = "floating", this.listen("arcgisInternalLayoutUpdate", () => this.requestUpdate());
+  }
+  static {
+    this.properties = { _availableLength: 16, _toolbars: 16, effectiveRelativeDirection: 16, layout: 3, scale: 3, tooltipAppearance: 1, relativePosition: 1, toolbarKind: 3 };
+  }
+  static {
+    this.styles = [V, x, T, $, A];
+  }
+  #e;
+  #i;
+  #t;
+  #r;
+  #o;
+  #a;
+  get effectiveRelativeDirection() {
+    const [t, e] = this.relativePosition.split("-"), o = this.#r;
+    switch (e) {
+      case "left":
+      case "right":
+        return `${t}-${e}`;
+      case "end":
+        return `${t}-${o === "ltr" ? "right" : "left"}`;
+      case "start":
+        return `${t}-${o === "ltr" ? "left" : "right"}`;
+    }
+  }
+  get layout() {
+    return this._layout;
+  }
+  set layout(t) {
+    t !== this._layout && (this._layout = t, this._updateMeasurement());
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._connectMeasurement(this.#a), this.#i.observe(this.el, { childList: !0 }), this._syncToolbars();
+  }
+  disconnectedCallback() {
+    this.#e.disconnect(), this.#i.disconnect(), super.disconnectedCallback();
+  }
+  _setRulerEl(t) {
+    this.#a !== t && (this.#a = t, this.isConnected && this._connectMeasurement(t));
+  }
+  _connectMeasurement(t) {
+    this.#e.disconnect(), t && (this.#e.observe(t), this._updateMeasurement());
+  }
+  _updateMeasurement(t) {
+    const e = t?.at(0)?.contentRect ?? this.#a?.getBoundingClientRect();
+    e && (this._availableLength = this.layout === "horizontal" ? e.width : e.height);
+  }
+  _syncToolbars() {
+    this.#t?.abort();
+    const t = Array.from(this.el.children).filter(W), e = new AbortController();
+    this.#t = e, Promise.all(t.map((o) => o.componentOnReady())).then(() => {
+      !this.isConnected || e.signal.aborted || (this._toolbars = t);
+    });
+  }
+  _arrangeToolbarLines(t, e) {
+    const o = t.map((r) => {
+      const d = r.allocate(e, this._availableLength);
+      return { toolbar: r, budget: d.reduce((g, y) => g + y.budget, 0) };
+    }), a = [];
+    let i = [], s = 0;
+    for (const r of o) {
+      const d = s + (i.length === 0 ? 0 : O) + r.budget;
+      i.length > 0 && d > this._availableLength ? (a.push(i), i = [r], s = r.budget) : (i.push(r), s = d);
+    }
+    i.length > 0 && a.push(i);
+    const [c, h] = e.relativePosition.split("-"), l = e.layout === "vertical";
+    return (l ? h === "right" : c === "bottom") && a.reverse(), (l ? c === "bottom" : h === "right") && a.forEach((r) => r.reverse()), a;
+  }
+  #s;
+  render() {
+    const t = this._toolbars;
+    if (!t?.length) {
+      this.#s?.length && (this.#o.moveAllToCache(), this.#s = []);
+      return;
+    }
+    const e = {
+      layout: this.layout,
+      relativePosition: this.effectiveRelativeDirection,
+      scale: this.scale,
+      tooltipAppearance: this.tooltipAppearance
+    }, o = this._arrangeToolbarLines(t, e);
+    U(this.#s, o) || (this.#o.moveAllToCache(), this.#s = o.map((h) => h.map(({ toolbar: l }) => l)));
+    const [a, i] = e.relativePosition.split("-"), s = this.layout === "vertical" ? a : i, c = this.#o;
+    return p`<div class="stack" data-horizontal-position=${i ?? v}><div class="ruler" ${_(this._setRulerEl)}></div><div class="toolbar-stack">${o.map((h) => p`<div class="line" data-alignment=${s ?? v}>${h.map(({ toolbar: l, budget: m }) => q(c, l, l.proxiedRender(e, m, this.toolbarKind)))}</div>`)}</div></div>`;
+  }
+}
+function W(n) {
+  return n.localName === "arcgis-toolbar";
+}
+function U(n, t) {
+  return n?.length === t.length && t.every((e, o) => e.length === n[o].length && e.every(({ toolbar: a }, i) => a === n[o][i]));
+}
+k("arcgis-toolbar-stack", K);
+export {
+  K as ArcgisToolbarStack
+};

package/dist/components/arcgis-toolbar-stack/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-toolbar-stack/index.js

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-unique-values-list/customElement.js

@@ -185,8 +185,8 @@ class ce extends J {
   loaded() {
     this.layer && this.fieldInfo && (setTimeout(() => this.initialRender = !1, 800), this.listNode?.setFocus());
   }
-  async willUpdate(e) {
-    this.initialized && (e.has("layer") || e.has("visualizationSource") || e.has("fieldName") || e.has("uniqueValues")) && (await this.processProps(), this.requestUpdate()), e.has("maxHeight") && this.maxHeight && this.listNode?.setAttribute("style", `max-height: ${this.maxHeight || 400}px`);
+  willUpdate(e) {
+    this.initialized && (e.has("layer") || e.has("visualizationSource") || e.has("fieldName") || e.has("uniqueValues")) && this.processProps().then(() => this.requestUpdate()), e.has("maxHeight") && this.maxHeight && this.listNode?.setAttribute("style", `max-height: ${this.maxHeight || 400}px`);
   }
   async processProps() {
     const { layer: e, fieldName: s, view: t, visualizationSource: r } = this, a = (e ? O(e, r) : void 0)?.fields?.filter((u) => u.name === s)?.[0];

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

@@ -7,11 +7,12 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  * The Value Picker component allows users to step or play through an iterable set of data. The component alone acts as a shell, consisting
  * of a play/pause button, a next button, a previous button, and a slot for adding a component to Value Picker. Value Picker is not associated with a
  * [View](https://developers.arcgis.com/javascript/latest/references/core/views/View/) nor does it require that the dataset adheres to a specific structure
- * for it to function. The [arcgis-value-picker-label](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-label/), [arcgis-value-picker-slider](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-slider/),
+ * for it to function.
+ *
+ * The [arcgis-value-picker-label](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-label/), [arcgis-value-picker-slider](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-slider/),
  * [arcgis-value-picker-combobox](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-combobox/), and [arcgis-value-picker-collection](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-collection/) components provide the user with a few different options
  * for placing their data into a Value Picker with minimal configuration. Value Picker handles the different shapes of these components automatically by asserting
- * that all slotted components will extend the
- * [ArcgisValuePickerSubcomponent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/types/#ArcgisValuePickerSubcomponent)
+ * that all slotted components will extend the [ArcgisValuePickerSubcomponent](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/types#ArcgisValuePickerSubcomponent)
  * interface, which allows Value picker to send and receive generic sets of instructions that are interpreted by the slotted component.
  *
  * ### Configuring Value Picker

package/dist/components/arcgis-value-picker/types.d.ts

@@ -1,14 +1,13 @@
 import type { Icon as Icon } from "@esri/calcite-components/components/calcite-icon";
 
 /**
- * @since
- * 5.2
- *
  * The minimum API required for components being slotted into [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/). Value Picker will automatically
  * create an internal reference to the slotted component, so the properties on this interface can be directly referenced without requiring
  * the the Value Picker component to be aware of the slotted component's unique API. For example, if the user presses play and eventually Value Picker
  * determines that `slottedComponent.canNext` is false but [arcgis-value-picker.loop](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/#loop) is true, Value Picker will call `slottedComponent.reset()`
  * to reset the slotted component's current value to the first index of its dataset. This will allow playback to continue looping seamlessly.
+ *
+ * @since 5.2
  */
 export interface ArcgisValuePickerSubcomponent extends HTMLElement {
   /**
@@ -47,7 +46,6 @@ export interface AnimateEvent {
   first: boolean;
 }
 
-/** Object used to define the label items. */
 export interface LabelItem {
   /** The value of the item. */
   value: string;