@ionic/core 8.7.4-dev.11757430138.13649dec → 8.7.4-dev.11758100307.13cc0353

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 (230) hide show
  1. package/components/backdrop.js +1 -1
  2. package/components/button.js +1 -1
  3. package/components/buttons.js +1 -1
  4. package/components/checkbox.js +1 -1
  5. package/components/header.js +1 -1
  6. package/components/ion-accordion-group.js +1 -1
  7. package/components/ion-accordion.js +1 -1
  8. package/components/ion-avatar.js +1 -1
  9. package/components/ion-badge.js +1 -1
  10. package/components/ion-card-content.js +1 -1
  11. package/components/ion-card-header.js +1 -1
  12. package/components/ion-card-subtitle.js +1 -1
  13. package/components/ion-card.js +1 -1
  14. package/components/ion-chip.js +1 -1
  15. package/components/ion-col.js +1 -1
  16. package/components/ion-datetime.js +1 -1
  17. package/components/ion-divider.js +1 -1
  18. package/components/ion-input-otp.js +1 -1
  19. package/components/ion-input-password-toggle.js +1 -1
  20. package/components/ion-input.js +1 -1
  21. package/components/ion-item-option.js +1 -1
  22. package/components/ion-item-options.js +1 -1
  23. package/components/ion-menu-button.js +1 -1
  24. package/components/ion-progress-bar.js +1 -1
  25. package/components/ion-range.js +1 -1
  26. package/components/ion-row.js +1 -1
  27. package/components/ion-searchbar.js +1 -1
  28. package/components/ion-segment-button.js +1 -1
  29. package/components/ion-segment.js +1 -1
  30. package/components/ion-select.js +1 -1
  31. package/components/ion-tab-bar.js +1 -1
  32. package/components/ion-tab-button.js +1 -1
  33. package/components/ion-textarea.js +1 -1
  34. package/components/ion-toast.js +1 -1
  35. package/components/ion-toggle.js +1 -1
  36. package/components/item.js +1 -1
  37. package/components/list-header.js +1 -1
  38. package/components/list.js +1 -1
  39. package/components/modal.js +1 -1
  40. package/components/radio-group.js +1 -1
  41. package/components/radio.js +1 -1
  42. package/components/ripple-effect.js +1 -1
  43. package/components/select-modal.js +1 -1
  44. package/components/spinner.js +1 -1
  45. package/components/title.js +1 -1
  46. package/components/toolbar.js +1 -1
  47. package/css/ionic/bundle.ionic.css +1 -1
  48. package/css/ionic/bundle.ionic.css.map +1 -1
  49. package/css/ionic/core.ionic.css +1 -1
  50. package/css/ionic/core.ionic.css.map +1 -1
  51. package/css/ionic/global.bundle.ionic.css +1 -1
  52. package/css/ionic/global.bundle.ionic.css.map +1 -1
  53. package/css/ionic/ionic-swiper.ionic.css +1 -1
  54. package/css/ionic/ionic-swiper.ionic.css.map +1 -1
  55. package/css/ionic/link.ionic.css +1 -1
  56. package/css/ionic/link.ionic.css.map +1 -1
  57. package/css/ionic/typography.ionic.css +1 -1
  58. package/css/ionic/typography.ionic.css.map +1 -1
  59. package/css/ionic/utils.bundle.ionic.css +1 -1
  60. package/css/ionic/utils.bundle.ionic.css.map +1 -1
  61. package/dist/cjs/ion-accordion_2.cjs.entry.js +2 -2
  62. package/dist/cjs/ion-app_8.cjs.entry.js +4 -4
  63. package/dist/cjs/ion-avatar_3.cjs.entry.js +2 -2
  64. package/dist/cjs/ion-backdrop.cjs.entry.js +1 -1
  65. package/dist/cjs/ion-button_2.cjs.entry.js +1 -1
  66. package/dist/cjs/ion-card_5.cjs.entry.js +4 -4
  67. package/dist/cjs/ion-checkbox.cjs.entry.js +1 -1
  68. package/dist/cjs/ion-chip.cjs.entry.js +1 -1
  69. package/dist/cjs/ion-col_3.cjs.entry.js +2 -2
  70. package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
  71. package/dist/cjs/ion-divider.cjs.entry.js +1 -1
  72. package/dist/cjs/ion-input-otp.cjs.entry.js +1 -1
  73. package/dist/cjs/ion-input-password-toggle.cjs.entry.js +1 -1
  74. package/dist/cjs/ion-input.cjs.entry.js +1 -1
  75. package/dist/cjs/ion-item-option_3.cjs.entry.js +2 -2
  76. package/dist/cjs/ion-item_8.cjs.entry.js +3 -3
  77. package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
  78. package/dist/cjs/ion-modal.cjs.entry.js +1 -1
  79. package/dist/cjs/ion-progress-bar.cjs.entry.js +1 -1
  80. package/dist/cjs/ion-radio_2.cjs.entry.js +2 -2
  81. package/dist/cjs/ion-range.cjs.entry.js +1 -1
  82. package/dist/cjs/ion-ripple-effect.cjs.entry.js +1 -1
  83. package/dist/cjs/ion-searchbar.cjs.entry.js +1 -1
  84. package/dist/cjs/ion-segment_2.cjs.entry.js +2 -2
  85. package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
  86. package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
  87. package/dist/cjs/ion-spinner.cjs.entry.js +1 -1
  88. package/dist/cjs/ion-tab-bar_2.cjs.entry.js +2 -2
  89. package/dist/cjs/ion-textarea.cjs.entry.js +1 -1
  90. package/dist/cjs/ion-toast.cjs.entry.js +1 -1
  91. package/dist/cjs/ion-toggle.cjs.entry.js +1 -1
  92. package/dist/collection/components/accordion/accordion.ionic.css +31 -33
  93. package/dist/collection/components/accordion-group/accordion-group.ionic.css +15 -17
  94. package/dist/collection/components/avatar/avatar.ionic.css +95 -97
  95. package/dist/collection/components/backdrop/backdrop.ionic.css +2 -4
  96. package/dist/collection/components/badge/badge.ionic.css +54 -56
  97. package/dist/collection/components/button/button.ionic.css +82 -84
  98. package/dist/collection/components/buttons/buttons.ionic.css +4 -7
  99. package/dist/collection/components/card/card.ionic.css +11 -13
  100. package/dist/collection/components/card-content/card-content.ionic.css +14 -16
  101. package/dist/collection/components/card-header/card-header.ionic.css +8 -10
  102. package/dist/collection/components/card-subtitle/card-subtitle.ionic.css +6 -8
  103. package/dist/collection/components/checkbox/checkbox.ionic.css +50 -52
  104. package/dist/collection/components/chip/chip.ionic.css +36 -38
  105. package/dist/collection/components/col/col.css +8 -0
  106. package/dist/collection/components/datetime/datetime.ionic.css +111 -113
  107. package/dist/collection/components/divider/divider.ionic.css +16 -18
  108. package/dist/collection/components/header/header.ionic.css +6 -8
  109. package/dist/collection/components/input/input.ionic.css +69 -71
  110. package/dist/collection/components/input-otp/input-otp.ionic.css +49 -51
  111. package/dist/collection/components/input-password-toggle/input-password-toggle.ionic.css +3 -5
  112. package/dist/collection/components/item/item.ionic.css +32 -34
  113. package/dist/collection/components/item-option/item-option.ionic.css +32 -34
  114. package/dist/collection/components/item-options/item-options.ionic.css +7 -9
  115. package/dist/collection/components/list/list.ionic.css +28 -30
  116. package/dist/collection/components/list-header/list-header.ionic.css +14 -16
  117. package/dist/collection/components/menu-button/menu-button.ionic.css +4 -6
  118. package/dist/collection/components/modal/modal.ionic.css +19 -21
  119. package/dist/collection/components/progress-bar/progress-bar.ionic.css +6 -8
  120. package/dist/collection/components/radio/radio.ionic.css +28 -30
  121. package/dist/collection/components/radio-group/radio-group.ionic.css +16 -18
  122. package/dist/collection/components/range/range.ionic.css +61 -63
  123. package/dist/collection/components/ripple-effect/ripple-effect.ionic.css +2 -4
  124. package/dist/collection/components/row/row.css +3 -1
  125. package/dist/collection/components/searchbar/searchbar.ionic.css +100 -102
  126. package/dist/collection/components/segment/segment.ionic.css +2 -4
  127. package/dist/collection/components/segment-button/segment-button.ionic.css +28 -30
  128. package/dist/collection/components/select/select.ionic.css +64 -66
  129. package/dist/collection/components/select-modal/select-modal.ionic.css +14 -16
  130. package/dist/collection/components/spinner/spinner.ionic.css +17 -19
  131. package/dist/collection/components/tab-bar/tab-bar.ionic.css +26 -28
  132. package/dist/collection/components/tab-button/tab-button.ionic.css +28 -30
  133. package/dist/collection/components/textarea/textarea.ionic.css +70 -72
  134. package/dist/collection/components/title/title.ionic.css +9 -11
  135. package/dist/collection/components/toast/toast.ionic.css +44 -46
  136. package/dist/collection/components/toggle/toggle.ionic.css +38 -40
  137. package/dist/collection/components/toolbar/toolbar.ionic.css +18 -20
  138. package/dist/docs.json +8 -2
  139. package/dist/esm/ion-accordion_2.entry.js +2 -2
  140. package/dist/esm/ion-app_8.entry.js +4 -4
  141. package/dist/esm/ion-avatar_3.entry.js +2 -2
  142. package/dist/esm/ion-backdrop.entry.js +1 -1
  143. package/dist/esm/ion-button_2.entry.js +1 -1
  144. package/dist/esm/ion-card_5.entry.js +4 -4
  145. package/dist/esm/ion-checkbox.entry.js +1 -1
  146. package/dist/esm/ion-chip.entry.js +1 -1
  147. package/dist/esm/ion-col_3.entry.js +2 -2
  148. package/dist/esm/ion-datetime_3.entry.js +1 -1
  149. package/dist/esm/ion-divider.entry.js +1 -1
  150. package/dist/esm/ion-input-otp.entry.js +1 -1
  151. package/dist/esm/ion-input-password-toggle.entry.js +1 -1
  152. package/dist/esm/ion-input.entry.js +1 -1
  153. package/dist/esm/ion-item-option_3.entry.js +2 -2
  154. package/dist/esm/ion-item_8.entry.js +3 -3
  155. package/dist/esm/ion-menu_3.entry.js +1 -1
  156. package/dist/esm/ion-modal.entry.js +1 -1
  157. package/dist/esm/ion-progress-bar.entry.js +1 -1
  158. package/dist/esm/ion-radio_2.entry.js +2 -2
  159. package/dist/esm/ion-range.entry.js +1 -1
  160. package/dist/esm/ion-ripple-effect.entry.js +1 -1
  161. package/dist/esm/ion-searchbar.entry.js +1 -1
  162. package/dist/esm/ion-segment_2.entry.js +2 -2
  163. package/dist/esm/ion-select-modal.entry.js +1 -1
  164. package/dist/esm/ion-select_3.entry.js +1 -1
  165. package/dist/esm/ion-spinner.entry.js +1 -1
  166. package/dist/esm/ion-tab-bar_2.entry.js +2 -2
  167. package/dist/esm/ion-textarea.entry.js +1 -1
  168. package/dist/esm/ion-toast.entry.js +1 -1
  169. package/dist/esm/ion-toggle.entry.js +1 -1
  170. package/dist/ionic/ionic.esm.js +1 -1
  171. package/dist/ionic/p-07317db2.entry.js +4 -0
  172. package/dist/ionic/p-0870e5cf.entry.js +4 -0
  173. package/dist/ionic/p-0a4718a4.entry.js +4 -0
  174. package/dist/ionic/p-0e535cb1.entry.js +4 -0
  175. package/dist/ionic/p-11f6cfff.entry.js +4 -0
  176. package/dist/ionic/{p-083bdc4a.entry.js → p-18660f23.entry.js} +1 -1
  177. package/dist/ionic/p-19efbfc2.entry.js +4 -0
  178. package/dist/ionic/{p-abc60b26.entry.js → p-1acc1bfe.entry.js} +1 -1
  179. package/dist/ionic/p-266e8f94.entry.js +4 -0
  180. package/dist/ionic/{p-45b08f61.entry.js → p-2a2897a7.entry.js} +1 -1
  181. package/dist/ionic/p-2e6836c7.entry.js +4 -0
  182. package/dist/ionic/p-304b999f.entry.js +4 -0
  183. package/dist/ionic/p-3f22a9de.entry.js +4 -0
  184. package/dist/ionic/p-4f9d7d26.entry.js +4 -0
  185. package/dist/ionic/p-57bd2088.entry.js +4 -0
  186. package/dist/ionic/p-59c4a194.entry.js +4 -0
  187. package/dist/ionic/p-5f0c7c62.entry.js +4 -0
  188. package/dist/ionic/p-75b29611.entry.js +4 -0
  189. package/dist/ionic/p-845e0158.entry.js +4 -0
  190. package/dist/ionic/p-9149ea07.entry.js +4 -0
  191. package/dist/ionic/{p-0cffd1bf.entry.js → p-9f497b9a.entry.js} +1 -1
  192. package/dist/ionic/p-a08c83ba.entry.js +4 -0
  193. package/dist/ionic/p-a3ea0e64.entry.js +4 -0
  194. package/dist/ionic/p-a5893690.entry.js +4 -0
  195. package/dist/ionic/p-b2aa3ff0.entry.js +4 -0
  196. package/dist/ionic/p-c692cc4a.entry.js +4 -0
  197. package/dist/ionic/p-c7477cd9.entry.js +4 -0
  198. package/dist/ionic/p-d04293de.entry.js +4 -0
  199. package/dist/ionic/p-d6e4bead.entry.js +4 -0
  200. package/dist/ionic/p-e7ecbdce.entry.js +4 -0
  201. package/dist/ionic/{p-bfad272a.entry.js → p-fd72d046.entry.js} +1 -1
  202. package/hydrate/index.js +46 -46
  203. package/hydrate/index.mjs +46 -46
  204. package/package.json +4 -4
  205. package/dist/ionic/p-09ee42c7.entry.js +0 -4
  206. package/dist/ionic/p-0a973339.entry.js +0 -4
  207. package/dist/ionic/p-0edc2fcf.entry.js +0 -4
  208. package/dist/ionic/p-34198a78.entry.js +0 -4
  209. package/dist/ionic/p-3610f001.entry.js +0 -4
  210. package/dist/ionic/p-389093b6.entry.js +0 -4
  211. package/dist/ionic/p-417569b5.entry.js +0 -4
  212. package/dist/ionic/p-637e497f.entry.js +0 -4
  213. package/dist/ionic/p-65d9c265.entry.js +0 -4
  214. package/dist/ionic/p-7918eeaa.entry.js +0 -4
  215. package/dist/ionic/p-80de7b65.entry.js +0 -4
  216. package/dist/ionic/p-80faabb9.entry.js +0 -4
  217. package/dist/ionic/p-8fa42767.entry.js +0 -4
  218. package/dist/ionic/p-905f6505.entry.js +0 -4
  219. package/dist/ionic/p-97bf9127.entry.js +0 -4
  220. package/dist/ionic/p-9af1c2e0.entry.js +0 -4
  221. package/dist/ionic/p-ab387abd.entry.js +0 -4
  222. package/dist/ionic/p-b8c602ec.entry.js +0 -4
  223. package/dist/ionic/p-c6887f5c.entry.js +0 -4
  224. package/dist/ionic/p-c8eb678d.entry.js +0 -4
  225. package/dist/ionic/p-cff18cc5.entry.js +0 -4
  226. package/dist/ionic/p-d207d49c.entry.js +0 -4
  227. package/dist/ionic/p-d9525f67.entry.js +0 -4
  228. package/dist/ionic/p-e6caa048.entry.js +0 -4
  229. package/dist/ionic/p-eea0e705.entry.js +0 -4
  230. package/dist/ionic/p-ff010b26.entry.js +0 -4
