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

package/dist/collection/components/shell-center-row/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-next.555
+ * v1.0.0-next.558
  */
 export const CSS = {
   actionBarContainer: "action-bar-container",

package/dist/collection/components/shell-center-row/shell-center-row.js

@@ -1,15 +1,15 @@
 /*!
  * 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, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
- * @slot - A slot for adding content to the shell panel.
- * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
+ * @slot - A slot for adding content to the `calcite-shell-panel`.
+ * @slot action-bar - A slot for adding a `calcite-action-bar` to the `calcite-shell-panel`.
  */
 export class ShellCenterRow {
   constructor() {
@@ -19,15 +19,15 @@ export class ShellCenterRow {
     //
     // --------------------------------------------------------------------------
     /**
-     * This property makes the content area appear like a "floating" panel.
+     * When true, the content area displays like a floating panel.
      */
     this.detached = false;
     /**
-     * Specifies the maximum height of the row.
+     * Specifies the maximum height of the component.
      */
     this.heightScale = "s";
     /**
-     * Arranges the component depending on the elements 'dir' property.
+     * Specifies the component's position. Will be flipped when the element direction is right-to-left ("rtl").
      */
     this.position = "end";
   }
@@ -81,7 +81,7 @@ export class ShellCenterRow {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "This property makes the content area appear like a \"floating\" panel."
+        "text": "When true, the content area displays like a floating panel."
       },
       "attribute": "detached",
       "reflect": true,
@@ -104,7 +104,7 @@ export class ShellCenterRow {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specifies the maximum height of the row."
+        "text": "Specifies the maximum height of the component."
       },
       "attribute": "height-scale",
       "reflect": true,
@@ -127,7 +127,7 @@ export class ShellCenterRow {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Arranges the component depending on the elements 'dir' property."
+        "text": "Specifies the component's position. Will be flipped when the element direction is right-to-left (\"rtl\")."
       },
       "attribute": "position",
       "reflect": true,

package/dist/collection/components/shell-panel/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-next.555
+ * v1.0.0-next.558
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/shell-panel/shell-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-next.555
+ * v1.0.0-next.558
  */
 import { Component, Element, Event, Prop, Watch, h, State, forceUpdate } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
@@ -9,8 +9,8 @@ import { getSlotted, getElementDir } from "../../utils/dom";
 import { clamp } from "../../utils/math";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
- * @slot - A slot for adding content to the shell panel.
- * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
+ * @slot - A slot for adding content to the component.
+ * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
  */
 export class ShellPanel {
   constructor() {
@@ -20,29 +20,29 @@ export class ShellPanel {
     //
     // --------------------------------------------------------------------------
     /**
-     * Hide the content panel.
+     * When true, hides the component's content area.
      */
     this.collapsed = false;
     /**
-     * This property makes the content area appear like a "floating" panel.
+     * When true, the content area displays like a floating panel.
      */
     this.detached = false;
     /**
-     * Specifies the maximum height of the contents when detached.
+     * When "detached", specifies the maximum height of the component.
      */
     this.detachedHeightScale = "l";
     /**
-     * This sets width of the content area.
+     * Specifies the width of the component's content area.
      */
     this.widthScale = "m";
     /**
-     * Accessible label for resize separator.
+     * Accessible name for the resize separator.
      *
      * @default "Resize"
      */
     this.intlResize = TEXT.resize;
     /**
-     * This property makes the content area resizable if the calcite-shell-panel is not 'detached'.
+     * When true and not "detached", the component's content area is resizable.
      */
     this.resizable = false;
     this.contentWidth = null;
@@ -244,7 +244,7 @@ export class ShellPanel {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Hide the content panel."
+        "text": "When true, hides the component's content area."
       },
       "attribute": "collapsed",
       "reflect": true,
@@ -262,7 +262,7 @@ export class ShellPanel {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "This property makes the content area appear like a \"floating\" panel."
+        "text": "When true, the content area displays like a floating panel."
       },
       "attribute": "detached",
       "reflect": true,
@@ -285,7 +285,7 @@ export class ShellPanel {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specifies the maximum height of the contents when detached."
+        "text": "When \"detached\", specifies the maximum height of the component."
       },
       "attribute": "detached-height-scale",
       "reflect": true,
@@ -308,7 +308,7 @@ export class ShellPanel {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "This sets width of the content area."
+        "text": "Specifies the width of the component's content area."
       },
       "attribute": "width-scale",
       "reflect": true,
@@ -331,7 +331,7 @@ export class ShellPanel {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Arranges the component depending on the elements 'dir' property."
+        "text": "Specifies the component's position. Will be flipped when the element direction is right-to-left (\"rtl\")."
       },
       "attribute": "position",
       "reflect": true
@@ -351,7 +351,7 @@ export class ShellPanel {
             "name": "default",
             "text": "\"Resize\""
           }],
-        "text": "Accessible label for resize separator."
+        "text": "Accessible name for the resize separator."
       },
       "attribute": "intl-resize",
       "reflect": false,
@@ -369,7 +369,7 @@ export class ShellPanel {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "This property makes the content area resizable if the calcite-shell-panel is not 'detached'."
+        "text": "When true and not \"detached\", the component's content area is resizable."
       },
       "attribute": "resizable",
       "reflect": true,
@@ -388,7 +388,7 @@ export class ShellPanel {
       "docs": {
         "tags": [{
             "name": "deprecated",
-            "text": "use a resizeObserver on the shell-panel to listen for changes to its size."
+            "text": "use a resizeObserver on the component to listen for changes to its size."
           }],
         "text": "Emitted when collapse has been toggled."
       },

package/dist/collection/components/slider/slider.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, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -10,6 +10,7 @@ import { clamp, decimalPlaces } from "../../utils/math";
 import { connectLabel, disconnectLabel } from "../../utils/label";
 import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
+import { isActivationKey } from "../../utils/key";
 function isRange(value) {
   return Array.isArray(value);
 }
@@ -20,17 +21,17 @@ export class Slider {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Disable and gray out the slider */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
-    /** Indicates if a histogram is present */
+    /** When true, indicates a histogram is present. */
     this.hasHistogram = false;
-    /** Label handles with their numeric value */
+    /** When true, displays label handles with their numeric value. */
     this.labelHandles = false;
-    /** Label tick marks with their numeric value. */
+    /** When true and "ticks" is specified, displays label tick marks with their numeric value. */
     this.labelTicks = false;
-    /** Maximum selectable value */
+    /** The component's maximum selectable value. */
     this.max = 100;
-    /** Minimum selectable value */
+    /** The component's minimum selectable value. */
     this.min = 0;
     /**
      * When true, the slider will display values from high to low.
@@ -38,20 +39,20 @@ export class Slider {
      * Note that this value will be ignored if the slider has an associated histogram.
      */
     this.mirrored = false;
-    /** Use finer point for handles */
+    /** When true, sets a finer point for handles. */
     this.precise = false;
     /**
-     * When true, makes the component required for form-submission.
+     * When true, the component must have a value on form submission.
      */
     this.required = false;
-    /** When true, enables snap selection along the step interval */
+    /** When true, enables snap selection in coordination with "step" via a mouse. */
     this.snap = false;
-    /** Interval to move on up/down keys */
+    /** Specifies the interval to move with the up, or down keys. */
     this.step = 1;
-    /** Currently selected number (if single select) */
+    /** The component's value. */
     this.value = 0;
     /**
-     * Specify the scale of the slider, defaults to m
+     *  Specifies the size of the component.
      */
     this.scale = "m";
     this.guid = `calcite-slider-${guid()}`;
@@ -399,8 +400,8 @@ export class Slider {
     const mirror = this.shouldMirror();
     const { activeProp, max, min, pageStep, step } = this;
     const value = this[activeProp];
-    const key = event.key;
-    if (key === "Enter" || key === " ") {
+    const { key } = event;
+    if (isActivationKey(key)) {
       event.preventDefault();
       return;
     }
@@ -837,7 +838,7 @@ export class Slider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Disable and gray out the slider"
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -855,7 +856,7 @@ export class Slider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates if a histogram is present"
+        "text": "When true, indicates a histogram is present."
       },
       "attribute": "has-histogram",
       "reflect": true,
@@ -881,7 +882,7 @@ export class Slider {
             "name": "see",
             "text": "[DataSeries](https://github.com/Esri/calcite-components/blob/master/src/components/graph/interfaces.ts#L5)"
           }],
-        "text": "List of x,y coordinates within the slider's min and max, displays above the slider track."
+        "text": "A list of the histogram's x,y coordinates within the component's \"min\" and \"max\". Displays above the component's track."
       }
     },
     "histogramStops": {
@@ -901,7 +902,7 @@ export class Slider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Array of values describing a single color stop, sorted by offset ascending."
+        "text": "A set of single color stops for a histogram, sorted by offset ascending."
       }
     },
     "labelHandles": {
@@ -916,7 +917,7 @@ export class Slider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Label handles with their numeric value"
+        "text": "When true, displays label handles with their numeric value."
       },
       "attribute": "label-handles",
       "reflect": true,
@@ -934,7 +935,7 @@ export class Slider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Label tick marks with their numeric value."
+        "text": "When true and \"ticks\" is specified, displays label tick marks with their numeric value."
       },
       "attribute": "label-ticks",
       "reflect": true,
@@ -952,7 +953,7 @@ export class Slider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Maximum selectable value"
+        "text": "The component's maximum selectable value."
       },
       "attribute": "max",
       "reflect": true,
@@ -970,7 +971,7 @@ export class Slider {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Used as an accessible label (aria-label) for second handle if needed (ex. \"Temperature, upper bound\")"
+        "text": "For multiple selections, the accessible name for the second handle, such as \"Temperature, upper bound\"."
       },
       "attribute": "max-label",
       "reflect": false
@@ -987,7 +988,7 @@ export class Slider {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Currently selected upper number (if multi-select)"
+        "text": "For multiple selections, the component's upper value."
       },
       "attribute": "max-value",
       "reflect": false
@@ -1004,7 +1005,7 @@ export class Slider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Minimum selectable value"
+        "text": "The component's minimum selectable value."
       },
       "attribute": "min",
       "reflect": true,
@@ -1022,7 +1023,7 @@ export class Slider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Used as an accessible label (aria-label) for first (or only) handle (ex. \"Temperature, lower bound\")"
+        "text": "Accessible name for first (or only) handle, such as \"Temperature, lower bound\"."
       },
       "attribute": "min-label",
       "reflect": false
@@ -1039,7 +1040,7 @@ export class Slider {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Currently selected lower number (if multi-select)"
+        "text": "For multiple selections, the component's lower value."
       },
       "attribute": "min-value",
       "reflect": false
@@ -1074,7 +1075,7 @@ export class Slider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The name of the slider"
+        "text": "Specifies the name of the component on form submission."
       },
       "attribute": "name",
       "reflect": true
