@ionic/core 8.5.5-dev.11747137265.184b7749 → 8.5.5-dev.11747232541.1f7a2d34

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 (260) hide show
  1. package/components/button.js +7 -6
  2. package/components/checkbox.js +1 -1
  3. package/components/header.js +1 -1
  4. package/components/ion-accordion-group.js +1 -1
  5. package/components/ion-accordion.js +1 -1
  6. package/components/ion-avatar.js +1 -1
  7. package/components/ion-badge.js +1 -1
  8. package/components/ion-card-content.js +1 -1
  9. package/components/ion-card-header.js +1 -1
  10. package/components/ion-card-subtitle.js +1 -1
  11. package/components/ion-card.js +1 -1
  12. package/components/ion-chip.js +1 -1
  13. package/components/ion-datetime.js +1 -1
  14. package/components/ion-divider.js +1 -1
  15. package/components/ion-input.js +1 -1
  16. package/components/ion-item-option.js +1 -1
  17. package/components/ion-item-options.js +1 -1
  18. package/components/ion-progress-bar.js +1 -1
  19. package/components/ion-range.js +1 -1
  20. package/components/ion-searchbar.js +1 -1
  21. package/components/ion-segment-button.js +1 -1
  22. package/components/ion-select.js +1 -1
  23. package/components/ion-tab-bar.js +1 -1
  24. package/components/ion-tab-button.js +1 -1
  25. package/components/ion-textarea.js +1 -1
  26. package/components/ion-toast.js +1 -1
  27. package/components/ion-toggle.js +1 -1
  28. package/components/item.js +1 -1
  29. package/components/list-header.js +1 -1
  30. package/components/list.js +1 -1
  31. package/components/modal.js +1 -1
  32. package/components/radio-group.js +1 -1
  33. package/components/radio.js +1 -1
  34. package/components/select-modal.js +1 -1
  35. package/components/title.js +1 -1
  36. package/components/toolbar.js +1 -1
  37. package/css/ionic/bundle.ionic.css +1 -1
  38. package/css/ionic/bundle.ionic.css.map +1 -1
  39. package/css/ionic/core.ionic.css +1 -1
  40. package/css/ionic/core.ionic.css.map +1 -1
  41. package/css/ionic/global.bundle.ionic.css +1 -1
  42. package/css/ionic/global.bundle.ionic.css.map +1 -1
  43. package/css/ionic/ionic-swiper.ionic.css +1 -1
  44. package/css/ionic/ionic-swiper.ionic.css.map +1 -1
  45. package/css/ionic/link.ionic.css +1 -1
  46. package/css/ionic/link.ionic.css.map +1 -1
  47. package/css/ionic/typography.ionic.css +1 -1
  48. package/css/ionic/typography.ionic.css.map +1 -1
  49. package/css/ionic/utils.bundle.ionic.css +1 -1
  50. package/css/ionic/utils.bundle.ionic.css.map +1 -1
  51. package/dist/cjs/ion-accordion_2.cjs.entry.js +2 -2
  52. package/dist/cjs/ion-app_8.cjs.entry.js +3 -3
  53. package/dist/cjs/ion-avatar_3.cjs.entry.js +2 -2
  54. package/dist/cjs/ion-button_2.cjs.entry.js +7 -6
  55. package/dist/cjs/ion-card_5.cjs.entry.js +4 -4
  56. package/dist/cjs/ion-checkbox.cjs.entry.js +1 -1
  57. package/dist/cjs/ion-chip.cjs.entry.js +1 -1
  58. package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
  59. package/dist/cjs/ion-divider.cjs.entry.js +1 -1
  60. package/dist/cjs/ion-input.cjs.entry.js +1 -1
  61. package/dist/cjs/ion-item-option_3.cjs.entry.js +2 -2
  62. package/dist/cjs/ion-item_8.cjs.entry.js +3 -3
  63. package/dist/cjs/ion-modal.cjs.entry.js +1 -1
  64. package/dist/cjs/ion-progress-bar.cjs.entry.js +1 -1
  65. package/dist/cjs/ion-radio_2.cjs.entry.js +2 -2
  66. package/dist/cjs/ion-range.cjs.entry.js +1 -1
  67. package/dist/cjs/ion-searchbar.cjs.entry.js +1 -1
  68. package/dist/cjs/ion-segment_2.cjs.entry.js +1 -1
  69. package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
  70. package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
  71. package/dist/cjs/ion-tab-bar_2.cjs.entry.js +2 -2
  72. package/dist/cjs/ion-textarea.cjs.entry.js +1 -1
  73. package/dist/cjs/ion-toast.cjs.entry.js +1 -1
  74. package/dist/cjs/ion-toggle.cjs.entry.js +1 -1
  75. package/dist/collection/components/accordion/accordion.ionic.css +20 -20
  76. package/dist/collection/components/accordion-group/accordion-group.ionic.css +14 -14
  77. package/dist/collection/components/avatar/avatar.ionic.css +25 -25
  78. package/dist/collection/components/badge/badge.ionic.css +20 -20
  79. package/dist/collection/components/button/button.ionic.css +56 -57
  80. package/dist/collection/components/button/button.js +9 -8
  81. package/dist/collection/components/card/card.ionic.css +3 -3
  82. package/dist/collection/components/card-content/card-content.ionic.css +10 -10
  83. package/dist/collection/components/card-header/card-header.ionic.css +7 -7
  84. package/dist/collection/components/card-subtitle/card-subtitle.ionic.css +1 -1
  85. package/dist/collection/components/checkbox/checkbox.ionic.css +29 -29
  86. package/dist/collection/components/chip/chip.ionic.css +17 -17
  87. package/dist/collection/components/datetime/datetime.ionic.css +52 -52
  88. package/dist/collection/components/divider/divider.ionic.css +15 -15
  89. package/dist/collection/components/header/header.ionic.css +3 -3
  90. package/dist/collection/components/input/input.ionic.css +28 -28
  91. package/dist/collection/components/item/item.ionic.css +16 -16
  92. package/dist/collection/components/item-option/item-option.ionic.css +22 -22
  93. package/dist/collection/components/item-options/item-options.ionic.css +5 -5
  94. package/dist/collection/components/list/list.ionic.css +27 -27
  95. package/dist/collection/components/list-header/list-header.ionic.css +7 -7
  96. package/dist/collection/components/modal/modal.ionic.css +13 -13
  97. package/dist/collection/components/progress-bar/progress-bar.ionic.css +4 -4
  98. package/dist/collection/components/radio/radio.ionic.css +12 -12
  99. package/dist/collection/components/radio-group/radio-group.ionic.css +11 -11
  100. package/dist/collection/components/range/range.ionic.css +29 -29
  101. package/dist/collection/components/searchbar/searchbar.ionic.css +76 -76
  102. package/dist/collection/components/segment-button/segment-button.ionic.css +14 -14
  103. package/dist/collection/components/select/select.ionic.css +31 -31
  104. package/dist/collection/components/select-modal/select-modal.ionic.css +7 -7
  105. package/dist/collection/components/tab-bar/tab-bar.ionic.css +20 -20
  106. package/dist/collection/components/tab-button/tab-button.ionic.css +6 -6
  107. package/dist/collection/components/textarea/textarea.ionic.css +35 -35
  108. package/dist/collection/components/title/title.ionic.css +2 -2
  109. package/dist/collection/components/toast/toast.ionic.css +32 -32
  110. package/dist/collection/components/toggle/toggle.ionic.css +11 -11
  111. package/dist/collection/components/toolbar/toolbar.ionic.css +14 -14
  112. package/dist/docs.json +9 -5
  113. package/dist/esm/ion-accordion_2.entry.js +2 -2
  114. package/dist/esm/ion-app_8.entry.js +3 -3
  115. package/dist/esm/ion-avatar_3.entry.js +2 -2
  116. package/dist/esm/ion-button_2.entry.js +7 -6
  117. package/dist/esm/ion-card_5.entry.js +4 -4
  118. package/dist/esm/ion-checkbox.entry.js +1 -1
  119. package/dist/esm/ion-chip.entry.js +1 -1
  120. package/dist/esm/ion-datetime_3.entry.js +1 -1
  121. package/dist/esm/ion-divider.entry.js +1 -1
  122. package/dist/esm/ion-input.entry.js +1 -1
  123. package/dist/esm/ion-item-option_3.entry.js +2 -2
  124. package/dist/esm/ion-item_8.entry.js +3 -3
  125. package/dist/esm/ion-modal.entry.js +1 -1
  126. package/dist/esm/ion-progress-bar.entry.js +1 -1
  127. package/dist/esm/ion-radio_2.entry.js +2 -2
  128. package/dist/esm/ion-range.entry.js +1 -1
  129. package/dist/esm/ion-searchbar.entry.js +1 -1
  130. package/dist/esm/ion-segment_2.entry.js +1 -1
  131. package/dist/esm/ion-select-modal.entry.js +1 -1
  132. package/dist/esm/ion-select_3.entry.js +1 -1
  133. package/dist/esm/ion-tab-bar_2.entry.js +2 -2
  134. package/dist/esm/ion-textarea.entry.js +1 -1
  135. package/dist/esm/ion-toast.entry.js +1 -1
  136. package/dist/esm/ion-toggle.entry.js +1 -1
  137. package/dist/esm-es5/ion-accordion_2.entry.js +1 -1
  138. package/dist/esm-es5/ion-app_8.entry.js +1 -1
  139. package/dist/esm-es5/ion-avatar_3.entry.js +1 -1
  140. package/dist/esm-es5/ion-button_2.entry.js +1 -1
  141. package/dist/esm-es5/ion-card_5.entry.js +1 -1
  142. package/dist/esm-es5/ion-checkbox.entry.js +1 -1
  143. package/dist/esm-es5/ion-chip.entry.js +1 -1
  144. package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
  145. package/dist/esm-es5/ion-divider.entry.js +1 -1
  146. package/dist/esm-es5/ion-input.entry.js +1 -1
  147. package/dist/esm-es5/ion-item-option_3.entry.js +1 -1
  148. package/dist/esm-es5/ion-item_8.entry.js +1 -1
  149. package/dist/esm-es5/ion-modal.entry.js +1 -1
  150. package/dist/esm-es5/ion-progress-bar.entry.js +1 -1
  151. package/dist/esm-es5/ion-radio_2.entry.js +1 -1
  152. package/dist/esm-es5/ion-range.entry.js +1 -1
  153. package/dist/esm-es5/ion-searchbar.entry.js +1 -1
  154. package/dist/esm-es5/ion-segment_2.entry.js +1 -1
  155. package/dist/esm-es5/ion-select-modal.entry.js +1 -1
  156. package/dist/esm-es5/ion-select_3.entry.js +1 -1
  157. package/dist/esm-es5/ion-tab-bar_2.entry.js +1 -1
  158. package/dist/esm-es5/ion-textarea.entry.js +1 -1
  159. package/dist/esm-es5/ion-toast.entry.js +1 -1
  160. package/dist/esm-es5/ion-toggle.entry.js +1 -1
  161. package/dist/html.html-data.json +4 -1
  162. package/dist/ionic/ionic.esm.js +1 -1
  163. package/dist/ionic/p-03f0f489.entry.js +4 -0
  164. package/dist/ionic/p-050d7d1f.entry.js +4 -0
  165. package/dist/ionic/p-05488e5f.entry.js +4 -0
  166. package/dist/ionic/p-19e67d40.system.entry.js +4 -0
  167. package/dist/ionic/p-211efa34.system.entry.js +4 -0
  168. package/dist/ionic/p-21a9241b.system.entry.js +4 -0
  169. package/dist/ionic/p-28253576.system.entry.js +4 -0
  170. package/dist/ionic/{p-19544c40.entry.js → p-2a3df287.entry.js} +1 -1
  171. package/dist/ionic/p-30bae1a8.entry.js +4 -0
  172. package/dist/ionic/p-3f616348.system.entry.js +4 -0
  173. package/dist/ionic/p-41003775.entry.js +4 -0
  174. package/dist/ionic/p-41357931.system.entry.js +4 -0
  175. package/dist/ionic/p-488e56da.system.entry.js +4 -0
  176. package/dist/ionic/p-4ecb7892.entry.js +4 -0
  177. package/dist/ionic/p-577c1150.entry.js +4 -0
  178. package/dist/ionic/p-59d3caf4.entry.js +4 -0
  179. package/dist/ionic/p-5b2f411a.system.entry.js +4 -0
  180. package/dist/ionic/p-5bba46fc.system.entry.js +4 -0
  181. package/dist/ionic/p-5ceac493.entry.js +4 -0
  182. package/dist/ionic/p-5f582e4f.system.entry.js +4 -0
  183. package/dist/ionic/p-63c2257c.system.entry.js +4 -0
  184. package/dist/ionic/p-6b98a989.system.entry.js +4 -0
  185. package/dist/ionic/{p-93f7ddd5.entry.js → p-6c0e6625.entry.js} +1 -1
  186. package/dist/ionic/p-71d87b11.system.entry.js +4 -0
  187. package/dist/ionic/p-73db2a7e.system.entry.js +4 -0
  188. package/dist/ionic/p-75871b9f.entry.js +4 -0
  189. package/dist/ionic/p-7d1774f8.system.entry.js +4 -0
  190. package/dist/ionic/{p-3e161a46.entry.js → p-85c51a6a.entry.js} +1 -1
  191. package/dist/ionic/p-8f56be51.entry.js +4 -0
  192. package/dist/ionic/p-906b0781.entry.js +4 -0
  193. package/dist/ionic/p-9207650a.entry.js +4 -0
  194. package/dist/ionic/p-979f9a47.entry.js +4 -0
  195. package/dist/ionic/p-9acea98c.entry.js +4 -0
  196. package/dist/ionic/p-9bd072c2.system.entry.js +4 -0
  197. package/dist/ionic/p-a42ddbb3.system.entry.js +4 -0
  198. package/dist/ionic/p-a8759b16.entry.js +4 -0
  199. package/dist/ionic/p-a8fd8c07.entry.js +4 -0
  200. package/dist/ionic/p-afe776fc.system.entry.js +4 -0
  201. package/dist/ionic/p-b65e5cc0.system.entry.js +4 -0
  202. package/dist/ionic/p-b9298bee.entry.js +4 -0
  203. package/dist/ionic/p-c419b6b0.system.entry.js +4 -0
  204. package/dist/ionic/p-c8b9efc6.entry.js +4 -0
  205. package/dist/ionic/p-db8ffacb.system.js +1 -1
  206. package/dist/ionic/{p-8131e086.system.entry.js → p-e25667a4.system.entry.js} +1 -1
  207. package/dist/ionic/p-e35f0d82.system.entry.js +4 -0
  208. package/dist/ionic/p-f1bf5430.system.entry.js +4 -0
  209. package/dist/ionic/p-f1d7ea25.system.entry.js +4 -0
  210. package/dist/ionic/p-f3219e90.entry.js +4 -0
  211. package/dist/ionic/p-fdc14546.entry.js +4 -0
  212. package/dist/types/components/button/button.d.ts +5 -4
  213. package/dist/types/components.d.ts +4 -4
  214. package/hydrate/index.js +42 -41
  215. package/hydrate/index.mjs +42 -41
  216. package/package.json +1 -1
  217. package/dist/ionic/p-09072d3b.entry.js +0 -4
  218. package/dist/ionic/p-0d297574.system.entry.js +0 -4
  219. package/dist/ionic/p-16fd70b2.entry.js +0 -4
  220. package/dist/ionic/p-22e704a0.entry.js +0 -4
  221. package/dist/ionic/p-25679df9.system.entry.js +0 -4
  222. package/dist/ionic/p-259dcfa3.entry.js +0 -4
  223. package/dist/ionic/p-25fb485f.system.entry.js +0 -4
  224. package/dist/ionic/p-26d7c6fd.system.entry.js +0 -4
  225. package/dist/ionic/p-3533c471.system.entry.js +0 -4
  226. package/dist/ionic/p-3824cffd.entry.js +0 -4
  227. package/dist/ionic/p-39b0a811.entry.js +0 -4
  228. package/dist/ionic/p-3b98dd61.system.entry.js +0 -4
  229. package/dist/ionic/p-43d6a02c.system.entry.js +0 -4
  230. package/dist/ionic/p-44b1fefc.entry.js +0 -4
  231. package/dist/ionic/p-49664bbc.system.entry.js +0 -4
  232. package/dist/ionic/p-4a767053.entry.js +0 -4
  233. package/dist/ionic/p-548cd1e5.system.entry.js +0 -4
  234. package/dist/ionic/p-67cded2a.system.entry.js +0 -4
  235. package/dist/ionic/p-7c6f71eb.entry.js +0 -4
  236. package/dist/ionic/p-8402b59e.system.entry.js +0 -4
  237. package/dist/ionic/p-840f1c59.entry.js +0 -4
  238. package/dist/ionic/p-84ac0a34.system.entry.js +0 -4
  239. package/dist/ionic/p-85c7c591.system.entry.js +0 -4
  240. package/dist/ionic/p-88aa79f6.entry.js +0 -4
  241. package/dist/ionic/p-940bc10a.system.entry.js +0 -4
  242. package/dist/ionic/p-97a351b5.entry.js +0 -4
  243. package/dist/ionic/p-a47bffd6.system.entry.js +0 -4
  244. package/dist/ionic/p-a6a71315.entry.js +0 -4
  245. package/dist/ionic/p-aba2d55f.system.entry.js +0 -4
  246. package/dist/ionic/p-acee3852.entry.js +0 -4
  247. package/dist/ionic/p-ad3f30b4.system.entry.js +0 -4
  248. package/dist/ionic/p-b5e3859a.entry.js +0 -4
  249. package/dist/ionic/p-b79a47ba.entry.js +0 -4
  250. package/dist/ionic/p-c0b7f342.entry.js +0 -4
  251. package/dist/ionic/p-c18ffa8b.entry.js +0 -4
  252. package/dist/ionic/p-c47e7149.system.entry.js +0 -4
  253. package/dist/ionic/p-c847b24b.system.entry.js +0 -4
  254. package/dist/ionic/p-d2314315.system.entry.js +0 -4
  255. package/dist/ionic/p-d6662277.entry.js +0 -4
  256. package/dist/ionic/p-dbbfcd15.entry.js +0 -4
  257. package/dist/ionic/p-dfb63dc2.system.entry.js +0 -4
  258. package/dist/ionic/p-e09bb245.system.entry.js +0 -4
  259. package/dist/ionic/p-ed4cf0aa.system.entry.js +0 -4
  260. package/dist/ionic/p-f6a03670.entry.js +0 -4
