fix(item): update to match Material Design spec (#16182)

- splits the item min height by mode
- removes padding end from the slotted end components in favor of using 16px on the item
- updates the icon color to lighter gray (rgb)
- removes font size change from text wrapped labels
- add list spec test to include MD examples

fixes #14799

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

@@ -1,5 +1,5 @@
 @import "../../themes/ionic.globals.ios";
-@import "../item/item.vars";
+@import "../item/item.ios.vars";
 
 // iOS Alert
 // --------------------------------------------------
@@ -299,4 +299,4 @@ $alert-ios-checkbox-icon-transform:                     rotate(45deg) !default;
 $alert-ios-translucent-filter:                          saturate(180%) blur(20px) !default;
 
 /// @prop - Height of the tappable inputs in the checkbox alert
-$alert-ios-tappable-height:                             $item-min-height !default;
+$alert-ios-tappable-height:                             $item-ios-min-height !default;

core/src/components/alert/alert.md.vars.scss

@@ -1,5 +1,5 @@
 @import "../../themes/ionic.globals.md";
-@import "../item/item.vars";
+@import "../item/item.md.vars";
 
 // Material Design Alert
 // --------------------------------------------------
@@ -317,4 +317,4 @@ $alert-md-checkbox-label-text-color:          $text-color-step-150 !default;
 $alert-md-checkbox-label-font-size:           16px !default;
 
 /// @prop - Height of the tappable inputs in the checkbox alert
-$alert-md-tappable-height:                    $item-min-height !default;
+$alert-md-tappable-height:                    $item-md-min-height !default;

core/src/components/checkbox/checkbox.md.vars.scss

@@ -50,7 +50,7 @@ $checkbox-md-transition-duration:        180ms !default;
 $checkbox-md-transition-easing:          cubic-bezier(.4, 0, .2, 1) !default;
 
 /// @prop - Margin top of the start checkbox item
-$checkbox-md-item-start-margin-top:      9px !default;
+$checkbox-md-item-start-margin-top:      18px !default;
 
 /// @prop - Margin end of the start checkbox item
 $checkbox-md-item-start-margin-end:      36px !default;
@@ -62,13 +62,13 @@ $checkbox-md-item-start-margin-bottom:   $checkbox-md-item-start-margin-top !def
 $checkbox-md-item-start-margin-start:    4px !default;
 
 /// @prop - Margin top of the end checkbox item
-$checkbox-md-item-end-margin-top:        11px !default;
+$checkbox-md-item-end-margin-top:        18px !default;
 
 /// @prop - Margin end of the end checkbox item
-$checkbox-md-item-end-margin-end:        10px !default;
+$checkbox-md-item-end-margin-end:        0 !default;
 
 /// @prop - Margin bottom of the end checkbox item
-$checkbox-md-item-end-margin-bottom:     10px !default;
+$checkbox-md-item-end-margin-bottom:     $checkbox-md-item-end-margin-top !default;
 
 /// @prop - Margin start of the end checkbox item
 $checkbox-md-item-end-margin-start:      0 !default;

core/src/components/datetime/datetime.md.vars.scss

@@ -8,7 +8,7 @@
 $datetime-md-padding-top:         $item-md-padding-top !default;
 
 /// @prop - Padding end of the datetime
-$datetime-md-padding-end:         ($item-md-padding-end / 2) !default;
+$datetime-md-padding-end:         0 !default;
 
 /// @prop - Padding bottom of the datetime
 $datetime-md-padding-bottom:      $item-md-padding-bottom !default;

core/src/components/input/input.md.vars.scss

@@ -11,7 +11,7 @@ $input-md-font-size:                      inherit !default;
 $input-md-padding-top:                     $item-md-padding-top !default;
 
 /// @prop - Margin end of the input
-$input-md-padding-end:                     ($item-md-padding-end / 2) !default;
+$input-md-padding-end:                     0 !default;
 
 /// @prop - Margin bottom of the input
 $input-md-padding-bottom:                  $item-md-padding-bottom !default;
@@ -56,7 +56,7 @@ $input-md-highlight-color-invalid:        ion-color(danger, base) !default;
 $input-md-inset-padding-top:              ($item-md-padding-top / 2) !default;
 
 /// @prop - Padding end of the inset input
-$input-md-inset-padding-end:              ($item-md-padding-end / 2) !default;
+$input-md-inset-padding-end:              0 !default;
 
 /// @prop - Padding bottom of the inset input
 $input-md-inset-padding-bottom:           ($item-md-padding-bottom / 2) !default;

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

@@ -15,37 +15,102 @@
 }
 
 .item-divider-inner {
-  @include padding-horizontal(null, ($item-md-divider-padding-end / 2));
+  @include padding-horizontal(null, $item-md-divider-padding-end);
 }
 
 
 // Material Design Item Divider Slots
 // --------------------------------------------------
 
