@esri/calcite-components 1.0.0-next.555 → 1.0.0-next.558

package/dist/collection/components/split-button/split-button.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-next.555
+ * v1.0.0-next.558
  */
 import { Component, Element, Event, h, Prop, Watch } from "@stencil/core";
 import { CSS } from "./resources";
@@ -11,30 +11,34 @@ import { updateHostInteraction } from "../../utils/interactive";
  */
 export class SplitButton {
   constructor() {
-    /** specify the appearance style of the button, defaults to solid. */
+    /** Specifies the appearance style of the component. */
     this.appearance = "solid";
-    /** specify the color of the control, defaults to blue */
+    /** Specifies the color of the component. */
     this.color = "blue";
-    /** is the control disabled  */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
     /**
-     * Is the dropdown currently active or not
+     * When true, the component is active.
      *
      * @internal
      */
     this.active = false;
-    /** specify the icon used for the dropdown menu, defaults to chevron */
+    /** Specifies the icon used for the dropdown menu. */
     this.dropdownIconType = "chevron";
     /**
-      optionally add a calcite-loader component to the control,
-     disabling interaction. with the primary button
+      When true, a busy indicator is displayed on the primary button.
      */
     this.loading = false;
-    /** Describes the type of positioning to use for the dropdown. If your element is in a fixed container, use the 'fixed' value. */
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     *
+     */
     this.overlayPositioning = "absolute";
-    /** specify the scale of the control, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
-    /** specify the width of the button, defaults to auto */
+    /** Specifies the width of the component. */
     this.width = "auto";
     this.calciteSplitButtonPrimaryClickHandler = (event) => this.calciteSplitButtonPrimaryClick.emit(event);
     this.calciteSplitButtonSecondaryClickHandler = (event) => this.calciteSplitButtonSecondaryClick.emit(event);
@@ -108,7 +112,7 @@ export class SplitButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the appearance style of the button, defaults to solid."
+        "text": "Specifies the appearance style of the component."
       },
       "attribute": "appearance",
       "reflect": true,
@@ -131,7 +135,7 @@ export class SplitButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the color of the control, defaults to blue"
+        "text": "Specifies the color of the component."
       },
       "attribute": "color",
       "reflect": true,
@@ -149,7 +153,7 @@ export class SplitButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "is the control disabled"
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -170,7 +174,7 @@ export class SplitButton {
             "name": "internal",
             "text": undefined
           }],
-        "text": "Is the dropdown currently active or not"
+        "text": "When true, the component is active."
       },
       "attribute": "active",
       "reflect": true,
@@ -193,7 +197,7 @@ export class SplitButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the icon used for the dropdown menu, defaults to chevron"
+        "text": "Specifies the icon used for the dropdown menu."
       },
       "attribute": "dropdown-icon-type",
       "reflect": true,
@@ -211,7 +215,7 @@ export class SplitButton {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "aria label for overflow button"
+        "text": "Accessible name for the dropdown menu."
       },
       "attribute": "dropdown-label",
       "reflect": true
@@ -228,7 +232,7 @@ export class SplitButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "optionally add a calcite-loader component to the control,\ndisabling interaction. with the primary button"
+        "text": "When true, a busy indicator is displayed on the primary button."
       },
       "attribute": "loading",
       "reflect": true,
@@ -251,7 +255,7 @@ export class SplitButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Describes the type of positioning to use for the dropdown. If your element is in a fixed container, use the 'fixed' value."
+        "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
       },
       "attribute": "overlay-positioning",
       "reflect": false,
@@ -269,7 +273,7 @@ export class SplitButton {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "optionally pass an icon to display at the end of the primary button - accepts Calcite UI icon names"
+        "text": "Specifies an icon to display at the end of the primary button - accepts Calcite UI icon names."
       },
       "attribute": "primary-icon-end",
       "reflect": true
@@ -291,7 +295,7 @@ export class SplitButton {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "flip the primary icon(s) in rtl"
+        "text": "When true, the primary button icon will be flipped when the element direction is right-to-left (\"rtl\")."
       },
       "attribute": "primary-icon-flip-rtl",
       "reflect": true
