@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/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
  }
package/dist/collection/components/segment-button/segment-button.ionic.css CHANGED
@@ -269,20 +269,20 @@ Do not edit directly, this file was auto-generated.
269
269
  --background: none;
270
270
  --background-checked: var(--background);
271
271
  --color: var(--ion-primitives-neutral-1000, #3b3b3b);
272
- --color-checked: var(--ion-semantics-primary-base, #105cef);
272
+ --color-checked: var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)));
273
273
  --color-disabled: var(--ion-primitives-neutral-500, #a2a2a2);
274
- --border-width: var(--ion-border-size-025, 1px);
274
+ --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
275
275
  --border-color: var(--ion-primitives-neutral-300, #e0e0e0);
276
276
  --border-style: var(--ion-border-style-solid, solid);
277
277
  --indicator-box-shadow: none;
278
278
  --indicator-color: var(--color-checked);
279
- --indicator-height: var(--ion-border-size-025, 1px);
279
+ --indicator-height: var(--ion-border-size-025, var(--ion-scale-025, 1px));
280
280
  --indicator-transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
281
281
  --indicator-transform: none;
282
- --padding-top: var(--ion-space-200, 8px);
283
- --padding-end: var(--ion-space-200, 8px);
284
- --padding-bottom: var(--ion-space-200, 8px);
285
- --padding-start: var(--ion-space-200, 8px);
282
+ --padding-top: var(--ion-space-200, var(--ion-scale-200, 8px));
283
+ --padding-end: var(--ion-space-200, var(--ion-scale-200, 8px));
284
+ --padding-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
285
+ --padding-start: var(--ion-space-200, var(--ion-scale-200, 8px));
286
286
  --transition: color 0.15s linear 0s, opacity 0.15s linear 0s;
287
287
  min-width: var(--ion-scale-1200, 48px);
288
288
  min-height: var(--ion-scale-1200, 48px);
@@ -294,16 +294,16 @@ Do not edit directly, this file was auto-generated.
294
294
  }
295
295
 
296
296
  .button-inner {
297
- padding-top: var(--ion-space-100, 4px);
298
- padding-bottom: var(--ion-space-100, 4px);
299
- gap: var(--ion-space-100, 4px);
297
+ padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
298
+ padding-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
299
+ gap: var(--ion-space-100, var(--ion-scale-100, 4px));
300
300
  }
301
301
 
302
302
  ::slotted(ion-label) {
303
303
  font-size: var(--ion-font-size-350, 0.875rem);
304
304
  font-weight: var(--ion-font-weight-medium, 500);
305
305
  letter-spacing: var(--ion-font-letter-spacing-1, 1%);
306
- line-height: var(--ion-font-line-height-500, 20px);
306
+ line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
307
307
  text-decoration: none;
308
308
  text-transform: none;
309
309
  color: var(--color);
@@ -326,8 +326,8 @@ Do not edit directly, this file was auto-generated.
326
326
  }
327
327
 
328
328
  :host(.ion-focused) .button-inner {
329
- outline-offset: var(--ion-border-size-050, 2px);
330
- outline: var(--ion-border-size-050, 2px) var(--ion-border-style-solid, solid) var(--ion-border-focus-default, #b5c0f7);
329
+ outline-offset: var(--ion-border-size-050, var(--ion-scale-050, 2px));
330
+ 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));
331
331
  }
332
332
 
