@ionic/core 7.3.4-dev.11695051069.10d92d60 → 7.3.4-dev.11695238743.17597cce

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (448) hide show
  1. package/components/action-sheet.js +2 -2
  2. package/components/button.js +2 -2
  3. package/components/buttons.js +2 -2
  4. package/components/icon.js +5 -22
  5. package/components/index7.js +1 -1
  6. package/components/ion-back-button.js +2 -2
  7. package/components/ion-badge.js +2 -2
  8. package/components/ion-breadcrumb.js +2 -2
  9. package/components/ion-card-content.js +2 -2
  10. package/components/ion-card-subtitle.js +2 -2
  11. package/components/ion-card-title.js +2 -2
  12. package/components/ion-card.js +2 -2
  13. package/components/ion-chip.js +8 -3
  14. package/components/ion-datetime-button.js +2 -2
  15. package/components/ion-datetime.js +3 -3
  16. package/components/ion-header.js +1 -1
  17. package/components/ion-input.js +2 -2
  18. package/components/ion-item-divider.js +2 -2
  19. package/components/ion-item-option.js +2 -2
  20. package/components/ion-item-options.js +2 -2
  21. package/components/ion-loading.js +2 -2
  22. package/components/ion-menu-button.js +2 -2
  23. package/components/ion-range.js +2 -2
  24. package/components/ion-reorder.js +2 -2
  25. package/components/ion-searchbar.js +9 -3
  26. package/components/ion-textarea.js +2 -2
  27. package/components/ion-title.js +2 -2
  28. package/components/ion-toast.js +2 -2
  29. package/components/ion-toolbar.js +1 -1
  30. package/components/ios.transition.js +4 -4
  31. package/components/item.js +2 -2
  32. package/components/label.js +2 -2
  33. package/components/list-header.js +2 -2
  34. package/components/note.js +2 -2
  35. package/css/core.css +100 -0
  36. package/css/core.css.map +1 -1
  37. package/css/display.css +33 -0
  38. package/css/display.css.map +1 -1
  39. package/css/float-elements.css +33 -0
  40. package/css/float-elements.css.map +1 -1
  41. package/css/global.bundle.css +84 -6
  42. package/css/global.bundle.css.map +1 -1
  43. package/css/ionic-swiper.css +33 -0
  44. package/css/ionic-swiper.css.map +1 -1
  45. package/css/ionic.bundle.css +1 -1
  46. package/css/ionic.bundle.css.map +1 -1
  47. package/css/padding.css +33 -0
  48. package/css/padding.css.map +1 -1
  49. package/css/structure.css +33 -0
  50. package/css/structure.css.map +1 -1
  51. package/css/text-alignment.css +33 -0
  52. package/css/text-alignment.css.map +1 -1
  53. package/css/text-transformation.css +33 -0
  54. package/css/text-transformation.css.map +1 -1
  55. package/css/typography.css +51 -6
  56. package/css/typography.css.map +1 -1
  57. package/css/utils.bundle.css +165 -0
  58. package/css/utils.bundle.css.map +1 -1
  59. package/dist/cjs/{index-8568bedb.js → index-552c4df4.js} +2 -2
  60. package/dist/cjs/{index-c3b215ee.js → index-d8d1fc0b.js} +1 -1
  61. package/dist/cjs/index.cjs.js +3 -3
  62. package/dist/cjs/ion-accordion_2.cjs.entry.js +1 -1
  63. package/dist/cjs/ion-action-sheet.cjs.entry.js +2 -2
  64. package/dist/cjs/ion-app_8.cjs.entry.js +7 -7
  65. package/dist/cjs/ion-avatar_3.cjs.entry.js +2 -2
  66. package/dist/cjs/ion-back-button.cjs.entry.js +3 -3
  67. package/dist/cjs/ion-breadcrumb_2.cjs.entry.js +3 -3
  68. package/dist/cjs/ion-button_2.cjs.entry.js +7 -24
  69. package/dist/cjs/ion-card_5.cjs.entry.js +8 -8
  70. package/dist/cjs/ion-chip.cjs.entry.js +7 -2
  71. package/dist/cjs/ion-datetime-button.cjs.entry.js +2 -2
  72. package/dist/cjs/ion-datetime_3.cjs.entry.js +4 -4
  73. package/dist/cjs/ion-fab_3.cjs.entry.js +1 -1
  74. package/dist/cjs/ion-input.cjs.entry.js +3 -3
  75. package/dist/cjs/ion-item-option_3.cjs.entry.js +4 -4
  76. package/dist/cjs/ion-item_8.cjs.entry.js +11 -11
  77. package/dist/cjs/ion-loading.cjs.entry.js +2 -2
  78. package/dist/cjs/ion-menu_3.cjs.entry.js +3 -3
  79. package/dist/cjs/ion-modal.cjs.entry.js +1 -1
  80. package/dist/cjs/ion-nav_2.cjs.entry.js +1 -1
  81. package/dist/cjs/ion-popover.cjs.entry.js +1 -1
  82. package/dist/cjs/ion-range.cjs.entry.js +2 -2
  83. package/dist/cjs/ion-refresher_2.cjs.entry.js +1 -1
  84. package/dist/cjs/ion-reorder_2.cjs.entry.js +3 -3
  85. package/dist/cjs/ion-searchbar.cjs.entry.js +10 -4
  86. package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
  87. package/dist/cjs/ion-textarea.cjs.entry.js +2 -2
  88. package/dist/cjs/ion-toast.cjs.entry.js +2 -2
  89. package/dist/cjs/ion-toggle.cjs.entry.js +1 -1
  90. package/dist/cjs/ionic.cjs.js +2 -2
  91. package/dist/cjs/{ios.transition-f7c78d7c.js → ios.transition-b53fc1d5.js} +5 -5
  92. package/dist/cjs/loader.cjs.js +1 -1
  93. package/dist/cjs/{md.transition-65dc7dce.js → md.transition-d96426d5.js} +1 -1
  94. package/dist/collection/collection-manifest.json +2 -2
  95. package/dist/collection/components/accordion/accordion.ios.css +66 -0
  96. package/dist/collection/components/accordion/accordion.md.css +33 -0
  97. package/dist/collection/components/accordion-group/accordion-group.ios.css +66 -0
  98. package/dist/collection/components/accordion-group/accordion-group.md.css +99 -0
  99. package/dist/collection/components/action-sheet/action-sheet.ios.css +80 -12
  100. package/dist/collection/components/action-sheet/action-sheet.md.css +76 -8
  101. package/dist/collection/components/action-sheet/test/a11y/action-sheet.e2e.js +27 -0
  102. package/dist/collection/components/alert/alert.ios.css +99 -0
  103. package/dist/collection/components/alert/alert.md.css +99 -0
  104. package/dist/collection/components/avatar/avatar.ios.css +66 -0
  105. package/dist/collection/components/avatar/avatar.md.css +66 -0
  106. package/dist/collection/components/back-button/back-button.ios.css +83 -1
  107. package/dist/collection/components/back-button/back-button.md.css +75 -3
  108. package/dist/collection/components/back-button/test/a11y/back-button.e2e.js +26 -0
  109. package/dist/collection/components/backdrop/backdrop.ios.css +66 -0
  110. package/dist/collection/components/backdrop/backdrop.md.css +66 -0
  111. package/dist/collection/components/badge/badge.ios.css +75 -1
  112. package/dist/collection/components/badge/badge.md.css +67 -1
  113. package/dist/collection/components/badge/test/a11y/badge.e2e.js +22 -0
  114. package/dist/collection/components/breadcrumb/breadcrumb.ios.css +80 -3
  115. package/dist/collection/components/breadcrumb/breadcrumb.md.css +69 -3
  116. package/dist/collection/components/breadcrumbs/breadcrumbs.ios.css +33 -0
  117. package/dist/collection/components/breadcrumbs/breadcrumbs.md.css +33 -0
  118. package/dist/collection/components/breadcrumbs/test/a11y/breadcrumbs.e2e.js +21 -0
  119. package/dist/collection/components/button/button.ios.css +118 -19
  120. package/dist/collection/components/button/button.md.css +69 -3
  121. package/dist/collection/components/button/test/a11y/button.e2e.js +61 -0
  122. package/dist/collection/components/buttons/buttons.ios.css +102 -3
  123. package/dist/collection/components/buttons/buttons.md.css +101 -2
  124. package/dist/collection/components/buttons/test/a11y/buttons.e2e.js +74 -0
  125. package/dist/collection/components/card/card.ios.css +67 -1
  126. package/dist/collection/components/card/card.md.css +67 -1
  127. package/dist/collection/components/card/test/a11y/card.e2e.js +31 -0
  128. package/dist/collection/components/card-content/card-content.ios.css +71 -5
  129. package/dist/collection/components/card-content/card-content.md.css +71 -5
  130. package/dist/collection/components/card-header/card-header.ios.css +66 -0
  131. package/dist/collection/components/card-header/card-header.md.css +66 -0
  132. package/dist/collection/components/card-subtitle/card-subtitle.ios.css +67 -1
  133. package/dist/collection/components/card-subtitle/card-subtitle.md.css +67 -1
  134. package/dist/collection/components/card-title/card-title.ios.css +67 -1
  135. package/dist/collection/components/card-title/card-title.md.css +67 -1
  136. package/dist/collection/components/checkbox/checkbox.ios.css +99 -0
  137. package/dist/collection/components/checkbox/checkbox.md.css +99 -0
  138. package/dist/collection/components/chip/chip.ios.css +190 -0
  139. package/dist/collection/components/chip/chip.js +4 -2
  140. package/dist/collection/components/chip/{chip.css → chip.md.css} +43 -7
  141. package/dist/collection/components/chip/test/a11y/chip.e2e.js +58 -0
  142. package/dist/collection/components/col/col.css +66 -0
  143. package/dist/collection/components/content/content.css +33 -0
  144. package/dist/collection/components/datetime/datetime.ios.css +196 -5
  145. package/dist/collection/components/datetime/datetime.js +1 -1
  146. package/dist/collection/components/datetime/datetime.md.css +96 -4
  147. package/dist/collection/components/datetime/test/a11y/datetime.e2e.js +28 -0
  148. package/dist/collection/components/datetime-button/datetime-button.css +36 -2
  149. package/dist/collection/components/datetime-button/test/a11y/datetime-button.e2e.js +38 -0
  150. package/dist/collection/components/fab/fab.css +66 -0
  151. package/dist/collection/components/fab-button/fab-button.ios.css +66 -0
  152. package/dist/collection/components/fab-button/fab-button.md.css +66 -0
  153. package/dist/collection/components/fab-list/fab-list.css +66 -0
  154. package/dist/collection/components/footer/footer.ios.css +66 -0
  155. package/dist/collection/components/footer/footer.md.css +66 -0
  156. package/dist/collection/components/grid/grid.css +66 -0
  157. package/dist/collection/components/header/header.ios.css +71 -2
  158. package/dist/collection/components/header/header.md.css +66 -0
  159. package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.ios.css +66 -0
  160. package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.md.css +66 -0
  161. package/dist/collection/components/input/input.ios.css +100 -1
  162. package/dist/collection/components/input/input.md.css +199 -1
  163. package/dist/collection/components/input/test/a11y/input.e2e.js +15 -1
  164. package/dist/collection/components/item/item.ios.css +70 -4
  165. package/dist/collection/components/item/item.md.css +138 -6
  166. package/dist/collection/components/item/test/a11y/item.e2e.js +116 -1
  167. package/dist/collection/components/item-divider/item-divider.ios.css +101 -9
  168. package/dist/collection/components/item-divider/item-divider.md.css +103 -11
  169. package/dist/collection/components/item-divider/test/a11y/item-divider.e2e.js +44 -0
  170. package/dist/collection/components/item-group/item-group.ios.css +68 -1
  171. package/dist/collection/components/item-group/item-group.md.css +68 -1
  172. package/dist/collection/components/item-option/item-option.ios.css +67 -1
  173. package/dist/collection/components/item-option/item-option.md.css +67 -1
  174. package/dist/collection/components/item-options/item-options.ios.css +99 -1
  175. package/dist/collection/components/item-options/item-options.md.css +99 -1
  176. package/dist/collection/components/item-sliding/item-sliding.css +33 -0
  177. package/dist/collection/components/item-sliding/test/a11y/item-sliding.e2e.js +34 -0
  178. package/dist/collection/components/label/label.ios.css +105 -6
  179. package/dist/collection/components/label/label.md.css +104 -5
  180. package/dist/collection/components/label/test/a11y/label.e2e.js +66 -0
  181. package/dist/collection/components/list/list.ios.css +99 -0
  182. package/dist/collection/components/list/list.md.css +99 -0
  183. package/dist/collection/components/list-header/list-header.ios.css +100 -1
  184. package/dist/collection/components/list-header/list-header.md.css +100 -1
  185. package/dist/collection/components/list-header/test/a11y/list-header.e2e.js +24 -0
  186. package/dist/collection/components/loading/loading.ios.css +67 -1
  187. package/dist/collection/components/loading/loading.md.css +67 -1
  188. package/dist/collection/components/loading/test/a11y/loading.e2e.js +19 -0
  189. package/dist/collection/components/menu/menu.ios.css +66 -0
  190. package/dist/collection/components/menu/menu.md.css +66 -0
  191. package/dist/collection/components/menu-button/menu-button.ios.css +70 -2
  192. package/dist/collection/components/menu-button/menu-button.md.css +71 -3
  193. package/dist/collection/components/menu-button/test/a11y/menu-button.e2e.js +20 -1
  194. package/dist/collection/components/modal/modal.ios.css +66 -0
  195. package/dist/collection/components/modal/modal.md.css +66 -0
  196. package/dist/collection/components/nav/nav.css +33 -0
  197. package/dist/collection/components/note/note.ios.css +67 -0
  198. package/dist/collection/components/note/note.md.css +67 -1
  199. package/dist/collection/components/note/test/a11y/note.e2e.js +52 -0
  200. package/dist/collection/components/picker/picker.ios.css +66 -0
  201. package/dist/collection/components/picker/picker.md.css +66 -0
  202. package/dist/collection/components/picker-column/picker-column.ios.css +66 -0
  203. package/dist/collection/components/picker-column/picker-column.md.css +66 -0
  204. package/dist/collection/components/picker-column-internal/picker-column-internal.ios.css +33 -0
  205. package/dist/collection/components/picker-column-internal/picker-column-internal.md.css +66 -0
  206. package/dist/collection/components/picker-internal/picker-internal.ios.css +66 -0
  207. package/dist/collection/components/picker-internal/picker-internal.md.css +66 -0
  208. package/dist/collection/components/popover/popover.ios.css +66 -0
  209. package/dist/collection/components/popover/popover.md.css +66 -0
  210. package/dist/collection/components/progress-bar/progress-bar.ios.css +33 -0
  211. package/dist/collection/components/progress-bar/progress-bar.md.css +33 -0
  212. package/dist/collection/components/radio/radio.ios.css +99 -0
  213. package/dist/collection/components/radio/radio.md.css +99 -0
  214. package/dist/collection/components/range/range.ios.css +81 -7
  215. package/dist/collection/components/range/range.md.css +98 -10
  216. package/dist/collection/components/range/test/a11y/range.e2e.js +22 -0
  217. package/dist/collection/components/refresher/refresher.ios.css +66 -0
  218. package/dist/collection/components/refresher/refresher.md.css +66 -0
  219. package/dist/collection/components/reorder/reorder.ios.css +75 -2
  220. package/dist/collection/components/reorder/reorder.md.css +75 -2
  221. package/dist/collection/components/reorder-group/reorder-group.css +33 -0
  222. package/dist/collection/components/reorder-group/test/a11y/reorder-group.e2e.js +33 -0
  223. package/dist/collection/components/ripple-effect/ripple-effect.css +33 -0
  224. package/dist/collection/components/router-link/router-link.css +33 -0
  225. package/dist/collection/components/router-outlet/router-outlet.css +33 -0
  226. package/dist/collection/components/router-outlet/router-outlet.js +1 -6
  227. package/dist/collection/components/row/row.css +66 -0
  228. package/dist/collection/components/searchbar/searchbar.ios.css +95 -16
  229. package/dist/collection/components/searchbar/searchbar.js +7 -1
  230. package/dist/collection/components/searchbar/searchbar.md.css +77 -10
  231. package/dist/collection/components/searchbar/test/a11y/searchbar.e2e.js +37 -0
  232. package/dist/collection/components/searchbar/test/basic/searchbar.e2e.js +18 -0
  233. package/dist/collection/components/segment/segment.ios.css +99 -0
  234. package/dist/collection/components/segment/segment.md.css +99 -0
  235. package/dist/collection/components/segment-button/segment-button.ios.css +66 -0
  236. package/dist/collection/components/segment-button/segment-button.md.css +66 -0
  237. package/dist/collection/components/select/select.ios.css +99 -0
  238. package/dist/collection/components/select/select.md.css +165 -0
  239. package/dist/collection/components/select-popover/select-popover.ios.css +101 -1
  240. package/dist/collection/components/select-popover/select-popover.md.css +99 -0
  241. package/dist/collection/components/skeleton-text/skeleton-text.css +33 -0
  242. package/dist/collection/components/spinner/spinner.css +33 -0
  243. package/dist/collection/components/split-pane/split-pane.ios.css +99 -0
  244. package/dist/collection/components/split-pane/split-pane.md.css +99 -0
  245. package/dist/collection/components/tab-bar/tab-bar.ios.css +99 -0
  246. package/dist/collection/components/tab-bar/tab-bar.md.css +99 -0
  247. package/dist/collection/components/tab-button/tab-button.ios.css +66 -0
  248. package/dist/collection/components/tab-button/tab-button.md.css +66 -0
  249. package/dist/collection/components/tabs/tabs.css +33 -0
  250. package/dist/collection/components/text/text.css +33 -0
  251. package/dist/collection/components/textarea/test/a11y/textarea.e2e.js +15 -1
  252. package/dist/collection/components/textarea/textarea.ios.css +133 -1
  253. package/dist/collection/components/textarea/textarea.md.css +199 -1
  254. package/dist/collection/components/thumbnail/thumbnail.css +33 -0
  255. package/dist/collection/components/title/test/a11y/title.e2e.js +61 -0
  256. package/dist/collection/components/title/title.ios.css +43 -10
  257. package/dist/collection/components/title/title.md.css +35 -2
  258. package/dist/collection/components/toast/test/a11y/toast.e2e.js +98 -1
  259. package/dist/collection/components/toast/toast.ios.css +74 -3
  260. package/dist/collection/components/toast/toast.md.css +74 -4
  261. package/dist/collection/components/toggle/toggle.ios.css +99 -0
  262. package/dist/collection/components/toggle/toggle.md.css +99 -0
  263. package/dist/collection/components/toolbar/toolbar.ios.css +66 -14
  264. package/dist/collection/components/toolbar/toolbar.md.css +66 -0
  265. package/dist/collection/css/test/a11y/typography.e2e.js +32 -0
  266. package/dist/collection/utils/transition/ios.transition.js +4 -4
  267. package/dist/docs.json +4 -9
  268. package/dist/esm/{index-6391de89.js → index-2970aafc.js} +2 -2
  269. package/dist/esm/{index-87d8642c.js → index-ecfc2c9f.js} +1 -1
  270. package/dist/esm/index.js +3 -3
  271. package/dist/esm/ion-accordion_2.entry.js +1 -1
  272. package/dist/esm/ion-action-sheet.entry.js +2 -2
  273. package/dist/esm/ion-app_8.entry.js +7 -7
  274. package/dist/esm/ion-avatar_3.entry.js +2 -2
  275. package/dist/esm/ion-back-button.entry.js +3 -3
  276. package/dist/esm/ion-breadcrumb_2.entry.js +3 -3
  277. package/dist/esm/ion-button_2.entry.js +7 -24
  278. package/dist/esm/ion-card_5.entry.js +8 -8
  279. package/dist/esm/ion-chip.entry.js +7 -2
  280. package/dist/esm/ion-datetime-button.entry.js +2 -2
  281. package/dist/esm/ion-datetime_3.entry.js +4 -4
  282. package/dist/esm/ion-fab_3.entry.js +1 -1
  283. package/dist/esm/ion-input.entry.js +3 -3
  284. package/dist/esm/ion-item-option_3.entry.js +4 -4
  285. package/dist/esm/ion-item_8.entry.js +11 -11
  286. package/dist/esm/ion-loading.entry.js +2 -2
  287. package/dist/esm/ion-menu_3.entry.js +3 -3
  288. package/dist/esm/ion-modal.entry.js +1 -1
  289. package/dist/esm/ion-nav_2.entry.js +1 -1
  290. package/dist/esm/ion-popover.entry.js +1 -1
  291. package/dist/esm/ion-range.entry.js +2 -2
  292. package/dist/esm/ion-refresher_2.entry.js +1 -1
  293. package/dist/esm/ion-reorder_2.entry.js +3 -3
  294. package/dist/esm/ion-searchbar.entry.js +10 -4
  295. package/dist/esm/ion-select_3.entry.js +1 -1
  296. package/dist/esm/ion-textarea.entry.js +2 -2
  297. package/dist/esm/ion-toast.entry.js +2 -2
  298. package/dist/esm/ion-toggle.entry.js +1 -1
  299. package/dist/esm/ionic.js +2 -2
  300. package/dist/esm/{ios.transition-3137d23e.js → ios.transition-4e8d7fb7.js} +5 -5
  301. package/dist/esm/loader.js +1 -1
  302. package/dist/esm/{md.transition-48b3b77c.js → md.transition-2b41d64c.js} +1 -1
  303. package/dist/esm-es5/{index-6391de89.js → index-2970aafc.js} +1 -1
  304. package/dist/esm-es5/index.js +1 -1
  305. package/dist/esm-es5/ion-accordion_2.entry.js +1 -1
  306. package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
  307. package/dist/esm-es5/ion-app_8.entry.js +1 -1
  308. package/dist/esm-es5/ion-avatar_3.entry.js +1 -1
  309. package/dist/esm-es5/ion-back-button.entry.js +1 -1
  310. package/dist/esm-es5/ion-breadcrumb_2.entry.js +1 -1
  311. package/dist/esm-es5/ion-button_2.entry.js +1 -1
  312. package/dist/esm-es5/ion-card_5.entry.js +1 -1
  313. package/dist/esm-es5/ion-chip.entry.js +1 -1
  314. package/dist/esm-es5/ion-datetime-button.entry.js +1 -1
  315. package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
  316. package/dist/esm-es5/ion-fab_3.entry.js +1 -1
  317. package/dist/esm-es5/ion-input.entry.js +1 -1
  318. package/dist/esm-es5/ion-item-option_3.entry.js +1 -1
  319. package/dist/esm-es5/ion-item_8.entry.js +1 -1
  320. package/dist/esm-es5/ion-loading.entry.js +1 -1
  321. package/dist/esm-es5/ion-menu_3.entry.js +1 -1
  322. package/dist/esm-es5/ion-modal.entry.js +1 -1
  323. package/dist/esm-es5/ion-nav_2.entry.js +1 -1
  324. package/dist/esm-es5/ion-popover.entry.js +1 -1
  325. package/dist/esm-es5/ion-range.entry.js +1 -1
  326. package/dist/esm-es5/ion-refresher_2.entry.js +1 -1
  327. package/dist/esm-es5/ion-reorder_2.entry.js +1 -1
  328. package/dist/esm-es5/ion-searchbar.entry.js +1 -1
  329. package/dist/esm-es5/ion-select_3.entry.js +1 -1
  330. package/dist/esm-es5/ion-textarea.entry.js +1 -1
  331. package/dist/esm-es5/ion-toast.entry.js +1 -1
  332. package/dist/esm-es5/ion-toggle.entry.js +1 -1
  333. package/dist/esm-es5/ionic.js +1 -1
  334. package/dist/esm-es5/ios.transition-4e8d7fb7.js +4 -0
  335. package/dist/esm-es5/loader.js +1 -1
  336. package/dist/esm-es5/{md.transition-48b3b77c.js → md.transition-2b41d64c.js} +1 -1
  337. package/dist/ionic/index.esm.js +1 -1
  338. package/dist/ionic/ionic.esm.js +1 -1
  339. package/dist/ionic/ionic.js +1 -1
  340. package/dist/ionic/p-060aa1aa.entry.js +4 -0
  341. package/dist/ionic/p-0e4377e6.system.entry.js +4 -0
  342. package/dist/ionic/{p-a2b25750.js → p-1decbac2.js} +1 -1
  343. package/dist/ionic/p-1e5f9f20.entry.js +4 -0
  344. package/dist/ionic/p-2c012642.entry.js +4 -0
  345. package/dist/ionic/{p-62324608.system.entry.js → p-2e45dce9.system.entry.js} +1 -1
  346. package/dist/ionic/p-2f4e5cd6.system.entry.js +4 -0
  347. package/dist/ionic/p-2f6fbeab.system.entry.js +4 -0
  348. package/dist/ionic/p-39bf6a89.js +4 -0
  349. package/dist/ionic/p-3d981b54.entry.js +4 -0
  350. package/dist/ionic/p-418fc6f2.system.entry.js +4 -0
  351. package/dist/ionic/p-468ac44a.system.entry.js +4 -0
  352. package/dist/ionic/p-54b72015.system.entry.js +4 -0
  353. package/dist/ionic/{p-87383d00.system.entry.js → p-586e0a90.system.entry.js} +1 -1
  354. package/dist/ionic/p-5a28523b.system.entry.js +4 -0
  355. package/dist/ionic/{p-5ed5b824.entry.js → p-5c17f888.entry.js} +1 -1
  356. package/dist/ionic/{p-653f2fc6.entry.js → p-5d418c78.entry.js} +1 -1
  357. package/dist/ionic/p-5e8d7def.system.entry.js +4 -0
  358. package/dist/ionic/{p-d2d25501.entry.js → p-64ad5765.entry.js} +1 -1
  359. package/dist/ionic/p-65105512.entry.js +4 -0
  360. package/dist/ionic/p-66d2ef38.entry.js +4 -0
  361. package/dist/ionic/p-721933ff.system.js +4 -0
  362. package/dist/ionic/p-7ea1a467.system.js +4 -0
  363. package/dist/ionic/{p-79d17e21.system.entry.js → p-80b152fd.system.entry.js} +1 -1
  364. package/dist/ionic/{p-208f640c.entry.js → p-80eed21b.entry.js} +1 -1
  365. package/dist/ionic/{p-0be94477.entry.js → p-89d96720.entry.js} +1 -1
  366. package/dist/ionic/{p-c75d63c0.entry.js → p-8eed522b.entry.js} +1 -1
  367. package/dist/ionic/p-91f9a6aa.system.entry.js +4 -0
  368. package/dist/ionic/p-94f99a8b.entry.js +4 -0
  369. package/dist/ionic/{p-a1191dc0.system.entry.js → p-96c2a273.system.entry.js} +1 -1
  370. package/dist/ionic/p-985d547d.system.entry.js +4 -0
  371. package/dist/ionic/{p-5f611d9e.system.entry.js → p-98b618ce.system.entry.js} +1 -1
  372. package/dist/ionic/{p-e46368a2.entry.js → p-99140340.entry.js} +1 -1
  373. package/dist/ionic/p-9e306450.system.entry.js +4 -0
  374. package/dist/ionic/{p-0b68c41d.system.entry.js → p-a5481fd3.system.entry.js} +1 -1
  375. package/dist/ionic/p-b03dae0c.system.entry.js +4 -0
  376. package/dist/ionic/p-b062bc29.entry.js +4 -0
  377. package/dist/ionic/p-b0b8c0c9.system.entry.js +4 -0
  378. package/dist/ionic/{p-23f63cc8.system.entry.js → p-b9654781.system.entry.js} +1 -1
  379. package/dist/ionic/p-bc8b9c38.system.entry.js +4 -0
  380. package/dist/ionic/p-c4aea998.entry.js +4 -0
  381. package/dist/ionic/{p-728ac2b3.entry.js → p-c569a270.entry.js} +1 -1
  382. package/dist/ionic/p-c64711cc.entry.js +4 -0
  383. package/dist/ionic/p-c9fd7db5.system.entry.js +4 -0
  384. package/dist/ionic/p-caa4c0fa.entry.js +4 -0
  385. package/dist/ionic/{p-8843b046.system.js → p-cd4b6518.system.js} +1 -1
  386. package/dist/ionic/{p-b1e8f045.entry.js → p-d1e6b365.entry.js} +1 -1
  387. package/dist/ionic/p-d4044209.system.entry.js +4 -0
  388. package/dist/ionic/{p-b5aa940c.system.entry.js → p-d693e765.system.entry.js} +1 -1
  389. package/dist/ionic/p-d6de281e.entry.js +4 -0
  390. package/dist/ionic/p-e497d6a5.js +4 -0
  391. package/dist/ionic/{p-857be909.entry.js → p-e9c112ba.entry.js} +1 -1
  392. package/dist/ionic/{p-98ebc376.entry.js → p-eaede417.entry.js} +1 -1
  393. package/dist/ionic/p-f1e5e368.system.entry.js +4 -0
  394. package/dist/ionic/{p-e3d5608d.system.js → p-f29fe8c3.system.js} +1 -1
  395. package/dist/ionic/p-f2b925a2.system.entry.js +4 -0
  396. package/dist/ionic/{p-3ea57ced.system.entry.js → p-f5b7b710.system.entry.js} +1 -1
  397. package/dist/ionic/p-f64f215c.entry.js +4 -0
  398. package/dist/ionic/{p-859b1ee6.entry.js → p-f78e60a5.entry.js} +1 -1
  399. package/dist/ionic/{p-df6743df.system.js → p-f7dcca6a.system.js} +1 -1
  400. package/dist/ionic/p-f902ddc6.entry.js +4 -0
  401. package/dist/ionic/p-f9ec8c18.entry.js +4 -0
  402. package/dist/ionic/p-fade59a2.system.entry.js +4 -0
  403. package/dist/ionic/{p-fabb7294.entry.js → p-fbb2649b.entry.js} +1 -1
  404. package/dist/node_modules/ionicons/dist/collection/components/icon/icon.css +6 -50
  405. package/hydrate/index.js +164 -179
  406. package/package.json +5 -5
  407. package/dist/esm-es5/ios.transition-3137d23e.js +0 -4
  408. package/dist/ionic/p-06902103.system.js +0 -4
  409. package/dist/ionic/p-0cc2bf5a.system.entry.js +0 -4
  410. package/dist/ionic/p-11248f01.js +0 -4
  411. package/dist/ionic/p-180f4e51.system.entry.js +0 -4
  412. package/dist/ionic/p-38dd9aec.entry.js +0 -4
  413. package/dist/ionic/p-4457f4a6.entry.js +0 -4
  414. package/dist/ionic/p-45ee211b.system.entry.js +0 -4
  415. package/dist/ionic/p-48144921.entry.js +0 -4
  416. package/dist/ionic/p-5221e3d9.system.entry.js +0 -4
  417. package/dist/ionic/p-55afcc56.entry.js +0 -4
  418. package/dist/ionic/p-59646db0.entry.js +0 -4
  419. package/dist/ionic/p-5cd94cc1.entry.js +0 -4
  420. package/dist/ionic/p-5d7aa5dc.system.entry.js +0 -4
  421. package/dist/ionic/p-69303bb5.system.js +0 -4
  422. package/dist/ionic/p-6b3afb0f.entry.js +0 -4
  423. package/dist/ionic/p-7b3fcf85.entry.js +0 -4
  424. package/dist/ionic/p-8afcaae4.system.entry.js +0 -4
  425. package/dist/ionic/p-a62c0ff4.js +0 -4
  426. package/dist/ionic/p-a8e01c65.entry.js +0 -4
  427. package/dist/ionic/p-af0bc751.system.entry.js +0 -4
  428. package/dist/ionic/p-b0129e93.system.entry.js +0 -4
  429. package/dist/ionic/p-b0e9e0b8.system.entry.js +0 -4
  430. package/dist/ionic/p-b3cfc6e1.system.entry.js +0 -4
  431. package/dist/ionic/p-bbae0ac3.system.entry.js +0 -4
  432. package/dist/ionic/p-bf4b8d8a.system.entry.js +0 -4
  433. package/dist/ionic/p-c759a704.entry.js +0 -4
  434. package/dist/ionic/p-d313542f.entry.js +0 -4
  435. package/dist/ionic/p-d3b8aebf.entry.js +0 -4
  436. package/dist/ionic/p-d5e3bff3.entry.js +0 -4
  437. package/dist/ionic/p-dbb48066.system.entry.js +0 -4
  438. package/dist/ionic/p-dc49c681.system.entry.js +0 -4
  439. package/dist/ionic/p-e1f491c6.system.entry.js +0 -4
  440. package/dist/ionic/p-e679bd69.system.entry.js +0 -4
  441. package/dist/ionic/p-ed7b205b.entry.js +0 -4
  442. package/dist/ionic/p-f79efebd.system.entry.js +0 -4
  443. package/dist/ionic/p-fa3327e8.system.entry.js +0 -4
  444. package/dist/ionic/p-fd42994b.system.entry.js +0 -4
  445. package/dist/ionic/p-fe83e3e2.entry.js +0 -4
  446. /package/dist/esm-es5/{index-87d8642c.js → index-ecfc2c9f.js} +0 -0
  447. /package/dist/ionic/{p-547db962.js → p-0a87858b.js} +0 -0
  448. /package/dist/ionic/{p-de640b80.system.js → p-8985b268.system.js} +0 -0
