@esri/calcite-components 1.0.0-next.597 → 1.0.0-next.599

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.597
+ * v1.0.0-next.599
  */
 import { h } from "@stencil/core";
 import { focusElement } from "../../utils/dom";
@@ -15,11 +15,11 @@ export class Stepper {
     //  Public Properties
     //
     //--------------------------------------------------------------------------
-    /** When true, displays a status icon in the `calcite-stepper-item` heading. */
+    /** When `true`, displays a status icon in the `calcite-stepper-item` heading. */
     this.icon = false;
     /** Defines the layout of the component. */
     this.layout = "horizontal";
-    /** When true, displays the step number in the `calcite-stepper-item` heading. */
+    /** When `true`, displays the step number in the `calcite-stepper-item` heading. */
     this.numbered = false;
     /** Specifies the size of the component. */
     this.scale = "m";
@@ -242,7 +242,7 @@ export class Stepper {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, displays a status icon in the `calcite-stepper-item` heading."
+          "text": "When `true`, displays a status icon in the `calcite-stepper-item` heading."
         },
         "attribute": "icon",
         "reflect": true,
@@ -286,12 +286,34 @@ export class Stepper {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, displays the step number in the `calcite-stepper-item` heading."
+          "text": "When `true`, displays the step number in the `calcite-stepper-item` heading."
         },
         "attribute": "numbered",
         "reflect": true,
         "defaultValue": "false"
       },
+      "numberingSystem": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NumberingSystem",
+          "resolved": "\"arab\" | \"arabext\" | \"bali\" | \"beng\" | \"deva\" | \"fullwide\" | \"gujr\" | \"guru\" | \"hanidec\" | \"khmr\" | \"knda\" | \"laoo\" | \"latn\" | \"limb\" | \"mlym\" | \"mong\" | \"mymr\" | \"orya\" | \"tamldec\" | \"telu\" | \"thai\" | \"tibt\"",
+          "references": {
+            "NumberingSystem": {
+              "location": "import",
+              "path": "../../utils/locale"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the Unicode numeral system used by the component for localization."
+        },
+        "attribute": "numbering-system",
+        "reflect": true
+      },
       "scale": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/stepper-item/stepper-item.js

@@ -1,11 +1,12 @@
 /*!
  * 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.597
+ * v1.0.0-next.599
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
 import { updateHostInteraction } from "../../utils/interactive";
+import { numberStringFormatter, disconnectLocalized, connectLocalized } from "../../utils/locale";
 /**
  * @slot - A slot for adding custom content.
  */