@@ -308,7 +312,7 @@ export class SplitButton {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "optionally pass an icon to display at the start of the primary button - accepts Calcite UI icon names"
+        "text": "Specifies an icon to display at the start of the primary button - accepts Calcite UI icon names."
       },
       "attribute": "primary-icon-start",
       "reflect": true
@@ -325,7 +329,7 @@ export class SplitButton {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "optionally pass an aria-label for the primary button"
+        "text": "Accessible name for the primary button."
       },
       "attribute": "primary-label",
       "reflect": true
@@ -342,7 +346,7 @@ export class SplitButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "text for primary action button"
+        "text": "Text displayed in the primary button."
       },
       "attribute": "primary-text",
       "reflect": true
@@ -364,7 +368,7 @@ export class SplitButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of the control, defaults to m"
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -387,7 +391,7 @@ export class SplitButton {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the width of the button, defaults to auto"
+        "text": "Specifies the width of the component."
       },
       "attribute": "width",
       "reflect": true,
@@ -402,7 +406,7 @@ export class SplitButton {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "fired when the primary button is clicked\n\n**Note:** The event payload is deprecated, please use separate mouse event listeners to get info about click."
+        "text": "Fires when the primary button is clicked.\n\n**Note:** The event payload is deprecated, use separate mouse event listeners to get info about click."
       },
       "complexType": {
         "original": "DeprecatedEventPayload",
@@ -422,7 +426,7 @@ export class SplitButton {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "fired when the secondary button is clicked\n\n**Note:** The event payload is deprecated, please use separate mouse event listeners to get info about click."
+        "text": "Fires when the dropdown menu is clicked.\n\n**Note:** The event payload is deprecated, use separate mouse event listeners to get info about click."
       },
       "complexType": {
         "original": "DeprecatedEventPayload",

package/dist/collection/components/stepper/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * 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-next.555
+ * v1.0.0-next.558
  */
 export {};

package/dist/collection/components/stepper/stepper.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-next.555
+ * v1.0.0-next.558
  */
 import { Component, Element, Event, h, Listen, Method, Prop } from "@stencil/core";
 import { focusElement } from "../../utils/dom";
@@ -15,13 +15,13 @@ export class Stepper {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** optionally display a status icon next to the step title */
+    /** When true, displays a status icon in the `calcite-stepper-item` heading. */
     this.icon = false;
-    /** specify the layout of stepper, defaults to horizontal */
+    /** Defines the layout of the component. */
     this.layout = "horizontal";
-    /** optionally display the number next to the step title */
+    /** When true, displays the step number in the `calcite-stepper-item` heading. */
     this.numbered = false;
-    /** specify the scale of stepper, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
     //--------------------------------------------------------------------------
     //
@@ -123,7 +123,7 @@ export class Stepper {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** set the next step as active */
+  /** Set the next `calcite-stepper-item` as active. */
   async nextStep() {
     const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition + 1, "next");
     if (typeof enabledStepIndex !== "number") {
@@ -131,7 +131,7 @@ export class Stepper {
     }
     this.updateStep(enabledStepIndex);
   }
-  /** set the previous step as active */
+  /** Set the previous `calcite-stepper-item` as active. */
   async prevStep() {
     const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition - 1, "previous");
     if (typeof enabledStepIndex !== "number") {
@@ -140,7 +140,7 @@ export class Stepper {
     this.updateStep(enabledStepIndex);
   }
   /**
-   * set the requested step as active
+   * Set a specified `calcite-stepper-item` as active.
    *
    * @param step
    */
@@ -150,7 +150,7 @@ export class Stepper {
       this.updateStep(position);
     }
   }
-  /** set the first step as active */
+  /** Set the first `calcite-stepper-item` as active. */
   async startStep() {
     const enabledStepIndex = this.getEnabledStepIndex(0, "next");
     if (typeof enabledStepIndex !== "number") {
@@ -158,7 +158,7 @@ export class Stepper {
     }
     this.updateStep(enabledStepIndex);
   }
-  /** set the last step as active */
+  /** Set the last `calcite-stepper-item` as active. */
   async endStep() {
     const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, "previous");
     if (typeof enabledStepIndex !== "number") {
@@ -237,7 +237,7 @@ export class Stepper {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "optionally display a status icon next to the step title"
+        "text": "When true, displays a status icon in the `calcite-stepper-item` heading."
       },
       "attribute": "icon",
       "reflect": true,
@@ -263,7 +263,7 @@ export class Stepper {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the layout of stepper, defaults to horizontal"
+        "text": "Defines the layout of the component."
       },
       "attribute": "layout",
       "reflect": true,
@@ -281,7 +281,7 @@ export class Stepper {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "optionally display the number next to the step title"
+        "text": "When true, displays the step number in the `calcite-stepper-item` heading."
       },
       "attribute": "numbered",
       "reflect": true,
@@ -304,7 +304,7 @@ export class Stepper {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of stepper, defaults to m"
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -319,7 +319,7 @@ export class Stepper {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "This event fires when the active stepper item has changed."
+        "text": "Fires when the active `calcite-stepper-item` changes."
       },
       "complexType": {
         "original": "StepperItemChangeEventDetail",
@@ -342,7 +342,7 @@ export class Stepper {
             "name": "internal",
             "text": undefined
           }],
-        "text": "This event fires when the active stepper item has changed."
+        "text": "Fires when the active `calcite-stepper-item` changes."
       },
       "complexType": {
         "original": "StepperItemChangeEventDetail",
@@ -368,7 +368,7 @@ export class Stepper {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "set the next step as active",
+        "text": "Set the next `calcite-stepper-item` as active.",
         "tags": []
       }
     },
@@ -384,7 +384,7 @@ export class Stepper {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "set the previous step as active",
+        "text": "Set the previous `calcite-stepper-item` as active.",
         "tags": []
       }
     },
@@ -406,7 +406,7 @@ export class Stepper {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "set the requested step as active",
+        "text": "Set a specified `calcite-stepper-item` as active.",
         "tags": [{
             "name": "param",
             "text": "step"
@@ -425,7 +425,7 @@ export class Stepper {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "set the first step as active",
+        "text": "Set the first `calcite-stepper-item` as active.",
         "tags": []
       }
     },
@@ -441,7 +441,7 @@ export class Stepper {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "set the last step as active",
+        "text": "Set the last `calcite-stepper-item` as active.",
         "tags": []
       }
     }

package/dist/collection/components/stepper-item/stepper-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-next.555
+ * v1.0.0-next.558
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -16,25 +16,25 @@ export class StepperItem {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** is the step active */
+    /** When true, the component is active. */
     this.active = false;
-    /** has the step been completed */
+    /** When true, the component's workflow has been completed. */
     this.complete = false;
-    /** does the step contain an error that needs to be resolved by the user */
+    /** When true, the component contains an error that requires resolution from the user. */
     this.error = false;
-    /** is the step disabled and not navigable to by a user */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
     // internal props inherited from wrapping calcite-stepper
-    /** pass a title for the stepper item */
+    /** Defines the layout of the component. */
     /** @internal */
     this.layout = "horizontal";
-    /** should the items display an icon based on status */
+    /** When true, displays a status icon in the `calcite-stepper-item` heading. */
     /** @internal */
     this.icon = false;
-    /** optionally display the step number next to the title and subtitle */
+    /** When true, displays the step number in the `calcite-stepper-item` heading. */
     /** @internal */
     this.numbered = false;
-    /** the scale of the item */
+    /** Specifies the size of the component. */
     /** @internal */
     this.scale = "m";
     //--------------------------------------------------------------------------
@@ -189,7 +189,7 @@ export class StepperItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "is the step active"
+        "text": "When true, the component is active."
       },
       "attribute": "active",
       "reflect": true,
@@ -207,7 +207,7 @@ export class StepperItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "has the step been completed"
+        "text": "When true, the component's workflow has been completed."
       },
       "attribute": "complete",
       "reflect": true,
@@ -225,7 +225,7 @@ export class StepperItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "does the step contain an error that needs to be resolved by the user"
+        "text": "When true, the component contains an error that requires resolution from the user."
       },
       "attribute": "error",
       "reflect": false,
@@ -243,7 +243,7 @@ export class StepperItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "is the step disabled and not navigable to by a user"
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -262,9 +262,9 @@ export class StepperItem {
       "docs": {
         "tags": [{
             "name": "deprecated",
-            "text": "use heading instead"
+            "text": "use \"heading\" instead."
           }],
-        "text": "pass a title for the stepper item"
+        "text": "The component header text."
       },
       "attribute": "item-title",
       "reflect": false
@@ -281,7 +281,7 @@ export class StepperItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "stepper item heading"
+        "text": "The component header text."
       },
       "attribute": "heading",
       "reflect": false
@@ -299,9 +299,9 @@ export class StepperItem {
       "docs": {
         "tags": [{
             "name": "deprecated",
-            "text": "use description instead"
+            "text": "use \"description\" instead."
           }],
-        "text": "pass a title for the stepper item"
+        "text": "A description for the component. Displays below the header text."
       },
       "attribute": "item-subtitle",
       "reflect": false
@@ -318,7 +318,7 @@ export class StepperItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "stepper item description"
+        "text": "A description for the component. Displays below the header text."
       },
       "attribute": "description",
       "reflect": false

package/dist/collection/components/switch/switch.js

@@ -1,13 +1,14 @@
 /*!
  * 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-next.555
+ * v1.0.0-next.558
  */
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
+import { isActivationKey } from "../../utils/key";
 export class Switch {
   constructor() {
     //--------------------------------------------------------------------------
@@ -15,17 +16,17 @@ export class Switch {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** True if the switch is disabled */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
-    /** The scale of the switch */
+    /** Specifies the size of the component. */
     this.scale = "m";
     /**
-     * True if the switch is initially on
+     * When true, the component is checked.
      *
-     * @deprecated use 'checked' instead.
+     * @deprecated use "checked" instead.
      */
     this.switched = false;
-    /** True if the switch is initially on */
+    /** When true, the component is checked. */
     this.checked = false;
     //--------------------------------------------------------------------------
     //
@@ -33,8 +34,7 @@ export class Switch {
     //
     //--------------------------------------------------------------------------
     this.keyDownHandler = (event) => {
-      const key = event.key;
-      if (!this.disabled && (key === " " || key === "Enter")) {
+      if (!this.disabled && isActivationKey(event.key)) {
         this.toggle();
         event.preventDefault();
       }
@@ -124,7 +124,7 @@ export class Switch {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "True if the switch is disabled"
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -142,7 +142,7 @@ export class Switch {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Applies to the aria-label attribute on the switch"
+        "text": "Accessible name for the component."
       },
       "attribute": "label",
       "reflect": false
@@ -159,7 +159,7 @@ export class Switch {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The name of the switch input"
+        "text": "Specifies the name of the component on form submission."
       },
       "attribute": "name",
       "reflect": true
@@ -181,7 +181,7 @@ export class Switch {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The scale of the switch"
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -200,9 +200,9 @@ export class Switch {
       "docs": {
         "tags": [{
             "name": "deprecated",
-            "text": "use 'checked' instead."
+            "text": "use \"checked\" instead."
           }],
-        "text": "True if the switch is initially on"
+        "text": "When true, the component is checked."
       },
       "attribute": "switched",
       "reflect": false,
@@ -220,7 +220,7 @@ export class Switch {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "True if the switch is initially on"
+        "text": "When true, the component is checked."
       },
       "attribute": "checked",
       "reflect": true,
@@ -238,7 +238,7 @@ export class Switch {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The value of the switch input"
+        "text": "The component's value."
       },
       "attribute": "value",
       "reflect": false
@@ -252,7 +252,7 @@ export class Switch {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fires when the checked value has changed.\n\n**Note:** The event payload is deprecated, please use the `checked` property on the component instead"
+        "text": "Fires when the checked value has changed.\n\n**Note:** The event payload is deprecated, use the component's \"checked\" property instead."
       },
       "complexType": {
         "original": "DeprecatedEventPayload",

package/dist/collection/components/tab/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * 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-next.555
+ * v1.0.0-next.558
  */
 export {};

package/dist/collection/components/tab/tab.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-next.555
+ * v1.0.0-next.558
  */
 import { Component, Prop, Element, Listen, Method, Event, h, State, Host, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/tab-nav/tab-nav.css

@@ -102,6 +102,10 @@
   overflow: auto;
 }
 
+:host([layout=center]) .tab-nav {
+  justify-content: center;
+}
+
 .tab-nav-active-indicator-container {
   position: absolute;
   inset-inline: 0px;