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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (260) hide show
  1. package/components/button.js +7 -6
  2. package/components/checkbox.js +1 -1
  3. package/components/header.js +1 -1
  4. package/components/ion-accordion-group.js +1 -1
  5. package/components/ion-accordion.js +1 -1
  6. package/components/ion-avatar.js +1 -1
  7. package/components/ion-badge.js +1 -1
  8. package/components/ion-card-content.js +1 -1
  9. package/components/ion-card-header.js +1 -1
  10. package/components/ion-card-subtitle.js +1 -1
  11. package/components/ion-card.js +1 -1
  12. package/components/ion-chip.js +1 -1
  13. package/components/ion-datetime.js +1 -1
  14. package/components/ion-divider.js +1 -1
  15. package/components/ion-input.js +1 -1
  16. package/components/ion-item-option.js +1 -1
  17. package/components/ion-item-options.js +1 -1
  18. package/components/ion-progress-bar.js +1 -1
  19. package/components/ion-range.js +1 -1
  20. package/components/ion-searchbar.js +1 -1
  21. package/components/ion-segment-button.js +1 -1
  22. package/components/ion-select.js +1 -1
  23. package/components/ion-tab-bar.js +1 -1
  24. package/components/ion-tab-button.js +1 -1
  25. package/components/ion-textarea.js +1 -1
  26. package/components/ion-toast.js +1 -1
  27. package/components/ion-toggle.js +1 -1
  28. package/components/item.js +1 -1
  29. package/components/list-header.js +1 -1
  30. package/components/list.js +1 -1
  31. package/components/modal.js +1 -1
  32. package/components/radio-group.js +1 -1
  33. package/components/radio.js +1 -1
  34. package/components/select-modal.js +1 -1
  35. package/components/title.js +1 -1
  36. package/components/toolbar.js +1 -1
  37. package/css/ionic/bundle.ionic.css +1 -1
  38. package/css/ionic/bundle.ionic.css.map +1 -1
  39. package/css/ionic/core.ionic.css +1 -1
  40. package/css/ionic/core.ionic.css.map +1 -1
  41. package/css/ionic/global.bundle.ionic.css +1 -1
  42. package/css/ionic/global.bundle.ionic.css.map +1 -1
  43. package/css/ionic/ionic-swiper.ionic.css +1 -1
  44. package/css/ionic/ionic-swiper.ionic.css.map +1 -1
  45. package/css/ionic/link.ionic.css +1 -1
  46. package/css/ionic/link.ionic.css.map +1 -1
  47. package/css/ionic/typography.ionic.css +1 -1
  48. package/css/ionic/typography.ionic.css.map +1 -1
  49. package/css/ionic/utils.bundle.ionic.css +1 -1
  50. package/css/ionic/utils.bundle.ionic.css.map +1 -1
  51. package/dist/cjs/ion-accordion_2.cjs.entry.js +2 -2
  52. package/dist/cjs/ion-app_8.cjs.entry.js +3 -3
  53. package/dist/cjs/ion-avatar_3.cjs.entry.js +2 -2
  54. package/dist/cjs/ion-button_2.cjs.entry.js +7 -6
  55. package/dist/cjs/ion-card_5.cjs.entry.js +4 -4
  56. package/dist/cjs/ion-checkbox.cjs.entry.js +1 -1
  57. package/dist/cjs/ion-chip.cjs.entry.js +1 -1
  58. package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
  59. package/dist/cjs/ion-divider.cjs.entry.js +1 -1
  60. package/dist/cjs/ion-input.cjs.entry.js +1 -1
  61. package/dist/cjs/ion-item-option_3.cjs.entry.js +2 -2
  62. package/dist/cjs/ion-item_8.cjs.entry.js +3 -3
  63. package/dist/cjs/ion-modal.cjs.entry.js +1 -1
  64. package/dist/cjs/ion-progress-bar.cjs.entry.js +1 -1
  65. package/dist/cjs/ion-radio_2.cjs.entry.js +2 -2
  66. package/dist/cjs/ion-range.cjs.entry.js +1 -1
  67. package/dist/cjs/ion-searchbar.cjs.entry.js +1 -1
  68. package/dist/cjs/ion-segment_2.cjs.entry.js +1 -1
  69. package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
  70. package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
  71. package/dist/cjs/ion-tab-bar_2.cjs.entry.js +2 -2
  72. package/dist/cjs/ion-textarea.cjs.entry.js +1 -1
  73. package/dist/cjs/ion-toast.cjs.entry.js +1 -1
  74. package/dist/cjs/ion-toggle.cjs.entry.js +1 -1
  75. package/dist/collection/components/accordion/accordion.ionic.css +20 -20
  76. package/dist/collection/components/accordion-group/accordion-group.ionic.css +14 -14
  77. package/dist/collection/components/avatar/avatar.ionic.css +25 -25
  78. package/dist/collection/components/badge/badge.ionic.css +20 -20
  79. package/dist/collection/components/button/button.ionic.css +56 -57
  80. package/dist/collection/components/button/button.js +9 -8
  81. package/dist/collection/components/card/card.ionic.css +3 -3
  82. package/dist/collection/components/card-content/card-content.ionic.css +10 -10
  83. package/dist/collection/components/card-header/card-header.ionic.css +7 -7
  84. package/dist/collection/components/card-subtitle/card-subtitle.ionic.css +1 -1
  85. package/dist/collection/components/checkbox/checkbox.ionic.css +29 -29
  86. package/dist/collection/components/chip/chip.ionic.css +17 -17
  87. package/dist/collection/components/datetime/datetime.ionic.css +52 -52
  88. package/dist/collection/components/divider/divider.ionic.css +15 -15
  89. package/dist/collection/components/header/header.ionic.css +3 -3
  90. package/dist/collection/components/input/input.ionic.css +28 -28
  91. package/dist/collection/components/item/item.ionic.css +16 -16
  92. package/dist/collection/components/item-option/item-option.ionic.css +22 -22
  93. package/dist/collection/components/item-options/item-options.ionic.css +5 -5
  94. package/dist/collection/components/list/list.ionic.css +27 -27
  95. package/dist/collection/components/list-header/list-header.ionic.css +7 -7
  96. package/dist/collection/components/modal/modal.ionic.css +13 -13
  97. package/dist/collection/components/progress-bar/progress-bar.ionic.css +4 -4
  98. package/dist/collection/components/radio/radio.ionic.css +12 -12
  99. package/dist/collection/components/radio-group/radio-group.ionic.css +11 -11
  100. package/dist/collection/components/range/range.ionic.css +29 -29
  101. package/dist/collection/components/searchbar/searchbar.ionic.css +76 -76
  102. package/dist/collection/components/segment-button/segment-button.ionic.css +14 -14
  103. package/dist/collection/components/select/select.ionic.css +31 -31
  104. package/dist/collection/components/select-modal/select-modal.ionic.css +7 -7
  105. package/dist/collection/components/tab-bar/tab-bar.ionic.css +20 -20
  106. package/dist/collection/components/tab-button/tab-button.ionic.css +6 -6
  107. package/dist/collection/components/textarea/textarea.ionic.css +35 -35
  108. package/dist/collection/components/title/title.ionic.css +2 -2
  109. package/dist/collection/components/toast/toast.ionic.css +32 -32
  110. package/dist/collection/components/toggle/toggle.ionic.css +11 -11
  111. package/dist/collection/components/toolbar/toolbar.ionic.css +14 -14
  112. package/dist/docs.json +9 -5
  113. package/dist/esm/ion-accordion_2.entry.js +2 -2
  114. package/dist/esm/ion-app_8.entry.js +3 -3
  115. package/dist/esm/ion-avatar_3.entry.js +2 -2
  116. package/dist/esm/ion-button_2.entry.js +7 -6
  117. package/dist/esm/ion-card_5.entry.js +4 -4
  118. package/dist/esm/ion-checkbox.entry.js +1 -1
  119. package/dist/esm/ion-chip.entry.js +1 -1
  120. package/dist/esm/ion-datetime_3.entry.js +1 -1
  121. package/dist/esm/ion-divider.entry.js +1 -1
  122. package/dist/esm/ion-input.entry.js +1 -1
  123. package/dist/esm/ion-item-option_3.entry.js +2 -2
  124. package/dist/esm/ion-item_8.entry.js +3 -3
  125. package/dist/esm/ion-modal.entry.js +1 -1
  126. package/dist/esm/ion-progress-bar.entry.js +1 -1
  127. package/dist/esm/ion-radio_2.entry.js +2 -2
  128. package/dist/esm/ion-range.entry.js +1 -1
  129. package/dist/esm/ion-searchbar.entry.js +1 -1
  130. package/dist/esm/ion-segment_2.entry.js +1 -1
  131. package/dist/esm/ion-select-modal.entry.js +1 -1
  132. package/dist/esm/ion-select_3.entry.js +1 -1
  133. package/dist/esm/ion-tab-bar_2.entry.js +2 -2
  134. package/dist/esm/ion-textarea.entry.js +1 -1
  135. package/dist/esm/ion-toast.entry.js +1 -1
  136. package/dist/esm/ion-toggle.entry.js +1 -1
  137. package/dist/esm-es5/ion-accordion_2.entry.js +1 -1
  138. package/dist/esm-es5/ion-app_8.entry.js +1 -1
  139. package/dist/esm-es5/ion-avatar_3.entry.js +1 -1
  140. package/dist/esm-es5/ion-button_2.entry.js +1 -1
  141. package/dist/esm-es5/ion-card_5.entry.js +1 -1
  142. package/dist/esm-es5/ion-checkbox.entry.js +1 -1
  143. package/dist/esm-es5/ion-chip.entry.js +1 -1
  144. package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
  145. package/dist/esm-es5/ion-divider.entry.js +1 -1
  146. package/dist/esm-es5/ion-input.entry.js +1 -1
  147. package/dist/esm-es5/ion-item-option_3.entry.js +1 -1
  148. package/dist/esm-es5/ion-item_8.entry.js +1 -1
  149. package/dist/esm-es5/ion-modal.entry.js +1 -1
  150. package/dist/esm-es5/ion-progress-bar.entry.js +1 -1
  151. package/dist/esm-es5/ion-radio_2.entry.js +1 -1
  152. package/dist/esm-es5/ion-range.entry.js +1 -1
  153. package/dist/esm-es5/ion-searchbar.entry.js +1 -1
  154. package/dist/esm-es5/ion-segment_2.entry.js +1 -1
  155. package/dist/esm-es5/ion-select-modal.entry.js +1 -1
  156. package/dist/esm-es5/ion-select_3.entry.js +1 -1
  157. package/dist/esm-es5/ion-tab-bar_2.entry.js +1 -1
  158. package/dist/esm-es5/ion-textarea.entry.js +1 -1
  159. package/dist/esm-es5/ion-toast.entry.js +1 -1
  160. package/dist/esm-es5/ion-toggle.entry.js +1 -1
  161. package/dist/html.html-data.json +4 -1
  162. package/dist/ionic/ionic.esm.js +1 -1
  163. package/dist/ionic/p-03f0f489.entry.js +4 -0
  164. package/dist/ionic/p-050d7d1f.entry.js +4 -0
  165. package/dist/ionic/p-05488e5f.entry.js +4 -0
  166. package/dist/ionic/p-19e67d40.system.entry.js +4 -0
  167. package/dist/ionic/p-211efa34.system.entry.js +4 -0
  168. package/dist/ionic/p-21a9241b.system.entry.js +4 -0
  169. package/dist/ionic/p-28253576.system.entry.js +4 -0
  170. package/dist/ionic/{p-19544c40.entry.js → p-2a3df287.entry.js} +1 -1
  171. package/dist/ionic/p-30bae1a8.entry.js +4 -0
  172. package/dist/ionic/p-3f616348.system.entry.js +4 -0
  173. package/dist/ionic/p-41003775.entry.js +4 -0
  174. package/dist/ionic/p-41357931.system.entry.js +4 -0
  175. package/dist/ionic/p-488e56da.system.entry.js +4 -0
  176. package/dist/ionic/p-4ecb7892.entry.js +4 -0
  177. package/dist/ionic/p-577c1150.entry.js +4 -0
  178. package/dist/ionic/p-59d3caf4.entry.js +4 -0
  179. package/dist/ionic/p-5b2f411a.system.entry.js +4 -0
  180. package/dist/ionic/p-5bba46fc.system.entry.js +4 -0
  181. package/dist/ionic/p-5ceac493.entry.js +4 -0
  182. package/dist/ionic/p-5f582e4f.system.entry.js +4 -0
  183. package/dist/ionic/p-63c2257c.system.entry.js +4 -0
  184. package/dist/ionic/p-6b98a989.system.entry.js +4 -0
  185. package/dist/ionic/{p-93f7ddd5.entry.js → p-6c0e6625.entry.js} +1 -1
  186. package/dist/ionic/p-71d87b11.system.entry.js +4 -0
  187. package/dist/ionic/p-73db2a7e.system.entry.js +4 -0
  188. package/dist/ionic/p-75871b9f.entry.js +4 -0
  189. package/dist/ionic/p-7d1774f8.system.entry.js +4 -0
  190. package/dist/ionic/{p-3e161a46.entry.js → p-85c51a6a.entry.js} +1 -1
  191. package/dist/ionic/p-8f56be51.entry.js +4 -0
  192. package/dist/ionic/p-906b0781.entry.js +4 -0
  193. package/dist/ionic/p-9207650a.entry.js +4 -0
  194. package/dist/ionic/p-979f9a47.entry.js +4 -0
  195. package/dist/ionic/p-9acea98c.entry.js +4 -0
  196. package/dist/ionic/p-9bd072c2.system.entry.js +4 -0
  197. package/dist/ionic/p-a42ddbb3.system.entry.js +4 -0
  198. package/dist/ionic/p-a8759b16.entry.js +4 -0
  199. package/dist/ionic/p-a8fd8c07.entry.js +4 -0
  200. package/dist/ionic/p-afe776fc.system.entry.js +4 -0
  201. package/dist/ionic/p-b65e5cc0.system.entry.js +4 -0
  202. package/dist/ionic/p-b9298bee.entry.js +4 -0
  203. package/dist/ionic/p-c419b6b0.system.entry.js +4 -0
  204. package/dist/ionic/p-c8b9efc6.entry.js +4 -0
  205. package/dist/ionic/p-db8ffacb.system.js +1 -1
  206. package/dist/ionic/{p-8131e086.system.entry.js → p-e25667a4.system.entry.js} +1 -1
  207. package/dist/ionic/p-e35f0d82.system.entry.js +4 -0
  208. package/dist/ionic/p-f1bf5430.system.entry.js +4 -0
  209. package/dist/ionic/p-f1d7ea25.system.entry.js +4 -0
  210. package/dist/ionic/p-f3219e90.entry.js +4 -0
  211. package/dist/ionic/p-fdc14546.entry.js +4 -0
  212. package/dist/types/components/button/button.d.ts +5 -4
  213. package/dist/types/components.d.ts +4 -4
  214. package/hydrate/index.js +42 -41
  215. package/hydrate/index.mjs +42 -41
  216. package/package.json +1 -1
  217. package/dist/ionic/p-09072d3b.entry.js +0 -4
  218. package/dist/ionic/p-0d297574.system.entry.js +0 -4
  219. package/dist/ionic/p-16fd70b2.entry.js +0 -4
  220. package/dist/ionic/p-22e704a0.entry.js +0 -4
  221. package/dist/ionic/p-25679df9.system.entry.js +0 -4
  222. package/dist/ionic/p-259dcfa3.entry.js +0 -4
  223. package/dist/ionic/p-25fb485f.system.entry.js +0 -4
  224. package/dist/ionic/p-26d7c6fd.system.entry.js +0 -4
  225. package/dist/ionic/p-3533c471.system.entry.js +0 -4
  226. package/dist/ionic/p-3824cffd.entry.js +0 -4
  227. package/dist/ionic/p-39b0a811.entry.js +0 -4
  228. package/dist/ionic/p-3b98dd61.system.entry.js +0 -4
  229. package/dist/ionic/p-43d6a02c.system.entry.js +0 -4
  230. package/dist/ionic/p-44b1fefc.entry.js +0 -4
  231. package/dist/ionic/p-49664bbc.system.entry.js +0 -4
  232. package/dist/ionic/p-4a767053.entry.js +0 -4
  233. package/dist/ionic/p-548cd1e5.system.entry.js +0 -4
  234. package/dist/ionic/p-67cded2a.system.entry.js +0 -4
  235. package/dist/ionic/p-7c6f71eb.entry.js +0 -4
  236. package/dist/ionic/p-8402b59e.system.entry.js +0 -4
  237. package/dist/ionic/p-840f1c59.entry.js +0 -4
  238. package/dist/ionic/p-84ac0a34.system.entry.js +0 -4
  239. package/dist/ionic/p-85c7c591.system.entry.js +0 -4
  240. package/dist/ionic/p-88aa79f6.entry.js +0 -4
  241. package/dist/ionic/p-940bc10a.system.entry.js +0 -4
  242. package/dist/ionic/p-97a351b5.entry.js +0 -4
  243. package/dist/ionic/p-a47bffd6.system.entry.js +0 -4
  244. package/dist/ionic/p-a6a71315.entry.js +0 -4
  245. package/dist/ionic/p-aba2d55f.system.entry.js +0 -4
  246. package/dist/ionic/p-acee3852.entry.js +0 -4
  247. package/dist/ionic/p-ad3f30b4.system.entry.js +0 -4
  248. package/dist/ionic/p-b5e3859a.entry.js +0 -4
  249. package/dist/ionic/p-b79a47ba.entry.js +0 -4
  250. package/dist/ionic/p-c0b7f342.entry.js +0 -4
  251. package/dist/ionic/p-c18ffa8b.entry.js +0 -4
  252. package/dist/ionic/p-c47e7149.system.entry.js +0 -4
  253. package/dist/ionic/p-c847b24b.system.entry.js +0 -4
  254. package/dist/ionic/p-d2314315.system.entry.js +0 -4
  255. package/dist/ionic/p-d6662277.entry.js +0 -4
  256. package/dist/ionic/p-dbbfcd15.entry.js +0 -4
  257. package/dist/ionic/p-dfb63dc2.system.entry.js +0 -4
  258. package/dist/ionic/p-e09bb245.system.entry.js +0 -4
  259. package/dist/ionic/p-ed4cf0aa.system.entry.js +0 -4
  260. package/dist/ionic/p-f6a03670.entry.js +0 -4
