fix(inputs): interactive css to rule all them

core/src/components/datetime/datetime.tsx

@@ -240,7 +240,7 @@ export class Datetime {
 
   private emitStyle() {
     this.ionStyle.emit({
-      'input': true,
+      'interactive': true,
       'datetime': true,
       'datetime-disabled': this.disabled,
       'input-has-value': this.hasValue()

core/src/components/input/input.tsx

@@ -237,6 +237,7 @@ export class Input implements InputComponent {
 
   private emitStyle() {
     this.ionStyle.emit({
+      'interactive': true,
       'input': true,
       'input-disabled': this.disabled,
       'input-has-value': this.hasValue(),

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

@@ -35,7 +35,7 @@
 }
 
 .item-divider-md ion-icon[slot="start"] + .item-inner,
-.item-divider-md ion-icon[slot="start"] + .item-input {
+.item-divider-md ion-icon[slot="start"] + .item-interactive {
   @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null);
 }
 

core/src/components/item/item.md.scss

@@ -77,7 +77,7 @@
 }
 
 // Default input items have a border
-.item-md.item-input {
+.item-md.item-interactive {
   border-bottom-width: $item-md-border-bottom-width;
 }
 
@@ -127,7 +127,7 @@
 }
 
 .item-md > ion-icon[slot="start"] + .item-inner,
-.item-md > ion-icon[slot="start"] + .item-input {
+.item-md > ion-icon[slot="start"] + .item-interactive {
   @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null);
 }
 

core/src/components/label/label.ios.scss

@@ -19,9 +19,7 @@
 // iOS Default Label Inside An Input/Select Item
 // --------------------------------------------------
 
-.item-input .label-ios,
-.item-select .label-ios,
-.item-datetime .label-ios {
+.item-interactive .label-ios {
   color: $label-ios-text-color;
 }
 
@@ -61,9 +59,7 @@
   $color-base: ion-color($colors-ios, $color-name, base, ios);
 
   .label-ios-#{$color-name},
-  .item-input .label-ios-#{$color-name},
-  .item-select .label-ios-#{$color-name},
-  .item-datetime .label-ios-#{$color-name} {
+  .item-interactive .label-ios-#{$color-name} {
     color: $color-base;
   }
 }

core/src/components/label/label.md.scss

@@ -19,9 +19,7 @@
 // Material Design Default Label Inside An Input/Select Item
 // --------------------------------------------------
 
-.item-input .label-md,
-.item-select .label-md,
-.item-datetime .label-md {
+.item-interactive .label-md {
   color: $label-md-text-color;
 }
 
@@ -63,9 +61,7 @@
   $color-base: ion-color($colors-md, $color-name, base, md);
 
   .label-md-#{$color-name},
-  .item-input .label-md-#{$color-name},
-  .item-select .label-md-#{$color-name},
-  .item-datetime .label-md-#{$color-name} {
+  .item-interactive .label-md-#{$color-name} {
     color: $color-base;
   }
 }

core/src/components/list/list.md.scss

@@ -36,7 +36,7 @@
   border-bottom-width: 0;
 }
 
-.list-md[inset] .item-input {
+.list-md[inset] .item-interactive {
   @include padding-horizontal(0);
 }
 

core/src/components/select/select.tsx

@@ -443,7 +443,7 @@ export class Select {
 
   private emitStyle() {
     this.ionStyle.emit({
-      'input': true,
+      'interactive': true,
       'select': true,
       'select-disabled': this.disabled,
       'input-has-value': this.hasValue()

core/src/components/select/test/single-value/index.html

@@ -193,7 +193,6 @@
         year.appendChild(option);
       }
 
-      debugger;
       year.componentOnReady().then(() => {
         year.value = 1994;
       });

core/src/components/textarea/textarea.tsx

@@ -166,6 +166,7 @@ export class Textarea implements TextareaComponent {
 
   private emitStyle() {
     this.ionStyle.emit({
+      'interactive': true,
       'textarea': true,
       'input': true,
       'input-disabled': this.disabled,