@esri/calcite-components 1.0.0-beta.82 → 1.0.0-beta.85

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.82
+ * v1.0.0-beta.85
  */
 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.82
+ * v1.0.0-beta.85
  */
 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.82
+ * v1.0.0-beta.85
  */
 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.82
+ * v1.0.0-beta.85
  */
 (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,28 +2,30 @@ 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";
   /**
    * @internal
    */
-  calciteAccordionChange: EventEmitter;
+  calciteInternalAccordionChange: EventEmitter;
   componentDidLoad(): void;
   render(): VNode;
-  calciteAccordionItemKeyEvent(e: CustomEvent): void;
+  calciteInternalAccordionItemKeyEvent(e: CustomEvent): void;
   registerCalciteAccordionItem(e: CustomEvent): void;
   updateActiveItemOnChange(event: CustomEvent): void;
   /** created list of Accordion items */

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

@@ -4,30 +4,48 @@ 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
    */
-  calciteAccordionItemKeyEvent: EventEmitter;
+  calciteInternalAccordionItemKeyEvent: EventEmitter;
   /**
    * @internal
    */
-  calciteAccordionItemSelect: EventEmitter;
+  calciteInternalAccordionItemSelect: EventEmitter;
   /**
    * @internal
    */
-  calciteAccordionItemClose: EventEmitter;
+  calciteInternalAccordionItemClose: EventEmitter;
   /**
    * @internal
    */
-  calciteAccordionItemRegister: EventEmitter;
+  calciteInternalAccordionItemRegister: EventEmitter;
   connectedCallback(): void;
   componentDidLoad(): void;
   render(): VNode;

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

@@ -6,49 +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;
   /**
@@ -56,7 +56,8 @@ 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.
    */
   calciteActionClick: EventEmitter;

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;
@@ -52,10 +52,15 @@ export declare class ActionBar implements ConditionalSlotComponent {
   disconnectedCallback(): void;
   /**
    * Overflows actions that won't fit into menus.
+   *
    * @internal
    */
   overflowActions(): Promise<void>;
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   setFocus(focusId?: "expand-toggle"): Promise<void>;
   actionMenuOpenChangeHandler: (event: CustomEvent<boolean>) => void;
   resizeHandlerEntries: (entries: ResizeObserverEntry[]) => void;

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,27 +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;
@@ -44,7 +44,11 @@ export declare class ActionPad implements ConditionalSlotComponent {
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentWillLoad(): void;
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   setFocus(focusId?: "expand-toggle"): Promise<void>;
   actionMenuOpenChangeHandler: (event: CustomEvent<boolean>) => void;
   toggleExpand: () => void;

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

@@ -1,37 +1,42 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { AlertDuration, AlertPlacement, StatusColor } from "./interfaces";
-/** Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
+/**
+ * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
  * 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;
@@ -39,22 +44,34 @@ 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
    */
-  calciteAlertSync: EventEmitter;
+  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
    */
-  calciteAlertRegister: EventEmitter;
+  calciteInternalAlertRegister: EventEmitter;
   alertSync(event: CustomEvent): void;
   alertRegister(): void;
   /** Sets focus on the component. */
@@ -65,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;
@@ -75,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/avatar/utils.d.ts

@@ -2,14 +2,19 @@ import { RGB } from "../color-picker/interfaces";
 /**
  * Convert a string to a valid hex by hashing its contents
  * and using the hash as a seed for three distinct color values
+ *
+ * @param str
  */
 export declare function stringToHex(str: string): string;
 /**
  * Find the hue of a color given the separate RGB color channels
+ *
+ * @param rgb
  */
 export declare function rgbToHue(rgb: RGB): number;
 /**
  * For a hex color, find the hue
+ *
  * @param hex {string} - form of "#------"
  */
 export declare function hexToHue(hex: string): number;

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

@@ -32,17 +32,25 @@ export declare class Block implements ConditionalSlotComponent, InteractiveCompo
   headingLevel: HeadingLevel;
   /**
    * Aria-label for collapsing the toggle and tooltip used for the toggle when expanded.
+   *
+   * @default "Collapse"
    */
   intlCollapse?: string;
   /**
    * Aria-label for expanding the toggle and tooltip used for the toggle when collapsed.
+   *
+   * @default "Expand"
    */
   intlExpand?: string;
-  /** string to override English loading text
+  /**
+   * string to override English loading text
+   *
    * @default "Loading"
    */
   intlLoading?: string;
-  /** Text string used for the actions menu
+  /**
+   * Text string used for the actions menu
+   *
    * @default "Options"
    */
   intlOptions?: string;
@@ -60,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;