Merge branch 'next' into ROU-4822

chore: sync next with feature-8.0 (#29225 )
Issue number: N/A ---------   ## What is the current behavior?  ## What is the new behavior?  - Syncs the `next` branch with the latest from `feature-8.0`. ## Does this introduce a breaking change? - [ ] Yes - [x] No  ## Other information
2026-03-13 10:22:08 +08:00 · 2024-03-28 14:36:26 +00:00 · 2024-03-27 10:14:18 -04:00 · 2024-03-27 00:15:06 -04:00 · 2024-03-27 00:13:38 -04:00 · 2024-03-26 10:46:28 +00:00
26 changed files with 1325 additions and 25 deletions
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -30,6 +30,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
  - [Progress bar](#version-8x-progress-bar)
  - [Radio](#version-8x-radio)
  - [Range](#version-8x-range)
+  - [Searchbar](#version-8x-searchbar)
  - [Select](#version-8x-select)
  - [Textarea](#version-8x-textarea)
  - [Toggle](#version-8x-toggle)
@@ -264,6 +265,10 @@ For more information on styling toast buttons, refer to the [Toast Theming docum

 - The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed. Ionic will also no longer attempt to automatically associate form controls with sibling `<label>` elements as these label elements are now used inside the form control. Developers should provide a label (either visible text or `aria-label`) directly to the form control. For more information on migrating from the legacy range syntax, refer to the [Range documentation](https://ionicframework.com/docs/api/range#migrating-from-legacy-range-syntax).

+<h4 id="version-8x-searchbar">Searchbar</h4>
+
+- The `autocapitalize` property now defaults to `'off'`.
+
 <h4 id="version-8x-select">Select</h4>

 - The `legacy` property and support for the legacy syntax, which involved placing an `ion-select` inside of an `ion-item` with an `ion-label`, have been removed. Ionic will also no longer attempt to automatically associate form controls with sibling `<label>` elements as these label elements are now used inside the form control. Developers should provide a label (either visible text or `aria-label`) directly to the form control. For more information on migrating from the legacy select syntax, refer to the [Select documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax).
--- a/core/api.txt
+++ b/core/api.txt
@@ -321,6 +321,9 @@ ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',fals
 ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
+ion-checkbox,prop,required,boolean,false,false,false
+ion-checkbox,prop,shape,"rectangular" | "soft" | undefined,'soft',false,true
+ion-checkbox,prop,size,"default" | "small" | undefined,'default',false,true
 ion-checkbox,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-checkbox,prop,value,any,'on',false,false
 ion-checkbox,event,ionBlur,void,true
@@ -338,6 +341,7 @@ ion-checkbox,css-prop,--checkmark-width
 ion-checkbox,css-prop,--size
 ion-checkbox,css-prop,--transition
 ion-checkbox,part,container
+ion-checkbox,part,focus-ring
 ion-checkbox,part,label
 ion-checkbox,part,mark

@@ -603,7 +607,7 @@ ion-input,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secon
 ion-input,prop,counter,boolean,false,false,false
 ion-input,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
 ion-input,prop,debounce,number | undefined,undefined,false,false
-ion-input,prop,disabled,boolean,false,false,false
+ion-input,prop,disabled,boolean,false,false,true
 ion-input,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
 ion-input,prop,errorText,string | undefined,undefined,false,false
 ion-input,prop,fill,"outline" | "solid" | undefined,undefined,false,false
@@ -620,7 +624,7 @@ ion-input,prop,multiple,boolean | undefined,undefined,false,false
 ion-input,prop,name,string,this.inputId,false,false
 ion-input,prop,pattern,string | undefined,undefined,false,false
 ion-input,prop,placeholder,string | undefined,undefined,false,false
-ion-input,prop,readonly,boolean,false,false,false
+ion-input,prop,readonly,boolean,false,false,true
 ion-input,prop,required,boolean,false,false,false
 ion-input,prop,shape,"round" | undefined,undefined,false,false
 ion-input,prop,spellcheck,boolean,false,false,false
@@ -653,6 +657,12 @@ ion-input,css-prop,--placeholder-font-style
 ion-input,css-prop,--placeholder-font-weight
 ion-input,css-prop,--placeholder-opacity

+ion-input-password-toggle,shadow
+ion-input-password-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
+ion-input-password-toggle,prop,hideIcon,string | undefined,undefined,false,false
+ion-input-password-toggle,prop,mode,"ios" | "md",undefined,false,false
+ion-input-password-toggle,prop,showIcon,string | undefined,undefined,false,false
+
 ion-item,shadow
 ion-item,prop,button,boolean,false,false,false
 ion-item,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
@@ -1265,7 +1275,7 @@ ion-row,prop,theme,"ios" | "md" | "ionic",undefined,false,false

 ion-searchbar,scoped
 ion-searchbar,prop,animated,boolean,false,false,false
-ion-searchbar,prop,autocapitalize,string,undefined,true,false
+ion-searchbar,prop,autocapitalize,string,'off',false,false
 ion-searchbar,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
 ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
 ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) as string,false,false
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -724,6 +724,18 @@ export namespace Components {
          * The name of the control, which is submitted with the form data.
         */
        "name": string;
+        /**
+          * If `true`, the checkbox will be presented with an error style when it is unchecked.
+         */
+        "required": boolean;
+        /**
+          * Set to `"soft"` for a checkbox with more rounded corners.
+         */
+        "shape"?: 'soft' | 'rectangular';
+        /**
+          * Set to `"small"` for a checkbox with less height and padding or to `"default"` for a checkbox with the default height and padding.
+         */
+        "size"?: 'small' | 'default';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -1471,6 +1483,25 @@ export namespace Components {
         */
        "value"?: string | number | null;
    }
+    interface IonInputPasswordToggle {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
+         */
+        "hideIcon"?: string;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
+         */
+        "showIcon"?: string;
+        "type": TextFieldTypes;
+    }
    interface IonItem {
        /**
          * If `true`, a button tag will be rendered and the item will be tappable.
@@ -4323,6 +4354,12 @@ declare global {
        prototype: HTMLIonInputElement;
        new (): HTMLIonInputElement;
    };
+    interface HTMLIonInputPasswordToggleElement extends Components.IonInputPasswordToggle, HTMLStencilElement {
+    }
+    var HTMLIonInputPasswordToggleElement: {
+        prototype: HTMLIonInputPasswordToggleElement;
+        new (): HTMLIonInputPasswordToggleElement;
+    };
    interface HTMLIonItemElement extends Components.IonItem, HTMLStencilElement {
    }
    var HTMLIonItemElement: {
@@ -5147,6 +5184,7 @@ declare global {
        "ion-infinite-scroll": HTMLIonInfiniteScrollElement;
        "ion-infinite-scroll-content": HTMLIonInfiniteScrollContentElement;
        "ion-input": HTMLIonInputElement;
+        "ion-input-password-toggle": HTMLIonInputPasswordToggleElement;
        "ion-item": HTMLIonItemElement;
        "ion-item-divider": HTMLIonItemDividerElement;
        "ion-item-group": HTMLIonItemGroupElement;
@@ -5926,6 +5964,18 @@ declare namespace LocalJSX {
          * Emitted when the checkbox has focus.
         */
        "onIonFocus"?: (event: IonCheckboxCustomEvent<void>) => void;
+        /**
+          * If `true`, the checkbox will be presented with an error style when it is unchecked.
+         */
+        "required"?: boolean;
+        /**
+          * Set to `"soft"` for a checkbox with more rounded corners.
+         */
+        "shape"?: 'soft' | 'rectangular';
+        /**
+          * Set to `"small"` for a checkbox with less height and padding or to `"default"` for a checkbox with the default height and padding.
+         */
+        "size"?: 'small' | 'default';
        /**
          * The theme determines the visual appearance of the component.
         */
@@ -6689,6 +6739,25 @@ declare namespace LocalJSX {
         */
        "value"?: string | number | null;
    }
+    interface IonInputPasswordToggle {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
+         */
+        "hideIcon"?: string;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
+         */
+        "showIcon"?: string;
+        "type"?: TextFieldTypes;
+    }
    interface IonItem {
        /**
          * If `true`, a button tag will be rendered and the item will be tappable.
@@ -8121,7 +8190,7 @@ declare namespace LocalJSX {
        /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
         */
-        "autocapitalize": string;
+        "autocapitalize"?: string;
        /**
          * Set the input's autocomplete property.
         */
@@ -9064,6 +9133,7 @@ declare namespace LocalJSX {
        "ion-infinite-scroll": IonInfiniteScroll;
        "ion-infinite-scroll-content": IonInfiniteScrollContent;
        "ion-input": IonInput;
+        "ion-input-password-toggle": IonInputPasswordToggle;
        "ion-item": IonItem;
        "ion-item-divider": IonItemDivider;
        "ion-item-group": IonItemGroup;
@@ -9162,6 +9232,7 @@ declare module "@stencil/core" {
            "ion-infinite-scroll": LocalJSX.IonInfiniteScroll & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollElement>;
            "ion-infinite-scroll-content": LocalJSX.IonInfiniteScrollContent & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollContentElement>;
            "ion-input": LocalJSX.IonInput & JSXBase.HTMLAttributes<HTMLIonInputElement>;
+            "ion-input-password-toggle": LocalJSX.IonInputPasswordToggle & JSXBase.HTMLAttributes<HTMLIonInputPasswordToggleElement>;
            "ion-item": LocalJSX.IonItem & JSXBase.HTMLAttributes<HTMLIonItemElement>;
            "ion-item-divider": LocalJSX.IonItemDivider & JSXBase.HTMLAttributes<HTMLIonItemDividerElement>;
            "ion-item-group": LocalJSX.IonItemGroup & JSXBase.HTMLAttributes<HTMLIonItemGroupElement>;
--- a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/checkbox/checkbox.ionic.scss
+++ b/core/src/components/checkbox/checkbox.ionic.scss
@@ -0,0 +1,165 @@
+@import "./checkbox";
+@import "./checkbox.ionic.vars";
+
+// ionic Checkbox
+// --------------------------------------------------
+
+:host {
+  // Border
+  --border-radius: calc(var(--size) * .125);
+  --border-width: #{$checkbox-ionic-icon-border-width};
+  --border-style: #{$checkbox-ionic-icon-border-style};
+  --border-color: #{$checkbox-ionic-icon-border-color-off};
+  --checkmark-width: 3;
+  --padding-top: #{$checkbox-ionic-padding-top};
+  --padding-bottom: #{$checkbox-ionic-padding-bottom};
+
+  // Background
+  --checkbox-background: #{$checkbox-ionic-icon-background-color-off};
+
+  // Transition
+  --transition: #{background $checkbox-ionic-transition-duration $checkbox-ionic-transition-easing};
+
+  // Size
+  --size: #{$checkbox-ionic-icon-size};
+  // add to existing selector
+
+  // margin is required to make room for outline on focus, otherwise the outline may get cut off
+  @include margin($checkbox-ionic-outline-width);  
+  @include padding(--padding-top, null, --padding-bottom, null);
+
+  // Target area
+  &::after {
+    @include position(50%, 0, null, 0);
+
+    position: absolute;
+
+    height: 100%;
+    min-height: 48px;
+
+    transform: translateY(-50%);
+
+    content: "";
+
+    cursor: pointer;
+
+    z-index: 1;
+  }
+
+  .native-wrapper{
+    position: relative;
+  }
+}
+
+// Ionic Design Checkbox Sizes
+// --------------------------------------------------
+:host(.checkbox-small) {
+  --padding-top: #{$checkbox-ionic-small-padding-top};
+  --padding-bottom: #{$checkbox-ionic-small-padding-bottom};
+
+   // Size
+   --size: #{$checkbox-ionic-small-icon-size};
+}
+
+// Ionic Design Checkbox Shapes
+// --------------------------------------------------
+:host(.checkbox-rectangular) {
+  --border-radius: #{$checkbox-ionic-rectangular-border};
+}
+
+// Ionic Design Checkbox Disabled
+// --------------------------------------------------
+// disabled, indeterminate checkbox
+:host(.checkbox-disabled.checkbox-indeterminate) .checkbox-icon {
+  border-width: 0;
+
+  background-color: #74aafc;
+}
+
+// disabled, unchecked checkbox
+:host(.checkbox-disabled) .checkbox-icon {
+  border-color: #c9c9c9;
+
+  background-color: #f5f5f5;
+}
+// disabled, checked checkbox
+:host(.checkbox-disabled.checkbox-checked) .checkbox-icon {
+  border-width: 0;
+
+  background-color: #A8C8F8;
+}
+
+// Ionic Design Checkbox Required State
+// --------------------------------------------------
+// Unhecked checkbox with `required` property set to true
+:host(.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) {
+  .checkbox-icon {
+    border-color: #f72c2c;
+  }
+}
+
+// Focused: Unchecked checkbox with `required` property set to true
+:host(.ion-focusable.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) .checkbox-icon {
+  outline-color: #ffafaf;
+}
+
+// Ionic Design Checkbox Focus Ring
+// --------------------------------------------------
+:host(.ion-focused:not(.checkbox-disabled)) .focus-ring {
+  @include position(-4px, -4px, -4px, -4px);
+  position: absolute;
+
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
+
+  transition: border-color 0.3s;
+
+  border: 2px solid $checkbox-ionic-focus-ring-color;
+
+  @include border-radius(var(--border-radius));
+
+  content: "";
+  box-sizing: border-box;
+}
+
+// Required state
+:host(.ion-focused.checkbox-required) .focus-ring {
+  border-color:$checkbox-ionic-focus-required-ring-color;
+}
+
+// Checkbox: Hover
+// --------------------------------------------------------
+@media (any-hover: hover) {
+:host(:hover) .checkbox-icon {
+  background-color: #ececec; // mix of 'white', '#121212', 0.08, 'rgb'
+}
+
+:host(:hover.checkbox-checked) .checkbox-icon,
+:host(:hover.checkbox-indeterminate) .checkbox-icon {
+  background-color: #1061da; // mix of '#1068eb', '#121212', 0.08, 'rgb'
+}
+
+// unchecked checkbox with `required` property set to true
+:host(:hover.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) {
+  .checkbox-icon {
+    border-color: #ee2b2b;
+  }
+}
+}
+
+// Checkbox: Active
+// --------------------------------------------------------
+:host(.ion-activated) .checkbox-icon {
+  background-color: #e3e3e3; // mix of 'white', '#121212', 0.12, 'rgb'
+}
+
+:host(.ion-activated.checkbox-checked) .checkbox-icon,
+:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
+  background-color: #105ed1; // mix of '#1068eb', '#121212', 0.12, 'rgb'
+}
+
+:host(.checkbox-label-placement-start) {
+  display: flex;
+
+  justify-content: space-between;
+}
--- a/core/src/components/checkbox/checkbox.ionic.vars.scss
+++ b/core/src/components/checkbox/checkbox.ionic.vars.scss
@@ -0,0 +1,63 @@
+@import "../../themes/ionic.globals.md";
+@import "../item/item.md.vars";
+
+// ionic Checkbox
+// --------------------------------------------------
+
+/// @prop - Background color of the checkbox icon when off
+$checkbox-ionic-icon-background-color-off:  $item-md-background !default;
+
+/// @prop - Size of the checkbox icon
+/// The icon size does not use dynamic font
+/// because it does not scale in native.
+$checkbox-ionic-icon-size: 24px !default;
+
+/// @prop - Icon size of the checkbox for the small size
+$checkbox-ionic-small-icon-size: 16px !default;
+
+/// @prop - Border width of the checkbox icon
+$checkbox-ionic-icon-border-width: 1px !default;
+
+/// @prop - Border style of the checkbox icon
+$checkbox-ionic-icon-border-style: solid !default;
+
+/// @prop - Border color of the checkbox icon when off
+$checkbox-ionic-icon-border-color-off: #9a9a9a !default;
+
+/// @prop - Outline width of the checkbox
+$checkbox-ionic-outline-width: 2px !default;
+
+/// @prop - Padding top of the checkbox for the default size
+$checkbox-ionic-padding-top: 12px !default;
+
+/// @prop - Padding bottom of the button for the default size
+$checkbox-ionic-padding-bottom: 12px !default;
+
+/// @prop - Padding top of the checkbox for the small size
+$checkbox-ionic-small-padding-top: 16px !default;
+
+/// @prop - Padding bottom of the button for the small size
+$checkbox-ionic-small-padding-bottom: 16px !default;
+
+/// @prop - Focus color of the checkbox
+$checkbox-ionic-focus-ring-color: #9ec4fd !default;
+
+/// @prop - Focus color of the required checkbox
+$checkbox-ionic-focus-required-ring-color: #FFAFAF !default;
+
+/// @prop - Transition duration of the checkbox
+$checkbox-ionic-transition-duration: 180ms !default;
+
+/// @prop - Transition easing of the checkbox
+$checkbox-ionic-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
+
+
+// Checkbox Shapes
+// -------------------------------------------------------------------------------
+
+/* Rectangular */
+/// @prop - Rectangular border radius of the checkbox
+$checkbox-ionic-rectangular-border: 0 !default;
+
+
+
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -18,13 +18,14 @@ import type { CheckboxChangeEventDetail } from './checkbox-interface';
 * @part container - The container for the checkbox mark.
 * @part label - The label text describing the checkbox.
 * @part mark - The checkmark used to indicate the checked state.
+ * @part focus-ring - The visual indicator that appears as an outline around the checkbox when focused. Only available for the Ionic theme.
 */
@Component({
  tag: 'ion-checkbox',
  styleUrls: {
    ios: 'checkbox.ios.scss',
    md: 'checkbox.md.scss',
-    ionic: 'checkbox.md.scss',
+    ionic: 'checkbox.ionic.scss',
  },
  shadow: true,
 })
@@ -98,6 +99,22 @@ export class Checkbox implements ComponentInterface {
   */
  @Prop() alignment: 'start' | 'center' = 'center';

+  /**
+   * If `true`, the checkbox will be presented with an error style when it is unchecked.
+   */
+  @Prop() required = false;
+
+  /**
+   * Set to `"soft"` for a checkbox with more rounded corners.
+   */
+  @Prop() shape?: 'soft' | 'rectangular' = 'soft';
+
+  /**
+   * Set to `"small"` for a checkbox with less height and padding or to `"default"`
+   * for a checkbox with the default height and padding.
+   */
+  @Prop() size?: 'small' | 'default' = 'default';
+
  /**
   * Emitted when the checked property has changed
   * as a result of a user action such as a click.
@@ -181,6 +198,9 @@ export class Checkbox implements ComponentInterface {
      name,
      value,
      alignment,
+      required,
+      size,
+      shape,
    } = this;
    const theme = getIonTheme(this);

@@ -201,6 +221,9 @@ export class Checkbox implements ComponentInterface {
          [`checkbox-justify-${justify}`]: true,
          [`checkbox-alignment-${alignment}`]: true,
          [`checkbox-label-placement-${labelPlacement}`]: true,
+          'checkbox-required': required,
+          [`checkbox-${size}`]: true,
+          [`checkbox-${shape}`]: true,
        })}
        onClick={this.onClick}
      >
@@ -233,6 +256,7 @@ export class Checkbox implements ComponentInterface {
            <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
              {path}
            </svg>
+            {theme === 'ionic' && <div part="focus-ring" class="focus-ring"></div>}
          </div>
        </label>
      </Host>
@@ -252,6 +276,12 @@ export class Checkbox implements ComponentInterface {
      ) : (
        <path d="M1.73,12.91 8.1,19.28 22.79,4.59" part="mark" />
      );
+    } else if (theme === 'ionic') {
+      path = indeterminate ? (
+        <path d="M6.5 12H17.5" stroke-linecap="round" part="mark" />
+      ) : (
+        <path d="M6 12.5L10 16.5L18.5 8" stroke-linecap="round" stroke-linejoin="round" part="mark" />
+      );
    }

    return path;
--- a/core/src/components/checkbox/test/theme-ionic/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/theme-ionic/checkbox.e2e.ts
@@ -0,0 +1,43 @@
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
+
+class CheckboxFixture {
+  readonly page: E2EPage;
+  readonly screenshotFn?: (file: string) => string;
+
+  constructor(page: E2EPage, screenshot?: (file: string) => string) {
+    this.page = page;
+    this.screenshotFn = screenshot;
+  }
+
+  async checkScreenshot(modifier: string) {
+    const { screenshotFn } = this;
+
+    if (!screenshotFn) {
+      throw new Error(
+        'A screenshot function is required to take a screenshot. Pass one in when creating CheckboxFixture.'
+      );
+    }
+
+    const wrapper = this.page.locator('#screenshot-wrapper');
+
+    await expect(wrapper).toHaveScreenshot(screenshotFn(`${modifier}-checkbox`));
+  }
+}
+
+configs({ themes: ['ionic'], modes: ['md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('checkbox: theme ionic'), () => {
+    let checkboxFixture!: CheckboxFixture;
+
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/checkbox/test/theme-ionic`, config);
+      await page.setIonViewport();
+      checkboxFixture = new CheckboxFixture(page, screenshot);
+    });
+
+    test('default', async () => {
+      await checkboxFixture.checkScreenshot(`default`);
+    });
+  });
+});
--- a/core/src/components/checkbox/test/theme-ionic/index.html
+++ b/core/src/components/checkbox/test/theme-ionic/index.html
@@ -0,0 +1,419 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" theme="ionic">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Checkbox - Basic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+  <style>
+    ion-checkbox.checkbox-part::part(mark) {
+      transform: scale(0.5);
+      transform-origin: center;
+    }
+    ion-col {
+      border: 1px solid cadetblue;
+    }
+  </style>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Checkbox - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <div id="checkboxes">
+          <ion-title>Label Placement Default</ion-title>
+          <ion-grid>
+            <ion-row>
+              <ion-col class="ion-text-center"><ion-title>Unchecked</ion-title></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col class="ion-text-center">Default</ion-col>
+              <ion-col class="ion-text-center">Small</ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox>Default</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" class="ion-margin-start">Default</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox shape="rectangular" class="ion-margin-start">Rectangular</ion-checkbox></ion-col>
+              <ion-col>
+                <ion-checkbox size="small" shape="rectangular" class="ion-margin-start"> Rectangular</ion-checkbox>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox class="ion-focused ion-margin-start">Focused</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" class="ion-focused ion-margin-start">Focused</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox shape="rectangular" class="ion-focused ion-margin-start">Rect Focus</ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox size="small" shape="rectangular" class="ion-focused ion-margin-start">
+                  Rect Focus
+                </ion-checkbox>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col class="ion-text-center"><ion-title>Checked</ion-title></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col class="ion-text-center">Default</ion-col>
+              <ion-col class="ion-text-center">Small</ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox checked>Default</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" checked>Default</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox shape="rectangular" checked>Rectangular</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" shape="rectangular" checked>Rectangular</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox class="ion-focused" checked>Focused</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" class="ion-focused" checked>Focused</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox shape="rectangular" class="ion-focused" checked>Rect Focus</ion-checkbox></ion-col>
+              <ion-col>
+                <ion-checkbox size="small" shape="rectangular" class="ion-focused" checked>Rect Focus</ion-checkbox>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col class="ion-text-center"><ion-title>Disabled</ion-title></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col class="ion-text-center">Default</ion-col>
+              <ion-col class="ion-text-center">Small</ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox disabled>Default</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" disabled>Default</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox shape="rectangular" disabled>Rectangular</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" shape="rectangular" disabled>Rectangular</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox class="ion-focused" disabled>Focused</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" class="ion-focused" disabled>Focused</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox shape="rectangular" class="ion-focused" disabled>Rect Focus</ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox size="small" shape="rectangular" class="ion-focused" disabled>Rect Focus</ion-checkbox>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col class="ion-text-center"><ion-title>Required</ion-title></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col class="ion-text-center">Default</ion-col>
+              <ion-col class="ion-text-center">Small</ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox required>Default</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" required>Default</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox shape="rectangular" required>Rectangular</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" shape="rectangular" required>Rectangular</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox class="ion-focused" required>Focused</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" class="ion-focused" required>Small Focused</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox shape="rectangular" class="ion-focused" required>Rect Focus</ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox size="small" shape="rectangular" class="ion-focused" required>Rect Focus</ion-checkbox>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col class="ion-text-center"><ion-title>Indeterminate</ion-title></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col class="ion-text-center">Default</ion-col>
+              <ion-col class="ion-text-center">Small</ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox indeterminate>Default</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" indeterminate>Default</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox shape="rectangular" indeterminate>Rectangular</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" shape="rectangular" indeterminate>Rectangular</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox class="ion-focused" indeterminate>Focused</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" class="ion-focused" indeterminate>Focused</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox shape="rectangular" class="ion-focused" indeterminate>Rect Focus</ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox size="small" shape="rectangular" class="ion-focused" indeterminate>
+                  Rect Focus
+                </ion-checkbox>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+        </div>
+
+        <div id="checkboxes2">
+          <ion-title>Label Placement End</ion-title>
+          <ion-grid>
+            <ion-row>
+              <ion-col class="ion-text-center"><ion-title>Unchecked</ion-title></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col class="ion-text-center">Default</ion-col>
+              <ion-col class="ion-text-center">Small</ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox label-placement="end">Default</ion-checkbox></ion-col>
+              <ion-col>
+                <ion-checkbox label-placement="end" size="small" class="ion-margin-start">Default</ion-checkbox>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox label-placement="end" shape="rectangular" class="ion-margin-start">
+                  Rectangular
+                </ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-margin-start">
+                  Rectangular
+                </ion-checkbox>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox label-placement="end" class="ion-focused ion-margin-start">Focused</ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox label-placement="end" size="small" class="ion-focused ion-margin-start">
+                  Focused
+                </ion-checkbox>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox label-placement="end" shape="rectangular" class="ion-focused ion-margin-start">
+                  Rect Focus
+                </ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox
+                  label-placement="end"
+                  size="small"
+                  shape="rectangular"
+                  class="ion-focused ion-margin-start"
+                >
+                  Rect Focus
+                </ion-checkbox>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col class="ion-text-center"><ion-title>Checked</ion-title></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col class="ion-text-center">Default</ion-col>
+              <ion-col class="ion-text-center">Small</ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox label-placement="end" checked>Default</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox label-placement="end" size="small" checked>Default</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox label-placement="end" shape="rectangular" checked>Rectangular</ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox label-placement="end" size="small" shape="rectangular" checked>Rectangular</ion-checkbox>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox label-placement="end" class="ion-focused" checked>Focused</ion-checkbox></ion-col>
+              <ion-col>
+                <ion-checkbox label-placement="end" size="small" class="ion-focused" checked>Focused</ion-checkbox>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" checked>
+                  Rect Focus
+                </ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" checked>
+                  Rect Focus
+                </ion-checkbox>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col class="ion-text-center"><ion-title>Disabled</ion-title></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col class="ion-text-center">Default</ion-col>
+              <ion-col class="ion-text-center">Small</ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox label-placement="end" disabled>Default</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox label-placement="end" size="small" disabled>Default</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox label-placement="end" shape="rectangular" disabled>Rectangular</ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox label-placement="end" size="small" shape="rectangular" disabled>Rectangular</ion-checkbox>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox label-placement="end" class="ion-focused" disabled>Focused</ion-checkbox></ion-col>
+              <ion-col>
+                <ion-checkbox label-placement="end" size="small" class="ion-focused" disabled>Focused</ion-checkbox>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" disabled>
+                  Rect Focus
+                </ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" disabled>
+                  Rect Focus
+                </ion-checkbox>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col class="ion-text-center"><ion-title>Required</ion-title></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col class="ion-text-center">Default</ion-col>
+              <ion-col class="ion-text-center">Small</ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox label-placement="end" required>Default</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox label-placement="end" size="small" required>Default</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox label-placement="end" shape="rectangular" required>Rectangular</ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox label-placement="end" size="small" shape="rectangular" required>Rectangular</ion-checkbox>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox label-placement="end" class="ion-focused" required>Focused</ion-checkbox></ion-col>
+              <ion-col>
+                <ion-checkbox label-placement="end" size="small" class="ion-focused" required>
+                  Small Focused
+                </ion-checkbox>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" required>
+                  Rect Focus
+                </ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" required>
+                  Rect Focus
+                </ion-checkbox>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+
+          <ion-grid>
+            <ion-row>
+              <ion-col class="ion-text-center"><ion-title>Indeterminate</ion-title></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col class="ion-text-center">Default</ion-col>
+              <ion-col class="ion-text-center">Small</ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox label-placement="end" indeterminate>Default</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox label-placement="end" size="small" indeterminate>Default</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox label-placement="end" shape="rectangular" indeterminate>Rectangular</ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox label-placement="end" size="small" shape="rectangular" indeterminate>
+                  Rectangular
+                </ion-checkbox>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox label-placement="end" class="ion-focused" indeterminate>Focused</ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox label-placement="end" size="small" class="ion-focused" indeterminate>
+                  Focused
+                </ion-checkbox>
+              </ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col>
+                <ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" indeterminate>
+                  Rect Focus
+                </ion-checkbox>
+              </ion-col>
+              <ion-col>
+                <ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" indeterminate>
+                  Rect Focus
+                </ion-checkbox>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
--- a/core/src/components/input-password-toggle/input-password-toggle.scss
+++ b/core/src/components/input-password-toggle/input-password-toggle.scss
--- a/core/src/components/input-password-toggle/input-password-toggle.tsx
+++ b/core/src/components/input-password-toggle/input-password-toggle.tsx
@@ -0,0 +1,152 @@
+import type { ComponentInterface } from '@stencil/core';
+import { Component, Element, Host, Prop, h, Watch } from '@stencil/core';
+import { printIonWarning } from '@utils/logging';
+import { createColorClasses } from '@utils/theme';
+import { eyeOff, eye } from 'ionicons/icons';
+
+import { getIonMode } from '../../global/ionic-global';
+import type { Color, TextFieldTypes } from '../../interface';
+
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ */
+@Component({
+  tag: 'ion-input-password-toggle',
+  /**
+   * Empty CSS files are required in order for the mode to be inherited to the
+   * inner ion-button. Otherwise, the setMode callback provided to Stencil will not get called
+   * and we will default to MD mode.
+   */
+  styleUrls: {
+    ios: 'input-password-toggle.scss',
+    md: 'input-password-toggle.scss',
+  },
+  shadow: true,
+})
+export class InputPasswordToggle implements ComponentInterface {
+  private inputElRef!: HTMLIonInputElement | null;
+
+  @Element() el!: HTMLIonInputElement;
+
+  /**
+   * The color to use from your application's color palette.
+   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+   * For more information on colors, see [theming](/docs/theming/basics).
+   */
+  @Prop({ reflect: true }) color?: Color;
+
+  /**
+   * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
+   */
+  @Prop() showIcon?: string;
+
+  /**
+   * The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
+   */
+  @Prop() hideIcon?: string;
+
+  /**
+   * @internal
+   */
+  @Prop({ mutable: true }) type: TextFieldTypes = 'password';
+
+  /**
+   * Whenever the input type changes we need to re-run validation to ensure the password
+   * toggle is being used with the correct input type. If the application changes the type
+   * outside of this component we also need to re-render so the correct icon is shown.
+   */
+  @Watch('type')
+  onTypeChange(newValue: TextFieldTypes) {
+    if (newValue !== 'text' && newValue !== 'password') {
+      printIonWarning(
+        `ion-input-password-toggle only supports inputs of type "text" or "password". Input of type "${newValue}" is not compatible.`,
+        this.el
+      );
+
+      return;
+    }
+  }
+
+  connectedCallback() {
+    const { el } = this;
+
+    const inputElRef = (this.inputElRef = el.closest('ion-input'));
+
+    if (!inputElRef) {
+      printIonWarning(
+        'No ancestor ion-input found for ion-input-password-toggle. This component must be slotted inside of an ion-input.',
+        el
+      );
+
+      return;
+    }
+
+    /**
+     * Important: Set the type in connectedCallback because the default value
+     * of this.type may not always be accurate. Usually inputs have the "password" type
+     * but it is possible to have the input to initially have the "text" type. In that scenario
+     * the wrong icon will show briefly before switching to the correct icon. Setting the
+     * type here allows us to avoid that flicker.
+     */
+    this.type = inputElRef.type;
+  }
+
+  disconnectedCallback() {
+    this.inputElRef = null;
+  }
+
+  private togglePasswordVisibility = () => {
+    const { inputElRef } = this;
+
+    if (!inputElRef) {
+      return;
+    }
+
+    inputElRef.type = inputElRef.type === 'text' ? 'password' : 'text';
+  };
+
+  render() {
+    const { color, type } = this;
+
+    const mode = getIonMode(this);
+
+    const showPasswordIcon = this.showIcon ?? eye;
+    const hidePasswordIcon = this.hideIcon ?? eyeOff;
+
+    const isPasswordVisible = type === 'text';
+
+    return (
+      <Host
+        class={createColorClasses(color, {
+          [mode]: true,
+        })}
+      >
+        <ion-button
+          mode={mode}
+          color={color}
+          fill="clear"
+          shape="round"
+          aria-checked={isPasswordVisible ? 'true' : 'false'}
+          aria-label="show password"
+          role="switch"
+          type="button"
+          onPointerDown={(ev) => {
+            /**
+             * This prevents mobile browsers from
+             * blurring the input when the password toggle
+             * button is activated.
+             */
+            ev.preventDefault();
+          }}
+          onClick={this.togglePasswordVisibility}
+        >
+          <ion-icon
+            slot="icon-only"
+            aria-hidden="true"
+            icon={isPasswordVisible ? hidePasswordIcon : showPasswordIcon}
+          ></ion-icon>
+        </ion-button>
+      </Host>
+    );
+  }
+}
--- a/core/src/components/input-password-toggle/test/a11y/input-password-toggle.e2e.ts
+++ b/core/src/components/input-password-toggle/test/a11y/input-password-toggle.e2e.ts
@@ -0,0 +1,23 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('input password toggle: a11y'), () => {
+    test('should not have accessibility violations', async ({ page }) => {
+      await page.setContent(
+        `
+          <main>
+            <ion-input label="input" type="password">
+              <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+            </ion-input>
+          </main>
+        `,
+        config
+      );
+
+      const results = await new AxeBuilder({ page }).analyze();
+      expect(results.violations).toEqual([]);
+    });
+  });
+});
--- a/core/src/components/input-password-toggle/test/basic/index.html
+++ b/core/src/components/input-password-toggle/test/basic/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Input - Toggle Password</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(5, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+      @media screen and (max-width: 800px) {
+        .grid {
+          grid-template-columns: 1fr;
+          padding: 0;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Input - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Default</h2>
+            <ion-input type="password" value="supersecurepassword" label="Password">
+              <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+            </ion-input>
+          </div>
+          <div class="grid-item">
+            <h2>Custom Icon</h2>
+            <ion-input type="password" value="supersecurepassword" label="Password">
+              <ion-input-password-toggle show-icon="trash" slot="end"></ion-input-password-toggle>
+            </ion-input>
+          </div>
+          <div class="grid-item">
+            <h2>Custom Mode/Color</h2>
+            <ion-input type="password" value="supersecurepassword" label="Password">
+              <ion-input-password-toggle
+                color="danger"
+                mode="ios"
+                show-icon="trash"
+                slot="end"
+              ></ion-input-password-toggle>
+            </ion-input>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
--- a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts
+++ b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts
@@ -0,0 +1,50 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input password toggle: states'), () => {
+    test('should be hidden when inside of a readonly input', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-input label="input" type="password" readonly="true">
+            <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+          </ion-input>
+        `,
+        config
+      );
+
+      const inputPasswordToggle = page.locator('ion-input-password-toggle');
+      await expect(inputPasswordToggle).toBeHidden();
+    });
+    test('should be hidden when inside of a disabled input', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-input label="input" type="password" disabled="true">
+            <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+          </ion-input>
+        `,
+        config
+      );
+
+      const inputPasswordToggle = page.locator('ion-input-password-toggle');
+      await expect(inputPasswordToggle).toBeHidden();
+    });
+  });
+
+  test.describe(title('input password toggle: rendering'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-input label="input" type="password">
+            <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+          </ion-input>
+        `,
+        config
+      );
+
+      const inputPasswordToggle = page.locator('ion-input-password-toggle');
+
+      await expect(inputPasswordToggle).toHaveScreenshot(screenshot('input-password-toggle'));
+    });
+  });
+});
--- a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts-snapshots/input-password-toggle-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/input-password-toggle/test/input-password-toggle.spec.tsx
+++ b/core/src/components/input-password-toggle/test/input-password-toggle.spec.tsx
@@ -0,0 +1,115 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Input } from '../../input/input';
+import { InputPasswordToggle } from '../input-password-toggle';
+import { Button } from '../../button/button';
+import { initialize } from '../../../global/ionic-global';
+
+describe('input password toggle', () => {
+  it('should toggle input type when clicked', async () => {
+    const page = await newSpecPage({
+      components: [Input, InputPasswordToggle, Button],
+      template: () => (
+        <ion-input type="password">
+          <ion-input-password-toggle slot="end"></ion-input-password-toggle>
+        </ion-input>
+      ),
+    });
+
+    const inputPasswordToggle = page.body.querySelector('ion-input-password-toggle')!;
+    const button = inputPasswordToggle.shadowRoot!.querySelector('ion-button')!;
+    const input = page.body.querySelector('ion-input')!;
+
+    expect(input.type).toBe('password');
+
+    button.click();
+    await page.waitForChanges();
+
+    expect(input.type).toBe('text');
+
+    button.click();
+    await page.waitForChanges();
+
+    expect(input.type).toBe('password');
+  });
+
+  it('should render custom icons', async () => {
+    const page = await newSpecPage({
+      components: [Input, InputPasswordToggle, Button],
+      template: () => (
+        <ion-input type="password">
+          <ion-input-password-toggle showIcon="show" hideIcon="hide" slot="end"></ion-input-password-toggle>
+        </ion-input>
+      ),
+    });
+
+    const inputPasswordToggle = page.body.querySelector('ion-input-password-toggle')!;
+    const button = inputPasswordToggle.shadowRoot!.querySelector('ion-button')!;
+    const icon = inputPasswordToggle.shadowRoot!.querySelector('ion-icon')!;
+
+    // Grab the attribute to test since we are not actually passing in a valid SVG
+    expect(icon.getAttribute('icon')).toBe('show');
+
+    button.click();
+    await page.waitForChanges();
+
+    expect(icon.getAttribute('icon')).toBe('hide');
+  });
+
+  it('changing the type on the input should update the icon used in password toggle', async () => {
+    const page = await newSpecPage({
+      components: [Input, InputPasswordToggle, Button],
+      template: () => (
+        <ion-input type="password">
+          <ion-input-password-toggle showIcon="show" hideIcon="hide" slot="end"></ion-input-password-toggle>
+        </ion-input>
+      ),
+    });
+
+    const inputPasswordToggle = page.body.querySelector('ion-input-password-toggle')!;
+    const input = page.body.querySelector('ion-input')!;
+    const icon = inputPasswordToggle.shadowRoot!.querySelector('ion-icon')!;
+
+    // Grab the attribute to test since we are not actually passing in a valid SVG
+    expect(icon.getAttribute('icon')).toBe('show');
+
+    input.type = 'text';
+    await page.waitForChanges();
+
+    expect(icon.getAttribute('icon')).toBe('hide');
+
+    input.type = 'password';
+    await page.waitForChanges();
+
+    expect(icon.getAttribute('icon')).toBe('show');
+  });
+
+  it('should inherit the mode and color to internal ionic components', async () => {
+    /**
+     * This initialize script tells Stencil how to determine the mode on components.
+     * This is required for any getIonMode internal logic to function properly in spec tests.
+     */
+    initialize();
+
+    const page = await newSpecPage({
+      components: [Input, InputPasswordToggle, Button],
+      template: () => (
+        <ion-input type="password" color="primary">
+          <ion-input-password-toggle slot="end" mode="ios" color="danger"></ion-input-password-toggle>
+        </ion-input>
+      ),
+    });
+
+    const inputPasswordToggle = page.body.querySelector('ion-input-password-toggle')!;
+    const button = inputPasswordToggle.shadowRoot!.querySelector('ion-button')!;
+
+    await page.waitForChanges();
+
+    // mode is a virtual prop so we need to access it as an attribute
+    expect(button.getAttribute('mode')).toBe('ios');
+
+    // color is an actual prop so we can access the element property
+    expect(button.color).toBe('danger');
+  });
+});
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -605,3 +605,12 @@
  margin-inline-start: $form-control-label-margin;
  margin-inline-end: 0;
 }
+
+/**
+ * The input password toggle component should be hidden when the input is readonly/disabled
+ * because it is not possible to edit a password.
+ */
+:host([disabled]) ::slotted(ion-input-password-toggle),
+:host([readonly]) ::slotted(ion-input-password-toggle) {
+  display: none;
+}
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -132,7 +132,7 @@ export class Input implements ComponentInterface {
  /**
   * If `true`, the user cannot interact with the input.
   */
-  @Prop() disabled = false;
+  @Prop({ reflect: true }) disabled = false;

  /**
   * A hint to the browser for which enter key to display.
@@ -228,7 +228,7 @@ export class Input implements ComponentInterface {
  /**
   * If `true`, the user cannot modify the value.
   */
-  @Prop() readonly = false;
+  @Prop({ reflect: true }) readonly = false;

  /**
   * If `true`, the user must fill in a value before submitting a form.
@@ -256,6 +256,20 @@ export class Input implements ComponentInterface {
   */
  @Prop() type: TextFieldTypes = 'text';

+  /**
+   * Whenever the type on the input changes we need
+   * to update the internal type prop on the password
+   * toggle so that that correct icon is shown.
+   */
+  @Watch('type')
+  onTypeChange() {
+    const passwordToggle = this.el.querySelector('ion-input-password-toggle');
+
+    if (passwordToggle) {
+      passwordToggle.type = this.type;
+    }
+  }
+
  /**
   * The value of the input.
   */
@@ -346,6 +360,14 @@ export class Input implements ComponentInterface {

  componentDidLoad() {
    this.originalIonInput = this.ionInput;
+
+    /**
+     * Set the type on the password toggle in the event that this input's
+     * type was set async and does not match the default type for the password toggle.
+     * This can happen when the type is bound using a JS framework binding syntax
+     * such as [type] in Angular.
+     */
+    this.onTypeChange();
  }

  componentDidRender() {
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -80,26 +80,11 @@ export class Searchbar implements ComponentInterface {
   */
  @Prop() animated = false;

-  /**
-   * Prior to the addition of this property
-   * autocapitalize was enabled by default on iOS
-   * and disabled by default on Android
-   * for Searchbar. The autocapitalize type on HTMLElement
-   * requires that it be a string and never undefined.
-   * However, setting it to a string value would be a breaking change
-   * in behavior, so we use "!" to tell TypeScript that this property
-   * is always defined so we can rely on the browser defaults. Browsers
-   * will automatically set a default value if the developer does not set one.
-   *
-   * In the future, this property will default to "off" to align with
-   * Input and Textarea, and the "!" will not be needed.
-   */
-
  /**
   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
   * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
   */
-  @Prop() autocapitalize!: string;
+  @Prop() autocapitalize: string = 'off';

  /**
   * Set the input's autocomplete property.
--- a/packages/angular/src/directives/proxies-list.ts
+++ b/packages/angular/src/directives/proxies-list.ts
@@ -36,6 +36,7 @@ export const DIRECTIVES = [
  d.IonInfiniteScroll,
  d.IonInfiniteScrollContent,
  d.IonInput,
+  d.IonInputPasswordToggle,
  d.IonItem,
  d.IonItemDivider,
  d.IonItemGroup,
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -509,14 +509,14 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}


@ProxyCmp({
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'theme', 'value']
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'shape', 'size', 'theme', 'value']
 })
@Component({
  selector: 'ion-checkbox',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '<ng-content></ng-content>',
  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'theme', 'value'],
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'shape', 'size', 'theme', 'value'],
 })
 export class IonCheckbox {
  protected el: HTMLElement;
@@ -1016,6 +1016,28 @@ where the user's interaction is typing.
 }


+@ProxyCmp({
+  inputs: ['color', 'hideIcon', 'mode', 'showIcon']
+})
+@Component({
+  selector: 'ion-input-password-toggle',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['color', 'hideIcon', 'mode', 'showIcon'],
+})
+export class IonInputPasswordToggle {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface IonInputPasswordToggle extends Components.IonInputPasswordToggle {}
+
+
@ProxyCmp({
  inputs: ['button', 'color', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'theme', 'type']
 })
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -36,6 +36,7 @@ import { defineCustomElement as defineIonHeader } from '@ionic/core/components/i
 import { defineCustomElement as defineIonImg } from '@ionic/core/components/ion-img.js';
 import { defineCustomElement as defineIonInfiniteScroll } from '@ionic/core/components/ion-infinite-scroll.js';
 import { defineCustomElement as defineIonInfiniteScrollContent } from '@ionic/core/components/ion-infinite-scroll-content.js';
+import { defineCustomElement as defineIonInputPasswordToggle } from '@ionic/core/components/ion-input-password-toggle.js';
 import { defineCustomElement as defineIonItem } from '@ionic/core/components/ion-item.js';
 import { defineCustomElement as defineIonItemDivider } from '@ionic/core/components/ion-item-divider.js';
 import { defineCustomElement as defineIonItemGroup } from '@ionic/core/components/ion-item-group.js';
@@ -978,6 +979,30 @@ export class IonInfiniteScrollContent {
 export declare interface IonInfiniteScrollContent extends Components.IonInfiniteScrollContent {}


+@ProxyCmp({
+  defineCustomElementFn: defineIonInputPasswordToggle,
+  inputs: ['color', 'hideIcon', 'mode', 'showIcon']
+})
+@Component({
+  selector: 'ion-input-password-toggle',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['color', 'hideIcon', 'mode', 'showIcon'],
+  standalone: true
+})
+export class IonInputPasswordToggle {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface IonInputPasswordToggle extends Components.IonInputPasswordToggle {}
+
+
@ProxyCmp({
  defineCustomElementFn: defineIonItem,
  inputs: ['button', 'color', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'lines', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'target', 'theme', 'type']
--- a/packages/react/src/components/proxies.ts
+++ b/packages/react/src/components/proxies.ts
@@ -31,6 +31,7 @@ import { defineCustomElement as defineIonImg } from '@ionic/core/components/ion-
 import { defineCustomElement as defineIonInfiniteScroll } from '@ionic/core/components/ion-infinite-scroll.js';
 import { defineCustomElement as defineIonInfiniteScrollContent } from '@ionic/core/components/ion-infinite-scroll-content.js';
 import { defineCustomElement as defineIonInput } from '@ionic/core/components/ion-input.js';
+import { defineCustomElement as defineIonInputPasswordToggle } from '@ionic/core/components/ion-input-password-toggle.js';
 import { defineCustomElement as defineIonItemDivider } from '@ionic/core/components/ion-item-divider.js';
 import { defineCustomElement as defineIonItemGroup } from '@ionic/core/components/ion-item-group.js';
 import { defineCustomElement as defineIonItemOptions } from '@ionic/core/components/ion-item-options.js';
@@ -99,6 +100,7 @@ export const IonImg = /*@__PURE__*/createReactComponent<JSX.IonImg, HTMLIonImgEl
 export const IonInfiniteScroll = /*@__PURE__*/createReactComponent<JSX.IonInfiniteScroll, HTMLIonInfiniteScrollElement>('ion-infinite-scroll', undefined, undefined, defineIonInfiniteScroll);
 export const IonInfiniteScrollContent = /*@__PURE__*/createReactComponent<JSX.IonInfiniteScrollContent, HTMLIonInfiniteScrollContentElement>('ion-infinite-scroll-content', undefined, undefined, defineIonInfiniteScrollContent);
 export const IonInput = /*@__PURE__*/createReactComponent<JSX.IonInput, HTMLIonInputElement>('ion-input', undefined, undefined, defineIonInput);
+export const IonInputPasswordToggle = /*@__PURE__*/createReactComponent<JSX.IonInputPasswordToggle, HTMLIonInputPasswordToggleElement>('ion-input-password-toggle', undefined, undefined, defineIonInputPasswordToggle);
 export const IonItemDivider = /*@__PURE__*/createReactComponent<JSX.IonItemDivider, HTMLIonItemDividerElement>('ion-item-divider', undefined, undefined, defineIonItemDivider);
 export const IonItemGroup = /*@__PURE__*/createReactComponent<JSX.IonItemGroup, HTMLIonItemGroupElement>('ion-item-group', undefined, undefined, defineIonItemGroup);
 export const IonItemOptions = /*@__PURE__*/createReactComponent<JSX.IonItemOptions, HTMLIonItemOptionsElement>('ion-item-options', undefined, undefined, defineIonItemOptions);
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -35,6 +35,7 @@ import { defineCustomElement as defineIonImg } from '@ionic/core/components/ion-
 import { defineCustomElement as defineIonInfiniteScroll } from '@ionic/core/components/ion-infinite-scroll.js';
 import { defineCustomElement as defineIonInfiniteScrollContent } from '@ionic/core/components/ion-infinite-scroll-content.js';
 import { defineCustomElement as defineIonInput } from '@ionic/core/components/ion-input.js';
+import { defineCustomElement as defineIonInputPasswordToggle } from '@ionic/core/components/ion-input-password-toggle.js';
 import { defineCustomElement as defineIonItem } from '@ionic/core/components/ion-item.js';
 import { defineCustomElement as defineIonItemDivider } from '@ionic/core/components/ion-item-divider.js';
 import { defineCustomElement as defineIonItemGroup } from '@ionic/core/components/ion-item-group.js';
@@ -216,6 +217,9 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
  'labelPlacement',
  'justify',
  'alignment',
+  'required',
+  'shape',
+  'size',
  'ionChange',
  'ionFocus',
  'ionBlur'
@@ -436,6 +440,14 @@ export const IonInput = /*@__PURE__*/ defineContainer<JSX.IonInput, JSX.IonInput
 'value', 'ion-input');


+export const IonInputPasswordToggle = /*@__PURE__*/ defineContainer<JSX.IonInputPasswordToggle>('ion-input-password-toggle', defineIonInputPasswordToggle, [
+  'color',
+  'showIcon',
+  'hideIcon',
+  'type'
+]);
+
+
 export const IonItem = /*@__PURE__*/ defineContainer<JSX.IonItem>('ion-item', defineIonItem, [
  'color',
  'button',
Author	SHA1	Message	Date
João Ferreira	f0aac276af	Merge branch 'next' into ROU-4822	2024-03-28 14:36:26 +00:00
Sean Perkins	6d6fd4af1b	chore: sync next with feature-8.0 (#29225 ) Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Syncs the `next` branch with the latest from `feature-8.0`. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->	2024-03-27 10:14:18 -04:00
Sean Perkins	7cfee535ac	chore(angular): update component wrappers output	2024-03-27 00:15:06 -04:00
Sean Perkins	167e311474	Merge remote-tracking branch 'origin/feature-8.0' into sp/sync-next-03-27	2024-03-27 00:13:38 -04:00
João Ferreira	8f6f9be500	- feedback improvements;	2024-03-26 10:46:28 +00:00
Shawn Taylor	e5ffb6f04b	lint	2024-03-25 14:25:19 -04:00
Liam DeBeasi	6c500fd6b2	feat(input): add input-password-toggle component (#29175 ) Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> When given a password input it is hard to know what users are typing as the contents of the input are obscured. As a result, it is a common pattern to have a button that lets users temporarily toggle the visibility of the password so they can correct any mistakes. Ionic currently has the infrastructure for developers to implement this on their own, but this use case is so common that the team thinks it is worth having this functionality built-in to Ionic. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Introduces the `ion-input-password-toggle` component. This component is a button that toggles the visibility of the text in the input it is slotted into. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> ⚠️ Give co-author credit to https://github.com/ionic-team/ionic-framework/pull/29141 on merge. Docs PR: https://github.com/ionic-team/ionic-docs/pull/3541 Note: We did not do the approach listed in the other PR due to https://github.com/ionic-team/ionic-framework/pull/29141#discussion_r1523631811. --------- Co-authored-by: OS-giulianasilva <OS-giulianasilva@users.noreply.github.com>	2024-03-25 13:22:06 -04:00
João Ferreira	730105964a	Add new theme to checkbox - add features for ionic theme of checkbox;	2024-03-25 13:06:30 +00:00
Liam DeBeasi	6e477b743e	refactor(searchbar): autocapitalize defaults to off (#29107 ) BREAKING CHANGE: The `autocapitalize` property on Searchbar now defaults to `'off'`.	2024-03-22 09:13:15 -04:00