@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/datetime/datetime.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
  *
@@ -458,52 +460,52 @@
458
460
  * @prop --focus-ring-color: The color of the ring around the focused element.
459
461
  * @prop --focus-ring-width: The width of the ring around the focused element.
460
462
  */
461
- --background: var(--token-primitives-base-white, #ffffff);
462
- --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
463
- --focus-ring-width: var(--token-border-radius-025, var(--token-scale-050, 2px));
463
+ --background: var(--ion-primitives-base-white, #ffffff);
464
+ --focus-ring-color: var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));
465
+ --focus-ring-width: var(--ion-border-radius-025, var(--ion-scale-050, 2px));
464
466
  }
465
467
 
466
468
  :host .datetime-header {
467
- -webkit-padding-start: var(--token-space-400, var(--token-scale-400, 16px));
468
- padding-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
469
- -webkit-padding-end: var(--token-space-400, var(--token-scale-400, 16px));
470
- padding-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
471
- padding-top: var(--token-space-200, var(--token-scale-200, 8px));
472
- padding-bottom: var(--token-space-400, var(--token-scale-400, 16px));
469
+ -webkit-padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
470
+ padding-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
471
+ -webkit-padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
472
+ padding-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
473
+ padding-top: var(--ion-space-200, var(--ion-scale-200, 8px));
474
+ padding-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
473
475
  display: flex;
474
476
  flex-direction: column;
475
477
  align-items: start;
476
478
  justify-content: space-between;
477
- height: var(--token-scale-1400, 56px);
478
- margin-bottom: var(--token-space-200, var(--token-scale-200, 8px));
479
- border-bottom: var(--token-border-style-solid, solid) var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d5d5d5);
479
+ height: var(--ion-scale-1400, 56px);
480
+ margin-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
481
+ border-bottom: var(--ion-border-style-solid, solid) var(--ion-border-size-025, var(--ion-scale-025, 1px)) var(--ion-primitives-neutral-400, #d5d5d5);
480
482
  }
481
483
 
482
484
  :host .datetime-header .datetime-title {
483
- font-size: var(--token-font-size-450, 1.125rem);
484
- font-weight: var(--token-font-weight-medium, 500);
485
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
486
- line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
485
+ font-size: var(--ion-font-size-450, 1.125rem);
486
+ font-weight: var(--ion-font-weight-medium, 500);
487
+ letter-spacing: var(--ion-font-letter-spacing-0, 0%);
488
+ line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
487
489
  text-decoration: none;
488
490
  text-transform: none;
489
- color: var(--token-primitives-neutral-800, #626262);
491
+ color: var(--ion-primitives-neutral-800, #626262);
490
492
  }
491
493
 
492
494
  :host .datetime-header .datetime-selected-date {
493
- font-size: var(--token-font-size-350, 0.875rem);
494
- font-weight: var(--token-font-weight-regular, 400);
495
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
496
- line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
495
+ font-size: var(--ion-font-size-350, 0.875rem);
496
+ font-weight: var(--ion-font-weight-regular, 400);
497
+ letter-spacing: var(--ion-font-letter-spacing-0, 0%);
498
+ line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
497
499
  text-decoration: none;
498
500
  text-transform: none;
499
- color: var(--token-primitives-neutral-1000, #3b3b3b);
501
+ color: var(--ion-primitives-neutral-1000, #3b3b3b);
500
502
  }
501
503
 
502
504
  .calendar-action-buttons {
503
- padding-top: var(--token-space-200, var(--token-scale-200, 8px));
504
- padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
505
+ padding-top: var(--ion-space-200, var(--ion-scale-200, 8px));
506
+ padding-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
505
507
  align-items: center;
506
- height: var(--token-scale-1400, 56px);
508
+ height: var(--ion-scale-1400, 56px);
507
509
  box-sizing: border-box;
508
510
  }
509
511
 
@@ -512,28 +514,28 @@
512
514
  }
513
515
 
514
516
  .calendar-month-year-toggle {
515
- border-radius: var(--token-border-radius-full, 999px);
516
- font-size: var(--token-font-size-400, 1rem);
517
- font-weight: var(--token-font-weight-medium, 500);
518
- letter-spacing: var(--token-font-letter-spacing-1, 1%);
519
- line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
517
+ border-radius: var(--ion-border-radius-full, 999px);
518
+ font-size: var(--ion-font-size-400, 1rem);
519
+ font-weight: var(--ion-font-weight-medium, 500);
520
+ letter-spacing: var(--ion-font-letter-spacing-1, 1%);
521
+ line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
520
522
  text-decoration: none;
521
523
  text-transform: none;
522
- -webkit-padding-start: var(--token-space-400, var(--token-scale-400, 16px));
523
- padding-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
524
- -webkit-padding-end: var(--token-space-400, var(--token-scale-400, 16px));
525
- padding-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
526
- padding-top: var(--token-space-200, var(--token-scale-200, 8px));
527
- padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
528
- min-width: var(--token-scale-1600, 64px);
529
- min-height: var(--token-scale-1000, 40px);
530
- border: var(--focus-ring-width) var(--token-border-style-solid, solid) transparent;
531
- color: var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)));
524
+ -webkit-padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
525
+ padding-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
526
+ -webkit-padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
527
+ padding-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
528
+ padding-top: var(--ion-space-200, var(--ion-scale-200, 8px));
529
+ padding-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
530
+ min-width: var(--ion-scale-1600, 64px);
531
+ min-height: var(--ion-scale-1000, 40px);
532
+ border: var(--focus-ring-width) var(--ion-border-style-solid, solid) transparent;
533
+ color: var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)));
532
534
  }
