npm - @esri/calcite-components - Versions diffs - 1.0.0-next.575 → 1.0.0-next.576 - Mend

@esri/calcite-components 1.0.0-next.575 → 1.0.0-next.576

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (864) hide show

package/dist/collection/components/tile-select/tile-select.js CHANGED Viewed

@@ -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.575
+ * v1.0.0-next.576
  */
 import { Component, Element, Event, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -17,19 +17,23 @@ export class TileSelect {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** The checked state of the tile select. */
+    /** When true, the component is checked. */
     this.checked = false;
-    /** The disabled state of the tile select. */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
-    /** The hidden state of the tile select. */
+    /** When true, the component is not displayed and is not focusable or checkable. */
     this.hidden = false;
-    /** Display an interactive radio or checkbox. */
+    /** When true, displays an interactive input based on the "type" property. */
     this.inputEnabled = false;
-    /** The side of the tile that the radio or checkbox appears on when inputEnabled is true. */
+    /** When inputEnabled is true, the placement of the interactive input on the component. */
     this.inputAlignment = "start";
-    /** The selection mode of the tile select: radio (single) or checkbox (multiple). */
+    /**
+     * The selection mode of the component.
+     *
+     * Use radio for single selection, and checkbox for multiple selections.
+     */
     this.type = "radio";
-    /** specify the width of the tile, defaults to auto */
+    /** Specifies the width of the component. */
     this.width = "auto";
     this.guid = `calcite-tile-select-${guid()}`;
     //--------------------------------------------------------------------------
@@ -199,7 +203,7 @@ export class TileSelect {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The checked state of the tile select."
+        "text": "When true, the component is checked."
       },
       "attribute": "checked",
       "reflect": true,
@@ -217,7 +221,7 @@ export class TileSelect {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The description text that appears beneath the heading of the tile."
+        "text": "A description for the component, which displays below the heading."
       },
       "attribute": "description",
       "reflect": true
@@ -234,7 +238,7 @@ export class TileSelect {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The disabled state of the tile select."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -252,7 +256,7 @@ export class TileSelect {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The heading text that appears between the icon and description of the tile."
+        "text": "The component header text, which displays between the icon and description."
       },
       "attribute": "heading",
       "reflect": true
@@ -269,7 +273,7 @@ export class TileSelect {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The hidden state of the tile select."
+        "text": "When true, the component is not displayed and is not focusable or checkable."
       },
       "attribute": "hidden",
       "reflect": true,
@@ -287,7 +291,7 @@ export class TileSelect {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The icon that appears at the top of the tile."
+        "text": "Specifies an icon to display."
       },
       "attribute": "icon",
       "reflect": true
@@ -304,7 +308,7 @@ export class TileSelect {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property."
+        "text": "Specifies the name of the component on form submission."
       },
       "attribute": "name",
       "reflect": true
@@ -321,7 +325,7 @@ export class TileSelect {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display an interactive radio or checkbox."
+        "text": "When true, displays an interactive input based on the \"type\" property."
       },
       "attribute": "input-enabled",
       "reflect": true,
@@ -347,7 +351,7 @@ export class TileSelect {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The side of the tile that the radio or checkbox appears on when inputEnabled is true."
+        "text": "When inputEnabled is true, the placement of the interactive input on the component."
       },
       "attribute": "input-alignment",
       "reflect": true,
@@ -370,7 +374,7 @@ export class TileSelect {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The selection mode of the tile select: radio (single) or checkbox (multiple)."
+        "text": "The selection mode of the component.\n\nUse radio for single selection, and checkbox for multiple selections."
       },
       "attribute": "type",
       "reflect": true,
@@ -388,7 +392,7 @@ export class TileSelect {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The value of the tile select.  This value will appear in form submissions when this tile select is checked."
+        "text": "The component's value."
       },
       "attribute": "value",
       "reflect": false
@@ -413,7 +417,7 @@ export class TileSelect {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the width of the tile, defaults to auto"
+        "text": "Specifies the width of the component."
       },
       "attribute": "width",
       "reflect": true,
@@ -431,7 +435,7 @@ export class TileSelect {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emits a custom change event.  For checkboxes, it emits when the checkbox is checked or unchecked.  For radios it only emits when it is checked."
+        "text": "Emits a custom change event.\n\nFor checkboxes it emits when checked or unchecked.\n\nFor radios it only emits when checked."
       },
       "complexType": {
         "original": "void",

package/dist/collection/components/tile-select-group/interfaces.js CHANGED Viewed

@@ -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.575
+ * v1.0.0-next.576
  */
 export {};

package/dist/collection/components/tile-select-group/tile-select-group.js CHANGED Viewed

@@ -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.575
+ * v1.0.0-next.576
  */
 import { Component, h, Prop, Element } from "@stencil/core";
 import { updateHostInteraction } from "../../utils/interactive";
@@ -15,9 +15,13 @@ export class TileSelectGroup {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** The disabled state of the tile select. */
+    /** When true, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
-    /** Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts */
+    /**
+     * Defines the layout of the component.
+     *
+     * Use "horizontal" for rows, and "vertical" for a single column.
+     */
     this.layout = "horizontal";
   }
   //--------------------------------------------------------------------------
@@ -52,7 +56,7 @@ export class TileSelectGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The disabled state of the tile select."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -75,7 +79,7 @@ export class TileSelectGroup {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts"
+        "text": "Defines the layout of the component.\n\nUse \"horizontal\" for rows, and \"vertical\" for a single column."
       },
       "attribute": "layout",
       "reflect": true,

package/dist/collection/components/time-picker/resources.js CHANGED Viewed

@@ -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.575
+ * v1.0.0-next.576
  */
 export const CSS = {
   button: "button",

package/dist/collection/components/time-picker/time-picker.js CHANGED Viewed

@@ -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.575
+ * v1.0.0-next.576
  */
 import { Component, Element, h, Prop, Event, Watch, State, Listen, Method } from "@stencil/core";
 import { isActivationKey, numberKeys } from "../../utils/key";
@@ -19,88 +19,88 @@ export class TimePicker {
     //
     //--------------------------------------------------------------------------
     /**
-     * aria-label for the hour input
+     * Accessible name for the component's hour input.
      *
      * @default "Hour"
      */
     this.intlHour = TEXT.hour;
     /**
-     * aria-label for the hour down button
+     * Accessible name for the component's hour down button.
      *
      * @default "Decrease hour"
      */
     this.intlHourDown = TEXT.hourDown;
     /**
-     * aria-label for the hour up button
+     * Accessible name for the component's hour up button.
      *
      * @default "Increase hour"
      */
     this.intlHourUp = TEXT.hourUp;
     /**
-     * aria-label for the meridiem (am/pm) input
+     * Accessible name for the component's meridiem (AM/PM) input.
      *
      * @default "AM/PM"
      */
     this.intlMeridiem = TEXT.meridiem;
     /**
-     * aria-label for the meridiem (am/pm) down button
+     * Accessible name for the component's meridiem (AM/PM) down button.
      *
      * @default "Decrease AM/PM"
      */
     this.intlMeridiemDown = TEXT.meridiemDown;
     /**
-     * aria-label for the meridiem (am/pm) up button
+     * Accessible name for the component's meridiem (AM/PM) up button.
      *
      * @default "Increase AM/PM"
      */
     this.intlMeridiemUp = TEXT.meridiemUp;
     /**
-     * aria-label for the minute input
+     * Accessible name for the component's minute input.
      *
      * @default "Minute"
      */
     this.intlMinute = TEXT.minute;
     /**
-     * aria-label for the minute down button
+     * Accessible name for the component's minute down button.
      *
      * @default "Decrease minute"
      */
     this.intlMinuteDown = TEXT.minuteDown;
     /**
-     * aria-label for the minute up button
+     * Accessible name for the component's minute up button.
      *
      * @default "Increase minute"
      */
     this.intlMinuteUp = TEXT.minuteUp;
     /**
-     * aria-label for the second input
+     * Accessible name for the component's second input.
      *
      * @default "Second"
      */
     this.intlSecond = TEXT.second;
     /**
-     * aria-label for the second down button
+     * Accessible name for the component's second down button.
      *
      * @default "Decrease second"
      */
     this.intlSecondDown = TEXT.secondDown;
     /**
-     * aria-label for the second up button
+     * Accessible name for the component's second up button.
      *
      * @default "Increase second"
      */
     this.intlSecondUp = TEXT.secondUp;
     /**
-     * BCP 47 language tag for desired language and country format
+     * BCP 47 language tag for desired language and country format.
      *
      * @internal
      */
     this.locale = document.documentElement.lang || navigator.language || "en";
-    /** The scale (size) of the time picker */
+    /** Specifies the size of the component. */
     this.scale = "m";
-    /** number (seconds) that specifies the granularity that the value must adhere to */
+    /** Specifies the granularity the "value" must adhere to (in seconds). */
     this.step = 60;
-    /** The selected time in UTC (always 24-hour format) */
+    /** The component's value in UTC (always 24-hour format). */
     this.value = null;
     this.showSecond = this.step < 60;
     this.decrementHour = () => {
@@ -664,7 +664,7 @@ export class TimePicker {
             "name": "default",
             "text": "\"Hour\""
           }],
-        "text": "aria-label for the hour input"
+        "text": "Accessible name for the component's hour input."
       },
       "attribute": "intl-hour",
       "reflect": false,
@@ -685,7 +685,7 @@ export class TimePicker {
             "name": "default",
             "text": "\"Decrease hour\""
           }],
-        "text": "aria-label for the hour down button"
+        "text": "Accessible name for the component's hour down button."
       },
       "attribute": "intl-hour-down",
       "reflect": false,
@@ -706,7 +706,7 @@ export class TimePicker {
             "name": "default",
             "text": "\"Increase hour\""
           }],
