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

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.598
  */
 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/stepper.stories.js

@@ -0,0 +1,163 @@
+import { select, text } from "@storybook/addon-knobs";
+import { boolean, createSteps, stepStory, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme1 from "./readme.md";
+import readme2 from "../stepper-item/readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Stepper",
+    parameters: {
+        notes: [readme1, readme2]
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <h1>Default</h1>
+  <calcite-stepper
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    ${boolean("numbered", true)}
+    ${boolean("icon", true)}
+  >
+    <calcite-stepper-item
+      item-title="${text("item-1-title", "Choose method")}"
+      item-subtitle="${text("item-1-subtitle", "Add members without sending invitations")}"
+      complete
+    >
+      <calcite-notice active width="full"><div slot="message">Step 1 Content Goes Here</div></calcite-notice>
+    </calcite-stepper-item>
+    <calcite-stepper-item
+      item-title="${text("item-2-title", "Compile member list")}"
+      item-subtitle="${text("item-2-subtitle", "")}"
+      complete
+      error
+    >
+      <calcite-notice active width="full"><div slot="message">Step 2 Content Goes Here</div></calcite-notice>
+    </calcite-stepper-item>
+    <calcite-stepper-item
+      item-title="${text("item-3-title", "Set member properties")}"
+      item-subtitle="${text("item-3-subtitle", "")}"
+      active
+    >
+      <calcite-notice active width="full"><div slot="message">Step 3 Content Goes Here</div></calcite-notice>
+    </calcite-stepper-item>
+    <calcite-stepper-item
+      item-title="${text("item-4-title", "Confirm and complete")}"
+      item-subtitle="${text("item-4-subtitle", "Disabled example")}"
+      disabled
+    >
+      <calcite-notice active width="full"><div slot="message">Step 4 Content Goes Here</div></calcite-notice>
+    </calcite-stepper-item>
+  </calcite-stepper>
+  <h1>No Content</h1>
+  <calcite-stepper
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    ${boolean("numbered", true)}
+    ${boolean("icon", true)}
+  >
+    <calcite-stepper-item
+      item-title="${text("item-1-title", "Choose method")}"
+      item-subtitle="${text("item-1-subtitle", "Add members without sending invitations")}"
+      complete
+    >
+    </calcite-stepper-item>
+    <calcite-stepper-item
+      item-title="${text("item-2-title", "Compile member list")}"
+      item-subtitle="${text("item-2-subtitle", "")}"
+      complete
+      error
+    >
+    </calcite-stepper-item>
+    <calcite-stepper-item
+      item-title="${text("item-3-title", "Set member properties")}"
+      item-subtitle="${text("item-3-subtitle", "")}"
+      selected
+    >
+    </calcite-stepper-item>
+    <calcite-stepper-item
+      item-title="${text("item-4-title", "Confirm and complete")}"
+      item-subtitle="${text("item-4-subtitle", "Disabled example")}"
+      disabled
+    >
+    </calcite-stepper-item>
+  </calcite-stepper>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+<div dir="rtl">
+  <calcite-stepper
+  class="calcite-theme-dark"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    ${boolean("numbered", true)}
+    ${boolean("icon", true)}
+  >
+    <calcite-stepper-item
+      item-title="${text("item-1-title", "Choose method")}"
+      item-subtitle="${text("item-1-subtitle", "Add members without sending invitations")}"
+      complete
+    >
+      <calcite-notice active width="full"><div slot=message">Step 1 Content Goes Here</div></calcite-notice>
+    </calcite-stepper-item>
+    <calcite-stepper-item
+      item-title="${text("item-2-title", "Compile member list")}"
+      item-subtitle="${text("item-2-subtitle", "")}"
+      complete
+      error
+    >
+      <calcite-notice active width="full"><div slot="message">Step 2 Content Goes Here</div></calcite-notice>
+    </calcite-stepper-item>
+    <calcite-stepper-item
+      item-title="${text("item-3-title", "Set member properties")}"
+      item-subtitle="${text("item-3-subtitle", "")}"
+      active
+    >
+      <calcite-notice active width="full"><div slot="message">Step 3 Content Goes Here</div></calcite-notice>
+    </calcite-stepper-item>
+    <calcite-stepper-item
+      item-title="${text("item-4-title", "Confirm and complete")}"
+      item-subtitle="${text("item-4-subtitle", "Disabled example")}"
+      disabled
+    >
+      <calcite-notice active width="full"><div slot="message">Step 4 Content Goes Here</div></calcite-notice>
+    </calcite-stepper-item>
+  </calcite-stepper>
+</div>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const minHeight_TestOnly = stepStory(() => html `<calcite-stepper style="min-height: 500px;">
+    <calcite-stepper-item item-title="Title one" id="one"> Step one </calcite-stepper-item>
+    <calcite-stepper-item item-title="Title two"> Step two </calcite-stepper-item>
+    <calcite-stepper-item item-title="Title three"> Step three </calcite-stepper-item>
+  </calcite-stepper>`, createSteps("calcite-stepper").click("#one").snapshot("stepper with min-height"));
+export const overriddenWidth_TestOnly = () => html ` <calcite-stepper numbered style="width: 50vw">
+  <calcite-stepper-item item-title="Choose method" item-subtitle="Add members without sending invitations" complete>
+    <calcite-notice active width="full">
+      <div slot="message">Step 1 Content Goes Here</div>
+    </calcite-notice>
+  </calcite-stepper-item>
+  <calcite-stepper-item item-title="Compile member list" complete error>
+    <calcite-notice active width="full">
+      <div slot="message">Step 2 Content Goes Here</div>
+    </calcite-notice>
+  </calcite-stepper-item>
+  <calcite-stepper-item item-title="Set member properties" item-subtitle="" active="">
+    <calcite-notice active width="full">
+      <div slot="message">Step 3 Content Goes Here</div>
+    </calcite-notice>
+  </calcite-stepper-item>
+  <calcite-stepper-item item-title="Confirm and complete" item-subtitle="Disabled example" disabled="">
+    <calcite-notice active width="full">
+      <div slot="message">Step 4 Content Goes Here</div>
+    </calcite-notice>
+  </calcite-stepper-item>
+</calcite-stepper>`;
+export const disabled_TestOnly = () => html `<calcite-stepper>
+  <calcite-stepper-item item-title="item1" complete>1</calcite-stepper-item>
+  <calcite-stepper-item item-title="item2">2</calcite-stepper-item>
+  <calcite-stepper-item item-title="item3" active>3</calcite-stepper-item>
+  <calcite-stepper-item item-title="item4" disabled>4</calcite-stepper-item>
+</calcite-stepper>`;

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.598
  */
 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.598
  */
 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/switch/switch.stories.js

@@ -0,0 +1,32 @@
+import { select } from "@storybook/addon-knobs";
+import { boolean, storyFilters } from "../../../.storybook/helpers";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+import { themesDarkDefault } from "../../../.storybook/utils";
+export default {
+    title: "Components/Controls/Switch",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <calcite-switch
+    name="setting"
+    value="enabled"
+    ${boolean("checked", true)}
+    ${boolean("disabled", false)}
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+  ></calcite-switch>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <calcite-switch
+    class="calcite-theme-dark"
+    name="setting"
+    value="enabled"
+    ${boolean("checked", true)}
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+  ></calcite-switch>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const disabled_TestOnly = () => html `<calcite-switch disabled checked></calcite-switch>`;

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.598
  */
 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.598
  */
 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.598
  */
 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.598
  */
 export const SLOTS = {
   tabNav: "tab-nav"