feat(input-otp): convert to a form associated shadow component #30785 (#30884)

Issue number: internal

---------

## What is the current behavior?
Input Otp uses `scoped` encapsulation. This causes issues with CSP compatibility and is inconsistent with our goal of having all components use Shadow DOM.

## What is the new behavior?
- Converts `ion-input-otp` to `shadow` with `formAssociated: true`
- Adds shadow parts for inner elements

## Does this introduce a breaking change?
- [x] Yes
- [ ] No

BREAKING CHANGE:

Input Otp has been converted to use [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).

If you were targeting the internals of `ion-input-otp` in your CSS, you will need to target the `group`, `container`, `native`, `separator` or `description` [Shadow Parts](https://ionicframework.com/docs/theming/css-shadow-parts) instead, or use the provided CSS Variables.

---------

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

packages/angular/src/directives/proxies.ts

@@ -1043,7 +1043,7 @@ This event will not emit when programmatically setting the `value` property.
 
 
 @ProxyCmp({
-  inputs: ['autocapitalize', 'color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
+  inputs: ['autocapitalize', 'color', 'disabled', 'fill', 'inputmode', 'length', 'mode', 'pattern', 'readonly', 'separators', 'shape', 'size', 'theme', 'type', 'value'],
   methods: ['setFocus']
 })
 @Component({
@@ -1051,7 +1051,7 @@ This event will not emit when programmatically setting the `value` property.
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['autocapitalize', 'color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
+  inputs: ['autocapitalize', 'color', 'disabled', 'fill', 'inputmode', 'length', 'mode', 'pattern', 'readonly', 'separators', 'shape', 'size', 'theme', 'type', 'value'],
 })
 export class IonInputOtp {
   protected el: HTMLIonInputOtpElement;