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

package/dist/collection/components/input-time-picker/input-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-next.597
+ * v1.0.0-next.598
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -9,7 +9,8 @@ import { formatTimeString, isValidTime, localizeTimeString } from "../../utils/t
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
-import { connectLocalized, disconnectLocalized, updateEffectiveLocale } from "../../utils/locale";
+import { connectLocalized, disconnectLocalized, numberStringFormatter, updateEffectiveLocale } from "../../utils/locale";
+import { numberKeys } from "../../utils/key";
 export class InputTimePicker {
   constructor() {
     //--------------------------------------------------------------------------
@@ -18,17 +19,17 @@ export class InputTimePicker {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, the component is active.
+     * When `true`, the component is active.
      *
      * @deprecated Use `open` instead.
      */
     this.active = false;
-    /** When true, displays the `calcite-time-picker` component. */
+    /** When `true`, displays the `calcite-time-picker` component. */
     this.open = 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;
     /**
-     * When true, the component's value can be read, but controls are not accessible and the value cannot be modified.
+     * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
      *
      * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
      */
@@ -78,9 +79,21 @@ export class InputTimePicker {
     this.calciteInternalInputBlurHandler = () => {
       this.open = false;
       const shouldIncludeSeconds = this.shouldIncludeSeconds();
-      const locale = this.effectiveLocale;
-      const localizedInputValue = localizeTimeString(this.calciteInputEl.value, locale, shouldIncludeSeconds);
-      this.setInputValue(localizedInputValue || localizeTimeString(this.value, locale, shouldIncludeSeconds));
+      const { effectiveLocale: locale, numberingSystem, value, calciteInputEl } = this;
+      numberStringFormatter.numberFormatOptions = {
+        locale,
+        numberingSystem,
+        useGrouping: false
+      };
+      const delocalizedValue = numberStringFormatter.delocalize(calciteInputEl.value);
+      const localizedInputValue = localizeTimeString({
+        value: delocalizedValue,
+        includeSeconds: shouldIncludeSeconds,
+        locale,
+        numberingSystem
+      });
+      this.setInputValue(localizedInputValue ||
+        localizeTimeString({ value, locale, numberingSystem, includeSeconds: shouldIncludeSeconds }));
     };
     this.calciteInternalInputFocusHandler = (event) => {
       if (!this.readOnly) {
@@ -90,7 +103,21 @@ export class InputTimePicker {
     };
     this.calciteInputInputHandler = (event) => {
       const target = event.target;
-      this.setValue({ value: target.value });
+      numberStringFormatter.numberFormatOptions = {
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        useGrouping: false
+      };
+      const delocalizedValue = numberStringFormatter.delocalize(target.value);
+      this.setValue({ value: delocalizedValue });
+      // only translate the numerals until blur
+      const localizedValue = delocalizedValue
+        .split("")
+        .map((char) => numberKeys.includes(char)
+        ? numberStringFormatter.numberFormatter.format(Number(char))
+        : char)
+        .join("");
+      this.setInputValue(localizedValue);
     };
     this.timePickerChangeHandler = (event) => {
       event.stopPropagation();
@@ -136,7 +163,12 @@ export class InputTimePicker {
     this.setValue = ({ value, origin = "input" }) => {
       const previousValue = this.value;
       const newValue = formatTimeString(value);
-      const newLocalizedValue = localizeTimeString(newValue, this.effectiveLocale, this.shouldIncludeSeconds());
+      const newLocalizedValue = localizeTimeString({
+        value: newValue,
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        includeSeconds: this.shouldIncludeSeconds()
+      });
       this.internalValueChange = origin !== "external" && origin !== "loading";
       const shouldEmit = origin !== "loading" &&
         origin !== "external" &&
@@ -199,7 +231,12 @@ export class InputTimePicker {
     this.internalValueChange = false;
   }
   effectiveLocaleWatcher() {
-    this.setInputValue(localizeTimeString(this.value, this.effectiveLocale, this.shouldIncludeSeconds()));
+    this.setInputValue(localizeTimeString({
+      value: this.value,
+      locale: this.effectiveLocale,
+      numberingSystem: this.numberingSystem,
+      includeSeconds: this.shouldIncludeSeconds()
+    }));
   }
   clickHandler(event) {
     if (event.composedPath().includes(this.calciteTimePickerEl)) {
@@ -278,7 +315,7 @@ export class InputTimePicker {
   // --------------------------------------------------------------------------
   render() {
     const popoverId = `${this.referenceElementId}-popover`;
-    return (h(Host, { onKeyDown: this.keyDownHandler }, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: this.readOnly, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), h(HiddenFormInputSlot, { component: this })));
+    return (h(Host, { onKeyDown: this.keyDownHandler }, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: this.readOnly, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.effectiveLocale, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-input-time-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -309,7 +346,7 @@ export class InputTimePicker {
               "name": "deprecated",
               "text": "Use `open` instead."
             }],
-          "text": "When true, the component is active."
+          "text": "When `true`, the component is active."
         },
         "attribute": "active",
         "reflect": true,
@@ -327,7 +364,7 @@ export class InputTimePicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, displays the `calcite-time-picker` component."
+          "text": "When `true`, displays the `calcite-time-picker` component."
         },
         "attribute": "open",
         "reflect": true,
@@ -345,7 +382,7 @@ export class InputTimePicker {
         "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,
@@ -366,7 +403,7 @@ export class InputTimePicker {
               "name": "mdn",
               "text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
             }],
-          "text": "When true, the component's value can be read, but controls are not accessible and the value cannot be modified."
+          "text": "When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified."
         },
         "attribute": "read-only",
         "reflect": true,
@@ -619,6 +656,28 @@ export class InputTimePicker {
         "attribute": "name",
         "reflect": 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": false
+      },
       "required": {
         "type": "boolean",
         "mutable": false,

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

@@ -0,0 +1,77 @@
+import { number, select, text } from "@storybook/addon-knobs";
+import { boolean, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+import { defaultMenuPlacement, menuPlacements } from "../../utils/floating-ui";
+export default {
+    title: "Components/Controls/Time/Input Time Picker",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <calcite-input-time-picker
+    ${boolean("disabled", false)}
+    ${boolean("hidden", false)}
+    name="${text("name", "simple")}"
+    placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    step="${number("step", 1)}"
+    value="${text("value", "10:37")}"
+  >
+  </calcite-input-time-picker>
+`;
+export const disabled_TestOnly = () => html `<calcite-input-time-picker disabled></calcite-input-time-picker>`;
+export const darkThemeRTL_TestOnly = () => html `
+  <calcite-input-time-picker
+    ${boolean("disabled", false)}
+    ${boolean("hidden", false)}
+    class="calcite-theme-dark"
+    name="${text("name", "dark")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    step="${number("step", 1)}"
+    value="${text("value", "22:37")}"
+  >
+  </calcite-input-time-picker>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const open_TestOnly = () => html `
+  <calcite-input-time-picker
+    name="${text("name", "placement-top")}"
+    value="${text("value", "10:37")}"
+    ${boolean("open", true)}
+  >
+  </calcite-input-time-picker>
+`;
+export const koreanLocale_TestOnly = () => html `
+  <calcite-input-time-picker
+    id="reference-element"
+    ${boolean("disabled", false)}
+    ${boolean("hidden", false)}
+    name="${text("name", "light")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    step="${number("step", 1)}"
+    value="${text("value", "10:37")}"
+    lang="ko"
+    open
+  >
+  </calcite-input-time-picker>
+`;
+export const arabicLocaleNumberingSystem_TestOnly = () => html `
+  <calcite-input-time-picker
+    id="reference-element"
+    ${boolean("disabled", false)}
+    ${boolean("hidden", false)}
+    name="${text("name", "light")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+    step="${number("step", 1)}"
+    value="${text("value", "1:33:7")}"
+    lang="ar"
+    numbering-system="arab"
+    dir="rtl"
+    open
+  >
+  </calcite-input-time-picker>
+`;

package/dist/collection/components/label/label.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 { labelDisconnectedEvent, labelConnectedEvent } from "../../utils/label";
@@ -29,13 +29,13 @@ export class Label {
     /** Defines the layout of the label in relation to the component. Use `"inline"` positions to wrap the label and component on the same line. */
     this.layout = "default";
     /**
-     * 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.
      *
      * @deprecated Use the `disabled` property on the component the label is bound to instead.
      */
     this.disabled = false;
     /**
-     * When true, disables the component's spacing.
+     * When `true`, disables the component's spacing.
      *
      * @deprecated Set the `--calcite-label-margin-bottom` css variable to `0` instead.
      */
@@ -201,7 +201,7 @@ export class Label {
               "name": "deprecated",
               "text": "Use the `disabled` property on the component the label is bound to instead."
             }],
-          "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,
@@ -222,7 +222,7 @@ export class Label {
               "name": "deprecated",
               "text": "Set the `--calcite-label-margin-bottom` css variable to `0` instead."
             }],
-          "text": "When true, disables the component's spacing."
+          "text": "When `true`, disables the component's spacing."
         },
         "attribute": "disable-spacing",
         "reflect": true,

package/dist/collection/components/label/label.stories.js

@@ -0,0 +1,178 @@
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+import { createSteps, stepStory, storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Label",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <div style="width:300px;max-width:100%;text-align:center;">
+    <calcite-label>
+      Default label wrapping a switch
+      <calcite-switch></calcite-switch>
+    </calcite-label>
+    <calcite-label>
+      Default label wrapping a radio group
+      <calcite-radio-group>
+        <calcite-radio-group-item value="react" checked>React</calcite-radio-group-item>
+        <calcite-radio-group-item value="ember">Ember</calcite-radio-group-item>
+        <calcite-radio-group-item value="angular">Angular</calcite-radio-group-item>
+      </calcite-radio-group>
+    </calcite-label>
+    <calcite-label layout="inline">
+      Text leading inline
+      <calcite-switch></calcite-switch>
+    </calcite-label>
+    <calcite-label layout="inline">
+      <calcite-switch></calcite-switch>
+      Text trailing inline
+    </calcite-label>
+    <calcite-label layout="inline">
+      Off
+      <calcite-switch></calcite-switch>
+      On
+    </calcite-label>
+    <calcite-label layout="inline">
+      Text leading inline
+      <calcite-checkbox></calcite-checkbox>
+    </calcite-label>
+    <calcite-label>
+      Focus slider test
+      <calcite-slider></calcite-slider>
+    </calcite-label>
+    <calcite-label>
+      Focus slider test
+      <calcite-slider min-value="10" max-value="80"></calcite-slider>
+    </calcite-label>
+    <calcite-label layout="inline">
+      <calcite-checkbox></calcite-checkbox>
+      Text trailing inline
+    </calcite-label>
+    <calcite-label layout="inline-space-between">
+      Text leading inline-space-between
+      <calcite-switch></calcite-switch>
+    </calcite-label>
+    <calcite-label layout="inline-space-between">
+      <calcite-switch></calcite-switch>
+      Text trailing inline-space-between
+    </calcite-label>
+    <calcite-label layout="inline-space-between">
+      Text leading inline-space-between
+      <calcite-checkbox></calcite-checkbox>
+    </calcite-label>
+    <calcite-label layout="inline-space-between">
+      <calcite-checkbox></calcite-checkbox>
+      Text trailing inline-space-between
+    </calcite-label>
+    <calcite-label>
+      Default label wrapping a select
+      <calcite-select>
+        <calcite-option>a</calcite-option>
+        <calcite-option>b</calcite-option>
+        <calcite-option>c</calcite-option>
+      </calcite-select>
+    </calcite-label>
+  </div>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <div style="width:300px;max-width:100%;text-align:center;" class="calcite-theme-dark" dir="rtl">
+    <calcite-label class="calcite-theme-dark">
+      Default label wrapping a switch
+      <calcite-switch></calcite-switch>
+    </calcite-label>
+    <calcite-label class="calcite-theme-dark">
+      Default label wrapping a radio group
+      <calcite-radio-group>
+        <calcite-radio-group-item value="react" checked>React</calcite-radio-group-item>
+        <calcite-radio-group-item value="ember">Ember</calcite-radio-group-item>
+        <calcite-radio-group-item value="angular">Angular</calcite-radio-group-item>
+      </calcite-radio-group>
+    </calcite-label>
+    <calcite-label class="calcite-theme-dark" layout="inline">
+      Text leading inline
+      <calcite-switch></calcite-switch>
+    </calcite-label>
+    <calcite-label class="calcite-theme-dark" layout="inline">
+      <calcite-switch></calcite-switch>
+      Text trailing inline
+    </calcite-label>
+    <calcite-label class="calcite-theme-dark" layout="inline">
+      Off
+      <calcite-switch></calcite-switch>
+      On
+    </calcite-label>
+    <calcite-label class="calcite-theme-dark" layout="inline">
+      Text leading inline
+      <calcite-checkbox></calcite-checkbox>
+    </calcite-label>
+    <calcite-label class="calcite-theme-dark">
+      Focus slider test
+      <calcite-slider></calcite-slider>
+    </calcite-label>
+    <calcite-label class="calcite-theme-dark">
+      Focus slider test
+      <calcite-slider min-value="10" max-value="80"></calcite-slider>
+    </calcite-label>
+    <calcite-label class="calcite-theme-dark" layout="inline">
+      <calcite-checkbox></calcite-checkbox>
+      Text trailing inline
+    </calcite-label>
+    <calcite-label class="calcite-theme-dark" layout="inline-space-between">
+      Text leading inline-space-between
+      <calcite-switch></calcite-switch>
+    </calcite-label>
+    <calcite-label class="calcite-theme-dark" layout="inline-space-between">
+      <calcite-switch></calcite-switch>
+      Text trailing inline-space-between
+    </calcite-label>
+    <calcite-label class="calcite-theme-dark" layout="inline-space-between">
+      Text leading inline-space-between
+      <calcite-checkbox></calcite-checkbox>
+    </calcite-label>
+    <calcite-label class="calcite-theme-dark" layout="inline-space-between">
+      <calcite-checkbox></calcite-checkbox>
+      Text trailing inline-space-between
+    </calcite-label>
+  </div>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const toggleSwitchWithLabel_TestOnly = stepStory(() => html `<calcite-label layout="inline">
+    Toggle theme
+    <calcite-switch id="theme-switch"></calcite-switch>
+  </calcite-label>`, createSteps("calcite-label").click("calcite-label").snapshot("Toggle switch with label"));
+export const spacingWithLabel_TestOnly = () => html `
+  <style>
+    .css-var {
+      --calcite-label-margin-bottom: 0;
+    }
+  </style>
+  <calcite-label class="css-var">
+    I don't have a bottom margin because the document I am rendered in has overridden the --calcite-label-margin-bottom
+    css variable to 0.
+    <calcite-input></calcite-input>
+  </calcite-label>
+  <calcite-label disable-spacing class="css-var">
+    I should still not have a bottom margin because I'm using the disable-spacing prop.
+    <calcite-input></calcite-input>
+  </calcite-label>
+  <calcite-label>
+    I should have a bottom margin
+    <calcite-input></calcite-input>
+  </calcite-label>
+  <calcite-label>
+    I should also have a bottom margin
+    <calcite-input></calcite-input>
+  </calcite-label>
+  <calcite-label disable-spacing>
+    I should not have a bottom margin because I have disable-spacing set.
+    <calcite-input></calcite-input>
+  </calcite-label>
+  <calcite-label disable-spacing>
+    I should not have a bottom margin because I have disable-spacing set.
+    <calcite-input></calcite-input>
+  </calcite-label>
+`;

package/dist/collection/components/label/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 CSS = {
   container: "container"

package/dist/collection/components/link/link.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, getElementDir } from "../../utils/dom";
@@ -18,7 +18,7 @@ export class Link {
     //  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;
     /**
      * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
@@ -111,7 +111,7 @@ export class Link {
         "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,
@@ -186,7 +186,7 @@ export class Link {
         "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

package/dist/collection/components/link/link.stories.js

@@ -0,0 +1,89 @@
+import { text, select } from "@storybook/addon-knobs";
+import { boolean, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import * as icons from "../../../node_modules/@esri/calcite-ui-icons";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+// we can get all unique icon names from all size 16 non-filled icons.
+const iconNames = Object.keys(icons)
+    .filter((iconName) => iconName.endsWith("16"))
+    .map((iconName) => iconName.replace("16", ""));
+export default {
+    title: "Components/Link",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <div
+    style="font-size: ${select("containing font size", ["12", "14", "16", "18", "20", "24", "32"], "16")}px; font-weight: ${select("containing font weight", ["300", "400", "500", "700"], "400")};"
+  >
+    Some wrapping text
+    <calcite-link href="${text("href", "")}" ${boolean("disabled", false)}>
+      ${text("text", "link text here")}</calcite-link
+    >
+    around the link
+  </div>
+`;
+export const iconStart = () => html `
+  <div
+    style="font-size: ${select("containing font size", ["12", "14", "16", "18", "20", "24", "32"], "16")}px; font-weight: ${select("containing font weight", ["300", "400", "500", "700"], "400")};"
+  >
+    Some wrapping text
+    <calcite-link
+      href="${text("href", "")}"
+      ${boolean("disabled", false)}
+      icon-start="${select("icon-start", iconNames, iconNames[0])}"
+    >
+      ${text("text", "link text here")}</calcite-link
+    >
+    around the link
+  </div>
+`;
+export const iconEnd = () => html `
+  <div
+    style="font-size: ${select("containing font size", ["12", "14", "16", "18", "20", "24", "32"], "16")}px; font-weight: ${select("containing font weight", ["300", "400", "500", "700"], "400")};"
+  >
+    Some wrapping text
+    <calcite-link
+      href="${text("href", "")}"
+      ${boolean("disabled", false)}
+      icon-end="${select("icon-end", iconNames, iconNames[0])}"
+    >
+      ${text("text", "link text here")}</calcite-link
+    >
+    around the link
+  </div>
+`;
+export const iconStartAndIconEnd = () => html `
+  <div
+    style="font-size: ${select("containing font size", ["12", "14", "16", "18", "20", "24", "32"], "16")}px; font-weight: ${select("containing font weight", ["300", "400", "500", "700"], "400")};"
+  >
+    Some wrapping text
+    <calcite-link
+      href="${text("href", "")}"
+      ${boolean("disabled", false)}
+      icon-start="${select("icon-start", iconNames, iconNames[0])}"
+      icon-end="${select("icon-end", iconNames, iconNames[0])}"
+    >
+      ${text("text", "link text here")}</calcite-link
+    >
+    around the link
+  </div>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <div
+    class="calcite-theme-dark"
+    dir="rtl"
+    style="color: white; font-size: ${select("containing font size", ["12", "14", "16", "18", "20", "24", "32"], "16")}px; font-weight: ${select("containing font weight", ["300", "400", "500", "700"], "400")};"
+  >
+    Some wrapping text
+    <calcite-link class="calcite-theme-dark" href="${text("href", "")}" ${boolean("disabled", false)}
+      >${text("text", "link text here")}</calcite-link
+    >
+    around the link
+  </div>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const disabled_TestOnly = () => html `<calcite-link disabled>disabled</calcite-link`;

package/dist/collection/components/list/list.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 { CSS } from "./resources";
@@ -19,7 +19,7 @@ export class List {
     //
     // --------------------------------------------------------------------------
     /**
-     * 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;
   }
@@ -75,7 +75,7 @@ export class List {
         "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,