@esri/solutions-components 0.6.23 → 0.6.26

package/dist/collection/components/edit-card/edit-card.js

@@ -44,8 +44,7 @@ export class EditCard {
    */
   async graphicsWatchHandler() {
     if (this.graphics.length === 0) {
-      this._shouldClose = false;
-      this.closeEdit.emit();
+      this._closeEdit();
     }
   }
   async openWatchHandler(v) {
@@ -54,14 +53,12 @@ export class EditCard {
       this._editorLoading = true;
       this._initEditorWidget();
       if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
-        await this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
-        this._shouldClose = true;
+        await this._startUpdate();
       }
       this._editorLoading = false;
     }
     if (!v) {
-      this._shouldClose = false;
-      this.closeEdit.emit();
+      this._closeEdit();
     }
   }
   //--------------------------------------------------------------------------
@@ -86,24 +83,14 @@ export class EditCard {
    */
   async componentWillRender() {
     var _a, _b;
-    const layerTableElements = document.getElementsByTagName("layer-table");
-    if (layerTableElements.length === 1) {
-      const layerTable = layerTableElements[0];
-      this.graphics = await layerTable.getSelectedGraphics();
-    }
     if (((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = this.graphics[0]) === null || _b === void 0 ? void 0 : _b.layer)) {
       this._layer = this.graphics[0].layer;
       if (this._layerEditHandle) {
         this._layerEditHandle.remove();
       }
       this._layerEditHandle = this._layer.on("edits", () => {
-        this._editorLoading = true;
         this.editsComplete.emit();
-        this._shouldClose = false;
-        this._initEditorWidget();
-        void this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
-        this._shouldClose = true;
-        this._editorLoading = false;
+        this._closeEdit();
       });
     }
   }
@@ -170,12 +157,10 @@ export class EditCard {
       });
       this._editHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "ready", () => {
         if (this._shouldClose) {
-          this._shouldClose = false;
-          this.closeEdit.emit();
+          this._closeEdit();
         }
         else if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
-          void this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
-          this._shouldClose = true;
+          void this._startUpdate();
         }
       });
       this._activeWorkflowHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.activeWorkflow) === null || _a === void 0 ? void 0 : _a.activeWorkflow; }, (activeWorkflow) => {
@@ -187,6 +172,24 @@ export class EditCard {
       this._editContainer.appendChild(container);
     }
   }