package/dist/collection/components/searchbar/searchbar.ionic.css CHANGED
@@ -4,9 +4,7 @@
4
4
  * @param pixels - Value in pixels to be converted (i.e. px)
5
5
  * @param context (optional) - Baseline value
6
6
  */
7
- /*
8
- Do not edit directly, this file was auto-generated.
9
- */ /**
7
+ /**
10
8
  * A heuristic that applies CSS to tablet
11
9
  * viewports.
12
10
  *
@@ -217,20 +215,20 @@ Do not edit directly, this file was auto-generated.
217
215
  * @prop --focus-ring-color: The color of the ring around the focused element.
218
216
  * @prop --focus-ring-width: The width of the ring around the focused element.
219
217
  */
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));
218
+ --background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #efefef));
219
+ --border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
222
220
  --box-shadow: none;
223
- --cancel-button-color: var(--ion-primitives-neutral-800, #626262);
224
- --clear-button-color: var(--ion-primitives-neutral-1000, #3b3b3b);
225
- --color: var(--ion-primitives-neutral-1200, #242424);
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
- font-size: var(--ion-font-size-350, 0.875rem);
231
- font-weight: var(--ion-font-weight-regular, 400);
232
- letter-spacing: var(--ion-font-letter-spacing-0, 0%);
233
- line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
221
+ --cancel-button-color: var(--token-primitives-neutral-800, #626262);
222
+ --clear-button-color: var(--token-primitives-neutral-1000, #3b3b3b);
223
+ --color: var(--token-primitives-neutral-1200, #242424);
224
+ --icon-color: var(--token-icon-subtlest, var(--token-primitives-neutral-800, #626262));
225
+ --placeholder-color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
226
+ --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
227
+ --focus-ring-width: var(--token-border-size-050, var(--token-scale-050, 2px));
228
+ font-size: var(--token-font-size-350, 0.875rem);
229
+ font-weight: var(--token-font-weight-regular, 400);
230
+ letter-spacing: var(--token-font-letter-spacing-0, 0%);
231
+ line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
234
232
  text-decoration: none;
235
233
  text-transform: none;
236
234
  padding-left: 0;
@@ -240,30 +238,30 @@ Do not edit directly, this file was auto-generated.
240
238
  }
241
239
 
242
240
  .searchbar-search-icon {
243
- width: var(--ion-scale-400, 16px);
244
- height: var(--ion-scale-400, 16px);
241
+ width: var(--token-scale-400, 16px);
242
+ height: var(--token-scale-400, 16px);
245
243
  }
246
244
 
247
245
  .searchbar-input {
248
- padding-top: var(--ion-space-300, var(--ion-scale-300, 12px));
249
- padding-bottom: var(--ion-space-300, var(--ion-scale-300, 12px));
246
+ padding-top: var(--token-space-300, var(--token-scale-300, 12px));
247
+ padding-bottom: var(--token-space-300, var(--token-scale-300, 12px));
250
248
  text-overflow: ellipsis;
251
249
  contain: strict;
252
250
  }
253
251
 
254
252
  .searchbar-clear-button {
255
- width: var(--ion-scale-400, 16px);
256
- height: var(--ion-scale-400, 16px);
253
+ width: var(--token-scale-400, 16px);
254
+ height: var(--token-scale-400, 16px);
257
255
  background-color: transparent;
258
- font-size: var(--ion-scale-400, 16px);
256
+ font-size: var(--token-scale-400, 16px);
259
257
  contain: strict;
260
258
  }
261
259
 
262
260
  .searchbar-cancel-button {
263
- width: var(--ion-scale-400, 16px);
264
- height: var(--ion-scale-400, 16px);
261
+ width: var(--token-scale-400, 16px);
262
+ height: var(--token-scale-400, 16px);
265
263
  background-color: transparent;
266
- font-size: var(--ion-font-size-400, 1rem);
264
+ font-size: var(--token-font-size-400, 1rem);
267
265
  }
268
266
 
269
267
  .searchbar-search-icon,
@@ -276,13 +274,13 @@ Do not edit directly, this file was auto-generated.
276
274
 
277
275
  .searchbar-clear-button:focus-visible,
278
276
  .searchbar-cancel-button:focus-visible ion-icon {
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));
277
+ border-radius: var(--token-border-radius-100, var(--token-scale-100, 4px));
278
+ outline: var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
281
279
  opacity: 1;
282
280
  }
283
281
 
284
282
  :host(.searchbar-has-value) {
285
- --icon-color: var(--ion-icon-default, var(--ion-primitives-neutral-1200, #242424));
283
+ --icon-color: var(--token-icon-default, var(--token-primitives-neutral-1200, #242424));
286
284
  }
287
285
 
288
286
  :host(.in-toolbar.searchbar-should-show-cancel) .searchbar-cancel-button {
@@ -295,17 +293,17 @@ Do not edit directly, this file was auto-generated.
295
293
  */
296
294
  }
297
295
  :host(.in-toolbar.searchbar-should-show-cancel) .searchbar-cancel-button {
298
- inset-inline-start: var(--ion-space-200, var(--ion-scale-200, 8px));
296
+ inset-inline-start: var(--token-space-200, var(--token-scale-200, 8px));
299
297
  }
300
298
 
301
299
  /* Hover */
302
300
  :host(:hover) {
303
- --background: var(--ion-primitives-neutral-200, #efefef);
301
+ --background: var(--token-primitives-neutral-200, #efefef);
304
302
  }
305
303
 
306
304
  /* Focus */
307
305
  :host(.searchbar-has-focus) .searchbar-input {
308
- outline: var(--focus-ring-width) var(--ion-border-style-solid, solid) var(--focus-ring-color);
306
+ outline: var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color);
309
307
  }
310
308
 
311
309
  :host(.searchbar-has-focus) .searchbar-search-icon,
@@ -321,23 +319,23 @@ Do not edit directly, this file was auto-generated.
321
319
 
322
320
  /* Disabled */
323
321
  :host(.searchbar-disabled) {
324
- --color: var(--ion-primitives-neutral-500, #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));
322
+ --color: var(--token-primitives-neutral-500, #a2a2a2);
323
+ --icon-color: var(--token-icon-disabled, var(--token-primitives-neutral-500, #a2a2a2));
324
+ --placeholder-color: var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2));
327
325
  cursor: default;
328
326
  pointer-events: none;
329
327
  }
330
328
 
331
329
  :host(.searchbar-shape-soft) {
332
- --border-radius: var(--ion-border-radius-200, var(--ion-scale-200, 8px));
330
+ --border-radius: var(--token-border-radius-200, var(--token-scale-200, 8px));
333
331
  }
334
332
 
335
333
  :host(.searchbar-shape-round) {
336
- --border-radius: var(--ion-border-radius-400, var(--ion-scale-400, 16px));
334
+ --border-radius: var(--token-border-radius-400, var(--token-scale-400, 16px));
337
335
  }
338
336
 
339
337
  :host(.searchbar-shape-rectangular) {
340
- --border-radius: var(--ion-border-radius-0, var(--ion-scale-0, 0px));
338
+ --border-radius: var(--token-border-radius-0, var(--token-scale-0, 0px));
341
339
  }
342
340
 
343
341
  /* Small */
@@ -351,11 +349,11 @@ Do not edit directly, this file was auto-generated.
351
349
  * desired padding from design,
352
350
  * no trailing icons.
353
351
  */
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
- height: var(--ion-scale-1000, 40px);
352
+ -webkit-padding-start: var(--token-space-300, var(--token-scale-300, 12px));
353
+ padding-inline-start: var(--token-space-300, var(--token-scale-300, 12px));
354
+ -webkit-padding-end: var(--token-space-300, var(--token-scale-300, 12px));
355
+ padding-inline-end: var(--token-space-300, var(--token-scale-300, 12px));
356
+ height: var(--token-scale-1000, 40px);
359
357
  }
360
358
 
361
359
  /* Small with Leading Icons */
@@ -371,10 +369,10 @@ Do not edit directly, this file was auto-generated.
371
369
  * desired padding from design,
372
370
  * no trailing icons.
373
371
  */
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));
372
+ -webkit-padding-start: calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
373
+ padding-inline-start: calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
374
+ -webkit-padding-end: var(--token-space-300, var(--token-scale-300, 12px));
375
+ padding-inline-end: var(--token-space-300, var(--token-scale-300, 12px));
378
376
  }
379
377
 
380
378
  /* Small with Leading Icons and Trailing Icons */
@@ -391,10 +389,10 @@ Do not edit directly, this file was auto-generated.
391
389
  * the size of the trailing icon (clear),
392
390
  * and the gap between the icon and the input.
393
391
  */
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)));
392
+ -webkit-padding-start: calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
393
+ padding-inline-start: calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
394
+ -webkit-padding-end: calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
395
+ padding-inline-end: calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
398
396
  }
399
397
 
400
398
  /* Small with Trailing Icons */
@@ -409,19 +407,19 @@ Do not edit directly, this file was auto-generated.
409
407
  * the size of the trailing icon (clear),
410
408
  * and the gap between the icon and the input.
411
409
  */
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)));
410
+ -webkit-padding-start: var(--token-space-300, var(--token-scale-300, 12px));
411
+ padding-inline-start: var(--token-space-300, var(--token-scale-300, 12px));
412
+ -webkit-padding-end: calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
413
+ padding-inline-end: calc(var(--token-space-300, var(--token-scale-300, 12px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
416
414
  }
417
415
 
418
416
  :host(.searchbar-size-small) .searchbar-search-icon,
419
417
  :host(.searchbar-size-small) .searchbar-cancel-button {
420
- inset-inline-start: var(--ion-space-300, var(--ion-scale-300, 12px));
418
+ inset-inline-start: var(--token-space-300, var(--token-scale-300, 12px));
421
419
  }
422
420
 
423
421
  :host(.searchbar-size-small) .searchbar-clear-button {
424
- inset-inline-end: var(--ion-space-300, var(--ion-scale-300, 12px));
422
+ inset-inline-end: var(--token-space-300, var(--token-scale-300, 12px));
425
423
  }
426
424
 
427
425
  /* Medium */
@@ -435,11 +433,11 @@ Do not edit directly, this file was auto-generated.
435
433
  * desired padding from design,
436
434
  * no trailing icons.
437
435
  */
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
- height: var(--ion-scale-1200, 48px);
436
+ -webkit-padding-start: var(--token-space-400, var(--token-scale-400, 16px));
437
+ padding-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
438
+ -webkit-padding-end: var(--token-space-400, var(--token-scale-400, 16px));
439
+ padding-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
440
+ height: var(--token-scale-1200, 48px);
443
441
  }
444
442
 
445
443
  /* Medium with Leading Icons */
@@ -455,10 +453,10 @@ Do not edit directly, this file was auto-generated.
455
453
  * desired padding from design,
456
454
  * no trailing icons.
457
455
  */
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));
456
+ -webkit-padding-start: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
457
+ padding-inline-start: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
458
+ -webkit-padding-end: var(--token-space-400, var(--token-scale-400, 16px));
459
+ padding-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
462
460
  }
