voyager-ionic-core 8.8.10 → 8.8.17

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 (247) hide show
  1. package/components/index.js +1 -1
  2. package/components/ion-accordion.js +1 -1
  3. package/components/ion-action-sheet.js +1 -1
  4. package/components/ion-alert.js +1 -1
  5. package/components/ion-app.js +1 -1
  6. package/components/ion-back-button.js +1 -1
  7. package/components/ion-breadcrumb.js +1 -1
  8. package/components/ion-button.js +1 -1
  9. package/components/ion-card.js +1 -1
  10. package/components/ion-checkbox.js +1 -1
  11. package/components/ion-content.js +1 -1
  12. package/components/ion-datetime-button.js +1 -1
  13. package/components/ion-datetime.js +1 -1
  14. package/components/ion-fab-button.js +1 -1
  15. package/components/ion-footer.js +1 -1
  16. package/components/ion-header.js +1 -1
  17. package/components/ion-img.js +1 -1
  18. package/components/ion-infinite-scroll.js +1 -1
  19. package/components/ion-input-otp.js +1 -1
  20. package/components/ion-input-password-toggle.js +1 -1
  21. package/components/ion-input.js +1 -1
  22. package/components/ion-item-options.js +1 -1
  23. package/components/ion-item-sliding.js +1 -1
  24. package/components/ion-item.js +1 -1
  25. package/components/ion-loading.js +1 -1
  26. package/components/ion-menu-button.js +1 -1
  27. package/components/ion-menu-toggle.js +1 -1
  28. package/components/ion-menu.js +1 -1
  29. package/components/ion-modal.js +1 -1
  30. package/components/ion-nav.js +1 -1
  31. package/components/ion-picker-column-option.js +1 -1
  32. package/components/ion-picker-column.js +1 -1
  33. package/components/ion-picker-legacy-column.js +1 -1
  34. package/components/ion-picker-legacy.js +1 -1
  35. package/components/ion-picker.js +1 -1
  36. package/components/ion-popover.js +1 -1
  37. package/components/ion-progress-bar.js +1 -1
  38. package/components/ion-radio-group.js +1 -1
  39. package/components/ion-radio.js +1 -1
  40. package/components/ion-range.js +1 -1
  41. package/components/ion-refresher-content.js +1 -1
  42. package/components/ion-refresher.js +1 -1
  43. package/components/ion-reorder-group.js +1 -1
  44. package/components/ion-router-outlet.js +1 -1
  45. package/components/ion-router.js +1 -1
  46. package/components/ion-searchbar.js +1 -1
  47. package/components/ion-segment-button.js +1 -1
  48. package/components/ion-segment.js +1 -1
  49. package/components/ion-select-modal.js +1 -1
  50. package/components/ion-select-popover.js +1 -1
  51. package/components/ion-select.js +1 -1
  52. package/components/ion-tab-button.js +1 -1
  53. package/components/ion-tab.js +1 -1
  54. package/components/ion-textarea.js +1 -1
  55. package/components/ion-toast.js +1 -1
  56. package/components/ion-toggle.js +1 -1
  57. package/components/{p-CtukzcyX.js → p-A3O24YmY.js} +1 -1
  58. package/components/{p-CU5rbWAW.js → p-ABkNVeU9.js} +1 -1
  59. package/components/{p-BT_5jSqG.js → p-B-JJgYSG.js} +1 -1
  60. package/components/p-BB42Mlnr.js +4 -0
  61. package/components/{p-lE_JGpHD.js → p-BMI53wYL.js} +1 -1
  62. package/components/p-BkKAANMJ.js +4 -0
  63. package/components/p-BlIAuGv2.js +4 -0
  64. package/components/{p-Bth-EzJ0.js → p-Bnsn6KaP.js} +1 -1
  65. package/components/p-BsBCoGa-.js +4 -0
  66. package/components/{p-BnqQlm7c.js → p-CQGnMY3n.js} +1 -1
  67. package/components/{p-DNQI6d-L.js → p-C_hpsif8.js} +1 -1
  68. package/components/p-Cf2jSDS8.js +4 -0
  69. package/components/{p-C4t5ymfq.js → p-ChIZKXUu.js} +1 -1
  70. package/components/p-CkMSOsFF.js +4 -0
  71. package/components/p-CsNJ1ULL.js +4 -0
  72. package/components/{p-BsPelv04.js → p-CzCbeKys.js} +1 -1
  73. package/components/{p-BjfgFSSR.js → p-D-aHdMxW.js} +1 -1
  74. package/components/p-D0d8qTwj.js +4 -0
  75. package/components/{p-Baq1XyAy.js → p-D3xo7hqU.js} +1 -1
  76. package/components/{p-nQi4oKcG.js → p-DCnGU1fF.js} +1 -1
  77. package/components/p-DGZpx6KJ.js +4 -0
  78. package/components/p-DGvrK8dD.js +4 -0
  79. package/components/p-DHTSTb52.js +4 -0
  80. package/components/{p-BirPFsRD.js → p-DJZp0KTQ.js} +1 -1
  81. package/components/{p-ijF0iCrA.js → p-DRugphUN.js} +1 -1
  82. package/components/{p-0NRupjzW.js → p-DV5mPYQS.js} +1 -1
  83. package/components/{p-C1aScSTo.js → p-DWkAgceV.js} +1 -1
  84. package/components/{p-DDWp95gH.js → p-KEFO0w3i.js} +1 -1
  85. package/components/{p-Ciz1-FuE.js → p-Osve4qkc.js} +1 -1
  86. package/components/{p-dhLYXa7A.js → p-SLS1rDZM.js} +1 -1
  87. package/components/{p-D5Ubpm7D.js → p-VWbRkLT7.js} +1 -1
  88. package/components/{p-BTPfOxsU.js → p-aJ6PBUvj.js} +1 -1
  89. package/components/{p-DnL1c9_X.js → p-oD4kcBRX.js} +1 -1
  90. package/components/{p-CI3ncNZm.js → p-scxfI1Dd.js} +1 -1
  91. package/components/p-yzCsOZE2.js +4 -0
  92. package/dist/cjs/{data-DLTUw-KF.js → format-PxvGiOik.js} +8 -532
  93. package/dist/cjs/index.cjs.js +1 -1
  94. package/dist/cjs/ion-action-sheet.cjs.entry.js +1 -1
  95. package/dist/cjs/ion-alert.cjs.entry.js +1 -1
  96. package/dist/cjs/ion-button_2.cjs.entry.js +7 -3
  97. package/dist/cjs/ion-checkbox.cjs.entry.js +17 -7
  98. package/dist/cjs/ion-datetime-button.cjs.entry.js +17 -15
  99. package/dist/cjs/ion-datetime_3.cjs.entry.js +616 -75
  100. package/dist/cjs/ion-fab_3.cjs.entry.js +87 -9
  101. package/dist/cjs/ion-input-otp.cjs.entry.js +3 -3
  102. package/dist/cjs/ion-item_8.cjs.entry.js +84 -4
  103. package/dist/cjs/ion-loading.cjs.entry.js +1 -1
  104. package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
  105. package/dist/cjs/ion-modal.cjs.entry.js +35 -9
  106. package/dist/cjs/ion-popover.cjs.entry.js +1 -1
  107. package/dist/cjs/ion-radio_2.cjs.entry.js +16 -7
  108. package/dist/cjs/ion-refresher_2.cjs.entry.js +31 -4
  109. package/dist/cjs/ion-searchbar.cjs.entry.js +26 -5
  110. package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
  111. package/dist/cjs/ion-select_3.cjs.entry.js +5 -4
  112. package/dist/cjs/ion-tab_2.cjs.entry.js +20 -13
  113. package/dist/cjs/ion-toast.cjs.entry.js +1 -1
  114. package/dist/cjs/ion-toggle.cjs.entry.js +25 -6
  115. package/dist/cjs/ionic.cjs.js +1 -1
  116. package/dist/cjs/item-multiple-inputs-D-gyg57c.js +38 -0
  117. package/dist/cjs/loader.cjs.js +1 -1
  118. package/dist/cjs/{overlays-TbKsuC-K.js → overlays-DdtIYQUH.js} +24 -1
  119. package/dist/collection/components/button/button.js +7 -3
  120. package/dist/collection/components/checkbox/checkbox.ios.css +18 -0
  121. package/dist/collection/components/checkbox/checkbox.js +16 -7
  122. package/dist/collection/components/checkbox/checkbox.md.css +18 -0
  123. package/dist/collection/components/datetime/datetime.js +51 -6
  124. package/dist/collection/components/datetime-button/datetime-button.js +8 -7
  125. package/dist/collection/components/fab-button/fab-button.js +114 -10
  126. package/dist/collection/components/input-otp/input-otp.js +3 -3
  127. package/dist/collection/components/item/item.ios.css +11 -0
  128. package/dist/collection/components/item/item.js +85 -4
  129. package/dist/collection/components/item/item.md.css +11 -0
  130. package/dist/collection/components/modal/gestures/sheet.js +7 -0
  131. package/dist/collection/components/modal/gestures/swipe-to-close.js +7 -0
  132. package/dist/collection/components/modal/modal.ios.css +8 -0
  133. package/dist/collection/components/modal/modal.js +18 -6
  134. package/dist/collection/components/modal/modal.md.css +8 -0
  135. package/dist/collection/components/radio/radio.ios.css +11 -15
  136. package/dist/collection/components/radio/radio.js +15 -7
  137. package/dist/collection/components/radio/radio.md.css +11 -11
  138. package/dist/collection/components/refresher/refresher.js +31 -4
  139. package/dist/collection/components/searchbar/searchbar.js +26 -5
  140. package/dist/collection/components/select/select.js +4 -3
  141. package/dist/collection/components/tab/tab.js +20 -13
  142. package/dist/collection/components/toggle/toggle.ios.css +12 -4
  143. package/dist/collection/components/toggle/toggle.js +24 -6
  144. package/dist/collection/components/toggle/toggle.md.css +42 -5
  145. package/dist/collection/utils/forms/index.js +1 -0
  146. package/dist/collection/utils/forms/item-multiple-inputs.js +33 -0
  147. package/dist/collection/utils/overlays.js +24 -1
  148. package/dist/collection/utils/test/playwright/apply-keyboard-focus.js +25 -0
  149. package/dist/collection/utils/test/playwright/drag-element.js +15 -0
  150. package/dist/collection/utils/test/playwright/index.js +1 -0
  151. package/dist/docs.json +40 -1
  152. package/dist/esm/{data-DZI70dKr.js → format-CAmvpAez.js} +1 -524
  153. package/dist/esm/index.js +1 -1
  154. package/dist/esm/ion-action-sheet.entry.js +1 -1
  155. package/dist/esm/ion-alert.entry.js +1 -1
  156. package/dist/esm/ion-button_2.entry.js +7 -3
  157. package/dist/esm/ion-checkbox.entry.js +19 -9
  158. package/dist/esm/ion-datetime-button.entry.js +9 -7
  159. package/dist/esm/ion-datetime_3.entry.js +550 -9
  160. package/dist/esm/ion-fab_3.entry.js +89 -11
  161. package/dist/esm/ion-input-otp.entry.js +3 -3
  162. package/dist/esm/ion-item_8.entry.js +84 -4
  163. package/dist/esm/ion-loading.entry.js +1 -1
  164. package/dist/esm/ion-menu_3.entry.js +1 -1
  165. package/dist/esm/ion-modal.entry.js +35 -9
  166. package/dist/esm/ion-popover.entry.js +1 -1
  167. package/dist/esm/ion-radio_2.entry.js +17 -8
  168. package/dist/esm/ion-refresher_2.entry.js +31 -4
  169. package/dist/esm/ion-searchbar.entry.js +26 -5
  170. package/dist/esm/ion-select-modal.entry.js +1 -1
  171. package/dist/esm/ion-select_3.entry.js +5 -4
  172. package/dist/esm/ion-tab_2.entry.js +20 -13
  173. package/dist/esm/ion-toast.entry.js +1 -1
  174. package/dist/esm/ion-toggle.entry.js +27 -8
  175. package/dist/esm/ionic.js +1 -1
  176. package/dist/esm/item-multiple-inputs-DlNuqNJm.js +36 -0
  177. package/dist/esm/loader.js +1 -1
  178. package/dist/esm/{overlays-TbiM4mdr.js → overlays-Dg0q2_tJ.js} +25 -2
  179. package/dist/html.html-data.json +4 -0
  180. package/dist/ionic/index.esm.js +1 -1
  181. package/dist/ionic/ionic.esm.js +1 -1
  182. package/dist/ionic/{p-30bf9737.entry.js → p-0dc33652.entry.js} +1 -1
  183. package/dist/ionic/p-10e833ef.entry.js +4 -0
  184. package/dist/ionic/p-21eb76d5.entry.js +4 -0
  185. package/dist/ionic/{p-4dc1c33c.entry.js → p-2a05aa64.entry.js} +1 -1
  186. package/dist/ionic/p-2b204c59.entry.js +4 -0
  187. package/dist/ionic/p-2fa58e80.entry.js +4 -0
  188. package/dist/ionic/{p-94f2a736.entry.js → p-34586ead.entry.js} +1 -1
  189. package/dist/ionic/p-4654ae1c.entry.js +4 -0
  190. package/dist/ionic/{p-8d6fd502.entry.js → p-4745f534.entry.js} +1 -1
  191. package/dist/ionic/p-4ac4f3d6.entry.js +4 -0
  192. package/dist/ionic/p-5018dfc8.entry.js +4 -0
  193. package/dist/ionic/{p-00dbb17e.entry.js → p-5eb8e86d.entry.js} +1 -1
  194. package/dist/ionic/{p-e847a888.entry.js → p-65ebdf1b.entry.js} +1 -1
  195. package/dist/ionic/p-7c319341.entry.js +4 -0
  196. package/dist/ionic/p-829367ed.entry.js +4 -0
  197. package/dist/ionic/{p-aa5d6b8f.entry.js → p-9f9db3a2.entry.js} +1 -1
  198. package/dist/ionic/p-C0eMdTCW.js +4 -0
  199. package/dist/ionic/p-D-3ycHmd.js +4 -0
  200. package/dist/ionic/p-DqN5EA2O.js +4 -0
  201. package/dist/ionic/p-aaeedb6b.entry.js +4 -0
  202. package/dist/ionic/p-bfc9bb0f.entry.js +4 -0
  203. package/dist/ionic/p-c38b648e.entry.js +4 -0
  204. package/dist/ionic/{p-3a541154.entry.js → p-ca2ab74d.entry.js} +1 -1
  205. package/dist/ionic/p-d889ff6d.entry.js +4 -0
  206. package/dist/types/components/checkbox/checkbox.d.ts +1 -0
  207. package/dist/types/components/datetime/datetime.d.ts +8 -0
  208. package/dist/types/components/fab-button/fab-button.d.ts +15 -0
  209. package/dist/types/components/item/item.d.ts +19 -0
  210. package/dist/types/components/radio/radio.d.ts +1 -0
  211. package/dist/types/components/searchbar/searchbar.d.ts +1 -0
  212. package/dist/types/components/tab/tab.d.ts +1 -1
  213. package/dist/types/components/toggle/toggle.d.ts +1 -0
  214. package/dist/types/components.d.ts +15 -2
  215. package/dist/types/utils/forms/index.d.ts +1 -0
  216. package/dist/types/utils/forms/item-multiple-inputs.d.ts +13 -0
  217. package/dist/types/utils/test/playwright/apply-keyboard-focus.d.ts +16 -0
  218. package/dist/types/utils/test/playwright/index.d.ts +1 -0
  219. package/hydrate/index.js +411 -87
  220. package/hydrate/index.mjs +411 -87
  221. package/package.json +5 -5
  222. package/components/p-5bE_Wz4Y.js +0 -4
  223. package/components/p-B60hm8Qv.js +0 -4
  224. package/components/p-BAYYcg3o.js +0 -4
  225. package/components/p-BjoEPDW5.js +0 -4
  226. package/components/p-C2lKgrXx.js +0 -4
  227. package/components/p-D7bSXQD3.js +0 -4
  228. package/components/p-DIE4pXMl.js +0 -4
  229. package/components/p-W5nO8mX_.js +0 -4
  230. package/components/p-W9CZ2mWX.js +0 -4
  231. package/components/p-XlSIJDJ-.js +0 -4
  232. package/components/p-ryqmO0B-.js +0 -4
  233. package/dist/ionic/p-0d005398.entry.js +0 -4
  234. package/dist/ionic/p-1ae21e4c.entry.js +0 -4
  235. package/dist/ionic/p-2f55dc1a.entry.js +0 -4
  236. package/dist/ionic/p-3a126bca.entry.js +0 -4
  237. package/dist/ionic/p-3a7d1e91.entry.js +0 -4
  238. package/dist/ionic/p-81ea5652.entry.js +0 -4
  239. package/dist/ionic/p-8c8eee7d.entry.js +0 -4
  240. package/dist/ionic/p-9a65ac7f.entry.js +0 -4
  241. package/dist/ionic/p-DAAFkPFT.js +0 -4
  242. package/dist/ionic/p-a21add2f.entry.js +0 -4
  243. package/dist/ionic/p-e686695b.entry.js +0 -4
  244. package/dist/ionic/p-ec090e0a.entry.js +0 -4
  245. package/dist/ionic/p-fabcce6c.entry.js +0 -4
  246. package/dist/ionic/p-facfde02.entry.js +0 -4
  247. package/dist/ionic/p-xOfi7-Zn.js +0 -4
