@arcgis/map-components 6.0.0-next.20 → 6.0.0-next.21

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

@@ -1,31 +1,32 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
-import { c as F } from "../../chunks/runtime.js";
-import { css as H, noChange as x, html as m } from "lit";
-import { substitute as q } from "@arcgis/core/intl.js";
-import { usePropertyChange as z, useWatchAttributes as N } from "@arcgis/lumina/controllers";
-import { reEmitEvent as f } from "@arcgis/lumina-toolkit/reEmitEvent";
-import j from "@arcgis/core/layers/GraphicsLayer.js";
-import J from "@arcgis/core/symbols/TextSymbol.js";
-import { LitElement as Q, createEvent as X, nothing as I } from "@arcgis/lumina";
-import { watch as v, on as Y, whenOnce as Z } from "@arcgis/core/core/reactiveUtils.js";
-import { u as ee } from "../../chunks/useT9n.js";
-import { m as te } from "../../chunks/useViewModel.js";
-import { V as T } from "../../chunks/visible-element.js";
-import { createRef as E, ref as M } from "lit/directives/ref.js";
-import ie from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
-import { S as oe } from "../../chunks/resources.js";
-import { getOrCreateMapValue as W, createReactiveMap as se } from "@arcgis/core/applications/Components/featureUtils.js";
-import { LayoutPriorities as y } from "@arcgis/common-components";
-import ne from "@arcgis/core/core/Accessor.js";
-import { property as a, subclass as le } from "@arcgis/core/core/accessorSupport/decorators.js";
-import { ignoreAbortErrors as C } from "@arcgis/core/core/promiseUtils.js";
-import ae from "@arcgis/core/widgets/Sketch/VisibleElements.js";
-import re from "@arcgis/core/widgets/support/SelectionToolbar/SelectionToolbarViewModel.js";
-import { c as ce } from "../../chunks/loader-utils.js";
-import { AsyncDirective as de } from "lit/async-directive.js";
-import { directive as he, PartType as pe } from "lit/directive.js";
-import { r as ue } from "../../chunks/async-utils.js";
-const ge = [
+import { c as N } from "../../chunks/runtime.js";
+import { css as q, noChange as I, html as y } from "lit";
+import { substitute as j } from "@arcgis/core/intl.js";
+import { GenericController as J, usePropertyChange as Q, useWatchAttributes as X } from "@arcgis/lumina/controllers";
+import { reEmitEvent as S } from "@arcgis/lumina-toolkit/reEmitEvent";
+import Y from "@arcgis/core/layers/GraphicsLayer.js";
+import Z from "@arcgis/core/symbols/TextSymbol.js";
+import { LitElement as ee, createEvent as te, nothing as B } from "@arcgis/lumina";
+import { watch as f, on as ie, whenOnce as oe } from "@arcgis/core/core/reactiveUtils.js";
+import { u as se } from "../../chunks/useT9n.js";
+import { m as ne } from "../../chunks/useViewModel.js";
+import { V as _ } from "../../chunks/visible-element.js";
+import { createRef as O, ref as M } from "lit/directives/ref.js";
+import le from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
+import { S as re } from "../../chunks/resources.js";
+import { getOrCreateMapValue as F, createReactiveMap as ae } from "@arcgis/core/applications/Components/featureUtils.js";
+import { LayoutPriorities as T } from "@arcgis/common-components";
+import ce from "@arcgis/core/core/Accessor.js";
+import { property as p, subclass as he } from "@arcgis/core/core/accessorSupport/decorators.js";
+import { ignoreAbortErrors as w } from "@arcgis/core/core/promiseUtils.js";
+import de from "@arcgis/core/widgets/Sketch/VisibleElements.js";
+import pe from "@arcgis/core/widgets/support/SelectionToolbar/SelectionToolbarViewModel.js";
+import { c as ue } from "../../chunks/loader-utils.js";
+import { AsyncDirective as ge } from "lit/async-directive.js";
+import { directive as me, PartType as ve } from "lit/directive.js";
+import { r as fe } from "../../chunks/async-utils.js";
+import { observeAncestorsMutation as ye } from "@arcgis/toolkit/dom";
+const be = [
   "bottom-end",
   "bottom-start",
   "bottom-left",
@@ -34,7 +35,7 @@ const ge = [
   "top-start",
   "top-left",
   "top-right"
-], me = new Set(ge);
+], Ce = new Set(be);
 function D(i, e) {
   let t = e;
   for (const o of i.split(".")) {
@@ -44,7 +45,7 @@ function D(i, e) {
   }
   return typeof t == "string" ? t : void 0;
 }
-const ve = H`.editing-controls-panel{min-inline-size:100px;max-inline-size:400px;-webkit-user-select:none;user-select:none;pointer-events:initial;padding:var(--calcite-space-sm);arcgis-sketch-tooltip-controls+arcgis-snapping-controls{border-block-start:1px solid var(--calcite-color-border-3)}}:host{pointer-events:none}`, fe = {
+const Se = q`.editing-controls-panel{min-inline-size:100px;max-inline-size:400px;-webkit-user-select:none;user-select:none;pointer-events:initial;padding:var(--calcite-space-sm);arcgis-sketch-tooltip-controls+arcgis-snapping-controls{border-block-start:1px solid var(--calcite-color-border-3)}}:host{pointer-events:none}.toolbar-container{block-size:100%;min-block-size:0;min-inline-size:0}arcgis-toolbar-stack[layout=vertical]{block-size:100cqh;min-block-size:100%;max-block-size:100%}`, Te = {
   point: "pin",
   polyline: "line",
   polygon: "polygon",
@@ -55,45 +56,48 @@ const ve = H`.editing-controls-panel{min-inline-size:100px;max-inline-size:400px
   freehandPolygon: "freehand-area",
   freehandPolyline: "freehand",
   text: "text"
-}, ye = {
+}, we = {
   selectionTools: {
-    defaultPriority: y.Default,
+    defaultPriority: T.Default,
     groupKind: "split-button",
     overflowLabel: "selection"
   },
   selectionSet: {
-    defaultPriority: y.High,
+    defaultPriority: T.High,
     groupKind: "actions"
   },
   createTools: {
-    defaultPriority: y.High,
+    defaultPriority: T.High,
     groupKind: "more-button",
     overflowLabel: "drawing"
   },
   undoRedo: {
-    defaultPriority: y.Medium,
+    defaultPriority: T.Medium,
     groupKind: "split-button",
-    overflowLabel: "action"
+    overflowLabel: "action",
+    preferEndSlot: !0
   },
   settings: {
-    defaultPriority: y.Max,
+    defaultPriority: T.Max,
     groupKind: "more-button",
-    overflowLabel: "action"
+    overflowLabel: "action",
+    preferEndSlot: !0
   },
   geometrySimplification: {
-    defaultPriority: y.Default,
-    groupKind: "actions"
+    defaultPriority: T.Default,
+    groupKind: "actions",
+    preferEndSlot: !0
   }
 };
-var Ce = Object.defineProperty, be = Object.getOwnPropertyDescriptor, l = (i, e, t, o) => {
-  for (var s = o > 1 ? void 0 : o ? be(e, t) : e, d = i.length - 1, h; d >= 0; d--)
-    (h = i[d]) && (s = (o ? h(e, t, s) : h(s)) || s);
-  return o && s && Ce(e, t, s), s;
+var Ee = Object.defineProperty, _e = Object.getOwnPropertyDescriptor, h = (i, e, t, o) => {
+  for (var s = o > 1 ? void 0 : o ? _e(e, t) : e, c = i.length - 1, d; c >= 0; c--)
+    (d = i[c]) && (s = (o ? d(e, t, s) : d(s)) || s);
+  return o && s && Ee(e, t, s), s;
 };
-let n = class extends ne {
+let a = class extends ce {
   //#region Lifecycle
   constructor(i) {
-    super(i), this._effectiveRenderStateCache = /* @__PURE__ */ new Map(), this._effectiveGeometrySimplificationInProgress = !1, this.visibleElements = new ae(), this.settingsPopoverOpen = !1, this.availableCreateTools = [
+    super(i), this._effectiveRenderStateCache = /* @__PURE__ */ new Map(), this._effectiveGeometrySimplificationInProgress = !1, this.visibleElements = new de(), this.settingsPopoverOpen = !1, this.availableCreateTools = [
       "point",
       "polyline",
       "freehandPolyline",
@@ -104,21 +108,21 @@ let n = class extends ne {
     ];
   }
   initialize() {
-    this.selectionViewModel ??= new re({ persistSelection: !1 }), this.addHandles([
-      v(
+    this.selectionViewModel ??= new pe({ persistSelection: !1 }), this.addHandles([
+      f(
         () => this.sketchViewModel,
         (i, e) => {
           i !== e && this._effectiveRenderStateCache.clear();
         },
         { sync: !0 }
       ),
-      ce({
+      ue({
         getLoading: () => this.sketchViewModel?.geometrySimplificationInProgress ?? !1,
         setEffectiveLoading: (i) => {
           this._effectiveGeometrySimplificationInProgress = i;
         }
       }),
-      v(
+      f(
         () => this.view,
         (i) => {
           this.selectionViewModel.view = i;
@@ -126,7 +130,7 @@ let n = class extends ne {
         { initial: !0, sync: !0 }
       ),
       // Ensure the SelectionViewModel always has the latest layer
-      v(
+      f(
         () => this.sketchViewModel?.layer,
         (i) => this.selectionViewModel.sources = i ? [i] : [],
         { initial: !0, sync: !0 }
@@ -135,21 +139,21 @@ let n = class extends ne {
         i.length && this.update(i);
       }),
       // Cancel active tool when selection activates
-      v(
+      f(
         () => this.selectionViewModel.activeOperation,
         (i) => {
           i && (this.sketchViewModel?.cancel(), this._activeCustomToolOptions = void 0);
         },
         { sync: !0 }
       ),
-      Y(
+      ie(
         () => this.sketchViewModel,
         "create",
         (i) => {
           i.state === "complete" && this.sketchViewModel?.creationMode !== "continuous" && (this._activeCustomToolOptions = void 0);
         }
       ),
-      v(
+      f(
         () => this.visibleElements.settingsMenu,
         (i) => {
           i || (this.settingsPopoverOpen = !1);
@@ -205,27 +209,27 @@ let n = class extends ne {
     const { sketchViewModel: i } = this;
     if (!i)
       return [];
-    const e = i.effectiveAvailablePlugins, t = this.state === "disabled", o = this.visibleElements.createTools, s = this.activeTool, d = this._activeCustomToolOptions, h = d || !i.firstPluginWithSwappableLeaf ? this._customToolOptions : [], u = i.rootPlugins, r = h?.map((c) => ({
-      active: c === d,
+    const e = i.effectiveAvailablePlugins, t = this.state === "disabled", o = this.visibleElements.createTools, s = this.activeTool, c = this._activeCustomToolOptions, d = c || !i.firstPluginWithSwappableLeaf ? this._customToolOptions : [], r = i.rootPlugins, n = d?.map((l) => ({
+      active: l === c,
       disabled: t,
-      icon: c.icon,
-      labelKey: c.label,
-      onClick: c === d ? () => this._cancelActiveOperation() : () => this._activateLegacyDrawTool(c.toolName, c.createOptions, c)
+      icon: l.icon,
+      labelKey: l.label,
+      onClick: l === c ? () => this._cancelActiveOperation() : () => this._activateLegacyDrawTool(l.toolName, l.createOptions, l)
     })) ?? [];
-    if (d && u)
-      return [...this._pluginsToActions(u), ...r];
+    if (c && r)
+      return [...this._pluginsToActions(r), ...n];
     if (e?.length && this.view?.type !== "3d")
-      return [...this._pluginsToActions(e), ...r];
-    const g = this.view?.type === "3d";
+      return [...this._pluginsToActions(e), ...n];
+    const u = this.view?.type === "3d";
     return [
-      ...this.availableCreateTools?.filter((c) => g && c === "multipoint" ? !1 : c === "mesh" ? !0 : o[c])?.map((c) => ({
-        active: c === s,
+      ...this.availableCreateTools?.filter((l) => u && l === "multipoint" ? !1 : l === "mesh" ? !0 : o[l])?.map((l) => ({
+        active: l === s,
         disabled: t,
-        icon: fe[c],
-        labelKey: `draw.${c}`,
-        onClick: c === s ? () => this._cancelActiveOperation() : () => this._activateLegacyDrawTool(c)
+        icon: Te[l],
+        labelKey: `draw.${l}`,
+        onClick: l === s ? () => this._cancelActiveOperation() : () => this._activateLegacyDrawTool(l)
       })) ?? [],
-      ...r
+      ...n
     ];
   }
   get _shouldShowBackButton() {
@@ -273,30 +277,30 @@ let n = class extends ne {
     return t === "polygon" && o === "freehand" && e?.includes("freehandPolygon") ? "freehandPolygon" : t === "polyline" && o === "freehand" && e?.includes("freehandPolyline") ? "freehandPolyline" : t ?? void 0;
   }
   get _selectionCommands() {
-    const { state: i, visibleElements: e, _activeSelectionTool: t, _customActions: o } = this, s = this.state === "disabled", d = [];
-    this.sketchViewModel?.updateOnGraphicClick !== !1 && d.push({
+    const { state: i, visibleElements: e, _activeSelectionTool: t, _customActions: o } = this, s = this.state === "disabled", c = [];
+    this.sketchViewModel?.updateOnGraphicClick !== !1 && c.push({
       active: i === "ready" && this._activeSelectionTool == null,
       disabled: s,
       icon: "cursor",
       labelKey: "selectFeature",
       onClick: () => this._activateDefaultSelectionTool()
     });
-    const h = e.selectionTools;
-    h["rectangle-selection"] && d.push({
+    const d = e.selectionTools;
+    d["rectangle-selection"] && c.push({
       active: t === "rectangle-selection",
       disabled: s,
       icon: "cursor-marquee",
       labelKey: "rectangleSelection",
       onClick: () => this._activateSelectionTool("rectangle-selection")
-    }), h["lasso-selection"] && d.push({
+    }), d["lasso-selection"] && c.push({
       active: t === "lasso-selection",
       disabled: s,
       icon: "lasso-select",
       labelKey: "lassoSelection",
       onClick: () => this._activateSelectionTool("lasso-selection")
     });
-    const u = o?.get("selection-toolbar");
-    return u && d.push(...this._customActionsToSketchActions(u)), d;
+    const r = o?.get("selection-toolbar");
+    return r && c.push(...this._customActionsToSketchActions(r)), c;
   }
   get _selectionSetActions() {
     const i = this.sketchViewModel?.updateGraphics.length ?? 0;
@@ -408,7 +412,7 @@ let n = class extends ne {
     await this._executeWhenReady(async () => {
       this.cancelAll();
       const t = this.sketchViewModel;
-      t && await C(t.create(i, e));
+      t && await w(t.create(i, e));
     });
   }
   /**
@@ -419,9 +423,9 @@ let n = class extends ne {
     const e = new AbortController();
     this._pendingCommandAbortController = e;
     try {
-      await C(
+      await w(
         (async () => {
-          this.sketchViewModel?.geometrySimplificationInProgress && await Z(() => !this.sketchViewModel?.geometrySimplificationInProgress, e.signal), e.signal.aborted || await i();
+          this.sketchViewModel?.geometrySimplificationInProgress && await oe(() => !this.sketchViewModel?.geometrySimplificationInProgress, e.signal), e.signal.aborted || await i();
         })()
       );
     } finally {
@@ -443,7 +447,7 @@ let n = class extends ne {
     if (e?.length) {
       const o = /* @__PURE__ */ new Map();
       for (const s of e)
-        W(o, s.position, () => []).push(s);
+        F(o, s.position, () => []).push(s);
       this._customActions = o;
     } else
       this._customActions = void 0;
@@ -460,7 +464,7 @@ let n = class extends ne {
   async update(i, e) {
     await this._executeWhenReady(async () => {
       const t = this.sketchViewModel;
-      t && await C(t.update(i, e));
+      t && await w(t.update(i, e));
     });
   }
   // #endregion
@@ -491,10 +495,10 @@ let n = class extends ne {
       const t = this.sketchViewModel;
       if (t) {
         if (e) {
-          t.cancel(), C(t.create(i));
+          t.cancel(), w(t.create(i));
           return;
         }
-        t.firstPluginWithSwappableLeaf ? (t.replaceLeaf(i), this.view?.focus()) : C(t.create(i));
+        t.firstPluginWithSwappableLeaf ? (t.replaceLeaf(i), this.view?.focus()) : w(t.create(i));
       }
     });
   }
@@ -502,7 +506,7 @@ let n = class extends ne {
     this._executeWhenReady(() => {
       this._cancelSupportingOperations();
       const o = this.sketchViewModel;
-      o && (this._activeCustomToolOptions = t, C(o.create(i, e)));
+      o && (this._activeCustomToolOptions = t, w(o.create(i, e)));
     });
   }
   _activateSelectionTool(i) {
@@ -569,97 +573,97 @@ let n = class extends ne {
   }
   // #endregion
 };
-l([
-  a()
-], n.prototype, "_isEffectiveRenderStateFrozen", 1);
-l([
-  a()
-], n.prototype, "_effectiveGeometrySimplificationInProgress", 2);
-l([
-  a()
-], n.prototype, "_state", 1);
-l([
-  a()
-], n.prototype, "_customToolOptions", 2);
-l([
-  a()
-], n.prototype, "_activeCustomToolOptions", 2);
-l([
-  a()
-], n.prototype, "_customActions", 2);
-l([
-  a()
-], n.prototype, "selectionViewModel", 2);
-l([
-  a()
-], n.prototype, "_activeSelectionTool", 1);
-l([
-  a()
-], n.prototype, "_activePluginUniqueIds", 1);
-l([
-  a()
-], n.prototype, "_createToolActions", 1);
-l([
-  a()
-], n.prototype, "_shouldShowBackButton", 1);
-l([
-  a()
-], n.prototype, "_selectionToolActions", 1);
-l([
-  a()
-], n.prototype, "_settingsActions", 1);
-l([
-  a()
-], n.prototype, "_activeTool", 1);
-l([
-  a()
-], n.prototype, "_selectionCommands", 1);
-l([
-  a()
-], n.prototype, "_selectionSetActions", 1);
-l([
-  a()
-], n.prototype, "_undoRedoActions", 1);
-l([
-  a()
-], n.prototype, "sketchViewModel", 2);
-l([
-  a()
-], n.prototype, "visibleElements", 2);
-l([
-  a()
-], n.prototype, "view", 2);
-l([
-  a()
-], n.prototype, "settingsPopoverOpen", 2);
-l([
-  a()
-], n.prototype, "availableCreateTools", 2);
-l([
-  a()
-], n.prototype, "state", 1);
-l([
-  a()
-], n.prototype, "activeTool", 1);
-l([
-  a()
-], n.prototype, "activePluginIds", 1);
-l([
-  a()
-], n.prototype, "groupedActions", 1);
-n = l([
-  le("components.sketch.SketchComponentViewModel")
-], n);
-class Te extends de {
+h([
+  p()
+], a.prototype, "_isEffectiveRenderStateFrozen", 1);
+h([
+  p()
+], a.prototype, "_effectiveGeometrySimplificationInProgress", 2);
+h([
+  p()
+], a.prototype, "_state", 1);
+h([
+  p()
+], a.prototype, "_customToolOptions", 2);
+h([
+  p()
+], a.prototype, "_activeCustomToolOptions", 2);
+h([
+  p()
+], a.prototype, "_customActions", 2);
+h([
+  p()
+], a.prototype, "selectionViewModel", 2);
+h([
+  p()
+], a.prototype, "_activeSelectionTool", 1);
+h([
+  p()
+], a.prototype, "_activePluginUniqueIds", 1);
+h([
+  p()
+], a.prototype, "_createToolActions", 1);
+h([
+  p()
+], a.prototype, "_shouldShowBackButton", 1);
+h([
+  p()
+], a.prototype, "_selectionToolActions", 1);
+h([
+  p()
+], a.prototype, "_settingsActions", 1);
+h([
+  p()
+], a.prototype, "_activeTool", 1);
+h([
+  p()
+], a.prototype, "_selectionCommands", 1);
+h([
+  p()
+], a.prototype, "_selectionSetActions", 1);
+h([
+  p()
+], a.prototype, "_undoRedoActions", 1);
+h([
+  p()
+], a.prototype, "sketchViewModel", 2);
+h([
+  p()
+], a.prototype, "visibleElements", 2);
+h([
+  p()
+], a.prototype, "view", 2);
+h([
+  p()
+], a.prototype, "settingsPopoverOpen", 2);
+h([
+  p()
+], a.prototype, "availableCreateTools", 2);
+h([
+  p()
+], a.prototype, "state", 1);
+h([
+  p()
+], a.prototype, "activeTool", 1);
+h([
+  p()
+], a.prototype, "activePluginIds", 1);
+h([
+  p()
+], a.prototype, "groupedActions", 1);
+a = h([
+  he("components.sketch.SketchComponentViewModel")
+], a);
+class Me extends ge {
   #t;
   #e = !1;
   #i;
   constructor(e) {
-    if (super(e), e.type !== pe.ELEMENT)
+    if (super(e), e.type !== ve.ELEMENT)
       throw new Error("nodeHooks() can only be used on elements");
   }
   render(e) {
-    return x;
+    return I;
   }
   update(e, [t]) {
     const o = e.element;
@@ -668,43 +672,228 @@ class Te extends de {
     const s = this.#e ? t.afterUpdate : t.afterCreate;
     return this.#t = o, this.#e = !0, this.#i = t, queueMicrotask(() => {
       o.isConnected && s?.(o);
-    }), x;
+    }), I;
   }
   disconnected() {
     const e = this.#t, t = this.#i?.afterRemoved;
     !e || !t || queueMicrotask(() => {
-      e.isConnected || ue(() => t(e), { timeout: 16 });
+      e.isConnected || fe(() => t(e), { timeout: 16 });
     });
   }
 }
-const B = he(Te), we = te((i) => new ie({
+const W = me(Me), Pe = /* @__PURE__ */ new Set(["arcgis-map", "arcgis-scene"]), ke = 8;
+class Ae extends J {
+  constructor(e) {
+    super(e), this.#t = new MutationObserver(() => this.#c()), this.#e = new ResizeObserver(() => this.#v()), this.#i = new ResizeObserver(([t]) => {
+      if (!t)
+        return;
+      const o = this.component.layout === "horizontal" ? t.contentRect.height : t.contentRect.width;
+      o !== this.#s && (this.#s = o, this.#v());
+    }), this.#h = [], this.ref = (t) => {
+      this.#o !== t && (this.#o = t, this.#r = void 0, this.#a = void 0, this.#c());
+    }, this.#u = () => this.#c(), this.exports = void 0, this.onConnected(() => this.#m()), this.onUpdated(() => {
+      this.#d !== this.component.layout && this.#c();
+    }), this.onDisconnected(() => this.#b()), this.onLifecycle(
+      () => f(
+        () => this.component.view?.attributionHeight,
+        () => {
+          this.#m();
+        },
+        { initial: !0 }
+      )
+    );
+  }
+  #t;
+  #e;
+  #i;
+  /** Same as #toolbarStack, but specifically used to track resize observations. */
+  #l;
+  /** Last observed height for horizontal layout, or width for vertical layout. */
+  #s;
+  #n;
+  #h;
+  #g;
+  #o;
+  /** Last style-write inputs, used to avoid repeating equivalent writes from observer notifications. */
+  #r;
+  #a;
+  /** Layout for which the current context was synchronized; distinct from the last applied style layout. */
+  #d;
+  /** Re-uses the same direction observation helper as useDirection; that API has onLifecycle-based cleanup API. */
+  #p;
+  #m() {
+    queueMicrotask(() => {
+      this.component.el.isConnected && this.#c();
+    });
+  }
+  #c() {
+    const e = this.#f();
+    if (!e) {
+      this.#y(), this.#b();
+      return;
+    }
+    this.#C(e.toolbar), this.#S(e), this.#T(e), this.#v(e);
+  }
+  #f() {
+    const e = this.component.el, t = e.parentElement, o = this.#o, s = e.assignedSlot;
+    if (!t || !Pe.has(t.localName) || !o || !s?.parentElement)
+      return;
+    const c = getComputedStyle(t).direction === "rtl" ? "rtl" : "ltr", d = K(e.slot, c);
+    if (!d)
+      return;
+    const r = Array.from(t.children).filter(
+      (n) => n instanceof HTMLElement && n.localName !== "arcgis-sketch"
+    );
+    return {
+      assignedSlot: s,
+      content: r,
+      direction: c,
+      parent: t,
+      position: d,
+      toolbar: o
+    };
+  }
+  #u;
+  /**
+   * Keep track of the cross-axis size changes to ensure layout solution remains up-to-date.
+   */
+  #C(e) {
+    this.#d !== this.component.layout && (this.#s = void 0, this.#d = this.component.layout), this.#l !== e && (this.#i.disconnect(), this.#l = e, this.#s = void 0, this.#i.observe(e));
+  }
+  #S(e) {
+    const t = e.assignedSlot;
+    this.#n !== t && (this.#n?.removeEventListener("slotchange", this.#u), this.#n = t, t.addEventListener("slotchange", this.#u)), this.#g !== e.parent && (this.#t.disconnect(), this.#p?.(), this.#g = e.parent, this.#p = ye(e.parent, ["dir"], () => {
+      this.#m();
+    }), this.#t.observe(e.parent, {
+      childList: !0,
+      subtree: !1
+    }));
+  }
+  #T(e) {
+    const t = [e.parent, ...e.content];
+    Ge(this.#h, t) || (this.#e.disconnect(), t.forEach((o) => this.#e.observe(o)), this.#h = t);
+  }
+  #v(e = this.#f()) {
+    if (!e) {
+      this.#y();
+      return;
+    }
+    const t = this.component.layout, o = Oe({
+      content: Le(e),
+      gap: ke,
+      layout: t,
+      position: e.position,
+      sameSlotReserve: $e(
+        e.assignedSlot,
+        this.component.el,
+        t,
+        e.assignedSlot.parentElement
+      ),
+      toolbarBounds: e.toolbar.getBoundingClientRect(),
+      viewBounds: e.parent.getBoundingClientRect()
+    });
+    this.#w(e.toolbar, t, o);
+  }
+  #w(e, t, o) {
+    o === this.#r && t === this.#a || (this.#r = o, this.#a = t, e.style.setProperty("--arcgis-internal-toolbar-available-length", `${o}px`), t === "horizontal" ? (e.style.height = "", e.style.maxHeight = "", e.style.maxWidth = `${o}px`, e.style.width = "fit-content") : (e.style.height = "fit-content", e.style.maxHeight = `${o}px`, e.style.maxWidth = "", e.style.width = ""));
+  }
+  /** Remove controller-owned inline sizing when the stack leaves a supported view slot. */
+  #y() {
+    this.#o && (this.#o.style.maxHeight = "", this.#o.style.maxWidth = "", this.#o.style.height = "", this.#o.style.width = "", this.#o.style.removeProperty("--arcgis-internal-toolbar-available-length"), this.#r = void 0, this.#a = void 0);
+  }
+  /** Release subscriptions and cached measurements before disconnecting or entering a new context. */
+  #b() {
+    this.#t.disconnect(), this.#p?.(), this.#p = void 0, this.#e.disconnect(), this.#i.disconnect(), this.#l = void 0, this.#s = void 0, this.#h = [], this.#n?.removeEventListener("slotchange", this.#u), this.#n = void 0, this.#r = void 0, this.#a = void 0, this.#d = void 0, this.#g = void 0;
+  }
+}
+function Oe({
+  content: i,
+  gap: e,
+  layout: t,
+  position: o,
+  sameSlotReserve: s,
+  toolbarBounds: c,
+  viewBounds: d
+}) {
+  const r = L(d, t), n = L(c, t), u = z(o, t), g = u ? n.start - r.start : r.end - n.end;
+  let l = 0, v = !1;
+  for (const b of i) {
+    if (z(b.position, t) === u)
+      continue;
+    const C = L(b.bounds, t);
+    if (!(C.crossStart < n.crossEnd && C.crossEnd > n.crossStart))
+      continue;
+    const E = u ? r.end - C.start : C.end - r.start;
+    l = Math.max(l, E), v = !0;
+  }
+  const m = v ? e : 0;
+  return Math.max(0, r.length - Math.max(0, g) - s - l - m);
+}
+function L(i, e) {
+  return e === "horizontal" ? { start: i.left, end: i.right, length: i.width, crossStart: i.top, crossEnd: i.bottom } : { start: i.top, end: i.bottom, length: i.height, crossStart: i.left, crossEnd: i.right };
+}
+function z(i, e) {
+  return e === "horizontal" ? i.endsWith("left") : i.startsWith("top");
+}
+function Le(i) {
+  return i.content.flatMap((e) => {
+    if (e.assignedSlot === i.assignedSlot)
+      return [];
+    const t = K(e.slot, i.direction);
+    return t ? [{ bounds: e.getBoundingClientRect(), position: t }] : [];
+  });
+}
+function Ge(i, e) {
+  return i.length === e.length && i.every((t, o) => t === e[o]);
+}
+function $e(i, e, t, o) {
+  const s = getComputedStyle(o).flexDirection;
+  if (!(t === "horizontal" ? s.startsWith("row") : s.startsWith("column")))
+    return 0;
+  const d = i.assignedElements().filter((g) => g instanceof HTMLElement), r = d.indexOf(e);
+  if (r < 0)
+    return 0;
+  const n = getComputedStyle(e), u = s === "row" ? Number.parseFloat(n.marginRight) : s === "row-reverse" ? Number.parseFloat(n.marginLeft) : s === "column" ? Number.parseFloat(n.marginBottom) : Number.parseFloat(n.marginTop);
+  return d.slice(r + 1).reduce((g, l) => {
+    const v = l.getBoundingClientRect(), m = getComputedStyle(l), b = t === "horizontal" ? v.width + Number.parseFloat(m.marginLeft) + Number.parseFloat(m.marginRight) : v.height + Number.parseFloat(m.marginTop) + Number.parseFloat(m.marginBottom);
+    return g + b;
+  }, u);
+}
+function K(i, e) {
+  const [t, o] = i.split("-");
+  if (t !== "bottom" && t !== "top")
+    return;
+  const s = o === "start" ? e === "ltr" ? "left" : "right" : o === "end" ? e === "ltr" ? "right" : "left" : o;
+  return s === "left" || s === "right" ? `${t}-${s}` : void 0;
+}
+const Re = ne((i) => new le({
   ...i,
   cancelUpdateOnClickAway: !0,
   creationMode: "continuous",
-  textSymbol: new J({ text: "hello world" }),
+  textSymbol: new Z({ text: "hello world" }),
   useLegacyCreateTools: !1
 }));
-class Se extends Q {
+class Ve extends ee {
   constructor() {
-    super(), this.#t = new n(), this.#o = E(), this.#s = E(), this._defaultGraphicsLayer = null, this._messages = ee(), this.test = {
+    super(), this.#t = new a(), this.#l = O(), this.#s = new Ae(this), this.#n = O(), this._defaultGraphicsLayer = null, this._messages = se(), this.test = {
       componentViewModel: this.#t
-    }, this._groupLayoutPriorityOverrides = /* @__PURE__ */ new Map(), this._contextualToolLocation = "separate", this._refMap = se(), this.viewModel = we(this), this.view = this.viewModel.view, this.autoDestroyDisabled = !1, this.createGraphic = this.viewModel.createGraphic, this.creationMode = this.viewModel.creationMode, this.defaultCreateOptions = this.viewModel.defaultCreateOptions, this.defaultGraphicsLayerDisabled = !1, this.defaultUpdateOptions = this.viewModel.defaultUpdateOptions, this.geometrySimplificationInProgress = this.viewModel.geometrySimplificationInProgress, this.icon = "pencil", this.label = this._messages?.componentLabel, this.labelOptions = this.viewModel.labelOptions, this.layer = this.viewModel.layer, this.layout = "horizontal", this.pointSymbol = this.viewModel.pointSymbol, this.polygonSymbol = this.viewModel.polygonSymbol, this.polylineSymbol = this.viewModel.polylineSymbol, this.visualScale = "m", this.snappingOptions = this.viewModel.snappingOptions, this.textSymbol = this.viewModel.textSymbol, this.toolbarKind = "floating", this.tooltipOptions = this.viewModel.tooltipOptions, this.useViewOptions = this.viewModel.useViewOptions, this.valueOptions = this.viewModel.valueOptions, this.useLegacyCreateTools = this.viewModel.useLegacyCreateTools, this.updateOnGraphicClickDisabled = this.viewModel.updateOnGraphicClick, this.updateGraphics = this.viewModel.updateGraphics, this.arcgisCreate = f(() => this.viewModel, "create"), this.arcgisDelete = f(() => this.viewModel, "delete"), this.arcgisDuplicate = f(() => this.viewModel, "duplicate"), this.arcgisPropertyChange = z()("activeTool", "geometrySimplificationInProgress", "state"), this.arcgisReady = X(), this.arcgisRedo = f(() => this.viewModel, "redo"), this.arcgisUndo = f(() => this.viewModel, "undo"), this.arcgisUpdate = f(() => this.viewModel, "update"), N(["slot"], () => {
+    }, this._groupLayoutPriorityOverrides = /* @__PURE__ */ new Map(), this._contextualToolLocation = "separate", this._refMap = ae(), this.viewModel = Re(this), this.view = this.viewModel.view, this.autoDestroyDisabled = !1, this.createGraphic = this.viewModel.createGraphic, this.creationMode = this.viewModel.creationMode, this.defaultCreateOptions = this.viewModel.defaultCreateOptions, this.defaultGraphicsLayerDisabled = !1, this.defaultUpdateOptions = this.viewModel.defaultUpdateOptions, this.geometrySimplificationInProgress = this.viewModel.geometrySimplificationInProgress, this.icon = "pencil", this.label = this._messages?.componentLabel, this.labelOptions = this.viewModel.labelOptions, this.layer = this.viewModel.layer, this.layout = "horizontal", this.pointSymbol = this.viewModel.pointSymbol, this.polygonSymbol = this.viewModel.polygonSymbol, this.polylineSymbol = this.viewModel.polylineSymbol, this.visualScale = "m", this.snappingOptions = this.viewModel.snappingOptions, this.textSymbol = this.viewModel.textSymbol, this.toolbarKind = "floating", this.tooltipOptions = this.viewModel.tooltipOptions, this.useViewOptions = this.viewModel.useViewOptions, this.valueOptions = this.viewModel.valueOptions, this.useLegacyCreateTools = this.viewModel.useLegacyCreateTools, this.updateOnGraphicClickDisabled = this.viewModel.updateOnGraphicClick, this.updateGraphics = this.viewModel.updateGraphics, this.arcgisCreate = S(() => this.viewModel, "create"), this.arcgisDelete = S(() => this.viewModel, "delete"), this.arcgisDuplicate = S(() => this.viewModel, "duplicate"), this.arcgisPropertyChange = Q()("activeTool", "geometrySimplificationInProgress", "state"), this.arcgisReady = te(), this.arcgisRedo = S(() => this.viewModel, "redo"), this.arcgisUndo = S(() => this.viewModel, "undo"), this.arcgisUpdate = S(() => this.viewModel, "update"), X(["slot"], () => {
       this.requestUpdate();
     }), this.manager.onLifecycle(() => [
-      v(() => this.el.view?.map, (e, t) => {
+      f(() => this.el.view?.map, (e, t) => {
         const o = this._defaultGraphicsLayer;
         o && (t?.allLayers.includes(o) && t.remove(o), o && !e?.allLayers.includes(o) && e?.add(o));
       }),
-      v(() => this.el.view, (e) => {
+      f(() => this.el.view, (e) => {
         this.viewModel.view = e, this.#t.view = e ?? void 0;
       }, { initial: !0 }),
-      v(() => this.viewModel, (e) => {
+      f(() => this.viewModel, (e) => {
         this.#t.sketchViewModel = e, this.viewModel.pluginManager.sketch = this;
       }, { initial: !0 }),
-      v(() => this.#t.state, (e, t) => {
+      f(() => this.#t.state, (e, t) => {
         this.requestUpdate("state", t);
       }, { initial: !0 }),
-      v(() => this.#t.activeTool, () => this.arcgisPropertyChange.emit({ name: "activeTool" }), { sync: !0 })
+      f(() => this.#t.activeTool, () => this.arcgisPropertyChange.emit({ name: "activeTool" }), { sync: !0 })
     ]), this.manager.onDestroy(() => {
       this._defaultGraphicsLayer && this.el.view?.map?.allLayers.includes(this._defaultGraphicsLayer) && this.el.view?.map?.remove(this._defaultGraphicsLayer), this._defaultGraphicsLayer?.destroy(), this._defaultGraphicsLayer = null, this.#t.destroy();
     });
@@ -713,15 +902,16 @@ class Se extends Q {
     this.properties = { _groupLayoutPriorityOverrides: 16, _contextualToolLocation: 16, _refMap: 16, viewModel: 0, view: 0, activeTool: 32, autoDestroyDisabled: 5, visibleElements: 0, availableCreateTools: 0, createGraphic: 32, creationMode: 1, defaultCreateOptions: 0, defaultGraphicsLayerDisabled: 5, defaultUpdateOptions: 0, geometrySimplificationInProgress: 36, hideCreateToolsCircle: 5, hideCreateToolsMultipoint: 5, hideCreateToolsPoint: 5, hideCreateToolsPolygon: 5, hideCreateToolsPolyline: 5, hideCreateToolsRectangle: 5, hideDuplicateButton: 5, hideDeleteButton: 5, hideSelectionCountLabel: 5, hideLabelsToggle: 5, hideSelectionToolsLassoSelection: 5, hideSelectionToolsRectangleSelection: 5, hideSettingsMenu: 5, hideSinglePluginBackButton: 5, hideSnappingControls: 5, hideSnappingControlsElementsEnabledToggle: 5, hideSnappingControlsElementsFeatureEnabledToggle: 5, hideSnappingControlsElementsLayerList: 5, hideSnappingControlsElementsSelfEnabledToggle: 5, hideSnappingControlsElementsGridEnabledToggle: 5, hideSnappingControlsElementsGridControls: 5, hideSnappingControlsElementsGridControlsElementsColorSelection: 5, hideSnappingControlsElementsGridControlsElementsDynamicScaleToggle: 5, hideSnappingControlsElementsGridControlsElementsLineIntervalInput: 5, hideSnappingControlsElementsGridControlsElementsNumericInputs: 5, hideSnappingControlsElementsGridControlsElementsOutOfScaleWarning: 5, hideSnappingControlsElementsGridControlsElementsPlacementButtons: 5, hideSnappingControlsElementsGridControlsElementsRotateWithMapToggle: 5, hideTooltipsToggle: 5, hideUndoRedoMenu: 5, icon: 1, label: 1, labelOptions: 0, layer: 0, layout: 1, pointSymbol: 0, polygonSymbol: 0, polylineSymbol: 0, referenceElement: 1, relativePosition: 1, scale: 1, visualScale: 1, showSnappingControlsElementsHeader: 5, showCreateToolsFreehandPolygon: 5, showCreateToolsFreehandPolyline: 5, showCreateToolsText: 5, hideGeometrySimplificationActivityIndicator: 5, snappingOptions: 0, state: 32, textSymbol: 0, toolbarKind: 1, tooltipOptions: 0, useViewOptions: 5, valueOptions: 0, useLegacyCreateTools: 5, updateOnGraphicClickDisabled: 5, cancelUpdateOnClickAwayDisabled: 5, updateGraphics: 32 };
   }
   static {
-    this.styles = ve;
+    this.styles = Se;
   }
   #t;
   get #e() {
     return this.#t.visibleElements;
   }
   #i;
-  #o;
+  #l;
   #s;
+  #n;
   get activeTool() {
     return this.#t.activeTool;
   }
@@ -919,7 +1109,7 @@ class Se extends Q {
   }
   get relativePosition() {
     const e = this.el.slot;
-    return this.#i ?? (me.has(e) ? e : oe.topRight);
+    return this.#i ?? (Ce.has(e) ? e : re.topRight);
   }
   set relativePosition(e) {
     this.#i = e;
@@ -1009,52 +1199,52 @@ class Se extends Q {
     this.#t.sketchViewModel?.undo();
   }
   connectedCallback() {
-    super.connectedCallback(), this.defaultGraphicsLayerDisabled || (this._defaultGraphicsLayer?.destroyed && (this._defaultGraphicsLayer = null), this._defaultGraphicsLayer ??= new j({ title: "Sketch Layer" }), this.layer = this._defaultGraphicsLayer, this.view?.map?.add(this.layer), this.viewModel.layer = this._defaultGraphicsLayer);
+    super.connectedCallback(), this.defaultGraphicsLayerDisabled || (this._defaultGraphicsLayer?.destroyed && (this._defaultGraphicsLayer = null), this._defaultGraphicsLayer ??= new Y({ title: "Sketch Layer" }), this.layer = this._defaultGraphicsLayer, this.view?.map?.add(this.layer), this.viewModel.layer = this._defaultGraphicsLayer);
   }
   disconnectedCallback() {
     this._defaultGraphicsLayer && this.view?.map?.allLayers.includes(this._defaultGraphicsLayer) && this.view?.map?.remove(this._defaultGraphicsLayer), super.disconnectedCallback();
   }
   render() {
-    const e = this._refMap.get("settings")?.value?.actionElement, t = this.#t.groupedActions, { visualScale: o, layout: s, toolbarKind: d, relativePosition: h, _contextualToolLocation: u } = this, r = t.find(({ name: p }) => p === "selectionSet"), g = t.filter(({ name: p }) => p !== "selectionSet");
-    return m`<div class="toolbar-container"><arcgis-toolbar-stack .layout=${s} .toolbarKind=${d} .relativePosition=${h} .scale=${o} tooltip-appearance=calcite><arcgis-toolbar ${M(this.#o)}>${T({ hidden: !r?.visible || u !== "inline", children: this._renderActionGroup(r) })}${g.map((p) => this._renderActionGroup(p))}${T({ hidden: !r?.visible || u !== "inline-end", children: this._renderActionGroup(r) })}</arcgis-toolbar>${T({ hidden: !r?.visible || u !== "separate", children: m`<arcgis-toolbar>${this._renderActionGroup(r)}</arcgis-toolbar>` })}</arcgis-toolbar-stack></div>${T({ hidden: this.hideSettingsMenu, children: m`<arcgis-view-popover .open=${this.#t.settingsPopoverOpen} closable .heading=${this._messages.settings?.heading} .label=${this._messages.settings?.heading} .anchorElement=${e} .visualScale=${o} .actionBarElement=${this.#o.value?.barElement} @arcgisPropertyChange=${(p) => this.#t.settingsPopoverOpen = p.target.open ?? !1} .view=${this.view ?? void 0}>${this._renderSettings()}</arcgis-view-popover>` })}`;
+    const e = this._refMap.get("settings")?.value?.actionElement, t = this.#t.groupedActions, { visualScale: o, layout: s, toolbarKind: c, relativePosition: d, _contextualToolLocation: r } = this, n = t.find(({ name: g }) => g === "selectionSet"), u = t.filter(({ name: g }) => g !== "selectionSet");
+    return y`<div class="toolbar-container"><arcgis-toolbar-stack .layout=${s} .toolbarKind=${c} .relativePosition=${d} .scale=${o} tooltip-appearance=calcite ${M(this.#s.ref)}><arcgis-toolbar ${M(this.#l)}>${_({ hidden: !n?.visible || r !== "inline", children: this._renderActionGroup(n) })}${u.map((g) => this._renderActionGroup(g))}${_({ hidden: !n?.visible || r !== "inline-end", children: this._renderActionGroup(n) })}</arcgis-toolbar>${_({ hidden: !n?.visible || r !== "separate", children: y`<arcgis-toolbar>${this._renderActionGroup(n)}</arcgis-toolbar>` })}</arcgis-toolbar-stack></div>${_({ hidden: this.hideSettingsMenu, children: y`<arcgis-view-popover .open=${this.#t.settingsPopoverOpen} closable .heading=${this._messages.settings?.heading} .label=${this._messages.settings?.heading} .anchorElement=${e} .visualScale=${o} .actionBarElement=${this.#l.value?.barElement} @arcgisPropertyChange=${(g) => this.#t.settingsPopoverOpen = g.target.open ?? !1} .view=${this.view ?? void 0}>${this._renderSettings()}</arcgis-view-popover>` })}`;
   }
   _renderSettings() {
-    const { autoDestroyDisabled: e, hideLabelsToggle: t, hideSnappingControls: o, hideTooltipsToggle: s, showSnappingControlsElementsHeader: d, useViewOptions: h, view: u, viewModel: r } = this;
-    return m`<div class="editing-controls-panel"><arcgis-sketch-tooltip-controls .hideLabelsToggle=${t} .hideTooltipsToggle=${h || s} .directionMode=${r.valueOptions.directionMode} .labelsEnabled=${r.labelOptions.enabled} .tooltipsEnabled=${r.tooltipOptions.enabled} @arcgisPropertyChange=${(g) => {
-      g.stopPropagation();
-      const { labelsEnabled: p, tooltipsEnabled: c, directionMode: w } = g.currentTarget, b = this.viewModel;
-      switch (g.detail.name) {
+    const { autoDestroyDisabled: e, hideLabelsToggle: t, hideSnappingControls: o, hideTooltipsToggle: s, showSnappingControlsElementsHeader: c, useViewOptions: d, view: r, viewModel: n } = this;
+    return y`<div class="editing-controls-panel"><arcgis-sketch-tooltip-controls .hideLabelsToggle=${t} .hideTooltipsToggle=${d || s} .directionMode=${n.valueOptions.directionMode} .labelsEnabled=${n.labelOptions.enabled} .tooltipsEnabled=${n.tooltipOptions.enabled} @arcgisPropertyChange=${(u) => {
+      u.stopPropagation();
+      const { labelsEnabled: g, tooltipsEnabled: l, directionMode: v } = u.currentTarget, m = this.viewModel;
+      switch (u.detail.name) {
         case "labelsEnabled":
-          b.labelOptions.enabled = p;
+          m.labelOptions.enabled = g;
           break;
         case "directionMode":
-          b.valueOptions.directionMode = w;
+          m.valueOptions.directionMode = v;
           break;
         case "tooltipsEnabled":
-          b.tooltipOptions.enabled = c;
+          m.tooltipOptions.enabled = l;
           break;
       }
-    }}></arcgis-sketch-tooltip-controls>${!h && !o ? m`<arcgis-snapping-controls .autoDestroyDisabled=${e} .view=${u} .visibleElements=${this.#e.snappingControlsElements} .snappingOptions=${r.snappingOptions} .showHeader=${d} @arcgisPropertyChange=${(g) => g.stopPropagation()}></arcgis-snapping-controls>` : void 0}</div>`;
+    }}></arcgis-sketch-tooltip-controls>${!d && !o ? y`<arcgis-snapping-controls .autoDestroyDisabled=${e} .view=${r} .visibleElements=${this.#e.snappingControlsElements} .snappingOptions=${n.snappingOptions} .showHeader=${c} @arcgisPropertyChange=${(u) => u.stopPropagation()}></arcgis-snapping-controls>` : void 0}</div>`;
   }
   _renderActionGroup({ visible: e, commands: t, name: o }) {
     if (!e || !t.length)
       return;
-    const { defaultPriority: s, groupKind: d, overflowLabel: h } = ye[o], r = (o === "geometrySimplification" ? void 0 : this._groupLayoutPriorityOverrides.get(o)) ?? s, g = t.map((c) => this._renderCommand(c)), p = D(`more.${h}`, this._messages);
-    switch (d) {
+    const { defaultPriority: s, groupKind: c, overflowLabel: d, preferEndSlot: r } = we[o], u = (o === "geometrySimplification" ? void 0 : this._groupLayoutPriorityOverrides.get(o)) ?? s, g = t.map((v) => this._renderCommand(v)), l = D(`more.${d}`, this._messages);
+    switch (c) {
       case "more-button":
-        return m`<arcgis-toolbar-group .priority=${r}><arcgis-toolbar-more-button .overflowActionLabel=${p} .priority=${r}>${g}</arcgis-toolbar-more-button></arcgis-toolbar-group>`;
+        return y`<arcgis-toolbar-group .priority=${u} .preferEndSlot=${r}><arcgis-toolbar-more-button .overflowActionLabel=${l} .priority=${u}>${g}</arcgis-toolbar-more-button></arcgis-toolbar-group>`;
       case "split-button":
-        return m`<arcgis-toolbar-group .priority=${r}><arcgis-toolbar-split-button .overflowActionLabel=${p} .priority=${r}>${g}</arcgis-toolbar-split-button></arcgis-toolbar-group>`;
+        return y`<arcgis-toolbar-group .priority=${u} .preferEndSlot=${r}><arcgis-toolbar-split-button .overflowActionLabel=${l} .priority=${u}>${g}</arcgis-toolbar-split-button></arcgis-toolbar-group>`;
       case "actions":
-        return m`<arcgis-toolbar-group .priority=${r}>${g}</arcgis-toolbar-group>`;
+        return y`<arcgis-toolbar-group .priority=${u} .preferEndSlot=${r}>${g}</arcgis-toolbar-group>`;
     }
   }
-  _renderCommand({ active: e, afterCreate: t, afterRemoved: o, afterUpdate: s, appearance: d, icon: h, disabled: u, id: r, kind: g, labelKey: p, labelParameters: c, loading: w, tooltipKey: b, iconFlipRTL: P, onClick: k, refKey: A, textEnabled: O, renderAsAction: K }) {
-    const { _messages: L, _refMap: U, layout: G } = this, S = D(p, L), _ = S === void 0 ? p : c ? q(S, c) : S, V = L?.[b] ?? _, $ = A ? W(U, A, E) : this.#s, R = { afterCreate: t, afterRemoved: o, afterUpdate: s };
-    return K ? m`<arcgis-toolbar-action .active=${e} .appearance=${d} .disabled=${u} .icon=${h} .iconFlipRtl=${P} id=${r ?? I} .kind=${g} .loading=${w} .labelText=${G === "horizontal" ? _ : ""} .textEnabled=${O} .tooltipText=${G === "horizontal" && O ? "" : V} @arcgisToolbarItemSelected=${k} ${B(R)} ${M($)}></arcgis-toolbar-action>` : m`<arcgis-toolbar-item .active=${e} .disabled=${u} .icon=${h} id=${r ?? I} .iconFlipRtl=${P} .labelText=${_} .tooltipText=${V} @arcgisItemSelected=${k} ${B(R)} ${M($)}></arcgis-toolbar-item>`;
+  _renderCommand({ active: e, afterCreate: t, afterRemoved: o, afterUpdate: s, appearance: c, icon: d, disabled: r, id: n, kind: u, labelKey: g, labelParameters: l, loading: v, tooltipKey: m, iconFlipRTL: b, onClick: C, refKey: P, textEnabled: E, renderAsAction: U }) {
+    const { _messages: G, _refMap: H, layout: $ } = this, k = D(g, G), A = k === void 0 ? g : l ? j(k, l) : k, R = G?.[m] ?? A, V = P ? F(H, P, O) : this.#n, x = { afterCreate: t, afterRemoved: o, afterUpdate: s };
+    return U ? y`<arcgis-toolbar-action .active=${e} .appearance=${c} .disabled=${r} .icon=${d} .iconFlipRtl=${b} id=${n ?? B} .kind=${u} .loading=${v} .labelText=${$ === "horizontal" ? A : ""} .textEnabled=${E} .tooltipText=${$ === "horizontal" && E ? "" : R} @arcgisToolbarItemSelected=${C} ${W(x)} ${M(V)}></arcgis-toolbar-action>` : y`<arcgis-toolbar-item .active=${e} .disabled=${r} .icon=${d} id=${n ?? B} .iconFlipRtl=${b} .labelText=${A} .tooltipText=${R} @arcgisItemSelected=${C} ${W(x)} ${M(V)}></arcgis-toolbar-item>`;
   }
 }
-F("arcgis-sketch", Se);
+N("arcgis-sketch", Ve);
 export {
-  Se as ArcgisSketch
+  Ve as ArcgisSketch
 };