+  /**
+   * Close the edit widget
+   *
+   * @returns void
+   */
+  _closeEdit() {
+    this._shouldClose = false;
+    this.closeEdit.emit();
+  }
+  /**
+   * Start the update workflow for the editor widget
+   *
+   * @returns void
+   */
+  async _startUpdate() {
+    await this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
+    this._shouldClose = true;
+  }
   /**
    * Fetches the component's translations
    *

package/dist/collection/components/layer-table/layer-table.css

@@ -38,6 +38,10 @@
   border-inline-end: 1px solid var(--calcite-ui-border-2);
 }
 
+.border-bottom {
+  border-bottom: 1px solid var(--calcite-ui-border-2);
+}
+
 .padding-5 {
   padding: 5px;
 }

package/dist/collection/components/layer-table/layer-table.js

@@ -22,7 +22,7 @@ import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
-import { queryFeaturesByID, queryAllIds } from "../../utils/queryUtils";
+import { queryAllIds } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
 export class LayerTable {
   constructor() {
@@ -46,13 +46,14 @@ export class LayerTable {
       this._tableNode = node;
     };
     this.enableAutoRefresh = undefined;
+    this.enableCSV = undefined;
     this.enableInlineEdit = undefined;
     this.mapInfo = undefined;
     this.mapView = undefined;
     this.onlyShowUpdatableLayers = undefined;
     this.showNewestFirst = undefined;
     this.zoomAndScrollToSelected = undefined;
-    this._alertOpen = false;
+    this._confirmDelete = false;
     this._fetchingData = false;
     this._isDeleting = false;
     this._layer = undefined;
@@ -95,20 +96,6 @@ export class LayerTable {
       await this._sortTable();
     }
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Methods (public)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Get the selected graphics
-   *
-   * @returns Promise that resolves when the operation is complete
-   */
-  async getSelectedGraphics() {
-    return this._selectedIndexes.length > 0 ?
-      await this._getGraphics(this._selectedIndexes) : [];
-  }
   /**
    * Scroll and zoom to the selected feature from the Features widget.
    *
@@ -174,7 +161,7 @@ export class LayerTable {
     const selected = this._selectedIndexes.length.toString();
     return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), h("div", { class: "bottom-left background text-color" }, this._translations.recordsSelected
       .replace("{{total}}", total)
-      .replace("{{selected}}", selected))), this._getEditDisabledWarning()), this._deleteMessage()));
+      .replace("{{selected}}", selected)))), this._deleteMessage()));
   }
   //--------------------------------------------------------------------------
   //
@@ -207,7 +194,8 @@ export class LayerTable {
     var _a;
     const featuresSelected = this._selectedIndexes.length > 0;
     const id = "more-table-options";
-    return (h("div", { class: "display-flex table-border height-51", slot: slot }, h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, h("div", { class: "border-end" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showTables: true, type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? this._getAction("filter", this._translations.filters, () => this._filter(), false) : undefined, this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected), this._getAction("selected-items-filter", this._showOnlySelected ? this._translations.showAll : this._translations.showSelected, () => this._toggleShowSelected(), !featuresSelected)), h("calcite-dropdown", { disabled: this._layer === undefined }, h("calcite-action", { appearance: "solid", id: id, label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: "compare", onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV))), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.moreOptions))));
+    return (h("div", { class: "display-flex border-bottom height-51", slot: slot }, h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, h("div", { class: "border-end" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showTables: true, type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? this._getAction("filter", this._translations.filters, () => this._filter(), false) : undefined, this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected), this._getAction("selected-items-filter", this._showOnlySelected ? this._translations.showAll : this._translations.showSelected, () => this._toggleShowSelected(), !featuresSelected)), h("calcite-dropdown", { disabled: this._layer === undefined }, h("calcite-action", { appearance: "solid", id: id, label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: "compare", onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), this.enableCSV ?
+      (h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV)) : undefined)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.moreOptions))));
   }
   /**
    * Get an action and tooltip
@@ -267,7 +255,8 @@ export class LayerTable {
       this._checkEditEnabled();
       await this._table.when(() => {
         this._table.highlightIds.on("change", () => {
-          this._selectedIndexes = this._table.highlightIds.toArray();
+          // https://github.com/Esri/solutions-components/issues/365
+          this._selectedIndexes = this._table.highlightIds.toArray().reverse();
           if (this._showOnlySelected) {
             if (this._selectedIndexes.length > 0) {
               this._table.filterBySelection();
@@ -345,21 +334,13 @@ export class LayerTable {
       }
     }
   }
-  /**
-   * Show warning when editing is disabled
-   *
-   * @returns node with warning message
-   */
-  _getEditDisabledWarning() {
-    return (h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen && !this._confirmDelete, placement: "top" }, h("div", { slot: "title" }, this._translations.deleteDisabled), h("div", { slot: "message" }, this._translations.enableEditing)));
-  }
   /**
    * Show delete confirmation message
    *
    * @returns node to confirm or deny the delete operation
    */
   _deleteMessage() {
-    return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "danger", open: this._confirmDelete }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, h("calcite-icon", { "aria-hidden": "true", class: "padding-end-1 danger-color", icon: "exclamation-mark-triangle", scale: "m" }), this._translations.deleteFeature), h("div", { slot: "content" }, this._translations.confirm), h("calcite-button", { appearance: "outline", kind: "danger", onClick: () => this._alertClosed(), slot: "secondary", width: "full" }, this._translations.cancel), h("calcite-button", { kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations.delete)));
+    return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "danger", onCalciteModalClose: () => this._deleteClosed(), open: this._confirmDelete }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, h("calcite-icon", { "aria-hidden": "true", class: "padding-end-1 danger-color", icon: "exclamation-mark-triangle", scale: "m" }), this._translations.deleteFeature), h("div", { slot: "content" }, this._translations.confirm), h("calcite-button", { appearance: "outline", kind: "danger", onClick: () => this._deleteClosed(), slot: "secondary", width: "full" }, this._translations.cancel), h("calcite-button", { kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations.delete)));
   }
   /**
    * Delete the currently selected features
@@ -377,7 +358,7 @@ export class LayerTable {
     await this._table.refresh();
     this._allIds = await queryAllIds(this._layer);
     this._isDeleting = false;
-    this._alertClosed();
+    this._deleteClosed();
   }
   /**
    * Handle map click events to keep table and map click selection in sync
@@ -413,8 +394,7 @@ export class LayerTable {
    *
    * @returns void
    */