package/dist/collection/components/progress-bar/progress-bar.ionic.css CHANGED
@@ -271,17 +271,17 @@ Do not edit directly, this file was auto-generated.
271
271
  }
272
272
  }
273
273
  :host {
274
- --background: var(--ion-bg-neutral-subtle-default, #efefef);
275
- --progress-background: var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));
274
+ --background: var(--ion-bg-neutral-subtle-default, var(--ion-primitives-neutral-200, #efefef));
275
+ --progress-background: var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));
276
276
  height: var(--ion-scale-100, 4px);
277
277
  }
278
278
 
279
279
  :host(.progress-bar-shape-round) {
280
- border-radius: var(--ion-round-xs, 999px);
280
+ border-radius: var(--ion-round-xs, var(--ion-border-radius-full, 999px));
281
281
  }
282
282
 
283
283
  :host(.progress-bar-shape-rectangular) {
284
- border-radius: var(--ion-rectangular-xs, 0px);
284
+ border-radius: var(--ion-rectangular-xs, var(--ion-border-radius-0, var(--ion-scale-0, 0px)));
285
285
  }
286
286
 
287
287
  :host(.ion-color) .buffer-circles {
package/dist/collection/components/radio/radio.ionic.css CHANGED
@@ -279,16 +279,16 @@ input {
279
279
 
280
280
  :host {
281
281
  --color: var(--ion-primitives-neutral-500, #a2a2a2);
282
- --color-checked: var(--ion-semantics-primary-base, #105cef);
283
- --border-width: var(--ion-border-size-025, 1px);
282
+ --color-checked: var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)));
283
+ --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
284
284
  --border-style: var(--ion-border-style-solid, solid);
285
285
  --border-radius: var(--ion-border-radius-full, 999px);
286
- --focus-ring-color: var(--ion-border-focus-default, #b5c0f7);
287
- --focus-ring-width: var(--ion-border-size-050, 2px);
286
+ --focus-ring-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
287
+ --focus-ring-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
288
288
  font-size: var(--ion-font-size-350, 0.875rem);
289
289
  font-weight: var(--ion-font-weight-regular, 400);
290
290
  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
291
- line-height: var(--ion-font-line-height-600, 24px);
291
+ line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
292
292
  text-decoration: none;
293
293
  text-transform: none;
294
294
  min-height: var(--ion-scale-1200, 48px);
@@ -301,7 +301,7 @@ input {
301
301
  }
302
302
 
303
303
  :host(.in-item.radio-label-placement-stacked) .native-wrapper {
304
- margin-bottom: var(--ion-space-250, 10px);
304
+ margin-bottom: var(--ion-space-250, var(--ion-scale-250, 10px));
305
305
  }
306
306
 
307
307
  .native-wrapper .radio-icon {
@@ -342,8 +342,8 @@ input {
342
342
  */
343
343
  -webkit-margin-start: 0;
344
344
  margin-inline-start: 0;
345
- -webkit-margin-end: var(--ion-space-400, 16px);
346
- margin-inline-end: var(--ion-space-400, 16px);
345
+ -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
346
+ margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
347
347
  }
348
348
 
349
349
  /**
@@ -352,8 +352,8 @@ input {
352
352
  * when the label sits at the end.
353
353
  */
354
354
  :host(.radio-label-placement-end) .label-text-wrapper {
355
- -webkit-margin-start: var(--ion-space-400, 16px);
356
- margin-inline-start: var(--ion-space-400, 16px);
355
+ -webkit-margin-start: var(--ion-space-400, var(--ion-scale-400, 16px));
356
+ margin-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
357
357
  -webkit-margin-end: 0;
358
358
  margin-inline-end: 0;
359
359
  }
@@ -367,7 +367,7 @@ input {
367
367
  */
368
368
  margin-left: 0;
369
369
  margin-right: 0;
370
- margin-bottom: var(--ion-space-400, 16px);
370
+ margin-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
371
371
  /**
372
372
  * Label text should not extend
373
373
  * beyond the bounds of the radio.
@@ -376,7 +376,7 @@ input {
376
376
  }
377
377
 
378
378
  :host(:not(.in-item):not(:last-of-type)) {
379
- margin-bottom: var(--ion-space-200, 8px);
379
+ margin-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
380
380
  }
381
381
 
382
382
  :host(.radio-disabled) .radio-icon::after {
package/dist/collection/components/radio-group/radio-group.ionic.css CHANGED
@@ -89,14 +89,14 @@ ion-radio-group {
89
89
  font-size: var(--ion-font-size-350, 0.875rem);
90
90
  font-weight: var(--ion-font-weight-regular, 400);
91
91
  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
92
- line-height: var(--ion-font-line-height-600, 24px);
92
+ line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
93
93
  text-decoration: none;
94
94
  text-transform: none;
95
- margin-bottom: var(--ion-space-400, 16px);
95
+ margin-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
96
96
  }
97
97
 
98
98
  .radio-group-top .error-text {
99
- color: var(--ion-semantics-danger-800, #bf2222);
99
+ color: var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222));
100
100
  }
101
101
 
102
102
  .radio-group-top .helper-text {
@@ -105,23 +105,23 @@ ion-radio-group {
105
105
 
106
106
  ion-list .radio-group-top {
107
107
  /* stylelint-disable */
108
- padding-right: var(--ion-space-400, 16px);
109
- padding-left: calc(var(--ion-space-400, 16px) + var(--ion-safe-area-left, 0px));
108
+ padding-right: var(--ion-space-400, var(--ion-scale-400, 16px));
109
+ padding-left: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-left, 0px));
110
110
  /* stylelint-enable */
111
111
  }
112
112
  :host-context([dir=rtl]) ion-list .radio-group-top {
113
- padding-right: calc(var(--ion-space-400, 16px) + var(--ion-safe-area-right, 0px));
114
- padding-left: var(--ion-space-400, 16px);
113
+ padding-right: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-right, 0px));
114
+ padding-left: var(--ion-space-400, var(--ion-scale-400, 16px));
115
115
  }
