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

package/dist/loader/cdn.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-beta.83
+ * v1.0.0-beta.86
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.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-beta.83
+ * v1.0.0-beta.86
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.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-beta.83
+ * v1.0.0-beta.86
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.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-beta.83
+ * v1.0.0-beta.86
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

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

@@ -2,21 +2,21 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { AccordionAppearance } from "./interfaces";
 import { Position, Scale } from "../interfaces";
 /**
- * @slot - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however calcite-accordion-item`s can.
+ * @slot - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can.
  */
 export declare class Accordion {
   el: HTMLCalciteAccordionElement;
-  /** specify the appearance - default (containing border), or minimal (no containing border), defaults to default */
+  /** Specifies the appearance of the component. */
   appearance: AccordionAppearance;
-  /** specify the placement of the icon in the header, defaults to end */
+  /** Specifies the placement of the icon in the header. */
   iconPosition: Position;
-  /** specify the type of the icon in the header, defaults to chevron */
+  /** Specifies the type of the icon in the header. */
   iconType: "chevron" | "caret" | "plus-minus";
-  /** specify the scale of accordion, defaults to m */
+  /** Specifies the size of the component. */
   scale: Scale;
   /**
-   * specify the selection mode - multi (allow any number of open items), single (allow one open item),
-   * or single-persist (allow and require one open item), defaults to multi
+   * Specifies the selection mode - "multi" (allow any number of open items), "single" (allow one open item),
+   * or "single-persist" (allow and require one open item).
    */
   selectionMode: "multi" | "single" | "single-persist";
   /**

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

@@ -4,13 +4,31 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
  */
 export declare class AccordionItem {
   el: HTMLCalciteAccordionItemElement;
-  /** Indicates whether the item is active. */
+  /**
+   * When true, the component is active.
+   *
+   * @deprecated use expanded instead
+   */
   active: boolean;
-  /** pass a title for the accordion item */
+  /** When true, item is expanded */
+  expanded: boolean;
+  /**
+   * Specifies a title for the component.
+   *
+   * @deprecated Use `heading` instead.
+   */
   itemTitle?: string;
-  /** pass a title for the accordion item */
+  /**
+   * Specifies a subtitle for the component.
+   *
+   * @deprecated Use `description` instead.
+   */
   itemSubtitle?: string;
-  /** optionally pass an icon to display - accepts Calcite UI icon names  */
+  /** Specifies heading text for the component. */
+  heading?: string;
+  /** Specifies a description for the component. */
+  description: string;
+  /** Specifies an icon to display - accepts Calcite UI icon names. */
   icon?: string;
   /**
    * @internal

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

@@ -6,51 +6,49 @@ import { InteractiveComponent } from "../../utils/interactive";
  */
 export declare class Action implements InteractiveComponent {
   /**
-   * Indicates whether the action is highlighted.
+   * When true, the component is highlighted.
    */
   active: boolean;
   /**
-   * Optionally specify the horizontal alignment of button elements with text content.
+   * Specifies the horizontal alignment of button elements with text content.
    */
   alignment?: Alignment;
-  /** Specify the appearance style of the action, defaults to solid. */
+  /** Specifies the appearance of the component. */
   appearance: Extract<"solid" | "clear", Appearance>;
   /**
-   * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
+   * When true, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
    */
   compact: boolean;
   /**
-   * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
+   * When true, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
-  /**
-   * The name of the icon to display. The value of this property must match the icon name from https://esri.github.io/calcite-ui-icons/.
-   */
+  /** Specifies an icon to display - accepts Calcite UI icon names.  */
   icon?: string;
   /**
-   * Indicates unread changes.
+   * When true, indicates unread changes.
    */
   indicator: boolean;
   /**
-   * string to override English loading text
+   * Specifies the text label to display while loading.
    *
    * @default "Loading"
    */
   intlLoading?: string;
   /**
-   * The label of the action. If no label is provided, the label inherits what's provided for the `text` prop.
+   * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.
    */
   label?: string;
   /**
-   * When true, content is waiting to be loaded. This state shows a busy indicator.
+   * When true, a busy indicator is displayed.
    */
   loading: boolean;
   /**
-   * Specifies the size of the action.
+   * Specifies the size of the component.
    */
   scale: Scale;
   /**
-   * Text that accompanies the action icon.
+   * Specifies text that accompanies the icon.
    */
   text: string;
   /**
@@ -58,7 +56,7 @@ export declare class Action implements InteractiveComponent {
    */
   textEnabled: boolean;
   /**
-   * Emitted when the action has been clicked.
+   * Emits when the component has been clicked.
    *
    * @deprecated use onClick instead.
    */

package/dist/types/components/action-bar/action-bar.d.ts

@@ -9,38 +9,38 @@ import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
  */
 export declare class ActionBar implements ConditionalSlotComponent {
   /**
-   * When set to true, the expand-toggling behavior will be disabled.
+   * When true, the expand-toggling behavior is disabled.
    */
   expandDisabled: boolean;
   expandHandler(): void;
   /**
-   * Indicates whether widget is expanded.
+   * When true, the component is expanded.
    */
   expanded: boolean;
   expandedHandler(expanded: boolean): void;
   /**
-   * Updates the label of the expand icon when the component is not expanded.
+   * Specifies the label of the expand icon when the component is collapsed.
    */
   intlExpand?: string;
   /**
-   * Updates the label of the collapse icon when the component is expanded.
+   * Specifies the label of the collapse icon when the component is expanded.
    */
   intlCollapse?: string;
   /**
-   * Disables automatically overflowing actions that won't fit into menus.
+   * Disables automatically overflowing `calcite-action`s that won't fit into menus.
    */
   overflowActionsDisabled: boolean;
   overflowDisabledHandler(overflowActionsDisabled: boolean): void;
   /**
-   * Arranges the component depending on the elements 'dir' property.
+   * Arranges the component depending on the element's `dir` property.
    */
   position: Position;
   /**
-   * Specifies the size of the expand action.
+   * Specifies the size of the expand `calcite-action`.
    */
   scale: Scale;
   /**
-   * Emitted when expanded has been toggled.
+   * Emits when the `expanded` property is toggled.
    */
   calciteActionBarToggle: EventEmitter;
   el: HTMLCalciteActionBarElement;

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

@@ -3,17 +3,17 @@ import { Columns, Layout, Scale } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding a group of `calcite-action`s.
- * @slot menu-actions - a slot for adding an overflow menu with actions inside a dropdown.
- * @slot menu-tooltip - a slot for adding an tooltip for the menu.
+ * @slot menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
+ * @slot menu-tooltip - A slot for adding a `calcite-tooltip` for the menu.
  */
 export declare class ActionGroup implements ConditionalSlotComponent {
   /**
-   * Indicates whether widget is expanded.
+   * When true, the component is expanded.
    */
   expanded: boolean;
   expandedHandler(): void;
   /**
-   * Indicates the horizontal, vertical, or grid layout of the component.
+   * Indicates the layout of the component.
    */
   layout: Layout;
   /**
@@ -21,15 +21,15 @@ export declare class ActionGroup implements ConditionalSlotComponent {
    */
   columns?: Columns;
   /**
-   * Text string for the actions menu.
+   * Specifies a text string for the `calcite-action-menu`.
    */
   intlMore?: string;
   /**
-   * Opens the action menu.
+   * When true, the `calcite-action-menu` is open.
    */
   menuOpen: boolean;
   /**
-   * Specifies the size of the action-menu.
+   * Specifies the size of the `calcite-action-menu`.
    */
   scale: Scale;
   el: HTMLCalciteActionGroupElement;

package/dist/types/components/action-menu/action-menu.d.ts

@@ -12,7 +12,7 @@ export declare class ActionMenu implements ConditionalSlotComponent {
   connectedCallback(): void;
   disconnectedCallback(): void;
   /**
-   * Indicates whether widget is expanded.
+   * When true, the component is expanded.
    */
   expanded: boolean;
   expandedHandler(): void;
@@ -21,28 +21,28 @@ export declare class ActionMenu implements ConditionalSlotComponent {
    */
   flipPlacements?: ComputedPlacement[];
   /**
-   *  Text string for the actions menu.
+   *  Specifies the text string for the component.
    */
   label: string;
   /**
-   * Opens the action menu.
+   * When true, the component is open.
    */
   open: boolean;
   openHandler(open: boolean): void;
-  /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+  /** Determines the type of positioning to use for the overlaid content. If your 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;
   /**
-   * Specifies the size of the menu trigger action.
+   * Specifies the size of the component's trigger `calcite-action`.
    */
   scale: Scale;
   /**
-   * Emitted when the open property has changed.
+   * Emits when the `open` property has changed.
    */
   calciteActionMenuOpenChange: EventEmitter;
   closeCalciteActionMenuOnClick(event: Event): void;

package/dist/types/components/action-pad/action-pad.d.ts

@@ -2,41 +2,41 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Layout, Position, Scale } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
- * @slot - A slot for adding `calcite-action`s to the action pad.
- * @slot expand-tooltip - Used to set the tooltip for the expand toggle.
+ * @slot - A slot for adding `calcite-action`s to the component.
+ * @slot expand-tooltip - Used to set the `calcite-tooltip` for the expand toggle.
  */
 export declare class ActionPad implements ConditionalSlotComponent {
   /**
-   * When set to true, the expand-toggling behavior will be disabled.
+   * When true, the expand-toggling behavior is disabled.
    */
   expandDisabled: boolean;
   /**
-   * Indicates whether widget is expanded.
+   * When true, the component is expanded.
    */
   expanded: boolean;
   expandedHandler(expanded: boolean): void;
   /**
-   * Indicates the horizontal or vertical layout of the component.
+   * Indicates the layout of the component.
    */
   layout: Layout;
   /**
-   * Updates the label of the expand icon when the component is not expanded.
+   * Specifies the label of the expand icon when the component is collapsed.
    */
   intlExpand?: string;
   /**
-   * Updates the label of the collapse icon when the component is expanded.
+   * Specifies the label of the collapse icon when the component is expanded.
    */
   intlCollapse?: string;
   /**
-   * Arranges the component depending on the elements 'dir' property.
+   * Arranges the component depending on the element's `dir` property.
    */
   position: Position;
   /**
-   * Specifies the size of the expand action.
+   * Specifies the size of the expand `calcite-action`.
    */
   scale: Scale;
   /**
-   * Emitted when expanded has been toggled.
+   * Emits when the `expanded` property is toggled.
    */
   calciteActionPadToggle: EventEmitter;
   el: HTMLCalciteActionPadElement;

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

@@ -6,37 +6,37 @@ import { AlertDuration, AlertPlacement, StatusColor } from "./interfaces";
  * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
  */
 /**
- * @slot title - Title of the alert (optional)
- * @slot message - Main text of the alert
- * @slot link - Optional action to take from the alert (undo, try again, link to page, etc.)
+ * @slot title - A slot for optionally adding a title to the component.
+ * @slot message - A slot for adding main text to the component.
+ * @slot link - A slot for optionally adding an action to take from the alert (undo, try again, link to page, etc.)
  */
 export declare class Alert {
   el: HTMLCalciteAlertElement;
-  /** Is the alert currently active or not */
+  /** When true, the component is active. */
   active: boolean;
   watchActive(): void;
-  /** Close the alert automatically (recommended for passive, non-blocking alerts) */
+  /** When true, the component closes automatically (recommended for passive, non-blocking alerts). */
   autoDismiss: boolean;
-  /** Duration of autoDismiss (only used with `autoDismiss`) */
+  /** Specifies the duration before the component automatically closes (only use with `autoDismiss`). */
   autoDismissDuration: AlertDuration;
-  /** Color for the alert (will apply to top border and icon) */
+  /** Specifies the color for the component (will apply to top border and icon). */
   color: StatusColor;
   /**
-   * when used as a boolean set to true, show a default recommended icon. You can
-   * also pass a calcite-ui-icon name to this prop to display a requested icon
+   * When true, shows a default recommended icon. Alternatively,
+   * pass a Calcite UI Icon name to display a specific icon.
    */
   icon: string | boolean;
   /**
-   * string to override English close text
+   * Specifies the text label for the close button.
    *
    * @default "Close"
    */
   intlClose: string;
-  /** Accessible name for the component */
+  /** Specifies an accessible name for the component. */
   label: string;
-  /** specify the placement of the alert */
+  /** Specifies the placement of the component */
   placement: AlertPlacement;
-  /** specify the scale of the alert, defaults to m */
+  /** Specifies the size of the component. */
   scale: Scale;
   updateRequestedIcon(): void;
   updateDuration(): void;
@@ -44,18 +44,30 @@ export declare class Alert {
   componentWillLoad(): void;
   disconnectedCallback(): void;
   render(): VNode;
-  /** Fired when an alert is closed */
-  calciteAlertClose: EventEmitter;
-  /** Fired when an alert is opened */
-  calciteAlertOpen: EventEmitter;
+  calciteAlertBeforeClose: EventEmitter<{
+    el: HTMLCalciteAlertElement;
+    queue: HTMLCalciteAlertElement[];
+  }>;
+  calciteAlertClose: EventEmitter<{
+    el: HTMLCalciteAlertElement;
+    queue: HTMLCalciteAlertElement[];
+  }>;
+  calciteAlertBeforeOpen: EventEmitter<{
+    el: HTMLCalciteAlertElement;
+    queue: HTMLCalciteAlertElement[];
+  }>;
+  calciteAlertOpen: EventEmitter<{
+    el: HTMLCalciteAlertElement;
+    queue: HTMLCalciteAlertElement[];
+  }>;
   /**
-   * Fired to sync queue when opened or closed
+   * Fires to sync queue when opened or closed.
    *
    * @internal
    */
   calciteInternalAlertSync: EventEmitter;
   /**
-   * Fired when an alert is added to dom - used to receive initial queue
+   * Fires when the component is added to DOM - used to receive initial queue.
    *
    * @internal
    */
@@ -70,6 +82,8 @@ export declare class Alert {
   queueLength: number;
   /** is the alert queued */
   queued: boolean;
+  private containerDiv;
+  private setContainerDiv;
   /** the close button element */
   private closeButton?;
   private autoDismissTimeoutId;
@@ -80,9 +94,11 @@ export declare class Alert {
   private activeTransitionProp;
   /** determine which alert is active */
   private determineActiveAlert;
-  /** close and emit the closed alert and the queue */
+  /** close and emit calciteInternalAlertSync event with the updated queue payload */
   private closeAlert;
+  transitionRunHandler: (event: TransitionEvent) => void;
   transitionEnd: (event: TransitionEvent) => void;
-  /** emit the opened alert and the queue */
+  /** remove queued class after animation completes */
   private openAlert;
+  private emitOpenCloseEvent;
 }

package/dist/types/components/alert/resources.d.ts

@@ -11,3 +11,6 @@ export declare const SLOTS: {
   message: string;
   link: string;
 };
+export declare const CSS: {
+  container: string;
+};

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

@@ -1,15 +1,15 @@
 import { Scale } from "../interfaces";
 export declare class Avatar {
   el: HTMLCalciteAvatarElement;
-  /** specify the scale of the avatar, defaults to m */
+  /** Specifies the size of the component. */
   scale: Scale;
-  /** src to an image (remember to add a token if the user is private) */
+  /** Specifies the `src` to an image (remember to add a token if the user is private). */
   thumbnail: string;
-  /** full name of the user */
+  /** Specifies the full name of the user. */
   fullName: string;
-  /** user name */
+  /** Specifies the username of the user. */
   username: string;
-  /** unique id for user */
+  /** Specifies the unique id of the user. */
   userId: string;
   render(): any;
   /** True if thumnail fails to load */

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

@@ -68,8 +68,14 @@ export declare class Block implements ConditionalSlotComponent, InteractiveCompo
   status?: Status;
   /**
    * Block summary.
+   *
+   * @deprecated use description instead
    */
   summary: string;
+  /**Block description */
+  description: string;
+  /** When true, removes padding for the slotted content */
+  disablePadding: boolean;
   componentDidRender(): void;
   el: HTMLCalciteBlockElement;
   private guid;

package/dist/types/components/block/resources.d.ts

@@ -11,6 +11,7 @@ export declare const CSS: {
   header: string;
   button: string;
   summary: string;
+  description: string;
   controlContainer: string;
   valid: string;
   invalid: string;

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

@@ -45,6 +45,7 @@ export declare class Checkbox implements LabelableComponent, CheckableFormCompom
   readonly indeterminatePath = "M13 8v1H3V8z";
   labelEl: HTMLCalciteLabelElement;
   formEl: HTMLFormElement;
+  defaultChecked: boolean;
   defaultValue: Checkbox["checked"];
   toggleEl: HTMLDivElement;
   /** Sets focus on the component. */

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

@@ -11,8 +11,14 @@ export declare class Chip implements ConditionalSlotComponent {
   appearance: Extract<"solid" | "clear", Appearance>;
   /** specify the color of the button, defaults to blue */
   color: ChipColor;
-  /** Optionally show a button the user can click to dismiss the chip */
+  /**
+   * Optionally show a button the user can click to dismiss the chip
+   *
+   * @deprecated use closable instead
+   */
   dismissible: boolean;
+  /** When true, show abutton user can click to dismiss the chip. */
+  closable: boolean;
   /**
    * Aria label for the "x" button
    *
@@ -27,6 +33,8 @@ export declare class Chip implements ConditionalSlotComponent {
   scale: Scale;
   /** The assigned value for the chip */
   value: any;
+  /** When true, hides the chip  */
+  closed: boolean;
   el: HTMLCalciteChipElement;
   connectedCallback(): void;
   disconnectedCallback(): void;

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

@@ -163,6 +163,8 @@ export declare class ColorPicker implements InteractiveComponent {
    * Storage ID for colors.
    */
   storageId: string;
+  /** standard UniCode numeral system tag for localization */
+  numberingSystem?: string;
   /**
    * The color value.
    *
@@ -229,11 +231,11 @@ export declare class ColorPicker implements InteractiveComponent {
   protected handleChannelKeyUpOrDown(event: KeyboardEvent): void;
   private handleChannelChange;
   private handleSavedColorKeyDown;
-  private handleColorFieldAndSliderMouseLeave;
-  private handleColorFieldAndSliderMouseDown;
-  private globalMouseUpHandler;
-  private globalMouseMoveHandler;
-  private handleColorFieldAndSliderMouseEnterOrMove;
+  private handleColorFieldAndSliderPointerLeave;
+  private handleColorFieldAndSliderPointerDown;
+  private globalPointerUpHandler;
+  private globalPointerMoveHandler;
+  private handleColorFieldAndSliderPointerEnterOrMove;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   componentWillLoad(): void;
@@ -261,6 +263,7 @@ export declare class ColorPicker implements InteractiveComponent {
   private setCanvasContextSize;
   private captureColorFieldColor;
   private initColorFieldAndSlider;
+  private updateCanvasSize;
   private containsPoint;
   private drawActiveColorFieldColor;
   private drawThumb;

package/dist/types/components/color-picker-hex-input/color-picker-hex-input.d.ts

@@ -30,6 +30,8 @@ export declare class ColorPickerHexInput {
    * The hex value.
    */
   value: string;
+  /** standard UniCode numeral system tag for localization */
+  numberingSystem?: string;
   handleValueChange(value: string, oldValue: string): void;
   /**
    * Emitted when the hex value changes.