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

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

@@ -2,8 +2,9 @@
 import { c as M } from "../../chunks/runtime.js";
 import { css as C, html as h } from "lit";
 import { LitElement as F, createEvent as L, safeClassMap as o, nothing as y, safeStyleMap as m } from "@arcgis/lumina";
-import { formatNumber as T } from "@arcgis/core/intl.js";
-const c = {
+import { u as T } from "../../chunks/useT9n.js";
+import { a as z } from "../../chunks/locale.js";
+const l = {
   container: "container",
   ticksContainer: "ticks-container",
   labelsContainer: "labels-container",
@@ -14,18 +15,18 @@ const c = {
   tickLabelFocused: "tick-label--focused",
   tickLabelText: "tick-label-text",
   baseline: "baseline"
-}, z = C`:host{display:flex;--arcgis-ticks-font-size: var(--calcite-font-size--2);--arcgis-ticks-font-weight: var(--calcite-font-weight-medium);--arcgis-ticks-gap: 1em;--arcgis-ticks-tick-color: var(--calcite-color-border-input);--arcgis-ticks-tick-length: .5rem;--arcgis-ticks-tick-transform: translateX(-50%);--arcgis-ticks-tick-width: .125rem}.container{align-items:stretch;display:flex;color:var(--calcite-color-text-2);flex:1;font-weight:var(--arcgis-ticks-font-weight);font-size:var(--arcgis-ticks-font-size);line-height:1em;position:relative;user-select:none;word-wrap:normal;word-break:normal}.baseline{background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick{position:absolute;background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick-label{position:absolute;text-align:var(--arcgis-ticks-label-text-align, center);width:var(--arcgis-ticks-label-width, var(--labels-container-width, "auto"))}.tick-label-text:hover{text-decoration:underline}.tick-label-text{display:inline-block;line-height:1}.tick-label--focused .tick-label-text{outline:2px solid var(--calcite-color-focus, var(--calcite-color-brand));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:dir(rtl){.tick-label{direction:rtl}}:host([layout="horizontal"]){.ticks-container{height:var(--arcgis-ticks-tick-length)}.labels-container{height:var(--labels-container-height, "auto")}.tick{width:var(--arcgis-ticks-tick-width);height:var(--arcgis-ticks-tick-length);transform:var(--arcgis-ticks-tick-transform)}.tick-label{transform:translate(-50%)}.tick--min{transform:unset}.tick--max{transform:translate(-100%)}}:host([layout="vertical"]){.ticks-container{width:var(--arcgis-ticks-tick-length)}.labels-container{width:var(--labels-container-width)}.tick{width:var(--arcgis-ticks-tick-length);height:var(--arcgis-ticks-tick-width);transform:translateY(50%)}.tick-label{text-align:right;transform:translateY(50%)}.tick--min{transform:unset}.tick--max{transform:translateY(100%)}}:host([layout="horizontal"][mirrored]){.tick,.tick-label{transform:translate(50%)}.tick--min{transform:unset}.tick--max{transform:translate(100%)}}:host([layout="vertical"][mirrored]){.tick,.tick-label{transform:translateY(-50%)}.tick--min{transform:unset}.tick--max{transform:translateY(-100%)}}:host([layout="horizontal"][label-placement="start"]){.container{flex-direction:column;justify-content:flex-end}.labels-container{margin-bottom:var(--arcgis-ticks-gap)}}:host([layout="horizontal"][label-placement="end"]){.container{flex-direction:column-reverse;justify-content:flex-end}.labels-container{margin-top:var(--arcgis-ticks-gap)}}:host([layout="vertical"][label-placement="start"]){.container{flex-direction:row;justify-content:flex-end}:dir(ltr){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right}}:dir(rtl){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left;unicode-bidi:plaintext}}}:host([layout="vertical"][label-placement="end"]){.container{flex-direction:row-reverse;justify-content:flex-end}:dir(ltr){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left}}:dir(rtl){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right;unicode-bidi:plaintext}}}:host([interactive]){pointer-events:none;.tick,.tick-label{pointer-events:auto;cursor:pointer}.tick:focus{background-color:var(--calcite-color-brand);outline:2px solid var(--calcite-color-focus, var(--calcite-color-brand));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}}`;
-class A extends F {
+}, A = C`:host{display:flex;--arcgis-ticks-font-size: var(--calcite-font-size--2);--arcgis-ticks-font-weight: var(--calcite-font-weight-medium);--arcgis-ticks-gap: 1em;--arcgis-ticks-tick-color: var(--calcite-color-border-input);--arcgis-ticks-tick-length: .5rem;--arcgis-ticks-tick-transform: translateX(-50%);--arcgis-ticks-tick-width: .125rem}.container{align-items:stretch;display:flex;color:var(--calcite-color-text-2);flex:1;font-weight:var(--arcgis-ticks-font-weight);font-size:var(--arcgis-ticks-font-size);line-height:1em;position:relative;user-select:none;word-wrap:normal;word-break:normal}.baseline{background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick{position:absolute;background-color:var(--arcgis-ticks-tick-color, var(--calcite-color-border-input))}.tick-label{position:absolute;text-align:var(--arcgis-ticks-label-text-align, center);width:var(--arcgis-ticks-label-width, var(--labels-container-width, "auto"))}.tick-label-text{display:inline-block;line-height:1}.tick-label--focused .tick-label-text{outline:2px solid var(--calcite-color-focus, var(--calcite-color-brand));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:dir(rtl){.tick-label{direction:rtl}}:host([layout="horizontal"]){.ticks-container{height:var(--arcgis-ticks-tick-length)}.labels-container{height:var(--labels-container-height, "auto")}.tick{width:var(--arcgis-ticks-tick-width);height:var(--arcgis-ticks-tick-length);transform:var(--arcgis-ticks-tick-transform)}.tick-label{transform:translate(-50%)}.tick--min{transform:unset}.tick--max{transform:translate(-100%)}}:host([layout="vertical"]){.ticks-container{width:var(--arcgis-ticks-tick-length)}.labels-container{width:var(--labels-container-width)}.tick{width:var(--arcgis-ticks-tick-length);height:var(--arcgis-ticks-tick-width);transform:translateY(50%)}.tick-label{text-align:right;transform:translateY(50%)}.tick--min{transform:unset}.tick--max{transform:translateY(100%)}}:host([layout="horizontal"][mirrored]){.tick,.tick-label{transform:translate(50%)}.tick--min{transform:unset}.tick--max{transform:translate(100%)}}:host([layout="vertical"][mirrored]){.tick,.tick-label{transform:translateY(-50%)}.tick--min{transform:unset}.tick--max{transform:translateY(-100%)}}:host([layout="horizontal"][label-placement="start"]){.container{flex-direction:column;justify-content:flex-end}.labels-container{margin-bottom:var(--arcgis-ticks-gap)}}:host([layout="horizontal"][label-placement="end"]){.container{flex-direction:column-reverse;justify-content:flex-end}.labels-container{margin-top:var(--arcgis-ticks-gap)}}:host([layout="vertical"][label-placement="start"]){.container{flex-direction:row;justify-content:flex-end}:dir(ltr){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right}}:dir(rtl){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left;unicode-bidi:plaintext}}}:host([layout="vertical"][label-placement="end"]){.container{flex-direction:row-reverse;justify-content:flex-end}:dir(ltr){.labels-container{margin-left:var(--arcgis-ticks-gap)}.tick-label{text-align:left}}:dir(rtl){.labels-container{margin-right:var(--arcgis-ticks-gap)}.tick-label{text-align:right;unicode-bidi:plaintext}}}:host([interactive]){pointer-events:none;.tick,.tick-label{pointer-events:auto;cursor:pointer}.tick-label-text:hover{text-decoration:underline}.tick:focus{background-color:var(--calcite-color-brand);outline:2px solid var(--calcite-color-focus, var(--calcite-color-brand));outline-offset:calc(2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}}`;
+class D extends F {
   constructor() {
-    super(...arguments), this._formatValue = (t) => T(t, this._formatOptions), this._activeTick = null, this._formatOptions = {
+    super(...arguments), this._messages = T({ name: null }), this.#t = (t) => z(this._messages._lang, this._formatOptions).format(t), this._activeTick = null, this._formatOptions = {
       style: "decimal",
       useGrouping: !0,
       minimumFractionDigits: 0,
       maximumFractionDigits: 2
-    }, this.interactive = !1, this.interpolationExponent = 0, this.labelPlacement = "end", this.layout = "horizontal", this.max = 100, this.min = 0, this.mirrored = !1, this.mode = "count", this.showLabels = !1, this.showBaseline = !1, this.values = [], this.arcgisTickClick = L({ cancelable: !1 });
+    }, this.autoDestroyDisabled = !1, this.interactive = !1, this.interpolationExponent = 0, this.labelPlacement = "end", this.layout = "horizontal", this.max = 100, this.min = 0, this.mirrored = !1, this.mode = "count", this.showLabels = !1, this.showBaseline = !1, this.values = [], this.arcgisTickClick = L({ cancelable: !1 });
   }
   static {
-    this.properties = { _activeTick: 16, _formatOptions: 16, interactive: 7, interpolationExponent: 9, labelFormatter: 0, labelPlacement: 3, layout: 3, max: 9, min: 9, mirrored: 7, mode: 1, showLabels: 5, showBaseline: 5, values: [9, { converter: {
+    this.properties = { _activeTick: 16, _formatOptions: 16, autoDestroyDisabled: 5, interactive: 7, interpolationExponent: 9, labelFormatter: 0, labelPlacement: 3, layout: 3, max: 9, min: 9, mirrored: 7, mode: 1, showLabels: 5, showBaseline: 5, values: [9, { converter: {
       fromAttribute(t) {
         if (t.includes(","))
           return t.split(",").filter((e) => e.trim() !== "").map(parseFloat).filter((e) => Number.isFinite(e));
@@ -37,14 +38,18 @@ class A extends F {
     } }] };
   }
   static {
-    this.styles = z;
+    this.styles = A;
+  }
+  #t;
+  async destroy() {
+    await this.manager.destroy();
   }
   updated() {
-    const t = this.renderRoot.querySelector(`.${c.labelsContainer}`);
+    const t = this.renderRoot.querySelector(`.${l.labelsContainer}`);
     if (t) {
       t.style.removeProperty("--labels-container-width"), t.style.removeProperty("--labels-container-height");
       let e = 0, i = 0;
-      for (const a of this.renderRoot.querySelectorAll(`.${c.tickLabel}`)) {
+      for (const a of this.renderRoot.querySelectorAll(`.${l.tickLabel}`)) {
         const r = a.getBoundingClientRect();
         e = Math.max(e, r.width), i = Math.max(i, r.height);
       }
@@ -72,46 +77,46 @@ class A extends F {
   _internalLabelFormatter(t) {
     const e = this.labelFormatter;
     if (!e)
-      return this._formatValue(t);
-    const i = e(t, this._formatValue);
-    return i ?? this._formatValue(t);
+      return this.#t(t);
+    const i = e(t, this.#t);
+    return i ?? this.#t(t);
   }
   render() {
-    return h`<div class=${o(c.container)} touch-action=none>${this._renderContent()}${this._renderBaseline()}</div>`;
+    return h`<div class=${o(l.container)} touch-action=none>${this._renderContent()}${this._renderBaseline()}</div>`;
   }
   _renderContent() {
-    const { interpolationExponent: t, max: e, min: i, mode: a, values: r, layout: n, mirrored: s, showLabels: w, interactive: k } = this, g = [], v = [];
+    const { interpolationExponent: t, max: e, min: i, mode: a, values: r, layout: n, mirrored: c, showLabels: w, interactive: k } = this, g = [], v = [];
     for (const [f, d] of P(a, i, e, t, r)) {
-      const p = { [n === "horizontal" ? s ? "right" : "left" : s ? "top" : "bottom"]: `${f}%` }, $ = {
-        [c.tick]: !0,
-        [c.tickMin]: f === 0,
-        [c.tickMax]: f === 100
+      const p = { [n === "horizontal" ? c ? "right" : "left" : c ? "top" : "bottom"]: `${f}%` }, $ = {
+        [l.tick]: !0,
+        [l.tickMin]: f === 0,
+        [l.tickMax]: f === 100
       };
       if (g.push(h`<div class=${o($)} .role=${k ? "button" : void 0} .ariaLabel=${k ? this._internalLabelFormatter(d) : void 0} style=${m(p)} data-value=${d ?? y} .tabIndex=${k ? 0 : -1} @blur=${this._handleBlur} @click=${this._handleClick} @focus=${this._handleFocus} @keydown=${this._handleKeyDown} @mousedown=${this._handleMouseDown}></div>`), w) {
         const _ = {
-          [c.tickLabel]: !0,
-          [c.tickLabelFocused]: this._activeTick === String(d)
+          [l.tickLabel]: !0,
+          [l.tickLabelFocused]: this._activeTick === String(d)
         };
-        v.push(h`<div class=${o(_)} style=${m(p)} data-value=${d ?? y} @click=${this._handleClick}><span class=${o(c.tickLabelText)}>${this._internalLabelFormatter(d)}</span></div>`);
+        v.push(h`<div class=${o(_)} style=${m(p)} data-value=${d ?? y} @click=${this._handleClick}><span class=${o(l.tickLabelText)}>${this._internalLabelFormatter(d)}</span></div>`);
       }
     }
-    return [h`<div class=${o(c.labelsContainer)}>${v}</div>`, h`<div class=${o(c.ticksContainer)}>${g}</div>`];
+    return [h`<div class=${o(l.labelsContainer)}>${v}</div>`, h`<div class=${o(l.ticksContainer)}>${g}</div>`];
   }
   _renderBaseline() {
     const { showBaseline: t, layout: e } = this;
-    return t && h`<div class=${o(c.baseline)} style=${m({
+    return t && h`<div class=${o(l.baseline)} style=${m({
       [e === "horizontal" ? "width" : "height"]: "100%",
       [e === "horizontal" ? "height" : "width"]: "0.125rem"
     })}></div>` || "";
   }
 }
-function* P(l, t, e, i, a) {
-  switch (l) {
+function* P(s, t, e, i, a) {
+  switch (s) {
     case "value": {
       const r = Array.isArray(a) ? a : [a];
       for (const n of r) {
-        const s = B(t, e, n, i) * 100;
-        s >= 0 && s <= 100 && (yield [s, n]);
+        const c = B(t, e, n, i) * 100;
+        c >= 0 && c <= 100 && (yield [c, n]);
       }
       break;
     }
@@ -130,33 +135,33 @@ function* P(l, t, e, i, a) {
         yield [50, u(t, e, 0.5, i)];
       else
         for (let n = 0; n < r; n++) {
-          const s = n * 100 / (r - 1);
-          yield [s, u(t, e, s / 100, i)];
+          const c = n * 100 / (r - 1);
+          yield [c, u(t, e, c / 100, i)];
         }
       break;
     }
   }
 }
-function b(l, t, e) {
-  return e < l ? l : e > t ? t : e;
+function b(s, t, e) {
+  return e < s ? s : e > t ? t : e;
 }
-function x(l, t, e) {
-  return l + (t - l) * e;
+function x(s, t, e) {
+  return s + (t - s) * e;
 }
-function B(l, t, e, i = 0) {
-  let a = (e - l) / (t - l);
+function B(s, t, e, i = 0) {
+  let a = (e - s) / (t - s);
   if (a = b(0, 1, a), Math.abs(i) < 1e-9)
     return a;
   const r = 1 + Math.expm1(i) * a;
   return a = Math.log(r) / i, b(0, 1, a);
 }
-function u(l, t, e, i = 0) {
+function u(s, t, e, i = 0) {
   if (e = b(0, 1, e), Math.abs(i) < 1e-9)
-    return x(l, t, e);
+    return x(s, t, e);
   const a = Math.expm1(i * e) / Math.expm1(i);
-  return x(l, t, a);
+  return x(s, t, a);
 }
-M("arcgis-ticks", A);
+M("arcgis-ticks", D);
 export {
-  A as ArcgisTicks
+  D as ArcgisTicks
 };

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

@@ -1,5 +1,6 @@
 /// <reference path="../../index.d.ts" />
-import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { JsxNode, PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { MeasurementContext, RenderableToolbarContent, RenderContext } from "./types.js";
 import type { ActionBar as ActionBar } from "@esri/calcite-components/components/calcite-action-bar";
 
 /**
@@ -7,15 +8,13 @@ import type { ActionBar as ActionBar } from "@esri/calcite-components/components
  *
  * Measures the child elements then renders their content within its own shadow root.
  *
+ * Can be used alone, or in conjunction with a toolbar-stack (ideal in cases with multiple toolbars).
+ *
  * @internal
  */
 export abstract class ArcgisToolbar extends LitElement {
   get barElement(): ActionBar | undefined;
-  /**
-   * Toolbar orientation.
-   *
-   * @default "horizontal"
-   */
+  /** Toolbar orientation. */
   accessor layout: "horizontal" | "vertical";
   /**
    * Relative position is used to control how popover element placement and directional arrows
@@ -44,4 +43,25 @@ export abstract class ArcgisToolbar extends LitElement {
    * @default "native"
    */
   accessor tooltipAppearance: "calcite-dark" | "calcite" | "native";
+  /**
+   * @param context
+   * @param budget
+   * @internal
+   */
+  allocate(context: RenderContext, budget: number): {
+      group: RenderableToolbarContent;
+      budget: number;
+  }[];
+  /**
+   * @param context
+   * @internal
+   */
+  measure(context: MeasurementContext): number[];
+  /**
+   * @param context
+   * @param budget
+   * @param toolbarKind
+   * @internal
+   */
+  proxiedRender(context: RenderContext, budget: number, toolbarKind?: "docked" | "floating"): JsxNode;
 }

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

@@ -1,82 +1,108 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as n } from "../../chunks/runtime.js";
-import { ref as i } from "lit/directives/ref.js";
-import { css as r, html as l } from "lit";
-import { LitElement as s } from "@arcgis/lumina";
-import { useDirection as d } from "@arcgis/lumina/controllers";
-import { i as h, a as p } from "../../chunks/utils.js";
-const u = r`:host{--arcgis-internal-toolbar-action-kind-color: var(--calcite-action-text-color);--arcgis-internal-toolbar-action-kind-color-hover: var(--calcite-action-text-color-press);--arcgis-internal-toolbar-action-kind-color-press: var(--calcite-action-text-color-press);--arcgis-internal-toolbar-action-kind-foreground-color: var(--calcite-color-text-inverse);--arcgis-internal-toolbar-action-transparent-background-color: var(--calcite-color-transparent);--arcgis-internal-toolbar-action-transparent-background-color-hover: var(--calcite-color-transparent-hover);--arcgis-internal-toolbar-action-transparent-background-color-press: var(--calcite-color-transparent-press)}calcite-action{--calcite-action-text-color: var(--arcgis-internal-toolbar-action-kind-color);--calcite-action-text-color-press: var(--arcgis-internal-toolbar-action-kind-color-press);--calcite-color-focus: var(--arcgis-internal-toolbar-action-kind-color);--calcite-action-indicator-color: var(--arcgis-internal-toolbar-action-kind-color)}calcite-action:is([data-appearance=solid]){--calcite-offset-invert-focus: 1}calcite-action[data-appearance=outline]{--calcite-action-background-color: var(--arcgis-internal-toolbar-action-transparent-background-color);--calcite-action-background-color-hover: var(--arcgis-internal-toolbar-action-transparent-background-color-hover);--calcite-action-background-color-press: var(--arcgis-internal-toolbar-action-transparent-background-color-press);--calcite-action-text-color: var(--arcgis-internal-toolbar-action-kind-color);--calcite-action-text-color-press: var(--arcgis-internal-toolbar-action-kind-color-press);box-shadow:inset 0 0 0 var(--calcite-border-width-sm, 1px) var(--arcgis-internal-toolbar-action-kind-color)}calcite-action[data-appearance=outline]:hover{box-shadow:inset 0 0 0 var(--calcite-border-width-sm, 1px) var(--arcgis-internal-toolbar-action-kind-color-hover)}calcite-action[data-appearance=outline]:active,calcite-action[data-appearance=outline][active]{--calcite-action-background-color: var(--arcgis-internal-toolbar-action-transparent-background-color-press);box-shadow:inset 0 0 0 var(--calcite-border-width-sm, 1px) var(--arcgis-internal-toolbar-action-kind-color-press)}calcite-action[data-appearance=solid]{--calcite-action-background-color: var(--arcgis-internal-toolbar-action-kind-color);--calcite-action-background-color-hover: var(--arcgis-internal-toolbar-action-kind-color-hover);--calcite-action-background-color-press: var(--arcgis-internal-toolbar-action-kind-color-press);--calcite-action-text-color: var(--arcgis-internal-toolbar-action-kind-foreground-color);--calcite-action-text-color-press: var(--arcgis-internal-toolbar-action-kind-foreground-color);--calcite-action-indicator-color: var(--arcgis-internal-toolbar-action-kind-foreground-color)}calcite-action:is([data-appearance=outline],[data-appearance=solid]):not([data-kind]){--arcgis-internal-toolbar-action-kind-color: var(--calcite-color-inverse);--arcgis-internal-toolbar-action-kind-color-hover: var(--calcite-color-inverse-hover);--arcgis-internal-toolbar-action-kind-color-press: var(--calcite-color-inverse-press)}calcite-action:not([data-kind]){--calcite-action-indicator-color: var(--calcite-color-brand)}calcite-action[data-kind=brand]{--arcgis-internal-toolbar-action-kind-color: var(--calcite-color-brand);--arcgis-internal-toolbar-action-kind-color-hover: var(--calcite-color-brand-hover);--arcgis-internal-toolbar-action-kind-color-press: var(--calcite-color-brand-press);--calcite-action-indicator-color: var(--calcite-color-text-1);&[data-appearance=solid]{--calcite-action-indicator-color: var(--calcite-color-text-inverse)}}calcite-action[data-kind=danger]{--arcgis-internal-toolbar-action-kind-color: var(--calcite-color-status-danger);--arcgis-internal-toolbar-action-kind-color-hover: var(--calcite-color-status-danger-hover);--arcgis-internal-toolbar-action-kind-color-press: var(--calcite-color-status-danger-press)}calcite-action[data-kind=info]{--arcgis-internal-toolbar-action-kind-color: var(--calcite-color-status-info);--arcgis-internal-toolbar-action-kind-color-hover: var(--calcite-color-status-info-hover);--arcgis-internal-toolbar-action-kind-color-press: var(--calcite-color-status-info-press)}calcite-action[data-kind=success]{--arcgis-internal-toolbar-action-kind-color: var(--calcite-color-status-success);--arcgis-internal-toolbar-action-kind-color-hover: var(--calcite-color-status-success-hover);--arcgis-internal-toolbar-action-kind-color-press: var(--calcite-color-status-success-press)}calcite-action[data-kind=warning]{--arcgis-internal-toolbar-action-kind-color: var(--calcite-color-status-warning);--arcgis-internal-toolbar-action-kind-color-hover: var(--calcite-color-status-warning-hover);--arcgis-internal-toolbar-action-kind-color-press: var(--calcite-color-status-warning-press)}`, b = r`:host([layout="horizontal"]){calcite-action.split-anchor{min-width:24px;max-width:24px;&[scale=m]{--calcite-internal-action-spacing: .25rem}&[scale=l]{--calcite-internal-action-spacing: 0rem}}}:host([layout="vertical"]){calcite-action.split-anchor{--calcite-internal-action-min-height: unset;min-height:24px;max-height:24px}}.split-host{display:contents;cursor:pointer;calcite-action:has(~.split-menu[open]),calcite-action:has(~.split-menu:hover),calcite-action:has(~.split-menu:focus-within),calcite-action:hover~.split-menu calcite-action[slot=trigger],.split-menu[open] calcite-action[slot=trigger],.split-menu:hover calcite-action[slot=trigger],.split-menu:focus-within calcite-action[slot=trigger]{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-transparent-hover))}}:host([layout="horizontal"]){.split-host{calcite-action:has(+.split-menu){border-radius:var(--calcite-action-corner-radius, 2px);border-top-right-radius:0;border-bottom-right-radius:0}calcite-action[slot=trigger]{border-radius:var(--calcite-action-corner-radius, 2px);border-bottom-left-radius:0;border-top-left-radius:0}calcite-action:dir(rtl):has(+.split-menu){border-radius:var(--calcite-action-corner-radius, 2px);border-top-left-radius:0;border-bottom-left-radius:0}calcite-action:dir(rtl)[slot=trigger]{border-radius:var(--calcite-action-corner-radius, 2px);border-bottom-right-radius:0;border-top-right-radius:0}.split-menu:dir(ltr){margin-left:calc(0px - var(--calcite-internal-action-bar-gap))}.split-menu:dir(rtl){margin-right:calc(0px - var(--calcite-internal-action-bar-gap))}}}:host([layout="vertical"]){.split-host{calcite-action:has(+.split-menu){border-radius:var(--calcite-action-corner-radius, 2px);border-bottom-left-radius:0;border-bottom-right-radius:0}calcite-action[slot=trigger]{border-radius:var(--calcite-action-corner-radius, 2px);border-top-right-radius:0;border-top-left-radius:0}.split-menu{margin-top:calc(0px - var(--calcite-internal-action-bar-gap))}}}`, g = r`:host{display:flex;max-inline-size:100%;max-block-size:100%;--arcgis-toolbar-tooltip-dark-background-color: #212121;--arcgis-toolbar-tooltip-dark-border-color: #404040;--arcgis-toolbar-tooltip-dark-text-color: #fff}:host([toolbar-kind="floating"]){display:inline-flex;.ruler{opacity:0;pointer-events:none;position:absolute;visibility:hidden;width:min(100cqw - 32px,100vw - 32px);height:min(100cqh - 32px,100vh - 32px)}}:host([toolbar-kind="docked"]){.ruler{visibility:hidden;height:0;display:block;position:absolute;top:0;left:0;right:0;width:100%;height:100%}}:host([toolbar-kind="docked"][layout="horizontal"]){calcite-action-bar{min-width:100%}}:host([toolbar-kind="docked"][layout="vertical"]){min-height:100%;calcite-action-bar{min-height:100%}}:host([toolbar-kind="floating"][layout="horizontal"]){inline-size:max-content;overflow-x:auto}:host([toolbar-kind="floating"][layout="vertical"]){block-size:max-content;overflow-y:auto}calcite-tooltip.calcite-mode-dark{--calcite-tooltip-background-color: var(--arcgis-toolbar-tooltip-dark-background-color);--calcite-tooltip-border-color: var(--arcgis-toolbar-tooltip-dark-border-color);--calcite-tooltip-text-color: var(--arcgis-toolbar-tooltip-dark-text-color)}`;
-class v extends s {
+import { c as d } from "../../chunks/runtime.js";
+import { ref as l } from "lit/directives/ref.js";
+import { html as c } from "lit";
+import { keyed as u } from "lit/directives/keyed.js";
+import { LitElement as p, createEvent as g } from "@arcgis/lumina";
+import { useDirection as m } from "@arcgis/lumina/controllers";
+import { s as f, a as b, b as _, c as v } from "../../chunks/toolbar.js";
+import { a as o } from "../../chunks/utils.js";
+import { i as y } from "../../chunks/types.js";
+class R extends p {
   constructor() {
-    super(...arguments), this.#t = new ResizeObserver((t) => this._updateMeasurement(t)), this.#a = new MutationObserver(() => this._syncGroups()), this.#i = d(), this._setRenderedBar = (t) => {
+    super(), this.#t = new ResizeObserver((t) => this._updateMeasurement(t)), this.#r = new MutationObserver(() => this._syncGroups()), this.#i = m(), this._layout = "horizontal", this._setRenderedBar = (t) => {
       t == null && (this._renderedBar = void 0, this._hydratedRenderedBar = void 0), !(t === this._renderedBar || t === this._hydratedRenderedBar) && (this._renderedBar = t, this._hydratedRenderedBar = void 0, t && t.componentOnReady().then(() => {
         !this.isConnected || this._renderedBar !== t || (this._hydratedRenderedBar = t);
       }));
-    }, this._availableLength = 0, this.layout = "horizontal", this.scale = "m", this.tooltipAppearance = "native", this.relativePosition = "top-left", this.toolbarKind = "floating";
+    }, this._availableLength = 0, this.scale = "m", this.tooltipAppearance = "native", this.relativePosition = "top-left", this.toolbarKind = "floating", this.arcgisInternalLayoutUpdate = g(), this.listen("arcgisInternalLayoutUpdate", (t) => {
+      t.target !== this.el && this.requestUpdate(), this.el.parentElement?.localName !== "arcgis-toolbar-stack" && t.stopPropagation();
+    });
   }
   static {
     this.properties = { _availableLength: 16, _groups: 16, _renderedBar: 16, _hydratedRenderedBar: 16, layout: 3, scale: 3, tooltipAppearance: 1, relativePosition: 1, toolbarKind: 3, barElement: 32, effectiveRelativeDirection: 16 };
   }
   static {
-    this.styles = [g, u, b];
+    this.styles = [f, b, _, v];
   }
   #t;
-  #a;
   #r;
+  #s;
   #i;
-  #o;
+  #e;
+  get layout() {
+    return this._layout;
+  }
+  set layout(t) {
+    t !== this._layout && (this._layout = t, this._updateMeasurement());
+  }
   get barElement() {
     return this._hydratedRenderedBar;
   }
   get effectiveRelativeDirection() {
-    const [t, o] = this.relativePosition.split("-"), a = this.#i;
-    switch (o) {
+    const [t, e] = this.relativePosition.split("-"), r = this.#i;
+    switch (e) {
       case "left":
       case "right":
-        return `${t}-${o}`;
+        return `${t}-${e}`;
       case "end":
-        return `${t}-${a === "ltr" ? "right" : "left"}`;
+        return `${t}-${r === "ltr" ? "right" : "left"}`;
       case "start":
-        return `${t}-${a === "ltr" ? "left" : "right"}`;
+        return `${t}-${r === "ltr" ? "left" : "right"}`;
     }
   }
+  measure(t) {
+    const e = this._groups;
+    if (!e?.length)
+      return [0];
+    const n = e.map((s) => s.measure(t)).reduce((s, i) => s.flatMap((a) => i.map((h) => a + h)), [0]).map((s) => o(e, t, s).reduce((i, { budget: a }) => i + a, 0));
+    return Array.from(new Set(n)).sort((s, i) => s - i);
+  }
+  allocate(t, e) {
+    const r = this._groups;
+    return r?.length ? o(r, t, e) : [];
+  }
+  proxiedRender(t, e, r = this.toolbarKind) {
+    if (!this._groups?.length)
+      return;
+    const s = this.allocate(t, e);
+    return u(this, c`<div class="toolbar-grid-wrapper"><div class="toolbar-shadow-wrapper"><calcite-action-bar expand-toggle-disabled .floating=${r === "floating"} .layout=${t.layout} overflow-mode=none .scale=${t.scale} ${l(this._setRenderedBar)}>${s.map(({ group: i, budget: a }) => i.proxiedRender(t, a))}</calcite-action-bar></div></div>`);
+  }
   connectedCallback() {
-    super.connectedCallback(), this._connectMeasurement(this.#o), this.#a.observe(this.el, { childList: !0 }), this._syncGroups();
+    super.connectedCallback(), this._connectMeasurement(this.#e), this.#r.observe(this.el, { childList: !0 }), this._syncGroups();
   }
   disconnectedCallback() {
-    this.#t.disconnect(), this.#a.disconnect(), super.disconnectedCallback();
+    this.#t.disconnect(), this.#r.disconnect(), super.disconnectedCallback();
   }
   _setRulerEl(t) {
-    this.#o !== t && (this.#o = t, this.isConnected && this._connectMeasurement(t));
+    this.#e !== t && (this.#e = t, this.isConnected && this._connectMeasurement(t));
   }
   _connectMeasurement(t) {
     this.#t.disconnect(), t && (this.#t.observe(t), this._updateMeasurement());
   }
   _updateMeasurement(t) {
-    const o = t?.at(0)?.contentRect ?? this.#o?.getBoundingClientRect();
-    o && (this._availableLength = this.layout === "horizontal" ? o.width : o.height);
+    const e = t?.at(0)?.contentRect ?? this.#e?.getBoundingClientRect();
+    e && (this._availableLength = this.layout === "horizontal" ? e.width : e.height);
   }
   _syncGroups() {
-    this.#r?.abort();
-    const t = Array.from(this.el.children).filter(h), o = new AbortController();
-    this.#r = o, Promise.all(t.map((a) => a.componentOnReady())).then(() => {
-      !this.isConnected || o.signal.aborted || (this._groups = t);
+    this.#s?.abort();
+    const t = Array.from(this.el.children).filter(y), e = new AbortController();
+    this.#s = e, Promise.all(t.map((r) => r.componentOnReady())).then(() => {
+      !this.isConnected || e.signal.aborted || (this._groups = t, this.arcgisInternalLayoutUpdate.emit());
     });
   }
   render() {
-    const t = this._groups;
-    if (!t?.length)
+    if (!this._groups?.length || this.el.parentElement?.localName === "arcgis-toolbar-stack")
       return;
-    const o = {
+    const e = {
       layout: this.layout,
       relativePosition: this.effectiveRelativeDirection,
       scale: this.scale,
       tooltipAppearance: this.tooltipAppearance
-    }, a = p(t, o, this._availableLength);
-    return l`<div class="ruler" ${i(this._setRulerEl)}></div><calcite-action-bar expand-disabled .floating=${this.toolbarKind === "floating"} .layout=${this.layout} overflow-actions-disabled .scale=${this.scale} ${i(this._setRenderedBar)}>${a.map(({ group: c, budget: e }) => c.proxiedRender(o, e))}</calcite-action-bar>`;
+    }, [{ budget: r }] = o([this], e, this._availableLength);
+    return c`<div class="ruler" ${l(this._setRulerEl)}></div>${this.proxiedRender(e, r)}`;
   }
 }
-n("arcgis-toolbar", v);
+d("arcgis-toolbar", R);
 export {
-  v as ArcgisToolbar
+  R as ArcgisToolbar
 };

package/dist/components/arcgis-toolbar/types.d.ts

@@ -1,3 +1,19 @@
+import type { JsxNode } from "@arcgis/lumina";
+
+/**
+ * Priority values that control when toolbar content collapses as available space changes.
+ *
+ * @internal
+ */
+export const LayoutPriorities: {
+    ForceCollapse: number;
+    Default: number;
+    Medium: number;
+    High: number;
+    Max: number;
+    NeverCollapse: number;
+};
+
 export type MeasurementContext = {
   layout: "horizontal" | "vertical";
   scale: "l" | "m" | "s";
@@ -7,4 +23,19 @@ export type RenderContext = MeasurementContext
   & {
   relativePosition: "bottom-left" | "bottom-right" | "top-left" | "top-right";
   tooltipAppearance: "calcite-dark" | "calcite" | "native";
-};
+};
+
+/**
+ * Represents a component that can be discovered and used to drive rendering
+ * in a toolbar.
+ *
+ * Some elements might need additional capabilities to participate; for example,
+ * split-button and more-button require additional rendering capabilities for child
+ * elements, and will filter out elements that don't conform.
+ */
+export interface RenderableToolbarContent {
+  measure: (context: MeasurementContext) => number[];
+  proxiedRender: (context: RenderContext, budget: number) => JsxNode;
+  priority?: number;
+  componentOnReady: () => Promise<unknown>;
+}

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

@@ -37,7 +37,7 @@ export abstract class ArcgisToolbarAction extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /** The icon to show in the rendered action; should not be ommitted for best user experience. */
+  /** The icon to show in the rendered action; should not be omitted for best user experience. */
   accessor icon: Icon["icon"] | undefined;
   /**
    * Determines if the icon will be flipped when direction is RTL.

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

@@ -1,25 +1,20 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as p } from "../../chunks/runtime.js";
 import { ref as u } from "lit/directives/ref.js";
-import { css as g, html as c } from "lit";
-import { LitElement as f, createEvent as l, nothing as n, safeClassMap as _ } from "@arcgis/lumina";
+import { css as g, html as o } from "lit";
+import { keyed as f } from "lit/directives/keyed.js";
+import { LitElement as b, createEvent as l, nothing as n, safeClassMap as _ } from "@arcgis/lumina";
 import { W as r } from "../../chunks/utils.js";
-import { g as b } from "../../chunks/utils2.js";
+import { g as $ } from "../../chunks/utils2.js";
 const v = g`:host([text-enabled][data-layout="vertical"]){.interaction-container>button{flex-direction:column;>.text-container{writing-mode:vertical-lr}}}`;
-class $ extends f {
+class x extends b {
   constructor() {
     super(...arguments), this.#e = (t) => {
-      if (t !== this._element) {
-        if (this.#t?.disconnect(), this._element = t, this._hydratedElement = void 0, this.isConnected && this.arcgisRenderedActionChanged.emit({ element: t }), !t) {
-          this._measuredWidth = 0, this._measuredHeight = 0;
-          return;
-        }
-        this._measureAction(), this.#t ??= new ResizeObserver((e) => {
-          !this.textEnabled || !this._element || this._measureAction(e);
-        }), this.#t.observe(t), t.componentOnReady().then(() => {
-          !this.isConnected || this._element !== t || (this._hydratedElement = t, t.shadowRoot?.adoptedStyleSheets.push(v.styleSheet));
-        });
-      }
+      t !== this._element && (this.#t?.disconnect(), this._element = t, this._hydratedElement = void 0, this.isConnected && this.arcgisRenderedActionChanged.emit({ element: t }), t && (this._measureAction(), this.#t ??= new ResizeObserver((e) => {
+        !this.textEnabled || !this._element || this._measureAction(e);
+      }), this.#t.observe(t), t.componentOnReady().then(() => {
+        !this.isConnected || this._element !== t || (this._hydratedElement = t, t.shadowRoot?.adoptedStyleSheets.push(v.styleSheet));
+      })));
     }, this._measuredWidth = 0, this._measuredHeight = 0, this.active = !1, this.tooltipText = "", this.labelText = "", this.disabled = !1, this.loading = !1, this.indicator = !1, this.textEnabled = !1, this.appearance = "transparent", this.iconFlipRtl = !1, this.arcgisRenderedActionChanged = l(), this.arcgisToolbarItemSelected = l();
   }
   static {
@@ -35,8 +30,8 @@ class $ extends f {
     return [Math.max(i, s) + a];
   }
   proxiedRender(t) {
-    const { tooltipAppearance: e, scale: a } = t, i = this.tooltipText || this.labelText, s = this._hydratedElement, o = e !== "native" && !!i && s, d = e === "calcite-dark" ? "calcite-mode-dark" : void 0, h = b(t);
-    return c`<calcite-action .active=${this.active} data-appearance=${this.appearance ?? n} data-kind=${this.kind ?? n} data-layout=${t.layout ?? n} .disabled=${this.disabled} .icon=${this.icon} .iconFlipRtl=${this.iconFlipRtl} .indicator=${this.indicator} .label=${i} .loading=${this.loading} @click=${(m) => this._handleActionClick(m)} .scale=${a} .text=${this.labelText} .textEnabled=${this.textEnabled} title=${(e === "native" ? i : void 0) ?? n} ${u(this.#e)}></calcite-action>${o ? c`<calcite-tooltip class=${_(d)} overlay-positioning=fixed .placement=${h} .referenceElement=${s} .scale=${a}><span>${i}</span></calcite-tooltip>` : void 0}`;
+    const { tooltipAppearance: e, scale: a } = t, i = this.tooltipText || this.labelText, s = this._hydratedElement, c = e !== "native" && !!this.tooltipText && s, d = e === "calcite-dark" ? "calcite-mode-dark" : void 0, h = $(t);
+    return o`${f(this, o`<calcite-action .active=${this.active} data-appearance=${this.appearance ?? n} data-kind=${this.kind ?? n} data-layout=${t.layout ?? n} .disabled=${this.disabled} .icon=${this.icon} .iconFlipRtl=${this.iconFlipRtl} .indicator=${this.indicator} .label=${i} .loading=${this.loading} @click=${(m) => this._handleActionClick(m)} .scale=${a} .text=${this.labelText} .textEnabled=${this.textEnabled} title=${(e === "native" ? i : void 0) ?? n} ${u(this.#e)}></calcite-action>`)}${c ? o`<calcite-tooltip class=${_(d)} overlay-positioning=fixed .placement=${h} .referenceElement=${s} .scale=${a}><span>${i}</span></calcite-tooltip>` : void 0}`;
   }
   disconnectedCallback() {
     this.#t?.disconnect(), super.disconnectedCallback();
@@ -51,7 +46,7 @@ class $ extends f {
     e && (this._measuredWidth = Math.round(e.width), this._measuredHeight = Math.round(e.height));
   }
 }
-p("arcgis-toolbar-action", $);
+p("arcgis-toolbar-action", x);
 export {
-  $ as ArcgisToolbarAction
+  x as ArcgisToolbarAction
 };

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

@@ -2,42 +2,43 @@
 import { c as d } from "../../chunks/runtime.js";
 import { html as p } from "lit";
 import { LitElement as u, nothing as h } from "@arcgis/lumina";
-import { L as m, W as i, a as g, i as b } from "../../chunks/utils.js";
+import { W as i, a as m } from "../../chunks/utils.js";
+import { L as g, i as b } from "../../chunks/types.js";
 import { u as f } from "../../chunks/utils2.js";
 class C extends u {
   constructor() {
-    super(...arguments), this.#e = new MutationObserver(() => this.#r()), this.preferEndSlot = !1, this.priority = m.Default;
+    super(...arguments), this.#e = new MutationObserver(() => this.#t()), this.preferEndSlot = !1, this.priority = g.Default;
   }
   static {
     this.properties = { _children: 16, preferEndSlot: 5, priority: 9 };
   }
-  #t;
+  #r;
   #e;
   measure(e) {
-    const t = this._children;
-    if (!t?.length)
+    const r = this._children;
+    if (!r?.length)
       return [0];
-    const o = i.groupSeparator + i.groupPadding[e.scale], n = t.map((r) => r.measure(e)).reduce((r, s) => r.flatMap((a) => s.map((c) => a + c)), [0]);
-    return f(n.map((r) => o + r));
+    const o = i.groupSeparator + i.groupPadding[e.scale], n = r.map((t) => t.measure(e)).reduce((t, s) => t.flatMap((a) => s.map((c) => a + c)), [0]);
+    return f(n.map((t) => o + t));
   }
-  proxiedRender(e, t) {
+  proxiedRender(e, r) {
     const o = this._children;
     if (!o)
       return;
-    const l = this.preferEndSlot ? "actions-end" : void 0, n = t - i.groupPadding[e.scale] - i.groupSeparator, r = g(o, e, n);
-    return p`<calcite-action-group .scale=${e.scale} .layout=${e.layout} slot=${l ?? h}>${r.map(({ group: s, budget: a }) => s.proxiedRender(e, a))}</calcite-action-group>`;
+    const l = this.preferEndSlot ? "actions-end" : void 0, n = r - i.groupPadding[e.scale] - i.groupSeparator, t = m(o, e, n);
+    return p`<calcite-action-group .scale=${e.scale} .layout=${e.layout} slot=${l ?? h}>${t.map(({ group: s, budget: a }) => s.proxiedRender(e, a))}</calcite-action-group>`;
   }
   connectedCallback() {
-    super.connectedCallback(), this.#e.observe(this.el, { childList: !0 }), this.#r();
+    super.connectedCallback(), this.#e.observe(this.el, { childList: !0 }), this.#t();
   }
   disconnectedCallback() {
     this.#e.disconnect(), super.disconnectedCallback();
   }
-  #r() {
-    this.#t?.abort();
-    const e = Array.from(this.el.children).filter(b), t = new AbortController();
-    this.#t = t, Promise.all(e.map((o) => o.componentOnReady())).then(() => {
-      !this.isConnected || t.signal.aborted || (this._children = e);
+  #t() {
+    this.#r?.abort();
+    const e = Array.from(this.el.children).filter(b), r = new AbortController();
+    this.#r = r, Promise.all(e.map((o) => o.componentOnReady())).then(() => {
+      !this.isConnected || r.signal.aborted || (this._children = e);
     });
   }
 }

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

@@ -33,7 +33,7 @@ export abstract class ArcgisToolbarItem extends LitElement {
    */
   accessor disabled: boolean;
   /**
-   * The icon to show in the rendered action. For best user experience, this should not be ommitted.
+   * The icon to show in the rendered action. For best user experience, this should not be omitted.
    *
    * @default "question-mark"
    */

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

@@ -1,14 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as p } from "../../chunks/runtime.js";
+import { c as f } from "../../chunks/runtime.js";
 import { html as n } from "lit";
-import { ref as f } from "lit/directives/ref.js";
-import { LitElement as $, createEvent as g, nothing as c, safeClassMap as v } from "@arcgis/lumina";
+import { ref as $ } from "lit/directives/ref.js";
+import { LitElement as v, createEvent as g, nothing as c, safeClassMap as b } from "@arcgis/lumina";
 import { W as s } from "../../chunks/utils.js";
-import { E as b } from "../../chunks/element-reference-controller.js";
-import { g as u } from "../../chunks/utils2.js";
-class x extends $ {
+import { E as u } from "../../chunks/element-reference-controller.js";
+import { g as x } from "../../chunks/utils2.js";
+class C extends v {
   constructor() {
-    super(...arguments), this._active = !1, this._elementReferenceController = new b(this), this.icon = "question-mark", this.tooltipText = "", this.labelText = "", this.disabled = !1, this.loading = !1, this.iconFlipRtl = !1, this.arcgisItemSelected = g();
+    super(...arguments), this._active = !1, this._elementReferenceController = new u(this), this.icon = "question-mark", this.tooltipText = "", this.labelText = "", this.disabled = !1, this.loading = !1, this.iconFlipRtl = !1, this.arcgisItemSelected = g();
   }
   static {
     this.properties = { icon: 3, lastActivated: 0, active: 7, tooltipText: 1, labelText: 3, disabled: 7, loading: 7, iconFlipRtl: 7, actionElement: 32 };
@@ -25,18 +25,18 @@ class x extends $ {
   measure({ scale: t }) {
     return [s.action[t] + s.actionPadding[t]];
   }
-  proxiedRender(t, i, r) {
-    const l = t.tooltipAppearance, a = this._elementReferenceController.element, m = l !== "native" && i === "collapsed-action", d = l === "calcite-dark" ? "calcite-mode-dark" : void 0, h = u(t), e = this.tooltipText || this.labelText;
-    return i === "dropdown-item" ? n`<calcite-dropdown-item .disabled=${this.disabled} icon-start=${this.icon ?? c} .iconFlipRtl=${this.iconFlipRtl ? "both" : void 0} .label=${e} @click=${(o) => this._handleDropdownItemClick(o)} .selected=${this.active || r} title=${e ?? c}>${this.labelText}</calcite-dropdown-item>` : n`<calcite-action .active=${this.active} .disabled=${this.disabled} .icon=${this.icon} .iconFlipRtl=${this.iconFlipRtl} .label=${e} .loading=${this.loading} @click=${(o) => this._handleActionClick(o)} .scale=${t.scale} .text=${this.labelText} .textEnabled=${i === "expanded-action"} title=${(l === "native" ? e : void 0) ?? c} ${f(this._elementReferenceController.ref)}></calcite-action>${m && a ? n`<calcite-tooltip class=${v(d)} overlay-positioning=fixed .placement=${h} .referenceElement=${a}><span>${e}</span></calcite-tooltip>` : void 0}`;
+  proxiedRender(t, e, r) {
+    const l = t.tooltipAppearance, a = this._elementReferenceController.element, d = l !== "native" && e === "collapsed-action", m = l === "native" && e === "collapsed-action", h = l === "calcite-dark" ? "calcite-mode-dark" : void 0, p = x(t), i = this.tooltipText || this.labelText;
+    return e === "dropdown-item" ? n`<calcite-dropdown-item .disabled=${this.disabled} icon-start=${this.icon ?? c} .iconFlipRtl=${this.iconFlipRtl ? "both" : void 0} .label=${i} @click=${(o) => this._handleDropdownItemClick(o)} .selected=${this.active || r}>${this.labelText}</calcite-dropdown-item>` : n`<calcite-action .active=${this.active} .disabled=${this.disabled} .icon=${this.icon} .iconFlipRtl=${this.iconFlipRtl} .label=${i} .loading=${this.loading} @click=${(o) => this._handleActionClick(o)} .scale=${t.scale} .text=${this.labelText} .textEnabled=${e === "expanded-action"} title=${(m ? i : void 0) ?? c} ${$(this._elementReferenceController.ref)}></calcite-action>${d && a ? n`<calcite-tooltip class=${b(h)} close-on-click overlay-positioning=fixed .placement=${p} .referenceElement=${a}><span>${i}</span></calcite-tooltip>` : void 0}`;
   }
   _handleActionClick(t) {
-    this.isConnected && this.arcgisItemSelected?.emit({ element: t.currentTarget });
+    this.isConnected && (this.lastActivated = /* @__PURE__ */ new Date(), this.arcgisItemSelected?.emit({ element: t.currentTarget }));
   }
   _handleDropdownItemClick(t) {
-    this.isConnected && this.arcgisItemSelected?.emit({ element: t.currentTarget });
+    this.isConnected && (this.lastActivated = /* @__PURE__ */ new Date(), this.arcgisItemSelected?.emit({ element: t.currentTarget }));
   }
 }
-p("arcgis-toolbar-item", x);
+f("arcgis-toolbar-item", C);
 export {
-  x as ArcgisToolbarItem
+  C as ArcgisToolbarItem
 };