-        "text": "aria-label for the hour up button"
+        "text": "Accessible name for the component's hour up button."
       },
       "attribute": "intl-hour-up",
       "reflect": false,
@@ -727,7 +727,7 @@ export class TimePicker {
             "name": "default",
             "text": "\"AM/PM\""
           }],
-        "text": "aria-label for the meridiem (am/pm) input"
+        "text": "Accessible name for the component's meridiem (AM/PM) input."
       },
       "attribute": "intl-meridiem",
       "reflect": false,
@@ -748,7 +748,7 @@ export class TimePicker {
             "name": "default",
             "text": "\"Decrease AM/PM\""
           }],
-        "text": "aria-label for the meridiem (am/pm) down button"
+        "text": "Accessible name for the component's meridiem (AM/PM) down button."
       },
       "attribute": "intl-meridiem-down",
       "reflect": false,
@@ -769,7 +769,7 @@ export class TimePicker {
             "name": "default",
             "text": "\"Increase AM/PM\""
           }],
-        "text": "aria-label for the meridiem (am/pm) up button"
+        "text": "Accessible name for the component's meridiem (AM/PM) up button."
       },
       "attribute": "intl-meridiem-up",
       "reflect": false,
@@ -790,7 +790,7 @@ export class TimePicker {
             "name": "default",
             "text": "\"Minute\""
           }],