463
461
 
464
462
  /* Medium with Leading Icons and Trailing Icons */
@@ -475,10 +473,10 @@ Do not edit directly, this file was auto-generated.
475
473
  * the size of the trailing icon (clear),
476
474
  * and the gap between the icon and the input.
477
475
  */
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)));
476
+ -webkit-padding-start: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
477
+ padding-inline-start: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
478
+ -webkit-padding-end: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
479
+ padding-inline-end: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
482
480
  }
483
481
 
484
482
  /* Medium with Trailing Icons */
@@ -493,19 +491,19 @@ Do not edit directly, this file was auto-generated.
493
491
  * the size of the trailing icon (clear),
494
492
  * and the gap between the icon and the input.
495
493
  */
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)));
494
+ -webkit-padding-start: var(--token-space-400, var(--token-scale-400, 16px));
495
+ padding-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
496
+ -webkit-padding-end: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
497
+ padding-inline-end: calc(var(--token-space-400, var(--token-scale-400, 16px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
500
498
  }
501
499
 
502
500
  :host(.searchbar-size-medium) .searchbar-search-icon,
503
501
  :host(.searchbar-size-medium) .searchbar-cancel-button {
504
- inset-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
502
+ inset-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
505
503
  }
506
504
 
507
505
  :host(.searchbar-size-medium) .searchbar-clear-button {
508
- inset-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
506
+ inset-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
509
507
  }
510
508
 
511
509
  :host(.in-toolbar.searchbar-size-small.searchbar-should-show-cancel) .searchbar-input,
@@ -516,23 +514,23 @@ Do not edit directly, this file was auto-generated.
516
514
  * the size of the leading icon (search or cancel),
517
515
  * and the gap between the icon and the input.
518
516
  */
519
- padding-inline-start: var(--ion-space-800, var(--ion-scale-800, 32px));
517
+ padding-inline-start: var(--token-space-800, var(--token-scale-800, 32px));
520
518
  }
521
519
 
522
520
  /* Large */
523
521
  :host(.searchbar-size-large) .searchbar-search-icon,
524
522
  :host(.searchbar-size-large) .searchbar-cancel-button {
525
- width: var(--ion-scale-500, 20px);
526
- height: var(--ion-scale-500, 20px);
523
+ width: var(--token-scale-500, 20px);
524
+ height: var(--token-scale-500, 20px);
527
525
  }
528
526
 
529
527
  :host(.searchbar-size-large) .searchbar-cancel-button {
530
- font-size: var(--ion-font-size-500, 1.25rem);
528
+ font-size: var(--token-font-size-500, 1.25rem);
531
529
  }
532
530
 
533
531
  :host(.searchbar-size-large) .searchbar-input {
534
- padding-top: var(--ion-space-400, var(--ion-scale-400, 16px));
535
- padding-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
532
+ padding-top: var(--token-space-400, var(--token-scale-400, 16px));
533
+ padding-bottom: var(--token-space-400, var(--token-scale-400, 16px));
536
534
  /**
537
535
  * Padding start is based on
538
536
  * desired padding from design,
@@ -544,11 +542,11 @@ Do not edit directly, this file was auto-generated.
544
542
  * the size of the trailing icon (clear),
545
543
  * and the gap between the icon and the input.
546
544
  */
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
- height: var(--ion-scale-1400, 56px);
545
+ -webkit-padding-start: var(--token-space-500, var(--token-scale-500, 20px));
546
+ padding-inline-start: var(--token-space-500, var(--token-scale-500, 20px));
547
+ -webkit-padding-end: var(--token-space-500, var(--token-scale-500, 20px));
548
+ padding-inline-end: var(--token-space-500, var(--token-scale-500, 20px));
549
+ height: var(--token-scale-1400, 56px);
552
550
  }
553
551
 
554
552
  /* Large with Leading Icons */
@@ -564,10 +562,10 @@ Do not edit directly, this file was auto-generated.
564
562
  * desired padding from design,
565
563
  * no trailing icons.
566
564
  */
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));
565
+ -webkit-padding-start: calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-500, 20px) + var(--token-space-200, var(--token-scale-200, 8px)));
566
+ padding-inline-start: calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-500, 20px) + var(--token-space-200, var(--token-scale-200, 8px)));
567
+ -webkit-padding-end: var(--token-space-500, var(--token-scale-500, 20px));
568
+ padding-inline-end: var(--token-space-500, var(--token-scale-500, 20px));
571
569
  }