@@ -17,29 +18,29 @@ export class StepperItem {
     //
     //--------------------------------------------------------------------------
     /**
-     *  is the step active
+     *  When `true`, the component is selected.
      *
-     * @deprecated Use selected instead.
+     * @deprecated Use `selected` instead.
      */
     this.active = false;
     /**
-     * When true, step is selected
+     * When `true`, the component is selected.
      */
     this.selected = false;
-    /** has the step been completed */
+    /** When `true`, the step has been completed. */
     this.complete = false;
-    /** When true, the component contains an error that requires resolution from the user. */
+    /** When `true`, the component contains an error that requires resolution from the user. */
     this.error = false;
-    /** When true, interaction is prevented and the component is displayed with lower opacity. */
+    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
     // internal props inherited from wrapping calcite-stepper
     /** Defines the layout of the component. */
     /** @internal */
     this.layout = "horizontal";
-    /** When true, displays a status icon in the `calcite-stepper-item` heading. */
+    /** When `true`, displays a status icon in the component's heading. */
     /** @internal */
     this.icon = false;
-    /** When true, displays the step number in the `calcite-stepper-item` heading. */
+    /** When `true`, displays the step number in the component's heading. */
     /** @internal */
     this.numbered = false;
     /** Specifies the size of the component. */
@@ -47,6 +48,12 @@ export class StepperItem {
     this.scale = "m";
     //--------------------------------------------------------------------------
     //
+    //  Internal State/Props
+    //
+    //--------------------------------------------------------------------------
+    this.effectiveLocale = "";
+    //--------------------------------------------------------------------------
+    //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
@@ -110,12 +117,21 @@ export class StepperItem {
   disabledWatcher() {
     this.registerStepperItem();
   }
+  effectiveLocaleWatcher(locale) {
+    var _a;
+    numberStringFormatter.numberFormatOptions = {
+      locale,
+      numberingSystem: (_a = this.parentStepperEl) === null || _a === void 0 ? void 0 : _a.numberingSystem,
+      useGrouping: false
+    };
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectLocalized(this);
     const { selected, active } = this;
     if (selected) {
       this.active = selected;
@@ -139,10 +155,13 @@ export class StepperItem {
   componentDidRender() {
     updateHostInteraction(this, true);
   }
+  disconnectedCallback() {
+    disconnectLocalized(this);
+  }
   render() {
     return (h(Host, { "aria-expanded": toAriaBoolean(this.active), onClick: this.handleItemClick, onKeyDown: this.keyDownHandler }, h("div", { class: "container" }, h("div", { class: "stepper-item-header", ref: (el) => (this.headerEl = el), tabIndex: 
       /* additional tab index logic needed because of display: contents */
-      this.layout === "horizontal" && !this.disabled ? 0 : null }, this.icon ? this.renderIcon() : null, this.numbered ? h("div", { class: "stepper-item-number" }, this.itemPosition + 1, ".") : null, h("div", { class: "stepper-item-header-text" }, h("span", { class: "stepper-item-heading" }, this.heading || this.itemTitle), h("span", { class: "stepper-item-description" }, this.description || this.itemSubtitle))), h("div", { class: "stepper-item-content" }, h("slot", null)))));
+      this.layout === "horizontal" && !this.disabled ? 0 : null }, this.icon ? this.renderIcon() : null, this.numbered ? (h("div", { class: "stepper-item-number" }, numberStringFormatter.numberFormatter.format(this.itemPosition + 1), ".")) : null, h("div", { class: "stepper-item-header-text" }, h("span", { class: "stepper-item-heading" }, this.heading || this.itemTitle), h("span", { class: "stepper-item-description" }, this.description || this.itemSubtitle))), h("div", { class: "stepper-item-content" }, h("slot", null)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -214,9 +233,9 @@ export class StepperItem {
         "docs": {
           "tags": [{
               "name": "deprecated",
-              "text": "Use selected instead."
+              "text": "Use `selected` instead."
             }],
-          "text": "is the step active"
+          "text": "When `true`, the component is selected."
         },
         "attribute": "active",
         "reflect": true,
@@ -234,7 +253,7 @@ export class StepperItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, step is selected"
+          "text": "When `true`, the component is selected."
         },
         "attribute": "selected",
         "reflect": true,
@@ -252,7 +271,7 @@ export class StepperItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "has the step been completed"
+          "text": "When `true`, the step has been completed."
         },
         "attribute": "complete",
         "reflect": true,
@@ -270,7 +289,7 @@ export class StepperItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component contains an error that requires resolution from the user."
+          "text": "When `true`, the component contains an error that requires resolution from the user."
         },
         "attribute": "error",
         "reflect": true,
@@ -288,7 +307,7 @@ export class StepperItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -467,6 +486,11 @@ export class StepperItem {
       }
     };
   }
+  static get states() {
+    return {
+      "effectiveLocale": {}
+    };
+  }
   static get events() {
     return [{
         "method": "calciteInternalStepperItemKeyEvent",
@@ -593,6 +617,9 @@ export class StepperItem {
       }, {
         "propName": "disabled",
         "methodName": "disabledWatcher"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "effectiveLocaleWatcher"
       }];
   }
   static get listeners() {

package/dist/collection/components/switch/switch.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.597
+ * v1.0.0-next.599
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
@@ -16,17 +16,17 @@ export class Switch {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** When true, interaction is prevented and the component is displayed with lower opacity. */
+    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
     this.disabled = false;
     /** Specifies the size of the component. */
     this.scale = "m";
     /**
-     * When true, the component is checked.
+     * When `true`, the component is checked.
      *
      * @deprecated use `checked` instead.
      */
     this.switched = false;
-    /** When true, the component is checked. */
+    /** When `true`, the component is checked. */
     this.checked = false;
     //--------------------------------------------------------------------------
     //
@@ -125,7 +125,7 @@ export class Switch {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -203,7 +203,7 @@ export class Switch {
               "name": "deprecated",
               "text": "use `checked` instead."
             }],
-          "text": "When true, the component is checked."
+          "text": "When `true`, the component is checked."
         },
         "attribute": "switched",
         "reflect": true,
@@ -221,7 +221,7 @@ export class Switch {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is checked."
+          "text": "When `true`, the component is checked."
         },
         "attribute": "checked",
         "reflect": true,
@@ -255,7 +255,7 @@ export class Switch {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fires when the checked value has changed.\n\n**Note:** The event payload is deprecated, use the component's \"checked\" property 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/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.597
+ * v1.0.0-next.599
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -12,7 +12,7 @@ import { nodeListToArray } from "../../utils/dom";
 export class Tab {
   constructor() {
     /**
-     * When true, the component's contents are selected.
+     * When `true`, the component's contents are selected.
      *
      * Only one tab can be selected within the `calcite-tabs` parent.
      *
@@ -20,7 +20,7 @@ export class Tab {
      */
     this.active = false;
     /**
-     * When true, the component's contents are selected.
+     * When `true`, the component's contents are selected.
      *
      * Only one tab can be selected within the `calcite-tabs` parent.
      */
@@ -163,7 +163,7 @@ export class Tab {
               "name": "deprecated",
               "text": "Use `selected` instead."
             }],
-          "text": "When true, the component's contents are selected.\n\nOnly one tab can be selected within the `calcite-tabs` parent."
+          "text": "When `true`, the component's contents are selected.\n\nOnly one tab can be selected within the `calcite-tabs` parent."
         },
         "attribute": "active",
         "reflect": true,
@@ -181,7 +181,7 @@ export class Tab {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component's contents are selected.\n\nOnly one tab can be selected within the `calcite-tabs` parent."
+          "text": "When `true`, the component's contents are selected.\n\nOnly one tab can be selected within the `calcite-tabs` parent."
         },
         "attribute": "selected",
         "reflect": true,

package/dist/collection/components/tab-nav/tab-nav.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.597
+ * v1.0.0-next.599
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, filterDirectChildren } from "../../utils/dom";

package/dist/collection/components/tab-title/tab-title.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.597
+ * v1.0.0-next.599
  */
 import { Build, h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -19,7 +19,7 @@ export class TabTitle {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, the component and its respective `calcite-tab` contents are selected.
+     * When `true`, the component and its respective `calcite-tab` contents are selected.
      *
      * Only one tab can be selected within the `calcite-tabs` parent.
      *
@@ -27,12 +27,12 @@ export class TabTitle {
      */
     this.active = false;
     /**
-     * When true, the component and its respective `calcite-tab` contents are selected.
+     * When `true`, the component and its respective `calcite-tab` contents are selected.
      *
      * Only one tab can be selected within the `calcite-tabs` parent.
      */
     this.selected = false;
-    /** When true, interaction is prevented and the component is displayed with lower opacity.  */
+    /** When `true`, interaction is prevented and the component is displayed with lower opacity.  */
     this.disabled = false;
     /**
      * @internal
@@ -248,7 +248,7 @@ export class TabTitle {
               "name": "deprecated",
               "text": "Use `selected` instead."
             }],
-          "text": "When true, the component and its respective `calcite-tab` contents are selected.\n\nOnly one tab can be selected within the `calcite-tabs` parent."
+          "text": "When `true`, the component and its respective `calcite-tab` contents are selected.\n\nOnly one tab can be selected within the `calcite-tabs` parent."
         },
         "attribute": "active",
         "reflect": true,
@@ -266,7 +266,7 @@ export class TabTitle {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component and its respective `calcite-tab` contents are selected.\n\nOnly one tab can be selected within the `calcite-tabs` parent."
+          "text": "When `true`, the component and its respective `calcite-tab` contents are selected.\n\nOnly one tab can be selected within the `calcite-tabs` parent."
         },
         "attribute": "selected",
         "reflect": true,
@@ -284,7 +284,7 @@ export class TabTitle {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -324,7 +324,7 @@ export class TabTitle {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "When true, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
+          "text": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
         },
         "attribute": "icon-flip-rtl",
         "reflect": true
@@ -479,7 +479,7 @@ export class TabTitle {
               "name": "see",
               "text": "[TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)"
             }],
-          "text": "Fires when a `calcite-tab` is selected. Emits the \"tab\" property, or the index position."
+          "text": "Fires when a `calcite-tab` is selected. Emits the `tab` property, or the index position."
         },
         "complexType": {
           "original": "TabChangeEventDetail",

package/dist/collection/components/tabs/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.597
+ * v1.0.0-next.599
  */
 export const SLOTS = {
   tabNav: "tab-nav"

package/dist/collection/components/tabs/tabs.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.597
+ * v1.0.0-next.599
  */
 import { h, Fragment } from "@stencil/core";
 import { SLOTS } from "./resources";
@@ -17,11 +17,11 @@ export class Tabs {
     //
     //--------------------------------------------------------------------------
     /**
-     * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start ("inline"), or across and centered ("center").
+     * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`"inline"`), or across and centered (`"center"`).
      */
     this.layout = "inline";
     /**
-     * Specifies the position of the component in relation to the `calcite-tab`s. The "above" and "below" values are deprecated.
+     * Specifies the position of the component in relation to the `calcite-tab`s. The `"above"` and `"below"` values are deprecated.
      *
      */
     this.position = "top";
@@ -30,7 +30,7 @@ export class Tabs {
      */
     this.scale = "m";
     /**
-     * When true and layout is set to "inline", the component will display with a folder style menu.
+     * When `true` and `layout` is set to `"inline"`, the component will display with a folder style menu.
      */
     this.bordered = false;
     //--------------------------------------------------------------------------
@@ -186,7 +186,7 @@ export class Tabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (\"inline\"), or across and centered (\"center\")."
+          "text": "Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`\"inline\"`), or across and centered (`\"center\"`)."
         },
         "attribute": "layout",
         "reflect": true,
@@ -209,7 +209,7 @@ export class Tabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies the position of the component in relation to the `calcite-tab`s. The \"above\" and \"below\" values are deprecated."
+          "text": "Specifies the position of the component in relation to the `calcite-tab`s. The `\"above\"` and `\"below\"` values are deprecated."
         },
         "attribute": "position",
         "reflect": true,
@@ -250,7 +250,7 @@ export class Tabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true and layout is set to \"inline\", the component will display with a folder style menu."
+          "text": "When `true` and `layout` is set to `\"inline\"`, the component will display with a folder style menu."
         },
         "attribute": "bordered",
         "reflect": true,

package/dist/collection/components/tile/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.597
+ * v1.0.0-next.599
  */
 export const SLOTS = {
   contentStart: "content-start",

package/dist/collection/components/tile/tile.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.597
+ * v1.0.0-next.599
  */
 import { Fragment, h } from "@stencil/core";
 import { SLOTS } from "./resources";
@@ -20,17 +20,17 @@ export class Tile {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, the component is active.
+     * When `true`, the component is active.
      */
     this.active = false;
     /**
-     * When true, interaction is prevented and the component is displayed with lower opacity.
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
      * The component's embed mode.
      *
-     * When true, renders without a border and padding for use by other components.
+     * When `true`, renders without a border and padding for use by other components.
      */
     this.embed = false;
     /**
@@ -39,7 +39,7 @@ export class Tile {
      * @internal
      */
     this.focused = false;
-    /** When true, the component is not displayed and is not focusable.  */
+    /** When `true`, the component is not displayed and is not focusable.  */
     this.hidden = false;
   }
   // --------------------------------------------------------------------------
@@ -101,7 +101,7 @@ export class Tile {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is active."
+          "text": "When `true`, the component is active."
         },
         "attribute": "active",
         "reflect": true,
@@ -136,7 +136,7 @@ export class Tile {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, interaction is prevented and the component is displayed with lower opacity."
+          "text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
         },
         "attribute": "disabled",
         "reflect": true,
@@ -154,7 +154,7 @@ export class Tile {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The component's embed mode.\n\nWhen true, renders without a border and padding for use by other components."
+          "text": "The component's embed mode.\n\nWhen `true`, renders without a border and padding for use by other components."
         },
         "attribute": "embed",
         "reflect": true,
@@ -210,7 +210,7 @@ export class Tile {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is not displayed and is not focusable."
+          "text": "When `true`, the component is not displayed and is not focusable."
         },
         "attribute": "hidden",
         "reflect": true,
@@ -228,7 +228,7 @@ export class Tile {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "When embed is \"false\", the url for the component."
+          "text": "When embed is `\"false\"`, the URL for the component."
         },
         "attribute": "href",
         "reflect": true

package/dist/collection/components/tile-select/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.597
+ * v1.0.0-next.599
  */
 export const CSS = {
   checked: "checked",