package/dist/collection/components/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/tab-bar/tab-bar.ionic.css CHANGED
@@ -118,9 +118,9 @@ Do not edit directly, this file was auto-generated.
118
118
  --background: var(--ion-tab-bar-background, var(--ion-primitives-base-white, #ffffff));
119
119
  --background-activated: var(--ion-tab-bar-background-activated, var(--ion-primitives-neutral-100, #f5f5f5));
120
120
  --background-focused: var(--ion-tab-bar-background-focused, transparent);
121
- --border: var(--ion-border-size-0, 0px) var(--ion-border-style-solid, solid) var(--ion-tab-bar-border-color, transparent);
121
+ --border: var(--ion-border-size-0, var(--ion-scale-0, 0px)) var(--ion-border-style-solid, solid) var(--ion-tab-bar-border-color, transparent);
122
122
  --color: var(--ion-tab-bar-color, var(--ion-primitives-neutral-800, #626262));
123
- --color-selected: var(--ion-tab-bar-color-selected, var(--ion-text-primary, #0d4bc3));
123
+ --color-selected: var(--ion-tab-bar-color-selected, var(--ion-text-primary, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
124
124
  /**
125
125
  * Tab bar has a box sizing of content-box to ensure the padding
126
126
  * is not included in the height. This is important for the
@@ -129,8 +129,8 @@ Do not edit directly, this file was auto-generated.
129
129
  * In order for the height to be calculated correctly, the padding
130
130
  * top and bottom must be excluded from the height calculation.
131
131
  */
132
- min-height: calc(var(--ion-scale-1400, 56px) - var(--ion-space-100, 4px) * 2);
133
- gap: var(--ion-space-300, 12px);
132
+ min-height: calc(var(--ion-scale-1400, 56px) - var(--ion-space-100, var(--ion-scale-100, 4px)) * 2);
133
+ gap: var(--ion-space-300, var(--ion-scale-300, 12px));
134
134
  box-shadow: var(--ion-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));
135
135
  z-index: 10;
136
136
  }
@@ -138,26 +138,26 @@ Do not edit directly, this file was auto-generated.
138
138
  /* Full */
139
139
  :host(.tab-bar-full) {
140
140
  /* stylelint-disable */
141
- padding-top: var(--ion-space-100, 4px);
142
- padding-bottom: calc(var(--ion-space-100, 4px) + var(--ion-safe-area-bottom, 0));
143
- padding-right: calc(var(--ion-space-400, 16px) + var(--ion-safe-area-right, 0));
144
- padding-left: calc(var(--ion-space-400, 16px) + var(--ion-safe-area-left, 0));
141
+ padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
142
+ padding-bottom: calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-bottom, 0));
143
+ padding-right: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-right, 0));
144
+ padding-left: calc(var(--ion-space-400, var(--ion-scale-400, 16px)) + var(--ion-safe-area-left, 0));
145
145
  /* stylelint-enable */
146
146
  }
147
147
 
148
148
  :host([slot=top].tab-bar-full) {
149
- padding-top: calc(var(--ion-space-100, 4px) + var(--ion-safe-area-top, 0));
150
- padding-bottom: var(--ion-space-100, 4px);
149
+ padding-top: calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-top, 0));
150
+ padding-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
151
151
  }
152
152
 
153
153
  /* Compact */
154
154
  :host(.tab-bar-compact) {
155
- -webkit-padding-start: var(--ion-space-400, 16px);
156
- padding-inline-start: var(--ion-space-400, 16px);
157
- -webkit-padding-end: var(--ion-space-400, 16px);
158
- padding-inline-end: var(--ion-space-400, 16px);
159
- padding-top: var(--ion-space-100, 4px);
160
- padding-bottom: var(--ion-space-100, 4px);
155
+ -webkit-padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
156
+ padding-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
157
+ -webkit-padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
158
+ padding-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
159
+ padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
160
+ padding-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
161
161
  position: absolute;
162
162
  align-self: center;
163
163
  width: fit-content;
@@ -165,16 +165,16 @@ Do not edit directly, this file was auto-generated.
165
165
  }
166
166
 
167
167
  :host([slot=top].tab-bar-compact) {
168
- top: calc(var(--ion-space-100, 4px) + var(--ion-safe-area-top, 0));
168
+ top: calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-top, 0));
169
169
  }