package/hydrate/index.js CHANGED
@@ -8402,7 +8402,30 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
8402
8402
  * to the overlay container.
8403
8403
  */
8404
8404
  if (overlay.keyboardClose && (document.activeElement === null || !overlay.el.contains(document.activeElement))) {
8405
- overlay.el.focus();
8405
+ /**
8406
+ * Some overlays (e.g. modal) put the dialog role and accessible label
8407
+ * on the `.ion-overlay-wrapper` instead of the host. Screen readers
8408
+ * need focus on the element with `role="dialog"` to properly announce
8409
+ * and navigate the dialog.
8410
+ *
8411
+ * We only target wrappers with `tabindex`, since `role="dialog"` alone
8412
+ * does not make an element focusable. If no focusable dialog wrapper
8413
+ * exists (e.g. picker-legacy), we fall back to the host.
8414
+ */
8415
+ const overlayWrapper = getElementRoot(overlay.el).querySelector('[role="dialog"][tabindex]');
8416
+ const focusTarget = overlayWrapper !== null && overlayWrapper !== void 0 ? overlayWrapper : overlay.el;
8417
+ /**
8418
+ * `preventScroll` keeps this a pure focus move so the viewport does not
8419
+ * jump when the wrapper is partially off-screen (e.g. a sheet modal).
8420
+ * Guard the options call so an older engine that mishandles it can never
8421
+ * reject present(); we fall back to a plain focus() in that case.
8422
+ */
8423
+ try {
8424
+ focusTarget.focus({ preventScroll: true });
8425
+ }
8426
+ catch (_c) {
8427
+ focusTarget.focus();
8428
+ }
8406
8429
  }
8407
8430
  /**
8408
8431
  * If this overlay was previously dismissed without being
@@ -11595,9 +11618,13 @@ class Button {
11595
11618
  const { formButtonEl } = this;
11596
11619
  /**
11597
11620
  * If the form already has a rendered form button
11598
- * then do not append a new one again.
11621
+ * then do not append a new one again. Sync the
11622
+ * disabled state and type if it changes after button
11623
+ * creation (e.g., runtime property updates).
11599
11624
  */
11600
11625
  if (formButtonEl !== null && formEl.contains(formButtonEl)) {
11626
+ formButtonEl.disabled = this.disabled;
11627
+ formButtonEl.type = this.type;
11601
11628
  return;
11602
11629
  }
11603
11630
  // Create a hidden native button inside of the form
@@ -11713,7 +11740,7 @@ class Button {
11713
11740
  {
11714
11741
  type !== 'button' && this.renderHiddenButton();
11715
11742
  }
11716
- return (hAsync(Host, { key: 'd148ed2332917f03fafd63dbbef10131df0ec5f0', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
11743
+ return (hAsync(Host, { key: '82c71b8cbf3bb51e443f4aa99c375bf5be6b8dc7', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
11717
11744
  [mode]: true,
11718
11745
  [buttonType]: true,
11719
11746
  [`${buttonType}-${expand}`]: expand !== undefined,
@@ -11728,7 +11755,7 @@ class Button {
11728
11755
  'button-disabled': disabled,
11729
11756
  'ion-activatable': true,
11730
11757
  'ion-focusable': true,
11731
- }) }, hAsync(TagType, Object.assign({ key: '9da73c530017d510839a224bc4d5315bd44f60ed' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), hAsync("span", { key: '9046184db918cc53e90796860c43d1dfb7d1f85c', class: "button-inner" }, hAsync("slot", { key: '9dd37ab124803e703567ddde4154c81ed1922be1', name: "icon-only", onSlotchange: this.slotChanged }), hAsync("slot", { key: '01713ecf19c68be05072ffcd00ed7ff2d76c4551', name: "start" }), hAsync("slot", { key: '121124874ba1357bc10ffaf4f7ed13803a02add9' }), hAsync("slot", { key: '09317cf5ced153fbb94d4ebba69db858f9dbe570', name: "end" })), mode === 'md' && hAsync("ion-ripple-effect", { key: '8bdd9d082f48582be903221b13b67095046cd9aa', type: this.rippleType }))));
11758
+ }) }, hAsync(TagType, Object.assign({ key: '53f4cb366bac796ab38f609e858bc1a55fce7641' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), hAsync("span", { key: '40e127fc11c889e77b8bf02e8714f0dea83bfce7', class: "button-inner" }, hAsync("slot", { key: 'e11c8c86d3f0894658a8999129425c9c111f5540', name: "icon-only", onSlotchange: this.slotChanged }), hAsync("slot", { key: '105ea9259ea17036359e6fe7eced8b267ab8e0f6', name: "start" }), hAsync("slot", { key: '0d7b0966e328a5b10b0562dacbd638dfd08d92af' }), hAsync("slot", { key: 'c542b40685802464d69f57ecc0a7c3465d24a417', name: "end" })), mode === 'md' && hAsync("ion-ripple-effect", { key: '46df4cbeb057b0a8daab92226121d8bbb8c0ee07', type: this.rippleType }))));
11732
11759
  }
11733
11760
  get el() { return getElement(this); }