116
116
 
117
117
  [dir=rtl] ion-list .radio-group-top {
118
- padding-right: calc(var(--ion-space-400, 16px) + var(--ion-safe-area-right, 0px));
119
- padding-left: var(--ion-space-400, 16px);
118
+ padding-right: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-right, 0px));
119
+ padding-left: var(--ion-space-400, var(--ion-scale-400, 16px));
120
120
  }
121
121
 
122
122
  @supports selector(:dir(rtl)) {
123
123
  ion-list .radio-group-top:dir(rtl) {
124
- padding-right: calc(var(--ion-space-400, 16px) + var(--ion-safe-area-right, 0px));
125
- padding-left: var(--ion-space-400, 16px);
124
+ padding-right: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-right, 0px));
125
+ padding-left: var(--ion-space-400, var(--ion-scale-400, 16px));
126
126
  }
127
127
  }
package/dist/collection/components/range/range.ionic.css CHANGED
@@ -354,26 +354,26 @@ Do not edit directly, this file was auto-generated.
354
354
  --knob-handle-size: var(--ion-scale-1000, 40px);
355
355
  --bar-height: var(--ion-scale-200, 8px);
356
356
  --bar-background: var(--ion-primitives-neutral-100, #f5f5f5);
357
- --bar-background-active: var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));
358
- --bar-border-radius: var(--ion-border-radius-400, 16px);
357
+ --bar-background-active: var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));
358
+ --bar-border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
359
359
  --height: var(--ion-scale-1000, 40px);