170
170
 
171
171
  :host([slot=bottom].tab-bar-compact) {
172
- bottom: calc(var(--ion-space-100, 4px) + var(--ion-safe-area-bottom, 0));
172
+ bottom: calc(var(--ion-space-100, var(--ion-scale-100, 4px)) + var(--ion-safe-area-bottom, 0));
173
173
  }
174
174
 
175
175
  /* Soft */
176
176
  :host(.tab-bar-soft) {
177
- border-radius: var(--ion-border-radius-400, 16px);
177
+ border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
178
178
  }
179
179
 
180
180
  /* Round */
@@ -184,5 +184,5 @@ Do not edit directly, this file was auto-generated.
184
184
 
185
185
  /* Rectangular */
186
186
  :host(.tab-bar-rectangular) {
187
- border-radius: var(--ion-border-radius-0, 0px);
187
+ border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
188
188
  }
package/dist/collection/components/tab-button/tab-button.ionic.css CHANGED
@@ -196,12 +196,12 @@ ion-ripple-effect {
196
196
  }
197
197
 
198
198
  :host {
199
- --focus-ring-color: var(--ion-border-focus-default, #b5c0f7);
200
- --focus-ring-width: var(--ion-border-radius-025, 2px);
199
+ --focus-ring-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
200
+ --focus-ring-width: var(--ion-border-radius-025, var(--ion-scale-050, 2px));
201
201
  font-size: var(--ion-font-size-350, 0.875rem);
202
202
  font-weight: var(--ion-font-weight-medium, 500);
203
203
  letter-spacing: var(--ion-font-letter-spacing-1, 1%);
204
- line-height: var(--ion-font-line-height-500, 20px);
204
+ line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
205
205
  text-decoration: none;
206
206
  text-transform: none;
207
207
  position: relative;
@@ -282,15 +282,15 @@ ion-ripple-effect {
282
282
  }
283
283
 
284
284
  :host(.tab-button-shape-soft) {
285
- border-radius: var(--ion-border-radius-200, 8px);
285
+ border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
286
286
  }
287
287
 
288
288
  :host(.tab-button-shape-round) {
289
- border-radius: var(--ion-border-radius-400, 16px);
289
+ border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
290
290
  }
291
291
 
292
292
  :host(.tab-button-shape-rectangular) {
293
- border-radius: var(--ion-border-radius-0, 0px);
293
+ border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
294
294
  }
295
295
 
296
296
  :host ::slotted(ion-badge) {
package/dist/collection/components/textarea/textarea.ionic.css CHANGED
@@ -554,7 +554,7 @@ Do not edit directly, this file was auto-generated.
554
554
  }
555
555
 
556
556
  :host(.textarea-fill-outline) {
557
- --border-width: var(--ion-border-size-025, 1px);
557
+ --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
558
558
  --border-color: var(--ion-primitives-neutral-500, #a2a2a2);
559
559
  }
560
560
 
@@ -593,27 +593,27 @@ Do not edit directly, this file was auto-generated.
593
593
  }
594
594
 
595
595
  :host(.textarea-fill-outline) textarea {
596
- margin-top: var(--ion-space-100, 4px);
596
+ margin-top: var(--ion-space-100, var(--ion-scale-100, 4px));
597
597
  }
598
598
 
599
599
  :host(.textarea-fill-outline.has-focus) {
600
- --border-width: var(--ion-border-size-050, 2px);
600
+ --border-width: var(--ion-border-size-050, var(--ion-scale-050, 2px));
601
601
  }
602
602
 
603
603
  :host {
604
604
  --border-color: var(--ion-primitives-neutral-500, #a2a2a2);
605
605
  --color: var(--ion-primitives-neutral-1200, #242424);
606
- --highlight-color-valid: var(--ion-semantics-success-900, #126f23);
607
- --highlight-color-invalid: var(--ion-semantics-danger-800, #bf2222);
608
- --highlight-color-focused: var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));
606
+ --highlight-color-valid: var(--ion-semantics-success-900, var(--ion-primitives-green-900, #126f23));
607
+ --highlight-color-invalid: var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222));
608
+ --highlight-color-focused: 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)))));
609
609
  --placeholder-color: var(--ion-primitives-neutral-800, #626262);
610
610
  --placeholder-opacity: 1;
611
611
  --background: var(--ion-primitives-base-white, #ffffff);
612
- --padding-bottom: var(--ion-space-200, 8px);
612
+ --padding-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
613
613
  font-size: var(--ion-font-size-350, 0.875rem);
614
614
  font-weight: var(--ion-font-weight-regular, 400);
615
615
  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
616
- line-height: var(--ion-font-line-height-600, 24px);
616
+ line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
617
617
  text-decoration: none;
618
618
  text-transform: none;
619
619
  }
@@ -627,43 +627,43 @@ Do not edit directly, this file was auto-generated.
627
627
  }
