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

package/dist/collection/components/tip-manager/tip-manager.stories.js

@@ -0,0 +1,115 @@
+import { boolean, text } from "@storybook/addon-knobs";
+import { filterComponentAttributes, createComponentHTML as create, themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import { TEXT } from "./resources";
+import { html } from "../../../support/formatting";
+import { placeholderImage } from "../../../.storybook/placeholderImage";
+import { storyFilters } from "../../../.storybook/helpers";
+export default {
+    title: "Components/Tips/Tip Manager",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+const createAttributes = ({ exceptions } = { exceptions: [] }) => {
+    return filterComponentAttributes([
+        {
+            name: "closed",
+            commit() {
+                this.value = boolean("closed", false);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "intl-close",
+            commit() {
+                this.value = text("intlClose", TEXT.close);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "intl-default-title",
+            commit() {
+                this.value = text("intlDefaultTitle", TEXT.defaultGroupTitle);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "intl-pagination-label",
+            commit() {
+                this.value = text("intlPaginationLabel", TEXT.defaultPaginationLabel);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "intl-next",
+            commit() {
+                this.value = text("intlNext", TEXT.next);
+                delete this.build;
+                return this;
+            }
+        },
+        {
+            name: "intl-previous",
+            commit() {
+                this.value = text("intlPrevious", TEXT.previous);
+                delete this.build;
+                return this;
+            }
+        }
+    ], exceptions);
+};
+const tipContent = html `
+  <calcite-tip-group group-title="Astronomy">
+    <calcite-tip heading="The Red Rocks and Blue Water" heading-level="2">
+      <img slot="thumbnail" src="${placeholderImage({ width: 1000, height: 600 })}" alt="This is an image." />
+      <p>
+        This tip is how a tip should really look. It has a landscape or square image and a small amount of text content.
+        This paragraph is in an "info" slot.
+      </p>
+      <p>
+        This is another paragraph in a subsequent "info" slot. In publishing and graphic design, Lorem ipsum is a
+        placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful
+        content (also called greeking). Replacing the actual content with placeholder text allows designers to design
+        the form of the content before the content itself has been produced.
+      </p>
+      <a href="http://www.esri.com">This is the "link" slot.</a>
+    </calcite-tip>
+    <calcite-tip heading="The Long Trees">
+      <img slot="thumbnail" src="${placeholderImage({ width: 1000, height: 600 })}" alt="This is an image." />
+      <p>This tip has an image that is a pretty tall. And the text will run out before the end of the image.</p>
+      <p>In astronomy, the terms object and body are often used interchangeably.</p>
+      <a href="http://www.esri.com">View Esri</a>
+    </calcite-tip>
+  </calcite-tip-group>
+  <calcite-tip heading="Square Nature">
+    <img slot="thumbnail" src="${placeholderImage({ width: 1000, height: 1000 })}" alt="This is an image." />
+    <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
+    <p>In astronomy, the terms object and body are often used interchangeably.</p>
+    <p>
+      In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form
+      of a document without relying on meaningful content (also called greeking). Replacing the actual content with
+      placeholder text allows designers to design the form of the content before the content itself has been produced.
+    </p>
+    <a href="http://www.esri.com">View Esri</a>
+  </calcite-tip>
+  <calcite-tip heading="The lack of imagery">
+    <p>This tip has no image. As such, the content area will take up the entire width of the tip.</p>
+    <p>
+      This is the next paragraph and should show how wide the content area is now. Of course, the width of the overall
+      tip will affect things. In astronomy, the terms object and body are often used interchangeably.
+    </p>
+    <a href="http://www.esri.com">View Esri</a>
+  </calcite-tip>
+`;
+export const simple = () => create("calcite-tip-manager", createAttributes(), tipContent);
+export const darkThemeRTL_TestOnly = () => create("calcite-tip-manager", createAttributes({ exceptions: ["dir", "class"] }).concat([
+    { name: "dir", value: "rtl" },
+    { name: "class", value: "calcite-theme-dark" }
+]), tipContent);
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/tooltip/TooltipManager.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 { TOOLTIP_DELAY_MS } from "./resources";
 export default class TooltipManager {

package/dist/collection/components/tooltip/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/tooltip/tooltip.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 { Host, h } from "@stencil/core";
 import { CSS, ARIA_DESCRIBED_BY } from "./resources";
@@ -34,7 +34,7 @@ export class Tooltip {
      */
     this.offsetSkidding = 0;
     /**
-     * When true, the component is open.
+     * When `true`, the component is open.
      */
     this.open = false;
     /**
@@ -273,7 +273,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is open."
+          "text": "When `true`, the component is open."
         },
         "attribute": "open",
         "reflect": true,
@@ -345,7 +345,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The `referenceElement` to position the component according to its \"placement\" value. Setting to the `HTMLElement` is preferred so the component does not need to query the DOM for the `referenceElement`. However, a string ID of the reference element can be used."
+          "text": "The `referenceElement` to position the component according to its `\"placement\"` value.\n\nSetting to the `HTMLElement` is preferred so the component does not need to query the DOM for the `referenceElement`.\n\nHowever, a string ID of the reference element can be used."
         },
         "attribute": "reference-element",
         "reflect": false

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

@@ -0,0 +1,60 @@
+import { select, number } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+import { html } from "../../../support/formatting";
+import { boolean, storyFilters } from "../../../.storybook/helpers";
+import { placements } from "../../utils/floating-ui";
+import { themesDarkDefault } from "../../../.storybook/utils";
+const contentHTML = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua`;
+const referenceElementHTML = `Ut enim ad minim veniam, quis <calcite-button appearance="transparent" color="neutral" title="Reference element" id="reference-element">nostrud exercitation</calcite-button> ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
+export default {
+    title: "Components/Tooltip",
+    parameters: {
+        notes: readme
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <div style="width: 400px;">
+    ${referenceElementHTML}
+    <calcite-tooltip
+      reference-element="reference-element"
+      placement="${select("placement", placements, "auto")}"
+      offset-distance="${number("offset-distance", 6)}"
+      offset-skidding="${number("offset-skidding", 0)}"
+      ${boolean("open", false)}
+    >
+      ${contentHTML}
+    </calcite-tooltip>
+  </div>
+`;
+export const open_TestOnly = () => html `
+  <div style="width: 400px;">
+    ${referenceElementHTML}
+    <calcite-tooltip
+      reference-element="reference-element"
+      placement="${select("placement", placements, "auto")}"
+      offset-distance="${number("offset-distance", 6)}"
+      offset-skidding="${number("offset-skidding", 0)}"
+      ${boolean("open", true)}
+    >
+      ${contentHTML}
+    </calcite-tooltip>
+  </div>
+`;
+export const darkThemeRTL_TestOnly = () => html `
+  <div style="width: 400px;">
+    ${referenceElementHTML}
+    <calcite-tooltip
+      class="calcite-theme-dark"
+      dir="rtl"
+      reference-element="reference-element"
+      placement="${select("placement", placements, "auto")}"
+      offset-distance="${number("offset-distance", 6)}"
+      offset-skidding="${number("offset-skidding", 0)}"
+      ${boolean("open", false)}
+    >
+      ${contentHTML}
+    </calcite-tooltip>
+  </div>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/tooltip-manager/tooltip-manager.js

@@ -1,11 +1,11 @@
 /*!
  * 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";
 /**
- * @slot - A slot for adding elements that reference a 'calcite-tooltip' by the 'selector' property.
+ * @slot - A slot for adding elements that reference a `calcite-tooltip` by the `selector` property.
  * @deprecated No longer required for tooltip usage.
  */
 export class TooltipManager {

package/dist/collection/components/tree/interfaces.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 var TreeSelectionMode;
 (function (TreeSelectionMode) {

package/dist/collection/components/tree/tree.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, getRootNode, nodeListToArray } from "../../utils/dom";
@@ -413,7 +413,7 @@ export class Tree {
               "name": "see",
               "text": "[TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L1)"
             }],
-          "text": "Fires when the user selects/deselects `calcite-tree-items`. An object including an array of selected items will be passed in the event's \"detail\" property."
+          "text": "Fires when the user selects/deselects `calcite-tree-items`. An object including an array of selected items will be passed in the event's `detail` property."
         },
         "complexType": {
           "original": "TreeSelectDetail",

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

@@ -0,0 +1,76 @@
+import { select } from "@storybook/addon-knobs";
+import { boolean, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme from "./readme.md";
+import treeItemReadme from "../tree-item/readme.md";
+import { html } from "../../../support/formatting";
+const treeItems = `
+  <calcite-tree-item>
+    <a>Child 1</a>
+  </calcite-tree-item>
+  <calcite-tree-item>
+    <a>Child 2</a>
+    <calcite-tree slot="children">
+      <calcite-tree-item>
+        <a>Grandchild 1</a>
+      </calcite-tree-item>
+      <calcite-tree-item>
+        <a>Grandchild 2</a>
+        <calcite-tree slot="children">
+          <calcite-tree-item>
+            <a>Great-Grandchild 1</a>
+          </calcite-tree-item>
+          <calcite-tree-item>
+            <a>Great-Grandchild 2</a>
+          </calcite-tree-item>
+        </calcite-tree>
+      </calcite-tree-item>
+    </calcite-tree>
+  </calcite-tree-item>
+  <calcite-tree-item>
+    <a>Child 3</a>
+    <calcite-tree slot="children">
+      <calcite-tree-item>
+        <a>Grandchild 1</a>
+      </calcite-tree-item>
+      <calcite-tree-item>
+        <a>Grandchild 2</a>
+      </calcite-tree-item>
+    </calcite-tree>
+  </calcite-tree-item>
+`;
+export default {
+    title: "Components/Tree",
+    parameters: {
+        notes: [readme, treeItemReadme]
+    },
+    ...storyFilters()
+};
+const selectionModes = ["single", "multi", "children", "multi-children", "ancestors", "none"];
+export const simple = () => html `
+  <calcite-tree
+    ${boolean("lines", false)}
+    selection-mode="${select("selection-mode", selectionModes, "single")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+  >
+    ${treeItems}
+  </calcite-tree>
+`;
+export const selectionModeNone = () => html `<calcite-tree
+  ${boolean("lines", false)}
+  selection-mode="${select("selection-mode", selectionModes, "none")}"
+>
+  ${treeItems}
+</calcite-tree>`;
+export const darkThemeRTL_TestOnly = () => html `
+  <calcite-tree
+    class="calcite-theme-dark"
+    dir="rtl"
+    ${boolean("lines", false)}
+    selection-mode="${select("selection-mode", selectionModes, "single")}"
+    scale="${select("scale", ["s", "m", "l"], "m")}"
+  >
+    ${treeItems}
+  </calcite-tree>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };

package/dist/collection/components/tree/utils.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
  */
 function isTreeItem(element) {
   return element === null || element === void 0 ? void 0 : element.matches("calcite-tree-item");

package/dist/collection/components/tree-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 = {
   checkboxLabel: "checkbox-label",

package/dist/collection/components/tree-item/tree-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 { Host, h } from "@stencil/core";
 import { TreeSelectionMode } from "../tree/interfaces";
@@ -22,12 +22,12 @@ export class TreeItem {
     //
     //--------------------------------------------------------------------------
     /**
-     * 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 is selected. */
+    /** When `true`, the component is selected. */
     this.selected = false;
-    /** When true, the component is expanded. */
+    /** When `true`, the component is expanded. */
     this.expanded = false;
     /**
      * @internal
@@ -243,7 +243,7 @@ export class TreeItem {
         "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,
@@ -261,7 +261,7 @@ export class TreeItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is selected."
+          "text": "When `true`, the component is selected."
         },
         "attribute": "selected",
         "reflect": true,
@@ -279,7 +279,7 @@ export class TreeItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, the component is expanded."
+          "text": "When `true`, the component is expanded."
         },
         "attribute": "expanded",
         "reflect": true,

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

package/dist/collection/components/value-list/utils.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 { getItemIndex } from "../pick-list/shared-list-logic";
 export function getScreenReaderText(item, status, valueList) {

package/dist/collection/components/value-list/value-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 Sortable from "sortablejs";
 import { h } from "@stencil/core";
@@ -23,30 +23,30 @@ export class ValueList {
     //
     // --------------------------------------------------------------------------
     /**
-     * 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, `calcite-value-list-item`s are sortable via a draggable button.
+     * When `true`, `calcite-value-list-item`s are sortable via a draggable button.
      */
     this.dragEnabled = false;
     /**
-     * When true, an input appears at the top of the component that can be used by end users to filter list items.
+     * When `true`, an input appears at the top of the component that can be used by end users to filter list items.
      */
     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-value-list-item`s at a time.
-     * When false, only a single `calcite-value-list-item` can be selected at a time,
+     * When `true`, a user can select multiple `calcite-value-list-item`s at a time.
+     * When `false`, only a single `calcite-value-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-value-list-item`s via keyboard.
+     * When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.
      */
     this.selectionFollowsFocus = false;
     // --------------------------------------------------------------------------
@@ -257,7 +257,7 @@ export class ValueList {
         "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,
@@ -275,7 +275,7 @@ export class ValueList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, `calcite-value-list-item`s are sortable via a draggable button."
+          "text": "When `true`, `calcite-value-list-item`s are sortable via a draggable button."
         },
         "attribute": "drag-enabled",
         "reflect": true,
@@ -293,7 +293,7 @@ export class ValueList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, an input appears at the top of the component that can be used by end users to filter list items."
+          "text": "When `true`, an input appears at the top of the component that can be used by end users to filter list items."
         },
         "attribute": "filter-enabled",
         "reflect": true,
@@ -345,7 +345,7 @@ export class ValueList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true, a busy indicator is displayed."
+          "text": "When `true`, a busy indicator is displayed."
         },
         "attribute": "loading",
         "reflect": true,
@@ -363,7 +363,7 @@ export class ValueList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple `calcite-value-list-item`s at a time.\nWhen false, only a single `calcite-value-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-value-list-item`s at a time.\nWhen `false`, only a single `calcite-value-list-item` can be selected at a time,\nand a new selection will deselect previous selections."
         },
         "attribute": "multiple",
         "reflect": true,
@@ -381,7 +381,7 @@ export class ValueList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When true and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard."
+          "text": "When `true` and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard."
         },
         "attribute": "selection-follows-focus",
         "reflect": true,
@@ -399,7 +399,7 @@ export class ValueList {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`."
+          "text": "When `dragEnabled` is `true` and active, specifies accessible context to the `calcite-value-list-item`s initial position.\n\nUse \"`${position}` of `${total}`\" as a placeholder for displaying indices and `${item.label}` as a placeholder for displaying the `calcite-value-list-item` label."
         },
         "attribute": "intl-drag-handle-idle",
         "reflect": false
@@ -416,7 +416,7 @@ export class ValueList {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "When \"drag-enabled\" is true and active, specifies accessible context to the component.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`."
+          "text": "When `dragEnabled` is `true` and active, specifies accessible context to the component.\n\nUse \"`${position}` of `${total}`\" as a placeholder for displaying indices and `${item.label}` as a placeholder for displaying the `calcite-value-list-item` label."
         },
         "attribute": "intl-drag-handle-active",
         "reflect": false
@@ -433,7 +433,7 @@ export class ValueList {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`."
+          "text": "When `dragEnabled` is `true` and active, specifies accessible context to the `calcite-value-list-item`s new position.\n\nUse \"`${position}` of `${total}`\" as a placeholder for displaying indices and `${item.label}` as a placeholder for displaying the `calcite-value-list-item` label."
         },
         "attribute": "intl-drag-handle-change",
         "reflect": false
@@ -450,7 +450,7 @@ export class ValueList {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`."
+          "text": "When `dragEnabled` is `true` and active, specifies accessible context to the `calcite-value-list-item`s current position after commit.\n\nUse \"`${position}` of `${total}`\" as a placeholder for displaying indices and `${item.label}` as a placeholder for displaying the `calcite-value-list-item` label."
         },
         "attribute": "intl-drag-handle-commit",
         "reflect": false