@arcgis/common-components 5.2.0-next.105 → 5.2.0-next.107

package/dist/components/arcgis-field-pick-list/customElement.js

@@ -1,10 +1,10 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/1.0/LICENSE.txt */
 import { c as b } from "../../chunks/runtime.js";
 import { keyed as v } from "lit/directives/keyed.js";
 import { repeat as y } from "lit/directives/repeat.js";
 import { LitElement as I, createEvent as h, renderElement as S, nothing as m, safeStyleMap as $, safeClassMap as L } from "@arcgis/lumina";
 import { createRef as p, ref as d } from "lit/directives/ref.js";
-import { html as o, css as x } from "lit";
+import { html as n, css as x } from "lit";
 import { Task as T } from "@lit/task";
 import { log as w, composeMissingPropertyMessage as k } from "@arcgis/toolkit/log";
 import { F as C } from "../../chunks/internal-types.js";
@@ -27,37 +27,37 @@ r.set("date-only", "calendar");
 r.set("time-only", "clock");
 r.set("timestamp-offset", "time-zone");
 r.set("string", "string");
-const N = ({ fieldType: n }) => o`<calcite-icon scale=s .icon=${r.get(n)}></calcite-icon>`;
-function P(n) {
-  return !!n.length && "fields" in n[0];
+const N = ({ fieldType: o }) => n`<calcite-icon scale=s .icon=${r.get(o)}></calcite-icon>`;
+function P(o) {
+  return !!o.length && "fields" in o[0];
 }
-function u(n) {
-  return !!n.length && "subFieldInfos" in n[0];
+function u(o) {
+  return !!o.length && "subFieldInfos" in o[0];
 }
-function _(n) {
-  return n.filter((e) => u(e.fields));
+function _(o) {
+  return o.filter((e) => u(e.fields));
 }
-function D(n) {
-  return n.flatMap((e) => e.fields);
+function D(o) {
+  return o.flatMap((e) => e.fields);
 }
-function O(n) {
-  return n.flatMap((e) => u(e.fields) ? [] : e.fields);
+function O(o) {
+  return o.flatMap((e) => u(e.fields) ? [] : e.fields);
 }
-function f(n) {
-  return n.flatMap(
+function f(o) {
+  return o.flatMap(
     (e) => u(e.fields) ? e.fields.flatMap((t) => t.subFieldInfos) : e.fields
   );
 }
-function A(n, e) {
-  return n.flatMap((t) => u(t.fields) ? t.fields.flatMap(
+function A(o, e) {
+  return o.flatMap((t) => u(t.fields) ? t.fields.flatMap(
     (i) => i.subFieldInfos.filter((s) => g(s, e, !0))
   ) : t.fields.filter((i) => F(i, e)));
 }
-function F(n, e) {
-  return e ? "subFieldInfos" in n ? g(n, e) || n.subFieldInfos.some((t) => g(t, e, !0)) : g(n, e) : !0;
+function F(o, e) {
+  return e ? "subFieldInfos" in o ? g(o, e) || o.subFieldInfos.some((t) => g(t, e, !0)) : g(o, e) : !0;
 }
-function g(n, e, t = !1) {
-  return [t ? n.name.split("/").pop() : n.name, n.alias, n.description].some(
+function g(o, e, t = !1) {
+  return [t ? o.name.split("/").pop() : o.name, o.alias, o.description].some(
     (s) => s?.toLocaleLowerCase().includes(e.toLocaleLowerCase())
   );
 }
@@ -181,22 +181,26 @@ class H extends I {
     })) : this.getSortedList(e);
   }
   addFieldInfoFlowItem(e, t) {
-    const i = this.flowElement.value, s = S(o`<calcite-flow-item selected .heading=${e.alias ?? e.name} .description=${e.name} class="panel" style=${$(this.panelCutOffHeight > 0 ? `max-height: ${this.panelCutOffHeight}px` : "max-height: 50vh")} @calciteFlowItemBack=${(l) => {
+    const i = this.flowElement.value, s = S(n`<calcite-flow-item selected .heading=${e.alias ?? e.name} .description=${e.name} class="panel" style=${$(this.panelCutOffHeight > 0 ? `max-height: ${this.panelCutOffHeight}px` : "max-height: 50vh")} @calciteFlowItemBack=${(l) => {
       l.currentTarget.remove(), this.fieldInfoFlowItemEl.value.selected = !1, this.panelElement.value.selected = !0, setTimeout(() => {
         t.setFocus();
       }, 300);
     }} ${d(this.fieldInfoFlowItemEl)}><arcgis-field-info lang=${this._messages._lang ?? m} .fieldName=${e.name} .layer=${this.layer} .view=${this.view} class="content"></arcgis-field-info></calcite-flow-item>`);
-    i.appendChild(s), this.panelElement.value.selected = !1, setTimeout(() => this.fieldInfoFlowItemEl?.value.setFocus(), 1);
+    i.appendChild(s), this.panelElement.value.selected = !1, setTimeout(() => {
+      this.fieldInfoFlowItemEl?.value.setFocus();
+    }, 1);
   }
   addSubFieldInfoFlowItem(e, t) {
-    const i = this.flowElement.value, s = e.subFieldInfos.filter((a) => g(a, this.filterText, !0)), l = S(o`<calcite-flow-item selected .heading=${e.alias ?? e.name} .description=${e.description ?? void 0} class="panel" style=${$(this.panelCutOffHeight > 0 ? `max-height: ${this.panelCutOffHeight}px` : "max-height: 50vh")} @calciteFlowItemBack=${(a) => {
+    const i = this.flowElement.value, s = e.subFieldInfos.filter((a) => g(a, this.filterText, !0)), l = S(n`<calcite-flow-item selected .heading=${e.alias ?? e.name} .description=${e.description ?? void 0} class="panel" style=${$(this.panelCutOffHeight > 0 ? `max-height: ${this.panelCutOffHeight}px` : "max-height: 50vh")} @calciteFlowItemBack=${(a) => {
       a.currentTarget.remove(), this.fieldInfoFlowItemEl.value.selected = !1, this.panelElement.value.selected = !0, setTimeout(() => {
         t.setFocus();
       }, 300);
     }} ${d(this.fieldInfoFlowItemEl)}><calcite-list .label=${e.alias ?? e.name} .selectionMode=${this.multiple ? "multiple" : "single"} @calciteListChange=${(a) => {
       this.updateSelectedFieldsForList(a.currentTarget, e.subFieldInfos), this.arcgisChange.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListChange.emit({ selectedFields: this.selectedFields }), this.multiple || (this.arcgisClose.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListDismissed.emit({ selectedFields: this.selectedFields }));
-    }}>${s.map((a) => this.renderCalciteListItem(a, !1))}</calcite-list>${this.filterText && !s.length && this.filterNoResultsText?.length !== 0 ? o`<div class="no-match-text">${this.filterNoResultsText ?? this._messages.noMatches}</div>` : null}</calcite-flow-item>`);
-    i.appendChild(l), this.panelElement.value.selected = !1, setTimeout(() => this.fieldInfoFlowItemEl.value?.setFocus(), 1);
+    }}>${s.map((a) => this.renderCalciteListItem(a, !1))}</calcite-list>${this.filterText && !s.length && this.filterNoResultsText?.length !== 0 ? n`<div class="no-match-text">${this.filterNoResultsText ?? this._messages.noMatches}</div>` : null}</calcite-flow-item>`);
+    i.appendChild(l), this.panelElement.value.selected = !1, setTimeout(() => {
+      this.fieldInfoFlowItemEl.value?.setFocus();
+    }, 1);
   }
   shouldRenderSelectionButton(e) {
     return this.multiple && this.showSelectionAll && (!e || !this.filterText || !!this.filterFields?.length);
@@ -227,42 +231,42 @@ class H extends I {
         if (this.listOnly)
           return this.renderList();
         const e = this.heading || (this.multiple ? this._messages.headerSelect : this._messages.header), t = this.popoverProps;
-        return this.el.classList.add("js-app-flyout"), v(`${t.autoClose}`, o`<calcite-popover .placement=${t.placement ?? "leading-start"} open pointer-disabled .referenceElement=${t.refElement} .offsetDistance=${t.offsetDistance ?? -Math.round(t.refElement.getBoundingClientRect().width)} .offsetSkidding=${t.offsetSkidding ?? 0} .overlayPositioning=${t.overlayPositioning} trigger-disabled .autoClose=${t.autoClose} .label=${this.heading ?? (this.multiple ? this._messages.headerSelect : this._messages.header) ?? ""} @calcitePopoverClose=${() => {
+        return this.el.classList.add("js-app-flyout"), v(`${t.autoClose}`, n`<calcite-popover .placement=${t.placement ?? "leading-start"} open pointer-disabled .referenceElement=${t.refElement} .offsetDistance=${t.offsetDistance ?? -Math.round(t.refElement.getBoundingClientRect().width)} .offsetSkidding=${t.offsetSkidding ?? 0} .overlayPositioning=${t.overlayPositioning} trigger-disabled .autoClose=${t.autoClose} .label=${this.heading ?? (this.multiple ? this._messages.headerSelect : this._messages.header) ?? ""} @calcitePopoverClose=${() => {
           this.arcgisClose.emit(), this.arcgisFieldPickListDismissed.emit();
         }} ${d(this.popoverNode)}><calcite-flow style=${$({
           width: `${t.popoverWidth ?? t.refElement.getBoundingClientRect().width}px`,
           ...t.maxHeight && { maxHeight: t.maxHeight }
         })} ${d(this.flowElement)}><calcite-flow-item class="panel" .heading=${e} closable @calciteFlowItemClose=${() => {
           this.arcgisClose.emit(), this.arcgisFieldPickListDismissed.emit();
-        }} ${d(this.panelElement)}><slot slot=content-top name=content-top></slot>${this.renderList()}<slot slot=content-bottom name=content-bottom></slot>${(this.multiple || !this.hideCancel) && o`<div slot=footer class="footer"><slot name=content-footer></slot>${this.multiple && !this.hideCancel ? o`<div class="add-cancel-buttons">${this.renderAddButton()}${this.renderCancelButton()}</div>` : o`${this.renderAddButton()}${this.renderCancelButton()}`}</div>` || ""}</calcite-flow-item></calcite-flow></calcite-popover>`);
+        }} ${d(this.panelElement)}><slot slot=content-top name=content-top></slot>${this.renderList()}<slot slot=content-bottom name=content-bottom></slot>${(this.multiple || !this.hideCancel) && n`<div slot=footer class="footer"><slot name=content-footer></slot>${this.multiple && !this.hideCancel ? n`<div class="add-cancel-buttons">${this.renderAddButton()}${this.renderCancelButton()}</div>` : n`${this.renderAddButton()}${this.renderCancelButton()}`}</div>` || ""}</calcite-flow-item></calcite-flow></calcite-popover>`);
       },
       error: () => ""
     });
   }
   renderList() {
     const e = this.heading || (this.multiple ? this._messages.headerSelect : this._messages.header), t = O(this.allLists), i = _(this.allLists), s = f(this.allLists).length >= this.showFilterLength;
-    return t.length || i.length ? i.length ? this.renderSplitLists(t, i, s) : this.renderTopLevelOnlyFieldList(e, t, s) : o`<slot name=no-fields></slot>`;
+    return t.length || i.length ? i.length ? this.renderSplitLists(t, i, s) : this.renderTopLevelOnlyFieldList(e, t, s) : n`<slot name=no-fields></slot>`;
   }
   renderSplitLists(e, t, i) {
     const s = f(this.allLists), l = D(this.allLists).some((a) => F(a, this.filterText));
-    return o`${i ? o`<div class="list-controls"><calcite-filter .items=${s} .filterProps=${["name", "alias", "description"]} .placeholder=${this.filterPlaceholderText ?? this._messages.filter} @calciteFilterChange=${(a) => {
+    return n`${i ? n`<div class="list-controls"><calcite-filter .items=${s} .filterProps=${["name", "alias", "description"]} .placeholder=${this.filterPlaceholderText ?? this._messages.filter} @calciteFilterChange=${(a) => {
       this.filterText = a.currentTarget.value, this.filterFields = this.filterText ? A(this.allLists, this.filterText).map((c) => c.name) : void 0;
-    }}></calcite-filter>${this.renderSortButton()}</div>` : null}<div class=${L(this.listOnly ? "" : "list-wrapper")} ${d(this.listWrapper)}>${this.shouldRenderSelectionButton(i) ? this.renderSelectionButton() : null}${this.renderSplitSubFieldLists(t)}${e.length ? this.renderSplitTopLevelFieldList(e, !0) : null}</div>${this.filterText && !l && this.filterNoResultsText?.length !== 0 ? o`<div class="no-match-text">${this.filterNoResultsText ?? this._messages.noMatches}</div>` : null}`;
+    }}></calcite-filter>${this.renderSortButton()}</div>` : null}<div class=${L(this.listOnly ? "" : "list-wrapper")} ${d(this.listWrapper)}>${this.shouldRenderSelectionButton(i) ? this.renderSelectionButton() : null}${this.renderSplitSubFieldLists(t)}${e.length ? this.renderSplitTopLevelFieldList(e, !0) : null}</div>${this.filterText && !l && this.filterNoResultsText?.length !== 0 ? n`<div class="no-match-text">${this.filterNoResultsText ?? this._messages.noMatches}</div>` : null}`;
   }
   renderSplitSubFieldLists(e) {
     const t = e.map((i) => ({
       ...i,
       fields: i.fields.filter((s) => F(s, this.filterText))
     })).filter((i) => !!i.fields.length);
-    return y(t, (i) => i.title, (i) => o`<calcite-list selection-mode=none .label=${i.title ?? this.heading ?? ""}><calcite-list-item-group .heading=${i.title}>${y(i.fields, (s) => s.name, (s) => o`<calcite-list-item .label=${s.alias || s.name} .description=${this.multiple ? this._messages.subFieldsSelected.replace("${count}", `${s.subFieldInfos.filter((l) => this.selectedFields.includes(l.name)).length}`) : void 0} .value=${s.name} @click=${(l) => this.addSubFieldInfoFlowItem(s, l.currentTarget)} @keydown=${(l) => {
+    return y(t, (i) => i.title, (i) => n`<calcite-list selection-mode=none .label=${i.title ?? this.heading ?? ""}><calcite-list-item-group .heading=${i.title}>${y(i.fields, (s) => s.name, (s) => n`<calcite-list-item .label=${s.alias || s.name} .description=${this.multiple ? this._messages.subFieldsSelected.replace("${count}", `${s.subFieldInfos.filter((l) => this.selectedFields.includes(l.name)).length}`) : void 0} .value=${s.name} @click=${(l) => this.addSubFieldInfoFlowItem(s, l.currentTarget)} @keydown=${(l) => {
       l.key === "Enter" && this.addSubFieldInfoFlowItem(s, l.currentTarget);
     }}><calcite-icon slot=actions-end icon=chevron-right flip-rtl scale=s></calcite-icon></calcite-list-item>`)}</calcite-list-item-group></calcite-list>`);
   }
   renderSplitTopLevelFieldList(e, t) {
-    return o`<calcite-list .label=${this.heading || (this.multiple ? this._messages.headerSelect : this._messages.header)} .selectionMode=${this.multiple ? "multiple" : "single"} @calciteListChange=${() => this.handleListSelectionChange(e)} ${d(this.listNode)}><slot name=content-center></slot>${this.renderGroupedListItems(t)}</calcite-list>`;
+    return n`<calcite-list .label=${this.heading || (this.multiple ? this._messages.headerSelect : this._messages.header)} .selectionMode=${this.multiple ? "multiple" : "single"} @calciteListChange=${() => this.handleListSelectionChange(e)} ${d(this.listNode)}><slot name=content-center></slot>${this.renderGroupedListItems(t)}</calcite-list>`;
   }
   renderTopLevelOnlyFieldList(e, t, i) {
-    return o`<div class=${L(this.listOnly ? "" : "list-wrapper")} ${d(this.listWrapper)}><calcite-list .label=${e} .selectionMode=${this.multiple ? "multiple" : "single"} .filterEnabled=${i} .filterPlaceholder=${this.filterPlaceholderText ?? this._messages.filter} @calciteListChange=${() => this.handleListSelectionChange(t)} @calciteListFilter=${(s) => {
+    return n`<div class=${L(this.listOnly ? "" : "list-wrapper")} ${d(this.listWrapper)}><calcite-list .label=${e} .selectionMode=${this.multiple ? "multiple" : "single"} .filterEnabled=${i} .filterPlaceholder=${this.filterPlaceholderText ?? this._messages.filter} @calciteListChange=${() => this.handleListSelectionChange(t)} @calciteListFilter=${(s) => {
       s.stopPropagation(), this.filterFields = this.listNode.value.filteredItems?.map((l) => l.value), this.filterText = this.listNode.value.filterText;
     }} ${d(this.listNode)}>${this.renderSortButton("filter-actions-end")}${this.shouldRenderSelectionButton(i) ? this.renderSelectionButton() : null}<slot name=content-center></slot>${this.renderGroupedListItems(!1)}</calcite-list></div>`;
   }
@@ -271,12 +275,12 @@ class H extends I {
     if (!(t.length >= this.showFilterLength && !this.hideSort))
       return "";
     const s = t.every((l) => !!l.type);
-    return o`<calcite-dropdown slot=${e ?? m} placement=bottom-end overlay-positioning=fixed @calciteDropdownOpen=${() => {
+    return n`<calcite-dropdown slot=${e ?? m} placement=bottom-end overlay-positioning=fixed @calciteDropdownOpen=${() => {
       this.observer?.disconnect(), this.popoverNode.value && this.observer?.observe(this.popoverNode.value, { attributes: !0 });
-    }} @calciteDropdownClose=${() => this.observer?.disconnect()} ${d(this.dropdownNode)}><calcite-action slot=trigger .text=${this._messages.sort ?? ""} title=${this._messages.sort ?? m}><calcite-icon scale=s icon=sortDescending flip-rtl></calcite-icon></calcite-action><calcite-dropdown-group><calcite-dropdown-item .selected=${this.lastSortBy === "default"} @calciteDropdownItemSelect=${() => this.setSortBy("default")}>${this._messages.default}</calcite-dropdown-item><calcite-dropdown-item .selected=${this.lastSortBy === "display"} @calciteDropdownItemSelect=${() => this.setSortBy("display")}>${this._messages.displayName}</calcite-dropdown-item>${s && o`<calcite-dropdown-item .selected=${this.lastSortBy === "type"} @calciteDropdownItemSelect=${() => this.setSortBy("type")}>${this._messages.type}</calcite-dropdown-item>` || ""}<calcite-dropdown-item .selected=${this.lastSortBy === "field"} @calciteDropdownItemSelect=${() => this.setSortBy("field")}>${this._messages.fieldName}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`;
+    }} @calciteDropdownClose=${() => this.observer?.disconnect()} ${d(this.dropdownNode)}><calcite-action slot=trigger .text=${this._messages.sort ?? ""} title=${this._messages.sort ?? m}><calcite-icon scale=s icon=sortDescending flip-rtl></calcite-icon></calcite-action><calcite-dropdown-group><calcite-dropdown-item .selected=${this.lastSortBy === "default"} @calciteDropdownItemSelect=${() => this.setSortBy("default")}>${this._messages.default}</calcite-dropdown-item><calcite-dropdown-item .selected=${this.lastSortBy === "display"} @calciteDropdownItemSelect=${() => this.setSortBy("display")}>${this._messages.displayName}</calcite-dropdown-item>${s && n`<calcite-dropdown-item .selected=${this.lastSortBy === "type"} @calciteDropdownItemSelect=${() => this.setSortBy("type")}>${this._messages.type}</calcite-dropdown-item>` || ""}<calcite-dropdown-item .selected=${this.lastSortBy === "field"} @calciteDropdownItemSelect=${() => this.setSortBy("field")}>${this._messages.fieldName}</calcite-dropdown-item></calcite-dropdown-group></calcite-dropdown>`;
   }
   renderSelectionButton() {
-    return o`<div class="selection-button-div"><calcite-button appearance=transparent scale=s width=full @click=${() => {
+    return n`<div class="selection-button-div"><calcite-button appearance=transparent scale=s width=full @click=${() => {
       if (this.canDeselectAll())
         this.selectedFields = this.filterFields?.length ? this.selectedFields.filter((e) => !this.filterFields?.includes(e)) : [];
       else if (this.filterFields?.length)
@@ -293,14 +297,14 @@ class H extends I {
       ...i,
       fields: e ? i.fields.filter((s) => F(s, this.filterText)) : i.fields
     })).filter((i) => !!i.fields.length);
-    return t.length === 1 && !t[0].title ? this.renderListItems(t[0].fields) : t.map((s) => o`<calcite-list-item-group .heading=${s.title}>${this.renderListItems(s.fields)}</calcite-list-item-group>`);
+    return t.length === 1 && !t[0].title ? this.renderListItems(t[0].fields) : t.map((s) => n`<calcite-list-item-group .heading=${s.title}>${this.renderListItems(s.fields)}</calcite-list-item-group>`);
   }
   renderListItems(e) {
     return e.map((t) => this.renderCalciteListItem(t));
   }
   renderCalciteListItem(e, t = !0) {
     const i = t && this.showFieldInfoCheck(e), s = this.showFieldTypeIcon && !!e.type;
-    return v(e.name, o`<calcite-list-item .label=${e.alias || e.name} .description=${(() => {
+    return v(e.name, n`<calcite-list-item .label=${e.alias || e.name} .description=${(() => {
       if (this.showFieldName && e.hideFieldName !== !0)
         return `{${e.name}}`;
       if (this.showDescription && e.hideDescription !== !0 && e.description)
@@ -308,11 +312,11 @@ class H extends I {
     })()} .value=${e.name} .selected=${!this.multiple && e.name === this.selectedFields[0] || this.multiple && this.selectedFields.includes(e.name)} .metadata=${{
       label: e.alias,
       fieldName: e.name
-    }}>${s && o`<div slot=actions-end class="field-icons">${N({ fieldType: e.type })}</div>` || ""}${this.renderInfoAction(e, i)}${this.renderEditAction(e)}${this.renderDeleteAction(e)}</calcite-list-item>`);
+    }}>${s && n`<div slot=actions-end class="field-icons">${N({ fieldType: e.type })}</div>` || ""}${this.renderInfoAction(e, i)}${this.renderEditAction(e)}${this.renderDeleteAction(e)}</calcite-list-item>`);
   }
   renderInfoAction(e, t) {
     const { _messages: i } = this;
-    return t ? o`<calcite-action slot=actions-end .text=${i.info} title=${i.info ?? m} scale=s icon=information @click=${(s) => {
+    return t ? n`<calcite-action slot=actions-end .text=${i.info} title=${i.info ?? m} scale=s icon=information @click=${(s) => {
       s.stopPropagation();
       const l = s.currentTarget;
       this.addFieldInfoFlowItem(e, l);
@@ -320,23 +324,23 @@ class H extends I {
   }
   renderEditAction(e) {
     const { _messages: t } = this;
-    return e.showEditAction ? o`<calcite-action slot=actions-end .text=${t.edit} title=${t.edit ?? m} scale=s icon=pencil @click=${(i) => {
+    return e.showEditAction ? n`<calcite-action slot=actions-end .text=${t.edit} title=${t.edit ?? m} scale=s icon=pencil @click=${(i) => {
       i.stopPropagation(), this.arcgisEditField.emit({ fieldName: e.name });
     }}></calcite-action>` : "";
   }
   renderDeleteAction(e) {
     const { _messages: t } = this;
-    return e.showDeleteAction ? o`<calcite-action slot=actions-end .text=${t.delete} title=${t.delete ?? m} scale=s icon=trash @click=${(i) => {
+    return e.showDeleteAction ? n`<calcite-action slot=actions-end .text=${t.delete} title=${t.delete ?? m} scale=s icon=trash @click=${(i) => {
       i.stopPropagation(), this.arcgisDeleteField.emit({ fieldName: e.name });
     }}></calcite-action>` : "";
   }
   renderAddButton() {
-    return this.multiple ? o`<calcite-button .appearance=${this.hideCancel ? "outline-fill" : "solid"} .width=${this.hideCancel ? "full" : "half"} @click=${() => {
+    return this.multiple ? n`<calcite-button .appearance=${this.hideCancel ? "outline-fill" : "solid"} .width=${this.hideCancel ? "full" : "half"} @click=${() => {
       this.arcgisClose.emit({ selectedFields: this.selectedFields }), this.arcgisFieldPickListDismissed.emit({ selectedFields: this.selectedFields });
     }}>${this.okBtnText || (this.multiple ? this._messages.done : this._messages.ok)}</calcite-button>` : "";
   }
   renderCancelButton() {
-    return this.hideCancel ? "" : o`<calcite-button appearance=outline-fill .width=${this.multiple ? "half" : "full"} @click=${() => {
+    return this.hideCancel ? "" : n`<calcite-button appearance=outline-fill .width=${this.multiple ? "half" : "full"} @click=${() => {
       this.arcgisClose.emit(), this.arcgisFieldPickListDismissed.emit();
     }}>${this._messages.cancel}</calcite-button>`;
   }

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/1.0/LICENSE.txt */
 import { c as M } from "../../chunks/runtime.js";
 import { u as k } from "../../chunks/useT9n.js";
 import { substitute as E } from "@arcgis/core/intl.js";

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

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

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/1.0/LICENSE.txt */
 import { c as n } from "../../chunks/runtime.js";
 import { css as l, html as o } from "lit";
 import { LitElement as a, createEvent as i, safeStyleMap as r } from "@arcgis/lumina";

package/dist/components/arcgis-ramp-color/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/1.0/LICENSE.txt */
 import { c as f } from "../../chunks/runtime.js";
 import w from "@arcgis/core/Color.js";
 import { LitElement as x, nothing as u, safeClassMap as C } from "@arcgis/lumina";

package/dist/components/arcgis-ramp-color-break/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/1.0/LICENSE.txt */
 import { c as l } from "../../chunks/runtime.js";
 import { LitElement as m } from "@arcgis/lumina";
 import { css as p, html as c } from "lit";

package/dist/components/arcgis-ramp-opacity/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/1.0/LICENSE.txt */
 import { c } from "../../chunks/runtime.js";
 import t from "@arcgis/core/Color.js";
 import { LitElement as e } from "@arcgis/lumina";

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/1.0/LICENSE.txt */
 import { c as Q } from "../../chunks/runtime.js";
 import { keyed as Z } from "lit/directives/keyed.js";
 import { LitElement as ee, createEvent as S, safeClassMap as M, safeStyleMap as R, nothing as E } from "@arcgis/lumina";

package/dist/components/arcgis-slider-field/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/1.0/LICENSE.txt */
 import { c as m } from "../../chunks/runtime.js";
 import { LitElement as u, createEvent as n } from "@arcgis/lumina";
 import { css as g, html as c } from "lit";

package/dist/components/arcgis-slider-histogram-range/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/1.0/LICENSE.txt */
 import { c } from "../../chunks/runtime.js";
 import { sqlName as p, sqlLiteral as b } from "@arcgis/core/core/sql.js";
 import { LitElement as v, createEvent as d, safeStyleMap as f } from "@arcgis/lumina";

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/1.0/LICENSE.txt */
 import { c as d } from "../../chunks/runtime.js";
 import { css as m, html as o } from "lit";
 import { LitElement as b, createEvent as p } from "@arcgis/lumina";

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

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/1.0/LICENSE.txt */
 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";

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 {
+/* COPYRIGHT Esri - https://js.arcgis.com/1.0/LICENSE.txt */
+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
 };