@ionic/core 8.5.5-dev.11747137265.184b7749 → 8.5.5-dev.11747843377.1fcc3e84

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 (271) 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 +3 -3
  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/spinner.js +1 -1
  36. package/components/title.js +1 -1
  37. package/components/toolbar.js +1 -1
  38. package/css/ionic/bundle.ionic.css +1 -1
  39. package/css/ionic/bundle.ionic.css.map +1 -1
  40. package/css/ionic/core.ionic.css +1 -1
  41. package/css/ionic/core.ionic.css.map +1 -1
  42. package/css/ionic/global.bundle.ionic.css +1 -1
  43. package/css/ionic/global.bundle.ionic.css.map +1 -1
  44. package/css/ionic/ionic-swiper.ionic.css +1 -1
  45. package/css/ionic/ionic-swiper.ionic.css.map +1 -1
  46. package/css/ionic/link.ionic.css +1 -1
  47. package/css/ionic/link.ionic.css.map +1 -1
  48. package/css/ionic/typography.ionic.css +1 -1
  49. package/css/ionic/typography.ionic.css.map +1 -1
  50. package/css/ionic/utils.bundle.ionic.css +1 -1
  51. package/css/ionic/utils.bundle.ionic.css.map +1 -1
  52. package/dist/cjs/ion-accordion_2.cjs.entry.js +2 -2
  53. package/dist/cjs/ion-app_8.cjs.entry.js +3 -3
  54. package/dist/cjs/ion-avatar_3.cjs.entry.js +2 -2
  55. package/dist/cjs/ion-button_2.cjs.entry.js +7 -6
  56. package/dist/cjs/ion-card_5.cjs.entry.js +4 -4
  57. package/dist/cjs/ion-checkbox.cjs.entry.js +1 -1
  58. package/dist/cjs/ion-chip.cjs.entry.js +1 -1
  59. package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
  60. package/dist/cjs/ion-divider.cjs.entry.js +1 -1
  61. package/dist/cjs/ion-input.cjs.entry.js +1 -1
  62. package/dist/cjs/ion-item-option_3.cjs.entry.js +2 -2
  63. package/dist/cjs/ion-item_8.cjs.entry.js +3 -3
  64. package/dist/cjs/ion-modal.cjs.entry.js +1 -1
  65. package/dist/cjs/ion-progress-bar.cjs.entry.js +3 -3
  66. package/dist/cjs/ion-radio_2.cjs.entry.js +2 -2
  67. package/dist/cjs/ion-range.cjs.entry.js +1 -1
  68. package/dist/cjs/ion-searchbar.cjs.entry.js +1 -1
  69. package/dist/cjs/ion-segment_2.cjs.entry.js +1 -1
  70. package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
  71. package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
  72. package/dist/cjs/ion-spinner.cjs.entry.js +1 -1
  73. package/dist/cjs/ion-tab-bar_2.cjs.entry.js +2 -2
  74. package/dist/cjs/ion-textarea.cjs.entry.js +1 -1
  75. package/dist/cjs/ion-toast.cjs.entry.js +1 -1
  76. package/dist/cjs/ion-toggle.cjs.entry.js +1 -1
  77. package/dist/collection/components/accordion/accordion.ionic.css +20 -20
  78. package/dist/collection/components/accordion-group/accordion-group.ionic.css +14 -14
  79. package/dist/collection/components/avatar/avatar.ionic.css +25 -25
  80. package/dist/collection/components/badge/badge.ionic.css +20 -20
  81. package/dist/collection/components/button/button.ionic.css +56 -57
  82. package/dist/collection/components/button/button.js +9 -8
  83. package/dist/collection/components/card/card.ionic.css +3 -3
  84. package/dist/collection/components/card-content/card-content.ionic.css +10 -10
  85. package/dist/collection/components/card-header/card-header.ionic.css +7 -7
  86. package/dist/collection/components/card-subtitle/card-subtitle.ionic.css +1 -1
  87. package/dist/collection/components/checkbox/checkbox.ionic.css +29 -29
  88. package/dist/collection/components/chip/chip.ionic.css +17 -17
  89. package/dist/collection/components/datetime/datetime.ionic.css +53 -53
  90. package/dist/collection/components/divider/divider.ionic.css +15 -15
  91. package/dist/collection/components/header/header.ionic.css +3 -3
  92. package/dist/collection/components/input/input.ionic.css +28 -28
  93. package/dist/collection/components/item/item.ionic.css +16 -16
  94. package/dist/collection/components/item-option/item-option.ionic.css +22 -22
  95. package/dist/collection/components/item-options/item-options.ionic.css +5 -5
  96. package/dist/collection/components/list/list.ionic.css +27 -27
  97. package/dist/collection/components/list-header/list-header.ionic.css +7 -7
  98. package/dist/collection/components/modal/modal.ionic.css +13 -13
  99. package/dist/collection/components/progress-bar/progress-bar.ionic.css +9 -9
  100. package/dist/collection/components/progress-bar/progress-bar.ios.css +5 -5
  101. package/dist/collection/components/progress-bar/progress-bar.md.css +5 -5
  102. package/dist/collection/components/radio/radio.ionic.css +12 -12
  103. package/dist/collection/components/radio-group/radio-group.ionic.css +11 -11
  104. package/dist/collection/components/range/range.ionic.css +29 -29
  105. package/dist/collection/components/searchbar/searchbar.ionic.css +76 -76
  106. package/dist/collection/components/segment-button/segment-button.ionic.css +14 -14
  107. package/dist/collection/components/select/select.ionic.css +31 -31
  108. package/dist/collection/components/select-modal/select-modal.ionic.css +7 -7
  109. package/dist/collection/components/spinner/spinner.ionic.css +4 -0
  110. package/dist/collection/components/tab-bar/tab-bar.ionic.css +20 -20
  111. package/dist/collection/components/tab-button/tab-button.ionic.css +6 -6
  112. package/dist/collection/components/textarea/textarea.ionic.css +35 -35
  113. package/dist/collection/components/title/title.ionic.css +2 -2
  114. package/dist/collection/components/toast/toast.ionic.css +32 -32
  115. package/dist/collection/components/toggle/toggle.ionic.css +11 -11
  116. package/dist/collection/components/toolbar/toolbar.ionic.css +14 -14
  117. package/dist/docs.json +9 -5
  118. package/dist/esm/ion-accordion_2.entry.js +2 -2
  119. package/dist/esm/ion-app_8.entry.js +3 -3
  120. package/dist/esm/ion-avatar_3.entry.js +2 -2
  121. package/dist/esm/ion-button_2.entry.js +7 -6
  122. package/dist/esm/ion-card_5.entry.js +4 -4
  123. package/dist/esm/ion-checkbox.entry.js +1 -1
  124. package/dist/esm/ion-chip.entry.js +1 -1
  125. package/dist/esm/ion-datetime_3.entry.js +1 -1
  126. package/dist/esm/ion-divider.entry.js +1 -1
  127. package/dist/esm/ion-input.entry.js +1 -1
  128. package/dist/esm/ion-item-option_3.entry.js +2 -2
  129. package/dist/esm/ion-item_8.entry.js +3 -3
  130. package/dist/esm/ion-modal.entry.js +1 -1
  131. package/dist/esm/ion-progress-bar.entry.js +3 -3
  132. package/dist/esm/ion-radio_2.entry.js +2 -2
  133. package/dist/esm/ion-range.entry.js +1 -1
  134. package/dist/esm/ion-searchbar.entry.js +1 -1
  135. package/dist/esm/ion-segment_2.entry.js +1 -1
  136. package/dist/esm/ion-select-modal.entry.js +1 -1
  137. package/dist/esm/ion-select_3.entry.js +1 -1
  138. package/dist/esm/ion-spinner.entry.js +1 -1
  139. package/dist/esm/ion-tab-bar_2.entry.js +2 -2
  140. package/dist/esm/ion-textarea.entry.js +1 -1
  141. package/dist/esm/ion-toast.entry.js +1 -1
  142. package/dist/esm/ion-toggle.entry.js +1 -1
  143. package/dist/esm-es5/ion-accordion_2.entry.js +1 -1
  144. package/dist/esm-es5/ion-app_8.entry.js +1 -1
  145. package/dist/esm-es5/ion-avatar_3.entry.js +1 -1
  146. package/dist/esm-es5/ion-button_2.entry.js +1 -1
  147. package/dist/esm-es5/ion-card_5.entry.js +1 -1
  148. package/dist/esm-es5/ion-checkbox.entry.js +1 -1
  149. package/dist/esm-es5/ion-chip.entry.js +1 -1
  150. package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
  151. package/dist/esm-es5/ion-divider.entry.js +1 -1
  152. package/dist/esm-es5/ion-input.entry.js +1 -1
  153. package/dist/esm-es5/ion-item-option_3.entry.js +1 -1
  154. package/dist/esm-es5/ion-item_8.entry.js +1 -1
  155. package/dist/esm-es5/ion-modal.entry.js +1 -1
  156. package/dist/esm-es5/ion-progress-bar.entry.js +1 -1
  157. package/dist/esm-es5/ion-radio_2.entry.js +1 -1
  158. package/dist/esm-es5/ion-range.entry.js +1 -1
  159. package/dist/esm-es5/ion-searchbar.entry.js +1 -1
  160. package/dist/esm-es5/ion-segment_2.entry.js +1 -1
  161. package/dist/esm-es5/ion-select-modal.entry.js +1 -1
  162. package/dist/esm-es5/ion-select_3.entry.js +1 -1
  163. package/dist/esm-es5/ion-spinner.entry.js +1 -1
  164. package/dist/esm-es5/ion-tab-bar_2.entry.js +1 -1
  165. package/dist/esm-es5/ion-textarea.entry.js +1 -1
  166. package/dist/esm-es5/ion-toast.entry.js +1 -1
  167. package/dist/esm-es5/ion-toggle.entry.js +1 -1
  168. package/dist/html.html-data.json +4 -1
  169. package/dist/ionic/ionic.esm.js +1 -1
  170. package/dist/ionic/p-03f0f489.entry.js +4 -0
  171. package/dist/ionic/p-050d7d1f.entry.js +4 -0
  172. package/dist/ionic/p-19e67d40.system.entry.js +4 -0
  173. package/dist/ionic/p-211efa34.system.entry.js +4 -0
  174. package/dist/ionic/p-21a9241b.system.entry.js +4 -0
  175. package/dist/ionic/p-28253576.system.entry.js +4 -0
  176. package/dist/ionic/{p-19544c40.entry.js → p-2a3df287.entry.js} +1 -1
  177. package/dist/ionic/p-30bae1a8.entry.js +4 -0
  178. package/dist/ionic/p-3f616348.system.entry.js +4 -0
  179. package/dist/ionic/p-41003775.entry.js +4 -0
  180. package/dist/ionic/p-41357931.system.entry.js +4 -0
  181. package/dist/ionic/p-488e56da.system.entry.js +4 -0
  182. package/dist/ionic/p-4b1136bc.system.entry.js +4 -0
  183. package/dist/ionic/p-577c1150.entry.js +4 -0
  184. package/dist/ionic/p-582a5804.system.entry.js +4 -0
  185. package/dist/ionic/p-59d3caf4.entry.js +4 -0
  186. package/dist/ionic/p-5b2f411a.system.entry.js +4 -0
  187. package/dist/ionic/p-5bba46fc.system.entry.js +4 -0
  188. package/dist/ionic/p-5ceac493.entry.js +4 -0
  189. package/dist/ionic/p-5f582e4f.system.entry.js +4 -0
  190. package/dist/ionic/p-63c2257c.system.entry.js +4 -0
  191. package/dist/ionic/{p-93f7ddd5.entry.js → p-6c0e6625.entry.js} +1 -1
  192. package/dist/ionic/p-71d87b11.system.entry.js +4 -0
  193. package/dist/ionic/p-73db2a7e.system.entry.js +4 -0
  194. package/dist/ionic/p-75871b9f.entry.js +4 -0
  195. package/dist/ionic/p-7d1774f8.system.entry.js +4 -0
  196. package/dist/ionic/{p-3e161a46.entry.js → p-85c51a6a.entry.js} +1 -1
  197. package/dist/ionic/p-8a786367.entry.js +4 -0
  198. package/dist/ionic/p-8f56be51.entry.js +4 -0
  199. package/dist/ionic/p-906b0781.entry.js +4 -0
  200. package/dist/ionic/p-9207650a.entry.js +4 -0
  201. package/dist/ionic/p-979f9a47.entry.js +4 -0
  202. package/dist/ionic/p-9acea98c.entry.js +4 -0
  203. package/dist/ionic/p-9bd072c2.system.entry.js +4 -0
  204. package/dist/ionic/p-a8759b16.entry.js +4 -0
  205. package/dist/ionic/p-a8fd8c07.entry.js +4 -0
  206. package/dist/ionic/p-afe776fc.system.entry.js +4 -0
  207. package/dist/ionic/p-b50e9e70.entry.js +4 -0
  208. package/dist/ionic/p-b65e5cc0.system.entry.js +4 -0
  209. package/dist/ionic/p-b8473a42.system.entry.js +4 -0
  210. package/dist/ionic/p-b9298bee.entry.js +4 -0
  211. package/dist/ionic/p-c419b6b0.system.entry.js +4 -0
  212. package/dist/ionic/p-c8b9efc6.entry.js +4 -0
  213. package/dist/ionic/p-db8ffacb.system.js +1 -1
  214. package/dist/ionic/{p-8131e086.system.entry.js → p-e25667a4.system.entry.js} +1 -1
  215. package/dist/ionic/p-e35f0d82.system.entry.js +4 -0
  216. package/dist/ionic/p-f1bf5430.system.entry.js +4 -0
  217. package/dist/ionic/p-f1d7ea25.system.entry.js +4 -0
  218. package/dist/ionic/p-f3219e90.entry.js +4 -0
  219. package/dist/ionic/p-f9d1475d.entry.js +4 -0
  220. package/dist/ionic/p-fdc14546.entry.js +4 -0
  221. package/dist/types/components/button/button.d.ts +5 -4
  222. package/dist/types/components.d.ts +4 -4
  223. package/hydrate/index.js +45 -44
  224. package/hydrate/index.mjs +45 -44
  225. package/package.json +1 -1
  226. package/dist/ionic/p-09072d3b.entry.js +0 -4
  227. package/dist/ionic/p-0d297574.system.entry.js +0 -4
  228. package/dist/ionic/p-16fd70b2.entry.js +0 -4
  229. package/dist/ionic/p-22e704a0.entry.js +0 -4
  230. package/dist/ionic/p-25679df9.system.entry.js +0 -4
  231. package/dist/ionic/p-259dcfa3.entry.js +0 -4
  232. package/dist/ionic/p-25fb485f.system.entry.js +0 -4
  233. package/dist/ionic/p-26d7c6fd.system.entry.js +0 -4
  234. package/dist/ionic/p-3533c471.system.entry.js +0 -4
  235. package/dist/ionic/p-3824cffd.entry.js +0 -4
  236. package/dist/ionic/p-39b0a811.entry.js +0 -4
  237. package/dist/ionic/p-3b98dd61.system.entry.js +0 -4
  238. package/dist/ionic/p-43d6a02c.system.entry.js +0 -4
  239. package/dist/ionic/p-44b1fefc.entry.js +0 -4
  240. package/dist/ionic/p-49664bbc.system.entry.js +0 -4
  241. package/dist/ionic/p-4a767053.entry.js +0 -4
  242. package/dist/ionic/p-548cd1e5.system.entry.js +0 -4
  243. package/dist/ionic/p-67cded2a.system.entry.js +0 -4
  244. package/dist/ionic/p-7c6f71eb.entry.js +0 -4
  245. package/dist/ionic/p-8402b59e.system.entry.js +0 -4
  246. package/dist/ionic/p-840f1c59.entry.js +0 -4
  247. package/dist/ionic/p-84ac0a34.system.entry.js +0 -4
  248. package/dist/ionic/p-85c7c591.system.entry.js +0 -4
  249. package/dist/ionic/p-88aa79f6.entry.js +0 -4
  250. package/dist/ionic/p-940bc10a.system.entry.js +0 -4
  251. package/dist/ionic/p-97a351b5.entry.js +0 -4
  252. package/dist/ionic/p-a47bffd6.system.entry.js +0 -4
  253. package/dist/ionic/p-a6a71315.entry.js +0 -4
  254. package/dist/ionic/p-aba2d55f.system.entry.js +0 -4
  255. package/dist/ionic/p-acee3852.entry.js +0 -4
  256. package/dist/ionic/p-ad3f30b4.system.entry.js +0 -4
  257. package/dist/ionic/p-b5e3859a.entry.js +0 -4
  258. package/dist/ionic/p-b79a47ba.entry.js +0 -4
  259. package/dist/ionic/p-c0b7f342.entry.js +0 -4
  260. package/dist/ionic/p-c18ffa8b.entry.js +0 -4
  261. package/dist/ionic/p-c1e7dbd4.system.entry.js +0 -4
  262. package/dist/ionic/p-c47e7149.system.entry.js +0 -4
  263. package/dist/ionic/p-c847b24b.system.entry.js +0 -4
  264. package/dist/ionic/p-d2314315.system.entry.js +0 -4
  265. package/dist/ionic/p-d6662277.entry.js +0 -4
  266. package/dist/ionic/p-dbbfcd15.entry.js +0 -4
  267. package/dist/ionic/p-dfb63dc2.system.entry.js +0 -4
  268. package/dist/ionic/p-e09bb245.system.entry.js +0 -4
  269. package/dist/ionic/p-ed4cf0aa.system.entry.js +0 -4
  270. package/dist/ionic/p-f6a03670.entry.js +0 -4
  271. package/dist/ionic/p-fec23a6f.entry.js +0 -4
