@ionic/core 8.2.3-dev.11724345963.10ca6051 → 8.2.3-dev.11724780956.16364df0

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 (62) hide show
  1. package/components/ion-input-password-toggle.js +12 -7
  2. package/components/ion-input.js +14 -5
  3. package/components/ion-textarea.js +15 -5
  4. package/components/ion-toggle.js +14 -11
  5. package/css/ionic/bundle.ionic.css.map +1 -1
  6. package/css/ionic/global.bundle.ionic.css.map +1 -1
  7. package/css/ionic/typography.ionic.css.map +1 -1
  8. package/dist/cjs/ion-input-password-toggle.cjs.entry.js +12 -7
  9. package/dist/cjs/ion-input.cjs.entry.js +14 -5
  10. package/dist/cjs/ion-textarea.cjs.entry.js +15 -5
  11. package/dist/cjs/ion-toggle.cjs.entry.js +14 -11
  12. package/dist/collection/components/input/input.js +14 -5
  13. package/dist/collection/components/input-password-toggle/input-password-toggle.common.css +61 -0
  14. package/dist/collection/components/input-password-toggle/input-password-toggle.ionic.css +147 -0
  15. package/dist/collection/components/input-password-toggle/input-password-toggle.js +10 -7
  16. package/dist/collection/components/input-password-toggle/test/basic/input-password-toggle.e2e.js +1 -1
  17. package/dist/collection/components/textarea/test/shape/textarea.e2e.js +79 -0
  18. package/dist/collection/components/textarea/textarea.ionic.css +12 -1
  19. package/dist/collection/components/textarea/textarea.js +17 -7
  20. package/dist/collection/components/toggle/test/color/toggle.e2e.js +1 -1
  21. package/dist/collection/components/toggle/test/enable-on-off-labels/toggle.e2e.js +1 -1
  22. package/dist/collection/components/toggle/test/item/toggle.e2e.js +4 -2
  23. package/dist/collection/components/toggle/test/label/toggle.e2e.js +29 -0
  24. package/dist/collection/components/toggle/test/sizes/toggle.e2e.js +1 -1
  25. package/dist/collection/components/toggle/test/states/toggle.e2e.js +29 -1
  26. package/dist/collection/components/toggle/toggle.ionic.css +391 -0
  27. package/dist/collection/components/toggle/toggle.ios.css +163 -138
  28. package/dist/collection/components/toggle/toggle.js +12 -9
  29. package/dist/collection/components/toggle/toggle.md.css +163 -138
  30. package/dist/docs.json +13 -5
  31. package/dist/esm/ion-input-password-toggle.entry.js +12 -7
  32. package/dist/esm/ion-input.entry.js +14 -5
  33. package/dist/esm/ion-textarea.entry.js +15 -5
  34. package/dist/esm/ion-toggle.entry.js +14 -11
  35. package/dist/esm-es5/ion-input-password-toggle.entry.js +1 -1
  36. package/dist/esm-es5/ion-input.entry.js +1 -1
  37. package/dist/esm-es5/ion-textarea.entry.js +1 -1
  38. package/dist/esm-es5/ion-toggle.entry.js +1 -1
  39. package/dist/html.html-data.json +7 -1
  40. package/dist/ionic/ionic.esm.js +1 -1
  41. package/dist/ionic/p-13c363e4.entry.js +4 -0
  42. package/dist/ionic/p-22711da4.system.entry.js +4 -0
  43. package/dist/ionic/p-7b590e46.system.js +1 -1
  44. package/dist/ionic/p-a6028478.entry.js +4 -0
  45. package/dist/ionic/p-aad91b75.system.entry.js +4 -0
  46. package/dist/ionic/p-bf55ce83.system.entry.js +4 -0
  47. package/dist/ionic/{p-201d8768.system.entry.js → p-c2c3807b.system.entry.js} +1 -1
  48. package/dist/ionic/p-c8453a83.entry.js +4 -0
  49. package/dist/ionic/p-de8e8567.entry.js +4 -0
  50. package/dist/types/components/input/input.d.ts +1 -0
  51. package/dist/types/components/textarea/textarea.d.ts +7 -2
  52. package/dist/types/components.d.ts +4 -4
  53. package/hydrate/index.js +55 -28
  54. package/package.json +1 -1
  55. package/dist/collection/components/input-password-toggle/input-password-toggle.css +0 -0
  56. package/dist/ionic/p-1ee206ac.entry.js +0 -4
  57. package/dist/ionic/p-3a2eb448.system.entry.js +0 -4
  58. package/dist/ionic/p-6691825a.system.entry.js +0 -4
  59. package/dist/ionic/p-7a1b640f.entry.js +0 -4
  60. package/dist/ionic/p-8102551e.system.entry.js +0 -4
  61. package/dist/ionic/p-924deb6b.entry.js +0 -4
  62. package/dist/ionic/p-a6bb62ea.entry.js +0 -4
