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

package/dist/types/components/slider/slider.d.ts

@@ -7,16 +7,16 @@ import { InteractiveComponent } from "../../utils/interactive";
 import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
 export declare class Slider implements LabelableComponent, FormComponent, InteractiveComponent, LocalizedComponent {
   el: HTMLCalciteSliderElement;
-  /** 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. */
   disabled: boolean;
   /**
-   * When true, number values are displayed with a group separator corresponding to the language and country format.
+   * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    */
   groupSeparator: boolean;
-  /** When true, indicates a histogram is present. */
+  /** When `true`, indicates a histogram is present. */
   hasHistogram: boolean;
   /**
-   * A list of the histogram's x,y coordinates within the component's "min" and "max". Displays above the component's track.
+   * A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track.
    *
    * @see [DataSeries](https://github.com/Esri/calcite-components/blob/master/src/components/graph/interfaces.ts#L5)
    */
@@ -26,24 +26,24 @@ export declare class Slider implements LabelableComponent, FormComponent, Intera
    * A set of single color stops for a histogram, sorted by offset ascending.
    */
   histogramStops: ColorStop[];
-  /** When true, displays label handles with their numeric value. */
+  /** When `true`, displays label handles with their numeric value. */
   labelHandles: boolean;
-  /** When true and "ticks" is specified, displays label tick marks with their numeric value. */
+  /** When `true` and `ticks` is specified, displays label tick marks with their numeric value. */
   labelTicks: boolean;
   /** The component's maximum selectable value. */
   max: number;
-  /** For multiple selections, the accessible name for the second handle, such as "Temperature, upper bound". */
+  /** For multiple selections, the accessible name for the second handle, such as `"Temperature, upper bound"`. */
   maxLabel?: string;
   /** For multiple selections, the component's upper value. */
   maxValue?: number;
   /** The component's minimum selectable value. */
   min: number;
-  /** Accessible name for first (or only) handle, such as "Temperature, lower bound". */
+  /** Accessible name for first (or only) handle, such as `"Temperature, lower bound"`. */
   minLabel: string;
   /** For multiple selections, the component's lower value. */
   minValue?: number;
   /**
-   * When true, the slider will display values from high to low.
+   * When `true`, the slider will display values from high to low.
    *
    * Note that this value will be ignored if the slider has an associated histogram.
    */
@@ -56,13 +56,13 @@ export declare class Slider implements LabelableComponent, FormComponent, Intera
   numberingSystem?: NumberingSystem;
   /** Specifies the interval to move with the page up, or page down keys. */
   pageStep?: number;
-  /** When true, sets a finer point for handles. */
+  /** When `true`, sets a finer point for handles. */
   precise: boolean;
   /**
-   * When true, the component must have a value in order for the form to submit.
+   * When `true`, the component must have a value in order for the form to submit.
    */
   required: boolean;
-  /** When true, enables snap selection in coordination with "step" via a mouse. */
+  /** When `true`, enables snap selection in coordination with `step` via a mouse. */
   snap: boolean;
   /** Specifies the interval to move with the up, or down keys. */
   step?: number;

package/dist/types/components/split-button/split-button.d.ts

@@ -12,11 +12,11 @@ export declare class SplitButton implements InteractiveComponent {
   appearance: ButtonAppearance;
   /** Specifies the color of the component. */
   color: ButtonColor;
-  /** 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. */
   disabled: boolean;
   handleDisabledChange(value: boolean): void;
   /**
-   * When true, the component is active.
+   * When `true`, the component is active.
    *
    * @internal
    */
@@ -27,7 +27,7 @@ export declare class SplitButton implements InteractiveComponent {
   /** Accessible name for the dropdown menu. */
   dropdownLabel?: string;
   /**
-    When true, a busy indicator is displayed on the primary button.
+    When `true`, a busy indicator is displayed on the primary button.
    */
   loading: boolean;
   /**
@@ -41,7 +41,7 @@ export declare class SplitButton implements InteractiveComponent {
   overlayPositioning: OverlayPositioning;
   /** Specifies an icon to display at the end of the primary button. */
   primaryIconEnd?: string;
-  /**  When true, the primary button icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  /**  When `true`, the primary button icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   primaryIconFlipRtl?: FlipContext;
   /** Specifies an icon to display at the start of the primary button. */
   primaryIconStart?: string;

package/dist/types/components/stepper/stepper.d.ts

@@ -1,17 +1,22 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Layout, Scale } from "../interfaces";
 import { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from "./interfaces";
+import { NumberingSystem } from "../../utils/locale";
 /**
  * @slot - A slot for adding `calcite-stepper-item`s.
  */
 export declare class Stepper {
   el: HTMLCalciteStepperElement;
-  /** When true, displays a status icon in the `calcite-stepper-item` heading. */
+  /** When `true`, displays a status icon in the `calcite-stepper-item` heading. */
   icon: boolean;
   /** Defines the layout of the component. */
   layout: Extract<"horizontal" | "vertical", Layout>;
-  /** When true, displays the step number in the `calcite-stepper-item` heading. */
+  /** When `true`, displays the step number in the `calcite-stepper-item` heading. */
   numbered: boolean;
+  /**
+   * Specifies the Unicode numeral system used by the component for localization.
+   */
+  numberingSystem?: NumberingSystem;
   /** Specifies the size of the component. */
   scale: Scale;
   /**

package/dist/types/components/stepper-item/stepper-item.d.ts

@@ -2,28 +2,29 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Layout, Scale } from "../interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
 import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "../stepper/interfaces";
+import { LocalizedComponent } from "../../utils/locale";
 /**
  * @slot - A slot for adding custom content.
  */
-export declare class StepperItem implements InteractiveComponent {
+export declare class StepperItem implements InteractiveComponent, LocalizedComponent {
   el: HTMLCalciteStepperItemElement;
   /**
-   *  is the step active
+   *  When `true`, the component is selected.
    *
-   * @deprecated Use selected instead.
+   * @deprecated Use `selected` instead.
    */
   active: boolean;
   activeHandler(value: boolean): void;
   /**
-   * When true, step is selected
+   * When `true`, the component is selected.
    */
   selected: boolean;
   selectedHandler(value: boolean): void;
-  /** has the step been completed */
+  /** When `true`, the step has been completed. */
   complete: boolean;
-  /** 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. */
   error: boolean;
-  /** 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. */
   disabled: boolean;
   /**
    * The component header text.
@@ -44,16 +45,18 @@ export declare class StepperItem implements InteractiveComponent {
   /** Defines the layout of the component. */
   /** @internal */
   layout?: Extract<"horizontal" | "vertical", Layout>;
-  /** When true, displays a status icon in the `calcite-stepper-item` heading. */
+  /** When `true`, displays a status icon in the component's heading. */
   /** @internal */
   icon: boolean;
-  /** When true, displays the step number in the `calcite-stepper-item` heading. */
+  /** When `true`, displays the step number in the component's heading. */
   /** @internal */
   numbered: boolean;
   /** Specifies the size of the component. */
   /** @internal */
   scale: Scale;
   disabledWatcher(): void;
+  effectiveLocale: string;
+  effectiveLocaleWatcher(locale: string): void;
   headerEl: HTMLDivElement;
   /**
    * @internal
@@ -74,6 +77,7 @@ export declare class StepperItem implements InteractiveComponent {
   connectedCallback(): void;
   componentWillLoad(): void;
   componentDidRender(): void;
+  disconnectedCallback(): void;
   render(): VNode;
   updateActiveItemOnChange(event: CustomEvent<StepperItemChangeEventDetail>): void;
   setFocus(): Promise<void>;

package/dist/types/components/switch/switch.d.ts

@@ -5,7 +5,7 @@ import { CheckableFormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
 export declare class Switch implements LabelableComponent, CheckableFormComponent, InteractiveComponent {
   el: HTMLCalciteSwitchElement;
-  /** 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. */
   disabled: boolean;
   /** Accessible name for the component. */
   label?: string;
@@ -14,13 +14,13 @@ export declare class Switch implements LabelableComponent, CheckableFormComponen
   /** Specifies the size of the component. */
   scale: Scale;
   /**
-   * When true, the component is checked.
+   * When `true`, the component is checked.
    *
    * @deprecated use `checked` instead.
    */
   switched: boolean;
   switchedWatcher(switched: boolean): void;
-  /** When true, the component is checked. */
+  /** When `true`, the component is checked. */
   checked: boolean;
   /** The component's value. */
   value: any;
@@ -37,9 +37,9 @@ export declare class Switch implements LabelableComponent, CheckableFormComponen
   private clickHandler;
   private setSwitchEl;
   /**
-   * Fires when the checked value has changed.
+   * Fires when the `checked` value has changed.
    *
-   * **Note:** The event payload is deprecated, use the component's "checked" property instead.
+   * **Note:** The event payload is deprecated, use the component's `checked` property instead.
    */
   calciteSwitchChange: EventEmitter<DeprecatedEventPayload>;
   connectedCallback(): void;

package/dist/types/components/tab/tab.d.ts

@@ -13,7 +13,7 @@ export declare class Tab {
    */
   tab?: string;
   /**
-   * 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.
    *
@@ -22,7 +22,7 @@ export declare class Tab {
   active: boolean;
   activeHandler(value: boolean): void;
   /**
-   * 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.
    */

package/dist/types/components/tab-title/tab-title.d.ts

@@ -9,7 +9,7 @@ import { InteractiveComponent } from "../../utils/interactive";
 export declare class TabTitle implements InteractiveComponent {
   el: HTMLCalciteTabTitleElement;
   /**
-   * 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.
    *
@@ -18,17 +18,17 @@ export declare class TabTitle implements InteractiveComponent {
   active: boolean;
   activeHandler(value: boolean): void;
   /**
-   * 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.
    */
   selected: boolean;
   selectedHandler(value: boolean): void;
-  /** 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.  */
   disabled: boolean;
   /** Specifies an icon to display at the end of the component. */
   iconEnd?: string;
-  /** When true, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   iconFlipRtl?: FlipContext;
   /** Specifies an icon to display at the start of the component. */
   iconStart?: string;
@@ -65,7 +65,7 @@ export declare class TabTitle implements InteractiveComponent {
   onClick(): void;
   keyDownHandler(event: KeyboardEvent): void;
   /**
-   * Fires when a `calcite-tab` is selected. Emits the "tab" property, or the index position.
+   * Fires when a `calcite-tab` is selected. Emits the `tab` property, or the index position.
    *
    * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
    */

package/dist/types/components/tabs/tabs.d.ts

@@ -8,11 +8,11 @@ import { Scale } from "../interfaces";
 export declare class Tabs {
   el: HTMLCalciteTabsElement;
   /**
-   * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start ("inline"), or across and centered ("center").
+   * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start (`"inline"`), or across and centered (`"center"`).
    */
   layout: TabLayout;
   /**
-   * Specifies the position of the component in relation to the `calcite-tab`s. The "above" and "below" values are deprecated.
+   * Specifies the position of the component in relation to the `calcite-tab`s. The `"above"` and `"below"` values are deprecated.
    *
    */
   position: TabPosition;
@@ -21,7 +21,7 @@ export declare class Tabs {
    */
   scale: Scale;
   /**
-   * When true and layout is set to "inline", the component will display with a folder style menu.
+   * When `true` and `layout` is set to `"inline"`, the component will display with a folder style menu.
    */
   bordered: boolean;
   connectedCallback(): void;

package/dist/types/components/tile/tile.d.ts

@@ -8,7 +8,7 @@ import { InteractiveComponent } from "../../utils/interactive";
 export declare class Tile implements ConditionalSlotComponent, InteractiveComponent {
   el: HTMLCalciteTileElement;
   /**
-   * When true, the component is active.
+   * When `true`, the component is active.
    */
   active: boolean;
   /**
@@ -16,13 +16,13 @@ export declare class Tile implements ConditionalSlotComponent, InteractiveCompon
    */
   description?: string;
   /**
-   * 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.
    */
   disabled: boolean;
   /**
    * The component's embed mode.
    *
-   * When true, renders without a border and padding for use by other components.
+   * When `true`, renders without a border and padding for use by other components.
    */
   embed: boolean;
   /**
@@ -33,9 +33,9 @@ export declare class Tile implements ConditionalSlotComponent, InteractiveCompon
   focused: boolean;
   /** The component header text, which displays between the icon and description. */
   heading?: string;
-  /** When true, the component is not displayed and is not focusable.  */
+  /** When `true`, the component is not displayed and is not focusable.  */
   hidden: boolean;
-  /** When embed is "false", the url for the component. */
+  /** When embed is `"false"`, the URL for the component. */
   href?: string;
   /** Specifies an icon to display. */
   icon?: string;

package/dist/types/components/tile-select/tile-select.d.ts

@@ -7,25 +7,25 @@ import { InteractiveComponent } from "../../utils/interactive";
  */
 export declare class TileSelect implements InteractiveComponent {
   el: HTMLCalciteTileSelectElement;
-  /** When true, the component is checked. */
+  /** When `true`, the component is checked. */
   checked: boolean;
   checkedChanged(newChecked: boolean): void;
   /** A description for the component, which displays below the heading. */
   description?: string;
-  /** 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. */
   disabled: boolean;
   /** The component header text, which displays between the icon and description. */
   heading?: string;
-  /** When true, the component is not displayed and is not focusable or checkable. */
+  /** When `true`, the component is not displayed and is not focusable or checkable. */
   hidden: boolean;
   /** Specifies an icon to display. */
   icon?: string;
   /** Specifies the name of the component on form submission. */
   name: any;
   nameChanged(newName: string): void;
-  /** When true, displays an interactive input based on the "type" property. */
+  /** When `true`, displays an interactive input based on the `type` property. */
   inputEnabled: boolean;
-  /** When inputEnabled is true, the placement of the interactive input on the component. */
+  /** When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. */
   inputAlignment: Extract<"end" | "start", Alignment>;
   /**
    * The selection mode of the component.

package/dist/types/components/tile-select-group/tile-select-group.d.ts

@@ -6,7 +6,7 @@ import { InteractiveComponent } from "../../utils/interactive";
  */
 export declare class TileSelectGroup implements InteractiveComponent {
   el: HTMLCalciteTileSelectGroupElement;
-  /** 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. */
   disabled: boolean;
   /**
    * Defines the layout of the component.

package/dist/types/components/time-picker/time-picker.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { HourCycle, Meridiem, TimePart } from "../../utils/time";
-import { LocalizedComponent } from "../../utils/locale";
+import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
 export declare class TimePicker implements LocalizedComponent {
   el: HTMLCalciteTimePickerElement;
   /**
@@ -87,8 +87,13 @@ export declare class TimePicker implements LocalizedComponent {
   localeChanged(): void;
   /** Specifies the size of the component. */
   scale: Scale;
-  /** Specifies the granularity the "value" must adhere to (in seconds). */
+  /** Specifies the granularity the `value` must adhere to (in seconds). */
   step: number;
+  /**
+   * Specifies the Unicode numeral system used by the component for localization.
+   *
+   */
+  numberingSystem?: NumberingSystem;
   /** The component's value in UTC (always 24-hour format). */
   value: string;
   valueWatcher(newValue: string): void;

package/dist/types/components/tip/tip.d.ts

@@ -7,11 +7,11 @@ import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
  */
 export declare class Tip implements ConditionalSlotComponent {
   /**
-   * When true, the component does not display.
+   * When `true`, the component does not display.
    */
   dismissed: boolean;
   /**
-   * When true, the close button is not present on the component.
+   * When `true`, the close button is not present on the component.
    */
   nonDismissible: boolean;
   /**

package/dist/types/components/tip-manager/tip-manager.d.ts

@@ -5,7 +5,7 @@ import { HeadingLevel } from "../functional/Heading";
  */
 export declare class TipManager {
   /**
-   * When true, does not display or position the component.
+   * When `true`, does not display or position the component.
    */
   closed: boolean;
   closedChangeHandler(): void;

package/dist/types/components/tooltip/tooltip.d.ts

@@ -21,7 +21,7 @@ export declare class Tooltip implements FloatingUIComponent {
   offsetSkidding: number;
   offsetSkiddingHandler(): void;
   /**
-   * When true, the component is open.
+   * When `true`, the component is open.
    */
   open: boolean;
   openHandler(): void;
@@ -43,7 +43,11 @@ export declare class Tooltip implements FloatingUIComponent {
   placement: LogicalPlacement;
   placementHandler(): void;
   /**
-   * 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.
+   * 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.
    */
   referenceElement: ReferenceElement | string;
   referenceElementHandler(): void;

package/dist/types/components/tooltip-manager/tooltip-manager.d.ts

@@ -1,6 +1,6 @@
 import { VNode } from "../../stencil-public-runtime";
 /**
- * @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 declare class TooltipManager {

package/dist/types/components/tree/tree.d.ts

@@ -37,7 +37,7 @@ export declare class Tree {
   keyDownHandler(event: KeyboardEvent): void;
   updateAncestorTree(event: CustomEvent<TreeItemSelectDetail>): void;
   /**
-   * 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.
+   * 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.
    *
    * @see [TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L1)
    */

package/dist/types/components/tree-item/tree-item.d.ts

@@ -11,12 +11,12 @@ import { InteractiveComponent } from "../../utils/interactive";
 export declare class TreeItem implements ConditionalSlotComponent, InteractiveComponent {
   el: HTMLCalciteTreeItemElement;
   /**
-   * 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.
    */
   disabled: boolean;
-  /** When true, the component is selected. */
+  /** When `true`, the component is selected. */
   selected: boolean;
-  /** When true, the component is expanded. */
+  /** When `true`, the component is expanded. */
   expanded: boolean;
   expandedHandler(newValue: boolean): void;
   /**

package/dist/types/components/value-list/value-list.d.ts

@@ -9,15 +9,15 @@ import { InteractiveComponent } from "../../utils/interactive";
  */
 export declare class ValueList<ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement> implements InteractiveComponent {
   /**
-   * 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.
    */
   disabled: boolean;
   /**
-   * 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.
    */
   dragEnabled: boolean;
   /**
-   * 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.
    */
   filterEnabled: boolean;
   /**
@@ -31,42 +31,42 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
    */
   group?: string;
   /**
-   * When true, a busy indicator is displayed.
+   * When `true`, a busy indicator is displayed.
    */
   loading: boolean;
   /**
    * 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.
    */
   multiple: boolean;
   /**
-   * 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.
    */
   selectionFollowsFocus: boolean;
   /**
-   * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position.
+   * When `dragEnabled` is `true` and active, specifies accessible context to the `calcite-value-list-item`s initial position.
    *
-   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+   * Use "`${position}` of `${total}`" as a placeholder for displaying indices and `${item.label}` as a placeholder for displaying the `calcite-value-list-item` label.
    */
   intlDragHandleIdle?: string;
   /**
-   * When "drag-enabled" is true and active, specifies accessible context to the component.
+   * When `dragEnabled` is `true` and active, specifies accessible context to the component.
    *
-   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+   * Use "`${position}` of `${total}`" as a placeholder for displaying indices and `${item.label}` as a placeholder for displaying the `calcite-value-list-item` label.
    */
   intlDragHandleActive?: string;
   /**
-   * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position.
+   * When `dragEnabled` is `true` and active, specifies accessible context to the `calcite-value-list-item`s new position.
    *
-   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+   * Use "`${position}` of `${total}`" as a placeholder for displaying indices and `${item.label}` as a placeholder for displaying the `calcite-value-list-item` label.
    */
   intlDragHandleChange?: string;
   /**
-   * When "drag-enabled" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit.
+   * When `dragEnabled` is `true` and active, specifies accessible context to the `calcite-value-list-item`s current position after commit.
    *
-   * Use ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`.
+   * Use "`${position}` of `${total}`" as a placeholder for displaying indices and `${item.label}` as a placeholder for displaying the `calcite-value-list-item` label.
    */
   intlDragHandleCommit?: string;
   selectedValues: Map<string, ItemElement>;

package/dist/types/components/value-list-item/value-list-item.d.ts

@@ -12,7 +12,7 @@ export declare class ValueListItem implements ConditionalSlotComponent, Interact
    */
   description?: string;
   /**
-   * 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.
    */
   disabled: boolean;
   /**
@@ -20,7 +20,7 @@ export declare class ValueListItem implements ConditionalSlotComponent, Interact
    */
   disableDeselect: boolean;
   /**
-   * When true, prevents the content of the component from user interaction.
+   * When `true`, prevents the content of the component from user interaction.
    */
   nonInteractive: boolean;
   /**
@@ -42,11 +42,11 @@ export declare class ValueListItem implements ConditionalSlotComponent, Interact
    */
   metadata?: Record<string, unknown>;
   /**
-   * When true, adds an action to remove the component.
+   * When `true`, adds an action to remove the component.
    */
   removable: boolean;
   /**
-   * When true, the component is selected.
+   * When `true`, the component is selected.
    */
   selected: boolean;
   /**