-        "text": "aria-label for the minute input"
+        "text": "Accessible name for the component's minute input."
       },
       "attribute": "intl-minute",
       "reflect": false,
@@ -811,7 +811,7 @@ export class TimePicker {
             "name": "default",
             "text": "\"Decrease minute\""
           }],
-        "text": "aria-label for the minute down button"
+        "text": "Accessible name for the component's minute down button."
       },
       "attribute": "intl-minute-down",
       "reflect": false,
@@ -832,7 +832,7 @@ export class TimePicker {
             "name": "default",
             "text": "\"Increase minute\""
           }],
-        "text": "aria-label for the minute up button"
+        "text": "Accessible name for the component's minute up button."
       },
       "attribute": "intl-minute-up",
       "reflect": false,
@@ -853,7 +853,7 @@ export class TimePicker {
             "name": "default",
             "text": "\"Second\""
           }],
-        "text": "aria-label for the second input"
+        "text": "Accessible name for the component's second input."
       },
       "attribute": "intl-second",
       "reflect": false,
@@ -874,7 +874,7 @@ export class TimePicker {
             "name": "default",
             "text": "\"Decrease second\""
           }],
-        "text": "aria-label for the second down button"
+        "text": "Accessible name for the component's second down button."
       },
       "attribute": "intl-second-down",
       "reflect": false,
@@ -895,7 +895,7 @@ export class TimePicker {
             "name": "default",
             "text": "\"Increase second\""
           }],
-        "text": "aria-label for the second up button"
+        "text": "Accessible name for the component's second up button."
       },
       "attribute": "intl-second-up",
       "reflect": false,
@@ -916,7 +916,7 @@ export class TimePicker {
             "name": "internal",
             "text": undefined
           }],
-        "text": "BCP 47 language tag for desired language and country format"
+        "text": "BCP 47 language tag for desired language and country format."
       },
       "attribute": "lang",
       "reflect": false,