-  _alertClosed() {
-    this._alertOpen = false;
+  _deleteClosed() {
     this._confirmDelete = false;
   }
   /**
@@ -517,20 +497,7 @@ export class LayerTable {
    * @returns a promise that will resolve when the operation is complete
    */
   _delete() {
-    if (this._editEnabled) {
-      this._confirmDelete = true;
-    }
-    this._alertOpen = true;
-  }
-  /**
-   * Get the graphics for all selected indexes
-   *
-   * @param ids the ids for the graphics to fetch
-   *
-   * @returns An array of selected graphics
-   */
-  async _getGraphics(ids) {
-    return ids.length > 0 ? queryFeaturesByID(ids, this._table.layer, [], false, this.mapView.spatialReference) : [];
+    this._confirmDelete = true;
   }
   /**
    * Handles layer selection change to show new table
@@ -640,6 +607,23 @@ export class LayerTable {
         "attribute": "enable-auto-refresh",
         "reflect": false
       },
+      "enableCSV": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the export to csv button will be available"
+        },
+        "attribute": "enable-c-s-v",
+        "reflect": false
+      },
       "enableInlineEdit": {
         "type": "boolean",
         "mutable": false,
@@ -753,7 +737,7 @@ export class LayerTable {
   }
   static get states() {
     return {
-      "_alertOpen": {},
+      "_confirmDelete": {},
       "_fetchingData": {},
       "_isDeleting": {},
       "_layer": {},
@@ -796,34 +780,6 @@ export class LayerTable {
         }
       }];
   }
-  static get methods() {
-    return {
-      "getSelectedGraphics": {
-        "complexType": {
-          "signature": "() => Promise<__esri.Graphic[]>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "___esri": {
-              "location": "global",
-              "id": "global::___esri"
-            }
-          },
-          "return": "Promise<Graphic[]>"
-        },
-        "docs": {
-          "text": "Get the selected graphics",
-          "tags": [{
-              "name": "returns",
-              "text": "Promise that resolves when the operation is complete"
-            }]
-        }
-      }
-    };
-  }
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{

package/dist/collection/components/map-card/map-card.js

@@ -59,6 +59,7 @@ export class MapCard {
    */
   async componentWillLoad() {
     await this._initModules();
+    this.esriConfig.portalUrl = "https://holistic.mapsdevext.arcgis.com";
   }
   /**
    * Renders the component.
@@ -79,14 +80,16 @@ export class MapCard {
    * @protected
    */
   async _initModules() {
-    const [WebMap, MapView, Home] = await loadModules([
+    const [WebMap, MapView, Home, esriConfig] = await loadModules([
       "esri/WebMap",
       "esri/views/MapView",
-      "esri/widgets/Home"
+      "esri/widgets/Home",
+      "esri/config"
     ]);
     this.WebMap = WebMap;
     this.MapView = MapView;
     this.Home = Home;
+    this.esriConfig = esriConfig;
   }
   /**
    * Load the webmap for the provided webMapInfo

package/dist/collection/components/public-notification/public-notification.css

@@ -43,15 +43,6 @@
   width: 33.33%;
 }
 
-.action-center {
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -ms-grid-row-align: center;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-}
-
 .width-full {
   width: 100%;
 }

package/dist/collection/components/public-notification/public-notification.js

@@ -299,8 +299,8 @@ export class PublicNotification {
    * @protected
    */
   _getActionGroup(icon, pageType, tip) {
-    const sizeClass = this.showRefineSelection ? " w-1-3" : " w-1-2";
-    return (h("calcite-action-group", { class: "action-center" + sizeClass, layout: "horizontal" }, h("div", { class: "background-override" }, h("calcite-action", { active: this._pageType === pageType, alignment: "center", class: "width-full height-full", compact: false, icon: icon, id: icon, onClick: () => { this._setPageType(pageType); }, text: "" })), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, tip))));
+    const sizeClass = this.showRefineSelection ? "w-1-3" : "w-1-2";
+    return (h("calcite-action-group", { class: sizeClass, layout: "horizontal" }, h("div", { class: "background-override" }, h("calcite-action", { active: this._pageType === pageType, alignment: "center", class: "width-full height-full", compact: false, icon: icon, id: icon, onClick: () => { this._setPageType(pageType); }, text: "" })), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, tip))));
   }
   /**
    * Navigate to the defined page type
@@ -516,7 +516,7 @@ export class PublicNotification {
   _getExportOptions() {
     const displayClass = this._exportType === EExportType.PDF ? "display-block" : "display-none";
     const titleOptionsClass = this._addTitle ? "display-block" : "display-none";
-    const title = this._titleValue !== undefined ? this._titleValue : this.defaultExportTitle ? this.defaultExportTitle : "";
+    const title = this._titleValue ? this._titleValue : this.defaultExportTitle ? this.defaultExportTitle : "";
     return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: "padding-sides-1" }, h("pdf-download", { defaultNumLabelsPerPage: this.defaultNumLabelsPerPage, disabled: !this._downloadActive, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.addTitle)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", onCalciteInputTextInput: () => this._changeTitle(), placeholder: this._translations.titlePlaceholder, ref: (el) => { this._titleElement = el; }, value: title })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._addMap = !this._addMap }), this._translations.includeMap))));
   }
   /**

package/dist/collection/demos/crowdsource-manager.html

@@ -83,6 +83,9 @@
         demo.mapInfos = [
           ...custom,
           ...[{
+            id: "e443af6208f6482d8737c406bdbcb17d",
+            name: "holistic map"
+          }, {
             id: "ce3dec81bf714d3bb71da9691ab686d1",
             name: "Popup Configured Map",
             // filters: {},

package/dist/collection/utils/interfaces.ts

@@ -476,4 +476,5 @@ export interface IExportInfo {
 
 export interface IBasemapConfig {
   basemapIdsToFilter: string[];
+  basemapGroupId: string;
 }

package/dist/components/ExpandToggle.js

@@ -11,16 +11,17 @@ import { S as SLOTS } from './action-menu.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const overflowActionsDebounceInMs = 150;
 const groupBufferPx = 2;
 const getAverage = (arr) => arr.reduce((p, c) => p + c, 0) / arr.length;
 const geActionDimensions = (actions) => {
-  const actionLen = actions?.length;
+  const actionsNotSlotted = actions.filter((action) => action.slot !== SLOTS$1.menuActions);
+  const actionLen = actionsNotSlotted?.length;
   return {
-    actionWidth: actionLen ? getAverage(actions.map((action) => action.clientWidth || 0)) : 0,
-    actionHeight: actionLen ? getAverage(actions.map((action) => action.clientHeight || 0)) : 0,
+    actionWidth: actionLen ? getAverage(actionsNotSlotted.map((action) => action.clientWidth || 0)) : 0,
+    actionHeight: actionLen ? getAverage(actionsNotSlotted.map((action) => action.clientHeight || 0)) : 0,
   };
 };
 const getMaxActionCount = ({ width, actionWidth, layout, height, actionHeight, groupCount, }) => {
@@ -66,7 +67,7 @@ const overflowActions = ({ actionGroups, expanded, overflowCount, }) => {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const ICONS = {
   chevronsLeft: "chevrons-left",

package/dist/components/FloatingArrow.js

@@ -8,7 +8,7 @@ import { h } from '@stencil/core/internal/client';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const CSS = {
   arrow: "calcite-floating-ui-arrow",

package/dist/components/Heading.js

@@ -8,7 +8,7 @@ import { h } from '@stencil/core/internal/client';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 function constrainHeadingLevel(level) {
   return Math.min(Math.max(Math.ceil(level), 1), 6);

package/dist/components/action-bar.js

@@ -22,7 +22,7 @@ import { d as debounce } from './debounce.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const CSS = {
   actionGroupEnd: "action-group--end",
@@ -147,9 +147,13 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class ActionBar extends HTMLE
     this.updateGroups();
   }
   overflowDisabledHandler(overflowActionsDisabled) {
-    overflowActionsDisabled
-      ? this.resizeObserver.disconnect()
-      : this.resizeObserver.observe(this.el);
+    var _a, _b;
+    if (overflowActionsDisabled) {
+      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+      return;
+    }
+    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.el);
+    this.overflowActions();
   }
   onMessagesChange() {
     /* wired up by t9n util */