572
570
 
573
571
  /* Large with Leading Icons and Trailing Icons */
@@ -584,10 +582,10 @@ Do not edit directly, this file was auto-generated.
584
582
  * the size of the trailing icon (clear),
585
583
  * and the gap between the icon and the input.
586
584
  */
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)));
585
+ -webkit-padding-start: calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-500, 20px) + var(--token-space-200, var(--token-scale-200, 8px)));
586
+ padding-inline-start: calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-500, 20px) + var(--token-space-200, var(--token-scale-200, 8px)));
587
+ -webkit-padding-end: calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
588
+ padding-inline-end: calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
591
589
  }
592
590
 
593
591
  /* Large with Trailing Icons */
@@ -602,10 +600,10 @@ Do not edit directly, this file was auto-generated.
602
600
  * the size of the trailing icon (clear),
603
601
  * and the gap between the icon and the input.
604
602
  */
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)));
603
+ -webkit-padding-start: var(--token-space-500, var(--token-scale-500, 20px));
604
+ padding-inline-start: var(--token-space-500, var(--token-scale-500, 20px));
605
+ -webkit-padding-end: calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
606
+ padding-inline-end: calc(var(--token-space-500, var(--token-scale-500, 20px)) + var(--token-scale-400, 16px) + var(--token-space-200, var(--token-scale-200, 8px)));
609
607
  }
