@esri/calcite-components 1.0.0-next.412 → 1.0.0-next.415

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/dropdown/dropdown.d.ts

@@ -3,11 +3,12 @@ import { DropdownPlacement, ItemKeyboardEvent } from "./interfaces";
 import { OverlayPositioning } 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,7 @@ export declare class Dropdown {
   disableCloseOnSelect: boolean;
   /** is the dropdown disabled  */
   disabled: boolean;
+  handleDisabledChange(value: boolean): 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
@@ -47,6 +49,7 @@ export declare class Dropdown {
   width: Scale;
   connectedCallback(): void;
   componentDidLoad(): void;
+  componentDidRender(): void;
   disconnectedCallback(): void;
   render(): VNode;
   /** Updates the position of the component. */

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,14 +38,16 @@ 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>;

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

@@ -5,12 +5,14 @@ import { FormComponent } from "../../utils/form";
 import { OverlayPositioning } 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;
@@ -121,6 +123,7 @@ export declare class InputDatePicker implements LabelableComponent, FormComponen
   connectedCallback(): void;
   componentWillLoad(): Promise<void>;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   render(): VNode;
   labelEl: HTMLCalciteLabelElement;
   formEl: HTMLFormElement;

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

@@ -2,12 +2,15 @@ import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 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 */
@@ -86,5 +89,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/panel/panel.d.ts

@@ -2,6 +2,7 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { HeadingLevel } from "../functional/Heading";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding custom content.
  * @slot header-actions-start - A slot for adding actions or content to the start side of the panel header.
@@ -12,7 +13,7 @@ import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
  * @slot footer-actions - A slot for adding buttons to the footer.
  * @slot footer - A slot for adding custom content to the footer.
  */
-export declare class Panel implements ConditionalSlotComponent {
+export declare class Panel implements ConditionalSlotComponent, InteractiveComponent {
   /**
    * Hides the panel.
    */
@@ -74,6 +75,7 @@ export declare class Panel implements ConditionalSlotComponent {
    * Opens the action menu.
    */
   menuOpen: boolean;
+  componentDidRender(): void;
   el: HTMLCalcitePanelElement;
   backButtonEl: HTMLCalciteActionElement;
   dismissButtonEl: HTMLCalciteActionElement;

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

@@ -2,11 +2,12 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ICON_TYPES } from "./resources";
 import { ListFocusId, ItemData } from "./shared-list-logic";
 import { HeadingLevel } from "../functional/Heading";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` elements. Items are displayed as a vertical list.
  * @slot menu-actions - A slot for adding a button + menu combo for performing actions like sorting.
  */
-export declare class PickList<ItemElement extends HTMLCalcitePickListItemElement = HTMLCalcitePickListItemElement> {
+export declare class PickList<ItemElement extends HTMLCalcitePickListItemElement = HTMLCalcitePickListItemElement> implements InteractiveComponent {
   /**
    * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
    */
@@ -48,6 +49,7 @@ export declare class PickList<ItemElement extends HTMLCalcitePickListItemElement
   filterEl: HTMLCalciteFilterElement;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   /**
    * Emitted when any of the item selections have changed.
    */

package/dist/types/components/pick-list/shared-list-logic.d.ts

@@ -12,6 +12,7 @@ export declare function calciteListItemChangeHandler<T extends Lists>(this: List
 export declare function calciteListItemValueChangeHandler<T extends Lists>(this: List<T>, event: CustomEvent): void;
 export declare function calciteListFocusOutHandler<T extends Lists>(this: List<T>, event: FocusEvent): void;
 export declare function keyDownHandler<T extends Lists>(this: List<T>, event: KeyboardEvent): void;
+export declare function moveItemIndex<T extends Lists>(list: List<T>, item: ListItemElement<T>, direction: "up" | "down"): number;
 export declare function internalCalciteListChangeEvent<T extends Lists>(this: List<T>): void;
 export declare function removeItem<T extends Lists, U extends ListItemElement<T>>(this: List<T>, event: CustomEvent): void;
 export declare function setFocus<T extends Lists>(this: List<T>, focusId: ListFocusId): Promise<void>;

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

@@ -1,11 +1,12 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ICON_TYPES } from "../pick-list/resources";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot actions-end - a slot for adding actions or content to the end side of the item.
  * @slot actions-start - a slot for adding actions or content to the start side of the item.
  */
-export declare class PickListItem implements ConditionalSlotComponent {
+export declare class PickListItem implements ConditionalSlotComponent, InteractiveComponent {
   /**
    * An optional description for this item.  This will appear below the label text.
    */
@@ -14,7 +15,7 @@ export declare class PickListItem implements ConditionalSlotComponent {
   /**
    * When true, the item cannot be clicked and is visually muted.
    */
-  disabled?: boolean;
+  disabled: boolean;
   /**
    * When false, the item cannot be deselected by user interaction.
    */
@@ -62,6 +63,7 @@ export declare class PickListItem implements ConditionalSlotComponent {
   shiftPressed: boolean;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   /**
    * Emitted whenever the item is selected or unselected.
    */

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

@@ -2,7 +2,8 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { CheckableFormCompoment } from "../../utils/form";
-export declare class RadioButton implements LabelableComponent, CheckableFormCompoment {
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class RadioButton implements LabelableComponent, CheckableFormCompoment, InteractiveComponent {
   el: HTMLCalciteRadioButtonElement;
   /** The checked state of the radio button. */
   checked: boolean;
@@ -88,5 +89,6 @@ export declare class RadioButton implements LabelableComponent, CheckableFormCom
   connectedCallback(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   render(): VNode;
 }

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

@@ -3,10 +3,11 @@ import { Layout, Scale, Width } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
 import { RadioAppearance } from "./interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-radio-group-item`s.
  */
-export declare class RadioGroup implements LabelableComponent, FormComponent {
+export declare class RadioGroup implements LabelableComponent, FormComponent, InteractiveComponent {
   el: HTMLCalciteRadioGroupElement;
   /** specify the appearance style of the radio group, defaults to solid. */
   appearance: RadioAppearance;
@@ -39,6 +40,7 @@ export declare class RadioGroup implements LabelableComponent, FormComponent {
   componentWillLoad(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   render(): VNode;
   protected handleClick: (event: MouseEvent) => void;
   protected handleSelected(event: Event): void;

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

@@ -2,7 +2,8 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
-export declare class Rating implements LabelableComponent, FormComponent {
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class Rating implements LabelableComponent, FormComponent, InteractiveComponent {
   el: HTMLCalciteRatingElement;
   /** specify the scale of the component, defaults to m */
   scale: Scale;
@@ -36,6 +37,7 @@ export declare class Rating implements LabelableComponent, FormComponent {
   required: boolean;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   /**
    * Fires when the rating value has changed.
    */

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

@@ -2,10 +2,11 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale, Width } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-option`s.
  */
-export declare class Select implements LabelableComponent, FormComponent {
+export declare class Select implements LabelableComponent, FormComponent, InteractiveComponent {
   /**
    * When true, it prevents the option from being selected.
    */
@@ -53,6 +54,7 @@ export declare class Select implements LabelableComponent, FormComponent {
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidLoad(): void;
+  componentDidRender(): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   /**

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

@@ -3,7 +3,8 @@ import { ColorStop, DataSeries } from "../graph/interfaces";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { FormComponent } from "../../utils/form";
-export declare class Slider implements LabelableComponent, FormComponent {
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class Slider implements LabelableComponent, FormComponent, InteractiveComponent {
   el: HTMLCalciteSliderElement;
   /** Disable and gray out the slider */
   disabled: boolean;

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

@@ -1,10 +1,11 @@
 import Sortable from "sortablejs";
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Layout } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding sortable items.
  */
-export declare class SortableList {
+export declare class SortableList implements InteractiveComponent {
   /**
    * Specifies which items inside the element should be draggable.
    */
@@ -38,6 +39,7 @@ export declare class SortableList {
   sortable: Sortable;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   /**
    * Emitted when the order of the list has changed.
    */

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

@@ -2,10 +2,11 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ButtonAppearance, ButtonColor, DropdownIconType } from "../button/interfaces";
 import { FlipContext, Scale, Width } from "../interfaces";
 import { OverlayPositioning } from "../../utils/popper";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-dropdown` content.
  */
-export declare class SplitButton {
+export declare class SplitButton implements InteractiveComponent {
   el: HTMLCalciteSplitButtonElement;
   /** specify the appearance style of the button, defaults to solid. */
   appearance: ButtonAppearance;
@@ -13,11 +14,13 @@ export declare class SplitButton {
   color: ButtonColor;
   /** is the control disabled  */
   disabled: boolean;
+  handleDisabledChange(value: boolean): void;
   /**
    * Is the dropdown currently active or not
    * @internal
    */
   active: boolean;
+  activeHandler(): void;
   /** specify the icon used for the dropdown menu, defaults to chevron */
   dropdownIconType: DropdownIconType;
   /** aria label for overflow button */
@@ -45,6 +48,7 @@ export declare class SplitButton {
   calciteSplitButtonPrimaryClick: EventEmitter;
   /** fired when the secondary button is clicked */
   calciteSplitButtonSecondaryClick: EventEmitter;
+  componentDidRender(): void;
   render(): VNode;
   private calciteSplitButtonPrimaryClickHandler;
   private calciteSplitButtonSecondaryClickHandler;

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

@@ -1,9 +1,10 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding custom content.
  */
-export declare class StepperItem {
+export declare class StepperItem implements InteractiveComponent {
   el: HTMLCalciteStepperItemElement;
   /** is the step active */
   active: boolean;
@@ -45,6 +46,7 @@ export declare class StepperItem {
   componentWillLoad(): void;
   componentDidLoad(): void;
   componentDidUpdate(): void;
+  componentDidRender(): void;
   render(): VNode;
   keyDownHandler(e: KeyboardEvent): void;
   updateActiveItemOnChange(event: CustomEvent): void;

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

@@ -2,11 +2,11 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
 import { CheckableFormCompoment } from "../../utils/form";
-export declare class Switch implements LabelableComponent, CheckableFormCompoment {
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class Switch implements LabelableComponent, CheckableFormCompoment, InteractiveComponent {
   el: HTMLCalciteSwitchElement;
   /** True if the switch is disabled */
   disabled: boolean;
-  disabledWatcher(newDisabled: boolean): void;
   /** Applies to the aria-label attribute on the switch */
   label?: string;
   /** The name of the switch input */
@@ -27,7 +27,6 @@ export declare class Switch implements LabelableComponent, CheckableFormCompomen
   formEl: HTMLFormElement;
   defaultValue: Switch["checked"];
   defaultChecked: boolean;
-  tabindex: number;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   keyDownHandler: (e: KeyboardEvent) => void;
@@ -41,6 +40,6 @@ export declare class Switch implements LabelableComponent, CheckableFormCompomen
   calciteSwitchChange: EventEmitter;
   connectedCallback(): void;
   disconnectedCallback(): void;
-  componentWillLoad(): void;
+  componentDidRender(): void;
   render(): VNode;
 }

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

@@ -2,10 +2,11 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { TabChangeEventDetail } from "../tab/interfaces";
 import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
 import { FlipContext, Scale } from "../interfaces";
+import { InteractiveComponent } from "../../utils/interactive";
 /**
  * @slot - A slot for adding text.
  */
-export declare class TabTitle {
+export declare class TabTitle implements InteractiveComponent {
   el: HTMLCalciteTabTitleElement;
   /** Show this tab title as selected */
   active: boolean;
@@ -37,6 +38,7 @@ export declare class TabTitle {
   componentWillRender(): void;
   render(): VNode;
   componentDidLoad(): Promise<void>;
+  componentDidRender(): void;
   tabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void;
   onClick(): void;
   keyDownHandler(e: KeyboardEvent): void;

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

@@ -1,10 +1,11 @@
 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.
  */
-export declare class Tile implements ConditionalSlotComponent {
+export declare class Tile implements ConditionalSlotComponent, InteractiveComponent {
   el: HTMLCalciteTileElement;
   /** The active state of the tile. */
   active: boolean;
@@ -31,6 +32,7 @@ export declare class Tile implements ConditionalSlotComponent {
   icon?: string;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidRender(): void;
   renderTile(): VNode;
   render(): VNode;
 }