@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/avatar/avatar.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
  *
@@ -100,19 +102,19 @@
100
102
  }
101
103
 
102
104
  :host {
103
- --padding-top: var(--token-space-0, var(--token-scale-0, 0px));
104
- --padding-bottom: var(--token-space-0, var(--token-scale-0, 0px));
105
- font-size: var(--token-font-size-450, 1.125rem);
106
- font-weight: var(--token-font-weight-medium, 500);
107
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
108
- line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
105
+ --padding-top: var(--ion-space-0, var(--ion-scale-0, 0px));
106
+ --padding-bottom: var(--ion-space-0, var(--ion-scale-0, 0px));
107
+ font-size: var(--ion-font-size-450, 1.125rem);
108
+ font-weight: var(--ion-font-weight-medium, 500);
109
+ letter-spacing: var(--ion-font-letter-spacing-0, 0%);
110
+ line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
109
111
  text-decoration: none;
110
112
  text-transform: none;
111
113
  display: flex;
112
114
  align-items: center;
113
115
  justify-content: center;
114
- background: var(--token-bg-neutral-subtle-default, var(--token-primitives-neutral-200, #efefef));
115
- color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262));
116
+ background: var(--ion-bg-neutral-subtle-default, var(--ion-primitives-neutral-200, #efefef));
117
+ color: var(--ion-text-subtlest, var(--ion-primitives-neutral-800, #626262));
116
118
  }
117
119
 
118
120
  :host(:not(.avatar-image)) {
@@ -126,125 +128,125 @@
126
128
 
127
129
  /* 2-Extra Small */
128
130
  :host(.avatar-xxsmall) {
129
- --padding-end: var(--token-space-050, var(--token-scale-050, 2px));
130
- --padding-start: var(--token-space-050, var(--token-scale-050, 2px));
131
- font-size: var(--token-font-size-300, 0.75rem);
132
- font-weight: var(--token-font-weight-medium, 500);
133
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
134
- line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
131
+ --padding-end: var(--ion-space-050, var(--ion-scale-050, 2px));
132
+ --padding-start: var(--ion-space-050, var(--ion-scale-050, 2px));
133
+ font-size: var(--ion-font-size-300, 0.75rem);
134
+ font-weight: var(--ion-font-weight-medium, 500);
135
+ letter-spacing: var(--ion-font-letter-spacing-0, 0%);
136
+ line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
135
137
  text-decoration: none;
136
138
  text-transform: none;
137
- width: var(--token-scale-400, 16px);
138
- height: var(--token-scale-400, 16px);
139
+ width: var(--ion-scale-400, 16px);
140
+ height: var(--ion-scale-400, 16px);
139
141
  }
140
142
 
141
143
  /* Extra Small */
142
144
  :host(.avatar-xsmall) {
143
- --padding-end: var(--token-space-050, var(--token-scale-050, 2px));
144
- --padding-start: var(--token-space-050, var(--token-scale-050, 2px));
145
- font-size: var(--token-font-size-300, 0.75rem);
146
- font-weight: var(--token-font-weight-medium, 500);
147
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
148
- line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
145
+ --padding-end: var(--ion-space-050, var(--ion-scale-050, 2px));
146
+ --padding-start: var(--ion-space-050, var(--ion-scale-050, 2px));
147
+ font-size: var(--ion-font-size-300, 0.75rem);
148
+ font-weight: var(--ion-font-weight-medium, 500);
149
+ letter-spacing: var(--ion-font-letter-spacing-0, 0%);
150
+ line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
149
151
  text-decoration: none;
150
152
  text-transform: none;
151
- width: var(--token-scale-600, 24px);
152
- height: var(--token-scale-600, 24px);
153
+ width: var(--ion-scale-600, 24px);
154
+ height: var(--ion-scale-600, 24px);
153
155
  }
154
156
 
155
157
  /* Small */
156
158
  :host(.avatar-small) {
157
- --padding-end: var(--token-space-150, var(--token-scale-150, 6px));
158
- --padding-start: var(--token-space-150, var(--token-scale-150, 6px));
159
- font-size: var(--token-font-size-400, 1rem);
160
- font-weight: var(--token-font-weight-medium, 500);
161
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
162
- line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
159
+ --padding-end: var(--ion-space-150, var(--ion-scale-150, 6px));
160
+ --padding-start: var(--ion-space-150, var(--ion-scale-150, 6px));
161
+ font-size: var(--ion-font-size-400, 1rem);
162
+ font-weight: var(--ion-font-weight-medium, 500);
163
+ letter-spacing: var(--ion-font-letter-spacing-0, 0%);
164
+ line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
163
165
  text-decoration: none;
164
166
  text-transform: none;
165
- width: var(--token-scale-800, 32px);
166
- height: var(--token-scale-800, 32px);
167
+ width: var(--ion-scale-800, 32px);
168
+ height: var(--ion-scale-800, 32px);
167
169
  }
168
170
 
169
171
  /* Medium */
170
172
  :host(.avatar-medium) {
171
- --padding-end: var(--token-space-200, var(--token-scale-200, 8px));
172
- --padding-start: var(--token-space-200, var(--token-scale-200, 8px));
173
- width: var(--token-scale-1000, 40px);
174
- height: var(--token-scale-1000, 40px);
173
+ --padding-end: var(--ion-space-200, var(--ion-scale-200, 8px));
174
+ --padding-start: var(--ion-space-200, var(--ion-scale-200, 8px));
175
+ width: var(--ion-scale-1000, 40px);
176
+ height: var(--ion-scale-1000, 40px);
175
177
  }
176
178
 
177
179
  /* Large */
178
180
  :host(.avatar-large) {
179
- --padding-end: var(--token-space-250, var(--token-scale-250, 10px));
180
- --padding-start: var(--token-space-250, var(--token-scale-250, 10px));
181
- font-size: var(--token-font-size-500, 1.25rem);
182
- font-weight: var(--token-font-weight-medium, 500);
183
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
184
- line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
181
+ --padding-end: var(--ion-space-250, var(--ion-scale-250, 10px));
182
+ --padding-start: var(--ion-space-250, var(--ion-scale-250, 10px));
183
+ font-size: var(--ion-font-size-500, 1.25rem);
184
+ font-weight: var(--ion-font-weight-medium, 500);
185
+ letter-spacing: var(--ion-font-letter-spacing-0, 0%);
186
+ line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
185
187
  text-decoration: none;
186
188
  text-transform: none;
187
- width: var(--token-scale-1200, 48px);
188
- height: var(--token-scale-1200, 48px);
189
+ width: var(--ion-scale-1200, 48px);
190
+ height: var(--ion-scale-1200, 48px);
189
191
  }
190
192
 
191
193
  /* Extra Large */
192
194
  :host(.avatar-xlarge) {
193
- --padding-end: var(--token-space-300, var(--token-scale-300, 12px));
194
- --padding-start: var(--token-space-300, var(--token-scale-300, 12px));
195
- font-size: var(--token-font-size-550, 1.375rem);
196
- font-weight: var(--token-font-weight-medium, 500);
197
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
198
- line-height: var(--token-font-line-height-700, var(--token-scale-700, 28px));
195
+ --padding-end: var(--ion-space-300, var(--ion-scale-300, 12px));
196
+ --padding-start: var(--ion-space-300, var(--ion-scale-300, 12px));
197
+ font-size: var(--ion-font-size-550, 1.375rem);
198
+ font-weight: var(--ion-font-weight-medium, 500);
199
+ letter-spacing: var(--ion-font-letter-spacing-0, 0%);
200
+ line-height: var(--ion-font-line-height-700, var(--ion-scale-700, 28px));
199
201
  text-decoration: none;
200
202
  text-transform: none;
201
- width: var(--token-scale-1400, 56px);
202
- height: var(--token-scale-1400, 56px);
203
+ width: var(--ion-scale-1400, 56px);
204
+ height: var(--ion-scale-1400, 56px);
203
205
  }
204
206
 
205
207
  :host(.avatar-xxsmall.avatar-soft),
206
208
  :host(.avatar-xsmall.avatar-soft),
207
209
  :host(.avatar-small.avatar-soft) {
208
- --border-radius: var(--token-soft-2xs, var(--token-border-radius-100, var(--token-scale-100, 4px)));
210
+ --border-radius: var(--ion-soft-2xs, var(--ion-border-radius-100, var(--ion-scale-100, 4px)));
209
211
  }
210
212
 
211
213
  :host(.avatar-medium.avatar-soft) {
212
- --border-radius: var(--token-soft-xs, var(--token-border-radius-200, var(--token-scale-200, 8px)));
214
+ --border-radius: var(--ion-soft-xs, var(--ion-border-radius-200, var(--ion-scale-200, 8px)));
213
215
  }
214
216
 
215
217
  :host(.avatar-large.avatar-soft),
216
218
  :host(.avatar-xlarge.avatar-soft) {
217
- --border-radius: var(--token-soft-md, var(--token-border-radius-400, var(--token-scale-400, 16px)));
219
+ --border-radius: var(--ion-soft-md, var(--ion-border-radius-400, var(--ion-scale-400, 16px)));
218
220
  }
219
221
 
220
222
  :host(.avatar-xxsmall.avatar-round),
221
223
  :host(.avatar-xsmall.avatar-round),
222
224
  :host(.avatar-small.avatar-round) {
223
- --border-radius: var(--token-round-2xs, var(--token-border-radius-full, 999px));
225
+ --border-radius: var(--ion-round-2xs, var(--ion-border-radius-full, 999px));
224
226
  }
225
227
 
226
228
  :host(.avatar-medium.avatar-round) {
227
- --border-radius: var(--token-round-xs, var(--token-border-radius-full, 999px));
229
+ --border-radius: var(--ion-round-xs, var(--ion-border-radius-full, 999px));
228
230
  }
229
231
 
230
232
  :host(.avatar-large.avatar-round),
231
233
  :host(.avatar-xlarge.avatar-round) {
232
- --border-radius: var(--token-round-md, var(--token-border-radius-full, 999px));
234
+ --border-radius: var(--ion-round-md, var(--ion-border-radius-full, 999px));
233
235
  }
234
236
 
235
237
  :host(.avatar-xxsmall.avatar-rectangular),
236
238
  :host(.avatar-xsmall.avatar-rectangular),
237
239
  :host(.avatar-small.avatar-rectangular) {
238
- --border-radius: var(--token-rectangular-2xs, var(--token-border-radius-0, var(--token-scale-0, 0px)));
240
+ --border-radius: var(--ion-rectangular-2xs, var(--ion-border-radius-0, var(--ion-scale-0, 0px)));
239
241
  }
240
242
 
241
243
  :host(.avatar-medium.avatar-rectangular) {
242
- --border-radius: var(--token-rectangular-xs, var(--token-border-radius-0, var(--token-scale-0, 0px)));
244
+ --border-radius: var(--ion-rectangular-xs, var(--ion-border-radius-0, var(--ion-scale-0, 0px)));
243
245
  }
244
246
 
245
247
  :host(.avatar-large.avatar-rectangular),
246
248
  :host(.avatar-xlarge.avatar-rectangular) {
247
- --border-radius: var(--token-rectangular-md, var(--token-border-radius-0, var(--token-scale-0, 0px)));
249
+ --border-radius: var(--ion-rectangular-md, var(--ion-border-radius-0, var(--ion-scale-0, 0px)));
248
250
  }
249
251
 
250
252
  :host(.avatar-icon) {
@@ -255,49 +257,49 @@
255
257
  }
256
258
 
257
259
  :host(.avatar-xxsmall) ::slotted(ion-icon) {
258
- width: var(--token-scale-300, 12px);
259
- height: var(--token-scale-300, 12px);
260
+ width: var(--ion-scale-300, 12px);
261
+ height: var(--ion-scale-300, 12px);
260
262
  }
261
263
 
262
264
  :host(.avatar-xsmall) ::slotted(ion-icon) {
263
- width: var(--token-scale-400, 16px);
264
- height: var(--token-scale-400, 16px);
265
+ width: var(--ion-scale-400, 16px);
266
+ height: var(--ion-scale-400, 16px);
265
267
  }
266
268
 
267
269
  :host(.avatar-small) ::slotted(ion-icon) {
268
- width: var(--token-scale-500, 20px);
269
- height: var(--token-scale-500, 20px);
270
+ width: var(--ion-scale-500, 20px);
271
+ height: var(--ion-scale-500, 20px);
270
272
  }
271
273
 
272
274
  :host(.avatar-medium) ::slotted(ion-icon) {
273
- width: var(--token-scale-600, 24px);
274
- height: var(--token-scale-600, 24px);
275
+ width: var(--ion-scale-600, 24px);
276
+ height: var(--ion-scale-600, 24px);
275
277
  }
276
278
 
277
279
  :host(.avatar-large) ::slotted(ion-icon) {
278
- width: var(--token-scale-700, 28px);
279
- height: var(--token-scale-700, 28px);
280
+ width: var(--ion-scale-700, 28px);
281
+ height: var(--ion-scale-700, 28px);
280
282
  }
281
283
 
282
284
  :host(.avatar-xlarge) ::slotted(ion-icon) {
283
- width: var(--token-scale-800, 32px);
284
- height: var(--token-scale-800, 32px);
285
+ width: var(--ion-scale-800, 32px);
286
+ height: var(--ion-scale-800, 32px);
285
287
  }
286
288
 
287
289
  :host ::slotted(ion-badge.badge-vertical-top:empty) {
288
- transform: translate(var(--token-scale-050, 2px), calc(var(--token-scale-050, 2px) * -1));
290
+ transform: translate(var(--ion-scale-050, 2px), calc(var(--ion-scale-050, 2px) * -1));
289
291
  }
290
292
 
291
293
  :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:empty) {
292
- transform: translate(var(--token-scale-100, 4px), calc(var(--token-scale-100, 4px) * -1));
294
+ transform: translate(var(--ion-scale-100, 4px), calc(var(--ion-scale-100, 4px) * -1));
293
295
  }
294
296
 
295
297
  :host ::slotted(ion-badge.badge-vertical-bottom:empty) {
296
- transform: translate(0, var(--token-scale-100, 4px));
298
+ transform: translate(0, var(--ion-scale-100, 4px));
297
299
  }
298
300
 
299
301
  :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
300
- transform: translate(var(--token-scale-100, 4px), var(--token-scale-100, 4px));
302
+ transform: translate(var(--ion-scale-100, 4px), var(--ion-scale-100, 4px));
301
303
  }
302
304
 
303
305
  :host ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
@@ -305,36 +307,36 @@
305
307
  }
306
308
 
307
309
  :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
308
- bottom: var(--token-scale-100, 4px);
310
+ bottom: var(--ion-scale-100, 4px);
309
311
  transform: translate(100%, 100%);
310
312
  }
311
313
  :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
312
- inset-inline-end: var(--token-scale-100, 4px);
314
+ inset-inline-end: var(--ion-scale-100, 4px);
313
315
  }
