docs(): updates

core/src/components/animation-controller/animation-controller.tsx

@@ -3,6 +3,7 @@ import { Animation, AnimationBuilder, AnimationController } from '../../interfac
 import { Animator } from './animator';
 
 
+/** @hidden */
 @Component({
   tag: 'ion-animation-controller'
 })

core/src/components/card-header/readme.md

@@ -2,6 +2,7 @@
 
 `ion-card-header` is a header component for `ion-card`.
 
+
 <!-- Auto Generated Below -->
 
 

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

@@ -1,6 +1,6 @@
 # ion-chip-button
 
-A chip-button is an inset button that is placed inside of a chip.
+A ChipButton is an inset button that is placed inside of a Chip. For more information, see the [Chip Docs](../chip)
 
 <!-- Auto Generated Below -->
 

core/src/components/gesture-controller/readme.md

@@ -1,6 +1,7 @@
 # ion-gesture-controller
-Gesture controller is a component for creating a gesture interactions.
 
+Gesture controller is a component for creating a gesture interactions.
+It is not meant to be used directly, but with the [Gesture Component](../gesture)
 
 <!-- Auto Generated Below -->
 

core/src/components/gesture/gesture.tsx

@@ -1,18 +1,5 @@
-import {
-  Component,
-  EventListenerEnable,
-  Listen,
-  Prop,
-  Watch
-} from '@stencil/core';
-import {
-  BlockerConfig,
-  BlockerDelegate,
-  GestureCallback,
-  GestureDelegate,
-  GestureDetail,
-  QueueController
-} from '../../interface';
+import { Component, EventListenerEnable, Listen, Prop, Watch } from '@stencil/core';
+import { BlockerConfig, BlockerDelegate, GestureCallback, GestureDelegate, GestureDetail, QueueController } from '../../interface';
 import { assert, now } from '../../utils/helpers';
 import { PanRecognizer } from './recognizers';
 
