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

package/dist/collection/components/option/option.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, h, Prop, Element, Event, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
@@ -13,7 +13,7 @@ export class Option {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, it prevents the option from being selected.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     this.mutationObserver = createObserver("mutation", () => {
@@ -91,7 +91,7 @@ export class Option {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, it prevents the option from being selected."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -109,7 +109,7 @@ export class Option {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The option label."
+        "text": "Accessible name for the component."
       },
       "attribute": "label",
       "reflect": false
@@ -126,7 +126,7 @@ export class Option {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, this option is selected. Otherwise, false."
+        "text": "When true, the component is selected."
       },
       "attribute": "selected",
       "reflect": true
@@ -143,7 +143,7 @@ export class Option {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The value associated with this option."
+        "text": "The component's value."
       },
       "attribute": "value",
       "reflect": false

package/dist/collection/components/option-group/option-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.83
+ * v1.0.0-beta.84
  */
 import { Component, h, Prop, Watch, Event, Fragment } from "@stencil/core";
 /**
@@ -15,7 +15,7 @@ export class OptionGroup {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, it prevents selection from any of its associated options.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
   }
@@ -53,7 +53,7 @@ export class OptionGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, it prevents selection from any of its associated options."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -71,7 +71,7 @@ export class OptionGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The group label. This property is required."
+        "text": "Accessible name for the component."
       },
       "attribute": "label",
       "reflect": false

package/dist/collection/components/pagination/pagination.css

@@ -83,17 +83,18 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-pagination-spacing: the amount of padding around each pagination item
+* @prop --calcite-pagination-spacing: The amount of padding around each pagination item.
 */
 :host([scale=s]) {
   --calcite-pagination-spacing: 0.25rem 0.5rem;
 }
-:host([scale=s]) .previous, :host([scale=s]) .next, :host([scale=s]) .page {
+:host([scale=s]) .previous,  :host([scale=s]) .next,  :host([scale=s]) .page {
   height: 1.5rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
-:host([scale=s]) .previous, :host([scale=s]) .next {
+:host([scale=s]) .previous, 
+:host([scale=s]) .next {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
@@ -101,12 +102,13 @@
 :host([scale=m]) {
   --calcite-pagination-spacing: 0.5rem 0.75rem;
 }
-:host([scale=m]) .previous, :host([scale=m]) .next, :host([scale=m]) .page {
+:host([scale=m]) .previous,  :host([scale=m]) .next,  :host([scale=m]) .page {
   height: 2rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
-:host([scale=m]) .previous, :host([scale=m]) .next {
+:host([scale=m]) .previous, 
+:host([scale=m]) .next {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
@@ -114,12 +116,13 @@
 :host([scale=l]) {
   --calcite-pagination-spacing: 0.75rem 1rem;
 }
-:host([scale=l]) .previous, :host([scale=l]) .next, :host([scale=l]) .page {
+:host([scale=l]) .previous,  :host([scale=l]) .next,  :host([scale=l]) .page {
   height: 2.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
-:host([scale=l]) .previous, :host([scale=l]) .next {
+:host([scale=l]) .previous, 
+:host([scale=l]) .next {
   padding-left: 1rem;
   padding-right: 1rem;
 }
@@ -137,7 +140,9 @@
   outline-offset: -2px;
 }
 
-.previous, .next, .page {
+.previous, 
+.next, 
+.page {
   box-sizing: border-box;
   display: flex;
   cursor: pointer;
@@ -152,7 +157,9 @@
   border-top: 2px solid transparent;
   border-bottom: 2px solid transparent;
 }
-.previous:hover, .next:hover, .page:hover {
+.previous:hover, 
+.next:hover, 
+.page:hover {
   color: var(--calcite-ui-text-1);
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
@@ -166,18 +173,22 @@
   border-bottom-color: var(--calcite-ui-brand);
 }
 
-.previous:hover, .next:hover {
+.previous:hover, 
+.next:hover {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-brand);
 }
-.previous:active, .next:active {
+.previous:active, 
+.next:active {
   background-color: var(--calcite-ui-foreground-3);
 }
-.previous.is-disabled, .next.is-disabled {
+.previous.is-disabled, 
+.next.is-disabled {
   pointer-events: none;
   background-color: transparent;
 }
-.previous.is-disabled > calcite-icon, .next.is-disabled > calcite-icon {
+.previous.is-disabled > calcite-icon, 
+.next.is-disabled > calcite-icon {
   opacity: var(--calcite-ui-opacity-disabled);
 }
 

package/dist/collection/components/pagination/pagination.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, Prop, Method, Fragment, State } from "@stencil/core";
 import { unwatchGlobalAttributes, watchGlobalAttributes } from "../../utils/globalAttributes";
@@ -15,25 +15,25 @@ export class Pagination {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** number of items per page */
+    /** Specifies the number of items per page. */
     this.num = 20;
-    /** index of item that should begin the page */
+    /** Specifies the starting item number. */
     this.start = 1;
-    /** total number of items */
+    /** Specifies the total number of items. */
     this.total = 0;
     /**
-     * Used as an accessible label (aria-label) for the next button
+     * Accessible name for the component's next button.
      *
      * @default "Next"
      */
     this.textLabelNext = TEXT.nextLabel;
     /**
-     * Used as an accessible label (aria-label) of the previous button
+     * Accessible name for the component's previous button.
      *
      * @default "Previous"
      */
     this.textLabelPrevious = TEXT.previousLabel;
-    /** The scale of the pagination */
+    /** Specifies the size of the component. */
     this.scale = "m";
     //--------------------------------------------------------------------------
     //
@@ -66,11 +66,11 @@ export class Pagination {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
-  /** Go to the next page of results */
+  /** Go to the next page of results. */
   async nextPage() {
     this.start = Math.min(this.getLastStart(), this.start + this.num);
   }
-  /** Go to the previous page of results */
+  /** Go to the previous page of results. */
   async previousPage() {
     this.start = Math.max(1, this.start - this.num);
   }
@@ -201,7 +201,7 @@ export class Pagination {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "number of items per page"
+        "text": "Specifies the number of items per page."
       },
       "attribute": "num",
       "reflect": false,
@@ -219,7 +219,7 @@ export class Pagination {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "index of item that should begin the page"
+        "text": "Specifies the starting item number."
       },
       "attribute": "start",
       "reflect": false,
@@ -237,7 +237,7 @@ export class Pagination {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "total number of items"
+        "text": "Specifies the total number of items."
       },
       "attribute": "total",
       "reflect": false,
@@ -258,7 +258,7 @@ export class Pagination {
             "name": "default",
             "text": "\"Next\""
           }],
-        "text": "Used as an accessible label (aria-label) for the next button"
+        "text": "Accessible name for the component's next button."
       },
       "attribute": "text-label-next",
       "reflect": false,
@@ -279,7 +279,7 @@ export class Pagination {
             "name": "default",
             "text": "\"Previous\""
           }],
-        "text": "Used as an accessible label (aria-label) of the previous button"
+        "text": "Accessible name for the component's previous button."
       },
       "attribute": "text-label-previous",
       "reflect": false,
@@ -302,7 +302,7 @@ export class Pagination {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The scale of the pagination"
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -323,7 +323,7 @@ export class Pagination {
             "name": "deprecated",
             "text": "use calcitePaginationChange instead"
           }],
-        "text": "Emitted whenever the selected page changes."
+        "text": "Emits when the selected page changes."
       },
       "complexType": {
         "original": "PaginationDetail",
@@ -343,9 +343,9 @@ export class Pagination {
       "docs": {
         "tags": [{
             "name": "see",
-            "text": "[PaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/pagination/calcite-pagination.tsx#L18)"
+            "text": "[PaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/pagination/pagination.tsx#L23)"
           }],
-        "text": "Emitted whenever the selected page changes."
+        "text": "Emits when the selected page changes."
       },
       "complexType": {
         "original": "PaginationDetail",
@@ -370,7 +370,7 @@ export class Pagination {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Go to the next page of results",
+        "text": "Go to the next page of results.",
         "tags": []
       }
     },
@@ -386,7 +386,7 @@ export class Pagination {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Go to the previous page of results",
+        "text": "Go to the previous page of results.",
         "tags": []
       }
     }

package/dist/collection/components/pagination/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 = {
   page: "page",

package/dist/collection/components/panel/panel.css

@@ -94,9 +94,9 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-panel-max-height: the maximum height of the panel
-* @prop --calcite-panel-max-width: the maximum width of the panel
-* @prop --calcite-panel-min-width: the minimum width of the panel
+* @prop --calcite-panel-max-height: The maximum height of the component.
+* @prop --calcite-panel-max-width: The maximum width of the component.
+* @prop --calcite-panel-min-width: The minimum width of the component.
 */
 :host {
   position: relative;
@@ -160,7 +160,8 @@ h3.heading {
   line-height: 1.25rem;
 }
 
-h4.heading, h5.heading {
+h4.heading, 
+h5.heading {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
@@ -215,7 +216,8 @@ h4.heading, h5.heading {
   display: none;
 }
 
-:host([loading]) .container, :host([disabled]) .container {
+:host([loading]) .container, 
+:host([disabled]) .container {
   position: relative;
   z-index: 1;
 }
@@ -243,7 +245,8 @@ h4.heading, h5.heading {
   padding-bottom: 0.875rem;
   margin-inline-end: auto;
 }
-.header-content .heading, .header-content .summary {
+.header-content .heading, 
+.header-content .description {
   display: block;
   overflow-wrap: break-word;
   padding: 0px;
@@ -260,7 +263,7 @@ h4.heading, h5.heading {
 .header-content .heading:only-child {
   margin-bottom: 0px;
 }
-.header-content .summary {
+.header-content .description {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   color: var(--calcite-ui-text-2);

package/dist/collection/components/panel/panel.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, Method, Prop, Watch, h, Fragment } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
@@ -13,10 +13,10 @@ import { updateHostInteraction } from "../../utils/interactive";
 import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding custom content.
- * @slot header-actions-start - A slot for adding actions or content to the start side of the panel header.
- * @slot header-actions-end - A slot for adding actions or content to the end side of the panel header.
+ * @slot header-actions-start - A slot for adding actions or content to the start side of the header.
+ * @slot header-actions-end - A slot for adding actions or content to the end side of the header.
  * @slot header-content - A slot for adding custom content to the header.
- * @slot header-menu-actions - A slot for adding an overflow menu with actions inside a dropdown.
+ * @slot header-menu-actions - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
  * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
  * @slot footer-actions - A slot for adding buttons to the footer.
  * @slot footer - A slot for adding custom content to the footer.
@@ -29,27 +29,27 @@ export class Panel {
     //
     // --------------------------------------------------------------------------
     /**
-     * Hides the panel.
+     * When true, hides the component.
      */
     this.dismissed = 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;
     /**
-     * Displays a close button in the trailing side of the header.
+     * When true, a close button is added to the component.
      */
     this.dismissible = false;
     /**
-     * Shows a back button in the header.
+     * When true, displays a back button in the header.
      */
     this.showBackButton = false;
     /**
-     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     * When true, a busy indicator is displayed.
      */
     this.loading = false;
     /**
-     * Opens the action menu.
+     * When true, the action menu items in the `header-menu-actions` slot are open.
      */
     this.menuOpen = false;
     this.resizeObserver = createObserver("resize", () => this.resizeHandler());
@@ -148,7 +148,7 @@ export class Panel {
     (_c = this.containerEl) === null || _c === void 0 ? void 0 : _c.focus();
   }
   /**
-   * Scrolls panel content to a particular set of coordinates.
+   * Scrolls the component's content to a specified set of coordinates.
    *
    * ```
    *   myCalcitePanel.scrollContentTo({
@@ -178,12 +178,12 @@ export class Panel {
     return showBackButton ? (h("calcite-action", { "aria-label": label, class: CSS.backButton, icon: icon, key: "back-button", onClick: backButtonClick, ref: this.setBackRef, scale: "s", slot: SLOTS.headerActionsStart, text: label })) : null;
   }
   renderHeaderContent() {
-    const { heading, headingLevel, summary } = this;
+    const { heading, headingLevel, summary, description } = this;
     const headingNode = heading ? (h(Heading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, heading)) : null;
-    const summaryNode = summary ? h("span", { class: CSS.summary }, summary) : null;
-    return headingNode || summaryNode ? (h("div", { class: CSS.headerContent, key: "header-content" },
+    const descriptionNode = description || summary ? h("span", { class: CSS.description }, description || summary) : null;
+    return headingNode || descriptionNode ? (h("div", { class: CSS.headerContent, key: "header-content" },
       headingNode,
-      summaryNode)) : null;
+      descriptionNode)) : null;
   }
   /**
    * Allows user to override the entire header-content node.
@@ -288,7 +288,7 @@ export class Panel {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Hides the panel."
+        "text": "When true, hides the component."
       },
       "attribute": "dismissed",
       "reflect": true,
@@ -325,7 +325,7 @@ export class Panel {
       "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,
@@ -343,7 +343,7 @@ export class Panel {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Displays a close button in the trailing side of the header."
+        "text": "When true, a close button is added to the component."
       },
       "attribute": "dismissible",
       "reflect": true,
@@ -366,7 +366,7 @@ export class Panel {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Number at which section headings should start for this component."
+        "text": "Specifies the number at which section headings should start."
       },
       "attribute": "heading-level",
       "reflect": false
@@ -383,7 +383,7 @@ export class Panel {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Shows a back button in the header."
+        "text": "When true, displays a back button in the header."
       },
       "attribute": "show-back-button",
       "reflect": true,
@@ -401,7 +401,7 @@ export class Panel {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "'Back' text string."
+        "text": "Accessible name for the component's back button. The back button will only be shown when 'showBackButton' is true."
       },
       "attribute": "intl-back",
       "reflect": false
@@ -423,7 +423,7 @@ export class Panel {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Specifies the maximum height of the panel."
+        "text": "Specifies the maximum height of the component."
       },
       "attribute": "height-scale",
       "reflect": true
@@ -445,7 +445,7 @@ export class Panel {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "This sets width of the panel."
+        "text": "Specifies the width of the component."
       },
       "attribute": "width-scale",
       "reflect": true
@@ -462,7 +462,7 @@ export class Panel {
       "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,
@@ -480,7 +480,7 @@ export class Panel {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "'Close' text string for the close button. The close button will only be shown when 'dismissible' is true."
+        "text": "Accessible name for the component's close button. The close button will only be shown when 'dismissible' is true."
       },
       "attribute": "intl-close",
       "reflect": false
@@ -497,7 +497,7 @@ export class Panel {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "'Options' text string for the actions menu."
+        "text": "Accessible name for the component's actions menu."
       },
       "attribute": "intl-options",
       "reflect": false
@@ -514,7 +514,7 @@ export class Panel {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Heading text."
+        "text": "The component header text."
       },
       "attribute": "heading",
       "reflect": false
@@ -530,12 +530,32 @@ export class Panel {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use description instead"
+          }],
         "text": "Summary text. A description displayed underneath the heading."
       },
       "attribute": "summary",
       "reflect": false
     },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A description for the component."
+      },
+      "attribute": "description",
+      "reflect": false
+    },
     "menuOpen": {
       "type": "boolean",
       "mutable": false,
@@ -548,7 +568,7 @@ export class Panel {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Opens the action menu."
+        "text": "When true, the action menu items in the `header-menu-actions` slot are open."
       },
       "attribute": "menu-open",
       "reflect": true,
@@ -563,7 +583,7 @@ export class Panel {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the close button has been clicked."
+        "text": "Fires when the close button is clicked."
       },
       "complexType": {
         "original": "any",
@@ -581,7 +601,7 @@ export class Panel {
             "name": "deprecated",
             "text": "use calcitePanelDismiss instead."
           }],
-        "text": "Emitted when the close button has been clicked."
+        "text": "Fires when the close button is clicked."
       },
       "complexType": {
         "original": "any",
@@ -596,7 +616,7 @@ export class Panel {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the content has been scrolled."
+        "text": "Fires when the content is scrolled."
       },
       "complexType": {
         "original": "any",
@@ -611,7 +631,7 @@ export class Panel {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the back button has been clicked."
+        "text": "Fires when the back button is clicked."
       },
       "complexType": {
         "original": "any",
@@ -666,7 +686,7 @@ export class Panel {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Scrolls panel content to a particular set of coordinates.\n\n```\n  myCalcitePanel.scrollContentTo({\n    left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\n    top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\n    behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\n  });\n```",
+        "text": "Scrolls the component's content to a specified set of coordinates.\n\n```\n  myCalcitePanel.scrollContentTo({\n    left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.\n    top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element\n    behavior: \"auto\" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).\n  });\n```",
         "tags": [{
             "name": "param",
             "text": "options"