@ionic/core 9.0.3-dev.11788456135.1ab1d6cd → 9.0.3-dev.11790016799.1e269b7a

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 (183) hide show
  1. package/components/ion-accordion.js +1 -1
  2. package/components/ion-alert.js +1 -1
  3. package/components/ion-back-button.js +1 -1
  4. package/components/ion-breadcrumb.js +1 -1
  5. package/components/ion-checkbox.js +1 -1
  6. package/components/ion-datetime.js +1 -1
  7. package/components/ion-fab-button.js +1 -1
  8. package/components/ion-input-password-toggle.js +1 -1
  9. package/components/ion-input.js +1 -1
  10. package/components/ion-item.js +1 -1
  11. package/components/ion-menu-button.js +1 -1
  12. package/components/ion-refresher-content.js +1 -1
  13. package/components/ion-reorder.js +1 -1
  14. package/components/ion-searchbar.js +1 -1
  15. package/components/ion-select-modal.js +1 -1
  16. package/components/ion-select-popover.js +1 -1
  17. package/components/ion-select.js +1 -1
  18. package/components/ion-textarea.js +1 -1
  19. package/components/ion-toggle.js +1 -1
  20. package/components/{p-Cc3oC60a.js → p-0rXxxCTt.js} +1 -1
  21. package/components/p-B9ibhQu1.js +4 -0
  22. package/components/p-BzxHcuQH.js +4 -0
  23. package/components/p-C6wm_AQQ.js +4 -0
  24. package/components/p-CaxVJjmc.js +4 -0
  25. package/components/{p-Cm78Kk79.js → p-D2X-Hime.js} +1 -1
  26. package/css/ionic/bundle.ionic.css.map +1 -1
  27. package/css/ionic/core.ionic.css.map +1 -1
  28. package/css/ionic/global.bundle.ionic.css.map +1 -1
  29. package/css/ionic/ionic-swiper.ionic.css.map +1 -1
  30. package/css/ionic/link.ionic.css.map +1 -1
  31. package/css/ionic/typography.ionic.css.map +1 -1
  32. package/dist/cjs/ion-accordion_2.cjs.entry.js +9 -14
  33. package/dist/cjs/ion-alert.cjs.entry.js +4 -4
  34. package/dist/cjs/ion-back-button.cjs.entry.js +11 -13
  35. package/dist/cjs/ion-breadcrumb_2.cjs.entry.js +16 -29
  36. package/dist/cjs/ion-checkbox.cjs.entry.js +23 -15
  37. package/dist/cjs/ion-datetime.cjs.entry.js +14 -50
  38. package/dist/cjs/ion-fab_3.cjs.entry.js +9 -14
  39. package/dist/cjs/ion-input-password-toggle.cjs.entry.js +17 -29
  40. package/dist/cjs/ion-input.cjs.entry.js +12 -28
  41. package/dist/cjs/ion-item_8.cjs.entry.js +10 -15
  42. package/dist/cjs/ion-menu_3.cjs.entry.js +9 -12
  43. package/dist/cjs/ion-refresher_2.cjs.entry.js +10 -5
  44. package/dist/cjs/ion-reorder_2.cjs.entry.js +5 -13
  45. package/dist/cjs/ion-searchbar.cjs.entry.js +8 -37
  46. package/dist/cjs/ion-select-modal.cjs.entry.js +11 -10
  47. package/dist/cjs/ion-select_3.cjs.entry.js +13 -37
  48. package/dist/cjs/ion-textarea.cjs.entry.js +13 -21
  49. package/dist/cjs/ion-toggle.cjs.entry.js +12 -28
  50. package/dist/collection/components/accordion/accordion.js +9 -14
  51. package/dist/collection/components/alert/alert.ionic.css +7 -9
  52. package/dist/collection/components/alert/alert.js +3 -3
  53. package/dist/collection/components/back-button/back-button.js +11 -13
  54. package/dist/collection/components/breadcrumb/breadcrumb.js +16 -28
  55. package/dist/collection/components/checkbox/checkbox.ionic.css +35 -42
  56. package/dist/collection/components/checkbox/checkbox.ios.css +33 -29
  57. package/dist/collection/components/checkbox/checkbox.js +23 -13
  58. package/dist/collection/components/checkbox/checkbox.md.css +33 -29
  59. package/dist/collection/components/datetime/datetime.ios.css +5 -10
  60. package/dist/collection/components/datetime/datetime.js +12 -48
  61. package/dist/collection/components/datetime/datetime.md.css +5 -10
  62. package/dist/collection/components/fab-button/fab-button.js +9 -14
  63. package/dist/collection/components/input/input.ionic.css +102 -79
  64. package/dist/collection/components/input/input.js +11 -27
  65. package/dist/collection/components/input-password-toggle/input-password-toggle.js +18 -28
  66. package/dist/collection/components/item/item.js +10 -15
  67. package/dist/collection/components/menu-button/menu-button.js +9 -12
  68. package/dist/collection/components/refresher-content/refresher-content.js +10 -4
  69. package/dist/collection/components/reorder/reorder.js +5 -13
  70. package/dist/collection/components/searchbar/searchbar.js +8 -35
  71. package/dist/collection/components/select/select.ionic.css +187 -76
  72. package/dist/collection/components/select/select.js +14 -39
  73. package/dist/collection/components/select-modal/select-modal.js +12 -10
  74. package/dist/collection/components/textarea/textarea.ionic.css +133 -85
  75. package/dist/collection/components/textarea/textarea.ios.css +0 -4
  76. package/dist/collection/components/textarea/textarea.js +13 -18
  77. package/dist/collection/components/textarea/textarea.md.css +0 -4
  78. package/dist/collection/components/toggle/toggle.js +12 -26
  79. package/dist/collection/utils/test/playwright/field-geometry.js +34 -0
  80. package/dist/collection/utils/test/playwright/index.js +1 -0
  81. package/dist/docs.json +60 -25
  82. package/dist/esm/{index-BqQ15K9a.js → index-BkJpfpXI.js} +1 -1
  83. package/dist/esm/ion-accordion_2.entry.js +10 -15
  84. package/dist/esm/ion-alert.entry.js +4 -4
  85. package/dist/esm/ion-back-button.entry.js +12 -14
  86. package/dist/esm/ion-breadcrumb_2.entry.js +17 -30
  87. package/dist/esm/ion-checkbox.entry.js +24 -16
  88. package/dist/esm/ion-datetime.entry.js +15 -51
  89. package/dist/esm/ion-fab_3.entry.js +10 -15
  90. package/dist/esm/ion-input-password-toggle.entry.js +19 -31
  91. package/dist/esm/ion-input.entry.js +13 -29
  92. package/dist/esm/ion-item_8.entry.js +11 -16
  93. package/dist/esm/ion-menu_3.entry.js +10 -13
  94. package/dist/esm/ion-refresher_2.entry.js +11 -6
  95. package/dist/esm/ion-reorder_2.entry.js +6 -14
  96. package/dist/esm/ion-searchbar.entry.js +9 -38
  97. package/dist/esm/ion-select-modal.entry.js +13 -12
  98. package/dist/esm/ion-select_3.entry.js +14 -38
  99. package/dist/esm/ion-textarea.entry.js +13 -21
  100. package/dist/esm/ion-toggle.entry.js +13 -29
  101. package/dist/ionic/ionic.esm.js +1 -1
  102. package/dist/ionic/p-016f2ee0.entry.js +4 -0
  103. package/dist/ionic/p-07b95001.entry.js +4 -0
  104. package/dist/ionic/p-14dfe86e.entry.js +4 -0
  105. package/dist/ionic/p-167af5d6.entry.js +4 -0
  106. package/dist/ionic/p-18285aab.entry.js +4 -0
  107. package/dist/ionic/{p-2e3acd77.entry.js → p-1e0f0eb9.entry.js} +1 -1
  108. package/dist/ionic/p-368935f5.entry.js +4 -0
  109. package/dist/ionic/p-38da0794.entry.js +4 -0
  110. package/dist/ionic/p-80f71456.entry.js +4 -0
  111. package/dist/ionic/p-83aa4043.entry.js +4 -0
  112. package/dist/ionic/p-944ce631.entry.js +4 -0
  113. package/dist/ionic/{p-BqQ15K9a.js → p-BkJpfpXI.js} +1 -1
  114. package/dist/ionic/p-aecef1d7.entry.js +4 -0
  115. package/dist/ionic/p-bb83b861.entry.js +4 -0
  116. package/dist/ionic/p-c1c90068.entry.js +4 -0
  117. package/dist/ionic/p-ccc7487b.entry.js +4 -0
  118. package/dist/ionic/p-cfd5dc50.entry.js +4 -0
  119. package/dist/ionic/p-d5c9bf12.entry.js +4 -0
  120. package/dist/ionic/p-f252ab8a.entry.js +4 -0
  121. package/dist/types/components/accordion/accordion.d.ts +7 -1
  122. package/dist/types/components/back-button/back-button.d.ts +8 -2
  123. package/dist/types/components/breadcrumb/breadcrumb.d.ts +12 -2
  124. package/dist/types/components/checkbox/checkbox.d.ts +12 -1
  125. package/dist/types/components/datetime/datetime.d.ts +4 -4
  126. package/dist/types/components/fab-button/fab-button.d.ts +7 -1
  127. package/dist/types/components/input/input.d.ts +7 -10
  128. package/dist/types/components/input-password-toggle/input-password-toggle.d.ts +14 -2
  129. package/dist/types/components/item/item.d.ts +7 -1
  130. package/dist/types/components/menu-button/menu-button.d.ts +6 -1
  131. package/dist/types/components/refresher-content/refresher-content.d.ts +6 -0
  132. package/dist/types/components/reorder/reorder.d.ts +1 -1
  133. package/dist/types/components/select/select.d.ts +7 -12
  134. package/dist/types/components/select-modal/select-modal.d.ts +6 -1
  135. package/dist/types/components/textarea/textarea.d.ts +8 -8
  136. package/dist/types/components/toggle/toggle.d.ts +5 -2
  137. package/dist/types/utils/config.d.ts +22 -2
  138. package/dist/types/utils/test/playwright/field-geometry.d.ts +13 -0
  139. package/dist/types/utils/test/playwright/index.d.ts +1 -0
  140. package/hydrate/index.js +213 -375
  141. package/hydrate/index.mjs +213 -375
  142. package/package.json +1 -2
  143. package/components/p-B1AK6oR-.js +0 -4
  144. package/components/p-BDqjX7Z_.js +0 -4
  145. package/components/p-BYSs-jZz.js +0 -4
  146. package/components/p-CPdOdJa7.js +0 -4
  147. package/components/p-D1t981Ih.js +0 -4
  148. package/components/p-Dhi5xtNS.js +0 -4
  149. package/components/p-DzaPYdjZ.js +0 -4
  150. package/components/p-e73ca-aN.js +0 -4
  151. package/components/p-fIOYmaqA.js +0 -4
  152. package/dist/cjs/caret-down-vtVgfXIs.js +0 -8
  153. package/dist/cjs/caret-left-CxZXLRv5.js +0 -8
  154. package/dist/cjs/caret-right-CRCgv98E.js +0 -8
  155. package/dist/cjs/list-a-7GSA6K.js +0 -8
  156. package/dist/cjs/x-BTF99yFH.js +0 -8
  157. package/dist/esm/caret-down-D1t981Ih.js +0 -6
  158. package/dist/esm/caret-left-fIOYmaqA.js +0 -6
  159. package/dist/esm/caret-right-BYSs-jZz.js +0 -6
  160. package/dist/esm/list-Dhi5xtNS.js +0 -6
  161. package/dist/esm/x-BDqjX7Z_.js +0 -6
  162. package/dist/ionic/p-04d96dad.entry.js +0 -4
  163. package/dist/ionic/p-0a924e6a.entry.js +0 -4
  164. package/dist/ionic/p-2da21af7.entry.js +0 -4
  165. package/dist/ionic/p-2fc1521f.entry.js +0 -4
  166. package/dist/ionic/p-73309d35.entry.js +0 -4
  167. package/dist/ionic/p-74ab5f49.entry.js +0 -4
  168. package/dist/ionic/p-83d13d56.entry.js +0 -4
  169. package/dist/ionic/p-8dcd18cf.entry.js +0 -4
  170. package/dist/ionic/p-9ca59419.entry.js +0 -4
  171. package/dist/ionic/p-BDqjX7Z_.js +0 -4
  172. package/dist/ionic/p-BYSs-jZz.js +0 -4
  173. package/dist/ionic/p-D1t981Ih.js +0 -4
  174. package/dist/ionic/p-Dhi5xtNS.js +0 -4
  175. package/dist/ionic/p-b10dc124.entry.js +0 -4
  176. package/dist/ionic/p-b7ce4a50.entry.js +0 -4
  177. package/dist/ionic/p-c7035f3f.entry.js +0 -4
  178. package/dist/ionic/p-c91fc9d4.entry.js +0 -4
  179. package/dist/ionic/p-cd4791d5.entry.js +0 -4
  180. package/dist/ionic/p-e9480e7f.entry.js +0 -4
  181. package/dist/ionic/p-e9fdff49.entry.js +0 -4
  182. package/dist/ionic/p-f82b13a6.entry.js +0 -4
  183. package/dist/ionic/p-fIOYmaqA.js +0 -4
