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

package/dist/collection/components/modal/modal.js

@@ -1,6 +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
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";
@@ -16,11 +17,11 @@ const getFocusableElements = (el) => {
   return queryShadowRoot(el, isHidden, isFocusableExtended);
 };
 /**
- * @slot header - a slot for adding a modal header
- * @slot content - a slot for adding modal content
- * @slot primary - a slot for adding a primary button
- * @slot secondary - a slot for adding a secondary button
- * @slot back - a slot for adding a back button
+ * @slot header - A slot for adding a `calcite-modal` header.
+ * @slot content - A slot for adding `calcite-modal` content.
+ * @slot primary - A slot for adding a primary button.
+ * @slot secondary - A slot for adding a secondary button.
+ * @slot back - A slot for adding a back button.
  */
 export class Modal {
   constructor() {
@@ -29,25 +30,25 @@ export class Modal {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Add the active attribute to open the modal */
+    /** When true, the `calcite-modal` is active. */
     this.active = false;
-    /** Optionally pass a function to run before close */
+    /** Passes a function to run before the `calcite-modal` closes. */
     this.beforeClose = () => Promise.resolve();
-    /** Disables the display a close button within the Modal */
+    /** When true, disables the close button within the `calcite-modal`. */
     this.disableCloseButton = false;
-    /** Disables the closing of the Modal when clicked outside. */
+    /** When true, disables the closing of the `calcite-modal` when clicked outside. */
     this.disableOutsideClose = false;
-    /** Aria label for the close button */
+    /** Accessible label for the close button. */
     this.intlClose = TEXT.close;
-    /** Flag to disable the default close on escape behavior */
+    /** When true, disables the default close on escape behavior. */
     this.disableEscape = false;
-    /** specify the scale of modal, defaults to m */
+    /** Specify the scale of `calcite-modal`. */
     this.scale = "m";
-    /** Set the width of the modal. Can use stock sizes or pass a number (in pixels) */
+    /** Set the width of the `calcite-modal`. Can use scale sizes or pass a number (displays in pixels). */
     this.width = "m";
-    /** Background color of modal content */
+    /** Sets the background color of `calcite-modal` content. */
     this.backgroundColor = "white";
-    /** Turn off spacing around the content area slot */
+    /** When true, disables spacing to the content area slot. */
     this.noPadding = false;
     //--------------------------------------------------------------------------
     //
@@ -86,7 +87,7 @@ export class Modal {
       });
     };
     this.focusFirstElement = () => {
-      focusElement(this.closeButtonEl);
+      focusElement(this.disableCloseButton ? getFocusableElements(this.el)[0] : this.closeButtonEl);
     };
     this.focusLastElement = () => {
       const focusableElements = getFocusableElements(this.el).filter((el) => !el.getAttribute("data-focus-fence"));
@@ -194,7 +195,9 @@ export class Modal {
   //
   //--------------------------------------------------------------------------
   /**
-   * Focus first interactive element
+   * Focus the first interactive element.
+   *
+   * @param el
    * @deprecated use `setFocus` instead.
    */
   async focusElement(el) {
@@ -206,14 +209,21 @@ export class Modal {
   /**
    * Sets focus on the component.
    *
-   * By default, will try to focus on any focusable content. If there is none, it will focus on the close button.
-   * If you want to focus on the close button, you can use the `close-button` focus ID.
+   * By default, tries to focus on focusable content. If there is none, it will focus on the close button.
+   * To focus on the close button, use the `close-button` focus ID.
+   *
+   * @param focusId
    */
   async setFocus(focusId) {
     const closeButton = this.closeButtonEl;
     return focusElement(focusId === "close-button" ? closeButton : getFocusableElements(this.el)[0] || closeButton);
   }
-  /** Set the scroll top of the modal content */
+  /**
+   * Set the scroll top of the `calcite-modal` content.
+   *
+   * @param top
+   * @param left
+   */
   async scrollContent(top = 0, left = 0) {
     if (this.modalContent) {
       if (this.modalContent.scrollTo) {
@@ -270,7 +280,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Add the active attribute to open the modal"
+        "text": "When true, the `calcite-modal` is active."
       },
       "attribute": "active",
       "reflect": true,
@@ -292,10 +302,10 @@ export class Modal {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "Optionally pass a function to run before close"
+        "text": "Passes a function to run before the `calcite-modal` closes."
       },
       "defaultValue": "() => Promise.resolve()"
     },
@@ -311,7 +321,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Disables the display a close button within the Modal"
+        "text": "When true, disables the close button within the `calcite-modal`."
       },
       "attribute": "disable-close-button",
       "reflect": false,
@@ -329,7 +339,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Disables the closing of the Modal when clicked outside."
+        "text": "When true, disables the closing of the `calcite-modal` when clicked outside."
       },
       "attribute": "disable-outside-close",
       "reflect": false,
@@ -347,7 +357,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Aria label for the close button"
+        "text": "Accessible label for the close button."
       },
       "attribute": "intl-close",
       "reflect": false,
@@ -365,30 +375,11 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Prevent the modal from taking up the entire screen on mobile"
+        "text": "When true, prevents the `calcite-modal` from expanding to the entire screen on mobile devices."
       },
       "attribute": "docked",
       "reflect": true
     },
-    "firstFocus": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "HTMLElement",
-        "resolved": "HTMLElement",
-        "references": {
-          "HTMLElement": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specify an element to focus when the modal is first opened"
-      }
-    },
     "disableEscape": {
       "type": "boolean",
       "mutable": false,
@@ -401,7 +392,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Flag to disable the default close on escape behavior"
+        "text": "When true, disables the default close on escape behavior."
       },
       "attribute": "disable-escape",
       "reflect": false,