package/dist/collection/components/item-options/item-options.ionic.css CHANGED
@@ -194,29 +194,29 @@ ion-item-options {
194
194
  .item-options-ionic {
195
195
  align-items: center;
196
196
  background: var(--ion-primitives-base-white, #ffffff);
197
- gap: var(--ion-space-100, 4px);
197
+ gap: var(--ion-space-100, var(--ion-scale-100, 4px));
198
198
  }
199
199
 
200
200
  /* stylelint-disable property-disallowed-list */
201
201
  [dir=ltr] .item-options-start ion-item-option:last-child,
202
202
  [dir=rtl] .item-options-start ion-item-option:first-child {
203
- margin-right: var(--ion-space-200, 8px);
203
+ margin-right: var(--ion-space-200, var(--ion-scale-200, 8px));
204
204
  }
205
205
 
206
206
  [dir=ltr] .item-options-start ion-item-option:first-child,
207
207
  [dir=rtl] .item-options-start ion-item-option:last-child {
208
- margin-left: calc(var(--ion-space-200, 8px) + var(--ion-safe-area-left, 0));
208
+ margin-left: calc(var(--ion-space-200, var(--ion-scale-200, 8px)) + var(--ion-safe-area-left, 0));
209
209
  padding-left: initial;
210
210
  }
211
211
 
212
212
  [dir=ltr] .item-options-end ion-item-option:first-child,
213
213
  [dir=rtl] .item-options-end ion-item-option:last-child {
214
- margin-left: var(--ion-space-200, 8px);
214
+ margin-left: var(--ion-space-200, var(--ion-scale-200, 8px));
215
215
  }
216
216
 
217
217
  [dir=ltr] .item-options-end ion-item-option:last-child,
218
218
  [dir=rtl] .item-options-end ion-item-option:first-child {
219
- margin-right: calc(var(--ion-space-200, 8px) + var(--ion-safe-area-right, 0));
219
+ margin-right: calc(var(--ion-space-200, var(--ion-scale-200, 8px)) + var(--ion-safe-area-right, 0));
220
220
  padding-right: initial;
221
221
  }
222
222
 
package/dist/collection/components/list/list.ionic.css CHANGED
@@ -98,12 +98,12 @@ ion-list {
98
98
  }
99
99
 
100
100
  .list-ionic.list-inset {
101
- -webkit-margin-start: var(--ion-space-100, 4px);
102
- margin-inline-start: var(--ion-space-100, 4px);
103
- -webkit-margin-end: var(--ion-space-100, 4px);
104
- margin-inline-end: var(--ion-space-100, 4px);
105
- margin-top: var(--ion-space-100, 4px);
106
- margin-bottom: var(--ion-space-100, 4px);
101
+ -webkit-margin-start: var(--ion-space-100, var(--ion-scale-100, 4px));
102
+ margin-inline-start: var(--ion-space-100, var(--ion-scale-100, 4px));
103
+ -webkit-margin-end: var(--ion-space-100, var(--ion-scale-100, 4px));
104
+ margin-inline-end: var(--ion-space-100, var(--ion-scale-100, 4px));
105
+ margin-top: var(--ion-space-100, var(--ion-scale-100, 4px));
106
+ margin-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
107
107
  }
108
108
 
109
109
  .list-ionic-lines-none .item-lines-default {
@@ -124,8 +124,8 @@ ion-list {
124
124
  */
125
125
  border-start-start-radius: initial;
126
126
  border-start-end-radius: initial;
127
- border-end-end-radius: var(--ion-border-radius-400, 16px);
128
- border-end-start-radius: var(--ion-border-radius-400, 16px);
127
+ border-end-end-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
128
+ border-end-start-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
129
129
  }
130
130
  .list-ionic:has(ion-list-header).list-round ion-list-header + * {
131
131
  /**
@@ -133,8 +133,8 @@ ion-list {
133
133
  * The bottom of the first element should not have a border radius
134
134
  * because that would not look connected to the rest.
135
135
  */
136
- border-start-start-radius: var(--ion-border-radius-400, 16px);
137
- border-start-end-radius: var(--ion-border-radius-400, 16px);
136
+ border-start-start-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
137
+ border-start-end-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
138
138
  border-end-end-radius: initial;
139
139
  border-end-start-radius: initial;
140
140
  }
@@ -146,8 +146,8 @@ ion-list {
146
146
  */
147
147
  border-start-start-radius: initial;
148
148
  border-start-end-radius: initial;
149
- border-end-end-radius: var(--ion-border-radius-200, 8px);
150
- border-end-start-radius: var(--ion-border-radius-200, 8px);
149
+ border-end-end-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
150
+ border-end-start-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
151
151
  }
152
152
  .list-ionic:has(ion-list-header).list-soft ion-list-header + * {
153
153
  /**
@@ -155,8 +155,8 @@ ion-list {
155
155
  * The bottom of the first element should not have a border radius
156
156
  * because that would not look connected to the rest.
157
157
  */
158
- border-start-start-radius: var(--ion-border-radius-200, 8px);
159
- border-start-end-radius: var(--ion-border-radius-200, 8px);
158
+ border-start-start-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
159
+ border-start-end-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
160
160
  border-end-end-radius: initial;
161
161
  border-end-start-radius: initial;
162
162
  }
@@ -168,8 +168,8 @@ ion-list {
168
168
  */
169
169
  border-start-start-radius: initial;
170
170
  border-start-end-radius: initial;
171
- border-end-end-radius: var(--ion-border-radius-0, 0px);
172
- border-end-start-radius: var(--ion-border-radius-0, 0px);
171
+ border-end-end-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
172
+ border-end-start-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
173
173
  }
174
174
  .list-ionic:has(ion-list-header).list-rectangular ion-list-header + * {
175
175
  /**
@@ -177,8 +177,8 @@ ion-list {
177
177
  * The bottom of the first element should not have a border radius
178
178
  * because that would not look connected to the rest.
179
179
  */
180
- border-start-start-radius: var(--ion-border-radius-0, 0px);
181
- border-start-end-radius: var(--ion-border-radius-0, 0px);
180
+ border-start-start-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
181
+ border-start-end-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
182
182
  border-end-end-radius: initial;
183
183
  border-end-start-radius: initial;
184
184
  }
@@ -189,26 +189,26 @@ ion-list {
189
189
  /* Rectangular */
190
190
  }
191
191
  .list-ionic:not(:has(ion-list-header)).list-round {
192
- border-radius: var(--ion-border-radius-400, 16px);
192
+ border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
193
193
  }
194
194
  .list-ionic:not(:has(ion-list-header)).list-soft {
195
- border-radius: var(--ion-border-radius-200, 8px);
195
+ border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
196
196
  }
197
197
  .list-ionic:not(:has(ion-list-header)).list-rectangular {
198
- border-radius: var(--ion-border-radius-0, 0px);
198
+ border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
199
199
  }
200
200
 
201
201
  .list-ionic-lines-none .item-lines-default {
202
- --inner-border-width: var(--ion-border-size-0, 0px);
203
- --border-width: var(--ion-border-size-0, 0px);
202
+ --inner-border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px));
203
+ --border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px));
204
204
  }