610
608
 
611
609
  :host(.in-toolbar.searchbar-size-large.searchbar-should-show-cancel) .searchbar-input {
@@ -615,14 +613,14 @@ Do not edit directly, this file was auto-generated.
615
613
  * the size of the leading icon (search or cancel),
616
614
  * and the gap between the icon and the input.
617
615
  */
618
- padding-inline-start: var(--ion-space-900, var(--ion-scale-900, 36px));
616
+ padding-inline-start: var(--token-space-900, var(--token-scale-900, 36px));
619
617
  }
620
618
 
621
619
  :host(.searchbar-size-large) .searchbar-search-icon,
622
620
  :host(.searchbar-size-large) .searchbar-cancel-button {
623
- inset-inline-start: var(--ion-space-500, var(--ion-scale-500, 20px));
621
+ inset-inline-start: var(--token-space-500, var(--token-scale-500, 20px));
624
622
  }
625
623
 
626
624
  :host(.searchbar-size-large) .searchbar-clear-button {
627
- inset-inline-end: var(--ion-space-500, var(--ion-scale-500, 20px));
625
+ inset-inline-end: var(--token-space-500, var(--token-scale-500, 20px));
628
626
  }
package/dist/collection/components/segment/segment.ionic.css CHANGED
@@ -4,9 +4,7 @@
4
4
  * @param pixels - Value in pixels to be converted (i.e. px)
