@esri/calcite-components 1.0.0-next.282 → 1.0.0-next.283

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

@@ -1,6 +1,9 @@
 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.
+ */
 export declare class CalciteAccordion {
   el: HTMLCalciteAccordionElement;
   /** specify the appearance - default (containing border), or minimal (no containing border), defaults to default */

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

@@ -1,6 +1,10 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
+/**
+ * @slot - A slot for adding custom content.
+ */
 export declare class CalciteAccordionItem {
   el: HTMLCalciteAccordionItemElement;
+  /** Indicates whether the item is active. */
   active: boolean;
   /** pass a title for the accordion item */
   itemTitle?: string;

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

@@ -11,7 +11,7 @@ export declare class CalciteAction {
    */
   active: boolean;
   /**
-   * Indicates the alignment when text-enabled is false.
+   * Optionally specify the horizontal alignment of button elements with text content.
    */
   alignment?: Alignment;
   /**
@@ -61,9 +61,10 @@ export declare class CalciteAction {
   calciteActionClick: EventEmitter;
   el: HTMLCalciteActionElement;
   buttonEl: HTMLButtonElement;
-  observer: MutationObserver;
+  mutationObserver: MutationObserver;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  /** Sets focus on the component. */
   setFocus(): Promise<void>;
   renderTextContainer(): VNode;
   renderIconContainer(): VNode;

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

@@ -1,3 +1,4 @@
+/// <reference types="lodash" />
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Position, Scale } from "../interfaces";
 /**
@@ -27,7 +28,7 @@ export declare class CalciteActionBar {
   /**
    * Disables automatically overflowing actions that won't fit into menus.
    */
-  overflowActionsDisabled?: boolean;
+  overflowActionsDisabled: boolean;
   overflowDisabledHandler(overflowActionsDisabled: boolean): void;
   /**
    * Arranges the component depending on the elements 'dir' property.
@@ -45,17 +46,21 @@ export declare class CalciteActionBar {
   mutationObserver: MutationObserver;
   resizeObserver: ResizeObserver;
   expandToggleEl: HTMLCalciteActionElement;
-  lastActionCount: number;
-  lastGroupCount: number;
-  lastResizeHeight: number;
-  componentWillLoad(): void;
   componentDidLoad(): void;
+  connectedCallback(): void;
   disconnectedCallback(): void;
+  /**
+   * Overflows actions that won't fit into menus.
+   * @internal
+   */
+  overflowActions(): Promise<void>;
+  /** Sets focus on the component. */
   setFocus(focusId?: "expand-toggle"): Promise<void>;
   actionMenuOpenChangeHandler: (event: CustomEvent<boolean>) => void;
   resizeHandlerEntries: (entries: ResizeObserverEntry[]) => void;
   resizeHandler: (entry: ResizeObserverEntry) => void;
-  resize: (height: number) => void;
+  resize: import("lodash").DebouncedFunc<(height: number) => void>;
+  conditionallyOverflowActions: () => void;
   toggleExpand: () => void;
   setExpandToggleRef: (el: HTMLCalciteActionElement) => void;
   renderBottomActionGroup(): VNode;

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

@@ -1,3 +1,4 @@
+export declare const overflowActionsDebounceInMs = 150;
 export declare const getOverflowCount: ({ actionCount, actionHeight, height, groupCount }: {
   actionCount: number;
   actionHeight: number;

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

@@ -56,6 +56,7 @@ export declare class CalciteActionMenu {
   menuButtonId: string;
   activeMenuItemIndex: number;
   activeMenuItemIndexHandler(): void;
+  /** Sets focus on the component. */
   setFocus(): Promise<void>;
   connectMenuButtonEl: () => void;
   disconnectMenuButtonEl: () => void;

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

@@ -42,6 +42,7 @@ export declare class CalciteActionPad {
   el: HTMLCalciteActionPadElement;
   expandToggleEl: HTMLCalciteActionElement;
   componentWillLoad(): void;
+  /** Sets focus on the component. */
   setFocus(focusId?: "expand-toggle"): Promise<void>;
   actionMenuOpenChangeHandler: (event: CustomEvent<boolean>) => void;
   toggleExpand: () => void;

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

@@ -54,7 +54,7 @@ export declare class CalciteAlert {
   calciteAlertRegister: EventEmitter;
   alertSync(event: CustomEvent): void;
   alertRegister(): void;
-  /** focus either the slotted link or the close button */
+  /** Sets focus on the component. */
   setFocus(): Promise<void>;
   /** the list of queued alerts */
   queue: HTMLCalciteAlertElement[];

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

@@ -2,10 +2,10 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { HeadingLevel } from "../functional/CalciteHeading";
 import { Status } from "../interfaces";
 /**
+ * @slot - A slot for adding content to the block.
  * @slot icon - A slot for adding a leading header icon.
  * @slot control - A slot for adding a single HTML input element in a header.
  * @slot header-menu-actions - a slot for adding an overflow menu with actions inside a dropdown.
- * @slot - A slot for adding content to the block.
  */
 export declare class CalciteBlock {
   /**

package/dist/types/components/calcite-block-section/calcite-block-section.d.ts

@@ -29,8 +29,6 @@ export declare class CalciteBlockSection {
    * This property determines the look of the section toggle.
    * If the value is "switch", a toggle-switch will be displayed.
    * If the value is "button", a clickable header is displayed.
-   *
-   * @todo revisit doc
    */
   toggleDisplay: BlockSectionToggleDisplay;
   el: HTMLCalciteBlockSectionElement;
@@ -38,7 +36,7 @@ export declare class CalciteBlockSection {
    * Emitted when the header has been clicked.
    */
   calciteBlockSectionToggle: EventEmitter;
-  handleHeaderLabelKeyDown(this: HTMLLabelElement, event: KeyboardEvent): void;
+  handleHeaderKeyDown: (event: KeyboardEvent) => void;
   toggleSection: () => void;
   renderStatusIcon(): VNode[];
   render(): VNode;

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

@@ -1,7 +1,8 @@
 import { VNode } from "../../stencil-public-runtime";
 import { ButtonAlignment, ButtonAppearance, ButtonColor } from "./interfaces";
 import { FlipContext, Scale, Width } from "../interfaces";
-export declare class CalciteButton {
+import { LabelableComponent } from "../../utils/label";
+export declare class CalciteButton implements LabelableComponent {
   el: HTMLCalciteButtonElement;
   /** optionally specify alignment of button elements. */
   alignment?: ButtonAlignment;
@@ -12,7 +13,7 @@ export declare class CalciteButton {
   /** specify the color of the button, defaults to blue */
   color: ButtonColor;
   /** is the button disabled  */
-  disabled?: boolean;
+  disabled: boolean;
   /** optionally pass a href - used to determine if the component should render as a button or an anchor */
   href?: string;
   /** optionally pass an icon to display at the end of a button - accepts calcite ui icon names  */
@@ -26,7 +27,7 @@ export declare class CalciteButton {
    */
   intlLoading?: string;
   /** optionally add a calcite-loader component to the button, disabling interaction.  */
-  loading?: boolean;
+  loading: boolean;
   /** The name attribute to apply to the button */
   name?: string;
   /** The rel attribute to apply to the hyperlink */
@@ -34,7 +35,7 @@ export declare class CalciteButton {
   /** The form ID to associate with the component */
   form?: string;
   /** optionally add a round style to the button  */
-  round?: boolean;
+  round: boolean;
   /** specify the scale of the button, defaults to m */
   scale: Scale;
   /** is the button a child of a calcite-split-button */
@@ -50,18 +51,21 @@ export declare class CalciteButton {
   disconnectedCallback(): void;
   componentWillLoad(): void;
   render(): VNode;
+  /** Sets focus on the component. */
   setFocus(): Promise<void>;
+  labelEl: HTMLCalciteLabelElement;
   /** watches for changing text content **/
-  private observer;
+  private mutationObserver;
   /** the rendered child element */
   private childEl?;
   /** the node type of the rendered child element */
   private childElType?;
   /** determine if there is slotted content for styling purposes */
-  private hasContent?;
+  private hasContent;
   /** determine if loader present for styling purposes */
-  private hasLoader?;
+  private hasLoader;
   private updateHasContent;
   private setupTextContentObserver;
+  onLabelClick: (event: CustomEvent) => void;
   private handleClick;
 }

package/dist/types/components/calcite-card/calcite-card.d.ts

@@ -3,8 +3,8 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
  * - cards will expand to fit the width of their container
  */
 /**
- * @slot thumbnail - A slot for adding a thumbnail to the card.
  * @slot - A slot for adding subheader/description content.
+ * @slot thumbnail - A slot for adding a thumbnail to the card.
  * @slot title - A slot for adding a card title.
  * @slot subtitle - A slot for adding a card subtitle or short summary.
  * @slot footer-leading - A slot for adding a leading footer.

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

@@ -1,18 +1,19 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
-export declare class CalciteCheckbox {
+import { LabelableComponent } from "../../utils/label";
+export declare class CalciteCheckbox implements LabelableComponent {
   el: HTMLCalciteCheckboxElement;
   /** The checked state of the checkbox. */
-  checked?: boolean;
+  checked: boolean;
   checkedWatcher(newChecked: boolean): void;
   /** True if the checkbox is disabled */
-  disabled?: boolean;
+  disabled: boolean;
   disabledChanged(disabled: boolean): void;
   /** The id attribute of the checkbox.  When omitted, a globally unique identifier is used. */
   guid: string;
   /**
    * The hovered state of the checkbox.
-   * @private
+   * @internal
    */
   hovered: boolean;
   /**
@@ -20,7 +21,7 @@ export declare class CalciteCheckbox {
    * which is independent from its checked state
    * https://css-tricks.com/indeterminate-checkboxes/
    * */
-  indeterminate?: boolean;
+  indeterminate: boolean;
   /**
    * The label of the checkbox input
    * @internal
@@ -37,11 +38,14 @@ export declare class CalciteCheckbox {
   private readonly indeterminatePath;
   private initialChecked;
   private input;
+  labelEl: HTMLCalciteLabelElement;
   /** The focused state of the checkbox. */
   focused: boolean;
+  /** Sets focus on the component. */
   setFocus(): Promise<void>;
   private getPath;
   private toggle;
+  private clickHandler;
   /** Emitted when the checkbox checked status changes */
   calciteCheckboxChange: EventEmitter;
   /**
@@ -50,14 +54,14 @@ export declare class CalciteCheckbox {
    * @internal
    */
   calciteCheckboxFocusedChange: EventEmitter;
-  onClick(event: MouseEvent): void;
   mouseenter(): void;
   mouseleave(): void;
   private formResetHandler;
-  private nativeLabelClickHandler;
   private onInputBlur;
   private onInputFocus;
+  onLabelClick: () => void;
   connectedCallback(): void;
+  componentDidLoad(): void;
   disconnectedCallback(): void;
   private renderHiddenCheckboxInput;
   render(): VNode;

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

@@ -2,7 +2,8 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ChipColor } from "./interfaces";
 import { Appearance, Scale } from "../interfaces";
 /**
- * @slot image - a slot for adding an image
+ * @slot - A slot for adding text.
+ * @slot image - A slot for adding an image.
  */
 export declare class CalciteChip {
   /** specify the appearance style of the button, defaults to solid. */
@@ -10,7 +11,7 @@ export declare class CalciteChip {
   /** specify the color of the button, defaults to blue */
   color: ChipColor;
   /** Optionally show a button the user can click to dismiss the chip */
-  dismissible?: boolean;
+  dismissible: boolean;
   /** Aria label for the "x" button
    * @default "Close"
    */
@@ -18,11 +19,13 @@ export declare class CalciteChip {
   /** optionally pass an icon to display - accepts Calcite UI icon names  */
   icon?: string;
   /** flip the icon in rtl */
-  iconFlipRtl?: boolean;
+  iconFlipRtl: boolean;
   /** specify the scale of the chip, defaults to m */
   scale: Scale;
+  /** The assigned value for the chip */
   value: any;
   el: HTMLCalciteChipElement;
+  /** Sets focus on the component. */
   setFocus(): Promise<void>;
   /** Emitted when the dismiss button is clicked */
   calciteChipDismiss: EventEmitter;

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

@@ -199,6 +199,7 @@ export declare class CalciteColorPicker {
   private renderChannelsTabTitle;
   private renderChannelsTab;
   private renderChannel;
+  private showIncompatibleColorWarning;
   private setMode;
   private captureHueSliderColor;
   private getCanvasRegion;

package/dist/types/components/calcite-combobox/calcite-combobox.d.ts

@@ -4,13 +4,17 @@ import { OverlayPositioning } from "../../utils/popper";
 import { StrictModifiers } from "@popperjs/core";
 import { Scale } from "../interfaces";
 import { ComboboxSelectionMode, ComboboxChildElement } from "./interfaces";
+import { LabelableComponent } from "../../utils/label";
 interface ItemData {
   label: string;
   value: string;
 }
-export declare class CalciteCombobox {
+/**
+ * @slot - A slot for adding `calcite-combobox-item`s.
+ */
+export declare class CalciteCombobox implements LabelableComponent {
   el: HTMLCalciteComboboxElement;
-  /** Open and close combobox */
+  /** Opens or closes the combobox */
   active: boolean;
   activeHandler(newValue: boolean, oldValue: boolean): void;
   /** Disable combobox input */
@@ -36,7 +40,9 @@ export declare class CalciteCombobox {
   scale: Scale;
   documentClickHandler(event: Event): void;
   calciteComboboxItemChangeHandler(event: CustomEvent<HTMLCalciteComboboxItemElement>): void;
+  /** Updates the position of the component. */
   reposition(): Promise<void>;
+  /** Sets focus on the component. */
   setFocus(): Promise<void>;
   /**
    * Called when the selected items set changes
@@ -68,9 +74,9 @@ export declare class CalciteCombobox {
   calciteComboboxClose: EventEmitter;
   connectedCallback(): void;
   componentWillLoad(): void;
-  componentDidLoad(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;
+  labelEl: HTMLCalciteLabelElement;
   items: HTMLCalciteComboboxItemElement[];
   groupItems: HTMLCalciteComboboxItemGroupElement[];
   selectedItems: HTMLCalciteComboboxItemElement[];
@@ -88,7 +94,7 @@ export declare class CalciteCombobox {
   textHandler(): void;
   textInput: HTMLInputElement;
   data: ItemData[];
-  observer: MutationObserver;
+  mutationObserver: MutationObserver;
   private guid;
   private inputHeight;
   private popper;
@@ -97,6 +103,7 @@ export declare class CalciteCombobox {
   private listContainerEl;
   private ignoreSelectedEventsFlag;
   private activeTransitionProp;
+  onLabelClick: () => void;
   keydownHandler: (event: KeyboardEvent) => void;
   private toggleCloseEnd;
   private toggleOpenEnd;

package/dist/types/components/calcite-combobox-item/calcite-combobox-item.d.ts

@@ -1,6 +1,9 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ComboboxChildElement } from "../calcite-combobox/interfaces";
 import { Scale } from "../interfaces";
+/**
+ * @slot - A slot for adding nested `calcite-combobox-item`s.
+ */
 export declare class CalciteComboboxItem {
   /** When true, the item cannot be clicked and is visually muted. */
   disabled: boolean;

package/dist/types/components/calcite-combobox-item-group/calcite-combobox-item-group.d.ts

@@ -1,6 +1,9 @@
 import { VNode } from "../../stencil-public-runtime";
 import { ComboboxChildElement } from "../calcite-combobox/interfaces";
 import { Scale } from "../interfaces";
+/**
+ * @slot - A slot for adding `calcite-combobox-item`s.
+ */
 export declare class CalciteComboboxItemGroup {
   /** Parent and grandparent combobox items, this is set internally for use from combobox */
   ancestors: ComboboxChildElement[];

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

@@ -40,13 +40,13 @@ export declare class CalciteDatePicker {
   /** specify the scale of the date picker */
   scale: "s" | "m" | "l";
   /** Range mode activation */
-  range?: boolean;
+  range: boolean;
   /** Selected start date */
   start?: string;
   /** Selected end date */
   end?: string;
   /** Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */
-  proximitySelectionDisabled?: boolean;
+  proximitySelectionDisabled: boolean;
   /**
    * Trigger calcite date change when a user changes the date.
    */

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

@@ -19,6 +19,7 @@ export declare class CalciteDatePickerDay {
   startOfRange: boolean;
   /** Date is the end of date range */
   endOfRange: boolean;
+  /** Date is being hovered and within the set range */
   rangeHover: boolean;
   /** Date is actively in focus for keyboard navigation */
   active: boolean;

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

@@ -1,4 +1,5 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { HoverRange } from "../../utils/date";
 import { DateLocaleData } from "../calcite-date-picker/utils";
 import { Scale } from "../interfaces";
 export declare class CalciteDatePickerMonth {
@@ -23,7 +24,8 @@ export declare class CalciteDatePickerMonth {
    * @internal
    */
   localeData: DateLocaleData;
-  hoverRange: any;
+  /** The range of dates currently being hovered */
+  hoverRange: HoverRange;
   /**
    * Event emitted when user selects the date.
    */

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

@@ -4,10 +4,12 @@ import { OverlayPositioning } from "../../utils/popper";
 import { StrictModifiers } from "@popperjs/core";
 import { Scale } from "../interfaces";
 /**
- * @slot dropdown-trigger - A slot for the element that triggers the dropdown
+ * @slot - A slot for adding `calcite-dropdown-group`s or `calcite-dropdown-item`s.
+ * @slot dropdown-trigger - A slot for the element that triggers the dropdown.
  */
 export declare class CalciteDropdown {
   el: HTMLCalciteDropdownElement;
+  /** Opens or closes the dropdown */
   active: boolean;
   activeHandler(): void;
   /**
@@ -16,7 +18,7 @@ export declare class CalciteDropdown {
    */
   disableCloseOnSelect: boolean;
   /** is the dropdown disabled  */
-  disabled?: boolean;
+  disabled: boolean;
   /**
    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
@@ -47,6 +49,7 @@ export declare class CalciteDropdown {
   componentDidLoad(): void;
   disconnectedCallback(): void;
   render(): VNode;
+  /** Updates the position of the component. */
   reposition(): Promise<void>;
   /** fires when a dropdown item has been selected or deselected **/
   calciteDropdownSelect: EventEmitter<void>;

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

@@ -1,6 +1,9 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { SelectionMode } from "./interfaces";
 import { Scale } from "../interfaces";
+/**
+ * @slot - A slot for adding `calcite-dropdown-item`s.
+ */
 export declare class CalciteDropdownGroup {
   el: HTMLCalciteDropdownGroupElement;
   /** optionally set a group title for display */

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

@@ -1,8 +1,12 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ItemKeyboardEvent } from "../calcite-dropdown/interfaces";
 import { FlipContext } from "../interfaces";
+/**
+ * @slot - A slot for adding text.
+ */
 export declare class CalciteDropdownItem {
   el: HTMLCalciteDropdownItemElement;
+  /** Indicates whether the item is active. */
   active: boolean;
   /** flip the icon(s) in rtl */
   iconFlipRtl?: FlipContext;
@@ -26,7 +30,7 @@ export declare class CalciteDropdownItem {
   calciteDropdownItemKeyEvent: EventEmitter<ItemKeyboardEvent>;
   /** @internal */
   calciteDropdownCloseRequest: EventEmitter;
-  /** Focuses the selected item. */
+  /** Sets focus on the component. */
   setFocus(): Promise<void>;
   connectedCallback(): void;
   render(): VNode;

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

@@ -41,6 +41,7 @@ export declare class CalciteFab {
   textEnabled: boolean;
   el: HTMLCalciteFabElement;
   private buttonEl;
+  /** Sets focus on the component. */
   setFocus(): Promise<void>;
   render(): VNode;
 }

package/dist/types/components/calcite-filter/calcite-filter.d.ts

@@ -24,17 +24,15 @@ export declare class CalciteFilter {
   placeholder?: string;
   el: HTMLCalciteFilterElement;
   empty: boolean;
-  textInput: HTMLInputElement;
+  textInput: HTMLCalciteInputElement;
   /**
    * This event fires when the filter text changes.
    */
   calciteFilterChange: EventEmitter;
-  /**
-   * Focuses the filter input.
-   */
+  /** Sets focus on the component. */
   setFocus(): Promise<void>;
   filter: import("lodash").DebouncedFunc<(value: string) => void>;
-  inputHandler: (event: InputEvent) => void;
+  inputHandler: (event: CustomEvent) => void;
   keyDownHandler: ({ key }: KeyboardEvent) => void;
   clear: () => void;
   render(): VNode;

package/dist/types/components/calcite-flow/calcite-flow.d.ts

@@ -17,6 +17,6 @@ export declare class CalciteFlow {
   handleCalcitePanelBackClick(): void;
   getFlowDirection: (oldPanelCount: number, newPanelCount: number) => FlowDirection | null;
   updateFlowProps: () => void;
-  panelItemObserver: MutationObserver;
+  panelItemMutationObserver: MutationObserver;
   render(): VNode;
 }

package/dist/types/components/calcite-handle/calcite-handle.d.ts

@@ -14,6 +14,7 @@ export declare class CalciteHandle {
    * Emitted when the the handle is activated and the up or down arrow key is pressed.
    */
   calciteHandleNudge: EventEmitter;
+  /** Sets focus on the component. */
   setFocus(): Promise<void>;
   handleKeyDown: (event: KeyboardEvent) => void;
   handleBlur: () => void;

package/dist/types/components/calcite-inline-editable/calcite-inline-editable.d.ts

@@ -1,9 +1,10 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
 /**
- * @slot - slot for rendering a `<calcite-input>`
+ * @slot - A slot for adding a `calcite-input`.
  */
-export declare class CalciteInlineEditable {
+export declare class CalciteInlineEditable implements LabelableComponent {
   el: HTMLCalciteInlineEditableElement;
   /** specify whether editing can be enabled */
   disabled: boolean;
@@ -32,6 +33,8 @@ export declare class CalciteInlineEditable {
   afterConfirm?: () => Promise<void>;
   componentWillLoad(): void;
   componentDidLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   render(): VNode;
   /**
    * @internal
@@ -46,12 +49,14 @@ export declare class CalciteInlineEditable {
    */
   calciteInlineEditableEnableEditingChange: EventEmitter;
   blurHandler(): void;
-  handleLabelFocus(e: CustomEvent): void;
+  onLabelClick: () => void;
   private inputElement;
   private htmlInput;
   private valuePriorToEditing;
   private enableEditingButton;
   private editingCancelTransitionProp;
+  labelEl: HTMLCalciteLabelElement;
+  setFocus(): Promise<void>;
   transitionEnd: (event: TransitionEvent) => void;
   private get shouldShowControls();
   private enableEditing;

package/dist/types/components/calcite-input/calcite-input.d.ts

@@ -2,10 +2,11 @@ import { Scale, Status } from "../interfaces";
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { InputPlacement } from "./interfaces";
 import { Position } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
 /**
  * @slot action - A slot for positioning a button next to an input
  */
-export declare class CalciteInput {
+export declare class CalciteInput implements LabelableComponent {
   el: HTMLCalciteInputElement;
   /** specify the alignment of the value of the input */
   alignment: Position;
@@ -14,9 +15,9 @@ export declare class CalciteInput {
   /** optionally display a clear button that displays when field has a value
    * shows by default for search, time, date
    * will not display for type="textarea" */
-  clearable?: boolean;
+  clearable: boolean;
   /** is the input disabled  */
-  disabled?: boolean;
+  disabled: boolean;
   disabledWatcher(): void;
   /** for number values, displays the locale's group separator */
   groupSeparator: boolean;
@@ -30,7 +31,7 @@ export declare class CalciteInput {
    */
   intlLoading?: string;
   /** flip the icon in rtl */
-  iconFlipRtl?: boolean;
+  iconFlipRtl: boolean;
   /** Applies to the aria-label attribute on the button or hyperlink */
   label?: string;
   /** specify if the input is in loading state */
@@ -89,6 +90,7 @@ export declare class CalciteInput {
   value?: string;
   valueWatcher(newValue: string): void;
   updateRequestedIcon(): void;
+  labelEl: HTMLCalciteLabelElement;
   /** keep track of the rendered child type */
   private childEl?;
   /** keep track of the rendered child type */
@@ -131,8 +133,9 @@ export declare class CalciteInput {
    */
   calciteInputChange: EventEmitter;
   keyDownHandler(event: KeyboardEvent): void;
-  /** focus the rendered child element */
+  /** Sets focus on the component. */
   setFocus(): Promise<void>;
+  onLabelClick: () => void;
   private clearInputValue;
   private inputBlurHandler;
   private inputFocusHandler;