@esri/calcite-components 1.0.0-next.647 → 1.0.0-next.649

package/dist/cjs/calcite-accordion_2.cjs.entry.js

@@ -1,18 +1,18 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.647
+ * v1.0.0-next.649
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7e0f281f.js');
-const dom = require('./dom-fc9f7c5b.js');
-const conditionalSlot = require('./conditionalSlot-4561a4a4.js');
-const resources = require('./resources-a0a90579.js');
-require('./guid-e00c2fae.js');
-require('./observers-e85167a1.js');
+const index = require('./index-a88aeb73.js');
+const dom = require('./dom-070a27d9.js');
+const conditionalSlot = require('./conditionalSlot-f67c6a2b.js');
+const resources = require('./resources-1db9ff52.js');
+require('./guid-4c7db122.js');
+require('./observers-7629d33c.js');
 
 const accordionCss = "@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)}:host([hidden]){display:none}:host([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{position:relative;display:block;max-inline-size:100%;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}.accordion--transparent{--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}.accordion--minimal{--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0}.accordion{border-width:1px;border-block-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2)}";
 
@@ -22,24 +22,6 @@ const Accordion = class {
     this.calciteInternalAccordionChange = index.createEvent(this, "calciteInternalAccordionChange", 6);
     //--------------------------------------------------------------------------
     //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /** Specifies the appearance of the component. */
-    this.appearance = "solid";
-    /** Specifies the placement of the icon in the header. */
-    this.iconPosition = "end";
-    /** Specifies the type of the icon in the header. */
-    this.iconType = "chevron";
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    /**
-     * Specifies the selection mode - "multiple" (allow any number of open items), "single" (allow one open item),
-     * or "single-persist" (allow and require one open item).
-     */
-    this.selectionMode = "multi";
-    //--------------------------------------------------------------------------
-    //
     //  Private State/Props
     //
     //--------------------------------------------------------------------------
@@ -48,6 +30,11 @@ const Accordion = class {
     /** keep track of whether the items have been sorted so we don't re-sort */
     this.sorted = false;
     this.sortItems = (items) => items.sort((a, b) => a.position - b.position).map((a) => a.item);
+    this.appearance = "solid";
+    this.iconPosition = "end";
+    this.iconType = "chevron";
+    this.scale = "m";
+    this.selectionMode = "multi";
   }
   //--------------------------------------------------------------------------
   //
@@ -190,35 +177,15 @@ const AccordionItem = class {
     this.calciteInternalAccordionItemSelect = index.createEvent(this, "calciteInternalAccordionItemSelect", 6);
     this.calciteInternalAccordionItemClose = index.createEvent(this, "calciteInternalAccordionItemClose", 6);
     this.calciteInternalAccordionItemRegister = index.createEvent(this, "calciteInternalAccordionItemRegister", 6);
-    //--------------------------------------------------------------------------
-    //
-    //  Public Properties
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When `true`, the component is active.
-     *
-     * @deprecated use `expanded` instead.
-     */
-    this.active = false;
-    /** When `true`, the component is expanded. */
-    this.expanded = false;
     /** what icon position does the parent accordion specify */
     this.iconPosition = "end";
     /** handle clicks on item header */
     this.itemHeaderClickHandler = () => this.emitRequestedItem();
-  }
-  activeHandler(value) {
-    this.expanded = value;
-  }
-  expandedHandler(value) {
-    this.active = value;
-  }
-  iconHandler(value) {
-    this.iconStart = value;
-  }
-  iconStartHandler(value) {
-    this.icon = value;
+    this.expanded = false;
+    this.heading = undefined;
+    this.description = undefined;
+    this.iconStart = undefined;
+    this.iconEnd = undefined;
   }
   //--------------------------------------------------------------------------
   //
@@ -230,17 +197,6 @@ const AccordionItem = class {
     this.selectionMode = dom.getElementProp(this.el, "selection-mode", "multi");
     this.iconType = dom.getElementProp(this.el, "icon-type", "chevron");
     this.iconPosition = dom.getElementProp(this.el, "icon-position", this.iconPosition);
-    const isExpanded = this.active || this.expanded;
-    if (isExpanded) {
-      this.activeHandler(isExpanded);
-      this.expandedHandler(isExpanded);
-    }
-    if (this.iconStart) {
-      this.icon = this.iconStart;
-    }
-    else if (this.icon) {
-      this.iconStart = this.icon;
-    }
     conditionalSlot.connectConditionalSlotComponent(this);
   }
   componentDidLoad() {
@@ -270,15 +226,15 @@ const AccordionItem = class {
     const dir = dom.getElementDir(this.el);
     const iconStartEl = this.iconStart ? (index.h("calcite-icon", { class: CSS.iconStart, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
     const iconEndEl = this.iconEnd ? (index.h("calcite-icon", { class: CSS.iconEnd, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
-    const description = this.description || this.itemSubtitle;
+    const { description } = this;
     return (index.h(index.Host, null, index.h("div", { class: {
         [`icon-position--${this.iconPosition}`]: true,
         [`icon-type--${this.iconType}`]: true
-      } }, index.h("div", { class: { [CSS.header]: true, [resources.CSS_UTILITY.rtl]: dir === "rtl" } }, this.renderActionsStart(), index.h("div", { "aria-expanded": dom.toAriaBoolean(this.active || this.expanded), class: CSS.headerContent, onClick: this.itemHeaderClickHandler, role: "button", tabindex: "0" }, index.h("div", { class: CSS.headerContainer }, iconStartEl, index.h("div", { class: CSS.headerText }, index.h("span", { class: CSS.heading }, this.heading || this.itemTitle), description ? index.h("span", { class: CSS.description }, description) : null), iconEndEl), index.h("calcite-icon", { class: CSS.expandIcon, icon: this.iconType === "chevron"
+      } }, index.h("div", { class: { [CSS.header]: true, [resources.CSS_UTILITY.rtl]: dir === "rtl" } }, this.renderActionsStart(), index.h("div", { "aria-expanded": dom.toAriaBoolean(this.expanded), class: CSS.headerContent, onClick: this.itemHeaderClickHandler, role: "button", tabindex: "0" }, index.h("div", { class: CSS.headerContainer }, iconStartEl, index.h("div", { class: CSS.headerText }, index.h("span", { class: CSS.heading }, this.heading), description ? index.h("span", { class: CSS.description }, description) : null), iconEndEl), index.h("calcite-icon", { class: CSS.expandIcon, icon: this.iconType === "chevron"
         ? "chevronDown"
         : this.iconType === "caret"
           ? "caretDown"
-          : this.expanded || this.active
+          : this.expanded
             ? "minus"
             : "plus", scale: "s" })), this.renderActionsEnd()), index.h("div", { class: CSS.content }, index.h("slot", null)))));
   }
@@ -347,12 +303,6 @@ const AccordionItem = class {
     return Array.prototype.indexOf.call(this.parent.querySelectorAll("calcite-accordion-item"), this.el);
   }
   get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "active": ["activeHandler"],
-    "expanded": ["expandedHandler"],
-    "icon": ["iconHandler"],
-    "iconStart": ["iconStartHandler"]
-  }; }
 };
 AccordionItem.style = accordionItemCss;
 

package/dist/cjs/calcite-action-bar.cjs.entry.js

@@ -1,23 +1,23 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.647
+ * v1.0.0-next.649
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7e0f281f.js');
-const ExpandToggle = require('./ExpandToggle-7af1105f.js');
-const dom = require('./dom-fc9f7c5b.js');
-const observers = require('./observers-e85167a1.js');
-const conditionalSlot = require('./conditionalSlot-4561a4a4.js');
-const loadable = require('./loadable-2c272f47.js');
-const debounce = require('./debounce-60b87419.js');
-require('./resources-fb34b377.js');
-require('./resources-ae981175.js');
-require('./resources-a0a90579.js');
-require('./guid-e00c2fae.js');
+const index = require('./index-a88aeb73.js');
+const ExpandToggle = require('./ExpandToggle-8c3b5dde.js');
+const dom = require('./dom-070a27d9.js');
+const observers = require('./observers-7629d33c.js');
+const conditionalSlot = require('./conditionalSlot-f67c6a2b.js');
+const loadable = require('./loadable-e1b975eb.js');
+const debounce = require('./debounce-63a14cdf.js');
+require('./resources-4f270690.js');
+require('./resources-0052562f.js');
+require('./resources-1db9ff52.js');
+require('./guid-4c7db122.js');
 
 const CSS = {
   actionGroupBottom: "action-group--bottom"
@@ -37,27 +37,6 @@ const ActionBar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteActionBarToggle = index.createEvent(this, "calciteActionBarToggle", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * When `true`, the expand-toggling behavior is disabled.
-     */
-    this.expandDisabled = false;
-    /**
-     * When `true`, the component is expanded.
-     */
-    this.expanded = false;
-    /**
-     *  The layout direction of the actions.
-     */
-    this.layout = "vertical";
-    /**
-     * Disables automatically overflowing `calcite-action`s that won't fit into menus.
-     */
-    this.overflowActionsDisabled = false;
     this.mutationObserver = observers.createObserver("mutation", () => {
       const { el, expanded } = this;
       ExpandToggle.toggleChildActionText({ parent: el, expanded });
@@ -70,7 +49,7 @@ const ActionBar = class {
     //
     // --------------------------------------------------------------------------
     this.actionMenuOpenChangeHandler = (event) => {
-      if (event.detail) {
+      if (event.target.menuOpen) {
         const composedPath = event.composedPath();
         Array.from(this.el.querySelectorAll("calcite-action-group")).forEach((group) => {
           if (!composedPath.includes(group)) {
@@ -125,6 +104,14 @@ const ActionBar = class {
     this.setExpandToggleRef = (el) => {
       this.expandToggleEl = el;
     };
+    this.expandDisabled = false;
+    this.expanded = false;
+    this.intlExpand = undefined;
+    this.intlCollapse = undefined;
+    this.layout = "vertical";
+    this.overflowActionsDisabled = false;
+    this.position = undefined;
+    this.scale = undefined;
   }
   expandHandler() {
     this.conditionallyOverflowActions();

package/dist/cjs/calcite-action-group.cjs.entry.js

@@ -1,20 +1,20 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.647
+ * v1.0.0-next.649
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7e0f281f.js');
-const resources = require('./resources-ae981175.js');
-const dom = require('./dom-fc9f7c5b.js');
-const resources$1 = require('./resources-fb34b377.js');
-const conditionalSlot = require('./conditionalSlot-4561a4a4.js');
-require('./resources-a0a90579.js');
-require('./guid-e00c2fae.js');
-require('./observers-e85167a1.js');
+const index = require('./index-a88aeb73.js');
+const resources = require('./resources-0052562f.js');
+const dom = require('./dom-070a27d9.js');
+const resources$1 = require('./resources-4f270690.js');
+const conditionalSlot = require('./conditionalSlot-f67c6a2b.js');
+require('./resources-1db9ff52.js');
+require('./guid-4c7db122.js');
+require('./observers-7629d33c.js');
 
 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)}: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){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)}";
 
@@ -23,29 +23,18 @@ const ActionGroup = class {
     index.registerInstance(this, hostRef);
     // --------------------------------------------------------------------------
     //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * When `true`, the component is expanded.
-     */
-    this.expanded = false;
-    /**
-     * Indicates the layout of the component.
-     */
-    this.layout = "vertical";
-    /**
-     * When `true`, the `calcite-action-menu` is open.
-     */
-    this.menuOpen = false;
-    // --------------------------------------------------------------------------
-    //
     //  Private Methods
     //
     // --------------------------------------------------------------------------
     this.setMenuOpen = (event) => {
-      this.menuOpen = !!event.detail;
+      this.menuOpen = !!event.target.open;
     };
+    this.expanded = false;
+    this.layout = "vertical";
+    this.columns = undefined;
+    this.intlMore = undefined;
+    this.menuOpen = false;
+    this.scale = undefined;
   }
   expandedHandler() {
     this.menuOpen = false;

package/dist/cjs/calcite-action-menu.cjs.entry.js

@@ -1,20 +1,20 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.647
+ * v1.0.0-next.649
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7e0f281f.js');
-const resources = require('./resources-fb34b377.js');
-const dom = require('./dom-fc9f7c5b.js');
-const array = require('./array-b788323b.js');
-const guid = require('./guid-e00c2fae.js');
-const key = require('./key-25858919.js');
-const loadable = require('./loadable-2c272f47.js');
-require('./resources-a0a90579.js');
+const index = require('./index-a88aeb73.js');
+const resources = require('./resources-4f270690.js');
+const dom = require('./dom-070a27d9.js');
+const array = require('./array-b4d773ff.js');
+const guid = require('./guid-4c7db122.js');
+const key = require('./key-3910ca3f.js');
+const loadable = require('./loadable-e1b975eb.js');
+require('./resources-1db9ff52.js');
 
 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)}: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}";
 
@@ -23,38 +23,10 @@ const ActionMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteActionMenuOpenChange = index.createEvent(this, "calciteActionMenuOpenChange", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * When `true`, the component is expanded.
-     */
-    this.expanded = false;
-    /**
-     * When `true`, the component is open.
-     */
-    this.open = false;
-    /**
-     * Determines the type of positioning to use for the overlaid content.
-     *
-     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
-     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
-     *
-     */
-    this.overlayPositioning = "absolute";
-    /**
-     * Determines where the component will be positioned relative to the `referenceElement`.
-     *
-     * @see [LogicalPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/floating-ui.ts#L25)
-     */
-    this.placement = "auto";
     this.actionElements = [];
     this.guid = `calcite-action-menu-${guid.guid()}`;
     this.menuId = `${this.guid}-menu`;
     this.menuButtonId = `${this.guid}-menu-button`;
-    this.activeMenuItemIndex = -1;
     // --------------------------------------------------------------------------
     //
     //  Component Methods
@@ -223,6 +195,15 @@ const ActionMenu = class {
       this.el.addEventListener("calcitePopoverOpen", this.toggleOpenEnd);
       this.open = value;
     };
+    this.expanded = false;
+    this.flipPlacements = undefined;
+    this.label = undefined;
+    this.open = false;
+    this.overlayPositioning = "absolute";
+    this.placement = "auto";
+    this.scale = undefined;
+    this.menuButtonEl = undefined;
+    this.activeMenuItemIndex = -1;
   }
   // --------------------------------------------------------------------------
   //
@@ -247,7 +228,7 @@ const ActionMenu = class {
     if (this.menuButtonEl) {
       this.menuButtonEl.active = open;
     }
-    this.calciteActionMenuOpenChange.emit(open);
+    this.calciteActionMenuOpenChange.emit();
     this.setTooltipReferenceElement();
   }
   closeCalciteActionMenuOnClick(event) {

package/dist/cjs/calcite-action-pad.cjs.entry.js

@@ -1,22 +1,22 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.647
+ * v1.0.0-next.649
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7e0f281f.js');
-const ExpandToggle = require('./ExpandToggle-7af1105f.js');
-const dom = require('./dom-fc9f7c5b.js');
-const conditionalSlot = require('./conditionalSlot-4561a4a4.js');
-const loadable = require('./loadable-2c272f47.js');
-require('./resources-fb34b377.js');
-require('./resources-ae981175.js');
-require('./resources-a0a90579.js');
-require('./guid-e00c2fae.js');
-require('./observers-e85167a1.js');
+const index = require('./index-a88aeb73.js');
+const ExpandToggle = require('./ExpandToggle-8c3b5dde.js');
+const dom = require('./dom-070a27d9.js');
+const conditionalSlot = require('./conditionalSlot-f67c6a2b.js');
+const loadable = require('./loadable-e1b975eb.js');
+require('./resources-4f270690.js');
+require('./resources-0052562f.js');
+require('./resources-1db9ff52.js');
+require('./guid-4c7db122.js');
+require('./observers-7629d33c.js');
 
 const CSS = {
   actionGroupBottom: "action-group--bottom",
@@ -38,28 +38,11 @@ const ActionPad = class {
     this.calciteActionPadToggle = index.createEvent(this, "calciteActionPadToggle", 6);
     // --------------------------------------------------------------------------
     //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * When `true`, the expand-toggling behavior is disabled.
-     */
-    this.expandDisabled = false;
-    /**
-     * When `true`, the component is expanded.
-     */
-    this.expanded = false;
-    /**
-     * Indicates the layout of the component.
-     */
-    this.layout = "vertical";
-    // --------------------------------------------------------------------------
-    //
     //  Private Methods
     //
     // --------------------------------------------------------------------------
     this.actionMenuOpenChangeHandler = (event) => {
-      if (event.detail) {
+      if (event.target.menuOpen) {
         const composedPath = event.composedPath();
         Array.from(this.el.querySelectorAll("calcite-action-group")).forEach((group) => {
           if (!composedPath.includes(group)) {
@@ -75,6 +58,13 @@ const ActionPad = class {
     this.setExpandToggleRef = (el) => {
       this.expandToggleEl = el;
     };
+    this.expandDisabled = false;
+    this.expanded = false;
+    this.layout = "vertical";
+    this.intlExpand = undefined;
+    this.intlCollapse = undefined;
+    this.position = undefined;
+    this.scale = undefined;
   }
   expandedHandler(expanded) {
     ExpandToggle.toggleChildActionText({ parent: this.el, expanded });

package/dist/cjs/calcite-action.cjs.entry.js

@@ -1,19 +1,19 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.647
+ * v1.0.0-next.649
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7e0f281f.js');
-const observers = require('./observers-e85167a1.js');
-const interactive = require('./interactive-f768090a.js');
-const dom = require('./dom-fc9f7c5b.js');
-const loadable = require('./loadable-2c272f47.js');
-require('./resources-a0a90579.js');
-require('./guid-e00c2fae.js');
+const index = require('./index-a88aeb73.js');
+const observers = require('./observers-7629d33c.js');
+const interactive = require('./interactive-6a565a7d.js');
+const dom = require('./dom-070a27d9.js');
+const loadable = require('./loadable-e1b975eb.js');
+require('./resources-1db9ff52.js');
+require('./guid-4c7db122.js');
 
 const CSS = {
   button: "button",
@@ -37,47 +37,6 @@ const actionCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down
 const Action = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    // --------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * When `true`, the component is highlighted.
-     */
-    this.active = false;
-    /** Specifies the appearance of the component. */
-    this.appearance = "solid";
-    /**
-     * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
-     */
-    this.compact = false;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     */
-    this.disabled = false;
-    /**
-     * When `true`, indicates unread changes.
-     */
-    this.indicator = false;
-    /**
-     * Specifies the text label to display while loading.
-     *
-     * @default "Loading"
-     */
-    this.intlLoading = TEXT.loading;
-    /**
-     * When `true`, a busy indicator is displayed.
-     */
-    this.loading = false;
-    /**
-     * Specifies the size of the component.
-     */
-    this.scale = "m";
-    /**
-     * Indicates whether the text is displayed.
-     */
-    this.textEnabled = false;
     this.mutationObserver = observers.createObserver("mutation", () => index.forceUpdate(this));
     // --------------------------------------------------------------------------
     //
@@ -95,6 +54,19 @@ const Action = class {
         tooltip.referenceElement = this.buttonEl;
       }
     };
+    this.active = false;
+    this.alignment = undefined;
+    this.appearance = "solid";
+    this.compact = false;
+    this.disabled = false;
+    this.icon = undefined;
+    this.indicator = false;
+    this.intlLoading = TEXT.loading;
+    this.label = undefined;
+    this.loading = false;
+    this.scale = "m";
+    this.text = undefined;
+    this.textEnabled = false;
   }
   // --------------------------------------------------------------------------
   //