docs(all): improve type docs for event

angular/src/providers/platform.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
-import { BackButtonDetail, Platforms, getPlatforms, isPlatform } from '@ionic/core';
+import { BackButtonEventDetail, Platforms, getPlatforms, isPlatform } from '@ionic/core';
 import { Subject, Subscription } from 'rxjs';
 
-export interface BackButtonEmitter extends Subject<BackButtonDetail> {
+export interface BackButtonEmitter extends Subject<BackButtonEventDetail> {
   subscribeWithPriority(priority: number, callback: () => Promise<any> | void): Subscription;
 }
 
@@ -14,7 +14,7 @@ export class Platform {
   /**
    * @hidden
    */
-  backButton: BackButtonEmitter = new Subject<BackButtonDetail>() as any;
+  backButton: BackButtonEmitter = new Subject<BackButtonEventDetail>() as any;
 
   /**
    * The pause event emits when the native platform puts the application

core/api.txt

@@ -203,7 +203,7 @@ ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
 ion-checkbox,prop,value,string,'on',false,false
 ion-checkbox,event,ionBlur,void,true
-ion-checkbox,event,ionChange,CheckedInputChangeEvent,true
+ion-checkbox,event,ionChange,CheckboxChangeEventDetail,true
 ion-checkbox,event,ionFocus,void,true
 ion-checkbox,css-prop,--background
 ion-checkbox,css-prop,--background-checked
@@ -306,7 +306,7 @@ ion-datetime,prop,yearValues,number | number[] | string | undefined,undefined,fa
 ion-datetime,method,open,open() => Promise<void>
 ion-datetime,event,ionBlur,void,true
 ion-datetime,event,ionCancel,void,true
-ion-datetime,event,ionChange,InputChangeEvent,true
+ion-datetime,event,ionChange,DatetimeChangeEventDetail,true
 ion-datetime,event,ionFocus,void,true
 ion-datetime,css-prop,--padding-bottom
 ion-datetime,css-prop,--padding-end
@@ -425,11 +425,9 @@ ion-input,prop,type,"date" | "email" | "number" | "password" | "search" | "tel"
 ion-input,prop,value,null | string | undefined,'',false,false
 ion-input,method,setFocus,setFocus() => void
 ion-input,event,ionBlur,void,true
-ion-input,event,ionChange,TextInputChangeEvent,true
+ion-input,event,ionChange,InputChangeEventDetail,true
 ion-input,event,ionFocus,void,true
 ion-input,event,ionInput,KeyboardEvent,true
-ion-input,event,ionInputDidLoad,void,true
-ion-input,event,ionInputDidUnload,void,true
 ion-input,css-prop,--background
 ion-input,css-prop,--color
 ion-input,css-prop,--padding-bottom
@@ -791,7 +789,7 @@ ion-radio-group
 ion-radio-group,prop,allowEmptySelection,boolean,false,false,false
 ion-radio-group,prop,name,string,this.inputId,false,false
 ion-radio-group,prop,value,any,undefined,false,false
-ion-radio-group,event,ionChange,InputChangeEvent,true
+ion-radio-group,event,ionChange,RadioGroupChangeEventDetail,true
 
 ion-radio
 ion-radio,prop,checked,boolean,false,false,false
@@ -802,9 +800,7 @@ ion-radio,prop,name,string,this.inputId,false,false
 ion-radio,prop,value,any,undefined,false,false
 ion-radio,event,ionBlur,void,true
 ion-radio,event,ionFocus,void,true
-ion-radio,event,ionRadioDidLoad,void,true
-ion-radio,event,ionRadioDidUnload,void,true
-ion-radio,event,ionSelect,CheckedInputChangeEvent,true
+ion-radio,event,ionSelect,RadioChangeEventDetail,true
 ion-radio,css-prop,--color
 ion-radio,css-prop,--color-checked
 
@@ -822,7 +818,7 @@ ion-range,prop,snaps,boolean,false,false,false
 ion-range,prop,step,number,1,false,false
 ion-range,prop,value,number | { lower: number; upper: number; },0,false,false
 ion-range,event,ionBlur,void,true
-ion-range,event,ionChange,InputChangeEvent,true
+ion-range,event,ionChange,RangeChangeEventDetail,true
 ion-range,event,ionFocus,void,true
 ion-range,css-prop,--bar-background
 ion-range,css-prop,--bar-background-active
@@ -856,7 +852,7 @@ ion-refresher,event,ionStart,void,true
 ion-reorder-group
 ion-reorder-group,prop,disabled,boolean,true,false,false
 ion-reorder-group,method,complete,complete(listOrReorder?: boolean | any[] | undefined) => Promise<any>
-ion-reorder-group,event,ionItemReorder,ItemReorderDetail,true
+ion-reorder-group,event,ionItemReorder,ItemReorderEventDetail,true
 
 ion-reorder
 
@@ -908,7 +904,7 @@ ion-searchbar,prop,value,null | string | undefined,'',false,false
 ion-searchbar,method,setFocus,setFocus() => void
 ion-searchbar,event,ionBlur,void,true
 ion-searchbar,event,ionCancel,void,true
-ion-searchbar,event,ionChange,TextInputChangeEvent,true
+ion-searchbar,event,ionChange,SearchbarChangeEventDetail,true
 ion-searchbar,event,ionClear,void,true
 ion-searchbar,event,ionFocus,void,true
 ion-searchbar,event,ionInput,KeyboardEvent,true
@@ -960,8 +956,8 @@ ion-segment,prop,disabled,boolean,false,false,false
 ion-segment,prop,mode,"ios" | "md",undefined,false,false
 ion-segment,prop,scrollable,boolean,false,false,false
 ion-segment,prop,value,null | string | undefined,undefined,false,false
-ion-segment,event,ionChange,TextInputChangeEvent,true
-ion-segment,event,ionStyle,StyleEvent,true
+ion-segment,event,ionChange,SegmentChangeEventDetail,true
+ion-segment,event,ionStyle,StyleEventDetail,true
 
 ion-select-option
 ion-select-option,prop,disabled,boolean,false,false,false
@@ -989,7 +985,7 @@ ion-select,prop,value,any,undefined,false,false
 ion-select,method,open,open(ev?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement | undefined>
 ion-select,event,ionBlur,void,true
 ion-select,event,ionCancel,void,true
-ion-select,event,ionChange,SelectInputChangeEvent,true
+ion-select,event,ionChange,SelectChangeEventDetail,true
 ion-select,event,ionFocus,void,true
 ion-select,css-prop,--padding-bottom
 ion-select,css-prop,--padding-end
@@ -1119,7 +1115,7 @@ ion-textarea,prop,value,null | string | undefined,'',false,false
 ion-textarea,prop,wrap,"hard" | "off" | "soft" | undefined,undefined,false,false
 ion-textarea,method,setFocus,setFocus() => void
 ion-textarea,event,ionBlur,void,true
-ion-textarea,event,ionChange,TextInputChangeEvent,true
+ion-textarea,event,ionChange,TextareaChangeEventDetail,true
 ion-textarea,event,ionFocus,void,true
 ion-textarea,event,ionInput,KeyboardEvent,true
 ion-textarea,css-prop,--background
@@ -1194,7 +1190,7 @@ ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false
 ion-toggle,prop,value,null | string | undefined,'on',false,false
 ion-toggle,event,ionBlur,void,true
-ion-toggle,event,ionChange,CheckedInputChangeEvent,true
+ion-toggle,event,ionChange,ToggleChangeEventDetail,true
 ion-toggle,event,ionFocus,void,true
 ion-toggle,css-prop,--background
 ion-toggle,css-prop,--background-checked

core/package.json

@@ -30,7 +30,7 @@
     "ionicons": "4.5.1"
   },
   "devDependencies": {
-    "@stencil/core": "0.16.2-0",
+    "@stencil/core": "0.16.2-1",
     "@stencil/sass": "0.1.1",
     "@stencil/utils": "latest",
     "@types/jest": "^23.3.1",

core/src/components.d.ts

@@ -15,18 +15,19 @@ import {
   AlertInput,
   AlertOptions,
   AnimationBuilder,
-  CheckedInputChangeEvent,
+  CheckboxChangeEventDetail,
   Color,
   ComponentProps,
   ComponentRef,
+  DatetimeChangeEventDetail,
   DatetimeOptions,
   DomRenderFn,
   FrameworkDelegate,
   HeaderFn,
-  InputChangeEvent,
+  InputChangeEventDetail,
   ItemHeightFn,
   ItemRenderFn,
-  ItemReorderDetail,
+  ItemReorderEventDetail,
   LoadingOptions,
   MenuChangeEventDetail,
   MenuControllerI,
@@ -40,6 +41,9 @@ import {
   PickerColumn,
   PickerOptions,
   PopoverOptions,
+  RadioChangeEventDetail,
+  RadioGroupChangeEventDetail,
+  RangeChangeEventDetail,
   RangeValue,
   RefresherEventDetail,
   RouteID,
@@ -49,20 +53,23 @@ import {
   RouteWrite,
   ScrollBaseDetail,
   ScrollDetail,
+  SearchbarChangeEventDetail,
   SegmentButtonLayout,
-  SelectInputChangeEvent,
+  SegmentChangeEventDetail,
+  SelectChangeEventDetail,
   SelectInterface,
   SelectPopoverOption,
   Side,
   SpinnerTypes,
-  StyleEvent,
+  StyleEventDetail,
   SwipeGestureHandler,
-  TabBarChangedDetail,
-  TabButtonClickDetail,
+  TabBarChangedEventDetail,
+  TabButtonClickEventDetail,
   TabButtonLayout,
+  TextareaChangeEventDetail,
   TextFieldTypes,
-  TextInputChangeEvent,
   ToastOptions,
+  ToggleChangeEventDetail,
   TransitionDoneFn,
   TransitionInstruction,
   ViewController,
@@ -797,7 +804,7 @@ export namespace Components {
     /**
     * Emitted when the checked property has changed.
     */
-    'onIonChange'?: (event: CustomEvent<CheckedInputChangeEvent>) => void;
+    'onIonChange'?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
     /**
     * Emitted when the toggle has focus.
     */
@@ -805,7 +812,7 @@ export namespace Components {
     /**
     * Emitted when the styles change.
     */
-    'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
+    'onIonStyle'?: (event: CustomEvent<StyleEventDetail>) => void;
     /**
     * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
     */
@@ -1289,7 +1296,7 @@ export namespace Components {
     /**
     * Emitted when the value (selected date) has changed.
     */
-    'onIonChange'?: (event: CustomEvent<InputChangeEvent>) => void;
+    'onIonChange'?: (event: CustomEvent<DatetimeChangeEventDetail>) => void;
     /**
     * Emitted when the datetime has focus.
     */
@@ -1297,7 +1304,7 @@ export namespace Components {
     /**
     * Emitted when the styles change.
     */
-    'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
+    'onIonStyle'?: (event: CustomEvent<StyleEventDetail>) => void;
     /**
     * The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`.
     */
@@ -1807,7 +1814,7 @@ export namespace Components {
     /**
     * Emitted when the value has changed.
     */
-    'onIonChange'?: (event: CustomEvent<TextInputChangeEvent>) => void;
+    'onIonChange'?: (event: CustomEvent<InputChangeEventDetail>) => void;
     /**
     * Emitted when the input has focus.
     */
@@ -1827,7 +1834,7 @@ export namespace Components {
     /**
     * Emitted when the styles change.
     */
-    'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
+    'onIonStyle'?: (event: CustomEvent<StyleEventDetail>) => void;
     /**
     * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
     */
@@ -2105,7 +2112,7 @@ export namespace Components {
     /**
     * Emitted when the styles change.
     */
-    'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
+    'onIonStyle'?: (event: CustomEvent<StyleEventDetail>) => void;
     /**
     * The position determines where and how the label behaves inside an item.
     */
@@ -3267,7 +3274,7 @@ export namespace Components {
     /**
     * Emitted when the value has changed.
     */
-    'onIonChange'?: (event: CustomEvent<InputChangeEvent>) => void;
+    'onIonChange'?: (event: CustomEvent<RadioGroupChangeEventDetail>) => void;
     /**
     * the value of the radio group.
     */
@@ -3340,11 +3347,11 @@ export namespace Components {
     /**
     * Emitted when the radio button is selected.
     */
-    'onIonSelect'?: (event: CustomEvent<CheckedInputChangeEvent>) => void;
+    'onIonSelect'?: (event: CustomEvent<RadioChangeEventDetail>) => void;
     /**
     * Emitted when the styles change.
     */
-    'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
+    'onIonStyle'?: (event: CustomEvent<StyleEventDetail>) => void;
     /**
     * the value of the radio.
     */
@@ -3441,7 +3448,7 @@ export namespace Components {
     /**
     * Emitted when the value property has changed.
     */
-    'onIonChange'?: (event: CustomEvent<InputChangeEvent>) => void;
+    'onIonChange'?: (event: CustomEvent<RangeChangeEventDetail>) => void;
     /**
     * Emitted when the range has focus.
     */
@@ -3449,7 +3456,7 @@ export namespace Components {
     /**
     * Emitted when the styles change.
     */
-    'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
+    'onIonStyle'?: (event: CustomEvent<StyleEventDetail>) => void;
     /**
     * If `true`, a pin with integer value is shown when the knob is pressed.
     */
@@ -3592,7 +3599,7 @@ export namespace Components {
     /**
     * Event that needs to be listen to in order to respond to reorder action. `ion-reorder-group` uses this event to delegate to the user the reordering of data array.   The complete() method exposed as
     */
-    'onIonItemReorder'?: (event: CustomEvent<ItemReorderDetail>) => void;
+    'onIonItemReorder'?: (event: CustomEvent<ItemReorderEventDetail>) => void;
   }
 
   interface IonReorder {}
@@ -3862,7 +3869,7 @@ export namespace Components {
     /**
     * Emitted when the value has changed.
     */
-    'onIonChange'?: (event: CustomEvent<TextInputChangeEvent>) => void;
+    'onIonChange'?: (event: CustomEvent<SearchbarChangeEventDetail>) => void;
     /**
     * Emitted when the clear input button is clicked.
     */
@@ -3988,11 +3995,11 @@ export namespace Components {
     /**
     * Emitted when the value property has changed.
     */
-    'onIonChange'?: (event: CustomEvent<TextInputChangeEvent>) => void;
+    'onIonChange'?: (event: CustomEvent<SegmentChangeEventDetail>) => void;
     /**
     * Emitted when the styles change.
     */
-    'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
+    'onIonStyle'?: (event: CustomEvent<StyleEventDetail>) => void;
     /**
     * If `true`, the segment buttons will overflow and the user can swipe to see them.
     */
@@ -4171,7 +4178,7 @@ export namespace Components {
     /**
     * Emitted when the value has changed.
     */
-    'onIonChange'?: (event: CustomEvent<SelectInputChangeEvent>) => void;
+    'onIonChange'?: (event: CustomEvent<SelectChangeEventDetail>) => void;
     /**
     * Emitted when the select has focus.
     */
@@ -4179,7 +4186,7 @@ export namespace Components {
     /**
     * Emitted when the styles change.
     */
-    'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
+    'onIonStyle'?: (event: CustomEvent<StyleEventDetail>) => void;
     /**
     * The text to display when the select is empty.
     */
@@ -4470,7 +4477,7 @@ export namespace Components {
     * The mode determines which platform styles to use.
     */
     'mode'?: Mode;
-    'onIonTabBarChanged'?: (event: CustomEvent<TabBarChangedDetail>) => void;
+    'onIonTabBarChanged'?: (event: CustomEvent<TabBarChangedEventDetail>) => void;
     /**
     * The selected tab component
     */
@@ -4523,7 +4530,7 @@ export namespace Components {
     /**
     * Emitted when the tab bar is clicked
     */
-    'onIonTabButtonClick'?: (event: CustomEvent<TabButtonClickDetail>) => void;
+    'onIonTabButtonClick'?: (event: CustomEvent<TabButtonClickEventDetail>) => void;
     /**
     * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
     */
@@ -4747,7 +4754,7 @@ export namespace Components {
     /**
     * Emitted when the input value has changed.
     */
-    'onIonChange'?: (event: CustomEvent<TextInputChangeEvent>) => void;
+    'onIonChange'?: (event: CustomEvent<TextareaChangeEventDetail>) => void;
     /**
     * Emitted when the input has focus.
     */
@@ -4759,7 +4766,7 @@ export namespace Components {
     /**
     * Emitted when the styles change.
     */
-    'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
+    'onIonStyle'?: (event: CustomEvent<StyleEventDetail>) => void;
     /**
     * Instructional text that shows before the input has a value.
     */
@@ -5027,7 +5034,7 @@ export namespace Components {
     /**
     * Emitted when the value property has changed.
     */
-    'onIonChange'?: (event: CustomEvent<CheckedInputChangeEvent>) => void;
+    'onIonChange'?: (event: CustomEvent<ToggleChangeEventDetail>) => void;
     /**
     * Emitted when the toggle has focus.
     */
@@ -5035,7 +5042,7 @@ export namespace Components {
     /**
     * Emitted when the styles change.
     */
-    'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
+    'onIonStyle'?: (event: CustomEvent<StyleEventDetail>) => void;
     /**
     * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
     */

core/src/components/action-sheet/readme.md

@@ -143,14 +143,14 @@ async function presentActionSheet() {
 
 ## Events
 
-| Event                       | Description                             | Detail             |
-| --------------------------- | --------------------------------------- | ------------------ |
-| `ionActionSheetDidDismiss`  | Emitted after the alert has dismissed.  | OverlayEventDetail |
-| `ionActionSheetDidLoad`     | Emitted after the alert has loaded.     | void               |
-| `ionActionSheetDidPresent`  | Emitted after the alert has presented.  | void               |
-| `ionActionSheetDidUnload`   | Emitted after the alert has unloaded.   | void               |
-| `ionActionSheetWillDismiss` | Emitted before the alert has dismissed. | OverlayEventDetail |
-| `ionActionSheetWillPresent` | Emitted before the alert has presented. | void               |
+| Event                       | Description                             | Type                              |
+| --------------------------- | --------------------------------------- | --------------------------------- |
+| `ionActionSheetDidDismiss`  | Emitted after the alert has dismissed.  | `CustomEvent<OverlayEventDetail>` |
+| `ionActionSheetDidLoad`     | Emitted after the alert has loaded.     | `CustomEvent<void>`               |
+| `ionActionSheetDidPresent`  | Emitted after the alert has presented.  | `CustomEvent<void>`               |
+| `ionActionSheetDidUnload`   | Emitted after the alert has unloaded.   | `CustomEvent<void>`               |
+| `ionActionSheetWillDismiss` | Emitted before the alert has dismissed. | `CustomEvent<OverlayEventDetail>` |
+| `ionActionSheetWillPresent` | Emitted before the alert has presented. | `CustomEvent<void>`               |
 
 
 ## Methods

core/src/components/alert/readme.md

@@ -548,14 +548,14 @@ async function presentAlertCheckbox() {
 
 ## Events
 
-| Event                 | Description                             | Detail             |
-| --------------------- | --------------------------------------- | ------------------ |
-| `ionAlertDidDismiss`  | Emitted after the alert has dismissed.  | OverlayEventDetail |
-| `ionAlertDidLoad`     | Emitted after the alert has presented.  | void               |
-| `ionAlertDidPresent`  | Emitted after the alert has presented.  | void               |
-| `ionAlertDidUnload`   | Emitted before the alert has presented. | void               |
-| `ionAlertWillDismiss` | Emitted before the alert has dismissed. | OverlayEventDetail |
-| `ionAlertWillPresent` | Emitted before the alert has presented. | void               |
+| Event                 | Description                             | Type                              |
+| --------------------- | --------------------------------------- | --------------------------------- |
+| `ionAlertDidDismiss`  | Emitted after the alert has dismissed.  | `CustomEvent<OverlayEventDetail>` |
+| `ionAlertDidLoad`     | Emitted after the alert has presented.  | `CustomEvent<void>`               |
+| `ionAlertDidPresent`  | Emitted after the alert has presented.  | `CustomEvent<void>`               |
+| `ionAlertDidUnload`   | Emitted before the alert has presented. | `CustomEvent<void>`               |
+| `ionAlertWillDismiss` | Emitted before the alert has dismissed. | `CustomEvent<OverlayEventDetail>` |
+| `ionAlertWillPresent` | Emitted before the alert has presented. | `CustomEvent<void>`               |
 
 
 ## Methods

core/src/components/backdrop/readme.md

@@ -86,9 +86,9 @@ backdrop.stopPropagation = false;
 
 ## Events
 
-| Event            | Description                          | Detail |
-| ---------------- | ------------------------------------ | ------ |
-| `ionBackdropTap` | Emitted when the backdrop is tapped. | void   |
+| Event            | Description                          | Type                |
+| ---------------- | ------------------------------------ | ------------------- |
+| `ionBackdropTap` | Emitted when the backdrop is tapped. | `CustomEvent<void>` |
 
 
 ----------------------------------------------

core/src/components/button/readme.md

@@ -112,10 +112,10 @@ This attribute specifies the size of the button. Setting this attribute will cha
 
 ## Events
 
-| Event      | Description                          | Detail |
-| ---------- | ------------------------------------ | ------ |
-| `ionBlur`  | Emitted when the button loses focus. | void   |
-| `ionFocus` | Emitted when the button has focus.   | void   |
+| Event      | Description                          | Type                |
+| ---------- | ------------------------------------ | ------------------- |
+| `ionBlur`  | Emitted when the button loses focus. | `CustomEvent<void>` |
+| `ionFocus` | Emitted when the button has focus.   | `CustomEvent<void>` |
 
 
 ## CSS Custom Properties

core/src/components/checkbox/checkbox-interface.ts

@@ -0,0 +1,5 @@
+
+export interface CheckboxChangeEventDetail {
+  value: any;
+  checked: boolean;
+}

core/src/components/checkbox/checkbox.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
-import { CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface';
+import { CheckboxChangeEventDetail, Color, Mode, StyleEventDetail } from '../../interface';
 import { findItemLabel, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
@@ -59,7 +59,7 @@ export class Checkbox implements ComponentInterface {
   /**
    * Emitted when the checked property has changed.
    */
-  @Event() ionChange!: EventEmitter<CheckedInputChangeEvent>;
+  @Event() ionChange!: EventEmitter<CheckboxChangeEventDetail>;
 
   /**
    * Emitted when the toggle has focus.
@@ -75,7 +75,7 @@ export class Checkbox implements ComponentInterface {
    * Emitted when the styles change.
    * @internal
    */
-  @Event() ionStyle!: EventEmitter<StyleEvent>;
+  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
   componentWillLoad() {
     this.emitStyle();

core/src/components/checkbox/readme.md

@@ -110,11 +110,11 @@ export class HomePage {
 
 ## Events
 
-| Event       | Description                                    | Detail                  |
-| ----------- | ---------------------------------------------- | ----------------------- |
-| `ionBlur`   | Emitted when the toggle loses focus.           | void                    |
-| `ionChange` | Emitted when the checked property has changed. | CheckedInputChangeEvent |
-| `ionFocus`  | Emitted when the toggle has focus.             | void                    |
+| Event       | Description                                    | Type                                     |
+| ----------- | ---------------------------------------------- | ---------------------------------------- |
+| `ionBlur`   | Emitted when the toggle loses focus.           | `CustomEvent<void>`                      |
+| `ionChange` | Emitted when the checked property has changed. | `CustomEvent<CheckboxChangeEventDetail>` |
+| `ionFocus`  | Emitted when the toggle has focus.             | `CustomEvent<void>`                      |
 
 
 ## CSS Custom Properties

core/src/components/content/readme.md

@@ -51,11 +51,11 @@ content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
 
 ## Events
 
-| Event            | Description                                                                                      | Detail           |
-| ---------------- | ------------------------------------------------------------------------------------------------ | ---------------- |
-| `ionScroll`      | Emitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents` | ScrollDetail     |
-| `ionScrollEnd`   | Emitted when the scroll has ended.                                                               | ScrollBaseDetail |
-| `ionScrollStart` | Emitted when the scroll has started.                                                             | ScrollBaseDetail |
+| Event            | Description                                                                                      | Type                            |
+| ---------------- | ------------------------------------------------------------------------------------------------ | ------------------------------- |
+| `ionScroll`      | Emitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents` | `CustomEvent<ScrollDetail>`     |
+| `ionScrollEnd`   | Emitted when the scroll has ended.                                                               | `CustomEvent<ScrollBaseDetail>` |
+| `ionScrollStart` | Emitted when the scroll has started.                                                             | `CustomEvent<ScrollBaseDetail>` |
 
 
 ## Methods

core/src/components/datetime/datetime-interface.ts

@@ -1,3 +1,7 @@
 import { PickerOptions } from '../../interface';
 
 export type DatetimeOptions = Partial<PickerOptions>;
+
+export interface DatetimeChangeEventDetail {
+  value: string | undefined | null;
+}

core/src/components/datetime/datetime.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
-import { DatetimeOptions, InputChangeEvent, Mode, PickerColumn, PickerColumnOption, PickerOptions, StyleEvent } from '../../interface';
+import { DatetimeChangeEventDetail, DatetimeOptions, Mode, PickerColumn, PickerColumnOption, PickerOptions, StyleEventDetail } from '../../interface';
 import { clamp, findItemLabel, renderHiddenInput } from '../../utils/helpers';
 import { hostContext } from '../../utils/theme';
 
@@ -204,7 +204,7 @@ export class Datetime implements ComponentInterface {
   /**
    * Emitted when the value (selected date) has changed.
    */
-  @Event() ionChange!: EventEmitter<InputChangeEvent>;
+  @Event() ionChange!: EventEmitter<DatetimeChangeEventDetail>;
 
   /**
    * Emitted when the datetime has focus.
@@ -220,7 +220,7 @@ export class Datetime implements ComponentInterface {
    * Emitted when the styles change.
    * @internal
    */
-  @Event() ionStyle!: EventEmitter<StyleEvent>;
+  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
   componentWillLoad() {
     // first see if locale names were provided in the inputs

core/src/components/datetime/readme.md

@@ -459,12 +459,12 @@ customPickerOptions.pickerOptions = customPickerButtons;
 
 ## Events
 
-| Event       | Description                                         | Detail           |
-| ----------- | --------------------------------------------------- | ---------------- |
-| `ionBlur`   | Emitted when the datetime loses focus.              | void             |
-| `ionCancel` | Emitted when the datetime selection was cancelled.  | void             |
-| `ionChange` | Emitted when the value (selected date) has changed. | InputChangeEvent |
-| `ionFocus`  | Emitted when the datetime has focus.                | void             |
+| Event       | Description                                         | Type                                     |
+| ----------- | --------------------------------------------------- | ---------------------------------------- |
+| `ionBlur`   | Emitted when the datetime loses focus.              | `CustomEvent<void>`                      |
+| `ionCancel` | Emitted when the datetime selection was cancelled.  | `CustomEvent<void>`                      |
+| `ionChange` | Emitted when the value (selected date) has changed. | `CustomEvent<DatetimeChangeEventDetail>` |
+| `ionFocus`  | Emitted when the datetime has focus.                | `CustomEvent<void>`                      |
 
 
 ## Methods

core/src/components/fab-button/readme.md

@@ -55,10 +55,10 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
 
 ## Events
 
-| Event      | Description                          | Detail |
-| ---------- | ------------------------------------ | ------ |
-| `ionBlur`  | Emitted when the button loses focus. | void   |
-| `ionFocus` | Emitted when the button has focus.   | void   |
+| Event      | Description                          | Type                |
+| ---------- | ------------------------------------ | ------------------- |
+| `ionBlur`  | Emitted when the button loses focus. | `CustomEvent<void>` |
+| `ionFocus` | Emitted when the button has focus.   | `CustomEvent<void>` |
 
 
 ## CSS Custom Properties

core/src/components/img/readme.md

@@ -33,9 +33,9 @@ Img is a tag that will lazily load an image when ever the tag is in the viewport
 
 ## Events
 
-| Event           | Description                        | Detail |
-| --------------- | ---------------------------------- | ------ |
-| `ionImgDidLoad` | Emitted when the img src is loaded | void   |
+| Event           | Description                        | Type                |
+| --------------- | ---------------------------------- | ------------------- |
+| `ionImgDidLoad` | Emitted when the img src is loaded | `CustomEvent<void>` |
 
 
 ----------------------------------------------

core/src/components/infinite-scroll/readme.md

@@ -123,9 +123,9 @@ function toggleInfiniteScroll() {
 
 ## Events
 
-| Event         | Description                                                                                                                                                                                 | Detail |
-| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
-| `ionInfinite` | Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's `complete()` method when your async operation has completed. | void   |
+| Event         | Description                                                                                                                                                                                 | Type                |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
+| `ionInfinite` | Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's `complete()` method when your async operation has completed. | `CustomEvent<void>` |
 
 
 ## Methods

core/src/components/input/input-interface.ts

@@ -0,0 +1,4 @@
+
+export interface InputChangeEventDetail {
+  value: string | undefined | null;
+}

core/src/components/input/input.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
-import { Color, Mode, StyleEvent, TextFieldTypes, TextInputChangeEvent } from '../../interface';
+import { Color, InputChangeEventDetail, Mode, StyleEventDetail, TextFieldTypes } from '../../interface';
 import { debounceEvent, findItemLabel, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
@@ -188,7 +188,7 @@ export class Input implements ComponentInterface {
   /**
    * Emitted when the value has changed.
    */
-  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
+  @Event() ionChange!: EventEmitter<InputChangeEventDetail>;
 
   /**
    * Emitted when the input loses focus.
@@ -202,11 +202,13 @@ export class Input implements ComponentInterface {
 
   /**
    * Emitted when the input has been created.
+   * @internal
    */
   @Event() ionInputDidLoad!: EventEmitter<void>;
 
   /**
    * Emitted when the input has been removed.
+   * @internal
    */
   @Event() ionInputDidUnload!: EventEmitter<void>;
 
@@ -214,7 +216,7 @@ export class Input implements ComponentInterface {
    * Emitted when the styles change.
    * @internal
    */
-  @Event() ionStyle!: EventEmitter<StyleEvent>;
+  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
   componentWillLoad() {
     // By default, password inputs clear after focus when they have content

core/src/components/input/readme.md

@@ -140,14 +140,12 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email
 
 ## Events
 
-| Event               | Description                              | Detail               |
-| ------------------- | ---------------------------------------- | -------------------- |
-| `ionBlur`           | Emitted when the input loses focus.      | void                 |
-| `ionChange`         | Emitted when the value has changed.      | TextInputChangeEvent |
-| `ionFocus`          | Emitted when the input has focus.        | void                 |
-| `ionInput`          | Emitted when a keyboard input ocurred.   | KeyboardEvent        |
-| `ionInputDidLoad`   | Emitted when the input has been created. | void                 |
-| `ionInputDidUnload` | Emitted when the input has been removed. | void                 |
+| Event       | Description                            | Type                                  |
+| ----------- | -------------------------------------- | ------------------------------------- |
+| `ionBlur`   | Emitted when the input loses focus.    | `CustomEvent<void>`                   |
+| `ionChange` | Emitted when the value has changed.    | `CustomEvent<InputChangeEventDetail>` |
+| `ionFocus`  | Emitted when the input has focus.      | `CustomEvent<void>`                   |
+| `ionInput`  | Emitted when a keyboard input ocurred. | `CustomEvent<KeyboardEvent>`          |
 
 
 ## Methods

core/src/components/item-options/readme.md

@@ -24,9 +24,9 @@ You can combine the `ionSwipe` event plus the `expandable` directive to create a
 
 ## Events
 
-| Event      | Description                                  | Detail |
-| ---------- | -------------------------------------------- | ------ |
-| `ionSwipe` | Emitted when the item has been fully swiped. | any    |
+| Event      | Description                                  | Type               |
+| ---------- | -------------------------------------------- | ------------------ |
+| `ionSwipe` | Emitted when the item has been fully swiped. | `CustomEvent<any>` |
 
 
 ----------------------------------------------

core/src/components/item-sliding/readme.md

@@ -83,9 +83,9 @@ Options can be expanded to take up the full width of the item if you swipe past
 
 ## Events
 
-| Event     | Description                                | Detail |
-| --------- | ------------------------------------------ | ------ |
-| `ionDrag` | Emitted when the sliding position changes. | void   |
+| Event     | Description                                | Type                |
+| --------- | ------------------------------------------ | ------------------- |
+| `ionDrag` | Emitted when the sliding position changes. | `CustomEvent<void>` |
 
 
 ## Methods

core/src/components/item/item.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Listen, Prop, State } from '@stencil/core';
 
-import { Color, CssClassMap, Mode, RouterDirection, StyleEvent } from '../../interface';
+import { Color, CssClassMap, Mode, RouterDirection, StyleEventDetail } from '../../interface';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 @Component({
@@ -76,7 +76,7 @@ export class Item implements ComponentInterface {
   @Prop() type: 'submit' | 'reset' | 'button' = 'button';
 
   @Listen('ionStyle')
-  itemStyle(ev: CustomEvent<StyleEvent>) {
+  itemStyle(ev: CustomEvent<StyleEventDetail>) {
     ev.stopPropagation();
 
     const tagName = (ev.target as HTMLElement).tagName;

core/src/components/label/label.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
-import { Color, Mode, StyleEvent } from '../../interface';
+import { Color, Mode, StyleEventDetail } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 @Component({
@@ -35,7 +35,7 @@ export class Label implements ComponentInterface {
    * Emitted when the styles change.
    * @internal
    */
-  @Event() ionStyle!: EventEmitter<StyleEvent>;
+  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
   @State() noAnimate = false;
 

core/src/components/loading/readme.md

@@ -105,14 +105,14 @@ async function presentLoadingWithOptions() {
 
 ## Events
 
-| Event                   | Description                               | Detail             |
-| ----------------------- | ----------------------------------------- | ------------------ |
-| `ionLoadingDidDismiss`  | Emitted after the loading has dismissed.  | OverlayEventDetail |
-| `ionLoadingDidLoad`     | Emitted after the loading has loaded.     | void               |
-| `ionLoadingDidPresent`  | Emitted after the loading has presented.  | void               |
-| `ionLoadingDidUnload`   | Emitted after the loading has unloaded.   | void               |
-| `ionLoadingWillDismiss` | Emitted before the loading has dismissed. | OverlayEventDetail |
-| `ionLoadingWillPresent` | Emitted before the loading has presented. | void               |
+| Event                   | Description                               | Type                              |
+| ----------------------- | ----------------------------------------- | --------------------------------- |
+| `ionLoadingDidDismiss`  | Emitted after the loading has dismissed.  | `CustomEvent<OverlayEventDetail>` |
+| `ionLoadingDidLoad`     | Emitted after the loading has loaded.     | `CustomEvent<void>`               |
+| `ionLoadingDidPresent`  | Emitted after the loading has presented.  | `CustomEvent<void>`               |
+| `ionLoadingDidUnload`   | Emitted after the loading has unloaded.   | `CustomEvent<void>`               |
+| `ionLoadingWillDismiss` | Emitted before the loading has dismissed. | `CustomEvent<OverlayEventDetail>` |
+| `ionLoadingWillPresent` | Emitted before the loading has presented. | `CustomEvent<void>`               |
 
 
 ## Methods

core/src/components/menu/menu-interface.ts

@@ -35,11 +35,6 @@ export interface MenuControllerI {
   getOpenSync(): HTMLIonMenuElement | undefined;
 }
 
-export interface MenuChangeEvent {
-  target: HTMLIonMenuElement;
-  detail: MenuChangeEventDetail;
-}
-
 export interface MenuChangeEventDetail {
   disabled: boolean;
   open: boolean;

core/src/components/menu/readme.md

@@ -219,12 +219,12 @@ function openCustom() {
 
 ## Events
 
-| Event          | Description                                  | Detail |
-| -------------- | -------------------------------------------- | ------ |
-| `ionDidClose`  | Emitted when the menu is closed.             | void   |
-| `ionDidOpen`   | Emitted when the menu is open.               | void   |
-| `ionWillClose` | Emitted when the menu is about to be closed. | void   |
-| `ionWillOpen`  | Emitted when the menu is about to be opened. | void   |
+| Event          | Description                                  | Type                |
+| -------------- | -------------------------------------------- | ------------------- |
+| `ionDidClose`  | Emitted when the menu is closed.             | `CustomEvent<void>` |
+| `ionDidOpen`   | Emitted when the menu is open.               | `CustomEvent<void>` |
+| `ionWillClose` | Emitted when the menu is about to be closed. | `CustomEvent<void>` |
+| `ionWillOpen`  | Emitted when the menu is about to be opened. | `CustomEvent<void>` |
 
 
 ## Methods

core/src/components/modal/readme.md

@@ -159,14 +159,14 @@ async function presentModal() {
 
 ## Events
 
-| Event                 | Description                             | Detail             |
-| --------------------- | --------------------------------------- | ------------------ |
-| `ionModalDidDismiss`  | Emitted after the modal has dismissed.  | OverlayEventDetail |
-| `ionModalDidLoad`     | Emitted after the modal has loaded.     | void               |
-| `ionModalDidPresent`  | Emitted after the modal has presented.  | void               |
-| `ionModalDidUnload`   | Emitted after the modal has unloaded.   | void               |
-| `ionModalWillDismiss` | Emitted before the modal has dismissed. | OverlayEventDetail |
-| `ionModalWillPresent` | Emitted before the modal has presented. | void               |
+| Event                 | Description                             | Type                              |
+| --------------------- | --------------------------------------- | --------------------------------- |
+| `ionModalDidDismiss`  | Emitted after the modal has dismissed.  | `CustomEvent<OverlayEventDetail>` |
+| `ionModalDidLoad`     | Emitted after the modal has loaded.     | `CustomEvent<void>`               |
+| `ionModalDidPresent`  | Emitted after the modal has presented.  | `CustomEvent<void>`               |
+| `ionModalDidUnload`   | Emitted after the modal has unloaded.   | `CustomEvent<void>`               |
+| `ionModalWillDismiss` | Emitted before the modal has dismissed. | `CustomEvent<OverlayEventDetail>` |
+| `ionModalWillPresent` | Emitted before the modal has presented. | `CustomEvent<void>`               |
 
 
 ## Methods

core/src/components/nav/readme.md

@@ -20,11 +20,11 @@ Unlike RouterOutlet, Nav is not tied to a particular router. Meaning that if we
 
 ## Events
 
-| Event              | Description                                     | Detail |
-| ------------------ | ----------------------------------------------- | ------ |
-| `ionNavDidChange`  | Event fired when the nav has changed components | void   |
-| `ionNavWillChange` | Event fired when the nav will components        | void   |
-| `ionNavWillLoad`   | Event fired when Nav will load a component      | void   |
+| Event              | Description                                     | Type                |
+| ------------------ | ----------------------------------------------- | ------------------- |
+| `ionNavDidChange`  | Event fired when the nav has changed components | `CustomEvent<void>` |
+| `ionNavWillChange` | Event fired when the nav will components        | `CustomEvent<void>` |
+| `ionNavWillLoad`   | Event fired when Nav will load a component      | `CustomEvent<void>` |
 
 
 ## Methods

core/src/components/picker/readme.md

@@ -26,14 +26,14 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
 
 ## Events
 
-| Event                  | Description                              | Detail             |
-| ---------------------- | ---------------------------------------- | ------------------ |
-| `ionPickerDidDismiss`  | Emitted after the picker has dismissed.  | OverlayEventDetail |
-| `ionPickerDidLoad`     | Emitted after the picker has loaded.     | void               |
-| `ionPickerDidPresent`  | Emitted after the picker has presented.  | void               |
-| `ionPickerDidUnload`   | Emitted after the picker has unloaded.   | void               |
-| `ionPickerWillDismiss` | Emitted before the picker has dismissed. | OverlayEventDetail |
-| `ionPickerWillPresent` | Emitted before the picker has presented. | void               |
+| Event                  | Description                              | Type                              |
+| ---------------------- | ---------------------------------------- | --------------------------------- |
+| `ionPickerDidDismiss`  | Emitted after the picker has dismissed.  | `CustomEvent<OverlayEventDetail>` |
+| `ionPickerDidLoad`     | Emitted after the picker has loaded.     | `CustomEvent<void>`               |
+| `ionPickerDidPresent`  | Emitted after the picker has presented.  | `CustomEvent<void>`               |
+| `ionPickerDidUnload`   | Emitted after the picker has unloaded.   | `CustomEvent<void>`               |
+| `ionPickerWillDismiss` | Emitted before the picker has dismissed. | `CustomEvent<OverlayEventDetail>` |
+| `ionPickerWillPresent` | Emitted before the picker has presented. | `CustomEvent<void>`               |
 
 
 ## Methods

core/src/components/popover/readme.md

@@ -81,14 +81,14 @@ async function presentPopover(ev) {
 
 ## Events
 
-| Event                   | Description                               | Detail             |
-| ----------------------- | ----------------------------------------- | ------------------ |
-| `ionPopoverDidDismiss`  | Emitted after the popover has dismissed.  | OverlayEventDetail |
-| `ionPopoverDidLoad`     | Emitted after the popover has loaded.     | void               |
-| `ionPopoverDidPresent`  | Emitted after the popover has presented.  | void               |
-| `ionPopoverDidUnload`   | Emitted after the popover has unloaded.   | void               |
-| `ionPopoverWillDismiss` | Emitted before the popover has dismissed. | OverlayEventDetail |
-| `ionPopoverWillPresent` | Emitted before the popover has presented. | void               |
+| Event                   | Description                               | Type                              |
+| ----------------------- | ----------------------------------------- | --------------------------------- |
+| `ionPopoverDidDismiss`  | Emitted after the popover has dismissed.  | `CustomEvent<OverlayEventDetail>` |
+| `ionPopoverDidLoad`     | Emitted after the popover has loaded.     | `CustomEvent<void>`               |
+| `ionPopoverDidPresent`  | Emitted after the popover has presented.  | `CustomEvent<void>`               |
+| `ionPopoverDidUnload`   | Emitted after the popover has unloaded.   | `CustomEvent<void>`               |
+| `ionPopoverWillDismiss` | Emitted before the popover has dismissed. | `CustomEvent<OverlayEventDetail>` |
+| `ionPopoverWillPresent` | Emitted before the popover has presented. | `CustomEvent<void>`               |
 
 
 ## Methods

core/src/components/radio-group/radio-group-interface.ts

@@ -0,0 +1,9 @@
+
+export interface RadioGroupChangeEventDetail {
+  value: any;
+}
+
+export interface RadioChangeEventDetail {
+  value: any;
+  checked: boolean;
+}

core/src/components/radio-group/radio-group.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
 
-import { InputChangeEvent } from '../../interface';
+import { RadioGroupChangeEventDetail } from '../../interface';
 
 @Component({
   tag: 'ion-radio-group'
@@ -37,7 +37,7 @@ export class RadioGroup implements ComponentInterface {
   /**
    * Emitted when the value has changed.
    */
-  @Event() ionChange!: EventEmitter<InputChangeEvent>;
+  @Event() ionChange!: EventEmitter<RadioGroupChangeEventDetail>;
 
   @Listen('ionRadioDidLoad')
   onRadioDidLoad(ev: Event) {

core/src/components/radio-group/readme.md

@@ -63,9 +63,9 @@ radio button within the same group.
 
 ## Events
 
-| Event       | Description                         | Detail           |
-| ----------- | ----------------------------------- | ---------------- |
-| `ionChange` | Emitted when the value has changed. | InputChangeEvent |
+| Event       | Description                         | Type                                       |
+| ----------- | ----------------------------------- | ------------------------------------------ |
+| `ionChange` | Emitted when the value has changed. | `CustomEvent<RadioGroupChangeEventDetail>` |
 
 
 ----------------------------------------------

core/src/components/radio/radio.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
-import { CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface';
+import { Color, Mode, RadioChangeEventDetail, StyleEventDetail } from '../../interface';
 import { findItemLabel } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
@@ -54,11 +54,13 @@ export class Radio implements ComponentInterface {
 
   /**
    * Emitted when the radio loads.
+   * @internal
    */
   @Event() ionRadioDidLoad!: EventEmitter<void>;
 
   /**
    * Emitted when the radio unloads.
+   * @internal
    */
   @Event() ionRadioDidUnload!: EventEmitter<void>;
 
@@ -66,12 +68,12 @@ export class Radio implements ComponentInterface {
    * Emitted when the styles change.
    * @internal
    */
-  @Event() ionStyle!: EventEmitter<StyleEvent>;
+  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
   /**
    * Emitted when the radio button is selected.
    */
-  @Event() ionSelect!: EventEmitter<CheckedInputChangeEvent>;
+  @Event() ionSelect!: EventEmitter<RadioChangeEventDetail>;
 
   /**
    * Emitted when the radio button has focus.

core/src/components/radio/readme.md

@@ -55,13 +55,11 @@ An `ion-radio-group` can be used to group a set of radios. When radios are insid
 
 ## Events
 
-| Event               | Description                                | Detail                  |
-| ------------------- | ------------------------------------------ | ----------------------- |
-| `ionBlur`           | Emitted when the radio button loses focus. | void                    |
-| `ionFocus`          | Emitted when the radio button has focus.   | void                    |
-| `ionRadioDidLoad`   | Emitted when the radio loads.              | void                    |
-| `ionRadioDidUnload` | Emitted when the radio unloads.            | void                    |
-| `ionSelect`         | Emitted when the radio button is selected. | CheckedInputChangeEvent |
+| Event       | Description                                | Type                                  |
+| ----------- | ------------------------------------------ | ------------------------------------- |
+| `ionBlur`   | Emitted when the radio button loses focus. | `CustomEvent<void>`                   |
+| `ionFocus`  | Emitted when the radio button has focus.   | `CustomEvent<void>`                   |
+| `ionSelect` | Emitted when the radio button is selected. | `CustomEvent<RadioChangeEventDetail>` |
 
 
 ## CSS Custom Properties

core/src/components/range/range-interface.ts

@@ -1,8 +1,7 @@
-export type Knob = 'A' | 'B' | undefined;
+export type KnobName = 'A' | 'B' | undefined;
 
 export type RangeValue = number | {lower: number, upper: number};
 
-export interface RangeEventDetail extends Event {
-  isIncrease: boolean;
-  knob: Knob;
+export interface RangeChangeEventDetail {
+  value: RangeValue;
 }

core/src/components/range/range.tsx

@@ -1,11 +1,9 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, QueueApi, State, Watch } from '@stencil/core';
 
-import { Color, Gesture, GestureDetail, InputChangeEvent, Mode, RangeValue, StyleEvent } from '../../interface';
+import { Color, Gesture, GestureDetail, KnobName, Mode, RangeChangeEventDetail, RangeValue, StyleEventDetail } from '../../interface';
 import { clamp, debounceEvent } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
-import { Knob, RangeEventDetail } from './range-interface';
-
 @Component({
   tag: 'ion-range',
   styleUrls: {
@@ -28,7 +26,7 @@ export class Range implements ComponentInterface {
 
   @State() private ratioA = 0;
   @State() private ratioB = 0;
-  @State() private pressedKnob: Knob;
+  @State() private pressedKnob: KnobName;
 
   /**
    * The color to use from your application's color palette.
@@ -129,13 +127,13 @@ export class Range implements ComponentInterface {
   /**
    * Emitted when the value property has changed.
    */
-  @Event() ionChange!: EventEmitter<InputChangeEvent>;
+  @Event() ionChange!: EventEmitter<RangeChangeEventDetail>;
 
   /**
    * Emitted when the styles change.
    * @internal
    */
-  @Event() ionStyle!: EventEmitter<StyleEvent>;
+  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
   /**
    * Emitted when the range has focus.
@@ -167,23 +165,6 @@ export class Range implements ComponentInterface {
     this.gesture.setDisabled(this.disabled);
   }
 
-  @Listen('ionIncrease')
-  @Listen('ionDecrease')
-  keyChng(ev: CustomEvent<RangeEventDetail>) {
-    let step = this.step;
-    step = step > 0 ? step : 1;
-    step = step / (this.max - this.min);
-    if (!ev.detail.isIncrease) {
-      step *= -1;
-    }
-    if (ev.detail.knob === 'A') {
-      this.ratioA += step;
-    } else {
-      this.ratioB += step;
-    }
-    this.updateValue();
-  }
-
   private handleKeyboard(knob: string, isIncrease: boolean) {
     let step = this.step;
     step = step > 0 ? step : 1;

core/src/components/range/readme.md

@@ -104,11 +104,11 @@ left or right of the range.
 
 ## Events
 
-| Event       | Description                                  | Detail           |
-| ----------- | -------------------------------------------- | ---------------- |
-| `ionBlur`   | Emitted when the range loses focus.          | void             |
-| `ionChange` | Emitted when the value property has changed. | InputChangeEvent |
-| `ionFocus`  | Emitted when the range has focus.            | void             |
+| Event       | Description                                  | Type                                  |
+| ----------- | -------------------------------------------- | ------------------------------------- |
+| `ionBlur`   | Emitted when the range loses focus.          | `CustomEvent<void>`                   |
+| `ionChange` | Emitted when the value property has changed. | `CustomEvent<RangeChangeEventDetail>` |
+| `ionFocus`  | Emitted when the range has focus.            | `CustomEvent<void>`                   |
 
 
 ## CSS Custom Properties

core/src/components/refresher/readme.md

@@ -99,11 +99,11 @@ export class RefresherExample {
 
 ## Events
 
-| Event        | Description                                                                                                                                                                                                                                                                  | Detail               |
-| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
-| `ionPull`    | Emitted while the user is pulling down the content and exposing the refresher.                                                                                                                                                                                               | void                 |
-| `ionRefresh` | Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed. | RefresherEventDetail |
-| `ionStart`   | Emitted when the user begins to start pulling down.                                                                                                                                                                                                                          | void                 |
+| Event        | Description                                                                                                                                                                                                                                                                  | Type                                |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
+| `ionPull`    | Emitted while the user is pulling down the content and exposing the refresher.                                                                                                                                                                                               | `CustomEvent<void>`                 |
+| `ionRefresh` | Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed. | `CustomEvent<RefresherEventDetail>` |
+| `ionStart`   | Emitted when the user begins to start pulling down.                                                                                                                                                                                                                          | `CustomEvent<void>`                 |
 
 
 ## Methods

core/src/components/reorder-group/readme.md

@@ -178,9 +178,9 @@ reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
 
 ## Events
 
-| Event            | Description                                                                                                                                                                                          | Detail            |
-| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
-| `ionItemReorder` | Event that needs to be listen to in order to respond to reorder action. `ion-reorder-group` uses this event to delegate to the user the reordering of data array.   The complete() method exposed as | ItemReorderDetail |
+| Event            | Description                                                                                                                                                                                          | Type                                  |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
+| `ionItemReorder` | Event that needs to be listen to in order to respond to reorder action. `ion-reorder-group` uses this event to delegate to the user the reordering of data array.   The complete() method exposed as | `CustomEvent<ItemReorderEventDetail>` |
 
 
 ## Methods

core/src/components/reorder-group/reorder-group-interface.ts

@@ -1,5 +1,5 @@
 
-export interface ItemReorderDetail {
+export interface ItemReorderEventDetail {
   from: number;
   to: number;
   complete: (data?: boolean | any[]) => any;

core/src/components/reorder-group/reorder-group.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
 
-import { Gesture, GestureDetail, ItemReorderDetail } from '../../interface';
+import { Gesture, GestureDetail, ItemReorderEventDetail } from '../../interface';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/haptic';
 
 const enum ReordeGroupState {
@@ -56,7 +56,7 @@ export class ReorderGroup implements ComponentInterface {
    *
    * The complete() method exposed as
    */
-  @Event() ionItemReorder!: EventEmitter<ItemReorderDetail>;
+  @Event() ionItemReorder!: EventEmitter<ItemReorderEventDetail>;
 
   async componentDidLoad() {
     const contentEl = this.el.closest('ion-content');

core/src/components/route-redirect/readme.md

@@ -79,9 +79,9 @@ Another approach is to modify the value of `to`, since given `to` the value of `
 
 ## Events
 
-| Event                     | Description                                                                                                                                                                                                               | Detail |
-| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
-| `ionRouteRedirectChanged` | Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes.  `ion-router` captures this event in order to update his internal registry of router rules. | void   |
+| Event                     | Description                                                                                                                                                                                                               | Type                |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
+| `ionRouteRedirectChanged` | Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes.  `ion-router` captures this event in order to update his internal registry of router rules. | `CustomEvent<void>` |
 
 
 ----------------------------------------------

core/src/components/route/readme.md

@@ -18,9 +18,9 @@ Router is a component that can take a component, and render it when the Browser
 
 ## Events
 
-| Event                 | Description                                                         | Detail |
-| --------------------- | ------------------------------------------------------------------- | ------ |
-| `ionRouteDataChanged` | Used internally by `ion-router` to know when this route did change. | any    |
+| Event                 | Description                                                         | Type               |
+| --------------------- | ------------------------------------------------------------------- | ------------------ |
+| `ionRouteDataChanged` | Used internally by `ion-router` to know when this route did change. | `CustomEvent<any>` |
 
 
 ----------------------------------------------

core/src/components/router/readme.md

@@ -61,10 +61,10 @@ If you're using Angular, please see [ion-router-outlet](../router-outlet) instea
 
 ## Events
 
-| Event                | Description                                     | Detail            |
-| -------------------- | ----------------------------------------------- | ----------------- |
-| `ionRouteDidChange`  | Emitted when the route had changed              | RouterEventDetail |
-| `ionRouteWillChange` | Event emitted when the route is about to change | RouterEventDetail |
+| Event                | Description                                     | Type                             |
+| -------------------- | ----------------------------------------------- | -------------------------------- |
+| `ionRouteDidChange`  | Emitted when the route had changed              | `CustomEvent<RouterEventDetail>` |
+| `ionRouteWillChange` | Event emitted when the route is about to change | `CustomEvent<RouterEventDetail>` |
 
 
 ## Methods

core/src/components/searchbar/readme.md

@@ -103,14 +103,14 @@ A Searchbar should be used instead of an input to search lists. A clear button i
 
 ## Events
 
-| Event       | Description                                     | Detail               |
-| ----------- | ----------------------------------------------- | -------------------- |
-| `ionBlur`   | Emitted when the input loses focus.             | void                 |
-| `ionCancel` | Emitted when the cancel button is clicked.      | void                 |
-| `ionChange` | Emitted when the value has changed.             | TextInputChangeEvent |
-| `ionClear`  | Emitted when the clear input button is clicked. | void                 |
-| `ionFocus`  | Emitted when the input has focus.               | void                 |
-| `ionInput`  | Emitted when a keyboard input ocurred.          | KeyboardEvent        |
+| Event       | Description                                     | Type                                      |
+| ----------- | ----------------------------------------------- | ----------------------------------------- |
+| `ionBlur`   | Emitted when the input loses focus.             | `CustomEvent<void>`                       |
+| `ionCancel` | Emitted when the cancel button is clicked.      | `CustomEvent<void>`                       |
+| `ionChange` | Emitted when the value has changed.             | `CustomEvent<SearchbarChangeEventDetail>` |
+| `ionClear`  | Emitted when the clear input button is clicked. | `CustomEvent<void>`                       |
+| `ionFocus`  | Emitted when the input has focus.               | `CustomEvent<void>`                       |
+| `ionInput`  | Emitted when a keyboard input ocurred.          | `CustomEvent<KeyboardEvent>`              |
 
 
 ## Methods

core/src/components/searchbar/searchbar-interface.ts

@@ -0,0 +1,4 @@
+
+export interface SearchbarChangeEventDetail {
+  value: string | undefined;
+}

core/src/components/searchbar/searchbar.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
-import { Color, Config, Mode, TextInputChangeEvent } from '../../interface';
+import { Color, Config, Mode, SearchbarChangeEventDetail } from '../../interface';
 import { debounceEvent } from '../../utils/helpers';
 import { createColorClasses } from '../../utils/theme';
 
@@ -116,7 +116,7 @@ export class Searchbar implements ComponentInterface {
   /**
    * Emitted when the value has changed.
    */
-  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
+  @Event() ionChange!: EventEmitter<SearchbarChangeEventDetail>;
 
   /**
    * Emitted when the cancel button is clicked.

core/src/components/segment-button/readme.md

@@ -329,9 +329,9 @@ for (let i = 0; i < segmentButtons.length; i++) {
 
 ## Events
 
-| Event       | Description                                 | Detail |
-| ----------- | ------------------------------------------- | ------ |
-| `ionSelect` | Emitted when the segment button is clicked. | void   |
+| Event       | Description                                 | Type                |
+| ----------- | ------------------------------------------- | ------------------- |
+| `ionSelect` | Emitted when the segment button is clicked. | `CustomEvent<void>` |
 
 
 ## CSS Custom Properties

core/src/components/segment/readme.md

@@ -219,10 +219,10 @@ for (let i = 0; i < segments.length; i++) {
 
 ## Events
 
-| Event       | Description                                  | Detail               |
-| ----------- | -------------------------------------------- | -------------------- |
-| `ionChange` | Emitted when the value property has changed. | TextInputChangeEvent |
-| `ionStyle`  | Emitted when the styles change.              | StyleEvent           |
+| Event       | Description                                  | Type                                    |
+| ----------- | -------------------------------------------- | --------------------------------------- |
+| `ionChange` | Emitted when the value property has changed. | `CustomEvent<SegmentChangeEventDetail>` |
+| `ionStyle`  | Emitted when the styles change.              | `CustomEvent<StyleEventDetail>`         |
 
 
 ----------------------------------------------

core/src/components/segment/segment-interface.ts

@@ -1 +1,6 @@
+
 export type SegmentButtonLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
+
+export interface SegmentChangeEventDetail {
+  value: string | undefined;
+}

core/src/components/segment/segment.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
 
-import { Color, Mode, StyleEvent, TextInputChangeEvent } from '../../interface';
+import { Color, Mode, SegmentChangeEventDetail, StyleEventDetail } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 @Component({
@@ -51,12 +51,12 @@ export class Segment implements ComponentInterface {
   /**
    * Emitted when the value property has changed.
    */
-  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
+  @Event() ionChange!: EventEmitter<SegmentChangeEventDetail>;
 
   /**
    * Emitted when the styles change.
    */
-  @Event() ionStyle!: EventEmitter<StyleEvent>;
+  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
   @Listen('ionSelect')
   segmentClick(ev: CustomEvent) {

core/src/components/select/readme.md

@@ -336,12 +336,12 @@ customActionSheetSelect.interfaceOptions = customActionSheetOptions;
 
 ## Events
 
-| Event       | Description                              | Detail                 |
-| ----------- | ---------------------------------------- | ---------------------- |
-| `ionBlur`   | Emitted when the select loses focus.     | void                   |
-| `ionCancel` | Emitted when the selection is cancelled. | void                   |
-| `ionChange` | Emitted when the value has changed.      | SelectInputChangeEvent |
-| `ionFocus`  | Emitted when the select has focus.       | void                   |
+| Event       | Description                              | Type                                   |
+| ----------- | ---------------------------------------- | -------------------------------------- |
+| `ionBlur`   | Emitted when the select loses focus.     | `CustomEvent<void>`                    |
+| `ionCancel` | Emitted when the selection is cancelled. | `CustomEvent<void>`                    |
+| `ionChange` | Emitted when the value has changed.      | `CustomEvent<SelectChangeEventDetail>` |
+| `ionFocus`  | Emitted when the select has focus.       | `CustomEvent<void>`                    |
 
 
 ## Methods

core/src/components/select/select-interface.ts

@@ -1 +1,5 @@
 export type SelectInterface = 'action-sheet' | 'popover' | 'alert';
+
+export interface SelectChangeEventDetail {
+  value: any | any[] | undefined | null;
+}

core/src/components/select/select.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch } from '@stencil/core';
 
-import { ActionSheetButton, ActionSheetOptions, AlertOptions, CssClassMap, Mode, OverlaySelect, PopoverOptions, SelectInputChangeEvent, SelectInterface, SelectPopoverOption, StyleEvent } from '../../interface';
+import { ActionSheetButton, ActionSheetOptions, AlertOptions, CssClassMap, Mode, OverlaySelect, PopoverOptions, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, StyleEventDetail } from '../../interface';
 import { findItemLabel, renderHiddenInput } from '../../utils/helpers';
 import { hostContext } from '../../utils/theme';
 
@@ -90,7 +90,7 @@ export class Select implements ComponentInterface {
   /**
    * Emitted when the value has changed.
    */
-  @Event() ionChange!: EventEmitter<SelectInputChangeEvent>;
+  @Event() ionChange!: EventEmitter<SelectChangeEventDetail>;
 
   /**
    * Emitted when the selection is cancelled.
@@ -111,7 +111,7 @@ export class Select implements ComponentInterface {
    * Emitted when the styles change.
    * @internal
    */
-  @Event() ionStyle!: EventEmitter<StyleEvent>;
+  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
   @Watch('disabled')
   disabledChanged() {

core/src/components/slides/readme.md

@@ -91,24 +91,24 @@ slides.options = {
 
 ## Events
 
-| Event                     | Description                                                 | Detail |
-| ------------------------- | ----------------------------------------------------------- | ------ |
-| `ionSlideDidChange`       | Emitted after the active slide has changed.                 | void   |
-| `ionSlideDoubleTap`       | Emitted when the user double taps on the slide's container. | void   |
-| `ionSlideDrag`            | Emitted when the slider is actively being moved.            | void   |
-| `ionSlideNextEnd`         | Emitted when the next slide has ended.                      | void   |
-| `ionSlideNextStart`       | Emitted when the next slide has started.                    | void   |
-| `ionSlidePrevEnd`         | Emitted when the previous slide has ended.                  | void   |
-| `ionSlidePrevStart`       | Emitted when the previous slide has started.                | void   |
-| `ionSlideReachEnd`        | Emitted when the slider is at the last slide.               | void   |
-| `ionSlideReachStart`      | Emitted when the slider is at its initial position.         | void   |
-| `ionSlidesDidLoad`        | Emitted after Swiper initialization                         | void   |
-| `ionSlideTap`             | Emitted when the user taps/clicks on the slide's container. | void   |
-| `ionSlideTouchEnd`        | Emitted when the user releases the touch.                   | void   |
-| `ionSlideTouchStart`      | Emitted when the user first touches the slider.             | void   |
-| `ionSlideTransitionEnd`   | Emitted when the slide transition has ended.                | void   |
-| `ionSlideTransitionStart` | Emitted when the slide transition has started.              | void   |
-| `ionSlideWillChange`      | Emitted before the active slide has changed.                | void   |
+| Event                     | Description                                                 | Type                |
+| ------------------------- | ----------------------------------------------------------- | ------------------- |
+| `ionSlideDidChange`       | Emitted after the active slide has changed.                 | `CustomEvent<void>` |
+| `ionSlideDoubleTap`       | Emitted when the user double taps on the slide's container. | `CustomEvent<void>` |
+| `ionSlideDrag`            | Emitted when the slider is actively being moved.            | `CustomEvent<void>` |
+| `ionSlideNextEnd`         | Emitted when the next slide has ended.                      | `CustomEvent<void>` |
+| `ionSlideNextStart`       | Emitted when the next slide has started.                    | `CustomEvent<void>` |
+| `ionSlidePrevEnd`         | Emitted when the previous slide has ended.                  | `CustomEvent<void>` |
+| `ionSlidePrevStart`       | Emitted when the previous slide has started.                | `CustomEvent<void>` |
+| `ionSlideReachEnd`        | Emitted when the slider is at the last slide.               | `CustomEvent<void>` |
+| `ionSlideReachStart`      | Emitted when the slider is at its initial position.         | `CustomEvent<void>` |
+| `ionSlidesDidLoad`        | Emitted after Swiper initialization                         | `CustomEvent<void>` |
+| `ionSlideTap`             | Emitted when the user taps/clicks on the slide's container. | `CustomEvent<void>` |
+| `ionSlideTouchEnd`        | Emitted when the user releases the touch.                   | `CustomEvent<void>` |
+| `ionSlideTouchStart`      | Emitted when the user first touches the slider.             | `CustomEvent<void>` |
+| `ionSlideTransitionEnd`   | Emitted when the slide transition has ended.                | `CustomEvent<void>` |
+| `ionSlideTransitionStart` | Emitted when the slide transition has started.              | `CustomEvent<void>` |
+| `ionSlideWillChange`      | Emitted before the active slide has changed.                | `CustomEvent<void>` |
 
 
 ## Methods

core/src/components/split-pane/readme.md

@@ -94,10 +94,10 @@ SplitPane also provides some predefined media queries that can be used.
 
 ## Events
 
-| Event                 | Description                                                        | Detail             |
-| --------------------- | ------------------------------------------------------------------ | ------------------ |
-| `ionChange`           | Emitted when the split pane is visible.                            | {visible: boolean} |
-| `ionSplitPaneVisible` | Expression to be called when the split-pane visibility has changed | void               |
+| Event                 | Description                                                        | Type                              |
+| --------------------- | ------------------------------------------------------------------ | --------------------------------- |
+| `ionChange`           | Emitted when the split pane is visible.                            | `CustomEvent<{visible: boolean}>` |
+| `ionSplitPaneVisible` | Expression to be called when the split-pane visibility has changed | `CustomEvent<void>`               |
 
 
 ## CSS Custom Properties

core/src/components/tab-bar/tab-bar-interface.ts

@@ -1,10 +1,10 @@
 export type TabButtonLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
 
-export interface TabBarChangedDetail {
+export interface TabBarChangedEventDetail {
   tab?: string;
 }
 
-export interface TabButtonClickDetail {
+export interface TabButtonClickEventDetail {
   tab: string;
   selected: boolean;
   href?: string;

core/src/components/tab-bar/tab-bar.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
 
-import { Color, Mode, TabBarChangedDetail } from '../../interface';
+import { Color, Mode, TabBarChangedEventDetail } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 @Component({
@@ -49,7 +49,7 @@ export class TabBar implements ComponentInterface {
   @Prop() translucent = false;
 
   /** @internal */
-  @Event() ionTabBarChanged!: EventEmitter<TabBarChangedDetail>;
+  @Event() ionTabBarChanged!: EventEmitter<TabBarChangedEventDetail>;
 
   @Listen('window:keyboardWillHide')
   protected onKeyboardWillHide() {

core/src/components/tab-button/tab-button.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State } from '@stencil/core';
 
-import { Config, Mode, TabBarChangedDetail, TabButtonClickDetail, TabButtonLayout } from '../../interface';
+import { Config, Mode, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from '../../interface';
 
 @Component({
   tag: 'ion-tab-button',
@@ -54,10 +54,10 @@ export class TabButton implements ComponentInterface {
    * Emitted when the tab bar is clicked
    * @internal
    */
-  @Event() ionTabButtonClick!: EventEmitter<TabButtonClickDetail>;
+  @Event() ionTabButtonClick!: EventEmitter<TabButtonClickEventDetail>;
 
   @Listen('parent:ionTabBarChanged')
-  onTabBarChanged(ev: CustomEvent<TabBarChangedDetail>) {
+  onTabBarChanged(ev: CustomEvent<TabBarChangedEventDetail>) {
     this.selected = this.tab === ev.detail.tab;
   }
 

core/src/components/tabs/readme.md

@@ -166,12 +166,12 @@ Using tabs with Angular's router is fairly straight forward. Here you only need
 
 ## Events
 
-| Event              | Description                                                                | Detail                   |
-| ------------------ | -------------------------------------------------------------------------- | ------------------------ |
-| `ionChange`        | Emitted when the tab changes.                                              | {tab: HTMLIonTabElement} |
-| `ionNavDidChange`  | Emitted when the navigation has finished transitioning to a new component. | void                     |
-| `ionNavWillChange` | Emitted when the navigation is about to transition to a new component.     | void                     |
-| `ionNavWillLoad`   | Emitted when the navigation will load a component.                         | void                     |
+| Event              | Description                                                                | Type                                    |
+| ------------------ | -------------------------------------------------------------------------- | --------------------------------------- |
+| `ionChange`        | Emitted when the tab changes.                                              | `CustomEvent<{tab: HTMLIonTabElement}>` |
+| `ionNavDidChange`  | Emitted when the navigation has finished transitioning to a new component. | `CustomEvent<void>`                     |
+| `ionNavWillChange` | Emitted when the navigation is about to transition to a new component.     | `CustomEvent<void>`                     |
+| `ionNavWillLoad`   | Emitted when the navigation will load a component.                         | `CustomEvent<void>`                     |
 
 
 ## Methods

core/src/components/tabs/tabs.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
 
-import { Config, NavOutlet, RouteID, RouteWrite, TabButtonClickDetail } from '../../interface';
+import { Config, NavOutlet, RouteID, RouteWrite, TabButtonClickEventDetail } from '../../interface';
 
 @Component({
   tag: 'ion-tabs',
@@ -70,7 +70,7 @@ export class Tabs implements NavOutlet {
   }
 
   @Listen('ionTabButtonClick')
-  protected onTabClicked(ev: CustomEvent<TabButtonClickDetail>) {
+  protected onTabClicked(ev: CustomEvent<TabButtonClickEventDetail>) {
     const { href, tab } = ev.detail;
     const selectedTab = this.tabs.find(t => t.tab === tab);
     if (this.useRouter && href !== undefined) {

core/src/components/textarea/readme.md

@@ -122,12 +122,12 @@ The textarea component accepts the [native textarea attributes](https://develope
 
 ## Events
 
-| Event       | Description                               | Detail               |
-| ----------- | ----------------------------------------- | -------------------- |
-| `ionBlur`   | Emitted when the input loses focus.       | void                 |
-| `ionChange` | Emitted when the input value has changed. | TextInputChangeEvent |
-| `ionFocus`  | Emitted when the input has focus.         | void                 |
-| `ionInput`  | Emitted when a keyboard input ocurred.    | KeyboardEvent        |
+| Event       | Description                               | Type                                     |
+| ----------- | ----------------------------------------- | ---------------------------------------- |
+| `ionBlur`   | Emitted when the input loses focus.       | `CustomEvent<void>`                      |
+| `ionChange` | Emitted when the input value has changed. | `CustomEvent<TextareaChangeEventDetail>` |
+| `ionFocus`  | Emitted when the input has focus.         | `CustomEvent<void>`                      |
+| `ionInput`  | Emitted when a keyboard input ocurred.    | `CustomEvent<KeyboardEvent>`             |
 
 
 ## Methods

core/src/components/textarea/textarea-interface.ts

@@ -0,0 +1,4 @@
+
+export interface TextareaChangeEventDetail {
+  value: string | undefined | null;
+}

core/src/components/textarea/textarea.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
-import { Color, Mode, StyleEvent, TextInputChangeEvent } from '../../interface';
+import { Color, Mode, StyleEventDetail, TextareaChangeEventDetail } from '../../interface';
 import { debounceEvent, findItemLabel, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses } from '../../utils/theme';
 
@@ -140,7 +140,7 @@ export class Textarea implements ComponentInterface {
   /**
    * Emitted when the input value has changed.
    */
-  @Event() ionChange!: EventEmitter<TextInputChangeEvent>;
+  @Event() ionChange!: EventEmitter<TextareaChangeEventDetail>;
 
   /**
    * Emitted when a keyboard input ocurred.
@@ -151,7 +151,7 @@ export class Textarea implements ComponentInterface {
    * Emitted when the styles change.
    * @internal
    */
-  @Event() ionStyle!: EventEmitter<StyleEvent>;
+  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
   /**
    * Emitted when the input loses focus.

core/src/components/toast/readme.md

@@ -108,14 +108,14 @@ async function presentToastWithOptions() {
 
 ## Events
 
-| Event                 | Description                             | Detail             |
-| --------------------- | --------------------------------------- | ------------------ |
-| `ionToastDidDismiss`  | Emitted after the toast has dismissed.  | OverlayEventDetail |
-| `ionToastDidLoad`     | Emitted after the toast has loaded.     | void               |
-| `ionToastDidPresent`  | Emitted after the toast has presented.  | void               |
-| `ionToastDidUnload`   | Emitted after the toast has unloaded.   | void               |
-| `ionToastWillDismiss` | Emitted before the toast has dismissed. | OverlayEventDetail |
-| `ionToastWillPresent` | Emitted before the toast has presented. | void               |
+| Event                 | Description                             | Type                              |
+| --------------------- | --------------------------------------- | --------------------------------- |
+| `ionToastDidDismiss`  | Emitted after the toast has dismissed.  | `CustomEvent<OverlayEventDetail>` |
+| `ionToastDidLoad`     | Emitted after the toast has loaded.     | `CustomEvent<void>`               |
+| `ionToastDidPresent`  | Emitted after the toast has presented.  | `CustomEvent<void>`               |
+| `ionToastDidUnload`   | Emitted after the toast has unloaded.   | `CustomEvent<void>`               |
+| `ionToastWillDismiss` | Emitted before the toast has dismissed. | `CustomEvent<OverlayEventDetail>` |
+| `ionToastWillPresent` | Emitted before the toast has presented. | `CustomEvent<void>`               |
 
 
 ## Methods

core/src/components/toggle/readme.md

@@ -102,11 +102,11 @@ Toggles change the state of a single option. Toggles can be switched on or off b
 
 ## Events
 
-| Event       | Description                                  | Detail                  |
-| ----------- | -------------------------------------------- | ----------------------- |
-| `ionBlur`   | Emitted when the toggle loses focus.         | void                    |
-| `ionChange` | Emitted when the value property has changed. | CheckedInputChangeEvent |
-| `ionFocus`  | Emitted when the toggle has focus.           | void                    |
+| Event       | Description                                  | Type                                   |
+| ----------- | -------------------------------------------- | -------------------------------------- |
+| `ionBlur`   | Emitted when the toggle loses focus.         | `CustomEvent<void>`                    |
+| `ionChange` | Emitted when the value property has changed. | `CustomEvent<ToggleChangeEventDetail>` |
+| `ionFocus`  | Emitted when the toggle has focus.           | `CustomEvent<void>`                    |
 
 
 ## CSS Custom Properties

core/src/components/toggle/toggle-interface.ts

@@ -0,0 +1,5 @@
+
+export interface ToggleChangeEventDetail {
+  value: any;
+  checked: boolean;
+}

core/src/components/toggle/toggle.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
 
-import { CheckedInputChangeEvent, Color, Gesture, GestureDetail, Mode, StyleEvent } from '../../interface';
+import { Color, Gesture, GestureDetail, Mode, StyleEventDetail, ToggleChangeEventDetail } from '../../interface';
 import { hapticSelection } from '../../utils/haptic';
 import { findItemLabel, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
@@ -65,7 +65,7 @@ export class Toggle implements ComponentInterface {
   /**
    * Emitted when the value property has changed.
    */
-  @Event() ionChange!: EventEmitter<CheckedInputChangeEvent>;
+  @Event() ionChange!: EventEmitter<ToggleChangeEventDetail>;
 
   /**
    * Emitted when the toggle has focus.
@@ -81,7 +81,7 @@ export class Toggle implements ComponentInterface {
    * Emitted when the styles change.
    * @internal
    */
-  @Event() ionStyle!: EventEmitter<StyleEvent>;
+  @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
   @Watch('checked')
   checkedChanged(isChecked: boolean) {

core/src/components/toolbar/toolbar.tsx

@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';
 
-import { Color, Config, CssClassMap, Mode, StyleEvent } from '../../interface';
+import { Color, Config, CssClassMap, Mode, StyleEventDetail } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 @Component({
@@ -31,7 +31,7 @@ export class Toolbar implements ComponentInterface {
   @Prop() mode!: Mode;
 
   @Listen('ionStyle')
-  childrenStyle(ev: CustomEvent<StyleEvent>) {
+  childrenStyle(ev: CustomEvent<StyleEventDetail>) {
     ev.stopPropagation();
 
     const tagName = (ev.target as HTMLElement).tagName;

core/src/interface.d.ts

@@ -4,36 +4,38 @@ export * from './index';
 export * from './components/alert/alert-interface';
 export * from './components/action-sheet/action-sheet-interface';
 export * from './components/content/content-interface';
+export * from './components/checkbox/checkbox-interface';
 export * from './components/datetime/datetime-interface';
+export * from './components/input/input-interface';
 export * from './components/loading/loading-interface';
 export * from './components/menu/menu-interface';
 export * from './components/modal/modal-interface';
 export * from './components/nav/nav-interface';
 export * from './components/picker/picker-interface';
 export * from './components/popover/popover-interface';
+export * from './components/radio-group/radio-group-interface';
 export * from './components/range/range-interface';
 export * from './components/router/utils/interface';
 export * from './components/refresher/refresher-interface';
 export * from './components/reorder-group/reorder-group-interface';
-export * from './components/segment-button/segment-button-interface';
+export * from './components/searchbar/searchbar-interface';
+export * from './components/segment/segment-interface';
 export * from './components/select/select-interface';
 export * from './components/select-popover/select-popover-interface';
 export * from './components/spinner/spinner-interface';
 export * from './components/tab-bar/tab-bar-interface';
+export * from './components/textarea/textarea-interface';
 export * from './components/toast/toast-interface';
+export * from './components/toggle/toggle-interface';
 export * from './components/virtual-scroll/virtual-scroll-interface';
 
-// TODO: review how this types are exported
-// Other types
-
-export { Gesture, GestureDetail } from './utils/gesture';
-
-export * from './utils/input-interface';
+// Types from utils
 export * from './utils/animation/animation-interface';
 export * from './utils/overlays-interface';
 export * from './global/config';
+export { Gesture, GestureDetail } from './utils/gesture';
 
-// Global types
+// Global aux types
 export type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time';
 export type Side = 'start' | 'end';
 export type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';
@@ -43,17 +45,21 @@ export type ComponentTags = keyof StencilIntrinsicElements;
 export type ComponentRef = Function | HTMLElement | string | null;
 export type ComponentProps<T = null> = T extends ComponentTags ? StencilIntrinsicElements[T] : {[key: string]: any};
 export type CssClassMap = { [className: string]: boolean };
-export interface BackButtonDetail {
-  register(priority: number, handler: () => Promise<any> | void): void;
-}
-
-export type BackButtonEvent = CustomEvent<BackButtonDetail>;
+export type BackButtonEvent = CustomEvent<BackButtonEventDetail>;
 
 export interface FrameworkDelegate {
   attachViewToDom(container: any, component: any, propsOrDataObj?: any, cssClasses?: string[]): Promise<HTMLElement>;
   removeViewFromDom(container: any, component: any): Promise<void>;
 }
 
+export interface BackButtonEventDetail {
+  register(priority: number, handler: () => Promise<any> | void): void;
+}
+
+export interface StyleEventDetail {
+  [styleName: string]: boolean;
+}
+
 declare global {
   interface StencilGlobalHTMLAttributes {
     // for ion-menu and ion-split-pane

core/src/utils/input-interface.ts

@@ -1,19 +0,0 @@
-export interface TextInputChangeEvent {
-  value: string | undefined | null;
-}
-
-export interface CheckedInputChangeEvent extends TextInputChangeEvent {
-  checked: boolean;
-}
-
-export interface InputChangeEvent {
-  value: any;
-}
-
-export interface SelectInputChangeEvent {
-  value: any | any[] | undefined | null;
-}
-
-export interface StyleEvent {
-  [styleName: string]: boolean;
-}