333
333
  .segment-button-indicator {
@@ -351,5 +351,5 @@ Do not edit directly, this file was auto-generated.
351
351
 
352
352
  :host(.segment-button-layout-icon-start) .button-inner,
353
353
  :host(.segment-button-layout-icon-end) .button-inner {
354
- gap: var(--ion-space-200, 8px);
354
+ gap: var(--ion-space-200, var(--ion-scale-200, 8px));
355
355
  }
package/dist/collection/components/select/select.ionic.css CHANGED
@@ -512,7 +512,7 @@ button {
512
512
  }
513
513
 
514
514
  :host(.ion-focused.select-fill-outline:not(.ion-invalid):not(.ion-valid)) {
515
- --border-width: var(--ion-border-size-050, 2px);
515
+ --border-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
516
516
  }
517
517
 
518
518
  /**
@@ -527,25 +527,25 @@ button {
527
527
  :host {
528
528
  --background: var(--ion-primitives-base-white, #ffffff);
529
529
  --border-color: var(--ion-primitives-neutral-500, #a2a2a2);
530
- --border-width: var(--ion-border-size-025, 1px);
531
- --padding-start: var(--ion-space-400, 16px);
532
- --padding-end: var(--ion-space-400, 16px);
533
- --padding-top: var(--ion-space-300, 12px);
534
- --padding-bottom: var(--ion-space-300, 12px);
530
+ --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
531
+ --padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
532
+ --padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
533
+ --padding-top: var(--ion-space-300, var(--ion-scale-300, 12px));
534
+ --padding-bottom: var(--ion-space-300, var(--ion-scale-300, 12px));
535
535
  --placeholder-color: var(--ion-primitives-neutral-800, #626262);
536
536
  --placeholder-opacity: 1;
537
- --highlight-color-focused: var(--ion-border-focus-default, #b5c0f7);
538
- --highlight-color-valid: var(--ion-semantics-success-900, #126f23);
539
- --highlight-color-invalid: var(--ion-semantics-danger-800, #bf2222);
537
+ --highlight-color-focused: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
538
+ --highlight-color-valid: var(--ion-semantics-success-900, var(--ion-primitives-green-900, #126f23));
539
+ --highlight-color-invalid: var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222));
540
540
  min-height: var(--ion-scale-1100, 44px);
541
541
  }
542
542
 
543
543
  .select-bottom {
544
- padding-top: var(--ion-space-100, 4px);
544
+ padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
545
545
  font-size: var(--ion-font-size-300, 0.75rem);
546
546
  font-weight: var(--ion-font-weight-medium, 500);
547
547
  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
548
- line-height: var(--ion-font-line-height-500, 20px);
548
+ line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
549
549
  text-decoration: none;
550
550
  text-transform: none;
551
551
  }
@@ -555,14 +555,14 @@ button {
555
555
  }
556
556
 
557
557
  .select-text {
558
- min-width: var(--ion-space-400, 16px);
558
+ min-width: var(--ion-space-400, var(--ion-scale-400, 16px));
559
559
  }
560
560
 
561
561
  .label-text-wrapper {
562
562
  font-size: var(--ion-font-size-300, 0.75rem);
563
563
  font-weight: var(--ion-font-weight-medium, 500);
564
564
  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
565
- line-height: var(--ion-font-line-height-500, 20px);
565
+ line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
566
566
  text-decoration: none;
567
567
  text-transform: none;
568
568
  /**
@@ -587,16 +587,16 @@ button {
587
587
  */
588
588
  -webkit-margin-start: 0;
589
589
  margin-inline-start: 0;
590
- -webkit-margin-end: var(--ion-space-100, 4px);
591
- margin-inline-end: var(--ion-space-100, 4px);
590
+ -webkit-margin-end: var(--ion-space-100, var(--ion-scale-100, 4px));
591
+ margin-inline-end: var(--ion-space-100, var(--ion-scale-100, 4px));
592
592
  margin-top: 0;
593
593
  margin-bottom: 0;
594
594
  }
595
595
 
596
596
  :host(.select-label-placement-fixed) .label-text-wrapper {
597
- flex: 0 0 calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, 4px));
598
- width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, 4px));
599
- min-width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, 4px));
597
+ flex: 0 0 calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, var(--ion-scale-100, 4px)));
598
+ width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, var(--ion-scale-100, 4px)));
599
+ min-width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, var(--ion-scale-100, 4px)));
600
600
  max-width: var(--ion-scale-5000, 200px);
601
601
  }
602
602
 
