5.0.0-rc.3

resolves #20377

.github/COMPONENT-GUIDE.md

@@ -0,0 +1,443 @@
+# Ionic Component Implementation Guide
+
+- [Button States](#button-states)
+  * [Component Structure](#component-structure)
+  * [Activated](#activated)
+  * [Disabled](#disabled)
+  * [Focused](#focused)
+  * [Hover](#hover)
+  * [Ripple Effect](#ripple-effect)
+  * [Example Components](#example-components)
+  * [References](#references)
+- [Rendering Anchor or Button](#rendering-anchor-or-button)
+  * [Example Components](#example-components-1)
+  * [Component Structure](#component-structure-1)
+- [Converting Scoped to Shadow](#converting-scoped-to-shadow)
+
+## Button States
+
+Any component that renders a button should have the following states: [`activated`](#activated), [`disabled`](#disabled), [`focused`](#focused), [`hover`](#hover). It should also have a [Ripple Effect](#ripple-effect) component added for Material Design.
+
+### Component Structure
+
+#### JavaScript
+
+A component that renders a native button should use the following structure:
+
+```jsx
+<Host>
+  <button class="button-native">
+    <span class="button-inner">
+      <slot></slot>
+    </span>
+  </button>
+</Host>
+```
+
+Any other attributes and classes that are included are irrelevant to the button states, but it's important that this structure is followed and the classes above exist. In some cases they may be named something else that makes more sense, such as in item.
+
+
+#### CSS
+
+A mixin called `button-state()` has been added to make it easier to setup the states in each component.
+
+```scss
+@mixin button-state() {
+  @include position(0, 0, 0, 0);
+
+  position: absolute;
+
+  content: "";
+
+  opacity: 0;
+}
+```
+
+The following styles should be set for the CSS to work properly. Note that the `button-state()` mixin is included in the `::after` pseudo element of the native button.
+
+```scss
+.button-native {
+  /**
+   * All other CSS in this selector is irrelevant to button states
+   * but the following are required styles
+   */
+
+  position: relative;
+
+  overflow: hidden;
+}
+
+.button-native::after {
+  @include button-state();
+}
+
+.button-inner {
+  /**
+   * All other CSS in this selector is irrelevant to button states
+   * but the following are required styles
+   */
+
+  position: relative;
+
+  z-index: 1;
+}
+```
+
+
+### Activated
+
+The activated state should be enabled for elements with actions on "press". It usually changes the opacity or background of an element.
+
+> Make sure the component has the correct [component structure](#component-structure) before continuing.
+
+#### JavaScript
+
+The `ion-activatable` class needs to be set on an element that can be activated:
+
+```jsx
+render() {
+  return (
+    <Host class='ion-activatable'>
+      <slot></slot>
+    </Host>
+  );
+}
+```
+
+Once that is done, the element will get the `ion-activated` class added on press.
+
+In addition to setting that class, `ion-activatable-instant` can be set in order to have an instant press with no delay:
+
+```jsx
+<Host class='ion-activatable ion-activatable-instant'>
+```
+
+#### CSS
+
+```css
+ /**
+   * @prop --color-activated: Color of the button when pressed
+   * @prop --background-activated: Background of the button when pressed
+   * @prop --background-activated-opacity: Opacity of the background when pressed
+   */
+```
+
+Style the `ion-activated` class based on the spec for that element:
+
+```scss
+:host(.ion-activated) .button-native {
+  color: var(--color-activated);
+
+  &::after {
+    background: var(--background-activated);
+
+    opacity: var(--background-activated-opacity);
+  }
+}
+```
+
+> Order is important! Activated should be before the focused & hover states.
+
+
+#### User Customization
+
+Setting the activated state on the `::after` pseudo-element allows the user to customize the activated state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on press, or they can leave out `--background-activated-opacity` and the button will use the default activated opacity to match the spec.
+
+```css
+ion-button {
+  --background-activated: red;
+  --background-activated-opacity: 1;
+}
+```
+
+
+### Disabled
+
+The disabled state should be set via prop on all components that render a native button. Setting a disabled state will change the opacity or color of the button and remove click events from firing.
+
+#### JavaScript
+
+The `disabled` property should be set on the component:
+
+```jsx
+/**
+  * If `true`, the user cannot interact with the button.
+  */
+@Prop({ reflectToAttr: true }) disabled = false;
+```
+
+Then, the render function should add the [`aria-disabled`](https://www.w3.org/WAI/PF/aria/states_and_properties#aria-disabled) role to the host, a class that is the element tag name followed by `disabled`, and pass the `disabled` attribute to the native button:
+
+```jsx
+render() {
+  const { disabled } = this;
+
+  return (
+    <Host
+      aria-disabled={disabled ? 'true' : null}
+      class={{
+        'button-disabled': disabled
+      }}
+    >
+      <button disabled={disabled}>
+        <slot></slot>
+      </button>
+    </Host>
+  );
+}
+```
+
+> Note: if the class being added was for `ion-back-button` it would be `back-button-disabled`.
+
+#### CSS
+
+The following CSS _at the bare minimum_ should be added for the disabled class, but it should be styled to match the spec:
+
+```css
+:host(.button-disabled) {
+  cursor: default;
+  opacity: .5;
+  pointer-events: none;
+}
+```
+
+#### User Customization
+
+TODO
+
+### Focused
+
+The focused state should be enabled for elements with actions when tabbed to via the keyboard. This will only work inside of an `ion-app`. It usually changes the opacity or background of an element.
+
+> Make sure the component has the correct [component structure](#component-structure) before continuing.
+
+#### JavaScript
+
+The `ion-focusable` class needs to be set on an element that can be focused:
+
+```jsx
+render() {
+  return (
+    <Host class='ion-focusable'>
+      <slot></slot>
+    </Host>
+  );
+}
+```
+
+Once that is done, the element will get the `ion-focused` class added when the element is tabbed to.
+
+#### CSS
+
+Components should be written to include the following focused variables for styling:
+
+```css
+ /**
+   * @prop --color-focused: Color of the button when tabbed to with the keyboard
+   * @prop --background-focused: Background of the button when tabbed to with the keyboard
+   * @prop --background-focused-opacity: Opacity of the background when tabbed to with the keyboard
+   */
+```
+
+Style the `ion-focused` class based on the spec for that element:
+
+```scss
+:host(.ion-focused) .button-native {
+  color: var(--color-focused);
+
+  &::after {
+    background: var(--background-focused);
+
+    opacity: var(--background-focused-opacity);
+  }
+}
+```
+
+> Order is important! Focused should be after the activated and before the hover state.
+
+
+#### User Customization
+
+Setting the focused state on the `::after` pseudo-element allows the user to customize the focused state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on focus, or they can leave out `--background-focused-opacity` and the button will use the default focus opacity to match the spec.
+
+```css
+ion-button {
+  --background-focused: red;
+  --background-focused-opacity: 1;
+}
+```
+
+
+### Hover
+
+The [hover state](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) happens when a user moves their cursor on top of an element without pressing on it. It should not happen on mobile, only on desktop devices that support hover.
+
+> Make sure the component has the correct [component structure](#component-structure) before continuing.
+
+#### CSS
+
+Components should be written to include the following hover variables for styling:
+
+```css
+ /**
+   * @prop --color-hover: Color of the button on hover
+   * @prop --background-hover: Background of the button on hover
+   * @prop --background-hover-opacity: Opacity of the background on hover
+   */
+```
+
+Style the `:hover` based on the spec for that element:
+
+```scss
+@media (any-hover: hover) {
+  :host(:hover) .button-native {
+    color: var(--color-hover);
+
+    &::after {
+      background: var(--background-hover);
+
+      opacity: var(--background-hover-opacity);
+    }
+  }
+}
+```
+
+> Order is important! Hover should be after the activated and focused states.
+
+
+#### User Customization
+
+Setting the hover state on the `::after` pseudo-element allows the user to customize the hover state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on hover, or they can leave out `--background-hover-opacity` and the button will use the default hover opacity to match the spec.
+
+```css
+ion-button {
+  --background-hover: red;
+  --background-hover-opacity: 1;
+}
+```
+
+
+### Ripple Effect
+
+The ripple effect should be added to elements for Material Design. It *requires* the `ion-activatable` class to be set on the parent element to work, and relative positioning on the parent.
+
+```jsx
+ render() {
+  const mode = getIonMode(this);
+
+return (
+  <Host
+    class={{
+      'ion-activatable': true,
+    }}
+  >
+    <button>
+      <slot></slot>
+      {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+    </button>
+  </Host>
+);
+```
+
+The ripple effect can also accept a different `type`. By default it is `"bounded"` which will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, set the type to `"unbounded"`. An unbounded ripple will exceed the container, so add `overflow: hidden` to the parent to prevent this.
+
+Make sure to style the ripple effect for that component to accept a color:
+
+```css
+ion-ripple-effect {
+  color: var(--ripple-color);
+}
+```
+
+
+### Example Components
+
+- [ion-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/button)
+- [ion-back-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/back-button)
+- [ion-menu-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/menu-button)
+
+### References
+
+- [Material Design States](https://material.io/design/interaction/states.html)
+- [iOS Buttons](https://developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/)
+
+
+## Rendering Anchor or Button
+
+Certain components can render an `<a>` or a `<button>` depending on the presence of an `href` attribute.
+
+### Example Components
+
+- [ion-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/button)
+- [ion-card](https://github.com/ionic-team/ionic/tree/master/core/src/components/card)
+- [ion-fab-button](https://github.com/ionic-team/ionic/tree/master/core/src/components/fab-button)
+- [ion-item-option](https://github.com/ionic-team/ionic/tree/master/core/src/components/item-option)
+- [ion-item](https://github.com/ionic-team/ionic/tree/master/core/src/components/item)
+
+### Component Structure
+
+#### JavaScript
+
+In order to implement a component with a dynamic tag type, set the property that it uses to switch between them, we use `href`:
+
+```jsx
+/**
+ * Contains a URL or a URL fragment that the hyperlink points to.
+ * If this property is set, an anchor tag will be rendered.
+ */
+@Prop() href: string | undefined;
+```
+
+Then use that in order to render the tag:
+
+```jsx
+render() {
+  const TagType = href === undefined ? 'button' : 'a' as any;
+
+  return (
+    <Host>
+      <TagType>
+        <slot></slot>
+      </TagType>
+    </Host>
+  );
+}
+```
+
+If the component can render an `<a>`, `<button>` or a `<div>` add in more properties such as a `button` attribute in order to check if it should render a button.
+
+## Converting Scoped to Shadow
+
+### CSS
+
+There will be some CSS issues when converting to shadow. Below are some of the differences.
+
+**Targeting host + slotted child**
+
+```css
+/* IN SCOPED */
+:host(.ion-color)::slotted(ion-segment-button)
+
+/* IN SHADOW*/
+:host(.ion-color) ::slotted(ion-segment-button)
+```
+
+**Targeting host-context + host (with a :not)**
+
+```css
+/* IN SCOPED */
+:host-context(ion-toolbar.ion-color):not(.ion-color) {
+
+/* IN SHADOW */
+:host-context(ion-toolbar.ion-color):host(:not(.ion-color))  {
+```
+
+**Targeting host-context + host (with a :not) > slotted child**
+
+```css
+/* IN SCOPED */
+:host-context(ion-toolbar:not(.ion-color)):not(.ion-color)::slotted(ion-segment-button) {
+
+/* IN SHADOW*/
+:host-context(ion-toolbar:not(.ion-color)):host(:not(.ion-color)) ::slotted(ion-segment-button) {
+```

.github/ISSUE_TEMPLATE.md

@@ -10,6 +10,7 @@
 <!-- (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) -->
 <!-- (For Ionic 2.x & 3.x issues, please use https://github.com/ionic-team/ionic-v3) -->
 [x] **4.x**
+[ ] **5.x**
 
 **I'm submitting a ...** 
 <!--  (check one with "x") -->

.scripts/common.js

@@ -254,6 +254,22 @@ function updatePackageVersions(tasks, packages, version) {
       }
     });
 
+    // angular & angular-server need to update their dist versions
+    if (package === 'angular' || package === 'packages/angular-server') {
+      const distPackage = path.join(package, 'dist');
+
+      updatePackageVersion(tasks, distPackage, version);
+
+      tasks.push({
+        title: `${package} update @ionic/core dependency, if present ${tc.dim(`(${version})`)}`,
+        task: async () => {
+          const pkg = readPkg(distPackage);
+          updateDependency(pkg, '@ionic/core', version);
+          writePkg(distPackage, pkg);
+        }
+      });
+    }
+
     if (package === 'packages/react-router') {
       tasks.push({
         title: `${package} update @ionic/react dependency, if present ${tc.dim(`(${version})`)}`,

.scripts/copy-package.js

@@ -1,12 +0,0 @@
-
-// copy the package.json to the directory to dist to publish it
-
-const fs = require('fs');
-const path = require('path');
-
-const package = process.argv[2];
-
-const srcPath = path.join(__dirname, '..', package, 'package.json');
-let packageContent = fs.readFileSync(srcPath, 'utf-8');
-
-fs.writeFileSync(path.join(__dirname, '..', package, 'dist', 'package.json'), packageContent);

.scripts/prepare.js

@@ -113,9 +113,6 @@ async function preparePackages(packages, version, install) {
   // add update package.json of each project
   common.updatePackageVersions(tasks, packages, version);
 
-  // copy package.json to dist
-  common.copyPackageToDist(tasks, packages);
-
   // generate changelog
   generateChangeLog(tasks);
 

BREAKING.md

@@ -1,3 +1,671 @@
 # Breaking Changes
 
-The list of the breaking changes introduced in Ionic Angular v4 has been moved to [angular/BREAKING.md](https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md).
+This is a comprehensive list of the breaking changes introduced in the major version releases of Ionic Framework.
+
+## Versions
+
+- [Version 5.x](#version-5x)
+- [Version 4.x](#version-4x)
+- [Legacy](#legacy)
+
+
+## Version 5.x
+
+- [CSS](#css)
+  * [CSS Utilities](#css-utilities)
+  * [Display Classes](#display-classes)
+  * [Activated, Focused, Hover States](#activated-focused-hover-states)
+  * [Distributed Sass](#distributed-sass)
+- [Components](#components)
+  * [Action Sheet](#action-sheet)
+  * [Anchor](#anchor)
+  * [Back Button](#back-button)
+  * [Button](#button)
+  * [Card](#card)
+  * [Controllers](#controllers)
+  * [FAB Button](#fab-button)
+  * [Item](#item)
+  * [Header / Footer](#header---footer)
+  * [List Header](#list-header)
+  * [Menu](#menu)
+  * [Menu Button](#menu-button)
+  * [Nav Link](#nav-link)
+  * [Radio](#radio)
+  * [Searchbar](#searchbar)
+  * [Segment](#segment)
+  * [Segment Button](#segment-button)
+  * [Select Option](#select-option)
+  * [Skeleton Text](#skeleton-text)
+  * [Split Pane](#split-pane)
+  * [Toast](#toast)
+  * [Tabs](#tabs)
+- [Colors](#colors)
+- [Events](#events)
+- [Mode](#mode)
+- [Ionicons](#ionicons)
+
+
+### CSS
+
+#### CSS Utilities
+
+We originally added CSS utility attributes for styling components because it was a quick and easy way to wrap text or add padding to an element. Once we added support for multiple frameworks as part of our "Ionic for everyone" approach, we quickly determined there were problems with using CSS attributes with frameworks that use JSX and Typescript. In order to solve this we added CSS classes. Rather than support CSS attributes in certain frameworks and classes in others, we decided to remove the CSS attributes and support what works in all of them, classes, for consistency. In addition to this, changing to classes prefixed with `ion` avoids conflict with native attributes and user's CSS. In the latest version of Ionic 4, there are deprecation warnings printed in the console to show what the new classes are, and the documentation has been updated since support for classes was added to remove all references to attributes: https://ionicframework.com/docs/layout/css-utilities.
+
+Some examples of what's changed are below. *This is not all-inclusive, see the documentation linked above for all of the available CSS utility classes.*
+
+**Before**
+
+```html
+<ion-header text-center></ion-header>
+<ion-content padding></ion-content>
+<ion-label text-wrap></ion-label>
+<ion-item wrap></ion-item>
+```
+
+**After**
+
+```html
+<ion-header class="ion-text-center"></ion-header>
+<ion-content class="ion-padding"></ion-content>
+<ion-label class="ion-text-wrap"></ion-label>
+<ion-item class="ion-wrap"></ion-item>
+```
+
+
+#### Display Classes
+
+The responsive display classes found in the `display.css` file have had their media queries updated to better reflect how they should work. Instead of using the maximum value of the breakpoint for `.ion-hide-{breakpoint}-down` classes it will use the minimum of that breakpoint.
+
+The [Ionic breakpoints](https://ionicframework.com/docs/layout/css-utilities#ionic-breakpoints) are the following:
+
+
+| Breakpoint Name | Width   |
+| ----------------| --------|
+| xs              | 0       |
+| sm              | 576px   |
+| md              | 768px   |
+| lg              | 992px   |
+| xl              | 1200px  |
+
+Previously, if you added the class `ion-hide-md-down` to an element, it would hide the element when the screen size was `991px` (the maximum of the `md` breakpoint) or smaller. Now, using this same class will hide the element when the maximum screen size is `768px`.
+
+Below is a table of how the media queries have changed for each class:
+
+| Class Name          | Ionic 4                      | Ionic 5                      |
+| --------------------| -----------------------------| -----------------------------|
+| `.ion-hide-down`    | `@media (max-width: 575px)`  | all screen sizes             |
+| `.ion-hide-sm-down` | `@media (max-width: 767px)`  | `@media (max-width: 576px)`  |
+| `.ion-hide-md-down` | `@media (max-width: 991px)`  | `@media (max-width: 768px)`  |
+| `.ion-hide-lg-down` | `@media (max-width: 1199px)` | `@media (max-width: 992px)`  |
+| `.ion-hide-xl-down` | all screen sizes             | `@media (max-width: 1200px)` |
+
+_Note that no changes were made to the `.ion-hide-{breakpoint}-up` classes._
+
+See the [CSS Utilities responsive display documentation](https://ionicframework.com/docs/layout/css-utilities#responsive-display-attributes) for more information.
+
+
+#### Activated, Focused, Hover States
+
+The `.activated` class that is automatically added to clickable components has been renamed to `.ion-activated`.
+
+The way the CSS variables are used for targeting the activated, focused and hover backgrounds have been updated on the following components:
+
+- Action Sheet
+- Back Button
+- Button
+- FAB Button
+- Item
+- Menu Button
+- Segment Button
+- Tab Button
+
+Previously, in order to update any of the background colors for the states you would have to know what the opacity was set to. Using the Material Design spec as an example, it would require you to know that the hover state uses a white overlay with an opacity of `.08`. This means that if we had the following set by default:
+
+```css
+--background-hover: rgba(255, 255, 255, 0.08);
+```
+
+If you wanted to change the hover overlay to use black but still match the spec, you'd have to set it to:
+
+```css
+--background-hover: rgba(0, 0, 0, 0.08);
+```
+
+The new way adds the following variables:
+
+```css
+--background-activated-opacity
+--background-focused-opacity
+--background-hover-opacity
+```
+
+It also updates the Action Sheet component so that the variables will be prefixed with `button`. See the [Action Sheet](#action-sheet) section in this document for all of the new variable names.
+
+This allows you to still have control over the opacity if desired, but when updating the state, you only have to set the main variables: `--background-activated`, `--background-focused`, `--background-hover` and the button will still match the spec. This is most important when changing the global theme, as updating the toolbar color will automatically update the hover states for all of the buttons in a toolbar, regardless of their fill and without having to know what each opacity is.
+
+
+##### Examples
+
+```css
+/* Setting the button background on hover to solid red */
+ion-button {
+  --background-hover: red;
+  --background-hover-opacity: 1;
+}
+
+/* Setting the action sheet button background on focus to an opaque green */
+ion-action-sheet {
+  --button-background-focus: green;
+  --button-background-focus-opacity: 0.5;
+}
+
+/*
+ * Setting the fab button background on hover to match the text color with
+ * the default --background-hover-opacity on md
+ */
+.md ion-fab-button {
+  --color: #222;
+  --background-hover: #222;
+}
+```
+
+##### Global CSS Properties
+
+Some variables were renamed, removed or added. See the chart below for the changes.
+
+| Old variable                            | Status  | New variable                              |
+| ----------------------------------------| --------|-------------------------------------------|
+| `--ion-toolbar-color-unchecked`         | renamed | `--ion-toolbar-segment-color`             |
+| `--ion-toolbar-color-checked`           | renamed | `--ion-toolbar-segment-color-checked`     |
+| `--ion-toolbar-background-unchecked`    | renamed | `--ion-toolbar-segment-background`        |
+| `--ion-toolbar-background-checked`      | renamed | `--ion-toolbar-segment-background-checked`|
+| `--ion-tab-bar-color-activated`         | renamed | `--ion-tab-bar-color-selected`            |
+|                                         | added   | `--ion-toolbar-segment-indicator-color`   |
+| `--ion-toolbar-color-activated`         | removed |                                           |
+| `--ion-item-background-activated`       | removed |                                           |
+| `--ion-item-background-focused`         | removed |                                           |
+| `--ion-item-background-hover`           | removed |                                           |
+
+
+#### Distributed Sass
+
+The `scss` files have been removed from `dist/`. CSS variables should be used to theme instead.
+
+
+### Components
+
+#### Action Sheet
+
+The following CSS variables have been renamed or added:
+
+| Old                      | New                                        |
+|--------------------------| -------------------------------------------|
+|                          | `--button-background`                      |
+| `--background-activated` | `--button-background-activated`            |
+|                          | `--button-background-activated-opacity`    |
+| `--background-selected`  | `--button-background-selected`             |
+|                          | `--button-background-focused`              |
+|                          | `--button-background-focused-opacity`      |
+|                          | `--button-background-hover`                |
+|                          | `--button-background-hover-opacity`        |
+|                          | `--button-background-selected`             |
+|                          | `--button-background-selected-opacity`     |
+|                          | `--button-color`                           |
+|                          | `--button-color-activated`                 |
+|                          | `--button-color-focused`                   |
+|                          | `--button-color-hover`                     |
+|                          | `--button-color-selected`                  |
+
+See the [Action Sheet CSS Custom Properties](https://ionicframework.com/docs/api/action-sheet#css-custom-properties) documentation for descriptions.
+
+
+#### Anchor
+
+The `ion-anchor` component has been renamed to `ion-router-link` as this is a better description of which component it should be used with. This component should still only be used in vanilla and Stencil JavaScript projects. Angular projects should use an `<a>` and `routerLink` with the Angular router. See the [documentation for router-link](https://ionicframework.com/docs/api/router-link) for more information.
+
+#### Back Button
+
+- Converted `ion-back-button` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
+- [Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+#### Button
+
+- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+#### Card
+
+Converted `ion-card` to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
+
+
+#### Controllers
+
+The controller components (`ion-action-sheet-controller`, `ion-alert-controller`, `ion-loading-controller`, `ion-menu-controller`, `ion-modal-controller`, `ion-picker-controller`, `ion-popover-controller`, `ion-toast-controller`) have been removed from Ionic core as elements. They should be imported from `@ionic/core` instead. This will not affect projects that use Angular or React. Below is an example of the loading controller change in a JavaScript project, but this change applies to all controller elements.
+
+**Before**
+
+```html
+<ion-loading-controller></ion-loading-controller>
+
+<script>
+  async function presentLoading() {
+    const loadingController = document.querySelector('ion-loading-controller');
+
+    const loading = await loadingController.create({
+      message: 'Hello',
+      duration: 2000
+    });
+    await loading.present();
+  }
+</script>
+
+```
+
+**After**
+
+```html
+<script type="module">
+  import { loadingController } from '@ionic/core';
+  window.loadingController = loadingController;
+</script>
+
+<script>
+  async function presentLoading() {
+    const loading = await loadingController.create({
+      message: 'Hello',
+      duration: 2000
+    });
+    await loading.present();
+  }
+</script>
+```
+
+#### FAB Button
+
+- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+
+#### Item
+
+- [Activated, Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+
+#### Header / Footer
+
+The `no-border` attribute has been removed, use `ion-no-border` class instead. See [CSS Utilities](#css-utilities) above for more information on why this change was made.
+
+
+#### List Header
+
+The list header has been redesigned to match the latest iOS spec. This may break the design of your application as the previous design had a small font size with uppercase text. The latest design includes a larger, bolder text.
+
+In addition, any text content inside of an `<ion-list-header>` should be wrapped in an `<ion-label>` in order to get the proper styling of the new design. If the label is missing, the button alignment in the list header may look off.
+
+**Before**
+
+```html
+<ion-list-header>
+  New This Week
+  <ion-button>See All</ion-button>
+</ion-list-header>
+```
+
+**After**
+
+```html
+<ion-list-header>
+  <ion-label>New This Week</ion-label>
+  <ion-button>See All</ion-button>
+</ion-list-header>
+```
+
+The button has also been updated to default to `fill="clear"` and `size="small"` when inside of a list header. If the old look of the list header or buttons is desired, use custom CSS or button properties to achieve it.
+
+For more information see the [List Header usage](https://ionicframework.com/docs/api/list-header#usage).
+
+
+#### Menu
+
+- The `swipeEnable()` function has been removed in Angular, use `swipeGesture()` instead.
+- The `side` values `left` and `right` have been removed, use `start` and `end` instead.
+- Removed the `main` attribute, use `content-id` (for vanilla JS / Vue) and `contentId` (for Angular / React) instead.
+
+  **Before**
+
+  ```html
+  <ion-menu>...</ion-menu>
+  <ion-content main>...</ion-content>
+  ```
+
+  **After**
+
+  ```html
+  <ion-menu content-id="main"></ion-menu>
+  <ion-content id="main">...</ion-content>
+  ```
+- The presentation type in `ios` now defaults to `"overlay"`.
+
+
+#### Menu Button
+
+- [Focused, Hover States](#activated-focused-hover-states) have been updated.
+
+
+#### Nav Link
+
+The `ion-nav-push`, `ion-nav-back`, and `ion-nav-set-root` components have been removed in favor of using `ion-nav-link` with a `router-direction` property which accepts `”root”`, `“forward”`, and `“back”`. This reduces the need for maintaining multiple components when they all do the same thing with different transition directions. See the [documentation for nav-link](https://ionicframework.com/docs/api/nav-link) for more information.
+
+
+#### Radio
+
+The `ion-radio` must be used inside of an `ion-radio-group` even if there is only one `ion-radio`. Additionally, the `checked` property has been removed. Developers should set the `value` property on the parent `ion-radio-group` to match the value of the desired checked radio button.
+
+`ion-radio` no longer emits an `ionSelect` event. Developers should listen for an `ionChange` event to be emitted on `ion-radio-group` instead.
+
+**Before**
+
+```html
+<ion-radio checked>One</ion-radio>
+
+<ion-radio-group>
+  <ion-radio>One</ion-radio>
+  <ion-radio checked>Two</ion-radio>
+</ion-radio-group>
+```
+
+**After**
+
+```html
+<ion-radio-group value="one">
+  <ion-radio value="one">One</ion-radio>
+</ion-radio-group>
+
+<ion-radio-group value="two">
+  <ion-radio value="one">One</ion-radio>
+  <ion-radio value="two">Two</ion-radio>
+</ion-radio-group>
+```
+
+#### Searchbar
+
+##### Show Cancel Button
+
+The `show-cancel-button` property of the searchbar no longer accepts boolean values. Accepted values are strings: `"focus"`, `"always"`, `"never"`.
+
+**Before**
+
+```html
+<ion-searchbar show-cancel-button>
+<ion-searchbar show-cancel-button="true">
+<ion-searchbar show-cancel-button="false">
+```
+
+**After**
+
+```html
+<ion-searchbar show-cancel-button="focus">
+<ion-searchbar show-cancel-button="focus">
+<ion-searchbar show-cancel-button="never">
+```
+
+See the [Searchbar documentation](https://ionicframework.com/docs/api/searchbar#properties) for more information.
+
+##### Inputmode
+
+The `inputmode` property for `ion-searchbar` now defaults to `undefined`. To get the old behavior, set the inputmode property to `"search"`.
+
+
+#### Segment
+
+Segment was completely revamped to use the new iOS design including an all new gesture that applies for both Material Design and iOS. Due to these changes, some breaking changes were inevitably introduced in order to support the new design.
+
+##### Events
+
+`ion-segment` no longer emits an `ionSelect` event. Developers should listen for an `ionChange` event to be emitted on `ion-segment` instead.
+
+##### Button States
+
+- The activated styles and custom CSS properties have been removed. These are no longer being used in the latest spec as the indicator and ripple are used to show activation. Properties removed:
+  ```
+  --color-activated
+  --background-activated
+  ```
+- The [Focused & Hover States](#activated-focused-hover-states) have been updated.
+
+##### Indicator Color
+
+- `--indicator-color` now applies to the checked segment button (for both `ios` and `md`)
+- `--indicator-color-checked` has been removed
+- The Material Design spec does not include an indicator color on non-checked buttons: https://material.io/components/tabs/
+- In order to style the Segment to match the old spec, please use custom CSS. For example, to update Material Design to include a bottom line all of the time:
+  ```css
+  .md ion-segment::after {
+      position: absolute;
+      bottom: 0;
+      height: 2px;
+      width: 100%;
+      content: '';
+      background: rgba(0,0,0,0.5);
+      z-index: -1;
+  }
+  ```
+
+##### Background & Color
+
+A `--background` variable has been added to style the `ion-segment` component. As a result of this, the following background variables for a child segment button must now be set on the `ion-segment-button`:
+
+```
+--background: Background of the segment button
+--background-checked: Background of the checked segment button
+--background-disabled: Background of the disabled segment button
+--background-hover: Background of the segment button on hover
+```
+
+> Note: iOS no longer checks the button background, so setting the `--background-checked` variable may have an undesired outcome. Instead, Segment uses an indicator to slide between the buttons, showing which one is checked. See the previous section on the indicator color variables.
+
+The above variables *will not* be inherited in the button if set on the `ion-segment`. In addition to this, all color variables should also be set on the button for consistency:
+
+```
+--color: Color of the segment button
+--color-checked: Color of the checked segment button
+--color-disabled: Color of the disabled segment button
+--color-hover: Color of the segment button on hover
+```
+
+###### Removed variables
+
+The following variables were removed due to the current spec no longer using them.
+
+- `--color-checked-disabled`
+- `--background-disabled`
+- `--color-disabled`
+- `--background-activated`
+- `--color-activated`
+
+##### Global CSS Properties
+
+Some variables were renamed or added. See the chart below for the new names.
+
+| Old variable                            | Status  | New variable                              |
+| ----------------------------------------| --------|-------------------------------------------|
+| `--ion-toolbar-color-unchecked`         | renamed | `--ion-toolbar-segment-color`             |
+| `--ion-toolbar-color-checked`           | renamed | `--ion-toolbar-segment-color-checked`     |
+| `--ion-toolbar-background-unchecked`    | renamed | `--ion-toolbar-segment-background`        |
+| `--ion-toolbar-background-checked`      | renamed | `--ion-toolbar-segment-background-checked`|
+|                                         | added   | `--ion-toolbar-segment-indicator-color`   |
+
+
+#### Segment Button
+
+The `checked` property has been removed. Developers should set the `value` property on the parent `ion-segment` to match the value of the desired checked segment button.
+
+**Before**
+
+```html
+<ion-segment>
+  <ion-segment-button>One</ion-segment-button>
+  <ion-segment-button checked>Two</ion-segment-button>
+  <ion-segment-button>Three</ion-segment-button>
+</ion-segment>
+```
+
+**After**
+
+```html
+<ion-segment value="two">
+  <ion-segment-button value="one">One</ion-segment-button>
+  <ion-segment-button value="two">Two</ion-segment-button>
+  <ion-segment-button value="three">Three</ion-segment-button>
+</ion-segment>
+```
+
+
+#### Select Option
+
+The `selected` property has been removed. Developers should set the `value` property on the parent `ion-select` to match the desired selected option.
+
+**Before**
+
+```html
+<ion-select>
+  <ion-select-option>One</ion-select-option>
+  <ion-select-option selected>Two</ion-select-option>
+</ion-select>
+```
+
+**After**
+
+```html
+<ion-select value="two">
+  <ion-select-option value="one">One</ion-select-option>
+  <ion-select-option value="two">Two</ion-select-option>
+</ion-select>
+```
+
+
+#### Skeleton Text
+
+The `width` property has been removed in favor of using CSS styling.
+
+
+#### Split Pane
+- Converted to use [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).
+- Removed the `main` attribute, use `content-id` (for vanilla JS / Vue) and `contentId` (for Angular / React) instead.
+  **Before**
+
+  ```html
+  <ion-split-pane>
+    ...
+    <div main>...</div>
+  </ion-split-pane>
+  ```
+
+  **After**
+
+  ```html
+  <ion-split-pane content-id="main">
+    ...
+    <div id="main">...</div>
+  </ion-split-pane>
+  ```
+
+#### Tabs
+
+- [Focused State](#activated-focused-hover-states) have been updated.
+
+#### Toast
+
+The close button properties (`showCloseButton` and `closeButtonText`) have been removed. Use the `buttons` array instead with `role: 'cancel'`. See the [usage documentation](https://ionicframework.com/docs/api/toast#usage) for more information.
+
+**Before**
+
+```javascript
+async presentToast() {
+  const toast = await this.toastController.create({
+    message: 'Your settings have been saved.',
+    showCloseButton: true,
+    closeButtonText: 'Close'
+  });
+  toast.present();
+}
+```
+
+**After**
+
+```javascript
+async presentToast() {
+  const toast = await this.toastController.create({
+    message: 'Your settings have been saved.',
+    buttons: [
+      {
+        text: 'Close',
+        role: 'cancel',
+        handler: () => {
+          console.log('Close clicked');
+        }
+      }
+    ]
+  });
+  toast.present();
+}
+```
+
+### Colors
+
+The default Ionic colors have been updated to the following:
+
+```scss
+primary:         #3880ff
+secondary:       #3dc2ff
+tertiary:        #5260ff
+success:         #2dd36f
+warning:         #ffc409
+danger:          #eb445a
+light:           #f4f5f8
+medium:          #92949c
+dark:            #222428
+```
+
+`primary`, `light` and `dark` have not changed. The contrast color for `warning` has been updated to `#000`.
+
+This will only be a breaking change in your app if you are not using one of our starters and not overriding the defaults. If you are overriding the defaults already these will need to be manually updated if desired.
+
+
+### Events
+
+The `@ionic/angular` Events service has been removed.
+
+- Use "Observables" for a similar pub/sub architecture: https://angular.io/guide/observables
+- Use "Redux" for advanced state management: https://ngrx.io
+
+
+### Mode
+
+Mode is now cascaded from the parent to the child component. Previously, if you wanted to update a component and its children to use the same mode, you'd have to set it on all components. For example, if you wanted to use a `md` segment no matter the mode, you'd have to write the following:
+
+```html
+<ion-segment mode="md">
+  <ion-segment-button mode="md">Button</ion-segment-button>
+  <ion-segment-button mode="md">Button</ion-segment-button>
+</ion-segment>
+```
+
+Now, the `mode` only needs to be set on the `ion-segment` and it will be inherited. If this behavior is not desired set a different mode on the child component.
+
+
+### Ionicons
+
+Ionicons 5 has been released! :tada: This brings many changes including a top to bottom re-draw of every icon, variants for each icon (filled, outline, and sharp), and the removal of auto-switching icons based on the platform.
+
+For more information, check out the [Ionicons Changelog](https://github.com/ionic-team/ionicons/blob/master/CHANGELOG.md)!
+
+
+
+--------------------------------------------------------------------------------------------------
+
+## Version 4.x
+
+The list of the breaking changes introduced in Ionic Angular v4 can be found in [angular/BREAKING.md](https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md).
+
+## Legacy
+
+For the breaking changes of the older legacy versions (versions 2.x & 3.x) of Ionic Framework, see the [v3 changelog](https://github.com/ionic-team/ionic-v3/blob/master/CHANGELOG.md).

CHANGELOG.md

@@ -1,3 +1,186 @@
+# [5.0.0-rc.3](https://github.com/ionic-team/ionic/compare/v5.0.0-rc.2...v5.0.0-rc.3) (2020-02-05)
+
+
+### Bug Fixes
+
+* **refresher:** ensure gesture does not interfere with item-sliding ([#20380](https://github.com/ionic-team/ionic/issues/20380)) ([8983c70](https://github.com/ionic-team/ionic/commit/8983c7006e54743873cd45ae1acdfa974d74547a)), closes [#20379](https://github.com/ionic-team/ionic/issues/20379)
+* **refresher:** translate background content when refreshing ([#20378](https://github.com/ionic-team/ionic/issues/20378)) ([cf70916](https://github.com/ionic-team/ionic/commit/cf7091625ecb46c3f9882ae9eff5c946523fab75)), closes [#20377](https://github.com/ionic-team/ionic/issues/20377)
+* **segment:** allow background to be set on iOS segment in a toolbar ([#20350](https://github.com/ionic-team/ionic/issues/20350)) ([0f31624](https://github.com/ionic-team/ionic/commit/0f31624104d195367df197eda9b8d6c5bda4cf75))
+* **toolbar:** properly apply safe area and border ([#20375](https://github.com/ionic-team/ionic/issues/20375)) ([4971499](https://github.com/ionic-team/ionic/commit/4971499026fcee70a32cc9480302bb14a1bebcb7)), closes [#20354](https://github.com/ionic-team/ionic/issues/20354)
+
+
+
+# [5.0.0-rc.2](https://github.com/ionic-team/ionic/compare/v5.0.0-rc.1...v5.0.0-rc.2) (2020-01-30)
+
+
+### Bug Fixes
+
+* **header:** fix race condition in collapsible header ([#20334](https://github.com/ionic-team/ionic/issues/20334)) ([215d55f](https://github.com/ionic-team/ionic/commit/215d55f1ebeb93988b513c5869faae14d1d51919))
+* **ios:** translucent toolbar blur no longer obscures entering page toolbar content ([#20314](https://github.com/ionic-team/ionic/issues/20314)) ([e580b88](https://github.com/ionic-team/ionic/commit/e580b884770a086ee5d8acf61588ea50181786e6)), closes [#19158](https://github.com/ionic-team/ionic/issues/19158)
+* **radio:** do not clear radio group value from radio ([#20343](https://github.com/ionic-team/ionic/issues/20343)) ([ff78e6e](https://github.com/ionic-team/ionic/commit/ff78e6e8ca8ae4dc2a6d401b377dd3977c48824a)), closes [#20323](https://github.com/ionic-team/ionic/issues/20323)
+* **radio:** set default radio value if undefined ([#20329](https://github.com/ionic-team/ionic/issues/20329)) ([eb57723](https://github.com/ionic-team/ionic/commit/eb57723785ce5b05585bf48bf9c8ae1b62235ba2))
+* **refresher:** add correct fallbacks for native refreshers ([#20333](https://github.com/ionic-team/ionic/issues/20333)) ([fd55427](https://github.com/ionic-team/ionic/commit/fd55427991e94488d86971aaa10acb13d7fa1c23))
+* **refresher:** resolve undefined issues when updating component ([#20322](https://github.com/ionic-team/ionic/issues/20322)) ([59d8687](https://github.com/ionic-team/ionic/commit/59d86873a2ab913358b084bb05180ba176893a8f)), closes [#20320](https://github.com/ionic-team/ionic/issues/20320)
+
+
+
+# [5.0.0-rc.1](https://github.com/ionic-team/ionic/compare/v4.11.10...v5.0.0-rc.1) (2020-01-27)
+
+
+### Bug Fixes
+
+* **components:** use proper colors for button states and add back input highlight ([#20278](https://github.com/ionic-team/ionic/issues/20278)) ([628db18](https://github.com/ionic-team/ionic/commit/628db18a97293731ecfee8e4d2f0d8c1cf672c96)), closes [#20276](https://github.com/ionic-team/ionic/issues/20276)
+* **components:** inherit text indent in all components with text inherit ([#20300](https://github.com/ionic-team/ionic/issues/20300)) ([767b005](https://github.com/ionic-team/ionic/commit/767b005eacf00b640973bfb381de4dcedf083399)), closes [#17786](https://github.com/ionic-team/ionic/issues/17786)
+* **content:** resolve height inheritance issues ([#20309](https://github.com/ionic-team/ionic/issues/20309)) ([09bef71](https://github.com/ionic-team/ionic/commit/09bef71ccd5a261233180bc19023bc562b905764)), closes [#20305](https://github.com/ionic-team/ionic/issues/20305)
+* **picker:** include showBackdrop in interface ([#20301](https://github.com/ionic-team/ionic/issues/20301)) ([33186ba](https://github.com/ionic-team/ionic/commit/33186ba716de77edc92ae8e7d307f90fff8b8ed1)), closes [#18893](https://github.com/ionic-team/ionic/issues/18893)
+* **react:** export proper types of animations and gestures ([#20311](https://github.com/ionic-team/ionic/issues/20311)) ([0034088](https://github.com/ionic-team/ionic/commit/00340885fb031d3dbc7c458fddeed9d28a2deda4))
+* **refresher:** update animation for dashed property values ([#20310](https://github.com/ionic-team/ionic/issues/20310)) ([44211c1](https://github.com/ionic-team/ionic/commit/44211c11ee929b9966d5e67e99fb6a495380432c))
+* **toast:** inherit color in cancel button for a toast with color ([#20299](https://github.com/ionic-team/ionic/issues/20299)) ([7b44ae2](https://github.com/ionic-team/ionic/commit/7b44ae2a400bb0c0616012e9c42bfc67edbfc793)), closes [#20139](https://github.com/ionic-team/ionic/issues/20139)
+
+
+
+## [4.11.10](https://github.com/ionic-team/ionic/compare/v4.11.9...v4.11.10) (2020-01-24)
+
+
+### Bug Fixes
+
+* **input:** revert previous type change ([db1fd1d](https://github.com/ionic-team/ionic/commit/db1fd1d72a8a0ade824ad2309d1adb2953731f37))
+
+
+# [5.0.0-rc.0](https://github.com/ionic-team/ionic/compare/v5.0.0-beta.6...v5.0.0-rc.0) (2020-01-23)
+
+Release Candidate is here! :tada:
+
+
+# [5.0.0-beta.6](https://github.com/ionic-team/ionic/compare/v4.11.9...v5.0.0-beta.6) (2020-01-23)
+
+### Bug Fixes
+
+* **animation:** add property conversions for CSS Animations ([#20252](https://github.com/ionic-team/ionic/issues/20252)), fixes [#20251](https://github.com/ionic-team/ionic/issues/20251) ([32a7401](https://github.com/ionic-team/ionic/commit/32a7401576a9c91fdee66d2cede06b6a16884d35))
+* **content:** set min-height to allow for sticky headers ([#20265](https://github.com/ionic-team/ionic/issues/20252)), fixes [#20258](https://github.com/ionic-team/ionic/issues/20258) ([e613f63](https://github.com/ionic-team/ionic/commit/e613f63590f3d6a4fa4f3a361811224394ba0be2))
+* **modal:** card-style modal now opens at full width on larger devices ([#20256](https://github.com/ionic-team/ionic/issues/20256)), fixes [#20255](https://github.com/ionic-team/ionic/issues/20255) ([443cbd9](https://github.com/ionic-team/ionic/commit/443cbd9eb273767d8405b6a05ffabee037e9f3b7))
+* **segment:** clicking disabled button no longer adds ripple to active button ([#20254](https://github.com/ionic-team/ionic/issues/20254)), fixes [#20253](https://github.com/ionic-team/ionic/issues/20253) ([f896821](https://github.com/ionic-team/ionic/commit/f8968217533ff60948047510064d2f15d01c249c))
+
+
+### Features
+
+* **components:** improve button states and add new css properties ([#19440](https://github.com/ionic-team/ionic/issues/19440)) ([9415929](https://github.com/ionic-team/ionic/commit/94159291b27ddf1a859c8f3f87a0d6e54a8b5f13)), closes [#20213](https://github.com/ionic-team/ionic/issues/20213) [#19965](https://github.com/ionic-team/ionic/issues/19965)
+* **react:** add Ionic Animations wrapper (experimental) ([#20273](https://github.com/ionic-team/ionic/issues/20273)) ([b59d764](https://github.com/ionic-team/ionic/commit/b59d7647fd6f9a645a4ec0fe9aca526ea5eda4e0))
+* **segment-button:** add --indicator-height property to segment button ([#19653](https://github.com/ionic-team/ionic/issues/19653)) ([d76a503](https://github.com/ionic-team/ionic/commit/d76a5031c4c96b5fdf691a56ed61d3dcc4e4dafb))
+
+
+### BREAKING CHANGES
+
+> We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app [in the developer console](https://javascript.info/devtools).
+
+*Activated Class*
+
+The `activated` class that is automatically added to buttons on press has been renamed to `ion-activated`. This will be more consistent with our `ion-focused` class we add and also will reduce conflicts with users' CSS.
+
+*CSS Variables*
+
+The `--background-hover`, `--background-focused` and `--background-activated` CSS variables on components that render native buttons will now have an opacity automatically set. If you are setting any of these like the following:
+
+```
+--background-hover: rgba(44, 44, 44, 0.08);
+```
+
+You will likely not see a hover state anymore. It should be updated to only set the desired color:
+
+```
+--background-hover: rgba(44, 44, 44);
+```
+
+If the opacity desired is something other than what the spec asks for, use:
+
+```
+--background-hover: rgba(44, 44, 44);
+--background-hover-opacity: 1;
+```
+
+
+
+## [4.11.9](https://github.com/ionic-team/ionic/compare/v4.11.8...v4.11.9) (2020-01-23)
+
+### Bug Fixes
+
+* **core:** updating type of input value to accept numbers, fixes [#20173](https://github.com/ionic-team/ionic/issues/20173) ([#20267](https://github.com/ionic-team/ionic/issues/20267)) ([7080205](https://github.com/ionic-team/ionic/commit/708020551f9c51ca3b32d7b49bf4572db3dda12e))
+* **react:** adding missing overlay component events, fixes [#19923](https://github.com/ionic-team/ionic/issues/19923) ([#20266](https://github.com/ionic-team/ionic/issues/20266)) ([ec6a8dd](https://github.com/ionic-team/ionic/commit/ec6a8dd86f3854edba367f79a6ebac7d60eed839))
+* **react:** Don't render overlay children if isOpen is false, fixes [#20225](https://github.com/ionic-team/ionic/issues/20225) ([#20226](https://github.com/ionic-team/ionic/issues/20226)) ([aff9612](https://github.com/ionic-team/ionic/commit/aff9612d1197dca48eab6eff9d749032c380cf82))
+* **react:** re attach props on update, fixes 20192 ([#20228](https://github.com/ionic-team/ionic/issues/20228)) ([9e35ebe](https://github.com/ionic-team/ionic/commit/9e35ebed4a1590ef2521f5f8c393bdd9dea32a04))
+* **react:** remove leaving view when routerdirection is back, fixes [#20124](https://github.com/ionic-team/ionic/issues/20124) ([#20268](https://github.com/ionic-team/ionic/issues/20268)) ([63d4e87](https://github.com/ionic-team/ionic/commit/63d4e877fb18c90d70c4cbd5f66ffccb8ee6489c))
+* **react:** support routes without a path for notfound routes, fixes [#20259](https://github.com/ionic-team/ionic/issues/20259) ([#20261](https://github.com/ionic-team/ionic/issues/20261)) ([2f8c13b](https://github.com/ionic-team/ionic/commit/2f8c13b6960f9bcfb941c36fa6e1742b96f80ba9))
+* **react:** update icon types to be a string as well, fixes [#20229](https://github.com/ionic-team/ionic/issues/20229) ([#20230](https://github.com/ionic-team/ionic/issues/20230)) ([1411d8a](https://github.com/ionic-team/ionic/commit/1411d8a173bfefd7db5241218fd5641b7e9da823))
+
+
+# [5.0.0-beta.5](https://github.com/ionic-team/ionic/compare/v4.11.8...v5.0.0-beta.5) (2020-01-17)
+
+
+### Bug Fixes
+
+* **action-sheet:** allow scrollable action sheet with many options ([#20145](https://github.com/ionic-team/ionic/issues/20145)) ([53fad97](https://github.com/ionic-team/ionic/commit/53fad978c5a57efe34671db6cbede49c4a5af866)), closes [#17311](https://github.com/ionic-team/ionic/issues/17311)
+* **card:** remove top padding of content in iOS if under header ([#20223](https://github.com/ionic-team/ionic/issues/20223)) ([9232f16](https://github.com/ionic-team/ionic/commit/9232f16eea8163c1ac0797abd9b6e92da44bacb1))
+* **content:** scroll-content div now takes up full height of container ([#20194](https://github.com/ionic-team/ionic/issues/20194)) ([9d63b41](https://github.com/ionic-team/ionic/commit/9d63b41a5296688524c64f828f92090d73d6b556)), closes [#20185](https://github.com/ionic-team/ionic/issues/20185)
+* **header:** header opacity properly resets on collapsible titles ([#20202](https://github.com/ionic-team/ionic/issues/20202)) ([8e11f79](https://github.com/ionic-team/ionic/commit/8e11f79fcca94a9c50ccc7e18e0fe44ef9764b1d))
+* **modal:** prevent double dismiss via gesture and backdrop tap on card-style modal ([#20203](https://github.com/ionic-team/ionic/issues/20203)) ([5b0400d](https://github.com/ionic-team/ionic/commit/5b0400d5afec308861408967a5f61c9b93af0004))
+* **picker:** pick correct option at low velocities ([#19660](https://github.com/ionic-team/ionic/issues/19660)) ([39d1262](https://github.com/ionic-team/ionic/commit/39d12629dbc12e4a86037b09350ec1c49ed6e2e4)), closes [#19659](https://github.com/ionic-team/ionic/issues/19659)
+* **react:** updating icon type and add caret to internal icons ([#20216](https://github.com/ionic-team/ionic/issues/20216)) ([dc78f98](https://github.com/ionic-team/ionic/commit/dc78f981531960791a425b3b1b81d45d5065a263))
+* **ssr:** add reflect content-id attribute to applicable properties ([#20169](https://github.com/ionic-team/ionic/issues/20169)) ([3aa47e6](https://github.com/ionic-team/ionic/commit/3aa47e6e2f18c3a07f2c0560a0946571e8e6815d))
+
+
+### Code Refactoring
+
+* removed checked/selected properties in favor of setting value on parent ([#19449](https://github.com/ionic-team/ionic/issues/19449)) ([a5229d9](https://github.com/ionic-team/ionic/commit/a5229d90ca2a608e8bf4db0c8f71c86d481dd649))
+
+
+### Features
+
+* **datetime:** add custom timezone display property ([#19519](https://github.com/ionic-team/ionic/issues/19519)) ([7b032c5](https://github.com/ionic-team/ionic/commit/7b032c5e9b396fcfb0b0e313aff1bebcbc43305e)), closes [#19401](https://github.com/ionic-team/ionic/issues/19401)
+* **segment:** update design for iOS and MD spec ([#19036](https://github.com/ionic-team/ionic/issues/19036)) ([dc66ce4](https://github.com/ionic-team/ionic/commit/dc66ce48e1f210ca57cecae5c89e5dc3b7e95de5)), closes [#18663](https://github.com/ionic-team/ionic/issues/18663)
+* **toast:** expose shadow parts ([#20146](https://github.com/ionic-team/ionic/issues/20146)) ([3b4988a](https://github.com/ionic-team/ionic/commit/3b4988aa60dc6d31e1bc3367cb8f5e8d85710ac6))
+
+
+### BREAKING CHANGES
+
+> We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app [in the developer console](https://javascript.info/devtools).
+
+* The following components have been updated to remove the checked or selected properties:
+
+- Radio
+- Segment Button
+- Select
+
+Developers should set the value property on the respective parent components in order to managed checked/selected status. See the [Breaking Changes](./BREAKING.md) document for updated usage examples.
+
+
+* Controller components have been removed. Developers should user their respective imports instead. This only affects vanilla JS applications.
+
+Before:
+```html
+<ion-modal-controller></ion-modal-controller>
+```
+
+After:
+```javascript
+import { modalController } from '@ionic/core';
+```
+
+## [4.11.8](https://github.com/ionic-team/ionic/compare/v4.11.7...v4.11.8) (2020-01-13)
+
+* **react:** add missing react memory router ([8a5aba2](https://github.com/ionic-team/ionic/commit/8a5aba206865ce2af7f8bb85f4e7cd8dec37831d))
+* **react:** fixing type of icon in ToastOptions, ActionSheetOptions, fixes [#20100](https://github.com/ionic-team/ionic/issues/20100) ([857bab6](https://github.com/ionic-team/ionic/commit/857bab66419a851c6d189cd1456cd67c1c2d934c))
+* **react:** supporting ios and md props on icons ([#20170](https://github.com/ionic-team/ionic/issues/20170)) ([676cc19](https://github.com/ionic-team/ionic/commit/676cc19b89cd6374346aaac9cc3292872c7148fa))
+
+
+# [5.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v5.0.0-beta.3...v5.0.0-beta.4) (2020-01-06)
+
+
+### Features
+
+* **refresher:** add MD native refresher ([#20096](https://github.com/ionic-team/ionic/issues/20096)) ([5b81bdf](https://github.com/ionic-team/ionic/commit/5b81bdfcf18ed182bde14bbea4957b49ea886322)), closes [#17316](https://github.com/ionic-team/ionic/issues/17316)
+
+
+
 # [5.0.0-beta.3](https://github.com/ionic-team/ionic/compare/v4.11.7...v5.0.0-beta.3) (2020-01-03)
 
 
@@ -25,6 +208,8 @@
 
 ### BREAKING CHANGES
 
+> We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app [in the developer console](https://javascript.info/devtools).
+
 * **searchbar:** The `inputmode` property for `ion-searchbar` now defaults to `undefined`. To get the old behavior, set the `inputmode` property to `"search"`.
 
 
@@ -108,7 +293,7 @@ npm i @types/react@latest @types/react-dom@latest
 
 ### Breaking Changes
 
-> We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the console.
+> We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app [in the developer console](https://javascript.info/devtools).
 
 * **back-button:** convert back button to shadow ([#19411](https://github.com/ionic-team/ionic/pull/19411)) ([0d40d3f](https://github.com/ionic-team/ionic/commit/0d40d3f3b72aac7932ac71e6573d8bbb65a01515))
 * **ionicons:** update to Ionicons v5. See https://ionicons.com for more information. ([#19670](https://github.com/ionic-team/ionic/pull/19670)) ([69e10de](https://github.com/ionic-team/ionic/commit/69e10de718dcba4d43e82bd37aeacd2585dd9a79))
@@ -198,7 +383,7 @@ npm i @types/react@latest @types/react-dom@latest
 
 ### Breaking Changes
 
-> We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app in the console.
+> We recommend updating to the latest version of 4.x before trying out version 5 in order to see deprecation warnings related to your app [in the developer console](https://javascript.info/devtools).
 
 * **all:** mode is now cascaded from parent to child component. If this is not desired set a different mode on the child component. ([#19369](https://github.com/ionic-team/ionic/issues/19369)) ([55462d7](https://github.com/ionic-team/ionic/commit/55462d7a0935f57b6855f9bd1bf788bfcf532bc3))
 * **anchor:** remove `ion-anchor`, use `ion-router-link` instead. ([#18935](https://github.com/ionic-team/ionic/issues/18935)) ([e7cd197](https://github.com/ionic-team/ionic/commit/e7cd197af79cdf87f04bc769e0367c7e93c0aa0b))

angular/BREAKING.md

@@ -507,7 +507,7 @@ _In the following examples, `{breakpoint}` refers to the optional screen breakpo
 - `push-{breakpoint}-{value}` attributes have been renamed to `push-{breakpoint}=“{value}”`
 - `pull-{breakpoint}-{value}` attributes have been renamed to `pull-{breakpoint}=“{value}”`
 
-Customizing the padding and width of a grid should now be done with CSS variables. For more information, see [Grid Layout](https://github.com/ionic-team/ionic-docs/blob/master/src/content/layout/grid.md).
+Customizing the padding and width of a grid should now be done with CSS variables. For more information, see [Grid Layout](https://github.com/ionic-team/ionic-docs/blob/master/src/pages/layout/grid.md).
 
 ## Icon
 

angular/README.md

@@ -23,7 +23,7 @@ Ionic Angular specific building blocks on top of [@ionic/core](https://www.npmjs
 
 1. Pull the latest from master
 2. Build ionic/angular: `npm run build`
-3. Run `npm link` from ionic/angular directory
+3. Run `npm link` from `ionic/angular/dist` directory
 4. Create a blank angular project
 
 ```

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-rc.3",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -42,7 +42,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "5.0.0-beta.3",
+    "@ionic/core": "5.0.0-rc.3",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {
@@ -74,7 +74,7 @@
     "typescript": "3.4.5",
     "zone.js": "^0.8.28"
   },
-  "schematics": "schematics/collection.json",
+  "schematics": "./schematics/collection.json",
   "ngPackage": {
     "lib": {
       "entryFile": "src/index.ts"

angular/src/directives/proxies.ts

@@ -195,8 +195,8 @@ export class IonContent {
 }
 
 export declare interface IonDatetime extends Components.IonDatetime {}
-@ProxyCmp({inputs: ['cancelText', 'dayNames', 'dayShortNames', 'dayValues', 'disabled', 'displayFormat', 'doneText', 'hourValues', 'max', 'min', 'minuteValues', 'mode', 'monthNames', 'monthShortNames', 'monthValues', 'name', 'pickerFormat', 'pickerOptions', 'placeholder', 'readonly', 'value', 'yearValues'], 'methods': ['open']})
-@Component({ selector: 'ion-datetime', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['cancelText', 'dayNames', 'dayShortNames', 'dayValues', 'disabled', 'displayFormat', 'doneText', 'hourValues', 'max', 'min', 'minuteValues', 'mode', 'monthNames', 'monthShortNames', 'monthValues', 'name', 'pickerFormat', 'pickerOptions', 'placeholder', 'readonly', 'value', 'yearValues'] })
+@ProxyCmp({inputs: ['cancelText', 'dayNames', 'dayShortNames', 'dayValues', 'disabled', 'displayFormat', 'displayTimezone', 'doneText', 'hourValues', 'max', 'min', 'minuteValues', 'mode', 'monthNames', 'monthShortNames', 'monthValues', 'name', 'pickerFormat', 'pickerOptions', 'placeholder', 'readonly', 'value', 'yearValues'], 'methods': ['open']})
+@Component({ selector: 'ion-datetime', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['cancelText', 'dayNames', 'dayShortNames', 'dayValues', 'disabled', 'displayFormat', 'displayTimezone', 'doneText', 'hourValues', 'max', 'min', 'minuteValues', 'mode', 'monthNames', 'monthShortNames', 'monthValues', 'name', 'pickerFormat', 'pickerOptions', 'placeholder', 'readonly', 'value', 'yearValues'] })
 export class IonDatetime {
   ionCancel!: EventEmitter<CustomEvent>;
   ionChange!: EventEmitter<CustomEvent>;
@@ -534,17 +534,16 @@ export class IonProgressBar {
 }
 
 export declare interface IonRadio extends Components.IonRadio {}
-@ProxyCmp({inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value']})
-@Component({ selector: 'ion-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['checked', 'color', 'disabled', 'mode', 'name', 'value'] })
+@ProxyCmp({inputs: ['color', 'disabled', 'mode', 'name', 'value']})
+@Component({ selector: 'ion-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['color', 'disabled', 'mode', 'name', 'value'] })
 export class IonRadio {
-  ionSelect!: EventEmitter<CustomEvent>;
   ionFocus!: EventEmitter<CustomEvent>;
   ionBlur!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionSelect', 'ionFocus', 'ionBlur']);
+    proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']);
   }
 }
 
@@ -680,15 +679,13 @@ export class IonSegment {
 }
 
 export declare interface IonSegmentButton extends Components.IonSegmentButton {}
-@ProxyCmp({inputs: ['checked', 'disabled', 'layout', 'mode', 'type', 'value']})
-@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['checked', 'disabled', 'layout', 'mode', 'type', 'value'] })
+@ProxyCmp({inputs: ['disabled', 'layout', 'mode', 'type', 'value']})
+@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled', 'layout', 'mode', 'type', 'value'] })
 export class IonSegmentButton {
-  ionSelect!: EventEmitter<CustomEvent>;
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionSelect']);
   }
 }
 
@@ -709,8 +706,8 @@ export class IonSelect {
 }
 
 export declare interface IonSelectOption extends Components.IonSelectOption {}
-@ProxyCmp({inputs: ['disabled', 'selected', 'value']})
-@Component({ selector: 'ion-select-option', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled', 'selected', 'value'] })
+@ProxyCmp({inputs: ['disabled', 'value']})
+@Component({ selector: 'ion-select-option', changeDetection: ChangeDetectionStrategy.OnPush, template: '<ng-content></ng-content>', inputs: ['disabled', 'value'] })
 export class IonSelectOption {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {

angular/src/schematics/add/index.ts

@@ -2,7 +2,7 @@ import { join, Path } from '@angular-devkit/core';
 import { apply, chain, mergeWith, move, Rule, SchematicContext, SchematicsException, template, Tree, url } from '@angular-devkit/schematics';
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
 import { addModuleImportToRootModule } from './../utils/ast';
-import { addArchitectBuilder, addStyle, getWorkspace, addAsset } from './../utils/config';
+import { addArchitectBuilder, addStyle, getWorkspace, addAsset, WorkspaceProject, WorkspaceSchema } from './../utils/config';
 import { addPackageToPackageJson } from './../utils/package';
 import { Schema as IonAddOptions } from './schema';
 
@@ -25,7 +25,7 @@ function addIonicAngularToolkitToPackageJson(): Rule {
   };
 }
 
-function addIonicAngularModuleToAppModule(projectSourceRoot): Rule {
+function addIonicAngularModuleToAppModule(projectSourceRoot: Path): Rule {
   return (host: Tree) => {
     addModuleImportToRootModule(
       host,
@@ -37,7 +37,7 @@ function addIonicAngularModuleToAppModule(projectSourceRoot): Rule {
   };
 }
 
-function addIonicStyles(): Rule {
+function addIonicStyles(projectSourceRoot: Path): Rule {
   return (host: Tree) => {
     const ionicStyles = [
       'node_modules/@ionic/angular/css/normalize.css',
@@ -49,7 +49,7 @@ function addIonicStyles(): Rule {
       'node_modules/@ionic/angular/css/text-alignment.css',
       'node_modules/@ionic/angular/css/text-transformation.css',
       'node_modules/@ionic/angular/css/flex-utils.css',
-      'src/theme/variables.css'
+      `${projectSourceRoot}/theme/variables.css`
     ].forEach(entry => {
       addStyle(host, entry);
     });
@@ -69,29 +69,29 @@ function addIonicons(): Rule {
   };
 }
 
-function addIonicBuilder(): Rule {
+function addIonicBuilder(projectName: string): Rule {
   return (host: Tree) => {
     addArchitectBuilder(host, 'ionic-cordova-serve', {
       builder: '@ionic/angular-toolkit:cordova-serve',
       options: {
-        cordovaBuildTarget: 'app:ionic-cordova-build',
-        devServerTarget: 'app:serve'
+        cordovaBuildTarget: `${projectName}:ionic-cordova-build`,
+        devServerTarget: `${projectName}:serve`
       },
       configurations: {
         production: {
-          cordovaBuildTarget: 'app:ionic-cordova-build:production',
-          devServerTarget: 'app:serve:production'
+          cordovaBuildTarget: `${projectName}:ionic-cordova-build:production`,
+          devServerTarget: `${projectName}:serve:production`
         }
       }
     });
     addArchitectBuilder(host, 'ionic-cordova-build', {
       builder: '@ionic/angular-toolkit:cordova-build',
       options: {
-        browserTarget: 'app:build'
+        browserTarget: `${projectName}:build`
       },
       configurations: {
         production: {
-          browserTarget: 'app:build:production'
+          browserTarget: `${projectName}:build:production`
         }
       }
     });
@@ -100,25 +100,24 @@ function addIonicBuilder(): Rule {
 }
 
 function installNodeDeps() {
-  return (host: Tree, context: SchematicContext) => {
+  return (_host: Tree, context: SchematicContext) => {
     context.addTask(new NodePackageInstallTask());
   };
 }
 
 export default function ngAdd(options: IonAddOptions): Rule {
   return (host: Tree) => {
-    const workspace = getWorkspace(host);
+    const workspace: WorkspaceSchema = getWorkspace(host);
     if (!options.project) {
       options.project = Object.keys(workspace.projects)[0];
     }
-    const project = workspace.projects[options.project];
+    const project: WorkspaceProject = workspace.projects[options.project];
     if (project.projectType !== 'application') {
       throw new SchematicsException(
         `Ionic Add requires a project type of "application".`
       );
     }
-
-    const sourcePath = join(project.root as Path, 'src');
+    const sourcePath: Path = join(project.root as Path, project.sourceRoot as Path);
     const rootTemplateSource = apply(url('./files/root'), [
       template({ ...options }),
       move(sourcePath)
@@ -128,8 +127,8 @@ export default function ngAdd(options: IonAddOptions): Rule {
       addIonicAngularToPackageJson(),
       addIonicAngularToolkitToPackageJson(),
       addIonicAngularModuleToAppModule(sourcePath),
-      addIonicBuilder(),
-      addIonicStyles(),
+      addIonicBuilder(options.project),
+      addIonicStyles(sourcePath),
       addIonicons(),
       mergeWith(rootTemplateSource),
       // install freshly added dependencies

angular/src/schematics/utils/config.ts

@@ -89,6 +89,7 @@ export function addArchitectBuilder(host: Tree, builderName: string, builderOpts
 }
 
 export type WorkspaceSchema = experimental.workspace.WorkspaceSchema;
+export type WorkspaceProject = experimental.workspace.WorkspaceProject;
 
 export function getWorkspacePath(host: Tree): string {
   const possibleFiles = ['/angular.json', '/.angular.json'];

angular/test/test-app/e2e/protractor.conf.js

@@ -1,4 +1,4 @@
-// @ts-check
+  // @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 

core/CONTRIBUTING.md

@@ -51,7 +51,7 @@ npm start
 
 You should be able to navigate to `http://localhost:3333` which will look like a file browser.
 
-E2E tests are located inside the `src/component` folder, in the following way: `http://localhost:3333/src/components/{COMPONENT}/test/`
+E2E tests are located inside the `src/components` folder, in the following way: `http://localhost:3333/src/components/{COMPONENT}/test/`
 
 
 **Path examples:**

core/api.txt

@@ -21,8 +21,20 @@ ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail<any>,true
 ion-action-sheet,event,ionActionSheetWillPresent,void,true
 ion-action-sheet,css-prop,--backdrop-opacity
 ion-action-sheet,css-prop,--background
-ion-action-sheet,css-prop,--background-activated
-ion-action-sheet,css-prop,--background-selected
+ion-action-sheet,css-prop,--button-background
+ion-action-sheet,css-prop,--button-background-activated
+ion-action-sheet,css-prop,--button-background-activated-opacity
+ion-action-sheet,css-prop,--button-background-focused
+ion-action-sheet,css-prop,--button-background-focused-opacity
+ion-action-sheet,css-prop,--button-background-hover
+ion-action-sheet,css-prop,--button-background-hover-opacity
+ion-action-sheet,css-prop,--button-background-selected
+ion-action-sheet,css-prop,--button-background-selected-opacity
+ion-action-sheet,css-prop,--button-color
+ion-action-sheet,css-prop,--button-color-activated
+ion-action-sheet,css-prop,--button-color-focused
+ion-action-sheet,css-prop,--button-color-hover
+ion-action-sheet,css-prop,--button-color-selected
 ion-action-sheet,css-prop,--color
 ion-action-sheet,css-prop,--height
 ion-action-sheet,css-prop,--max-height
@@ -31,11 +43,6 @@ ion-action-sheet,css-prop,--min-height
 ion-action-sheet,css-prop,--min-width
 ion-action-sheet,css-prop,--width
 
-ion-action-sheet-controller,none
-ion-action-sheet-controller,method,create,create(options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>
-ion-action-sheet-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
-ion-action-sheet-controller,method,getTop,getTop() => Promise<HTMLIonActionSheetElement | undefined>
-
 ion-alert,scoped
 ion-alert,prop,animated,boolean,true,false,false
 ion-alert,prop,backdropDismiss,boolean,true,false,false
@@ -67,11 +74,6 @@ ion-alert,css-prop,--min-height
 ion-alert,css-prop,--min-width
 ion-alert,css-prop,--width
 
-ion-alert-controller,none
-ion-alert-controller,method,create,create(options: AlertOptions) => Promise<HTMLIonAlertElement>
-ion-alert-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
-ion-alert-controller,method,getTop,getTop() => Promise<HTMLIonAlertElement | undefined>
-
 ion-app,none
 
 ion-avatar,shadow
@@ -87,7 +89,9 @@ ion-back-button,prop,text,null | string | undefined,undefined,false,false
 ion-back-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-back-button,css-prop,--background
 ion-back-button,css-prop,--background-focused
+ion-back-button,css-prop,--background-focused-opacity
 ion-back-button,css-prop,--background-hover
+ion-back-button,css-prop,--background-hover-opacity
 ion-back-button,css-prop,--border-radius
 ion-back-button,css-prop,--color
 ion-back-button,css-prop,--color-focused
@@ -152,8 +156,11 @@ ion-button,event,ionBlur,void,true
 ion-button,event,ionFocus,void,true
 ion-button,css-prop,--background
 ion-button,css-prop,--background-activated
+ion-button,css-prop,--background-activated-opacity
 ion-button,css-prop,--background-focused
+ion-button,css-prop,--background-focused-opacity
 ion-button,css-prop,--background-hover
+ion-button,css-prop,--background-hover-opacity
 ion-button,css-prop,--border-color
 ion-button,css-prop,--border-radius
 ion-button,css-prop,--border-style
@@ -301,6 +308,7 @@ ion-datetime,prop,dayShortNames,string | string[] | undefined,undefined,false,fa
 ion-datetime,prop,dayValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,prop,disabled,boolean,false,false,false
 ion-datetime,prop,displayFormat,string,'MMM D, YYYY',false,false
+ion-datetime,prop,displayTimezone,string | undefined,undefined,false,false
 ion-datetime,prop,doneText,string,'Done',false,false
 ion-datetime,prop,hourValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,prop,max,string | undefined,undefined,false,false
@@ -312,7 +320,7 @@ ion-datetime,prop,monthShortNames,string | string[] | undefined,undefined,false,
 ion-datetime,prop,monthValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,prop,name,string,this.inputId,false,false
 ion-datetime,prop,pickerFormat,string | undefined,undefined,false,false
-ion-datetime,prop,pickerOptions,undefined | { columns?: PickerColumn[] | undefined; buttons?: PickerButton[] | undefined; cssClass?: string | string[] | undefined; backdropDismiss?: boolean | undefined; animated?: boolean | undefined; mode?: "ios" | "md" | undefined; keyboardClose?: boolean | undefined; id?: string | undefined; enterAnimation?: AnimationBuilder | undefined; leaveAnimation?: AnimationBuilder | undefined; },undefined,false,false
+ion-datetime,prop,pickerOptions,undefined | { columns?: PickerColumn[] | undefined; buttons?: PickerButton[] | undefined; cssClass?: string | string[] | undefined; showBackdrop?: boolean | undefined; backdropDismiss?: boolean | undefined; animated?: boolean | undefined; mode?: "ios" | "md" | undefined; keyboardClose?: boolean | undefined; id?: string | undefined; enterAnimation?: AnimationBuilder | undefined; leaveAnimation?: AnimationBuilder | undefined; },undefined,false,false
 ion-datetime,prop,placeholder,null | string | undefined,undefined,false,false
 ion-datetime,prop,readonly,boolean,false,false,false
 ion-datetime,prop,value,null | string | undefined,undefined,false,false
@@ -353,8 +361,11 @@ ion-fab-button,event,ionBlur,void,true
 ion-fab-button,event,ionFocus,void,true
 ion-fab-button,css-prop,--background
 ion-fab-button,css-prop,--background-activated
+ion-fab-button,css-prop,--background-activated-opacity
 ion-fab-button,css-prop,--background-focused
+ion-fab-button,css-prop,--background-focused-opacity
 ion-fab-button,css-prop,--background-hover
+ion-fab-button,css-prop,--background-hover-opacity
 ion-fab-button,css-prop,--border-color
 ion-fab-button,css-prop,--border-radius
 ion-fab-button,css-prop,--border-style
@@ -444,7 +455,7 @@ ion-input,prop,size,number | undefined,undefined,false,false
 ion-input,prop,spellcheck,boolean,false,false,false
 ion-input,prop,step,string | undefined,undefined,false,false
 ion-input,prop,type,"date" | "email" | "number" | "password" | "search" | "tel" | "text" | "time" | "url",'text',false,false
-ion-input,prop,value,null | string | undefined,'',false,false
+ion-input,prop,value,null | number | string | undefined,'',false,false
 ion-input,method,getInputElement,getInputElement() => Promise<HTMLInputElement>
 ion-input,method,setFocus,setFocus() => Promise<void>
 ion-input,event,ionBlur,void,true
@@ -478,8 +489,11 @@ ion-item,prop,target,string | undefined,undefined,false,false
 ion-item,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-item,css-prop,--background
 ion-item,css-prop,--background-activated
+ion-item,css-prop,--background-activated-opacity
 ion-item,css-prop,--background-focused
+ion-item,css-prop,--background-focused-opacity
 ion-item,css-prop,--background-hover
+ion-item,css-prop,--background-hover-opacity
 ion-item,css-prop,--border-color
 ion-item,css-prop,--border-radius
 ion-item,css-prop,--border-style
@@ -607,16 +621,11 @@ ion-loading,css-prop,--min-width
 ion-loading,css-prop,--spinner-color
 ion-loading,css-prop,--width
 
-ion-loading-controller,none
-ion-loading-controller,method,create,create(options?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>
-ion-loading-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
-ion-loading-controller,method,getTop,getTop() => Promise<HTMLIonLoadingElement | undefined>
-
 ion-menu,shadow
-ion-menu,prop,contentId,string | undefined,undefined,false,false
+ion-menu,prop,contentId,string | undefined,undefined,false,true
 ion-menu,prop,disabled,boolean,false,false,false
 ion-menu,prop,maxEdgeStart,number,50,false,false
-ion-menu,prop,menuId,string | undefined,undefined,false,false
+ion-menu,prop,menuId,string | undefined,undefined,false,true
 ion-menu,prop,side,"end" | "start",'start',false,true
 ion-menu,prop,swipeGesture,boolean,true,false,false
 ion-menu,prop,type,string | undefined,undefined,false,false
@@ -646,7 +655,9 @@ ion-menu-button,prop,menu,string | undefined,undefined,false,false
 ion-menu-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-menu-button,css-prop,--background
 ion-menu-button,css-prop,--background-focused
+ion-menu-button,css-prop,--background-focused-opacity
 ion-menu-button,css-prop,--background-hover
+ion-menu-button,css-prop,--background-hover-opacity
 ion-menu-button,css-prop,--border-radius
 ion-menu-button,css-prop,--color
 ion-menu-button,css-prop,--color-focused
@@ -656,20 +667,6 @@ ion-menu-button,css-prop,--padding-end
 ion-menu-button,css-prop,--padding-start
 ion-menu-button,css-prop,--padding-top
 
-ion-menu-controller,none
-ion-menu-controller,method,close,close(menu?: string | null | undefined) => Promise<boolean>
-ion-menu-controller,method,enable,enable(enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
-ion-menu-controller,method,get,get(menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
-ion-menu-controller,method,getMenus,getMenus() => Promise<HTMLIonMenuElement[]>
-ion-menu-controller,method,getOpen,getOpen() => Promise<HTMLIonMenuElement | undefined>
-ion-menu-controller,method,isAnimating,isAnimating() => Promise<boolean>
-ion-menu-controller,method,isEnabled,isEnabled(menu?: string | null | undefined) => Promise<boolean>
-ion-menu-controller,method,isOpen,isOpen(menu?: string | null | undefined) => Promise<boolean>
-ion-menu-controller,method,open,open(menu?: string | null | undefined) => Promise<boolean>
-ion-menu-controller,method,registerAnimation,registerAnimation(name: string, animation: AnimationBuilder) => Promise<void>
-ion-menu-controller,method,swipeGesture,swipeGesture(enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>
-ion-menu-controller,method,toggle,toggle(menu?: string | null | undefined) => Promise<boolean>
-
 ion-menu-toggle,shadow
 ion-menu-toggle,prop,autoHide,boolean,true,false,false
 ion-menu-toggle,prop,menu,string | undefined,undefined,false,false
@@ -708,11 +705,6 @@ ion-modal,css-prop,--min-height
 ion-modal,css-prop,--min-width
 ion-modal,css-prop,--width
 
-ion-modal-controller,none
-ion-modal-controller,method,create,create<T extends ComponentRef>(options: ModalOptions<T>) => Promise<HTMLIonModalElement>
-ion-modal-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
-ion-modal-controller,method,getTop,getTop() => Promise<HTMLIonModalElement | undefined>
-
 ion-nav,shadow
 ion-nav,prop,animated,boolean,true,false,false
 ion-nav,prop,animation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
@@ -780,11 +772,6 @@ ion-picker,css-prop,--min-height
 ion-picker,css-prop,--min-width
 ion-picker,css-prop,--width
 
-ion-picker-controller,none
-ion-picker-controller,method,create,create(options: PickerOptions) => Promise<HTMLIonPickerElement>
-ion-picker-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
-ion-picker-controller,method,getTop,getTop() => Promise<HTMLIonPickerElement | undefined>
-
 ion-popover,scoped
 ion-popover,prop,animated,boolean,true,false,false
 ion-popover,prop,backdropDismiss,boolean,true,false,false
@@ -816,11 +803,6 @@ ion-popover,css-prop,--min-height
 ion-popover,css-prop,--min-width
 ion-popover,css-prop,--width
 
-ion-popover-controller,none
-ion-popover-controller,method,create,create<T extends ComponentRef>(options: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>
-ion-popover-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
-ion-popover-controller,method,getTop,getTop() => Promise<HTMLIonPopoverElement | undefined>
-
 ion-progress-bar,shadow
 ion-progress-bar,prop,buffer,number,1,false,false
 ion-progress-bar,prop,color,string | undefined,undefined,false,false
@@ -833,7 +815,6 @@ ion-progress-bar,css-prop,--buffer-background
 ion-progress-bar,css-prop,--progress-background
 
 ion-radio,shadow
-ion-radio,prop,checked,boolean,false,false,false
 ion-radio,prop,color,string | undefined,undefined,false,false
 ion-radio,prop,disabled,boolean,false,false,false
 ion-radio,prop,mode,"ios" | "md",undefined,false,false
@@ -841,7 +822,6 @@ 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,ionSelect,RadioChangeEventDetail,true
 ion-radio,css-prop,--border-radius
 ion-radio,css-prop,--color
 ion-radio,css-prop,--color-checked
@@ -985,37 +965,40 @@ ion-searchbar,css-prop,--placeholder-font-style
 ion-searchbar,css-prop,--placeholder-font-weight
 ion-searchbar,css-prop,--placeholder-opacity
 
-ion-segment,scoped
+ion-segment,shadow
 ion-segment,prop,color,string | undefined,undefined,false,false
 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,SegmentChangeEventDetail,true
+ion-segment,css-prop,--background
 
 ion-segment-button,shadow
-ion-segment-button,prop,checked,boolean,false,false,false
 ion-segment-button,prop,disabled,boolean,false,false,false
 ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
 ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
 ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
 ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false,false
-ion-segment-button,event,ionSelect,void,true
 ion-segment-button,css-prop,--background
-ion-segment-button,css-prop,--background-activated
 ion-segment-button,css-prop,--background-checked
+ion-segment-button,css-prop,--background-focused
+ion-segment-button,css-prop,--background-focused-opacity
 ion-segment-button,css-prop,--background-hover
+ion-segment-button,css-prop,--background-hover-opacity
 ion-segment-button,css-prop,--border-color
 ion-segment-button,css-prop,--border-radius
 ion-segment-button,css-prop,--border-style
 ion-segment-button,css-prop,--border-width
 ion-segment-button,css-prop,--color
-ion-segment-button,css-prop,--color-activated
 ion-segment-button,css-prop,--color-checked
-ion-segment-button,css-prop,--color-checked-disabled
-ion-segment-button,css-prop,--color-disabled
+ion-segment-button,css-prop,--color-focused
+ion-segment-button,css-prop,--color-hover
+ion-segment-button,css-prop,--indicator-box-shadow
 ion-segment-button,css-prop,--indicator-color
-ion-segment-button,css-prop,--indicator-color-checked
+ion-segment-button,css-prop,--indicator-height
+ion-segment-button,css-prop,--indicator-transform
+ion-segment-button,css-prop,--indicator-transition
 ion-segment-button,css-prop,--margin-bottom
 ion-segment-button,css-prop,--margin-end
 ion-segment-button,css-prop,--margin-start
@@ -1053,7 +1036,6 @@ ion-select,css-prop,--placeholder-opacity
 
 ion-select-option,shadow
 ion-select-option,prop,disabled,boolean,false,false,false
-ion-select-option,prop,selected,boolean,false,false,false
 ion-select-option,prop,value,any,undefined,false,false
 
 ion-skeleton-text,shadow
@@ -1116,7 +1098,7 @@ ion-spinner,prop,paused,boolean,false,false,false
 ion-spinner,css-prop,--color
 
 ion-split-pane,shadow
-ion-split-pane,prop,contentId,string | undefined,undefined,false,false
+ion-split-pane,prop,contentId,string | undefined,undefined,false,true
 ion-split-pane,prop,disabled,boolean,false,false,false
 ion-split-pane,prop,when,boolean | string,QUERY['lg'],false,false
 ion-split-pane,event,ionSplitPaneVisible,{ visible: boolean; },true
@@ -1151,7 +1133,9 @@ ion-tab-button,prop,tab,string | undefined,undefined,false,false
 ion-tab-button,prop,target,string | undefined,undefined,false,false
 ion-tab-button,css-prop,--background
 ion-tab-button,css-prop,--background-focused
+ion-tab-button,css-prop,--background-focused-opacity
 ion-tab-button,css-prop,--color
+ion-tab-button,css-prop,--color-focused
 ion-tab-button,css-prop,--color-selected
 ion-tab-button,css-prop,--padding-bottom
 ion-tab-button,css-prop,--padding-end
@@ -1256,11 +1240,6 @@ ion-toast,css-prop,--min-width
 ion-toast,css-prop,--start
 ion-toast,css-prop,--width
 
-ion-toast-controller,none
-ion-toast-controller,method,create,create(options?: ToastOptions | undefined) => Promise<HTMLIonToastElement>
-ion-toast-controller,method,dismiss,dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>
-ion-toast-controller,method,getTop,getTop() => Promise<HTMLIonToastElement | undefined>
-
 ion-toggle,shadow
 ion-toggle,prop,checked,boolean,false,false,false
 ion-toggle,prop,color,string | undefined,undefined,false,false

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-rc.3",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -30,7 +30,7 @@
     "loader/"
   ],
   "dependencies": {
-    "ionicons": "5.0.0-15",
+    "ionicons": "5.0.0-17",
     "tslib": "^1.10.0"
   },
   "devDependencies": {

core/src/components.d.ts

@@ -9,10 +9,8 @@
 import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 import {
   ActionSheetButton,
-  ActionSheetOptions,
   AlertButton,
   AlertInput,
-  AlertOptions,
   AnimationBuilder,
   CheckboxChangeEventDetail,
   Color,
@@ -29,17 +27,12 @@ import {
   ItemHeightFn,
   ItemRenderFn,
   ItemReorderEventDetail,
-  LoadingOptions,
   MenuChangeEventDetail,
-  ModalOptions,
   NavComponent,
   NavOptions,
   OverlayEventDetail,
   PickerButton,
   PickerColumn,
-  PickerOptions,
-  PopoverOptions,
-  RadioChangeEventDetail,
   RadioGroupChangeEventDetail,
   RangeChangeEventDetail,
   RangeValue,
@@ -67,7 +60,6 @@ import {
   TextareaChangeEventDetail,
   TextFieldTypes,
   ToastButton,
-  ToastOptions,
   ToggleChangeEventDetail,
   TransitionDoneFn,
   TransitionInstruction,
@@ -143,24 +135,6 @@ export namespace Components {
     */
     'translucent': boolean;
   }
-  interface IonActionSheetController {
-    /**
-    * Create an action sheet overlay with action sheet options.
-    * @param options The options to use to create the action sheet.
-    */
-    'create': (options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>;
-    /**
-    * Dismiss the open action sheet overlay.
-    * @param data Any data to emit in the dismiss events.
-    * @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-    * @param id The id of the action sheet to dismiss. If an id is not provided, it will dismiss the most recently opened action sheet.
-    */
-    'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
-    /**
-    * Get the most recently opened action sheet overlay.
-    */
-    'getTop': () => Promise<HTMLIonActionSheetElement | undefined>;
-  }
   interface IonAlert {
     /**
     * If `true`, the alert will animate.
@@ -234,24 +208,6 @@ export namespace Components {
     */
     'translucent': boolean;
   }
-  interface IonAlertController {
-    /**
-    * Create an alert overlay with alert options.
-    * @param options The options to use to create the alert.
-    */
-    'create': (options: AlertOptions) => Promise<HTMLIonAlertElement>;
-    /**
-    * Dismiss the open alert overlay.
-    * @param data Any data to emit in the dismiss events.
-    * @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-    * @param id The id of the alert to dismiss. If an id is not provided, it will dismiss the most recently opened alert.
-    */
-    'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
-    /**
-    * Get the most recently opened alert overlay.
-    */
-    'getTop': () => Promise<HTMLIonAlertElement | undefined>;
-  }
   interface IonApp {}
   interface IonAvatar {}
   interface IonBackButton {
@@ -680,6 +636,10 @@ export namespace Components {
     */
     'displayFormat': string;
     /**
+    * The timezone to use for display purposes only. See [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) for a list of supported timezones. If no value is provided, the component will default to displaying times in the user's local timezone.
+    */
+    'displayTimezone'?: string;
+    /**
     * The text to display on the picker's "Done" button.
     */
     'doneText': string;
@@ -1018,7 +978,7 @@ export namespace Components {
     /**
     * The value of the input.
     */
-    'value'?: string | null;
+    'value'?: string | number | null;
   }
   interface IonItem {
     /**
@@ -1276,24 +1236,6 @@ export namespace Components {
     */
     'translucent': boolean;
   }
-  interface IonLoadingController {
-    /**
-    * Create a loading overlay with loading options.
-    * @param options The options to use to create the loading.
-    */
-    'create': (options?: LoadingOptions | undefined) => Promise<HTMLIonLoadingElement>;
-    /**
-    * Dismiss the open loading overlay.
-    * @param data Any data to emit in the dismiss events.
-    * @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-    * @param id The id of the loading to dismiss. If an id is not provided, it will dismiss the most recently opened loading.
-    */
-    'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
-    /**
-    * Get the most recently opened loading overlay.
-    */
-    'getTop': () => Promise<HTMLIonLoadingElement | undefined>;
-  }
   interface IonMenu {
     /**
     * Closes the menu. If the menu is already closed or it can't be closed, it returns `false`.
@@ -1370,68 +1312,6 @@ export namespace Components {
     */
     'type': 'submit' | 'reset' | 'button';
   }
-  interface IonMenuController {
-    /**
-    * Close the menu. If a menu is specified, it will close that menu. If no menu is specified, then it will close any menu that is open. If it does not find any open menus, it will return `false`.
-    * @param menu The menuId or side of the menu to close.
-    */
-    'close': (menu?: string | null | undefined) => Promise<boolean>;
-    /**
-    * Enable or disable a menu. Disabling a menu will not allow gestures for that menu or any calls to open it. This is useful when there are multiple menus on the same side and only one of them should be allowed to open. Enabling a menu will automatically disable all other menus on that side.
-    * @param enable If `true`, the menu should be enabled.
-    * @param menu The menuId or side of the menu to enable or disable.
-    */
-    'enable': (enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
-    /**
-    * Get a menu instance. If a menu is not provided then it will return the first menu found. If the specified menu is `start` or `end`, then it will return the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `null`.
-    * @param menu The menuId or side of the menu.
-    */
-    'get': (menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
-    /**
-    * Get all menu instances.
-    */
-    'getMenus': () => Promise<HTMLIonMenuElement[]>;
-    /**
-    * Get the instance of the opened menu. Returns `null` if a menu is not found.
-    */
-    'getOpen': () => Promise<HTMLIonMenuElement | undefined>;
-    /**
-    * Get whether or not a menu is animating. Returns `true` if any menu is currently animating.
-    */
-    'isAnimating': () => Promise<boolean>;
-    /**
-    * Get whether or not the menu is enabled. Returns `true` if the specified menu is enabled. Returns `false` if a menu is disabled or not found.
-    * @param menu The menuId or side of the menu that is being checked.
-    */
-    'isEnabled': (menu?: string | null | undefined) => Promise<boolean>;
-    /**
-    * Get whether or not the menu is open. Returns `true` if the specified menu is open. If a menu is not specified, it will return `true` if any menu is currently open.
-    * @param menu The menuId or side of the menu that is being checked.
-    */
-    'isOpen': (menu?: string | null | undefined) => Promise<boolean>;
-    /**
-    * Open the menu. If a menu is not provided then it will open the first menu found. If the specified menu is `start` or `end`, then it will open the enabled menu on that side. Otherwise, it will try to find the menu using the menu's `id` property. If a menu is not found then it will return `false`.
-    * @param menu The menuId or side of the menu to open.
-    */
-    'open': (menu?: string | null | undefined) => Promise<boolean>;
-    /**
-    * Registers a new animation that can be used with any `ion-menu` by passing the name of the animation in its `type` property.
-    * @param name The name of the animation to register.
-    * @param animation The animation function to register.
-    */
-    'registerAnimation': (name: string, animation: AnimationBuilder) => Promise<void>;
-    /**
-    * Enable or disable the ability to swipe open the menu.
-    * @param enable If `true`, the menu swipe gesture should be enabled.
-    * @param menu The menuId or side of the menu to enable or disable the swipe gesture on.
-    */
-    'swipeGesture': (enable: boolean, menu?: string | null | undefined) => Promise<HTMLIonMenuElement | undefined>;
-    /**
-    * Toggle the menu open or closed. If the menu is already open, it will try to close the menu, otherwise it will try to open it. Returns `false` if a menu is not found.
-    * @param menu The menuId or side of the menu to toggle.
-    */
-    'toggle': (menu?: string | null | undefined) => Promise<boolean>;
-  }
   interface IonMenuToggle {
     /**
     * Automatically hides the content when the corresponding menu is not active.  By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.
@@ -1512,24 +1392,6 @@ export namespace Components {
     */
     'swipeToClose': boolean;
   }
-  interface IonModalController {
-    /**
-    * Create a modal overlay with modal options.
-    * @param options The options to use to create the modal.
-    */
-    'create': <T extends ComponentRef>(options: ModalOptions<T>) => Promise<HTMLIonModalElement>;
-    /**
-    * Dismiss the open modal overlay.
-    * @param data Any data to emit in the dismiss events.
-    * @param role The role of the element that is dismissing the modal. This can be useful in a button handler for determining which button was clicked to dismiss the modal. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-    * @param id The id of the modal to dismiss. If an id is not provided, it will dismiss the most recently opened modal.
-    */
-    'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
-    /**
-    * Get the most recently opened modal overlay.
-    */
-    'getTop': () => Promise<HTMLIonModalElement | undefined>;
-  }
   interface IonNav {
     /**
     * If `true`, the nav should animate the transition of components.
@@ -1741,24 +1603,6 @@ export namespace Components {
     */
     'col': PickerColumn;
   }
-  interface IonPickerController {
-    /**
-    * Create a picker overlay with picker options.
-    * @param options The options to use to create the picker.
-    */
-    'create': (options: PickerOptions) => Promise<HTMLIonPickerElement>;
-    /**
-    * Dismiss the open picker overlay.
-    * @param data Any data to emit in the dismiss events.
-    * @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-    * @param id The id of the picker to dismiss. If an id is not provided, it will dismiss the most recently opened picker.
-    */
-    'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
-    /**
-    * Get the most recently opened picker overlay.
-    */
-    'getTop': () => Promise<HTMLIonPickerElement | undefined>;
-  }
   interface IonPopover {
     /**
     * If `true`, the popover will animate.
@@ -1829,24 +1673,6 @@ export namespace Components {
     */
     'translucent': boolean;
   }
-  interface IonPopoverController {
-    /**
-    * Create a popover overlay with popover options.
-    * @param options The options to use to create the popover.
-    */
-    'create': <T extends ComponentRef>(options: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>;
-    /**
-    * Dismiss the open popover overlay.
-    * @param data Any data to emit in the dismiss events.
-    * @param role The role of the element that is dismissing the popover. This can be useful in a button handler for determining which button was clicked to dismiss the popover. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-    * @param id The id of the popover to dismiss. If an id is not provided, it will dismiss the most recently opened popover.
-    */
-    'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
-    /**
-    * Get the most recently opened popover overlay.
-    */
-    'getTop': () => Promise<HTMLIonPopoverElement | undefined>;
-  }
   interface IonProgressBar {
     /**
     * If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
@@ -1874,10 +1700,6 @@ export namespace Components {
     'value': number;
   }
   interface IonRadio {
-    /**
-    * If `true`, the radio is selected.
-    */
-    'checked': boolean;
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -2227,7 +2049,7 @@ export namespace Components {
     */
     'mode'?: "ios" | "md";
     /**
-    * If `true`, the segment buttons will overflow and the user can swipe to see them.
+    * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
     */
     'scrollable': boolean;
     /**
@@ -2236,10 +2058,6 @@ export namespace Components {
     'value'?: string | null;
   }
   interface IonSegmentButton {
-    /**
-    * If `true`, the segment button is selected.
-    */
-    'checked': boolean;
     /**
     * If `true`, the user cannot interact with the segment button.
     */
@@ -2322,10 +2140,6 @@ export namespace Components {
     */
     'disabled': boolean;
     /**
-    * If `true`, the element is selected.
-    */
-    'selected': boolean;
-    /**
     * The text value of the option.
     */
     'value'?: any | null;
@@ -2751,24 +2565,6 @@ export namespace Components {
     */
     'translucent': boolean;
   }
-  interface IonToastController {
-    /**
-    * Create a toast overlay with toast options.
-    * @param options The options to use to create the toast.
-    */
-    'create': (options?: ToastOptions | undefined) => Promise<HTMLIonToastElement>;
-    /**
-    * Dismiss the open toast overlay.
-    * @param data Any data to emit in the dismiss events.
-    * @param role The role of the element that is dismissing the toast. For example, 'cancel' or 'backdrop'.
-    * @param id The id of the toast to dismiss. If an id is not provided, it will dismiss the most recently opened toast.
-    */
-    'dismiss': (data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>;
-    /**
-    * Get the most recently opened toast overlay.
-    */
-    'getTop': () => Promise<HTMLIonToastElement | undefined>;
-  }
   interface IonToggle {
     /**
     * If `true`, the toggle is selected.
@@ -2883,24 +2679,12 @@ declare global {
     new (): HTMLIonActionSheetElement;
   };
 
-  interface HTMLIonActionSheetControllerElement extends Components.IonActionSheetController, HTMLStencilElement {}
-  var HTMLIonActionSheetControllerElement: {
-    prototype: HTMLIonActionSheetControllerElement;
-    new (): HTMLIonActionSheetControllerElement;
-  };
-
   interface HTMLIonAlertElement extends Components.IonAlert, HTMLStencilElement {}
   var HTMLIonAlertElement: {
     prototype: HTMLIonAlertElement;
     new (): HTMLIonAlertElement;
   };
 
-  interface HTMLIonAlertControllerElement extends Components.IonAlertController, HTMLStencilElement {}
-  var HTMLIonAlertControllerElement: {
-    prototype: HTMLIonAlertControllerElement;
-    new (): HTMLIonAlertControllerElement;
-  };
-
   interface HTMLIonAppElement extends Components.IonApp, HTMLStencilElement {}
   var HTMLIonAppElement: {
     prototype: HTMLIonAppElement;
@@ -3123,12 +2907,6 @@ declare global {
     new (): HTMLIonLoadingElement;
   };
 
-  interface HTMLIonLoadingControllerElement extends Components.IonLoadingController, HTMLStencilElement {}
-  var HTMLIonLoadingControllerElement: {
-    prototype: HTMLIonLoadingControllerElement;
-    new (): HTMLIonLoadingControllerElement;
-  };
-
   interface HTMLIonMenuElement extends Components.IonMenu, HTMLStencilElement {}
   var HTMLIonMenuElement: {
     prototype: HTMLIonMenuElement;
@@ -3141,12 +2919,6 @@ declare global {
     new (): HTMLIonMenuButtonElement;
   };
 
-  interface HTMLIonMenuControllerElement extends Components.IonMenuController, HTMLStencilElement {}
-  var HTMLIonMenuControllerElement: {
-    prototype: HTMLIonMenuControllerElement;
-    new (): HTMLIonMenuControllerElement;
-  };
-
   interface HTMLIonMenuToggleElement extends Components.IonMenuToggle, HTMLStencilElement {}
   var HTMLIonMenuToggleElement: {
     prototype: HTMLIonMenuToggleElement;
@@ -3159,12 +2931,6 @@ declare global {
     new (): HTMLIonModalElement;
   };
 
-  interface HTMLIonModalControllerElement extends Components.IonModalController, HTMLStencilElement {}
-  var HTMLIonModalControllerElement: {
-    prototype: HTMLIonModalControllerElement;
-    new (): HTMLIonModalControllerElement;
-  };
-
   interface HTMLIonNavElement extends Components.IonNav, HTMLStencilElement {}
   var HTMLIonNavElement: {
     prototype: HTMLIonNavElement;
@@ -3195,24 +2961,12 @@ declare global {
     new (): HTMLIonPickerColumnElement;
   };
 
-  interface HTMLIonPickerControllerElement extends Components.IonPickerController, HTMLStencilElement {}
-  var HTMLIonPickerControllerElement: {
-    prototype: HTMLIonPickerControllerElement;
-    new (): HTMLIonPickerControllerElement;
-  };
-
   interface HTMLIonPopoverElement extends Components.IonPopover, HTMLStencilElement {}
   var HTMLIonPopoverElement: {
     prototype: HTMLIonPopoverElement;
     new (): HTMLIonPopoverElement;
   };
 
-  interface HTMLIonPopoverControllerElement extends Components.IonPopoverController, HTMLStencilElement {}
-  var HTMLIonPopoverControllerElement: {
-    prototype: HTMLIonPopoverControllerElement;
-    new (): HTMLIonPopoverControllerElement;
-  };
-
   interface HTMLIonProgressBarElement extends Components.IonProgressBar, HTMLStencilElement {}
   var HTMLIonProgressBarElement: {
     prototype: HTMLIonProgressBarElement;
@@ -3423,12 +3177,6 @@ declare global {
     new (): HTMLIonToastElement;
   };
 
-  interface HTMLIonToastControllerElement extends Components.IonToastController, HTMLStencilElement {}
-  var HTMLIonToastControllerElement: {
-    prototype: HTMLIonToastControllerElement;
-    new (): HTMLIonToastControllerElement;
-  };
-
   interface HTMLIonToggleElement extends Components.IonToggle, HTMLStencilElement {}
   var HTMLIonToggleElement: {
     prototype: HTMLIonToggleElement;
@@ -3448,9 +3196,7 @@ declare global {
   };
   interface HTMLElementTagNameMap {
     'ion-action-sheet': HTMLIonActionSheetElement;
-    'ion-action-sheet-controller': HTMLIonActionSheetControllerElement;
     'ion-alert': HTMLIonAlertElement;
-    'ion-alert-controller': HTMLIonAlertControllerElement;
     'ion-app': HTMLIonAppElement;
     'ion-avatar': HTMLIonAvatarElement;
     'ion-back-button': HTMLIonBackButtonElement;
@@ -3488,21 +3234,16 @@ declare global {
     'ion-list': HTMLIonListElement;
     'ion-list-header': HTMLIonListHeaderElement;
     'ion-loading': HTMLIonLoadingElement;
-    'ion-loading-controller': HTMLIonLoadingControllerElement;
     'ion-menu': HTMLIonMenuElement;
     'ion-menu-button': HTMLIonMenuButtonElement;
-    'ion-menu-controller': HTMLIonMenuControllerElement;
     'ion-menu-toggle': HTMLIonMenuToggleElement;
     'ion-modal': HTMLIonModalElement;
-    'ion-modal-controller': HTMLIonModalControllerElement;
     'ion-nav': HTMLIonNavElement;
     'ion-nav-link': HTMLIonNavLinkElement;
     'ion-note': HTMLIonNoteElement;
     'ion-picker': HTMLIonPickerElement;
     'ion-picker-column': HTMLIonPickerColumnElement;
-    'ion-picker-controller': HTMLIonPickerControllerElement;
     'ion-popover': HTMLIonPopoverElement;
-    'ion-popover-controller': HTMLIonPopoverControllerElement;
     'ion-progress-bar': HTMLIonProgressBarElement;
     'ion-radio': HTMLIonRadioElement;
     'ion-radio-group': HTMLIonRadioGroupElement;
@@ -3538,7 +3279,6 @@ declare global {
     'ion-thumbnail': HTMLIonThumbnailElement;
     'ion-title': HTMLIonTitleElement;
     'ion-toast': HTMLIonToastElement;
-    'ion-toast-controller': HTMLIonToastControllerElement;
     'ion-toggle': HTMLIonToggleElement;
     'ion-toolbar': HTMLIonToolbarElement;
     'ion-virtual-scroll': HTMLIonVirtualScrollElement;
@@ -3608,7 +3348,6 @@ declare namespace LocalJSX {
     */
     'translucent'?: boolean;
   }
-  interface IonActionSheetController {}
   interface IonAlert {
     /**
     * If `true`, the alert will animate.
@@ -3679,7 +3418,6 @@ declare namespace LocalJSX {
     */
     'translucent'?: boolean;
   }
-  interface IonAlertController {}
   interface IonApp {}
   interface IonAvatar {}
   interface IonBackButton {
@@ -4116,6 +3854,10 @@ declare namespace LocalJSX {
     */
     'displayFormat'?: string;
     /**
+    * The timezone to use for display purposes only. See [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) for a list of supported timezones. If no value is provided, the component will default to displaying times in the user's local timezone.
+    */
+    'displayTimezone'?: string;
+    /**
     * The text to display on the picker's "Done" button.
     */
     'doneText'?: string;
@@ -4490,7 +4232,7 @@ declare namespace LocalJSX {
     /**
     * The value of the input.
     */
-    'value'?: string | null;
+    'value'?: string | number | null;
   }
   interface IonItem {
     /**
@@ -4727,7 +4469,6 @@ declare namespace LocalJSX {
     */
     'translucent'?: boolean;
   }
-  interface IonLoadingController {}
   interface IonMenu {
     /**
     * The content's id the menu should use.
@@ -4796,7 +4537,6 @@ declare namespace LocalJSX {
     */
     'type'?: 'submit' | 'reset' | 'button';
   }
-  interface IonMenuController {}
   interface IonMenuToggle {
     /**
     * Automatically hides the content when the corresponding menu is not active.  By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.
@@ -4873,7 +4613,6 @@ declare namespace LocalJSX {
     */
     'swipeToClose'?: boolean;
   }
-  interface IonModalController {}
   interface IonNav {
     /**
     * If `true`, the nav should animate the transition of components.
@@ -4996,7 +4735,6 @@ declare namespace LocalJSX {
     */
     'col': PickerColumn;
   }
-  interface IonPickerController {}
   interface IonPopover {
     /**
     * If `true`, the popover will animate.
@@ -5063,7 +4801,6 @@ declare namespace LocalJSX {
     */
     'translucent'?: boolean;
   }
-  interface IonPopoverController {}
   interface IonProgressBar {
     /**
     * If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
@@ -5091,10 +4828,6 @@ declare namespace LocalJSX {
     'value'?: number;
   }
   interface IonRadio {
-    /**
-    * If `true`, the radio is selected.
-    */
-    'checked'?: boolean;
     /**
     * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
     */
@@ -5120,10 +4853,6 @@ declare namespace LocalJSX {
     */
     'onIonFocus'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted when the radio button is selected.
-    */
-    'onIonSelect'?: (event: CustomEvent<RadioChangeEventDetail>) => void;
-    /**
     * the value of the radio.
     */
     'value'?: any | null;
@@ -5484,7 +5213,7 @@ declare namespace LocalJSX {
     */
     'onIonChange'?: (event: CustomEvent<SegmentChangeEventDetail>) => void;
     /**
-    * If `true`, the segment buttons will overflow and the user can swipe to see them.
+    * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
     */
     'scrollable'?: boolean;
     /**
@@ -5493,10 +5222,6 @@ declare namespace LocalJSX {
     'value'?: string | null;
   }
   interface IonSegmentButton {
-    /**
-    * If `true`, the segment button is selected.
-    */
-    'checked'?: boolean;
     /**
     * If `true`, the user cannot interact with the segment button.
     */
@@ -5510,10 +5235,6 @@ declare namespace LocalJSX {
     */
     'mode'?: "ios" | "md";
     /**
-    * Emitted when the segment button is clicked.
-    */
-    'onIonSelect'?: (event: CustomEvent<void>) => void;
-    /**
     * The type of the button.
     */
     'type'?: 'submit' | 'reset' | 'button';
@@ -5594,10 +5315,6 @@ declare namespace LocalJSX {
     */
     'disabled'?: boolean;
     /**
-    * If `true`, the element is selected.
-    */
-    'selected'?: boolean;
-    /**
     * The text value of the option.
     */
     'value'?: any | null;
@@ -6006,7 +5723,6 @@ declare namespace LocalJSX {
     */
     'translucent'?: boolean;
   }
-  interface IonToastController {}
   interface IonToggle {
     /**
     * If `true`, the toggle is selected.
@@ -6112,9 +5828,7 @@ declare namespace LocalJSX {
 
   interface IntrinsicElements {
     'ion-action-sheet': IonActionSheet;
-    'ion-action-sheet-controller': IonActionSheetController;
     'ion-alert': IonAlert;
-    'ion-alert-controller': IonAlertController;
     'ion-app': IonApp;
     'ion-avatar': IonAvatar;
     'ion-back-button': IonBackButton;
@@ -6152,21 +5866,16 @@ declare namespace LocalJSX {
     'ion-list': IonList;
     'ion-list-header': IonListHeader;
     'ion-loading': IonLoading;
-    'ion-loading-controller': IonLoadingController;
     'ion-menu': IonMenu;
     'ion-menu-button': IonMenuButton;
-    'ion-menu-controller': IonMenuController;
     'ion-menu-toggle': IonMenuToggle;
     'ion-modal': IonModal;
-    'ion-modal-controller': IonModalController;
     'ion-nav': IonNav;
     'ion-nav-link': IonNavLink;
     'ion-note': IonNote;
     'ion-picker': IonPicker;
     'ion-picker-column': IonPickerColumn;
-    'ion-picker-controller': IonPickerController;
     'ion-popover': IonPopover;
-    'ion-popover-controller': IonPopoverController;
     'ion-progress-bar': IonProgressBar;
     'ion-radio': IonRadio;
     'ion-radio-group': IonRadioGroup;
@@ -6202,7 +5911,6 @@ declare namespace LocalJSX {
     'ion-thumbnail': IonThumbnail;
     'ion-title': IonTitle;
     'ion-toast': IonToast;
-    'ion-toast-controller': IonToastController;
     'ion-toggle': IonToggle;
     'ion-toolbar': IonToolbar;
     'ion-virtual-scroll': IonVirtualScroll;
@@ -6216,9 +5924,7 @@ declare module "@stencil/core" {
   export namespace JSX {
     interface IntrinsicElements {
       'ion-action-sheet': LocalJSX.IonActionSheet & JSXBase.HTMLAttributes<HTMLIonActionSheetElement>;
-      'ion-action-sheet-controller': LocalJSX.IonActionSheetController & JSXBase.HTMLAttributes<HTMLIonActionSheetControllerElement>;
       'ion-alert': LocalJSX.IonAlert & JSXBase.HTMLAttributes<HTMLIonAlertElement>;
-      'ion-alert-controller': LocalJSX.IonAlertController & JSXBase.HTMLAttributes<HTMLIonAlertControllerElement>;
       'ion-app': LocalJSX.IonApp & JSXBase.HTMLAttributes<HTMLIonAppElement>;
       'ion-avatar': LocalJSX.IonAvatar & JSXBase.HTMLAttributes<HTMLIonAvatarElement>;
       'ion-back-button': LocalJSX.IonBackButton & JSXBase.HTMLAttributes<HTMLIonBackButtonElement>;
@@ -6256,21 +5962,16 @@ declare module "@stencil/core" {
       'ion-list': LocalJSX.IonList & JSXBase.HTMLAttributes<HTMLIonListElement>;
       'ion-list-header': LocalJSX.IonListHeader & JSXBase.HTMLAttributes<HTMLIonListHeaderElement>;
       'ion-loading': LocalJSX.IonLoading & JSXBase.HTMLAttributes<HTMLIonLoadingElement>;
-      'ion-loading-controller': LocalJSX.IonLoadingController & JSXBase.HTMLAttributes<HTMLIonLoadingControllerElement>;
       'ion-menu': LocalJSX.IonMenu & JSXBase.HTMLAttributes<HTMLIonMenuElement>;
       'ion-menu-button': LocalJSX.IonMenuButton & JSXBase.HTMLAttributes<HTMLIonMenuButtonElement>;
-      'ion-menu-controller': LocalJSX.IonMenuController & JSXBase.HTMLAttributes<HTMLIonMenuControllerElement>;
       'ion-menu-toggle': LocalJSX.IonMenuToggle & JSXBase.HTMLAttributes<HTMLIonMenuToggleElement>;
       'ion-modal': LocalJSX.IonModal & JSXBase.HTMLAttributes<HTMLIonModalElement>;
-      'ion-modal-controller': LocalJSX.IonModalController & JSXBase.HTMLAttributes<HTMLIonModalControllerElement>;
       'ion-nav': LocalJSX.IonNav & JSXBase.HTMLAttributes<HTMLIonNavElement>;
       'ion-nav-link': LocalJSX.IonNavLink & JSXBase.HTMLAttributes<HTMLIonNavLinkElement>;
       'ion-note': LocalJSX.IonNote & JSXBase.HTMLAttributes<HTMLIonNoteElement>;
       'ion-picker': LocalJSX.IonPicker & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
       'ion-picker-column': LocalJSX.IonPickerColumn & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
-      'ion-picker-controller': LocalJSX.IonPickerController & JSXBase.HTMLAttributes<HTMLIonPickerControllerElement>;
       'ion-popover': LocalJSX.IonPopover & JSXBase.HTMLAttributes<HTMLIonPopoverElement>;
-      'ion-popover-controller': LocalJSX.IonPopoverController & JSXBase.HTMLAttributes<HTMLIonPopoverControllerElement>;
       'ion-progress-bar': LocalJSX.IonProgressBar & JSXBase.HTMLAttributes<HTMLIonProgressBarElement>;
       'ion-radio': LocalJSX.IonRadio & JSXBase.HTMLAttributes<HTMLIonRadioElement>;
       'ion-radio-group': LocalJSX.IonRadioGroup & JSXBase.HTMLAttributes<HTMLIonRadioGroupElement>;
@@ -6306,7 +6007,6 @@ declare module "@stencil/core" {
       'ion-thumbnail': LocalJSX.IonThumbnail & JSXBase.HTMLAttributes<HTMLIonThumbnailElement>;
       'ion-title': LocalJSX.IonTitle & JSXBase.HTMLAttributes<HTMLIonTitleElement>;
       'ion-toast': LocalJSX.IonToast & JSXBase.HTMLAttributes<HTMLIonToastElement>;
-      'ion-toast-controller': LocalJSX.IonToastController & JSXBase.HTMLAttributes<HTMLIonToastControllerElement>;
       'ion-toggle': LocalJSX.IonToggle & JSXBase.HTMLAttributes<HTMLIonToggleElement>;
       'ion-toolbar': LocalJSX.IonToolbar & JSXBase.HTMLAttributes<HTMLIonToolbarElement>;
       'ion-virtual-scroll': LocalJSX.IonVirtualScroll & JSXBase.HTMLAttributes<HTMLIonVirtualScrollElement>;

core/src/components/action-sheet-controller/action-sheet-controller.tsx

@@ -1,54 +0,0 @@
-import { Build, Component, ComponentInterface, Method } from '@stencil/core';
-
-import { ActionSheetOptions, OverlayController } from '../../interface';
-import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
-
-/**
- * @deprecated Use the `actionSheetController` exported from core.
- */
-@Component({
-  tag: 'ion-action-sheet-controller'
-})
-export class ActionSheetController implements ComponentInterface, OverlayController {
-
-  constructor() {
-    if (Build.isDev) {
-      console.warn(`[DEPRECATED][ion-action-sheet-controller] Use the actionSheetController export from @ionic/core:
-  import { actionSheetController } from '@ionic/core';
-  const actionSheet = await actionSheetController.create({...});`);
-    }
-  }
-
-  /**
-   * Create an action sheet overlay with action sheet options.
-   *
-   * @param options The options to use to create the action sheet.
-   */
-  @Method()
-  create(options: ActionSheetOptions): Promise<HTMLIonActionSheetElement> {
-    return createOverlay('ion-action-sheet', options);
-  }
-
-  /**
-   * Dismiss the open action sheet overlay.
-   *
-   * @param data Any data to emit in the dismiss events.
-   * @param role The role of the element that is dismissing the action sheet.
-   * This can be useful in a button handler for determining which button was
-   * clicked to dismiss the action sheet.
-   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-   * @param id The id of the action sheet to dismiss. If an id is not provided, it will dismiss the most recently opened action sheet.
-   */
-  @Method()
-  dismiss(data?: any, role?: string, id?: string) {
-    return dismissOverlay(document, data, role, 'ion-action-sheet', id);
-  }
-
-  /**
-   * Get the most recently opened action sheet overlay.
-   */
-  @Method()
-  async getTop(): Promise<HTMLIonActionSheetElement | undefined> {
-    return getOverlay(document, 'ion-action-sheet') as HTMLIonActionSheetElement;
-  }
-}

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

@@ -1,45 +0,0 @@
-# ion-action-sheet-controller
-
-Action Sheet controllers programmatically control the action sheet component. Action Sheets can be created and dismissed from the action sheet controller. View the [Action Sheet](../action-sheet) documentation for a full list of options to pass upon creation.
-
-<!-- Auto Generated Below -->
-
-
-> **[DEPRECATED]** Use the `actionSheetController` exported from core.
-
-## Methods
-
-### `create(options: ActionSheetOptions) => Promise<HTMLIonActionSheetElement>`
-
-Create an action sheet overlay with action sheet options.
-
-#### Returns
-
-Type: `Promise<HTMLIonActionSheetElement>`
-
-
-
-### `dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>`
-
-Dismiss the open action sheet overlay.
-
-#### Returns
-
-Type: `Promise<boolean>`
-
-
-
-### `getTop() => Promise<HTMLIonActionSheetElement | undefined>`
-
-Get the most recently opened action sheet overlay.
-
-#### Returns
-
-Type: `Promise<HTMLIonActionSheetElement | undefined>`
-
-
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*

core/src/components/action-sheet/action-sheet.ios.scss

@@ -6,9 +6,18 @@
 
 :host {
   --background: #{$action-sheet-ios-background-color};
-  --background-selected: #{$action-sheet-ios-button-background-selected};
-  --background-activated: #{$action-sheet-ios-button-background-activated};
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
+  --button-background: #{$action-sheet-ios-button-background};
+  --button-background-activated: #{$action-sheet-ios-button-background-activated};
+  --button-background-activated-opacity: .08;
+  --button-background-hover: currentColor;
+  --button-background-hover-opacity: .04;
+  --button-background-focused: currentColor;
+  --button-background-focused-opacity: .12;
+  --button-background-selected: #{$action-sheet-ios-button-background-selected};
+  --button-background-selected-opacity: 1;
+  --button-color: #{$action-sheet-ios-button-text-color};
+  --color: #{$action-sheet-ios-title-color};
 
   text-align: $action-sheet-ios-text-align;
 }
@@ -32,8 +41,6 @@
 .action-sheet-group {
   @include border-radius($action-sheet-ios-border-radius);
   @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
-
-  overflow: hidden;
 }
 
 .action-sheet-group:first-child {
@@ -69,13 +76,13 @@
     backdrop-filter: $action-sheet-ios-button-translucent-filter;
   }
 
-  :host(.action-sheet-translucent) .action-sheet-button.activated {
+  :host(.action-sheet-translucent) .action-sheet-button.ion-activated {
     background-color: $action-sheet-ios-translucent-background-color-activated;
     background-image: none;
   }
 
   :host(.action-sheet-translucent) .action-sheet-cancel {
-    background: var(--background-selected);
+    background: var(--button-background-selected);
   }
 }
 
@@ -84,16 +91,8 @@
 // Border is made with a linear gradient in order
 // to get the proper color and iOS blur effect
 
-.action-sheet-title,
-.action-sheet-button {
-  background-color: transparent;
-  background-image: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%);
-  background-repeat: no-repeat;
-
-  /* stylelint-disable-next-line all */
-  background-position: bottom;
-
-  background-size: 100% 1px;
+.action-sheet-title {
+  background: $action-sheet-ios-button-background;
 }
 
 
@@ -126,8 +125,6 @@
 
   height: $action-sheet-ios-button-height;
 
-  color: var(--color, $action-sheet-ios-button-text-color);
-
   font-size: $action-sheet-ios-button-font-size;
 
   contain: strict;
@@ -144,17 +141,30 @@
 }
 
 .action-sheet-selected {
-  background: var(--background-selected);
-
   font-weight: bold;
 }
 
-.action-sheet-destructive {
+.action-sheet-cancel {
+  font-weight: $action-sheet-ios-button-cancel-font-weight;
+
+  &::after {
+    background: var(--button-background-selected);
+
+    opacity: var(--button-background-selected-opacity);
+  }
+}
+
+// iOS Action Sheet Button: Destructive
+// ---------------------------------------------------
+
+.action-sheet-destructive,
+.action-sheet-destructive.ion-activated,
+.action-sheet-destructive.ion-focused {
   color: $action-sheet-ios-button-destructive-text-color;
 }
 
-.action-sheet-cancel {
-  background: var(--background-selected);
-
-  font-weight: $action-sheet-ios-button-cancel-font-weight;
+@media (any-hover: hover) {
+  .action-sheet-destructive:hover {
+    color: $action-sheet-ios-button-destructive-text-color;
+  }
 }

core/src/components/action-sheet/action-sheet.ios.vars.scss

@@ -105,21 +105,9 @@ $action-sheet-ios-button-icon-font-size:                          28px !default;
 /// @prop - Padding right of the action sheet button icon
 $action-sheet-ios-button-icon-padding-right:                      .1em !default;
 
-/// @prop - Height of the action sheet button icon
-$action-sheet-ios-button-icon-height:                             .7em !default;
-
-/// @prop - Margin top of the action sheet button icon
-$action-sheet-ios-button-icon-margin-top:                         -10px !default;
-
 /// @prop - Font size of the action sheet button
 $action-sheet-ios-button-font-size:                               20px !default;
 
-/// @prop - Border width of the action sheet button
-$action-sheet-ios-button-border-width:                            $hairlines-width !default;
-
-/// @prop - Border style of the action sheet button
-$action-sheet-ios-button-border-style:                            solid !default;
-
 /// @prop - Border color alpha of the action sheet button
 $action-sheet-ios-button-border-color-alpha:                      .08 !default;
 
@@ -127,13 +115,10 @@ $action-sheet-ios-button-border-color-alpha:                      .08 !default;
 $action-sheet-ios-button-border-color:                            rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha) !default;
 
 /// @prop - Background color of the action sheet button
-$action-sheet-ios-button-background:                              transparent !default;
-
-/// @prop - Background color alpha of the activated action sheet button
-$action-sheet-ios-button-background-alpha-activated:              .08 !default;
+$action-sheet-ios-button-background:                              linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%) bottom / 100% 1px no-repeat transparent !default;
 
 /// @prop - Background color of the activated action sheet button
-$action-sheet-ios-button-background-activated:                    rgba($text-color-rgb, $action-sheet-ios-button-background-alpha-activated) !default;
+$action-sheet-ios-button-background-activated:                    $text-color !default;
 
 /// @prop - Background color of the selected action sheet button
 $action-sheet-ios-button-background-selected:                     $background-color !default;

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

@@ -6,9 +6,18 @@
 
 :host {
   --background: #{$action-sheet-md-background-color};
-  --background-selected: #{var(--background, $action-sheet-md-button-background-selected)};
-  --background-activated: var(--background);
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
+  --button-background: transparent;
+  --button-background-selected: currentColor;
+  --button-background-selected-opacity: 0;
+  --button-background-activated: transparent;
+  --button-background-activated-opacity: 0;
+  --button-background-hover: currentColor;
+  --button-background-hover-opacity: .04;
+  --button-background-focused: currentColor;
+  --button-background-focused-opacity: .12;
+  --button-color: #{$action-sheet-md-button-text-color};
+  --color: #{$action-sheet-md-title-color};
 }
 
 .action-sheet-title {
@@ -52,9 +61,6 @@
 
   height: $action-sheet-md-button-height;
 
-  background: transparent;
-  color: var(--color, $action-sheet-md-button-text-color);
-
   font-size: $action-sheet-md-button-font-size;
 
   text-align: $action-sheet-md-text-align;
@@ -67,7 +73,7 @@
   @include padding(null, null, 4px, null);
   @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start);
 
-  color: var(--color, $action-sheet-md-icon-color);
+  color: var(--color);
 
   font-size: $action-sheet-md-icon-font-size;
 }

core/src/components/action-sheet/action-sheet.md.vars.scss

@@ -87,13 +87,6 @@ $action-sheet-md-button-padding-start:                  $action-sheet-md-button-
 /// @prop - Background color of the action sheet button
 $action-sheet-md-button-background:                     transparent !default;
 
-/// @prop - Background color of the action sheet activated button
-$action-sheet-md-button-background-activated:           $background-color-step-50 !default;
-
-/// @prop - Background color of the selected action sheet button
-$action-sheet-md-button-background-selected:            null !default;
-
-
 // Action Sheet Icon
 // --------------------------------------------------
 

core/src/components/action-sheet/action-sheet.scss

@@ -6,9 +6,6 @@
 :host {
   /**
    * @prop --background: Background of the action sheet group
-   * @prop --background-activated: Background of the action sheet button when pressed
-   * @prop --background-selected: Background of the selected action sheet button
-   *
    * @prop --color: Color of the action sheet text
    *
    * @prop --min-width: Minimum width of the action sheet
@@ -20,14 +17,34 @@
    * @prop --max-height: Maximum height of the action sheet
    *
    * @prop --backdrop-opacity: Opacity of the backdrop
+   *
+   * @prop --button-background: Background of the action sheet button
+   * @prop --button-background-activated: Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple.
+   * @prop --button-background-activated-opacity: Opacity of the action sheet button background when pressed
+   * @prop --button-background-hover: Background of the action sheet button on hover
+   * @prop --button-background-hover-opacity: Opacity of the action sheet button background on hover
+   * @prop --button-background-focused: Background of the action sheet button when tabbed to
+   * @prop --button-background-focused-opacity: Opacity of the action sheet button background when tabbed to
+   * @prop --button-background-selected: Background of the selected action sheet button
+   * @prop --button-background-selected-opacity: Opacity of the selected action sheet button background
+   *
+   * @prop --button-color: Color of the action sheet button
+   * @prop --button-color-activated: Color of the action sheet button when pressed
+   * @prop --button-color-hover: Color of the action sheet button on hover
+   * @prop --button-color-focused: Color of the action sheet button when tabbed to
+   * @prop --button-color-selected: Color of the selected action sheet button
    */
   --color: initial;
+  --button-color-activated: var(--button-color);
+  --button-color-focused: var(--button-color);
+  --button-color-hover: var(--button-color);
+  --button-color-selected: var(--button-color);
   --min-width: auto;
   --width: #{$action-sheet-width};
   --max-width: #{$action-sheet-max-width};
   --min-height: auto;
   --height: 100%;
-  --max-height: 100%;
+  --max-height: calc(100% - (var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));
 
   @include font-smoothing();
   @include position(0, 0, 0, 0);
@@ -68,6 +85,7 @@
 
 .action-sheet-button {
   display: block;
+  position: relative;
 
   width: 100%;
 
@@ -75,16 +93,19 @@
 
   outline: none;
 
-  font-family: inherit;
-}
+  background: var(--button-background);
+  color: var(--button-color);
 
-.action-sheet-button.activated {
-  background: var(--background-activated);
+  font-family: inherit;
+
+  overflow: hidden;
 }
 
 .action-sheet-button-inner {
   display: flex;
 
+  position: relative;
+
   flex-flow: row nowrap;
   flex-shrink: 0;
   align-items: center;
@@ -92,6 +113,8 @@
 
   width: 100%;
   height: 100%;
+
+  z-index: 1;
 }
 
 .action-sheet-container {
@@ -124,6 +147,67 @@
   overflow: hidden;
 }
 
+
+// Action Sheet: States
+// --------------------------------------------------
+
+.action-sheet-button::after {
+  @include button-state();
+}
+
+
+// Action Sheet: Selected
+// --------------------------------------------------
+
 .action-sheet-selected {
-  background: var(--background-selected);
+  color: var(--button-color-selected);
+
+  &::after {
+    background: var(--button-background-selected);
+
+    opacity: var(--button-background-selected-opacity);
+  }
+}
+
+
+// Action Sheet: Activated
+// --------------------------------------------------
+
+.action-sheet-button.ion-activated {
+  color: var(--button-color-activated);
+
+  &::after {
+    background: var(--button-background-activated);
+
+    opacity: var(--button-background-activated-opacity);
+  }
+}
+
+
+// Action Sheet: Focused
+// --------------------------------------------------
+
+.action-sheet-button.ion-focused {
+  color: var(--button-color-focused);
+
+  &::after {
+    background: var(--button-background-focused);
+
+    opacity: var(--button-background-focused-opacity);
+  }
+}
+
+// Action Sheet: Hover
+// --------------------------------------------------
+
+@media (any-hover: hover) {
+  .action-sheet-button:hover {
+    color: var(--button-color-hover);
+
+    &::after {
+      background: var(--button-background-hover);
+
+      opacity: var(--button-background-hover-opacity);
+    }
+  }
 }

core/src/components/action-sheet/action-sheet.tsx

@@ -226,7 +226,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                 </div>
               }
               {buttons.map(b =>
-                <button type="button" ion-activatable class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
+                <button type="button" class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
                   <span class="action-sheet-button-inner">
                     {b.icon && <ion-icon icon={b.icon} lazy={false} class="action-sheet-icon" />}
                     {b.text}
@@ -252,6 +252,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
                       />}
                     {cancelButton.text}
                   </span>
+                  {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
                 </button>
               </div>
             }
@@ -266,6 +267,7 @@ const buttonClass = (button: ActionSheetButton): CssClassMap => {
   return {
     'action-sheet-button': true,
     'ion-activatable': true,
+    'ion-focusable': true,
     [`action-sheet-${button.role}`]: button.role !== undefined,
     ...getClassMap(button.cssClass),
   };

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

@@ -319,19 +319,31 @@ Type: `Promise<void>`
 
 ## CSS Custom Properties
 
-| Name                     | Description                                        |
-| ------------------------ | -------------------------------------------------- |
-| `--backdrop-opacity`     | Opacity of the backdrop                            |
-| `--background`           | Background of the action sheet group               |
-| `--background-activated` | Background of the action sheet button when pressed |
-| `--background-selected`  | Background of the selected action sheet button     |
-| `--color`                | Color of the action sheet text                     |
-| `--height`               | height of the action sheet                         |
-| `--max-height`           | Maximum height of the action sheet                 |
-| `--max-width`            | Maximum width of the action sheet                  |
-| `--min-height`           | Minimum height of the action sheet                 |
-| `--min-width`            | Minimum width of the action sheet                  |
-| `--width`                | Width of the action sheet                          |
+| Name                                    | Description                                                                                                            |
+| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| `--backdrop-opacity`                    | Opacity of the backdrop                                                                                                |
+| `--background`                          | Background of the action sheet group                                                                                   |
+| `--button-background`                   | Background of the action sheet button                                                                                  |
+| `--button-background-activated`         | Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple. |
+| `--button-background-activated-opacity` | Opacity of the action sheet button background when pressed                                                             |
+| `--button-background-focused`           | Background of the action sheet button when tabbed to                                                                   |
+| `--button-background-focused-opacity`   | Opacity of the action sheet button background when tabbed to                                                           |
+| `--button-background-hover`             | Background of the action sheet button on hover                                                                         |
+| `--button-background-hover-opacity`     | Opacity of the action sheet button background on hover                                                                 |
+| `--button-background-selected`          | Background of the selected action sheet button                                                                         |
+| `--button-background-selected-opacity`  | Opacity of the selected action sheet button background                                                                 |
+| `--button-color`                        | Color of the action sheet button                                                                                       |
+| `--button-color-activated`              | Color of the action sheet button when pressed                                                                          |
+| `--button-color-focused`                | Color of the action sheet button when tabbed to                                                                        |
+| `--button-color-hover`                  | Color of the action sheet button on hover                                                                              |
+| `--button-color-selected`               | Color of the selected action sheet button                                                                              |
+| `--color`                               | Color of the action sheet text                                                                                         |
+| `--height`                              | height of the action sheet                                                                                             |
+| `--max-height`                          | Maximum height of the action sheet                                                                                     |
+| `--max-width`                           | Maximum width of the action sheet                                                                                      |
+| `--min-height`                          | Minimum height of the action sheet                                                                                     |
+| `--min-width`                           | Minimum width of the action sheet                                                                                      |
+| `--width`                               | Width of the action sheet                                                                                              |
 
 
 ## Dependencies

core/src/components/action-sheet/test/basic/index.html

@@ -10,6 +10,10 @@
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
   <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+  <script type="module">
+    import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
+    window.actionSheetController = actionSheetController;
+  </script>
 
 <body>
   <ion-app>
@@ -36,10 +40,10 @@
   <style>
     .my-color-class {
       --background: #292929;
-      --background-selected: #222222;
+      --button-background-selected: #222222;
 
       --color: #dfdfdf;
-      ;
+      --button-color: #dfdfdf;
     }
 
     .my-custom-class {
@@ -57,11 +61,14 @@
   </style>
   <script>
     window.addEventListener('ionActionSheetDidDismiss', function (e) { console.log('didDismiss', e) })
+    async function openActionSheet(opts) {
+      const actionSheet = await actionSheetController.create(opts);
+      await actionSheet.present();
+    }
 
     async function presentBasic() {
       const mode = Ionic.mode;
-
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      await openActionSheet({
         header: "Albums",
         buttons: [{
           text: 'Delete',
@@ -73,7 +80,7 @@
         }, {
           text: 'Share',
           icon: 'share',
-          cssClass: 'activated',
+          cssClass: 'ion-activated',
           handler: () => {
             console.log('Share clicked');
           }
@@ -98,12 +105,10 @@
           }
         }]
       });
-      document.body.append(actionSheetElement);
-      await actionSheetElement.present();
     }
 
     async function presentAlert() {
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      await openActionSheet({
         buttons: [{
           text: 'Open Alert',
           handler: async () => {
@@ -114,7 +119,7 @@
               buttons: [{
                 text: 'Okay',
                 handler: async () => {
-                  await actionSheetElement.dismiss();
+                  await actionSheetController.dismiss();
                   return false;
                 }
               }]
@@ -131,12 +136,10 @@
           }
         }]
       });
-      document.body.append(actionSheetElement);
-      await actionSheetElement.present();
     }
 
     async function presentCancelOnly() {
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      await openActionSheet({
         buttons: [
           {
             text: 'Cancel',
@@ -147,21 +150,17 @@
           }
         ]
       });
-      document.body.append(actionSheetElement);
-      await actionSheetElement.present();
     }
 
     async function presentWithCssClass(classList) {
-      const addClass = classList ? classList : "my-color-class my-custom-class";
-
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      await openActionSheet({
         header: "Custom Css Class",
-        cssClass: addClass,
+        cssClass: classList ? classList : "my-color-class my-custom-class",
         buttons: [
           {
             text: 'Add to Favorites',
             icon: 'star',
-            cssClass: 'my-custom-button customClass activated',
+            cssClass: 'my-custom-button customClass ion-activated',
             handler: () => {
               console.log('Add to Favorites clicked');
             }
@@ -197,14 +196,10 @@
           }
         ]
       });
-      document.body.append(actionSheetElement);
-      await actionSheetElement.present();
     }
 
     async function presentIcons() {
-      const mode = Ionic.mode;
-
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      await openActionSheet({
         header: "Albums",
         buttons: [{
           text: 'Delete',
@@ -241,12 +236,10 @@
           }
         }]
       });
-      document.body.append(actionSheetElement);
-      await actionSheetElement.present();
     }
 
     async function presentNoBackdropDismiss() {
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      await openActionSheet({
         backdropDismiss: false,
         buttons: [{
           text: 'Archive',
@@ -267,12 +260,10 @@
           }
         }]
       });
-      document.body.append(actionSheetElement);
-      await actionSheetElement.present();
     }
 
     async function presentScroll() {
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      await openActionSheet({
         buttons: [
           {
             text: 'Add Reaction',
@@ -281,7 +272,7 @@
             }
           }, {
             text: 'Copy Text',
-            cssClass: 'activated',
+            cssClass: 'ion-activated',
             handler: () => {
               console.log('Copy Text clicked');
             }
@@ -360,12 +351,10 @@
           }
         ]
       });
-      document.body.append(actionSheetElement);
-      await actionSheetElement.present();
     }
 
     async function presentScrollNoCancel() {
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      await openActionSheet({
         buttons: [
           {
             text: 'Add Reaction',
@@ -431,8 +420,6 @@
           }
         ]
       });
-      document.body.append(actionSheetElement);
-      await actionSheetElement.present();
     }
   </script>
 </body>

core/src/components/action-sheet/test/spec/index.html

@@ -10,7 +10,10 @@
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
   <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
-
+  <script type="module">
+    import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
+    window.actionSheetController = actionSheetController;
+  </script>
 <body>
   <ion-app>
 
@@ -31,8 +34,7 @@
 
     async function presentSpec() {
       const mode = Ionic.mode;
-
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      const actionSheet = await actionSheetController.create({
         header: "Open in",
         buttons: [{
           text: 'Item 1',
@@ -66,8 +68,7 @@
           }
         }]
       });
-      document.body.appendChild(actionSheetElement);
-      await actionSheetElement.present();
+      await actionSheet.present();
     }
   </script>
 </body>

core/src/components/action-sheet/test/standalone/index.html

@@ -10,7 +10,10 @@
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
   <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
-
+  <script type="module">
+    import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
+    window.actionSheetController = actionSheetController;
+  </script>
 <body>
   <button id="basic" onclick="presentBasic()">Basic</button>
   <button id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
@@ -37,8 +40,13 @@
 
   <script>
     window.addEventListener('ionActionSheetDidDismiss', function(e){console.log('didDismiss', e)})
+    async function openActionSheet(opts) {
+      const actionSheet = await actionSheetController.create(opts);
+      await actionSheet.present();
+    }
+    
     function presentBasic() {
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      openActionSheet({
         header: "Albums",
         buttons: [{
           text: 'Delete',
@@ -74,14 +82,10 @@
           }
         }]
       });
-      document.body.appendChild(actionSheetElement);
-      return actionSheetElement.present();
     }
 
     function presentIcons() {
-      const mode = Ionic.mode;
-
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      openActionSheet({
         header: "Albums",
         buttons: [{
           text: 'Delete',
@@ -117,12 +121,10 @@
           }
         }]
       });
-      document.body.appendChild(actionSheetElement);
-      return actionSheetElement.present();
     }
 
     function presentNoBackdropDismiss() {
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      openActionSheet({
         buttons: [{
           text: 'Archive',
           handler: () => {
@@ -142,12 +144,10 @@
           }
         }]
       });
-      document.body.appendChild(actionSheetElement);
-      return actionSheetElement.present();
     }
 
     function presentAlert() {
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      openActionSheet({
         buttons: [{
           text: 'Open Alert',
           handler: () => {
@@ -161,12 +161,10 @@
           }
         }]
       });
-      document.body.appendChild(actionSheetElement);
-      return actionSheetElement.present();
     }
 
     function presentScroll() {
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      openActionSheet({
         buttons: [
           {
             text: 'Add Reaction',
@@ -238,12 +236,10 @@
           }
         ]
       });
-      document.body.appendChild(actionSheetElement);
-      return actionSheetElement.present();
     }
 
     function presentScrollNoCancel() {
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      openActionSheet({
         buttons: [
           {
             text: 'Add Reaction',
@@ -309,12 +305,10 @@
           }
         ]
       });
-      document.body.appendChild(actionSheetElement);
-      return actionSheetElement.present();
     }
 
     function presentCancelOnly() {
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      openActionSheet({
         buttons: [
           {
             text: 'Cancel',
@@ -325,12 +319,10 @@
           }
         ]
       });
-      document.body.append(actionSheetElement);
-      return actionSheetElement.present();
     }
 
     function presentWithCssClass() {
-      const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
+      openActionSheet({
         header: "Custom Css Class",
         cssClass: "my-class my-custom-class",
         buttons: [
@@ -344,8 +336,6 @@
           }
         ]
       });
-      document.body.appendChild(actionSheetElement);
-      return actionSheetElement.present();
     }
 
   </script>

core/src/components/action-sheet/test/translucent/index.html

@@ -10,7 +10,10 @@
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
   <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
-
+  <script type="module">
+    import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
+    window.actionSheetController = actionSheetController;
+  </script>
 <body>
   <ion-app>
 
@@ -46,12 +49,15 @@
   </ion-app>
 
   <script>
+    
+    async function openActionSheet(opts) {
+      const actionSheet = await actionSheetController.create(opts);
+      await actionSheet.present();
+    }
 
     async function presentBasic() {
       var mode = Ionic.mode;
-
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      await openActionSheet({
         header: "Albums",
         buttons: [{
           text: 'Delete',
@@ -87,13 +93,11 @@
           }
         }],
         translucent: true
-      })
-      await actionSheetElement.present();
+      });
     }
 
     async function presentNoBackdropDismiss() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      await openActionSheet({
         backdropDismiss: false,
         buttons: [{
           text: 'Archive',
@@ -115,12 +119,10 @@
         }],
         translucent: true
       });
-      return await actionSheetElement.present();
     }
 
     async function presentAlert() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      await openActionSheet({
         buttons: [{
           text: 'Open Alert',
           handler: () => {
@@ -135,12 +137,10 @@
         }],
         translucent: true
       });
-      return await actionSheetElement.present();
     }
 
     async function presentScroll() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      await openActionSheet({
         buttons: [
           {
             text: 'Add Reaction',
@@ -149,7 +149,7 @@
             }
           }, {
             text: 'Copy Text',
-            cssClass: 'activated',
+            cssClass: 'ion-activated',
             handler: () => {
               console.log('Copy Text clicked');
             }
@@ -185,7 +185,7 @@
             }
           }, {
             text: 'Edit Title',
-            cssClass: 'activated',
+            cssClass: 'ion-activated',
             handler: () => {
               console.log('Edit Title clicked');
             }
@@ -215,12 +215,10 @@
         ],
         translucent: true
       });
-      return await actionSheetElement.present();
     }
 
     async function presentScrollNoCancel() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      await openActionSheet({
         buttons: [
           {
             text: 'Add Reaction',
@@ -287,12 +285,10 @@
         ],
         translucent: true
       });
-      return await actionSheetElement.present();
     }
 
     async function presentCancelOnly() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      const actionSheetElement = await actionSheetController.create({
+      await openActionSheet({
         buttons: [
           {
             text: 'Cancel',
@@ -304,7 +300,6 @@
         ],
         translucent: true
       });
-      return await actionSheetElement.present();
     }
   </script>
 

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

@@ -1,54 +0,0 @@
-import { Build, Component, ComponentInterface, Method } from '@stencil/core';
-
-import { AlertOptions, OverlayController } from '../../interface';
-import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
-
-/**
- * @deprecated Use the `alertController` exported from core.
- */
-@Component({
-  tag: 'ion-alert-controller'
-})
-export class AlertController implements ComponentInterface, OverlayController {
-
-  constructor() {
-    if (Build.isDev) {
-      console.warn(`[DEPRECATED][ion-alert-controller] Use the alertController export from @ionic/core:
-  import { alertController } from '@ionic/core';
-  const alert = await alertController.create({...});`);
-    }
-  }
-
-  /**
-   * Create an alert overlay with alert options.
-   *
-   * @param options The options to use to create the alert.
-   */
-  @Method()
-  create(options: AlertOptions): Promise<HTMLIonAlertElement> {
-    return createOverlay('ion-alert', options);
-  }
-
-  /**
-   * Dismiss the open alert overlay.
-   *
-   * @param data Any data to emit in the dismiss events.
-   * @param role The role of the element that is dismissing the alert.
-   * This can be useful in a button handler for determining which button was
-   * clicked to dismiss the alert.
-   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-   * @param id The id of the alert to dismiss. If an id is not provided, it will dismiss the most recently opened alert.
-   */
-  @Method()
-  dismiss(data?: any, role?: string, id?: string) {
-    return dismissOverlay(document, data, role, 'ion-alert', id);
-  }
-
-  /**
-   * Get the most recently opened alert overlay.
-   */
-  @Method()
-  async getTop(): Promise<HTMLIonAlertElement | undefined> {
-    return getOverlay(document, 'ion-alert') as HTMLIonAlertElement;
-  }
-}

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

@@ -1,46 +0,0 @@
-# ion-alert-controller
-
-Alert controllers programmatically control the alert component. Alerts can be created and dismissed by the alert controller. View the [Alert](../alert) documentation for the list of options to pass upon creation and usage information.
-
-
-<!-- Auto Generated Below -->
-
-
-> **[DEPRECATED]** Use the `alertController` exported from core.
-
-## Methods
-
-### `create(options: AlertOptions) => Promise<HTMLIonAlertElement>`
-
-Create an alert overlay with alert options.
-
-#### Returns
-
-Type: `Promise<HTMLIonAlertElement>`
-
-
-
-### `dismiss(data?: any, role?: string | undefined, id?: string | undefined) => Promise<boolean>`
-
-Dismiss the open alert overlay.
-
-#### Returns
-
-Type: `Promise<boolean>`
-
-
-
-### `getTop() => Promise<HTMLIonAlertElement | undefined>`
-
-Get the most recently opened alert overlay.
-
-#### Returns
-
-Type: `Promise<HTMLIonAlertElement | undefined>`
-
-
-
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*

core/src/components/alert/alert.ios.scss

@@ -298,6 +298,6 @@
   font-weight: $alert-ios-button-main-font-weight;
 }
 
-.alert-button.activated {
+.alert-button.ion-activated {
   background-color: $alert-ios-button-background-color-activated;
 }

core/src/components/alert/test/basic/index.html

@@ -10,7 +10,11 @@
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
   <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
-
+  <script type="module">
+    import { alertController } from '../../../../dist/ionic/index.esm.js';
+    window.alertController = alertController;
+  </script>
+  
 <body>
   <ion-app>
 
@@ -45,50 +49,45 @@
 
     window.addEventListener('ionAlertDidDismiss', function (e) { console.log('didDismiss', e) })
     window.addEventListener('ionAlertWillDismiss', function (e) { console.log('willDismiss', e) })
-
+    async function openAlert(opts) {
+      const alert = await alertController.create(opts);
+      await alert.present();
+    }
     function presentAlert() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['OK']
       });
-      document.body.append(alert);
-      return alert.present();
     }
 
     function presentAlertLongMessage() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Alert',
         message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
         buttons: ['Cancel', 'OK']
       });
-      document.body.append(alert);
-      return alert.present();
     }
 
     function presentAlertMultipleButtons() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['Cancel', 'Open Modal', 'Delete']
       });
-      document.body.append(alert);
-      return alert.present();
     }
 
     function presentAlertNoMessage() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Alert',
         buttons: ['OK']
       });
-      document.body.append(alert);
-      return alert.present();
     }
 
     function presentAlertConfirm() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Confirm!',
         message: 'Message <strong>text</strong>!!!',
         buttons: [
@@ -107,12 +106,10 @@
           }
         ]
       });
-      document.body.append(alert);
-      return alert.present();
     }
 
     function presentAlertPrompt() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Prompt!',
         inputs: [
           {
@@ -182,12 +179,10 @@
           }
         ]
       });
-      document.body.append(alert);
-      return alert.present();
     }
 
     function presentAlertRadio() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Radio',
         inputs: [
           {
@@ -239,12 +234,10 @@
           }
         ]
       });
-      document.body.append(alert);
-      return alert.present();
     }
 
     function presentAlertCheckbox() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Checkbox',
         inputs: [
           {
@@ -301,12 +294,10 @@
           }
         ]
       });
-      document.body.append(alert);
-      return alert.present();
     }
 
     function presentWithCssClass() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Alert',
         subHeader: 'Subtitle',
         cssClass: 'my-class my-custom-class   ',
@@ -319,8 +310,6 @@
           }
         }]
       });
-      document.body.append(alert);
-      return alert.present();
     }
 
   </script>

core/src/components/alert/test/standalone/index.html

@@ -10,7 +10,11 @@
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
   <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
-
+  <script type="module">
+    import { alertController } from '../../../../dist/ionic/index.esm.js';
+    window.alertController = alertController;
+  </script>
+  
 <body>
   <button id="basic" onclick="presentAlert()">Alert</button>
   <button id="longMessage" onclick="presentAlertLongMessage()">Alert Long Message</button>
@@ -75,50 +79,45 @@
   <script>
     window.addEventListener('ionAlertDidDismiss', function(e){console.log('didDismiss', e)})
     window.addEventListener('ionAlertWillDismiss', function(e){console.log('willDismiss', e)})
-
+    async function openAlert(opts) {
+      const alert = await alertController.create(opts);
+      await alert.present();
+    }
     function presentAlert() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['OK']
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
     function presentAlertLongMessage() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Alert',
         message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
         buttons: ['Cancel', 'OK']
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
     function presentAlertMultipleButtons() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['Cancel', 'Open Modal', 'Delete']
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
     function presentAlertNoMessage() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Alert',
         buttons: ['OK']
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
     function presentAlertConfirm() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Confirm!',
         message: 'Message <strong>text</strong>!!!',
         buttons: [
@@ -137,12 +136,10 @@
           }
         ]
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
     function presentAlertPrompt() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Prompt!',
         inputs: [
           {
@@ -199,12 +196,10 @@
           }
         ]
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
     function presentAlertRadio() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Radio',
         inputs: [
           {
@@ -255,12 +250,10 @@
           }
         ]
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
     function presentAlertCheckbox() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Checkbox',
         inputs: [
           {
@@ -316,12 +309,10 @@
           }
         ]
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
     function presentWithCssClass() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Alert',
         subHeader: 'Subtitle',
         cssClass: 'my-class my-customClass   ',
@@ -334,8 +325,6 @@
             }
           }]
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
 </script>

core/src/components/alert/test/translucent/index.html

@@ -10,7 +10,11 @@
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
   <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
-
+  <script type="module">
+    import { alertController } from '../../../../dist/ionic/index.esm.js';
+    window.alertController = alertController;
+  </script>
+  
 <body>
   <ion-app>
 
@@ -50,53 +54,49 @@
   </ion-app>
 
   <script>
+    async function openAlert(opts) {
+      const alert = await alertController.create(opts);
+      await alert.present();
+    }
     function presentAlert() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['OK'],
         translucent: true
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
     function presentAlertLongMessage() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Alert',
         message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit diam lorem, a faucibus turpis sagittis eu. In finibus augue in dui varius convallis. Donec vulputate nibh gravida odio vulputate commodo. Suspendisse imperdiet consequat egestas. Nulla feugiat consequat urna eu tincidunt. Cras nec blandit turpis, eu auctor nunc. Pellentesque finibus, magna eu vestibulum imperdiet, arcu ex lacinia massa, eget volutpat quam leo a orci. Etiam mauris est, elementum at feugiat at, dictum in sapien. Mauris efficitur eros sodales convallis egestas. Phasellus eu faucibus nisl. In eu diam vitae libero egestas lacinia. Integer sed convallis metus, nec commodo felis. Duis libero augue, ornare at tempus non, posuere vel augue. Cras mattis dui at tristique aliquam. Phasellus fermentum nibh ligula, porta hendrerit ligula elementum eu. Suspendisse sollicitudin enim at libero iaculis pulvinar. Donec ac massa id purus laoreet rutrum quis eu urna. Mauris luctus erat vel magna porttitor, vel varius erat rhoncus. Donec eu turpis vestibulum, feugiat urna id, gravida mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at lobortis tortor. Nam ultrices volutpat elit, sed pharetra nulla suscipit at. Nunc eu accumsan eros, id auctor libero. Suspendisse potenti. Nam vitae dapibus metus. Maecenas nisi dui, sagittis et condimentum eu, bibendum vel eros. Vivamus malesuada, tortor in accumsan iaculis, urna velit consectetur ante, nec semper sem diam a diam. In et semper ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit, velit vel porttitor euismod, neque risus blandit nulla, non laoreet libero dolor et odio. Nulla enim risus, feugiat eu urna sed, ultrices semper felis. Sed blandit mi diam. Nunc quis mi ligula. Pellentesque a elit eu orci volutpat egestas. Aenean fermentum eleifend quam, ut tincidunt eros tristique et. Nam dapibus tincidunt ligula, id faucibus felis sodales quis. Donec tincidunt lectus ipsum, ac semper tellus cursus ac. Vestibulum nec dui a lectus accumsan vestibulum quis et velit. Aliquam finibus justo et odio euismod, viverra condimentum eros tristique. Sed eget luctus risus. Pellentesque lorem magna, dictum non congue sodales, laoreet eget quam. In sagittis vulputate dolor a ultricies. Donec viverra leo sed ex maximus, in finibus elit gravida. Aliquam posuere vulputate mi. Suspendisse potenti. Nunc consectetur congue arcu, at pharetra dui varius non. Etiam vestibulum congue felis, id ullamcorper neque convallis ultrices. Aenean congue, diam a iaculis mollis, nisl eros maximus arcu, nec hendrerit purus felis porta diam. Nullam vitae ultrices dui, ac dictum sapien. Phasellus eu magna luctus, varius urna id, molestie quam. Nulla in semper tellus. Curabitur lacinia tellus sit amet lacinia dapibus. Sed id condimentum tellus, nec aliquam sapien. Vivamus luctus at ante a tincidunt.',
         buttons: ['Cancel', 'OK'],
         translucent: true
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
     function presentAlertMultipleButtons() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Alert',
         subHeader: 'Subtitle',
         message: 'This is an alert message.',
         buttons: ['Cancel', 'Open Modal', 'Delete'],
         translucent: true
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
     function presentAlertNoMessage() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Alert',
         buttons: ['OK'],
         translucent: true
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
     function presentAlertConfirm() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Confirm!',
         message: 'Message <strong>text</strong>!!!',
         buttons: [
@@ -116,12 +116,10 @@
         ],
         translucent: true
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
     function presentAlertPrompt() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Prompt!',
         inputs: [
           {
@@ -179,12 +177,10 @@
         ],
         translucent: true
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
     function presentAlertRadio() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Radio',
         inputs: [
           {
@@ -192,6 +188,7 @@
             label: 'Radio 1',
             value: 'value1',
             checked: true
+           
           },
           {
             type: 'radio',
@@ -236,12 +233,10 @@
         ],
         translucent: true
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
     function presentAlertCheckbox() {
-      const alert = Object.assign(document.createElement('ion-alert'), {
+      openAlert({
         header: 'Checkbox',
         inputs: [
           {
@@ -298,8 +293,6 @@
         ],
         translucent: true
       });
-      document.body.appendChild(alert);
-      return alert.present();
     }
 
   </script>

core/src/components/app/test/safe-area/index.html

@@ -71,7 +71,7 @@
 
 <body>
   <ion-app>
-    <ion-menu>
+    <ion-menu content-id="main">
       <ion-header>
         <ion-toolbar>
           <ion-title>Menu</ion-title>
@@ -94,7 +94,7 @@
       </ion-toolbar>
     </ion-header>
 
-    <ion-content main>
+    <ion-content id="main">
       <ion-card>
         <ion-card-header>
           <ion-card-title>Card</ion-card-title>

core/src/components/back-button/back-button.ios.scss

@@ -5,7 +5,10 @@
 // --------------------------------------------------
 
 :host {
-  --background-focused: #{ion-color(primary, base, .1)};
+  --background-hover: transparent;
+  --background-hover-opacity: 1;
+  --background-focused: currentColor;
+  --background-focused-opacity: .1;
   --border-radius: 4px;
   --color: #{$back-button-ios-color};
   --icon-margin-end: -5px;
@@ -26,21 +29,20 @@
 // Back Button States
 // --------------------------------------------------
 
-:host(.activated) .button-native {
+:host(.ion-activated) .button-native {
   opacity: .4;
 }
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --opacity: .6;
+    opacity: .6;
   }
 }
 
 
-
 // Back Button Color: Focused
 // --------------------------------------------------
 
-:host(.ion-color.ion-focused) .button-native {
-  background: #{current-color(base, .1)};
+:host(.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(base)};
 }

core/src/components/back-button/back-button.md.scss

@@ -6,8 +6,10 @@
 
 :host {
   --border-radius: 4px;
-  --background-focused: rgba(66, 66, 66, 0.24);
-  --background-hover: rgba(66, 66, 66, 0.08);
+  --background-focused: currentColor;
+  --background-focused-opacity: .12;
+  --background-hover: currentColor;
+  --background-hover-opacity: 0.04;
   --color: #{$back-button-md-color};
   --icon-margin-end: 0;
   --icon-margin-start: 0;
@@ -50,8 +52,8 @@ ion-icon {
 // --------------------------------------------------
 
 @media (any-hover: hover) {
-  :host(.ion-color:hover) .button-native {
-    background: #{current-color(base, .08)};
+  :host(.ion-color:hover) .button-native::after {
+    background: #{current-color(base)};
   }
 }
 
@@ -59,6 +61,6 @@ ion-icon {
 // Back Button Color: Focused
 // --------------------------------------------------
 
-:host(.ion-color.ion-focused) .button-native {
-  background: #{current-color(base, .24)};
+:host(.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(base)};
 }

core/src/components/back-button/back-button.scss

@@ -7,11 +7,13 @@
  /**
    * @prop --background: Background of the button
    * @prop --background-focused: Background of the button when focused with the tab key
-   * @prop --background-hover: Background of the button when hover
+   * @prop --background-focused-opacity: Opacity of the button background when focused with the tab key
+   * @prop --background-hover: Background of the button on hover
+   * @prop --background-hover-opacity: Opacity of the background on hover
    *
    * @prop --color: Text color of the button
    * @prop --color-focused: Text color of the button when focused with the tab key
-   * @prop --color-hover: Text color of the button when hover
+   * @prop --color-hover: Text color of the button on hover
    *
    * @prop --min-width: Minimum width of the button
    * @prop --min-height: Minimum height of the button
@@ -48,8 +50,8 @@
    * @prop --icon-font-weight: Font weight of the button icon
    */
   --background: transparent;
-  --color-focused: var(--color);
-  --color-hover: var(--color);
+  --color-focused: currentColor;
+  --color-hover: currentColor;
   --icon-margin-top: 0;
   --icon-margin-bottom: 0;
   --icon-padding-top: 0;
@@ -143,6 +145,8 @@
   cursor: pointer;
 
   opacity: var(--opacity);
+
+  overflow: hidden;
   user-select: none;
   z-index: 0;
   appearance: none;
@@ -150,6 +154,7 @@
 
 .button-inner {
   display: flex;
+  position: relative;
 
   flex-flow: row nowrap;
   flex-shrink: 0;
@@ -158,6 +163,8 @@
 
   width: 100%;
   height: 100%;
+
+  z-index: 1;
 }
 
 
@@ -177,22 +184,45 @@ ion-icon {
 }
 
 
-// Back Button: Hover
-// --------------------------------------------------
-
-@media (any-hover: hover) {
-  :host(:hover) .button-native {
-    background: var(--background-hover);
-    color: var(--color-hover);
-  }
-}
-
 // Back Button: Focused
 // --------------------------------------------------
 
 :host(.ion-focused) .button-native {
-  background: var(--background-focused);
   color: var(--color-focused);
+
+  &::after {
+    background: var(--background-focused);
+
+    opacity: var(--background-focused-opacity);
+  }
+}
+
+
+// Back Button: Hover
+// --------------------------------------------------
+
+.button-native::after {
+  @include button-state();
+}
+
+@media (any-hover: hover) {
+  :host(:hover) .button-native {
+    color: var(--color-hover);
+
+    &::after {
+      background: var(--background-hover);
+
+      opacity: var(--background-hover-opacity);
+    }
+  }
+}
+
+
+// Back Button Color: Focused
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused) .button-native {
+  color: #{current-color(base)};
 }
 
 
@@ -206,17 +236,9 @@ ion-icon {
 }
 
 
-// Back Button Color: Focused
-// --------------------------------------------------
-
-:host(.ion-color.ion-focused) .button-native {
-  color: #{current-color(base)};
-}
-
-
 // Back Button in Toolbar: Global Theming
 // --------------------------------------------------
 
-:host-context(ion-toolbar:not(.ion-color)):not(.ion-color) {
+:host(.in-toolbar) {
   color: #{var(--ion-toolbar-color, var(--color))};
 }

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

@@ -4,7 +4,7 @@ import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import { Color } from '../../interface';
 import { ButtonInterface } from '../../utils/element-interface';
-import { createColorClasses, openURL } from '../../utils/theme';
+import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -113,6 +113,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
           'button': true, // ion-buttons target .button
           'back-button-disabled': disabled,
           'back-button-has-icon-only': hasIconOnly,
+          'in-toolbar': hostContext('ion-toolbar', this.el),
           'ion-activatable': true,
           'ion-focusable': true,
           'show-back-button': showBackButton

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

@@ -245,38 +245,40 @@ export const BackButtonExample: React.FC = () => (
 
 ## CSS Custom Properties
 
-| Name                    | Description                                                                                                    |
-| ----------------------- | -------------------------------------------------------------------------------------------------------------- |
-| `--background`          | Background of the button                                                                                       |
-| `--background-focused`  | Background of the button when focused with the tab key                                                         |
-| `--background-hover`    | Background of the button when hover                                                                            |
-| `--border-radius`       | Border radius of the button                                                                                    |
-| `--color`               | Text color of the button                                                                                       |
-| `--color-focused`       | Text color of the button when focused with the tab key                                                         |
-| `--color-hover`         | Text color of the button when hover                                                                            |
-| `--icon-font-size`      | Font size of the button icon                                                                                   |
-| `--icon-font-weight`    | Font weight of the button icon                                                                                 |
-| `--icon-margin-bottom`  | Bottom margin of the button icon                                                                               |
-| `--icon-margin-end`     | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon   |
-| `--icon-margin-start`   | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon   |
-| `--icon-margin-top`     | Top margin of the button icon                                                                                  |
-| `--icon-padding-bottom` | Bottom padding of the button icon                                                                              |
-| `--icon-padding-end`    | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon |
-| `--icon-padding-start`  | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon |
-| `--icon-padding-top`    | Top padding of the button icon                                                                                 |
-| `--margin-bottom`       | Bottom margin of the button                                                                                    |
-| `--margin-end`          | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button        |
-| `--margin-start`        | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button        |
-| `--margin-top`          | Top margin of the button                                                                                       |
-| `--min-height`          | Minimum height of the button                                                                                   |
-| `--min-width`           | Minimum width of the button                                                                                    |
-| `--opacity`             | Opacity of the button                                                                                          |
-| `--padding-bottom`      | Bottom padding of the button                                                                                   |
-| `--padding-end`         | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button      |
-| `--padding-start`       | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button      |
-| `--padding-top`         | Top padding of the button                                                                                      |
-| `--ripple-color`        | Color of the button ripple effect                                                                              |
-| `--transition`          | Transition of the button                                                                                       |
+| Name                           | Description                                                                                                    |
+| ------------------------------ | -------------------------------------------------------------------------------------------------------------- |
+| `--background`                 | Background of the button                                                                                       |
+| `--background-focused`         | Background of the button when focused with the tab key                                                         |
+| `--background-focused-opacity` | Opacity of the button background when focused with the tab key                                                 |
+| `--background-hover`           | Background of the button on hover                                                                              |
+| `--background-hover-opacity`   | Opacity of the background on hover                                                                             |
+| `--border-radius`              | Border radius of the button                                                                                    |
+| `--color`                      | Text color of the button                                                                                       |
+| `--color-focused`              | Text color of the button when focused with the tab key                                                         |
+| `--color-hover`                | Text color of the button on hover                                                                              |
+| `--icon-font-size`             | Font size of the button icon                                                                                   |
+| `--icon-font-weight`           | Font weight of the button icon                                                                                 |
+| `--icon-margin-bottom`         | Bottom margin of the button icon                                                                               |
+| `--icon-margin-end`            | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon   |
+| `--icon-margin-start`          | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon   |
+| `--icon-margin-top`            | Top margin of the button icon                                                                                  |
+| `--icon-padding-bottom`        | Bottom padding of the button icon                                                                              |
+| `--icon-padding-end`           | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon |
+| `--icon-padding-start`         | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon |
+| `--icon-padding-top`           | Top padding of the button icon                                                                                 |
+| `--margin-bottom`              | Bottom margin of the button                                                                                    |
+| `--margin-end`                 | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button        |
+| `--margin-start`               | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button        |
+| `--margin-top`                 | Top margin of the button                                                                                       |
+| `--min-height`                 | Minimum height of the button                                                                                   |
+| `--min-width`                  | Minimum width of the button                                                                                    |
+| `--opacity`                    | Opacity of the button                                                                                          |
+| `--padding-bottom`             | Bottom padding of the button                                                                                   |
+| `--padding-end`                | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button      |
+| `--padding-start`              | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button      |
+| `--padding-top`                | Top padding of the button                                                                                      |
+| `--ripple-color`               | Color of the button ripple effect                                                                              |
+| `--transition`                 | Transition of the button                                                                                       |
 
 
 ## Dependencies

core/src/components/back-button/test/basic/index.html

@@ -10,7 +10,8 @@
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+</head>
 
 <body>
   <ion-app>
@@ -75,19 +76,63 @@
       <p>
         <ion-back-button class="custom"></ion-back-button>
         <ion-back-button color="secondary" class="custom"></ion-back-button>
-      </p>
-
-      <p>
         <ion-back-button class="custom ion-focused"></ion-back-button>
         <ion-back-button color="secondary" class="custom ion-focused"></ion-back-button>
       </p>
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          <ion-back-button class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Default</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="primary">
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          <ion-back-button class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Primary</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="light">
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          <ion-back-button class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Light</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="success">
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          <ion-back-button class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Success</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar class="themed">
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          <ion-back-button class="ion-focused"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Themed</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="dark">
+        <ion-buttons slot="start">
+          <ion-back-button class="ion-hide"></ion-back-button>
+        </ion-buttons>
+        <ion-title>Hidden</ion-title>
+      </ion-toolbar>
     </ion-content>
   </ion-app>
 
   <script>
     var buttons = document.querySelectorAll('ion-back-button');
 
-    for(var i = 0; i < buttons.length; i++) {
+    for (var i = 0; i < buttons.length; i++) {
       buttons[i].addEventListener('click', (event) => onClick(event));
     }
 
@@ -113,7 +158,9 @@
     .wide {
       --background: #d1f3ff;
       --background-hover: #add8e6;
+      --background-hover-opacity: 1;
       --background-focused: #84c5db;
+      --background-focused-opacity: 1;
 
       height: 50px;
       width: 150px;
@@ -140,6 +187,14 @@
       --padding-end: 10px;
     }
 
+    .custom:hover {
+      opacity: 1;
+    }
+
+    .themed {
+      --ion-toolbar-background: #222;
+      --ion-toolbar-color: #ddd;
+    }
   </style>
 </body>
 

core/src/components/back-button/test/standalone/index.html

@@ -34,15 +34,15 @@
     <ion-back-button color="dark"></ion-back-button>
   </p>
   <p>
-    <ion-back-button color="primary" class="activated"></ion-back-button>
-    <ion-back-button color="secondary" class="activated"></ion-back-button>
-    <ion-back-button color="tertiary" class="activated"></ion-back-button>
-    <ion-back-button color="success" class="activated"></ion-back-button>
-    <ion-back-button color="warning" class="activated"></ion-back-button>
-    <ion-back-button color="danger" class="activated"></ion-back-button>
-    <ion-back-button color="light" class="activated"></ion-back-button>
-    <ion-back-button color="medium" class="activated"></ion-back-button>
-    <ion-back-button color="dark" class="activated"></ion-back-button>
+    <ion-back-button color="primary" class="ion-activated"></ion-back-button>
+    <ion-back-button color="secondary" class="ion-activated"></ion-back-button>
+    <ion-back-button color="tertiary" class="ion-activated"></ion-back-button>
+    <ion-back-button color="success" class="ion-activated"></ion-back-button>
+    <ion-back-button color="warning" class="ion-activated"></ion-back-button>
+    <ion-back-button color="danger" class="ion-activated"></ion-back-button>
+    <ion-back-button color="light" class="ion-activated"></ion-back-button>
+    <ion-back-button color="medium" class="ion-activated"></ion-back-button>
+    <ion-back-button color="dark" class="ion-activated"></ion-back-button>
   </p>
 
   <h3>Custom</h3>
@@ -54,13 +54,13 @@
 
   <!-- Custom Colors -->
   <ion-back-button class="custom"></ion-back-button>
-  <ion-back-button class="custom activated"></ion-back-button>
+  <ion-back-button class="custom ion-activated"></ion-back-button>
   <ion-back-button color="secondary" class="custom"></ion-back-button>
 
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
-      <ion-back-button class="activated"></ion-back-button>
+      <ion-back-button class="ion-activated"></ion-back-button>
     </ion-buttons>
     <ion-title>Default</ion-title>
   </ion-toolbar>
@@ -68,7 +68,7 @@
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-back-button class="custom"></ion-back-button>
-      <ion-back-button class="custom activated"></ion-back-button>
+      <ion-back-button class="custom ion-activated"></ion-back-button>
     </ion-buttons>
     <ion-title>Custom</ion-title>
   </ion-toolbar>
@@ -76,7 +76,7 @@
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-back-button color="secondary"></ion-back-button>
-      <ion-back-button color="secondary" class="activated"></ion-back-button>
+      <ion-back-button color="secondary" class="ion-activated"></ion-back-button>
     </ion-buttons>
     <ion-title>Secondary</ion-title>
   </ion-toolbar>
@@ -84,7 +84,7 @@
   <ion-toolbar color="danger">
     <ion-buttons slot="start">
       <ion-back-button></ion-back-button>
-      <ion-back-button class="activated"></ion-back-button>
+      <ion-back-button class="ion-activated"></ion-back-button>
     </ion-buttons>
     <ion-title>Danger</ion-title>
   </ion-toolbar>
@@ -92,7 +92,7 @@
   <ion-toolbar color="dark">
     <ion-buttons slot="start">
       <ion-back-button text="Back" icon=""></ion-back-button>
-      <ion-back-button text="Back" icon="" class="activated"></ion-back-button>
+      <ion-back-button text="Back" icon="" class="ion-activated"></ion-back-button>
     </ion-buttons>
     <ion-title>Dark</ion-title>
   </ion-toolbar>

core/src/components/backdrop/readme.md

@@ -114,13 +114,13 @@ export const BackdropExample: React.FC = () => (
   <ion-backdrop visible="false"></ion-backdrop>
 
   <!-- Backdrop with propagation -->
-  <ion-backdrop stopPropagation="false"></ion-backdrop>
+  <ion-backdrop stop-propagation="false"></ion-backdrop>
 
   <!-- Backdrop that sets dynamic properties -->
   <ion-backdrop
     :tappable="enableBackdropDismiss"
     :visible="showBackdrop"
-    :stopPropagation="shouldPropagate">
+    :stop-propagation="shouldPropagate">
   </ion-backdrop>
 </template>
 

core/src/components/backdrop/usage/vue.md

@@ -10,13 +10,13 @@
   <ion-backdrop visible="false"></ion-backdrop>
 
   <!-- Backdrop with propagation -->
-  <ion-backdrop stopPropagation="false"></ion-backdrop>
+  <ion-backdrop stop-propagation="false"></ion-backdrop>
 
   <!-- Backdrop that sets dynamic properties -->
   <ion-backdrop
     :tappable="enableBackdropDismiss"
     :visible="showBackdrop"
-    :stopPropagation="shouldPropagate">
+    :stop-propagation="shouldPropagate">
   </ion-backdrop>
 </template>
 

core/src/components/button/button.ios.scss

@@ -23,20 +23,19 @@
   letter-spacing: #{$button-ios-letter-spacing};
 }
 
+
 // iOS Solid Button
 // --------------------------------------------------
 
 :host(.button-solid) {
   --background-activated: #{ion-color(primary, shade)};
+  --background-focused: #{ion-color(primary, shade)};
+  --background-hover: #{ion-color(primary, tint)};
+  --background-activated-opacity: 1;
+  --background-focused-opacity: 1;
+  --background-hover-opacity: 1;
 }
 
-:host(.button-solid.activated) {
-  --opacity: #{$button-ios-opacity-activated};
-}
-
-:host(.button-solid.activated.ion-color) .button-native {
-  background: current-color(shade);
-}
 
 // iOS Outline Button
 // --------------------------------------------------
@@ -46,28 +45,21 @@
   --border-width: #{$button-ios-outline-border-width};
   --border-style: #{$button-ios-outline-border-style};
   --background-activated: #{ion-color(primary, base)};
-  --background-focused: #{ion-color(primary, base, .1)};
+  --background-focused: #{ion-color(primary, base)};
+  --background-hover: transparent;
+  --background-focused-opacity: .1;
   --color-activated: #{ion-color(primary, contrast)};
 }
 
-:host(.button-outline.activated.ion-color) .button-native {
-  background: current-color(base);
-  color: current-color(contrast);
-}
-
 
 // iOS Clear Button
 // --------------------------------------------------
 
-:host(.button-clear.activated) {
-  --opacity: #{$button-ios-clear-opacity-activated};
-}
-
 :host(.button-clear) {
   --background-activated: transparent;
-  --background-focused: #{ion-color(primary, base, .1)};
-  --color-activated: #{ion-color(primary, base)};
-  --color-focused: #{ion-color(primary, base)};
+  --background-focused: #{ion-color(primary, base)};
+  --background-hover: transparent;
+  --background-focused-opacity: .1;
 
   font-size: #{$button-ios-clear-font-size};
   font-weight: #{$button-ios-clear-font-weight};
@@ -124,29 +116,63 @@
 }
 
 
-// iOS Button Focus
+// iOS Button Activated
+// --------------------------------------------------
+
+:host(.button-clear.ion-activated) {
+  opacity: #{$button-ios-clear-opacity-activated};
+}
+
+:host(.button-outline.ion-activated.ion-color) .button-native {
+  color: current-color(contrast);
+
+  &::after {
+    background: current-color(base);
+  }
+}
+
+:host(.button-solid.ion-color.ion-activated) .button-native::after {
+  background: #{current-color(shade)};
+}
+
+// iOS Button Focused
+// --------------------------------------------------
+
+:host(.button-outline.ion-focused.ion-color) .button-native,
+:host(.button-clear.ion-focused.ion-color) .button-native {
+  color: current-color(base);
+
+  &::after {
+    background: current-color(base);
+  }
+}
+
+:host(.button-solid.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(shade)};
+}
+
+// iOS Button Hover
 // --------------------------------------------------
 
 @media (any-hover: hover) {
-  :host(.button-solid:hover) {
-    --opacity: #{$button-ios-opacity-hover};
-  }
-
+  // Clear and outline buttons use opacity so set
+  // background to transparent
   :host(.button-clear:hover),
   :host(.button-outline:hover) {
-    --opacity: #{$button-ios-clear-opacity-hover};
+    opacity: #{$button-ios-clear-opacity-hover};
   }
 
-  // Since iOS changes the opacity on hover,
-  // we want to keep the background if focused
-  // or activated
-  :host(.ion-focused:hover) {
-    --background-hover: var(--background-focused);
-    --color-hover: var(--color-focused);
+  :host(.button-clear.ion-color:hover) .button-native,
+  :host(.button-outline.ion-color:hover) .button-native {
+    color: #{current-color(base)};
+
+    &::after {
+      background: transparent;
+    }
   }
 
-  :host(.activated:hover) {
-    --background-hover: var(--background-activated);
-    --color-hover: var(--color-activated);
+  // Solid buttons use the tint background
+  :host(.button-solid.ion-color:hover) .button-native::after {
+    background: #{current-color(tint)};
   }
 }

core/src/components/button/button.md.scss

@@ -30,11 +30,16 @@
 // --------------------------------------------------
 
 :host(.button-solid) {
-  --background-activated: var(--background);
+  --background-activated: transparent;
+  --background-hover: #{ion-color(primary, contrast)};
+  --background-focused: #{ion-color(primary, contrast)};
+  --background-activated-opacity: 0;
+  --background-focused-opacity: .24;
+  --background-hover-opacity: .08;
   --box-shadow: #{$button-md-box-shadow};
 }
 
-:host(.button-solid.activated) {
+:host(.button-solid.ion-activated) {
   --box-shadow: #{$button-md-box-shadow-activated};
 }
 
@@ -46,12 +51,14 @@
   --border-style: solid;
   --box-shadow: none;
   --background-activated: transparent;
-  --background-focused: #{ion-color(primary, base, .1)};
-  --background-hover: #{ion-color(primary, base, .04)};
-  --color-activated: #{ion-color(primary, base)};
+  --background-focused: #{ion-color(primary, base)};
+  --background-hover: #{ion-color(primary, base)};
+  --background-activated-opacity: 0;
+  --background-focused-opacity: .12;
+  --background-hover-opacity: .04;
 }
 
-:host(.button-outline.activated.ion-color) .button-native {
+:host(.button-outline.ion-activated.ion-color) .button-native {
   background: transparent;
 }
 
@@ -61,10 +68,11 @@
 
 :host(.button-clear) {
   --background-activated: transparent;
-  --background-focused: #{ion-color(primary, base, .1)};
-  --background-hover: #{ion-color(primary, base, .04)};
-  --color-activated: #{ion-color(primary, base)};
-  --color-focused: #{ion-color(primary, base)};
+  --background-focused: #{ion-color(primary, base)};
+  --background-hover: #{ion-color(primary, base)};
+  --background-activated-opacity: 0;
+  --background-focused-opacity: .12;
+  --background-hover-opacity: .04;
 }
 
 
@@ -121,13 +129,30 @@
 // Material Design Button: Hover
 // --------------------------------------------------
 
+:host(.button-solid.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(contrast)};
+
+  opacity: .24;
+}
+
+:host(.button-clear.ion-color.ion-focused) .button-native::after,
+:host(.button-outline.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(base)};
+
+  opacity: .12;
+}
+
 @media (any-hover: hover) {
-  :host(.button-solid.ion-color:hover) .button-native {
-    background: #{current-color(tint)};
+  :host(.button-solid.ion-color:hover) .button-native::after {
+    background: #{current-color(contrast)};
+
+    opacity: .08;
   }
 
-  :host(.button-clear.ion-color:hover) .button-native,
-  :host(.button-outline.ion-color:hover) .button-native {
-    background: #{current-color(base, .04)};
+  :host(.button-clear.ion-color:hover) .button-native::after,
+  :host(.button-outline.ion-color:hover) .button-native::after {
+    background: #{current-color(base)};
+
+    opacity: .04;
   }
 }

core/src/components/button/button.scss

@@ -6,9 +6,12 @@
 :host {
   /**
    * @prop --background: Background of the button
-   * @prop --background-activated: Background of the button when pressed
+   * @prop --background-activated: Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.
+   * @prop --background-activated-opacity: Opacity of the button when pressed
    * @prop --background-focused: Background of the button when focused with the tab key
+   * @prop --background-focused-opacity: Opacity of the button when focused with the tab key
    * @prop --background-hover: Background of the button on hover
+   * @prop --background-hover-opacity: Opacity of the background on hover
    *
    * @prop --color: Text color of the button
    * @prop --color-activated: Text color of the button when pressed
@@ -37,7 +40,9 @@
   --border-width: initial;
   --border-color: initial;
   --border-style: initial;
-  --color-hover: initial;
+  --color-activated: var(--color);
+  --color-focused: var(--color);
+  --color-hover: var(--color);
   --box-shadow: none;
 
   display: inline-block;
@@ -63,12 +68,8 @@
 }
 
 :host(.button-disabled) {
-  --opacity: .5;
-  pointer-events: none;
-}
-
-:host(.button-disabled) .button-native {
   cursor: default;
+  opacity: .5;
   pointer-events: none;
 }
 
@@ -78,22 +79,7 @@
 // Default Solid Color
 :host(.button-solid) {
   --background: #{ion-color(primary, base)};
-  --background-focused: #{ion-color(primary, shade)};
-  --background-hover: #{ion-color(primary, tint)};
   --color: #{ion-color(primary, contrast)};
-  --color-activated: #{ion-color(primary, contrast)};
-  --color-focused: #{ion-color(primary, contrast)};
-}
-
-// Solid Button with Color
-:host(.button-solid.ion-color) .button-native {
-  background: current-color(base);
-  color: current-color(contrast);
-}
-
-// Focused/Activated Solid Button with Color
-:host(.button-solid.ion-color.ion-focused) .button-native {
-  background: #{current-color(shade)};
 }
 
 
@@ -105,20 +91,6 @@
   --border-color: #{ion-color(primary, base)};
   --background: transparent;
   --color: #{ion-color(primary, base)};
-  --color-focused: #{ion-color(primary, base)};
-}
-
-// Outline Button with Color
-:host(.button-outline.ion-color) .button-native {
-  border-color: current-color(base);
-
-  background: transparent;
-  color: current-color(base);
-}
-
-:host(.button-outline.ion-focused.ion-color) .button-native {
-  background: current-color(base, .1);
-  color: current-color(base);
 }
 
 
@@ -132,23 +104,6 @@
   --color: #{ion-color(primary, base)};
 }
 
-// Clear Button with Color
-:host(.button-clear.ion-color) .button-native {
-  background: transparent;
-  color: current-color(base);
-}
-
-// Focused Clear Button with Color
-:host(.button-clear.ion-focused.ion-color) .button-native {
-  background: current-color(base, .1);
-  color: current-color(base);
-}
-
-// Activated Clear Button with Color
-:host(.button-clear.activated.ion-color) .button-native {
-  background: transparent;
-}
-
 
 // Block Button
 // --------------------------------------------------
@@ -229,6 +184,8 @@
   opacity: var(--opacity);
   overflow: var(--overflow);
 
+  overflow: hidden;
+
   z-index: 0;
   box-sizing: border-box;
   appearance: none;
@@ -240,6 +197,7 @@
 
 .button-inner {
   display: flex;
+  position: relative;
 
   flex-flow: row nowrap;
   flex-shrink: 0;
@@ -248,6 +206,8 @@
 
   width: 100%;
   height: 100%;
+
+  z-index: 1;
 }
 
 
@@ -279,22 +239,69 @@ ion-ripple-effect {
   color: var(--ripple-color);
 }
 
-// Button: Hover
+
+// Button: States
 // --------------------------------------------------
 
-:host(.ion-focused) .button-native {
-  background: var(--background-focused);
-  color: var(--color-focused);
+.button-native::after {
+  @include button-state();
 }
 
-:host(.activated) .button-native {
-  background: var(--background-activated);
+// Button Activated
+:host(.ion-activated) {
   color: var(--color-activated);
 }
 
+:host(.ion-activated) .button-native::after {
+  background: var(--background-activated);
+
+  opacity: var(--background-activated-opacity);
+}
+
+// Button Focused
+:host(.ion-focused) {
+  color: var(--color-focused);
+}
+
+:host(.ion-focused) .button-native::after {
+  background: var(--background-focused);
+
+  opacity: var(--background-focused-opacity);
+}
+
+// Button Hover
 @media (any-hover: hover) {
-  :host(:hover) .button-native {
-    background: var(--background-hover);
+  :host(:hover) {
     color: var(--color-hover);
   }
+
+  :host(:hover) .button-native::after {
+    background: var(--background-hover);
+
+    opacity: var(--background-hover-opacity);
+  }
+}
+
+
+// Button Colors
+// --------------------------------------------------
+
+// Solid Button with Color
+:host(.button-solid.ion-color) .button-native {
+  background: current-color(base);
+  color: current-color(contrast);
+}
+
+// Outline Button with Color
+:host(.button-outline.ion-color) .button-native {
+  border-color: current-color(base);
+
+  background: transparent;
+  color: current-color(base);
+}
+
+// Clear Button with Color
+:host(.button-clear.ion-color) .button-native {
+  background: transparent;
+  color: current-color(base);
 }

core/src/components/button/button.tsx

@@ -13,6 +13,9 @@ import { createColorClasses, openURL } from '../../utils/theme';
  * @slot icon-only - Should be used on an icon in a button that has no text.
  * @slot start - Content is placed to the left of the button text in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the button text in LTR, and to the left in RTL.
+ *
+ * @part button - The native button or anchor tag that is rendered.
+ * @part button-inner - The span inside of the native button or anchor.
  */
 @Component({
   tag: 'ion-button',
@@ -218,8 +221,9 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           disabled={disabled}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
+          part="button"
         >
-          <span class="button-inner">
+          <span class="button-inner" part="button-inner">
             <slot name="icon-only"></slot>
             <slot name="start"></slot>
             <slot></slot>

core/src/components/button/readme.md

@@ -252,28 +252,31 @@ export const ButtonExample: React.FC = () => (
 
 ## CSS Custom Properties
 
-| Name                     | Description                                                                                               |
-| ------------------------ | --------------------------------------------------------------------------------------------------------- |
-| `--background`           | Background of the button                                                                                  |
-| `--background-activated` | Background of the button when pressed                                                                     |
-| `--background-focused`   | Background of the button when focused with the tab key                                                    |
-| `--background-hover`     | Background of the button on hover                                                                         |
-| `--border-color`         | Border color of the button                                                                                |
-| `--border-radius`        | Border radius of the button                                                                               |
-| `--border-style`         | Border style of the button                                                                                |
-| `--border-width`         | Border width of the button                                                                                |
-| `--box-shadow`           | Box shadow of the button                                                                                  |
-| `--color`                | Text color of the button                                                                                  |
-| `--color-activated`      | Text color of the button when pressed                                                                     |
-| `--color-focused`        | Text color of the button when focused with the tab key                                                    |
-| `--color-hover`          | Text color of the button when hover                                                                       |
-| `--opacity`              | Opacity of the button                                                                                     |
-| `--padding-bottom`       | Bottom padding of the button                                                                              |
-| `--padding-end`          | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
-| `--padding-start`        | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
-| `--padding-top`          | Top padding of the button                                                                                 |
-| `--ripple-color`         | Color of the button ripple effect                                                                         |
-| `--transition`           | Transition of the button                                                                                  |
+| Name                             | Description                                                                                               |
+| -------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `--background`                   | Background of the button                                                                                  |
+| `--background-activated`         | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. |
+| `--background-activated-opacity` | Opacity of the button when pressed                                                                        |
+| `--background-focused`           | Background of the button when focused with the tab key                                                    |
+| `--background-focused-opacity`   | Opacity of the button when focused with the tab key                                                       |
+| `--background-hover`             | Background of the button on hover                                                                         |
+| `--background-hover-opacity`     | Opacity of the background on hover                                                                        |
+| `--border-color`                 | Border color of the button                                                                                |
+| `--border-radius`                | Border radius of the button                                                                               |
+| `--border-style`                 | Border style of the button                                                                                |
+| `--border-width`                 | Border width of the button                                                                                |
+| `--box-shadow`                   | Box shadow of the button                                                                                  |
+| `--color`                        | Text color of the button                                                                                  |
+| `--color-activated`              | Text color of the button when pressed                                                                     |
+| `--color-focused`                | Text color of the button when focused with the tab key                                                    |
+| `--color-hover`                  | Text color of the button when hover                                                                       |
+| `--opacity`                      | Opacity of the button                                                                                     |
+| `--padding-bottom`               | Bottom padding of the button                                                                              |
+| `--padding-end`                  | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
+| `--padding-start`                | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
+| `--padding-top`                  | Top padding of the button                                                                                 |
+| `--ripple-color`                 | Color of the button ripple effect                                                                         |
+| `--transition`                   | Transition of the button                                                                                  |
 
 
 ## Dependencies

core/src/components/button/test/anchor/index.html

@@ -23,43 +23,43 @@
     <ion-content class="ion-padding" id="content" no-bounce>
       <p>
         <ion-button href="#">Default</ion-button>
-        <ion-button href="#" class="activated">Default.activated</ion-button>
+        <ion-button href="#" class="ion-activated">Default.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="primary">Primary</ion-button>
-        <ion-button href="#" class="activated" color="primary">Primary.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="primary">Primary.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="secondary">Secondary</ion-button>
-        <ion-button href="#" class="activated" color="secondary">Secondary.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="secondary">Secondary.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="tertiary">Tertiary</ion-button>
-        <ion-button href="#" class="activated" color="tertiary">Tertiary.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="success">Success</ion-button>
-        <ion-button href="#" class="activated" color="success">Success.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="success">Success.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="warning">Warning</ion-button>
-        <ion-button href="#" class="activated" color="warning">Warning.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="warning">Warning.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="danger">Danger</ion-button>
-        <ion-button href="#" class="activated" color="danger">Danger.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="danger">Danger.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="light">Light</ion-button>
-        <ion-button href="#" class="activated" color="light">Light.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="light">Light.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="medium">Medium</ion-button>
-        <ion-button href="#" class="activated" color="medium">Medium.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="medium">Medium.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" color="dark">Dark</ion-button>
-        <ion-button href="#" class="activated" color="dark">Dark.activated</ion-button>
+        <ion-button href="#" class="ion-activated" color="dark">Dark.activated</ion-button>
       </p>
       <p>
         <ion-button href="#" disabled>Disabled</ion-button>

core/src/components/button/test/basic/index.html

@@ -24,61 +24,61 @@
       <p>
         <ion-button>Default</ion-button>
         <ion-button class="ion-focused">Default.focused</ion-button>
-        <ion-button class="activated">Default.activated</ion-button>
+        <ion-button class="ion-activated">Default.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="primary">Primary</ion-button>
         <ion-button class="ion-focused" color="primary">Primary.focused</ion-button>
-        <ion-button class="activated" color="primary">Primary.activated</ion-button>
+        <ion-button class="ion-activated" color="primary">Primary.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="secondary">Secondary</ion-button>
         <ion-button class="ion-focused" color="secondary">Secondary.focused</ion-button>
-        <ion-button class="activated" color="secondary">Secondary.activated</ion-button>
+        <ion-button class="ion-activated" color="secondary">Secondary.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="tertiary">Tertiary</ion-button>
         <ion-button class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
-        <ion-button class="activated" color="tertiary">Tertiary.activated</ion-button>
+        <ion-button class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="success">Success</ion-button>
         <ion-button class="ion-focused" color="success">Success.focused</ion-button>
-        <ion-button class="activated" color="success">Success.activated</ion-button>
+        <ion-button class="ion-activated" color="success">Success.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="warning">Warning</ion-button>
         <ion-button class="ion-focused" color="warning">Warning.focused</ion-button>
-        <ion-button class="activated" color="warning">Warning.activated</ion-button>
+        <ion-button class="ion-activated" color="warning">Warning.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="danger">Danger</ion-button>
         <ion-button class="ion-focused" color="danger">Danger.focused</ion-button>
-        <ion-button class="activated" color="danger">Danger.activated</ion-button>
+        <ion-button class="ion-activated" color="danger">Danger.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="light">Light</ion-button>
         <ion-button class="ion-focused" color="light">Light.focused</ion-button>
-        <ion-button class="activated" color="light">Light.activated</ion-button>
+        <ion-button class="ion-activated" color="light">Light.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="medium">Medium</ion-button>
         <ion-button class="ion-focused" color="medium">Medium.focused</ion-button>
-        <ion-button class="activated" color="medium">Medium.activated</ion-button>
+        <ion-button class="ion-activated" color="medium">Medium.activated</ion-button>
       </p>
 
       <p>
         <ion-button color="dark">Dark</ion-button>
         <ion-button class="ion-focused" color="dark">Dark.focused</ion-button>
-        <ion-button class="activated" color="dark">Dark.activated</ion-button>
+        <ion-button class="ion-activated" color="dark">Dark.activated</ion-button>
       </p>
 
       <p>

core/src/components/button/test/clear/index.html

@@ -23,72 +23,72 @@
     <ion-content class="ion-padding" id="content" no-bounce>
       <p>
         <ion-button fill="clear">Default</ion-button>
-        <ion-button fill="clear" class="activated">Default.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated">Default.activated</ion-button>
         <ion-button fill="clear" class="ion-focused">Default.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused">Default.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused">Default.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="primary">Primary</ion-button>
-        <ion-button fill="clear" class="activated" color="primary">Primary.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="primary">Primary.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="primary">Primary.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="primary">Primary.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="primary">Primary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="secondary">Secondary</ion-button>
-        <ion-button fill="clear" class="activated" color="secondary">Secondary.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="secondary">Secondary.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="secondary">Secondary.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="tertiary">Tertiary</ion-button>
-        <ion-button fill="clear" class="activated" color="tertiary">Tertiary.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="success">Success</ion-button>
-        <ion-button fill="clear" class="activated" color="success">Success.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="success">Success.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="success">Success.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="success">Success.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="success">Success.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="warning">Warning</ion-button>
-        <ion-button fill="clear" class="activated" color="warning">Warning.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="warning">Warning.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="warning">Warning.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="warning">Warning.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="warning">Warning.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="danger">Danger</ion-button>
-        <ion-button fill="clear" class="activated" color="danger">Danger.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="danger">Danger.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="danger">Danger.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="danger">Danger.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="danger">Danger.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="light">Light</ion-button>
-        <ion-button fill="clear" class="activated" color="light">Light.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="light">Light.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="light">Light.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="light">Light.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="light">Light.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="medium">Medium</ion-button>
-        <ion-button fill="clear" class="activated" color="medium">Medium.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="medium">Medium.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="medium">Medium.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="medium">Medium.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="medium">Medium.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="clear" color="dark">Dark</ion-button>
-        <ion-button fill="clear" class="activated" color="dark">Dark.activated</ion-button>
+        <ion-button fill="clear" class="ion-activated" color="dark">Dark.activated</ion-button>
         <ion-button fill="clear" class="ion-focused" color="dark">Dark.focused</ion-button>
-        <ion-button fill="clear" class="activated ion-focused" color="dark">Dark.activated.focused</ion-button>
+        <ion-button fill="clear" class="ion-activated ion-focused" color="dark">Dark.activated.focused</ion-button>
       </p>
       <p>
         <ion-button fill="clear" disabled>Disabled</ion-button>

core/src/components/button/test/outline/index.html

@@ -23,72 +23,72 @@
     <ion-content class="ion-padding" id="content" no-bounce>
       <p>
         <ion-button fill="outline">Default</ion-button>
-        <ion-button fill="outline" class="activated">Default.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated">Default.activated</ion-button>
         <ion-button fill="outline" class="ion-focused">Default.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused">Default.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused">Default.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="primary">Primary</ion-button>
-        <ion-button fill="outline" class="activated" color="primary">Primary.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="primary">Primary.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="primary">Primary.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="primary">Primary.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="primary">Primary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="secondary">Secondary</ion-button>
-        <ion-button fill="outline" class="activated" color="secondary">Secondary.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="secondary">Secondary.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="secondary">Secondary.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="secondary">Secondary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="tertiary">Tertiary</ion-button>
-        <ion-button fill="outline" class="activated" color="tertiary">Tertiary.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="tertiary">Tertiary.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="success">Success</ion-button>
-        <ion-button fill="outline" class="activated" color="success">Success.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="success">Success.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="success">Success.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="success">Success.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="success">Success.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="warning">Warning</ion-button>
-        <ion-button fill="outline" class="activated" color="warning">Warning.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="warning">Warning.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="warning">Warning.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="warning">Warning.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="warning">Warning.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="danger">Danger</ion-button>
-        <ion-button fill="outline" class="activated" color="danger">Danger.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="danger">Danger.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="danger">Danger.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="danger">Danger.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="danger">Danger.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="light">Light</ion-button>
-        <ion-button fill="outline" class="activated" color="light">Light.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="light">Light.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="light">Light.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="light">Light.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="light">Light.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="medium">Medium</ion-button>
-        <ion-button fill="outline" class="activated" color="medium">Medium.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="medium">Medium.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="medium">Medium.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="medium">Medium.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="medium">Medium.activated.focused</ion-button>
       </p>
 
       <p>
         <ion-button fill="outline" color="dark">Dark</ion-button>
-        <ion-button fill="outline" class="activated" color="dark">Dark.activated</ion-button>
+        <ion-button fill="outline" class="ion-activated" color="dark">Dark.activated</ion-button>
         <ion-button fill="outline" class="ion-focused" color="dark">Dark.focused</ion-button>
-        <ion-button fill="outline" class="activated ion-focused" color="dark">Dark.activated.focused</ion-button>
+        <ion-button fill="outline" class="ion-activated ion-focused" color="dark">Dark.activated.focused</ion-button>
       </p>
       <p>
         <ion-button fill="outline" disabled>Disabled</ion-button>

core/src/components/button/test/standalone/index.html

@@ -53,8 +53,8 @@
 
   <!-- Custom Colors -->
   <ion-button class="custom">custom</ion-button>
-  <ion-button class="custom activated ion-focused">custom.focused</ion-button>
-  <ion-button class="custom activated">custom.activated</ion-button>
+  <ion-button class="custom ion-activated ion-focused">custom.focused</ion-button>
+  <ion-button class="custom ion-activated">custom.activated</ion-button>
   <ion-button color="secondary" class="custom">custom w/ secondary</ion-button>
   <ion-button fill="clear" class="medium">custom medium</ion-button>
 
@@ -71,7 +71,7 @@
   <ion-toolbar>
     <ion-buttons slot="start">
       <ion-button class="custom">Custom</ion-button>
-      <ion-button class="custom activated">Custom.a</ion-button>
+      <ion-button class="custom ion-activated">Custom.a</ion-button>
     </ion-buttons>
     <ion-title>Bar</ion-title>
     <ion-buttons slot="end">
@@ -101,7 +101,7 @@
 
     .custom {
       --background: lightpink;
-      --background-hover: rgba(255, 182, 193, 0.5);
+      --background-hover: #ffb6c1;
       --background-activated: green;
       --color: #222;
       --color-activated: white;
@@ -110,7 +110,7 @@
 
     .medium {
       --color: #989aa2;
-      --background-hover: rgba(152, 154, 162, 0.4);
+      --background-hover: #989aa2;
     }
   </style>
 </body>

core/src/components/button/test/states/e2e.ts

@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('button: states', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/button/test/states?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});

core/src/components/button/test/states/index.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Button - States</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/core.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <h3>Default</h3>
+      <p>
+        <ion-button>Default</ion-button>
+        <ion-button><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button shape="round">Round</ion-button>
+        <ion-button fill="outline">Outline</ion-button>
+        <ion-button fill="clear">Clear</ion-button>
+        <ion-button color="secondary">Default</ion-button>
+        <ion-button color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button color="danger" shape="round">Round</ion-button>
+        <ion-button color="warning" fill="outline">Outline</ion-button>
+        <ion-button color="dark" fill="clear">Clear</ion-button>
+      </p>
+
+      <h3>Focused</h3>
+      <p>
+        <ion-button class="ion-focused">Default</ion-button>
+        <ion-button class="ion-focused"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="ion-focused" shape="round">Round</ion-button>
+        <ion-button class="ion-focused" fill="outline">Outline</ion-button>
+        <ion-button class="ion-focused" fill="clear">Clear</ion-button>
+        <ion-button class="ion-focused" color="secondary">Default</ion-button>
+        <ion-button class="ion-focused" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="ion-focused" color="danger" shape="round">Round</ion-button>
+        <ion-button class="ion-focused" color="warning" fill="outline">Outline</ion-button>
+        <ion-button class="ion-focused" color="dark" fill="clear">Clear</ion-button>
+      </p>
+
+      <h3>Activated</h3>
+      <p>
+        <ion-button class="ion-activated">Default</ion-button>
+        <ion-button class="ion-activated"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="ion-activated" shape="round">Round</ion-button>
+        <ion-button class="ion-activated" fill="outline">Outline</ion-button>
+        <ion-button class="ion-activated" fill="clear">Clear</ion-button>
+        <ion-button class="ion-activated" color="secondary">Default</ion-button>
+        <ion-button class="ion-activated" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="ion-activated" color="danger" shape="round">Round</ion-button>
+        <ion-button class="ion-activated" color="warning" fill="outline">Outline</ion-button>
+        <ion-button class="ion-activated" color="dark" fill="clear">Clear</ion-button>
+      </p>
+
+      <h3>Custom</h3>
+      <p>
+        <ion-button class="custom">Default</ion-button>
+        <ion-button class="custom"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="custom" shape="round">Round</ion-button>
+        <ion-button class="custom" fill="outline">Outline</ion-button>
+        <ion-button class="custom" fill="clear">Clear</ion-button>
+        <ion-button class="custom" color="secondary">Default</ion-button>
+        <ion-button class="custom" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="custom" color="danger" shape="round">Round</ion-button>
+        <ion-button class="custom" color="warning" fill="outline">Outline</ion-button>
+        <ion-button class="custom" color="dark" fill="clear">Clear</ion-button>
+        <ion-button class="custom ion-focused">Default</ion-button>
+        <ion-button class="custom ion-focused"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="custom ion-focused" shape="round">Round</ion-button>
+        <ion-button class="custom ion-focused" fill="outline">Outline</ion-button>
+        <ion-button class="custom ion-focused" fill="clear">Clear</ion-button>
+        <ion-button class="custom ion-focused" color="secondary">Default</ion-button>
+        <ion-button class="custom ion-focused" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="custom ion-focused" color="danger" shape="round">Round</ion-button>
+        <ion-button class="custom ion-focused" color="warning" fill="outline">Outline</ion-button>
+        <ion-button class="custom ion-focused" color="dark" fill="clear">Clear</ion-button>
+        <ion-button class="custom ion-activated">Default</ion-button>
+        <ion-button class="custom ion-activated"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="custom ion-activated" shape="round">Round</ion-button>
+        <ion-button class="custom ion-activated" fill="outline">Outline</ion-button>
+        <ion-button class="custom ion-activated" fill="clear">Clear</ion-button>
+        <ion-button class="custom ion-activated" color="secondary">Default</ion-button>
+        <ion-button class="custom ion-activated" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
+        <ion-button class="custom ion-activated" color="danger" shape="round">Round</ion-button>
+        <ion-button class="custom ion-activated" color="warning" fill="outline">Outline</ion-button>
+        <ion-button class="custom ion-activated" color="dark" fill="clear">Clear</ion-button>
+      </p>
+    </ion-content>
+  </ion-app>
+
+
+  <style>
+    .custom {
+      --background-hover: red;
+      --background-hover-opacity: 1;
+
+      --background-focused: green;
+      --background-activated: blue;
+    }
+
+    .custom:hover {
+      opacity: 1;
+    }
+
+    /* TODO should this inherit or users set all */
+    .custom {
+      --color: red;
+    }
+  </style>
+</body>
+</html>

core/src/components/button/test/toolbar/index.html

@@ -99,15 +99,15 @@
 
       <ion-toolbar>
         <ion-buttons slot="secondary">
-          <ion-button class="activated">
+          <ion-button class="ion-activated">
             <ion-icon slot="icon-only" name="person-circle"></ion-icon>
           </ion-button>
-          <ion-button class="activated">
+          <ion-button class="ion-activated">
             <ion-icon slot="icon-only" name="search"></ion-icon>
           </ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
-          <ion-button color="secondary" class="activated">
+          <ion-button color="secondary" class="ion-activated">
             <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
           </ion-button>
         </ion-buttons>
@@ -135,17 +135,17 @@
 
       <ion-toolbar>
         <ion-buttons slot="secondary">
-          <ion-button fill="solid" class="activated">
+          <ion-button fill="solid" class="ion-activated">
             <ion-icon slot="icon-only" name="person-circle"></ion-icon>
           </ion-button>
-          <ion-button fill="solid" class="activated">
+          <ion-button fill="solid" class="ion-activated">
             <ion-icon name="person-circle" slot="start"></ion-icon>
             Solid
           </ion-button>
         </ion-buttons>
         <ion-title>Solid Activated</ion-title>
         <ion-buttons slot="primary">
-          <ion-button fill="solid" shape="round" color="secondary" class="activated">
+          <ion-button fill="solid" shape="round" color="secondary" class="ion-activated">
             Help
             <ion-icon name="help-circle" slot="end"></ion-icon>
           </ion-button>
@@ -172,16 +172,16 @@
 
       <ion-toolbar>
         <ion-buttons slot="secondary">
-          <ion-button fill="outline" class="activated">
+          <ion-button fill="outline" class="ion-activated">
             <ion-icon slot="icon-only" name="person-circle"></ion-icon>
           </ion-button>
-          <ion-button fill="outline" class="activated">
+          <ion-button fill="outline" class="ion-activated">
             <ion-icon name="star" slot="start"></ion-icon>
             Star
           </ion-button>
         </ion-buttons>
         <ion-buttons slot="primary">
-          <ion-button color="secondary" fill="outline" class="activated">
+          <ion-button color="secondary" fill="outline" class="ion-activated">
             <ion-icon slot="icon-only" name="person-circle"></ion-icon>
           </ion-button>
         </ion-buttons>

core/src/components/buttons/buttons.ios.scss

@@ -29,27 +29,25 @@
 :host-context(.ion-color)::slotted(*) .button {
   --color: initial;
   --border-color: initial;
-  --background-focused: #{current-color(contrast, .1)};
-
+  --background-focused: #{current-color(contrast)};
 }
 
 :host-context(.ion-color)::slotted(*) .button-solid {
   --background: #{current-color(contrast)};
-  --background-activated: #{current-color(contrast, .8)};
-  --background-focused: #{current-color(contrast, .6)};
+  --background-focused: #000;
+  --background-focused-opacity: .12;
+  --background-activated: #000;
+  --background-activated-opacity: .12;
   --color: #{current-color(base)};
   --color-focused: #{current-color(base)};
 }
 
 :host-context(.ion-color)::slotted(*) .button-clear {
-  --background-focused: #{current-color(contrast, .1)};
   --color-activated: #{current-color(contrast)};
   --color-focused: #{current-color(contrast)};
 }
 
 :host-context(.ion-color)::slotted(*) .button-outline {
-  --background-activated: #{current-color(contrast)};
-  --background-focused: #{current-color(contrast, .1)};
   --color-activated: #{current-color(base)};
   --color-focused: #{current-color(contrast)};
 }
@@ -58,35 +56,39 @@
 // iOS Toolbar Button Clear
 // --------------------------------------------------
 
-:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear {
+:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-clear:not(.ion-color) {
   --color: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --color-activated: #{$toolbar-ios-color-activated};
   --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
+  --background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
 }
 
 
 // iOS Toolbar Button Outline
 // --------------------------------------------------
 
-:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline {
+:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-outline:not(.ion-color) {
   --color: #{var(--ion-toolbar-color, ion-color(primary, base))};
   --color-activated: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
   --color-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
   --border-color: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --background-activated: #{var(--ion-toolbar-color, ion-color(primary, base))};
+  --background-focused: #{var(--ion-toolbar-color, ion-color(primary, base))};
 }
 
 
 // iOS Toolbar Button Solid
 // --------------------------------------------------
 
-:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid {
+:host-context(ion-toolbar:not(.ion-color))::slotted(*) .button-solid:not(.ion-color) {
   --color: #{$toolbar-ios-background};
   --color-activated: #{$toolbar-ios-background};
   --color-focused: #{$toolbar-ios-background};
   --background: #{var(--ion-toolbar-color, ion-color(primary, base))};
-  --background-activated: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))};
-  --background-focused: #{var(--ion-toolbar-color-activated, ion-color(primary, shade))};
+  --background-hover: #{var(--ion-toolbar-background, ion-color(primary, contrast))};
+  --background-hover-opacity: 0.1;
+  --background-focused: #000;
+  --background-focused-opacity: .12;
+  --background-activated: #000;
+  --background-activated-opacity: .12;
 }
 
 

core/src/components/buttons/buttons.md.scss

@@ -31,15 +31,16 @@
   --color: initial;
   --color-focused: #{current-color(contrast)};
   --color-hover: #{current-color(contrast)};
-  --background-hover: #{current-color(contrast, .08)};
-  --background-focused: #{current-color(contrast, .24)};
+  --background-activated: transparent;
+  --background-focused: #{current-color(contrast)};
+  --background-hover: #{current-color(contrast)};
 }
 
 :host-context(.ion-color)::slotted(*) .button-solid {
   --background: #{current-color(contrast)};
-  --background-activated: #{current-color(contrast)};
+  --background-activated: transparent;
   --background-focused: #{current-color(shade)};
-  --background-hover: #{current-color(tint)};
+  --background-hover: #{current-color(base)};
   --color: #{current-color(base)};
   --color-focused: #{current-color(base)};
   --color-hover: #{current-color(base)};
@@ -68,7 +69,7 @@
 
 
 ::slotted(*) .button {
-  --background-hover: rgba(66, 66, 66, 0.08);
+  --background-hover: currentColor;
 }
 
 // Material Design Toolbar Solid Button
@@ -78,9 +79,8 @@
   --color: #{$toolbar-md-background};
   --color-activated: #{$toolbar-md-background};
   --background: #{$toolbar-md-color};
-  --background-activated: #{$toolbar-md-color};
-  --background-focused: #{$toolbar-md-color-activated};
-  --background-hover: rgba(66, 66, 66, 0.92);
+  --background-activated: transparent;
+  --background-focused: currentColor;
 }
 
 
@@ -93,8 +93,9 @@
   --color-focused: #{$toolbar-md-color};
   --background: transparent;
   --background-activated: transparent;
+  --background-focused: currentColor;
+  --background-hover: currentColor;
   --border-color: #{$toolbar-md-color};
-  --background-focused: rgba(66, 66, 66, 0.1);
 }
 
 
@@ -106,7 +107,9 @@
   --color-focused: #{$toolbar-md-color};
   --color-activated: currentColor;
   --background: transparent;
-  --background-focused: rgba(66, 66, 66, 0.1);
+  --background-activated: transparent;
+  --background-focused: currentColor;
+  --background-hover: currentColor;
 }
 
 

core/src/components/buttons/readme.md

@@ -223,7 +223,7 @@ export const ButtonsExample: React.FC = () => (
     </ion-buttons>
     <ion-title>Right side menu toggle</ion-title>
     <ion-buttons slot="end">
-      <ion-menu-button autoHide="false"></ion-menu-button>
+      <ion-menu-button auto-hide="false"></ion-menu-button>
     </ion-buttons>
   </ion-toolbar>
 

core/src/components/buttons/usage/vue.md

@@ -32,7 +32,7 @@
     </ion-buttons>
     <ion-title>Right side menu toggle</ion-title>
     <ion-buttons slot="end">
-      <ion-menu-button autoHide="false"></ion-menu-button>
+      <ion-menu-button auto-hide="false"></ion-menu-button>
     </ion-buttons>
   </ion-toolbar>
 

core/src/components/card-content/card-content.ios.scss

@@ -41,3 +41,7 @@
     font-size: 14px;
   }
 }
+
+ion-card-header + .card-content-ios {
+  padding-top: 0;
+}

core/src/components/card/card.ios.scss

@@ -20,6 +20,6 @@
   box-shadow: $card-ios-box-shadow;
 }
 
-:host(.activated) {
+:host(.ion-activated) {
   transform: #{$card-ios-transform-activated};
 }

core/src/components/card/readme.md

@@ -40,9 +40,9 @@ sub-components to reflect this. Please see `ion-card-content`,
 </ion-card>
 
 <ion-card>
-  <ion-item href="#" class="activated">
+  <ion-item href="#" class="ion-activated">
     <ion-icon name="wifi" slot="start"></ion-icon>
-    <ion-label>Card Link Item 1 .activated</ion-label>
+    <ion-label>Card Link Item 1 activated</ion-label>
   </ion-item>
 
   <ion-item href="#">
@@ -50,9 +50,9 @@ sub-components to reflect this. Please see `ion-card-content`,
     <ion-label>Card Link Item 2</ion-label>
   </ion-item>
 
-  <ion-item class="activated">
+  <ion-item class="ion-activated">
     <ion-icon name="warning" slot="start"></ion-icon>
-    <ion-label>Card Button Item 1 .activated</ion-label>
+    <ion-label>Card Button Item 1 activated</ion-label>
   </ion-item>
 
   <ion-item>
@@ -97,9 +97,9 @@ export const CardExample: React.FC = () => (
     </IonCard>
 
     <IonCard>
-      <IonItem href="#" class="activated">
+      <IonItem href="#" className="ion-activated">
         <IonIcon name="wifi" slot="start" />
-        <IonLabel>Card Link Item 1 .activated</IonLabel>
+        <IonLabel>Card Link Item 1 activated</IonLabel>
       </IonItem>
 
       <IonItem href="#">
@@ -107,9 +107,9 @@ export const CardExample: React.FC = () => (
         <IonLabel>Card Link Item 2</IonLabel>
       </IonItem>
 
-      <IonItem class="activated">
+      <IonItem className="ion-activated">
         <IonIcon name="warning" slot="start" />
-        <IonLabel>Card Button Item 1 .activated</IonLabel>
+        <IonLabel>Card Button Item 1 activated</IonLabel>
       </IonItem>
 
       <IonItem>
@@ -152,9 +152,9 @@ export const CardExample: React.FC = () => (
   </ion-card>
 
   <ion-card>
-    <ion-item href="#" class="activated">
+    <ion-item href="#" class="ion-activated">
       <ion-icon name="wifi" slot="start"></ion-icon>
-      <ion-label>Card Link Item 1 .activated</ion-label>
+      <ion-label>Card Link Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item href="#">
@@ -162,9 +162,9 @@ export const CardExample: React.FC = () => (
       <ion-label>Card Link Item 2</ion-label>
     </ion-item>
 
-    <ion-item class="activated">
+    <ion-item class="ion-activated">
       <ion-icon name="warning" slot="start"></ion-icon>
-      <ion-label>Card Button Item 1 .activated</ion-label>
+      <ion-label>Card Button Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item>

core/src/components/card/test/basic/index.html

@@ -85,9 +85,9 @@
 
       <ion-card>
         <ion-list lines="none">
-          <ion-item href="#" class="activated">
+          <ion-item href="#" class="ion-activated">
             <ion-icon name="wifi" slot="start"></ion-icon>
-            <ion-label>Link Item .activated</ion-label>
+            <ion-label>Link Item activated</ion-label>
             <ion-note>More</ion-note>
           </ion-item>
 
@@ -97,9 +97,9 @@
             <ion-note>More</ion-note>
           </ion-item>
 
-          <ion-item button class="activated">
+          <ion-item button class="ion-activated">
             <ion-icon name="warning" slot="start"></ion-icon>
-            <ion-label>Button Item .activated</ion-label>
+            <ion-label>Button Item activated</ion-label>
             <ion-note>More</ion-note>
           </ion-item>
 

core/src/components/card/test/translucent/index.html

@@ -115,7 +115,7 @@
               </ion-button>
             </ion-col>
             <ion-col class="ion-no-padding ion-text-right">
-              <ion-button fill="clear" size="small" class="activated">
+              <ion-button fill="clear" size="small" class="ion-activated">
                 <ion-icon slot="start" name="share"></ion-icon>
                 Activated
               </ion-button>

core/src/components/card/usage/angular.md

@@ -25,9 +25,9 @@
 </ion-card>
 
 <ion-card>
-  <ion-item href="#" class="activated">
+  <ion-item href="#" class="ion-activated">
     <ion-icon name="wifi" slot="start"></ion-icon>
-    <ion-label>Card Link Item 1 .activated</ion-label>
+    <ion-label>Card Link Item 1 activated</ion-label>
   </ion-item>
 
   <ion-item href="#">
@@ -35,9 +35,9 @@
     <ion-label>Card Link Item 2</ion-label>
   </ion-item>
 
-  <ion-item class="activated">
+  <ion-item class="ion-activated">
     <ion-icon name="warning" slot="start"></ion-icon>
-    <ion-label>Card Button Item 1 .activated</ion-label>
+    <ion-label>Card Button Item 1 activated</ion-label>
   </ion-item>
 
   <ion-item>

core/src/components/card/usage/javascript.md

@@ -25,9 +25,9 @@
 </ion-card>
 
 <ion-card>
-  <ion-item href="#" class="activated">
+  <ion-item href="#" class="ion-activated">
     <ion-icon name="wifi" slot="start"></ion-icon>
-    <ion-label>Card Link Item 1 .activated</ion-label>
+    <ion-label>Card Link Item 1 activated</ion-label>
   </ion-item>
 
   <ion-item href="#">
@@ -35,9 +35,9 @@
     <ion-label>Card Link Item 2</ion-label>
   </ion-item>
 
-  <ion-item class="activated">
+  <ion-item class="ion-activated">
     <ion-icon name="warning" slot="start"></ion-icon>
-    <ion-label>Card Button Item 1 .activated</ion-label>
+    <ion-label>Card Button Item 1 activated</ion-label>
   </ion-item>
 
   <ion-item>

core/src/components/card/usage/react.md

@@ -30,9 +30,9 @@ export const CardExample: React.FC = () => (
     </IonCard>
 
     <IonCard>
-      <IonItem href="#" class="activated">
+      <IonItem href="#" className="ion-activated">
         <IonIcon name="wifi" slot="start" />
-        <IonLabel>Card Link Item 1 .activated</IonLabel>
+        <IonLabel>Card Link Item 1 activated</IonLabel>
       </IonItem>
 
       <IonItem href="#">
@@ -40,9 +40,9 @@ export const CardExample: React.FC = () => (
         <IonLabel>Card Link Item 2</IonLabel>
       </IonItem>
 
-      <IonItem class="activated">
+      <IonItem className="ion-activated">
         <IonIcon name="warning" slot="start" />
-        <IonLabel>Card Button Item 1 .activated</IonLabel>
+        <IonLabel>Card Button Item 1 activated</IonLabel>
       </IonItem>
 
       <IonItem>

core/src/components/card/usage/vue.md

@@ -26,9 +26,9 @@
   </ion-card>
 
   <ion-card>
-    <ion-item href="#" class="activated">
+    <ion-item href="#" class="ion-activated">
       <ion-icon name="wifi" slot="start"></ion-icon>
-      <ion-label>Card Link Item 1 .activated</ion-label>
+      <ion-label>Card Link Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item href="#">
@@ -36,9 +36,9 @@
       <ion-label>Card Link Item 2</ion-label>
     </ion-item>
 
-    <ion-item class="activated">
+    <ion-item class="ion-activated">
       <ion-icon name="warning" slot="start"></ion-icon>
-      <ion-label>Card Button Item 1 .activated</ion-label>
+      <ion-label>Card Button Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item>

core/src/components/checkbox/readme.md

@@ -163,7 +163,11 @@ export const CheckboxExample: React.FC = () => (
   <ion-list>
     <ion-item v-for="entry in form">
       <ion-label>{{entry.val}}</ion-label>
-      <ion-checkbox slot="end" v-on:input="entry.checked = $event.target.value" v-bind:value="entry.isChecked"></ion-checkbox>
+      <ion-checkbox
+        slot="end"
+        @input="entry.checked = $event.target.value"
+        :value="entry.isChecked">
+      </ion-checkbox>
     </ion-item>
   </ion-list>
 </template>

core/src/components/checkbox/usage/vue.md

@@ -20,7 +20,11 @@
   <ion-list>
     <ion-item v-for="entry in form">
       <ion-label>{{entry.val}}</ion-label>
-      <ion-checkbox slot="end" v-on:input="entry.checked = $event.target.value" v-bind:value="entry.isChecked"></ion-checkbox>
+      <ion-checkbox
+        slot="end"
+        @input="entry.checked = $event.target.value"
+        :value="entry.isChecked">
+      </ion-checkbox>
     </ion-item>
   </ion-list>
 </template>

core/src/components/chip/chip.scss

@@ -50,7 +50,7 @@
   background: current-color(base, .12);
 }
 
-:host(.ion-color.activated) {
+:host(.ion-color.ion-activated) {
   background: current-color(base, .16);
 }
 
@@ -78,7 +78,7 @@
   background: rgba(0, 0, 0, .04);
 }
 
-:host(.chip-outline.activated:not(.ion-color)) {
+:host(.chip-outline.ion-activated:not(.ion-color)) {
   background: rgba(0, 0, 0, .08);
 }
 
@@ -135,7 +135,7 @@
 // Chip: Activated
 // ---------------------------------------------
 
-:host(.activated) {
+:host(.ion-activated) {
   --background: #{rgba($text-color-rgb, .20)};
 }
 

core/src/components/chip/test/basic/index.html

@@ -4,12 +4,14 @@
 <head>
   <meta charset="UTF-8">
   <title>Chip - Basic</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+</head>
 
 <body>
   <ion-app>
@@ -22,77 +24,81 @@
 
     <ion-content class="ion-padding" id="content" style="text-align: center">
 
-        <h2>Basic Chips</h2>
-        <ion-chip>
-          <ion-label>Default</ion-label>
-        </ion-chip>
-        <ion-chip style="border-radius: 4px;">
-          <ion-label>Border Radius</ion-label>
-        </ion-chip>
-        <ion-chip>
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>With Icon</ion-label>
-        </ion-chip>
-        <ion-chip>
-          <ion-avatar>
-            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
-          </ion-avatar>
-          <ion-label>With Avatar</ion-label>
-        </ion-chip>
-        <ion-chip>
-          <ion-avatar>
-            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
-          </ion-avatar>
-          <ion-label>With Icon and Avatar</ion-label>
-          <ion-icon name="close-circle"></ion-icon>
-        </ion-chip>
+      <h2>Basic Chips</h2>
+      <ion-chip>
+        <ion-label>Default</ion-label>
+      </ion-chip>
+      <ion-chip style="border-radius: 4px;">
+        <ion-label>Border Radius</ion-label>
+      </ion-chip>
+      <ion-chip>
+        <ion-icon name="checkmark-circle"></ion-icon>
+        <ion-label>With Icon</ion-label>
+      </ion-chip>
+      <ion-chip>
+        <ion-avatar>
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+        </ion-avatar>
+        <ion-label>With Avatar</ion-label>
+      </ion-chip>
+      <ion-chip>
+        <ion-avatar>
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+        </ion-avatar>
+        <ion-label>With Icon and Avatar</ion-label>
+        <ion-icon name="close-circle"></ion-icon>
+      </ion-chip>
 
-        <h2>Color Chips</h2>
-        <ion-chip color="primary">
-          <ion-label>Primary</ion-label>
-        </ion-chip>
-        <ion-chip color="danger">
-          <ion-label>Danger</ion-label>
-        </ion-chip>
-        <ion-chip color="tertiary">
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>Tertiary with Icon</ion-label>
-        </ion-chip>
-        <ion-chip color="primary">
-          <ion-avatar>
-            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
-          </ion-avatar>
-          <ion-label>Primary with Avatar</ion-label>
-        </ion-chip>
-        <ion-chip color="success">
-          <ion-label>Success with Icon</ion-label>
-          <ion-icon name="calendar"></ion-icon>
-        </ion-chip>
+      <h2>Color Chips</h2>
+      <ion-chip color="primary">
+        <ion-label>Primary</ion-label>
+      </ion-chip>
+      <ion-chip color="danger">
+        <ion-label>Danger</ion-label>
+      </ion-chip>
+      <ion-chip color="tertiary">
+        <ion-icon name="checkmark-circle"></ion-icon>
+        <ion-label>Tertiary with Icon</ion-label>
+      </ion-chip>
+      <ion-chip color="primary">
+        <ion-avatar>
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+        </ion-avatar>
+        <ion-label>Primary with Avatar</ion-label>
+      </ion-chip>
+      <ion-chip color="success">
+        <ion-label>Success with Icon</ion-label>
+        <ion-icon name="calendar"></ion-icon>
+      </ion-chip>
 
-        <h2>Outline Chips</h2>
-        <ion-chip outline>
-          <ion-label>Outline</ion-label>
-        </ion-chip>
-        <ion-chip outline color="danger">
-          <ion-label>Danger Outline</ion-label>
-        </ion-chip>
-        <ion-chip outline color="secondary">
-          <ion-icon name="checkmark-circle"></ion-icon>
-          <ion-label>Secondary Outline with Icon</ion-label>
-        </ion-chip>
-        <ion-chip outline color="primary">
-          <ion-label>Primary Outline with Avatar</ion-label>
-          <ion-avatar>
-            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
-          </ion-avatar>
-        </ion-chip>
-        <ion-chip outline>
-          <ion-icon name="git-pull-request"></ion-icon>
-          <ion-label>Outline with Icon and Avatar</ion-label>
-          <ion-icon name="close-circle"></ion-icon>
-        </ion-chip>
+      <h2>Outline Chips</h2>
+      <ion-chip outline>
+        <ion-label>Outline</ion-label>
+      </ion-chip>
+      <ion-chip outline color="danger">
+        <ion-label>Danger Outline</ion-label>
+      </ion-chip>
+      <ion-chip outline color="secondary">
+        <ion-icon name="checkmark-circle"></ion-icon>
+        <ion-label>Secondary Outline with Icon</ion-label>
+      </ion-chip>
+      <ion-chip outline color="primary">
+        <ion-label>Primary Outline with Avatar</ion-label>
+        <ion-avatar>
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+        </ion-avatar>
+      </ion-chip>
+      <ion-chip outline>
+        <ion-icon name="git-pull-request"></ion-icon>
+        <ion-label>Outline with Icon and Avatar</ion-label>
+        <ion-icon name="close-circle"></ion-icon>
+      </ion-chip>
 
-      </ion-content>
+    </ion-content>
   </ion-app>
 </body>
 

core/src/components/chip/test/states/e2e.ts

@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('chip: states', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/chip/test/states?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});

core/src/components/chip/test/states/index.html

@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Chip - States</title>
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <h3>Default</h3>
+      <p>
+        <ion-chip>
+          <ion-label>Default</ion-label>
+        </ion-chip>
+        <ion-chip style="border-radius: 4px;">
+          <ion-label>Border Radius</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>With Icon</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+          <ion-label>With Avatar</ion-label>
+        </ion-chip>
+        <ion-chip>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+          <ion-label>With Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>
+      </p>
+      <p>
+        <ion-chip class="ion-focused">
+          <ion-label>Default</ion-label>
+        </ion-chip>
+        <ion-chip style="border-radius: 4px;" class="ion-focused">
+          <ion-label>Border Radius</ion-label>
+        </ion-chip>
+        <ion-chip class="ion-focused">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>With Icon</ion-label>
+        </ion-chip>
+        <ion-chip class="ion-focused">
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+          <ion-label>With Avatar</ion-label>
+        </ion-chip>
+        <ion-chip class="ion-focused">
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+          <ion-label>With Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>
+      </p>
+
+      <h3>Colors</h3>
+      <p>
+        <ion-chip color="primary">
+          <ion-label>Primary</ion-label>
+        </ion-chip>
+        <ion-chip color="secondary">
+          <ion-label>Secondary</ion-label>
+        </ion-chip>
+        <ion-chip color="tertiary">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Tertiary with Icon</ion-label>
+        </ion-chip>
+        <ion-chip color="success">
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+          <ion-label>Success with Avatar</ion-label>
+        </ion-chip>
+        <ion-chip color="warning">
+          <ion-label>Warning with Icon</ion-label>
+          <ion-icon name="calendar"></ion-icon>
+        </ion-chip>
+        <ion-chip color="danger">
+          <ion-label>Danger</ion-label>
+        </ion-chip>
+        <ion-chip color="light">
+          <ion-label>Light</ion-label>
+        </ion-chip>
+        <ion-chip color="medium">
+          <ion-label>Medium</ion-label>
+        </ion-chip>
+        <ion-chip color="dark">
+          <ion-label>Dark</ion-label>
+        </ion-chip>
+      </p>
+      <p>
+        <ion-chip color="primary" class="ion-focused">
+          <ion-label>Primary</ion-label>
+        </ion-chip>
+        <ion-chip color="secondary" class="ion-focused">
+          <ion-label>Secondary</ion-label>
+        </ion-chip>
+        <ion-chip color="tertiary" class="ion-focused">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Tertiary with Icon</ion-label>
+        </ion-chip>
+        <ion-chip color="success" class="ion-focused">
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+          <ion-label>Success with Avatar</ion-label>
+        </ion-chip>
+        <ion-chip color="warning" class="ion-focused">
+          <ion-label>Warning with Icon</ion-label>
+          <ion-icon name="calendar"></ion-icon>
+        </ion-chip>
+        <ion-chip color="danger" class="ion-focused">
+          <ion-label>Danger</ion-label>
+        </ion-chip>
+        <ion-chip color="light" class="ion-focused">
+          <ion-label>Light</ion-label>
+        </ion-chip>
+        <ion-chip color="medium" class="ion-focused">
+          <ion-label>Medium</ion-label>
+        </ion-chip>
+        <ion-chip color="dark" class="ion-focused">
+          <ion-label>Dark</ion-label>
+        </ion-chip>
+      </p>
+
+      <h3>Outline</h3>
+
+      <p>
+        <ion-chip outline>
+          <ion-label>Outline</ion-label>
+        </ion-chip>
+        <ion-chip outline color="danger">
+          <ion-label>Danger Outline</ion-label>
+        </ion-chip>
+        <ion-chip outline color="secondary">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Secondary Outline with Icon</ion-label>
+        </ion-chip>
+        <ion-chip outline color="primary">
+          <ion-label>Primary Outline with Avatar</ion-label>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+        </ion-chip>
+        <ion-chip outline>
+          <ion-icon name="git-pull-request"></ion-icon>
+          <ion-label>Outline with Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>
+      </p>
+      <p>
+        <ion-chip outline class="ion-focused">
+          <ion-label>Outline</ion-label>
+        </ion-chip>
+        <ion-chip outline color="danger" class="ion-focused">
+          <ion-label>Danger Outline</ion-label>
+        </ion-chip>
+        <ion-chip outline color="secondary" class="ion-focused">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Secondary Outline with Icon</ion-label>
+        </ion-chip>
+        <ion-chip outline color="primary" class="ion-focused">
+          <ion-label>Primary Outline with Avatar</ion-label>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+" />
+          </ion-avatar>
+        </ion-chip>
+        <ion-chip outline class="ion-focused">
+          <ion-icon name="git-pull-request"></ion-icon>
+          <ion-label>Outline with Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>
+      </p>
+
+      <h3>Custom</h3>
+
+      <!-- Custom Font -->
+      <p>
+        <ion-chip class="wide" text="wide">
+          <ion-icon name="add"></ion-icon>
+        </ion-chip>
+        <ion-chip class="wide ion-focused" text="wide">
+          <ion-icon name="add"></ion-icon>
+        </ion-chip>
+      </p>
+
+      <!-- Custom Colors -->
+      <p>
+        <ion-chip class="custom">
+          <ion-icon name="add"></ion-icon>
+        </ion-chip>
+        <ion-chip color="secondary" class="custom">
+          <ion-icon name="add"></ion-icon>
+        </ion-chip>
+        <ion-chip class="custom ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-chip>
+        <ion-chip color="secondary" class="custom ion-focused">
+          <ion-icon name="add"></ion-icon>
+        </ion-chip>
+      </p>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    var buttons = document.querySelectorAll('ion-chip');
+
+    for (var i = 0; i < buttons.length; i++) {
+      buttons[i].addEventListener('click', (event) => onClick(event));
+    }
+
+    function onClick(ev) {
+      console.log("clicked the button", ev.target.innerText);
+    }
+  </script>
+
+  <style>
+    h3 {
+      padding-left: 16px;
+    }
+
+    p {
+      padding-left: 8px;
+    }
+
+    ion-chip {
+      display: inline-block !important;
+      vertical-align: middle;
+    }
+
+    .wide {
+      --background: #d1f3ff;
+      --background-hover: #add8e6;
+      --background-focused: #84c5db;
+
+      height: 50px;
+      width: 150px;
+    }
+
+    .custom {
+      --background: #ffdde2;
+      --background-hover: #fcc6ce;
+      --background-focused: lightpink;
+      --color: rgb(214, 60, 235);
+      --border-radius: 10px;
+      --padding-start: 10px;
+      --padding-end: 10px;
+    }
+
+    .custom:hover {
+      opacity: 1;
+    }
+
+    .themed {
+      --ion-toolbar-background: #222;
+      --ion-toolbar-color: #ddd;
+    }
+
+  </style>
+</body>
+
+</html>

core/src/components/content/content.scss

@@ -59,13 +59,20 @@
   --background: #{$background-color-step-50};
 }
 
+#background-content {
+  @include position(calc(var(--offset-top) * -1), 0px,calc(var(--offset-bottom) * -1), 0px);
+
+  position: absolute;
+
+  background: var(--background);
+}
+
 .inner-scroll {
   @include position(calc(var(--offset-top) * -1), 0px,calc(var(--offset-bottom) * -1), 0px);
   @include padding(calc(var(--padding-top) + var(--offset-top)), var(--padding-end), calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom)), var(--padding-start));
 
   position: absolute;
 
-  background: var(--background);
   color: var(--color);
 
   box-sizing: border-box;
@@ -120,7 +127,7 @@
 }
 
 .transition-effect {
-  
+
   display: none;
   position: absolute;
 

core/src/components/content/content.tsx

@@ -320,6 +320,7 @@ export class Content implements ComponentInterface {
           '--offset-bottom': `${this.cBottom}px`,
         }}
       >
+        <div id="background-content"></div>
         <main
           class={{
             'inner-scroll': true,
@@ -330,9 +331,7 @@ export class Content implements ComponentInterface {
           ref={el => this.scrollEl = el!}
           onScroll={ev => this.onScroll(ev)}
         >
-          <div id="scroll-content">
-            <slot></slot>
-          </div>
+          <slot></slot>
         </main>
 
         {transitionShadow ? (

core/src/components/content/readme.md

@@ -6,6 +6,12 @@ view.
 
 Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties).
 
+
+## Fixed Content
+
+In order to place elements outside of the scrollable area, `slot="fixed"` can be added to the element. This will absolutely position the element placing it in the top left. In order to place the element in a different position, style it using [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
+
+
 <!-- Auto Generated Below -->
 
 
@@ -19,6 +25,11 @@ Content, along with many other Ionic components, can be customized to modify its
   (ionScrollStart)="logScrollStart()"
   (ionScroll)="logScrolling($event)"
   (ionScrollEnd)="logScrollEnd()">
+    <h1>Main Content</h1>
+
+    <div slot="fixed">
+      <h1>Fixed Content</h1>
+    </div>
 </ion-content>
 ```
 
@@ -26,7 +37,13 @@ Content, along with many other Ionic components, can be customized to modify its
 ### Javascript
 
 ```html
-<ion-content></ion-content>
+<ion-content>
+  <h1>Main Content</h1>
+
+  <div slot="fixed">
+    <h1>Fixed Content</h1>
+  </div>
+</ion-content>
 ```
 
 ```javascript
@@ -50,6 +67,11 @@ const ContentExample: React.FC = () => (
     onIonScrollStart={() => {}}
     onIonScroll={() => {}}
     onIonScrollEnd={() => {}}>
+      <h1>Main Content</h1>
+
+      <div slot="fixed">
+        <h1>Fixed Content</h1>
+      </div>
   </IonContent>
 );
 ```
@@ -64,6 +86,11 @@ const ContentExample: React.FC = () => (
     @ionScrollStart="logScrollStart()"
     @ionScroll="logScrolling($event)"
     @ionScrollEnd="logScrollEnd()">
+      <h1>Main Content</h1>
+
+      <div slot="fixed">
+        <h1>Fixed Content</h1>
+      </div>
   </ion-content>
 </template>
 ```

core/src/components/content/usage/angular.md

@@ -4,6 +4,11 @@
   (ionScrollStart)="logScrollStart()"
   (ionScroll)="logScrolling($event)"
   (ionScrollEnd)="logScrollEnd()">
+    <h1>Main Content</h1>
+
+    <div slot="fixed">
+      <h1>Fixed Content</h1>
+    </div>
 </ion-content>
 ```
 

core/src/components/content/usage/javascript.md

@@ -1,5 +1,11 @@
 ```html
-<ion-content></ion-content>
+<ion-content>
+  <h1>Main Content</h1>
+
+  <div slot="fixed">
+    <h1>Fixed Content</h1>
+  </div>
+</ion-content>
 ```
 
 ```javascript

core/src/components/content/usage/react.md

@@ -8,6 +8,11 @@ const ContentExample: React.FC = () => (
     onIonScrollStart={() => {}}
     onIonScroll={() => {}}
     onIonScrollEnd={() => {}}>
+      <h1>Main Content</h1>
+
+      <div slot="fixed">
+        <h1>Fixed Content</h1>
+      </div>
   </IonContent>
 );
 ```

core/src/components/content/usage/vue.md

@@ -5,6 +5,11 @@
     @ionScrollStart="logScrollStart()"
     @ionScroll="logScrolling($event)"
     @ionScrollEnd="logScrollEnd()">
+      <h1>Main Content</h1>
+
+      <div slot="fixed">
+        <h1>Fixed Content</h1>
+      </div>
   </ion-content>
 </template>
 ```

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

@@ -242,12 +242,13 @@ export const parseDate = (val: string | undefined | null): DatetimeData | undefi
 };
 
 /**
- * Converts a valid UTC datetime string
- * To the user's local timezone
+ * Converts a valid UTC datetime string to JS Date time object.
+ * By default uses the users local timezone, but an optional
+ * timezone can be provided.
  * Note: This is not meant for time strings
  * such as "01:47"
  */
-export const getLocalDateTime = (dateString: any = ''): Date => {
+export const getDateTime = (dateString: any = '', timeZone: any = ''): Date => {
   /**
    * If user passed in undefined
    * or null, convert it to the
@@ -273,7 +274,7 @@ export const getLocalDateTime = (dateString: any = ''): Date => {
   }
 
   const date = (typeof dateString === 'string' && dateString.length > 0) ? new Date(dateString) : new Date();
-  return new Date(
+  const localDateTime = new Date(
     Date.UTC(
       date.getFullYear(),
       date.getMonth(),
@@ -284,14 +285,26 @@ export const getLocalDateTime = (dateString: any = ''): Date => {
       date.getMilliseconds()
     )
   );
+
+  if (timeZone && timeZone.length > 0) {
+    return new Date(date.getTime() - getTimezoneOffset(localDateTime, timeZone));
+  }
+
+  return localDateTime;
 };
 
-export const updateDate = (existingData: DatetimeData, newData: any): boolean => {
+export const getTimezoneOffset = (localDate: Date, timeZone: string) => {
+  const utcDateTime = new Date(localDate.toLocaleString('en-US', { timeZone: 'utc' }));
+  const tzDateTime = new Date(localDate.toLocaleString('en-US', { timeZone }));
+  return utcDateTime.getTime() - tzDateTime.getTime();
+};
+
+export const updateDate = (existingData: DatetimeData, newData: any, displayTimezone?: string): boolean => {
 
   if (!newData || typeof newData === 'string') {
-    const localDateTime = getLocalDateTime(newData);
-    if (!Number.isNaN(localDateTime.getTime())) {
-      newData = localDateTime.toISOString();
+    const dateTime = getDateTime(newData, displayTimezone);
+    if (!Number.isNaN(dateTime.getTime())) {
+      newData = dateTime.toISOString();
     }
   }
 

core/src/components/datetime/datetime.tsx

@@ -6,7 +6,7 @@ import { clamp, findItemLabel, renderHiddenInput } from '../../utils/helpers';
 import { pickerController } from '../../utils/overlays';
 import { hostContext } from '../../utils/theme';
 
-import { DatetimeData, LocaleData, convertDataToISO, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getDateValue, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
+import { DatetimeData, LocaleData, convertDataToISO, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getDateValue, getTimezoneOffset, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -81,6 +81,14 @@ export class Datetime implements ComponentInterface {
    */
   @Prop() displayFormat = 'MMM D, YYYY';
 
+  /**
+   * The timezone to use for display purposes only. See
+   * [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)
+   * for a list of supported timezones. If no value is provided, the
+   * component will default to displaying times in the user's local timezone.
+   */
+  @Prop() displayTimezone?: string;
+
   /**
    * 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
@@ -287,7 +295,7 @@ export class Datetime implements ComponentInterface {
   }
 
   private updateDatetimeValue(value: any) {
-    updateDate(this.datetimeValue, value);
+    updateDate(this.datetimeValue, value, this.displayTimezone);
   }
 
   private generatePickerOptions(): PickerOptions {
@@ -326,7 +334,11 @@ export class Datetime implements ComponentInterface {
              * there can be 1 hr difference when dealing w/ DST
              */
             const date = new Date(convertDataToISO(this.datetimeValue));
-            this.datetimeValue.tzOffset = date.getTimezoneOffset() * -1;
+
+            // If a custom display timezone is provided, use that tzOffset value instead
+            this.datetimeValue.tzOffset = (this.displayTimezone !== undefined && this.displayTimezone.length > 0)
+              ? ((getTimezoneOffset(date, this.displayTimezone)) / 1000 / 60) * -1
+              : date.getTimezoneOffset() * -1;
 
             this.value = convertDataToISO(this.datetimeValue);
           }

core/src/components/datetime/readme.md

@@ -58,9 +58,24 @@ above can be passed in to the display format in any combination.
 | `YYYY, MMMM`          | `2005, June`            |
 | `MMM DD, YYYY HH:mm`  | `Jun 17, 2005 11:06`    |
 
-**Important**: `ion-datetime` will always display values relative to the user's timezone.
+**Important**: `ion-datetime` will by default display values relative to the user's timezone.
 Given a value of `09:00:00+01:00`, the datetime component will
 display it as `04:00:00-04:00` for users in a `-04:00` timezone offset.
+To change the display to use a different timezone, use the displayTimezone property described below.
+
+### Display Timezone
+
+The `displayTimezone` property allows you to change the default behavior
+of displaying values relative to the user's local timezone. In addition to "UTC" valid
+time zone values are determined by the browser, and in most cases follow the time zone names
+of the [IANA time zone database](https://www.iana.org/time-zones), such as "Asia/Shanghai",
+"Asia/Kolkata", "America/New_York". In the following example:
+
+```html
+<ion-datetime value="2019-10-01T15:43:40.394Z" display-timezone="utc"></ion-datetime>
+```
+
+The displayed value will not be converted and will be displayed as provided (UTC).
 
 
 ### Picker Format
@@ -528,80 +543,80 @@ export const DateTimeExample: React.FC = () => (
 <template>
   <ion-item>
     <ion-label>MMMM</ion-label>
-    <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
+    <ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>MM DD YY</ion-label>
-    <ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime>
+    <ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>Disabled</ion-label>
-    <ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></ion-datetime>
+    <ion-datetime id="dynamicDisabled" display-format="MM DD YY" disabled value="1994-12-15"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>YYYY</ion-label>
-    <ion-datetime :pickerOptions="customPickerOptions" placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></ion-datetime>
+    <ion-datetime :picker-options="customPickerOptions" placeholder="Custom Options" display-format="YYYY" min="1981" max="2002"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label position="stacked">MMMM YY</ion-label>
-    <ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
+    <ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label position="floating">MM/DD/YYYY</ion-label>
-    <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
+    <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label position="floating">MM/DD/YYYY</ion-label>
-    <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
+    <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
     <ion-datetime value="1995-04-15" min="1990-02" max="2000"
-      :dayShortNames="customDayShortNames"
-      displayFormat="DDD. MMM DD, YY"
-      monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
+      :day-short-names="customDayShortNames"
+      display-format="DDD. MMM DD, YY"
+      month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>D MMM YYYY H:mm</ion-label>
-    <ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
+    <ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>DDDD MMM D, YYYY</ion-label>
-    <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
+    <ion-datetime display-format="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>HH:mm</ion-label>
-    <ion-datetime displayFormat="HH:mm"></ion-datetime>
+    <ion-datetime display-format="HH:mm"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>h:mm a</ion-label>
-    <ion-datetime displayFormat="h:mm a"></ion-datetime>
+    <ion-datetime display-format="h:mm a"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>hh:mm A (15 min steps)</ion-label>
-    <ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
+    <ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>Leap years, summer months</ion-label>
-    <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" :yearValues="customYearValues"></ion-datetime>
+    <ion-datetime display-format="MM/YYYY" picker-format="MMMM YYYY" month-values="6,7,8" :year-values="customYearValues"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>Specific days/months/years</ion-label>
-    <ion-datetime monthValues="6,7,8" yearValues="2014,2015" dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" displayFormat="DD/MMM/YYYY"></ion-datetime>
+    <ion-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" display-format="DD/MMM/YYYY"></ion-datetime>
   </ion-item>
 </template>
 
@@ -642,30 +657,31 @@ export const DateTimeExample: React.FC = () => (
 
 ## Properties
 
-| Property          | Attribute           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Type                                                                                                                                                                                                                                                                                                                                                                                                                     | Default         |
-| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- |
-| `cancelText`      | `cancel-text`       | The text to display on the picker's cancel button.                                                                                                                                                                                                                                                                                                                                                                                                                                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                 | `'Cancel'`      |
-| `dayNames`        | `day-names`         | Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English.                                                                                                                                                                                                                                                                                                                                                                               | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                        | `undefined`     |
-| `dayShortNames`   | `day-short-names`   | Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English.                                                                                                                                                                                                                                                                                                                                                                  | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                        | `undefined`     |
-| `dayValues`       | `day-values`        | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.                                    | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                              | `undefined`     |
-| `disabled`        | `disabled`          | If `true`, the user cannot interact with the datetime.                                                                                                                                                                                                                                                                                                                                                                                                                                            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                | `false`         |
-| `displayFormat`   | `display-format`    | The display format of the date and time as text that shows within the item. When the `pickerFormat` input is not used, then the `displayFormat` is used for both display the formatted text, and determining the datetime picker's columns. See the `pickerFormat` input description for more info. Defaults to `MMM D, YYYY`.                                                                                                                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                 | `'MMM D, YYYY'` |
-| `doneText`        | `done-text`         | The text to display on the picker's "Done" button.                                                                                                                                                                                                                                                                                                                                                                                                                                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                 | `'Done'`        |
-| `hourValues`      | `hour-values`       | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.                                                                                                                                                                                         | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                              | `undefined`     |
-| `max`             | `max`               | The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year.                                                                                                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`     |
-| `min`             | `min`               | The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today.                                                                                                                           | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`     |
-| `minuteValues`    | `minute-values`     | Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`.                                                                                            | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                              | `undefined`     |
-| `mode`            | `mode`              | The mode determines which platform styles to use.                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `"ios" \| "md"`                                                                                                                                                                                                                                                                                                                                                                                                          | `undefined`     |
-| `monthNames`      | `month-names`       | Full names for each month name. This can be used to provide locale month names. Defaults to English.                                                                                                                                                                                                                                                                                                                                                                                              | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                        | `undefined`     |
-| `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English.                                                                                                                                                                                                                                                                                                                                                                                 | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                        | `undefined`     |
-| `monthValues`     | `month-values`      | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                              | `undefined`     |
-| `name`            | `name`              | The name of the control, which is submitted with the form data.                                                                                                                                                                                                                                                                                                                                                                                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                 | `this.inputId`  |
-| `pickerFormat`    | `picker-format`     | 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`.                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                    | `undefined`     |
-| `pickerOptions`   | --                  | Any additional options that the picker interface can accept. See the [Picker API docs](../picker) for the picker options.                                                                                                                                                                                                                                                                                                                                                                         | `undefined \| { columns?: PickerColumn[] \| undefined; buttons?: PickerButton[] \| undefined; cssClass?: string \| string[] \| undefined; backdropDismiss?: boolean \| undefined; animated?: boolean \| undefined; mode?: "ios" \| "md" \| undefined; keyboardClose?: boolean \| undefined; id?: string \| undefined; enterAnimation?: AnimationBuilder \| undefined; leaveAnimation?: AnimationBuilder \| undefined; }` | `undefined`     |
-| `placeholder`     | `placeholder`       | The text to display when there's no date selected yet. Using lowercase to match the input attribute                                                                                                                                                                                                                                                                                                                                                                                               | `null \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                            | `undefined`     |
-| `readonly`        | `readonly`          | If `true`, the datetime appears normal but is not interactive.                                                                                                                                                                                                                                                                                                                                                                                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                | `false`         |
-| `value`           | `value`             | The value of the datetime as a valid ISO 8601 datetime string.                                                                                                                                                                                                                                                                                                                                                                                                                                    | `null \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                            | `undefined`     |
-| `yearValues`      | `year-values`       | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.                                                                         | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                              | `undefined`     |
+| Property          | Attribute           | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default         |
+| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
+| `cancelText`      | `cancel-text`       | The text to display on the picker's cancel button.                                                                                                                                                                                                                                                                                                                                                                                                                                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `'Cancel'`      |
+| `dayNames`        | `day-names`         | Full day of the week names. This can be used to provide locale names for each day in the week. Defaults to English.                                                                                                                                                                                                                                                                                                                                                                               | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`     |
+| `dayShortNames`   | `day-short-names`   | Short abbreviated day of the week names. This can be used to provide locale names for each day in the week. Defaults to English.                                                                                                                                                                                                                                                                                                                                                                  | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`     |
+| `dayValues`       | `day-values`        | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.                                    | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined`     |
+| `disabled`        | `disabled`          | If `true`, the user cannot interact with the datetime.                                                                                                                                                                                                                                                                                                                                                                                                                                            | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`         |
+| `displayFormat`   | `display-format`    | The display format of the date and time as text that shows within the item. When the `pickerFormat` input is not used, then the `displayFormat` is used for both display the formatted text, and determining the datetime picker's columns. See the `pickerFormat` input description for more info. Defaults to `MMM D, YYYY`.                                                                                                                                                                    | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `'MMM D, YYYY'` |
+| `displayTimezone` | `display-timezone`  | The timezone to use for display purposes only. See [Date.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) for a list of supported timezones. If no value is provided, the component will default to displaying times in the user's local timezone.                                                                                                                                                               | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined`     |
+| `doneText`        | `done-text`         | The text to display on the picker's "Done" button.                                                                                                                                                                                                                                                                                                                                                                                                                                                | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `'Done'`        |
+| `hourValues`      | `hour-values`       | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.                                                                                                                                                                                         | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined`     |
+| `max`             | `max`               | The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year.                                                                                                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined`     |
+| `min`             | `min`               | The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today.                                                                                                                           | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined`     |
+| `minuteValues`    | `minute-values`     | Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`.                                                                                            | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined`     |
+| `mode`            | `mode`              | The mode determines which platform styles to use.                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `"ios" \| "md"`                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined`     |
+| `monthNames`      | `month-names`       | Full names for each month name. This can be used to provide locale month names. Defaults to English.                                                                                                                                                                                                                                                                                                                                                                                              | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`     |
+| `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English.                                                                                                                                                                                                                                                                                                                                                                                 | `string \| string[] \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                             | `undefined`     |
+| `monthValues`     | `month-values`      | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined`     |
+| `name`            | `name`              | The name of the control, which is submitted with the form data.                                                                                                                                                                                                                                                                                                                                                                                                                                   | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `this.inputId`  |
+| `pickerFormat`    | `picker-format`     | 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`.                                                       | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                         | `undefined`     |
+| `pickerOptions`   | --                  | Any additional options that the picker interface can accept. See the [Picker API docs](../picker) for the picker options.                                                                                                                                                                                                                                                                                                                                                                         | `undefined \| { columns?: PickerColumn[] \| undefined; buttons?: PickerButton[] \| undefined; cssClass?: string \| string[] \| undefined; showBackdrop?: boolean \| undefined; backdropDismiss?: boolean \| undefined; animated?: boolean \| undefined; mode?: "ios" \| "md" \| undefined; keyboardClose?: boolean \| undefined; id?: string \| undefined; enterAnimation?: AnimationBuilder \| undefined; leaveAnimation?: AnimationBuilder \| undefined; }` | `undefined`     |
+| `placeholder`     | `placeholder`       | The text to display when there's no date selected yet. Using lowercase to match the input attribute                                                                                                                                                                                                                                                                                                                                                                                               | `null \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined`     |
+| `readonly`        | `readonly`          | If `true`, the datetime appears normal but is not interactive.                                                                                                                                                                                                                                                                                                                                                                                                                                    | `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `false`         |
+| `value`           | `value`             | The value of the datetime as a valid ISO 8601 datetime string.                                                                                                                                                                                                                                                                                                                                                                                                                                    | `null \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                 | `undefined`     |
+| `yearValues`      | `year-values`       | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.                                                                         | `number \| number[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                   | `undefined`     |
 
 
 ## Events

core/src/components/datetime/test/basic/index.html

@@ -31,12 +31,12 @@
           <ion-label>Default</ion-label>
           <ion-datetime></ion-datetime>
         </ion-item>
-        
+
         <ion-item>
           <ion-label position="floating">Default with floating label</ion-label>
           <ion-datetime></ion-datetime>
         </ion-item>
-        
+
         <ion-item>
           <ion-label position="floating">Placeholder with floating label</ion-label>
           <ion-datetime placeholder="Select a date"></ion-datetime>
@@ -142,6 +142,23 @@
         </ion-item>
       </ion-list>
 
+      <ion-list>
+        <ion-item>
+          <ion-label>Display UTC 00:00 in Local Timezone (default behavior)</ion-label>
+          <ion-datetime display-format="MMM DD, YYYY HH:mm" value="2020-01-01T00:00:00Z"></ion-datetime>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Display UTC 00:00 in UTC (display-timezone = 'utc')</ion-label>
+          <ion-datetime display-format="MMM DD, YYYY HH:mm" value="2020-01-01T00:00:00Z" display-timezone="utc"></ion-datetime>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Display UTC 00:00 in US Pacific Time (display-timezone = 'America/Los_Angeles')</ion-label>
+          <ion-datetime display-format="MMM DD, YYYY HH:mm" value="2020-01-01T00:00:00Z" display-timezone="America/Los_Angeles"></ion-datetime>
+        </ion-item>
+      </ion-list>
+
       <ion-list>
         <ion-item>
           <ion-label>HH:mm:ss</ion-label>

core/src/components/datetime/test/datetime.spec.ts

@@ -1,4 +1,4 @@
-import { DatetimeData, daysInMonth, getDateValue, getLocalDateTime, renderDatetime } from '../datetime-util';
+import { DatetimeData, daysInMonth, getDateValue, getDateTime, renderDatetime } from '../datetime-util';
 
 describe('Datetime', () => {
   describe('getDateValue()', () => {
@@ -32,7 +32,7 @@ describe('Datetime', () => {
     });
   });
 
-  describe('getLocalDateTime()', () => {
+  describe('getDateTime()', () => {
     it('should format a datetime string according to the local timezone', () => {
 
       const dateStringTests = [
@@ -44,7 +44,7 @@ describe('Datetime', () => {
       ];
 
       dateStringTests.forEach(test => {
-        const convertToLocal = getLocalDateTime(test.input);
+        const convertToLocal = getDateTime(test.input);
 
         const timeZoneOffset = convertToLocal.getTimezoneOffset() / 60;
         const expectedDateString = test.expectedOutput.replace('%HOUR%', padNumber(test.expectedHourUTC - timeZoneOffset));
@@ -65,19 +65,32 @@ describe('Datetime', () => {
       ];
 
       dateStringTests.forEach(test => {
-        const convertToLocal = getLocalDateTime(test.input);
+        const convertToLocal = getDateTime(test.input);
         expect(convertToLocal.toISOString()).toContain(test.expectedOutput);
       });
     });
 
+    it('should format a datetime string using provided timezone', () => {
+      const dateStringTests = [
+        { displayTimezone: 'utc', input: `2019-03-02T12:00:00.000Z`, expectedOutput: `2019-03-02T12:00:00.000Z` },
+        { displayTimezone: 'America/New_York', input: `2019-03-02T12:00:00.000Z`, expectedOutput: `2019-03-02T07:00:00.000Z` },
+        { displayTimezone: 'Asia/Tokyo', input: `2019-03-02T12:00:00.000Z`, expectedOutput: `2019-03-02T21:00:00.000Z` },
+      ];
+
+      dateStringTests.forEach(test => {
+        const convertToLocal = getDateTime(test.input, test.displayTimezone);
+        expect(convertToLocal.toISOString()).toEqual(test.expectedOutput);
+      });
+    });
+
     it('should default to today for null and undefined cases', () => {
       const today = new Date();
       const todayString = renderDatetime('YYYY-MM-DD', { year: today.getFullYear(), month: today.getMonth() + 1, day: today.getDate() } )
 
-      const convertToLocalUndefined = getLocalDateTime(undefined);
+      const convertToLocalUndefined = getDateTime(undefined);
       expect(convertToLocalUndefined.toISOString()).toContain(todayString);
 
-      const convertToLocalNull = getLocalDateTime(null);
+      const convertToLocalNull = getDateTime(null);
       expect(convertToLocalNull.toISOString()).toContain(todayString);
     });
   });

core/src/components/datetime/usage/vue.md

@@ -2,80 +2,80 @@
 <template>
   <ion-item>
     <ion-label>MMMM</ion-label>
-    <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
+    <ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>MM DD YY</ion-label>
-    <ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime>
+    <ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>Disabled</ion-label>
-    <ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></ion-datetime>
+    <ion-datetime id="dynamicDisabled" display-format="MM DD YY" disabled value="1994-12-15"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>YYYY</ion-label>
-    <ion-datetime :pickerOptions="customPickerOptions" placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></ion-datetime>
+    <ion-datetime :picker-options="customPickerOptions" placeholder="Custom Options" display-format="YYYY" min="1981" max="2002"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label position="stacked">MMMM YY</ion-label>
-    <ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
+    <ion-datetime display-format="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label position="floating">MM/DD/YYYY</ion-label>
-    <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
+    <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label position="floating">MM/DD/YYYY</ion-label>
-    <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
+    <ion-datetime display-format="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
     <ion-datetime value="1995-04-15" min="1990-02" max="2000"
-      :dayShortNames="customDayShortNames"
-      displayFormat="DDD. MMM DD, YY"
-      monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
+      :day-short-names="customDayShortNames"
+      display-format="DDD. MMM DD, YY"
+      month-short-names="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>D MMM YYYY H:mm</ion-label>
-    <ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
+    <ion-datetime display-format="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>DDDD MMM D, YYYY</ion-label>
-    <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
+    <ion-datetime display-format="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>HH:mm</ion-label>
-    <ion-datetime displayFormat="HH:mm"></ion-datetime>
+    <ion-datetime display-format="HH:mm"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>h:mm a</ion-label>
-    <ion-datetime displayFormat="h:mm a"></ion-datetime>
+    <ion-datetime display-format="h:mm a"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>hh:mm A (15 min steps)</ion-label>
-    <ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
+    <ion-datetime display-format="h:mm A" minute-values="0,15,30,45"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>Leap years, summer months</ion-label>
-    <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" :yearValues="customYearValues"></ion-datetime>
+    <ion-datetime display-format="MM/YYYY" picker-format="MMMM YYYY" month-values="6,7,8" :year-values="customYearValues"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>Specific days/months/years</ion-label>
-    <ion-datetime monthValues="6,7,8" yearValues="2014,2015" dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" displayFormat="DD/MMM/YYYY"></ion-datetime>
+    <ion-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" display-format="DD/MMM/YYYY"></ion-datetime>
   </ion-item>
 </template>
 

core/src/components/fab-button/fab-button.ios.scss

@@ -7,7 +7,11 @@
 :host {
   --background: #{$fab-ios-background-color};
   --background-activated: #{$fab-ios-background-color-activated};
-  --background-focused: var(--background-activated);
+  --background-focused: #{ion-color(primary, shade)};
+  --background-hover: #{ion-color(primary, tint)};
+  --background-activated-opacity: 1;
+  --background-focused-opacity: 1;
+  --background-hover-opacity: 1;
   --color: #{$fab-ios-text-color};
   --color-activated: #{$fab-ios-text-color};
   --color-focused: var(--color-activated);
@@ -15,7 +19,7 @@
   --transition: #{$fab-ios-transition};
 }
 
-:host(.activated) {
+:host(.ion-activated) {
   --box-shadow: #{$fab-ios-box-shadow-activated};
   --transform: #{$fab-ios-transform};
   --transition: #{$fab-ios-transition-activated};
@@ -46,6 +50,34 @@
 }
 
 
+// FAB Button: Color
+// --------------------------------------------------
+
+:host(.ion-color.ion-focused) .button-native::after {
+  background: #{current-color(shade)};
+}
+
+// Focused/Activated Button with Color
+:host(.ion-color.ion-focused) .button-native,
+:host(.ion-color.ion-activated) .button-native {
+  color: #{current-color(contrast)};
+
+  &::after {
+    background: #{current-color(shade)};
+  }
+}
+
+@media (any-hover: hover) {
+  :host(.ion-color:hover) .button-native {
+    color: #{current-color(contrast)};
+
+    &::after {
+      background: #{current-color(tint)};
+    }
+  }
+}
+
+
 // Translucent FAB buttons
 // --------------------------------------------------
 
@@ -79,7 +111,7 @@
   }
 
   :host(.ion-color.ion-focused.fab-button-translucent) .button-native,
-  :host(.ion-color.activated.fab-button-translucent) .button-native {
+  :host(.ion-color.ion-activated.fab-button-translucent) .button-native {
     background: #{current-color(base)};
   }
 }

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

@@ -6,8 +6,12 @@
 
 :host {
   --background: #{$fab-md-background-color};
-  --background-activated: var(--background);
-  --background-focused: var(--background-activated);
+  --background-activated: transparent;
+  --background-focused: currentColor;
+  --background-hover: currentColor;
+  --background-activated-opacity: 0;
+  --background-focused-opacity: .24;
+  --background-hover-opacity: .08;
   --color: #{$fab-md-text-color};
   --color-activated: #{$fab-md-text-color};
   --color-focused: var(--color-activated);
@@ -21,7 +25,7 @@
   };
 }
 
-:host(.activated) {
+:host(.ion-activated) {
   --box-shadow: #{$fab-md-box-shadow-activated};
 }
 
@@ -39,11 +43,41 @@
   --color-activated: #{$fab-md-list-button-text-color};
   --color-focused: var(--color-activated);
   --background: #{$fab-md-list-button-background-color};
-  --background-activated: #{$fab-md-list-button-background-color-activated};
-  --background-focused: var(--background-activated);
+  --background-activated: transparent;
+  --background-focused: #{$fab-md-list-button-background-color-activated};
   --background-hover: #{$fab-md-list-button-background-color-hover};
 }
 
 :host(.fab-button-in-list) ::slotted(ion-icon) {
   font-size: $fab-md-list-button-icon-font-size;
 }
+
+
+// FAB Button: Color
+// --------------------------------------------------
+
+// Focused Button with Color
+:host(.ion-color.ion-focused) .button-native {
+  color: #{current-color(contrast)};
+
+  &::after {
+    background: #{current-color(contrast)};
+  }
+}
+:host(.ion-color.ion-activated) .button-native {
+  color: #{current-color(contrast)};
+
+  &::after {
+    background: transparent;
+  }
+}
+
+@media (any-hover: hover) {
+  :host(.ion-color:hover) .button-native {
+    color: #{current-color(contrast)};
+
+    &::after {
+      background: #{current-color(contrast)};
+    }
+  }
+}

core/src/components/fab-button/fab-button.md.vars.scss

@@ -13,7 +13,7 @@ $fab-md-box-shadow-activated:                     0 7px 8px -4px rgba(0, 0, 0, .
 $fab-md-background-color:                         ion-color(primary, base) !default;
 
 /// @prop - Background color of the activated button
-$fab-md-background-color-activated:               ion-color(primary, shade) !default;
+$fab-md-background-color-activated:               ion-color(primary, contrast) !default;
 
 /// @prop - Text color of the button
 $fab-md-text-color:                               ion-color(primary, contrast) !default;

core/src/components/fab-button/fab-button.scss

@@ -6,9 +6,12 @@
 :host {
   /**
    * @prop --background: Background of the button
-   * @prop --background-activated: Background of the button when pressed
+   * @prop --background-activated: Background of the button when pressed. Note: setting this will interfere with the Material Design ripple.
+   * @prop --background-activated-opacity: Opacity of the button background when pressed
    * @prop --background-focused: Background of the button when focused with the tab key
+   * @prop --background-focused-opacity: Opacity of the button background when focused with the tab key
    * @prop --background-hover: Background of the button on hover
+   * @prop --background-hover-opacity: Opacity of the button background on hover
    *
    * @prop --color: Text color of the button
    * @prop --color-activated: Text color of the button when pressed
@@ -32,7 +35,8 @@
    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button
    */
   --color-hover: #{var(--color)};
-  --background-hover: #{ion-color(primary, tint)};
+  --background-hover: #{ion-color(primary, contrast)};
+  --background-hover-opacity: .08;
   --transition: background-color, opacity 100ms linear;
   --ripple-color: currentColor;
   --border-radius: #{$fab-border-radius};
@@ -101,6 +105,10 @@
   line-height: 1;
 }
 
+.button-native::after {
+  @include button-state();
+}
+
 .button-inner {
   @include position(0, 0, null, 0);
 
@@ -116,15 +124,8 @@
 
   transition: all ease-in-out 300ms;
   transition-property: transform, opacity;
-}
 
-
-// FAB Button: Color
-// --------------------------------------------------
-
-:host(.ion-color) .button-native {
-  background: #{current-color(base)};
-  color: #{current-color(contrast)};
+  z-index: 1;
 }
 
 
@@ -132,13 +133,8 @@
 // --------------------------------------------------
 
 :host(.fab-button-disabled) {
-  opacity: .5;
-
-  pointer-events: none;
-}
-
-:host(.fab-button-disabled) .button-native {
   cursor: default;
+  opacity: .5;
   pointer-events: none;
 }
 
@@ -148,41 +144,42 @@
 
 @media (any-hover: hover) {
   :host(:hover) .button-native {
-    background: var(--background-hover);
     color: var(--color-hover);
-  }
 
-  :host(.ion-color:hover) .button-native {
-    background: #{current-color(tint)};
-    color: #{current-color(contrast)};
+    &::after {
+      background: var(--background-hover);
+
+      opacity: var(--background-hover-opacity);
+    }
   }
 }
 
+
 // FAB Button: Focused
 // --------------------------------------------------
 
 :host(.ion-focused) .button-native {
-  background: var(--background-focused);
   color: var(--color-focused);
+
+  &::after {
+    background: var(--background-focused);
+
+    opacity: var(--background-focused-opacity);
+  }
 }
 
-:host(.ion-color.ion-focused) .button-native {
-  background: #{current-color(shade)};
-}
 
 // FAB Button: Activated
 // --------------------------------------------------
 
-:host(.activated) .button-native {
-  background: var(--background-activated);
+:host(.ion-activated) .button-native {
   color: var(--color-activated);
-}
 
-// Focused/Activated Button with Color
-:host(.ion-color.ion-focused) .button-native,
-:host(.ion-color.activated) .button-native {
-  background: #{current-color(shade)};
-  color: #{current-color(contrast)};
+  &::after {
+    background: var(--background-activated);
+
+    opacity: var(--background-activated-opacity);
+  }
 }
 
 
@@ -252,4 +249,13 @@ ion-ripple-effect {
   :host(.fab-button-translucent) .button-native {
     backdrop-filter: var(--backdrop-filter);
   }
-}
+}
+
+
+// FAB Button: Color
+// --------------------------------------------------
+
+:host(.ion-color) .button-native {
+  background: #{current-color(base)};
+  color: #{current-color(contrast)};
+}

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

@@ -125,27 +125,30 @@ export const FabButtonExample: React.FC = () => (
 
 ## CSS Custom Properties
 
-| Name                     | Description                                                                                               |
-| ------------------------ | --------------------------------------------------------------------------------------------------------- |
-| `--background`           | Background of the button                                                                                  |
-| `--background-activated` | Background of the button when pressed                                                                     |
-| `--background-focused`   | Background of the button when focused with the tab key                                                    |
-| `--background-hover`     | Background of the button on hover                                                                         |
-| `--border-color`         | Border color of the button                                                                                |
-| `--border-radius`        | Border radius of the button                                                                               |
-| `--border-style`         | Border style of the button                                                                                |
-| `--border-width`         | Border width of the button                                                                                |
-| `--box-shadow`           | Box shadow of the button                                                                                  |
-| `--color`                | Text color of the button                                                                                  |
-| `--color-activated`      | Text color of the button when pressed                                                                     |
-| `--color-focused`        | Text color of the button when focused with the tab key                                                    |
-| `--color-hover`          | Text color of the button on hover                                                                         |
-| `--padding-bottom`       | Bottom padding of the button                                                                              |
-| `--padding-end`          | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
-| `--padding-start`        | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
-| `--padding-top`          | Top padding of the button                                                                                 |
-| `--ripple-color`         | Color of the button ripple effect                                                                         |
-| `--transition`           | Transition of the button                                                                                  |
+| Name                             | Description                                                                                               |
+| -------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `--background`                   | Background of the button                                                                                  |
+| `--background-activated`         | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. |
+| `--background-activated-opacity` | Opacity of the button background when pressed                                                             |
+| `--background-focused`           | Background of the button when focused with the tab key                                                    |
+| `--background-focused-opacity`   | Opacity of the button background when focused with the tab key                                            |
+| `--background-hover`             | Background of the button on hover                                                                         |
+| `--background-hover-opacity`     | Opacity of the button background on hover                                                                 |
+| `--border-color`                 | Border color of the button                                                                                |
+| `--border-radius`                | Border radius of the button                                                                               |
+| `--border-style`                 | Border style of the button                                                                                |
+| `--border-width`                 | Border width of the button                                                                                |
+| `--box-shadow`                   | Box shadow of the button                                                                                  |
+| `--color`                        | Text color of the button                                                                                  |
+| `--color-activated`              | Text color of the button when pressed                                                                     |
+| `--color-focused`                | Text color of the button when focused with the tab key                                                    |
+| `--color-hover`                  | Text color of the button on hover                                                                         |
+| `--padding-bottom`               | Bottom padding of the button                                                                              |
+| `--padding-end`                  | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button |
+| `--padding-start`                | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button |
+| `--padding-top`                  | Top padding of the button                                                                                 |
+| `--ripple-color`                 | Color of the button ripple effect                                                                         |
+| `--transition`                   | Transition of the button                                                                                  |
 
 
 ## Dependencies

core/src/components/fab-button/test/standalone/index.html

@@ -21,8 +21,8 @@
     <ion-fab-button class="fab-button-in-list">In List</ion-fab-button>
     <ion-fab-button class="fab-button-in-list"><ion-icon name="heart"></ion-icon></ion-fab-button>
     <ion-fab-button size="small" class="fab-button-in-list"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button class="fab-button-in-list activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
-    <ion-fab-button size="small" class="fab-button-in-list activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button class="fab-button-in-list ion-activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
+    <ion-fab-button size="small" class="fab-button-in-list ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
   </p>
 
   <h3>Colors</h3>
@@ -38,15 +38,15 @@
     <ion-fab-button color="dark"><ion-icon name="heart"></ion-icon></ion-fab-button>
   </p>
   <p>
-    <ion-fab-button color="primary" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="secondary" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="tertiary" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="success" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="warning" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="danger" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="light" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="medium" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
-    <ion-fab-button color="dark" class="activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="primary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="secondary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="tertiary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="success" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="warning" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="danger" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="light" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="medium" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+    <ion-fab-button color="dark" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
   </p>
 
   <h3>Custom</h3>
@@ -56,20 +56,20 @@
 
   <!-- Custom Colors -->
   <ion-fab-button class="custom"><ion-icon name="star"></ion-icon></ion-fab-button>
-  <ion-fab-button class="custom activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+  <ion-fab-button class="custom ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
   <ion-fab-button color="secondary" class="custom"><ion-icon name="heart"></ion-icon></ion-fab-button>
 
   <!-- Custom Colors Fab In List -->
   <ion-fab-button class="fab-button-in-list custom-white">White</ion-fab-button>
-  <ion-fab-button class="fab-button-in-list custom-white activated">White</ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-white ion-activated">White</ion-fab-button>
   <ion-fab-button class="fab-button-in-list custom-white"><ion-icon name="heart"></ion-icon></ion-fab-button>
-  <ion-fab-button class="fab-button-in-list custom-white activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-white ion-activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
   <ion-fab-button class="fab-button-in-list custom-blue"><ion-icon name="star"></ion-icon></ion-fab-button>
-  <ion-fab-button class="fab-button-in-list custom-blue activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-blue ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
   <ion-fab-button class="fab-button-in-list custom-border">Border</ion-fab-button>
-  <ion-fab-button class="fab-button-in-list custom-border activated">Border</ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-border ion-activated">Border</ion-fab-button>
   <ion-fab-button class="fab-button-in-list custom-border"><ion-icon name="star"></ion-icon></ion-fab-button>
-  <ion-fab-button class="fab-button-in-list custom-border activated"><ion-icon name="star"></ion-icon></ion-fab-button>
+  <ion-fab-button class="fab-button-in-list custom-border ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
 
   <style>
     ion-fab-button {

core/src/components/fab/test/states/e2e.ts

@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('fab: states', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/fab/test/states?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});