@@ -424,7 +415,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of modal, defaults to m"
+        "text": "Specify the scale of `calcite-modal`."
       },
       "attribute": "scale",
       "reflect": true,
@@ -447,7 +438,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set the width of the modal. Can use stock sizes or pass a number (in pixels)"
+        "text": "Set the width of the `calcite-modal`. Can use scale sizes or pass a number (displays in pixels)."
       },
       "attribute": "width",
       "reflect": true,
@@ -465,7 +456,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set the modal to always be fullscreen (overrides width)"
+        "text": "Set the `calcite-modal` to always be fullscreen (overrides width)."
       },
       "attribute": "fullscreen",
       "reflect": true
@@ -482,7 +473,7 @@ export class Modal {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Adds a color bar at the top for visual impact,\nUse color to add importance to destructive/workflow dialogs."
+        "text": "Adds a color bar to the top of `calcite-modal` for visual impact.\nUse color to add importance to destructive or workflow dialogs."
       },
       "attribute": "color",
       "reflect": true
@@ -504,7 +495,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Background color of modal content"
+        "text": "Sets the background color of `calcite-modal` content."
       },
       "attribute": "background-color",
       "reflect": true,
@@ -522,7 +513,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Turn off spacing around the content area slot"
+        "text": "When true, disables spacing to the content area slot."
       },
       "attribute": "no-padding",
       "reflect": false,
@@ -540,7 +531,7 @@ export class Modal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when the modal finishes the open animation"
+        "text": "Emits when `calcite-modal` finishes the open animation."
       },
       "complexType": {
         "original": "any",
@@ -555,7 +546,7 @@ export class Modal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when the modal finishes the close animation"
+        "text": "Emits when `calcite-modal` finishes the close animation."
       },
       "complexType": {
         "original": "any",
@@ -568,7 +559,10 @@ export class Modal {
       "complexType": {
         "signature": "(el?: HTMLElement) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "el"
+              }],
             "text": ""
           }],
         "references": {
@@ -582,8 +576,11 @@ export class Modal {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Focus first interactive element",
+        "text": "Focus the first interactive element.",
         "tags": [{
+            "name": "param",
+            "text": "el"
+          }, {
             "name": "deprecated",
             "text": "use `setFocus` instead."
           }]
@@ -593,7 +590,10 @@ export class Modal {
       "complexType": {
         "signature": "(focusId?: \"close-button\") => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -604,18 +604,27 @@ export class Modal {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Sets focus on the component.\n\nBy default, will try to focus on any focusable content. If there is none, it will focus on the close button.\nIf you want to focus on the close button, you can use the `close-button` focus ID.",
-        "tags": []
+        "text": "Sets focus on the component.\n\nBy default, tries to focus on focusable content. If there is none, it will focus on the close button.\nTo focus on the close button, use the `close-button` focus ID.",
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     },
     "scrollContent": {
       "complexType": {
         "signature": "(top?: number, left?: number) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "top"
+              }],
             "text": ""
           }, {
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "left"
+              }],
             "text": ""
           }],
         "references": {
@@ -626,8 +635,14 @@ export class Modal {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Set the scroll top of the modal content",
-        "tags": []
+        "text": "Set the scroll top of the `calcite-modal` content.",
+        "tags": [{
+            "name": "param",
+            "text": "top"
+          }, {
+            "name": "param",
+            "text": "left"
+          }]
       }
     }
   }; }