314
316
 
315
317
  :host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
316
- bottom: calc(var(--token-scale-050, 2px) * -1);
318
+ bottom: calc(var(--ion-scale-050, 2px) * -1);
317
319
  }
318
320
  :host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
319
- inset-inline-end: calc(var(--token-scale-050, 2px) * -1);
321
+ inset-inline-end: calc(var(--ion-scale-050, 2px) * -1);
320
322
  }
321
323
 
322
324
  :host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
323
325
  :host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
324
326
  :host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
325
- bottom: var(--token-scale-050, 2px);
327
+ bottom: var(--ion-scale-050, 2px);
326
328
  }
327
329
  :host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
328
330
  :host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
329
331
  :host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
330
- inset-inline-end: var(--token-scale-050, 2px);
332
+ inset-inline-end: var(--ion-scale-050, 2px);
331
333
  }
332
334
 
333
335
  :host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
334
- bottom: var(--token-scale-150, 6px);
336
+ bottom: var(--ion-scale-150, 6px);
335
337
  }
336
338
  :host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
337
- inset-inline-end: var(--token-scale-150, 6px);
339
+ inset-inline-end: var(--ion-scale-150, 6px);
338
340
  }
339
341
 
340
342
  :host ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
@@ -342,22 +344,22 @@
342
344
  }