package/css/ionic/typography.ionic.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/css/ionic/typography.ionic.scss","../../src/foundations/ionic.vars.scss","../../src/themes/ionic/ionic.mixins.scss"],"names":[],"mappings":"AAGA,KACE,YCsoBkB,8CDnoBpB,KE0BE,+CACA,kDAEA,gDACA,+CAEA,qBACA,oBF5BF,GEqBE,8CACA,kDAEA,gDACA,+CAEA,qBACA,oBFxBF,GEiBE,+CACA,kDAEA,gDACA,+CAEA,qBACA,oBFpBF,GEaE,6CACA,kDAEA,gDACA,+CAEA,qBACA,oBFhBF,GESE,+CACA,kDAEA,gDACA,+CAEA,qBACA,oBFZF,GEKE,8CACA,kDAEA,gDACA,+CAEA,qBACA,oBFRF,GECE,+CACA,kDAEA,gDACA,+CAEA,qBACA","file":"typography.ionic.css","sourcesContent":["@use \"../../themes/ionic/ionic.globals.scss\" as globals;\n\n// TODO(ROU-10833): add font loading solution here, as a @font-face, base64 or cdn\nhtml {\n font-family: globals.$ionic-font-family;\n}\n\nbody {\n @include globals.typography(globals.$ionic-body-md-regular);\n}\n\n/* Override html headings based on heading tokens */\nh1 {\n @include globals.typography(globals.$ionic-heading-h1-regular);\n}\n\nh2 {\n @include globals.typography(globals.$ionic-heading-h2-regular);\n}\n\nh3 {\n @include globals.typography(globals.$ionic-heading-h3-regular);\n}\n\nh4 {\n @include globals.typography(globals.$ionic-heading-h4-regular);\n}\n\nh5 {\n @include globals.typography(globals.$ionic-heading-h5-regular);\n}\n\nh6 {\n @include globals.typography(globals.$ionic-heading-h6-regular);\n}\n","/**\n * This is an auto-generated file, please do not change it directly.\n * Ionic Design System\n */\n\n@use \"../themes/functions.sizes\" as font;\n\n$ionic-elevation-100: var(\n --ionic-elevation-100,\n 0px 3px 9px 0px rgba(0, 0, 0, 0.07),\n 0px 0px 4px 0px rgba(0, 0, 0, 0.04)\n);\n$ionic-elevation-200: var(\n --ionic-elevation-200,\n 0px 8px 25px 0px rgba(0, 0, 0, 0.08),\n 0px 1px 5px 0px rgba(0, 0, 0, 0.05)\n);\n$ionic-elevation-300: var(\n --ionic-elevation-300,\n 0px 6px 32px 0px rgba(0, 0, 0, 0.16),\n 0px 2px 7px 0px rgba(0, 0, 0, 0.05)\n);\n$ionic-elevation-400: var(\n --ionic-elevation-400,\n 0px 15px 48px 0px rgba(0, 0, 0, 0.18),\n 0px 3px 12px 0px rgba(0, 0, 0, 0.12)\n);\n$ionic-elevation-500: var(\n --ionic-elevation-500,\n 0px 3px 9px 0px rgba(6, 43, 99, 0.07),\n 0px 0px 4px 0px rgba(6, 43, 99, 0.04)\n);\n$ionic-elevation-600: var(\n --ionic-elevation-600,\n 0px 8px 25px 0px rgba(6, 43, 99, 0.08),\n 0px 1px 5px 0px rgba(6, 43, 99, 0.05)\n);\n$ionic-elevation-700: var(\n --ionic-elevation-700,\n 0px 15px 32px 0px rgba(6, 43, 99, 0.09),\n 0px 2px 7px 0px rgba(6, 43, 99, 0.05)\n);\n$ionic-elevation-800: var(\n --ionic-elevation-800,\n 0px 20px 48px 0px rgba(6, 43, 99, 0.12),\n 0px 3px 14px 0px rgba(6, 43, 99, 0.12)\n);\n$ionic-font-size-275: var(--ionic-font-size-275, font.px-to-rem(11));\n$ionic-font-size-300: var(--ionic-font-size-300, font.px-to-rem(12));\n$ionic-font-size-350: var(--ionic-font-size-350, font.px-to-rem(14));\n$ionic-font-size-400: var(--ionic-font-size-400, font.px-to-rem(16));\n$ionic-font-size-450: var(--ionic-font-size-450, font.px-to-rem(18));\n$ionic-font-size-500: var(--ionic-font-size-500, font.px-to-rem(20));\n$ionic-font-size-550: var(--ionic-font-size-550, font.px-to-rem(22));\n$ionic-font-size-600: var(--ionic-font-size-600, font.px-to-rem(24));\n$ionic-font-size-650: var(--ionic-font-size-650, font.px-to-rem(26));\n$ionic-font-size-700: var(--ionic-font-size-700, font.px-to-rem(28));\n$ionic-font-size-800: var(--ionic-font-size-800, font.px-to-rem(32));\n$ionic-font-size-900: var(--ionic-font-size-900, font.px-to-rem(36));\n$ionic-font-weight-thin: var(--ionic-font-weight-thin, 100);\n$ionic-font-weight-extra-light: var(--ionic-font-weight-extra-light, 200);\n$ionic-font-weight-light: var(--ionic-font-weight-light, 300);\n$ionic-font-weight-regular: var(--ionic-font-weight-regular, 400);\n$ionic-font-weight-medium: var(--ionic-font-weight-medium, 500);\n$ionic-font-weight-semi-bold: var(--ionic-font-weight-semi-bold, 600);\n$ionic-font-weight-bold: var(--ionic-font-weight-bold, 700);\n$ionic-font-weight-extra-bold: var(--ionic-font-weight-extra-bold, 800);\n$ionic-font-weight-black: var(--ionic-font-weight-black, 900);\n$ionic-letter-spacing-0: var(--ionic-letter-spacing-0, 0);\n$ionic-letter-spacing-1: var(--ionic-letter-spacing-1, 1%);\n$ionic-letter-spacing-2: var(--ionic-letter-spacing-2, 1.5%);\n$ionic-line-height-300: var(--ionic-line-height-300, 12px);\n$ionic-line-height-400: var(--ionic-line-height-400, 16px);\n$ionic-line-height-500: var(--ionic-line-height-500, 20px);\n$ionic-line-height-600: var(--ionic-line-height-600, 24px);\n$ionic-line-height-700: var(--ionic-line-height-700, 28px);\n$ionic-line-height-800: var(--ionic-line-height-800, 32px);\n$ionic-line-height-900: var(--ionic-line-height-900, 36px);\n$ionic-line-height-1100: var(--ionic-line-height-1100, 44px);\n$ionic-line-height-1200: var(--ionic-line-height-1200, 48px);\n$ionic-line-height-full: var(--ionic-line-height-full, 100%);\n$ionic-space-0: var(--ionic-space-0, 0px);\n$ionic-space-100: var(--ionic-space-100, 4px);\n$ionic-space-150: var(--ionic-space-150, 6px);\n$ionic-space-200: var(--ionic-space-200, 8px);\n$ionic-space-250: var(--ionic-space-250, 10px);\n$ionic-space-300: var(--ionic-space-300, 12px);\n$ionic-space-400: var(--ionic-space-400, 16px);\n$ionic-space-500: var(--ionic-space-500, 20px);\n$ionic-space-600: var(--ionic-space-600, 24px);\n$ionic-space-700: var(--ionic-space-700, 28px);\n$ionic-space-800: var(--ionic-space-800, 32px);\n$ionic-space-850: var(--ionic-space-850, 34px);\n$ionic-space-900: var(--ionic-space-900, 36px);\n$ionic-space-1000: var(--ionic-space-1000, 40px);\n$ionic-space-1200: var(--ionic-space-1200, 48px);\n$ionic-space-050: var(--ionic-space-050, 2px);\n$ionic-border-radius-0: var(--ionic-border-radius-0, 0px);\n$ionic-border-radius-100: var(--ionic-border-radius-100, 4px);\n$ionic-border-radius-200: var(--ionic-border-radius-200, 8px);\n$ionic-border-radius-300: var(--ionic-border-radius-300, 12px);\n$ionic-border-radius-400: var(--ionic-border-radius-400, 16px);\n$ionic-border-radius-500: var(--ionic-border-radius-500, 20px);\n$ionic-border-radius-800: var(--ionic-border-radius-800, 32px);\n$ionic-border-radius-1000: var(--ionic-border-radius-1000, 40px);\n$ionic-border-radius-050: var(--ionic-border-radius-050, 2px);\n$ionic-border-radius-full: var(--ionic-border-radius-full, 999px);\n$ionic-border-size-0: var(--ionic-border-size-0, 0px);\n$ionic-border-size-025: var(--ionic-border-size-025, 1px);\n$ionic-border-size-050: var(--ionic-border-size-050, 2px);\n$ionic-border-size-075: var(--ionic-border-size-075, 3px);\n$ionic-border-style-none: var(--ionic-border-style-none, none);\n$ionic-border-style-solid: var(--ionic-border-style-solid, solid);\n$ionic-border-style-dashed: var(--ionic-border-style-dashed, dashed);\n$ionic-border-style-dotted: var(--ionic-border-style-dotted, dotted);\n$ionic-color-base-white: var(--ionic-color-base-white, #ffffff);\n$ionic-color-base-white-rgb: var(--ionic-color-base-white-rgb, 255, 255, 255);\n$ionic-color-base-black: var(--ionic-color-base-black, #111111);\n$ionic-color-base-black-rgb: var(--ionic-color-base-black-rgb, 17, 17, 17);\n$ionic-color-neutral-100: var(--ionic-color-neutral-100, #f1f1f1);\n$ionic-color-neutral-100-rgb: var(--ionic-color-neutral-100-rgb, 241, 241, 241);\n$ionic-color-neutral-200: var(--ionic-color-neutral-200, #e7e7e7);\n$ionic-color-neutral-200-rgb: var(--ionic-color-neutral-200-rgb, 231, 231, 231);\n$ionic-color-neutral-300: var(--ionic-color-neutral-300, #cfcfcf);\n$ionic-color-neutral-300-rgb: var(--ionic-color-neutral-300-rgb, 207, 207, 207);\n$ionic-color-neutral-400: var(--ionic-color-neutral-400, #b9b9b9);\n$ionic-color-neutral-400-rgb: var(--ionic-color-neutral-400-rgb, 185, 185, 185);\n$ionic-color-neutral-500: var(--ionic-color-neutral-500, #a2a2a2);\n$ionic-color-neutral-500-rgb: var(--ionic-color-neutral-500-rgb, 162, 162, 162);\n$ionic-color-neutral-600: var(--ionic-color-neutral-600, #8c8c8c);\n$ionic-color-neutral-600-rgb: var(--ionic-color-neutral-600-rgb, 140, 140, 140);\n$ionic-color-neutral-700: var(--ionic-color-neutral-700, #777777);\n$ionic-color-neutral-700-rgb: var(--ionic-color-neutral-700-rgb, 119, 119, 119);\n$ionic-color-neutral-800: var(--ionic-color-neutral-800, #626262);\n$ionic-color-neutral-800-rgb: var(--ionic-color-neutral-800-rgb, 98, 98, 98);\n$ionic-color-neutral-900: var(--ionic-color-neutral-900, #4e4e4e);\n$ionic-color-neutral-900-rgb: var(--ionic-color-neutral-900-rgb, 78, 78, 78);\n$ionic-color-neutral-1000: var(--ionic-color-neutral-1000, #3b3b3b);\n$ionic-color-neutral-1000-rgb: var(--ionic-color-neutral-1000-rgb, 59, 59, 59);\n$ionic-color-neutral-1100: var(--ionic-color-neutral-1100, #292929);\n$ionic-color-neutral-1100-rgb: var(--ionic-color-neutral-1100-rgb, 41, 41, 41);\n$ionic-color-neutral-1200: var(--ionic-color-neutral-1200, #242424);\n$ionic-color-neutral-1200-rgb: var(--ionic-color-neutral-1200-rgb, 36, 36, 36);\n$ionic-color-red-100: var(--ionic-color-red-100, #feeded);\n$ionic-color-red-100-rgb: var(--ionic-color-red-100-rgb, 254, 237, 237);\n$ionic-color-red-200: var(--ionic-color-red-200, #fde1e1);\n$ionic-color-red-200-rgb: var(--ionic-color-red-200-rgb, 253, 225, 225);\n$ionic-color-red-300: var(--ionic-color-red-300, #fcc1c1);\n$ionic-color-red-300-rgb: var(--ionic-color-red-300-rgb, 252, 193, 193);\n$ionic-color-red-400: var(--ionic-color-red-400, #faa1a1);\n$ionic-color-red-400-rgb: var(--ionic-color-red-400-rgb, 250, 161, 161);\n$ionic-color-red-500: var(--ionic-color-red-500, #f97d7d);\n$ionic-color-red-500-rgb: var(--ionic-color-red-500-rgb, 249, 125, 125);\n$ionic-color-red-600: var(--ionic-color-red-600, #f85151);\n$ionic-color-red-600-rgb: var(--ionic-color-red-600-rgb, 248, 81, 81);\n$ionic-color-red-700: var(--ionic-color-red-700, #e52929);\n$ionic-color-red-700-rgb: var(--ionic-color-red-700-rgb, 229, 41, 41);\n$ionic-color-red-800: var(--ionic-color-red-800, #bf2222);\n$ionic-color-red-800-rgb: var(--ionic-color-red-800-rgb, 191, 34, 34);\n$ionic-color-red-900: var(--ionic-color-red-900, #991b1b);\n$ionic-color-red-900-rgb: var(--ionic-color-red-900-rgb, 153, 27, 27);\n$ionic-color-red-1000: var(--ionic-color-red-1000, #761515);\n$ionic-color-red-1000-rgb: var(--ionic-color-red-1000-rgb, 118, 21, 21);\n$ionic-color-red-1100: var(--ionic-color-red-1100, #540f0f);\n$ionic-color-red-1100-rgb: var(--ionic-color-red-1100-rgb, 84, 15, 15);\n$ionic-color-red-1200: var(--ionic-color-red-1200, #330909);\n$ionic-color-red-1200-rgb: var(--ionic-color-red-1200-rgb, 51, 9, 9);\n$ionic-color-pumpkin-100: var(--ionic-color-pumpkin-100, #feedea);\n$ionic-color-pumpkin-100-rgb: var(--ionic-color-pumpkin-100-rgb, 254, 237, 234);\n$ionic-color-pumpkin-200: var(--ionic-color-pumpkin-200, #fde0db);\n$ionic-color-pumpkin-200-rgb: var(--ionic-color-pumpkin-200-rgb, 253, 224, 219);\n$ionic-color-pumpkin-300: var(--ionic-color-pumpkin-300, #fbbdb1);\n$ionic-color-pumpkin-300-rgb: var(--ionic-color-pumpkin-300-rgb, 251, 189, 177);\n$ionic-color-pumpkin-400: var(--ionic-color-pumpkin-400, #f9947c);\n$ionic-color-pumpkin-400-rgb: var(--ionic-color-pumpkin-400-rgb, 249, 148, 124);\n$ionic-color-pumpkin-500: var(--ionic-color-pumpkin-500, #f75d07);\n$ionic-color-pumpkin-500-rgb: var(--ionic-color-pumpkin-500-rgb, 247, 93, 7);\n$ionic-color-pumpkin-600: var(--ionic-color-pumpkin-600, #da5206);\n$ionic-color-pumpkin-600-rgb: var(--ionic-color-pumpkin-600-rgb, 218, 82, 6);\n$ionic-color-pumpkin-700: var(--ionic-color-pumpkin-700, #bd4705);\n$ionic-color-pumpkin-700-rgb: var(--ionic-color-pumpkin-700-rgb, 189, 71, 5);\n$ionic-color-pumpkin-800: var(--ionic-color-pumpkin-800, #9f3c05);\n$ionic-color-pumpkin-800-rgb: var(--ionic-color-pumpkin-800-rgb, 159, 60, 5);\n$ionic-color-pumpkin-900: var(--ionic-color-pumpkin-900, #803004);\n$ionic-color-pumpkin-900-rgb: var(--ionic-color-pumpkin-900-rgb, 128, 48, 4);\n$ionic-color-pumpkin-1000: var(--ionic-color-pumpkin-1000, #602403);\n$ionic-color-pumpkin-1000-rgb: var(--ionic-color-pumpkin-1000-rgb, 96, 36, 3);\n$ionic-color-pumpkin-1100: var(--ionic-color-pumpkin-1100, #401802);\n$ionic-color-pumpkin-1100-rgb: var(--ionic-color-pumpkin-1100-rgb, 64, 24, 2);\n$ionic-color-pumpkin-1200: var(--ionic-color-pumpkin-1200, #210c01);\n$ionic-color-pumpkin-1200-rgb: var(--ionic-color-pumpkin-1200-rgb, 33, 12, 1);\n$ionic-color-orange-100: var(--ionic-color-orange-100, #fff1ea);\n$ionic-color-orange-100-rgb: var(--ionic-color-orange-100-rgb, 255, 241, 234);\n$ionic-color-orange-200: var(--ionic-color-orange-200, #ffe8db);\n$ionic-color-orange-200-rgb: var(--ionic-color-orange-200-rgb, 255, 232, 219);\n$ionic-color-orange-300: var(--ionic-color-orange-300, #ffcfb1);\n$ionic-color-orange-300-rgb: var(--ionic-color-orange-300-rgb, 255, 207, 177);\n$ionic-color-orange-400: var(--ionic-color-orange-400, #ffb37b);\n$ionic-color-orange-400-rgb: var(--ionic-color-orange-400-rgb, 255, 179, 123);\n$ionic-color-orange-500: var(--ionic-color-orange-500, #ff9400);\n$ionic-color-orange-500-rgb: var(--ionic-color-orange-500-rgb, 255, 148, 0);\n$ionic-color-orange-600: var(--ionic-color-orange-600, #e18300);\n$ionic-color-orange-600-rgb: var(--ionic-color-orange-600-rgb, 225, 131, 0);\n$ionic-color-orange-700: var(--ionic-color-orange-700, #c37100);\n$ionic-color-orange-700-rgb: var(--ionic-color-orange-700-rgb, 195, 113, 0);\n$ionic-color-orange-800: var(--ionic-color-orange-800, #a45f00);\n$ionic-color-orange-800-rgb: var(--ionic-color-orange-800-rgb, 164, 95, 0);\n$ionic-color-orange-900: var(--ionic-color-orange-900, #844d00);\n$ionic-color-orange-900-rgb: var(--ionic-color-orange-900-rgb, 132, 77, 0);\n$ionic-color-orange-1000: var(--ionic-color-orange-1000, #633a00);\n$ionic-color-orange-1000-rgb: var(--ionic-color-orange-1000-rgb, 99, 58, 0);\n$ionic-color-orange-1100: var(--ionic-color-orange-1100, #422700);\n$ionic-color-orange-1100-rgb: var(--ionic-color-orange-1100-rgb, 66, 39, 0);\n$ionic-color-orange-1200: var(--ionic-color-orange-1200, #221400);\n$ionic-color-orange-1200-rgb: var(--ionic-color-orange-1200-rgb, 34, 20, 0);\n$ionic-color-yellow-100: var(--ionic-color-yellow-100, #fff9ea);\n$ionic-color-yellow-100-rgb: var(--ionic-color-yellow-100-rgb, 255, 249, 234);\n$ionic-color-yellow-200: var(--ionic-color-yellow-200, #fff5db);\n$ionic-color-yellow-200-rgb: var(--ionic-color-yellow-200-rgb, 255, 245, 219);\n$ionic-color-yellow-300: var(--ionic-color-yellow-300, #ffebb1);\n$ionic-color-yellow-300-rgb: var(--ionic-color-yellow-300-rgb, 255, 235, 177);\n$ionic-color-yellow-400: var(--ionic-color-yellow-400, #ffe07b);\n$ionic-color-yellow-400-rgb: var(--ionic-color-yellow-400-rgb, 255, 224, 123);\n$ionic-color-yellow-500: var(--ionic-color-yellow-500, #ffd600);\n$ionic-color-yellow-500-rgb: var(--ionic-color-yellow-500-rgb, 255, 214, 0);\n$ionic-color-yellow-600: var(--ionic-color-yellow-600, #e1bd00);\n$ionic-color-yellow-600-rgb: var(--ionic-color-yellow-600-rgb, 225, 189, 0);\n$ionic-color-yellow-700: var(--ionic-color-yellow-700, #c3a400);\n$ionic-color-yellow-700-rgb: var(--ionic-color-yellow-700-rgb, 195, 164, 0);\n$ionic-color-yellow-800: var(--ionic-color-yellow-800, #a48a00);\n$ionic-color-yellow-800-rgb: var(--ionic-color-yellow-800-rgb, 164, 138, 0);\n$ionic-color-yellow-900: var(--ionic-color-yellow-900, #846f00);\n$ionic-color-yellow-900-rgb: var(--ionic-color-yellow-900-rgb, 132, 111, 0);\n$ionic-color-yellow-1000: var(--ionic-color-yellow-1000, #635300);\n$ionic-color-yellow-1000-rgb: var(--ionic-color-yellow-1000-rgb, 99, 83, 0);\n$ionic-color-yellow-1100: var(--ionic-color-yellow-1100, #423800);\n$ionic-color-yellow-1100-rgb: var(--ionic-color-yellow-1100-rgb, 66, 56, 0);\n$ionic-color-yellow-1200: var(--ionic-color-yellow-1200, #221d00);\n$ionic-color-yellow-1200-rgb: var(--ionic-color-yellow-1200-rgb, 34, 29, 0);\n$ionic-color-lime-100: var(--ionic-color-lime-100, #f3faea);\n$ionic-color-lime-100-rgb: var(--ionic-color-lime-100-rgb, 243, 250, 234);\n$ionic-color-lime-200: var(--ionic-color-lime-200, #eaf7db);\n$ionic-color-lime-200-rgb: var(--ionic-color-lime-200-rgb, 234, 247, 219);\n$ionic-color-lime-300: var(--ionic-color-lime-300, #d3efb2);\n$ionic-color-lime-300-rgb: var(--ionic-color-lime-300-rgb, 211, 239, 178);\n$ionic-color-lime-400: var(--ionic-color-lime-400, #bbe77d);\n$ionic-color-lime-400-rgb: var(--ionic-color-lime-400-rgb, 187, 231, 125);\n$ionic-color-lime-500: var(--ionic-color-lime-500, #a0df18);\n$ionic-color-lime-500-rgb: var(--ionic-color-lime-500-rgb, 160, 223, 24);\n$ionic-color-lime-600: var(--ionic-color-lime-600, #8dc515);\n$ionic-color-lime-600-rgb: var(--ionic-color-lime-600-rgb, 141, 197, 21);\n$ionic-color-lime-700: var(--ionic-color-lime-700, #7aab12);\n$ionic-color-lime-700-rgb: var(--ionic-color-lime-700-rgb, 122, 171, 18);\n$ionic-color-lime-800: var(--ionic-color-lime-800, #678f0f);\n$ionic-color-lime-800-rgb: var(--ionic-color-lime-800-rgb, 103, 143, 15);\n$ionic-color-lime-900: var(--ionic-color-lime-900, #53730c);\n$ionic-color-lime-900-rgb: var(--ionic-color-lime-900-rgb, 83, 115, 12);\n$ionic-color-lime-1000: var(--ionic-color-lime-1000, #3e5709);\n$ionic-color-lime-1000-rgb: var(--ionic-color-lime-1000-rgb, 62, 87, 9);\n$ionic-color-lime-1100: var(--ionic-color-lime-1100, #2a3a06);\n$ionic-color-lime-1100-rgb: var(--ionic-color-lime-1100-rgb, 42, 58, 6);\n$ionic-color-lime-1200: var(--ionic-color-lime-1200, #151e03);\n$ionic-color-lime-1200-rgb: var(--ionic-color-lime-1200-rgb, 21, 30, 3);\n$ionic-color-green-100: var(--ionic-color-green-100, #ebf9ec);\n$ionic-color-green-100-rgb: var(--ionic-color-green-100-rgb, 235, 249, 236);\n$ionic-color-green-200: var(--ionic-color-green-200, #dcf5de);\n$ionic-color-green-200-rgb: var(--ionic-color-green-200-rgb, 220, 245, 222);\n$ionic-color-green-300: var(--ionic-color-green-300, #b3ebb7);\n$ionic-color-green-300-rgb: var(--ionic-color-green-300-rgb, 179, 235, 183);\n$ionic-color-green-400: var(--ionic-color-green-400, #7fe089);\n$ionic-color-green-400-rgb: var(--ionic-color-green-400-rgb, 127, 224, 137);\n$ionic-color-green-500: var(--ionic-color-green-500, #23d643);\n$ionic-color-green-500-rgb: var(--ionic-color-green-500-rgb, 35, 214, 67);\n$ionic-color-green-600: var(--ionic-color-green-600, #1fbd3b);\n$ionic-color-green-600-rgb: var(--ionic-color-green-600-rgb, 31, 189, 59);\n$ionic-color-green-700: var(--ionic-color-green-700, #1ba433);\n$ionic-color-green-700-rgb: var(--ionic-color-green-700-rgb, 27, 164, 51);\n$ionic-color-green-800: var(--ionic-color-green-800, #178a2b);\n$ionic-color-green-800-rgb: var(--ionic-color-green-800-rgb, 23, 138, 43);\n$ionic-color-green-900: var(--ionic-color-green-900, #126f23);\n$ionic-color-green-900-rgb: var(--ionic-color-green-900-rgb, 18, 111, 35);\n$ionic-color-green-1000: var(--ionic-color-green-1000, #0e531a);\n$ionic-color-green-1000-rgb: var(--ionic-color-green-1000-rgb, 14, 83, 26);\n$ionic-color-green-1100: var(--ionic-color-green-1100, #093811);\n$ionic-color-green-1100-rgb: var(--ionic-color-green-1100-rgb, 9, 56, 17);\n$ionic-color-green-1200: var(--ionic-color-green-1200, #051d09);\n$ionic-color-green-1200-rgb: var(--ionic-color-green-1200-rgb, 5, 29, 9);\n$ionic-color-teal-100: var(--ionic-color-teal-100, #eaf8f5);\n$ionic-color-teal-100-rgb: var(--ionic-color-teal-100-rgb, 234, 248, 245);\n$ionic-color-teal-200: var(--ionic-color-teal-200, #dbf3ee);\n$ionic-color-teal-200-rgb: var(--ionic-color-teal-200-rgb, 219, 243, 238);\n$ionic-color-teal-300: var(--ionic-color-teal-300, #b1e7dd);\n$ionic-color-teal-300-rgb: var(--ionic-color-teal-300-rgb, 177, 231, 221);\n$ionic-color-teal-400: var(--ionic-color-teal-400, #7bdbca);\n$ionic-color-teal-400-rgb: var(--ionic-color-teal-400-rgb, 123, 219, 202);\n$ionic-color-teal-500: var(--ionic-color-teal-500, #00cfb7);\n$ionic-color-teal-500-rgb: var(--ionic-color-teal-500-rgb, 0, 207, 183);\n$ionic-color-teal-600: var(--ionic-color-teal-600, #00b7a2);\n$ionic-color-teal-600-rgb: var(--ionic-color-teal-600-rgb, 0, 183, 162);\n$ionic-color-teal-700: var(--ionic-color-teal-700, #009e8c);\n$ionic-color-teal-700-rgb: var(--ionic-color-teal-700-rgb, 0, 158, 140);\n$ionic-color-teal-800: var(--ionic-color-teal-800, #008576);\n$ionic-color-teal-800-rgb: var(--ionic-color-teal-800-rgb, 0, 133, 118);\n$ionic-color-teal-900: var(--ionic-color-teal-900, #006b5f);\n$ionic-color-teal-900-rgb: var(--ionic-color-teal-900-rgb, 0, 107, 95);\n$ionic-color-teal-1000: var(--ionic-color-teal-1000, #005147);\n$ionic-color-teal-1000-rgb: var(--ionic-color-teal-1000-rgb, 0, 81, 71);\n$ionic-color-teal-1100: var(--ionic-color-teal-1100, #003630);\n$ionic-color-teal-1100-rgb: var(--ionic-color-teal-1100-rgb, 0, 54, 48);\n$ionic-color-teal-1200: var(--ionic-color-teal-1200, #001c19);\n$ionic-color-teal-1200-rgb: var(--ionic-color-teal-1200-rgb, 0, 28, 25);\n$ionic-color-aqua-100: var(--ionic-color-aqua-100, #ebf9fe);\n$ionic-color-aqua-100-rgb: var(--ionic-color-aqua-100-rgb, 235, 249, 254);\n$ionic-color-aqua-200: var(--ionic-color-aqua-200, #dcf4fd);\n$ionic-color-aqua-200-rgb: var(--ionic-color-aqua-200-rgb, 220, 244, 253);\n$ionic-color-aqua-300: var(--ionic-color-aqua-300, #b3e9fc);\n$ionic-color-aqua-300-rgb: var(--ionic-color-aqua-300-rgb, 179, 233, 252);\n$ionic-color-aqua-400: var(--ionic-color-aqua-400, #80defa);\n$ionic-color-aqua-400-rgb: var(--ionic-color-aqua-400-rgb, 128, 222, 250);\n$ionic-color-aqua-500: var(--ionic-color-aqua-500, #27d3f9);\n$ionic-color-aqua-500-rgb: var(--ionic-color-aqua-500-rgb, 39, 211, 249);\n$ionic-color-aqua-600: var(--ionic-color-aqua-600, #22bbdc);\n$ionic-color-aqua-600-rgb: var(--ionic-color-aqua-600-rgb, 34, 187, 220);\n$ionic-color-aqua-700: var(--ionic-color-aqua-700, #1ea2bf);\n$ionic-color-aqua-700-rgb: var(--ionic-color-aqua-700-rgb, 30, 162, 191);\n$ionic-color-aqua-800: var(--ionic-color-aqua-800, #1988a0);\n$ionic-color-aqua-800-rgb: var(--ionic-color-aqua-800-rgb, 25, 136, 160);\n$ionic-color-aqua-900: var(--ionic-color-aqua-900, #146d81);\n$ionic-color-aqua-900-rgb: var(--ionic-color-aqua-900-rgb, 20, 109, 129);\n$ionic-color-aqua-1000: var(--ionic-color-aqua-1000, #0f5261);\n$ionic-color-aqua-1000-rgb: var(--ionic-color-aqua-1000-rgb, 15, 82, 97);\n$ionic-color-aqua-1100: var(--ionic-color-aqua-1100, #0a3741);\n$ionic-color-aqua-1100-rgb: var(--ionic-color-aqua-1100-rgb, 10, 55, 65);\n$ionic-color-aqua-1200: var(--ionic-color-aqua-1200, #051c21);\n$ionic-color-aqua-1200-rgb: var(--ionic-color-aqua-1200-rgb, 5, 28, 33);\n$ionic-color-blue-100: var(--ionic-color-blue-100, #f2f4fd);\n$ionic-color-blue-100-rgb: var(--ionic-color-blue-100-rgb, 242, 244, 253);\n$ionic-color-blue-200: var(--ionic-color-blue-200, #e9ecfc);\n$ionic-color-blue-200-rgb: var(--ionic-color-blue-200-rgb, 233, 236, 252);\n$ionic-color-blue-300: var(--ionic-color-blue-300, #d0d7fa);\n$ionic-color-blue-300-rgb: var(--ionic-color-blue-300-rgb, 208, 215, 250);\n$ionic-color-blue-400: var(--ionic-color-blue-400, #b5c0f7);\n$ionic-color-blue-400-rgb: var(--ionic-color-blue-400-rgb, 181, 192, 247);\n$ionic-color-blue-500: var(--ionic-color-blue-500, #94a5f4);\n$ionic-color-blue-500-rgb: var(--ionic-color-blue-500-rgb, 148, 165, 244);\n$ionic-color-blue-600: var(--ionic-color-blue-600, #6986f2);\n$ionic-color-blue-600-rgb: var(--ionic-color-blue-600-rgb, 105, 134, 242);\n$ionic-color-blue-700: var(--ionic-color-blue-700, #105cef);\n$ionic-color-blue-700-rgb: var(--ionic-color-blue-700-rgb, 16, 92, 239);\n$ionic-color-blue-800: var(--ionic-color-blue-800, #0f54da);\n$ionic-color-blue-800-rgb: var(--ionic-color-blue-800-rgb, 15, 84, 218);\n$ionic-color-blue-900: var(--ionic-color-blue-900, #0d4bc3);\n$ionic-color-blue-900-rgb: var(--ionic-color-blue-900-rgb, 13, 75, 195);\n$ionic-color-blue-1000: var(--ionic-color-blue-1000, #0b41a9);\n$ionic-color-blue-1000-rgb: var(--ionic-color-blue-1000-rgb, 11, 65, 169);\n$ionic-color-blue-1100: var(--ionic-color-blue-1100, #09358a);\n$ionic-color-blue-1100-rgb: var(--ionic-color-blue-1100-rgb, 9, 53, 138);\n$ionic-color-blue-1200: var(--ionic-color-blue-1200, #072561);\n$ionic-color-blue-1200-rgb: var(--ionic-color-blue-1200-rgb, 7, 37, 97);\n$ionic-color-indigo-100: var(--ionic-color-indigo-100, #f3f2fb);\n$ionic-color-indigo-100-rgb: var(--ionic-color-indigo-100-rgb, 243, 242, 251);\n$ionic-color-indigo-200: var(--ionic-color-indigo-200, #eae9f9);\n$ionic-color-indigo-200-rgb: var(--ionic-color-indigo-200-rgb, 234, 233, 249);\n$ionic-color-indigo-300: var(--ionic-color-indigo-300, #d3d1f2);\n$ionic-color-indigo-300-rgb: var(--ionic-color-indigo-300-rgb, 211, 209, 242);\n$ionic-color-indigo-400: var(--ionic-color-indigo-400, #bab5eb);\n$ionic-color-indigo-400-rgb: var(--ionic-color-indigo-400-rgb, 186, 181, 235);\n$ionic-color-indigo-500: var(--ionic-color-indigo-500, #9d95e4);\n$ionic-color-indigo-500-rgb: var(--ionic-color-indigo-500-rgb, 157, 149, 228);\n$ionic-color-indigo-600: var(--ionic-color-indigo-600, #786bdd);\n$ionic-color-indigo-600-rgb: var(--ionic-color-indigo-600-rgb, 120, 107, 221);\n$ionic-color-indigo-700: var(--ionic-color-indigo-700, #411bd5);\n$ionic-color-indigo-700-rgb: var(--ionic-color-indigo-700-rgb, 65, 27, 213);\n$ionic-color-indigo-800: var(--ionic-color-indigo-800, #3b19c3);\n$ionic-color-indigo-800-rgb: var(--ionic-color-indigo-800-rgb, 59, 25, 195);\n$ionic-color-indigo-900: var(--ionic-color-indigo-900, #3516ae);\n$ionic-color-indigo-900-rgb: var(--ionic-color-indigo-900-rgb, 53, 22, 174);\n$ionic-color-indigo-1000: var(--ionic-color-indigo-1000, #2e1397);\n$ionic-color-indigo-1000-rgb: var(--ionic-color-indigo-1000-rgb, 46, 19, 151);\n$ionic-color-indigo-1100: var(--ionic-color-indigo-1100, #26107b);\n$ionic-color-indigo-1100-rgb: var(--ionic-color-indigo-1100-rgb, 38, 16, 123);\n$ionic-color-indigo-1200: var(--ionic-color-indigo-1200, #1a0b57);\n$ionic-color-indigo-1200-rgb: var(--ionic-color-indigo-1200-rgb, 26, 11, 87);\n$ionic-color-violet-100: var(--ionic-color-violet-100, #f5f2fe);\n$ionic-color-violet-100-rgb: var(--ionic-color-violet-100-rgb, 245, 242, 254);\n$ionic-color-violet-200: var(--ionic-color-violet-200, #eee9fd);\n$ionic-color-violet-200-rgb: var(--ionic-color-violet-200-rgb, 238, 233, 253);\n$ionic-color-violet-300: var(--ionic-color-violet-300, #dcd1fb);\n$ionic-color-violet-300-rgb: var(--ionic-color-violet-300-rgb, 220, 209, 251);\n$ionic-color-violet-400: var(--ionic-color-violet-400, #c9b6f9);\n$ionic-color-violet-400-rgb: var(--ionic-color-violet-400-rgb, 201, 182, 249);\n$ionic-color-violet-500: var(--ionic-color-violet-500, #b396f6);\n$ionic-color-violet-500-rgb: var(--ionic-color-violet-500-rgb, 179, 150, 246);\n$ionic-color-violet-600: var(--ionic-color-violet-600, #9a6cf4);\n$ionic-color-violet-600-rgb: var(--ionic-color-violet-600-rgb, 154, 108, 244);\n$ionic-color-violet-700: var(--ionic-color-violet-700, #7c20f2);\n$ionic-color-violet-700-rgb: var(--ionic-color-violet-700-rgb, 124, 32, 242);\n$ionic-color-violet-800: var(--ionic-color-violet-800, #711ddd);\n$ionic-color-violet-800-rgb: var(--ionic-color-violet-800-rgb, 113, 29, 221);\n$ionic-color-violet-900: var(--ionic-color-violet-900, #651ac5);\n$ionic-color-violet-900-rgb: var(--ionic-color-violet-900-rgb, 101, 26, 197);\n$ionic-color-violet-1000: var(--ionic-color-violet-1000, #5817ab);\n$ionic-color-violet-1000-rgb: var(--ionic-color-violet-1000-rgb, 88, 23, 171);\n$ionic-color-violet-1100: var(--ionic-color-violet-1100, #48128c);\n$ionic-color-violet-1100-rgb: var(--ionic-color-violet-1100-rgb, 72, 18, 140);\n$ionic-color-violet-1200: var(--ionic-color-violet-1200, #330d63);\n$ionic-color-violet-1200-rgb: var(--ionic-color-violet-1200-rgb, 51, 13, 99);\n$ionic-color-purple-100: var(--ionic-color-purple-100, #f9f3fe);\n$ionic-color-purple-100-rgb: var(--ionic-color-purple-100-rgb, 249, 243, 254);\n$ionic-color-purple-200: var(--ionic-color-purple-200, #f5eafd);\n$ionic-color-purple-200-rgb: var(--ionic-color-purple-200-rgb, 245, 234, 253);\n$ionic-color-purple-300: var(--ionic-color-purple-300, #e9d3fa);\n$ionic-color-purple-300-rgb: var(--ionic-color-purple-300-rgb, 233, 211, 250);\n$ionic-color-purple-400: var(--ionic-color-purple-400, #deb9f8);\n$ionic-color-purple-400-rgb: var(--ionic-color-purple-400-rgb, 222, 185, 248);\n$ionic-color-purple-500: var(--ionic-color-purple-500, #d29bf6);\n$ionic-color-purple-500-rgb: var(--ionic-color-purple-500-rgb, 210, 155, 246);\n$ionic-color-purple-600: var(--ionic-color-purple-600, #c575f3);\n$ionic-color-purple-600-rgb: var(--ionic-color-purple-600-rgb, 197, 117, 243);\n$ionic-color-purple-700: var(--ionic-color-purple-700, #b73cf1);\n$ionic-color-purple-700-rgb: var(--ionic-color-purple-700-rgb, 183, 60, 241);\n$ionic-color-purple-800: var(--ionic-color-purple-800, #a737dc);\n$ionic-color-purple-800-rgb: var(--ionic-color-purple-800-rgb, 167, 55, 220);\n$ionic-color-purple-900: var(--ionic-color-purple-900, #9531c5);\n$ionic-color-purple-900-rgb: var(--ionic-color-purple-900-rgb, 149, 49, 197);\n$ionic-color-purple-1000: var(--ionic-color-purple-1000, #812aaa);\n$ionic-color-purple-1000-rgb: var(--ionic-color-purple-1000-rgb, 129, 42, 170);\n$ionic-color-purple-1100: var(--ionic-color-purple-1100, #6a238b);\n$ionic-color-purple-1100-rgb: var(--ionic-color-purple-1100-rgb, 106, 35, 139);\n$ionic-color-purple-1200: var(--ionic-color-purple-1200, #4b1862);\n$ionic-color-purple-1200-rgb: var(--ionic-color-purple-1200-rgb, 75, 24, 98);\n$ionic-color-magenta-100: var(--ionic-color-magenta-100, #fdf3fb);\n$ionic-color-magenta-100-rgb: var(--ionic-color-magenta-100-rgb, 253, 243, 251);\n$ionic-color-magenta-200: var(--ionic-color-magenta-200, #fcebf8);\n$ionic-color-magenta-200-rgb: var(--ionic-color-magenta-200-rgb, 252, 235, 248);\n$ionic-color-magenta-300: var(--ionic-color-magenta-300, #f9d4f1);\n$ionic-color-magenta-300-rgb: var(--ionic-color-magenta-300-rgb, 249, 212, 241);\n$ionic-color-magenta-400: var(--ionic-color-magenta-400, #f6bcea);\n$ionic-color-magenta-400-rgb: var(--ionic-color-magenta-400-rgb, 246, 188, 234);\n$ionic-color-magenta-500: var(--ionic-color-magenta-500, #f39fe3);\n$ionic-color-magenta-500-rgb: var(--ionic-color-magenta-500-rgb, 243, 159, 227);\n$ionic-color-magenta-600: var(--ionic-color-magenta-600, #f07cdb);\n$ionic-color-magenta-600-rgb: var(--ionic-color-magenta-600-rgb, 240, 124, 219);\n$ionic-color-magenta-700: var(--ionic-color-magenta-700, #ed4ad3);\n$ionic-color-magenta-700-rgb: var(--ionic-color-magenta-700-rgb, 237, 74, 211);\n$ionic-color-magenta-800: var(--ionic-color-magenta-800, #d844c1);\n$ionic-color-magenta-800-rgb: var(--ionic-color-magenta-800-rgb, 216, 68, 193);\n$ionic-color-magenta-900: var(--ionic-color-magenta-900, #c13cac);\n$ionic-color-magenta-900-rgb: var(--ionic-color-magenta-900-rgb, 193, 60, 172);\n$ionic-color-magenta-1000: var(--ionic-color-magenta-1000, #a83495);\n$ionic-color-magenta-1000-rgb: var(--ionic-color-magenta-1000-rgb, 168, 52, 149);\n$ionic-color-magenta-1100: var(--ionic-color-magenta-1100, #892b7a);\n$ionic-color-magenta-1100-rgb: var(--ionic-color-magenta-1100-rgb, 137, 43, 122);\n$ionic-color-magenta-1200: var(--ionic-color-magenta-1200, #611e56);\n$ionic-color-magenta-1200-rgb: var(--ionic-color-magenta-1200-rgb, 97, 30, 86);\n$ionic-color-pink-100: var(--ionic-color-pink-100, #fef3f5);\n$ionic-color-pink-100-rgb: var(--ionic-color-pink-100-rgb, 254, 243, 245);\n$ionic-color-pink-200: var(--ionic-color-pink-200, #fdeaee);\n$ionic-color-pink-200-rgb: var(--ionic-color-pink-200-rgb, 253, 234, 238);\n$ionic-color-pink-300: var(--ionic-color-pink-300, #fad3dc);\n$ionic-color-pink-300-rgb: var(--ionic-color-pink-300-rgb, 250, 211, 220);\n$ionic-color-pink-400: var(--ionic-color-pink-400, #f8b9c9);\n$ionic-color-pink-400-rgb: var(--ionic-color-pink-400-rgb, 248, 185, 201);\n$ionic-color-pink-500: var(--ionic-color-pink-500, #f69bb3);\n$ionic-color-pink-500-rgb: var(--ionic-color-pink-500-rgb, 246, 155, 179);\n$ionic-color-pink-600: var(--ionic-color-pink-600, #f3759a);\n$ionic-color-pink-600-rgb: var(--ionic-color-pink-600-rgb, 243, 117, 154);\n$ionic-color-pink-700: var(--ionic-color-pink-700, #f13b7d);\n$ionic-color-pink-700-rgb: var(--ionic-color-pink-700-rgb, 241, 59, 125);\n$ionic-color-pink-800: var(--ionic-color-pink-800, #dc3672);\n$ionic-color-pink-800-rgb: var(--ionic-color-pink-800-rgb, 220, 54, 114);\n$ionic-color-pink-900: var(--ionic-color-pink-900, #c53066);\n$ionic-color-pink-900-rgb: var(--ionic-color-pink-900-rgb, 197, 48, 102);\n$ionic-color-pink-1000: var(--ionic-color-pink-1000, #aa2a58);\n$ionic-color-pink-1000-rgb: var(--ionic-color-pink-1000-rgb, 170, 42, 88);\n$ionic-color-pink-1100: var(--ionic-color-pink-1100, #8b2248);\n$ionic-color-pink-1100-rgb: var(--ionic-color-pink-1100-rgb, 139, 34, 72);\n$ionic-color-pink-1200: var(--ionic-color-pink-1200, #621833);\n$ionic-color-pink-1200-rgb: var(--ionic-color-pink-1200-rgb, 98, 24, 51);\n$ionic-color-primary-100: var(--ionic-color-primary-100, #f2f4fd);\n$ionic-color-primary-100-rgb: var(--ionic-color-primary-100-rgb, 242, 244, 253);\n$ionic-color-primary-200: var(--ionic-color-primary-200, #e9ecfc);\n$ionic-color-primary-200-rgb: var(--ionic-color-primary-200-rgb, 233, 236, 252);\n$ionic-color-primary-300: var(--ionic-color-primary-300, #d0d7fa);\n$ionic-color-primary-300-rgb: var(--ionic-color-primary-300-rgb, 208, 215, 250);\n$ionic-color-primary-400: var(--ionic-color-primary-400, #b5c0f7);\n$ionic-color-primary-400-rgb: var(--ionic-color-primary-400-rgb, 181, 192, 247);\n$ionic-color-primary-500: var(--ionic-color-primary-500, #94a5f4);\n$ionic-color-primary-500-rgb: var(--ionic-color-primary-500-rgb, 148, 165, 244);\n$ionic-color-primary-600: var(--ionic-color-primary-600, #6986f2);\n$ionic-color-primary-600-rgb: var(--ionic-color-primary-600-rgb, 105, 134, 242);\n$ionic-color-primary-700: var(--ionic-color-primary-700, #105cef);\n$ionic-color-primary-700-rgb: var(--ionic-color-primary-700-rgb, 16, 92, 239);\n$ionic-color-primary-800: var(--ionic-color-primary-800, #0f54da);\n$ionic-color-primary-800-rgb: var(--ionic-color-primary-800-rgb, 15, 84, 218);\n$ionic-color-primary-900: var(--ionic-color-primary-900, #0d4bc3);\n$ionic-color-primary-900-rgb: var(--ionic-color-primary-900-rgb, 13, 75, 195);\n$ionic-color-primary-1000: var(--ionic-color-primary-1000, #0b41a9);\n$ionic-color-primary-1000-rgb: var(--ionic-color-primary-1000-rgb, 11, 65, 169);\n$ionic-color-primary-1100: var(--ionic-color-primary-1100, #09358a);\n$ionic-color-primary-1100-rgb: var(--ionic-color-primary-1100-rgb, 9, 53, 138);\n$ionic-color-primary-1200: var(--ionic-color-primary-1200, #072561);\n$ionic-color-primary-1200-rgb: var(--ionic-color-primary-1200-rgb, 7, 37, 97);\n$ionic-color-primary-base: var(--ionic-color-primary-base, #105cef);\n$ionic-color-primary-base-rgb: var(--ionic-color-primary-base-rgb, 16, 92, 239);\n$ionic-color-info-100: var(--ionic-color-info-100, #ebf9fe);\n$ionic-color-info-100-rgb: var(--ionic-color-info-100-rgb, 235, 249, 254);\n$ionic-color-info-200: var(--ionic-color-info-200, #dcf4fd);\n$ionic-color-info-200-rgb: var(--ionic-color-info-200-rgb, 220, 244, 253);\n$ionic-color-info-300: var(--ionic-color-info-300, #b3e9fc);\n$ionic-color-info-300-rgb: var(--ionic-color-info-300-rgb, 179, 233, 252);\n$ionic-color-info-400: var(--ionic-color-info-400, #80defa);\n$ionic-color-info-400-rgb: var(--ionic-color-info-400-rgb, 128, 222, 250);\n$ionic-color-info-500: var(--ionic-color-info-500, #27d3f9);\n$ionic-color-info-500-rgb: var(--ionic-color-info-500-rgb, 39, 211, 249);\n$ionic-color-info-600: var(--ionic-color-info-600, #22bbdc);\n$ionic-color-info-600-rgb: var(--ionic-color-info-600-rgb, 34, 187, 220);\n$ionic-color-info-700: var(--ionic-color-info-700, #1ea2bf);\n$ionic-color-info-700-rgb: var(--ionic-color-info-700-rgb, 30, 162, 191);\n$ionic-color-info-800: var(--ionic-color-info-800, #1988a0);\n$ionic-color-info-800-rgb: var(--ionic-color-info-800-rgb, 25, 136, 160);\n$ionic-color-info-900: var(--ionic-color-info-900, #146d81);\n$ionic-color-info-900-rgb: var(--ionic-color-info-900-rgb, 20, 109, 129);\n$ionic-color-info-1000: var(--ionic-color-info-1000, #0f5261);\n$ionic-color-info-1000-rgb: var(--ionic-color-info-1000-rgb, 15, 82, 97);\n$ionic-color-info-1100: var(--ionic-color-info-1100, #0a3741);\n$ionic-color-info-1100-rgb: var(--ionic-color-info-1100-rgb, 10, 55, 65);\n$ionic-color-info-1200: var(--ionic-color-info-1200, #051c21);\n$ionic-color-info-1200-rgb: var(--ionic-color-info-1200-rgb, 5, 28, 33);\n$ionic-color-info-base: var(--ionic-color-info-base, #1ea2bf);\n$ionic-color-info-base-rgb: var(--ionic-color-info-base-rgb, 30, 162, 191);\n$ionic-color-warning-100: var(--ionic-color-warning-100, #fff1ea);\n$ionic-color-warning-100-rgb: var(--ionic-color-warning-100-rgb, 255, 241, 234);\n$ionic-color-warning-200: var(--ionic-color-warning-200, #ffe8db);\n$ionic-color-warning-200-rgb: var(--ionic-color-warning-200-rgb, 255, 232, 219);\n$ionic-color-warning-300: var(--ionic-color-warning-300, #ffcfb1);\n$ionic-color-warning-300-rgb: var(--ionic-color-warning-300-rgb, 255, 207, 177);\n$ionic-color-warning-400: var(--ionic-color-warning-400, #ffb37b);\n$ionic-color-warning-400-rgb: var(--ionic-color-warning-400-rgb, 255, 179, 123);\n$ionic-color-warning-500: var(--ionic-color-warning-500, #ff9400);\n$ionic-color-warning-500-rgb: var(--ionic-color-warning-500-rgb, 255, 148, 0);\n$ionic-color-warning-600: var(--ionic-color-warning-600, #e18300);\n$ionic-color-warning-600-rgb: var(--ionic-color-warning-600-rgb, 225, 131, 0);\n$ionic-color-warning-700: var(--ionic-color-warning-700, #c37100);\n$ionic-color-warning-700-rgb: var(--ionic-color-warning-700-rgb, 195, 113, 0);\n$ionic-color-warning-800: var(--ionic-color-warning-800, #a45f00);\n$ionic-color-warning-800-rgb: var(--ionic-color-warning-800-rgb, 164, 95, 0);\n$ionic-color-warning-900: var(--ionic-color-warning-900, #844d00);\n$ionic-color-warning-900-rgb: var(--ionic-color-warning-900-rgb, 132, 77, 0);\n$ionic-color-warning-1000: var(--ionic-color-warning-1000, #633a00);\n$ionic-color-warning-1000-rgb: var(--ionic-color-warning-1000-rgb, 99, 58, 0);\n$ionic-color-warning-1100: var(--ionic-color-warning-1100, #422700);\n$ionic-color-warning-1100-rgb: var(--ionic-color-warning-1100-rgb, 66, 39, 0);\n$ionic-color-warning-1200: var(--ionic-color-warning-1200, #221400);\n$ionic-color-warning-1200-rgb: var(--ionic-color-warning-1200-rgb, 34, 20, 0);\n$ionic-color-warning-base: var(--ionic-color-warning-base, #c37100);\n$ionic-color-warning-base-rgb: var(--ionic-color-warning-base-rgb, 195, 113, 0);\n$ionic-color-danger-100: var(--ionic-color-danger-100, #feeded);\n$ionic-color-danger-100-rgb: var(--ionic-color-danger-100-rgb, 254, 237, 237);\n$ionic-color-danger-200: var(--ionic-color-danger-200, #fde1e1);\n$ionic-color-danger-200-rgb: var(--ionic-color-danger-200-rgb, 253, 225, 225);\n$ionic-color-danger-300: var(--ionic-color-danger-300, #fcc1c1);\n$ionic-color-danger-300-rgb: var(--ionic-color-danger-300-rgb, 252, 193, 193);\n$ionic-color-danger-400: var(--ionic-color-danger-400, #faa1a1);\n$ionic-color-danger-400-rgb: var(--ionic-color-danger-400-rgb, 250, 161, 161);\n$ionic-color-danger-500: var(--ionic-color-danger-500, #f97d7d);\n$ionic-color-danger-500-rgb: var(--ionic-color-danger-500-rgb, 249, 125, 125);\n$ionic-color-danger-600: var(--ionic-color-danger-600, #f85151);\n$ionic-color-danger-600-rgb: var(--ionic-color-danger-600-rgb, 248, 81, 81);\n$ionic-color-danger-700: var(--ionic-color-danger-700, #e52929);\n$ionic-color-danger-700-rgb: var(--ionic-color-danger-700-rgb, 229, 41, 41);\n$ionic-color-danger-800: var(--ionic-color-danger-800, #bf2222);\n$ionic-color-danger-800-rgb: var(--ionic-color-danger-800-rgb, 191, 34, 34);\n$ionic-color-danger-900: var(--ionic-color-danger-900, #991b1b);\n$ionic-color-danger-900-rgb: var(--ionic-color-danger-900-rgb, 153, 27, 27);\n$ionic-color-danger-1000: var(--ionic-color-danger-1000, #761515);\n$ionic-color-danger-1000-rgb: var(--ionic-color-danger-1000-rgb, 118, 21, 21);\n$ionic-color-danger-1100: var(--ionic-color-danger-1100, #540f0f);\n$ionic-color-danger-1100-rgb: var(--ionic-color-danger-1100-rgb, 84, 15, 15);\n$ionic-color-danger-1200: var(--ionic-color-danger-1200, #330909);\n$ionic-color-danger-1200-rgb: var(--ionic-color-danger-1200-rgb, 51, 9, 9);\n$ionic-color-danger-base: var(--ionic-color-danger-base, #e52929);\n$ionic-color-danger-base-rgb: var(--ionic-color-danger-base-rgb, 229, 41, 41);\n$ionic-color-success-100: var(--ionic-color-success-100, #ebf9ec);\n$ionic-color-success-100-rgb: var(--ionic-color-success-100-rgb, 235, 249, 236);\n$ionic-color-success-200: var(--ionic-color-success-200, #dcf5de);\n$ionic-color-success-200-rgb: var(--ionic-color-success-200-rgb, 220, 245, 222);\n$ionic-color-success-300: var(--ionic-color-success-300, #b3ebb7);\n$ionic-color-success-300-rgb: var(--ionic-color-success-300-rgb, 179, 235, 183);\n$ionic-color-success-400: var(--ionic-color-success-400, #7fe089);\n$ionic-color-success-400-rgb: var(--ionic-color-success-400-rgb, 127, 224, 137);\n$ionic-color-success-500: var(--ionic-color-success-500, #23d643);\n$ionic-color-success-500-rgb: var(--ionic-color-success-500-rgb, 35, 214, 67);\n$ionic-color-success-600: var(--ionic-color-success-600, #1fbd3b);\n$ionic-color-success-600-rgb: var(--ionic-color-success-600-rgb, 31, 189, 59);\n$ionic-color-success-700: var(--ionic-color-success-700, #1ba433);\n$ionic-color-success-700-rgb: var(--ionic-color-success-700-rgb, 27, 164, 51);\n$ionic-color-success-800: var(--ionic-color-success-800, #178a2b);\n$ionic-color-success-800-rgb: var(--ionic-color-success-800-rgb, 23, 138, 43);\n$ionic-color-success-900: var(--ionic-color-success-900, #126f23);\n$ionic-color-success-900-rgb: var(--ionic-color-success-900-rgb, 18, 111, 35);\n$ionic-color-success-1000: var(--ionic-color-success-1000, #0e531a);\n$ionic-color-success-1000-rgb: var(--ionic-color-success-1000-rgb, 14, 83, 26);\n$ionic-color-success-1100: var(--ionic-color-success-1100, #093811);\n$ionic-color-success-1100-rgb: var(--ionic-color-success-1100-rgb, 9, 56, 17);\n$ionic-color-success-1200: var(--ionic-color-success-1200, #051d09);\n$ionic-color-success-1200-rgb: var(--ionic-color-success-1200-rgb, 5, 29, 9);\n$ionic-color-success-base: var(--ionic-color-success-base, #1ba433);\n$ionic-color-success-base-rgb: var(--ionic-color-success-base-rgb, 27, 164, 51);\n$ionic-z-index-0: var(--ionic-z-index-0, 0);\n$ionic-z-index-1: var(--ionic-z-index-1, 100);\n$ionic-z-index-2: var(--ionic-z-index-2, 200);\n$ionic-z-index-3: var(--ionic-z-index-3, 300);\n$ionic-z-index-4: var(--ionic-z-index-4, 400);\n$ionic-z-index-500: var(--ionic-z-index-500, 500);\n$ionic-z-index-bottom: var(--ionic-z-index-bottom, -99999);\n$ionic-z-index-top: var(--ionic-z-index-top, 99999);\n$ionic-scale-0: var(--ionic-scale-0, 0px);\n$ionic-scale-100: var(--ionic-scale-100, 4px);\n$ionic-scale-150: var(--ionic-scale-150, 6px);\n$ionic-scale-200: var(--ionic-scale-200, 8px);\n$ionic-scale-250: var(--ionic-scale-250, 10px);\n$ionic-scale-300: var(--ionic-scale-300, 12px);\n$ionic-scale-400: var(--ionic-scale-400, 16px);\n$ionic-scale-500: var(--ionic-scale-500, 20px);\n$ionic-scale-600: var(--ionic-scale-600, 24px);\n$ionic-scale-700: var(--ionic-scale-700, 28px);\n$ionic-scale-800: var(--ionic-scale-800, 32px);\n$ionic-scale-850: var(--ionic-scale-850, 34px);\n$ionic-scale-900: var(--ionic-scale-900, 36px);\n$ionic-scale-1000: var(--ionic-scale-1000, 40px);\n$ionic-scale-1100: var(--ionic-scale-1100, 44px);\n$ionic-scale-1200: var(--ionic-scale-1200, 48px);\n$ionic-scale-1400: var(--ionic-scale-1400, 56px);\n$ionic-scale-1600: var(--ionic-scale-1600, 64px);\n$ionic-scale-1800: var(--ionic-scale-1800, 72px);\n$ionic-scale-2000: var(--ionic-scale-2000, 80px);\n$ionic-scale-2400: var(--ionic-scale-2400, 96px);\n$ionic-scale-2800: var(--ionic-scale-2800, 112px);\n$ionic-scale-3200: var(--ionic-scale-3200, 128px);\n$ionic-scale-3400: var(--ionic-scale-3400, 136px);\n$ionic-scale-3600: var(--ionic-scale-3600, 144px);\n$ionic-scale-4000: var(--ionic-scale-4000, 160px);\n$ionic-scale-5000: var(--ionic-scale-5000, 200px);\n$ionic-scale-6200: var(--ionic-scale-6200, 248px);\n$ionic-scale-7400: var(--ionic-scale-7400, 296px);\n$ionic-scale-9000: var(--ionic-scale-9000, 360px);\n$ionic-scale-025: var(--ionic-scale-025, 1px);\n$ionic-scale-050: var(--ionic-scale-050, 2px);\n$ionic-scale-075: var(--ionic-scale-075, 3px);\n$ionic-font-family: var(--ionic-font-family, \"Inter\", sans-serif);\n$ionic-state-focus-0: var(--ionic-state-focus-0, none);\n$ionic-state-focus-1: var(--ionic-state-focus-1, #9ec4fd);\n$ionic-state-focus-1-rgb: var(--ionic-state-focus-1-rgb, 158, 196, 253);\n$ionic-state-focus-2: var(--ionic-state-focus-2, #ffafaf);\n$ionic-state-focus-2-rgb: var(--ionic-state-focus-2-rgb, 255, 175, 175);\n$ionic-state-disabled: var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));\n$ionic-state-hover: var(--ionic-state-hover, rgba(36, 36, 36, 0.04));\n$ionic-state-pressed: var(--ionic-state-pressed, rgba(36, 36, 36, 0.08));\n\n$ionic-display-sm-regular: (\n font-size: $ionic-font-size-800,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-1100,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-display-sm-light: (\n font-size: $ionic-font-size-800,\n font-style: normal,\n font-weight: $ionic-font-weight-light,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-1100,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-display-lg-regular: (\n font-size: $ionic-font-size-900,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-1200,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-display-lg-light: (\n font-size: $ionic-font-size-900,\n font-style: normal,\n font-weight: $ionic-font-weight-light,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-1200,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h1-regular: (\n font-size: $ionic-font-size-700,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h1-medium: (\n font-size: $ionic-font-size-700,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h1-semi-bold: (\n font-size: $ionic-font-size-600,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h1-bold: (\n font-size: $ionic-font-size-700,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h2-regular: (\n font-size: $ionic-font-size-650,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h2-medium: (\n font-size: $ionic-font-size-650,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h2-semi-bold: (\n font-size: $ionic-font-size-650,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h2-bold: (\n font-size: $ionic-font-size-650,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h3-regular: (\n font-size: $ionic-font-size-600,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-800,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h3-medium: (\n font-size: $ionic-font-size-600,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-800,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h3-semi-bold: (\n font-size: $ionic-font-size-600,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-800,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h3-bold: (\n font-size: $ionic-font-size-600,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-800,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h4-regular: (\n font-size: $ionic-font-size-550,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h4-medium: (\n font-size: $ionic-font-size-550,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h4-semi-bold: (\n font-size: $ionic-font-size-550,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h4-bold: (\n font-size: $ionic-font-size-550,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h5-regular: (\n font-size: $ionic-font-size-500,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h5-medium: (\n font-size: $ionic-font-size-500,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h5-semi-bold: (\n font-size: $ionic-font-size-500,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h5-bold: (\n font-size: $ionic-font-size-500,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h6-regular: (\n font-size: $ionic-font-size-450,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h6-medium: (\n font-size: $ionic-font-size-450,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h6-semi-bold: (\n font-size: $ionic-font-size-450,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h6-bold: (\n font-size: $ionic-font-size-450,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-lg-regular: (\n font-size: $ionic-font-size-400,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-lg-medium: (\n font-size: $ionic-font-size-400,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-lg-semi-bold: (\n font-size: $ionic-font-size-400,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-lg-bold: (\n font-size: $ionic-font-size-400,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-lg-link: (\n font-size: $ionic-font-size-400,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: underline,\n);\n\n$ionic-body-lg-italic: (\n font-size: $ionic-font-size-400,\n font-style: italic,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-md-regular: (\n font-size: $ionic-font-size-350,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-md-medium: (\n font-size: $ionic-font-size-350,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-md-semi-bold: (\n font-size: $ionic-font-size-350,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-md-bold: (\n font-size: $ionic-font-size-350,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-md-link: (\n font-size: $ionic-font-size-350,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: underline,\n);\n\n$ionic-body-md-italic: (\n font-size: $ionic-font-size-350,\n font-style: italic,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-sm-regular: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-sm-medium: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-sm-semi-bold: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-sm-bold: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-sm-link: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: underline,\n);\n\n$ionic-body-sm-italic: (\n font-size: $ionic-font-size-300,\n font-style: italic,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-action-xl: (\n font-size: $ionic-font-size-500,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-1,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-action-lg: (\n font-size: $ionic-font-size-400,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-1,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-action-md: (\n font-size: $ionic-font-size-350,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-1,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-action-sm: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-1,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-overline-regular: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-2,\n line-height: $ionic-line-height-500,\n text-transform: uppercase,\n text-decoration: none,\n);\n\n$ionic-overline-medium: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-2,\n line-height: $ionic-line-height-500,\n text-transform: uppercase,\n text-decoration: none,\n);\n\n$ionic-overline-semi-bold: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-2,\n line-height: $ionic-line-height-500,\n text-transform: uppercase,\n text-decoration: none,\n);\n\n$ionic-overline-bold: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-2,\n line-height: $ionic-line-height-500,\n text-transform: uppercase,\n text-decoration: none,\n);\n","// Ionic Mixins\n// forward the global mixin to be used on component scope\n@forward \"../mixins\";\n// use global mixins on this ionic.mixin context\n@use \"../mixins\" as mixins;\n@use \"../../foundations/ionic.vars.scss\" as tokens;\n\n// Disabled mixin to be used on pseudo elements for the Ionic Theme disabled state\n//\n// ex: :host(.checkbox-disabled) .native-wrapper:after {\n// @include globals.disable-state();\n// }\n//\n// --------------------------------------------------\n@mixin disabled-state() {\n @include mixins.position(0, 0, 0, 0);\n\n position: absolute;\n\n background-color: tokens.$ionic-state-disabled;\n\n content: \"\";\n\n pointer-events: none;\n}\n\n// Typography mixin to be used with typography scss variables (ionic.vars.scss)\n//\n// ex: @include typography($ionic-heading-h3-medium);\n//\n// --------------------------------------------------\n@mixin typography($properties) {\n font-family: map-get($properties, font-family);\n font-size: map-get($properties, font-size);\n font-weight: map-get($properties, font-weight);\n\n letter-spacing: map-get($properties, letter-spacing);\n line-height: map-get($properties, line-height);\n\n text-decoration: map-get($properties, text-decoration);\n text-transform: map-get($properties, text-transform);\n}\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/css/ionic/typography.ionic.scss","../../src/foundations/ionic.vars.scss","../../src/themes/ionic/ionic.mixins.scss"],"names":[],"mappings":"AAGA,KACE,YCsoBkB,8CDnoBpB,KE2CE,+CACA,kDAEA,gDACA,+CAEA,qBACA,oBF7CF,GEsCE,8CACA,kDAEA,gDACA,+CAEA,qBACA,oBFzCF,GEkCE,+CACA,kDAEA,gDACA,+CAEA,qBACA,oBFrCF,GE8BE,6CACA,kDAEA,gDACA,+CAEA,qBACA,oBFjCF,GE0BE,+CACA,kDAEA,gDACA,+CAEA,qBACA,oBF7BF,GEsBE,8CACA,kDAEA,gDACA,+CAEA,qBACA,oBFzBF,GEkBE,+CACA,kDAEA,gDACA,+CAEA,qBACA","file":"typography.ionic.css","sourcesContent":["@use \"../../themes/ionic/ionic.globals.scss\" as globals;\n\n// TODO(ROU-10833): add font loading solution here, as a @font-face, base64 or cdn\nhtml {\n font-family: globals.$ionic-font-family;\n}\n\nbody {\n @include globals.typography(globals.$ionic-body-md-regular);\n}\n\n/* Override html headings based on heading tokens */\nh1 {\n @include globals.typography(globals.$ionic-heading-h1-regular);\n}\n\nh2 {\n @include globals.typography(globals.$ionic-heading-h2-regular);\n}\n\nh3 {\n @include globals.typography(globals.$ionic-heading-h3-regular);\n}\n\nh4 {\n @include globals.typography(globals.$ionic-heading-h4-regular);\n}\n\nh5 {\n @include globals.typography(globals.$ionic-heading-h5-regular);\n}\n\nh6 {\n @include globals.typography(globals.$ionic-heading-h6-regular);\n}\n","/**\n * This is an auto-generated file, please do not change it directly.\n * Ionic Design System\n */\n\n@use \"../themes/functions.sizes\" as font;\n\n$ionic-elevation-100: var(\n --ionic-elevation-100,\n 0px 3px 9px 0px rgba(0, 0, 0, 0.07),\n 0px 0px 4px 0px rgba(0, 0, 0, 0.04)\n);\n$ionic-elevation-200: var(\n --ionic-elevation-200,\n 0px 8px 25px 0px rgba(0, 0, 0, 0.08),\n 0px 1px 5px 0px rgba(0, 0, 0, 0.05)\n);\n$ionic-elevation-300: var(\n --ionic-elevation-300,\n 0px 6px 32px 0px rgba(0, 0, 0, 0.16),\n 0px 2px 7px 0px rgba(0, 0, 0, 0.05)\n);\n$ionic-elevation-400: var(\n --ionic-elevation-400,\n 0px 15px 48px 0px rgba(0, 0, 0, 0.18),\n 0px 3px 12px 0px rgba(0, 0, 0, 0.12)\n);\n$ionic-elevation-500: var(\n --ionic-elevation-500,\n 0px 3px 9px 0px rgba(6, 43, 99, 0.07),\n 0px 0px 4px 0px rgba(6, 43, 99, 0.04)\n);\n$ionic-elevation-600: var(\n --ionic-elevation-600,\n 0px 8px 25px 0px rgba(6, 43, 99, 0.08),\n 0px 1px 5px 0px rgba(6, 43, 99, 0.05)\n);\n$ionic-elevation-700: var(\n --ionic-elevation-700,\n 0px 15px 32px 0px rgba(6, 43, 99, 0.09),\n 0px 2px 7px 0px rgba(6, 43, 99, 0.05)\n);\n$ionic-elevation-800: var(\n --ionic-elevation-800,\n 0px 20px 48px 0px rgba(6, 43, 99, 0.12),\n 0px 3px 14px 0px rgba(6, 43, 99, 0.12)\n);\n$ionic-font-size-275: var(--ionic-font-size-275, font.px-to-rem(11));\n$ionic-font-size-300: var(--ionic-font-size-300, font.px-to-rem(12));\n$ionic-font-size-350: var(--ionic-font-size-350, font.px-to-rem(14));\n$ionic-font-size-400: var(--ionic-font-size-400, font.px-to-rem(16));\n$ionic-font-size-450: var(--ionic-font-size-450, font.px-to-rem(18));\n$ionic-font-size-500: var(--ionic-font-size-500, font.px-to-rem(20));\n$ionic-font-size-550: var(--ionic-font-size-550, font.px-to-rem(22));\n$ionic-font-size-600: var(--ionic-font-size-600, font.px-to-rem(24));\n$ionic-font-size-650: var(--ionic-font-size-650, font.px-to-rem(26));\n$ionic-font-size-700: var(--ionic-font-size-700, font.px-to-rem(28));\n$ionic-font-size-800: var(--ionic-font-size-800, font.px-to-rem(32));\n$ionic-font-size-900: var(--ionic-font-size-900, font.px-to-rem(36));\n$ionic-font-weight-thin: var(--ionic-font-weight-thin, 100);\n$ionic-font-weight-extra-light: var(--ionic-font-weight-extra-light, 200);\n$ionic-font-weight-light: var(--ionic-font-weight-light, 300);\n$ionic-font-weight-regular: var(--ionic-font-weight-regular, 400);\n$ionic-font-weight-medium: var(--ionic-font-weight-medium, 500);\n$ionic-font-weight-semi-bold: var(--ionic-font-weight-semi-bold, 600);\n$ionic-font-weight-bold: var(--ionic-font-weight-bold, 700);\n$ionic-font-weight-extra-bold: var(--ionic-font-weight-extra-bold, 800);\n$ionic-font-weight-black: var(--ionic-font-weight-black, 900);\n$ionic-letter-spacing-0: var(--ionic-letter-spacing-0, 0);\n$ionic-letter-spacing-1: var(--ionic-letter-spacing-1, 1%);\n$ionic-letter-spacing-2: var(--ionic-letter-spacing-2, 1.5%);\n$ionic-line-height-300: var(--ionic-line-height-300, 12px);\n$ionic-line-height-400: var(--ionic-line-height-400, 16px);\n$ionic-line-height-500: var(--ionic-line-height-500, 20px);\n$ionic-line-height-600: var(--ionic-line-height-600, 24px);\n$ionic-line-height-700: var(--ionic-line-height-700, 28px);\n$ionic-line-height-800: var(--ionic-line-height-800, 32px);\n$ionic-line-height-900: var(--ionic-line-height-900, 36px);\n$ionic-line-height-1100: var(--ionic-line-height-1100, 44px);\n$ionic-line-height-1200: var(--ionic-line-height-1200, 48px);\n$ionic-line-height-full: var(--ionic-line-height-full, 100%);\n$ionic-space-0: var(--ionic-space-0, 0px);\n$ionic-space-100: var(--ionic-space-100, 4px);\n$ionic-space-150: var(--ionic-space-150, 6px);\n$ionic-space-200: var(--ionic-space-200, 8px);\n$ionic-space-250: var(--ionic-space-250, 10px);\n$ionic-space-300: var(--ionic-space-300, 12px);\n$ionic-space-400: var(--ionic-space-400, 16px);\n$ionic-space-500: var(--ionic-space-500, 20px);\n$ionic-space-600: var(--ionic-space-600, 24px);\n$ionic-space-700: var(--ionic-space-700, 28px);\n$ionic-space-800: var(--ionic-space-800, 32px);\n$ionic-space-850: var(--ionic-space-850, 34px);\n$ionic-space-900: var(--ionic-space-900, 36px);\n$ionic-space-1000: var(--ionic-space-1000, 40px);\n$ionic-space-1200: var(--ionic-space-1200, 48px);\n$ionic-space-050: var(--ionic-space-050, 2px);\n$ionic-border-radius-0: var(--ionic-border-radius-0, 0px);\n$ionic-border-radius-100: var(--ionic-border-radius-100, 4px);\n$ionic-border-radius-200: var(--ionic-border-radius-200, 8px);\n$ionic-border-radius-300: var(--ionic-border-radius-300, 12px);\n$ionic-border-radius-400: var(--ionic-border-radius-400, 16px);\n$ionic-border-radius-500: var(--ionic-border-radius-500, 20px);\n$ionic-border-radius-800: var(--ionic-border-radius-800, 32px);\n$ionic-border-radius-1000: var(--ionic-border-radius-1000, 40px);\n$ionic-border-radius-050: var(--ionic-border-radius-050, 2px);\n$ionic-border-radius-full: var(--ionic-border-radius-full, 999px);\n$ionic-border-size-0: var(--ionic-border-size-0, 0px);\n$ionic-border-size-025: var(--ionic-border-size-025, 1px);\n$ionic-border-size-050: var(--ionic-border-size-050, 2px);\n$ionic-border-size-075: var(--ionic-border-size-075, 3px);\n$ionic-border-style-none: var(--ionic-border-style-none, none);\n$ionic-border-style-solid: var(--ionic-border-style-solid, solid);\n$ionic-border-style-dashed: var(--ionic-border-style-dashed, dashed);\n$ionic-border-style-dotted: var(--ionic-border-style-dotted, dotted);\n$ionic-color-base-white: var(--ionic-color-base-white, #ffffff);\n$ionic-color-base-white-rgb: var(--ionic-color-base-white-rgb, 255, 255, 255);\n$ionic-color-base-black: var(--ionic-color-base-black, #111111);\n$ionic-color-base-black-rgb: var(--ionic-color-base-black-rgb, 17, 17, 17);\n$ionic-color-neutral-100: var(--ionic-color-neutral-100, #f1f1f1);\n$ionic-color-neutral-100-rgb: var(--ionic-color-neutral-100-rgb, 241, 241, 241);\n$ionic-color-neutral-200: var(--ionic-color-neutral-200, #e7e7e7);\n$ionic-color-neutral-200-rgb: var(--ionic-color-neutral-200-rgb, 231, 231, 231);\n$ionic-color-neutral-300: var(--ionic-color-neutral-300, #cfcfcf);\n$ionic-color-neutral-300-rgb: var(--ionic-color-neutral-300-rgb, 207, 207, 207);\n$ionic-color-neutral-400: var(--ionic-color-neutral-400, #b9b9b9);\n$ionic-color-neutral-400-rgb: var(--ionic-color-neutral-400-rgb, 185, 185, 185);\n$ionic-color-neutral-500: var(--ionic-color-neutral-500, #a2a2a2);\n$ionic-color-neutral-500-rgb: var(--ionic-color-neutral-500-rgb, 162, 162, 162);\n$ionic-color-neutral-600: var(--ionic-color-neutral-600, #8c8c8c);\n$ionic-color-neutral-600-rgb: var(--ionic-color-neutral-600-rgb, 140, 140, 140);\n$ionic-color-neutral-700: var(--ionic-color-neutral-700, #777777);\n$ionic-color-neutral-700-rgb: var(--ionic-color-neutral-700-rgb, 119, 119, 119);\n$ionic-color-neutral-800: var(--ionic-color-neutral-800, #626262);\n$ionic-color-neutral-800-rgb: var(--ionic-color-neutral-800-rgb, 98, 98, 98);\n$ionic-color-neutral-900: var(--ionic-color-neutral-900, #4e4e4e);\n$ionic-color-neutral-900-rgb: var(--ionic-color-neutral-900-rgb, 78, 78, 78);\n$ionic-color-neutral-1000: var(--ionic-color-neutral-1000, #3b3b3b);\n$ionic-color-neutral-1000-rgb: var(--ionic-color-neutral-1000-rgb, 59, 59, 59);\n$ionic-color-neutral-1100: var(--ionic-color-neutral-1100, #292929);\n$ionic-color-neutral-1100-rgb: var(--ionic-color-neutral-1100-rgb, 41, 41, 41);\n$ionic-color-neutral-1200: var(--ionic-color-neutral-1200, #242424);\n$ionic-color-neutral-1200-rgb: var(--ionic-color-neutral-1200-rgb, 36, 36, 36);\n$ionic-color-red-100: var(--ionic-color-red-100, #feeded);\n$ionic-color-red-100-rgb: var(--ionic-color-red-100-rgb, 254, 237, 237);\n$ionic-color-red-200: var(--ionic-color-red-200, #fde1e1);\n$ionic-color-red-200-rgb: var(--ionic-color-red-200-rgb, 253, 225, 225);\n$ionic-color-red-300: var(--ionic-color-red-300, #fcc1c1);\n$ionic-color-red-300-rgb: var(--ionic-color-red-300-rgb, 252, 193, 193);\n$ionic-color-red-400: var(--ionic-color-red-400, #faa1a1);\n$ionic-color-red-400-rgb: var(--ionic-color-red-400-rgb, 250, 161, 161);\n$ionic-color-red-500: var(--ionic-color-red-500, #f97d7d);\n$ionic-color-red-500-rgb: var(--ionic-color-red-500-rgb, 249, 125, 125);\n$ionic-color-red-600: var(--ionic-color-red-600, #f85151);\n$ionic-color-red-600-rgb: var(--ionic-color-red-600-rgb, 248, 81, 81);\n$ionic-color-red-700: var(--ionic-color-red-700, #e52929);\n$ionic-color-red-700-rgb: var(--ionic-color-red-700-rgb, 229, 41, 41);\n$ionic-color-red-800: var(--ionic-color-red-800, #bf2222);\n$ionic-color-red-800-rgb: var(--ionic-color-red-800-rgb, 191, 34, 34);\n$ionic-color-red-900: var(--ionic-color-red-900, #991b1b);\n$ionic-color-red-900-rgb: var(--ionic-color-red-900-rgb, 153, 27, 27);\n$ionic-color-red-1000: var(--ionic-color-red-1000, #761515);\n$ionic-color-red-1000-rgb: var(--ionic-color-red-1000-rgb, 118, 21, 21);\n$ionic-color-red-1100: var(--ionic-color-red-1100, #540f0f);\n$ionic-color-red-1100-rgb: var(--ionic-color-red-1100-rgb, 84, 15, 15);\n$ionic-color-red-1200: var(--ionic-color-red-1200, #330909);\n$ionic-color-red-1200-rgb: var(--ionic-color-red-1200-rgb, 51, 9, 9);\n$ionic-color-pumpkin-100: var(--ionic-color-pumpkin-100, #feedea);\n$ionic-color-pumpkin-100-rgb: var(--ionic-color-pumpkin-100-rgb, 254, 237, 234);\n$ionic-color-pumpkin-200: var(--ionic-color-pumpkin-200, #fde0db);\n$ionic-color-pumpkin-200-rgb: var(--ionic-color-pumpkin-200-rgb, 253, 224, 219);\n$ionic-color-pumpkin-300: var(--ionic-color-pumpkin-300, #fbbdb1);\n$ionic-color-pumpkin-300-rgb: var(--ionic-color-pumpkin-300-rgb, 251, 189, 177);\n$ionic-color-pumpkin-400: var(--ionic-color-pumpkin-400, #f9947c);\n$ionic-color-pumpkin-400-rgb: var(--ionic-color-pumpkin-400-rgb, 249, 148, 124);\n$ionic-color-pumpkin-500: var(--ionic-color-pumpkin-500, #f75d07);\n$ionic-color-pumpkin-500-rgb: var(--ionic-color-pumpkin-500-rgb, 247, 93, 7);\n$ionic-color-pumpkin-600: var(--ionic-color-pumpkin-600, #da5206);\n$ionic-color-pumpkin-600-rgb: var(--ionic-color-pumpkin-600-rgb, 218, 82, 6);\n$ionic-color-pumpkin-700: var(--ionic-color-pumpkin-700, #bd4705);\n$ionic-color-pumpkin-700-rgb: var(--ionic-color-pumpkin-700-rgb, 189, 71, 5);\n$ionic-color-pumpkin-800: var(--ionic-color-pumpkin-800, #9f3c05);\n$ionic-color-pumpkin-800-rgb: var(--ionic-color-pumpkin-800-rgb, 159, 60, 5);\n$ionic-color-pumpkin-900: var(--ionic-color-pumpkin-900, #803004);\n$ionic-color-pumpkin-900-rgb: var(--ionic-color-pumpkin-900-rgb, 128, 48, 4);\n$ionic-color-pumpkin-1000: var(--ionic-color-pumpkin-1000, #602403);\n$ionic-color-pumpkin-1000-rgb: var(--ionic-color-pumpkin-1000-rgb, 96, 36, 3);\n$ionic-color-pumpkin-1100: var(--ionic-color-pumpkin-1100, #401802);\n$ionic-color-pumpkin-1100-rgb: var(--ionic-color-pumpkin-1100-rgb, 64, 24, 2);\n$ionic-color-pumpkin-1200: var(--ionic-color-pumpkin-1200, #210c01);\n$ionic-color-pumpkin-1200-rgb: var(--ionic-color-pumpkin-1200-rgb, 33, 12, 1);\n$ionic-color-orange-100: var(--ionic-color-orange-100, #fff1ea);\n$ionic-color-orange-100-rgb: var(--ionic-color-orange-100-rgb, 255, 241, 234);\n$ionic-color-orange-200: var(--ionic-color-orange-200, #ffe8db);\n$ionic-color-orange-200-rgb: var(--ionic-color-orange-200-rgb, 255, 232, 219);\n$ionic-color-orange-300: var(--ionic-color-orange-300, #ffcfb1);\n$ionic-color-orange-300-rgb: var(--ionic-color-orange-300-rgb, 255, 207, 177);\n$ionic-color-orange-400: var(--ionic-color-orange-400, #ffb37b);\n$ionic-color-orange-400-rgb: var(--ionic-color-orange-400-rgb, 255, 179, 123);\n$ionic-color-orange-500: var(--ionic-color-orange-500, #ff9400);\n$ionic-color-orange-500-rgb: var(--ionic-color-orange-500-rgb, 255, 148, 0);\n$ionic-color-orange-600: var(--ionic-color-orange-600, #e18300);\n$ionic-color-orange-600-rgb: var(--ionic-color-orange-600-rgb, 225, 131, 0);\n$ionic-color-orange-700: var(--ionic-color-orange-700, #c37100);\n$ionic-color-orange-700-rgb: var(--ionic-color-orange-700-rgb, 195, 113, 0);\n$ionic-color-orange-800: var(--ionic-color-orange-800, #a45f00);\n$ionic-color-orange-800-rgb: var(--ionic-color-orange-800-rgb, 164, 95, 0);\n$ionic-color-orange-900: var(--ionic-color-orange-900, #844d00);\n$ionic-color-orange-900-rgb: var(--ionic-color-orange-900-rgb, 132, 77, 0);\n$ionic-color-orange-1000: var(--ionic-color-orange-1000, #633a00);\n$ionic-color-orange-1000-rgb: var(--ionic-color-orange-1000-rgb, 99, 58, 0);\n$ionic-color-orange-1100: var(--ionic-color-orange-1100, #422700);\n$ionic-color-orange-1100-rgb: var(--ionic-color-orange-1100-rgb, 66, 39, 0);\n$ionic-color-orange-1200: var(--ionic-color-orange-1200, #221400);\n$ionic-color-orange-1200-rgb: var(--ionic-color-orange-1200-rgb, 34, 20, 0);\n$ionic-color-yellow-100: var(--ionic-color-yellow-100, #fff9ea);\n$ionic-color-yellow-100-rgb: var(--ionic-color-yellow-100-rgb, 255, 249, 234);\n$ionic-color-yellow-200: var(--ionic-color-yellow-200, #fff5db);\n$ionic-color-yellow-200-rgb: var(--ionic-color-yellow-200-rgb, 255, 245, 219);\n$ionic-color-yellow-300: var(--ionic-color-yellow-300, #ffebb1);\n$ionic-color-yellow-300-rgb: var(--ionic-color-yellow-300-rgb, 255, 235, 177);\n$ionic-color-yellow-400: var(--ionic-color-yellow-400, #ffe07b);\n$ionic-color-yellow-400-rgb: var(--ionic-color-yellow-400-rgb, 255, 224, 123);\n$ionic-color-yellow-500: var(--ionic-color-yellow-500, #ffd600);\n$ionic-color-yellow-500-rgb: var(--ionic-color-yellow-500-rgb, 255, 214, 0);\n$ionic-color-yellow-600: var(--ionic-color-yellow-600, #e1bd00);\n$ionic-color-yellow-600-rgb: var(--ionic-color-yellow-600-rgb, 225, 189, 0);\n$ionic-color-yellow-700: var(--ionic-color-yellow-700, #c3a400);\n$ionic-color-yellow-700-rgb: var(--ionic-color-yellow-700-rgb, 195, 164, 0);\n$ionic-color-yellow-800: var(--ionic-color-yellow-800, #a48a00);\n$ionic-color-yellow-800-rgb: var(--ionic-color-yellow-800-rgb, 164, 138, 0);\n$ionic-color-yellow-900: var(--ionic-color-yellow-900, #846f00);\n$ionic-color-yellow-900-rgb: var(--ionic-color-yellow-900-rgb, 132, 111, 0);\n$ionic-color-yellow-1000: var(--ionic-color-yellow-1000, #635300);\n$ionic-color-yellow-1000-rgb: var(--ionic-color-yellow-1000-rgb, 99, 83, 0);\n$ionic-color-yellow-1100: var(--ionic-color-yellow-1100, #423800);\n$ionic-color-yellow-1100-rgb: var(--ionic-color-yellow-1100-rgb, 66, 56, 0);\n$ionic-color-yellow-1200: var(--ionic-color-yellow-1200, #221d00);\n$ionic-color-yellow-1200-rgb: var(--ionic-color-yellow-1200-rgb, 34, 29, 0);\n$ionic-color-lime-100: var(--ionic-color-lime-100, #f3faea);\n$ionic-color-lime-100-rgb: var(--ionic-color-lime-100-rgb, 243, 250, 234);\n$ionic-color-lime-200: var(--ionic-color-lime-200, #eaf7db);\n$ionic-color-lime-200-rgb: var(--ionic-color-lime-200-rgb, 234, 247, 219);\n$ionic-color-lime-300: var(--ionic-color-lime-300, #d3efb2);\n$ionic-color-lime-300-rgb: var(--ionic-color-lime-300-rgb, 211, 239, 178);\n$ionic-color-lime-400: var(--ionic-color-lime-400, #bbe77d);\n$ionic-color-lime-400-rgb: var(--ionic-color-lime-400-rgb, 187, 231, 125);\n$ionic-color-lime-500: var(--ionic-color-lime-500, #a0df18);\n$ionic-color-lime-500-rgb: var(--ionic-color-lime-500-rgb, 160, 223, 24);\n$ionic-color-lime-600: var(--ionic-color-lime-600, #8dc515);\n$ionic-color-lime-600-rgb: var(--ionic-color-lime-600-rgb, 141, 197, 21);\n$ionic-color-lime-700: var(--ionic-color-lime-700, #7aab12);\n$ionic-color-lime-700-rgb: var(--ionic-color-lime-700-rgb, 122, 171, 18);\n$ionic-color-lime-800: var(--ionic-color-lime-800, #678f0f);\n$ionic-color-lime-800-rgb: var(--ionic-color-lime-800-rgb, 103, 143, 15);\n$ionic-color-lime-900: var(--ionic-color-lime-900, #53730c);\n$ionic-color-lime-900-rgb: var(--ionic-color-lime-900-rgb, 83, 115, 12);\n$ionic-color-lime-1000: var(--ionic-color-lime-1000, #3e5709);\n$ionic-color-lime-1000-rgb: var(--ionic-color-lime-1000-rgb, 62, 87, 9);\n$ionic-color-lime-1100: var(--ionic-color-lime-1100, #2a3a06);\n$ionic-color-lime-1100-rgb: var(--ionic-color-lime-1100-rgb, 42, 58, 6);\n$ionic-color-lime-1200: var(--ionic-color-lime-1200, #151e03);\n$ionic-color-lime-1200-rgb: var(--ionic-color-lime-1200-rgb, 21, 30, 3);\n$ionic-color-green-100: var(--ionic-color-green-100, #ebf9ec);\n$ionic-color-green-100-rgb: var(--ionic-color-green-100-rgb, 235, 249, 236);\n$ionic-color-green-200: var(--ionic-color-green-200, #dcf5de);\n$ionic-color-green-200-rgb: var(--ionic-color-green-200-rgb, 220, 245, 222);\n$ionic-color-green-300: var(--ionic-color-green-300, #b3ebb7);\n$ionic-color-green-300-rgb: var(--ionic-color-green-300-rgb, 179, 235, 183);\n$ionic-color-green-400: var(--ionic-color-green-400, #7fe089);\n$ionic-color-green-400-rgb: var(--ionic-color-green-400-rgb, 127, 224, 137);\n$ionic-color-green-500: var(--ionic-color-green-500, #23d643);\n$ionic-color-green-500-rgb: var(--ionic-color-green-500-rgb, 35, 214, 67);\n$ionic-color-green-600: var(--ionic-color-green-600, #1fbd3b);\n$ionic-color-green-600-rgb: var(--ionic-color-green-600-rgb, 31, 189, 59);\n$ionic-color-green-700: var(--ionic-color-green-700, #1ba433);\n$ionic-color-green-700-rgb: var(--ionic-color-green-700-rgb, 27, 164, 51);\n$ionic-color-green-800: var(--ionic-color-green-800, #178a2b);\n$ionic-color-green-800-rgb: var(--ionic-color-green-800-rgb, 23, 138, 43);\n$ionic-color-green-900: var(--ionic-color-green-900, #126f23);\n$ionic-color-green-900-rgb: var(--ionic-color-green-900-rgb, 18, 111, 35);\n$ionic-color-green-1000: var(--ionic-color-green-1000, #0e531a);\n$ionic-color-green-1000-rgb: var(--ionic-color-green-1000-rgb, 14, 83, 26);\n$ionic-color-green-1100: var(--ionic-color-green-1100, #093811);\n$ionic-color-green-1100-rgb: var(--ionic-color-green-1100-rgb, 9, 56, 17);\n$ionic-color-green-1200: var(--ionic-color-green-1200, #051d09);\n$ionic-color-green-1200-rgb: var(--ionic-color-green-1200-rgb, 5, 29, 9);\n$ionic-color-teal-100: var(--ionic-color-teal-100, #eaf8f5);\n$ionic-color-teal-100-rgb: var(--ionic-color-teal-100-rgb, 234, 248, 245);\n$ionic-color-teal-200: var(--ionic-color-teal-200, #dbf3ee);\n$ionic-color-teal-200-rgb: var(--ionic-color-teal-200-rgb, 219, 243, 238);\n$ionic-color-teal-300: var(--ionic-color-teal-300, #b1e7dd);\n$ionic-color-teal-300-rgb: var(--ionic-color-teal-300-rgb, 177, 231, 221);\n$ionic-color-teal-400: var(--ionic-color-teal-400, #7bdbca);\n$ionic-color-teal-400-rgb: var(--ionic-color-teal-400-rgb, 123, 219, 202);\n$ionic-color-teal-500: var(--ionic-color-teal-500, #00cfb7);\n$ionic-color-teal-500-rgb: var(--ionic-color-teal-500-rgb, 0, 207, 183);\n$ionic-color-teal-600: var(--ionic-color-teal-600, #00b7a2);\n$ionic-color-teal-600-rgb: var(--ionic-color-teal-600-rgb, 0, 183, 162);\n$ionic-color-teal-700: var(--ionic-color-teal-700, #009e8c);\n$ionic-color-teal-700-rgb: var(--ionic-color-teal-700-rgb, 0, 158, 140);\n$ionic-color-teal-800: var(--ionic-color-teal-800, #008576);\n$ionic-color-teal-800-rgb: var(--ionic-color-teal-800-rgb, 0, 133, 118);\n$ionic-color-teal-900: var(--ionic-color-teal-900, #006b5f);\n$ionic-color-teal-900-rgb: var(--ionic-color-teal-900-rgb, 0, 107, 95);\n$ionic-color-teal-1000: var(--ionic-color-teal-1000, #005147);\n$ionic-color-teal-1000-rgb: var(--ionic-color-teal-1000-rgb, 0, 81, 71);\n$ionic-color-teal-1100: var(--ionic-color-teal-1100, #003630);\n$ionic-color-teal-1100-rgb: var(--ionic-color-teal-1100-rgb, 0, 54, 48);\n$ionic-color-teal-1200: var(--ionic-color-teal-1200, #001c19);\n$ionic-color-teal-1200-rgb: var(--ionic-color-teal-1200-rgb, 0, 28, 25);\n$ionic-color-aqua-100: var(--ionic-color-aqua-100, #ebf9fe);\n$ionic-color-aqua-100-rgb: var(--ionic-color-aqua-100-rgb, 235, 249, 254);\n$ionic-color-aqua-200: var(--ionic-color-aqua-200, #dcf4fd);\n$ionic-color-aqua-200-rgb: var(--ionic-color-aqua-200-rgb, 220, 244, 253);\n$ionic-color-aqua-300: var(--ionic-color-aqua-300, #b3e9fc);\n$ionic-color-aqua-300-rgb: var(--ionic-color-aqua-300-rgb, 179, 233, 252);\n$ionic-color-aqua-400: var(--ionic-color-aqua-400, #80defa);\n$ionic-color-aqua-400-rgb: var(--ionic-color-aqua-400-rgb, 128, 222, 250);\n$ionic-color-aqua-500: var(--ionic-color-aqua-500, #27d3f9);\n$ionic-color-aqua-500-rgb: var(--ionic-color-aqua-500-rgb, 39, 211, 249);\n$ionic-color-aqua-600: var(--ionic-color-aqua-600, #22bbdc);\n$ionic-color-aqua-600-rgb: var(--ionic-color-aqua-600-rgb, 34, 187, 220);\n$ionic-color-aqua-700: var(--ionic-color-aqua-700, #1ea2bf);\n$ionic-color-aqua-700-rgb: var(--ionic-color-aqua-700-rgb, 30, 162, 191);\n$ionic-color-aqua-800: var(--ionic-color-aqua-800, #1988a0);\n$ionic-color-aqua-800-rgb: var(--ionic-color-aqua-800-rgb, 25, 136, 160);\n$ionic-color-aqua-900: var(--ionic-color-aqua-900, #146d81);\n$ionic-color-aqua-900-rgb: var(--ionic-color-aqua-900-rgb, 20, 109, 129);\n$ionic-color-aqua-1000: var(--ionic-color-aqua-1000, #0f5261);\n$ionic-color-aqua-1000-rgb: var(--ionic-color-aqua-1000-rgb, 15, 82, 97);\n$ionic-color-aqua-1100: var(--ionic-color-aqua-1100, #0a3741);\n$ionic-color-aqua-1100-rgb: var(--ionic-color-aqua-1100-rgb, 10, 55, 65);\n$ionic-color-aqua-1200: var(--ionic-color-aqua-1200, #051c21);\n$ionic-color-aqua-1200-rgb: var(--ionic-color-aqua-1200-rgb, 5, 28, 33);\n$ionic-color-blue-100: var(--ionic-color-blue-100, #f2f4fd);\n$ionic-color-blue-100-rgb: var(--ionic-color-blue-100-rgb, 242, 244, 253);\n$ionic-color-blue-200: var(--ionic-color-blue-200, #e9ecfc);\n$ionic-color-blue-200-rgb: var(--ionic-color-blue-200-rgb, 233, 236, 252);\n$ionic-color-blue-300: var(--ionic-color-blue-300, #d0d7fa);\n$ionic-color-blue-300-rgb: var(--ionic-color-blue-300-rgb, 208, 215, 250);\n$ionic-color-blue-400: var(--ionic-color-blue-400, #b5c0f7);\n$ionic-color-blue-400-rgb: var(--ionic-color-blue-400-rgb, 181, 192, 247);\n$ionic-color-blue-500: var(--ionic-color-blue-500, #94a5f4);\n$ionic-color-blue-500-rgb: var(--ionic-color-blue-500-rgb, 148, 165, 244);\n$ionic-color-blue-600: var(--ionic-color-blue-600, #6986f2);\n$ionic-color-blue-600-rgb: var(--ionic-color-blue-600-rgb, 105, 134, 242);\n$ionic-color-blue-700: var(--ionic-color-blue-700, #105cef);\n$ionic-color-blue-700-rgb: var(--ionic-color-blue-700-rgb, 16, 92, 239);\n$ionic-color-blue-800: var(--ionic-color-blue-800, #0f54da);\n$ionic-color-blue-800-rgb: var(--ionic-color-blue-800-rgb, 15, 84, 218);\n$ionic-color-blue-900: var(--ionic-color-blue-900, #0d4bc3);\n$ionic-color-blue-900-rgb: var(--ionic-color-blue-900-rgb, 13, 75, 195);\n$ionic-color-blue-1000: var(--ionic-color-blue-1000, #0b41a9);\n$ionic-color-blue-1000-rgb: var(--ionic-color-blue-1000-rgb, 11, 65, 169);\n$ionic-color-blue-1100: var(--ionic-color-blue-1100, #09358a);\n$ionic-color-blue-1100-rgb: var(--ionic-color-blue-1100-rgb, 9, 53, 138);\n$ionic-color-blue-1200: var(--ionic-color-blue-1200, #072561);\n$ionic-color-blue-1200-rgb: var(--ionic-color-blue-1200-rgb, 7, 37, 97);\n$ionic-color-indigo-100: var(--ionic-color-indigo-100, #f3f2fb);\n$ionic-color-indigo-100-rgb: var(--ionic-color-indigo-100-rgb, 243, 242, 251);\n$ionic-color-indigo-200: var(--ionic-color-indigo-200, #eae9f9);\n$ionic-color-indigo-200-rgb: var(--ionic-color-indigo-200-rgb, 234, 233, 249);\n$ionic-color-indigo-300: var(--ionic-color-indigo-300, #d3d1f2);\n$ionic-color-indigo-300-rgb: var(--ionic-color-indigo-300-rgb, 211, 209, 242);\n$ionic-color-indigo-400: var(--ionic-color-indigo-400, #bab5eb);\n$ionic-color-indigo-400-rgb: var(--ionic-color-indigo-400-rgb, 186, 181, 235);\n$ionic-color-indigo-500: var(--ionic-color-indigo-500, #9d95e4);\n$ionic-color-indigo-500-rgb: var(--ionic-color-indigo-500-rgb, 157, 149, 228);\n$ionic-color-indigo-600: var(--ionic-color-indigo-600, #786bdd);\n$ionic-color-indigo-600-rgb: var(--ionic-color-indigo-600-rgb, 120, 107, 221);\n$ionic-color-indigo-700: var(--ionic-color-indigo-700, #411bd5);\n$ionic-color-indigo-700-rgb: var(--ionic-color-indigo-700-rgb, 65, 27, 213);\n$ionic-color-indigo-800: var(--ionic-color-indigo-800, #3b19c3);\n$ionic-color-indigo-800-rgb: var(--ionic-color-indigo-800-rgb, 59, 25, 195);\n$ionic-color-indigo-900: var(--ionic-color-indigo-900, #3516ae);\n$ionic-color-indigo-900-rgb: var(--ionic-color-indigo-900-rgb, 53, 22, 174);\n$ionic-color-indigo-1000: var(--ionic-color-indigo-1000, #2e1397);\n$ionic-color-indigo-1000-rgb: var(--ionic-color-indigo-1000-rgb, 46, 19, 151);\n$ionic-color-indigo-1100: var(--ionic-color-indigo-1100, #26107b);\n$ionic-color-indigo-1100-rgb: var(--ionic-color-indigo-1100-rgb, 38, 16, 123);\n$ionic-color-indigo-1200: var(--ionic-color-indigo-1200, #1a0b57);\n$ionic-color-indigo-1200-rgb: var(--ionic-color-indigo-1200-rgb, 26, 11, 87);\n$ionic-color-violet-100: var(--ionic-color-violet-100, #f5f2fe);\n$ionic-color-violet-100-rgb: var(--ionic-color-violet-100-rgb, 245, 242, 254);\n$ionic-color-violet-200: var(--ionic-color-violet-200, #eee9fd);\n$ionic-color-violet-200-rgb: var(--ionic-color-violet-200-rgb, 238, 233, 253);\n$ionic-color-violet-300: var(--ionic-color-violet-300, #dcd1fb);\n$ionic-color-violet-300-rgb: var(--ionic-color-violet-300-rgb, 220, 209, 251);\n$ionic-color-violet-400: var(--ionic-color-violet-400, #c9b6f9);\n$ionic-color-violet-400-rgb: var(--ionic-color-violet-400-rgb, 201, 182, 249);\n$ionic-color-violet-500: var(--ionic-color-violet-500, #b396f6);\n$ionic-color-violet-500-rgb: var(--ionic-color-violet-500-rgb, 179, 150, 246);\n$ionic-color-violet-600: var(--ionic-color-violet-600, #9a6cf4);\n$ionic-color-violet-600-rgb: var(--ionic-color-violet-600-rgb, 154, 108, 244);\n$ionic-color-violet-700: var(--ionic-color-violet-700, #7c20f2);\n$ionic-color-violet-700-rgb: var(--ionic-color-violet-700-rgb, 124, 32, 242);\n$ionic-color-violet-800: var(--ionic-color-violet-800, #711ddd);\n$ionic-color-violet-800-rgb: var(--ionic-color-violet-800-rgb, 113, 29, 221);\n$ionic-color-violet-900: var(--ionic-color-violet-900, #651ac5);\n$ionic-color-violet-900-rgb: var(--ionic-color-violet-900-rgb, 101, 26, 197);\n$ionic-color-violet-1000: var(--ionic-color-violet-1000, #5817ab);\n$ionic-color-violet-1000-rgb: var(--ionic-color-violet-1000-rgb, 88, 23, 171);\n$ionic-color-violet-1100: var(--ionic-color-violet-1100, #48128c);\n$ionic-color-violet-1100-rgb: var(--ionic-color-violet-1100-rgb, 72, 18, 140);\n$ionic-color-violet-1200: var(--ionic-color-violet-1200, #330d63);\n$ionic-color-violet-1200-rgb: var(--ionic-color-violet-1200-rgb, 51, 13, 99);\n$ionic-color-purple-100: var(--ionic-color-purple-100, #f9f3fe);\n$ionic-color-purple-100-rgb: var(--ionic-color-purple-100-rgb, 249, 243, 254);\n$ionic-color-purple-200: var(--ionic-color-purple-200, #f5eafd);\n$ionic-color-purple-200-rgb: var(--ionic-color-purple-200-rgb, 245, 234, 253);\n$ionic-color-purple-300: var(--ionic-color-purple-300, #e9d3fa);\n$ionic-color-purple-300-rgb: var(--ionic-color-purple-300-rgb, 233, 211, 250);\n$ionic-color-purple-400: var(--ionic-color-purple-400, #deb9f8);\n$ionic-color-purple-400-rgb: var(--ionic-color-purple-400-rgb, 222, 185, 248);\n$ionic-color-purple-500: var(--ionic-color-purple-500, #d29bf6);\n$ionic-color-purple-500-rgb: var(--ionic-color-purple-500-rgb, 210, 155, 246);\n$ionic-color-purple-600: var(--ionic-color-purple-600, #c575f3);\n$ionic-color-purple-600-rgb: var(--ionic-color-purple-600-rgb, 197, 117, 243);\n$ionic-color-purple-700: var(--ionic-color-purple-700, #b73cf1);\n$ionic-color-purple-700-rgb: var(--ionic-color-purple-700-rgb, 183, 60, 241);\n$ionic-color-purple-800: var(--ionic-color-purple-800, #a737dc);\n$ionic-color-purple-800-rgb: var(--ionic-color-purple-800-rgb, 167, 55, 220);\n$ionic-color-purple-900: var(--ionic-color-purple-900, #9531c5);\n$ionic-color-purple-900-rgb: var(--ionic-color-purple-900-rgb, 149, 49, 197);\n$ionic-color-purple-1000: var(--ionic-color-purple-1000, #812aaa);\n$ionic-color-purple-1000-rgb: var(--ionic-color-purple-1000-rgb, 129, 42, 170);\n$ionic-color-purple-1100: var(--ionic-color-purple-1100, #6a238b);\n$ionic-color-purple-1100-rgb: var(--ionic-color-purple-1100-rgb, 106, 35, 139);\n$ionic-color-purple-1200: var(--ionic-color-purple-1200, #4b1862);\n$ionic-color-purple-1200-rgb: var(--ionic-color-purple-1200-rgb, 75, 24, 98);\n$ionic-color-magenta-100: var(--ionic-color-magenta-100, #fdf3fb);\n$ionic-color-magenta-100-rgb: var(--ionic-color-magenta-100-rgb, 253, 243, 251);\n$ionic-color-magenta-200: var(--ionic-color-magenta-200, #fcebf8);\n$ionic-color-magenta-200-rgb: var(--ionic-color-magenta-200-rgb, 252, 235, 248);\n$ionic-color-magenta-300: var(--ionic-color-magenta-300, #f9d4f1);\n$ionic-color-magenta-300-rgb: var(--ionic-color-magenta-300-rgb, 249, 212, 241);\n$ionic-color-magenta-400: var(--ionic-color-magenta-400, #f6bcea);\n$ionic-color-magenta-400-rgb: var(--ionic-color-magenta-400-rgb, 246, 188, 234);\n$ionic-color-magenta-500: var(--ionic-color-magenta-500, #f39fe3);\n$ionic-color-magenta-500-rgb: var(--ionic-color-magenta-500-rgb, 243, 159, 227);\n$ionic-color-magenta-600: var(--ionic-color-magenta-600, #f07cdb);\n$ionic-color-magenta-600-rgb: var(--ionic-color-magenta-600-rgb, 240, 124, 219);\n$ionic-color-magenta-700: var(--ionic-color-magenta-700, #ed4ad3);\n$ionic-color-magenta-700-rgb: var(--ionic-color-magenta-700-rgb, 237, 74, 211);\n$ionic-color-magenta-800: var(--ionic-color-magenta-800, #d844c1);\n$ionic-color-magenta-800-rgb: var(--ionic-color-magenta-800-rgb, 216, 68, 193);\n$ionic-color-magenta-900: var(--ionic-color-magenta-900, #c13cac);\n$ionic-color-magenta-900-rgb: var(--ionic-color-magenta-900-rgb, 193, 60, 172);\n$ionic-color-magenta-1000: var(--ionic-color-magenta-1000, #a83495);\n$ionic-color-magenta-1000-rgb: var(--ionic-color-magenta-1000-rgb, 168, 52, 149);\n$ionic-color-magenta-1100: var(--ionic-color-magenta-1100, #892b7a);\n$ionic-color-magenta-1100-rgb: var(--ionic-color-magenta-1100-rgb, 137, 43, 122);\n$ionic-color-magenta-1200: var(--ionic-color-magenta-1200, #611e56);\n$ionic-color-magenta-1200-rgb: var(--ionic-color-magenta-1200-rgb, 97, 30, 86);\n$ionic-color-pink-100: var(--ionic-color-pink-100, #fef3f5);\n$ionic-color-pink-100-rgb: var(--ionic-color-pink-100-rgb, 254, 243, 245);\n$ionic-color-pink-200: var(--ionic-color-pink-200, #fdeaee);\n$ionic-color-pink-200-rgb: var(--ionic-color-pink-200-rgb, 253, 234, 238);\n$ionic-color-pink-300: var(--ionic-color-pink-300, #fad3dc);\n$ionic-color-pink-300-rgb: var(--ionic-color-pink-300-rgb, 250, 211, 220);\n$ionic-color-pink-400: var(--ionic-color-pink-400, #f8b9c9);\n$ionic-color-pink-400-rgb: var(--ionic-color-pink-400-rgb, 248, 185, 201);\n$ionic-color-pink-500: var(--ionic-color-pink-500, #f69bb3);\n$ionic-color-pink-500-rgb: var(--ionic-color-pink-500-rgb, 246, 155, 179);\n$ionic-color-pink-600: var(--ionic-color-pink-600, #f3759a);\n$ionic-color-pink-600-rgb: var(--ionic-color-pink-600-rgb, 243, 117, 154);\n$ionic-color-pink-700: var(--ionic-color-pink-700, #f13b7d);\n$ionic-color-pink-700-rgb: var(--ionic-color-pink-700-rgb, 241, 59, 125);\n$ionic-color-pink-800: var(--ionic-color-pink-800, #dc3672);\n$ionic-color-pink-800-rgb: var(--ionic-color-pink-800-rgb, 220, 54, 114);\n$ionic-color-pink-900: var(--ionic-color-pink-900, #c53066);\n$ionic-color-pink-900-rgb: var(--ionic-color-pink-900-rgb, 197, 48, 102);\n$ionic-color-pink-1000: var(--ionic-color-pink-1000, #aa2a58);\n$ionic-color-pink-1000-rgb: var(--ionic-color-pink-1000-rgb, 170, 42, 88);\n$ionic-color-pink-1100: var(--ionic-color-pink-1100, #8b2248);\n$ionic-color-pink-1100-rgb: var(--ionic-color-pink-1100-rgb, 139, 34, 72);\n$ionic-color-pink-1200: var(--ionic-color-pink-1200, #621833);\n$ionic-color-pink-1200-rgb: var(--ionic-color-pink-1200-rgb, 98, 24, 51);\n$ionic-color-primary-100: var(--ionic-color-primary-100, #f2f4fd);\n$ionic-color-primary-100-rgb: var(--ionic-color-primary-100-rgb, 242, 244, 253);\n$ionic-color-primary-200: var(--ionic-color-primary-200, #e9ecfc);\n$ionic-color-primary-200-rgb: var(--ionic-color-primary-200-rgb, 233, 236, 252);\n$ionic-color-primary-300: var(--ionic-color-primary-300, #d0d7fa);\n$ionic-color-primary-300-rgb: var(--ionic-color-primary-300-rgb, 208, 215, 250);\n$ionic-color-primary-400: var(--ionic-color-primary-400, #b5c0f7);\n$ionic-color-primary-400-rgb: var(--ionic-color-primary-400-rgb, 181, 192, 247);\n$ionic-color-primary-500: var(--ionic-color-primary-500, #94a5f4);\n$ionic-color-primary-500-rgb: var(--ionic-color-primary-500-rgb, 148, 165, 244);\n$ionic-color-primary-600: var(--ionic-color-primary-600, #6986f2);\n$ionic-color-primary-600-rgb: var(--ionic-color-primary-600-rgb, 105, 134, 242);\n$ionic-color-primary-700: var(--ionic-color-primary-700, #105cef);\n$ionic-color-primary-700-rgb: var(--ionic-color-primary-700-rgb, 16, 92, 239);\n$ionic-color-primary-800: var(--ionic-color-primary-800, #0f54da);\n$ionic-color-primary-800-rgb: var(--ionic-color-primary-800-rgb, 15, 84, 218);\n$ionic-color-primary-900: var(--ionic-color-primary-900, #0d4bc3);\n$ionic-color-primary-900-rgb: var(--ionic-color-primary-900-rgb, 13, 75, 195);\n$ionic-color-primary-1000: var(--ionic-color-primary-1000, #0b41a9);\n$ionic-color-primary-1000-rgb: var(--ionic-color-primary-1000-rgb, 11, 65, 169);\n$ionic-color-primary-1100: var(--ionic-color-primary-1100, #09358a);\n$ionic-color-primary-1100-rgb: var(--ionic-color-primary-1100-rgb, 9, 53, 138);\n$ionic-color-primary-1200: var(--ionic-color-primary-1200, #072561);\n$ionic-color-primary-1200-rgb: var(--ionic-color-primary-1200-rgb, 7, 37, 97);\n$ionic-color-primary-base: var(--ionic-color-primary-base, #105cef);\n$ionic-color-primary-base-rgb: var(--ionic-color-primary-base-rgb, 16, 92, 239);\n$ionic-color-info-100: var(--ionic-color-info-100, #ebf9fe);\n$ionic-color-info-100-rgb: var(--ionic-color-info-100-rgb, 235, 249, 254);\n$ionic-color-info-200: var(--ionic-color-info-200, #dcf4fd);\n$ionic-color-info-200-rgb: var(--ionic-color-info-200-rgb, 220, 244, 253);\n$ionic-color-info-300: var(--ionic-color-info-300, #b3e9fc);\n$ionic-color-info-300-rgb: var(--ionic-color-info-300-rgb, 179, 233, 252);\n$ionic-color-info-400: var(--ionic-color-info-400, #80defa);\n$ionic-color-info-400-rgb: var(--ionic-color-info-400-rgb, 128, 222, 250);\n$ionic-color-info-500: var(--ionic-color-info-500, #27d3f9);\n$ionic-color-info-500-rgb: var(--ionic-color-info-500-rgb, 39, 211, 249);\n$ionic-color-info-600: var(--ionic-color-info-600, #22bbdc);\n$ionic-color-info-600-rgb: var(--ionic-color-info-600-rgb, 34, 187, 220);\n$ionic-color-info-700: var(--ionic-color-info-700, #1ea2bf);\n$ionic-color-info-700-rgb: var(--ionic-color-info-700-rgb, 30, 162, 191);\n$ionic-color-info-800: var(--ionic-color-info-800, #1988a0);\n$ionic-color-info-800-rgb: var(--ionic-color-info-800-rgb, 25, 136, 160);\n$ionic-color-info-900: var(--ionic-color-info-900, #146d81);\n$ionic-color-info-900-rgb: var(--ionic-color-info-900-rgb, 20, 109, 129);\n$ionic-color-info-1000: var(--ionic-color-info-1000, #0f5261);\n$ionic-color-info-1000-rgb: var(--ionic-color-info-1000-rgb, 15, 82, 97);\n$ionic-color-info-1100: var(--ionic-color-info-1100, #0a3741);\n$ionic-color-info-1100-rgb: var(--ionic-color-info-1100-rgb, 10, 55, 65);\n$ionic-color-info-1200: var(--ionic-color-info-1200, #051c21);\n$ionic-color-info-1200-rgb: var(--ionic-color-info-1200-rgb, 5, 28, 33);\n$ionic-color-info-base: var(--ionic-color-info-base, #1ea2bf);\n$ionic-color-info-base-rgb: var(--ionic-color-info-base-rgb, 30, 162, 191);\n$ionic-color-warning-100: var(--ionic-color-warning-100, #fff1ea);\n$ionic-color-warning-100-rgb: var(--ionic-color-warning-100-rgb, 255, 241, 234);\n$ionic-color-warning-200: var(--ionic-color-warning-200, #ffe8db);\n$ionic-color-warning-200-rgb: var(--ionic-color-warning-200-rgb, 255, 232, 219);\n$ionic-color-warning-300: var(--ionic-color-warning-300, #ffcfb1);\n$ionic-color-warning-300-rgb: var(--ionic-color-warning-300-rgb, 255, 207, 177);\n$ionic-color-warning-400: var(--ionic-color-warning-400, #ffb37b);\n$ionic-color-warning-400-rgb: var(--ionic-color-warning-400-rgb, 255, 179, 123);\n$ionic-color-warning-500: var(--ionic-color-warning-500, #ff9400);\n$ionic-color-warning-500-rgb: var(--ionic-color-warning-500-rgb, 255, 148, 0);\n$ionic-color-warning-600: var(--ionic-color-warning-600, #e18300);\n$ionic-color-warning-600-rgb: var(--ionic-color-warning-600-rgb, 225, 131, 0);\n$ionic-color-warning-700: var(--ionic-color-warning-700, #c37100);\n$ionic-color-warning-700-rgb: var(--ionic-color-warning-700-rgb, 195, 113, 0);\n$ionic-color-warning-800: var(--ionic-color-warning-800, #a45f00);\n$ionic-color-warning-800-rgb: var(--ionic-color-warning-800-rgb, 164, 95, 0);\n$ionic-color-warning-900: var(--ionic-color-warning-900, #844d00);\n$ionic-color-warning-900-rgb: var(--ionic-color-warning-900-rgb, 132, 77, 0);\n$ionic-color-warning-1000: var(--ionic-color-warning-1000, #633a00);\n$ionic-color-warning-1000-rgb: var(--ionic-color-warning-1000-rgb, 99, 58, 0);\n$ionic-color-warning-1100: var(--ionic-color-warning-1100, #422700);\n$ionic-color-warning-1100-rgb: var(--ionic-color-warning-1100-rgb, 66, 39, 0);\n$ionic-color-warning-1200: var(--ionic-color-warning-1200, #221400);\n$ionic-color-warning-1200-rgb: var(--ionic-color-warning-1200-rgb, 34, 20, 0);\n$ionic-color-warning-base: var(--ionic-color-warning-base, #c37100);\n$ionic-color-warning-base-rgb: var(--ionic-color-warning-base-rgb, 195, 113, 0);\n$ionic-color-danger-100: var(--ionic-color-danger-100, #feeded);\n$ionic-color-danger-100-rgb: var(--ionic-color-danger-100-rgb, 254, 237, 237);\n$ionic-color-danger-200: var(--ionic-color-danger-200, #fde1e1);\n$ionic-color-danger-200-rgb: var(--ionic-color-danger-200-rgb, 253, 225, 225);\n$ionic-color-danger-300: var(--ionic-color-danger-300, #fcc1c1);\n$ionic-color-danger-300-rgb: var(--ionic-color-danger-300-rgb, 252, 193, 193);\n$ionic-color-danger-400: var(--ionic-color-danger-400, #faa1a1);\n$ionic-color-danger-400-rgb: var(--ionic-color-danger-400-rgb, 250, 161, 161);\n$ionic-color-danger-500: var(--ionic-color-danger-500, #f97d7d);\n$ionic-color-danger-500-rgb: var(--ionic-color-danger-500-rgb, 249, 125, 125);\n$ionic-color-danger-600: var(--ionic-color-danger-600, #f85151);\n$ionic-color-danger-600-rgb: var(--ionic-color-danger-600-rgb, 248, 81, 81);\n$ionic-color-danger-700: var(--ionic-color-danger-700, #e52929);\n$ionic-color-danger-700-rgb: var(--ionic-color-danger-700-rgb, 229, 41, 41);\n$ionic-color-danger-800: var(--ionic-color-danger-800, #bf2222);\n$ionic-color-danger-800-rgb: var(--ionic-color-danger-800-rgb, 191, 34, 34);\n$ionic-color-danger-900: var(--ionic-color-danger-900, #991b1b);\n$ionic-color-danger-900-rgb: var(--ionic-color-danger-900-rgb, 153, 27, 27);\n$ionic-color-danger-1000: var(--ionic-color-danger-1000, #761515);\n$ionic-color-danger-1000-rgb: var(--ionic-color-danger-1000-rgb, 118, 21, 21);\n$ionic-color-danger-1100: var(--ionic-color-danger-1100, #540f0f);\n$ionic-color-danger-1100-rgb: var(--ionic-color-danger-1100-rgb, 84, 15, 15);\n$ionic-color-danger-1200: var(--ionic-color-danger-1200, #330909);\n$ionic-color-danger-1200-rgb: var(--ionic-color-danger-1200-rgb, 51, 9, 9);\n$ionic-color-danger-base: var(--ionic-color-danger-base, #e52929);\n$ionic-color-danger-base-rgb: var(--ionic-color-danger-base-rgb, 229, 41, 41);\n$ionic-color-success-100: var(--ionic-color-success-100, #ebf9ec);\n$ionic-color-success-100-rgb: var(--ionic-color-success-100-rgb, 235, 249, 236);\n$ionic-color-success-200: var(--ionic-color-success-200, #dcf5de);\n$ionic-color-success-200-rgb: var(--ionic-color-success-200-rgb, 220, 245, 222);\n$ionic-color-success-300: var(--ionic-color-success-300, #b3ebb7);\n$ionic-color-success-300-rgb: var(--ionic-color-success-300-rgb, 179, 235, 183);\n$ionic-color-success-400: var(--ionic-color-success-400, #7fe089);\n$ionic-color-success-400-rgb: var(--ionic-color-success-400-rgb, 127, 224, 137);\n$ionic-color-success-500: var(--ionic-color-success-500, #23d643);\n$ionic-color-success-500-rgb: var(--ionic-color-success-500-rgb, 35, 214, 67);\n$ionic-color-success-600: var(--ionic-color-success-600, #1fbd3b);\n$ionic-color-success-600-rgb: var(--ionic-color-success-600-rgb, 31, 189, 59);\n$ionic-color-success-700: var(--ionic-color-success-700, #1ba433);\n$ionic-color-success-700-rgb: var(--ionic-color-success-700-rgb, 27, 164, 51);\n$ionic-color-success-800: var(--ionic-color-success-800, #178a2b);\n$ionic-color-success-800-rgb: var(--ionic-color-success-800-rgb, 23, 138, 43);\n$ionic-color-success-900: var(--ionic-color-success-900, #126f23);\n$ionic-color-success-900-rgb: var(--ionic-color-success-900-rgb, 18, 111, 35);\n$ionic-color-success-1000: var(--ionic-color-success-1000, #0e531a);\n$ionic-color-success-1000-rgb: var(--ionic-color-success-1000-rgb, 14, 83, 26);\n$ionic-color-success-1100: var(--ionic-color-success-1100, #093811);\n$ionic-color-success-1100-rgb: var(--ionic-color-success-1100-rgb, 9, 56, 17);\n$ionic-color-success-1200: var(--ionic-color-success-1200, #051d09);\n$ionic-color-success-1200-rgb: var(--ionic-color-success-1200-rgb, 5, 29, 9);\n$ionic-color-success-base: var(--ionic-color-success-base, #1ba433);\n$ionic-color-success-base-rgb: var(--ionic-color-success-base-rgb, 27, 164, 51);\n$ionic-z-index-0: var(--ionic-z-index-0, 0);\n$ionic-z-index-1: var(--ionic-z-index-1, 100);\n$ionic-z-index-2: var(--ionic-z-index-2, 200);\n$ionic-z-index-3: var(--ionic-z-index-3, 300);\n$ionic-z-index-4: var(--ionic-z-index-4, 400);\n$ionic-z-index-500: var(--ionic-z-index-500, 500);\n$ionic-z-index-bottom: var(--ionic-z-index-bottom, -99999);\n$ionic-z-index-top: var(--ionic-z-index-top, 99999);\n$ionic-scale-0: var(--ionic-scale-0, 0px);\n$ionic-scale-100: var(--ionic-scale-100, 4px);\n$ionic-scale-150: var(--ionic-scale-150, 6px);\n$ionic-scale-200: var(--ionic-scale-200, 8px);\n$ionic-scale-250: var(--ionic-scale-250, 10px);\n$ionic-scale-300: var(--ionic-scale-300, 12px);\n$ionic-scale-400: var(--ionic-scale-400, 16px);\n$ionic-scale-500: var(--ionic-scale-500, 20px);\n$ionic-scale-600: var(--ionic-scale-600, 24px);\n$ionic-scale-700: var(--ionic-scale-700, 28px);\n$ionic-scale-800: var(--ionic-scale-800, 32px);\n$ionic-scale-850: var(--ionic-scale-850, 34px);\n$ionic-scale-900: var(--ionic-scale-900, 36px);\n$ionic-scale-1000: var(--ionic-scale-1000, 40px);\n$ionic-scale-1100: var(--ionic-scale-1100, 44px);\n$ionic-scale-1200: var(--ionic-scale-1200, 48px);\n$ionic-scale-1400: var(--ionic-scale-1400, 56px);\n$ionic-scale-1600: var(--ionic-scale-1600, 64px);\n$ionic-scale-1800: var(--ionic-scale-1800, 72px);\n$ionic-scale-2000: var(--ionic-scale-2000, 80px);\n$ionic-scale-2400: var(--ionic-scale-2400, 96px);\n$ionic-scale-2800: var(--ionic-scale-2800, 112px);\n$ionic-scale-3200: var(--ionic-scale-3200, 128px);\n$ionic-scale-3400: var(--ionic-scale-3400, 136px);\n$ionic-scale-3600: var(--ionic-scale-3600, 144px);\n$ionic-scale-4000: var(--ionic-scale-4000, 160px);\n$ionic-scale-5000: var(--ionic-scale-5000, 200px);\n$ionic-scale-6200: var(--ionic-scale-6200, 248px);\n$ionic-scale-7400: var(--ionic-scale-7400, 296px);\n$ionic-scale-9000: var(--ionic-scale-9000, 360px);\n$ionic-scale-025: var(--ionic-scale-025, 1px);\n$ionic-scale-050: var(--ionic-scale-050, 2px);\n$ionic-scale-075: var(--ionic-scale-075, 3px);\n$ionic-font-family: var(--ionic-font-family, \"Inter\", sans-serif);\n$ionic-state-focus-0: var(--ionic-state-focus-0, none);\n$ionic-state-focus-1: var(--ionic-state-focus-1, #9ec4fd);\n$ionic-state-focus-1-rgb: var(--ionic-state-focus-1-rgb, 158, 196, 253);\n$ionic-state-focus-2: var(--ionic-state-focus-2, #ffafaf);\n$ionic-state-focus-2-rgb: var(--ionic-state-focus-2-rgb, 255, 175, 175);\n$ionic-state-disabled: var(--ionic-state-disabled, rgba(255, 255, 255, 0.6));\n$ionic-state-hover: var(--ionic-state-hover, rgba(36, 36, 36, 0.04));\n$ionic-state-pressed: var(--ionic-state-pressed, rgba(36, 36, 36, 0.08));\n\n$ionic-display-sm-regular: (\n font-size: $ionic-font-size-800,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-1100,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-display-sm-light: (\n font-size: $ionic-font-size-800,\n font-style: normal,\n font-weight: $ionic-font-weight-light,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-1100,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-display-lg-regular: (\n font-size: $ionic-font-size-900,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-1200,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-display-lg-light: (\n font-size: $ionic-font-size-900,\n font-style: normal,\n font-weight: $ionic-font-weight-light,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-1200,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h1-regular: (\n font-size: $ionic-font-size-700,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h1-medium: (\n font-size: $ionic-font-size-700,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h1-semi-bold: (\n font-size: $ionic-font-size-600,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h1-bold: (\n font-size: $ionic-font-size-700,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h2-regular: (\n font-size: $ionic-font-size-650,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h2-medium: (\n font-size: $ionic-font-size-650,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h2-semi-bold: (\n font-size: $ionic-font-size-650,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h2-bold: (\n font-size: $ionic-font-size-650,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-900,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h3-regular: (\n font-size: $ionic-font-size-600,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-800,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h3-medium: (\n font-size: $ionic-font-size-600,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-800,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h3-semi-bold: (\n font-size: $ionic-font-size-600,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-800,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h3-bold: (\n font-size: $ionic-font-size-600,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-800,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h4-regular: (\n font-size: $ionic-font-size-550,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h4-medium: (\n font-size: $ionic-font-size-550,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h4-semi-bold: (\n font-size: $ionic-font-size-550,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h4-bold: (\n font-size: $ionic-font-size-550,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h5-regular: (\n font-size: $ionic-font-size-500,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h5-medium: (\n font-size: $ionic-font-size-500,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h5-semi-bold: (\n font-size: $ionic-font-size-500,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h5-bold: (\n font-size: $ionic-font-size-500,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h6-regular: (\n font-size: $ionic-font-size-450,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h6-medium: (\n font-size: $ionic-font-size-450,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h6-semi-bold: (\n font-size: $ionic-font-size-450,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-heading-h6-bold: (\n font-size: $ionic-font-size-450,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-700,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-lg-regular: (\n font-size: $ionic-font-size-400,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-lg-medium: (\n font-size: $ionic-font-size-400,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-lg-semi-bold: (\n font-size: $ionic-font-size-400,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-lg-bold: (\n font-size: $ionic-font-size-400,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-lg-link: (\n font-size: $ionic-font-size-400,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: underline,\n);\n\n$ionic-body-lg-italic: (\n font-size: $ionic-font-size-400,\n font-style: italic,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-md-regular: (\n font-size: $ionic-font-size-350,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-md-medium: (\n font-size: $ionic-font-size-350,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-md-semi-bold: (\n font-size: $ionic-font-size-350,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-md-bold: (\n font-size: $ionic-font-size-350,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-md-link: (\n font-size: $ionic-font-size-350,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: underline,\n);\n\n$ionic-body-md-italic: (\n font-size: $ionic-font-size-350,\n font-style: italic,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-sm-regular: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-sm-medium: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-sm-semi-bold: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-sm-bold: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-body-sm-link: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: underline,\n);\n\n$ionic-body-sm-italic: (\n font-size: $ionic-font-size-300,\n font-style: italic,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-0,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-action-xl: (\n font-size: $ionic-font-size-500,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-1,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-action-lg: (\n font-size: $ionic-font-size-400,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-1,\n line-height: $ionic-line-height-600,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-action-md: (\n font-size: $ionic-font-size-350,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-1,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-action-sm: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-1,\n line-height: $ionic-line-height-500,\n text-transform: none,\n text-decoration: none,\n);\n\n$ionic-overline-regular: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-regular,\n letter-spacing: $ionic-letter-spacing-2,\n line-height: $ionic-line-height-500,\n text-transform: uppercase,\n text-decoration: none,\n);\n\n$ionic-overline-medium: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-medium,\n letter-spacing: $ionic-letter-spacing-2,\n line-height: $ionic-line-height-500,\n text-transform: uppercase,\n text-decoration: none,\n);\n\n$ionic-overline-semi-bold: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-semi-bold,\n letter-spacing: $ionic-letter-spacing-2,\n line-height: $ionic-line-height-500,\n text-transform: uppercase,\n text-decoration: none,\n);\n\n$ionic-overline-bold: (\n font-size: $ionic-font-size-300,\n font-style: normal,\n font-weight: $ionic-font-weight-bold,\n letter-spacing: $ionic-letter-spacing-2,\n line-height: $ionic-line-height-500,\n text-transform: uppercase,\n text-decoration: none,\n);\n","// Ionic Mixins\n// forward the global mixin to be used on component scope\n@forward \"../mixins\";\n// use global mixins on this ionic.mixin context\n@use \"../mixins\" as mixins;\n@use \"../../foundations/ionic.vars.scss\" as tokens;\n\n// Pressed mixin to be used on pseudo elements for the Ionic Theme pressed state\n//\n// ex: :host(.ion-activated) .toggle-icon:after {\n// @include globals.pressed-state();\n// }\n//\n// --------------------------------------------------\n@mixin pressed-state() {\n @include mixins.position(0, 0, 0, 0);\n\n position: absolute;\n\n background-color: tokens.$ionic-state-pressed;\n\n content: \"\";\n}\n\n// Disabled mixin to be used on pseudo elements for the Ionic Theme disabled state\n//\n// ex: :host(.checkbox-disabled) .native-wrapper:after {\n// @include globals.disable-state();\n// }\n//\n// --------------------------------------------------\n@mixin disabled-state() {\n @include mixins.position(0, 0, 0, 0);\n\n position: absolute;\n\n background-color: tokens.$ionic-state-disabled;\n\n content: \"\";\n\n pointer-events: none;\n}\n\n// Typography mixin to be used with typography scss variables (ionic.vars.scss)\n//\n// ex: @include typography($ionic-heading-h3-medium);\n//\n// --------------------------------------------------\n@mixin typography($properties) {\n font-family: map-get($properties, font-family);\n font-size: map-get($properties, font-size);\n font-weight: map-get($properties, font-weight);\n\n letter-spacing: map-get($properties, letter-spacing);\n line-height: map-get($properties, line-height);\n\n text-decoration: map-get($properties, text-decoration);\n text-transform: map-get($properties, text-transform);\n}\n"]}
package/dist/cjs/ion-input-password-toggle.cjs.entry.js CHANGED
@@ -14,11 +14,14 @@ const eyeSlashSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53M
14
14
 