@@ -1,3 +1,36 @@
1
+ /**
2
+ * Convert a font size to a dynamic font size.
3
+ * Fonts that participate in Dynamic Type should use
4
+ * dynamic font sizes.
5
+ * @param size - The initial font size including the unit (i.e. px or pt)
6
+ * @param unit (optional) - The unit to convert to. Use this if you want to
7
+ * convert to a unit other than $baselineUnit.
8
+ */
9
+ /**
10
+ * Convert a font size to a dynamic font size but impose
11
+ * a maximum font size.
12
+ * @param size - The initial font size including the unit (i.e. px or pt)
13
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
14
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
15
+ * convert to a unit other than $baselineUnit.
16
+ */
17
+ /**
18
+ * Convert a font size to a dynamic font size but impose
19
+ * a minimum font size.
20
+ * @param size - The initial font size including the unit (i.e. px or pt)
21
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
22
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
23
+ * convert to a unit other than $baselineUnit.
24
+ */
25
+ /**
26
+ * Convert a font size to a dynamic font size but impose
27
+ * maximum and minimum font sizes.
28
+ * @param size - The initial font size including the unit (i.e. px or pt)
29
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
30
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
31
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
32
+ * convert to a unit other than $baselineUnit.
33
+ */
1
34
  :host {
2
35
  /**
3
36
  * @prop --background: Background of the list header
@@ -69,6 +102,72 @@
69
102
  --inner-border-width: 0;
70
103
  }
71
104
 
105
+ /**
106
+ * Convert a font size to a dynamic font size.
107
+ * Fonts that participate in Dynamic Type should use
108
+ * dynamic font sizes.
109
+ * @param size - The initial font size including the unit (i.e. px or pt)
110
+ * @param unit (optional) - The unit to convert to. Use this if you want to
111
+ * convert to a unit other than $baselineUnit.
112
+ */
113
+ /**
114
+ * Convert a font size to a dynamic font size but impose
115
+ * a maximum font size.
116
+ * @param size - The initial font size including the unit (i.e. px or pt)
117
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
118
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
119
+ * convert to a unit other than $baselineUnit.
120
+ */
121
+ /**
122
+ * Convert a font size to a dynamic font size but impose
123
+ * a minimum font size.
124
+ * @param size - The initial font size including the unit (i.e. px or pt)
125
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
126
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
127
+ * convert to a unit other than $baselineUnit.
128
+ */
129
+ /**
130
+ * Convert a font size to a dynamic font size but impose
131
+ * maximum and minimum font sizes.
132
+ * @param size - The initial font size including the unit (i.e. px or pt)
133
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
134
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
135
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
136
+ * convert to a unit other than $baselineUnit.
137
+ */
138
+ /**
139
+ * Convert a font size to a dynamic font size.
140
+ * Fonts that participate in Dynamic Type should use
141
+ * dynamic font sizes.
142
+ * @param size - The initial font size including the unit (i.e. px or pt)
143
+ * @param unit (optional) - The unit to convert to. Use this if you want to
144
+ * convert to a unit other than $baselineUnit.
145
+ */
146
+ /**
147
+ * Convert a font size to a dynamic font size but impose
148
+ * a maximum font size.
149
+ * @param size - The initial font size including the unit (i.e. px or pt)
150
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
151
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
152
+ * convert to a unit other than $baselineUnit.
153
+ */
154
+ /**
155
+ * Convert a font size to a dynamic font size but impose
156
+ * a minimum font size.
157
+ * @param size - The initial font size including the unit (i.e. px or pt)
158
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
159
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
160
+ * convert to a unit other than $baselineUnit.
161
+ */
162
+ /**
163
+ * Convert a font size to a dynamic font size but impose
164
+ * maximum and minimum font sizes.
165
+ * @param size - The initial font size including the unit (i.e. px or pt)
166
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
167
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
168
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
169
+ * convert to a unit other than $baselineUnit.
170
+ */
72
171
  :host {
73
172
  --background: transparent;
74
173
  --color: var(--ion-color-step-850, #262626);
@@ -77,7 +176,7 @@
77
176
  padding-inline-start: calc(var(--ion-safe-area-left, 0px) + 16px);
78
177
  position: relative;
79
178
  align-items: flex-end;
80
- font-size: 22px;
179
+ font-size: min(1.375rem, 56px);
81
180
  font-weight: 700;
82
181
  letter-spacing: 0;
83
182
  }
@@ -1,3 +1,36 @@
1
+ /**
2
+ * Convert a font size to a dynamic font size.
3
+ * Fonts that participate in Dynamic Type should use
4
+ * dynamic font sizes.
5
+ * @param size - The initial font size including the unit (i.e. px or pt)
6
+ * @param unit (optional) - The unit to convert to. Use this if you want to
7
+ * convert to a unit other than $baselineUnit.
8
+ */
9
+ /**
10
+ * Convert a font size to a dynamic font size but impose
11
+ * a maximum font size.
12
+ * @param size - The initial font size including the unit (i.e. px or pt)
13
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
14
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
15
+ * convert to a unit other than $baselineUnit.
16
+ */
17
+ /**
18
+ * Convert a font size to a dynamic font size but impose
19
+ * a minimum font size.
20
+ * @param size - The initial font size including the unit (i.e. px or pt)
21
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
22
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
23
+ * convert to a unit other than $baselineUnit.
24
+ */
25
+ /**
26
+ * Convert a font size to a dynamic font size but impose
27
+ * maximum and minimum font sizes.
28
+ * @param size - The initial font size including the unit (i.e. px or pt)
29
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
30
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
31
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
32
+ * convert to a unit other than $baselineUnit.
33
+ */
1
34
  :host {
2
35
  /**
3
36
  * @prop --background: Background of the list header
@@ -69,6 +102,72 @@
69
102
  --inner-border-width: 0;
70
103
  }
71
104
 
105
+ /**
106
+ * Convert a font size to a dynamic font size.
107
+ * Fonts that participate in Dynamic Type should use
108
+ * dynamic font sizes.
109
+ * @param size - The initial font size including the unit (i.e. px or pt)
110
+ * @param unit (optional) - The unit to convert to. Use this if you want to
111
+ * convert to a unit other than $baselineUnit.
112
+ */
113
+ /**
114
+ * Convert a font size to a dynamic font size but impose
115
+ * a maximum font size.
116
+ * @param size - The initial font size including the unit (i.e. px or pt)
117
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
118
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
119
+ * convert to a unit other than $baselineUnit.
120
+ */
121
+ /**
122
+ * Convert a font size to a dynamic font size but impose
123
+ * a minimum font size.
124
+ * @param size - The initial font size including the unit (i.e. px or pt)
125
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
126
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
127
+ * convert to a unit other than $baselineUnit.
128
+ */
129
+ /**
130
+ * Convert a font size to a dynamic font size but impose
131
+ * maximum and minimum font sizes.
132
+ * @param size - The initial font size including the unit (i.e. px or pt)
133
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
134
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
135
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
136
+ * convert to a unit other than $baselineUnit.
137
+ */
138
+ /**
139
+ * Convert a font size to a dynamic font size.
140
+ * Fonts that participate in Dynamic Type should use
141
+ * dynamic font sizes.
142
+ * @param size - The initial font size including the unit (i.e. px or pt)
143
+ * @param unit (optional) - The unit to convert to. Use this if you want to
144
+ * convert to a unit other than $baselineUnit.
145
+ */
146
+ /**
147
+ * Convert a font size to a dynamic font size but impose
148
+ * a maximum font size.
149
+ * @param size - The initial font size including the unit (i.e. px or pt)
150
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
151
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
152
+ * convert to a unit other than $baselineUnit.
153
+ */
154
+ /**
155
+ * Convert a font size to a dynamic font size but impose
156
+ * a minimum font size.
157
+ * @param size - The initial font size including the unit (i.e. px or pt)
158
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
159
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
160
+ * convert to a unit other than $baselineUnit.
161
+ */
162
+ /**
163
+ * Convert a font size to a dynamic font size but impose
164
+ * maximum and minimum font sizes.
165
+ * @param size - The initial font size including the unit (i.e. px or pt)
166
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
167
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
168
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
169
+ * convert to a unit other than $baselineUnit.
170
+ */
72
171
  :host {
73
172
  --background: transparent;
74
173
  --color: var(--ion-text-color, #000);
@@ -76,7 +175,7 @@
76
175
  -webkit-padding-start: calc(var(--ion-safe-area-left, 0) + 16px);
77
176
  padding-inline-start: calc(var(--ion-safe-area-left, 0) + 16px);
78
177
  min-height: 45px;
79
- font-size: 14px;
178
+ font-size: 0.875rem;
80
179
  }
81
180
 
82
181
  :host(.list-header-lines-full) {
@@ -0,0 +1,24 @@
1
+ /*!
2
+ * (C) Ionic http://ionicframework.com - MIT License
3
+ */
4
+ import { expect } from "@playwright/test";
5
+ import { configs, test } from "../../../../utils/test/playwright/index";
6
+ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
7
+ test.describe(title('list-header: font scaling'), () => {
8
+ test('should scale default list-header text on larger font sizes', async ({ page }) => {
9
+ await page.setContent(`
10
+ <style>
11
+ html {
12
+ font-size: 310%;
13
+ }
14
+ </style>
15
+
16
+ <ion-list-header>
17
+ <ion-label>List Header</ion-label>
18
+ </ion-list-header>
19
+ `, config);
20
+ const listHeader = page.locator('ion-list-header');
21
+ await expect(listHeader).toHaveScreenshot(screenshot(`list-header-default-scale`));
22
+ });
23
+ });
24
+ });
@@ -1,3 +1,36 @@
1
+ /**
2
+ * Convert a font size to a dynamic font size.
3
+ * Fonts that participate in Dynamic Type should use
4
+ * dynamic font sizes.
5
+ * @param size - The initial font size including the unit (i.e. px or pt)
6
+ * @param unit (optional) - The unit to convert to. Use this if you want to
7
+ * convert to a unit other than $baselineUnit.
8
+ */
9
+ /**
10
+ * Convert a font size to a dynamic font size but impose
11
+ * a maximum font size.
12
+ * @param size - The initial font size including the unit (i.e. px or pt)
13
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
14
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
15
+ * convert to a unit other than $baselineUnit.
16
+ */
17
+ /**
18
+ * Convert a font size to a dynamic font size but impose
19
+ * a minimum font size.
20
+ * @param size - The initial font size including the unit (i.e. px or pt)
21
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
22
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
23
+ * convert to a unit other than $baselineUnit.
24
+ */
25
+ /**
26
+ * Convert a font size to a dynamic font size but impose
27
+ * maximum and minimum font sizes.
28
+ * @param size - The initial font size including the unit (i.e. px or pt)
29
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
30
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
31
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
32
+ * convert to a unit other than $baselineUnit.
33
+ */
1
34
  :host {
2
35
  /**
3
36
  * @prop --background: Background of the loading dialog
@@ -59,6 +92,39 @@ ion-spinner {
59
92
  color: var(--spinner-color);
60
93
  }
61
94
 
95
+ /**
96
+ * Convert a font size to a dynamic font size.
97
+ * Fonts that participate in Dynamic Type should use
98
+ * dynamic font sizes.
99
+ * @param size - The initial font size including the unit (i.e. px or pt)
100
+ * @param unit (optional) - The unit to convert to. Use this if you want to
101
+ * convert to a unit other than $baselineUnit.
102
+ */
103
+ /**
104
+ * Convert a font size to a dynamic font size but impose
105
+ * a maximum font size.
106
+ * @param size - The initial font size including the unit (i.e. px or pt)
107
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
108
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
109
+ * convert to a unit other than $baselineUnit.
110
+ */
111
+ /**
112
+ * Convert a font size to a dynamic font size but impose
113
+ * a minimum font size.
114
+ * @param size - The initial font size including the unit (i.e. px or pt)
115
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
116
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
117
+ * convert to a unit other than $baselineUnit.
118
+ */
119
+ /**
120
+ * Convert a font size to a dynamic font size but impose
121
+ * maximum and minimum font sizes.
122
+ * @param size - The initial font size including the unit (i.e. px or pt)
123
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
124
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
125
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
126
+ * convert to a unit other than $baselineUnit.
127
+ */
62
128
  :host {
63
129
  --background: var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9));
64
130
  --max-width: 270px;
@@ -66,7 +132,7 @@ ion-spinner {
66
132
  --spinner-color: var(--ion-color-step-600, #666666);
67
133
  --backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
68
134
  color: var(--ion-text-color, #000);
69
- font-size: 14px;
135
+ font-size: 0.875rem;
70
136
  }
71
137
 
72
138
  .loading-wrapper {
@@ -1,3 +1,36 @@
1
+ /**
2
+ * Convert a font size to a dynamic font size.
3
+ * Fonts that participate in Dynamic Type should use
4
+ * dynamic font sizes.
5
+ * @param size - The initial font size including the unit (i.e. px or pt)
6
+ * @param unit (optional) - The unit to convert to. Use this if you want to
7
+ * convert to a unit other than $baselineUnit.
8
+ */
9
+ /**
10
+ * Convert a font size to a dynamic font size but impose
11
+ * a maximum font size.
12
+ * @param size - The initial font size including the unit (i.e. px or pt)
13
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
14
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
15
+ * convert to a unit other than $baselineUnit.
16
+ */
17
+ /**
18
+ * Convert a font size to a dynamic font size but impose
19
+ * a minimum font size.
20
+ * @param size - The initial font size including the unit (i.e. px or pt)
21
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
22
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
23
+ * convert to a unit other than $baselineUnit.
24
+ */
25
+ /**
26
+ * Convert a font size to a dynamic font size but impose
27
+ * maximum and minimum font sizes.
28
+ * @param size - The initial font size including the unit (i.e. px or pt)
29
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
30
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
31
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
32
+ * convert to a unit other than $baselineUnit.
33
+ */
1
34
  :host {
2
35
  /**
3
36
  * @prop --background: Background of the loading dialog
@@ -59,6 +92,39 @@ ion-spinner {
59
92
  color: var(--spinner-color);
60
93
  }
61
94
 
95
+ /**
96
+ * Convert a font size to a dynamic font size.
97
+ * Fonts that participate in Dynamic Type should use
98
+ * dynamic font sizes.
99
+ * @param size - The initial font size including the unit (i.e. px or pt)
100
+ * @param unit (optional) - The unit to convert to. Use this if you want to
101
+ * convert to a unit other than $baselineUnit.
102
+ */
103
+ /**
104
+ * Convert a font size to a dynamic font size but impose
105
+ * a maximum font size.
106
+ * @param size - The initial font size including the unit (i.e. px or pt)
107
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
108
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
109
+ * convert to a unit other than $baselineUnit.
110
+ */
111
+ /**
112
+ * Convert a font size to a dynamic font size but impose
113
+ * a minimum font size.
114
+ * @param size - The initial font size including the unit (i.e. px or pt)
115
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
116
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
117
+ * convert to a unit other than $baselineUnit.
118
+ */
119
+ /**
120
+ * Convert a font size to a dynamic font size but impose
121
+ * maximum and minimum font sizes.
122
+ * @param size - The initial font size including the unit (i.e. px or pt)
123
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
124
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
125
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
126
+ * convert to a unit other than $baselineUnit.
127
+ */
62
128
  :host {
63
129
  --background: var(--ion-color-step-50, #f2f2f2);
64
130
  --max-width: 280px;
@@ -66,7 +132,7 @@ ion-spinner {
66
132
  --spinner-color: var(--ion-color-primary, #3880ff);
67
133
  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
68
134
  color: var(--ion-color-step-850, #262626);
69
- font-size: 14px;
135
+ font-size: 0.875rem;
70
136
  }
71
137
 
72
138
  .loading-wrapper {
@@ -24,3 +24,22 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
24
24
  });
25
25
  });
26
26
  });
27
+ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
28
+ test.describe(title('loading: font scaling'), () => {
29
+ test('should scale text on larger font sizes', async ({ page }) => {
30
+ await page.setContent(`
31
+ <style>
32
+ html {
33
+ font-size: 36px;
34
+ }
35
+ </style>
36
+ <ion-loading message="Loading"></ion-loading>
37
+ `, config);
38
+ const ionLoadingDidPresent = await page.spyOnEvent('ionLoadingDidPresent');
39
+ const loading = page.locator('ion-loading');
40
+ await loading.evaluate((el) => el.present());
41
+ await ionLoadingDidPresent.next();
42
+ await expect(loading).toHaveScreenshot(screenshot(`loading-scale`));
43
+ });
44
+ });
45
+ });
@@ -1,3 +1,36 @@
1
+ /**
2
+ * Convert a font size to a dynamic font size.
3
+ * Fonts that participate in Dynamic Type should use
4
+ * dynamic font sizes.
5
+ * @param size - The initial font size including the unit (i.e. px or pt)
6
+ * @param unit (optional) - The unit to convert to. Use this if you want to
7
+ * convert to a unit other than $baselineUnit.
8
+ */
9
+ /**
10
+ * Convert a font size to a dynamic font size but impose
11
+ * a maximum font size.
12
+ * @param size - The initial font size including the unit (i.e. px or pt)
13
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
14
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
15
+ * convert to a unit other than $baselineUnit.
16
+ */
17
+ /**
18
+ * Convert a font size to a dynamic font size but impose
19
+ * a minimum font size.
20
+ * @param size - The initial font size including the unit (i.e. px or pt)
21
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
22
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
23
+ * convert to a unit other than $baselineUnit.
24
+ */
25
+ /**
26
+ * Convert a font size to a dynamic font size but impose
27
+ * maximum and minimum font sizes.
28
+ * @param size - The initial font size including the unit (i.e. px or pt)
29
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
30
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
31
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
32
+ * convert to a unit other than $baselineUnit.
33
+ */
1
34
  :host {
2
35
  /**
3
36
  * @prop --background: Background of the menu
@@ -158,6 +191,39 @@ ion-backdrop {
158
191
  /* stylelint-enable declaration-no-important */
159
192
  }
160
193
 
194
+ /**
195
+ * Convert a font size to a dynamic font size.
196
+ * Fonts that participate in Dynamic Type should use
197
+ * dynamic font sizes.
198
+ * @param size - The initial font size including the unit (i.e. px or pt)
199
+ * @param unit (optional) - The unit to convert to. Use this if you want to
200
+ * convert to a unit other than $baselineUnit.
201
+ */
202
+ /**
203
+ * Convert a font size to a dynamic font size but impose
204
+ * a maximum font size.
205
+ * @param size - The initial font size including the unit (i.e. px or pt)
206
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
207
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
208
+ * convert to a unit other than $baselineUnit.
209
+ */
210
+ /**
211
+ * Convert a font size to a dynamic font size but impose
212
+ * a minimum font size.
213
+ * @param size - The initial font size including the unit (i.e. px or pt)
214
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
215
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
216
+ * convert to a unit other than $baselineUnit.
217
+ */
218
+ /**
219
+ * Convert a font size to a dynamic font size but impose
220
+ * maximum and minimum font sizes.
221
+ * @param size - The initial font size including the unit (i.e. px or pt)
222
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
223
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
224
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
225
+ * convert to a unit other than $baselineUnit.
226
+ */
161
227
  :host(.menu-type-push) {
162
228
  z-index: 1000;
163
229
  }
@@ -1,3 +1,36 @@
1
+ /**
2
+ * Convert a font size to a dynamic font size.
3
+ * Fonts that participate in Dynamic Type should use
4
+ * dynamic font sizes.
5
+ * @param size - The initial font size including the unit (i.e. px or pt)
6
+ * @param unit (optional) - The unit to convert to. Use this if you want to
7
+ * convert to a unit other than $baselineUnit.
8
+ */
9
+ /**
10
+ * Convert a font size to a dynamic font size but impose
11
+ * a maximum font size.
12
+ * @param size - The initial font size including the unit (i.e. px or pt)
13
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
14
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
15
+ * convert to a unit other than $baselineUnit.
16
+ */
17
+ /**
18
+ * Convert a font size to a dynamic font size but impose
19
+ * a minimum font size.
20
+ * @param size - The initial font size including the unit (i.e. px or pt)
21
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
22
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
23
+ * convert to a unit other than $baselineUnit.
24
+ */
25
+ /**
26
+ * Convert a font size to a dynamic font size but impose
27
+ * maximum and minimum font sizes.
28
+ * @param size - The initial font size including the unit (i.e. px or pt)
29
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
30
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
31
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
32
+ * convert to a unit other than $baselineUnit.
33
+ */
1
34
  :host {
2
35
  /**
3
36
  * @prop --background: Background of the menu
@@ -158,6 +191,39 @@ ion-backdrop {
158
191
  /* stylelint-enable declaration-no-important */
159
192
  }
160
193
 
194
+ /**
195
+ * Convert a font size to a dynamic font size.
196
+ * Fonts that participate in Dynamic Type should use
197
+ * dynamic font sizes.
198
+ * @param size - The initial font size including the unit (i.e. px or pt)
199
+ * @param unit (optional) - The unit to convert to. Use this if you want to
200
+ * convert to a unit other than $baselineUnit.
201
+ */
202
+ /**
203
+ * Convert a font size to a dynamic font size but impose
204
+ * a maximum font size.
205
+ * @param size - The initial font size including the unit (i.e. px or pt)
206
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
207
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
208
+ * convert to a unit other than $baselineUnit.
209
+ */
210
+ /**
211
+ * Convert a font size to a dynamic font size but impose
212
+ * a minimum font size.
213
+ * @param size - The initial font size including the unit (i.e. px or pt)
214
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
215
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
216
+ * convert to a unit other than $baselineUnit.
217
+ */
218
+ /**
219
+ * Convert a font size to a dynamic font size but impose
220
+ * maximum and minimum font sizes.
221
+ * @param size - The initial font size including the unit (i.e. px or pt)
222
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
223
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
224
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
225
+ * convert to a unit other than $baselineUnit.
226
+ */
161
227
  :host(.menu-type-overlay) .menu-inner {
162
228
  box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
163
229
  }