@esri/solutions-components 0.6.1 → 0.6.3

package/dist/collection/demos/map-select-tools.html

@@ -46,12 +46,12 @@
 
     <link
       rel="stylesheet"
-      href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
+      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
     />
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
 
-    <script src="https://js.arcgis.com/4.25/"></script>
+    <script src="https://js.arcgis.com/4.27/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>
     <script>
       require(["esri/Map", "esri/views/MapView"], (

package/dist/collection/utils/downloadUtils.js

@@ -303,7 +303,7 @@ async function _prepareLabels(layer, ids, formatUsingLayerPopup = true, includeH
   var _a, _b, _c, _d, _e, _f;
   const [intl] = await loadModules(["esri/intl"]);
   // Get the features to export
-  const featureSet = await queryFeaturesByID(ids, layer, 0, []);
+  const featureSet = await queryFeaturesByID(ids, layer, [], false);
   // Get field data types. Do we have any domain-based fields?
   const attributeTypes = {};
   const attributeDomains = {};

package/dist/collection/utils/downloadUtils.ts

@@ -421,7 +421,7 @@ async function _prepareLabels(
   const [intl] = await loadModules(["esri/intl"]);
 
   // Get the features to export
-  const featureSet = await queryFeaturesByID(ids, layer, 0, []);
+  const featureSet = await queryFeaturesByID(ids, layer, [], false);
 
   // Get field data types. Do we have any domain-based fields?
   const attributeTypes: IAttributeTypes = {};

package/dist/collection/utils/interfaces.js

@@ -18,6 +18,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+export var EImageDisplayType;
+(function (EImageDisplayType) {
+  EImageDisplayType["GRID"] = "GRID";
+  EImageDisplayType["GALLERY"] = "GALLERY";
+})(EImageDisplayType || (EImageDisplayType = {}));
 export var ELayoutMode;
 (function (ELayoutMode) {
   ELayoutMode["GRID"] = "GRID";

package/dist/collection/utils/interfaces.ts

@@ -19,6 +19,11 @@ import {
   IItemTemplate
 } from '@esri/solution-common';
 
+export enum EImageDisplayType {
+  GRID="GRID",
+  GALLERY="GALLERY"
+}
+
 export enum ELayoutMode {
   GRID = "GRID",
   HORIZONTAL = "HORIZONTAL",
@@ -79,12 +84,23 @@ export enum EDrawMode {
 
 /* eslint-enable no-unused-vars */
 
-export type SelectionMode = "single" | "multi";
-
 export type ValidSize = 6|10|14|20|30|60|80;
 
 export type DistanceUnit = "feet"|"meters"|"miles"|"kilometers";
 
+export interface IMapClick {
+  mapPoint: __esri.Point,
+  screenPoint: __esri.MapViewScreenPoint,
+  x: number,
+  y: number,
+  button: number,
+  buttons: 0 | 1 | 2,
+  type: string,
+  stopPropagation: any,
+  timestamp: number,
+  native: PointerEvent
+}
+
 export interface IExportOptions {
   csvOptions: ICsvOptions;
   pdfOptions: IPdfOptions;
@@ -421,10 +437,6 @@ export interface IQueryExtentResponse {
   extent: __esri.Extent;
 }
 
-export interface IInfoCardValues {
-  [key: string]: string;
-}
-
 export interface IMediaCardValues {
   name: string;
   description: string;

package/dist/collection/utils/queryUtils.js

@@ -40,6 +40,39 @@ export async function queryAllFeatures(start, layer, graphics) {
     queryAllFeatures(start += num, layer, graphics) :
     Promise.resolve(graphics);
 }
+/**
+ * Query the layer for all IDs
+ *
+ * @param layer the layer to retrieve features from
+ *
+ * @returns Promise with the featureSet from the layer that match the provided ids
+ */
+export async function queryAllIds(layer) {
+  const query = layer.createQuery();
+  query.where = "1=1";
+  return await layer.queryObjectIds(query);
+}
+/**
+ * Query the feature for any image attachments
+ *
+ * @param layer the layer to retrieve attachments from
+ *
+ * @returns Promise with any attachments from the feature
+ */
+export async function queryAttachments(layer, objectIds) {
+  return await layer.queryAttachments({
+    attachmentTypes: [
+      "image/jpeg",
+      "image/png",
+      "image/gif",
+      "image/jpg",
+      "image/tif",
+      "image/tiff",
+      "image/bmp"
+    ],
+    objectIds
+  });
+}
 /**
  * Query the layer for OIDs based on any user drawn geometries or buffers
  *
@@ -65,20 +98,26 @@ export async function queryObjectIds(geometries, layer) {
  *
  * @param ids array of ObjectIDs to be used to query for features in a layer
  * @param layer the layer to retrieve features from
+ * @param graphics the result graphics array
  *
  * @returns Promise with the featureSet from the layer that match the provided ids
  */
-export async function queryFeaturesByID(ids, layer, start, graphics) {
+export async function queryFeaturesByID(ids, layer, graphics, returnGeometry, outSpatialReference) {
   const num = layer.capabilities.query.maxRecordCount;
+  const start = 0;
   const q = layer.createQuery();
   q.start = start;
   q.num = num;
+  q.returnGeometry = returnGeometry;
   q.objectIds = ids.slice(start, num);
+  if (outSpatialReference) {
+    q.outSpatialReference = outSpatialReference;
+  }
   const result = await layer.queryFeatures(q);
   graphics = graphics.concat(result.features);
   const remainingIds = ids.slice(num, ids.length);
   return remainingIds.length > 0 ?
-    queryFeaturesByID(remainingIds, layer, start += num, graphics) :
+    queryFeaturesByID(remainingIds, layer, graphics, returnGeometry, outSpatialReference) :
     Promise.resolve(graphics);
 }
 /**

package/dist/collection/utils/queryUtils.ts

@@ -48,6 +48,46 @@ export async function queryAllFeatures(
     Promise.resolve(graphics);
 }
 
+/**
+ * Query the layer for all IDs
+ *
+ * @param layer the layer to retrieve features from
+ *
+ * @returns Promise with the featureSet from the layer that match the provided ids
+ */
+export async function queryAllIds(
+  layer: __esri.FeatureLayer
+): Promise<number[]> {
+  const query = layer.createQuery();
+  query.where = "1=1";
+  return await layer.queryObjectIds(query);
+}
+
+/**
+ * Query the feature for any image attachments
+ *
+ * @param layer the layer to retrieve attachments from
+ *
+ * @returns Promise with any attachments from the feature
+ */
+export async function queryAttachments(
+  layer: __esri.FeatureLayer,
+  objectIds: number[]
+): Promise<any> {
+  return await layer.queryAttachments({
+    attachmentTypes: [
+      "image/jpeg",
+      "image/png",
+      "image/gif",
+      "image/jpg",
+      "image/tif",
+      "image/tiff",
+      "image/bmp"
+    ],
+    objectIds
+  });
+}
+
 /**
  * Query the layer for OIDs based on any user drawn geometries or buffers
  *
@@ -77,20 +117,28 @@ export async function queryObjectIds(
  *
  * @param ids array of ObjectIDs to be used to query for features in a layer
  * @param layer the layer to retrieve features from
+ * @param graphics the result graphics array
  *
  * @returns Promise with the featureSet from the layer that match the provided ids
  */
 export async function queryFeaturesByID(
   ids: number[],
   layer: __esri.FeatureLayer,
-  start: number,
-  graphics: __esri.Graphic[]
+  graphics: __esri.Graphic[],
+  returnGeometry: boolean,
+  outSpatialReference?: __esri.SpatialReference
 ): Promise<__esri.Graphic[]> {
   const num = layer.capabilities.query.maxRecordCount;
+  const start = 0;
+
   const q = layer.createQuery();
   q.start = start;
   q.num = num;
+  q.returnGeometry = returnGeometry;
   q.objectIds = ids.slice(start, num);
+  if (outSpatialReference) {
+    q.outSpatialReference = outSpatialReference;
+  }
 
   const result = await layer.queryFeatures(q);
 
@@ -99,9 +147,8 @@ export async function queryFeaturesByID(
   );
 
   const remainingIds = ids.slice(num, ids.length);
-
   return remainingIds.length > 0 ?
-    queryFeaturesByID(remainingIds, layer, start += num, graphics) :
+    queryFeaturesByID(remainingIds, layer, graphics, returnGeometry, outSpatialReference) :
     Promise.resolve(graphics);
 }
 

package/dist/components/ExpandToggle.js

@@ -11,7 +11,7 @@ import { S as SLOTS } from './action-menu.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.2.0
+ * v1.4.3
  */
 const overflowActionsDebounceInMs = 150;
 const groupBufferPx = 2;
@@ -66,7 +66,7 @@ const overflowActions = ({ actionGroups, expanded, overflowCount }) => {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.2.0
+ * v1.4.3
  */
 const ICONS = {
   chevronsLeft: "chevrons-left",
@@ -75,13 +75,11 @@ const ICONS = {
 function getCalcitePosition(position, el) {
   return position || el.closest("calcite-shell-panel")?.position || "start";
 }
-function toggleChildActionText({ parent, expanded }) {
-  queryActions(parent)
+function toggleChildActionText({ el, expanded }) {
+  queryActions(el)
     .filter((el) => el.slot !== SLOTS$1.menuActions)
     .forEach((action) => (action.textEnabled = expanded));
-  parent
-    .querySelectorAll("calcite-action-group, calcite-action-menu")
-    .forEach((el) => (el.expanded = expanded));
+  el.querySelectorAll("calcite-action-group, calcite-action-menu").forEach((el) => (el.expanded = expanded));
 }
 const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
   if (tooltip) {

package/dist/components/FloatingArrow.js

@@ -0,0 +1,46 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { h } from '@stencil/core/internal/client';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.4.3
+ */
+const CSS = {
+  arrow: "calcite-floating-ui-arrow",
+  arrowStroke: "calcite-floating-ui-arrow__stroke"
+};
+const DEFAULTS = {
+  width: 12,
+  height: 6,
+  strokeWidth: 1
+};
+/**
+ * Renders a SVG element to be used as a floating-ui arrow.
+ *
+ * This functional component should be rendered inside a `FloatingUIComponent` when it needs an arrow element.
+ *
+ * @param floatingLayout.floatingLayout
+ * @param floatingLayout – The effective floating layout to render the arrow vertically or horizontally. Possible values: `vertical` or `horizontal`.
+ *
+ * See [floating-ui](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts)
+ * @param floatingLayout.key
+ * @param floatingLayout.ref
+ */
+const FloatingArrow = ({ floatingLayout, key, ref }) => {
+  const { width, height, strokeWidth } = DEFAULTS;
+  const svgX = width / 2;
+  const isVertical = floatingLayout === "vertical";
+  const dValue = "M0,0" +
+    ` H${width}` +
+    ` L${width - svgX},${height}` +
+    ` Q${svgX},${height} ${svgX},${height}` +
+    " Z";
+  return (h("svg", { "aria-hidden": "true", class: CSS.arrow, height: width, key: key, ref: ref, viewBox: `0 0 ${width} ${width + (!isVertical ? strokeWidth : 0)}`, width: width + (isVertical ? strokeWidth : 0) }, strokeWidth > 0 && (h("path", { class: CSS.arrowStroke, d: dValue, fill: "none", "stroke-width": strokeWidth + 1 })), h("path", { d: dValue, stroke: "none" })));
+};
+
+export { FloatingArrow as F };

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-components/blob/master/LICENSE.md for details.
- * v1.2.0
+ * v1.4.3
  */
 function constrainHeadingLevel(level) {
   return Math.min(Math.max(Math.ceil(level), 1), 6);

package/dist/components/action-bar.js

@@ -5,12 +5,12 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
-import { b as getSlotted } from './dom.js';
+import { s as slotChangeGetAssignedElements, b as getSlotted } from './dom.js';
 import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentLoaded } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { c as createObserver } from './observers.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
-import { t as toggleChildActionText, o as overflowActionsDebounceInMs, q as queryActions, g as geActionDimensions, a as overflowActions, E as ExpandToggle, b as getOverflowCount } from './ExpandToggle.js';
+import { t as toggleChildActionText, E as ExpandToggle, o as overflowActionsDebounceInMs, q as queryActions, g as geActionDimensions, a as overflowActions, b as getOverflowCount } from './ExpandToggle.js';
 import { d as defineCustomElement$6 } from './action.js';
 import { d as defineCustomElement$5 } from './action-group.js';
 import { d as defineCustomElement$4 } from './action-menu.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-components/blob/master/LICENSE.md for details.
- * v1.2.0
+ * v1.4.3
  */
 const CSS = {
   actionGroupBottom: "action-group--bottom"
@@ -32,7 +32,7 @@ const SLOTS = {
   expandTooltip: "expand-tooltip"
 };
 
-const actionBarCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}: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}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host{pointer-events:auto;display:inline-flex;align-self:stretch;background:transparent;--calcite-action-bar-expanded-max-width:auto}:host([layout=vertical]){flex-direction:column}:host([layout=horizontal]){flex-direction:row}:host([layout=vertical][overflow-actions-disabled]){overflow-y:auto}:host([layout=horizontal][overflow-actions-disabled]){overflow-x:auto}:host([layout=vertical][expanded]){max-inline-size:var(--calcite-action-bar-expanded-max-width)}::slotted(calcite-action-group){border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-width:0px;border-inline-end-width:1px;border-style:solid}::slotted(calcite-action-group:last-child){border-block-end-width:0px;border-inline-end-width:0px}.action-group--bottom{flex-grow:1;justify-content:flex-end;-webkit-padding-after:0px;padding-block-end:0px;-webkit-padding-end:0px;padding-inline-end:0px}";
+const actionBarCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}: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}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{pointer-events:auto;display:inline-flex;align-self:stretch;--calcite-action-bar-expanded-max-width:auto}:host([layout=vertical]){flex-direction:column}:host([layout=horizontal]){flex-direction:row}:host([layout=vertical][overflow-actions-disabled]){overflow-y:auto}:host([layout=horizontal][overflow-actions-disabled]){overflow-x:auto}:host([layout=vertical][expanded]){max-inline-size:var(--calcite-action-bar-expanded-max-width)}::slotted(calcite-action-group){-webkit-border-after:1px solid var(--calcite-ui-border-3);border-block-end:1px solid var(--calcite-ui-border-3)}:host([layout=horizontal]) ::slotted(calcite-action-group){-webkit-border-after:0;border-block-end:0;-webkit-border-end:1px solid var(--calcite-ui-border-3);border-inline-end:1px solid var(--calcite-ui-border-3)}:host([layout=horizontal][expand-disabled]) ::slotted(calcite-action-group:last-of-type){-webkit-border-end:0;border-inline-end:0}::slotted(calcite-action-group:last-child){-webkit-border-after:0;border-block-end:0;-webkit-border-end:0;border-inline-end:0}.action-group--bottom{flex-grow:1;justify-content:flex-end}";
 
 const ActionBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -42,8 +42,8 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 6);
     this.mutationObserver = createObserver("mutation", () => {
       const { el, expanded } = this;
-      toggleChildActionText({ parent: el, expanded });
-      this.conditionallyOverflowActions();
+      toggleChildActionText({ el, expanded });
+      this.overflowActions();
     });
     this.resizeObserver = createObserver("resize", (entries) => this.resizeHandlerEntries(entries));
     // --------------------------------------------------------------------------
@@ -69,13 +69,16 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.resize({ width, height });
     };
     this.resize = debounce(({ width, height }) => {
-      const { el, expanded, expandDisabled, layout } = this;
-      if ((layout === "vertical" && !height) || (layout === "horizontal" && !width)) {
+      const { el, expanded, expandDisabled, layout, overflowActionsDisabled } = this;
+      if (overflowActionsDisabled ||
+        (layout === "vertical" && !height) ||
+        (layout === "horizontal" && !width)) {
         return;
       }
       const actions = queryActions(el);
       const actionCount = expandDisabled ? actions.length : actions.length + 1;
       const actionGroups = Array.from(el.querySelectorAll("calcite-action-group"));
+      this.setGroupLayout(actionGroups);
       const groupCount = getSlotted(el, SLOTS.bottomActions) || !expandDisabled
         ? actionGroups.length + 1
         : actionGroups.length;
@@ -95,11 +98,6 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         overflowCount
       });
     }, overflowActionsDebounceInMs);
-    this.conditionallyOverflowActions = () => {
-      if (!this.overflowActionsDisabled) {
-        this.overflowActions();
-      }
-    };
     this.toggleExpand = () => {
       this.expanded = !this.expanded;
       this.calciteActionBarToggle.emit();
@@ -107,6 +105,10 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.setExpandToggleRef = (el) => {
       this.expandToggleEl = el;
     };
+    this.handleDefaultSlotChange = (event) => {
+      const groups = slotChangeGetAssignedElements(event).filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-action-group"));
+      this.setGroupLayout(groups);
+    };
     this.expandDisabled = false;
     this.expanded = false;
     this.layout = "vertical";
@@ -119,11 +121,15 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.defaultMessages = undefined;
   }
   expandHandler() {
-    this.conditionallyOverflowActions();
+    this.overflowActions();
+  }
+  expandedHandler() {
+    const { el, expanded } = this;
+    toggleChildActionText({ el, expanded });
+    this.overflowActions();
   }
-  expandedHandler(expanded) {
-    toggleChildActionText({ parent: this.el, expanded });
-    this.conditionallyOverflowActions();
+  layoutHandler() {
+    this.updateGroups();
   }
   overflowDisabledHandler(overflowActionsDisabled) {
     overflowActionsDisabled
@@ -142,20 +148,22 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //
   // --------------------------------------------------------------------------
   componentDidLoad() {
+    const { el, expanded } = this;
     setComponentLoaded(this);
-    this.conditionallyOverflowActions();
+    toggleChildActionText({ el, expanded });
+    this.overflowActions();
   }
   connectedCallback() {
     var _a, _b;
     const { el, expanded } = this;
     connectLocalized(this);
     connectMessages(this);
-    toggleChildActionText({ parent: el, expanded });
+    toggleChildActionText({ el, expanded });
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, { childList: true, subtree: true });
     if (!this.overflowActionsDisabled) {
       (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
     }
-    this.conditionallyOverflowActions();
+    this.overflowActions();
     connectConditionalSlotComponent(this);
   }
   async componentWillLoad() {
@@ -191,6 +199,12 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     await componentLoaded(this);
     (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
+  updateGroups() {
+    this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")));
+  }
+  setGroupLayout(groups) {
+    groups.forEach((group) => (group.layout = this.layout));
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -205,7 +219,7 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return getSlotted(el, SLOTS.bottomActions) || expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupBottom, layout: layout, scale: scale }, h("slot", { name: SLOTS.bottomActions }), h("slot", { name: SLOTS.expandTooltip }), expandToggleNode)) : null;
   }
   render() {
-    return (h(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("slot", null), this.renderBottomActionGroup()));
+    return (h(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
   }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
@@ -213,6 +227,7 @@ const ActionBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get watchers() { return {
     "expandDisabled": ["expandHandler"],
     "expanded": ["expandedHandler"],
+    "layout": ["layoutHandler"],
     "overflowActionsDisabled": ["overflowDisabledHandler"],
     "messageOverrides": ["onMessagesChange"],
     "effectiveLocale": ["effectiveLocaleChange"]

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-components/blob/master/LICENSE.md for details.
- * v1.2.0
+ * v1.4.3
  */
 const SLOTS = {
   menuActions: "menu-actions",
@@ -28,7 +28,7 @@ const ICONS = {
   menu: "ellipsis"
 };
 
-const actionGroupCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}: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}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host{display:flex;flex-direction:column;padding:0px;--calcite-action-group-columns:3}: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){-webkit-padding-before:0px;padding-block-start:0px}:host([layout=horizontal]){flex-direction:row}:host([layout=grid]){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)}";
+const actionGroupCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}: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}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{display:flex;flex-direction:column;padding:0px;--calcite-action-group-columns:3}: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){-webkit-padding-before:0px;padding-block-start:0px}:host([layout=horizontal]){flex-direction:row}:host([layout=grid]){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)}";
 
 const ActionGroup = /*@__PURE__*/ proxyCustomElement(class 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-components/blob/master/LICENSE.md for details.
- * v1.2.0
+ * v1.4.3
  */
 const CSS = {
   menu: "menu",
@@ -31,7 +31,7 @@ const ICONS = {
   menu: "ellipsis"
 };
 
-const actionMenuCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}: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-brand);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}";
+const actionMenuCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}: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}";
 
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
 const ActionMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

package/dist/components/action.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, Build, h, Host } from '@stencil/core/internal/client';
 import { t as toAriaBoolean } from './dom.js';
 import { g as guid } from './guid.js';
-import { u as updateHostInteraction } from './interactive.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { c as createObserver } from './observers.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-components/blob/master/LICENSE.md for details.
- * v1.2.0
+ * v1.4.3
  */
 const CSS = {
   button: "button",
@@ -34,7 +34,7 @@ const SLOTS = {
   tooltip: "tooltip"
 };
 
-const actionCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}: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}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:flex;background-color:transparent;--calcite-action-indicator-color:var(--calcite-ui-brand)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.button{position:relative;margin:0px;display:flex;inline-size:auto;cursor:pointer;align-items:center;justify-content:flex-start;border-style:none;background-color:var(--calcite-ui-foreground-1);fill:var(--calcite-ui-text-3);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-3);outline-color:transparent;text-align:unset;flex:1 0 auto}.button:hover{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}.button:focus{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1);outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.button:active{background-color:var(--calcite-ui-foreground-3)}.button .icon-container{pointer-events:none;margin:0px;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1rem}.button .text-container{margin:0px;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:margin;transition-property:inline-size}.button .text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1;-webkit-margin-end:1rem;margin-inline-end:1rem}:host([scale=s]) .button{padding-inline:0.5rem;padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=s]) .button--text-visible .icon-container{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([scale=m]) .button{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=m]) .button--text-visible .icon-container{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem}:host([scale=l]) .button{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=l]) .button--text-visible .icon-container{-webkit-margin-end:1rem;margin-inline-end:1rem}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{inline-size:100%}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}:host([active]) .button:active{background-color:var(--calcite-ui-foreground-1)}:host([appearance=transparent]) .button{background-color:transparent;transition-property:box-shadow;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host([appearance=transparent]) .button:hover,:host([appearance=transparent]) .button:focus{background-color:transparent;box-shadow:0 0 0 2px var(--calcite-ui-border-1) inset}:host([active][appearance=transparent]) .button,:host([active][appearance=transparent]) .button:hover,:host([active][appearance=transparent]) .button:focus{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}:host([appearance=transparent][loading]) .button,:host([appearance=transparent][disabled]) .button{background-color:transparent}:host([loading]) .button,:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-ui-foreground-1)}:host([loading]) .button .text-container,:host([loading]) .button:hover .text-container,:host([loading]) .button:focus .text-container{opacity:var(--calcite-ui-opacity-disabled)}:host([loading]) calcite-loader[inline]{color:var(--calcite-ui-text-3);-webkit-margin-end:0px;margin-inline-end:0px}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;background-color:var(--calcite-ui-foreground-1);opacity:var(--calcite-ui-opacity-disabled)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{background-color:var(--calcite-ui-foreground-3);opacity:var(--calcite-ui-opacity-disabled)}:host([indicator]) .button::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;border-width:2px;background-color:var(--calcite-action-indicator-color);border-color:var(--calcite-ui-foreground-1);inset-block-end:0.75rem;inset-inline-end:0.75rem}:host([indicator]) .button--text-visible::after{inset-block-end:auto}:host([indicator]) .button:hover::after,:host([indicator]) .button:focus::after{border-color:var(--calcite-ui-foreground-1)}:host([indicator][scale=s]) .button::after{inset-block-end:0.25rem;inset-inline-end:0.25rem}:host([indicator][scale=s]) .button--text-visible::after{inset-block-end:auto;inset-inline-end:0.5rem}:host([indicator][active]) .button::after{border-color:var(--calcite-ui-foreground-3)}.indicator-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}";
+const actionCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}: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}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;background-color:transparent;--calcite-action-indicator-color:var(--calcite-ui-brand)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.button{position:relative;margin:0px;display:flex;inline-size:auto;cursor:pointer;align-items:center;justify-content:flex-start;border-style:none;background-color:var(--calcite-ui-foreground-1);fill:var(--calcite-ui-text-3);font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-3);outline-color:transparent;text-align:unset;flex:1 0 auto}.button:hover{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}.button:focus{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1);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          )}.button:active{background-color:var(--calcite-ui-foreground-3)}.button .icon-container{pointer-events:none;margin:0px;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;min-block-size:1rem}.button .text-container{margin:0px;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;opacity:0;transition-property:opacity;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:margin;transition-property:inline-size}.button .text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1;-webkit-margin-end:1rem;margin-inline-end:1rem}:host([scale=s]) .button{padding-inline:0.5rem;padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=s]) .button--text-visible .icon-container{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([scale=m]) .button{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=m]) .button--text-visible .icon-container{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem}:host([scale=l]) .button{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=l]) .button--text-visible .icon-container{-webkit-margin-end:1rem;margin-inline-end:1rem}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.button--text-visible{inline-size:100%}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}:host([active]) .button:active{background-color:var(--calcite-ui-foreground-1)}:host([appearance=transparent]) .button{background-color:transparent;transition-property:box-shadow;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host([appearance=transparent]) .button:hover,:host([appearance=transparent]) .button:focus{background-color:transparent;box-shadow:0 0 0 2px var(--calcite-ui-border-1) inset}:host([active][appearance=transparent]) .button,:host([active][appearance=transparent]) .button:hover,:host([active][appearance=transparent]) .button:focus{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}:host([appearance=transparent][loading]) .button,:host([appearance=transparent][disabled]) .button{background-color:transparent}:host([loading]) .button,:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-ui-foreground-1)}:host([loading]) .button .text-container,:host([loading]) .button:hover .text-container,:host([loading]) .button:focus .text-container{opacity:var(--calcite-ui-opacity-disabled)}:host([loading]) calcite-loader[inline]{color:var(--calcite-ui-text-3);-webkit-margin-end:0px;margin-inline-end:0px}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;background-color:var(--calcite-ui-foreground-1);opacity:var(--calcite-ui-opacity-disabled)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{background-color:var(--calcite-ui-foreground-3);opacity:var(--calcite-ui-opacity-disabled)}:host([indicator]) .button::after{content:\"\";position:absolute;block-size:0.5rem;inline-size:0.5rem;border-radius:9999px;border-width:2px;background-color:var(--calcite-action-indicator-color);border-color:var(--calcite-ui-foreground-1);inset-block-end:0.75rem;inset-inline-end:0.75rem}:host([indicator]) .button--text-visible::after{inset-block-end:auto}:host([indicator]) .button:hover::after,:host([indicator]) .button:focus::after{border-color:var(--calcite-ui-foreground-1)}:host([indicator][scale=s]) .button::after{inset-block-end:0.25rem;inset-inline-end:0.25rem}:host([indicator][scale=s]) .button--text-visible::after{inset-block-end:auto;inset-inline-end:0.5rem}:host([indicator][active]) .button::after{border-color:var(--calcite-ui-foreground-3)}.indicator-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}";
 
 const Action = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -92,6 +92,7 @@ const Action = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // --------------------------------------------------------------------------
   connectedCallback() {
     var _a;
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
@@ -107,6 +108,7 @@ const Action = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   disconnectedCallback() {
     var _a;
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();