15
15
  const eyeSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yNDcuMzEsMTI0Ljc2Yy0uMzUtLjc5LTguODItMTkuNTgtMjcuNjUtMzguNDFDMTk0LjU3LDYxLjI2LDE2Mi44OCw0OCwxMjgsNDhTNjEuNDMsNjEuMjYsMzYuMzQsODYuMzVDMTcuNTEsMTA1LjE4LDksMTI0LDguNjksMTI0Ljc2YTgsOCwwLDAsMCwwLDYuNWMuMzUuNzksOC44MiwxOS41NywyNy42NSwzOC40QzYxLjQzLDE5NC43NCw5My4xMiwyMDgsMTI4LDIwOHM2Ni41Ny0xMy4yNiw5MS42Ni0zOC4zNGMxOC44My0xOC44MywyNy4zLTM3LjYxLDI3LjY1LTM4LjRBOCw4LDAsMCwwLDI0Ny4zMSwxMjQuNzZaTTEyOCwxOTJjLTMwLjc4LDAtNTcuNjctMTEuMTktNzkuOTMtMzMuMjVBMTMzLjQ3LDEzMy40NywwLDAsMSwyNSwxMjgsMTMzLjMzLDEzMy4zMywwLDAsMSw0OC4wNyw5Ny4yNUM3MC4zMyw3NS4xOSw5Ny4yMiw2NCwxMjgsNjRzNTcuNjcsMTEuMTksNzkuOTMsMzMuMjVBMTMzLjQ2LDEzMy40NiwwLDAsMSwyMzEuMDUsMTI4QzIyMy44NCwxNDEuNDYsMTkyLjQzLDE5MiwxMjgsMTkyWm0wLTExMmE0OCw0OCwwLDEsMCw0OCw0OEE0OC4wNSw0OC4wNSwwLDAsMCwxMjgsODBabTAsODBhMzIsMzIsMCwxLDEsMzItMzJBMzIsMzIsMCwwLDEsMTI4LDE2MFoiLz48L3N2Zz4=';