360
360
  font-size: var(--ion-font-size-350, 0.875rem);
361
361
  font-weight: var(--ion-font-weight-regular, 400);
362
362
  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
363
- line-height: var(--ion-font-line-height-600, 24px);
363
+ line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
364
364
  text-decoration: none;
365
365
  text-transform: none;
366
366
  z-index: var(--ion-z-index-100, 100);
367
367
  }
368
368
 
369
369
  :host(.range-item-start-adjustment) {
370
- -webkit-padding-start: var(--ion-space-600, 24px);
371
- padding-inline-start: var(--ion-space-600, 24px);
370
+ -webkit-padding-start: var(--ion-space-600, var(--ion-scale-600, 24px));
371
+ padding-inline-start: var(--ion-space-600, var(--ion-scale-600, 24px));
372
372
  }
373
373
 
374
374
  :host(.range-item-end-adjustment) {
375
- -webkit-padding-end: var(--ion-space-600, 24px);
376
- padding-inline-end: var(--ion-space-600, 24px);
375
+ -webkit-padding-end: var(--ion-space-600, var(--ion-scale-600, 24px));
376
+ padding-inline-end: var(--ion-space-600, var(--ion-scale-600, 24px));
377
377
  }
378
378
 
379
379
  :host(.ion-color) .range-bar-active,
