@ionic/core 8.8.20-dev.11790000033.12788d65 → 8.8.20-dev.11790063553.1c664fbb

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 (258) hide show
  1. package/components/ion-accordion-group.js +1 -1
  2. package/components/ion-accordion.js +1 -1
  3. package/components/ion-action-sheet.js +1 -1
  4. package/components/ion-alert.js +1 -1
  5. package/components/ion-avatar.js +1 -1
  6. package/components/ion-backdrop.js +1 -1
  7. package/components/ion-badge.js +1 -1
  8. package/components/ion-button.js +1 -1
  9. package/components/ion-buttons.js +1 -1
  10. package/components/ion-card-content.js +1 -1
  11. package/components/ion-card-subtitle.js +1 -1
  12. package/components/ion-card.js +1 -1
  13. package/components/ion-checkbox.js +1 -1
  14. package/components/ion-chip.js +1 -1
  15. package/components/ion-datetime.js +1 -1
  16. package/components/ion-divider.js +1 -1
  17. package/components/ion-header.js +1 -1
  18. package/components/ion-infinite-scroll-content.js +1 -1
  19. package/components/ion-input-otp.js +1 -1
  20. package/components/ion-input-password-toggle.js +1 -1
  21. package/components/ion-input.js +1 -1
  22. package/components/ion-item-option.js +1 -1
  23. package/components/ion-item-sliding.js +1 -1
  24. package/components/ion-item.js +1 -1
  25. package/components/ion-list-header.js +1 -1
  26. package/components/ion-loading.js +1 -1
  27. package/components/ion-menu.js +1 -1
  28. package/components/ion-modal.js +1 -1
  29. package/components/ion-picker-legacy.js +1 -1
  30. package/components/ion-popover.js +1 -1
  31. package/components/ion-progress-bar.js +1 -1
  32. package/components/ion-radio-group.js +1 -1
  33. package/components/ion-radio.js +1 -1
  34. package/components/ion-range.js +1 -1
  35. package/components/ion-refresher-content.js +1 -1
  36. package/components/ion-searchbar.js +1 -1
  37. package/components/ion-segment-button.js +1 -1
  38. package/components/ion-select-modal.js +1 -1
  39. package/components/ion-select-popover.js +1 -1
  40. package/components/ion-select.js +1 -1
  41. package/components/ion-spinner.js +1 -1
  42. package/components/ion-tab-bar.js +1 -1
  43. package/components/ion-tab-button.js +1 -1
  44. package/components/ion-textarea.js +1 -1
  45. package/components/ion-title.js +1 -1
  46. package/components/ion-toast.js +1 -1
  47. package/components/ion-toggle.js +1 -1
  48. package/components/ion-toolbar.js +1 -1
  49. package/components/p-1svnBvUl.js +4 -0
  50. package/components/p-B1Ckdhof.js +4 -0
  51. package/components/p-B5TpXnQx.js +4 -0
  52. package/components/p-BUXCqaSr.js +4 -0
  53. package/components/p-BvZgcjSv.js +4 -0
  54. package/components/p-C9LVKxmA.js +4 -0
  55. package/components/{p-CaXMr1SL.js → p-CHNTH0aX.js} +1 -1
  56. package/components/p-CHS_LN0q.js +4 -0
  57. package/components/p-CQ6qwFjM.js +4 -0
  58. package/components/p-CRSdVOdM.js +4 -0
  59. package/components/p-CXTSHWEJ.js +4 -0
  60. package/components/p-Cay-YWIl.js +4 -0
  61. package/components/{p-CaB0_AG0.js → p-DCFHJ88d.js} +1 -1
  62. package/components/p-DH-B6fol.js +4 -0
  63. package/components/p-DIvWgnWw.js +4 -0
  64. package/components/{p-CxhjkdQ_.js → p-DPBeQeU3.js} +1 -1
  65. package/components/p-DyWR_4Qt.js +4 -0
  66. package/components/{p-DYq-5riI.js → p-u7MhcNAg.js} +1 -1
  67. package/css/ionic/bundle.ionic.css +1 -1
  68. package/css/ionic/bundle.ionic.css.map +1 -1
  69. package/css/ionic/core.ionic.css +1 -1
  70. package/css/ionic/core.ionic.css.map +1 -1
  71. package/css/ionic/global.bundle.ionic.css +1 -1
  72. package/css/ionic/global.bundle.ionic.css.map +1 -1
  73. package/css/ionic/ionic-swiper.ionic.css +1 -1
  74. package/css/ionic/ionic-swiper.ionic.css.map +1 -1
  75. package/css/ionic/link.ionic.css +1 -1
  76. package/css/ionic/link.ionic.css.map +1 -1
  77. package/css/ionic/typography.ionic.css +1 -1
  78. package/css/ionic/typography.ionic.css.map +1 -1
  79. package/dist/cjs/ion-accordion_2.cjs.entry.js +2 -2
  80. package/dist/cjs/ion-action-sheet.cjs.entry.js +1 -1
  81. package/dist/cjs/ion-alert.cjs.entry.js +1 -1
  82. package/dist/cjs/ion-app_8.cjs.entry.js +4 -4
  83. package/dist/cjs/ion-avatar_3.cjs.entry.js +2 -2
  84. package/dist/cjs/ion-backdrop.cjs.entry.js +1 -1
  85. package/dist/cjs/ion-button_2.cjs.entry.js +1 -1
  86. package/dist/cjs/ion-card_5.cjs.entry.js +3 -3
  87. package/dist/cjs/ion-checkbox.cjs.entry.js +1 -1
  88. package/dist/cjs/ion-chip.cjs.entry.js +1 -1
  89. package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
  90. package/dist/cjs/ion-divider.cjs.entry.js +1 -1
  91. package/dist/cjs/ion-input-otp.cjs.entry.js +1 -1
  92. package/dist/cjs/ion-input-password-toggle.cjs.entry.js +1 -1
  93. package/dist/cjs/ion-input.cjs.entry.js +1 -1
  94. package/dist/cjs/ion-item-option_3.cjs.entry.js +2 -2
  95. package/dist/cjs/ion-item_8.cjs.entry.js +2 -2
  96. package/dist/cjs/ion-modal.cjs.entry.js +1 -1
  97. package/dist/cjs/ion-popover.cjs.entry.js +1 -1
  98. package/dist/cjs/ion-progress-bar.cjs.entry.js +1 -1
  99. package/dist/cjs/ion-radio_2.cjs.entry.js +2 -2
  100. package/dist/cjs/ion-range.cjs.entry.js +1 -1
  101. package/dist/cjs/ion-searchbar.cjs.entry.js +1 -1
  102. package/dist/cjs/ion-segment_2.cjs.entry.js +1 -1
  103. package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
  104. package/dist/cjs/ion-select_3.cjs.entry.js +2 -2
  105. package/dist/cjs/ion-spinner.cjs.entry.js +1 -1
  106. package/dist/cjs/ion-tab-bar_2.cjs.entry.js +2 -2
  107. package/dist/cjs/ion-textarea.cjs.entry.js +1 -1
  108. package/dist/cjs/ion-toast.cjs.entry.js +1 -1
  109. package/dist/cjs/ion-toggle.cjs.entry.js +1 -1
  110. package/dist/collection/components/accordion/accordion.ionic.css +10 -12
  111. package/dist/collection/components/accordion-group/accordion-group.ionic.css +6 -6
  112. package/dist/collection/components/action-sheet/action-sheet.ionic.css +22 -26
  113. package/dist/collection/components/alert/alert.ionic.css +39 -45
  114. package/dist/collection/components/avatar/avatar.ionic.css +29 -35
  115. package/dist/collection/components/backdrop/backdrop.ionic.css +1 -1
  116. package/dist/collection/components/badge/badge.ionic.css +15 -18
  117. package/dist/collection/components/button/button.ionic.css +22 -26
  118. package/dist/collection/components/buttons/buttons.ionic.css +1 -1
  119. package/dist/collection/components/card/card.ionic.css +7 -7
  120. package/dist/collection/components/card-content/card-content.ionic.css +3 -4
  121. package/dist/collection/components/card-subtitle/card-subtitle.ionic.css +4 -5
  122. package/dist/collection/components/checkbox/checkbox.ionic.css +16 -17
  123. package/dist/collection/components/chip/chip.ionic.css +12 -13
  124. package/dist/collection/components/datetime/datetime.ionic.css +43 -49
  125. package/dist/collection/components/divider/divider.ionic.css +1 -1
  126. package/dist/collection/components/header/header.ionic.css +3 -8
  127. package/dist/collection/components/input/input.ionic.css +40 -43
  128. package/dist/collection/components/input-otp/input-otp.ionic.css +29 -31
  129. package/dist/collection/components/input-password-toggle/input-password-toggle.ionic.css +1 -1
  130. package/dist/collection/components/item/item.ionic.css +9 -10
  131. package/dist/collection/components/item-option/item-option.ionic.css +5 -6
  132. package/dist/collection/components/item-sliding/item-sliding.ionic.css +1 -1
  133. package/dist/collection/components/list-header/list-header.ionic.css +4 -5
  134. package/dist/collection/components/modal/modal.ionic.css +3 -3
  135. package/dist/collection/components/popover/popover.ionic.css +1 -1
  136. package/dist/collection/components/progress-bar/progress-bar.ionic.css +3 -3
  137. package/dist/collection/components/radio/radio.ionic.css +9 -10
  138. package/dist/collection/components/radio-group/radio-group.ionic.css +5 -6
  139. package/dist/collection/components/range/range.ionic.css +11 -12
  140. package/dist/collection/components/searchbar/searchbar.ionic.css +17 -18
  141. package/dist/collection/components/segment-button/segment-button.ionic.css +8 -9
  142. package/dist/collection/components/select/select.ionic.css +26 -29
  143. package/dist/collection/components/select-modal/select-modal.ionic.css +13 -16
  144. package/dist/collection/components/select-popover/select-popover.ionic.css +11 -13
  145. package/dist/collection/components/spinner/spinner.ionic.css +2 -2
  146. package/dist/collection/components/tab-bar/tab-bar.ionic.css +6 -6
  147. package/dist/collection/components/tab-button/tab-button.ionic.css +4 -5
  148. package/dist/collection/components/textarea/textarea.ionic.css +40 -43
  149. package/dist/collection/components/title/title.ionic.css +6 -8
  150. package/dist/collection/components/toast/toast.ionic.css +16 -19
  151. package/dist/collection/components/toggle/toggle.ionic.css +14 -16
  152. package/dist/collection/components/toolbar/toolbar.ionic.css +1 -1
  153. package/dist/docs.json +1 -1
  154. package/dist/esm/ion-accordion_2.entry.js +2 -2
  155. package/dist/esm/ion-action-sheet.entry.js +1 -1
  156. package/dist/esm/ion-alert.entry.js +1 -1
  157. package/dist/esm/ion-app_8.entry.js +4 -4
  158. package/dist/esm/ion-avatar_3.entry.js +2 -2
  159. package/dist/esm/ion-backdrop.entry.js +1 -1
  160. package/dist/esm/ion-button_2.entry.js +1 -1
  161. package/dist/esm/ion-card_5.entry.js +3 -3
  162. package/dist/esm/ion-checkbox.entry.js +1 -1
  163. package/dist/esm/ion-chip.entry.js +1 -1
  164. package/dist/esm/ion-datetime_3.entry.js +1 -1
  165. package/dist/esm/ion-divider.entry.js +1 -1
  166. package/dist/esm/ion-input-otp.entry.js +1 -1
  167. package/dist/esm/ion-input-password-toggle.entry.js +1 -1
  168. package/dist/esm/ion-input.entry.js +1 -1
  169. package/dist/esm/ion-item-option_3.entry.js +2 -2
  170. package/dist/esm/ion-item_8.entry.js +2 -2
  171. package/dist/esm/ion-modal.entry.js +1 -1
  172. package/dist/esm/ion-popover.entry.js +1 -1
  173. package/dist/esm/ion-progress-bar.entry.js +1 -1
  174. package/dist/esm/ion-radio_2.entry.js +2 -2
  175. package/dist/esm/ion-range.entry.js +1 -1
  176. package/dist/esm/ion-searchbar.entry.js +1 -1
  177. package/dist/esm/ion-segment_2.entry.js +1 -1
  178. package/dist/esm/ion-select-modal.entry.js +1 -1
  179. package/dist/esm/ion-select_3.entry.js +2 -2
  180. package/dist/esm/ion-spinner.entry.js +1 -1
  181. package/dist/esm/ion-tab-bar_2.entry.js +2 -2
  182. package/dist/esm/ion-textarea.entry.js +1 -1
  183. package/dist/esm/ion-toast.entry.js +1 -1
  184. package/dist/esm/ion-toggle.entry.js +1 -1
  185. package/dist/ionic/ionic.esm.js +1 -1
  186. package/dist/ionic/p-00006e47.entry.js +4 -0
  187. package/dist/ionic/p-009518a4.entry.js +4 -0
  188. package/dist/ionic/p-031a1e4a.entry.js +4 -0
  189. package/dist/ionic/p-053dc7c5.entry.js +4 -0
  190. package/dist/ionic/p-130765f7.entry.js +4 -0
  191. package/dist/ionic/p-1753c08d.entry.js +4 -0
  192. package/dist/ionic/{p-1febf200.entry.js → p-24cbfd66.entry.js} +1 -1
  193. package/dist/ionic/p-367d5fd5.entry.js +4 -0
  194. package/dist/ionic/{p-86208a0e.entry.js → p-3c070023.entry.js} +1 -1
  195. package/dist/ionic/p-404817bb.entry.js +4 -0
  196. package/dist/ionic/p-59386a0f.entry.js +4 -0
  197. package/dist/ionic/p-5971c704.entry.js +4 -0
  198. package/dist/ionic/p-61e298db.entry.js +4 -0
  199. package/dist/ionic/p-62d386b6.entry.js +4 -0
  200. package/dist/ionic/p-74ad4b7e.entry.js +4 -0
  201. package/dist/ionic/p-7703fee4.entry.js +4 -0
  202. package/dist/ionic/p-788418c5.entry.js +4 -0
  203. package/dist/ionic/p-7c7ce81c.entry.js +4 -0
  204. package/dist/ionic/p-7dfefd17.entry.js +4 -0
  205. package/dist/ionic/{p-316eed75.entry.js → p-877be084.entry.js} +1 -1
  206. package/dist/ionic/p-8930910d.entry.js +4 -0
  207. package/dist/ionic/p-89ce42f3.entry.js +4 -0
  208. package/dist/ionic/{p-1ce65194.entry.js → p-9b8f5965.entry.js} +1 -1
  209. package/dist/ionic/p-a1e40bc9.entry.js +4 -0
  210. package/dist/ionic/{p-0166d6e5.entry.js → p-b002b938.entry.js} +1 -1
  211. package/dist/ionic/p-d1a8bb39.entry.js +4 -0
  212. package/dist/ionic/p-e13cf1d8.entry.js +4 -0
  213. package/dist/ionic/p-e386bba3.entry.js +4 -0
  214. package/dist/ionic/p-e69338d9.entry.js +4 -0
  215. package/dist/ionic/p-f0b1da81.entry.js +4 -0
  216. package/dist/ionic/{p-75c7595c.entry.js → p-ff055c7b.entry.js} +1 -1
  217. package/hydrate/index.js +43 -43
  218. package/hydrate/index.mjs +43 -43
  219. package/package.json +3 -3
  220. package/components/p-Ba2Mmm22.js +0 -4
  221. package/components/p-BnQAsi91.js +0 -4
  222. package/components/p-C1L59jNd.js +0 -4
  223. package/components/p-CA81qANP.js +0 -4
  224. package/components/p-CHB9zWT6.js +0 -4
  225. package/components/p-CWqLCAML.js +0 -4
  226. package/components/p-CxoHM559.js +0 -4
  227. package/components/p-D2tZEPGv.js +0 -4
  228. package/components/p-D6zl6ZA8.js +0 -4
  229. package/components/p-Df6WZ6z0.js +0 -4
  230. package/components/p-DkfVuzjA.js +0 -4
  231. package/components/p-Ds3yn-R0.js +0 -4
  232. package/components/p-VrmyB-Wu.js +0 -4
  233. package/components/p-vUGYs065.js +0 -4
  234. package/dist/ionic/p-0a0a66e2.entry.js +0 -4
  235. package/dist/ionic/p-0ac15b5f.entry.js +0 -4
  236. package/dist/ionic/p-0c636ad3.entry.js +0 -4
  237. package/dist/ionic/p-1a609156.entry.js +0 -4
  238. package/dist/ionic/p-2016c1c0.entry.js +0 -4
  239. package/dist/ionic/p-296226f1.entry.js +0 -4
  240. package/dist/ionic/p-2a54aec2.entry.js +0 -4
  241. package/dist/ionic/p-2bf60b77.entry.js +0 -4
  242. package/dist/ionic/p-2e1d650a.entry.js +0 -4
  243. package/dist/ionic/p-40a21a22.entry.js +0 -4
  244. package/dist/ionic/p-431bc3ce.entry.js +0 -4
  245. package/dist/ionic/p-51542c69.entry.js +0 -4
  246. package/dist/ionic/p-711ba315.entry.js +0 -4
  247. package/dist/ionic/p-7cbf17f0.entry.js +0 -4
  248. package/dist/ionic/p-7f59020c.entry.js +0 -4
  249. package/dist/ionic/p-8303462c.entry.js +0 -4
  250. package/dist/ionic/p-a37444b3.entry.js +0 -4
  251. package/dist/ionic/p-ac3af8af.entry.js +0 -4
  252. package/dist/ionic/p-b3da2cc7.entry.js +0 -4
  253. package/dist/ionic/p-b4533070.entry.js +0 -4
  254. package/dist/ionic/p-b4901bce.entry.js +0 -4
  255. package/dist/ionic/p-c4ebdfd2.entry.js +0 -4
  256. package/dist/ionic/p-de4e8418.entry.js +0 -4
  257. package/dist/ionic/p-e086f8c3.entry.js +0 -4
  258. package/dist/ionic/p-ff74cf5d.entry.js +0 -4