5
5
  * @param context (optional) - Baseline value
6
6
  */
7
- /*
8
- Do not edit directly, this file was auto-generated.
9
- */ /**
7
+ /**
10
8
  * A heuristic that applies CSS to tablet
11
9
  * viewports.
12
10
  *
@@ -113,5 +111,5 @@ Do not edit directly, this file was auto-generated.
113
111
  }
114
112
 
115
113
  :host {
116
- --background: var(--ion-primitives-base-white, #ffffff);
114
+ --background: var(--token-primitives-base-white, #ffffff);
117
115
  }
package/dist/collection/components/segment-button/segment-button.ionic.css CHANGED
@@ -4,9 +4,7 @@
4
4
  * @param pixels - Value in pixels to be converted (i.e. px)
5
5
  * @param context (optional) - Baseline value
6
6
  */
7
- /*
8
- Do not edit directly, this file was auto-generated.
9
- */ /**
7
+ /**
10
8
  * A heuristic that applies CSS to tablet
11
9
  * viewports.
12
10
  *
@@ -268,24 +266,24 @@ Do not edit directly, this file was auto-generated.
268
266
  */
269
267
  --background: none;
270
268
  --background-checked: var(--background);
271
- --color: var(--ion-primitives-neutral-1000, #3b3b3b);
272
- --color-checked: var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)));
273
- --color-disabled: var(--ion-primitives-neutral-500, #a2a2a2);
274
- --border-width: var(--ion-border-size-025, var(--ion-scale-025, 1px));
275
- --border-color: var(--ion-primitives-neutral-300, #e0e0e0);
276
- --border-style: var(--ion-border-style-solid, solid);
269
+ --color: var(--token-primitives-neutral-1000, #3b3b3b);
270
+ --color-checked: var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)));
271
+ --color-disabled: var(--token-primitives-neutral-500, #a2a2a2);
272
+ --border-width: var(--token-border-size-025, var(--token-scale-025, 1px));
273
+ --border-color: var(--token-primitives-neutral-300, #e0e0e0);
274
+ --border-style: var(--token-border-style-solid, solid);
277
275
  --indicator-box-shadow: none;
278
276
  --indicator-color: var(--color-checked);
279
- --indicator-height: var(--ion-border-size-025, var(--ion-scale-025, 1px));
277
+ --indicator-height: var(--token-border-size-025, var(--token-scale-025, 1px));
280
278
  --indicator-transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
281
279
  --indicator-transform: none;
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));
280
+ --padding-top: var(--token-space-200, var(--token-scale-200, 8px));
281
+ --padding-end: var(--token-space-200, var(--token-scale-200, 8px));
282
+ --padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
283
+ --padding-start: var(--token-space-200, var(--token-scale-200, 8px));
286
284
  --transition: color 0.15s linear 0s, opacity 0.15s linear 0s;