@@ -388,15 +388,15 @@ Do not edit directly, this file was auto-generated.
388
388
  ::slotted([slot=start]) {
389
389
  -webkit-margin-start: 0;
390
390
  margin-inline-start: 0;
391
- -webkit-margin-end: var(--ion-space-400, 16px);
392
- margin-inline-end: var(--ion-space-400, 16px);
391
+ -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
392
+ margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
393
393
  margin-top: 0;
394
394
  margin-bottom: 0;
395
395
  }
396
396
 
397
397
  ::slotted([slot=end]) {
398
- -webkit-margin-start: var(--ion-space-400, 16px);
399
- margin-inline-start: var(--ion-space-400, 16px);
398
+ -webkit-margin-start: var(--ion-space-400, var(--ion-scale-400, 16px));
399
+ margin-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
400
400
  -webkit-margin-end: 0;
401
401
  margin-inline-end: 0;
402
402
  margin-top: 0;
@@ -420,7 +420,7 @@ Do not edit directly, this file was auto-generated.
420
420
  * overlapping the range. The buffer is added to the
421
421
  * bottom of the range label instead of the host.
422
422
  */
423
- padding-top: calc(var(--ion-space-100, 4px) + var(--ion-scale-600, 24px));
423
+ padding-top: calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-scale-600, 24px));
424
424
  }
425
425
 
426
426
  :host(.range-has-pin.range-label-placement-stacked) .label-text-wrapper {
@@ -429,7 +429,7 @@ Do not edit directly, this file was auto-generated.
429
429
  * margin to the bottom of the label, it provides a buffer
430
430
  * for the pin to move into when it is pressed.
431
431
  */
432
- margin-bottom: calc(var(--ion-space-200, 8px) + var(--ion-font-size-300, 0.75rem));
432
+ margin-bottom: calc(var(--ion-space-200, var(--ion-scale-200, 8px)) + var(--ion-font-size-300, 0.75rem));
433
433
  }
434
434
 
435
435
  .range-bar-active {
@@ -448,7 +448,7 @@ Do not edit directly, this file was auto-generated.
448
448
  .range-tick {
449
449
  -webkit-margin-start: calc(var(--ion-scale-100, 4px) * -0.5);
450
450
  margin-inline-start: calc(var(--ion-scale-100, 4px) * -0.5);
451
- border-radius: var(--ion-border-radius-0, 0px);
451
+ border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
452
452
  position: absolute;
453
453
  top: calc(var(--height) * 0.5 - var(--ion-scale-300, 12px) * 0.5);
454
454
  width: var(--ion-scale-100, 4px);
@@ -462,7 +462,7 @@ Do not edit directly, this file was auto-generated.
462
462
  }
463
463
 
464
464
  .range-pin {
465
- padding-bottom: var(--ion-space-100, 4px);
465
+ padding-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
466
466
  min-width: var(--ion-scale-700, 28px);
467
467
  transform: translate3d(0, -100%, 0);
468
468
  background: transparent;
@@ -471,9 +471,9 @@ Do not edit directly, this file was auto-generated.
471
471
  }
472
472
 
473
473
  .range-knob {
474
- border-width: var(--ion-border-size-025, 1px);
474
+ border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
475
475
  border-style: var(--ion-border-style-solid, solid);
476
- border-color: var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));
476
+ border-color: var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));
477
477
  box-sizing: border-box;
478
478
  }
479
479
 
@@ -489,8 +489,8 @@ Do not edit directly, this file was auto-generated.
489
489
  */
490
490
  -webkit-margin-start: 0;
491
491
  margin-inline-start: 0;
492
- -webkit-margin-end: var(--ion-space-400, 16px);
493
- margin-inline-end: var(--ion-space-400, 16px);
492
+ -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
493
+ margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
494
494
  margin-top: 0;
495
495
  margin-bottom: 0;
496
496
  }
@@ -501,8 +501,8 @@ Do not edit directly, this file was auto-generated.
501
501
  * the range should be on the start
502
502
  * when the label sits at the end.
503
503
  */
504
- -webkit-margin-start: var(--ion-space-400, 16px);
505
- margin-inline-start: var(--ion-space-400, 16px);
504
+ -webkit-margin-start: var(--ion-space-400, var(--ion-scale-400, 16px));
505
+ margin-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
506
506
  -webkit-margin-end: 0;
507
507
  margin-inline-end: 0;
508
508
  margin-top: 0;
@@ -517,8 +517,8 @@ Do not edit directly, this file was auto-generated.
517
517
  */
518
518
  -webkit-margin-start: 0;
519
519
  margin-inline-start: 0;
520
- -webkit-margin-end: var(--ion-space-400, 16px);
521
- margin-inline-end: var(--ion-space-400, 16px);
520
+ -webkit-margin-end: var(--ion-space-400, var(--ion-scale-400, 16px));
521
+ margin-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
522
522
  margin-top: 0;
523
523
  margin-bottom: 0;
524
524
  }
@@ -532,7 +532,7 @@ Do not edit directly, this file was auto-generated.
532
532
  */
533
533
  margin-left: 0;
534
534
  margin-right: 0;