205
205
 
206
206
  .list-ionic-lines-full .item-lines-default {
207
- --inner-border-width: var(--ion-border-size-0, 0px);
208
- --border-width: var(--ion-border-size-0, 0px) var(--ion-border-size-0, 0px) var(--ion-border-size-025, 1px) var(--ion-border-size-0, 0px);
207
+ --inner-border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px));
208
+ --border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px)) var(--ion-border-size-0, var(--ion-scale-0, 0px)) var(--ion-border-size-025, var(--ion-scale-025, 1px)) var(--ion-border-size-0, var(--ion-scale-0, 0px));
209
209
  }
210
210
 
211
211
  .list-ionic-lines-inset .item-lines-default {
212
- --inner-border-width: var(--ion-border-size-0, 0px) var(--ion-border-size-0, 0px) var(--ion-border-size-025, 1px) var(--ion-border-size-0, 0px);
213
- --border-width: var(--ion-border-size-0, 0px);
212
+ --inner-border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px)) var(--ion-border-size-0, var(--ion-scale-0, 0px)) var(--ion-border-size-025, var(--ion-scale-025, 1px)) var(--ion-border-size-0, var(--ion-scale-0, 0px));
213
+ --border-width: var(--ion-border-size-0, var(--ion-scale-0, 0px));
214
214
  }
