@esri/calcite-components 1.0.0-beta.78 → 1.0.0-beta.81

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

@@ -3,10 +3,11 @@ import { VNode } from "../../stencil-public-runtime";
 import { ButtonAlignment, ButtonAppearance, ButtonColor } from "./interfaces";
 import { FlipContext, Scale, Width } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
+import { InteractiveComponent } from "../../utils/interactive";
 /** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
 /** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
 /** @slot - A slot for adding text. */
-export declare class Button implements LabelableComponent {
+export declare class Button implements LabelableComponent, InteractiveComponent {
   el: HTMLCalciteButtonElement;
   /** optionally specify alignment of button elements. */
   alignment?: ButtonAlignment;
@@ -51,13 +52,14 @@ export declare class Button implements LabelableComponent {
   /** The target attribute to apply to the hyperlink */
   target?: string;
   /** The type attribute to apply to the button */
-  type?: string;
+  type: string;
   /** specify the width of the button, defaults to auto */
   width: Width;
   loadingChanged(newValue: boolean, oldValue: boolean): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentWillLoad(): void;
+  componentDidRender(): void;
   render(): VNode;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;

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

@@ -2,7 +2,8 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { CheckableFormCompoment } from "../../utils/form";
 import { LabelableComponent } from "../../utils/label";
-export declare class Checkbox implements LabelableComponent, CheckableFormCompoment {
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class Checkbox implements LabelableComponent, CheckableFormCompoment, InteractiveComponent {
   el: HTMLCalciteCheckboxElement;
   /** The checked state of the checkbox. */
   checked: boolean;
@@ -69,5 +70,6 @@ export declare class Checkbox implements LabelableComponent, CheckableFormCompom
   onLabelClick: () => void;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   render(): VNode;
 }

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

@@ -3,7 +3,8 @@ import Color from "color";
 import { ColorAppearance, ColorMode, ColorValue, InternalColor } from "./interfaces";
 import { Scale } from "../interfaces";
 import { Format } from "./utils";
-export declare class ColorPicker {
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class ColorPicker implements InteractiveComponent {
   el: HTMLCalciteColorPickerElement;
   /**
    * When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component.
@@ -20,6 +21,10 @@ export declare class ColorPicker {
    */
   color: InternalColor | null;
   handleColorChange(color: Color | null, oldColor: Color | null): void;
+  /**
+   * When true, disabled prevents user interaction.
+   */
+  disabled: boolean;
   /**
    * The format of the value property.
    *
@@ -138,6 +143,7 @@ export declare class ColorPicker {
   private fieldAndSliderRenderingContext;
   private colorFieldScopeNode;
   private hueThumbState;
+  private hueScopeNode;
   private internalColorUpdateContext;
   private previousColor;
   private mode;
@@ -193,8 +199,10 @@ export declare class ColorPicker {
   setFocus(): Promise<void>;
   componentWillLoad(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   render(): VNode;
   private storeColorFieldScope;
+  private storeHueScope;
   private renderChannelsTabTitle;
   private renderChannelsTab;
   private renderChannel;

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

@@ -45,6 +45,7 @@ export declare class ColorPickerHexInput {
   render(): VNode;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
+  private internalSetValue;
   private storeInputRef;
   private formatForInternalInput;
   private nudgeRGBChannels;

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

@@ -1,11 +1,12 @@
 /// <reference types="lodash" />
 import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
-import { OverlayPositioning } from "../../utils/popper";
+import { OverlayPositioning, ComputedPlacement } from "../../utils/popper";
 import { StrictModifiers } from "@popperjs/core";
 import { Scale } from "../interfaces";
 import { ComboboxSelectionMode, ComboboxChildElement } from "./interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
+import { InteractiveComponent } from "../../utils/interactive";
 interface ItemData {
   label: string;
   value: string;
@@ -13,13 +14,14 @@ interface ItemData {
 /**
  * @slot - A slot for adding `calcite-combobox-item`s.
  */
-export declare class Combobox implements LabelableComponent, FormComponent {
+export declare class Combobox implements LabelableComponent, FormComponent, InteractiveComponent {
   el: HTMLCalciteComboboxElement;
   /** Opens or closes the combobox */
   active: boolean;
-  activeHandler(newValue: boolean, oldValue: boolean): void;
+  activeHandler(): void;
   /** Disable combobox input */
   disabled: boolean;
+  handleDisabledChange(value: boolean): void;
   /** Aria label for combobox (required) */
   label: string;
   /** Placeholder text for input */
@@ -54,6 +56,11 @@ export declare class Combobox implements LabelableComponent, FormComponent {
    * @default "Remove tag"
    */
   intlRemoveTag: string;
+  /**
+   * Defines the available placements that can be used when a flip occurs.
+   */
+  flipPlacements?: ComputedPlacement[];
+  flipPlacementsHandler(): void;
   documentClickHandler(event: Event): void;
   calciteComboboxItemChangeHandler(event: CustomEvent<HTMLCalciteComboboxItemElement>): void;
   /** Updates the position of the component. */
@@ -93,6 +100,7 @@ export declare class Combobox implements LabelableComponent, FormComponent {
   componentDidLoad(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;
+  filteredFlipPlacements: ComputedPlacement[];
   internalValueChangeFlag: boolean;
   labelEl: HTMLCalciteLabelElement;
   formEl: HTMLFormElement;
@@ -103,12 +111,10 @@ export declare class Combobox implements LabelableComponent, FormComponent {
   selectedItemsHandler(): void;
   visibleItems: HTMLCalciteComboboxItemElement[];
   needsIcon: boolean;
-  hideList: boolean;
   activeItemIndex: number;
   activeChipIndex: number;
   activeDescendant: string;
   text: string;
-  open: boolean;
   /** when search text is cleared, reset active to  */
   textHandler(): void;
   textInput: HTMLInputElement;
@@ -123,15 +129,17 @@ export declare class Combobox implements LabelableComponent, FormComponent {
   private listContainerEl;
   private ignoreSelectedEventsFlag;
   private activeTransitionProp;
+  setFilteredPlacements: () => void;
   getValue: () => string | string[];
   onLabelClick: () => void;
+  private comboboxInViewport;
   keydownHandler: (event: KeyboardEvent) => void;
   private toggleCloseEnd;
   private toggleOpenEnd;
   transitionEnd: (event: TransitionEvent) => void;
   setMaxScrollerHeight: () => void;
   calciteChipDismissHandler: (event: CustomEvent<HTMLCalciteChipElement>, comboboxItem: HTMLCalciteComboboxItemElement) => void;
-  setFocusClick: (event: MouseEvent) => void;
+  clickHandler: (event: MouseEvent) => void;
   setInactiveIfNotContained: (event: Event) => void;
   setMenuEl: (el: HTMLDivElement) => void;
   setListContainerEl: (el: HTMLDivElement) => void;
@@ -164,6 +172,7 @@ export declare class Combobox implements LabelableComponent, FormComponent {
   previousChip(): void;
   nextChip(): void;
   focusChip(): void;
+  private scrollToActiveItem;
   shiftActiveItemIndex(delta: number): void;
   updateActiveItemIndex(index: number): void;
   isMulti(): boolean;

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

@@ -1,7 +1,6 @@
 export declare const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export declare const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 export declare const ComboboxChildSelector: string;
-export declare const ComboboxDefaultPlacement = "bottom-leading";
 export declare const TEXT: {
   removeTag: string;
 };

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

@@ -2,10 +2,11 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ComboboxChildElement } from "../combobox/interfaces";
 import { Scale } from "../interfaces";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding nested `calcite-combobox-item`s.
  */
-export declare class ComboboxItem implements ConditionalSlotComponent {
+export declare class ComboboxItem implements ConditionalSlotComponent, InteractiveComponent {
   /** When true, the item cannot be clicked and is visually muted. */
   disabled: boolean;
   /** Set this to true to pre-select an item. Toggles when an item is checked/unchecked. */
@@ -30,6 +31,7 @@ export declare class ComboboxItem implements ConditionalSlotComponent {
   scale: Scale;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   /**
    * Emitted whenever the item is selected or unselected.
    */

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

@@ -1,7 +1,8 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { DateLocaleData } from "../date-picker/utils";
 import { Scale } from "../interfaces";
-export declare class DatePickerDay {
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class DatePickerDay implements InteractiveComponent {
   el: HTMLCalciteDatePickerDayElement;
   /** Day of the month to be shown. */
   day: number;
@@ -42,4 +43,6 @@ export declare class DatePickerDay {
    */
   calciteDayHover: EventEmitter;
   render(): VNode;
+  componentDidRender(): void;
+  isTabbable(): boolean;
 }

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

@@ -43,12 +43,14 @@ export declare class DatePickerMonthHeader {
    * Increment year on UP/DOWN keys
    */
   private onYearKey;
-  private yearChanged;
+  private onYearChange;
+  private onYearInput;
   private prevMonthClick;
   private prevMonthKeydown;
   private nextMonthClick;
   private nextMonthKeydown;
   private handleArrowClick;
+  private getInRangeDate;
   /**
    * Parse localized year string from input,
    * set to active if in range

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

@@ -1,13 +1,14 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
-import { DropdownPlacement, ItemKeyboardEvent } from "./interfaces";
-import { OverlayPositioning } from "../../utils/popper";
+import { ItemKeyboardEvent } from "./interfaces";
+import { ComputedPlacement, OverlayPositioning, MenuPlacement } from "../../utils/popper";
 import { StrictModifiers } from "@popperjs/core";
 import { Scale } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @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 Dropdown {
+export declare class Dropdown implements InteractiveComponent {
   el: HTMLCalciteDropdownElement;
   /** Opens or closes the dropdown */
   active: boolean;
@@ -19,6 +20,12 @@ export declare class Dropdown {
   disableCloseOnSelect: boolean;
   /** is the dropdown disabled  */
   disabled: boolean;
+  handleDisabledChange(value: boolean): void;
+  /**
+   * Defines the available placements that can be used when a flip occurs.
+   */
+  flipPlacements?: ComputedPlacement[];
+  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
@@ -31,7 +38,7 @@ export declare class Dropdown {
    * Determines where the dropdown will be positioned relative to the button.
    * @default "bottom-leading"
    */
-  placement: DropdownPlacement;
+  placement: MenuPlacement;
   placementHandler(): void;
   /** specify the scale of dropdown, defaults to m */
   scale: Scale;
@@ -47,6 +54,7 @@ export declare class Dropdown {
   width: Scale;
   connectedCallback(): void;
   componentDidLoad(): void;
+  componentDidRender(): void;
   disconnectedCallback(): void;
   render(): VNode;
   /** Updates the position of the component. */
@@ -64,6 +72,7 @@ export declare class Dropdown {
   mouseLeaveHandler(): void;
   calciteDropdownItemKeyEvent(e: CustomEvent<ItemKeyboardEvent>): void;
   handleItemSelect(event: CustomEvent): void;
+  filteredFlipPlacements: ComputedPlacement[];
   private items;
   /** trigger elements */
   private triggers;
@@ -74,6 +83,7 @@ export declare class Dropdown {
   private scrollerEl;
   mutationObserver: MutationObserver;
   resizeObserver: ResizeObserver;
+  setFilteredPlacements: () => void;
   updateItems: () => void;
   setMaxScrollerHeight: () => void;
   setScrollerEl: (scrollerEl: HTMLDivElement) => void;

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

@@ -1,5 +1,3 @@
-import { PopperPlacement } from "../../utils/popper";
 export interface ItemKeyboardEvent {
   keyboardEvent: KeyboardEvent;
 }
-export declare type DropdownPlacement = Extract<PopperPlacement, "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end" | "top-leading" | "top-trailing" | "bottom-leading" | "bottom-trailing">;

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

@@ -1,4 +1,3 @@
-export declare const DefaultDropdownPlacement = "bottom-leading";
 export declare const SLOTS: {
   dropdownTrigger: string;
 };

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

@@ -32,6 +32,7 @@ export declare class DropdownItem {
   calciteDropdownCloseRequest: EventEmitter;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
+  componentWillLoad(): void;
   connectedCallback(): void;
   render(): VNode;
   onClick(): void;
@@ -47,6 +48,7 @@ export declare class DropdownItem {
   private selectionMode;
   /** if href is requested, track the rendered child link*/
   private childLink;
+  private initialize;
   private determineActiveItem;
   private emitRequestedItem;
 }

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

@@ -1,7 +1,8 @@
 import { VNode } from "../../stencil-public-runtime";
 import { Appearance, Scale } from "../interfaces";
 import { ButtonColor } from "../button/interfaces";
-export declare class Fab {
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class Fab implements InteractiveComponent {
   /**
    * Used to set the button's appearance. Default is outline.
    */
@@ -41,6 +42,7 @@ export declare class Fab {
   textEnabled: boolean;
   el: HTMLCalciteFabElement;
   private buttonEl;
+  componentDidRender(): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   render(): VNode;

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

@@ -1,7 +1,8 @@
 /// <reference types="lodash" />
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
-export declare class Filter {
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class Filter implements InteractiveComponent {
   /**
    * The items to filter through. The filter uses this as the starting point, and returns items
    * that contain the string entered in the input, using a partial match and recursive search.
@@ -37,20 +38,22 @@ export declare class Filter {
   /**
    * Filter value.
    */
-  value?: string;
+  value: string;
   valueHandler(value: string): void;
   el: HTMLCalciteFilterElement;
   textInput: HTMLCalciteInputElement;
+  componentDidRender(): void;
   /**
    * This event fires when the filter text changes.
    */
   calciteFilterChange: EventEmitter<void>;
+  componentWillLoad(): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
-  filter: import("lodash").DebouncedFunc<(value: string) => void>;
+  filter: import("lodash").DebouncedFunc<(value: string, emit?: any) => void>;
   inputHandler: (event: CustomEvent) => void;
   keyDownHandler: ({ key }: KeyboardEvent) => void;
   clear: () => void;
-  updateFiltered(filtered: any[]): void;
+  updateFiltered(filtered: any[], emit?: boolean): void;
   render(): VNode;
 }

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

@@ -11,3 +11,4 @@ export declare const ICONS: {
   search: string;
   close: string;
 };
+export declare const DEBOUNCE_TIMEOUT = 250;

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

@@ -1,10 +1,11 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding a `calcite-input`.
  */
-export declare class InlineEditable implements LabelableComponent {
+export declare class InlineEditable implements InteractiveComponent, LabelableComponent {
   el: HTMLCalciteInlineEditableElement;
   /** specify whether editing can be enabled */
   disabled: boolean;
@@ -34,6 +35,7 @@ export declare class InlineEditable implements LabelableComponent {
   afterConfirm?: () => Promise<void>;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   render(): VNode;
   /**
    * Emitted when the cancel button gets clicked.
@@ -53,6 +55,7 @@ export declare class InlineEditable implements LabelableComponent {
   private shouldEmitCancel;
   private enableEditingButton;
   private cancelEditingButton;
+  private confirmEditingButton;
   labelEl: HTMLCalciteLabelElement;
   mutationObserver: MutationObserver;
   setFocus(): Promise<void>;

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

@@ -4,11 +4,12 @@ import { InputPlacement } from "./interfaces";
 import { Position } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
+import { InteractiveComponent } from "../../utils/interactive";
 declare type NumberNudgeDirection = "up" | "down";
 /**
  * @slot action - A slot for positioning a button next to an input
  */
-export declare class Input implements LabelableComponent, FormComponent {
+export declare class Input implements LabelableComponent, FormComponent, InteractiveComponent {
   el: HTMLCalciteInputElement;
   /** specify the alignment of the value of the input */
   alignment: Position;
@@ -123,6 +124,7 @@ export declare class Input implements LabelableComponent, FormComponent {
   disconnectedCallback(): void;
   componentWillLoad(): void;
   componentShouldUpdate(newValue: string, oldValue: string, property: string): boolean;
+  componentDidRender(): void;
   /**
    * @internal
    */

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

@@ -2,18 +2,25 @@ import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { HeadingLevel } from "../functional/Heading";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
-import { OverlayPositioning } from "../../utils/popper";
+import { OverlayPositioning, ComputedPlacement, MenuPlacement } from "../../utils/popper";
 import { StrictModifiers } from "@popperjs/core";
 import { DateRangeChange } from "../date-picker/interfaces";
-export declare class InputDatePicker implements LabelableComponent, FormComponent {
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class InputDatePicker implements LabelableComponent, FormComponent, InteractiveComponent {
   el: HTMLCalciteInputDatePickerElement;
   /**
    * When false, the component won't be interactive.
    */
   disabled: boolean;
+  handleDisabledChange(value: boolean): void;
   /** Selected date */
   value: string | string[];
   valueHandler(value: string | string[]): void;
+  /**
+   * Defines the available placements that can be used when a flip occurs.
+   */
+  flipPlacements?: ComputedPlacement[];
+  flipPlacementsHandler(): void;
   /**
    * Number at which section headings should start for this component.
    */
@@ -63,6 +70,11 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   locale?: string;
   /** specify the scale of the date picker */
   scale: "s" | "m" | "l";
+  /**
+   * Determines where the date-picker component will be positioned relative to the input.
+   * @default "bottom-leading"
+   */
+  placement: MenuPlacement;
   /** Range mode activation */
   range: boolean;
   /**
@@ -121,7 +133,9 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   connectedCallback(): void;
   componentWillLoad(): Promise<void>;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   render(): VNode;
+  filteredFlipPlacements: ComputedPlacement[];
   labelEl: HTMLCalciteLabelElement;
   formEl: HTMLFormElement;
   defaultValue: InputDatePicker["value"];
@@ -136,6 +150,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   private endWrapper;
   private activeTransitionProp;
   setReferenceEl(): void;
+  setFilteredPlacements: () => void;
   onLabelClick(): void;
   transitionEnd: (event: TransitionEvent) => void;
   setStartInput: (el: HTMLCalciteInputElement) => void;

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

@@ -1,13 +1,17 @@
 import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
+import { PopperPlacement } from "../../utils/popper";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
-export declare class InputTimePicker implements LabelableComponent, FormComponent {
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class InputTimePicker implements LabelableComponent, FormComponent, InteractiveComponent {
   el: HTMLCalciteInputTimePickerElement;
   /** The active state of the time input */
   active: boolean;
+  activeHandler(): void;
   /** The disabled state of the time input */
   disabled: boolean;
+  handleDisabledChange(value: boolean): void;
   /** aria-label for the hour input */
   intlHour?: string;
   /** aria-label for the hour down button */
@@ -48,6 +52,11 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   required: boolean;
   /** The scale (size) of the time input */
   scale: Scale;
+  /**
+   * Determines where the popover will be positioned relative to the input.
+   * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
+   */
+  placement: PopperPlacement;
   /** number (seconds) that specifies the granularity that the value must adhere to */
   step: number;
   /** The selected time in UTC (always 24-hour format) */
@@ -86,5 +95,6 @@ export declare class InputTimePicker implements LabelableComponent, FormComponen
   connectedCallback(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   render(): VNode;
 }

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

@@ -20,7 +20,11 @@ export declare class Label {
   layout: "inline" | "inline-space-between" | "default";
   /** eliminates any space around the label */
   disableSpacing: boolean;
-  /** is the label disabled  */
+  /**
+   * is the label disabled
+   *
+   * @deprecated use the `disabled` property on the interactive components instead
+   */
   disabled: boolean;
   /**
    * @internal
@@ -29,5 +33,7 @@ export declare class Label {
     sourceEvent: MouseEvent;
   }>;
   labelClickHandler: (event: MouseEvent) => void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   render(): VNode;
 }

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

@@ -1,10 +1,11 @@
 import { VNode } from "../../stencil-public-runtime";
 import { FlipContext } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
 /** Any attributes placed on <calcite-link> component will propagate to the rendered child */
 /** Passing a 'href' will render an anchor link, instead of a span. Role will be set to link, or link, depending on this. */
 /** It is the consumers responsibility to add aria information, rel, target, for links, and any link attributes for form submission */
 /** @slot - A slot for adding text. */
-export declare class Link {
+export declare class Link implements InteractiveComponent {
   el: HTMLCalciteLinkElement;
   /** is the link disabled  */
   disabled: boolean;
@@ -25,6 +26,7 @@ export declare class Link {
   rel?: string;
   /** The target attribute to apply to the hyperlink */
   target?: string;
+  componentDidRender(): void;
   render(): VNode;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;

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

@@ -1,14 +1,20 @@
 import { VNode } from "../../stencil-public-runtime";
 import { HeadingLevel } from "../functional/Heading";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
  * @slot - A slot for adding `calcite-list-item` elements.
  */
-export declare class List {
+export declare class List implements InteractiveComponent {
+  /**
+   * When true, disabled prevents user interaction.
+   */
+  disabled: boolean;
   /**
    * Number at which section headings should start for this component.
    */
   headingLevel: HeadingLevel;
+  componentDidRender(): void;
   el: HTMLCalciteListElement;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;

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

@@ -1,5 +1,6 @@
 import { VNode } from "../../stencil-public-runtime";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
  * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the list item.
@@ -7,7 +8,7 @@ import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
  * @slot content-end - A slot for adding non-actionable elements after the label and description of the list item.
  * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the list item.
  */
-export declare class ListItem implements ConditionalSlotComponent {
+export declare class ListItem implements ConditionalSlotComponent, InteractiveComponent {
   /**
    * When true, prevents the content of the list item from user interaction.
    */
@@ -26,6 +27,7 @@ export declare class ListItem implements ConditionalSlotComponent {
   label: string;
   el: HTMLCalciteListItemElement;
   focusEl: HTMLButtonElement;
+  componentDidRender(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
   /** Sets focus on the component. */

package/dist/types/components/list-item/resources.d.ts

@@ -10,6 +10,7 @@ export declare const CSS: {
   description: string;
   contentEnd: string;
   actionsEnd: string;
+  hasCenterContent: string;
 };
 export declare const SLOTS: {
   actionsStart: string;