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/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 -->