voyager-ionic-core 8.0.0-beta.1 → 8.0.0-beta.3

package/css/palettes/high-contrast-dark.system.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast-dark.system.scss","../../src/css/palettes/high-contrast-dark.scss"],"names":[],"mappings":"AAEA;EC8FE;IACE;IAGE;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;;;EASJ;IACE;IACA;IACA;IACA;IACA;IACA;IAIA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAMF;IACE;IACA;IACA;;;EDhKF;ACyOA;;EAlEA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAIA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAMF;IACE;;EAGF;IAEE;;EAIF;IACE;MACE;;;EAIJ;IACE","file":"high-contrast-dark.system.css","sourcesContent":["@import \"./high-contrast-dark\";\n\n@media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n  :root {\n    @include high-contrast-dark-base-palette();\n  }\n\n  :root.ios {\n    @include high-contrast-dark-ios-palette();\n  }\n\n  :root.md {\n    @include high-contrast-dark-md-palette();\n  }\n}\n","@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary:         #7cabff !default;\n$secondary:       #62bdff !default;\n$tertiary:        #b6b9f9 !default;\n$success:         #4ada71 !default;\n$warning:         #ffce31 !default;\n$danger:          #fc9aa2 !default;\n$light:           #222428 !default;\n$medium:          #a8aab3 !default;\n$dark:            #f4f5f8 !default;\n\n$colors:  (\n  primary: (\n    base:             $primary,\n    contrast:         #000,\n    shade:            get-color-shade($primary),\n    tint:             get-color-tint($primary)\n  ),\n  secondary: (\n    base:             $secondary,\n    contrast:         #000,\n    shade:            get-color-shade($secondary),\n    tint:             get-color-tint($secondary)\n  ),\n  tertiary: (\n    base:             $tertiary,\n    contrast:         #000,\n    shade:            get-color-shade($tertiary),\n    tint:             get-color-tint($tertiary)\n  ),\n  success: (\n    base:             $success,\n    contrast:         #000,\n    shade:            get-color-shade($success),\n    tint:             get-color-tint($success)\n  ),\n  warning: (\n    base:             $warning,\n    contrast:         #000,\n    shade:            get-color-shade($warning),\n    tint:             get-color-tint($warning)\n  ),\n  danger: (\n    base:             $danger,\n    contrast:         #000,\n    shade:            get-color-shade($danger),\n    tint:             get-color-tint($danger)\n  ),\n  light: (\n    base:             $light,\n    contrast:         #fff,\n    shade:            get-color-shade($light),\n    tint:             get-color-tint($light)\n  ),\n  medium: (\n    base:             $medium,\n    contrast:         #000,\n    shade:            get-color-shade($medium),\n    tint:             get-color-tint($medium)\n  ),\n  dark: (\n    base:             $dark,\n    contrast:         #000,\n    shade:            get-color-shade($dark),\n    tint:             get-color-tint($dark)\n  )\n) !default;\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$text-color: #ffffff;\n\n$darkest-text-color: #888888;\n$lightest-text-color: $text-color;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n\n/// We apply certain styles to the per-mode classes (ios and md)\n/// as opposed to setting everything in :root\n// so any high contrast dark styles override the standard\n/// contrast dark styles.\n@mixin high-contrast-dark-base-palette() {\n  & {\n    --ion-placeholder-opacity: 0.8;\n\n    @each $color-name, $value in $colors {\n      --ion-color-#{$color-name}: #{map.get($value, base)};\n      --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n      --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n      --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n      --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n      --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n    }\n\n  }\n}\n\n@mixin high-contrast-dark-ios-palette() {\n  $background-color: #000000;\n  \n  & {\n    --ion-background-color: #{$background-color};\n    --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n    --ion-text-color: #{$text-color};\n    --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n    --ion-item-background: #000000;\n    --ion-card-background: #1c1c1d;\n\n    /// Only the item borders should increase in contrast\n    /// Borders for elements like toolbars should remain the same\n    --ion-item-border-color: var(--ion-background-color-step-400);\n    --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n    --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n    --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n    --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n    --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n    --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n    --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n    --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n    --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n    --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n    --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n    --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n    --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n    --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n    --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n    --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n    --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n    --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n    --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n    --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n    --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n    --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n    --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n    --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n    --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n    --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n    --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n    --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n    --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n    --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n    --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n    --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n    --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n    --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n    --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n    --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n    --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n    --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n  }\n\n  // Modal\n  // --------------------------------------------------\n\n  & ion-modal {\n    --ion-background-color: var(--ion-background-color-step-100);\n    --ion-toolbar-background: var(--ion-background-color-step-150);\n    --ion-toolbar-border-color: var(--ion-background-color-step-250);\n  }\n}\n\n@mixin high-contrast-dark-md-palette() {\n  $background-color: #121212;\n  \n  & {\n    --ion-background-color: #{$background-color};\n    --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n    --ion-text-color: #{$text-color};\n    --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n    --ion-border-color: #222222;\n    --ion-item-background: #1e1e1e;\n    --ion-toolbar-background: #1f1f1f;\n    --ion-tab-bar-background: #1f1f1f;\n    --ion-card-background: #1e1e1e;\n\n    /// Only the item borders should increase in contrast\n    /// Borders for elements like toolbars should remain the same\n    --ion-item-border-color: var(--ion-background-color-step-400);\n    --ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};\n    --ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};\n    --ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};\n    --ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};\n    --ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};\n    --ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};\n    --ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};\n    --ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};\n    --ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};\n    --ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};\n    --ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};\n    --ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};\n    --ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};\n    --ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};\n    --ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};\n    --ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};\n    --ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};\n    --ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};\n    --ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};\n    --ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};\n    --ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};\n    --ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};\n    --ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};\n    --ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};\n    --ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};\n    --ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};\n    --ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};\n    --ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};\n    --ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};\n    --ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};\n    --ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};\n    --ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};\n    --ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};\n    --ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};\n    --ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};\n    --ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};\n    --ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};\n    --ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};\n  }\n\n  // Toast\n  // --------------------------------------------------\n\n  & ion-toast {\n    --color: var(--ion-background-color);\n  }\n\n  & ion-toast::part(button) {\n    // Fallback for browsers that don't support color-mix\n    color: var(--color);\n  }\n\n  /* stylelint-disable-next-line order/order */\n  @supports (color: color-mix(in lch, plum, pink)) {\n    & ion-toast::part(button) {\n      color: color-mix(in srgb, var(--color) 73%, var(--button-color));\n    }\n  }\n\n  & ion-toast::part(button cancel) {\n    color: var(--color);\n  }\n}\n"]}