package/dist/collection/components/badge/badge.ionic.css CHANGED
@@ -128,12 +128,11 @@
128
128
  --padding-end: var(--token-space-200, var(--token-scale-200, 8px));
129
129
  --padding-top: var(--token-space-0, var(--token-scale-0, 0px));
130
130
  --padding-bottom: var(--token-space-0, var(--token-scale-0, 0px));
131
+ font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
131
132
  font-size: var(--token-font-size-300, 0.75rem);
132
133
  font-weight: var(--token-font-weight-medium, 500);
133
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
134
- line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
135
- text-decoration: none;
136
- text-transform: none;
134
+ letter-spacing: var(--token-font-letter-spacing-0, 0);
135
+ line-height: var(--token-font-line-height-500, 1.25rem);
137
136
  display: inline-flex;
138
137
  align-items: center;
139
138
  justify-content: center;
@@ -151,8 +150,8 @@
151
150
  }
152
151
 
153
152
  :host(.badge-subtle) {
154
- --background: var(--ion-color-primary-subtle, var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #e9ecfc))));
155
- --color: var(--ion-color-primary-subtle-contrast, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
153
+ --background: var(--ion-color-primary-subtle, var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f0f2ff))));
154
+ --color: var(--ion-color-primary-subtle-contrast, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3)));
156
155
  }