11734
11761
  static get watchers() { return {
@@ -12235,6 +12262,25 @@ const isOptionSelected = (currentValue, compareValue, compareWith) => {
12235
12262
  }
12236
12263
  };
12237
12264
 
12265
+ /**
12266
+ * `item-multiple-inputs` is toggled on the item after its form controls render,
12267
+ * so a control whose focus styling depends on it needs to re-render when it flips.
12268
+ *
12269
+ * @internal
12270
+ * @param el The form control whose closest `ion-item` should be observed.
12271
+ * @param onChange Called whenever one of `classNames` is added or removed.
12272
+ * @param classNames The item classes the caller's rendering depends on. A caller
12273
+ * reading more than one must list them all, or changes to the rest are ignored.
12274
+ * @returns The observer to disconnect in `disconnectedCallback`, or `undefined`
12275
+ * if it could not be created.
12276
+ */
12277
+ const createItemMultipleInputsObserver = (el, onChange, classNames = ['item-multiple-inputs']) => {
12278
+ el.closest('ion-item');
12279
+ {
12280
+ return undefined;
12281
+ }
12282
+ };
12283
+
12238
12284
  /**
12239
12285
  * Checks if the form element is in an invalid state based on
12240
12286
  * Ionic validation classes.
@@ -12248,9 +12294,9 @@ const checkInvalidState = (el) => {
12248
12294
  return hasIonTouched && hasIonInvalid;
12249
12295
  };
12250
12296
 
12251
- const checkboxIosCss = () => `:host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}.checkbox-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:0.125rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.375rem, 55.836px);--checkmark-width:1.5px}:host(.checkbox-disabled){opacity:0.3}`;
12297
+ const checkboxIosCss = () => `:host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}:host(:focus){outline:none}.native-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.ion-focused) .native-wrapper::after{border-radius:50%;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2;inset-block-start:calc(50% - 36px / 2);inset-inline-start:calc(50% - 36px / 2)}.checkbox-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:0.125rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.375rem, 55.836px);--checkmark-width:1.5px}:host(.checkbox-disabled){opacity:0.3}`;
12252
12298
 
12253
- const checkboxMdCss = () => `:host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}.checkbox-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--checkmark-width:3;--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;-webkit-transition:stroke-dashoffset 90ms linear 90ms;transition:stroke-dashoffset 90ms linear 90ms}:host(.checkbox-disabled) .label-text-wrapper{opacity:0.38}:host(.checkbox-disabled) .native-wrapper{opacity:0.63}`;
12299
+ const checkboxMdCss = () => `:host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}:host(:focus){outline:none}.native-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.ion-focused) .native-wrapper::after{border-radius:50%;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2;inset-block-start:calc(50% - 36px / 2);inset-inline-start:calc(50% - 36px / 2)}.checkbox-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--checkmark-width:3;--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;-webkit-transition:stroke-dashoffset 90ms linear 90ms;transition:stroke-dashoffset 90ms linear 90ms}:host(.checkbox-disabled) .label-text-wrapper{opacity:0.38}:host(.checkbox-disabled) .native-wrapper{opacity:0.63}`;
12254
12300
 
12255
12301
  /**
12256
12302
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -12369,17 +12415,21 @@ class Checkbox {
12369
12415
  // Always set initial state
12370
12416
  this.isInvalid = checkInvalidState(el);
12371
12417
  this.hasLabelContent = this.el.textContent !== '';
12418
+ this.itemFocusObserver = createItemMultipleInputsObserver(el);
12372
12419
  }
12373
12420
  componentWillLoad() {
12374
12421
  this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
12375
12422
  this.hintTextId = this.getHintTextId();
12376
12423
  }
12377
12424
  disconnectedCallback() {
12378
- // Clean up validation observer to prevent memory leaks.
12379
12425
  if (this.validationObserver) {
12380
12426
  this.validationObserver.disconnect();
12381
12427
  this.validationObserver = undefined;
12382
12428
  }
12429
+ if (this.itemFocusObserver) {
12430
+ this.itemFocusObserver.disconnect();
12431
+ this.itemFocusObserver = undefined;
12432
+ }
12383
12433
  }
12384
12434
  /** @internal */
12385
12435
  async setFocus() {
@@ -12415,23 +12465,28 @@ class Checkbox {
12415
12465
  const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
12416
12466
  const mode = getIonMode$1(this);
12417
12467
  const path = getSVGPath(mode, indeterminate);
12468
+ const inItem = hostContext('ion-item', el);
12469
+ const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
12418
12470
  renderHiddenInput(true, el, name, checked ? value : '', disabled);
12419
12471
  // The host element must have a checkbox role to ensure proper VoiceOver
12420
12472
  // support in Safari for accessibility.
12421
- return (hAsync(Host, { key: '0da370f94c5cdf3b08bc9008395558334a300f35', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
12473
+ return (hAsync(Host, { key: '6de0a71ffc45e65a4cf5ab0a1216f3ccd159d8de', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
12422
12474
  [mode]: true,
12423
- 'in-item': hostContext('ion-item', el),
12475
+ 'in-item': inItem,
12424
12476
  'checkbox-checked': checked,
12425
12477
  'checkbox-disabled': disabled,
12426
12478
  'checkbox-indeterminate': indeterminate,
12427
12479
  interactive: true,
12480
+ // A single-input item has the input cover and draws the indicator itself.
12481
+ // A multi-input item has no cover, so each control draws its own.
12482
+ 'ion-focusable': !inItem || inMultipleInputsItem,
12428
12483
  [`checkbox-justify-${justify}`]: justify !== undefined,
12429
12484
  [`checkbox-alignment-${alignment}`]: alignment !== undefined,
12430
12485
  [`checkbox-label-placement-${labelPlacement}`]: true,
12431
- }) }, hAsync("label", { key: '991f1763356671230af119a5fbdc22d0a39974e7', class: "checkbox-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '982f8a7f84d013b272b17607936355d2b6c251f4', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), hAsync("div", { key: 'c8f9e8baa20ac68e69fd3c6fcf0e7a26a1084d83', class: {
12486
+ }) }, hAsync("label", { key: 'acca2f5b0a37aa70930b2f74ff4857939b2be2b0', class: "checkbox-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: 'f46e409383e9d3ffc3daae8e7cd4159427d4c8fe', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), hAsync("div", { key: '69d8bf21c781cd9b1f56ceae40ff7911e6f5adfe', class: {
12432
12487
  'label-text-wrapper': true,
12433
12488
  'label-text-wrapper-hidden': !this.hasLabelContent,
12434
- }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '6018205e0a73dec826c7881d687f1c2ca8dcb0ab' }), this.renderHintText()), hAsync("div", { key: '57530b9d6ff59ee7ab98f960cd65d66ee87cfd1d', class: "native-wrapper" }, hAsync("svg", { key: '63d719154ff44459e9ca448e3f5d7de94d9ab248', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
12489
+ }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '3c444ab897456c522588fc6cee616030f16b0586' }), this.renderHintText()), hAsync("div", { key: '0a18dfe7a68a8eec08ce8764bd2c8a59c4a38802', class: "native-wrapper" }, hAsync("svg", { key: '56b298b54ebc88a429a9dd67b8dabd7063759b3a', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
12435
12490
  }
12436
12491
  getSVGPath(mode, indeterminate) {
12437
12492
  let path = indeterminate ? (hAsync("path", { d: "M6 12L18 12", part: "mark" })) : (hAsync("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
@@ -15818,10 +15873,11 @@ class Datetime {
15818
15873
  return;
15819
15874
  }
15820
15875
  const left = nextMonth.offsetWidth * 2;
15876
+ const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
15821
15877
  calendarBodyRef.scrollTo({
15822
15878
  top: 0,
15823
15879
  left: left * (isRTL$1(this.el) ? -1 : 1),
15824
- behavior: 'smooth',
15880
+ behavior: scrollMode,
15825
15881
  });
15826
15882
  };
15827
15883
  this.prevMonth = () => {
@@ -15834,10 +15890,11 @@ class Datetime {
15834
15890
  return;
15835
15891
  }
15836
15892
  const left = prevMonth.offsetWidth * 2;
15893
+ const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
15837
15894
  calendarBodyRef.scrollTo({
15838
15895
  top: 0,
15839
15896
  left: left * (isRTL$1(this.el) ? 1 : -1),
15840
- behavior: 'smooth',
15897
+ behavior: scrollMode,
15841
15898
  });
15842
15899
  };
15843
15900
  this.toggleMonthAndYearView = () => {
@@ -15952,6 +16009,16 @@ class Datetime {
15952
16009
  this.closeParentOverlay(CANCEL_ROLE);
15953
16010
  }
15954
16011
  }
16012
+ /**
16013
+ * Returns the default parts the datetime falls back to when no value is set:
16014
+ * today's date and time snapped to the closest value allowed by the
16015
+ * component's constraints (`min`, `max`, and the `*Values` props).
16016
+ *
16017
+ * @internal
16018
+ */
16019
+ async getDefaultPart() {
16020
+ return this.defaultParts;
16021
+ }
15955
16022
  get isCalendarPicker() {
15956
16023
  const { presentation } = this;
15957
16024
  return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
@@ -16364,7 +16431,10 @@ class Datetime {
16364
16431
  const activePart = this.getActivePartsWithFallback();
16365
16432
  return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
16366
16433
  this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
16367
- this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
16434
+ // Month wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
16435
+ if (!this.multiple) {
16436
+ this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
16437
+ }
16368
16438
  ev.stopPropagation();
16369
16439
  } }, months.map((month) => (hAsync("ion-picker-column-option", { part: month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: month.value, disabled: month.disabled, value: month.value }, month.text)))));
16370
16440
  }
@@ -16376,7 +16446,10 @@ class Datetime {
16376
16446
  const activePart = this.getActivePartsWithFallback();
16377
16447
  return (hAsync("ion-picker-column", { part: WHEEL_PART, "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
16378
16448
  this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
16379
- this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
16449
+ // Year wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
16450
+ if (!this.multiple) {
16451
+ this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
16452
+ }
16380
16453
  ev.stopPropagation();
16381
16454
  } }, years.map((year) => (hAsync("ion-picker-column-option", { part: year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: year.value, disabled: year.disabled, value: year.value }, year.text)))));
16382
16455
  }
@@ -16773,7 +16846,7 @@ class Datetime {
16773
16846
  const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
16774
16847
  const hasWheelVariant = hasDatePresentation && preferWheel;
16775
16848
  renderHiddenInput(true, el, name, formatValue(value), disabled);
16776
- return (hAsync(Host, { key: '323c8c2327088f00934b8c93c3306538cb9b5677', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
16849
+ return (hAsync(Host, { key: '5e0b83cb88a87945eaae2f9402751819b75452ee', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
16777
16850
  [mode]: true,
16778
16851
  ['datetime-readonly']: readonly,
16779
16852
  ['datetime-disabled']: disabled,
@@ -16783,7 +16856,7 @@ class Datetime {
16783
16856
  [`datetime-size-${size}`]: true,
16784
16857
  [`datetime-prefer-wheel`]: hasWheelVariant,
16785
16858
  [`datetime-grid`]: isGridStyle,
16786
- })) }, hAsync("div", { key: '1e0855c8909bc3f1e48a21ad68159fa782060691', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
16859
+ })) }, hAsync("div", { key: '9f9ba72e9879525961b00abe342a7891492ca0ff', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
16787
16860
  }
16788
16861
  get el() { return getElement(this); }
16789
16862
  static get watchers() { return {
@@ -16867,7 +16940,8 @@ class Datetime {
16867
16940
  "forceRenderDate": [32],
16868
16941
  "confirm": [64],
16869
16942
  "reset": [64],
16870
- "cancel": [64]
16943
+ "cancel": [64],
16944
+ "getDefaultPart": [64]
16871
16945
  },
16872
16946
  "$listeners$": undefined,
16873
16947
  "$lazyBundleId$": "-",
@@ -16930,7 +17004,7 @@ class DatetimeButton {
16930
17004
  * ion-datetime and then format it according
16931
17005
  * to the locale specified on ion-datetime.
16932
17006
  */
16933
- this.setDateTimeText = () => {
17007
+ this.setDateTimeText = async () => {
16934
17008
  var _a, _b, _c, _d, _e;
16935
17009
  const { datetimeEl, datetimePresentation } = this;
16936
17010
  if (!datetimeEl) {
@@ -16939,10 +17013,12 @@ class DatetimeButton {
16939
17013
  const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
16940
17014
  const parsedValues = this.getParsedDateValues(value);
16941
17015
  /**
16942
- * Both ion-datetime and ion-datetime-button default
16943
- * to today's date and time if no value is set.
17016
+ * Both ion-datetime and ion-datetime-button default to today's date and
17017
+ * time if no value is set. We read the datetime's computed default so the
17018
+ * button respects the same constraints (min, max, minuteValues, etc.) that
17019
+ * the datetime applies to its own fallback, instead of using a raw "now".
16944
17020
  */
16945
- const parsedDatetimes = parseDate(parsedValues.length > 0 ? parsedValues : [getToday()]);
17021
+ const parsedDatetimes = parsedValues.length > 0 ? parseDate(parsedValues) : [await datetimeEl.getDefaultPart()];
16946
17022
  if (!parsedDatetimes) {
16947
17023
  return;
16948
17024
  }
@@ -17217,11 +17293,11 @@ class DatetimeButton {
17217
17293
  render() {
17218
17294
  const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
17219
17295
  const mode = getIonMode$1(this);
17220
- return (hAsync(Host, { key: '11d037e6ab061e5116842970760b04850b42f2c7', class: createColorClasses$1(color, {
17296
+ return (hAsync(Host, { key: 'c28e5e428111f18eaceb030dca8aba5579867eaa', class: createColorClasses$1(color, {
17221
17297
  [mode]: true,
17222
17298
  [`${selectedButton}-active`]: datetimeActive,
17223
17299
  ['datetime-button-disabled']: disabled,
17224
- }) }, dateText && (hAsync("button", { key: '08ecb62da0fcbf7466a1f2403276712a3ff17fbc', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, hAsync("slot", { key: '1c04853d4d23c0f1a594602bde44511c98355644', name: "date-target" }, dateText), mode === 'md' && hAsync("ion-ripple-effect", { key: '5fc566cd4bc885bcf983ce99e3dc65d7f485bf9b' }))), timeText && (hAsync("button", { key: 'c9c5c34ac338badf8659da22bea5829d62c51169', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, hAsync("slot", { key: '147a9d2069dbf737f6fc64787823d6d5af5aa653', name: "time-target" }, timeText), mode === 'md' && hAsync("ion-ripple-effect", { key: '70a5e25b75ed90ac6bba003468435f67aa9d8f0a' })))));
17300
+ }) }, dateText && (hAsync("button", { key: 'a08f41b3150ef7171d0f1d9b3d69b51be67b7b84', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, hAsync("slot", { key: '35ee68ca1cea59f03e1b59b72606e618141c8e1f', name: "date-target" }, dateText), mode === 'md' && hAsync("ion-ripple-effect", { key: '4be53227aaf0acd20e8ebbff9f645140e8a96f33' }))), timeText && (hAsync("button", { key: 'ab500f9b78f8c194180073eaf7325041adbd02f7', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, hAsync("slot", { key: '5822486dfdedba6c071a0f5233cc06f8321a1f5d', name: "time-target" }, timeText), mode === 'md' && hAsync("ion-ripple-effect", { key: '054a4acb811a98cc6d9bb6a3cf51232a1f09b0ea' })))));
17225
17301
  }
17226
17302
  get el() { return getElement(this); }
17227
17303
  static get style() { return {
@@ -17348,6 +17424,8 @@ class FabButton {
17348
17424
  this.ionFocus = createEvent(this, "ionFocus", 7);
17349
17425
  this.ionBlur = createEvent(this, "ionBlur", 7);
17350
17426
  this.fab = null;
17427
+ this.formButtonEl = null;
17428
+ this.formEl = null;
17351
17429
  this.inheritedAttributes = {};
17352
17430
  /**
17353
17431
  * If `true`, the fab button will be show a close icon.
@@ -17388,34 +17466,105 @@ class FabButton {
17388
17466
  this.onBlur = () => {
17389
17467
  this.ionBlur.emit();
17390
17468
  };
17391
- this.onClick = () => {
17392
- const { fab } = this;
17393
- if (!fab) {
17394
- return;
17469
+ this.onClick = (ev) => {
17470
+ const { el, fab } = this;
17471
+ if (this.type !== 'button' && hasShadowDom(el)) {
17472
+ this.submitForm(ev);
17473
+ }
17474
+ if (fab) {
17475
+ fab.toggle();
17395
17476
  }
17396
- fab.toggle();
17397
17477
  };
17398
17478
  }
17479
+ disabledChanged() {
17480
+ const { disabled } = this;
17481
+ if (this.formButtonEl) {
17482
+ this.formButtonEl.disabled = disabled;
17483
+ }
17484
+ }
17399
17485
  connectedCallback() {
17400
17486
  this.fab = this.el.closest('ion-fab');
17401
17487
  }
17488
+ /**
17489
+ * The native button rendered inside `ion-fab-button` is in the Shadow DOM and
17490
+ * does not participate in form submission, so a hidden native button is added
17491
+ * to the associated form and clicked instead.
17492
+ */
17493
+ renderHiddenButton() {
17494
+ const formEl = (this.formEl = this.findForm());
17495
+ if (formEl) {
17496
+ const { formButtonEl } = this;
17497
+ // Reuse the existing hidden button, syncing values that changed since it was created.
17498
+ if (formButtonEl !== null && formEl.contains(formButtonEl)) {
17499
+ formButtonEl.disabled = this.disabled;
17500
+ formButtonEl.type = this.type;
17501
+ return;
17502
+ }
17503
+ const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
17504
+ newFormButtonEl.type = this.type;
17505
+ newFormButtonEl.style.display = 'none';
17506
+ newFormButtonEl.disabled = this.disabled;
17507
+ formEl.appendChild(newFormButtonEl);
17508
+ }
17509
+ }
17510
+ // TODO(FW-7663): share the hidden button and form lookup with ion-button
17511
+ findForm() {
17512
+ const { form } = this;
17513
+ if (form instanceof HTMLFormElement) {
17514
+ return form;
17515
+ }
17516
+ if (typeof form === 'string') {
17517
+ const el = document.getElementById(form);
17518
+ if (el) {
17519
+ if (el instanceof HTMLFormElement) {
17520
+ return el;
17521
+ }
17522
+ else {
17523
+ printIonWarning(`[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is attached to a <form> element.`, this.el);
17524
+ return null;
17525
+ }
17526
+ }
17527
+ else {
17528
+ printIonWarning(`[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`, this.el);
17529
+ return null;
17530
+ }
17531
+ }
17532
+ if (form !== undefined) {
17533
+ printIonWarning(`[ion-fab-button] - The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`, this.el);
17534
+ return null;
17535
+ }
17536
+ return this.el.closest('form');
17537
+ }
17538
+ submitForm(ev) {
17539
+ if (this.formEl && this.formButtonEl) {
17540
+ ev.preventDefault();
17541
+ this.formButtonEl.click();
17542
+ }
17543
+ }
17402
17544
  componentWillLoad() {
17403
17545
  this.inheritedAttributes = inheritAriaAttributes(this.el);
17404
17546
  }
17405
17547
  render() {
17406
- const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
17548
+ const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes, type } = this;
17407
17549
  const inList = hostContext('ion-fab-list', el);
17408
17550
  const mode = getIonMode$1(this);
17409
17551
  const TagType = href === undefined ? 'button' : 'a';
17410
17552
  const attrs = TagType === 'button'
17411
- ? { type: this.type }
17553
+ ? { type }
17412
17554
  : {
17413
17555
  download: this.download,
17414
17556
  href,
17415
17557
  rel: this.rel,
17416
17558
  target: this.target,
17417
17559
  };
17418
- return (hAsync(Host, { key: '4eee204d20b0e2ffed49a88f6cb3e04b6697965c', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
17560
+ /**
17561
+ * The hidden button is created during render so that setting `type` or
17562
+ * `form` after the component loads still adds it to the form.
17563
+ */
17564
+ if (type !== 'button') {
17565
+ this.renderHiddenButton();
17566
+ }
17567
+ return (hAsync(Host, { key: '89e8f2564f12f8c1cd8509a40359202347948846', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
17419
17568
  [mode]: true,
17420
17569
  'fab-button-in-list': inList,
17421
17570
  'fab-button-translucent-in-list': inList && translucent,
@@ -17426,9 +17575,14 @@ class FabButton {
17426
17575
  'ion-activatable': true,
17427
17576
  'ion-focusable': true,
17428
17577
  [`fab-button-${size}`]: size !== undefined,
17429
- }) }, hAsync(TagType, Object.assign({ key: '914561622c0c6bd41453e828a7d8a39f924875ac' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), hAsync("ion-icon", { key: '2c8090742a64c62a79243667027a195cca9d5912', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), hAsync("span", { key: 'c3e55291e4c4d306d34a4b95dd2e727e87bdf39c', class: "button-inner" }, hAsync("slot", { key: 'f8e57f71d8f8878d9746cfece82f57f19ef9e988' })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'a5e94fa0bb9836072300617245ed0c1b4887bac6' }))));
17578
+ }) }, hAsync(TagType, Object.assign({ key: '9e2fd462316e1aec50f53fa1b7ad7f02fd399592' }, 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), hAsync("ion-icon", { key: 'c3bdb8614eb249297afc963810066658dc85efd6', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), hAsync("span", { key: 'a6a505b24d21cc716d2e3351ad4c380b95c768d7', class: "button-inner" }, hAsync("slot", { key: 'f44fc1e95533438ee3adc8cc5bdd9e1e85849fd6' })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'b7c7dc7fceb0bb5613239608225f040010b7b2bd' }))));
17430
17579
  }
17431
17580
  get el() { return getElement(this); }
17581
+ static get watchers() { return {
17582
+ "disabled": [{
17583
+ "disabledChanged": 0
17584
+ }]
17585
+ }; }
17432
17586
  static get style() { return {
17433
17587
  ios: fabButtonIosCss(),
17434
17588
  md: fabButtonMdCss()
@@ -17449,6 +17603,7 @@ class FabButton {
17449
17603
  "show": [4],
17450
17604
  "translucent": [4],
17451
17605
  "type": [1],
17606
+ "form": [1],
17452
17607
  "size": [1],
17453
17608
  "closeIcon": [1, "close-icon"]
17454
17609
  },
@@ -20434,7 +20589,7 @@ class InputOTP {
20434
20589
  const tabbableIndex = this.getTabbableIndex();
20435
20590
  const pattern = this.getPattern();
20436
20591
  const hasDescription = ((_b = (_a = el.querySelector('.input-otp-description')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== '';
20437
- return (hAsync(Host, { key: '5c1386ae6b8038ec33ca94fd818c9353b1b37f75', class: createColorClasses$1(color, {
20592
+ return (hAsync(Host, { key: 'ffeec6d07b5d3cd375b72d4c9f4fe755d80ac094', class: createColorClasses$1(color, {
20438
20593
  [mode]: true,
20439
20594
  'has-focus': hasFocus,
20440
20595
  [`input-otp-size-${size}`]: true,
@@ -20442,10 +20597,10 @@ class InputOTP {
20442
20597
  [`input-otp-fill-${fill}`]: true,
20443
20598
  'input-otp-disabled': disabled,
20444
20599
  'input-otp-readonly': readonly,
20445
- }) }, hAsync("div", Object.assign({ key: '9a19129688e55095f8386826c73ef3f9744becff', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && hAsync("div", { class: "input-otp-separator" }))))), hAsync("div", { key: '7853819c3610c4691191f1836b947bf4ec17939d', class: {
20600
+ }) }, hAsync("div", Object.assign({ key: 'f42471e4ed8054f07162a52b42a0ca49c3d57bb0', role: "group", "aria-label": "One-time password input", class: "input-otp-group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (hAsync(Fragment, null, hAsync("div", { class: "native-wrapper" }, hAsync("input", { class: "native-input", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && hAsync("div", { class: "input-otp-separator" }))))), hAsync("div", { key: 'b06461605b2404476b856785b7116e18b4dbaeaa', class: {
20446
20601
  'input-otp-description': true,
20447
20602
  'input-otp-description-hidden': !hasDescription,
20448
- } }, hAsync("slot", { key: 'f4674d47d3d3991f21a0a79321ebc323968071dc' }))));
20603
+ } }, hAsync("slot", { key: '5bf9e7dc365f6caf0d4b13ae26e5559cdbbd162c' }))));
20449
20604
  }
20450
20605
  get el() { return getElement(this); }
20451
20606
  static get watchers() { return {
@@ -20587,10 +20742,11 @@ class InputPasswordToggle {
20587
20742
  }; }
20588
20743
  }
20589
20744
 
20590
- const itemIosCss = () => `:host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--detail-icon-color:initial;--detail-icon-font-size:1.25em;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-color) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color) .item-native,:host(.ion-color) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-control-needs-pointer-cursor){cursor:pointer}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-right:var(--padding-end);padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}[dir=rtl] .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}@supports selector(:dir(rtl)){.item-native:dir(rtl){padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:var(--transition);transition:var(--transition);z-index:-1}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-left:var(--inner-padding-start);display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);-webkit-box-shadow:var(--inner-box-shadow);box-shadow:var(--inner-box-shadow);overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}[dir=rtl] .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}@supports selector(:dir(rtl)){.item-inner:dir(rtl){padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}}.item-detail-icon{-webkit-margin-start:calc(var(--inner-padding-end) / 2);margin-inline-start:calc(var(--inner-padding-end) / 2);-webkit-margin-end:-6px;margin-inline-end:-6px;color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){-ms-flex:1;flex:1;width:-webkit-min-content;width:-moz-min-content;width:min-content;max-width:100%}:host(.item-input){-ms-flex-align:center;align-items:center}.input-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;text-overflow:ellipsis;overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){-ms-flex-align:start;align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio){position:relative}:host(.item-textarea){-ms-flex-align:stretch;align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host{--min-height:44px;--transition:background-color 200ms linear, opacity 200ms linear;--padding-start:16px;--inner-padding-end:16px;--inner-border-width:0px 0px 0.55px 0px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:var(--ion-text-color, #000);--background-focused:var(--ion-text-color, #000);--background-hover:currentColor;--background-activated-opacity:.12;--background-focused-opacity:.15;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--color:var(--ion-item-color, var(--ion-text-color, #000));font-size:1rem}:host(.ion-activated){--transition:none}:host(.ion-color.ion-focused) .item-native::after{background:#000;opacity:0.15}:host(.ion-color.ion-activated) .item-native::after{background:#000;opacity:0.12}:host(.item-lines-full){--border-width:0px 0px 0.55px 0px}:host(.item-lines-inset){--inner-border-width:0px 0px 0.55px 0px}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0px}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0px}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:2px;margin-bottom:2px}::slotted(ion-icon[slot=start]),::slotted(ion-icon[slot=end]){margin-top:7px;margin-bottom:7px}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}::slotted(.button-small){--padding-top:1px;--padding-bottom:1px;--padding-start:.5em;--padding-end:.5em;min-height:24px;font-size:0.8125rem}::slotted(ion-avatar){width:36px;height:36px}::slotted(ion-thumbnail){--size:56px}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px;margin-bottom:8px}:host(.item-radio) ::slotted(ion-label),:host(.item-toggle) ::slotted(ion-label){-webkit-margin-start:0px;margin-inline-start:0px}::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}:host(.item-label-floating),:host(.item-label-stacked){--min-height:68px}`;
20745
+ const itemIosCss = () => `:host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--detail-icon-color:initial;--detail-icon-font-size:1.25em;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-color) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color) .item-native,:host(.ion-color) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-control-needs-pointer-cursor){cursor:pointer}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-right:var(--padding-end);padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}[dir=rtl] .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}@supports selector(:dir(rtl)){.item-native:dir(rtl){padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:var(--transition);transition:var(--transition);z-index:-1}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-left:var(--inner-padding-start);display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);-webkit-box-shadow:var(--inner-box-shadow);box-shadow:var(--inner-box-shadow);overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}[dir=rtl] .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}@supports selector(:dir(rtl)){.item-inner:dir(rtl){padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}}.item-detail-icon{-webkit-margin-start:calc(var(--inner-padding-end) / 2);margin-inline-start:calc(var(--inner-padding-end) / 2);-webkit-margin-end:-6px;margin-inline-end:-6px;color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){-ms-flex:1;flex:1;width:-webkit-min-content;width:-moz-min-content;width:min-content;max-width:100%}:host(.item-input){-ms-flex-align:center;align-items:center}.input-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;text-overflow:ellipsis;overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){-ms-flex-align:start;align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host(.item-focus-indicator-room) .input-wrapper{-webkit-margin-start:-12px;margin-inline-start:-12px;-webkit-margin-end:-12px;margin-inline-end:-12px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio){position:relative}:host(.item-textarea){-ms-flex-align:stretch;align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host{--min-height:44px;--transition:background-color 200ms linear, opacity 200ms linear;--padding-start:16px;--inner-padding-end:16px;--inner-border-width:0px 0px 0.55px 0px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:var(--ion-text-color, #000);--background-focused:var(--ion-text-color, #000);--background-hover:currentColor;--background-activated-opacity:.12;--background-focused-opacity:.15;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--color:var(--ion-item-color, var(--ion-text-color, #000));font-size:1rem}:host(.ion-activated){--transition:none}:host(.ion-color.ion-focused) .item-native::after{background:#000;opacity:0.15}:host(.ion-color.ion-activated) .item-native::after{background:#000;opacity:0.12}:host(.item-lines-full){--border-width:0px 0px 0.55px 0px}:host(.item-lines-inset){--inner-border-width:0px 0px 0.55px 0px}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0px}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0px}::slotted([slot=start]){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:2px;margin-bottom:2px}::slotted(ion-icon[slot=start]),::slotted(ion-icon[slot=end]){margin-top:7px;margin-bottom:7px}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}::slotted(.button-small){--padding-top:1px;--padding-bottom:1px;--padding-start:.5em;--padding-end:.5em;min-height:24px;font-size:0.8125rem}::slotted(ion-avatar){width:36px;height:36px}::slotted(ion-thumbnail){--size:56px}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px;margin-bottom:8px}:host(.item-radio) ::slotted(ion-label),:host(.item-toggle) ::slotted(ion-label){-webkit-margin-start:0px;margin-inline-start:0px}::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:10px;margin-bottom:10px}:host(.item-label-floating),:host(.item-label-stacked){--min-height:68px}`;
20591
20746
 
20592
- const itemMdCss = () => `:host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--detail-icon-color:initial;--detail-icon-font-size:1.25em;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-color) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color) .item-native,:host(.ion-color) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-control-needs-pointer-cursor){cursor:pointer}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-right:var(--padding-end);padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}[dir=rtl] .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}@supports selector(:dir(rtl)){.item-native:dir(rtl){padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:var(--transition);transition:var(--transition);z-index:-1}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-left:var(--inner-padding-start);display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);-webkit-box-shadow:var(--inner-box-shadow);box-shadow:var(--inner-box-shadow);overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}[dir=rtl] .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}@supports selector(:dir(rtl)){.item-inner:dir(rtl){padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}}.item-detail-icon{-webkit-margin-start:calc(var(--inner-padding-end) / 2);margin-inline-start:calc(var(--inner-padding-end) / 2);-webkit-margin-end:-6px;margin-inline-end:-6px;color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){-ms-flex:1;flex:1;width:-webkit-min-content;width:-moz-min-content;width:min-content;max-width:100%}:host(.item-input){-ms-flex-align:center;align-items:center}.input-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;text-overflow:ellipsis;overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){-ms-flex-align:start;align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio){position:relative}:host(.item-textarea){-ms-flex-align:stretch;align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host{--min-height:48px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--color:var(--ion-item-color, var(--ion-text-color, #000));--transition:opacity 15ms linear, background-color 15ms linear;--padding-start:16px;--inner-padding-end:16px;--inner-border-width:0 0 1px 0;font-size:1rem;font-weight:normal;text-transform:none}:host(.ion-color.ion-activated) .item-native::after{background:transparent}:host(.item-interactive){--border-width:0 0 1px 0;--inner-border-width:0}:host(.item-lines-full){--border-width:0 0 1px 0}:host(.item-lines-inset){--inner-border-width:0 0 1px 0}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0}:host(.item-multi-line) ::slotted([slot=start]),:host(.item-multi-line) ::slotted([slot=end]){margin-top:16px;margin-bottom:16px;-ms-flex-item-align:start;align-self:flex-start}::slotted([slot=start]){-webkit-margin-end:16px;margin-inline-end:16px}::slotted([slot=end]){-webkit-margin-start:16px;margin-inline-start:16px}::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);font-size:1.5em}:host(.ion-color) ::slotted(ion-icon){color:var(--ion-color-contrast)}::slotted(ion-icon[slot]){margin-top:12px;margin-bottom:12px}::slotted(ion-icon[slot=start]){-webkit-margin-end:32px;margin-inline-end:32px}::slotted(ion-icon[slot=end]){-webkit-margin-start:16px;margin-inline-start:16px}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}::slotted(ion-note){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-ms-flex-item-align:start;align-self:flex-start;font-size:0.6875rem}::slotted(ion-note[slot]){padding-left:0;padding-right:0;padding-top:18px;padding-bottom:10px}::slotted(ion-avatar){width:40px;height:40px}::slotted(ion-thumbnail){--size:56px}::slotted(ion-avatar),::slotted(ion-thumbnail){margin-top:8px;margin-bottom:8px}::slotted(ion-avatar[slot=start]),::slotted(ion-thumbnail[slot=start]){-webkit-margin-end:16px;margin-inline-end:16px}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){-webkit-margin-start:16px;margin-inline-start:16px}::slotted(ion-label){margin-left:0;margin-right:0;margin-top:10px;margin-bottom:10px}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}:host(.item-toggle) ::slotted(ion-label),:host(.item-radio) ::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0}::slotted(.button-small){--padding-top:2px;--padding-bottom:2px;--padding-start:.6em;--padding-end:.6em;min-height:25px;font-size:0.75rem}:host(.item-label-floating),:host(.item-label-stacked){--min-height:55px}:host(.ion-focused:not(.ion-color)) ::slotted(.label-stacked),:host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),:host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),:host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating){color:var(--ion-color-primary, #0054e9)}`;
20747
+ const itemMdCss = () => `:host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--detail-icon-color:initial;--detail-icon-font-size:1.25em;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.ion-color) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color) .item-native,:host(.ion-color) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-control-needs-pointer-cursor){cursor:pointer}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-right:var(--padding-end);padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}[dir=rtl] .item-native{padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}@supports selector(:dir(rtl)){.item-native:dir(rtl){padding-right:calc(var(--padding-start) + var(--ion-safe-area-right, 0px));padding-left:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0;-webkit-transition:var(--transition);transition:var(--transition);z-index:-1}button,a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-left:var(--inner-padding-start);display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);-webkit-box-shadow:var(--inner-box-shadow);box-shadow:var(--inner-box-shadow);overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host-context([dir=rtl]) .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}[dir=rtl] .item-inner{padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}@supports selector(:dir(rtl)){.item-inner:dir(rtl){padding-right:var(--inner-padding-start);padding-left:calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end))}}.item-detail-icon{-webkit-margin-start:calc(var(--inner-padding-end) / 2);margin-inline-start:calc(var(--inner-padding-end) / 2);-webkit-margin-end:-6px;margin-inline-end:-6px;color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){-ms-flex:1;flex:1;width:-webkit-min-content;width:-moz-min-content;width:min-content;max-width:100%}:host(.item-input){-ms-flex-align:center;align-items:center}.input-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-item-align:stretch;align-self:stretch;text-overflow:ellipsis;overflow:inherit;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){-ms-flex-align:start;align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host(.item-focus-indicator-room) .input-wrapper{-webkit-margin-start:-12px;margin-inline-start:-12px;-webkit-margin-end:-12px;margin-inline-end:-12px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio){position:relative}:host(.item-textarea){-ms-flex-align:stretch;align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host{--min-height:48px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--color:var(--ion-item-color, var(--ion-text-color, #000));--transition:opacity 15ms linear, background-color 15ms linear;--padding-start:16px;--inner-padding-end:16px;--inner-border-width:0 0 1px 0;font-size:1rem;font-weight:normal;text-transform:none}:host(.ion-color.ion-activated) .item-native::after{background:transparent}:host(.item-interactive){--border-width:0 0 1px 0;--inner-border-width:0}:host(.item-lines-full){--border-width:0 0 1px 0}:host(.item-lines-inset){--inner-border-width:0 0 1px 0}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0}:host(.item-multi-line) ::slotted([slot=start]),:host(.item-multi-line) ::slotted([slot=end]){margin-top:16px;margin-bottom:16px;-ms-flex-item-align:start;align-self:flex-start}::slotted([slot=start]){-webkit-margin-end:16px;margin-inline-end:16px}::slotted([slot=end]){-webkit-margin-start:16px;margin-inline-start:16px}::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);font-size:1.5em}:host(.ion-color) ::slotted(ion-icon){color:var(--ion-color-contrast)}::slotted(ion-icon[slot]){margin-top:12px;margin-bottom:12px}::slotted(ion-icon[slot=start]){-webkit-margin-end:32px;margin-inline-end:32px}::slotted(ion-icon[slot=end]){-webkit-margin-start:16px;margin-inline-start:16px}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}::slotted(ion-note){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-ms-flex-item-align:start;align-self:flex-start;font-size:0.6875rem}::slotted(ion-note[slot]){padding-left:0;padding-right:0;padding-top:18px;padding-bottom:10px}::slotted(ion-avatar){width:40px;height:40px}::slotted(ion-thumbnail){--size:56px}::slotted(ion-avatar),::slotted(ion-thumbnail){margin-top:8px;margin-bottom:8px}::slotted(ion-avatar[slot=start]),::slotted(ion-thumbnail[slot=start]){-webkit-margin-end:16px;margin-inline-end:16px}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){-webkit-margin-start:16px;margin-inline-start:16px}::slotted(ion-label){margin-left:0;margin-right:0;margin-top:10px;margin-bottom:10px}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}:host(.item-toggle) ::slotted(ion-label),:host(.item-radio) ::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0}::slotted(.button-small){--padding-top:2px;--padding-bottom:2px;--padding-start:.6em;--padding-end:.6em;min-height:25px;font-size:0.75rem}:host(.item-label-floating),:host(.item-label-stacked){--min-height:55px}:host(.ion-focused:not(.ion-color)) ::slotted(.label-stacked),:host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),:host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),:host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating){color:var(--ion-color-primary, #0054e9)}`;
20593
20748
 
20749
+ const INDICATOR_CONTROL_SELECTOR = 'ion-checkbox, ion-radio, ion-toggle';
20594
20750
  /**
20595
20751
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
20596
20752
  *
@@ -20609,9 +20765,11 @@ class Item {
20609
20765
  this.labelColorStyles = {};
20610
20766
  this.itemStyles = new Map();
20611
20767
  this.inheritedAriaAttributes = {};
20768
+ this.didLoad = false;
20612
20769
  this.multipleInputs = false;
20613
20770
  this.focusable = true;
20614
20771
  this.isInteractive = false;
20772
+ this.hasSlottedIndicatorControl = false;
20615
20773
  /**
20616
20774
  * If `true`, a button tag will be rendered and the item will be tappable.
20617
20775
  */
@@ -20637,6 +20795,7 @@ class Item {
20637
20795
  this.updateInteractivityOnSlotChange = () => {
20638
20796
  this.setIsInteractive();
20639
20797
  this.setMultipleInputs();
20798
+ this.setHasSlottedIndicatorControl();
20640
20799
  };
20641
20800
  }
20642
20801
  buttonChanged() {
@@ -20677,6 +20836,14 @@ class Item {
20677
20836
  }
20678
20837
  connectedCallback() {
20679
20838
  this.hasStartEl();
20839
+ /**
20840
+ * `componentDidLoad` doesn't run again when the item is moved, so re-arm the
20841
+ * observer and re-read the light DOM, which may have changed while detached.
20842
+ */
20843
+ if (this.didLoad) {
20844
+ this.watchForIndicatorControls();
20845
+ this.updateInteractivityOnSlotChange();
20846
+ }
20680
20847
  }
20681
20848
  componentWillLoad() {
20682
20849
  this.inheritedAriaAttributes = inheritAttributes$1(this.el, ['aria-label']);
@@ -20685,8 +20852,17 @@ class Item {
20685
20852
  raf(() => {
20686
20853
  this.setMultipleInputs();
20687
20854
  this.setIsInteractive();
20855
+ this.setHasSlottedIndicatorControl();
20688
20856
  this.focusable = this.isFocusable();
20689
20857
  });
20858
+ this.watchForIndicatorControls();
20859
+ this.didLoad = true;
20860
+ }
20861
+ disconnectedCallback() {
20862
+ if (this.indicatorControlObserver) {
20863
+ this.indicatorControlObserver.disconnect();
20864
+ this.indicatorControlObserver = undefined;
20865
+ }
20690
20866
  }
20691
20867
  totalNestedInputs() {
20692
20868
  // The following elements have a clickable cover that is relative to the entire item
@@ -20720,6 +20896,38 @@ class Item {
20720
20896
  const { covers, inputs, clickables } = this.totalNestedInputs();
20721
20897
  this.isInteractive = covers.length > 0 || inputs.length > 0 || clickables.length > 0;
20722
20898
  }
20899
+ /**
20900
+ * `slotchange` only fires for nodes assigned directly to a slot, so a control
20901
+ * inside a slotted wrapper (`<div><ion-toggle>`) never reaches
20902
+ * `updateInteractivityOnSlotChange`. The light DOM is observed instead.
20903
+ *
20904
+ * The callback runs the whole handler because a control below a wrapper can also
20905
+ * make the item multi-input, which is what decides whether the controls draw
20906
+ * their own indicator at all.
20907
+ *
20908
+ * `:host(:has())` would avoid the observer, but the `:has()` fallback in
20909
+ * `core.scss` is still open as FW-6106 and it's unreliable for slotted content
20910
+ * in Android WebView. Worth revisiting when FW-6106 closes.
20911
+ */
20912
+ watchForIndicatorControls() {
20913
+ {
20914
+ return;
20915
+ }
20916
+ }
20917
+ // These controls paint a focus indicator that overhangs their own bounds, and
20918
+ // only the default slot is clipped, so only a control there needs extra room.
20919
+ setHasSlottedIndicatorControl() {
20920
+ const controls = this.el.querySelectorAll(INDICATOR_CONTROL_SELECTOR);
20921
+ this.hasSlottedIndicatorControl = Array.from(controls).some((control) => {
20922
+ // The control isn't always a direct child, so walk up to the element the item
20923
+ // slots, which is the one carrying the slot name.
20924
+ let slotted = control;
20925
+ while (slotted !== null && slotted.parentElement !== this.el) {
20926
+ slotted = slotted.parentElement;
20927
+ }
20928
+ return slotted !== null && !slotted.getAttribute('slot');
20929
+ });
20930
+ }
20723
20931
  // If the item contains an input including a checkbox, datetime, select, or radio
20724
20932
  // then the item will have a clickable input cover that covers the item
20725
20933
  // that should get the hover, focused and activated states UNLESS it has multiple
@@ -20821,7 +21029,13 @@ class Item {
20821
21029
  * However, other form controls such as checkboxes and radios do.
20822
21030
  */
20823
21031
  const firstInteractiveNeedsPointerCursor = firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
20824
- return (hAsync(Host, { key: '3977491399280a2aa3f796f0549235f3dc8b5681', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses$1(this.color, {
21032
+ /**
21033
+ * A control in a single-input item defers its indicator to the item, so there's
21034
+ * nothing to clip and nothing to make room for. It draws its own indicator in a
21035
+ * multi-input item, and in a clickable item, which is a second tab stop.
21036
+ */
21037
+ const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
21038
+ return (hAsync(Host, { key: '0dc161ad7ac2fdedc5005015fceb34ed176010a6', "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses$1(this.color, {
20825
21039
  item: true,
20826
21040
  [mode]: true,
20827
21041
  'item-lines-default': lines === undefined,
@@ -20830,10 +21044,11 @@ class Item {
20830
21044
  'item-disabled': disabled,
20831
21045
  'in-list': inList,
20832
21046
  'item-multiple-inputs': this.multipleInputs,
21047
+ 'item-focus-indicator-room': slottedIndicatorNeedsRoom,
20833
21048
  'ion-activatable': canActivate,
20834
21049
  'ion-focusable': this.focusable,
20835
21050
  'item-rtl': document.dir === 'rtl',
20836
- })), role: inList ? 'listitem' : null }, hAsync(TagType, Object.assign({ key: '8aff72457004553e83d74a4dda2f9a6b8cf523d7' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), hAsync("slot", { key: 'aba9a0f2ad101be6598f364c83236ca3de437a04', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), hAsync("div", { key: '5e7851e49959e4ed114fcd51cb167db9bd8c0f00', class: "item-inner", part: "inner" }, hAsync("div", { key: 'eee6511845d8459450ca856819839d83cd507c0c', class: "input-wrapper", part: "container" }, hAsync("slot", { key: '76e13f86cd144951b1999eb333a2027b42cdf6e2', onSlotchange: this.updateInteractivityOnSlotChange })), hAsync("slot", { key: 'b264f7b4c367e7700a9a05343177abf7b17045d8', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (hAsync("ion-icon", { key: '66b930bdfebb55ea0b2e784a1c902eb6c64b2370', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && hAsync("ion-ripple-effect", { key: '06ab8e87917b545f3c221602b9b6d8004a1895ad' }))));
21051
+ })), role: inList ? 'listitem' : null }, hAsync(TagType, Object.assign({ key: 'd42583cf62133b2553de2e7a5357168640bb1834' }, attrs, inheritedAriaAttributes, { class: "item-native", part: "native", disabled: disabled }, clickFn), hAsync("slot", { key: 'bd805ce49946cd52280d1c4b370104ee2472f1e2', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), hAsync("div", { key: '0de589f9c5c13c31b6c8838566a7ad6f78f81028', class: "item-inner", part: "inner" }, hAsync("div", { key: 'faaf6a39e072fb352753c645736ab1f47c2d7d25', class: "input-wrapper", part: "container" }, hAsync("slot", { key: '70a34c31de29a0786a14b4a7d3156ba8d4d92eb4', onSlotchange: this.updateInteractivityOnSlotChange })), hAsync("slot", { key: 'c8e764b62c5c30f67750896741ca266b741d5999', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (hAsync("ion-icon", { key: 'af006856d8c4ed69174534261344215957cc751a', icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward }))), canActivate && mode === 'md' && hAsync("ion-ripple-effect", { key: 'e5e151bafedd38feb8f71a387a0059aa1e9e90de' }))));
20837
21052
  }
20838
21053
  get el() { return getElement(this); }
20839
21054
  static get watchers() { return {
@@ -20864,7 +21079,8 @@ class Item {
20864
21079
  "type": [1],
20865
21080
  "multipleInputs": [32],
20866
21081
  "focusable": [32],
20867
- "isInteractive": [32]
21082
+ "isInteractive": [32],
21083
+ "hasSlottedIndicatorControl": [32]
20868
21084
  },
20869
21085
  "$listeners$": [[0, "ionColor", "labelColorChanged"], [0, "ionStyle", "itemStyle"]],
20870
21086
  "$lazyBundleId$": "-",
@@ -24021,7 +24237,14 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onD
24021
24237
  return false;
24022
24238
  };
24023
24239
  const onStart = (detail) => {
24240
+ var _a;
24024
24241
  const { deltaY } = detail;
24242
+ /**
24243
+ * Firefox automatically selects the header text during drag
24244
+ * due to the focusable wrapper (tabindex="-1"). Remove any
24245
+ * selection that may have occurred.
24246
+ */
24247
+ (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
24025
24248
  /**
24026
24249
  * Get the initial scrollY value so
24027
24250
  * that we can correctly reset the scrollY
@@ -24908,6 +25131,13 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
24908
25131
  return true;
24909
25132
  };
24910
25133
  const onStart = (detail) => {
25134
+ var _a;
25135
+ /**
25136
+ * Firefox automatically selects the header text during drag
25137
+ * due to the focusable wrapper (tabindex="-1"). Remove any
25138
+ * selection that may have occurred.
25139
+ */
25140
+ (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
24911
25141
  /**
24912
25142
  * If canDismiss is anything other than `true`
24913
25143
  * then users should be able to swipe down
@@ -25510,9 +25740,9 @@ const clearSafeAreaOverrides = (hostEl) => {
25510
25740
  hostEl.style.removeProperty('--ion-safe-area-right');
25511
25741
  };
25512
25742
 
25513
- const modalIosCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet){--height:calc(100% - (var(--ion-modal-offset-top, 0px) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}`;
25743
+ const modalIosCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-wrapper{outline:none}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet){--height:calc(100% - (var(--ion-modal-offset-top, 0px) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}`;
25514
25744
 
25515
- const modalMdCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet){--height:calc(100% - (var(--ion-modal-offset-top, 0px) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}`;
25745
+ const modalMdCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-wrapper{outline:none}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet){--height:calc(100% - (var(--ion-modal-offset-top, 0px) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}`;
25516
25746
 
25517
25747
  // TODO(FW-2832): types
25518
25748
  /**
@@ -25696,9 +25926,15 @@ class Modal {
25696
25926
  * if it exists and is focusable, otherwise let the focus trap handle it.
25697
25927
  */
25698
25928
  this.onModalFocus = (ev) => {
25929
+ var _a;
25699
25930
  const { dragHandleEl, el } = this;
25700
- // Only handle focus if the modal itself was focused (not a child element)
25701
- if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
25931
+ /**
25932
+ * Shadow DOM focus is retargeted to the host, so `ev.target === el` is also
25933
+ * true when a shadow child (the dialog wrapper present() focuses) is focused.
25934
+ * shadowRoot's activeElement is null only when the host was focused directly,
25935
+ * so redirect to the handle only then and leave present()'s wrapper focus intact.
25936
+ */
25937
+ if (ev.target === el && ((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) == null && dragHandleEl && dragHandleEl.tabIndex !== -1) {
25702
25938
  dragHandleEl.focus();
25703
25939
  }
25704
25940
  };
@@ -26659,20 +26895,26 @@ class Modal {
26659
26895
  const isCardModal = presentingElement !== undefined && mode === 'ios';
26660
26896
  const isHandleCycle = handleBehavior === 'cycle';
26661
26897
  const isSheetModalWithHandle = isSheetModal && showHandle;
26662
- return (hAsync(Host, Object.assign({ key: 'ab93657f4a5b4c97168d292b398d975e4b5b4af4', "no-router": true,
26898
+ return (hAsync(Host, Object.assign({ key: 'bad33199a939bd1e289b3b3f936c676ba403224f', "no-router": true,
26663
26899
  // Allow the modal to be navigable when the handle is focusable
26664
26900
  tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
26665
26901
  zIndex: `${20000 + this.overlayIndex}`,
26666
- }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: '5ba6315c7c8c64fa04c62f85fd493da5275b2cbd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'a76c48d41c67f86c18a7481e980e6925e614f85d', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '3f6c61ba60b063592784d76a9594073b3bf210a9',
26902
+ }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: 'd098688a65fb2d1befb255f0e59fd4c00b401092', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '96cd2e59a7d1c0de7c9afb8f8d366367b09fbc93', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '882ccc39ce344a2c51d6508c11c3f40b26eaf2a7',
26667
26903
  /*
26668
26904
  role and aria-modal must be used on the
26669
26905
  same element. They must also be set inside the
26670
26906
  shadow DOM otherwise ion-button will not be highlighted
26671
26907
  when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
26908
+
26909
+ tabIndex={-1} is required so present() can move focus to this
26910
+ element (which carries the dialog role) instead of the role-less
26911
+ host. role="dialog" alone does not make an element focusable, so
26912
+ without the tabindex focus() would be a no-op and screen readers
26913
+ may not properly announce the dialog and its content when it opens.
26672
26914
  */
26673
- role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '7f66b4fdb3dec61a2b9aec4e9dbacf5d013d637c', class: "modal-handle",
26915
+ role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '714d9904fcc8105b21e2bb66cdc032bffd685d72', class: "modal-handle",
26674
26916
  // Prevents the handle from receiving keyboard focus when it does not cycle
26675
- tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: '2dfaaebe3d0b2a46be1224c25f9ab89bf1744332', onSlotchange: this.onSlotChange }))));
26917
+ tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: '79dfbeb3fe5eee7dc3a243ad880d3f63184f3ab7', onSlotchange: this.onSlotChange }))));
26676
26918
  }
26677
26919
  get el() { return getElement(this); }
26678
26920
  static get watchers() { return {
@@ -31328,9 +31570,9 @@ const renderProgress = (value, buffer) => {
31328
31570
  ];
31329
31571
  };
31330
31572
 
31331
- const radioIosCss = () => `:host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.radio-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host{--color-checked:var(--ion-color-primary, #0054e9)}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{-webkit-margin-start:0;margin-inline-start:0}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:0.125rem;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);top:-8px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2}:host(.ion-focused) .radio-icon::after{inset-inline-start:-9px}.native-wrapper .radio-icon{width:0.9375rem;height:1.5rem}`;
31573
+ const radioIosCss = () => `:host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.radio-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host{--color-checked:var(--ion-color-primary, #0054e9)}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{-webkit-margin-start:0;margin-inline-start:0}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:0.125rem;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}.native-wrapper .radio-icon{width:0.9375rem;height:1.5rem}`;
31332
31574
 
31333
- const radioMdCss = () => `:host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.radio-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host{--color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #0054e9);--border-width:0.125rem;--border-style:solid;--border-radius:50%}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0);-webkit-transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}:host(.radio-disabled) .label-text-wrapper{opacity:0.38}:host(.radio-disabled) .native-wrapper{opacity:0.63}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2}.native-wrapper .radio-icon{width:1.25rem;height:1.25rem}`;
31575
+ const radioMdCss = () => `:host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.radio-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host{--color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #0054e9);--border-width:0.125rem;--border-style:solid;--border-radius:50%}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0);-webkit-transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}:host(.radio-disabled) .label-text-wrapper{opacity:0.38}:host(.radio-disabled) .native-wrapper{opacity:0.63}.native-wrapper .radio-icon{width:1.25rem;height:1.25rem}`;
31334
31576
 
31335
31577
  /**
31336
31578
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -31447,6 +31689,7 @@ class Radio {
31447
31689
  this.updateState();
31448
31690
  addEventListener$1(radioGroup, 'ionValueChange', this.updateState);
31449
31691
  }
31692
+ this.itemFocusObserver = createItemMultipleInputsObserver(this.el);
31450
31693
  }
31451
31694
  disconnectedCallback() {
31452
31695
  const radioGroup = this.radioGroup;
@@ -31454,6 +31697,10 @@ class Radio {
31454
31697
  removeEventListener(radioGroup, 'ionValueChange', this.updateState);
31455
31698
  this.radioGroup = null;
31456
31699
  }
31700
+ if (this.itemFocusObserver) {
31701
+ this.itemFocusObserver.disconnect();
31702
+ this.itemFocusObserver = undefined;
31703
+ }
31457
31704
  }
31458
31705
  get hasLabel() {
31459
31706
  return this.el.textContent !== '';
@@ -31465,7 +31712,8 @@ class Radio {
31465
31712
  const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
31466
31713
  const mode = getIonMode$1(this);
31467
31714
  const inItem = hostContext('ion-item', el);
31468
- return (hAsync(Host, { key: 'af5dc59ed528150872e907ed1036e3e2decba939', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
31715
+ const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
31716
+ return (hAsync(Host, { key: '8622be22eb4f0bab791b479c813c490e21fd9ad8', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
31469
31717
  [mode]: true,
31470
31718
  'in-item': inItem,
31471
31719
  'radio-checked': checked,
@@ -31473,13 +31721,15 @@ class Radio {
31473
31721
  [`radio-justify-${justify}`]: justify !== undefined,
31474
31722
  [`radio-alignment-${alignment}`]: alignment !== undefined,
31475
31723
  [`radio-label-placement-${labelPlacement}`]: true,
31476
- // Focus and active styling should not apply when the radio is in an item
31724
+ // A single-input item has the input cover and draws the indicator itself.
31725
+ // A multi-input item has no cover, so each control draws its own. Active
31726
+ // styling stays suppressed either way.
31477
31727
  'ion-activatable': !inItem,
31478
- 'ion-focusable': !inItem,
31479
- }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '1312aba3259a87fe23a6911cdfa477e309469c8b', class: "radio-wrapper" }, hAsync("div", { key: 'b342aa27e240a300836d2a135658d346b95daf09', class: {
31728
+ 'ion-focusable': !inItem || inMultipleInputsItem,
31729
+ }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: 'fb358e14faf37142ccad169adb729f3129371406', class: "radio-wrapper" }, hAsync("div", { key: '844ab615aadf6eef46368ad060afaca9c4222cc1', class: {
31480
31730
  'label-text-wrapper': true,
31481
31731
  'label-text-wrapper-hidden': !hasLabel,
31482
- }, part: "label" }, hAsync("slot", { key: '0a4613d29aa783d1882cf889377f7e4fd4fea51d' })), hAsync("div", { key: '191faea79dc4cd8befc4b873f5bd9f5af8ca2acc', class: "native-wrapper" }, this.renderRadioControl()))));
31732
+ }, part: "label" }, hAsync("slot", { key: 'a57e53d65afda0f2082071c911343a0eb02a00a6' })), hAsync("div", { key: '206ff11e9c2c1946a389f96a3e642335e9c3add6', class: "native-wrapper" }, this.renderRadioControl()))));
31483
31733
  }
31484
31734
  get el() { return getElement(this); }
31485
31735
  static get watchers() { return {
@@ -33149,7 +33399,16 @@ class Refresher {
33149
33399
  });
33150
33400
  };
33151
33401
  this.scrollEl.addEventListener('scroll', this.scrollListenerCallback);
33152
- this.gesture = (await Promise.resolve().then(function () { return index; })).createGesture({
33402
+ const { createGesture } = await Promise.resolve().then(function () { return index; });
33403
+ /**
33404
+ * Awaiting the dynamic import yields to the event loop, so the component can
33405
+ * disconnect before it resolves. disconnectedCallback clears scrollEl, so a
33406
+ * missing scrollEl here means there is nothing left to attach a gesture to.
33407
+ */
33408
+ if (!this.scrollEl) {
33409
+ return;
33410
+ }
33411
+ this.gesture = createGesture({
33153
33412
  el: this.scrollEl,
33154
33413
  gestureName: 'refresher',
33155
33414
  gesturePriority: 31,
@@ -33209,7 +33468,16 @@ class Refresher {
33209
33468
  refreshingCircle.style.setProperty('animation-delay', '-655ms');
33210
33469
  });
33211
33470
  }
33212
- this.gesture = (await Promise.resolve().then(function () { return index; })).createGesture({
33471
+ const { createGesture } = await Promise.resolve().then(function () { return index; });
33472
+ /**
33473
+ * Awaiting the dynamic import yields to the event loop, so the component can
33474
+ * disconnect before it resolves. disconnectedCallback clears scrollEl, so a
33475
+ * missing scrollEl here means there is nothing left to attach a gesture to.
33476
+ */
33477
+ if (!this.scrollEl) {
33478
+ return;
33479
+ }
33480
+ this.gesture = createGesture({
33213
33481
  el: this.scrollEl,
33214
33482
  gestureName: 'refresher',
33215
33483
  gesturePriority: 31,
@@ -33343,7 +33611,16 @@ class Refresher {
33343
33611
  this.setupNativeRefresher(contentEl);
33344
33612
  }
33345
33613
  else {
33346
- this.gesture = (await Promise.resolve().then(function () { return index; })).createGesture({
33614
+ const { createGesture } = await Promise.resolve().then(function () { return index; });
33615
+ /**
33616
+ * Awaiting the dynamic import yields to the event loop, so the component can
33617
+ * disconnect before it resolves. A disconnected contentEl means there is
33618
+ * nothing left to attach a gesture to.
33619
+ */
33620
+ if (!contentEl.isConnected) {
33621
+ return;
33622
+ }
33623
+ this.gesture = createGesture({
33347
33624
  el: contentEl,
33348
33625
  gestureName: 'refresher',
33349
33626
  gesturePriority: 31,
@@ -33662,7 +33939,7 @@ class Refresher {
33662
33939
  }
33663
33940
  render() {
33664
33941
  const mode = getIonMode$1(this);
33665
- return (hAsync(Host, { key: '80fa313b0d77161680836bdd6aa334d02c549b41', slot: "fixed", class: {
33942
+ return (hAsync(Host, { key: '2eaca7f85b3d40418f213077434e519dfacd9d42', slot: "fixed", class: {
33666
33943
  [mode]: true,
33667
33944
  // Used internally for styling
33668
33945
  [`refresher-${mode}`]: true,
@@ -35945,12 +36222,14 @@ class Searchbar {
35945
36222
  }, 300);
35946
36223
  }
35947
36224
  disconnectedCallback() {
36225
+ var _a;
35948
36226
  if (this.loadTimeout) {
35949
36227
  clearTimeout(this.loadTimeout);
35950
36228
  }
35951
36229
  if (this.clearTimeout) {
35952
36230
  clearTimeout(this.clearTimeout);
35953
36231
  }
36232
+ (_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
35954
36233
  }
35955
36234
  emitStyle() {
35956
36235
  this.ionStyle.emit({
@@ -36048,6 +36327,7 @@ class Searchbar {
36048
36327
  doc.body.appendChild(tempSpan);
36049
36328
  // Get the width of the span then remove it
36050
36329
  raf(() => {
36330
+ var _a, _b;
36051
36331
  const textWidth = tempSpan.offsetWidth;
36052
36332
  tempSpan.remove();
36053
36333
  // Calculate the input padding
@@ -36059,7 +36339,25 @@ class Searchbar {
36059
36339
  * such as Dynamic Type on iOS as well as 8px
36060
36340
  * of padding.
36061
36341
  */
36062
- const iconLeft = 'calc(50% - ' + (textWidth / 2 + iconEl.clientWidth + 8) + 'px)';
36342
+ const iconWidth = iconEl.clientWidth;
36343
+ /**
36344
+ * Fix for https://github.com/ionic-team/ionic-framework/issues/30434:
36345
+ * iconEl.clientWidth can very briefly be 0 when this is called from componentDidLoad.
36346
+ * If it is zero, set up a ResizeObserver and call this function when it observes a width greater than 0.
36347
+ */
36348
+ if (iconWidth === 0) {
36349
+ (_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
36350
+ this.searchIconResizeObserver = new ResizeObserver((entries) => {
36351
+ var _a;
36352
+ if (entries[0].contentRect.width > 0) {
36353
+ (_a = this.searchIconResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
36354
+ this.positionPlaceholder();
36355
+ }
36356
+ });
36357
+ (_b = this.searchIconResizeObserver) === null || _b === void 0 ? void 0 : _b.observe(iconEl);
36358
+ return;
36359
+ }
36360
+ const iconLeft = 'calc(50% - ' + (textWidth / 2 + iconWidth + 8) + 'px)';
36063
36361
  // Set the input padding start and icon margin start
36064
36362
  if (rtl) {
36065
36363
  inputEl.style.paddingRight = inputLeft;
@@ -36140,8 +36438,8 @@ class Searchbar {
36140
36438
  const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
36141
36439
  const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
36142
36440
  const shouldShowCancelButton = this.shouldShowCancelButton();
36143
- const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '9e9f3a7f6ee66140181f8c3cfa42bbeee75adafc', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: '5f83fbcc0708830637815e8c0b69356cad381870', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
36144
- return (hAsync(Host, { key: '219c263c1f3cc63e18bc2d2ba5d672b7806eddd0', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
36441
+ const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '226b7a676b4819cda4062b8334fa8d4c4cee6f1a', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: '89adb4efa17a78c973bbd5527cfac91d99ceb9bb', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
36442
+ return (hAsync(Host, { key: '237dd767403dba3cb3d7de8905996e275669da3b', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
36145
36443
  [mode]: true,
36146
36444
  'searchbar-animated': animated,
36147
36445
  'searchbar-disabled': this.disabled,
@@ -36151,14 +36449,14 @@ class Searchbar {
36151
36449
  'searchbar-has-focus': this.focused,
36152
36450
  'searchbar-should-show-clear': this.shouldShowClearButton(),
36153
36451
  'searchbar-should-show-cancel': this.shouldShowCancelButton(),
36154
- }) }, hAsync("div", { key: '3f1c25442d6d87c0df67f79482a925b80dcc403d', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'a386fecafda0fab449ea1488906ba6cfc55e2b5c', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '5f81642628335def39a14f0726e0fafdc7203776', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: 'da3073646f2d7f639261b556517fbadabc3c10e9', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
36452
+ }) }, hAsync("div", { key: '5b4bdf7280bea710304b6975e76390fe6ceb7417', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: '01a0820a2cf904aec1c7d84b542ab7918d435632', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: 'cd64973206b1cc59d221112861733b7ee25f0323', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '2061fa8449bbc576cf8c5130ea613378ea492944', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
36155
36453
  /**
36156
36454
  * This prevents mobile browsers from
36157
36455
  * blurring the input when the clear
36158
36456
  * button is activated.
36159
36457
  */
36160
36458
  ev.preventDefault();
36161
- }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '065cd6c707ae462c0767df1bab04ce8045f340a4', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
36459
+ }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '00df6f7742bff70b1b088d544b8c00e962e7216c', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
36162
36460
  }
36163
36461
  get el() { return getElement(this); }
36164
36462
  static get watchers() { return {
@@ -37869,8 +38167,9 @@ class Select {
37869
38167
  *
37870
38168
  * TODO(FW-5592): Remove hasStartEndSlots condition
37871
38169
  */
37872
- const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
37873
- return (hAsync(Host, { key: '5f4ee901b65554eacc9fa52230d06b1a5ff1247c', onClick: this.onClick, class: createColorClasses$1(this.color, {
38170
+ const labelShouldFloat = labelPlacement === 'stacked' ||
38171
+ (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded || hasStartEndSlots));
38172
+ return (hAsync(Host, { key: 'f16327d6866ffee76e1618fcd3281590ca0fd56d', onClick: this.onClick, class: createColorClasses$1(this.color, {
37874
38173
  [mode]: true,
37875
38174
  'in-item': inItem,
37876
38175
  'in-item-color': hostContext('ion-item.ion-color', el),
@@ -37888,7 +38187,7 @@ class Select {
37888
38187
  [`select-justify-${justify}`]: justifyEnabled,
37889
38188
  [`select-shape-${shape}`]: shape !== undefined,
37890
38189
  [`select-label-placement-${labelPlacement}`]: true,
37891
- }) }, hAsync("label", { key: 'd56d89b5b58da2b5eaebada9d1be58ca45c67806', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: 'bc8bf089c693781ad5b3a5db76a12223867d748e', class: "select-wrapper-inner", part: "inner" }, hAsync("slot", { key: 'e1c12b96f1573eb192608c458ed1f3463174cd89', name: "start" }), hAsync("div", { key: '6ee5e3900d8e462f175649b502ac6faa2f2b9909', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: 'faeaea34aad412e1458beab95d4b1b9ca7b87c41', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'aeff51e51c990844869eff9940575ce6b2223135', class: "select-highlight" })), this.renderBottomContent()));
38190
+ }) }, hAsync("label", { key: 'db13f76b384a7a7461c1ad752108eadf9c0213be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: '2fb0e57bd596c0f525be79293b7da4aca55a9385', class: "select-wrapper-inner", part: "inner" }, hAsync("slot", { key: 'cd694c36242789a89461ed3412af9891ad68411b', name: "start" }), hAsync("div", { key: 'fdf62911be54f4ab29eb3c2eb153f082e76a8f49', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: 'a32f5c4b101d4d6ad45870f4c4446960009377f5', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '61f792024a5f221ef4f28a3c249bd3a0de5edeab', class: "select-highlight" })), this.renderBottomContent()));
37892
38191
  }
37893
38192
  get el() { return getElement(this); }
37894
38193
  static get watchers() { return {
@@ -38484,7 +38783,6 @@ const tabCss = () => `:host(.tab-hidden){display:none !important}`;
38484
38783
  class Tab {
38485
38784
  constructor(hostRef) {
38486
38785
  registerInstance(this, hostRef);
38487
- this.loaded = false;
38488
38786
  /** @internal */
38489
38787
  this.active = false;
38490
38788
  }
@@ -38500,27 +38798,35 @@ class Tab {
38500
38798
  }
38501
38799
  changeActive(isActive) {
38502
38800
  if (isActive) {
38503
- this.prepareLazyLoaded();
38801
+ this.prepareLazyLoaded().catch((e) => {
38802
+ printIonError('[ion-tab] - Exception in prepareLazyLoaded:', e);
38803
+ });
38504
38804
  }
38505
38805
  }
38506
38806
  prepareLazyLoaded() {
38507
- if (!this.loaded && this.component != null) {
38508
- this.loaded = true;
38509
- try {
38510
- return attachComponent(this.delegate, this.el, this.component, ['ion-page']);
38511
- }
38512
- catch (e) {
38513
- printIonError('[ion-tab] - Exception in prepareLazyLoaded:', e);
38514
- }
38807
+ if (this.component == null) {
38808
+ return Promise.resolve(undefined);
38515
38809
  }
38516
- return Promise.resolve(undefined);
38810
+ /**
38811
+ * The attach is cached so that concurrent activations share a single
38812
+ * attempt and later activations reuse the result. The cache is cleared
38813
+ * only when the attach fails, so a tab whose component failed to load
38814
+ * can be retried the next time it is activated.
38815
+ */
38816
+ if (this.loadPromise === undefined) {
38817
+ this.loadPromise = attachComponent(this.delegate, this.el, this.component, ['ion-page']).catch((e) => {
38818
+ this.loadPromise = undefined;
38819
+ throw e;
38820
+ });
38821
+ }
38822
+ return this.loadPromise;
38517
38823
  }
38518
38824
  render() {
38519
38825
  const { tab, active, component } = this;
38520
- return (hAsync(Host, { key: 'fbd837bad7a0632336d46a597ace23673b153e48', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
38826
+ return (hAsync(Host, { key: 'c35c9f96ed3a73270b23f30d9e279dcad9032e28', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
38521
38827
  'ion-page': component === undefined,
38522
38828
  'tab-hidden': !active,
38523
- } }, hAsync("slot", { key: '35c218169fda826c9c1337558e0278d0c7f5f26a' })));
38829
+ } }, hAsync("slot", { key: '1c03523327e571f9ba140be0ccd6fe089e16a77a' })));
38524
38830
  }
38525
38831
  get el() { return getElement(this); }
38526
38832
  static get watchers() { return {
@@ -40450,9 +40756,9 @@ const buttonPart = (button) => {
40450
40756
  return isCancel(button.role) ? 'button cancel' : 'button';
40451
40757
  };
40452
40758
 
40453
- const toggleIosCss = () => `:host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}input{display:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toggle-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.toggle-label-placement-stacked) .toggle-bottom{font-size:1rem}.toggle-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.toggle-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.toggle-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);--track-background-checked:var(--ion-color-primary, #0054e9);--border-radius:15.5px;--handle-background:#ffffff;--handle-background-checked:#ffffff;--handle-border-radius:25.5px;--handle-box-shadow:0 3px 4px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.06);--handle-height:calc(31px - (2px * 2));--handle-max-height:calc(100% - var(--handle-spacing) * 2);--handle-width:calc(31px - (2px * 2));--handle-spacing:2px;--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms}.native-wrapper .toggle-icon{width:51px;height:31px;overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}:host(.toggle-activated) .toggle-switch-icon{opacity:0}.toggle-icon{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:background-color 300ms;transition:background-color 300ms}.toggle-inner{will-change:transform}.toggle-switch-icon{position:absolute;top:50%;width:11px;height:11px;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity 300ms, color 300ms;transition:opacity 300ms, color 300ms}.toggle-switch-icon{position:absolute;color:var(--ion-color-dark, #222428)}:host(.toggle-ltr) .toggle-switch-icon{right:6px}:host(.toggle-rtl) .toggle-switch-icon{right:initial;left:6px;}:host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked{color:var(--ion-color-contrast, #fff)}:host(.toggle-checked) .toggle-switch-icon:not(.toggle-switch-icon-checked){opacity:0}.toggle-switch-icon-checked{position:absolute;width:15px;height:15px;-webkit-transform:translateY(-50%) rotate(90deg);transform:translateY(-50%) rotate(90deg)}:host(.toggle-ltr) .toggle-switch-icon-checked{right:initial;left:4px;}:host(.toggle-rtl) .toggle-switch-icon-checked{right:4px}:host(.toggle-activated) .toggle-icon::before,:host(.toggle-checked) .toggle-icon::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated.toggle-checked) .toggle-inner::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated) .toggle-inner{width:calc(var(--handle-width) + 6px)}:host(.toggle-ltr.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0);transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0)}:host(.toggle-rtl.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0);transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0)}:host(.toggle-disabled){opacity:0.3}`;
40759
+ const toggleIosCss = () => `:host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.toggle-disabled){pointer-events:none}input{display:none}:host(:focus){outline:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toggle-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.toggle-label-placement-stacked) .toggle-bottom{font-size:1rem}.toggle-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.toggle-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.toggle-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);--track-background-checked:var(--ion-color-primary, #0054e9);--border-radius:15.5px;--handle-background:#ffffff;--handle-background-checked:#ffffff;--handle-border-radius:25.5px;--handle-box-shadow:0 3px 4px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.06);--handle-height:calc(31px - (2px * 2));--handle-max-height:calc(100% - var(--handle-spacing) * 2);--handle-width:calc(31px - (2px * 2));--handle-spacing:2px;--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms}.native-wrapper .toggle-icon{width:51px;height:31px;overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}:host(.toggle-activated) .toggle-switch-icon{opacity:0}.toggle-icon{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:background-color 300ms;transition:background-color 300ms}.toggle-inner{will-change:transform}.toggle-switch-icon{position:absolute;top:50%;width:11px;height:11px;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity 300ms, color 300ms;transition:opacity 300ms, color 300ms}.toggle-switch-icon{position:absolute;color:var(--ion-color-dark, #222428)}:host(.toggle-ltr) .toggle-switch-icon{right:6px}:host(.toggle-rtl) .toggle-switch-icon{right:initial;left:6px;}:host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked{color:var(--ion-color-contrast, #fff)}:host(.toggle-checked) .toggle-switch-icon:not(.toggle-switch-icon-checked){opacity:0}.toggle-switch-icon-checked{position:absolute;width:15px;height:15px;-webkit-transform:translateY(-50%) rotate(90deg);transform:translateY(-50%) rotate(90deg)}:host(.toggle-ltr) .toggle-switch-icon-checked{right:initial;left:4px;}:host(.toggle-rtl) .toggle-switch-icon-checked{right:4px}:host(.toggle-activated) .toggle-icon::before,:host(.toggle-checked) .toggle-icon::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated.toggle-checked) .toggle-inner::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated) .toggle-inner{width:calc(var(--handle-width) + 6px)}:host(.toggle-ltr.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0);transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0)}:host(.toggle-rtl.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0);transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0)}:host(.toggle-disabled){opacity:0.3}:host(.ion-focused:not(.toggle-defers-indicator)) .toggle-icon{-webkit-box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color.ion-focused.toggle-checked:not(.toggle-defers-indicator)) .toggle-icon{-webkit-box-shadow:0 0 0 4px rgba(var(--ion-color-base-rgb), 0.2);box-shadow:0 0 0 4px rgba(var(--ion-color-base-rgb), 0.2)}`;
40454
40760
 
40455
- const toggleMdCss = () => `:host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}input{display:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toggle-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.toggle-label-placement-stacked) .toggle-bottom{font-size:1rem}.toggle-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.toggle-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.toggle-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);--track-background-checked:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.5);--border-radius:14px;--handle-background:#ffffff;--handle-background-checked:var(--ion-color-primary, #0054e9);--handle-border-radius:50%;--handle-box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--handle-width:20px;--handle-height:20px;--handle-max-height:calc(100% + 6px);--handle-spacing:0;--handle-transition:transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background-color 160ms cubic-bezier(0.4, 0, 0.2, 1)}.native-wrapper .toggle-icon{width:36px;height:14px}:host(.ion-color.toggle-checked) .toggle-icon{background:rgba(var(--ion-color-base-rgb), 0.5)}:host(.ion-color.toggle-checked) .toggle-inner{background:var(--ion-color-base)}:host(.toggle-checked) .toggle-inner{color:var(--ion-color-contrast, #fff)}.toggle-icon{-webkit-transition:background-color 160ms;transition:background-color 160ms}.toggle-inner{will-change:background-color, transform;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#000}.toggle-inner .toggle-switch-icon{-webkit-padding-start:1px;padding-inline-start:1px;-webkit-padding-end:1px;padding-inline-end:1px;padding-top:1px;padding-bottom:1px;width:100%;height:100%}:host(.toggle-disabled){opacity:0.38}`;
40761
+ const toggleMdCss = () => `:host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.toggle-disabled){pointer-events:none}input{display:none}:host(:focus){outline:none}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toggle-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.toggle-label-placement-stacked) .toggle-bottom{font-size:1rem}.toggle-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.toggle-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .toggle-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .toggle-bottom .helper-text{display:none}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.toggle-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);--track-background-checked:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.5);--border-radius:14px;--handle-background:#ffffff;--handle-background-checked:var(--ion-color-primary, #0054e9);--handle-border-radius:50%;--handle-box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--handle-width:20px;--handle-height:20px;--handle-max-height:calc(100% + 6px);--handle-spacing:0px;--handle-transition:transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background-color 160ms cubic-bezier(0.4, 0, 0.2, 1)}.native-wrapper .toggle-icon{width:36px;height:14px}:host(.ion-color.toggle-checked) .toggle-icon{background:rgba(var(--ion-color-base-rgb), 0.5)}:host(.ion-color.toggle-checked) .toggle-inner{background:var(--ion-color-base)}:host(.toggle-checked) .toggle-inner{color:var(--ion-color-contrast, #fff)}.toggle-icon{-webkit-transition:background-color 160ms;transition:background-color 160ms}.toggle-inner{will-change:background-color, transform;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#000}.toggle-inner .toggle-switch-icon{-webkit-padding-start:1px;padding-inline-start:1px;-webkit-padding-end:1px;padding-inline-end:1px;padding-top:1px;padding-bottom:1px;width:100%;height:100%}:host(.ion-focused:not(.toggle-defers-indicator)) .toggle-icon-wrapper::after{border-radius:50%;display:block;position:absolute;width:36px;height:36px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);content:"";z-index:-1;inset-block-start:50%}:host(.toggle-ltr.ion-focused) .toggle-icon-wrapper::after{left:calc(var(--handle-spacing) + (var(--handle-width) - 36px) / 2)}:host(.toggle-rtl.ion-focused) .toggle-icon-wrapper::after{right:calc(var(--handle-spacing) + (var(--handle-width) - 36px) / 2)}:host(.toggle-ltr.ion-focused.toggle-checked) .toggle-icon-wrapper::after{-webkit-transform:translate(calc(var(--handle-spacing) * -2), -50%);transform:translate(calc(var(--handle-spacing) * -2), -50%)}:host(.toggle-rtl.ion-focused.toggle-checked) .toggle-icon-wrapper::after{-webkit-transform:translate(calc(var(--handle-spacing) * 2), -50%);transform:translate(calc(var(--handle-spacing) * 2), -50%)}:host(.ion-focused.toggle-checked) .toggle-icon-wrapper::after{background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2)}:host(.ion-color.ion-focused.toggle-checked) .toggle-icon-wrapper::after{background:rgba(var(--ion-color-base-rgb), 0.2)}:host(.toggle-disabled){opacity:0.38}`;
40456
40762
 
40457
40763
  /**
40458
40764
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -40609,6 +40915,10 @@ class Toggle {
40609
40915
  }
40610
40916
  // Always set initial state
40611
40917
  this.isInvalid = checkInvalidState(el);
40918
+ this.itemFocusObserver = createItemMultipleInputsObserver(el, () => forceUpdate(), [
40919
+ 'item-multiple-inputs',
40920
+ 'ion-activatable',
40921
+ ]);
40612
40922
  }
40613
40923
  componentDidLoad() {
40614
40924
  this.setupGesture();
@@ -40619,6 +40929,10 @@ class Toggle {
40619
40929
  this.gesture.destroy();
40620
40930
  this.gesture = undefined;
40621
40931
  }
40932
+ if (this.itemFocusObserver) {
40933
+ this.itemFocusObserver.disconnect();
40934
+ this.itemFocusObserver = undefined;
40935
+ }
40622
40936
  // Clean up validation observer to prevent memory leaks.
40623
40937
  if (this.validationObserver) {
40624
40938
  this.validationObserver.disconnect();
@@ -40699,10 +41013,20 @@ class Toggle {
40699
41013
  const mode = getIonMode$1(this);
40700
41014
  const value = this.getValue();
40701
41015
  const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
41016
+ const inItem = hostContext('ion-item', el);
41017
+ const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
41018
+ // A clickable item is a second tab stop painting the same row indicator, which
41019
+ // `item-multiple-inputs` misses because it counts cover elements, not toggles.
41020
+ // The attributes are matched too because the class needs the item to render.
41021
+ const inClickableItem = hostContext('ion-item.ion-activatable, ion-item[button], ion-item[href]', el);
40702
41022
  renderHiddenInput(true, el, name, checked ? value : '', disabled);
40703
- return (hAsync(Host, { key: '736e1dcfca34fd41f6f0632652e7f86d6996a232', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses$1(color, {
41023
+ return (hAsync(Host, { key: 'e2fb9e7fb497511a8f763895fab34f20d5f8cb9e', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses$1(color, {
40704
41024
  [mode]: true,
40705
- 'in-item': hostContext('ion-item', el),
41025
+ 'in-item': inItem,
41026
+ // `ion-focusable` has to stay on because it is what makes the item focusable.
41027
+ // When the item draws the row indicator, CSS suppresses ours instead.
41028
+ 'ion-focusable': true,
41029
+ 'toggle-defers-indicator': inItem && !inMultipleInputsItem && !inClickableItem,
40706
41030
  'toggle-activated': activated,
40707
41031
  'toggle-checked': checked,
40708
41032
  'toggle-disabled': disabled,
@@ -40710,10 +41034,10 @@ class Toggle {
40710
41034
  [`toggle-alignment-${alignment}`]: alignment !== undefined,
40711
41035
  [`toggle-label-placement-${labelPlacement}`]: true,
40712
41036
  [`toggle-${rtl}`]: true,
40713
- }) }, hAsync("label", { key: 'e697739fd3964c1c6c23331cf7e38a9841c46a6a', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '3d500b8c1bc879591249d183c1abb3f5f26aff6b', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: 'e38f3fe0e66b4ca434fd81514f5ef771c2960841', class: {
41037
+ }) }, hAsync("label", { key: 'ab95b2af493f6352abefbc8661b112796ed12035', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: 'f5a96b8f56787d67fa4ed2c29a089cd2fa02cb00', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: '3bdabb3c25ec4417b0e968bae12f7365a77acb65', class: {
40714
41038
  'label-text-wrapper': true,
40715
41039
  'label-text-wrapper-hidden': !hasLabel,
40716
- }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '006dd3558264d69ab020c07005b348adc4ecdd5b' }), this.renderHintText()), hAsync("div", { key: 'dd4e52de31caabee41ec1bc58efecd1e213368c9', class: "native-wrapper" }, this.renderToggleControl()))));
41040
+ }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '3de9890950b5066173d49a6d615e415d286e4aa5' }), this.renderHintText()), hAsync("div", { key: 'de233f83efd106d043b31cceb5eb9a6e5758d032', class: "native-wrapper" }, this.renderToggleControl()))));
40717
41041
  }
40718
41042
  get el() { return getElement(this); }
40719
41043
  static get watchers() { return {