feat(note): sync the ios theme with iOS 17

BREAKING.md

@@ -464,6 +464,7 @@ The following breaking changes apply to `ion-note`:
 1. `--color` has been replaced. <sup>[1](#version-10x-note-replaced-css-variables)</sup>
 2. The color applied by the `color` prop is now driven by the centralized Ionic Theming system, scoped to the new `hue` property. <sup>[2](#version-10x-note-hue)</sup>
 3. Mode classes (`ion-note.md`, `ion-note.ios`) are no longer supported. <sup>[3](#version-10x-note-mode-classes)</sup>
+4. The `ios` note is larger and has a set line height and letter spacing. <sup>[4](#version-10x-note-ios-typography)</sup>
 
 <h5 id="version-10x-note-replaced-css-variables">Replaced CSS variables</h5>
 
@@ -493,6 +494,14 @@ When `color` is set, the note color now reads from a token instead of `--ion-col
 
 Remove any instances that target the mode classes: `ion-note.md`, `ion-note.ios`.
 
+<h5 id="version-10x-note-ios-typography">iOS typography</h5>
+
+In the `ios` theme, the note now matches the detail text of an iOS list row, in accordance with the iOS guidelines:
+
+- The font size is now `17px` instead of `16px`. To revert to the previous appearance, set `IonNote.font.size` to `max(14px, 1rem)` for global styles, or `--ion-note-font-size` for component-specific styles.
+- The line height is now `1.294` (`22px` at `17px`) instead of inherited. To revert to the previous appearance, set `IonNote.line.height` to `inherit` for global styles, or `--ion-note-line-height` for component-specific styles.
+- The letter spacing is now `-0.0235em` (`-0.4px` at `17px`) instead of inherited. To revert to the previous appearance, set `IonNote.letterSpacing` to `inherit` for global styles, or `--ion-note-letter-spacing` for component-specific styles.
+
 <h4 id="version-10x-radio-group">Radio Group</h4>
 
 Converted `ion-radio-group` to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).

core/api.txt

@@ -1907,6 +1907,8 @@ ion-note,css-prop,--ion-note-hue-bold-default-color
 ion-note,css-prop,--ion-note-hue-bold-semantic-default-color
 ion-note,css-prop,--ion-note-hue-subtle-default-color
 ion-note,css-prop,--ion-note-hue-subtle-semantic-default-color
+ion-note,css-prop,--ion-note-letter-spacing
+ion-note,css-prop,--ion-note-line-height
 
 ion-picker,shadow
 ion-picker,prop,mode,"ios" | "md",undefined,false,false

core/src/components/note/_note.docs.scss

@@ -5,4 +5,6 @@
  * @prop --ion-note-hue-bold-semantic-default-color: Text color of the `bold` hue when a semantic color is applied
  * @prop --ion-note-hue-subtle-default-color: Text color of the `subtle` hue
  * @prop --ion-note-hue-subtle-semantic-default-color: Text color of the `subtle` hue when a semantic color is applied
+ * @prop --ion-note-letter-spacing: Letter spacing of the note
+ * @prop --ion-note-line-height: Line height of the note
  */

core/src/components/note/note.interface.ts

@@ -20,6 +20,12 @@ export type IonNoteRecipe = {
       };
     };
   };
+
+  letterSpacing?: string;
+
+  line?: {
+    height?: string;
+  };
 };
 
 export type IonNoteConfig = {

core/src/components/note/note.scss

@@ -8,6 +8,10 @@
 
   font-family: var(--ion-note-font-family, inherit);
   font-size: var(--ion-note-font-size);
+
+  letter-spacing: var(--ion-note-letter-spacing);
+
+  line-height: var(--ion-note-line-height);
 }
 
 // Note: Hue

core/src/themes/ios/default.tokens.ts

@@ -871,7 +871,7 @@ export const defaultTheme: DefaultTheme = {
     IonNote: {
       font: {
         family: 'var(--ion-font-family)',
-        size: dynamicFontMin(global.root, 0.875, 16),
+        size: dynamicFontMin(global.root, 0.875, 17),
       },
 
       hue: {
@@ -899,6 +899,12 @@ export const defaultTheme: DefaultTheme = {
           },
         },
       },
+
+      letterSpacing: '-0.0235em',
+
+      line: {
+        height: '1.294',
+      },
     },
 
     IonProgressBar: {