-:host([slot="start"]),
+::slotted([slot="start"]) {
-:host([slot="end"]) {
+  @include margin-horizontal($item-md-start-slot-margin-start, $item-md-start-slot-margin-end);
-  @include margin($item-md-slot-margin-top, $item-md-slot-margin-end, $item-md-slot-margin-bottom, $item-md-slot-margin-start);
 }
 
-::slotted(ion-icon[slot="start"]),
+::slotted([slot="end"]) {
-::slotted(ion-icon[slot="end"]) {
+  @include margin-horizontal($item-md-end-slot-margin-start, $item-md-end-slot-margin-end);
+}
+
+
+// Material Design Slotted Icon
+// --------------------------------------------------
+
+::slotted(ion-icon) {
+
+  color: $item-md-icon-slot-color;
+
+  font-size: $item-md-icon-slot-font-size;
+}
+
+::slotted(ion-icon[slot]) {
   @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start);
 }
 
-// TODO
+::slotted(ion-icon[slot="start"]) {
-// .item-divider-md ion-icon[slot="start"] + .item-inner,
+  @include margin-horizontal($item-md-icon-start-slot-margin-start, $item-md-icon-start-slot-margin-end);
-// .item-divider-md ion-icon[slot="start"] + .item-interactive {
+}
-//   @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null);
+
-// }
+::slotted(ion-icon[slot="end"]) {
+  @include margin-horizontal($item-md-icon-end-slot-margin-start, $item-md-icon-end-slot-margin-end);
+}
+
+
+// Material Design Slotted Note
+// --------------------------------------------------
+
+::slotted(ion-note) {
+  @include margin(0);
+
+  align-self: flex-start;
+
+  font-size: $item-md-note-slot-font-size;
+}
+
+::slotted(ion-note[slot]) {
+  @include padding($item-md-note-slot-padding-top, $item-md-note-slot-padding-end, $item-md-note-slot-padding-bottom, $item-md-note-slot-padding-start);
+}
+
+::slotted(ion-note[slot="start"]) {
+  @include padding-horizontal($item-md-note-start-slot-padding-start, $item-md-note-start-slot-padding-end);
+}
+
+::slotted(ion-note[slot="end"]) {
+  @include padding-horizontal($item-md-note-end-slot-padding-start, $item-md-note-end-slot-padding-end);
+}
+
+
+// Material Design Item Divider Avatar
+// --------------------------------------------------
+
+::slotted(ion-avatar) {
+  width: $item-md-avatar-width;
+  height: $item-md-avatar-height;
+}
+
+
+// Material Design Item Divider Thumbnail
+// --------------------------------------------------
+
+::slotted(ion-thumbnail) {
+  width: $item-md-thumbnail-width;
+  height: $item-md-thumbnail-height;
+}
+
+// Material Design Item Divider Avatar/Thumbnail
+// --------------------------------------------------
+
+::slotted(ion-avatar),
+::slotted(ion-thumbnail) {
+  @include margin($item-md-media-slot-margin-top, $item-md-media-slot-margin-end, $item-md-media-slot-margin-bottom, $item-md-media-slot-margin-start);
+}
 
 ::slotted(ion-avatar[slot="start"]),
 ::slotted(ion-thumbnail[slot="start"]) {
-  @include margin(($item-md-padding-end / 2), $item-md-padding-end, ($item-md-padding-end / 2), 0);
+  @include margin-horizontal($item-md-media-start-slot-margin-start, $item-md-media-start-slot-margin-end);
 }
 
 ::slotted(ion-avatar[slot="end"]),
 ::slotted(ion-thumbnail[slot="end"]) {
-  @include margin(($item-md-padding-end / 2));
+  @include margin-horizontal($item-md-media-end-slot-margin-start, $item-md-media-end-slot-margin-end);
 }
 
 

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

@@ -20,4 +20,4 @@ $item-md-divider-border-bottom:      1px solid $item-md-border-color !default;
 $item-md-divider-padding-start:      $item-md-padding-start !default;
 
 /// @prop - Padding end for the divider
-$item-md-divider-padding-end:        $item-md-padding-end !default;
+$item-md-divider-padding-end:        0 !default;

core/src/components/item/item.ios.scss

@@ -5,6 +5,7 @@
 // --------------------------------------------------
 
 :host {
+  --min-height: #{$item-ios-min-height};
   --transition: background-color 200ms linear;
   --padding-start: #{$item-ios-padding-start};
   --inner-padding-end: #{$item-ios-padding-end / 2};

core/src/components/item/item.ios.vars.scss

@@ -3,6 +3,9 @@
 // iOS Item
 // --------------------------------------------------
 
+/// @prop - Minimum height of the item
+$item-ios-min-height:                        44px !default;
+
 /// @prop - Font size of the item
 $item-ios-font-size:                         17px !default;
 

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

@@ -6,6 +6,7 @@
 // --------------------------------------------------
 
 :host {
+  --min-height: #{$item-md-min-height};
   --background: var(--ion-item-background, transparent);
   --background-activated: #{$item-md-background-activated};
   --border-color: #{$item-md-border-bottom-color};
@@ -16,7 +17,7 @@
   --background-activated: #{$item-md-background-activated};
   --color: #{$item-md-color};
   --border-color: #{$item-md-border-bottom-color};
-  --inner-padding-end: #{$item-md-padding-end / 2};
+  --inner-padding-end: #{$item-md-padding-end};
   --inner-border-width: #{0 0 $item-md-border-bottom-width 0};
   --highlight-height: 2px;
   --highlight-color-focused: #{$item-md-input-highlight-color};
@@ -70,41 +71,132 @@
   --show-inset-highlight: 0;
 }
 
+
+// Material Design Multi-line Item
+// --------------------------------------------------
+
+// TODO this works if manually adding the class / work with prop?
+// Multi-line items should align the slotted content at the top
+:host(.item-multi-line) ::slotted([slot="start"]),
+:host(.item-multi-line) ::slotted([slot="end"]) {
+  @include margin($item-md-multi-line-slot-margin-top, $item-md-multi-line-slot-margin-end, $item-md-multi-line-slot-margin-bottom, $item-md-multi-line-slot-margin-start);
+
+  align-self: flex-start;
+}
+
 // Material Design Item Slots
 // --------------------------------------------------
 
-::slotted(:not(.interactive)[slot="start"]),
+::slotted(:not(.interactive)[slot="start"]) {
-::slotted(:not(.interactive)[slot="end"]) {
+  @include margin-horizontal($item-md-start-slot-margin-start, $item-md-start-slot-margin-end);
-  @include margin($item-md-slot-margin-top, $item-md-slot-margin-end, $item-md-slot-margin-bottom, $item-md-slot-margin-start);
 }
 
-::slotted(ion-icon[slot="start"]),
+::slotted(:not(.interactive)[slot="end"]) {
-::slotted(ion-icon[slot="end"]) {
+  @include margin-horizontal($item-md-end-slot-margin-start, $item-md-end-slot-margin-end);
+}
+
+
+// Material Design Slotted Icon
+// --------------------------------------------------
+
+::slotted(ion-icon) {
+
+  color: $item-md-icon-slot-color;
+
+  font-size: $item-md-icon-slot-font-size;
+}
+
+::slotted(ion-icon[slot]) {
   @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start);
 }
 
-// TODO
+::slotted(ion-icon[slot="start"]) {
-::slotted(ion-icon[slot="start"]) + .item-inner,
+  @include margin-horizontal($item-md-icon-start-slot-margin-start, $item-md-icon-start-slot-margin-end);
-::slotted(ion-icon[slot="start"]) + .item-interactive {
+}
-  @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null);
+
+::slotted(ion-icon[slot="end"]) {
+  @include margin-horizontal($item-md-icon-end-slot-margin-start, $item-md-icon-end-slot-margin-end);
+}
+
+
+// Material Design Slotted Note
+// --------------------------------------------------
+
+::slotted(ion-note) {
+  @include margin(0);
+
+  align-self: flex-start;
+
+  font-size: $item-md-note-slot-font-size;
+}
+
+::slotted(ion-note[slot]) {
+  @include padding($item-md-note-slot-padding-top, $item-md-note-slot-padding-end, $item-md-note-slot-padding-bottom, $item-md-note-slot-padding-start);
+}
+
+::slotted(ion-note[slot="start"]) {
+  @include padding-horizontal($item-md-note-start-slot-padding-start, $item-md-note-start-slot-padding-end);
+}
+
+::slotted(ion-note[slot="end"]) {
+  @include padding-horizontal($item-md-note-end-slot-padding-start, $item-md-note-end-slot-padding-end);
+}
+
+
+// Material Design Item Avatar
+// --------------------------------------------------
+
+::slotted(ion-avatar) {
+  width: $item-md-avatar-width;
+  height: $item-md-avatar-height;
+}
+
+
+// Material Design Item Thumbnail
+// --------------------------------------------------
+
+::slotted(ion-thumbnail) {
+  width: $item-md-thumbnail-width;
+  height: $item-md-thumbnail-height;
+}
+
+// Material Design Item Avatar/Thumbnail
+// --------------------------------------------------
+
+::slotted(ion-avatar),
+::slotted(ion-thumbnail) {
+  @include margin($item-md-media-slot-margin-top, $item-md-media-slot-margin-end, $item-md-media-slot-margin-bottom, $item-md-media-slot-margin-start);
 }
 
 ::slotted(ion-avatar[slot="start"]),
 ::slotted(ion-thumbnail[slot="start"]) {
-  @include margin(($item-md-padding-end / 2), $item-md-padding-end, ($item-md-padding-end / 2), 0);
+  @include margin-horizontal($item-md-media-start-slot-margin-start, $item-md-media-start-slot-margin-end);
 }
 
 ::slotted(ion-avatar[slot="end"]),
 ::slotted(ion-thumbnail[slot="end"]) {
-  @include margin(($item-md-padding-end / 2));
+  @include margin-horizontal($item-md-media-end-slot-margin-start, $item-md-media-end-slot-margin-end);
 }
 
+
+// Material Design Floating/Stacked Label
+// --------------------------------------------------
+
 :host(.item-label-stacked) ::slotted([slot="end"]),
 :host(.item-label-floating) ::slotted([slot="end"]) {
   @include margin($item-md-label-slot-end-margin-top, $item-md-label-slot-end-margin-end, $item-md-label-slot-end-margin-bottom, $item-md-label-slot-end-margin-start);
 }
 
 
+// Material Design Toggle/Radio Item
+// --------------------------------------------------
+
+:host(.item-toggle) ::slotted(ion-label),
+:host(.item-radio) ::slotted(ion-label) {
+  @include margin-horizontal(0, null);
+}
+
+
 // Material Design Item Button
 // --------------------------------------------------
 
@@ -124,28 +216,6 @@
   @include padding(0);
 }
 
-// Material Design Item Avatar
-// --------------------------------------------------
-
-::slotted(ion-avatar) {
-  width: $item-md-avatar-width;
-  height: $item-md-avatar-height;
-}
-
-
-// Material Design Item Thumbnail
-// --------------------------------------------------
-
-::slotted(ion-thumbnail) {
-  width: $item-md-thumbnail-width;
-  height: $item-md-thumbnail-height;
-}
-
-:host(.item-toggle) ::slotted(ion-label),
-:host(.item-radio) ::slotted(ion-label) {
-  @include margin-horizontal(0, null);
-}
-
 
 // Material Design Radio Item Label: Checked
 // -----------------------------------------

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

@@ -3,6 +3,9 @@
 // Material Design Item
 // --------------------------------------------------
 
+/// @prop - Minimum height of the item
+$item-md-min-height:                        48px !default;
+
 /// @prop - Color of the item paragraph
 $item-md-paragraph-text-color:              $text-color-step-400 !default;
 
@@ -16,7 +19,7 @@ $item-md-avatar-width:                      40px !default;
 $item-md-avatar-height:                     $item-md-avatar-width !default;
 
 /// @prop - Width of the thumbnail in the item
-$item-md-thumbnail-width:                   80px !default;
+$item-md-thumbnail-width:                   56px !default;
 
 /// @prop - Height of the thumbnail in the item
 $item-md-thumbnail-height:                  $item-md-thumbnail-width !default;
@@ -25,7 +28,7 @@ $item-md-thumbnail-height:                  $item-md-thumbnail-width !default;
 $item-md-detail-icon-color:                 $item-md-border-color !default;
 
 /// @prop - Padding top for the item content
-$item-md-padding-top:                       11px !default;
+$item-md-padding-top:                       10px !default;
 
 /// @prop - Padding end for the item content
 $item-md-padding-end:                       16px !default;
@@ -61,29 +64,67 @@ $item-md-input-highlight-color-invalid:     ion-color(danger, base) !default;
 // Item Slots
 // --------------------------------------------------
 
-/// @prop - Margin top for the start/end slot
+/// @prop - Margin start for the start slot
-$item-md-slot-margin-top:                   2px !default;
+$item-md-start-slot-margin-start:           null !default;
 
-/// @prop - Margin end for the start/end slot
+/// @prop - Margin end for the start slot
-$item-md-slot-margin-end:                   ($item-md-padding-end / 2) !default;
+$item-md-start-slot-margin-end:             32px !default;
 
-/// @prop - Margin bottom for the start/end slot
+/// @prop - Margin start for the end slot
-$item-md-slot-margin-bottom:                $item-md-slot-margin-top !default;
+$item-md-end-slot-margin-start:             32px !default;
 
-/// @prop - Margin start for the start/end slot
+/// @prop - Margin end for the end slot
-$item-md-slot-margin-start:                 0 !default;
+$item-md-end-slot-margin-end:               null !default;
+
+/// @prop - Margin top for content in the start/end slot in a multi-line item
+$item-md-multi-line-slot-margin-top:        16px !default;
+
+/// @prop - Margin end for content in the start/end slot in a multi-line item
+$item-md-multi-line-slot-margin-end:        null !default;
+
+/// @prop - Margin bottom for content in the start/end slot in a multi-line item
+$item-md-multi-line-slot-margin-bottom:     16px !default;
+
+/// @prop - Margin start for content in the start/end slot in a multi-line item
+$item-md-multi-line-slot-margin-start:      null !default;
+
+
+// Icon Slots
+// --------------------------------------------------
 
 /// @prop - Margin top for an icon in the start/end slot
-$item-md-icon-slot-margin-top:              3px !default;
+$item-md-icon-slot-margin-top:              12px !default;
 
 /// @prop - Margin end for an icon in the start/end slot
 $item-md-icon-slot-margin-end:              null !default;
 
 /// @prop - Margin bottom for an icon in the start/end slot
-$item-md-icon-slot-margin-bottom:           2px !default;
+$item-md-icon-slot-margin-bottom:           $item-md-icon-slot-margin-top !default;
 
 /// @prop - Margin start for an icon in the start/end slot
-$item-md-icon-slot-margin-start:            0 !default;
+$item-md-icon-slot-margin-start:            null !default;
+
+/// @prop - Margin start for an icon in the start slot
+$item-md-icon-start-slot-margin-start:      null !default;
+
+/// @prop - Margin end for an icon in the start slot
+$item-md-icon-start-slot-margin-end:        32px !default;
+
+/// @prop - Margin start for an icon in the end slot
+$item-md-icon-end-slot-margin-start:        16px !default;
+
+/// @prop - Margin end for an icon in the end slot
+$item-md-icon-end-slot-margin-end:          null !default;
+
+/// @prop - Color for an icon in the start/end slot
+$item-md-icon-slot-color:                   rgba(var(--ion-text-color-rgb, $text-color-rgb), 0.54) !default;
+
+/// @prop - Font size of an icon in the start/end slot
+$item-md-icon-slot-font-size:                  24px !default;
+
+
+// Label Slots
+// --------------------------------------------------
 
 /// @prop - Margin top for the end slot inside of a floating/stacked label
 $item-md-label-slot-end-margin-top:         7px !default;
@@ -96,3 +137,62 @@ $item-md-label-slot-end-margin-bottom:      $item-md-label-slot-end-margin-top !
 
 /// @prop - Margin start for the end slot inside of a floating/stacked label
 $item-md-label-slot-end-margin-start:       $item-md-label-slot-end-margin-end !default;
+
+
+// Note Slots
+// --------------------------------------------------
+
+/// @prop - Font size of a note in the start/end slot
+$item-md-note-slot-font-size:               11px !default;
+
+/// @prop - Padding top for a note in the start/end slot
+$item-md-note-slot-padding-top:             18px !default;
+
+/// @prop - Padding end for a note in the start/end slot
+$item-md-note-slot-padding-end:             0 !default;
+
+/// @prop - Padding bottom for a note in the start/end slot
+$item-md-note-slot-padding-bottom:          10px !default;
+
+/// @prop - Padding start for a note in the start/end slot
+$item-md-note-slot-padding-start:           $item-md-note-slot-padding-end !default;
+
+/// @prop - Padding start for a note in the start slot
+$item-md-note-start-slot-padding-start:     null !default;
+
+/// @prop - Padding end for a note in the start slot
+$item-md-note-start-slot-padding-end:       16px !default;
+
+/// @prop - Padding start for a note in the end slot
+$item-md-note-end-slot-padding-start:       16px !default;
+
+/// @prop - Padding end for a note in the end slot
+$item-md-note-end-slot-padding-end:         null !default;
+
+
+// Avatar/Thumbnail Slots
+// --------------------------------------------------
+
+/// @prop - Margin top for an avatar/thumbnail in the start/end slot
+$item-md-media-slot-margin-top:             8px !default;
+
+/// @prop - Margin end for an avatar/thumbnail in the start/end slot
+$item-md-media-slot-margin-end:             null !default;
+
+/// @prop - Margin bottom for an avatar/thumbnail in the start/end slot
+$item-md-media-slot-margin-bottom:          8px !default;
+
+/// @prop - Margin start for an avatar/thumbnail in the start/end slot
+$item-md-media-slot-margin-start:           $item-md-media-slot-margin-end !default;
+
+/// @prop - Margin start for an avatar/thumbnail in the start slot
+$item-md-media-start-slot-margin-start:     null !default;
+
+/// @prop - Margin end for an avatar/thumbnail in the start slot
+$item-md-media-start-slot-margin-end:       16px !default;
+
+/// @prop - Margin start for an avatar/thumbnail in the end slot
+$item-md-media-end-slot-margin-start:       16px !default;
+
+/// @prop - Margin end for an avatar/thumbnail in the end slot
+$item-md-media-end-slot-margin-end:         null !default;

core/src/components/item/item.scss

@@ -36,7 +36,6 @@
    * @prop --highlight-color-valid: The color of the highlight on the item when valid
    * @prop --highlight-color-invalid: The color of the highlight on the item when invalid
    */
-  --min-height: #{$item-min-height};
   --border-radius: 0px;
   --border-width: 0px;
   --border-style: solid;

core/src/components/item/item.vars.scss

@@ -3,6 +3,3 @@
 
 // Item
 // --------------------------------------------------
-
-/// @prop - Minimum height of the item
-$item-min-height:           44px !default;

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

@@ -9,8 +9,6 @@
 }
 
 :host([text-wrap]) {
-  font-size: $label-md-text-wrap-font-size;
-
   line-height: $label-md-text-wrap-line-height;
 }
 
@@ -69,7 +67,7 @@
 
   font-size: 14px;
 
-  line-height: normal;
+  line-height: 20px;
 
   text-overflow: inherit;
 

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

@@ -11,22 +11,19 @@ $label-md-text-color:                 $text-color-step-600 !default;
 $label-md-text-color-focused:         ion-color(primary, base) !default;
 
 /// @prop - Margin top of the label
-$label-md-margin-top:                 $item-md-padding-top !default;
+$label-md-margin-top:                 13px !default;
 
 /// @prop - Margin end of the label
-$label-md-margin-end:                 ($item-md-padding-end / 2) !default;
+$label-md-margin-end:                 0 !default;
 
 /// @prop - Margin bottom of the label
-$label-md-margin-bottom:              $item-md-padding-bottom !default;
+$label-md-margin-bottom:              10px !default;
 
 /// @prop - Margin start of the label
 $label-md-margin-start:               0 !default;
 
-/// @prop - Font size of the label when the text wraps
-$label-md-text-wrap-font-size:        14px !default;
-
 /// @prop - Line height of the label when the text wraps
 $label-md-text-wrap-line-height:      1.5 !default;
 
 /// @prop - Color of the item paragraph
-$item-md-paragraph-text-color:              $text-color-step-400 !default;
+$item-md-paragraph-text-color:        $text-color-step-400 !default;

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

@@ -5,7 +5,8 @@
 // --------------------------------------------------
 
 .list-md {
-  @include margin(-1px, $list-md-margin-end, $list-md-margin-bottom, $list-md-margin-start);
+  @include margin($list-md-margin-top, $list-md-margin-end, $list-md-margin-bottom, $list-md-margin-start);
+  @include padding($list-md-padding-top, $list-md-padding-end, $list-md-padding-bottom, $list-md-padding-start);
 
   background: $item-md-background;
 }

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

@@ -5,17 +5,29 @@
 // --------------------------------------------------
 
 /// @prop - Margin top of the list
-$list-md-margin-top:                   16px !default;
+$list-md-margin-top:                   0 !default;
 
 /// @prop - Margin end of the list
 $list-md-margin-end:                   0 !default;
 
 /// @prop - Margin bottom of the list
-$list-md-margin-bottom:                16px !default;
+$list-md-margin-bottom:                0 !default;
 
 /// @prop - Margin start of the list
 $list-md-margin-start:                 0 !default;
 
+/// @prop - Padding top of the list
+$list-md-padding-top:                  8px !default;
+
+/// @prop - Padding end of the list
+$list-md-padding-end:                  0 !default;
+
+/// @prop - Padding bottom of the list
+$list-md-padding-bottom:               8px !default;
+
+/// @prop - Padding start of the list
+$list-md-padding-start:                0 !default;
+
 /// @prop - Border bottom of the item in a list
 $list-md-item-border-bottom-width:     $item-md-border-bottom-width !default;
 

core/src/components/list/test/spec/e2e.ts

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

core/src/components/list/test/spec/index.html

@@ -0,0 +1,325 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>List - Spec</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="../../../../../dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-list lines="none">
+    <ion-item>
+      <ion-label>
+        Single-line item
+      </ion-label>
+      <ion-icon name="square" slot="end"></ion-icon>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Single-line item longer text
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon color="tertiary" slot="start" name="bluetooth"></ion-icon>
+      <ion-label>
+        Single-line item
+      </ion-label>
+      <ion-reorder slot="end"></ion-reorder>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar slot="start">
+        <img src="/src/components/avatar/test/avatar.svg">
+      </ion-avatar>
+      <ion-label>
+        Single-line item
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <img src="/src/components/thumbnail/test/thumbnail.svg">
+      </ion-thumbnail>
+      <ion-label>
+        Single-line item
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar slot="start">
+        <img src="/src/components/avatar/test/avatar.svg">
+      </ion-avatar>
+      <ion-label>
+        One-line item
+      </ion-label>
+      <ion-checkbox slot="end"></ion-checkbox>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        One-line item
+      </ion-label>
+      <ion-radio slot="end"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        One-line item
+      </ion-label>
+      <ion-toggle slot="end"></ion-toggle>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        One-line item
+      </ion-label>
+      <ion-badge slot="end">99</ion-badge>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox slot="start"></ion-checkbox>
+      <ion-label>
+        One-line item
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Two-line item
+        <p>Secondary text</p>
+      </ion-label>
+      <ion-note slot="end">meta</ion-note>
+    </ion-item>
+
+    <!-- TODO
+        <ion-item>
+          <ion-label>
+            <span>Overline</span>
+            Two-line item
+          </ion-label>
+        </ion-item> -->
+
+    <ion-item>
+      <ion-icon name="bluetooth" slot="start"></ion-icon>
+      <ion-label>
+        Two-line item
+        <p>Secondary text</p>
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar slot="start">
+        <img src="/src/components/avatar/test/avatar.svg">
+      </ion-avatar>
+      <ion-label>
+        Two-line item
+        <p>Secondary text</p>
+      </ion-label>
+      <ion-icon name="square" slot="end"></ion-icon>
+    </ion-item>
+
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <img src="/src/components/thumbnail/test/thumbnail.svg">
+      </ion-thumbnail>
+      <ion-label>
+        Two-line item
+        <p>Secondary text</p>
+      </ion-label>
+      <ion-icon name="square" slot="end"></ion-icon>
+    </ion-item>
+
+    <ion-item>
+      <ion-label text-wrap>
+        Three-line item
+        <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </ion-label>
+      <ion-note slot="end">meta</ion-note>
+    </ion-item>
+
+    <!-- TODO
+        <ion-item>
+          <ion-label>
+            <span>Overline</span>
+            Three-line item
+          </ion-label>
+        </ion-item> -->
+
+    <ion-item>
+      <ion-icon slot="start" name="bluetooth"></ion-icon>
+      <ion-label text-wrap>
+        Three-line item
+        <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar slot="start">
+        <img src="/src/components/avatar/test/avatar.svg">
+      </ion-avatar>
+      <ion-label text-wrap>
+        Three-line item
+        <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-thumbnail slot="start">
+        <img src="/src/components/thumbnail/test/thumbnail.svg">
+      </ion-thumbnail>
+      <ion-label text-wrap>
+        Three-line item
+        <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+  <!-- Similar to the first list but flipped slots -->
+  <ion-list lines="none">
+    <ion-item>
+      <ion-avatar slot="end">
+        <img src="/src/components/avatar/test/avatar.svg">
+      </ion-avatar>
+      <ion-label>
+        Single-line item
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-thumbnail slot="end">
+        <img src="/src/components/thumbnail/test/thumbnail.svg">
+      </ion-thumbnail>
+      <ion-label>
+        Single-line item
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar slot="end">
+        <img src="/src/components/avatar/test/avatar.svg">
+      </ion-avatar>
+      <ion-label>
+        One-line item
+      </ion-label>
+      <ion-checkbox slot="start"></ion-checkbox>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        One-line item
+      </ion-label>
+      <ion-radio slot="start"></ion-radio>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        One-line item
+      </ion-label>
+      <ion-toggle slot="start"></ion-toggle>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        One-line item
+      </ion-label>
+      <ion-badge slot="start">99</ion-badge>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>
+        Two-line item
+        <p>Secondary text</p>
+      </ion-label>
+      <ion-note slot="start">meta</ion-note>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="bluetooth" slot="end"></ion-icon>
+      <ion-label>
+        Two-line item
+        <p>Secondary text</p>
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar slot="end">
+        <img src="/src/components/avatar/test/avatar.svg">
+      </ion-avatar>
+      <ion-label>
+        Two-line item
+        <p>Secondary text</p>
+      </ion-label>
+      <ion-icon name="square" slot="start"></ion-icon>
+    </ion-item>
+
+    <ion-item>
+      <ion-thumbnail slot="end">
+        <img src="/src/components/thumbnail/test/thumbnail.svg">
+      </ion-thumbnail>
+      <ion-label>
+        Two-line item
+        <p>Secondary text</p>
+      </ion-label>
+      <ion-icon name="square" slot="start"></ion-icon>
+    </ion-item>
+
+    <ion-item>
+      <ion-label text-wrap>
+        Three-line item
+        <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </ion-label>
+      <ion-note slot="start">meta</ion-note>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon slot="end" name="bluetooth"></ion-icon>
+      <ion-label text-wrap>
+        Three-line item
+        <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-avatar slot="end">
+        <img src="/src/components/avatar/test/avatar.svg">
+      </ion-avatar>
+      <ion-label text-wrap>
+        Three-line item
+        <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-thumbnail slot="end">
+        <img src="/src/components/thumbnail/test/thumbnail.svg">
+      </ion-thumbnail>
+      <ion-label text-wrap>
+        Three-line item
+        <p>Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+  <style>
+    body {
+      margin: 0;
+    }
+
+    ion-list {
+      background: #e5e5e5 !important;
+    }
+
+    ion-item {
+      margin-bottom: 12px;
+    }
+
+  </style>
+</body>
+
+</html>

core/src/components/note/note.md.vars.scss

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Text color of the note
-$note-md-color:          $text-color-step-800 !default;
+$note-md-color:          $text-color-step-400 !default;
 
 /// @prop - Font size of the note
 $note-md-font-size:      14px !default;

core/src/components/note/note.scss

@@ -10,6 +10,8 @@
   color: var(--color);
 
   font-family: $font-family-base;
+
+  box-sizing: border-box;
 }
 
 :host(.ion-color) {

core/src/components/note/readme.md

@@ -1,6 +1,6 @@
 # ion-note
 
-Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default.
+Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default. Notes can be used in an item as metadata text.
 
 
 <!-- Auto Generated Below -->

core/src/components/radio/radio.md.vars.scss

@@ -53,7 +53,7 @@ $radio-md-item-start-margin-start:   4px !default;
 $radio-md-item-end-margin-top:       9px !default;
 
 /// @prop - Margin end of the item-end in a radio
-$radio-md-item-end-margin-end:       10px !default;
+$radio-md-item-end-margin-end:       0 !default;
 
 /// @prop - Margin bottom of the item-end in a radio
 $radio-md-item-end-margin-bottom:    $radio-md-item-end-margin-top !default;

core/src/components/select/select.md.scss

@@ -15,6 +15,6 @@
 }
 
 .select-icon {
-  width: 12px;
+  width: 19px;
   height: 19px;
 }

