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

package/dist/collection/components/accordion-item/accordion-item.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.83
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
 import { getElementDir, getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -17,8 +17,14 @@ export class AccordionItem {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** Indicates whether the item is active. */
+    /**
+     * When true, the component is active.
+     *
+     * @deprecated use expanded instead
+     */
     this.active = false;
+    /** When true, item is expanded */
+    this.expanded = false;
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
@@ -59,19 +65,19 @@ export class AccordionItem {
           [`icon-position--${this.iconPosition}`]: true,
           [`icon-type--${this.iconType}`]: true
         } },
-        h("div", { "aria-controls": regionId, class: { "accordion-item-header": true, [CSS_UTILITY.rtl]: dir === "rtl" }, id: buttonId, onClick: this.itemHeaderClickHandler, role: "button" },
+        h("div", { "aria-controls": regionId, "aria-expanded": toAriaBoolean(this.active), class: { "accordion-item-header": true, [CSS_UTILITY.rtl]: dir === "rtl" }, id: buttonId, onClick: this.itemHeaderClickHandler, role: "button" },
           this.icon ? iconEl : null,
           h("div", { class: "accordion-item-header-text" },
-            h("span", { class: "accordion-item-title" }, this.itemTitle),
-            this.itemSubtitle ? (h("span", { class: "accordion-item-subtitle" }, this.itemSubtitle)) : null),
+            h("span", { class: "accordion-item-heading" }, this.heading || this.itemTitle),
+            this.itemSubtitle ? (h("span", { class: "accordion-item-description" }, this.description || this.itemSubtitle)) : null),
           h("calcite-icon", { class: "accordion-item-expand-icon", icon: this.iconType === "chevron"
               ? "chevronDown"
               : this.iconType === "caret"
                 ? "caretDown"
-                : this.active
+                : this.expanded || this.active
                   ? "minus"
                   : "plus", scale: "s" })),
-        h("div", { "aria-expanded": toAriaBoolean(this.active), "aria-labelledby": buttonId, class: "accordion-item-content", id: regionId, role: "region" },
+        h("div", { "aria-expanded": toAriaBoolean(this.expanded || this.active), "aria-labelledby": buttonId, class: "accordion-item-content", id: regionId, role: "region" },
           h("slot", null)))));
   }
   //--------------------------------------------------------------------------
@@ -119,13 +125,16 @@ export class AccordionItem {
       case "multi":
         if (this.el === this.requestedAccordionItem) {
           this.active = !this.active;
+          this.expanded = !this.expanded;
         }
         break;
       case "single":
         this.active = this.el === this.requestedAccordionItem ? !this.active : false;
+        this.expanded = this.el === this.requestedAccordionItem ? !this.expanded : false;
         break;
       case "single-persist":
         this.active = this.el === this.requestedAccordionItem;
+        this.expanded = this.el === this.requestedAccordionItem;
         break;
     }
   }
@@ -157,13 +166,34 @@ export class AccordionItem {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "Indicates whether the item is active."
+        "tags": [{
+            "name": "deprecated",
+            "text": "use expanded instead"
+          }],
+        "text": "When true, the component is active."
       },
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
     },
+    "expanded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, item is expanded"
+      },
+      "attribute": "expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "itemTitle": {
       "type": "string",
       "mutable": false,
@@ -175,8 +205,11 @@ export class AccordionItem {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
-        "text": "pass a title for the accordion item"
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use `heading` instead."
+          }],
+        "text": "Specifies a title for the component."
       },
       "attribute": "item-title",
       "reflect": false
@@ -192,12 +225,49 @@ export class AccordionItem {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
-        "text": "pass a title for the accordion item"
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use `description` instead."
+          }],
+        "text": "Specifies a subtitle for the component."
       },
       "attribute": "item-subtitle",
       "reflect": false
     },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies heading text for the component."
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies a description for the component."
+      },
+      "attribute": "description",
+      "reflect": false
+    },
     "icon": {
       "type": "string",
       "mutable": false,
@@ -210,7 +280,7 @@ export class AccordionItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "optionally pass an icon to display - accepts Calcite UI icon names"
+        "text": "Specifies an icon to display - accepts Calcite UI icon names."
       },
       "attribute": "icon",
       "reflect": true

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