343
345
 
344
346
  :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
345
- top: var(--token-scale-050, 2px);
347
+ top: var(--ion-scale-050, 2px);
346
348
  }
347
349
  :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
348
350
  inset-inline-end: 0;
349
351
  }
350
352
 
351
353
  :host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
352
- top: var(--token-scale-100, 4px);
354
+ top: var(--ion-scale-100, 4px);
353
355
  }
354
356
  :host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
355
- inset-inline-end: calc(var(--token-scale-050, 2px) * -1);
357
+ inset-inline-end: calc(var(--ion-scale-050, 2px) * -1);
356
358
  }
357
359
 
358
360
  :host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)),
359
361
  :host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
360
- top: var(--token-scale-150, 6px);
362
+ top: var(--ion-scale-150, 6px);
361
363
  }
362
364
  :host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)),
363
365
  :host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
@@ -365,17 +367,17 @@
365
367
  }
366
368
 
367
369
  :host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
368
- top: var(--token-scale-150, 6px);
370
+ top: var(--ion-scale-150, 6px);
369
371
  }
370
372
  :host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
371
- inset-inline-end: var(--token-scale-050, 2px);
373
+ inset-inline-end: var(--ion-scale-050, 2px);
372
374
  }
373
375
 
374
376
  :host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
375
- top: var(--token-scale-150, 6px);
377
+ top: var(--ion-scale-150, 6px);
376
378
  }
