@esri/calcite-components 1.0.0-next.647 → 1.0.0-next.649

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-next.647
+ * v1.0.0-next.649
  */
 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-next.647
+ * v1.0.0-next.649
  */
 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-next.647
+ * v1.0.0-next.649
  */
 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-next.647
+ * v1.0.0-next.649
  */
 (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-item/accordion-item.d.ts

@@ -6,42 +6,14 @@ import { ItemKeyEvent, RegistryEntry, RequestedItem } from "./interfaces";
  */
 export declare class AccordionItem implements ConditionalSlotComponent {
   el: HTMLCalciteAccordionItemElement;
-  /**
-   * When `true`, the component is active.
-   *
-   * @deprecated use `expanded` instead.
-   */
-  active: boolean;
-  activeHandler(value: boolean): void;
   /** When `true`, the component is expanded. */
   expanded: boolean;
-  expandedHandler(value: boolean): void;
-  /**
-   * Specifies a title for the component.
-   *
-   * @deprecated Use `heading` instead.
-   */
-  itemTitle?: string;
-  /**
-   * Specifies a subtitle for the component.
-   *
-   * @deprecated Use `description` instead.
-   */
-  itemSubtitle?: string;
   /** Specifies heading text for the component. */
   heading?: string;
   /** Specifies a description for the component. */
   description: string;
-  /**
-   * Specifies an icon to display.
-   *
-   * @deprecated use `iconStart` or `iconEnd` instead.
-   */
-  icon?: string;
-  iconHandler(value: string): void;
   /** Specifies an icon to display at the start of the component. */
   iconStart?: string;
-  iconStartHandler(value: string): void;
   /** Specifies an icon to display at the end of the component. */
   iconEnd?: string;
   /**

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

@@ -67,7 +67,7 @@ export declare class ActionBar implements ConditionalSlotComponent, LoadableComp
    * @param focusId
    */
   setFocus(focusId?: "expand-toggle"): Promise<void>;
-  actionMenuOpenChangeHandler: (event: CustomEvent<boolean>) => void;
+  actionMenuOpenChangeHandler: (event: CustomEvent<void>) => void;
   resizeHandlerEntries: (entries: ResizeObserverEntry[]) => void;
   resizeHandler: (entry: ResizeObserverEntry) => void;
   private resize;

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

@@ -39,5 +39,5 @@ export declare class ActionGroup implements ConditionalSlotComponent {
   renderTooltip(): VNode;
   renderMenu(): VNode;
   render(): VNode;
-  setMenuOpen: (event: CalciteActionMenuCustomEvent<boolean>) => void;
+  setMenuOpen: (event: CalciteActionMenuCustomEvent<void>) => void;
 }

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

@@ -1,6 +1,6 @@
 import { Event, EventEmitter } from "../../stencil-public-runtime";
 import { VNode } from "../../stencil-public-runtime";
-import { DeprecatedEventPayload, Scale } from "../interfaces";
+import { Scale } from "../interfaces";
 import { LogicalPlacement, EffectivePlacement, OverlayPositioning } from "../../utils/floating-ui";
 import { LoadableComponent } from "../../utils/loadable";
 /**
@@ -51,9 +51,8 @@ export declare class ActionMenu implements LoadableComponent {
   /**
    * Emits when the `open` property has changed.
    *
-   * **Note:**: The event payload is deprecated, please use the `open` property on the component instead
    */
-  calciteActionMenuOpenChange: EventEmitter<DeprecatedEventPayload>;
+  calciteActionMenuOpenChange: EventEmitter<void>;
   closeCalciteActionMenuOnClick(event: PointerEvent): void;
   el: HTMLCalciteActionMenuElement;
   menuButtonEl: HTMLCalciteActionElement;

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

@@ -52,7 +52,7 @@ export declare class ActionPad implements ConditionalSlotComponent, LoadableComp
    * @param focusId
    */
   setFocus(focusId?: "expand-toggle"): Promise<void>;
-  actionMenuOpenChangeHandler: (event: CustomEvent<boolean>) => void;
+  actionMenuOpenChangeHandler: (event: CustomEvent<void>) => void;
   toggleExpand: () => void;
   setExpandToggleRef: (el: HTMLCalciteActionElement) => void;
   renderBottomActionGroup(): VNode;

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

@@ -66,22 +66,10 @@ export declare class Block implements ConditionalSlotComponent, InteractiveCompo
    * Displays a status-related indicator icon.
    */
   status?: Status;
-  /**
-   * A description for the component, which displays below the heading.
-   *
-   * @deprecated use `description` instead
-   */
-  summary: string;
   /**
    * A description for the component, which displays below the heading.
    */
   description: string;
-  /**
-   * When `true`, removes padding for the slotted content.
-   *
-   * @deprecated Use `--calcite-block-padding` CSS variable instead.
-   */
-  disablePadding: boolean;
   componentDidRender(): void;
   el: HTMLCalciteBlockElement;
   private guid;

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

@@ -1,7 +1,6 @@
 export declare const CSS: {
   container: string;
   content: string;
-  contentSpaced: string;
   headerContainer: string;
   icon: string;
   statusIcon: string;

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

@@ -4,97 +4,101 @@ import { DateRangeChange } from "./interfaces";
 import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
 export declare class DatePicker implements LocalizedComponent {
   el: HTMLCalciteDatePickerElement;
-  /** Active date */
+  /** Specifies the component's active date. */
   activeDate: Date;
   activeDateWatcher(newActiveDate: Date): void;
-  /** Active range */
-  activeRange?: "start" | "end";
-  /** Selected date */
-  value?: string | string[];
   /**
-   * Number at which section headings should start for this component.
+   * When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date.
+   */
+  activeRange: "start" | "end";
+  /**
+   * Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`).
+   */
+  value: string | string[];
+  /**
+   * Specifies the number at which section headings should start.
    */
   headingLevel: HeadingLevel;
-  /** Selected date as full date object*/
-  valueAsDate?: Date | Date[];
+  /** Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). */
+  valueAsDate: Date | Date[];
   handleValueAsDate(date: Date | Date[]): void;
   /**
-   * Selected start date as full date object
+   * Specifies the selected start date as a full date object.
    *
-   * @deprecated use valueAsDate instead
+   * @deprecated use `valueAsDate` instead.
    */
-  startAsDate?: Date;
+  startAsDate: Date;
   /**
-   * Selected end date as full date object
+   * Specifies the selected end date as a full date object.
    *
-   * @deprecated use valueAsDate instead
+   * @deprecated use `valueAsDate` instead.
    */
-  endAsDate?: Date;
-  /** Earliest allowed date as full date object */
-  minAsDate?: Date;
-  /** Latest allowed date as full date object */
-  maxAsDate?: Date;
+  endAsDate: Date;
+  /** Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
+  minAsDate: Date;
+  /** Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
+  maxAsDate: Date;
   handleRangeChange(): void;
-  /** Earliest allowed date ("yyyy-mm-dd") */
-  min?: string;
+  /** Specifies the earliest allowed date (`"yyyy-mm-dd"`). */
+  min: string;
   onMinChanged(min: string): void;
-  /** Latest allowed date ("yyyy-mm-dd") */
-  max?: string;
+  /** Specifies the latest allowed date (`"yyyy-mm-dd"`). */
+  max: string;
   onMaxChanged(max: string): void;
   /**
-   * Localized string for "previous month" (used for aria label)
+   * Accessible name for the component's previous month button.
    *
    * @default "Previous month"
    */
-  intlPrevMonth?: string;
+  intlPrevMonth: string;
   /**
-   * Localized string for "next month" (used for aria label)
+   * Accessible name for the component's next month button.
    *
    * @default "Next month"
    */
-  intlNextMonth?: string;
+  intlNextMonth: string;
   /**
-   * Localized string for "year" (used for aria label)
+   * Accessible name for the component's year input.
    *
    * @default "Year"
    */
-  intlYear?: string;
+  intlYear: string;
   /**
    * Specifies the BCP 47 language tag for the desired language and country format.
    *
    * @deprecated set the global `lang` attribute on the element instead.
    * @mdn [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
    */
-  locale?: string;
+  locale: string;
   /**
    * Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed.
    *
    */
-  numberingSystem?: NumberingSystem;
-  /** specify the scale of the date picker */
+  numberingSystem: NumberingSystem;
+  /** Specifies the size of the component. */
   scale: "s" | "m" | "l";
-  /** Range mode activation */
+  /** When `true`, activates the component's range mode to allow a start and end date. */
   range: boolean;
   /**
-   * Selected start date
+   * Specifies the selected start date.
    *
-   * @deprecated use value instead
+   * @deprecated use `value` instead.
    */
-  start?: string;
+  start: string;
   /**
-   * Selected end date
+   * Specifies the selected end date.
    *
-   * @deprecated use value instead
+   * @deprecated use `value` instead.
    */
-  end?: string;
-  /** Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */
+  end: string;
+  /** When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. */
   proximitySelectionDisabled: boolean;
   /**
-   * Trigger calcite date change when a user changes the date.
+   * Emits when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`.
    */
   calciteDatePickerChange: EventEmitter<Date>;
   /**
-   * Trigger calcite date change when a user changes the date range.
+   * Emits when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`.
    *
    * @see [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/date-picker/interfaces.ts#L1)
    */

package/dist/types/components/date-picker-day/date-picker-day.d.ts

@@ -5,15 +5,15 @@ export declare class DatePickerDay implements InteractiveComponent {
   el: HTMLCalciteDatePickerDayElement;
   /** Day of the month to be shown. */
   day: number;
-  /** Date is outside of range and can't be selected */
+  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
   /** Date is in the current month. */
   currentMonth: boolean;
-  /** Date is the current selected date of the picker */
+  /**  When `true`, the component is selected. */
   selected: boolean;
   /** Date is currently highlighted as part of the range */
   highlighted: boolean;
-  /** Showing date range */
+  /** When `true`, activates the component's range mode to allow a start and end date. */
   range: boolean;
   /** Date is the start of date range */
   startOfRange: boolean;
@@ -21,11 +21,11 @@ export declare class DatePickerDay implements InteractiveComponent {
   endOfRange: boolean;
   /** Date is being hovered and within the set range */
   rangeHover: boolean;
-  /** Date is actively in focus for keyboard navigation */
+  /** When `true`, the component is active. */
   active: boolean;
-  /** specify the scale of the date picker */
+  /** Specifies the size of the component. */
   scale: Scale;
-  /** Date value for the day. */
+  /** The component's value. */
   value: Date;
   onClick: () => void;
   keyDownHandler: (event: KeyboardEvent) => void;

package/dist/types/components/date-picker-month/date-picker-month.d.ts

@@ -12,11 +12,11 @@ export declare class DatePickerMonth {
   startDate?: Date;
   /** End date currently active  */
   endDate?: Date;
-  /** Minimum date of the calendar below which is disabled.*/
+  /** Specifies the earliest allowed date (`"yyyy-mm-dd"`). */
   min: Date;
-  /** Maximum date of the calendar above which is disabled.*/
+  /** Specifies the latest allowed date (`"yyyy-mm-dd"`). */
   max: Date;
-  /** specify the scale of the date picker */
+  /** Specifies the size of the component. */
   scale: Scale;
   /**
    * CLDR locale data for current locale

package/dist/types/components/date-picker-month-header/date-picker-month-header.d.ts

@@ -9,20 +9,20 @@ export declare class DatePickerMonthHeader {
   /** Focused date with indicator (will become selected date if user proceeds) */
   activeDate: Date;
   /**
-   * Number at which section headings should start for this component.
+   * Specifies the number at which section headings should start.
    */
   headingLevel: HeadingLevel;
-  /** Minimum date of the calendar below which is disabled. */
+  /** Specifies the earliest allowed date (`"yyyy-mm-dd"`). */
   min: Date;
-  /** Maximum date of the calendar above which is disabled. */
+  /** Specifies the latest allowed date (`"yyyy-mm-dd"`). */
   max: Date;
-  /** Localized string for previous month. */
+  /** Accessible name for the component's previous month button. */
   intlPrevMonth: string;
-  /** Localized string for next month. */
+  /** Accessible name for the component's next month button. */
   intlNextMonth: string;
-  /** Localized string for year. */
+  /** Accessible name for the component's year input. */
   intlYear: string;
-  /** specify the scale of the date picker */
+  /** Specifies the size of the component. */
   scale: Scale;
   /** CLDR locale data for translated calendar info */
   localeData: DateLocaleData;

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

@@ -12,31 +12,37 @@ import { RequestedItem } from "../dropdown-group/interfaces";
 export declare class Dropdown implements InteractiveComponent, OpenCloseComponent, FloatingUIComponent {
   el: HTMLCalciteDropdownElement;
   /**
-   * Opens or closes the dropdown
+   * When `true`, displays and positions the component.
    *
-   * @deprecated use open instead.
+   * @deprecated use `open` instead.
    */
   active: boolean;
   activeHandler(value: boolean): void;
-  /** When true, opens the dropdown */
+  /**
+   * When `true`, displays and positions the component.
+   */
   open: boolean;
   openHandler(value: boolean): void;
   /**
-   allow the dropdown to remain open after a selection is made
-   if the selection-mode of the selected item's containing group is "none", the dropdown will always close
+   * When `true`, the component will remain open after a selection is made.
+   *
+   * If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close.
+   *
    */
   disableCloseOnSelect: boolean;
-  /** is the dropdown disabled  */
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   */
   disabled: boolean;
   handleDisabledChange(value: boolean): void;
   /**
    * Defines the available placements that can be used when a flip occurs.
    */
-  flipPlacements?: EffectivePlacement[];
+  flipPlacements: EffectivePlacement[];
   flipPlacementsHandler(): void;
   /**
-   specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
-   this value does not include groupTitles passed to calcite-dropdown-group
+   * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller.
+   * Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.
    */
   maxItems: number;
   maxItemsHandler(): void;
@@ -51,24 +57,30 @@ export declare class Dropdown implements InteractiveComponent, OpenCloseComponen
   overlayPositioning: OverlayPositioning;
   overlayPositioningHandler(): void;
   /**
-   * Determines where the dropdown will be positioned relative to the button.
+   * Determines where the component will be positioned relative to the container element.
    *
    * @default "bottom-start"
    */
   placement: MenuPlacement;
   placementHandler(): void;
-  /** specify the scale of dropdown, defaults to m */
+  /**
+   * Specifies the size of the component.
+   */
   scale: Scale;
   /**
-   * **read-only** The currently selected items
+   * Specifies the component's selected items.
    *
    * @readonly
    */
   selectedItems: HTMLCalciteDropdownItemElement[];
-  /** specify whether the dropdown is opened by hover or click of a trigger element */
+  /**
+   * Specifies the action to open the component from the container element.
+   */
   type: "hover" | "click";
-  /** specify the width of dropdown */
-  width?: Scale;
+  /**
+   * Specifies the width of the component.
+   */
+  width: Scale;
   connectedCallback(): void;
   componentDidLoad(): void;
   componentDidRender(): void;
@@ -80,7 +92,7 @@ export declare class Dropdown implements InteractiveComponent, OpenCloseComponen
    * @param delayed
    */
   reposition(delayed?: boolean): Promise<void>;
-  /** fires when a dropdown item has been selected or deselected */
+  /** Fires when a `calcite-dropdown-item`'s selection changes. */
   calciteDropdownSelect: EventEmitter<Selection>;
   /** Fires when the component is requested to be closed and before the closing transition begins. */
   calciteDropdownBeforeClose: EventEmitter<void>;

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

@@ -2,19 +2,21 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { RequestedItem, SelectionMode } from "./interfaces";
 import { Scale } from "../interfaces";
 /**
- * @slot - A slot for adding `calcite-dropdown-item` components.
+ * @slot - A slot for adding `calcite-dropdown-item`s.
  */
 export declare class DropdownGroup {
   el: HTMLCalciteDropdownGroupElement;
-  /** optionally set a group title for display */
-  groupTitle?: string;
+  /** Specifies and displays a group title. */
+  groupTitle: string;
   /**
-    specify the selection mode - multiple (allow any number of (or no) active items), single (allow and require one active item),
-   none (no active items), defaults to single
+   * Specifies the component's selection mode, where
+   * `"multi"` allows any number of (or no) selected `calcite-dropdown-item`s,
+   * `"single"` allows and requires one selected `calcite-dropdown-item`, and
+   * `"none"` does not allow selection on `calcite-dropdown-item`s.
    */
   selectionMode: SelectionMode;
   /**
-   * Specifies the size of the action.
+   * Specifies the size of the component.
    */
   scale: Scale;
   /**

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

@@ -9,29 +9,33 @@ import { LoadableComponent } from "../../utils/loadable";
 export declare class DropdownItem implements LoadableComponent {
   el: HTMLCalciteDropdownItemElement;
   /**
-   * Indicates whether the item is active.
+   * When `true`, the component is selected.
    *
-   * @deprecated Use selected instead.
+   * @deprecated Use `selected` instead.
    */
   active: boolean;
   activeHandler(value: boolean): void;
-  /** When true, item is selected  */
+  /** When `true`, the component is selected. */
   selected: boolean;
   selectedHandler(value: boolean): void;
-  /** When true, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
-  iconFlipRtl?: FlipContext;
+  /** 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;
+  iconStart: string;
   /** Specifies an icon to display at the end of the component. */
-  iconEnd?: string;
-  /** optionally pass a href - used to determine if the component should render as anchor */
-  href?: string;
-  /** Applies to the aria-label attribute on the button or hyperlink */
-  label?: string;
-  /** The rel attribute to apply to the hyperlink */
-  rel?: string;
-  /** The target attribute to apply to the hyperlink */
-  target?: string;
+  iconEnd: string;
+  /**
+   *  Specifies the URL of the linked resource, which can be set as an absolute or relative path.
+   *
+   * Determines if the component will render as an anchor.
+   */
+  href: string;
+  /** Accessible name for the component. */
+  label: string;
+  /** Specifies the relationship to the linked document defined in `href`. */
+  rel: string;
+  /** Specifies the frame or window to open the linked document. */
+  target: string;
   /**
    * @internal
    */

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

@@ -5,15 +5,15 @@ import { InteractiveComponent } from "../../utils/interactive";
 import { LoadableComponent } from "../../utils/loadable";
 export declare class Fab implements InteractiveComponent, LoadableComponent {
   /**
-   * Used to set the button's appearance. Default is outline.
+   * Specifies the appearance style of the component.
    */
   appearance: Extract<"solid" | "outline", Appearance>;
   /**
-   * Used to set the button's color. Default is light.
+   * Specifies the color of the component.
    */
   color: ButtonColor;
   /**
-   * 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;
   /**
@@ -21,25 +21,25 @@ export declare class Fab implements InteractiveComponent, LoadableComponent {
    *
    * @default "plus"
    */
-  icon?: string;
+  icon: string;
   /**
-   * Label of the FAB, exposed on hover when textEnabled is false. If no label is provided, the label inherits what's provided for the `text` prop.
+   * Accessible name for the component.
    */
-  label?: string;
+  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 fab.
+   * Specifies the size of the component.
    */
   scale: Scale;
   /**
-   * Text that accompanies the FAB icon.
+   * Specifies text to accompany the component's icon.
    */
-  text?: string;
+  text: string;
   /**
-   * Indicates whether the text is displayed.
+   * When `true`, displays the `text` value in the component.
    */
   textEnabled: boolean;
   el: HTMLCalciteFabElement;