287
- min-width: var(--ion-scale-1200, 48px);
288
- min-height: var(--ion-scale-1200, 48px);
285
+ min-width: var(--token-scale-1200, 48px);
286
+ min-height: var(--token-scale-1200, 48px);
289
287
  }
290
288
 
291
289
  .button-native {
@@ -294,24 +292,24 @@ Do not edit directly, this file was auto-generated.
294
292
  }
295
293
 
296
294
  .button-inner {
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));
295
+ padding-top: var(--token-space-100, var(--token-scale-100, 4px));
296
+ padding-bottom: var(--token-space-100, var(--token-scale-100, 4px));
297
+ gap: var(--token-space-100, var(--token-scale-100, 4px));
300
298
  }
301
299
 
302
300
  ::slotted(ion-label) {
303
- font-size: var(--ion-font-size-350, 0.875rem);
304
- font-weight: var(--ion-font-weight-medium, 500);
305
- letter-spacing: var(--ion-font-letter-spacing-1, 1%);
306
- line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
301
+ font-size: var(--token-font-size-350, 0.875rem);
302
+ font-weight: var(--token-font-weight-medium, 500);
303
+ letter-spacing: var(--token-font-letter-spacing-1, 1%);
304
+ line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
307
305
  text-decoration: none;
308
306
  text-transform: none;
309
307
  color: var(--color);
310
308
  }