@@ -939,7 +939,7 @@ export class TimePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The scale (size) of the time picker"
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": false,
@@ -957,7 +957,7 @@ export class TimePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "number (seconds) that specifies the granularity that the value must adhere to"
+        "text": "Specifies the granularity the \"value\" must adhere to (in seconds)."
       },
       "attribute": "step",
       "reflect": false,
@@ -975,7 +975,7 @@ export class TimePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The selected time in UTC (always 24-hour format)"
+        "text": "The component's value in UTC (always 24-hour format)."
       },
       "attribute": "value",
       "reflect": false,

package/dist/collection/components/tip/resources.js CHANGED Viewed

@@ -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.575
+ * v1.0.0-next.576
  */
 import { HEADING_LEVEL as PARENT_HEADING_LEVEL } from "../tip-manager/resources";
 export const CSS = {

package/dist/collection/components/tip/tip.js CHANGED Viewed

@@ -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.575
+ * v1.0.0-next.576
  */
 import { Component, Element, Event, Prop, h, Fragment } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT, HEADING_LEVEL } from "./resources";
@@ -10,7 +10,7 @@ import { Heading, constrainHeadingLevel } from "../functional/Heading";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding text and a hyperlink.
- * @slot thumbnail - A slot for adding an HTML image element to the tip.
+ * @slot thumbnail - A slot for adding an HTML image element.
  */
 export class Tip {
   constructor() {
@@ -20,15 +20,17 @@ export class Tip {
     //
     // --------------------------------------------------------------------------
     /**
-     * No longer displays the tip.
+     * When true, the component does not display.
      */
     this.dismissed = false;
     /**
-     * Indicates whether the tip can be dismissed.
+     * When true, the close button is not present on the component.
      */
     this.nonDismissible = false;
     /**
-     * The selected state of the tip if it is being used inside a `calcite-tip-manager`.
+     * When true and if it has a parent `calcite-tip-manager`, the component is selected.
+     *
+     * Only one tip can be selected within the `calcite-tip-manager` parent.
      */
     this.selected = false;
     // --------------------------------------------------------------------------
@@ -113,7 +115,7 @@ export class Tip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "No longer displays the tip."
+        "text": "When true, the component does not display."
       },
       "attribute": "dismissed",
       "reflect": true,
@@ -131,7 +133,7 @@ export class Tip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates whether the tip can be dismissed."
+        "text": "When true, the close button is not present on the component."
       },
       "attribute": "non-dismissible",
       "reflect": true,
@@ -149,7 +151,7 @@ export class Tip {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The heading of the tip."
+        "text": "The component header text."
       },
       "attribute": "heading",
       "reflect": false
@@ -171,7 +173,7 @@ export class Tip {
       "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
@@ -188,7 +190,7 @@ export class Tip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The selected state of the tip if it is being used inside a `calcite-tip-manager`."
+        "text": "When true and if it has a parent `calcite-tip-manager`, the component is selected.\n\nOnly one tip can be selected within the `calcite-tip-manager` parent."
       },
       "attribute": "selected",
       "reflect": true,
@@ -206,7 +208,7 @@ export class Tip {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Alternate text for closing the tip."
+        "text": "Accessible name for the component's close button."
       },
       "attribute": "intl-close",
       "reflect": false
@@ -220,7 +222,7 @@ export class Tip {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the component has been dismissed."
+        "text": "Emits when the component has been dismissed."
       },
       "complexType": {
         "original": "void",

package/dist/collection/components/tip-group/tip-group.js CHANGED Viewed

@@ -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.575
+ * v1.0.0-next.576
  */
 import { Component, Prop, h } from "@stencil/core";
 /**
@@ -32,7 +32,7 @@ export class TipGroup {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The title used for all nested tips."
+        "text": "The component header text for all nested `calcite-tip`s."
       },
       "attribute": "group-title",
       "reflect": false

package/dist/collection/components/tip-manager/resources.js CHANGED Viewed

@@ -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.575
+ * v1.0.0-next.576
  */
 export const CSS = {
   header: "header",

package/dist/collection/components/tip-manager/tip-manager.css CHANGED Viewed

@@ -83,8 +83,8 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-tip-manager-height: the maximum height of the tip-manager
-* @prop --calcite-tip-max-width: the maximum width of a slotted tip within tip-manager
+* @prop --calcite-tip-manager-height: The maximum height of the component.
+* @prop --calcite-tip-max-width: The maximum width of a slotted `calcite-tip` within the component.
 */
 :host {
   box-sizing: border-box;