@@ -36,17 +23,13 @@ export class Gesture {
   private isMoveQueued = false;
   private blocker?: BlockerDelegate;
 
-  @Prop({ connect: 'ion-gesture-controller' })
-  gestureCtrl!: HTMLIonGestureControllerElement;
+  @Prop({ connect: 'ion-gesture-controller' }) gestureCtrl!: HTMLIonGestureControllerElement;
 
-  @Prop({ context: 'queue' })
-  queue!: QueueController;
+  @Prop({ context: 'queue' }) queue!: QueueController;
 
-  @Prop({ context: 'enableListener' })
-  enableListener!: EventListenerEnable;
+  @Prop({ context: 'enableListener' }) enableListener!: EventListenerEnable;
 
-  @Prop({ context: 'isServer' })
-  isServer!: boolean;
+  @Prop({ context: 'isServer' }) isServer!: boolean;
 
   /**
    * If true, the current gesture interaction is disabled

core/src/components/gesture/readme.md

@@ -1,5 +1,7 @@
 # ion-gesture
 
+Gesture is a component that can be used to add gesture based interaction to it's child content.
+The component properties can accept methods that will fire when the property is triggered.
 
 
 <!-- Auto Generated Below -->

core/src/components/hide-when/hide-when.tsx

@@ -11,17 +11,44 @@ import {
 })
 export class HideWhen implements DisplayWhen {
 
-  mode!: Mode;
   calculatedPlatforms!: PlatformConfig[];
 
   @Element() element!: HTMLElement;
   @Prop({ context: 'config' }) config!: Config;
   @Prop({ context: 'window' }) win!: Window;
 
+  /**
+   * If the current platform matches the given value, the element will hide.
+   * Accepts a comma separated list of modes to match against.
+   */
+  @Prop() mode!: Mode;
+
+  /**
+   * If the current orientation matches this value, the element will hide.
+   */
   @Prop() orientation?: string;
+
+  /**
+   * If the current media query matches this value, the element will hide.
+   */
   @Prop() mediaQuery?: string;
+
+  /**
+   * If the current screen width matches the given size, the element will hide.
+   * Uses the build in sizes of xs, sm, md, lg, xl.
+   */
   @Prop() size?: string;
+
+  /**
+   * If the current platform matches the given value, the element will hide.
+   * Accepts a comma separated list of platform to match against.
+   */
   @Prop() platform?: string;
+
+  /**
+   * If false, and two or more conditions are set, the element will hide when all are true.
+   * If true, and two or more conditions are set, the element will hide when at least one is true.
+   */
   @Prop() or = false;
 
   @State() passesTest = false;

core/src/components/hide-when/readme.md

@@ -1,5 +1,6 @@
 # ion-hide-when
 
+`HideWhen` is a component that will automatically hide itself and any child content when a property evaluates to true.
 
 
 <!-- Auto Generated Below -->

core/src/components/hide-when/usage/javascript.md

@@ -0,0 +1,78 @@
+```html
+<ion-content padding>
+
+  <h2>Mode Tests</h2>
+  <ion-hide-when mode="md, ios">
+    <div>Hides on MD, iOS</div>
+  </ion-hide-when>
+
+  <ion-hide-when mode="md">
+    <div>Hides on MD only</div>
+  </ion-hide-when>
+
+  <ion-hide-when mode="ios">
+    <div>Hides on iOS only</div>
+  </ion-hide-when>
+
+  <h2>Orientation Tests</h2>
+  <ion-hide-when orientation="portrait">
+    <div>Hides on portrait orientation</div>
+  </ion-hide-when>
+
+  <ion-hide-when orientation="landscape">
+    <div>Hides on landscape orientation</div>
+  </ion-hide-when>
+
+  <h2>Platform Tests</h2>
+
+  <ion-hide-when platform="android,ios">
+    <div>Hides on Android and iOS</div>
+  </ion-hide-when>
+
+  <ion-hide-when platform="ios">
+    <div>Only hide on iOS</div>
+  </ion-hide-when>
+
+  <ion-hide-when platform="android">
+    <div>Only hide on Android</div>
+  </ion-hide-when>
+
+  <ion-hide-when platform="ipad">
+    <div>Only hide on ipad</div>
+  </ion-hide-when>
+
+  <ion-hide-when platform="phablet">
+    <div>Only hide on phablet</div>
+  </ion-hide-when>
+
+  <ion-hide-when platform="iphone">
+    <div>Only hide on phone</div>
+  </ion-hide-when>
+
+  <h2>Size Tests</h2>
+  <ion-hide-when size="xs">
+    <div>Only hide on xs</div>
+  </ion-hide-when>
+
+  <ion-hide-when size="sm">
+    <div>Only hide on sm</div>
+  </ion-hide-when>
+
+  <ion-hide-when size="md">
+    <div>Only hide on md</div>
+  </ion-hide-when>
+
+  <ion-hide-when size="lg">
+    <div>Only hide on lg</div>
+  </ion-hide-when>
+
+  <ion-hide-when size="xl">
+    <div>Only hide on xl</div>
+  </ion-hide-when>
+
+  <ion-hide-when size="xs, m">
+    <div>Only hide on XS or m</div>
+  </ion-hide-when>
+
+</ion-content>
+```

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

@@ -1,6 +1,7 @@
 # ion-item-divider
 
 Item Divider is divider component for list items.
+Similar to ListHeaders, item dividers are styled to be inset with the rest of the list items.
 
 <!-- Auto Generated Below -->
 

core/src/components/label/readme.md

@@ -1,5 +1,7 @@
 # ion-label
-Label is a wrapper element that can be used in combination with `ion-item`.
+
+Label is a wrapper element that can be used in combination with `ion-item` and `ion-input`.
+The position of the label can be controlled to be either stacked, inline, or floating.
 
 
 <!-- Auto Generated Below -->

core/src/components/list-header/readme.md

@@ -1,5 +1,7 @@
 # ion-list-header
-List header a header component for a list.
+
+ListHeader a header component for a list.
+Unlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the list items.
 
 
 <!-- Auto Generated Below -->

core/src/components/picker-column/picker-column.tsx

@@ -4,6 +4,7 @@ import { hapticSelectionChanged } from '../../utils';
 import { clamp } from '../../utils/helpers';
 
 
+/** @hidden */
 @Component({
   tag: 'ion-picker-column',
   host: {

core/src/components/picker-controller/picker-controller.tsx

@@ -3,6 +3,7 @@ import { PickerOptions } from '../../interface';
 import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
 
+/** @hidden */
 @Component({
   tag: 'ion-picker-controller'
 })

core/src/components/range-knob/range-knob.tsx

@@ -1,6 +1,7 @@
 import { Component, Event, EventEmitter, Listen, Prop } from '@stencil/core';
 import { Knob } from '../../interface';
 
+/** @hidden */
 @Component({
   tag: `ion-range-knob`
 })

core/src/components/ripple-effect/readme.md

@@ -1,6 +1,8 @@
-# ion-button-effect
+# ion-ripple-effect
+
+RippleEffect is component that adds the Material Design button ripple effect.
+This is the stand alone version of the ripple effect and can be added to any component.
 
-RippleEffect is component that adds the Material Design button ripple to any element.
 
 
 

core/src/components/ripple-effect/ripple-effect.tsx

@@ -15,7 +15,7 @@ export class RippleEffect {
   @Prop({context: 'enableListener'}) enableListener!: EventListenerEnable;
   @Prop({ context: 'document' }) doc!: Document;
 
-  /** @hidden */
+  /** If true, the ripple effect will listen to any click events and animate */
   @Prop() tapClick = false;
   @Watch('tapClick')
   tapClickChanged(tapClick: boolean) {

core/src/components/show-when/readme.md

@@ -1,5 +1,7 @@
 # ion-show-when
 
+ShowWhen is a component that will automatically show it's child contents when a query evaluates to true.
+ShowWhen can watch for platform changes, mode changes, css media queries, and device orientation.
 
 
 <!-- Auto Generated Below -->

core/src/components/show-when/show-when.tsx

@@ -1,9 +1,7 @@
 import { Component, Element, Listen, Prop, State } from '@stencil/core';
 import { Config, Mode } from '../../interface';
 
-import {
-  DisplayWhen, PLATFORM_CONFIGS, PlatformConfig, detectPlatforms, updateTestResults,
-} from '../../utils/show-hide-when-utils';
+import { DisplayWhen, PLATFORM_CONFIGS, PlatformConfig, detectPlatforms, updateTestResults } from '../../utils/show-hide-when-utils';
 
 @Component({
   tag: 'ion-show-when',
@@ -11,18 +9,44 @@ import {
 })
 export class ShowWhen implements DisplayWhen {
 
-  mode!: Mode;
-
   @Element() element?: HTMLElement;
 
   @Prop({ context: 'config' }) config!: Config;
   @Prop({ context: 'platforms' }) calculatedPlatforms!: PlatformConfig[];
   @Prop({ context: 'window' }) win!: Window;
 
+  /**
+   * If the current platform matches the given value, the element will show.
+   * Accepts a comma separated list of modes to match against.
+   */
+  @Prop() mode!: Mode;
+
+  /**
+   * If the current orientation matches this value, the element will show.
+   */
   @Prop() orientation?: string;
+
+  /**
+   * If the current media query matches this value, the element will show.
+   */
   @Prop() mediaQuery?: string;
+
+  /**
+   * If the current screen width matches the given size, the element will show.
+   * Uses the build in sizes of xs, sm, md, lg, xl.
+   */
   @Prop() size?: string;
+
+  /**
+   * If the current platform matches the given value, the element will show.
+   * Accepts a comma separated list of platform to match against.
+   */
   @Prop() platform?: string;
+
+  /**
+   * If false, and two or more conditions are set, the element will show when all are true.
+   * If true, and two or more conditions are set, the element will show when at least one is true.
+   */
   @Prop() or = false;
 
   @State() passesTest = false;

core/src/components/status-tap/status-tap.tsx

@@ -1,6 +1,7 @@
 import { Component, Listen, Prop } from '@stencil/core';
 import { QueueController } from '../../interface';
 
+/** @hidden */
 @Component({
   tag: 'ion-status-tap'
 })

core/src/components/tap-click/tap-click.tsx

@@ -2,6 +2,7 @@ import { Component, Element, EventListenerEnable, Listen, Prop } from '@stencil/
 import { now, pointerCoord } from '../../utils/helpers';
 
 
+/** @hidden */
 @Component({
   tag: 'ion-tap-click',
 })