311
309
 
312
310
  ::slotted(ion-icon) {
313
- width: var(--ion-scale-600, 24px);
314
- height: var(--ion-scale-600, 24px);
311
+ width: var(--token-scale-600, 24px);
312
+ height: var(--token-scale-600, 24px);
315
313
  color: var(--color);
316
314
  }
317
315
 
@@ -326,8 +324,8 @@ Do not edit directly, this file was auto-generated.
326
324
  }
327
325
 
328
326
  :host(.ion-focused) .button-inner {
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));
327
+ outline-offset: var(--token-border-size-050, var(--token-scale-050, 2px));
328
+ outline: var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
331
329
  }
332
330
 
333
331
  .segment-button-indicator {
@@ -339,17 +337,17 @@ Do not edit directly, this file was auto-generated.
339
337
 
340
338
  :host(.segment-button-layout-icon-top),
341
339
  :host(.segment-button-layout-icon-bottom) {
342
- height: var(--ion-scale-1800, 72px);
340
+ height: var(--token-scale-1800, 72px);
343
341
  }
344
342
 
345
343
  :host(.segment-button-has-label-only),
346
344
  :host(.segment-button-has-icon-only),
347
345
  :host(.segment-button-layout-icon-start),
348
346
  :host(.segment-button-layout-icon-end) {
349
- height: var(--ion-scale-1200, 48px);
347
+ height: var(--token-scale-1200, 48px);
350
348
  }
351
349
 
352
350
  :host(.segment-button-layout-icon-start) .button-inner,
353
351
  :host(.segment-button-layout-icon-end) .button-inner {
354
- gap: var(--ion-space-200, var(--ion-scale-200, 8px));
352
+ gap: var(--token-space-200, var(--token-scale-200, 8px));
355
353
  }