533
535
 
534
536
  @media (any-hover: hover) {
535
537
  .calendar-month-year-toggle:hover {
536
- background: var(--token-primitives-neutral-200, #efefef);
538
+ background: var(--ion-primitives-neutral-200, #efefef);
537
539
  }
538
540
  }
539
541
  .calendar-month-year-toggle.ion-focused {
@@ -541,141 +543,141 @@
541
543
  }
542
544
 
543
545
  .calendar-month-year-toggle.ion-activated {
544
- background: var(--token-primitives-neutral-200, #efefef);
546
+ background: var(--ion-primitives-neutral-200, #efefef);
545
547
  }
546
548
 
547
549
  .calendar-next-prev ion-button.button-has-icon-only {
548
- --color: var(--token-primitives-neutral-1000, #3b3b3b);
549
- --background-activated: var(--token-primitives-neutral-200, #efefef);
550
- --background-hover: var(--token-primitives-neutral-200, #efefef);
550
+ --color: var(--ion-primitives-neutral-1000, #3b3b3b);
551
+ --background-activated: var(--ion-primitives-neutral-200, #efefef);
552
+ --background-hover: var(--ion-primitives-neutral-200, #efefef);
551
553
  --background-hover-opacity: 1;
552
- min-height: var(--token-scale-1000, 40px);
554
+ min-height: var(--ion-scale-1000, 40px);
553
555
  }
554
556
 
555
557
  .calendar-next-prev ion-button.button-has-icon-only.ion-focused::part(native) {
556
- border: 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));
558
+ border: 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));
557
559
  outline: none;
558
560
  }
559
561
 
560
562
  .calendar-days-of-week {
561
- font-size: var(--token-font-size-300, 0.75rem);
562
- font-weight: var(--token-font-weight-medium, 500);
563
- letter-spacing: var(--token-font-letter-spacing-2, 1.5%);
564
- line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
563
+ font-size: var(--ion-font-size-300, 0.75rem);
564
+ font-weight: var(--ion-font-weight-medium, 500);
565
+ letter-spacing: var(--ion-font-letter-spacing-2, 1.5%);
566
+ line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
565
567
  text-decoration: none;
566
568
  text-transform: uppercase;
567
569
  align-content: center;
568
- height: var(--token-scale-1200, 48px);
569
- color: var(--token-primitives-neutral-800, #626262);
570
+ height: var(--ion-scale-1200, 48px);
571
+ color: var(--ion-primitives-neutral-800, #626262);
570
572
  }
571
573
 
572
574
  .calendar-day {
573
- border-radius: var(--token-border-radius-full, 999px);
574
- -webkit-padding-start: var(--token-space-100, var(--token-scale-100, 4px));
575
- padding-inline-start: var(--token-space-100, var(--token-scale-100, 4px));
576
- -webkit-padding-end: var(--token-space-100, var(--token-scale-100, 4px));
577
- padding-inline-end: var(--token-space-100, var(--token-scale-100, 4px));
578
- padding-top: var(--token-space-100, var(--token-scale-100, 4px));
579
- padding-bottom: var(--token-space-100, var(--token-scale-100, 4px));
580
- font-size: var(--token-font-size-350, 0.875rem);
581
- font-weight: var(--token-font-weight-medium, 500);
582
- letter-spacing: var(--token-font-letter-spacing-1, 1%);
583
- line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
575
+ border-radius: var(--ion-border-radius-full, 999px);
576
+ -webkit-padding-start: var(--ion-space-100, var(--ion-scale-100, 4px));
577
+ padding-inline-start: var(--ion-space-100, var(--ion-scale-100, 4px));
578
+ -webkit-padding-end: var(--ion-space-100, var(--ion-scale-100, 4px));
579
+ padding-inline-end: var(--ion-space-100, var(--ion-scale-100, 4px));
580
+ padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
581
+ padding-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
582
+ font-size: var(--ion-font-size-350, 0.875rem);
583
+ font-weight: var(--ion-font-weight-medium, 500);
584
+ letter-spacing: var(--ion-font-letter-spacing-1, 1%);
585
+ line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
584
586
  text-decoration: none;
585
587
  text-transform: none;
586
- width: var(--token-scale-1200, 48px);
587
- min-width: var(--token-scale-1200, 48px);
588
- height: var(--token-scale-1200, 48px);
589
- color: var(--token-primitives-neutral-1200, #242424);
588
+ width: var(--ion-scale-1200, 48px);
589
+ min-width: var(--ion-scale-1200, 48px);
590
+ height: var(--ion-scale-1200, 48px);
591
+ color: var(--ion-primitives-neutral-1200, #242424);
590
592
  }
591
593
 
592
594
  .calendar-day[disabled]:not(.calendar-day-constrained) {
593
- color: var(--token-primitives-neutral-500, #a2a2a2);
595
+ color: var(--ion-primitives-neutral-500, #a2a2a2);
594
596
  }
595
597
 
596
598
  .calendar-day.calendar-day-today {
597
- color: var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)));
599
+ color: var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)));
598
600
  }
599
601
 
600
602
  .calendar-day.calendar-day-active,
601
603
  .calendar-day.calendar-day-active.calendar-day-adjacent-day {
602
- background: var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f2f4fd));
604
+ background: var(--ion-semantics-primary-100, var(--ion-primitives-blue-100, #f2f4fd));
603
605
  }
604
606
 
605
607
  .calendar-day:focus-visible {
606
- border: var(--focus-ring-width) var(--token-border-style-solid, solid) var(--focus-ring-color);
608
+ border: var(--focus-ring-width) var(--ion-border-style-solid, solid) var(--focus-ring-color);
607
609
  }
608
610
 
609
611
  @media (any-hover: hover) {
610
612
  .calendar-day:not([disabled]):not(:active):hover {
611
- background: var(--token-semantics-primary-200, var(--token-primitives-blue-200, #e9ecfc));
613
+ background: var(--ion-semantics-primary-200, var(--ion-primitives-blue-200, #e9ecfc));
612
614
  }
613
615
  }
614
616
  .calendar-day:active,
615
617
  .calendar-day.calendar-day-adjacent-day:active {
616
- background: var(--token-bg-primary-subtle-press, var(--token-semantics-primary-300, var(--token-primitives-blue-300, #d0d7fa)));
618
+ background: var(--ion-bg-primary-subtle-press, var(--ion-semantics-primary-300, var(--ion-primitives-blue-300, #d0d7fa)));
617
619
  }
618
620
 
619
621
  .calendar-day.calendar-day-adjacent-day {
620
- color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
622
+ color: var(--ion-text-subtlest, var(--ion-primitives-neutral-800, #626262));
621
623
  }
622
624
 
623
625
  .calendar-day.calendar-day-active.calendar-day-adjacent-day {
624
- color: var(--token-text-default, var(--token-primitives-neutral-1200, #242424));
626
+ color: var(--ion-text-default, var(--ion-primitives-neutral-1200, #242424));
625
627
  }
626
628
 
627
629
  :host .datetime-time {
628
- -webkit-padding-start: var(--token-space-400, var(--token-scale-400, 16px));
629
- padding-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
630
- -webkit-padding-end: var(--token-space-400, var(--token-scale-400, 16px));
631
- padding-inline-end: var(--token-space-400, var(--token-scale-400, 16px));
632
- padding-top: var(--token-space-100, var(--token-scale-100, 4px));
633
- padding-bottom: var(--token-space-100, var(--token-scale-100, 4px));
630
+ -webkit-padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
631
+ padding-inline-start: var(--ion-space-400, var(--ion-scale-400, 16px));
632
+ -webkit-padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
633
+ padding-inline-end: var(--ion-space-400, var(--ion-scale-400, 16px));
634
+ padding-top: var(--ion-space-100, var(--ion-scale-100, 4px));
635
+ padding-bottom: var(--ion-space-100, var(--ion-scale-100, 4px));
634
636
  }
635
637
 
636
638
  :host .datetime-time .time-header {
637
- font-size: var(--token-font-size-400, 1rem);
638
- 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));
639
+ font-size: var(--ion-font-size-400, 1rem);
640
+ font-weight: var(--ion-font-weight-medium, 500);
641
+ letter-spacing: var(--ion-font-letter-spacing-1, 1%);
642
+ line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
641
643
  text-decoration: none;
642
644
  text-transform: none;
643
- color: var(--token-primitives-neutral-800, #626262);
645
+ color: var(--ion-primitives-neutral-800, #626262);
644
646
  }
645
647
 
646
648
  :host .datetime-time button {
647
- -webkit-padding-start: var(--token-space-200, var(--token-scale-200, 8px));
648
- padding-inline-start: var(--token-space-200, var(--token-scale-200, 8px));
649
- -webkit-padding-end: var(--token-space-200, var(--token-scale-200, 8px));
650
- padding-inline-end: var(--token-space-200, var(--token-scale-200, 8px));
651
- padding-top: var(--token-space-0, var(--token-scale-0, 0px));
652
- padding-bottom: var(--token-space-0, var(--token-scale-0, 0px));
653
- font-size: var(--token-font-size-350, 0.875rem);
654
- font-weight: var(--token-font-weight-medium, 500);
655
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
656
- line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
649
+ -webkit-padding-start: var(--ion-space-200, var(--ion-scale-200, 8px));
650
+ padding-inline-start: var(--ion-space-200, var(--ion-scale-200, 8px));
651
+ -webkit-padding-end: var(--ion-space-200, var(--ion-scale-200, 8px));
652
+ padding-inline-end: var(--ion-space-200, var(--ion-scale-200, 8px));
653
+ padding-top: var(--ion-space-0, var(--ion-scale-0, 0px));
654
+ padding-bottom: var(--ion-space-0, var(--ion-scale-0, 0px));
655
+ font-size: var(--ion-font-size-350, 0.875rem);
656
+ font-weight: var(--ion-font-weight-medium, 500);
657
+ letter-spacing: var(--ion-font-letter-spacing-0, 0%);
658
+ line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
657
659
  text-decoration: none;
658
660
  text-transform: none;
659
- border-radius: var(--token-border-radius-full, 999px);
661
+ border-radius: var(--ion-border-radius-full, 999px);
660
662
  display: flex;
661
663
  align-items: center;
662
- height: var(--token-scale-800, 32px);
663
- background-color: var(--token-primitives-neutral-100, #f5f5f5);
664
- color: var(--token-primitives-neutral-1200, #242424);
664
+ height: var(--ion-scale-800, 32px);
665
+ background-color: var(--ion-primitives-neutral-100, #f5f5f5);
666
+ color: var(--ion-primitives-neutral-1200, #242424);
665
667
  }
666
668
 
667
669
  :host .datetime-footer {
668
670
  padding-left: 0;
669
671
  padding-right: 0;
670
- padding-top: var(--token-space-200, var(--token-scale-200, 8px));
672
+ padding-top: var(--ion-space-200, var(--ion-scale-200, 8px));
671
673
  padding-bottom: 0;
672
674
  margin-left: 0;
673
675
  margin-right: 0;
674
- margin-top: var(--token-space-200, var(--token-scale-200, 8px));
676
+ margin-top: var(--ion-space-200, var(--ion-scale-200, 8px));
675
677
  margin-bottom: 0;
676
678
  border-left: 0;
677
679
  border-right: 0;
678
- border-top: var(--token-border-style-solid, solid) var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-primitives-neutral-400, #d5d5d5);
680
+ border-top: var(--ion-border-style-solid, solid) var(--ion-border-size-025, var(--ion-scale-025, 1px)) var(--ion-primitives-neutral-400, #d5d5d5);
679
681
  border-bottom: 0;
680
682
  }
681
683
 
@@ -683,15 +685,15 @@
683
685
  .datetime-action-buttons .datetime-action-buttons-container {
684
686
  flex-flow: column;
685
687
  align-items: stretch;
686
- gap: var(--token-space-200, var(--token-scale-200, 8px));
688
+ gap: var(--ion-space-200, var(--ion-scale-200, 8px));
687
689
  }
688
690
 
689
691
  :host .datetime-buttons ion-buttons ion-button {
690
- font-size: var(--token-font-size-400, 1rem);
691
- font-weight: var(--token-font-weight-medium, 500);
692
- letter-spacing: var(--token-font-letter-spacing-1, 1%);
693
- line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
692
+ font-size: var(--ion-font-size-400, 1rem);
693
+ font-weight: var(--ion-font-weight-medium, 500);
694
+ letter-spacing: var(--ion-font-letter-spacing-1, 1%);
695
+ line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
694
696
  text-decoration: none;
695
697
  text-transform: none;
696
- min-height: var(--token-space-1200, var(--token-scale-1200, 48px));
698
+ min-height: var(--ion-space-1200, var(--ion-scale-1200, 48px));
697
699
  }
package/dist/collection/components/divider/divider.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
  *
@@ -109,40 +111,40 @@
109
111
  }
110
112
 
111
113
  :host hr {
112
- border-top: var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-border-default, var(--token-primitives-neutral-400, #d5d5d5));
114
+ border-top: var(--ion-border-size-025, var(--ion-scale-025, 1px)) var(--ion-border-style-solid, solid) var(--ion-border-default, var(--ion-primitives-neutral-400, #d5d5d5));
113
115
  }
114
116
 
115
117
  :host(.divider-inset) {
116
- --padding-start: var(--token-space-400, var(--token-scale-400, 16px));
117
- --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
118
+ --padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
119
+ --padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
118
120
  }
119
121
 
120
122
  :host(.divider-spacing-xsmall) {
121
- --margin-top: var(--token-space-200, var(--token-scale-200, 8px));
122
- --margin-bottom: var(--token-space-200, var(--token-scale-200, 8px));
123
+ --margin-top: var(--ion-space-200, var(--ion-scale-200, 8px));
124
+ --margin-bottom: var(--ion-space-200, var(--ion-scale-200, 8px));
123
125
  }
124
126
 
125
127
  :host(.divider-spacing-small) {
126
- --margin-top: var(--token-space-300, var(--token-scale-300, 12px));
127
- --margin-bottom: var(--token-space-300, var(--token-scale-300, 12px));
128
+ --margin-top: var(--ion-space-300, var(--ion-scale-300, 12px));
129
+ --margin-bottom: var(--ion-space-300, var(--ion-scale-300, 12px));
128
130
  }
129
131
 
130
132
  :host(.divider-spacing-medium) {
131
- --margin-top: var(--token-space-400, var(--token-scale-400, 16px));
132
- --margin-bottom: var(--token-space-400, var(--token-scale-400, 16px));
133
+ --margin-top: var(--ion-space-400, var(--ion-scale-400, 16px));
134
+ --margin-bottom: var(--ion-space-400, var(--ion-scale-400, 16px));
133
135
  }
134
136
 
135
137
  :host(.divider-spacing-large) {
136
- --margin-top: var(--token-space-600, var(--token-scale-600, 24px));
137
- --margin-bottom: var(--token-space-600, var(--token-scale-600, 24px));
138
+ --margin-top: var(--ion-space-600, var(--ion-scale-600, 24px));
139
+ --margin-bottom: var(--ion-space-600, var(--ion-scale-600, 24px));
138
140
  }
139
141
 
140
142
  :host(.divider-spacing-xlarge) {
141
- --margin-top: var(--token-space-800, var(--token-scale-800, 32px));
142
- --margin-bottom: var(--token-space-800, var(--token-scale-800, 32px));
143
+ --margin-top: var(--ion-space-800, var(--ion-scale-800, 32px));
144
+ --margin-bottom: var(--ion-space-800, var(--ion-scale-800, 32px));
143
145
  }
144
146
 
145
147
  :host(.divider-spacing-xxlarge) {
146
- --margin-top: var(--token-space-1000, var(--token-scale-1000, 40px));
147
- --margin-bottom: var(--token-space-1000, var(--token-scale-1000, 40px));
148
+ --margin-top: var(--ion-space-1000, var(--ion-scale-1000, 40px));
149
+ --margin-bottom: var(--ion-space-1000, var(--ion-scale-1000, 40px));
148
150
  }
package/dist/collection/components/header/header.ionic.css CHANGED
@@ -15,7 +15,9 @@ ion-header ion-toolbar:first-of-type {
15
15
  * @param pixels - Value in pixels to be converted (i.e. px)
16
16
  * @param context (optional) - Baseline value
17
17
  */
18
- /**
18
+ /*
19
+ Do not edit directly, this file was auto-generated.
20
+ */ /**
19
21
  * A heuristic that applies CSS to tablet
20
22
  * viewports.
21
23
  *
@@ -71,16 +73,16 @@ ion-header ion-toolbar:first-of-type {
71
73
  * convert to a unit other than $baselineUnit.
72
74
  */
73
75
  ion-header {
74
- box-shadow: var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));
76
+ box-shadow: var(--ion-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));
75
77
  z-index: 10;
76
78
  }
77
79
  ion-header.header-divider {
78
- border-bottom: var(--token-border-size-025, var(--token-scale-025, 1px)) var(--token-border-style-solid, solid) var(--token-primitives-neutral-300, #e0e0e0);
80
+ border-bottom: var(--ion-border-size-025, var(--ion-scale-025, 1px)) var(--ion-border-style-solid, solid) var(--ion-primitives-neutral-300, #e0e0e0);
79
81
  }
80
82
 
81
83
  ion-toolbar + ion-toolbar {
82
- --padding-start: var(--token-space-400, var(--token-scale-400, 16px));
83
- --padding-end: var(--token-space-400, var(--token-scale-400, 16px));
84
+ --padding-start: var(--ion-space-400, var(--ion-scale-400, 16px));
85
+ --padding-end: var(--ion-space-400, var(--ion-scale-400, 16px));
84
86
  }
85
87
 
86
88
  @supports (backdrop-filter: blur(0)) {
@@ -90,7 +92,7 @@ ion-toolbar + ion-toolbar {
90
92
  top: 0;
91
93
  bottom: 0;
92
94
  position: absolute;
93
- backdrop-filter: saturate(180%) blur(var(--token-scale-100, 4px));
95
+ backdrop-filter: saturate(180%) blur(var(--ion-scale-100, 4px));
94
96
  }
95
97
  .header-translucent-ionic ion-toolbar {
96
98
  --opacity: 0.7;