@@ -606,8 +606,8 @@ button {
606
606
  * the select should be on the start
607
607
  * when the label sits at the end.
608
608
  */
609
- -webkit-margin-start: var(--ion-space-100, 4px);
610
- margin-inline-start: var(--ion-space-100, 4px);
609
+ -webkit-margin-start: var(--ion-space-100, var(--ion-scale-100, 4px));
610
+ margin-inline-start: var(--ion-space-100, var(--ion-scale-100, 4px));
611
611
  -webkit-margin-end: 0;
612
612
  margin-inline-end: 0;
613
613
  margin-top: 0;
@@ -624,7 +624,7 @@ button {
624
624
  margin-left: 0;
625
625
  margin-right: 0;
626
626
  margin-top: 0;
627
- margin-bottom: var(--ion-space-100, 4px);
627
+ margin-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
628
628
  }
629
629
 
630
630
  .select-wrapper {
@@ -652,7 +652,7 @@ button {
652
652
  position: relative;
653
653
  background: var(--background);
654
654
  box-sizing: border-box;
655
- gap: var(--ion-space-200, 8px);
655
+ gap: var(--ion-space-200, var(--ion-scale-200, 8px));
656
656
  }
657
657
 
658
658
  :host(.select-label-placement-stacked) .select-wrapper-inner,
@@ -664,7 +664,7 @@ button {
664
664
  font-size: var(--ion-font-size-350, 0.875rem);
665
665
  font-weight: var(--ion-font-weight-regular, 400);
666
666
  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
667
- line-height: var(--ion-font-line-height-600, 24px);
667
+ line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
668
668
  text-decoration: none;
669
669
  text-transform: none;
670
670
  /**
@@ -683,7 +683,7 @@ button {
683
683
  * This is done by setting the width to the full width minus
684
684
  * the icon width and the gap between the icon and the text.
685
685
  */
686
- width: calc(100% - var(--ion-scale-400, 16px) - var(--ion-space-200, 8px));
686
+ width: calc(100% - var(--ion-scale-400, 16px) - var(--ion-space-200, var(--ion-scale-200, 8px)));
687
687
  }
688
688
 
689
689
  /**
@@ -697,10 +697,10 @@ button {
697
697
  ::slotted(ion-button[slot=start].button-has-icon-only),
698
698
  ::slotted(ion-button[slot=end].button-has-icon-only) {
699
699
  --border-radius: 50%;
700
- --padding-start: var(--ion-space-200, 8px);
701
- --padding-end: var(--ion-space-200, 8px);
702
- --padding-top: var(--ion-space-200, 8px);
703
- --padding-bottom: var(--ion-space-200, 8px);
700
+ --padding-start: var(--ion-space-200, var(--ion-scale-200, 8px));
701
+ --padding-end: var(--ion-space-200, var(--ion-scale-200, 8px));
702
+ --padding-top: var(--ion-space-200, var(--ion-scale-200, 8px));
703
+ --padding-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
704
704
  aspect-ratio: 1;
705
705
  }
706
706
 
@@ -739,15 +739,15 @@ button {
739
739
  }
740
740
 
741
741
  :host(.select-shape-soft) {
742
- --border-radius: var(--ion-border-radius-200, 8px);
742
+ --border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
743
743
  }
744
744
 
745
745
  :host(.select-shape-round) {
746
- --border-radius: var(--ion-border-radius-400, 16px);
746
+ --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
747
747
  }
748
748
 
749
749
  :host(.select-shape-rectangular) {
750
- --border-radius: var(--ion-border-radius-0, 0px);
750
+ --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
751
751
  }
752
752
 
753
753
  :host(.select-size-small) .select-wrapper-inner {
package/dist/collection/components/select-modal/select-modal.ionic.css CHANGED
@@ -73,7 +73,7 @@ ion-toolbar {
73
73
  font-size: var(--ion-font-size-450, 1.125rem);
74
74
  font-weight: var(--ion-font-weight-medium, 500);
75
75
  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
76
- line-height: var(--ion-font-line-height-700, 28px);
76
+ line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
77
77
  text-decoration: none;
78
78
  text-transform: none;
79
79
  }
@@ -94,15 +94,15 @@ ion-list ion-checkbox::part(label) {
94
94
  font-size: var(--ion-font-size-400, 1rem);
95
95
  font-weight: var(--ion-font-weight-medium, 500);
96
96
  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
97
- line-height: var(--ion-font-line-height-600, 24px);
97
+ line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
98
98
  text-decoration: none;
99
99
  text-transform: none;
100
100
  }
101
101
 
102
102
  .item-radio-checked,
103
103
  .item-checkbox-checked {
104
- --background: var(--ion-semantics-primary-100, #f2f4fd);
105
- --border-radius: var(--ion-border-radius-400, 16px);
104
+ --background: var(--ion-semantics-primary-100, var(--ion-primitives-blue-100, #f2f4fd));
105
+ --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
106
106
  }
107
107
 
108
108
  ion-content {
@@ -113,9 +113,9 @@ ion-content {
113
113
  * padding of the modal sheet in the core.
114
114
  */
115
115
  /* stylelint-disable-next-line declaration-no-important */
116
- --padding-start: var(--ion-space-400, 16px) !important;
116
+ --padding-start: var(--ion-space-400, var(--ion-scale-400, 16px)) !important;
117
117
  /* stylelint-disable-next-line declaration-no-important */
118
- --padding-end: var(--ion-space-400, 16px) !important;
118
+ --padding-end: var(--ion-space-400, var(--ion-scale-400, 16px)) !important;
119
119
  /* stylelint-disable-next-line declaration-no-important */
120
- --padding-bottom: var(--ion-space-1200, 48px) !important;
120
+ --padding-bottom: var(--ion-space-1200, var(--ion-scale-1200, 48px)) !important;
121
121
  }
package/dist/collection/components/spinner/spinner.ionic.css CHANGED
@@ -256,6 +256,10 @@ svg {
256
256
  height: var(--ion-scale-700, 28px);
257
257
  }
258
258
 
259
+ :host(.ion-color.ion-color-medium) {
260
+ color: var(--ion-color-subtle-contrast);
261
+ }
262
+
259
263
  :host(.spinner-lines) line,
260
264
  :host(.spinner-lines-small) line {
261
265
  stroke-width: var(--ion-scale-150, 6px);