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

package/dist/types/components/pick-list-group/pick-list-group.d.ts

@@ -6,12 +6,12 @@ import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
  */
 export declare class PickListGroup implements ConditionalSlotComponent {
   /**
-   * The title used for all nested `calcite-pick-list` rows.
+   * Specifies the title for all nested `calcite-pick-list-item`s.
    *
    */
   groupTitle: string;
   /**
-   * Number at which section headings should start for this component.
+   * Specifies the number at which section headings should start.
    */
   headingLevel: HeadingLevel;
   el: HTMLCalcitePickListGroupElement;

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

@@ -3,21 +3,21 @@ 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 PickListItem implements ConditionalSlotComponent, InteractiveComponent {
   /**
-   * An optional description for this item.  This will appear below the label text.
+   * A description for the component that displays below the label text.
    */
   description?: string;
   descriptionWatchHandler(): void;
   /**
-   * When true, the item cannot be clicked and is visually muted.
+   * When true, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
   /**
-   * When false, the item cannot be deselected by user interaction.
+   * When false, the component cannot be deselected by user interaction.
    */
   disableDeselect: boolean;
   /**
@@ -31,32 +31,32 @@ export declare class PickListItem implements ConditionalSlotComponent, Interacti
    */
   icon?: ICON_TYPES | null;
   /**
-   * The main label for this item. This will appear next to the icon.
+   * Label and accessible name for the component. Appears next to the icon.
    */
   label: string;
   labelWatchHandler(): void;
   /**
-   * Used to provide additional metadata to an item, primarily used when the parent list has a filter.
+   * Provides additional metadata to the component. Primary use is for a filter on the parent list.
    */
   metadata?: Record<string, unknown>;
   metadataWatchHandler(): void;
   /**
-   * Set this to true to display a remove action that removes the item from the list.
+   * When true, displays a remove action that removes the item from the list.
    */
   removable?: boolean;
   /**
-   * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+   * When true, selects an item. Toggles when an item is checked/unchecked.
    */
   selected: boolean;
   selectedWatchHandler(): void;
   /**
-   * Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true.
+   * Accessible name for the component's remove button. Only applicable if removable is "true".
    *
    * @default "Remove"
    */
   intlRemove: string;
   /**
-   * The item's associated value.
+   * The component's value.
    */
   value: any;
   valueWatchHandler(newValue: any, oldValue: any): void;
@@ -67,7 +67,7 @@ export declare class PickListItem implements ConditionalSlotComponent, Interacti
   disconnectedCallback(): void;
   componentDidRender(): void;
   /**
-   * Emitted whenever the item is selected or unselected.
+   * Fires when the component is selected or unselected.
    */
   calciteListItemChange: EventEmitter<{
     item: HTMLCalcitePickListItemElement;
@@ -76,17 +76,17 @@ export declare class PickListItem implements ConditionalSlotComponent, Interacti
     shiftPressed: boolean;
   }>;
   /**
-   * Emitted whenever the remove button is pressed.
+   * Fires when the remove button is pressed.
    */
   calciteListItemRemove: EventEmitter<void>;
   /**
-   * Emitted whenever the the item's label, description, value or metadata properties are modified.
+   * Emits when the the component's label, description, value, or metadata properties are modified.
    *
    * @internal
    */
   calciteInternalListItemPropsChange: EventEmitter<void>;
   /**
-   * Emitted whenever the the item's value property is modified.
+   * Emits when the the component's value property is modified.
    *
    * @internal
    */
@@ -95,7 +95,7 @@ export declare class PickListItem implements ConditionalSlotComponent, Interacti
     newValue: any;
   }>;
   /**
-   * Used to toggle the selection state. By default this won't trigger an event.
+   * Toggles the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.
    *
    * @param coerce

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

@@ -7,25 +7,29 @@ import { HeadingLevel } from "../functional/Heading";
  */
 export declare class Popover {
   /**
-   * Automatically closes any currently open popovers when clicking outside of a popover.
+   * When true and clicking outside of the component, automatically closes open `calcite-popover`s.
    */
   autoClose: boolean;
   /**
-   * Display a close button within the Popover.
+   * When true, a close button is added to the component.
    *
    * @deprecated use dismissible instead.
    */
   closeButton: boolean;
   /**
-   * Display a close button within the Popover.
+   * When true, a close button is added to the component.
+   *
+   * @deprecated use closable instead
    */
   dismissible: boolean;
+  /** When true, display a close button within the Popover */
+  closable: boolean;
   /**
-   * Prevents flipping the popover's placement when it starts to overlap its reference element.
+   * When true, prevents flipping the component's placement when overlapping its `referenceElement`.
    */
   disableFlip: boolean;
   /**
-   * Removes the caret pointer.
+   * When true, removes the caret pointer.
    */
   disablePointer: boolean;
   /**
@@ -34,52 +38,52 @@ export declare class Popover {
   flipPlacements?: ComputedPlacement[];
   flipPlacementsHandler(): void;
   /**
-   * Heading text.
+   * The component header text.
    */
   heading?: string;
   /**
-   * Number at which section headings should start for this component.
+   * Specifies the number at which section headings should start.
    */
   headingLevel: HeadingLevel;
-  /** Accessible name for the component */
+  /** Accessible name for the component. */
   label: string;
   /**
-   * Offset the position of the popover away from the reference element.
+   * Offsets the position of the popover away from the `referenceElement`.
    *
    * @default 6
    */
   offsetDistance: number;
   offsetDistanceOffsetHandler(): void;
   /**
-   * Offset the position of the popover along the reference element.
+   * Offsets the position of the popover along the `referenceElement`.
    */
   offsetSkidding: number;
   offsetSkiddingHandler(): void;
   /**
-   * Display and position the component.
+   * When true, displays and positions the component.
    */
   open: boolean;
   openHandler(): void;
-  /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+  /** Describes the positioning type to use for the overlaid content. If the element is in a fixed container, use the "fixed" value. */
   overlayPositioning: OverlayPositioning;
   /**
-   * Determines where the component will be positioned relative to the referenceElement.
+   * Determines where the component will be positioned relative to the `referenceElement`.
    *
    * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
    */
   placement: PopperPlacement;
   placementHandler(): void;
   /**
-   * Reference HTMLElement used to position this component according to the placement property. As a convenience, a string ID of the reference element can be used. However, setting this property to use an HTMLElement is preferred so that the component does not need to query the DOM for the referenceElement.
+   *  The `referenceElement` used to position the component according to its "placement" value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used.
    */
   referenceElement: ReferenceElement | string;
   referenceElementHandler(): void;
   /**
-   * Disables automatically toggling a popover when its referenceElement has been triggered. This property can be set to true to manage when a popover is open.
+   * When true, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to "true" to manage when a popover is open.
    */
   triggerDisabled: boolean;
   /**
-   * Text for close button.
+   * Accessible name for the component's close button.
    *
    * @default "Close"
    */
@@ -96,9 +100,9 @@ export declare class Popover {
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
-  /** Fired when the popover is closed */
+  /** Fired when the component is closed. */
   calcitePopoverClose: EventEmitter;
-  /** Fired when the popover is opened */
+  /** Fired when the component is opened. */
   calcitePopoverOpen: EventEmitter;
   /** Updates the position of the component. */
   reposition(): Promise<void>;
@@ -109,7 +113,7 @@ export declare class Popover {
    */
   setFocus(focusId?: "close-button"): Promise<void>;
   /**
-   * Toggles the popover's open property.
+   * Toggles the component's open property.
    *
    * @param value
    */

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

@@ -1,15 +1,15 @@
 import { VNode } from "../../stencil-public-runtime";
 export declare class Progress {
   el: HTMLCalciteProgressElement;
-  /** Use indeterminate if finding actual progress value is impossible */
+  /** Use indeterminate if finding actual progress value is impossible. */
   type: "indeterminate" | "determinate";
-  /** Fraction completed, in the range of 0 - 1.0 */
+  /** The component's progress value, with a range of 0.0 - 1.0. */
   value: number;
-  /** Label for the progress indicator */
+  /** Accessible name for the component. */
   label: string;
-  /** Text to display for the progress indicator */
+  /** Text that displays under the component's indicator. */
   text: string;
-  /** For indeterminate progress bars, reverse the animation direction */
+  /** When true and for indeterminate progress bars, reverses the animation direction. */
   reversed: boolean;
   render(): VNode;
 }

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

@@ -43,6 +43,7 @@ export declare class RadioButton implements LabelableComponent, CheckableFormCom
   value: any;
   labelEl: HTMLCalciteLabelElement;
   formEl: HTMLFormElement;
+  defaultChecked: boolean;
   defaultValue: RadioButton["value"];
   rootNode: HTMLElement;
   containerEl: HTMLDivElement;

package/dist/types/components/radio-group/radio-group.d.ts

@@ -32,12 +32,15 @@ export declare class RadioGroup implements LabelableComponent, FormComponent, In
   valueHandler(value: string): void;
   /**
    * The group's selected item.
+   *
+   * @readonly
    */
   selectedItem: HTMLCalciteRadioGroupItemElement;
   protected handleSelectedItemChange<T extends HTMLCalciteRadioGroupItemElement>(newItem: T, oldItem: T): void;
   /** specify the width of the group, defaults to auto */
   width: Extract<"auto" | "full", Width>;
   componentWillLoad(): void;
+  componentDidLoad(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidRender(): void;

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

@@ -53,6 +53,8 @@ export declare class Rating implements LabelableComponent, FormComponent, Intera
   render(): any;
   onLabelClick(): void;
   private updateValue;
+  private onKeyboardPressed;
+  private onFocusChange;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   labelEl: HTMLCalciteLabelElement;

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/interfaces.d.ts

@@ -0,0 +1 @@
+export declare type DragStatus = "idle" | "active" | "change" | "commit";

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

@@ -0,0 +1,8 @@
+import { DragStatus } from "./interfaces";
+import { ValueList } from "./value-list";
+export declare function getScreenReaderText(item: HTMLCalciteValueListItemElement, status: DragStatus, valueList: ValueList<HTMLCalciteValueListItemElement>): string;
+export declare function getHandleAndItemElement(event: KeyboardEvent | FocusEvent): {
+  handle: HTMLCalciteHandleElement;
+  item: HTMLCalciteValueListItemElement;
+};
+export declare function replacePlaceholders(text: string, label: string, position: number, total: number): string;

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,26 +25,50 @@ 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;
+  /**
+   * When "drag-enabled" 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`.
+   */
+  intlDragHandleIdle?: string;
+  /**
+   * When "drag-enabled" 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`.
+   */
+  intlDragHandleActive?: string;
+  /**
+   * When "drag-enabled" 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`.
+   */
+  intlDragHandleChange?: string;
+  /**
+   * When "drag-enabled" 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`.
+   */
+  intlDragHandleCommit?: string;
   selectedValues: Map<string, ItemElement>;
   dataForFilter: ItemData;
   items: ItemElement[];
@@ -54,6 +78,7 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
   el: HTMLCalciteValueListElement;
   emitCalciteListChange: () => void;
   filterEl: HTMLCalciteFilterElement;
+  assistiveTextEl: HTMLSpanElement;
   connectedCallback(): void;
   componentDidLoad(): void;
   componentDidRender(): void;
@@ -83,6 +108,7 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
   handleFilter: any;
   getItemData: any;
   keyDownHandler: (event: KeyboardEvent) => void;
+  handleBlur(): void;
   /** Returns the currently selected items */
   getSelectedItems(): Promise<Map<string, HTMLCalciteValueListItemElement>>;
   /**
@@ -92,5 +118,9 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
    */
   setFocus(focusId?: ListFocusId): Promise<void>;
   getIconType(): ICON_TYPES | null;
+  updateScreenReaderText(text: string): void;
+  updateHandleAriaLabel(handleElement: HTMLSpanElement, text: string): void;
+  storeAssistiveEl: (el: HTMLSpanElement) => void;
+  handleFocusIn: (event: FocusEvent) => void;
   render(): VNode;
 }