157
156
 
158
157
  :host(.badge-subtle.ion-color) {
@@ -162,21 +161,21 @@
162
161
 
163
162
  /* Soft Badge */
164
163
  :host(.badge-soft) {
165
- border-radius: var(--token-soft-xs, var(--token-border-radius-200, var(--token-scale-200, 8px)));
164
+ border-radius: var(--token-shape-soft-xs, 8px);
166
165
  }
167
166
 
168
167
  :host(.badge-small.badge-soft) {
169
- border-radius: var(--token-soft-2xs, var(--token-border-radius-100, var(--token-scale-100, 4px)));
168
+ border-radius: var(--token-shape-soft-2xs, 4px);
170
169
  }
171
170
 
172
171
  /* Round Badge */
173
172
  :host(.badge-round) {
174
- border-radius: var(--token-round-sm, var(--token-border-radius-full, 999px));
173
+ border-radius: var(--token-shape-round-sm, 999px);
175
174
  }
176
175
 
177
176
  /* Rectangular Badge */
178
177
  :host(.badge-rectangular) {
179
- border-radius: var(--token-rectangular-sm, var(--token-border-radius-0, var(--token-scale-0, 0px)));
178
+ border-radius: var(--token-shape-rectangular-sm, 0px);
180
179
  }
181
180
 
182
181
  /* Small Badge */
@@ -197,12 +196,11 @@
197
196
  :host(.badge-large) {
198
197
  --padding-start: var(--token-space-100, var(--token-scale-100, 4px));
199
198
  --padding-end: var(--token-space-100, var(--token-scale-100, 4px));
199
+ font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
200
200
  font-size: var(--token-font-size-350, 0.875rem);
201
201
  font-weight: var(--token-font-weight-medium, 500);
202
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
203
- line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
204
- text-decoration: none;
205
- text-transform: none;
202
+ letter-spacing: var(--token-font-letter-spacing-0, 0);
203
+ line-height: var(--token-font-line-height-600, 1.5rem);
206
204
  min-width: var(--token-scale-600, 24px);
207
205
  height: var(--token-scale-600, 24px);
208
206
  }
@@ -258,12 +256,11 @@
258
256
  :host(:not(:empty).in-button) {
259
257
  --padding-start: var(--token-scale-050, 2px);
260
258
  --padding-end: var(--token-scale-050, 2px);
259
+ font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
261
260
  font-size: var(--token-font-size-300, 0.75rem);
262
261
  font-weight: var(--token-font-weight-medium, 500);
263
- letter-spacing: var(--token-font-letter-spacing-1, 1%);
264
- line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
265
- text-decoration: none;
266
- text-transform: none;
262
+ letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
263
+ line-height: var(--token-font-line-height-500, 1.25rem);
267
264
  min-width: var(--token-scale-400, 16px);
268
265
  height: var(--token-scale-400, 16px);
269
266
  }
package/dist/collection/components/button/button.ionic.css CHANGED
@@ -347,7 +347,7 @@ ion-ripple-effect {
347
347
  --padding-end: var(--token-space-0, var(--token-scale-0, 0px));
348
348
  --padding-bottom: var(--padding-top);
349
349
  --padding-start: var(--padding-end);
350
- --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
350
+ --focus-ring-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
351
351
  --focus-ring-width: var(--token-border-size-050, var(--token-scale-050, 2px));
352
352
  position: relative;
353
353
  }
@@ -365,7 +365,7 @@ ion-ripple-effect {
365
365
  }
366
366
 
367
367
  :host(.button-clear) {
368
- --color: var(--ion-color-primary-foreground, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
368
+ --color: var(--ion-color-primary-foreground, var(--token-text-primary, var(--token-semantics-primary-800, var(--token-primitives-blue-800, #0f54da))));
369
369
  }
370
370
 
371
371
  :host(.button-solid) {
@@ -381,7 +381,7 @@ ion-ripple-effect {
381
381
 
382
382
  :host(.button-outline) {
383
383
  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
384
- --border-style: var(--token-border-style-solid, solid);
384
+ --border-style: solid;
385
385
  --background-activated: var(--ion-color-primary-subtle-shade, var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa))));
386
386
  --background-focused: transparent;
387
387
  --background-hover: var(--ion-color-primary-subtle-shade, var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa))));
@@ -393,8 +393,8 @@ ion-ripple-effect {
393
393
  }
394
394
 
395
395
  :host(.button-outline.ion-color-warning) .button-native {
396
- border-color: var(--ion-color-warning-foreground, var(--token-text-warning, var(--token-semantics-warning-1000, var(--token-primitives-yellow-1000, #704b02))));
397
- color: var(--ion-color-warning-foreground, var(--token-text-warning, var(--token-semantics-warning-1000, var(--token-primitives-yellow-1000, #704b02))));
396
+ border-color: var(--ion-color-warning-foreground, var(--token-text-warning, var(--token-semantics-warning-1000, var(--token-primitives-yellow-1000, #925f00))));
397
+ color: var(--ion-color-warning-foreground, var(--token-text-warning, var(--token-semantics-warning-1000, var(--token-primitives-yellow-1000, #925f00))));
398
398
  }
399
399
 
400
400
  :host(.button-clear) {
@@ -402,7 +402,7 @@ ion-ripple-effect {
402
402
  --background-focused: transparent;
403
403
  --background-hover: var(--ion-color-primary-subtle-shade, var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa))));
404
404
  --background-hover-opacity: 1;
405
- --color: var(--ion-color-primary-foreground, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
405
+ --color: var(--ion-color-primary-foreground, var(--token-text-primary, var(--token-semantics-primary-800, var(--token-primitives-blue-800, #0f54da))));
406
406
  --ripple-opacity: var(--background-activated-opacity, 1);
407
407
  --ripple-color: var(--background-activated);
408
408
  }
@@ -419,12 +419,11 @@ ion-ripple-effect {
419
419
  /* Small Button */
420
420
  :host(.button-small) {
421
421
  --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
422
+ font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
422
423
  font-size: var(--token-font-size-350, 0.875rem);
423
424
  font-weight: var(--token-font-weight-medium, 500);
424
- letter-spacing: var(--token-font-letter-spacing-1, 1%);
425
- line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
426
- text-decoration: none;
427
- text-transform: none;
425
+ letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
426
+ line-height: var(--token-font-line-height-500, 1.25rem);
428
427
  min-width: var(--token-scale-1600, 64px);
429
428
  min-height: var(--token-scale-1000, 40px);
430
429
  }
@@ -432,12 +431,11 @@ ion-ripple-effect {
432
431
  /* Medium Button */
433
432
  :host(.button-medium) {
434
433
  --padding-end: var(--token-space-500, var(--token-scale-500, 20px));
434
+ font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
435
435
  font-size: var(--token-font-size-400, 1rem);
436
436
  font-weight: var(--token-font-weight-medium, 500);
437
- letter-spacing: var(--token-font-letter-spacing-1, 1%);
438
- line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
439
- text-decoration: none;
440
- text-transform: none;
437
+ letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
438
+ line-height: var(--token-font-line-height-600, 1.5rem);
441
439
  min-width: var(--token-scale-1800, 72px);
442
440
  min-height: var(--token-scale-1200, 48px);
443
441
  }
@@ -445,12 +443,11 @@ ion-ripple-effect {
445
443
  /* Large Button */
446
444
  :host(.button-large) {
447
445
  --padding-end: var(--token-space-700, var(--token-scale-700, 28px));
446
+ font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
448
447
  font-size: var(--token-font-size-500, 1.25rem);
449
448
  font-weight: var(--token-font-weight-medium, 500);
450
- letter-spacing: var(--token-font-letter-spacing-1, 1%);
451
- line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
452
- text-decoration: none;
453
- text-transform: none;
449
+ letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
450
+ line-height: var(--token-font-line-height-600, 1.5rem);
454
451
  min-width: var(--token-scale-2000, 80px);
455
452
  min-height: var(--token-scale-1400, 56px);
456
453
  }
@@ -490,19 +487,19 @@ ion-ripple-effect {
490
487
  }
491
488
 
492
489
  :host(.button-soft) {
493
- --border-radius: var(--token-soft-xs, var(--token-border-radius-200, var(--token-scale-200, 8px)));
490
+ --border-radius: var(--token-shape-soft-xs, 8px);
494
491
  }
495
492
 
496
493
  :host(.button-round) {
497
- --border-radius: var(--token-round-xs, var(--token-border-radius-full, 999px));
494
+ --border-radius: var(--token-shape-round-xs, 999px);
498
495
  }
499
496
 
500
497
  :host(.button-rectangular) {
501
- --border-radius: var(--token-rectangular-xs, var(--token-border-radius-0, var(--token-scale-0, 0px)));
498
+ --border-radius: var(--token-shape-rectangular-xs, 0px);
502
499
  }
503
500
 
504
501
  :host(.ion-focused) .button-native {
505
- outline: var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color);
502
+ outline: var(--focus-ring-width) solid var(--focus-ring-color);
506
503
  outline-offset: var(--token-border-size-050, var(--token-scale-050, 2px));
507
504
  }
508
505
 
@@ -634,11 +631,10 @@ ion-ripple-effect {
634
631
  }
635
632
 
636
633
  :host(.in-datetime) {
634
+ font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
637
635
  font-size: var(--token-font-size-400, 1rem);
638
636
  font-weight: var(--token-font-weight-medium, 500);
639
- letter-spacing: var(--token-font-letter-spacing-1, 1%);
640
- line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
641
- text-decoration: none;
642
- text-transform: none;
637
+ letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
638
+ line-height: var(--token-font-line-height-600, 1.5rem);
643
639
  min-height: var(--token-space-1200, var(--token-scale-1200, 48px));
644
640
  }
package/dist/collection/components/buttons/buttons.ionic.css CHANGED
@@ -80,7 +80,7 @@
80
80
  }
81
81
 
82
82
  ::slotted(*) .button-clear {
83
- --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
83
+ --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
84
84
  --background: transparent;
85
85
  --background-activated: transparent;
86
86
  --background-focused: transparent;
package/dist/collection/components/card/card.ionic.css CHANGED
@@ -119,10 +119,10 @@ ion-ripple-effect {
119
119
  :host {
120
120
  --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
121
121
  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
122
- --border-color: var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5));
123
- --border-style: var(--token-border-style-solid, solid);
124
- --border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
125
- --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
122
+ --border-color: var(--token-border-default, var(--token-primitives-neutral-400, #d0d7df));
123
+ --border-style: solid;
124
+ --border-radius: var(--token-shape-round-xl, 16px);
125
+ --color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
126
126
  min-width: var(--token-scale-2400, 96px);
127
127
  border: var(--border-width) var(--border-style) var(--border-color);
128
128
  }
@@ -132,13 +132,13 @@ ion-ripple-effect {
132
132
  }
133
133
 
134
134
  :host(.card-soft) {
135
- --border-radius: var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)));
135
+ --border-radius: var(--token-shape-soft-xl, 12px);
136
136
  }
137
137
 
138
138
  :host(.card-round) {
139
- --border-radius: var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)));
139
+ --border-radius: var(--token-shape-round-xl, 16px);
140
140
  }
141
141
 
142
142
  :host(.card-rectangular) {
143
- --border-radius: var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)));
143
+ --border-radius: var(--token-shape-rectangular-xl, 0px);
144
144
  }
package/dist/collection/components/card-content/card-content.ionic.css CHANGED
@@ -70,12 +70,11 @@
70
70
  padding-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
71
71
  padding-top: var(--token-space-400, var(--token-scale-400, 16px));
72
72
  padding-bottom: var(--token-space-400, var(--token-scale-400, 16px));
73
+ font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
73
74
  font-size: var(--token-font-size-350, 0.875rem);
74
75
  font-weight: var(--token-font-weight-regular, 400);
75
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
76
- line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
77
- text-decoration: none;
78
- text-transform: none;
76
+ letter-spacing: var(--token-font-letter-spacing-0, 0);
77
+ line-height: var(--token-font-line-height-600, 1.5rem);
79
78
  display: flex;
80
79
  flex-direction: column;
81
80
  gap: var(--token-space-400, var(--token-scale-400, 16px));
package/dist/collection/components/card-subtitle/card-subtitle.ionic.css CHANGED
@@ -134,11 +134,10 @@
134
134
  * convert to a unit other than $baselineUnit.
135
135
  */
136
136
  :host {
137
- --color: var(--token-primitives-neutral-800, #626262);
137
+ --color: var(--token-primitives-neutral-800, #6c727a);
138
+ font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
138
139
  font-size: var(--token-font-size-400, 1rem);
139
140
  font-weight: var(--token-font-weight-regular, 400);
140
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
141
- line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
142
- text-decoration: none;
143
- text-transform: none;
141
+ letter-spacing: var(--token-font-letter-spacing-0, 0);
142
+ line-height: var(--token-font-line-height-600, 1.5rem);
144
143
  }
package/dist/collection/components/checkbox/checkbox.ionic.css CHANGED
@@ -290,11 +290,11 @@ input {
290
290
  * @prop --focus-ring-offset: Offset of the focus ring
291
291
  */
292
292
  --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
293
- --border-style: var(--token-border-style-solid, solid);
294
- --border-color: var(--token-primitives-neutral-800, #626262);
293
+ --border-style: solid;
294
+ --border-color: var(--token-primitives-neutral-800, #6c727a);
295
295
  --checkmark-width: var(--token-scale-400, 16px);
296
296
  --checkmark-height: var(--checkmark-width);
297
- --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
297
+ --focus-ring-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
298
298
  --focus-ring-width: var(--token-border-size-050, var(--token-scale-050, 2px));
299
299
  --focus-ring-offset: var(--token-space-050, var(--token-scale-050, 2px));
300
300
  --size: var(--token-scale-600, 24px);
@@ -322,7 +322,7 @@ input {
322
322
  }
323
323
 
324
324
  .label-text-wrapper {
325
- color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
325
+ color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
326
326
  }
327
327
 
328
328
  :host(.in-item) .label-text-wrapper {
@@ -382,20 +382,19 @@ input {
382
382
  }
383
383
 
384
384
  .checkbox-bottom {
385
+ font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
385
386
  font-size: var(--token-font-size-300, 0.75rem);
386
387
  font-weight: var(--token-font-weight-medium, 500);
387
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
388
- line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
389
- text-decoration: none;
390
- text-transform: none;
388
+ letter-spacing: var(--token-font-letter-spacing-0, 0);
389
+ line-height: var(--token-font-line-height-500, 1.25rem);
391
390
  }
392
391
 
393
392
  .checkbox-bottom .error-text {
394
- color: var(--token-text-danger, var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b)));
393
+ color: var(--token-text-danger, var(--token-semantics-danger-800, var(--token-primitives-red-800, #d2002b)));
395
394
  }
396
395
 
397
396
  .checkbox-bottom .helper-text {
398
- color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
397
+ color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
399
398
  }
400
399
 
401
400
  :host(.checkbox-label-placement-start) .label-text-wrapper {
@@ -462,12 +461,12 @@ input {
462
461
  }
463
462
 
464
463
  :host(.ion-invalid) {
465
- --focus-ring-color: var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));
464
+ --focus-ring-color: var(--token-border-danger-default, var(--token-semantics-danger-600, var(--token-primitives-red-600, #ef5264)));
466
465
  }
467
466
 
468
467
  :host(.ion-invalid:not(.checkbox-checked)) .native-wrapper,
469
468
  :host(.ion-invalid:not(.checkbox-checked).checkbox-disabled) .native-wrapper {
470
- border-color: var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));
469
+ border-color: var(--token-border-danger-default, var(--token-semantics-danger-600, var(--token-primitives-red-600, #ef5264)));
471
470
  }
472
471
 
473
472
  :host(.checkbox-disabled) .native-wrapper:after {
@@ -494,7 +493,7 @@ input {
494
493
 
495
494
  @media (any-hover: hover) {
496
495
  :host(:hover) .native-wrapper {
497
- background-color: var(--token-primitives-neutral-100, #f3f3f3);
496
+ background-color: var(--token-primitives-neutral-100, #f6f7fa);
498
497
  }
499
498
  :host(:hover.checkbox-checked) .native-wrapper,
500
499
  :host(:hover.checkbox-checked) .checkbox-icon,
@@ -505,11 +504,11 @@ input {
505
504
  }
506
505
  :host(.ion-focused:not(.checkbox-disabled)) .native-wrapper {
507
506
  outline-offset: var(--focus-ring-width);
508
- outline: var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color);
507
+ outline: var(--focus-ring-width) solid var(--focus-ring-color);
509
508
  }
510
509
 
511
510
  :host(.ion-activated) .native-wrapper {
512
- background-color: var(--token-bg-input-press, var(--token-primitives-neutral-200, #eae9e9));
511
+ background-color: var(--token-bg-input-press, var(--token-primitives-neutral-200, #ebeef2));
513
512
  }
514
513
 
515
514
  :host(.ion-activated.checkbox-checked) .native-wrapper,
@@ -520,10 +519,10 @@ input {
520
519
  }
521
520
 
522
521
  :host(.ion-activated.ion-invalid:not(.checkbox-checked)) {
523
- background-color: var(--token-bg-input-press, var(--token-primitives-neutral-200, #eae9e9));
522
+ background-color: var(--token-bg-input-press, var(--token-primitives-neutral-200, #ebeef2));
524
523
  }
525
524
  :host(.ion-activated.ion-invalid:not(.checkbox-checked)) .native-wrapper {
526
- border-color: var(--token-border-danger-press, var(--token-semantics-danger-1000, var(--token-primitives-red-1000, #761515)));
525
+ border-color: var(--token-border-danger-press, var(--token-semantics-danger-700, var(--token-primitives-red-700, #e0243a)));
527
526
  }
528
527
 
529
528
  :host(.checkbox-shape-soft) {
package/dist/collection/components/chip/chip.ionic.css CHANGED
@@ -111,7 +111,7 @@
111
111
  * @prop --focus-ring-color: Color of the focus ring
112
112
  * @prop --focus-ring-width: Width of the focus ring
113
113
  */
114
- --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
114
+ --focus-ring-color: var(--token-border-focus-default, var(--token-semantics-primary-400, var(--token-primitives-blue-400, #b5c0f7)));
115
115
  --focus-ring-width: var(--token-border-size-050, var(--token-scale-050, 2px));
116
116
  -webkit-padding-start: var(--token-space-200, var(--token-scale-200, 8px));
117
117
  padding-inline-start: var(--token-space-200, var(--token-scale-200, 8px));
@@ -120,25 +120,24 @@
120
120
  padding-top: var(--token-space-150, var(--token-scale-150, 6px));
121
121
  padding-bottom: var(--token-space-150, var(--token-scale-150, 6px));
122
122
  border-radius: var(--border-radius);
123
+ font-family: var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
123
124
  font-size: var(--token-font-size-300, 0.75rem);
124
125
  font-weight: var(--token-font-weight-medium, 500);
125
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
126
- line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
127
- text-decoration: none;
128
- text-transform: none;
126
+ letter-spacing: var(--token-font-letter-spacing-0, 0);
127
+ line-height: var(--token-font-line-height-500, 1.25rem);
129
128
  gap: var(--token-space-100, var(--token-scale-100, 4px));
130
- line-height: var(--token-font-line-height-full, 100%);
129
+ line-height: 100%;
131
130
  cursor: auto;
132
131
  }
133
132
 
134
133
  :host(.chip-outline) {
135
134
  border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
136
- border-style: var(--token-border-style-solid, solid);
135
+ border-style: solid;
137
136
  }
138
137
 
139
138
  :host(.ion-focused) {
140
139
  outline-offset: var(--token-border-size-050, var(--token-scale-050, 2px));
141
- outline: var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--focus-ring-color);
140
+ outline: var(--token-border-size-050, var(--token-scale-050, 2px)) solid var(--focus-ring-color);
142
141
  }
143
142
 
144
143
  :host(.chip-disabled)::after {
@@ -181,21 +180,21 @@
181
180
  }
182
181
 
183
182
  :host(.chip-subtle) {
184
- --background: var(--token-primitives-neutral-100, #f3f3f3);
185
- --color: var(--token-primitives-neutral-800, #626262);
183
+ --background: var(--token-primitives-neutral-100, #f6f7fa);
184
+ --color: var(--token-primitives-neutral-800, #6c727a);
186
185
  }
187
186
 
188
187
  :host(.chip-outline.chip-subtle) {
189
- border-color: var(--token-primitives-neutral-300, #e0e0e0);
188
+ border-color: var(--token-primitives-neutral-300, #e6eaee);
190
189
  }
191
190
 
192
191
  :host(.chip-bold) {
193
- --background: var(--token-bg-neutral-bold-default, var(--token-primitives-neutral-1000, #3b3b3b));
192
+ --background: var(--token-bg-neutral-bold-default, var(--token-primitives-neutral-1000, #383e45));
194
193
  --color: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
195
194
  }
196
195
 
197
196
  :host(.chip-outline.chip-bold) {
198
- border-color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
197
+ border-color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
199
198
  }
200
199
 
201
200
  :host(.chip-subtle.ion-color) {