mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00

Files

Brandy Smith 177a6ea134 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>

2026-02-05 13:54:05 -05:00

scripts

fix(overlays,picker): remove invalid aria-hidden attribute (#30563 )

2025-09-03 22:54:11 +00:00

src

Merge branch 'main' into chore/update-next-from-main

2025-12-17 13:25:59 -05:00

test

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

2026-02-05 13:54:05 -05:00

types

feat(slides): remove ion-slide, ion-slides, and IonicSwiper module (#25868 )

2022-09-01 14:36:17 -05:00

.eslintignore

chore(vue): add eslint and prettier (#26635 )

2023-01-18 18:29:25 -05:00

.eslintrc.js

chore(vue): add eslint and prettier (#26635 )

2023-01-18 18:29:25 -05:00

.prettierignore

chore(vue): add eslint and prettier (#26635 )

2023-01-18 18:29:25 -05:00

CHANGELOG.md

v8.7.15

2025-12-23 18:55:19 +00:00

package-lock.json

chore(): update package lock files

2025-12-23 18:55:54 +00:00

package.json

v8.7.15

2025-12-23 18:55:19 +00:00

README.md

docs(many): update Contributing links (#29498 )

2024-05-14 19:48:36 +00:00

rollup.config.mjs

fix(vue): update Stencil Vue output target (#30159 )

2025-01-29 16:31:31 +00:00

tsconfig.json

fix(vue): update Stencil Vue output target (#30159 )

2025-01-29 16:31:31 +00:00

README.md

@ionic/vue

Ionic Framework integration for Vue 3 apps.

Building

Install dependencies in @ionic/core:

cd core && npm install

Build @ionic/core. This will generate Vue component bindings in the packages/vue directory:

npm run build

Install dependencies in @ionic/vue:

cd packages/vue && npm install

Build @ionic/vue:

npm run build

Install dependencies in @ionic/vue-router:

cd packages/vue-router && npm install

Build @ionic/vue-router:

npm run build

Tests

E2E Tests are found in the packages/vue/test/base/tests directory and use Cypress.
When making changes to @ionic/vue or @ionic/vue-router you can run npm run sync in the test-app directory to ensure that the test application is using your built changes. Be sure to build in the vue and vue-router directories first.
Tests can be run in headless mode by running npm run cypress.
If you want to open the Cypress test runner, you can run node_modules/.bin/cypress open.
Bug fix and feature PRs should have new tests verifying the PR functionality.

Contributing

See our Contributing Guide.

Need Help?

Post your question on the Ionic Forum.