16
16
 
17
- const iosInputPasswordToggleCss = "";
18
- const IonInputPasswordToggleIosStyle0 = iosInputPasswordToggleCss;
17
+ const inputPasswordToggleIonicCss = ":host ion-button.in-input-password-toggle{--color:var(--ionic-color-neutral-800, #626262);--margin-end:calc(-1 * var(--padding-end));--padding-end:inherit;--size:40px;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:0;margin-bottom:0;width:var(--size);height:var(--size);}:host ion-button.in-input-password-toggle ion-icon{font-size:1rem}:host ion-button.in-input-password-toggle.button-large{--size:50px}";
18
+ const IonInputPasswordToggleIonicStyle0 = inputPasswordToggleIonicCss;
19
19
 
20
- const mdInputPasswordToggleCss = "";
21
- const IonInputPasswordToggleMdStyle0 = mdInputPasswordToggleCss;
20
+ const iosInputPasswordToggleCommonCss = "";
21
+ const IonInputPasswordToggleIosStyle0 = iosInputPasswordToggleCommonCss;
22
+
23
+ const mdInputPasswordToggleCommonCss = "";
24
+ const IonInputPasswordToggleMdStyle0 = mdInputPasswordToggleCommonCss;
22
25
 
23
26
  const InputPasswordToggle = class {
24
27
  constructor(hostRef) {
@@ -100,19 +103,20 @@ const InputPasswordToggle = class {
100
103
  return ionicGlobal.config.get('inputPasswordShowIcon', defaultIcon);
101
104
  }
102
105
  render() {
106
+ var _a;
103
107
  const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
104
108
  const mode = ionicGlobal.getIonMode(this);
105
109
  const isPasswordVisible = type === 'text';
106
- return (index.h(index.Host, { key: '4ca80b49b49f4ed0c14573a2965e5590e1cb7607', class: theme.createColorClasses(color, {
110
+ return (index.h(index.Host, { key: '8ce35f251528033244f0dd934d06e6ec7357d400', class: theme.createColorClasses(color, {
107
111
  [mode]: true,
108
- }) }, index.h("ion-button", { key: '37eeacd2673026ce9c068c45af0df09a9d83156c', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
112
+ }) }, index.h("ion-button", { key: '9eba95640ed1547bdd413ff363c43eeca8bd50db', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", size: (_a = this.el.closest('ion-input')) === null || _a === void 0 ? void 0 : _a.size, class: "in-input-password-toggle", onPointerDown: (ev) => {
109
113
  /**
110
114
  * This prevents mobile browsers from
111
115
  * blurring the input when the password toggle
112
116
  * button is activated.
113
117
  */
114
118
  ev.preventDefault();
115
- }, onClick: this.togglePasswordVisibility }, index.h("ion-icon", { key: '27ad27e94b0fee38cf6129870621a0c96de4375a', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
119
+ }, onClick: this.togglePasswordVisibility }, index.h("ion-icon", { key: 'd35b554fc63c32b54dbcd82649556081aab74898', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
116
120
  }
117
121
  get el() { return index.getElement(this); }
118
122
  static get watchers() { return {
@@ -120,6 +124,7 @@ const InputPasswordToggle = class {
120
124
  }; }
121
125
  };
122
126
  InputPasswordToggle.style = {
127
+ ionic: IonInputPasswordToggleIonicStyle0,
123
128
  ios: IonInputPasswordToggleIosStyle0,
124
129
  md: IonInputPasswordToggleMdStyle0
125
130
  };
package/dist/cjs/ion-input.cjs.entry.js CHANGED
@@ -268,6 +268,14 @@ const Input = class {
268
268
  getValue() {
269
269
  return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
270
270
  }
271
+ getFill() {
272
+ const theme = ionicGlobal.getIonTheme(this);
273
+ const { fill } = this;
274
+ if (theme === 'ionic' && fill === undefined) {
275
+ return 'outline';
276
+ }
277
+ return fill;
278
+ }
271
279
  getLabelPlacement() {
272
280
  const theme = ionicGlobal.getIonTheme(this);
273
281
  const { el, labelPlacement } = this;
@@ -453,9 +461,10 @@ const Input = class {
453
461
  return ionicGlobal.config.get('inputClearIcon', defaultIcon);
454
462
  }
455
463
  render() {
456
- const { disabled, fill, readonly, inputId, el, hasFocus, clearInput, inputClearIcon } = this;
464
+ const { disabled, readonly, inputId, el, hasFocus, clearInput, inputClearIcon } = this;
457
465
  const theme$1 = ionicGlobal.getIonTheme(this);
458
466
  const value = this.getValue();
467
+ const fill = this.getFill();
459
468
  const size = this.getSize();
460
469
  const shape = this.getShape();
461
470
  const inItem = theme.hostContext('ion-item', this.el);
@@ -481,7 +490,7 @@ const Input = class {
481
490
  * TODO(FW-5592): Remove hasStartEndSlots condition
482
491
  */
483
492
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
484
- return (index.h(index.Host, { key: '7ff842b13cd33bc119946de09f790f1563e31518', class: theme.createColorClasses(this.color, {
493
+ return (index.h(index.Host, { key: '95fe18aa3f3056ce88a2f08c0e47382213e0eeb2', class: theme.createColorClasses(this.color, {
485
494
  [theme$1]: true,
486
495
  'has-value': hasValue,
487
496
  'has-focus': hasFocus,
@@ -494,7 +503,7 @@ const Input = class {
494
503
  'in-item-color': theme.hostContext('ion-item.ion-color', this.el),
495
504
  'input-disabled': disabled,
496
505
  'input-readonly': readonly,
497
- }) }, index.h("label", { key: '218e909896d3f467b29821c1a209b4180b071427', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), index.h("div", { key: '022a9ead5769f532052b6c675a87cd79db98db7e', class: "native-wrapper" },
506
+ }) }, index.h("label", { key: '088e5cbdc63481e83f2cecf1228e31533de11fe3', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), index.h("div", { key: '0311bc8d8ca91920c9ed8630762933d10a5d8df4', class: "native-wrapper" },
498
507
  /**
499
508
  * For the ionic theme, we render the outline container here
500
509
  * instead of higher up, so it can be positioned relative to
@@ -504,7 +513,7 @@ const Input = class {
504
513
  * <label> element, ensuring that clicking the label text
505
514
  * focuses the input.
506
515
  */
507
- theme$1 === 'ionic' && fill === 'outline' && index.h("div", { key: '387fda749ac395c9f4b478c9267f25991238103c', class: "input-outline" }), index.h("slot", { key: '5a135729d8efda822d3b6e9004148c3233fd8085', name: "start" }), index.h("input", Object.assign({ key: 'b64d49881b9de32ea40a9fb5be45e3cb167929ea', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (index.h("button", { key: 'f04bdaf678c49d11fbe69eaa9710a1585cbca438', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
516
+ theme$1 === 'ionic' && fill === 'outline' && index.h("div", { key: '8dd4695edebba5964e1dbb1d733b2d2e636ec581', class: "input-outline" }), index.h("slot", { key: '2065978166c9017f9383de71861babdfc3fb1cbe', name: "start" }), index.h("input", Object.assign({ key: '8fb6627afac9457eb23abb149607566a18175ef4', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (index.h("button", { key: '739f486081fc9e7ba6b1387dd6a813f3a2eb484a', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
508
517
  /**
509
518
  * This prevents mobile browsers from
510
519
  * blurring the input when the clear
@@ -519,7 +528,7 @@ const Input = class {
519
528
  * for screen readers as it means users would be unable to swipe past the clear button.
520
529
  */
521
530
  ev.stopPropagation();
522
- }, onClick: this.clearTextInput }, index.h("ion-icon", { key: 'e06cb3f0c583d3d1c6a1b41a3903f7252957c913', "aria-hidden": "true", icon: inputClearIcon }))), index.h("slot", { key: 'b0b22fe170a3ed593aa1ad20a20669cafc1e1062', name: "end" })), shouldRenderHighlight && index.h("div", { key: 'f06bd25e97d79f2d7a44105ab113187692cc52d3', class: "input-highlight" })), this.renderBottomContent()));
531
+ }, onClick: this.clearTextInput }, index.h("ion-icon", { key: '0775e8fa9b9cf9df17743472edbc2f307e4f4b9a', "aria-hidden": "true", icon: inputClearIcon }))), index.h("slot", { key: '72e48a851f3fb2450af96f9d271b27dcb0bca047', name: "end" })), shouldRenderHighlight && index.h("div", { key: 'e91752ecd290374ae7adbe0b99163092a9e3f0fd', class: "input-highlight" })), this.renderBottomContent()));
523
532
  }
524
533
  get el() { return index.getElement(this); }
525
534
  static get watchers() { return {
package/dist/cjs/ion-textarea.cjs.entry.js CHANGED
@@ -13,7 +13,7 @@ const theme = require('./theme-d1c573d2.js');
13
13
  const ionicGlobal = require('./ionic-global-2bd379ad.js');
14
14
  require('./index-c8d52405.js');
15
15
 
16
- const textareaIonicCss = ".sc-ion-textarea-ionic-h{--background:initial;--color:initial;--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0;--padding-end:0;--padding-bottom:8px;--padding-start:0;--border-radius:0;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box}[cols].sc-ion-textarea-ionic-h:not([auto-grow]){width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ion-color.sc-ion-textarea-ionic-h{--highlight-color-focused:var(--ion-color-base);background:initial}ion-item.sc-ion-textarea-ionic-h,ion-item .sc-ion-textarea-ionic-h{-ms-flex-item-align:baseline;align-self:baseline}ion-item[slot=start].sc-ion-textarea-ionic-h,ion-item [slot=start].sc-ion-textarea-ionic-h,ion-item[slot=end].sc-ion-textarea-ionic-h,ion-item [slot=end].sc-ion-textarea-ionic-h{width:auto}.native-textarea.sc-ion-textarea-ionic{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;white-space:pre-wrap;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.native-textarea.sc-ion-textarea-ionic::-webkit-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ionic::-moz-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ionic:-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ionic::-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ionic::placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ionic{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.cloned-input.sc-ion-textarea-ionic{top:0;bottom:0;position:absolute;pointer-events:none}.cloned-input.sc-ion-textarea-ionic{inset-inline-start:0}.cloned-input.sc-ion-textarea-ionic:disabled{opacity:1}[auto-grow].sc-ion-textarea-ionic-h .cloned-input.sc-ion-textarea-ionic{height:100%}[auto-grow].sc-ion-textarea-ionic-h .native-textarea.sc-ion-textarea-ionic{overflow:hidden}.textarea-wrapper.sc-ion-textarea-ionic{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:0px;padding-bottom:0px;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;align-items:flex-start;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.native-wrapper.sc-ion-textarea-ionic{position:relative;width:100%;height:100%}.has-focus.sc-ion-textarea-ionic-h textarea.sc-ion-textarea-ionic{caret-color:var(--highlight-color)}.native-wrapper.sc-ion-textarea-ionic{display:grid;min-width:inherit;max-width:inherit;grid-auto-rows:100%}.native-wrapper.sc-ion-textarea-ionic::after{white-space:pre-wrap;content:attr(data-replicated-value) \" \";visibility:hidden}.native-wrapper.sc-ion-textarea-ionic::after{padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.textarea-wrapper-inner.sc-ion-textarea-ionic{display:-ms-flexbox;display:flex;width:100%;min-height:inherit}.ion-touched.ion-invalid.sc-ion-textarea-ionic-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-textarea-ionic-h{--highlight-color:var(--highlight-color-valid)}.textarea-bottom.sc-ion-textarea-ionic{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color)}.has-focus.ion-valid.sc-ion-textarea-ionic-h,.ion-touched.ion-invalid.sc-ion-textarea-ionic-h{--border-color:var(--highlight-color)}.textarea-bottom.sc-ion-textarea-ionic .error-text.sc-ion-textarea-ionic{display:none;color:var(--highlight-color-invalid)}.textarea-bottom.sc-ion-textarea-ionic .helper-text.sc-ion-textarea-ionic{display:block;color:var(--ion-color-step-550, var(--ion-text-color-step-450, #737373))}.ion-touched.ion-invalid.sc-ion-textarea-ionic-h .textarea-bottom.sc-ion-textarea-ionic .error-text.sc-ion-textarea-ionic{display:block}.ion-touched.ion-invalid.sc-ion-textarea-ionic-h .textarea-bottom.sc-ion-textarea-ionic .helper-text.sc-ion-textarea-ionic{display:none}.textarea-bottom.sc-ion-textarea-ionic .counter.sc-ion-textarea-ionic{-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.label-text-wrapper.sc-ion-textarea-ionic{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text.sc-ion-textarea-ionic,.sc-ion-textarea-ionic-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-textarea-ionic,.textarea-outline-notch-hidden.sc-ion-textarea-ionic{display:none}.textarea-wrapper.sc-ion-textarea-ionic textarea.sc-ion-textarea-ionic{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.textarea-label-placement-start.sc-ion-textarea-ionic-h .textarea-wrapper.sc-ion-textarea-ionic{-ms-flex-direction:row;flex-direction:row}.textarea-label-placement-end.sc-ion-textarea-ionic-h .textarea-wrapper.sc-ion-textarea-ionic{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.textarea-label-placement-fixed.sc-ion-textarea-ionic-h .label-text.sc-ion-textarea-ionic{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.textarea-label-placement-stacked.sc-ion-textarea-ionic-h .textarea-wrapper.sc-ion-textarea-ionic,.textarea-label-placement-floating.sc-ion-textarea-ionic-h .textarea-wrapper.sc-ion-textarea-ionic{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.textarea-label-placement-stacked.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,.textarea-label-placement-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic{-webkit-transform-origin:left top;transform-origin:left top;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;max-width:100%;z-index:2}[dir=rtl].sc-ion-textarea-ionic-h -no-combinator.textarea-label-placement-stacked.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,[dir=rtl] .sc-ion-textarea-ionic-h -no-combinator.textarea-label-placement-stacked.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,[dir=rtl].textarea-label-placement-stacked.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,[dir=rtl] .textarea-label-placement-stacked.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,[dir=rtl].sc-ion-textarea-ionic-h -no-combinator.textarea-label-placement-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,[dir=rtl] .sc-ion-textarea-ionic-h -no-combinator.textarea-label-placement-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,[dir=rtl].textarea-label-placement-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,[dir=rtl] .textarea-label-placement-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.textarea-label-placement-stacked.sc-ion-textarea-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-ionic,.textarea-label-placement-floating.sc-ion-textarea-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-ionic{-webkit-transform-origin:right top;transform-origin:right top}}.textarea-label-placement-stacked.sc-ion-textarea-ionic-h textarea.sc-ion-textarea-ionic,.textarea-label-placement-floating.sc-ion-textarea-ionic-h textarea.sc-ion-textarea-ionic,.textarea-label-placement-stacked[auto-grow].sc-ion-textarea-ionic-h .native-wrapper.sc-ion-textarea-ionic::after,.textarea-label-placement-floating[auto-grow].sc-ion-textarea-ionic-h .native-wrapper.sc-ion-textarea-ionic::after{-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:8px;margin-bottom:0px}.textarea-label-placement-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.textarea-label-placement-floating.sc-ion-textarea-ionic-h textarea.sc-ion-textarea-ionic{opacity:0}.has-focus.textarea-label-placement-floating.sc-ion-textarea-ionic-h textarea.sc-ion-textarea-ionic,.has-value.textarea-label-placement-floating.sc-ion-textarea-ionic-h textarea.sc-ion-textarea-ionic{opacity:1}.label-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.start-slot-wrapper.sc-ion-textarea-ionic,.end-slot-wrapper.sc-ion-textarea-ionic{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:start;align-self:start}.textarea-fill-outline.sc-ion-textarea-ionic-h{--border-width:var(--ionic-border-size-025, 1px);--border-color:var(--ionic-color-neutral-500, #a2a2a2)}.textarea-fill-outline.sc-ion-textarea-ionic-h .textarea-wrapper-inner.sc-ion-textarea-ionic{position:relative}.textarea-fill-outline.sc-ion-textarea-ionic-h .textarea-outline.sc-ion-textarea-ionic{right:0;left:0;top:0;bottom:0;border-radius:var(--border-radius);position:absolute;width:100%;height:100%;pointer-events:none;border:var(--border-width) var(--border-style) var(--border-color)}.textarea-fill-outline.sc-ion-textarea-ionic-h .textarea-bottom.sc-ion-textarea-ionic{border-top:none}.textarea-fill-outline.sc-ion-textarea-ionic-h textarea.sc-ion-textarea-ionic{margin-top:var(--ionic-space-100, 4px)}.sc-ion-textarea-ionic-h{--border-radius:var(--ionic-border-radius-400, 16px);--color:var(--ionic-color-neutral-1200, #242424);--highlight-color-valid:var(--ionic-color-success-base, #1ba433);--highlight-color-invalid:var(--ionic-color-danger-base, #e52929);--placeholder-color:var(--ionic-color-neutral-800, #626262);--placeholder-opacity:1;--background:var(--ionic-color-base-white, #ffffff);font-size:var(--ionic-font-size-350, 0.875rem);font-weight:var(--ionic-font-weight-regular, 400);letter-spacing:var(--ionic-letter-spacing-0, 0);line-height:var(--ionic-line-height-600, 24px);text-decoration:none;text-transform:none}.textarea-wrapper-inner.sc-ion-textarea-ionic{height:0}.textarea-size-small.sc-ion-textarea-ionic-h .textarea-wrapper-inner.sc-ion-textarea-ionic{--padding-top:var(--ionic-space-200, 8px);--padding-end:var(--ionic-space-300, 12px);--padding-bottom:var(--ionic-space-200, 8px);--padding-start:var(--ionic-space-300, 12px);min-height:var(--ionic-scale-2800, 112px)}.textarea-size-medium.sc-ion-textarea-ionic-h .textarea-wrapper-inner.sc-ion-textarea-ionic{--padding-top:var(--ionic-space-300, 12px);--padding-end:var(--ionic-space-400, 16px);--padding-bottom:var(--ionic-space-300, 12px);--padding-start:var(--ionic-space-400, 16px);min-height:var(--ionic-scale-3400, 136px)}.textarea-size-large.sc-ion-textarea-ionic-h .textarea-wrapper-inner.sc-ion-textarea-ionic{--padding-top:var(--ionic-space-400, 16px);--padding-end:var(--ionic-space-500, 20px);--padding-bottom:var(--ionic-space-400, 16px);--padding-start:var(--ionic-space-500, 20px);min-height:var(--ionic-scale-3600, 144px)}.textarea-wrapper.sc-ion-textarea-ionic{gap:var(--ionic-space-100, 4px)}.textarea-wrapper-inner.sc-ion-textarea-ionic{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}[auto-grow].sc-ion-textarea-ionic-h .textarea-wrapper-inner.sc-ion-textarea-ionic{height:auto}[auto-grow].sc-ion-textarea-ionic-h .native-wrapper.sc-ion-textarea-ionic{min-height:inherit;max-height:inherit}.label-text-wrapper.sc-ion-textarea-ionic{font-size:var(--ionic-font-size-300, 0.75rem);font-weight:var(--ionic-font-weight-medium, 500);letter-spacing:var(--ionic-letter-spacing-0, 0);line-height:var(--ionic-line-height-500, 20px);text-decoration:none;text-transform:none;color:var(--ionic-color-neutral-1000, #3b3b3b)}.label-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic{-webkit-transform:none;transform:none}ion-icon.sc-ion-textarea-ionic{color:var(--ionic-color-neutral-800, #626262);font-size:var(--ionic-scale-400, 16px)}.start-slot-wrapper.sc-ion-textarea-ionic,.end-slot-wrapper.sc-ion-textarea-ionic{margin-top:var(--ionic-space-050, 2px)}.textarea-bottom.sc-ion-textarea-ionic{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--ionic-space-100, 4px);font-size:var(--ionic-font-size-300, 0.75rem);font-weight:var(--ionic-font-weight-medium, 500);letter-spacing:var(--ionic-letter-spacing-0, 0);line-height:var(--ionic-line-height-500, 20px);text-decoration:none;text-transform:none}.textarea-bottom.sc-ion-textarea-ionic .helper-text.sc-ion-textarea-ionic,.textarea-bottom.sc-ion-textarea-ionic .counter.sc-ion-textarea-ionic{color:var(--ionic-color-neutral-800, #626262)}";
16
+ const textareaIonicCss = ".sc-ion-textarea-ionic-h{--background:initial;--color:initial;--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0;--padding-end:0;--padding-bottom:8px;--padding-start:0;--border-radius:0;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box}[cols].sc-ion-textarea-ionic-h:not([auto-grow]){width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ion-color.sc-ion-textarea-ionic-h{--highlight-color-focused:var(--ion-color-base);background:initial}ion-item.sc-ion-textarea-ionic-h,ion-item .sc-ion-textarea-ionic-h{-ms-flex-item-align:baseline;align-self:baseline}ion-item[slot=start].sc-ion-textarea-ionic-h,ion-item [slot=start].sc-ion-textarea-ionic-h,ion-item[slot=end].sc-ion-textarea-ionic-h,ion-item [slot=end].sc-ion-textarea-ionic-h{width:auto}.native-textarea.sc-ion-textarea-ionic{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;white-space:pre-wrap;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.native-textarea.sc-ion-textarea-ionic::-webkit-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ionic::-moz-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ionic:-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ionic::-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ionic::placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ionic{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.cloned-input.sc-ion-textarea-ionic{top:0;bottom:0;position:absolute;pointer-events:none}.cloned-input.sc-ion-textarea-ionic{inset-inline-start:0}.cloned-input.sc-ion-textarea-ionic:disabled{opacity:1}[auto-grow].sc-ion-textarea-ionic-h .cloned-input.sc-ion-textarea-ionic{height:100%}[auto-grow].sc-ion-textarea-ionic-h .native-textarea.sc-ion-textarea-ionic{overflow:hidden}.textarea-wrapper.sc-ion-textarea-ionic{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:0px;padding-bottom:0px;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;align-items:flex-start;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.native-wrapper.sc-ion-textarea-ionic{position:relative;width:100%;height:100%}.has-focus.sc-ion-textarea-ionic-h textarea.sc-ion-textarea-ionic{caret-color:var(--highlight-color)}.native-wrapper.sc-ion-textarea-ionic{display:grid;min-width:inherit;max-width:inherit;grid-auto-rows:100%}.native-wrapper.sc-ion-textarea-ionic::after{white-space:pre-wrap;content:attr(data-replicated-value) \" \";visibility:hidden}.native-wrapper.sc-ion-textarea-ionic::after{padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.textarea-wrapper-inner.sc-ion-textarea-ionic{display:-ms-flexbox;display:flex;width:100%;min-height:inherit}.ion-touched.ion-invalid.sc-ion-textarea-ionic-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-textarea-ionic-h{--highlight-color:var(--highlight-color-valid)}.textarea-bottom.sc-ion-textarea-ionic{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color)}.has-focus.ion-valid.sc-ion-textarea-ionic-h,.ion-touched.ion-invalid.sc-ion-textarea-ionic-h{--border-color:var(--highlight-color)}.textarea-bottom.sc-ion-textarea-ionic .error-text.sc-ion-textarea-ionic{display:none;color:var(--highlight-color-invalid)}.textarea-bottom.sc-ion-textarea-ionic .helper-text.sc-ion-textarea-ionic{display:block;color:var(--ion-color-step-550, var(--ion-text-color-step-450, #737373))}.ion-touched.ion-invalid.sc-ion-textarea-ionic-h .textarea-bottom.sc-ion-textarea-ionic .error-text.sc-ion-textarea-ionic{display:block}.ion-touched.ion-invalid.sc-ion-textarea-ionic-h .textarea-bottom.sc-ion-textarea-ionic .helper-text.sc-ion-textarea-ionic{display:none}.textarea-bottom.sc-ion-textarea-ionic .counter.sc-ion-textarea-ionic{-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.label-text-wrapper.sc-ion-textarea-ionic{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text.sc-ion-textarea-ionic,.sc-ion-textarea-ionic-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-textarea-ionic,.textarea-outline-notch-hidden.sc-ion-textarea-ionic{display:none}.textarea-wrapper.sc-ion-textarea-ionic textarea.sc-ion-textarea-ionic{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.textarea-label-placement-start.sc-ion-textarea-ionic-h .textarea-wrapper.sc-ion-textarea-ionic{-ms-flex-direction:row;flex-direction:row}.textarea-label-placement-end.sc-ion-textarea-ionic-h .textarea-wrapper.sc-ion-textarea-ionic{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.textarea-label-placement-fixed.sc-ion-textarea-ionic-h .label-text.sc-ion-textarea-ionic{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.textarea-label-placement-stacked.sc-ion-textarea-ionic-h .textarea-wrapper.sc-ion-textarea-ionic,.textarea-label-placement-floating.sc-ion-textarea-ionic-h .textarea-wrapper.sc-ion-textarea-ionic{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.textarea-label-placement-stacked.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,.textarea-label-placement-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic{-webkit-transform-origin:left top;transform-origin:left top;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;max-width:100%;z-index:2}[dir=rtl].sc-ion-textarea-ionic-h -no-combinator.textarea-label-placement-stacked.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,[dir=rtl] .sc-ion-textarea-ionic-h -no-combinator.textarea-label-placement-stacked.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,[dir=rtl].textarea-label-placement-stacked.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,[dir=rtl] .textarea-label-placement-stacked.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,[dir=rtl].sc-ion-textarea-ionic-h -no-combinator.textarea-label-placement-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,[dir=rtl] .sc-ion-textarea-ionic-h -no-combinator.textarea-label-placement-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,[dir=rtl].textarea-label-placement-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic,[dir=rtl] .textarea-label-placement-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.textarea-label-placement-stacked.sc-ion-textarea-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-ionic,.textarea-label-placement-floating.sc-ion-textarea-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-ionic{-webkit-transform-origin:right top;transform-origin:right top}}.textarea-label-placement-stacked.sc-ion-textarea-ionic-h textarea.sc-ion-textarea-ionic,.textarea-label-placement-floating.sc-ion-textarea-ionic-h textarea.sc-ion-textarea-ionic,.textarea-label-placement-stacked[auto-grow].sc-ion-textarea-ionic-h .native-wrapper.sc-ion-textarea-ionic::after,.textarea-label-placement-floating[auto-grow].sc-ion-textarea-ionic-h .native-wrapper.sc-ion-textarea-ionic::after{-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:8px;margin-bottom:0px}.textarea-label-placement-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.textarea-label-placement-floating.sc-ion-textarea-ionic-h textarea.sc-ion-textarea-ionic{opacity:0}.has-focus.textarea-label-placement-floating.sc-ion-textarea-ionic-h textarea.sc-ion-textarea-ionic,.has-value.textarea-label-placement-floating.sc-ion-textarea-ionic-h textarea.sc-ion-textarea-ionic{opacity:1}.label-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.start-slot-wrapper.sc-ion-textarea-ionic,.end-slot-wrapper.sc-ion-textarea-ionic{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:start;align-self:start}.textarea-fill-outline.sc-ion-textarea-ionic-h{--border-width:var(--ionic-border-size-025, 1px);--border-color:var(--ionic-color-neutral-500, #a2a2a2)}.textarea-fill-outline.sc-ion-textarea-ionic-h .textarea-wrapper-inner.sc-ion-textarea-ionic{position:relative}.textarea-fill-outline.sc-ion-textarea-ionic-h .textarea-outline.sc-ion-textarea-ionic{right:0;left:0;top:0;bottom:0;border-radius:var(--border-radius);position:absolute;width:100%;height:100%;pointer-events:none;border:var(--border-width) var(--border-style) var(--border-color)}.textarea-fill-outline.sc-ion-textarea-ionic-h .textarea-bottom.sc-ion-textarea-ionic{border-top:none}.textarea-fill-outline.sc-ion-textarea-ionic-h textarea.sc-ion-textarea-ionic{margin-top:var(--ionic-space-100, 4px)}.sc-ion-textarea-ionic-h{--color:var(--ionic-color-neutral-1200, #242424);--highlight-color-valid:var(--ionic-color-success-base, #1ba433);--highlight-color-invalid:var(--ionic-color-danger-base, #e52929);--placeholder-color:var(--ionic-color-neutral-800, #626262);--placeholder-opacity:1;--background:var(--ionic-color-base-white, #ffffff);font-size:var(--ionic-font-size-350, 0.875rem);font-weight:var(--ionic-font-weight-regular, 400);letter-spacing:var(--ionic-letter-spacing-0, 0);line-height:var(--ionic-line-height-600, 24px);text-decoration:none;text-transform:none}.textarea-wrapper-inner.sc-ion-textarea-ionic{height:0}.textarea-size-small.sc-ion-textarea-ionic-h .textarea-wrapper-inner.sc-ion-textarea-ionic{--padding-top:var(--ionic-space-200, 8px);--padding-end:var(--ionic-space-300, 12px);--padding-bottom:var(--ionic-space-200, 8px);--padding-start:var(--ionic-space-300, 12px);min-height:var(--ionic-scale-2800, 112px)}.textarea-size-medium.sc-ion-textarea-ionic-h .textarea-wrapper-inner.sc-ion-textarea-ionic{--padding-top:var(--ionic-space-300, 12px);--padding-end:var(--ionic-space-400, 16px);--padding-bottom:var(--ionic-space-300, 12px);--padding-start:var(--ionic-space-400, 16px);min-height:var(--ionic-scale-3400, 136px)}.textarea-size-large.sc-ion-textarea-ionic-h .textarea-wrapper-inner.sc-ion-textarea-ionic{--padding-top:var(--ionic-space-400, 16px);--padding-end:var(--ionic-space-500, 20px);--padding-bottom:var(--ionic-space-400, 16px);--padding-start:var(--ionic-space-500, 20px);min-height:var(--ionic-scale-3600, 144px)}.textarea-shape-soft.sc-ion-textarea-ionic-h{--border-radius:var(--ionic-border-radius-200, 8px)}.textarea-shape-round.sc-ion-textarea-ionic-h{--border-radius:var(--ionic-border-radius-400, 16px)}.textarea-shape-rectangular.sc-ion-textarea-ionic-h{--border-radius:var(--ionic-border-radius-0, 0px)}.textarea-wrapper.sc-ion-textarea-ionic{gap:var(--ionic-space-100, 4px)}.textarea-wrapper-inner.sc-ion-textarea-ionic{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}[auto-grow].sc-ion-textarea-ionic-h .textarea-wrapper-inner.sc-ion-textarea-ionic{height:auto}[auto-grow].sc-ion-textarea-ionic-h .native-wrapper.sc-ion-textarea-ionic{min-height:inherit;max-height:inherit}.label-text-wrapper.sc-ion-textarea-ionic{font-size:var(--ionic-font-size-300, 0.75rem);font-weight:var(--ionic-font-weight-medium, 500);letter-spacing:var(--ionic-letter-spacing-0, 0);line-height:var(--ionic-line-height-500, 20px);text-decoration:none;text-transform:none;color:var(--ionic-color-neutral-1000, #3b3b3b)}.label-floating.sc-ion-textarea-ionic-h .label-text-wrapper.sc-ion-textarea-ionic{-webkit-transform:none;transform:none}ion-icon.sc-ion-textarea-ionic{color:var(--ionic-color-neutral-800, #626262);font-size:var(--ionic-scale-400, 16px)}.start-slot-wrapper.sc-ion-textarea-ionic,.end-slot-wrapper.sc-ion-textarea-ionic{margin-top:var(--ionic-space-050, 2px)}.textarea-bottom.sc-ion-textarea-ionic{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--ionic-space-100, 4px);font-size:var(--ionic-font-size-300, 0.75rem);font-weight:var(--ionic-font-weight-medium, 500);letter-spacing:var(--ionic-letter-spacing-0, 0);line-height:var(--ionic-line-height-500, 20px);text-decoration:none;text-transform:none}.textarea-bottom.sc-ion-textarea-ionic .helper-text.sc-ion-textarea-ionic,.textarea-bottom.sc-ion-textarea-ionic .counter.sc-ion-textarea-ionic{color:var(--ionic-color-neutral-800, #626262)}";
17
17
  const IonTextareaIonicStyle0 = textareaIonicCss;
18
18
 
19
19
  const textareaIosCss = ".sc-ion-textarea-ios-h{--background:initial;--color:initial;--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0;--padding-end:0;--padding-bottom:8px;--padding-start:0;--border-radius:0;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;color:var(--color);-webkit-box-sizing:border-box;box-sizing:border-box}[cols].sc-ion-textarea-ios-h:not([auto-grow]){width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ion-color.sc-ion-textarea-ios-h{--highlight-color-focused:var(--ion-color-base);background:initial}ion-item.sc-ion-textarea-ios-h,ion-item .sc-ion-textarea-ios-h{-ms-flex-item-align:baseline;align-self:baseline}ion-item[slot=start].sc-ion-textarea-ios-h,ion-item [slot=start].sc-ion-textarea-ios-h,ion-item[slot=end].sc-ion-textarea-ios-h,ion-item [slot=end].sc-ion-textarea-ios-h{width:auto}.native-textarea.sc-ion-textarea-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;white-space:pre-wrap;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.native-textarea.sc-ion-textarea-ios::-webkit-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ios::-moz-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ios:-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ios::-ms-input-placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ios::placeholder{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-textarea.sc-ion-textarea-ios{color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.cloned-input.sc-ion-textarea-ios{top:0;bottom:0;position:absolute;pointer-events:none}.cloned-input.sc-ion-textarea-ios{inset-inline-start:0}.cloned-input.sc-ion-textarea-ios:disabled{opacity:1}[auto-grow].sc-ion-textarea-ios-h .cloned-input.sc-ion-textarea-ios{height:100%}[auto-grow].sc-ion-textarea-ios-h .native-textarea.sc-ion-textarea-ios{overflow:hidden}.textarea-wrapper.sc-ion-textarea-ios{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:0px;padding-bottom:0px;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:start;align-items:flex-start;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.native-wrapper.sc-ion-textarea-ios{position:relative;width:100%;height:100%}.has-focus.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios{caret-color:var(--highlight-color)}.native-wrapper.sc-ion-textarea-ios{display:grid;min-width:inherit;max-width:inherit;grid-auto-rows:100%}.native-wrapper.sc-ion-textarea-ios::after{white-space:pre-wrap;content:attr(data-replicated-value) \" \";visibility:hidden}.native-wrapper.sc-ion-textarea-ios::after{padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;grid-area:1/1/2/2;word-break:break-word}.textarea-wrapper-inner.sc-ion-textarea-ios{display:-ms-flexbox;display:flex;width:100%;min-height:inherit}.ion-touched.ion-invalid.sc-ion-textarea-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-textarea-ios-h{--highlight-color:var(--highlight-color-valid)}.textarea-bottom.sc-ion-textarea-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color)}.has-focus.ion-valid.sc-ion-textarea-ios-h,.ion-touched.ion-invalid.sc-ion-textarea-ios-h{--border-color:var(--highlight-color)}.textarea-bottom.sc-ion-textarea-ios .error-text.sc-ion-textarea-ios{display:none;color:var(--highlight-color-invalid)}.textarea-bottom.sc-ion-textarea-ios .helper-text.sc-ion-textarea-ios{display:block;color:var(--ion-color-step-550, var(--ion-text-color-step-450, #737373))}.ion-touched.ion-invalid.sc-ion-textarea-ios-h .textarea-bottom.sc-ion-textarea-ios .error-text.sc-ion-textarea-ios{display:block}.ion-touched.ion-invalid.sc-ion-textarea-ios-h .textarea-bottom.sc-ion-textarea-ios .helper-text.sc-ion-textarea-ios{display:none}.textarea-bottom.sc-ion-textarea-ios .counter.sc-ion-textarea-ios{-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.label-text-wrapper.sc-ion-textarea-ios{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.label-text.sc-ion-textarea-ios,.sc-ion-textarea-ios-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-textarea-ios,.textarea-outline-notch-hidden.sc-ion-textarea-ios{display:none}.textarea-wrapper.sc-ion-textarea-ios textarea.sc-ion-textarea-ios{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.textarea-label-placement-start.sc-ion-textarea-ios-h .textarea-wrapper.sc-ion-textarea-ios{-ms-flex-direction:row;flex-direction:row}.textarea-label-placement-end.sc-ion-textarea-ios-h .textarea-wrapper.sc-ion-textarea-ios{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.textarea-label-placement-fixed.sc-ion-textarea-ios-h .label-text.sc-ion-textarea-ios{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.textarea-label-placement-stacked.sc-ion-textarea-ios-h .textarea-wrapper.sc-ion-textarea-ios,.textarea-label-placement-floating.sc-ion-textarea-ios-h .textarea-wrapper.sc-ion-textarea-ios{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.textarea-label-placement-stacked.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,.textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-transform-origin:left top;transform-origin:left top;-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:0px;padding-bottom:0px;max-width:100%;z-index:2}[dir=rtl].sc-ion-textarea-ios-h -no-combinator.textarea-label-placement-stacked.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl] .sc-ion-textarea-ios-h -no-combinator.textarea-label-placement-stacked.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl].textarea-label-placement-stacked.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl] .textarea-label-placement-stacked.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl].sc-ion-textarea-ios-h -no-combinator.textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl] .sc-ion-textarea-ios-h -no-combinator.textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl].textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios,[dir=rtl] .textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.textarea-label-placement-stacked.sc-ion-textarea-ios-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-ios,.textarea-label-placement-floating.sc-ion-textarea-ios-h:dir(rtl) .label-text-wrapper.sc-ion-textarea-ios{-webkit-transform-origin:right top;transform-origin:right top}}.textarea-label-placement-stacked.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios,.textarea-label-placement-floating.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios,.textarea-label-placement-stacked[auto-grow].sc-ion-textarea-ios-h .native-wrapper.sc-ion-textarea-ios::after,.textarea-label-placement-floating[auto-grow].sc-ion-textarea-ios-h .native-wrapper.sc-ion-textarea-ios::after{-webkit-margin-start:0px;margin-inline-start:0px;-webkit-margin-end:0px;margin-inline-end:0px;margin-top:8px;margin-bottom:0px}.textarea-label-placement-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.textarea-label-placement-floating.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios{opacity:0}.has-focus.textarea-label-placement-floating.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios,.has-value.textarea-label-placement-floating.sc-ion-textarea-ios-h textarea.sc-ion-textarea-ios{opacity:1}.label-floating.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.start-slot-wrapper.sc-ion-textarea-ios,.end-slot-wrapper.sc-ion-textarea-ios{display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:start;align-self:start}.sc-ion-textarea-ios-h{min-height:44px;font-family:var(--ion-font-family, inherit);z-index:2}.textarea-label-placement-floating.sc-ion-textarea-ios-h,.textarea-label-placement-stacked.sc-ion-textarea-ios-h{--padding-top:0px;min-height:56px}.native-wrapper.sc-ion-textarea-ios{min-height:inherit;max-height:inherit}.native-wrapper.sc-ion-textarea-ios textarea.sc-ion-textarea-ios{-webkit-padding-start:0px;padding-inline-start:0px;-webkit-padding-end:0px;padding-inline-end:0px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}.textarea-bottom.sc-ion-textarea-ios{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:5px;padding-bottom:0;font-size:0.75rem}.textarea-bottom.sc-ion-textarea-ios .counter.sc-ion-textarea-ios{color:var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));-webkit-padding-start:16px;padding-inline-start:16px}.textarea-label-placement-start.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.textarea-label-placement-end.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}.textarea-label-placement-fixed.sc-ion-textarea-ios-h .label-text-wrapper.sc-ion-textarea-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.start-slot-wrapper.sc-ion-textarea-ios,.end-slot-wrapper.sc-ion-textarea-ios{padding-left:0;padding-right:0;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}.sc-ion-textarea-ios-h.textarea-label-placement-stacked.sc-ion-textarea-ios-s>[slot=start],.sc-ion-textarea-ios-h.textarea-label-placement-stacked .sc-ion-textarea-ios-s>[slot=start],.sc-ion-textarea-ios-h.textarea-label-placement-stacked.sc-ion-textarea-ios-s>[slot=end],.sc-ion-textarea-ios-h.textarea-label-placement-stacked .sc-ion-textarea-ios-s>[slot=end],.sc-ion-textarea-ios-h.textarea-label-placement-floating.sc-ion-textarea-ios-s>[slot=start],.sc-ion-textarea-ios-h.textarea-label-placement-floating .sc-ion-textarea-ios-s>[slot=start],.sc-ion-textarea-ios-h.textarea-label-placement-floating.sc-ion-textarea-ios-s>[slot=end],.sc-ion-textarea-ios-h.textarea-label-placement-floating .sc-ion-textarea-ios-s>[slot=end]{margin-top:8px}.sc-ion-textarea-ios-s>[slot=start],.sc-ion-textarea-ios-s>[slot=end]{margin-top:0}.sc-ion-textarea-ios-s>[slot=start]:last-of-type{-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}.sc-ion-textarea-ios-s>[slot=end]:first-of-type{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}.sc-ion-textarea-ios-h{--border-width:0.55px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--padding-top:10px;--padding-end:0px;--padding-bottom:8px;--padding-start:0px;--highlight-height:0px;font-size:inherit}.textarea-disabled.sc-ion-textarea-ios-h{opacity:0.3}.sc-ion-textarea-ios-s>ion-button[slot=start].button-has-icon-only,.sc-ion-textarea-ios-s>ion-button[slot=end].button-has-icon-only{--border-radius:50%;--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;aspect-ratio:1}";
@@ -286,6 +286,15 @@ const Textarea = class {
286
286
  get hasLabel() {
287
287
  return this.label !== undefined || this.labelSlot !== null;
288
288
  }
289
+ getShape() {
290
+ const theme = ionicGlobal.getIonTheme(this);
291
+ const { shape } = this;
292
+ // TODO(ROU-11050): Update theme check when shapes are defined for all themes.
293
+ if (theme === 'ionic' && shape === undefined) {
294
+ return 'round';
295
+ }
296
+ return shape;
297
+ }
289
298
  /**
290
299
  * Renders the border container when fill="outline".
291
300
  */
@@ -347,8 +356,9 @@ const Textarea = class {
347
356
  return (index.h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
348
357
  }
349
358
  render() {
350
- const { inputId, disabled, fill, shape, size, labelPlacement, el, hasFocus } = this;
359
+ const { inputId, disabled, fill, size, labelPlacement, el, hasFocus } = this;
351
360
  const theme$1 = ionicGlobal.getIonTheme(this);
361
+ const shape = this.getShape();
352
362
  const value = this.getValue();
353
363
  const inItem = theme.hostContext('ion-item', this.el);
354
364
  const shouldRenderHighlight = theme$1 === 'md' && fill !== 'outline' && !inItem;
@@ -372,7 +382,7 @@ const Textarea = class {
372
382
  * TODO(FW-5592): Remove hasStartEndSlots condition
373
383
  */
374
384
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
375
- return (index.h(index.Host, { key: '0f80c3af71da1262718eabb385478447a4d04bce', class: theme.createColorClasses(this.color, {
385
+ return (index.h(index.Host, { key: '25f8192436c242c227cdcec236dc376a6ad4331d', class: theme.createColorClasses(this.color, {
376
386
  [theme$1]: true,
377
387
  'has-value': hasValue,
378
388
  'has-focus': hasFocus,
@@ -382,7 +392,7 @@ const Textarea = class {
382
392
  [`textarea-size-${size}`]: true,
383
393
  [`textarea-label-placement-${labelPlacement}`]: true,
384
394
  'textarea-disabled': disabled,
385
- }) }, index.h("label", { key: 'd20e202c8dbbf26e4a734b856294256bdf18ef94', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), index.h("div", { key: 'c54e1d41af4a4c9e5c954a829061fb9ecd2eab15', class: "textarea-wrapper-inner" },
395
+ }) }, index.h("label", { key: 'cd1a80101c9cc5c1123005e9e3bfe1ff06e9a5d8', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), index.h("div", { key: '68dffe868cdf170f0eab38e912a97c2374c82aaa', class: "textarea-wrapper-inner" },
386
396
  /**
387
397
  * For the ionic theme, we render the outline container here
388
398
  * instead of higher up, so it can be positioned relative to
@@ -392,7 +402,7 @@ const Textarea = class {
392
402
  * <label> element, ensuring that clicking the label text
393
403
  * focuses the textarea.
394
404
  */
395
- theme$1 === 'ionic' && fill === 'outline' && index.h("div", { key: '148f16138dcbfd8a724d248b4e1f73220b017fd4', class: "textarea-outline" }), index.h("div", { key: 'b5550e1ad2af3af871b6e9d05c040a5ee009f1da', class: "start-slot-wrapper" }, index.h("slot", { key: 'ce6d54e769b9de5afb43f432c1194a1a80d8124d', name: "start" })), index.h("div", { key: '80de31c0139de21273ecc381c9d99bbfebed188a', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, index.h("textarea", Object.assign({ key: '4a3174126f2979ce3fa873c42c313ff83a5f71de', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), index.h("div", { key: '5d6e196c46f9af1360b89a3d355ecf434df47657', class: "end-slot-wrapper" }, index.h("slot", { key: '4109293cca9ccca19a81428ea5149107ebb00359', name: "end" }))), shouldRenderHighlight && index.h("div", { key: '18063161e67aa882dc2262626fd435352192d6c3', class: "textarea-highlight" })), this.renderBottomContent()));
405
+ theme$1 === 'ionic' && fill === 'outline' && index.h("div", { key: 'eafeed172c5deafd3e28e8dbc8339b9ab3d06298', class: "textarea-outline" }), index.h("div", { key: 'dae967e2619efd99e40db41dfde375d162a772a4', class: "start-slot-wrapper" }, index.h("slot", { key: '4d5d48dcd842bec3effbab43fdcbbca137f01237', name: "start" })), index.h("div", { key: 'd3b11f95a4b76dd13363ed67279bd09be8776b71', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, index.h("textarea", Object.assign({ key: 'e86bd3b607b29b67ebcdbfa0b2e73417df786e1d', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), index.h("div", { key: 'ac0788d419f7b74d6a4f35cbd8e7ae78412380a6', class: "end-slot-wrapper" }, index.h("slot", { key: 'b409e7f30418b2e70f4dcb43f184be9032591089', name: "end" }))), shouldRenderHighlight && index.h("div", { key: '35f5928604c3a35962d08e99d4eeeedebb53a470', class: "textarea-highlight" })), this.renderBottomContent()));
396
406
  }
397
407
  get el() { return index.getElement(this); }
398
408
  static get watchers() { return {