package/css/palettes/high-contrast.always.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast.scss","../../src/css/palettes/high-contrast.always.scss"],"names":[],"mappings":"AA4FE;EACE;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGE;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;;;AC1HN;AD4IE;;AATA;EACE;;AAGF;EAEE;;AAIF;EACE;IACE;;;AAIJ;EACE","file":"high-contrast.always.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary:         #003fae !default;\n$secondary:       #01487b !default;\n$tertiary:        #3400e6 !default;\n$success:         #004314 !default;\n$warning:         #5f4100 !default;\n$danger:          #9c000c !default;\n$light:           #f4f5f8 !default;\n$medium:          #444446 !default;\n$dark:            #222428 !default;\n\n$colors:  (\n  primary: (\n    base:             $primary,\n    contrast:         #fff,\n    shade:            get-color-shade($primary),\n    tint:             get-color-tint($primary)\n  ),\n  secondary: (\n    base:             $secondary,\n    contrast:         #fff,\n    shade:            get-color-shade($secondary),\n    tint:             get-color-tint($secondary)\n  ),\n  tertiary: (\n    base:             $tertiary,\n    contrast:         #fff,\n    shade:            get-color-shade($tertiary),\n    tint:             get-color-tint($tertiary)\n  ),\n  success: (\n    base:             $success,\n    contrast:         #fff,\n    shade:            get-color-shade($success),\n    tint:             get-color-tint($success)\n  ),\n  warning: (\n    base:             $warning,\n    contrast:         #fff,\n    shade:            get-color-shade($warning),\n    tint:             get-color-tint($warning)\n  ),\n  danger: (\n    base:             $danger,\n    contrast:         #fff,\n    shade:            get-color-shade($danger),\n    tint:             get-color-tint($danger)\n  ),\n  light: (\n    base:             $light,\n    contrast:         #000,\n    shade:            get-color-shade($light),\n    tint:             get-color-tint($light)\n  ),\n  medium: (\n    base:             $medium,\n    contrast:         #fff,\n    shade:            get-color-shade($medium),\n    tint:             get-color-tint($medium)\n  ),\n  dark: (\n    base:             $dark,\n    contrast:         #fff,\n    shade:            get-color-shade($dark),\n    tint:             get-color-tint($dark)\n  )\n) !default;\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$background-color: #ffffff;\n$text-color: #000000;\n\n$darkest-text-color: $text-color;\n$lightest-text-color: #888888;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n@mixin high-contrast-light-base-palette() {\n  & {\n    --ion-background-color: #{$background-color};\n    --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n    --ion-text-color: #{$text-color};\n    --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n    --ion-placeholder-opacity: 0.8;\n\n    /// Only the item borders should increase in contrast\n    /// Borders for elements like toolbars should remain the same\n    --ion-item-border-color: #7a7a7a;\n    --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};\n    --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};\n    --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};\n    --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};\n    --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};\n    --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};\n    --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};\n    --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};\n    --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};\n    --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};\n    --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};\n    --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};\n    --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};\n    --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};\n    --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};\n    --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};\n    --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};\n    --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};\n    --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};\n\n    @each $color-name, $value in $colors {\n      --ion-color-#{$color-name}: #{map.get($value, base)};\n      --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n      --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n      --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n      --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n      --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n    }\n  }\n}\n\n@mixin high-contrast-light-md-palette() {\n  // Toast\n  // --------------------------------------------------\n\n  & ion-toast {\n    --color: var(--ion-background-color);\n  }\n\n  & ion-toast::part(button) {\n    // Fallback for browsers that don't support color-mix\n    color: var(--color);\n  }\n\n  /* stylelint-disable-next-line order/order */\n  @supports (color: color-mix(in lch, plum, pink)) {\n    & ion-toast::part(button) {\n      color: color-mix(in srgb, var(--color) 70%, var(--button-color));\n    }\n  }\n\n  & ion-toast::part(button cancel) {\n    color: var(--color);\n  }\n}\n","@import \"./high-contrast\";\n\n:root {\n  @include high-contrast-light-base-palette();\n}\n\n:root.md {\n  @include high-contrast-light-md-palette();\n}\n"]}