628
628
 
629
629
  :host(.textarea-size-small) .textarea-wrapper-inner {
630
- --padding-top: var(--ion-space-200, 8px);
631
- --padding-end: var(--ion-space-300, 12px);
632
- --padding-bottom: var(--ion-space-200, 8px);
633
- --padding-start: var(--ion-space-300, 12px);
630
+ --padding-top: var(--ion-space-200, var(--ion-scale-200, 8px));
631
+ --padding-end: var(--ion-space-300, var(--ion-scale-300, 12px));
632
+ --padding-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
633
+ --padding-start: var(--ion-space-300, var(--ion-scale-300, 12px));
634
634
  min-height: var(--ion-scale-2800, 112px);
635
635
  }
636
636
 
637
637
  :host(.textarea-size-medium) .textarea-wrapper-inner {
638
- --padding-top: var(--ion-space-300, 12px);
639
- --padding-end: var(--ion-space-400, 16px);
640
- --padding-bottom: var(--ion-space-300, 12px);
641
- --padding-start: var(--ion-space-400, 16px);
638
+ --padding-top: var(--ion-space-300, var(--ion-scale-300, 12px));
639
+ --padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
640
+ --padding-bottom: var(--ion-space-300, var(--ion-scale-300, 12px));
641
+ --padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
642
642
  min-height: var(--ion-scale-3400, 136px);
643
643
  }