@@ -89,9 +89,17 @@
   display: none;
 }
 
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-action-indicator-color: optionally specify the color of the action indicator
+*/
 :host {
   display: flex;
   background-color: transparent;
+  --calcite-action-indicator-color: var(--calcite-ui-brand);
 }
 
 :host([disabled]) {
@@ -209,11 +217,14 @@
   justify-content: flex-end;
 }
 
-:host([alignment=center]) .button .text-container--visible, :host([alignment=end]) .button .text-container--visible {
+: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 {
+:host([scale=s][compact]) .button, 
+:host([scale=m][compact]) .button, 
+:host([scale=l][compact]) .button {
   padding-left: 0px;
   padding-right: 0px;
 }
@@ -230,7 +241,10 @@
   width: 100%;
 }
 
-:host([active]) .button, :host([active]) .button:hover, :host([active]) .button:focus, :host([active][loading]) .button {
+: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);
@@ -247,25 +261,33 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-:host([appearance=clear]) .button:hover, :host([appearance=clear]) .button:focus {
+:host([appearance=clear]) .button:hover, 
+:host([appearance=clear]) .button:focus {
   background-color: transparent;
   box-shadow: 0 0 0 2px var(--calcite-ui-border-1) inset;
 }
 
-:host([active][appearance=clear]) .button, :host([active][appearance=clear]) .button:hover, :host([active][appearance=clear]) .button:focus {
+:host([active][appearance=clear]) .button, 
+:host([active][appearance=clear]) .button:hover, 
+:host([active][appearance=clear]) .button:focus {
   background-color: var(--calcite-ui-foreground-3);
   fill: var(--calcite-ui-text-1);
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=clear][loading]) .button, :host([appearance=clear][disabled]) .button {
+:host([appearance=clear][loading]) .button, 
+:host([appearance=clear][disabled]) .button {
   background-color: transparent;
 }
 
-:host([loading]) .button, :host([loading]) .button:hover, :host([loading]) .button:focus {
+: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 {
+:host([loading]) .button .text-container, 
+:host([loading]) .button:hover .text-container, 
+:host([loading]) .button:focus .text-container {
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
@@ -274,13 +296,17 @@
   margin-inline-end: 0px;
 }
 
-:host([disabled]) .button, :host([disabled]) .button:hover, :host([disabled]) .button:focus {
+: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 {
+: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);
 }
@@ -293,7 +319,7 @@
   width: 0.5rem;
   border-radius: 9999px;
   border-width: 2px;
-  background-color: var(--calcite-ui-brand);
+  background-color: var(--calcite-action-indicator-color);
   border-color: var(--calcite-ui-foreground-1);
   inset-block-end: 0.75rem;
   inset-inline-end: 0.75rem;

package/dist/collection/components/action/action.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.83
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, Host, Method, Prop, h, forceUpdate } from "@stencil/core";
 import { CSS, TEXT } from "./resources";
@@ -19,35 +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";
     /**
@@ -89,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();
   }
   // --------------------------------------------------------------------------
   //
@@ -156,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,
@@ -179,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
@@ -204,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,
@@ -222,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,
@@ -240,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,
@@ -258,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
@@ -275,7 +276,7 @@ export class Action {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates unread changes."
+        "text": "When true, indicates unread changes."
       },
       "attribute": "indicator",
       "reflect": true,
@@ -296,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,
@@ -314,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
@@ -331,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,
@@ -354,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,
@@ -372,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
@@ -407,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.83
+ * 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.83
+ * 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", () => {
@@ -155,11 +155,12 @@ export class ActionBar {
    * @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();
   }
   // --------------------------------------------------------------------------
   //
@@ -203,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,
@@ -221,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,
@@ -239,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
@@ -256,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
@@ -273,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,
@@ -296,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
@@ -318,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
@@ -332,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",

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.83
+ * 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.83
+ * 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;