@@ -3,10 +3,9 @@
3
3
  */
4
4
  import { r as registerInstance, h, d as Host, g as getElement, c as createEvent, f as printIonWarning, e as config } from './index-jsOqXOKf.js';
5
5
  import { c as getIonTheme } from './ionic-global-oK2heABF.js';
6
- import { x as xSvg } from './x-BDqjX7Z_.js';
7
6
  import { k as hasShadowDom, i as inheritAriaAttributes } from './helpers-DTqW6MzS.js';
8
7
  import { h as hostContext, o as openURL, c as createColorClasses } from './theme-BUF_V-Kg.js';
9
- import { t as close } from './index-BqQ15K9a.js';
8
+ import { t as close } from './index-BkJpfpXI.js';
10
9
  import './focus-visible-vXpMhGrs.js';
11
10
  import './dir-Dojwmvde.js';
12
11
 
@@ -206,22 +205,18 @@ const FabButton = class {
206
205
  componentWillLoad() {
207
206
  this.inheritedAttributes = inheritAriaAttributes(this.el);
208
207
  }
208
+ /**
209
+ * Get the icon to use for the close icon.
210
+ * If an icon is set on the component, use that.
211
+ * Otherwise, use the icon set in the config.
212
+ * If no icon is set in the config, use the default icon.
213
+ */
209
214
  get fabButtonCloseIcon() {
210
215
  // Return the icon if it is explicitly set
211
216
  if (this.closeIcon != null) {
212
217
  return this.closeIcon;
213
218
  }
214
- // Determine the theme and map to default icons
215
- const theme = getIonTheme(this);
216
- const defaultIcons = {
217
- ios: close,
218
- ionic: xSvg,
219
- md: close,
220
- };
221
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
222
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
223
- // Return the configured fab button close icon or the default icon
224
- return config.get('fabButtonCloseIcon', defaultIcon);
219
+ return config.get('fabButtonCloseIcon', close);
225
220
  }
226
221
  render() {
227
222
  const { el, disabled, fabButtonCloseIcon, color, href, activated, show, translucent, size, inheritedAttributes, type, } = this;
@@ -243,7 +238,7 @@ const FabButton = class {
243
238
  if (type !== 'button') {
244
239
  this.renderHiddenButton();
245
240
  }
246
- return (h(Host, { key: 'af84019ef7cee19ca5578a9a274d3890da83bf83', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
241
+ return (h(Host, { key: 'fc2e7284b76590aa65e45b8251f7c7776e11f0dc', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
247
242
  [theme]: true,
248
243
  'fab-button-in-list': inList,
249
244
  'fab-button-translucent-in-list': inList && translucent,
@@ -254,7 +249,7 @@ const FabButton = class {
254
249
  'ion-activatable': true,
255
250
  'ion-focusable': true,
256
251
  [`fab-button-${size}`]: size !== undefined,
257
- }) }, h(TagType, { key: '90b4b17993b3feab7194790c4497d0fd9860e01a', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation), ...inheritedAttributes }, h("ion-icon", { key: 'a6d2cf73b627ead797c8efa82e0b7cd6aa845603', "aria-hidden": "true", icon: fabButtonCloseIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '3f08bc8aa15bcb72ecf11a81b50e2c79ab4d841a', class: "button-inner" }, h("slot", { key: 'c5c5921194b2c6b81dab2f9338298ab1c31367c5' })), theme === 'md' && h("ion-ripple-effect", { key: '78952651d0662304bd74ab8dc4cd09eb2d5ed455' }))));
252
+ }) }, h(TagType, { key: '21598ba114ac64d8f98bc0f16934678166def17e', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation), ...inheritedAttributes }, h("ion-icon", { key: '673609441ffe18d6e8f4b2dc2de37eda7efdda75', "aria-hidden": "true", icon: fabButtonCloseIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '13b3dac62a91549431d227676bbe8a0a0fc93665', class: "button-inner" }, h("slot", { key: 'aefbe96ef9790dd85002432d7bb5a70f17e52a15' })), theme === 'md' && h("ion-ripple-effect", { key: '6888c7374b87c08a9a04009549026ae7365f4b92' }))));
258
253
  }
259
254
  get el() { return getElement(this); }
