feat(item-option): support dynamic type (#28050)

Adds support for dynamic type by converting `font-size` to use `rem` units and adds a min and max `font-size` for `ios`.

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

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the item option button
-$item-option-button-ios-font-size:          16px !default;
+$item-option-button-ios-font-size:          dynamic-font-clamp(1, 16px, 2.2) !default;
 
 /// @prop - Background color of the item option button
 $item-option-button-ios-background-color:   ion-color(primary, base) !default;

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

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the sliding option button
-$item-option-button-md-font-size:           14px !default;
+$item-option-button-md-font-size:           dynamic-font(14px) !default;
 
 /// @prop - Background color of the sliding option button
 $item-option-button-md-background-color:    ion-color(primary, base) !default;

core/src/components/item-options/item-options.scss

@@ -33,7 +33,7 @@ ion-item-options {
 
   height: 100%;
 
-  font-size: 14px;
+  font-size: dynamic-font(14px);
 
   user-select: none;
   z-index: $z-index-item-options;

core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts

@@ -0,0 +1,37 @@
+import { configs, test } from '@utils/test/playwright';
+
+import { testSlidingItem } from '../test.utils';
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('item-sliding: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-item-sliding id="fontScaling">
+          <ion-item>
+            <ion-label>Item Sliding</ion-label>
+          </ion-item>
+          <ion-item-options>
+            <ion-item-option color="danger">
+              <ion-icon slot="start" name="trash"></ion-icon>
+              Delete
+            </ion-item-option>
+          </ion-item-options>
+        </ion-item-sliding>
+      `,
+        config
+      );
+
+      await testSlidingItem(page, 'fontScaling', 'scale', screenshot);
+    });
+  });
+});