@esri/calcite-components 1.0.0-beta.82 → 1.0.0-beta.85

package/dist/collection/components/action-bar/action-bar.js

@@ -1,7 +1,7 @@
 /*!
  * 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-beta.82
+ * v1.0.0-beta.85
  */
 import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -24,15 +24,15 @@ export class ActionBar {
     //
     // --------------------------------------------------------------------------
     /**
-     * When set to true, the expand-toggling behavior will be disabled.
+     * When true, the expand-toggling behavior is disabled.
      */
     this.expandDisabled = false;
     /**
-     * Indicates whether widget is expanded.
+     * When true, the component is expanded.
      */
     this.expanded = false;
     /**
-     * Disables automatically overflowing actions that won't fit into menus.
+     * Disables automatically overflowing `calcite-action`s that won't fit into menus.
      */
     this.overflowActionsDisabled = false;
     this.mutationObserver = createObserver("mutation", () => {
@@ -143,18 +143,24 @@ export class ActionBar {
   // --------------------------------------------------------------------------
   /**
    * Overflows actions that won't fit into menus.
+   *
    * @internal
    */
   async overflowActions() {
     this.resize(this.el.clientHeight);
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
+    var _a;
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
       return;
     }
-    this.el.focus();
+    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
   // --------------------------------------------------------------------------
   //
@@ -198,7 +204,7 @@ export class ActionBar {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When set to true, the expand-toggling behavior will be disabled."
+        "text": "When true, the expand-toggling behavior is disabled."
       },
       "attribute": "expand-disabled",
       "reflect": true,
@@ -216,7 +222,7 @@ export class ActionBar {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates whether widget is expanded."
+        "text": "When true, the component is expanded."
       },
       "attribute": "expanded",
       "reflect": true,
@@ -234,7 +240,7 @@ export class ActionBar {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Updates the label of the expand icon when the component is not expanded."
+        "text": "Specifies the label of the expand icon when the component is collapsed."
       },
       "attribute": "intl-expand",
       "reflect": false
@@ -251,7 +257,7 @@ export class ActionBar {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Updates the label of the collapse icon when the component is expanded."
+        "text": "Specifies the label of the collapse icon when the component is expanded."
       },
       "attribute": "intl-collapse",
       "reflect": false
@@ -268,7 +274,7 @@ export class ActionBar {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Disables automatically overflowing actions that won't fit into menus."
+        "text": "Disables automatically overflowing `calcite-action`s that won't fit into menus."
       },
       "attribute": "overflow-actions-disabled",
       "reflect": false,
@@ -291,7 +297,7 @@ export class ActionBar {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Arranges the component depending on the elements 'dir' property."
+        "text": "Arranges the component depending on the element's `dir` property."
       },
       "attribute": "position",
       "reflect": true
@@ -313,7 +319,7 @@ export class ActionBar {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specifies the size of the expand action."
+        "text": "Specifies the size of the expand `calcite-action`."
       },
       "attribute": "scale",
       "reflect": true
@@ -327,7 +333,7 @@ export class ActionBar {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when expanded has been toggled."
+        "text": "Emits when the `expanded` property is toggled."
       },
       "complexType": {
         "original": "any",
@@ -359,7 +365,10 @@ export class ActionBar {
       "complexType": {
         "signature": "(focusId?: \"expand-toggle\") => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -371,7 +380,10 @@ export class ActionBar {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     }
   }; }

package/dist/collection/components/action-bar/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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-beta.82
+ * v1.0.0-beta.85
  */
 export const CSS = {
   actionGroupBottom: "action-group--bottom"

package/dist/collection/components/action-bar/utils.js

@@ -1,7 +1,7 @@
 /*!
  * 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-beta.82
+ * v1.0.0-beta.85
  */
 import { forceUpdate } from "@stencil/core";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";

package/dist/collection/components/action-group/action-group.css

@@ -94,7 +94,7 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-action-group-columns: sets number of grid-template-columns when layout is grid
+* @prop --calcite-action-group-columns: Sets number of grid-template-columns when the `layout` property is "grid".
 */
 :host {
   display: flex;

package/dist/collection/components/action-group/action-group.js

@@ -1,7 +1,7 @@
 /*!
  * 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-beta.82
+ * v1.0.0-beta.85
  */
 import { Component, h, Prop, Watch, Element } from "@stencil/core";
 import { SLOTS, TEXT, ICONS } from "./resources";
@@ -11,8 +11,8 @@ import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding a group of `calcite-action`s.
- * @slot menu-actions - a slot for adding an overflow menu with actions inside a dropdown.
- * @slot menu-tooltip - a slot for adding an tooltip for the menu.
+ * @slot menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
+ * @slot menu-tooltip - A slot for adding a `calcite-tooltip` for the menu.
  */
 export class ActionGroup {
   constructor() {
@@ -22,15 +22,15 @@ export class ActionGroup {
     //
     // --------------------------------------------------------------------------
     /**
-     * Indicates whether widget is expanded.
+     * When true, the component is expanded.
      */
     this.expanded = false;
     /**
-     * Indicates the horizontal, vertical, or grid layout of the component.
+     * Indicates the layout of the component.
      */
     this.layout = "vertical";
     /**
-     * Opens the action menu.
+     * When true, the `calcite-action-menu` is open.
      */
     this.menuOpen = false;
     // --------------------------------------------------------------------------
@@ -100,7 +100,7 @@ export class ActionGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates whether widget is expanded."
+        "text": "When true, the component is expanded."
       },
       "attribute": "expanded",
       "reflect": true,
@@ -123,7 +123,7 @@ export class ActionGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates the horizontal, vertical, or grid layout of the component."
+        "text": "Indicates the layout of the component."
       },
       "attribute": "layout",
       "reflect": true,
@@ -163,7 +163,7 @@ export class ActionGroup {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Text string for the actions menu."
+        "text": "Specifies a text string for the `calcite-action-menu`."
       },
       "attribute": "intl-more",
       "reflect": false
@@ -180,7 +180,7 @@ export class ActionGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Opens the action menu."
+        "text": "When true, the `calcite-action-menu` is open."
       },
       "attribute": "menu-open",
       "reflect": true,
@@ -203,7 +203,7 @@ export class ActionGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specifies the size of the action-menu."
+        "text": "Specifies the size of the `calcite-action-menu`."
       },
       "attribute": "scale",
       "reflect": true

package/dist/collection/components/action-group/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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-beta.82
+ * v1.0.0-beta.85
  */
 export const SLOTS = {
   menuActions: "menu-actions",

package/dist/collection/components/action-menu/action-menu.css

@@ -90,9 +90,7 @@
 .menu ::slotted(calcite-action) {
   margin: 0.125rem;
   display: flex;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
 ::slotted(calcite-action[active]) {
@@ -107,7 +105,8 @@
   align-self: stretch;
 }
 
-slot[name=trigger]::slotted(calcite-action), calcite-action::slotted([slot=trigger]) {
+slot[name=trigger]::slotted(calcite-action), 
+calcite-action::slotted([slot=trigger]) {
   position: relative;
   height: 100%;
   flex: 0 1 auto;

package/dist/collection/components/action-menu/action-menu.js

@@ -1,7 +1,7 @@
 /*!
  * 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-beta.82
+ * v1.0.0-beta.85
  */
 import { Component, h, Element, Event, Listen, Prop, Watch, Method, State } from "@stencil/core";
 import { CSS, SLOTS, ICONS } from "./resources";
@@ -26,17 +26,18 @@ export class ActionMenu {
     //
     // --------------------------------------------------------------------------
     /**
-     * Indicates whether widget is expanded.
+     * When true, the component is expanded.
      */
     this.expanded = false;
     /**
-     * Opens the action menu.
+     * When true, the component is open.
      */
     this.open = false;
-    /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+    /** Determines the type of positioning to use for the overlaid content. If your element is in a fixed container, use the "fixed" value. */
     this.overlayPositioning = "absolute";
     /**
-     * Determines where the component will be positioned relative to the referenceElement.
+     * Determines where the component will be positioned relative to the `referenceElement`.
+     *
      * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
      */
     this.placement = "auto";
@@ -115,9 +116,9 @@ export class ActionMenu {
       this.setTooltipReferenceElement();
     };
     this.setTooltipReferenceElement = () => {
-      const { tooltipEl, expanded, menuButtonEl } = this;
+      const { tooltipEl, expanded, menuButtonEl, open } = this;
       if (tooltipEl) {
-        tooltipEl.referenceElement = !expanded ? menuButtonEl : null;
+        tooltipEl.referenceElement = !expanded && !open ? menuButtonEl : null;
       }
     };
     this.updateAction = (action, index) => {
@@ -244,6 +245,7 @@ export class ActionMenu {
       this.menuButtonEl.active = open;
     }
     this.calciteActionMenuOpenChange.emit(open);
+    this.setTooltipReferenceElement();
   }
   closeCalciteActionMenuOnClick(event) {
     const composedPath = event.composedPath();
@@ -265,9 +267,9 @@ export class ActionMenu {
     focusElement(this.open ? this.menuEl : this.menuButtonEl);
   }
   renderMenuButton() {
-    const { label, scale } = this;
+    const { label, scale, expanded } = this;
     const menuButtonSlot = (h("slot", { name: SLOTS.trigger },
-      h("calcite-action", { class: CSS.defaultTrigger, icon: ICONS.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label })));
+      h("calcite-action", { class: CSS.defaultTrigger, icon: ICONS.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label, textEnabled: expanded })));
     return menuButtonSlot;
   }
   renderMenuItems() {
@@ -308,7 +310,7 @@ export class ActionMenu {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates whether widget is expanded."
+        "text": "When true, the component is expanded."
       },
       "attribute": "expanded",
       "reflect": true,
@@ -346,7 +348,7 @@ export class ActionMenu {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Text string for the actions menu."
+        "text": "Specifies the text string for the component."
       },
       "attribute": "label",
       "reflect": false
@@ -363,7 +365,7 @@ export class ActionMenu {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Opens the action menu."
+        "text": "When true, the component is open."
       },
       "attribute": "open",
       "reflect": true,
@@ -386,7 +388,7 @@ export class ActionMenu {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value."
+        "text": "Determines the type of positioning to use for the overlaid content. If your element is in a fixed container, use the \"fixed\" value."
       },
       "attribute": "overlay-positioning",
       "reflect": false,
@@ -412,7 +414,7 @@ export class ActionMenu {
             "name": "see",
             "text": "[PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
           }],
-        "text": "Determines where the component will be positioned relative to the referenceElement."
+        "text": "Determines where the component will be positioned relative to the `referenceElement`."
       },
       "attribute": "placement",
       "reflect": true,
@@ -435,7 +437,7 @@ export class ActionMenu {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specifies the size of the menu trigger action."
+        "text": "Specifies the size of the component's trigger `calcite-action`."
       },
       "attribute": "scale",
       "reflect": true
@@ -452,7 +454,7 @@ export class ActionMenu {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the open property has changed."
+        "text": "Emits when the `open` property has changed."
       },
       "complexType": {
         "original": "any",

package/dist/collection/components/action-menu/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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-beta.82
+ * v1.0.0-beta.85
  */
 export const CSS = {
   menu: "menu",

package/dist/collection/components/action-pad/action-pad.css

@@ -109,6 +109,7 @@
 
 :host([expanded]) {
   max-width: 20vw;
+  background: transparent;
 }
 
 ::slotted(calcite-action-group) {

package/dist/collection/components/action-pad/action-pad.js

@@ -1,7 +1,7 @@
 /*!
  * 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-beta.82
+ * v1.0.0-beta.85
  */
 import { Component, Element, Event, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -9,8 +9,8 @@ import { focusElement, getSlotted } from "../../utils/dom";
 import { CSS, TEXT, SLOTS } from "./resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
- * @slot - A slot for adding `calcite-action`s to the action pad.
- * @slot expand-tooltip - Used to set the tooltip for the expand toggle.
+ * @slot - A slot for adding `calcite-action`s to the component.
+ * @slot expand-tooltip - Used to set the `calcite-tooltip` for the expand toggle.
  */
 export class ActionPad {
   constructor() {
@@ -20,15 +20,15 @@ export class ActionPad {
     //
     // --------------------------------------------------------------------------
     /**
-     * When set to true, the expand-toggling behavior will be disabled.
+     * When true, the expand-toggling behavior is disabled.
      */
     this.expandDisabled = false;
     /**
-     * Indicates whether widget is expanded.
+     * When true, the component is expanded.
      */
     this.expanded = false;
     /**
-     * Indicates the horizontal or vertical layout of the component.
+     * Indicates the layout of the component.
      */
     this.layout = "vertical";
     // --------------------------------------------------------------------------
@@ -77,13 +77,18 @@ export class ActionPad {
   //  Methods
   //
   // --------------------------------------------------------------------------
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
+    var _a;
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
       return;
     }
-    this.el.focus();
+    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
   // --------------------------------------------------------------------------
   //
@@ -127,7 +132,7 @@ export class ActionPad {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When set to true, the expand-toggling behavior will be disabled."
+        "text": "When true, the expand-toggling behavior is disabled."
       },
       "attribute": "expand-disabled",
       "reflect": true,
@@ -145,7 +150,7 @@ export class ActionPad {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates whether widget is expanded."
+        "text": "When true, the component is expanded."
       },
       "attribute": "expanded",
       "reflect": true,
@@ -168,7 +173,7 @@ export class ActionPad {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates the horizontal or vertical layout of the component."
+        "text": "Indicates the layout of the component."
       },
       "attribute": "layout",
       "reflect": true,
@@ -186,7 +191,7 @@ export class ActionPad {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Updates the label of the expand icon when the component is not expanded."
+        "text": "Specifies the label of the expand icon when the component is collapsed."
       },
       "attribute": "intl-expand",
       "reflect": false
@@ -203,7 +208,7 @@ export class ActionPad {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Updates the label of the collapse icon when the component is expanded."
+        "text": "Specifies the label of the collapse icon when the component is expanded."
       },
       "attribute": "intl-collapse",
       "reflect": false
@@ -225,7 +230,7 @@ export class ActionPad {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Arranges the component depending on the elements 'dir' property."
+        "text": "Arranges the component depending on the element's `dir` property."
       },
       "attribute": "position",
       "reflect": true
@@ -247,7 +252,7 @@ export class ActionPad {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specifies the size of the expand action."
+        "text": "Specifies the size of the expand `calcite-action`."
       },
       "attribute": "scale",
       "reflect": true
@@ -261,7 +266,7 @@ export class ActionPad {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when expanded has been toggled."
+        "text": "Emits when the `expanded` property is toggled."
       },
       "complexType": {
         "original": "any",
@@ -274,7 +279,10 @@ export class ActionPad {
       "complexType": {
         "signature": "(focusId?: \"expand-toggle\") => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -286,7 +294,10 @@ export class ActionPad {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     }
   }; }

package/dist/collection/components/action-pad/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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-beta.82
+ * v1.0.0-beta.85
  */
 export const CSS = {
   actionGroupBottom: "action-group--bottom",