@esri/calcite-components 1.0.0-beta.92 → 1.0.0-beta.94

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.92
+ * v1.0.0-beta.94
  */
 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

@@ -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-beta.92
+ * v1.0.0-beta.94
  */
 export {};

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.92
+ * v1.0.0-beta.94
  */
 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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   button: "button",

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.92
+ * v1.0.0-beta.94
  */
 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 = () => {
@@ -551,6 +551,7 @@ export class TimePicker {
   connectedCallback() {
     this.setValue(this.value, false);
     this.hourCycle = getLocaleHourCycle(this.locale);
+    this.meridiemOrder = this.getMeridiemOrder(getTimeParts("0:00:00", this.locale));
   }
   // --------------------------------------------------------------------------
   //
@@ -664,7 +665,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 +686,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 +707,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 +728,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 +749,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 +770,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 +791,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 +812,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 +833,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 +854,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 +875,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 +896,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 +917,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,10 +940,10 @@ 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,
+      "reflect": true,
       "defaultValue": "\"m\""
     },
     "step": {
@@ -957,10 +958,10 @@ 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,
+      "reflect": true,
       "defaultValue": "60"
     },
     "value": {
@@ -975,7 +976,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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.92
+ * v1.0.0-beta.94
  */
 import { HEADING_LEVEL as PARENT_HEADING_LEVEL } from "../tip-manager/resources";
 export const CSS = {

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.92
+ * v1.0.0-beta.94
  */
 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,10 +173,10 @@ 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
+      "reflect": true
     },
     "selected": {
       "type": "boolean",
@@ -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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.92
+ * v1.0.0-beta.94
  */
 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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   header: "header",

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

@@ -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;