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

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

@@ -1,24 +1,28 @@
 /*!
  * 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, Element, Listen, Method, Event, h, State, Host, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { nodeListToArray } from "../../utils/dom";
 /**
- * @slot - A slot for adding custom content.
+ * @slot - A slot for adding content to the component.
  */
 export class Tab {
   constructor() {
     /**
-     * Show this tab
+     * When true, the component's contents are selected.
      *
-     * @deprecated Use selected instead.
+     * Only one tab can be selected within the `calcite-tabs` parent.
+     *
+     * @deprecated Use "selected" instead.
      */
     this.active = false;
     /**
-     * When true, display this tab.
+     * When true, the component's contents are selected.
+     *
+     * Only one tab can be selected within the `calcite-tabs` parent.
      */
     this.selected = false;
     /**
@@ -98,7 +102,7 @@ export class Tab {
   //
   //--------------------------------------------------------------------------
   /**
-   * Return the index of this tab within the tab array
+   * Returns the index of the component item within the tab array.
    */
   async getTabIndex() {
     return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter((el) => el.matches("calcite-tab")), this.el);
@@ -134,10 +138,10 @@ export class Tab {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "Optionally include a unique name for this tab,\nbe sure to also set this name on the associated title."
+        "text": "Specifies a unique name for the component.\n\nWhen specified, use the same value on the `calcite-tab-title`."
       },
       "attribute": "tab",
       "reflect": true
@@ -155,9 +159,9 @@ export class Tab {
       "docs": {
         "tags": [{
             "name": "deprecated",
-            "text": "Use selected instead."
+            "text": "Use \"selected\" instead."
           }],
-        "text": "Show this tab"
+        "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,
@@ -175,7 +179,7 @@ export class Tab {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, display this tab."
+        "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,
@@ -243,7 +247,7 @@ export class Tab {
         "return": "Promise<number>"
       },
       "docs": {
-        "text": "Return the index of this tab within the tab array",
+        "text": "Returns the index of the component item within the tab array.",
         "tags": []
       }
     },

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-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, filterDirectChildren } from "../../utils/dom";
@@ -171,6 +171,9 @@ export class TabNav {
     }
     event.stopPropagation();
   }
+  iconStartChangeHandler() {
+    this.updateActiveWidth();
+  }
   updateOffsetPosition() {
     var _a, _b, _c, _d, _e;
     const dir = getElementDir(this.el);
@@ -222,10 +225,10 @@ export class TabNav {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Name to use when saving selected tab data to localStorage"
+        "text": "Specifies the name when saving selected `calcite-tab` data to `localStorage`."
       },
       "attribute": "storage-id",
-      "reflect": false
+      "reflect": true
     },
     "syncId": {
       "type": "string",
@@ -239,10 +242,10 @@ export class TabNav {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Pass the same string to multiple tab navs to keep them all in sync if one changes"
+        "text": "Specifies text to update multiple components to keep in sync if one changes."
       },
       "attribute": "sync-id",
-      "reflect": false
+      "reflect": true
     },
     "scale": {
       "type": "string",
@@ -399,7 +402,7 @@ export class TabNav {
             "name": "see",
             "text": "[TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)"
           }],
-        "text": "Emitted when the active tab changes"
+        "text": "Emits when the selected `calcite-tab` changes."
       },
       "complexType": {
         "original": "TabChangeEventDetail",
@@ -479,5 +482,11 @@ export class TabNav {
       "target": "body",
       "capture": false,
       "passive": false
+    }, {
+      "name": "calciteInternalTabIconChanged",
+      "method": "iconStartChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

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-beta.92
+ * v1.0.0-beta.94
  */
 import { Build, Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -19,16 +19,20 @@ export class TabTitle {
     //
     //--------------------------------------------------------------------------
     /**
-     * Show this tab title as selected
+     * When true, the component and its respective `calcite-tab` contents are selected.
      *
-     * @deprecated Use selected instead.
+     * Only one tab can be selected within the `calcite-tabs` parent.
+     *
+     * @deprecated Use "selected" instead.
      */
     this.active = false;
     /**
-     * When true, display this tab title as 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;
-    /** Disable this tab title  */
+    /** When true, interaction is prevented and the component is displayed with lower opacity.  */
     this.disabled = false;
     /**
      * @internal
@@ -43,6 +47,9 @@ export class TabTitle {
     this.mutationObserver = createObserver("mutation", () => this.updateHasText());
     /** determine if there is slotted text for styling purposes */
     this.hasText = false;
+    this.resizeObserver = createObserver("resize", () => {
+      this.calciteInternalTabIconChanged.emit();
+    });
     this.guid = `calcite-tab-title-${guid()}`;
   }
   activeHandler(value) {
@@ -72,12 +79,13 @@ export class TabTitle {
     this.parentTabsEl = this.el.closest("calcite-tabs");
   }
   disconnectedCallback() {
-    var _a, _b;
+    var _a, _b, _c;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     // Dispatching to body in order to be listened by other elements that are still connected to the DOM.
     (_b = document.body) === null || _b === void 0 ? void 0 : _b.dispatchEvent(new CustomEvent("calciteTabTitleUnregister", {
       detail: this.el
     }));
+    (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
   }
   componentWillLoad() {
     if (Build.isBrowser) {
@@ -108,7 +116,7 @@ export class TabTitle {
       h("div", { class: {
           container: true,
           "container--has-text": this.hasText
-        } },
+        }, ref: (el) => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); } },
         this.iconStart ? iconStartEl : null,
         h("slot", null),
         this.iconEnd ? iconEndEl : null)));
@@ -179,7 +187,7 @@ export class TabTitle {
   //
   //--------------------------------------------------------------------------
   /**
-   * Return the index of this title within the nav
+   * Returns the index of the title within the `calcite-tab-nav`.
    */
   async getTabIndex() {
     return Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-tab-title"), this.el);
@@ -237,9 +245,9 @@ export class TabTitle {
       "docs": {
         "tags": [{
             "name": "deprecated",
-            "text": "Use selected instead."
+            "text": "Use \"selected\" instead."
           }],
-        "text": "Show this tab title as selected"
+        "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,
@@ -257,7 +265,7 @@ export class TabTitle {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, display this tab title as selected."
+        "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,
@@ -275,7 +283,7 @@ export class TabTitle {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Disable this tab title"
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -293,7 +301,7 @@ export class TabTitle {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "optionally pass an icon to display at the end of a tab title - accepts calcite ui icon names"
+        "text": "Specifies an icon to display at the end of the component - accepts Calcite UI icon names."
       },
       "attribute": "icon-end",
       "reflect": true
@@ -315,7 +323,7 @@ export class TabTitle {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "flip the icon(s) in rtl"
+        "text": "When true, the icon will be flipped when the element direction is right-to-left (\"rtl\")."
       },
       "attribute": "icon-flip-rtl",
       "reflect": true
@@ -332,7 +340,7 @@ export class TabTitle {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "optionally pass an icon to display at the start of a tab title - accepts calcite ui icon names"
+        "text": "Specifies an icon to display at the start of the component - accepts Calcite UI icon names."
       },
       "attribute": "icon-start",
       "reflect": true
@@ -445,7 +453,7 @@ export class TabTitle {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Optionally include a unique name for the tab title,\nbe sure to also set this name on the associated tab."
+        "text": "Specifies a unique name for the component.\n\nWhen specified, use the same value on the `calcite-tab`."
       },
       "attribute": "tab",
       "reflect": true
@@ -466,7 +474,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 specific tab is activated. 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",
@@ -492,7 +500,7 @@ export class TabTitle {
             "name": "internal",
             "text": undefined
           }],
-        "text": "Fires when a specific tab is activated (`event.details`)"
+        "text": "Fires when a `calcite-tab` is selected (`event.details`)."
       },
       "complexType": {
         "original": "TabChangeEventDetail",
@@ -563,6 +571,24 @@ export class TabTitle {
           }
         }
       }
+    }, {
+      "method": "calciteInternalTabIconChanged",
+      "name": "calciteInternalTabIconChanged",
+      "bubbles": true,
+      "cancelable": false,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "internal",
+            "text": undefined
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "getTabIndex": {
@@ -577,7 +603,7 @@ export class TabTitle {
         "return": "Promise<number>"
       },
       "docs": {
-        "text": "Return the index of this title within the nav",
+        "text": "Returns the index of the title within the `calcite-tab-nav`.",
         "tags": []
       }
     },

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

package/dist/collection/components/tabs/tabs.js

@@ -1,13 +1,13 @@
 /*!
  * 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, Element, Listen, State, Fragment } from "@stencil/core";
 import { SLOTS } from "./resources";
 /**
  * @slot - A slot for adding `calcite-tab`s.
- * @slot tab-nav - A slot for adding a tab navigation component.
+ * @slot tab-nav - A slot for adding a `calcite-tab-nav`.
  */
 export class Tabs {
   constructor() {
@@ -17,20 +17,20 @@ export class Tabs {
     //
     //--------------------------------------------------------------------------
     /**
-     * Align tab titles to the edge or fully justify them across the tab nav ("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";
     /**
-     * Display the tabs top (default) or bottom of the tab content. above and below 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";
     /**
-     * Specify the scale of the tabs component, defaults to m
+     * Specifies the size of the component.
      */
     this.scale = "m";
     /**
-     * Optionally enable tabs to appear like a folder-style menu when its layout is "inline"
+     * When true and layout is set to "inline", the component will display with a folder style menu.
      */
     this.bordered = false;
     //--------------------------------------------------------------------------
@@ -184,7 +184,7 @@ export class Tabs {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Align tab titles to the edge or fully justify them across the tab nav (\"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,
@@ -207,7 +207,7 @@ export class Tabs {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display the tabs top (default) or bottom of the tab content. above and below 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,
@@ -230,7 +230,7 @@ export class Tabs {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specify the scale of the tabs component, defaults to m"
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -248,7 +248,7 @@ export class Tabs {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Optionally enable tabs to appear like a folder-style menu when its layout is \"inline\""
+        "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-beta.92
+ * v1.0.0-beta.94
  */
 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-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Fragment, h, Prop } from "@stencil/core";
 import { SLOTS } from "./resources";
@@ -9,8 +9,8 @@ import { getSlotted } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
- * @slot content-start - A slot for adding non-actionable elements before the tile content.
- * @slot content-end - A slot for adding non-actionable elements after the tile content.
+ * @slot content-start - A slot for adding non-actionable elements before the component's content.
+ * @slot content-end - A slot for adding non-actionable elements after the component's content.
  */
 export class Tile {
   constructor() {
@@ -19,21 +19,27 @@ export class Tile {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** The active state of the tile. */
+    /**
+     * When true, the component is active.
+     */
     this.active = false;
     /**
-     * When true, prevents interaction.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
-    /** The embed mode of the tile.  When true, renders without a border and padding for use by other components. */
+    /**
+     * The component's embed mode.
+     *
+     * When true, renders without a border and padding for use by other components.
+     */
     this.embed = false;
     /**
-     * The focused state of the tile.
+     * The focused state of the component.
      *
      * @internal
      */
     this.focused = false;
-    /** The hidden state of the tile. */
+    /** When true, the component is not displayed and is not focusable.  */
     this.hidden = false;
   }
   // --------------------------------------------------------------------------
@@ -100,7 +106,7 @@ export class Tile {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The active state of the tile."
+        "text": "When true, the component is active."
       },
       "attribute": "active",
       "reflect": true,
@@ -118,7 +124,7 @@ export class Tile {
       "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
@@ -135,7 +141,7 @@ export class Tile {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, prevents interaction."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -153,7 +159,7 @@ export class Tile {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The embed mode of the tile.  When 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,
@@ -174,7 +180,7 @@ export class Tile {
             "name": "internal",
             "text": undefined
           }],
-        "text": "The focused state of the tile."
+        "text": "The focused state of the component."
       },
       "attribute": "focused",
       "reflect": true,
@@ -192,7 +198,7 @@ export class Tile {
       "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
@@ -209,7 +215,7 @@ export class Tile {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The hidden state of the tile."
+        "text": "When true, the component is not displayed and is not focusable."
       },
       "attribute": "hidden",
       "reflect": true,
@@ -227,7 +233,7 @@ export class Tile {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The (optional) url for the tile. (Only applies when embed is set to false)"
+        "text": "When embed is \"false\", the url for the component."
       },
       "attribute": "href",
       "reflect": true
@@ -244,7 +250,7 @@ export class Tile {
       "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

package/dist/collection/components/tile-select/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/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 = {
   checked: "checked",