@@ -1091,7 +1092,7 @@ export class Slider {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Interval to move on page up/page down keys"
+        "text": "Specifies the interval to move with the page up, or page down keys."
       },
       "attribute": "page-step",
       "reflect": false
@@ -1108,7 +1109,7 @@ export class Slider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Use finer point for handles"
+        "text": "When true, sets a finer point for handles."
       },
       "attribute": "precise",
       "reflect": false,
@@ -1126,7 +1127,7 @@ export class Slider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, makes the component required for form-submission."
+        "text": "When true, the component must have a value on form submission."
       },
       "attribute": "required",
       "reflect": true,
@@ -1144,7 +1145,7 @@ export class Slider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, enables snap selection along the step interval"
+        "text": "When true, enables snap selection in coordination with \"step\" via a mouse."
       },
       "attribute": "snap",
       "reflect": false,
@@ -1162,7 +1163,7 @@ export class Slider {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Interval to move on up/down keys"
+        "text": "Specifies the interval to move with the up, or down keys."
       },
       "attribute": "step",
       "reflect": false,
@@ -1180,7 +1181,7 @@ export class Slider {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Show tick marks on the number line at provided interval"
+        "text": "Displays tick marks on the number line at a specified interval."
       },
       "attribute": "ticks",
       "reflect": false