535
- margin-bottom: var(--ion-space-400, 16px);
535
+ margin-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
536
536
  /**
537
537
  * Label text should not extend
538
538
  * beyond the bounds of the range.
@@ -541,15 +541,15 @@ Do not edit directly, this file was auto-generated.
541
541
  }
542
542
 
543
543
  :host(.in-item.range-label-placement-stacked) .label-text-wrapper {
544
- margin-top: var(--ion-space-250, 10px);
545
- margin-bottom: var(--ion-space-400, 16px);
544
+ margin-top: var(--ion-space-250, var(--ion-scale-250, 10px));
545
+ margin-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
546
546
  }
547
547
 
548
548
  :host(.in-item.range-label-placement-stacked) .native-wrapper {
549
- margin-bottom: var(--ion-space-0, 0px);
549
+ margin-bottom: var(--ion-space-0, var(--ion-scale-0, 0px));
550
550
  }
551
551
 
552
552
  .range-knob-handle.ion-focused .range-knob {
553
- outline-offset: var(--ion-border-size-050, 2px);
554
- outline: var(--ion-border-size-050, 2px) var(--ion-border-style-solid, solid) var(--ion-border-focus-default, #b5c0f7);
553
+ outline-offset: var(--ion-border-size-050, var(--ion-scale-050, 2px));
554
+ outline: var(--ion-border-size-050, var(--ion-scale-050, 2px)) var(--ion-border-style-solid, solid) var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
555
555
  }
package/dist/collection/components/searchbar/searchbar.ionic.css CHANGED
@@ -217,20 +217,20 @@ Do not edit directly, this file was auto-generated.
217
217
  * @prop --focus-ring-color: The color of the ring around the focused element.
218
218
  * @prop --focus-ring-width: The width of the ring around the focused element.
219
219
  */