core/src/components/select/select.md.vars.scss

@@ -8,7 +8,7 @@
 $select-md-padding-top:         $item-md-padding-top !default;
 
 /// @prop - Padding end of the select
-$select-md-padding-end:         ($item-md-padding-end / 2) !default;
+$select-md-padding-end:         0 !default;
 
 /// @prop - Padding bottom of the select
 $select-md-padding-bottom:      $item-md-padding-bottom !default;

core/src/components/textarea/textarea.md.vars.scss

@@ -11,7 +11,7 @@ $textarea-md-font-size:                      inherit !default;
 $textarea-md-padding-top:                     $item-md-padding-top !default;
 
 /// @prop - Margin end of the textarea
-$textarea-md-padding-end:                     ($item-md-padding-end / 2) !default;
+$textarea-md-padding-end:                     0 !default;
 
 /// @prop - Margin bottom of the textarea
 $textarea-md-padding-bottom:                  $item-md-padding-bottom !default;

core/src/components/toggle/toggle.md.vars.scss

@@ -86,7 +86,7 @@ $toggle-md-item-start-padding-start:              2px !default;
 $toggle-md-item-end-padding-top:                  12px !default;
 
 /// @prop - Padding end of the toggle positioned on the end in an item
-$toggle-md-item-end-padding-end:                  ($item-md-padding-end / 2) !default;
+$toggle-md-item-end-padding-end:                  0 !default;
 
 /// @prop - Padding bottom of the toggle positioned on the end in an item
 $toggle-md-item-end-padding-bottom:               12px !default;