@@ -1197,7 +1198,7 @@ export class Slider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Currently selected number (if single select)"
+        "text": "The component's value."
       },
       "attribute": "value",
       "reflect": true,
@@ -1220,7 +1221,7 @@ export class Slider {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specify the scale of the slider, defaults to m"
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": false,
@@ -1242,7 +1243,7 @@ export class Slider {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
+        "text": "Fires on all updates to the component.\n\n**Note:** Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
       },
       "complexType": {
         "original": "void",
@@ -1257,7 +1258,7 @@ export class Slider {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fires on when the thumb is released on slider\nIf you need to constantly listen to the drag event,\nplease use calciteSliderInput instead"
+        "text": "Fires when the thumb is released on the component.\n\n**Note:** If you need to constantly listen to the drag event,\nuse \"calciteSliderInput\" instead."
       },
       "complexType": {
         "original": "void",
@@ -1273,9 +1274,9 @@ export class Slider {
       "docs": {
         "tags": [{
             "name": "deprecated",
-            "text": "use calciteSliderInput instead"
+            "text": "use \"calciteSliderInput\" instead."
           }],
-        "text": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
+        "text": "Fires on all updates to the component.\n\n**Note:** Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
       },
       "complexType": {
         "original": "void",

package/dist/collection/components/sortable-list/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-next.555
+ * v1.0.0-next.558
  */
 export const CSS = {
   sortItem: "sort-item",

package/dist/collection/components/sortable-list/sortable-list.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 Sortable from "sortablejs";
 import { Component, Element, Event, Listen, Prop, State, h } from "@stencil/core";

package/dist/collection/components/split-button/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-next.555
+ * v1.0.0-next.558
  */
 export const CSS = {
   container: "split-button__container",