220
- --background: var(--ion-bg-neutral-subtle-default, #efefef);
221
- --border-radius: var(--ion-border-radius-400, 16px);
220
+ --background: var(--ion-bg-neutral-subtle-default, var(--ion-primitives-neutral-200, #efefef));
221
+ --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
222
222
  --box-shadow: none;
223
223
  --cancel-button-color: var(--ion-primitives-neutral-800, #626262);
224
224
  --clear-button-color: var(--ion-primitives-neutral-1000, #3b3b3b);
225
225
  --color: var(--ion-primitives-neutral-1200, #242424);
226
- --icon-color: var(--ion-icon-subtlest, #626262);
227
- --placeholder-color: var(--ion-text-subtlest, #626262);
228
- --focus-ring-color: var(--ion-border-focus-default, #b5c0f7);
229
- --focus-ring-width: var(--ion-border-size-050, 2px);
226
+ --icon-color: var(--ion-icon-subtlest, var(--ion-primitives-neutral-800, #626262));
227
+ --placeholder-color: var(--ion-text-subtlest, var(--ion-primitives-neutral-800, #626262));
228
+ --focus-ring-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
229
+ --focus-ring-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
230
230
  font-size: var(--ion-font-size-350, 0.875rem);
231
231
  font-weight: var(--ion-font-weight-regular, 400);
232
232
  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
233
- line-height: var(--ion-font-line-height-600, 24px);
233
+ line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
234
234
  text-decoration: none;
235
235
  text-transform: none;
236
236
  padding-left: 0;
@@ -245,8 +245,8 @@ Do not edit directly, this file was auto-generated.
245
245
  }
246
246
 
247
247
  .searchbar-input {
248
- padding-top: var(--ion-space-300, 12px);
249
- padding-bottom: var(--ion-space-300, 12px);
248
+ padding-top: var(--ion-space-300, var(--ion-scale-300, 12px));
249
+ padding-bottom: var(--ion-space-300, var(--ion-scale-300, 12px));
250
250
  text-overflow: ellipsis;
251
251
  contain: strict;
252
252
  }
@@ -276,13 +276,13 @@ Do not edit directly, this file was auto-generated.
276
276
 
277
277
  .searchbar-clear-button:focus-visible,
278
278
  .searchbar-cancel-button:focus-visible ion-icon {
279
- border-radius: var(--ion-border-radius-100, 4px);
280
- outline: var(--ion-border-size-050, 2px) var(--ion-border-style-solid, solid) var(--ion-border-focus-default, #b5c0f7);
279
+ border-radius: var(--ion-border-radius-100, var(--ion-scale-100, 4px));
280
+ outline: var(--ion-border-size-050, var(--ion-scale-050, 2px)) var(--ion-border-style-solid, solid) var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
281
281
  opacity: 1;
282
282
  }
283
283
 
284
284
  :host(.searchbar-has-value) {
285
- --icon-color: var(--ion-icon-default, #242424);
285
+ --icon-color: var(--ion-icon-default, var(--ion-primitives-neutral-1200, #242424));
286
286
  }
287
287
 
288
288
  :host(.in-toolbar.searchbar-should-show-cancel) .searchbar-cancel-button {
@@ -295,7 +295,7 @@ Do not edit directly, this file was auto-generated.
295
295
  */
296
296
  }
297
297
  :host(.in-toolbar.searchbar-should-show-cancel) .searchbar-cancel-button {
298
- inset-inline-start: var(--ion-space-200, 8px);
298
+ inset-inline-start: var(--ion-space-200, var(--ion-scale-200, 8px));
299
299
  }
300
300
 
301
301
  /* Hover */
@@ -322,22 +322,22 @@ Do not edit directly, this file was auto-generated.
322
322
  /* Disabled */
323
323
  :host(.searchbar-disabled) {
324
324
  --color: var(--ion-primitives-neutral-500, #a2a2a2);
325
- --icon-color: var(--ion-icon-disabled, #a2a2a2);
326
- --placeholder-color: var(--ion-text-disabled, #a2a2a2);
325
+ --icon-color: var(--ion-icon-disabled, var(--ion-primitives-neutral-500, #a2a2a2));
326
+ --placeholder-color: var(--ion-text-disabled, var(--ion-primitives-neutral-500, #a2a2a2));
327
327
  cursor: default;
328
328
  pointer-events: none;
329
329
  }
330
330
 
331
331
  :host(.searchbar-shape-soft) {
332
- --border-radius: var(--ion-border-radius-200, 8px);
332
+ --border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
333
333
  }
334
334
 
335
335
  :host(.searchbar-shape-round) {
336
- --border-radius: var(--ion-border-radius-400, 16px);
336
+ --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
337
337
  }
338
338
 
339
339
  :host(.searchbar-shape-rectangular) {
340
- --border-radius: var(--ion-border-radius-0, 0px);
340
+ --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
341
341
  }
342
342
 
343
343
  /* Small */
@@ -351,10 +351,10 @@ Do not edit directly, this file was auto-generated.
351
351
  * desired padding from design,
352
352
  * no trailing icons.
353
353
  */
354
- -webkit-padding-start: var(--ion-space-300, 12px);
355
- padding-inline-start: var(--ion-space-300, 12px);
356
- -webkit-padding-end: var(--ion-space-300, 12px);
357
- padding-inline-end: var(--ion-space-300, 12px);
354
+ -webkit-padding-start: var(--ion-space-300, var(--ion-scale-300, 12px));
355
+ padding-inline-start: var(--ion-space-300, var(--ion-scale-300, 12px));
356
+ -webkit-padding-end: var(--ion-space-300, var(--ion-scale-300, 12px));
357
+ padding-inline-end: var(--ion-space-300, var(--ion-scale-300, 12px));
358
358
  height: var(--ion-scale-1000, 40px);
359
359
  }
360
360
 
@@ -371,10 +371,10 @@ Do not edit directly, this file was auto-generated.
371
371
  * desired padding from design,
372
372
  * no trailing icons.
373
373
  */
374
- -webkit-padding-start: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
375
- padding-inline-start: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
376
- -webkit-padding-end: var(--ion-space-300, 12px);
377
- padding-inline-end: var(--ion-space-300, 12px);
374
+ -webkit-padding-start: calc(var(--ion-space-300, var(--ion-scale-300, 12px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
375
+ padding-inline-start: calc(var(--ion-space-300, var(--ion-scale-300, 12px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
376
+ -webkit-padding-end: var(--ion-space-300, var(--ion-scale-300, 12px));
377
+ padding-inline-end: var(--ion-space-300, var(--ion-scale-300, 12px));
378
378
  }
379
379
 
380
380
  /* Small with Leading Icons and Trailing Icons */
@@ -391,10 +391,10 @@ Do not edit directly, this file was auto-generated.
391
391
  * the size of the trailing icon (clear),
392
392
  * and the gap between the icon and the input.
393
393
  */
394
- -webkit-padding-start: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
395
- padding-inline-start: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
396
- -webkit-padding-end: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
397
- padding-inline-end: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
394
+ -webkit-padding-start: calc(var(--ion-space-300, var(--ion-scale-300, 12px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
395
+ padding-inline-start: calc(var(--ion-space-300, var(--ion-scale-300, 12px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
396
+ -webkit-padding-end: calc(var(--ion-space-300, var(--ion-scale-300, 12px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
397
+ padding-inline-end: calc(var(--ion-space-300, var(--ion-scale-300, 12px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
398
398
  }
399
399
 
400
400
  /* Small with Trailing Icons */
@@ -409,19 +409,19 @@ Do not edit directly, this file was auto-generated.
409
409
  * the size of the trailing icon (clear),
410
410
  * and the gap between the icon and the input.
411
411
  */
412
- -webkit-padding-start: var(--ion-space-300, 12px);
413
- padding-inline-start: var(--ion-space-300, 12px);
414
- -webkit-padding-end: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
415
- padding-inline-end: calc(var(--ion-space-300, 12px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
412
+ -webkit-padding-start: var(--ion-space-300, var(--ion-scale-300, 12px));
413
+ padding-inline-start: var(--ion-space-300, var(--ion-scale-300, 12px));
414
+ -webkit-padding-end: calc(var(--ion-space-300, var(--ion-scale-300, 12px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
415
+ padding-inline-end: calc(var(--ion-space-300, var(--ion-scale-300, 12px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
416
416
  }
417
417
 
418
418
  :host(.searchbar-size-small) .searchbar-search-icon,
419
419
  :host(.searchbar-size-small) .searchbar-cancel-button {
420
- inset-inline-start: var(--ion-space-300, 12px);
420
+ inset-inline-start: var(--ion-space-300, var(--ion-scale-300, 12px));
421
421
  }
422
422
 
423
423
  :host(.searchbar-size-small) .searchbar-clear-button {
424
- inset-inline-end: var(--ion-space-300, 12px);
424
+ inset-inline-end: var(--ion-space-300, var(--ion-scale-300, 12px));
425
425
  }
426
426
 
427
427
  /* Medium */
@@ -435,10 +435,10 @@ Do not edit directly, this file was auto-generated.
435
435
  * desired padding from design,
436
436
  * no trailing icons.
437
437
  */
438
- -webkit-padding-start: var(--ion-space-400, 16px);
439
- padding-inline-start: var(--ion-space-400, 16px);
440
- -webkit-padding-end: var(--ion-space-400, 16px);
441
- padding-inline-end: var(--ion-space-400, 16px);
438
+ -webkit-padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
439
+ padding-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
440
+ -webkit-padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
441
+ padding-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
442
442
  height: var(--ion-scale-1200, 48px);
443
443
  }
444
444
 
@@ -455,10 +455,10 @@ Do not edit directly, this file was auto-generated.
455
455
  * desired padding from design,
456
456
  * no trailing icons.
457
457
  */
458
- -webkit-padding-start: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
459
- padding-inline-start: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
460
- -webkit-padding-end: var(--ion-space-400, 16px);
461
- padding-inline-end: var(--ion-space-400, 16px);
458
+ -webkit-padding-start: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
459
+ padding-inline-start: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
460
+ -webkit-padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
461
+ padding-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
462
462
  }
463
463
 
464
464
  /* Medium with Leading Icons and Trailing Icons */
@@ -475,10 +475,10 @@ Do not edit directly, this file was auto-generated.
475
475
  * the size of the trailing icon (clear),
476
476
  * and the gap between the icon and the input.
477
477
  */
478
- -webkit-padding-start: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
479
- padding-inline-start: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
480
- -webkit-padding-end: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
481
- padding-inline-end: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
478
+ -webkit-padding-start: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
479
+ padding-inline-start: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
480
+ -webkit-padding-end: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
481
+ padding-inline-end: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
482
482
  }
483
483
 
484
484
  /* Medium with Trailing Icons */
@@ -493,19 +493,19 @@ Do not edit directly, this file was auto-generated.
493
493
  * the size of the trailing icon (clear),
494
494
  * and the gap between the icon and the input.
495
495
  */
496
- -webkit-padding-start: var(--ion-space-400, 16px);
497
- padding-inline-start: var(--ion-space-400, 16px);
498
- -webkit-padding-end: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
499
- padding-inline-end: calc(var(--ion-space-400, 16px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
496
+ -webkit-padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
497
+ padding-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
498
+ -webkit-padding-end: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
499
+ padding-inline-end: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
500
500
  }
501
501
 
502
502
  :host(.searchbar-size-medium) .searchbar-search-icon,
503
503
  :host(.searchbar-size-medium) .searchbar-cancel-button {
504
- inset-inline-start: var(--ion-space-400, 16px);
504
+ inset-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
505
505
  }
506
506
 
507
507
  :host(.searchbar-size-medium) .searchbar-clear-button {
508
- inset-inline-end: var(--ion-space-400, 16px);
508
+ inset-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
509
509
  }
510
510
 
511
511
  :host(.in-toolbar.searchbar-size-small.searchbar-should-show-cancel) .searchbar-input,
@@ -516,7 +516,7 @@ Do not edit directly, this file was auto-generated.
516
516
  * the size of the leading icon (search or cancel),
517
517
  * and the gap between the icon and the input.
518
518
  */
519
- padding-inline-start: var(--ion-space-800, 32px);
519
+ padding-inline-start: var(--ion-space-800, var(--ion-scale-800, 32px));
520
520
  }
521
521
 
522
522
  /* Large */
@@ -531,8 +531,8 @@ Do not edit directly, this file was auto-generated.
531
531
  }
532
532
 
533
533
  :host(.searchbar-size-large) .searchbar-input {
534
- padding-top: var(--ion-space-400, 16px);
535
- padding-bottom: var(--ion-space-400, 16px);
534
+ padding-top: var(--ion-space-400, var(--ion-scale-400, 16px));
535
+ padding-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
536
536
  /**
537
537
  * Padding start is based on
538
538
  * desired padding from design,
@@ -544,10 +544,10 @@ Do not edit directly, this file was auto-generated.
544
544
  * the size of the trailing icon (clear),
545
545
  * and the gap between the icon and the input.
546
546
  */
547
- -webkit-padding-start: var(--ion-space-500, 20px);
548
- padding-inline-start: var(--ion-space-500, 20px);
549
- -webkit-padding-end: var(--ion-space-500, 20px);
550
- padding-inline-end: var(--ion-space-500, 20px);
547
+ -webkit-padding-start: var(--ion-space-500, var(--ion-scale-500, 20px));
548
+ padding-inline-start: var(--ion-space-500, var(--ion-scale-500, 20px));
549
+ -webkit-padding-end: var(--ion-space-500, var(--ion-scale-500, 20px));
550
+ padding-inline-end: var(--ion-space-500, var(--ion-scale-500, 20px));
551
551
  height: var(--ion-scale-1400, 56px);
552
552
  }
553
553
 
@@ -564,10 +564,10 @@ Do not edit directly, this file was auto-generated.
564
564
  * desired padding from design,
565
565
  * no trailing icons.
566
566
  */
567
- -webkit-padding-start: calc(var(--ion-space-500, 20px) + var(--ion-scale-500, 20px) + var(--ion-space-200, 8px));
568
- padding-inline-start: calc(var(--ion-space-500, 20px) + var(--ion-scale-500, 20px) + var(--ion-space-200, 8px));
569
- -webkit-padding-end: var(--ion-space-500, 20px);
570
- padding-inline-end: var(--ion-space-500, 20px);
567
+ -webkit-padding-start: calc(var(--ion-space-500, var(--ion-scale-500, 20px)) + var(--ion-scale-500, 20px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
568
+ padding-inline-start: calc(var(--ion-space-500, var(--ion-scale-500, 20px)) + var(--ion-scale-500, 20px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
569
+ -webkit-padding-end: var(--ion-space-500, var(--ion-scale-500, 20px));
570
+ padding-inline-end: var(--ion-space-500, var(--ion-scale-500, 20px));
571
571
  }
572
572
 
573
573
  /* Large with Leading Icons and Trailing Icons */
@@ -584,10 +584,10 @@ Do not edit directly, this file was auto-generated.
584
584
  * the size of the trailing icon (clear),
585
585
  * and the gap between the icon and the input.
586
586
  */
587
- -webkit-padding-start: calc(var(--ion-space-500, 20px) + var(--ion-scale-500, 20px) + var(--ion-space-200, 8px));
588
- padding-inline-start: calc(var(--ion-space-500, 20px) + var(--ion-scale-500, 20px) + var(--ion-space-200, 8px));
589
- -webkit-padding-end: calc(var(--ion-space-500, 20px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
590
- padding-inline-end: calc(var(--ion-space-500, 20px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
587
+ -webkit-padding-start: calc(var(--ion-space-500, var(--ion-scale-500, 20px)) + var(--ion-scale-500, 20px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
588
+ padding-inline-start: calc(var(--ion-space-500, var(--ion-scale-500, 20px)) + var(--ion-scale-500, 20px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
589
+ -webkit-padding-end: calc(var(--ion-space-500, var(--ion-scale-500, 20px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
590
+ padding-inline-end: calc(var(--ion-space-500, var(--ion-scale-500, 20px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
591
591
  }
592
592
 
593
593
  /* Large with Trailing Icons */
@@ -602,10 +602,10 @@ Do not edit directly, this file was auto-generated.
602
602
  * the size of the trailing icon (clear),
603
603
  * and the gap between the icon and the input.
604
604
  */
605
- -webkit-padding-start: var(--ion-space-500, 20px);
606
- padding-inline-start: var(--ion-space-500, 20px);
607
- -webkit-padding-end: calc(var(--ion-space-500, 20px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
608
- padding-inline-end: calc(var(--ion-space-500, 20px) + var(--ion-scale-400, 16px) + var(--ion-space-200, 8px));
605
+ -webkit-padding-start: var(--ion-space-500, var(--ion-scale-500, 20px));
606
+ padding-inline-start: var(--ion-space-500, var(--ion-scale-500, 20px));
607
+ -webkit-padding-end: calc(var(--ion-space-500, var(--ion-scale-500, 20px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
608
+ padding-inline-end: calc(var(--ion-space-500, var(--ion-scale-500, 20px)) + var(--ion-scale-400, 16px) + var(--ion-space-200, var(--ion-scale-200, 8px)));
609
609
  }
610
610
 
611
611
  :host(.in-toolbar.searchbar-size-large.searchbar-should-show-cancel) .searchbar-input {
@@ -615,14 +615,14 @@ Do not edit directly, this file was auto-generated.
615
615
  * the size of the leading icon (search or cancel),
616
616
  * and the gap between the icon and the input.
617
617
  */
618
- padding-inline-start: var(--ion-space-900, 36px);
618
+ padding-inline-start: var(--ion-space-900, var(--ion-scale-900, 36px));
619
619
  }
620
620
 
621
621
  :host(.searchbar-size-large) .searchbar-search-icon,
622
622
  :host(.searchbar-size-large) .searchbar-cancel-button {
623
- inset-inline-start: var(--ion-space-500, 20px);
623
+ inset-inline-start: var(--ion-space-500, var(--ion-scale-500, 20px));
624
624
  }
625
625
 
626
626
  :host(.searchbar-size-large) .searchbar-clear-button {
627
- inset-inline-end: var(--ion-space-500, 20px);
627
+ inset-inline-end: var(--ion-space-500, var(--ion-scale-500, 20px));
628
628
  }