@esri/calcite-components 1.0.0-beta.81 → 1.0.0-beta.84

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

@@ -1,12 +1,13 @@
 /*!
  * 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.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, Host, Method, Prop, h, forceUpdate } from "@stencil/core";
 import { CSS, TEXT } from "./resources";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
+import { toAriaBoolean } from "../../utils/dom";
 /**
  * @slot - A slot for adding a `calcite-icon`.
  */
@@ -18,33 +19,35 @@ export class Action {
     //
     // --------------------------------------------------------------------------
     /**
-     * Indicates whether the action is highlighted.
+     * When true, the component is highlighted.
      */
     this.active = false;
-    /** Specify the appearance style of the action, defaults to solid. */
+    /** Specifies the appearance of the component. */
     this.appearance = "solid";
     /**
-     * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
+     * 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, disabled prevents interaction. This state shows items with lower opacity/grayed.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
-     * Indicates unread changes.
+     * When true, indicates unread changes.
      */
     this.indicator = false;
-    /** string to override English loading text
+    /**
+     * Specifies the text label to display while loading.
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT.loading;
     /**
-     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     * When true, a busy indicator is displayed.
      */
     this.loading = false;
     /**
-     * Specifies the size of the action.
+     * Specifies the size of the component.
      */
     this.scale = "m";
     /**
@@ -86,7 +89,8 @@ export class Action {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    this.buttonEl.focus();
+    var _a;
+    (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   // --------------------------------------------------------------------------
   //
@@ -128,7 +132,7 @@ export class Action {
       [CSS.buttonCompact]: compact
     };
     return (h(Host, { onClick: this.calciteActionClickHandler },
-      h("button", { "aria-busy": loading.toString(), "aria-disabled": disabled.toString(), "aria-label": ariaLabel, class: buttonClasses, disabled: disabled, ref: (buttonEl) => (this.buttonEl = buttonEl) },
+      h("button", { "aria-busy": toAriaBoolean(loading), "aria-disabled": toAriaBoolean(disabled), "aria-label": ariaLabel, class: buttonClasses, disabled: disabled, ref: (buttonEl) => (this.buttonEl = buttonEl) },
         this.renderIconContainer(),
         this.renderTextContainer())));
   }
@@ -153,7 +157,7 @@ export class Action {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates whether the action is highlighted."
+        "text": "When true, the component is highlighted."
       },
       "attribute": "active",
       "reflect": true,
@@ -176,7 +180,7 @@ export class Action {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Optionally specify the horizontal alignment of button elements with text content."
+        "text": "Specifies the horizontal alignment of button elements with text content."
       },
       "attribute": "alignment",
       "reflect": true
@@ -201,7 +205,7 @@ export class Action {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specify the appearance style of the action, defaults to solid."
+        "text": "Specifies the appearance of the component."
       },
       "attribute": "appearance",
       "reflect": true,
@@ -219,7 +223,7 @@ export class Action {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section."
+        "text": "When true, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`."
       },
       "attribute": "compact",
       "reflect": true,
@@ -237,7 +241,7 @@ export class Action {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -255,7 +259,7 @@ export class Action {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/."
+        "text": "Specifies an icon to display - accepts Calcite UI icon names."
       },
       "attribute": "icon",
       "reflect": false
@@ -272,7 +276,7 @@ export class Action {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates unread changes."
+        "text": "When true, indicates unread changes."
       },
       "attribute": "indicator",
       "reflect": true,
@@ -293,7 +297,7 @@ export class Action {
             "name": "default",
             "text": "\"Loading\""
           }],
-        "text": "string to override English loading text"
+        "text": "Specifies the text label to display while loading."
       },
       "attribute": "intl-loading",
       "reflect": false,
@@ -311,7 +315,7 @@ export class Action {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The label of the action. If no label is provided, the label inherits what's provided for the `text` prop."
+        "text": "Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop."
       },
       "attribute": "label",
       "reflect": false
@@ -328,7 +332,7 @@ export class Action {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
+        "text": "When true, a busy indicator is displayed."
       },
       "attribute": "loading",
       "reflect": true,
@@ -351,7 +355,7 @@ export class Action {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specifies the size of the action."
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -369,7 +373,7 @@ export class Action {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Text that accompanies the action icon."
+        "text": "Specifies text that accompanies the icon."
       },
       "attribute": "text",
       "reflect": false
@@ -404,7 +408,7 @@ export class Action {
             "name": "deprecated",
             "text": "use onClick instead."
           }],
-        "text": "Emitted when the action has been clicked."
+        "text": "Emits when the component has been clicked."
       },
       "complexType": {
         "original": "any",

package/dist/collection/components/action/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.81
+ * v1.0.0-beta.84
  */
 export const CSS = {
   button: "button",

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.81
+ * v1.0.0-beta.84
  */
 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", () => {
@@ -94,6 +94,7 @@ export class ActionBar {
     };
     this.toggleExpand = () => {
       this.expanded = !this.expanded;
+      this.calciteActionBarToggle.emit();
     };
     this.setExpandToggleRef = (el) => {
       this.expandToggleEl = el;
@@ -104,7 +105,6 @@ export class ActionBar {
   }
   expandedHandler(expanded) {
     toggleChildActionText({ parent: this.el, expanded });
-    this.calciteActionBarToggle.emit();
   }
   overflowDisabledHandler(overflowActionsDisabled) {
     overflowActionsDisabled
@@ -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.81
+ * v1.0.0-beta.84
  */
 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.81
+ * v1.0.0-beta.84
  */
 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.81
+ * v1.0.0-beta.84
  */
 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.81
+ * v1.0.0-beta.84
  */
 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;