260
255
  static get watchers() { return {
@@ -3,12 +3,8 @@
3
3
  */
4
4
  import { r as registerInstance, f as printIonWarning, e as config, h, d as Host, g as getElement } from './index-jsOqXOKf.js';
5
5
  import { c as createColorClasses } from './theme-BUF_V-Kg.js';
6
- import { x as eyeOff, y as eye } from './index-BqQ15K9a.js';
7
- import { c as getIonTheme, b as getIonMode } from './ionic-global-oK2heABF.js';
8
-
9
- const eyeSlashSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik01My45MiwzNC42MkE4LDgsMCwxLDAsNDIuMDgsNDUuMzhMNjEuMzIsNjYuNTVDMjUsODguODQsOS4zOCwxMjMuMiw4LjY5LDEyNC43NmE4LDgsMCwwLDAsMCw2LjVjLjM1Ljc5LDguODIsMTkuNTcsMjcuNjUsMzguNEM2MS40MywxOTQuNzQsOTMuMTIsMjA4LDEyOCwyMDhhMTI3LjExLDEyNy4xMSwwLDAsMCw1Mi4wNy0xMC44M2wyMiwyNC4yMWE4LDgsMCwxLDAsMTEuODQtMTAuNzZabTQ3LjMzLDc1Ljg0LDQxLjY3LDQ1Ljg1YTMyLDMyLDAsMCwxLTQxLjY3LTQ1Ljg1Wk0xMjgsMTkyYy0zMC43OCwwLTU3LjY3LTExLjE5LTc5LjkzLTMzLjI1QTEzMy4xNiwxMzMuMTYsMCwwLDEsMjUsMTI4YzQuNjktOC43OSwxOS42Ni0zMy4zOSw0Ny4zNS00OS4zOGwxOCwxOS43NWE0OCw0OCwwLDAsMCw2My42Niw3MGwxNC43MywxNi4yQTExMiwxMTIsMCwwLDEsMTI4LDE5MlptNi05NS40M2E4LDgsMCwwLDEsMy0xNS43Miw0OC4xNiw0OC4xNiwwLDAsMSwzOC43Nyw0Mi42NCw4LDgsMCwwLDEtNy4yMiw4LjcxLDYuMzksNi4zOSwwLDAsMS0uNzUsMCw4LDgsMCwwLDEtOC03LjI2QTMyLjA5LDMyLjA5LDAsMCwwLDEzNCw5Ni41N1ptMTEzLjI4LDM0LjY5Yy0uNDIuOTQtMTAuNTUsMjMuMzctMzMuMzYsNDMuOGE4LDgsMCwxLDEtMTAuNjctMTEuOTJBMTMyLjc3LDEzMi43NywwLDAsMCwyMzEuMDUsMTI4YTEzMy4xNSwxMzMuMTUsMCwwLDAtMjMuMTItMzAuNzdDMTg1LjY3LDc1LjE5LDE1OC43OCw2NCwxMjgsNjRhMTE4LjM3LDExOC4zNywwLDAsMC0xOS4zNiwxLjU3QTgsOCwwLDEsMSwxMDYsNDkuNzksMTM0LDEzNCwwLDAsMSwxMjgsNDhjMzQuODgsMCw2Ni41NywxMy4yNiw5MS42NiwzOC4zNSwxOC44MywxOC44MywyNy4zLDM3LjYyLDI3LjY1LDM4LjQxQTgsOCwwLDAsMSwyNDcuMzEsMTMxLjI2WiIvPjwvc3ZnPg==';
10
-
11
- const eyeSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yNDcuMzEsMTI0Ljc2Yy0uMzUtLjc5LTguODItMTkuNTgtMjcuNjUtMzguNDFDMTk0LjU3LDYxLjI2LDE2Mi44OCw0OCwxMjgsNDhTNjEuNDMsNjEuMjYsMzYuMzQsODYuMzVDMTcuNTEsMTA1LjE4LDksMTI0LDguNjksMTI0Ljc2YTgsOCwwLDAsMCwwLDYuNWMuMzUuNzksOC44MiwxOS41NywyNy42NSwzOC40QzYxLjQzLDE5NC43NCw5My4xMiwyMDgsMTI4LDIwOHM2Ni41Ny0xMy4yNiw5MS42Ni0zOC4zNGMxOC44My0xOC44MywyNy4zLTM3LjYxLDI3LjY1LTM4LjRBOCw4LDAsMCwwLDI0Ny4zMSwxMjQuNzZaTTEyOCwxOTJjLTMwLjc4LDAtNTcuNjctMTEuMTktNzkuOTMtMzMuMjVBMTMzLjQ3LDEzMy40NywwLDAsMSwyNSwxMjgsMTMzLjMzLDEzMy4zMywwLDAsMSw0OC4wNyw5Ny4yNUM3MC4zMyw3NS4xOSw5Ny4yMiw2NCwxMjgsNjRzNTcuNjcsMTEuMTksNzkuOTMsMzMuMjVBMTMzLjQ2LDEzMy40NiwwLDAsMSwyMzEuMDUsMTI4QzIyMy44NCwxNDEuNDYsMTkyLjQzLDE5MiwxMjgsMTkyWm0wLTExMmE0OCw0OCwwLDEsMCw0OCw0OEE0OC4wNSw0OC4wNSwwLDAsMCwxMjgsODBabTAsODBhMzIsMzIsMCwxLDEsMzItMzJBMzIsMzIsMCwwLDEsMTI4LDE2MFoiLz48L3N2Zz4=';
6
+ import { x as eyeOff, y as eye } from './index-BkJpfpXI.js';
7
+ import { b as getIonMode } from './ionic-global-oK2heABF.js';
12
8
 
13
9
  const inputPasswordToggleIonicCss = () => `:host ion-button{--color:var(--token-primitives-neutral-800, #626262);--margin-end:calc(-1 * var(--padding-end));--padding-end:inherit;--icon-size:var(--token-font-size-400, 1rem);-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:0;margin-bottom:0;width:var(--size);height:var(--size)}:host ion-button ion-icon{font-size:var(--icon-size)}`;
14
10
 
@@ -61,54 +57,46 @@ const InputPasswordToggle = class {
61
57
  disconnectedCallback() {
62
58
  this.inputElRef = null;
63
59
  }
60
+ /**
61
+ * Get the icon to use for the hide icon.
62
+ * If an icon is set on the component, use that.
63
+ * Otherwise, use the icon set in the config.
64
+ * If no icon is set in the config, use the default icon.
65
+ */
64
66
  get inputPasswordHideIcon() {
65
67
  // Return the icon if it is explicitly set
66
68
  if (this.hideIcon != null) {
67
69
  return this.hideIcon;
68
70
  }
69
- // Determine the theme and map to default icons
70
- const theme = getIonTheme(this);
71
- const defaultIcons = {
72
- ios: eyeOff,
73
- ionic: eyeSlashSvg,
74
- md: eyeOff,
75
- };
76
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
77
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
78
- // Return the configured input password hide icon or the default icon
79
- return config.get('inputPasswordHideIcon', defaultIcon);
71
+ return config.get('inputPasswordHideIcon', eyeOff);
80
72
  }
73
+ /**
74
+ * Get the icon to use for the show icon.
75
+ * If an icon is set on the component, use that.
76
+ * Otherwise, use the icon set in the config.
77
+ * If no icon is set in the config, use the default icon.
78
+ */
81
79
  get inputPasswordShowIcon() {
82
80
  // Return the icon if it is explicitly set
83
81
  if (this.showIcon != null) {
84
82
  return this.showIcon;
85
83
  }
86
- // Determine the theme and map to default icons
87
- const theme = getIonTheme(this);
88
- const defaultIcons = {
89
- ios: eye,
90
- ionic: eyeSvg,
91
- md: eye,
92
- };
93
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
94
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
95
- // Return the configured input password show icon or the default icon
96
- return config.get('inputPasswordShowIcon', defaultIcon);
84
+ return config.get('inputPasswordShowIcon', eye);
97
85
  }
98
86
  render() {
99
87
  const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
100
88
  const mode = getIonMode(this);
101
89
  const isPasswordVisible = type === 'text';
102
- return (h(Host, { key: '2734787d7024b5662ab5a3f11d8026d5a514baa3', class: createColorClasses(color, {
90
+ return (h(Host, { key: '84bc48922e1757b815cc8cfb57120479736c3c60', class: createColorClasses(color, {
103
91
  [mode]: true,
104
- }) }, h("ion-button", { key: 'f4507daff695b5f2d0b2794ff6cb73ec71917ca8', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
92
+ }) }, h("ion-button", { key: '1ffddcd50039cc044a0ad36e5c8e0465d135518c', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
105
93
  /**
106
94
  * This prevents mobile browsers from
107
95
  * blurring the input when the password toggle
108
96
  * button is activated.
109
97
  */
110
98
  ev.preventDefault();
111
- }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'b1d55b3625cc0a90249090c29b635064e6086075', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
99
+ }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '6ee118c5044c11b6db743f3ce6be6ef7ba255292', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
112
100
  }
113
101
  get el() { return getElement(this); }
114
102
  static get watchers() { return {
@@ -2,19 +2,18 @@
2
2
  * (C) Ionic http://ionicframework.com - MIT License
3
3
  */
4
4
  import { r as registerInstance, c as createEvent, i as forceUpdate, f as printIonWarning, h, e as config, d as Host, g as getElement } from './index-jsOqXOKf.js';
5
- import { x as xSvg } from './x-BDqjX7Z_.js';
6
5
  import { c as createSlotMutationController, a as createNotchController, b as createStartContainerController } from './slot-mutation-controller-C5Vj7Od7.js';
7
6
  import { c as checkInvalidState } from './validity-NcQUGze-.js';
8
7
  import { c as createClearButtonPressController } from './clear-button-press-controller-CWOPHFBc.js';
9
8
  import { d as debounceEvent, b as inheritAttributes, i as inheritAriaAttributes, c as componentOnReady } from './helpers-DTqW6MzS.js';
10
9
  import { h as hostContext, c as createColorClasses } from './theme-BUF_V-Kg.js';
11
- import { g as closeSharp, h as closeCircle } from './index-BqQ15K9a.js';
10
+ import { g as closeCircle, h as closeSharp } from './index-BkJpfpXI.js';
12
11
  import { c as getIonTheme } from './ionic-global-oK2heABF.js';
13
12
  import { g as getCounterText } from './input.utils-BV974hyf.js';
14
13
  import './dir-Dojwmvde.js';
15
14
  import './focus-visible-vXpMhGrs.js';
16
15
 
17
- const inputIonicCss = () => `.sc-ion-input-ionic-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--border-style:solid;--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;padding:0 !important;color:var(--color)}ion-item[slot=start].sc-ion-input-ionic-h,ion-item [slot=start].sc-ion-input-ionic-h,ion-item[slot=end].sc-ion-input-ionic-h,ion-item [slot=end].sc-ion-input-ionic-h{width:auto}.ion-color.sc-ion-input-ionic-h{--highlight-color-focused:current-color(base)}.native-input.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;height:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:1}.native-input.sc-ion-input-ionic::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-ionic:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-ion-input-ionic::-ms-clear{display:none}.cloned-input.sc-ion-input-ionic{position:absolute;top:0;bottom:0;height:auto;max-height:none;pointer-events:none}.cloned-input.sc-ion-input-ionic:disabled{opacity:1}.input-clear-icon.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.in-item-color.sc-ion-input-ionic-h .input-clear-icon.sc-ion-input-ionic{color:inherit}.has-value.sc-ion-input-ionic-h .input-clear-icon.sc-ion-input-ionic{visibility:visible}.input-wrapper.sc-ion-input-ionic{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.input-control.sc-ion-input-ionic{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;width:100%;min-width:0}.native-wrapper.sc-ion-input-ionic{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;width:100%}.input-start.sc-ion-input-ionic,.input-end.sc-ion-input-ionic{display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center}.ion-touched.ion-invalid.sc-ion-input-ionic-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-ionic-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-ionic{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);white-space:normal}.has-focus.ion-valid.sc-ion-input-ionic-h,.ion-touched.ion-invalid.sc-ion-input-ionic-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-ionic .error-text.sc-ion-input-ionic{display:none;color:var(--highlight-color-invalid)}.input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic{display:block}.ion-touched.ion-invalid.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .error-text.sc-ion-input-ionic{display:block}.ion-touched.ion-invalid.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic{display:none}.input-bottom.sc-ion-input-ionic .counter.sc-ion-input-ionic{-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.has-focus.sc-ion-input-ionic-h input.sc-ion-input-ionic{caret-color:var(--highlight-color)}.label-text-wrapper.sc-ion-input-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.skip-label-transition.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transition:none;transition:none}.label-text.sc-ion-input-ionic,.sc-ion-input-ionic-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-input-ionic,.input-outline-notch-hidden.sc-ion-input-ionic{display:none}.input-wrapper.sc-ion-input-ionic input.sc-ion-input-ionic{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.input-label-placement-start.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic{-ms-flex-direction:row;flex-direction:row}.input-label-placement-end.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-fixed.sc-ion-input-ionic-h .label-text.sc-ion-input-ionic{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.input-label-placement-stacked.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:left top;transform-origin:left top;max-width:100%;z-index:2}[dir=rtl].sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].sc-ion-input-ionic-h -no-combinator.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .sc-ion-input-ionic-h -no-combinator.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}}.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic{opacity:0}.has-focus.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic,.has-value.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic{opacity:1}.sc-ion-input-ionic-h[disabled].sc-ion-input-ionic-s>ion-input-password-toggle,.sc-ion-input-ionic-h[disabled] .sc-ion-input-ionic-s>ion-input-password-toggle,.sc-ion-input-ionic-h[readonly].sc-ion-input-ionic-s>ion-input-password-toggle,.sc-ion-input-ionic-h[readonly] .sc-ion-input-ionic-s>ion-input-password-toggle{visibility:hidden}.input-fill-outline.sc-ion-input-ionic-h{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--border-color:var(--token-primitives-neutral-500, #a2a2a2)}.input-fill-solid.sc-ion-input-ionic-h{--background:var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));--border-color:var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9))}.input-fill-solid.has-focus.ion-valid.sc-ion-input-ionic-h .input-wrapper-inner.sc-ion-input-ionic,.input-fill-solid.ion-touched.ion-invalid.sc-ion-input-ionic-h .input-wrapper-inner.sc-ion-input-ionic{--border-color:var(--highlight-color)}@media (any-hover: hover){.sc-ion-input-ionic-h:hover{--border-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7))}}.input-fill-solid.input-disabled.sc-ion-input-ionic-h{--background:var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));--placeholder-color:var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2))}.input-fill-solid.input-readonly.sc-ion-input-ionic-h{--background:var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));--border-color:var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0))}.input-fill-solid.has-focus.sc-ion-input-ionic-h{--border-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7))}.sc-ion-input-ionic-h{--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424));--border-width:var(--token-border-size-025, var(--token-scale-025, 1px));--highlight-color-valid:var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23));--highlight-color-invalid:var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));--placeholder-color:var(--token-primitives-neutral-800, #626262);--placeholder-opacity:1;font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none}.input-outline.sc-ion-input-ionic{right:0;left:0;top:0;bottom:0;border-radius:var(--border-radius);position:absolute;width:100%;height:100%;pointer-events:none;border:var(--border-width) var(--border-style) var(--border-color)}.input-label-placement-start.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic{-ms-flex-direction:row;flex-direction:row}.input-label-placement-end.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-stacked.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-ionic-h input.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0}.label-floating.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}.input-wrapper.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;border-bottom:none;background:transparent}.label-text-wrapper.sc-ion-input-ionic{position:relative}.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:left top;transform-origin:left top;max-width:calc(100% - var(--padding-start) - var(--padding-end))}[dir=rtl].sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}}.input-bottom.sc-ion-input-ionic{border-top:none}.input-wrapper-inner.sc-ion-input-ionic{border-radius:inherit;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;min-height:var(--token-scale-1000, 40px);-webkit-box-sizing:border-box;box-sizing:border-box;background:var(--background)}.input-size-medium.sc-ion-input-ionic-h{--padding-start:var(--token-space-300, var(--token-scale-300, 12px));--padding-end:var(--token-space-300, var(--token-scale-300, 12px))}.input-size-large.sc-ion-input-ionic-h{--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px))}.input-size-xlarge.sc-ion-input-ionic-h{--padding-start:var(--token-space-500, var(--token-scale-500, 20px));--padding-end:var(--token-space-500, var(--token-scale-500, 20px))}.input-size-medium.sc-ion-input-ionic-h .input-wrapper-inner.sc-ion-input-ionic{min-height:var(--token-scale-1000, 40px)}.input-size-large.sc-ion-input-ionic-h .input-wrapper-inner.sc-ion-input-ionic{min-height:var(--token-scale-1200, 48px)}.input-size-xlarge.sc-ion-input-ionic-h .input-wrapper-inner.sc-ion-input-ionic{min-height:var(--token-scale-1400, 56px)}.input-shape-soft.sc-ion-input-ionic-h{--border-radius:var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)))}.input-shape-round.sc-ion-input-ionic-h{--border-radius:var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)))}.input-shape-rectangular.sc-ion-input-ionic-h{--border-radius:var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)))}.input-size-medium.sc-ion-input-ionic-h ion-input-password-toggle.sc-ion-input-ionic{--size:var(--token-scale-1000, 40px)}.input-size-large.sc-ion-input-ionic-h ion-input-password-toggle.sc-ion-input-ionic{--size:var(--token-scale-1200, 48px)}.input-size-xlarge.sc-ion-input-ionic-h ion-input-password-toggle.sc-ion-input-ionic{--size:var(--token-scale-1400, 56px)}.input-wrapper-inner.sc-ion-input-ionic::after{right:0;left:0;top:50%;position:absolute;height:100%;min-height:var(--token-scale-1200, 48px);-webkit-transform:translateY(-50%);transform:translateY(-50%);content:"";cursor:text}.sc-ion-input-ionic-s>[slot=start],.sc-ion-input-ionic-s>[slot=end],.input-clear-icon.sc-ion-input-ionic{z-index:2}.sc-ion-input-ionic-s>[slot=start]:last-of-type{-webkit-margin-end:var(--token-space-200, var(--token-scale-200, 8px));margin-inline-end:var(--token-space-200, var(--token-scale-200, 8px))}.sc-ion-input-ionic-s>[slot=end]:first-of-type{-webkit-margin-start:var(--token-space-200, var(--token-scale-200, 8px));margin-inline-start:var(--token-space-200, var(--token-scale-200, 8px))}.input-clear-icon.sc-ion-input-ionic{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px);color:var(--token-primitives-neutral-1000, #3b3b3b)}.input-clear-icon.sc-ion-input-ionic:focus-visible{border-radius:var(--token-border-radius-100, var(--token-scale-100, 4px));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));opacity:1}.input-clear-icon.sc-ion-input-ionic ion-icon.sc-ion-input-ionic{font-size:var(--token-font-size-400, 1rem)}.sc-ion-input-ionic-h:not(:focus-within) .input-clear-icon.sc-ion-input-ionic:not(.input-clear-button-pressed){display:none}.label-text-wrapper.sc-ion-input-ionic{font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none;color:var(--token-primitives-neutral-1000, #3b3b3b)}.label-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform:none;transform:none}.input-bottom.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:0;font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none}.input-bottom.sc-ion-input-ionic .error-text.sc-ion-input-ionic{color:var(--token-text-danger, var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b)))}.input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic,.input-bottom.sc-ion-input-ionic .counter.sc-ion-input-ionic{color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262))}.has-focus.ion-valid.sc-ion-input-ionic-h .helper-text.sc-ion-input-ionic{color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-ionic-h,.ion-touched.ion-invalid.sc-ion-input-ionic-h{--border-width:var(--token-border-size-025, var(--token-scale-025, 1px))}@media (any-hover: hover){.sc-ion-input-ionic-h:hover{--border-color:var(--token-primitives-neutral-600, #8c8c8c)}}.input-disabled.sc-ion-input-ionic-h{--color:var(--token-primitives-neutral-500, #a2a2a2);--background:var(--token-primitives-neutral-100, #f3f3f3);--border-color:var(--token-primitives-neutral-300, #e0e0e0);--placeholder-color:var(--token-primitives-neutral-500, #a2a2a2);pointer-events:none}.input-disabled.sc-ion-input-ionic-h:not(.ion-valid) .input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic,.input-disabled.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .counter.sc-ion-input-ionic,.input-disabled.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{color:var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2))}.input-disabled.has-focus.ion-valid.sc-ion-input-ionic-h{--border-color:rgba(var(--token-semantics-success-base-rgb, 27, 164, 51), 0.6)}.input-disabled.ion-touched.ion-invalid.sc-ion-input-ionic-h{--border-color:rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 0.6)}.input-disabled.ion-color.sc-ion-input-ionic-h{--border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-disabled.has-focus.ion-valid.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic,.input-disabled.ion-touched.ion-invalid.sc-ion-input-ionic-h .error-text.sc-ion-input-ionic{opacity:0.6}.input-readonly.sc-ion-input-ionic-h{--background:var(--token-primitives-neutral-100, #f3f3f3)}.has-focus.sc-ion-input-ionic-h{--border-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));--border-width:var(--token-border-size-050, var(--token-scale-050, 2px))}.has-focus.sc-ion-input-ionic-h .input-highlight.sc-ion-input-ionic{-webkit-transform:scale(1);transform:scale(1)}`;
16
+ const inputIonicCss = () => `.sc-ion-input-ionic-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--border-style:solid;--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;padding:0 !important;color:var(--color)}ion-item[slot=start].sc-ion-input-ionic-h,ion-item [slot=start].sc-ion-input-ionic-h,ion-item[slot=end].sc-ion-input-ionic-h,ion-item [slot=end].sc-ion-input-ionic-h{width:auto}.ion-color.sc-ion-input-ionic-h{--highlight-color-focused:current-color(base)}.native-input.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;height:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:1}.native-input.sc-ion-input-ionic::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-ionic:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-ion-input-ionic::-ms-clear{display:none}.cloned-input.sc-ion-input-ionic{position:absolute;top:0;bottom:0;height:auto;max-height:none;pointer-events:none}.cloned-input.sc-ion-input-ionic:disabled{opacity:1}.input-clear-icon.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.in-item-color.sc-ion-input-ionic-h .input-clear-icon.sc-ion-input-ionic{color:inherit}.has-value.sc-ion-input-ionic-h .input-clear-icon.sc-ion-input-ionic{visibility:visible}.input-wrapper.sc-ion-input-ionic{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.input-control.sc-ion-input-ionic{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;width:100%;min-width:0}.native-wrapper.sc-ion-input-ionic{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;width:100%}.input-start.sc-ion-input-ionic,.input-end.sc-ion-input-ionic{display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center}.ion-touched.ion-invalid.sc-ion-input-ionic-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-ionic-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-ionic{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);white-space:normal}.has-focus.ion-valid.sc-ion-input-ionic-h,.ion-touched.ion-invalid.sc-ion-input-ionic-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-ionic .error-text.sc-ion-input-ionic{display:none;color:var(--highlight-color-invalid)}.input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic{display:block}.ion-touched.ion-invalid.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .error-text.sc-ion-input-ionic{display:block}.ion-touched.ion-invalid.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic{display:none}.input-bottom.sc-ion-input-ionic .counter.sc-ion-input-ionic{-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.has-focus.sc-ion-input-ionic-h input.sc-ion-input-ionic{caret-color:var(--highlight-color)}.label-text-wrapper.sc-ion-input-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.skip-label-transition.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transition:none;transition:none}.label-text.sc-ion-input-ionic,.sc-ion-input-ionic-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-input-ionic,.input-outline-notch-hidden.sc-ion-input-ionic{display:none}.input-wrapper.sc-ion-input-ionic input.sc-ion-input-ionic{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.input-label-placement-start.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic{-ms-flex-direction:row;flex-direction:row}.input-label-placement-end.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-fixed.sc-ion-input-ionic-h .label-text.sc-ion-input-ionic{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.input-label-placement-stacked.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:left top;transform-origin:left top;max-width:100%;z-index:2}[dir=rtl].sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].sc-ion-input-ionic-h -no-combinator.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .sc-ion-input-ionic-h -no-combinator.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}}.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic{opacity:0}.has-focus.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic,.has-value.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic{opacity:1}.sc-ion-input-ionic-h[disabled].sc-ion-input-ionic-s>ion-input-password-toggle,.sc-ion-input-ionic-h[disabled] .sc-ion-input-ionic-s>ion-input-password-toggle,.sc-ion-input-ionic-h[readonly].sc-ion-input-ionic-s>ion-input-password-toggle,.sc-ion-input-ionic-h[readonly] .sc-ion-input-ionic-s>ion-input-password-toggle{visibility:hidden}.input-fill-outline.sc-ion-input-ionic-h{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--border-color:var(--token-primitives-neutral-500, #a2a2a2)}.input-fill-solid.sc-ion-input-ionic-h{--background:var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));--border-color:var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9))}.input-fill-solid.has-focus.ion-valid.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic,.input-fill-solid.ion-touched.ion-invalid.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic{--border-color:var(--highlight-color)}@media (any-hover: hover){.sc-ion-input-ionic-h:hover{--border-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7))}}.input-fill-solid.input-disabled.sc-ion-input-ionic-h{--background:var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));--placeholder-color:var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2))}.input-fill-solid.input-readonly.sc-ion-input-ionic-h{--background:var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));--border-color:var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0))}.input-fill-solid.has-focus.sc-ion-input-ionic-h{--border-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7))}.sc-ion-input-ionic-h{--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424));--border-width:var(--token-border-size-025, var(--token-scale-025, 1px));--highlight-color-valid:var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23));--highlight-color-invalid:var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));--placeholder-color:var(--token-primitives-neutral-800, #626262);--placeholder-opacity:1;font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none}.input-label-placement-stacked.sc-ion-input-ionic-h input.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0}.label-floating.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}.input-wrapper.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:grid;grid-template-columns:[field-start slot-start] auto [native] minmax(0, 1fr) [slot-end] auto [field-end];grid-template-rows:[label] auto [field] auto;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;background:transparent}.input-control.sc-ion-input-ionic{display:contents}.input-wrapper.sc-ion-input-ionic::before{border-radius:var(--border-radius, 0);-ms-flex-item-align:stretch;align-self:stretch;-webkit-box-sizing:border-box;box-sizing:border-box;content:"";pointer-events:none;min-height:var(--token-scale-1000, 40px);border:var(--border-width) var(--border-style) var(--border-color);background:var(--background)}.input-wrapper.sc-ion-input-ionic::before{grid-row:field;grid-column:field-start/field-end}.label-text-wrapper.sc-ion-input-ionic{grid-row:label;grid-column:field-start/field-end}.input-start.sc-ion-input-ionic{grid-row:field;grid-column:slot-start}.native-wrapper.sc-ion-input-ionic{grid-row:field;grid-column:native}.input-end.sc-ion-input-ionic{grid-row:field;grid-column:slot-end}.input-start.sc-ion-input-ionic,.native-wrapper.sc-ion-input-ionic,.input-end.sc-ion-input-ionic{padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}.input-start.sc-ion-input-ionic{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start)}.input-end.sc-ion-input-ionic{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:left top;transform-origin:left top;max-width:calc(100% - var(--padding-start) - var(--padding-end))}[dir=rtl].sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}}.input-bottom.sc-ion-input-ionic{border-top:none}.input-size-medium.sc-ion-input-ionic-h{--padding-start:var(--token-space-300, var(--token-scale-300, 12px));--padding-end:var(--token-space-300, var(--token-scale-300, 12px))}.input-size-large.sc-ion-input-ionic-h{--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px))}.input-size-xlarge.sc-ion-input-ionic-h{--padding-start:var(--token-space-500, var(--token-scale-500, 20px));--padding-end:var(--token-space-500, var(--token-scale-500, 20px))}.input-size-medium.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic::before{min-height:var(--token-scale-1000, 40px)}.input-size-large.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic::before{min-height:var(--token-scale-1200, 48px)}.input-size-xlarge.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic::before{min-height:var(--token-scale-1400, 56px)}.input-shape-soft.sc-ion-input-ionic-h{--border-radius:var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)))}.input-shape-round.sc-ion-input-ionic-h{--border-radius:var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)))}.input-shape-rectangular.sc-ion-input-ionic-h{--border-radius:var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)))}.input-size-medium.sc-ion-input-ionic-h ion-input-password-toggle.sc-ion-input-ionic{--size:var(--token-scale-1000, 40px)}.input-size-large.sc-ion-input-ionic-h ion-input-password-toggle.sc-ion-input-ionic{--size:var(--token-scale-1200, 48px)}.input-size-xlarge.sc-ion-input-ionic-h ion-input-password-toggle.sc-ion-input-ionic{--size:var(--token-scale-1400, 56px)}.input-wrapper.sc-ion-input-ionic::after{grid-row:field;grid-column:field-start/field-end;align-self:stretch;content:"";cursor:text}.input-size-medium.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic::after{margin-top:calc((var(--token-scale-1000, 40px) - var(--token-scale-1200, 48px)) / 2);margin-bottom:calc((var(--token-scale-1000, 40px) - var(--token-scale-1200, 48px)) / 2);min-height:var(--token-scale-1200, 48px)}.sc-ion-input-ionic-s>[slot=start],.sc-ion-input-ionic-s>[slot=end],.input-clear-icon.sc-ion-input-ionic{z-index:2}.sc-ion-input-ionic-s>[slot=start]:last-of-type{-webkit-margin-end:var(--token-space-200, var(--token-scale-200, 8px));margin-inline-end:var(--token-space-200, var(--token-scale-200, 8px))}.sc-ion-input-ionic-s>[slot=end]:first-of-type{-webkit-margin-start:var(--token-space-200, var(--token-scale-200, 8px));margin-inline-start:var(--token-space-200, var(--token-scale-200, 8px))}.input-clear-icon.sc-ion-input-ionic{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px);color:var(--token-primitives-neutral-1000, #3b3b3b)}.input-clear-icon.sc-ion-input-ionic:focus-visible{border-radius:var(--token-border-radius-100, var(--token-scale-100, 4px));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));opacity:1}.input-clear-icon.sc-ion-input-ionic ion-icon.sc-ion-input-ionic{font-size:var(--token-font-size-400, 1rem)}.sc-ion-input-ionic-h:not(:focus-within) .input-clear-icon.sc-ion-input-ionic:not(.input-clear-button-pressed){display:none}.label-text-wrapper.sc-ion-input-ionic{font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none;color:var(--token-primitives-neutral-1000, #3b3b3b)}.label-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform:none;transform:none}.input-bottom.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:0;font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none}.input-bottom.sc-ion-input-ionic .error-text.sc-ion-input-ionic{color:var(--token-text-danger, var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b)))}.input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic,.input-bottom.sc-ion-input-ionic .counter.sc-ion-input-ionic{color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262))}.has-focus.ion-valid.sc-ion-input-ionic-h .helper-text.sc-ion-input-ionic{color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-ionic-h,.ion-touched.ion-invalid.sc-ion-input-ionic-h{--border-width:var(--token-border-size-025, var(--token-scale-025, 1px))}@media (any-hover: hover){.sc-ion-input-ionic-h:hover{--border-color:var(--token-primitives-neutral-600, #8c8c8c)}}.input-disabled.sc-ion-input-ionic-h{--color:var(--token-primitives-neutral-500, #a2a2a2);--background:var(--token-primitives-neutral-100, #f3f3f3);--border-color:var(--token-primitives-neutral-300, #e0e0e0);--placeholder-color:var(--token-primitives-neutral-500, #a2a2a2);pointer-events:none}.input-disabled.sc-ion-input-ionic-h:not(.ion-valid) .input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic,.input-disabled.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .counter.sc-ion-input-ionic,.input-disabled.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{color:var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2))}.input-disabled.has-focus.ion-valid.sc-ion-input-ionic-h{--border-color:rgba(var(--token-semantics-success-base-rgb, 27, 164, 51), 0.6)}.input-disabled.ion-touched.ion-invalid.sc-ion-input-ionic-h{--border-color:rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 0.6)}.input-disabled.ion-color.sc-ion-input-ionic-h{--border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-disabled.has-focus.ion-valid.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic,.input-disabled.ion-touched.ion-invalid.sc-ion-input-ionic-h .error-text.sc-ion-input-ionic{opacity:0.6}.input-readonly.sc-ion-input-ionic-h{--background:var(--token-primitives-neutral-100, #f3f3f3)}.has-focus.sc-ion-input-ionic-h{--border-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));--border-width:var(--token-border-size-050, var(--token-scale-050, 2px))}.has-focus.sc-ion-input-ionic-h .input-highlight.sc-ion-input-ionic{-webkit-transform:scale(1);transform:scale(1)}`;
18
17
 
19
18
  const inputIosCss = () => `.sc-ion-input-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--border-style:solid;--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;padding:0 !important;color:var(--color)}ion-item[slot=start].sc-ion-input-ios-h,ion-item [slot=start].sc-ion-input-ios-h,ion-item[slot=end].sc-ion-input-ios-h,ion-item [slot=end].sc-ion-input-ios-h{width:auto}.ion-color.sc-ion-input-ios-h{--highlight-color-focused:current-color(base)}.native-input.sc-ion-input-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;height:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:1}.native-input.sc-ion-input-ios::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-ios:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-ion-input-ios::-ms-clear{display:none}.cloned-input.sc-ion-input-ios{position:absolute;top:0;bottom:0;height:auto;max-height:none;pointer-events:none}.cloned-input.sc-ion-input-ios:disabled{opacity:1}.input-clear-icon.sc-ion-input-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.in-item-color.sc-ion-input-ios-h .input-clear-icon.sc-ion-input-ios{color:inherit}.has-value.sc-ion-input-ios-h .input-clear-icon.sc-ion-input-ios{visibility:visible}.input-wrapper.sc-ion-input-ios{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.input-control.sc-ion-input-ios{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;width:100%;min-width:0}.native-wrapper.sc-ion-input-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;width:100%}.input-start.sc-ion-input-ios,.input-end.sc-ion-input-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center}.ion-touched.ion-invalid.sc-ion-input-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-ios-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);white-space:normal}.has-focus.ion-valid.sc-ion-input-ios-h,.ion-touched.ion-invalid.sc-ion-input-ios-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-ios .error-text.sc-ion-input-ios{display:none;color:var(--highlight-color-invalid)}.input-bottom.sc-ion-input-ios .helper-text.sc-ion-input-ios{display:block}.ion-touched.ion-invalid.sc-ion-input-ios-h .input-bottom.sc-ion-input-ios .error-text.sc-ion-input-ios{display:block}.ion-touched.ion-invalid.sc-ion-input-ios-h .input-bottom.sc-ion-input-ios .helper-text.sc-ion-input-ios{display:none}.input-bottom.sc-ion-input-ios .counter.sc-ion-input-ios{-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.has-focus.sc-ion-input-ios-h input.sc-ion-input-ios{caret-color:var(--highlight-color)}.label-text-wrapper.sc-ion-input-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.skip-label-transition.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transition:none;transition:none}.label-text.sc-ion-input-ios,.sc-ion-input-ios-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-input-ios,.input-outline-notch-hidden.sc-ion-input-ios{display:none}.input-wrapper.sc-ion-input-ios input.sc-ion-input-ios{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.input-label-placement-start.sc-ion-input-ios-h .input-control.sc-ion-input-ios{-ms-flex-direction:row;flex-direction:row}.input-label-placement-end.sc-ion-input-ios-h .input-control.sc-ion-input-ios{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-fixed.sc-ion-input-ios-h .label-text.sc-ion-input-ios{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.input-label-placement-stacked.sc-ion-input-ios-h .input-control.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h .input-control.sc-ion-input-ios{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform-origin:left top;transform-origin:left top;max-width:100%;z-index:2}[dir=rtl].sc-ion-input-ios-h -no-combinator.input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .sc-ion-input-ios-h -no-combinator.input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl].input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl].sc-ion-input-ios-h -no-combinator.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .sc-ion-input-ios-h -no-combinator.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl].input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-ios-h:dir(rtl) .label-text-wrapper.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h:dir(rtl) .label-text-wrapper.sc-ion-input-ios{-webkit-transform-origin:right top;transform-origin:right top}}.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios{opacity:0}.has-focus.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios,.has-value.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios{opacity:1}.sc-ion-input-ios-h[disabled].sc-ion-input-ios-s>ion-input-password-toggle,.sc-ion-input-ios-h[disabled] .sc-ion-input-ios-s>ion-input-password-toggle,.sc-ion-input-ios-h[readonly].sc-ion-input-ios-s>ion-input-password-toggle,.sc-ion-input-ios-h[readonly] .sc-ion-input-ios-s>ion-input-password-toggle{visibility:hidden}.sc-ion-input-ios-h{--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--background:transparent;--color:initial;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);min-height:44px;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}.ion-color.sc-ion-input-ios-h{--highlight-color-focused:var(--ion-color-base)}.cloned-input.sc-ion-input-ios{top:0;bottom:0}.cloned-input.sc-ion-input-ios{inset-inline-start:0}.input-label-placement-floating.sc-ion-input-ios-h,.input-label-placement-stacked.sc-ion-input-ios-h{min-height:56px}.input-clear-icon.sc-ion-input-ios{width:30px;height:30px;color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.input-clear-icon.sc-ion-input-ios:focus{opacity:0.5}.ion-touched.ion-invalid.sc-ion-input-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-ios-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-ios{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:5px;padding-bottom:0;font-size:0.75rem}.input-bottom.sc-ion-input-ios .helper-text.sc-ion-input-ios{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.input-bottom.sc-ion-input-ios .counter.sc-ion-input-ios{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));-webkit-padding-start:16px;padding-inline-start:16px}.input-label-placement-start.sc-ion-input-ios-h .native-wrapper.sc-ion-input-ios,.input-label-placement-end.sc-ion-input-ios-h .native-wrapper.sc-ion-input-ios,.input-label-placement-fixed.sc-ion-input-ios-h .native-wrapper.sc-ion-input-ios{-ms-flex:1 1 0px;flex:1 1 0}.input-label-placement-start.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.input-label-placement-end.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}.input-label-placement-fixed.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.label-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.label-text-wrapper.sc-ion-input-ios{min-width:0}.sc-ion-input-ios-s>[slot=start]:last-of-type{-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}.sc-ion-input-ios-s>[slot=end]:first-of-type{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}.sc-ion-input-ios-h{--border-width:0.55px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--highlight-height:0px;font-size:inherit}.input-clear-icon.sc-ion-input-ios ion-icon.sc-ion-input-ios{font-size:18px}.input-disabled.sc-ion-input-ios-h{opacity:0.3}.sc-ion-input-ios-s>ion-button[slot=start].button-has-icon-only,.sc-ion-input-ios-s>ion-button[slot=end].button-has-icon-only{--border-radius:50%;--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;aspect-ratio:1}`;
20
19
 
@@ -584,27 +583,19 @@ const Input = class {
584
583
  'input-clear-button-pressed': this.isClearButtonPressed,
585
584
  }, onPointerDown: this.clearButtonPressController.onPointerDown, onPointerCancel: this.clearButtonPressController.release, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: this.inputClearIcon })));
586
585
  }
587
- /**
588
- * The ionic theme keeps the label above a field box that wraps the slots and
589
- * the input, so the label can size independently of the slotted content.
590
- */
591
- renderIonicField() {
592
- return [
593
- this.renderLabel(),
594
- h("div", { key: "inner", class: "input-wrapper-inner" }, h("div", { key: "outline", class: "input-outline" }), this.renderStartContainer(), h("div", { key: "control", class: "input-control" }, h("div", { class: "native-wrapper", onClick: this.onLabelClick }, this.renderNativeInput())), this.renderEndContainer()),
595
- ];
596
- }
597
- /**
598
- * The ios and md themes nest the label alongside the input so a floating
599
- * label can escape the control and clear the start and end slots.
600
- */
601
586
  renderStartContainer() {
602
587
  return (h("div", { key: "start", class: "input-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { name: "start" })));
603
588
  }
604
589
  renderEndContainer() {
605
590
  return (h("div", { key: "end", class: "input-end" }, this.renderClearButton(), h("slot", { name: "end" })));
606
591
  }
607
- renderNativeField() {
592
+ /**
593
+ * Every theme renders the same label and control structure, aside from the md
594
+ * outline container below. The label is nested alongside the input so the ios
595
+ * and md floating label can escape the control and clear the start and end
596
+ * slots. The ionic theme lifts it above the field with grid instead.
597
+ */
598
+ renderField() {
608
599
  const hasOutlineFill = getIonTheme(this) === 'md' && this.getFill() === 'outline';
609
600
  return [
610
601
  hasOutlineFill && this.renderOutlineContainer(),
@@ -626,16 +617,9 @@ const Input = class {
626
617
  if (this.clearInputIcon != null) {
627
618
  return this.clearInputIcon;
628
619
  }
629
- // Determine the theme and map to default icons
620
+ // Determine the theme and map to the default icon
630
621
  const theme = getIonTheme(this);
631
- const defaultIcons = {
632
- ios: closeCircle,
633
- ionic: xSvg,
634
- md: closeSharp,
635
- };
636
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
637
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
638
- // Return the configured input clear icon or the default icon
622
+ const defaultIcon = theme === 'ios' ? closeCircle : closeSharp;
639
623
  return config.get('inputClearIcon', defaultIcon);
640
624
  }
641
625
  render() {
@@ -654,7 +638,7 @@ const Input = class {
654
638
  * the input has a value or is focused.
655
639
  */
656
640
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
657
- return (h(Host, { key: '5f43fb688b16cf37221db78eeedbf4b337a51d65', class: createColorClasses(this.color, {
641
+ return (h(Host, { key: '82d13bcc33e5817aa3afcc0c752cdca87301b1c7', class: createColorClasses(this.color, {
658
642
  [theme]: true,
659
643
  'has-value': hasValue,
660
644
  'has-focus': hasFocus,
@@ -667,7 +651,7 @@ const Input = class {
667
651
  'in-item-color': hostContext('ion-item.ion-color', this.el),
668
652
  'input-disabled': disabled,
669
653
  'input-readonly': readonly,
670
- }) }, h("label", { key: '211acead7fe50527b472ebddddca5ecc72ce1ec9', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, theme === 'ionic' ? this.renderIonicField() : this.renderNativeField(), shouldRenderHighlight && h("div", { key: 'b47126f58c61d673ec1c970f1d166284e45b5a9b', class: "input-highlight" })), this.renderBottomContent()));
654
+ }) }, h("label", { key: '53d8b948776361505a9bc47a4a2e8544d05f6856', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderField(), shouldRenderHighlight && h("div", { key: 'f4c81c4927a685d1474bb4510ad25eb51f77cd99', class: "input-highlight" })), this.renderBottomContent()));
671
655
  }
672
656
  get el() { return getElement(this); }
673
657
  static get watchers() { return {
@@ -2,10 +2,9 @@
2
2
  * (C) Ionic http://ionicframework.com - MIT License
3
3
  */
4
4
  import { r as registerInstance, i as forceUpdate, e as config, h, d as Host, g as getElement, c as createEvent } from './index-jsOqXOKf.js';
5
- import { c as caretRightSvg } from './caret-right-BYSs-jZz.js';
6
5
  import { b as inheritAttributes, r as raf } from './helpers-DTqW6MzS.js';
7
6
  import { h as hostContext, c as createColorClasses, o as openURL } from './theme-BUF_V-Kg.js';
8
- import { b as chevronForward } from './index-BqQ15K9a.js';
7
+ import { b as chevronForward } from './index-BkJpfpXI.js';
9
8
  import { c as getIonTheme, b as getIonMode } from './ionic-global-oK2heABF.js';
10
9
  import './focus-visible-vXpMhGrs.js';
11
10
  import './dir-Dojwmvde.js';
@@ -235,29 +234,25 @@ const Item = class {
235
234
  const controls = this.el.querySelectorAll('ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled]), ion-input:not([disabled]), ion-textarea:not([disabled])');
236
235
  return controls[0];
237
236
  }
237
+ /**
238
+ * Get the icon to use for the detail icon.
239
+ * If an icon is set on the component, use that.
240
+ * Otherwise, use the icon set in the config.
241
+ * If no icon is set in the config, use the default icon.
242
+ */
238
243
  get itemDetailIcon() {
239
244
  // Return the icon if it is explicitly set
240
245
  if (this.detailIcon != null) {
241
246
  return this.detailIcon;
242
247
  }
243
- // Determine the theme and map to default icons
244
- const theme = getIonTheme(this);
245
- const defaultIcons = {
246
- ios: chevronForward,
247
- ionic: caretRightSvg,
248
- md: chevronForward,
249
- };
250
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
251
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
252
- // Return the configured item detail icon or the default icon
253
- return config.get('itemDetailIcon', defaultIcon);
248
+ return config.get('itemDetailIcon', chevronForward);
254
249
  }
255
250
  /**
256
251
  * The icon should be flipped when the app is RTL and
257
252
  * the icon is a variation of chevron.
258
253
  */
259
254
  get shouldFlipIcon() {
260
- return this.itemDetailIcon === chevronForward || this.itemDetailIcon === caretRightSvg;
255
+ return this.itemDetailIcon === chevronForward;
261
256
  }
262
257
  render() {
263
258
  const { detail, download, labelColorStyles, lines, disabled, href, itemDetailIcon, shouldFlipIcon, rel, target, routerAnimation, routerDirection, inheritedAriaAttributes, multipleInputs, } = this;
@@ -336,7 +331,7 @@ const Item = class {
336
331
  * multi-input item, and in a clickable item, which is a second tab stop.
337
332
  */
338
333
  const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
339
- return (h(Host, { key: 'e303a3416c411185a0990ec8dcb1b1479eb236e8', "aria-disabled": ariaDisabled, class: {
334
+ return (h(Host, { key: '94668203071ec29cbcd4a435cded154d9a6f44e1', "aria-disabled": ariaDisabled, class: {
340
335
  ...childStyles,
341
336
  ...labelColorStyles,
342
337
  ...createColorClasses(this.color, {
@@ -353,7 +348,7 @@ const Item = class {
353
348
  'ion-focusable': this.focusable,
354
349
  'item-rtl': document.dir === 'rtl',
355
350
  }),
356
- }, role: inList ? 'listitem' : null }, h(TagType, { key: '551e095097f4c241aa0bb0d2aceb0bf4777563b2', ...attrs, ...inheritedAriaAttributes, class: "item-native", part: "native", disabled: disabled, ...clickFn }, h("slot", { key: '8a602938537caaebaad7d72aa3e8d5a4d3a12290', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: 'c82030fdec973d347bc56ae25bb71f6c76173b60', class: "item-inner", part: "inner" }, h("div", { key: '01db0987d735ce734f1edfcd7ee8164e441c840e', class: "input-wrapper", part: "container" }, h("slot", { key: '87e073b45610277443733f8f150d0adf26e6bf86', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: '4446a01b2556284a0d8dfb1c209bec1b064a2341', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: '09196aa21716c854cbbd7c5aeefff2bfb859746e', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: '3408c7ffac92c84ad99a9d71f8c26b98583010a0' }))));
351
+ }, role: inList ? 'listitem' : null }, h(TagType, { key: '5d806a372a58368735fa9ec5d7a91fb9fb0177a1', ...attrs, ...inheritedAriaAttributes, class: "item-native", part: "native", disabled: disabled, ...clickFn }, h("slot", { key: 'f51ab92aa48af5e6061e4ce6054ce758913849e9', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '7f843e3fc8446f137c2ab8e3b9ec761816537f88', class: "item-inner", part: "inner" }, h("div", { key: '7427ac82b29335459ec3b9c8f07d8b92faee675e', class: "input-wrapper", part: "container" }, h("slot", { key: '99306e28323143b5e4b83f548fcbbe693684128b', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'c0da503cade4c5be74c1a06cbda6d381569b0819', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: 'a4422494c8715cf258655ccc1e1dd7ffd9cc13eb', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: '16aa4720ebfbdc1669cec2769780b4cfc8f775ed' }))));
357
352
  }
358
353
  get el() { return getElement(this); }
359
354
  static get watchers() { return {
@@ -9,8 +9,7 @@ import { b as getIonMode, a as isPlatform, c as getIonTheme, s as shouldUseClose
9
9
  import { p as isEndSide, i as inheritAriaAttributes, l as assert, e as clamp } from './helpers-DTqW6MzS.js';
10
10
  import { m as menuController } from './index-C2QkTAgc.js';
11
11
  import { h as hostContext, c as createColorClasses } from './theme-BUF_V-Kg.js';
12
- import { l as listSvg } from './list-Dhi5xtNS.js';
13
- import { u as menuSharp, v as menuOutline } from './index-BqQ15K9a.js';
12
+ import { u as menuOutline, v as menuSharp } from './index-BkJpfpXI.js';
14
13
  import './framework-delegate-DUQ69ajj.js';
15
14
  import './focus-visible-vXpMhGrs.js';
16
15
  import './dir-Dojwmvde.js';
@@ -750,17 +749,15 @@ const MenuButton = class {
750
749
  async visibilityChanged() {
751
750
  this.visible = await updateVisibility(this.menu);
752
751
  }
752
+ /**
753
+ * Get the icon to use for the menu icon.
754
+ * Use the icon set in the config.
755
+ * If no icon is set in the config, use the default icon.
756
+ */
753
757
  get menuIcon() {
754
- // Determine the theme and map to default icons
758
+ // Determine the theme and map to the default icon
755
759
  const theme = getIonTheme(this);
756
- const defaultIcons = {
757
- ios: menuOutline,
758
- ionic: listSvg,
759
- md: menuSharp,
760
- };
761
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
762
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
763
- // Return the configured menu icon or the default icon
760
+ const defaultIcon = theme === 'ios' ? menuOutline : menuSharp;
764
761
  return config.get('menuIcon', defaultIcon);
765
762
  }
766
763
  render() {
@@ -771,7 +768,7 @@ const MenuButton = class {
771
768
  type: this.type,
772
769
  };
773
770
  const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
774
- return (h(Host, { key: '2129cb866a1acc620f005264340f77311535a0c5', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
771
+ return (h(Host, { key: '0593ed9f0867e28fbb9d79e381282eef93343df8', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
775
772
  [theme]: true,
776
773
  button: true, // ion-buttons target .button
777
774
  'menu-button-hidden': hidden,
@@ -780,7 +777,7 @@ const MenuButton = class {
780
777
  'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
781
778
  'ion-activatable': true,
782
779
  'ion-focusable': true,
783
- }) }, h("button", { key: '0dc5a571945fc4da0cc639087c8fff7a989caf5d', ...attrs, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: 'e7393a7e22fb8ef73ac9a5899979501f114dabf0', class: "button-inner" }, h("slot", { key: '78b6e51e63ae6d3525021000e94c7ec8ae06cc70' }, h("ion-icon", { key: '2dccf089945d8938799afe970f728ee94acc0d37', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: 'd39348251d4106aabbee9cd9bc4f176a64a090d3', type: "unbounded" }))));
780
+ }) }, h("button", { key: 'e61f71642db9b719eaf9b71e813fc271ea3b7343', ...attrs, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '8e5bb04a8e56dd02c7c8b2d10166f095ac40e461', class: "button-inner" }, h("slot", { key: '23d1bce767d0d389380fe30b3cd94e6f7c5c98f6' }, h("ion-icon", { key: 'abc88761fa11b5cfa853b58411e1ee8a4f632859', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: '77e328074a65be3b951cf7352aa7f9e82b7f1256', type: "unbounded" }))));
784
781
  }
785
782
  get el() { return getElement(this); }
786
783
  };
@@ -10,7 +10,7 @@ import { b as getIonMode, c as getIonTheme } from './ionic-global-oK2heABF.js';
10
10
  import { c as createAnimation } from './animation-DXpoXT3G.js';
11
11
  import { E as ENABLE_HTML_CONTENT_DEFAULT } from './config-DWCzVL3Y.js';
12
12
  import { s as sanitizeDOMString } from './index-B6qBfx1b.js';
13
- import { l as arrowDown, m as caretBackSharp } from './index-BqQ15K9a.js';
13
+ import { l as arrowDown, m as caretBackSharp } from './index-BkJpfpXI.js';
14
14
  import { S as SPINNERS } from './spinner-configs-D4RIp70E.js';
15
15
  import './focus-visible-vXpMhGrs.js';
16
16
  import './dir-Dojwmvde.js';
@@ -979,8 +979,6 @@ Refresher.style = {
979
979
  md: refresherMdCss()
980
980
  };
981
981
 
982
- const caretLeftFillSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0xNjgsNDhWMjA4YTgsOCwwLDAsMS0xMy42Niw1LjY2bC04MC04MGE4LDgsMCwwLDEsMC0xMS4zMmw4MC04MEE4LDgsMCwwLDEsMTY4LDQ4WiIvPjwvc3ZnPg==';
983
-
984
982
  const ionicRefresherContentCss = () => ``;
985
983
 
986
984
  const iosRefresherContentCss = () => ``;
@@ -1008,6 +1006,14 @@ const RefresherContent = class {
1008
1006
  this.refreshingSpinner = config.get('refreshingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'circular'));
1009
1007
  }
1010
1008
  }
1009
+ /**
1010
+ * Get the icon to use for the arrow icon.
1011
+ * Use the icon set in the config.
1012
+ * If no icon is set in the config, use the default icon.
1013
+ */
1014
+ get refresherArrowIcon() {
1015
+ return config.get('refresherArrowIcon', caretBackSharp);
1016
+ }
1011
1017
  renderPullingText() {
1012
1018
  const { customHTMLEnabled, pullingText } = this;
1013
1019
  if (customHTMLEnabled) {
@@ -1026,10 +1032,9 @@ const RefresherContent = class {
1026
1032
  const pullingIcon = this.pullingIcon;
1027
1033
  const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
1028
1034
  const theme = getIonTheme(this);
1029
- const arrowIcon = theme === 'ionic' ? caretLeftFillSvg : caretBackSharp;
1030
- return (h(Host, { key: '264b9869eb2357cc2acb3d2abde9538f2486bc60', class: {
1035
+ return (h(Host, { key: '79641f5cfcbae77afd812b4758984ecb191dda29', class: {
1031
1036
  [theme]: true,
1032
- } }, h("div", { key: '4b315df6bfeddc0e8d02435e4049970930858478', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: 'fc5debec928ae7d96ba64c814a35d6d372e60b02', class: "refresher-pulling-icon" }, h("div", { key: '1aa993350b3e9532f3e74a62865093d2e86f3884', class: "spinner-arrow-container" }, h("ion-spinner", { key: 'd8c39493a3b45f994a4f4da8b09662e148790c97', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: 'fbefee823b63e4904ee28b9d978c6822c392bdad', class: "arrow-container" }, h("ion-icon", { key: '2e9742a0d73ec59330d4204217f72cc6e3bae571', icon: arrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: '9ad2c55fafd0b284aae8e3be27b462cb520feae0', class: "refresher-pulling-icon" }, h("ion-icon", { key: 'e36ccd2de7d8109495bceead82979cb678285752', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '2990d364f999f4d018c26ed3dee237bc81a29129', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: 'eb6f9b8ee370f0c809ea3519968c1562ef72da5e', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '07d526cea46499a22b49d43371c3b3c4d3937689', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
1037
+ } }, h("div", { key: '3d6dedbcd0ad04d0a1cc2563a130ac8c53a34891', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '4dad78f16e6ee175bd55bd88e40ac33bbd492fc0', class: "refresher-pulling-icon" }, h("div", { key: '9d9b9a6c8f371e92aee43eca9d25768fe80aff8f', class: "spinner-arrow-container" }, h("ion-spinner", { key: '56c31feada2e1558f30b472a624e66cada7dd971', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: 'ddb580acffb25ed3cf1c3e793594e4a7c93323bf', class: "arrow-container" }, h("ion-icon", { key: '2ef17431b18d0475e645062b3b98435a1adc2d01', icon: this.refresherArrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'd400ef684a1a3783709b1842f096b657950d7700', class: "refresher-pulling-icon" }, h("ion-icon", { key: '82e1c30d5c7e94c4420518722a1ddca406739e69', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '27a6e09db376a00d704d3880d4075580d8ea4fba', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '712b68c41b714fb3cf3f6403db4250a16df570cd', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '051829b30e40c8eed2a121f2b11cae2fa240a147', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
1033
1038
  }
1034
1039
  get el() { return getElement(this); }
1035
1040
  };
@@ -2,8 +2,7 @@
2
2
  * (C) Ionic http://ionicframework.com - MIT License
3
3
  */
4
4
  import { r as registerInstance, e as config, h, d as Host, g as getElement, c as createEvent } from './index-jsOqXOKf.js';
5
- import { l as listSvg } from './list-Dhi5xtNS.js';
6
- import { n as reorderTwoSharp, o as reorderThreeOutline } from './index-BqQ15K9a.js';
5
+ import { n as reorderThreeOutline, o as reorderTwoSharp } from './index-BkJpfpXI.js';
7
6
  import { c as getIonTheme } from './ionic-global-oK2heABF.js';
8
7
  import { a as findClosestIonContent, g as getScrollElement } from './index-CpKLzrYn.js';
9
8
  import { r as raf } from './helpers-DTqW6MzS.js';
@@ -33,28 +32,21 @@ const Reorder = class {
33
32
  }
34
33
  /**
35
34
  * Get the icon to use for the handle icon.
36
- * Otherwise, use the icon set in the config.
35
+ * Use the icon set in the config.
37
36
  * If no icon is set in the config, use the default icon.
38
37
  */
39
38
  get reorderHandleIcon() {
40
- // Determine the theme and map to default icons
39
+ // Determine the theme and map to the default icon
41
40
  const theme = getIonTheme(this);
42
- const defaultIcons = {
43
- ios: reorderThreeOutline,
44
- ionic: listSvg,
45
- md: reorderTwoSharp,
46
- };
47
- // Get the default icon based on the theme, falling back to 'md' icon if necessary
48
- const defaultIcon = defaultIcons[theme] || defaultIcons.md;
49
- // Return the configured reorder handle icon or the default icon
41
+ const defaultIcon = theme === 'ios' ? reorderThreeOutline : reorderTwoSharp;
50
42
  return config.get('reorderHandleIcon', defaultIcon);
51
43
  }
52
44
  render() {
53
45
  const { reorderHandleIcon } = this;
54
46
  const theme = getIonTheme(this);
55
- return (h(Host, { key: 'b33c72a16a2ef9aef7b15d4907ba9b3ea9617954', class: {
47
+ return (h(Host, { key: 'ba25a7b0b5ece6693f2431f562d63738efe1f831', class: {
56
48
  [theme]: true,
57
- } }, h("slot", { key: '4a34e01ec73e0237b224cf9d8705cf4c13870d70' }, h("ion-icon", { key: '36e4d3c1926f1abb97422b44fcb28b0cc3507e1c', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
49
+ } }, h("slot", { key: 'b5afb5131bfb9bfce01a01d6b36e0a7408e14ec5' }, h("ion-icon", { key: '7e0d35640277a07b139d122939b0253a81dc785d', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
58
50
  }
59
51
  get el() { return getElement(this); }
60
52
  };