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

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

@@ -0,0 +1,181 @@
+import { boolean, select, text } from "@storybook/addon-knobs";
+import { createComponentHTML as create, filterComponentAttributes, themesDarkDefault } from "../../../.storybook/utils";
+import { ATTRIBUTES } from "../../../.storybook/resources";
+import readme from "./readme.md";
+import { SLOTS, TEXT } from "./resources";
+import { html } from "../../../support/formatting";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Panel",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+const createAttributes = ({ exceptions } = { exceptions: [] }) => {
+    const { scale } = ATTRIBUTES;
+    return filterComponentAttributes([
+        {
+            name: "dismissed",
+            commit() {
+                this.value = boolean("dismissed", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "disabled",
+            commit() {
+                this.value = boolean("disabled", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "dismissible",
+            commit() {
+                this.value = boolean("dismissible", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "height-scale",
+            commit() {
+                this.value = select("heightScale", scale.values, scale.defaultValue);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "loading",
+            commit() {
+                this.value = boolean("loading", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "intl-close",
+            commit() {
+                this.value = text("intlClose", TEXT.close);
+                delete this.build;
+                return this;
+            }
+        }
+    ], exceptions);
+};
+const headerHTML = `<h3 class="heading" slot="${SLOTS.headerContent}">Heading</h3>`;
+const contentHTML = html `
+  <p>
+    Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo
+    semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus
+    habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non.
+    Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti
+    consectetur. Non porttitor tempor orci dictumst magna porta vitae.
+  </p>
+  <p>
+    Ipsum nostra tempus etiam augue ullamcorper scelerisque sapien potenti erat nisi gravida. Vehicula sem tristique
+    sed. Nullam, sociis imperdiet ullamcorper? Dapibus fames primis ridiculus vulputate, habitant inceptos! Nunc
+    torquent lorem urna vehicula volutpat donec nec. Orci massa eu nec donec enim fames, faucibus quam aenean. Laoreet
+    tellus tempor quisque ornare lobortis praesent erat senectus natoque consectetur donec imperdiet. Quis sem cum
+    gravida dictumst a pretium purus aptent amet id. Orci habitasse, praesent facilisis condimentum. Nec elit turpis
+    leo.
+  </p>
+  <p>
+    Tempus per volutpat diam tempor mauris parturient vulputate leo id libero quisque. Mattis aliquam dictum venenatis
+    fringilla. Taciti venenatis, ultrices sollicitudin consequat. Sapien fusce est iaculis potenti ut auctor potenti.
+    Nisi malesuada feugiat vulputate vitae porttitor. Nullam nullam nullam accumsan quis magna in. Elementum, nascetur
+    gravida cras scelerisque inceptos aenean inceptos potenti. Lobortis condimentum accumsan posuere curabitur fermentum
+    diam, natoque quisque. Eget placerat sed aptent orci urna fusce magnis. Vel lacus magnis nunc.
+  </p>
+`;
+const footerHTML = html `
+  <calcite-button slot="${SLOTS.footer}" width="half" appearance="clear">Naw.</calcite-button>
+  <calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
+`;
+const panelContent = `${headerHTML}
+  <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsStart}" icon="bluetooth"></calcite-action>
+  <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
+  ${contentHTML}
+  ${footerHTML}`;
+export const simple = () => create("calcite-panel", createAttributes(), html `
+      ${headerHTML}
+      <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsStart}" icon="bluetooth"></calcite-action>
+      <calcite-action text="Action" label="Action" slot="${SLOTS.headerActionsEnd}" icon="attachment"></calcite-action>
+      ${contentHTML}
+      <calcite-fab slot="fab"></calcite-fab>
+      ${footerHTML}
+    `);
+export const onlyProps = () => html `
+  <div style="width: 300px;">
+    <calcite-panel
+      height-scale="s"
+      heading-level="${text("heading-level", "2")}"
+      summary="${text("summary", "Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall.")}"
+      heading="${text("heading", "Panel title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum")}"
+    />
+  </div>
+`;
+export const disabledWithStyledSlot_TestOnly = () => html `
+  <calcite-panel style="height: 100%;" heading="Heading" disabled>
+    <div id="content" style="height: 100%;">${contentHTML}</div>
+  </calcite-panel>
+`;
+export const darkThemeRTL_TestOnly = () => create("calcite-panel", createAttributes({ exceptions: ["dir", "class"] }).concat([
+    {
+        name: "dir",
+        value: "rtl"
+    },
+    {
+        name: "class",
+        value: "calcite-theme-dark"
+    }
+]), panelContent);
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const noDoubleScrollbars_TestOnly = () => html `
+  <style>
+    #container {
+      display: flex;
+      max-height: 540px;
+      width: 300px;
+    }
+
+    .content {
+      height: 100%;
+      display: flex;
+      padding: 10px;
+      overflow-y: auto; /* Control scrollbar via child */
+    }
+  </style>
+  <div id="container">
+    <calcite-flow>
+      <calcite-panel heading="Example">
+        <div>### Stickied Content e.g. toolbar</div>
+        <div class="content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sapien lectus, ultricies a molestie nec,
+          sollicitudin ac nulla. Pellentesque tincidunt malesuada arcu et placerat. In malesuada neque lectus, at congue
+          est malesuada quis. Proin tincidunt lacus laoreet mauris fringilla accumsan. Cras nec enim eu lectus suscipit
+          vestibulum a laoreet arcu. Duis posuere nunc vel enim blandit, nec vehicula orci aliquam. Vestibulum hendrerit
+          mi vel nisi posuere accumsan. Aenean efficitur est id cursus convallis. Morbi turpis ante, sodales eu tortor
+          eu, mattis bibendum purus. Morbi iaculis nisl nunc, quis accumsan quam laoreet vitae. Aliquam ex ligula,
+          ornare eu ex vitae, tincidunt venenatis lacus. Phasellus risus quam, elementum sed justo porttitor,
+          ullamcorper mattis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+          curae; Nulla non dui at metus porta lacinia congue sit amet quam. Mauris viverra diam neque, in blandit leo
+          vehicula et. Donec non purus vitae nunc tincidunt egestas. Nunc pretium enim magna, sed fringilla lacus
+          viverra in. Nam et pretium nisi. Ut bibendum, ipsum sit amet egestas hendrerit, quam orci sollicitudin purus,
+          sit amet finibus mauris erat in eros. Integer est dui, vehicula a ipsum id, pellentesque semper elit. Fusce
+          euismod volutpat eros vitae imperdiet. Nam suscipit lacus id posuere pharetra. Cras eros ipsum, feugiat non
+          leo non, ornare malesuada eros. Donec egestas purus non quam tempus commodo. Maecenas ex augue, euismod eget
+          magna in, dapibus fermentum felis. Phasellus justo felis, sollicitudin ut ex sed, lobortis scelerisque sem.
+          Pellentesque semper placerat velit, sit amet viverra tortor ultricies eu. Pellentesque habitant morbi
+          tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus feugiat, augue in molestie
+          imperdiet, felis turpis facilisis tortor, at tempus purus risus et sapien. Fusce id nisi id orci elementum
+          sollicitudin. Nam id libero eu odio efficitur rutrum maximus porta lorem. Nunc tristique interdum augue,
+          sodales viverra lectus efficitur vitae. Nam molestie, neque consequat mollis pulvinar, sapien sem semper nunc,
+          et euismod enim sem vitae ligula.
+        </div>
+      </calcite-panel>
+    </calcite-flow>
+  </div>
+`;

package/dist/collection/components/panel/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 = {
   backButton: "back-button",

package/dist/collection/components/pick-list/pick-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 } from "@stencil/core";
 import { ICON_TYPES } from "./resources";
@@ -21,26 +21,26 @@ export class PickList {
     //
     // --------------------------------------------------------------------------
     /**
-     * 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, an input appears at the top of the list that can be used by end users to filter items in the list.
+     * When `true`, an input appears at the top of the list that can be used by end users to filter items in the list.
      */
     this.filterEnabled = false;
     /**
-     * When true, a busy indicator is displayed.
+     * When `true`, a busy indicator is displayed.
      */
     this.loading = false;
     /**
      * Similar to standard radio buttons and checkboxes.
-     * When true, a user can select multiple `calcite-pick-list-item`s at a time.
-     * When false, only a single `calcite-pick-list-item` can be selected at a time,
+     * When `true`, a user can select multiple `calcite-pick-list-item`s at a time.
+     * When `false`, only a single `calcite-pick-list-item` can be selected at a time,
      * and a new selection will deselect previous selections.
      */
     this.multiple = false;
     /**
-     * When true and single-selection is enabled, the selection changes when navigating `calcite-pick-list-item`s via keyboard.
+     * When `true` and single selection is enabled, the selection changes when navigating `calcite-pick-list-item`s via keyboard.
      */
     this.selectionFollowsFocus = false;
     // --------------------------------------------------------------------------
@@ -161,7 +161,7 @@ export class PickList {
         "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,
@@ -179,7 +179,7 @@ export class PickList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, an input appears at the top of the list that can be used by end users to filter items in the list."
+          "text": "When `true`, an input appears at the top of the list that can be used by end users to filter items in the list."
         },
         "attribute": "filter-enabled",
         "reflect": true,
@@ -236,7 +236,7 @@ export class PickList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, a busy indicator is displayed."
+          "text": "When `true`, a busy indicator is displayed."
         },
         "attribute": "loading",
         "reflect": true,
@@ -254,7 +254,7 @@ export class PickList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple `calcite-pick-list-item`s at a time.\nWhen false, only a single `calcite-pick-list-item` can be selected at a time,\nand a new selection will deselect previous selections."
+          "text": "Similar to standard radio buttons and checkboxes.\nWhen `true`, a user can select multiple `calcite-pick-list-item`s at a time.\nWhen `false`, only a single `calcite-pick-list-item` can be selected at a time,\nand a new selection will deselect previous selections."
         },
         "attribute": "multiple",
         "reflect": true,
@@ -272,7 +272,7 @@ export class PickList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true and single-selection is enabled, the selection changes when navigating `calcite-pick-list-item`s via keyboard."
+          "text": "When `true` and single selection is enabled, the selection changes when navigating `calcite-pick-list-item`s via keyboard."
         },
         "attribute": "selection-follows-focus",
         "reflect": true,

package/dist/collection/components/pick-list/pick-list.stories.js

@@ -0,0 +1,142 @@
+import { boolean, text } from "@storybook/addon-knobs";
+import { filterComponentAttributes, createComponentHTML as create, themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import itemReadme from "../pick-list-item/readme.md";
+import groupReadme from "../pick-list-group/readme.md";
+import { html } from "../../../support/formatting";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Pick List",
+    parameters: {
+        notes: [readme, itemReadme, groupReadme]
+    },
+    ...storyFilters()
+};
+const createAttributes = ({ exceptions } = { exceptions: [] }) => {
+    return filterComponentAttributes([
+        {
+            name: "disabled",
+            commit() {
+                this.value = boolean("disabled", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "filter-enabled",
+            commit() {
+                this.value = boolean("filterEnabled", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "loading",
+            commit() {
+                this.value = boolean("loading", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "multiple",
+            commit() {
+                this.value = boolean("multiple", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "selection-follows-focus",
+            commit() {
+                this.value = boolean("selection-follows-focus", false);
+                delete this.build;
+                return this;
+            }
+        }
+    ], exceptions);
+};
+const action = html `
+  <calcite-action
+    slot="actions-end"
+    label="click-me"
+    onClick="console.log('clicked');"
+    appearance="clear"
+    scale="s"
+    icon="information"
+  ></calcite-action>
+`;
+export const simple = () => create("calcite-pick-list", createAttributes(), html `
+      <calcite-pick-list-item label="T. Rex" description="arm strength impaired" value="trex">
+        ${action}
+      </calcite-pick-list-item>
+      <calcite-pick-list-item label="Triceratops" description="3 horn" value="triceratops" selected>
+        ${action}
+      </calcite-pick-list-item>
+      <calcite-pick-list-item label="hi" description="there" value="helloWorld"> ${action} </calcite-pick-list-item>
+    `);
+export const darkThemeRTL_TestOnly = () => create("calcite-pick-list", createAttributes({ exceptions: ["dir", "class"] }).concat([
+    {
+        name: "dir",
+        value: "rtl"
+    },
+    {
+        name: "class",
+        value: "calcite-theme-dark"
+    }
+]), html `
+      <calcite-pick-list-item label="T. Rex" description="arm strength impaired" value="trex">
+        ${action}
+      </calcite-pick-list-item>
+      <calcite-pick-list-item label="Triceratops" description="3 horn" value="triceratops" selected>
+        ${action}
+      </calcite-pick-list-item>
+      <calcite-pick-list-item label="hi" description="there" value="helloWorld"> ${action} </calcite-pick-list-item>
+    `);
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const grouped = () => create("calcite-pick-list", createAttributes(), html `
+      <calcite-pick-list-group group-title="numbers" heading-level="${text("heading-level", "1")}">
+        <calcite-pick-list-item label="one" description="fish" value="one" icon="grip">
+          ${action}
+        </calcite-pick-list-item>
+        <calcite-pick-list-item label="two" description="fish" value="two" icon="grip">
+          ${action}
+        </calcite-pick-list-item>
+      </calcite-pick-list-group>
+      <calcite-pick-list-group group-title="colors" heading-level="${text("heading-level", "1")}">
+        <calcite-pick-list-item label="red" description="fish" value="red" icon="grip">
+          ${action}
+        </calcite-pick-list-item>
+        <calcite-pick-list-item label="blue" description="fish" value="blue" icon="grip">
+          ${action}
+        </calcite-pick-list-item>
+      </calcite-pick-list-group>
+    `);
+export const nested = () => create("calcite-pick-list", createAttributes(), html `
+      <calcite-pick-list-group>
+        <calcite-pick-list-item label="All the dogs" value="all-dogs" slot="parent-item">
+          ${action}
+        </calcite-pick-list-item>
+        <calcite-pick-list-item label="Husky" value="husky"> ${action} </calcite-pick-list-item>
+        <calcite-pick-list-item label="Pomeranian" value="pom"> ${action} </calcite-pick-list-item>
+        <calcite-pick-list-item label="Xoloitzcuintle" value="xolo"> ${action} </calcite-pick-list-item>
+      </calcite-pick-list-group>
+      <calcite-pick-list-group>
+        <calcite-pick-list-item label="All the cats" value="all-cats" slot="parent-item">
+          ${action}
+        </calcite-pick-list-item>
+        <calcite-pick-list-item label="Himalayan" value="himalayan"> ${action} </calcite-pick-list-item>
+        <calcite-pick-list-item label="Persian" value="persian"> ${action} </calcite-pick-list-item>
+        <calcite-pick-list-item label="Spynx" value="spynx"> ${action} </calcite-pick-list-item>
+      </calcite-pick-list-group>
+    `);
+export const disabled_TestOnly = () => html `<calcite-pick-list disabled>
+  <calcite-pick-list-item label="T. Rex" description="arm strength impaired" value="trex"></calcite-pick-list-item>
+  <calcite-pick-list-item
+    label="Triceratops"
+    description="3 horn"
+    value="triceratops"
+    selected
+  ></calcite-pick-list-item>
+  <calcite-pick-list-item label="hi" description="there" value="helloWorld"></calcite-pick-list-item>
+</calcite-pick-list>`;

package/dist/collection/components/pick-list/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 = {
   sticky: "sticky-pos"

package/dist/collection/components/pick-list/shared-list-logic.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 { debounce } from "lodash-es";
 import { focusElement, getSlotted } from "../../utils/dom";

package/dist/collection/components/pick-list/shared-list-render.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 { toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/pick-list-group/pick-list-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";

package/dist/collection/components/pick-list-group/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 = {
   heading: "heading",

package/dist/collection/components/pick-list-item/pick-list-item.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 { Fragment, h } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT } from "./resources";
@@ -10,17 +10,17 @@ import { getSlotted, toAriaBoolean } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
- * @slot actions-end - A slot for adding actions or content to the end side of the component.
- * @slot actions-start - A slot for adding actions or content to the start side of the component.
+ * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component.
+ * @slot actions-start - A slot for adding `calcite-action`s or content to the start side of the component.
  */
 export class PickListItem {
   constructor() {
     /**
-     * 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 false, the component cannot be deselected by user interaction.
+     * When `false`, the component cannot be deselected by user interaction.
      */
     this.disableDeselect = false;
     /**
@@ -28,21 +28,21 @@ export class PickListItem {
      */
     this.nonInteractive = false;
     /**
-     * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
+     * Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`.
      *
      * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
      */
     this.icon = null;
     /**
-     * When true, displays a remove action that removes the item from the list.
+     * When `true`, displays a remove action that removes the item from the list.
      */
     this.removable = false;
     /**
-     * When true, selects an item. Toggles when an item is checked/unchecked.
+     * When `true`, selects an item. Toggles when an item is checked/unchecked.
      */
     this.selected = false;
     /**
-     * Accessible name for the component's remove button. Only applicable if removable is "true".
+     * When `removable` is `true`, the accessible name for the component's remove button.
      *
      * @default "Remove"
      */
@@ -201,7 +201,7 @@ export class PickListItem {
         "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,
@@ -219,7 +219,7 @@ export class PickListItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When false, the component cannot be deselected by user interaction."
+          "text": "When `false`, the component cannot be deselected by user interaction."
         },
         "attribute": "disable-deselect",
         "reflect": true,
@@ -266,7 +266,7 @@ export class PickListItem {
               "name": "see",
               "text": "[ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)"
             }],
-          "text": "Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null."
+          "text": "Determines the icon SVG symbol that will be shown. Options are `\"circle\"`, `\"square\"`, `\"grip\"` or `null`."
         },
         "attribute": "icon",
         "reflect": true,
@@ -320,7 +320,7 @@ export class PickListItem {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "When true, displays a remove action that removes the item from the list."
+          "text": "When `true`, displays a remove action that removes the item from the list."
         },
         "attribute": "removable",
         "reflect": true,
@@ -338,7 +338,7 @@ export class PickListItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, selects an item. Toggles when an item is checked/unchecked."
+          "text": "When `true`, selects an item. Toggles when an item is checked/unchecked."
         },
         "attribute": "selected",
         "reflect": true,
@@ -359,7 +359,7 @@ export class PickListItem {
               "name": "default",
               "text": "\"Remove\""
             }],
-          "text": "Accessible name for the component's remove button. Only applicable if removable is \"true\"."
+          "text": "When `removable` is `true`, the accessible name for the component's remove button."
         },
         "attribute": "intl-remove",
         "reflect": true,

package/dist/collection/components/pick-list-item/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 = {
   actions: "actions",

package/dist/collection/components/popover/PopoverManager.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 { isActivationKey } from "../../utils/key";
 export default class PopoverManager {