package/css/{themes → palettes}/high-contrast.class.css

@@ -1,4 +1,29 @@
-.ion-theme-high-contrast {
+.ion-palette-high-contrast {
+  --ion-background-color: #ffffff;
+  --ion-background-color-rgb: 255, 255, 255;
+  --ion-text-color: #000000;
+  --ion-text-color-rgb: 0, 0, 0;
+  --ion-placeholder-opacity: 0.8;
+  --ion-item-border-color: #7a7a7a;
+  --ion-text-color-step-50: #070707;
+  --ion-text-color-step-100: #0e0e0e;
+  --ion-text-color-step-150: #141414;
+  --ion-text-color-step-200: #1b1b1b;
+  --ion-text-color-step-250: #222222;
+  --ion-text-color-step-300: #292929;
+  --ion-text-color-step-350: #303030;
+  --ion-text-color-step-400: #363636;
+  --ion-text-color-step-450: #3d3d3d;
+  --ion-text-color-step-500: #444444;
+  --ion-text-color-step-550: #4b4b4b;
+  --ion-text-color-step-600: #525252;
+  --ion-text-color-step-650: #585858;
+  --ion-text-color-step-700: #5f5f5f;
+  --ion-text-color-step-750: #666666;
+  --ion-text-color-step-800: #6d6d6d;
+  --ion-text-color-step-850: #747474;
+  --ion-text-color-step-900: #7a7a7a;
+  --ion-text-color-step-950: #818181;
   --ion-color-primary: #003fae;
   --ion-color-primary-rgb: 0, 63, 174;
   --ion-color-primary-contrast: #fff;
@@ -53,48 +78,23 @@
   --ion-color-dark-contrast-rgb: 255, 255, 255;
   --ion-color-dark-shade: #1e2023;
   --ion-color-dark-tint: #383a3e;
-  --ion-background-color: #ffffff;
-  --ion-background-color-rgb: 255, 255, 255;
-  --ion-text-color: #000000;
-  --ion-text-color-rgb: 0, 0, 0;
-  --ion-placeholder-opacity: 0.8;
-  --ion-item-border-color: #7a7a7a;
-  --ion-text-color-step-50: #070707;
-  --ion-text-color-step-100: #0e0e0e;
-  --ion-text-color-step-150: #141414;
-  --ion-text-color-step-200: #1b1b1b;
-  --ion-text-color-step-250: #222222;
-  --ion-text-color-step-300: #292929;
-  --ion-text-color-step-350: #303030;
-  --ion-text-color-step-400: #363636;
-  --ion-text-color-step-450: #3d3d3d;
-  --ion-text-color-step-500: #444444;
-  --ion-text-color-step-550: #4b4b4b;
-  --ion-text-color-step-600: #525252;
-  --ion-text-color-step-650: #585858;
-  --ion-text-color-step-700: #5f5f5f;
-  --ion-text-color-step-750: #666666;
-  --ion-text-color-step-800: #6d6d6d;
-  --ion-text-color-step-850: #747474;
-  --ion-text-color-step-900: #7a7a7a;
-  --ion-text-color-step-950: #818181;
 }
 
-.ion-theme-high-contrast.md {
+.ion-palette-high-contrast.md {
   /* stylelint-disable-next-line order/order */
 }
-.ion-theme-high-contrast.md ion-toast {
+.ion-palette-high-contrast.md ion-toast {
   --color: var(--ion-background-color);
 }
-.ion-theme-high-contrast.md ion-toast::part(button) {
+.ion-palette-high-contrast.md ion-toast::part(button) {
   color: var(--color);
 }
 @supports (color: color-mix(in lch, plum, pink)) {
-  .ion-theme-high-contrast.md ion-toast::part(button) {
+  .ion-palette-high-contrast.md ion-toast::part(button) {
     color: color-mix(in srgb, var(--color) 70%, var(--button-color));
   }
 }
-.ion-theme-high-contrast.md ion-toast::part(button cancel) {
+.ion-palette-high-contrast.md ion-toast::part(button cancel) {
   color: var(--color);
 }
 

package/css/palettes/high-contrast.class.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast.scss","../../src/css/palettes/high-contrast.class.scss"],"names":[],"mappings":"AA4FE;EACE;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGE;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;EALA;EACA;EACA;EACA;EACA;EACA;;;AC1HN;AD4IE;;AATA;EACE;;AAGF;EAEE;;AAIF;EACE;IACE;;;AAIJ;EACE","file":"high-contrast.class.css","sourcesContent":["@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary:         #003fae !default;\n$secondary:       #01487b !default;\n$tertiary:        #3400e6 !default;\n$success:         #004314 !default;\n$warning:         #5f4100 !default;\n$danger:          #9c000c !default;\n$light:           #f4f5f8 !default;\n$medium:          #444446 !default;\n$dark:            #222428 !default;\n\n$colors:  (\n  primary: (\n    base:             $primary,\n    contrast:         #fff,\n    shade:            get-color-shade($primary),\n    tint:             get-color-tint($primary)\n  ),\n  secondary: (\n    base:             $secondary,\n    contrast:         #fff,\n    shade:            get-color-shade($secondary),\n    tint:             get-color-tint($secondary)\n  ),\n  tertiary: (\n    base:             $tertiary,\n    contrast:         #fff,\n    shade:            get-color-shade($tertiary),\n    tint:             get-color-tint($tertiary)\n  ),\n  success: (\n    base:             $success,\n    contrast:         #fff,\n    shade:            get-color-shade($success),\n    tint:             get-color-tint($success)\n  ),\n  warning: (\n    base:             $warning,\n    contrast:         #fff,\n    shade:            get-color-shade($warning),\n    tint:             get-color-tint($warning)\n  ),\n  danger: (\n    base:             $danger,\n    contrast:         #fff,\n    shade:            get-color-shade($danger),\n    tint:             get-color-tint($danger)\n  ),\n  light: (\n    base:             $light,\n    contrast:         #000,\n    shade:            get-color-shade($light),\n    tint:             get-color-tint($light)\n  ),\n  medium: (\n    base:             $medium,\n    contrast:         #fff,\n    shade:            get-color-shade($medium),\n    tint:             get-color-tint($medium)\n  ),\n  dark: (\n    base:             $dark,\n    contrast:         #fff,\n    shade:            get-color-shade($dark),\n    tint:             get-color-tint($dark)\n  )\n) !default;\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$background-color: #ffffff;\n$text-color: #000000;\n\n$darkest-text-color: $text-color;\n$lightest-text-color: #888888;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n@mixin high-contrast-light-base-palette() {\n  & {\n    --ion-background-color: #{$background-color};\n    --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n    --ion-text-color: #{$text-color};\n    --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n    --ion-placeholder-opacity: 0.8;\n\n    /// Only the item borders should increase in contrast\n    /// Borders for elements like toolbars should remain the same\n    --ion-item-border-color: #7a7a7a;\n    --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};\n    --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};\n    --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};\n    --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};\n    --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};\n    --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};\n    --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};\n    --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};\n    --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};\n    --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};\n    --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};\n    --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};\n    --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};\n    --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};\n    --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};\n    --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};\n    --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};\n    --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};\n    --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};\n\n    @each $color-name, $value in $colors {\n      --ion-color-#{$color-name}: #{map.get($value, base)};\n      --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n      --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n      --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n      --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n      --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n    }\n  }\n}\n\n@mixin high-contrast-light-md-palette() {\n  // Toast\n  // --------------------------------------------------\n\n  & ion-toast {\n    --color: var(--ion-background-color);\n  }\n\n  & ion-toast::part(button) {\n    // Fallback for browsers that don't support color-mix\n    color: var(--color);\n  }\n\n  /* stylelint-disable-next-line order/order */\n  @supports (color: color-mix(in lch, plum, pink)) {\n    & ion-toast::part(button) {\n      color: color-mix(in srgb, var(--color) 70%, var(--button-color));\n    }\n  }\n\n  & ion-toast::part(button cancel) {\n    color: var(--color);\n  }\n}\n","@import \"./high-contrast\";\n\n.ion-palette-high-contrast {\n  @include high-contrast-light-base-palette();\n}\n\n.ion-palette-high-contrast.md {\n  @include high-contrast-light-md-palette();\n}\n"]}

package/css/palettes/high-contrast.system.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/css/palettes/high-contrast.system.scss","../../src/css/palettes/high-contrast.scss"],"names":[],"mappings":"AAEA;EC0FE;IACE;IACA;IACA;IACA;IACA;IAIA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGE;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;IALA;IACA;IACA;IACA;IACA;IACA;;;EDzHJ;AC2IA;;EATA;IACE;;EAGF;IAEE;;EAIF;IACE;MACE;;;EAIJ;IACE","file":"high-contrast.system.css","sourcesContent":["@import \"./high-contrast\";\n\n@media (prefers-contrast: more) {\n  :root {\n    @include high-contrast-light-base-palette();\n  }\n\n  :root.md {\n    @include high-contrast-light-md-palette();\n  }\n}\n","@use \"sass:map\";\n@import \"../../themes/ionic.functions.color\";\n\n$primary:         #003fae !default;\n$secondary:       #01487b !default;\n$tertiary:        #3400e6 !default;\n$success:         #004314 !default;\n$warning:         #5f4100 !default;\n$danger:          #9c000c !default;\n$light:           #f4f5f8 !default;\n$medium:          #444446 !default;\n$dark:            #222428 !default;\n\n$colors:  (\n  primary: (\n    base:             $primary,\n    contrast:         #fff,\n    shade:            get-color-shade($primary),\n    tint:             get-color-tint($primary)\n  ),\n  secondary: (\n    base:             $secondary,\n    contrast:         #fff,\n    shade:            get-color-shade($secondary),\n    tint:             get-color-tint($secondary)\n  ),\n  tertiary: (\n    base:             $tertiary,\n    contrast:         #fff,\n    shade:            get-color-shade($tertiary),\n    tint:             get-color-tint($tertiary)\n  ),\n  success: (\n    base:             $success,\n    contrast:         #fff,\n    shade:            get-color-shade($success),\n    tint:             get-color-tint($success)\n  ),\n  warning: (\n    base:             $warning,\n    contrast:         #fff,\n    shade:            get-color-shade($warning),\n    tint:             get-color-tint($warning)\n  ),\n  danger: (\n    base:             $danger,\n    contrast:         #fff,\n    shade:            get-color-shade($danger),\n    tint:             get-color-tint($danger)\n  ),\n  light: (\n    base:             $light,\n    contrast:         #000,\n    shade:            get-color-shade($light),\n    tint:             get-color-tint($light)\n  ),\n  medium: (\n    base:             $medium,\n    contrast:         #fff,\n    shade:            get-color-shade($medium),\n    tint:             get-color-tint($medium)\n  ),\n  dark: (\n    base:             $dark,\n    contrast:         #fff,\n    shade:            get-color-shade($dark),\n    tint:             get-color-tint($dark)\n  )\n) !default;\n\n/// Text step colors are generated based on\n/// how dark or light text can be. The darkest\n/// text color is usually the default text color (white or black).\n/// The darker the $lightest-text-color is, the darker each\n/// stepped color is. If you want to increase text contrast,\n/// make $lightest-text-color darker.\n$background-color: #ffffff;\n$text-color: #000000;\n\n$darkest-text-color: $text-color;\n$lightest-text-color: #888888;\n\n/// Loop through each color object above\n/// and generate CSS Variables for each\n/// color. Do not use the ion-color function\n/// here because that will set the variable\n/// to evaluate to itself with a fallback.\n/// For example:\n/// --ion-color-primary: #{ion-color(primary, base)};\n/// Maps to:\n/// --ion-color-primary: var(--ion-color-primary, #...);\n@mixin high-contrast-light-base-palette() {\n  & {\n    --ion-background-color: #{$background-color};\n    --ion-background-color-rgb: #{color-to-rgb-list($background-color)};\n    --ion-text-color: #{$text-color};\n    --ion-text-color-rgb: #{color-to-rgb-list($text-color)};\n    --ion-placeholder-opacity: 0.8;\n\n    /// Only the item borders should increase in contrast\n    /// Borders for elements like toolbars should remain the same\n    --ion-item-border-color: #7a7a7a;\n    --ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};\n    --ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};\n    --ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};\n    --ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};\n    --ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};\n    --ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};\n    --ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};\n    --ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};\n    --ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};\n    --ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};\n    --ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};\n    --ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};\n    --ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};\n    --ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};\n    --ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};\n    --ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};\n    --ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};\n    --ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};\n    --ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};\n\n    @each $color-name, $value in $colors {\n      --ion-color-#{$color-name}: #{map.get($value, base)};\n      --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};\n      --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};\n      --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};\n      --ion-color-#{$color-name}-shade: #{map.get($value, shade)};\n      --ion-color-#{$color-name}-tint: #{map.get($value, tint)};\n    }\n  }\n}\n\n@mixin high-contrast-light-md-palette() {\n  // Toast\n  // --------------------------------------------------\n\n  & ion-toast {\n    --color: var(--ion-background-color);\n  }\n\n  & ion-toast::part(button) {\n    // Fallback for browsers that don't support color-mix\n    color: var(--color);\n  }\n\n  /* stylelint-disable-next-line order/order */\n  @supports (color: color-mix(in lch, plum, pink)) {\n    & ion-toast::part(button) {\n      color: color-mix(in srgb, var(--color) 70%, var(--button-color));\n    }\n  }\n\n  & ion-toast::part(button cancel) {\n    color: var(--color);\n  }\n}\n"]}

package/dist/cjs/{animation-4ad55058.js → animation-58ecfe20.js}

@@ -4,7 +4,7 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const helpers = require('./helpers-b71ca811.js');
+const helpers = require('./helpers-71097d9c.js');
 
 let animationPrefix;
 /**

package/dist/cjs/{app-globals-4d26cb5a.js → app-globals-e132c781.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const ionicGlobal = require('./ionic-global-59aa7eb7.js');
+const ionicGlobal = require('./ionic-global-5762eca9.js');
 
 const globalScripts = ionicGlobal.initialize;
 

package/dist/cjs/{button-active-e447f58b.js → button-active-60ecf64d.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index$1 = require('./index-ea266398.js');
+const index$1 = require('./index-2d21d526.js');
 const haptic = require('./haptic-b882e0bb.js');
 const index = require('./index-ee07ed59.js');
 

package/dist/cjs/{data-e2bf21de.js → data-21dc0f81.js}

@@ -834,7 +834,25 @@ const getFormattedDayPeriod = (dayPeriod) => {
     }
     return dayPeriod.toUpperCase();
 };
-const getLocalizedTime = (locale, refParts, hourCycle) => {
+/**
+ * Including time zone options may lead to the rendered text showing a
+ * different time from what was selected in the Datetime, which could cause
+ * confusion.
+ */
+const stripTimeZone = (formatOptions) => {
+    return Object.assign(Object.assign({}, formatOptions), { 
+        /**
+         * Setting the time zone to UTC ensures that the value shown is always the
+         * same as what was selected and safeguards against older Safari bugs with
+         * Intl.DateTimeFormat.
+         */
+        timeZone: 'UTC', 
+        /**
+         * We do not want to display the time zone name
+         */
+        timeZoneName: undefined });
+};
+const getLocalizedTime = (locale, refParts, hourCycle, formatOptions = { hour: 'numeric', minute: 'numeric' }) => {
     const timeParts = {
         hour: refParts.hour,
         minute: refParts.minute,
@@ -842,28 +860,12 @@ const getLocalizedTime = (locale, refParts, hourCycle) => {
     if (timeParts.hour === undefined || timeParts.minute === undefined) {
         return 'Invalid Time';
     }
-    return new Intl.DateTimeFormat(locale, {
-        hour: 'numeric',
-        minute: 'numeric',
-        /**
-         * Setting the timeZone to UTC prevents
-         * new Intl.DatetimeFormat from subtracting
-         * the user's current timezone offset
-         * when formatting the time.
-         */
-        timeZone: 'UTC',
+    return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, stripTimeZone(formatOptions)), { 
         /**
          * We use hourCycle here instead of hour12 due to:
          * https://bugs.chromium.org/p/chromium/issues/detail?id=1347316&q=hour12&can=2
          */
-        hourCycle,
-        /**
-         * Setting Z at the end indicates that this
-         * date string is in the UTC time zone. This
-         * prevents new Date from adding the time zone
-         * offset when getting the ISO string.
-         */
-    }).format(new Date(convertDataToISO(Object.assign({ 
+        hourCycle })).format(new Date(convertDataToISO(Object.assign({ 
         /**
          * JS uses a simplified ISO 8601 format which allows for
          * date-only formats and date-time formats, but not
@@ -949,14 +951,6 @@ const generateDayAriaLabel = (locale, today, refParts) => {
      */
     return today ? `Today, ${labelString}` : labelString;
 };
-/**
- * Gets the day of the week, month, and day
- * Used for the header in MD mode.
- */
-const getMonthAndDay = (locale, refParts) => {
-    const date = getNormalizedDate(refParts);
-    return new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' }).format(date);
-};
 /**
  * Given a locale and a date object,
  * return a formatted string that includes
@@ -967,15 +961,6 @@ const getMonthAndYear = (locale, refParts) => {
     const date = getNormalizedDate(refParts);
     return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric', timeZone: 'UTC' }).format(date);
 };
-/**
- * Given a locale and a date object,
- * return a formatted string that includes
- * the short month, numeric day, and full year.
- * Example: Apr 22, 2021
- */
-const getMonthDayAndYear = (locale, refParts) => {
-    return getLocalizedDateTime(locale, refParts, { month: 'short', day: 'numeric', year: 'numeric' });
-};
 /**
  * Given a locale and a date object,
  * return a formatted string that includes
@@ -1025,7 +1010,7 @@ const getNormalizedDate = (refParts) => {
  */
 const getLocalizedDateTime = (locale, refParts, options) => {
     const date = getNormalizedDate(refParts);
-    return getDateTimeFormat(locale, options).format(date);
+    return getDateTimeFormat(locale, stripTimeZone(options)).format(date);
 };
 /**
  * Given a locale, DatetimeParts, and options
@@ -1641,10 +1626,8 @@ exports.getEndOfWeek = getEndOfWeek;
 exports.getHourCycle = getHourCycle;
 exports.getLocalizedDateTime = getLocalizedDateTime;
 exports.getLocalizedTime = getLocalizedTime;
-exports.getMonthAndDay = getMonthAndDay;
 exports.getMonthAndYear = getMonthAndYear;
 exports.getMonthColumnData = getMonthColumnData;
-exports.getMonthDayAndYear = getMonthDayAndYear;
 exports.getNextDay = getNextDay;
 exports.getNextMonth = getNextMonth;
 exports.getNextWeek = getNextWeek;

package/dist/cjs/{framework-delegate-53817ef1.js → framework-delegate-df3a2b04.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const helpers = require('./helpers-b71ca811.js');
+const helpers = require('./helpers-71097d9c.js');
 
 // TODO(FW-2832): types
 const attachComponent = async (delegate, container, component, cssClasses, componentProps, inline) => {

package/dist/cjs/{hardware-back-button-4cb049f1.js → hardware-back-button-1c67a5a2.js}

@@ -4,8 +4,8 @@
 'use strict';
 
 const index = require('./index-c8d52405.js');
-const ionicGlobal = require('./ionic-global-59aa7eb7.js');
-require('./index-ea266398.js');
+const ionicGlobal = require('./ionic-global-5762eca9.js');
+require('./index-2d21d526.js');
 
 /**
  * CloseWatcher is a newer API that lets
@@ -19,7 +19,7 @@ require('./index-ea266398.js');
  * moment this file is evaluated which could be
  * before the config is set.
  */
-const shoudUseCloseWatcher = () => ionicGlobal.config.get('experimentalCloseWatcher', false) && index.win !== undefined && 'CloseWatcher' in index.win;
+const shouldUseCloseWatcher = () => ionicGlobal.config.get('experimentalCloseWatcher', false) && index.win !== undefined && 'CloseWatcher' in index.win;
 /**
  * When hardwareBackButton: false in config,
  * we need to make sure we also block the default
@@ -89,7 +89,7 @@ const startHardwareBackButton = () => {
      * backbutton event otherwise we may get duplicate
      * events firing.
      */
-    if (shoudUseCloseWatcher()) {
+    if (shouldUseCloseWatcher()) {
         let watcher;
         const configureWatcher = () => {
             watcher === null || watcher === void 0 ? void 0 : watcher.destroy();
@@ -118,5 +118,5 @@ const MENU_BACK_BUTTON_PRIORITY = 99; // 1 less than overlay priority since menu
 exports.MENU_BACK_BUTTON_PRIORITY = MENU_BACK_BUTTON_PRIORITY;
 exports.OVERLAY_BACK_BUTTON_PRIORITY = OVERLAY_BACK_BUTTON_PRIORITY;
 exports.blockHardwareBackButton = blockHardwareBackButton;
-exports.shoudUseCloseWatcher = shoudUseCloseWatcher;
+exports.shouldUseCloseWatcher = shouldUseCloseWatcher;
 exports.startHardwareBackButton = startHardwareBackButton;

package/dist/cjs/{helpers-b71ca811.js → helpers-71097d9c.js}

@@ -232,13 +232,6 @@ const raf = (h) => {
 const hasShadowDom = (el) => {
     return !!el.shadowRoot && !!el.attachShadow;
 };
-const findItemLabel = (componentEl) => {
-    const itemEl = componentEl.closest('ion-item');
-    if (itemEl) {
-        return itemEl.querySelector('ion-label');
-    }
-    return null;
-};
 const focusVisibleElement = (el) => {
     el.focus();
     /**
@@ -256,52 +249,6 @@ const focusVisibleElement = (el) => {
         }
     }
 };
-/**
- * This method is used for Ionic's input components that use Shadow DOM. In
- * order to properly label the inputs to work with screen readers, we need
- * to get the text content of the label outside of the shadow root and pass
- * it to the input inside of the shadow root.
- *
- * Referencing label elements by id from outside of the component is
- * impossible due to the shadow boundary, read more here:
- * https://developer.salesforce.com/blogs/2020/01/accessibility-for-web-components.html
- *
- * @param componentEl The shadow element that needs the aria label
- * @param inputId The unique identifier for the input
- */
-const getAriaLabel = (componentEl, inputId) => {
-    let labelText;
-    // If the user provides their own label via the aria-labelledby attr
-    // we should use that instead of looking for an ion-label
-    const labelledBy = componentEl.getAttribute('aria-labelledby');
-    // Grab the id off of the component in case they are using
-    // a custom label using the label element
-    const componentId = componentEl.id;
-    let labelId = labelledBy !== null && labelledBy.trim() !== '' ? labelledBy : inputId + '-lbl';
-    let label = labelledBy !== null && labelledBy.trim() !== '' ? document.getElementById(labelledBy) : findItemLabel(componentEl);
-    if (label) {
-        if (labelledBy === null) {
-            label.id = labelId;
-        }
-        labelText = label.textContent;
-        label.setAttribute('aria-hidden', 'true');
-        // if there is no label, check to see if the user has provided
-        // one by setting an id on the component and using the label element
-    }
-    else if (componentId.trim() !== '') {
-        label = document.querySelector(`label[for="${componentId}"]`);
-        if (label) {
-            if (label.id !== '') {
-                labelId = label.id;
-            }
-            else {
-                label.id = labelId = `${componentId}-lbl`;
-            }
-            labelText = label.textContent;
-        }
-    }
-    return { label, labelId, labelText };
-};
 /**
  * This method is used to add a hidden input to a host element that contains
  * a Shadow DOM. It does not add the input inside of the Shadow root which
@@ -424,7 +371,6 @@ exports.componentOnReady = componentOnReady;
 exports.debounce = debounce;
 exports.debounceEvent = debounceEvent;
 exports.focusVisibleElement = focusVisibleElement;
-exports.getAriaLabel = getAriaLabel;
 exports.getElementRoot = getElementRoot;
 exports.hasLazyBuild = hasLazyBuild;
 exports.hasShadowDom = hasShadowDom;

package/dist/cjs/{index-92bb95d6.js → index-14ae0c27.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-const index = require('./index-ea266398.js');
-const helpers = require('./helpers-b71ca811.js');
+const index = require('./index-2d21d526.js');
+const helpers = require('./helpers-71097d9c.js');
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
 const LIFECYCLE_DID_ENTER = 'ionViewDidEnter';
@@ -12,8 +12,8 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-997fe325.js'); });
-const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-2b76c2c6.js'); });
+const iosTransitionAnimation = () => Promise.resolve().then(function () { return require('./ios.transition-8e0ca8ed.js'); });
+const mdTransitionAnimation = () => Promise.resolve().then(function () { return require('./md.transition-5d0f134b.js'); });
 // TODO(FW-2832): types
 const transition = (opts) => {
     return new Promise((resolve, reject) => {

package/dist/cjs/{index-bbc5b1f7.js → index-289297dc.js}

@@ -4,11 +4,11 @@
 'use strict';
 
 const index$1 = require('./index-c8d52405.js');
-const hardwareBackButton = require('./hardware-back-button-4cb049f1.js');
+const hardwareBackButton = require('./hardware-back-button-1c67a5a2.js');
 const index = require('./index-5915f9b3.js');
-const helpers = require('./helpers-b71ca811.js');
-const ionicGlobal = require('./ionic-global-59aa7eb7.js');
-const animation = require('./animation-4ad55058.js');
+const helpers = require('./helpers-71097d9c.js');
+const ionicGlobal = require('./ionic-global-5762eca9.js');
+const animation = require('./animation-58ecfe20.js');
 
 /**
  * baseAnimation