@@ -229,7 +233,7 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class ActionBar extends HTMLE
     const expandToggleNode = !expandDisabled ? (h(ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: this.expandTooltip,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setExpandToggleRef })) : null;
-    return (h("calcite-action-group", { class: CSS.actionGroupEnd, label: actionsEndGroupLabel, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), layout: layout, scale: scale }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), h("slot", { name: SLOTS.bottomActions, onSlotchange: this.handleBottomActionsSlotChange }), h("slot", { name: SLOTS.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode));
+    return (h("calcite-action-group", { class: CSS.actionGroupEnd, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), label: actionsEndGroupLabel, layout: layout, scale: scale }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), h("slot", { name: SLOTS.bottomActions, onSlotchange: this.handleBottomActionsSlotChange }), h("slot", { name: SLOTS.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode));
   }
   render() {
     return (h(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));

package/dist/components/action-group.js

@@ -18,7 +18,7 @@ import { d as defineCustomElement$1 } from './popover.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const SLOTS = {
   menuActions: "menu-actions",
@@ -31,7 +31,7 @@ const CSS = {
   container: "container",
 };
 
-const actionGroupCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:flex;flex-direction:column;padding:0px;--calcite-action-group-columns:3}.container{display:flex;flex-grow:1;flex-direction:column}:host([columns=\"1\"]){--calcite-action-group-columns:1}:host([columns=\"2\"]){--calcite-action-group-columns:2}:host([columns=\"3\"]){--calcite-action-group-columns:3}:host([columns=\"4\"]){--calcite-action-group-columns:4}:host([columns=\"5\"]){--calcite-action-group-columns:5}:host([columns=\"6\"]){--calcite-action-group-columns:6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]),:host([layout=horizontal]) .container{flex-direction:row}:host([layout=grid]){display:grid}:host([layout=grid]) .container{display:grid;place-content:stretch;gap:1px;background-color:var(--calcite-ui-background);padding:1px;grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}:host([hidden]){display:none}[hidden]{display:none}";
+const actionGroupCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:flex;flex-direction:column;padding:0px;--calcite-action-group-columns:3;--calcite-action-group-gap:1px;--calcite-action-group-padding:1px}.container{display:flex;flex-grow:1;flex-direction:column}:host([columns=\"1\"]){--calcite-action-group-columns:1}:host([columns=\"2\"]){--calcite-action-group-columns:2}:host([columns=\"3\"]){--calcite-action-group-columns:3}:host([columns=\"4\"]){--calcite-action-group-columns:4}:host([columns=\"5\"]){--calcite-action-group-columns:5}:host([columns=\"6\"]){--calcite-action-group-columns:6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]),:host([layout=horizontal]) .container{flex-direction:row}:host([layout=grid]){display:grid}:host([layout=grid]) .container{display:grid;place-content:stretch;background-color:var(--calcite-ui-background);gap:var(--calcite-action-group-gap);padding:var(--calcite-action-group-gap);grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const ActionGroup = /*@__PURE__*/ proxyCustomElement(class ActionGroup extends HTMLElement {
   constructor() {

package/dist/components/action-menu.js

@@ -17,7 +17,7 @@ import { d as defineCustomElement$1 } from './popover.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const CSS = {
   menu: "menu",
@@ -30,8 +30,9 @@ const SLOTS = {
 const ICONS = {
   menu: "ellipsis",
 };
+const activeAttr = "data-active";
 
-const actionMenuCss = ":host{box-sizing:border-box;display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}.menu ::slotted(calcite-action){margin:0.125rem;display:flex;outline-color:transparent}.menu ::slotted(calcite-action[active]){outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          );outline-offset:0px}.default-trigger{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}.menu{flex-direction:column;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}";
+const actionMenuCss = ":host{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}.menu ::slotted(calcite-action){margin:0.125rem;display:flex;outline-color:transparent}.menu ::slotted(calcite-action[data-active]){outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          );outline-offset:0px}.default-trigger{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}.menu{flex-direction:column;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}";
 
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
 const ActionMenu = /*@__PURE__*/ proxyCustomElement(class ActionMenu extends HTMLElement {
@@ -136,7 +137,8 @@ const ActionMenu = /*@__PURE__*/ proxyCustomElement(class ActionMenu extends HTM
       if (!action.id) {
         action.id = id;
       }
-      action.active = index === activeMenuItemIndex;
+      // data attribute is used to style the "activeMenuItemIndex" action using token focus styling.
+      action.toggleAttribute(activeAttr, index === activeMenuItemIndex);
     };
     this.updateActions = (actions) => {
       actions === null || actions === void 0 ? void 0 : actions.forEach(this.updateAction);
@@ -212,6 +214,7 @@ const ActionMenu = /*@__PURE__*/ proxyCustomElement(class ActionMenu extends HTM
       this.el.addEventListener("calcitePopoverOpen", this.toggleOpenEnd);
       this.open = value;
     };
+    this.appearance = "solid";
     this.expanded = false;
     this.flipPlacements = undefined;
     this.label = undefined;
@@ -272,8 +275,8 @@ const ActionMenu = /*@__PURE__*/ proxyCustomElement(class ActionMenu extends HTM
     return focusElement(this.menuButtonEl);
   }
   renderMenuButton() {
-    const { label, scale, expanded } = this;
-    const menuButtonSlot = (h("slot", { name: SLOTS.trigger, onSlotchange: this.setMenuButtonEl }, h("calcite-action", { class: CSS.defaultTrigger, icon: ICONS.menu, scale: scale, text: label, textEnabled: expanded,
+    const { appearance, label, scale, expanded } = this;
+    const menuButtonSlot = (h("slot", { name: SLOTS.trigger, onSlotchange: this.setMenuButtonEl }, h("calcite-action", { appearance: appearance, class: CSS.defaultTrigger, icon: ICONS.menu, scale: scale, text: label, textEnabled: expanded,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setDefaultMenuButtonEl })));
     return menuButtonSlot;
@@ -298,6 +301,7 @@ const ActionMenu = /*@__PURE__*/ proxyCustomElement(class ActionMenu extends HTM
   }; }
   static get style() { return actionMenuCss; }
 }, [1, "calcite-action-menu", {
+    "appearance": [513],
     "expanded": [516],
     "flipPlacements": [16],
     "label": [1],

package/dist/components/action.js

@@ -17,7 +17,7 @@ import { d as defineCustomElement$1 } from './loader.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const CSS = {
   button: "button",