package/dist/collection/components/list-header/list-header.ionic.css CHANGED
@@ -155,7 +155,7 @@ Do not edit directly, this file was auto-generated.
155
155
  font-size: var(--ion-font-size-350, 0.875rem);
156
156
  font-weight: var(--ion-font-weight-medium, 500);
157
157
  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
158
- line-height: var(--ion-font-line-height-600, 24px);
158
+ line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
159
159
  text-decoration: none;
160
160
  text-transform: none;
161
161
  min-height: calc(var(--ion-scale-1400, 56px) + var(--ion-scale-050, 2px));
@@ -166,19 +166,19 @@ Do not edit directly, this file was auto-generated.
166
166
  */
167
167
  overflow: visible;
168
168
  /* stylelint-disable */
169
- padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-space-400, 16px));
170
- padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-space-400, 16px));
169
+ padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-space-400, var(--ion-scale-400, 16px)));
170
+ padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-space-400, var(--ion-scale-400, 16px)));
171
171
  /* stylelint-enable */
172
172
  }
173
173
  :host-context([dir=rtl]) {
174
- padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-space-400, 16px));
175
- padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-space-400, 16px));
174
+ padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-space-400, var(--ion-scale-400, 16px)));
175
+ padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-space-400, var(--ion-scale-400, 16px)));
176
176
  }
