@esri/calcite-components 1.0.0-beta.92 → 1.0.0-beta.94

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

@@ -4,10 +4,15 @@ import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
-export declare class Slider implements LabelableComponent, FormComponent, InteractiveComponent {
+import { GlobalAttrComponent } from "../../utils/globalAttributes";
+export declare class Slider implements LabelableComponent, FormComponent, InteractiveComponent, GlobalAttrComponent {
   el: HTMLCalciteSliderElement;
   /** When true, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
+  /**
+   * When true, number values are displayed with a group separator corresponding to the language and country format.
+   */
+  groupSeparator: boolean;
   /** When true, indicates a histogram is present. */
   hasHistogram: boolean;
   /**
@@ -45,6 +50,12 @@ export declare class Slider implements LabelableComponent, FormComponent, Intera
   mirrored: boolean;
   /** Specifies the name of the component on form submission. */
   name: string;
+  /**
+   * Specifies the Unicode numeral system used by the component for localization.
+   *
+   * @mdn [numberingSystem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem)
+   */
+  numberingSystem?: string;
   /** Specifies the interval to move with the page up, or page down keys. */
   pageStep?: number;
   /** When true, sets a finer point for handles. */
@@ -119,6 +130,7 @@ export declare class Slider implements LabelableComponent, FormComponent, Intera
   private minValueDragRange;
   private maxValueDragRange;
   private tickValues;
+  globalAttributes: {};
   setValueFromMinMax(): void;
   setMinMaxFromValue(): void;
   onLabelClick(): void;
@@ -215,4 +227,10 @@ export declare class Slider implements LabelableComponent, FormComponent, Intera
    * @param handle
    */
   private isMaxTickLabelObscured;
+  /**
+   * Returns a string representing the localized label value based on groupSeparator prop being on or off.
+   *
+   * @param value
+   */
+  private determineGroupSeparator;
 }

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

@@ -2,24 +2,29 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { TabChangeEventDetail } from "./interfaces";
 import { Scale } from "../interfaces";
 /**
- * @slot - A slot for adding custom content.
+ * @slot - A slot for adding content to the component.
  */
 export declare class Tab {
   el: HTMLCalciteTabElement;
   /**
-   * Optionally include a unique name for this tab,
-   * be sure to also set this name on the associated title.
+   * Specifies a unique name for the component.
+   *
+   * When specified, use the same value on the `calcite-tab-title`.
    */
-  tab: string;
+  tab?: string;
   /**
-   * Show this tab
+   * When true, the component's contents are selected.
+   *
+   * Only one tab can be selected within the `calcite-tabs` parent.
    *
-   * @deprecated Use selected instead.
+   * @deprecated Use "selected" instead.
    */
   active: boolean;
   activeHandler(value: boolean): void;
   /**
-   * When true, display this tab.
+   * When true, the component's contents are selected.
+   *
+   * Only one tab can be selected within the `calcite-tabs` parent.
    */
   selected: boolean;
   selectedHandler(value: boolean): void;
@@ -38,7 +43,7 @@ export declare class Tab {
   calciteInternalTabRegister: EventEmitter<void>;
   internalTabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
   /**
-   * Return the index of this tab within the tab array
+   * Returns the index of the component item within the tab array.
    */
   getTabIndex(): Promise<number>;
   parentTabsEl: HTMLCalciteTabsElement;

package/dist/types/components/tab-nav/tab-nav.d.ts

@@ -9,11 +9,11 @@ import { Scale } from "../interfaces";
 export declare class TabNav {
   el: HTMLCalciteTabNavElement;
   /**
-   * Name to use when saving selected tab data to localStorage
+   * Specifies the name when saving selected `calcite-tab` data to `localStorage`.
    */
   storageId: string;
   /**
-   * Pass the same string to multiple tab navs to keep them all in sync if one changes
+   * Specifies text to update multiple components to keep in sync if one changes.
    */
   syncId: string;
   /**
@@ -59,8 +59,9 @@ export declare class TabNav {
    */
   updateTabTitles(event: CustomEvent<TabID>): void;
   globalInternalTabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
+  iconStartChangeHandler(): void;
   /**
-   * Emitted when the active tab changes
+   * Emits when the selected `calcite-tab` changes.
    *
    * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
    */

package/dist/types/components/tab-title/tab-title.d.ts

@@ -9,24 +9,28 @@ import { InteractiveComponent } from "../../utils/interactive";
 export declare class TabTitle implements InteractiveComponent {
   el: HTMLCalciteTabTitleElement;
   /**
-   * Show this tab title as selected
+   * When true, the component and its respective `calcite-tab` contents are selected.
    *
-   * @deprecated Use selected instead.
+   * Only one tab can be selected within the `calcite-tabs` parent.
+   *
+   * @deprecated Use "selected" instead.
    */
   active: boolean;
   activeHandler(value: boolean): void;
   /**
-   * When true, display this tab title as selected.
+   * When true, the component and its respective `calcite-tab` contents are selected.
+   *
+   * Only one tab can be selected within the `calcite-tabs` parent.
    */
   selected: boolean;
   selectedHandler(value: boolean): void;
-  /** Disable this tab title  */
+  /** When true, interaction is prevented and the component is displayed with lower opacity.  */
   disabled: boolean;
-  /** optionally pass an icon to display at the end of a tab title - accepts calcite ui icon names  */
+  /** Specifies an icon to display at the end of the component - accepts Calcite UI icon names.  */
   iconEnd?: string;
-  /** flip the icon(s) in rtl */
+  /** When true, the icon will be flipped when the element direction is right-to-left ("rtl"). */
   iconFlipRtl?: FlipContext;
-  /** optionally pass an icon to display at the start of a tab title - accepts calcite ui icon names  */
+  /** Specifies an icon to display at the start of the component - accepts Calcite UI icon names.  */
   iconStart?: string;
   /**
    * @internal
@@ -45,8 +49,9 @@ export declare class TabTitle implements InteractiveComponent {
    */
   bordered: boolean;
   /**
-   * Optionally include a unique name for the tab title,
-   * be sure to also set this name on the associated tab.
+   * Specifies a unique name for the component.
+   *
+   * When specified, use the same value on the `calcite-tab`.
    */
   tab?: string;
   connectedCallback(): void;
@@ -60,13 +65,13 @@ export declare class TabTitle implements InteractiveComponent {
   onClick(): void;
   keyDownHandler(event: KeyboardEvent): void;
   /**
-   * Fires when a specific tab is activated. Emits the "tab" property or the index position.
+   * Fires when a `calcite-tab` is selected. Emits the "tab" property, or the index position.
    *
    * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
    */
   calciteTabsActivate: EventEmitter<TabChangeEventDetail>;
   /**
-   * Fires when a specific tab is activated (`event.details`)
+   * Fires when a `calcite-tab` is selected (`event.details`).
    *
    * @see [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)
    * @internal
@@ -85,7 +90,11 @@ export declare class TabTitle implements InteractiveComponent {
    */
   calciteInternalTabTitleRegister: EventEmitter<TabID>;
   /**
-   * Return the index of this title within the nav
+   * @internal
+   */
+  calciteInternalTabIconChanged: EventEmitter<void>;
+  /**
+   * Returns the index of the title within the `calcite-tab-nav`.
    */
   getTabIndex(): Promise<number>;
   /**
@@ -105,6 +114,8 @@ export declare class TabTitle implements InteractiveComponent {
   hasText: boolean;
   parentTabNavEl: HTMLCalciteTabNavElement;
   parentTabsEl: HTMLCalciteTabsElement;
+  containerEl: HTMLDivElement;
+  resizeObserver: ResizeObserver;
   updateHasText(): void;
   setupTextContentObserver(): void;
   emitActiveTab(userTriggered?: boolean): void;

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

@@ -3,25 +3,25 @@ import { TabLayout, TabPosition } from "./interfaces";
 import { Scale } from "../interfaces";
 /**
  * @slot - A slot for adding `calcite-tab`s.
- * @slot tab-nav - A slot for adding a tab navigation component.
+ * @slot tab-nav - A slot for adding a `calcite-tab-nav`.
  */
 export declare class Tabs {
   el: HTMLCalciteTabsElement;
   /**
-   * Align tab titles to the edge or fully justify them across the tab nav ("center")
+   * Specifies the layout of the `calcite-tab-nav`, justifying the `calcite-tab-title`s to the start ("inline"), or across and centered ("center").
    */
   layout: TabLayout;
   /**
-   * Display the tabs top (default) or bottom of the tab content. above and below are deprecated.
+   * Specifies the position of the component in relation to the `calcite-tab`s. The "above" and "below" values are deprecated.
    *
    */
   position: TabPosition;
   /**
-   * Specify the scale of the tabs component, defaults to m
+   * Specifies the size of the component.
    */
   scale: Scale;
   /**
-   * Optionally enable tabs to appear like a folder-style menu when its layout is "inline"
+   * When true and layout is set to "inline", the component will display with a folder style menu.
    */
   bordered: boolean;
   connectedCallback(): void;

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

@@ -2,34 +2,42 @@ import { VNode } from "../../stencil-public-runtime";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { InteractiveComponent } from "../../utils/interactive";
 /**
- * @slot content-start - A slot for adding non-actionable elements before the tile content.
- * @slot content-end - A slot for adding non-actionable elements after the tile content.
+ * @slot content-start - A slot for adding non-actionable elements before the component's content.
+ * @slot content-end - A slot for adding non-actionable elements after the component's content.
  */
 export declare class Tile implements ConditionalSlotComponent, InteractiveComponent {
   el: HTMLCalciteTileElement;
-  /** The active state of the tile. */
+  /**
+   * When true, the component is active.
+   */
   active: boolean;
-  /** The description text that appears beneath the heading of the tile. */
+  /**
+   * A description for the component, which displays below the heading.
+   */
   description?: string;
   /**
-   * When true, prevents interaction.
+   * When true, interaction is prevented and the component is displayed with lower opacity.
    */
   disabled: boolean;
-  /** The embed mode of the tile.  When true, renders without a border and padding for use by other components. */
+  /**
+   * The component's embed mode.
+   *
+   * When true, renders without a border and padding for use by other components.
+   */
   embed: boolean;
   /**
-   * The focused state of the tile.
+   * The focused state of the component.
    *
    * @internal
    */
   focused: boolean;
-  /** The heading text that appears between the icon and description of the tile. */
+  /** The component header text, which displays between the icon and description. */
   heading?: string;
-  /** The hidden state of the tile. */
+  /** When true, the component is not displayed and is not focusable.  */
   hidden: boolean;
-  /** The (optional) url for the tile. (Only applies when embed is set to false) */
+  /** When embed is "false", the url for the component. */
   href?: string;
-  /** The icon that appears at the top of the tile. */
+  /** Specifies an icon to display. */
   icon?: string;
   connectedCallback(): void;
   disconnectedCallback(): void;

package/dist/types/components/tile-select/tile-select.d.ts

@@ -7,38 +7,46 @@ import { InteractiveComponent } from "../../utils/interactive";
  */
 export declare class TileSelect implements InteractiveComponent {
   el: HTMLCalciteTileSelectElement;
-  /** The checked state of the tile select. */
+  /** When true, the component is checked. */
   checked: boolean;
   checkedChanged(newChecked: boolean): void;
-  /** The description text that appears beneath the heading of the tile. */
+  /** A description for the component, which displays below the heading. */
   description?: string;
-  /** The disabled state of the tile select. */
+  /** When true, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
-  /** The heading text that appears between the icon and description of the tile. */
+  /** The component header text, which displays between the icon and description. */
   heading?: string;
-  /** The hidden state of the tile select. */
+  /** When true, the component is not displayed and is not focusable or checkable. */
   hidden: boolean;
-  /** The icon that appears at the top of the tile. */
+  /** Specifies an icon to display. */
   icon?: string;
-  /** The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property. */
+  /** Specifies the name of the component on form submission. */
   name: any;
   nameChanged(newName: string): void;
-  /** Display an interactive radio or checkbox. */
+  /** When true, displays an interactive input based on the "type" property. */
   inputEnabled: boolean;
-  /** The side of the tile that the radio or checkbox appears on when inputEnabled is true. */
+  /** When inputEnabled is true, the placement of the interactive input on the component. */
   inputAlignment: Extract<"end" | "start", Alignment>;
-  /** The selection mode of the tile select: radio (single) or checkbox (multiple). */
+  /**
+   * The selection mode of the component.
+   *
+   * Use radio for single selection, and checkbox for multiple selections.
+   */
   type: TileSelectType;
-  /** The value of the tile select.  This value will appear in form submissions when this tile select is checked. */
+  /** The component's value. */
   value?: any;
-  /** specify the width of the tile, defaults to auto */
+  /** Specifies the width of the component. */
   width: Extract<"auto" | "full", Width>;
   private input;
   guid: string;
   /** The focused state of the tile-select. */
   focused: boolean;
   /**
-   * Emits a custom change event.  For checkboxes, it emits when the checkbox is checked or unchecked.  For radios it only emits when it is checked.
+   * Emits a custom change event.
+   *
+   * For checkboxes it emits when checked or unchecked.
+   *
+   * For radios it only emits when checked.
    */
   calciteTileSelectChange: EventEmitter<void>;
   /** Sets focus on the component. */

package/dist/types/components/tile-select-group/tile-select-group.d.ts

@@ -6,9 +6,13 @@ import { InteractiveComponent } from "../../utils/interactive";
  */
 export declare class TileSelectGroup implements InteractiveComponent {
   el: HTMLCalciteTileSelectGroupElement;
-  /** The disabled state of the tile select. */
+  /** When true, interaction is prevented and the component is displayed with lower opacity. */
   disabled: boolean;
-  /** Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts */
+  /**
+   * Defines the layout of the component.
+   *
+   * Use "horizontal" for rows, and "vertical" for a single column.
+   */
   layout?: TileSelectGroupLayout;
   componentDidRender(): void;
   render(): VNode;

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

@@ -4,89 +4,89 @@ import { TimePart, HourCycle, Meridiem } from "../../utils/time";
 export declare class TimePicker {
   el: HTMLCalciteTimePickerElement;
   /**
-   * aria-label for the hour input
+   * Accessible name for the component's hour input.
    *
    * @default "Hour"
    */
   intlHour: string;
   /**
-   * aria-label for the hour down button
+   * Accessible name for the component's hour down button.
    *
    * @default "Decrease hour"
    */
   intlHourDown: string;
   /**
-   * aria-label for the hour up button
+   * Accessible name for the component's hour up button.
    *
    * @default "Increase hour"
    */
   intlHourUp: string;
   /**
-   * aria-label for the meridiem (am/pm) input
+   * Accessible name for the component's meridiem (AM/PM) input.
    *
    * @default "AM/PM"
    */
   intlMeridiem: string;
   /**
-   * aria-label for the meridiem (am/pm) down button
+   * Accessible name for the component's meridiem (AM/PM) down button.
    *
    * @default "Decrease AM/PM"
    */
   intlMeridiemDown: string;
   /**
-   * aria-label for the meridiem (am/pm) up button
+   * Accessible name for the component's meridiem (AM/PM) up button.
    *
    * @default "Increase AM/PM"
    */
   intlMeridiemUp: string;
   /**
-   * aria-label for the minute input
+   * Accessible name for the component's minute input.
    *
    * @default "Minute"
    */
   intlMinute: string;
   /**
-   * aria-label for the minute down button
+   * Accessible name for the component's minute down button.
    *
    * @default "Decrease minute"
    */
   intlMinuteDown: string;
   /**
-   * aria-label for the minute up button
+   * Accessible name for the component's minute up button.
    *
    * @default "Increase minute"
    */
   intlMinuteUp: string;
   /**
-   * aria-label for the second input
+   * Accessible name for the component's second input.
    *
    * @default "Second"
    */
   intlSecond: string;
   /**
-   * aria-label for the second down button
+   * Accessible name for the component's second down button.
    *
    * @default "Decrease second"
    */
   intlSecondDown: string;
   /**
-   * aria-label for the second up button
+   * Accessible name for the component's second up button.
    *
    * @default "Increase second"
    */
   intlSecondUp: string;
   /**
-   * BCP 47 language tag for desired language and country format
+   * BCP 47 language tag for desired language and country format.
    *
    * @internal
    */
   locale: string;
   localeWatcher(newLocale: string): void;
-  /** The scale (size) of the time picker */
+  /** Specifies the size of the component. */
   scale: Scale;
-  /** number (seconds) that specifies the granularity that the value must adhere to */
+  /** Specifies the granularity the "value" must adhere to (in seconds). */
   step: number;
-  /** The selected time in UTC (always 24-hour format) */
+  /** The component's value in UTC (always 24-hour format). */
   value: string;
   valueWatcher(newValue: string): void;
   private activeEl;

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

@@ -3,38 +3,40 @@ import { HeadingLevel } from "../functional/Heading";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding text and a hyperlink.
- * @slot thumbnail - A slot for adding an HTML image element to the tip.
+ * @slot thumbnail - A slot for adding an HTML image element.
  */
 export declare class Tip implements ConditionalSlotComponent {
   /**
-   * No longer displays the tip.
+   * When true, the component does not display.
    */
   dismissed: boolean;
   /**
-   * Indicates whether the tip can be dismissed.
+   * When true, the close button is not present on the component.
    */
   nonDismissible: boolean;
   /**
-   * The heading of the tip.
+   * 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;
   /**
-   * The selected state of the tip if it is being used inside a `calcite-tip-manager`.
+   * When true and if it has a parent `calcite-tip-manager`, the component is selected.
+   *
+   * Only one tip can be selected within the `calcite-tip-manager` parent.
    */
   selected: boolean;
   /**
-   * Alternate text for closing the tip.
+   * Accessible name for the component's close button.
    */
   intlClose?: string;
   el: HTMLCalciteTipElement;
   connectedCallback(): void;
   disconnectedCallback(): void;
   /**
-   * Emitted when the component has been dismissed.
+   * Emits when the component has been dismissed.
    */
   calciteTipDismiss: EventEmitter<void>;
   hideTip: () => void;

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

@@ -4,7 +4,7 @@ import { VNode } from "../../stencil-public-runtime";
  */
 export declare class TipGroup {
   /**
-   * The title used for all nested tips.
+   * The component header text for all nested `calcite-tip`s.
    *
    */
   groupTitle?: string;

package/dist/types/components/tip-manager/tip-manager.d.ts

@@ -5,32 +5,32 @@ import { HeadingLevel } from "../functional/Heading";
  */
 export declare class TipManager {
   /**
-   * Closed state of the `calcite-tip-manager`.
+   * When true, does not display or position the component.
    */
   closed: boolean;
   closedChangeHandler(): void;
   /**
-   * Number at which section headings should start for this component.
+   * Specifies the number at which section headings should start.
    */
   headingLevel: HeadingLevel;
   /**
-   * Alternate text for closing the tip.
+   * Accessible name for the component's close button.
    */
   intlClose?: string;
   /**
-   * The default group title for the `calcite-tip-manager`.
+   * Accessible name for the `calcite-tip-group` title.
    */
   intlDefaultTitle?: string;
   /**
-   * Alternate text for navigating to the next tip.
+   * Accessible name for navigating to the next tip.
    */
   intlNext?: string;
   /**
-   * Label that appears on hover of pagination icon.
+   * Text that accompanies the component's pagination.
    */
   intlPaginationLabel?: string;
   /**
-   * Alternate text for navigating to the previous tip.
+   * Accessible name for navigating to the previous tip.
    */
   intlPrevious?: string;
   el: HTMLCalciteTipManagerElement;
@@ -44,18 +44,18 @@ export declare class TipManager {
   container: HTMLDivElement;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  /** Selects the next tip to display */
+  /** Selects the next `calcite-tip` to display. */
   nextTip(): Promise<void>;
-  /** Selects the previous tip to display */
+  /** Selects the previous `calcite-tip` to display. */
   previousTip(): Promise<void>;
   /**
-   * Emitted when the `calcite-tip-manager` has been toggled open or closed.
+   * Emits when the component has been open or closed.
    *
-   * @deprecated use calciteTipManagerClose instead.
+   * @deprecated use "calciteTipManagerClose" instead.
    */
   calciteTipManagerToggle: EventEmitter<void>;
   /**
-   * Emitted when the `calcite-tip-manager` has been closed.
+   * Emits when the component has been closed.
    */
   calciteTipManagerClose: EventEmitter<void>;
   setUpTips(): void;

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

@@ -1,3 +1,4 @@
+/// <reference types="lodash" />
 import { VNode } from "../../stencil-public-runtime";
 import { OverlayPositioning, FloatingUIComponent, LogicalPlacement, ReferenceElement } from "../../utils/floating-ui";
 /**
@@ -49,13 +50,14 @@ export declare class Tooltip implements FloatingUIComponent {
   effectiveReferenceElement: ReferenceElement;
   arrowEl: HTMLDivElement;
   guid: string;
+  hasLoaded: boolean;
   connectedCallback(): void;
-  componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   /** Updates the position of the component. */
   reposition(): Promise<void>;
-  setUpReferenceElement: () => void;
+  debouncedReposition: import("lodash").DebouncedFunc<() => Promise<void>>;
+  setUpReferenceElement: (warn?: boolean) => void;
   getId: () => string;
   addReferences: () => void;
   removeReferences: () => void;