add spinbutton poc

.github/CODEOWNERS

@@ -81,3 +81,10 @@
 
 /core/src/css/ @brandyscarney
 /core/src/themes/ @brandyscarney
+
+# Tests
+
+**/datetime.e2e.ts @mapsandapps
+**/datetime-button.e2e.ts @mapsandapps
+**/icon.e2e.ts @mapsandapps
+**/loading.e2e.ts @mapsandapps

CHANGELOG.md

@@ -3,46 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [7.5.0](https://github.com/ionic-team/ionic-framework/compare/v7.4.4...v7.5.0) (2023-10-11)
-
-
-### Bug Fixes
-
-* **alert:** stop Enter keypress for checkboxes ([#28279](https://github.com/ionic-team/ionic-framework/issues/28279)) ([72b3899](https://github.com/ionic-team/ionic-framework/commit/72b389993df4b0dc392262a106d7949e176b13af))
-* **select:** use correct aria-haspopup value ([#28265](https://github.com/ionic-team/ionic-framework/issues/28265)) ([01167fc](https://github.com/ionic-team/ionic-framework/commit/01167fc185db9bbb45b3a4086aff98008a76af2c))
-* **toast:** toast does not warn when positionAnchor is undefined ([#28312](https://github.com/ionic-team/ionic-framework/issues/28312)) ([c37b3d8](https://github.com/ionic-team/ionic-framework/commit/c37b3d8bf4b440506fdc96455a532c6316e5673d))
-
-
-### Features
-
-* **a11y:** add dynamic font scaling ([#28314](https://github.com/ionic-team/ionic-framework/issues/28314)) ([f806781](https://github.com/ionic-team/ionic-framework/commit/f8067819eeb577db163bf3e0f95fc73064d62b8a)), closes [#24638](https://github.com/ionic-team/ionic-framework/issues/24638) [#18592](https://github.com/ionic-team/ionic-framework/issues/18592)
-* **angular, react, vue, core:** export openURL utility ([#28295](https://github.com/ionic-team/ionic-framework/issues/28295)) ([6da82aa](https://github.com/ionic-team/ionic-framework/commit/6da82aab816b28bfc174f7634ded1fc1e06502ab)), closes [#27911](https://github.com/ionic-team/ionic-framework/issues/27911)
-* **angular:** ship Ionic components as Angular standalone components ([#28311](https://github.com/ionic-team/ionic-framework/issues/28311)) ([57e2476](https://github.com/ionic-team/ionic-framework/commit/57e247637005b10f0d21d5ac5f5232bcb1908301))
-* **datetime:** add support for h11 and h24 hour formats ([#28219](https://github.com/ionic-team/ionic-framework/issues/28219)) ([597bc3f](https://github.com/ionic-team/ionic-framework/commit/597bc3f085c5ff1451c73d0cf4d7d664943e712f)), closes [#23750](https://github.com/ionic-team/ionic-framework/issues/23750)
-* **toast:** allow custom positioning relative to specific element ([#28248](https://github.com/ionic-team/ionic-framework/issues/28248)) ([897ff6f](https://github.com/ionic-team/ionic-framework/commit/897ff6f7493d8d7e4ab22c6ae59de066b43ce682)), closes [#17499](https://github.com/ionic-team/ionic-framework/issues/17499)
-
-
-
-
-
-## [7.4.4](https://github.com/ionic-team/ionic-framework/compare/v7.4.3...v7.4.4) (2023-10-11)
-
-
-### Bug Fixes
-
-* **animation:** play method resolves when animation is stopped ([#28264](https://github.com/ionic-team/ionic-framework/issues/28264)) ([e6031fb](https://github.com/ionic-team/ionic-framework/commit/e6031fbef0698dac0a346cd6202c47f2abf54f95))
-* **checkbox, radio, toggle:** disabled elements are not interactive ([#28294](https://github.com/ionic-team/ionic-framework/issues/28294)) ([c70432e](https://github.com/ionic-team/ionic-framework/commit/c70432e6934bcf1d570e1f7cf671c52d2bb52a8b)), closes [#28293](https://github.com/ionic-team/ionic-framework/issues/28293)
-* **content:** fullscreen offset is computed correctly with tab bar ([#28245](https://github.com/ionic-team/ionic-framework/issues/28245)) ([7375dd6](https://github.com/ionic-team/ionic-framework/commit/7375dd6abafdf7457f23deb53ad5f016456a6af2)), closes [#21130](https://github.com/ionic-team/ionic-framework/issues/21130)
-* **core:** allow fullscreen scroll content to flow outside container for translucent tab bar ([#28246](https://github.com/ionic-team/ionic-framework/issues/28246)) ([b297529](https://github.com/ionic-team/ionic-framework/commit/b297529afc4b93a93f7eaecd31dd5a88a3de5f4e)), closes [#17676](https://github.com/ionic-team/ionic-framework/issues/17676)
-* **core:** swipe to go back gesture has priority over other horizontal swipe gestures ([#28304](https://github.com/ionic-team/ionic-framework/issues/28304)) ([d5f0c77](https://github.com/ionic-team/ionic-framework/commit/d5f0c776dfb5cb40b8119c596805dad3adb621e0)), closes [#28303](https://github.com/ionic-team/ionic-framework/issues/28303)
-* **header:** collapsible large title main header does not flicker on load ([#28277](https://github.com/ionic-team/ionic-framework/issues/28277)) ([3259da0](https://github.com/ionic-team/ionic-framework/commit/3259da0de181c8f82c38d9de13733213c77d398f)), closes [#27060](https://github.com/ionic-team/ionic-framework/issues/27060)
-* **menu:** do not error if disabled or swipeGesture is changed mid-animation ([#28268](https://github.com/ionic-team/ionic-framework/issues/28268)) ([a169044](https://github.com/ionic-team/ionic-framework/commit/a1690441e5bcee8176da32700de6f9e3fde9635e)), closes [#20092](https://github.com/ionic-team/ionic-framework/issues/20092) [#19676](https://github.com/ionic-team/ionic-framework/issues/19676) [#19000](https://github.com/ionic-team/ionic-framework/issues/19000)
-* **segment:** scroll to active segment-button on first load ([#28276](https://github.com/ionic-team/ionic-framework/issues/28276)) ([1167a93](https://github.com/ionic-team/ionic-framework/commit/1167a9325fb930b6c727bc26889f5488d9620062)), closes [#28096](https://github.com/ionic-team/ionic-framework/issues/28096)
-
-
-
-
-
 ## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
 
 

core/CHANGELOG.md

@@ -3,46 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [7.5.0](https://github.com/ionic-team/ionic-framework/compare/v7.4.4...v7.5.0) (2023-10-11)
-
-
-### Bug Fixes
-
-* **alert:** stop Enter keypress for checkboxes ([#28279](https://github.com/ionic-team/ionic-framework/issues/28279)) ([72b3899](https://github.com/ionic-team/ionic-framework/commit/72b389993df4b0dc392262a106d7949e176b13af))
-* **select:** use correct aria-haspopup value ([#28265](https://github.com/ionic-team/ionic-framework/issues/28265)) ([01167fc](https://github.com/ionic-team/ionic-framework/commit/01167fc185db9bbb45b3a4086aff98008a76af2c))
-* **toast:** toast does not warn when positionAnchor is undefined ([#28312](https://github.com/ionic-team/ionic-framework/issues/28312)) ([c37b3d8](https://github.com/ionic-team/ionic-framework/commit/c37b3d8bf4b440506fdc96455a532c6316e5673d))
-
-
-### Features
-
-* **a11y:** add dynamic font scaling ([#28314](https://github.com/ionic-team/ionic-framework/issues/28314)) ([f806781](https://github.com/ionic-team/ionic-framework/commit/f8067819eeb577db163bf3e0f95fc73064d62b8a)), closes [#24638](https://github.com/ionic-team/ionic-framework/issues/24638) [#18592](https://github.com/ionic-team/ionic-framework/issues/18592)
-* **angular, react, vue, core:** export openURL utility ([#28295](https://github.com/ionic-team/ionic-framework/issues/28295)) ([6da82aa](https://github.com/ionic-team/ionic-framework/commit/6da82aab816b28bfc174f7634ded1fc1e06502ab)), closes [#27911](https://github.com/ionic-team/ionic-framework/issues/27911)
-* **angular:** ship Ionic components as Angular standalone components ([#28311](https://github.com/ionic-team/ionic-framework/issues/28311)) ([57e2476](https://github.com/ionic-team/ionic-framework/commit/57e247637005b10f0d21d5ac5f5232bcb1908301))
-* **datetime:** add support for h11 and h24 hour formats ([#28219](https://github.com/ionic-team/ionic-framework/issues/28219)) ([597bc3f](https://github.com/ionic-team/ionic-framework/commit/597bc3f085c5ff1451c73d0cf4d7d664943e712f)), closes [#23750](https://github.com/ionic-team/ionic-framework/issues/23750)
-* **toast:** allow custom positioning relative to specific element ([#28248](https://github.com/ionic-team/ionic-framework/issues/28248)) ([897ff6f](https://github.com/ionic-team/ionic-framework/commit/897ff6f7493d8d7e4ab22c6ae59de066b43ce682)), closes [#17499](https://github.com/ionic-team/ionic-framework/issues/17499)
-
-
-
-
-
-## [7.4.4](https://github.com/ionic-team/ionic-framework/compare/v7.4.3...v7.4.4) (2023-10-11)
-
-
-### Bug Fixes
-
-* **animation:** play method resolves when animation is stopped ([#28264](https://github.com/ionic-team/ionic-framework/issues/28264)) ([e6031fb](https://github.com/ionic-team/ionic-framework/commit/e6031fbef0698dac0a346cd6202c47f2abf54f95))
-* **checkbox, radio, toggle:** disabled elements are not interactive ([#28294](https://github.com/ionic-team/ionic-framework/issues/28294)) ([c70432e](https://github.com/ionic-team/ionic-framework/commit/c70432e6934bcf1d570e1f7cf671c52d2bb52a8b)), closes [#28293](https://github.com/ionic-team/ionic-framework/issues/28293)
-* **content:** fullscreen offset is computed correctly with tab bar ([#28245](https://github.com/ionic-team/ionic-framework/issues/28245)) ([7375dd6](https://github.com/ionic-team/ionic-framework/commit/7375dd6abafdf7457f23deb53ad5f016456a6af2)), closes [#21130](https://github.com/ionic-team/ionic-framework/issues/21130)
-* **core:** allow fullscreen scroll content to flow outside container for translucent tab bar ([#28246](https://github.com/ionic-team/ionic-framework/issues/28246)) ([b297529](https://github.com/ionic-team/ionic-framework/commit/b297529afc4b93a93f7eaecd31dd5a88a3de5f4e)), closes [#17676](https://github.com/ionic-team/ionic-framework/issues/17676)
-* **core:** swipe to go back gesture has priority over other horizontal swipe gestures ([#28304](https://github.com/ionic-team/ionic-framework/issues/28304)) ([d5f0c77](https://github.com/ionic-team/ionic-framework/commit/d5f0c776dfb5cb40b8119c596805dad3adb621e0)), closes [#28303](https://github.com/ionic-team/ionic-framework/issues/28303)
-* **header:** collapsible large title main header does not flicker on load ([#28277](https://github.com/ionic-team/ionic-framework/issues/28277)) ([3259da0](https://github.com/ionic-team/ionic-framework/commit/3259da0de181c8f82c38d9de13733213c77d398f)), closes [#27060](https://github.com/ionic-team/ionic-framework/issues/27060)
-* **menu:** do not error if disabled or swipeGesture is changed mid-animation ([#28268](https://github.com/ionic-team/ionic-framework/issues/28268)) ([a169044](https://github.com/ionic-team/ionic-framework/commit/a1690441e5bcee8176da32700de6f9e3fde9635e)), closes [#20092](https://github.com/ionic-team/ionic-framework/issues/20092) [#19676](https://github.com/ionic-team/ionic-framework/issues/19676) [#19000](https://github.com/ionic-team/ionic-framework/issues/19000)
-* **segment:** scroll to active segment-button on first load ([#28276](https://github.com/ionic-team/ionic-framework/issues/28276)) ([1167a93](https://github.com/ionic-team/ionic-framework/commit/1167a9325fb930b6c727bc26889f5488d9620062)), closes [#28096](https://github.com/ionic-team/ionic-framework/issues/28096)
-
-
-
-
-
 ## [7.4.3](https://github.com/ionic-team/ionic-framework/compare/v7.4.2...v7.4.3) (2023-10-04)
 
 

core/api.txt

@@ -394,7 +394,7 @@ ion-datetime,prop,disabled,boolean,false,false,false
 ion-datetime,prop,doneText,string,'Done',false,false
 ion-datetime,prop,firstDayOfWeek,number,0,false,false
 ion-datetime,prop,highlightedDates,((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined,undefined,false,false
-ion-datetime,prop,hourCycle,"h11" | "h12" | "h23" | "h24" | undefined,undefined,false,false
+ion-datetime,prop,hourCycle,"h12" | "h23" | undefined,undefined,false,false
 ion-datetime,prop,hourValues,number | number[] | string | undefined,undefined,false,false
 ion-datetime,prop,isDateEnabled,((dateIsoString: string) => boolean) | undefined,undefined,false,false
 ion-datetime,prop,locale,string,'default',false,false
@@ -1445,7 +1445,6 @@ ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefin
 ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,false
 ion-toast,prop,mode,"ios" | "md",undefined,false,false
 ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false
-ion-toast,prop,positionAnchor,HTMLElement | string | undefined,undefined,false,false
 ion-toast,prop,translucent,boolean,false,false,false
 ion-toast,prop,trigger,string | undefined,undefined,false,false
 ion-toast,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.5.0",
+  "version": "7.4.3",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,20 +31,20 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.4.1-dev.1697216096.18bf460",
-    "ionicons": "^7.2.1",
+    "@stencil/core": "^4.4.1",
+    "ionicons": "7.1.0",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.8.0",
-    "@capacitor/core": "^5.5.0",
+    "@axe-core/playwright": "^4.7.3",
+    "@capacitor/core": "^5.4.2",
     "@capacitor/haptics": "^5.0.6",
     "@capacitor/keyboard": "^5.0.6",
     "@capacitor/status-bar": "^5.0.6",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@jest/core": "^27.5.1",
-    "@playwright/test": "^1.39.0",
+    "@playwright/test": "^1.38.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.2",
@@ -53,8 +53,8 @@
     "@stencil/vue-output-target": "^0.8.6",
     "@types/jest": "^27.5.2",
     "@types/node": "^14.6.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.2",
-    "@typescript-eslint/parser": "^6.7.2",
+    "@typescript-eslint/eslint-plugin": "^5.17.0",
+    "@typescript-eslint/parser": "^5.17.0",
     "clean-css-cli": "^5.6.1",
     "domino": "^2.1.6",
     "eslint": "^7.32.0",
@@ -66,10 +66,11 @@
     "jest-cli": "^27.5.1",
     "prettier": "^2.6.1",
     "rollup": "^2.26.4",
-    "sass": "^1.33.0",
+    "sass": "^1.26.10",
     "serve": "^14.0.1",
     "stylelint": "^13.13.1",
-    "stylelint-order": "^4.1.0"
+    "stylelint-order": "^4.1.0",
+    "typescript": "^4.0.5"
   },
   "scripts": {
     "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",

core/src/components.d.ts

@@ -15,7 +15,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 import { CounterFormatter } from "./components/item/item-interface";
@@ -39,7 +39,7 @@ import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./com
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
-import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions } from "./components/toast/toast-interface";
+import { ToastButton, ToastLayout, ToastPosition } from "./components/toast/toast-interface";
 import { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
 export { AccordionGroupChangeEventDetail } from "./components/accordion-group/accordion-group-interface";
 export { AnimationBuilder, AutocompleteTypes, Color, ComponentProps, ComponentRef, FrameworkDelegate, StyleEventDetail, TextFieldTypes } from "./interface";
@@ -51,7 +51,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimePresentation, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 export { CounterFormatter } from "./components/item/item-interface";
@@ -75,7 +75,7 @@ export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./com
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
-export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions } from "./components/toast/toast-interface";
+export { ToastButton, ToastLayout, ToastPosition } from "./components/toast/toast-interface";
 export { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
 export namespace Components {
     interface IonAccordion {
@@ -865,7 +865,7 @@ export namespace Components {
         /**
           * The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.
          */
-        "hourCycle"?: DatetimeHourCycle;
+        "hourCycle"?: 'h23' | 'h12';
         /**
           * Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.
          */
@@ -3157,13 +3157,9 @@ export namespace Components {
         "onWillDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
         "overlayIndex": number;
         /**
-          * The starting position of the toast on the screen. Can be tweaked further using the `positionAnchor` property.
+          * The position of the toast on the screen.
          */
         "position": ToastPosition;
-        /**
-          * The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With `position="bottom"`, the toast will sit above the chosen element. With `position="top"`, the toast will sit below the chosen element. With `position="middle"`, the value of `positionAnchor` is ignored.
-         */
-        "positionAnchor"?: HTMLElement | string;
         /**
           * Present the toast overlay after it has been created.
          */
@@ -4893,7 +4889,7 @@ declare namespace LocalJSX {
         /**
           * The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.
          */
-        "hourCycle"?: DatetimeHourCycle;
+        "hourCycle"?: 'h23' | 'h12';
         /**
           * Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.
          */
@@ -7312,13 +7308,9 @@ declare namespace LocalJSX {
         "onWillPresent"?: (event: IonToastCustomEvent<void>) => void;
         "overlayIndex": number;
         /**
-          * The starting position of the toast on the screen. Can be tweaked further using the `positionAnchor` property.
+          * The position of the toast on the screen.
          */
         "position"?: ToastPosition;
-        /**
-          * The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With `position="bottom"`, the toast will sit above the chosen element. With `position="top"`, the toast will sit below the chosen element. With `position="middle"`, the value of `positionAnchor` is ignored.
-         */
-        "positionAnchor"?: HTMLElement | string;
         /**
           * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */

core/src/components/action-sheet/action-sheet.ios.scss

@@ -131,11 +131,11 @@
 .action-sheet-button {
   @include padding($action-sheet-ios-button-padding);
 
-  min-height: $action-sheet-ios-button-height;
+  height: $action-sheet-ios-button-height;
 
   font-size: $action-sheet-ios-button-font-size;
 
-  contain: content;
+  contain: strict;
 }
 
 .action-sheet-button .action-sheet-icon {

core/src/components/action-sheet/action-sheet.ios.vars.scss

@@ -50,7 +50,7 @@ $action-sheet-ios-title-padding-start:                            $action-sheet-
 $action-sheet-ios-title-color:                                    $text-color-step-600 !default;
 
 /// @prop - Font size of the action sheet title
-$action-sheet-ios-title-font-size:                                dynamic-font-min(1, 13px) !default;
+$action-sheet-ios-title-font-size:                                13px !default;
 
 /// @prop - Font weight of the action sheet title
 $action-sheet-ios-title-font-weight:                              400 !default;
@@ -75,7 +75,7 @@ $action-sheet-ios-title-border-color:                             rgba($text-col
 // --------------------------------------------------
 
 /// @prop - Font size of the action sheet sub title
-$action-sheet-ios-sub-title-font-size:                            dynamic-font-min(1, 13px) !default;
+$action-sheet-ios-sub-title-font-size:                            13px !default;
 
 /// @prop - Padding top of the action sheet sub title
 $action-sheet-ios-sub-title-padding-top:                          6px !default;
@@ -97,19 +97,19 @@ $action-sheet-ios-sub-title-padding-start:                        $action-sheet-
 $action-sheet-ios-button-height:                                  56px !default;
 
 /// @prop - Padding of the action sheet button
-$action-sheet-ios-button-padding:                                 14px !default;
+$action-sheet-ios-button-padding:                                 18px !default;
 
 /// @prop - Text color of the action sheet button
 $action-sheet-ios-button-text-color:                              ion-color(primary, base) !default;
 
 /// @prop - Font size of the action sheet button icon
-$action-sheet-ios-button-icon-font-size:                          dynamic-font-min(1, 28px) !default;
+$action-sheet-ios-button-icon-font-size:                          28px !default;
 
 /// @prop - Padding right of the action sheet button icon
 $action-sheet-ios-button-icon-padding-right:                      .3em !default;
 
 /// @prop - Font size of the action sheet button
-$action-sheet-ios-button-font-size:                               dynamic-font-min(1, 20px) !default;
+$action-sheet-ios-button-font-size:                               20px !default;
 
 /// @prop - Border color alpha of the action sheet button
 $action-sheet-ios-button-border-color-alpha:                      .08 !default;

core/src/components/action-sheet/action-sheet.md.scss

@@ -67,13 +67,13 @@
 
   position: relative;
 
-  min-height: $action-sheet-md-button-height;
+  height: $action-sheet-md-button-height;
 
   font-size: $action-sheet-md-button-font-size;
 
   text-align: $action-sheet-md-text-align;
 
-  contain: content;
+  contain: strict;
   overflow: hidden;
 }
 

core/src/components/action-sheet/action-sheet.md.vars.scss

@@ -26,7 +26,7 @@ $action-sheet-md-title-height:                          60px !default;
 $action-sheet-md-title-color:                           rgba($text-color-rgb, 0.54) !default;
 
 /// @prop - Font size of the action sheet title
-$action-sheet-md-title-font-size:                       dynamic-font(16px) !default;
+$action-sheet-md-title-font-size:                       16px !default;
 
 /// @prop - Padding top of the action sheet title
 $action-sheet-md-title-padding-top:                     20px !default;
@@ -45,7 +45,7 @@ $action-sheet-md-title-padding-start:                   $action-sheet-md-title-p
 // --------------------------------------------------
 
 /// @prop - Font size of the action sheet sub title
-$action-sheet-md-sub-title-font-size:                   dynamic-font(14px) !default;
+$action-sheet-md-sub-title-font-size:                   14px !default;
 
 /// @prop - Padding top of the action sheet sub title
 $action-sheet-md-sub-title-padding-top:                 16px !default;
@@ -70,10 +70,10 @@ $action-sheet-md-button-height:                         52px !default;
 $action-sheet-md-button-text-color:                     $text-color-step-150 !default;
 
 /// @prop - Font size of the action sheet button
-$action-sheet-md-button-font-size:                      dynamic-font(16px) !default;
+$action-sheet-md-button-font-size:                      16px !default;
 
 /// @prop - Padding top of the action sheet button
-$action-sheet-md-button-padding-top:                    12px !default;
+$action-sheet-md-button-padding-top:                    0 !default;
 
 /// @prop - Padding end of the action sheet button
 $action-sheet-md-button-padding-end:                    16px !default;
@@ -91,7 +91,7 @@ $action-sheet-md-button-background:                     transparent !default;
 // --------------------------------------------------
 
 /// @prop - Font size of the icon in the action sheet button
-$action-sheet-md-icon-font-size:                        dynamic-font(24px) !default;
+$action-sheet-md-icon-font-size:                        24px !default;
 
 /// @prop - Margin top of the icon in the action sheet button
 $action-sheet-md-icon-margin-top:                       0 !default;

core/src/components/action-sheet/action-sheet.scss

@@ -126,10 +126,7 @@
   justify-content: flex-end;
 
   height: 100%;
-
-  /* Fallback for browsers that do not support dvh */
   max-height: 100vh;
-  max-height: 100dvh;
 }
 
 .action-sheet-group {

core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts

@@ -86,37 +86,3 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
     });
   });
 });
-
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('action-sheet: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-
-        <ion-action-sheet></ion-action-sheet>
-
-        <script>
-          const actionSheet = document.querySelector('ion-action-sheet');
-          actionSheet.header = 'Header';
-          actionSheet.subHeader = 'Sub Header';
-          actionSheet.buttons = ['Ok', { role: 'cancel', text: 'Cancel' }];
-        </script>
-      `,
-        config
-      );
-
-      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
-      const actionSheet = page.locator('ion-action-sheet');
-
-      await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.present());
-      await ionActionSheetDidPresent.next();
-
-      await expect(actionSheet).toHaveScreenshot(screenshot(`action-sheet-scale`));
-    });
-  });
-});

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

@@ -255,19 +255,13 @@
 }
 
 .alert-button {
-  /**
-   * This padding ensures that alerts
-   * with multiple buttons render on separate lines
-   * so the text does not run up against the edge of the button.
-   */
-  @include padding-horizontal($alert-ios-button-padding);
   @include margin($alert-ios-button-margin);
   @include border-radius($alert-ios-button-border-radius);
 
   flex: $alert-ios-button-flex;
 
   min-width: $alert-ios-button-min-width;
-  height: $alert-ios-button-height;
+  height: $alert-ios-button-min-height;
 
   border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
   border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;

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

@@ -6,10 +6,10 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the alert
-$alert-ios-font-size:                                   dynamic-font-min(1, 14px) !default;
+$alert-ios-font-size:                                   14px !default;
 
 /// @prop - Max width of the alert
-$alert-ios-max-width:                                   dynamic-font-clamp(1, 270px, 1.2) !default;
+$alert-ios-max-width:                                   270px !default;
 
 /// @prop - Border radius of the alert
 $alert-ios-border-radius:                               13px !default;
@@ -48,13 +48,13 @@ $alert-ios-title-color:                                 $text-color !default;
 $alert-ios-title-margin-top:                            8px !default;
 
 /// @prop - Font size of the alert title
-$alert-ios-title-font-size:                             dynamic-font-min(1, 17px) !default;
+$alert-ios-title-font-size:                             17px !default;
 
 /// @prop - Font weight of the alert title
 $alert-ios-title-font-weight:                           600 !default;
 
 /// @prop - Font size of the alert sub title
-$alert-ios-sub-title-font-size:                         dynamic-font-min(1, 14px) !default;
+$alert-ios-sub-title-font-size:                         14px !default;
 
 /// @prop - Text color of the alert sub title
 $alert-ios-sub-title-text-color:                        $text-color-step-400 !default;
@@ -72,7 +72,7 @@ $alert-ios-message-padding-bottom:                      21px !default;
 $alert-ios-message-padding-start:                       $alert-ios-message-padding-end !default;
 
 /// @prop - Font size of the alert message
-$alert-ios-message-font-size:                           dynamic-font-min(1, 13px) !default;
+$alert-ios-message-font-size:                           13px !default;
 
 /// @prop - Text align of the alert message
 $alert-ios-message-text-align:                          center !default;
@@ -137,23 +137,11 @@ $alert-ios-button-margin:                               0 !default;
 /// @prop - Min width of the alert button
 $alert-ios-button-min-width:                            50% !default;
 
-/// @prop - Height of the alert button
-/**
- * We want the height of the button to
- * scale with the text so the next never runs
- * into the edge of the button. We change the height
- * instead of adding padding because we would need to offset
- * the height the padding and the border. Since the border uses
- * a hairline (<1px) width, this will cause subpixel rendering
- * differences across browsers.
- */
-$alert-ios-button-height:                           dynamic-font-min(1, 44px) !default;
-
-/// @prop - Padding of the alert button
-$alert-ios-button-padding: 8px !default;
+/// @prop - Minimum height of the alert button
+$alert-ios-button-min-height:                           44px !default;
 
 /// @prop - Font size of the alert button
-$alert-ios-button-font-size:                            dynamic-font-min(1, 17px) !default;
+$alert-ios-button-font-size:                            17px !default;
 
 /// @prop - Color of the text in the alert button
 $alert-ios-button-text-color:                           ion-color(primary, base) !default;
@@ -264,10 +252,10 @@ $alert-ios-checkbox-margin-bottom:                      10px !default;
 $alert-ios-checkbox-margin-start:                       16px !default;
 
 /// @prop - Size of the checkbox in the alert
-$alert-ios-checkbox-size:                               dynamic-font-max(24px, 2.75) !default;
+$alert-ios-checkbox-size:                               24px !default;
 
 /// @prop - Border width of the checkbox in the alert
-$alert-ios-checkbox-border-width:                       dynamic-font(1px) !default;
+$alert-ios-checkbox-border-width:                       1px !default;
 
 /// @prop - Border style of the checkbox in the alert
 $alert-ios-checkbox-border-style:                       solid !default;
@@ -288,16 +276,16 @@ $alert-ios-checkbox-background-color-off:               $item-ios-background !de
 $alert-ios-checkbox-background-color-on:                ion-color(primary, base) !default;
 
 /// @prop - Top of the icon in the checkbox alert
-$alert-ios-checkbox-icon-top:                           calc($alert-ios-checkbox-size / 6) !default;
+$alert-ios-checkbox-icon-top:                           math.div($alert-ios-checkbox-size, 6) !default;
 
 /// @prop - Start of the icon in the checkbox alert
-$alert-ios-checkbox-icon-start:                         calc($alert-ios-checkbox-size / 3 + 1px) !default;
+$alert-ios-checkbox-icon-start:                         math.div($alert-ios-checkbox-size, 3) + 1px !default;
 
 /// @prop - Width of the icon in the checkbox alert
-$alert-ios-checkbox-icon-width:                         calc($alert-ios-checkbox-size / 6 + 1px) !default;
+$alert-ios-checkbox-icon-width:                         math.div($alert-ios-checkbox-size, 6) + 1px !default;
 
 /// @prop - Height of the icon in the checkbox alert
-$alert-ios-checkbox-icon-height:                        calc($alert-ios-checkbox-size * 0.5) !default;
+$alert-ios-checkbox-icon-height:                        $alert-ios-checkbox-size * 0.5 !default;
 
 /// @prop - Border width of the icon in the checkbox alert
 $alert-ios-checkbox-icon-border-width:                  $alert-ios-checkbox-border-width !default;

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

@@ -192,10 +192,6 @@
 
   flex: 1;
 
-  // Required for the checkbox icon to stay on the screen without
-  // being squished when the font size scales up.
-  width: calc(100% - $alert-md-checkbox-label-padding-start);
-
   color: $alert-md-checkbox-label-text-color;
 
   font-size: $alert-md-checkbox-label-font-size;

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

@@ -5,7 +5,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the alert
-$alert-md-font-size:                          dynamic-font(14px) !default;
+$alert-md-font-size:                          14px !default;
 
 /// @prop - Max width of the alert
 $alert-md-max-width:                          280px !default;
@@ -38,13 +38,13 @@ $alert-md-head-text-align:                    start !default;
 $alert-md-title-color:                        $text-color !default;
 
 /// @prop - Font size of the alert title
-$alert-md-title-font-size:                    dynamic-font(20px) !default;
+$alert-md-title-font-size:                    20px !default;
 
 /// @prop - Font weight of the alert title
 $alert-md-title-font-weight:                  500 !default;
 
 /// @prop - Font size of the alert sub title
-$alert-md-sub-title-font-size:                dynamic-font(16px) !default;
+$alert-md-sub-title-font-size:                16px !default;
 
 /// @prop - Text color of the alert sub title
 $alert-md-sub-title-text-color:               $text-color !default;
@@ -62,7 +62,7 @@ $alert-md-message-padding-bottom:             $alert-md-message-padding-top !def
 $alert-md-message-padding-start:              $alert-md-message-padding-end !default;
 
 /// @prop - Font size of the alert message
-$alert-md-message-font-size:                  dynamic-font(16px) !default;
+$alert-md-message-font-size:                  16px !default;
 
 /// @prop - Text color of the alert message
 $alert-md-message-text-color:                 $text-color-step-450 !default;
@@ -239,7 +239,7 @@ $alert-md-radio-label-padding-bottom:         $alert-md-radio-label-padding-top
 $alert-md-radio-label-padding-start:          $alert-md-radio-label-padding-end + 26px !default;
 
 /// @prop - Font size of the label for the radio alert
-$alert-md-radio-label-font-size:              dynamic-font(16px) !default;
+$alert-md-radio-label-font-size:              16px !default;
 
 /// @prop - Text color of the label for the radio alert
 $alert-md-radio-label-text-color:             $text-color-step-150 !default;
@@ -314,7 +314,7 @@ $alert-md-checkbox-label-padding-start:       $alert-md-checkbox-label-padding-e
 $alert-md-checkbox-label-text-color:          $text-color-step-150 !default;
 
 /// @prop - Font size of the label for the checkbox in the alert
-$alert-md-checkbox-label-font-size:           dynamic-font(16px) !default;
+$alert-md-checkbox-label-font-size:           16px !default;
 
 /// @prop - Height of the tappable inputs in the checkbox alert
 $alert-md-tappable-height:                    $item-md-min-height !default;

core/src/components/alert/alert.tsx

@@ -228,15 +228,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
   onKeydown(ev: any) {
     const inputTypes = new Set(this.processedInputs.map((i) => i.type));
 
-    /**
-     * Based on keyboard navigation requirements, the
-     * checkbox should not respond to the enter keydown event.
-     */
-    if (inputTypes.has('checkbox') && ev.key === 'Enter') {
-      ev.preventDefault();
-      return;
-    }
-
     // The only inputs we want to navigate between using arrow keys are the radios
     // ignore the keydown event if it is not on a radio button
     if (

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

@@ -10,10 +10,10 @@ $alert-min-width:                 250px !default;
 $alert-max-height:                90% !default;
 
 /// @prop - Line height of the alert button
-$alert-button-line-height:        dynamic-font(20px) !default;
+$alert-button-line-height:        20px !default;
 
 /// @prop - Font size of the alert button
-$alert-button-font-size:          dynamic-font(14px) !default;
+$alert-button-font-size:          14px !default;
 
 /// @prop - Minimum height of a textarea in the alert
 $alert-input-min-height:          37px !default;

core/src/components/alert/test/a11y/alert.e2e.ts

@@ -76,158 +76,5 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
       await expect(alertButton).toHaveAttribute('aria-labelledby', 'close-label');
       await expect(alertButton).toHaveAttribute('aria-label', 'close button');
     });
-
-    test('should not toggle the checkbox when pressing the Enter key', async ({ page }) => {
-      const didPresent = await page.spyOnEvent('ionAlertDidPresent');
-
-      const button = page.locator('#checkbox');
-      await button.click();
-
-      await didPresent.next();
-
-      const alertCheckbox = page.locator('ion-alert .alert-checkbox');
-      const ariaChecked = await alertCheckbox.getAttribute('aria-checked');
-
-      await expect(alertCheckbox).toHaveAttribute('aria-checked', ariaChecked!);
-
-      await alertCheckbox.press('Enter');
-      await expect(alertCheckbox).toHaveAttribute('aria-checked', ariaChecked!);
-    });
-  });
-});
-
-/**
- * This behavior does not vary across directions
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('alert: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-
-
-        <ion-alert header="Header" sub-header="Sub Header" message="Message"></ion-alert>
-
-        <script>
-          const alert = document.querySelector('ion-alert');
-          alert.buttons = ['Ok', 'Cancel'];
-        </script>
-      `,
-        config
-      );
-
-      const alert = page.locator('ion-alert');
-      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
-
-      await alert.evaluate((el: HTMLIonAlertElement) => el.present());
-      await ionAlertDidPresent.next();
-
-      await expect(page).toHaveScreenshot(screenshot(`alert-scale`));
-    });
-    test('should scale text on larger font sizes with checkboxes', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-
-
-        <ion-alert header="Header" sub-header="Sub Header" message="Message"></ion-alert>
-
-        <script>
-          const alert = document.querySelector('ion-alert');
-          alert.inputs = [
-            { type: 'checkbox', value: 'a', label: 'Checkbox A', checked: true },
-            { type: 'checkbox', value: 'b', label: 'Checkbox B' },
-            { type: 'checkbox', value: 'c', label: 'Checkbox C' },
-            { type: 'checkbox', value: 'd', label: 'Checkbox D' },
-          ];
-          alert.buttons = ['Ok', 'Cancel'];
-        </script>
-      `,
-        config
-      );
-
-      const alert = page.locator('ion-alert');
-      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
-
-      await alert.evaluate((el: HTMLIonAlertElement) => el.present());
-      await ionAlertDidPresent.next();
-
-      await expect(page).toHaveScreenshot(screenshot(`alert-checkbox-scale`));
-    });
-    test('should scale text on larger font sizes with radios', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-
-
-        <ion-alert header="Header" sub-header="Sub Header" message="Message"></ion-alert>
-
-        <script>
-          const alert = document.querySelector('ion-alert');
-          alert.inputs = [
-            { type: 'radio', value: 'a', label: 'Radio A', checked: true },
-            { type: 'radio', value: 'b', label: 'Radio B' },
-            { type: 'radio', value: 'c', label: 'Radio C' },
-            { type: 'radio', value: 'd', label: 'Radio D' },
-          ];
-          alert.buttons = ['Ok', 'Cancel'];
-        </script>
-      `,
-        config
-      );
-
-      const alert = page.locator('ion-alert');
-      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
-
-      await alert.evaluate((el: HTMLIonAlertElement) => el.present());
-      await ionAlertDidPresent.next();
-
-      await expect(page).toHaveScreenshot(screenshot(`alert-radio-scale`));
-    });
-    test('should scale text on larger font sizes with text fields', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-
-
-        <ion-alert header="Header" sub-header="Sub Header" message="Message"></ion-alert>
-
-        <script>
-          const alert = document.querySelector('ion-alert');
-          alert.inputs = [
-            { type: 'text', value: 'My Input', label: 'Input' },
-            { type: 'textarea', value: 'My Textarea', label: 'Textarea' },
-          ];
-          alert.buttons = ['Ok', 'Cancel'];
-        </script>
-      `,
-        config
-      );
-
-      const alert = page.locator('ion-alert');
-      const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
-
-      await alert.evaluate((el: HTMLIonAlertElement) => el.present());
-      await ionAlertDidPresent.next();
-
-      await expect(page).toHaveScreenshot(screenshot(`alert-text-fields-scale`));
-    });
   });
 });

core/src/components/alert/test/a11y/index.html

@@ -25,7 +25,6 @@
       <ion-button id="noMessage" expand="block" onclick="presentNoMessage()">No Message</ion-button>
       <ion-button id="customAria" expand="block" onclick="presentCustomAria()">Custom Aria</ion-button>
       <ion-button id="ariaLabelButton" expand="block" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
-      <ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
     </main>
 
     <script>
@@ -95,21 +94,6 @@
           ],
         });
       }
-
-      function presentAlertCheckbox() {
-        openAlert({
-          header: 'Checkbox',
-          inputs: [
-            {
-              type: 'checkbox',
-              label: 'Checkbox 1',
-              value: 'value1',
-              checked: true,
-            },
-          ],
-          buttons: ['OK'],
-        });
-      }
     </script>
   </body>
 </html>

core/src/components/back-button/back-button.ios.scss

@@ -13,26 +13,10 @@
   --color: #{$back-button-ios-color};
   --icon-margin-end: 1px;
   --icon-margin-start: -4px;
-  /**
-   * The icon should be sized relative
-   * to the size of the text which is
-   * why we use em here instead of rem.
-   * This allows developers to override
-   * the text font size while ensuring that
-   * the icon is sized relative to that.
-   */
   --icon-font-size: 1.6em;
   --min-height: 32px;
 
-  /**
-   * Main content should be prioritized over the back
-   * button which is why a maximum font size is applied.
-   * Also, we want the text to remain readable
-   * so a minimum font size is applied.
-   * Using 1.294 instead of 1.3 aligns the text
-   * with the icon a bit nicer in Firefox.
-   */
-  font-size: dynamic-font-clamp(1, 17px, 1.294);
+  font-size: 17px;
 }
 
 .button-native {

core/src/components/back-button/back-button.md.scss

@@ -13,14 +13,14 @@
   --color: #{$back-button-md-color};
   --icon-margin-end: 0;
   --icon-margin-start: 0;
-  --icon-font-size: #{dynamic-font(24px)};
+  --icon-font-size: 24px;
   --icon-font-weight: normal;
   --min-height: 32px;
   --min-width: 44px;
   --padding-start: 12px;
   --padding-end: 12px;
 
-  font-size: dynamic-font(14px);
+  font-size: 14px;
   font-weight: 500;
 
   text-transform: uppercase;
@@ -30,14 +30,7 @@
   --border-radius: 50%;
 
   min-width: 48px;
-  min-height: 48px;
-
-  /**
-   * This allows the icon only button to
-   * keep its circular shape even when the
-   * text scales up.
-   */
-  aspect-ratio: 1 / 1;
+  height: 48px;
 }
 
 .button-native {

core/src/components/back-button/test/a11y/back-button.e2e.ts

@@ -1,29 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('back-button: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-back-button default-href="/" text="Back"></ion-back-button>
-          </ion-buttons>
-        </ion-toolbar>
-      `,
-        config
-      );
-
-      const backButton = page.locator('ion-back-button');
-
-      await expect(backButton).toHaveScreenshot(screenshot(`back-button-scale`));
-    });
-  });
-});

core/src/components/badge/badge.ios.scss

@@ -6,13 +6,4 @@
 
 :host {
   @include border-radius($badge-ios-border-radius);
-
-  /**
-   * "-apple-system-body" on iOS never goes smaller than
-   * 14px according to https://developer.apple.com/design/human-interface-guidelines/typography#Specifications.
-   * However, we still keep the max() usage here for consistency
-   * with other components and in case "-apple-system-body" does
-   * go smaller than 14px in the future.
-   */
-  font-size: dynamic-font-min(1, $badge-baseline-font-size);
 }

core/src/components/badge/badge.vars.scss

@@ -18,11 +18,8 @@ $badge-padding-start:             $badge-padding-end !default;
 /// @prop - Minimum width of the badge
 $badge-min-width:                 10px !default;
 
-/// @prop - Baseline font size of the badge
-$badge-baseline-font-size: 13px !default;
-
 /// @prop - Font size of the badge
-$badge-font-size:                 dynamic-font($badge-baseline-font-size) !default;
+$badge-font-size:                 13px !default;
 
 /// @prop - Font weight of the badge
 $badge-font-weight:               bold !default;

core/src/components/badge/test/a11y/badge.e2e.ts

@@ -1,25 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('badge: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-
-        <ion-badge>123</ion-badge>
-      `,
-        config
-      );
-
-      const badge = page.locator('ion-badge');
-
-      await expect(badge).toHaveScreenshot(screenshot(`badge-scale`));
-    });
-  });
-});

core/src/components/breadcrumb/breadcrumb.ios.scss

@@ -10,14 +10,6 @@
   --color-hover: #{$breadcrumb-ios-color-active};
   --color-focused: var(--color-active);
   --background-focused: #{$breadcrumb-ios-background-focused};
-
-  /**
-   * Main content should be prioritized
-   * on iOS, so we set max font size for breadcrumbs.
-   * Breadcrumbs can be placed in the content too, so
-   * we add a min font size to keep the text legible.
-   */
-  font-size: dynamic-font-clamp(1, $breadcrumb-baseline-font-size, 1.375);
 }
 
 :host(.breadcrumb-active) {
@@ -66,7 +58,7 @@
 ::slotted(ion-icon) {
   color: $breadcrumb-ios-icon-color;
 
-  font-size: dynamic-font-max(18px, 1.2);
+  font-size: 18px;
 }
 
 ::slotted(ion-icon[slot="start"]) {
@@ -100,7 +92,3 @@
 .breadcrumbs-collapsed-indicator:focus {
   background: $breadcrumb-ios-indicator-background-focused;
 }
-
-.breadcrumbs-collapsed-indicator ion-icon {
-  font-size: dynamic-font-max(22px, 1);
-}

core/src/components/breadcrumb/breadcrumb.md.scss

@@ -53,7 +53,7 @@
 ::slotted(ion-icon) {
   color: $breadcrumb-md-icon-color;
 
-  font-size: dynamic-font(18px);
+  font-size: 18px;
 }
 
 ::slotted(ion-icon[slot="start"]) {

core/src/components/breadcrumb/breadcrumb.scss

@@ -156,5 +156,5 @@
 .breadcrumbs-collapsed-indicator ion-icon {
   margin-top: 1px;
 
-  font-size: dynamic-font(22px);
+  font-size: 22px;
 }

core/src/components/breadcrumb/breadcrumb.vars.scss

@@ -6,10 +6,8 @@
 /// @prop - Font weight of the breadcrumb
 $breadcrumb-font-weight:         400 !default;
 
-$breadcrumb-baseline-font-size: 16px !default;
-
 /// @prop - Font size of the breadcrumb
-$breadcrumb-font-size:           dynamic-font($breadcrumb-baseline-font-size) !default;
+$breadcrumb-font-size:           16px !default;
 
 /// @prop - Color of the breadcrumb separator
 $breadcrumb-separator-color:     var(--ion-color-step-550, #73849a) !default;

core/src/components/breadcrumbs/test/a11y/breadcrumbs.e2e.ts

@@ -12,30 +12,3 @@ configs().forEach(({ config, title }) => {
     });
   });
 });
-
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('breadcrumbs: font scaling'), () => {
-    test('should scale text on larger font sizes', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 36px;
-          }
-        </style>
-
-        <ion-breadcrumbs max-items="2" items-before-collapse="1">
-          <ion-breadcrumb>Home</ion-breadcrumb>
-          <ion-breadcrumb>Electronics</ion-breadcrumb>
-          <ion-breadcrumb>Photography</ion-breadcrumb>
-        </ion-breadcrumbs>
-      `,
-        config
-      );
-
-      const breadcrumbs = page.locator('ion-breadcrumbs');
-
-      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-scale`));
-    });
-  });
-});

core/src/components/button/button.ios.scss

@@ -24,6 +24,20 @@
   letter-spacing: #{$button-ios-letter-spacing};
 }
 
+/**
+ * The default buttons in a toolbar
+ * have a different font size/weight
+ * than buttons outside of a toolbar on iOS.
+ * However, we still want the "size"/"strong"
+ * properties to be usable in a toolbar, so we add
+ * the .in-buttons selector such that we
+ * can add the different font size/weight in a toolbar
+ * but still let "size"/"strong" override it.
+ */
+:host(.in-buttons) {
+  font-size: #{$toolbar-ios-button-font-size};
+  font-weight: 400;
+}
 
 // iOS Solid Button
 // --------------------------------------------------
@@ -68,25 +82,6 @@
 }
 
 
-// iOS Toolbar Buttons
-// --------------------------------------------------
-
-/**
- * The default buttons in a toolbar
- * have a different font size/weight
- * than buttons outside of a toolbar on iOS.
- * However, we still want the "size"/"strong"
- * properties to be usable in a toolbar, so we add
- * the .in-buttons selector such that we
- * can add the different font size/weight in a toolbar
- * but still let "size"/"strong" override it.
- */
- :host(.in-buttons) {
-   font-size: #{$toolbar-ios-button-font-size};
-   font-weight: 400;
- }
-
-
 // iOS Button Sizes
 // --------------------------------------------------
 
@@ -132,7 +127,7 @@
 }
 
 
-// iOS Strong Button
+// iOS strong Button
 // --------------------------------------------------
 
 :host(.button-strong) {

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

@@ -34,9 +34,7 @@ $button-ios-min-height:                               3.1em !default;
 $button-ios-border-radius:                            14px !default;
 
 /// @prop - Font size of the button text
-/// The maximum font size is calculated by taking the default font size
-/// and multiplying it by 3, since 310% of the default is the maximum
-$button-ios-font-size:                                dynamic-font-max(16px, 3) !default;
+$button-ios-font-size:                                16px !default;
 
 /// @prop - Font weight of the button text
 $button-ios-font-weight:                              500 !default;
@@ -85,9 +83,7 @@ $button-ios-large-min-height:                         3.1em !default;
 $button-ios-large-border-radius:                      16px !default;
 
 /// @prop - Font size of the large button
-/// The maximum font size is calculated by taking the default font size
-/// and multiplying it by 3, since 310% of the default is the maximum
-$button-ios-large-font-size:                          dynamic-font-max(20px, 3) !default;
+$button-ios-large-font-size:                          20px !default;
 
 
 // iOS Small Button
@@ -112,9 +108,7 @@ $button-ios-small-min-height:                         2.1em !default;
 $button-ios-small-border-radius:                      6px !default;
 
 /// @prop - Font size of the small button
-/// The maximum font size is calculated by taking the default font size
-/// and multiplying it by 3, since 310% of the default is the maximum
-$button-ios-small-font-size:                          dynamic-font-max(13px, 3) !default;
+$button-ios-small-font-size:                          13px !default;
 
 
 // iOS Outline Button
@@ -157,15 +151,13 @@ $button-ios-outline-background-color-focused:         ion-color(primary, base, $
 // --------------------------------------------------
 
 /// @prop - Font size of the clear button
-/// The maximum font size is calculated by taking the default font size
-/// and multiplying it by 3, since 310% of the default is the maximum
-$button-ios-clear-font-size:                          dynamic-font-max(17px, 3) !default;
+$button-ios-clear-font-size:                          17px !default;
 
 /// @prop - Font weight of the clear button
 $button-ios-clear-font-weight:                        normal !default;
 
 /// @prop - Letter spacing of the button
-$button-ios-letter-spacing:                           0 !default;
+$button-ios-letter-spacing:                     0 !default;
 
 /// @prop - Border color of the clear button
 $button-ios-clear-border-color:                       transparent !default;

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

@@ -34,7 +34,7 @@ $button-md-min-height:                                  36px !default;
 $button-md-border-radius:                               4px !default;
 
 /// @prop - Font size of the button text
-$button-md-font-size:                                   dynamic-font(14px) !default;
+$button-md-font-size:                                   14px !default;
 
 /// @prop - Font weight of the button text
 $button-md-font-weight:                                 500 !default;
@@ -78,7 +78,7 @@ $button-md-large-padding-start:                         $button-md-large-padding
 $button-md-large-min-height:                            2.8em !default;
 
 /// @prop - Font size of the large button
-$button-md-large-font-size:                             dynamic-font(20px) !default;
+$button-md-large-font-size:                             20px !default;
 
 
 // Material Design Small Button
@@ -100,7 +100,7 @@ $button-md-small-padding-start:                         $button-md-small-padding
 $button-md-small-min-height:                            2.1em !default;
 
 /// @prop - Font size of the small button
-$button-md-small-font-size:                             dynamic-font(13px) !default;
+$button-md-small-font-size:                             13px !default;
 
 
 // Material Design Outline Button

core/src/components/button/test/a11y/button.e2e.ts

@@ -1,82 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('button: font scaling'), () => {
-    test('should scale default button text on larger font sizes', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-button>Default</ion-button>
-      `,
-        config
-      );
-
-      const button = page.locator('ion-button');
-
-      await expect(button).toHaveScreenshot(screenshot(`button-default-scale`));
-    });
-
-    test('should scale clear button text on larger font sizes', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-button fill="clear">Clear</ion-button>
-      `,
-        config
-      );
-
-      const button = page.locator('ion-button');
-
-      await expect(button).toHaveScreenshot(screenshot(`button-clear-scale`));
-    });
-
-    test('should scale small button text on larger font sizes', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-button size="small">Small</ion-button>
-      `,
-        config
-      );
-
-      const button = page.locator('ion-button');
-
-      await expect(button).toHaveScreenshot(screenshot(`button-small-scale`));
-    });
-
-    test('should scale large button text on larger font sizes', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-button size="large">Large</ion-button>
-      `,
-        config
-      );
-
-      const button = page.locator('ion-button');
-
-      await expect(button).toHaveScreenshot(screenshot(`button-large-scale`));
-    });
-  });
-});