177
177
 
178
178
  @supports selector(:dir(rtl)) {
179
179
  :host(:dir(rtl)) {
180
- padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-space-400, 16px));
181
- padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-space-400, 16px));
180
+ padding-right: calc(var(--ion-safe-area-right, 0px) + var(--ion-space-400, var(--ion-scale-400, 16px)));
181
+ padding-left: calc(var(--ion-safe-area-left, 0px) + var(--ion-space-400, var(--ion-scale-400, 16px)));
182
182
  }
183
183
  }
184
184
 
package/dist/collection/components/modal/modal.ionic.css CHANGED
@@ -191,40 +191,40 @@ ion-backdrop {
191
191
  }
192
192
 
193
193
  :host {
194
- --background: var(--ion-bg-surface-default, #ffffff);
194
+ --background: var(--ion-bg-surface-default, var(--ion-primitives-base-white, #ffffff));
195
195
  --box-shadow: var(--ion-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16));
196
196
  --backdrop-opacity: 1;
197
- color: var(--ion-text-default, #242424);
197
+ color: var(--ion-text-default, var(--ion-primitives-neutral-1200, #242424));
198
198
  }
199
199
 
200
200
  :host(.modal-round) {
201
- --border-radius: var(--ion-border-radius-1000, 40px);
201
+ --border-radius: var(--ion-border-radius-1000, var(--ion-scale-1000, 40px));
202
202
  }
203
203
 
204
204
  :host(.modal-soft) {
205
- --border-radius: var(--ion-border-radius-400, 16px);
205
+ --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
206
206
  }
207
207
 
208
208
  :host(.modal-rectangular) {
209
- --border-radius: var(--ion-border-radius-0, 0px);
209
+ --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
210
210
  }
211
211
 
212
212
  .modal-handle {
213
213
  right: 0px;
214
214
  left: 0px;
215
- top: var(--ion-space-300, 12px);
216
- border-radius: var(--ion-border-radius-100, 4px);
215
+ top: var(--ion-space-300, var(--ion-scale-300, 12px));
216
+ border-radius: var(--ion-border-radius-100, var(--ion-scale-100, 4px));
217
217
  width: var(--ion-scale-1100, 44px);
218
218
  height: var(--ion-scale-100, 4px);
219
219
  background-color: var(--ion-primitives-neutral-300, #e0e0e0);
220
220
  }
221
221
  .modal-handle::before {
222
- -webkit-padding-start: var(--ion-space-100, 4px);
223
- padding-inline-start: var(--ion-space-100, 4px);
224
- -webkit-padding-end: var(--ion-space-100, 4px);
225
- padding-inline-end: var(--ion-space-100, 4px);
226
- padding-top: var(--ion-space-100, 4px);
227
- padding-bottom: var(--ion-space-100, 4px);
222
+ -webkit-padding-start: var(--ion-space-100, var(--ion-scale-100, 4px));
223
+ padding-inline-start: var(--ion-space-100, var(--ion-scale-100, 4px));
224
+ -webkit-padding-end: var(--ion-space-100, var(--ion-scale-100, 4px));
225
+ padding-inline-end: var(--ion-space-100, var(--ion-scale-100, 4px));
226
+ padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
227
+ padding-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
228
228
  }
229
229
 
230
230
  :host(.modal-sheet) .modal-wrapper {
package/dist/collection/components/progress-bar/progress-bar.ionic.css CHANGED
@@ -194,11 +194,6 @@ Do not edit directly, this file was auto-generated.
194
194
  animation-play-state: paused;
195
195
  }
196
196
 
197
- :host(.ion-color) .progress,
198
- :host(.ion-color) .progress-indeterminate {
199
- background: current-color(base);
200
- }
201
-
202
197
  @keyframes primary-indeterminate-translate {
203
198
  0% {
204
199
  transform: translateX(0);
@@ -271,17 +266,22 @@ Do not edit directly, this file was auto-generated.
271
266
  }
272
267
  }
273
268
  :host {
274
- --background: var(--ion-bg-neutral-subtle-default, #efefef);
275
- --progress-background: var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));
269
+ --background: var(--ion-bg-neutral-subtle-default, var(--ion-primitives-neutral-200, #efefef));
270
+ --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
271
  height: var(--ion-scale-100, 4px);
277
272
  }
278
273
 
279
274
  :host(.progress-bar-shape-round) {
280
- border-radius: var(--ion-round-xs, 999px);
275
+ border-radius: var(--ion-round-xs, var(--ion-border-radius-full, 999px));
281
276
  }
282
277
 
283
278
  :host(.progress-bar-shape-rectangular) {
284
- border-radius: var(--ion-rectangular-xs, 0px);
279
+ border-radius: var(--ion-rectangular-xs, var(--ion-border-radius-0, var(--ion-scale-0, 0px)));
280
+ }
281
+
282
+ :host(.ion-color) .progress,
283
+ :host(.ion-color) .progress-indeterminate {
284
+ background: var(--ion-color-base);
285
285
  }
286
286
 
287
287
  :host(.ion-color) .buffer-circles {
package/dist/collection/components/progress-bar/progress-bar.ios.css CHANGED
@@ -192,11 +192,6 @@
192
192
  animation-play-state: paused;
193
193
  }
194
194
 
195
- :host(.ion-color) .progress,
196
- :host(.ion-color) .progress-indeterminate {
197
- background: var(--ion-color-base);
198
- }
199
-
200
195
  @keyframes primary-indeterminate-translate {
201
196
  0% {
202
197
  transform: translateX(0);
@@ -277,6 +272,11 @@
277
272
  --progress-background: var(--ion-color-primary, #0054e9);
278
273
  }
279
274
 
275
+ :host(.ion-color) .progress,
276
+ :host(.ion-color) .progress-indeterminate {
277
+ background: var(--ion-color-base);
278
+ }
279
+
280
280
  :host(.ion-color) .buffer-circles {
281
281
  background-image: radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%);
282
282
  }
package/dist/collection/components/progress-bar/progress-bar.md.css CHANGED
@@ -192,11 +192,6 @@
192
192
  animation-play-state: paused;
193
193
  }
194
194
 
195
- :host(.ion-color) .progress,
196
- :host(.ion-color) .progress-indeterminate {
197
- background: var(--ion-color-base);
198
- }
199
-
200
195
  @keyframes primary-indeterminate-translate {
201
196
  0% {
202
197
  transform: translateX(0);
@@ -277,6 +272,11 @@
277
272
  --progress-background: var(--ion-color-primary, #0054e9);
278
273
  }
279
274
 
275
+ :host(.ion-color) .progress,
276
+ :host(.ion-color) .progress-indeterminate {
277
+ background: var(--ion-color-base);
278
+ }
279
+
280
280
  :host(.ion-color) .buffer-circles {
281
281
  background-image: radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%);
282
282
  }
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
  }