@ionic/core 8.7.4-dev.11757083062.19f546ed → 8.7.4-dev.11757430138.13649dec

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