From 7fedef499658bf6718e350a53159e3c664d2fd35 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Tue, 13 May 2025 16:19:18 -0400
Subject: [PATCH 01/15] chore: hardcode dev build
---
plugins/docusaurus-plugin-ionic-component-api/index.js | 8 ++------
1 file changed, 2 insertions(+), 6 deletions(-)
diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js
index d6908d4a0d3..bd8dde80cb2 100644
--- a/plugins/docusaurus-plugin-ionic-component-api/index.js
+++ b/plugins/docusaurus-plugin-ionic-component-api/index.js
@@ -50,12 +50,8 @@ module.exports = function (context, options) {
await generateMarkdownForVersion(version, npmTag, false);
}
- let npmTag = 'latest';
- if (currentVersion.banner === 'unreleased') {
- npmTag = 'next';
- } else if (currentVersion.path !== undefined) {
- npmTag = currentVersion.path.slice(1);
- }
+ // TODO: remove this when 8.6 is released
+ let npmTag = '8.5.7-dev.11747094257.1dd7476b';
// Latest version
await generateMarkdownForVersion(currentVersion.path || currentVersion.label, npmTag, true);
From 679c68fd65b79cc9f2a9c1428c9b75c24718aed8 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Mon, 19 May 2025 17:21:42 -0400
Subject: [PATCH 02/15] docs(input-otp): add input-otp page and playgrounds
---
docs/api/input-otp.md | 100 ++++++++++++++++++
.../index.js | 4 +-
sidebars.js | 2 +-
.../code/stackblitz/v8/angular/package.json | 4 +-
static/code/stackblitz/v8/html/index.html | 4 +-
.../stackblitz/v8/html/index.withContent.html | 4 +-
static/code/stackblitz/v8/html/package.json | 2 +-
static/code/stackblitz/v8/react/package.json | 4 +-
static/code/stackblitz/v8/vue/package.json | 4 +-
.../basic/angular/example_component_html.md | 4 +
.../basic/angular/example_component_ts.md | 12 +++
static/usage/v8/input-otp/basic/demo.html | 36 +++++++
static/usage/v8/input-otp/basic/index.md | 24 +++++
static/usage/v8/input-otp/basic/javascript.md | 4 +
static/usage/v8/input-otp/basic/react.md | 20 ++++
static/usage/v8/input-otp/basic/vue.md | 10 ++
.../fill/angular/example_component_html.md | 3 +
.../fill/angular/example_component_ts.md | 12 +++
static/usage/v8/input-otp/fill/demo.html | 36 +++++++
static/usage/v8/input-otp/fill/index.md | 24 +++++
static/usage/v8/input-otp/fill/javascript.md | 3 +
static/usage/v8/input-otp/fill/react.md | 14 +++
static/usage/v8/input-otp/fill/vue.md | 10 ++
.../pattern/angular/example_component_html.md | 5 +
.../pattern/angular/example_component_ts.md | 12 +++
static/usage/v8/input-otp/pattern/demo.html | 37 +++++++
static/usage/v8/input-otp/pattern/index.md | 25 +++++
.../usage/v8/input-otp/pattern/javascript.md | 5 +
static/usage/v8/input-otp/pattern/react.md | 15 +++
static/usage/v8/input-otp/pattern/vue.md | 11 ++
.../angular/example_component_html.md | 5 +
.../angular/example_component_ts.md | 12 +++
.../usage/v8/input-otp/separators/demo.html | 39 +++++++
static/usage/v8/input-otp/separators/index.md | 25 +++++
.../v8/input-otp/separators/javascript.md | 5 +
static/usage/v8/input-otp/separators/react.md | 24 +++++
static/usage/v8/input-otp/separators/vue.md | 11 ++
.../shape/angular/example_component_html.md | 5 +
.../shape/angular/example_component_ts.md | 12 +++
static/usage/v8/input-otp/shape/demo.html | 37 +++++++
static/usage/v8/input-otp/shape/index.md | 25 +++++
static/usage/v8/input-otp/shape/javascript.md | 5 +
static/usage/v8/input-otp/shape/react.md | 15 +++
static/usage/v8/input-otp/shape/vue.md | 11 ++
.../size/angular/example_component_html.md | 5 +
.../size/angular/example_component_ts.md | 12 +++
static/usage/v8/input-otp/size/demo.html | 37 +++++++
static/usage/v8/input-otp/size/index.md | 25 +++++
static/usage/v8/input-otp/size/javascript.md | 5 +
static/usage/v8/input-otp/size/react.md | 15 +++
static/usage/v8/input-otp/size/vue.md | 11 ++
.../states/angular/example_component_html.md | 8 ++
.../states/angular/example_component_ts.md | 65 ++++++++++++
static/usage/v8/input-otp/states/demo.html | 75 +++++++++++++
static/usage/v8/input-otp/states/index.md | 25 +++++
.../usage/v8/input-otp/states/javascript.md | 43 ++++++++
static/usage/v8/input-otp/states/react.md | 42 ++++++++
static/usage/v8/input-otp/states/vue.md | 31 ++++++
.../colors/angular/example_component_html.md | 11 ++
.../colors/angular/example_component_ts.md | 12 +++
.../v8/input-otp/theming/colors/demo.html | 44 ++++++++
.../v8/input-otp/theming/colors/index.md | 25 +++++
.../v8/input-otp/theming/colors/javascript.md | 11 ++
.../v8/input-otp/theming/colors/react.md | 21 ++++
.../usage/v8/input-otp/theming/colors/vue.md | 18 ++++
.../angular/example_component_css.md | 16 +++
.../angular/example_component_html.md | 4 +
.../angular/example_component_ts.md | 12 +++
.../theming/css-properties/demo.html | 51 +++++++++
.../input-otp/theming/css-properties/index.md | 34 ++++++
.../theming/css-properties/javascript.md | 21 ++++
.../theming/css-properties/react/main_css.md | 16 +++
.../theming/css-properties/react/main_tsx.md | 16 +++
.../input-otp/theming/css-properties/vue.md | 28 +++++
.../type/angular/example_component_html.md | 3 +
.../type/angular/example_component_ts.md | 12 +++
static/usage/v8/input-otp/type/demo.html | 36 +++++++
static/usage/v8/input-otp/type/index.md | 24 +++++
static/usage/v8/input-otp/type/javascript.md | 3 +
static/usage/v8/input-otp/type/react.md | 14 +++
static/usage/v8/input-otp/type/vue.md | 10 ++
81 files changed, 1508 insertions(+), 14 deletions(-)
create mode 100644 docs/api/input-otp.md
create mode 100644 static/usage/v8/input-otp/basic/angular/example_component_html.md
create mode 100644 static/usage/v8/input-otp/basic/angular/example_component_ts.md
create mode 100644 static/usage/v8/input-otp/basic/demo.html
create mode 100644 static/usage/v8/input-otp/basic/index.md
create mode 100644 static/usage/v8/input-otp/basic/javascript.md
create mode 100644 static/usage/v8/input-otp/basic/react.md
create mode 100644 static/usage/v8/input-otp/basic/vue.md
create mode 100644 static/usage/v8/input-otp/fill/angular/example_component_html.md
create mode 100644 static/usage/v8/input-otp/fill/angular/example_component_ts.md
create mode 100644 static/usage/v8/input-otp/fill/demo.html
create mode 100644 static/usage/v8/input-otp/fill/index.md
create mode 100644 static/usage/v8/input-otp/fill/javascript.md
create mode 100644 static/usage/v8/input-otp/fill/react.md
create mode 100644 static/usage/v8/input-otp/fill/vue.md
create mode 100644 static/usage/v8/input-otp/pattern/angular/example_component_html.md
create mode 100644 static/usage/v8/input-otp/pattern/angular/example_component_ts.md
create mode 100644 static/usage/v8/input-otp/pattern/demo.html
create mode 100644 static/usage/v8/input-otp/pattern/index.md
create mode 100644 static/usage/v8/input-otp/pattern/javascript.md
create mode 100644 static/usage/v8/input-otp/pattern/react.md
create mode 100644 static/usage/v8/input-otp/pattern/vue.md
create mode 100644 static/usage/v8/input-otp/separators/angular/example_component_html.md
create mode 100644 static/usage/v8/input-otp/separators/angular/example_component_ts.md
create mode 100644 static/usage/v8/input-otp/separators/demo.html
create mode 100644 static/usage/v8/input-otp/separators/index.md
create mode 100644 static/usage/v8/input-otp/separators/javascript.md
create mode 100644 static/usage/v8/input-otp/separators/react.md
create mode 100644 static/usage/v8/input-otp/separators/vue.md
create mode 100644 static/usage/v8/input-otp/shape/angular/example_component_html.md
create mode 100644 static/usage/v8/input-otp/shape/angular/example_component_ts.md
create mode 100644 static/usage/v8/input-otp/shape/demo.html
create mode 100644 static/usage/v8/input-otp/shape/index.md
create mode 100644 static/usage/v8/input-otp/shape/javascript.md
create mode 100644 static/usage/v8/input-otp/shape/react.md
create mode 100644 static/usage/v8/input-otp/shape/vue.md
create mode 100644 static/usage/v8/input-otp/size/angular/example_component_html.md
create mode 100644 static/usage/v8/input-otp/size/angular/example_component_ts.md
create mode 100644 static/usage/v8/input-otp/size/demo.html
create mode 100644 static/usage/v8/input-otp/size/index.md
create mode 100644 static/usage/v8/input-otp/size/javascript.md
create mode 100644 static/usage/v8/input-otp/size/react.md
create mode 100644 static/usage/v8/input-otp/size/vue.md
create mode 100644 static/usage/v8/input-otp/states/angular/example_component_html.md
create mode 100644 static/usage/v8/input-otp/states/angular/example_component_ts.md
create mode 100644 static/usage/v8/input-otp/states/demo.html
create mode 100644 static/usage/v8/input-otp/states/index.md
create mode 100644 static/usage/v8/input-otp/states/javascript.md
create mode 100644 static/usage/v8/input-otp/states/react.md
create mode 100644 static/usage/v8/input-otp/states/vue.md
create mode 100644 static/usage/v8/input-otp/theming/colors/angular/example_component_html.md
create mode 100644 static/usage/v8/input-otp/theming/colors/angular/example_component_ts.md
create mode 100644 static/usage/v8/input-otp/theming/colors/demo.html
create mode 100644 static/usage/v8/input-otp/theming/colors/index.md
create mode 100644 static/usage/v8/input-otp/theming/colors/javascript.md
create mode 100644 static/usage/v8/input-otp/theming/colors/react.md
create mode 100644 static/usage/v8/input-otp/theming/colors/vue.md
create mode 100644 static/usage/v8/input-otp/theming/css-properties/angular/example_component_css.md
create mode 100644 static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md
create mode 100644 static/usage/v8/input-otp/theming/css-properties/angular/example_component_ts.md
create mode 100644 static/usage/v8/input-otp/theming/css-properties/demo.html
create mode 100644 static/usage/v8/input-otp/theming/css-properties/index.md
create mode 100644 static/usage/v8/input-otp/theming/css-properties/javascript.md
create mode 100644 static/usage/v8/input-otp/theming/css-properties/react/main_css.md
create mode 100644 static/usage/v8/input-otp/theming/css-properties/react/main_tsx.md
create mode 100644 static/usage/v8/input-otp/theming/css-properties/vue.md
create mode 100644 static/usage/v8/input-otp/type/angular/example_component_html.md
create mode 100644 static/usage/v8/input-otp/type/angular/example_component_ts.md
create mode 100644 static/usage/v8/input-otp/type/demo.html
create mode 100644 static/usage/v8/input-otp/type/index.md
create mode 100644 static/usage/v8/input-otp/type/javascript.md
create mode 100644 static/usage/v8/input-otp/type/react.md
create mode 100644 static/usage/v8/input-otp/type/vue.md
diff --git a/docs/api/input-otp.md b/docs/api/input-otp.md
new file mode 100644
index 00000000000..c34b6214c55
--- /dev/null
+++ b/docs/api/input-otp.md
@@ -0,0 +1,100 @@
+---
+title: "ion-input-otp"
+---
+import Props from '@ionic-internal/component-api/v8/input-otp/props.md';
+import Events from '@ionic-internal/component-api/v8/input-otp/events.md';
+import Methods from '@ionic-internal/component-api/v8/input-otp/methods.md';
+import Parts from '@ionic-internal/component-api/v8/input-otp/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/input-otp/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/input-otp/slots.md';
+
+
+ ion-input-otp: One-Time Password Input Component
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+The Input OTP component is a specialized input component designed for entering one-time passwords (OTP). It provides a user-friendly interface for entering verification codes with support for multiple input fields and automatic focus management.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v8/input-otp/basic/index.md';
+
+
+
+## Type
+
+import Type from '@site/static/usage/v8/input-otp/type/index.md';
+
+
+
+## Shape
+
+import Shape from '@site/static/usage/v8/input-otp/shape/index.md';
+
+
+
+## Fill
+
+import Fill from '@site/static/usage/v8/input-otp/fill/index.md';
+
+
+
+## Size
+
+import Size from '@site/static/usage/v8/input-otp/size/index.md';
+
+
+
+## Separators
+
+import Separators from '@site/static/usage/v8/input-otp/separators/index.md';
+
+
+
+## States
+
+import States from '@site/static/usage/v8/input-otp/states/index.md';
+
+
+
+## Pattern
+
+import Pattern from '@site/static/usage/v8/input-otp/pattern/index.md';
+
+
+
+## Theming
+
+### Colors
+
+import Colors from '@site/static/usage/v8/input-otp/theming/colors/index.md';
+
+
+
+### CSS Properties
+
+import CSSProperties from '@site/static/usage/v8/input-otp/theming/css-properties/index.md';
+
+
+
+## Properties
+
+
+## Events
+
+
+## Methods
+
+
+## CSS Shadow Parts
+
+
+## CSS Custom Properties
+
+
+## Slots
+
diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js
index bd8dde80cb2..14cc0b11220 100644
--- a/plugins/docusaurus-plugin-ionic-component-api/index.js
+++ b/plugins/docusaurus-plugin-ionic-component-api/index.js
@@ -50,8 +50,8 @@ module.exports = function (context, options) {
await generateMarkdownForVersion(version, npmTag, false);
}
- // TODO: remove this when 8.6 is released
- let npmTag = '8.5.7-dev.11747094257.1dd7476b';
+ // TODO: revert this before merging
+ let npmTag = '8.5.7-dev.11747676931.1d53b808';
// Latest version
await generateMarkdownForVersion(currentVersion.path || currentVersion.label, npmTag, true);
diff --git a/sidebars.js b/sidebars.js
index 5af37c7fce2..115eca21382 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -351,7 +351,7 @@ module.exports = {
type: 'category',
label: 'Input',
collapsed: false,
- items: ['api/input', 'api/input-password-toggle', 'api/textarea'],
+ items: ['api/input', 'api/input-password-toggle', 'api/input-otp', 'api/textarea'],
},
{
type: 'category',
diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json
index 66f002b4050..c85f0fbe3d8 100644
--- a/static/code/stackblitz/v8/angular/package.json
+++ b/static/code/stackblitz/v8/angular/package.json
@@ -15,8 +15,8 @@
"@angular/platform-browser": "^19.0.0",
"@angular/platform-browser-dynamic": "^19.0.0",
"@angular/router": "^19.0.0",
- "@ionic/angular": "8.5.7",
- "@ionic/core": "8.5.7",
+ "@ionic/angular": "8.5.7-dev.11747676931.1d53b808",
+ "@ionic/core": "8.5.7-dev.11747676931.1d53b808",
"ionicons": "8.0.8",
"rxjs": "^7.8.1",
"tslib": "^2.5.0",
diff --git a/static/code/stackblitz/v8/html/index.html b/static/code/stackblitz/v8/html/index.html
index 34f05146a9a..1370b796e30 100644
--- a/static/code/stackblitz/v8/html/index.html
+++ b/static/code/stackblitz/v8/html/index.html
@@ -1,8 +1,8 @@
-
-
+
+
diff --git a/static/code/stackblitz/v8/html/index.withContent.html b/static/code/stackblitz/v8/html/index.withContent.html
index e83c15e8ec9..a270474884f 100644
--- a/static/code/stackblitz/v8/html/index.withContent.html
+++ b/static/code/stackblitz/v8/html/index.withContent.html
@@ -1,8 +1,8 @@
-
-
+
+
diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json
index 4d9204f751d..afe65dbc674 100644
--- a/static/code/stackblitz/v8/html/package.json
+++ b/static/code/stackblitz/v8/html/package.json
@@ -1,6 +1,6 @@
{
"dependencies": {
- "@ionic/core": "8.5.7",
+ "@ionic/core": "8.5.7-dev.11747676931.1d53b808",
"ionicons": "8.0.8"
}
}
diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json
index ecb67d33b0a..012b3b61e84 100644
--- a/static/code/stackblitz/v8/react/package.json
+++ b/static/code/stackblitz/v8/react/package.json
@@ -3,8 +3,8 @@
"version": "0.1.0",
"private": true,
"dependencies": {
- "@ionic/react": "8.5.7",
- "@ionic/react-router": "8.5.7",
+ "@ionic/react": "8.5.7-dev.11747676931.1d53b808",
+ "@ionic/react-router": "8.5.7-dev.11747676931.1d53b808",
"@types/node": "^22.0.0",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json
index ce7ab1a7b3f..2fbbab67e0a 100644
--- a/static/code/stackblitz/v8/vue/package.json
+++ b/static/code/stackblitz/v8/vue/package.json
@@ -8,8 +8,8 @@
"preview": "vite preview"
},
"dependencies": {
- "@ionic/vue": "8.5.7",
- "@ionic/vue-router": "8.5.7",
+ "@ionic/vue": "8.5.7-dev.11747676931.1d53b808",
+ "@ionic/vue-router": "8.5.7-dev.11747676931.1d53b808",
"vue": "^3.2.25",
"vue-router": "4.5.1"
},
diff --git a/static/usage/v8/input-otp/basic/angular/example_component_html.md b/static/usage/v8/input-otp/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..e915f538363
--- /dev/null
+++ b/static/usage/v8/input-otp/basic/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+```
diff --git a/static/usage/v8/input-otp/basic/angular/example_component_ts.md b/static/usage/v8/input-otp/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..1054a9eb61c
--- /dev/null
+++ b/static/usage/v8/input-otp/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input-otp/basic/demo.html b/static/usage/v8/input-otp/basic/demo.html
new file mode 100644
index 00000000000..624a933218d
--- /dev/null
+++ b/static/usage/v8/input-otp/basic/demo.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+ Input OTP
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/input-otp/basic/index.md b/static/usage/v8/input-otp/basic/index.md
new file mode 100644
index 00000000000..c5b62338fb5
--- /dev/null
+++ b/static/usage/v8/input-otp/basic/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v8/input-otp/basic/javascript.md b/static/usage/v8/input-otp/basic/javascript.md
new file mode 100644
index 00000000000..e915f538363
--- /dev/null
+++ b/static/usage/v8/input-otp/basic/javascript.md
@@ -0,0 +1,4 @@
+```html
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+```
diff --git a/static/usage/v8/input-otp/basic/react.md b/static/usage/v8/input-otp/basic/react.md
new file mode 100644
index 00000000000..8cbc39e2b7b
--- /dev/null
+++ b/static/usage/v8/input-otp/basic/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ {' '}
+ Didn't get a code? Resend the code {' '}
+
+
+ {' '}
+ Didn't get a code? Resend the code {' '}
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input-otp/basic/vue.md b/static/usage/v8/input-otp/basic/vue.md
new file mode 100644
index 00000000000..c1ceb4fa5b1
--- /dev/null
+++ b/static/usage/v8/input-otp/basic/vue.md
@@ -0,0 +1,10 @@
+```html
+
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+
+
+
+```
diff --git a/static/usage/v8/input-otp/fill/angular/example_component_html.md b/static/usage/v8/input-otp/fill/angular/example_component_html.md
new file mode 100644
index 00000000000..705348532cb
--- /dev/null
+++ b/static/usage/v8/input-otp/fill/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+ Outline Solid
+```
diff --git a/static/usage/v8/input-otp/fill/angular/example_component_ts.md b/static/usage/v8/input-otp/fill/angular/example_component_ts.md
new file mode 100644
index 00000000000..1054a9eb61c
--- /dev/null
+++ b/static/usage/v8/input-otp/fill/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input-otp/fill/demo.html b/static/usage/v8/input-otp/fill/demo.html
new file mode 100644
index 00000000000..ea815b9f529
--- /dev/null
+++ b/static/usage/v8/input-otp/fill/demo.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+ Input OTP
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Outline
+ Solid
+
+
+
+
+
diff --git a/static/usage/v8/input-otp/fill/index.md b/static/usage/v8/input-otp/fill/index.md
new file mode 100644
index 00000000000..0193e676b03
--- /dev/null
+++ b/static/usage/v8/input-otp/fill/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v8/input-otp/fill/javascript.md b/static/usage/v8/input-otp/fill/javascript.md
new file mode 100644
index 00000000000..705348532cb
--- /dev/null
+++ b/static/usage/v8/input-otp/fill/javascript.md
@@ -0,0 +1,3 @@
+```html
+ Outline Solid
+```
diff --git a/static/usage/v8/input-otp/fill/react.md b/static/usage/v8/input-otp/fill/react.md
new file mode 100644
index 00000000000..06171508008
--- /dev/null
+++ b/static/usage/v8/input-otp/fill/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Outline
+ Solid
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input-otp/fill/vue.md b/static/usage/v8/input-otp/fill/vue.md
new file mode 100644
index 00000000000..387e6edc050
--- /dev/null
+++ b/static/usage/v8/input-otp/fill/vue.md
@@ -0,0 +1,10 @@
+```html
+
+ Outline
+ Solid
+
+
+
+```
diff --git a/static/usage/v8/input-otp/pattern/angular/example_component_html.md b/static/usage/v8/input-otp/pattern/angular/example_component_html.md
new file mode 100644
index 00000000000..1e7bb56e282
--- /dev/null
+++ b/static/usage/v8/input-otp/pattern/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+ Numbers 1-4 only
+ Letters only
+ Letters D-L only
+```
diff --git a/static/usage/v8/input-otp/pattern/angular/example_component_ts.md b/static/usage/v8/input-otp/pattern/angular/example_component_ts.md
new file mode 100644
index 00000000000..1054a9eb61c
--- /dev/null
+++ b/static/usage/v8/input-otp/pattern/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input-otp/pattern/demo.html b/static/usage/v8/input-otp/pattern/demo.html
new file mode 100644
index 00000000000..239e1e1d321
--- /dev/null
+++ b/static/usage/v8/input-otp/pattern/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+ Input OTP
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Numbers 1-4 only
+ Letters only
+ Letters D-L only
+
+
+
+
+
diff --git a/static/usage/v8/input-otp/pattern/index.md b/static/usage/v8/input-otp/pattern/index.md
new file mode 100644
index 00000000000..7092e781ad2
--- /dev/null
+++ b/static/usage/v8/input-otp/pattern/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v8/input-otp/pattern/javascript.md b/static/usage/v8/input-otp/pattern/javascript.md
new file mode 100644
index 00000000000..1e7bb56e282
--- /dev/null
+++ b/static/usage/v8/input-otp/pattern/javascript.md
@@ -0,0 +1,5 @@
+```html
+ Numbers 1-4 only
+ Letters only
+ Letters D-L only
+```
diff --git a/static/usage/v8/input-otp/pattern/react.md b/static/usage/v8/input-otp/pattern/react.md
new file mode 100644
index 00000000000..c9d64a267bf
--- /dev/null
+++ b/static/usage/v8/input-otp/pattern/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Numbers 1-4 only
+ Letters only
+ Letters D-L only
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input-otp/pattern/vue.md b/static/usage/v8/input-otp/pattern/vue.md
new file mode 100644
index 00000000000..0fdfd6fe6d2
--- /dev/null
+++ b/static/usage/v8/input-otp/pattern/vue.md
@@ -0,0 +1,11 @@
+```html
+
+ Numbers 1-4 only
+ Letters only
+ Letters D-L only
+
+
+
+```
diff --git a/static/usage/v8/input-otp/separators/angular/example_component_html.md b/static/usage/v8/input-otp/separators/angular/example_component_html.md
new file mode 100644
index 00000000000..35d7762c50b
--- /dev/null
+++ b/static/usage/v8/input-otp/separators/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+```
diff --git a/static/usage/v8/input-otp/separators/angular/example_component_ts.md b/static/usage/v8/input-otp/separators/angular/example_component_ts.md
new file mode 100644
index 00000000000..1054a9eb61c
--- /dev/null
+++ b/static/usage/v8/input-otp/separators/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input-otp/separators/demo.html b/static/usage/v8/input-otp/separators/demo.html
new file mode 100644
index 00000000000..14f536c49a3
--- /dev/null
+++ b/static/usage/v8/input-otp/separators/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+ Input OTP
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/input-otp/separators/index.md b/static/usage/v8/input-otp/separators/index.md
new file mode 100644
index 00000000000..7bdb7809020
--- /dev/null
+++ b/static/usage/v8/input-otp/separators/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v8/input-otp/separators/javascript.md b/static/usage/v8/input-otp/separators/javascript.md
new file mode 100644
index 00000000000..35d7762c50b
--- /dev/null
+++ b/static/usage/v8/input-otp/separators/javascript.md
@@ -0,0 +1,5 @@
+```html
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+```
diff --git a/static/usage/v8/input-otp/separators/react.md b/static/usage/v8/input-otp/separators/react.md
new file mode 100644
index 00000000000..4dfec79f0fb
--- /dev/null
+++ b/static/usage/v8/input-otp/separators/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ {' '}
+ Didn't get a code? Resend the code {' '}
+
+
+ {' '}
+ Didn't get a code? Resend the code {' '}
+
+
+ {' '}
+ Didn't get a code? Resend the code {' '}
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input-otp/separators/vue.md b/static/usage/v8/input-otp/separators/vue.md
new file mode 100644
index 00000000000..6130e23e9b9
--- /dev/null
+++ b/static/usage/v8/input-otp/separators/vue.md
@@ -0,0 +1,11 @@
+```html
+
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+
+
+
+```
diff --git a/static/usage/v8/input-otp/shape/angular/example_component_html.md b/static/usage/v8/input-otp/shape/angular/example_component_html.md
new file mode 100644
index 00000000000..1f81f9cc5fe
--- /dev/null
+++ b/static/usage/v8/input-otp/shape/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+ Round
+ Soft
+ Rectangular
+```
diff --git a/static/usage/v8/input-otp/shape/angular/example_component_ts.md b/static/usage/v8/input-otp/shape/angular/example_component_ts.md
new file mode 100644
index 00000000000..1054a9eb61c
--- /dev/null
+++ b/static/usage/v8/input-otp/shape/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input-otp/shape/demo.html b/static/usage/v8/input-otp/shape/demo.html
new file mode 100644
index 00000000000..6338c565e93
--- /dev/null
+++ b/static/usage/v8/input-otp/shape/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+ Input OTP
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Round
+ Soft
+ Rectangular
+
+
+
+
+
diff --git a/static/usage/v8/input-otp/shape/index.md b/static/usage/v8/input-otp/shape/index.md
new file mode 100644
index 00000000000..fe35766a39c
--- /dev/null
+++ b/static/usage/v8/input-otp/shape/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v8/input-otp/shape/javascript.md b/static/usage/v8/input-otp/shape/javascript.md
new file mode 100644
index 00000000000..1f81f9cc5fe
--- /dev/null
+++ b/static/usage/v8/input-otp/shape/javascript.md
@@ -0,0 +1,5 @@
+```html
+ Round
+ Soft
+ Rectangular
+```
diff --git a/static/usage/v8/input-otp/shape/react.md b/static/usage/v8/input-otp/shape/react.md
new file mode 100644
index 00000000000..da104a6231e
--- /dev/null
+++ b/static/usage/v8/input-otp/shape/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Round
+ Soft
+ Rectangular
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input-otp/shape/vue.md b/static/usage/v8/input-otp/shape/vue.md
new file mode 100644
index 00000000000..3d5e70d516a
--- /dev/null
+++ b/static/usage/v8/input-otp/shape/vue.md
@@ -0,0 +1,11 @@
+```html
+
+ Round
+ Soft
+ Rectangular
+
+
+
+```
diff --git a/static/usage/v8/input-otp/size/angular/example_component_html.md b/static/usage/v8/input-otp/size/angular/example_component_html.md
new file mode 100644
index 00000000000..340cbf8f58e
--- /dev/null
+++ b/static/usage/v8/input-otp/size/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+ Small
+ Medium
+ Large
+```
diff --git a/static/usage/v8/input-otp/size/angular/example_component_ts.md b/static/usage/v8/input-otp/size/angular/example_component_ts.md
new file mode 100644
index 00000000000..1054a9eb61c
--- /dev/null
+++ b/static/usage/v8/input-otp/size/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input-otp/size/demo.html b/static/usage/v8/input-otp/size/demo.html
new file mode 100644
index 00000000000..f0bf625232b
--- /dev/null
+++ b/static/usage/v8/input-otp/size/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+ Input OTP
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Small
+ Medium
+ Large
+
+
+
+
+
diff --git a/static/usage/v8/input-otp/size/index.md b/static/usage/v8/input-otp/size/index.md
new file mode 100644
index 00000000000..6e2905e4b10
--- /dev/null
+++ b/static/usage/v8/input-otp/size/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v8/input-otp/size/javascript.md b/static/usage/v8/input-otp/size/javascript.md
new file mode 100644
index 00000000000..340cbf8f58e
--- /dev/null
+++ b/static/usage/v8/input-otp/size/javascript.md
@@ -0,0 +1,5 @@
+```html
+ Small
+ Medium
+ Large
+```
diff --git a/static/usage/v8/input-otp/size/react.md b/static/usage/v8/input-otp/size/react.md
new file mode 100644
index 00000000000..a48763ca483
--- /dev/null
+++ b/static/usage/v8/input-otp/size/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Small
+ Medium
+ Large
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input-otp/size/vue.md b/static/usage/v8/input-otp/size/vue.md
new file mode 100644
index 00000000000..97b45f6de2a
--- /dev/null
+++ b/static/usage/v8/input-otp/size/vue.md
@@ -0,0 +1,11 @@
+```html
+
+ Small
+ Medium
+ Large
+
+
+
+```
diff --git a/static/usage/v8/input-otp/states/angular/example_component_html.md b/static/usage/v8/input-otp/states/angular/example_component_html.md
new file mode 100644
index 00000000000..a482162948b
--- /dev/null
+++ b/static/usage/v8/input-otp/states/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+ Disabled
+ Readonly
+
+```
diff --git a/static/usage/v8/input-otp/states/angular/example_component_ts.md b/static/usage/v8/input-otp/states/angular/example_component_ts.md
new file mode 100644
index 00000000000..893336d9a34
--- /dev/null
+++ b/static/usage/v8/input-otp/states/angular/example_component_ts.md
@@ -0,0 +1,65 @@
+```ts
+import { Component, OnInit } from '@angular/core';
+import {
+ FormBuilder,
+ FormGroup,
+ FormsModule,
+ ReactiveFormsModule,
+ Validators,
+ AbstractControl,
+ ValidationErrors,
+} from '@angular/forms';
+import { IonInputOtp } from '@ionic/angular/standalone';
+
+function otpRequiredLength(length: number) {
+ return (control: AbstractControl): ValidationErrors | null => {
+ const value = control.value;
+ if (!value || value.toString().length !== length) {
+ return { otpLength: true };
+ }
+ return null;
+ };
+}
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp, ReactiveFormsModule, FormsModule],
+})
+export class ExampleComponent implements OnInit {
+ myForm: FormGroup;
+
+ constructor(private fb: FormBuilder) {
+ this.myForm = this.fb.group({
+ first: [12, [Validators.required, otpRequiredLength(4)]],
+ second: [1234, [Validators.required, otpRequiredLength(4)]],
+ });
+ }
+
+ ngOnInit() {
+ this.markFormGroupTouched(this.myForm);
+ }
+
+ markFormGroupTouched(formGroup: FormGroup) {
+ Object.keys(formGroup.controls).forEach((key) => {
+ const control = formGroup.get(key);
+ if (control) {
+ control.markAsTouched();
+ }
+ });
+ }
+
+ getValidationText(controlName: string): string {
+ const control = this.myForm.get(controlName);
+ if (!control) return '';
+
+ if (control.valid && control.value) {
+ return 'Valid';
+ } else if (control.invalid && control.touched) {
+ return 'Invalid';
+ }
+ return '';
+ }
+}
+```
diff --git a/static/usage/v8/input-otp/states/demo.html b/static/usage/v8/input-otp/states/demo.html
new file mode 100644
index 00000000000..a6fedd5a031
--- /dev/null
+++ b/static/usage/v8/input-otp/states/demo.html
@@ -0,0 +1,75 @@
+
+
+
+
+
+ Input OTP
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Disabled
+ Readonly
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/input-otp/states/index.md b/static/usage/v8/input-otp/states/index.md
new file mode 100644
index 00000000000..86e62525c96
--- /dev/null
+++ b/static/usage/v8/input-otp/states/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v8/input-otp/states/javascript.md b/static/usage/v8/input-otp/states/javascript.md
new file mode 100644
index 00000000000..8c5576b0420
--- /dev/null
+++ b/static/usage/v8/input-otp/states/javascript.md
@@ -0,0 +1,43 @@
+```html
+ Disabled
+ Readonly
+
+
+
+
+```
diff --git a/static/usage/v8/input-otp/states/react.md b/static/usage/v8/input-otp/states/react.md
new file mode 100644
index 00000000000..b532bc62625
--- /dev/null
+++ b/static/usage/v8/input-otp/states/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React, { useState } from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ const [inputs, setInputs] = useState([
+ { value: '12' },
+ { value: '1234' }
+ ]);
+
+ const getValidationState = (value: string) => ({
+ class: value.length === 4 ? 'ion-valid' : 'ion-invalid',
+ text: value.length === 4 ? 'Valid' : 'Invalid'
+ });
+
+ const handleInput = (index: number, value: string) => {
+ setInputs(prev => prev.map((input, i) =>
+ i === index ? { ...input, value } : input
+ ));
+ };
+
+ return (
+ <>
+ Disabled
+ Readonly
+
+ {inputs.map((input, index) => (
+ handleInput(index, e.detail.value!)}
+ className={`ion-touched ${index === 1 ? 'has-focus' : ''} ${getValidationState(input.value).class}`}
+ >
+ {getValidationState(input.value).text}
+
+ ))}
+ >
+ );
+}
+
+export default Example;
+```
diff --git a/static/usage/v8/input-otp/states/vue.md b/static/usage/v8/input-otp/states/vue.md
new file mode 100644
index 00000000000..72ec224236d
--- /dev/null
+++ b/static/usage/v8/input-otp/states/vue.md
@@ -0,0 +1,31 @@
+```html
+
+ Disabled
+ Readonly
+
+ input.value = e.target.value"
+ >
+ {{ getValidationMessage(input.value) }}
+
+
+
+
+```
diff --git a/static/usage/v8/input-otp/theming/colors/angular/example_component_html.md b/static/usage/v8/input-otp/theming/colors/angular/example_component_html.md
new file mode 100644
index 00000000000..eb86c698eac
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/colors/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+```
diff --git a/static/usage/v8/input-otp/theming/colors/angular/example_component_ts.md b/static/usage/v8/input-otp/theming/colors/angular/example_component_ts.md
new file mode 100644
index 00000000000..1054a9eb61c
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/colors/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input-otp/theming/colors/demo.html b/static/usage/v8/input-otp/theming/colors/demo.html
new file mode 100644
index 00000000000..07ab32060e9
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/colors/demo.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+ Badge
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+
+
diff --git a/static/usage/v8/input-otp/theming/colors/index.md b/static/usage/v8/input-otp/theming/colors/index.md
new file mode 100644
index 00000000000..df9d567e10d
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/colors/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v8/input-otp/theming/colors/javascript.md b/static/usage/v8/input-otp/theming/colors/javascript.md
new file mode 100644
index 00000000000..eb86c698eac
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/colors/javascript.md
@@ -0,0 +1,11 @@
+```html
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+```
diff --git a/static/usage/v8/input-otp/theming/colors/react.md b/static/usage/v8/input-otp/theming/colors/react.md
new file mode 100644
index 00000000000..b411a3c7474
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/colors/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input-otp/theming/colors/vue.md b/static/usage/v8/input-otp/theming/colors/vue.md
new file mode 100644
index 00000000000..2a25080c8ef
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/colors/vue.md
@@ -0,0 +1,18 @@
+```html
+
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+```
diff --git a/static/usage/v8/input-otp/theming/css-properties/angular/example_component_css.md b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..1e1c85a1143
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,16 @@
+```css
+ion-input-otp.custom {
+ --separator-color: rgb(90, 23, 237, 0.12);
+ --highlight-color-focused: #5a17ed;
+}
+
+.input-otp-fill-outline.custom {
+ --border-color: rgb(90, 23, 237, 0.6);
+ --color: #5a17ed;
+}
+
+.input-otp-fill-solid.custom {
+ --border-color: rgb(90, 23, 237, 0.12);
+ --background: rgb(90, 23, 237, 0.12);
+}
+```
diff --git a/static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..fdcf2fcb860
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+```
diff --git a/static/usage/v8/input-otp/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..1054a9eb61c
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input-otp/theming/css-properties/demo.html b/static/usage/v8/input-otp/theming/css-properties/demo.html
new file mode 100644
index 00000000000..f142836e7c8
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/css-properties/demo.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+ Select - Styling the Select
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/input-otp/theming/css-properties/index.md b/static/usage/v8/input-otp/theming/css-properties/index.md
new file mode 100644
index 00000000000..a66003c1c43
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v8/input-otp/theming/css-properties/javascript.md b/static/usage/v8/input-otp/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..730893a4776
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/css-properties/javascript.md
@@ -0,0 +1,21 @@
+```html
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+
+
+```
diff --git a/static/usage/v8/input-otp/theming/css-properties/react/main_css.md b/static/usage/v8/input-otp/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..1e1c85a1143
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/css-properties/react/main_css.md
@@ -0,0 +1,16 @@
+```css
+ion-input-otp.custom {
+ --separator-color: rgb(90, 23, 237, 0.12);
+ --highlight-color-focused: #5a17ed;
+}
+
+.input-otp-fill-outline.custom {
+ --border-color: rgb(90, 23, 237, 0.6);
+ --color: #5a17ed;
+}
+
+.input-otp-fill-solid.custom {
+ --border-color: rgb(90, 23, 237, 0.12);
+ --background: rgb(90, 23, 237, 0.12);
+}
+```
diff --git a/static/usage/v8/input-otp/theming/css-properties/react/main_tsx.md b/static/usage/v8/input-otp/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..ebfd5c64d62
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input-otp/theming/css-properties/vue.md b/static/usage/v8/input-otp/theming/css-properties/vue.md
new file mode 100644
index 00000000000..d3548a7355e
--- /dev/null
+++ b/static/usage/v8/input-otp/theming/css-properties/vue.md
@@ -0,0 +1,28 @@
+```html
+
+ Didn't get a code? Resend the code
+ Didn't get a code? Resend the code
+
+
+
+
+
+```
diff --git a/static/usage/v8/input-otp/type/angular/example_component_html.md b/static/usage/v8/input-otp/type/angular/example_component_html.md
new file mode 100644
index 00000000000..8871303bb1f
--- /dev/null
+++ b/static/usage/v8/input-otp/type/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+ Numbers only Letters and numbers
+```
diff --git a/static/usage/v8/input-otp/type/angular/example_component_ts.md b/static/usage/v8/input-otp/type/angular/example_component_ts.md
new file mode 100644
index 00000000000..1054a9eb61c
--- /dev/null
+++ b/static/usage/v8/input-otp/type/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonInputOtp } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonInputOtp],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/input-otp/type/demo.html b/static/usage/v8/input-otp/type/demo.html
new file mode 100644
index 00000000000..f08f9e8d90f
--- /dev/null
+++ b/static/usage/v8/input-otp/type/demo.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+ Input OTP
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Numbers only
+ Letters and numbers
+
+
+
+
+
diff --git a/static/usage/v8/input-otp/type/index.md b/static/usage/v8/input-otp/type/index.md
new file mode 100644
index 00000000000..489fdeff3e3
--- /dev/null
+++ b/static/usage/v8/input-otp/type/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+
diff --git a/static/usage/v8/input-otp/type/javascript.md b/static/usage/v8/input-otp/type/javascript.md
new file mode 100644
index 00000000000..8871303bb1f
--- /dev/null
+++ b/static/usage/v8/input-otp/type/javascript.md
@@ -0,0 +1,3 @@
+```html
+ Numbers only Letters and numbers
+```
diff --git a/static/usage/v8/input-otp/type/react.md b/static/usage/v8/input-otp/type/react.md
new file mode 100644
index 00000000000..6408687fe7b
--- /dev/null
+++ b/static/usage/v8/input-otp/type/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonInputOtp } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Numbers only
+ Letters and numbers
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input-otp/type/vue.md b/static/usage/v8/input-otp/type/vue.md
new file mode 100644
index 00000000000..95a420f7549
--- /dev/null
+++ b/static/usage/v8/input-otp/type/vue.md
@@ -0,0 +1,10 @@
+```html
+
+ Numbers only
+ Letters and numbers
+
+
+
+```
From 4ffc107df954022e61f4a4719d4048867115e827 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Mon, 19 May 2025 17:31:20 -0400
Subject: [PATCH 03/15] style: lint
---
static/usage/v8/input-otp/pattern/react.md | 8 ++++++--
static/usage/v8/input-otp/states/react.md | 19 +++++++++----------
.../v8/input-otp/theming/colors/react.md | 18 +++++++++---------
.../angular/example_component_html.md | 4 +++-
.../theming/css-properties/demo.html | 8 ++++++--
.../theming/css-properties/javascript.md | 4 +++-
.../theming/css-properties/react/main_tsx.md | 8 ++++++--
.../input-otp/theming/css-properties/vue.md | 4 +++-
8 files changed, 45 insertions(+), 28 deletions(-)
diff --git a/static/usage/v8/input-otp/pattern/react.md b/static/usage/v8/input-otp/pattern/react.md
index c9d64a267bf..7a2b5c4424b 100644
--- a/static/usage/v8/input-otp/pattern/react.md
+++ b/static/usage/v8/input-otp/pattern/react.md
@@ -6,8 +6,12 @@ function Example() {
return (
<>
Numbers 1-4 only
- Letters only
- Letters D-L only
+
+ Letters only
+
+
+ Letters D-L only
+
>
);
}
diff --git a/static/usage/v8/input-otp/states/react.md b/static/usage/v8/input-otp/states/react.md
index b532bc62625..ae310c2c1ef 100644
--- a/static/usage/v8/input-otp/states/react.md
+++ b/static/usage/v8/input-otp/states/react.md
@@ -3,26 +3,25 @@ import React, { useState } from 'react';
import { IonInputOtp } from '@ionic/react';
function Example() {
- const [inputs, setInputs] = useState([
- { value: '12' },
- { value: '1234' }
- ]);
+ const [inputs, setInputs] = useState([{ value: '12' }, { value: '1234' }]);
const getValidationState = (value: string) => ({
class: value.length === 4 ? 'ion-valid' : 'ion-invalid',
- text: value.length === 4 ? 'Valid' : 'Invalid'
+ text: value.length === 4 ? 'Valid' : 'Invalid',
});
const handleInput = (index: number, value: string) => {
- setInputs(prev => prev.map((input, i) =>
- i === index ? { ...input, value } : input
- ));
+ setInputs((prev) => prev.map((input, i) => (i === index ? { ...input, value } : input)));
};
return (
<>
- Disabled
- Readonly
+
+ Disabled
+
+
+ Readonly
+
{inputs.map((input, index) => (
- Primary
- Secondary
- Tertiary
- Success
- Warning
- Danger
- Light
- Medium
- Dark
+ Primary
+ Secondary
+ Tertiary
+ Success
+ >Warning
+ Danger
+ Light
+ Medium
+ Dark
>
);
}
diff --git a/static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md
index fdcf2fcb860..b1852f16cfc 100644
--- a/static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md
+++ b/static/usage/v8/input-otp/theming/css-properties/angular/example_component_html.md
@@ -1,4 +1,6 @@
```html
Didn't get a code? Resend the code
- Didn't get a code? Resend the code
+
+ Didn't get a code? Resend the code
+
```
diff --git a/static/usage/v8/input-otp/theming/css-properties/demo.html b/static/usage/v8/input-otp/theming/css-properties/demo.html
index f142836e7c8..d210b863651 100644
--- a/static/usage/v8/input-otp/theming/css-properties/demo.html
+++ b/static/usage/v8/input-otp/theming/css-properties/demo.html
@@ -42,8 +42,12 @@
diff --git a/static/usage/v8/input-otp/theming/css-properties/javascript.md b/static/usage/v8/input-otp/theming/css-properties/javascript.md
index 730893a4776..01a652f035b 100644
--- a/static/usage/v8/input-otp/theming/css-properties/javascript.md
+++ b/static/usage/v8/input-otp/theming/css-properties/javascript.md
@@ -1,6 +1,8 @@
```html
Didn't get a code? Resend the code
- Didn't get a code? Resend the code
+
+ Didn't get a code? Resend the code
+