package/dist/collection/components/modal/resources.js

@@ -1,6 +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
  */
 export const CSS = {
   title: "title",

package/dist/collection/components/notice/notice.css

@@ -83,7 +83,7 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-notice-width: the width of the notice
+* @prop --calcite-notice-width: The width of `calcite-notice`.
 */
 :host([scale=s]) {
   --calcite-notice-spacing-token-small: 0.5rem;
@@ -187,17 +187,15 @@
   width: 100%;
   background-color: var(--calcite-ui-foreground-1);
   opacity: 0;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   max-height: 0;
   text-align: start;
-  transition: var(--calcite-animation-timing);
   border-inline-start: 0px solid;
   box-shadow: 0 0 0 0 transparent;
 }
 
 .notice-close {
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 .notice-close:focus {
   outline: 2px solid var(--calcite-ui-brand);
@@ -236,10 +234,7 @@
 
 .notice-content {
   box-sizing: border-box;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
   display: flex;
@@ -261,10 +256,7 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
 }
@@ -280,10 +272,7 @@
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-sizing: border-box;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
   -webkit-appearance: none;

package/dist/collection/components/notice/notice.js

@@ -1,22 +1,24 @@
 /*!
  * 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
  */
 import { Component, Element, Event, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { StatusIcons } from "../alert/interfaces";
 import { getSlotted, setRequestedIcon } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
-/** Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
+/**
+ * Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
  * notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.
  * They are optionally dismissible - useful for keeping track of whether or not a user has dismissed the notice. You can also choose not
  * to display a notice on page load and set the "active" attribute as needed to contextually provide inline messaging to users.
  */
 /**
- * @slot title - Title of the notice (optional)
- * @slot message - Main text of the notice
- * @slot link - Optional action to take from the notice (undo, try again, link to page, etc.)
- * @slot actions-end - Allows adding a `calcite-action` at the end of the notice. It is recommended to use 2 or less actions.
+ * @slot title - A slot for adding the title (optional).
+ * @slot message - A slot for adding the message.
+ * @slot link - A slot for adding actions to take, such as: undo, try again, link to page, etc. (optional).
+ * @slot actions-end - A slot for adding actions to the end of the `calcite-notice` (optional). It is recommended to use two or less actions.
  */
 export class Notice {
   constructor() {
@@ -25,19 +27,21 @@ export class Notice {
     //  Properties
     //
     //---------------------------------------------------------------------------
-    /** Is the notice currently active or not */
+    /** When true, the `calcite-notice` is active. */
     this.active = false;
-    /** Color for the notice (will apply to top border and icon) */
+    /** The color for the `calcite-notice`. Color will apply to top border and icon. */
     this.color = "blue";
-    /** Optionally show a button the user can click to dismiss the notice */
+    /** Shows a button the user can click to dismiss the `calcite-notice`. */
     this.dismissible = false;
-    /** String for the close button.
+    /**
+     * Accessible label for the close button.
+     *
      * @default "Close"
      */
     this.intlClose = TEXT.close;
-    /** specify the scale of the notice, defaults to m */
+    /** Specify the scale of `calcite-notice`. */
     this.scale = "m";
-    /** specify the width of the notice, defaults to auto */
+    /** Specify the width of the `calcite-notice`. */
     this.width = "auto";
     //--------------------------------------------------------------------------
     //
@@ -87,7 +91,7 @@ export class Notice {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** Sets focus on the component. */
+  /** Sets focus on the `calcite-notice`. */
   async setFocus() {
     const noticeLinkEl = this.el.querySelector("calcite-link");
     if (!this.closeButton && !noticeLinkEl) {
@@ -121,7 +125,7 @@ export class Notice {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Is the notice currently active or not"
+        "text": "When true, the `calcite-notice` is active."
       },
       "attribute": "active",
       "reflect": true,
@@ -144,7 +148,7 @@ export class Notice {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Color for the notice (will apply to top border and icon)"
+        "text": "The color for the `calcite-notice`. Color will apply to top border and icon."
       },
       "attribute": "color",
       "reflect": true,
@@ -159,10 +163,10 @@ export class Notice {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "Optionally show a button the user can click to dismiss the notice"
+        "text": "Shows a button the user can click to dismiss the `calcite-notice`."
       },
       "attribute": "dismissible",
       "reflect": true,
@@ -180,7 +184,7 @@ export class Notice {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "when used as a boolean set to true, show a default recommended icon. You can\nalso pass a calcite-ui-icon name to this prop to display a requested icon"
+        "text": "When present, shows a default recommended icon. You can\nalso pass a calcite-ui-icon name to display a requested icon."
       },
       "attribute": "icon",
       "reflect": true
@@ -200,7 +204,7 @@ export class Notice {
             "name": "default",
             "text": "\"Close\""
           }],
-        "text": "String for the close button."
+        "text": "Accessible label for the close button."
       },
       "attribute": "intl-close",
       "reflect": false,
@@ -223,7 +227,7 @@ export class Notice {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of the notice, defaults to m"
+        "text": "Specify the scale of `calcite-notice`."
       },
       "attribute": "scale",
       "reflect": true,
@@ -246,7 +250,7 @@ export class Notice {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the width of the notice, defaults to auto"
+        "text": "Specify the width of the `calcite-notice`."
       },
       "attribute": "width",
       "reflect": true,
@@ -261,7 +265,7 @@ export class Notice {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when an notice is closed"
+        "text": "Fired when `calcite-notice` is closed."
       },
       "complexType": {
         "original": "any",
@@ -276,7 +280,7 @@ export class Notice {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when an Notice is opened"
+        "text": "Fired when `calcite-notice` is opened."
       },
       "complexType": {
         "original": "any",
@@ -297,7 +301,7 @@ export class Notice {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Sets focus on the component.",
+        "text": "Sets focus on the `calcite-notice`.",
         "tags": []
       }
     }

package/dist/collection/components/notice/resources.js

@@ -1,6 +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
  */
 export const TEXT = {
   close: "Close"

package/dist/collection/components/option/option.js

@@ -1,6 +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
  */
 import { Component, h, Prop, Element, Event, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
@@ -17,14 +18,14 @@ export class Option {
     this.disabled = false;
     this.mutationObserver = createObserver("mutation", () => {
       this.ensureTextContentDependentProps();
-      this.calciteOptionChange.emit();
+      this.calciteInternalOptionChange.emit();
     });
   }
   handlePropChange(_newValue, _oldValue, propName) {
     if (propName === "label" || propName === "value") {
       this.ensureTextContentDependentProps();
     }
-    this.calciteOptionChange.emit();
+    this.calciteInternalOptionChange.emit();
   }
   //--------------------------------------------------------------------------
   //
@@ -149,8 +150,8 @@ export class Option {
     }
   }; }
   static get events() { return [{
-      "method": "calciteOptionChange",
-      "name": "calciteOptionChange",
+      "method": "calciteInternalOptionChange",
+      "name": "calciteInternalOptionChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

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

@@ -1,6 +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
  */
 import { Component, h, Prop, Watch, Event, Fragment } from "@stencil/core";
 /**
@@ -19,7 +20,7 @@ export class OptionGroup {
     this.disabled = false;
   }
   handlePropChange() {
-    this.calciteOptionGroupChange.emit();
+    this.calciteInternalOptionGroupChange.emit();
   }
   //--------------------------------------------------------------------------
   //
@@ -77,8 +78,8 @@ export class OptionGroup {
     }
   }; }
   static get events() { return [{
-      "method": "calciteOptionGroupChange",
-      "name": "calciteOptionGroupChange",
+      "method": "calciteInternalOptionGroupChange",
+      "name": "calciteInternalOptionGroupChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,