644
644
 
645
645
  :host(.textarea-size-large) .textarea-wrapper-inner {
646
- --padding-top: var(--ion-space-400, 16px);
647
- --padding-end: var(--ion-space-500, 20px);
648
- --padding-bottom: var(--ion-space-400, 16px);
649
- --padding-start: var(--ion-space-500, 20px);
646
+ --padding-top: var(--ion-space-400, var(--ion-scale-400, 16px));
647
+ --padding-end: var(--ion-space-500, var(--ion-scale-500, 20px));
648
+ --padding-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
649
+ --padding-start: var(--ion-space-500, var(--ion-scale-500, 20px));
650
650
  min-height: var(--ion-scale-3600, 144px);
651
651
  }
652
652
 
653
653
  :host(.textarea-shape-soft) {
654
- --border-radius: var(--ion-border-radius-200, 8px);
654
+ --border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
655
655
  }
656
656
 
657
657
  :host(.textarea-shape-round) {
658
- --border-radius: var(--ion-border-radius-400, 16px);
658
+ --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
659
659
  }
660
660
 
661
661
  :host(.textarea-shape-rectangular) {
662
- --border-radius: var(--ion-border-radius-0, 0px);
662
+ --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
663
663
  }
664
664
 
665
665
  .textarea-wrapper {
666
- gap: var(--ion-space-100, 4px);
666
+ gap: var(--ion-space-100, var(--ion-scale-100, 4px));
667
667
  }