377
379
  :host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
378
- inset-inline-end: var(--token-scale-150, 6px);
380
+ inset-inline-end: var(--ion-scale-150, 6px);
379
381
  }
380
382
 
381
383
  :host(.avatar-disabled)::before {
@@ -385,7 +387,7 @@
385
387
  top: 0;
386
388
  bottom: 0;
387
389
  position: absolute;
388
- background-color: var(--token-state-disabled, rgba(255, 255, 255, 0.6));
390
+ background-color: var(--ion-state-disabled, rgba(255, 255, 255, 0.6));
389
391
  content: "";
390
392
  pointer-events: none;
391
393
  }
package/dist/collection/components/backdrop/backdrop.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
  *
@@ -104,6 +106,6 @@
104
106
  }
105
107
 
106
108
  :host {
107
- background-color: rgba(var(--token-primitives-base-black-rgb, 17, 17, 17), 0.7);
109
+ background-color: rgba(var(--ion-primitives-base-black-rgb, 17, 17, 17), 0.7);
108
110
  z-index: 2;
109
111
  }
package/dist/collection/components/badge/badge.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
  *
@@ -124,25 +126,25 @@
124
126
  }
125
127
 
126
128
  :host {
127
- --padding-start: var(--token-space-200, var(--token-scale-200, 8px));
128
- --padding-end: var(--token-space-200, var(--token-scale-200, 8px));
129
- --padding-top: var(--token-space-0, var(--token-scale-0, 0px));
130
- --padding-bottom: var(--token-space-0, var(--token-scale-0, 0px));
131
- font-size: var(--token-font-size-300, 0.75rem);
132
- font-weight: var(--token-font-weight-medium, 500);
133
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
134
- line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
129
+ --padding-start: var(--ion-space-200, var(--ion-scale-200, 8px));
130
+ --padding-end: var(--ion-space-200, var(--ion-scale-200, 8px));
131
+ --padding-top: var(--ion-space-0, var(--ion-scale-0, 0px));
132
+ --padding-bottom: var(--ion-space-0, var(--ion-scale-0, 0px));
133
+ font-size: var(--ion-font-size-300, 0.75rem);
134
+ font-weight: var(--ion-font-weight-medium, 500);
135
+ letter-spacing: var(--ion-font-letter-spacing-0, 0%);
136
+ line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
135
137
  text-decoration: none;
136
138
  text-transform: none;
137
139
  display: inline-flex;
138
140
  align-items: center;
139
141
  justify-content: center;
140
- min-width: var(--token-scale-250, 10px);
142
+ min-width: var(--ion-scale-250, 10px);
141
143
  }
