@esri/calcite-components 1.0.0-beta.83 → 1.0.0-beta.84

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

@@ -9,7 +9,7 @@ export declare class Stepper {
   /** optionally display a status icon next to the step title */
   icon: boolean;
   /** specify the layout of stepper, defaults to horizontal */
-  layout: Layout;
+  layout: Extract<"horizontal" | "vertical", Layout>;
   /** optionally display the number next to the step title */
   numbered: boolean;
   /** specify the scale of stepper, defaults to m */
@@ -17,6 +17,11 @@ export declare class Stepper {
   /** @internal */
   requestedContent: Node[];
   contentWatcher(): void;
+  /**
+   * This event fires when the active stepper item has changed.
+   *
+   */
+  calciteStepperItemChange: EventEmitter<StepperItemChangeEventDetail>;
   /**
    * This event fires when the active stepper item has changed.
    *
@@ -29,6 +34,7 @@ export declare class Stepper {
   calciteInternalStepperItemKeyEvent(e: CustomEvent<StepperItemKeyEventDetail>): void;
   registerItem(event: CustomEvent<StepperItemEventDetail>): void;
   updateItem(event: CustomEvent<StepperItemEventDetail>): void;
+  handleUserRequestedStepperItemSelect(event: CustomEvent<StepperItemChangeEventDetail>): void;
   /** set the next step as active */
   nextStep(): Promise<void>;
   /** set the previous step as active */

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

@@ -1,5 +1,5 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
-import { Scale } from "../interfaces";
+import { Layout, Scale } from "../interfaces";
 import { InteractiveComponent } from "../../utils/interactive";
 import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "../stepper/interfaces";
 /**
@@ -15,13 +15,25 @@ export declare class StepperItem implements InteractiveComponent {
   error: boolean;
   /** is the step disabled and not navigable to by a user */
   disabled: boolean;
-  /** pass a title for the stepper item */
+  /**
+   * pass a title for the stepper item
+   *
+   * @deprecated use heading instead
+   */
   itemTitle?: string;
-  /** pass a title for the stepper item */
+  /** stepper item heading */
+  heading?: string;
+  /**
+   * pass a title for the stepper item
+   *
+   * @deprecated use description instead
+   */
   itemSubtitle?: string;
+  /** stepper item description */
+  description: string;
   /** pass a title for the stepper item */
   /** @internal */
-  layout?: string;
+  layout?: Extract<"horizontal" | "vertical", Layout>;
   /** should the items display an icon based on status */
   /** @internal */
   icon: boolean;
@@ -32,6 +44,7 @@ export declare class StepperItem implements InteractiveComponent {
   /** @internal */
   scale: Scale;
   disabledWatcher(): void;
+  activeWatcher(active: boolean): void;
   /**
    * @internal
    */
@@ -40,6 +53,10 @@ export declare class StepperItem implements InteractiveComponent {
    * @internal
    */
   calciteInternalStepperItemSelect: EventEmitter<StepperItemEventDetail>;
+  /**
+   * @internal
+   */
+  calciteInternalUserRequestedStepperItemSelect: EventEmitter<StepperItemChangeEventDetail>;
   /**
    * @internal
    */
@@ -60,6 +77,7 @@ export declare class StepperItem implements InteractiveComponent {
   private renderIcon;
   private determineActiveItem;
   private registerStepperItem;
+  private emitUserRequestedItem;
   private emitRequestedItem;
   private setItemContent;
   private getItemPosition;

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

@@ -1,3 +1,3 @@
 export declare type TabID = string | number;
-export declare type TabPosition = "above" | "below";
+export declare type TabPosition = "above" | "below" | "top" | "bottom";
 export declare type TabLayout = "center" | "inline";

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

@@ -12,7 +12,8 @@ export declare class Tabs {
    */
   layout: TabLayout;
   /**
-   * Display the tabs above (default) or below the tab content
+   * Display the tabs top (default) or bottom of the tab content. above and below are deprecated.
+   *
    */
   position: TabPosition;
   /**

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

@@ -5,24 +5,24 @@ import { PopperPlacement, OverlayPositioning, ReferenceElement } from "../../uti
  * @slot - A slot for adding text.
  */
 export declare class Tooltip {
-  /** Closes the `calcite-tooltip` when the `referenceElement` is clicked. */
+  /** Closes the component when the `referenceElement` is clicked. */
   closeOnClick: boolean;
-  /** Accessible name for the `calcite-tooltip`. */
+  /** Accessible name for the component. */
   label: string;
   /**
-   * Offset the position of the `calcite-tooltip` away from the `referenceElement`.
+   * Offset the position of the component away from the `referenceElement`.
    *
    * @default 6
    */
   offsetDistance: number;
   offsetDistanceOffsetHandler(): void;
   /**
-   * Offset the position of the `calcite-tooltip` along the `referenceElement`.
+   * Offset the position of the component along the `referenceElement`.
    */
   offsetSkidding: number;
   offsetSkiddingHandler(): void;
   /**
-   * When true, the `calcite-tooltip` is open.
+   * When true, the component is open.
    */
   open: boolean;
   openHandler(): void;
@@ -36,7 +36,7 @@ export declare class Tooltip {
   placement: PopperPlacement;
   placementHandler(): void;
   /**
-   * The `referenceElement` to position `calcite-tooltip` according to its "placement" value. Setting to the `HTMLElement` is preferred so `calcite-tooltip` 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/tree/tree.d.ts

@@ -7,7 +7,7 @@ import { Scale } from "../interfaces";
  */
 export declare class Tree {
   el: HTMLCalciteTreeElement;
-  /** Display indentation guide lines. */
+  /** Displays indentation guide lines. */
   lines: boolean;
   /**
    * Display input
@@ -19,10 +19,10 @@ export declare class Tree {
    * @internal
    */
   child: boolean;
-  /** Specify the scale of the tree. */
+  /** Specifies the size of the component. */
   scale: Scale;
   /**
-   * Customize how tree selection works.
+   * Customize how the component's selection works.
    *
    * @default "single"
    * @see [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)
@@ -37,7 +37,7 @@ export declare class Tree {
   keyDownHandler(event: KeyboardEvent): void;
   updateAncestorTree(e: CustomEvent<TreeItemSelectDetail>): void;
   /**
-   * Emits when the user selects/deselects 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

@@ -4,14 +4,14 @@ import { TreeSelectionMode } from "../tree/interfaces";
 import { Scale } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
- * @slot - A slot for adding content to the item.
+ * @slot - A slot for adding the component's content.
  * @slot children - A slot for adding nested `calcite-tree` elements.
  */
 export declare class TreeItem implements ConditionalSlotComponent {
   el: HTMLCalciteTreeItemElement;
-  /** Selected state of the item. */
+  /** When true, the component is selected. */
   selected: boolean;
-  /** Expanded state of the item. */
+  /** 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, prevents user interaction. This state shows list items grayed out and with lower opacity.
+   * When true, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
   /**
-   * When true, list items 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 list 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;
   /**
@@ -25,24 +25,24 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
    */
   filterPlaceholder: string;
   /**
-   * The list's group identifier.
+   * The component's group identifier.
    *
    * To drag elements from one list into another, both lists must have the same group value.
    */
   group?: string;
   /**
-   * When true, content is waiting to be loaded. This state shows a busy indicator.
+   * When true, a busy indicator is displayed.
    */
   loading: boolean;
   /**
    * Similar to standard radio buttons and checkboxes.
-   * When true, a user can select multiple list items at a time.
-   * When false, only a single list item can be selected at a time,
-   * and selecting a new list item will deselect any other selected list items.
+   * 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 list items via the keyboard.
+   * When true and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.
    */
   selectionFollowsFocus: boolean;
   selectedValues: Map<string, ItemElement>;

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

@@ -3,16 +3,16 @@ import { ICON_TYPES } from "../pick-list/resources";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { InteractiveComponent } from "../../utils/interactive";
 /**
- * @slot actions-end - A slot for adding actions or content to the end side of the item.
- * @slot actions-start - A slot for adding actions or content to the start side of the item.
+ * @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.
  */
 export declare class ValueListItem implements ConditionalSlotComponent, InteractiveComponent {
   /**
-   * An optional description for the list item that displays below the label text.
+   * A description for the component that displays below the label text.
    */
   description?: string;
   /**
-   * When true, the list item cannot be clicked and is visually muted.
+   * 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 list item from user interaction.
+   * When true, prevents the content of the component from user interaction.
    */
   nonInteractive: boolean;
   /**
@@ -34,23 +34,23 @@ export declare class ValueListItem implements ConditionalSlotComponent, Interact
    */
   icon?: ICON_TYPES | null;
   /**
-   * The main label for the list item. Appears next to the icon.
+   * Label and accessible name for the component. Appears next to the icon.
    */
   label: string;
   /**
-   * Provides additional metadata to a list item. Primary use is for a filter on the parent list.
+   * Provides additional metadata to the component. Primary use is for a filter on the parent list.
    */
   metadata?: Record<string, unknown>;
   /**
-   * When true, adds an action to remove the list item.
+   * When true, adds an action to remove the component.
    */
   removable: boolean;
   /**
-   * When true, preselects the list item. Toggles when an item is checked/unchecked.
+   * When true, the component is selected.
    */
   selected: boolean;
   /**
-   * The list item's associated value.
+   * The component's value.
    */
   value: any;
   el: HTMLCalciteValueListItemElement;
@@ -69,7 +69,7 @@ export declare class ValueListItem implements ConditionalSlotComponent, Interact
   /** Set focus on the component. */
   setFocus(): Promise<void>;
   /**
-   * Emits when the remove button is pressed.
+   * Fires when the remove button is pressed.
    */
   calciteListItemRemove: EventEmitter<void>;
   calciteListItemChangeHandler(event: CustomEvent): void;