diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 42a30bb3a6f..b1f04ad75d3 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -12,5 +12,3 @@
# This should make it easy to add new rules without breaking existing ones.
* @ionic-team/framework
-
-/_templates/ @mapsandapps
diff --git a/_templates/README.md b/_templates/README.md
index 0e91373099f..60a3ebef83d 100644
--- a/_templates/README.md
+++ b/_templates/README.md
@@ -26,7 +26,7 @@ Once you've generated your playground, you need to add it to the main markdown f
```
## Feature
-import Feature from '@site/static/usage/v7/button/feature/index.md';
+import Feature from '@site/static/usage/v8/button/feature/index.md';
blocks.
*/
readme = readme.replaceAll(//g, '').replace(/(.*?)<\/code>/g, (_match, p1) => {
diff --git a/sidebars.js b/sidebars.js
index c18ef32a509..38e6ae70f14 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -10,7 +10,7 @@ module.exports = {
type: 'category',
label: 'アップグレードガイド',
collapsed: false,
- items: ['updating/7-0', 'updating/6-0', 'updating/5-0', 'updating/4-0'],
+ items: ['updating/8-0', 'updating/7-0', 'updating/6-0', 'updating/5-0', 'updating/4-0'],
},
{
type: 'category',
@@ -57,6 +57,7 @@ module.exports = {
'theming/colors',
'theming/themes',
'theming/dark-mode',
+ 'theming/high-contrast-mode',
'theming/advanced',
'theming/color-generator',
],
@@ -314,7 +315,14 @@ module.exports = {
type: 'category',
label: '日付 & タイムピッカー',
collapsed: false,
- items: ['api/datetime', 'api/datetime-button', 'api/picker'],
+ items: [
+ 'api/datetime',
+ 'api/datetime-button',
+ 'api/picker',
+ 'api/picker-column',
+ 'api/picker-column-option',
+ 'api/picker-legacy',
+ ],
},
{
type: 'category',
@@ -344,7 +352,7 @@ module.exports = {
type: 'category',
label: 'インプット',
collapsed: false,
- items: ['api/input', 'api/textarea'],
+ items: ['api/input', 'api/input-password-toggle', 'api/textarea'],
},
{
type: 'category',
diff --git a/src/components/page/reference/ReleaseNotes/release-notes.json b/src/components/page/reference/ReleaseNotes/release-notes.json
index 909c46e3321..95c66aa4147 100644
--- a/src/components/page/reference/ReleaseNotes/release-notes.json
+++ b/src/components/page/reference/ReleaseNotes/release-notes.json
@@ -1,51 +1,114 @@
[
{
- "name": "v7.6.4",
- "published_at": "January 10 2024",
- "tag_name": "v7.6.4",
+ "body": "Bug Fixes
\n\n",
+ "name": "v7.8.2",
+ "published_at": "March 27 2024",
+ "tag_name": "v7.8.2",
"type": "patch",
- "version": "7.6.4"
+ "version": "7.8.2"
},
{
- "name": "v7.6.3",
- "published_at": "January 3 2024",
- "tag_name": "v7.6.3",
+ "body": "Bug Fixes
\n\n- datetime: wheel picker shows consistently in overlays (#29147) (19c1bc1), closes #26234
\n- header: iOS headers in MD app are not hidden (#29164) (fdfecd3), closes #28867
\n- react: avoid definitely typed errors with @types/react@18 (#29182) (58d217d), closes #29178
\n
\nPerformance Improvements
\n\n",
+ "name": "v7.8.1",
+ "published_at": "March 20 2024",
+ "tag_name": "v7.8.1",
"type": "patch",
- "version": "7.6.3"
+ "version": "7.8.1"
+ },
+ {
+ "body": "Features
\n\n- datetime: formatOptions property for Datetime (#29065) (7cdbc1b)
\n- searchbar: autocapitalize, dir, lang, maxlength, and minlength are inherited to native input (#29098) (a0a77f7), closes #27606
\n
\n",
+ "name": "v7.8.0",
+ "published_at": "March 13 2024",
+ "tag_name": "v7.8.0",
+ "type": "minor",
+ "version": "7.8.0"
},
{
- "name": "v7.6.2",
- "published_at": "December 19 2023",
- "tag_name": "v7.6.2",
+ "body": "Bug Fixes
\n\n- angular: add ionNavWillChange and ionNavDidChange types for nav (#29122) (85b9d5c), closes #29114
\n- checkbox: set aria-checked of indeterminate checkbox to 'mixed' (#29115) (b2d636f)
\n- overlay: do not hide overlay if toast is presented (#29140) (c0f5e5e), closes #29139
\n
\n",
+ "name": "v7.7.5",
+ "published_at": "March 13 2024",
+ "tag_name": "v7.7.5",
"type": "patch",
- "version": "7.6.2"
+ "version": "7.7.5"
},
{
- "name": "v7.6.1",
- "published_at": "December 13 2023",
- "tag_name": "v7.6.1",
+ "body": "Bug Fixes
\n\n",
+ "name": "v7.7.4",
+ "published_at": "March 7 2024",
+ "tag_name": "v7.7.4",
"type": "patch",
- "version": "7.6.1"
+ "version": "7.7.4"
},
{
- "name": "v7.6.0",
- "published_at": "December 6 2023",
- "tag_name": "v7.6.0",
+ "body": "Bug Fixes
\n\n- label: do not grow when in end slot (#29036) (1fc4b76), closes #29033
\n- overlays: focus is returned to last focus element when focusing toast (#28950) (2ed0ada), closes #28261
\n
\n",
+ "name": "v7.7.3",
+ "published_at": "February 22 2024",
+ "tag_name": "v7.7.3",
+ "type": "patch",
+ "version": "7.7.3"
+ },
+ {
+ "body": "Bug Fixes
\n\n- overlays: do not return focus if application has already moved focus manually (#28850) (a016670), closes #28849
\n- overlays: ensure that only topmost overlay is announced by screen readers (#28997) (ba4ba61), closes #23472
\n- popover: render arrow above backdrop (#28986) (0a8964d), closes #28985
\n
\n",
+ "name": "v7.7.2",
+ "published_at": "February 14 2024",
+ "tag_name": "v7.7.2",
+ "type": "patch",
+ "version": "7.7.2"
+ },
+ {
+ "body": "Bug Fixes
\n\n- action-sheet: iOS dismiss animation respects safe area (#28915) (7449fb4), closes #28541
\n- overlays: tear down animations after dismiss (#28907) (950fa40), closes #28352
\n- react: route with redirect will mount page (#28961) (5777ce2), closes #28838
\n- select: popover can be scrolled (#28965) (35ab6b4), closes #28963
\n
\n",
+ "name": "v7.7.1",
+ "published_at": "February 7 2024",
+ "tag_name": "v7.7.1",
+ "type": "patch",
+ "version": "7.7.1"
+ },
+ {
+ "body": "Features
\n\n",
+ "name": "v7.7.0",
+ "published_at": "February 1 2024",
+ "tag_name": "v7.7.0",
"type": "minor",
- "version": "7.6.0"
+ "version": "7.7.0"
},
{
- "name": "v7.5.8",
- "published_at": "December 6 2023",
- "tag_name": "v7.5.8",
+ "body": "Bug Fixes
\n\n- accordion: prevent opening of readonly accordion using keyboard (#28865) (e10f49c), closes #28344
\n- action-sheet, alert, toast: button roles autocomplete with available options (#27940) (f6fc22b), closes #27965
\n- item: ensure button focus state on property change (#28892) (bf7922c), closes #28525
\n- item: only default slot content wraps (#28773) (9448783), closes #28769
\n
\n",
+ "name": "v7.6.7",
+ "published_at": "January 31 2024",
+ "tag_name": "v7.6.7",
"type": "patch",
- "version": "7.5.8"
+ "version": "7.6.7"
},
{
- "name": "v7.5.7",
- "published_at": "November 29 2023",
- "tag_name": "v7.5.7",
+ "body": "Bug Fixes
\n\n- alert: remove border-right on ios stacked buttons (#28821) (ad65824)
\n- datetime: do not animate to new value when multiple values in different months are set (#28847) (9262f7d), closes #28602
\n- datetime: enter closes keyboard when typing time (#28848) (c47a16d), closes #28325
\n- menu: improve reliability of main content not being scrollable when menu opens (#28829) (9603a4d), closes #28399
\n- popover: content inside of popover scrolls correctly (#28861) (10c38d0), closes #28455
\n- segment: setting value via binding updates button state (#28837) (0847c2a), closes #28816
\n- select: click handlers on slotted content fire (#28839) (aed7a03), closes #28818
\n- vue: tabs and parameterized routes work with latest vue (#28846) (5bc4399), closes #28774
\n
\n",
+ "name": "v7.6.6",
+ "published_at": "January 24 2024",
+ "tag_name": "v7.6.6",
+ "type": "patch",
+ "version": "7.6.6"
+ },
+ {
+ "body": "Bug Fixes
\n\n- angular: add old IonBackButtonDelegate import (#28831) (fb77353), closes #28827
\n- list: remove uneeded border radius from items in inset list (#28830) (dbaaa5b)
\n
\n",
+ "name": "v7.6.5",
+ "published_at": "January 17 2024",
+ "tag_name": "v7.6.5",
+ "type": "patch",
+ "version": "7.6.5"
+ },
+ {
+ "body": "Bug Fixes
\n\n",
+ "name": "v7.6.4",
+ "published_at": "January 17 2024",
+ "tag_name": "v7.6.4",
"type": "patch",
- "version": "7.5.7"
+ "version": "7.6.4"
+ },
+ {
+ "body": "Bug Fixes
\n\n- datetime: selected today button renders correctly on ios (#28740) (2f99aea)
\n- nav, router-outlet: ios page transition does not cover menu on larger screens (#28745) (878eec6), closes #28737
\n- radio-group: radio disabled prop can be undefined (#28712) (75ffeee), closes #28677
\n- refresher: native ios refresher works on iPadOS (#28620) (e522601), closes #28617
\n
\n",
+ "name": "v7.6.3",
+ "published_at": "January 3 2024",
+ "tag_name": "v7.6.3",
+ "type": "patch",
+ "version": "7.6.3"
}
]
diff --git a/src/components/page/reference/ReleaseNotes/styles.module.css b/src/components/page/reference/ReleaseNotes/styles.module.css
index 8da51d36c74..07d91cc313d 100644
--- a/src/components/page/reference/ReleaseNotes/styles.module.css
+++ b/src/components/page/reference/ReleaseNotes/styles.module.css
@@ -1,8 +1,8 @@
.release-notes {
margin-block-start: 4rem;
- --accent-color: #3880ff;
- --accent-color-rgb: 56, 128, 255;
+ --accent-color: #0054e9;
+ --accent-color-rgb: 0, 84, 233;
--accent-color-100: #4d8dff;
--accent-color-200: #639cff;
--accent-color-300: #4d8dff;
diff --git a/src/components/page/theming/ColorAccordion/styles.module.css b/src/components/page/theming/ColorAccordion/styles.module.css
index abe00a5ddc8..81fcc35fe42 100755
--- a/src/components/page/theming/ColorAccordion/styles.module.css
+++ b/src/components/page/theming/ColorAccordion/styles.module.css
@@ -9,36 +9,36 @@
list-style-type: none;
/** primary **/
- --ion-color-primary: #3880ff;
- --ion-color-primary-rgb: 56, 128, 255;
+ --ion-color-primary: #0054e9;
+ --ion-color-primary-rgb: 0, 84, 233;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
- --ion-color-primary-shade: #3171e0;
- --ion-color-primary-tint: #4c8dff;
+ --ion-color-primary-shade: #004acd;
+ --ion-color-primary-tint: #1a65eb;
/** secondary **/
- --ion-color-secondary: #3dc2ff;
- --ion-color-secondary-rgb: 61, 194, 255;
+ --ion-color-secondary: #0163aa;
+ --ion-color-secondary-rgb: 1, 99, 170;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
- --ion-color-secondary-shade: #36abe0;
- --ion-color-secondary-tint: #50c8ff;
+ --ion-color-secondary-shade: #015796;
+ --ion-color-secondary-tint: #1a73b3;
/** tertiary **/
- --ion-color-tertiary: #5260ff;
- --ion-color-tertiary-rgb: 82, 96, 255;
+ --ion-color-tertiary: #6030ff;
+ --ion-color-tertiary-rgb: 96,48,255;
--ion-color-tertiary-contrast: #ffffff;
- --ion-color-tertiary-contrast-rgb: 255, 255, 255;
- --ion-color-tertiary-shade: #4854e0;
- --ion-color-tertiary-tint: #6370ff;
+ --ion-color-tertiary-contrast-rgb: 255,255,255;
+ --ion-color-tertiary-shade: #542ae0;
+ --ion-color-tertiary-tint: #7045ff;
/** success **/
- --ion-color-success: #2dd36f;
- --ion-color-success-rgb: 45, 211, 111;
- --ion-color-success-contrast: #ffffff;
- --ion-color-success-contrast-rgb: 255, 255, 255;
- --ion-color-success-shade: #28ba62;
- --ion-color-success-tint: #42d77d;
+ --ion-color-success: #2dd55b;
+ --ion-color-success-rgb: 45, 213, 91;
+ --ion-color-success-contrast: #000000;
+ --ion-color-success-contrast-rgb: 0, 0, 0;
+ --ion-color-success-shade: #28bb50;
+ --ion-color-success-tint: #42d96b;
/** warning **/
--ion-color-warning: #ffc409;
@@ -49,36 +49,36 @@
--ion-color-warning-tint: #ffca22;
/** danger **/
- --ion-color-danger: #eb445a;
- --ion-color-danger-rgb: 235, 68, 90;
+ --ion-color-danger: #c5000f;
+ --ion-color-danger-rgb: 197, 0, 15;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
- --ion-color-danger-shade: #cf3c4f;
- --ion-color-danger-tint: #ed576b;
+ --ion-color-danger-shade: #ad000d;
+ --ion-color-danger-tint: #cb1a27;
/** dark **/
- --ion-color-dark: #222428;
- --ion-color-dark-rgb: 34, 36, 40;
+ --ion-color-dark: #2f2f2f;
+ --ion-color-dark-rgb: 47, 47, 47;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast-rgb: 255, 255, 255;
- --ion-color-dark-shade: #1e2023;
- --ion-color-dark-tint: #383a3e;
+ --ion-color-dark-shade: #292929;
+ --ion-color-dark-tint: #444444;
/** medium **/
- --ion-color-medium: #92949c;
- --ion-color-medium-rgb: 146, 148, 156;
+ --ion-color-medium: #5f5f5f;
+ --ion-color-medium-rgb: 95,95,95;
--ion-color-medium-contrast: #ffffff;
- --ion-color-medium-contrast-rgb: 255, 255, 255;
- --ion-color-medium-shade: #808289;
- --ion-color-medium-tint: #9d9fa6;
+ --ion-color-medium-contrast-rgb: 255,255,255;
+ --ion-color-medium-shade: #545454;
+ --ion-color-medium-tint: #6f6f6f;
/** light **/
- --ion-color-light: #f4f5f8;
- --ion-color-light-rgb: 244, 245, 248;
+ --ion-color-light: #f6f8fc;
+ --ion-color-light-rgb: 246, 248, 252;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0, 0, 0;
- --ion-color-light-shade: #d7d8da;
- --ion-color-light-tint: #f5f6f9;
+ --ion-color-light-shade: #d8dade;
+ --ion-color-light-tint: #f7f9fc;
}
.colorSubmenu {
diff --git a/src/components/page/theming/ColorGenerator/index.tsx b/src/components/page/theming/ColorGenerator/index.tsx
index 701069bc49c..9ff77c3f891 100644
--- a/src/components/page/theming/ColorGenerator/index.tsx
+++ b/src/components/page/theming/ColorGenerator/index.tsx
@@ -11,15 +11,15 @@ import ColorInput from '../ColorInput';
const ColorGenerator = (props) => {
const [colors, setColors] = useState({
- primary: generateColor('#3880ff'),
- secondary: generateColor('#3dc2ff'),
- tertiary: generateColor('#5260ff'),
- success: generateColor('#2dd36f'),
+ primary: generateColor('#0054e9'),
+ secondary: generateColor('#0163aa'),
+ tertiary: generateColor('#6030ff'),
+ success: generateColor('#2dd55b'),
warning: generateColor('#ffc409'),
- danger: generateColor('#eb445a'),
- light: generateColor('#f4f5f8'),
- medium: generateColor('#92949c'),
- dark: generateColor('#222428'),
+ danger: generateColor('#c5000f'),
+ light: generateColor('#f6f8fc'),
+ medium: generateColor('#5f5f5f'),
+ dark: generateColor('#2f2f2f'),
});
const [activeColor, setActiveColor] = useState(null);
diff --git a/src/components/page/theming/LayeredColorsSelect/styles.module.scss b/src/components/page/theming/LayeredColorsSelect/styles.module.scss
index 3447e28ea21..81da5d141a6 100755
--- a/src/components/page/theming/LayeredColorsSelect/styles.module.scss
+++ b/src/components/page/theming/LayeredColorsSelect/styles.module.scss
@@ -1,35 +1,35 @@
.layeredColorsSelect {
/** primary **/
- --ion-color-primary: #3880ff;
- --ion-color-primary-rgb: 56, 128, 255;
+ --ion-color-primary: #0054e9;
+ --ion-color-primary-rgb: 0, 84 , 233;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
- --ion-color-primary-shade: #3171e0;
- --ion-color-primary-tint: #4c8dff;
+ --ion-color-primary-shade: #004acd;
+ --ion-color-primary-tint: #1a65eb;
/** secondary **/
- --ion-color-secondary: #3dc2ff;
- --ion-color-secondary-rgb: 61, 194, 255;
+ --ion-color-secondary: #0163aa;
+ --ion-color-secondary-rgb: 1, 99, 170;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
- --ion-color-secondary-shade: #36abe0;
- --ion-color-secondary-tint: #50c8ff;
+ --ion-color-secondary-shade: #015796;
+ --ion-color-secondary-tint: #1a73b3;
/** tertiary **/
- --ion-color-tertiary: #5260ff;
- --ion-color-tertiary-rgb: 82, 96, 255;
+ --ion-color-tertiary: #6030ff;
+ --ion-color-tertiary-rgb: 96, 48, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
- --ion-color-tertiary-shade: #4854e0;
- --ion-color-tertiary-tint: #6370ff;
+ --ion-color-tertiary-shade: #542ae0;
+ --ion-color-tertiary-tint: #7045ff;
/** success **/
- --ion-color-success: #2dd36f;
- --ion-color-success-rgb: 45, 211, 111;
- --ion-color-success-contrast: #ffffff;
- --ion-color-success-contrast-rgb: 255, 255, 255;
- --ion-color-success-shade: #28ba62;
- --ion-color-success-tint: #42d77d;
+ --ion-color-success: #2dd55b;
+ --ion-color-success-rgb: 45, 213, 91;
+ --ion-color-success-contrast: #000000;
+ --ion-color-success-contrast-rgb: 0, 0, 0;
+ --ion-color-success-shade: #28bb50;
+ --ion-color-success-tint: #42d96b;
/** warning **/
--ion-color-warning: #ffc409;
@@ -40,36 +40,36 @@
--ion-color-warning-tint: #ffca22;
/** danger **/
- --ion-color-danger: #eb445a;
- --ion-color-danger-rgb: 235, 68, 90;
+ --ion-color-danger: #c5000f;
+ --ion-color-danger-rgb: 197, 0, 15;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
- --ion-color-danger-shade: #cf3c4f;
- --ion-color-danger-tint: #ed576b;
+ --ion-color-danger-shade: #ad000d;
+ --ion-color-danger-tint: #cb1a27;
/** dark **/
- --ion-color-dark: #222428;
- --ion-color-dark-rgb: 34, 36, 40;
+ --ion-color-dark: #2f2f2f;
+ --ion-color-dark-rgb: 47, 47, 47;
--ion-color-dark-contrast: #ffffff;
--ion-color-dark-contrast-rgb: 255, 255, 255;
- --ion-color-dark-shade: #1e2023;
- --ion-color-dark-tint: #383a3e;
+ --ion-color-dark-shade: #292929;
+ --ion-color-dark-tint: #444444;
/** medium **/
- --ion-color-medium: #92949c;
- --ion-color-medium-rgb: 146, 148, 156;
+ --ion-color-medium: #5f5f5f;
+ --ion-color-medium-rgb: 95, 95, 95;
--ion-color-medium-contrast: #ffffff;
--ion-color-medium-contrast-rgb: 255, 255, 255;
- --ion-color-medium-shade: #808289;
- --ion-color-medium-tint: #9d9fa6;
+ --ion-color-medium-shade: #545454;
+ --ion-color-medium-tint: #6f6f6f;
/** light **/
- --ion-color-light: #f4f5f8;
- --ion-color-light-rgb: 244, 245, 248;
+ --ion-color-light: #f6f8fc;
+ --ion-color-light-rgb: 246, 248, 252;
--ion-color-light-contrast: #000000;
--ion-color-light-contrast-rgb: 0, 0, 0;
- --ion-color-light-shade: #d7d8da;
- --ion-color-light-tint: #f5f6f9;
+ --ion-color-light-shade: #d8dade;
+ --ion-color-light-tint: #f7f9fc;
}
.selectRow {
diff --git a/src/components/page/theming/SteppedColorGenerator/index.tsx b/src/components/page/theming/SteppedColorGenerator/index.tsx
index 35afde9a09f..226b6dfe51c 100755
--- a/src/components/page/theming/SteppedColorGenerator/index.tsx
+++ b/src/components/page/theming/SteppedColorGenerator/index.tsx
@@ -16,10 +16,14 @@ export default function ColorGenerator(props) {
const [backgroundColor, setBackgroundColor] = useState('#ffffff');
const [textColor, setTextColor] = useState('#000000');
- const [steppedColors, setSteppedColors] = useState(generateSteppedColors(backgroundColor, textColor));
+ const [textSteppedColors, setTextSteppedColors] = useState(generateSteppedColors(textColor, backgroundColor));
+ const [backgroundSteppedColors, setBackgroundSteppedColors] = useState(
+ generateSteppedColors(backgroundColor, textColor)
+ );
useEffect(() => {
- setSteppedColors(generateSteppedColors(backgroundColor, textColor));
+ setTextSteppedColors(generateSteppedColors(textColor, backgroundColor));
+ setBackgroundSteppedColors(generateSteppedColors(backgroundColor, textColor));
}, [backgroundColor, textColor]);
return (
@@ -43,11 +47,15 @@ export default function ColorGenerator(props) {
{'\t'}--ion-text-color: {textColor} ;{'\n'}
{'\t'}--ion-text-color-rgb: {new Color(textColor).toList()} ;{'\n'}
{'\n'}
- {steppedColors.map((color, i) => (
- <>
- {'\t'}--ion-color-step-{(i + 1) * 50}: {color} ;{'\n'}
- >
- ))}
+ {/*
+ Ionic v8+ uses separate step colors for text and background.
+ We use a single component here for all versions of the docs, so newer
+ versions of the docs opt-in to showing separate step colors
+ using the useTextAndBackgroundStepColors property.
+ */}
+ {props.useTextAndBackgroundStepColors &&
+ renderSeparateTextAndBackgroundColors(textSteppedColors, backgroundSteppedColors)}
+ {!props.useTextAndBackgroundStepColors && renderCombinedColors(backgroundSteppedColors)}
{'}'}
{'\n'}
@@ -55,3 +63,37 @@ export default function ColorGenerator(props) {
);
}
+
+/**
+ * Render `--ion-text-color-step-*` and `--ion-background-color-step-*` tokens.
+ * Use this for Ionic v8+ documentation.
+ */
+const renderSeparateTextAndBackgroundColors = (textSteppedColors: string[], backgroundSteppedColors: string[]) => {
+ return [
+ textSteppedColors.map((color, i) => (
+ <>
+ {'\t'}--ion-text-color-step-{(i + 1) * 50}: {color} ;{'\n'}
+ >
+ )),
+ '\n',
+ backgroundSteppedColors.map((color, i) => (
+ <>
+ {'\t'}--ion-background-color-step-{(i + 1) * 50}: {color} ;{'\n'}
+ >
+ )),
+ ];
+};
+
+/**
+ * Render `--ion-color-step-*` tokens.
+ * Use this for Ionic v4-v7 documentation.
+ */
+const renderCombinedColors = (steppedColors: string[]) => {
+ return [
+ steppedColors.map((color, i) => (
+ <>
+ {'\t'}--ion-color-step-{(i + 1) * 50}: {color} ;{'\n'}
+ >
+ )),
+ ];
+};
diff --git a/src/translate/.detection/api/action-sheet.json b/src/translate/.detection/api/action-sheet.json
index 8275037feb7..70d27b707a2 100644
--- a/src/translate/.detection/api/action-sheet.json
+++ b/src/translate/.detection/api/action-sheet.json
@@ -371,7 +371,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"references": {
@@ -392,7 +392,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"docs": "Dismiss the action sheet overlay after it has been presented.",
@@ -403,7 +403,7 @@
},
{
"name": "param",
- "text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
]
},
@@ -697,6 +697,11 @@
"annotation": "prop",
"docs": "Color of the action sheet button when pressed"
},
+ {
+ "name": "--button-color-disabled",
+ "annotation": "prop",
+ "docs": "Color of the selected action sheet button when disabled"
+ },
{
"name": "--button-color-focused",
"annotation": "prop",
diff --git a/src/translate/.detection/api/alert.json b/src/translate/.detection/api/alert.json
index 5ae4fd672d5..3bdd0c5b834 100644
--- a/src/translate/.detection/api/alert.json
+++ b/src/translate/.detection/api/alert.json
@@ -431,7 +431,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"references": {
@@ -452,7 +452,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"docs": "Dismiss the alert overlay after it has been presented.",
@@ -463,7 +463,7 @@
},
{
"name": "param",
- "text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
]
},
diff --git a/src/translate/.detection/api/backdrop.json b/src/translate/.detection/api/backdrop.json
index 0f5566e34ab..f12823722dd 100644
--- a/src/translate/.detection/api/backdrop.json
+++ b/src/translate/.detection/api/backdrop.json
@@ -106,7 +106,7 @@
"ion-loading",
"ion-menu",
"ion-modal",
- "ion-picker",
+ "ion-picker-legacy",
"ion-popover"
],
"dependencies": [],
@@ -126,7 +126,7 @@
"ion-modal": [
"ion-backdrop"
],
- "ion-picker": [
+ "ion-picker-legacy": [
"ion-backdrop"
],
"ion-popover": [
diff --git a/src/translate/.detection/api/button.json b/src/translate/.detection/api/button.json
index b8a7ec24677..89fe8199f7b 100644
--- a/src/translate/.detection/api/button.json
+++ b/src/translate/.detection/api/button.json
@@ -708,7 +708,8 @@
}
],
"dependents": [
- "ion-datetime"
+ "ion-datetime",
+ "ion-input-password-toggle"
],
"dependencies": [
"ion-ripple-effect"
@@ -719,6 +720,9 @@
],
"ion-datetime": [
"ion-button"
+ ],
+ "ion-input-password-toggle": [
+ "ion-button"
]
}
}
\ No newline at end of file
diff --git a/src/translate/.detection/api/checkbox.json b/src/translate/.detection/api/checkbox.json
index 3bcda6638e0..217be3aedda 100644
--- a/src/translate/.detection/api/checkbox.json
+++ b/src/translate/.detection/api/checkbox.json
@@ -252,30 +252,6 @@
"optional": false,
"required": false
},
- {
- "name": "legacy",
- "type": "boolean | undefined",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "legacy",
- "reflectToAttr": false,
- "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt checkboxes in to the modern form markup when they are\nusing either the `aria-label` attribute or have text in the default slot. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\n\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "mode",
"type": "\"ios\" | \"md\"",
diff --git a/src/translate/.detection/api/datetime.json b/src/translate/.detection/api/datetime.json
index e9204645a59..c666c814a49 100644
--- a/src/translate/.detection/api/datetime.json
+++ b/src/translate/.detection/api/datetime.json
@@ -266,6 +266,44 @@
"optional": false,
"required": false
},
+ {
+ "name": "formatOptions",
+ "type": "undefined | { date: DateTimeFormatOptions; time?: DateTimeFormatOptions | undefined; } | { date?: DateTimeFormatOptions | undefined; time: DateTimeFormatOptions; }",
+ "complexType": {
+ "original": "FormatOptions",
+ "resolved": "undefined | { date: DateTimeFormatOptions; time?: DateTimeFormatOptions | undefined; } | { date?: DateTimeFormatOptions | undefined; time: DateTimeFormatOptions; }",
+ "references": {
+ "FormatOptions": {
+ "location": "import",
+ "path": "./datetime-interface",
+ "id": "src/components/datetime/datetime-interface.ts::FormatOptions"
+ }
+ }
+ },
+ "mutable": false,
+ "reflectToAttr": false,
+ "docs": "Formatting options for dates and times.\nShould include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "undefined"
+ },
+ {
+ "type": "{ date: DateTimeFormatOptions; time?: DateTimeFormatOptions"
+ },
+ {
+ "type": "undefined; }"
+ },
+ {
+ "type": "{ date?: DateTimeFormatOptions"
+ },
+ {
+ "type": "undefined; time: DateTimeFormatOptions; }"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
{
"name": "highlightedDates",
"type": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
@@ -1093,6 +1131,11 @@
"name": "--wheel-highlight-background",
"annotation": "prop",
"docs": "The background of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts."
+ },
+ {
+ "name": "--wheel-highlight-border-radius",
+ "annotation": "prop",
+ "docs": "The border radius of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts."
}
],
"slots": [
@@ -1151,32 +1194,27 @@
"dependencies": [
"ion-buttons",
"ion-button",
- "ion-picker-internal",
- "ion-picker-column-internal",
- "ion-item",
- "ion-label",
+ "ion-picker",
+ "ion-picker-column",
+ "ion-picker-column-option",
"ion-icon",
+ "ion-ripple-effect",
"ion-popover"
],
"dependencyGraph": {
"ion-datetime": [
"ion-buttons",
"ion-button",
- "ion-picker-internal",
- "ion-picker-column-internal",
- "ion-item",
- "ion-label",
+ "ion-picker",
+ "ion-picker-column",
+ "ion-picker-column-option",
"ion-icon",
+ "ion-ripple-effect",
"ion-popover"
],
"ion-button": [
"ion-ripple-effect"
],
- "ion-item": [
- "ion-icon",
- "ion-ripple-effect",
- "ion-note"
- ],
"ion-popover": [
"ion-backdrop"
]
diff --git a/src/translate/.detection/api/input-password-toggle.json b/src/translate/.detection/api/input-password-toggle.json
new file mode 100644
index 00000000000..55555fbf396
--- /dev/null
+++ b/src/translate/.detection/api/input-password-toggle.json
@@ -0,0 +1,170 @@
+{
+ "filePath": "src/components/input-password-toggle/input-password-toggle.tsx",
+ "encapsulation": "shadow",
+ "tag": "ion-input-password-toggle",
+ "docs": "",
+ "docsTags": [
+ {
+ "name": "virtualProp",
+ "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
+ }
+ ],
+ "usage": {},
+ "props": [
+ {
+ "name": "color",
+ "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record | undefined",
+ "complexType": {
+ "original": "Color",
+ "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record | undefined",
+ "references": {
+ "Color": {
+ "location": "import",
+ "path": "../../interface",
+ "id": "src/interface.d.ts::Color"
+ }
+ }
+ },
+ "mutable": false,
+ "attr": "color",
+ "reflectToAttr": true,
+ "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+ "docsTags": [],
+ "values": [
+ {
+ "value": "danger",
+ "type": "string"
+ },
+ {
+ "value": "dark",
+ "type": "string"
+ },
+ {
+ "value": "light",
+ "type": "string"
+ },
+ {
+ "value": "medium",
+ "type": "string"
+ },
+ {
+ "value": "primary",
+ "type": "string"
+ },
+ {
+ "value": "secondary",
+ "type": "string"
+ },
+ {
+ "value": "success",
+ "type": "string"
+ },
+ {
+ "value": "tertiary",
+ "type": "string"
+ },
+ {
+ "value": "warning",
+ "type": "string"
+ },
+ {
+ "type": "string & Record"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "hideIcon",
+ "type": "string | undefined",
+ "complexType": {
+ "original": "string",
+ "resolved": "string | undefined",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "hide-icon",
+ "reflectToAttr": false,
+ "docs": "The icon that can be used to represent hiding a password. If not set, the \"eyeOff\" Ionicon will be used.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "string"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "mode",
+ "type": "\"ios\" | \"md\"",
+ "mutable": false,
+ "attr": "mode",
+ "reflectToAttr": false,
+ "docs": "The mode determines which platform styles to use.",
+ "docsTags": [],
+ "values": [
+ {
+ "value": "ios",
+ "type": "string"
+ },
+ {
+ "value": "md",
+ "type": "string"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "showIcon",
+ "type": "string | undefined",
+ "complexType": {
+ "original": "string",
+ "resolved": "string | undefined",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "show-icon",
+ "reflectToAttr": false,
+ "docs": "The icon that can be used to represent showing a password. If not set, the \"eye\" Ionicon will be used.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "string"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ }
+ ],
+ "methods": [],
+ "events": [],
+ "listeners": [],
+ "styles": [],
+ "slots": [],
+ "parts": [],
+ "dependents": [],
+ "dependencies": [
+ "ion-button",
+ "ion-icon"
+ ],
+ "dependencyGraph": {
+ "ion-input-password-toggle": [
+ "ion-button",
+ "ion-icon"
+ ],
+ "ion-button": [
+ "ion-ripple-effect"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/src/translate/.detection/api/input-password-toggle.readme.md b/src/translate/.detection/api/input-password-toggle.readme.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/translate/.detection/api/input.json b/src/translate/.detection/api/input.json
index e9b6e785411..8b128fb0017 100644
--- a/src/translate/.detection/api/input.json
+++ b/src/translate/.detection/api/input.json
@@ -23,35 +23,6 @@
],
"usage": {},
"props": [
- {
- "name": "accept",
- "type": "string | undefined",
- "complexType": {
- "original": "string",
- "resolved": "string | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "accept",
- "reflectToAttr": false,
- "docs": "This attribute is ignored.",
- "docsTags": [
- {
- "name": "deprecated"
- }
- ],
- "deprecation": "",
- "values": [
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "autocapitalize",
"type": "string",
@@ -555,7 +526,7 @@
},
"mutable": false,
"attr": "disabled",
- "reflectToAttr": false,
+ "reflectToAttr": true,
"docs": "If `true`, the user cannot interact with the input.",
"docsTags": [],
"default": "false",
@@ -809,30 +780,6 @@
"optional": false,
"required": false
},
- {
- "name": "legacy",
- "type": "boolean | undefined",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "legacy",
- "reflectToAttr": false,
- "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "max",
"type": "number | string | undefined",
@@ -1060,7 +1007,7 @@
},
"mutable": false,
"attr": "readonly",
- "reflectToAttr": false,
+ "reflectToAttr": true,
"docs": "If `true`, the user cannot modify the value.",
"docsTags": [],
"default": "false",
@@ -1119,30 +1066,6 @@
"optional": true,
"required": false
},
- {
- "name": "size",
- "type": "number | undefined",
- "complexType": {
- "original": "number",
- "resolved": "number | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "size",
- "reflectToAttr": false,
- "docs": "",
- "docsTags": [],
- "values": [
- {
- "type": "number"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "spellcheck",
"type": "boolean",
@@ -1471,6 +1394,11 @@
"annotation": "prop",
"docs": "The color of the highlight on the input when valid"
},
+ {
+ "name": "--highlight-height",
+ "annotation": "prop",
+ "docs": "The height of the highlight on the input. Only applies to md mode."
+ },
{
"name": "--padding-bottom",
"annotation": "prop",
diff --git a/src/translate/.detection/api/item.json b/src/translate/.detection/api/item.json
index 2ed7a7e3db9..4b1b8490a66 100644
--- a/src/translate/.detection/api/item.json
+++ b/src/translate/.detection/api/item.json
@@ -20,14 +20,6 @@
"name": "slot",
"text": "end - Content is placed to the right of the item text in LTR, and to the left in RTL."
},
- {
- "name": "slot",
- "text": "helper - Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the \"helperText\" property on ion-input or ion-textarea instead."
- },
- {
- "name": "slot",
- "text": "error - Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the \"errorText\" property on ion-input or ion-textarea instead."
- },
{
"name": "part",
"text": "native - The native HTML button, anchor or div element that wraps all child elements."
@@ -127,69 +119,6 @@
"optional": true,
"required": false
},
- {
- "name": "counter",
- "type": "boolean",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean",
- "references": {}
- },
- "mutable": false,
- "attr": "counter",
- "reflectToAttr": false,
- "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.",
- "docsTags": [
- {
- "name": "deprecated",
- "text": "Use the `counter` property on `ion-input` or `ion-textarea` instead."
- }
- ],
- "default": "false",
- "deprecation": "Use the `counter` property on `ion-input` or `ion-textarea` instead.",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "counterFormatter",
- "type": "((inputLength: number, maxLength: number) => string) | undefined",
- "complexType": {
- "original": "CounterFormatter",
- "resolved": "((inputLength: number, maxLength: number) => string) | undefined",
- "references": {
- "CounterFormatter": {
- "location": "import",
- "path": "./item-interface",
- "id": "src/components/item/item-interface.ts::CounterFormatter"
- }
- }
- },
- "mutable": false,
- "reflectToAttr": false,
- "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
- "docsTags": [
- {
- "name": "deprecated",
- "text": "Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead."
- }
- ],
- "deprecation": "Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead.",
- "values": [
- {
- "type": "((inputLength: number, maxLength: number) => string)"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "detail",
"type": "boolean | undefined",
@@ -282,41 +211,6 @@
"optional": false,
"required": false
},
- {
- "name": "fill",
- "type": "\"outline\" | \"solid\" | undefined",
- "complexType": {
- "original": "'outline' | 'solid'",
- "resolved": "\"outline\" | \"solid\" | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "fill",
- "reflectToAttr": false,
- "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
- "docsTags": [
- {
- "name": "deprecated",
- "text": "Use the `fill` property on `ion-input` or `ion-textarea` instead."
- }
- ],
- "deprecation": "Use the `fill` property on `ion-input` or `ion-textarea` instead.",
- "values": [
- {
- "value": "outline",
- "type": "string"
- },
- {
- "value": "solid",
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "href",
"type": "string | undefined",
@@ -485,31 +379,6 @@
"optional": false,
"required": false
},
- {
- "name": "shape",
- "type": "\"round\" | undefined",
- "complexType": {
- "original": "'round'",
- "resolved": "\"round\" | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "shape",
- "reflectToAttr": false,
- "docs": "The shape of the item. If \"round\" it will have increased\nborder radius.",
- "docsTags": [],
- "values": [
- {
- "value": "round",
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "target",
"type": "string | undefined",
@@ -569,11 +438,6 @@
"methods": [],
"events": [],
"listeners": [
- {
- "event": "ionInput",
- "capture": false,
- "passive": false
- },
{
"event": "ionColor",
"capture": false,
@@ -676,26 +540,6 @@
"annotation": "prop",
"docs": "Opacity of the item detail icon"
},
- {
- "name": "--highlight-color-focused",
- "annotation": "prop",
- "docs": "The color of the highlight on the item when focused. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
- },
- {
- "name": "--highlight-color-invalid",
- "annotation": "prop",
- "docs": "The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
- },
- {
- "name": "--highlight-color-valid",
- "annotation": "prop",
- "docs": "The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
- },
- {
- "name": "--highlight-height",
- "annotation": "prop",
- "docs": "The height of the highlight on the item. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
- },
{
"name": "--inner-border-width",
"annotation": "prop",
@@ -771,14 +615,6 @@
"name": "end",
"docs": "Content is placed to the right of the item text in LTR, and to the left in RTL."
},
- {
- "name": "error",
- "docs": "Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the \"errorText\" property on ion-input or ion-textarea instead."
- },
- {
- "name": "helper",
- "docs": "Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the \"helperText\" property on ion-input or ion-textarea instead."
- },
{
"name": "start",
"docs": "Content is placed to the left of the item text in LTR, and to the right in RTL."
@@ -795,22 +631,16 @@
}
],
"dependents": [
- "ion-datetime",
"ion-select-popover"
],
"dependencies": [
"ion-icon",
- "ion-ripple-effect",
- "ion-note"
+ "ion-ripple-effect"
],
"dependencyGraph": {
"ion-item": [
"ion-icon",
- "ion-ripple-effect",
- "ion-note"
- ],
- "ion-datetime": [
- "ion-item"
+ "ion-ripple-effect"
],
"ion-select-popover": [
"ion-item"
diff --git a/src/translate/.detection/api/label.json b/src/translate/.detection/api/label.json
index 28e1f1d248c..81dab454e11 100644
--- a/src/translate/.detection/api/label.json
+++ b/src/translate/.detection/api/label.json
@@ -145,14 +145,10 @@
"slots": [],
"parts": [],
"dependents": [
- "ion-datetime",
"ion-select-popover"
],
"dependencies": [],
"dependencyGraph": {
- "ion-datetime": [
- "ion-label"
- ],
"ion-select-popover": [
"ion-label"
]
diff --git a/src/translate/.detection/api/loading.json b/src/translate/.detection/api/loading.json
index 73826774e7b..e6b62d91309 100644
--- a/src/translate/.detection/api/loading.json
+++ b/src/translate/.detection/api/loading.json
@@ -436,7 +436,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"references": {
@@ -457,7 +457,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"docs": "Dismiss the loading overlay after it has been presented.",
@@ -468,7 +468,7 @@
},
{
"name": "param",
- "text": "role The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "text": "role The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
]
},
diff --git a/src/translate/.detection/api/menu.json b/src/translate/.detection/api/menu.json
index 791560d43cf..fd1e750d305 100644
--- a/src/translate/.detection/api/menu.json
+++ b/src/translate/.detection/api/menu.json
@@ -164,11 +164,17 @@
},
{
"name": "type",
- "type": "string | undefined",
+ "type": "\"overlay\" | \"push\" | \"reveal\" | undefined",
"complexType": {
- "original": "string",
- "resolved": "string | undefined",
- "references": {}
+ "original": "MenuType",
+ "resolved": "\"overlay\" | \"push\" | \"reveal\" | undefined",
+ "references": {
+ "MenuType": {
+ "location": "import",
+ "path": "./menu-interface",
+ "id": "src/components/menu/menu-interface.ts::MenuType"
+ }
+ }
},
"mutable": true,
"attr": "type",
@@ -177,6 +183,15 @@
"docsTags": [],
"values": [
{
+ "value": "overlay",
+ "type": "string"
+ },
+ {
+ "value": "push",
+ "type": "string"
+ },
+ {
+ "value": "reveal",
"type": "string"
},
{
diff --git a/src/translate/.detection/api/modal.json b/src/translate/.detection/api/modal.json
index 69d10333278..46ee07ca7b5 100644
--- a/src/translate/.detection/api/modal.json
+++ b/src/translate/.detection/api/modal.json
@@ -494,7 +494,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
+ "docs": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"references": {
@@ -519,7 +519,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
+ "docs": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"docs": "Dismiss the modal overlay after it has been presented.",
@@ -530,7 +530,7 @@
},
{
"name": "param",
- "text": "role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
+ "text": "role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
]
},
diff --git a/src/translate/.detection/api/nav.json b/src/translate/.detection/api/nav.json
index ed32bb60db2..c788cda2002 100644
--- a/src/translate/.detection/api/nav.json
+++ b/src/translate/.detection/api/nav.json
@@ -269,6 +269,28 @@
}
]
},
+ {
+ "name": "getLength",
+ "returns": {
+ "type": "Promise",
+ "docs": ""
+ },
+ "complexType": {
+ "signature": "() => Promise",
+ "parameters": [],
+ "references": {
+ "Promise": {
+ "location": "global",
+ "id": "global::Promise"
+ }
+ },
+ "return": "Promise"
+ },
+ "signature": "getLength() => Promise",
+ "parameters": [],
+ "docs": "Returns the number of views in the stack.",
+ "docsTags": []
+ },
{
"name": "getPrevious",
"returns": {
diff --git a/src/translate/.detection/api/note.json b/src/translate/.detection/api/note.json
index 61c1a42dd93..965ac1ac154 100644
--- a/src/translate/.detection/api/note.json
+++ b/src/translate/.detection/api/note.json
@@ -111,13 +111,7 @@
],
"slots": [],
"parts": [],
- "dependents": [
- "ion-item"
- ],
+ "dependents": [],
"dependencies": [],
- "dependencyGraph": {
- "ion-item": [
- "ion-note"
- ]
- }
+ "dependencyGraph": {}
}
\ No newline at end of file
diff --git a/src/translate/.detection/api/picker-column-option.json b/src/translate/.detection/api/picker-column-option.json
new file mode 100644
index 00000000000..3c91bb3b504
--- /dev/null
+++ b/src/translate/.detection/api/picker-column-option.json
@@ -0,0 +1,135 @@
+{
+ "filePath": "src/components/picker-column-option/picker-column-option.tsx",
+ "encapsulation": "shadow",
+ "tag": "ion-picker-column-option",
+ "docs": "",
+ "docsTags": [],
+ "usage": {},
+ "props": [
+ {
+ "name": "color",
+ "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record | undefined",
+ "complexType": {
+ "original": "Color",
+ "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record | undefined",
+ "references": {
+ "Color": {
+ "location": "import",
+ "path": "../../interface",
+ "id": "src/interface.d.ts::Color"
+ }
+ }
+ },
+ "mutable": false,
+ "attr": "color",
+ "reflectToAttr": true,
+ "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+ "docsTags": [],
+ "default": "'primary'",
+ "values": [
+ {
+ "value": "danger",
+ "type": "string"
+ },
+ {
+ "value": "dark",
+ "type": "string"
+ },
+ {
+ "value": "light",
+ "type": "string"
+ },
+ {
+ "value": "medium",
+ "type": "string"
+ },
+ {
+ "value": "primary",
+ "type": "string"
+ },
+ {
+ "value": "secondary",
+ "type": "string"
+ },
+ {
+ "value": "success",
+ "type": "string"
+ },
+ {
+ "value": "tertiary",
+ "type": "string"
+ },
+ {
+ "value": "warning",
+ "type": "string"
+ },
+ {
+ "type": "string & Record"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "disabled",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "disabled",
+ "reflectToAttr": false,
+ "docs": "If `true`, the user cannot interact with the picker column option.",
+ "docsTags": [],
+ "default": "false",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "value",
+ "type": "any",
+ "complexType": {
+ "original": "any | null",
+ "resolved": "any",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "value",
+ "reflectToAttr": false,
+ "docs": "The text value of the option.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "any"
+ }
+ ],
+ "optional": true,
+ "required": false
+ }
+ ],
+ "methods": [],
+ "events": [],
+ "listeners": [],
+ "styles": [],
+ "slots": [],
+ "parts": [],
+ "dependents": [
+ "ion-datetime"
+ ],
+ "dependencies": [],
+ "dependencyGraph": {
+ "ion-datetime": [
+ "ion-picker-column-option"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/src/translate/.detection/api/picker-column-option.readme.md b/src/translate/.detection/api/picker-column-option.readme.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/translate/.detection/api/picker-column.json b/src/translate/.detection/api/picker-column.json
new file mode 100644
index 00000000000..10143beaac9
--- /dev/null
+++ b/src/translate/.detection/api/picker-column.json
@@ -0,0 +1,228 @@
+{
+ "filePath": "src/components/picker-column/picker-column.tsx",
+ "encapsulation": "shadow",
+ "tag": "ion-picker-column",
+ "docs": "",
+ "docsTags": [
+ {
+ "name": "virtualProp",
+ "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
+ },
+ {
+ "name": "slot",
+ "text": "prefix - Content to show on the left side of the picker options."
+ },
+ {
+ "name": "slot",
+ "text": "suffix - Content to show on the right side of the picker options."
+ }
+ ],
+ "usage": {},
+ "props": [
+ {
+ "name": "color",
+ "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record | undefined",
+ "complexType": {
+ "original": "Color",
+ "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record | undefined",
+ "references": {
+ "Color": {
+ "location": "import",
+ "path": "../../interface",
+ "id": "src/interface.d.ts::Color"
+ }
+ }
+ },
+ "mutable": false,
+ "attr": "color",
+ "reflectToAttr": true,
+ "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+ "docsTags": [],
+ "default": "'primary'",
+ "values": [
+ {
+ "value": "danger",
+ "type": "string"
+ },
+ {
+ "value": "dark",
+ "type": "string"
+ },
+ {
+ "value": "light",
+ "type": "string"
+ },
+ {
+ "value": "medium",
+ "type": "string"
+ },
+ {
+ "value": "primary",
+ "type": "string"
+ },
+ {
+ "value": "secondary",
+ "type": "string"
+ },
+ {
+ "value": "success",
+ "type": "string"
+ },
+ {
+ "value": "tertiary",
+ "type": "string"
+ },
+ {
+ "value": "warning",
+ "type": "string"
+ },
+ {
+ "type": "string & Record"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "disabled",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "disabled",
+ "reflectToAttr": false,
+ "docs": "If `true`, the user cannot interact with the picker.",
+ "docsTags": [],
+ "default": "false",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "mode",
+ "type": "\"ios\" | \"md\"",
+ "mutable": false,
+ "attr": "mode",
+ "reflectToAttr": false,
+ "docs": "The mode determines which platform styles to use.",
+ "docsTags": [],
+ "values": [
+ {
+ "value": "ios",
+ "type": "string"
+ },
+ {
+ "value": "md",
+ "type": "string"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "value",
+ "type": "number | string | undefined",
+ "complexType": {
+ "original": "string | number",
+ "resolved": "number | string | undefined",
+ "references": {}
+ },
+ "mutable": true,
+ "attr": "value",
+ "reflectToAttr": false,
+ "docs": "The selected option in the picker.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "number"
+ },
+ {
+ "type": "string"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ }
+ ],
+ "methods": [
+ {
+ "name": "setFocus",
+ "returns": {
+ "type": "Promise",
+ "docs": ""
+ },
+ "complexType": {
+ "signature": "() => Promise",
+ "parameters": [],
+ "references": {
+ "Promise": {
+ "location": "global",
+ "id": "global::Promise"
+ }
+ },
+ "return": "Promise"
+ },
+ "signature": "setFocus() => Promise",
+ "parameters": [],
+ "docs": "Sets focus on the scrollable container within the picker column.\nUse this method instead of the global `pickerColumn.focus()`.",
+ "docsTags": []
+ }
+ ],
+ "events": [
+ {
+ "event": "ionChange",
+ "detail": "PickerColumnChangeEventDetail",
+ "bubbles": true,
+ "complexType": {
+ "original": "PickerColumnChangeEventDetail",
+ "resolved": "PickerColumnChangeEventDetail",
+ "references": {
+ "PickerColumnChangeEventDetail": {
+ "location": "import",
+ "path": "./picker-column-interfaces",
+ "id": "src/components/picker-column/picker-column-interfaces.ts::PickerColumnChangeEventDetail"
+ }
+ }
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted when the value has changed.",
+ "docsTags": []
+ }
+ ],
+ "listeners": [],
+ "styles": [],
+ "slots": [
+ {
+ "name": "prefix",
+ "docs": "Content to show on the left side of the picker options."
+ },
+ {
+ "name": "suffix",
+ "docs": "Content to show on the right side of the picker options."
+ }
+ ],
+ "parts": [],
+ "dependents": [
+ "ion-datetime"
+ ],
+ "dependencies": [],
+ "dependencyGraph": {
+ "ion-datetime": [
+ "ion-picker-column"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/src/translate/.detection/api/picker-column.readme.md b/src/translate/.detection/api/picker-column.readme.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/translate/.detection/api/picker-legacy.json b/src/translate/.detection/api/picker-legacy.json
new file mode 100644
index 00000000000..ca38b417fdc
--- /dev/null
+++ b/src/translate/.detection/api/picker-legacy.json
@@ -0,0 +1,756 @@
+{
+ "filePath": "src/components/picker-legacy/picker.tsx",
+ "encapsulation": "scoped",
+ "tag": "ion-picker-legacy",
+ "docs": "",
+ "docsTags": [
+ {
+ "name": "virtualProp",
+ "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
+ }
+ ],
+ "usage": {},
+ "props": [
+ {
+ "name": "animated",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "animated",
+ "reflectToAttr": false,
+ "docs": "If `true`, the picker will animate.",
+ "docsTags": [],
+ "default": "true",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "backdropDismiss",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "backdrop-dismiss",
+ "reflectToAttr": false,
+ "docs": "If `true`, the picker will be dismissed when the backdrop is clicked.",
+ "docsTags": [],
+ "default": "true",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "buttons",
+ "type": "PickerButton[]",
+ "complexType": {
+ "original": "PickerButton[]",
+ "resolved": "PickerButton[]",
+ "references": {
+ "PickerButton": {
+ "location": "import",
+ "path": "./picker-interface",
+ "id": "src/components/picker-legacy/picker-interface.ts::PickerButton"
+ }
+ }
+ },
+ "mutable": false,
+ "reflectToAttr": false,
+ "docs": "Array of buttons to be displayed at the top of the picker.",
+ "docsTags": [],
+ "default": "[]",
+ "values": [
+ {
+ "type": "PickerButton[]"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "columns",
+ "type": "PickerColumn[]",
+ "complexType": {
+ "original": "PickerColumn[]",
+ "resolved": "PickerColumn[]",
+ "references": {
+ "PickerColumn": {
+ "location": "import",
+ "path": "./picker-interface",
+ "id": "src/components/picker-legacy/picker-interface.ts::PickerColumn"
+ }
+ }
+ },
+ "mutable": false,
+ "reflectToAttr": false,
+ "docs": "Array of columns to be displayed in the picker.",
+ "docsTags": [],
+ "default": "[]",
+ "values": [
+ {
+ "type": "PickerColumn[]"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "cssClass",
+ "type": "string | string[] | undefined",
+ "complexType": {
+ "original": "string | string[]",
+ "resolved": "string | string[] | undefined",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "css-class",
+ "reflectToAttr": false,
+ "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "string"
+ },
+ {
+ "type": "string[]"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "duration",
+ "type": "number",
+ "complexType": {
+ "original": "number",
+ "resolved": "number",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "duration",
+ "reflectToAttr": false,
+ "docs": "Number of milliseconds to wait before dismissing the picker.",
+ "docsTags": [],
+ "default": "0",
+ "values": [
+ {
+ "type": "number"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "enterAnimation",
+ "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+ "complexType": {
+ "original": "AnimationBuilder",
+ "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+ "references": {
+ "AnimationBuilder": {
+ "location": "import",
+ "path": "../../interface",
+ "id": "src/interface.d.ts::AnimationBuilder"
+ }
+ }
+ },
+ "mutable": false,
+ "reflectToAttr": false,
+ "docs": "Animation to use when the picker is presented.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "((baseEl: any, opts?: any) => Animation)"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "htmlAttributes",
+ "type": "undefined | { [key: string]: any; }",
+ "complexType": {
+ "original": "{ [key: string]: any }",
+ "resolved": "undefined | { [key: string]: any; }",
+ "references": {}
+ },
+ "mutable": false,
+ "reflectToAttr": false,
+ "docs": "Additional attributes to pass to the picker.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "undefined"
+ },
+ {
+ "type": "{ [key: string]: any; }"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "isOpen",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "is-open",
+ "reflectToAttr": false,
+ "docs": "If `true`, the picker will open. If `false`, the picker will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the pickerController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe picker dismisses. You will need to do that in your code.",
+ "docsTags": [],
+ "default": "false",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "keyboardClose",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "keyboard-close",
+ "reflectToAttr": false,
+ "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
+ "docsTags": [],
+ "default": "true",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "leaveAnimation",
+ "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+ "complexType": {
+ "original": "AnimationBuilder",
+ "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+ "references": {
+ "AnimationBuilder": {
+ "location": "import",
+ "path": "../../interface",
+ "id": "src/interface.d.ts::AnimationBuilder"
+ }
+ }
+ },
+ "mutable": false,
+ "reflectToAttr": false,
+ "docs": "Animation to use when the picker is dismissed.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "((baseEl: any, opts?: any) => Animation)"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "mode",
+ "type": "\"ios\" | \"md\"",
+ "mutable": false,
+ "attr": "mode",
+ "reflectToAttr": false,
+ "docs": "The mode determines which platform styles to use.",
+ "docsTags": [],
+ "values": [
+ {
+ "value": "ios",
+ "type": "string"
+ },
+ {
+ "value": "md",
+ "type": "string"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "showBackdrop",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "show-backdrop",
+ "reflectToAttr": false,
+ "docs": "If `true`, a backdrop will be displayed behind the picker.",
+ "docsTags": [],
+ "default": "true",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "trigger",
+ "type": "string | undefined",
+ "complexType": {
+ "original": "string | undefined",
+ "resolved": "string | undefined",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "trigger",
+ "reflectToAttr": false,
+ "docs": "An ID corresponding to the trigger element that\ncauses the picker to open when clicked.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "string"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": false,
+ "required": false
+ }
+ ],
+ "methods": [
+ {
+ "name": "dismiss",
+ "returns": {
+ "type": "Promise",
+ "docs": ""
+ },
+ "complexType": {
+ "signature": "(data?: any, role?: string) => Promise",
+ "parameters": [
+ {
+ "name": "data",
+ "type": "any",
+ "docs": "Any data to emit in the dismiss events."
+ },
+ {
+ "name": "role",
+ "type": "string | undefined",
+ "docs": "The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ }
+ ],
+ "references": {
+ "Promise": {
+ "location": "global",
+ "id": "global::Promise"
+ }
+ },
+ "return": "Promise"
+ },
+ "signature": "dismiss(data?: any, role?: string) => Promise",
+ "parameters": [
+ {
+ "name": "data",
+ "type": "any",
+ "docs": "Any data to emit in the dismiss events."
+ },
+ {
+ "name": "role",
+ "type": "string | undefined",
+ "docs": "The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ }
+ ],
+ "docs": "Dismiss the picker overlay after it has been presented.",
+ "docsTags": [
+ {
+ "name": "param",
+ "text": "data Any data to emit in the dismiss events."
+ },
+ {
+ "name": "param",
+ "text": "role The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ }
+ ]
+ },
+ {
+ "name": "getColumn",
+ "returns": {
+ "type": "Promise",
+ "docs": ""
+ },
+ "complexType": {
+ "signature": "(name: string) => Promise",
+ "parameters": [
+ {
+ "name": "name",
+ "type": "string",
+ "docs": "The name of the column."
+ }
+ ],
+ "references": {
+ "Promise": {
+ "location": "global",
+ "id": "global::Promise"
+ },
+ "PickerColumn": {
+ "location": "import",
+ "path": "./picker-interface",
+ "id": "src/components/picker-legacy/picker-interface.ts::PickerColumn"
+ }
+ },
+ "return": "Promise"
+ },
+ "signature": "getColumn(name: string) => Promise",
+ "parameters": [
+ {
+ "name": "name",
+ "type": "string",
+ "docs": "The name of the column."
+ }
+ ],
+ "docs": "Get the column that matches the specified name.",
+ "docsTags": [
+ {
+ "name": "param",
+ "text": "name The name of the column."
+ }
+ ]
+ },
+ {
+ "name": "onDidDismiss",
+ "returns": {
+ "type": "Promise>",
+ "docs": ""
+ },
+ "complexType": {
+ "signature": "() => Promise>",
+ "parameters": [],
+ "references": {
+ "Promise": {
+ "location": "global",
+ "id": "global::Promise"
+ },
+ "OverlayEventDetail": {
+ "location": "import",
+ "path": "../../utils/overlays-interface",
+ "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+ },
+ "T": {
+ "location": "global",
+ "id": "global::T"
+ }
+ },
+ "return": "Promise>"
+ },
+ "signature": "onDidDismiss() => Promise>",
+ "parameters": [],
+ "docs": "Returns a promise that resolves when the picker did dismiss.",
+ "docsTags": []
+ },
+ {
+ "name": "onWillDismiss",
+ "returns": {
+ "type": "Promise>",
+ "docs": ""
+ },
+ "complexType": {
+ "signature": "() => Promise>",
+ "parameters": [],
+ "references": {
+ "Promise": {
+ "location": "global",
+ "id": "global::Promise"
+ },
+ "OverlayEventDetail": {
+ "location": "import",
+ "path": "../../utils/overlays-interface",
+ "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+ },
+ "T": {
+ "location": "global",
+ "id": "global::T"
+ }
+ },
+ "return": "Promise>"
+ },
+ "signature": "onWillDismiss() => Promise>",
+ "parameters": [],
+ "docs": "Returns a promise that resolves when the picker will dismiss.",
+ "docsTags": []
+ },
+ {
+ "name": "present",
+ "returns": {
+ "type": "Promise",
+ "docs": ""
+ },
+ "complexType": {
+ "signature": "() => Promise",
+ "parameters": [],
+ "references": {
+ "Promise": {
+ "location": "global",
+ "id": "global::Promise"
+ }
+ },
+ "return": "Promise"
+ },
+ "signature": "present() => Promise",
+ "parameters": [],
+ "docs": "Present the picker overlay after it has been created.",
+ "docsTags": []
+ }
+ ],
+ "events": [
+ {
+ "event": "didDismiss",
+ "detail": "OverlayEventDetail",
+ "bubbles": true,
+ "complexType": {
+ "original": "OverlayEventDetail",
+ "resolved": "OverlayEventDetail",
+ "references": {
+ "OverlayEventDetail": {
+ "location": "import",
+ "path": "../../utils/overlays-interface",
+ "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+ }
+ }
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted after the picker has dismissed.\nShorthand for ionPickerDidDismiss.",
+ "docsTags": []
+ },
+ {
+ "event": "didPresent",
+ "detail": "void",
+ "bubbles": true,
+ "complexType": {
+ "original": "void",
+ "resolved": "void",
+ "references": {}
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted after the picker has presented.\nShorthand for ionPickerWillDismiss.",
+ "docsTags": []
+ },
+ {
+ "event": "ionPickerDidDismiss",
+ "detail": "OverlayEventDetail",
+ "bubbles": true,
+ "complexType": {
+ "original": "OverlayEventDetail",
+ "resolved": "OverlayEventDetail",
+ "references": {
+ "OverlayEventDetail": {
+ "location": "import",
+ "path": "../../utils/overlays-interface",
+ "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+ }
+ }
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted after the picker has dismissed.",
+ "docsTags": []
+ },
+ {
+ "event": "ionPickerDidPresent",
+ "detail": "void",
+ "bubbles": true,
+ "complexType": {
+ "original": "void",
+ "resolved": "void",
+ "references": {}
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted after the picker has presented.",
+ "docsTags": []
+ },
+ {
+ "event": "ionPickerWillDismiss",
+ "detail": "OverlayEventDetail",
+ "bubbles": true,
+ "complexType": {
+ "original": "OverlayEventDetail",
+ "resolved": "OverlayEventDetail",
+ "references": {
+ "OverlayEventDetail": {
+ "location": "import",
+ "path": "../../utils/overlays-interface",
+ "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+ }
+ }
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted before the picker has dismissed.",
+ "docsTags": []
+ },
+ {
+ "event": "ionPickerWillPresent",
+ "detail": "void",
+ "bubbles": true,
+ "complexType": {
+ "original": "void",
+ "resolved": "void",
+ "references": {}
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted before the picker has presented.",
+ "docsTags": []
+ },
+ {
+ "event": "willDismiss",
+ "detail": "OverlayEventDetail",
+ "bubbles": true,
+ "complexType": {
+ "original": "OverlayEventDetail",
+ "resolved": "OverlayEventDetail",
+ "references": {
+ "OverlayEventDetail": {
+ "location": "import",
+ "path": "../../utils/overlays-interface",
+ "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+ }
+ }
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted before the picker has dismissed.\nShorthand for ionPickerWillDismiss.",
+ "docsTags": []
+ },
+ {
+ "event": "willPresent",
+ "detail": "void",
+ "bubbles": true,
+ "complexType": {
+ "original": "void",
+ "resolved": "void",
+ "references": {}
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted before the picker has presented.\nShorthand for ionPickerWillPresent.",
+ "docsTags": []
+ }
+ ],
+ "listeners": [],
+ "styles": [
+ {
+ "name": "--backdrop-opacity",
+ "annotation": "prop",
+ "docs": "Opacity of the backdrop"
+ },
+ {
+ "name": "--background",
+ "annotation": "prop",
+ "docs": "Background of the picker"
+ },
+ {
+ "name": "--background-rgb",
+ "annotation": "prop",
+ "docs": "Background of the picker in rgb format"
+ },
+ {
+ "name": "--border-color",
+ "annotation": "prop",
+ "docs": "Border color of the picker"
+ },
+ {
+ "name": "--border-radius",
+ "annotation": "prop",
+ "docs": "Border radius of the picker"
+ },
+ {
+ "name": "--border-style",
+ "annotation": "prop",
+ "docs": "Border style of the picker"
+ },
+ {
+ "name": "--border-width",
+ "annotation": "prop",
+ "docs": "Border width of the picker"
+ },
+ {
+ "name": "--height",
+ "annotation": "prop",
+ "docs": "Height of the picker"
+ },
+ {
+ "name": "--max-height",
+ "annotation": "prop",
+ "docs": "Maximum height of the picker"
+ },
+ {
+ "name": "--max-width",
+ "annotation": "prop",
+ "docs": "Maximum width of the picker"
+ },
+ {
+ "name": "--min-height",
+ "annotation": "prop",
+ "docs": "Minimum height of the picker"
+ },
+ {
+ "name": "--min-width",
+ "annotation": "prop",
+ "docs": "Minimum width of the picker"
+ },
+ {
+ "name": "--width",
+ "annotation": "prop",
+ "docs": "Width of the picker"
+ }
+ ],
+ "slots": [],
+ "parts": [],
+ "dependents": [],
+ "dependencies": [
+ "ion-backdrop",
+ "ion-picker-legacy-column"
+ ],
+ "dependencyGraph": {
+ "ion-picker-legacy": [
+ "ion-backdrop",
+ "ion-picker-legacy-column"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/src/translate/.detection/api/picker-legacy.readme.md b/src/translate/.detection/api/picker-legacy.readme.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/translate/.detection/api/picker.json b/src/translate/.detection/api/picker.json
index bf4b301930e..501134b2608 100644
--- a/src/translate/.detection/api/picker.json
+++ b/src/translate/.detection/api/picker.json
@@ -1,6 +1,6 @@
{
"filePath": "src/components/picker/picker.tsx",
- "encapsulation": "scoped",
+ "encapsulation": "shadow",
"tag": "ion-picker",
"docs": "",
"docsTags": [
@@ -11,278 +11,6 @@
],
"usage": {},
"props": [
- {
- "name": "animated",
- "type": "boolean",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean",
- "references": {}
- },
- "mutable": false,
- "attr": "animated",
- "reflectToAttr": false,
- "docs": "If `true`, the picker will animate.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "backdropDismiss",
- "type": "boolean",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean",
- "references": {}
- },
- "mutable": false,
- "attr": "backdrop-dismiss",
- "reflectToAttr": false,
- "docs": "If `true`, the picker will be dismissed when the backdrop is clicked.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "buttons",
- "type": "PickerButton[]",
- "complexType": {
- "original": "PickerButton[]",
- "resolved": "PickerButton[]",
- "references": {
- "PickerButton": {
- "location": "import",
- "path": "./picker-interface",
- "id": "src/components/picker/picker-interface.ts::PickerButton"
- }
- }
- },
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Array of buttons to be displayed at the top of the picker.",
- "docsTags": [],
- "default": "[]",
- "values": [
- {
- "type": "PickerButton[]"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "columns",
- "type": "PickerColumn[]",
- "complexType": {
- "original": "PickerColumn[]",
- "resolved": "PickerColumn[]",
- "references": {
- "PickerColumn": {
- "location": "import",
- "path": "./picker-interface",
- "id": "src/components/picker/picker-interface.ts::PickerColumn"
- }
- }
- },
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Array of columns to be displayed in the picker.",
- "docsTags": [],
- "default": "[]",
- "values": [
- {
- "type": "PickerColumn[]"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "cssClass",
- "type": "string | string[] | undefined",
- "complexType": {
- "original": "string | string[]",
- "resolved": "string | string[] | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "css-class",
- "reflectToAttr": false,
- "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
- "docsTags": [],
- "values": [
- {
- "type": "string"
- },
- {
- "type": "string[]"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "duration",
- "type": "number",
- "complexType": {
- "original": "number",
- "resolved": "number",
- "references": {}
- },
- "mutable": false,
- "attr": "duration",
- "reflectToAttr": false,
- "docs": "Number of milliseconds to wait before dismissing the picker.",
- "docsTags": [],
- "default": "0",
- "values": [
- {
- "type": "number"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "enterAnimation",
- "type": "((baseEl: any, opts?: any) => Animation) | undefined",
- "complexType": {
- "original": "AnimationBuilder",
- "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
- "references": {
- "AnimationBuilder": {
- "location": "import",
- "path": "../../interface",
- "id": "src/interface.d.ts::AnimationBuilder"
- }
- }
- },
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Animation to use when the picker is presented.",
- "docsTags": [],
- "values": [
- {
- "type": "((baseEl: any, opts?: any) => Animation)"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "htmlAttributes",
- "type": "undefined | { [key: string]: any; }",
- "complexType": {
- "original": "{ [key: string]: any }",
- "resolved": "undefined | { [key: string]: any; }",
- "references": {}
- },
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Additional attributes to pass to the picker.",
- "docsTags": [],
- "values": [
- {
- "type": "undefined"
- },
- {
- "type": "{ [key: string]: any; }"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "isOpen",
- "type": "boolean",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean",
- "references": {}
- },
- "mutable": false,
- "attr": "is-open",
- "reflectToAttr": false,
- "docs": "If `true`, the picker will open. If `false`, the picker will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the pickerController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe picker dismisses. You will need to do that in your code.",
- "docsTags": [],
- "default": "false",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "keyboardClose",
- "type": "boolean",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean",
- "references": {}
- },
- "mutable": false,
- "attr": "keyboard-close",
- "reflectToAttr": false,
- "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "leaveAnimation",
- "type": "((baseEl: any, opts?: any) => Animation) | undefined",
- "complexType": {
- "original": "AnimationBuilder",
- "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
- "references": {
- "AnimationBuilder": {
- "location": "import",
- "path": "../../interface",
- "id": "src/interface.d.ts::AnimationBuilder"
- }
- }
- },
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Animation to use when the picker is dismissed.",
- "docsTags": [],
- "values": [
- {
- "type": "((baseEl: any, opts?: any) => Animation)"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "mode",
"type": "\"ios\" | \"md\"",
@@ -303,454 +31,43 @@
],
"optional": true,
"required": false
- },
- {
- "name": "showBackdrop",
- "type": "boolean",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean",
- "references": {}
- },
- "mutable": false,
- "attr": "show-backdrop",
- "reflectToAttr": false,
- "docs": "If `true`, a backdrop will be displayed behind the picker.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "trigger",
- "type": "string | undefined",
- "complexType": {
- "original": "string | undefined",
- "resolved": "string | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "trigger",
- "reflectToAttr": false,
- "docs": "An ID corresponding to the trigger element that\ncauses the picker to open when clicked.",
- "docsTags": [],
- "values": [
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": false,
- "required": false
}
],
- "methods": [
+ "methods": [],
+ "events": [],
+ "listeners": [
{
- "name": "dismiss",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "complexType": {
- "signature": "(data?: any, role?: string) => Promise",
- "parameters": [
- {
- "name": "data",
- "type": "any",
- "docs": "Any data to emit in the dismiss events."
- },
- {
- "name": "role",
- "type": "string | undefined",
- "docs": "The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
- }
- ],
- "references": {
- "Promise": {
- "location": "global",
- "id": "global::Promise"
- }
- },
- "return": "Promise"
- },
- "signature": "dismiss(data?: any, role?: string) => Promise",
- "parameters": [
- {
- "name": "data",
- "type": "any",
- "docs": "Any data to emit in the dismiss events."
- },
- {
- "name": "role",
- "type": "string | undefined",
- "docs": "The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
- }
- ],
- "docs": "Dismiss the picker overlay after it has been presented.",
- "docsTags": [
- {
- "name": "param",
- "text": "data Any data to emit in the dismiss events."
- },
- {
- "name": "param",
- "text": "role The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
- }
- ]
- },
- {
- "name": "getColumn",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "complexType": {
- "signature": "(name: string) => Promise",
- "parameters": [
- {
- "name": "name",
- "type": "string",
- "docs": "The name of the column."
- }
- ],
- "references": {
- "Promise": {
- "location": "global",
- "id": "global::Promise"
- },
- "PickerColumn": {
- "location": "import",
- "path": "./picker-interface",
- "id": "src/components/picker/picker-interface.ts::PickerColumn"
- }
- },
- "return": "Promise"
- },
- "signature": "getColumn(name: string) => Promise",
- "parameters": [
- {
- "name": "name",
- "type": "string",
- "docs": "The name of the column."
- }
- ],
- "docs": "Get the column that matches the specified name.",
- "docsTags": [
- {
- "name": "param",
- "text": "name The name of the column."
- }
- ]
- },
- {
- "name": "onDidDismiss",
- "returns": {
- "type": "Promise>",
- "docs": ""
- },
- "complexType": {
- "signature": "() => Promise>",
- "parameters": [],
- "references": {
- "Promise": {
- "location": "global",
- "id": "global::Promise"
- },
- "OverlayEventDetail": {
- "location": "import",
- "path": "../../utils/overlays-interface",
- "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
- },
- "T": {
- "location": "global",
- "id": "global::T"
- }
- },
- "return": "Promise>"
- },
- "signature": "onDidDismiss() => Promise>",
- "parameters": [],
- "docs": "Returns a promise that resolves when the picker did dismiss.",
- "docsTags": []
- },
- {
- "name": "onWillDismiss",
- "returns": {
- "type": "Promise>",
- "docs": ""
- },
- "complexType": {
- "signature": "() => Promise>",
- "parameters": [],
- "references": {
- "Promise": {
- "location": "global",
- "id": "global::Promise"
- },
- "OverlayEventDetail": {
- "location": "import",
- "path": "../../utils/overlays-interface",
- "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
- },
- "T": {
- "location": "global",
- "id": "global::T"
- }
- },
- "return": "Promise>"
- },
- "signature": "onWillDismiss() => Promise>",
- "parameters": [],
- "docs": "Returns a promise that resolves when the picker will dismiss.",
- "docsTags": []
- },
- {
- "name": "present",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "complexType": {
- "signature": "() => Promise",
- "parameters": [],
- "references": {
- "Promise": {
- "location": "global",
- "id": "global::Promise"
- }
- },
- "return": "Promise"
- },
- "signature": "present() => Promise",
- "parameters": [],
- "docs": "Present the picker overlay after it has been created.",
- "docsTags": []
+ "event": "touchstart",
+ "capture": false,
+ "passive": true
}
],
- "events": [
- {
- "event": "didDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "complexType": {
- "original": "OverlayEventDetail",
- "resolved": "OverlayEventDetail",
- "references": {
- "OverlayEventDetail": {
- "location": "import",
- "path": "../../utils/overlays-interface",
- "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
- }
- }
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the picker has dismissed.\nShorthand for ionPickerDidDismiss.",
- "docsTags": []
- },
- {
- "event": "didPresent",
- "detail": "void",
- "bubbles": true,
- "complexType": {
- "original": "void",
- "resolved": "void",
- "references": {}
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the picker has presented.\nShorthand for ionPickerWillDismiss.",
- "docsTags": []
- },
- {
- "event": "ionPickerDidDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "complexType": {
- "original": "OverlayEventDetail",
- "resolved": "OverlayEventDetail",
- "references": {
- "OverlayEventDetail": {
- "location": "import",
- "path": "../../utils/overlays-interface",
- "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
- }
- }
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the picker has dismissed.",
- "docsTags": []
- },
- {
- "event": "ionPickerDidPresent",
- "detail": "void",
- "bubbles": true,
- "complexType": {
- "original": "void",
- "resolved": "void",
- "references": {}
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the picker has presented.",
- "docsTags": []
- },
- {
- "event": "ionPickerWillDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "complexType": {
- "original": "OverlayEventDetail",
- "resolved": "OverlayEventDetail",
- "references": {
- "OverlayEventDetail": {
- "location": "import",
- "path": "../../utils/overlays-interface",
- "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
- }
- }
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the picker has dismissed.",
- "docsTags": []
- },
- {
- "event": "ionPickerWillPresent",
- "detail": "void",
- "bubbles": true,
- "complexType": {
- "original": "void",
- "resolved": "void",
- "references": {}
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the picker has presented.",
- "docsTags": []
- },
- {
- "event": "willDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "complexType": {
- "original": "OverlayEventDetail",
- "resolved": "OverlayEventDetail",
- "references": {
- "OverlayEventDetail": {
- "location": "import",
- "path": "../../utils/overlays-interface",
- "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
- }
- }
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the picker has dismissed.\nShorthand for ionPickerWillDismiss.",
- "docsTags": []
- },
- {
- "event": "willPresent",
- "detail": "void",
- "bubbles": true,
- "complexType": {
- "original": "void",
- "resolved": "void",
- "references": {}
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the picker has presented.\nShorthand for ionPickerWillPresent.",
- "docsTags": []
- }
- ],
- "listeners": [],
"styles": [
{
- "name": "--backdrop-opacity",
- "annotation": "prop",
- "docs": "Opacity of the backdrop"
- },
- {
- "name": "--background",
- "annotation": "prop",
- "docs": "Background of the picker"
- },
- {
- "name": "--background-rgb",
- "annotation": "prop",
- "docs": "Background of the picker in rgb format"
- },
- {
- "name": "--border-color",
- "annotation": "prop",
- "docs": "Border color of the picker"
- },
- {
- "name": "--border-radius",
- "annotation": "prop",
- "docs": "Border radius of the picker"
- },
- {
- "name": "--border-style",
- "annotation": "prop",
- "docs": "Border style of the picker"
- },
- {
- "name": "--border-width",
- "annotation": "prop",
- "docs": "Border width of the picker"
- },
- {
- "name": "--height",
- "annotation": "prop",
- "docs": "Height of the picker"
- },
- {
- "name": "--max-height",
- "annotation": "prop",
- "docs": "Maximum height of the picker"
- },
- {
- "name": "--max-width",
- "annotation": "prop",
- "docs": "Maximum width of the picker"
- },
- {
- "name": "--min-height",
+ "name": "--fade-background-rgb",
"annotation": "prop",
- "docs": "Minimum height of the picker"
+ "docs": "Background of the gradient covering non-selected items in rgb format"
},
{
- "name": "--min-width",
+ "name": "--highlight-background",
"annotation": "prop",
- "docs": "Minimum width of the picker"
+ "docs": "Background of the picker highlight for the selected item"
},
{
- "name": "--width",
+ "name": "--highlight-border-radius",
"annotation": "prop",
- "docs": "Width of the picker"
+ "docs": "Border radius of the picker highlight for the selected item"
}
],
"slots": [],
"parts": [],
- "dependents": [],
- "dependencies": [
- "ion-backdrop",
- "ion-picker-column"
+ "dependents": [
+ "ion-datetime"
],
+ "dependencies": [],
"dependencyGraph": {
- "ion-picker": [
- "ion-backdrop",
- "ion-picker-column"
+ "ion-datetime": [
+ "ion-picker"
]
}
}
\ No newline at end of file
diff --git a/src/translate/.detection/api/popover.json b/src/translate/.detection/api/popover.json
index d50d008dc57..986919a2f0c 100644
--- a/src/translate/.detection/api/popover.json
+++ b/src/translate/.detection/api/popover.json
@@ -655,7 +655,7 @@
{
"name": "dismissParentPopover",
"type": "boolean",
- "docs": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
+ "docs": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"references": {
@@ -685,7 +685,7 @@
{
"name": "dismissParentPopover",
"type": "boolean",
- "docs": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
+ "docs": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"docs": "Dismiss the popover overlay after it has been presented.",
@@ -700,7 +700,7 @@
},
{
"name": "param",
- "text": "dismissParentPopover If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
+ "text": "dismissParentPopover If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
]
},
diff --git a/src/translate/.detection/api/progress-bar.json b/src/translate/.detection/api/progress-bar.json
index 57087c51dcf..469e15d7c32 100644
--- a/src/translate/.detection/api/progress-bar.json
+++ b/src/translate/.detection/api/progress-bar.json
@@ -213,11 +213,6 @@
"annotation": "prop",
"docs": "Background of the progress track, or the buffer bar if `buffer` is set"
},
- {
- "name": "--buffer-background",
- "annotation": "prop",
- "docs": "DEPRECATED, use `--background` instead"
- },
{
"name": "--progress-background",
"annotation": "prop",
diff --git a/src/translate/.detection/api/radio.json b/src/translate/.detection/api/radio.json
index e71dda4f696..65000af8028 100644
--- a/src/translate/.detection/api/radio.json
+++ b/src/translate/.detection/api/radio.json
@@ -208,30 +208,6 @@
"optional": false,
"required": false
},
- {
- "name": "legacy",
- "type": "boolean | undefined",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "legacy",
- "reflectToAttr": false,
- "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "mode",
"type": "\"ios\" | \"md\"",
diff --git a/src/translate/.detection/api/range.json b/src/translate/.detection/api/range.json
index f0522569dc1..9fc4794bcef 100644
--- a/src/translate/.detection/api/range.json
+++ b/src/translate/.detection/api/range.json
@@ -268,30 +268,6 @@
"optional": false,
"required": false
},
- {
- "name": "legacy",
- "type": "boolean | undefined",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "legacy",
- "reflectToAttr": false,
- "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "max",
"type": "number",
diff --git a/src/translate/.detection/api/ripple-effect.json b/src/translate/.detection/api/ripple-effect.json
index d7837edf05e..0119e383645 100644
--- a/src/translate/.detection/api/ripple-effect.json
+++ b/src/translate/.detection/api/ripple-effect.json
@@ -101,6 +101,7 @@
"ion-button",
"ion-card",
"ion-chip",
+ "ion-datetime",
"ion-datetime-button",
"ion-fab-button",
"ion-item",
@@ -130,6 +131,9 @@
"ion-chip": [
"ion-ripple-effect"
],
+ "ion-datetime": [
+ "ion-ripple-effect"
+ ],
"ion-datetime-button": [
"ion-ripple-effect"
],
diff --git a/src/translate/.detection/api/searchbar.json b/src/translate/.detection/api/searchbar.json
index 15d527bab49..7ccc020ad99 100644
--- a/src/translate/.detection/api/searchbar.json
+++ b/src/translate/.detection/api/searchbar.json
@@ -33,6 +33,28 @@
"optional": false,
"required": false
},
+ {
+ "name": "autocapitalize",
+ "type": "string",
+ "complexType": {
+ "original": "string",
+ "resolved": "string",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "autocapitalize",
+ "reflectToAttr": false,
+ "docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
+ "docsTags": [],
+ "default": "'off'",
+ "values": [
+ {
+ "type": "string"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
{
"name": "autocomplete",
"type": "\"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\"",
@@ -583,6 +605,54 @@
"optional": true,
"required": false
},
+ {
+ "name": "maxlength",
+ "type": "number | undefined",
+ "complexType": {
+ "original": "number",
+ "resolved": "number | undefined",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "maxlength",
+ "reflectToAttr": false,
+ "docs": "This attribute specifies the maximum number of characters that the user can enter.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "number"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "minlength",
+ "type": "number | undefined",
+ "complexType": {
+ "original": "number",
+ "resolved": "number | undefined",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "minlength",
+ "reflectToAttr": false,
+ "docs": "This attribute specifies the minimum number of characters that the user can enter.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "number"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
{
"name": "mode",
"type": "\"ios\" | \"md\"",
diff --git a/src/translate/.detection/api/select.json b/src/translate/.detection/api/select.json
index 843ea40b4ca..cb74d75d1cd 100644
--- a/src/translate/.detection/api/select.json
+++ b/src/translate/.detection/api/select.json
@@ -398,30 +398,6 @@
"optional": true,
"required": false
},
- {
- "name": "legacy",
- "type": "boolean | undefined",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "legacy",
- "reflectToAttr": false,
- "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "mode",
"type": "\"ios\" | \"md\"",
@@ -800,6 +776,11 @@
"annotation": "prop",
"docs": "The color of the highlight on the select when valid"
},
+ {
+ "name": "--highlight-height",
+ "annotation": "prop",
+ "docs": "The height of the highlight on the select. Only applies to md mode."
+ },
{
"name": "--padding-bottom",
"annotation": "prop",
@@ -899,8 +880,7 @@
],
"ion-item": [
"ion-icon",
- "ion-ripple-effect",
- "ion-note"
+ "ion-ripple-effect"
],
"ion-popover": [
"ion-backdrop"
diff --git a/src/translate/.detection/api/textarea.json b/src/translate/.detection/api/textarea.json
index 1be2d116b15..6e460d984fc 100644
--- a/src/translate/.detection/api/textarea.json
+++ b/src/translate/.detection/api/textarea.json
@@ -534,30 +534,6 @@
"optional": false,
"required": false
},
- {
- "name": "legacy",
- "type": "boolean | undefined",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "legacy",
- "reflectToAttr": false,
- "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "maxlength",
"type": "number | undefined",
@@ -1027,6 +1003,11 @@
"annotation": "prop",
"docs": "The color of the highlight on the textarea when valid"
},
+ {
+ "name": "--highlight-height",
+ "annotation": "prop",
+ "docs": "The height of the highlight on the textarea. Only applies to md mode."
+ },
{
"name": "--padding-bottom",
"annotation": "prop",
diff --git a/src/translate/.detection/api/toast.json b/src/translate/.detection/api/toast.json
index 020dda7424b..535b45ad854 100644
--- a/src/translate/.detection/api/toast.json
+++ b/src/translate/.detection/api/toast.json
@@ -629,7 +629,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"references": {
@@ -655,7 +655,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"docs": "Dismiss the toast overlay after it has been presented.",
@@ -666,7 +666,7 @@
},
{
"name": "param",
- "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
]
},
diff --git a/src/translate/.detection/api/toggle.json b/src/translate/.detection/api/toggle.json
index ccb2ba67adb..89c6c9ad8fd 100644
--- a/src/translate/.detection/api/toggle.json
+++ b/src/translate/.detection/api/toggle.json
@@ -38,7 +38,7 @@
"mutable": false,
"attr": "alignment",
"reflectToAttr": false,
- "docs": "How to control the alignment of the toggle and label on the cross axis.\n``\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.",
+ "docs": "How to control the alignment of the toggle and label on the cross axis.\n`\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.",
"docsTags": [],
"default": "'center'",
"values": [
@@ -255,30 +255,6 @@
"optional": false,
"required": false
},
- {
- "name": "legacy",
- "type": "boolean | undefined",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "legacy",
- "reflectToAttr": false,
- "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "mode",
"type": "\"ios\" | \"md\"",
diff --git a/src/translate/api/action-sheet.json b/src/translate/api/action-sheet.json
index 8275037feb7..70d27b707a2 100644
--- a/src/translate/api/action-sheet.json
+++ b/src/translate/api/action-sheet.json
@@ -371,7 +371,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"references": {
@@ -392,7 +392,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"docs": "Dismiss the action sheet overlay after it has been presented.",
@@ -403,7 +403,7 @@
},
{
"name": "param",
- "text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "text": "role The role of the element that is dismissing the action sheet.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the action sheet.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
]
},
@@ -697,6 +697,11 @@
"annotation": "prop",
"docs": "Color of the action sheet button when pressed"
},
+ {
+ "name": "--button-color-disabled",
+ "annotation": "prop",
+ "docs": "Color of the selected action sheet button when disabled"
+ },
{
"name": "--button-color-focused",
"annotation": "prop",
diff --git a/src/translate/api/alert.json b/src/translate/api/alert.json
index 5ae4fd672d5..3bdd0c5b834 100644
--- a/src/translate/api/alert.json
+++ b/src/translate/api/alert.json
@@ -431,7 +431,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"references": {
@@ -452,7 +452,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"docs": "Dismiss the alert overlay after it has been presented.",
@@ -463,7 +463,7 @@
},
{
"name": "param",
- "text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "text": "role The role of the element that is dismissing the alert.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the alert.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
]
},
diff --git a/src/translate/api/backdrop.json b/src/translate/api/backdrop.json
index 0f5566e34ab..f12823722dd 100644
--- a/src/translate/api/backdrop.json
+++ b/src/translate/api/backdrop.json
@@ -106,7 +106,7 @@
"ion-loading",
"ion-menu",
"ion-modal",
- "ion-picker",
+ "ion-picker-legacy",
"ion-popover"
],
"dependencies": [],
@@ -126,7 +126,7 @@
"ion-modal": [
"ion-backdrop"
],
- "ion-picker": [
+ "ion-picker-legacy": [
"ion-backdrop"
],
"ion-popover": [
diff --git a/src/translate/api/button.json b/src/translate/api/button.json
index b8a7ec24677..89fe8199f7b 100644
--- a/src/translate/api/button.json
+++ b/src/translate/api/button.json
@@ -708,7 +708,8 @@
}
],
"dependents": [
- "ion-datetime"
+ "ion-datetime",
+ "ion-input-password-toggle"
],
"dependencies": [
"ion-ripple-effect"
@@ -719,6 +720,9 @@
],
"ion-datetime": [
"ion-button"
+ ],
+ "ion-input-password-toggle": [
+ "ion-button"
]
}
}
\ No newline at end of file
diff --git a/src/translate/api/checkbox.json b/src/translate/api/checkbox.json
index 3bcda6638e0..217be3aedda 100644
--- a/src/translate/api/checkbox.json
+++ b/src/translate/api/checkbox.json
@@ -252,30 +252,6 @@
"optional": false,
"required": false
},
- {
- "name": "legacy",
- "type": "boolean | undefined",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "legacy",
- "reflectToAttr": false,
- "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt checkboxes in to the modern form markup when they are\nusing either the `aria-label` attribute or have text in the default slot. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\n\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "mode",
"type": "\"ios\" | \"md\"",
diff --git a/src/translate/api/datetime.json b/src/translate/api/datetime.json
index e9204645a59..c666c814a49 100644
--- a/src/translate/api/datetime.json
+++ b/src/translate/api/datetime.json
@@ -266,6 +266,44 @@
"optional": false,
"required": false
},
+ {
+ "name": "formatOptions",
+ "type": "undefined | { date: DateTimeFormatOptions; time?: DateTimeFormatOptions | undefined; } | { date?: DateTimeFormatOptions | undefined; time: DateTimeFormatOptions; }",
+ "complexType": {
+ "original": "FormatOptions",
+ "resolved": "undefined | { date: DateTimeFormatOptions; time?: DateTimeFormatOptions | undefined; } | { date?: DateTimeFormatOptions | undefined; time: DateTimeFormatOptions; }",
+ "references": {
+ "FormatOptions": {
+ "location": "import",
+ "path": "./datetime-interface",
+ "id": "src/components/datetime/datetime-interface.ts::FormatOptions"
+ }
+ }
+ },
+ "mutable": false,
+ "reflectToAttr": false,
+ "docs": "Formatting options for dates and times.\nShould include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "undefined"
+ },
+ {
+ "type": "{ date: DateTimeFormatOptions; time?: DateTimeFormatOptions"
+ },
+ {
+ "type": "undefined; }"
+ },
+ {
+ "type": "{ date?: DateTimeFormatOptions"
+ },
+ {
+ "type": "undefined; time: DateTimeFormatOptions; }"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
{
"name": "highlightedDates",
"type": "((dateIsoString: string) => DatetimeHighlightStyle | undefined) | DatetimeHighlight[] | undefined",
@@ -1093,6 +1131,11 @@
"name": "--wheel-highlight-background",
"annotation": "prop",
"docs": "The background of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts."
+ },
+ {
+ "name": "--wheel-highlight-border-radius",
+ "annotation": "prop",
+ "docs": "The border radius of the highlight under the selected item when using a wheel style layout, or in the month/year picker for grid style layouts."
}
],
"slots": [
@@ -1151,32 +1194,27 @@
"dependencies": [
"ion-buttons",
"ion-button",
- "ion-picker-internal",
- "ion-picker-column-internal",
- "ion-item",
- "ion-label",
+ "ion-picker",
+ "ion-picker-column",
+ "ion-picker-column-option",
"ion-icon",
+ "ion-ripple-effect",
"ion-popover"
],
"dependencyGraph": {
"ion-datetime": [
"ion-buttons",
"ion-button",
- "ion-picker-internal",
- "ion-picker-column-internal",
- "ion-item",
- "ion-label",
+ "ion-picker",
+ "ion-picker-column",
+ "ion-picker-column-option",
"ion-icon",
+ "ion-ripple-effect",
"ion-popover"
],
"ion-button": [
"ion-ripple-effect"
],
- "ion-item": [
- "ion-icon",
- "ion-ripple-effect",
- "ion-note"
- ],
"ion-popover": [
"ion-backdrop"
]
diff --git a/src/translate/api/input-password-toggle.json b/src/translate/api/input-password-toggle.json
new file mode 100644
index 00000000000..55555fbf396
--- /dev/null
+++ b/src/translate/api/input-password-toggle.json
@@ -0,0 +1,170 @@
+{
+ "filePath": "src/components/input-password-toggle/input-password-toggle.tsx",
+ "encapsulation": "shadow",
+ "tag": "ion-input-password-toggle",
+ "docs": "",
+ "docsTags": [
+ {
+ "name": "virtualProp",
+ "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
+ }
+ ],
+ "usage": {},
+ "props": [
+ {
+ "name": "color",
+ "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record | undefined",
+ "complexType": {
+ "original": "Color",
+ "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record | undefined",
+ "references": {
+ "Color": {
+ "location": "import",
+ "path": "../../interface",
+ "id": "src/interface.d.ts::Color"
+ }
+ }
+ },
+ "mutable": false,
+ "attr": "color",
+ "reflectToAttr": true,
+ "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+ "docsTags": [],
+ "values": [
+ {
+ "value": "danger",
+ "type": "string"
+ },
+ {
+ "value": "dark",
+ "type": "string"
+ },
+ {
+ "value": "light",
+ "type": "string"
+ },
+ {
+ "value": "medium",
+ "type": "string"
+ },
+ {
+ "value": "primary",
+ "type": "string"
+ },
+ {
+ "value": "secondary",
+ "type": "string"
+ },
+ {
+ "value": "success",
+ "type": "string"
+ },
+ {
+ "value": "tertiary",
+ "type": "string"
+ },
+ {
+ "value": "warning",
+ "type": "string"
+ },
+ {
+ "type": "string & Record"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "hideIcon",
+ "type": "string | undefined",
+ "complexType": {
+ "original": "string",
+ "resolved": "string | undefined",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "hide-icon",
+ "reflectToAttr": false,
+ "docs": "The icon that can be used to represent hiding a password. If not set, the \"eyeOff\" Ionicon will be used.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "string"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "mode",
+ "type": "\"ios\" | \"md\"",
+ "mutable": false,
+ "attr": "mode",
+ "reflectToAttr": false,
+ "docs": "The mode determines which platform styles to use.",
+ "docsTags": [],
+ "values": [
+ {
+ "value": "ios",
+ "type": "string"
+ },
+ {
+ "value": "md",
+ "type": "string"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "showIcon",
+ "type": "string | undefined",
+ "complexType": {
+ "original": "string",
+ "resolved": "string | undefined",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "show-icon",
+ "reflectToAttr": false,
+ "docs": "The icon that can be used to represent showing a password. If not set, the \"eye\" Ionicon will be used.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "string"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ }
+ ],
+ "methods": [],
+ "events": [],
+ "listeners": [],
+ "styles": [],
+ "slots": [],
+ "parts": [],
+ "dependents": [],
+ "dependencies": [
+ "ion-button",
+ "ion-icon"
+ ],
+ "dependencyGraph": {
+ "ion-input-password-toggle": [
+ "ion-button",
+ "ion-icon"
+ ],
+ "ion-button": [
+ "ion-ripple-effect"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/src/translate/api/input-password-toggle.readme.md b/src/translate/api/input-password-toggle.readme.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/translate/api/input.json b/src/translate/api/input.json
index e9b6e785411..8b128fb0017 100644
--- a/src/translate/api/input.json
+++ b/src/translate/api/input.json
@@ -23,35 +23,6 @@
],
"usage": {},
"props": [
- {
- "name": "accept",
- "type": "string | undefined",
- "complexType": {
- "original": "string",
- "resolved": "string | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "accept",
- "reflectToAttr": false,
- "docs": "This attribute is ignored.",
- "docsTags": [
- {
- "name": "deprecated"
- }
- ],
- "deprecation": "",
- "values": [
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "autocapitalize",
"type": "string",
@@ -555,7 +526,7 @@
},
"mutable": false,
"attr": "disabled",
- "reflectToAttr": false,
+ "reflectToAttr": true,
"docs": "If `true`, the user cannot interact with the input.",
"docsTags": [],
"default": "false",
@@ -809,30 +780,6 @@
"optional": false,
"required": false
},
- {
- "name": "legacy",
- "type": "boolean | undefined",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "legacy",
- "reflectToAttr": false,
- "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "max",
"type": "number | string | undefined",
@@ -1060,7 +1007,7 @@
},
"mutable": false,
"attr": "readonly",
- "reflectToAttr": false,
+ "reflectToAttr": true,
"docs": "If `true`, the user cannot modify the value.",
"docsTags": [],
"default": "false",
@@ -1119,30 +1066,6 @@
"optional": true,
"required": false
},
- {
- "name": "size",
- "type": "number | undefined",
- "complexType": {
- "original": "number",
- "resolved": "number | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "size",
- "reflectToAttr": false,
- "docs": "",
- "docsTags": [],
- "values": [
- {
- "type": "number"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "spellcheck",
"type": "boolean",
@@ -1471,6 +1394,11 @@
"annotation": "prop",
"docs": "The color of the highlight on the input when valid"
},
+ {
+ "name": "--highlight-height",
+ "annotation": "prop",
+ "docs": "The height of the highlight on the input. Only applies to md mode."
+ },
{
"name": "--padding-bottom",
"annotation": "prop",
diff --git a/src/translate/api/item.json b/src/translate/api/item.json
index 2ed7a7e3db9..4b1b8490a66 100644
--- a/src/translate/api/item.json
+++ b/src/translate/api/item.json
@@ -20,14 +20,6 @@
"name": "slot",
"text": "end - Content is placed to the right of the item text in LTR, and to the left in RTL."
},
- {
- "name": "slot",
- "text": "helper - Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the \"helperText\" property on ion-input or ion-textarea instead."
- },
- {
- "name": "slot",
- "text": "error - Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the \"errorText\" property on ion-input or ion-textarea instead."
- },
{
"name": "part",
"text": "native - The native HTML button, anchor or div element that wraps all child elements."
@@ -127,69 +119,6 @@
"optional": true,
"required": false
},
- {
- "name": "counter",
- "type": "boolean",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean",
- "references": {}
- },
- "mutable": false,
- "attr": "counter",
- "reflectToAttr": false,
- "docs": "If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.",
- "docsTags": [
- {
- "name": "deprecated",
- "text": "Use the `counter` property on `ion-input` or `ion-textarea` instead."
- }
- ],
- "default": "false",
- "deprecation": "Use the `counter` property on `ion-input` or `ion-textarea` instead.",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "counterFormatter",
- "type": "((inputLength: number, maxLength: number) => string) | undefined",
- "complexType": {
- "original": "CounterFormatter",
- "resolved": "((inputLength: number, maxLength: number) => string) | undefined",
- "references": {
- "CounterFormatter": {
- "location": "import",
- "path": "./item-interface",
- "id": "src/components/item/item-interface.ts::CounterFormatter"
- }
- }
- },
- "mutable": false,
- "reflectToAttr": false,
- "docs": "A callback used to format the counter text.\nBy default the counter text is set to \"itemLength / maxLength\".",
- "docsTags": [
- {
- "name": "deprecated",
- "text": "Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead."
- }
- ],
- "deprecation": "Use the `counterFormatter` property on `ion-input` or `ion-textarea` instead.",
- "values": [
- {
- "type": "((inputLength: number, maxLength: number) => string)"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "detail",
"type": "boolean | undefined",
@@ -282,41 +211,6 @@
"optional": false,
"required": false
},
- {
- "name": "fill",
- "type": "\"outline\" | \"solid\" | undefined",
- "complexType": {
- "original": "'outline' | 'solid'",
- "resolved": "\"outline\" | \"solid\" | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "fill",
- "reflectToAttr": false,
- "docs": "The fill for the item. If `\"solid\"` the item will have a background. If\n`\"outline\"` the item will be transparent with a border. Only available in `md` mode.",
- "docsTags": [
- {
- "name": "deprecated",
- "text": "Use the `fill` property on `ion-input` or `ion-textarea` instead."
- }
- ],
- "deprecation": "Use the `fill` property on `ion-input` or `ion-textarea` instead.",
- "values": [
- {
- "value": "outline",
- "type": "string"
- },
- {
- "value": "solid",
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "href",
"type": "string | undefined",
@@ -485,31 +379,6 @@
"optional": false,
"required": false
},
- {
- "name": "shape",
- "type": "\"round\" | undefined",
- "complexType": {
- "original": "'round'",
- "resolved": "\"round\" | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "shape",
- "reflectToAttr": false,
- "docs": "The shape of the item. If \"round\" it will have increased\nborder radius.",
- "docsTags": [],
- "values": [
- {
- "value": "round",
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "target",
"type": "string | undefined",
@@ -569,11 +438,6 @@
"methods": [],
"events": [],
"listeners": [
- {
- "event": "ionInput",
- "capture": false,
- "passive": false
- },
{
"event": "ionColor",
"capture": false,
@@ -676,26 +540,6 @@
"annotation": "prop",
"docs": "Opacity of the item detail icon"
},
- {
- "name": "--highlight-color-focused",
- "annotation": "prop",
- "docs": "The color of the highlight on the item when focused. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
- },
- {
- "name": "--highlight-color-invalid",
- "annotation": "prop",
- "docs": "The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
- },
- {
- "name": "--highlight-color-valid",
- "annotation": "prop",
- "docs": "The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
- },
- {
- "name": "--highlight-height",
- "annotation": "prop",
- "docs": "The height of the highlight on the item. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax."
- },
{
"name": "--inner-border-width",
"annotation": "prop",
@@ -771,14 +615,6 @@
"name": "end",
"docs": "Content is placed to the right of the item text in LTR, and to the left in RTL."
},
- {
- "name": "error",
- "docs": "Content is placed under the item and displayed when an error is detected. **DEPRECATED** Use the \"errorText\" property on ion-input or ion-textarea instead."
- },
- {
- "name": "helper",
- "docs": "Content is placed under the item and displayed when no error is detected. **DEPRECATED** Use the \"helperText\" property on ion-input or ion-textarea instead."
- },
{
"name": "start",
"docs": "Content is placed to the left of the item text in LTR, and to the right in RTL."
@@ -795,22 +631,16 @@
}
],
"dependents": [
- "ion-datetime",
"ion-select-popover"
],
"dependencies": [
"ion-icon",
- "ion-ripple-effect",
- "ion-note"
+ "ion-ripple-effect"
],
"dependencyGraph": {
"ion-item": [
"ion-icon",
- "ion-ripple-effect",
- "ion-note"
- ],
- "ion-datetime": [
- "ion-item"
+ "ion-ripple-effect"
],
"ion-select-popover": [
"ion-item"
diff --git a/src/translate/api/label.json b/src/translate/api/label.json
index 28e1f1d248c..81dab454e11 100644
--- a/src/translate/api/label.json
+++ b/src/translate/api/label.json
@@ -145,14 +145,10 @@
"slots": [],
"parts": [],
"dependents": [
- "ion-datetime",
"ion-select-popover"
],
"dependencies": [],
"dependencyGraph": {
- "ion-datetime": [
- "ion-label"
- ],
"ion-select-popover": [
"ion-label"
]
diff --git a/src/translate/api/loading.json b/src/translate/api/loading.json
index 73826774e7b..e6b62d91309 100644
--- a/src/translate/api/loading.json
+++ b/src/translate/api/loading.json
@@ -436,7 +436,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"references": {
@@ -457,7 +457,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"docs": "Dismiss the loading overlay after it has been presented.",
@@ -468,7 +468,7 @@
},
{
"name": "param",
- "text": "role The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "text": "role The role of the element that is dismissing the loading.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the loading.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
]
},
diff --git a/src/translate/api/menu.json b/src/translate/api/menu.json
index 791560d43cf..fd1e750d305 100644
--- a/src/translate/api/menu.json
+++ b/src/translate/api/menu.json
@@ -164,11 +164,17 @@
},
{
"name": "type",
- "type": "string | undefined",
+ "type": "\"overlay\" | \"push\" | \"reveal\" | undefined",
"complexType": {
- "original": "string",
- "resolved": "string | undefined",
- "references": {}
+ "original": "MenuType",
+ "resolved": "\"overlay\" | \"push\" | \"reveal\" | undefined",
+ "references": {
+ "MenuType": {
+ "location": "import",
+ "path": "./menu-interface",
+ "id": "src/components/menu/menu-interface.ts::MenuType"
+ }
+ }
},
"mutable": true,
"attr": "type",
@@ -177,6 +183,15 @@
"docsTags": [],
"values": [
{
+ "value": "overlay",
+ "type": "string"
+ },
+ {
+ "value": "push",
+ "type": "string"
+ },
+ {
+ "value": "reveal",
"type": "string"
},
{
diff --git a/src/translate/api/modal.json b/src/translate/api/modal.json
index 69d10333278..46ee07ca7b5 100644
--- a/src/translate/api/modal.json
+++ b/src/translate/api/modal.json
@@ -494,7 +494,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
+ "docs": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"references": {
@@ -519,7 +519,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
+ "docs": "The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"docs": "Dismiss the modal overlay after it has been presented.",
@@ -530,7 +530,7 @@
},
{
"name": "param",
- "text": "role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'."
+ "text": "role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
]
},
diff --git a/src/translate/api/nav.json b/src/translate/api/nav.json
index ed32bb60db2..c788cda2002 100644
--- a/src/translate/api/nav.json
+++ b/src/translate/api/nav.json
@@ -269,6 +269,28 @@
}
]
},
+ {
+ "name": "getLength",
+ "returns": {
+ "type": "Promise",
+ "docs": ""
+ },
+ "complexType": {
+ "signature": "() => Promise",
+ "parameters": [],
+ "references": {
+ "Promise": {
+ "location": "global",
+ "id": "global::Promise"
+ }
+ },
+ "return": "Promise"
+ },
+ "signature": "getLength() => Promise",
+ "parameters": [],
+ "docs": "Returns the number of views in the stack.",
+ "docsTags": []
+ },
{
"name": "getPrevious",
"returns": {
diff --git a/src/translate/api/note.json b/src/translate/api/note.json
index 61c1a42dd93..965ac1ac154 100644
--- a/src/translate/api/note.json
+++ b/src/translate/api/note.json
@@ -111,13 +111,7 @@
],
"slots": [],
"parts": [],
- "dependents": [
- "ion-item"
- ],
+ "dependents": [],
"dependencies": [],
- "dependencyGraph": {
- "ion-item": [
- "ion-note"
- ]
- }
+ "dependencyGraph": {}
}
\ No newline at end of file
diff --git a/src/translate/api/picker-column-option.json b/src/translate/api/picker-column-option.json
new file mode 100644
index 00000000000..3c91bb3b504
--- /dev/null
+++ b/src/translate/api/picker-column-option.json
@@ -0,0 +1,135 @@
+{
+ "filePath": "src/components/picker-column-option/picker-column-option.tsx",
+ "encapsulation": "shadow",
+ "tag": "ion-picker-column-option",
+ "docs": "",
+ "docsTags": [],
+ "usage": {},
+ "props": [
+ {
+ "name": "color",
+ "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record | undefined",
+ "complexType": {
+ "original": "Color",
+ "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record | undefined",
+ "references": {
+ "Color": {
+ "location": "import",
+ "path": "../../interface",
+ "id": "src/interface.d.ts::Color"
+ }
+ }
+ },
+ "mutable": false,
+ "attr": "color",
+ "reflectToAttr": true,
+ "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+ "docsTags": [],
+ "default": "'primary'",
+ "values": [
+ {
+ "value": "danger",
+ "type": "string"
+ },
+ {
+ "value": "dark",
+ "type": "string"
+ },
+ {
+ "value": "light",
+ "type": "string"
+ },
+ {
+ "value": "medium",
+ "type": "string"
+ },
+ {
+ "value": "primary",
+ "type": "string"
+ },
+ {
+ "value": "secondary",
+ "type": "string"
+ },
+ {
+ "value": "success",
+ "type": "string"
+ },
+ {
+ "value": "tertiary",
+ "type": "string"
+ },
+ {
+ "value": "warning",
+ "type": "string"
+ },
+ {
+ "type": "string & Record"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "disabled",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "disabled",
+ "reflectToAttr": false,
+ "docs": "If `true`, the user cannot interact with the picker column option.",
+ "docsTags": [],
+ "default": "false",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "value",
+ "type": "any",
+ "complexType": {
+ "original": "any | null",
+ "resolved": "any",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "value",
+ "reflectToAttr": false,
+ "docs": "The text value of the option.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "any"
+ }
+ ],
+ "optional": true,
+ "required": false
+ }
+ ],
+ "methods": [],
+ "events": [],
+ "listeners": [],
+ "styles": [],
+ "slots": [],
+ "parts": [],
+ "dependents": [
+ "ion-datetime"
+ ],
+ "dependencies": [],
+ "dependencyGraph": {
+ "ion-datetime": [
+ "ion-picker-column-option"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/src/translate/api/picker-column-option.readme.md b/src/translate/api/picker-column-option.readme.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/translate/api/picker-column.json b/src/translate/api/picker-column.json
new file mode 100644
index 00000000000..10143beaac9
--- /dev/null
+++ b/src/translate/api/picker-column.json
@@ -0,0 +1,228 @@
+{
+ "filePath": "src/components/picker-column/picker-column.tsx",
+ "encapsulation": "shadow",
+ "tag": "ion-picker-column",
+ "docs": "",
+ "docsTags": [
+ {
+ "name": "virtualProp",
+ "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
+ },
+ {
+ "name": "slot",
+ "text": "prefix - Content to show on the left side of the picker options."
+ },
+ {
+ "name": "slot",
+ "text": "suffix - Content to show on the right side of the picker options."
+ }
+ ],
+ "usage": {},
+ "props": [
+ {
+ "name": "color",
+ "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record | undefined",
+ "complexType": {
+ "original": "Color",
+ "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record | undefined",
+ "references": {
+ "Color": {
+ "location": "import",
+ "path": "../../interface",
+ "id": "src/interface.d.ts::Color"
+ }
+ }
+ },
+ "mutable": false,
+ "attr": "color",
+ "reflectToAttr": true,
+ "docs": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
+ "docsTags": [],
+ "default": "'primary'",
+ "values": [
+ {
+ "value": "danger",
+ "type": "string"
+ },
+ {
+ "value": "dark",
+ "type": "string"
+ },
+ {
+ "value": "light",
+ "type": "string"
+ },
+ {
+ "value": "medium",
+ "type": "string"
+ },
+ {
+ "value": "primary",
+ "type": "string"
+ },
+ {
+ "value": "secondary",
+ "type": "string"
+ },
+ {
+ "value": "success",
+ "type": "string"
+ },
+ {
+ "value": "tertiary",
+ "type": "string"
+ },
+ {
+ "value": "warning",
+ "type": "string"
+ },
+ {
+ "type": "string & Record"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "disabled",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "disabled",
+ "reflectToAttr": false,
+ "docs": "If `true`, the user cannot interact with the picker.",
+ "docsTags": [],
+ "default": "false",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "mode",
+ "type": "\"ios\" | \"md\"",
+ "mutable": false,
+ "attr": "mode",
+ "reflectToAttr": false,
+ "docs": "The mode determines which platform styles to use.",
+ "docsTags": [],
+ "values": [
+ {
+ "value": "ios",
+ "type": "string"
+ },
+ {
+ "value": "md",
+ "type": "string"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "value",
+ "type": "number | string | undefined",
+ "complexType": {
+ "original": "string | number",
+ "resolved": "number | string | undefined",
+ "references": {}
+ },
+ "mutable": true,
+ "attr": "value",
+ "reflectToAttr": false,
+ "docs": "The selected option in the picker.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "number"
+ },
+ {
+ "type": "string"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ }
+ ],
+ "methods": [
+ {
+ "name": "setFocus",
+ "returns": {
+ "type": "Promise",
+ "docs": ""
+ },
+ "complexType": {
+ "signature": "() => Promise",
+ "parameters": [],
+ "references": {
+ "Promise": {
+ "location": "global",
+ "id": "global::Promise"
+ }
+ },
+ "return": "Promise"
+ },
+ "signature": "setFocus() => Promise",
+ "parameters": [],
+ "docs": "Sets focus on the scrollable container within the picker column.\nUse this method instead of the global `pickerColumn.focus()`.",
+ "docsTags": []
+ }
+ ],
+ "events": [
+ {
+ "event": "ionChange",
+ "detail": "PickerColumnChangeEventDetail",
+ "bubbles": true,
+ "complexType": {
+ "original": "PickerColumnChangeEventDetail",
+ "resolved": "PickerColumnChangeEventDetail",
+ "references": {
+ "PickerColumnChangeEventDetail": {
+ "location": "import",
+ "path": "./picker-column-interfaces",
+ "id": "src/components/picker-column/picker-column-interfaces.ts::PickerColumnChangeEventDetail"
+ }
+ }
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted when the value has changed.",
+ "docsTags": []
+ }
+ ],
+ "listeners": [],
+ "styles": [],
+ "slots": [
+ {
+ "name": "prefix",
+ "docs": "Content to show on the left side of the picker options."
+ },
+ {
+ "name": "suffix",
+ "docs": "Content to show on the right side of the picker options."
+ }
+ ],
+ "parts": [],
+ "dependents": [
+ "ion-datetime"
+ ],
+ "dependencies": [],
+ "dependencyGraph": {
+ "ion-datetime": [
+ "ion-picker-column"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/src/translate/api/picker-column.readme.md b/src/translate/api/picker-column.readme.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/translate/api/picker-legacy.json b/src/translate/api/picker-legacy.json
new file mode 100644
index 00000000000..ca38b417fdc
--- /dev/null
+++ b/src/translate/api/picker-legacy.json
@@ -0,0 +1,756 @@
+{
+ "filePath": "src/components/picker-legacy/picker.tsx",
+ "encapsulation": "scoped",
+ "tag": "ion-picker-legacy",
+ "docs": "",
+ "docsTags": [
+ {
+ "name": "virtualProp",
+ "text": "{\"ios\" | \"md\"} mode - The mode determines which platform styles to use."
+ }
+ ],
+ "usage": {},
+ "props": [
+ {
+ "name": "animated",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "animated",
+ "reflectToAttr": false,
+ "docs": "If `true`, the picker will animate.",
+ "docsTags": [],
+ "default": "true",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "backdropDismiss",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "backdrop-dismiss",
+ "reflectToAttr": false,
+ "docs": "If `true`, the picker will be dismissed when the backdrop is clicked.",
+ "docsTags": [],
+ "default": "true",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "buttons",
+ "type": "PickerButton[]",
+ "complexType": {
+ "original": "PickerButton[]",
+ "resolved": "PickerButton[]",
+ "references": {
+ "PickerButton": {
+ "location": "import",
+ "path": "./picker-interface",
+ "id": "src/components/picker-legacy/picker-interface.ts::PickerButton"
+ }
+ }
+ },
+ "mutable": false,
+ "reflectToAttr": false,
+ "docs": "Array of buttons to be displayed at the top of the picker.",
+ "docsTags": [],
+ "default": "[]",
+ "values": [
+ {
+ "type": "PickerButton[]"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "columns",
+ "type": "PickerColumn[]",
+ "complexType": {
+ "original": "PickerColumn[]",
+ "resolved": "PickerColumn[]",
+ "references": {
+ "PickerColumn": {
+ "location": "import",
+ "path": "./picker-interface",
+ "id": "src/components/picker-legacy/picker-interface.ts::PickerColumn"
+ }
+ }
+ },
+ "mutable": false,
+ "reflectToAttr": false,
+ "docs": "Array of columns to be displayed in the picker.",
+ "docsTags": [],
+ "default": "[]",
+ "values": [
+ {
+ "type": "PickerColumn[]"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "cssClass",
+ "type": "string | string[] | undefined",
+ "complexType": {
+ "original": "string | string[]",
+ "resolved": "string | string[] | undefined",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "css-class",
+ "reflectToAttr": false,
+ "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "string"
+ },
+ {
+ "type": "string[]"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "duration",
+ "type": "number",
+ "complexType": {
+ "original": "number",
+ "resolved": "number",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "duration",
+ "reflectToAttr": false,
+ "docs": "Number of milliseconds to wait before dismissing the picker.",
+ "docsTags": [],
+ "default": "0",
+ "values": [
+ {
+ "type": "number"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "enterAnimation",
+ "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+ "complexType": {
+ "original": "AnimationBuilder",
+ "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+ "references": {
+ "AnimationBuilder": {
+ "location": "import",
+ "path": "../../interface",
+ "id": "src/interface.d.ts::AnimationBuilder"
+ }
+ }
+ },
+ "mutable": false,
+ "reflectToAttr": false,
+ "docs": "Animation to use when the picker is presented.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "((baseEl: any, opts?: any) => Animation)"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "htmlAttributes",
+ "type": "undefined | { [key: string]: any; }",
+ "complexType": {
+ "original": "{ [key: string]: any }",
+ "resolved": "undefined | { [key: string]: any; }",
+ "references": {}
+ },
+ "mutable": false,
+ "reflectToAttr": false,
+ "docs": "Additional attributes to pass to the picker.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "undefined"
+ },
+ {
+ "type": "{ [key: string]: any; }"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "isOpen",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "is-open",
+ "reflectToAttr": false,
+ "docs": "If `true`, the picker will open. If `false`, the picker will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the pickerController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe picker dismisses. You will need to do that in your code.",
+ "docsTags": [],
+ "default": "false",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "keyboardClose",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "keyboard-close",
+ "reflectToAttr": false,
+ "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
+ "docsTags": [],
+ "default": "true",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "leaveAnimation",
+ "type": "((baseEl: any, opts?: any) => Animation) | undefined",
+ "complexType": {
+ "original": "AnimationBuilder",
+ "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
+ "references": {
+ "AnimationBuilder": {
+ "location": "import",
+ "path": "../../interface",
+ "id": "src/interface.d.ts::AnimationBuilder"
+ }
+ }
+ },
+ "mutable": false,
+ "reflectToAttr": false,
+ "docs": "Animation to use when the picker is dismissed.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "((baseEl: any, opts?: any) => Animation)"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "mode",
+ "type": "\"ios\" | \"md\"",
+ "mutable": false,
+ "attr": "mode",
+ "reflectToAttr": false,
+ "docs": "The mode determines which platform styles to use.",
+ "docsTags": [],
+ "values": [
+ {
+ "value": "ios",
+ "type": "string"
+ },
+ {
+ "value": "md",
+ "type": "string"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "showBackdrop",
+ "type": "boolean",
+ "complexType": {
+ "original": "boolean",
+ "resolved": "boolean",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "show-backdrop",
+ "reflectToAttr": false,
+ "docs": "If `true`, a backdrop will be displayed behind the picker.",
+ "docsTags": [],
+ "default": "true",
+ "values": [
+ {
+ "type": "boolean"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
+ {
+ "name": "trigger",
+ "type": "string | undefined",
+ "complexType": {
+ "original": "string | undefined",
+ "resolved": "string | undefined",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "trigger",
+ "reflectToAttr": false,
+ "docs": "An ID corresponding to the trigger element that\ncauses the picker to open when clicked.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "string"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": false,
+ "required": false
+ }
+ ],
+ "methods": [
+ {
+ "name": "dismiss",
+ "returns": {
+ "type": "Promise",
+ "docs": ""
+ },
+ "complexType": {
+ "signature": "(data?: any, role?: string) => Promise",
+ "parameters": [
+ {
+ "name": "data",
+ "type": "any",
+ "docs": "Any data to emit in the dismiss events."
+ },
+ {
+ "name": "role",
+ "type": "string | undefined",
+ "docs": "The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ }
+ ],
+ "references": {
+ "Promise": {
+ "location": "global",
+ "id": "global::Promise"
+ }
+ },
+ "return": "Promise"
+ },
+ "signature": "dismiss(data?: any, role?: string) => Promise",
+ "parameters": [
+ {
+ "name": "data",
+ "type": "any",
+ "docs": "Any data to emit in the dismiss events."
+ },
+ {
+ "name": "role",
+ "type": "string | undefined",
+ "docs": "The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ }
+ ],
+ "docs": "Dismiss the picker overlay after it has been presented.",
+ "docsTags": [
+ {
+ "name": "param",
+ "text": "data Any data to emit in the dismiss events."
+ },
+ {
+ "name": "param",
+ "text": "role The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ }
+ ]
+ },
+ {
+ "name": "getColumn",
+ "returns": {
+ "type": "Promise",
+ "docs": ""
+ },
+ "complexType": {
+ "signature": "(name: string) => Promise",
+ "parameters": [
+ {
+ "name": "name",
+ "type": "string",
+ "docs": "The name of the column."
+ }
+ ],
+ "references": {
+ "Promise": {
+ "location": "global",
+ "id": "global::Promise"
+ },
+ "PickerColumn": {
+ "location": "import",
+ "path": "./picker-interface",
+ "id": "src/components/picker-legacy/picker-interface.ts::PickerColumn"
+ }
+ },
+ "return": "Promise"
+ },
+ "signature": "getColumn(name: string) => Promise",
+ "parameters": [
+ {
+ "name": "name",
+ "type": "string",
+ "docs": "The name of the column."
+ }
+ ],
+ "docs": "Get the column that matches the specified name.",
+ "docsTags": [
+ {
+ "name": "param",
+ "text": "name The name of the column."
+ }
+ ]
+ },
+ {
+ "name": "onDidDismiss",
+ "returns": {
+ "type": "Promise>",
+ "docs": ""
+ },
+ "complexType": {
+ "signature": "() => Promise>",
+ "parameters": [],
+ "references": {
+ "Promise": {
+ "location": "global",
+ "id": "global::Promise"
+ },
+ "OverlayEventDetail": {
+ "location": "import",
+ "path": "../../utils/overlays-interface",
+ "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+ },
+ "T": {
+ "location": "global",
+ "id": "global::T"
+ }
+ },
+ "return": "Promise>"
+ },
+ "signature": "onDidDismiss() => Promise>",
+ "parameters": [],
+ "docs": "Returns a promise that resolves when the picker did dismiss.",
+ "docsTags": []
+ },
+ {
+ "name": "onWillDismiss",
+ "returns": {
+ "type": "Promise>",
+ "docs": ""
+ },
+ "complexType": {
+ "signature": "() => Promise>",
+ "parameters": [],
+ "references": {
+ "Promise": {
+ "location": "global",
+ "id": "global::Promise"
+ },
+ "OverlayEventDetail": {
+ "location": "import",
+ "path": "../../utils/overlays-interface",
+ "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+ },
+ "T": {
+ "location": "global",
+ "id": "global::T"
+ }
+ },
+ "return": "Promise>"
+ },
+ "signature": "onWillDismiss() => Promise>",
+ "parameters": [],
+ "docs": "Returns a promise that resolves when the picker will dismiss.",
+ "docsTags": []
+ },
+ {
+ "name": "present",
+ "returns": {
+ "type": "Promise",
+ "docs": ""
+ },
+ "complexType": {
+ "signature": "() => Promise",
+ "parameters": [],
+ "references": {
+ "Promise": {
+ "location": "global",
+ "id": "global::Promise"
+ }
+ },
+ "return": "Promise"
+ },
+ "signature": "present() => Promise",
+ "parameters": [],
+ "docs": "Present the picker overlay after it has been created.",
+ "docsTags": []
+ }
+ ],
+ "events": [
+ {
+ "event": "didDismiss",
+ "detail": "OverlayEventDetail",
+ "bubbles": true,
+ "complexType": {
+ "original": "OverlayEventDetail",
+ "resolved": "OverlayEventDetail",
+ "references": {
+ "OverlayEventDetail": {
+ "location": "import",
+ "path": "../../utils/overlays-interface",
+ "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+ }
+ }
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted after the picker has dismissed.\nShorthand for ionPickerDidDismiss.",
+ "docsTags": []
+ },
+ {
+ "event": "didPresent",
+ "detail": "void",
+ "bubbles": true,
+ "complexType": {
+ "original": "void",
+ "resolved": "void",
+ "references": {}
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted after the picker has presented.\nShorthand for ionPickerWillDismiss.",
+ "docsTags": []
+ },
+ {
+ "event": "ionPickerDidDismiss",
+ "detail": "OverlayEventDetail",
+ "bubbles": true,
+ "complexType": {
+ "original": "OverlayEventDetail",
+ "resolved": "OverlayEventDetail",
+ "references": {
+ "OverlayEventDetail": {
+ "location": "import",
+ "path": "../../utils/overlays-interface",
+ "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+ }
+ }
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted after the picker has dismissed.",
+ "docsTags": []
+ },
+ {
+ "event": "ionPickerDidPresent",
+ "detail": "void",
+ "bubbles": true,
+ "complexType": {
+ "original": "void",
+ "resolved": "void",
+ "references": {}
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted after the picker has presented.",
+ "docsTags": []
+ },
+ {
+ "event": "ionPickerWillDismiss",
+ "detail": "OverlayEventDetail",
+ "bubbles": true,
+ "complexType": {
+ "original": "OverlayEventDetail",
+ "resolved": "OverlayEventDetail",
+ "references": {
+ "OverlayEventDetail": {
+ "location": "import",
+ "path": "../../utils/overlays-interface",
+ "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+ }
+ }
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted before the picker has dismissed.",
+ "docsTags": []
+ },
+ {
+ "event": "ionPickerWillPresent",
+ "detail": "void",
+ "bubbles": true,
+ "complexType": {
+ "original": "void",
+ "resolved": "void",
+ "references": {}
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted before the picker has presented.",
+ "docsTags": []
+ },
+ {
+ "event": "willDismiss",
+ "detail": "OverlayEventDetail",
+ "bubbles": true,
+ "complexType": {
+ "original": "OverlayEventDetail",
+ "resolved": "OverlayEventDetail",
+ "references": {
+ "OverlayEventDetail": {
+ "location": "import",
+ "path": "../../utils/overlays-interface",
+ "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+ }
+ }
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted before the picker has dismissed.\nShorthand for ionPickerWillDismiss.",
+ "docsTags": []
+ },
+ {
+ "event": "willPresent",
+ "detail": "void",
+ "bubbles": true,
+ "complexType": {
+ "original": "void",
+ "resolved": "void",
+ "references": {}
+ },
+ "cancelable": true,
+ "composed": true,
+ "docs": "Emitted before the picker has presented.\nShorthand for ionPickerWillPresent.",
+ "docsTags": []
+ }
+ ],
+ "listeners": [],
+ "styles": [
+ {
+ "name": "--backdrop-opacity",
+ "annotation": "prop",
+ "docs": "Opacity of the backdrop"
+ },
+ {
+ "name": "--background",
+ "annotation": "prop",
+ "docs": "Background of the picker"
+ },
+ {
+ "name": "--background-rgb",
+ "annotation": "prop",
+ "docs": "Background of the picker in rgb format"
+ },
+ {
+ "name": "--border-color",
+ "annotation": "prop",
+ "docs": "Border color of the picker"
+ },
+ {
+ "name": "--border-radius",
+ "annotation": "prop",
+ "docs": "Border radius of the picker"
+ },
+ {
+ "name": "--border-style",
+ "annotation": "prop",
+ "docs": "Border style of the picker"
+ },
+ {
+ "name": "--border-width",
+ "annotation": "prop",
+ "docs": "Border width of the picker"
+ },
+ {
+ "name": "--height",
+ "annotation": "prop",
+ "docs": "Height of the picker"
+ },
+ {
+ "name": "--max-height",
+ "annotation": "prop",
+ "docs": "Maximum height of the picker"
+ },
+ {
+ "name": "--max-width",
+ "annotation": "prop",
+ "docs": "Maximum width of the picker"
+ },
+ {
+ "name": "--min-height",
+ "annotation": "prop",
+ "docs": "Minimum height of the picker"
+ },
+ {
+ "name": "--min-width",
+ "annotation": "prop",
+ "docs": "Minimum width of the picker"
+ },
+ {
+ "name": "--width",
+ "annotation": "prop",
+ "docs": "Width of the picker"
+ }
+ ],
+ "slots": [],
+ "parts": [],
+ "dependents": [],
+ "dependencies": [
+ "ion-backdrop",
+ "ion-picker-legacy-column"
+ ],
+ "dependencyGraph": {
+ "ion-picker-legacy": [
+ "ion-backdrop",
+ "ion-picker-legacy-column"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/src/translate/api/picker-legacy.readme.md b/src/translate/api/picker-legacy.readme.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/translate/api/picker.json b/src/translate/api/picker.json
index bf4b301930e..501134b2608 100644
--- a/src/translate/api/picker.json
+++ b/src/translate/api/picker.json
@@ -1,6 +1,6 @@
{
"filePath": "src/components/picker/picker.tsx",
- "encapsulation": "scoped",
+ "encapsulation": "shadow",
"tag": "ion-picker",
"docs": "",
"docsTags": [
@@ -11,278 +11,6 @@
],
"usage": {},
"props": [
- {
- "name": "animated",
- "type": "boolean",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean",
- "references": {}
- },
- "mutable": false,
- "attr": "animated",
- "reflectToAttr": false,
- "docs": "If `true`, the picker will animate.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "backdropDismiss",
- "type": "boolean",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean",
- "references": {}
- },
- "mutable": false,
- "attr": "backdrop-dismiss",
- "reflectToAttr": false,
- "docs": "If `true`, the picker will be dismissed when the backdrop is clicked.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "buttons",
- "type": "PickerButton[]",
- "complexType": {
- "original": "PickerButton[]",
- "resolved": "PickerButton[]",
- "references": {
- "PickerButton": {
- "location": "import",
- "path": "./picker-interface",
- "id": "src/components/picker/picker-interface.ts::PickerButton"
- }
- }
- },
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Array of buttons to be displayed at the top of the picker.",
- "docsTags": [],
- "default": "[]",
- "values": [
- {
- "type": "PickerButton[]"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "columns",
- "type": "PickerColumn[]",
- "complexType": {
- "original": "PickerColumn[]",
- "resolved": "PickerColumn[]",
- "references": {
- "PickerColumn": {
- "location": "import",
- "path": "./picker-interface",
- "id": "src/components/picker/picker-interface.ts::PickerColumn"
- }
- }
- },
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Array of columns to be displayed in the picker.",
- "docsTags": [],
- "default": "[]",
- "values": [
- {
- "type": "PickerColumn[]"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "cssClass",
- "type": "string | string[] | undefined",
- "complexType": {
- "original": "string | string[]",
- "resolved": "string | string[] | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "css-class",
- "reflectToAttr": false,
- "docs": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces.",
- "docsTags": [],
- "values": [
- {
- "type": "string"
- },
- {
- "type": "string[]"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "duration",
- "type": "number",
- "complexType": {
- "original": "number",
- "resolved": "number",
- "references": {}
- },
- "mutable": false,
- "attr": "duration",
- "reflectToAttr": false,
- "docs": "Number of milliseconds to wait before dismissing the picker.",
- "docsTags": [],
- "default": "0",
- "values": [
- {
- "type": "number"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "enterAnimation",
- "type": "((baseEl: any, opts?: any) => Animation) | undefined",
- "complexType": {
- "original": "AnimationBuilder",
- "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
- "references": {
- "AnimationBuilder": {
- "location": "import",
- "path": "../../interface",
- "id": "src/interface.d.ts::AnimationBuilder"
- }
- }
- },
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Animation to use when the picker is presented.",
- "docsTags": [],
- "values": [
- {
- "type": "((baseEl: any, opts?: any) => Animation)"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "htmlAttributes",
- "type": "undefined | { [key: string]: any; }",
- "complexType": {
- "original": "{ [key: string]: any }",
- "resolved": "undefined | { [key: string]: any; }",
- "references": {}
- },
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Additional attributes to pass to the picker.",
- "docsTags": [],
- "values": [
- {
- "type": "undefined"
- },
- {
- "type": "{ [key: string]: any; }"
- }
- ],
- "optional": true,
- "required": false
- },
- {
- "name": "isOpen",
- "type": "boolean",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean",
- "references": {}
- },
- "mutable": false,
- "attr": "is-open",
- "reflectToAttr": false,
- "docs": "If `true`, the picker will open. If `false`, the picker will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the pickerController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe picker dismisses. You will need to do that in your code.",
- "docsTags": [],
- "default": "false",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "keyboardClose",
- "type": "boolean",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean",
- "references": {}
- },
- "mutable": false,
- "attr": "keyboard-close",
- "reflectToAttr": false,
- "docs": "If `true`, the keyboard will be automatically dismissed when the overlay is presented.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "leaveAnimation",
- "type": "((baseEl: any, opts?: any) => Animation) | undefined",
- "complexType": {
- "original": "AnimationBuilder",
- "resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
- "references": {
- "AnimationBuilder": {
- "location": "import",
- "path": "../../interface",
- "id": "src/interface.d.ts::AnimationBuilder"
- }
- }
- },
- "mutable": false,
- "reflectToAttr": false,
- "docs": "Animation to use when the picker is dismissed.",
- "docsTags": [],
- "values": [
- {
- "type": "((baseEl: any, opts?: any) => Animation)"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "mode",
"type": "\"ios\" | \"md\"",
@@ -303,454 +31,43 @@
],
"optional": true,
"required": false
- },
- {
- "name": "showBackdrop",
- "type": "boolean",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean",
- "references": {}
- },
- "mutable": false,
- "attr": "show-backdrop",
- "reflectToAttr": false,
- "docs": "If `true`, a backdrop will be displayed behind the picker.",
- "docsTags": [],
- "default": "true",
- "values": [
- {
- "type": "boolean"
- }
- ],
- "optional": false,
- "required": false
- },
- {
- "name": "trigger",
- "type": "string | undefined",
- "complexType": {
- "original": "string | undefined",
- "resolved": "string | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "trigger",
- "reflectToAttr": false,
- "docs": "An ID corresponding to the trigger element that\ncauses the picker to open when clicked.",
- "docsTags": [],
- "values": [
- {
- "type": "string"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": false,
- "required": false
}
],
- "methods": [
+ "methods": [],
+ "events": [],
+ "listeners": [
{
- "name": "dismiss",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "complexType": {
- "signature": "(data?: any, role?: string) => Promise",
- "parameters": [
- {
- "name": "data",
- "type": "any",
- "docs": "Any data to emit in the dismiss events."
- },
- {
- "name": "role",
- "type": "string | undefined",
- "docs": "The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
- }
- ],
- "references": {
- "Promise": {
- "location": "global",
- "id": "global::Promise"
- }
- },
- "return": "Promise"
- },
- "signature": "dismiss(data?: any, role?: string) => Promise",
- "parameters": [
- {
- "name": "data",
- "type": "any",
- "docs": "Any data to emit in the dismiss events."
- },
- {
- "name": "role",
- "type": "string | undefined",
- "docs": "The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
- }
- ],
- "docs": "Dismiss the picker overlay after it has been presented.",
- "docsTags": [
- {
- "name": "param",
- "text": "data Any data to emit in the dismiss events."
- },
- {
- "name": "param",
- "text": "role The role of the element that is dismissing the picker.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the picker.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
- }
- ]
- },
- {
- "name": "getColumn",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "complexType": {
- "signature": "(name: string) => Promise",
- "parameters": [
- {
- "name": "name",
- "type": "string",
- "docs": "The name of the column."
- }
- ],
- "references": {
- "Promise": {
- "location": "global",
- "id": "global::Promise"
- },
- "PickerColumn": {
- "location": "import",
- "path": "./picker-interface",
- "id": "src/components/picker/picker-interface.ts::PickerColumn"
- }
- },
- "return": "Promise"
- },
- "signature": "getColumn(name: string) => Promise",
- "parameters": [
- {
- "name": "name",
- "type": "string",
- "docs": "The name of the column."
- }
- ],
- "docs": "Get the column that matches the specified name.",
- "docsTags": [
- {
- "name": "param",
- "text": "name The name of the column."
- }
- ]
- },
- {
- "name": "onDidDismiss",
- "returns": {
- "type": "Promise>",
- "docs": ""
- },
- "complexType": {
- "signature": "() => Promise>",
- "parameters": [],
- "references": {
- "Promise": {
- "location": "global",
- "id": "global::Promise"
- },
- "OverlayEventDetail": {
- "location": "import",
- "path": "../../utils/overlays-interface",
- "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
- },
- "T": {
- "location": "global",
- "id": "global::T"
- }
- },
- "return": "Promise>"
- },
- "signature": "onDidDismiss() => Promise>",
- "parameters": [],
- "docs": "Returns a promise that resolves when the picker did dismiss.",
- "docsTags": []
- },
- {
- "name": "onWillDismiss",
- "returns": {
- "type": "Promise>",
- "docs": ""
- },
- "complexType": {
- "signature": "() => Promise>",
- "parameters": [],
- "references": {
- "Promise": {
- "location": "global",
- "id": "global::Promise"
- },
- "OverlayEventDetail": {
- "location": "import",
- "path": "../../utils/overlays-interface",
- "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
- },
- "T": {
- "location": "global",
- "id": "global::T"
- }
- },
- "return": "Promise>"
- },
- "signature": "onWillDismiss() => Promise>",
- "parameters": [],
- "docs": "Returns a promise that resolves when the picker will dismiss.",
- "docsTags": []
- },
- {
- "name": "present",
- "returns": {
- "type": "Promise",
- "docs": ""
- },
- "complexType": {
- "signature": "() => Promise",
- "parameters": [],
- "references": {
- "Promise": {
- "location": "global",
- "id": "global::Promise"
- }
- },
- "return": "Promise"
- },
- "signature": "present() => Promise",
- "parameters": [],
- "docs": "Present the picker overlay after it has been created.",
- "docsTags": []
+ "event": "touchstart",
+ "capture": false,
+ "passive": true
}
],
- "events": [
- {
- "event": "didDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "complexType": {
- "original": "OverlayEventDetail",
- "resolved": "OverlayEventDetail",
- "references": {
- "OverlayEventDetail": {
- "location": "import",
- "path": "../../utils/overlays-interface",
- "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
- }
- }
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the picker has dismissed.\nShorthand for ionPickerDidDismiss.",
- "docsTags": []
- },
- {
- "event": "didPresent",
- "detail": "void",
- "bubbles": true,
- "complexType": {
- "original": "void",
- "resolved": "void",
- "references": {}
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the picker has presented.\nShorthand for ionPickerWillDismiss.",
- "docsTags": []
- },
- {
- "event": "ionPickerDidDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "complexType": {
- "original": "OverlayEventDetail",
- "resolved": "OverlayEventDetail",
- "references": {
- "OverlayEventDetail": {
- "location": "import",
- "path": "../../utils/overlays-interface",
- "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
- }
- }
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the picker has dismissed.",
- "docsTags": []
- },
- {
- "event": "ionPickerDidPresent",
- "detail": "void",
- "bubbles": true,
- "complexType": {
- "original": "void",
- "resolved": "void",
- "references": {}
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted after the picker has presented.",
- "docsTags": []
- },
- {
- "event": "ionPickerWillDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "complexType": {
- "original": "OverlayEventDetail",
- "resolved": "OverlayEventDetail",
- "references": {
- "OverlayEventDetail": {
- "location": "import",
- "path": "../../utils/overlays-interface",
- "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
- }
- }
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the picker has dismissed.",
- "docsTags": []
- },
- {
- "event": "ionPickerWillPresent",
- "detail": "void",
- "bubbles": true,
- "complexType": {
- "original": "void",
- "resolved": "void",
- "references": {}
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the picker has presented.",
- "docsTags": []
- },
- {
- "event": "willDismiss",
- "detail": "OverlayEventDetail",
- "bubbles": true,
- "complexType": {
- "original": "OverlayEventDetail",
- "resolved": "OverlayEventDetail",
- "references": {
- "OverlayEventDetail": {
- "location": "import",
- "path": "../../utils/overlays-interface",
- "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
- }
- }
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the picker has dismissed.\nShorthand for ionPickerWillDismiss.",
- "docsTags": []
- },
- {
- "event": "willPresent",
- "detail": "void",
- "bubbles": true,
- "complexType": {
- "original": "void",
- "resolved": "void",
- "references": {}
- },
- "cancelable": true,
- "composed": true,
- "docs": "Emitted before the picker has presented.\nShorthand for ionPickerWillPresent.",
- "docsTags": []
- }
- ],
- "listeners": [],
"styles": [
{
- "name": "--backdrop-opacity",
- "annotation": "prop",
- "docs": "Opacity of the backdrop"
- },
- {
- "name": "--background",
- "annotation": "prop",
- "docs": "Background of the picker"
- },
- {
- "name": "--background-rgb",
- "annotation": "prop",
- "docs": "Background of the picker in rgb format"
- },
- {
- "name": "--border-color",
- "annotation": "prop",
- "docs": "Border color of the picker"
- },
- {
- "name": "--border-radius",
- "annotation": "prop",
- "docs": "Border radius of the picker"
- },
- {
- "name": "--border-style",
- "annotation": "prop",
- "docs": "Border style of the picker"
- },
- {
- "name": "--border-width",
- "annotation": "prop",
- "docs": "Border width of the picker"
- },
- {
- "name": "--height",
- "annotation": "prop",
- "docs": "Height of the picker"
- },
- {
- "name": "--max-height",
- "annotation": "prop",
- "docs": "Maximum height of the picker"
- },
- {
- "name": "--max-width",
- "annotation": "prop",
- "docs": "Maximum width of the picker"
- },
- {
- "name": "--min-height",
+ "name": "--fade-background-rgb",
"annotation": "prop",
- "docs": "Minimum height of the picker"
+ "docs": "Background of the gradient covering non-selected items in rgb format"
},
{
- "name": "--min-width",
+ "name": "--highlight-background",
"annotation": "prop",
- "docs": "Minimum width of the picker"
+ "docs": "Background of the picker highlight for the selected item"
},
{
- "name": "--width",
+ "name": "--highlight-border-radius",
"annotation": "prop",
- "docs": "Width of the picker"
+ "docs": "Border radius of the picker highlight for the selected item"
}
],
"slots": [],
"parts": [],
- "dependents": [],
- "dependencies": [
- "ion-backdrop",
- "ion-picker-column"
+ "dependents": [
+ "ion-datetime"
],
+ "dependencies": [],
"dependencyGraph": {
- "ion-picker": [
- "ion-backdrop",
- "ion-picker-column"
+ "ion-datetime": [
+ "ion-picker"
]
}
}
\ No newline at end of file
diff --git a/src/translate/api/popover.json b/src/translate/api/popover.json
index d50d008dc57..986919a2f0c 100644
--- a/src/translate/api/popover.json
+++ b/src/translate/api/popover.json
@@ -655,7 +655,7 @@
{
"name": "dismissParentPopover",
"type": "boolean",
- "docs": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
+ "docs": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"references": {
@@ -685,7 +685,7 @@
{
"name": "dismissParentPopover",
"type": "boolean",
- "docs": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
+ "docs": "If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"docs": "Dismiss the popover overlay after it has been presented.",
@@ -700,7 +700,7 @@
},
{
"name": "param",
- "text": "dismissParentPopover If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`."
+ "text": "dismissParentPopover If `true`, dismissing this popover will also dismiss\na parent popover if this popover is nested. Defaults to `true`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
]
},
diff --git a/src/translate/api/progress-bar.json b/src/translate/api/progress-bar.json
index 57087c51dcf..469e15d7c32 100644
--- a/src/translate/api/progress-bar.json
+++ b/src/translate/api/progress-bar.json
@@ -213,11 +213,6 @@
"annotation": "prop",
"docs": "Background of the progress track, or the buffer bar if `buffer` is set"
},
- {
- "name": "--buffer-background",
- "annotation": "prop",
- "docs": "DEPRECATED, use `--background` instead"
- },
{
"name": "--progress-background",
"annotation": "prop",
diff --git a/src/translate/api/radio.json b/src/translate/api/radio.json
index e71dda4f696..65000af8028 100644
--- a/src/translate/api/radio.json
+++ b/src/translate/api/radio.json
@@ -208,30 +208,6 @@
"optional": false,
"required": false
},
- {
- "name": "legacy",
- "type": "boolean | undefined",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "legacy",
- "reflectToAttr": false,
- "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "mode",
"type": "\"ios\" | \"md\"",
diff --git a/src/translate/api/range.json b/src/translate/api/range.json
index f0522569dc1..9fc4794bcef 100644
--- a/src/translate/api/range.json
+++ b/src/translate/api/range.json
@@ -268,30 +268,6 @@
"optional": false,
"required": false
},
- {
- "name": "legacy",
- "type": "boolean | undefined",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "legacy",
- "reflectToAttr": false,
- "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "max",
"type": "number",
diff --git a/src/translate/api/ripple-effect.json b/src/translate/api/ripple-effect.json
index d7837edf05e..0119e383645 100644
--- a/src/translate/api/ripple-effect.json
+++ b/src/translate/api/ripple-effect.json
@@ -101,6 +101,7 @@
"ion-button",
"ion-card",
"ion-chip",
+ "ion-datetime",
"ion-datetime-button",
"ion-fab-button",
"ion-item",
@@ -130,6 +131,9 @@
"ion-chip": [
"ion-ripple-effect"
],
+ "ion-datetime": [
+ "ion-ripple-effect"
+ ],
"ion-datetime-button": [
"ion-ripple-effect"
],
diff --git a/src/translate/api/searchbar.json b/src/translate/api/searchbar.json
index 15d527bab49..7ccc020ad99 100644
--- a/src/translate/api/searchbar.json
+++ b/src/translate/api/searchbar.json
@@ -33,6 +33,28 @@
"optional": false,
"required": false
},
+ {
+ "name": "autocapitalize",
+ "type": "string",
+ "complexType": {
+ "original": "string",
+ "resolved": "string",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "autocapitalize",
+ "reflectToAttr": false,
+ "docs": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`.",
+ "docsTags": [],
+ "default": "'off'",
+ "values": [
+ {
+ "type": "string"
+ }
+ ],
+ "optional": false,
+ "required": false
+ },
{
"name": "autocomplete",
"type": "\"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\"",
@@ -583,6 +605,54 @@
"optional": true,
"required": false
},
+ {
+ "name": "maxlength",
+ "type": "number | undefined",
+ "complexType": {
+ "original": "number",
+ "resolved": "number | undefined",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "maxlength",
+ "reflectToAttr": false,
+ "docs": "This attribute specifies the maximum number of characters that the user can enter.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "number"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
+ {
+ "name": "minlength",
+ "type": "number | undefined",
+ "complexType": {
+ "original": "number",
+ "resolved": "number | undefined",
+ "references": {}
+ },
+ "mutable": false,
+ "attr": "minlength",
+ "reflectToAttr": false,
+ "docs": "This attribute specifies the minimum number of characters that the user can enter.",
+ "docsTags": [],
+ "values": [
+ {
+ "type": "number"
+ },
+ {
+ "type": "undefined"
+ }
+ ],
+ "optional": true,
+ "required": false
+ },
{
"name": "mode",
"type": "\"ios\" | \"md\"",
diff --git a/src/translate/api/select.json b/src/translate/api/select.json
index 843ea40b4ca..cb74d75d1cd 100644
--- a/src/translate/api/select.json
+++ b/src/translate/api/select.json
@@ -398,30 +398,6 @@
"optional": true,
"required": false
},
- {
- "name": "legacy",
- "type": "boolean | undefined",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "legacy",
- "reflectToAttr": false,
- "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the `label` property. As a result,\nthe `legacy` property should only be used as an escape hatch when you want to\navoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "mode",
"type": "\"ios\" | \"md\"",
@@ -800,6 +776,11 @@
"annotation": "prop",
"docs": "The color of the highlight on the select when valid"
},
+ {
+ "name": "--highlight-height",
+ "annotation": "prop",
+ "docs": "The height of the highlight on the select. Only applies to md mode."
+ },
{
"name": "--padding-bottom",
"annotation": "prop",
@@ -899,8 +880,7 @@
],
"ion-item": [
"ion-icon",
- "ion-ripple-effect",
- "ion-note"
+ "ion-ripple-effect"
],
"ion-popover": [
"ion-backdrop"
diff --git a/src/translate/api/textarea.json b/src/translate/api/textarea.json
index 1be2d116b15..6e460d984fc 100644
--- a/src/translate/api/textarea.json
+++ b/src/translate/api/textarea.json
@@ -534,30 +534,6 @@
"optional": false,
"required": false
},
- {
- "name": "legacy",
- "type": "boolean | undefined",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "legacy",
- "reflectToAttr": false,
- "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "maxlength",
"type": "number | undefined",
@@ -1027,6 +1003,11 @@
"annotation": "prop",
"docs": "The color of the highlight on the textarea when valid"
},
+ {
+ "name": "--highlight-height",
+ "annotation": "prop",
+ "docs": "The height of the highlight on the textarea. Only applies to md mode."
+ },
{
"name": "--padding-bottom",
"annotation": "prop",
diff --git a/src/translate/api/toast.json b/src/translate/api/toast.json
index 020dda7424b..535b45ad854 100644
--- a/src/translate/api/toast.json
+++ b/src/translate/api/toast.json
@@ -629,7 +629,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"references": {
@@ -655,7 +655,7 @@
{
"name": "role",
"type": "string | undefined",
- "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "docs": "The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
],
"docs": "Dismiss the toast overlay after it has been presented.",
@@ -666,7 +666,7 @@
},
{
"name": "param",
- "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`."
+ "text": "role The role of the element that is dismissing the toast.\nThis can be useful in a button handler for determining which button was\nclicked to dismiss the toast.\nSome examples include: ``\"cancel\"`, `\"destructive\"`, \"selected\"`, and `\"backdrop\"`.\n\nThis is a no-op if the overlay has not been presented yet. If you want\nto remove an overlay from the DOM that was never presented, use the\n[remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method."
}
]
},
diff --git a/src/translate/api/toggle.json b/src/translate/api/toggle.json
index ccb2ba67adb..89c6c9ad8fd 100644
--- a/src/translate/api/toggle.json
+++ b/src/translate/api/toggle.json
@@ -38,7 +38,7 @@
"mutable": false,
"attr": "alignment",
"reflectToAttr": false,
- "docs": "How to control the alignment of the toggle and label on the cross axis.\n``\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.",
+ "docs": "How to control the alignment of the toggle and label on the cross axis.\n`\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.",
"docsTags": [],
"default": "'center'",
"values": [
@@ -255,30 +255,6 @@
"optional": false,
"required": false
},
- {
- "name": "legacy",
- "type": "boolean | undefined",
- "complexType": {
- "original": "boolean",
- "resolved": "boolean | undefined",
- "references": {}
- },
- "mutable": false,
- "attr": "legacy",
- "reflectToAttr": false,
- "docs": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup.",
- "docsTags": [],
- "values": [
- {
- "type": "boolean"
- },
- {
- "type": "undefined"
- }
- ],
- "optional": true,
- "required": false
- },
{
"name": "mode",
"type": "\"ios\" | \"md\"",
diff --git a/static/code/stackblitz/v6/angular/package.json b/static/code/stackblitz/v6/angular/package.json
index 6f06f36f0e0..0ecc1227dd5 100644
--- a/static/code/stackblitz/v6/angular/package.json
+++ b/static/code/stackblitz/v6/angular/package.json
@@ -2,6 +2,6 @@
"dependencies": {
"@ionic/angular": "^6.0.0",
"@ionic/core": "^6.0.0",
- "@angular/platform-browser-dynamic": "17.1.1"
+ "@angular/platform-browser-dynamic": "17.3.2"
}
}
diff --git a/static/code/stackblitz/v6/react/package-lock.json b/static/code/stackblitz/v6/react/package-lock.json
index 8f6059c675e..55d433ab949 100644
--- a/static/code/stackblitz/v6/react/package-lock.json
+++ b/static/code/stackblitz/v6/react/package-lock.json
@@ -398,10 +398,25 @@
"node": ">=6.9.0"
}
},
+ "node_modules/@esbuild/aix-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+ "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+ "cpu": [
+ "ppc64"
+ ],
+ "optional": true,
+ "os": [
+ "aix"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/@esbuild/android-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz",
- "integrity": "sha512-jkYjjq7SdsWuNI6b5quymW0oC83NN5FdRPuCbs9HZ02mfVdAP8B8eeqLSYU3gb6OJEaY5CQabtTFbqBf26H3GA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+ "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
"cpu": [
"arm"
],
@@ -414,9 +429,9 @@
}
},
"node_modules/@esbuild/android-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.9.tgz",
- "integrity": "sha512-q4cR+6ZD0938R19MyEW3jEsMzbb/1rulLXiNAJQADD/XYp7pT+rOS5JGxvpRW8dFDEfjW4wLgC/3FXIw4zYglQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+ "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
"cpu": [
"arm64"
],
@@ -429,9 +444,9 @@
}
},
"node_modules/@esbuild/android-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.9.tgz",
- "integrity": "sha512-KOqoPntWAH6ZxDwx1D6mRntIgZh9KodzgNOy5Ebt9ghzffOk9X2c1sPwtM9P+0eXbefnDhqYfkh5PLP5ULtWFA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+ "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
"cpu": [
"x64"
],
@@ -444,9 +459,9 @@
}
},
"node_modules/@esbuild/darwin-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.9.tgz",
- "integrity": "sha512-KBJ9S0AFyLVx2E5D8W0vExqRW01WqRtczUZ8NRu+Pi+87opZn5tL4Y0xT0mA4FtHctd0ZgwNoN639fUUGlNIWw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+ "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
"cpu": [
"arm64"
],
@@ -459,9 +474,9 @@
}
},
"node_modules/@esbuild/darwin-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.9.tgz",
- "integrity": "sha512-vE0VotmNTQaTdX0Q9dOHmMTao6ObjyPm58CHZr1UK7qpNleQyxlFlNCaHsHx6Uqv86VgPmR4o2wdNq3dP1qyDQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+ "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
"cpu": [
"x64"
],
@@ -474,9 +489,9 @@
}
},
"node_modules/@esbuild/freebsd-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.9.tgz",
- "integrity": "sha512-uFQyd/o1IjiEk3rUHSwUKkqZwqdvuD8GevWF065eqgYfexcVkxh+IJgwTaGZVu59XczZGcN/YMh9uF1fWD8j1g==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+ "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
"cpu": [
"arm64"
],
@@ -489,9 +504,9 @@
}
},
"node_modules/@esbuild/freebsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.9.tgz",
- "integrity": "sha512-WMLgWAtkdTbTu1AWacY7uoj/YtHthgqrqhf1OaEWnZb7PQgpt8eaA/F3LkV0E6K/Lc0cUr/uaVP/49iE4M4asA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+ "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
"cpu": [
"x64"
],
@@ -504,9 +519,9 @@
}
},
"node_modules/@esbuild/linux-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.9.tgz",
- "integrity": "sha512-C/ChPohUYoyUaqn1h17m/6yt6OB14hbXvT8EgM1ZWaiiTYz7nWZR0SYmMnB5BzQA4GXl3BgBO1l8MYqL/He3qw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+ "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
"cpu": [
"arm"
],
@@ -519,9 +534,9 @@
}
},
"node_modules/@esbuild/linux-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.9.tgz",
- "integrity": "sha512-PiPblfe1BjK7WDAKR1Cr9O7VVPqVNpwFcPWgfn4xu0eMemzRp442hXyzF/fSwgrufI66FpHOEJk0yYdPInsmyQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+ "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
"cpu": [
"arm64"
],
@@ -534,9 +549,9 @@
}
},
"node_modules/@esbuild/linux-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.9.tgz",
- "integrity": "sha512-f37i/0zE0MjDxijkPSQw1CO/7C27Eojqb+r3BbHVxMLkj8GCa78TrBZzvPyA/FNLUMzP3eyHCVkAopkKVja+6Q==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+ "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
"cpu": [
"ia32"
],
@@ -549,9 +564,9 @@
}
},
"node_modules/@esbuild/linux-loong64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.9.tgz",
- "integrity": "sha512-t6mN147pUIf3t6wUt3FeumoOTPfmv9Cc6DQlsVBpB7eCpLOqQDyWBP1ymXn1lDw4fNUSb/gBcKAmvTP49oIkaA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+ "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
"cpu": [
"loong64"
],
@@ -564,9 +579,9 @@
}
},
"node_modules/@esbuild/linux-mips64el": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.9.tgz",
- "integrity": "sha512-jg9fujJTNTQBuDXdmAg1eeJUL4Jds7BklOTkkH80ZgQIoCTdQrDaHYgbFZyeTq8zbY+axgptncko3v9p5hLZtw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+ "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
"cpu": [
"mips64el"
],
@@ -579,9 +594,9 @@
}
},
"node_modules/@esbuild/linux-ppc64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.9.tgz",
- "integrity": "sha512-tkV0xUX0pUUgY4ha7z5BbDS85uI7ABw3V1d0RNTii7E9lbmV8Z37Pup2tsLV46SQWzjOeyDi1Q7Wx2+QM8WaCQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+ "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
"cpu": [
"ppc64"
],
@@ -594,9 +609,9 @@
}
},
"node_modules/@esbuild/linux-riscv64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.9.tgz",
- "integrity": "sha512-DfLp8dj91cufgPZDXr9p3FoR++m3ZJ6uIXsXrIvJdOjXVREtXuQCjfMfvmc3LScAVmLjcfloyVtpn43D56JFHg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+ "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
"cpu": [
"riscv64"
],
@@ -609,9 +624,9 @@
}
},
"node_modules/@esbuild/linux-s390x": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.9.tgz",
- "integrity": "sha512-zHbglfEdC88KMgCWpOl/zc6dDYJvWGLiUtmPRsr1OgCViu3z5GncvNVdf+6/56O2Ca8jUU+t1BW261V6kp8qdw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+ "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
"cpu": [
"s390x"
],
@@ -624,9 +639,9 @@
}
},
"node_modules/@esbuild/linux-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.9.tgz",
- "integrity": "sha512-JUjpystGFFmNrEHQnIVG8hKwvA2DN5o7RqiO1CVX8EN/F/gkCjkUMgVn6hzScpwnJtl2mPR6I9XV1oW8k9O+0A==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+ "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
"cpu": [
"x64"
],
@@ -639,9 +654,9 @@
}
},
"node_modules/@esbuild/netbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.9.tgz",
- "integrity": "sha512-GThgZPAwOBOsheA2RUlW5UeroRfESwMq/guy8uEe3wJlAOjpOXuSevLRd70NZ37ZrpO6RHGHgEHvPg1h3S1Jug==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
"cpu": [
"x64"
],
@@ -654,9 +669,9 @@
}
},
"node_modules/@esbuild/openbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.9.tgz",
- "integrity": "sha512-Ki6PlzppaFVbLnD8PtlVQfsYw4S9n3eQl87cqgeIw+O3sRr9IghpfSKY62mggdt1yCSZ8QWvTZ9jo9fjDSg9uw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
"cpu": [
"x64"
],
@@ -669,9 +684,9 @@
}
},
"node_modules/@esbuild/sunos-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.9.tgz",
- "integrity": "sha512-MLHj7k9hWh4y1ddkBpvRj2b9NCBhfgBt3VpWbHQnXRedVun/hC7sIyTGDGTfsGuXo4ebik2+3ShjcPbhtFwWDw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+ "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
"cpu": [
"x64"
],
@@ -684,9 +699,9 @@
}
},
"node_modules/@esbuild/win32-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.9.tgz",
- "integrity": "sha512-GQoa6OrQ8G08guMFgeXPH7yE/8Dt0IfOGWJSfSH4uafwdC7rWwrfE6P9N8AtPGIjUzdo2+7bN8Xo3qC578olhg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+ "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
"cpu": [
"arm64"
],
@@ -699,9 +714,9 @@
}
},
"node_modules/@esbuild/win32-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.9.tgz",
- "integrity": "sha512-UOozV7Ntykvr5tSOlGCrqU3NBr3d8JqPes0QWN2WOXfvkWVGRajC+Ym0/Wj88fUgecUCLDdJPDF0Nna2UK3Qtg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+ "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
"cpu": [
"ia32"
],
@@ -714,9 +729,9 @@
}
},
"node_modules/@esbuild/win32-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.9.tgz",
- "integrity": "sha512-oxoQgglOP7RH6iasDrhY+R/3cHrfwIDvRlT4CGChflq6twk8iENeVvMJjmvBb94Ik1Z+93iGO27err7w6l54GQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+ "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
"cpu": [
"x64"
],
@@ -836,9 +851,9 @@
}
},
"node_modules/@rollup/rollup-android-arm-eabi": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.8.0.tgz",
- "integrity": "sha512-zdTObFRoNENrdPpnTNnhOljYIcOX7aI7+7wyrSpPFFIOf/nRdedE6IYsjaBE7tjukphh1tMTojgJ7p3lKY8x6Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
+ "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
"cpu": [
"arm"
],
@@ -848,9 +863,9 @@
]
},
"node_modules/@rollup/rollup-android-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.8.0.tgz",
- "integrity": "sha512-aiItwP48BiGpMFS9Znjo/xCNQVwTQVcRKkFKsO81m8exrGjHkCBDvm9PHay2kpa8RPnZzzKcD1iQ9KaLY4fPQQ==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
+ "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
"cpu": [
"arm64"
],
@@ -860,9 +875,9 @@
]
},
"node_modules/@rollup/rollup-darwin-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.8.0.tgz",
- "integrity": "sha512-zhNIS+L4ZYkYQUjIQUR6Zl0RXhbbA0huvNIWjmPc2SL0cB1h5Djkcy+RZ3/Bwszfb6vgwUvcVJYD6e6Zkpsi8g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
+ "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
"cpu": [
"arm64"
],
@@ -872,9 +887,9 @@
]
},
"node_modules/@rollup/rollup-darwin-x64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.8.0.tgz",
- "integrity": "sha512-A/FAHFRNQYrELrb/JHncRWzTTXB2ticiRFztP4ggIUAfa9Up1qfW8aG2w/mN9jNiZ+HB0t0u0jpJgFXG6BfRTA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
+ "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
"cpu": [
"x64"
],
@@ -884,9 +899,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.8.0.tgz",
- "integrity": "sha512-JsidBnh3p2IJJA4/2xOF2puAYqbaczB3elZDT0qHxn362EIoIkq7hrR43Xa8RisgI6/WPfvb2umbGsuvf7E37A==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
+ "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
"cpu": [
"arm"
],
@@ -896,9 +911,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.8.0.tgz",
- "integrity": "sha512-hBNCnqw3EVCkaPB0Oqd24bv8SklETptQWcJz06kb9OtiShn9jK1VuTgi7o4zPSt6rNGWQOTDEAccbk0OqJmS+g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
"cpu": [
"arm64"
],
@@ -908,9 +923,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.8.0.tgz",
- "integrity": "sha512-Fw9ChYfJPdltvi9ALJ9wzdCdxGw4wtq4t1qY028b2O7GwB5qLNSGtqMsAel1lfWTZvf4b6/+4HKp0GlSYg0ahA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
+ "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
"cpu": [
"arm64"
],
@@ -920,9 +935,9 @@
]
},
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.8.0.tgz",
- "integrity": "sha512-BH5xIh7tOzS9yBi8dFrCTG8Z6iNIGWGltd3IpTSKp6+pNWWO6qy8eKoRxOtwFbMrid5NZaidLYN6rHh9aB8bEw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
"cpu": [
"riscv64"
],
@@ -932,9 +947,9 @@
]
},
"node_modules/@rollup/rollup-linux-x64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.8.0.tgz",
- "integrity": "sha512-PmvAj8k6EuWiyLbkNpd6BLv5XeYFpqWuRvRNRl80xVfpGXK/z6KYXmAgbI4ogz7uFiJxCnYcqyvZVD0dgFog7Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
+ "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
"cpu": [
"x64"
],
@@ -944,9 +959,9 @@
]
},
"node_modules/@rollup/rollup-linux-x64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.8.0.tgz",
- "integrity": "sha512-mdxnlW2QUzXwY+95TuxZ+CurrhgrPAMveDWI97EQlA9bfhR8tw3Pt7SUlc/eSlCNxlWktpmT//EAA8UfCHOyXg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
+ "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
"cpu": [
"x64"
],
@@ -956,9 +971,9 @@
]
},
"node_modules/@rollup/rollup-win32-arm64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.8.0.tgz",
- "integrity": "sha512-ge7saUz38aesM4MA7Cad8CHo0Fyd1+qTaqoIo+Jtk+ipBi4ATSrHWov9/S4u5pbEQmLjgUjB7BJt+MiKG2kzmA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
+ "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
"cpu": [
"arm64"
],
@@ -968,9 +983,9 @@
]
},
"node_modules/@rollup/rollup-win32-ia32-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.8.0.tgz",
- "integrity": "sha512-p9E3PZlzurhlsN5h9g7zIP1DnqKXJe8ZUkFwAazqSvHuWfihlIISPxG9hCHCoA+dOOspL/c7ty1eeEVFTE0UTw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
+ "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
"cpu": [
"ia32"
],
@@ -980,9 +995,9 @@
]
},
"node_modules/@rollup/rollup-win32-x64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.8.0.tgz",
- "integrity": "sha512-kb4/auKXkYKqlUYTE8s40FcJIj5soOyRLHKd4ugR0dCq0G2EfcF54eYcfQiGkHzjidZ40daB4ulsFdtqNKZtBg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
+ "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
"cpu": [
"x64"
],
@@ -1040,15 +1055,20 @@
"@babel/types": "^7.3.0"
}
},
+ "node_modules/@types/estree": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+ },
"node_modules/@types/history": {
"version": "4.7.11",
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
"integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
},
"node_modules/@types/node": {
- "version": "20.11.7",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.7.tgz",
- "integrity": "sha512-GPmeN1C3XAyV5uybAf4cMLWT9fDWcmQhZVtMFu7OR32WjrqGG+Wnk2V1d0bmtUyE/Zy1QJ9BxyiTih9z8Oks8A==",
+ "version": "20.11.10",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.10.tgz",
+ "integrity": "sha512-rZEfe/hJSGYmdfX9tvcPMYeYPW2sNl50nsw4jZmRcaG0HIAb0WYEpsB05GOb53vjqpyE9GUhlDQ4jLSoB5q9kg==",
"dependencies": {
"undici-types": "~5.26.4"
}
@@ -1059,9 +1079,9 @@
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
},
"node_modules/@types/react": {
- "version": "18.2.53",
- "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.53.tgz",
- "integrity": "sha512-52IHsMDT8qATp9B9zoOyobW8W3/0QhaJQTw1HwRj0UY2yBpCAQ7+S/CqHYQ8niAm3p4ji+rWUQ9UCib0GxQ60w==",
+ "version": "18.2.70",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.70.tgz",
+ "integrity": "sha512-hjlM2hho2vqklPhopNkXkdkeq6Lv8WSZTpr7956zY+3WS5cfYUewtCzsJLsbW5dEv3lfSeQ4W14ZFeKC437JRQ==",
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@@ -1069,9 +1089,9 @@
}
},
"node_modules/@types/react-dom": {
- "version": "18.2.18",
- "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz",
- "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==",
+ "version": "18.2.22",
+ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz",
+ "integrity": "sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==",
"dependencies": {
"@types/react": "*"
}
@@ -1252,9 +1272,9 @@
"integrity": "sha512-6uhqWBIapTJUxgPTCHH9sqdbxIMPt7oXl0VcAL1kOtlU6aECdcMncCrX5Z7sHQ/invtrC9jUQUef7+HhO8vVFw=="
},
"node_modules/esbuild": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.9.tgz",
- "integrity": "sha512-U9CHtKSy+EpPsEBa+/A2gMs/h3ylBC0H0KSqIg7tpztHerLi6nrrcoUJAkNCEPumx8yJ+Byic4BVwHgRbN0TBg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+ "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
"hasInstallScript": true,
"bin": {
"esbuild": "bin/esbuild"
@@ -1263,28 +1283,29 @@
"node": ">=12"
},
"optionalDependencies": {
- "@esbuild/android-arm": "0.19.9",
- "@esbuild/android-arm64": "0.19.9",
- "@esbuild/android-x64": "0.19.9",
- "@esbuild/darwin-arm64": "0.19.9",
- "@esbuild/darwin-x64": "0.19.9",
- "@esbuild/freebsd-arm64": "0.19.9",
- "@esbuild/freebsd-x64": "0.19.9",
- "@esbuild/linux-arm": "0.19.9",
- "@esbuild/linux-arm64": "0.19.9",
- "@esbuild/linux-ia32": "0.19.9",
- "@esbuild/linux-loong64": "0.19.9",
- "@esbuild/linux-mips64el": "0.19.9",
- "@esbuild/linux-ppc64": "0.19.9",
- "@esbuild/linux-riscv64": "0.19.9",
- "@esbuild/linux-s390x": "0.19.9",
- "@esbuild/linux-x64": "0.19.9",
- "@esbuild/netbsd-x64": "0.19.9",
- "@esbuild/openbsd-x64": "0.19.9",
- "@esbuild/sunos-x64": "0.19.9",
- "@esbuild/win32-arm64": "0.19.9",
- "@esbuild/win32-ia32": "0.19.9",
- "@esbuild/win32-x64": "0.19.9"
+ "@esbuild/aix-ppc64": "0.20.2",
+ "@esbuild/android-arm": "0.20.2",
+ "@esbuild/android-arm64": "0.20.2",
+ "@esbuild/android-x64": "0.20.2",
+ "@esbuild/darwin-arm64": "0.20.2",
+ "@esbuild/darwin-x64": "0.20.2",
+ "@esbuild/freebsd-arm64": "0.20.2",
+ "@esbuild/freebsd-x64": "0.20.2",
+ "@esbuild/linux-arm": "0.20.2",
+ "@esbuild/linux-arm64": "0.20.2",
+ "@esbuild/linux-ia32": "0.20.2",
+ "@esbuild/linux-loong64": "0.20.2",
+ "@esbuild/linux-mips64el": "0.20.2",
+ "@esbuild/linux-ppc64": "0.20.2",
+ "@esbuild/linux-riscv64": "0.20.2",
+ "@esbuild/linux-s390x": "0.20.2",
+ "@esbuild/linux-x64": "0.20.2",
+ "@esbuild/netbsd-x64": "0.20.2",
+ "@esbuild/openbsd-x64": "0.20.2",
+ "@esbuild/sunos-x64": "0.20.2",
+ "@esbuild/win32-arm64": "0.20.2",
+ "@esbuild/win32-ia32": "0.20.2",
+ "@esbuild/win32-x64": "0.20.2"
}
},
"node_modules/escalade": {
@@ -1453,9 +1474,9 @@
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
},
"node_modules/postcss": {
- "version": "8.4.32",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
- "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
"funding": [
{
"type": "opencollective",
@@ -1473,7 +1494,7 @@
"dependencies": {
"nanoid": "^3.3.7",
"picocolors": "^1.0.0",
- "source-map-js": "^1.0.2"
+ "source-map-js": "^1.2.0"
},
"engines": {
"node": "^10 || ^12 || >=14"
@@ -1590,9 +1611,12 @@
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
},
"node_modules/rollup": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.8.0.tgz",
- "integrity": "sha512-NpsklK2fach5CdI+PScmlE5R4Ao/FSWtF7LkoIrHDxPACY/xshNasPsbpG0VVHxUTbf74tJbVT4PrP8JsJ6ZDA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
+ "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
+ "dependencies": {
+ "@types/estree": "1.0.5"
+ },
"bin": {
"rollup": "dist/bin/rollup"
},
@@ -1601,19 +1625,19 @@
"npm": ">=8.0.0"
},
"optionalDependencies": {
- "@rollup/rollup-android-arm-eabi": "4.8.0",
- "@rollup/rollup-android-arm64": "4.8.0",
- "@rollup/rollup-darwin-arm64": "4.8.0",
- "@rollup/rollup-darwin-x64": "4.8.0",
- "@rollup/rollup-linux-arm-gnueabihf": "4.8.0",
- "@rollup/rollup-linux-arm64-gnu": "4.8.0",
- "@rollup/rollup-linux-arm64-musl": "4.8.0",
- "@rollup/rollup-linux-riscv64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-musl": "4.8.0",
- "@rollup/rollup-win32-arm64-msvc": "4.8.0",
- "@rollup/rollup-win32-ia32-msvc": "4.8.0",
- "@rollup/rollup-win32-x64-msvc": "4.8.0",
+ "@rollup/rollup-android-arm-eabi": "4.13.0",
+ "@rollup/rollup-android-arm64": "4.13.0",
+ "@rollup/rollup-darwin-arm64": "4.13.0",
+ "@rollup/rollup-darwin-x64": "4.13.0",
+ "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
+ "@rollup/rollup-linux-arm64-gnu": "4.13.0",
+ "@rollup/rollup-linux-arm64-musl": "4.13.0",
+ "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-musl": "4.13.0",
+ "@rollup/rollup-win32-arm64-msvc": "4.13.0",
+ "@rollup/rollup-win32-ia32-msvc": "4.13.0",
+ "@rollup/rollup-win32-x64-msvc": "4.13.0",
"fsevents": "~2.3.2"
}
},
@@ -1626,9 +1650,9 @@
}
},
"node_modules/source-map-js": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
- "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
"engines": {
"node": ">=0.10.0"
}
@@ -1715,9 +1739,9 @@
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
},
"node_modules/typescript": {
- "version": "5.3.3",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
- "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+ "version": "5.4.2",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+ "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -1766,13 +1790,13 @@
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
},
"node_modules/vite": {
- "version": "5.0.12",
- "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
- "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
+ "version": "5.2.8",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+ "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
"dependencies": {
- "esbuild": "^0.19.3",
- "postcss": "^8.4.32",
- "rollup": "^4.2.0"
+ "esbuild": "^0.20.1",
+ "postcss": "^8.4.38",
+ "rollup": "^4.13.0"
},
"bin": {
"vite": "bin/vite.js"
@@ -2102,136 +2126,142 @@
"to-fast-properties": "^2.0.0"
}
},
+ "@esbuild/aix-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+ "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+ "optional": true
+ },
"@esbuild/android-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz",
- "integrity": "sha512-jkYjjq7SdsWuNI6b5quymW0oC83NN5FdRPuCbs9HZ02mfVdAP8B8eeqLSYU3gb6OJEaY5CQabtTFbqBf26H3GA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+ "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
"optional": true
},
"@esbuild/android-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.9.tgz",
- "integrity": "sha512-q4cR+6ZD0938R19MyEW3jEsMzbb/1rulLXiNAJQADD/XYp7pT+rOS5JGxvpRW8dFDEfjW4wLgC/3FXIw4zYglQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+ "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
"optional": true
},
"@esbuild/android-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.9.tgz",
- "integrity": "sha512-KOqoPntWAH6ZxDwx1D6mRntIgZh9KodzgNOy5Ebt9ghzffOk9X2c1sPwtM9P+0eXbefnDhqYfkh5PLP5ULtWFA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+ "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
"optional": true
},
"@esbuild/darwin-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.9.tgz",
- "integrity": "sha512-KBJ9S0AFyLVx2E5D8W0vExqRW01WqRtczUZ8NRu+Pi+87opZn5tL4Y0xT0mA4FtHctd0ZgwNoN639fUUGlNIWw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+ "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
"optional": true
},
"@esbuild/darwin-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.9.tgz",
- "integrity": "sha512-vE0VotmNTQaTdX0Q9dOHmMTao6ObjyPm58CHZr1UK7qpNleQyxlFlNCaHsHx6Uqv86VgPmR4o2wdNq3dP1qyDQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+ "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
"optional": true
},
"@esbuild/freebsd-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.9.tgz",
- "integrity": "sha512-uFQyd/o1IjiEk3rUHSwUKkqZwqdvuD8GevWF065eqgYfexcVkxh+IJgwTaGZVu59XczZGcN/YMh9uF1fWD8j1g==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+ "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
"optional": true
},
"@esbuild/freebsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.9.tgz",
- "integrity": "sha512-WMLgWAtkdTbTu1AWacY7uoj/YtHthgqrqhf1OaEWnZb7PQgpt8eaA/F3LkV0E6K/Lc0cUr/uaVP/49iE4M4asA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+ "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
"optional": true
},
"@esbuild/linux-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.9.tgz",
- "integrity": "sha512-C/ChPohUYoyUaqn1h17m/6yt6OB14hbXvT8EgM1ZWaiiTYz7nWZR0SYmMnB5BzQA4GXl3BgBO1l8MYqL/He3qw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+ "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
"optional": true
},
"@esbuild/linux-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.9.tgz",
- "integrity": "sha512-PiPblfe1BjK7WDAKR1Cr9O7VVPqVNpwFcPWgfn4xu0eMemzRp442hXyzF/fSwgrufI66FpHOEJk0yYdPInsmyQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+ "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
"optional": true
},
"@esbuild/linux-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.9.tgz",
- "integrity": "sha512-f37i/0zE0MjDxijkPSQw1CO/7C27Eojqb+r3BbHVxMLkj8GCa78TrBZzvPyA/FNLUMzP3eyHCVkAopkKVja+6Q==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+ "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
"optional": true
},
"@esbuild/linux-loong64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.9.tgz",
- "integrity": "sha512-t6mN147pUIf3t6wUt3FeumoOTPfmv9Cc6DQlsVBpB7eCpLOqQDyWBP1ymXn1lDw4fNUSb/gBcKAmvTP49oIkaA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+ "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
"optional": true
},
"@esbuild/linux-mips64el": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.9.tgz",
- "integrity": "sha512-jg9fujJTNTQBuDXdmAg1eeJUL4Jds7BklOTkkH80ZgQIoCTdQrDaHYgbFZyeTq8zbY+axgptncko3v9p5hLZtw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+ "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
"optional": true
},
"@esbuild/linux-ppc64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.9.tgz",
- "integrity": "sha512-tkV0xUX0pUUgY4ha7z5BbDS85uI7ABw3V1d0RNTii7E9lbmV8Z37Pup2tsLV46SQWzjOeyDi1Q7Wx2+QM8WaCQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+ "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
"optional": true
},
"@esbuild/linux-riscv64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.9.tgz",
- "integrity": "sha512-DfLp8dj91cufgPZDXr9p3FoR++m3ZJ6uIXsXrIvJdOjXVREtXuQCjfMfvmc3LScAVmLjcfloyVtpn43D56JFHg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+ "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
"optional": true
},
"@esbuild/linux-s390x": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.9.tgz",
- "integrity": "sha512-zHbglfEdC88KMgCWpOl/zc6dDYJvWGLiUtmPRsr1OgCViu3z5GncvNVdf+6/56O2Ca8jUU+t1BW261V6kp8qdw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+ "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
"optional": true
},
"@esbuild/linux-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.9.tgz",
- "integrity": "sha512-JUjpystGFFmNrEHQnIVG8hKwvA2DN5o7RqiO1CVX8EN/F/gkCjkUMgVn6hzScpwnJtl2mPR6I9XV1oW8k9O+0A==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+ "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
"optional": true
},
"@esbuild/netbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.9.tgz",
- "integrity": "sha512-GThgZPAwOBOsheA2RUlW5UeroRfESwMq/guy8uEe3wJlAOjpOXuSevLRd70NZ37ZrpO6RHGHgEHvPg1h3S1Jug==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
"optional": true
},
"@esbuild/openbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.9.tgz",
- "integrity": "sha512-Ki6PlzppaFVbLnD8PtlVQfsYw4S9n3eQl87cqgeIw+O3sRr9IghpfSKY62mggdt1yCSZ8QWvTZ9jo9fjDSg9uw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
"optional": true
},
"@esbuild/sunos-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.9.tgz",
- "integrity": "sha512-MLHj7k9hWh4y1ddkBpvRj2b9NCBhfgBt3VpWbHQnXRedVun/hC7sIyTGDGTfsGuXo4ebik2+3ShjcPbhtFwWDw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+ "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
"optional": true
},
"@esbuild/win32-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.9.tgz",
- "integrity": "sha512-GQoa6OrQ8G08guMFgeXPH7yE/8Dt0IfOGWJSfSH4uafwdC7rWwrfE6P9N8AtPGIjUzdo2+7bN8Xo3qC578olhg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+ "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
"optional": true
},
"@esbuild/win32-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.9.tgz",
- "integrity": "sha512-UOozV7Ntykvr5tSOlGCrqU3NBr3d8JqPes0QWN2WOXfvkWVGRajC+Ym0/Wj88fUgecUCLDdJPDF0Nna2UK3Qtg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+ "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
"optional": true
},
"@esbuild/win32-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.9.tgz",
- "integrity": "sha512-oxoQgglOP7RH6iasDrhY+R/3cHrfwIDvRlT4CGChflq6twk8iENeVvMJjmvBb94Ik1Z+93iGO27err7w6l54GQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+ "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
"optional": true
},
"@ionic/core": {
@@ -2322,81 +2352,81 @@
}
},
"@rollup/rollup-android-arm-eabi": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.8.0.tgz",
- "integrity": "sha512-zdTObFRoNENrdPpnTNnhOljYIcOX7aI7+7wyrSpPFFIOf/nRdedE6IYsjaBE7tjukphh1tMTojgJ7p3lKY8x6Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
+ "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
"optional": true
},
"@rollup/rollup-android-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.8.0.tgz",
- "integrity": "sha512-aiItwP48BiGpMFS9Znjo/xCNQVwTQVcRKkFKsO81m8exrGjHkCBDvm9PHay2kpa8RPnZzzKcD1iQ9KaLY4fPQQ==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
+ "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
"optional": true
},
"@rollup/rollup-darwin-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.8.0.tgz",
- "integrity": "sha512-zhNIS+L4ZYkYQUjIQUR6Zl0RXhbbA0huvNIWjmPc2SL0cB1h5Djkcy+RZ3/Bwszfb6vgwUvcVJYD6e6Zkpsi8g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
+ "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
"optional": true
},
"@rollup/rollup-darwin-x64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.8.0.tgz",
- "integrity": "sha512-A/FAHFRNQYrELrb/JHncRWzTTXB2ticiRFztP4ggIUAfa9Up1qfW8aG2w/mN9jNiZ+HB0t0u0jpJgFXG6BfRTA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
+ "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
"optional": true
},
"@rollup/rollup-linux-arm-gnueabihf": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.8.0.tgz",
- "integrity": "sha512-JsidBnh3p2IJJA4/2xOF2puAYqbaczB3elZDT0qHxn362EIoIkq7hrR43Xa8RisgI6/WPfvb2umbGsuvf7E37A==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
+ "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
"optional": true
},
"@rollup/rollup-linux-arm64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.8.0.tgz",
- "integrity": "sha512-hBNCnqw3EVCkaPB0Oqd24bv8SklETptQWcJz06kb9OtiShn9jK1VuTgi7o4zPSt6rNGWQOTDEAccbk0OqJmS+g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
"optional": true
},
"@rollup/rollup-linux-arm64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.8.0.tgz",
- "integrity": "sha512-Fw9ChYfJPdltvi9ALJ9wzdCdxGw4wtq4t1qY028b2O7GwB5qLNSGtqMsAel1lfWTZvf4b6/+4HKp0GlSYg0ahA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
+ "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
"optional": true
},
"@rollup/rollup-linux-riscv64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.8.0.tgz",
- "integrity": "sha512-BH5xIh7tOzS9yBi8dFrCTG8Z6iNIGWGltd3IpTSKp6+pNWWO6qy8eKoRxOtwFbMrid5NZaidLYN6rHh9aB8bEw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
"optional": true
},
"@rollup/rollup-linux-x64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.8.0.tgz",
- "integrity": "sha512-PmvAj8k6EuWiyLbkNpd6BLv5XeYFpqWuRvRNRl80xVfpGXK/z6KYXmAgbI4ogz7uFiJxCnYcqyvZVD0dgFog7Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
+ "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
"optional": true
},
"@rollup/rollup-linux-x64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.8.0.tgz",
- "integrity": "sha512-mdxnlW2QUzXwY+95TuxZ+CurrhgrPAMveDWI97EQlA9bfhR8tw3Pt7SUlc/eSlCNxlWktpmT//EAA8UfCHOyXg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
+ "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
"optional": true
},
"@rollup/rollup-win32-arm64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.8.0.tgz",
- "integrity": "sha512-ge7saUz38aesM4MA7Cad8CHo0Fyd1+qTaqoIo+Jtk+ipBi4ATSrHWov9/S4u5pbEQmLjgUjB7BJt+MiKG2kzmA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
+ "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
"optional": true
},
"@rollup/rollup-win32-ia32-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.8.0.tgz",
- "integrity": "sha512-p9E3PZlzurhlsN5h9g7zIP1DnqKXJe8ZUkFwAazqSvHuWfihlIISPxG9hCHCoA+dOOspL/c7ty1eeEVFTE0UTw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
+ "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
"optional": true
},
"@rollup/rollup-win32-x64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.8.0.tgz",
- "integrity": "sha512-kb4/auKXkYKqlUYTE8s40FcJIj5soOyRLHKd4ugR0dCq0G2EfcF54eYcfQiGkHzjidZ40daB4ulsFdtqNKZtBg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
+ "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
"optional": true
},
"@stencil/core": {
@@ -2441,15 +2471,20 @@
"@babel/types": "^7.3.0"
}
},
+ "@types/estree": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+ },
"@types/history": {
"version": "4.7.11",
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
"integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
},
"@types/node": {
- "version": "20.11.7",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.7.tgz",
- "integrity": "sha512-GPmeN1C3XAyV5uybAf4cMLWT9fDWcmQhZVtMFu7OR32WjrqGG+Wnk2V1d0bmtUyE/Zy1QJ9BxyiTih9z8Oks8A==",
+ "version": "20.11.10",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.10.tgz",
+ "integrity": "sha512-rZEfe/hJSGYmdfX9tvcPMYeYPW2sNl50nsw4jZmRcaG0HIAb0WYEpsB05GOb53vjqpyE9GUhlDQ4jLSoB5q9kg==",
"requires": {
"undici-types": "~5.26.4"
}
@@ -2460,9 +2495,9 @@
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
},
"@types/react": {
- "version": "18.2.53",
- "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.53.tgz",
- "integrity": "sha512-52IHsMDT8qATp9B9zoOyobW8W3/0QhaJQTw1HwRj0UY2yBpCAQ7+S/CqHYQ8niAm3p4ji+rWUQ9UCib0GxQ60w==",
+ "version": "18.2.70",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.70.tgz",
+ "integrity": "sha512-hjlM2hho2vqklPhopNkXkdkeq6Lv8WSZTpr7956zY+3WS5cfYUewtCzsJLsbW5dEv3lfSeQ4W14ZFeKC437JRQ==",
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@@ -2470,9 +2505,9 @@
}
},
"@types/react-dom": {
- "version": "18.2.18",
- "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz",
- "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==",
+ "version": "18.2.22",
+ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz",
+ "integrity": "sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==",
"requires": {
"@types/react": "*"
}
@@ -2593,32 +2628,33 @@
"integrity": "sha512-6uhqWBIapTJUxgPTCHH9sqdbxIMPt7oXl0VcAL1kOtlU6aECdcMncCrX5Z7sHQ/invtrC9jUQUef7+HhO8vVFw=="
},
"esbuild": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.9.tgz",
- "integrity": "sha512-U9CHtKSy+EpPsEBa+/A2gMs/h3ylBC0H0KSqIg7tpztHerLi6nrrcoUJAkNCEPumx8yJ+Byic4BVwHgRbN0TBg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+ "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
"requires": {
- "@esbuild/android-arm": "0.19.9",
- "@esbuild/android-arm64": "0.19.9",
- "@esbuild/android-x64": "0.19.9",
- "@esbuild/darwin-arm64": "0.19.9",
- "@esbuild/darwin-x64": "0.19.9",
- "@esbuild/freebsd-arm64": "0.19.9",
- "@esbuild/freebsd-x64": "0.19.9",
- "@esbuild/linux-arm": "0.19.9",
- "@esbuild/linux-arm64": "0.19.9",
- "@esbuild/linux-ia32": "0.19.9",
- "@esbuild/linux-loong64": "0.19.9",
- "@esbuild/linux-mips64el": "0.19.9",
- "@esbuild/linux-ppc64": "0.19.9",
- "@esbuild/linux-riscv64": "0.19.9",
- "@esbuild/linux-s390x": "0.19.9",
- "@esbuild/linux-x64": "0.19.9",
- "@esbuild/netbsd-x64": "0.19.9",
- "@esbuild/openbsd-x64": "0.19.9",
- "@esbuild/sunos-x64": "0.19.9",
- "@esbuild/win32-arm64": "0.19.9",
- "@esbuild/win32-ia32": "0.19.9",
- "@esbuild/win32-x64": "0.19.9"
+ "@esbuild/aix-ppc64": "0.20.2",
+ "@esbuild/android-arm": "0.20.2",
+ "@esbuild/android-arm64": "0.20.2",
+ "@esbuild/android-x64": "0.20.2",
+ "@esbuild/darwin-arm64": "0.20.2",
+ "@esbuild/darwin-x64": "0.20.2",
+ "@esbuild/freebsd-arm64": "0.20.2",
+ "@esbuild/freebsd-x64": "0.20.2",
+ "@esbuild/linux-arm": "0.20.2",
+ "@esbuild/linux-arm64": "0.20.2",
+ "@esbuild/linux-ia32": "0.20.2",
+ "@esbuild/linux-loong64": "0.20.2",
+ "@esbuild/linux-mips64el": "0.20.2",
+ "@esbuild/linux-ppc64": "0.20.2",
+ "@esbuild/linux-riscv64": "0.20.2",
+ "@esbuild/linux-s390x": "0.20.2",
+ "@esbuild/linux-x64": "0.20.2",
+ "@esbuild/netbsd-x64": "0.20.2",
+ "@esbuild/openbsd-x64": "0.20.2",
+ "@esbuild/sunos-x64": "0.20.2",
+ "@esbuild/win32-arm64": "0.20.2",
+ "@esbuild/win32-ia32": "0.20.2",
+ "@esbuild/win32-x64": "0.20.2"
}
},
"escalade": {
@@ -2737,13 +2773,13 @@
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
},
"postcss": {
- "version": "8.4.32",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
- "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
"requires": {
"nanoid": "^3.3.7",
"picocolors": "^1.0.0",
- "source-map-js": "^1.0.2"
+ "source-map-js": "^1.2.0"
}
},
"prop-types": {
@@ -2844,23 +2880,24 @@
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
},
"rollup": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.8.0.tgz",
- "integrity": "sha512-NpsklK2fach5CdI+PScmlE5R4Ao/FSWtF7LkoIrHDxPACY/xshNasPsbpG0VVHxUTbf74tJbVT4PrP8JsJ6ZDA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
+ "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
"requires": {
- "@rollup/rollup-android-arm-eabi": "4.8.0",
- "@rollup/rollup-android-arm64": "4.8.0",
- "@rollup/rollup-darwin-arm64": "4.8.0",
- "@rollup/rollup-darwin-x64": "4.8.0",
- "@rollup/rollup-linux-arm-gnueabihf": "4.8.0",
- "@rollup/rollup-linux-arm64-gnu": "4.8.0",
- "@rollup/rollup-linux-arm64-musl": "4.8.0",
- "@rollup/rollup-linux-riscv64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-musl": "4.8.0",
- "@rollup/rollup-win32-arm64-msvc": "4.8.0",
- "@rollup/rollup-win32-ia32-msvc": "4.8.0",
- "@rollup/rollup-win32-x64-msvc": "4.8.0",
+ "@rollup/rollup-android-arm-eabi": "4.13.0",
+ "@rollup/rollup-android-arm64": "4.13.0",
+ "@rollup/rollup-darwin-arm64": "4.13.0",
+ "@rollup/rollup-darwin-x64": "4.13.0",
+ "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
+ "@rollup/rollup-linux-arm64-gnu": "4.13.0",
+ "@rollup/rollup-linux-arm64-musl": "4.13.0",
+ "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-musl": "4.13.0",
+ "@rollup/rollup-win32-arm64-msvc": "4.13.0",
+ "@rollup/rollup-win32-ia32-msvc": "4.13.0",
+ "@rollup/rollup-win32-x64-msvc": "4.13.0",
+ "@types/estree": "1.0.5",
"fsevents": "~2.3.2"
}
},
@@ -2873,9 +2910,9 @@
}
},
"source-map-js": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
- "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
},
"source-map-support": {
"version": "0.5.21",
@@ -2948,9 +2985,9 @@
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
},
"typescript": {
- "version": "5.3.3",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
- "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw=="
+ "version": "5.4.2",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+ "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ=="
},
"undici-types": {
"version": "5.26.5",
@@ -2972,14 +3009,14 @@
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
},
"vite": {
- "version": "5.0.12",
- "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
- "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
+ "version": "5.2.8",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+ "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
"requires": {
- "esbuild": "^0.19.3",
+ "esbuild": "^0.20.1",
"fsevents": "~2.3.3",
- "postcss": "^8.4.32",
- "rollup": "^4.2.0"
+ "postcss": "^8.4.38",
+ "rollup": "^4.13.0"
}
},
"web-vitals": {
diff --git a/static/code/stackblitz/v6/vue/package-lock.json b/static/code/stackblitz/v6/vue/package-lock.json
index 968f011044c..dc61dc42b91 100644
--- a/static/code/stackblitz/v6/vue/package-lock.json
+++ b/static/code/stackblitz/v6/vue/package-lock.json
@@ -11,19 +11,19 @@
"@ionic/vue": "^6.0.0",
"@ionic/vue-router": "^6.0.0",
"vue": "^3.2.25",
- "vue-router": "4.2.5"
+ "vue-router": "4.3.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.0",
"typescript": "^4.5.4",
"vite": "^5.0.0",
- "vue-tsc": "^1.0.0"
+ "vue-tsc": "^2.0.0"
}
},
"node_modules/@babel/parser": {
- "version": "7.23.6",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
- "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==",
+ "version": "7.23.9",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
+ "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
"bin": {
"parser": "bin/babel-parser.js"
},
@@ -31,10 +31,26 @@
"node": ">=6.0.0"
}
},
+ "node_modules/@esbuild/aix-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+ "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+ "cpu": [
+ "ppc64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "aix"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/@esbuild/android-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz",
- "integrity": "sha512-jkYjjq7SdsWuNI6b5quymW0oC83NN5FdRPuCbs9HZ02mfVdAP8B8eeqLSYU3gb6OJEaY5CQabtTFbqBf26H3GA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+ "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
"cpu": [
"arm"
],
@@ -48,9 +64,9 @@
}
},
"node_modules/@esbuild/android-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.9.tgz",
- "integrity": "sha512-q4cR+6ZD0938R19MyEW3jEsMzbb/1rulLXiNAJQADD/XYp7pT+rOS5JGxvpRW8dFDEfjW4wLgC/3FXIw4zYglQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+ "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
"cpu": [
"arm64"
],
@@ -64,9 +80,9 @@
}
},
"node_modules/@esbuild/android-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.9.tgz",
- "integrity": "sha512-KOqoPntWAH6ZxDwx1D6mRntIgZh9KodzgNOy5Ebt9ghzffOk9X2c1sPwtM9P+0eXbefnDhqYfkh5PLP5ULtWFA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+ "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
"cpu": [
"x64"
],
@@ -80,9 +96,9 @@
}
},
"node_modules/@esbuild/darwin-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.9.tgz",
- "integrity": "sha512-KBJ9S0AFyLVx2E5D8W0vExqRW01WqRtczUZ8NRu+Pi+87opZn5tL4Y0xT0mA4FtHctd0ZgwNoN639fUUGlNIWw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+ "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
"cpu": [
"arm64"
],
@@ -96,9 +112,9 @@
}
},
"node_modules/@esbuild/darwin-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.9.tgz",
- "integrity": "sha512-vE0VotmNTQaTdX0Q9dOHmMTao6ObjyPm58CHZr1UK7qpNleQyxlFlNCaHsHx6Uqv86VgPmR4o2wdNq3dP1qyDQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+ "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
"cpu": [
"x64"
],
@@ -112,9 +128,9 @@
}
},
"node_modules/@esbuild/freebsd-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.9.tgz",
- "integrity": "sha512-uFQyd/o1IjiEk3rUHSwUKkqZwqdvuD8GevWF065eqgYfexcVkxh+IJgwTaGZVu59XczZGcN/YMh9uF1fWD8j1g==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+ "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
"cpu": [
"arm64"
],
@@ -128,9 +144,9 @@
}
},
"node_modules/@esbuild/freebsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.9.tgz",
- "integrity": "sha512-WMLgWAtkdTbTu1AWacY7uoj/YtHthgqrqhf1OaEWnZb7PQgpt8eaA/F3LkV0E6K/Lc0cUr/uaVP/49iE4M4asA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+ "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
"cpu": [
"x64"
],
@@ -144,9 +160,9 @@
}
},
"node_modules/@esbuild/linux-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.9.tgz",
- "integrity": "sha512-C/ChPohUYoyUaqn1h17m/6yt6OB14hbXvT8EgM1ZWaiiTYz7nWZR0SYmMnB5BzQA4GXl3BgBO1l8MYqL/He3qw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+ "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
"cpu": [
"arm"
],
@@ -160,9 +176,9 @@
}
},
"node_modules/@esbuild/linux-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.9.tgz",
- "integrity": "sha512-PiPblfe1BjK7WDAKR1Cr9O7VVPqVNpwFcPWgfn4xu0eMemzRp442hXyzF/fSwgrufI66FpHOEJk0yYdPInsmyQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+ "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
"cpu": [
"arm64"
],
@@ -176,9 +192,9 @@
}
},
"node_modules/@esbuild/linux-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.9.tgz",
- "integrity": "sha512-f37i/0zE0MjDxijkPSQw1CO/7C27Eojqb+r3BbHVxMLkj8GCa78TrBZzvPyA/FNLUMzP3eyHCVkAopkKVja+6Q==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+ "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
"cpu": [
"ia32"
],
@@ -192,9 +208,9 @@
}
},
"node_modules/@esbuild/linux-loong64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.9.tgz",
- "integrity": "sha512-t6mN147pUIf3t6wUt3FeumoOTPfmv9Cc6DQlsVBpB7eCpLOqQDyWBP1ymXn1lDw4fNUSb/gBcKAmvTP49oIkaA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+ "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
"cpu": [
"loong64"
],
@@ -208,9 +224,9 @@
}
},
"node_modules/@esbuild/linux-mips64el": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.9.tgz",
- "integrity": "sha512-jg9fujJTNTQBuDXdmAg1eeJUL4Jds7BklOTkkH80ZgQIoCTdQrDaHYgbFZyeTq8zbY+axgptncko3v9p5hLZtw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+ "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
"cpu": [
"mips64el"
],
@@ -224,9 +240,9 @@
}
},
"node_modules/@esbuild/linux-ppc64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.9.tgz",
- "integrity": "sha512-tkV0xUX0pUUgY4ha7z5BbDS85uI7ABw3V1d0RNTii7E9lbmV8Z37Pup2tsLV46SQWzjOeyDi1Q7Wx2+QM8WaCQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+ "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
"cpu": [
"ppc64"
],
@@ -240,9 +256,9 @@
}
},
"node_modules/@esbuild/linux-riscv64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.9.tgz",
- "integrity": "sha512-DfLp8dj91cufgPZDXr9p3FoR++m3ZJ6uIXsXrIvJdOjXVREtXuQCjfMfvmc3LScAVmLjcfloyVtpn43D56JFHg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+ "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
"cpu": [
"riscv64"
],
@@ -256,9 +272,9 @@
}
},
"node_modules/@esbuild/linux-s390x": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.9.tgz",
- "integrity": "sha512-zHbglfEdC88KMgCWpOl/zc6dDYJvWGLiUtmPRsr1OgCViu3z5GncvNVdf+6/56O2Ca8jUU+t1BW261V6kp8qdw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+ "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
"cpu": [
"s390x"
],
@@ -272,9 +288,9 @@
}
},
"node_modules/@esbuild/linux-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.9.tgz",
- "integrity": "sha512-JUjpystGFFmNrEHQnIVG8hKwvA2DN5o7RqiO1CVX8EN/F/gkCjkUMgVn6hzScpwnJtl2mPR6I9XV1oW8k9O+0A==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+ "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
"cpu": [
"x64"
],
@@ -288,9 +304,9 @@
}
},
"node_modules/@esbuild/netbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.9.tgz",
- "integrity": "sha512-GThgZPAwOBOsheA2RUlW5UeroRfESwMq/guy8uEe3wJlAOjpOXuSevLRd70NZ37ZrpO6RHGHgEHvPg1h3S1Jug==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
"cpu": [
"x64"
],
@@ -304,9 +320,9 @@
}
},
"node_modules/@esbuild/openbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.9.tgz",
- "integrity": "sha512-Ki6PlzppaFVbLnD8PtlVQfsYw4S9n3eQl87cqgeIw+O3sRr9IghpfSKY62mggdt1yCSZ8QWvTZ9jo9fjDSg9uw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
"cpu": [
"x64"
],
@@ -320,9 +336,9 @@
}
},
"node_modules/@esbuild/sunos-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.9.tgz",
- "integrity": "sha512-MLHj7k9hWh4y1ddkBpvRj2b9NCBhfgBt3VpWbHQnXRedVun/hC7sIyTGDGTfsGuXo4ebik2+3ShjcPbhtFwWDw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+ "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
"cpu": [
"x64"
],
@@ -336,9 +352,9 @@
}
},
"node_modules/@esbuild/win32-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.9.tgz",
- "integrity": "sha512-GQoa6OrQ8G08guMFgeXPH7yE/8Dt0IfOGWJSfSH4uafwdC7rWwrfE6P9N8AtPGIjUzdo2+7bN8Xo3qC578olhg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+ "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
"cpu": [
"arm64"
],
@@ -352,9 +368,9 @@
}
},
"node_modules/@esbuild/win32-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.9.tgz",
- "integrity": "sha512-UOozV7Ntykvr5tSOlGCrqU3NBr3d8JqPes0QWN2WOXfvkWVGRajC+Ym0/Wj88fUgecUCLDdJPDF0Nna2UK3Qtg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+ "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
"cpu": [
"ia32"
],
@@ -368,9 +384,9 @@
}
},
"node_modules/@esbuild/win32-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.9.tgz",
- "integrity": "sha512-oxoQgglOP7RH6iasDrhY+R/3cHrfwIDvRlT4CGChflq6twk8iENeVvMJjmvBb94Ik1Z+93iGO27err7w6l54GQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+ "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
"cpu": [
"x64"
],
@@ -416,9 +432,9 @@
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
},
"node_modules/@rollup/rollup-android-arm-eabi": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.8.0.tgz",
- "integrity": "sha512-zdTObFRoNENrdPpnTNnhOljYIcOX7aI7+7wyrSpPFFIOf/nRdedE6IYsjaBE7tjukphh1tMTojgJ7p3lKY8x6Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
+ "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
"cpu": [
"arm"
],
@@ -429,9 +445,9 @@
]
},
"node_modules/@rollup/rollup-android-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.8.0.tgz",
- "integrity": "sha512-aiItwP48BiGpMFS9Znjo/xCNQVwTQVcRKkFKsO81m8exrGjHkCBDvm9PHay2kpa8RPnZzzKcD1iQ9KaLY4fPQQ==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
+ "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
"cpu": [
"arm64"
],
@@ -442,9 +458,9 @@
]
},
"node_modules/@rollup/rollup-darwin-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.8.0.tgz",
- "integrity": "sha512-zhNIS+L4ZYkYQUjIQUR6Zl0RXhbbA0huvNIWjmPc2SL0cB1h5Djkcy+RZ3/Bwszfb6vgwUvcVJYD6e6Zkpsi8g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
+ "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
"cpu": [
"arm64"
],
@@ -455,9 +471,9 @@
]
},
"node_modules/@rollup/rollup-darwin-x64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.8.0.tgz",
- "integrity": "sha512-A/FAHFRNQYrELrb/JHncRWzTTXB2ticiRFztP4ggIUAfa9Up1qfW8aG2w/mN9jNiZ+HB0t0u0jpJgFXG6BfRTA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
+ "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
"cpu": [
"x64"
],
@@ -468,9 +484,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.8.0.tgz",
- "integrity": "sha512-JsidBnh3p2IJJA4/2xOF2puAYqbaczB3elZDT0qHxn362EIoIkq7hrR43Xa8RisgI6/WPfvb2umbGsuvf7E37A==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
+ "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
"cpu": [
"arm"
],
@@ -481,9 +497,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.8.0.tgz",
- "integrity": "sha512-hBNCnqw3EVCkaPB0Oqd24bv8SklETptQWcJz06kb9OtiShn9jK1VuTgi7o4zPSt6rNGWQOTDEAccbk0OqJmS+g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
"cpu": [
"arm64"
],
@@ -494,9 +510,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.8.0.tgz",
- "integrity": "sha512-Fw9ChYfJPdltvi9ALJ9wzdCdxGw4wtq4t1qY028b2O7GwB5qLNSGtqMsAel1lfWTZvf4b6/+4HKp0GlSYg0ahA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
+ "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
"cpu": [
"arm64"
],
@@ -507,9 +523,9 @@
]
},
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.8.0.tgz",
- "integrity": "sha512-BH5xIh7tOzS9yBi8dFrCTG8Z6iNIGWGltd3IpTSKp6+pNWWO6qy8eKoRxOtwFbMrid5NZaidLYN6rHh9aB8bEw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
"cpu": [
"riscv64"
],
@@ -520,9 +536,9 @@
]
},
"node_modules/@rollup/rollup-linux-x64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.8.0.tgz",
- "integrity": "sha512-PmvAj8k6EuWiyLbkNpd6BLv5XeYFpqWuRvRNRl80xVfpGXK/z6KYXmAgbI4ogz7uFiJxCnYcqyvZVD0dgFog7Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
+ "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
"cpu": [
"x64"
],
@@ -533,9 +549,9 @@
]
},
"node_modules/@rollup/rollup-linux-x64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.8.0.tgz",
- "integrity": "sha512-mdxnlW2QUzXwY+95TuxZ+CurrhgrPAMveDWI97EQlA9bfhR8tw3Pt7SUlc/eSlCNxlWktpmT//EAA8UfCHOyXg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
+ "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
"cpu": [
"x64"
],
@@ -546,9 +562,9 @@
]
},
"node_modules/@rollup/rollup-win32-arm64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.8.0.tgz",
- "integrity": "sha512-ge7saUz38aesM4MA7Cad8CHo0Fyd1+qTaqoIo+Jtk+ipBi4ATSrHWov9/S4u5pbEQmLjgUjB7BJt+MiKG2kzmA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
+ "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
"cpu": [
"arm64"
],
@@ -559,9 +575,9 @@
]
},
"node_modules/@rollup/rollup-win32-ia32-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.8.0.tgz",
- "integrity": "sha512-p9E3PZlzurhlsN5h9g7zIP1DnqKXJe8ZUkFwAazqSvHuWfihlIISPxG9hCHCoA+dOOspL/c7ty1eeEVFTE0UTw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
+ "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
"cpu": [
"ia32"
],
@@ -572,9 +588,9 @@
]
},
"node_modules/@rollup/rollup-win32-x64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.8.0.tgz",
- "integrity": "sha512-kb4/auKXkYKqlUYTE8s40FcJIj5soOyRLHKd4ugR0dCq0G2EfcF54eYcfQiGkHzjidZ40daB4ulsFdtqNKZtBg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
+ "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
"cpu": [
"x64"
],
@@ -596,10 +612,16 @@
"npm": ">=6.0.0"
}
},
+ "node_modules/@types/estree": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+ "dev": true
+ },
"node_modules/@vitejs/plugin-vue": {
- "version": "5.0.3",
- "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.3.tgz",
- "integrity": "sha512-b8S5dVS40rgHdDrw+DQi/xOM9ed+kSRZzfm1T74bMmBDCd8XO87NKlFYInzCtwvtWwXZvo1QxE2OSspTATWrbA==",
+ "version": "5.0.4",
+ "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
+ "integrity": "sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==",
"dev": true,
"engines": {
"node": "^18.0.0 || >=20.0.0"
@@ -610,97 +632,95 @@
}
},
"node_modules/@volar/language-core": {
- "version": "1.11.1",
- "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz",
- "integrity": "sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==",
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-Ew1Iw7/RIRNuDLn60fWJdOLApAlfTVPxbPiSLzc434PReC9kleYtaa//Wo2WlN1oiRqneW0pWQQV0CwYqaimLQ==",
"dev": true,
"dependencies": {
- "@volar/source-map": "1.11.1"
+ "@volar/source-map": "2.2.0-alpha.8"
}
},
"node_modules/@volar/source-map": {
- "version": "1.11.1",
- "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz",
- "integrity": "sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==",
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-E1ZVmXFJ5DU4fWDcWHzi8OLqqReqIDwhXvIMhVdk6+VipfMVv4SkryXu7/rs4GA/GsebcRyJdaSkKBB3OAkIcA==",
"dev": true,
"dependencies": {
- "muggle-string": "^0.3.1"
+ "muggle-string": "^0.4.0"
}
},
"node_modules/@volar/typescript": {
- "version": "1.11.1",
- "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz",
- "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==",
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-RLbRDI+17CiayHZs9HhSzlH0FhLl/+XK6o2qoiw2o2GGKcyD1aDoY6AcMd44acYncTOrqoTNoY6LuCiRyiJiGg==",
"dev": true,
"dependencies": {
- "@volar/language-core": "1.11.1",
+ "@volar/language-core": "2.2.0-alpha.8",
"path-browserify": "^1.0.1"
}
},
"node_modules/@vue/compiler-core": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.15.tgz",
- "integrity": "sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz",
+ "integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==",
"dependencies": {
- "@babel/parser": "^7.23.6",
- "@vue/shared": "3.4.15",
+ "@babel/parser": "^7.23.9",
+ "@vue/shared": "3.4.21",
"entities": "^4.5.0",
"estree-walker": "^2.0.2",
"source-map-js": "^1.0.2"
}
},
"node_modules/@vue/compiler-dom": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.15.tgz",
- "integrity": "sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz",
+ "integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==",
"dependencies": {
- "@vue/compiler-core": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-core": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"node_modules/@vue/compiler-sfc": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.15.tgz",
- "integrity": "sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz",
+ "integrity": "sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==",
"dependencies": {
- "@babel/parser": "^7.23.6",
- "@vue/compiler-core": "3.4.15",
- "@vue/compiler-dom": "3.4.15",
- "@vue/compiler-ssr": "3.4.15",
- "@vue/shared": "3.4.15",
+ "@babel/parser": "^7.23.9",
+ "@vue/compiler-core": "3.4.21",
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/compiler-ssr": "3.4.21",
+ "@vue/shared": "3.4.21",
"estree-walker": "^2.0.2",
- "magic-string": "^0.30.5",
- "postcss": "^8.4.33",
+ "magic-string": "^0.30.7",
+ "postcss": "^8.4.35",
"source-map-js": "^1.0.2"
}
},
"node_modules/@vue/compiler-ssr": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.15.tgz",
- "integrity": "sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz",
+ "integrity": "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==",
"dependencies": {
- "@vue/compiler-dom": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"node_modules/@vue/devtools-api": {
- "version": "6.5.0",
- "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
- "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
+ "version": "6.6.1",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
+ "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
},
"node_modules/@vue/language-core": {
- "version": "1.8.27",
- "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz",
- "integrity": "sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==",
+ "version": "2.0.13",
+ "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.13.tgz",
+ "integrity": "sha512-oQgM+BM66SU5GKtUMLQSQN0bxHFkFpLSSAiY87wVziPaiNQZuKVDt/3yA7GB9PiQw0y/bTNL0bOc0jM/siYjKg==",
"dev": true,
"dependencies": {
- "@volar/language-core": "~1.11.1",
- "@volar/source-map": "~1.11.1",
- "@vue/compiler-dom": "^3.3.0",
- "@vue/shared": "^3.3.0",
+ "@volar/language-core": "2.2.0-alpha.8",
+ "@vue/compiler-dom": "^3.4.0",
+ "@vue/shared": "^3.4.0",
"computeds": "^0.0.1",
"minimatch": "^9.0.3",
- "muggle-string": "^0.3.1",
"path-browserify": "^1.0.1",
"vue-template-compiler": "^2.7.14"
},
@@ -714,48 +734,48 @@
}
},
"node_modules/@vue/reactivity": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.15.tgz",
- "integrity": "sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.21.tgz",
+ "integrity": "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==",
"dependencies": {
- "@vue/shared": "3.4.15"
+ "@vue/shared": "3.4.21"
}
},
"node_modules/@vue/runtime-core": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.15.tgz",
- "integrity": "sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz",
+ "integrity": "sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==",
"dependencies": {
- "@vue/reactivity": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/reactivity": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"node_modules/@vue/runtime-dom": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.15.tgz",
- "integrity": "sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz",
+ "integrity": "sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==",
"dependencies": {
- "@vue/runtime-core": "3.4.15",
- "@vue/shared": "3.4.15",
+ "@vue/runtime-core": "3.4.21",
+ "@vue/shared": "3.4.21",
"csstype": "^3.1.3"
}
},
"node_modules/@vue/server-renderer": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.15.tgz",
- "integrity": "sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.21.tgz",
+ "integrity": "sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==",
"dependencies": {
- "@vue/compiler-ssr": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-ssr": "3.4.21",
+ "@vue/shared": "3.4.21"
},
"peerDependencies": {
- "vue": "3.4.15"
+ "vue": "3.4.21"
}
},
"node_modules/@vue/shared": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.15.tgz",
- "integrity": "sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g=="
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
+ "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
},
"node_modules/balanced-match": {
"version": "1.0.2",
@@ -801,9 +821,9 @@
}
},
"node_modules/esbuild": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.9.tgz",
- "integrity": "sha512-U9CHtKSy+EpPsEBa+/A2gMs/h3ylBC0H0KSqIg7tpztHerLi6nrrcoUJAkNCEPumx8yJ+Byic4BVwHgRbN0TBg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+ "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
"dev": true,
"hasInstallScript": true,
"bin": {
@@ -813,28 +833,29 @@
"node": ">=12"
},
"optionalDependencies": {
- "@esbuild/android-arm": "0.19.9",
- "@esbuild/android-arm64": "0.19.9",
- "@esbuild/android-x64": "0.19.9",
- "@esbuild/darwin-arm64": "0.19.9",
- "@esbuild/darwin-x64": "0.19.9",
- "@esbuild/freebsd-arm64": "0.19.9",
- "@esbuild/freebsd-x64": "0.19.9",
- "@esbuild/linux-arm": "0.19.9",
- "@esbuild/linux-arm64": "0.19.9",
- "@esbuild/linux-ia32": "0.19.9",
- "@esbuild/linux-loong64": "0.19.9",
- "@esbuild/linux-mips64el": "0.19.9",
- "@esbuild/linux-ppc64": "0.19.9",
- "@esbuild/linux-riscv64": "0.19.9",
- "@esbuild/linux-s390x": "0.19.9",
- "@esbuild/linux-x64": "0.19.9",
- "@esbuild/netbsd-x64": "0.19.9",
- "@esbuild/openbsd-x64": "0.19.9",
- "@esbuild/sunos-x64": "0.19.9",
- "@esbuild/win32-arm64": "0.19.9",
- "@esbuild/win32-ia32": "0.19.9",
- "@esbuild/win32-x64": "0.19.9"
+ "@esbuild/aix-ppc64": "0.20.2",
+ "@esbuild/android-arm": "0.20.2",
+ "@esbuild/android-arm64": "0.20.2",
+ "@esbuild/android-x64": "0.20.2",
+ "@esbuild/darwin-arm64": "0.20.2",
+ "@esbuild/darwin-x64": "0.20.2",
+ "@esbuild/freebsd-arm64": "0.20.2",
+ "@esbuild/freebsd-x64": "0.20.2",
+ "@esbuild/linux-arm": "0.20.2",
+ "@esbuild/linux-arm64": "0.20.2",
+ "@esbuild/linux-ia32": "0.20.2",
+ "@esbuild/linux-loong64": "0.20.2",
+ "@esbuild/linux-mips64el": "0.20.2",
+ "@esbuild/linux-ppc64": "0.20.2",
+ "@esbuild/linux-riscv64": "0.20.2",
+ "@esbuild/linux-s390x": "0.20.2",
+ "@esbuild/linux-x64": "0.20.2",
+ "@esbuild/netbsd-x64": "0.20.2",
+ "@esbuild/openbsd-x64": "0.20.2",
+ "@esbuild/sunos-x64": "0.20.2",
+ "@esbuild/win32-arm64": "0.20.2",
+ "@esbuild/win32-ia32": "0.20.2",
+ "@esbuild/win32-x64": "0.20.2"
}
},
"node_modules/estree-walker": {
@@ -886,9 +907,9 @@
}
},
"node_modules/magic-string": {
- "version": "0.30.5",
- "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
- "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+ "version": "0.30.7",
+ "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
+ "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
},
@@ -912,9 +933,9 @@
}
},
"node_modules/muggle-string": {
- "version": "0.3.1",
- "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz",
- "integrity": "sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==",
+ "version": "0.4.1",
+ "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+ "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
"dev": true
},
"node_modules/nanoid": {
@@ -946,9 +967,9 @@
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
},
"node_modules/postcss": {
- "version": "8.4.33",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
- "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
"funding": [
{
"type": "opencollective",
@@ -966,17 +987,20 @@
"dependencies": {
"nanoid": "^3.3.7",
"picocolors": "^1.0.0",
- "source-map-js": "^1.0.2"
+ "source-map-js": "^1.2.0"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/rollup": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.8.0.tgz",
- "integrity": "sha512-NpsklK2fach5CdI+PScmlE5R4Ao/FSWtF7LkoIrHDxPACY/xshNasPsbpG0VVHxUTbf74tJbVT4PrP8JsJ6ZDA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
+ "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
"dev": true,
+ "dependencies": {
+ "@types/estree": "1.0.5"
+ },
"bin": {
"rollup": "dist/bin/rollup"
},
@@ -985,19 +1009,19 @@
"npm": ">=8.0.0"
},
"optionalDependencies": {
- "@rollup/rollup-android-arm-eabi": "4.8.0",
- "@rollup/rollup-android-arm64": "4.8.0",
- "@rollup/rollup-darwin-arm64": "4.8.0",
- "@rollup/rollup-darwin-x64": "4.8.0",
- "@rollup/rollup-linux-arm-gnueabihf": "4.8.0",
- "@rollup/rollup-linux-arm64-gnu": "4.8.0",
- "@rollup/rollup-linux-arm64-musl": "4.8.0",
- "@rollup/rollup-linux-riscv64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-musl": "4.8.0",
- "@rollup/rollup-win32-arm64-msvc": "4.8.0",
- "@rollup/rollup-win32-ia32-msvc": "4.8.0",
- "@rollup/rollup-win32-x64-msvc": "4.8.0",
+ "@rollup/rollup-android-arm-eabi": "4.13.0",
+ "@rollup/rollup-android-arm64": "4.13.0",
+ "@rollup/rollup-darwin-arm64": "4.13.0",
+ "@rollup/rollup-darwin-x64": "4.13.0",
+ "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
+ "@rollup/rollup-linux-arm64-gnu": "4.13.0",
+ "@rollup/rollup-linux-arm64-musl": "4.13.0",
+ "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-musl": "4.13.0",
+ "@rollup/rollup-win32-arm64-msvc": "4.13.0",
+ "@rollup/rollup-win32-ia32-msvc": "4.13.0",
+ "@rollup/rollup-win32-x64-msvc": "4.13.0",
"fsevents": "~2.3.2"
}
},
@@ -1017,9 +1041,9 @@
}
},
"node_modules/source-map-js": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
- "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
"engines": {
"node": ">=0.10.0"
}
@@ -1043,14 +1067,14 @@
}
},
"node_modules/vite": {
- "version": "5.0.12",
- "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
- "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
+ "version": "5.2.8",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+ "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
"dev": true,
"dependencies": {
- "esbuild": "^0.19.3",
- "postcss": "^8.4.32",
- "rollup": "^4.2.0"
+ "esbuild": "^0.20.1",
+ "postcss": "^8.4.38",
+ "rollup": "^4.13.0"
},
"bin": {
"vite": "bin/vite.js"
@@ -1098,15 +1122,15 @@
}
},
"node_modules/vue": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.15.tgz",
- "integrity": "sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz",
+ "integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==",
"dependencies": {
- "@vue/compiler-dom": "3.4.15",
- "@vue/compiler-sfc": "3.4.15",
- "@vue/runtime-dom": "3.4.15",
- "@vue/server-renderer": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/compiler-sfc": "3.4.21",
+ "@vue/runtime-dom": "3.4.21",
+ "@vue/server-renderer": "3.4.21",
+ "@vue/shared": "3.4.21"
},
"peerDependencies": {
"typescript": "*"
@@ -1118,11 +1142,11 @@
}
},
"node_modules/vue-router": {
- "version": "4.2.5",
- "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
- "integrity": "sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==",
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
+ "integrity": "sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==",
"dependencies": {
- "@vue/devtools-api": "^6.5.0"
+ "@vue/devtools-api": "^6.5.1"
},
"funding": {
"url": "https://github.com/sponsors/posva"
@@ -1142,13 +1166,13 @@
}
},
"node_modules/vue-tsc": {
- "version": "1.8.27",
- "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz",
- "integrity": "sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==",
+ "version": "2.0.13",
+ "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.13.tgz",
+ "integrity": "sha512-a3nL3FvguCWVJUQW/jFrUxdeUtiEkbZoQjidqvMeBK//tuE2w6NWQAbdrEpY2+6nSa4kZoKZp8TZUMtHpjt4mQ==",
"dev": true,
"dependencies": {
- "@volar/typescript": "~1.11.1",
- "@vue/language-core": "1.8.27",
+ "@volar/typescript": "2.2.0-alpha.8",
+ "@vue/language-core": "2.0.13",
"semver": "^7.5.4"
},
"bin": {
@@ -1167,161 +1191,168 @@
},
"dependencies": {
"@babel/parser": {
- "version": "7.23.6",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
- "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ=="
+ "version": "7.23.9",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
+ "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA=="
+ },
+ "@esbuild/aix-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+ "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+ "dev": true,
+ "optional": true
},
"@esbuild/android-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz",
- "integrity": "sha512-jkYjjq7SdsWuNI6b5quymW0oC83NN5FdRPuCbs9HZ02mfVdAP8B8eeqLSYU3gb6OJEaY5CQabtTFbqBf26H3GA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+ "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
"dev": true,
"optional": true
},
"@esbuild/android-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.9.tgz",
- "integrity": "sha512-q4cR+6ZD0938R19MyEW3jEsMzbb/1rulLXiNAJQADD/XYp7pT+rOS5JGxvpRW8dFDEfjW4wLgC/3FXIw4zYglQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+ "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
"dev": true,
"optional": true
},
"@esbuild/android-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.9.tgz",
- "integrity": "sha512-KOqoPntWAH6ZxDwx1D6mRntIgZh9KodzgNOy5Ebt9ghzffOk9X2c1sPwtM9P+0eXbefnDhqYfkh5PLP5ULtWFA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+ "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
"dev": true,
"optional": true
},
"@esbuild/darwin-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.9.tgz",
- "integrity": "sha512-KBJ9S0AFyLVx2E5D8W0vExqRW01WqRtczUZ8NRu+Pi+87opZn5tL4Y0xT0mA4FtHctd0ZgwNoN639fUUGlNIWw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+ "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
"dev": true,
"optional": true
},
"@esbuild/darwin-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.9.tgz",
- "integrity": "sha512-vE0VotmNTQaTdX0Q9dOHmMTao6ObjyPm58CHZr1UK7qpNleQyxlFlNCaHsHx6Uqv86VgPmR4o2wdNq3dP1qyDQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+ "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
"dev": true,
"optional": true
},
"@esbuild/freebsd-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.9.tgz",
- "integrity": "sha512-uFQyd/o1IjiEk3rUHSwUKkqZwqdvuD8GevWF065eqgYfexcVkxh+IJgwTaGZVu59XczZGcN/YMh9uF1fWD8j1g==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+ "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
"dev": true,
"optional": true
},
"@esbuild/freebsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.9.tgz",
- "integrity": "sha512-WMLgWAtkdTbTu1AWacY7uoj/YtHthgqrqhf1OaEWnZb7PQgpt8eaA/F3LkV0E6K/Lc0cUr/uaVP/49iE4M4asA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+ "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
"dev": true,
"optional": true
},
"@esbuild/linux-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.9.tgz",
- "integrity": "sha512-C/ChPohUYoyUaqn1h17m/6yt6OB14hbXvT8EgM1ZWaiiTYz7nWZR0SYmMnB5BzQA4GXl3BgBO1l8MYqL/He3qw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+ "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
"dev": true,
"optional": true
},
"@esbuild/linux-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.9.tgz",
- "integrity": "sha512-PiPblfe1BjK7WDAKR1Cr9O7VVPqVNpwFcPWgfn4xu0eMemzRp442hXyzF/fSwgrufI66FpHOEJk0yYdPInsmyQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+ "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
"dev": true,
"optional": true
},
"@esbuild/linux-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.9.tgz",
- "integrity": "sha512-f37i/0zE0MjDxijkPSQw1CO/7C27Eojqb+r3BbHVxMLkj8GCa78TrBZzvPyA/FNLUMzP3eyHCVkAopkKVja+6Q==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+ "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
"dev": true,
"optional": true
},
"@esbuild/linux-loong64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.9.tgz",
- "integrity": "sha512-t6mN147pUIf3t6wUt3FeumoOTPfmv9Cc6DQlsVBpB7eCpLOqQDyWBP1ymXn1lDw4fNUSb/gBcKAmvTP49oIkaA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+ "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
"dev": true,
"optional": true
},
"@esbuild/linux-mips64el": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.9.tgz",
- "integrity": "sha512-jg9fujJTNTQBuDXdmAg1eeJUL4Jds7BklOTkkH80ZgQIoCTdQrDaHYgbFZyeTq8zbY+axgptncko3v9p5hLZtw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+ "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
"dev": true,
"optional": true
},
"@esbuild/linux-ppc64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.9.tgz",
- "integrity": "sha512-tkV0xUX0pUUgY4ha7z5BbDS85uI7ABw3V1d0RNTii7E9lbmV8Z37Pup2tsLV46SQWzjOeyDi1Q7Wx2+QM8WaCQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+ "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
"dev": true,
"optional": true
},
"@esbuild/linux-riscv64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.9.tgz",
- "integrity": "sha512-DfLp8dj91cufgPZDXr9p3FoR++m3ZJ6uIXsXrIvJdOjXVREtXuQCjfMfvmc3LScAVmLjcfloyVtpn43D56JFHg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+ "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
"dev": true,
"optional": true
},
"@esbuild/linux-s390x": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.9.tgz",
- "integrity": "sha512-zHbglfEdC88KMgCWpOl/zc6dDYJvWGLiUtmPRsr1OgCViu3z5GncvNVdf+6/56O2Ca8jUU+t1BW261V6kp8qdw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+ "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
"dev": true,
"optional": true
},
"@esbuild/linux-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.9.tgz",
- "integrity": "sha512-JUjpystGFFmNrEHQnIVG8hKwvA2DN5o7RqiO1CVX8EN/F/gkCjkUMgVn6hzScpwnJtl2mPR6I9XV1oW8k9O+0A==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+ "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
"dev": true,
"optional": true
},
"@esbuild/netbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.9.tgz",
- "integrity": "sha512-GThgZPAwOBOsheA2RUlW5UeroRfESwMq/guy8uEe3wJlAOjpOXuSevLRd70NZ37ZrpO6RHGHgEHvPg1h3S1Jug==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
"dev": true,
"optional": true
},
"@esbuild/openbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.9.tgz",
- "integrity": "sha512-Ki6PlzppaFVbLnD8PtlVQfsYw4S9n3eQl87cqgeIw+O3sRr9IghpfSKY62mggdt1yCSZ8QWvTZ9jo9fjDSg9uw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
"dev": true,
"optional": true
},
"@esbuild/sunos-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.9.tgz",
- "integrity": "sha512-MLHj7k9hWh4y1ddkBpvRj2b9NCBhfgBt3VpWbHQnXRedVun/hC7sIyTGDGTfsGuXo4ebik2+3ShjcPbhtFwWDw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+ "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
"dev": true,
"optional": true
},
"@esbuild/win32-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.9.tgz",
- "integrity": "sha512-GQoa6OrQ8G08guMFgeXPH7yE/8Dt0IfOGWJSfSH4uafwdC7rWwrfE6P9N8AtPGIjUzdo2+7bN8Xo3qC578olhg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+ "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
"dev": true,
"optional": true
},
"@esbuild/win32-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.9.tgz",
- "integrity": "sha512-UOozV7Ntykvr5tSOlGCrqU3NBr3d8JqPes0QWN2WOXfvkWVGRajC+Ym0/Wj88fUgecUCLDdJPDF0Nna2UK3Qtg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+ "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
"dev": true,
"optional": true
},
"@esbuild/win32-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.9.tgz",
- "integrity": "sha512-oxoQgglOP7RH6iasDrhY+R/3cHrfwIDvRlT4CGChflq6twk8iENeVvMJjmvBb94Ik1Z+93iGO27err7w6l54GQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+ "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
"dev": true,
"optional": true
},
@@ -1358,93 +1389,93 @@
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
},
"@rollup/rollup-android-arm-eabi": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.8.0.tgz",
- "integrity": "sha512-zdTObFRoNENrdPpnTNnhOljYIcOX7aI7+7wyrSpPFFIOf/nRdedE6IYsjaBE7tjukphh1tMTojgJ7p3lKY8x6Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
+ "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
"dev": true,
"optional": true
},
"@rollup/rollup-android-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.8.0.tgz",
- "integrity": "sha512-aiItwP48BiGpMFS9Znjo/xCNQVwTQVcRKkFKsO81m8exrGjHkCBDvm9PHay2kpa8RPnZzzKcD1iQ9KaLY4fPQQ==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
+ "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
"dev": true,
"optional": true
},
"@rollup/rollup-darwin-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.8.0.tgz",
- "integrity": "sha512-zhNIS+L4ZYkYQUjIQUR6Zl0RXhbbA0huvNIWjmPc2SL0cB1h5Djkcy+RZ3/Bwszfb6vgwUvcVJYD6e6Zkpsi8g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
+ "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
"dev": true,
"optional": true
},
"@rollup/rollup-darwin-x64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.8.0.tgz",
- "integrity": "sha512-A/FAHFRNQYrELrb/JHncRWzTTXB2ticiRFztP4ggIUAfa9Up1qfW8aG2w/mN9jNiZ+HB0t0u0jpJgFXG6BfRTA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
+ "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
"dev": true,
"optional": true
},
"@rollup/rollup-linux-arm-gnueabihf": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.8.0.tgz",
- "integrity": "sha512-JsidBnh3p2IJJA4/2xOF2puAYqbaczB3elZDT0qHxn362EIoIkq7hrR43Xa8RisgI6/WPfvb2umbGsuvf7E37A==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
+ "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
"dev": true,
"optional": true
},
"@rollup/rollup-linux-arm64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.8.0.tgz",
- "integrity": "sha512-hBNCnqw3EVCkaPB0Oqd24bv8SklETptQWcJz06kb9OtiShn9jK1VuTgi7o4zPSt6rNGWQOTDEAccbk0OqJmS+g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
"dev": true,
"optional": true
},
"@rollup/rollup-linux-arm64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.8.0.tgz",
- "integrity": "sha512-Fw9ChYfJPdltvi9ALJ9wzdCdxGw4wtq4t1qY028b2O7GwB5qLNSGtqMsAel1lfWTZvf4b6/+4HKp0GlSYg0ahA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
+ "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
"dev": true,
"optional": true
},
"@rollup/rollup-linux-riscv64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.8.0.tgz",
- "integrity": "sha512-BH5xIh7tOzS9yBi8dFrCTG8Z6iNIGWGltd3IpTSKp6+pNWWO6qy8eKoRxOtwFbMrid5NZaidLYN6rHh9aB8bEw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
"dev": true,
"optional": true
},
"@rollup/rollup-linux-x64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.8.0.tgz",
- "integrity": "sha512-PmvAj8k6EuWiyLbkNpd6BLv5XeYFpqWuRvRNRl80xVfpGXK/z6KYXmAgbI4ogz7uFiJxCnYcqyvZVD0dgFog7Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
+ "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
"dev": true,
"optional": true
},
"@rollup/rollup-linux-x64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.8.0.tgz",
- "integrity": "sha512-mdxnlW2QUzXwY+95TuxZ+CurrhgrPAMveDWI97EQlA9bfhR8tw3Pt7SUlc/eSlCNxlWktpmT//EAA8UfCHOyXg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
+ "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
"dev": true,
"optional": true
},
"@rollup/rollup-win32-arm64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.8.0.tgz",
- "integrity": "sha512-ge7saUz38aesM4MA7Cad8CHo0Fyd1+qTaqoIo+Jtk+ipBi4ATSrHWov9/S4u5pbEQmLjgUjB7BJt+MiKG2kzmA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
+ "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
"dev": true,
"optional": true
},
"@rollup/rollup-win32-ia32-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.8.0.tgz",
- "integrity": "sha512-p9E3PZlzurhlsN5h9g7zIP1DnqKXJe8ZUkFwAazqSvHuWfihlIISPxG9hCHCoA+dOOspL/c7ty1eeEVFTE0UTw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
+ "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
"dev": true,
"optional": true
},
"@rollup/rollup-win32-x64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.8.0.tgz",
- "integrity": "sha512-kb4/auKXkYKqlUYTE8s40FcJIj5soOyRLHKd4ugR0dCq0G2EfcF54eYcfQiGkHzjidZ40daB4ulsFdtqNKZtBg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
+ "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
"dev": true,
"optional": true
},
@@ -1453,149 +1484,153 @@
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz",
"integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng=="
},
+ "@types/estree": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+ "dev": true
+ },
"@vitejs/plugin-vue": {
- "version": "5.0.3",
- "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.3.tgz",
- "integrity": "sha512-b8S5dVS40rgHdDrw+DQi/xOM9ed+kSRZzfm1T74bMmBDCd8XO87NKlFYInzCtwvtWwXZvo1QxE2OSspTATWrbA==",
+ "version": "5.0.4",
+ "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
+ "integrity": "sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==",
"dev": true,
"requires": {}
},
"@volar/language-core": {
- "version": "1.11.1",
- "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz",
- "integrity": "sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==",
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-Ew1Iw7/RIRNuDLn60fWJdOLApAlfTVPxbPiSLzc434PReC9kleYtaa//Wo2WlN1oiRqneW0pWQQV0CwYqaimLQ==",
"dev": true,
"requires": {
- "@volar/source-map": "1.11.1"
+ "@volar/source-map": "2.2.0-alpha.8"
}
},
"@volar/source-map": {
- "version": "1.11.1",
- "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz",
- "integrity": "sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==",
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-E1ZVmXFJ5DU4fWDcWHzi8OLqqReqIDwhXvIMhVdk6+VipfMVv4SkryXu7/rs4GA/GsebcRyJdaSkKBB3OAkIcA==",
"dev": true,
"requires": {
- "muggle-string": "^0.3.1"
+ "muggle-string": "^0.4.0"
}
},
"@volar/typescript": {
- "version": "1.11.1",
- "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz",
- "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==",
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-RLbRDI+17CiayHZs9HhSzlH0FhLl/+XK6o2qoiw2o2GGKcyD1aDoY6AcMd44acYncTOrqoTNoY6LuCiRyiJiGg==",
"dev": true,
"requires": {
- "@volar/language-core": "1.11.1",
+ "@volar/language-core": "2.2.0-alpha.8",
"path-browserify": "^1.0.1"
}
},
"@vue/compiler-core": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.15.tgz",
- "integrity": "sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz",
+ "integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==",
"requires": {
- "@babel/parser": "^7.23.6",
- "@vue/shared": "3.4.15",
+ "@babel/parser": "^7.23.9",
+ "@vue/shared": "3.4.21",
"entities": "^4.5.0",
"estree-walker": "^2.0.2",
"source-map-js": "^1.0.2"
}
},
"@vue/compiler-dom": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.15.tgz",
- "integrity": "sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz",
+ "integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==",
"requires": {
- "@vue/compiler-core": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-core": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"@vue/compiler-sfc": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.15.tgz",
- "integrity": "sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz",
+ "integrity": "sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==",
"requires": {
- "@babel/parser": "^7.23.6",
- "@vue/compiler-core": "3.4.15",
- "@vue/compiler-dom": "3.4.15",
- "@vue/compiler-ssr": "3.4.15",
- "@vue/shared": "3.4.15",
+ "@babel/parser": "^7.23.9",
+ "@vue/compiler-core": "3.4.21",
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/compiler-ssr": "3.4.21",
+ "@vue/shared": "3.4.21",
"estree-walker": "^2.0.2",
- "magic-string": "^0.30.5",
- "postcss": "^8.4.33",
+ "magic-string": "^0.30.7",
+ "postcss": "^8.4.35",
"source-map-js": "^1.0.2"
}
},
"@vue/compiler-ssr": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.15.tgz",
- "integrity": "sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz",
+ "integrity": "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==",
"requires": {
- "@vue/compiler-dom": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"@vue/devtools-api": {
- "version": "6.5.0",
- "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
- "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
+ "version": "6.6.1",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
+ "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
},
"@vue/language-core": {
- "version": "1.8.27",
- "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz",
- "integrity": "sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==",
+ "version": "2.0.13",
+ "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.13.tgz",
+ "integrity": "sha512-oQgM+BM66SU5GKtUMLQSQN0bxHFkFpLSSAiY87wVziPaiNQZuKVDt/3yA7GB9PiQw0y/bTNL0bOc0jM/siYjKg==",
"dev": true,
"requires": {
- "@volar/language-core": "~1.11.1",
- "@volar/source-map": "~1.11.1",
- "@vue/compiler-dom": "^3.3.0",
- "@vue/shared": "^3.3.0",
+ "@volar/language-core": "2.2.0-alpha.8",
+ "@vue/compiler-dom": "^3.4.0",
+ "@vue/shared": "^3.4.0",
"computeds": "^0.0.1",
"minimatch": "^9.0.3",
- "muggle-string": "^0.3.1",
"path-browserify": "^1.0.1",
"vue-template-compiler": "^2.7.14"
}
},
"@vue/reactivity": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.15.tgz",
- "integrity": "sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.21.tgz",
+ "integrity": "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==",
"requires": {
- "@vue/shared": "3.4.15"
+ "@vue/shared": "3.4.21"
}
},
"@vue/runtime-core": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.15.tgz",
- "integrity": "sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz",
+ "integrity": "sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==",
"requires": {
- "@vue/reactivity": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/reactivity": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"@vue/runtime-dom": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.15.tgz",
- "integrity": "sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz",
+ "integrity": "sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==",
"requires": {
- "@vue/runtime-core": "3.4.15",
- "@vue/shared": "3.4.15",
+ "@vue/runtime-core": "3.4.21",
+ "@vue/shared": "3.4.21",
"csstype": "^3.1.3"
}
},
"@vue/server-renderer": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.15.tgz",
- "integrity": "sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.21.tgz",
+ "integrity": "sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==",
"requires": {
- "@vue/compiler-ssr": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-ssr": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"@vue/shared": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.15.tgz",
- "integrity": "sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g=="
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
+ "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
},
"balanced-match": {
"version": "1.0.2",
@@ -1635,33 +1670,34 @@
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
},
"esbuild": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.9.tgz",
- "integrity": "sha512-U9CHtKSy+EpPsEBa+/A2gMs/h3ylBC0H0KSqIg7tpztHerLi6nrrcoUJAkNCEPumx8yJ+Byic4BVwHgRbN0TBg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+ "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
"dev": true,
"requires": {
- "@esbuild/android-arm": "0.19.9",
- "@esbuild/android-arm64": "0.19.9",
- "@esbuild/android-x64": "0.19.9",
- "@esbuild/darwin-arm64": "0.19.9",
- "@esbuild/darwin-x64": "0.19.9",
- "@esbuild/freebsd-arm64": "0.19.9",
- "@esbuild/freebsd-x64": "0.19.9",
- "@esbuild/linux-arm": "0.19.9",
- "@esbuild/linux-arm64": "0.19.9",
- "@esbuild/linux-ia32": "0.19.9",
- "@esbuild/linux-loong64": "0.19.9",
- "@esbuild/linux-mips64el": "0.19.9",
- "@esbuild/linux-ppc64": "0.19.9",
- "@esbuild/linux-riscv64": "0.19.9",
- "@esbuild/linux-s390x": "0.19.9",
- "@esbuild/linux-x64": "0.19.9",
- "@esbuild/netbsd-x64": "0.19.9",
- "@esbuild/openbsd-x64": "0.19.9",
- "@esbuild/sunos-x64": "0.19.9",
- "@esbuild/win32-arm64": "0.19.9",
- "@esbuild/win32-ia32": "0.19.9",
- "@esbuild/win32-x64": "0.19.9"
+ "@esbuild/aix-ppc64": "0.20.2",
+ "@esbuild/android-arm": "0.20.2",
+ "@esbuild/android-arm64": "0.20.2",
+ "@esbuild/android-x64": "0.20.2",
+ "@esbuild/darwin-arm64": "0.20.2",
+ "@esbuild/darwin-x64": "0.20.2",
+ "@esbuild/freebsd-arm64": "0.20.2",
+ "@esbuild/freebsd-x64": "0.20.2",
+ "@esbuild/linux-arm": "0.20.2",
+ "@esbuild/linux-arm64": "0.20.2",
+ "@esbuild/linux-ia32": "0.20.2",
+ "@esbuild/linux-loong64": "0.20.2",
+ "@esbuild/linux-mips64el": "0.20.2",
+ "@esbuild/linux-ppc64": "0.20.2",
+ "@esbuild/linux-riscv64": "0.20.2",
+ "@esbuild/linux-s390x": "0.20.2",
+ "@esbuild/linux-x64": "0.20.2",
+ "@esbuild/netbsd-x64": "0.20.2",
+ "@esbuild/openbsd-x64": "0.20.2",
+ "@esbuild/sunos-x64": "0.20.2",
+ "@esbuild/win32-arm64": "0.20.2",
+ "@esbuild/win32-ia32": "0.20.2",
+ "@esbuild/win32-x64": "0.20.2"
}
},
"estree-walker": {
@@ -1700,9 +1736,9 @@
}
},
"magic-string": {
- "version": "0.30.5",
- "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
- "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+ "version": "0.30.7",
+ "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
+ "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
"requires": {
"@jridgewell/sourcemap-codec": "^1.4.15"
}
@@ -1717,9 +1753,9 @@
}
},
"muggle-string": {
- "version": "0.3.1",
- "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz",
- "integrity": "sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==",
+ "version": "0.4.1",
+ "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+ "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
"dev": true
},
"nanoid": {
@@ -1739,34 +1775,35 @@
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
},
"postcss": {
- "version": "8.4.33",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
- "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
"requires": {
"nanoid": "^3.3.7",
"picocolors": "^1.0.0",
- "source-map-js": "^1.0.2"
+ "source-map-js": "^1.2.0"
}
},
"rollup": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.8.0.tgz",
- "integrity": "sha512-NpsklK2fach5CdI+PScmlE5R4Ao/FSWtF7LkoIrHDxPACY/xshNasPsbpG0VVHxUTbf74tJbVT4PrP8JsJ6ZDA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
+ "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
"dev": true,
"requires": {
- "@rollup/rollup-android-arm-eabi": "4.8.0",
- "@rollup/rollup-android-arm64": "4.8.0",
- "@rollup/rollup-darwin-arm64": "4.8.0",
- "@rollup/rollup-darwin-x64": "4.8.0",
- "@rollup/rollup-linux-arm-gnueabihf": "4.8.0",
- "@rollup/rollup-linux-arm64-gnu": "4.8.0",
- "@rollup/rollup-linux-arm64-musl": "4.8.0",
- "@rollup/rollup-linux-riscv64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-musl": "4.8.0",
- "@rollup/rollup-win32-arm64-msvc": "4.8.0",
- "@rollup/rollup-win32-ia32-msvc": "4.8.0",
- "@rollup/rollup-win32-x64-msvc": "4.8.0",
+ "@rollup/rollup-android-arm-eabi": "4.13.0",
+ "@rollup/rollup-android-arm64": "4.13.0",
+ "@rollup/rollup-darwin-arm64": "4.13.0",
+ "@rollup/rollup-darwin-x64": "4.13.0",
+ "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
+ "@rollup/rollup-linux-arm64-gnu": "4.13.0",
+ "@rollup/rollup-linux-arm64-musl": "4.13.0",
+ "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-musl": "4.13.0",
+ "@rollup/rollup-win32-arm64-msvc": "4.13.0",
+ "@rollup/rollup-win32-ia32-msvc": "4.13.0",
+ "@rollup/rollup-win32-x64-msvc": "4.13.0",
+ "@types/estree": "1.0.5",
"fsevents": "~2.3.2"
}
},
@@ -1780,9 +1817,9 @@
}
},
"source-map-js": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
- "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
},
"tslib": {
"version": "2.5.0",
@@ -1796,35 +1833,35 @@
"devOptional": true
},
"vite": {
- "version": "5.0.12",
- "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
- "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
+ "version": "5.2.8",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+ "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
"dev": true,
"requires": {
- "esbuild": "^0.19.3",
+ "esbuild": "^0.20.1",
"fsevents": "~2.3.3",
- "postcss": "^8.4.32",
- "rollup": "^4.2.0"
+ "postcss": "^8.4.38",
+ "rollup": "^4.13.0"
}
},
"vue": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.15.tgz",
- "integrity": "sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz",
+ "integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==",
"requires": {
- "@vue/compiler-dom": "3.4.15",
- "@vue/compiler-sfc": "3.4.15",
- "@vue/runtime-dom": "3.4.15",
- "@vue/server-renderer": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/compiler-sfc": "3.4.21",
+ "@vue/runtime-dom": "3.4.21",
+ "@vue/server-renderer": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"vue-router": {
- "version": "4.2.5",
- "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
- "integrity": "sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==",
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
+ "integrity": "sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==",
"requires": {
- "@vue/devtools-api": "^6.5.0"
+ "@vue/devtools-api": "^6.5.1"
}
},
"vue-template-compiler": {
@@ -1838,13 +1875,13 @@
}
},
"vue-tsc": {
- "version": "1.8.27",
- "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz",
- "integrity": "sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==",
+ "version": "2.0.13",
+ "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.13.tgz",
+ "integrity": "sha512-a3nL3FvguCWVJUQW/jFrUxdeUtiEkbZoQjidqvMeBK//tuE2w6NWQAbdrEpY2+6nSa4kZoKZp8TZUMtHpjt4mQ==",
"dev": true,
"requires": {
- "@volar/typescript": "~1.11.1",
- "@vue/language-core": "1.8.27",
+ "@volar/typescript": "2.2.0-alpha.8",
+ "@vue/language-core": "2.0.13",
"semver": "^7.5.4"
}
},
diff --git a/static/code/stackblitz/v6/vue/package.json b/static/code/stackblitz/v6/vue/package.json
index c564d41a7f2..14916c8ed2f 100644
--- a/static/code/stackblitz/v6/vue/package.json
+++ b/static/code/stackblitz/v6/vue/package.json
@@ -11,12 +11,12 @@
"@ionic/vue": "^6.0.0",
"@ionic/vue-router": "^6.0.0",
"vue": "^3.2.25",
- "vue-router": "4.2.5"
+ "vue-router": "4.3.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.0",
"vite": "^5.0.0",
"typescript": "^4.5.4",
- "vue-tsc": "^1.0.0"
+ "vue-tsc": "^2.0.0"
}
}
diff --git a/static/code/stackblitz/v7/angular/package.json b/static/code/stackblitz/v7/angular/package.json
index 7e283e87a9d..81551151abb 100644
--- a/static/code/stackblitz/v7/angular/package.json
+++ b/static/code/stackblitz/v7/angular/package.json
@@ -2,6 +2,6 @@
"dependencies": {
"@ionic/angular": "^7.0.0",
"@ionic/core": "^7.0.0",
- "@angular/platform-browser-dynamic": "17.1.1"
+ "@angular/platform-browser-dynamic": "17.3.2"
}
}
diff --git a/static/code/stackblitz/v7/react/package-lock.json b/static/code/stackblitz/v7/react/package-lock.json
index 4d58b6a30c1..b6e394d72eb 100644
--- a/static/code/stackblitz/v7/react/package-lock.json
+++ b/static/code/stackblitz/v7/react/package-lock.json
@@ -352,10 +352,25 @@
"node": ">=6.9.0"
}
},
+ "node_modules/@esbuild/aix-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+ "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+ "cpu": [
+ "ppc64"
+ ],
+ "optional": true,
+ "os": [
+ "aix"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/@esbuild/android-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz",
- "integrity": "sha512-jkYjjq7SdsWuNI6b5quymW0oC83NN5FdRPuCbs9HZ02mfVdAP8B8eeqLSYU3gb6OJEaY5CQabtTFbqBf26H3GA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+ "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
"cpu": [
"arm"
],
@@ -368,9 +383,9 @@
}
},
"node_modules/@esbuild/android-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.9.tgz",
- "integrity": "sha512-q4cR+6ZD0938R19MyEW3jEsMzbb/1rulLXiNAJQADD/XYp7pT+rOS5JGxvpRW8dFDEfjW4wLgC/3FXIw4zYglQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+ "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
"cpu": [
"arm64"
],
@@ -383,9 +398,9 @@
}
},
"node_modules/@esbuild/android-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.9.tgz",
- "integrity": "sha512-KOqoPntWAH6ZxDwx1D6mRntIgZh9KodzgNOy5Ebt9ghzffOk9X2c1sPwtM9P+0eXbefnDhqYfkh5PLP5ULtWFA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+ "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
"cpu": [
"x64"
],
@@ -398,9 +413,9 @@
}
},
"node_modules/@esbuild/darwin-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.9.tgz",
- "integrity": "sha512-KBJ9S0AFyLVx2E5D8W0vExqRW01WqRtczUZ8NRu+Pi+87opZn5tL4Y0xT0mA4FtHctd0ZgwNoN639fUUGlNIWw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+ "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
"cpu": [
"arm64"
],
@@ -413,9 +428,9 @@
}
},
"node_modules/@esbuild/darwin-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.9.tgz",
- "integrity": "sha512-vE0VotmNTQaTdX0Q9dOHmMTao6ObjyPm58CHZr1UK7qpNleQyxlFlNCaHsHx6Uqv86VgPmR4o2wdNq3dP1qyDQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+ "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
"cpu": [
"x64"
],
@@ -428,9 +443,9 @@
}
},
"node_modules/@esbuild/freebsd-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.9.tgz",
- "integrity": "sha512-uFQyd/o1IjiEk3rUHSwUKkqZwqdvuD8GevWF065eqgYfexcVkxh+IJgwTaGZVu59XczZGcN/YMh9uF1fWD8j1g==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+ "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
"cpu": [
"arm64"
],
@@ -443,9 +458,9 @@
}
},
"node_modules/@esbuild/freebsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.9.tgz",
- "integrity": "sha512-WMLgWAtkdTbTu1AWacY7uoj/YtHthgqrqhf1OaEWnZb7PQgpt8eaA/F3LkV0E6K/Lc0cUr/uaVP/49iE4M4asA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+ "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
"cpu": [
"x64"
],
@@ -458,9 +473,9 @@
}
},
"node_modules/@esbuild/linux-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.9.tgz",
- "integrity": "sha512-C/ChPohUYoyUaqn1h17m/6yt6OB14hbXvT8EgM1ZWaiiTYz7nWZR0SYmMnB5BzQA4GXl3BgBO1l8MYqL/He3qw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+ "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
"cpu": [
"arm"
],
@@ -473,9 +488,9 @@
}
},
"node_modules/@esbuild/linux-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.9.tgz",
- "integrity": "sha512-PiPblfe1BjK7WDAKR1Cr9O7VVPqVNpwFcPWgfn4xu0eMemzRp442hXyzF/fSwgrufI66FpHOEJk0yYdPInsmyQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+ "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
"cpu": [
"arm64"
],
@@ -488,9 +503,9 @@
}
},
"node_modules/@esbuild/linux-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.9.tgz",
- "integrity": "sha512-f37i/0zE0MjDxijkPSQw1CO/7C27Eojqb+r3BbHVxMLkj8GCa78TrBZzvPyA/FNLUMzP3eyHCVkAopkKVja+6Q==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+ "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
"cpu": [
"ia32"
],
@@ -503,9 +518,9 @@
}
},
"node_modules/@esbuild/linux-loong64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.9.tgz",
- "integrity": "sha512-t6mN147pUIf3t6wUt3FeumoOTPfmv9Cc6DQlsVBpB7eCpLOqQDyWBP1ymXn1lDw4fNUSb/gBcKAmvTP49oIkaA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+ "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
"cpu": [
"loong64"
],
@@ -518,9 +533,9 @@
}
},
"node_modules/@esbuild/linux-mips64el": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.9.tgz",
- "integrity": "sha512-jg9fujJTNTQBuDXdmAg1eeJUL4Jds7BklOTkkH80ZgQIoCTdQrDaHYgbFZyeTq8zbY+axgptncko3v9p5hLZtw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+ "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
"cpu": [
"mips64el"
],
@@ -533,9 +548,9 @@
}
},
"node_modules/@esbuild/linux-ppc64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.9.tgz",
- "integrity": "sha512-tkV0xUX0pUUgY4ha7z5BbDS85uI7ABw3V1d0RNTii7E9lbmV8Z37Pup2tsLV46SQWzjOeyDi1Q7Wx2+QM8WaCQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+ "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
"cpu": [
"ppc64"
],
@@ -548,9 +563,9 @@
}
},
"node_modules/@esbuild/linux-riscv64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.9.tgz",
- "integrity": "sha512-DfLp8dj91cufgPZDXr9p3FoR++m3ZJ6uIXsXrIvJdOjXVREtXuQCjfMfvmc3LScAVmLjcfloyVtpn43D56JFHg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+ "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
"cpu": [
"riscv64"
],
@@ -563,9 +578,9 @@
}
},
"node_modules/@esbuild/linux-s390x": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.9.tgz",
- "integrity": "sha512-zHbglfEdC88KMgCWpOl/zc6dDYJvWGLiUtmPRsr1OgCViu3z5GncvNVdf+6/56O2Ca8jUU+t1BW261V6kp8qdw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+ "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
"cpu": [
"s390x"
],
@@ -578,9 +593,9 @@
}
},
"node_modules/@esbuild/linux-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.9.tgz",
- "integrity": "sha512-JUjpystGFFmNrEHQnIVG8hKwvA2DN5o7RqiO1CVX8EN/F/gkCjkUMgVn6hzScpwnJtl2mPR6I9XV1oW8k9O+0A==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+ "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
"cpu": [
"x64"
],
@@ -593,9 +608,9 @@
}
},
"node_modules/@esbuild/netbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.9.tgz",
- "integrity": "sha512-GThgZPAwOBOsheA2RUlW5UeroRfESwMq/guy8uEe3wJlAOjpOXuSevLRd70NZ37ZrpO6RHGHgEHvPg1h3S1Jug==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
"cpu": [
"x64"
],
@@ -608,9 +623,9 @@
}
},
"node_modules/@esbuild/openbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.9.tgz",
- "integrity": "sha512-Ki6PlzppaFVbLnD8PtlVQfsYw4S9n3eQl87cqgeIw+O3sRr9IghpfSKY62mggdt1yCSZ8QWvTZ9jo9fjDSg9uw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
"cpu": [
"x64"
],
@@ -623,9 +638,9 @@
}
},
"node_modules/@esbuild/sunos-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.9.tgz",
- "integrity": "sha512-MLHj7k9hWh4y1ddkBpvRj2b9NCBhfgBt3VpWbHQnXRedVun/hC7sIyTGDGTfsGuXo4ebik2+3ShjcPbhtFwWDw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+ "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
"cpu": [
"x64"
],
@@ -638,9 +653,9 @@
}
},
"node_modules/@esbuild/win32-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.9.tgz",
- "integrity": "sha512-GQoa6OrQ8G08guMFgeXPH7yE/8Dt0IfOGWJSfSH4uafwdC7rWwrfE6P9N8AtPGIjUzdo2+7bN8Xo3qC578olhg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+ "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
"cpu": [
"arm64"
],
@@ -653,9 +668,9 @@
}
},
"node_modules/@esbuild/win32-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.9.tgz",
- "integrity": "sha512-UOozV7Ntykvr5tSOlGCrqU3NBr3d8JqPes0QWN2WOXfvkWVGRajC+Ym0/Wj88fUgecUCLDdJPDF0Nna2UK3Qtg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+ "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
"cpu": [
"ia32"
],
@@ -668,9 +683,9 @@
}
},
"node_modules/@esbuild/win32-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.9.tgz",
- "integrity": "sha512-oxoQgglOP7RH6iasDrhY+R/3cHrfwIDvRlT4CGChflq6twk8iENeVvMJjmvBb94Ik1Z+93iGO27err7w6l54GQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+ "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
"cpu": [
"x64"
],
@@ -683,21 +698,21 @@
}
},
"node_modules/@ionic/core": {
- "version": "7.6.6",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
- "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
+ "version": "7.8.4",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.4.tgz",
+ "integrity": "sha512-GiQM3Gb1kjaxQyDTQfXd54p/a8cK+ccaYKH30pRpzFMborqCZwhcCUQWV1zNAUuFI8YkC5CWTi6bdHyiYuxw4w==",
"dependencies": {
- "@stencil/core": "^4.10.0",
+ "@stencil/core": "^4.12.2",
"ionicons": "^7.2.2",
"tslib": "^2.1.0"
}
},
"node_modules/@ionic/react": {
- "version": "7.6.6",
- "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.6.tgz",
- "integrity": "sha512-3J18wUMMGBS2jkTwBRWYpkXvhFYpBcLqKF9nq/9aJL55GtFbu3uAnvM8Km3LkQUYqk4ddpGQr5bvzTvhYcxMMQ==",
+ "version": "7.8.4",
+ "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.8.4.tgz",
+ "integrity": "sha512-w8pvXPCwYtxp+7kPGy91ei7//gokmkFmvLqHigUU95YttSzcUJHyYEZqYq+gKX7B+R1LapDAXrFRXuss4gLJew==",
"dependencies": {
- "@ionic/core": "7.6.6",
+ "@ionic/core": "7.8.4",
"ionicons": "^7.0.0",
"tslib": "*"
},
@@ -707,11 +722,11 @@
}
},
"node_modules/@ionic/react-router": {
- "version": "7.6.6",
- "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.6.6.tgz",
- "integrity": "sha512-T5Dw+BQehw2qtsi/uGTIbz21boJs3jvKF8wj84ziUhPoTVei7p5QyXwKmErFn1fWrnPRTXuj/AKEXdrR7krQCA==",
+ "version": "7.8.4",
+ "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.8.4.tgz",
+ "integrity": "sha512-bxrGtv5iDwRtN//B78y1Hc19PjMoZ4mA/THRWnJp8Z50C7NhJW1blantgzOWB6Nslb60nQdWE+P+TPJq8wglTA==",
"dependencies": {
- "@ionic/react": "7.6.6",
+ "@ionic/react": "7.8.4",
"tslib": "*"
},
"peerDependencies": {
@@ -765,9 +780,9 @@
}
},
"node_modules/@rollup/rollup-android-arm-eabi": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.8.0.tgz",
- "integrity": "sha512-zdTObFRoNENrdPpnTNnhOljYIcOX7aI7+7wyrSpPFFIOf/nRdedE6IYsjaBE7tjukphh1tMTojgJ7p3lKY8x6Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
+ "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
"cpu": [
"arm"
],
@@ -777,9 +792,9 @@
]
},
"node_modules/@rollup/rollup-android-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.8.0.tgz",
- "integrity": "sha512-aiItwP48BiGpMFS9Znjo/xCNQVwTQVcRKkFKsO81m8exrGjHkCBDvm9PHay2kpa8RPnZzzKcD1iQ9KaLY4fPQQ==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
+ "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
"cpu": [
"arm64"
],
@@ -789,9 +804,9 @@
]
},
"node_modules/@rollup/rollup-darwin-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.8.0.tgz",
- "integrity": "sha512-zhNIS+L4ZYkYQUjIQUR6Zl0RXhbbA0huvNIWjmPc2SL0cB1h5Djkcy+RZ3/Bwszfb6vgwUvcVJYD6e6Zkpsi8g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
+ "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
"cpu": [
"arm64"
],
@@ -801,9 +816,9 @@
]
},
"node_modules/@rollup/rollup-darwin-x64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.8.0.tgz",
- "integrity": "sha512-A/FAHFRNQYrELrb/JHncRWzTTXB2ticiRFztP4ggIUAfa9Up1qfW8aG2w/mN9jNiZ+HB0t0u0jpJgFXG6BfRTA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
+ "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
"cpu": [
"x64"
],
@@ -813,9 +828,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.8.0.tgz",
- "integrity": "sha512-JsidBnh3p2IJJA4/2xOF2puAYqbaczB3elZDT0qHxn362EIoIkq7hrR43Xa8RisgI6/WPfvb2umbGsuvf7E37A==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
+ "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
"cpu": [
"arm"
],
@@ -825,9 +840,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.8.0.tgz",
- "integrity": "sha512-hBNCnqw3EVCkaPB0Oqd24bv8SklETptQWcJz06kb9OtiShn9jK1VuTgi7o4zPSt6rNGWQOTDEAccbk0OqJmS+g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
"cpu": [
"arm64"
],
@@ -837,9 +852,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.8.0.tgz",
- "integrity": "sha512-Fw9ChYfJPdltvi9ALJ9wzdCdxGw4wtq4t1qY028b2O7GwB5qLNSGtqMsAel1lfWTZvf4b6/+4HKp0GlSYg0ahA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
+ "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
"cpu": [
"arm64"
],
@@ -849,9 +864,9 @@
]
},
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.8.0.tgz",
- "integrity": "sha512-BH5xIh7tOzS9yBi8dFrCTG8Z6iNIGWGltd3IpTSKp6+pNWWO6qy8eKoRxOtwFbMrid5NZaidLYN6rHh9aB8bEw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
"cpu": [
"riscv64"
],
@@ -861,9 +876,9 @@
]
},
"node_modules/@rollup/rollup-linux-x64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.8.0.tgz",
- "integrity": "sha512-PmvAj8k6EuWiyLbkNpd6BLv5XeYFpqWuRvRNRl80xVfpGXK/z6KYXmAgbI4ogz7uFiJxCnYcqyvZVD0dgFog7Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
+ "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
"cpu": [
"x64"
],
@@ -873,9 +888,9 @@
]
},
"node_modules/@rollup/rollup-linux-x64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.8.0.tgz",
- "integrity": "sha512-mdxnlW2QUzXwY+95TuxZ+CurrhgrPAMveDWI97EQlA9bfhR8tw3Pt7SUlc/eSlCNxlWktpmT//EAA8UfCHOyXg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
+ "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
"cpu": [
"x64"
],
@@ -885,9 +900,9 @@
]
},
"node_modules/@rollup/rollup-win32-arm64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.8.0.tgz",
- "integrity": "sha512-ge7saUz38aesM4MA7Cad8CHo0Fyd1+qTaqoIo+Jtk+ipBi4ATSrHWov9/S4u5pbEQmLjgUjB7BJt+MiKG2kzmA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
+ "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
"cpu": [
"arm64"
],
@@ -897,9 +912,9 @@
]
},
"node_modules/@rollup/rollup-win32-ia32-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.8.0.tgz",
- "integrity": "sha512-p9E3PZlzurhlsN5h9g7zIP1DnqKXJe8ZUkFwAazqSvHuWfihlIISPxG9hCHCoA+dOOspL/c7ty1eeEVFTE0UTw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
+ "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
"cpu": [
"ia32"
],
@@ -909,9 +924,9 @@
]
},
"node_modules/@rollup/rollup-win32-x64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.8.0.tgz",
- "integrity": "sha512-kb4/auKXkYKqlUYTE8s40FcJIj5soOyRLHKd4ugR0dCq0G2EfcF54eYcfQiGkHzjidZ40daB4ulsFdtqNKZtBg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
+ "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
"cpu": [
"x64"
],
@@ -921,9 +936,9 @@
]
},
"node_modules/@stencil/core": {
- "version": "4.10.0",
- "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
- "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==",
+ "version": "4.12.2",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.2.tgz",
+ "integrity": "sha512-WEMpoqwMV4hY/ab2z9NxRhSeZwuKEugjyn6Vd+qA9xqZh6VNUL27QbP8vCa7IeqD4Zql4JBtKu3lVuBHutWE6w==",
"bin": {
"stencil": "bin/stencil"
},
@@ -969,15 +984,20 @@
"@babel/types": "^7.20.7"
}
},
+ "node_modules/@types/estree": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+ },
"node_modules/@types/history": {
"version": "4.7.11",
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
"integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
},
"node_modules/@types/node": {
- "version": "20.11.7",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.7.tgz",
- "integrity": "sha512-GPmeN1C3XAyV5uybAf4cMLWT9fDWcmQhZVtMFu7OR32WjrqGG+Wnk2V1d0bmtUyE/Zy1QJ9BxyiTih9z8Oks8A==",
+ "version": "20.11.10",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.10.tgz",
+ "integrity": "sha512-rZEfe/hJSGYmdfX9tvcPMYeYPW2sNl50nsw4jZmRcaG0HIAb0WYEpsB05GOb53vjqpyE9GUhlDQ4jLSoB5q9kg==",
"dependencies": {
"undici-types": "~5.26.4"
}
@@ -988,9 +1008,9 @@
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
},
"node_modules/@types/react": {
- "version": "18.2.53",
- "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.53.tgz",
- "integrity": "sha512-52IHsMDT8qATp9B9zoOyobW8W3/0QhaJQTw1HwRj0UY2yBpCAQ7+S/CqHYQ8niAm3p4ji+rWUQ9UCib0GxQ60w==",
+ "version": "18.2.70",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.70.tgz",
+ "integrity": "sha512-hjlM2hho2vqklPhopNkXkdkeq6Lv8WSZTpr7956zY+3WS5cfYUewtCzsJLsbW5dEv3lfSeQ4W14ZFeKC437JRQ==",
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@@ -998,9 +1018,9 @@
}
},
"node_modules/@types/react-dom": {
- "version": "18.2.18",
- "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz",
- "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==",
+ "version": "18.2.22",
+ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz",
+ "integrity": "sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==",
"dependencies": {
"@types/react": "*"
}
@@ -1174,9 +1194,9 @@
"integrity": "sha512-/5xHPH6f00SxhHw6052r+5S1xO7gHNc89hV7tqlvnStvKbSrDqc/u6AlwPvVWWNj+s4/KL6T6y8ih+nOY0qYNA=="
},
"node_modules/esbuild": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.9.tgz",
- "integrity": "sha512-U9CHtKSy+EpPsEBa+/A2gMs/h3ylBC0H0KSqIg7tpztHerLi6nrrcoUJAkNCEPumx8yJ+Byic4BVwHgRbN0TBg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+ "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
"hasInstallScript": true,
"bin": {
"esbuild": "bin/esbuild"
@@ -1185,28 +1205,29 @@
"node": ">=12"
},
"optionalDependencies": {
- "@esbuild/android-arm": "0.19.9",
- "@esbuild/android-arm64": "0.19.9",
- "@esbuild/android-x64": "0.19.9",
- "@esbuild/darwin-arm64": "0.19.9",
- "@esbuild/darwin-x64": "0.19.9",
- "@esbuild/freebsd-arm64": "0.19.9",
- "@esbuild/freebsd-x64": "0.19.9",
- "@esbuild/linux-arm": "0.19.9",
- "@esbuild/linux-arm64": "0.19.9",
- "@esbuild/linux-ia32": "0.19.9",
- "@esbuild/linux-loong64": "0.19.9",
- "@esbuild/linux-mips64el": "0.19.9",
- "@esbuild/linux-ppc64": "0.19.9",
- "@esbuild/linux-riscv64": "0.19.9",
- "@esbuild/linux-s390x": "0.19.9",
- "@esbuild/linux-x64": "0.19.9",
- "@esbuild/netbsd-x64": "0.19.9",
- "@esbuild/openbsd-x64": "0.19.9",
- "@esbuild/sunos-x64": "0.19.9",
- "@esbuild/win32-arm64": "0.19.9",
- "@esbuild/win32-ia32": "0.19.9",
- "@esbuild/win32-x64": "0.19.9"
+ "@esbuild/aix-ppc64": "0.20.2",
+ "@esbuild/android-arm": "0.20.2",
+ "@esbuild/android-arm64": "0.20.2",
+ "@esbuild/android-x64": "0.20.2",
+ "@esbuild/darwin-arm64": "0.20.2",
+ "@esbuild/darwin-x64": "0.20.2",
+ "@esbuild/freebsd-arm64": "0.20.2",
+ "@esbuild/freebsd-x64": "0.20.2",
+ "@esbuild/linux-arm": "0.20.2",
+ "@esbuild/linux-arm64": "0.20.2",
+ "@esbuild/linux-ia32": "0.20.2",
+ "@esbuild/linux-loong64": "0.20.2",
+ "@esbuild/linux-mips64el": "0.20.2",
+ "@esbuild/linux-ppc64": "0.20.2",
+ "@esbuild/linux-riscv64": "0.20.2",
+ "@esbuild/linux-s390x": "0.20.2",
+ "@esbuild/linux-x64": "0.20.2",
+ "@esbuild/netbsd-x64": "0.20.2",
+ "@esbuild/openbsd-x64": "0.20.2",
+ "@esbuild/sunos-x64": "0.20.2",
+ "@esbuild/win32-arm64": "0.20.2",
+ "@esbuild/win32-ia32": "0.20.2",
+ "@esbuild/win32-x64": "0.20.2"
}
},
"node_modules/escalade": {
@@ -1383,9 +1404,9 @@
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
},
"node_modules/postcss": {
- "version": "8.4.32",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
- "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
"funding": [
{
"type": "opencollective",
@@ -1403,7 +1424,7 @@
"dependencies": {
"nanoid": "^3.3.7",
"picocolors": "^1.0.0",
- "source-map-js": "^1.0.2"
+ "source-map-js": "^1.2.0"
},
"engines": {
"node": "^10 || ^12 || >=14"
@@ -1520,9 +1541,12 @@
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
},
"node_modules/rollup": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.8.0.tgz",
- "integrity": "sha512-NpsklK2fach5CdI+PScmlE5R4Ao/FSWtF7LkoIrHDxPACY/xshNasPsbpG0VVHxUTbf74tJbVT4PrP8JsJ6ZDA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
+ "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
+ "dependencies": {
+ "@types/estree": "1.0.5"
+ },
"bin": {
"rollup": "dist/bin/rollup"
},
@@ -1531,19 +1555,19 @@
"npm": ">=8.0.0"
},
"optionalDependencies": {
- "@rollup/rollup-android-arm-eabi": "4.8.0",
- "@rollup/rollup-android-arm64": "4.8.0",
- "@rollup/rollup-darwin-arm64": "4.8.0",
- "@rollup/rollup-darwin-x64": "4.8.0",
- "@rollup/rollup-linux-arm-gnueabihf": "4.8.0",
- "@rollup/rollup-linux-arm64-gnu": "4.8.0",
- "@rollup/rollup-linux-arm64-musl": "4.8.0",
- "@rollup/rollup-linux-riscv64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-musl": "4.8.0",
- "@rollup/rollup-win32-arm64-msvc": "4.8.0",
- "@rollup/rollup-win32-ia32-msvc": "4.8.0",
- "@rollup/rollup-win32-x64-msvc": "4.8.0",
+ "@rollup/rollup-android-arm-eabi": "4.13.0",
+ "@rollup/rollup-android-arm64": "4.13.0",
+ "@rollup/rollup-darwin-arm64": "4.13.0",
+ "@rollup/rollup-darwin-x64": "4.13.0",
+ "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
+ "@rollup/rollup-linux-arm64-gnu": "4.13.0",
+ "@rollup/rollup-linux-arm64-musl": "4.13.0",
+ "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-musl": "4.13.0",
+ "@rollup/rollup-win32-arm64-msvc": "4.13.0",
+ "@rollup/rollup-win32-ia32-msvc": "4.13.0",
+ "@rollup/rollup-win32-x64-msvc": "4.13.0",
"fsevents": "~2.3.2"
}
},
@@ -1564,9 +1588,9 @@
}
},
"node_modules/source-map-js": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
- "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
"engines": {
"node": ">=0.10.0"
}
@@ -1606,9 +1630,9 @@
"integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
},
"node_modules/typescript": {
- "version": "5.3.3",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
- "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+ "version": "5.4.2",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+ "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -1657,13 +1681,13 @@
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
},
"node_modules/vite": {
- "version": "5.0.12",
- "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
- "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
+ "version": "5.2.8",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+ "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
"dependencies": {
- "esbuild": "^0.19.3",
- "postcss": "^8.4.32",
- "rollup": "^4.2.0"
+ "esbuild": "^0.20.1",
+ "postcss": "^8.4.38",
+ "rollup": "^4.13.0"
},
"bin": {
"vite": "bin/vite.js"
@@ -1954,164 +1978,170 @@
"to-fast-properties": "^2.0.0"
}
},
+ "@esbuild/aix-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+ "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+ "optional": true
+ },
"@esbuild/android-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz",
- "integrity": "sha512-jkYjjq7SdsWuNI6b5quymW0oC83NN5FdRPuCbs9HZ02mfVdAP8B8eeqLSYU3gb6OJEaY5CQabtTFbqBf26H3GA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+ "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
"optional": true
},
"@esbuild/android-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.9.tgz",
- "integrity": "sha512-q4cR+6ZD0938R19MyEW3jEsMzbb/1rulLXiNAJQADD/XYp7pT+rOS5JGxvpRW8dFDEfjW4wLgC/3FXIw4zYglQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+ "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
"optional": true
},
"@esbuild/android-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.9.tgz",
- "integrity": "sha512-KOqoPntWAH6ZxDwx1D6mRntIgZh9KodzgNOy5Ebt9ghzffOk9X2c1sPwtM9P+0eXbefnDhqYfkh5PLP5ULtWFA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+ "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
"optional": true
},
"@esbuild/darwin-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.9.tgz",
- "integrity": "sha512-KBJ9S0AFyLVx2E5D8W0vExqRW01WqRtczUZ8NRu+Pi+87opZn5tL4Y0xT0mA4FtHctd0ZgwNoN639fUUGlNIWw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+ "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
"optional": true
},
"@esbuild/darwin-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.9.tgz",
- "integrity": "sha512-vE0VotmNTQaTdX0Q9dOHmMTao6ObjyPm58CHZr1UK7qpNleQyxlFlNCaHsHx6Uqv86VgPmR4o2wdNq3dP1qyDQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+ "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
"optional": true
},
"@esbuild/freebsd-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.9.tgz",
- "integrity": "sha512-uFQyd/o1IjiEk3rUHSwUKkqZwqdvuD8GevWF065eqgYfexcVkxh+IJgwTaGZVu59XczZGcN/YMh9uF1fWD8j1g==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+ "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
"optional": true
},
"@esbuild/freebsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.9.tgz",
- "integrity": "sha512-WMLgWAtkdTbTu1AWacY7uoj/YtHthgqrqhf1OaEWnZb7PQgpt8eaA/F3LkV0E6K/Lc0cUr/uaVP/49iE4M4asA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+ "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
"optional": true
},
"@esbuild/linux-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.9.tgz",
- "integrity": "sha512-C/ChPohUYoyUaqn1h17m/6yt6OB14hbXvT8EgM1ZWaiiTYz7nWZR0SYmMnB5BzQA4GXl3BgBO1l8MYqL/He3qw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+ "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
"optional": true
},
"@esbuild/linux-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.9.tgz",
- "integrity": "sha512-PiPblfe1BjK7WDAKR1Cr9O7VVPqVNpwFcPWgfn4xu0eMemzRp442hXyzF/fSwgrufI66FpHOEJk0yYdPInsmyQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+ "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
"optional": true
},
"@esbuild/linux-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.9.tgz",
- "integrity": "sha512-f37i/0zE0MjDxijkPSQw1CO/7C27Eojqb+r3BbHVxMLkj8GCa78TrBZzvPyA/FNLUMzP3eyHCVkAopkKVja+6Q==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+ "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
"optional": true
},
"@esbuild/linux-loong64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.9.tgz",
- "integrity": "sha512-t6mN147pUIf3t6wUt3FeumoOTPfmv9Cc6DQlsVBpB7eCpLOqQDyWBP1ymXn1lDw4fNUSb/gBcKAmvTP49oIkaA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+ "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
"optional": true
},
"@esbuild/linux-mips64el": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.9.tgz",
- "integrity": "sha512-jg9fujJTNTQBuDXdmAg1eeJUL4Jds7BklOTkkH80ZgQIoCTdQrDaHYgbFZyeTq8zbY+axgptncko3v9p5hLZtw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+ "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
"optional": true
},
"@esbuild/linux-ppc64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.9.tgz",
- "integrity": "sha512-tkV0xUX0pUUgY4ha7z5BbDS85uI7ABw3V1d0RNTii7E9lbmV8Z37Pup2tsLV46SQWzjOeyDi1Q7Wx2+QM8WaCQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+ "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
"optional": true
},
"@esbuild/linux-riscv64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.9.tgz",
- "integrity": "sha512-DfLp8dj91cufgPZDXr9p3FoR++m3ZJ6uIXsXrIvJdOjXVREtXuQCjfMfvmc3LScAVmLjcfloyVtpn43D56JFHg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+ "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
"optional": true
},
"@esbuild/linux-s390x": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.9.tgz",
- "integrity": "sha512-zHbglfEdC88KMgCWpOl/zc6dDYJvWGLiUtmPRsr1OgCViu3z5GncvNVdf+6/56O2Ca8jUU+t1BW261V6kp8qdw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+ "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
"optional": true
},
"@esbuild/linux-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.9.tgz",
- "integrity": "sha512-JUjpystGFFmNrEHQnIVG8hKwvA2DN5o7RqiO1CVX8EN/F/gkCjkUMgVn6hzScpwnJtl2mPR6I9XV1oW8k9O+0A==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+ "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
"optional": true
},
"@esbuild/netbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.9.tgz",
- "integrity": "sha512-GThgZPAwOBOsheA2RUlW5UeroRfESwMq/guy8uEe3wJlAOjpOXuSevLRd70NZ37ZrpO6RHGHgEHvPg1h3S1Jug==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
"optional": true
},
"@esbuild/openbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.9.tgz",
- "integrity": "sha512-Ki6PlzppaFVbLnD8PtlVQfsYw4S9n3eQl87cqgeIw+O3sRr9IghpfSKY62mggdt1yCSZ8QWvTZ9jo9fjDSg9uw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
"optional": true
},
"@esbuild/sunos-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.9.tgz",
- "integrity": "sha512-MLHj7k9hWh4y1ddkBpvRj2b9NCBhfgBt3VpWbHQnXRedVun/hC7sIyTGDGTfsGuXo4ebik2+3ShjcPbhtFwWDw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+ "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
"optional": true
},
"@esbuild/win32-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.9.tgz",
- "integrity": "sha512-GQoa6OrQ8G08guMFgeXPH7yE/8Dt0IfOGWJSfSH4uafwdC7rWwrfE6P9N8AtPGIjUzdo2+7bN8Xo3qC578olhg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+ "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
"optional": true
},
"@esbuild/win32-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.9.tgz",
- "integrity": "sha512-UOozV7Ntykvr5tSOlGCrqU3NBr3d8JqPes0QWN2WOXfvkWVGRajC+Ym0/Wj88fUgecUCLDdJPDF0Nna2UK3Qtg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+ "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
"optional": true
},
"@esbuild/win32-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.9.tgz",
- "integrity": "sha512-oxoQgglOP7RH6iasDrhY+R/3cHrfwIDvRlT4CGChflq6twk8iENeVvMJjmvBb94Ik1Z+93iGO27err7w6l54GQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+ "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
"optional": true
},
"@ionic/core": {
- "version": "7.6.6",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
- "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
+ "version": "7.8.4",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.4.tgz",
+ "integrity": "sha512-GiQM3Gb1kjaxQyDTQfXd54p/a8cK+ccaYKH30pRpzFMborqCZwhcCUQWV1zNAUuFI8YkC5CWTi6bdHyiYuxw4w==",
"requires": {
- "@stencil/core": "^4.10.0",
+ "@stencil/core": "^4.12.2",
"ionicons": "^7.2.2",
"tslib": "^2.1.0"
}
},
"@ionic/react": {
- "version": "7.6.6",
- "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.6.tgz",
- "integrity": "sha512-3J18wUMMGBS2jkTwBRWYpkXvhFYpBcLqKF9nq/9aJL55GtFbu3uAnvM8Km3LkQUYqk4ddpGQr5bvzTvhYcxMMQ==",
+ "version": "7.8.4",
+ "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.8.4.tgz",
+ "integrity": "sha512-w8pvXPCwYtxp+7kPGy91ei7//gokmkFmvLqHigUU95YttSzcUJHyYEZqYq+gKX7B+R1LapDAXrFRXuss4gLJew==",
"requires": {
- "@ionic/core": "7.6.6",
+ "@ionic/core": "7.8.4",
"ionicons": "^7.0.0",
"tslib": "*"
}
},
"@ionic/react-router": {
- "version": "7.6.6",
- "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.6.6.tgz",
- "integrity": "sha512-T5Dw+BQehw2qtsi/uGTIbz21boJs3jvKF8wj84ziUhPoTVei7p5QyXwKmErFn1fWrnPRTXuj/AKEXdrR7krQCA==",
+ "version": "7.8.4",
+ "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-7.8.4.tgz",
+ "integrity": "sha512-bxrGtv5iDwRtN//B78y1Hc19PjMoZ4mA/THRWnJp8Z50C7NhJW1blantgzOWB6Nslb60nQdWE+P+TPJq8wglTA==",
"requires": {
- "@ionic/react": "7.6.6",
+ "@ionic/react": "7.8.4",
"tslib": "*"
}
},
@@ -2150,87 +2180,87 @@
}
},
"@rollup/rollup-android-arm-eabi": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.8.0.tgz",
- "integrity": "sha512-zdTObFRoNENrdPpnTNnhOljYIcOX7aI7+7wyrSpPFFIOf/nRdedE6IYsjaBE7tjukphh1tMTojgJ7p3lKY8x6Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
+ "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
"optional": true
},
"@rollup/rollup-android-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.8.0.tgz",
- "integrity": "sha512-aiItwP48BiGpMFS9Znjo/xCNQVwTQVcRKkFKsO81m8exrGjHkCBDvm9PHay2kpa8RPnZzzKcD1iQ9KaLY4fPQQ==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
+ "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
"optional": true
},
"@rollup/rollup-darwin-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.8.0.tgz",
- "integrity": "sha512-zhNIS+L4ZYkYQUjIQUR6Zl0RXhbbA0huvNIWjmPc2SL0cB1h5Djkcy+RZ3/Bwszfb6vgwUvcVJYD6e6Zkpsi8g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
+ "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
"optional": true
},
"@rollup/rollup-darwin-x64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.8.0.tgz",
- "integrity": "sha512-A/FAHFRNQYrELrb/JHncRWzTTXB2ticiRFztP4ggIUAfa9Up1qfW8aG2w/mN9jNiZ+HB0t0u0jpJgFXG6BfRTA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
+ "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
"optional": true
},
"@rollup/rollup-linux-arm-gnueabihf": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.8.0.tgz",
- "integrity": "sha512-JsidBnh3p2IJJA4/2xOF2puAYqbaczB3elZDT0qHxn362EIoIkq7hrR43Xa8RisgI6/WPfvb2umbGsuvf7E37A==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
+ "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
"optional": true
},
"@rollup/rollup-linux-arm64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.8.0.tgz",
- "integrity": "sha512-hBNCnqw3EVCkaPB0Oqd24bv8SklETptQWcJz06kb9OtiShn9jK1VuTgi7o4zPSt6rNGWQOTDEAccbk0OqJmS+g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
"optional": true
},
"@rollup/rollup-linux-arm64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.8.0.tgz",
- "integrity": "sha512-Fw9ChYfJPdltvi9ALJ9wzdCdxGw4wtq4t1qY028b2O7GwB5qLNSGtqMsAel1lfWTZvf4b6/+4HKp0GlSYg0ahA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
+ "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
"optional": true
},
"@rollup/rollup-linux-riscv64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.8.0.tgz",
- "integrity": "sha512-BH5xIh7tOzS9yBi8dFrCTG8Z6iNIGWGltd3IpTSKp6+pNWWO6qy8eKoRxOtwFbMrid5NZaidLYN6rHh9aB8bEw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
"optional": true
},
"@rollup/rollup-linux-x64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.8.0.tgz",
- "integrity": "sha512-PmvAj8k6EuWiyLbkNpd6BLv5XeYFpqWuRvRNRl80xVfpGXK/z6KYXmAgbI4ogz7uFiJxCnYcqyvZVD0dgFog7Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
+ "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
"optional": true
},
"@rollup/rollup-linux-x64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.8.0.tgz",
- "integrity": "sha512-mdxnlW2QUzXwY+95TuxZ+CurrhgrPAMveDWI97EQlA9bfhR8tw3Pt7SUlc/eSlCNxlWktpmT//EAA8UfCHOyXg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
+ "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
"optional": true
},
"@rollup/rollup-win32-arm64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.8.0.tgz",
- "integrity": "sha512-ge7saUz38aesM4MA7Cad8CHo0Fyd1+qTaqoIo+Jtk+ipBi4ATSrHWov9/S4u5pbEQmLjgUjB7BJt+MiKG2kzmA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
+ "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
"optional": true
},
"@rollup/rollup-win32-ia32-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.8.0.tgz",
- "integrity": "sha512-p9E3PZlzurhlsN5h9g7zIP1DnqKXJe8ZUkFwAazqSvHuWfihlIISPxG9hCHCoA+dOOspL/c7ty1eeEVFTE0UTw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
+ "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
"optional": true
},
"@rollup/rollup-win32-x64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.8.0.tgz",
- "integrity": "sha512-kb4/auKXkYKqlUYTE8s40FcJIj5soOyRLHKd4ugR0dCq0G2EfcF54eYcfQiGkHzjidZ40daB4ulsFdtqNKZtBg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
+ "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
"optional": true
},
"@stencil/core": {
- "version": "4.10.0",
- "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
- "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w=="
+ "version": "4.12.2",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.2.tgz",
+ "integrity": "sha512-WEMpoqwMV4hY/ab2z9NxRhSeZwuKEugjyn6Vd+qA9xqZh6VNUL27QbP8vCa7IeqD4Zql4JBtKu3lVuBHutWE6w=="
},
"@types/babel__core": {
"version": "7.20.5",
@@ -2269,15 +2299,20 @@
"@babel/types": "^7.20.7"
}
},
+ "@types/estree": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+ },
"@types/history": {
"version": "4.7.11",
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
"integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
},
"@types/node": {
- "version": "20.11.7",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.7.tgz",
- "integrity": "sha512-GPmeN1C3XAyV5uybAf4cMLWT9fDWcmQhZVtMFu7OR32WjrqGG+Wnk2V1d0bmtUyE/Zy1QJ9BxyiTih9z8Oks8A==",
+ "version": "20.11.10",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.10.tgz",
+ "integrity": "sha512-rZEfe/hJSGYmdfX9tvcPMYeYPW2sNl50nsw4jZmRcaG0HIAb0WYEpsB05GOb53vjqpyE9GUhlDQ4jLSoB5q9kg==",
"requires": {
"undici-types": "~5.26.4"
}
@@ -2288,9 +2323,9 @@
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
},
"@types/react": {
- "version": "18.2.53",
- "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.53.tgz",
- "integrity": "sha512-52IHsMDT8qATp9B9zoOyobW8W3/0QhaJQTw1HwRj0UY2yBpCAQ7+S/CqHYQ8niAm3p4ji+rWUQ9UCib0GxQ60w==",
+ "version": "18.2.70",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.70.tgz",
+ "integrity": "sha512-hjlM2hho2vqklPhopNkXkdkeq6Lv8WSZTpr7956zY+3WS5cfYUewtCzsJLsbW5dEv3lfSeQ4W14ZFeKC437JRQ==",
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@@ -2298,9 +2333,9 @@
}
},
"@types/react-dom": {
- "version": "18.2.18",
- "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz",
- "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==",
+ "version": "18.2.22",
+ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz",
+ "integrity": "sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==",
"requires": {
"@types/react": "*"
}
@@ -2417,32 +2452,33 @@
"integrity": "sha512-/5xHPH6f00SxhHw6052r+5S1xO7gHNc89hV7tqlvnStvKbSrDqc/u6AlwPvVWWNj+s4/KL6T6y8ih+nOY0qYNA=="
},
"esbuild": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.9.tgz",
- "integrity": "sha512-U9CHtKSy+EpPsEBa+/A2gMs/h3ylBC0H0KSqIg7tpztHerLi6nrrcoUJAkNCEPumx8yJ+Byic4BVwHgRbN0TBg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+ "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
"requires": {
- "@esbuild/android-arm": "0.19.9",
- "@esbuild/android-arm64": "0.19.9",
- "@esbuild/android-x64": "0.19.9",
- "@esbuild/darwin-arm64": "0.19.9",
- "@esbuild/darwin-x64": "0.19.9",
- "@esbuild/freebsd-arm64": "0.19.9",
- "@esbuild/freebsd-x64": "0.19.9",
- "@esbuild/linux-arm": "0.19.9",
- "@esbuild/linux-arm64": "0.19.9",
- "@esbuild/linux-ia32": "0.19.9",
- "@esbuild/linux-loong64": "0.19.9",
- "@esbuild/linux-mips64el": "0.19.9",
- "@esbuild/linux-ppc64": "0.19.9",
- "@esbuild/linux-riscv64": "0.19.9",
- "@esbuild/linux-s390x": "0.19.9",
- "@esbuild/linux-x64": "0.19.9",
- "@esbuild/netbsd-x64": "0.19.9",
- "@esbuild/openbsd-x64": "0.19.9",
- "@esbuild/sunos-x64": "0.19.9",
- "@esbuild/win32-arm64": "0.19.9",
- "@esbuild/win32-ia32": "0.19.9",
- "@esbuild/win32-x64": "0.19.9"
+ "@esbuild/aix-ppc64": "0.20.2",
+ "@esbuild/android-arm": "0.20.2",
+ "@esbuild/android-arm64": "0.20.2",
+ "@esbuild/android-x64": "0.20.2",
+ "@esbuild/darwin-arm64": "0.20.2",
+ "@esbuild/darwin-x64": "0.20.2",
+ "@esbuild/freebsd-arm64": "0.20.2",
+ "@esbuild/freebsd-x64": "0.20.2",
+ "@esbuild/linux-arm": "0.20.2",
+ "@esbuild/linux-arm64": "0.20.2",
+ "@esbuild/linux-ia32": "0.20.2",
+ "@esbuild/linux-loong64": "0.20.2",
+ "@esbuild/linux-mips64el": "0.20.2",
+ "@esbuild/linux-ppc64": "0.20.2",
+ "@esbuild/linux-riscv64": "0.20.2",
+ "@esbuild/linux-s390x": "0.20.2",
+ "@esbuild/linux-x64": "0.20.2",
+ "@esbuild/netbsd-x64": "0.20.2",
+ "@esbuild/openbsd-x64": "0.20.2",
+ "@esbuild/sunos-x64": "0.20.2",
+ "@esbuild/win32-arm64": "0.20.2",
+ "@esbuild/win32-ia32": "0.20.2",
+ "@esbuild/win32-x64": "0.20.2"
}
},
"escalade": {
@@ -2569,13 +2605,13 @@
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
},
"postcss": {
- "version": "8.4.32",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.32.tgz",
- "integrity": "sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==",
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
"requires": {
"nanoid": "^3.3.7",
"picocolors": "^1.0.0",
- "source-map-js": "^1.0.2"
+ "source-map-js": "^1.2.0"
}
},
"prop-types": {
@@ -2678,23 +2714,24 @@
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
},
"rollup": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.8.0.tgz",
- "integrity": "sha512-NpsklK2fach5CdI+PScmlE5R4Ao/FSWtF7LkoIrHDxPACY/xshNasPsbpG0VVHxUTbf74tJbVT4PrP8JsJ6ZDA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
+ "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
"requires": {
- "@rollup/rollup-android-arm-eabi": "4.8.0",
- "@rollup/rollup-android-arm64": "4.8.0",
- "@rollup/rollup-darwin-arm64": "4.8.0",
- "@rollup/rollup-darwin-x64": "4.8.0",
- "@rollup/rollup-linux-arm-gnueabihf": "4.8.0",
- "@rollup/rollup-linux-arm64-gnu": "4.8.0",
- "@rollup/rollup-linux-arm64-musl": "4.8.0",
- "@rollup/rollup-linux-riscv64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-musl": "4.8.0",
- "@rollup/rollup-win32-arm64-msvc": "4.8.0",
- "@rollup/rollup-win32-ia32-msvc": "4.8.0",
- "@rollup/rollup-win32-x64-msvc": "4.8.0",
+ "@rollup/rollup-android-arm-eabi": "4.13.0",
+ "@rollup/rollup-android-arm64": "4.13.0",
+ "@rollup/rollup-darwin-arm64": "4.13.0",
+ "@rollup/rollup-darwin-x64": "4.13.0",
+ "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
+ "@rollup/rollup-linux-arm64-gnu": "4.13.0",
+ "@rollup/rollup-linux-arm64-musl": "4.13.0",
+ "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-musl": "4.13.0",
+ "@rollup/rollup-win32-arm64-msvc": "4.13.0",
+ "@rollup/rollup-win32-ia32-msvc": "4.13.0",
+ "@rollup/rollup-win32-x64-msvc": "4.13.0",
+ "@types/estree": "1.0.5",
"fsevents": "~2.3.2"
}
},
@@ -2712,9 +2749,9 @@
"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
},
"source-map-js": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
- "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
},
"supports-color": {
"version": "5.5.0",
@@ -2745,9 +2782,9 @@
"integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
},
"typescript": {
- "version": "5.3.3",
- "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
- "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw=="
+ "version": "5.4.2",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+ "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ=="
},
"undici-types": {
"version": "5.26.5",
@@ -2769,14 +2806,14 @@
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
},
"vite": {
- "version": "5.0.12",
- "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
- "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
+ "version": "5.2.8",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+ "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
"requires": {
- "esbuild": "^0.19.3",
+ "esbuild": "^0.20.1",
"fsevents": "~2.3.3",
- "postcss": "^8.4.32",
- "rollup": "^4.2.0"
+ "postcss": "^8.4.38",
+ "rollup": "^4.13.0"
}
},
"web-vitals": {
diff --git a/static/code/stackblitz/v7/vue/package-lock.json b/static/code/stackblitz/v7/vue/package-lock.json
index 818992e8d59..f89a5277d9a 100644
--- a/static/code/stackblitz/v7/vue/package-lock.json
+++ b/static/code/stackblitz/v7/vue/package-lock.json
@@ -11,19 +11,19 @@
"@ionic/vue": "^7.4.0",
"@ionic/vue-router": "^7.4.0",
"vue": "^3.2.25",
- "vue-router": "4.2.5"
+ "vue-router": "4.3.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.0",
"typescript": "^4.5.4",
"vite": "^5.0.0",
- "vue-tsc": "^1.0.0"
+ "vue-tsc": "^2.0.0"
}
},
"node_modules/@babel/parser": {
- "version": "7.23.6",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
- "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==",
+ "version": "7.23.9",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
+ "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
"bin": {
"parser": "bin/babel-parser.js"
},
@@ -31,10 +31,26 @@
"node": ">=6.0.0"
}
},
+ "node_modules/@esbuild/aix-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+ "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+ "cpu": [
+ "ppc64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "aix"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/@esbuild/android-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz",
- "integrity": "sha512-jkYjjq7SdsWuNI6b5quymW0oC83NN5FdRPuCbs9HZ02mfVdAP8B8eeqLSYU3gb6OJEaY5CQabtTFbqBf26H3GA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+ "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
"cpu": [
"arm"
],
@@ -48,9 +64,9 @@
}
},
"node_modules/@esbuild/android-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.9.tgz",
- "integrity": "sha512-q4cR+6ZD0938R19MyEW3jEsMzbb/1rulLXiNAJQADD/XYp7pT+rOS5JGxvpRW8dFDEfjW4wLgC/3FXIw4zYglQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+ "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
"cpu": [
"arm64"
],
@@ -64,9 +80,9 @@
}
},
"node_modules/@esbuild/android-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.9.tgz",
- "integrity": "sha512-KOqoPntWAH6ZxDwx1D6mRntIgZh9KodzgNOy5Ebt9ghzffOk9X2c1sPwtM9P+0eXbefnDhqYfkh5PLP5ULtWFA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+ "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
"cpu": [
"x64"
],
@@ -80,9 +96,9 @@
}
},
"node_modules/@esbuild/darwin-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.9.tgz",
- "integrity": "sha512-KBJ9S0AFyLVx2E5D8W0vExqRW01WqRtczUZ8NRu+Pi+87opZn5tL4Y0xT0mA4FtHctd0ZgwNoN639fUUGlNIWw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+ "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
"cpu": [
"arm64"
],
@@ -96,9 +112,9 @@
}
},
"node_modules/@esbuild/darwin-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.9.tgz",
- "integrity": "sha512-vE0VotmNTQaTdX0Q9dOHmMTao6ObjyPm58CHZr1UK7qpNleQyxlFlNCaHsHx6Uqv86VgPmR4o2wdNq3dP1qyDQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+ "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
"cpu": [
"x64"
],
@@ -112,9 +128,9 @@
}
},
"node_modules/@esbuild/freebsd-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.9.tgz",
- "integrity": "sha512-uFQyd/o1IjiEk3rUHSwUKkqZwqdvuD8GevWF065eqgYfexcVkxh+IJgwTaGZVu59XczZGcN/YMh9uF1fWD8j1g==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+ "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
"cpu": [
"arm64"
],
@@ -128,9 +144,9 @@
}
},
"node_modules/@esbuild/freebsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.9.tgz",
- "integrity": "sha512-WMLgWAtkdTbTu1AWacY7uoj/YtHthgqrqhf1OaEWnZb7PQgpt8eaA/F3LkV0E6K/Lc0cUr/uaVP/49iE4M4asA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+ "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
"cpu": [
"x64"
],
@@ -144,9 +160,9 @@
}
},
"node_modules/@esbuild/linux-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.9.tgz",
- "integrity": "sha512-C/ChPohUYoyUaqn1h17m/6yt6OB14hbXvT8EgM1ZWaiiTYz7nWZR0SYmMnB5BzQA4GXl3BgBO1l8MYqL/He3qw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+ "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
"cpu": [
"arm"
],
@@ -160,9 +176,9 @@
}
},
"node_modules/@esbuild/linux-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.9.tgz",
- "integrity": "sha512-PiPblfe1BjK7WDAKR1Cr9O7VVPqVNpwFcPWgfn4xu0eMemzRp442hXyzF/fSwgrufI66FpHOEJk0yYdPInsmyQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+ "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
"cpu": [
"arm64"
],
@@ -176,9 +192,9 @@
}
},
"node_modules/@esbuild/linux-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.9.tgz",
- "integrity": "sha512-f37i/0zE0MjDxijkPSQw1CO/7C27Eojqb+r3BbHVxMLkj8GCa78TrBZzvPyA/FNLUMzP3eyHCVkAopkKVja+6Q==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+ "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
"cpu": [
"ia32"
],
@@ -192,9 +208,9 @@
}
},
"node_modules/@esbuild/linux-loong64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.9.tgz",
- "integrity": "sha512-t6mN147pUIf3t6wUt3FeumoOTPfmv9Cc6DQlsVBpB7eCpLOqQDyWBP1ymXn1lDw4fNUSb/gBcKAmvTP49oIkaA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+ "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
"cpu": [
"loong64"
],
@@ -208,9 +224,9 @@
}
},
"node_modules/@esbuild/linux-mips64el": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.9.tgz",
- "integrity": "sha512-jg9fujJTNTQBuDXdmAg1eeJUL4Jds7BklOTkkH80ZgQIoCTdQrDaHYgbFZyeTq8zbY+axgptncko3v9p5hLZtw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+ "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
"cpu": [
"mips64el"
],
@@ -224,9 +240,9 @@
}
},
"node_modules/@esbuild/linux-ppc64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.9.tgz",
- "integrity": "sha512-tkV0xUX0pUUgY4ha7z5BbDS85uI7ABw3V1d0RNTii7E9lbmV8Z37Pup2tsLV46SQWzjOeyDi1Q7Wx2+QM8WaCQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+ "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
"cpu": [
"ppc64"
],
@@ -240,9 +256,9 @@
}
},
"node_modules/@esbuild/linux-riscv64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.9.tgz",
- "integrity": "sha512-DfLp8dj91cufgPZDXr9p3FoR++m3ZJ6uIXsXrIvJdOjXVREtXuQCjfMfvmc3LScAVmLjcfloyVtpn43D56JFHg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+ "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
"cpu": [
"riscv64"
],
@@ -256,9 +272,9 @@
}
},
"node_modules/@esbuild/linux-s390x": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.9.tgz",
- "integrity": "sha512-zHbglfEdC88KMgCWpOl/zc6dDYJvWGLiUtmPRsr1OgCViu3z5GncvNVdf+6/56O2Ca8jUU+t1BW261V6kp8qdw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+ "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
"cpu": [
"s390x"
],
@@ -272,9 +288,9 @@
}
},
"node_modules/@esbuild/linux-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.9.tgz",
- "integrity": "sha512-JUjpystGFFmNrEHQnIVG8hKwvA2DN5o7RqiO1CVX8EN/F/gkCjkUMgVn6hzScpwnJtl2mPR6I9XV1oW8k9O+0A==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+ "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
"cpu": [
"x64"
],
@@ -288,9 +304,9 @@
}
},
"node_modules/@esbuild/netbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.9.tgz",
- "integrity": "sha512-GThgZPAwOBOsheA2RUlW5UeroRfESwMq/guy8uEe3wJlAOjpOXuSevLRd70NZ37ZrpO6RHGHgEHvPg1h3S1Jug==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
"cpu": [
"x64"
],
@@ -304,9 +320,9 @@
}
},
"node_modules/@esbuild/openbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.9.tgz",
- "integrity": "sha512-Ki6PlzppaFVbLnD8PtlVQfsYw4S9n3eQl87cqgeIw+O3sRr9IghpfSKY62mggdt1yCSZ8QWvTZ9jo9fjDSg9uw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
"cpu": [
"x64"
],
@@ -320,9 +336,9 @@
}
},
"node_modules/@esbuild/sunos-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.9.tgz",
- "integrity": "sha512-MLHj7k9hWh4y1ddkBpvRj2b9NCBhfgBt3VpWbHQnXRedVun/hC7sIyTGDGTfsGuXo4ebik2+3ShjcPbhtFwWDw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+ "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
"cpu": [
"x64"
],
@@ -336,9 +352,9 @@
}
},
"node_modules/@esbuild/win32-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.9.tgz",
- "integrity": "sha512-GQoa6OrQ8G08guMFgeXPH7yE/8Dt0IfOGWJSfSH4uafwdC7rWwrfE6P9N8AtPGIjUzdo2+7bN8Xo3qC578olhg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+ "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
"cpu": [
"arm64"
],
@@ -352,9 +368,9 @@
}
},
"node_modules/@esbuild/win32-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.9.tgz",
- "integrity": "sha512-UOozV7Ntykvr5tSOlGCrqU3NBr3d8JqPes0QWN2WOXfvkWVGRajC+Ym0/Wj88fUgecUCLDdJPDF0Nna2UK3Qtg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+ "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
"cpu": [
"ia32"
],
@@ -368,9 +384,9 @@
}
},
"node_modules/@esbuild/win32-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.9.tgz",
- "integrity": "sha512-oxoQgglOP7RH6iasDrhY+R/3cHrfwIDvRlT4CGChflq6twk8iENeVvMJjmvBb94Ik1Z+93iGO27err7w6l54GQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+ "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
"cpu": [
"x64"
],
@@ -384,30 +400,30 @@
}
},
"node_modules/@ionic/core": {
- "version": "7.6.6",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
- "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
+ "version": "7.8.4",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.4.tgz",
+ "integrity": "sha512-GiQM3Gb1kjaxQyDTQfXd54p/a8cK+ccaYKH30pRpzFMborqCZwhcCUQWV1zNAUuFI8YkC5CWTi6bdHyiYuxw4w==",
"dependencies": {
- "@stencil/core": "^4.10.0",
+ "@stencil/core": "^4.12.2",
"ionicons": "^7.2.2",
"tslib": "^2.1.0"
}
},
"node_modules/@ionic/vue": {
- "version": "7.6.6",
- "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.6.tgz",
- "integrity": "sha512-Ct992mndUmyTKq2vBFX/3gFcyNW/QKScYydAvG0Jtl9fPHrMZ7fYj+Hk1OEuLQDbsBMH3gUXjUV0OV5pYABsEA==",
+ "version": "7.8.4",
+ "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.8.4.tgz",
+ "integrity": "sha512-x5qRvGo9OSjnROANbicTR1vDIFLSMo2BWSzUCbpLfp3NLbLfgdRfWLFJMbSlI+2RLhZ6d7iACCjSzoayD255cw==",
"dependencies": {
- "@ionic/core": "7.6.6",
+ "@ionic/core": "7.8.4",
"ionicons": "^7.0.0"
}
},
"node_modules/@ionic/vue-router": {
- "version": "7.6.6",
- "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.6.6.tgz",
- "integrity": "sha512-5iJVxEeRTWyBgA6RwpZhR9LWfAOUbhrTsnD00wsM5c78pg70Hxoz613/BelMHtirKiOQ+MBZFSxX6jfjTEjBig==",
+ "version": "7.8.4",
+ "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.8.4.tgz",
+ "integrity": "sha512-cXj+cd5t4S0ChatJ5r4Y4isuexxezuqz3+UWNJN4+rfN0zceIfeOrr741bNo2I+jTE8jXJowIA3q+kW0bY5UTQ==",
"dependencies": {
- "@ionic/vue": "7.6.6"
+ "@ionic/vue": "7.8.4"
}
},
"node_modules/@jridgewell/sourcemap-codec": {
@@ -416,9 +432,9 @@
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
},
"node_modules/@rollup/rollup-android-arm-eabi": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.8.0.tgz",
- "integrity": "sha512-zdTObFRoNENrdPpnTNnhOljYIcOX7aI7+7wyrSpPFFIOf/nRdedE6IYsjaBE7tjukphh1tMTojgJ7p3lKY8x6Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
+ "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
"cpu": [
"arm"
],
@@ -429,9 +445,9 @@
]
},
"node_modules/@rollup/rollup-android-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.8.0.tgz",
- "integrity": "sha512-aiItwP48BiGpMFS9Znjo/xCNQVwTQVcRKkFKsO81m8exrGjHkCBDvm9PHay2kpa8RPnZzzKcD1iQ9KaLY4fPQQ==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
+ "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
"cpu": [
"arm64"
],
@@ -442,9 +458,9 @@
]
},
"node_modules/@rollup/rollup-darwin-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.8.0.tgz",
- "integrity": "sha512-zhNIS+L4ZYkYQUjIQUR6Zl0RXhbbA0huvNIWjmPc2SL0cB1h5Djkcy+RZ3/Bwszfb6vgwUvcVJYD6e6Zkpsi8g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
+ "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
"cpu": [
"arm64"
],
@@ -455,9 +471,9 @@
]
},
"node_modules/@rollup/rollup-darwin-x64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.8.0.tgz",
- "integrity": "sha512-A/FAHFRNQYrELrb/JHncRWzTTXB2ticiRFztP4ggIUAfa9Up1qfW8aG2w/mN9jNiZ+HB0t0u0jpJgFXG6BfRTA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
+ "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
"cpu": [
"x64"
],
@@ -468,9 +484,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.8.0.tgz",
- "integrity": "sha512-JsidBnh3p2IJJA4/2xOF2puAYqbaczB3elZDT0qHxn362EIoIkq7hrR43Xa8RisgI6/WPfvb2umbGsuvf7E37A==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
+ "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
"cpu": [
"arm"
],
@@ -481,9 +497,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.8.0.tgz",
- "integrity": "sha512-hBNCnqw3EVCkaPB0Oqd24bv8SklETptQWcJz06kb9OtiShn9jK1VuTgi7o4zPSt6rNGWQOTDEAccbk0OqJmS+g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
"cpu": [
"arm64"
],
@@ -494,9 +510,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.8.0.tgz",
- "integrity": "sha512-Fw9ChYfJPdltvi9ALJ9wzdCdxGw4wtq4t1qY028b2O7GwB5qLNSGtqMsAel1lfWTZvf4b6/+4HKp0GlSYg0ahA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
+ "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
"cpu": [
"arm64"
],
@@ -507,9 +523,9 @@
]
},
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.8.0.tgz",
- "integrity": "sha512-BH5xIh7tOzS9yBi8dFrCTG8Z6iNIGWGltd3IpTSKp6+pNWWO6qy8eKoRxOtwFbMrid5NZaidLYN6rHh9aB8bEw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
"cpu": [
"riscv64"
],
@@ -520,9 +536,9 @@
]
},
"node_modules/@rollup/rollup-linux-x64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.8.0.tgz",
- "integrity": "sha512-PmvAj8k6EuWiyLbkNpd6BLv5XeYFpqWuRvRNRl80xVfpGXK/z6KYXmAgbI4ogz7uFiJxCnYcqyvZVD0dgFog7Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
+ "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
"cpu": [
"x64"
],
@@ -533,9 +549,9 @@
]
},
"node_modules/@rollup/rollup-linux-x64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.8.0.tgz",
- "integrity": "sha512-mdxnlW2QUzXwY+95TuxZ+CurrhgrPAMveDWI97EQlA9bfhR8tw3Pt7SUlc/eSlCNxlWktpmT//EAA8UfCHOyXg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
+ "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
"cpu": [
"x64"
],
@@ -546,9 +562,9 @@
]
},
"node_modules/@rollup/rollup-win32-arm64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.8.0.tgz",
- "integrity": "sha512-ge7saUz38aesM4MA7Cad8CHo0Fyd1+qTaqoIo+Jtk+ipBi4ATSrHWov9/S4u5pbEQmLjgUjB7BJt+MiKG2kzmA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
+ "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
"cpu": [
"arm64"
],
@@ -559,9 +575,9 @@
]
},
"node_modules/@rollup/rollup-win32-ia32-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.8.0.tgz",
- "integrity": "sha512-p9E3PZlzurhlsN5h9g7zIP1DnqKXJe8ZUkFwAazqSvHuWfihlIISPxG9hCHCoA+dOOspL/c7ty1eeEVFTE0UTw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
+ "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
"cpu": [
"ia32"
],
@@ -572,9 +588,9 @@
]
},
"node_modules/@rollup/rollup-win32-x64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.8.0.tgz",
- "integrity": "sha512-kb4/auKXkYKqlUYTE8s40FcJIj5soOyRLHKd4ugR0dCq0G2EfcF54eYcfQiGkHzjidZ40daB4ulsFdtqNKZtBg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
+ "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
"cpu": [
"x64"
],
@@ -585,9 +601,9 @@
]
},
"node_modules/@stencil/core": {
- "version": "4.10.0",
- "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
- "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==",
+ "version": "4.12.2",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.2.tgz",
+ "integrity": "sha512-WEMpoqwMV4hY/ab2z9NxRhSeZwuKEugjyn6Vd+qA9xqZh6VNUL27QbP8vCa7IeqD4Zql4JBtKu3lVuBHutWE6w==",
"bin": {
"stencil": "bin/stencil"
},
@@ -596,10 +612,16 @@
"npm": ">=7.10.0"
}
},
+ "node_modules/@types/estree": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+ "dev": true
+ },
"node_modules/@vitejs/plugin-vue": {
- "version": "5.0.3",
- "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.3.tgz",
- "integrity": "sha512-b8S5dVS40rgHdDrw+DQi/xOM9ed+kSRZzfm1T74bMmBDCd8XO87NKlFYInzCtwvtWwXZvo1QxE2OSspTATWrbA==",
+ "version": "5.0.4",
+ "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
+ "integrity": "sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==",
"dev": true,
"engines": {
"node": "^18.0.0 || >=20.0.0"
@@ -610,97 +632,95 @@
}
},
"node_modules/@volar/language-core": {
- "version": "1.11.1",
- "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz",
- "integrity": "sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==",
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-Ew1Iw7/RIRNuDLn60fWJdOLApAlfTVPxbPiSLzc434PReC9kleYtaa//Wo2WlN1oiRqneW0pWQQV0CwYqaimLQ==",
"dev": true,
"dependencies": {
- "@volar/source-map": "1.11.1"
+ "@volar/source-map": "2.2.0-alpha.8"
}
},
"node_modules/@volar/source-map": {
- "version": "1.11.1",
- "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz",
- "integrity": "sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==",
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-E1ZVmXFJ5DU4fWDcWHzi8OLqqReqIDwhXvIMhVdk6+VipfMVv4SkryXu7/rs4GA/GsebcRyJdaSkKBB3OAkIcA==",
"dev": true,
"dependencies": {
- "muggle-string": "^0.3.1"
+ "muggle-string": "^0.4.0"
}
},
"node_modules/@volar/typescript": {
- "version": "1.11.1",
- "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz",
- "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==",
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-RLbRDI+17CiayHZs9HhSzlH0FhLl/+XK6o2qoiw2o2GGKcyD1aDoY6AcMd44acYncTOrqoTNoY6LuCiRyiJiGg==",
"dev": true,
"dependencies": {
- "@volar/language-core": "1.11.1",
+ "@volar/language-core": "2.2.0-alpha.8",
"path-browserify": "^1.0.1"
}
},
"node_modules/@vue/compiler-core": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.15.tgz",
- "integrity": "sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz",
+ "integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==",
"dependencies": {
- "@babel/parser": "^7.23.6",
- "@vue/shared": "3.4.15",
+ "@babel/parser": "^7.23.9",
+ "@vue/shared": "3.4.21",
"entities": "^4.5.0",
"estree-walker": "^2.0.2",
"source-map-js": "^1.0.2"
}
},
"node_modules/@vue/compiler-dom": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.15.tgz",
- "integrity": "sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz",
+ "integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==",
"dependencies": {
- "@vue/compiler-core": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-core": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"node_modules/@vue/compiler-sfc": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.15.tgz",
- "integrity": "sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz",
+ "integrity": "sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==",
"dependencies": {
- "@babel/parser": "^7.23.6",
- "@vue/compiler-core": "3.4.15",
- "@vue/compiler-dom": "3.4.15",
- "@vue/compiler-ssr": "3.4.15",
- "@vue/shared": "3.4.15",
+ "@babel/parser": "^7.23.9",
+ "@vue/compiler-core": "3.4.21",
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/compiler-ssr": "3.4.21",
+ "@vue/shared": "3.4.21",
"estree-walker": "^2.0.2",
- "magic-string": "^0.30.5",
- "postcss": "^8.4.33",
+ "magic-string": "^0.30.7",
+ "postcss": "^8.4.35",
"source-map-js": "^1.0.2"
}
},
"node_modules/@vue/compiler-ssr": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.15.tgz",
- "integrity": "sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz",
+ "integrity": "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==",
"dependencies": {
- "@vue/compiler-dom": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"node_modules/@vue/devtools-api": {
- "version": "6.5.0",
- "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
- "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
+ "version": "6.6.1",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
+ "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
},
"node_modules/@vue/language-core": {
- "version": "1.8.27",
- "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz",
- "integrity": "sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==",
+ "version": "2.0.13",
+ "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.13.tgz",
+ "integrity": "sha512-oQgM+BM66SU5GKtUMLQSQN0bxHFkFpLSSAiY87wVziPaiNQZuKVDt/3yA7GB9PiQw0y/bTNL0bOc0jM/siYjKg==",
"dev": true,
"dependencies": {
- "@volar/language-core": "~1.11.1",
- "@volar/source-map": "~1.11.1",
- "@vue/compiler-dom": "^3.3.0",
- "@vue/shared": "^3.3.0",
+ "@volar/language-core": "2.2.0-alpha.8",
+ "@vue/compiler-dom": "^3.4.0",
+ "@vue/shared": "^3.4.0",
"computeds": "^0.0.1",
"minimatch": "^9.0.3",
- "muggle-string": "^0.3.1",
"path-browserify": "^1.0.1",
"vue-template-compiler": "^2.7.14"
},
@@ -714,48 +734,48 @@
}
},
"node_modules/@vue/reactivity": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.15.tgz",
- "integrity": "sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.21.tgz",
+ "integrity": "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==",
"dependencies": {
- "@vue/shared": "3.4.15"
+ "@vue/shared": "3.4.21"
}
},
"node_modules/@vue/runtime-core": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.15.tgz",
- "integrity": "sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz",
+ "integrity": "sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==",
"dependencies": {
- "@vue/reactivity": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/reactivity": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"node_modules/@vue/runtime-dom": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.15.tgz",
- "integrity": "sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz",
+ "integrity": "sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==",
"dependencies": {
- "@vue/runtime-core": "3.4.15",
- "@vue/shared": "3.4.15",
+ "@vue/runtime-core": "3.4.21",
+ "@vue/shared": "3.4.21",
"csstype": "^3.1.3"
}
},
"node_modules/@vue/server-renderer": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.15.tgz",
- "integrity": "sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.21.tgz",
+ "integrity": "sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==",
"dependencies": {
- "@vue/compiler-ssr": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-ssr": "3.4.21",
+ "@vue/shared": "3.4.21"
},
"peerDependencies": {
- "vue": "3.4.15"
+ "vue": "3.4.21"
}
},
"node_modules/@vue/shared": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.15.tgz",
- "integrity": "sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g=="
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
+ "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
},
"node_modules/balanced-match": {
"version": "1.0.2",
@@ -801,9 +821,9 @@
}
},
"node_modules/esbuild": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.9.tgz",
- "integrity": "sha512-U9CHtKSy+EpPsEBa+/A2gMs/h3ylBC0H0KSqIg7tpztHerLi6nrrcoUJAkNCEPumx8yJ+Byic4BVwHgRbN0TBg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+ "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
"dev": true,
"hasInstallScript": true,
"bin": {
@@ -813,28 +833,29 @@
"node": ">=12"
},
"optionalDependencies": {
- "@esbuild/android-arm": "0.19.9",
- "@esbuild/android-arm64": "0.19.9",
- "@esbuild/android-x64": "0.19.9",
- "@esbuild/darwin-arm64": "0.19.9",
- "@esbuild/darwin-x64": "0.19.9",
- "@esbuild/freebsd-arm64": "0.19.9",
- "@esbuild/freebsd-x64": "0.19.9",
- "@esbuild/linux-arm": "0.19.9",
- "@esbuild/linux-arm64": "0.19.9",
- "@esbuild/linux-ia32": "0.19.9",
- "@esbuild/linux-loong64": "0.19.9",
- "@esbuild/linux-mips64el": "0.19.9",
- "@esbuild/linux-ppc64": "0.19.9",
- "@esbuild/linux-riscv64": "0.19.9",
- "@esbuild/linux-s390x": "0.19.9",
- "@esbuild/linux-x64": "0.19.9",
- "@esbuild/netbsd-x64": "0.19.9",
- "@esbuild/openbsd-x64": "0.19.9",
- "@esbuild/sunos-x64": "0.19.9",
- "@esbuild/win32-arm64": "0.19.9",
- "@esbuild/win32-ia32": "0.19.9",
- "@esbuild/win32-x64": "0.19.9"
+ "@esbuild/aix-ppc64": "0.20.2",
+ "@esbuild/android-arm": "0.20.2",
+ "@esbuild/android-arm64": "0.20.2",
+ "@esbuild/android-x64": "0.20.2",
+ "@esbuild/darwin-arm64": "0.20.2",
+ "@esbuild/darwin-x64": "0.20.2",
+ "@esbuild/freebsd-arm64": "0.20.2",
+ "@esbuild/freebsd-x64": "0.20.2",
+ "@esbuild/linux-arm": "0.20.2",
+ "@esbuild/linux-arm64": "0.20.2",
+ "@esbuild/linux-ia32": "0.20.2",
+ "@esbuild/linux-loong64": "0.20.2",
+ "@esbuild/linux-mips64el": "0.20.2",
+ "@esbuild/linux-ppc64": "0.20.2",
+ "@esbuild/linux-riscv64": "0.20.2",
+ "@esbuild/linux-s390x": "0.20.2",
+ "@esbuild/linux-x64": "0.20.2",
+ "@esbuild/netbsd-x64": "0.20.2",
+ "@esbuild/openbsd-x64": "0.20.2",
+ "@esbuild/sunos-x64": "0.20.2",
+ "@esbuild/win32-arm64": "0.20.2",
+ "@esbuild/win32-ia32": "0.20.2",
+ "@esbuild/win32-x64": "0.20.2"
}
},
"node_modules/estree-walker": {
@@ -886,9 +907,9 @@
}
},
"node_modules/magic-string": {
- "version": "0.30.5",
- "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
- "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+ "version": "0.30.7",
+ "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
+ "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
},
@@ -912,9 +933,9 @@
}
},
"node_modules/muggle-string": {
- "version": "0.3.1",
- "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz",
- "integrity": "sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==",
+ "version": "0.4.1",
+ "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+ "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
"dev": true
},
"node_modules/nanoid": {
@@ -946,9 +967,9 @@
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
},
"node_modules/postcss": {
- "version": "8.4.33",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
- "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
"funding": [
{
"type": "opencollective",
@@ -966,17 +987,20 @@
"dependencies": {
"nanoid": "^3.3.7",
"picocolors": "^1.0.0",
- "source-map-js": "^1.0.2"
+ "source-map-js": "^1.2.0"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/rollup": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.8.0.tgz",
- "integrity": "sha512-NpsklK2fach5CdI+PScmlE5R4Ao/FSWtF7LkoIrHDxPACY/xshNasPsbpG0VVHxUTbf74tJbVT4PrP8JsJ6ZDA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
+ "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
"dev": true,
+ "dependencies": {
+ "@types/estree": "1.0.5"
+ },
"bin": {
"rollup": "dist/bin/rollup"
},
@@ -985,19 +1009,19 @@
"npm": ">=8.0.0"
},
"optionalDependencies": {
- "@rollup/rollup-android-arm-eabi": "4.8.0",
- "@rollup/rollup-android-arm64": "4.8.0",
- "@rollup/rollup-darwin-arm64": "4.8.0",
- "@rollup/rollup-darwin-x64": "4.8.0",
- "@rollup/rollup-linux-arm-gnueabihf": "4.8.0",
- "@rollup/rollup-linux-arm64-gnu": "4.8.0",
- "@rollup/rollup-linux-arm64-musl": "4.8.0",
- "@rollup/rollup-linux-riscv64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-musl": "4.8.0",
- "@rollup/rollup-win32-arm64-msvc": "4.8.0",
- "@rollup/rollup-win32-ia32-msvc": "4.8.0",
- "@rollup/rollup-win32-x64-msvc": "4.8.0",
+ "@rollup/rollup-android-arm-eabi": "4.13.0",
+ "@rollup/rollup-android-arm64": "4.13.0",
+ "@rollup/rollup-darwin-arm64": "4.13.0",
+ "@rollup/rollup-darwin-x64": "4.13.0",
+ "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
+ "@rollup/rollup-linux-arm64-gnu": "4.13.0",
+ "@rollup/rollup-linux-arm64-musl": "4.13.0",
+ "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-musl": "4.13.0",
+ "@rollup/rollup-win32-arm64-msvc": "4.13.0",
+ "@rollup/rollup-win32-ia32-msvc": "4.13.0",
+ "@rollup/rollup-win32-x64-msvc": "4.13.0",
"fsevents": "~2.3.2"
}
},
@@ -1017,9 +1041,9 @@
}
},
"node_modules/source-map-js": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
- "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
"engines": {
"node": ">=0.10.0"
}
@@ -1043,14 +1067,14 @@
}
},
"node_modules/vite": {
- "version": "5.0.12",
- "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
- "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
+ "version": "5.2.8",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+ "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
"dev": true,
"dependencies": {
- "esbuild": "^0.19.3",
- "postcss": "^8.4.32",
- "rollup": "^4.2.0"
+ "esbuild": "^0.20.1",
+ "postcss": "^8.4.38",
+ "rollup": "^4.13.0"
},
"bin": {
"vite": "bin/vite.js"
@@ -1098,15 +1122,15 @@
}
},
"node_modules/vue": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.15.tgz",
- "integrity": "sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz",
+ "integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==",
"dependencies": {
- "@vue/compiler-dom": "3.4.15",
- "@vue/compiler-sfc": "3.4.15",
- "@vue/runtime-dom": "3.4.15",
- "@vue/server-renderer": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/compiler-sfc": "3.4.21",
+ "@vue/runtime-dom": "3.4.21",
+ "@vue/server-renderer": "3.4.21",
+ "@vue/shared": "3.4.21"
},
"peerDependencies": {
"typescript": "*"
@@ -1118,11 +1142,11 @@
}
},
"node_modules/vue-router": {
- "version": "4.2.5",
- "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
- "integrity": "sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==",
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
+ "integrity": "sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==",
"dependencies": {
- "@vue/devtools-api": "^6.5.0"
+ "@vue/devtools-api": "^6.5.1"
},
"funding": {
"url": "https://github.com/sponsors/posva"
@@ -1142,13 +1166,13 @@
}
},
"node_modules/vue-tsc": {
- "version": "1.8.27",
- "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz",
- "integrity": "sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==",
+ "version": "2.0.13",
+ "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.13.tgz",
+ "integrity": "sha512-a3nL3FvguCWVJUQW/jFrUxdeUtiEkbZoQjidqvMeBK//tuE2w6NWQAbdrEpY2+6nSa4kZoKZp8TZUMtHpjt4mQ==",
"dev": true,
"dependencies": {
- "@volar/typescript": "~1.11.1",
- "@vue/language-core": "1.8.27",
+ "@volar/typescript": "2.2.0-alpha.8",
+ "@vue/language-core": "2.0.13",
"semver": "^7.5.4"
},
"bin": {
@@ -1167,189 +1191,196 @@
},
"dependencies": {
"@babel/parser": {
- "version": "7.23.6",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
- "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ=="
+ "version": "7.23.9",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
+ "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA=="
+ },
+ "@esbuild/aix-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+ "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+ "dev": true,
+ "optional": true
},
"@esbuild/android-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz",
- "integrity": "sha512-jkYjjq7SdsWuNI6b5quymW0oC83NN5FdRPuCbs9HZ02mfVdAP8B8eeqLSYU3gb6OJEaY5CQabtTFbqBf26H3GA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+ "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
"dev": true,
"optional": true
},
"@esbuild/android-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.9.tgz",
- "integrity": "sha512-q4cR+6ZD0938R19MyEW3jEsMzbb/1rulLXiNAJQADD/XYp7pT+rOS5JGxvpRW8dFDEfjW4wLgC/3FXIw4zYglQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+ "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
"dev": true,
"optional": true
},
"@esbuild/android-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.9.tgz",
- "integrity": "sha512-KOqoPntWAH6ZxDwx1D6mRntIgZh9KodzgNOy5Ebt9ghzffOk9X2c1sPwtM9P+0eXbefnDhqYfkh5PLP5ULtWFA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+ "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
"dev": true,
"optional": true
},
"@esbuild/darwin-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.9.tgz",
- "integrity": "sha512-KBJ9S0AFyLVx2E5D8W0vExqRW01WqRtczUZ8NRu+Pi+87opZn5tL4Y0xT0mA4FtHctd0ZgwNoN639fUUGlNIWw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+ "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
"dev": true,
"optional": true
},
"@esbuild/darwin-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.9.tgz",
- "integrity": "sha512-vE0VotmNTQaTdX0Q9dOHmMTao6ObjyPm58CHZr1UK7qpNleQyxlFlNCaHsHx6Uqv86VgPmR4o2wdNq3dP1qyDQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+ "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
"dev": true,
"optional": true
},
"@esbuild/freebsd-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.9.tgz",
- "integrity": "sha512-uFQyd/o1IjiEk3rUHSwUKkqZwqdvuD8GevWF065eqgYfexcVkxh+IJgwTaGZVu59XczZGcN/YMh9uF1fWD8j1g==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+ "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
"dev": true,
"optional": true
},
"@esbuild/freebsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.9.tgz",
- "integrity": "sha512-WMLgWAtkdTbTu1AWacY7uoj/YtHthgqrqhf1OaEWnZb7PQgpt8eaA/F3LkV0E6K/Lc0cUr/uaVP/49iE4M4asA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+ "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
"dev": true,
"optional": true
},
"@esbuild/linux-arm": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.9.tgz",
- "integrity": "sha512-C/ChPohUYoyUaqn1h17m/6yt6OB14hbXvT8EgM1ZWaiiTYz7nWZR0SYmMnB5BzQA4GXl3BgBO1l8MYqL/He3qw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+ "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
"dev": true,
"optional": true
},
"@esbuild/linux-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.9.tgz",
- "integrity": "sha512-PiPblfe1BjK7WDAKR1Cr9O7VVPqVNpwFcPWgfn4xu0eMemzRp442hXyzF/fSwgrufI66FpHOEJk0yYdPInsmyQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+ "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
"dev": true,
"optional": true
},
"@esbuild/linux-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.9.tgz",
- "integrity": "sha512-f37i/0zE0MjDxijkPSQw1CO/7C27Eojqb+r3BbHVxMLkj8GCa78TrBZzvPyA/FNLUMzP3eyHCVkAopkKVja+6Q==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+ "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
"dev": true,
"optional": true
},
"@esbuild/linux-loong64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.9.tgz",
- "integrity": "sha512-t6mN147pUIf3t6wUt3FeumoOTPfmv9Cc6DQlsVBpB7eCpLOqQDyWBP1ymXn1lDw4fNUSb/gBcKAmvTP49oIkaA==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+ "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
"dev": true,
"optional": true
},
"@esbuild/linux-mips64el": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.9.tgz",
- "integrity": "sha512-jg9fujJTNTQBuDXdmAg1eeJUL4Jds7BklOTkkH80ZgQIoCTdQrDaHYgbFZyeTq8zbY+axgptncko3v9p5hLZtw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+ "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
"dev": true,
"optional": true
},
"@esbuild/linux-ppc64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.9.tgz",
- "integrity": "sha512-tkV0xUX0pUUgY4ha7z5BbDS85uI7ABw3V1d0RNTii7E9lbmV8Z37Pup2tsLV46SQWzjOeyDi1Q7Wx2+QM8WaCQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+ "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
"dev": true,
"optional": true
},
"@esbuild/linux-riscv64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.9.tgz",
- "integrity": "sha512-DfLp8dj91cufgPZDXr9p3FoR++m3ZJ6uIXsXrIvJdOjXVREtXuQCjfMfvmc3LScAVmLjcfloyVtpn43D56JFHg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+ "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
"dev": true,
"optional": true
},
"@esbuild/linux-s390x": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.9.tgz",
- "integrity": "sha512-zHbglfEdC88KMgCWpOl/zc6dDYJvWGLiUtmPRsr1OgCViu3z5GncvNVdf+6/56O2Ca8jUU+t1BW261V6kp8qdw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+ "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
"dev": true,
"optional": true
},
"@esbuild/linux-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.9.tgz",
- "integrity": "sha512-JUjpystGFFmNrEHQnIVG8hKwvA2DN5o7RqiO1CVX8EN/F/gkCjkUMgVn6hzScpwnJtl2mPR6I9XV1oW8k9O+0A==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+ "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
"dev": true,
"optional": true
},
"@esbuild/netbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.9.tgz",
- "integrity": "sha512-GThgZPAwOBOsheA2RUlW5UeroRfESwMq/guy8uEe3wJlAOjpOXuSevLRd70NZ37ZrpO6RHGHgEHvPg1h3S1Jug==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
"dev": true,
"optional": true
},
"@esbuild/openbsd-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.9.tgz",
- "integrity": "sha512-Ki6PlzppaFVbLnD8PtlVQfsYw4S9n3eQl87cqgeIw+O3sRr9IghpfSKY62mggdt1yCSZ8QWvTZ9jo9fjDSg9uw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
"dev": true,
"optional": true
},
"@esbuild/sunos-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.9.tgz",
- "integrity": "sha512-MLHj7k9hWh4y1ddkBpvRj2b9NCBhfgBt3VpWbHQnXRedVun/hC7sIyTGDGTfsGuXo4ebik2+3ShjcPbhtFwWDw==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+ "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
"dev": true,
"optional": true
},
"@esbuild/win32-arm64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.9.tgz",
- "integrity": "sha512-GQoa6OrQ8G08guMFgeXPH7yE/8Dt0IfOGWJSfSH4uafwdC7rWwrfE6P9N8AtPGIjUzdo2+7bN8Xo3qC578olhg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+ "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
"dev": true,
"optional": true
},
"@esbuild/win32-ia32": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.9.tgz",
- "integrity": "sha512-UOozV7Ntykvr5tSOlGCrqU3NBr3d8JqPes0QWN2WOXfvkWVGRajC+Ym0/Wj88fUgecUCLDdJPDF0Nna2UK3Qtg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+ "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
"dev": true,
"optional": true
},
"@esbuild/win32-x64": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.9.tgz",
- "integrity": "sha512-oxoQgglOP7RH6iasDrhY+R/3cHrfwIDvRlT4CGChflq6twk8iENeVvMJjmvBb94Ik1Z+93iGO27err7w6l54GQ==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+ "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
"dev": true,
"optional": true
},
"@ionic/core": {
- "version": "7.6.6",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
- "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
+ "version": "7.8.4",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.8.4.tgz",
+ "integrity": "sha512-GiQM3Gb1kjaxQyDTQfXd54p/a8cK+ccaYKH30pRpzFMborqCZwhcCUQWV1zNAUuFI8YkC5CWTi6bdHyiYuxw4w==",
"requires": {
- "@stencil/core": "^4.10.0",
+ "@stencil/core": "^4.12.2",
"ionicons": "^7.2.2",
"tslib": "^2.1.0"
}
},
"@ionic/vue": {
- "version": "7.6.6",
- "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.6.tgz",
- "integrity": "sha512-Ct992mndUmyTKq2vBFX/3gFcyNW/QKScYydAvG0Jtl9fPHrMZ7fYj+Hk1OEuLQDbsBMH3gUXjUV0OV5pYABsEA==",
+ "version": "7.8.4",
+ "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.8.4.tgz",
+ "integrity": "sha512-x5qRvGo9OSjnROANbicTR1vDIFLSMo2BWSzUCbpLfp3NLbLfgdRfWLFJMbSlI+2RLhZ6d7iACCjSzoayD255cw==",
"requires": {
- "@ionic/core": "7.6.6",
+ "@ionic/core": "7.8.4",
"ionicons": "^7.0.0"
}
},
"@ionic/vue-router": {
- "version": "7.6.6",
- "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.6.6.tgz",
- "integrity": "sha512-5iJVxEeRTWyBgA6RwpZhR9LWfAOUbhrTsnD00wsM5c78pg70Hxoz613/BelMHtirKiOQ+MBZFSxX6jfjTEjBig==",
+ "version": "7.8.4",
+ "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.8.4.tgz",
+ "integrity": "sha512-cXj+cd5t4S0ChatJ5r4Y4isuexxezuqz3+UWNJN4+rfN0zceIfeOrr741bNo2I+jTE8jXJowIA3q+kW0bY5UTQ==",
"requires": {
- "@ionic/vue": "7.6.6"
+ "@ionic/vue": "7.8.4"
}
},
"@jridgewell/sourcemap-codec": {
@@ -1358,244 +1389,248 @@
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
},
"@rollup/rollup-android-arm-eabi": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.8.0.tgz",
- "integrity": "sha512-zdTObFRoNENrdPpnTNnhOljYIcOX7aI7+7wyrSpPFFIOf/nRdedE6IYsjaBE7tjukphh1tMTojgJ7p3lKY8x6Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
+ "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
"dev": true,
"optional": true
},
"@rollup/rollup-android-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.8.0.tgz",
- "integrity": "sha512-aiItwP48BiGpMFS9Znjo/xCNQVwTQVcRKkFKsO81m8exrGjHkCBDvm9PHay2kpa8RPnZzzKcD1iQ9KaLY4fPQQ==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
+ "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
"dev": true,
"optional": true
},
"@rollup/rollup-darwin-arm64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.8.0.tgz",
- "integrity": "sha512-zhNIS+L4ZYkYQUjIQUR6Zl0RXhbbA0huvNIWjmPc2SL0cB1h5Djkcy+RZ3/Bwszfb6vgwUvcVJYD6e6Zkpsi8g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
+ "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
"dev": true,
"optional": true
},
"@rollup/rollup-darwin-x64": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.8.0.tgz",
- "integrity": "sha512-A/FAHFRNQYrELrb/JHncRWzTTXB2ticiRFztP4ggIUAfa9Up1qfW8aG2w/mN9jNiZ+HB0t0u0jpJgFXG6BfRTA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
+ "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
"dev": true,
"optional": true
},
"@rollup/rollup-linux-arm-gnueabihf": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.8.0.tgz",
- "integrity": "sha512-JsidBnh3p2IJJA4/2xOF2puAYqbaczB3elZDT0qHxn362EIoIkq7hrR43Xa8RisgI6/WPfvb2umbGsuvf7E37A==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
+ "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
"dev": true,
"optional": true
},
"@rollup/rollup-linux-arm64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.8.0.tgz",
- "integrity": "sha512-hBNCnqw3EVCkaPB0Oqd24bv8SklETptQWcJz06kb9OtiShn9jK1VuTgi7o4zPSt6rNGWQOTDEAccbk0OqJmS+g==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
"dev": true,
"optional": true
},
"@rollup/rollup-linux-arm64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.8.0.tgz",
- "integrity": "sha512-Fw9ChYfJPdltvi9ALJ9wzdCdxGw4wtq4t1qY028b2O7GwB5qLNSGtqMsAel1lfWTZvf4b6/+4HKp0GlSYg0ahA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
+ "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
"dev": true,
"optional": true
},
"@rollup/rollup-linux-riscv64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.8.0.tgz",
- "integrity": "sha512-BH5xIh7tOzS9yBi8dFrCTG8Z6iNIGWGltd3IpTSKp6+pNWWO6qy8eKoRxOtwFbMrid5NZaidLYN6rHh9aB8bEw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
"dev": true,
"optional": true
},
"@rollup/rollup-linux-x64-gnu": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.8.0.tgz",
- "integrity": "sha512-PmvAj8k6EuWiyLbkNpd6BLv5XeYFpqWuRvRNRl80xVfpGXK/z6KYXmAgbI4ogz7uFiJxCnYcqyvZVD0dgFog7Q==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
+ "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
"dev": true,
"optional": true
},
"@rollup/rollup-linux-x64-musl": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.8.0.tgz",
- "integrity": "sha512-mdxnlW2QUzXwY+95TuxZ+CurrhgrPAMveDWI97EQlA9bfhR8tw3Pt7SUlc/eSlCNxlWktpmT//EAA8UfCHOyXg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
+ "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
"dev": true,
"optional": true
},
"@rollup/rollup-win32-arm64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.8.0.tgz",
- "integrity": "sha512-ge7saUz38aesM4MA7Cad8CHo0Fyd1+qTaqoIo+Jtk+ipBi4ATSrHWov9/S4u5pbEQmLjgUjB7BJt+MiKG2kzmA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
+ "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
"dev": true,
"optional": true
},
"@rollup/rollup-win32-ia32-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.8.0.tgz",
- "integrity": "sha512-p9E3PZlzurhlsN5h9g7zIP1DnqKXJe8ZUkFwAazqSvHuWfihlIISPxG9hCHCoA+dOOspL/c7ty1eeEVFTE0UTw==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
+ "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
"dev": true,
"optional": true
},
"@rollup/rollup-win32-x64-msvc": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.8.0.tgz",
- "integrity": "sha512-kb4/auKXkYKqlUYTE8s40FcJIj5soOyRLHKd4ugR0dCq0G2EfcF54eYcfQiGkHzjidZ40daB4ulsFdtqNKZtBg==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
+ "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
"dev": true,
"optional": true
},
"@stencil/core": {
- "version": "4.10.0",
- "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
- "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w=="
+ "version": "4.12.2",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.2.tgz",
+ "integrity": "sha512-WEMpoqwMV4hY/ab2z9NxRhSeZwuKEugjyn6Vd+qA9xqZh6VNUL27QbP8vCa7IeqD4Zql4JBtKu3lVuBHutWE6w=="
+ },
+ "@types/estree": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+ "dev": true
},
"@vitejs/plugin-vue": {
- "version": "5.0.3",
- "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.3.tgz",
- "integrity": "sha512-b8S5dVS40rgHdDrw+DQi/xOM9ed+kSRZzfm1T74bMmBDCd8XO87NKlFYInzCtwvtWwXZvo1QxE2OSspTATWrbA==",
+ "version": "5.0.4",
+ "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
+ "integrity": "sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==",
"dev": true,
"requires": {}
},
"@volar/language-core": {
- "version": "1.11.1",
- "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz",
- "integrity": "sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==",
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-Ew1Iw7/RIRNuDLn60fWJdOLApAlfTVPxbPiSLzc434PReC9kleYtaa//Wo2WlN1oiRqneW0pWQQV0CwYqaimLQ==",
"dev": true,
"requires": {
- "@volar/source-map": "1.11.1"
+ "@volar/source-map": "2.2.0-alpha.8"
}
},
"@volar/source-map": {
- "version": "1.11.1",
- "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz",
- "integrity": "sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==",
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-E1ZVmXFJ5DU4fWDcWHzi8OLqqReqIDwhXvIMhVdk6+VipfMVv4SkryXu7/rs4GA/GsebcRyJdaSkKBB3OAkIcA==",
"dev": true,
"requires": {
- "muggle-string": "^0.3.1"
+ "muggle-string": "^0.4.0"
}
},
"@volar/typescript": {
- "version": "1.11.1",
- "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz",
- "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==",
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-RLbRDI+17CiayHZs9HhSzlH0FhLl/+XK6o2qoiw2o2GGKcyD1aDoY6AcMd44acYncTOrqoTNoY6LuCiRyiJiGg==",
"dev": true,
"requires": {
- "@volar/language-core": "1.11.1",
+ "@volar/language-core": "2.2.0-alpha.8",
"path-browserify": "^1.0.1"
}
},
"@vue/compiler-core": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.15.tgz",
- "integrity": "sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz",
+ "integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==",
"requires": {
- "@babel/parser": "^7.23.6",
- "@vue/shared": "3.4.15",
+ "@babel/parser": "^7.23.9",
+ "@vue/shared": "3.4.21",
"entities": "^4.5.0",
"estree-walker": "^2.0.2",
"source-map-js": "^1.0.2"
}
},
"@vue/compiler-dom": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.15.tgz",
- "integrity": "sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz",
+ "integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==",
"requires": {
- "@vue/compiler-core": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-core": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"@vue/compiler-sfc": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.15.tgz",
- "integrity": "sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz",
+ "integrity": "sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==",
"requires": {
- "@babel/parser": "^7.23.6",
- "@vue/compiler-core": "3.4.15",
- "@vue/compiler-dom": "3.4.15",
- "@vue/compiler-ssr": "3.4.15",
- "@vue/shared": "3.4.15",
+ "@babel/parser": "^7.23.9",
+ "@vue/compiler-core": "3.4.21",
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/compiler-ssr": "3.4.21",
+ "@vue/shared": "3.4.21",
"estree-walker": "^2.0.2",
- "magic-string": "^0.30.5",
- "postcss": "^8.4.33",
+ "magic-string": "^0.30.7",
+ "postcss": "^8.4.35",
"source-map-js": "^1.0.2"
}
},
"@vue/compiler-ssr": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.15.tgz",
- "integrity": "sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz",
+ "integrity": "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==",
"requires": {
- "@vue/compiler-dom": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"@vue/devtools-api": {
- "version": "6.5.0",
- "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
- "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
+ "version": "6.6.1",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
+ "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
},
"@vue/language-core": {
- "version": "1.8.27",
- "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz",
- "integrity": "sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==",
+ "version": "2.0.13",
+ "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.13.tgz",
+ "integrity": "sha512-oQgM+BM66SU5GKtUMLQSQN0bxHFkFpLSSAiY87wVziPaiNQZuKVDt/3yA7GB9PiQw0y/bTNL0bOc0jM/siYjKg==",
"dev": true,
"requires": {
- "@volar/language-core": "~1.11.1",
- "@volar/source-map": "~1.11.1",
- "@vue/compiler-dom": "^3.3.0",
- "@vue/shared": "^3.3.0",
+ "@volar/language-core": "2.2.0-alpha.8",
+ "@vue/compiler-dom": "^3.4.0",
+ "@vue/shared": "^3.4.0",
"computeds": "^0.0.1",
"minimatch": "^9.0.3",
- "muggle-string": "^0.3.1",
"path-browserify": "^1.0.1",
"vue-template-compiler": "^2.7.14"
}
},
"@vue/reactivity": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.15.tgz",
- "integrity": "sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.21.tgz",
+ "integrity": "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==",
"requires": {
- "@vue/shared": "3.4.15"
+ "@vue/shared": "3.4.21"
}
},
"@vue/runtime-core": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.15.tgz",
- "integrity": "sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz",
+ "integrity": "sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==",
"requires": {
- "@vue/reactivity": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/reactivity": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"@vue/runtime-dom": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.15.tgz",
- "integrity": "sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz",
+ "integrity": "sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==",
"requires": {
- "@vue/runtime-core": "3.4.15",
- "@vue/shared": "3.4.15",
+ "@vue/runtime-core": "3.4.21",
+ "@vue/shared": "3.4.21",
"csstype": "^3.1.3"
}
},
"@vue/server-renderer": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.15.tgz",
- "integrity": "sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.21.tgz",
+ "integrity": "sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==",
"requires": {
- "@vue/compiler-ssr": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-ssr": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"@vue/shared": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.15.tgz",
- "integrity": "sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g=="
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
+ "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
},
"balanced-match": {
"version": "1.0.2",
@@ -1635,33 +1670,34 @@
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
},
"esbuild": {
- "version": "0.19.9",
- "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.9.tgz",
- "integrity": "sha512-U9CHtKSy+EpPsEBa+/A2gMs/h3ylBC0H0KSqIg7tpztHerLi6nrrcoUJAkNCEPumx8yJ+Byic4BVwHgRbN0TBg==",
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+ "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
"dev": true,
"requires": {
- "@esbuild/android-arm": "0.19.9",
- "@esbuild/android-arm64": "0.19.9",
- "@esbuild/android-x64": "0.19.9",
- "@esbuild/darwin-arm64": "0.19.9",
- "@esbuild/darwin-x64": "0.19.9",
- "@esbuild/freebsd-arm64": "0.19.9",
- "@esbuild/freebsd-x64": "0.19.9",
- "@esbuild/linux-arm": "0.19.9",
- "@esbuild/linux-arm64": "0.19.9",
- "@esbuild/linux-ia32": "0.19.9",
- "@esbuild/linux-loong64": "0.19.9",
- "@esbuild/linux-mips64el": "0.19.9",
- "@esbuild/linux-ppc64": "0.19.9",
- "@esbuild/linux-riscv64": "0.19.9",
- "@esbuild/linux-s390x": "0.19.9",
- "@esbuild/linux-x64": "0.19.9",
- "@esbuild/netbsd-x64": "0.19.9",
- "@esbuild/openbsd-x64": "0.19.9",
- "@esbuild/sunos-x64": "0.19.9",
- "@esbuild/win32-arm64": "0.19.9",
- "@esbuild/win32-ia32": "0.19.9",
- "@esbuild/win32-x64": "0.19.9"
+ "@esbuild/aix-ppc64": "0.20.2",
+ "@esbuild/android-arm": "0.20.2",
+ "@esbuild/android-arm64": "0.20.2",
+ "@esbuild/android-x64": "0.20.2",
+ "@esbuild/darwin-arm64": "0.20.2",
+ "@esbuild/darwin-x64": "0.20.2",
+ "@esbuild/freebsd-arm64": "0.20.2",
+ "@esbuild/freebsd-x64": "0.20.2",
+ "@esbuild/linux-arm": "0.20.2",
+ "@esbuild/linux-arm64": "0.20.2",
+ "@esbuild/linux-ia32": "0.20.2",
+ "@esbuild/linux-loong64": "0.20.2",
+ "@esbuild/linux-mips64el": "0.20.2",
+ "@esbuild/linux-ppc64": "0.20.2",
+ "@esbuild/linux-riscv64": "0.20.2",
+ "@esbuild/linux-s390x": "0.20.2",
+ "@esbuild/linux-x64": "0.20.2",
+ "@esbuild/netbsd-x64": "0.20.2",
+ "@esbuild/openbsd-x64": "0.20.2",
+ "@esbuild/sunos-x64": "0.20.2",
+ "@esbuild/win32-arm64": "0.20.2",
+ "@esbuild/win32-ia32": "0.20.2",
+ "@esbuild/win32-x64": "0.20.2"
}
},
"estree-walker": {
@@ -1700,9 +1736,9 @@
}
},
"magic-string": {
- "version": "0.30.5",
- "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
- "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+ "version": "0.30.7",
+ "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
+ "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
"requires": {
"@jridgewell/sourcemap-codec": "^1.4.15"
}
@@ -1717,9 +1753,9 @@
}
},
"muggle-string": {
- "version": "0.3.1",
- "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz",
- "integrity": "sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==",
+ "version": "0.4.1",
+ "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+ "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
"dev": true
},
"nanoid": {
@@ -1739,34 +1775,35 @@
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
},
"postcss": {
- "version": "8.4.33",
- "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
- "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
"requires": {
"nanoid": "^3.3.7",
"picocolors": "^1.0.0",
- "source-map-js": "^1.0.2"
+ "source-map-js": "^1.2.0"
}
},
"rollup": {
- "version": "4.8.0",
- "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.8.0.tgz",
- "integrity": "sha512-NpsklK2fach5CdI+PScmlE5R4Ao/FSWtF7LkoIrHDxPACY/xshNasPsbpG0VVHxUTbf74tJbVT4PrP8JsJ6ZDA==",
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
+ "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
"dev": true,
"requires": {
- "@rollup/rollup-android-arm-eabi": "4.8.0",
- "@rollup/rollup-android-arm64": "4.8.0",
- "@rollup/rollup-darwin-arm64": "4.8.0",
- "@rollup/rollup-darwin-x64": "4.8.0",
- "@rollup/rollup-linux-arm-gnueabihf": "4.8.0",
- "@rollup/rollup-linux-arm64-gnu": "4.8.0",
- "@rollup/rollup-linux-arm64-musl": "4.8.0",
- "@rollup/rollup-linux-riscv64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-gnu": "4.8.0",
- "@rollup/rollup-linux-x64-musl": "4.8.0",
- "@rollup/rollup-win32-arm64-msvc": "4.8.0",
- "@rollup/rollup-win32-ia32-msvc": "4.8.0",
- "@rollup/rollup-win32-x64-msvc": "4.8.0",
+ "@rollup/rollup-android-arm-eabi": "4.13.0",
+ "@rollup/rollup-android-arm64": "4.13.0",
+ "@rollup/rollup-darwin-arm64": "4.13.0",
+ "@rollup/rollup-darwin-x64": "4.13.0",
+ "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
+ "@rollup/rollup-linux-arm64-gnu": "4.13.0",
+ "@rollup/rollup-linux-arm64-musl": "4.13.0",
+ "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-musl": "4.13.0",
+ "@rollup/rollup-win32-arm64-msvc": "4.13.0",
+ "@rollup/rollup-win32-ia32-msvc": "4.13.0",
+ "@rollup/rollup-win32-x64-msvc": "4.13.0",
+ "@types/estree": "1.0.5",
"fsevents": "~2.3.2"
}
},
@@ -1780,9 +1817,9 @@
}
},
"source-map-js": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
- "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
},
"tslib": {
"version": "2.6.2",
@@ -1796,35 +1833,35 @@
"devOptional": true
},
"vite": {
- "version": "5.0.12",
- "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
- "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
+ "version": "5.2.8",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+ "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
"dev": true,
"requires": {
- "esbuild": "^0.19.3",
+ "esbuild": "^0.20.1",
"fsevents": "~2.3.3",
- "postcss": "^8.4.32",
- "rollup": "^4.2.0"
+ "postcss": "^8.4.38",
+ "rollup": "^4.13.0"
}
},
"vue": {
- "version": "3.4.15",
- "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.15.tgz",
- "integrity": "sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==",
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz",
+ "integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==",
"requires": {
- "@vue/compiler-dom": "3.4.15",
- "@vue/compiler-sfc": "3.4.15",
- "@vue/runtime-dom": "3.4.15",
- "@vue/server-renderer": "3.4.15",
- "@vue/shared": "3.4.15"
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/compiler-sfc": "3.4.21",
+ "@vue/runtime-dom": "3.4.21",
+ "@vue/server-renderer": "3.4.21",
+ "@vue/shared": "3.4.21"
}
},
"vue-router": {
- "version": "4.2.5",
- "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
- "integrity": "sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==",
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
+ "integrity": "sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==",
"requires": {
- "@vue/devtools-api": "^6.5.0"
+ "@vue/devtools-api": "^6.5.1"
}
},
"vue-template-compiler": {
@@ -1838,13 +1875,13 @@
}
},
"vue-tsc": {
- "version": "1.8.27",
- "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz",
- "integrity": "sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==",
+ "version": "2.0.13",
+ "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.13.tgz",
+ "integrity": "sha512-a3nL3FvguCWVJUQW/jFrUxdeUtiEkbZoQjidqvMeBK//tuE2w6NWQAbdrEpY2+6nSa4kZoKZp8TZUMtHpjt4mQ==",
"dev": true,
"requires": {
- "@volar/typescript": "~1.11.1",
- "@vue/language-core": "1.8.27",
+ "@volar/typescript": "2.2.0-alpha.8",
+ "@vue/language-core": "2.0.13",
"semver": "^7.5.4"
}
},
diff --git a/static/code/stackblitz/v7/vue/package.json b/static/code/stackblitz/v7/vue/package.json
index 8e53a68b364..c12745e271f 100644
--- a/static/code/stackblitz/v7/vue/package.json
+++ b/static/code/stackblitz/v7/vue/package.json
@@ -11,12 +11,12 @@
"@ionic/vue": "^7.4.0",
"@ionic/vue-router": "^7.4.0",
"vue": "^3.2.25",
- "vue-router": "4.2.5"
+ "vue-router": "4.3.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.0",
"typescript": "^4.5.4",
"vite": "^5.0.0",
- "vue-tsc": "^1.0.0"
+ "vue-tsc": "^2.0.0"
}
}
diff --git a/static/code/stackblitz/v8/angular/angular.json b/static/code/stackblitz/v8/angular/angular.json
new file mode 100644
index 00000000000..811624f69b5
--- /dev/null
+++ b/static/code/stackblitz/v8/angular/angular.json
@@ -0,0 +1,118 @@
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "version": 1,
+ "newProjectRoot": "projects",
+ "projects": {
+ "app": {
+ "root": "",
+ "sourceRoot": "src",
+ "projectType": "application",
+ "prefix": "app",
+ "schematics": {},
+ "architect": {
+ "build": {
+ "builder": "@angular-devkit/build-angular:browser",
+ "options": {
+ "outputPath": "dist",
+ "index": "src/index.html",
+ "main": "src/main.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "src/tsconfig.app.json",
+ "assets": ["src/favicon.ico", "src/assets"],
+ "styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"],
+ "scripts": []
+ },
+ "configurations": {
+ "production": {
+ "fileReplacements": [
+ {
+ "replace": "src/environments/environment.ts",
+ "with": "src/environments/environment.prod.ts"
+ }
+ ],
+ "optimization": true,
+ "outputHashing": "all",
+ "sourceMap": false,
+ "extractCss": true,
+ "namedChunks": false,
+ "aot": true,
+ "extractLicenses": true,
+ "vendorChunk": false,
+ "buildOptimizer": true,
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "2mb",
+ "maximumError": "5mb"
+ }
+ ]
+ }
+ }
+ },
+ "serve": {
+ "builder": "@angular-devkit/build-angular:dev-server",
+ "options": {
+ "browserTarget": "app:build"
+ },
+ "configurations": {
+ "production": {
+ "browserTarget": "app:build:production"
+ }
+ }
+ },
+ "extract-i18n": {
+ "builder": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "browserTarget": "app:build"
+ }
+ },
+ "test": {
+ "builder": "@angular-devkit/build-angular:karma",
+ "options": {
+ "main": "src/test.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "src/tsconfig.spec.json",
+ "karmaConfig": "src/karma.conf.js",
+ "styles": ["src/styles.css"],
+ "scripts": [],
+ "assets": ["src/favicon.ico", "src/assets"]
+ }
+ },
+ "lint": {
+ "builder": "@angular-devkit/build-angular:tslint",
+ "options": {
+ "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
+ "exclude": ["**/node_modules/**"]
+ }
+ }
+ }
+ },
+ "app-e2e": {
+ "root": "e2e/",
+ "projectType": "application",
+ "prefix": "",
+ "architect": {
+ "e2e": {
+ "builder": "@angular-devkit/build-angular:protractor",
+ "options": {
+ "protractorConfig": "e2e/protractor.conf.js",
+ "devServerTarget": "app:serve"
+ },
+ "configurations": {
+ "production": {
+ "devServerTarget": "app:serve:production"
+ }
+ }
+ },
+ "lint": {
+ "builder": "@angular-devkit/build-angular:tslint",
+ "options": {
+ "tsConfig": "e2e/tsconfig.e2e.json",
+ "exclude": ["**/node_modules/**"]
+ }
+ }
+ }
+ }
+ },
+ "defaultProject": "app"
+}
diff --git a/static/code/stackblitz/v8/angular/app.component.css b/static/code/stackblitz/v8/angular/app.component.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/static/code/stackblitz/v8/angular/app.component.html b/static/code/stackblitz/v8/angular/app.component.html
new file mode 100644
index 00000000000..1031647a0e0
--- /dev/null
+++ b/static/code/stackblitz/v8/angular/app.component.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/static/code/stackblitz/v8/angular/app.component.ts b/static/code/stackblitz/v8/angular/app.component.ts
new file mode 100644
index 00000000000..ed440084f8f
--- /dev/null
+++ b/static/code/stackblitz/v8/angular/app.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: 'app.component.html',
+ styleUrls: ['app.component.css']
+})
+export class AppComponent { }
diff --git a/static/code/stackblitz/v8/angular/app.component.withContent.html b/static/code/stackblitz/v8/angular/app.component.withContent.html
new file mode 100644
index 00000000000..96ebf597215
--- /dev/null
+++ b/static/code/stackblitz/v8/angular/app.component.withContent.html
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/static/code/stackblitz/v8/angular/app.module.ts b/static/code/stackblitz/v8/angular/app.module.ts
new file mode 100644
index 00000000000..7f6894ce6af
--- /dev/null
+++ b/static/code/stackblitz/v8/angular/app.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+@NgModule({
+ imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+ declarations: [AppComponent, ExampleComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule { }
diff --git a/static/code/stackblitz/v8/angular/example.component.ts b/static/code/stackblitz/v8/angular/example.component.ts
new file mode 100644
index 00000000000..6b67261e0b3
--- /dev/null
+++ b/static/code/stackblitz/v8/angular/example.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css']
+})
+export class ExampleComponent { }
diff --git a/static/code/stackblitz/v8/angular/global.css b/static/code/stackblitz/v8/angular/global.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/static/code/stackblitz/v8/angular/main.ts b/static/code/stackblitz/v8/angular/main.ts
new file mode 100644
index 00000000000..518110491b2
--- /dev/null
+++ b/static/code/stackblitz/v8/angular/main.ts
@@ -0,0 +1,7 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic()
+ .bootstrapModule(AppModule)
+ .catch((err: any) => console.error(err));
diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json
new file mode 100644
index 00000000000..7e1e1235029
--- /dev/null
+++ b/static/code/stackblitz/v8/angular/package.json
@@ -0,0 +1,7 @@
+{
+ "dependencies": {
+ "@ionic/angular": "8.0.0",
+ "@ionic/core": "8.0.0",
+ "@angular/platform-browser-dynamic": "17.3.2"
+ }
+}
diff --git a/static/code/stackblitz/v8/angular/styles.css b/static/code/stackblitz/v8/angular/styles.css
new file mode 100644
index 00000000000..4532a9076d4
--- /dev/null
+++ b/static/code/stackblitz/v8/angular/styles.css
@@ -0,0 +1,37 @@
+/*
+ * App Global CSS
+ * ----------------------------------------------------------------------------
+ * Put style rules here that you want to apply globally. These styles are for
+ * the entire app and not just one component. Additionally, this file can be
+ * used as an entry point to import other CSS/Sass files to be included in the
+ * output CSS.
+ * For more information on global stylesheets, visit the documentation:
+ * https://ionicframework.com/docs/layout/global-stylesheets
+ */
+
+/* Core CSS required for Ionic components to work properly */
+@import "~@ionic/angular/css/core.css";
+
+/* Basic CSS for apps built with Ionic */
+@import "~@ionic/angular/css/normalize.css";
+@import "~@ionic/angular/css/structure.css";
+@import "~@ionic/angular/css/typography.css";
+
+/* Optional CSS utils that can be commented out */
+@import "~@ionic/angular/css/padding.css";
+@import "~@ionic/angular/css/float-elements.css";
+@import "~@ionic/angular/css/text-alignment.css";
+@import "~@ionic/angular/css/text-transformation.css";
+@import "~@ionic/angular/css/flex-utils.css";
+@import "~@ionic/angular/css/display.css";
+
+/**
+ * Ionic Dark Theme
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+/* @import "~@ionic/angular/css/palettes/dark.always.css"; */
+/* @import "~@ionic/angular/css/palettes/dark.class.css"; */
+@import "~@ionic/angular/css/palettes/dark.system.css";
diff --git a/static/code/stackblitz/v8/angular/tsconfig.json b/static/code/stackblitz/v8/angular/tsconfig.json
new file mode 100644
index 00000000000..129cb6a3887
--- /dev/null
+++ b/static/code/stackblitz/v8/angular/tsconfig.json
@@ -0,0 +1,22 @@
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "baseUrl": "./",
+ "outDir": "./dist/out-tsc",
+ "sourceMap": true,
+ "declaration": false,
+ "downlevelIteration": true,
+ "experimentalDecorators": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "importHelpers": true,
+ "target": "es2015",
+ "typeRoots": ["node_modules/@types"],
+ "lib": ["es2018", "dom"]
+ },
+ "angularCompilerOptions": {
+ "enableIvy": true,
+ "fullTemplateTypeCheck": true,
+ "strictInjectionParameters": true
+ }
+}
diff --git a/static/code/stackblitz/v8/angular/variables.css b/static/code/stackblitz/v8/angular/variables.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/static/code/stackblitz/v8/html/index.html b/static/code/stackblitz/v8/html/index.html
new file mode 100644
index 00000000000..34f05146a9a
--- /dev/null
+++ b/static/code/stackblitz/v8/html/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+ {{ TEMPLATE }}
+
+
+
+
diff --git a/static/code/stackblitz/v8/html/index.ts b/static/code/stackblitz/v8/html/index.ts
new file mode 100644
index 00000000000..d40f1794291
--- /dev/null
+++ b/static/code/stackblitz/v8/html/index.ts
@@ -0,0 +1,43 @@
+import { defineCustomElements } from '@ionic/core/loader';
+
+import { createAnimation, createGesture, loadingController, menuController, modalController, pickerController, toastController } from '@ionic/core';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/core/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/core/css/normalize.css';
+import '@ionic/core/css/structure.css';
+import '@ionic/core/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/core/css/padding.css';
+import '@ionic/core/css/float-elements.css';
+import '@ionic/core/css/text-alignment.css';
+import '@ionic/core/css/text-transformation.css';
+import '@ionic/core/css/flex-utils.css';
+import '@ionic/core/css/display.css';
+
+/**
+ * Ionic Dark Theme
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/core/css/palettes/dark.always.css';
+// import '@ionic/core/css/palettes/dark.class.css';
+import '@ionic/core/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+defineCustomElements();
+
+(window as any).loadingController = loadingController;
+(window as any).menuController = menuController;
+(window as any).modalController = modalController;
+(window as any).pickerController = pickerController;
+(window as any).toastController = toastController;
+(window as any).createAnimation = createAnimation;
+(window as any).createGesture = createGesture;
diff --git a/static/code/stackblitz/v8/html/index.withContent.html b/static/code/stackblitz/v8/html/index.withContent.html
new file mode 100644
index 00000000000..e83c15e8ec9
--- /dev/null
+++ b/static/code/stackblitz/v8/html/index.withContent.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+ {{ TEMPLATE }}
+
+
+
+
+
diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json
new file mode 100644
index 00000000000..d7ae20ecc74
--- /dev/null
+++ b/static/code/stackblitz/v8/html/package.json
@@ -0,0 +1,5 @@
+{
+ "dependencies": {
+ "@ionic/core": "8.0.0"
+ }
+}
diff --git a/static/code/stackblitz/v8/html/variables.css b/static/code/stackblitz/v8/html/variables.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/static/code/stackblitz/v8/react/app.tsx b/static/code/stackblitz/v8/react/app.tsx
new file mode 100644
index 00000000000..d575e20e73c
--- /dev/null
+++ b/static/code/stackblitz/v8/react/app.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { setupIonicReact, IonApp } from '@ionic/react';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+
+/**
+ * Ionic Dark Theme
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/react/css/palettes/dark.always.css';
+// import '@ionic/react/css/palettes/dark.class.css';
+import '@ionic/react/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+import Example from './main';
+
+setupIonicReact();
+
+export default function App() {
+ return (
+
+
+
+ );
+}
diff --git a/static/code/stackblitz/v8/react/app.withContent.tsx b/static/code/stackblitz/v8/react/app.withContent.tsx
new file mode 100644
index 00000000000..b55f8817771
--- /dev/null
+++ b/static/code/stackblitz/v8/react/app.withContent.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { setupIonicReact, IonApp, IonContent } from '@ionic/react';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/react/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/react/css/normalize.css';
+import '@ionic/react/css/structure.css';
+import '@ionic/react/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/react/css/padding.css';
+import '@ionic/react/css/float-elements.css';
+import '@ionic/react/css/text-alignment.css';
+import '@ionic/react/css/text-transformation.css';
+import '@ionic/react/css/flex-utils.css';
+import '@ionic/react/css/display.css';
+
+/**
+ * Ionic Dark Theme
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/react/css/palettes/dark.always.css';
+// import '@ionic/react/css/palettes/dark.class.css';
+import '@ionic/react/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+import Example from './main';
+
+setupIonicReact();
+
+export default function App() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/static/code/stackblitz/v8/react/browserslistrc b/static/code/stackblitz/v8/react/browserslistrc
new file mode 100644
index 00000000000..c264e66dd2f
--- /dev/null
+++ b/static/code/stackblitz/v8/react/browserslistrc
@@ -0,0 +1,6 @@
+Chrome >=79
+ChromeAndroid >=79
+Firefox >=70
+Edge >=79
+Safari >=14
+iOS >=14
diff --git a/static/code/stackblitz/v8/react/eslintrc.js b/static/code/stackblitz/v8/react/eslintrc.js
new file mode 100644
index 00000000000..af472a1f7d3
--- /dev/null
+++ b/static/code/stackblitz/v8/react/eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+ root: true,
+ env: {
+ node: true
+ },
+ 'extends': [
+ 'plugin:react/recommended',
+ 'eslint:recommended'
+ ],
+ parserOptions: {
+ ecmaVersion: 2020
+ },
+ rules: {
+ 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ }
+}
diff --git a/static/code/stackblitz/v8/react/index.html b/static/code/stackblitz/v8/react/index.html
new file mode 100644
index 00000000000..09b94345a21
--- /dev/null
+++ b/static/code/stackblitz/v8/react/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+ Ionic App
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/code/stackblitz/v8/react/index.tsx b/static/code/stackblitz/v8/react/index.tsx
new file mode 100644
index 00000000000..c58a899f793
--- /dev/null
+++ b/static/code/stackblitz/v8/react/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App';
+
+const root = createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
+
+
+
+);
diff --git a/static/code/stackblitz/v8/react/package-lock.json b/static/code/stackblitz/v8/react/package-lock.json
new file mode 100644
index 00000000000..30e9c9e3dc7
--- /dev/null
+++ b/static/code/stackblitz/v8/react/package-lock.json
@@ -0,0 +1,2830 @@
+{
+ "name": "vite-react-typescript",
+ "version": "0.1.0",
+ "lockfileVersion": 2,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "vite-react-typescript",
+ "version": "0.1.0",
+ "dependencies": {
+ "@ionic/react": "8.0.0",
+ "@ionic/react-router": "8.0.0",
+ "@types/node": "^20.0.0",
+ "@types/react": "^18.0.9",
+ "@types/react-dom": "^18.0.4",
+ "@types/react-router": "^5.1.11",
+ "@types/react-router-dom": "^5.1.7",
+ "@vitejs/plugin-react": "^4.1.1",
+ "clsx": "^2.0.0",
+ "react": "^18.1.0",
+ "react-dom": "^18.1.0",
+ "react-router": "^5.2.0",
+ "react-router-dom": "^5.2.0",
+ "typescript": "^5.2.2",
+ "vite": "^5.0.0",
+ "web-vitals": "^3.0.0"
+ }
+ },
+ "node_modules/@ampproject/remapping": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+ "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+ "dependencies": {
+ "@jridgewell/gen-mapping": "^0.3.0",
+ "@jridgewell/trace-mapping": "^0.3.9"
+ },
+ "engines": {
+ "node": ">=6.0.0"
+ }
+ },
+ "node_modules/@babel/code-frame": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
+ "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
+ "dependencies": {
+ "@babel/highlight": "^7.23.4",
+ "chalk": "^2.4.2"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/compat-data": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
+ "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/core": {
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz",
+ "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==",
+ "dependencies": {
+ "@ampproject/remapping": "^2.2.0",
+ "@babel/code-frame": "^7.23.5",
+ "@babel/generator": "^7.23.6",
+ "@babel/helper-compilation-targets": "^7.23.6",
+ "@babel/helper-module-transforms": "^7.23.3",
+ "@babel/helpers": "^7.24.0",
+ "@babel/parser": "^7.24.0",
+ "@babel/template": "^7.24.0",
+ "@babel/traverse": "^7.24.0",
+ "@babel/types": "^7.24.0",
+ "convert-source-map": "^2.0.0",
+ "debug": "^4.1.0",
+ "gensync": "^1.0.0-beta.2",
+ "json5": "^2.2.3",
+ "semver": "^6.3.1"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/babel"
+ }
+ },
+ "node_modules/@babel/generator": {
+ "version": "7.23.6",
+ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
+ "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
+ "dependencies": {
+ "@babel/types": "^7.23.6",
+ "@jridgewell/gen-mapping": "^0.3.2",
+ "@jridgewell/trace-mapping": "^0.3.17",
+ "jsesc": "^2.5.1"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-compilation-targets": {
+ "version": "7.23.6",
+ "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
+ "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
+ "dependencies": {
+ "@babel/compat-data": "^7.23.5",
+ "@babel/helper-validator-option": "^7.23.5",
+ "browserslist": "^4.22.2",
+ "lru-cache": "^5.1.1",
+ "semver": "^6.3.1"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-environment-visitor": {
+ "version": "7.22.20",
+ "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+ "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-function-name": {
+ "version": "7.23.0",
+ "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+ "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
+ "dependencies": {
+ "@babel/template": "^7.22.15",
+ "@babel/types": "^7.23.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-hoist-variables": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+ "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+ "dependencies": {
+ "@babel/types": "^7.22.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-module-imports": {
+ "version": "7.22.15",
+ "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+ "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+ "dependencies": {
+ "@babel/types": "^7.22.15"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-module-transforms": {
+ "version": "7.23.3",
+ "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
+ "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
+ "dependencies": {
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-module-imports": "^7.22.15",
+ "@babel/helper-simple-access": "^7.22.5",
+ "@babel/helper-split-export-declaration": "^7.22.6",
+ "@babel/helper-validator-identifier": "^7.22.20"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0"
+ }
+ },
+ "node_modules/@babel/helper-plugin-utils": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+ "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-simple-access": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+ "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+ "dependencies": {
+ "@babel/types": "^7.22.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-split-export-declaration": {
+ "version": "7.22.6",
+ "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+ "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+ "dependencies": {
+ "@babel/types": "^7.22.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-string-parser": {
+ "version": "7.23.4",
+ "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+ "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-validator-identifier": {
+ "version": "7.22.20",
+ "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+ "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helper-validator-option": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+ "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/helpers": {
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.0.tgz",
+ "integrity": "sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==",
+ "dependencies": {
+ "@babel/template": "^7.24.0",
+ "@babel/traverse": "^7.24.0",
+ "@babel/types": "^7.24.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/highlight": {
+ "version": "7.23.4",
+ "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
+ "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
+ "dependencies": {
+ "@babel/helper-validator-identifier": "^7.22.20",
+ "chalk": "^2.4.2",
+ "js-tokens": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/parser": {
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
+ "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==",
+ "bin": {
+ "parser": "bin/babel-parser.js"
+ },
+ "engines": {
+ "node": ">=6.0.0"
+ }
+ },
+ "node_modules/@babel/plugin-transform-react-jsx-self": {
+ "version": "7.23.3",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.23.3.tgz",
+ "integrity": "sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==",
+ "dependencies": {
+ "@babel/helper-plugin-utils": "^7.22.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0-0"
+ }
+ },
+ "node_modules/@babel/plugin-transform-react-jsx-source": {
+ "version": "7.23.3",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.23.3.tgz",
+ "integrity": "sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==",
+ "dependencies": {
+ "@babel/helper-plugin-utils": "^7.22.5"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ },
+ "peerDependencies": {
+ "@babel/core": "^7.0.0-0"
+ }
+ },
+ "node_modules/@babel/runtime": {
+ "version": "7.20.13",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+ "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+ "dependencies": {
+ "regenerator-runtime": "^0.13.11"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/template": {
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
+ "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
+ "dependencies": {
+ "@babel/code-frame": "^7.23.5",
+ "@babel/parser": "^7.24.0",
+ "@babel/types": "^7.24.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/traverse": {
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.0.tgz",
+ "integrity": "sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==",
+ "dependencies": {
+ "@babel/code-frame": "^7.23.5",
+ "@babel/generator": "^7.23.6",
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-function-name": "^7.23.0",
+ "@babel/helper-hoist-variables": "^7.22.5",
+ "@babel/helper-split-export-declaration": "^7.22.6",
+ "@babel/parser": "^7.24.0",
+ "@babel/types": "^7.24.0",
+ "debug": "^4.3.1",
+ "globals": "^11.1.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@babel/types": {
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+ "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
+ "dependencies": {
+ "@babel/helper-string-parser": "^7.23.4",
+ "@babel/helper-validator-identifier": "^7.22.20",
+ "to-fast-properties": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@esbuild/aix-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+ "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+ "cpu": [
+ "ppc64"
+ ],
+ "optional": true,
+ "os": [
+ "aix"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/android-arm": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+ "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+ "cpu": [
+ "arm"
+ ],
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/android-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+ "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+ "cpu": [
+ "arm64"
+ ],
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/android-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+ "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/darwin-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+ "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+ "cpu": [
+ "arm64"
+ ],
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/darwin-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+ "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/freebsd-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+ "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+ "cpu": [
+ "arm64"
+ ],
+ "optional": true,
+ "os": [
+ "freebsd"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/freebsd-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+ "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "freebsd"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-arm": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+ "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+ "cpu": [
+ "arm"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+ "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+ "cpu": [
+ "arm64"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-ia32": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+ "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+ "cpu": [
+ "ia32"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-loong64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+ "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+ "cpu": [
+ "loong64"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-mips64el": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+ "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+ "cpu": [
+ "mips64el"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+ "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+ "cpu": [
+ "ppc64"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-riscv64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+ "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+ "cpu": [
+ "riscv64"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-s390x": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+ "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+ "cpu": [
+ "s390x"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+ "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/netbsd-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "netbsd"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/openbsd-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "openbsd"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/sunos-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+ "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "sunos"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/win32-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+ "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+ "cpu": [
+ "arm64"
+ ],
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/win32-ia32": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+ "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+ "cpu": [
+ "ia32"
+ ],
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/win32-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+ "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@ionic/core": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0.tgz",
+ "integrity": "sha512-jW1LA5mSUYmG4Go9EBWPiLv0Uxwm9vF8+3gwYNeLxJrRwzsirc1qBW/zvDTqcbyMwopAfwtb690iSv5e3i1CwA==",
+ "dependencies": {
+ "@stencil/core": "^4.12.2",
+ "ionicons": "^7.2.2",
+ "tslib": "^2.1.0"
+ }
+ },
+ "node_modules/@ionic/react": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.0.0.tgz",
+ "integrity": "sha512-s7Ncn3Md5WARayGc8Jc65/of+1TxU5KBESWk/xAzbZHIRHM9piERk6tlkvUhYOt9lNA4faX3fa9sOviUiEaHFw==",
+ "dependencies": {
+ "@ionic/core": "8.0.0",
+ "ionicons": "^7.0.0",
+ "tslib": "*"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.6",
+ "react-dom": ">=16.8.6"
+ }
+ },
+ "node_modules/@ionic/react-router": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.0.0.tgz",
+ "integrity": "sha512-WqFn1qhWxU1HOouFLdFBbznro8SPLqPz3K5zScNAY1w6LXx8tuuZyfuPGjGjQq0xXkRBx3s1u7MbpLHbPQEr9g==",
+ "dependencies": {
+ "@ionic/react": "8.0.0",
+ "tslib": "*"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.6",
+ "react-dom": ">=16.8.6",
+ "react-router": "^5.0.1",
+ "react-router-dom": "^5.0.1"
+ }
+ },
+ "node_modules/@jridgewell/gen-mapping": {
+ "version": "0.3.3",
+ "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+ "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+ "dependencies": {
+ "@jridgewell/set-array": "^1.0.1",
+ "@jridgewell/sourcemap-codec": "^1.4.10",
+ "@jridgewell/trace-mapping": "^0.3.9"
+ },
+ "engines": {
+ "node": ">=6.0.0"
+ }
+ },
+ "node_modules/@jridgewell/resolve-uri": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
+ "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
+ "engines": {
+ "node": ">=6.0.0"
+ }
+ },
+ "node_modules/@jridgewell/set-array": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+ "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+ "engines": {
+ "node": ">=6.0.0"
+ }
+ },
+ "node_modules/@jridgewell/sourcemap-codec": {
+ "version": "1.4.15",
+ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+ "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+ },
+ "node_modules/@jridgewell/trace-mapping": {
+ "version": "0.3.20",
+ "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
+ "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
+ "dependencies": {
+ "@jridgewell/resolve-uri": "^3.1.0",
+ "@jridgewell/sourcemap-codec": "^1.4.14"
+ }
+ },
+ "node_modules/@rollup/rollup-android-arm-eabi": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
+ "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
+ "cpu": [
+ "arm"
+ ],
+ "optional": true,
+ "os": [
+ "android"
+ ]
+ },
+ "node_modules/@rollup/rollup-android-arm64": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
+ "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
+ "cpu": [
+ "arm64"
+ ],
+ "optional": true,
+ "os": [
+ "android"
+ ]
+ },
+ "node_modules/@rollup/rollup-darwin-arm64": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
+ "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
+ "cpu": [
+ "arm64"
+ ],
+ "optional": true,
+ "os": [
+ "darwin"
+ ]
+ },
+ "node_modules/@rollup/rollup-darwin-x64": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
+ "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "darwin"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
+ "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
+ "cpu": [
+ "arm"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-arm64-gnu": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
+ "cpu": [
+ "arm64"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-arm64-musl": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
+ "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
+ "cpu": [
+ "arm64"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
+ "cpu": [
+ "riscv64"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-x64-gnu": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
+ "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-x64-musl": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
+ "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-win32-arm64-msvc": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
+ "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
+ "cpu": [
+ "arm64"
+ ],
+ "optional": true,
+ "os": [
+ "win32"
+ ]
+ },
+ "node_modules/@rollup/rollup-win32-ia32-msvc": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
+ "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
+ "cpu": [
+ "ia32"
+ ],
+ "optional": true,
+ "os": [
+ "win32"
+ ]
+ },
+ "node_modules/@rollup/rollup-win32-x64-msvc": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
+ "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "win32"
+ ]
+ },
+ "node_modules/@stencil/core": {
+ "version": "4.16.0",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.16.0.tgz",
+ "integrity": "sha512-gXaC5IrquV/Hw5JIZTCWkM5lJEbBQtnvHLhDebjar6A6+YBqxah04dardS+YUNVuRbnE6Hcja7KKiAXT3oVsvw==",
+ "bin": {
+ "stencil": "bin/stencil"
+ },
+ "engines": {
+ "node": ">=16.0.0",
+ "npm": ">=7.10.0"
+ }
+ },
+ "node_modules/@types/babel__core": {
+ "version": "7.20.5",
+ "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+ "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+ "dependencies": {
+ "@babel/parser": "^7.20.7",
+ "@babel/types": "^7.20.7",
+ "@types/babel__generator": "*",
+ "@types/babel__template": "*",
+ "@types/babel__traverse": "*"
+ }
+ },
+ "node_modules/@types/babel__generator": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.7.tgz",
+ "integrity": "sha512-6Sfsq+EaaLrw4RmdFWE9Onp63TOUue71AWb4Gpa6JxzgTYtimbM086WnYTy2U67AofR++QKCo08ZP6pwx8YFHQ==",
+ "dependencies": {
+ "@babel/types": "^7.0.0"
+ }
+ },
+ "node_modules/@types/babel__template": {
+ "version": "7.4.4",
+ "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+ "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+ "dependencies": {
+ "@babel/parser": "^7.1.0",
+ "@babel/types": "^7.0.0"
+ }
+ },
+ "node_modules/@types/babel__traverse": {
+ "version": "7.20.4",
+ "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.4.tgz",
+ "integrity": "sha512-mSM/iKUk5fDDrEV/e83qY+Cr3I1+Q3qqTuEn++HAWYjEa1+NxZr6CNrcJGf2ZTnq4HoFGC3zaTPZTobCzCFukA==",
+ "dependencies": {
+ "@babel/types": "^7.20.7"
+ }
+ },
+ "node_modules/@types/estree": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+ },
+ "node_modules/@types/history": {
+ "version": "4.7.11",
+ "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+ "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
+ },
+ "node_modules/@types/node": {
+ "version": "20.10.2",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.2.tgz",
+ "integrity": "sha512-37MXfxkb0vuIlRKHNxwCkb60PNBpR94u4efQuN4JgIAm66zfCDXGSAFCef9XUWFovX2R1ok6Z7MHhtdVXXkkIw==",
+ "dependencies": {
+ "undici-types": "~5.26.4"
+ }
+ },
+ "node_modules/@types/prop-types": {
+ "version": "15.7.5",
+ "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+ "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+ },
+ "node_modules/@types/react": {
+ "version": "18.2.70",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.70.tgz",
+ "integrity": "sha512-hjlM2hho2vqklPhopNkXkdkeq6Lv8WSZTpr7956zY+3WS5cfYUewtCzsJLsbW5dEv3lfSeQ4W14ZFeKC437JRQ==",
+ "dependencies": {
+ "@types/prop-types": "*",
+ "@types/scheduler": "*",
+ "csstype": "^3.0.2"
+ }
+ },
+ "node_modules/@types/react-dom": {
+ "version": "18.2.22",
+ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz",
+ "integrity": "sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==",
+ "dependencies": {
+ "@types/react": "*"
+ }
+ },
+ "node_modules/@types/react-router": {
+ "version": "5.1.20",
+ "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+ "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+ "dependencies": {
+ "@types/history": "^4.7.11",
+ "@types/react": "*"
+ }
+ },
+ "node_modules/@types/react-router-dom": {
+ "version": "5.3.3",
+ "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+ "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+ "dependencies": {
+ "@types/history": "^4.7.11",
+ "@types/react": "*",
+ "@types/react-router": "*"
+ }
+ },
+ "node_modules/@types/scheduler": {
+ "version": "0.16.2",
+ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+ "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+ },
+ "node_modules/@vitejs/plugin-react": {
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
+ "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==",
+ "dependencies": {
+ "@babel/core": "^7.23.5",
+ "@babel/plugin-transform-react-jsx-self": "^7.23.3",
+ "@babel/plugin-transform-react-jsx-source": "^7.23.3",
+ "@types/babel__core": "^7.20.5",
+ "react-refresh": "^0.14.0"
+ },
+ "engines": {
+ "node": "^14.18.0 || >=16.0.0"
+ },
+ "peerDependencies": {
+ "vite": "^4.2.0 || ^5.0.0"
+ }
+ },
+ "node_modules/ansi-styles": {
+ "version": "3.2.1",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+ "dependencies": {
+ "color-convert": "^1.9.0"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/browserslist": {
+ "version": "4.23.0",
+ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
+ "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/browserslist"
+ },
+ {
+ "type": "tidelift",
+ "url": "https://tidelift.com/funding/github/npm/browserslist"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "dependencies": {
+ "caniuse-lite": "^1.0.30001587",
+ "electron-to-chromium": "^1.4.668",
+ "node-releases": "^2.0.14",
+ "update-browserslist-db": "^1.0.13"
+ },
+ "bin": {
+ "browserslist": "cli.js"
+ },
+ "engines": {
+ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+ }
+ },
+ "node_modules/caniuse-lite": {
+ "version": "1.0.30001591",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001591.tgz",
+ "integrity": "sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==",
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/browserslist"
+ },
+ {
+ "type": "tidelift",
+ "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ]
+ },
+ "node_modules/chalk": {
+ "version": "2.4.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+ "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+ "dependencies": {
+ "ansi-styles": "^3.2.1",
+ "escape-string-regexp": "^1.0.5",
+ "supports-color": "^5.3.0"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/clsx": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+ "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/color-convert": {
+ "version": "1.9.3",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+ "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+ "dependencies": {
+ "color-name": "1.1.3"
+ }
+ },
+ "node_modules/color-name": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+ },
+ "node_modules/convert-source-map": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
+ },
+ "node_modules/csstype": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+ "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+ },
+ "node_modules/debug": {
+ "version": "4.3.4",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+ "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+ "dependencies": {
+ "ms": "2.1.2"
+ },
+ "engines": {
+ "node": ">=6.0"
+ },
+ "peerDependenciesMeta": {
+ "supports-color": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/electron-to-chromium": {
+ "version": "1.4.686",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.686.tgz",
+ "integrity": "sha512-3avY1B+vUzNxEgkBDpKOP8WarvUAEwpRaiCL0He5OKWEFxzaOFiq4WoZEZe7qh0ReS7DiWoHMnYoQCKxNZNzSg=="
+ },
+ "node_modules/esbuild": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+ "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+ "hasInstallScript": true,
+ "bin": {
+ "esbuild": "bin/esbuild"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "optionalDependencies": {
+ "@esbuild/aix-ppc64": "0.20.2",
+ "@esbuild/android-arm": "0.20.2",
+ "@esbuild/android-arm64": "0.20.2",
+ "@esbuild/android-x64": "0.20.2",
+ "@esbuild/darwin-arm64": "0.20.2",
+ "@esbuild/darwin-x64": "0.20.2",
+ "@esbuild/freebsd-arm64": "0.20.2",
+ "@esbuild/freebsd-x64": "0.20.2",
+ "@esbuild/linux-arm": "0.20.2",
+ "@esbuild/linux-arm64": "0.20.2",
+ "@esbuild/linux-ia32": "0.20.2",
+ "@esbuild/linux-loong64": "0.20.2",
+ "@esbuild/linux-mips64el": "0.20.2",
+ "@esbuild/linux-ppc64": "0.20.2",
+ "@esbuild/linux-riscv64": "0.20.2",
+ "@esbuild/linux-s390x": "0.20.2",
+ "@esbuild/linux-x64": "0.20.2",
+ "@esbuild/netbsd-x64": "0.20.2",
+ "@esbuild/openbsd-x64": "0.20.2",
+ "@esbuild/sunos-x64": "0.20.2",
+ "@esbuild/win32-arm64": "0.20.2",
+ "@esbuild/win32-ia32": "0.20.2",
+ "@esbuild/win32-x64": "0.20.2"
+ }
+ },
+ "node_modules/escalade": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+ "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/escape-string-regexp": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+ "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+ "engines": {
+ "node": ">=0.8.0"
+ }
+ },
+ "node_modules/fsevents": {
+ "version": "2.3.3",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+ "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+ "hasInstallScript": true,
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+ }
+ },
+ "node_modules/gensync": {
+ "version": "1.0.0-beta.2",
+ "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+ "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/globals": {
+ "version": "11.12.0",
+ "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+ "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/has-flag": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+ "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/history": {
+ "version": "4.10.1",
+ "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+ "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+ "dependencies": {
+ "@babel/runtime": "^7.1.2",
+ "loose-envify": "^1.2.0",
+ "resolve-pathname": "^3.0.0",
+ "tiny-invariant": "^1.0.2",
+ "tiny-warning": "^1.0.0",
+ "value-equal": "^1.0.1"
+ }
+ },
+ "node_modules/hoist-non-react-statics": {
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+ "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+ "dependencies": {
+ "react-is": "^16.7.0"
+ }
+ },
+ "node_modules/hoist-non-react-statics/node_modules/react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ },
+ "node_modules/ionicons": {
+ "version": "7.3.1",
+ "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.3.1.tgz",
+ "integrity": "sha512-1boG4EQTBBpQ4/0PU60Yi78Iw/k8iNtKu9c0NmsbzHGnWAcwpiovG9Wi/rk5UlF+DC+CR4XDCxKo91YqvAxkww==",
+ "dependencies": {
+ "@stencil/core": "^4.0.3"
+ }
+ },
+ "node_modules/js-tokens": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+ },
+ "node_modules/jsesc": {
+ "version": "2.5.2",
+ "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+ "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+ "bin": {
+ "jsesc": "bin/jsesc"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/json5": {
+ "version": "2.2.3",
+ "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+ "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+ "bin": {
+ "json5": "lib/cli.js"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "node_modules/loose-envify": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+ "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+ "dependencies": {
+ "js-tokens": "^3.0.0 || ^4.0.0"
+ },
+ "bin": {
+ "loose-envify": "cli.js"
+ }
+ },
+ "node_modules/lru-cache": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+ "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+ "dependencies": {
+ "yallist": "^3.0.2"
+ }
+ },
+ "node_modules/ms": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+ },
+ "node_modules/nanoid": {
+ "version": "3.3.7",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+ "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "bin": {
+ "nanoid": "bin/nanoid.cjs"
+ },
+ "engines": {
+ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+ }
+ },
+ "node_modules/node-releases": {
+ "version": "2.0.14",
+ "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+ "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
+ },
+ "node_modules/object-assign": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+ "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/picocolors": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+ "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+ },
+ "node_modules/postcss": {
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ {
+ "type": "tidelift",
+ "url": "https://tidelift.com/funding/github/npm/postcss"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "dependencies": {
+ "nanoid": "^3.3.7",
+ "picocolors": "^1.0.0",
+ "source-map-js": "^1.2.0"
+ },
+ "engines": {
+ "node": "^10 || ^12 || >=14"
+ }
+ },
+ "node_modules/prop-types": {
+ "version": "15.8.1",
+ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+ "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+ "dependencies": {
+ "loose-envify": "^1.4.0",
+ "object-assign": "^4.1.1",
+ "react-is": "^16.13.1"
+ }
+ },
+ "node_modules/prop-types/node_modules/react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ },
+ "node_modules/react": {
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+ "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+ "dependencies": {
+ "loose-envify": "^1.1.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/react-dom": {
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+ "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+ "dependencies": {
+ "loose-envify": "^1.1.0",
+ "scheduler": "^0.23.0"
+ },
+ "peerDependencies": {
+ "react": "^18.2.0"
+ }
+ },
+ "node_modules/react-refresh": {
+ "version": "0.14.0",
+ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
+ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/react-router": {
+ "version": "5.3.4",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+ "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+ "dependencies": {
+ "@babel/runtime": "^7.12.13",
+ "history": "^4.9.0",
+ "hoist-non-react-statics": "^3.1.0",
+ "loose-envify": "^1.3.1",
+ "path-to-regexp": "^1.7.0",
+ "prop-types": "^15.6.2",
+ "react-is": "^16.6.0",
+ "tiny-invariant": "^1.0.2",
+ "tiny-warning": "^1.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=15"
+ }
+ },
+ "node_modules/react-router-dom": {
+ "version": "5.3.4",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+ "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.12.13",
+ "history": "^4.9.0",
+ "loose-envify": "^1.3.1",
+ "prop-types": "^15.6.2",
+ "react-router": "5.3.4",
+ "tiny-invariant": "^1.0.2",
+ "tiny-warning": "^1.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=15"
+ }
+ },
+ "node_modules/react-router/node_modules/isarray": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+ "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+ },
+ "node_modules/react-router/node_modules/path-to-regexp": {
+ "version": "1.8.0",
+ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+ "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+ "dependencies": {
+ "isarray": "0.0.1"
+ }
+ },
+ "node_modules/react-router/node_modules/react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ },
+ "node_modules/regenerator-runtime": {
+ "version": "0.13.11",
+ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+ "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+ },
+ "node_modules/resolve-pathname": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+ "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+ },
+ "node_modules/rollup": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
+ "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
+ "dependencies": {
+ "@types/estree": "1.0.5"
+ },
+ "bin": {
+ "rollup": "dist/bin/rollup"
+ },
+ "engines": {
+ "node": ">=18.0.0",
+ "npm": ">=8.0.0"
+ },
+ "optionalDependencies": {
+ "@rollup/rollup-android-arm-eabi": "4.13.0",
+ "@rollup/rollup-android-arm64": "4.13.0",
+ "@rollup/rollup-darwin-arm64": "4.13.0",
+ "@rollup/rollup-darwin-x64": "4.13.0",
+ "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
+ "@rollup/rollup-linux-arm64-gnu": "4.13.0",
+ "@rollup/rollup-linux-arm64-musl": "4.13.0",
+ "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-musl": "4.13.0",
+ "@rollup/rollup-win32-arm64-msvc": "4.13.0",
+ "@rollup/rollup-win32-ia32-msvc": "4.13.0",
+ "@rollup/rollup-win32-x64-msvc": "4.13.0",
+ "fsevents": "~2.3.2"
+ }
+ },
+ "node_modules/scheduler": {
+ "version": "0.23.0",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+ "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+ "dependencies": {
+ "loose-envify": "^1.1.0"
+ }
+ },
+ "node_modules/semver": {
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+ "bin": {
+ "semver": "bin/semver.js"
+ }
+ },
+ "node_modules/source-map-js": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/supports-color": {
+ "version": "5.5.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+ "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+ "dependencies": {
+ "has-flag": "^3.0.0"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/tiny-invariant": {
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+ "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
+ },
+ "node_modules/tiny-warning": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+ "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+ },
+ "node_modules/to-fast-properties": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+ "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/tslib": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+ "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+ },
+ "node_modules/typescript": {
+ "version": "5.4.2",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+ "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
+ "bin": {
+ "tsc": "bin/tsc",
+ "tsserver": "bin/tsserver"
+ },
+ "engines": {
+ "node": ">=14.17"
+ }
+ },
+ "node_modules/undici-types": {
+ "version": "5.26.5",
+ "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+ "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+ },
+ "node_modules/update-browserslist-db": {
+ "version": "1.0.13",
+ "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+ "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/browserslist"
+ },
+ {
+ "type": "tidelift",
+ "url": "https://tidelift.com/funding/github/npm/browserslist"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "dependencies": {
+ "escalade": "^3.1.1",
+ "picocolors": "^1.0.0"
+ },
+ "bin": {
+ "update-browserslist-db": "cli.js"
+ },
+ "peerDependencies": {
+ "browserslist": ">= 4.21.0"
+ }
+ },
+ "node_modules/value-equal": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+ "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+ },
+ "node_modules/vite": {
+ "version": "5.2.8",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+ "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
+ "dependencies": {
+ "esbuild": "^0.20.1",
+ "postcss": "^8.4.38",
+ "rollup": "^4.13.0"
+ },
+ "bin": {
+ "vite": "bin/vite.js"
+ },
+ "engines": {
+ "node": "^18.0.0 || >=20.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/vitejs/vite?sponsor=1"
+ },
+ "optionalDependencies": {
+ "fsevents": "~2.3.3"
+ },
+ "peerDependencies": {
+ "@types/node": "^18.0.0 || >=20.0.0",
+ "less": "*",
+ "lightningcss": "^1.21.0",
+ "sass": "*",
+ "stylus": "*",
+ "sugarss": "*",
+ "terser": "^5.4.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/node": {
+ "optional": true
+ },
+ "less": {
+ "optional": true
+ },
+ "lightningcss": {
+ "optional": true
+ },
+ "sass": {
+ "optional": true
+ },
+ "stylus": {
+ "optional": true
+ },
+ "sugarss": {
+ "optional": true
+ },
+ "terser": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/web-vitals": {
+ "version": "3.5.2",
+ "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.5.2.tgz",
+ "integrity": "sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg=="
+ },
+ "node_modules/yallist": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+ }
+ },
+ "dependencies": {
+ "@ampproject/remapping": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+ "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+ "requires": {
+ "@jridgewell/gen-mapping": "^0.3.0",
+ "@jridgewell/trace-mapping": "^0.3.9"
+ }
+ },
+ "@babel/code-frame": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
+ "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
+ "requires": {
+ "@babel/highlight": "^7.23.4",
+ "chalk": "^2.4.2"
+ }
+ },
+ "@babel/compat-data": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
+ "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw=="
+ },
+ "@babel/core": {
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz",
+ "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==",
+ "requires": {
+ "@ampproject/remapping": "^2.2.0",
+ "@babel/code-frame": "^7.23.5",
+ "@babel/generator": "^7.23.6",
+ "@babel/helper-compilation-targets": "^7.23.6",
+ "@babel/helper-module-transforms": "^7.23.3",
+ "@babel/helpers": "^7.24.0",
+ "@babel/parser": "^7.24.0",
+ "@babel/template": "^7.24.0",
+ "@babel/traverse": "^7.24.0",
+ "@babel/types": "^7.24.0",
+ "convert-source-map": "^2.0.0",
+ "debug": "^4.1.0",
+ "gensync": "^1.0.0-beta.2",
+ "json5": "^2.2.3",
+ "semver": "^6.3.1"
+ }
+ },
+ "@babel/generator": {
+ "version": "7.23.6",
+ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
+ "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
+ "requires": {
+ "@babel/types": "^7.23.6",
+ "@jridgewell/gen-mapping": "^0.3.2",
+ "@jridgewell/trace-mapping": "^0.3.17",
+ "jsesc": "^2.5.1"
+ }
+ },
+ "@babel/helper-compilation-targets": {
+ "version": "7.23.6",
+ "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
+ "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
+ "requires": {
+ "@babel/compat-data": "^7.23.5",
+ "@babel/helper-validator-option": "^7.23.5",
+ "browserslist": "^4.22.2",
+ "lru-cache": "^5.1.1",
+ "semver": "^6.3.1"
+ }
+ },
+ "@babel/helper-environment-visitor": {
+ "version": "7.22.20",
+ "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+ "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA=="
+ },
+ "@babel/helper-function-name": {
+ "version": "7.23.0",
+ "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+ "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
+ "requires": {
+ "@babel/template": "^7.22.15",
+ "@babel/types": "^7.23.0"
+ }
+ },
+ "@babel/helper-hoist-variables": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+ "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+ "requires": {
+ "@babel/types": "^7.22.5"
+ }
+ },
+ "@babel/helper-module-imports": {
+ "version": "7.22.15",
+ "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+ "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+ "requires": {
+ "@babel/types": "^7.22.15"
+ }
+ },
+ "@babel/helper-module-transforms": {
+ "version": "7.23.3",
+ "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
+ "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
+ "requires": {
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-module-imports": "^7.22.15",
+ "@babel/helper-simple-access": "^7.22.5",
+ "@babel/helper-split-export-declaration": "^7.22.6",
+ "@babel/helper-validator-identifier": "^7.22.20"
+ }
+ },
+ "@babel/helper-plugin-utils": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+ "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg=="
+ },
+ "@babel/helper-simple-access": {
+ "version": "7.22.5",
+ "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+ "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+ "requires": {
+ "@babel/types": "^7.22.5"
+ }
+ },
+ "@babel/helper-split-export-declaration": {
+ "version": "7.22.6",
+ "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+ "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+ "requires": {
+ "@babel/types": "^7.22.5"
+ }
+ },
+ "@babel/helper-string-parser": {
+ "version": "7.23.4",
+ "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+ "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ=="
+ },
+ "@babel/helper-validator-identifier": {
+ "version": "7.22.20",
+ "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+ "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A=="
+ },
+ "@babel/helper-validator-option": {
+ "version": "7.23.5",
+ "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+ "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw=="
+ },
+ "@babel/helpers": {
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.0.tgz",
+ "integrity": "sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==",
+ "requires": {
+ "@babel/template": "^7.24.0",
+ "@babel/traverse": "^7.24.0",
+ "@babel/types": "^7.24.0"
+ }
+ },
+ "@babel/highlight": {
+ "version": "7.23.4",
+ "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
+ "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
+ "requires": {
+ "@babel/helper-validator-identifier": "^7.22.20",
+ "chalk": "^2.4.2",
+ "js-tokens": "^4.0.0"
+ }
+ },
+ "@babel/parser": {
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
+ "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg=="
+ },
+ "@babel/plugin-transform-react-jsx-self": {
+ "version": "7.23.3",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.23.3.tgz",
+ "integrity": "sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==",
+ "requires": {
+ "@babel/helper-plugin-utils": "^7.22.5"
+ }
+ },
+ "@babel/plugin-transform-react-jsx-source": {
+ "version": "7.23.3",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.23.3.tgz",
+ "integrity": "sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==",
+ "requires": {
+ "@babel/helper-plugin-utils": "^7.22.5"
+ }
+ },
+ "@babel/runtime": {
+ "version": "7.20.13",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+ "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+ "requires": {
+ "regenerator-runtime": "^0.13.11"
+ }
+ },
+ "@babel/template": {
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
+ "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
+ "requires": {
+ "@babel/code-frame": "^7.23.5",
+ "@babel/parser": "^7.24.0",
+ "@babel/types": "^7.24.0"
+ }
+ },
+ "@babel/traverse": {
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.0.tgz",
+ "integrity": "sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==",
+ "requires": {
+ "@babel/code-frame": "^7.23.5",
+ "@babel/generator": "^7.23.6",
+ "@babel/helper-environment-visitor": "^7.22.20",
+ "@babel/helper-function-name": "^7.23.0",
+ "@babel/helper-hoist-variables": "^7.22.5",
+ "@babel/helper-split-export-declaration": "^7.22.6",
+ "@babel/parser": "^7.24.0",
+ "@babel/types": "^7.24.0",
+ "debug": "^4.3.1",
+ "globals": "^11.1.0"
+ }
+ },
+ "@babel/types": {
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+ "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
+ "requires": {
+ "@babel/helper-string-parser": "^7.23.4",
+ "@babel/helper-validator-identifier": "^7.22.20",
+ "to-fast-properties": "^2.0.0"
+ }
+ },
+ "@esbuild/aix-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+ "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+ "optional": true
+ },
+ "@esbuild/android-arm": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+ "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+ "optional": true
+ },
+ "@esbuild/android-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+ "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+ "optional": true
+ },
+ "@esbuild/android-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+ "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+ "optional": true
+ },
+ "@esbuild/darwin-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+ "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+ "optional": true
+ },
+ "@esbuild/darwin-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+ "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+ "optional": true
+ },
+ "@esbuild/freebsd-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+ "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+ "optional": true
+ },
+ "@esbuild/freebsd-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+ "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+ "optional": true
+ },
+ "@esbuild/linux-arm": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+ "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+ "optional": true
+ },
+ "@esbuild/linux-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+ "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+ "optional": true
+ },
+ "@esbuild/linux-ia32": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+ "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+ "optional": true
+ },
+ "@esbuild/linux-loong64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+ "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+ "optional": true
+ },
+ "@esbuild/linux-mips64el": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+ "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+ "optional": true
+ },
+ "@esbuild/linux-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+ "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+ "optional": true
+ },
+ "@esbuild/linux-riscv64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+ "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+ "optional": true
+ },
+ "@esbuild/linux-s390x": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+ "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+ "optional": true
+ },
+ "@esbuild/linux-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+ "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+ "optional": true
+ },
+ "@esbuild/netbsd-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+ "optional": true
+ },
+ "@esbuild/openbsd-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+ "optional": true
+ },
+ "@esbuild/sunos-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+ "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+ "optional": true
+ },
+ "@esbuild/win32-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+ "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+ "optional": true
+ },
+ "@esbuild/win32-ia32": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+ "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+ "optional": true
+ },
+ "@esbuild/win32-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+ "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+ "optional": true
+ },
+ "@ionic/core": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0.tgz",
+ "integrity": "sha512-jW1LA5mSUYmG4Go9EBWPiLv0Uxwm9vF8+3gwYNeLxJrRwzsirc1qBW/zvDTqcbyMwopAfwtb690iSv5e3i1CwA==",
+ "requires": {
+ "@stencil/core": "^4.12.2",
+ "ionicons": "^7.2.2",
+ "tslib": "^2.1.0"
+ }
+ },
+ "@ionic/react": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.0.0.tgz",
+ "integrity": "sha512-s7Ncn3Md5WARayGc8Jc65/of+1TxU5KBESWk/xAzbZHIRHM9piERk6tlkvUhYOt9lNA4faX3fa9sOviUiEaHFw==",
+ "requires": {
+ "@ionic/core": "8.0.0",
+ "ionicons": "^7.0.0",
+ "tslib": "*"
+ }
+ },
+ "@ionic/react-router": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.0.0.tgz",
+ "integrity": "sha512-WqFn1qhWxU1HOouFLdFBbznro8SPLqPz3K5zScNAY1w6LXx8tuuZyfuPGjGjQq0xXkRBx3s1u7MbpLHbPQEr9g==",
+ "requires": {
+ "@ionic/react": "8.0.0",
+ "tslib": "*"
+ }
+ },
+ "@jridgewell/gen-mapping": {
+ "version": "0.3.3",
+ "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+ "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+ "requires": {
+ "@jridgewell/set-array": "^1.0.1",
+ "@jridgewell/sourcemap-codec": "^1.4.10",
+ "@jridgewell/trace-mapping": "^0.3.9"
+ }
+ },
+ "@jridgewell/resolve-uri": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
+ "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA=="
+ },
+ "@jridgewell/set-array": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+ "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw=="
+ },
+ "@jridgewell/sourcemap-codec": {
+ "version": "1.4.15",
+ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+ "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+ },
+ "@jridgewell/trace-mapping": {
+ "version": "0.3.20",
+ "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
+ "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
+ "requires": {
+ "@jridgewell/resolve-uri": "^3.1.0",
+ "@jridgewell/sourcemap-codec": "^1.4.14"
+ }
+ },
+ "@rollup/rollup-android-arm-eabi": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
+ "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
+ "optional": true
+ },
+ "@rollup/rollup-android-arm64": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
+ "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
+ "optional": true
+ },
+ "@rollup/rollup-darwin-arm64": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
+ "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
+ "optional": true
+ },
+ "@rollup/rollup-darwin-x64": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
+ "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
+ "optional": true
+ },
+ "@rollup/rollup-linux-arm-gnueabihf": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
+ "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
+ "optional": true
+ },
+ "@rollup/rollup-linux-arm64-gnu": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
+ "optional": true
+ },
+ "@rollup/rollup-linux-arm64-musl": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
+ "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
+ "optional": true
+ },
+ "@rollup/rollup-linux-riscv64-gnu": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
+ "optional": true
+ },
+ "@rollup/rollup-linux-x64-gnu": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
+ "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
+ "optional": true
+ },
+ "@rollup/rollup-linux-x64-musl": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
+ "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
+ "optional": true
+ },
+ "@rollup/rollup-win32-arm64-msvc": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
+ "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
+ "optional": true
+ },
+ "@rollup/rollup-win32-ia32-msvc": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
+ "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
+ "optional": true
+ },
+ "@rollup/rollup-win32-x64-msvc": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
+ "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
+ "optional": true
+ },
+ "@stencil/core": {
+ "version": "4.16.0",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.16.0.tgz",
+ "integrity": "sha512-gXaC5IrquV/Hw5JIZTCWkM5lJEbBQtnvHLhDebjar6A6+YBqxah04dardS+YUNVuRbnE6Hcja7KKiAXT3oVsvw=="
+ },
+ "@types/babel__core": {
+ "version": "7.20.5",
+ "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+ "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+ "requires": {
+ "@babel/parser": "^7.20.7",
+ "@babel/types": "^7.20.7",
+ "@types/babel__generator": "*",
+ "@types/babel__template": "*",
+ "@types/babel__traverse": "*"
+ }
+ },
+ "@types/babel__generator": {
+ "version": "7.6.7",
+ "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.7.tgz",
+ "integrity": "sha512-6Sfsq+EaaLrw4RmdFWE9Onp63TOUue71AWb4Gpa6JxzgTYtimbM086WnYTy2U67AofR++QKCo08ZP6pwx8YFHQ==",
+ "requires": {
+ "@babel/types": "^7.0.0"
+ }
+ },
+ "@types/babel__template": {
+ "version": "7.4.4",
+ "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+ "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+ "requires": {
+ "@babel/parser": "^7.1.0",
+ "@babel/types": "^7.0.0"
+ }
+ },
+ "@types/babel__traverse": {
+ "version": "7.20.4",
+ "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.4.tgz",
+ "integrity": "sha512-mSM/iKUk5fDDrEV/e83qY+Cr3I1+Q3qqTuEn++HAWYjEa1+NxZr6CNrcJGf2ZTnq4HoFGC3zaTPZTobCzCFukA==",
+ "requires": {
+ "@babel/types": "^7.20.7"
+ }
+ },
+ "@types/estree": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+ },
+ "@types/history": {
+ "version": "4.7.11",
+ "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+ "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
+ },
+ "@types/node": {
+ "version": "20.10.2",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.2.tgz",
+ "integrity": "sha512-37MXfxkb0vuIlRKHNxwCkb60PNBpR94u4efQuN4JgIAm66zfCDXGSAFCef9XUWFovX2R1ok6Z7MHhtdVXXkkIw==",
+ "requires": {
+ "undici-types": "~5.26.4"
+ }
+ },
+ "@types/prop-types": {
+ "version": "15.7.5",
+ "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+ "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+ },
+ "@types/react": {
+ "version": "18.2.70",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.70.tgz",
+ "integrity": "sha512-hjlM2hho2vqklPhopNkXkdkeq6Lv8WSZTpr7956zY+3WS5cfYUewtCzsJLsbW5dEv3lfSeQ4W14ZFeKC437JRQ==",
+ "requires": {
+ "@types/prop-types": "*",
+ "@types/scheduler": "*",
+ "csstype": "^3.0.2"
+ }
+ },
+ "@types/react-dom": {
+ "version": "18.2.22",
+ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz",
+ "integrity": "sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==",
+ "requires": {
+ "@types/react": "*"
+ }
+ },
+ "@types/react-router": {
+ "version": "5.1.20",
+ "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+ "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+ "requires": {
+ "@types/history": "^4.7.11",
+ "@types/react": "*"
+ }
+ },
+ "@types/react-router-dom": {
+ "version": "5.3.3",
+ "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+ "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+ "requires": {
+ "@types/history": "^4.7.11",
+ "@types/react": "*",
+ "@types/react-router": "*"
+ }
+ },
+ "@types/scheduler": {
+ "version": "0.16.2",
+ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+ "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+ },
+ "@vitejs/plugin-react": {
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
+ "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==",
+ "requires": {
+ "@babel/core": "^7.23.5",
+ "@babel/plugin-transform-react-jsx-self": "^7.23.3",
+ "@babel/plugin-transform-react-jsx-source": "^7.23.3",
+ "@types/babel__core": "^7.20.5",
+ "react-refresh": "^0.14.0"
+ }
+ },
+ "ansi-styles": {
+ "version": "3.2.1",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+ "requires": {
+ "color-convert": "^1.9.0"
+ }
+ },
+ "browserslist": {
+ "version": "4.23.0",
+ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
+ "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+ "requires": {
+ "caniuse-lite": "^1.0.30001587",
+ "electron-to-chromium": "^1.4.668",
+ "node-releases": "^2.0.14",
+ "update-browserslist-db": "^1.0.13"
+ }
+ },
+ "caniuse-lite": {
+ "version": "1.0.30001591",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001591.tgz",
+ "integrity": "sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ=="
+ },
+ "chalk": {
+ "version": "2.4.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+ "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+ "requires": {
+ "ansi-styles": "^3.2.1",
+ "escape-string-regexp": "^1.0.5",
+ "supports-color": "^5.3.0"
+ }
+ },
+ "clsx": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+ "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg=="
+ },
+ "color-convert": {
+ "version": "1.9.3",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+ "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+ "requires": {
+ "color-name": "1.1.3"
+ }
+ },
+ "color-name": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+ "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+ },
+ "convert-source-map": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
+ },
+ "csstype": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+ "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+ },
+ "debug": {
+ "version": "4.3.4",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+ "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+ "requires": {
+ "ms": "2.1.2"
+ }
+ },
+ "electron-to-chromium": {
+ "version": "1.4.686",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.686.tgz",
+ "integrity": "sha512-3avY1B+vUzNxEgkBDpKOP8WarvUAEwpRaiCL0He5OKWEFxzaOFiq4WoZEZe7qh0ReS7DiWoHMnYoQCKxNZNzSg=="
+ },
+ "esbuild": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+ "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+ "requires": {
+ "@esbuild/aix-ppc64": "0.20.2",
+ "@esbuild/android-arm": "0.20.2",
+ "@esbuild/android-arm64": "0.20.2",
+ "@esbuild/android-x64": "0.20.2",
+ "@esbuild/darwin-arm64": "0.20.2",
+ "@esbuild/darwin-x64": "0.20.2",
+ "@esbuild/freebsd-arm64": "0.20.2",
+ "@esbuild/freebsd-x64": "0.20.2",
+ "@esbuild/linux-arm": "0.20.2",
+ "@esbuild/linux-arm64": "0.20.2",
+ "@esbuild/linux-ia32": "0.20.2",
+ "@esbuild/linux-loong64": "0.20.2",
+ "@esbuild/linux-mips64el": "0.20.2",
+ "@esbuild/linux-ppc64": "0.20.2",
+ "@esbuild/linux-riscv64": "0.20.2",
+ "@esbuild/linux-s390x": "0.20.2",
+ "@esbuild/linux-x64": "0.20.2",
+ "@esbuild/netbsd-x64": "0.20.2",
+ "@esbuild/openbsd-x64": "0.20.2",
+ "@esbuild/sunos-x64": "0.20.2",
+ "@esbuild/win32-arm64": "0.20.2",
+ "@esbuild/win32-ia32": "0.20.2",
+ "@esbuild/win32-x64": "0.20.2"
+ }
+ },
+ "escalade": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+ "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA=="
+ },
+ "escape-string-regexp": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+ "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+ },
+ "fsevents": {
+ "version": "2.3.3",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+ "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+ "optional": true
+ },
+ "gensync": {
+ "version": "1.0.0-beta.2",
+ "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+ "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
+ },
+ "globals": {
+ "version": "11.12.0",
+ "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+ "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
+ },
+ "has-flag": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+ "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
+ },
+ "history": {
+ "version": "4.10.1",
+ "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+ "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+ "requires": {
+ "@babel/runtime": "^7.1.2",
+ "loose-envify": "^1.2.0",
+ "resolve-pathname": "^3.0.0",
+ "tiny-invariant": "^1.0.2",
+ "tiny-warning": "^1.0.0",
+ "value-equal": "^1.0.1"
+ }
+ },
+ "hoist-non-react-statics": {
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+ "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+ "requires": {
+ "react-is": "^16.7.0"
+ },
+ "dependencies": {
+ "react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ }
+ }
+ },
+ "ionicons": {
+ "version": "7.3.1",
+ "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.3.1.tgz",
+ "integrity": "sha512-1boG4EQTBBpQ4/0PU60Yi78Iw/k8iNtKu9c0NmsbzHGnWAcwpiovG9Wi/rk5UlF+DC+CR4XDCxKo91YqvAxkww==",
+ "requires": {
+ "@stencil/core": "^4.0.3"
+ }
+ },
+ "js-tokens": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+ },
+ "jsesc": {
+ "version": "2.5.2",
+ "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+ "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
+ },
+ "json5": {
+ "version": "2.2.3",
+ "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+ "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
+ },
+ "loose-envify": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+ "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+ "requires": {
+ "js-tokens": "^3.0.0 || ^4.0.0"
+ }
+ },
+ "lru-cache": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+ "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+ "requires": {
+ "yallist": "^3.0.2"
+ }
+ },
+ "ms": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+ "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+ },
+ "nanoid": {
+ "version": "3.3.7",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+ "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
+ },
+ "node-releases": {
+ "version": "2.0.14",
+ "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+ "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
+ },
+ "object-assign": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+ "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+ },
+ "picocolors": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+ "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+ },
+ "postcss": {
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+ "requires": {
+ "nanoid": "^3.3.7",
+ "picocolors": "^1.0.0",
+ "source-map-js": "^1.2.0"
+ }
+ },
+ "prop-types": {
+ "version": "15.8.1",
+ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+ "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+ "requires": {
+ "loose-envify": "^1.4.0",
+ "object-assign": "^4.1.1",
+ "react-is": "^16.13.1"
+ },
+ "dependencies": {
+ "react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ }
+ }
+ },
+ "react": {
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+ "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+ "requires": {
+ "loose-envify": "^1.1.0"
+ }
+ },
+ "react-dom": {
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+ "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+ "requires": {
+ "loose-envify": "^1.1.0",
+ "scheduler": "^0.23.0"
+ }
+ },
+ "react-refresh": {
+ "version": "0.14.0",
+ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
+ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ=="
+ },
+ "react-router": {
+ "version": "5.3.4",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+ "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+ "requires": {
+ "@babel/runtime": "^7.12.13",
+ "history": "^4.9.0",
+ "hoist-non-react-statics": "^3.1.0",
+ "loose-envify": "^1.3.1",
+ "path-to-regexp": "^1.7.0",
+ "prop-types": "^15.6.2",
+ "react-is": "^16.6.0",
+ "tiny-invariant": "^1.0.2",
+ "tiny-warning": "^1.0.0"
+ },
+ "dependencies": {
+ "isarray": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+ "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+ },
+ "path-to-regexp": {
+ "version": "1.8.0",
+ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+ "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+ "requires": {
+ "isarray": "0.0.1"
+ }
+ },
+ "react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ }
+ }
+ },
+ "react-router-dom": {
+ "version": "5.3.4",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+ "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+ "requires": {
+ "@babel/runtime": "^7.12.13",
+ "history": "^4.9.0",
+ "loose-envify": "^1.3.1",
+ "prop-types": "^15.6.2",
+ "react-router": "5.3.4",
+ "tiny-invariant": "^1.0.2",
+ "tiny-warning": "^1.0.0"
+ }
+ },
+ "regenerator-runtime": {
+ "version": "0.13.11",
+ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+ "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+ },
+ "resolve-pathname": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+ "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+ },
+ "rollup": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
+ "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
+ "requires": {
+ "@rollup/rollup-android-arm-eabi": "4.13.0",
+ "@rollup/rollup-android-arm64": "4.13.0",
+ "@rollup/rollup-darwin-arm64": "4.13.0",
+ "@rollup/rollup-darwin-x64": "4.13.0",
+ "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
+ "@rollup/rollup-linux-arm64-gnu": "4.13.0",
+ "@rollup/rollup-linux-arm64-musl": "4.13.0",
+ "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-musl": "4.13.0",
+ "@rollup/rollup-win32-arm64-msvc": "4.13.0",
+ "@rollup/rollup-win32-ia32-msvc": "4.13.0",
+ "@rollup/rollup-win32-x64-msvc": "4.13.0",
+ "@types/estree": "1.0.5",
+ "fsevents": "~2.3.2"
+ }
+ },
+ "scheduler": {
+ "version": "0.23.0",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+ "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+ "requires": {
+ "loose-envify": "^1.1.0"
+ }
+ },
+ "semver": {
+ "version": "6.3.1",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+ "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="
+ },
+ "source-map-js": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
+ },
+ "supports-color": {
+ "version": "5.5.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+ "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+ "requires": {
+ "has-flag": "^3.0.0"
+ }
+ },
+ "tiny-invariant": {
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
+ "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
+ },
+ "tiny-warning": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+ "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+ },
+ "to-fast-properties": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+ "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
+ },
+ "tslib": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+ "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+ },
+ "typescript": {
+ "version": "5.4.2",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+ "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ=="
+ },
+ "undici-types": {
+ "version": "5.26.5",
+ "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+ "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+ },
+ "update-browserslist-db": {
+ "version": "1.0.13",
+ "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+ "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+ "requires": {
+ "escalade": "^3.1.1",
+ "picocolors": "^1.0.0"
+ }
+ },
+ "value-equal": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+ "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+ },
+ "vite": {
+ "version": "5.2.8",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+ "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
+ "requires": {
+ "esbuild": "^0.20.1",
+ "fsevents": "~2.3.3",
+ "postcss": "^8.4.38",
+ "rollup": "^4.13.0"
+ }
+ },
+ "web-vitals": {
+ "version": "3.5.2",
+ "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.5.2.tgz",
+ "integrity": "sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg=="
+ },
+ "yallist": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+ }
+ }
+}
diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json
new file mode 100644
index 00000000000..f4850a40689
--- /dev/null
+++ b/static/code/stackblitz/v8/react/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "vite-react-typescript",
+ "version": "0.1.0",
+ "private": true,
+ "dependencies": {
+ "@ionic/react": "8.0.0",
+ "@ionic/react-router": "8.0.0",
+ "@types/node": "^20.0.0",
+ "@types/react": "^18.0.9",
+ "@types/react-dom": "^18.0.4",
+ "@types/react-router": "^5.1.11",
+ "@types/react-router-dom": "^5.1.7",
+ "@vitejs/plugin-react": "^4.1.1",
+ "clsx": "^2.0.0",
+ "react": "^18.1.0",
+ "react-dom": "^18.1.0",
+ "react-router": "^5.2.0",
+ "react-router-dom": "^5.2.0",
+ "typescript": "^5.2.2",
+ "vite": "^5.0.0",
+ "web-vitals": "^3.0.0"
+ },
+ "scripts": {
+ "start": "vite",
+ "build": "vite build"
+ }
+}
diff --git a/static/code/stackblitz/v8/react/tsconfig.json b/static/code/stackblitz/v8/react/tsconfig.json
new file mode 100644
index 00000000000..9d379a3c4af
--- /dev/null
+++ b/static/code/stackblitz/v8/react/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "include": ["src"]
+}
diff --git a/static/code/stackblitz/v8/react/variables.css b/static/code/stackblitz/v8/react/variables.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/static/code/stackblitz/v8/react/vite.config.js b/static/code/stackblitz/v8/react/vite.config.js
new file mode 100644
index 00000000000..4d9fbed3d60
--- /dev/null
+++ b/static/code/stackblitz/v8/react/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(() => {
+ return {
+ plugins: [react()],
+ };
+});
diff --git a/static/code/stackblitz/v8/vue/App.vue b/static/code/stackblitz/v8/vue/App.vue
new file mode 100644
index 00000000000..a66de3b24d8
--- /dev/null
+++ b/static/code/stackblitz/v8/vue/App.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
diff --git a/static/code/stackblitz/v8/vue/App.withContent.vue b/static/code/stackblitz/v8/vue/App.withContent.vue
new file mode 100644
index 00000000000..aa113caf3e4
--- /dev/null
+++ b/static/code/stackblitz/v8/vue/App.withContent.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
diff --git a/static/code/stackblitz/v8/vue/env.d.ts b/static/code/stackblitz/v8/vue/env.d.ts
new file mode 100644
index 00000000000..aafef9509dd
--- /dev/null
+++ b/static/code/stackblitz/v8/vue/env.d.ts
@@ -0,0 +1,8 @@
+///
+
+declare module '*.vue' {
+ import type { DefineComponent } from 'vue'
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+ const component: DefineComponent<{}, {}, any>
+ export default component
+}
diff --git a/static/code/stackblitz/v8/vue/index.html b/static/code/stackblitz/v8/vue/index.html
new file mode 100644
index 00000000000..09f61d54bab
--- /dev/null
+++ b/static/code/stackblitz/v8/vue/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+ Ionic App
+
+
+
+
+
+
+
+
diff --git a/static/code/stackblitz/v8/vue/main.ts b/static/code/stackblitz/v8/vue/main.ts
new file mode 100644
index 00000000000..420eb2569a9
--- /dev/null
+++ b/static/code/stackblitz/v8/vue/main.ts
@@ -0,0 +1,36 @@
+import { createApp } from 'vue';
+import { IonicVue } from '@ionic/vue';
+
+import App from './App.vue';
+
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+
+/**
+ * Ionic Dark Theme
+ * -----------------------------------------------------
+ * For more information, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// import '@ionic/vue/css/palettes/dark.always.css';
+// import '@ionic/vue/css/palettes/dark.class.css';
+import '@ionic/vue/css/palettes/dark.system.css';
+
+/* Theme variables */
+import './theme/variables.css';
+
+createApp(App).use(IonicVue).mount('#app');
diff --git a/static/code/stackblitz/v8/vue/package-lock.json b/static/code/stackblitz/v8/vue/package-lock.json
new file mode 100644
index 00000000000..b6ef2bd1c20
--- /dev/null
+++ b/static/code/stackblitz/v8/vue/package-lock.json
@@ -0,0 +1,1895 @@
+{
+ "name": "vite-vue-starter",
+ "version": "0.0.0",
+ "lockfileVersion": 2,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "vite-vue-starter",
+ "version": "0.0.0",
+ "dependencies": {
+ "@ionic/vue": "8.0.0",
+ "@ionic/vue-router": "8.0.0",
+ "vue": "^3.2.25",
+ "vue-router": "4.3.0"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^5.0.0",
+ "typescript": "^4.5.4",
+ "vite": "^5.0.0",
+ "vue-tsc": "^2.0.0"
+ }
+ },
+ "node_modules/@babel/parser": {
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
+ "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==",
+ "bin": {
+ "parser": "bin/babel-parser.js"
+ },
+ "engines": {
+ "node": ">=6.0.0"
+ }
+ },
+ "node_modules/@esbuild/aix-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+ "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+ "cpu": [
+ "ppc64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "aix"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/android-arm": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+ "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+ "cpu": [
+ "arm"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/android-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+ "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/android-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+ "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/darwin-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+ "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/darwin-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+ "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/freebsd-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+ "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "freebsd"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/freebsd-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+ "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "freebsd"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-arm": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+ "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+ "cpu": [
+ "arm"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+ "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-ia32": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+ "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+ "cpu": [
+ "ia32"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-loong64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+ "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+ "cpu": [
+ "loong64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-mips64el": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+ "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+ "cpu": [
+ "mips64el"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+ "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+ "cpu": [
+ "ppc64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-riscv64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+ "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+ "cpu": [
+ "riscv64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-s390x": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+ "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+ "cpu": [
+ "s390x"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/linux-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+ "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/netbsd-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "netbsd"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/openbsd-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "openbsd"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/sunos-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+ "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "sunos"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/win32-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+ "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/win32-ia32": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+ "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+ "cpu": [
+ "ia32"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@esbuild/win32-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+ "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@ionic/core": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0.tgz",
+ "integrity": "sha512-jW1LA5mSUYmG4Go9EBWPiLv0Uxwm9vF8+3gwYNeLxJrRwzsirc1qBW/zvDTqcbyMwopAfwtb690iSv5e3i1CwA==",
+ "dependencies": {
+ "@stencil/core": "^4.12.2",
+ "ionicons": "^7.2.2",
+ "tslib": "^2.1.0"
+ }
+ },
+ "node_modules/@ionic/vue": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.0.0.tgz",
+ "integrity": "sha512-jKynlvprQE4GnEDAoUuwp3HCuodI8uT97FoOMOQoe8DelVcjDAN1w9RjcHm9bau+r25vZ5AZMVmCki7kXQDKfg==",
+ "dependencies": {
+ "@ionic/core": "8.0.0",
+ "ionicons": "^7.0.0"
+ }
+ },
+ "node_modules/@ionic/vue-router": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.0.0.tgz",
+ "integrity": "sha512-LARP0ASkeGEFapmipCsw2oAUIEh61+Rr7ZKrnq12tW/IZoQHy69mxnuSXjrpaOQ6xEMoymM3gIECya4XSzWSYQ==",
+ "dependencies": {
+ "@ionic/vue": "8.0.0"
+ }
+ },
+ "node_modules/@jridgewell/sourcemap-codec": {
+ "version": "1.4.15",
+ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+ "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+ },
+ "node_modules/@rollup/rollup-android-arm-eabi": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
+ "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
+ "cpu": [
+ "arm"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "android"
+ ]
+ },
+ "node_modules/@rollup/rollup-android-arm64": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
+ "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "android"
+ ]
+ },
+ "node_modules/@rollup/rollup-darwin-arm64": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
+ "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "darwin"
+ ]
+ },
+ "node_modules/@rollup/rollup-darwin-x64": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
+ "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "darwin"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
+ "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
+ "cpu": [
+ "arm"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-arm64-gnu": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-arm64-musl": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
+ "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
+ "cpu": [
+ "riscv64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-x64-gnu": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
+ "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-linux-x64-musl": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
+ "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ]
+ },
+ "node_modules/@rollup/rollup-win32-arm64-msvc": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
+ "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "win32"
+ ]
+ },
+ "node_modules/@rollup/rollup-win32-ia32-msvc": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
+ "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
+ "cpu": [
+ "ia32"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "win32"
+ ]
+ },
+ "node_modules/@rollup/rollup-win32-x64-msvc": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
+ "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "win32"
+ ]
+ },
+ "node_modules/@stencil/core": {
+ "version": "4.16.0",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.16.0.tgz",
+ "integrity": "sha512-gXaC5IrquV/Hw5JIZTCWkM5lJEbBQtnvHLhDebjar6A6+YBqxah04dardS+YUNVuRbnE6Hcja7KKiAXT3oVsvw==",
+ "bin": {
+ "stencil": "bin/stencil"
+ },
+ "engines": {
+ "node": ">=16.0.0",
+ "npm": ">=7.10.0"
+ }
+ },
+ "node_modules/@types/estree": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+ "dev": true
+ },
+ "node_modules/@vitejs/plugin-vue": {
+ "version": "5.0.4",
+ "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
+ "integrity": "sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==",
+ "dev": true,
+ "engines": {
+ "node": "^18.0.0 || >=20.0.0"
+ },
+ "peerDependencies": {
+ "vite": "^5.0.0",
+ "vue": "^3.2.25"
+ }
+ },
+ "node_modules/@volar/language-core": {
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-Ew1Iw7/RIRNuDLn60fWJdOLApAlfTVPxbPiSLzc434PReC9kleYtaa//Wo2WlN1oiRqneW0pWQQV0CwYqaimLQ==",
+ "dev": true,
+ "dependencies": {
+ "@volar/source-map": "2.2.0-alpha.8"
+ }
+ },
+ "node_modules/@volar/source-map": {
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-E1ZVmXFJ5DU4fWDcWHzi8OLqqReqIDwhXvIMhVdk6+VipfMVv4SkryXu7/rs4GA/GsebcRyJdaSkKBB3OAkIcA==",
+ "dev": true,
+ "dependencies": {
+ "muggle-string": "^0.4.0"
+ }
+ },
+ "node_modules/@volar/typescript": {
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-RLbRDI+17CiayHZs9HhSzlH0FhLl/+XK6o2qoiw2o2GGKcyD1aDoY6AcMd44acYncTOrqoTNoY6LuCiRyiJiGg==",
+ "dev": true,
+ "dependencies": {
+ "@volar/language-core": "2.2.0-alpha.8",
+ "path-browserify": "^1.0.1"
+ }
+ },
+ "node_modules/@vue/compiler-core": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz",
+ "integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==",
+ "dependencies": {
+ "@babel/parser": "^7.23.9",
+ "@vue/shared": "3.4.21",
+ "entities": "^4.5.0",
+ "estree-walker": "^2.0.2",
+ "source-map-js": "^1.0.2"
+ }
+ },
+ "node_modules/@vue/compiler-dom": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz",
+ "integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==",
+ "dependencies": {
+ "@vue/compiler-core": "3.4.21",
+ "@vue/shared": "3.4.21"
+ }
+ },
+ "node_modules/@vue/compiler-sfc": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz",
+ "integrity": "sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==",
+ "dependencies": {
+ "@babel/parser": "^7.23.9",
+ "@vue/compiler-core": "3.4.21",
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/compiler-ssr": "3.4.21",
+ "@vue/shared": "3.4.21",
+ "estree-walker": "^2.0.2",
+ "magic-string": "^0.30.7",
+ "postcss": "^8.4.35",
+ "source-map-js": "^1.0.2"
+ }
+ },
+ "node_modules/@vue/compiler-ssr": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz",
+ "integrity": "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==",
+ "dependencies": {
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/shared": "3.4.21"
+ }
+ },
+ "node_modules/@vue/devtools-api": {
+ "version": "6.6.1",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
+ "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
+ },
+ "node_modules/@vue/language-core": {
+ "version": "2.0.13",
+ "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.13.tgz",
+ "integrity": "sha512-oQgM+BM66SU5GKtUMLQSQN0bxHFkFpLSSAiY87wVziPaiNQZuKVDt/3yA7GB9PiQw0y/bTNL0bOc0jM/siYjKg==",
+ "dev": true,
+ "dependencies": {
+ "@volar/language-core": "2.2.0-alpha.8",
+ "@vue/compiler-dom": "^3.4.0",
+ "@vue/shared": "^3.4.0",
+ "computeds": "^0.0.1",
+ "minimatch": "^9.0.3",
+ "path-browserify": "^1.0.1",
+ "vue-template-compiler": "^2.7.14"
+ },
+ "peerDependencies": {
+ "typescript": "*"
+ },
+ "peerDependenciesMeta": {
+ "typescript": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/@vue/reactivity": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.21.tgz",
+ "integrity": "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==",
+ "dependencies": {
+ "@vue/shared": "3.4.21"
+ }
+ },
+ "node_modules/@vue/runtime-core": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz",
+ "integrity": "sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==",
+ "dependencies": {
+ "@vue/reactivity": "3.4.21",
+ "@vue/shared": "3.4.21"
+ }
+ },
+ "node_modules/@vue/runtime-dom": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz",
+ "integrity": "sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==",
+ "dependencies": {
+ "@vue/runtime-core": "3.4.21",
+ "@vue/shared": "3.4.21",
+ "csstype": "^3.1.3"
+ }
+ },
+ "node_modules/@vue/server-renderer": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.21.tgz",
+ "integrity": "sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==",
+ "dependencies": {
+ "@vue/compiler-ssr": "3.4.21",
+ "@vue/shared": "3.4.21"
+ },
+ "peerDependencies": {
+ "vue": "3.4.21"
+ }
+ },
+ "node_modules/@vue/shared": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
+ "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
+ },
+ "node_modules/balanced-match": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+ "dev": true
+ },
+ "node_modules/brace-expansion": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+ "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+ "dev": true,
+ "dependencies": {
+ "balanced-match": "^1.0.0"
+ }
+ },
+ "node_modules/computeds": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
+ "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
+ "dev": true
+ },
+ "node_modules/csstype": {
+ "version": "3.1.3",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+ },
+ "node_modules/de-indent": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+ "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+ "dev": true
+ },
+ "node_modules/entities": {
+ "version": "4.5.0",
+ "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+ "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+ "engines": {
+ "node": ">=0.12"
+ },
+ "funding": {
+ "url": "https://github.com/fb55/entities?sponsor=1"
+ }
+ },
+ "node_modules/esbuild": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+ "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+ "dev": true,
+ "hasInstallScript": true,
+ "bin": {
+ "esbuild": "bin/esbuild"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "optionalDependencies": {
+ "@esbuild/aix-ppc64": "0.20.2",
+ "@esbuild/android-arm": "0.20.2",
+ "@esbuild/android-arm64": "0.20.2",
+ "@esbuild/android-x64": "0.20.2",
+ "@esbuild/darwin-arm64": "0.20.2",
+ "@esbuild/darwin-x64": "0.20.2",
+ "@esbuild/freebsd-arm64": "0.20.2",
+ "@esbuild/freebsd-x64": "0.20.2",
+ "@esbuild/linux-arm": "0.20.2",
+ "@esbuild/linux-arm64": "0.20.2",
+ "@esbuild/linux-ia32": "0.20.2",
+ "@esbuild/linux-loong64": "0.20.2",
+ "@esbuild/linux-mips64el": "0.20.2",
+ "@esbuild/linux-ppc64": "0.20.2",
+ "@esbuild/linux-riscv64": "0.20.2",
+ "@esbuild/linux-s390x": "0.20.2",
+ "@esbuild/linux-x64": "0.20.2",
+ "@esbuild/netbsd-x64": "0.20.2",
+ "@esbuild/openbsd-x64": "0.20.2",
+ "@esbuild/sunos-x64": "0.20.2",
+ "@esbuild/win32-arm64": "0.20.2",
+ "@esbuild/win32-ia32": "0.20.2",
+ "@esbuild/win32-x64": "0.20.2"
+ }
+ },
+ "node_modules/estree-walker": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+ "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+ },
+ "node_modules/fsevents": {
+ "version": "2.3.3",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+ "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+ "dev": true,
+ "hasInstallScript": true,
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+ }
+ },
+ "node_modules/he": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+ "dev": true,
+ "bin": {
+ "he": "bin/he"
+ }
+ },
+ "node_modules/ionicons": {
+ "version": "7.3.1",
+ "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.3.1.tgz",
+ "integrity": "sha512-1boG4EQTBBpQ4/0PU60Yi78Iw/k8iNtKu9c0NmsbzHGnWAcwpiovG9Wi/rk5UlF+DC+CR4XDCxKo91YqvAxkww==",
+ "dependencies": {
+ "@stencil/core": "^4.0.3"
+ }
+ },
+ "node_modules/lru-cache": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+ "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+ "dev": true,
+ "dependencies": {
+ "yallist": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/magic-string": {
+ "version": "0.30.7",
+ "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
+ "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
+ "dependencies": {
+ "@jridgewell/sourcemap-codec": "^1.4.15"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/minimatch": {
+ "version": "9.0.3",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+ "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+ "dev": true,
+ "dependencies": {
+ "brace-expansion": "^2.0.1"
+ },
+ "engines": {
+ "node": ">=16 || 14 >=14.17"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/isaacs"
+ }
+ },
+ "node_modules/muggle-string": {
+ "version": "0.4.1",
+ "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+ "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+ "dev": true
+ },
+ "node_modules/nanoid": {
+ "version": "3.3.7",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+ "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "bin": {
+ "nanoid": "bin/nanoid.cjs"
+ },
+ "engines": {
+ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+ }
+ },
+ "node_modules/path-browserify": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+ "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+ "dev": true
+ },
+ "node_modules/picocolors": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+ "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+ },
+ "node_modules/postcss": {
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+ "funding": [
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ {
+ "type": "tidelift",
+ "url": "https://tidelift.com/funding/github/npm/postcss"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
+ }
+ ],
+ "dependencies": {
+ "nanoid": "^3.3.7",
+ "picocolors": "^1.0.0",
+ "source-map-js": "^1.2.0"
+ },
+ "engines": {
+ "node": "^10 || ^12 || >=14"
+ }
+ },
+ "node_modules/rollup": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
+ "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
+ "dev": true,
+ "dependencies": {
+ "@types/estree": "1.0.5"
+ },
+ "bin": {
+ "rollup": "dist/bin/rollup"
+ },
+ "engines": {
+ "node": ">=18.0.0",
+ "npm": ">=8.0.0"
+ },
+ "optionalDependencies": {
+ "@rollup/rollup-android-arm-eabi": "4.13.0",
+ "@rollup/rollup-android-arm64": "4.13.0",
+ "@rollup/rollup-darwin-arm64": "4.13.0",
+ "@rollup/rollup-darwin-x64": "4.13.0",
+ "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
+ "@rollup/rollup-linux-arm64-gnu": "4.13.0",
+ "@rollup/rollup-linux-arm64-musl": "4.13.0",
+ "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-musl": "4.13.0",
+ "@rollup/rollup-win32-arm64-msvc": "4.13.0",
+ "@rollup/rollup-win32-ia32-msvc": "4.13.0",
+ "@rollup/rollup-win32-x64-msvc": "4.13.0",
+ "fsevents": "~2.3.2"
+ }
+ },
+ "node_modules/semver": {
+ "version": "7.5.4",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+ "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+ "dev": true,
+ "dependencies": {
+ "lru-cache": "^6.0.0"
+ },
+ "bin": {
+ "semver": "bin/semver.js"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/source-map-js": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/tslib": {
+ "version": "2.6.2",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+ },
+ "node_modules/typescript": {
+ "version": "4.9.5",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+ "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+ "devOptional": true,
+ "bin": {
+ "tsc": "bin/tsc",
+ "tsserver": "bin/tsserver"
+ },
+ "engines": {
+ "node": ">=4.2.0"
+ }
+ },
+ "node_modules/vite": {
+ "version": "5.2.8",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+ "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
+ "dev": true,
+ "dependencies": {
+ "esbuild": "^0.20.1",
+ "postcss": "^8.4.38",
+ "rollup": "^4.13.0"
+ },
+ "bin": {
+ "vite": "bin/vite.js"
+ },
+ "engines": {
+ "node": "^18.0.0 || >=20.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/vitejs/vite?sponsor=1"
+ },
+ "optionalDependencies": {
+ "fsevents": "~2.3.3"
+ },
+ "peerDependencies": {
+ "@types/node": "^18.0.0 || >=20.0.0",
+ "less": "*",
+ "lightningcss": "^1.21.0",
+ "sass": "*",
+ "stylus": "*",
+ "sugarss": "*",
+ "terser": "^5.4.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/node": {
+ "optional": true
+ },
+ "less": {
+ "optional": true
+ },
+ "lightningcss": {
+ "optional": true
+ },
+ "sass": {
+ "optional": true
+ },
+ "stylus": {
+ "optional": true
+ },
+ "sugarss": {
+ "optional": true
+ },
+ "terser": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/vue": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz",
+ "integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==",
+ "dependencies": {
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/compiler-sfc": "3.4.21",
+ "@vue/runtime-dom": "3.4.21",
+ "@vue/server-renderer": "3.4.21",
+ "@vue/shared": "3.4.21"
+ },
+ "peerDependencies": {
+ "typescript": "*"
+ },
+ "peerDependenciesMeta": {
+ "typescript": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/vue-router": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
+ "integrity": "sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==",
+ "dependencies": {
+ "@vue/devtools-api": "^6.5.1"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/posva"
+ },
+ "peerDependencies": {
+ "vue": "^3.2.0"
+ }
+ },
+ "node_modules/vue-template-compiler": {
+ "version": "2.7.14",
+ "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
+ "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==",
+ "dev": true,
+ "dependencies": {
+ "de-indent": "^1.0.2",
+ "he": "^1.2.0"
+ }
+ },
+ "node_modules/vue-tsc": {
+ "version": "2.0.13",
+ "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.13.tgz",
+ "integrity": "sha512-a3nL3FvguCWVJUQW/jFrUxdeUtiEkbZoQjidqvMeBK//tuE2w6NWQAbdrEpY2+6nSa4kZoKZp8TZUMtHpjt4mQ==",
+ "dev": true,
+ "dependencies": {
+ "@volar/typescript": "2.2.0-alpha.8",
+ "@vue/language-core": "2.0.13",
+ "semver": "^7.5.4"
+ },
+ "bin": {
+ "vue-tsc": "bin/vue-tsc.js"
+ },
+ "peerDependencies": {
+ "typescript": "*"
+ }
+ },
+ "node_modules/yallist": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+ "dev": true
+ }
+ },
+ "dependencies": {
+ "@babel/parser": {
+ "version": "7.24.0",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
+ "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg=="
+ },
+ "@esbuild/aix-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+ "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/android-arm": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+ "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/android-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+ "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/android-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+ "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/darwin-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+ "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/darwin-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+ "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/freebsd-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+ "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/freebsd-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+ "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/linux-arm": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+ "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/linux-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+ "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/linux-ia32": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+ "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/linux-loong64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+ "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/linux-mips64el": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+ "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/linux-ppc64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+ "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/linux-riscv64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+ "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/linux-s390x": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+ "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/linux-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+ "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/netbsd-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/openbsd-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+ "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/sunos-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+ "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/win32-arm64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+ "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/win32-ia32": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+ "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+ "dev": true,
+ "optional": true
+ },
+ "@esbuild/win32-x64": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+ "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+ "dev": true,
+ "optional": true
+ },
+ "@ionic/core": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0.tgz",
+ "integrity": "sha512-jW1LA5mSUYmG4Go9EBWPiLv0Uxwm9vF8+3gwYNeLxJrRwzsirc1qBW/zvDTqcbyMwopAfwtb690iSv5e3i1CwA==",
+ "requires": {
+ "@stencil/core": "^4.12.2",
+ "ionicons": "^7.2.2",
+ "tslib": "^2.1.0"
+ }
+ },
+ "@ionic/vue": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.0.0.tgz",
+ "integrity": "sha512-jKynlvprQE4GnEDAoUuwp3HCuodI8uT97FoOMOQoe8DelVcjDAN1w9RjcHm9bau+r25vZ5AZMVmCki7kXQDKfg==",
+ "requires": {
+ "@ionic/core": "8.0.0",
+ "ionicons": "^7.0.0"
+ }
+ },
+ "@ionic/vue-router": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.0.0.tgz",
+ "integrity": "sha512-LARP0ASkeGEFapmipCsw2oAUIEh61+Rr7ZKrnq12tW/IZoQHy69mxnuSXjrpaOQ6xEMoymM3gIECya4XSzWSYQ==",
+ "requires": {
+ "@ionic/vue": "8.0.0"
+ }
+ },
+ "@jridgewell/sourcemap-codec": {
+ "version": "1.4.15",
+ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+ "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+ },
+ "@rollup/rollup-android-arm-eabi": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
+ "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
+ "dev": true,
+ "optional": true
+ },
+ "@rollup/rollup-android-arm64": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
+ "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
+ "dev": true,
+ "optional": true
+ },
+ "@rollup/rollup-darwin-arm64": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
+ "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
+ "dev": true,
+ "optional": true
+ },
+ "@rollup/rollup-darwin-x64": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
+ "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
+ "dev": true,
+ "optional": true
+ },
+ "@rollup/rollup-linux-arm-gnueabihf": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
+ "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
+ "dev": true,
+ "optional": true
+ },
+ "@rollup/rollup-linux-arm64-gnu": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
+ "dev": true,
+ "optional": true
+ },
+ "@rollup/rollup-linux-arm64-musl": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
+ "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
+ "dev": true,
+ "optional": true
+ },
+ "@rollup/rollup-linux-riscv64-gnu": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
+ "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
+ "dev": true,
+ "optional": true
+ },
+ "@rollup/rollup-linux-x64-gnu": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
+ "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
+ "dev": true,
+ "optional": true
+ },
+ "@rollup/rollup-linux-x64-musl": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
+ "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
+ "dev": true,
+ "optional": true
+ },
+ "@rollup/rollup-win32-arm64-msvc": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
+ "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
+ "dev": true,
+ "optional": true
+ },
+ "@rollup/rollup-win32-ia32-msvc": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
+ "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
+ "dev": true,
+ "optional": true
+ },
+ "@rollup/rollup-win32-x64-msvc": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
+ "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
+ "dev": true,
+ "optional": true
+ },
+ "@stencil/core": {
+ "version": "4.16.0",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.16.0.tgz",
+ "integrity": "sha512-gXaC5IrquV/Hw5JIZTCWkM5lJEbBQtnvHLhDebjar6A6+YBqxah04dardS+YUNVuRbnE6Hcja7KKiAXT3oVsvw=="
+ },
+ "@types/estree": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+ "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+ "dev": true
+ },
+ "@vitejs/plugin-vue": {
+ "version": "5.0.4",
+ "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
+ "integrity": "sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==",
+ "dev": true,
+ "requires": {}
+ },
+ "@volar/language-core": {
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-Ew1Iw7/RIRNuDLn60fWJdOLApAlfTVPxbPiSLzc434PReC9kleYtaa//Wo2WlN1oiRqneW0pWQQV0CwYqaimLQ==",
+ "dev": true,
+ "requires": {
+ "@volar/source-map": "2.2.0-alpha.8"
+ }
+ },
+ "@volar/source-map": {
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-E1ZVmXFJ5DU4fWDcWHzi8OLqqReqIDwhXvIMhVdk6+VipfMVv4SkryXu7/rs4GA/GsebcRyJdaSkKBB3OAkIcA==",
+ "dev": true,
+ "requires": {
+ "muggle-string": "^0.4.0"
+ }
+ },
+ "@volar/typescript": {
+ "version": "2.2.0-alpha.8",
+ "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.0-alpha.8.tgz",
+ "integrity": "sha512-RLbRDI+17CiayHZs9HhSzlH0FhLl/+XK6o2qoiw2o2GGKcyD1aDoY6AcMd44acYncTOrqoTNoY6LuCiRyiJiGg==",
+ "dev": true,
+ "requires": {
+ "@volar/language-core": "2.2.0-alpha.8",
+ "path-browserify": "^1.0.1"
+ }
+ },
+ "@vue/compiler-core": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz",
+ "integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==",
+ "requires": {
+ "@babel/parser": "^7.23.9",
+ "@vue/shared": "3.4.21",
+ "entities": "^4.5.0",
+ "estree-walker": "^2.0.2",
+ "source-map-js": "^1.0.2"
+ }
+ },
+ "@vue/compiler-dom": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz",
+ "integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==",
+ "requires": {
+ "@vue/compiler-core": "3.4.21",
+ "@vue/shared": "3.4.21"
+ }
+ },
+ "@vue/compiler-sfc": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz",
+ "integrity": "sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==",
+ "requires": {
+ "@babel/parser": "^7.23.9",
+ "@vue/compiler-core": "3.4.21",
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/compiler-ssr": "3.4.21",
+ "@vue/shared": "3.4.21",
+ "estree-walker": "^2.0.2",
+ "magic-string": "^0.30.7",
+ "postcss": "^8.4.35",
+ "source-map-js": "^1.0.2"
+ }
+ },
+ "@vue/compiler-ssr": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz",
+ "integrity": "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==",
+ "requires": {
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/shared": "3.4.21"
+ }
+ },
+ "@vue/devtools-api": {
+ "version": "6.6.1",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
+ "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
+ },
+ "@vue/language-core": {
+ "version": "2.0.13",
+ "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.13.tgz",
+ "integrity": "sha512-oQgM+BM66SU5GKtUMLQSQN0bxHFkFpLSSAiY87wVziPaiNQZuKVDt/3yA7GB9PiQw0y/bTNL0bOc0jM/siYjKg==",
+ "dev": true,
+ "requires": {
+ "@volar/language-core": "2.2.0-alpha.8",
+ "@vue/compiler-dom": "^3.4.0",
+ "@vue/shared": "^3.4.0",
+ "computeds": "^0.0.1",
+ "minimatch": "^9.0.3",
+ "path-browserify": "^1.0.1",
+ "vue-template-compiler": "^2.7.14"
+ }
+ },
+ "@vue/reactivity": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.21.tgz",
+ "integrity": "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==",
+ "requires": {
+ "@vue/shared": "3.4.21"
+ }
+ },
+ "@vue/runtime-core": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz",
+ "integrity": "sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==",
+ "requires": {
+ "@vue/reactivity": "3.4.21",
+ "@vue/shared": "3.4.21"
+ }
+ },
+ "@vue/runtime-dom": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz",
+ "integrity": "sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==",
+ "requires": {
+ "@vue/runtime-core": "3.4.21",
+ "@vue/shared": "3.4.21",
+ "csstype": "^3.1.3"
+ }
+ },
+ "@vue/server-renderer": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.21.tgz",
+ "integrity": "sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==",
+ "requires": {
+ "@vue/compiler-ssr": "3.4.21",
+ "@vue/shared": "3.4.21"
+ }
+ },
+ "@vue/shared": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
+ "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
+ },
+ "balanced-match": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+ "dev": true
+ },
+ "brace-expansion": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+ "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+ "dev": true,
+ "requires": {
+ "balanced-match": "^1.0.0"
+ }
+ },
+ "computeds": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
+ "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
+ "dev": true
+ },
+ "csstype": {
+ "version": "3.1.3",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+ },
+ "de-indent": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+ "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+ "dev": true
+ },
+ "entities": {
+ "version": "4.5.0",
+ "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+ "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+ },
+ "esbuild": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+ "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+ "dev": true,
+ "requires": {
+ "@esbuild/aix-ppc64": "0.20.2",
+ "@esbuild/android-arm": "0.20.2",
+ "@esbuild/android-arm64": "0.20.2",
+ "@esbuild/android-x64": "0.20.2",
+ "@esbuild/darwin-arm64": "0.20.2",
+ "@esbuild/darwin-x64": "0.20.2",
+ "@esbuild/freebsd-arm64": "0.20.2",
+ "@esbuild/freebsd-x64": "0.20.2",
+ "@esbuild/linux-arm": "0.20.2",
+ "@esbuild/linux-arm64": "0.20.2",
+ "@esbuild/linux-ia32": "0.20.2",
+ "@esbuild/linux-loong64": "0.20.2",
+ "@esbuild/linux-mips64el": "0.20.2",
+ "@esbuild/linux-ppc64": "0.20.2",
+ "@esbuild/linux-riscv64": "0.20.2",
+ "@esbuild/linux-s390x": "0.20.2",
+ "@esbuild/linux-x64": "0.20.2",
+ "@esbuild/netbsd-x64": "0.20.2",
+ "@esbuild/openbsd-x64": "0.20.2",
+ "@esbuild/sunos-x64": "0.20.2",
+ "@esbuild/win32-arm64": "0.20.2",
+ "@esbuild/win32-ia32": "0.20.2",
+ "@esbuild/win32-x64": "0.20.2"
+ }
+ },
+ "estree-walker": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+ "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+ },
+ "fsevents": {
+ "version": "2.3.3",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+ "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+ "dev": true,
+ "optional": true
+ },
+ "he": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+ "dev": true
+ },
+ "ionicons": {
+ "version": "7.3.1",
+ "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.3.1.tgz",
+ "integrity": "sha512-1boG4EQTBBpQ4/0PU60Yi78Iw/k8iNtKu9c0NmsbzHGnWAcwpiovG9Wi/rk5UlF+DC+CR4XDCxKo91YqvAxkww==",
+ "requires": {
+ "@stencil/core": "^4.0.3"
+ }
+ },
+ "lru-cache": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+ "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+ "dev": true,
+ "requires": {
+ "yallist": "^4.0.0"
+ }
+ },
+ "magic-string": {
+ "version": "0.30.7",
+ "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
+ "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
+ "requires": {
+ "@jridgewell/sourcemap-codec": "^1.4.15"
+ }
+ },
+ "minimatch": {
+ "version": "9.0.3",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+ "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+ "dev": true,
+ "requires": {
+ "brace-expansion": "^2.0.1"
+ }
+ },
+ "muggle-string": {
+ "version": "0.4.1",
+ "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+ "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+ "dev": true
+ },
+ "nanoid": {
+ "version": "3.3.7",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+ "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
+ },
+ "path-browserify": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+ "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+ "dev": true
+ },
+ "picocolors": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+ "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+ },
+ "postcss": {
+ "version": "8.4.38",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+ "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+ "requires": {
+ "nanoid": "^3.3.7",
+ "picocolors": "^1.0.0",
+ "source-map-js": "^1.2.0"
+ }
+ },
+ "rollup": {
+ "version": "4.13.0",
+ "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
+ "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
+ "dev": true,
+ "requires": {
+ "@rollup/rollup-android-arm-eabi": "4.13.0",
+ "@rollup/rollup-android-arm64": "4.13.0",
+ "@rollup/rollup-darwin-arm64": "4.13.0",
+ "@rollup/rollup-darwin-x64": "4.13.0",
+ "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
+ "@rollup/rollup-linux-arm64-gnu": "4.13.0",
+ "@rollup/rollup-linux-arm64-musl": "4.13.0",
+ "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-gnu": "4.13.0",
+ "@rollup/rollup-linux-x64-musl": "4.13.0",
+ "@rollup/rollup-win32-arm64-msvc": "4.13.0",
+ "@rollup/rollup-win32-ia32-msvc": "4.13.0",
+ "@rollup/rollup-win32-x64-msvc": "4.13.0",
+ "@types/estree": "1.0.5",
+ "fsevents": "~2.3.2"
+ }
+ },
+ "semver": {
+ "version": "7.5.4",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+ "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+ "dev": true,
+ "requires": {
+ "lru-cache": "^6.0.0"
+ }
+ },
+ "source-map-js": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+ "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
+ },
+ "tslib": {
+ "version": "2.6.2",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+ },
+ "typescript": {
+ "version": "4.9.5",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+ "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+ "devOptional": true
+ },
+ "vite": {
+ "version": "5.2.8",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+ "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
+ "dev": true,
+ "requires": {
+ "esbuild": "^0.20.1",
+ "fsevents": "~2.3.3",
+ "postcss": "^8.4.38",
+ "rollup": "^4.13.0"
+ }
+ },
+ "vue": {
+ "version": "3.4.21",
+ "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz",
+ "integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==",
+ "requires": {
+ "@vue/compiler-dom": "3.4.21",
+ "@vue/compiler-sfc": "3.4.21",
+ "@vue/runtime-dom": "3.4.21",
+ "@vue/server-renderer": "3.4.21",
+ "@vue/shared": "3.4.21"
+ }
+ },
+ "vue-router": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
+ "integrity": "sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==",
+ "requires": {
+ "@vue/devtools-api": "^6.5.1"
+ }
+ },
+ "vue-template-compiler": {
+ "version": "2.7.14",
+ "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
+ "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==",
+ "dev": true,
+ "requires": {
+ "de-indent": "^1.0.2",
+ "he": "^1.2.0"
+ }
+ },
+ "vue-tsc": {
+ "version": "2.0.13",
+ "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.13.tgz",
+ "integrity": "sha512-a3nL3FvguCWVJUQW/jFrUxdeUtiEkbZoQjidqvMeBK//tuE2w6NWQAbdrEpY2+6nSa4kZoKZp8TZUMtHpjt4mQ==",
+ "dev": true,
+ "requires": {
+ "@volar/typescript": "2.2.0-alpha.8",
+ "@vue/language-core": "2.0.13",
+ "semver": "^7.5.4"
+ }
+ },
+ "yallist": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+ "dev": true
+ }
+ }
+}
diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json
new file mode 100644
index 00000000000..27163e8f9bd
--- /dev/null
+++ b/static/code/stackblitz/v8/vue/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "vite-vue-starter",
+ "private": true,
+ "version": "0.0.0",
+ "scripts": {
+ "dev": "vite",
+ "build": "vue-tsc --noEmit && vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@ionic/vue": "8.0.0",
+ "@ionic/vue-router": "8.0.0",
+ "vue": "^3.2.25",
+ "vue-router": "4.3.0"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^5.0.0",
+ "typescript": "^4.5.4",
+ "vite": "^5.0.0",
+ "vue-tsc": "^2.0.0"
+ }
+}
diff --git a/static/code/stackblitz/v8/vue/tsconfig.json b/static/code/stackblitz/v8/vue/tsconfig.json
new file mode 100644
index 00000000000..bcc4abda4c5
--- /dev/null
+++ b/static/code/stackblitz/v8/vue/tsconfig.json
@@ -0,0 +1,18 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "useDefineForClassFields": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "strict": true,
+ "jsx": "preserve",
+ "sourceMap": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "esModuleInterop": true,
+ "lib": ["esnext", "dom"],
+ "skipLibCheck": true
+ },
+ "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/static/code/stackblitz/v8/vue/tsconfig.node.json b/static/code/stackblitz/v8/vue/tsconfig.node.json
new file mode 100644
index 00000000000..e993792cb12
--- /dev/null
+++ b/static/code/stackblitz/v8/vue/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "module": "esnext",
+ "moduleResolution": "node"
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/static/code/stackblitz/v8/vue/variables.css b/static/code/stackblitz/v8/vue/variables.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/static/code/stackblitz/v8/vue/vite.config.ts b/static/code/stackblitz/v8/vue/vite.config.ts
new file mode 100644
index 00000000000..6405595ab23
--- /dev/null
+++ b/static/code/stackblitz/v8/vue/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue()],
+});
diff --git a/static/usage/v6/accordion/accessibility/animations/demo.html b/static/usage/v6/accordion/accessibility/animations/demo.html
index e293288cb1c..1d9f3880e05 100644
--- a/static/usage/v6/accordion/accessibility/animations/demo.html
+++ b/static/usage/v6/accordion/accessibility/animations/demo.html
@@ -4,8 +4,8 @@
Button
-
-
+
+
diff --git a/static/usage/v6/accordion/basic/demo.html b/static/usage/v6/accordion/basic/demo.html
index 2c5d87b7409..189b9fd9754 100644
--- a/static/usage/v6/accordion/basic/demo.html
+++ b/static/usage/v6/accordion/basic/demo.html
@@ -4,8 +4,8 @@
Accordion
-
-
+
+
diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html b/static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html
index a56c6df0455..622ea7c0dbc 100644
--- a/static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html
+++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html
@@ -4,8 +4,8 @@
Accordion
-
-
+
+
+
+
+
+
+
+
+
+ Select Date
+
+
+
+
+
+
+
+
diff --git a/static/usage/v7/datetime/format-options/index.md b/static/usage/v7/datetime/format-options/index.md
new file mode 100644
index 00000000000..f12a9dc3bd2
--- /dev/null
+++ b/static/usage/v7/datetime/format-options/index.md
@@ -0,0 +1,18 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v7/datetime/format-options/javascript.md b/static/usage/v7/datetime/format-options/javascript.md
new file mode 100644
index 00000000000..8476e5fe8a8
--- /dev/null
+++ b/static/usage/v7/datetime/format-options/javascript.md
@@ -0,0 +1,13 @@
+```html
+
+ Select Date
+
+
+
+```
diff --git a/static/usage/v7/datetime/format-options/react.md b/static/usage/v7/datetime/format-options/react.md
new file mode 100644
index 00000000000..5c5bcfb2882
--- /dev/null
+++ b/static/usage/v7/datetime/format-options/react.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+
+function Example() {
+ return (
+
+ Select Date
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v7/datetime/format-options/vue.md b/static/usage/v7/datetime/format-options/vue.md
new file mode 100644
index 00000000000..e24444436fc
--- /dev/null
+++ b/static/usage/v7/datetime/format-options/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+ Select Date
+
+
+
+
+```
diff --git a/static/usage/v7/datetime/highlightedDates/array/demo.html b/static/usage/v7/datetime/highlightedDates/array/demo.html
index f6a1cd46143..9d0439f50e6 100644
--- a/static/usage/v7/datetime/highlightedDates/array/demo.html
+++ b/static/usage/v7/datetime/highlightedDates/array/demo.html
@@ -4,8 +4,8 @@
Datetime
-
-
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+
+
diff --git a/static/usage/v8/accordion/customization/advanced-expansion-styles/index.md b/static/usage/v8/accordion/customization/advanced-expansion-styles/index.md
new file mode 100644
index 00000000000..2b2e006b8de
--- /dev/null
+++ b/static/usage/v8/accordion/customization/advanced-expansion-styles/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.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/accordion/customization/advanced-expansion-styles/javascript.md b/static/usage/v8/accordion/customization/advanced-expansion-styles/javascript.md
new file mode 100644
index 00000000000..5076fe510e5
--- /dev/null
+++ b/static/usage/v8/accordion/customization/advanced-expansion-styles/javascript.md
@@ -0,0 +1,47 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+```
diff --git a/static/usage/v8/accordion/customization/advanced-expansion-styles/react/main_css.md b/static/usage/v8/accordion/customization/advanced-expansion-styles/react/main_css.md
new file mode 100644
index 00000000000..93bc6b09b7f
--- /dev/null
+++ b/static/usage/v8/accordion/customization/advanced-expansion-styles/react/main_css.md
@@ -0,0 +1,24 @@
+```css
+ion-accordion {
+ margin: 0 auto;
+}
+
+ion-accordion.accordion-expanding,
+ion-accordion.accordion-expanded {
+ width: calc(100% - 32px);
+
+ margin: 16px auto;
+}
+
+ion-accordion.accordion-collapsing ion-item[slot='header'],
+ion-accordion.accordion-collapsed ion-item[slot='header'] {
+ --background: var(--ion-color-light);
+ --color: var(--ion-color-light-contrast);
+}
+
+ion-accordion.accordion-expanding ion-item[slot='header'],
+ion-accordion.accordion-expanded ion-item[slot='header'] {
+ --background: var(--ion-color-primary);
+ --color: var(--ion-color-primary-contrast);
+}
+```
diff --git a/static/usage/v8/accordion/customization/advanced-expansion-styles/react/main_tsx.md b/static/usage/v8/accordion/customization/advanced-expansion-styles/react/main_tsx.md
new file mode 100644
index 00000000000..01cd873445d
--- /dev/null
+++ b/static/usage/v8/accordion/customization/advanced-expansion-styles/react/main_tsx.md
@@ -0,0 +1,38 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/accordion/customization/advanced-expansion-styles/vue.md b/static/usage/v8/accordion/customization/advanced-expansion-styles/vue.md
new file mode 100644
index 00000000000..5e8e8da6925
--- /dev/null
+++ b/static/usage/v8/accordion/customization/advanced-expansion-styles/vue.md
@@ -0,0 +1,63 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/accordion/customization/expansion-styles/angular.md b/static/usage/v8/accordion/customization/expansion-styles/angular.md
new file mode 100644
index 00000000000..1be81366c58
--- /dev/null
+++ b/static/usage/v8/accordion/customization/expansion-styles/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/customization/expansion-styles/demo.html b/static/usage/v8/accordion/customization/expansion-styles/demo.html
new file mode 100644
index 00000000000..6788f4c362f
--- /dev/null
+++ b/static/usage/v8/accordion/customization/expansion-styles/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+
+
diff --git a/static/usage/v8/accordion/customization/expansion-styles/index.md b/static/usage/v8/accordion/customization/expansion-styles/index.md
new file mode 100644
index 00000000000..9d1b7b0badd
--- /dev/null
+++ b/static/usage/v8/accordion/customization/expansion-styles/index.md
@@ -0,0 +1,18 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/accordion/customization/expansion-styles/javascript.md b/static/usage/v8/accordion/customization/expansion-styles/javascript.md
new file mode 100644
index 00000000000..1be81366c58
--- /dev/null
+++ b/static/usage/v8/accordion/customization/expansion-styles/javascript.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/customization/expansion-styles/react.md b/static/usage/v8/accordion/customization/expansion-styles/react.md
new file mode 100644
index 00000000000..d24cf600956
--- /dev/null
+++ b/static/usage/v8/accordion/customization/expansion-styles/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/accordion/customization/expansion-styles/vue.md b/static/usage/v8/accordion/customization/expansion-styles/vue.md
new file mode 100644
index 00000000000..05f22d0d2ff
--- /dev/null
+++ b/static/usage/v8/accordion/customization/expansion-styles/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v8/accordion/customization/icons/angular.md b/static/usage/v8/accordion/customization/icons/angular.md
new file mode 100644
index 00000000000..2899aeacac6
--- /dev/null
+++ b/static/usage/v8/accordion/customization/icons/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/customization/icons/demo.html b/static/usage/v8/accordion/customization/icons/demo.html
new file mode 100644
index 00000000000..6f473798de4
--- /dev/null
+++ b/static/usage/v8/accordion/customization/icons/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+
+
diff --git a/static/usage/v8/accordion/customization/icons/index.md b/static/usage/v8/accordion/customization/icons/index.md
new file mode 100644
index 00000000000..fd33e08fe9d
--- /dev/null
+++ b/static/usage/v8/accordion/customization/icons/index.md
@@ -0,0 +1,18 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/accordion/customization/icons/javascript.md b/static/usage/v8/accordion/customization/icons/javascript.md
new file mode 100644
index 00000000000..7fd8a091cc8
--- /dev/null
+++ b/static/usage/v8/accordion/customization/icons/javascript.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/customization/icons/react.md b/static/usage/v8/accordion/customization/icons/react.md
new file mode 100644
index 00000000000..2b269c172ed
--- /dev/null
+++ b/static/usage/v8/accordion/customization/icons/react.md
@@ -0,0 +1,37 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+import { caretDownCircle } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/accordion/customization/icons/vue.md b/static/usage/v8/accordion/customization/icons/vue.md
new file mode 100644
index 00000000000..453e9963a89
--- /dev/null
+++ b/static/usage/v8/accordion/customization/icons/vue.md
@@ -0,0 +1,42 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v8/accordion/customization/theming/angular/example_component_html.md b/static/usage/v8/accordion/customization/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..5efdf7b71f9
--- /dev/null
+++ b/static/usage/v8/accordion/customization/theming/angular/example_component_html.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/customization/theming/angular/global_css.md b/static/usage/v8/accordion/customization/theming/angular/global_css.md
new file mode 100644
index 00000000000..141236c6633
--- /dev/null
+++ b/static/usage/v8/accordion/customization/theming/angular/global_css.md
@@ -0,0 +1,23 @@
+```css
+:root {
+ --ion-color-rose: #fecdd3;
+ --ion-color-rose-rgb: 254, 205, 211;
+ --ion-color-rose-contrast: #000000;
+ --ion-color-rose-contrast-rgb: 0, 0, 0;
+ --ion-color-rose-shade: #e0b4ba;
+ --ion-color-rose-tint: #fed2d7;
+}
+
+.ion-color-rose {
+ --ion-color-base: var(--ion-color-rose);
+ --ion-color-base-rgb: var(--ion-color-rose-rgb);
+ --ion-color-contrast: var(--ion-color-rose-contrast);
+ --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+ --ion-color-shade: var(--ion-color-rose-shade);
+ --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+div[slot='content'] {
+ background: rgba(var(--ion-color-rose-rgb), 0.25);
+}
+```
diff --git a/static/usage/v8/accordion/customization/theming/demo.html b/static/usage/v8/accordion/customization/theming/demo.html
new file mode 100644
index 00000000000..307e06ccb2e
--- /dev/null
+++ b/static/usage/v8/accordion/customization/theming/demo.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+
+
diff --git a/static/usage/v8/accordion/customization/theming/index.md b/static/usage/v8/accordion/customization/theming/index.md
new file mode 100644
index 00000000000..fd7198eda71
--- /dev/null
+++ b/static/usage/v8/accordion/customization/theming/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v8/accordion/customization/theming/javascript.md b/static/usage/v8/accordion/customization/theming/javascript.md
new file mode 100644
index 00000000000..179bf5d51c0
--- /dev/null
+++ b/static/usage/v8/accordion/customization/theming/javascript.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+```
diff --git a/static/usage/v8/accordion/customization/theming/react/main_css.md b/static/usage/v8/accordion/customization/theming/react/main_css.md
new file mode 100644
index 00000000000..141236c6633
--- /dev/null
+++ b/static/usage/v8/accordion/customization/theming/react/main_css.md
@@ -0,0 +1,23 @@
+```css
+:root {
+ --ion-color-rose: #fecdd3;
+ --ion-color-rose-rgb: 254, 205, 211;
+ --ion-color-rose-contrast: #000000;
+ --ion-color-rose-contrast-rgb: 0, 0, 0;
+ --ion-color-rose-shade: #e0b4ba;
+ --ion-color-rose-tint: #fed2d7;
+}
+
+.ion-color-rose {
+ --ion-color-base: var(--ion-color-rose);
+ --ion-color-base-rgb: var(--ion-color-rose-rgb);
+ --ion-color-contrast: var(--ion-color-rose-contrast);
+ --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+ --ion-color-shade: var(--ion-color-rose-shade);
+ --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+div[slot='content'] {
+ background: rgba(var(--ion-color-rose-rgb), 0.25);
+}
+```
diff --git a/static/usage/v8/accordion/customization/theming/react/main_tsx.md b/static/usage/v8/accordion/customization/theming/react/main_tsx.md
new file mode 100644
index 00000000000..ecc51a9e15b
--- /dev/null
+++ b/static/usage/v8/accordion/customization/theming/react/main_tsx.md
@@ -0,0 +1,38 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/accordion/customization/theming/vue.md b/static/usage/v8/accordion/customization/theming/vue.md
new file mode 100644
index 00000000000..c049c4b89d8
--- /dev/null
+++ b/static/usage/v8/accordion/customization/theming/vue.md
@@ -0,0 +1,66 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/accordion/disable-group/angular.md b/static/usage/v8/accordion/disable-group/angular.md
new file mode 100644
index 00000000000..5c4cf3b51b3
--- /dev/null
+++ b/static/usage/v8/accordion/disable-group/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/disable-group/demo.html b/static/usage/v8/accordion/disable-group/demo.html
new file mode 100644
index 00000000000..2b9dd566264
--- /dev/null
+++ b/static/usage/v8/accordion/disable-group/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+
+
diff --git a/static/usage/v8/accordion/disable-group/index.md b/static/usage/v8/accordion/disable-group/index.md
new file mode 100644
index 00000000000..8b7c022593e
--- /dev/null
+++ b/static/usage/v8/accordion/disable-group/index.md
@@ -0,0 +1,17 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/accordion/disable-group/javascript.md b/static/usage/v8/accordion/disable-group/javascript.md
new file mode 100644
index 00000000000..163641a544c
--- /dev/null
+++ b/static/usage/v8/accordion/disable-group/javascript.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/disable-group/react.md b/static/usage/v8/accordion/disable-group/react.md
new file mode 100644
index 00000000000..b2ff09b5fe4
--- /dev/null
+++ b/static/usage/v8/accordion/disable-group/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/accordion/disable-group/vue.md b/static/usage/v8/accordion/disable-group/vue.md
new file mode 100644
index 00000000000..6c9e3567845
--- /dev/null
+++ b/static/usage/v8/accordion/disable-group/vue.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v8/accordion/disable/group/angular.md b/static/usage/v8/accordion/disable/group/angular.md
new file mode 100644
index 00000000000..5c4cf3b51b3
--- /dev/null
+++ b/static/usage/v8/accordion/disable/group/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/disable/group/demo.html b/static/usage/v8/accordion/disable/group/demo.html
new file mode 100644
index 00000000000..85983eb3faa
--- /dev/null
+++ b/static/usage/v8/accordion/disable/group/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+
+
diff --git a/static/usage/v8/accordion/disable/group/index.md b/static/usage/v8/accordion/disable/group/index.md
new file mode 100644
index 00000000000..df2ebb1afc5
--- /dev/null
+++ b/static/usage/v8/accordion/disable/group/index.md
@@ -0,0 +1,17 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/accordion/disable/group/javascript.md b/static/usage/v8/accordion/disable/group/javascript.md
new file mode 100644
index 00000000000..163641a544c
--- /dev/null
+++ b/static/usage/v8/accordion/disable/group/javascript.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/disable/group/react.md b/static/usage/v8/accordion/disable/group/react.md
new file mode 100644
index 00000000000..b2ff09b5fe4
--- /dev/null
+++ b/static/usage/v8/accordion/disable/group/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/accordion/disable/group/vue.md b/static/usage/v8/accordion/disable/group/vue.md
new file mode 100644
index 00000000000..6c9e3567845
--- /dev/null
+++ b/static/usage/v8/accordion/disable/group/vue.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v8/accordion/disable/individual/angular.md b/static/usage/v8/accordion/disable/individual/angular.md
new file mode 100644
index 00000000000..56ac780e987
--- /dev/null
+++ b/static/usage/v8/accordion/disable/individual/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion (Disabled)
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/disable/individual/demo.html b/static/usage/v8/accordion/disable/individual/demo.html
new file mode 100644
index 00000000000..e4449f22146
--- /dev/null
+++ b/static/usage/v8/accordion/disable/individual/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion (Disabled)
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+
+
diff --git a/static/usage/v8/accordion/disable/individual/index.md b/static/usage/v8/accordion/disable/individual/index.md
new file mode 100644
index 00000000000..34e31108057
--- /dev/null
+++ b/static/usage/v8/accordion/disable/individual/index.md
@@ -0,0 +1,18 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/accordion/disable/individual/javascript.md b/static/usage/v8/accordion/disable/individual/javascript.md
new file mode 100644
index 00000000000..df5f207512a
--- /dev/null
+++ b/static/usage/v8/accordion/disable/individual/javascript.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion (Disabled)
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/disable/individual/react.md b/static/usage/v8/accordion/disable/individual/react.md
new file mode 100644
index 00000000000..e133354999a
--- /dev/null
+++ b/static/usage/v8/accordion/disable/individual/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/accordion/disable/individual/vue.md b/static/usage/v8/accordion/disable/individual/vue.md
new file mode 100644
index 00000000000..dc26bc3b11f
--- /dev/null
+++ b/static/usage/v8/accordion/disable/individual/vue.md
@@ -0,0 +1,37 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v8/accordion/listen-changes/angular/example_component_html.md b/static/usage/v8/accordion/listen-changes/angular/example_component_html.md
new file mode 100644
index 00000000000..d48c34dd4f4
--- /dev/null
+++ b/static/usage/v8/accordion/listen-changes/angular/example_component_html.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/listen-changes/angular/example_component_ts.md b/static/usage/v8/accordion/listen-changes/angular/example_component_ts.md
new file mode 100644
index 00000000000..3ebbccce6f7
--- /dev/null
+++ b/static/usage/v8/accordion/listen-changes/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ private values: string[] = ['first', 'second', 'third'];
+
+ accordionGroupChange = (ev: any) => {
+ const collapsedItems = this.values.filter((value) => value !== ev.detail.value);
+ const selectedValue = ev.detail.value;
+
+ console.log(
+ `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+ );
+ };
+}
+```
diff --git a/static/usage/v8/accordion/listen-changes/demo.html b/static/usage/v8/accordion/listen-changes/demo.html
new file mode 100644
index 00000000000..0da235b24e7
--- /dev/null
+++ b/static/usage/v8/accordion/listen-changes/demo.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/accordion/listen-changes/index.md b/static/usage/v8/accordion/listen-changes/index.md
new file mode 100644
index 00000000000..673cc344174
--- /dev/null
+++ b/static/usage/v8/accordion/listen-changes/index.md
@@ -0,0 +1,26 @@
+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/accordion/listen-changes/javascript.md b/static/usage/v8/accordion/listen-changes/javascript.md
new file mode 100644
index 00000000000..e47e3311a08
--- /dev/null
+++ b/static/usage/v8/accordion/listen-changes/javascript.md
@@ -0,0 +1,36 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+```
diff --git a/static/usage/v8/accordion/listen-changes/react.md b/static/usage/v8/accordion/listen-changes/react.md
new file mode 100644
index 00000000000..98b4b7fc3e2
--- /dev/null
+++ b/static/usage/v8/accordion/listen-changes/react.md
@@ -0,0 +1,45 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/react';
+function Example() {
+ const values = ['first', 'second', 'third'];
+ const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
+ const collapsedItems = values.filter((value) => value !== ev.detail.value);
+ const selectedValue = ev.detail.value;
+
+ console.log(
+ `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
+ );
+ };
+
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/accordion/listen-changes/vue.md b/static/usage/v8/accordion/listen-changes/vue.md
new file mode 100644
index 00000000000..60607870264
--- /dev/null
+++ b/static/usage/v8/accordion/listen-changes/vue.md
@@ -0,0 +1,53 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v8/accordion/multiple/angular.md b/static/usage/v8/accordion/multiple/angular.md
new file mode 100644
index 00000000000..238f000c458
--- /dev/null
+++ b/static/usage/v8/accordion/multiple/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/multiple/demo.html b/static/usage/v8/accordion/multiple/demo.html
new file mode 100644
index 00000000000..3be84f4dd61
--- /dev/null
+++ b/static/usage/v8/accordion/multiple/demo.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/accordion/multiple/index.md b/static/usage/v8/accordion/multiple/index.md
new file mode 100644
index 00000000000..0e1104ea9a6
--- /dev/null
+++ b/static/usage/v8/accordion/multiple/index.md
@@ -0,0 +1,18 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/accordion/multiple/javascript.md b/static/usage/v8/accordion/multiple/javascript.md
new file mode 100644
index 00000000000..6948ed4e9cc
--- /dev/null
+++ b/static/usage/v8/accordion/multiple/javascript.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+```
diff --git a/static/usage/v8/accordion/multiple/react.md b/static/usage/v8/accordion/multiple/react.md
new file mode 100644
index 00000000000..2bdbb0b365a
--- /dev/null
+++ b/static/usage/v8/accordion/multiple/react.md
@@ -0,0 +1,45 @@
+```tsx
+import React, { useRef, useEffect } from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+ const accordionGroup = useRef(null);
+
+ useEffect(() => {
+ if (!accordionGroup.current) {
+ return;
+ }
+
+ accordionGroup.current.value = ['first', 'third'];
+ }, []);
+
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/accordion/multiple/vue.md b/static/usage/v8/accordion/multiple/vue.md
new file mode 100644
index 00000000000..dcf86fbd7d4
--- /dev/null
+++ b/static/usage/v8/accordion/multiple/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v8/accordion/readonly/group/angular.md b/static/usage/v8/accordion/readonly/group/angular.md
new file mode 100644
index 00000000000..4ebf8c55e4e
--- /dev/null
+++ b/static/usage/v8/accordion/readonly/group/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/readonly/group/demo.html b/static/usage/v8/accordion/readonly/group/demo.html
new file mode 100644
index 00000000000..f2ddccb903b
--- /dev/null
+++ b/static/usage/v8/accordion/readonly/group/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+
+
diff --git a/static/usage/v8/accordion/readonly/group/index.md b/static/usage/v8/accordion/readonly/group/index.md
new file mode 100644
index 00000000000..940c7f6f319
--- /dev/null
+++ b/static/usage/v8/accordion/readonly/group/index.md
@@ -0,0 +1,18 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/accordion/readonly/group/javascript.md b/static/usage/v8/accordion/readonly/group/javascript.md
new file mode 100644
index 00000000000..d511ea5ff0b
--- /dev/null
+++ b/static/usage/v8/accordion/readonly/group/javascript.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/readonly/group/react.md b/static/usage/v8/accordion/readonly/group/react.md
new file mode 100644
index 00000000000..2f26afde9ea
--- /dev/null
+++ b/static/usage/v8/accordion/readonly/group/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/accordion/readonly/group/vue.md b/static/usage/v8/accordion/readonly/group/vue.md
new file mode 100644
index 00000000000..0de1be3fe91
--- /dev/null
+++ b/static/usage/v8/accordion/readonly/group/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v8/accordion/readonly/individual/angular.md b/static/usage/v8/accordion/readonly/individual/angular.md
new file mode 100644
index 00000000000..94013b9d07d
--- /dev/null
+++ b/static/usage/v8/accordion/readonly/individual/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion (Readonly)
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/readonly/individual/demo.html b/static/usage/v8/accordion/readonly/individual/demo.html
new file mode 100644
index 00000000000..6fb3171d90d
--- /dev/null
+++ b/static/usage/v8/accordion/readonly/individual/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion (Readonly)
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+
+
diff --git a/static/usage/v8/accordion/readonly/individual/index.md b/static/usage/v8/accordion/readonly/individual/index.md
new file mode 100644
index 00000000000..7a05160e76e
--- /dev/null
+++ b/static/usage/v8/accordion/readonly/individual/index.md
@@ -0,0 +1,17 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/accordion/readonly/individual/javascript.md b/static/usage/v8/accordion/readonly/individual/javascript.md
new file mode 100644
index 00000000000..e1f78d726db
--- /dev/null
+++ b/static/usage/v8/accordion/readonly/individual/javascript.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion (Readonly)
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+```
diff --git a/static/usage/v8/accordion/readonly/individual/react.md b/static/usage/v8/accordion/readonly/individual/react.md
new file mode 100644
index 00000000000..a6d28a427cd
--- /dev/null
+++ b/static/usage/v8/accordion/readonly/individual/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+ return (
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion (Readonly)
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/accordion/readonly/individual/vue.md b/static/usage/v8/accordion/readonly/individual/vue.md
new file mode 100644
index 00000000000..b9a5daac451
--- /dev/null
+++ b/static/usage/v8/accordion/readonly/individual/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion (Readonly)
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+```
diff --git a/static/usage/v8/accordion/toggle/angular/example_component_html.md b/static/usage/v8/accordion/toggle/angular/example_component_html.md
new file mode 100644
index 00000000000..6af0af8516a
--- /dev/null
+++ b/static/usage/v8/accordion/toggle/angular/example_component_html.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+Toggle Second Accordion
+```
diff --git a/static/usage/v8/accordion/toggle/angular/example_component_ts.md b/static/usage/v8/accordion/toggle/angular/example_component_ts.md
new file mode 100644
index 00000000000..bdcac1d862f
--- /dev/null
+++ b/static/usage/v8/accordion/toggle/angular/example_component_ts.md
@@ -0,0 +1,21 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonAccordionGroup } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild('accordionGroup', { static: true }) accordionGroup: IonAccordionGroup;
+
+ toggleAccordion = () => {
+ const nativeEl = this.accordionGroup;
+ if (nativeEl.value === 'second') {
+ nativeEl.value = undefined;
+ } else {
+ nativeEl.value = 'second';
+ }
+ };
+}
+```
diff --git a/static/usage/v8/accordion/toggle/demo.html b/static/usage/v8/accordion/toggle/demo.html
new file mode 100644
index 00000000000..9052c2f09c3
--- /dev/null
+++ b/static/usage/v8/accordion/toggle/demo.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+
+
+ Toggle Second Accordion
+
+
+
+
+
+
+
diff --git a/static/usage/v8/accordion/toggle/index.md b/static/usage/v8/accordion/toggle/index.md
new file mode 100644
index 00000000000..228af13f4ab
--- /dev/null
+++ b/static/usage/v8/accordion/toggle/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/accordion/toggle/javascript.md b/static/usage/v8/accordion/toggle/javascript.md
new file mode 100644
index 00000000000..058e4e468d6
--- /dev/null
+++ b/static/usage/v8/accordion/toggle/javascript.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+Toggle Second Accordion
+
+
+```
diff --git a/static/usage/v8/accordion/toggle/react.md b/static/usage/v8/accordion/toggle/react.md
new file mode 100644
index 00000000000..8d20c6bb18e
--- /dev/null
+++ b/static/usage/v8/accordion/toggle/react.md
@@ -0,0 +1,51 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+ const accordionGroup = useRef(null);
+ const toggleAccordion = () => {
+ if (!accordionGroup.current) {
+ return;
+ }
+ const nativeEl = accordionGroup.current;
+
+ if (nativeEl.value === 'second') {
+ nativeEl.value = undefined;
+ } else {
+ nativeEl.value = 'second';
+ }
+ };
+ return (
+ <>
+
+
+
+ First Accordion
+
+
+ First Content
+
+
+
+
+ Second Accordion
+
+
+ Second Content
+
+
+
+
+ Third Accordion
+
+
+ Third Content
+
+
+
+ Toggle Second Accordion
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/accordion/toggle/vue.md b/static/usage/v8/accordion/toggle/vue.md
new file mode 100644
index 00000000000..c9fa11c0e9c
--- /dev/null
+++ b/static/usage/v8/accordion/toggle/vue.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+
+ First Accordion
+
+ First Content
+
+
+
+ Second Accordion
+
+ Second Content
+
+
+
+ Third Accordion
+
+ Third Content
+
+
+
+ Toggle Second Accordion
+
+
+
+```
diff --git a/static/usage/v8/action-sheet/controller/angular/example_component_html.md b/static/usage/v8/action-sheet/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..2cc044fbee1
--- /dev/null
+++ b/static/usage/v8/action-sheet/controller/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Open
+```
diff --git a/static/usage/v8/action-sheet/controller/angular/example_component_ts.md b/static/usage/v8/action-sheet/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..c7ecc272663
--- /dev/null
+++ b/static/usage/v8/action-sheet/controller/angular/example_component_ts.md
@@ -0,0 +1,43 @@
+```ts
+import { Component } from '@angular/core';
+
+import { ActionSheetController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private actionSheetCtrl: ActionSheetController) {}
+
+ async presentActionSheet() {
+ const actionSheet = await this.actionSheetCtrl.create({
+ header: 'Actions',
+ buttons: [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete',
+ },
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share',
+ },
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel',
+ },
+ },
+ ],
+ });
+
+ await actionSheet.present();
+ }
+}
+```
diff --git a/static/usage/v8/action-sheet/controller/demo.html b/static/usage/v8/action-sheet/controller/demo.html
new file mode 100644
index 00000000000..5d95b289aa0
--- /dev/null
+++ b/static/usage/v8/action-sheet/controller/demo.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+ Action Sheet
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
diff --git a/static/usage/v8/action-sheet/controller/index.md b/static/usage/v8/action-sheet/controller/index.md
new file mode 100644
index 00000000000..b468ffe9780
--- /dev/null
+++ b/static/usage/v8/action-sheet/controller/index.md
@@ -0,0 +1,27 @@
+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_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v8/action-sheet/controller/javascript.md b/static/usage/v8/action-sheet/controller/javascript.md
new file mode 100644
index 00000000000..e4c32b54f09
--- /dev/null
+++ b/static/usage/v8/action-sheet/controller/javascript.md
@@ -0,0 +1,35 @@
+```html
+Open
+
+
+```
diff --git a/static/usage/v8/action-sheet/controller/react.md b/static/usage/v8/action-sheet/controller/react.md
new file mode 100644
index 00000000000..0fb6f90cbf7
--- /dev/null
+++ b/static/usage/v8/action-sheet/controller/react.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonActionSheet } from '@ionic/react';
+
+function Example() {
+ const [present] = useIonActionSheet();
+
+ return (
+
+ present({
+ header: 'Actions',
+ buttons: [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete',
+ },
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share',
+ },
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel',
+ },
+ },
+ ],
+ })
+ }
+ >
+ Open
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/action-sheet/controller/vue.md b/static/usage/v8/action-sheet/controller/vue.md
new file mode 100644
index 00000000000..8e98e65e36a
--- /dev/null
+++ b/static/usage/v8/action-sheet/controller/vue.md
@@ -0,0 +1,46 @@
+```html
+
+ Open
+
+
+
+```
diff --git a/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_html.md b/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_html.md
new file mode 100644
index 00000000000..a2af98772fd
--- /dev/null
+++ b/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+Open
+
+```
diff --git a/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_ts.md b/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_ts.md
new file mode 100644
index 00000000000..78d9ddf05c8
--- /dev/null
+++ b/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_ts.md
@@ -0,0 +1,37 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ isActionSheetOpen = false;
+ public actionSheetButtons = [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete',
+ },
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share',
+ },
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel',
+ },
+ },
+ ];
+
+ setOpen(isOpen: boolean) {
+ this.isActionSheetOpen = isOpen;
+ }
+}
+```
diff --git a/static/usage/v8/action-sheet/inline/isOpen/demo.html b/static/usage/v8/action-sheet/inline/isOpen/demo.html
new file mode 100644
index 00000000000..24c01f512fa
--- /dev/null
+++ b/static/usage/v8/action-sheet/inline/isOpen/demo.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+ Action Sheet
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
diff --git a/static/usage/v8/action-sheet/inline/isOpen/index.md b/static/usage/v8/action-sheet/inline/isOpen/index.md
new file mode 100644
index 00000000000..1617317fd36
--- /dev/null
+++ b/static/usage/v8/action-sheet/inline/isOpen/index.md
@@ -0,0 +1,27 @@
+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_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v8/action-sheet/inline/isOpen/javascript.md b/static/usage/v8/action-sheet/inline/isOpen/javascript.md
new file mode 100644
index 00000000000..2c0e3b11879
--- /dev/null
+++ b/static/usage/v8/action-sheet/inline/isOpen/javascript.md
@@ -0,0 +1,35 @@
+```html
+Open
+
+
+
+```
diff --git a/static/usage/v8/action-sheet/inline/isOpen/react.md b/static/usage/v8/action-sheet/inline/isOpen/react.md
new file mode 100644
index 00000000000..aebfa63c093
--- /dev/null
+++ b/static/usage/v8/action-sheet/inline/isOpen/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React, { useState } from 'react';
+import { IonActionSheet, IonButton } from '@ionic/react';
+
+function Example() {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+ <>
+ setIsOpen(true)}>Open
+ setIsOpen(false)}
+ >
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/action-sheet/inline/isOpen/vue.md b/static/usage/v8/action-sheet/inline/isOpen/vue.md
new file mode 100644
index 00000000000..9d82efd4ea1
--- /dev/null
+++ b/static/usage/v8/action-sheet/inline/isOpen/vue.md
@@ -0,0 +1,55 @@
+```html
+
+ Open
+
+
+
+
+```
diff --git a/static/usage/v8/action-sheet/inline/trigger/angular/example_component_html.md b/static/usage/v8/action-sheet/inline/trigger/angular/example_component_html.md
new file mode 100644
index 00000000000..b2bebe5de6c
--- /dev/null
+++ b/static/usage/v8/action-sheet/inline/trigger/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+Open
+
+```
diff --git a/static/usage/v8/action-sheet/inline/trigger/angular/example_component_ts.md b/static/usage/v8/action-sheet/inline/trigger/angular/example_component_ts.md
new file mode 100644
index 00000000000..f991151c4a1
--- /dev/null
+++ b/static/usage/v8/action-sheet/inline/trigger/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public actionSheetButtons = [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete',
+ },
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share',
+ },
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel',
+ },
+ },
+ ];
+}
+```
diff --git a/static/usage/v8/action-sheet/inline/trigger/demo.html b/static/usage/v8/action-sheet/inline/trigger/demo.html
new file mode 100644
index 00000000000..82b822b46af
--- /dev/null
+++ b/static/usage/v8/action-sheet/inline/trigger/demo.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+ Action Sheet
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
diff --git a/static/usage/v8/action-sheet/inline/trigger/index.md b/static/usage/v8/action-sheet/inline/trigger/index.md
new file mode 100644
index 00000000000..fb6c0e9d33f
--- /dev/null
+++ b/static/usage/v8/action-sheet/inline/trigger/index.md
@@ -0,0 +1,27 @@
+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_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v8/action-sheet/inline/trigger/javascript.md b/static/usage/v8/action-sheet/inline/trigger/javascript.md
new file mode 100644
index 00000000000..d705a0162b5
--- /dev/null
+++ b/static/usage/v8/action-sheet/inline/trigger/javascript.md
@@ -0,0 +1,31 @@
+```html
+Open
+
+
+
+```
diff --git a/static/usage/v8/action-sheet/inline/trigger/react.md b/static/usage/v8/action-sheet/inline/trigger/react.md
new file mode 100644
index 00000000000..54c1793d713
--- /dev/null
+++ b/static/usage/v8/action-sheet/inline/trigger/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import { IonActionSheet, IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Open
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/action-sheet/inline/trigger/vue.md b/static/usage/v8/action-sheet/inline/trigger/vue.md
new file mode 100644
index 00000000000..c32a8ea9bdd
--- /dev/null
+++ b/static/usage/v8/action-sheet/inline/trigger/vue.md
@@ -0,0 +1,40 @@
+```html
+
+ Open
+
+
+
+
+```
diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_css.md b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_css.md
new file mode 100644
index 00000000000..6bf8f4dc7fc
--- /dev/null
+++ b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_css.md
@@ -0,0 +1,9 @@
+```css
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ height: 100%;
+}
+```
diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_html.md b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_html.md
new file mode 100644
index 00000000000..7896f219737
--- /dev/null
+++ b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+ Open
+
+
+```
diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
new file mode 100644
index 00000000000..a38c0b92307
--- /dev/null
+++ b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
@@ -0,0 +1,39 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+ public actionSheetButtons = [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete',
+ },
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share',
+ },
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel',
+ },
+ },
+ ];
+
+ constructor() {}
+
+ logResult(ev) {
+ console.log(JSON.stringify(ev.detail, null, 2));
+ }
+}
+```
diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/demo.html b/static/usage/v8/action-sheet/role-info-on-dismiss/demo.html
new file mode 100644
index 00000000000..f23f60bbb19
--- /dev/null
+++ b/static/usage/v8/action-sheet/role-info-on-dismiss/demo.html
@@ -0,0 +1,63 @@
+
+
+
+
+
+ Action Sheet
+
+
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/index.md b/static/usage/v8/action-sheet/role-info-on-dismiss/index.md
new file mode 100644
index 00000000000..49c11c0bff5
--- /dev/null
+++ b/static/usage/v8/action-sheet/role-info-on-dismiss/index.md
@@ -0,0 +1,36 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/javascript.md b/static/usage/v8/action-sheet/role-info-on-dismiss/javascript.md
new file mode 100644
index 00000000000..b21645ebac8
--- /dev/null
+++ b/static/usage/v8/action-sheet/role-info-on-dismiss/javascript.md
@@ -0,0 +1,51 @@
+```html
+
+
+
+ Open
+
+
+
+
+```
diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/react/main_css.md b/static/usage/v8/action-sheet/role-info-on-dismiss/react/main_css.md
new file mode 100644
index 00000000000..6bf8f4dc7fc
--- /dev/null
+++ b/static/usage/v8/action-sheet/role-info-on-dismiss/react/main_css.md
@@ -0,0 +1,9 @@
+```css
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ height: 100%;
+}
+```
diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/react/main_tsx.md b/static/usage/v8/action-sheet/role-info-on-dismiss/react/main_tsx.md
new file mode 100644
index 00000000000..5728ab3c194
--- /dev/null
+++ b/static/usage/v8/action-sheet/role-info-on-dismiss/react/main_tsx.md
@@ -0,0 +1,48 @@
+```tsx
+import React from 'react';
+import { IonActionSheet, IonButton } from '@ionic/react';
+import type { OverlayEventDetail } from '@ionic/core';
+
+import './main.css';
+
+function Example() {
+ const logResult = (result: OverlayEventDetail) => {
+ console.log(JSON.stringify(result, null, 2));
+ };
+
+ return (
+
+ Open
+ logResult(detail)}
+ >
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/vue.md b/static/usage/v8/action-sheet/role-info-on-dismiss/vue.md
new file mode 100644
index 00000000000..6f56c29920d
--- /dev/null
+++ b/static/usage/v8/action-sheet/role-info-on-dismiss/vue.md
@@ -0,0 +1,65 @@
+```html
+
+
+
+
+ Open
+
+
+
+
+
+```
diff --git a/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_html.md b/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..0aa27e460f6
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+Open
+
+```
diff --git a/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_ts.md
new file mode 100644
index 00000000000..d9714abb668
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_ts.md
@@ -0,0 +1,35 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+ public actionSheetButtons = [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete',
+ },
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share',
+ },
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel',
+ },
+ },
+ ];
+
+ constructor() {}
+}
+```
diff --git a/static/usage/v8/action-sheet/theming/css-properties/angular/global_css.md b/static/usage/v8/action-sheet/theming/css-properties/angular/global_css.md
new file mode 100644
index 00000000000..2d9e22b3163
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/css-properties/angular/global_css.md
@@ -0,0 +1,12 @@
+```css
+/* Note: These styles should be located in your global stylesheet */
+ion-action-sheet.my-custom-class {
+ --background: #f58840;
+ --backdrop-opacity: 0.6;
+ --button-background-selected: #e97223;
+ --button-color: #000000;
+ --color: #fff;
+ /* role: "destructive" button iOS styling override */
+ --ion-color-danger: #000000;
+}
+```
diff --git a/static/usage/v8/action-sheet/theming/css-properties/demo.html b/static/usage/v8/action-sheet/theming/css-properties/demo.html
new file mode 100644
index 00000000000..4bd9f9890af
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/css-properties/demo.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+ Action Sheet
+
+
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
diff --git a/static/usage/v8/action-sheet/theming/css-properties/index.md b/static/usage/v8/action-sheet/theming/css-properties/index.md
new file mode 100644
index 00000000000..23438c19178
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/css-properties/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v8/action-sheet/theming/css-properties/javascript.md b/static/usage/v8/action-sheet/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..cbc9332589a
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/css-properties/javascript.md
@@ -0,0 +1,48 @@
+```html
+
+
+Open
+
+
+
+```
diff --git a/static/usage/v8/action-sheet/theming/css-properties/react/main_css.md b/static/usage/v8/action-sheet/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..63809ed75c7
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/css-properties/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-action-sheet.my-custom-class {
+ --background: #f58840;
+ --backdrop-opacity: 0.6;
+ --button-background-selected: #e97223;
+ --button-color: #000000;
+ --color: #fff;
+ /* role: "destructive" button iOS styling override */
+ --ion-color-danger: #000000;
+}
+```
diff --git a/static/usage/v8/action-sheet/theming/css-properties/react/main_tsx.md b/static/usage/v8/action-sheet/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..fc0c08e0a57
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonActionSheet, IonButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Open
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/action-sheet/theming/css-properties/vue.md b/static/usage/v8/action-sheet/theming/css-properties/vue.md
new file mode 100644
index 00000000000..2f8cc168f58
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/css-properties/vue.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+ Open
+
+
+
+
+```
diff --git a/static/usage/v8/action-sheet/theming/styling/angular/example_component_html.md b/static/usage/v8/action-sheet/theming/styling/angular/example_component_html.md
new file mode 100644
index 00000000000..0aa27e460f6
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/styling/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+Open
+
+```
diff --git a/static/usage/v8/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/v8/action-sheet/theming/styling/angular/example_component_ts.md
new file mode 100644
index 00000000000..d9714abb668
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/styling/angular/example_component_ts.md
@@ -0,0 +1,35 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+ public actionSheetButtons = [
+ {
+ text: 'Delete',
+ role: 'destructive',
+ data: {
+ action: 'delete',
+ },
+ },
+ {
+ text: 'Share',
+ data: {
+ action: 'share',
+ },
+ },
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ data: {
+ action: 'cancel',
+ },
+ },
+ ];
+
+ constructor() {}
+}
+```
diff --git a/static/usage/v8/action-sheet/theming/styling/angular/global_css.md b/static/usage/v8/action-sheet/theming/styling/angular/global_css.md
new file mode 100644
index 00000000000..46999a97921
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/styling/angular/global_css.md
@@ -0,0 +1,29 @@
+```css
+/* Note: These styles should be located in your global stylesheet */
+ion-action-sheet.my-custom-class .action-sheet-group {
+ background: #f58840;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-title {
+ color: #fff;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-cancel::after {
+ background: #e97223;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-button,
+ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
+ color: #000000;
+}
+
+@media (any-hover: hover) {
+ ion-action-sheet.my-custom-class .action-sheet-button:hover {
+ color: #000000;
+ }
+}
+
+ion-action-sheet.my-custom-class ion-backdrop {
+ opacity: 0.6;
+}
+```
diff --git a/static/usage/v8/action-sheet/theming/styling/demo.html b/static/usage/v8/action-sheet/theming/styling/demo.html
new file mode 100644
index 00000000000..b05f0a68fa3
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/styling/demo.html
@@ -0,0 +1,83 @@
+
+
+
+
+
+ Action Sheet
+
+
+
+
+
+
+
+
+
+
+
+
+ Open
+
+
+
+
+
+
+
diff --git a/static/usage/v8/action-sheet/theming/styling/index.md b/static/usage/v8/action-sheet/theming/styling/index.md
new file mode 100644
index 00000000000..e6edcd7f4e1
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/styling/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v8/action-sheet/theming/styling/javascript.md b/static/usage/v8/action-sheet/theming/styling/javascript.md
new file mode 100644
index 00000000000..90e2725d0df
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/styling/javascript.md
@@ -0,0 +1,65 @@
+```html
+
+
+Open
+
+
+
+```
diff --git a/static/usage/v8/action-sheet/theming/styling/react/main_css.md b/static/usage/v8/action-sheet/theming/styling/react/main_css.md
new file mode 100644
index 00000000000..cff22cfd41e
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/styling/react/main_css.md
@@ -0,0 +1,28 @@
+```css
+ion-action-sheet.my-custom-class .action-sheet-group {
+ background: #f58840;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-title {
+ color: #fff;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-cancel::after {
+ background: #e97223;
+}
+
+ion-action-sheet.my-custom-class .action-sheet-button,
+ion-action-sheet.my-custom-class .action-sheet-button.ion-focused {
+ color: #000000;
+}
+
+@media (any-hover: hover) {
+ ion-action-sheet.my-custom-class .action-sheet-button:hover {
+ color: #000000;
+ }
+}
+
+ion-action-sheet.my-custom-class ion-backdrop {
+ opacity: 0.6;
+}
+```
diff --git a/static/usage/v8/action-sheet/theming/styling/react/main_tsx.md b/static/usage/v8/action-sheet/theming/styling/react/main_tsx.md
new file mode 100644
index 00000000000..fc0c08e0a57
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/styling/react/main_tsx.md
@@ -0,0 +1,43 @@
+```tsx
+import React from 'react';
+import { IonActionSheet, IonButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Open
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/action-sheet/theming/styling/vue.md b/static/usage/v8/action-sheet/theming/styling/vue.md
new file mode 100644
index 00000000000..c46ae0bcbd3
--- /dev/null
+++ b/static/usage/v8/action-sheet/theming/styling/vue.md
@@ -0,0 +1,75 @@
+```html
+
+
+
+ Open
+
+
+
+
+```
diff --git a/static/usage/v8/alert/buttons/angular/example_component_html.md b/static/usage/v8/alert/buttons/angular/example_component_html.md
new file mode 100644
index 00000000000..e9843417484
--- /dev/null
+++ b/static/usage/v8/alert/buttons/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+Click Me
+
+```
diff --git a/static/usage/v8/alert/buttons/angular/example_component_ts.md b/static/usage/v8/alert/buttons/angular/example_component_ts.md
new file mode 100644
index 00000000000..20858d60e46
--- /dev/null
+++ b/static/usage/v8/alert/buttons/angular/example_component_ts.md
@@ -0,0 +1,30 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public alertButtons = [
+ {
+ text: 'Cancel',
+ role: 'cancel',
+ handler: () => {
+ console.log('Alert canceled');
+ },
+ },
+ {
+ text: 'OK',
+ role: 'confirm',
+ handler: () => {
+ console.log('Alert confirmed');
+ },
+ },
+ ];
+
+ setResult(ev) {
+ console.log(`Dismissed with role: ${ev.detail.role}`);
+ }
+}
+```
diff --git a/static/usage/v8/alert/buttons/demo.html b/static/usage/v8/alert/buttons/demo.html
new file mode 100644
index 00000000000..77b29df207e
--- /dev/null
+++ b/static/usage/v8/alert/buttons/demo.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+ Alert
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/alert/buttons/index.md b/static/usage/v8/alert/buttons/index.md
new file mode 100644
index 00000000000..31b222af523
--- /dev/null
+++ b/static/usage/v8/alert/buttons/index.md
@@ -0,0 +1,26 @@
+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/alert/buttons/javascript.md b/static/usage/v8/alert/buttons/javascript.md
new file mode 100644
index 00000000000..21a45f7cf4d
--- /dev/null
+++ b/static/usage/v8/alert/buttons/javascript.md
@@ -0,0 +1,29 @@
+```html
+Click Me
+
+
+
+```
diff --git a/static/usage/v8/alert/buttons/react.md b/static/usage/v8/alert/buttons/react.md
new file mode 100644
index 00000000000..f9983f46d84
--- /dev/null
+++ b/static/usage/v8/alert/buttons/react.md
@@ -0,0 +1,34 @@
+```tsx
+import React from 'react';
+import { IonAlert, IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Click Me
+ {
+ console.log('Alert canceled');
+ },
+ },
+ {
+ text: 'OK',
+ role: 'confirm',
+ handler: () => {
+ console.log('Alert confirmed');
+ },
+ },
+ ]}
+ onDidDismiss={({ detail }) => console.log(`Dismissed with role: ${detail.role}`)}
+ >
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/alert/buttons/vue.md b/static/usage/v8/alert/buttons/vue.md
new file mode 100644
index 00000000000..245797ab7c1
--- /dev/null
+++ b/static/usage/v8/alert/buttons/vue.md
@@ -0,0 +1,36 @@
+```html
+
+ Click Me
+
+
+
+
+```
diff --git a/static/usage/v8/alert/customization/angular/example_component_html.md b/static/usage/v8/alert/customization/angular/example_component_html.md
new file mode 100644
index 00000000000..762d3c21d89
--- /dev/null
+++ b/static/usage/v8/alert/customization/angular/example_component_html.md
@@ -0,0 +1,4 @@
+```html
+Click Me
+
+```
diff --git a/static/usage/v8/alert/customization/angular/example_component_ts.md b/static/usage/v8/alert/customization/angular/example_component_ts.md
new file mode 100644
index 00000000000..51552ff9852
--- /dev/null
+++ b/static/usage/v8/alert/customization/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public alertButtons = [
+ {
+ text: 'No',
+ cssClass: 'alert-button-cancel',
+ },
+ {
+ text: 'Yes',
+ cssClass: 'alert-button-confirm',
+ },
+ ];
+}
+```
diff --git a/static/usage/v8/alert/customization/angular/global_css.md b/static/usage/v8/alert/customization/angular/global_css.md
new file mode 100644
index 00000000000..c84c1456e58
--- /dev/null
+++ b/static/usage/v8/alert/customization/angular/global_css.md
@@ -0,0 +1,33 @@
+```css
+ion-alert.custom-alert {
+ --backdrop-opacity: 0.7;
+}
+
+.custom-alert .alert-button-group {
+ padding: 8px;
+}
+
+button.alert-button.alert-button-confirm {
+ background-color: var(--ion-color-success);
+ color: var(--ion-color-success-contrast);
+}
+
+.md button.alert-button.alert-button-confirm {
+ border-radius: 4px;
+}
+
+.ios .custom-alert button.alert-button {
+ border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
+}
+
+.ios button.alert-button.alert-button-cancel {
+ border-right: 0;
+ border-bottom-left-radius: 13px;
+ border-top-left-radius: 13px;
+}
+
+.ios button.alert-button.alert-button-confirm {
+ border-bottom-right-radius: 13px;
+ border-top-right-radius: 13px;
+}
+```
diff --git a/static/usage/v8/alert/customization/demo.html b/static/usage/v8/alert/customization/demo.html
new file mode 100644
index 00000000000..dd64e174ce6
--- /dev/null
+++ b/static/usage/v8/alert/customization/demo.html
@@ -0,0 +1,72 @@
+
+
+
+
+
+ Alert
+
+
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/alert/customization/index.md b/static/usage/v8/alert/customization/index.md
new file mode 100644
index 00000000000..7df2aca2363
--- /dev/null
+++ b/static/usage/v8/alert/customization/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_ts from './angular/example_component_ts.md';
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v8/alert/customization/javascript.md b/static/usage/v8/alert/customization/javascript.md
new file mode 100644
index 00000000000..a3c31a1b432
--- /dev/null
+++ b/static/usage/v8/alert/customization/javascript.md
@@ -0,0 +1,53 @@
+```html
+Click Me
+
+
+
+
+
+```
diff --git a/static/usage/v8/alert/customization/react/main_css.md b/static/usage/v8/alert/customization/react/main_css.md
new file mode 100644
index 00000000000..c84c1456e58
--- /dev/null
+++ b/static/usage/v8/alert/customization/react/main_css.md
@@ -0,0 +1,33 @@
+```css
+ion-alert.custom-alert {
+ --backdrop-opacity: 0.7;
+}
+
+.custom-alert .alert-button-group {
+ padding: 8px;
+}
+
+button.alert-button.alert-button-confirm {
+ background-color: var(--ion-color-success);
+ color: var(--ion-color-success-contrast);
+}
+
+.md button.alert-button.alert-button-confirm {
+ border-radius: 4px;
+}
+
+.ios .custom-alert button.alert-button {
+ border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
+}
+
+.ios button.alert-button.alert-button-cancel {
+ border-right: 0;
+ border-bottom-left-radius: 13px;
+ border-top-left-radius: 13px;
+}
+
+.ios button.alert-button.alert-button-confirm {
+ border-bottom-right-radius: 13px;
+ border-top-right-radius: 13px;
+}
+```
diff --git a/static/usage/v8/alert/customization/react/main_tsx.md b/static/usage/v8/alert/customization/react/main_tsx.md
new file mode 100644
index 00000000000..b32663d5339
--- /dev/null
+++ b/static/usage/v8/alert/customization/react/main_tsx.md
@@ -0,0 +1,30 @@
+```tsx
+import React from 'react';
+import { IonAlert, IonButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Click Me
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/alert/customization/vue.md b/static/usage/v8/alert/customization/vue.md
new file mode 100644
index 00000000000..eafb78ae012
--- /dev/null
+++ b/static/usage/v8/alert/customization/vue.md
@@ -0,0 +1,55 @@
+```html
+
+ Click Me
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/alert/inputs/radios/angular/example_component_html.md b/static/usage/v8/alert/inputs/radios/angular/example_component_html.md
new file mode 100644
index 00000000000..cc22c178c35
--- /dev/null
+++ b/static/usage/v8/alert/inputs/radios/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+Click Me
+
+```
diff --git a/static/usage/v8/alert/inputs/radios/angular/example_component_ts.md b/static/usage/v8/alert/inputs/radios/angular/example_component_ts.md
new file mode 100644
index 00000000000..34f44b288da
--- /dev/null
+++ b/static/usage/v8/alert/inputs/radios/angular/example_component_ts.md
@@ -0,0 +1,28 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public alertButtons = ['OK'];
+ public alertInputs = [
+ {
+ label: 'Red',
+ type: 'radio',
+ value: 'red',
+ },
+ {
+ label: 'Blue',
+ type: 'radio',
+ value: 'blue',
+ },
+ {
+ label: 'Green',
+ type: 'radio',
+ value: 'green',
+ },
+ ];
+}
+```
diff --git a/static/usage/v8/alert/inputs/radios/demo.html b/static/usage/v8/alert/inputs/radios/demo.html
new file mode 100644
index 00000000000..cf16f38fca9
--- /dev/null
+++ b/static/usage/v8/alert/inputs/radios/demo.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+ Alert
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/alert/inputs/radios/index.md b/static/usage/v8/alert/inputs/radios/index.md
new file mode 100644
index 00000000000..7baa0a4fe41
--- /dev/null
+++ b/static/usage/v8/alert/inputs/radios/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/alert/inputs/radios/javascript.md b/static/usage/v8/alert/inputs/radios/javascript.md
new file mode 100644
index 00000000000..570a7f4cb6b
--- /dev/null
+++ b/static/usage/v8/alert/inputs/radios/javascript.md
@@ -0,0 +1,27 @@
+```html
+Click Me
+
+
+
+```
diff --git a/static/usage/v8/alert/inputs/radios/react.md b/static/usage/v8/alert/inputs/radios/react.md
new file mode 100644
index 00000000000..13518c02aa4
--- /dev/null
+++ b/static/usage/v8/alert/inputs/radios/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonAlert, IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Click Me
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/alert/inputs/radios/vue.md b/static/usage/v8/alert/inputs/radios/vue.md
new file mode 100644
index 00000000000..c2b937c1472
--- /dev/null
+++ b/static/usage/v8/alert/inputs/radios/vue.md
@@ -0,0 +1,34 @@
+```html
+
+ Click Me
+
+
+
+
+```
diff --git a/static/usage/v8/alert/inputs/text-inputs/angular/example_component_html.md b/static/usage/v8/alert/inputs/text-inputs/angular/example_component_html.md
new file mode 100644
index 00000000000..0ae990d9a50
--- /dev/null
+++ b/static/usage/v8/alert/inputs/text-inputs/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+Click Me
+
+```
diff --git a/static/usage/v8/alert/inputs/text-inputs/angular/example_component_ts.md b/static/usage/v8/alert/inputs/text-inputs/angular/example_component_ts.md
new file mode 100644
index 00000000000..713dc9067fa
--- /dev/null
+++ b/static/usage/v8/alert/inputs/text-inputs/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ public alertButtons = ['OK'];
+ public alertInputs = [
+ {
+ placeholder: 'Name',
+ },
+ {
+ placeholder: 'Nickname (max 8 characters)',
+ attributes: {
+ maxlength: 8,
+ },
+ },
+ {
+ type: 'number',
+ placeholder: 'Age',
+ min: 1,
+ max: 100,
+ },
+ {
+ type: 'textarea',
+ placeholder: 'A little about yourself',
+ },
+ ];
+}
+```
diff --git a/static/usage/v8/alert/inputs/text-inputs/demo.html b/static/usage/v8/alert/inputs/text-inputs/demo.html
new file mode 100644
index 00000000000..f199dc99a49
--- /dev/null
+++ b/static/usage/v8/alert/inputs/text-inputs/demo.html
@@ -0,0 +1,50 @@
+
+
+
+
+
+ Alert
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/alert/inputs/text-inputs/index.md b/static/usage/v8/alert/inputs/text-inputs/index.md
new file mode 100644
index 00000000000..e11333a0fcd
--- /dev/null
+++ b/static/usage/v8/alert/inputs/text-inputs/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/alert/inputs/text-inputs/javascript.md b/static/usage/v8/alert/inputs/text-inputs/javascript.md
new file mode 100644
index 00000000000..bbbd043c5e7
--- /dev/null
+++ b/static/usage/v8/alert/inputs/text-inputs/javascript.md
@@ -0,0 +1,31 @@
+```html
+Click Me
+
+
+
+```
diff --git a/static/usage/v8/alert/inputs/text-inputs/react.md b/static/usage/v8/alert/inputs/text-inputs/react.md
new file mode 100644
index 00000000000..fbea607f2b3
--- /dev/null
+++ b/static/usage/v8/alert/inputs/text-inputs/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import { IonAlert, IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Click Me
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/alert/inputs/text-inputs/vue.md b/static/usage/v8/alert/inputs/text-inputs/vue.md
new file mode 100644
index 00000000000..fe4072e756d
--- /dev/null
+++ b/static/usage/v8/alert/inputs/text-inputs/vue.md
@@ -0,0 +1,38 @@
+```html
+
+ Click Me
+
+
+
+
+```
diff --git a/static/usage/v8/alert/presenting/controller/angular/example_component_html.md b/static/usage/v8/alert/presenting/controller/angular/example_component_html.md
new file mode 100644
index 00000000000..183dd98719d
--- /dev/null
+++ b/static/usage/v8/alert/presenting/controller/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Click Me
+```
diff --git a/static/usage/v8/alert/presenting/controller/angular/example_component_ts.md b/static/usage/v8/alert/presenting/controller/angular/example_component_ts.md
new file mode 100644
index 00000000000..6fdd69c7f69
--- /dev/null
+++ b/static/usage/v8/alert/presenting/controller/angular/example_component_ts.md
@@ -0,0 +1,23 @@
+```ts
+import { Component } from '@angular/core';
+import { AlertController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ constructor(private alertController: AlertController) {}
+
+ async presentAlert() {
+ const alert = await this.alertController.create({
+ header: 'A Short Title Is Best',
+ subHeader: 'A Sub Header Is Optional',
+ message: 'A message should be a short, complete sentence.',
+ buttons: ['Action'],
+ });
+
+ await alert.present();
+ }
+}
+```
diff --git a/static/usage/v8/alert/presenting/controller/demo.html b/static/usage/v8/alert/presenting/controller/demo.html
new file mode 100644
index 00000000000..733a0834396
--- /dev/null
+++ b/static/usage/v8/alert/presenting/controller/demo.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+ Alert
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
diff --git a/static/usage/v8/alert/presenting/controller/index.md b/static/usage/v8/alert/presenting/controller/index.md
new file mode 100644
index 00000000000..1899bad65db
--- /dev/null
+++ b/static/usage/v8/alert/presenting/controller/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/alert/presenting/controller/javascript.md b/static/usage/v8/alert/presenting/controller/javascript.md
new file mode 100644
index 00000000000..0847251aba7
--- /dev/null
+++ b/static/usage/v8/alert/presenting/controller/javascript.md
@@ -0,0 +1,16 @@
+```html
+Click Me
+
+
+```
diff --git a/static/usage/v8/alert/presenting/controller/react.md b/static/usage/v8/alert/presenting/controller/react.md
new file mode 100644
index 00000000000..0ae2dbec301
--- /dev/null
+++ b/static/usage/v8/alert/presenting/controller/react.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonButton, useIonAlert } from '@ionic/react';
+
+function Example() {
+ const [presentAlert] = useIonAlert();
+
+ return (
+
+ presentAlert({
+ header: 'A Short Title Is Best',
+ subHeader: 'A Sub Header Is Optional',
+ message: 'A message should be a short, complete sentence.',
+ buttons: ['Action'],
+ })
+ }
+ >
+ Click Me
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/alert/presenting/controller/vue.md b/static/usage/v8/alert/presenting/controller/vue.md
new file mode 100644
index 00000000000..ed0a4da5fc7
--- /dev/null
+++ b/static/usage/v8/alert/presenting/controller/vue.md
@@ -0,0 +1,20 @@
+```html
+
+ Click Me
+
+
+
+```
diff --git a/static/usage/v8/alert/presenting/isOpen/angular/example_component_html.md b/static/usage/v8/alert/presenting/isOpen/angular/example_component_html.md
new file mode 100644
index 00000000000..6394f95a34b
--- /dev/null
+++ b/static/usage/v8/alert/presenting/isOpen/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+Click Me
+
+```
diff --git a/static/usage/v8/alert/presenting/isOpen/angular/example_component_ts.md b/static/usage/v8/alert/presenting/isOpen/angular/example_component_ts.md
new file mode 100644
index 00000000000..82d1f17e457
--- /dev/null
+++ b/static/usage/v8/alert/presenting/isOpen/angular/example_component_ts.md
@@ -0,0 +1,16 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ isAlertOpen = false;
+ alertButtons = ['Action'];
+
+ setOpen(isOpen: boolean) {
+ this.isAlertOpen = isOpen;
+ }
+}
+```
diff --git a/static/usage/v8/alert/presenting/isOpen/demo.html b/static/usage/v8/alert/presenting/isOpen/demo.html
new file mode 100644
index 00000000000..d1177baab8f
--- /dev/null
+++ b/static/usage/v8/alert/presenting/isOpen/demo.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+ Alert
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/alert/presenting/isOpen/index.md b/static/usage/v8/alert/presenting/isOpen/index.md
new file mode 100644
index 00000000000..550a18e02bd
--- /dev/null
+++ b/static/usage/v8/alert/presenting/isOpen/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/alert/presenting/isOpen/javascript.md b/static/usage/v8/alert/presenting/isOpen/javascript.md
new file mode 100644
index 00000000000..67ae47c5770
--- /dev/null
+++ b/static/usage/v8/alert/presenting/isOpen/javascript.md
@@ -0,0 +1,17 @@
+```html
+Click Me
+
+
+
+```
diff --git a/static/usage/v8/alert/presenting/isOpen/react.md b/static/usage/v8/alert/presenting/isOpen/react.md
new file mode 100644
index 00000000000..e55bf79f93b
--- /dev/null
+++ b/static/usage/v8/alert/presenting/isOpen/react.md
@@ -0,0 +1,23 @@
+```tsx
+import React, { useState } from 'react';
+import { IonAlert, IonButton } from '@ionic/react';
+
+function Example() {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+ <>
+ setIsOpen(true)}>Click Me
+ setIsOpen(false)}
+ >
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/alert/presenting/isOpen/vue.md b/static/usage/v8/alert/presenting/isOpen/vue.md
new file mode 100644
index 00000000000..1d23990668b
--- /dev/null
+++ b/static/usage/v8/alert/presenting/isOpen/vue.md
@@ -0,0 +1,25 @@
+```html
+
+ Click Me
+
+
+
+
+```
diff --git a/static/usage/v8/alert/presenting/trigger/angular/example_component_html.md b/static/usage/v8/alert/presenting/trigger/angular/example_component_html.md
new file mode 100644
index 00000000000..65d165d2173
--- /dev/null
+++ b/static/usage/v8/alert/presenting/trigger/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+Click Me
+
+```
diff --git a/static/usage/v8/alert/presenting/trigger/angular/example_component_ts.md b/static/usage/v8/alert/presenting/trigger/angular/example_component_ts.md
new file mode 100644
index 00000000000..9526ebdde8f
--- /dev/null
+++ b/static/usage/v8/alert/presenting/trigger/angular/example_component_ts.md
@@ -0,0 +1,11 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ alertButtons = ['Action'];
+}
+```
diff --git a/static/usage/v8/alert/presenting/trigger/demo.html b/static/usage/v8/alert/presenting/trigger/demo.html
new file mode 100644
index 00000000000..f7d42a2e29e
--- /dev/null
+++ b/static/usage/v8/alert/presenting/trigger/demo.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+ Alert
+
+
+
+
+
+
+
+
+
+
+ Click Me
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/alert/presenting/trigger/index.md b/static/usage/v8/alert/presenting/trigger/index.md
new file mode 100644
index 00000000000..475e7d5c079
--- /dev/null
+++ b/static/usage/v8/alert/presenting/trigger/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/alert/presenting/trigger/javascript.md b/static/usage/v8/alert/presenting/trigger/javascript.md
new file mode 100644
index 00000000000..9496421db5b
--- /dev/null
+++ b/static/usage/v8/alert/presenting/trigger/javascript.md
@@ -0,0 +1,14 @@
+```html
+Click Me
+
+
+
+```
diff --git a/static/usage/v8/alert/presenting/trigger/react.md b/static/usage/v8/alert/presenting/trigger/react.md
new file mode 100644
index 00000000000..4d10a5ad085
--- /dev/null
+++ b/static/usage/v8/alert/presenting/trigger/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonAlert, IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Click Me
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/alert/presenting/trigger/vue.md b/static/usage/v8/alert/presenting/trigger/vue.md
new file mode 100644
index 00000000000..344797317dc
--- /dev/null
+++ b/static/usage/v8/alert/presenting/trigger/vue.md
@@ -0,0 +1,18 @@
+```html
+
+ Click Me
+
+
+
+
+```
diff --git a/static/usage/v8/animations/basic/angular/example_component_html.md b/static/usage/v8/animations/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..1bd8875b1b3
--- /dev/null
+++ b/static/usage/v8/animations/basic/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+
+ Card
+
+
+Play
+Pause
+Stop
+```
diff --git a/static/usage/v8/animations/basic/angular/example_component_ts.md b/static/usage/v8/animations/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..e8a1dae1af8
--- /dev/null
+++ b/static/usage/v8/animations/basic/angular/example_component_ts.md
@@ -0,0 +1,40 @@
+```ts
+import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
+import type { QueryList } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild(IonCard, { read: ElementRef }) card: ElementRef;
+
+ private animation: Animation;
+
+ constructor(private animationCtrl: AnimationController) {}
+
+ ngAfterViewInit() {
+ this.animation = this.animationCtrl
+ .create()
+ .addElement(this.card.nativeElement)
+ .duration(1500)
+ .iterations(Infinity)
+ .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+ .fromTo('opacity', '1', '0.2');
+ }
+
+ play() {
+ this.animation.play();
+ }
+
+ pause() {
+ this.animation.pause();
+ }
+
+ stop() {
+ this.animation.stop();
+ }
+}
+```
diff --git a/static/usage/v8/animations/basic/demo.html b/static/usage/v8/animations/basic/demo.html
new file mode 100644
index 00000000000..e1d26629509
--- /dev/null
+++ b/static/usage/v8/animations/basic/demo.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+ Animation
+
+
+
+
+
+
+
+
+
+
+
+
+ Card
+
+
+
+ Play
+ Pause
+ Stop
+
+
+
+
diff --git a/static/usage/v8/animations/basic/index.md b/static/usage/v8/animations/basic/index.md
new file mode 100644
index 00000000000..deaa900d881
--- /dev/null
+++ b/static/usage/v8/animations/basic/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/animations/basic/javascript.md b/static/usage/v8/animations/basic/javascript.md
new file mode 100644
index 00000000000..3c98a4e039f
--- /dev/null
+++ b/static/usage/v8/animations/basic/javascript.md
@@ -0,0 +1,18 @@
+```html
+
+ Card
+
+
+Play
+Pause
+Stop
+
+
+```
diff --git a/static/usage/v8/animations/basic/react.md b/static/usage/v8/animations/basic/react.md
new file mode 100644
index 00000000000..9134a2d9f24
--- /dev/null
+++ b/static/usage/v8/animations/basic/react.md
@@ -0,0 +1,45 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+function Example() {
+ const cardEl = useRef(null);
+
+ const animation = useRef(null);
+
+ useEffect(() => {
+ if (animation.current === null) {
+ animation.current = createAnimation()
+ .addElement(cardEl.current!)
+ .duration(1500)
+ .iterations(Infinity)
+ .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+ .fromTo('opacity', '1', '0.2');
+ }
+ }, [cardEl]);
+
+ const play = () => {
+ animation.current?.play();
+ };
+ const pause = () => {
+ animation.current?.pause();
+ };
+ const stop = () => {
+ animation.current?.stop();
+ };
+
+ return (
+ <>
+
+ Card
+
+
+ Play
+ Pause
+ Stop
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/animations/basic/vue.md b/static/usage/v8/animations/basic/vue.md
new file mode 100644
index 00000000000..afd6c68891b
--- /dev/null
+++ b/static/usage/v8/animations/basic/vue.md
@@ -0,0 +1,51 @@
+```html
+
+
+ Card
+
+
+ Play
+ Pause
+ Stop
+
+
+
+```
diff --git a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_html.md b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_html.md
new file mode 100644
index 00000000000..c73e91cb471
--- /dev/null
+++ b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+
+ Card
+
+
+Play
+Pause
+Stop
+```
diff --git a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md
new file mode 100644
index 00000000000..36a7e22081a
--- /dev/null
+++ b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md
@@ -0,0 +1,52 @@
+```ts
+import { Component, ElementRef, ViewChildren } from '@angular/core';
+import type { QueryList } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>;
+
+ private animation: Animation;
+
+ constructor(private animationCtrl: AnimationController) {}
+
+ ngAfterViewInit() {
+ const card = this.animationCtrl
+ .create()
+ .addElement(this.cardElements.get(0).nativeElement)
+ .duration(2000)
+ .beforeStyles({
+ filter: 'invert(75%)',
+ })
+ .beforeClearStyles(['box-shadow'])
+ .afterStyles({
+ 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
+ })
+ .afterClearStyles(['filter'])
+ .keyframes([
+ { offset: 0, transform: 'scale(1)' },
+ { offset: 0.5, transform: 'scale(1.5)' },
+ { offset: 1, transform: 'scale(1)' },
+ ]);
+
+ this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]);
+ }
+
+ play() {
+ this.animation.play();
+ }
+
+ pause() {
+ this.animation.pause();
+ }
+
+ stop() {
+ this.animation.stop();
+ }
+}
+```
diff --git a/static/usage/v8/animations/before-and-after-hooks/demo.html b/static/usage/v8/animations/before-and-after-hooks/demo.html
new file mode 100644
index 00000000000..8297890b519
--- /dev/null
+++ b/static/usage/v8/animations/before-and-after-hooks/demo.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+ Animations
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Card
+
+
+
+ Play
+ Pause
+ Stop
+
+
+
+
+
+
diff --git a/static/usage/v8/animations/before-and-after-hooks/index.md b/static/usage/v8/animations/before-and-after-hooks/index.md
new file mode 100644
index 00000000000..a5dfa0b9d15
--- /dev/null
+++ b/static/usage/v8/animations/before-and-after-hooks/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/animations/before-and-after-hooks/javascript.md b/static/usage/v8/animations/before-and-after-hooks/javascript.md
new file mode 100644
index 00000000000..262f8cd9803
--- /dev/null
+++ b/static/usage/v8/animations/before-and-after-hooks/javascript.md
@@ -0,0 +1,28 @@
+```html
+
+ Card
+
+
+Play
+Pause
+Stop
+
+
+```
diff --git a/static/usage/v8/animations/before-and-after-hooks/react.md b/static/usage/v8/animations/before-and-after-hooks/react.md
new file mode 100644
index 00000000000..bae1185b19d
--- /dev/null
+++ b/static/usage/v8/animations/before-and-after-hooks/react.md
@@ -0,0 +1,61 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+function Example() {
+ const cardEl = useRef(null);
+
+ const card = useRef();
+
+ useEffect(() => {
+ if (!card.current) {
+ card.current = createAnimation()
+ .addElement(cardEl.current!)
+ .duration(2000)
+ .beforeStyles({
+ filter: 'invert(75%)',
+ })
+ .beforeClearStyles(['box-shadow'])
+ .afterStyles({
+ 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px',
+ })
+ .afterClearStyles(['filter'])
+ .keyframes([
+ { offset: 0, transform: 'scale(1)' },
+ { offset: 0.5, transform: 'scale(1.5)' },
+ { offset: 1, transform: 'scale(1)' },
+ ]);
+ }
+ }, [cardEl]);
+
+ const play = async () => {
+ await card.current?.play();
+ };
+ const pause = () => {
+ card.current?.pause();
+ };
+ const stop = () => {
+ card.current?.stop();
+ };
+
+ return (
+ <>
+
+ Card
+
+
+
+ Play
+
+
+ Pause
+
+
+ Stop
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/animations/before-and-after-hooks/vue.md b/static/usage/v8/animations/before-and-after-hooks/vue.md
new file mode 100644
index 00000000000..3b7463a8546
--- /dev/null
+++ b/static/usage/v8/animations/before-and-after-hooks/vue.md
@@ -0,0 +1,67 @@
+```html
+
+
+ Card
+
+
+ Play
+ Pause
+ Stop
+
+
+
+```
diff --git a/static/usage/v8/animations/chain/angular/example_component_html.md b/static/usage/v8/animations/chain/angular/example_component_html.md
new file mode 100644
index 00000000000..8f8b5a83f58
--- /dev/null
+++ b/static/usage/v8/animations/chain/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+ Card 1
+
+
+
+ Card 2
+
+
+
+ Card 3
+
+
+Play
+Pause
+Stop
+```
diff --git a/static/usage/v8/animations/chain/angular/example_component_ts.md b/static/usage/v8/animations/chain/angular/example_component_ts.md
new file mode 100644
index 00000000000..6c6acbef993
--- /dev/null
+++ b/static/usage/v8/animations/chain/angular/example_component_ts.md
@@ -0,0 +1,73 @@
+```ts
+import { Component, ElementRef, ViewChildren } from '@angular/core';
+import type { QueryList } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>;
+
+ private cardA: Animation;
+ private cardB: Animation;
+ private cardC: Animation;
+
+ constructor(private animationCtrl: AnimationController) {}
+
+ ngAfterViewInit() {
+ this.cardA = this.animationCtrl
+ .create()
+ .addElement(this.cardElements.get(0).nativeElement)
+ .fill('none')
+ .duration(1000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1) rotate(0)' },
+ { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+ { offset: 1, transform: 'scale(1) rotate(0)' },
+ ]);
+
+ this.cardB = this.animationCtrl
+ .create()
+ .addElement(this.cardElements.get(1).nativeElement)
+ .fill('none')
+ .duration(1000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1)', opacity: '1' },
+ { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+ { offset: 1, transform: 'scale(1)', opacity: '1' },
+ ]);
+
+ this.cardC = this.animationCtrl
+ .create()
+ .addElement(this.cardElements.get(2).nativeElement)
+ .fill('none')
+ .duration(1000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+ { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+ { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+ ]);
+ }
+
+ async play() {
+ await this.cardA.play();
+ await this.cardB.play();
+ await this.cardC.play();
+ }
+
+ pause() {
+ this.cardA.pause();
+ this.cardB.pause();
+ this.cardC.pause();
+ }
+
+ stop() {
+ this.cardA.stop();
+ this.cardB.stop();
+ this.cardC.stop();
+ }
+}
+```
diff --git a/static/usage/v8/animations/chain/demo.html b/static/usage/v8/animations/chain/demo.html
new file mode 100644
index 00000000000..74c2d6549bd
--- /dev/null
+++ b/static/usage/v8/animations/chain/demo.html
@@ -0,0 +1,96 @@
+
+
+
+
+
+ Animation
+
+
+
+
+
+
+
+
+
+
+
+
+ Card 1
+
+
+
+ Card 2
+
+
+
+ Card 3
+
+
+
+ Play
+ Pause
+ Stop
+
+
+
+
diff --git a/static/usage/v8/animations/chain/index.md b/static/usage/v8/animations/chain/index.md
new file mode 100644
index 00000000000..074e07fec94
--- /dev/null
+++ b/static/usage/v8/animations/chain/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/animations/chain/javascript.md b/static/usage/v8/animations/chain/javascript.md
new file mode 100644
index 00000000000..4fd3dc227d3
--- /dev/null
+++ b/static/usage/v8/animations/chain/javascript.md
@@ -0,0 +1,67 @@
+```html
+
+ Card 1
+
+
+
+ Card 2
+
+
+
+ Card 3
+
+
+Play
+Pause
+Stop
+
+
+```
diff --git a/static/usage/v8/animations/chain/react.md b/static/usage/v8/animations/chain/react.md
new file mode 100644
index 00000000000..d00350793f3
--- /dev/null
+++ b/static/usage/v8/animations/chain/react.md
@@ -0,0 +1,89 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+function Example() {
+ const cardAEl = useRef(null);
+ const cardBEl = useRef(null);
+ const cardCEl = useRef(null);
+
+ const cardA = useRef();
+ const cardB = useRef();
+ const cardC = useRef();
+
+ useEffect(() => {
+ if (!cardA.current) {
+ cardA.current = createAnimation()
+ .addElement(cardAEl.current!)
+ .fill('none')
+ .duration(1000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1) rotate(0)' },
+ { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' },
+ { offset: 1, transform: 'scale(1) rotate(0)' },
+ ]);
+ }
+
+ if (!cardB.current) {
+ cardB.current = createAnimation()
+ .addElement(cardBEl.current!)
+ .fill('none')
+ .duration(1000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1)', opacity: '1' },
+ { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' },
+ { offset: 1, transform: 'scale(1)', opacity: '1' },
+ ]);
+ }
+ if (!cardC.current) {
+ cardC.current = createAnimation()
+ .addElement(cardCEl.current!)
+ .fill('none')
+ .duration(1000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+ { offset: 0.5, transform: 'scale(0.8)', opacity: '1' },
+ { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+ ]);
+ }
+ }, [cardAEl, cardBEl, cardCEl]);
+
+ const play = async () => {
+ await cardA.current?.play();
+ await cardB.current?.play();
+ await cardC.current?.play();
+ };
+ const pause = () => {
+ cardA.current?.pause();
+ cardB.current?.pause();
+ cardC.current?.pause();
+ };
+ const stop = () => {
+ cardA.current?.stop();
+ cardB.current?.stop();
+ cardC.current?.stop();
+ };
+
+ return (
+ <>
+
+ Card 1
+
+
+
+ Card 2
+
+
+
+ Card 3
+
+
+ Play
+ Pause
+ Stop
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/animations/chain/vue.md b/static/usage/v8/animations/chain/vue.md
new file mode 100644
index 00000000000..48166a15be2
--- /dev/null
+++ b/static/usage/v8/animations/chain/vue.md
@@ -0,0 +1,100 @@
+```html
+
+
+ Card 1
+
+
+
+ Card 2
+
+
+
+ Card 3
+
+
+ Play
+ Pause
+ Stop
+
+
+
+```
diff --git a/static/usage/v8/animations/gesture/angular/example_component_css.md b/static/usage/v8/animations/gesture/angular/example_component_css.md
new file mode 100644
index 00000000000..c06ce353f7c
--- /dev/null
+++ b/static/usage/v8/animations/gesture/angular/example_component_css.md
@@ -0,0 +1,17 @@
+```css
+.container {
+ flex-direction: column;
+}
+
+.track {
+ width: 344px;
+ background: var(--ion-color-medium);
+ padding: 16px;
+}
+
+ion-card {
+ width: 100px;
+ box-shadow: none;
+ margin: 0px;
+}
+```
diff --git a/static/usage/v8/animations/gesture/angular/example_component_html.md b/static/usage/v8/animations/gesture/angular/example_component_html.md
new file mode 100644
index 00000000000..56b2deacd70
--- /dev/null
+++ b/static/usage/v8/animations/gesture/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+ Card
+
+
+
+ Drag the square along the track.
+
+```
diff --git a/static/usage/v8/animations/gesture/angular/example_component_ts.md b/static/usage/v8/animations/gesture/angular/example_component_ts.md
new file mode 100644
index 00000000000..7b9aadccf5e
--- /dev/null
+++ b/static/usage/v8/animations/gesture/angular/example_component_ts.md
@@ -0,0 +1,82 @@
+```ts
+import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
+import { AnimationController, GestureController, IonCard } from '@ionic/angular';
+import type { Animation, Gesture, GestureDetail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {
+ @ViewChild(IonCard, { read: ElementRef }) card: ElementRef;
+
+ private animation: Animation;
+ private gesture: Gesture;
+ private started = false;
+ private initialStep = 0;
+
+ /**
+ * The track is 344px wide.
+ * The card is 100px wide.
+ * We want 16px of margin on each end of the track.
+ */
+ private readonly MAX_TRANSLATE = 344 - 100 - 32;
+
+ constructor(private animationCtrl: AnimationController, private gestureCtrl: GestureController) {}
+
+ private onMove(ev: GestureDetail) {
+ if (!this.started) {
+ this.animation.progressStart();
+ this.started = true;
+ }
+
+ this.animation.progressStep(this.getStep(ev));
+ }
+
+ private onEnd(ev: GestureDetail) {
+ if (!this.started) {
+ return;
+ }
+
+ this.gesture.enable(false);
+
+ const step = this.getStep(ev);
+ const shouldComplete = step > 0.5;
+
+ this.animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
+ this.gesture.enable(true);
+ });
+
+ this.initialStep = shouldComplete ? this.MAX_TRANSLATE : 0;
+ this.started = false;
+ }
+
+ private clamp(min: number, n: number, max: number) {
+ return Math.max(min, Math.min(n, max));
+ }
+
+ private getStep(ev: GestureDetail) {
+ const delta = this.initialStep + ev.deltaX;
+ return this.clamp(0, delta / this.MAX_TRANSLATE, 1);
+ }
+
+ ngAfterViewInit() {
+ this.animation = this.animationCtrl
+ .create()
+ .addElement(this.card.nativeElement)
+ .duration(1000)
+ .fromTo('transform', 'translateX(0)', `translateX(${this.MAX_TRANSLATE}px)`);
+
+ const gesture = (this.gesture = this.gestureCtrl.create({
+ el: this.card.nativeElement,
+ threshold: 0,
+ gestureName: 'card-drag',
+ onMove: (ev) => this.onMove(ev),
+ onEnd: (ev) => this.onEnd(ev),
+ }));
+
+ gesture.enable(true);
+ }
+}
+```
diff --git a/static/usage/v8/animations/gesture/demo.html b/static/usage/v8/animations/gesture/demo.html
new file mode 100644
index 00000000000..14515b16303
--- /dev/null
+++ b/static/usage/v8/animations/gesture/demo.html
@@ -0,0 +1,113 @@
+
+
+
+
+
+ Animation
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Card
+
+
+
+ Drag the square along the track.
+
+
+
diff --git a/static/usage/v8/animations/gesture/index.md b/static/usage/v8/animations/gesture/index.md
new file mode 100644
index 00000000000..b2df100f6a4
--- /dev/null
+++ b/static/usage/v8/animations/gesture/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.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';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/animations/gesture/javascript.md b/static/usage/v8/animations/gesture/javascript.md
new file mode 100644
index 00000000000..3535705d5eb
--- /dev/null
+++ b/static/usage/v8/animations/gesture/javascript.md
@@ -0,0 +1,98 @@
+```html
+
+
+
+ Card
+
+
+
+
+Drag the square along the track.
+
+
+
+
+```
diff --git a/static/usage/v8/animations/gesture/react/main_css.md b/static/usage/v8/animations/gesture/react/main_css.md
new file mode 100644
index 00000000000..c06ce353f7c
--- /dev/null
+++ b/static/usage/v8/animations/gesture/react/main_css.md
@@ -0,0 +1,17 @@
+```css
+.container {
+ flex-direction: column;
+}
+
+.track {
+ width: 344px;
+ background: var(--ion-color-medium);
+ padding: 16px;
+}
+
+ion-card {
+ width: 100px;
+ box-shadow: none;
+ margin: 0px;
+}
+```
diff --git a/static/usage/v8/animations/gesture/react/main_tsx.md b/static/usage/v8/animations/gesture/react/main_tsx.md
new file mode 100644
index 00000000000..73fca7dfe22
--- /dev/null
+++ b/static/usage/v8/animations/gesture/react/main_tsx.md
@@ -0,0 +1,92 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonCard, IonCardContent, createAnimation, createGesture } from '@ionic/react';
+import type { Animation, Gesture, GestureDetail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ const cardEl = useRef(null);
+ const animation = useRef(null);
+ const gesture = useRef(null);
+ const initialStep = useRef(0);
+ const started = useRef(false);
+
+ useEffect(() => {
+ if (animation.current === null) {
+ /**
+ * The track is 344px wide.
+ * The card is 100px wide.
+ * We want 16px of margin on each end of the track.
+ */
+ const MAX_TRANSLATE = 344 - 100 - 32;
+
+ animation.current = createAnimation()
+ .addElement(cardEl.current!)
+ .duration(1000)
+ .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`);
+
+ gesture.current = createGesture({
+ el: cardEl.current!,
+ threshold: 0,
+ gestureName: 'card-drag',
+ onMove: (ev) => onMove(ev),
+ onEnd: (ev) => onEnd(ev),
+ });
+
+ gesture.current.enable(true);
+
+ const onMove = (ev: GestureDetail) => {
+ if (!started.current) {
+ animation.current!.progressStart();
+ started.current = true;
+ }
+
+ animation.current!.progressStep(getStep(ev));
+ };
+
+ const onEnd = (ev: GestureDetail) => {
+ if (!started.current) {
+ return;
+ }
+
+ gesture.current!.enable(false);
+
+ const step = getStep(ev);
+ const shouldComplete = step > 0.5;
+
+ animation.current!.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => {
+ gesture.current!.enable(true);
+ });
+
+ initialStep.current = shouldComplete ? MAX_TRANSLATE : 0;
+ started.current = false;
+ };
+
+ const clamp = (min: number, n: number, max: number) => {
+ return Math.max(min, Math.min(n, max));
+ };
+
+ const getStep = (ev: GestureDetail) => {
+ const delta = initialStep.current + ev.deltaX;
+ return clamp(0, delta / MAX_TRANSLATE, 1);
+ };
+ }
+ }, [cardEl]);
+
+ return (
+ <>
+
+
+
+ Card
+
+
+
+ Drag the square along the track.
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/animations/gesture/vue.md b/static/usage/v8/animations/gesture/vue.md
new file mode 100644
index 00000000000..9555355fe48
--- /dev/null
+++ b/static/usage/v8/animations/gesture/vue.md
@@ -0,0 +1,112 @@
+```html
+
+
+
+
+ Card
+
+
+
+ Drag the square along the track.
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/animations/group/angular/example_component_html.md b/static/usage/v8/animations/group/angular/example_component_html.md
new file mode 100644
index 00000000000..8f8b5a83f58
--- /dev/null
+++ b/static/usage/v8/animations/group/angular/example_component_html.md
@@ -0,0 +1,17 @@
+```html
+
+ Card 1
+
+
+
+ Card 2
+
+
+
+ Card 3
+
+
+Play
+Pause
+Stop
+```
diff --git a/static/usage/v8/animations/group/angular/example_component_ts.md b/static/usage/v8/animations/group/angular/example_component_ts.md
new file mode 100644
index 00000000000..63f7a7b2f7a
--- /dev/null
+++ b/static/usage/v8/animations/group/angular/example_component_ts.md
@@ -0,0 +1,66 @@
+```ts
+import { Component, ElementRef, ViewChildren } from '@angular/core';
+import type { QueryList } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>;
+
+ private animation: Animation;
+
+ constructor(private animationCtrl: AnimationController) {}
+
+ ngAfterViewInit() {
+ const cardA = this.animationCtrl
+ .create()
+ .addElement(this.cardElements.get(0).nativeElement)
+ .keyframes([
+ { offset: 0, transform: 'scale(1) rotate(0)' },
+ { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
+ { offset: 1, transform: 'scale(1) rotate(0) ' },
+ ]);
+
+ const cardB = this.animationCtrl
+ .create()
+ .addElement(this.cardElements.get(1).nativeElement)
+ .keyframes([
+ { offset: 0, transform: 'scale(1)', opacity: '1' },
+ { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
+ { offset: 1, transform: 'scale(1)', opacity: '1' },
+ ]);
+
+ const cardC = this.animationCtrl
+ .create()
+ .addElement(this.cardElements.get(2).nativeElement)
+ .duration(5000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+ { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
+ { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+ ]);
+
+ this.animation = this.animationCtrl
+ .create()
+ .duration(2000)
+ .iterations(Infinity)
+ .addAnimation([cardA, cardB, cardC]);
+ }
+
+ play() {
+ this.animation.play();
+ }
+
+ pause() {
+ this.animation.pause();
+ }
+
+ stop() {
+ this.animation.stop();
+ }
+}
+```
diff --git a/static/usage/v8/animations/group/demo.html b/static/usage/v8/animations/group/demo.html
new file mode 100644
index 00000000000..ca2fda33d70
--- /dev/null
+++ b/static/usage/v8/animations/group/demo.html
@@ -0,0 +1,87 @@
+
+
+
+
+
+ Animation
+
+
+
+
+
+
+
+
+
+
+
+
+ Card 1
+
+
+
+ Card 2
+
+
+
+ Card 3
+
+
+
+ Play
+ Pause
+ Stop
+
+
+
+
diff --git a/static/usage/v8/animations/group/index.md b/static/usage/v8/animations/group/index.md
new file mode 100644
index 00000000000..a54454ed7bb
--- /dev/null
+++ b/static/usage/v8/animations/group/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/animations/group/javascript.md b/static/usage/v8/animations/group/javascript.md
new file mode 100644
index 00000000000..3630f6520df
--- /dev/null
+++ b/static/usage/v8/animations/group/javascript.md
@@ -0,0 +1,46 @@
+```html
+
+ Card 1
+
+
+
+ Card 2
+
+
+
+ Card 3
+
+
+Play
+Pause
+Stop
+
+
+```
diff --git a/static/usage/v8/animations/group/react.md b/static/usage/v8/animations/group/react.md
new file mode 100644
index 00000000000..dc445826e82
--- /dev/null
+++ b/static/usage/v8/animations/group/react.md
@@ -0,0 +1,75 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+function Example() {
+ const cardAEl = useRef(null);
+ const cardBEl = useRef(null);
+ const cardCEl = useRef(null);
+
+ const animation = useRef(null);
+
+ useEffect(() => {
+ if (animation.current === null) {
+ const cardA = createAnimation()
+ .addElement(cardAEl.current!)
+ .keyframes([
+ { offset: 0, transform: 'scale(1) rotate(0)' },
+ { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' },
+ { offset: 1, transform: 'scale(1) rotate(0) ' },
+ ]);
+
+ const cardB = createAnimation()
+ .addElement(cardBEl.current!)
+ .keyframes([
+ { offset: 0, transform: 'scale(1)', opacity: '1' },
+ { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' },
+ { offset: 1, transform: 'scale(1)', opacity: '1' },
+ ]);
+
+ const cardC = createAnimation()
+ .addElement(cardCEl.current!)
+ .duration(5000)
+ .keyframes([
+ { offset: 0, transform: 'scale(1)', opacity: '0.5' },
+ { offset: 0.5, transform: 'scale(0.5)', opacity: '1' },
+ { offset: 1, transform: 'scale(1)', opacity: '0.5' },
+ ]);
+
+ animation.current = createAnimation().duration(2000).iterations(Infinity).addAnimation([cardA, cardB, cardC]);
+ }
+ }, [cardAEl, cardBEl, cardCEl]);
+
+ const play = () => {
+ animation.current?.play();
+ };
+ const pause = () => {
+ animation.current?.pause();
+ };
+ const stop = () => {
+ animation.current?.stop();
+ };
+
+ return (
+ <>
+
+ Card 1
+
+
+
+ Card 2
+
+
+
+ Card 3
+
+
+ Play
+ Pause
+ Stop
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/animations/group/vue.md b/static/usage/v8/animations/group/vue.md
new file mode 100644
index 00000000000..144eb7b8259
--- /dev/null
+++ b/static/usage/v8/animations/group/vue.md
@@ -0,0 +1,83 @@
+```html
+
+
+ Card 1
+
+
+
+ Card 2
+
+
+
+ Card 3
+
+
+ Play
+ Pause
+ Stop
+
+
+
+```
diff --git a/static/usage/v8/animations/keyframes/angular/example_component_html.md b/static/usage/v8/animations/keyframes/angular/example_component_html.md
new file mode 100644
index 00000000000..035212f98d4
--- /dev/null
+++ b/static/usage/v8/animations/keyframes/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+
+ Card
+
+Play
+Pause
+Stop
+```
diff --git a/static/usage/v8/animations/keyframes/angular/example_component_ts.md b/static/usage/v8/animations/keyframes/angular/example_component_ts.md
new file mode 100644
index 00000000000..4ee04bea423
--- /dev/null
+++ b/static/usage/v8/animations/keyframes/angular/example_component_ts.md
@@ -0,0 +1,42 @@
+```ts
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard, IonCardContent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild(IonCard, { read: ElementRef }) card: ElementRef;
+
+ private animation: Animation;
+
+ constructor(private animationCtrl: AnimationController) {}
+
+ ngAfterViewInit() {
+ this.animation = this.animationCtrl
+ .create()
+ .addElement(this.card.nativeElement)
+ .duration(3000)
+ .iterations(Infinity)
+ .keyframes([
+ { offset: 0, width: '80px' },
+ { offset: 0.72, width: 'var(--width)' },
+ { offset: 1, width: '240px' },
+ ]);
+ }
+
+ play() {
+ this.animation.play();
+ }
+
+ pause() {
+ this.animation.pause();
+ }
+
+ stop() {
+ this.animation.stop();
+ }
+}
+```
diff --git a/static/usage/v8/animations/keyframes/demo.html b/static/usage/v8/animations/keyframes/demo.html
new file mode 100644
index 00000000000..521f6eac6eb
--- /dev/null
+++ b/static/usage/v8/animations/keyframes/demo.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+ Keyframe Animations
+
+
+
+
+
+
+
+
+
+
+
+
+ Card
+
+
+ Play
+ Pause
+ Stop
+
+
+
+
diff --git a/static/usage/v8/animations/keyframes/index.md b/static/usage/v8/animations/keyframes/index.md
new file mode 100644
index 00000000000..de0441565e3
--- /dev/null
+++ b/static/usage/v8/animations/keyframes/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/animations/keyframes/javascript.md b/static/usage/v8/animations/keyframes/javascript.md
new file mode 100644
index 00000000000..7a2e574b8da
--- /dev/null
+++ b/static/usage/v8/animations/keyframes/javascript.md
@@ -0,0 +1,20 @@
+```html
+
+ Card
+
+Play
+Pause
+Stop
+
+
+```
diff --git a/static/usage/v8/animations/keyframes/react.md b/static/usage/v8/animations/keyframes/react.md
new file mode 100644
index 00000000000..21d066b5404
--- /dev/null
+++ b/static/usage/v8/animations/keyframes/react.md
@@ -0,0 +1,47 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+function Example() {
+ const cardEl = useRef(null);
+
+ const animation = useRef(null);
+
+ useEffect(() => {
+ if (animation.current === null) {
+ animation.current = createAnimation()
+ .addElement(cardEl.current!)
+ .duration(3000)
+ .iterations(Infinity)
+ .keyframes([
+ { offset: 0, width: '80px' },
+ { offset: 0.72, width: 'var(--width)' },
+ { offset: 1, width: '240px' },
+ ]);
+ }
+ }, [cardEl]);
+
+ const play = () => {
+ animation.current?.play();
+ };
+ const pause = () => {
+ animation.current?.pause();
+ };
+ const stop = () => {
+ animation.current?.stop();
+ };
+
+ return (
+ <>
+
+ Card
+
+ Play
+ Pause
+ Stop
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/animations/keyframes/vue.md b/static/usage/v8/animations/keyframes/vue.md
new file mode 100644
index 00000000000..a0fc0e4505a
--- /dev/null
+++ b/static/usage/v8/animations/keyframes/vue.md
@@ -0,0 +1,60 @@
+```html
+
+
+ Card
+
+ Play
+ Pause
+ Stop
+
+
+
+
+
+```
diff --git a/static/usage/v8/animations/modal-override/angular/example_component_html.md b/static/usage/v8/animations/modal-override/angular/example_component_html.md
new file mode 100644
index 00000000000..178ae34c17b
--- /dev/null
+++ b/static/usage/v8/animations/modal-override/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Page
+
+
+
+ Present Modal
+
+
+
+
+ Modal
+
+ Close
+
+
+
+ Modal Content
+
+
+
+```
diff --git a/static/usage/v8/animations/modal-override/angular/example_component_ts.md b/static/usage/v8/animations/modal-override/angular/example_component_ts.md
new file mode 100644
index 00000000000..b1fe997c1d4
--- /dev/null
+++ b/static/usage/v8/animations/modal-override/angular/example_component_ts.md
@@ -0,0 +1,52 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import type { IonModal } from '@ionic/angular';
+import { AnimationController } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild('modal', { static: true }) modal: IonModal;
+
+ constructor(private animationCtrl: AnimationController) {}
+
+ ngOnInit() {
+ const enterAnimation = (baseEl: HTMLElement) => {
+ const root = baseEl.shadowRoot;
+
+ const backdropAnimation = this.animationCtrl
+ .create()
+ .addElement(root.querySelector('ion-backdrop'))
+ .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+ const wrapperAnimation = this.animationCtrl
+ .create()
+ .addElement(root.querySelector('.modal-wrapper'))
+ .keyframes([
+ { offset: 0, opacity: '0', transform: 'scale(0)' },
+ { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+ ]);
+
+ return this.animationCtrl
+ .create()
+ .addElement(baseEl)
+ .easing('ease-out')
+ .duration(500)
+ .addAnimation([backdropAnimation, wrapperAnimation]);
+ };
+
+ const leaveAnimation = (baseEl: HTMLElement) => {
+ return enterAnimation(baseEl).direction('reverse');
+ };
+
+ this.modal.enterAnimation = enterAnimation;
+ this.modal.leaveAnimation = leaveAnimation;
+ }
+
+ closeModal() {
+ this.modal.dismiss();
+ }
+}
+```
diff --git a/static/usage/v8/animations/modal-override/demo.html b/static/usage/v8/animations/modal-override/demo.html
new file mode 100644
index 00000000000..b1585afb709
--- /dev/null
+++ b/static/usage/v8/animations/modal-override/demo.html
@@ -0,0 +1,78 @@
+
+
+
+
+
+ Accordion
+
+
+
+
+
+
+
+
+
+
+
+ Page
+
+
+
+
+ Present Modal
+
+
+
+ Modal
+
+ Close
+
+
+
+ Modal Content
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/animations/modal-override/index.md b/static/usage/v8/animations/modal-override/index.md
new file mode 100644
index 00000000000..220d20c2542
--- /dev/null
+++ b/static/usage/v8/animations/modal-override/index.md
@@ -0,0 +1,26 @@
+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/animations/modal-override/javascript.md b/static/usage/v8/animations/modal-override/javascript.md
new file mode 100644
index 00000000000..0efad523d3b
--- /dev/null
+++ b/static/usage/v8/animations/modal-override/javascript.md
@@ -0,0 +1,57 @@
+```html
+
+
+ Page
+
+
+
+ Present Modal
+
+
+
+ Modal
+
+ Close
+
+
+
+ Modal Content
+
+
+
+
+```
diff --git a/static/usage/v8/animations/modal-override/react.md b/static/usage/v8/animations/modal-override/react.md
new file mode 100644
index 00000000000..730881c49a9
--- /dev/null
+++ b/static/usage/v8/animations/modal-override/react.md
@@ -0,0 +1,71 @@
+```tsx
+import React, { useRef } from 'react';
+import {
+ IonButton,
+ IonButtons,
+ IonContent,
+ IonHeader,
+ IonModal,
+ IonToolbar,
+ IonTitle,
+ createAnimation,
+} from '@ionic/react';
+
+function Example() {
+ const modalEl = useRef(null);
+
+ const enterAnimation = (baseEl: HTMLElement) => {
+ const root = baseEl.shadowRoot!;
+
+ const backdropAnimation = createAnimation()
+ .addElement(root.querySelector('ion-backdrop')!)
+ .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+ const wrapperAnimation = createAnimation()
+ .addElement(root.querySelector('.modal-wrapper')!)
+ .keyframes([
+ { offset: 0, opacity: '0', transform: 'scale(0)' },
+ { offset: 1, opacity: '0.99', transform: 'scale(1)' },
+ ]);
+
+ return createAnimation()
+ .addElement(baseEl)
+ .easing('ease-out')
+ .duration(500)
+ .addAnimation([backdropAnimation, wrapperAnimation]);
+ };
+
+ const leaveAnimation = (baseEl: HTMLElement) => {
+ return enterAnimation(baseEl).direction('reverse');
+ };
+
+ const closeModal = () => {
+ modalEl.current?.dismiss();
+ };
+
+ return (
+ <>
+
+
+ Page
+
+
+
+ Present Modal
+
+
+
+ Modal
+
+ Close
+
+
+
+ Modal Content
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/animations/modal-override/vue.md b/static/usage/v8/animations/modal-override/vue.md
new file mode 100644
index 00000000000..82c05ba66e6
--- /dev/null
+++ b/static/usage/v8/animations/modal-override/vue.md
@@ -0,0 +1,90 @@
+```html
+
+
+
+ Page
+
+
+
+ Present Modal
+
+
+
+ Modal
+
+ Close
+
+
+
+ Modal Content
+
+
+
+
+
+```
diff --git a/static/usage/v8/animations/preference-based/angular/example_component_css.md b/static/usage/v8/animations/preference-based/angular/example_component_css.md
new file mode 100644
index 00000000000..eb219f43513
--- /dev/null
+++ b/static/usage/v8/animations/preference-based/angular/example_component_css.md
@@ -0,0 +1,16 @@
+```css
+ion-card {
+ color: white;
+ opacity: 0.5;
+ background: blue;
+ margin: 10px;
+
+ --background: red;
+}
+
+@media (prefers-color-scheme: dark) {
+ ion-card {
+ --background: green;
+ }
+}
+```
diff --git a/static/usage/v8/animations/preference-based/angular/example_component_html.md b/static/usage/v8/animations/preference-based/angular/example_component_html.md
new file mode 100644
index 00000000000..1bd8875b1b3
--- /dev/null
+++ b/static/usage/v8/animations/preference-based/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+
+ Card
+
+
+Play
+Pause
+Stop
+```
diff --git a/static/usage/v8/animations/preference-based/angular/example_component_ts.md b/static/usage/v8/animations/preference-based/angular/example_component_ts.md
new file mode 100644
index 00000000000..c0e383d5ec0
--- /dev/null
+++ b/static/usage/v8/animations/preference-based/angular/example_component_ts.md
@@ -0,0 +1,41 @@
+```ts
+import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core';
+import type { QueryList } from '@angular/core';
+import type { Animation } from '@ionic/angular';
+import { AnimationController, IonCard } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+ @ViewChild(IonCard, { read: ElementRef }) card: ElementRef;
+
+ private animation: Animation;
+
+ constructor(private animationCtrl: AnimationController) {}
+
+ ngAfterViewInit() {
+ this.animation = this.animationCtrl
+ .create()
+ .addElement(this.card.nativeElement)
+ .duration(1500)
+ .iterations(Infinity)
+ .direction('alternate')
+ .fromTo('background', 'blue', 'var(--background)');
+ }
+
+ play() {
+ this.animation.play();
+ }
+
+ pause() {
+ this.animation.pause();
+ }
+
+ stop() {
+ this.animation.stop();
+ }
+}
+```
diff --git a/static/usage/v8/animations/preference-based/demo.html b/static/usage/v8/animations/preference-based/demo.html
new file mode 100644
index 00000000000..276cffec8d7
--- /dev/null
+++ b/static/usage/v8/animations/preference-based/demo.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+ Animation
+
+
+
+
+
+
+
+
+
+
+
+
+ Card
+
+
+
+ Play
+ Pause
+ Stop
+
+
+
+
diff --git a/static/usage/v8/animations/preference-based/index.md b/static/usage/v8/animations/preference-based/index.md
new file mode 100644
index 00000000000..8eaa992cf0d
--- /dev/null
+++ b/static/usage/v8/animations/preference-based/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.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';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/animations/preference-based/javascript.md b/static/usage/v8/animations/preference-based/javascript.md
new file mode 100644
index 00000000000..8ad151afcf7
--- /dev/null
+++ b/static/usage/v8/animations/preference-based/javascript.md
@@ -0,0 +1,35 @@
+```html
+
+ Card
+
+
+Play
+Pause
+Stop
+
+
+
+
+```
diff --git a/static/usage/v8/animations/preference-based/react/main_css.md b/static/usage/v8/animations/preference-based/react/main_css.md
new file mode 100644
index 00000000000..eb219f43513
--- /dev/null
+++ b/static/usage/v8/animations/preference-based/react/main_css.md
@@ -0,0 +1,16 @@
+```css
+ion-card {
+ color: white;
+ opacity: 0.5;
+ background: blue;
+ margin: 10px;
+
+ --background: red;
+}
+
+@media (prefers-color-scheme: dark) {
+ ion-card {
+ --background: green;
+ }
+}
+```
diff --git a/static/usage/v8/animations/preference-based/react/main_tsx.md b/static/usage/v8/animations/preference-based/react/main_tsx.md
new file mode 100644
index 00000000000..a46df596ed7
--- /dev/null
+++ b/static/usage/v8/animations/preference-based/react/main_tsx.md
@@ -0,0 +1,47 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react';
+import type { Animation } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ const cardEl = useRef(null);
+
+ const animation = useRef(null);
+
+ useEffect(() => {
+ if (animation.current === null) {
+ animation.current = createAnimation()
+ .addElement(cardEl.current!)
+ .duration(1500)
+ .iterations(Infinity)
+ .direction('alternate')
+ .fromTo('background', 'blue', 'var(--background)');
+ }
+ }, [cardEl]);
+
+ const play = () => {
+ animation.current?.play();
+ };
+ const pause = () => {
+ animation.current?.pause();
+ };
+ const stop = () => {
+ animation.current?.stop();
+ };
+
+ return (
+ <>
+
+ Card
+
+
+ Play
+ Pause
+ Stop
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/animations/preference-based/vue.md b/static/usage/v8/animations/preference-based/vue.md
new file mode 100644
index 00000000000..db703ca5466
--- /dev/null
+++ b/static/usage/v8/animations/preference-based/vue.md
@@ -0,0 +1,68 @@
+```html
+
+
+ Card
+
+
+ Play
+ Pause
+ Stop
+
+
+
+
+
+```
diff --git a/static/usage/v8/avatar/basic/angular.md b/static/usage/v8/avatar/basic/angular.md
new file mode 100644
index 00000000000..a74cea822be
--- /dev/null
+++ b/static/usage/v8/avatar/basic/angular.md
@@ -0,0 +1,5 @@
+```html
+
+
+
+```
diff --git a/static/usage/v8/avatar/basic/demo.html b/static/usage/v8/avatar/basic/demo.html
new file mode 100644
index 00000000000..b3957c88ff9
--- /dev/null
+++ b/static/usage/v8/avatar/basic/demo.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Avatar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/avatar/basic/index.md b/static/usage/v8/avatar/basic/index.md
new file mode 100644
index 00000000000..6655efc6562
--- /dev/null
+++ b/static/usage/v8/avatar/basic/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/avatar/basic/javascript.md b/static/usage/v8/avatar/basic/javascript.md
new file mode 100644
index 00000000000..a74cea822be
--- /dev/null
+++ b/static/usage/v8/avatar/basic/javascript.md
@@ -0,0 +1,5 @@
+```html
+
+
+
+```
diff --git a/static/usage/v8/avatar/basic/react.md b/static/usage/v8/avatar/basic/react.md
new file mode 100644
index 00000000000..9fe5dafb88f
--- /dev/null
+++ b/static/usage/v8/avatar/basic/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonAvatar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/avatar/basic/vue.md b/static/usage/v8/avatar/basic/vue.md
new file mode 100644
index 00000000000..5136ca90400
--- /dev/null
+++ b/static/usage/v8/avatar/basic/vue.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/avatar/chip/angular.md b/static/usage/v8/avatar/chip/angular.md
new file mode 100644
index 00000000000..6fa2d82aa0b
--- /dev/null
+++ b/static/usage/v8/avatar/chip/angular.md
@@ -0,0 +1,8 @@
+```html
+
+
+
+
+ Chip Avatar
+
+```
diff --git a/static/usage/v8/avatar/chip/demo.html b/static/usage/v8/avatar/chip/demo.html
new file mode 100644
index 00000000000..7317ea41688
--- /dev/null
+++ b/static/usage/v8/avatar/chip/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Avatar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Chip Avatar
+
+
+
+
+
+
diff --git a/static/usage/v8/avatar/chip/index.md b/static/usage/v8/avatar/chip/index.md
new file mode 100644
index 00000000000..21c571e6c28
--- /dev/null
+++ b/static/usage/v8/avatar/chip/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/avatar/chip/javascript.md b/static/usage/v8/avatar/chip/javascript.md
new file mode 100644
index 00000000000..6fa2d82aa0b
--- /dev/null
+++ b/static/usage/v8/avatar/chip/javascript.md
@@ -0,0 +1,8 @@
+```html
+
+
+
+
+ Chip Avatar
+
+```
diff --git a/static/usage/v8/avatar/chip/react.md b/static/usage/v8/avatar/chip/react.md
new file mode 100644
index 00000000000..69bd5dbb4fb
--- /dev/null
+++ b/static/usage/v8/avatar/chip/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonAvatar, IonChip, IonLabel } from '@ionic/react';
+function Example() {
+ return (
+ <>
+
+
+
+
+ Chip Avatar
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/avatar/chip/vue.md b/static/usage/v8/avatar/chip/vue.md
new file mode 100644
index 00000000000..c872bb48de3
--- /dev/null
+++ b/static/usage/v8/avatar/chip/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+ Chip Avatar
+
+
+
+
+```
diff --git a/static/usage/v8/avatar/item/angular.md b/static/usage/v8/avatar/item/angular.md
new file mode 100644
index 00000000000..5bf15fbc737
--- /dev/null
+++ b/static/usage/v8/avatar/item/angular.md
@@ -0,0 +1,8 @@
+```html
+
+
+
+
+ Item Avatar
+
+```
diff --git a/static/usage/v8/avatar/item/demo.html b/static/usage/v8/avatar/item/demo.html
new file mode 100644
index 00000000000..97681c9d338
--- /dev/null
+++ b/static/usage/v8/avatar/item/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Avatar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item Avatar
+
+
+
+
+
+
diff --git a/static/usage/v8/avatar/item/index.md b/static/usage/v8/avatar/item/index.md
new file mode 100644
index 00000000000..ef0b525815d
--- /dev/null
+++ b/static/usage/v8/avatar/item/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/avatar/item/javascript.md b/static/usage/v8/avatar/item/javascript.md
new file mode 100644
index 00000000000..5bf15fbc737
--- /dev/null
+++ b/static/usage/v8/avatar/item/javascript.md
@@ -0,0 +1,8 @@
+```html
+
+
+
+
+ Item Avatar
+
+```
diff --git a/static/usage/v8/avatar/item/react.md b/static/usage/v8/avatar/item/react.md
new file mode 100644
index 00000000000..71b562a5d7b
--- /dev/null
+++ b/static/usage/v8/avatar/item/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonAvatar, IonItem, IonLabel } from '@ionic/react';
+function Example() {
+ return (
+ <>
+
+
+
+
+ Item Avatar
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/avatar/item/vue.md b/static/usage/v8/avatar/item/vue.md
new file mode 100644
index 00000000000..5a9ddea4499
--- /dev/null
+++ b/static/usage/v8/avatar/item/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+ Item Avatar
+
+
+
+
+```
diff --git a/static/usage/v8/avatar/theming/css-properties/angular/example_component_css.md b/static/usage/v8/avatar/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..5a97e1fc6ae
--- /dev/null
+++ b/static/usage/v8/avatar/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-avatar {
+ --border-radius: 4px;
+}
+```
diff --git a/static/usage/v8/avatar/theming/css-properties/angular/example_component_html.md b/static/usage/v8/avatar/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..a74cea822be
--- /dev/null
+++ b/static/usage/v8/avatar/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+
+
+```
diff --git a/static/usage/v8/avatar/theming/css-properties/demo.html b/static/usage/v8/avatar/theming/css-properties/demo.html
new file mode 100644
index 00000000000..85e967d7198
--- /dev/null
+++ b/static/usage/v8/avatar/theming/css-properties/demo.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+ Avatar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/avatar/theming/css-properties/index.md b/static/usage/v8/avatar/theming/css-properties/index.md
new file mode 100644
index 00000000000..3e4dfeb4f13
--- /dev/null
+++ b/static/usage/v8/avatar/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/avatar/theming/css-properties/javascript.md b/static/usage/v8/avatar/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..f866e15762d
--- /dev/null
+++ b/static/usage/v8/avatar/theming/css-properties/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/avatar/theming/css-properties/react/main_css.md b/static/usage/v8/avatar/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..5a97e1fc6ae
--- /dev/null
+++ b/static/usage/v8/avatar/theming/css-properties/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-avatar {
+ --border-radius: 4px;
+}
+```
diff --git a/static/usage/v8/avatar/theming/css-properties/react/main_tsx.md b/static/usage/v8/avatar/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..180b8998a3f
--- /dev/null
+++ b/static/usage/v8/avatar/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonAvatar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/avatar/theming/css-properties/vue.md b/static/usage/v8/avatar/theming/css-properties/vue.md
new file mode 100644
index 00000000000..32237336a1c
--- /dev/null
+++ b/static/usage/v8/avatar/theming/css-properties/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/back-button/basic/angular/app_module_ts.md b/static/usage/v8/back-button/basic/angular/app_module_ts.md
new file mode 100644
index 00000000000..3c20b511446
--- /dev/null
+++ b/static/usage/v8/back-button/basic/angular/app_module_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { PageOneComponent } from './page-one.component';
+import { PageTwoComponent } from './page-two.component';
+
+@NgModule({
+ imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+ declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v8/back-button/basic/angular/example_component_html.md b/static/usage/v8/back-button/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..1534ea3a6ec
--- /dev/null
+++ b/static/usage/v8/back-button/basic/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/back-button/basic/angular/example_component_ts.md b/static/usage/v8/back-button/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..b123a4858ce
--- /dev/null
+++ b/static/usage/v8/back-button/basic/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ component = PageOneComponent;
+}
+```
diff --git a/static/usage/v8/back-button/basic/angular/page_one_component_ts.md b/static/usage/v8/back-button/basic/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..d181c5a5268
--- /dev/null
+++ b/static/usage/v8/back-button/basic/angular/page_one_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+ selector: 'app-page-one',
+ template: `
+
+
+ Back Button
+
+
+
+ Page One
+ Navigate to the next page to see the back button.
+
+ Navigate
+
+
+ `,
+})
+export class PageOneComponent {
+ component = PageTwoComponent;
+}
+```
diff --git a/static/usage/v8/back-button/basic/angular/page_two_component_ts.md b/static/usage/v8/back-button/basic/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..b2cda11d2a8
--- /dev/null
+++ b/static/usage/v8/back-button/basic/angular/page_two_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-page-two',
+ template: `
+
+
+
+
+
+ Back Button
+
+
+
+ Page Two
+ Use the back button to navigate to the previous page.
+
+ `,
+})
+export class PageTwoComponent {}
+```
diff --git a/static/usage/v8/back-button/basic/demo.html b/static/usage/v8/back-button/basic/demo.html
new file mode 100644
index 00000000000..f6b4651d722
--- /dev/null
+++ b/static/usage/v8/back-button/basic/demo.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/back-button/basic/index.md b/static/usage/v8/back-button/basic/index.md
new file mode 100644
index 00000000000..f3d4197adcc
--- /dev/null
+++ b/static/usage/v8/back-button/basic/index.md
@@ -0,0 +1,50 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+
+
diff --git a/static/usage/v8/back-button/basic/javascript.md b/static/usage/v8/back-button/basic/javascript.md
new file mode 100644
index 00000000000..5a8817ab291
--- /dev/null
+++ b/static/usage/v8/back-button/basic/javascript.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/back-button/basic/react/main_tsx.md b/static/usage/v8/back-button/basic/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/v8/back-button/basic/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonNav } from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+ return }> ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/back-button/basic/react/page_one_tsx.md b/static/usage/v8/back-button/basic/react/page_one_tsx.md
new file mode 100644
index 00000000000..b4e9f017c39
--- /dev/null
+++ b/static/usage/v8/back-button/basic/react/page_one_tsx.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne() {
+ return (
+ <>
+
+
+ Back Button
+
+
+
+ Page One
+ Navigate to the next page to see the back button.
+ }>
+ Navigate
+
+
+ >
+ );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v8/back-button/basic/react/page_two_tsx.md b/static/usage/v8/back-button/basic/react/page_two_tsx.md
new file mode 100644
index 00000000000..dcfbd7ca20b
--- /dev/null
+++ b/static/usage/v8/back-button/basic/react/page_two_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react';
+
+function PageTwo() {
+ return (
+ <>
+
+
+
+
+
+ Back Button
+
+
+
+ Page Two
+ Use the back button to navigate to the previous page.
+
+ >
+ );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v8/back-button/basic/vue/example_vue.md b/static/usage/v8/back-button/basic/vue/example_vue.md
new file mode 100644
index 00000000000..ec054a80749
--- /dev/null
+++ b/static/usage/v8/back-button/basic/vue/example_vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/back-button/basic/vue/page_one_vue.md b/static/usage/v8/back-button/basic/vue/page_one_vue.md
new file mode 100644
index 00000000000..337a6877548
--- /dev/null
+++ b/static/usage/v8/back-button/basic/vue/page_one_vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+ Back Button
+
+
+
+ Page One
+ Navigate to the next page to see the back button.
+
+ Navigate
+
+
+
+
+
+```
diff --git a/static/usage/v8/back-button/basic/vue/page_two_vue.md b/static/usage/v8/back-button/basic/vue/page_two_vue.md
new file mode 100644
index 00000000000..e26a6f13562
--- /dev/null
+++ b/static/usage/v8/back-button/basic/vue/page_two_vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+
+
+
+ Back Button
+
+
+
+ Page Two
+ Use the back button to navigate to the previous page.
+
+
+
+
+```
diff --git a/static/usage/v8/back-button/custom/angular/app_module_ts.md b/static/usage/v8/back-button/custom/angular/app_module_ts.md
new file mode 100644
index 00000000000..3c20b511446
--- /dev/null
+++ b/static/usage/v8/back-button/custom/angular/app_module_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AppComponent } from './app.component';
+import { ExampleComponent } from './example.component';
+
+import { PageOneComponent } from './page-one.component';
+import { PageTwoComponent } from './page-two.component';
+
+@NgModule({
+ imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
+ declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent],
+ bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
diff --git a/static/usage/v8/back-button/custom/angular/example_component_html.md b/static/usage/v8/back-button/custom/angular/example_component_html.md
new file mode 100644
index 00000000000..1534ea3a6ec
--- /dev/null
+++ b/static/usage/v8/back-button/custom/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/back-button/custom/angular/example_component_ts.md b/static/usage/v8/back-button/custom/angular/example_component_ts.md
new file mode 100644
index 00000000000..b123a4858ce
--- /dev/null
+++ b/static/usage/v8/back-button/custom/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageOneComponent } from './page-one.component';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ component = PageOneComponent;
+}
+```
diff --git a/static/usage/v8/back-button/custom/angular/page_one_component_ts.md b/static/usage/v8/back-button/custom/angular/page_one_component_ts.md
new file mode 100644
index 00000000000..d181c5a5268
--- /dev/null
+++ b/static/usage/v8/back-button/custom/angular/page_one_component_ts.md
@@ -0,0 +1,26 @@
+```ts
+import { Component } from '@angular/core';
+
+import { PageTwoComponent } from './page-two.component';
+
+@Component({
+ selector: 'app-page-one',
+ template: `
+
+
+ Back Button
+
+
+
+ Page One
+ Navigate to the next page to see the back button.
+
+ Navigate
+
+
+ `,
+})
+export class PageOneComponent {
+ component = PageTwoComponent;
+}
+```
diff --git a/static/usage/v8/back-button/custom/angular/page_two_component_ts.md b/static/usage/v8/back-button/custom/angular/page_two_component_ts.md
new file mode 100644
index 00000000000..05a1bd64d79
--- /dev/null
+++ b/static/usage/v8/back-button/custom/angular/page_two_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-page-two',
+ template: `
+
+
+
+
+
+ Back Button
+
+
+
+ Page Two
+ Use the back button to navigate to the previous page.
+
+ `,
+})
+export class PageTwoComponent {}
+```
diff --git a/static/usage/v8/back-button/custom/demo.html b/static/usage/v8/back-button/custom/demo.html
new file mode 100644
index 00000000000..880e14b570b
--- /dev/null
+++ b/static/usage/v8/back-button/custom/demo.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/back-button/custom/index.md b/static/usage/v8/back-button/custom/index.md
new file mode 100644
index 00000000000..43614d4b44d
--- /dev/null
+++ b/static/usage/v8/back-button/custom/index.md
@@ -0,0 +1,50 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import angular_app_module_ts from './angular/app_module_ts.md';
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_page_one_component_ts from './angular/page_one_component_ts.md';
+import angular_page_two_component_ts from './angular/page_two_component_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_page_one_tsx from './react/page_one_tsx.md';
+import react_page_two_tsx from './react/page_two_tsx.md';
+
+import vue_example from './vue/example_vue.md';
+import vue_page_one from './vue/page_one_vue.md';
+import vue_page_two from './vue/page_two_vue.md';
+
+
diff --git a/static/usage/v8/back-button/custom/javascript.md b/static/usage/v8/back-button/custom/javascript.md
new file mode 100644
index 00000000000..1558cb48ad5
--- /dev/null
+++ b/static/usage/v8/back-button/custom/javascript.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/back-button/custom/react/main_tsx.md b/static/usage/v8/back-button/custom/react/main_tsx.md
new file mode 100644
index 00000000000..f6196a362e9
--- /dev/null
+++ b/static/usage/v8/back-button/custom/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonNav } from '@ionic/react';
+
+import PageOne from './page-one';
+
+function Example() {
+ return }> ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/back-button/custom/react/page_one_tsx.md b/static/usage/v8/back-button/custom/react/page_one_tsx.md
new file mode 100644
index 00000000000..b4e9f017c39
--- /dev/null
+++ b/static/usage/v8/back-button/custom/react/page_one_tsx.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react';
+
+import PageTwo from './page-two';
+
+function PageOne() {
+ return (
+ <>
+
+
+ Back Button
+
+
+
+ Page One
+ Navigate to the next page to see the back button.
+ }>
+ Navigate
+
+
+ >
+ );
+}
+
+export default PageOne;
+```
diff --git a/static/usage/v8/back-button/custom/react/page_two_tsx.md b/static/usage/v8/back-button/custom/react/page_two_tsx.md
new file mode 100644
index 00000000000..34d30119913
--- /dev/null
+++ b/static/usage/v8/back-button/custom/react/page_two_tsx.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react';
+import { caretBack } from 'ionicons/icons';
+
+function PageTwo() {
+ return (
+ <>
+
+
+
+
+
+ Back Button
+
+
+
+ Page Two
+ Use the back button to navigate to the previous page.
+
+ >
+ );
+}
+
+export default PageTwo;
+```
diff --git a/static/usage/v8/back-button/custom/vue/example_vue.md b/static/usage/v8/back-button/custom/vue/example_vue.md
new file mode 100644
index 00000000000..ec054a80749
--- /dev/null
+++ b/static/usage/v8/back-button/custom/vue/example_vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/back-button/custom/vue/page_one_vue.md b/static/usage/v8/back-button/custom/vue/page_one_vue.md
new file mode 100644
index 00000000000..2702c543f5c
--- /dev/null
+++ b/static/usage/v8/back-button/custom/vue/page_one_vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+ Back Button
+
+
+
+ Page One
+ Navigate to the next page to see the back button.
+
+ Navigate
+
+
+
+
+
+```
diff --git a/static/usage/v8/back-button/custom/vue/page_two_vue.md b/static/usage/v8/back-button/custom/vue/page_two_vue.md
new file mode 100644
index 00000000000..4667abeced5
--- /dev/null
+++ b/static/usage/v8/back-button/custom/vue/page_two_vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+
+
+
+ Back Button
+
+
+
+ Page Two
+ Use the back button to navigate to the previous page.
+
+
+
+
+```
diff --git a/static/usage/v8/backdrop/basic/angular/example_component_css.md b/static/usage/v8/backdrop/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..5889f31812d
--- /dev/null
+++ b/static/usage/v8/backdrop/basic/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-backdrop {
+ background: var(--ion-color-dark);
+ opacity: 0.3;
+}
+```
diff --git a/static/usage/v8/backdrop/basic/angular/example_component_html.md b/static/usage/v8/backdrop/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..64250c98aa0
--- /dev/null
+++ b/static/usage/v8/backdrop/basic/angular/example_component_html.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+
+ Backdrop
+
+
+
+
+ Checkbox
+
+ Button
+
+
+```
diff --git a/static/usage/v8/backdrop/basic/demo.html b/static/usage/v8/backdrop/basic/demo.html
new file mode 100644
index 00000000000..29ffef3fb74
--- /dev/null
+++ b/static/usage/v8/backdrop/basic/demo.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+ Backdrop
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Backdrop
+
+
+
+
+ Checkbox
+
+ Button
+
+
+
+
+
diff --git a/static/usage/v8/backdrop/basic/index.md b/static/usage/v8/backdrop/basic/index.md
new file mode 100644
index 00000000000..fd85d2b4119
--- /dev/null
+++ b/static/usage/v8/backdrop/basic/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v8/backdrop/basic/javascript.md b/static/usage/v8/backdrop/basic/javascript.md
new file mode 100644
index 00000000000..076580a8b63
--- /dev/null
+++ b/static/usage/v8/backdrop/basic/javascript.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+ Backdrop
+
+
+
+
+ Checkbox
+
+ Button
+
+
+```
diff --git a/static/usage/v8/backdrop/basic/react/main_css.md b/static/usage/v8/backdrop/basic/react/main_css.md
new file mode 100644
index 00000000000..5889f31812d
--- /dev/null
+++ b/static/usage/v8/backdrop/basic/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-backdrop {
+ background: var(--ion-color-dark);
+ opacity: 0.3;
+}
+```
diff --git a/static/usage/v8/backdrop/basic/react/main_tsx.md b/static/usage/v8/backdrop/basic/react/main_tsx.md
new file mode 100644
index 00000000000..6d8103f0d1c
--- /dev/null
+++ b/static/usage/v8/backdrop/basic/react/main_tsx.md
@@ -0,0 +1,37 @@
+```tsx
+import React from 'react';
+import {
+ IonBackdrop,
+ IonHeader,
+ IonToolbar,
+ IonTitle,
+ IonContent,
+ IonItem,
+ IonCheckbox,
+ IonButton,
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+ Backdrop
+
+
+
+
+ Checkbox
+
+ Button
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/backdrop/basic/vue.md b/static/usage/v8/backdrop/basic/vue.md
new file mode 100644
index 00000000000..247b67c098b
--- /dev/null
+++ b/static/usage/v8/backdrop/basic/vue.md
@@ -0,0 +1,42 @@
+```html
+
+
+
+
+
+
+
+ Backdrop
+
+
+
+
+ Checkbox
+
+ Button
+
+
+
+
+```
diff --git a/static/usage/v8/backdrop/styling/angular/example_component_css.md b/static/usage/v8/backdrop/styling/angular/example_component_css.md
new file mode 100644
index 00000000000..01a079a9d8c
--- /dev/null
+++ b/static/usage/v8/backdrop/styling/angular/example_component_css.md
@@ -0,0 +1,21 @@
+```css
+ion-backdrop {
+ opacity: 0.9;
+ background: var(--ion-color-primary);
+}
+
+#box {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateY(-50%) translateX(-50%);
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--ion-background-color, #fff);
+ width: 90%;
+ height: 100px;
+ border-radius: 10px;
+}
+```
diff --git a/static/usage/v8/backdrop/styling/angular/example_component_html.md b/static/usage/v8/backdrop/styling/angular/example_component_html.md
new file mode 100644
index 00000000000..3c951690078
--- /dev/null
+++ b/static/usage/v8/backdrop/styling/angular/example_component_html.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+ Backdrop
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+ perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident
+ expedita vero!
+
+
+
+
+
+ Clickable
+
+```
diff --git a/static/usage/v8/backdrop/styling/demo.html b/static/usage/v8/backdrop/styling/demo.html
new file mode 100644
index 00000000000..651a57a56ed
--- /dev/null
+++ b/static/usage/v8/backdrop/styling/demo.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+ Backdrop
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Backdrop
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+ perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum,
+ provident expedita vero!
+
+
+
+
+
+ Clickable
+
+
+
+
diff --git a/static/usage/v8/backdrop/styling/index.md b/static/usage/v8/backdrop/styling/index.md
new file mode 100644
index 00000000000..d5323c425f8
--- /dev/null
+++ b/static/usage/v8/backdrop/styling/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v8/backdrop/styling/javascript.md b/static/usage/v8/backdrop/styling/javascript.md
new file mode 100644
index 00000000000..6c30f0c5c90
--- /dev/null
+++ b/static/usage/v8/backdrop/styling/javascript.md
@@ -0,0 +1,43 @@
+```html
+
+
+
+
+
+
+ Backdrop
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+ perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident
+ expedita vero!
+
+
+
+
+
+ Clickable
+
+```
diff --git a/static/usage/v8/backdrop/styling/react/main_css.md b/static/usage/v8/backdrop/styling/react/main_css.md
new file mode 100644
index 00000000000..01a079a9d8c
--- /dev/null
+++ b/static/usage/v8/backdrop/styling/react/main_css.md
@@ -0,0 +1,21 @@
+```css
+ion-backdrop {
+ opacity: 0.9;
+ background: var(--ion-color-primary);
+}
+
+#box {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateY(-50%) translateX(-50%);
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--ion-background-color, #fff);
+ width: 90%;
+ height: 100px;
+ border-radius: 10px;
+}
+```
diff --git a/static/usage/v8/backdrop/styling/react/main_tsx.md b/static/usage/v8/backdrop/styling/react/main_tsx.md
new file mode 100644
index 00000000000..978b47ce750
--- /dev/null
+++ b/static/usage/v8/backdrop/styling/react/main_tsx.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonCheckbox, IonButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+ Backdrop
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+ perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum,
+ provident expedita vero!
+
+
+
+
+
+
+ Clickable
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/backdrop/styling/vue.md b/static/usage/v8/backdrop/styling/vue.md
new file mode 100644
index 00000000000..7e884eb2fb4
--- /dev/null
+++ b/static/usage/v8/backdrop/styling/vue.md
@@ -0,0 +1,53 @@
+```html
+
+
+
+
+
+
+
+ Backdrop
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam
+ perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident
+ expedita vero!
+
+
+
+
+
+ Clickable
+
+
+
+```
diff --git a/static/usage/v8/badge/basic/angular.md b/static/usage/v8/badge/basic/angular.md
new file mode 100644
index 00000000000..9f8de1ff7eb
--- /dev/null
+++ b/static/usage/v8/badge/basic/angular.md
@@ -0,0 +1,12 @@
+```html
+
+
+ 11
+ Badge in start slot
+
+
+ 22
+ Badge in end slot
+
+
+```
diff --git a/static/usage/v8/badge/basic/demo.html b/static/usage/v8/badge/basic/demo.html
new file mode 100644
index 00000000000..0b655ebd046
--- /dev/null
+++ b/static/usage/v8/badge/basic/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+ Badge
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 11
+ Badge in start slot
+
+
+ 22
+ Badge in end slot
+
+
+
+
+
+
+
diff --git a/static/usage/v8/badge/basic/index.md b/static/usage/v8/badge/basic/index.md
new file mode 100644
index 00000000000..6c15d3150c4
--- /dev/null
+++ b/static/usage/v8/badge/basic/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/badge/basic/javascript.md b/static/usage/v8/badge/basic/javascript.md
new file mode 100644
index 00000000000..9f8de1ff7eb
--- /dev/null
+++ b/static/usage/v8/badge/basic/javascript.md
@@ -0,0 +1,12 @@
+```html
+
+
+ 11
+ Badge in start slot
+
+
+ 22
+ Badge in end slot
+
+
+```
diff --git a/static/usage/v8/badge/basic/react.md b/static/usage/v8/badge/basic/react.md
new file mode 100644
index 00000000000..4d569dbbd02
--- /dev/null
+++ b/static/usage/v8/badge/basic/react.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/react';
+function Example() {
+ return (
+
+
+ 11
+ Badge in start slot
+
+
+ 22
+ Badge in end slot
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/badge/basic/vue.md b/static/usage/v8/badge/basic/vue.md
new file mode 100644
index 00000000000..e02b9c552e3
--- /dev/null
+++ b/static/usage/v8/badge/basic/vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+ 11
+ Badge in start slot
+
+
+ 22
+ Badge in end slot
+
+
+
+
+
+```
diff --git a/static/usage/v8/badge/theming/colors/angular.md b/static/usage/v8/badge/theming/colors/angular.md
new file mode 100644
index 00000000000..bad750b1bfc
--- /dev/null
+++ b/static/usage/v8/badge/theming/colors/angular.md
@@ -0,0 +1,28 @@
+```html
+
+
+ Followers
+ 22k
+
+
+ Likes
+ 118k
+
+
+ Stars
+ 34k
+
+
+ Completed
+ 80
+
+
+ Warnings
+ 70
+
+
+ Notifications
+ 1000
+
+
+```
diff --git a/static/usage/v8/badge/theming/colors/demo.html b/static/usage/v8/badge/theming/colors/demo.html
new file mode 100644
index 00000000000..00c0ecaf435
--- /dev/null
+++ b/static/usage/v8/badge/theming/colors/demo.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+ Badge
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Followers
+ 22k
+
+
+ Likes
+ 118k
+
+
+ Stars
+ 34k
+
+
+ Completed
+ 80
+
+
+ Warnings
+ 70
+
+
+ Notifications
+ 1000
+
+
+
+
+
+
+
diff --git a/static/usage/v8/badge/theming/colors/index.md b/static/usage/v8/badge/theming/colors/index.md
new file mode 100644
index 00000000000..dedf7570d7f
--- /dev/null
+++ b/static/usage/v8/badge/theming/colors/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/badge/theming/colors/javascript.md b/static/usage/v8/badge/theming/colors/javascript.md
new file mode 100644
index 00000000000..bad750b1bfc
--- /dev/null
+++ b/static/usage/v8/badge/theming/colors/javascript.md
@@ -0,0 +1,28 @@
+```html
+
+
+ Followers
+ 22k
+
+
+ Likes
+ 118k
+
+
+ Stars
+ 34k
+
+
+ Completed
+ 80
+
+
+ Warnings
+ 70
+
+
+ Notifications
+ 1000
+
+
+```
diff --git a/static/usage/v8/badge/theming/colors/react.md b/static/usage/v8/badge/theming/colors/react.md
new file mode 100644
index 00000000000..ad53c54274a
--- /dev/null
+++ b/static/usage/v8/badge/theming/colors/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/react';
+function Example() {
+ return (
+
+
+ Followers
+ 22k
+
+
+ Likes
+ 118k
+
+
+ Stars
+ 34k
+
+
+ Completed
+ 80
+
+
+ Warnings
+ 70
+
+
+ Notifications
+ 1000
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/badge/theming/colors/vue.md b/static/usage/v8/badge/theming/colors/vue.md
new file mode 100644
index 00000000000..77e5c1a9e97
--- /dev/null
+++ b/static/usage/v8/badge/theming/colors/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+ Followers
+ 22k
+
+
+ Likes
+ 118k
+
+
+ Stars
+ 34k
+
+
+ Completed
+ 80
+
+
+ Warnings
+ 70
+
+
+ Notifications
+ 1000
+
+
+
+
+
+```
diff --git a/static/usage/v8/badge/theming/css-properties/angular/example_component_css.md b/static/usage/v8/badge/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..cf47682b14d
--- /dev/null
+++ b/static/usage/v8/badge/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-badge {
+ --background: purple;
+ --color: white;
+ --padding-end: 20px;
+ --padding-start: 20px;
+}
+```
diff --git a/static/usage/v8/badge/theming/css-properties/angular/example_component_html.md b/static/usage/v8/badge/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..92df32f60de
--- /dev/null
+++ b/static/usage/v8/badge/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+
+
+ Badges styled
+ 1
+
+
+```
diff --git a/static/usage/v8/badge/theming/css-properties/demo.html b/static/usage/v8/badge/theming/css-properties/demo.html
new file mode 100644
index 00000000000..0087c8d5fc1
--- /dev/null
+++ b/static/usage/v8/badge/theming/css-properties/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+ Select - Styling the Select
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Badges styled
+ 1
+
+
+
+
+
+
+
diff --git a/static/usage/v8/badge/theming/css-properties/index.md b/static/usage/v8/badge/theming/css-properties/index.md
new file mode 100644
index 00000000000..f52a73262c7
--- /dev/null
+++ b/static/usage/v8/badge/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+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';
+
+
diff --git a/static/usage/v8/badge/theming/css-properties/javascript.md b/static/usage/v8/badge/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..6dedc97ba4d
--- /dev/null
+++ b/static/usage/v8/badge/theming/css-properties/javascript.md
@@ -0,0 +1,17 @@
+```html
+
+
+ Badges styled
+ 1
+
+
+
+
+```
diff --git a/static/usage/v8/badge/theming/css-properties/react/main_css.md b/static/usage/v8/badge/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..cf47682b14d
--- /dev/null
+++ b/static/usage/v8/badge/theming/css-properties/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-badge {
+ --background: purple;
+ --color: white;
+ --padding-end: 20px;
+ --padding-start: 20px;
+}
+```
diff --git a/static/usage/v8/badge/theming/css-properties/react/main_tsx.md b/static/usage/v8/badge/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..fea8b34191e
--- /dev/null
+++ b/static/usage/v8/badge/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ Badges styled
+ 1
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/badge/theming/css-properties/vue.md b/static/usage/v8/badge/theming/css-properties/vue.md
new file mode 100644
index 00000000000..08a5d88d81e
--- /dev/null
+++ b/static/usage/v8/badge/theming/css-properties/vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+ Badges styled
+ 1
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/basic/angular.md b/static/usage/v8/breadcrumbs/basic/angular.md
new file mode 100644
index 00000000000..9683fbe6792
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/basic/angular.md
@@ -0,0 +1,8 @@
+```html
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+```
diff --git a/static/usage/v8/breadcrumbs/basic/demo.html b/static/usage/v8/breadcrumbs/basic/demo.html
new file mode 100644
index 00000000000..b020db0c855
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/basic/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Breadcrumbs
+
+
+
+
+
+
+
+
+
+
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+
+
+
+
+
diff --git a/static/usage/v8/breadcrumbs/basic/index.md b/static/usage/v8/breadcrumbs/basic/index.md
new file mode 100644
index 00000000000..4a8f6285767
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/basic/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/breadcrumbs/basic/javascript.md b/static/usage/v8/breadcrumbs/basic/javascript.md
new file mode 100644
index 00000000000..9683fbe6792
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/basic/javascript.md
@@ -0,0 +1,8 @@
+```html
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+```
diff --git a/static/usage/v8/breadcrumbs/basic/react.md b/static/usage/v8/breadcrumbs/basic/react.md
new file mode 100644
index 00000000000..602a5174490
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/basic/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+function Example() {
+ return (
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/breadcrumbs/basic/vue.md b/static/usage/v8/breadcrumbs/basic/vue.md
new file mode 100644
index 00000000000..f665b4cb686
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/basic/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md
new file mode 100644
index 00000000000..926479c1e85
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
new file mode 100644
index 00000000000..8ae69af72a5
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md
@@ -0,0 +1,15 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ maxBreadcrumbs = 4;
+
+ expandBreadcrumbs() {
+ this.maxBreadcrumbs = undefined;
+ }
+}
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/demo.html b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/demo.html
new file mode 100644
index 00000000000..42b9fdd5f9c
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/index.md
new file mode 100644
index 00000000000..3287339b89f
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/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/breadcrumbs/collapsing-items/expand-on-click/javascript.md b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/javascript.md
new file mode 100644
index 00000000000..6e720c27d3c
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/javascript.md
@@ -0,0 +1,18 @@
+```html
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/react.md b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/react.md
new file mode 100644
index 00000000000..b4933d4cf8f
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React, { useState } from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+
+function Example() {
+ const [maxBreadcrumbs, setMaxBreadcrumbs] = useState(4);
+
+ return (
+ setMaxBreadcrumbs(undefined)}>
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/vue.md b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/vue.md
new file mode 100644
index 00000000000..fdd63471ed4
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular.md
new file mode 100644
index 00000000000..d7571e2ebce
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular.md
@@ -0,0 +1,41 @@
+```html
+Before Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+Before Collapse = 0
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+Before Collapse = 2, After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/demo.html b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/demo.html
new file mode 100644
index 00000000000..48e51d81781
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/demo.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+ Breadcrumbs
+
+
+
+
+
+
+
+
+
+
+
+
+ Before Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ Before Collapse = 0
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ Before Collapse = 2, After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+
+
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md
new file mode 100644
index 00000000000..cdceec0621a
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/javascript.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/javascript.md
new file mode 100644
index 00000000000..11648ff8762
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/javascript.md
@@ -0,0 +1,41 @@
+```html
+Before Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+Before Collapse = 0
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+Before Collapse = 2, After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/react.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/react.md
new file mode 100644
index 00000000000..e54c8676f4e
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/react.md
@@ -0,0 +1,50 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Before Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ Before Collapse = 0
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ Before Collapse = 2, After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/vue.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/vue.md
new file mode 100644
index 00000000000..61dbebde1d7
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/vue.md
@@ -0,0 +1,52 @@
+```html
+
+ Before Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ Before Collapse = 0
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+ Before Collapse = 2, After Collapse = 2
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/angular.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/angular.md
new file mode 100644
index 00000000000..e77f5ec2d16
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/angular.md
@@ -0,0 +1,10 @@
+```html
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/demo.html b/static/usage/v8/breadcrumbs/collapsing-items/max-items/demo.html
new file mode 100644
index 00000000000..977e07bfda9
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Breadcrumbs
+
+
+
+
+
+
+
+
+
+
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+
+
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md
new file mode 100644
index 00000000000..1b8e19f586e
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md
@@ -0,0 +1,12 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/javascript.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/javascript.md
new file mode 100644
index 00000000000..a5529d20b23
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/react.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/react.md
new file mode 100644
index 00000000000..c92c6a41ffe
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+function Example() {
+ return (
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/vue.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/vue.md
new file mode 100644
index 00000000000..a9804c52f33
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
new file mode 100644
index 00000000000..e3c0462a148
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+
+
+ {{ breadcrumb.textContent }}
+
+
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
new file mode 100644
index 00000000000..aabfb29a821
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild('popover') popover;
+
+ isOpen = false;
+ collapsedBreadcrumbs: HTMLIonBreadcrumbElement[] = [];
+
+ async presentPopover(e: Event) {
+ this.collapsedBreadcrumbs = (e as CustomEvent).detail.collapsedBreadcrumbs;
+ this.popover.event = e;
+ this.isOpen = true;
+ }
+}
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/demo.html b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/demo.html
new file mode 100644
index 00000000000..96200521f32
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/demo.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+ Popover
+
+
+
+
+
+
+
+
+
+
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/index.md
new file mode 100644
index 00000000000..88f5c47114a
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/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/breadcrumbs/collapsing-items/popover-on-click/javascript.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/javascript.md
new file mode 100644
index 00000000000..1d22085a5b1
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/javascript.md
@@ -0,0 +1,41 @@
+```html
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/react.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/react.md
new file mode 100644
index 00000000000..66ccc22bfe3
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/react.md
@@ -0,0 +1,41 @@
+```tsx
+import React, { useRef, useState } from 'react';
+import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover } from '@ionic/react';
+
+function Example() {
+ const popover = useRef(null);
+ const [collapsedBreadcrumbs, setCollapsedBreadcrumbs] = useState([]);
+ const [popoverOpen, setPopoverOpen] = useState(false);
+
+ const openPopover = (e: Event) => {
+ setCollapsedBreadcrumbs((e as CustomEvent).detail.collapsedBreadcrumbs);
+ popover.current!.event = e;
+ setPopoverOpen(true);
+ };
+
+ return (
+ <>
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+ setPopoverOpen(false)}>
+
+
+ {collapsedBreadcrumbs.map((breadcrumb, i) => (
+
+ {breadcrumb.textContent}
+
+ ))}
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/vue.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/vue.md
new file mode 100644
index 00000000000..54368fa7213
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/vue.md
@@ -0,0 +1,48 @@
+```html
+
+
+ Home
+ Electronics
+ Photography
+ Cameras
+ Film
+ 35 mm
+
+
+
+
+
+ {{ breadcrumb.textContent }}
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/angular.md b/static/usage/v8/breadcrumbs/icons/custom-separators/angular.md
new file mode 100644
index 00000000000..e6f7fee4653
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/icons/custom-separators/angular.md
@@ -0,0 +1,20 @@
+```html
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/demo.html b/static/usage/v8/breadcrumbs/icons/custom-separators/demo.html
new file mode 100644
index 00000000000..356796ea73c
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/icons/custom-separators/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+ Breadcrumbs
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/index.md b/static/usage/v8/breadcrumbs/icons/custom-separators/index.md
new file mode 100644
index 00000000000..6d4319e425b
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/icons/custom-separators/index.md
@@ -0,0 +1,12 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/javascript.md b/static/usage/v8/breadcrumbs/icons/custom-separators/javascript.md
new file mode 100644
index 00000000000..e6f7fee4653
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/icons/custom-separators/javascript.md
@@ -0,0 +1,20 @@
+```html
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/react.md b/static/usage/v8/breadcrumbs/icons/custom-separators/react.md
new file mode 100644
index 00000000000..de824d91cf5
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/icons/custom-separators/react.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/react';
+import { arrowForwardCircle } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v8/breadcrumbs/icons/custom-separators/vue.md
new file mode 100644
index 00000000000..f0849705aab
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/icons/custom-separators/vue.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/angular.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/angular.md
new file mode 100644
index 00000000000..a31d718242d
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/angular.md
@@ -0,0 +1,41 @@
+```html
+Icons at Start
+
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+Icons at End
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/demo.html b/static/usage/v8/breadcrumbs/icons/icons-on-items/demo.html
new file mode 100644
index 00000000000..a133b29791c
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/demo.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+ Breadcrumbs
+
+
+
+
+
+
+
+
+
+
+
+
+ Icons at Start
+
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+ Icons at End
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/index.md
new file mode 100644
index 00000000000..23fd0060c40
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/javascript.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/javascript.md
new file mode 100644
index 00000000000..a31d718242d
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/javascript.md
@@ -0,0 +1,41 @@
+```html
+Icons at Start
+
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+Icons at End
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/react.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/react.md
new file mode 100644
index 00000000000..e042ff5aa05
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/react.md
@@ -0,0 +1,52 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel } from '@ionic/react';
+import { camera, film, flash, home } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+ Icons at Start
+
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+ Icons at End
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/vue.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/vue.md
new file mode 100644
index 00000000000..2e1634143f6
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/vue.md
@@ -0,0 +1,56 @@
+```html
+
+ Icons at Start
+
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+ Icons at End
+
+
+ Home
+
+
+
+ Electronics
+
+
+
+ Cameras
+
+
+
+ Film
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/theming/colors/angular.md b/static/usage/v8/breadcrumbs/theming/colors/angular.md
new file mode 100644
index 00000000000..610c4af5c89
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/colors/angular.md
@@ -0,0 +1,8 @@
+```html
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+```
diff --git a/static/usage/v8/breadcrumbs/theming/colors/demo.html b/static/usage/v8/breadcrumbs/theming/colors/demo.html
new file mode 100644
index 00000000000..0bf60b9b8d9
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/colors/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Breadcrumbs
+
+
+
+
+
+
+
+
+
+
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+
+
+
+
+
diff --git a/static/usage/v8/breadcrumbs/theming/colors/index.md b/static/usage/v8/breadcrumbs/theming/colors/index.md
new file mode 100644
index 00000000000..df68242f938
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/colors/index.md
@@ -0,0 +1,12 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/breadcrumbs/theming/colors/javascript.md b/static/usage/v8/breadcrumbs/theming/colors/javascript.md
new file mode 100644
index 00000000000..610c4af5c89
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/colors/javascript.md
@@ -0,0 +1,8 @@
+```html
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+```
diff --git a/static/usage/v8/breadcrumbs/theming/colors/react.md b/static/usage/v8/breadcrumbs/theming/colors/react.md
new file mode 100644
index 00000000000..22cae85dd8f
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/colors/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+function Example() {
+ return (
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/breadcrumbs/theming/colors/vue.md b/static/usage/v8/breadcrumbs/theming/colors/vue.md
new file mode 100644
index 00000000000..357d76b7422
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/colors/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_css.md b/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..3dc7c4640ad
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,7 @@
+```css
+ion-breadcrumb {
+ --color: rgb(81, 155, 198);
+ --color-active: rgb(150, 112, 220);
+ --color-hover: rgb(103, 61, 180);
+}
+```
diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_html.md b/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..9683fbe6792
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,8 @@
+```html
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+```
diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/demo.html b/static/usage/v8/breadcrumbs/theming/css-properties/demo.html
new file mode 100644
index 00000000000..3f1d5b8cc56
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/css-properties/demo.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+ Breadcrumbs
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+
+
+
+
+
diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/index.md b/static/usage/v8/breadcrumbs/theming/css-properties/index.md
new file mode 100644
index 00000000000..45726c2da95
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/css-properties/index.md
@@ -0,0 +1,31 @@
+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';
+
+
diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/javascript.md b/static/usage/v8/breadcrumbs/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..49e5c6688ff
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/css-properties/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+
+
+```
diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/react/main_css.md b/static/usage/v8/breadcrumbs/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..3dc7c4640ad
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/css-properties/react/main_css.md
@@ -0,0 +1,7 @@
+```css
+ion-breadcrumb {
+ --color: rgb(81, 155, 198);
+ --color-active: rgb(150, 112, 220);
+ --color-hover: rgb(103, 61, 180);
+}
+```
diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/react/main_tsx.md b/static/usage/v8/breadcrumbs/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..7d168beeb60
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/vue.md b/static/usage/v8/breadcrumbs/theming/css-properties/vue.md
new file mode 100644
index 00000000000..119ed6e5a0a
--- /dev/null
+++ b/static/usage/v8/breadcrumbs/theming/css-properties/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+ Home
+ Electronics
+ Cameras
+ Film
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/button/basic/angular.md b/static/usage/v8/button/basic/angular.md
new file mode 100644
index 00000000000..d313d7dcd23
--- /dev/null
+++ b/static/usage/v8/button/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+Default Disabled
+```
diff --git a/static/usage/v8/button/basic/demo.html b/static/usage/v8/button/basic/demo.html
new file mode 100644
index 00000000000..8a5c4a70c9a
--- /dev/null
+++ b/static/usage/v8/button/basic/demo.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+ Default
+ Disabled
+
+
+
+
+
diff --git a/static/usage/v8/button/basic/index.md b/static/usage/v8/button/basic/index.md
new file mode 100644
index 00000000000..2342f91a351
--- /dev/null
+++ b/static/usage/v8/button/basic/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/button/basic/javascript.md b/static/usage/v8/button/basic/javascript.md
new file mode 100644
index 00000000000..e298f5a1246
--- /dev/null
+++ b/static/usage/v8/button/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+Default Disabled
+```
diff --git a/static/usage/v8/button/basic/react.md b/static/usage/v8/button/basic/react.md
new file mode 100644
index 00000000000..8393e9cf2b7
--- /dev/null
+++ b/static/usage/v8/button/basic/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default
+ Disabled
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/button/basic/vue.md b/static/usage/v8/button/basic/vue.md
new file mode 100644
index 00000000000..dbd787691fb
--- /dev/null
+++ b/static/usage/v8/button/basic/vue.md
@@ -0,0 +1,15 @@
+```html
+
+ Default
+ Disabled
+
+
+
+```
diff --git a/static/usage/v8/button/expand/angular.md b/static/usage/v8/button/expand/angular.md
new file mode 100644
index 00000000000..b49d2c767ae
--- /dev/null
+++ b/static/usage/v8/button/expand/angular.md
@@ -0,0 +1,3 @@
+```html
+Block Full
+```
diff --git a/static/usage/v8/button/expand/demo.html b/static/usage/v8/button/expand/demo.html
new file mode 100644
index 00000000000..bff732f8015
--- /dev/null
+++ b/static/usage/v8/button/expand/demo.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+ Block
+ Full
+
+
+
+
+
diff --git a/static/usage/v8/button/expand/index.md b/static/usage/v8/button/expand/index.md
new file mode 100644
index 00000000000..3bf460ada3e
--- /dev/null
+++ b/static/usage/v8/button/expand/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/button/expand/javascript.md b/static/usage/v8/button/expand/javascript.md
new file mode 100644
index 00000000000..b49d2c767ae
--- /dev/null
+++ b/static/usage/v8/button/expand/javascript.md
@@ -0,0 +1,3 @@
+```html
+Block Full
+```
diff --git a/static/usage/v8/button/expand/react.md b/static/usage/v8/button/expand/react.md
new file mode 100644
index 00000000000..424d8e1494b
--- /dev/null
+++ b/static/usage/v8/button/expand/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Block
+ Full
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/button/expand/vue.md b/static/usage/v8/button/expand/vue.md
new file mode 100644
index 00000000000..f67d93ecdef
--- /dev/null
+++ b/static/usage/v8/button/expand/vue.md
@@ -0,0 +1,15 @@
+```html
+
+ Block
+ Full
+
+
+
+```
diff --git a/static/usage/v8/button/fill/angular.md b/static/usage/v8/button/fill/angular.md
new file mode 100644
index 00000000000..390ae848201
--- /dev/null
+++ b/static/usage/v8/button/fill/angular.md
@@ -0,0 +1,6 @@
+```html
+Default
+Clear
+Outline
+Solid
+```
diff --git a/static/usage/v8/button/fill/demo.html b/static/usage/v8/button/fill/demo.html
new file mode 100644
index 00000000000..f861e384b73
--- /dev/null
+++ b/static/usage/v8/button/fill/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+ Default
+ Clear
+ Outline
+ Solid
+
+
+
+
+
diff --git a/static/usage/v8/button/fill/index.md b/static/usage/v8/button/fill/index.md
new file mode 100644
index 00000000000..b34226a0d15
--- /dev/null
+++ b/static/usage/v8/button/fill/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/button/fill/javascript.md b/static/usage/v8/button/fill/javascript.md
new file mode 100644
index 00000000000..390ae848201
--- /dev/null
+++ b/static/usage/v8/button/fill/javascript.md
@@ -0,0 +1,6 @@
+```html
+Default
+Clear
+Outline
+Solid
+```
diff --git a/static/usage/v8/button/fill/react.md b/static/usage/v8/button/fill/react.md
new file mode 100644
index 00000000000..5a32a7d992d
--- /dev/null
+++ b/static/usage/v8/button/fill/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default
+ Clear
+ Outline
+ Solid
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/button/fill/vue.md b/static/usage/v8/button/fill/vue.md
new file mode 100644
index 00000000000..4b965ed3582
--- /dev/null
+++ b/static/usage/v8/button/fill/vue.md
@@ -0,0 +1,17 @@
+```html
+
+ Default
+ Clear
+ Outline
+ Solid
+
+
+
+```
diff --git a/static/usage/v8/button/icons/angular.md b/static/usage/v8/button/icons/angular.md
new file mode 100644
index 00000000000..f6709fa5b95
--- /dev/null
+++ b/static/usage/v8/button/icons/angular.md
@@ -0,0 +1,43 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Left Icon
+
+
+
+
+ Left Icon
+
+
+
+
+ Left Icon
+
+
+
+ Right Icon
+
+
+
+
+ Right Icon
+
+
+
+
+ Right Icon
+
+
+```
diff --git a/static/usage/v8/button/icons/demo.html b/static/usage/v8/button/icons/demo.html
new file mode 100644
index 00000000000..597ea12252b
--- /dev/null
+++ b/static/usage/v8/button/icons/demo.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Left Icon
+
+
+
+
+ Left Icon
+
+
+
+
+ Left Icon
+
+
+
+ Right Icon
+
+
+
+
+ Right Icon
+
+
+
+
+ Right Icon
+
+
+
+
+
+
+
diff --git a/static/usage/v8/button/icons/index.md b/static/usage/v8/button/icons/index.md
new file mode 100644
index 00000000000..74b5c921077
--- /dev/null
+++ b/static/usage/v8/button/icons/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/button/icons/javascript.md b/static/usage/v8/button/icons/javascript.md
new file mode 100644
index 00000000000..f6709fa5b95
--- /dev/null
+++ b/static/usage/v8/button/icons/javascript.md
@@ -0,0 +1,43 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Left Icon
+
+
+
+
+ Left Icon
+
+
+
+
+ Left Icon
+
+
+
+ Right Icon
+
+
+
+
+ Right Icon
+
+
+
+
+ Right Icon
+
+
+```
diff --git a/static/usage/v8/button/icons/react.md b/static/usage/v8/button/icons/react.md
new file mode 100644
index 00000000000..68553487eb1
--- /dev/null
+++ b/static/usage/v8/button/icons/react.md
@@ -0,0 +1,54 @@
+```tsx
+import React from 'react';
+import { IonButton, IonIcon } from '@ionic/react';
+import { heart, logoApple, settingsSharp, star } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Left Icon
+
+
+
+
+ Left Icon
+
+
+
+
+ Left Icon
+
+
+
+ Right Icon
+
+
+
+
+ Right Icon
+
+
+
+
+ Right Icon
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/button/icons/vue.md b/static/usage/v8/button/icons/vue.md
new file mode 100644
index 00000000000..f140ddff3a8
--- /dev/null
+++ b/static/usage/v8/button/icons/vue.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Left Icon
+
+
+
+
+ Left Icon
+
+
+
+
+ Left Icon
+
+
+
+ Right Icon
+
+
+
+
+ Right Icon
+
+
+
+
+ Right Icon
+
+
+
+
+
+```
diff --git a/static/usage/v8/button/shape/angular.md b/static/usage/v8/button/shape/angular.md
new file mode 100644
index 00000000000..168a7615113
--- /dev/null
+++ b/static/usage/v8/button/shape/angular.md
@@ -0,0 +1,10 @@
+```html
+Default
+Round
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/button/shape/demo.html b/static/usage/v8/button/shape/demo.html
new file mode 100644
index 00000000000..ccc374cfb77
--- /dev/null
+++ b/static/usage/v8/button/shape/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+ Default
+ Round
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/button/shape/index.md b/static/usage/v8/button/shape/index.md
new file mode 100644
index 00000000000..c31fd88349c
--- /dev/null
+++ b/static/usage/v8/button/shape/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/button/shape/javascript.md b/static/usage/v8/button/shape/javascript.md
new file mode 100644
index 00000000000..168a7615113
--- /dev/null
+++ b/static/usage/v8/button/shape/javascript.md
@@ -0,0 +1,10 @@
+```html
+Default
+Round
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/button/shape/react.md b/static/usage/v8/button/shape/react.md
new file mode 100644
index 00000000000..75e12e3ed7c
--- /dev/null
+++ b/static/usage/v8/button/shape/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonButton, IonIcon } from '@ionic/react';
+import { heart } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+ Default
+ Round
+
+
+
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/button/shape/vue.md b/static/usage/v8/button/shape/vue.md
new file mode 100644
index 00000000000..4611c33383c
--- /dev/null
+++ b/static/usage/v8/button/shape/vue.md
@@ -0,0 +1,25 @@
+```html
+
+ Default
+ Round
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/button/size/angular.md b/static/usage/v8/button/size/angular.md
new file mode 100644
index 00000000000..a24809c2d61
--- /dev/null
+++ b/static/usage/v8/button/size/angular.md
@@ -0,0 +1,5 @@
+```html
+Small
+Default
+Large
+```
diff --git a/static/usage/v8/button/size/demo.html b/static/usage/v8/button/size/demo.html
new file mode 100644
index 00000000000..a5d0b8c039f
--- /dev/null
+++ b/static/usage/v8/button/size/demo.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+ Small
+ Default
+ Large
+
+
+
+
+
diff --git a/static/usage/v8/button/size/index.md b/static/usage/v8/button/size/index.md
new file mode 100644
index 00000000000..8f25ec44644
--- /dev/null
+++ b/static/usage/v8/button/size/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/button/size/javascript.md b/static/usage/v8/button/size/javascript.md
new file mode 100644
index 00000000000..a24809c2d61
--- /dev/null
+++ b/static/usage/v8/button/size/javascript.md
@@ -0,0 +1,5 @@
+```html
+Small
+Default
+Large
+```
diff --git a/static/usage/v8/button/size/react.md b/static/usage/v8/button/size/react.md
new file mode 100644
index 00000000000..8deb283a9d4
--- /dev/null
+++ b/static/usage/v8/button/size/react.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Small
+ Default
+ Large
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/button/size/vue.md b/static/usage/v8/button/size/vue.md
new file mode 100644
index 00000000000..02a27f22d1d
--- /dev/null
+++ b/static/usage/v8/button/size/vue.md
@@ -0,0 +1,16 @@
+```html
+
+ Small
+ Default
+ Large
+
+
+
+```
diff --git a/static/usage/v8/button/text-wrapping/angular.md b/static/usage/v8/button/text-wrapping/angular.md
new file mode 100644
index 00000000000..876e9dc8344
--- /dev/null
+++ b/static/usage/v8/button/text-wrapping/angular.md
@@ -0,0 +1,7 @@
+```html
+Default
+This is the button that never ends it just goes on and on and on and on and on and on and on and on my
+ friends
+```
diff --git a/static/usage/v8/button/text-wrapping/demo.html b/static/usage/v8/button/text-wrapping/demo.html
new file mode 100644
index 00000000000..4f930331abe
--- /dev/null
+++ b/static/usage/v8/button/text-wrapping/demo.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+ Default
+ This is the button that never ends it just goes on and on and on and on and on and on and on and on my
+ friends
+
+
+
+
+
diff --git a/static/usage/v8/button/text-wrapping/index.md b/static/usage/v8/button/text-wrapping/index.md
new file mode 100644
index 00000000000..5ca882379b6
--- /dev/null
+++ b/static/usage/v8/button/text-wrapping/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/button/text-wrapping/javascript.md b/static/usage/v8/button/text-wrapping/javascript.md
new file mode 100644
index 00000000000..876e9dc8344
--- /dev/null
+++ b/static/usage/v8/button/text-wrapping/javascript.md
@@ -0,0 +1,7 @@
+```html
+Default
+This is the button that never ends it just goes on and on and on and on and on and on and on and on my
+ friends
+```
diff --git a/static/usage/v8/button/text-wrapping/react.md b/static/usage/v8/button/text-wrapping/react.md
new file mode 100644
index 00000000000..babad89f4c1
--- /dev/null
+++ b/static/usage/v8/button/text-wrapping/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default
+
+ This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/button/text-wrapping/vue.md b/static/usage/v8/button/text-wrapping/vue.md
new file mode 100644
index 00000000000..3462f7357ea
--- /dev/null
+++ b/static/usage/v8/button/text-wrapping/vue.md
@@ -0,0 +1,18 @@
+```html
+
+ Default
+ This is the button that never ends it just goes on and on and on and on and on and on and on and on my
+ friends
+
+
+
+```
diff --git a/static/usage/v8/button/theming/colors/angular.md b/static/usage/v8/button/theming/colors/angular.md
new file mode 100644
index 00000000000..fed23e8442d
--- /dev/null
+++ b/static/usage/v8/button/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+Default
+Primary
+Secondary
+Tertiary
+Success
+Warning
+Danger
+Light
+Medium
+Dark
+```
diff --git a/static/usage/v8/button/theming/colors/demo.html b/static/usage/v8/button/theming/colors/demo.html
new file mode 100644
index 00000000000..79e27014015
--- /dev/null
+++ b/static/usage/v8/button/theming/colors/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+
+
diff --git a/static/usage/v8/button/theming/colors/index.md b/static/usage/v8/button/theming/colors/index.md
new file mode 100644
index 00000000000..21ab85f8ebc
--- /dev/null
+++ b/static/usage/v8/button/theming/colors/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/button/theming/colors/javascript.md b/static/usage/v8/button/theming/colors/javascript.md
new file mode 100644
index 00000000000..fed23e8442d
--- /dev/null
+++ b/static/usage/v8/button/theming/colors/javascript.md
@@ -0,0 +1,12 @@
+```html
+Default
+Primary
+Secondary
+Tertiary
+Success
+Warning
+Danger
+Light
+Medium
+Dark
+```
diff --git a/static/usage/v8/button/theming/colors/react.md b/static/usage/v8/button/theming/colors/react.md
new file mode 100644
index 00000000000..066aaa06f59
--- /dev/null
+++ b/static/usage/v8/button/theming/colors/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/button/theming/colors/vue.md b/static/usage/v8/button/theming/colors/vue.md
new file mode 100644
index 00000000000..7fee983d696
--- /dev/null
+++ b/static/usage/v8/button/theming/colors/vue.md
@@ -0,0 +1,23 @@
+```html
+
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+```
diff --git a/static/usage/v8/button/theming/css-properties/angular/example_component_css.md b/static/usage/v8/button/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..fa985cbe82f
--- /dev/null
+++ b/static/usage/v8/button/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,22 @@
+```css
+ion-button {
+ --background: #93e9be;
+ --background-hover: #9ce0be;
+ --background-activated: #88f4be;
+ --background-focused: #88f4be;
+
+ --color: blue;
+
+ --border-radius: 0;
+ --border-color: #000;
+ --border-style: solid;
+ --border-width: 1px;
+
+ --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
+
+ --ripple-color: deeppink;
+
+ --padding-top: 10px;
+ --padding-bottom: 10px;
+}
+```
diff --git a/static/usage/v8/button/theming/css-properties/angular/example_component_html.md b/static/usage/v8/button/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..678df6cde1b
--- /dev/null
+++ b/static/usage/v8/button/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Custom Button
+```
diff --git a/static/usage/v8/button/theming/css-properties/demo.html b/static/usage/v8/button/theming/css-properties/demo.html
new file mode 100644
index 00000000000..c9f478abf38
--- /dev/null
+++ b/static/usage/v8/button/theming/css-properties/demo.html
@@ -0,0 +1,45 @@
+
+
+
+
+
+ Button
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom Button
+
+
+
+
+
diff --git a/static/usage/v8/button/theming/css-properties/index.md b/static/usage/v8/button/theming/css-properties/index.md
new file mode 100644
index 00000000000..0cc6adf46c8
--- /dev/null
+++ b/static/usage/v8/button/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/button/theming/css-properties/javascript.md b/static/usage/v8/button/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..8bca67a3206
--- /dev/null
+++ b/static/usage/v8/button/theming/css-properties/javascript.md
@@ -0,0 +1,26 @@
+```html
+
+
+Custom Button
+```
diff --git a/static/usage/v8/button/theming/css-properties/react/main_css.md b/static/usage/v8/button/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..fa985cbe82f
--- /dev/null
+++ b/static/usage/v8/button/theming/css-properties/react/main_css.md
@@ -0,0 +1,22 @@
+```css
+ion-button {
+ --background: #93e9be;
+ --background-hover: #9ce0be;
+ --background-activated: #88f4be;
+ --background-focused: #88f4be;
+
+ --color: blue;
+
+ --border-radius: 0;
+ --border-color: #000;
+ --border-style: solid;
+ --border-width: 1px;
+
+ --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);
+
+ --ripple-color: deeppink;
+
+ --padding-top: 10px;
+ --padding-bottom: 10px;
+}
+```
diff --git a/static/usage/v8/button/theming/css-properties/react/main_tsx.md b/static/usage/v8/button/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..c8c432e1b9c
--- /dev/null
+++ b/static/usage/v8/button/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonButton } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return Custom Button ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/button/theming/css-properties/vue.md b/static/usage/v8/button/theming/css-properties/vue.md
new file mode 100644
index 00000000000..0243821d67f
--- /dev/null
+++ b/static/usage/v8/button/theming/css-properties/vue.md
@@ -0,0 +1,37 @@
+```html
+
+ Custom Button
+
+
+
+
+
+```
diff --git a/static/usage/v8/buttons/basic/angular.md b/static/usage/v8/buttons/basic/angular.md
new file mode 100644
index 00000000000..901587bfef1
--- /dev/null
+++ b/static/usage/v8/buttons/basic/angular.md
@@ -0,0 +1,8 @@
+```html
+
+
+ Button
+
+ Default Buttons
+
+```
diff --git a/static/usage/v8/buttons/basic/demo.html b/static/usage/v8/buttons/basic/demo.html
new file mode 100644
index 00000000000..7888aa64524
--- /dev/null
+++ b/static/usage/v8/buttons/basic/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+ Button
+
+ Default Buttons
+
+
+
+
+
+
diff --git a/static/usage/v8/buttons/basic/index.md b/static/usage/v8/buttons/basic/index.md
new file mode 100644
index 00000000000..0be42104118
--- /dev/null
+++ b/static/usage/v8/buttons/basic/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/buttons/basic/javascript.md b/static/usage/v8/buttons/basic/javascript.md
new file mode 100644
index 00000000000..901587bfef1
--- /dev/null
+++ b/static/usage/v8/buttons/basic/javascript.md
@@ -0,0 +1,8 @@
+```html
+
+
+ Button
+
+ Default Buttons
+
+```
diff --git a/static/usage/v8/buttons/basic/react.md b/static/usage/v8/buttons/basic/react.md
new file mode 100644
index 00000000000..4a73e0d4958
--- /dev/null
+++ b/static/usage/v8/buttons/basic/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Button
+
+ Default Buttons
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/buttons/basic/vue.md b/static/usage/v8/buttons/basic/vue.md
new file mode 100644
index 00000000000..3da668fcb20
--- /dev/null
+++ b/static/usage/v8/buttons/basic/vue.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+ Button
+
+ Default Buttons
+
+
+
+
+```
diff --git a/static/usage/v8/buttons/placement/angular.md b/static/usage/v8/buttons/placement/angular.md
new file mode 100644
index 00000000000..8273655ad49
--- /dev/null
+++ b/static/usage/v8/buttons/placement/angular.md
@@ -0,0 +1,21 @@
+```html
+
+
+ Start
+
+ Buttons
+
+ End
+
+
+
+
+
+ Secondary
+
+ Buttons
+
+ Primary
+
+
+```
diff --git a/static/usage/v8/buttons/placement/demo.html b/static/usage/v8/buttons/placement/demo.html
new file mode 100644
index 00000000000..2a2b1366f94
--- /dev/null
+++ b/static/usage/v8/buttons/placement/demo.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+ Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Start
+
+ Buttons
+
+ End
+
+
+
+
+
+ Secondary
+
+ Buttons
+
+ Primary
+
+
+
+
+
+
+
diff --git a/static/usage/v8/buttons/placement/index.md b/static/usage/v8/buttons/placement/index.md
new file mode 100644
index 00000000000..3420c564089
--- /dev/null
+++ b/static/usage/v8/buttons/placement/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/buttons/placement/javascript.md b/static/usage/v8/buttons/placement/javascript.md
new file mode 100644
index 00000000000..8273655ad49
--- /dev/null
+++ b/static/usage/v8/buttons/placement/javascript.md
@@ -0,0 +1,21 @@
+```html
+
+
+ Start
+
+ Buttons
+
+ End
+
+
+
+
+
+ Secondary
+
+ Buttons
+
+ Primary
+
+
+```
diff --git a/static/usage/v8/buttons/placement/react.md b/static/usage/v8/buttons/placement/react.md
new file mode 100644
index 00000000000..27d6b54d4ba
--- /dev/null
+++ b/static/usage/v8/buttons/placement/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Start
+
+ Buttons
+
+ End
+
+
+
+
+
+ Secondary
+
+ Buttons
+
+ Primary
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/buttons/placement/vue.md b/static/usage/v8/buttons/placement/vue.md
new file mode 100644
index 00000000000..dc0217fc146
--- /dev/null
+++ b/static/usage/v8/buttons/placement/vue.md
@@ -0,0 +1,32 @@
+```html
+
+
+
+ Start
+
+ Buttons
+
+ End
+
+
+
+
+
+ Secondary
+
+ Buttons
+
+ Primary
+
+
+
+
+
+```
diff --git a/static/usage/v8/buttons/types/angular.md b/static/usage/v8/buttons/types/angular.md
new file mode 100644
index 00000000000..9562dbb3b47
--- /dev/null
+++ b/static/usage/v8/buttons/types/angular.md
@@ -0,0 +1,74 @@
+```html
+
+
+ Favorite
+
+ Default Buttons
+
+ Delete
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+```
diff --git a/static/usage/v8/buttons/types/demo.html b/static/usage/v8/buttons/types/demo.html
new file mode 100644
index 00000000000..c17e433f128
--- /dev/null
+++ b/static/usage/v8/buttons/types/demo.html
@@ -0,0 +1,100 @@
+
+
+
+
+
+ Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Favorite
+
+ Default Buttons
+
+ Delete
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+
+
+
+
+
diff --git a/static/usage/v8/buttons/types/index.md b/static/usage/v8/buttons/types/index.md
new file mode 100644
index 00000000000..1277378f930
--- /dev/null
+++ b/static/usage/v8/buttons/types/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/buttons/types/javascript.md b/static/usage/v8/buttons/types/javascript.md
new file mode 100644
index 00000000000..9562dbb3b47
--- /dev/null
+++ b/static/usage/v8/buttons/types/javascript.md
@@ -0,0 +1,74 @@
+```html
+
+
+ Favorite
+
+ Default Buttons
+
+ Delete
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+```
diff --git a/static/usage/v8/buttons/types/react.md b/static/usage/v8/buttons/types/react.md
new file mode 100644
index 00000000000..01baca04d74
--- /dev/null
+++ b/static/usage/v8/buttons/types/react.md
@@ -0,0 +1,85 @@
+```tsx
+import React from 'react';
+import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/react';
+import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Favorite
+
+ Default Buttons
+
+ Delete
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/buttons/types/vue.md b/static/usage/v8/buttons/types/vue.md
new file mode 100644
index 00000000000..60b04a067da
--- /dev/null
+++ b/static/usage/v8/buttons/types/vue.md
@@ -0,0 +1,89 @@
+```html
+
+
+
+ Favorite
+
+ Default Buttons
+
+ Delete
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Icon Buttons
+
+
+
+
+
+
+ Contact
+
+
+
+
+ Help
+
+
+
+ Solid Buttons
+
+
+
+
+
+
+ Star
+
+
+
+
+ Edit
+
+
+
+ Outline Buttons
+
+
+
+
+
+
+ Back Button
+
+
+
+
+
+
+ Menu Button
+
+
+
+
+```
diff --git a/static/usage/v8/card/basic/angular.md b/static/usage/v8/card/basic/angular.md
new file mode 100644
index 00000000000..d489fbc5e26
--- /dev/null
+++ b/static/usage/v8/card/basic/angular.md
@@ -0,0 +1,12 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+```
diff --git a/static/usage/v8/card/basic/demo.html b/static/usage/v8/card/basic/demo.html
new file mode 100644
index 00000000000..bf913a00183
--- /dev/null
+++ b/static/usage/v8/card/basic/demo.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+ Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+
+
+
+
+
diff --git a/static/usage/v8/card/basic/index.md b/static/usage/v8/card/basic/index.md
new file mode 100644
index 00000000000..1f6c20f2705
--- /dev/null
+++ b/static/usage/v8/card/basic/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/card/basic/javascript.md b/static/usage/v8/card/basic/javascript.md
new file mode 100644
index 00000000000..d489fbc5e26
--- /dev/null
+++ b/static/usage/v8/card/basic/javascript.md
@@ -0,0 +1,12 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+```
diff --git a/static/usage/v8/card/basic/react.md b/static/usage/v8/card/basic/react.md
new file mode 100644
index 00000000000..cc05f5ca481
--- /dev/null
+++ b/static/usage/v8/card/basic/react.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Card Title
+ Card Subtitle
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/card/basic/vue.md b/static/usage/v8/card/basic/vue.md
new file mode 100644
index 00000000000..aa44d9f0931
--- /dev/null
+++ b/static/usage/v8/card/basic/vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+
+
+
+```
diff --git a/static/usage/v8/card/buttons/angular.md b/static/usage/v8/card/buttons/angular.md
new file mode 100644
index 00000000000..c597c1dca7a
--- /dev/null
+++ b/static/usage/v8/card/buttons/angular.md
@@ -0,0 +1,15 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+ Action 1
+ Action 2
+
+```
diff --git a/static/usage/v8/card/buttons/demo.html b/static/usage/v8/card/buttons/demo.html
new file mode 100644
index 00000000000..c2d5b30975d
--- /dev/null
+++ b/static/usage/v8/card/buttons/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+ Action 1
+ Action 2
+
+
+
+
+
+
diff --git a/static/usage/v8/card/buttons/index.md b/static/usage/v8/card/buttons/index.md
new file mode 100644
index 00000000000..46e17cf4b1d
--- /dev/null
+++ b/static/usage/v8/card/buttons/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/card/buttons/javascript.md b/static/usage/v8/card/buttons/javascript.md
new file mode 100644
index 00000000000..c597c1dca7a
--- /dev/null
+++ b/static/usage/v8/card/buttons/javascript.md
@@ -0,0 +1,15 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+ Action 1
+ Action 2
+
+```
diff --git a/static/usage/v8/card/buttons/react.md b/static/usage/v8/card/buttons/react.md
new file mode 100644
index 00000000000..af0e4bc6e14
--- /dev/null
+++ b/static/usage/v8/card/buttons/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Card Title
+ Card Subtitle
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+ Action 1
+ Action 2
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/card/buttons/vue.md b/static/usage/v8/card/buttons/vue.md
new file mode 100644
index 00000000000..2266589135f
--- /dev/null
+++ b/static/usage/v8/card/buttons/vue.md
@@ -0,0 +1,26 @@
+```html
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+ Action 1
+ Action 2
+
+
+
+
+```
diff --git a/static/usage/v8/card/list/angular/example_component_css.md b/static/usage/v8/card/list/angular/example_component_css.md
new file mode 100644
index 00000000000..1e82c58ad8c
--- /dev/null
+++ b/static/usage/v8/card/list/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-item {
+ --padding-start: 0;
+}
+```
diff --git a/static/usage/v8/card/list/angular/example_component_html.md b/static/usage/v8/card/list/angular/example_component_html.md
new file mode 100644
index 00000000000..850c62ec942
--- /dev/null
+++ b/static/usage/v8/card/list/angular/example_component_html.md
@@ -0,0 +1,39 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+```
diff --git a/static/usage/v8/card/list/demo.html b/static/usage/v8/card/list/demo.html
new file mode 100644
index 00000000000..de59b40c6e8
--- /dev/null
+++ b/static/usage/v8/card/list/demo.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+ Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/card/list/index.md b/static/usage/v8/card/list/index.md
new file mode 100644
index 00000000000..b20109f53bb
--- /dev/null
+++ b/static/usage/v8/card/list/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/card/list/javascript.md b/static/usage/v8/card/list/javascript.md
new file mode 100644
index 00000000000..e640c5e9966
--- /dev/null
+++ b/static/usage/v8/card/list/javascript.md
@@ -0,0 +1,45 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/card/list/react/main_css.md b/static/usage/v8/card/list/react/main_css.md
new file mode 100644
index 00000000000..1e82c58ad8c
--- /dev/null
+++ b/static/usage/v8/card/list/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-item {
+ --padding-start: 0;
+}
+```
diff --git a/static/usage/v8/card/list/react/main_tsx.md b/static/usage/v8/card/list/react/main_tsx.md
new file mode 100644
index 00000000000..8fe3d6973e9
--- /dev/null
+++ b/static/usage/v8/card/list/react/main_tsx.md
@@ -0,0 +1,59 @@
+```tsx
+import React from 'react';
+import {
+ IonCard,
+ IonCardContent,
+ IonCardHeader,
+ IonCardSubtitle,
+ IonCardTitle,
+ IonItem,
+ IonLabel,
+ IonList,
+ IonThumbnail,
+} from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ Card Title
+ Card Subtitle
+
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/card/list/vue.md b/static/usage/v8/card/list/vue.md
new file mode 100644
index 00000000000..1a565483588
--- /dev/null
+++ b/static/usage/v8/card/list/vue.md
@@ -0,0 +1,56 @@
+```html
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/card/media/angular.md b/static/usage/v8/card/media/angular.md
new file mode 100644
index 00000000000..2e074cd5c6d
--- /dev/null
+++ b/static/usage/v8/card/media/angular.md
@@ -0,0 +1,13 @@
+```html
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+```
diff --git a/static/usage/v8/card/media/demo.html b/static/usage/v8/card/media/demo.html
new file mode 100644
index 00000000000..7a59c70d23d
--- /dev/null
+++ b/static/usage/v8/card/media/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+ Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+
+
+
+
+
diff --git a/static/usage/v8/card/media/index.md b/static/usage/v8/card/media/index.md
new file mode 100644
index 00000000000..b8ed3cca563
--- /dev/null
+++ b/static/usage/v8/card/media/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/card/media/javascript.md b/static/usage/v8/card/media/javascript.md
new file mode 100644
index 00000000000..2e074cd5c6d
--- /dev/null
+++ b/static/usage/v8/card/media/javascript.md
@@ -0,0 +1,13 @@
+```html
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+```
diff --git a/static/usage/v8/card/media/react.md b/static/usage/v8/card/media/react.md
new file mode 100644
index 00000000000..29198c78081
--- /dev/null
+++ b/static/usage/v8/card/media/react.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/card/media/vue.md b/static/usage/v8/card/media/vue.md
new file mode 100644
index 00000000000..472b8a7d991
--- /dev/null
+++ b/static/usage/v8/card/media/vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+
+
+
+```
diff --git a/static/usage/v8/card/theming/colors/angular.md b/static/usage/v8/card/theming/colors/angular.md
new file mode 100644
index 00000000000..8c3924e8365
--- /dev/null
+++ b/static/usage/v8/card/theming/colors/angular.md
@@ -0,0 +1,82 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+```
diff --git a/static/usage/v8/card/theming/colors/demo.html b/static/usage/v8/card/theming/colors/demo.html
new file mode 100644
index 00000000000..9abca1fc1fc
--- /dev/null
+++ b/static/usage/v8/card/theming/colors/demo.html
@@ -0,0 +1,111 @@
+
+
+
+
+
+ Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+
+
diff --git a/static/usage/v8/card/theming/colors/index.md b/static/usage/v8/card/theming/colors/index.md
new file mode 100644
index 00000000000..385e21c7c69
--- /dev/null
+++ b/static/usage/v8/card/theming/colors/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/card/theming/colors/javascript.md b/static/usage/v8/card/theming/colors/javascript.md
new file mode 100644
index 00000000000..8c3924e8365
--- /dev/null
+++ b/static/usage/v8/card/theming/colors/javascript.md
@@ -0,0 +1,82 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+```
diff --git a/static/usage/v8/card/theming/colors/react.md b/static/usage/v8/card/theming/colors/react.md
new file mode 100644
index 00000000000..674a4266fdf
--- /dev/null
+++ b/static/usage/v8/card/theming/colors/react.md
@@ -0,0 +1,92 @@
+```tsx
+import React from 'react';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/card/theming/colors/vue.md b/static/usage/v8/card/theming/colors/vue.md
new file mode 100644
index 00000000000..e0070961be8
--- /dev/null
+++ b/static/usage/v8/card/theming/colors/vue.md
@@ -0,0 +1,93 @@
+```html
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+ Card Content
+
+
+
+
+```
diff --git a/static/usage/v8/card/theming/css-properties/angular/example_component_css.md b/static/usage/v8/card/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..9e5b40683ac
--- /dev/null
+++ b/static/usage/v8/card/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,14 @@
+```css
+ion-card {
+ --background: #000;
+ --color: #9efff0;
+}
+
+ion-card-title {
+ --color: #52ffe4;
+}
+
+ion-card-subtitle {
+ --color: #d1fff8;
+}
+```
diff --git a/static/usage/v8/card/theming/css-properties/angular/example_component_html.md b/static/usage/v8/card/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..d489fbc5e26
--- /dev/null
+++ b/static/usage/v8/card/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+```
diff --git a/static/usage/v8/card/theming/css-properties/demo.html b/static/usage/v8/card/theming/css-properties/demo.html
new file mode 100644
index 00000000000..e2a8813e482
--- /dev/null
+++ b/static/usage/v8/card/theming/css-properties/demo.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+ Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+
+
+
+
+
diff --git a/static/usage/v8/card/theming/css-properties/index.md b/static/usage/v8/card/theming/css-properties/index.md
new file mode 100644
index 00000000000..1181a8e4f6c
--- /dev/null
+++ b/static/usage/v8/card/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/card/theming/css-properties/javascript.md b/static/usage/v8/card/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..b8b50748719
--- /dev/null
+++ b/static/usage/v8/card/theming/css-properties/javascript.md
@@ -0,0 +1,27 @@
+```html
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+
+
+```
diff --git a/static/usage/v8/card/theming/css-properties/react/main_css.md b/static/usage/v8/card/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..9e5b40683ac
--- /dev/null
+++ b/static/usage/v8/card/theming/css-properties/react/main_css.md
@@ -0,0 +1,14 @@
+```css
+ion-card {
+ --background: #000;
+ --color: #9efff0;
+}
+
+ion-card-title {
+ --color: #52ffe4;
+}
+
+ion-card-subtitle {
+ --color: #d1fff8;
+}
+```
diff --git a/static/usage/v8/card/theming/css-properties/react/main_tsx.md b/static/usage/v8/card/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..a5b4ce3af35
--- /dev/null
+++ b/static/usage/v8/card/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ Card Title
+ Card Subtitle
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/card/theming/css-properties/vue.md b/static/usage/v8/card/theming/css-properties/vue.md
new file mode 100644
index 00000000000..e2db7992d85
--- /dev/null
+++ b/static/usage/v8/card/theming/css-properties/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+ Card Title
+ Card Subtitle
+
+
+
+ Here's a small text description for the card content. Nothing more, nothing less.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/checkbox/alignment/angular.md b/static/usage/v8/checkbox/alignment/angular.md
new file mode 100644
index 00000000000..4cb28d1b19b
--- /dev/null
+++ b/static/usage/v8/checkbox/alignment/angular.md
@@ -0,0 +1,11 @@
+```html
+
+
+ Aligned to the Start
+
+
+
+ Aligned to the Center
+
+
+```
diff --git a/static/usage/v8/checkbox/alignment/demo.html b/static/usage/v8/checkbox/alignment/demo.html
new file mode 100644
index 00000000000..74bef6ba6f3
--- /dev/null
+++ b/static/usage/v8/checkbox/alignment/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
+
+
+
+
+ Aligned to the Start
+
+
+
+ Aligned to the Center
+
+
+
+
+
+
+
diff --git a/static/usage/v8/checkbox/alignment/index.md b/static/usage/v8/checkbox/alignment/index.md
new file mode 100644
index 00000000000..5192cffcfbd
--- /dev/null
+++ b/static/usage/v8/checkbox/alignment/index.md
@@ -0,0 +1,17 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/checkbox/alignment/javascript.md b/static/usage/v8/checkbox/alignment/javascript.md
new file mode 100644
index 00000000000..4cb28d1b19b
--- /dev/null
+++ b/static/usage/v8/checkbox/alignment/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+ Aligned to the Start
+
+
+
+ Aligned to the Center
+
+
+```
diff --git a/static/usage/v8/checkbox/alignment/react.md b/static/usage/v8/checkbox/alignment/react.md
new file mode 100644
index 00000000000..16b9d9b18e2
--- /dev/null
+++ b/static/usage/v8/checkbox/alignment/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonCheckbox, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+ Aligned to the Start
+
+
+
+
+
+ Aligned to the Center
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/checkbox/alignment/vue.md b/static/usage/v8/checkbox/alignment/vue.md
new file mode 100644
index 00000000000..4dffcd383aa
--- /dev/null
+++ b/static/usage/v8/checkbox/alignment/vue.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+ Aligned to the Start
+
+
+
+ Aligned to the Center
+
+
+
+
+
+```
diff --git a/static/usage/v8/checkbox/basic/angular.md b/static/usage/v8/checkbox/basic/angular.md
new file mode 100644
index 00000000000..985ef4cdc1e
--- /dev/null
+++ b/static/usage/v8/checkbox/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+I agree to the terms and conditions
+```
diff --git a/static/usage/v8/checkbox/basic/demo.html b/static/usage/v8/checkbox/basic/demo.html
new file mode 100644
index 00000000000..224295b8d83
--- /dev/null
+++ b/static/usage/v8/checkbox/basic/demo.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
+
+
+
+ I agree to the terms and conditions
+
+
+
+
+
diff --git a/static/usage/v8/checkbox/basic/index.md b/static/usage/v8/checkbox/basic/index.md
new file mode 100644
index 00000000000..7eac2e6b127
--- /dev/null
+++ b/static/usage/v8/checkbox/basic/index.md
@@ -0,0 +1,17 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/checkbox/basic/javascript.md b/static/usage/v8/checkbox/basic/javascript.md
new file mode 100644
index 00000000000..985ef4cdc1e
--- /dev/null
+++ b/static/usage/v8/checkbox/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+I agree to the terms and conditions
+```
diff --git a/static/usage/v8/checkbox/basic/react.md b/static/usage/v8/checkbox/basic/react.md
new file mode 100644
index 00000000000..b2fbcb695d3
--- /dev/null
+++ b/static/usage/v8/checkbox/basic/react.md
@@ -0,0 +1,9 @@
+```tsx
+import React from 'react';
+import { IonCheckbox } from '@ionic/react';
+
+function Example() {
+ return I agree to the terms and conditions ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/checkbox/basic/vue.md b/static/usage/v8/checkbox/basic/vue.md
new file mode 100644
index 00000000000..fc8c1ff781f
--- /dev/null
+++ b/static/usage/v8/checkbox/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+
+ I agree to the terms and conditions
+
+
+
+```
diff --git a/static/usage/v8/checkbox/indeterminate/angular.md b/static/usage/v8/checkbox/indeterminate/angular.md
new file mode 100644
index 00000000000..1ae617e7558
--- /dev/null
+++ b/static/usage/v8/checkbox/indeterminate/angular.md
@@ -0,0 +1,3 @@
+```html
+Indeterminate checkbox
+```
diff --git a/static/usage/v8/checkbox/indeterminate/demo.html b/static/usage/v8/checkbox/indeterminate/demo.html
new file mode 100644
index 00000000000..ff7ae3a45e9
--- /dev/null
+++ b/static/usage/v8/checkbox/indeterminate/demo.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
+
+
+
+ Indeterminate checkbox
+
+
+
+
+
diff --git a/static/usage/v8/checkbox/indeterminate/index.md b/static/usage/v8/checkbox/indeterminate/index.md
new file mode 100644
index 00000000000..5ab8784522c
--- /dev/null
+++ b/static/usage/v8/checkbox/indeterminate/index.md
@@ -0,0 +1,17 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/checkbox/indeterminate/javascript.md b/static/usage/v8/checkbox/indeterminate/javascript.md
new file mode 100644
index 00000000000..ee9fb8c422a
--- /dev/null
+++ b/static/usage/v8/checkbox/indeterminate/javascript.md
@@ -0,0 +1,3 @@
+```html
+Indeterminate checkbox
+```
diff --git a/static/usage/v8/checkbox/indeterminate/react.md b/static/usage/v8/checkbox/indeterminate/react.md
new file mode 100644
index 00000000000..9cfba0ca72b
--- /dev/null
+++ b/static/usage/v8/checkbox/indeterminate/react.md
@@ -0,0 +1,9 @@
+```tsx
+import React from 'react';
+import { IonCheckbox } from '@ionic/react';
+
+function Example() {
+ return Indeterminate checkbox ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/checkbox/indeterminate/vue.md b/static/usage/v8/checkbox/indeterminate/vue.md
new file mode 100644
index 00000000000..ff87a637bd6
--- /dev/null
+++ b/static/usage/v8/checkbox/indeterminate/vue.md
@@ -0,0 +1,14 @@
+```html
+
+ Indeterminate checkbox
+
+
+
+```
diff --git a/static/usage/v8/checkbox/justify/angular.md b/static/usage/v8/checkbox/justify/angular.md
new file mode 100644
index 00000000000..9205434ceaa
--- /dev/null
+++ b/static/usage/v8/checkbox/justify/angular.md
@@ -0,0 +1,15 @@
+```html
+
+
+ Packed at the Start of Line
+
+
+
+ Packed at the End of Line
+
+
+
+ Space Between Label and Control
+
+
+```
diff --git a/static/usage/v8/checkbox/justify/demo.html b/static/usage/v8/checkbox/justify/demo.html
new file mode 100644
index 00000000000..f297f896b65
--- /dev/null
+++ b/static/usage/v8/checkbox/justify/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Packed at the Start of Line
+
+
+
+ Packed at the End of Line
+
+
+
+ Space Between Label and Control
+
+
+
+
+
+
+
diff --git a/static/usage/v8/checkbox/justify/index.md b/static/usage/v8/checkbox/justify/index.md
new file mode 100644
index 00000000000..2e08aaf0b79
--- /dev/null
+++ b/static/usage/v8/checkbox/justify/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/checkbox/justify/javascript.md b/static/usage/v8/checkbox/justify/javascript.md
new file mode 100644
index 00000000000..9205434ceaa
--- /dev/null
+++ b/static/usage/v8/checkbox/justify/javascript.md
@@ -0,0 +1,15 @@
+```html
+
+
+ Packed at the Start of Line
+
+
+
+ Packed at the End of Line
+
+
+
+ Space Between Label and Control
+
+
+```
diff --git a/static/usage/v8/checkbox/justify/react.md b/static/usage/v8/checkbox/justify/react.md
new file mode 100644
index 00000000000..667449c7808
--- /dev/null
+++ b/static/usage/v8/checkbox/justify/react.md
@@ -0,0 +1,23 @@
+```tsx
+import React from 'react';
+import { IonCheckbox, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+ Packed at the Start of Line
+
+
+
+ Packed at the End of Line
+
+
+
+ Space Between Label and Control
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/checkbox/justify/vue.md b/static/usage/v8/checkbox/justify/vue.md
new file mode 100644
index 00000000000..ed34f0dcdc7
--- /dev/null
+++ b/static/usage/v8/checkbox/justify/vue.md
@@ -0,0 +1,26 @@
+```html
+
+
+
+ Packed at the Start of Line
+
+
+
+ Packed at the End of Line
+
+
+
+ Space Between Label and Control
+
+
+
+
+
+```
diff --git a/static/usage/v8/checkbox/label-link/angular.md b/static/usage/v8/checkbox/label-link/angular.md
new file mode 100644
index 00000000000..34ec3baab77
--- /dev/null
+++ b/static/usage/v8/checkbox/label-link/angular.md
@@ -0,0 +1,3 @@
+```html
+I agree to the terms and conditions
+```
diff --git a/static/usage/v8/checkbox/label-link/demo.html b/static/usage/v8/checkbox/label-link/demo.html
new file mode 100644
index 00000000000..48c4e5782d7
--- /dev/null
+++ b/static/usage/v8/checkbox/label-link/demo.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
+
+
+
+ I agree to the terms and conditions
+
+
+
+
+
diff --git a/static/usage/v8/checkbox/label-link/index.md b/static/usage/v8/checkbox/label-link/index.md
new file mode 100644
index 00000000000..c368f3c3747
--- /dev/null
+++ b/static/usage/v8/checkbox/label-link/index.md
@@ -0,0 +1,17 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/checkbox/label-link/javascript.md b/static/usage/v8/checkbox/label-link/javascript.md
new file mode 100644
index 00000000000..0ba60cf12fc
--- /dev/null
+++ b/static/usage/v8/checkbox/label-link/javascript.md
@@ -0,0 +1,3 @@
+```html
+I agree to the terms and conditions
+```
diff --git a/static/usage/v8/checkbox/label-link/react.md b/static/usage/v8/checkbox/label-link/react.md
new file mode 100644
index 00000000000..fa10eeb3ce8
--- /dev/null
+++ b/static/usage/v8/checkbox/label-link/react.md
@@ -0,0 +1,29 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonCheckbox } from '@ionic/react';
+
+function Example() {
+ const ref = useRef(null);
+
+ /**
+ * IonCheckbox will be listening for the native click event here so we need
+ * to call stopPropagation when the native click event instead of when the
+ * synthetic click event fires.
+ */
+ useEffect(() => {
+ ref.current?.addEventListener('click', (event) => {
+ event.stopPropagation();
+ });
+ }, [ref]);
+
+ return (
+
+ I agree to the{' '}
+
+ terms and conditions
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/checkbox/label-link/vue.md b/static/usage/v8/checkbox/label-link/vue.md
new file mode 100644
index 00000000000..7c4c44d77b5
--- /dev/null
+++ b/static/usage/v8/checkbox/label-link/vue.md
@@ -0,0 +1,14 @@
+```html
+
+ I agree to the terms and conditions
+
+
+
+```
diff --git a/static/usage/v8/checkbox/label-placement/angular.md b/static/usage/v8/checkbox/label-placement/angular.md
new file mode 100644
index 00000000000..154f82929d8
--- /dev/null
+++ b/static/usage/v8/checkbox/label-placement/angular.md
@@ -0,0 +1,15 @@
+```html
+Label at the Start
+
+
+
+Label at the End
+
+
+
+Fixed Width Label
+
+
+
+Stacked Label
+```
diff --git a/static/usage/v8/checkbox/label-placement/demo.html b/static/usage/v8/checkbox/label-placement/demo.html
new file mode 100644
index 00000000000..0239412b4f5
--- /dev/null
+++ b/static/usage/v8/checkbox/label-placement/demo.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
+
+
+
+
+ Label at the Start
+
+
+
+ Label at the End
+
+
+
+ Fixed Width Label
+
+
+
+ Stacked Label
+
+
+
+
+
+
diff --git a/static/usage/v8/checkbox/label-placement/index.md b/static/usage/v8/checkbox/label-placement/index.md
new file mode 100644
index 00000000000..90a28f06693
--- /dev/null
+++ b/static/usage/v8/checkbox/label-placement/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/checkbox/label-placement/javascript.md b/static/usage/v8/checkbox/label-placement/javascript.md
new file mode 100644
index 00000000000..be18191d9a0
--- /dev/null
+++ b/static/usage/v8/checkbox/label-placement/javascript.md
@@ -0,0 +1,15 @@
+```html
+Label at the Start
+
+
+
+Label at the End
+
+
+
+Fixed Width Label
+
+
+
+Stacked Label
+```
diff --git a/static/usage/v8/checkbox/label-placement/react.md b/static/usage/v8/checkbox/label-placement/react.md
new file mode 100644
index 00000000000..6fc222b9035
--- /dev/null
+++ b/static/usage/v8/checkbox/label-placement/react.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonCheckbox } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+ Label at the Start
+
+
+
+ Label at the End
+
+
+
+ Fixed Width Label
+
+
+
+ Stacked Label
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/checkbox/label-placement/vue.md b/static/usage/v8/checkbox/label-placement/vue.md
new file mode 100644
index 00000000000..3530731da53
--- /dev/null
+++ b/static/usage/v8/checkbox/label-placement/vue.md
@@ -0,0 +1,26 @@
+```html
+
+ Label at the Start
+
+
+
+ Label at the End
+
+
+
+ Fixed Width Label
+
+
+
+ Stacked Label
+
+
+
+```
diff --git a/static/usage/v8/checkbox/migration/index.md b/static/usage/v8/checkbox/migration/index.md
new file mode 100644
index 00000000000..acf77957566
--- /dev/null
+++ b/static/usage/v8/checkbox/migration/index.md
@@ -0,0 +1,188 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+````mdx-code-block
+
+
+
+```html
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+```
+
+
+
+```html
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+```
+
+
+
+```tsx
+{/* Basic */}
+
+{/* Before */}
+
+ Checkbox Label
+
+
+
+{/* After */}
+
+ Checkbox Label
+
+
+{/* Fixed Labels */}
+
+{/* Before */}
+
+ Checkbox Label
+
+
+
+{/* After */}
+
+ Checkbox Label
+
+
+{/* Checkbox at the start of line, Label at the end of line */}
+
+{/* Before */}
+
+ Checkbox Label
+
+
+
+{/* After */}
+
+ Checkbox Label
+
+```
+
+
+
+```html
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+
+ Checkbox Label
+
+
+
+
+
+ Checkbox Label
+
+```
+
+
+````
diff --git a/static/usage/v8/checkbox/theming/css-properties/angular/example_component_css.md b/static/usage/v8/checkbox/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..5889591fd18
--- /dev/null
+++ b/static/usage/v8/checkbox/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+ion-checkbox {
+ --size: 32px;
+ --checkbox-background-checked: #6815ec;
+}
+
+ion-checkbox::part(container) {
+ border-radius: 6px;
+ border: 2px solid #6815ec;
+}
+```
diff --git a/static/usage/v8/checkbox/theming/css-properties/angular/example_component_html.md b/static/usage/v8/checkbox/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..ba23decbdba
--- /dev/null
+++ b/static/usage/v8/checkbox/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Themed checkbox
+```
diff --git a/static/usage/v8/checkbox/theming/css-properties/demo.html b/static/usage/v8/checkbox/theming/css-properties/demo.html
new file mode 100644
index 00000000000..42f3ff39312
--- /dev/null
+++ b/static/usage/v8/checkbox/theming/css-properties/demo.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+
+
+
+
+
+
+ Themed checkbox
+
+
+
+
+
diff --git a/static/usage/v8/checkbox/theming/css-properties/index.md b/static/usage/v8/checkbox/theming/css-properties/index.md
new file mode 100644
index 00000000000..b4a4e04917b
--- /dev/null
+++ b/static/usage/v8/checkbox/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/checkbox/theming/css-properties/javascript.md b/static/usage/v8/checkbox/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..90a415bf906
--- /dev/null
+++ b/static/usage/v8/checkbox/theming/css-properties/javascript.md
@@ -0,0 +1,15 @@
+```html
+Themed checkbox
+
+
+```
diff --git a/static/usage/v8/checkbox/theming/css-properties/react/main_css.md b/static/usage/v8/checkbox/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..5889591fd18
--- /dev/null
+++ b/static/usage/v8/checkbox/theming/css-properties/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+ion-checkbox {
+ --size: 32px;
+ --checkbox-background-checked: #6815ec;
+}
+
+ion-checkbox::part(container) {
+ border-radius: 6px;
+ border: 2px solid #6815ec;
+}
+```
diff --git a/static/usage/v8/checkbox/theming/css-properties/react/main_tsx.md b/static/usage/v8/checkbox/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..8408e5825f2
--- /dev/null
+++ b/static/usage/v8/checkbox/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonCheckbox } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return Themed checkbox ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/checkbox/theming/css-properties/vue.md b/static/usage/v8/checkbox/theming/css-properties/vue.md
new file mode 100644
index 00000000000..802cfa40b25
--- /dev/null
+++ b/static/usage/v8/checkbox/theming/css-properties/vue.md
@@ -0,0 +1,26 @@
+```html
+
+ Themed checkbox
+
+
+
+
+
+```
diff --git a/static/usage/v8/chip/basic/angular.md b/static/usage/v8/chip/basic/angular.md
new file mode 100644
index 00000000000..0e9440b7ea8
--- /dev/null
+++ b/static/usage/v8/chip/basic/angular.md
@@ -0,0 +1,5 @@
+```html
+Default
+Disabled
+Outline
+```
diff --git a/static/usage/v8/chip/basic/demo.html b/static/usage/v8/chip/basic/demo.html
new file mode 100644
index 00000000000..b047533f349
--- /dev/null
+++ b/static/usage/v8/chip/basic/demo.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Chip
+
+
+
+
+
+
+
+
+
+
+ Default
+ Disabled
+ Outline
+
+
+
+
+
diff --git a/static/usage/v8/chip/basic/index.md b/static/usage/v8/chip/basic/index.md
new file mode 100644
index 00000000000..5620d403526
--- /dev/null
+++ b/static/usage/v8/chip/basic/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/chip/basic/javascript.md b/static/usage/v8/chip/basic/javascript.md
new file mode 100644
index 00000000000..fb494e84571
--- /dev/null
+++ b/static/usage/v8/chip/basic/javascript.md
@@ -0,0 +1,5 @@
+```html
+Default
+Disabled
+Outline
+```
diff --git a/static/usage/v8/chip/basic/react.md b/static/usage/v8/chip/basic/react.md
new file mode 100644
index 00000000000..cc1989f2d03
--- /dev/null
+++ b/static/usage/v8/chip/basic/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonChip } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Default
+ Disabled
+ Outline
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/chip/basic/vue.md b/static/usage/v8/chip/basic/vue.md
new file mode 100644
index 00000000000..69634b44d3e
--- /dev/null
+++ b/static/usage/v8/chip/basic/vue.md
@@ -0,0 +1,16 @@
+```html
+
+ Default
+ Disabled
+ Outline
+
+
+
+```
diff --git a/static/usage/v8/chip/slots/angular.md b/static/usage/v8/chip/slots/angular.md
new file mode 100644
index 00000000000..75f2e24dd8d
--- /dev/null
+++ b/static/usage/v8/chip/slots/angular.md
@@ -0,0 +1,15 @@
+```html
+
+
+
+
+ Avatar Chip
+
+
+
+
+
+ Icon Chip
+
+
+```
diff --git a/static/usage/v8/chip/slots/demo.html b/static/usage/v8/chip/slots/demo.html
new file mode 100644
index 00000000000..e794d43ab89
--- /dev/null
+++ b/static/usage/v8/chip/slots/demo.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+ Chip
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Avatar Chip
+
+
+
+
+
+ Icon Chip
+
+
+
+
+
+
+
diff --git a/static/usage/v8/chip/slots/index.md b/static/usage/v8/chip/slots/index.md
new file mode 100644
index 00000000000..0407ef57fa4
--- /dev/null
+++ b/static/usage/v8/chip/slots/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/chip/slots/javascript.md b/static/usage/v8/chip/slots/javascript.md
new file mode 100644
index 00000000000..75f2e24dd8d
--- /dev/null
+++ b/static/usage/v8/chip/slots/javascript.md
@@ -0,0 +1,15 @@
+```html
+
+
+
+
+ Avatar Chip
+
+
+
+
+
+ Icon Chip
+
+
+```
diff --git a/static/usage/v8/chip/slots/react.md b/static/usage/v8/chip/slots/react.md
new file mode 100644
index 00000000000..35dbd057c70
--- /dev/null
+++ b/static/usage/v8/chip/slots/react.md
@@ -0,0 +1,26 @@
+```tsx
+import React from 'react';
+import { IonChip, IonAvatar, IonLabel, IonIcon } from '@ionic/react';
+import { close, closeCircle, pin } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+ Avatar Chip
+
+
+
+
+
+ Icon Chip
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/chip/slots/vue.md b/static/usage/v8/chip/slots/vue.md
new file mode 100644
index 00000000000..76f0bbfcf48
--- /dev/null
+++ b/static/usage/v8/chip/slots/vue.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+ Avatar Chip
+
+
+
+
+
+ Icon Chip
+
+
+
+
+
+```
diff --git a/static/usage/v8/chip/theming/colors/angular.md b/static/usage/v8/chip/theming/colors/angular.md
new file mode 100644
index 00000000000..db05dd6f248
--- /dev/null
+++ b/static/usage/v8/chip/theming/colors/angular.md
@@ -0,0 +1,12 @@
+```html
+Default
+Primary
+Secondary
+Tertiary
+Success
+Warning
+Danger
+Light
+Medium
+Dark
+```
diff --git a/static/usage/v8/chip/theming/colors/demo.html b/static/usage/v8/chip/theming/colors/demo.html
new file mode 100644
index 00000000000..53f384e51c3
--- /dev/null
+++ b/static/usage/v8/chip/theming/colors/demo.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+ Chip
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+
+
+
diff --git a/static/usage/v8/chip/theming/colors/index.md b/static/usage/v8/chip/theming/colors/index.md
new file mode 100644
index 00000000000..e0e5188b2f5
--- /dev/null
+++ b/static/usage/v8/chip/theming/colors/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/chip/theming/colors/javascript.md b/static/usage/v8/chip/theming/colors/javascript.md
new file mode 100644
index 00000000000..db05dd6f248
--- /dev/null
+++ b/static/usage/v8/chip/theming/colors/javascript.md
@@ -0,0 +1,12 @@
+```html
+Default
+Primary
+Secondary
+Tertiary
+Success
+Warning
+Danger
+Light
+Medium
+Dark
+```
diff --git a/static/usage/v8/chip/theming/colors/react.md b/static/usage/v8/chip/theming/colors/react.md
new file mode 100644
index 00000000000..8f12b4f978e
--- /dev/null
+++ b/static/usage/v8/chip/theming/colors/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonChip } from '@ionic/react';
+function Example() {
+ return (
+ <>
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/chip/theming/colors/vue.md b/static/usage/v8/chip/theming/colors/vue.md
new file mode 100644
index 00000000000..55221ac5115
--- /dev/null
+++ b/static/usage/v8/chip/theming/colors/vue.md
@@ -0,0 +1,23 @@
+```html
+
+ Default
+ Primary
+ Secondary
+ Tertiary
+ Success
+ Warning
+ Danger
+ Light
+ Medium
+ Dark
+
+
+
+```
diff --git a/static/usage/v8/chip/theming/css-properties/angular/example_component_css.md b/static/usage/v8/chip/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..60dc62c6417
--- /dev/null
+++ b/static/usage/v8/chip/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-chip {
+ --background: #00213f;
+ --color: #adefd1;
+}
+```
diff --git a/static/usage/v8/chip/theming/css-properties/angular/example_component_html.md b/static/usage/v8/chip/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..67c6144e7b8
--- /dev/null
+++ b/static/usage/v8/chip/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+Default
+```
diff --git a/static/usage/v8/chip/theming/css-properties/demo.html b/static/usage/v8/chip/theming/css-properties/demo.html
new file mode 100644
index 00000000000..0c960a177cd
--- /dev/null
+++ b/static/usage/v8/chip/theming/css-properties/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Chip
+
+
+
+
+
+
+
+
+
+
+
+
+ Default
+
+
+
+
+
diff --git a/static/usage/v8/chip/theming/css-properties/index.md b/static/usage/v8/chip/theming/css-properties/index.md
new file mode 100644
index 00000000000..5ddfdd87f3c
--- /dev/null
+++ b/static/usage/v8/chip/theming/css-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.md';
+
+import vue from './vue.md';
+
+import angular_example_component_css from './angular/example_component_css.md';
+import angular_example_component_html from './angular/example_component_html.md';
+
+
diff --git a/static/usage/v8/chip/theming/css-properties/javascript.md b/static/usage/v8/chip/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..b40912d73a2
--- /dev/null
+++ b/static/usage/v8/chip/theming/css-properties/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+
+Default
+```
diff --git a/static/usage/v8/chip/theming/css-properties/react/main_css.md b/static/usage/v8/chip/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..60dc62c6417
--- /dev/null
+++ b/static/usage/v8/chip/theming/css-properties/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-chip {
+ --background: #00213f;
+ --color: #adefd1;
+}
+```
diff --git a/static/usage/v8/chip/theming/css-properties/react/main_tsx.md b/static/usage/v8/chip/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..b4fc5f12cae
--- /dev/null
+++ b/static/usage/v8/chip/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonChip } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return Default ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/chip/theming/css-properties/vue.md b/static/usage/v8/chip/theming/css-properties/vue.md
new file mode 100644
index 00000000000..7195787bd52
--- /dev/null
+++ b/static/usage/v8/chip/theming/css-properties/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+ Default
+
+
+
+```
diff --git a/static/usage/v8/common.css b/static/usage/v8/common.css
new file mode 100644
index 00000000000..c0cfced3ab9
--- /dev/null
+++ b/static/usage/v8/common.css
@@ -0,0 +1,24 @@
+@font-face {
+ font-family: "Roboto";
+ src: url("../fonts/Roboto-Regular.ttf") format("truetype");
+}
+
+@font-face {
+ font-family: "Roboto";
+ src: url("../fonts/Roboto-Medium.ttf") format("truetype");
+ font-weight: 450 500;
+}
+
+.container {
+ display: flex;
+
+ align-items: center;
+ justify-content: center;
+
+ height: 100%;
+}
+
+:root {
+ --ion-safe-area-top: 20px;
+ --ion-safe-area-bottom: 22px;
+}
diff --git a/static/usage/v8/common.js b/static/usage/v8/common.js
new file mode 100644
index 00000000000..1c84b69d961
--- /dev/null
+++ b/static/usage/v8/common.js
@@ -0,0 +1,85 @@
+const linkElement = document.createElement('link');
+
+linkElement.rel = 'stylesheet';
+linkElement.href = 'https://cdn.jsdelivr.net/npm/@ionic/core@next/css/palettes/dark.class.css';
+
+document.head.appendChild(linkElement);
+
+/**
+ * Wait for the initial HTML document to be
+ * loaded and parsed before adding the message
+ * listener. Otherwise, it is possible that the message
+ * listener will fire before the body is ready.
+ */
+window.addEventListener('DOMContentLoaded', () => {
+ /**
+ * The parent Playground component will
+ * dispatch messages whenever the theme on
+ * the Ionic Docs website has changed so that
+ * the demos loaded in iframes can match the
+ * docs website theme.
+ */
+ window.addEventListener('message', (ev) => {
+ const { data } = ev;
+
+ if (data.darkMode) {
+ document.documentElement.classList.add('ion-theme-dark');
+ } else {
+ document.documentElement.classList.remove('ion-theme-dark');
+ }
+ });
+
+ /**
+ * Monkey-patch the console methods so we can dispatch
+ * events when they're called, allowing the data to be
+ * captured by the playground's console UI.
+ */
+ const _log = console.log,
+ _warn = console.warn,
+ _error = console.error;
+
+ const dispatchConsoleEvent = (type, arguments) => {
+ window.dispatchEvent(
+ new CustomEvent('console', {
+ detail: {
+ type,
+ message: Object.values(arguments).join(' '),
+ },
+ })
+ );
+ };
+
+ console.log = function () {
+ dispatchConsoleEvent('log', arguments);
+ return _log.apply(console, arguments);
+ };
+
+ console.warn = function () {
+ dispatchConsoleEvent('warning', arguments);
+ return _warn.apply(console, arguments);
+ };
+
+ console.error = function () {
+ dispatchConsoleEvent('error', arguments);
+ return _error.apply(console, arguments);
+ };
+
+ /**
+ * The Playground needs to wait for the message listener
+ * to be created before sending any messages, otherwise
+ * they will be lost. Once the listener is done, fire
+ * the demoReady event. In the event that the Playground's
+ * useEffect hook fires before the message listener is created,
+ * the Playground component will wait for the demoReady event
+ * before proceeding.
+ *
+ * We also set window.demoReady in the event that the
+ * useEffect hook fires after the message listener is
+ * already created so that it does not wait on an event
+ * that was already fired.
+ */
+ const ev = new CustomEvent('demoReady');
+ window.dispatchEvent(ev);
+
+ window.demoReady = true;
+});
diff --git a/static/usage/v8/content/basic/angular.md b/static/usage/v8/content/basic/angular.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/v8/content/basic/angular.md
@@ -0,0 +1,12 @@
+```html
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+```
diff --git a/static/usage/v8/content/basic/demo.html b/static/usage/v8/content/basic/demo.html
new file mode 100644
index 00000000000..9ab7e7d5bd6
--- /dev/null
+++ b/static/usage/v8/content/basic/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
diff --git a/static/usage/v8/content/basic/index.md b/static/usage/v8/content/basic/index.md
new file mode 100644
index 00000000000..f45e2284c7f
--- /dev/null
+++ b/static/usage/v8/content/basic/index.md
@@ -0,0 +1,14 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/content/basic/javascript.md b/static/usage/v8/content/basic/javascript.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/v8/content/basic/javascript.md
@@ -0,0 +1,12 @@
+```html
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+```
diff --git a/static/usage/v8/content/basic/react.md b/static/usage/v8/content/basic/react.md
new file mode 100644
index 00000000000..2ece824eea4
--- /dev/null
+++ b/static/usage/v8/content/basic/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+function Example() {
+ return (
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/content/basic/vue.md b/static/usage/v8/content/basic/vue.md
new file mode 100644
index 00000000000..84e2e35470e
--- /dev/null
+++ b/static/usage/v8/content/basic/vue.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+```
diff --git a/static/usage/v8/content/fixed/angular.md b/static/usage/v8/content/fixed/angular.md
new file mode 100644
index 00000000000..82cb3007125
--- /dev/null
+++ b/static/usage/v8/content/fixed/angular.md
@@ -0,0 +1,54 @@
+```html
+
+ Scroll the content and notice that the fixed button does not scroll.
+
+ Normal Button
+ Fixed Button
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
+ risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
+ Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
+ ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
+ placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
+ placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
+ neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
+ nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
+ lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
+ faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
+ maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
+ elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
+ justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
+ ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
+ Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
+ turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
+ fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
+ facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
+ sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
+ lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
+ condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
+ eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
+ venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
+ ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
+ Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
+ semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
+ sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+```
diff --git a/static/usage/v8/content/fixed/angular/example_component_css.md b/static/usage/v8/content/fixed/angular/example_component_css.md
new file mode 100644
index 00000000000..1146da9a4b1
--- /dev/null
+++ b/static/usage/v8/content/fixed/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-button[slot='fixed'] {
+ top: 50%;
+ right: 20px;
+}
+```
diff --git a/static/usage/v8/content/fixed/angular/example_component_html.md b/static/usage/v8/content/fixed/angular/example_component_html.md
new file mode 100644
index 00000000000..82cb3007125
--- /dev/null
+++ b/static/usage/v8/content/fixed/angular/example_component_html.md
@@ -0,0 +1,54 @@
+```html
+
+ Scroll the content and notice that the fixed button does not scroll.
+
+ Normal Button
+ Fixed Button
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
+ risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
+ Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
+ ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
+ placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
+ placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
+ neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
+ nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
+ lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
+ faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
+ maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
+ elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
+ justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
+ ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
+ Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
+ turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
+ fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
+ facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
+ sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
+ lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
+ condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
+ eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
+ venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
+ ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
+ Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
+ semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
+ sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+```
diff --git a/static/usage/v8/content/fixed/demo.html b/static/usage/v8/content/fixed/demo.html
new file mode 100644
index 00000000000..9bae0cc53b9
--- /dev/null
+++ b/static/usage/v8/content/fixed/demo.html
@@ -0,0 +1,76 @@
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+
+
+ Scroll the content and notice that the fixed button does not scroll.
+
+ Normal Button
+ Fixed Button
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+ fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+ augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+ mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia
+ mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere
+ pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut,
+ aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut,
+ pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida
+ malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+ Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+ odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+ vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+ odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+ Etiam lobortis tristique maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+ et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+ faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+ venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+ sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+ molestie sed, pretium vitae turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+ sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+ amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+ Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan
+ condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt
+ libero finibus at. Mauris condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse
+ enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin
+ justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur
+ libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum,
+ vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam
+ neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+
diff --git a/static/usage/v8/content/fixed/index.md b/static/usage/v8/content/fixed/index.md
new file mode 100644
index 00000000000..700fc713ecc
--- /dev/null
+++ b/static/usage/v8/content/fixed/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/content/fixed/javascript.md b/static/usage/v8/content/fixed/javascript.md
new file mode 100644
index 00000000000..8613ca29a0c
--- /dev/null
+++ b/static/usage/v8/content/fixed/javascript.md
@@ -0,0 +1,61 @@
+```html
+
+ Scroll the content and notice that the fixed button does not scroll.
+
+ Normal Button
+ Fixed Button
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
+ risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
+ Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
+ ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
+ placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
+ placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
+ neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
+ nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
+ lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
+ faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
+ maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
+ elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
+ justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
+ ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
+ Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
+ turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
+ fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
+ facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
+ sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
+ lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
+ condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
+ eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
+ venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
+ ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
+ Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
+ semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
+ sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+```
diff --git a/static/usage/v8/content/fixed/react.md b/static/usage/v8/content/fixed/react.md
new file mode 100644
index 00000000000..55d5e1b9362
--- /dev/null
+++ b/static/usage/v8/content/fixed/react.md
@@ -0,0 +1,62 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+function Example() {
+ return (
+
+ Scroll the content and notice that the fixed button does not scroll.
+
+ Normal Button
+ Fixed Button
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum
+ in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed
+ neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula
+ blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula
+ justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero.
+ Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque
+ mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl
+ dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula
+ sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc
+ et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis
+ tristique maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+ et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+ faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+ venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+ sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+ molestie sed, pretium vitae turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+ sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+ amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+ Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+ vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+ at. Mauris condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+ enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+ orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+ cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+ vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+ egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/content/fixed/react/main_css.md b/static/usage/v8/content/fixed/react/main_css.md
new file mode 100644
index 00000000000..1146da9a4b1
--- /dev/null
+++ b/static/usage/v8/content/fixed/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-button[slot='fixed'] {
+ top: 50%;
+ right: 20px;
+}
+```
diff --git a/static/usage/v8/content/fixed/react/main_tsx.md b/static/usage/v8/content/fixed/react/main_tsx.md
new file mode 100644
index 00000000000..f81c3d02949
--- /dev/null
+++ b/static/usage/v8/content/fixed/react/main_tsx.md
@@ -0,0 +1,64 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Scroll the content and notice that the fixed button does not scroll.
+
+ Normal Button
+ Fixed Button
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum
+ in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed
+ neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula
+ blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula
+ justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero.
+ Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque
+ mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl
+ dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula
+ sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc
+ et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis
+ tristique maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+ et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+ faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+ venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+ sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+ molestie sed, pretium vitae turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+ sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+ amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+ Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+ vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+ at. Mauris condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+ enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+ orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+ cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+ vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+ egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/content/fixed/vue.md b/static/usage/v8/content/fixed/vue.md
new file mode 100644
index 00000000000..31d3f7cd33c
--- /dev/null
+++ b/static/usage/v8/content/fixed/vue.md
@@ -0,0 +1,72 @@
+```html
+
+
+ Scroll the content and notice that the fixed button does not scroll.
+
+ Normal Button
+ Fixed Button
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum
+ in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed
+ neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula
+ blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula
+ justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam
+ luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris,
+ placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim
+ vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
+ lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
+ faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
+ maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
+ elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
+ justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis
+ risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis
+ congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed,
+ pretium vitae turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
+ fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
+ facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus
+ congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula
+ vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
+ condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+ enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
+ ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus
+ cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+ vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+ egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/content/fullscreen/angular/example_component_css.md b/static/usage/v8/content/fullscreen/angular/example_component_css.md
new file mode 100644
index 00000000000..69fa48ad49e
--- /dev/null
+++ b/static/usage/v8/content/fullscreen/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-toolbar {
+ --opacity: 0.5;
+}
+```
diff --git a/static/usage/v8/content/fullscreen/angular/example_component_html.md b/static/usage/v8/content/fullscreen/angular/example_component_html.md
new file mode 100644
index 00000000000..753f938b914
--- /dev/null
+++ b/static/usage/v8/content/fullscreen/angular/example_component_html.md
@@ -0,0 +1,61 @@
+```html
+
+
+ Header
+
+
+
+ Scroll the content and notice that the text goes behind the header and footer.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
+ risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
+ Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
+ ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
+ placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
+ placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
+ neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
+ nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
+ lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
+ faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
+ maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
+ elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
+ justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
+ ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
+ Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
+ turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
+ fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
+ facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
+ sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
+ lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
+ condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
+ eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
+ venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
+ ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
+ Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
+ semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
+ sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v8/content/fullscreen/demo.html b/static/usage/v8/content/fullscreen/demo.html
new file mode 100644
index 00000000000..755c683e7b1
--- /dev/null
+++ b/static/usage/v8/content/fullscreen/demo.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Scroll the content and notice that the text goes behind the header and footer.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+ fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+ augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+ mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia
+ mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere
+ pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut,
+ aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut,
+ pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida
+ malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+ Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+ odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+ vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+ odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+ Etiam lobortis tristique maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+ et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+ faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+ venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+ sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+ molestie sed, pretium vitae turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+ sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+ amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+ Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan
+ condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt
+ libero finibus at. Mauris condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse
+ enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin
+ justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur
+ libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum,
+ vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam
+ neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+ Footer
+
+
+
+
+
diff --git a/static/usage/v8/content/fullscreen/index.md b/static/usage/v8/content/fullscreen/index.md
new file mode 100644
index 00000000000..82db6d82b09
--- /dev/null
+++ b/static/usage/v8/content/fullscreen/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/content/fullscreen/javascript.md b/static/usage/v8/content/fullscreen/javascript.md
new file mode 100644
index 00000000000..2fb4c68b16c
--- /dev/null
+++ b/static/usage/v8/content/fullscreen/javascript.md
@@ -0,0 +1,67 @@
+```html
+
+
+ Header
+
+
+
+ Scroll the content and notice that the text goes behind the header and footer.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
+ risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
+ Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
+ ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
+ placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
+ placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
+ neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
+ nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
+ lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
+ faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
+ maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
+ elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
+ justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
+ ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
+ Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
+ turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
+ fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
+ facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
+ sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
+ lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
+ condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
+ eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
+ venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
+ ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
+ Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
+ semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
+ sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+ Footer
+
+
+
+
+```
diff --git a/static/usage/v8/content/fullscreen/react/main_css.md b/static/usage/v8/content/fullscreen/react/main_css.md
new file mode 100644
index 00000000000..69fa48ad49e
--- /dev/null
+++ b/static/usage/v8/content/fullscreen/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-toolbar {
+ --opacity: 0.5;
+}
+```
diff --git a/static/usage/v8/content/fullscreen/react/main_tsx.md b/static/usage/v8/content/fullscreen/react/main_tsx.md
new file mode 100644
index 00000000000..7302c484489
--- /dev/null
+++ b/static/usage/v8/content/fullscreen/react/main_tsx.md
@@ -0,0 +1,73 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Scroll the content and notice that the text goes behind the header and footer.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+ fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+ augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+ mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia
+ mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere
+ pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut,
+ aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut,
+ pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida
+ malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+ Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+ odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+ vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+ odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+ Etiam lobortis tristique maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+ et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+ faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+ venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+ sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+ molestie sed, pretium vitae turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+ sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+ amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+ Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan
+ condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt
+ libero finibus at. Mauris condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse
+ enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin
+ justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur
+ libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum,
+ vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam
+ neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+ Footer
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/content/fullscreen/vue.md b/static/usage/v8/content/fullscreen/vue.md
new file mode 100644
index 00000000000..3de93600da7
--- /dev/null
+++ b/static/usage/v8/content/fullscreen/vue.md
@@ -0,0 +1,78 @@
+```html
+
+
+
+ Header
+
+
+
+ Scroll the content and notice that the text goes behind the header and footer.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum
+ in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed
+ neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula
+ blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula
+ justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam
+ luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris,
+ placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim
+ vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
+ lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
+ faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
+ maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
+ elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
+ justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis
+ risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis
+ congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed,
+ pretium vitae turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
+ fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
+ facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus
+ congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula
+ vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
+ condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+ enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
+ ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus
+ cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+ vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+ egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+ Footer
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/content/header-footer/angular.md b/static/usage/v8/content/header-footer/angular.md
new file mode 100644
index 00000000000..35a9aadc4c1
--- /dev/null
+++ b/static/usage/v8/content/header-footer/angular.md
@@ -0,0 +1,22 @@
+```html
+
+
+ Header
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v8/content/header-footer/demo.html b/static/usage/v8/content/header-footer/demo.html
new file mode 100644
index 00000000000..0de7fbeea16
--- /dev/null
+++ b/static/usage/v8/content/header-footer/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+ Footer
+
+
+
+
+
diff --git a/static/usage/v8/content/header-footer/index.md b/static/usage/v8/content/header-footer/index.md
new file mode 100644
index 00000000000..10367039317
--- /dev/null
+++ b/static/usage/v8/content/header-footer/index.md
@@ -0,0 +1,14 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/content/header-footer/javascript.md b/static/usage/v8/content/header-footer/javascript.md
new file mode 100644
index 00000000000..35a9aadc4c1
--- /dev/null
+++ b/static/usage/v8/content/header-footer/javascript.md
@@ -0,0 +1,22 @@
+```html
+
+
+ Header
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v8/content/header-footer/react.md b/static/usage/v8/content/header-footer/react.md
new file mode 100644
index 00000000000..e075e96cd81
--- /dev/null
+++ b/static/usage/v8/content/header-footer/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+ Footer
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/content/header-footer/vue.md b/static/usage/v8/content/header-footer/vue.md
new file mode 100644
index 00000000000..dc914aee8f5
--- /dev/null
+++ b/static/usage/v8/content/header-footer/vue.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+ Header
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+ Footer
+
+
+
+
+
+```
diff --git a/static/usage/v8/content/scroll-events/angular/example_component_html.md b/static/usage/v8/content/scroll-events/angular/example_component_html.md
new file mode 100644
index 00000000000..4a66edad40a
--- /dev/null
+++ b/static/usage/v8/content/scroll-events/angular/example_component_html.md
@@ -0,0 +1,59 @@
+```html
+
+
+
+ Scroll to fire the scroll events and view them in the console.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
+ risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
+ Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
+ ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
+ placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
+ placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
+ neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
+ nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
+ lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
+ faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
+ maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
+ elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
+ justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
+ ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
+ Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
+ turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
+ fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
+ facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
+ sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
+ lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
+ condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
+ eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
+ venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
+ ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
+ Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
+ semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
+ sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+```
diff --git a/static/usage/v8/content/scroll-events/angular/example_component_ts.md b/static/usage/v8/content/scroll-events/angular/example_component_ts.md
new file mode 100644
index 00000000000..ffd3d5b6d12
--- /dev/null
+++ b/static/usage/v8/content/scroll-events/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+import { ScrollDetail } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ handleScrollStart() {
+ console.log('scroll start');
+ }
+
+ handleScroll(ev: CustomEvent) {
+ console.log('scroll', JSON.stringify(ev.detail));
+ }
+
+ handleScrollEnd() {
+ console.log('scroll end');
+ }
+}
+```
diff --git a/static/usage/v8/content/scroll-events/demo.html b/static/usage/v8/content/scroll-events/demo.html
new file mode 100644
index 00000000000..e2e0d1c7550
--- /dev/null
+++ b/static/usage/v8/content/scroll-events/demo.html
@@ -0,0 +1,77 @@
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+ Scroll to fire the scroll events and view them in the console.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+ fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+ augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+ mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia
+ mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere
+ pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut,
+ aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut,
+ pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida
+ malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+ Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+ odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+ vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+ odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+ Etiam lobortis tristique maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+ et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+ faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+ venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+ sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+ molestie sed, pretium vitae turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+ sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+ amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+ Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan
+ condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt
+ libero finibus at. Mauris condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse
+ enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin
+ justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur
+ libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum,
+ vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam
+ neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+
+
+
diff --git a/static/usage/v8/content/scroll-events/index.md b/static/usage/v8/content/scroll-events/index.md
new file mode 100644
index 00000000000..d9b6f701615
--- /dev/null
+++ b/static/usage/v8/content/scroll-events/index.md
@@ -0,0 +1,27 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.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/content/scroll-events/javascript.md b/static/usage/v8/content/scroll-events/javascript.md
new file mode 100644
index 00000000000..822a1b04f81
--- /dev/null
+++ b/static/usage/v8/content/scroll-events/javascript.md
@@ -0,0 +1,62 @@
+```html
+
+ Scroll to fire the scroll events and view them in the console.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
+ risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
+ Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
+ ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
+ placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
+ placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
+ neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
+ nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
+ lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
+ faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
+ maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
+ elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
+ justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
+ ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
+ Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
+ turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
+ fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
+ facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
+ sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
+ lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
+ condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
+ eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
+ venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
+ ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
+ Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
+ semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
+ sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+```
diff --git a/static/usage/v8/content/scroll-events/react.md b/static/usage/v8/content/scroll-events/react.md
new file mode 100644
index 00000000000..4247de13b39
--- /dev/null
+++ b/static/usage/v8/content/scroll-events/react.md
@@ -0,0 +1,78 @@
+```tsx
+import React from 'react';
+import { IonContent, ScrollDetail } from '@ionic/react';
+
+function Example() {
+ function handleScrollStart() {
+ console.log('scroll start');
+ }
+
+ function handleScroll(ev: CustomEvent) {
+ console.log('scroll', JSON.stringify(ev.detail));
+ }
+
+ function handleScrollEnd() {
+ console.log('scroll end');
+ }
+
+ return (
+ // Scroll events are disabled by default for content for performance reasons, enable them to listen to them
+
+ Scroll to fire the scroll events and view them in the console.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum
+ in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed
+ neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula
+ blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula
+ justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero.
+ Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque
+ mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl
+ dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula
+ sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc
+ et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis
+ tristique maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+ et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+ faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+ venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+ sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+ molestie sed, pretium vitae turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+ sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+ amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+ Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+ vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+ at. Mauris condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+ enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+ orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+ cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+ vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+ egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/content/scroll-events/vue.md b/static/usage/v8/content/scroll-events/vue.md
new file mode 100644
index 00000000000..1b8bada7d57
--- /dev/null
+++ b/static/usage/v8/content/scroll-events/vue.md
@@ -0,0 +1,80 @@
+```html
+
+
+
+ Scroll to fire the scroll events and view them in the console.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum
+ in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed
+ neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula
+ blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula
+ justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam
+ luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris,
+ placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim
+ vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
+ lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
+ faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
+ maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
+ elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
+ justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis
+ risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis
+ congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed,
+ pretium vitae turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
+ fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
+ facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus
+ congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula
+ vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
+ condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+ enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
+ ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus
+ cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+ vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+ egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+
+
+```
diff --git a/static/usage/v8/content/scroll-methods/angular/example_component_html.md b/static/usage/v8/content/scroll-methods/angular/example_component_html.md
new file mode 100644
index 00000000000..e585b97e78d
--- /dev/null
+++ b/static/usage/v8/content/scroll-methods/angular/example_component_html.md
@@ -0,0 +1,55 @@
+```html
+
+ Click on the buttons to scroll the content.
+
+ Scroll to Bottom
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
+ risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
+ Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
+ ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
+ placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
+ placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
+ neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
+ nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
+ lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
+ faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
+ maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
+ elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
+ justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
+ ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
+ Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
+ turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
+ fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
+ facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
+ sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
+ lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
+ condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
+ eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
+ venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
+ ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
+ Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
+ semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
+ sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+ Scroll to Top
+
+```
diff --git a/static/usage/v8/content/scroll-methods/angular/example_component_ts.md b/static/usage/v8/content/scroll-methods/angular/example_component_ts.md
new file mode 100644
index 00000000000..1975fe3b341
--- /dev/null
+++ b/static/usage/v8/content/scroll-methods/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonContent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ @ViewChild(IonContent) content: IonContent;
+
+ scrollToBottom() {
+ // Passing a duration to the method makes it so the scroll slowly
+ // goes to the bottom instead of instantly
+ this.content.scrollToBottom(500);
+ }
+
+ scrollToTop() {
+ // Passing a duration to the method makes it so the scroll slowly
+ // goes to the top instead of instantly
+ this.content.scrollToTop(500);
+ }
+}
+```
diff --git a/static/usage/v8/content/scroll-methods/demo.html b/static/usage/v8/content/scroll-methods/demo.html
new file mode 100644
index 00000000000..536977f6a66
--- /dev/null
+++ b/static/usage/v8/content/scroll-methods/demo.html
@@ -0,0 +1,86 @@
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+ Click on the buttons to scroll the content.
+
+ Scroll to Bottom
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
+ fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
+ augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
+ mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia
+ mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere
+ pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut,
+ aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut,
+ pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida
+ malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
+ Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
+ odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
+ vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
+ odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
+ Etiam lobortis tristique maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+ et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+ faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+ venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+ sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+ molestie sed, pretium vitae turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+ sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+ amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+ Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan
+ condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt
+ libero finibus at. Mauris condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse
+ enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin
+ justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur
+ libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum,
+ vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam
+ neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+ Scroll to Top
+
+
+
+
+
+
diff --git a/static/usage/v8/content/scroll-methods/index.md b/static/usage/v8/content/scroll-methods/index.md
new file mode 100644
index 00000000000..37c4a2a1d48
--- /dev/null
+++ b/static/usage/v8/content/scroll-methods/index.md
@@ -0,0 +1,26 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.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/content/scroll-methods/javascript.md b/static/usage/v8/content/scroll-methods/javascript.md
new file mode 100644
index 00000000000..a53fbc7767b
--- /dev/null
+++ b/static/usage/v8/content/scroll-methods/javascript.md
@@ -0,0 +1,71 @@
+```html
+
+ Click on the buttons to scroll the content.
+
+ Scroll to Bottom
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in
+ risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque.
+ Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit
+ ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec
+ placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus
+ placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et
+ neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut
+ nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
+ lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
+ faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
+ maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
+ elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
+ justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus,
+ ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris.
+ Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae
+ turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
+ fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
+ facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue
+ sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae
+ lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
+ condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis
+ eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim,
+ venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
+ ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus.
+ Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id,
+ semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis
+ sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+ Scroll to Top
+
+
+
+```
diff --git a/static/usage/v8/content/scroll-methods/react.md b/static/usage/v8/content/scroll-methods/react.md
new file mode 100644
index 00000000000..1d2d105e984
--- /dev/null
+++ b/static/usage/v8/content/scroll-methods/react.md
@@ -0,0 +1,81 @@
+```tsx
+import React, { createRef } from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+function Example() {
+ const contentRef = createRef();
+
+ function scrollToBottom() {
+ // Passing a duration to the method makes it so the scroll slowly
+ // goes to the bottom instead of instantly
+ contentRef.current?.scrollToBottom(500);
+ }
+
+ function scrollToTop() {
+ // Passing a duration to the method makes it so the scroll slowly
+ // goes to the top instead of instantly
+ contentRef.current?.scrollToTop(500);
+ }
+
+ return (
+
+ Click on the buttons to scroll the content.
+
+
+ Scroll to Bottom
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum
+ in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed
+ neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula
+ blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula
+ justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero.
+ Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque
+ mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl
+ dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula
+ sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc
+ et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis
+ tristique maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
+ et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
+ faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
+ venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
+ sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
+ molestie sed, pretium vitae turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
+ sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
+ amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
+ Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum
+ vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus
+ at. Mauris condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+ enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo
+ orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero
+ cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+ vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+ egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+
+ Scroll to Top
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/content/scroll-methods/vue.md b/static/usage/v8/content/scroll-methods/vue.md
new file mode 100644
index 00000000000..5ac6e8ee1fc
--- /dev/null
+++ b/static/usage/v8/content/scroll-methods/vue.md
@@ -0,0 +1,78 @@
+```html
+
+
+ Click on the buttons to scroll the content.
+
+ Scroll to Bottom
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum
+ in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam,
+ sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed
+ neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula
+ blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula
+ justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam
+ luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris,
+ placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim
+ vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
+
+
+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean
+ venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio,
+ sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed
+ lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit
+ faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique
+ maximus.
+
+
+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
+ tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et
+ elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus
+ justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis
+ risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis
+ congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed,
+ pretium vitae turpis.
+
+
+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales
+ fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam
+ facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus
+ congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula
+ vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris
+ condimentum fermentum rutrum.
+
+
+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
+ mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim
+ enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci,
+ ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus
+ cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed
+ vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl,
+ egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+
+
+ Scroll to Top
+
+
+
+
+```
diff --git a/static/usage/v8/content/theming/colors/angular.md b/static/usage/v8/content/theming/colors/angular.md
new file mode 100644
index 00000000000..4b2489b6dae
--- /dev/null
+++ b/static/usage/v8/content/theming/colors/angular.md
@@ -0,0 +1,38 @@
+```html
+
+ Primary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Secondary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Tertiary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Success content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Warning content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Danger content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Light content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Medium content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Dark content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+```
diff --git a/static/usage/v8/content/theming/colors/demo.html b/static/usage/v8/content/theming/colors/demo.html
new file mode 100644
index 00000000000..c3f3148cf08
--- /dev/null
+++ b/static/usage/v8/content/theming/colors/demo.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+
+
+
+ Primary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Secondary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Tertiary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Success content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Warning content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Danger content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Light content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Medium content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Dark content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+
diff --git a/static/usage/v8/content/theming/colors/index.md b/static/usage/v8/content/theming/colors/index.md
new file mode 100644
index 00000000000..f5f2a4f25e2
--- /dev/null
+++ b/static/usage/v8/content/theming/colors/index.md
@@ -0,0 +1,14 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/content/theming/colors/javascript.md b/static/usage/v8/content/theming/colors/javascript.md
new file mode 100644
index 00000000000..4b2489b6dae
--- /dev/null
+++ b/static/usage/v8/content/theming/colors/javascript.md
@@ -0,0 +1,38 @@
+```html
+
+ Primary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Secondary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Tertiary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Success content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Warning content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Danger content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Light content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Medium content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Dark content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+```
diff --git a/static/usage/v8/content/theming/colors/react.md b/static/usage/v8/content/theming/colors/react.md
new file mode 100644
index 00000000000..5a24d44a829
--- /dev/null
+++ b/static/usage/v8/content/theming/colors/react.md
@@ -0,0 +1,48 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Primary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Secondary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Tertiary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Success content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Warning content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Danger content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Light content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Medium content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Dark content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/content/theming/colors/vue.md b/static/usage/v8/content/theming/colors/vue.md
new file mode 100644
index 00000000000..1bbcc99834e
--- /dev/null
+++ b/static/usage/v8/content/theming/colors/vue.md
@@ -0,0 +1,49 @@
+```html
+
+
+ Primary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Secondary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Tertiary content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Success content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Warning content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Danger content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Light content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Medium content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+ Dark content
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+```
diff --git a/static/usage/v8/content/theming/css-properties/angular/example_component_css.md b/static/usage/v8/content/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..be9b9d8063c
--- /dev/null
+++ b/static/usage/v8/content/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-content {
+ --background: #d31373;
+ --color: #fff;
+}
+```
diff --git a/static/usage/v8/content/theming/css-properties/angular/example_component_html.md b/static/usage/v8/content/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/v8/content/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+```
diff --git a/static/usage/v8/content/theming/css-properties/demo.html b/static/usage/v8/content/theming/css-properties/demo.html
new file mode 100644
index 00000000000..23637050eba
--- /dev/null
+++ b/static/usage/v8/content/theming/css-properties/demo.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
diff --git a/static/usage/v8/content/theming/css-properties/index.md b/static/usage/v8/content/theming/css-properties/index.md
new file mode 100644
index 00000000000..3e06870ed3a
--- /dev/null
+++ b/static/usage/v8/content/theming/css-properties/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/content/theming/css-properties/javascript.md b/static/usage/v8/content/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..2ad2211af87
--- /dev/null
+++ b/static/usage/v8/content/theming/css-properties/javascript.md
@@ -0,0 +1,19 @@
+```html
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+```
diff --git a/static/usage/v8/content/theming/css-properties/react/main_css.md b/static/usage/v8/content/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..be9b9d8063c
--- /dev/null
+++ b/static/usage/v8/content/theming/css-properties/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-content {
+ --background: #d31373;
+ --color: #fff;
+}
+```
diff --git a/static/usage/v8/content/theming/css-properties/react/main_tsx.md b/static/usage/v8/content/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..33f0e53433b
--- /dev/null
+++ b/static/usage/v8/content/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/content/theming/css-properties/vue.md b/static/usage/v8/content/theming/css-properties/vue.md
new file mode 100644
index 00000000000..09322711dfd
--- /dev/null
+++ b/static/usage/v8/content/theming/css-properties/vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/content/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v8/content/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..29c3d353879
--- /dev/null
+++ b/static/usage/v8/content/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,9 @@
+```css
+ion-content::part(background) {
+ background: #d31373;
+}
+
+ion-content::part(scroll) {
+ color: #fff;
+}
+```
diff --git a/static/usage/v8/content/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v8/content/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/v8/content/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+```
diff --git a/static/usage/v8/content/theming/css-shadow-parts/demo.html b/static/usage/v8/content/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..5e7de0f6637
--- /dev/null
+++ b/static/usage/v8/content/theming/css-shadow-parts/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
diff --git a/static/usage/v8/content/theming/css-shadow-parts/index.md b/static/usage/v8/content/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..f9f853b71d9
--- /dev/null
+++ b/static/usage/v8/content/theming/css-shadow-parts/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/content/theming/css-shadow-parts/javascript.md b/static/usage/v8/content/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..74124e4fdb3
--- /dev/null
+++ b/static/usage/v8/content/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,22 @@
+```html
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+```
diff --git a/static/usage/v8/content/theming/css-shadow-parts/react/main_css.md b/static/usage/v8/content/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..29c3d353879
--- /dev/null
+++ b/static/usage/v8/content/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,9 @@
+```css
+ion-content::part(background) {
+ background: #d31373;
+}
+
+ion-content::part(scroll) {
+ color: #fff;
+}
+```
diff --git a/static/usage/v8/content/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v8/content/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..33f0e53433b
--- /dev/null
+++ b/static/usage/v8/content/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/content/theming/css-shadow-parts/vue.md b/static/usage/v8/content/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..129f3ec615a
--- /dev/null
+++ b/static/usage/v8/content/theming/css-shadow-parts/vue.md
@@ -0,0 +1,33 @@
+```html
+
+
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/content/theming/safe-area/angular/example_component_css.md b/static/usage/v8/content/theming/safe-area/angular/example_component_css.md
new file mode 100644
index 00000000000..17cf5c76c57
--- /dev/null
+++ b/static/usage/v8/content/theming/safe-area/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-content::part(scroll) {
+ padding-top: var(--ion-safe-area-top, 0);
+ padding-bottom: var(--ion-safe-area-bottom, 0);
+ padding-left: var(--ion-safe-area-left, 0);
+ padding-right: var(--ion-safe-area-right, 0);
+}
+```
diff --git a/static/usage/v8/content/theming/safe-area/angular/example_component_html.md b/static/usage/v8/content/theming/safe-area/angular/example_component_html.md
new file mode 100644
index 00000000000..d01b3935e35
--- /dev/null
+++ b/static/usage/v8/content/theming/safe-area/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+```
diff --git a/static/usage/v8/content/theming/safe-area/angular/global_css.md b/static/usage/v8/content/theming/safe-area/angular/global_css.md
new file mode 100644
index 00000000000..bd18709f492
--- /dev/null
+++ b/static/usage/v8/content/theming/safe-area/angular/global_css.md
@@ -0,0 +1,12 @@
+```css
+:root {
+ /**
+ * Setting the variables for DEMO purposes only.
+ * Values will be set automatically when building an iOS or Android app.
+ */
+ --ion-safe-area-top: 20px;
+ --ion-safe-area-bottom: 20px;
+ --ion-safe-area-left: 20px;
+ --ion-safe-area-right: 20px;
+}
+```
diff --git a/static/usage/v8/content/theming/safe-area/demo.html b/static/usage/v8/content/theming/safe-area/demo.html
new file mode 100644
index 00000000000..0c1741e8537
--- /dev/null
+++ b/static/usage/v8/content/theming/safe-area/demo.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+ Content
+
+
+
+
+
+
+
+
+
+
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
diff --git a/static/usage/v8/content/theming/safe-area/index.md b/static/usage/v8/content/theming/safe-area/index.md
new file mode 100644
index 00000000000..29fcfc8435c
--- /dev/null
+++ b/static/usage/v8/content/theming/safe-area/index.md
@@ -0,0 +1,36 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.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_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v8/content/theming/safe-area/javascript.md b/static/usage/v8/content/theming/safe-area/javascript.md
new file mode 100644
index 00000000000..2dc819d6a60
--- /dev/null
+++ b/static/usage/v8/content/theming/safe-area/javascript.md
@@ -0,0 +1,25 @@
+```html
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+```
diff --git a/static/usage/v8/content/theming/safe-area/react/main_css.md b/static/usage/v8/content/theming/safe-area/react/main_css.md
new file mode 100644
index 00000000000..6466670f427
--- /dev/null
+++ b/static/usage/v8/content/theming/safe-area/react/main_css.md
@@ -0,0 +1,19 @@
+```css
+:root {
+ /**
+ * Setting the variables for DEMO purposes only.
+ * Values will be set automatically when building an iOS or Android app.
+ */
+ --ion-safe-area-top: 20px;
+ --ion-safe-area-bottom: 20px;
+ --ion-safe-area-left: 20px;
+ --ion-safe-area-right: 20px;
+}
+
+ion-content::part(scroll) {
+ padding-top: var(--ion-safe-area-top, 0);
+ padding-bottom: var(--ion-safe-area-bottom, 0);
+ padding-left: var(--ion-safe-area-left, 0);
+ padding-right: var(--ion-safe-area-right, 0);
+}
+```
diff --git a/static/usage/v8/content/theming/safe-area/react/main_tsx.md b/static/usage/v8/content/theming/safe-area/react/main_tsx.md
new file mode 100644
index 00000000000..4f3ff8a34b4
--- /dev/null
+++ b/static/usage/v8/content/theming/safe-area/react/main_tsx.md
@@ -0,0 +1,15 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/content/theming/safe-area/vue.md b/static/usage/v8/content/theming/safe-area/vue.md
new file mode 100644
index 00000000000..18c5e8c246e
--- /dev/null
+++ b/static/usage/v8/content/theming/safe-area/vue.md
@@ -0,0 +1,40 @@
+```html
+
+
+ Here's a small text description for the content. Nothing more, nothing less.
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime-button/basic/angular.md b/static/usage/v8/datetime-button/basic/angular.md
new file mode 100644
index 00000000000..80a6ffe3724
--- /dev/null
+++ b/static/usage/v8/datetime-button/basic/angular.md
@@ -0,0 +1,9 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime-button/basic/demo.html b/static/usage/v8/datetime-button/basic/demo.html
new file mode 100644
index 00000000000..10fbe21f532
--- /dev/null
+++ b/static/usage/v8/datetime-button/basic/demo.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime-button/basic/index.md b/static/usage/v8/datetime-button/basic/index.md
new file mode 100644
index 00000000000..d70daebc130
--- /dev/null
+++ b/static/usage/v8/datetime-button/basic/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime-button/basic/javascript.md b/static/usage/v8/datetime-button/basic/javascript.md
new file mode 100644
index 00000000000..3b39203bb90
--- /dev/null
+++ b/static/usage/v8/datetime-button/basic/javascript.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime-button/basic/react.md b/static/usage/v8/datetime-button/basic/react.md
new file mode 100644
index 00000000000..62529cdb75f
--- /dev/null
+++ b/static/usage/v8/datetime-button/basic/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/react';
+function Example() {
+ return (
+ <>
+
+
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime-button/basic/vue.md b/static/usage/v8/datetime-button/basic/vue.md
new file mode 100644
index 00000000000..a595c27e409
--- /dev/null
+++ b/static/usage/v8/datetime-button/basic/vue.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime-button/format-options/angular.md b/static/usage/v8/datetime-button/format-options/angular.md
new file mode 100644
index 00000000000..72570e5242b
--- /dev/null
+++ b/static/usage/v8/datetime-button/format-options/angular.md
@@ -0,0 +1,24 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime-button/format-options/demo.html b/static/usage/v8/datetime-button/format-options/demo.html
new file mode 100644
index 00000000000..2690eb274f3
--- /dev/null
+++ b/static/usage/v8/datetime-button/format-options/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Datetime Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime-button/format-options/index.md b/static/usage/v8/datetime-button/format-options/index.md
new file mode 100644
index 00000000000..ff54ee72608
--- /dev/null
+++ b/static/usage/v8/datetime-button/format-options/index.md
@@ -0,0 +1,18 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime-button/format-options/javascript.md b/static/usage/v8/datetime-button/format-options/javascript.md
new file mode 100644
index 00000000000..a71c653a98b
--- /dev/null
+++ b/static/usage/v8/datetime-button/format-options/javascript.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime-button/format-options/react.md b/static/usage/v8/datetime-button/format-options/react.md
new file mode 100644
index 00000000000..cf774d2cc98
--- /dev/null
+++ b/static/usage/v8/datetime-button/format-options/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime-button/format-options/vue.md b/static/usage/v8/datetime-button/format-options/vue.md
new file mode 100644
index 00000000000..5bb7f801d98
--- /dev/null
+++ b/static/usage/v8/datetime-button/format-options/vue.md
@@ -0,0 +1,31 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/basic/angular.md b/static/usage/v8/datetime/basic/angular.md
new file mode 100644
index 00000000000..676d4c61c18
--- /dev/null
+++ b/static/usage/v8/datetime/basic/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/basic/demo.html b/static/usage/v8/datetime/basic/demo.html
new file mode 100644
index 00000000000..0c8da6ec6a3
--- /dev/null
+++ b/static/usage/v8/datetime/basic/demo.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/basic/index.md b/static/usage/v8/datetime/basic/index.md
new file mode 100644
index 00000000000..4d9429d3054
--- /dev/null
+++ b/static/usage/v8/datetime/basic/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/basic/javascript.md b/static/usage/v8/datetime/basic/javascript.md
new file mode 100644
index 00000000000..676d4c61c18
--- /dev/null
+++ b/static/usage/v8/datetime/basic/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/basic/react.md b/static/usage/v8/datetime/basic/react.md
new file mode 100644
index 00000000000..fe17ddda39b
--- /dev/null
+++ b/static/usage/v8/datetime/basic/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/basic/vue.md b/static/usage/v8/datetime/basic/vue.md
new file mode 100644
index 00000000000..cc68b9ab44a
--- /dev/null
+++ b/static/usage/v8/datetime/basic/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/angular.md b/static/usage/v8/datetime/buttons/customizing-button-texts/angular.md
new file mode 100644
index 00000000000..f9d6b66b986
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-button-texts/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/demo.html b/static/usage/v8/datetime/buttons/customizing-button-texts/demo.html
new file mode 100644
index 00000000000..b5940484e03
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-button-texts/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/index.md b/static/usage/v8/datetime/buttons/customizing-button-texts/index.md
new file mode 100644
index 00000000000..8f8e886ca0a
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-button-texts/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/javascript.md b/static/usage/v8/datetime/buttons/customizing-button-texts/javascript.md
new file mode 100644
index 00000000000..addbae86356
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-button-texts/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/react.md b/static/usage/v8/datetime/buttons/customizing-button-texts/react.md
new file mode 100644
index 00000000000..8806828082b
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-button-texts/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/vue.md b/static/usage/v8/datetime/buttons/customizing-button-texts/vue.md
new file mode 100644
index 00000000000..fddaa53fac1
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-button-texts/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/angular.md b/static/usage/v8/datetime/buttons/customizing-buttons/angular.md
new file mode 100644
index 00000000000..c5f1c5d8b9f
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-buttons/angular.md
@@ -0,0 +1,9 @@
+```html
+
+
+ Reset
+ Never mind
+ All Set
+
+
+```
diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/demo.html b/static/usage/v8/datetime/buttons/customizing-buttons/demo.html
new file mode 100644
index 00000000000..3eadf209aac
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-buttons/demo.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Reset
+ Never mind
+ All Set
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/index.md b/static/usage/v8/datetime/buttons/customizing-buttons/index.md
new file mode 100644
index 00000000000..8c8dd6234a5
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-buttons/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/javascript.md b/static/usage/v8/datetime/buttons/customizing-buttons/javascript.md
new file mode 100644
index 00000000000..06ad3d83291
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-buttons/javascript.md
@@ -0,0 +1,13 @@
+```html
+
+
+ Reset
+ Never mind
+ All Set
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/react.md b/static/usage/v8/datetime/buttons/customizing-buttons/react.md
new file mode 100644
index 00000000000..20435641f42
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-buttons/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React, { useRef } from 'react';
+import { IonButtons, IonButton, IonDatetime } from '@ionic/react';
+function Example() {
+ const datetime = useRef(null);
+ const reset = () => {
+ datetime.current?.reset();
+ };
+ const cancel = () => {
+ datetime.current?.cancel();
+ };
+ const confirm = () => {
+ datetime.current?.confirm();
+ };
+ return (
+
+
+
+ Reset
+
+
+ Never mind
+
+
+ All Set
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/vue.md b/static/usage/v8/datetime/buttons/customizing-buttons/vue.md
new file mode 100644
index 00000000000..4d1408b7ab4
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/customizing-buttons/vue.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+ Reset
+ Never mind
+ All Set
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular.md
new file mode 100644
index 00000000000..bf3bb712166
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/demo.html b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/demo.html
new file mode 100644
index 00000000000..7f267bed058
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md
new file mode 100644
index 00000000000..209eb126efe
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/javascript.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/javascript.md
new file mode 100644
index 00000000000..0c8a20f6672
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/react.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/react.md
new file mode 100644
index 00000000000..9409dc13911
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/vue.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/vue.md
new file mode 100644
index 00000000000..196d89fbf4d
--- /dev/null
+++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_html.md b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_html.md
new file mode 100644
index 00000000000..3ceed6383ae
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md
new file mode 100644
index 00000000000..3021390e188
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ isWeekday = (dateString: string) => {
+ const date = new Date(dateString);
+ const utcDay = date.getUTCDay();
+
+ /**
+ * Date will be enabled if it is not
+ * Sunday or Saturday
+ */
+ return utcDay !== 0 && utcDay !== 6;
+ };
+}
+```
diff --git a/static/usage/v8/datetime/date-constraints/advanced/demo.html b/static/usage/v8/datetime/date-constraints/advanced/demo.html
new file mode 100644
index 00000000000..9d56e4c3b27
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/advanced/demo.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/date-constraints/advanced/index.md b/static/usage/v8/datetime/date-constraints/advanced/index.md
new file mode 100644
index 00000000000..48cfcb762d1
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/advanced/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/datetime/date-constraints/advanced/javascript.md b/static/usage/v8/datetime/date-constraints/advanced/javascript.md
new file mode 100644
index 00000000000..60a991725a0
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/advanced/javascript.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+```
diff --git a/static/usage/v8/datetime/date-constraints/advanced/react.md b/static/usage/v8/datetime/date-constraints/advanced/react.md
new file mode 100644
index 00000000000..ece5aef6c9e
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/advanced/react.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ const isWeekday = (dateString: string) => {
+ const date = new Date(dateString);
+ const utcDay = date.getUTCDay();
+
+ /**
+ * Date will be enabled if it is not
+ * Sunday or Saturday
+ */
+ return utcDay !== 0 && utcDay !== 6;
+ };
+
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/date-constraints/advanced/vue.md b/static/usage/v8/datetime/date-constraints/advanced/vue.md
new file mode 100644
index 00000000000..afd310f0867
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/advanced/vue.md
@@ -0,0 +1,28 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/date-constraints/max-min/angular.md b/static/usage/v8/datetime/date-constraints/max-min/angular.md
new file mode 100644
index 00000000000..f37914bd457
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/max-min/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/date-constraints/max-min/demo.html b/static/usage/v8/datetime/date-constraints/max-min/demo.html
new file mode 100644
index 00000000000..dde1425d4a6
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/max-min/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/date-constraints/max-min/index.md b/static/usage/v8/datetime/date-constraints/max-min/index.md
new file mode 100644
index 00000000000..d10c5885604
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/max-min/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/date-constraints/max-min/javascript.md b/static/usage/v8/datetime/date-constraints/max-min/javascript.md
new file mode 100644
index 00000000000..f37914bd457
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/max-min/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/date-constraints/max-min/react.md b/static/usage/v8/datetime/date-constraints/max-min/react.md
new file mode 100644
index 00000000000..e2493659c23
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/max-min/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/date-constraints/max-min/vue.md b/static/usage/v8/datetime/date-constraints/max-min/vue.md
new file mode 100644
index 00000000000..32fec242e0a
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/max-min/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/date-constraints/values/angular.md b/static/usage/v8/datetime/date-constraints/values/angular.md
new file mode 100644
index 00000000000..ab31d1fad20
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/values/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/date-constraints/values/demo.html b/static/usage/v8/datetime/date-constraints/values/demo.html
new file mode 100644
index 00000000000..840fcff5a65
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/values/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/date-constraints/values/index.md b/static/usage/v8/datetime/date-constraints/values/index.md
new file mode 100644
index 00000000000..3695e380fad
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/values/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/date-constraints/values/javascript.md b/static/usage/v8/datetime/date-constraints/values/javascript.md
new file mode 100644
index 00000000000..670f19ca6ea
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/values/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/date-constraints/values/react.md b/static/usage/v8/datetime/date-constraints/values/react.md
new file mode 100644
index 00000000000..74516943d6e
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/values/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/date-constraints/values/vue.md b/static/usage/v8/datetime/date-constraints/values/vue.md
new file mode 100644
index 00000000000..cf1d0eaaa89
--- /dev/null
+++ b/static/usage/v8/datetime/date-constraints/values/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/format-options/angular.md b/static/usage/v8/datetime/format-options/angular.md
new file mode 100644
index 00000000000..8453ac416e8
--- /dev/null
+++ b/static/usage/v8/datetime/format-options/angular.md
@@ -0,0 +1,11 @@
+```html
+
+ Select Date
+
+```
diff --git a/static/usage/v8/datetime/format-options/demo.html b/static/usage/v8/datetime/format-options/demo.html
new file mode 100644
index 00000000000..b7b00cb6f44
--- /dev/null
+++ b/static/usage/v8/datetime/format-options/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+ Select Date
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/format-options/index.md b/static/usage/v8/datetime/format-options/index.md
new file mode 100644
index 00000000000..d6e6eb0ca44
--- /dev/null
+++ b/static/usage/v8/datetime/format-options/index.md
@@ -0,0 +1,18 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/format-options/javascript.md b/static/usage/v8/datetime/format-options/javascript.md
new file mode 100644
index 00000000000..8476e5fe8a8
--- /dev/null
+++ b/static/usage/v8/datetime/format-options/javascript.md
@@ -0,0 +1,13 @@
+```html
+
+ Select Date
+
+
+
+```
diff --git a/static/usage/v8/datetime/format-options/react.md b/static/usage/v8/datetime/format-options/react.md
new file mode 100644
index 00000000000..5c5bcfb2882
--- /dev/null
+++ b/static/usage/v8/datetime/format-options/react.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+
+function Example() {
+ return (
+
+ Select Date
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/format-options/vue.md b/static/usage/v8/datetime/format-options/vue.md
new file mode 100644
index 00000000000..e24444436fc
--- /dev/null
+++ b/static/usage/v8/datetime/format-options/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+ Select Date
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/highlightedDates/array/angular/example_component_html.md b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_html.md
new file mode 100644
index 00000000000..25c15ca64c7
--- /dev/null
+++ b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md
new file mode 100644
index 00000000000..4ca93b85f44
--- /dev/null
+++ b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ highlightedDates = [
+ {
+ date: '2023-01-05',
+ textColor: '#800080',
+ backgroundColor: '#ffc0cb',
+ },
+ {
+ date: '2023-01-10',
+ textColor: '#09721b',
+ backgroundColor: '#c8e5d0',
+ },
+ {
+ date: '2023-01-20',
+ textColor: 'var(--ion-color-secondary-contrast)',
+ backgroundColor: 'var(--ion-color-secondary)',
+ },
+ {
+ date: '2023-01-23',
+ textColor: 'rgb(68, 10, 184)',
+ backgroundColor: 'rgb(211, 200, 229)',
+ },
+ ];
+}
+```
diff --git a/static/usage/v8/datetime/highlightedDates/array/demo.html b/static/usage/v8/datetime/highlightedDates/array/demo.html
new file mode 100644
index 00000000000..1e8545bf042
--- /dev/null
+++ b/static/usage/v8/datetime/highlightedDates/array/demo.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/highlightedDates/array/index.md b/static/usage/v8/datetime/highlightedDates/array/index.md
new file mode 100644
index 00000000000..c72db6d82aa
--- /dev/null
+++ b/static/usage/v8/datetime/highlightedDates/array/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/datetime/highlightedDates/array/javascript.md b/static/usage/v8/datetime/highlightedDates/array/javascript.md
new file mode 100644
index 00000000000..a27ff554ee2
--- /dev/null
+++ b/static/usage/v8/datetime/highlightedDates/array/javascript.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+```
diff --git a/static/usage/v8/datetime/highlightedDates/array/react.md b/static/usage/v8/datetime/highlightedDates/array/react.md
new file mode 100644
index 00000000000..4d8d9258f63
--- /dev/null
+++ b/static/usage/v8/datetime/highlightedDates/array/react.md
@@ -0,0 +1,35 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/highlightedDates/array/vue.md b/static/usage/v8/datetime/highlightedDates/array/vue.md
new file mode 100644
index 00000000000..408f58f2833
--- /dev/null
+++ b/static/usage/v8/datetime/highlightedDates/array/vue.md
@@ -0,0 +1,40 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_html.md b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_html.md
new file mode 100644
index 00000000000..634090ab0ab
--- /dev/null
+++ b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
new file mode 100644
index 00000000000..60f9c700d05
--- /dev/null
+++ b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md
@@ -0,0 +1,30 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ highlightedDates = (isoString) => {
+ const date = new Date(isoString);
+ const utcDay = date.getUTCDate();
+
+ if (utcDay % 5 === 0) {
+ return {
+ textColor: '#800080',
+ backgroundColor: '#ffc0cb',
+ };
+ }
+
+ if (utcDay % 3 === 0) {
+ return {
+ textColor: 'var(--ion-color-secondary-contrast)',
+ backgroundColor: 'var(--ion-color-secondary)',
+ };
+ }
+
+ return undefined;
+ };
+}
+```
diff --git a/static/usage/v8/datetime/highlightedDates/callback/demo.html b/static/usage/v8/datetime/highlightedDates/callback/demo.html
new file mode 100644
index 00000000000..855b797ed2d
--- /dev/null
+++ b/static/usage/v8/datetime/highlightedDates/callback/demo.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/highlightedDates/callback/index.md b/static/usage/v8/datetime/highlightedDates/callback/index.md
new file mode 100644
index 00000000000..d546ea2a118
--- /dev/null
+++ b/static/usage/v8/datetime/highlightedDates/callback/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/datetime/highlightedDates/callback/javascript.md b/static/usage/v8/datetime/highlightedDates/callback/javascript.md
new file mode 100644
index 00000000000..9041810960b
--- /dev/null
+++ b/static/usage/v8/datetime/highlightedDates/callback/javascript.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+```
diff --git a/static/usage/v8/datetime/highlightedDates/callback/react.md b/static/usage/v8/datetime/highlightedDates/callback/react.md
new file mode 100644
index 00000000000..6543a1366ca
--- /dev/null
+++ b/static/usage/v8/datetime/highlightedDates/callback/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+ {
+ const date = new Date(isoString);
+ const utcDay = date.getUTCDate();
+
+ if (utcDay % 5 === 0) {
+ return {
+ textColor: '#800080',
+ backgroundColor: '#ffc0cb',
+ };
+ }
+
+ if (utcDay % 3 === 0) {
+ return {
+ textColor: 'var(--ion-color-secondary-contrast)',
+ backgroundColor: 'var(--ion-color-secondary)',
+ };
+ }
+
+ return undefined;
+ }}
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/highlightedDates/callback/vue.md b/static/usage/v8/datetime/highlightedDates/callback/vue.md
new file mode 100644
index 00000000000..e916b2cef1b
--- /dev/null
+++ b/static/usage/v8/datetime/highlightedDates/callback/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/localization/custom-locale/angular.md b/static/usage/v8/datetime/localization/custom-locale/angular.md
new file mode 100644
index 00000000000..c3697585c67
--- /dev/null
+++ b/static/usage/v8/datetime/localization/custom-locale/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/localization/custom-locale/demo.html b/static/usage/v8/datetime/localization/custom-locale/demo.html
new file mode 100644
index 00000000000..e1d1b2b7531
--- /dev/null
+++ b/static/usage/v8/datetime/localization/custom-locale/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/localization/custom-locale/index.md b/static/usage/v8/datetime/localization/custom-locale/index.md
new file mode 100644
index 00000000000..330a1e415bb
--- /dev/null
+++ b/static/usage/v8/datetime/localization/custom-locale/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/localization/custom-locale/javascript.md b/static/usage/v8/datetime/localization/custom-locale/javascript.md
new file mode 100644
index 00000000000..c3697585c67
--- /dev/null
+++ b/static/usage/v8/datetime/localization/custom-locale/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/localization/custom-locale/react.md b/static/usage/v8/datetime/localization/custom-locale/react.md
new file mode 100644
index 00000000000..f543b588cf4
--- /dev/null
+++ b/static/usage/v8/datetime/localization/custom-locale/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/localization/custom-locale/vue.md b/static/usage/v8/datetime/localization/custom-locale/vue.md
new file mode 100644
index 00000000000..8a3712a255e
--- /dev/null
+++ b/static/usage/v8/datetime/localization/custom-locale/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/localization/first-day-of-week/angular.md b/static/usage/v8/datetime/localization/first-day-of-week/angular.md
new file mode 100644
index 00000000000..2281060074e
--- /dev/null
+++ b/static/usage/v8/datetime/localization/first-day-of-week/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/localization/first-day-of-week/demo.html b/static/usage/v8/datetime/localization/first-day-of-week/demo.html
new file mode 100644
index 00000000000..fe89cd25d80
--- /dev/null
+++ b/static/usage/v8/datetime/localization/first-day-of-week/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/localization/first-day-of-week/index.md b/static/usage/v8/datetime/localization/first-day-of-week/index.md
new file mode 100644
index 00000000000..4cc8b4b7bda
--- /dev/null
+++ b/static/usage/v8/datetime/localization/first-day-of-week/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/localization/first-day-of-week/javascript.md b/static/usage/v8/datetime/localization/first-day-of-week/javascript.md
new file mode 100644
index 00000000000..420402e2d9c
--- /dev/null
+++ b/static/usage/v8/datetime/localization/first-day-of-week/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/localization/first-day-of-week/react.md b/static/usage/v8/datetime/localization/first-day-of-week/react.md
new file mode 100644
index 00000000000..b39bb91a837
--- /dev/null
+++ b/static/usage/v8/datetime/localization/first-day-of-week/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/localization/first-day-of-week/vue.md b/static/usage/v8/datetime/localization/first-day-of-week/vue.md
new file mode 100644
index 00000000000..71c24fd72be
--- /dev/null
+++ b/static/usage/v8/datetime/localization/first-day-of-week/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/localization/hour-cycle/angular.md b/static/usage/v8/datetime/localization/hour-cycle/angular.md
new file mode 100644
index 00000000000..aeb27d6152b
--- /dev/null
+++ b/static/usage/v8/datetime/localization/hour-cycle/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/localization/hour-cycle/demo.html b/static/usage/v8/datetime/localization/hour-cycle/demo.html
new file mode 100644
index 00000000000..3960611fe3b
--- /dev/null
+++ b/static/usage/v8/datetime/localization/hour-cycle/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/localization/hour-cycle/index.md b/static/usage/v8/datetime/localization/hour-cycle/index.md
new file mode 100644
index 00000000000..0e15b22a685
--- /dev/null
+++ b/static/usage/v8/datetime/localization/hour-cycle/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/localization/hour-cycle/javascript.md b/static/usage/v8/datetime/localization/hour-cycle/javascript.md
new file mode 100644
index 00000000000..5f3638f13aa
--- /dev/null
+++ b/static/usage/v8/datetime/localization/hour-cycle/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/localization/hour-cycle/react.md b/static/usage/v8/datetime/localization/hour-cycle/react.md
new file mode 100644
index 00000000000..e05544cd3cc
--- /dev/null
+++ b/static/usage/v8/datetime/localization/hour-cycle/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/localization/hour-cycle/vue.md b/static/usage/v8/datetime/localization/hour-cycle/vue.md
new file mode 100644
index 00000000000..b8767c6c2db
--- /dev/null
+++ b/static/usage/v8/datetime/localization/hour-cycle/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/angular.md b/static/usage/v8/datetime/localization/locale-extension-tags/angular.md
new file mode 100644
index 00000000000..828f85eeb0a
--- /dev/null
+++ b/static/usage/v8/datetime/localization/locale-extension-tags/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/demo.html b/static/usage/v8/datetime/localization/locale-extension-tags/demo.html
new file mode 100644
index 00000000000..ea99274035b
--- /dev/null
+++ b/static/usage/v8/datetime/localization/locale-extension-tags/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/index.md b/static/usage/v8/datetime/localization/locale-extension-tags/index.md
new file mode 100644
index 00000000000..0013edd6d6f
--- /dev/null
+++ b/static/usage/v8/datetime/localization/locale-extension-tags/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/javascript.md b/static/usage/v8/datetime/localization/locale-extension-tags/javascript.md
new file mode 100644
index 00000000000..828f85eeb0a
--- /dev/null
+++ b/static/usage/v8/datetime/localization/locale-extension-tags/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/react.md b/static/usage/v8/datetime/localization/locale-extension-tags/react.md
new file mode 100644
index 00000000000..d945f768d3a
--- /dev/null
+++ b/static/usage/v8/datetime/localization/locale-extension-tags/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/vue.md b/static/usage/v8/datetime/localization/locale-extension-tags/vue.md
new file mode 100644
index 00000000000..a0181dc8e2d
--- /dev/null
+++ b/static/usage/v8/datetime/localization/locale-extension-tags/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/localization/time-label/angular.md b/static/usage/v8/datetime/localization/time-label/angular.md
new file mode 100644
index 00000000000..38f0e697d3a
--- /dev/null
+++ b/static/usage/v8/datetime/localization/time-label/angular.md
@@ -0,0 +1,5 @@
+```html
+
+ Tiempo
+
+```
diff --git a/static/usage/v8/datetime/localization/time-label/demo.html b/static/usage/v8/datetime/localization/time-label/demo.html
new file mode 100644
index 00000000000..6f36b8b8be0
--- /dev/null
+++ b/static/usage/v8/datetime/localization/time-label/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+ Tiempo
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/localization/time-label/index.md b/static/usage/v8/datetime/localization/time-label/index.md
new file mode 100644
index 00000000000..6586c762c06
--- /dev/null
+++ b/static/usage/v8/datetime/localization/time-label/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/localization/time-label/javascript.md b/static/usage/v8/datetime/localization/time-label/javascript.md
new file mode 100644
index 00000000000..38f0e697d3a
--- /dev/null
+++ b/static/usage/v8/datetime/localization/time-label/javascript.md
@@ -0,0 +1,5 @@
+```html
+
+ Tiempo
+
+```
diff --git a/static/usage/v8/datetime/localization/time-label/react.md b/static/usage/v8/datetime/localization/time-label/react.md
new file mode 100644
index 00000000000..ba81f8743a8
--- /dev/null
+++ b/static/usage/v8/datetime/localization/time-label/react.md
@@ -0,0 +1,12 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ Tiempo
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/localization/time-label/vue.md b/static/usage/v8/datetime/localization/time-label/vue.md
new file mode 100644
index 00000000000..37af973ee32
--- /dev/null
+++ b/static/usage/v8/datetime/localization/time-label/vue.md
@@ -0,0 +1,16 @@
+```html
+
+
+ Tiempo
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/multiple/angular.md b/static/usage/v8/datetime/multiple/angular.md
new file mode 100644
index 00000000000..e26fe9e931d
--- /dev/null
+++ b/static/usage/v8/datetime/multiple/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/multiple/demo.html b/static/usage/v8/datetime/multiple/demo.html
new file mode 100644
index 00000000000..cfc94e89e0e
--- /dev/null
+++ b/static/usage/v8/datetime/multiple/demo.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/multiple/index.md b/static/usage/v8/datetime/multiple/index.md
new file mode 100644
index 00000000000..b0542b8b8fc
--- /dev/null
+++ b/static/usage/v8/datetime/multiple/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/multiple/javascript.md b/static/usage/v8/datetime/multiple/javascript.md
new file mode 100644
index 00000000000..10455808ab2
--- /dev/null
+++ b/static/usage/v8/datetime/multiple/javascript.md
@@ -0,0 +1,8 @@
+```html
+
+
+
+```
diff --git a/static/usage/v8/datetime/multiple/react.md b/static/usage/v8/datetime/multiple/react.md
new file mode 100644
index 00000000000..87028027d47
--- /dev/null
+++ b/static/usage/v8/datetime/multiple/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React, { useRef, useEffect } from 'react';
+import { IonDatetime } from '@ionic/react';
+
+function Example() {
+ const datetime = useRef(null);
+
+ useEffect(() => {
+ if (!datetime.current) return;
+ datetime.current.value = ['2022-06-03', '2022-06-13', '2022-06-29'];
+ }, []);
+
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/multiple/vue.md b/static/usage/v8/datetime/multiple/vue.md
new file mode 100644
index 00000000000..837fc7e2f9f
--- /dev/null
+++ b/static/usage/v8/datetime/multiple/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/presentation/date/angular.md b/static/usage/v8/datetime/presentation/date/angular.md
new file mode 100644
index 00000000000..8694e723b1a
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/date/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/presentation/date/demo.html b/static/usage/v8/datetime/presentation/date/demo.html
new file mode 100644
index 00000000000..bdeca246b99
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/date/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/presentation/date/index.md b/static/usage/v8/datetime/presentation/date/index.md
new file mode 100644
index 00000000000..7cb18100bd5
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/date/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/presentation/date/javascript.md b/static/usage/v8/datetime/presentation/date/javascript.md
new file mode 100644
index 00000000000..8694e723b1a
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/date/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/presentation/date/react.md b/static/usage/v8/datetime/presentation/date/react.md
new file mode 100644
index 00000000000..72e24d86874
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/date/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/presentation/date/vue.md b/static/usage/v8/datetime/presentation/date/vue.md
new file mode 100644
index 00000000000..b686297a867
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/date/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/presentation/month-and-year/angular.md b/static/usage/v8/datetime/presentation/month-and-year/angular.md
new file mode 100644
index 00000000000..fee755e147f
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/month-and-year/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/presentation/month-and-year/demo.html b/static/usage/v8/datetime/presentation/month-and-year/demo.html
new file mode 100644
index 00000000000..a2d381ee21a
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/month-and-year/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/presentation/month-and-year/index.md b/static/usage/v8/datetime/presentation/month-and-year/index.md
new file mode 100644
index 00000000000..d8cb4417e6c
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/month-and-year/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/presentation/month-and-year/javascript.md b/static/usage/v8/datetime/presentation/month-and-year/javascript.md
new file mode 100644
index 00000000000..fee755e147f
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/month-and-year/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/presentation/month-and-year/react.md b/static/usage/v8/datetime/presentation/month-and-year/react.md
new file mode 100644
index 00000000000..f140c4b09c0
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/month-and-year/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/presentation/month-and-year/vue.md b/static/usage/v8/datetime/presentation/month-and-year/vue.md
new file mode 100644
index 00000000000..01744a290fe
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/month-and-year/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/presentation/time/angular.md b/static/usage/v8/datetime/presentation/time/angular.md
new file mode 100644
index 00000000000..d54dd466706
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/time/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/presentation/time/demo.html b/static/usage/v8/datetime/presentation/time/demo.html
new file mode 100644
index 00000000000..1811ae1714b
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/time/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/presentation/time/index.md b/static/usage/v8/datetime/presentation/time/index.md
new file mode 100644
index 00000000000..0dd5b553635
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/time/index.md
@@ -0,0 +1,12 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/presentation/time/javascript.md b/static/usage/v8/datetime/presentation/time/javascript.md
new file mode 100644
index 00000000000..d54dd466706
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/time/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/presentation/time/react.md b/static/usage/v8/datetime/presentation/time/react.md
new file mode 100644
index 00000000000..30e0e206fbc
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/time/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/presentation/time/vue.md b/static/usage/v8/datetime/presentation/time/vue.md
new file mode 100644
index 00000000000..7e01bc7d730
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/time/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/presentation/wheel/angular.md b/static/usage/v8/datetime/presentation/wheel/angular.md
new file mode 100644
index 00000000000..f98877053c3
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/wheel/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/presentation/wheel/demo.html b/static/usage/v8/datetime/presentation/wheel/demo.html
new file mode 100644
index 00000000000..b65240a66a5
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/wheel/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/presentation/wheel/index.md b/static/usage/v8/datetime/presentation/wheel/index.md
new file mode 100644
index 00000000000..0561288d93b
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/wheel/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/presentation/wheel/javascript.md b/static/usage/v8/datetime/presentation/wheel/javascript.md
new file mode 100644
index 00000000000..83f43a87d61
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/wheel/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/presentation/wheel/react.md b/static/usage/v8/datetime/presentation/wheel/react.md
new file mode 100644
index 00000000000..fc7873b4765
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/wheel/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/presentation/wheel/vue.md b/static/usage/v8/datetime/presentation/wheel/vue.md
new file mode 100644
index 00000000000..c1055e8cfb7
--- /dev/null
+++ b/static/usage/v8/datetime/presentation/wheel/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/styling/calendar-days/angular/example_component_css.md b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_css.md
new file mode 100644
index 00000000000..c8a3e173e21
--- /dev/null
+++ b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_css.md
@@ -0,0 +1,46 @@
+```css
+/*
+* Custom Datetime Day Parts
+* -------------------------------------------
+*/
+
+ion-datetime::part(calendar-day) {
+ color: #da5296;
+}
+
+ion-datetime::part(calendar-day today) {
+ color: #8462d1;
+}
+
+ion-datetime::part(calendar-day):focus {
+ background-color: rgb(154 209 98 / 0.2);
+ box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
+}
+
+/*
+* Custom Material Design Datetime Day Parts
+* -------------------------------------------
+*/
+
+ion-datetime.md::part(calendar-day active),
+ion-datetime.md::part(calendar-day active):focus {
+ background-color: #9ad162;
+ border-color: #9ad162;
+ color: #fff;
+}
+
+ion-datetime.md::part(calendar-day today) {
+ border-color: #8462d1;
+}
+
+/*
+* Custom iOS Datetime Day Parts
+* -------------------------------------------
+*/
+
+ion-datetime.ios::part(calendar-day active),
+ion-datetime.ios::part(calendar-day active):focus {
+ background-color: rgb(154 209 98 / 0.2);
+ color: #9ad162;
+}
+```
diff --git a/static/usage/v8/datetime/styling/calendar-days/angular/example_component_html.md b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_html.md
new file mode 100644
index 00000000000..dde0aec7085
--- /dev/null
+++ b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md
new file mode 100644
index 00000000000..56c95d0ba0e
--- /dev/null
+++ b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md
@@ -0,0 +1,36 @@
+```ts
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+// ViewEncapsulation is turned off for this demo due to
+// a lack of support for styling multiple css shadow parts
+// See https://github.com/angular/angular/issues/22515
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ encapsulation: ViewEncapsulation.None,
+})
+export class ExampleComponent implements OnInit {
+ public datetime;
+
+ ngOnInit() {
+ const date = new Date();
+
+ // Set the value of the datetime to 2 days
+ // before the current day
+ let dayChange = -2;
+
+ // If the day we are going to set the value to
+ // is in the previous month then set the day 2 days
+ // later instead so it remains in the same month
+ if (date.getDate() + dayChange <= 0) {
+ dayChange = -dayChange;
+ }
+
+ // Set the value of the datetime to the day
+ // calculated above
+ date.setDate(date.getDate() + dayChange);
+ this.datetime = date.toISOString();
+ }
+}
+```
diff --git a/static/usage/v8/datetime/styling/calendar-days/demo.html b/static/usage/v8/datetime/styling/calendar-days/demo.html
new file mode 100644
index 00000000000..ac5d64023a3
--- /dev/null
+++ b/static/usage/v8/datetime/styling/calendar-days/demo.html
@@ -0,0 +1,91 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/styling/calendar-days/index.md b/static/usage/v8/datetime/styling/calendar-days/index.md
new file mode 100644
index 00000000000..4b9948094c0
--- /dev/null
+++ b/static/usage/v8/datetime/styling/calendar-days/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.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/datetime/styling/calendar-days/javascript.md b/static/usage/v8/datetime/styling/calendar-days/javascript.md
new file mode 100644
index 00000000000..20aa37bb016
--- /dev/null
+++ b/static/usage/v8/datetime/styling/calendar-days/javascript.md
@@ -0,0 +1,72 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/styling/calendar-days/react/main_css.md b/static/usage/v8/datetime/styling/calendar-days/react/main_css.md
new file mode 100644
index 00000000000..c8a3e173e21
--- /dev/null
+++ b/static/usage/v8/datetime/styling/calendar-days/react/main_css.md
@@ -0,0 +1,46 @@
+```css
+/*
+* Custom Datetime Day Parts
+* -------------------------------------------
+*/
+
+ion-datetime::part(calendar-day) {
+ color: #da5296;
+}
+
+ion-datetime::part(calendar-day today) {
+ color: #8462d1;
+}
+
+ion-datetime::part(calendar-day):focus {
+ background-color: rgb(154 209 98 / 0.2);
+ box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
+}
+
+/*
+* Custom Material Design Datetime Day Parts
+* -------------------------------------------
+*/
+
+ion-datetime.md::part(calendar-day active),
+ion-datetime.md::part(calendar-day active):focus {
+ background-color: #9ad162;
+ border-color: #9ad162;
+ color: #fff;
+}
+
+ion-datetime.md::part(calendar-day today) {
+ border-color: #8462d1;
+}
+
+/*
+* Custom iOS Datetime Day Parts
+* -------------------------------------------
+*/
+
+ion-datetime.ios::part(calendar-day active),
+ion-datetime.ios::part(calendar-day active):focus {
+ background-color: rgb(154 209 98 / 0.2);
+ color: #9ad162;
+}
+```
diff --git a/static/usage/v8/datetime/styling/calendar-days/react/main_tsx.md b/static/usage/v8/datetime/styling/calendar-days/react/main_tsx.md
new file mode 100644
index 00000000000..fc76cb27d59
--- /dev/null
+++ b/static/usage/v8/datetime/styling/calendar-days/react/main_tsx.md
@@ -0,0 +1,33 @@
+```tsx
+import React, { useEffect, useState } from 'react';
+import { IonDatetime } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ const [datetime, setDatetime] = useState(null);
+
+ useEffect(() => {
+ const date = new Date();
+
+ // Set the value of the datetime to 2 days
+ // before the current day
+ let dayChange = -2;
+
+ // If the day we are going to set the value to
+ // is in the previous month then set the day 2 days
+ // later instead so it remains in the same month
+ if (date.getDate() + dayChange <= 0) {
+ dayChange = -dayChange;
+ }
+
+ // Set the value of the datetime to the day
+ // calculated above
+ date.setDate(date.getDate() + dayChange);
+ setDatetime(date.toISOString());
+ }, []);
+
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/styling/calendar-days/vue.md b/static/usage/v8/datetime/styling/calendar-days/vue.md
new file mode 100644
index 00000000000..98031201d7c
--- /dev/null
+++ b/static/usage/v8/datetime/styling/calendar-days/vue.md
@@ -0,0 +1,88 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/styling/global-theming/angular/example_component_html.md b/static/usage/v8/datetime/styling/global-theming/angular/example_component_html.md
new file mode 100644
index 00000000000..0a38b1bc5b6
--- /dev/null
+++ b/static/usage/v8/datetime/styling/global-theming/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/styling/global-theming/angular/global_css.md b/static/usage/v8/datetime/styling/global-theming/angular/global_css.md
new file mode 100644
index 00000000000..4ec3d3ecdf9
--- /dev/null
+++ b/static/usage/v8/datetime/styling/global-theming/angular/global_css.md
@@ -0,0 +1,66 @@
+```css
+/* Core CSS required for Ionic components to work properly */
+@import '~@ionic/angular/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@import '~@ionic/angular/css/normalize.css';
+@import '~@ionic/angular/css/structure.css';
+@import '~@ionic/angular/css/typography.css';
+@import '~@ionic/angular/css/display.css';
+
+/* Optional CSS utils that can be commented out */
+@import '~@ionic/angular/css/padding.css';
+@import '~@ionic/angular/css/float-elements.css';
+@import '~@ionic/angular/css/text-alignment.css';
+@import '~@ionic/angular/css/text-transformation.css';
+@import '~@ionic/angular/css/flex-utils.css';
+
+:root {
+ --ion-color-rose: #831843;
+ --ion-color-rose-rgb: 131, 24, 67;
+ --ion-color-rose-contrast: #ffffff;
+ --ion-color-rose-contrast-rgb: 255, 255, 255;
+ --ion-color-rose-shade: #73153b;
+ --ion-color-rose-tint: #8f2f56;
+
+ --ion-text-color: #881337;
+ --ion-text-color-rgb: 136, 19, 55;
+
+ --ion-color-step-50: #f9e6e9;
+ --ion-color-step-100: #f3dbdf;
+ --ion-color-step-150: #edd0d6;
+ --ion-color-step-200: #e7c5cd;
+ --ion-color-step-250: #e1bac3;
+ --ion-color-step-300: #dbaeba;
+ --ion-color-step-350: #d5a3b1;
+ --ion-color-step-400: #cf98a7;
+ --ion-color-step-450: #c98d9e;
+ --ion-color-step-500: #c48295;
+ --ion-color-step-550: #be778b;
+ --ion-color-step-600: #b86c82;
+ --ion-color-step-650: #b26178;
+ --ion-color-step-700: #ac566f;
+ --ion-color-step-750: #a64b66;
+ --ion-color-step-800: #a03f5c;
+ --ion-color-step-850: #9a3453;
+ --ion-color-step-900: #94294a;
+ --ion-color-step-950: #8e1e40;
+}
+
+.ion-color-rose {
+ --ion-color-base: var(--ion-color-rose);
+ --ion-color-base-rgb: var(--ion-color-rose-rgb);
+ --ion-color-contrast: var(--ion-color-rose-contrast);
+ --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+ --ion-color-shade: var(--ion-color-rose-shade);
+ --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+ion-datetime {
+ --background: #fff1f2;
+ --background-rgb: 255, 241, 242;
+
+ border-radius: 16px;
+ box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+}
+```
diff --git a/static/usage/v8/datetime/styling/global-theming/demo.html b/static/usage/v8/datetime/styling/global-theming/demo.html
new file mode 100644
index 00000000000..3a8a11078c6
--- /dev/null
+++ b/static/usage/v8/datetime/styling/global-theming/demo.html
@@ -0,0 +1,76 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/styling/global-theming/index.md b/static/usage/v8/datetime/styling/global-theming/index.md
new file mode 100644
index 00000000000..0fe3944d263
--- /dev/null
+++ b/static/usage/v8/datetime/styling/global-theming/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v8/datetime/styling/global-theming/javascript.md b/static/usage/v8/datetime/styling/global-theming/javascript.md
new file mode 100644
index 00000000000..3da768ccbb4
--- /dev/null
+++ b/static/usage/v8/datetime/styling/global-theming/javascript.md
@@ -0,0 +1,54 @@
+```html
+
+
+
+```
diff --git a/static/usage/v8/datetime/styling/global-theming/react/main_css.md b/static/usage/v8/datetime/styling/global-theming/react/main_css.md
new file mode 100644
index 00000000000..dccf6c7d370
--- /dev/null
+++ b/static/usage/v8/datetime/styling/global-theming/react/main_css.md
@@ -0,0 +1,50 @@
+```css
+:root {
+ --ion-color-rose: #831843;
+ --ion-color-rose-rgb: 131, 24, 67;
+ --ion-color-rose-contrast: #ffffff;
+ --ion-color-rose-contrast-rgb: 255, 255, 255;
+ --ion-color-rose-shade: #73153b;
+ --ion-color-rose-tint: #8f2f56;
+
+ --ion-text-color: #881337;
+ --ion-text-color-rgb: 136, 19, 55;
+
+ --ion-color-step-50: #f9e6e9;
+ --ion-color-step-100: #f3dbdf;
+ --ion-color-step-150: #edd0d6;
+ --ion-color-step-200: #e7c5cd;
+ --ion-color-step-250: #e1bac3;
+ --ion-color-step-300: #dbaeba;
+ --ion-color-step-350: #d5a3b1;
+ --ion-color-step-400: #cf98a7;
+ --ion-color-step-450: #c98d9e;
+ --ion-color-step-500: #c48295;
+ --ion-color-step-550: #be778b;
+ --ion-color-step-600: #b86c82;
+ --ion-color-step-650: #b26178;
+ --ion-color-step-700: #ac566f;
+ --ion-color-step-750: #a64b66;
+ --ion-color-step-800: #a03f5c;
+ --ion-color-step-850: #9a3453;
+ --ion-color-step-900: #94294a;
+ --ion-color-step-950: #8e1e40;
+}
+
+.ion-color-rose {
+ --ion-color-base: var(--ion-color-rose);
+ --ion-color-base-rgb: var(--ion-color-rose-rgb);
+ --ion-color-contrast: var(--ion-color-rose-contrast);
+ --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+ --ion-color-shade: var(--ion-color-rose-shade);
+ --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+ion-datetime {
+ --background: #fff1f2;
+ --background-rgb: 255, 241, 242;
+
+ border-radius: 16px;
+ box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+}
+```
diff --git a/static/usage/v8/datetime/styling/global-theming/react/main_tsx.md b/static/usage/v8/datetime/styling/global-theming/react/main_tsx.md
new file mode 100644
index 00000000000..37e658cdcd1
--- /dev/null
+++ b/static/usage/v8/datetime/styling/global-theming/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/styling/global-theming/vue.md b/static/usage/v8/datetime/styling/global-theming/vue.md
new file mode 100644
index 00000000000..32e682cfbc9
--- /dev/null
+++ b/static/usage/v8/datetime/styling/global-theming/vue.md
@@ -0,0 +1,65 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_css.md b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_css.md
new file mode 100644
index 00000000000..3cd7e6ff8ac
--- /dev/null
+++ b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_css.md
@@ -0,0 +1,17 @@
+```css
+ion-datetime {
+ --background: rgb(245, 235, 247);
+ --background-rgb: 245, 235, 247;
+ --wheel-highlight-background: rgb(218, 216, 255);
+ --wheel-highlight-border-radius: 48px;
+ --wheel-fade-background-rgb: 245, 235, 247;
+}
+
+ion-datetime::part(wheel-item) {
+ color: rgb(255, 66, 97);
+}
+
+ion-datetime::part(wheel-item active) {
+ color: rgb(128, 30, 171);
+}
+```
diff --git a/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_html.md b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_html.md
new file mode 100644
index 00000000000..83c19decb31
--- /dev/null
+++ b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md
new file mode 100644
index 00000000000..39bac10093c
--- /dev/null
+++ b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md
@@ -0,0 +1,14 @@
+```ts
+import { Component, ViewEncapsulation } from '@angular/core';
+
+// ViewEncapsulation is turned off for this demo due to
+// a lack of support for styling multiple css shadow parts
+// See https://github.com/angular/angular/issues/22515
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ encapsulation: ViewEncapsulation.None,
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v8/datetime/styling/wheel-styling/demo.html b/static/usage/v8/datetime/styling/wheel-styling/demo.html
new file mode 100644
index 00000000000..b784a220c73
--- /dev/null
+++ b/static/usage/v8/datetime/styling/wheel-styling/demo.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/styling/wheel-styling/index.md b/static/usage/v8/datetime/styling/wheel-styling/index.md
new file mode 100644
index 00000000000..f41f6f2f224
--- /dev/null
+++ b/static/usage/v8/datetime/styling/wheel-styling/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.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/datetime/styling/wheel-styling/javascript.md b/static/usage/v8/datetime/styling/wheel-styling/javascript.md
new file mode 100644
index 00000000000..6ee932a323d
--- /dev/null
+++ b/static/usage/v8/datetime/styling/wheel-styling/javascript.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+```
diff --git a/static/usage/v8/datetime/styling/wheel-styling/react/main_css.md b/static/usage/v8/datetime/styling/wheel-styling/react/main_css.md
new file mode 100644
index 00000000000..3cd7e6ff8ac
--- /dev/null
+++ b/static/usage/v8/datetime/styling/wheel-styling/react/main_css.md
@@ -0,0 +1,17 @@
+```css
+ion-datetime {
+ --background: rgb(245, 235, 247);
+ --background-rgb: 245, 235, 247;
+ --wheel-highlight-background: rgb(218, 216, 255);
+ --wheel-highlight-border-radius: 48px;
+ --wheel-fade-background-rgb: 245, 235, 247;
+}
+
+ion-datetime::part(wheel-item) {
+ color: rgb(255, 66, 97);
+}
+
+ion-datetime::part(wheel-item active) {
+ color: rgb(128, 30, 171);
+}
+```
diff --git a/static/usage/v8/datetime/styling/wheel-styling/react/main_tsx.md b/static/usage/v8/datetime/styling/wheel-styling/react/main_tsx.md
new file mode 100644
index 00000000000..6e01ae735c3
--- /dev/null
+++ b/static/usage/v8/datetime/styling/wheel-styling/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/styling/wheel-styling/vue.md b/static/usage/v8/datetime/styling/wheel-styling/vue.md
new file mode 100644
index 00000000000..c8f88e0ea76
--- /dev/null
+++ b/static/usage/v8/datetime/styling/wheel-styling/vue.md
@@ -0,0 +1,32 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/theming/angular/example_component_html.md b/static/usage/v8/datetime/theming/angular/example_component_html.md
new file mode 100644
index 00000000000..0a38b1bc5b6
--- /dev/null
+++ b/static/usage/v8/datetime/theming/angular/example_component_html.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/theming/angular/global_css.md b/static/usage/v8/datetime/theming/angular/global_css.md
new file mode 100644
index 00000000000..4ec3d3ecdf9
--- /dev/null
+++ b/static/usage/v8/datetime/theming/angular/global_css.md
@@ -0,0 +1,66 @@
+```css
+/* Core CSS required for Ionic components to work properly */
+@import '~@ionic/angular/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@import '~@ionic/angular/css/normalize.css';
+@import '~@ionic/angular/css/structure.css';
+@import '~@ionic/angular/css/typography.css';
+@import '~@ionic/angular/css/display.css';
+
+/* Optional CSS utils that can be commented out */
+@import '~@ionic/angular/css/padding.css';
+@import '~@ionic/angular/css/float-elements.css';
+@import '~@ionic/angular/css/text-alignment.css';
+@import '~@ionic/angular/css/text-transformation.css';
+@import '~@ionic/angular/css/flex-utils.css';
+
+:root {
+ --ion-color-rose: #831843;
+ --ion-color-rose-rgb: 131, 24, 67;
+ --ion-color-rose-contrast: #ffffff;
+ --ion-color-rose-contrast-rgb: 255, 255, 255;
+ --ion-color-rose-shade: #73153b;
+ --ion-color-rose-tint: #8f2f56;
+
+ --ion-text-color: #881337;
+ --ion-text-color-rgb: 136, 19, 55;
+
+ --ion-color-step-50: #f9e6e9;
+ --ion-color-step-100: #f3dbdf;
+ --ion-color-step-150: #edd0d6;
+ --ion-color-step-200: #e7c5cd;
+ --ion-color-step-250: #e1bac3;
+ --ion-color-step-300: #dbaeba;
+ --ion-color-step-350: #d5a3b1;
+ --ion-color-step-400: #cf98a7;
+ --ion-color-step-450: #c98d9e;
+ --ion-color-step-500: #c48295;
+ --ion-color-step-550: #be778b;
+ --ion-color-step-600: #b86c82;
+ --ion-color-step-650: #b26178;
+ --ion-color-step-700: #ac566f;
+ --ion-color-step-750: #a64b66;
+ --ion-color-step-800: #a03f5c;
+ --ion-color-step-850: #9a3453;
+ --ion-color-step-900: #94294a;
+ --ion-color-step-950: #8e1e40;
+}
+
+.ion-color-rose {
+ --ion-color-base: var(--ion-color-rose);
+ --ion-color-base-rgb: var(--ion-color-rose-rgb);
+ --ion-color-contrast: var(--ion-color-rose-contrast);
+ --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+ --ion-color-shade: var(--ion-color-rose-shade);
+ --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+ion-datetime {
+ --background: #fff1f2;
+ --background-rgb: 255, 241, 242;
+
+ border-radius: 16px;
+ box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+}
+```
diff --git a/static/usage/v8/datetime/theming/demo.html b/static/usage/v8/datetime/theming/demo.html
new file mode 100644
index 00000000000..6fa5a34b925
--- /dev/null
+++ b/static/usage/v8/datetime/theming/demo.html
@@ -0,0 +1,76 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/theming/index.md b/static/usage/v8/datetime/theming/index.md
new file mode 100644
index 00000000000..931c2368a60
--- /dev/null
+++ b/static/usage/v8/datetime/theming/index.md
@@ -0,0 +1,35 @@
+# TODO FW-4608
+
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v8/datetime/theming/javascript.md b/static/usage/v8/datetime/theming/javascript.md
new file mode 100644
index 00000000000..3da768ccbb4
--- /dev/null
+++ b/static/usage/v8/datetime/theming/javascript.md
@@ -0,0 +1,54 @@
+```html
+
+
+
+```
diff --git a/static/usage/v8/datetime/theming/react/main_css.md b/static/usage/v8/datetime/theming/react/main_css.md
new file mode 100644
index 00000000000..dccf6c7d370
--- /dev/null
+++ b/static/usage/v8/datetime/theming/react/main_css.md
@@ -0,0 +1,50 @@
+```css
+:root {
+ --ion-color-rose: #831843;
+ --ion-color-rose-rgb: 131, 24, 67;
+ --ion-color-rose-contrast: #ffffff;
+ --ion-color-rose-contrast-rgb: 255, 255, 255;
+ --ion-color-rose-shade: #73153b;
+ --ion-color-rose-tint: #8f2f56;
+
+ --ion-text-color: #881337;
+ --ion-text-color-rgb: 136, 19, 55;
+
+ --ion-color-step-50: #f9e6e9;
+ --ion-color-step-100: #f3dbdf;
+ --ion-color-step-150: #edd0d6;
+ --ion-color-step-200: #e7c5cd;
+ --ion-color-step-250: #e1bac3;
+ --ion-color-step-300: #dbaeba;
+ --ion-color-step-350: #d5a3b1;
+ --ion-color-step-400: #cf98a7;
+ --ion-color-step-450: #c98d9e;
+ --ion-color-step-500: #c48295;
+ --ion-color-step-550: #be778b;
+ --ion-color-step-600: #b86c82;
+ --ion-color-step-650: #b26178;
+ --ion-color-step-700: #ac566f;
+ --ion-color-step-750: #a64b66;
+ --ion-color-step-800: #a03f5c;
+ --ion-color-step-850: #9a3453;
+ --ion-color-step-900: #94294a;
+ --ion-color-step-950: #8e1e40;
+}
+
+.ion-color-rose {
+ --ion-color-base: var(--ion-color-rose);
+ --ion-color-base-rgb: var(--ion-color-rose-rgb);
+ --ion-color-contrast: var(--ion-color-rose-contrast);
+ --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+ --ion-color-shade: var(--ion-color-rose-shade);
+ --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+ion-datetime {
+ --background: #fff1f2;
+ --background-rgb: 255, 241, 242;
+
+ border-radius: 16px;
+ box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+}
+```
diff --git a/static/usage/v8/datetime/theming/react/main_tsx.md b/static/usage/v8/datetime/theming/react/main_tsx.md
new file mode 100644
index 00000000000..37e658cdcd1
--- /dev/null
+++ b/static/usage/v8/datetime/theming/react/main_tsx.md
@@ -0,0 +1,11 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/theming/vue.md b/static/usage/v8/datetime/theming/vue.md
new file mode 100644
index 00000000000..32e682cfbc9
--- /dev/null
+++ b/static/usage/v8/datetime/theming/vue.md
@@ -0,0 +1,65 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/title/customizing-title/angular.md b/static/usage/v8/datetime/title/customizing-title/angular.md
new file mode 100644
index 00000000000..5f0ded69fbc
--- /dev/null
+++ b/static/usage/v8/datetime/title/customizing-title/angular.md
@@ -0,0 +1,5 @@
+```html
+
+ Select a Reservation Date
+
+```
diff --git a/static/usage/v8/datetime/title/customizing-title/demo.html b/static/usage/v8/datetime/title/customizing-title/demo.html
new file mode 100644
index 00000000000..d306f6760ad
--- /dev/null
+++ b/static/usage/v8/datetime/title/customizing-title/demo.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+ Select a Reservation Date
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/title/customizing-title/index.md b/static/usage/v8/datetime/title/customizing-title/index.md
new file mode 100644
index 00000000000..248c0b86bab
--- /dev/null
+++ b/static/usage/v8/datetime/title/customizing-title/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/title/customizing-title/javascript.md b/static/usage/v8/datetime/title/customizing-title/javascript.md
new file mode 100644
index 00000000000..5f0ded69fbc
--- /dev/null
+++ b/static/usage/v8/datetime/title/customizing-title/javascript.md
@@ -0,0 +1,5 @@
+```html
+
+ Select a Reservation Date
+
+```
diff --git a/static/usage/v8/datetime/title/customizing-title/react.md b/static/usage/v8/datetime/title/customizing-title/react.md
new file mode 100644
index 00000000000..ae4fec002d5
--- /dev/null
+++ b/static/usage/v8/datetime/title/customizing-title/react.md
@@ -0,0 +1,12 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return (
+
+ Select a Reservation Date
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/title/customizing-title/vue.md b/static/usage/v8/datetime/title/customizing-title/vue.md
new file mode 100644
index 00000000000..cb633931dba
--- /dev/null
+++ b/static/usage/v8/datetime/title/customizing-title/vue.md
@@ -0,0 +1,16 @@
+```html
+
+
+ Select a Reservation Date
+
+
+
+
+```
diff --git a/static/usage/v8/datetime/title/showing-default-title/angular.md b/static/usage/v8/datetime/title/showing-default-title/angular.md
new file mode 100644
index 00000000000..c67e022da04
--- /dev/null
+++ b/static/usage/v8/datetime/title/showing-default-title/angular.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/title/showing-default-title/demo.html b/static/usage/v8/datetime/title/showing-default-title/demo.html
new file mode 100644
index 00000000000..070b5fa2457
--- /dev/null
+++ b/static/usage/v8/datetime/title/showing-default-title/demo.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+ Datetime
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/datetime/title/showing-default-title/index.md b/static/usage/v8/datetime/title/showing-default-title/index.md
new file mode 100644
index 00000000000..c053667913e
--- /dev/null
+++ b/static/usage/v8/datetime/title/showing-default-title/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/datetime/title/showing-default-title/javascript.md b/static/usage/v8/datetime/title/showing-default-title/javascript.md
new file mode 100644
index 00000000000..6786deb32cf
--- /dev/null
+++ b/static/usage/v8/datetime/title/showing-default-title/javascript.md
@@ -0,0 +1,3 @@
+```html
+
+```
diff --git a/static/usage/v8/datetime/title/showing-default-title/react.md b/static/usage/v8/datetime/title/showing-default-title/react.md
new file mode 100644
index 00000000000..f04d7d55a36
--- /dev/null
+++ b/static/usage/v8/datetime/title/showing-default-title/react.md
@@ -0,0 +1,8 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+ return ;
+}
+export default Example;
+```
diff --git a/static/usage/v8/datetime/title/showing-default-title/vue.md b/static/usage/v8/datetime/title/showing-default-title/vue.md
new file mode 100644
index 00000000000..7a6e48f7214
--- /dev/null
+++ b/static/usage/v8/datetime/title/showing-default-title/vue.md
@@ -0,0 +1,14 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/basic/angular.md b/static/usage/v8/fab/basic/angular.md
new file mode 100644
index 00000000000..b8394f90ed6
--- /dev/null
+++ b/static/usage/v8/fab/basic/angular.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/basic/demo.html b/static/usage/v8/fab/basic/demo.html
new file mode 100644
index 00000000000..b910f385f5d
--- /dev/null
+++ b/static/usage/v8/fab/basic/demo.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/fab/basic/index.md b/static/usage/v8/fab/basic/index.md
new file mode 100644
index 00000000000..91698d7b762
--- /dev/null
+++ b/static/usage/v8/fab/basic/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/fab/basic/javascript.md b/static/usage/v8/fab/basic/javascript.md
new file mode 100644
index 00000000000..b8394f90ed6
--- /dev/null
+++ b/static/usage/v8/fab/basic/javascript.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/basic/react.md b/static/usage/v8/fab/basic/react.md
new file mode 100644
index 00000000000..f1df86581d6
--- /dev/null
+++ b/static/usage/v8/fab/basic/react.md
@@ -0,0 +1,16 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonIcon } from '@ionic/react';
+import { add } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/fab/basic/vue.md b/static/usage/v8/fab/basic/vue.md
new file mode 100644
index 00000000000..dc16daae992
--- /dev/null
+++ b/static/usage/v8/fab/basic/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/button-sizing/angular.md b/static/usage/v8/fab/button-sizing/angular.md
new file mode 100644
index 00000000000..31bd1874625
--- /dev/null
+++ b/static/usage/v8/fab/button-sizing/angular.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/button-sizing/demo.html b/static/usage/v8/fab/button-sizing/demo.html
new file mode 100644
index 00000000000..a0775d7f35d
--- /dev/null
+++ b/static/usage/v8/fab/button-sizing/demo.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/fab/button-sizing/index.md b/static/usage/v8/fab/button-sizing/index.md
new file mode 100644
index 00000000000..ca02719d5ce
--- /dev/null
+++ b/static/usage/v8/fab/button-sizing/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/fab/button-sizing/javascript.md b/static/usage/v8/fab/button-sizing/javascript.md
new file mode 100644
index 00000000000..31bd1874625
--- /dev/null
+++ b/static/usage/v8/fab/button-sizing/javascript.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/button-sizing/react.md b/static/usage/v8/fab/button-sizing/react.md
new file mode 100644
index 00000000000..c6837284e08
--- /dev/null
+++ b/static/usage/v8/fab/button-sizing/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { add, colorPalette, document, globe } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/fab/button-sizing/vue.md b/static/usage/v8/fab/button-sizing/vue.md
new file mode 100644
index 00000000000..5ea6d8adb56
--- /dev/null
+++ b/static/usage/v8/fab/button-sizing/vue.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/list-side/angular.md b/static/usage/v8/fab/list-side/angular.md
new file mode 100644
index 00000000000..17f7d1818c0
--- /dev/null
+++ b/static/usage/v8/fab/list-side/angular.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/list-side/demo.html b/static/usage/v8/fab/list-side/demo.html
new file mode 100644
index 00000000000..bc14e6303f9
--- /dev/null
+++ b/static/usage/v8/fab/list-side/demo.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/fab/list-side/index.md b/static/usage/v8/fab/list-side/index.md
new file mode 100644
index 00000000000..d45287ba1a1
--- /dev/null
+++ b/static/usage/v8/fab/list-side/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/fab/list-side/javascript.md b/static/usage/v8/fab/list-side/javascript.md
new file mode 100644
index 00000000000..17f7d1818c0
--- /dev/null
+++ b/static/usage/v8/fab/list-side/javascript.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/list-side/react.md b/static/usage/v8/fab/list-side/react.md
new file mode 100644
index 00000000000..b461d8c94eb
--- /dev/null
+++ b/static/usage/v8/fab/list-side/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/fab/list-side/vue.md b/static/usage/v8/fab/list-side/vue.md
new file mode 100644
index 00000000000..459ea75e845
--- /dev/null
+++ b/static/usage/v8/fab/list-side/vue.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/positioning/angular.md b/static/usage/v8/fab/positioning/angular.md
new file mode 100644
index 00000000000..7bca2f10d2f
--- /dev/null
+++ b/static/usage/v8/fab/positioning/angular.md
@@ -0,0 +1,59 @@
+```html
+
+
+ Fab Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/positioning/demo.html b/static/usage/v8/fab/positioning/demo.html
new file mode 100644
index 00000000000..99d5fc60827
--- /dev/null
+++ b/static/usage/v8/fab/positioning/demo.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+ Fab Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/fab/positioning/index.md b/static/usage/v8/fab/positioning/index.md
new file mode 100644
index 00000000000..6d1252709a6
--- /dev/null
+++ b/static/usage/v8/fab/positioning/index.md
@@ -0,0 +1,14 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/fab/positioning/javascript.md b/static/usage/v8/fab/positioning/javascript.md
new file mode 100644
index 00000000000..d9d93856bcd
--- /dev/null
+++ b/static/usage/v8/fab/positioning/javascript.md
@@ -0,0 +1,59 @@
+```html
+
+
+ Fab Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/positioning/react.md b/static/usage/v8/fab/positioning/react.md
new file mode 100644
index 00000000000..95253561d9d
--- /dev/null
+++ b/static/usage/v8/fab/positioning/react.md
@@ -0,0 +1,77 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/react';
+import {
+ chevronDownCircle,
+ chevronForwardCircle,
+ chevronUpCircle,
+ colorPalette,
+ document,
+ globe,
+} from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+ Fab Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/fab/positioning/vue.md b/static/usage/v8/fab/positioning/vue.md
new file mode 100644
index 00000000000..baa2f82e882
--- /dev/null
+++ b/static/usage/v8/fab/positioning/vue.md
@@ -0,0 +1,81 @@
+```html
+
+
+
+ Fab Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/safe-area/angular/example_component_css.md b/static/usage/v8/fab/safe-area/angular/example_component_css.md
new file mode 100644
index 00000000000..a19373c3cc5
--- /dev/null
+++ b/static/usage/v8/fab/safe-area/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-fab {
+ margin-top: var(--ion-safe-area-top, 0);
+ margin-bottom: var(--ion-safe-area-bottom, 0);
+}
+```
diff --git a/static/usage/v8/fab/safe-area/angular/example_component_html.md b/static/usage/v8/fab/safe-area/angular/example_component_html.md
new file mode 100644
index 00000000000..3ba464d7f58
--- /dev/null
+++ b/static/usage/v8/fab/safe-area/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/safe-area/angular/global_css.md b/static/usage/v8/fab/safe-area/angular/global_css.md
new file mode 100644
index 00000000000..d1b434fa246
--- /dev/null
+++ b/static/usage/v8/fab/safe-area/angular/global_css.md
@@ -0,0 +1,10 @@
+```css
+:root {
+ /**
+ * Setting the variables for DEMO purposes only.
+ * Values will be set automatically when building an iOS or Android app.
+ */
+ --ion-safe-area-top: 20px;
+ --ion-safe-area-bottom: 20px;
+}
+```
diff --git a/static/usage/v8/fab/safe-area/demo.html b/static/usage/v8/fab/safe-area/demo.html
new file mode 100644
index 00000000000..f96fb87ddad
--- /dev/null
+++ b/static/usage/v8/fab/safe-area/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/fab/safe-area/index.md b/static/usage/v8/fab/safe-area/index.md
new file mode 100644
index 00000000000..7b2d7ae5333
--- /dev/null
+++ b/static/usage/v8/fab/safe-area/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.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_global_css from './angular/global_css.md';
+
+
diff --git a/static/usage/v8/fab/safe-area/javascript.md b/static/usage/v8/fab/safe-area/javascript.md
new file mode 100644
index 00000000000..4585b8d545c
--- /dev/null
+++ b/static/usage/v8/fab/safe-area/javascript.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/safe-area/react/main_css.md b/static/usage/v8/fab/safe-area/react/main_css.md
new file mode 100644
index 00000000000..ecbcce54651
--- /dev/null
+++ b/static/usage/v8/fab/safe-area/react/main_css.md
@@ -0,0 +1,15 @@
+```css
+:root {
+ /**
+ * Setting the variables for DEMO purposes only.
+ * Values will be set automatically when building an iOS or Android app.
+ */
+ --ion-safe-area-top: 20px;
+ --ion-safe-area-bottom: 20px;
+}
+
+ion-fab {
+ margin-top: var(--ion-safe-area-top, 0);
+ margin-bottom: var(--ion-safe-area-bottom, 0);
+}
+```
diff --git a/static/usage/v8/fab/safe-area/react/main_tsx.md b/static/usage/v8/fab/safe-area/react/main_tsx.md
new file mode 100644
index 00000000000..d5a790048e7
--- /dev/null
+++ b/static/usage/v8/fab/safe-area/react/main_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonIcon } from '@ionic/react';
+import { add } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/fab/safe-area/vue.md b/static/usage/v8/fab/safe-area/vue.md
new file mode 100644
index 00000000000..1127a3128db
--- /dev/null
+++ b/static/usage/v8/fab/safe-area/vue.md
@@ -0,0 +1,44 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/theming/colors/angular.md b/static/usage/v8/fab/theming/colors/angular.md
new file mode 100644
index 00000000000..66d4db84a0f
--- /dev/null
+++ b/static/usage/v8/fab/theming/colors/angular.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/theming/colors/demo.html b/static/usage/v8/fab/theming/colors/demo.html
new file mode 100644
index 00000000000..a1067ec15ab
--- /dev/null
+++ b/static/usage/v8/fab/theming/colors/demo.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/fab/theming/colors/index.md b/static/usage/v8/fab/theming/colors/index.md
new file mode 100644
index 00000000000..7626071a8a7
--- /dev/null
+++ b/static/usage/v8/fab/theming/colors/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/fab/theming/colors/javascript.md b/static/usage/v8/fab/theming/colors/javascript.md
new file mode 100644
index 00000000000..66d4db84a0f
--- /dev/null
+++ b/static/usage/v8/fab/theming/colors/javascript.md
@@ -0,0 +1,33 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/theming/colors/react.md b/static/usage/v8/fab/theming/colors/react.md
new file mode 100644
index 00000000000..c600aaca898
--- /dev/null
+++ b/static/usage/v8/fab/theming/colors/react.md
@@ -0,0 +1,42 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/fab/theming/colors/vue.md b/static/usage/v8/fab/theming/colors/vue.md
new file mode 100644
index 00000000000..f37cb9707b3
--- /dev/null
+++ b/static/usage/v8/fab/theming/colors/vue.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_css.md b/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..ce1d9d06816
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+ion-fab-button {
+ --background: #b7f399;
+ --background-activated: #87d361;
+ --background-hover: #a3e681;
+ --border-radius: 15px;
+ --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+ --color: black;
+}
+```
diff --git a/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_html.md b/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..4db1e796e3a
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_html.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/theming/css-custom-properties/demo.html b/static/usage/v8/fab/theming/css-custom-properties/demo.html
new file mode 100644
index 00000000000..be9e77c21d3
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-custom-properties/demo.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/fab/theming/css-custom-properties/index.md b/static/usage/v8/fab/theming/css-custom-properties/index.md
new file mode 100644
index 00000000000..bcf87e5c4a5
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-custom-properties/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/fab/theming/css-custom-properties/javascript.md b/static/usage/v8/fab/theming/css-custom-properties/javascript.md
new file mode 100644
index 00000000000..55df4e255bd
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-custom-properties/javascript.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/theming/css-custom-properties/react/main_css.md b/static/usage/v8/fab/theming/css-custom-properties/react/main_css.md
new file mode 100644
index 00000000000..ce1d9d06816
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-custom-properties/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+ion-fab-button {
+ --background: #b7f399;
+ --background-activated: #87d361;
+ --background-hover: #a3e681;
+ --border-radius: 15px;
+ --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+ --color: black;
+}
+```
diff --git a/static/usage/v8/fab/theming/css-custom-properties/react/main_tsx.md b/static/usage/v8/fab/theming/css-custom-properties/react/main_tsx.md
new file mode 100644
index 00000000000..8a1371c77ec
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-custom-properties/react/main_tsx.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { add, colorPalette, document, globe } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/fab/theming/css-custom-properties/vue.md b/static/usage/v8/fab/theming/css-custom-properties/vue.md
new file mode 100644
index 00000000000..00d3b6c87f8
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-custom-properties/vue.md
@@ -0,0 +1,44 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..4bb8b96988c
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,16 @@
+```css
+ion-fab-button::part(native) {
+ background-color: #b7f399;
+ border-radius: 15px;
+ box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+ color: black;
+}
+
+ion-fab-button::part(native):hover::after {
+ background-color: #a3e681;
+}
+
+ion-fab-button::part(native):active::after {
+ background-color: #87d361;
+}
+```
diff --git a/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..4db1e796e3a
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/theming/css-shadow-parts/demo.html b/static/usage/v8/fab/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..97e321a6ce5
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-shadow-parts/demo.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+ Fab
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/fab/theming/css-shadow-parts/index.md b/static/usage/v8/fab/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..1a300ff6230
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-shadow-parts/index.md
@@ -0,0 +1,32 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/fab/theming/css-shadow-parts/javascript.md b/static/usage/v8/fab/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..19c1441fe2f
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,35 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/fab/theming/css-shadow-parts/react/main_css.md b/static/usage/v8/fab/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..4bb8b96988c
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,16 @@
+```css
+ion-fab-button::part(native) {
+ background-color: #b7f399;
+ border-radius: 15px;
+ box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+ color: black;
+}
+
+ion-fab-button::part(native):hover::after {
+ background-color: #a3e681;
+}
+
+ion-fab-button::part(native):active::after {
+ background-color: #87d361;
+}
+```
diff --git a/static/usage/v8/fab/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v8/fab/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..8a1371c77ec
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react';
+import { add, colorPalette, document, globe } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/fab/theming/css-shadow-parts/vue.md b/static/usage/v8/fab/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..aee0d929a06
--- /dev/null
+++ b/static/usage/v8/fab/theming/css-shadow-parts/vue.md
@@ -0,0 +1,50 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/footer/basic/angular.md b/static/usage/v8/footer/basic/angular.md
new file mode 100644
index 00000000000..b0506781582
--- /dev/null
+++ b/static/usage/v8/footer/basic/angular.md
@@ -0,0 +1,10 @@
+```html
+
+ Content
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v8/footer/basic/demo.html b/static/usage/v8/footer/basic/demo.html
new file mode 100644
index 00000000000..055cb5622d8
--- /dev/null
+++ b/static/usage/v8/footer/basic/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+ Footer
+
+
+
+
+
+
+
+
+
+ Content
+
+
+
+ Footer
+
+
+
+
+
diff --git a/static/usage/v8/footer/basic/index.md b/static/usage/v8/footer/basic/index.md
new file mode 100644
index 00000000000..618e0377617
--- /dev/null
+++ b/static/usage/v8/footer/basic/index.md
@@ -0,0 +1,14 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/footer/basic/javascript.md b/static/usage/v8/footer/basic/javascript.md
new file mode 100644
index 00000000000..b0506781582
--- /dev/null
+++ b/static/usage/v8/footer/basic/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+ Content
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v8/footer/basic/react.md b/static/usage/v8/footer/basic/react.md
new file mode 100644
index 00000000000..6d7119f0f3f
--- /dev/null
+++ b/static/usage/v8/footer/basic/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Content
+
+
+
+ Footer
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/footer/basic/vue.md b/static/usage/v8/footer/basic/vue.md
new file mode 100644
index 00000000000..ed20057150d
--- /dev/null
+++ b/static/usage/v8/footer/basic/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+ Content
+
+
+
+ Footer
+
+
+
+
+
+```
diff --git a/static/usage/v8/footer/custom-scroll-target/angular/example_component_css.md b/static/usage/v8/footer/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/v8/footer/custom-scroll-target/angular/example_component_css.md
@@ -0,0 +1,11 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v8/footer/custom-scroll-target/angular/example_component_html.md b/static/usage/v8/footer/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..a0429f5e23b
--- /dev/null
+++ b/static/usage/v8/footer/custom-scroll-target/angular/example_component_html.md
@@ -0,0 +1,69 @@
+```html
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+ while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100
+ teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to
+ reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v8/footer/custom-scroll-target/demo.html b/static/usage/v8/footer/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..fc375dedf26
--- /dev/null
+++ b/static/usage/v8/footer/custom-scroll-target/demo.html
@@ -0,0 +1,98 @@
+
+
+
+
+
+ Footer
+
+
+
+
+
+
+
+
+
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies
+ on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have
+ two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+ have a spotted pattern similar to that of a leopard. Because of the combination of these features, some
+ people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes
+ from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants,
+ or suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+ gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout
+ with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a
+ flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it
+ surfaces.
+
+
+
+
+
+ Footer
+
+
+
+
+
diff --git a/static/usage/v8/footer/custom-scroll-target/index.md b/static/usage/v8/footer/custom-scroll-target/index.md
new file mode 100644
index 00000000000..77353e8b24c
--- /dev/null
+++ b/static/usage/v8/footer/custom-scroll-target/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/footer/custom-scroll-target/javascript.md b/static/usage/v8/footer/custom-scroll-target/javascript.md
new file mode 100644
index 00000000000..411ccb1df59
--- /dev/null
+++ b/static/usage/v8/footer/custom-scroll-target/javascript.md
@@ -0,0 +1,81 @@
+```html
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+ while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100
+ teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to
+ reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
+ Footer
+
+
+
+
+```
diff --git a/static/usage/v8/footer/custom-scroll-target/react/main_css.md b/static/usage/v8/footer/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..4db169a0e16
--- /dev/null
+++ b/static/usage/v8/footer/custom-scroll-target/react/main_css.md
@@ -0,0 +1,11 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v8/footer/custom-scroll-target/react/main_tsx.md b/static/usage/v8/footer/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..9066d4c4a91
--- /dev/null
+++ b/static/usage/v8/footer/custom-scroll-target/react/main_tsx.md
@@ -0,0 +1,83 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies
+ on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have
+ two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+ have a spotted pattern similar to that of a leopard. Because of the combination of these features, some
+ people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes
+ from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants,
+ or suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+ gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout
+ with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a
+ flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it
+ surfaces.
+
+
+
+
+
+ Footer
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/footer/custom-scroll-target/vue.md b/static/usage/v8/footer/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..b85998db4cb
--- /dev/null
+++ b/static/usage/v8/footer/custom-scroll-target/vue.md
@@ -0,0 +1,92 @@
+```html
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+ while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+ the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+ to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
+ Footer
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/footer/fade/angular.md b/static/usage/v8/footer/fade/angular.md
new file mode 100644
index 00000000000..f600e4511df
--- /dev/null
+++ b/static/usage/v8/footer/fade/angular.md
@@ -0,0 +1,67 @@
+```html
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+ the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+ sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+ swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+ and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+ and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+ pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v8/footer/fade/demo.html b/static/usage/v8/footer/fade/demo.html
new file mode 100644
index 00000000000..116b99dcfff
--- /dev/null
+++ b/static/usage/v8/footer/fade/demo.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+ Footer
+
+
+
+
+
+
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+ called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+ opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+ Footer
+
+
+
+
+
diff --git a/static/usage/v8/footer/fade/index.md b/static/usage/v8/footer/fade/index.md
new file mode 100644
index 00000000000..447e7df0714
--- /dev/null
+++ b/static/usage/v8/footer/fade/index.md
@@ -0,0 +1,15 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/footer/fade/javascript.md b/static/usage/v8/footer/fade/javascript.md
new file mode 100644
index 00000000000..f600e4511df
--- /dev/null
+++ b/static/usage/v8/footer/fade/javascript.md
@@ -0,0 +1,67 @@
+```html
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+ the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+ sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+ swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+ and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+ and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+ pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v8/footer/fade/react.md b/static/usage/v8/footer/fade/react.md
new file mode 100644
index 00000000000..d7142f57ecd
--- /dev/null
+++ b/static/usage/v8/footer/fade/react.md
@@ -0,0 +1,77 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+ called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+ opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+ Footer
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/footer/fade/vue.md b/static/usage/v8/footer/fade/vue.md
new file mode 100644
index 00000000000..757e78f59da
--- /dev/null
+++ b/static/usage/v8/footer/fade/vue.md
@@ -0,0 +1,78 @@
+```html
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+ while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100
+ teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to
+ reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+ Footer
+
+
+
+
+
+```
diff --git a/static/usage/v8/footer/no-border/angular.md b/static/usage/v8/footer/no-border/angular.md
new file mode 100644
index 00000000000..6b31b329d96
--- /dev/null
+++ b/static/usage/v8/footer/no-border/angular.md
@@ -0,0 +1,10 @@
+```html
+
+ Content
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v8/footer/no-border/demo.html b/static/usage/v8/footer/no-border/demo.html
new file mode 100644
index 00000000000..37b67905f89
--- /dev/null
+++ b/static/usage/v8/footer/no-border/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+ Footer
+
+
+
+
+
+
+
+
+
+ Content
+
+
+
+ Footer
+
+
+
+
+
diff --git a/static/usage/v8/footer/no-border/index.md b/static/usage/v8/footer/no-border/index.md
new file mode 100644
index 00000000000..1a564d955fe
--- /dev/null
+++ b/static/usage/v8/footer/no-border/index.md
@@ -0,0 +1,14 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/footer/no-border/javascript.md b/static/usage/v8/footer/no-border/javascript.md
new file mode 100644
index 00000000000..6b31b329d96
--- /dev/null
+++ b/static/usage/v8/footer/no-border/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+ Content
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v8/footer/no-border/react.md b/static/usage/v8/footer/no-border/react.md
new file mode 100644
index 00000000000..2c58e513063
--- /dev/null
+++ b/static/usage/v8/footer/no-border/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Content
+
+
+
+ Footer
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/footer/no-border/vue.md b/static/usage/v8/footer/no-border/vue.md
new file mode 100644
index 00000000000..9a3eccff15a
--- /dev/null
+++ b/static/usage/v8/footer/no-border/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+ Content
+
+
+
+ Footer
+
+
+
+
+
+```
diff --git a/static/usage/v8/footer/translucent/angular.md b/static/usage/v8/footer/translucent/angular.md
new file mode 100644
index 00000000000..a58f761cc8c
--- /dev/null
+++ b/static/usage/v8/footer/translucent/angular.md
@@ -0,0 +1,67 @@
+```html
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+ the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+ sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+ swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+ and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+ and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+ pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v8/footer/translucent/demo.html b/static/usage/v8/footer/translucent/demo.html
new file mode 100644
index 00000000000..b50d39c8a7a
--- /dev/null
+++ b/static/usage/v8/footer/translucent/demo.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+ Footer
+
+
+
+
+
+
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+ called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+ opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+ Footer
+
+
+
+
+
diff --git a/static/usage/v8/footer/translucent/index.md b/static/usage/v8/footer/translucent/index.md
new file mode 100644
index 00000000000..9ae477d67f9
--- /dev/null
+++ b/static/usage/v8/footer/translucent/index.md
@@ -0,0 +1,15 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/footer/translucent/javascript.md b/static/usage/v8/footer/translucent/javascript.md
new file mode 100644
index 00000000000..bdff28e0dca
--- /dev/null
+++ b/static/usage/v8/footer/translucent/javascript.md
@@ -0,0 +1,67 @@
+```html
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+ the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+ sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+ swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+ and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+ and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+ pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+ Footer
+
+
+```
diff --git a/static/usage/v8/footer/translucent/react.md b/static/usage/v8/footer/translucent/react.md
new file mode 100644
index 00000000000..ab7ff2221e0
--- /dev/null
+++ b/static/usage/v8/footer/translucent/react.md
@@ -0,0 +1,77 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+ called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+ opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+ Footer
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/footer/translucent/vue.md b/static/usage/v8/footer/translucent/vue.md
new file mode 100644
index 00000000000..5d5a0e1497f
--- /dev/null
+++ b/static/usage/v8/footer/translucent/vue.md
@@ -0,0 +1,78 @@
+```html
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+ while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100
+ teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to
+ reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+ Footer
+
+
+
+
+
+```
diff --git a/static/usage/v8/gestures/basic/angular/example_component_css.md b/static/usage/v8/gestures/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..4532a98eac4
--- /dev/null
+++ b/static/usage/v8/gestures/basic/angular/example_component_css.md
@@ -0,0 +1,14 @@
+```css
+ion-card {
+ position: absolute;
+
+ left: 0;
+ right: 0;
+
+ user-select: none;
+}
+
+ion-card.active {
+ box-shadow: var(--ion-color-warning) 0px 4px 16px;
+}
+```
diff --git a/static/usage/v8/gestures/basic/angular/example_component_html.md b/static/usage/v8/gestures/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..e8a575523d6
--- /dev/null
+++ b/static/usage/v8/gestures/basic/angular/example_component_html.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Pan the Screen
+
+
+ Gesture information will display after interaction.
+
+
+```
diff --git a/static/usage/v8/gestures/basic/angular/example_component_ts.md b/static/usage/v8/gestures/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..33482eca38b
--- /dev/null
+++ b/static/usage/v8/gestures/basic/angular/example_component_ts.md
@@ -0,0 +1,50 @@
+```ts
+import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
+import type { GestureDetail } from '@ionic/angular';
+import { GestureController, IonCard } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {
+ @ViewChild(IonCard, { read: ElementRef }) card: ElementRef;
+ @ViewChild('debug', { read: ElementRef }) debug: ElementRef;
+
+ isCardActive = false;
+
+ constructor(private el: ElementRef, private gestureCtrl: GestureController, private cdRef: ChangeDetectorRef) {}
+
+ ngAfterViewInit() {
+ const gesture = this.gestureCtrl.create({
+ el: this.el.nativeElement.closest('ion-content'),
+ onStart: () => this.onStart(),
+ onMove: (detail) => this.onMove(detail),
+ onEnd: () => this.onEnd(),
+ gestureName: 'example',
+ });
+
+ gesture.enable();
+ }
+
+ private onStart() {
+ this.isCardActive = true;
+ this.cdRef.detectChanges();
+ }
+
+ private onMove(detail: GestureDetail) {
+ const { type, currentX, deltaX, velocityX } = detail;
+ this.debug.nativeElement.innerHTML = `
+ Type: ${type}
+ Current X: ${currentX}
+ Delta X: ${deltaX}
+ Velocity X: ${velocityX}`;
+ }
+
+ private onEnd() {
+ this.isCardActive = false;
+ this.cdRef.detectChanges();
+ }
+}
+```
diff --git a/static/usage/v8/gestures/basic/demo.html b/static/usage/v8/gestures/basic/demo.html
new file mode 100644
index 00000000000..f94dc92540b
--- /dev/null
+++ b/static/usage/v8/gestures/basic/demo.html
@@ -0,0 +1,81 @@
+
+
+
+
+
+ Gesture
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Pan the Screen
+
+
+ Gesture information will display after interaction.
+
+
+
+
+
+
diff --git a/static/usage/v8/gestures/basic/index.md b/static/usage/v8/gestures/basic/index.md
new file mode 100644
index 00000000000..1fb95609d25
--- /dev/null
+++ b/static/usage/v8/gestures/basic/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_css from './react/main_css.md';
+import react_main_tsx from './react/main_tsx.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';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/gestures/basic/javascript.md b/static/usage/v8/gestures/basic/javascript.md
new file mode 100644
index 00000000000..71153daeec5
--- /dev/null
+++ b/static/usage/v8/gestures/basic/javascript.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+
+ Pan the Screen
+
+
+ Gesture information will display after interaction.
+
+
+
+
+```
diff --git a/static/usage/v8/gestures/basic/react/main_css.md b/static/usage/v8/gestures/basic/react/main_css.md
new file mode 100644
index 00000000000..4532a98eac4
--- /dev/null
+++ b/static/usage/v8/gestures/basic/react/main_css.md
@@ -0,0 +1,14 @@
+```css
+ion-card {
+ position: absolute;
+
+ left: 0;
+ right: 0;
+
+ user-select: none;
+}
+
+ion-card.active {
+ box-shadow: var(--ion-color-warning) 0px 4px 16px;
+}
+```
diff --git a/static/usage/v8/gestures/basic/react/main_tsx.md b/static/usage/v8/gestures/basic/react/main_tsx.md
new file mode 100644
index 00000000000..2004c3b9066
--- /dev/null
+++ b/static/usage/v8/gestures/basic/react/main_tsx.md
@@ -0,0 +1,62 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonCard, IonCardHeader, IonCardSubtitle, IonCardContent, createGesture } from '@ionic/react';
+import type { GestureDetail } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ const card = useRef(null);
+ const debug = useRef(null);
+
+ useEffect(() => {
+ if (card.current) {
+ const target = card.current.closest('ion-content');
+
+ if (target) {
+ const gesture = createGesture({
+ el: target,
+ onStart: () => onStart(),
+ onMove: (detail) => onMove(detail),
+ onEnd: () => onEnd(),
+ gestureName: 'example',
+ });
+
+ gesture.enable();
+ }
+ }
+ }, [card]);
+
+ const onStart = () => {
+ card.current?.classList.add('active');
+ };
+
+ const onMove = (detail: GestureDetail) => {
+ const { type, currentX, deltaX, velocityX } = detail;
+
+ if (debug.current) {
+ debug.current.innerHTML = `
+ Type: ${type}
+ Current X: ${currentX}
+ Delta X: ${deltaX}
+ Velocity X: ${velocityX}`;
+ }
+ };
+
+ const onEnd = () => {
+ card.current?.classList.remove('active');
+ };
+
+ return (
+
+
+ Pan the Screen
+
+
+ Gesture information will display after interaction.
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/gestures/basic/vue.md b/static/usage/v8/gestures/basic/vue.md
new file mode 100644
index 00000000000..2526d8bff15
--- /dev/null
+++ b/static/usage/v8/gestures/basic/vue.md
@@ -0,0 +1,82 @@
+```html
+
+
+
+
+ Pan the Screen
+
+
+ Gesture information will display after interaction.
+
+
+
+
+
+```
diff --git a/static/usage/v8/gestures/double-click/angular/example_component_css.md b/static/usage/v8/gestures/double-click/angular/example_component_css.md
new file mode 100644
index 00000000000..043d289ab58
--- /dev/null
+++ b/static/usage/v8/gestures/double-click/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-card {
+ transform: translateX(0);
+ user-select: none;
+}
+```
diff --git a/static/usage/v8/gestures/double-click/angular/example_component_html.md b/static/usage/v8/gestures/double-click/angular/example_component_html.md
new file mode 100644
index 00000000000..b0b24e75d67
--- /dev/null
+++ b/static/usage/v8/gestures/double-click/angular/example_component_html.md
@@ -0,0 +1,5 @@
+```html
+
+ Double click me to move the card.
+
+```
diff --git a/static/usage/v8/gestures/double-click/angular/example_component_ts.md b/static/usage/v8/gestures/double-click/angular/example_component_ts.md
new file mode 100644
index 00000000000..08159621553
--- /dev/null
+++ b/static/usage/v8/gestures/double-click/angular/example_component_ts.md
@@ -0,0 +1,51 @@
+```ts
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { GestureController, IonCard } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['./example.component.css'],
+})
+export class ExampleComponent {
+ @ViewChild('card', { read: ElementRef }) card: ElementRef;
+
+ private currentOffset: number = 0;
+ private lastOnStart: number = 0;
+ private DOUBLE_CLICK_THRESHOLD: number = 500;
+
+ constructor(private el: ElementRef, private gestureCtrl: GestureController) {}
+
+ ngAfterViewInit() {
+ const gesture = this.gestureCtrl.create({
+ el: this.card.nativeElement,
+ threshold: 0,
+ onStart: () => this.onStart(),
+ gestureName: 'double-click',
+ });
+
+ gesture.enable();
+ }
+
+ private onStart() {
+ const now = Date.now();
+
+ if (Math.abs(now - this.lastOnStart) <= this.DOUBLE_CLICK_THRESHOLD) {
+ this.card.nativeElement.style.setProperty('transform', this.getNewTransform());
+ this.lastOnStart = 0;
+ } else {
+ this.lastOnStart = now;
+ }
+ }
+
+ private getNewTransform() {
+ if (this.currentOffset >= 100) {
+ this.currentOffset = 0;
+ } else {
+ this.currentOffset += 20;
+ }
+
+ return `translateX(${this.currentOffset}px)`;
+ }
+}
+```
diff --git a/static/usage/v8/gestures/double-click/demo.html b/static/usage/v8/gestures/double-click/demo.html
new file mode 100644
index 00000000000..1283c508208
--- /dev/null
+++ b/static/usage/v8/gestures/double-click/demo.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+ Double-Click Gestures
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Double click me to move the card.
+
+
+
+
diff --git a/static/usage/v8/gestures/double-click/index.md b/static/usage/v8/gestures/double-click/index.md
new file mode 100644
index 00000000000..09ae8ff4660
--- /dev/null
+++ b/static/usage/v8/gestures/double-click/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.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';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/gestures/double-click/javascript.md b/static/usage/v8/gestures/double-click/javascript.md
new file mode 100644
index 00000000000..a45b7255bbe
--- /dev/null
+++ b/static/usage/v8/gestures/double-click/javascript.md
@@ -0,0 +1,49 @@
+```html
+
+ Double click me to move the card.
+
+
+
+
+
+```
diff --git a/static/usage/v8/gestures/double-click/react/main_css.md b/static/usage/v8/gestures/double-click/react/main_css.md
new file mode 100644
index 00000000000..043d289ab58
--- /dev/null
+++ b/static/usage/v8/gestures/double-click/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-card {
+ transform: translateX(0);
+ user-select: none;
+}
+```
diff --git a/static/usage/v8/gestures/double-click/react/main_tsx.md b/static/usage/v8/gestures/double-click/react/main_tsx.md
new file mode 100644
index 00000000000..4e9e90cf243
--- /dev/null
+++ b/static/usage/v8/gestures/double-click/react/main_tsx.md
@@ -0,0 +1,57 @@
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { IonCard, IonCardContent, createGesture } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ const DOUBLE_CLICK_THRESHOLD = 500;
+ const card = useRef(null);
+
+ let lastOnStart = 0;
+ let currentOffset = 0;
+
+ const getNewTransform = () => {
+ if (currentOffset >= 100) {
+ currentOffset = 0;
+ } else {
+ currentOffset += 20;
+ }
+
+ return `translateX(${currentOffset}px)`;
+ };
+
+ const onStart = () => {
+ const now = Date.now();
+
+ if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) {
+ if (card.current) {
+ card.current.style.setProperty('transform', getNewTransform());
+ lastOnStart = 0;
+ }
+ } else {
+ lastOnStart = now;
+ }
+ };
+
+ useEffect(() => {
+ if (card.current) {
+ const gesture = createGesture({
+ el: card.current,
+ threshold: 0,
+ onStart,
+ gestureName: 'double-click',
+ });
+
+ gesture.enable();
+ }
+ });
+
+ return (
+
+ Double click me to move the card.
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/gestures/double-click/vue.md b/static/usage/v8/gestures/double-click/vue.md
new file mode 100644
index 00000000000..aebfad5a830
--- /dev/null
+++ b/static/usage/v8/gestures/double-click/vue.md
@@ -0,0 +1,69 @@
+```html
+
+
+ Double click me to move the card.
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/basic/angular/example_component_css.md b/static/usage/v8/grid/basic/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/basic/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/basic/angular/example_component_html.md b/static/usage/v8/grid/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..daa37c1e31f
--- /dev/null
+++ b/static/usage/v8/grid/basic/angular/example_component_html.md
@@ -0,0 +1,37 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+ 10
+ 11
+ 12
+
+
+```
diff --git a/static/usage/v8/grid/basic/demo.html b/static/usage/v8/grid/basic/demo.html
new file mode 100644
index 00000000000..0a8e133b564
--- /dev/null
+++ b/static/usage/v8/grid/basic/demo.html
@@ -0,0 +1,75 @@
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+ 10
+ 11
+ 12
+
+
+
+
+
+
+
diff --git a/static/usage/v8/grid/basic/index.md b/static/usage/v8/grid/basic/index.md
new file mode 100644
index 00000000000..d438994ef44
--- /dev/null
+++ b/static/usage/v8/grid/basic/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/grid/basic/javascript.md b/static/usage/v8/grid/basic/javascript.md
new file mode 100644
index 00000000000..53e0dd4f8c9
--- /dev/null
+++ b/static/usage/v8/grid/basic/javascript.md
@@ -0,0 +1,46 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+ 10
+ 11
+ 12
+
+
+
+
+```
diff --git a/static/usage/v8/grid/basic/react/main_css.md b/static/usage/v8/grid/basic/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/basic/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/basic/react/main_tsx.md b/static/usage/v8/grid/basic/react/main_tsx.md
new file mode 100644
index 00000000000..9fb9652e4ce
--- /dev/null
+++ b/static/usage/v8/grid/basic/react/main_tsx.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+ 10
+ 11
+ 12
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/grid/basic/vue.md b/static/usage/v8/grid/basic/vue.md
new file mode 100644
index 00000000000..d693fc8510d
--- /dev/null
+++ b/static/usage/v8/grid/basic/vue.md
@@ -0,0 +1,57 @@
+```html
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+ 10
+ 11
+ 12
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/customizing/column-number/angular/example_component_css.md b/static/usage/v8/grid/customizing/column-number/angular/example_component_css.md
new file mode 100644
index 00000000000..ceadac1c05c
--- /dev/null
+++ b/static/usage/v8/grid/customizing/column-number/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+ion-grid {
+ --ion-grid-columns: 6;
+}
+
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/customizing/column-number/angular/example_component_html.md b/static/usage/v8/grid/customizing/column-number/angular/example_component_html.md
new file mode 100644
index 00000000000..6e9b744b161
--- /dev/null
+++ b/static/usage/v8/grid/customizing/column-number/angular/example_component_html.md
@@ -0,0 +1,11 @@
+```html
+Total number of columns is set to 6
, column size
is set to 1
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+```
diff --git a/static/usage/v8/grid/customizing/column-number/demo.html b/static/usage/v8/grid/customizing/column-number/demo.html
new file mode 100644
index 00000000000..17dfe180ed5
--- /dev/null
+++ b/static/usage/v8/grid/customizing/column-number/demo.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ Total number of columns is set to 6
, column size
is set to 1
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
+
+
+
diff --git a/static/usage/v8/grid/customizing/column-number/index.md b/static/usage/v8/grid/customizing/column-number/index.md
new file mode 100644
index 00000000000..9e9066c2927
--- /dev/null
+++ b/static/usage/v8/grid/customizing/column-number/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/grid/customizing/column-number/javascript.md b/static/usage/v8/grid/customizing/column-number/javascript.md
new file mode 100644
index 00000000000..5c4c6edf166
--- /dev/null
+++ b/static/usage/v8/grid/customizing/column-number/javascript.md
@@ -0,0 +1,24 @@
+```html
+Total number of columns is set to 6
, column size
is set to 1
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
+```
diff --git a/static/usage/v8/grid/customizing/column-number/react/main_css.md b/static/usage/v8/grid/customizing/column-number/react/main_css.md
new file mode 100644
index 00000000000..ceadac1c05c
--- /dev/null
+++ b/static/usage/v8/grid/customizing/column-number/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+ion-grid {
+ --ion-grid-columns: 6;
+}
+
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/customizing/column-number/react/main_tsx.md b/static/usage/v8/grid/customizing/column-number/react/main_tsx.md
new file mode 100644
index 00000000000..23f618b020a
--- /dev/null
+++ b/static/usage/v8/grid/customizing/column-number/react/main_tsx.md
@@ -0,0 +1,25 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+ Total number of columns is set to 6
, column size
is set to 1
+
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/grid/customizing/column-number/vue.md b/static/usage/v8/grid/customizing/column-number/vue.md
new file mode 100644
index 00000000000..1af3143593f
--- /dev/null
+++ b/static/usage/v8/grid/customizing/column-number/vue.md
@@ -0,0 +1,35 @@
+```html
+
+ Total number of columns is set to 6
, column size
is set to 1
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/customizing/padding/angular/example_component_css.md b/static/usage/v8/grid/customizing/padding/angular/example_component_css.md
new file mode 100644
index 00000000000..c7d165d3b75
--- /dev/null
+++ b/static/usage/v8/grid/customizing/padding/angular/example_component_css.md
@@ -0,0 +1,26 @@
+```css
+ion-grid {
+ --ion-grid-padding: 20px;
+
+ --ion-grid-padding-xs: 20px;
+ --ion-grid-padding-sm: 20px;
+ --ion-grid-padding-md: 20px;
+ --ion-grid-padding-lg: 20px;
+ --ion-grid-padding-xl: 20px;
+
+ --ion-grid-column-padding: 30px;
+
+ --ion-grid-column-padding-xs: 30px;
+ --ion-grid-column-padding-sm: 30px;
+ --ion-grid-column-padding-md: 30px;
+ --ion-grid-column-padding-lg: 30px;
+ --ion-grid-column-padding-xl: 30px;
+}
+
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/customizing/padding/angular/example_component_html.md b/static/usage/v8/grid/customizing/padding/angular/example_component_html.md
new file mode 100644
index 00000000000..74811052b30
--- /dev/null
+++ b/static/usage/v8/grid/customizing/padding/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+```
diff --git a/static/usage/v8/grid/customizing/padding/demo.html b/static/usage/v8/grid/customizing/padding/demo.html
new file mode 100644
index 00000000000..8e4215e27ba
--- /dev/null
+++ b/static/usage/v8/grid/customizing/padding/demo.html
@@ -0,0 +1,63 @@
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
diff --git a/static/usage/v8/grid/customizing/padding/index.md b/static/usage/v8/grid/customizing/padding/index.md
new file mode 100644
index 00000000000..817304bc595
--- /dev/null
+++ b/static/usage/v8/grid/customizing/padding/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/grid/customizing/padding/javascript.md b/static/usage/v8/grid/customizing/padding/javascript.md
new file mode 100644
index 00000000000..fea0d256a72
--- /dev/null
+++ b/static/usage/v8/grid/customizing/padding/javascript.md
@@ -0,0 +1,36 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+
+
+```
diff --git a/static/usage/v8/grid/customizing/padding/react/main_css.md b/static/usage/v8/grid/customizing/padding/react/main_css.md
new file mode 100644
index 00000000000..c7d165d3b75
--- /dev/null
+++ b/static/usage/v8/grid/customizing/padding/react/main_css.md
@@ -0,0 +1,26 @@
+```css
+ion-grid {
+ --ion-grid-padding: 20px;
+
+ --ion-grid-padding-xs: 20px;
+ --ion-grid-padding-sm: 20px;
+ --ion-grid-padding-md: 20px;
+ --ion-grid-padding-lg: 20px;
+ --ion-grid-padding-xl: 20px;
+
+ --ion-grid-column-padding: 30px;
+
+ --ion-grid-column-padding-xs: 30px;
+ --ion-grid-column-padding-sm: 30px;
+ --ion-grid-column-padding-md: 30px;
+ --ion-grid-column-padding-lg: 30px;
+ --ion-grid-column-padding-xl: 30px;
+}
+
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/customizing/padding/react/main_tsx.md b/static/usage/v8/grid/customizing/padding/react/main_tsx.md
new file mode 100644
index 00000000000..4faf0a3cac1
--- /dev/null
+++ b/static/usage/v8/grid/customizing/padding/react/main_tsx.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ 1
+ 2
+ 3
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/grid/customizing/padding/vue.md b/static/usage/v8/grid/customizing/padding/vue.md
new file mode 100644
index 00000000000..343511e231d
--- /dev/null
+++ b/static/usage/v8/grid/customizing/padding/vue.md
@@ -0,0 +1,47 @@
+```html
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/customizing/width/angular/example_component_css.md b/static/usage/v8/grid/customizing/width/angular/example_component_css.md
new file mode 100644
index 00000000000..bbb8f04519a
--- /dev/null
+++ b/static/usage/v8/grid/customizing/width/angular/example_component_css.md
@@ -0,0 +1,18 @@
+```css
+ion-grid {
+ --ion-grid-width: 50%;
+
+ --ion-grid-width-xs: 50%;
+ --ion-grid-width-sm: 288px;
+ --ion-grid-width-md: 384px;
+ --ion-grid-width-lg: 480px;
+ --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/customizing/width/angular/example_component_html.md b/static/usage/v8/grid/customizing/width/angular/example_component_html.md
new file mode 100644
index 00000000000..0688212c247
--- /dev/null
+++ b/static/usage/v8/grid/customizing/width/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+```
diff --git a/static/usage/v8/grid/customizing/width/demo.html b/static/usage/v8/grid/customizing/width/demo.html
new file mode 100644
index 00000000000..2d8a8149062
--- /dev/null
+++ b/static/usage/v8/grid/customizing/width/demo.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
diff --git a/static/usage/v8/grid/customizing/width/index.md b/static/usage/v8/grid/customizing/width/index.md
new file mode 100644
index 00000000000..b2c7742a7d6
--- /dev/null
+++ b/static/usage/v8/grid/customizing/width/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/grid/customizing/width/javascript.md b/static/usage/v8/grid/customizing/width/javascript.md
new file mode 100644
index 00000000000..2ff36295b70
--- /dev/null
+++ b/static/usage/v8/grid/customizing/width/javascript.md
@@ -0,0 +1,28 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+
+
+```
diff --git a/static/usage/v8/grid/customizing/width/react/main_css.md b/static/usage/v8/grid/customizing/width/react/main_css.md
new file mode 100644
index 00000000000..bbb8f04519a
--- /dev/null
+++ b/static/usage/v8/grid/customizing/width/react/main_css.md
@@ -0,0 +1,18 @@
+```css
+ion-grid {
+ --ion-grid-width: 50%;
+
+ --ion-grid-width-xs: 50%;
+ --ion-grid-width-sm: 288px;
+ --ion-grid-width-md: 384px;
+ --ion-grid-width-lg: 480px;
+ --ion-grid-width-xl: 570px;
+}
+
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/customizing/width/react/main_tsx.md b/static/usage/v8/grid/customizing/width/react/main_tsx.md
new file mode 100644
index 00000000000..73ccebd0606
--- /dev/null
+++ b/static/usage/v8/grid/customizing/width/react/main_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ 1
+ 2
+ 3
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/grid/customizing/width/vue.md b/static/usage/v8/grid/customizing/width/vue.md
new file mode 100644
index 00000000000..40b0002e822
--- /dev/null
+++ b/static/usage/v8/grid/customizing/width/vue.md
@@ -0,0 +1,39 @@
+```html
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/fixed/angular/example_component_css.md b/static/usage/v8/grid/fixed/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/fixed/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/fixed/angular/example_component_html.md b/static/usage/v8/grid/fixed/angular/example_component_html.md
new file mode 100644
index 00000000000..0688212c247
--- /dev/null
+++ b/static/usage/v8/grid/fixed/angular/example_component_html.md
@@ -0,0 +1,9 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+```
diff --git a/static/usage/v8/grid/fixed/demo.html b/static/usage/v8/grid/fixed/demo.html
new file mode 100644
index 00000000000..719b5cb442e
--- /dev/null
+++ b/static/usage/v8/grid/fixed/demo.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
diff --git a/static/usage/v8/grid/fixed/index.md b/static/usage/v8/grid/fixed/index.md
new file mode 100644
index 00000000000..92b6716bc89
--- /dev/null
+++ b/static/usage/v8/grid/fixed/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/grid/fixed/javascript.md b/static/usage/v8/grid/fixed/javascript.md
new file mode 100644
index 00000000000..5fa9672a8ab
--- /dev/null
+++ b/static/usage/v8/grid/fixed/javascript.md
@@ -0,0 +1,18 @@
+```html
+
+
+ 1
+ 2
+ 3
+
+
+
+
+```
diff --git a/static/usage/v8/grid/fixed/react/main_css.md b/static/usage/v8/grid/fixed/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/fixed/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/fixed/react/main_tsx.md b/static/usage/v8/grid/fixed/react/main_tsx.md
new file mode 100644
index 00000000000..73ccebd0606
--- /dev/null
+++ b/static/usage/v8/grid/fixed/react/main_tsx.md
@@ -0,0 +1,19 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+ 1
+ 2
+ 3
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/grid/fixed/vue.md b/static/usage/v8/grid/fixed/vue.md
new file mode 100644
index 00000000000..fbaa7118bbd
--- /dev/null
+++ b/static/usage/v8/grid/fixed/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/horizontal-alignment/angular/example_component_css.md b/static/usage/v8/grid/horizontal-alignment/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/horizontal-alignment/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/horizontal-alignment/angular/example_component_html.md b/static/usage/v8/grid/horizontal-alignment/angular/example_component_html.md
new file mode 100644
index 00000000000..1f7300dba04
--- /dev/null
+++ b/static/usage/v8/grid/horizontal-alignment/angular/example_component_html.md
@@ -0,0 +1,41 @@
+```html
+Columns aligned at the start
+
+
+ 1
+ 2
+
+
+
+Columns aligned at the center
+
+
+ 1
+ 2
+
+
+
+Columns aligned at the end
+
+
+ 1
+ 2
+
+
+
+Columns aligned with space around
+
+
+ 1
+ 2
+
+
+
+Columns aligned with space between
+
+
+ 1
+ 2
+
+
+```
diff --git a/static/usage/v8/grid/horizontal-alignment/demo.html b/static/usage/v8/grid/horizontal-alignment/demo.html
new file mode 100644
index 00000000000..520000cd028
--- /dev/null
+++ b/static/usage/v8/grid/horizontal-alignment/demo.html
@@ -0,0 +1,79 @@
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ Columns aligned at the start
+
+
+ 1
+ 2
+
+
+
+ Columns aligned at the center
+
+
+ 1
+ 2
+
+
+
+ Columns aligned at the end
+
+
+ 1
+ 2
+
+
+
+ Columns aligned with space around
+
+
+ 1
+ 2
+
+
+
+ Columns aligned with space between
+
+
+ 1
+ 2
+
+
+
+
+
+
+
diff --git a/static/usage/v8/grid/horizontal-alignment/index.md b/static/usage/v8/grid/horizontal-alignment/index.md
new file mode 100644
index 00000000000..6e2270521f7
--- /dev/null
+++ b/static/usage/v8/grid/horizontal-alignment/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/grid/horizontal-alignment/javascript.md b/static/usage/v8/grid/horizontal-alignment/javascript.md
new file mode 100644
index 00000000000..13c25523a4c
--- /dev/null
+++ b/static/usage/v8/grid/horizontal-alignment/javascript.md
@@ -0,0 +1,50 @@
+```html
+Columns aligned at the start
+
+
+ 1
+ 2
+
+
+
+Columns aligned at the center
+
+
+ 1
+ 2
+
+
+
+Columns aligned at the end
+
+
+ 1
+ 2
+
+
+
+Columns aligned with space around
+
+
+ 1
+ 2
+
+
+
+Columns aligned with space between
+
+
+ 1
+ 2
+
+
+
+
+```
diff --git a/static/usage/v8/grid/horizontal-alignment/react/main_css.md b/static/usage/v8/grid/horizontal-alignment/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/horizontal-alignment/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/horizontal-alignment/react/main_tsx.md b/static/usage/v8/grid/horizontal-alignment/react/main_tsx.md
new file mode 100644
index 00000000000..0ec66ddb95a
--- /dev/null
+++ b/static/usage/v8/grid/horizontal-alignment/react/main_tsx.md
@@ -0,0 +1,53 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Columns aligned at the start
+
+
+ 1
+ 2
+
+
+
+ Columns aligned at the center
+
+
+ 1
+ 2
+
+
+
+ Columns aligned at the end
+
+
+ 1
+ 2
+
+
+
+ Columns aligned with space around
+
+
+ 1
+ 2
+
+
+
+ Columns aligned with space between
+
+
+ 1
+ 2
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/grid/horizontal-alignment/vue.md b/static/usage/v8/grid/horizontal-alignment/vue.md
new file mode 100644
index 00000000000..689efada3ea
--- /dev/null
+++ b/static/usage/v8/grid/horizontal-alignment/vue.md
@@ -0,0 +1,61 @@
+```html
+
+ Columns aligned at the start
+
+
+ 1
+ 2
+
+
+
+ Columns aligned at the center
+
+
+ 1
+ 2
+
+
+
+ Columns aligned at the end
+
+
+ 1
+ 2
+
+
+
+ Columns aligned with space around
+
+
+ 1
+ 2
+
+
+
+ Columns aligned with space between
+
+
+ 1
+ 2
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/offset-responsive/angular/example_component_css.md b/static/usage/v8/grid/offset-responsive/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/offset-responsive/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/offset-responsive/angular/example_component_html.md b/static/usage/v8/grid/offset-responsive/angular/example_component_html.md
new file mode 100644
index 00000000000..09088adcd03
--- /dev/null
+++ b/static/usage/v8/grid/offset-responsive/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+No offset for xs breakpoint, offset 1st column for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+No offset for xs breakpoint, offset last 3 columns for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up
+
+
+ 1
+ 2
+
+
+```
diff --git a/static/usage/v8/grid/offset-responsive/demo.html b/static/usage/v8/grid/offset-responsive/demo.html
new file mode 100644
index 00000000000..0f8e1952288
--- /dev/null
+++ b/static/usage/v8/grid/offset-responsive/demo.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ No offset for xs breakpoint, offset 1st column for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+ No offset for xs breakpoint, offset last 3 columns for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up
+
+
+ 1
+ 2
+
+
+
+
+
+
+
diff --git a/static/usage/v8/grid/offset-responsive/index.md b/static/usage/v8/grid/offset-responsive/index.md
new file mode 100644
index 00000000000..0e0231f3ecd
--- /dev/null
+++ b/static/usage/v8/grid/offset-responsive/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/grid/offset-responsive/javascript.md b/static/usage/v8/grid/offset-responsive/javascript.md
new file mode 100644
index 00000000000..f380aa503c0
--- /dev/null
+++ b/static/usage/v8/grid/offset-responsive/javascript.md
@@ -0,0 +1,39 @@
+```html
+No offset for xs breakpoint, offset 1st column for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+No offset for xs breakpoint, offset last 3 columns for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up
+
+
+ 1
+ 2
+
+
+
+
+```
diff --git a/static/usage/v8/grid/offset-responsive/react/main_css.md b/static/usage/v8/grid/offset-responsive/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/offset-responsive/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/offset-responsive/react/main_tsx.md b/static/usage/v8/grid/offset-responsive/react/main_tsx.md
new file mode 100644
index 00000000000..8721fbfc523
--- /dev/null
+++ b/static/usage/v8/grid/offset-responsive/react/main_tsx.md
@@ -0,0 +1,46 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ No offset for xs breakpoint, offset 1st column for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+ No offset for xs breakpoint, offset last 3 columns for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up
+
+
+
+ 1
+
+
+ 2
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/grid/offset-responsive/vue.md b/static/usage/v8/grid/offset-responsive/vue.md
new file mode 100644
index 00000000000..ca540bee471
--- /dev/null
+++ b/static/usage/v8/grid/offset-responsive/vue.md
@@ -0,0 +1,50 @@
+```html
+
+ No offset for xs breakpoint, offset 1st column for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+ No offset for xs breakpoint, offset last 3 columns for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up
+
+
+ 1
+ 2
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/offset/angular/example_component_css.md b/static/usage/v8/grid/offset/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/offset/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/offset/angular/example_component_html.md b/static/usage/v8/grid/offset/angular/example_component_html.md
new file mode 100644
index 00000000000..66e044507a8
--- /dev/null
+++ b/static/usage/v8/grid/offset/angular/example_component_html.md
@@ -0,0 +1,29 @@
+```html
+Column 2 has offset
set to "3"
+
+
+ 1
+ 2
+ 3
+
+
+
+Column 5 has offset
set to "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+Column 1 has offset
set to "4"
+
+
+ 1
+ 2
+
+
+```
diff --git a/static/usage/v8/grid/offset/demo.html b/static/usage/v8/grid/offset/demo.html
new file mode 100644
index 00000000000..64576c5d1af
--- /dev/null
+++ b/static/usage/v8/grid/offset/demo.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ Column 2 has offset
set to "3"
+
+
+ 1
+ 2
+ 3
+
+
+
+ Column 5 has offset
set to "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+ Column 1 has offset
set to "4"
+
+
+ 1
+ 2
+
+
+
+
+
+
+
diff --git a/static/usage/v8/grid/offset/index.md b/static/usage/v8/grid/offset/index.md
new file mode 100644
index 00000000000..4cd5a0cb0d2
--- /dev/null
+++ b/static/usage/v8/grid/offset/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/grid/offset/javascript.md b/static/usage/v8/grid/offset/javascript.md
new file mode 100644
index 00000000000..dcb717dd8d2
--- /dev/null
+++ b/static/usage/v8/grid/offset/javascript.md
@@ -0,0 +1,38 @@
+```html
+Column 2 has offset
set to "3"
+
+
+ 1
+ 2
+ 3
+
+
+
+Column 5 has offset
set to "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+Column 1 has offset
set to "4"
+
+
+ 1
+ 2
+
+
+
+
+```
diff --git a/static/usage/v8/grid/offset/react/main_css.md b/static/usage/v8/grid/offset/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/offset/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/offset/react/main_tsx.md b/static/usage/v8/grid/offset/react/main_tsx.md
new file mode 100644
index 00000000000..e24f5a47918
--- /dev/null
+++ b/static/usage/v8/grid/offset/react/main_tsx.md
@@ -0,0 +1,49 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+ Column 2 has offset
set to "3"
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+ Column 5 has offset
set to "2"
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+
+ Column 1 has offset
set to "4"
+
+
+
+
+ 1
+
+ 2
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/grid/offset/vue.md b/static/usage/v8/grid/offset/vue.md
new file mode 100644
index 00000000000..1a69ea6e061
--- /dev/null
+++ b/static/usage/v8/grid/offset/vue.md
@@ -0,0 +1,49 @@
+```html
+
+ Column 2 has offset
set to "3"
+
+
+ 1
+ 2
+ 3
+
+
+
+ Column 5 has offset
set to "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+
+
+ Column 1 has offset
set to "4"
+
+
+ 1
+ 2
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/push-pull-responsive/angular/example_component_css.md b/static/usage/v8/grid/push-pull-responsive/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/push-pull-responsive/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/push-pull-responsive/angular/example_component_html.md b/static/usage/v8/grid/push-pull-responsive/angular/example_component_html.md
new file mode 100644
index 00000000000..4e67838643e
--- /dev/null
+++ b/static/usage/v8/grid/push-pull-responsive/angular/example_component_html.md
@@ -0,0 +1,31 @@
+```html
+No change for xs breakpoint, push 1st column & pull 2nd column for sm and up
+
+
+ 1
+ 2
+
+
+
+No change for xs breakpoint, push middle columns & pull last column for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+```
diff --git a/static/usage/v8/grid/push-pull-responsive/demo.html b/static/usage/v8/grid/push-pull-responsive/demo.html
new file mode 100644
index 00000000000..1dd91bddc99
--- /dev/null
+++ b/static/usage/v8/grid/push-pull-responsive/demo.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ No change for xs breakpoint, push 1st column & pull 2nd column for sm and up
+
+
+ 1
+ 2
+
+
+
+ No change for xs breakpoint, push middle columns & pull last column for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+
+
diff --git a/static/usage/v8/grid/push-pull-responsive/index.md b/static/usage/v8/grid/push-pull-responsive/index.md
new file mode 100644
index 00000000000..cc4eea60fe8
--- /dev/null
+++ b/static/usage/v8/grid/push-pull-responsive/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/grid/push-pull-responsive/javascript.md b/static/usage/v8/grid/push-pull-responsive/javascript.md
new file mode 100644
index 00000000000..05c03f1def8
--- /dev/null
+++ b/static/usage/v8/grid/push-pull-responsive/javascript.md
@@ -0,0 +1,40 @@
+```html
+No change for xs breakpoint, push 1st column & pull 2nd column for sm and up
+
+
+ 1
+ 2
+
+
+
+No change for xs breakpoint, push middle columns & pull last column for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+```
diff --git a/static/usage/v8/grid/push-pull-responsive/react/main_css.md b/static/usage/v8/grid/push-pull-responsive/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/push-pull-responsive/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/push-pull-responsive/react/main_tsx.md b/static/usage/v8/grid/push-pull-responsive/react/main_tsx.md
new file mode 100644
index 00000000000..85955f3ebd2
--- /dev/null
+++ b/static/usage/v8/grid/push-pull-responsive/react/main_tsx.md
@@ -0,0 +1,55 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ No change for xs breakpoint, push 1st column & pull 2nd column for sm and up
+
+
+ 1
+ 2
+
+
+
+ No change for xs breakpoint, push middle columns & pull last column for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/grid/push-pull-responsive/vue.md b/static/usage/v8/grid/push-pull-responsive/vue.md
new file mode 100644
index 00000000000..82015e52758
--- /dev/null
+++ b/static/usage/v8/grid/push-pull-responsive/vue.md
@@ -0,0 +1,51 @@
+```html
+
+ No change for xs breakpoint, push 1st column & pull 2nd column for sm and up
+
+
+ 1
+ 2
+
+
+
+ No change for xs breakpoint, push middle columns & pull last column for md and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/push-pull/angular/example_component_css.md b/static/usage/v8/grid/push-pull/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/push-pull/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/push-pull/angular/example_component_html.md b/static/usage/v8/grid/push-pull/angular/example_component_html.md
new file mode 100644
index 00000000000..a93c12fef81
--- /dev/null
+++ b/static/usage/v8/grid/push-pull/angular/example_component_html.md
@@ -0,0 +1,33 @@
+```html
+Column 1 has push
set to "4"
and column 2 has pull
set to "4"
+
+
+ 1
+ 2
+ 3
+
+
+
+Column 2 has push
set to "4"
and column 3 & 4 have pull
set to
+ "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+Column 1 has push
set to "3"
and column 2 has pull
set to "9"
+
+
+ 1
+ 2
+
+
+```
diff --git a/static/usage/v8/grid/push-pull/demo.html b/static/usage/v8/grid/push-pull/demo.html
new file mode 100644
index 00000000000..f342c81bc7a
--- /dev/null
+++ b/static/usage/v8/grid/push-pull/demo.html
@@ -0,0 +1,77 @@
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ Column 1 has push
set to "4"
and column 2 has pull
set to
+ "4"
+
+
+ 1
+ 2
+ 3
+
+
+
+ Column 2 has push
set to "4"
and column 3 & 4 have pull
set to
+ "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+ Column 1 has push
set to "3"
and column 2 has pull
set to
+ "9"
+
+
+ 1
+ 2
+
+
+
+
+
+
+
diff --git a/static/usage/v8/grid/push-pull/index.md b/static/usage/v8/grid/push-pull/index.md
new file mode 100644
index 00000000000..dd9c8a59f6a
--- /dev/null
+++ b/static/usage/v8/grid/push-pull/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/grid/push-pull/javascript.md b/static/usage/v8/grid/push-pull/javascript.md
new file mode 100644
index 00000000000..b911da1791b
--- /dev/null
+++ b/static/usage/v8/grid/push-pull/javascript.md
@@ -0,0 +1,42 @@
+```html
+Column 1 has push
set to "4"
and column 2 has pull
set to "4"
+
+
+ 1
+ 2
+ 3
+
+
+
+Column 2 has push
set to "4"
and column 3 & 4 have pull
set to
+ "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+Column 1 has push
set to "3"
and column 2 has pull
set to "9"
+
+
+ 1
+ 2
+
+
+
+
+```
diff --git a/static/usage/v8/grid/push-pull/react/main_css.md b/static/usage/v8/grid/push-pull/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/push-pull/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/push-pull/react/main_tsx.md b/static/usage/v8/grid/push-pull/react/main_tsx.md
new file mode 100644
index 00000000000..aa7c1d1c809
--- /dev/null
+++ b/static/usage/v8/grid/push-pull/react/main_tsx.md
@@ -0,0 +1,55 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+ Column 1 has push
set to "4"
and column 2 has pull
set to{' '}
+ "4"
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+ Column 2 has push
set to "4"
and column 3 & 4 have pull
set to{' '}
+ "2"
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+ Column 1 has push
set to "3"
and column 2 has pull
set to{' '}
+ "9"
+
+
+
+
+ 1
+
+
+ 2
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/grid/push-pull/vue.md b/static/usage/v8/grid/push-pull/vue.md
new file mode 100644
index 00000000000..b5146e95e0e
--- /dev/null
+++ b/static/usage/v8/grid/push-pull/vue.md
@@ -0,0 +1,59 @@
+```html
+
+ Column 1 has push
set to "4"
and column 2 has pull
set to
+ "4"
+
+
+ 1
+ 2
+ 3
+
+
+
+ Column 2 has push
set to "4"
and column 3 & 4 have pull
set to
+ "2"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+ Column 1 has push
set to "3"
and column 2 has pull
set to
+ "9"
+
+
+ 1
+ 2
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/size-auto/angular/example_component_css.md b/static/usage/v8/grid/size-auto/angular/example_component_css.md
new file mode 100644
index 00000000000..be364843a89
--- /dev/null
+++ b/static/usage/v8/grid/size-auto/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+ion-col {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+}
+```
diff --git a/static/usage/v8/grid/size-auto/angular/example_component_html.md b/static/usage/v8/grid/size-auto/angular/example_component_html.md
new file mode 100644
index 00000000000..fc4515ea984
--- /dev/null
+++ b/static/usage/v8/grid/size-auto/angular/example_component_html.md
@@ -0,0 +1,34 @@
+```html
+Column 1 has size
set to "auto"
+
+
+ 1
+ 2
+ 3
+
+
+
+Column 3 contains an input and has size
set to "auto"
+
+
+ 1
+ 2
+
+
+
+ 4
+ 5
+ 6
+
+
+
+Column 2 has size
set to "auto"
and a defined width
+
+
+ 1
+
+ 2
+
+
+
+```
diff --git a/static/usage/v8/grid/size-auto/demo.html b/static/usage/v8/grid/size-auto/demo.html
new file mode 100644
index 00000000000..1dd06084e4d
--- /dev/null
+++ b/static/usage/v8/grid/size-auto/demo.html
@@ -0,0 +1,76 @@
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ Column 1 has size
set to "auto"
+
+
+ 1
+ 2
+ 3
+
+
+
+ Column 3 contains an input and has size
set to "auto"
+
+
+ 1
+ 2
+
+
+
+ 4
+ 5
+ 6
+
+
+
+ Column 2 has size
set to "auto"
and a defined width
+
+
+ 1
+
+ 2
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/grid/size-auto/index.md b/static/usage/v8/grid/size-auto/index.md
new file mode 100644
index 00000000000..29e5aaa6549
--- /dev/null
+++ b/static/usage/v8/grid/size-auto/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/grid/size-auto/javascript.md b/static/usage/v8/grid/size-auto/javascript.md
new file mode 100644
index 00000000000..7f6619df1f5
--- /dev/null
+++ b/static/usage/v8/grid/size-auto/javascript.md
@@ -0,0 +1,47 @@
+```html
+Column 1 has size
set to "auto"
+
+
+ 1
+ 2
+ 3
+
+
+
+Column 3 contains an input and has size
set to "auto"
+
+
+ 1
+ 2
+
+
+
+ 4
+ 5
+ 6
+
+
+
+Column 2 has size
set to "auto"
and a defined width
+
+
+ 1
+
+ 2
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/size-auto/react/main_css.md b/static/usage/v8/grid/size-auto/react/main_css.md
new file mode 100644
index 00000000000..be364843a89
--- /dev/null
+++ b/static/usage/v8/grid/size-auto/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+ion-col {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+}
+```
diff --git a/static/usage/v8/grid/size-auto/react/main_tsx.md b/static/usage/v8/grid/size-auto/react/main_tsx.md
new file mode 100644
index 00000000000..64276d4cacd
--- /dev/null
+++ b/static/usage/v8/grid/size-auto/react/main_tsx.md
@@ -0,0 +1,52 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonInput, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+ Column 1 has size
set to "auto"
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+ Column 3 contains an input and has size
set to "auto"
+
+
+
+ 1
+ 2
+
+
+
+ 4
+ 5
+ 6
+
+
+
+
+ Column 2 has size
set to "auto"
and a defined width
+
+
+
+ 1
+
+ 2
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/grid/size-auto/vue.md b/static/usage/v8/grid/size-auto/vue.md
new file mode 100644
index 00000000000..f410272730d
--- /dev/null
+++ b/static/usage/v8/grid/size-auto/vue.md
@@ -0,0 +1,58 @@
+```html
+
+ Column 1 has size
set to "auto"
+
+
+ 1
+ 2
+ 3
+
+
+
+ Column 3 contains an input and has size
set to "auto"
+
+
+ 1
+ 2
+
+
+
+ 4
+ 5
+ 6
+
+
+
+ Column 2 has size
set to "auto"
and a defined width
+
+
+ 1
+
+ 2
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/size-responsive/angular/example_component_css.md b/static/usage/v8/grid/size-responsive/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/size-responsive/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/size-responsive/angular/example_component_html.md b/static/usage/v8/grid/size-responsive/angular/example_component_html.md
new file mode 100644
index 00000000000..62f96cb5800
--- /dev/null
+++ b/static/usage/v8/grid/size-responsive/angular/example_component_html.md
@@ -0,0 +1,32 @@
+```html
+Stacked for xs breakpoint, equal width for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+Equal width until md breakpoint, last column takes full width for md and up
+
+
+ 1
+ 2
+ 3
+
+
+
+2 per row until md breakpoint, 3 per row for md, equal width for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+```
diff --git a/static/usage/v8/grid/size-responsive/demo.html b/static/usage/v8/grid/size-responsive/demo.html
new file mode 100644
index 00000000000..5cddc2bddee
--- /dev/null
+++ b/static/usage/v8/grid/size-responsive/demo.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ Stacked for xs breakpoint, equal width for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ Equal width until md breakpoint, last column takes full width for md and up
+
+
+ 1
+ 2
+ 3
+
+
+
+ 2 per row until md breakpoint, 3 per row for md, equal width for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+
+
diff --git a/static/usage/v8/grid/size-responsive/index.md b/static/usage/v8/grid/size-responsive/index.md
new file mode 100644
index 00000000000..3f52e520adf
--- /dev/null
+++ b/static/usage/v8/grid/size-responsive/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/grid/size-responsive/javascript.md b/static/usage/v8/grid/size-responsive/javascript.md
new file mode 100644
index 00000000000..1b10d349bf4
--- /dev/null
+++ b/static/usage/v8/grid/size-responsive/javascript.md
@@ -0,0 +1,41 @@
+```html
+Stacked for xs breakpoint, equal width for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+Equal width until md breakpoint, last column takes full width for md and up
+
+
+ 1
+ 2
+ 3
+
+
+
+2 per row until md breakpoint, 3 per row for md, equal width for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+```
diff --git a/static/usage/v8/grid/size-responsive/react/main_css.md b/static/usage/v8/grid/size-responsive/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/size-responsive/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/size-responsive/react/main_tsx.md b/static/usage/v8/grid/size-responsive/react/main_tsx.md
new file mode 100644
index 00000000000..32a037e47bd
--- /dev/null
+++ b/static/usage/v8/grid/size-responsive/react/main_tsx.md
@@ -0,0 +1,64 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Stacked for xs breakpoint, equal width for sm and up
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+
+
+ Equal width until md breakpoint, last column takes full width for md and up
+
+
+ 1
+ 2
+ 3
+
+
+
+ 2 per row until md breakpoint, 3 per row for md, equal width for lg and up
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/grid/size-responsive/vue.md b/static/usage/v8/grid/size-responsive/vue.md
new file mode 100644
index 00000000000..2762e9c4774
--- /dev/null
+++ b/static/usage/v8/grid/size-responsive/vue.md
@@ -0,0 +1,52 @@
+```html
+
+ Stacked for xs breakpoint, equal width for sm and up
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ Equal width until md breakpoint, last column takes full width for md and up
+
+
+ 1
+ 2
+ 3
+
+
+
+ 2 per row until md breakpoint, 3 per row for md, equal width for lg and up
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/size/angular/example_component_css.md b/static/usage/v8/grid/size/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/size/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/size/angular/example_component_html.md b/static/usage/v8/grid/size/angular/example_component_html.md
new file mode 100644
index 00000000000..dc47b3de0dd
--- /dev/null
+++ b/static/usage/v8/grid/size/angular/example_component_html.md
@@ -0,0 +1,30 @@
+```html
+Column 2 has size
set to "8"
+
+
+ 1
+ 2
+ 3
+
+
+
+Columns 3 & 4 have size
set to "3"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+Columns 1 & 2 have size
set to "4"
+
+
+ 1
+ 2
+
+
+```
diff --git a/static/usage/v8/grid/size/demo.html b/static/usage/v8/grid/size/demo.html
new file mode 100644
index 00000000000..a5b90d3f79b
--- /dev/null
+++ b/static/usage/v8/grid/size/demo.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ Column 2 has size
set to "8"
+
+
+ 1
+ 2
+ 3
+
+
+
+ Columns 3 & 4 have size
set to "3"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+ Columns 1 & 2 have size
set to "4"
+
+
+ 1
+ 2
+
+
+
+
+
+
+
diff --git a/static/usage/v8/grid/size/index.md b/static/usage/v8/grid/size/index.md
new file mode 100644
index 00000000000..2b27666f0a8
--- /dev/null
+++ b/static/usage/v8/grid/size/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/grid/size/javascript.md b/static/usage/v8/grid/size/javascript.md
new file mode 100644
index 00000000000..576234e746e
--- /dev/null
+++ b/static/usage/v8/grid/size/javascript.md
@@ -0,0 +1,39 @@
+```html
+Column 2 has size
set to "8"
+
+
+ 1
+ 2
+ 3
+
+
+
+Columns 3 & 4 have size
set to "3"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+Columns 1 & 2 have size
set to "4"
+
+
+ 1
+ 2
+
+
+
+
+```
diff --git a/static/usage/v8/grid/size/react/main_css.md b/static/usage/v8/grid/size/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/size/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/size/react/main_tsx.md b/static/usage/v8/grid/size/react/main_tsx.md
new file mode 100644
index 00000000000..5cfa4f62f0e
--- /dev/null
+++ b/static/usage/v8/grid/size/react/main_tsx.md
@@ -0,0 +1,48 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+ Column 2 has size
set to "8"
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+ Columns 3 & 4 have size
set to "3"
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+
+ Columns 1 & 2 have size
set to "4"
+
+
+
+ 1
+ 2
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/grid/size/vue.md b/static/usage/v8/grid/size/vue.md
new file mode 100644
index 00000000000..14baef9e1c4
--- /dev/null
+++ b/static/usage/v8/grid/size/vue.md
@@ -0,0 +1,50 @@
+```html
+
+ Column 2 has size
set to "8"
+
+
+ 1
+ 2
+ 3
+
+
+
+ Columns 3 & 4 have size
set to "3"
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+
+
+ Columns 1 & 2 have size
set to "4"
+
+
+ 1
+ 2
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/vertical-alignment/angular/example_component_css.md b/static/usage/v8/grid/vertical-alignment/angular/example_component_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/vertical-alignment/angular/example_component_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/vertical-alignment/angular/example_component_html.md b/static/usage/v8/grid/vertical-alignment/angular/example_component_html.md
new file mode 100644
index 00000000000..0c12d96a0d2
--- /dev/null
+++ b/static/usage/v8/grid/vertical-alignment/angular/example_component_html.md
@@ -0,0 +1,46 @@
+```html
+Columns aligned at the top
+
+
+ 1
+ 2
+ 3
+
+ 4
+ #
+ #
+ #
+
+
+
+
+Columns aligned at the center
+
+
+ 1
+ 2
+ 3
+
+ 4
+ #
+ #
+ #
+
+
+
+
+Columns aligned at the bottom
+
+
+ 1
+ 2
+ 3
+
+ 4
+ #
+ #
+ #
+
+
+
+```
diff --git a/static/usage/v8/grid/vertical-alignment/demo.html b/static/usage/v8/grid/vertical-alignment/demo.html
new file mode 100644
index 00000000000..0c96b10cbde
--- /dev/null
+++ b/static/usage/v8/grid/vertical-alignment/demo.html
@@ -0,0 +1,84 @@
+
+
+
+
+
+ Grid
+
+
+
+
+
+
+
+
+
+
+
+
+ Columns aligned at the top
+
+
+ 1
+ 2
+ 3
+
+ 4
+ #
+ #
+ #
+
+
+
+
+ Columns aligned at the center
+
+
+ 1
+ 2
+ 3
+
+ 4
+ #
+ #
+ #
+
+
+
+
+ Columns aligned at the bottom
+
+
+ 1
+ 2
+ 3
+
+ 4
+ #
+ #
+ #
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/grid/vertical-alignment/index.md b/static/usage/v8/grid/vertical-alignment/index.md
new file mode 100644
index 00000000000..10a271ce436
--- /dev/null
+++ b/static/usage/v8/grid/vertical-alignment/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/grid/vertical-alignment/javascript.md b/static/usage/v8/grid/vertical-alignment/javascript.md
new file mode 100644
index 00000000000..6285096acdc
--- /dev/null
+++ b/static/usage/v8/grid/vertical-alignment/javascript.md
@@ -0,0 +1,55 @@
+```html
+Columns aligned at the top
+
+
+ 1
+ 2
+ 3
+
+ 4
+ #
+ #
+ #
+
+
+
+
+Columns aligned at the center
+
+
+ 1
+ 2
+ 3
+
+ 4
+ #
+ #
+ #
+
+
+
+
+Columns aligned at the bottom
+
+
+ 1
+ 2
+ 3
+
+ 4
+ #
+ #
+ #
+
+
+
+
+
+```
diff --git a/static/usage/v8/grid/vertical-alignment/react/main_css.md b/static/usage/v8/grid/vertical-alignment/react/main_css.md
new file mode 100644
index 00000000000..3aae3216f34
--- /dev/null
+++ b/static/usage/v8/grid/vertical-alignment/react/main_css.md
@@ -0,0 +1,8 @@
+```css
+ion-col {
+ background-color: #135d54;
+ border: solid 1px #fff;
+ color: #fff;
+ text-align: center;
+}
+```
diff --git a/static/usage/v8/grid/vertical-alignment/react/main_tsx.md b/static/usage/v8/grid/vertical-alignment/react/main_tsx.md
new file mode 100644
index 00000000000..04a492566f6
--- /dev/null
+++ b/static/usage/v8/grid/vertical-alignment/react/main_tsx.md
@@ -0,0 +1,58 @@
+```tsx
+import React from 'react';
+import { IonCol, IonGrid, IonRow } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+ Columns aligned at the top
+
+
+ 1
+ 2
+ 3
+
+ 4
+ #
+ #
+ #
+
+
+
+
+ Columns aligned at the center
+
+
+ 1
+ 2
+ 3
+
+ 4
+ #
+ #
+ #
+
+
+
+
+ Columns aligned at the bottom
+
+
+ 1
+ 2
+ 3
+
+ 4
+ #
+ #
+ #
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/grid/vertical-alignment/vue.md b/static/usage/v8/grid/vertical-alignment/vue.md
new file mode 100644
index 00000000000..e48b234b38a
--- /dev/null
+++ b/static/usage/v8/grid/vertical-alignment/vue.md
@@ -0,0 +1,66 @@
+```html
+
+ Columns aligned at the top
+
+
+ 1
+ 2
+ 3
+
+ 4
+ #
+ #
+ #
+
+
+
+
+ Columns aligned at the center
+
+
+ 1
+ 2
+ 3
+
+ 4
+ #
+ #
+ #
+
+
+
+
+ Columns aligned at the bottom
+
+
+ 1
+ 2
+ 3
+
+ 4
+ #
+ #
+ #
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/header/basic/angular.md b/static/usage/v8/header/basic/angular.md
new file mode 100644
index 00000000000..9edf1a22f27
--- /dev/null
+++ b/static/usage/v8/header/basic/angular.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Header
+
+
+
+ Content
+
+```
diff --git a/static/usage/v8/header/basic/demo.html b/static/usage/v8/header/basic/demo.html
new file mode 100644
index 00000000000..6421b0bb28c
--- /dev/null
+++ b/static/usage/v8/header/basic/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+ Header
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Content
+
+
+
+
diff --git a/static/usage/v8/header/basic/index.md b/static/usage/v8/header/basic/index.md
new file mode 100644
index 00000000000..f509303071d
--- /dev/null
+++ b/static/usage/v8/header/basic/index.md
@@ -0,0 +1,14 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/header/basic/javascript.md b/static/usage/v8/header/basic/javascript.md
new file mode 100644
index 00000000000..9edf1a22f27
--- /dev/null
+++ b/static/usage/v8/header/basic/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Header
+
+
+
+ Content
+
+```
diff --git a/static/usage/v8/header/basic/react.md b/static/usage/v8/header/basic/react.md
new file mode 100644
index 00000000000..0dd2df0474d
--- /dev/null
+++ b/static/usage/v8/header/basic/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Content
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/header/basic/vue.md b/static/usage/v8/header/basic/vue.md
new file mode 100644
index 00000000000..1bba4fdee2b
--- /dev/null
+++ b/static/usage/v8/header/basic/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+ Header
+
+
+
+ Content
+
+
+
+
+```
diff --git a/static/usage/v8/header/condense/angular.md b/static/usage/v8/header/condense/angular.md
new file mode 100644
index 00000000000..1741b1f1706
--- /dev/null
+++ b/static/usage/v8/header/condense/angular.md
@@ -0,0 +1,75 @@
+```html
+
+
+ Header
+
+
+
+
+
+ Header
+
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+ while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100
+ teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to
+ reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+```
diff --git a/static/usage/v8/header/condense/demo.html b/static/usage/v8/header/condense/demo.html
new file mode 100644
index 00000000000..8449cc02687
--- /dev/null
+++ b/static/usage/v8/header/condense/demo.html
@@ -0,0 +1,92 @@
+
+
+
+
+
+ Header
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+
+
+ Header
+
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies
+ on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have
+ two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+ have a spotted pattern similar to that of a leopard. Because of the combination of these features, some
+ people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes
+ from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants,
+ or suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+ gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout
+ with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a
+ flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it
+ surfaces.
+
+
+
+
+
+
diff --git a/static/usage/v8/header/condense/index.md b/static/usage/v8/header/condense/index.md
new file mode 100644
index 00000000000..cbcfc775776
--- /dev/null
+++ b/static/usage/v8/header/condense/index.md
@@ -0,0 +1,15 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/header/condense/javascript.md b/static/usage/v8/header/condense/javascript.md
new file mode 100644
index 00000000000..f2e2a1d53cc
--- /dev/null
+++ b/static/usage/v8/header/condense/javascript.md
@@ -0,0 +1,75 @@
+```html
+
+
+ Header
+
+
+
+
+
+ Header
+
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+ while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100
+ teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to
+ reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+```
diff --git a/static/usage/v8/header/condense/react.md b/static/usage/v8/header/condense/react.md
new file mode 100644
index 00000000000..6dc06c54cff
--- /dev/null
+++ b/static/usage/v8/header/condense/react.md
@@ -0,0 +1,87 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+
+
+ Header
+
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies
+ on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have
+ two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+ have a spotted pattern similar to that of a leopard. Because of the combination of these features, some
+ people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes
+ from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants,
+ or suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+ gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout
+ with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a
+ flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it
+ surfaces.
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/header/condense/vue.md b/static/usage/v8/header/condense/vue.md
new file mode 100644
index 00000000000..dddaef7f71c
--- /dev/null
+++ b/static/usage/v8/header/condense/vue.md
@@ -0,0 +1,86 @@
+```html
+
+
+
+ Header
+
+
+
+
+
+ Header
+
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+ while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+ the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+ to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/header/custom-scroll-target/angular/example_component_css.md b/static/usage/v8/header/custom-scroll-target/angular/example_component_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/v8/header/custom-scroll-target/angular/example_component_css.md
@@ -0,0 +1,10 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v8/header/custom-scroll-target/angular/example_component_html.md b/static/usage/v8/header/custom-scroll-target/angular/example_component_html.md
new file mode 100644
index 00000000000..742d531cb9d
--- /dev/null
+++ b/static/usage/v8/header/custom-scroll-target/angular/example_component_html.md
@@ -0,0 +1,69 @@
+```html
+
+
+ Header
+
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+ while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100
+ teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to
+ reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+```
diff --git a/static/usage/v8/header/custom-scroll-target/demo.html b/static/usage/v8/header/custom-scroll-target/demo.html
new file mode 100644
index 00000000000..d80117e07ea
--- /dev/null
+++ b/static/usage/v8/header/custom-scroll-target/demo.html
@@ -0,0 +1,98 @@
+
+
+
+
+
+ Header
+
+
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies
+ on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have
+ two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+ have a spotted pattern similar to that of a leopard. Because of the combination of these features, some
+ people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes
+ from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants,
+ or suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+ gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout
+ with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a
+ flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it
+ surfaces.
+
+
+
+
+
+
diff --git a/static/usage/v8/header/custom-scroll-target/index.md b/static/usage/v8/header/custom-scroll-target/index.md
new file mode 100644
index 00000000000..21821fa810c
--- /dev/null
+++ b/static/usage/v8/header/custom-scroll-target/index.md
@@ -0,0 +1,35 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/header/custom-scroll-target/javascript.md b/static/usage/v8/header/custom-scroll-target/javascript.md
new file mode 100644
index 00000000000..64077515677
--- /dev/null
+++ b/static/usage/v8/header/custom-scroll-target/javascript.md
@@ -0,0 +1,43 @@
+```html
+
+
+ Header
+
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.
+
+ Sea Turtle
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.
+
+ Giraffe
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+ Elephant
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.
+
+ Dolphin
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+```
diff --git a/static/usage/v8/header/custom-scroll-target/react/main_css.md b/static/usage/v8/header/custom-scroll-target/react/main_css.md
new file mode 100644
index 00000000000..5fe74c95f50
--- /dev/null
+++ b/static/usage/v8/header/custom-scroll-target/react/main_css.md
@@ -0,0 +1,10 @@
+```css
+.ion-content-scroll-host {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ overflow-y: auto;
+}
+```
diff --git a/static/usage/v8/header/custom-scroll-target/react/main_tsx.md b/static/usage/v8/header/custom-scroll-target/react/main_tsx.md
new file mode 100644
index 00000000000..923ea715aa7
--- /dev/null
+++ b/static/usage/v8/header/custom-scroll-target/react/main_tsx.md
@@ -0,0 +1,83 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies
+ on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have
+ two horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and
+ have a spotted pattern similar to that of a leopard. Because of the combination of these features, some
+ people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes
+ from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants,
+ or suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown,
+ gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout
+ with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a
+ flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it
+ surfaces.
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/header/custom-scroll-target/vue.md b/static/usage/v8/header/custom-scroll-target/vue.md
new file mode 100644
index 00000000000..84aac1c56fe
--- /dev/null
+++ b/static/usage/v8/header/custom-scroll-target/vue.md
@@ -0,0 +1,92 @@
+```html
+
+
+
+ Header
+
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+ while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called
+ the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens
+ to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/header/fade/angular.md b/static/usage/v8/header/fade/angular.md
new file mode 100644
index 00000000000..473ad54c8da
--- /dev/null
+++ b/static/usage/v8/header/fade/angular.md
@@ -0,0 +1,67 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+ the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+ sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+ swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+ and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+ and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+ pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+```
diff --git a/static/usage/v8/header/fade/demo.html b/static/usage/v8/header/fade/demo.html
new file mode 100644
index 00000000000..d55733d1174
--- /dev/null
+++ b/static/usage/v8/header/fade/demo.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+ Header
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+ called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+ opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
diff --git a/static/usage/v8/header/fade/index.md b/static/usage/v8/header/fade/index.md
new file mode 100644
index 00000000000..f026b50ec10
--- /dev/null
+++ b/static/usage/v8/header/fade/index.md
@@ -0,0 +1,15 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/header/fade/javascript.md b/static/usage/v8/header/fade/javascript.md
new file mode 100644
index 00000000000..473ad54c8da
--- /dev/null
+++ b/static/usage/v8/header/fade/javascript.md
@@ -0,0 +1,67 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+ the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+ sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+ swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+ and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+ and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+ pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+```
diff --git a/static/usage/v8/header/fade/react.md b/static/usage/v8/header/fade/react.md
new file mode 100644
index 00000000000..085bea0296d
--- /dev/null
+++ b/static/usage/v8/header/fade/react.md
@@ -0,0 +1,77 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+ called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+ opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/header/fade/vue.md b/static/usage/v8/header/fade/vue.md
new file mode 100644
index 00000000000..264038c103c
--- /dev/null
+++ b/static/usage/v8/header/fade/vue.md
@@ -0,0 +1,78 @@
+```html
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+ while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100
+ teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to
+ reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
+```
diff --git a/static/usage/v8/header/no-border/angular.md b/static/usage/v8/header/no-border/angular.md
new file mode 100644
index 00000000000..064fa753744
--- /dev/null
+++ b/static/usage/v8/header/no-border/angular.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Header
+
+
+
+ Content
+
+```
diff --git a/static/usage/v8/header/no-border/demo.html b/static/usage/v8/header/no-border/demo.html
new file mode 100644
index 00000000000..2792cd36be7
--- /dev/null
+++ b/static/usage/v8/header/no-border/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+ Header
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Content
+
+
+
+
diff --git a/static/usage/v8/header/no-border/index.md b/static/usage/v8/header/no-border/index.md
new file mode 100644
index 00000000000..5b6ad99cec5
--- /dev/null
+++ b/static/usage/v8/header/no-border/index.md
@@ -0,0 +1,14 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/header/no-border/javascript.md b/static/usage/v8/header/no-border/javascript.md
new file mode 100644
index 00000000000..064fa753744
--- /dev/null
+++ b/static/usage/v8/header/no-border/javascript.md
@@ -0,0 +1,10 @@
+```html
+
+
+ Header
+
+
+
+ Content
+
+```
diff --git a/static/usage/v8/header/no-border/react.md b/static/usage/v8/header/no-border/react.md
new file mode 100644
index 00000000000..2eb14f6882f
--- /dev/null
+++ b/static/usage/v8/header/no-border/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Content
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/header/no-border/vue.md b/static/usage/v8/header/no-border/vue.md
new file mode 100644
index 00000000000..a5583fb06d1
--- /dev/null
+++ b/static/usage/v8/header/no-border/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+ Header
+
+
+
+ Content
+
+
+
+
+```
diff --git a/static/usage/v8/header/translucent/angular.md b/static/usage/v8/header/translucent/angular.md
new file mode 100644
index 00000000000..657a88bf066
--- /dev/null
+++ b/static/usage/v8/header/translucent/angular.md
@@ -0,0 +1,67 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+ the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+ sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+ swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+ and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+ and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+ pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+```
diff --git a/static/usage/v8/header/translucent/demo.html b/static/usage/v8/header/translucent/demo.html
new file mode 100644
index 00000000000..d1bd35d1a9a
--- /dev/null
+++ b/static/usage/v8/header/translucent/demo.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+ Header
+
+
+
+
+
+
+
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+ called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+ opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
diff --git a/static/usage/v8/header/translucent/index.md b/static/usage/v8/header/translucent/index.md
new file mode 100644
index 00000000000..899b96d7039
--- /dev/null
+++ b/static/usage/v8/header/translucent/index.md
@@ -0,0 +1,15 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/header/translucent/javascript.md b/static/usage/v8/header/translucent/javascript.md
new file mode 100644
index 00000000000..5c0048c019c
--- /dev/null
+++ b/static/usage/v8/header/translucent/javascript.md
@@ -0,0 +1,67 @@
+```html
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
+ the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
+ sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
+ swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
+ and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
+ and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
+ pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+```
diff --git a/static/usage/v8/header/translucent/react.md b/static/usage/v8/header/translucent/react.md
new file mode 100644
index 00000000000..def835913c3
--- /dev/null
+++ b/static/usage/v8/header/translucent/react.md
@@ -0,0 +1,77 @@
+```tsx
+import React from 'react';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from
+ the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on
+ the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two
+ horns, while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have
+ a spotted pattern similar to that of a leopard. Because of the combination of these features, some people
+ called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’
+ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or
+ suck up water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about
+ 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that
+ opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/header/translucent/vue.md b/static/usage/v8/header/translucent/vue.md
new file mode 100644
index 00000000000..26370009d44
--- /dev/null
+++ b/static/usage/v8/header/translucent/vue.md
@@ -0,0 +1,78 @@
+```html
+
+
+
+ Header
+
+
+
+ Animal Facts
+
+ Rhinoceros
+
+
+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
+ Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
+ species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns,
+ while the Javan rhino and one-horned rhino have one horn.
+
+
+ Sea Turtle
+
+
+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other
+ turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are
+ adapted for swimming, so they are vulnerable while on land.
+
+
+ Giraffe
+
+
+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
+ spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
+ giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
+
+
+ Elephant
+
+
+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
+ trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
+ water for drinking or bathing.
+
+
+ Dolphin
+
+
+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray,
+ blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100
+ teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to
+ reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
+
+
+
+
+
+```
diff --git a/static/usage/v8/icon/basic/angular.md b/static/usage/v8/icon/basic/angular.md
new file mode 100644
index 00000000000..7dba86b2634
--- /dev/null
+++ b/static/usage/v8/icon/basic/angular.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v8/icon/basic/demo.html b/static/usage/v8/icon/basic/demo.html
new file mode 100644
index 00000000000..6c1c94041b2
--- /dev/null
+++ b/static/usage/v8/icon/basic/demo.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+ Icon
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/icon/basic/index.md b/static/usage/v8/icon/basic/index.md
new file mode 100644
index 00000000000..dda963a2ca8
--- /dev/null
+++ b/static/usage/v8/icon/basic/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/icon/basic/javascript.md b/static/usage/v8/icon/basic/javascript.md
new file mode 100644
index 00000000000..7dba86b2634
--- /dev/null
+++ b/static/usage/v8/icon/basic/javascript.md
@@ -0,0 +1,6 @@
+```html
+
+
+
+
+```
diff --git a/static/usage/v8/icon/basic/react.md b/static/usage/v8/icon/basic/react.md
new file mode 100644
index 00000000000..57383875130
--- /dev/null
+++ b/static/usage/v8/icon/basic/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonIcon } from '@ionic/react';
+import { logoIonic } from 'ionicons/icons';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/icon/basic/vue.md b/static/usage/v8/icon/basic/vue.md
new file mode 100644
index 00000000000..c78d79fb041
--- /dev/null
+++ b/static/usage/v8/icon/basic/vue.md
@@ -0,0 +1,21 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/img/basic/angular.md b/static/usage/v8/img/basic/angular.md
new file mode 100644
index 00000000000..61e27f8b9d6
--- /dev/null
+++ b/static/usage/v8/img/basic/angular.md
@@ -0,0 +1,6 @@
+```html
+
+```
diff --git a/static/usage/v8/img/basic/demo.html b/static/usage/v8/img/basic/demo.html
new file mode 100644
index 00000000000..ec0e23586ce
--- /dev/null
+++ b/static/usage/v8/img/basic/demo.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+ Image
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/img/basic/index.md b/static/usage/v8/img/basic/index.md
new file mode 100644
index 00000000000..3e14666bad2
--- /dev/null
+++ b/static/usage/v8/img/basic/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/img/basic/javascript.md b/static/usage/v8/img/basic/javascript.md
new file mode 100644
index 00000000000..61e27f8b9d6
--- /dev/null
+++ b/static/usage/v8/img/basic/javascript.md
@@ -0,0 +1,6 @@
+```html
+
+```
diff --git a/static/usage/v8/img/basic/react.md b/static/usage/v8/img/basic/react.md
new file mode 100644
index 00000000000..0236cc28976
--- /dev/null
+++ b/static/usage/v8/img/basic/react.md
@@ -0,0 +1,14 @@
+```tsx
+import React from 'react';
+import { IonImg } from '@ionic/react';
+
+function Example() {
+ return (
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/img/basic/vue.md b/static/usage/v8/img/basic/vue.md
new file mode 100644
index 00000000000..db4d74618ef
--- /dev/null
+++ b/static/usage/v8/img/basic/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md b/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..55469ab3c5a
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+
+
+
+
+
+ {{ item }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..390ba6b75f1
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md
@@ -0,0 +1,32 @@
+```tsx
+import { Component, OnInit } from '@angular/core';
+
+import { InfiniteScrollCustomEvent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.scss'],
+})
+export class ExampleComponent implements OnInit {
+ items = [];
+
+ ngOnInit() {
+ this.generateItems();
+ }
+
+ private generateItems() {
+ const count = this.items.length + 1;
+ for (let i = 0; i < 50; i++) {
+ this.items.push(`Item ${count + i}`);
+ }
+ }
+
+ onIonInfinite(ev) {
+ this.generateItems();
+ setTimeout(() => {
+ (ev as InfiniteScrollCustomEvent).target.complete();
+ }, 500);
+ }
+}
+```
diff --git a/static/usage/v8/infinite-scroll/basic/demo.html b/static/usage/v8/infinite-scroll/basic/demo.html
new file mode 100644
index 00000000000..941bca7505b
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/basic/demo.html
@@ -0,0 +1,60 @@
+
+
+
+
+
+ Infinite Scroll
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/infinite-scroll/basic/index.md b/static/usage/v8/infinite-scroll/basic/index.md
new file mode 100644
index 00000000000..80cebd38c2f
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/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/infinite-scroll/basic/javascript.md b/static/usage/v8/infinite-scroll/basic/javascript.md
new file mode 100644
index 00000000000..b61db4c6ae3
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/basic/javascript.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/infinite-scroll/basic/react.md b/static/usage/v8/infinite-scroll/basic/react.md
new file mode 100644
index 00000000000..c12032a6540
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/basic/react.md
@@ -0,0 +1,53 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import {
+ IonContent,
+ IonInfiniteScroll,
+ IonInfiniteScrollContent,
+ IonList,
+ IonItem,
+ IonAvatar,
+ IonLabel,
+} from '@ionic/react';
+
+function Example() {
+ const [items, setItems] = useState([]);
+
+ const generateItems = () => {
+ const newItems = [];
+ for (let i = 0; i < 50; i++) {
+ newItems.push(`Item ${1 + items.length + i}`);
+ }
+ setItems([...items, ...newItems]);
+ };
+
+ useEffect(() => {
+ generateItems();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+ {items.map((item, index) => (
+
+
+
+
+ {item}
+
+ ))}
+
+ {
+ generateItems();
+ setTimeout(() => ev.target.complete(), 500);
+ }}
+ >
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/infinite-scroll/basic/vue.md b/static/usage/v8/infinite-scroll/basic/vue.md
new file mode 100644
index 00000000000..dc7a7c45f46
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/basic/vue.md
@@ -0,0 +1,65 @@
+```html
+
+
+
+
+
+
+
+ {{ item }}
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
new file mode 100644
index 00000000000..9f14adbc405
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md
@@ -0,0 +1,12 @@
+```css
+svg {
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+}
+
+.infinite-scroll-content {
+ text-align: center;
+ padding: 20px 0;
+}
+```
diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
new file mode 100644
index 00000000000..60c02b86ea0
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md
@@ -0,0 +1,68 @@
+```html
+
+
+
+
+
+
+ {{ item }}
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..415ed5dba8b
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```tsx
+import { Component, OnInit } from '@angular/core';
+
+import { InfiniteScrollCustomEvent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.scss'],
+})
+export class ExampleComponent implements OnInit {
+ items = [];
+
+ ngOnInit() {
+ for (let i = 1; i < 51; i++) {
+ this.items.push(`Item ${i}`);
+ }
+ }
+}
+```
diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/demo.html b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/demo.html
new file mode 100644
index 00000000000..0b25042b2ab
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/demo.html
@@ -0,0 +1,117 @@
+
+
+
+
+
+ Infinite Scroll
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/index.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/index.md
new file mode 100644
index 00000000000..65129c23b79
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.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';
+import angular_example_component_css from './angular/example_component_css.md';
+
+
diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/javascript.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/javascript.md
new file mode 100644
index 00000000000..721eb0c0ad4
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/javascript.md
@@ -0,0 +1,104 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/react/main_css.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
new file mode 100644
index 00000000000..9f14adbc405
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/react/main_css.md
@@ -0,0 +1,12 @@
+```css
+svg {
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+}
+
+.infinite-scroll-content {
+ text-align: center;
+ padding: 20px 0;
+}
+```
diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
new file mode 100644
index 00000000000..1139f55920d
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md
@@ -0,0 +1,89 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import { IonContent, IonInfiniteScroll, IonList, IonItem, IonAvatar, IonLabel } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ const [items, setItems] = useState([]);
+
+ useEffect(() => {
+ const newItems = [];
+ for (let i = 1; i < 51; i++) {
+ newItems.push(`Item ${items.length + i}`);
+ }
+ setItems([...items, ...newItems]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+ {items.map((item, index) => (
+
+
+
+
+ {item}
+
+ ))}
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/vue.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/vue.md
new file mode 100644
index 00000000000..85954295280
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/vue.md
@@ -0,0 +1,121 @@
+```html
+
+
+
+
+
+
+
+
+
+ {{ item }}
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
new file mode 100644
index 00000000000..2e23e359257
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+
+
+
+
+
+
+ {{ item }}
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
new file mode 100644
index 00000000000..415ed5dba8b
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md
@@ -0,0 +1,20 @@
+```tsx
+import { Component, OnInit } from '@angular/core';
+
+import { InfiniteScrollCustomEvent } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.scss'],
+})
+export class ExampleComponent implements OnInit {
+ items = [];
+
+ ngOnInit() {
+ for (let i = 1; i < 51; i++) {
+ this.items.push(`Item ${i}`);
+ }
+ }
+}
+```
diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/demo.html b/static/usage/v8/infinite-scroll/infinite-scroll-content/demo.html
new file mode 100644
index 00000000000..941d572aa69
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/demo.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+ Infinite Scroll
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/index.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/index.md
new file mode 100644
index 00000000000..fcab6c98431
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/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/infinite-scroll/infinite-scroll-content/javascript.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/javascript.md
new file mode 100644
index 00000000000..6b2a9bb409f
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/javascript.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/react.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/react.md
new file mode 100644
index 00000000000..2c2b5f77b8a
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/react.md
@@ -0,0 +1,44 @@
+```tsx
+import React, { useState, useEffect } from 'react';
+import {
+ IonContent,
+ IonInfiniteScroll,
+ IonInfiniteScrollContent,
+ IonList,
+ IonItem,
+ IonAvatar,
+ IonLabel,
+} from '@ionic/react';
+
+function Example() {
+ const [items, setItems] = useState([]);
+
+ useEffect(() => {
+ const newItems = [];
+ for (let i = 1; i < 51; i++) {
+ newItems.push(`Item ${items.length + i}`);
+ }
+ setItems([...items, ...newItems]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+ {items.map((item, index) => (
+
+
+
+
+ {item}
+
+ ))}
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/vue.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/vue.md
new file mode 100644
index 00000000000..f00b47e1fb8
--- /dev/null
+++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/vue.md
@@ -0,0 +1,58 @@
+```html
+
+
+
+
+
+
+
+ {{ item }}
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input-password-toggle/basic/angular.md b/static/usage/v8/input-password-toggle/basic/angular.md
new file mode 100644
index 00000000000..5a1acf3ffc3
--- /dev/null
+++ b/static/usage/v8/input-password-toggle/basic/angular.md
@@ -0,0 +1,5 @@
+```html
+
+
+
+```
diff --git a/static/usage/v8/input-password-toggle/basic/demo.html b/static/usage/v8/input-password-toggle/basic/demo.html
new file mode 100644
index 00000000000..c6c52b35303
--- /dev/null
+++ b/static/usage/v8/input-password-toggle/basic/demo.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/input-password-toggle/basic/index.md b/static/usage/v8/input-password-toggle/basic/index.md
new file mode 100644
index 00000000000..037fec4f190
--- /dev/null
+++ b/static/usage/v8/input-password-toggle/basic/index.md
@@ -0,0 +1,12 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/input-password-toggle/basic/javascript.md b/static/usage/v8/input-password-toggle/basic/javascript.md
new file mode 100644
index 00000000000..5a1acf3ffc3
--- /dev/null
+++ b/static/usage/v8/input-password-toggle/basic/javascript.md
@@ -0,0 +1,5 @@
+```html
+
+
+
+```
diff --git a/static/usage/v8/input-password-toggle/basic/react.md b/static/usage/v8/input-password-toggle/basic/react.md
new file mode 100644
index 00000000000..88ade62f97c
--- /dev/null
+++ b/static/usage/v8/input-password-toggle/basic/react.md
@@ -0,0 +1,13 @@
+```tsx
+import React from 'react';
+import { IonInput, IonInputPasswordToggle } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input-password-toggle/basic/vue.md b/static/usage/v8/input-password-toggle/basic/vue.md
new file mode 100644
index 00000000000..806941c3762
--- /dev/null
+++ b/static/usage/v8/input-password-toggle/basic/vue.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/basic/angular.md b/static/usage/v8/input/basic/angular.md
new file mode 100644
index 00000000000..a8678178aa6
--- /dev/null
+++ b/static/usage/v8/input/basic/angular.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/basic/demo.html b/static/usage/v8/input/basic/demo.html
new file mode 100644
index 00000000000..88571ec2ac7
--- /dev/null
+++ b/static/usage/v8/input/basic/demo.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/input/basic/index.md b/static/usage/v8/input/basic/index.md
new file mode 100644
index 00000000000..bf35523196a
--- /dev/null
+++ b/static/usage/v8/input/basic/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/input/basic/javascript.md b/static/usage/v8/input/basic/javascript.md
new file mode 100644
index 00000000000..75e521fa3b6
--- /dev/null
+++ b/static/usage/v8/input/basic/javascript.md
@@ -0,0 +1,23 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/basic/react.md b/static/usage/v8/input/basic/react.md
new file mode 100644
index 00000000000..ff799a11f62
--- /dev/null
+++ b/static/usage/v8/input/basic/react.md
@@ -0,0 +1,31 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input/basic/vue.md b/static/usage/v8/input/basic/vue.md
new file mode 100644
index 00000000000..cfdca09244a
--- /dev/null
+++ b/static/usage/v8/input/basic/vue.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/clear/angular.md b/static/usage/v8/input/clear/angular.md
new file mode 100644
index 00000000000..fc52d3b55e8
--- /dev/null
+++ b/static/usage/v8/input/clear/angular.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/clear/demo.html b/static/usage/v8/input/clear/demo.html
new file mode 100644
index 00000000000..61ee5401842
--- /dev/null
+++ b/static/usage/v8/input/clear/demo.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/input/clear/index.md b/static/usage/v8/input/clear/index.md
new file mode 100644
index 00000000000..f3763e6024a
--- /dev/null
+++ b/static/usage/v8/input/clear/index.md
@@ -0,0 +1,8 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/input/clear/javascript.md b/static/usage/v8/input/clear/javascript.md
new file mode 100644
index 00000000000..743ebd8cfd8
--- /dev/null
+++ b/static/usage/v8/input/clear/javascript.md
@@ -0,0 +1,34 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/clear/react.md b/static/usage/v8/input/clear/react.md
new file mode 100644
index 00000000000..959702b5e9e
--- /dev/null
+++ b/static/usage/v8/input/clear/react.md
@@ -0,0 +1,39 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input/clear/vue.md b/static/usage/v8/input/clear/vue.md
new file mode 100644
index 00000000000..e5cd540d469
--- /dev/null
+++ b/static/usage/v8/input/clear/vue.md
@@ -0,0 +1,45 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/counter-alignment/angular.md b/static/usage/v8/input/counter-alignment/angular.md
new file mode 100644
index 00000000000..c08e1cdd758
--- /dev/null
+++ b/static/usage/v8/input/counter-alignment/angular.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/counter-alignment/demo.html b/static/usage/v8/input/counter-alignment/demo.html
new file mode 100644
index 00000000000..aa0e88ec28a
--- /dev/null
+++ b/static/usage/v8/input/counter-alignment/demo.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/input/counter-alignment/index.md b/static/usage/v8/input/counter-alignment/index.md
new file mode 100644
index 00000000000..b0192c1909b
--- /dev/null
+++ b/static/usage/v8/input/counter-alignment/index.md
@@ -0,0 +1,17 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/input/counter-alignment/javascript.md b/static/usage/v8/input/counter-alignment/javascript.md
new file mode 100644
index 00000000000..3a9b526ba70
--- /dev/null
+++ b/static/usage/v8/input/counter-alignment/javascript.md
@@ -0,0 +1,11 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/counter-alignment/react.md b/static/usage/v8/input/counter-alignment/react.md
new file mode 100644
index 00000000000..5687f244f0c
--- /dev/null
+++ b/static/usage/v8/input/counter-alignment/react.md
@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input/counter-alignment/vue.md b/static/usage/v8/input/counter-alignment/vue.md
new file mode 100644
index 00000000000..77c9d4b0fde
--- /dev/null
+++ b/static/usage/v8/input/counter-alignment/vue.md
@@ -0,0 +1,17 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/counter/angular/example_component_html.md b/static/usage/v8/input/counter/angular/example_component_html.md
new file mode 100644
index 00000000000..633ff54c719
--- /dev/null
+++ b/static/usage/v8/input/counter/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+```
diff --git a/static/usage/v8/input/counter/angular/example_component_ts.md b/static/usage/v8/input/counter/angular/example_component_ts.md
new file mode 100644
index 00000000000..2c08dc06fc2
--- /dev/null
+++ b/static/usage/v8/input/counter/angular/example_component_ts.md
@@ -0,0 +1,13 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ customCounterFormatter(inputLength: number, maxLength: number) {
+ return `${maxLength - inputLength} characters remaining`;
+ }
+}
+```
diff --git a/static/usage/v8/input/counter/demo.html b/static/usage/v8/input/counter/demo.html
new file mode 100644
index 00000000000..15582e0fbd1
--- /dev/null
+++ b/static/usage/v8/input/counter/demo.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+ Item
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/input/counter/index.md b/static/usage/v8/input/counter/index.md
new file mode 100644
index 00000000000..14e486ba2cd
--- /dev/null
+++ b/static/usage/v8/input/counter/index.md
@@ -0,0 +1,24 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.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/counter/javascript.md b/static/usage/v8/input/counter/javascript.md
new file mode 100644
index 00000000000..f794dc12691
--- /dev/null
+++ b/static/usage/v8/input/counter/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/counter/react.md b/static/usage/v8/input/counter/react.md
new file mode 100644
index 00000000000..f3c6cdcd5a6
--- /dev/null
+++ b/static/usage/v8/input/counter/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonInput } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ `${maxLength - inputLength} characters remaining`}
+ >
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input/counter/vue.md b/static/usage/v8/input/counter/vue.md
new file mode 100644
index 00000000000..1df64570da9
--- /dev/null
+++ b/static/usage/v8/input/counter/vue.md
@@ -0,0 +1,22 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/fill/angular.md b/static/usage/v8/input/fill/angular.md
new file mode 100644
index 00000000000..60af531cd45
--- /dev/null
+++ b/static/usage/v8/input/fill/angular.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/fill/demo.html b/static/usage/v8/input/fill/demo.html
new file mode 100644
index 00000000000..7bbd26ae242
--- /dev/null
+++ b/static/usage/v8/input/fill/demo.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/input/fill/index.md b/static/usage/v8/input/fill/index.md
new file mode 100644
index 00000000000..d640ed691b7
--- /dev/null
+++ b/static/usage/v8/input/fill/index.md
@@ -0,0 +1,14 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/input/fill/javascript.md b/static/usage/v8/input/fill/javascript.md
new file mode 100644
index 00000000000..60af531cd45
--- /dev/null
+++ b/static/usage/v8/input/fill/javascript.md
@@ -0,0 +1,7 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/fill/react.md b/static/usage/v8/input/fill/react.md
new file mode 100644
index 00000000000..d62ea62084c
--- /dev/null
+++ b/static/usage/v8/input/fill/react.md
@@ -0,0 +1,17 @@
+```tsx
+import React from 'react';
+import { IonInput } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+
+
+
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input/fill/vue.md b/static/usage/v8/input/fill/vue.md
new file mode 100644
index 00000000000..d1f2e440b05
--- /dev/null
+++ b/static/usage/v8/input/fill/vue.md
@@ -0,0 +1,18 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/filtering/angular/example_component_html.md b/static/usage/v8/input/filtering/angular/example_component_html.md
new file mode 100644
index 00000000000..31ddc03f197
--- /dev/null
+++ b/static/usage/v8/input/filtering/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/filtering/angular/example_component_ts.md b/static/usage/v8/input/filtering/angular/example_component_ts.md
new file mode 100644
index 00000000000..b0fc6a3331f
--- /dev/null
+++ b/static/usage/v8/input/filtering/angular/example_component_ts.md
@@ -0,0 +1,27 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import type { IonInput } from '@ionic/angular';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+ inputModel = '';
+
+ @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput;
+
+ onInput(ev) {
+ const value = ev.target!.value;
+
+ // Removes non alphanumeric characters
+ const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
+
+ /**
+ * Update both the state variable and
+ * the component to keep them in sync.
+ */
+ this.ionInputEl.value = this.inputModel = filteredValue;
+ }
+}
+```
diff --git a/static/usage/v8/input/filtering/demo.html b/static/usage/v8/input/filtering/demo.html
new file mode 100644
index 00000000000..deadb9f3189
--- /dev/null
+++ b/static/usage/v8/input/filtering/demo.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/input/filtering/index.md b/static/usage/v8/input/filtering/index.md
new file mode 100644
index 00000000000..72f943e6b98
--- /dev/null
+++ b/static/usage/v8/input/filtering/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/filtering/javascript.md b/static/usage/v8/input/filtering/javascript.md
new file mode 100644
index 00000000000..37af94dd426
--- /dev/null
+++ b/static/usage/v8/input/filtering/javascript.md
@@ -0,0 +1,16 @@
+```html
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/filtering/react.md b/static/usage/v8/input/filtering/react.md
new file mode 100644
index 00000000000..1722f8ad9af
--- /dev/null
+++ b/static/usage/v8/input/filtering/react.md
@@ -0,0 +1,36 @@
+```tsx
+import React, { useState, useRef } from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ const [inputModel, setInputModel] = useState('');
+ const ionInputEl = useRef(null);
+
+ const onInput = (ev: Event) => {
+ const value = (ev.target as HTMLIonInputElement).value as string;
+
+ // Removes non alphanumeric characters
+ const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
+
+ /**
+ * Update both the state variable and
+ * the component to keep them in sync.
+ */
+ setInputModel(filteredValue);
+
+ const inputCmp = ionInputEl.current;
+ if (inputCmp !== null) {
+ inputCmp.value = filteredValue;
+ }
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input/filtering/vue.md b/static/usage/v8/input/filtering/vue.md
new file mode 100644
index 00000000000..a95e5dcc843
--- /dev/null
+++ b/static/usage/v8/input/filtering/vue.md
@@ -0,0 +1,46 @@
+```html
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/helper-error/angular.md b/static/usage/v8/input/helper-error/angular.md
new file mode 100644
index 00000000000..ba5030c0026
--- /dev/null
+++ b/static/usage/v8/input/helper-error/angular.md
@@ -0,0 +1,12 @@
+```html
+
+```
diff --git a/static/usage/v8/input/helper-error/demo.html b/static/usage/v8/input/helper-error/demo.html
new file mode 100644
index 00000000000..76a11e8be75
--- /dev/null
+++ b/static/usage/v8/input/helper-error/demo.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/input/helper-error/index.md b/static/usage/v8/input/helper-error/index.md
new file mode 100644
index 00000000000..93bf8b09a7d
--- /dev/null
+++ b/static/usage/v8/input/helper-error/index.md
@@ -0,0 +1,18 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/input/helper-error/javascript.md b/static/usage/v8/input/helper-error/javascript.md
new file mode 100644
index 00000000000..55d306aa225
--- /dev/null
+++ b/static/usage/v8/input/helper-error/javascript.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+```
diff --git a/static/usage/v8/input/helper-error/react.md b/static/usage/v8/input/helper-error/react.md
new file mode 100644
index 00000000000..0067c90dac9
--- /dev/null
+++ b/static/usage/v8/input/helper-error/react.md
@@ -0,0 +1,44 @@
+```tsx
+import React, { useState } from 'react';
+import { IonInput } from '@ionic/react';
+
+function Example() {
+ const [isTouched, setIsTouched] = useState(false);
+ const [isValid, setIsValid] = useState();
+
+ const validateEmail = (email: string) => {
+ return email.match(
+ /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+ );
+ };
+
+ const validate = (ev: Event) => {
+ const value = (ev.target as HTMLInputElement).value;
+
+ setIsValid(undefined);
+
+ if (value === '') return;
+
+ validateEmail(value) !== null ? setIsValid(true) : setIsValid(false);
+ };
+
+ const markTouched = () => {
+ setIsTouched(true);
+ };
+
+ return (
+ validate(event)}
+ onIonBlur={() => markTouched()}
+ >
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input/helper-error/vue.md b/static/usage/v8/input/helper-error/vue.md
new file mode 100644
index 00000000000..ce801d04ac7
--- /dev/null
+++ b/static/usage/v8/input/helper-error/vue.md
@@ -0,0 +1,48 @@
+```html
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/label-placement/angular.md b/static/usage/v8/input/label-placement/angular.md
new file mode 100644
index 00000000000..151adb55b5d
--- /dev/null
+++ b/static/usage/v8/input/label-placement/angular.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/label-placement/demo.html b/static/usage/v8/input/label-placement/demo.html
new file mode 100644
index 00000000000..8c792ebd86a
--- /dev/null
+++ b/static/usage/v8/input/label-placement/demo.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+ Input
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/input/label-placement/index.md b/static/usage/v8/input/label-placement/index.md
new file mode 100644
index 00000000000..a6ef0581582
--- /dev/null
+++ b/static/usage/v8/input/label-placement/index.md
@@ -0,0 +1,13 @@
+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 from './angular.md';
+
+
diff --git a/static/usage/v8/input/label-placement/javascript.md b/static/usage/v8/input/label-placement/javascript.md
new file mode 100644
index 00000000000..f9c79fc46ae
--- /dev/null
+++ b/static/usage/v8/input/label-placement/javascript.md
@@ -0,0 +1,19 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/label-placement/react.md b/static/usage/v8/input/label-placement/react.md
new file mode 100644
index 00000000000..aa4f1b3c484
--- /dev/null
+++ b/static/usage/v8/input/label-placement/react.md
@@ -0,0 +1,27 @@
+```tsx
+import React from 'react';
+import { IonInput, IonItem, IonList } from '@ionic/react';
+
+function Example() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/input/label-placement/vue.md b/static/usage/v8/input/label-placement/vue.md
new file mode 100644
index 00000000000..8854647965d
--- /dev/null
+++ b/static/usage/v8/input/label-placement/vue.md
@@ -0,0 +1,30 @@
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/input/label-slot/angular.md b/static/usage/v8/input/label-slot/angular.md
new file mode 100644
index 00000000000..21bdbf74b64
--- /dev/null
+++ b/static/usage/v8/input/label-slot/angular.md
@@ -0,0 +1,9 @@
+```html
+
+
+
+ Email (Required)
+
+
+
+```
diff --git a/static/usage/v8/input/label-slot/demo.html b/static/usage/v8/input/label-slot/demo.html
new file mode 100644
index 00000000000..fc87d06e2c1
--- /dev/null
+++ b/static/usage/v8/input/label-slot/demo.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+ input
+
+
+
+
+
+
+
+
+
+
+
+
+
+