142
144
 
143
145
  :host(.badge-bold) {
144
- --background: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
145
- --color: var(--ion-color-primary-contrast, var(--token-text-inverse, var(--token-primitives-base-white, #ffffff)));
146
+ --background: var(--ion-color-primary, var(--ion-bg-primary-base-default, var(--ion-semantics-primary-base, var(--ion-semantics-primary-700, var(--ion-primitives-blue-700, #105cef)))));
147
+ --color: var(--ion-color-primary-contrast, var(--ion-text-inverse, var(--ion-primitives-base-white, #ffffff)));
146
148
  }
147
149
 
148
150
  :host(.badge-bold.ion-color) {
@@ -151,8 +153,8 @@
151
153
  }
152
154
 
153
155
  :host(.badge-subtle) {
154
- --background: var(--ion-color-primary-subtle, var(--token-bg-primary-subtle-default, var(--token-semantics-primary-100, var(--token-primitives-blue-100, #f2f4fd))));
155
- --color: var(--ion-color-primary-subtle-contrast, var(--token-text-primary, var(--token-semantics-primary-900, var(--token-primitives-blue-900, #0d4bc3))));
156
+ --background: var(--ion-color-primary-subtle, var(--ion-bg-primary-subtle-default, var(--ion-semantics-primary-100, var(--ion-primitives-blue-100, #f2f4fd))));
157
+ --color: var(--ion-color-primary-subtle-contrast, var(--ion-text-primary, var(--ion-semantics-primary-900, var(--ion-primitives-blue-900, #0d4bc3))));
156
158
  }
157
159
 
158
160
  :host(.badge-subtle.ion-color) {
@@ -162,56 +164,56 @@
162
164
 
163
165
  /* Soft Badge */
164
166
  :host(.badge-soft) {
165
- border-radius: var(--token-soft-xs, var(--token-border-radius-200, var(--token-scale-200, 8px)));
167
+ border-radius: var(--ion-soft-xs, var(--ion-border-radius-200, var(--ion-scale-200, 8px)));
166
168
  }
167
169
 
168
170
  :host(.badge-small.badge-soft) {
169
- border-radius: var(--token-soft-2xs, var(--token-border-radius-100, var(--token-scale-100, 4px)));
171
+ border-radius: var(--ion-soft-2xs, var(--ion-border-radius-100, var(--ion-scale-100, 4px)));
170
172
  }
171
173
 
172
174
  /* Round Badge */
173
175
  :host(.badge-round) {
174
- border-radius: var(--token-round-sm, var(--token-border-radius-full, 999px));
176
+ border-radius: var(--ion-round-sm, var(--ion-border-radius-full, 999px));
175
177
  }
176
178
 
177
179
  /* Rectangular Badge */
178
180
  :host(.badge-rectangular) {
179
- border-radius: var(--token-rectangular-sm, var(--token-border-radius-0, var(--token-scale-0, 0px)));
181
+ border-radius: var(--ion-rectangular-sm, var(--ion-border-radius-0, var(--ion-scale-0, 0px)));
180
182
  }
181
183
 
182
184
  /* Small Badge */
183
185
  :host(.badge-small) {
184
- --padding-start: var(--token-space-050, var(--token-scale-050, 2px));
185
- --padding-end: var(--token-space-050, var(--token-scale-050, 2px));
186
- min-width: var(--token-scale-400, 16px);
187
- height: var(--token-scale-400, 16px);
186
+ --padding-start: var(--ion-space-050, var(--ion-scale-050, 2px));
187
+ --padding-end: var(--ion-space-050, var(--ion-scale-050, 2px));
188
+ min-width: var(--ion-scale-400, 16px);
189
+ height: var(--ion-scale-400, 16px);
188
190
  }
189
191
 
190
192
  :host(.badge-small) ::slotted(ion-icon) {
191
- width: var(--token-scale-300, 12px);
192
- height: var(--token-scale-300, 12px);
193
+ width: var(--ion-scale-300, 12px);
194
+ height: var(--ion-scale-300, 12px);
193
195
  }
194
196
 
195
197
  /* Medium Badge */
196
198
  /* Large size defaults to the medium size to avoid styles breakage */
197
199
  :host(.badge-medium),
198
200
  :host(.badge-large) {
199
- --padding-start: var(--token-space-100, var(--token-scale-100, 4px));
200
- --padding-end: var(--token-space-100, var(--token-scale-100, 4px));
201
- font-size: var(--token-font-size-350, 0.875rem);
202
- font-weight: var(--token-font-weight-medium, 500);
203
- letter-spacing: var(--token-font-letter-spacing-0, 0%);
204
- line-height: var(--token-font-line-height-600, var(--token-scale-600, 24px));
201
+ --padding-start: var(--ion-space-100, var(--ion-scale-100, 4px));
202
+ --padding-end: var(--ion-space-100, var(--ion-scale-100, 4px));
203
+ font-size: var(--ion-font-size-350, 0.875rem);
204
+ font-weight: var(--ion-font-weight-medium, 500);
205
+ letter-spacing: var(--ion-font-letter-spacing-0, 0%);
206
+ line-height: var(--ion-font-line-height-600, var(--ion-scale-600, 24px));
205
207
  text-decoration: none;
206
208
  text-transform: none;
207
- min-width: var(--token-scale-600, 24px);
208
- height: var(--token-scale-600, 24px);
209
+ min-width: var(--ion-scale-600, 24px);
210
+ height: var(--ion-scale-600, 24px);
209
211
  }
210
212
 
211
213
  :host(.badge-medium) ::slotted(ion-icon),
212
214
  :host(.badge-large) ::slotted(ion-icon) {
213
- width: var(--token-scale-400, 16px);
214
- height: var(--token-scale-400, 16px);
215
+ width: var(--ion-scale-400, 16px);
216
+ height: var(--ion-scale-400, 16px);
215
217
  }
216
218
 
217
219
  :host(:empty) {
@@ -220,28 +222,28 @@
220
222
  }
221
223
 
222
224
  :host([vertical]:not(:empty)) {
223
- --padding-start: var(--token-scale-100, 4px);
224
- --padding-end: var(--token-scale-100, 4px);
225
- --padding-top: var(--token-scale-100, 4px);
226
- --padding-bottom: var(--token-scale-100, 4px);
225
+ --padding-start: var(--ion-scale-100, 4px);
226
+ --padding-end: var(--ion-scale-100, 4px);
227
+ --padding-top: var(--ion-scale-100, 4px);
228
+ --padding-bottom: var(--ion-scale-100, 4px);
227
229
  }
228
230
 
229
231
  /* sm */
230
232
  :host(.badge-small:empty) {
231
- min-width: var(--token-scale-200, 8px);
232
- height: var(--token-scale-200, 8px);
233
+ min-width: var(--ion-scale-200, 8px);
234
+ height: var(--ion-scale-200, 8px);
233
235
  }
234
236
 
235
237
  /* md */
236
238
  :host(.badge-medium:empty) {
237
- min-width: var(--token-scale-300, 12px);
238
- height: var(--token-scale-300, 12px);
239
+ min-width: var(--ion-scale-300, 12px);
240
+ height: var(--ion-scale-300, 12px);
239
241
  }
240
242
 
241
243
  /* lg */
242
244
  :host(.badge-large:empty) {
243
- min-width: var(--token-scale-400, 16px);
244
- height: var(--token-scale-400, 16px);
245
+ min-width: var(--ion-scale-400, 16px);
246
+ height: var(--ion-scale-400, 16px);
245
247
  }
246
248
 
247
249
  :host([vertical].in-tab-button) {
@@ -258,18 +260,18 @@
258
260
  }
259
261
 
260
262
  :host(:not(:empty).in-button) {
261
- --padding-start: var(--token-scale-050, 2px);
262
- --padding-end: var(--token-scale-050, 2px);
263
- font-size: var(--token-font-size-300, 0.75rem);
264
- font-weight: var(--token-font-weight-medium, 500);
265
- letter-spacing: var(--token-font-letter-spacing-1, 1%);
266
- line-height: var(--token-font-line-height-500, var(--token-scale-500, 20px));
263
+ --padding-start: var(--ion-scale-050, 2px);
264
+ --padding-end: var(--ion-scale-050, 2px);
265
+ font-size: var(--ion-font-size-300, 0.75rem);
266
+ font-weight: var(--ion-font-weight-medium, 500);
267
+ letter-spacing: var(--ion-font-letter-spacing-1, 1%);
268
+ line-height: var(--ion-font-line-height-500, var(--ion-scale-500, 20px));
267
269
  text-decoration: none;
268
270
  text-transform: none;
269
- min-width: var(--token-scale-400, 16px);
270
- height: var(--token-scale-400, 16px);
271
+ min-width: var(--ion-scale-400, 16px);
272
+ height: var(--ion-scale-400, 16px);
271
273
  }
272
274
  :host(:not(:empty).in-button) ::slotted(ion-icon) {
273
- width: var(--token-scale-300, 12px);
274
- height: var(--token-scale-300, 12px);
275
+ width: var(--ion-scale-300, 12px);
276
+ height: var(--ion-scale-300, 12px);
275
277
  }