668
668
 
669
669
  .textarea-wrapper-inner {
@@ -688,7 +688,7 @@ Do not edit directly, this file was auto-generated.
688
688
  font-size: var(--ion-font-size-300, 0.75rem);
689
689
  font-weight: var(--ion-font-weight-medium, 500);
690
690
  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
691
- line-height: var(--ion-font-line-height-500, 20px);
691
+ line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
692
692
  text-decoration: none;
693
693
  text-transform: none;
694
694
  max-width: var(--ion-scale-5000, 200px);
@@ -707,7 +707,7 @@ ion-icon {
707
707
 
708
708
  .start-slot-wrapper,
709
709
  .end-slot-wrapper {
710
- margin-top: var(--ion-space-050, 2px);
710
+ margin-top: var(--ion-space-050, var(--ion-scale-050, 2px));
711
711
  }
712
712
 
713
713
  .textarea-bottom {
@@ -715,11 +715,11 @@ ion-icon {
715
715
  padding-inline-start: var(--padding-start);
716
716
  -webkit-padding-end: var(--padding-end);
717
717
  padding-inline-end: var(--padding-end);
718
- padding-top: var(--ion-space-100, 4px);
718
+ padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
719
719
  font-size: var(--ion-font-size-300, 0.75rem);
720
720
  font-weight: var(--ion-font-weight-medium, 500);
721
721
  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
722
- line-height: var(--ion-font-line-height-500, 20px);
722
+ line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
723
723
  text-decoration: none;
724
724
  text-transform: none;
725
725
  }
@@ -735,14 +735,14 @@ ion-icon {
735
735
 
736
736
  :host(.has-focus.ion-valid),
737
737
  :host(.ion-touched.ion-invalid) {
738
- --border-width: var(--ion-border-size-025, 1px);
738
+ --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
739
739
  }
740
740
 
741
741
  .textarea-highlight {
742
742
  bottom: -1px;
743
743
  position: absolute;
744
744
  width: 100%;
745
- height: var(--ion-border-size-050, 2px);
745
+ height: var(--ion-border-size-050, var(--ion-scale-050, 2px));
746
746
  transform: scale(0);
747
747
  transition: transform var(--ion-transition-time-200, 200ms);
748
748
  background: var(--border-color);
@@ -752,7 +752,7 @@ ion-icon {
752
752
  }
753
753
 
754
754
  :host(.has-focus) {
755
- --border-color: var(--ion-border-focus-default, #b5c0f7);
755
+ --border-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
756
756
  }
757
757
 
758
758
  :host(.has-focus) .textarea-highlight {
@@ -774,7 +774,7 @@ ion-icon {
774
774
  :host(.textarea-disabled:not(.ion-valid)) .textarea-bottom .helper-text,
775
775
  :host(.textarea-disabled) .textarea-bottom .counter,
776
776
  :host(.textarea-disabled) .label-text-wrapper {
777
- color: var(--ion-text-disabled, #a2a2a2);
777
+ color: var(--ion-text-disabled, var(--ion-primitives-neutral-500, #a2a2a2));
778
778
  }
779
779
 
780
780
  :host(.textarea-disabled.has-focus.ion-valid) {
@@ -823,8 +823,8 @@ ion-icon {
823
823
  * on the right in RTL. Label also has a fixed width.
824
824
  */
825
825
  :host(.textarea-label-placement-fixed) .label-text {
826
- flex: 0 0 calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, 4px));
827
- width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, 4px));
828
- min-width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, 4px));
826
+ flex: 0 0 calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, var(--ion-scale-100, 4px)));
827
+ width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, var(--ion-scale-100, 4px)));
828
+ min-width: calc(var(--ion-scale-2400, 96px) + var(--ion-space-100, var(--ion-scale-100, 4px)));
829
829
  max-width: var(--ion-scale-5000, 200px);
830
830
  }
package/dist/collection/components/title/title.ionic.css CHANGED
@@ -112,7 +112,7 @@ Do not edit directly, this file was auto-generated.
112
112
  font-size: var(--ion-font-size-450, 1.125rem);
113
113
  font-weight: var(--ion-font-weight-medium, 500);
114
114
  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
115
- line-height: var(--ion-font-line-height-700, 28px);
115
+ line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
116
116
  text-decoration: none;
117
117
  text-transform: none;
118
118
  box-sizing: border-box;
@@ -123,7 +123,7 @@ Do not edit directly, this file was auto-generated.
123
123
  font-size: var(--ion-font-size-700, 1.75rem);
124
124
  font-weight: var(--ion-font-weight-medium, 500);
125
125
  letter-spacing: var(--ion-font-letter-spacing-0, 0%);
126
- line-height: var(--ion-font-line-height-900, 36px);
126
+ line-height: var(--ion-font-line-height-900, var(--ion-scale-900, 36px));
127
127
  text-decoration: none;
128
128
  text-transform: none;
129
129
  }