From 70d0db0664b0919fea589b83feada342563a8290 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 28 Aug 2026 15:43:29 -0700 Subject: [PATCH] chore: merge main into major-10.0 --- .github/workflows/CI.yml | 9 +- .prettierignore | 15 +- .prettierrc.js | 11 + CONTRIBUTING.md | 112 +- _templates/README.md | 2 +- _templates/playground/new/index.js | 4 +- .../new/{index.md.ejs.t => index.mdx.ejs.t} | 2 +- cspell.json | 1 + docs/angular/build-options.md | 12 + docs/angular/lifecycle.md | 2 + docs/angular/navigation.md | 6 +- docs/angular/overlays.md | 20 +- docs/angular/overview.md | 2 +- docs/angular/performance.md | 2 + docs/angular/pwa.md | 10 +- docs/angular/quickstart.md | 6 + docs/angular/slides.md | 34 +- docs/angular/storage.md | 2 + docs/angular/testing.md | 6 +- docs/angular/your-first-app.md | 6 + .../angular/your-first-app/2-taking-photos.md | 2 + .../angular/your-first-app/3-saving-photos.md | 34 +- .../your-first-app/4-loading-photos.md | 25 +- .../angular/your-first-app/5-adding-mobile.md | 34 +- .../your-first-app/6-deploying-mobile.md | 2 + docs/angular/your-first-app/7-live-reload.md | 2 + docs/angular/zoneless.md | 8 +- docs/api/accordion-group.md | 22 +- docs/api/accordion.md | 85 +- docs/api/action-sheet.md | 37 +- docs/api/alert.md | 46 +- docs/api/app.md | 38 +- docs/api/avatar.md | 31 +- docs/api/back-button.md | 29 +- docs/api/backdrop.md | 27 +- docs/api/badge.md | 34 +- docs/api/breadcrumb.md | 23 +- docs/api/breadcrumbs.md | 40 +- docs/api/button.md | 45 +- docs/api/buttons.md | 49 +- docs/api/card-content.md | 21 +- docs/api/card-header.md | 21 +- docs/api/card-subtitle.md | 21 +- docs/api/card-title.md | 26 +- docs/api/card.md | 43 +- docs/api/checkbox.md | 45 +- docs/api/chip.md | 32 +- docs/api/col.md | 29 +- docs/api/content.md | 51 +- docs/api/datetime-button.md | 28 +- docs/api/datetime.md | 134 +- docs/api/fab-button.md | 27 +- docs/api/fab-list.md | 21 +- docs/api/fab.md | 42 +- docs/api/footer.md | 39 +- docs/api/gallery-item.md | 18 +- docs/api/gallery.md | 47 +- docs/api/grid.md | 60 +- docs/api/header.md | 44 +- docs/api/icon.md | 10 +- docs/api/img.md | 27 +- docs/api/infinite-scroll-content.md | 20 +- docs/api/infinite-scroll.md | 38 +- docs/api/input-otp.md | 71 +- docs/api/input-password-toggle.md | 30 +- docs/api/input.md | 68 +- docs/api/item-divider.md | 35 +- docs/api/item-group.md | 30 +- docs/api/item-option.md | 26 +- docs/api/item-options.md | 31 +- docs/api/item-sliding.md | 35 +- docs/api/item.md | 224 +- docs/api/label.md | 31 +- docs/api/list-header.md | 34 +- docs/api/list.md | 35 +- docs/api/loading.md | 42 +- docs/api/menu-button.md | 26 +- docs/api/menu-toggle.md | 26 +- docs/api/menu.md | 45 +- docs/api/modal.md | 93 +- docs/api/nav-link.md | 26 +- docs/api/nav.md | 36 +- docs/api/note.md | 33 +- docs/api/picker-column-option.md | 19 +- docs/api/picker-column.md | 19 +- docs/api/picker.md | 41 +- docs/api/popover.md | 60 +- docs/api/progress-bar.md | 45 +- docs/api/radio-group.md | 27 +- docs/api/radio.md | 54 +- docs/api/range.md | 50 +- docs/api/refresher-content.md | 21 +- docs/api/refresher.md | 45 +- docs/api/reorder-group.md | 28 +- docs/api/reorder.md | 49 +- docs/api/ripple-effect.md | 35 +- docs/api/route-redirect.md | 40 +- docs/api/route.md | 113 +- docs/api/router-link.md | 29 +- docs/api/router-outlet.md | 30 +- docs/api/router.md | 42 +- docs/api/row.md | 28 +- docs/api/searchbar.md | 49 +- docs/api/segment-button.md | 39 +- docs/api/segment-content.md | 27 +- docs/api/segment-view.md | 25 +- docs/api/segment.md | 45 +- docs/api/select-option.md | 28 +- docs/api/select.md | 117 +- docs/api/skeleton-text.md | 30 +- docs/api/spinner.md | 35 +- docs/api/split-pane.md | 48 +- docs/api/tab-bar.md | 40 +- docs/api/tab-button.md | 42 +- docs/api/tab.md | 31 +- docs/api/tabs.md | 30 +- docs/api/text.md | 27 +- docs/api/textarea.md | 50 +- docs/api/thumbnail.md | 29 +- docs/api/title.md | 34 +- docs/api/toast.md | 50 +- docs/api/toggle.md | 51 +- docs/api/toolbar.md | 49 +- docs/cli.md | 4 +- docs/cli/configuration.md | 8 +- docs/cli/livereload.md | 4 + docs/contributing/coc.md | 2 +- docs/core-concepts/cross-platform.md | 2 +- docs/core-concepts/fundamentals.md | 10 +- docs/core-concepts/webview.md | 8 +- .../what-are-progressive-web-apps.md | 10 +- docs/deployment/app-store.md | 8 +- docs/deployment/play-store.mdx | 12 +- docs/deployment/progressive-web-app.md | 2 +- .../guides/first-app-v3/intro.md | 12 +- .../guides/first-app-v4/intro.md | 14 +- docs/developing/config.md | 2 +- docs/developing/config/per-platform/index.md | 8 + docs/developing/hardware-back-button.md | 4 + docs/developing/keyboard.md | 20 +- docs/developing/managing-focus.md | 4 +- docs/developing/scaffolding.md | 4 + docs/developing/tips.md | 8 +- docs/index.md | 25 +- docs/intro/cli.md | 2 + docs/intro/environment.md | 8 +- docs/javascript/quickstart.md | 8 + docs/layout/css-utilities.md | 2 + docs/layout/dynamic-font-scaling.md | 8 +- docs/layout/structure.md | 10 +- docs/react/lifecycle.md | 4 + docs/react/navigation.md | 4 +- docs/react/overlays.md | 16 +- docs/react/pwa.md | 14 +- docs/react/quickstart.md | 8 + docs/react/slides.md | 36 +- docs/react/storage.md | 2 + docs/react/your-first-app.md | 4 + docs/react/your-first-app/3-saving-photos.md | 34 +- docs/react/your-first-app/4-loading-photos.md | 25 +- docs/react/your-first-app/5-adding-mobile.md | 36 +- .../your-first-app/6-deploying-mobile.md | 2 + docs/react/your-first-app/7-live-reload.md | 2 + docs/reference/browser-support.md | 2 + docs/reference/glossary.md | 540 +--- docs/reference/support.md | 11 +- docs/reference/versioning.md | 4 +- docs/techniques/security.md | 6 +- docs/theming/advanced.md | 12 +- docs/theming/basics.md | 6 +- docs/theming/colors.md | 4 +- docs/theming/css-shadow-parts.md | 26 +- docs/theming/css-variables.md | 2 +- docs/theming/dark-mode.md | 34 +- docs/theming/high-contrast-mode.md | 16 +- docs/theming/themes.md | 2 +- docs/troubleshooting/cors.md | 18 +- docs/troubleshooting/debugging.md | 4 + docs/troubleshooting/native.md | 6 +- docs/troubleshooting/runtime.md | 10 + docs/updating/4-0.md | 12 +- docs/updating/5-0.md | 4 + docs/updating/6-0.md | 12 + docs/updating/7-0.md | 4 + docs/updating/8-0.md | 4 + docs/updating/9-0.md | 299 +- docs/utilities/animations.md | 16 +- docs/utilities/gestures.md | 4 +- docs/vue/lifecycle.md | 2 + docs/vue/navigation.md | 2 + docs/vue/overview.md | 2 +- docs/vue/pwa.md | 12 +- docs/vue/quickstart.md | 8 + docs/vue/slides.md | 36 +- docs/vue/storage.md | 2 + docs/vue/troubleshooting.md | 6 +- docs/vue/utility-functions.md | 4 + docs/vue/virtual-scroll.md | 4 + docs/vue/your-first-app.md | 4 + docs/vue/your-first-app/3-saving-photos.md | 34 +- docs/vue/your-first-app/4-loading-photos.md | 38 +- docs/vue/your-first-app/5-adding-mobile.md | 45 +- docs/vue/your-first-app/6-deploying-mobile.md | 2 + docs/vue/your-first-app/7-live-reload.md | 4 +- docusaurus.config.js | 3 +- package-lock.json | 2774 ++++++++--------- package.json | 40 +- .../index.js | 49 +- renovate.json | 116 +- scripts/cli.mjs | 2 - scripts/native.mjs | 3 - scripts/release-notes.mjs | 1 - .../global/PlaygroundTabs/index.tsx | 2 +- src/styles/components/_theme-toggle.scss | 52 - src/styles/custom.scss | 1 - src/theme/Icon/DarkMode/index.tsx | 24 + src/theme/Icon/LightMode/index.tsx | 24 + .../stackblitz/v10/angular/package-lock.json | 543 +++- .../code/stackblitz/v10/angular/package.json | 4 +- .../stackblitz/v10/html/package-lock.json | 140 +- static/code/stackblitz/v10/html/package.json | 2 +- .../stackblitz/v10/react/package-lock.json | 253 +- static/code/stackblitz/v10/react/package.json | 4 +- .../code/stackblitz/v10/vue/package-lock.json | 472 ++- static/code/stackblitz/v10/vue/package.json | 6 +- .../stackblitz/v8/angular/package-lock.json | 18 +- .../code/stackblitz/v8/angular/package.json | 4 +- .../code/stackblitz/v8/html/package-lock.json | 8 +- static/code/stackblitz/v8/html/package.json | 2 +- .../stackblitz/v8/react/package-lock.json | 38 +- static/code/stackblitz/v8/react/package.json | 4 +- .../code/stackblitz/v8/vue/package-lock.json | 40 +- static/code/stackblitz/v8/vue/package.json | 4 +- .../stackblitz/v9/angular/package-lock.json | 543 +++- .../code/stackblitz/v9/angular/package.json | 4 +- .../code/stackblitz/v9/html/package-lock.json | 140 +- static/code/stackblitz/v9/html/package.json | 2 +- .../stackblitz/v9/react/package-lock.json | 253 +- static/code/stackblitz/v9/react/package.json | 4 +- .../code/stackblitz/v9/vue/package-lock.json | 472 ++- static/code/stackblitz/v9/vue/package.json | 6 +- static/demos/api/action-sheet/index.html | 2 +- static/demos/api/alert/index.html | 2 +- static/demos/api/avatar/index.html | 2 +- static/demos/api/back-button/index.html | 2 +- static/demos/api/backdrop/index.html | 2 +- static/demos/api/badge/index.html | 2 +- static/demos/api/button/index.html | 2 +- static/demos/api/card/index.html | 2 +- static/demos/api/checkbox/index.html | 2 +- static/demos/api/chip/index.html | 2 +- static/demos/api/content/index.html | 2 +- static/demos/api/datetime/index.html | 2 +- static/demos/api/fab/index.html | 2 +- static/demos/api/grid/index.html | 2 +- static/demos/api/infinite-scroll/index.html | 2 +- static/demos/api/input/index.html | 2 +- static/demos/api/item/index.html | 2 +- static/demos/api/list/index.html | 2 +- static/demos/api/loading/index.html | 2 +- static/demos/api/menu/index.html | 2 +- static/demos/api/modal/index.html | 2 +- static/demos/api/nav/index.html | 2 +- static/demos/api/note/index.html | 2 +- static/demos/api/picker/index.html | 2 +- static/demos/api/popover/index.html | 2 +- static/demos/api/progress-bar/index.html | 2 +- static/demos/api/radio/index.html | 2 +- static/demos/api/range/index.html | 2 +- static/demos/api/refresher/index.html | 2 +- static/demos/api/reorder/index.html | 2 +- static/demos/api/router-link/index.html | 2 +- static/demos/api/searchbar/index.html | 2 +- static/demos/api/segment/index.html | 2 +- static/demos/api/select/index.html | 2 +- static/demos/api/skeleton-text/index.html | 2 +- static/demos/api/slides/index.html | 2 +- static/demos/api/spinner/index.html | 2 +- static/demos/api/tabs/index.html | 2 +- static/demos/api/text/index.html | 2 +- static/demos/api/thumbnail/index.html | 2 +- static/demos/api/toast/index.html | 2 +- static/demos/api/toggle/index.html | 2 +- static/demos/api/toolbar/index.html | 2 +- .../accessibility/animations/demo.html | 6 +- .../animations/{index.md => index.mdx} | 0 static/usage/v10/accordion/basic/demo.html | 6 +- .../accordion/basic/{index.md => index.mdx} | 0 .../advanced-expansion-styles/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../customization/expansion-styles/demo.html | 6 +- .../expansion-styles/{index.md => index.mdx} | 0 .../accordion/customization/icons/demo.html | 6 +- .../icons/{index.md => index.mdx} | 0 .../accordion/customization/theming/demo.html | 6 +- .../theming/{index.md => index.mdx} | 0 .../v10/accordion/disable/group/demo.html | 6 +- .../disable/group/{index.md => index.mdx} | 0 .../accordion/disable/individual/demo.html | 6 +- .../individual/{index.md => index.mdx} | 0 .../v10/accordion/listen-changes/demo.html | 6 +- .../listen-changes/{index.md => index.mdx} | 0 static/usage/v10/accordion/multiple/demo.html | 6 +- .../multiple/{index.md => index.mdx} | 0 .../v10/accordion/readonly/group/demo.html | 6 +- .../readonly/group/{index.md => index.mdx} | 0 .../accordion/readonly/individual/demo.html | 6 +- .../individual/{index.md => index.mdx} | 0 static/usage/v10/accordion/toggle/demo.html | 6 +- .../accordion/toggle/{index.md => index.mdx} | 0 .../v10/action-sheet/controller/demo.html | 6 +- .../controller/{index.md => index.mdx} | 0 .../v10/action-sheet/inline/isOpen/demo.html | 6 +- .../inline/isOpen/{index.md => index.mdx} | 0 .../v10/action-sheet/inline/trigger/demo.html | 6 +- .../inline/trigger/{index.md => index.mdx} | 0 .../role-info-on-dismiss/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../action-sheet/theming/styling/demo.html | 6 +- .../theming/styling/{index.md => index.mdx} | 0 static/usage/v10/alert/buttons/demo.html | 6 +- .../v10/alert/buttons/{index.md => index.mdx} | 0 .../usage/v10/alert/customization/demo.html | 6 +- .../customization/{index.md => index.mdx} | 0 .../usage/v10/alert/inputs/radios/demo.html | 6 +- .../inputs/radios/{index.md => index.mdx} | 0 .../v10/alert/inputs/text-inputs/demo.html | 6 +- .../text-inputs/{index.md => index.mdx} | 0 .../v10/alert/presenting/controller/demo.html | 6 +- .../controller/{index.md => index.mdx} | 0 .../v10/alert/presenting/isOpen/demo.html | 6 +- .../presenting/isOpen/{index.md => index.mdx} | 0 .../v10/alert/presenting/trigger/demo.html | 6 +- .../trigger/{index.md => index.mdx} | 0 static/usage/v10/animations/basic/demo.html | 8 +- .../animations/basic/{index.md => index.mdx} | 0 .../before-and-after-hooks/demo.html | 8 +- .../{index.md => index.mdx} | 0 static/usage/v10/animations/chain/demo.html | 8 +- .../animations/chain/{index.md => index.mdx} | 0 .../gesture/angular/example_component_ts.md | 5 +- static/usage/v10/animations/gesture/demo.html | 8 +- .../gesture/{index.md => index.mdx} | 0 static/usage/v10/animations/group/demo.html | 8 +- .../animations/group/{index.md => index.mdx} | 0 .../usage/v10/animations/keyframes/demo.html | 8 +- .../keyframes/{index.md => index.mdx} | 0 .../v10/animations/modal-override/demo.html | 8 +- .../modal-override/{index.md => index.mdx} | 0 .../v10/animations/preference-based/demo.html | 8 +- .../preference-based/{index.md => index.mdx} | 0 static/usage/v10/app/set-focus/demo.html | 6 +- .../v10/app/set-focus/{index.md => index.mdx} | 0 static/usage/v10/avatar/basic/demo.html | 6 +- .../v10/avatar/basic/{index.md => index.mdx} | 0 static/usage/v10/avatar/chip/demo.html | 6 +- .../v10/avatar/chip/{index.md => index.mdx} | 0 static/usage/v10/avatar/item/demo.html | 6 +- .../v10/avatar/item/{index.md => index.mdx} | 0 .../avatar/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/back-button/basic/demo.html | 6 +- .../back-button/basic/{index.md => index.mdx} | 0 static/usage/v10/back-button/custom/demo.html | 6 +- .../custom/{index.md => index.mdx} | 0 static/usage/v10/backdrop/basic/demo.html | 6 +- .../backdrop/basic/{index.md => index.mdx} | 0 static/usage/v10/backdrop/styling/demo.html | 6 +- .../backdrop/styling/{index.md => index.mdx} | 0 static/usage/v10/badge/basic/demo.html | 6 +- .../v10/badge/basic/{index.md => index.mdx} | 0 .../usage/v10/badge/inside-tab-bar/demo.html | 6 +- .../inside-tab-bar/{index.md => index.mdx} | 0 .../usage/v10/badge/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../badge/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/breadcrumbs/basic/demo.html | 6 +- .../breadcrumbs/basic/{index.md => index.mdx} | 0 .../expand-on-click/demo.html | 6 +- .../expand-on-click/{index.md => index.mdx} | 0 .../items-before-after/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../collapsing-items/max-items/demo.html | 6 +- .../max-items/{index.md => index.mdx} | 0 .../popover-on-click/demo.html | 6 +- .../popover-on-click/{index.md => index.mdx} | 0 .../icons/custom-separators/demo.html | 6 +- .../custom-separators/{index.md => index.mdx} | 0 .../icons/icons-on-items/demo.html | 6 +- .../icons-on-items/{index.md => index.mdx} | 0 .../v10/breadcrumbs/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/button/basic/demo.html | 6 +- .../v10/button/basic/{index.md => index.mdx} | 0 static/usage/v10/button/expand/demo.html | 6 +- .../v10/button/expand/{index.md => index.mdx} | 0 static/usage/v10/button/fill/demo.html | 6 +- .../v10/button/fill/{index.md => index.mdx} | 0 static/usage/v10/button/icons/demo.html | 6 +- .../v10/button/icons/{index.md => index.mdx} | 0 static/usage/v10/button/shape/demo.html | 6 +- .../v10/button/shape/{index.md => index.mdx} | 0 static/usage/v10/button/size/demo.html | 6 +- .../v10/button/size/{index.md => index.mdx} | 0 .../usage/v10/button/text-wrapping/demo.html | 6 +- .../text-wrapping/{index.md => index.mdx} | 0 .../usage/v10/button/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../button/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/buttons/basic/demo.html | 6 +- .../v10/buttons/basic/{index.md => index.mdx} | 0 static/usage/v10/buttons/placement/demo.html | 6 +- .../buttons/placement/{index.md => index.mdx} | 0 static/usage/v10/buttons/types/demo.html | 6 +- .../v10/buttons/types/{index.md => index.mdx} | 0 static/usage/v10/card/basic/demo.html | 6 +- .../v10/card/basic/{index.md => index.mdx} | 0 static/usage/v10/card/buttons/demo.html | 6 +- .../v10/card/buttons/{index.md => index.mdx} | 0 static/usage/v10/card/list/demo.html | 6 +- .../v10/card/list/{index.md => index.mdx} | 0 static/usage/v10/card/media/demo.html | 6 +- .../v10/card/media/{index.md => index.mdx} | 0 .../usage/v10/card/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../v10/card/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/checkbox/alignment/demo.html | 6 +- .../alignment/{index.md => index.mdx} | 0 static/usage/v10/checkbox/basic/demo.html | 6 +- .../checkbox/basic/{index.md => index.mdx} | 0 .../usage/v10/checkbox/helper-error/demo.html | 6 +- .../helper-error/{index.md => index.mdx} | 0 .../v10/checkbox/indeterminate/demo.html | 6 +- .../indeterminate/{index.md => index.mdx} | 0 static/usage/v10/checkbox/justify/demo.html | 6 +- .../checkbox/justify/{index.md => index.mdx} | 0 .../usage/v10/checkbox/label-link/demo.html | 6 +- .../label-link/{index.md => index.mdx} | 0 .../v10/checkbox/label-placement/demo.html | 6 +- .../label-placement/{index.md => index.mdx} | 0 .../checkbox/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/chip/basic/demo.html | 6 +- .../v10/chip/basic/{index.md => index.mdx} | 0 static/usage/v10/chip/slots/demo.html | 6 +- .../v10/chip/slots/{index.md => index.mdx} | 0 .../usage/v10/chip/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../v10/chip/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/common.js | 2 +- static/usage/v10/config/mode/demo.html | 6 +- .../v10/config/mode/{index.md => index.mdx} | 0 static/usage/v10/content/basic/demo.html | 6 +- .../v10/content/basic/{index.md => index.mdx} | 0 static/usage/v10/content/fixed/demo.html | 6 +- .../v10/content/fixed/{index.md => index.mdx} | 0 static/usage/v10/content/fullscreen/demo.html | 6 +- .../fullscreen/{index.md => index.mdx} | 0 .../usage/v10/content/header-footer/demo.html | 6 +- .../header-footer/{index.md => index.mdx} | 0 .../usage/v10/content/scroll-events/demo.html | 6 +- .../scroll-events/{index.md => index.mdx} | 0 .../v10/content/scroll-methods/demo.html | 6 +- .../scroll-methods/{index.md => index.mdx} | 0 .../v10/content/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../content/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../theming/css-shadow-parts/demo.html | 6 +- .../css-shadow-parts/{index.md => index.mdx} | 0 .../v10/content/theming/safe-area/demo.html | 6 +- .../theming/safe-area/{index.md => index.mdx} | 0 .../usage/v10/datetime-button/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../datetime-button/format-options/demo.html | 6 +- .../format-options/{index.md => index.mdx} | 0 static/usage/v10/datetime/basic/demo.html | 6 +- .../datetime/basic/{index.md => index.mdx} | 0 .../customizing-button-texts/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../buttons/customizing-buttons/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../showing-confirmation-buttons/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../date-constraints/advanced/demo.html | 6 +- .../advanced/{index.md => index.mdx} | 0 .../date-constraints/max-min/demo.html | 6 +- .../max-min/{index.md => index.mdx} | 0 .../date-constraints/values/demo.html | 6 +- .../values/{index.md => index.mdx} | 0 .../v10/datetime/format-options/demo.html | 6 +- .../format-options/{index.md => index.mdx} | 0 .../datetime/highlightedDates/array/demo.html | 6 +- .../array/{index.md => index.mdx} | 0 .../highlightedDates/callback/demo.html | 6 +- .../callback/{index.md => index.mdx} | 0 .../localization/custom-locale/demo.html | 6 +- .../custom-locale/{index.md => index.mdx} | 0 .../localization/first-day-of-week/demo.html | 6 +- .../first-day-of-week/{index.md => index.mdx} | 0 .../localization/hour-cycle/demo.html | 6 +- .../hour-cycle/{index.md => index.mdx} | 0 .../locale-extension-tags/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../localization/time-label/demo.html | 6 +- .../time-label/{index.md => index.mdx} | 0 static/usage/v10/datetime/multiple/demo.html | 6 +- .../datetime/multiple/{index.md => index.mdx} | 0 .../v10/datetime/presentation/date/demo.html | 6 +- .../presentation/date/{index.md => index.mdx} | 0 .../presentation/month-and-year/demo.html | 6 +- .../month-and-year/{index.md => index.mdx} | 0 .../v10/datetime/presentation/time/demo.html | 6 +- .../presentation/time/{index.md => index.mdx} | 0 .../v10/datetime/presentation/wheel/demo.html | 6 +- .../wheel/{index.md => index.mdx} | 0 .../v10/datetime/show-adjacent-days/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../datetime/styling/calendar-days/demo.html | 6 +- .../calendar-days/{index.md => index.mdx} | 0 .../styling/calendar-header/demo.html | 6 +- .../calendar-header/{index.md => index.mdx} | 0 .../styling/datetime-header/demo.html | 6 +- .../datetime-header/{index.md => index.mdx} | 0 .../datetime/styling/global-theming/demo.html | 6 +- .../global-theming/{index.md => index.mdx} | 0 .../datetime/styling/wheel-styling/demo.html | 6 +- .../wheel-styling/{index.md => index.mdx} | 0 .../title/customizing-title/demo.html | 6 +- .../customizing-title/{index.md => index.mdx} | 0 .../title/showing-default-title/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v10/fab/basic/demo.html | 6 +- .../v10/fab/basic/{index.md => index.mdx} | 0 static/usage/v10/fab/before-content/demo.html | 6 +- .../before-content/{index.md => index.mdx} | 0 static/usage/v10/fab/button-sizing/demo.html | 6 +- .../fab/button-sizing/{index.md => index.mdx} | 0 static/usage/v10/fab/list-side/demo.html | 6 +- .../v10/fab/list-side/{index.md => index.mdx} | 0 static/usage/v10/fab/positioning/demo.html | 6 +- .../fab/positioning/{index.md => index.mdx} | 0 static/usage/v10/fab/safe-area/demo.html | 6 +- .../v10/fab/safe-area/{index.md => index.mdx} | 0 static/usage/v10/fab/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-custom-properties/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../angular/example_component_css.md | 4 +- .../fab/theming/css-shadow-parts/demo.html | 10 +- .../css-shadow-parts/{index.md => index.mdx} | 0 .../theming/css-shadow-parts/javascript.md | 4 +- .../css-shadow-parts/javascript/index_html.md | 4 +- .../css-shadow-parts/react/main_css.md | 4 +- .../v10/fab/theming/css-shadow-parts/vue.md | 4 +- static/usage/v10/footer/basic/demo.html | 6 +- .../v10/footer/basic/{index.md => index.mdx} | 0 .../v10/footer/custom-scroll-target/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v10/footer/fade/demo.html | 6 +- .../v10/footer/fade/{index.md => index.mdx} | 0 static/usage/v10/footer/no-border/demo.html | 6 +- .../footer/no-border/{index.md => index.mdx} | 0 static/usage/v10/footer/translucent/demo.html | 6 +- .../translucent/{index.md => index.mdx} | 0 static/usage/v10/gallery/basic/demo.html | 2 +- .../v10/gallery/basic/{index.md => index.mdx} | 0 static/usage/v10/gallery/columns/demo.html | 2 +- .../gallery/columns/{index.md => index.mdx} | 0 static/usage/v10/gallery/gap/demo.html | 2 +- .../v10/gallery/gap/{index.md => index.mdx} | 0 static/usage/v10/gallery/images/demo.html | 2 +- .../gallery/images/{index.md => index.mdx} | 0 .../v10/gallery/masonry-best-fit/demo.html | 2 +- .../masonry-best-fit/{index.md => index.mdx} | 0 .../v10/gallery/masonry-sequential/demo.html | 2 +- .../{index.md => index.mdx} | 0 static/usage/v10/gallery/uniform/demo.html | 2 +- .../gallery/uniform/{index.md => index.mdx} | 0 .../basic/angular/example_component_ts.md | 6 +- static/usage/v10/gestures/basic/demo.html | 8 +- .../gestures/basic/{index.md => index.mdx} | 0 .../angular/example_component_ts.md | 5 +- .../usage/v10/gestures/double-click/demo.html | 8 +- .../double-click/{index.md => index.mdx} | 0 static/usage/v10/grid/basic/demo.html | 6 +- .../v10/grid/basic/{index.md => index.mdx} | 0 .../grid/customizing/column-number/demo.html | 6 +- .../column-number/{index.md => index.mdx} | 0 .../v10/grid/customizing/padding/demo.html | 6 +- .../padding/{index.md => index.mdx} | 0 .../v10/grid/customizing/width/demo.html | 6 +- .../customizing/width/{index.md => index.mdx} | 0 static/usage/v10/grid/fixed/demo.html | 6 +- .../v10/grid/fixed/{index.md => index.mdx} | 0 .../v10/grid/horizontal-alignment/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../v10/grid/offset-responsive/demo.html | 6 +- .../offset-responsive/{index.md => index.mdx} | 0 static/usage/v10/grid/offset/demo.html | 6 +- .../v10/grid/offset/{index.md => index.mdx} | 0 .../v10/grid/push-pull-responsive/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v10/grid/push-pull/demo.html | 6 +- .../grid/push-pull/{index.md => index.mdx} | 0 static/usage/v10/grid/size-auto/demo.html | 6 +- .../grid/size-auto/{index.md => index.mdx} | 0 .../usage/v10/grid/size-responsive/demo.html | 6 +- .../size-responsive/{index.md => index.mdx} | 0 static/usage/v10/grid/size/demo.html | 6 +- .../v10/grid/size/{index.md => index.mdx} | 0 .../v10/grid/vertical-alignment/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v10/header/basic/demo.html | 6 +- .../v10/header/basic/{index.md => index.mdx} | 0 static/usage/v10/header/condense/demo.html | 6 +- .../header/condense/{index.md => index.mdx} | 0 .../v10/header/custom-scroll-target/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v10/header/fade/demo.html | 6 +- .../v10/header/fade/{index.md => index.mdx} | 0 static/usage/v10/header/no-border/demo.html | 6 +- .../header/no-border/{index.md => index.mdx} | 0 static/usage/v10/header/translucent/demo.html | 6 +- .../translucent/{index.md => index.mdx} | 0 static/usage/v10/icon/basic/demo.html | 6 +- .../v10/icon/basic/{index.md => index.mdx} | 0 static/usage/v10/icon/custom-svgs/demo.html | 6 +- .../icon/custom-svgs/{index.md => index.mdx} | 0 static/usage/v10/icon/font-icons/demo.html | 6 +- .../icon/font-icons/{index.md => index.mdx} | 0 static/usage/v10/img/basic/demo.html | 6 +- .../v10/img/basic/{index.md => index.mdx} | 0 .../usage/v10/infinite-scroll/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../custom-infinite-scroll-content/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../infinite-scroll-content/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v10/input-otp/basic/demo.html | 6 +- .../input-otp/basic/{index.md => index.mdx} | 0 static/usage/v10/input-otp/fill/demo.html | 6 +- .../input-otp/fill/{index.md => index.mdx} | 0 static/usage/v10/input-otp/pattern/demo.html | 6 +- .../input-otp/pattern/{index.md => index.mdx} | 0 .../usage/v10/input-otp/separators/demo.html | 6 +- .../separators/{index.md => index.mdx} | 0 static/usage/v10/input-otp/shape/demo.html | 6 +- .../input-otp/shape/{index.md => index.mdx} | 0 static/usage/v10/input-otp/size/demo.html | 6 +- .../input-otp/size/{index.md => index.mdx} | 0 static/usage/v10/input-otp/states/demo.html | 6 +- .../input-otp/states/{index.md => index.mdx} | 0 .../v10/input-otp/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/input-otp/type/demo.html | 6 +- .../input-otp/type/{index.md => index.mdx} | 0 .../v10/input-password-toggle/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 static/usage/v10/input/basic/demo.html | 6 +- .../v10/input/basic/{index.md => index.mdx} | 0 static/usage/v10/input/clear/demo.html | 6 +- .../v10/input/clear/{index.md => index.mdx} | 0 .../v10/input/counter-alignment/demo.html | 6 +- .../counter-alignment/{index.md => index.mdx} | 0 static/usage/v10/input/counter/demo.html | 6 +- .../v10/input/counter/{index.md => index.mdx} | 0 static/usage/v10/input/fill/demo.html | 6 +- .../v10/input/fill/{index.md => index.mdx} | 0 static/usage/v10/input/filtering/demo.html | 6 +- .../input/filtering/{index.md => index.mdx} | 0 static/usage/v10/input/helper-error/demo.html | 6 +- .../helper-error/{index.md => index.mdx} | 0 .../usage/v10/input/label-placement/demo.html | 6 +- .../label-placement/{index.md => index.mdx} | 0 static/usage/v10/input/label-slot/demo.html | 6 +- .../input/label-slot/{index.md => index.mdx} | 0 static/usage/v10/input/mask/demo.html | 6 +- .../v10/input/mask/{index.md => index.mdx} | 0 .../v10/input/no-visible-label/demo.html | 6 +- .../no-visible-label/{index.md => index.mdx} | 0 static/usage/v10/input/set-focus/demo.html | 6 +- .../input/set-focus/{index.md => index.mdx} | 0 .../usage/v10/input/start-end-slots/demo.html | 6 +- .../start-end-slots/{index.md => index.mdx} | 0 .../usage/v10/input/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../input/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/input/types/demo.html | 6 +- .../v10/input/types/{index.md => index.mdx} | 0 static/usage/v10/item-divider/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../v10/item-divider/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/item-group/basic/demo.html | 6 +- .../item-group/basic/{index.md => index.mdx} | 0 .../v10/item-group/sliding-items/demo.html | 6 +- .../sliding-items/{index.md => index.mdx} | 0 static/usage/v10/item-sliding/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../v10/item-sliding/expandable/demo.html | 6 +- .../expandable/{index.md => index.mdx} | 0 static/usage/v10/item-sliding/icons/demo.html | 6 +- .../icons/{index.md => index.mdx} | 0 static/usage/v10/item/basic/demo.html | 6 +- .../v10/item/basic/{index.md => index.mdx} | 0 static/usage/v10/item/buttons/demo.html | 6 +- .../v10/item/buttons/{index.md => index.mdx} | 0 static/usage/v10/item/clickable/demo.html | 6 +- .../item/clickable/{index.md => index.mdx} | 0 .../v10/item/content-types/actions/demo.html | 6 +- .../actions/{index.md => index.mdx} | 0 .../v10/item/content-types/controls/demo.html | 6 +- .../controls/{index.md => index.mdx} | 0 .../v10/item/content-types/metadata/demo.html | 6 +- .../metadata/{index.md => index.mdx} | 0 .../supporting-visuals/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../v10/item/content-types/text/demo.html | 6 +- .../text/{index.md => index.mdx} | 0 static/usage/v10/item/detail-arrows/demo.html | 6 +- .../detail-arrows/{index.md => index.mdx} | 0 static/usage/v10/item/inputs/demo.html | 6 +- .../v10/item/inputs/{index.md => index.mdx} | 0 static/usage/v10/item/lines/demo.html | 6 +- .../v10/item/lines/{index.md => index.mdx} | 0 static/usage/v10/item/media/demo.html | 6 +- .../v10/item/media/{index.md => index.mdx} | 0 .../usage/v10/item/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../v10/item/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../item/theming/css-shadow-parts/demo.html | 6 +- .../css-shadow-parts/{index.md => index.mdx} | 0 .../item/theming/input-highlight/demo.html | 6 +- .../input-highlight/{index.md => index.mdx} | 0 .../usage/v10/keyboard/enterkeyhint/demo.html | 6 +- .../enterkeyhint/{index.md => index.mdx} | 0 static/usage/v10/keyboard/inputmode/demo.html | 6 +- .../inputmode/{index.md => index.mdx} | 0 static/usage/v10/label/basic/demo.html | 6 +- .../v10/label/basic/{index.md => index.mdx} | 0 static/usage/v10/label/input/demo.html | 6 +- .../v10/label/input/{index.md => index.mdx} | 0 static/usage/v10/label/item/demo.html | 6 +- .../v10/label/item/{index.md => index.mdx} | 0 .../usage/v10/label/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../v10/layout/dynamic-font-scaling/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v10/list-header/basic/demo.html | 6 +- .../list-header/basic/{index.md => index.mdx} | 0 .../usage/v10/list-header/buttons/demo.html | 6 +- .../buttons/{index.md => index.mdx} | 0 static/usage/v10/list-header/lines/demo.html | 6 +- .../list-header/lines/{index.md => index.mdx} | 0 .../v10/list-header/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/list/basic/demo.html | 6 +- .../v10/list/basic/{index.md => index.mdx} | 0 static/usage/v10/list/inset/demo.html | 6 +- .../v10/list/inset/{index.md => index.mdx} | 0 static/usage/v10/list/lines/demo.html | 6 +- .../v10/list/lines/{index.md => index.mdx} | 0 static/usage/v10/loading/controller/demo.html | 8 +- .../controller/{index.md => index.mdx} | 0 static/usage/v10/loading/inline/demo.html | 6 +- .../loading/inline/{index.md => index.mdx} | 0 static/usage/v10/loading/spinners/demo.html | 6 +- .../loading/spinners/{index.md => index.mdx} | 0 static/usage/v10/loading/theming/demo.html | 8 +- .../loading/theming/{index.md => index.mdx} | 0 static/usage/v10/menu/basic/demo.html | 6 +- .../v10/menu/basic/{index.md => index.mdx} | 0 static/usage/v10/menu/multiple/demo.html | 8 +- .../v10/menu/multiple/{index.md => index.mdx} | 0 static/usage/v10/menu/sides/demo.html | 6 +- .../v10/menu/sides/{index.md => index.mdx} | 0 static/usage/v10/menu/theming/demo.html | 6 +- .../v10/menu/theming/{index.md => index.mdx} | 0 static/usage/v10/menu/toggle/demo.html | 6 +- .../v10/menu/toggle/{index.md => index.mdx} | 0 static/usage/v10/menu/type/demo.html | 6 +- .../v10/menu/type/{index.md => index.mdx} | 0 static/usage/v10/menu/type/react.md | 3 +- .../v10/modal/can-dismiss/boolean/demo.html | 6 +- .../boolean/{index.md => index.mdx} | 0 .../modal/can-dismiss/child-state/demo.html | 6 +- .../child-state/{index.md => index.mdx} | 0 .../v10/modal/can-dismiss/function/demo.html | 6 +- .../function/{index.md => index.mdx} | 0 .../prevent-swipe-to-close/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v10/modal/card/basic/demo.html | 6 +- .../modal/card/basic/{index.md => index.mdx} | 0 static/usage/v10/modal/controller/demo.html | 8 +- .../modal/controller/{index.md => index.mdx} | 0 static/usage/v10/modal/controller/react.md | 2 +- .../usage/v10/modal/custom-dialogs/demo.html | 6 +- .../custom-dialogs/{index.md => index.mdx} | 0 .../usage/v10/modal/drag-move-event/demo.html | 6 +- .../drag-move-event/{index.md => index.mdx} | 0 .../v10/modal/drag-start-end-events/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v10/modal/inline/basic/demo.html | 6 +- .../inline/basic/{index.md => index.mdx} | 0 .../usage/v10/modal/inline/is-open/demo.html | 6 +- .../inline/is-open/{index.md => index.mdx} | 0 .../v10/modal/performance/mount/demo.html | 6 +- .../performance/mount/{index.md => index.mdx} | 0 .../v10/modal/sheet/auto-height/demo.html | 6 +- .../sheet/auto-height/{index.md => index.mdx} | 0 .../modal/sheet/background-content/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v10/modal/sheet/basic/demo.html | 6 +- .../modal/sheet/basic/{index.md => index.mdx} | 0 .../modal/sheet/expand-to-scroll/demo.html | 6 +- .../expand-to-scroll/{index.md => index.mdx} | 0 .../v10/modal/sheet/handle-behavior/demo.html | 6 +- .../handle-behavior/{index.md => index.mdx} | 0 .../v10/modal/styling/animations/demo.html | 8 +- .../animations/{index.md => index.mdx} | 0 .../usage/v10/modal/styling/theming/demo.html | 6 +- .../styling/theming/{index.md => index.mdx} | 0 .../usage/v10/nav/modal-navigation/demo.html | 6 +- .../modal-navigation/{index.md => index.mdx} | 0 static/usage/v10/nav/nav-link/demo.html | 6 +- .../v10/nav/nav-link/{index.md => index.mdx} | 0 static/usage/v10/navigation/demo.html | 6 +- .../v10/navigation/{index.md => index.mdx} | 0 static/usage/v10/note/basic/demo.html | 6 +- .../v10/note/basic/{index.md => index.mdx} | 0 static/usage/v10/note/item/demo.html | 6 +- .../v10/note/item/{index.md => index.mdx} | 0 .../usage/v10/note/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../v10/note/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/picker/basic/demo.html | 6 +- .../v10/picker/basic/{index.md => index.mdx} | 0 static/usage/v10/picker/modal/demo.html | 6 +- .../v10/picker/modal/{index.md => index.mdx} | 0 .../usage/v10/picker/prefix-suffix/demo.html | 6 +- .../prefix-suffix/{index.md => index.mdx} | 0 .../picker/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../customization/positioning/demo.html | 6 +- .../positioning/{index.md => index.mdx} | 0 .../popover/customization/sizing/demo.html | 6 +- .../sizing/{index.md => index.mdx} | 0 .../popover/customization/styling/demo.html | 6 +- .../styling/{index.md => index.mdx} | 0 static/usage/v10/popover/nested/demo.html | 6 +- .../popover/nested/{index.md => index.mdx} | 0 .../v10/popover/performance/mount/demo.html | 6 +- .../performance/mount/{index.md => index.mdx} | 0 .../popover/presenting/controller/demo.html | 6 +- .../controller/{index.md => index.mdx} | 0 .../popover/presenting/controller/react.md | 4 +- .../presenting/inline-isopen/demo.html | 6 +- .../inline-isopen/{index.md => index.mdx} | 0 .../presenting/inline-trigger/demo.html | 6 +- .../inline-trigger/{index.md => index.mdx} | 0 .../usage/v10/progress-bar/buffer/demo.html | 6 +- .../buffer/{index.md => index.mdx} | 0 .../v10/progress-bar/determinate/demo.html | 6 +- .../determinate/{index.md => index.mdx} | 0 .../v10/progress-bar/indeterminate/demo.html | 6 +- .../indeterminate/{index.md => index.mdx} | 0 .../v10/progress-bar/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../theming/css-shadow-parts/demo.html | 6 +- .../css-shadow-parts/{index.md => index.mdx} | 0 static/usage/v10/radio/alignment/demo.html | 6 +- .../radio/alignment/{index.md => index.mdx} | 0 static/usage/v10/radio/basic/demo.html | 6 +- .../v10/radio/basic/{index.md => index.mdx} | 0 .../usage/v10/radio/empty-selection/demo.html | 6 +- .../empty-selection/{index.md => index.mdx} | 0 static/usage/v10/radio/helper-error/demo.html | 6 +- .../helper-error/{index.md => index.mdx} | 0 static/usage/v10/radio/justify/demo.html | 6 +- .../v10/radio/justify/{index.md => index.mdx} | 0 .../usage/v10/radio/label-placement/demo.html | 6 +- .../label-placement/{index.md => index.mdx} | 0 static/usage/v10/radio/label-wrap/demo.html | 6 +- .../radio/label-wrap/{index.md => index.mdx} | 0 .../usage/v10/radio/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../radio/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../radio/theming/css-shadow-parts/demo.html | 6 +- .../css-shadow-parts/{index.md => index.mdx} | 0 .../v10/radio/using-comparewith/demo.html | 6 +- .../using-comparewith/{index.md => index.mdx} | 0 static/usage/v10/range/basic/demo.html | 6 +- .../v10/range/basic/{index.md => index.mdx} | 0 static/usage/v10/range/dual-knobs/demo.html | 6 +- .../range/dual-knobs/{index.md => index.mdx} | 0 .../v10/range/ion-change-event/demo.html | 6 +- .../ion-change-event/{index.md => index.mdx} | 0 .../v10/range/ion-knob-move-event/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v10/range/label-slot/demo.html | 6 +- .../range/label-slot/{index.md => index.mdx} | 0 static/usage/v10/range/labels/demo.html | 6 +- .../v10/range/labels/{index.md => index.mdx} | 0 .../v10/range/no-visible-label/demo.html | 6 +- .../no-visible-label/{index.md => index.mdx} | 0 static/usage/v10/range/pins/demo.html | 6 +- .../v10/range/pins/{index.md => index.mdx} | 0 static/usage/v10/range/slots/demo.html | 6 +- .../v10/range/slots/{index.md => index.mdx} | 0 .../usage/v10/range/snapping-ticks/demo.html | 6 +- .../snapping-ticks/{index.md => index.mdx} | 0 .../range/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../range/theming/css-shadow-parts/demo.html | 6 +- .../css-shadow-parts/{index.md => index.mdx} | 0 static/usage/v10/refresher/advanced/demo.html | 6 +- .../advanced/{index.md => index.mdx} | 0 static/usage/v10/refresher/basic/demo.html | 6 +- .../refresher/basic/{index.md => index.mdx} | 0 .../v10/refresher/custom-content/demo.html | 6 +- .../custom-content/{index.md => index.mdx} | 0 .../refresher/custom-scroll-target/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../v10/refresher/pull-properties/demo.html | 6 +- .../pull-properties/{index.md => index.mdx} | 0 .../refresher/pull-start-end-events/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v10/reorder/basic/demo.html | 6 +- .../v10/reorder/basic/{index.md => index.mdx} | 0 .../usage/v10/reorder/custom-icon/demo.html | 6 +- .../custom-icon/{index.md => index.mdx} | 0 .../reorder/custom-scroll-target/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../v10/reorder/reorder-move-event/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../reorder-start-end-events/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../v10/reorder/toggling-disabled/demo.html | 6 +- .../toggling-disabled/{index.md => index.mdx} | 0 .../usage/v10/reorder/updating-data/demo.html | 6 +- .../updating-data/{index.md => index.mdx} | 0 static/usage/v10/reorder/wrapper/demo.html | 6 +- .../reorder/wrapper/{index.md => index.mdx} | 0 .../usage/v10/ripple-effect/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../v10/ripple-effect/customizing/demo.html | 6 +- .../customizing/{index.md => index.mdx} | 0 static/usage/v10/ripple-effect/type/demo.html | 6 +- .../type/{index.md => index.mdx} | 0 static/usage/v10/router/basic/demo.html | 6 +- .../v10/router/basic/{index.md => index.mdx} | 0 .../v10/router/nav-within-page/demo.html | 12 +- .../nav-within-page/{index.md => index.mdx} | 0 static/usage/v10/searchbar/basic/demo.html | 6 +- .../searchbar/basic/{index.md => index.mdx} | 0 .../v10/searchbar/cancel-button/demo.html | 6 +- .../cancel-button/{index.md => index.mdx} | 0 .../v10/searchbar/clear-button/demo.html | 6 +- .../clear-button/{index.md => index.mdx} | 0 static/usage/v10/searchbar/debounce/demo.html | 6 +- .../debounce/{index.md => index.mdx} | 0 .../usage/v10/searchbar/search-icon/demo.html | 6 +- .../search-icon/{index.md => index.mdx} | 0 .../v10/searchbar/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../usage/v10/segment-button/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../usage/v10/segment-button/layout/demo.html | 6 +- .../layout/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../theming/css-shadow-parts/demo.html | 6 +- .../css-shadow-parts/{index.md => index.mdx} | 0 static/usage/v10/segment/basic/demo.html | 6 +- .../v10/segment/basic/{index.md => index.mdx} | 0 static/usage/v10/segment/scrollable/demo.html | 6 +- .../scrollable/{index.md => index.mdx} | 0 static/usage/v10/segment/swipeable/demo.html | 6 +- .../segment/swipeable/{index.md => index.mdx} | 0 .../v10/segment/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../segment/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../select/basic/multiple-selection/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../basic/responding-to-interaction/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../select/basic/single-selection/demo.html | 6 +- .../single-selection/{index.md => index.mdx} | 0 .../customization/button-text/demo.html | 6 +- .../button-text/{index.md => index.mdx} | 0 .../custom-toggle-icons/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../icon-flip-behavior/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../customization/interface-options/demo.html | 6 +- .../interface-options/{index.md => index.mdx} | 0 .../customization/styling-select/demo.html | 6 +- .../styling-select/{index.md => index.mdx} | 0 static/usage/v10/select/fill/demo.html | 6 +- .../v10/select/fill/{index.md => index.mdx} | 0 .../usage/v10/select/helper-error/demo.html | 6 +- .../helper-error/{index.md => index.mdx} | 0 .../select/interfaces/action-sheet/demo.html | 6 +- .../action-sheet/{index.md => index.mdx} | 0 .../v10/select/interfaces/modal/demo.html | 6 +- .../interfaces/modal/{index.md => index.mdx} | 0 .../v10/select/interfaces/popover/demo.html | 6 +- .../popover/{index.md => index.mdx} | 0 static/usage/v10/select/justify/demo.html | 6 +- .../select/justify/{index.md => index.mdx} | 0 .../v10/select/label-placement/demo.html | 6 +- .../label-placement/{index.md => index.mdx} | 0 static/usage/v10/select/label-slot/demo.html | 6 +- .../select/label-slot/{index.md => index.mdx} | 0 .../v10/select/no-visible-label/demo.html | 6 +- .../no-visible-label/{index.md => index.mdx} | 0 .../multiple-selection/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../using-comparewith/demo.html | 6 +- .../using-comparewith/{index.md => index.mdx} | 0 .../v10/select/rich-content-options/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../v10/select/start-end-slots/demo.html | 6 +- .../start-end-slots/{index.md => index.mdx} | 0 static/usage/v10/select/typeahead/demo.html | 6 +- .../select/typeahead/{index.md => index.mdx} | 0 .../usage/v10/skeleton-text/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/spinner/basic/demo.html | 6 +- .../v10/spinner/basic/{index.md => index.mdx} | 0 .../v10/spinner/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../spinner/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../v10/spinner/theming/resizing/demo.html | 6 +- .../theming/resizing/{index.md => index.mdx} | 0 static/usage/v10/split-pane/basic/demo.html | 6 +- .../split-pane/basic/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/tabs/basic/demo.html | 6 +- .../v10/tabs/basic/{index.md => index.mdx} | 0 static/usage/v10/tabs/router/demo.html | 6 +- .../v10/tabs/router/{index.md => index.mdx} | 0 static/usage/v10/tabs/select-method/demo.html | 6 +- .../select-method/{index.md => index.mdx} | 0 static/usage/v10/text/basic/demo.html | 6 +- .../v10/text/basic/{index.md => index.mdx} | 0 static/usage/v10/text/basic/react.md | 11 +- static/usage/v10/textarea/autogrow/demo.html | 6 +- .../textarea/autogrow/{index.md => index.mdx} | 0 static/usage/v10/textarea/basic/demo.html | 6 +- .../textarea/basic/{index.md => index.mdx} | 0 .../v10/textarea/clear-on-edit/demo.html | 6 +- .../clear-on-edit/{index.md => index.mdx} | 0 static/usage/v10/textarea/counter/demo.html | 6 +- .../textarea/counter/{index.md => index.mdx} | 0 static/usage/v10/textarea/fill/demo.html | 6 +- .../v10/textarea/fill/{index.md => index.mdx} | 0 .../usage/v10/textarea/helper-error/demo.html | 6 +- .../helper-error/{index.md => index.mdx} | 0 .../v10/textarea/label-placement/demo.html | 6 +- .../label-placement/{index.md => index.mdx} | 0 .../usage/v10/textarea/label-slot/demo.html | 6 +- .../label-slot/{index.md => index.mdx} | 0 .../v10/textarea/no-visible-label/demo.html | 6 +- .../no-visible-label/{index.md => index.mdx} | 0 .../v10/textarea/start-end-slots/demo.html | 6 +- .../start-end-slots/{index.md => index.mdx} | 0 static/usage/v10/textarea/theming/demo.html | 6 +- .../textarea/theming/{index.md => index.mdx} | 0 .../v10/theming/always-dark-mode/demo.html | 8 +- .../always-dark-mode/{index.md => index.mdx} | 0 .../always-high-contrast-mode/demo.html | 8 +- .../{index.md => index.mdx} | 0 .../v10/theming/class-dark-mode/demo.html | 8 +- .../class-dark-mode/{index.md => index.mdx} | 0 .../class-high-contrast-mode/demo.html | 12 +- .../{index.md => index.mdx} | 0 .../v10/theming/system-dark-mode/demo.html | 8 +- .../system-dark-mode/{index.md => index.mdx} | 0 .../system-high-contrast-mode/demo.html | 12 +- .../{index.md => index.mdx} | 0 static/usage/v10/thumbnail/basic/demo.html | 6 +- .../thumbnail/basic/{index.md => index.mdx} | 0 static/usage/v10/thumbnail/item/demo.html | 6 +- .../thumbnail/item/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/title/basic/demo.html | 6 +- .../v10/title/basic/{index.md => index.mdx} | 0 .../collapsible-large-title/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../collapsible-large-title/buttons/demo.html | 6 +- .../buttons/{index.md => index.mdx} | 0 .../title/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v10/toast/buttons/demo.html | 6 +- .../v10/toast/buttons/{index.md => index.mdx} | 0 static/usage/v10/toast/icon/demo.html | 6 +- .../v10/toast/icon/{index.md => index.mdx} | 0 static/usage/v10/toast/inline/basic/demo.html | 6 +- .../inline/basic/{index.md => index.mdx} | 0 .../usage/v10/toast/inline/is-open/demo.html | 6 +- .../inline/is-open/{index.md => index.mdx} | 0 static/usage/v10/toast/layout/demo.html | 6 +- .../v10/toast/layout/{index.md => index.mdx} | 0 .../usage/v10/toast/position-anchor/demo.html | 6 +- .../position-anchor/{index.md => index.mdx} | 0 .../v10/toast/presenting/controller/demo.html | 8 +- .../controller/{index.md => index.mdx} | 0 .../usage/v10/toast/swipe-gesture/demo.html | 6 +- .../swipe-gesture/{index.md => index.mdx} | 0 static/usage/v10/toast/theming/demo.html | 6 +- .../v10/toast/theming/{index.md => index.mdx} | 0 static/usage/v10/toggle/alignment/demo.html | 6 +- .../toggle/alignment/{index.md => index.mdx} | 0 static/usage/v10/toggle/basic/demo.html | 6 +- .../v10/toggle/basic/{index.md => index.mdx} | 0 .../usage/v10/toggle/helper-error/demo.html | 6 +- .../helper-error/{index.md => index.mdx} | 0 static/usage/v10/toggle/justify/demo.html | 6 +- .../toggle/justify/{index.md => index.mdx} | 0 .../v10/toggle/label-placement/demo.html | 6 +- .../label-placement/{index.md => index.mdx} | 0 static/usage/v10/toggle/list/demo.html | 6 +- .../v10/toggle/list/{index.md => index.mdx} | 0 static/usage/v10/toggle/on-off/demo.html | 6 +- .../v10/toggle/on-off/{index.md => index.mdx} | 0 .../usage/v10/toggle/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../toggle/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../toggle/theming/css-shadow-parts/demo.html | 6 +- .../css-shadow-parts/{index.md => index.mdx} | 0 static/usage/v10/toolbar/basic/demo.html | 6 +- .../v10/toolbar/basic/{index.md => index.mdx} | 0 static/usage/v10/toolbar/buttons/demo.html | 6 +- .../toolbar/buttons/{index.md => index.mdx} | 0 .../usage/v10/toolbar/progress-bars/demo.html | 6 +- .../progress-bars/{index.md => index.mdx} | 0 static/usage/v10/toolbar/searchbars/demo.html | 6 +- .../searchbars/{index.md => index.mdx} | 0 static/usage/v10/toolbar/segments/demo.html | 6 +- .../toolbar/segments/{index.md => index.mdx} | 0 .../v10/toolbar/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../toolbar/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../accessibility/animations/demo.html | 2 +- .../animations/{index.md => index.mdx} | 0 static/usage/v8/accordion/basic/demo.html | 2 +- .../accordion/basic/{index.md => index.mdx} | 0 .../advanced-expansion-styles/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../customization/expansion-styles/demo.html | 2 +- .../expansion-styles/{index.md => index.mdx} | 0 .../accordion/customization/icons/demo.html | 2 +- .../icons/{index.md => index.mdx} | 0 .../accordion/customization/theming/demo.html | 2 +- .../theming/{index.md => index.mdx} | 0 .../v8/accordion/disable/group/demo.html | 2 +- .../disable/group/{index.md => index.mdx} | 0 .../v8/accordion/disable/individual/demo.html | 2 +- .../individual/{index.md => index.mdx} | 0 .../v8/accordion/listen-changes/demo.html | 2 +- .../listen-changes/{index.md => index.mdx} | 0 static/usage/v8/accordion/multiple/demo.html | 2 +- .../multiple/{index.md => index.mdx} | 0 .../v8/accordion/readonly/group/demo.html | 2 +- .../readonly/group/{index.md => index.mdx} | 0 .../accordion/readonly/individual/demo.html | 2 +- .../individual/{index.md => index.mdx} | 0 static/usage/v8/accordion/toggle/demo.html | 2 +- .../accordion/toggle/{index.md => index.mdx} | 0 .../v8/action-sheet/controller/demo.html | 2 +- .../controller/{index.md => index.mdx} | 0 .../v8/action-sheet/inline/isOpen/demo.html | 2 +- .../inline/isOpen/{index.md => index.mdx} | 0 .../v8/action-sheet/inline/trigger/demo.html | 2 +- .../inline/trigger/{index.md => index.mdx} | 0 .../role-info-on-dismiss/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 .../v8/action-sheet/theming/styling/demo.html | 2 +- .../theming/styling/{index.md => index.mdx} | 0 static/usage/v8/alert/buttons/demo.html | 2 +- .../v8/alert/buttons/{index.md => index.mdx} | 0 static/usage/v8/alert/customization/demo.html | 2 +- .../customization/{index.md => index.mdx} | 0 static/usage/v8/alert/inputs/radios/demo.html | 2 +- .../inputs/radios/{index.md => index.mdx} | 0 .../v8/alert/inputs/text-inputs/demo.html | 2 +- .../text-inputs/{index.md => index.mdx} | 0 .../v8/alert/presenting/controller/demo.html | 2 +- .../controller/{index.md => index.mdx} | 0 .../v8/alert/presenting/isOpen/demo.html | 2 +- .../presenting/isOpen/{index.md => index.mdx} | 0 .../v8/alert/presenting/trigger/demo.html | 2 +- .../trigger/{index.md => index.mdx} | 0 static/usage/v8/animations/basic/demo.html | 2 +- .../animations/basic/{index.md => index.mdx} | 0 .../before-and-after-hooks/demo.html | 2 +- .../{index.md => index.mdx} | 0 static/usage/v8/animations/chain/demo.html | 2 +- .../animations/chain/{index.md => index.mdx} | 0 .../gesture/angular/example_component_ts.md | 5 +- static/usage/v8/animations/gesture/demo.html | 2 +- .../gesture/{index.md => index.mdx} | 0 static/usage/v8/animations/group/demo.html | 2 +- .../animations/group/{index.md => index.mdx} | 0 .../usage/v8/animations/keyframes/demo.html | 2 +- .../keyframes/{index.md => index.mdx} | 0 .../v8/animations/modal-override/demo.html | 2 +- .../modal-override/{index.md => index.mdx} | 0 .../v8/animations/preference-based/demo.html | 2 +- .../preference-based/{index.md => index.mdx} | 0 static/usage/v8/app/set-focus/demo.html | 2 +- .../v8/app/set-focus/{index.md => index.mdx} | 0 static/usage/v8/avatar/basic/demo.html | 2 +- .../v8/avatar/basic/{index.md => index.mdx} | 0 static/usage/v8/avatar/chip/demo.html | 2 +- .../v8/avatar/chip/{index.md => index.mdx} | 0 static/usage/v8/avatar/item/demo.html | 2 +- .../v8/avatar/item/{index.md => index.mdx} | 0 .../avatar/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v8/back-button/basic/demo.html | 2 +- .../back-button/basic/{index.md => index.mdx} | 0 static/usage/v8/back-button/custom/demo.html | 2 +- .../custom/{index.md => index.mdx} | 0 static/usage/v8/backdrop/basic/demo.html | 2 +- .../v8/backdrop/basic/{index.md => index.mdx} | 0 static/usage/v8/backdrop/styling/demo.html | 2 +- .../backdrop/styling/{index.md => index.mdx} | 0 static/usage/v8/badge/basic/demo.html | 2 +- .../v8/badge/basic/{index.md => index.mdx} | 0 .../usage/v8/badge/inside-tab-bar/demo.html | 2 +- .../inside-tab-bar/{index.md => index.mdx} | 0 .../usage/v8/badge/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../v8/badge/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v8/breadcrumbs/basic/demo.html | 2 +- .../breadcrumbs/basic/{index.md => index.mdx} | 0 .../expand-on-click/demo.html | 2 +- .../expand-on-click/{index.md => index.mdx} | 0 .../items-before-after/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../collapsing-items/max-items/demo.html | 2 +- .../max-items/{index.md => index.mdx} | 0 .../popover-on-click/demo.html | 2 +- .../popover-on-click/{index.md => index.mdx} | 0 .../icons/custom-separators/demo.html | 2 +- .../custom-separators/{index.md => index.mdx} | 0 .../icons/icons-on-items/demo.html | 2 +- .../icons-on-items/{index.md => index.mdx} | 0 .../v8/breadcrumbs/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v8/button/basic/demo.html | 2 +- .../v8/button/basic/{index.md => index.mdx} | 0 static/usage/v8/button/expand/demo.html | 2 +- .../v8/button/expand/{index.md => index.mdx} | 0 static/usage/v8/button/fill/demo.html | 2 +- .../v8/button/fill/{index.md => index.mdx} | 0 static/usage/v8/button/icons/demo.html | 2 +- .../v8/button/icons/{index.md => index.mdx} | 0 static/usage/v8/button/shape/demo.html | 2 +- .../v8/button/shape/{index.md => index.mdx} | 0 static/usage/v8/button/size/demo.html | 2 +- .../v8/button/size/{index.md => index.mdx} | 0 .../usage/v8/button/text-wrapping/demo.html | 2 +- .../text-wrapping/{index.md => index.mdx} | 0 .../usage/v8/button/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../button/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v8/buttons/basic/demo.html | 2 +- .../v8/buttons/basic/{index.md => index.mdx} | 0 static/usage/v8/buttons/placement/demo.html | 2 +- .../buttons/placement/{index.md => index.mdx} | 0 static/usage/v8/buttons/types/demo.html | 2 +- .../v8/buttons/types/{index.md => index.mdx} | 0 static/usage/v8/card/basic/demo.html | 2 +- .../v8/card/basic/{index.md => index.mdx} | 0 static/usage/v8/card/buttons/demo.html | 2 +- .../v8/card/buttons/{index.md => index.mdx} | 0 static/usage/v8/card/list/demo.html | 2 +- .../v8/card/list/{index.md => index.mdx} | 0 static/usage/v8/card/media/demo.html | 2 +- .../v8/card/media/{index.md => index.mdx} | 0 static/usage/v8/card/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../v8/card/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v8/checkbox/alignment/demo.html | 2 +- .../alignment/{index.md => index.mdx} | 0 static/usage/v8/checkbox/basic/demo.html | 2 +- .../v8/checkbox/basic/{index.md => index.mdx} | 0 .../usage/v8/checkbox/helper-error/demo.html | 2 +- .../helper-error/{index.md => index.mdx} | 0 .../usage/v8/checkbox/indeterminate/demo.html | 2 +- .../indeterminate/{index.md => index.mdx} | 0 static/usage/v8/checkbox/justify/demo.html | 2 +- .../checkbox/justify/{index.md => index.mdx} | 0 static/usage/v8/checkbox/label-link/demo.html | 2 +- .../label-link/{index.md => index.mdx} | 0 .../v8/checkbox/label-placement/demo.html | 2 +- .../label-placement/{index.md => index.mdx} | 0 .../checkbox/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v8/chip/basic/demo.html | 2 +- .../v8/chip/basic/{index.md => index.mdx} | 0 static/usage/v8/chip/slots/demo.html | 2 +- .../v8/chip/slots/{index.md => index.mdx} | 0 static/usage/v8/chip/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../v8/chip/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v8/config/mode/demo.html | 2 +- .../v8/config/mode/{index.md => index.mdx} | 0 static/usage/v8/content/basic/demo.html | 2 +- .../v8/content/basic/{index.md => index.mdx} | 0 static/usage/v8/content/fixed/demo.html | 2 +- .../v8/content/fixed/{index.md => index.mdx} | 0 static/usage/v8/content/fullscreen/demo.html | 2 +- .../fullscreen/{index.md => index.mdx} | 0 .../usage/v8/content/header-footer/demo.html | 2 +- .../header-footer/{index.md => index.mdx} | 0 .../usage/v8/content/scroll-events/demo.html | 2 +- .../scroll-events/{index.md => index.mdx} | 0 .../usage/v8/content/scroll-methods/demo.html | 2 +- .../scroll-methods/{index.md => index.mdx} | 0 .../usage/v8/content/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../content/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 .../theming/css-shadow-parts/demo.html | 2 +- .../css-shadow-parts/{index.md => index.mdx} | 0 .../v8/content/theming/safe-area/demo.html | 2 +- .../theming/safe-area/{index.md => index.mdx} | 0 .../usage/v8/datetime-button/basic/demo.html | 2 +- .../basic/{index.md => index.mdx} | 0 .../datetime-button/format-options/demo.html | 2 +- .../format-options/{index.md => index.mdx} | 0 static/usage/v8/datetime/basic/demo.html | 2 +- .../v8/datetime/basic/{index.md => index.mdx} | 0 .../customizing-button-texts/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../buttons/customizing-buttons/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../showing-confirmation-buttons/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../date-constraints/advanced/demo.html | 2 +- .../advanced/{index.md => index.mdx} | 0 .../date-constraints/max-min/demo.html | 2 +- .../max-min/{index.md => index.mdx} | 0 .../date-constraints/values/demo.html | 2 +- .../values/{index.md => index.mdx} | 0 .../v8/datetime/format-options/demo.html | 2 +- .../format-options/{index.md => index.mdx} | 0 .../datetime/highlightedDates/array/demo.html | 2 +- .../array/{index.md => index.mdx} | 0 .../highlightedDates/callback/demo.html | 2 +- .../callback/{index.md => index.mdx} | 0 .../localization/custom-locale/demo.html | 2 +- .../custom-locale/{index.md => index.mdx} | 0 .../localization/first-day-of-week/demo.html | 2 +- .../first-day-of-week/{index.md => index.mdx} | 0 .../localization/hour-cycle/demo.html | 2 +- .../hour-cycle/{index.md => index.mdx} | 0 .../locale-extension-tags/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../localization/time-label/demo.html | 2 +- .../time-label/{index.md => index.mdx} | 0 static/usage/v8/datetime/multiple/demo.html | 2 +- .../datetime/multiple/{index.md => index.mdx} | 0 .../v8/datetime/presentation/date/demo.html | 2 +- .../presentation/date/{index.md => index.mdx} | 0 .../presentation/month-and-year/demo.html | 2 +- .../month-and-year/{index.md => index.mdx} | 0 .../v8/datetime/presentation/time/demo.html | 2 +- .../presentation/time/{index.md => index.mdx} | 0 .../v8/datetime/presentation/wheel/demo.html | 2 +- .../wheel/{index.md => index.mdx} | 0 .../v8/datetime/show-adjacent-days/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../datetime/styling/calendar-days/demo.html | 2 +- .../calendar-days/{index.md => index.mdx} | 0 .../styling/calendar-header/demo.html | 2 +- .../calendar-header/{index.md => index.mdx} | 0 .../styling/datetime-header/demo.html | 2 +- .../datetime-header/{index.md => index.mdx} | 0 .../datetime/styling/global-theming/demo.html | 2 +- .../global-theming/{index.md => index.mdx} | 0 .../datetime/styling/wheel-styling/demo.html | 2 +- .../wheel-styling/{index.md => index.mdx} | 0 .../title/customizing-title/demo.html | 2 +- .../customizing-title/{index.md => index.mdx} | 0 .../title/showing-default-title/demo.html | 2 +- .../{index.md => index.mdx} | 0 static/usage/v8/fab/basic/demo.html | 2 +- .../v8/fab/basic/{index.md => index.mdx} | 0 static/usage/v8/fab/before-content/demo.html | 2 +- .../before-content/{index.md => index.mdx} | 0 static/usage/v8/fab/button-sizing/demo.html | 2 +- .../fab/button-sizing/{index.md => index.mdx} | 0 static/usage/v8/fab/list-side/demo.html | 2 +- .../v8/fab/list-side/{index.md => index.mdx} | 0 static/usage/v8/fab/positioning/demo.html | 2 +- .../fab/positioning/{index.md => index.mdx} | 0 static/usage/v8/fab/safe-area/demo.html | 2 +- .../v8/fab/safe-area/{index.md => index.mdx} | 0 static/usage/v8/fab/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-custom-properties/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../angular/example_component_css.md | 4 +- .../v8/fab/theming/css-shadow-parts/demo.html | 6 +- .../css-shadow-parts/{index.md => index.mdx} | 0 .../theming/css-shadow-parts/javascript.md | 4 +- .../css-shadow-parts/javascript/index_html.md | 4 +- .../css-shadow-parts/react/main_css.md | 4 +- .../v8/fab/theming/css-shadow-parts/vue.md | 4 +- static/usage/v8/footer/basic/demo.html | 2 +- .../v8/footer/basic/{index.md => index.mdx} | 0 .../v8/footer/custom-scroll-target/demo.html | 2 +- .../{index.md => index.mdx} | 0 static/usage/v8/footer/fade/demo.html | 2 +- .../v8/footer/fade/{index.md => index.mdx} | 0 static/usage/v8/footer/no-border/demo.html | 2 +- .../footer/no-border/{index.md => index.mdx} | 0 static/usage/v8/footer/translucent/demo.html | 2 +- .../translucent/{index.md => index.mdx} | 0 .../basic/angular/example_component_ts.md | 6 +- static/usage/v8/gestures/basic/demo.html | 2 +- .../v8/gestures/basic/{index.md => index.mdx} | 0 .../angular/example_component_ts.md | 5 +- .../usage/v8/gestures/double-click/demo.html | 2 +- .../double-click/{index.md => index.mdx} | 0 static/usage/v8/grid/basic/demo.html | 2 +- .../v8/grid/basic/{index.md => index.mdx} | 0 .../grid/customizing/column-number/demo.html | 2 +- .../column-number/{index.md => index.mdx} | 0 .../v8/grid/customizing/padding/demo.html | 2 +- .../padding/{index.md => index.mdx} | 0 .../usage/v8/grid/customizing/width/demo.html | 2 +- .../customizing/width/{index.md => index.mdx} | 0 static/usage/v8/grid/fixed/demo.html | 2 +- .../v8/grid/fixed/{index.md => index.mdx} | 0 .../v8/grid/horizontal-alignment/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../usage/v8/grid/offset-responsive/demo.html | 2 +- .../offset-responsive/{index.md => index.mdx} | 0 static/usage/v8/grid/offset/demo.html | 2 +- .../v8/grid/offset/{index.md => index.mdx} | 0 .../v8/grid/push-pull-responsive/demo.html | 2 +- .../{index.md => index.mdx} | 0 static/usage/v8/grid/push-pull/demo.html | 2 +- .../v8/grid/push-pull/{index.md => index.mdx} | 0 static/usage/v8/grid/size-auto/demo.html | 2 +- .../v8/grid/size-auto/{index.md => index.mdx} | 0 .../usage/v8/grid/size-responsive/demo.html | 2 +- .../size-responsive/{index.md => index.mdx} | 0 static/usage/v8/grid/size/demo.html | 2 +- .../v8/grid/size/{index.md => index.mdx} | 0 .../v8/grid/vertical-alignment/demo.html | 2 +- .../{index.md => index.mdx} | 0 static/usage/v8/header/basic/demo.html | 2 +- .../v8/header/basic/{index.md => index.mdx} | 0 static/usage/v8/header/condense/demo.html | 2 +- .../header/condense/{index.md => index.mdx} | 0 .../v8/header/custom-scroll-target/demo.html | 2 +- .../{index.md => index.mdx} | 0 static/usage/v8/header/fade/demo.html | 2 +- .../v8/header/fade/{index.md => index.mdx} | 0 static/usage/v8/header/no-border/demo.html | 2 +- .../header/no-border/{index.md => index.mdx} | 0 static/usage/v8/header/translucent/demo.html | 2 +- .../translucent/{index.md => index.mdx} | 0 static/usage/v8/icon/basic/demo.html | 2 +- .../v8/icon/basic/{index.md => index.mdx} | 0 .../basic/angular/example_component_html.md | 2 +- static/usage/v8/img/basic/demo.html | 4 +- .../v8/img/basic/{index.md => index.mdx} | 0 static/usage/v8/img/basic/javascript.md | 2 +- static/usage/v8/img/basic/react.md | 2 +- static/usage/v8/img/basic/vue.md | 2 +- .../usage/v8/infinite-scroll/basic/demo.html | 2 +- .../basic/{index.md => index.mdx} | 0 .../custom-infinite-scroll-content/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../infinite-scroll-content/demo.html | 2 +- .../{index.md => index.mdx} | 0 static/usage/v8/input-otp/basic/demo.html | 2 +- .../input-otp/basic/{index.md => index.mdx} | 0 static/usage/v8/input-otp/fill/demo.html | 2 +- .../v8/input-otp/fill/{index.md => index.mdx} | 0 static/usage/v8/input-otp/pattern/demo.html | 2 +- .../input-otp/pattern/{index.md => index.mdx} | 0 .../usage/v8/input-otp/separators/demo.html | 2 +- .../separators/{index.md => index.mdx} | 0 static/usage/v8/input-otp/shape/demo.html | 2 +- .../input-otp/shape/{index.md => index.mdx} | 0 static/usage/v8/input-otp/size/demo.html | 2 +- .../v8/input-otp/size/{index.md => index.mdx} | 0 static/usage/v8/input-otp/states/demo.html | 2 +- .../input-otp/states/{index.md => index.mdx} | 0 .../v8/input-otp/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v8/input-otp/type/demo.html | 2 +- .../v8/input-otp/type/{index.md => index.mdx} | 0 .../v8/input-password-toggle/basic/demo.html | 2 +- .../basic/{index.md => index.mdx} | 0 static/usage/v8/input/basic/demo.html | 2 +- .../v8/input/basic/{index.md => index.mdx} | 0 static/usage/v8/input/clear/demo.html | 2 +- .../v8/input/clear/{index.md => index.mdx} | 0 .../v8/input/counter-alignment/demo.html | 2 +- .../counter-alignment/{index.md => index.mdx} | 0 static/usage/v8/input/counter/demo.html | 2 +- .../v8/input/counter/{index.md => index.mdx} | 0 static/usage/v8/input/fill/demo.html | 2 +- .../v8/input/fill/{index.md => index.mdx} | 0 static/usage/v8/input/filtering/demo.html | 2 +- .../input/filtering/{index.md => index.mdx} | 0 static/usage/v8/input/helper-error/demo.html | 2 +- .../helper-error/{index.md => index.mdx} | 0 .../usage/v8/input/label-placement/demo.html | 2 +- .../label-placement/{index.md => index.mdx} | 0 static/usage/v8/input/label-slot/demo.html | 2 +- .../input/label-slot/{index.md => index.mdx} | 0 static/usage/v8/input/mask/demo.html | 2 +- .../v8/input/mask/{index.md => index.mdx} | 0 .../usage/v8/input/no-visible-label/demo.html | 2 +- .../no-visible-label/{index.md => index.mdx} | 0 static/usage/v8/input/set-focus/demo.html | 2 +- .../input/set-focus/{index.md => index.mdx} | 0 .../usage/v8/input/start-end-slots/demo.html | 2 +- .../start-end-slots/{index.md => index.mdx} | 0 .../usage/v8/input/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../v8/input/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v8/input/types/demo.html | 2 +- .../v8/input/types/{index.md => index.mdx} | 0 static/usage/v8/item-divider/basic/demo.html | 2 +- .../basic/{index.md => index.mdx} | 0 .../v8/item-divider/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v8/item-group/basic/demo.html | 2 +- .../item-group/basic/{index.md => index.mdx} | 0 .../v8/item-group/sliding-items/demo.html | 2 +- .../sliding-items/{index.md => index.mdx} | 0 static/usage/v8/item-sliding/basic/demo.html | 2 +- .../basic/{index.md => index.mdx} | 0 .../v8/item-sliding/expandable/demo.html | 2 +- .../expandable/{index.md => index.mdx} | 0 static/usage/v8/item-sliding/icons/demo.html | 2 +- .../icons/{index.md => index.mdx} | 0 static/usage/v8/item/basic/demo.html | 2 +- .../v8/item/basic/{index.md => index.mdx} | 0 static/usage/v8/item/buttons/demo.html | 2 +- .../v8/item/buttons/{index.md => index.mdx} | 0 static/usage/v8/item/clickable/demo.html | 2 +- .../v8/item/clickable/{index.md => index.mdx} | 0 .../v8/item/content-types/actions/demo.html | 2 +- .../actions/{index.md => index.mdx} | 0 .../v8/item/content-types/controls/demo.html | 2 +- .../controls/{index.md => index.mdx} | 0 .../v8/item/content-types/metadata/demo.html | 2 +- .../metadata/{index.md => index.mdx} | 0 .../supporting-visuals/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../v8/item/content-types/text/demo.html | 2 +- .../text/{index.md => index.mdx} | 0 static/usage/v8/item/detail-arrows/demo.html | 2 +- .../detail-arrows/{index.md => index.mdx} | 0 static/usage/v8/item/inputs/demo.html | 2 +- .../v8/item/inputs/{index.md => index.mdx} | 0 static/usage/v8/item/lines/demo.html | 2 +- .../v8/item/lines/{index.md => index.mdx} | 0 static/usage/v8/item/media/demo.html | 2 +- .../v8/item/media/{index.md => index.mdx} | 0 static/usage/v8/item/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../v8/item/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 .../item/theming/css-shadow-parts/demo.html | 2 +- .../css-shadow-parts/{index.md => index.mdx} | 0 .../v8/item/theming/input-highlight/demo.html | 2 +- .../input-highlight/{index.md => index.mdx} | 0 .../usage/v8/keyboard/enterkeyhint/demo.html | 2 +- .../enterkeyhint/{index.md => index.mdx} | 0 static/usage/v8/keyboard/inputmode/demo.html | 2 +- .../inputmode/{index.md => index.mdx} | 0 static/usage/v8/label/basic/demo.html | 2 +- .../v8/label/basic/{index.md => index.mdx} | 0 static/usage/v8/label/input/demo.html | 2 +- .../v8/label/input/{index.md => index.mdx} | 0 static/usage/v8/label/item/demo.html | 2 +- .../v8/label/item/{index.md => index.mdx} | 0 .../usage/v8/label/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../v8/layout/dynamic-font-scaling/demo.html | 2 +- .../{index.md => index.mdx} | 0 static/usage/v8/list-header/basic/demo.html | 2 +- .../list-header/basic/{index.md => index.mdx} | 0 static/usage/v8/list-header/buttons/demo.html | 2 +- .../buttons/{index.md => index.mdx} | 0 static/usage/v8/list-header/lines/demo.html | 2 +- .../list-header/lines/{index.md => index.mdx} | 0 .../v8/list-header/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v8/list/basic/demo.html | 2 +- .../v8/list/basic/{index.md => index.mdx} | 0 static/usage/v8/list/inset/demo.html | 2 +- .../v8/list/inset/{index.md => index.mdx} | 0 static/usage/v8/list/lines/demo.html | 2 +- .../v8/list/lines/{index.md => index.mdx} | 0 static/usage/v8/loading/controller/demo.html | 2 +- .../controller/{index.md => index.mdx} | 0 static/usage/v8/loading/inline/demo.html | 2 +- .../v8/loading/inline/{index.md => index.mdx} | 0 static/usage/v8/loading/spinners/demo.html | 2 +- .../loading/spinners/{index.md => index.mdx} | 0 static/usage/v8/loading/theming/demo.html | 2 +- .../loading/theming/{index.md => index.mdx} | 0 static/usage/v8/menu/basic/demo.html | 2 +- .../v8/menu/basic/{index.md => index.mdx} | 0 static/usage/v8/menu/multiple/demo.html | 2 +- .../v8/menu/multiple/{index.md => index.mdx} | 0 static/usage/v8/menu/sides/demo.html | 2 +- .../v8/menu/sides/{index.md => index.mdx} | 0 static/usage/v8/menu/theming/demo.html | 2 +- .../v8/menu/theming/{index.md => index.mdx} | 0 static/usage/v8/menu/toggle/demo.html | 2 +- .../v8/menu/toggle/{index.md => index.mdx} | 0 static/usage/v8/menu/type/demo.html | 2 +- .../v8/menu/type/{index.md => index.mdx} | 0 static/usage/v8/menu/type/react.md | 3 +- .../v8/modal/can-dismiss/boolean/demo.html | 2 +- .../boolean/{index.md => index.mdx} | 0 .../modal/can-dismiss/child-state/demo.html | 2 +- .../child-state/{index.md => index.mdx} | 0 .../v8/modal/can-dismiss/function/demo.html | 2 +- .../function/{index.md => index.mdx} | 0 .../prevent-swipe-to-close/demo.html | 2 +- .../{index.md => index.mdx} | 0 static/usage/v8/modal/card/basic/demo.html | 2 +- .../modal/card/basic/{index.md => index.mdx} | 0 static/usage/v8/modal/controller/demo.html | 2 +- .../modal/controller/{index.md => index.mdx} | 0 .../usage/v8/modal/custom-dialogs/demo.html | 2 +- .../custom-dialogs/{index.md => index.mdx} | 0 .../usage/v8/modal/drag-move-event/demo.html | 2 +- .../drag-move-event/{index.md => index.mdx} | 0 .../v8/modal/drag-start-end-events/demo.html | 2 +- .../{index.md => index.mdx} | 0 static/usage/v8/modal/inline/basic/demo.html | 2 +- .../inline/basic/{index.md => index.mdx} | 0 .../usage/v8/modal/inline/is-open/demo.html | 2 +- .../inline/is-open/{index.md => index.mdx} | 0 .../v8/modal/performance/mount/demo.html | 2 +- .../performance/mount/{index.md => index.mdx} | 0 .../v8/modal/sheet/auto-height/demo.html | 2 +- .../sheet/auto-height/{index.md => index.mdx} | 0 .../modal/sheet/background-content/demo.html | 2 +- .../{index.md => index.mdx} | 0 static/usage/v8/modal/sheet/basic/demo.html | 2 +- .../modal/sheet/basic/{index.md => index.mdx} | 0 .../v8/modal/sheet/expand-to-scroll/demo.html | 2 +- .../expand-to-scroll/{index.md => index.mdx} | 0 .../v8/modal/sheet/handle-behavior/demo.html | 2 +- .../handle-behavior/{index.md => index.mdx} | 0 .../v8/modal/styling/animations/demo.html | 2 +- .../animations/{index.md => index.mdx} | 0 .../usage/v8/modal/styling/theming/demo.html | 2 +- .../styling/theming/{index.md => index.mdx} | 0 .../usage/v8/nav/modal-navigation/demo.html | 2 +- .../modal-navigation/{index.md => index.mdx} | 0 static/usage/v8/nav/nav-link/demo.html | 2 +- .../v8/nav/nav-link/{index.md => index.mdx} | 0 static/usage/v8/note/basic/demo.html | 2 +- .../v8/note/basic/{index.md => index.mdx} | 0 static/usage/v8/note/item/demo.html | 2 +- .../v8/note/item/{index.md => index.mdx} | 0 static/usage/v8/note/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../v8/note/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 .../v8/picker-legacy/controller/demo.html | 2 +- .../controller/{index.md => index.mdx} | 0 .../v8/picker-legacy/inline/isOpen/demo.html | 2 +- .../inline/isOpen/{index.md => index.mdx} | 0 .../v8/picker-legacy/inline/trigger/demo.html | 2 +- .../inline/trigger/{index.md => index.mdx} | 0 .../picker-legacy/multiple-column/demo.html | 2 +- .../multiple-column/{index.md => index.mdx} | 0 static/usage/v8/picker/basic/demo.html | 2 +- .../v8/picker/basic/{index.md => index.mdx} | 0 static/usage/v8/picker/modal/demo.html | 2 +- .../v8/picker/modal/{index.md => index.mdx} | 0 .../usage/v8/picker/prefix-suffix/demo.html | 2 +- .../prefix-suffix/{index.md => index.mdx} | 0 .../picker/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 .../customization/positioning/demo.html | 2 +- .../positioning/{index.md => index.mdx} | 0 .../v8/popover/customization/sizing/demo.html | 2 +- .../sizing/{index.md => index.mdx} | 0 .../popover/customization/styling/demo.html | 2 +- .../styling/{index.md => index.mdx} | 0 static/usage/v8/popover/nested/demo.html | 2 +- .../v8/popover/nested/{index.md => index.mdx} | 0 .../v8/popover/performance/mount/demo.html | 2 +- .../performance/mount/{index.md => index.mdx} | 0 .../popover/presenting/controller/demo.html | 2 +- .../controller/{index.md => index.mdx} | 0 .../presenting/inline-isopen/demo.html | 2 +- .../inline-isopen/{index.md => index.mdx} | 0 .../presenting/inline-trigger/demo.html | 2 +- .../inline-trigger/{index.md => index.mdx} | 0 static/usage/v8/progress-bar/buffer/demo.html | 2 +- .../buffer/{index.md => index.mdx} | 0 .../v8/progress-bar/determinate/demo.html | 2 +- .../determinate/{index.md => index.mdx} | 0 .../v8/progress-bar/indeterminate/demo.html | 2 +- .../indeterminate/{index.md => index.mdx} | 0 .../v8/progress-bar/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 .../theming/css-shadow-parts/demo.html | 2 +- .../css-shadow-parts/{index.md => index.mdx} | 0 static/usage/v8/radio/alignment/demo.html | 2 +- .../radio/alignment/{index.md => index.mdx} | 0 static/usage/v8/radio/basic/demo.html | 2 +- .../v8/radio/basic/{index.md => index.mdx} | 0 .../usage/v8/radio/empty-selection/demo.html | 2 +- .../empty-selection/{index.md => index.mdx} | 0 static/usage/v8/radio/helper-error/demo.html | 2 +- .../helper-error/{index.md => index.mdx} | 0 static/usage/v8/radio/justify/demo.html | 2 +- .../v8/radio/justify/{index.md => index.mdx} | 0 .../usage/v8/radio/label-placement/demo.html | 2 +- .../label-placement/{index.md => index.mdx} | 0 static/usage/v8/radio/label-wrap/demo.html | 2 +- .../radio/label-wrap/{index.md => index.mdx} | 0 .../usage/v8/radio/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../v8/radio/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 .../radio/theming/css-shadow-parts/demo.html | 2 +- .../css-shadow-parts/{index.md => index.mdx} | 0 .../v8/radio/using-comparewith/demo.html | 2 +- .../using-comparewith/{index.md => index.mdx} | 0 static/usage/v8/range/basic/demo.html | 2 +- .../v8/range/basic/{index.md => index.mdx} | 0 static/usage/v8/range/dual-knobs/demo.html | 2 +- .../range/dual-knobs/{index.md => index.mdx} | 0 .../usage/v8/range/ion-change-event/demo.html | 2 +- .../ion-change-event/{index.md => index.mdx} | 0 .../v8/range/ion-knob-move-event/demo.html | 2 +- .../{index.md => index.mdx} | 0 static/usage/v8/range/label-slot/demo.html | 2 +- .../range/label-slot/{index.md => index.mdx} | 0 static/usage/v8/range/labels/demo.html | 2 +- .../v8/range/labels/{index.md => index.mdx} | 0 .../usage/v8/range/no-visible-label/demo.html | 2 +- .../no-visible-label/{index.md => index.mdx} | 0 static/usage/v8/range/pins/demo.html | 2 +- .../v8/range/pins/{index.md => index.mdx} | 0 static/usage/v8/range/slots/demo.html | 2 +- .../v8/range/slots/{index.md => index.mdx} | 0 .../usage/v8/range/snapping-ticks/demo.html | 2 +- .../snapping-ticks/{index.md => index.mdx} | 0 .../v8/range/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 .../range/theming/css-shadow-parts/demo.html | 2 +- .../css-shadow-parts/{index.md => index.mdx} | 0 static/usage/v8/refresher/advanced/demo.html | 2 +- .../advanced/{index.md => index.mdx} | 0 static/usage/v8/refresher/basic/demo.html | 2 +- .../refresher/basic/{index.md => index.mdx} | 0 .../v8/refresher/custom-content/demo.html | 2 +- .../custom-content/{index.md => index.mdx} | 0 .../refresher/custom-scroll-target/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../v8/refresher/pull-properties/demo.html | 2 +- .../pull-properties/{index.md => index.mdx} | 0 .../refresher/pull-start-end-events/demo.html | 2 +- .../{index.md => index.mdx} | 0 static/usage/v8/reorder/basic/demo.html | 2 +- .../v8/reorder/basic/{index.md => index.mdx} | 0 static/usage/v8/reorder/custom-icon/demo.html | 2 +- .../custom-icon/{index.md => index.mdx} | 0 .../v8/reorder/custom-scroll-target/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../v8/reorder/reorder-move-event/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../reorder-start-end-events/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../v8/reorder/toggling-disabled/demo.html | 2 +- .../toggling-disabled/{index.md => index.mdx} | 0 .../usage/v8/reorder/updating-data/demo.html | 2 +- .../updating-data/{index.md => index.mdx} | 0 static/usage/v8/reorder/wrapper/demo.html | 2 +- .../reorder/wrapper/{index.md => index.mdx} | 0 static/usage/v8/ripple-effect/basic/demo.html | 2 +- .../basic/{index.md => index.mdx} | 0 .../v8/ripple-effect/customizing/demo.html | 2 +- .../customizing/{index.md => index.mdx} | 0 static/usage/v8/ripple-effect/type/demo.html | 2 +- .../type/{index.md => index.mdx} | 0 static/usage/v8/router/basic/demo.html | 2 +- .../v8/router/basic/{index.md => index.mdx} | 0 static/usage/v8/searchbar/basic/demo.html | 2 +- .../searchbar/basic/{index.md => index.mdx} | 0 .../v8/searchbar/cancel-button/demo.html | 2 +- .../cancel-button/{index.md => index.mdx} | 0 .../usage/v8/searchbar/clear-button/demo.html | 2 +- .../clear-button/{index.md => index.mdx} | 0 static/usage/v8/searchbar/debounce/demo.html | 2 +- .../debounce/{index.md => index.mdx} | 0 .../usage/v8/searchbar/search-icon/demo.html | 2 +- .../search-icon/{index.md => index.mdx} | 0 .../v8/searchbar/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 .../usage/v8/segment-button/basic/demo.html | 2 +- .../basic/{index.md => index.mdx} | 0 .../usage/v8/segment-button/layout/demo.html | 2 +- .../layout/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 .../theming/css-shadow-parts/demo.html | 2 +- .../css-shadow-parts/{index.md => index.mdx} | 0 static/usage/v8/segment/basic/demo.html | 2 +- .../v8/segment/basic/{index.md => index.mdx} | 0 static/usage/v8/segment/scrollable/demo.html | 2 +- .../scrollable/{index.md => index.mdx} | 0 static/usage/v8/segment/swipeable/demo.html | 2 +- .../segment/swipeable/{index.md => index.mdx} | 0 .../usage/v8/segment/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../segment/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 .../select/basic/multiple-selection/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../basic/responding-to-interaction/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../select/basic/single-selection/demo.html | 2 +- .../single-selection/{index.md => index.mdx} | 0 .../customization/button-text/demo.html | 2 +- .../button-text/{index.md => index.mdx} | 0 .../custom-toggle-icons/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../icon-flip-behavior/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../customization/interface-options/demo.html | 2 +- .../interface-options/{index.md => index.mdx} | 0 .../customization/styling-select/demo.html | 2 +- .../styling-select/{index.md => index.mdx} | 0 static/usage/v8/select/fill/demo.html | 2 +- .../v8/select/fill/{index.md => index.mdx} | 0 static/usage/v8/select/helper-error/demo.html | 2 +- .../helper-error/{index.md => index.mdx} | 0 .../select/interfaces/action-sheet/demo.html | 2 +- .../action-sheet/{index.md => index.mdx} | 0 .../v8/select/interfaces/modal/demo.html | 2 +- .../interfaces/modal/{index.md => index.mdx} | 0 .../v8/select/interfaces/popover/demo.html | 2 +- .../popover/{index.md => index.mdx} | 0 static/usage/v8/select/justify/demo.html | 2 +- .../v8/select/justify/{index.md => index.mdx} | 0 .../usage/v8/select/label-placement/demo.html | 2 +- .../label-placement/{index.md => index.mdx} | 0 static/usage/v8/select/label-slot/demo.html | 2 +- .../select/label-slot/{index.md => index.mdx} | 0 .../v8/select/no-visible-label/demo.html | 2 +- .../no-visible-label/{index.md => index.mdx} | 0 .../multiple-selection/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../using-comparewith/demo.html | 2 +- .../using-comparewith/{index.md => index.mdx} | 0 .../usage/v8/select/start-end-slots/demo.html | 2 +- .../start-end-slots/{index.md => index.mdx} | 0 static/usage/v8/select/typeahead/demo.html | 2 +- .../select/typeahead/{index.md => index.mdx} | 0 static/usage/v8/skeleton-text/basic/demo.html | 2 +- .../basic/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v8/spinner/basic/demo.html | 2 +- .../v8/spinner/basic/{index.md => index.mdx} | 0 .../usage/v8/spinner/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../spinner/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 .../v8/spinner/theming/resizing/demo.html | 2 +- .../theming/resizing/{index.md => index.mdx} | 0 static/usage/v8/split-pane/basic/demo.html | 2 +- .../split-pane/basic/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v8/tabs/basic/demo.html | 2 +- .../v8/tabs/basic/{index.md => index.mdx} | 0 static/usage/v8/tabs/router/demo.html | 2 +- .../v8/tabs/router/{index.md => index.mdx} | 0 static/usage/v8/tabs/select-method/demo.html | 2 +- .../select-method/{index.md => index.mdx} | 0 static/usage/v8/text/basic/demo.html | 2 +- .../v8/text/basic/{index.md => index.mdx} | 0 static/usage/v8/text/basic/react.md | 11 +- static/usage/v8/textarea/autogrow/demo.html | 2 +- .../textarea/autogrow/{index.md => index.mdx} | 0 static/usage/v8/textarea/basic/demo.html | 2 +- .../v8/textarea/basic/{index.md => index.mdx} | 0 .../usage/v8/textarea/clear-on-edit/demo.html | 2 +- .../clear-on-edit/{index.md => index.mdx} | 0 static/usage/v8/textarea/counter/demo.html | 2 +- .../textarea/counter/{index.md => index.mdx} | 0 static/usage/v8/textarea/fill/demo.html | 2 +- .../v8/textarea/fill/{index.md => index.mdx} | 0 .../usage/v8/textarea/helper-error/demo.html | 2 +- .../helper-error/{index.md => index.mdx} | 0 .../v8/textarea/label-placement/demo.html | 2 +- .../label-placement/{index.md => index.mdx} | 0 static/usage/v8/textarea/label-slot/demo.html | 2 +- .../label-slot/{index.md => index.mdx} | 0 .../v8/textarea/no-visible-label/demo.html | 2 +- .../no-visible-label/{index.md => index.mdx} | 0 .../v8/textarea/start-end-slots/demo.html | 2 +- .../start-end-slots/{index.md => index.mdx} | 0 static/usage/v8/textarea/theming/demo.html | 2 +- .../textarea/theming/{index.md => index.mdx} | 0 .../v8/theming/always-dark-mode/demo.html | 2 +- .../always-dark-mode/{index.md => index.mdx} | 0 .../always-high-contrast-mode/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../v8/theming/class-dark-mode/demo.html | 2 +- .../class-dark-mode/{index.md => index.mdx} | 0 .../class-high-contrast-mode/demo.html | 2 +- .../{index.md => index.mdx} | 0 .../v8/theming/system-dark-mode/demo.html | 2 +- .../system-dark-mode/{index.md => index.mdx} | 0 .../system-high-contrast-mode/demo.html | 2 +- .../{index.md => index.mdx} | 0 static/usage/v8/thumbnail/basic/demo.html | 2 +- .../thumbnail/basic/{index.md => index.mdx} | 0 static/usage/v8/thumbnail/item/demo.html | 2 +- .../v8/thumbnail/item/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v8/title/basic/demo.html | 2 +- .../v8/title/basic/{index.md => index.mdx} | 0 .../collapsible-large-title/basic/demo.html | 2 +- .../basic/{index.md => index.mdx} | 0 .../collapsible-large-title/buttons/demo.html | 2 +- .../buttons/{index.md => index.mdx} | 0 .../v8/title/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v8/toast/buttons/demo.html | 2 +- .../v8/toast/buttons/{index.md => index.mdx} | 0 static/usage/v8/toast/icon/demo.html | 2 +- .../v8/toast/icon/{index.md => index.mdx} | 0 static/usage/v8/toast/inline/basic/demo.html | 2 +- .../inline/basic/{index.md => index.mdx} | 0 .../usage/v8/toast/inline/is-open/demo.html | 2 +- .../inline/is-open/{index.md => index.mdx} | 0 static/usage/v8/toast/layout/demo.html | 2 +- .../v8/toast/layout/{index.md => index.mdx} | 0 .../usage/v8/toast/position-anchor/demo.html | 2 +- .../position-anchor/{index.md => index.mdx} | 0 .../v8/toast/presenting/controller/demo.html | 2 +- .../controller/{index.md => index.mdx} | 0 static/usage/v8/toast/swipe-gesture/demo.html | 2 +- .../swipe-gesture/{index.md => index.mdx} | 0 static/usage/v8/toast/theming/demo.html | 2 +- .../v8/toast/theming/{index.md => index.mdx} | 0 static/usage/v8/toggle/alignment/demo.html | 2 +- .../toggle/alignment/{index.md => index.mdx} | 0 static/usage/v8/toggle/basic/demo.html | 2 +- .../v8/toggle/basic/{index.md => index.mdx} | 0 static/usage/v8/toggle/helper-error/demo.html | 2 +- .../helper-error/{index.md => index.mdx} | 0 static/usage/v8/toggle/justify/demo.html | 2 +- .../v8/toggle/justify/{index.md => index.mdx} | 0 .../usage/v8/toggle/label-placement/demo.html | 2 +- .../label-placement/{index.md => index.mdx} | 0 static/usage/v8/toggle/list/demo.html | 2 +- .../v8/toggle/list/{index.md => index.mdx} | 0 static/usage/v8/toggle/on-off/demo.html | 2 +- .../v8/toggle/on-off/{index.md => index.mdx} | 0 .../usage/v8/toggle/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../toggle/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 .../toggle/theming/css-shadow-parts/demo.html | 2 +- .../css-shadow-parts/{index.md => index.mdx} | 0 static/usage/v8/toolbar/basic/demo.html | 2 +- .../v8/toolbar/basic/{index.md => index.mdx} | 0 static/usage/v8/toolbar/buttons/demo.html | 2 +- .../toolbar/buttons/{index.md => index.mdx} | 0 .../usage/v8/toolbar/progress-bars/demo.html | 2 +- .../progress-bars/{index.md => index.mdx} | 0 static/usage/v8/toolbar/searchbars/demo.html | 2 +- .../searchbars/{index.md => index.mdx} | 0 static/usage/v8/toolbar/segments/demo.html | 2 +- .../toolbar/segments/{index.md => index.mdx} | 0 .../usage/v8/toolbar/theming/colors/demo.html | 2 +- .../theming/colors/{index.md => index.mdx} | 0 .../toolbar/theming/css-properties/demo.html | 2 +- .../css-properties/{index.md => index.mdx} | 0 .../accessibility/animations/demo.html | 6 +- .../animations/{index.md => index.mdx} | 0 static/usage/v9/accordion/basic/demo.html | 6 +- .../accordion/basic/{index.md => index.mdx} | 0 .../advanced-expansion-styles/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../customization/expansion-styles/demo.html | 6 +- .../expansion-styles/{index.md => index.mdx} | 0 .../accordion/customization/icons/demo.html | 6 +- .../icons/{index.md => index.mdx} | 0 .../accordion/customization/theming/demo.html | 6 +- .../theming/{index.md => index.mdx} | 0 .../v9/accordion/disable/group/demo.html | 6 +- .../disable/group/{index.md => index.mdx} | 0 .../v9/accordion/disable/individual/demo.html | 6 +- .../individual/{index.md => index.mdx} | 0 .../v9/accordion/listen-changes/demo.html | 6 +- .../listen-changes/{index.md => index.mdx} | 0 static/usage/v9/accordion/multiple/demo.html | 6 +- .../multiple/{index.md => index.mdx} | 0 .../v9/accordion/readonly/group/demo.html | 6 +- .../readonly/group/{index.md => index.mdx} | 0 .../accordion/readonly/individual/demo.html | 6 +- .../individual/{index.md => index.mdx} | 0 static/usage/v9/accordion/toggle/demo.html | 6 +- .../accordion/toggle/{index.md => index.mdx} | 0 .../v9/action-sheet/controller/demo.html | 6 +- .../controller/{index.md => index.mdx} | 0 .../v9/action-sheet/inline/isOpen/demo.html | 6 +- .../inline/isOpen/{index.md => index.mdx} | 0 .../v9/action-sheet/inline/trigger/demo.html | 6 +- .../inline/trigger/{index.md => index.mdx} | 0 .../role-info-on-dismiss/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../v9/action-sheet/theming/styling/demo.html | 6 +- .../theming/styling/{index.md => index.mdx} | 0 static/usage/v9/alert/buttons/demo.html | 6 +- .../v9/alert/buttons/{index.md => index.mdx} | 0 static/usage/v9/alert/customization/demo.html | 6 +- .../customization/{index.md => index.mdx} | 0 static/usage/v9/alert/inputs/radios/demo.html | 6 +- .../inputs/radios/{index.md => index.mdx} | 0 .../v9/alert/inputs/text-inputs/demo.html | 6 +- .../text-inputs/{index.md => index.mdx} | 0 .../v9/alert/presenting/controller/demo.html | 6 +- .../controller/{index.md => index.mdx} | 0 .../v9/alert/presenting/isOpen/demo.html | 6 +- .../presenting/isOpen/{index.md => index.mdx} | 0 .../v9/alert/presenting/trigger/demo.html | 6 +- .../trigger/{index.md => index.mdx} | 0 static/usage/v9/animations/basic/demo.html | 8 +- .../animations/basic/{index.md => index.mdx} | 0 .../before-and-after-hooks/demo.html | 8 +- .../{index.md => index.mdx} | 0 static/usage/v9/animations/chain/demo.html | 8 +- .../animations/chain/{index.md => index.mdx} | 0 .../gesture/angular/example_component_ts.md | 5 +- static/usage/v9/animations/gesture/demo.html | 8 +- .../gesture/{index.md => index.mdx} | 0 static/usage/v9/animations/group/demo.html | 8 +- .../animations/group/{index.md => index.mdx} | 0 .../usage/v9/animations/keyframes/demo.html | 8 +- .../keyframes/{index.md => index.mdx} | 0 .../v9/animations/modal-override/demo.html | 8 +- .../modal-override/{index.md => index.mdx} | 0 .../v9/animations/preference-based/demo.html | 8 +- .../preference-based/{index.md => index.mdx} | 0 static/usage/v9/app/set-focus/demo.html | 6 +- .../v9/app/set-focus/{index.md => index.mdx} | 0 static/usage/v9/avatar/basic/demo.html | 6 +- .../v9/avatar/basic/{index.md => index.mdx} | 0 static/usage/v9/avatar/chip/demo.html | 6 +- .../v9/avatar/chip/{index.md => index.mdx} | 0 static/usage/v9/avatar/item/demo.html | 6 +- .../v9/avatar/item/{index.md => index.mdx} | 0 .../avatar/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/back-button/basic/demo.html | 6 +- .../back-button/basic/{index.md => index.mdx} | 0 static/usage/v9/back-button/custom/demo.html | 6 +- .../custom/{index.md => index.mdx} | 0 static/usage/v9/backdrop/basic/demo.html | 6 +- .../v9/backdrop/basic/{index.md => index.mdx} | 0 static/usage/v9/backdrop/styling/demo.html | 6 +- .../backdrop/styling/{index.md => index.mdx} | 0 static/usage/v9/badge/basic/demo.html | 6 +- .../v9/badge/basic/{index.md => index.mdx} | 0 .../usage/v9/badge/inside-tab-bar/demo.html | 6 +- .../inside-tab-bar/{index.md => index.mdx} | 0 .../usage/v9/badge/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../v9/badge/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/breadcrumbs/basic/demo.html | 6 +- .../breadcrumbs/basic/{index.md => index.mdx} | 0 .../expand-on-click/demo.html | 6 +- .../expand-on-click/{index.md => index.mdx} | 0 .../items-before-after/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../collapsing-items/max-items/demo.html | 6 +- .../max-items/{index.md => index.mdx} | 0 .../popover-on-click/demo.html | 6 +- .../popover-on-click/{index.md => index.mdx} | 0 .../icons/custom-separators/demo.html | 6 +- .../custom-separators/{index.md => index.mdx} | 0 .../icons/icons-on-items/demo.html | 6 +- .../icons-on-items/{index.md => index.mdx} | 0 .../v9/breadcrumbs/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/button/basic/demo.html | 6 +- .../v9/button/basic/{index.md => index.mdx} | 0 static/usage/v9/button/expand/demo.html | 6 +- .../v9/button/expand/{index.md => index.mdx} | 0 static/usage/v9/button/fill/demo.html | 6 +- .../v9/button/fill/{index.md => index.mdx} | 0 static/usage/v9/button/icons/demo.html | 6 +- .../v9/button/icons/{index.md => index.mdx} | 0 static/usage/v9/button/shape/demo.html | 6 +- .../v9/button/shape/{index.md => index.mdx} | 0 static/usage/v9/button/size/demo.html | 6 +- .../v9/button/size/{index.md => index.mdx} | 0 .../usage/v9/button/text-wrapping/demo.html | 6 +- .../text-wrapping/{index.md => index.mdx} | 0 .../usage/v9/button/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../button/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/buttons/basic/demo.html | 6 +- .../v9/buttons/basic/{index.md => index.mdx} | 0 static/usage/v9/buttons/placement/demo.html | 6 +- .../buttons/placement/{index.md => index.mdx} | 0 static/usage/v9/buttons/types/demo.html | 6 +- .../v9/buttons/types/{index.md => index.mdx} | 0 static/usage/v9/card/basic/demo.html | 6 +- .../v9/card/basic/{index.md => index.mdx} | 0 static/usage/v9/card/buttons/demo.html | 6 +- .../v9/card/buttons/{index.md => index.mdx} | 0 static/usage/v9/card/list/demo.html | 6 +- .../v9/card/list/{index.md => index.mdx} | 0 static/usage/v9/card/media/demo.html | 6 +- .../v9/card/media/{index.md => index.mdx} | 0 static/usage/v9/card/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../v9/card/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/checkbox/alignment/demo.html | 6 +- .../alignment/{index.md => index.mdx} | 0 static/usage/v9/checkbox/basic/demo.html | 6 +- .../v9/checkbox/basic/{index.md => index.mdx} | 0 .../usage/v9/checkbox/helper-error/demo.html | 6 +- .../helper-error/{index.md => index.mdx} | 0 .../usage/v9/checkbox/indeterminate/demo.html | 6 +- .../indeterminate/{index.md => index.mdx} | 0 static/usage/v9/checkbox/justify/demo.html | 6 +- .../checkbox/justify/{index.md => index.mdx} | 0 static/usage/v9/checkbox/label-link/demo.html | 6 +- .../label-link/{index.md => index.mdx} | 0 .../v9/checkbox/label-placement/demo.html | 6 +- .../label-placement/{index.md => index.mdx} | 0 .../checkbox/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/chip/basic/demo.html | 6 +- .../v9/chip/basic/{index.md => index.mdx} | 0 static/usage/v9/chip/slots/demo.html | 6 +- .../v9/chip/slots/{index.md => index.mdx} | 0 static/usage/v9/chip/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../v9/chip/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/common.js | 2 +- static/usage/v9/config/mode/demo.html | 6 +- .../v9/config/mode/{index.md => index.mdx} | 0 static/usage/v9/content/basic/demo.html | 6 +- .../v9/content/basic/{index.md => index.mdx} | 0 static/usage/v9/content/fixed/demo.html | 6 +- .../v9/content/fixed/{index.md => index.mdx} | 0 static/usage/v9/content/fullscreen/demo.html | 6 +- .../fullscreen/{index.md => index.mdx} | 0 .../usage/v9/content/header-footer/demo.html | 6 +- .../header-footer/{index.md => index.mdx} | 0 .../usage/v9/content/scroll-events/demo.html | 6 +- .../scroll-events/{index.md => index.mdx} | 0 .../usage/v9/content/scroll-methods/demo.html | 6 +- .../scroll-methods/{index.md => index.mdx} | 0 .../usage/v9/content/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../content/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../theming/css-shadow-parts/demo.html | 6 +- .../css-shadow-parts/{index.md => index.mdx} | 0 .../v9/content/theming/safe-area/demo.html | 6 +- .../theming/safe-area/{index.md => index.mdx} | 0 .../usage/v9/datetime-button/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../datetime-button/format-options/demo.html | 6 +- .../format-options/{index.md => index.mdx} | 0 static/usage/v9/datetime/basic/demo.html | 6 +- .../v9/datetime/basic/{index.md => index.mdx} | 0 .../customizing-button-texts/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../buttons/customizing-buttons/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../showing-confirmation-buttons/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../date-constraints/advanced/demo.html | 6 +- .../advanced/{index.md => index.mdx} | 0 .../date-constraints/max-min/demo.html | 6 +- .../max-min/{index.md => index.mdx} | 0 .../date-constraints/values/demo.html | 6 +- .../values/{index.md => index.mdx} | 0 .../v9/datetime/format-options/demo.html | 6 +- .../format-options/{index.md => index.mdx} | 0 .../datetime/highlightedDates/array/demo.html | 6 +- .../array/{index.md => index.mdx} | 0 .../highlightedDates/callback/demo.html | 6 +- .../callback/{index.md => index.mdx} | 0 .../localization/custom-locale/demo.html | 6 +- .../custom-locale/{index.md => index.mdx} | 0 .../localization/first-day-of-week/demo.html | 6 +- .../first-day-of-week/{index.md => index.mdx} | 0 .../localization/hour-cycle/demo.html | 6 +- .../hour-cycle/{index.md => index.mdx} | 0 .../locale-extension-tags/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../localization/time-label/demo.html | 6 +- .../time-label/{index.md => index.mdx} | 0 static/usage/v9/datetime/multiple/demo.html | 6 +- .../datetime/multiple/{index.md => index.mdx} | 0 .../v9/datetime/presentation/date/demo.html | 6 +- .../presentation/date/{index.md => index.mdx} | 0 .../presentation/month-and-year/demo.html | 6 +- .../month-and-year/{index.md => index.mdx} | 0 .../v9/datetime/presentation/time/demo.html | 6 +- .../presentation/time/{index.md => index.mdx} | 0 .../v9/datetime/presentation/wheel/demo.html | 6 +- .../wheel/{index.md => index.mdx} | 0 .../v9/datetime/show-adjacent-days/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../datetime/styling/calendar-days/demo.html | 6 +- .../calendar-days/{index.md => index.mdx} | 0 .../styling/calendar-header/demo.html | 6 +- .../calendar-header/{index.md => index.mdx} | 0 .../styling/datetime-header/demo.html | 6 +- .../datetime-header/{index.md => index.mdx} | 0 .../datetime/styling/global-theming/demo.html | 6 +- .../global-theming/{index.md => index.mdx} | 0 .../datetime/styling/wheel-styling/demo.html | 6 +- .../wheel-styling/{index.md => index.mdx} | 0 .../title/customizing-title/demo.html | 6 +- .../customizing-title/{index.md => index.mdx} | 0 .../title/showing-default-title/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v9/fab/basic/demo.html | 6 +- .../v9/fab/basic/{index.md => index.mdx} | 0 static/usage/v9/fab/before-content/demo.html | 6 +- .../before-content/{index.md => index.mdx} | 0 static/usage/v9/fab/button-sizing/demo.html | 6 +- .../fab/button-sizing/{index.md => index.mdx} | 0 static/usage/v9/fab/list-side/demo.html | 6 +- .../v9/fab/list-side/{index.md => index.mdx} | 0 static/usage/v9/fab/positioning/demo.html | 6 +- .../fab/positioning/{index.md => index.mdx} | 0 static/usage/v9/fab/safe-area/demo.html | 6 +- .../v9/fab/safe-area/{index.md => index.mdx} | 0 static/usage/v9/fab/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-custom-properties/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../angular/example_component_css.md | 4 +- .../v9/fab/theming/css-shadow-parts/demo.html | 10 +- .../css-shadow-parts/{index.md => index.mdx} | 0 .../theming/css-shadow-parts/javascript.md | 4 +- .../css-shadow-parts/javascript/index_html.md | 4 +- .../css-shadow-parts/react/main_css.md | 4 +- .../v9/fab/theming/css-shadow-parts/vue.md | 4 +- static/usage/v9/footer/basic/demo.html | 6 +- .../v9/footer/basic/{index.md => index.mdx} | 0 .../v9/footer/custom-scroll-target/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v9/footer/fade/demo.html | 6 +- .../v9/footer/fade/{index.md => index.mdx} | 0 static/usage/v9/footer/no-border/demo.html | 6 +- .../footer/no-border/{index.md => index.mdx} | 0 static/usage/v9/footer/translucent/demo.html | 6 +- .../translucent/{index.md => index.mdx} | 0 .../basic/angular/example_component_ts.md | 6 +- static/usage/v9/gestures/basic/demo.html | 8 +- .../v9/gestures/basic/{index.md => index.mdx} | 0 .../angular/example_component_ts.md | 5 +- .../usage/v9/gestures/double-click/demo.html | 8 +- .../double-click/{index.md => index.mdx} | 0 static/usage/v9/grid/basic/demo.html | 6 +- .../v9/grid/basic/{index.md => index.mdx} | 0 .../grid/customizing/column-number/demo.html | 6 +- .../column-number/{index.md => index.mdx} | 0 .../v9/grid/customizing/padding/demo.html | 6 +- .../padding/{index.md => index.mdx} | 0 .../usage/v9/grid/customizing/width/demo.html | 6 +- .../customizing/width/{index.md => index.mdx} | 0 static/usage/v9/grid/fixed/demo.html | 6 +- .../v9/grid/fixed/{index.md => index.mdx} | 0 .../v9/grid/horizontal-alignment/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../usage/v9/grid/offset-responsive/demo.html | 6 +- .../offset-responsive/{index.md => index.mdx} | 0 static/usage/v9/grid/offset/demo.html | 6 +- .../v9/grid/offset/{index.md => index.mdx} | 0 .../v9/grid/push-pull-responsive/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v9/grid/push-pull/demo.html | 6 +- .../v9/grid/push-pull/{index.md => index.mdx} | 0 static/usage/v9/grid/size-auto/demo.html | 6 +- .../v9/grid/size-auto/{index.md => index.mdx} | 0 .../usage/v9/grid/size-responsive/demo.html | 6 +- .../size-responsive/{index.md => index.mdx} | 0 static/usage/v9/grid/size/demo.html | 6 +- .../v9/grid/size/{index.md => index.mdx} | 0 .../v9/grid/vertical-alignment/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v9/header/basic/demo.html | 6 +- .../v9/header/basic/{index.md => index.mdx} | 0 static/usage/v9/header/condense/demo.html | 6 +- .../header/condense/{index.md => index.mdx} | 0 .../v9/header/custom-scroll-target/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v9/header/fade/demo.html | 6 +- .../v9/header/fade/{index.md => index.mdx} | 0 static/usage/v9/header/no-border/demo.html | 6 +- .../header/no-border/{index.md => index.mdx} | 0 static/usage/v9/header/translucent/demo.html | 6 +- .../translucent/{index.md => index.mdx} | 0 static/usage/v9/icon/basic/demo.html | 6 +- .../v9/icon/basic/{index.md => index.mdx} | 0 static/usage/v9/icon/custom-svgs/demo.html | 6 +- .../icon/custom-svgs/{index.md => index.mdx} | 0 static/usage/v9/icon/font-icons/demo.html | 6 +- .../icon/font-icons/{index.md => index.mdx} | 0 static/usage/v9/img/basic/demo.html | 6 +- .../v9/img/basic/{index.md => index.mdx} | 0 .../usage/v9/infinite-scroll/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../custom-infinite-scroll-content/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../infinite-scroll-content/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v9/input-otp/basic/demo.html | 6 +- .../input-otp/basic/{index.md => index.mdx} | 0 static/usage/v9/input-otp/fill/demo.html | 6 +- .../v9/input-otp/fill/{index.md => index.mdx} | 0 static/usage/v9/input-otp/pattern/demo.html | 6 +- .../input-otp/pattern/{index.md => index.mdx} | 0 .../usage/v9/input-otp/separators/demo.html | 6 +- .../separators/{index.md => index.mdx} | 0 static/usage/v9/input-otp/shape/demo.html | 6 +- .../input-otp/shape/{index.md => index.mdx} | 0 static/usage/v9/input-otp/size/demo.html | 6 +- .../v9/input-otp/size/{index.md => index.mdx} | 0 static/usage/v9/input-otp/states/demo.html | 6 +- .../input-otp/states/{index.md => index.mdx} | 0 .../v9/input-otp/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/input-otp/type/demo.html | 6 +- .../v9/input-otp/type/{index.md => index.mdx} | 0 .../v9/input-password-toggle/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 static/usage/v9/input/basic/demo.html | 6 +- .../v9/input/basic/{index.md => index.mdx} | 0 static/usage/v9/input/clear/demo.html | 6 +- .../v9/input/clear/{index.md => index.mdx} | 0 .../v9/input/counter-alignment/demo.html | 6 +- .../counter-alignment/{index.md => index.mdx} | 0 static/usage/v9/input/counter/demo.html | 6 +- .../v9/input/counter/{index.md => index.mdx} | 0 static/usage/v9/input/fill/demo.html | 6 +- .../v9/input/fill/{index.md => index.mdx} | 0 static/usage/v9/input/filtering/demo.html | 6 +- .../input/filtering/{index.md => index.mdx} | 0 static/usage/v9/input/helper-error/demo.html | 6 +- .../helper-error/{index.md => index.mdx} | 0 .../usage/v9/input/label-placement/demo.html | 6 +- .../label-placement/{index.md => index.mdx} | 0 static/usage/v9/input/label-slot/demo.html | 6 +- .../input/label-slot/{index.md => index.mdx} | 0 static/usage/v9/input/mask/demo.html | 6 +- .../v9/input/mask/{index.md => index.mdx} | 0 .../usage/v9/input/no-visible-label/demo.html | 6 +- .../no-visible-label/{index.md => index.mdx} | 0 static/usage/v9/input/set-focus/demo.html | 6 +- .../input/set-focus/{index.md => index.mdx} | 0 .../usage/v9/input/start-end-slots/demo.html | 6 +- .../start-end-slots/{index.md => index.mdx} | 0 .../usage/v9/input/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../v9/input/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/input/types/demo.html | 6 +- .../v9/input/types/{index.md => index.mdx} | 0 static/usage/v9/item-divider/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../v9/item-divider/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/item-group/basic/demo.html | 6 +- .../item-group/basic/{index.md => index.mdx} | 0 .../v9/item-group/sliding-items/demo.html | 6 +- .../sliding-items/{index.md => index.mdx} | 0 static/usage/v9/item-sliding/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../v9/item-sliding/expandable/demo.html | 6 +- .../expandable/{index.md => index.mdx} | 0 static/usage/v9/item-sliding/icons/demo.html | 6 +- .../icons/{index.md => index.mdx} | 0 static/usage/v9/item/basic/demo.html | 6 +- .../v9/item/basic/{index.md => index.mdx} | 0 static/usage/v9/item/buttons/demo.html | 6 +- .../v9/item/buttons/{index.md => index.mdx} | 0 static/usage/v9/item/clickable/demo.html | 6 +- .../v9/item/clickable/{index.md => index.mdx} | 0 .../v9/item/content-types/actions/demo.html | 6 +- .../actions/{index.md => index.mdx} | 0 .../v9/item/content-types/controls/demo.html | 6 +- .../controls/{index.md => index.mdx} | 0 .../v9/item/content-types/metadata/demo.html | 6 +- .../metadata/{index.md => index.mdx} | 0 .../supporting-visuals/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../v9/item/content-types/text/demo.html | 6 +- .../text/{index.md => index.mdx} | 0 static/usage/v9/item/detail-arrows/demo.html | 6 +- .../detail-arrows/{index.md => index.mdx} | 0 static/usage/v9/item/inputs/demo.html | 6 +- .../v9/item/inputs/{index.md => index.mdx} | 0 static/usage/v9/item/lines/demo.html | 6 +- .../v9/item/lines/{index.md => index.mdx} | 0 static/usage/v9/item/media/demo.html | 6 +- .../v9/item/media/{index.md => index.mdx} | 0 static/usage/v9/item/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../v9/item/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../item/theming/css-shadow-parts/demo.html | 6 +- .../css-shadow-parts/{index.md => index.mdx} | 0 .../v9/item/theming/input-highlight/demo.html | 6 +- .../input-highlight/{index.md => index.mdx} | 0 .../usage/v9/keyboard/enterkeyhint/demo.html | 6 +- .../enterkeyhint/{index.md => index.mdx} | 0 static/usage/v9/keyboard/inputmode/demo.html | 6 +- .../inputmode/{index.md => index.mdx} | 0 static/usage/v9/label/basic/demo.html | 6 +- .../v9/label/basic/{index.md => index.mdx} | 0 static/usage/v9/label/input/demo.html | 6 +- .../v9/label/input/{index.md => index.mdx} | 0 static/usage/v9/label/item/demo.html | 6 +- .../v9/label/item/{index.md => index.mdx} | 0 .../usage/v9/label/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../v9/layout/dynamic-font-scaling/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v9/list-header/basic/demo.html | 6 +- .../list-header/basic/{index.md => index.mdx} | 0 static/usage/v9/list-header/buttons/demo.html | 6 +- .../buttons/{index.md => index.mdx} | 0 static/usage/v9/list-header/lines/demo.html | 6 +- .../list-header/lines/{index.md => index.mdx} | 0 .../v9/list-header/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/list/basic/demo.html | 6 +- .../v9/list/basic/{index.md => index.mdx} | 0 static/usage/v9/list/inset/demo.html | 6 +- .../v9/list/inset/{index.md => index.mdx} | 0 static/usage/v9/list/lines/demo.html | 6 +- .../v9/list/lines/{index.md => index.mdx} | 0 static/usage/v9/loading/controller/demo.html | 8 +- .../controller/{index.md => index.mdx} | 0 static/usage/v9/loading/inline/demo.html | 6 +- .../v9/loading/inline/{index.md => index.mdx} | 0 static/usage/v9/loading/spinners/demo.html | 6 +- .../loading/spinners/{index.md => index.mdx} | 0 static/usage/v9/loading/theming/demo.html | 8 +- .../loading/theming/{index.md => index.mdx} | 0 static/usage/v9/menu/basic/demo.html | 6 +- .../v9/menu/basic/{index.md => index.mdx} | 0 static/usage/v9/menu/multiple/demo.html | 8 +- .../v9/menu/multiple/{index.md => index.mdx} | 0 static/usage/v9/menu/sides/demo.html | 6 +- .../v9/menu/sides/{index.md => index.mdx} | 0 static/usage/v9/menu/theming/demo.html | 6 +- .../v9/menu/theming/{index.md => index.mdx} | 0 static/usage/v9/menu/toggle/demo.html | 6 +- .../v9/menu/toggle/{index.md => index.mdx} | 0 static/usage/v9/menu/type/demo.html | 6 +- .../v9/menu/type/{index.md => index.mdx} | 0 static/usage/v9/menu/type/react.md | 3 +- .../v9/modal/can-dismiss/boolean/demo.html | 6 +- .../boolean/{index.md => index.mdx} | 0 .../modal/can-dismiss/child-state/demo.html | 6 +- .../child-state/{index.md => index.mdx} | 0 .../v9/modal/can-dismiss/function/demo.html | 6 +- .../function/{index.md => index.mdx} | 0 .../prevent-swipe-to-close/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v9/modal/card/basic/demo.html | 6 +- .../modal/card/basic/{index.md => index.mdx} | 0 static/usage/v9/modal/controller/demo.html | 8 +- .../modal/controller/{index.md => index.mdx} | 0 static/usage/v9/modal/controller/react.md | 2 +- .../usage/v9/modal/custom-dialogs/demo.html | 6 +- .../custom-dialogs/{index.md => index.mdx} | 0 .../usage/v9/modal/drag-move-event/demo.html | 6 +- .../drag-move-event/{index.md => index.mdx} | 0 .../v9/modal/drag-start-end-events/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v9/modal/inline/basic/demo.html | 6 +- .../inline/basic/{index.md => index.mdx} | 0 .../usage/v9/modal/inline/is-open/demo.html | 6 +- .../inline/is-open/{index.md => index.mdx} | 0 .../v9/modal/performance/mount/demo.html | 6 +- .../performance/mount/{index.md => index.mdx} | 0 .../v9/modal/sheet/auto-height/demo.html | 6 +- .../sheet/auto-height/{index.md => index.mdx} | 0 .../modal/sheet/background-content/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v9/modal/sheet/basic/demo.html | 6 +- .../modal/sheet/basic/{index.md => index.mdx} | 0 .../v9/modal/sheet/expand-to-scroll/demo.html | 6 +- .../expand-to-scroll/{index.md => index.mdx} | 0 .../v9/modal/sheet/handle-behavior/demo.html | 6 +- .../handle-behavior/{index.md => index.mdx} | 0 .../v9/modal/styling/animations/demo.html | 8 +- .../animations/{index.md => index.mdx} | 0 .../usage/v9/modal/styling/theming/demo.html | 6 +- .../styling/theming/{index.md => index.mdx} | 0 .../usage/v9/nav/modal-navigation/demo.html | 6 +- .../modal-navigation/{index.md => index.mdx} | 0 static/usage/v9/nav/nav-link/demo.html | 6 +- .../v9/nav/nav-link/{index.md => index.mdx} | 0 static/usage/v9/navigation/demo.html | 6 +- .../v9/navigation/{index.md => index.mdx} | 0 static/usage/v9/note/basic/demo.html | 6 +- .../v9/note/basic/{index.md => index.mdx} | 0 static/usage/v9/note/item/demo.html | 6 +- .../v9/note/item/{index.md => index.mdx} | 0 static/usage/v9/note/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../v9/note/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/picker/basic/demo.html | 6 +- .../v9/picker/basic/{index.md => index.mdx} | 0 static/usage/v9/picker/modal/demo.html | 6 +- .../v9/picker/modal/{index.md => index.mdx} | 0 .../usage/v9/picker/prefix-suffix/demo.html | 6 +- .../prefix-suffix/{index.md => index.mdx} | 0 .../picker/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../customization/positioning/demo.html | 6 +- .../positioning/{index.md => index.mdx} | 0 .../v9/popover/customization/sizing/demo.html | 6 +- .../sizing/{index.md => index.mdx} | 0 .../popover/customization/styling/demo.html | 6 +- .../styling/{index.md => index.mdx} | 0 static/usage/v9/popover/nested/demo.html | 6 +- .../v9/popover/nested/{index.md => index.mdx} | 0 .../v9/popover/performance/mount/demo.html | 6 +- .../performance/mount/{index.md => index.mdx} | 0 .../popover/presenting/controller/demo.html | 6 +- .../controller/{index.md => index.mdx} | 0 .../v9/popover/presenting/controller/react.md | 4 +- .../presenting/inline-isopen/demo.html | 6 +- .../inline-isopen/{index.md => index.mdx} | 0 .../presenting/inline-trigger/demo.html | 6 +- .../inline-trigger/{index.md => index.mdx} | 0 static/usage/v9/progress-bar/buffer/demo.html | 6 +- .../buffer/{index.md => index.mdx} | 0 .../v9/progress-bar/determinate/demo.html | 6 +- .../determinate/{index.md => index.mdx} | 0 .../v9/progress-bar/indeterminate/demo.html | 6 +- .../indeterminate/{index.md => index.mdx} | 0 .../v9/progress-bar/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../theming/css-shadow-parts/demo.html | 6 +- .../css-shadow-parts/{index.md => index.mdx} | 0 static/usage/v9/radio/alignment/demo.html | 6 +- .../radio/alignment/{index.md => index.mdx} | 0 static/usage/v9/radio/basic/demo.html | 6 +- .../v9/radio/basic/{index.md => index.mdx} | 0 .../usage/v9/radio/empty-selection/demo.html | 6 +- .../empty-selection/{index.md => index.mdx} | 0 static/usage/v9/radio/helper-error/demo.html | 6 +- .../helper-error/{index.md => index.mdx} | 0 static/usage/v9/radio/justify/demo.html | 6 +- .../v9/radio/justify/{index.md => index.mdx} | 0 .../usage/v9/radio/label-placement/demo.html | 6 +- .../label-placement/{index.md => index.mdx} | 0 static/usage/v9/radio/label-wrap/demo.html | 6 +- .../radio/label-wrap/{index.md => index.mdx} | 0 .../usage/v9/radio/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../v9/radio/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../radio/theming/css-shadow-parts/demo.html | 6 +- .../css-shadow-parts/{index.md => index.mdx} | 0 .../v9/radio/using-comparewith/demo.html | 6 +- .../using-comparewith/{index.md => index.mdx} | 0 static/usage/v9/range/basic/demo.html | 6 +- .../v9/range/basic/{index.md => index.mdx} | 0 static/usage/v9/range/dual-knobs/demo.html | 6 +- .../range/dual-knobs/{index.md => index.mdx} | 0 .../usage/v9/range/ion-change-event/demo.html | 6 +- .../ion-change-event/{index.md => index.mdx} | 0 .../v9/range/ion-knob-move-event/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v9/range/label-slot/demo.html | 6 +- .../range/label-slot/{index.md => index.mdx} | 0 static/usage/v9/range/labels/demo.html | 6 +- .../v9/range/labels/{index.md => index.mdx} | 0 .../usage/v9/range/no-visible-label/demo.html | 6 +- .../no-visible-label/{index.md => index.mdx} | 0 static/usage/v9/range/pins/demo.html | 6 +- .../v9/range/pins/{index.md => index.mdx} | 0 static/usage/v9/range/slots/demo.html | 6 +- .../v9/range/slots/{index.md => index.mdx} | 0 .../usage/v9/range/snapping-ticks/demo.html | 6 +- .../snapping-ticks/{index.md => index.mdx} | 0 .../v9/range/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../range/theming/css-shadow-parts/demo.html | 6 +- .../css-shadow-parts/{index.md => index.mdx} | 0 static/usage/v9/refresher/advanced/demo.html | 6 +- .../advanced/{index.md => index.mdx} | 0 static/usage/v9/refresher/basic/demo.html | 6 +- .../refresher/basic/{index.md => index.mdx} | 0 .../v9/refresher/custom-content/demo.html | 6 +- .../custom-content/{index.md => index.mdx} | 0 .../refresher/custom-scroll-target/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../v9/refresher/pull-properties/demo.html | 6 +- .../pull-properties/{index.md => index.mdx} | 0 .../refresher/pull-start-end-events/demo.html | 6 +- .../{index.md => index.mdx} | 0 static/usage/v9/reorder/basic/demo.html | 6 +- .../v9/reorder/basic/{index.md => index.mdx} | 0 static/usage/v9/reorder/custom-icon/demo.html | 6 +- .../custom-icon/{index.md => index.mdx} | 0 .../v9/reorder/custom-scroll-target/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../v9/reorder/reorder-move-event/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../reorder-start-end-events/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../v9/reorder/toggling-disabled/demo.html | 6 +- .../toggling-disabled/{index.md => index.mdx} | 0 .../usage/v9/reorder/updating-data/demo.html | 6 +- .../updating-data/{index.md => index.mdx} | 0 static/usage/v9/reorder/wrapper/demo.html | 6 +- .../reorder/wrapper/{index.md => index.mdx} | 0 static/usage/v9/ripple-effect/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../v9/ripple-effect/customizing/demo.html | 6 +- .../customizing/{index.md => index.mdx} | 0 static/usage/v9/ripple-effect/type/demo.html | 6 +- .../type/{index.md => index.mdx} | 0 static/usage/v9/router/basic/demo.html | 6 +- .../v9/router/basic/{index.md => index.mdx} | 0 .../usage/v9/router/nav-within-page/demo.html | 12 +- .../nav-within-page/{index.md => index.mdx} | 0 static/usage/v9/searchbar/basic/demo.html | 6 +- .../searchbar/basic/{index.md => index.mdx} | 0 .../v9/searchbar/cancel-button/demo.html | 6 +- .../cancel-button/{index.md => index.mdx} | 0 .../usage/v9/searchbar/clear-button/demo.html | 6 +- .../clear-button/{index.md => index.mdx} | 0 static/usage/v9/searchbar/debounce/demo.html | 6 +- .../debounce/{index.md => index.mdx} | 0 .../usage/v9/searchbar/search-icon/demo.html | 6 +- .../search-icon/{index.md => index.mdx} | 0 .../v9/searchbar/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../usage/v9/segment-button/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../usage/v9/segment-button/layout/demo.html | 6 +- .../layout/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../theming/css-shadow-parts/demo.html | 6 +- .../css-shadow-parts/{index.md => index.mdx} | 0 static/usage/v9/segment/basic/demo.html | 6 +- .../v9/segment/basic/{index.md => index.mdx} | 0 static/usage/v9/segment/scrollable/demo.html | 6 +- .../scrollable/{index.md => index.mdx} | 0 static/usage/v9/segment/swipeable/demo.html | 6 +- .../segment/swipeable/{index.md => index.mdx} | 0 .../usage/v9/segment/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../segment/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../select/basic/multiple-selection/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../basic/responding-to-interaction/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../select/basic/single-selection/demo.html | 6 +- .../single-selection/{index.md => index.mdx} | 0 .../customization/button-text/demo.html | 6 +- .../button-text/{index.md => index.mdx} | 0 .../custom-toggle-icons/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../icon-flip-behavior/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../customization/interface-options/demo.html | 6 +- .../interface-options/{index.md => index.mdx} | 0 .../customization/styling-select/demo.html | 6 +- .../styling-select/{index.md => index.mdx} | 0 static/usage/v9/select/fill/demo.html | 6 +- .../v9/select/fill/{index.md => index.mdx} | 0 static/usage/v9/select/helper-error/demo.html | 6 +- .../helper-error/{index.md => index.mdx} | 0 .../select/interfaces/action-sheet/demo.html | 6 +- .../action-sheet/{index.md => index.mdx} | 0 .../v9/select/interfaces/modal/demo.html | 6 +- .../interfaces/modal/{index.md => index.mdx} | 0 .../v9/select/interfaces/popover/demo.html | 6 +- .../popover/{index.md => index.mdx} | 0 static/usage/v9/select/justify/demo.html | 6 +- .../v9/select/justify/{index.md => index.mdx} | 0 .../usage/v9/select/label-placement/demo.html | 6 +- .../label-placement/{index.md => index.mdx} | 0 static/usage/v9/select/label-slot/demo.html | 6 +- .../select/label-slot/{index.md => index.mdx} | 0 .../v9/select/no-visible-label/demo.html | 6 +- .../no-visible-label/{index.md => index.mdx} | 0 .../multiple-selection/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../using-comparewith/demo.html | 6 +- .../using-comparewith/{index.md => index.mdx} | 0 .../v9/select/rich-content-options/demo.html | 6 +- .../{index.md => index.mdx} | 0 .../usage/v9/select/start-end-slots/demo.html | 6 +- .../start-end-slots/{index.md => index.mdx} | 0 static/usage/v9/select/typeahead/demo.html | 6 +- .../select/typeahead/{index.md => index.mdx} | 0 static/usage/v9/skeleton-text/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/spinner/basic/demo.html | 6 +- .../v9/spinner/basic/{index.md => index.mdx} | 0 .../usage/v9/spinner/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../spinner/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../v9/spinner/theming/resizing/demo.html | 6 +- .../theming/resizing/{index.md => index.mdx} | 0 static/usage/v9/split-pane/basic/demo.html | 6 +- .../split-pane/basic/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/tabs/basic/demo.html | 6 +- .../v9/tabs/basic/{index.md => index.mdx} | 0 static/usage/v9/tabs/router/demo.html | 6 +- .../v9/tabs/router/{index.md => index.mdx} | 0 static/usage/v9/tabs/select-method/demo.html | 6 +- .../select-method/{index.md => index.mdx} | 0 static/usage/v9/text/basic/demo.html | 6 +- .../v9/text/basic/{index.md => index.mdx} | 0 static/usage/v9/text/basic/react.md | 11 +- static/usage/v9/textarea/autogrow/demo.html | 6 +- .../textarea/autogrow/{index.md => index.mdx} | 0 static/usage/v9/textarea/basic/demo.html | 6 +- .../v9/textarea/basic/{index.md => index.mdx} | 0 .../usage/v9/textarea/clear-on-edit/demo.html | 6 +- .../clear-on-edit/{index.md => index.mdx} | 0 static/usage/v9/textarea/counter/demo.html | 6 +- .../textarea/counter/{index.md => index.mdx} | 0 static/usage/v9/textarea/fill/demo.html | 6 +- .../v9/textarea/fill/{index.md => index.mdx} | 0 .../usage/v9/textarea/helper-error/demo.html | 6 +- .../helper-error/{index.md => index.mdx} | 0 .../v9/textarea/label-placement/demo.html | 6 +- .../label-placement/{index.md => index.mdx} | 0 static/usage/v9/textarea/label-slot/demo.html | 6 +- .../label-slot/{index.md => index.mdx} | 0 .../v9/textarea/no-visible-label/demo.html | 6 +- .../no-visible-label/{index.md => index.mdx} | 0 .../v9/textarea/start-end-slots/demo.html | 6 +- .../start-end-slots/{index.md => index.mdx} | 0 static/usage/v9/textarea/theming/demo.html | 6 +- .../textarea/theming/{index.md => index.mdx} | 0 .../v9/theming/always-dark-mode/demo.html | 8 +- .../always-dark-mode/{index.md => index.mdx} | 0 .../always-high-contrast-mode/demo.html | 8 +- .../{index.md => index.mdx} | 0 .../v9/theming/class-dark-mode/demo.html | 8 +- .../class-dark-mode/{index.md => index.mdx} | 0 .../class-high-contrast-mode/demo.html | 12 +- .../{index.md => index.mdx} | 0 .../v9/theming/system-dark-mode/demo.html | 8 +- .../system-dark-mode/{index.md => index.mdx} | 0 .../system-high-contrast-mode/demo.html | 12 +- .../{index.md => index.mdx} | 0 static/usage/v9/thumbnail/basic/demo.html | 6 +- .../thumbnail/basic/{index.md => index.mdx} | 0 static/usage/v9/thumbnail/item/demo.html | 6 +- .../v9/thumbnail/item/{index.md => index.mdx} | 0 .../theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/title/basic/demo.html | 6 +- .../v9/title/basic/{index.md => index.mdx} | 0 .../collapsible-large-title/basic/demo.html | 6 +- .../basic/{index.md => index.mdx} | 0 .../collapsible-large-title/buttons/demo.html | 6 +- .../buttons/{index.md => index.mdx} | 0 .../v9/title/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 static/usage/v9/toast/buttons/demo.html | 6 +- .../v9/toast/buttons/{index.md => index.mdx} | 0 static/usage/v9/toast/icon/demo.html | 6 +- .../v9/toast/icon/{index.md => index.mdx} | 0 static/usage/v9/toast/inline/basic/demo.html | 6 +- .../inline/basic/{index.md => index.mdx} | 0 .../usage/v9/toast/inline/is-open/demo.html | 6 +- .../inline/is-open/{index.md => index.mdx} | 0 static/usage/v9/toast/layout/demo.html | 6 +- .../v9/toast/layout/{index.md => index.mdx} | 0 .../usage/v9/toast/position-anchor/demo.html | 6 +- .../position-anchor/{index.md => index.mdx} | 0 .../v9/toast/presenting/controller/demo.html | 8 +- .../controller/{index.md => index.mdx} | 0 static/usage/v9/toast/swipe-gesture/demo.html | 6 +- .../swipe-gesture/{index.md => index.mdx} | 0 static/usage/v9/toast/theming/demo.html | 6 +- .../v9/toast/theming/{index.md => index.mdx} | 0 static/usage/v9/toggle/alignment/demo.html | 6 +- .../toggle/alignment/{index.md => index.mdx} | 0 static/usage/v9/toggle/basic/demo.html | 6 +- .../v9/toggle/basic/{index.md => index.mdx} | 0 static/usage/v9/toggle/helper-error/demo.html | 6 +- .../helper-error/{index.md => index.mdx} | 0 static/usage/v9/toggle/justify/demo.html | 6 +- .../v9/toggle/justify/{index.md => index.mdx} | 0 .../usage/v9/toggle/label-placement/demo.html | 6 +- .../label-placement/{index.md => index.mdx} | 0 static/usage/v9/toggle/list/demo.html | 6 +- .../v9/toggle/list/{index.md => index.mdx} | 0 static/usage/v9/toggle/on-off/demo.html | 6 +- .../v9/toggle/on-off/{index.md => index.mdx} | 0 .../usage/v9/toggle/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../toggle/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 .../toggle/theming/css-shadow-parts/demo.html | 6 +- .../css-shadow-parts/{index.md => index.mdx} | 0 static/usage/v9/toolbar/basic/demo.html | 6 +- .../v9/toolbar/basic/{index.md => index.mdx} | 0 static/usage/v9/toolbar/buttons/demo.html | 6 +- .../toolbar/buttons/{index.md => index.mdx} | 0 .../usage/v9/toolbar/progress-bars/demo.html | 6 +- .../progress-bars/{index.md => index.mdx} | 0 static/usage/v9/toolbar/searchbars/demo.html | 6 +- .../searchbars/{index.md => index.mdx} | 0 static/usage/v9/toolbar/segments/demo.html | 6 +- .../toolbar/segments/{index.md => index.mdx} | 0 .../usage/v9/toolbar/theming/colors/demo.html | 6 +- .../theming/colors/{index.md => index.mdx} | 0 .../toolbar/theming/css-properties/demo.html | 6 +- .../css-properties/{index.md => index.mdx} | 0 vercel.json | 14 +- .../version-v7/reference/glossary.md | 449 +-- .../version-v8/angular/build-options.md | 8 + .../version-v8/angular/lifecycle.md | 2 + .../version-v8/angular/navigation.md | 4 + versioned_docs/version-v8/angular/overlays.md | 20 +- .../version-v8/angular/performance.md | 2 + versioned_docs/version-v8/angular/pwa.md | 10 +- .../version-v8/angular/quickstart.md | 6 + versioned_docs/version-v8/angular/slides.md | 34 +- versioned_docs/version-v8/angular/storage.md | 2 + versioned_docs/version-v8/angular/testing.md | 6 +- .../version-v8/angular/your-first-app.md | 6 + .../your-first-app/4-loading-photos.md | 2 + .../your-first-app/6-deploying-mobile.md | 2 + .../angular/your-first-app/7-live-reload.md | 7 +- .../version-v8/api/accordion-group.md | 10 +- versioned_docs/version-v8/api/accordion.md | 38 +- versioned_docs/version-v8/api/action-sheet.md | 22 +- versioned_docs/version-v8/api/alert.md | 26 +- versioned_docs/version-v8/api/app.md | 12 +- versioned_docs/version-v8/api/avatar.md | 18 +- versioned_docs/version-v8/api/back-button.md | 14 +- versioned_docs/version-v8/api/backdrop.md | 14 +- versioned_docs/version-v8/api/badge.md | 20 +- versioned_docs/version-v8/api/breadcrumb.md | 10 +- versioned_docs/version-v8/api/breadcrumbs.md | 28 +- versioned_docs/version-v8/api/button.md | 30 +- versioned_docs/version-v8/api/buttons.md | 18 +- versioned_docs/version-v8/api/card-content.md | 10 +- versioned_docs/version-v8/api/card-header.md | 10 +- .../version-v8/api/card-subtitle.md | 10 +- versioned_docs/version-v8/api/card-title.md | 10 +- versioned_docs/version-v8/api/card.md | 22 +- versioned_docs/version-v8/api/checkbox.md | 30 +- versioned_docs/version-v8/api/chip.md | 18 +- versioned_docs/version-v8/api/col.md | 10 +- versioned_docs/version-v8/api/content.md | 30 +- .../version-v8/api/datetime-button.md | 14 +- versioned_docs/version-v8/api/datetime.md | 84 +- versioned_docs/version-v8/api/fab-button.md | 10 +- versioned_docs/version-v8/api/fab-list.md | 10 +- versioned_docs/version-v8/api/fab.md | 28 +- versioned_docs/version-v8/api/footer.md | 20 +- versioned_docs/version-v8/api/grid.md | 38 +- versioned_docs/version-v8/api/header.md | 22 +- versioned_docs/version-v8/api/icon.md | 6 +- versioned_docs/version-v8/api/img.md | 12 +- .../version-v8/api/infinite-scroll-content.md | 10 +- .../version-v8/api/infinite-scroll.md | 16 +- versioned_docs/version-v8/api/input-otp.md | 36 +- .../version-v8/api/input-password-toggle.md | 14 +- versioned_docs/version-v8/api/input.md | 46 +- versioned_docs/version-v8/api/item-divider.md | 16 +- versioned_docs/version-v8/api/item-group.md | 14 +- versioned_docs/version-v8/api/item-option.md | 10 +- versioned_docs/version-v8/api/item-options.md | 10 +- versioned_docs/version-v8/api/item-sliding.md | 16 +- versioned_docs/version-v8/api/item.md | 40 +- versioned_docs/version-v8/api/label.md | 16 +- versioned_docs/version-v8/api/list-header.md | 20 +- versioned_docs/version-v8/api/list.md | 16 +- versioned_docs/version-v8/api/loading.md | 20 +- versioned_docs/version-v8/api/menu-button.md | 10 +- versioned_docs/version-v8/api/menu-toggle.md | 10 +- versioned_docs/version-v8/api/menu.md | 22 +- versioned_docs/version-v8/api/modal.md | 58 +- versioned_docs/version-v8/api/nav-link.md | 10 +- versioned_docs/version-v8/api/nav.md | 16 +- versioned_docs/version-v8/api/note.md | 18 +- .../version-v8/api/picker-column-option.md | 10 +- .../version-v8/api/picker-column.md | 10 +- .../version-v8/api/picker-legacy.md | 18 +- versioned_docs/version-v8/api/picker.md | 20 +- versioned_docs/version-v8/api/popover.md | 32 +- versioned_docs/version-v8/api/progress-bar.md | 24 +- versioned_docs/version-v8/api/radio-group.md | 10 +- versioned_docs/version-v8/api/radio.md | 36 +- versioned_docs/version-v8/api/range.md | 32 +- .../version-v8/api/refresher-content.md | 10 +- versioned_docs/version-v8/api/refresher.md | 22 +- .../version-v8/api/reorder-group.md | 10 +- versioned_docs/version-v8/api/reorder.md | 28 +- .../version-v8/api/ripple-effect.md | 16 +- .../version-v8/api/route-redirect.md | 12 +- versioned_docs/version-v8/api/route.md | 12 +- versioned_docs/version-v8/api/router-link.md | 12 +- .../version-v8/api/router-outlet.md | 10 +- versioned_docs/version-v8/api/router.md | 14 +- versioned_docs/version-v8/api/row.md | 10 +- versioned_docs/version-v8/api/searchbar.md | 26 +- .../version-v8/api/segment-button.md | 18 +- .../version-v8/api/segment-content.md | 12 +- versioned_docs/version-v8/api/segment-view.md | 10 +- versioned_docs/version-v8/api/segment.md | 24 +- .../version-v8/api/select-option.md | 10 +- versioned_docs/version-v8/api/select.md | 58 +- .../version-v8/api/skeleton-text.md | 14 +- versioned_docs/version-v8/api/spinner.md | 18 +- versioned_docs/version-v8/api/split-pane.md | 16 +- versioned_docs/version-v8/api/tab-bar.md | 14 +- versioned_docs/version-v8/api/tab-button.md | 10 +- versioned_docs/version-v8/api/tab.md | 12 +- versioned_docs/version-v8/api/tabs.md | 16 +- versioned_docs/version-v8/api/text.md | 12 +- versioned_docs/version-v8/api/textarea.md | 36 +- versioned_docs/version-v8/api/thumbnail.md | 16 +- versioned_docs/version-v8/api/title.md | 18 +- versioned_docs/version-v8/api/toast.md | 28 +- versioned_docs/version-v8/api/toggle.md | 32 +- versioned_docs/version-v8/api/toolbar.md | 24 +- versioned_docs/version-v8/cli.md | 4 +- .../version-v8/cli/configuration.md | 8 +- versioned_docs/version-v8/cli/livereload.md | 4 + versioned_docs/version-v8/contributing/coc.md | 2 +- .../core-concepts/cross-platform.md | 2 +- .../version-v8/core-concepts/fundamentals.md | 10 +- .../version-v8/core-concepts/webview.md | 8 +- .../what-are-progressive-web-apps.md | 10 +- .../version-v8/deployment/app-store.md | 8 +- .../version-v8/deployment/play-store.mdx | 12 +- .../deployment/progressive-web-app.md | 2 +- .../guides/first-app-v3/intro.md | 12 +- .../guides/first-app-v4/intro.md | 14 +- .../version-v8/developing/config.md | 2 +- .../developing/config/per-platform/index.md | 8 + .../developing/hardware-back-button.md | 4 + .../version-v8/developing/keyboard.md | 20 +- .../version-v8/developing/managing-focus.md | 4 +- .../version-v8/developing/scaffolding.md | 4 + versioned_docs/version-v8/developing/tips.md | 8 +- versioned_docs/version-v8/index.md | 26 +- versioned_docs/version-v8/intro/cli.md | 2 + .../version-v8/intro/environment.md | 8 +- .../version-v8/javascript/quickstart.md | 8 + .../version-v8/layout/css-utilities.md | 2 + .../version-v8/layout/dynamic-font-scaling.md | 8 +- versioned_docs/version-v8/layout/structure.md | 10 +- versioned_docs/version-v8/react/lifecycle.md | 4 + versioned_docs/version-v8/react/navigation.md | 11 +- versioned_docs/version-v8/react/overlays.md | 4 + versioned_docs/version-v8/react/pwa.md | 14 +- versioned_docs/version-v8/react/quickstart.md | 8 + versioned_docs/version-v8/react/slides.md | 36 +- versioned_docs/version-v8/react/storage.md | 2 + .../version-v8/react/your-first-app.md | 4 + .../react/your-first-app/4-loading-photos.md | 2 + .../your-first-app/6-deploying-mobile.md | 2 + .../react/your-first-app/7-live-reload.md | 2 + .../version-v8/reference/browser-support.md | 2 + .../version-v8/reference/glossary.md | 540 +--- .../version-v8/reference/support.md | 4 +- .../version-v8/reference/versioning.md | 4 +- .../version-v8/techniques/security.md | 6 +- versioned_docs/version-v8/theming/advanced.md | 12 +- versioned_docs/version-v8/theming/basics.md | 6 +- versioned_docs/version-v8/theming/colors.md | 4 +- .../version-v8/theming/css-shadow-parts.md | 26 +- .../version-v8/theming/css-variables.md | 2 +- .../version-v8/theming/dark-mode.md | 34 +- .../version-v8/theming/high-contrast-mode.md | 16 +- versioned_docs/version-v8/theming/themes.md | 2 +- .../version-v8/troubleshooting/cors.md | 18 +- .../version-v8/troubleshooting/debugging.md | 4 + .../version-v8/troubleshooting/native.md | 6 +- .../version-v8/troubleshooting/runtime.md | 10 + versioned_docs/version-v8/updating/4-0.md | 12 +- versioned_docs/version-v8/updating/5-0.md | 4 + versioned_docs/version-v8/updating/6-0.md | 12 + versioned_docs/version-v8/updating/7-0.md | 4 + versioned_docs/version-v8/updating/8-0.md | 4 + .../version-v8/utilities/animations.md | 16 +- .../version-v8/utilities/gestures.md | 4 +- versioned_docs/version-v8/vue/lifecycle.md | 2 + versioned_docs/version-v8/vue/navigation.md | 2 + versioned_docs/version-v8/vue/pwa.md | 12 +- versioned_docs/version-v8/vue/quickstart.md | 8 + versioned_docs/version-v8/vue/slides.md | 36 +- versioned_docs/version-v8/vue/storage.md | 2 + .../version-v8/vue/troubleshooting.md | 6 +- .../version-v8/vue/utility-functions.md | 4 + .../version-v8/vue/virtual-scroll.md | 4 + .../version-v8/vue/your-first-app.md | 4 + .../vue/your-first-app/4-loading-photos.md | 2 + .../vue/your-first-app/6-deploying-mobile.md | 2 + .../vue/your-first-app/7-live-reload.md | 2 + .../version-v9/angular/build-options.md | 12 + .../version-v9/angular/lifecycle.md | 2 + .../version-v9/angular/navigation.md | 6 +- versioned_docs/version-v9/angular/overlays.md | 20 +- versioned_docs/version-v9/angular/overview.md | 2 +- .../version-v9/angular/performance.md | 2 + versioned_docs/version-v9/angular/pwa.md | 10 +- .../version-v9/angular/quickstart.md | 6 + versioned_docs/version-v9/angular/slides.md | 34 +- versioned_docs/version-v9/angular/storage.md | 2 + versioned_docs/version-v9/angular/testing.md | 6 +- .../version-v9/angular/your-first-app.md | 6 + .../angular/your-first-app/2-taking-photos.md | 2 + .../angular/your-first-app/3-saving-photos.md | 34 +- .../your-first-app/4-loading-photos.md | 25 +- .../angular/your-first-app/5-adding-mobile.md | 34 +- .../your-first-app/6-deploying-mobile.md | 2 + .../angular/your-first-app/7-live-reload.md | 2 + versioned_docs/version-v9/angular/zoneless.md | 8 +- .../version-v9/api/accordion-group.md | 10 +- versioned_docs/version-v9/api/accordion.md | 38 +- versioned_docs/version-v9/api/action-sheet.md | 37 +- versioned_docs/version-v9/api/alert.md | 46 +- versioned_docs/version-v9/api/app.md | 38 +- versioned_docs/version-v9/api/avatar.md | 31 +- versioned_docs/version-v9/api/back-button.md | 14 +- versioned_docs/version-v9/api/backdrop.md | 27 +- versioned_docs/version-v9/api/badge.md | 34 +- versioned_docs/version-v9/api/breadcrumb.md | 10 +- versioned_docs/version-v9/api/breadcrumbs.md | 40 +- versioned_docs/version-v9/api/button.md | 45 +- versioned_docs/version-v9/api/buttons.md | 18 +- versioned_docs/version-v9/api/card-content.md | 10 +- versioned_docs/version-v9/api/card-header.md | 10 +- .../version-v9/api/card-subtitle.md | 10 +- versioned_docs/version-v9/api/card-title.md | 10 +- versioned_docs/version-v9/api/card.md | 43 +- versioned_docs/version-v9/api/checkbox.md | 45 +- versioned_docs/version-v9/api/chip.md | 32 +- versioned_docs/version-v9/api/col.md | 10 +- versioned_docs/version-v9/api/content.md | 51 +- .../version-v9/api/datetime-button.md | 14 +- versioned_docs/version-v9/api/datetime.md | 84 +- versioned_docs/version-v9/api/fab-button.md | 10 +- versioned_docs/version-v9/api/fab-list.md | 10 +- versioned_docs/version-v9/api/fab.md | 42 +- versioned_docs/version-v9/api/footer.md | 20 +- versioned_docs/version-v9/api/grid.md | 38 +- versioned_docs/version-v9/api/header.md | 22 +- versioned_docs/version-v9/api/icon.md | 10 +- versioned_docs/version-v9/api/img.md | 14 +- .../version-v9/api/infinite-scroll-content.md | 10 +- .../version-v9/api/infinite-scroll.md | 38 +- versioned_docs/version-v9/api/input-otp.md | 36 +- .../version-v9/api/input-password-toggle.md | 30 +- versioned_docs/version-v9/api/input.md | 46 +- versioned_docs/version-v9/api/item-divider.md | 35 +- versioned_docs/version-v9/api/item-group.md | 30 +- versioned_docs/version-v9/api/item-option.md | 10 +- versioned_docs/version-v9/api/item-options.md | 10 +- versioned_docs/version-v9/api/item-sliding.md | 35 +- versioned_docs/version-v9/api/item.md | 40 +- versioned_docs/version-v9/api/label.md | 31 +- versioned_docs/version-v9/api/list-header.md | 34 +- versioned_docs/version-v9/api/list.md | 35 +- versioned_docs/version-v9/api/loading.md | 20 +- versioned_docs/version-v9/api/menu-button.md | 10 +- versioned_docs/version-v9/api/menu-toggle.md | 10 +- versioned_docs/version-v9/api/menu.md | 22 +- versioned_docs/version-v9/api/modal.md | 93 +- versioned_docs/version-v9/api/nav-link.md | 10 +- versioned_docs/version-v9/api/nav.md | 16 +- versioned_docs/version-v9/api/note.md | 33 +- .../version-v9/api/picker-column-option.md | 19 +- .../version-v9/api/picker-column.md | 19 +- versioned_docs/version-v9/api/picker.md | 41 +- versioned_docs/version-v9/api/popover.md | 32 +- versioned_docs/version-v9/api/progress-bar.md | 24 +- versioned_docs/version-v9/api/radio-group.md | 10 +- versioned_docs/version-v9/api/radio.md | 54 +- versioned_docs/version-v9/api/range.md | 50 +- .../version-v9/api/refresher-content.md | 10 +- versioned_docs/version-v9/api/refresher.md | 22 +- .../version-v9/api/reorder-group.md | 10 +- versioned_docs/version-v9/api/reorder.md | 49 +- .../version-v9/api/ripple-effect.md | 35 +- .../version-v9/api/route-redirect.md | 40 +- versioned_docs/version-v9/api/route.md | 113 +- versioned_docs/version-v9/api/router-link.md | 12 +- .../version-v9/api/router-outlet.md | 30 +- versioned_docs/version-v9/api/router.md | 42 +- versioned_docs/version-v9/api/row.md | 10 +- versioned_docs/version-v9/api/searchbar.md | 26 +- .../version-v9/api/segment-button.md | 39 +- .../version-v9/api/segment-content.md | 12 +- versioned_docs/version-v9/api/segment-view.md | 10 +- versioned_docs/version-v9/api/segment.md | 24 +- .../version-v9/api/select-option.md | 10 +- versioned_docs/version-v9/api/select.md | 62 +- .../version-v9/api/skeleton-text.md | 30 +- versioned_docs/version-v9/api/spinner.md | 35 +- versioned_docs/version-v9/api/split-pane.md | 16 +- versioned_docs/version-v9/api/tab-bar.md | 40 +- versioned_docs/version-v9/api/tab-button.md | 10 +- versioned_docs/version-v9/api/tab.md | 12 +- versioned_docs/version-v9/api/tabs.md | 16 +- versioned_docs/version-v9/api/text.md | 27 +- versioned_docs/version-v9/api/textarea.md | 36 +- versioned_docs/version-v9/api/thumbnail.md | 29 +- versioned_docs/version-v9/api/title.md | 18 +- versioned_docs/version-v9/api/toast.md | 50 +- versioned_docs/version-v9/api/toggle.md | 51 +- versioned_docs/version-v9/api/toolbar.md | 24 +- versioned_docs/version-v9/cli.md | 4 +- .../version-v9/cli/configuration.md | 8 +- versioned_docs/version-v9/cli/livereload.md | 4 + versioned_docs/version-v9/contributing/coc.md | 2 +- .../core-concepts/cross-platform.md | 2 +- .../version-v9/core-concepts/fundamentals.md | 10 +- .../version-v9/core-concepts/webview.md | 8 +- .../what-are-progressive-web-apps.md | 10 +- .../version-v9/deployment/app-store.md | 8 +- .../version-v9/deployment/play-store.mdx | 12 +- .../deployment/progressive-web-app.md | 2 +- .../guides/first-app-v3/intro.md | 12 +- .../guides/first-app-v4/intro.md | 14 +- .../version-v9/developing/config.md | 2 +- .../developing/config/per-platform/index.md | 8 + .../developing/hardware-back-button.md | 4 + .../version-v9/developing/keyboard.md | 20 +- .../version-v9/developing/managing-focus.md | 4 +- .../version-v9/developing/scaffolding.md | 4 + versioned_docs/version-v9/developing/tips.md | 8 +- versioned_docs/version-v9/index.md | 25 +- versioned_docs/version-v9/intro/cli.md | 2 + .../version-v9/intro/environment.md | 8 +- .../version-v9/javascript/quickstart.md | 8 + .../version-v9/layout/css-utilities.md | 2 + .../version-v9/layout/dynamic-font-scaling.md | 8 +- versioned_docs/version-v9/layout/structure.md | 10 +- versioned_docs/version-v9/react/lifecycle.md | 4 + versioned_docs/version-v9/react/navigation.md | 4 +- versioned_docs/version-v9/react/overlays.md | 16 +- versioned_docs/version-v9/react/pwa.md | 14 +- versioned_docs/version-v9/react/quickstart.md | 8 + versioned_docs/version-v9/react/slides.md | 36 +- versioned_docs/version-v9/react/storage.md | 2 + .../version-v9/react/your-first-app.md | 4 + .../react/your-first-app/3-saving-photos.md | 34 +- .../react/your-first-app/4-loading-photos.md | 25 +- .../react/your-first-app/5-adding-mobile.md | 36 +- .../your-first-app/6-deploying-mobile.md | 2 + .../react/your-first-app/7-live-reload.md | 2 + .../version-v9/reference/browser-support.md | 2 + .../version-v9/reference/glossary.md | 540 +--- .../version-v9/reference/support.md | 11 +- .../version-v9/reference/versioning.md | 4 +- .../version-v9/techniques/security.md | 6 +- versioned_docs/version-v9/theming/advanced.md | 12 +- versioned_docs/version-v9/theming/basics.md | 6 +- versioned_docs/version-v9/theming/colors.md | 4 +- .../version-v9/theming/css-shadow-parts.md | 26 +- .../version-v9/theming/css-variables.md | 2 +- .../version-v9/theming/dark-mode.md | 34 +- .../version-v9/theming/high-contrast-mode.md | 16 +- versioned_docs/version-v9/theming/themes.md | 2 +- .../version-v9/troubleshooting/cors.md | 18 +- .../version-v9/troubleshooting/debugging.md | 4 + .../version-v9/troubleshooting/native.md | 6 +- .../version-v9/troubleshooting/runtime.md | 10 + versioned_docs/version-v9/updating/4-0.md | 12 +- versioned_docs/version-v9/updating/5-0.md | 4 + versioned_docs/version-v9/updating/6-0.md | 12 + versioned_docs/version-v9/updating/7-0.md | 4 + versioned_docs/version-v9/updating/8-0.md | 4 + versioned_docs/version-v9/updating/9-0.md | 299 +- .../version-v9/utilities/animations.md | 16 +- .../version-v9/utilities/gestures.md | 4 +- versioned_docs/version-v9/vue/lifecycle.md | 2 + versioned_docs/version-v9/vue/navigation.md | 2 + versioned_docs/version-v9/vue/overview.md | 2 +- versioned_docs/version-v9/vue/pwa.md | 12 +- versioned_docs/version-v9/vue/quickstart.md | 8 + versioned_docs/version-v9/vue/slides.md | 36 +- versioned_docs/version-v9/vue/storage.md | 2 + .../version-v9/vue/troubleshooting.md | 6 +- .../version-v9/vue/utility-functions.md | 4 + .../version-v9/vue/virtual-scroll.md | 4 + .../version-v9/vue/your-first-app.md | 4 + .../vue/your-first-app/3-saving-photos.md | 34 +- .../vue/your-first-app/4-loading-photos.md | 38 +- .../vue/your-first-app/5-adding-mobile.md | 45 +- .../vue/your-first-app/6-deploying-mobile.md | 2 + .../vue/your-first-app/7-live-reload.md | 4 +- 3308 files changed, 15390 insertions(+), 11286 deletions(-) create mode 100644 .prettierrc.js rename _templates/playground/new/{index.md.ejs.t => index.mdx.ejs.t} (94%) delete mode 100644 src/styles/components/_theme-toggle.scss create mode 100644 src/theme/Icon/DarkMode/index.tsx create mode 100644 src/theme/Icon/LightMode/index.tsx rename static/usage/v10/accordion/accessibility/animations/{index.md => index.mdx} (100%) rename static/usage/v10/accordion/basic/{index.md => index.mdx} (100%) rename static/usage/v10/accordion/customization/advanced-expansion-styles/{index.md => index.mdx} (100%) rename static/usage/v10/accordion/customization/expansion-styles/{index.md => index.mdx} (100%) rename static/usage/v10/accordion/customization/icons/{index.md => index.mdx} (100%) rename static/usage/v10/accordion/customization/theming/{index.md => index.mdx} (100%) rename static/usage/v10/accordion/disable/group/{index.md => index.mdx} (100%) rename static/usage/v10/accordion/disable/individual/{index.md => index.mdx} (100%) rename static/usage/v10/accordion/listen-changes/{index.md => index.mdx} (100%) rename static/usage/v10/accordion/multiple/{index.md => index.mdx} (100%) rename static/usage/v10/accordion/readonly/group/{index.md => index.mdx} (100%) rename static/usage/v10/accordion/readonly/individual/{index.md => index.mdx} (100%) rename static/usage/v10/accordion/toggle/{index.md => index.mdx} (100%) rename static/usage/v10/action-sheet/controller/{index.md => index.mdx} (100%) rename static/usage/v10/action-sheet/inline/isOpen/{index.md => index.mdx} (100%) rename static/usage/v10/action-sheet/inline/trigger/{index.md => index.mdx} (100%) rename static/usage/v10/action-sheet/role-info-on-dismiss/{index.md => index.mdx} (100%) rename static/usage/v10/action-sheet/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/action-sheet/theming/styling/{index.md => index.mdx} (100%) rename static/usage/v10/alert/buttons/{index.md => index.mdx} (100%) rename static/usage/v10/alert/customization/{index.md => index.mdx} (100%) rename static/usage/v10/alert/inputs/radios/{index.md => index.mdx} (100%) rename static/usage/v10/alert/inputs/text-inputs/{index.md => index.mdx} (100%) rename static/usage/v10/alert/presenting/controller/{index.md => index.mdx} (100%) rename static/usage/v10/alert/presenting/isOpen/{index.md => index.mdx} (100%) rename static/usage/v10/alert/presenting/trigger/{index.md => index.mdx} (100%) rename static/usage/v10/animations/basic/{index.md => index.mdx} (100%) rename static/usage/v10/animations/before-and-after-hooks/{index.md => index.mdx} (100%) rename static/usage/v10/animations/chain/{index.md => index.mdx} (100%) rename static/usage/v10/animations/gesture/{index.md => index.mdx} (100%) rename static/usage/v10/animations/group/{index.md => index.mdx} (100%) rename static/usage/v10/animations/keyframes/{index.md => index.mdx} (100%) rename static/usage/v10/animations/modal-override/{index.md => index.mdx} (100%) rename static/usage/v10/animations/preference-based/{index.md => index.mdx} (100%) rename static/usage/v10/app/set-focus/{index.md => index.mdx} (100%) rename static/usage/v10/avatar/basic/{index.md => index.mdx} (100%) rename static/usage/v10/avatar/chip/{index.md => index.mdx} (100%) rename static/usage/v10/avatar/item/{index.md => index.mdx} (100%) rename static/usage/v10/avatar/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/back-button/basic/{index.md => index.mdx} (100%) rename static/usage/v10/back-button/custom/{index.md => index.mdx} (100%) rename static/usage/v10/backdrop/basic/{index.md => index.mdx} (100%) rename static/usage/v10/backdrop/styling/{index.md => index.mdx} (100%) rename static/usage/v10/badge/basic/{index.md => index.mdx} (100%) rename static/usage/v10/badge/inside-tab-bar/{index.md => index.mdx} (100%) rename static/usage/v10/badge/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/badge/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/breadcrumbs/basic/{index.md => index.mdx} (100%) rename static/usage/v10/breadcrumbs/collapsing-items/expand-on-click/{index.md => index.mdx} (100%) rename static/usage/v10/breadcrumbs/collapsing-items/items-before-after/{index.md => index.mdx} (100%) rename static/usage/v10/breadcrumbs/collapsing-items/max-items/{index.md => index.mdx} (100%) rename static/usage/v10/breadcrumbs/collapsing-items/popover-on-click/{index.md => index.mdx} (100%) rename static/usage/v10/breadcrumbs/icons/custom-separators/{index.md => index.mdx} (100%) rename static/usage/v10/breadcrumbs/icons/icons-on-items/{index.md => index.mdx} (100%) rename static/usage/v10/breadcrumbs/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/breadcrumbs/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/button/basic/{index.md => index.mdx} (100%) rename static/usage/v10/button/expand/{index.md => index.mdx} (100%) rename static/usage/v10/button/fill/{index.md => index.mdx} (100%) rename static/usage/v10/button/icons/{index.md => index.mdx} (100%) rename static/usage/v10/button/shape/{index.md => index.mdx} (100%) rename static/usage/v10/button/size/{index.md => index.mdx} (100%) rename static/usage/v10/button/text-wrapping/{index.md => index.mdx} (100%) rename static/usage/v10/button/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/button/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/buttons/basic/{index.md => index.mdx} (100%) rename static/usage/v10/buttons/placement/{index.md => index.mdx} (100%) rename static/usage/v10/buttons/types/{index.md => index.mdx} (100%) rename static/usage/v10/card/basic/{index.md => index.mdx} (100%) rename static/usage/v10/card/buttons/{index.md => index.mdx} (100%) rename static/usage/v10/card/list/{index.md => index.mdx} (100%) rename static/usage/v10/card/media/{index.md => index.mdx} (100%) rename static/usage/v10/card/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/card/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/checkbox/alignment/{index.md => index.mdx} (100%) rename static/usage/v10/checkbox/basic/{index.md => index.mdx} (100%) rename static/usage/v10/checkbox/helper-error/{index.md => index.mdx} (100%) rename static/usage/v10/checkbox/indeterminate/{index.md => index.mdx} (100%) rename static/usage/v10/checkbox/justify/{index.md => index.mdx} (100%) rename static/usage/v10/checkbox/label-link/{index.md => index.mdx} (100%) rename static/usage/v10/checkbox/label-placement/{index.md => index.mdx} (100%) rename static/usage/v10/checkbox/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/chip/basic/{index.md => index.mdx} (100%) rename static/usage/v10/chip/slots/{index.md => index.mdx} (100%) rename static/usage/v10/chip/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/chip/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/config/mode/{index.md => index.mdx} (100%) rename static/usage/v10/content/basic/{index.md => index.mdx} (100%) rename static/usage/v10/content/fixed/{index.md => index.mdx} (100%) rename static/usage/v10/content/fullscreen/{index.md => index.mdx} (100%) rename static/usage/v10/content/header-footer/{index.md => index.mdx} (100%) rename static/usage/v10/content/scroll-events/{index.md => index.mdx} (100%) rename static/usage/v10/content/scroll-methods/{index.md => index.mdx} (100%) rename static/usage/v10/content/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/content/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/content/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v10/content/theming/safe-area/{index.md => index.mdx} (100%) rename static/usage/v10/datetime-button/basic/{index.md => index.mdx} (100%) rename static/usage/v10/datetime-button/format-options/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/basic/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/buttons/customizing-button-texts/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/buttons/customizing-buttons/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/buttons/showing-confirmation-buttons/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/date-constraints/advanced/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/date-constraints/max-min/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/date-constraints/values/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/format-options/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/highlightedDates/array/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/highlightedDates/callback/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/localization/custom-locale/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/localization/first-day-of-week/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/localization/hour-cycle/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/localization/locale-extension-tags/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/localization/time-label/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/multiple/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/presentation/date/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/presentation/month-and-year/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/presentation/time/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/presentation/wheel/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/show-adjacent-days/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/styling/calendar-days/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/styling/calendar-header/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/styling/datetime-header/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/styling/global-theming/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/styling/wheel-styling/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/title/customizing-title/{index.md => index.mdx} (100%) rename static/usage/v10/datetime/title/showing-default-title/{index.md => index.mdx} (100%) rename static/usage/v10/fab/basic/{index.md => index.mdx} (100%) rename static/usage/v10/fab/before-content/{index.md => index.mdx} (100%) rename static/usage/v10/fab/button-sizing/{index.md => index.mdx} (100%) rename static/usage/v10/fab/list-side/{index.md => index.mdx} (100%) rename static/usage/v10/fab/positioning/{index.md => index.mdx} (100%) rename static/usage/v10/fab/safe-area/{index.md => index.mdx} (100%) rename static/usage/v10/fab/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/fab/theming/css-custom-properties/{index.md => index.mdx} (100%) rename static/usage/v10/fab/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v10/footer/basic/{index.md => index.mdx} (100%) rename static/usage/v10/footer/custom-scroll-target/{index.md => index.mdx} (100%) rename static/usage/v10/footer/fade/{index.md => index.mdx} (100%) rename static/usage/v10/footer/no-border/{index.md => index.mdx} (100%) rename static/usage/v10/footer/translucent/{index.md => index.mdx} (100%) rename static/usage/v10/gallery/basic/{index.md => index.mdx} (100%) rename static/usage/v10/gallery/columns/{index.md => index.mdx} (100%) rename static/usage/v10/gallery/gap/{index.md => index.mdx} (100%) rename static/usage/v10/gallery/images/{index.md => index.mdx} (100%) rename static/usage/v10/gallery/masonry-best-fit/{index.md => index.mdx} (100%) rename static/usage/v10/gallery/masonry-sequential/{index.md => index.mdx} (100%) rename static/usage/v10/gallery/uniform/{index.md => index.mdx} (100%) rename static/usage/v10/gestures/basic/{index.md => index.mdx} (100%) rename static/usage/v10/gestures/double-click/{index.md => index.mdx} (100%) rename static/usage/v10/grid/basic/{index.md => index.mdx} (100%) rename static/usage/v10/grid/customizing/column-number/{index.md => index.mdx} (100%) rename static/usage/v10/grid/customizing/padding/{index.md => index.mdx} (100%) rename static/usage/v10/grid/customizing/width/{index.md => index.mdx} (100%) rename static/usage/v10/grid/fixed/{index.md => index.mdx} (100%) rename static/usage/v10/grid/horizontal-alignment/{index.md => index.mdx} (100%) rename static/usage/v10/grid/offset-responsive/{index.md => index.mdx} (100%) rename static/usage/v10/grid/offset/{index.md => index.mdx} (100%) rename static/usage/v10/grid/push-pull-responsive/{index.md => index.mdx} (100%) rename static/usage/v10/grid/push-pull/{index.md => index.mdx} (100%) rename static/usage/v10/grid/size-auto/{index.md => index.mdx} (100%) rename static/usage/v10/grid/size-responsive/{index.md => index.mdx} (100%) rename static/usage/v10/grid/size/{index.md => index.mdx} (100%) rename static/usage/v10/grid/vertical-alignment/{index.md => index.mdx} (100%) rename static/usage/v10/header/basic/{index.md => index.mdx} (100%) rename static/usage/v10/header/condense/{index.md => index.mdx} (100%) rename static/usage/v10/header/custom-scroll-target/{index.md => index.mdx} (100%) rename static/usage/v10/header/fade/{index.md => index.mdx} (100%) rename static/usage/v10/header/no-border/{index.md => index.mdx} (100%) rename static/usage/v10/header/translucent/{index.md => index.mdx} (100%) rename static/usage/v10/icon/basic/{index.md => index.mdx} (100%) rename static/usage/v10/icon/custom-svgs/{index.md => index.mdx} (100%) rename static/usage/v10/icon/font-icons/{index.md => index.mdx} (100%) rename static/usage/v10/img/basic/{index.md => index.mdx} (100%) rename static/usage/v10/infinite-scroll/basic/{index.md => index.mdx} (100%) rename static/usage/v10/infinite-scroll/custom-infinite-scroll-content/{index.md => index.mdx} (100%) rename static/usage/v10/infinite-scroll/infinite-scroll-content/{index.md => index.mdx} (100%) rename static/usage/v10/input-otp/basic/{index.md => index.mdx} (100%) rename static/usage/v10/input-otp/fill/{index.md => index.mdx} (100%) rename static/usage/v10/input-otp/pattern/{index.md => index.mdx} (100%) rename static/usage/v10/input-otp/separators/{index.md => index.mdx} (100%) rename static/usage/v10/input-otp/shape/{index.md => index.mdx} (100%) rename static/usage/v10/input-otp/size/{index.md => index.mdx} (100%) rename static/usage/v10/input-otp/states/{index.md => index.mdx} (100%) rename static/usage/v10/input-otp/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/input-otp/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/input-otp/type/{index.md => index.mdx} (100%) rename static/usage/v10/input-password-toggle/basic/{index.md => index.mdx} (100%) rename static/usage/v10/input/basic/{index.md => index.mdx} (100%) rename static/usage/v10/input/clear/{index.md => index.mdx} (100%) rename static/usage/v10/input/counter-alignment/{index.md => index.mdx} (100%) rename static/usage/v10/input/counter/{index.md => index.mdx} (100%) rename static/usage/v10/input/fill/{index.md => index.mdx} (100%) rename static/usage/v10/input/filtering/{index.md => index.mdx} (100%) rename static/usage/v10/input/helper-error/{index.md => index.mdx} (100%) rename static/usage/v10/input/label-placement/{index.md => index.mdx} (100%) rename static/usage/v10/input/label-slot/{index.md => index.mdx} (100%) rename static/usage/v10/input/mask/{index.md => index.mdx} (100%) rename static/usage/v10/input/no-visible-label/{index.md => index.mdx} (100%) rename static/usage/v10/input/set-focus/{index.md => index.mdx} (100%) rename static/usage/v10/input/start-end-slots/{index.md => index.mdx} (100%) rename static/usage/v10/input/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/input/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/input/types/{index.md => index.mdx} (100%) rename static/usage/v10/item-divider/basic/{index.md => index.mdx} (100%) rename static/usage/v10/item-divider/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/item-divider/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/item-group/basic/{index.md => index.mdx} (100%) rename static/usage/v10/item-group/sliding-items/{index.md => index.mdx} (100%) rename static/usage/v10/item-sliding/basic/{index.md => index.mdx} (100%) rename static/usage/v10/item-sliding/expandable/{index.md => index.mdx} (100%) rename static/usage/v10/item-sliding/icons/{index.md => index.mdx} (100%) rename static/usage/v10/item/basic/{index.md => index.mdx} (100%) rename static/usage/v10/item/buttons/{index.md => index.mdx} (100%) rename static/usage/v10/item/clickable/{index.md => index.mdx} (100%) rename static/usage/v10/item/content-types/actions/{index.md => index.mdx} (100%) rename static/usage/v10/item/content-types/controls/{index.md => index.mdx} (100%) rename static/usage/v10/item/content-types/metadata/{index.md => index.mdx} (100%) rename static/usage/v10/item/content-types/supporting-visuals/{index.md => index.mdx} (100%) rename static/usage/v10/item/content-types/text/{index.md => index.mdx} (100%) rename static/usage/v10/item/detail-arrows/{index.md => index.mdx} (100%) rename static/usage/v10/item/inputs/{index.md => index.mdx} (100%) rename static/usage/v10/item/lines/{index.md => index.mdx} (100%) rename static/usage/v10/item/media/{index.md => index.mdx} (100%) rename static/usage/v10/item/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/item/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/item/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v10/item/theming/input-highlight/{index.md => index.mdx} (100%) rename static/usage/v10/keyboard/enterkeyhint/{index.md => index.mdx} (100%) rename static/usage/v10/keyboard/inputmode/{index.md => index.mdx} (100%) rename static/usage/v10/label/basic/{index.md => index.mdx} (100%) rename static/usage/v10/label/input/{index.md => index.mdx} (100%) rename static/usage/v10/label/item/{index.md => index.mdx} (100%) rename static/usage/v10/label/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/layout/dynamic-font-scaling/{index.md => index.mdx} (100%) rename static/usage/v10/list-header/basic/{index.md => index.mdx} (100%) rename static/usage/v10/list-header/buttons/{index.md => index.mdx} (100%) rename static/usage/v10/list-header/lines/{index.md => index.mdx} (100%) rename static/usage/v10/list-header/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/list-header/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/list/basic/{index.md => index.mdx} (100%) rename static/usage/v10/list/inset/{index.md => index.mdx} (100%) rename static/usage/v10/list/lines/{index.md => index.mdx} (100%) rename static/usage/v10/loading/controller/{index.md => index.mdx} (100%) rename static/usage/v10/loading/inline/{index.md => index.mdx} (100%) rename static/usage/v10/loading/spinners/{index.md => index.mdx} (100%) rename static/usage/v10/loading/theming/{index.md => index.mdx} (100%) rename static/usage/v10/menu/basic/{index.md => index.mdx} (100%) rename static/usage/v10/menu/multiple/{index.md => index.mdx} (100%) rename static/usage/v10/menu/sides/{index.md => index.mdx} (100%) rename static/usage/v10/menu/theming/{index.md => index.mdx} (100%) rename static/usage/v10/menu/toggle/{index.md => index.mdx} (100%) rename static/usage/v10/menu/type/{index.md => index.mdx} (100%) rename static/usage/v10/modal/can-dismiss/boolean/{index.md => index.mdx} (100%) rename static/usage/v10/modal/can-dismiss/child-state/{index.md => index.mdx} (100%) rename static/usage/v10/modal/can-dismiss/function/{index.md => index.mdx} (100%) rename static/usage/v10/modal/can-dismiss/prevent-swipe-to-close/{index.md => index.mdx} (100%) rename static/usage/v10/modal/card/basic/{index.md => index.mdx} (100%) rename static/usage/v10/modal/controller/{index.md => index.mdx} (100%) rename static/usage/v10/modal/custom-dialogs/{index.md => index.mdx} (100%) rename static/usage/v10/modal/drag-move-event/{index.md => index.mdx} (100%) rename static/usage/v10/modal/drag-start-end-events/{index.md => index.mdx} (100%) rename static/usage/v10/modal/inline/basic/{index.md => index.mdx} (100%) rename static/usage/v10/modal/inline/is-open/{index.md => index.mdx} (100%) rename static/usage/v10/modal/performance/mount/{index.md => index.mdx} (100%) rename static/usage/v10/modal/sheet/auto-height/{index.md => index.mdx} (100%) rename static/usage/v10/modal/sheet/background-content/{index.md => index.mdx} (100%) rename static/usage/v10/modal/sheet/basic/{index.md => index.mdx} (100%) rename static/usage/v10/modal/sheet/expand-to-scroll/{index.md => index.mdx} (100%) rename static/usage/v10/modal/sheet/handle-behavior/{index.md => index.mdx} (100%) rename static/usage/v10/modal/styling/animations/{index.md => index.mdx} (100%) rename static/usage/v10/modal/styling/theming/{index.md => index.mdx} (100%) rename static/usage/v10/nav/modal-navigation/{index.md => index.mdx} (100%) rename static/usage/v10/nav/nav-link/{index.md => index.mdx} (100%) rename static/usage/v10/navigation/{index.md => index.mdx} (100%) rename static/usage/v10/note/basic/{index.md => index.mdx} (100%) rename static/usage/v10/note/item/{index.md => index.mdx} (100%) rename static/usage/v10/note/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/note/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/picker/basic/{index.md => index.mdx} (100%) rename static/usage/v10/picker/modal/{index.md => index.mdx} (100%) rename static/usage/v10/picker/prefix-suffix/{index.md => index.mdx} (100%) rename static/usage/v10/picker/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/popover/customization/positioning/{index.md => index.mdx} (100%) rename static/usage/v10/popover/customization/sizing/{index.md => index.mdx} (100%) rename static/usage/v10/popover/customization/styling/{index.md => index.mdx} (100%) rename static/usage/v10/popover/nested/{index.md => index.mdx} (100%) rename static/usage/v10/popover/performance/mount/{index.md => index.mdx} (100%) rename static/usage/v10/popover/presenting/controller/{index.md => index.mdx} (100%) rename static/usage/v10/popover/presenting/inline-isopen/{index.md => index.mdx} (100%) rename static/usage/v10/popover/presenting/inline-trigger/{index.md => index.mdx} (100%) rename static/usage/v10/progress-bar/buffer/{index.md => index.mdx} (100%) rename static/usage/v10/progress-bar/determinate/{index.md => index.mdx} (100%) rename static/usage/v10/progress-bar/indeterminate/{index.md => index.mdx} (100%) rename static/usage/v10/progress-bar/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/progress-bar/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/progress-bar/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v10/radio/alignment/{index.md => index.mdx} (100%) rename static/usage/v10/radio/basic/{index.md => index.mdx} (100%) rename static/usage/v10/radio/empty-selection/{index.md => index.mdx} (100%) rename static/usage/v10/radio/helper-error/{index.md => index.mdx} (100%) rename static/usage/v10/radio/justify/{index.md => index.mdx} (100%) rename static/usage/v10/radio/label-placement/{index.md => index.mdx} (100%) rename static/usage/v10/radio/label-wrap/{index.md => index.mdx} (100%) rename static/usage/v10/radio/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/radio/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/radio/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v10/radio/using-comparewith/{index.md => index.mdx} (100%) rename static/usage/v10/range/basic/{index.md => index.mdx} (100%) rename static/usage/v10/range/dual-knobs/{index.md => index.mdx} (100%) rename static/usage/v10/range/ion-change-event/{index.md => index.mdx} (100%) rename static/usage/v10/range/ion-knob-move-event/{index.md => index.mdx} (100%) rename static/usage/v10/range/label-slot/{index.md => index.mdx} (100%) rename static/usage/v10/range/labels/{index.md => index.mdx} (100%) rename static/usage/v10/range/no-visible-label/{index.md => index.mdx} (100%) rename static/usage/v10/range/pins/{index.md => index.mdx} (100%) rename static/usage/v10/range/slots/{index.md => index.mdx} (100%) rename static/usage/v10/range/snapping-ticks/{index.md => index.mdx} (100%) rename static/usage/v10/range/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/range/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v10/refresher/advanced/{index.md => index.mdx} (100%) rename static/usage/v10/refresher/basic/{index.md => index.mdx} (100%) rename static/usage/v10/refresher/custom-content/{index.md => index.mdx} (100%) rename static/usage/v10/refresher/custom-scroll-target/{index.md => index.mdx} (100%) rename static/usage/v10/refresher/pull-properties/{index.md => index.mdx} (100%) rename static/usage/v10/refresher/pull-start-end-events/{index.md => index.mdx} (100%) rename static/usage/v10/reorder/basic/{index.md => index.mdx} (100%) rename static/usage/v10/reorder/custom-icon/{index.md => index.mdx} (100%) rename static/usage/v10/reorder/custom-scroll-target/{index.md => index.mdx} (100%) rename static/usage/v10/reorder/reorder-move-event/{index.md => index.mdx} (100%) rename static/usage/v10/reorder/reorder-start-end-events/{index.md => index.mdx} (100%) rename static/usage/v10/reorder/toggling-disabled/{index.md => index.mdx} (100%) rename static/usage/v10/reorder/updating-data/{index.md => index.mdx} (100%) rename static/usage/v10/reorder/wrapper/{index.md => index.mdx} (100%) rename static/usage/v10/ripple-effect/basic/{index.md => index.mdx} (100%) rename static/usage/v10/ripple-effect/customizing/{index.md => index.mdx} (100%) rename static/usage/v10/ripple-effect/type/{index.md => index.mdx} (100%) rename static/usage/v10/router/basic/{index.md => index.mdx} (100%) rename static/usage/v10/router/nav-within-page/{index.md => index.mdx} (100%) rename static/usage/v10/searchbar/basic/{index.md => index.mdx} (100%) rename static/usage/v10/searchbar/cancel-button/{index.md => index.mdx} (100%) rename static/usage/v10/searchbar/clear-button/{index.md => index.mdx} (100%) rename static/usage/v10/searchbar/debounce/{index.md => index.mdx} (100%) rename static/usage/v10/searchbar/search-icon/{index.md => index.mdx} (100%) rename static/usage/v10/searchbar/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/searchbar/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/segment-button/basic/{index.md => index.mdx} (100%) rename static/usage/v10/segment-button/layout/{index.md => index.mdx} (100%) rename static/usage/v10/segment-button/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/segment-button/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v10/segment/basic/{index.md => index.mdx} (100%) rename static/usage/v10/segment/scrollable/{index.md => index.mdx} (100%) rename static/usage/v10/segment/swipeable/{index.md => index.mdx} (100%) rename static/usage/v10/segment/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/segment/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/select/basic/multiple-selection/{index.md => index.mdx} (100%) rename static/usage/v10/select/basic/responding-to-interaction/{index.md => index.mdx} (100%) rename static/usage/v10/select/basic/single-selection/{index.md => index.mdx} (100%) rename static/usage/v10/select/customization/button-text/{index.md => index.mdx} (100%) rename static/usage/v10/select/customization/custom-toggle-icons/{index.md => index.mdx} (100%) rename static/usage/v10/select/customization/icon-flip-behavior/{index.md => index.mdx} (100%) rename static/usage/v10/select/customization/interface-options/{index.md => index.mdx} (100%) rename static/usage/v10/select/customization/styling-select/{index.md => index.mdx} (100%) rename static/usage/v10/select/fill/{index.md => index.mdx} (100%) rename static/usage/v10/select/helper-error/{index.md => index.mdx} (100%) rename static/usage/v10/select/interfaces/action-sheet/{index.md => index.mdx} (100%) rename static/usage/v10/select/interfaces/modal/{index.md => index.mdx} (100%) rename static/usage/v10/select/interfaces/popover/{index.md => index.mdx} (100%) rename static/usage/v10/select/justify/{index.md => index.mdx} (100%) rename static/usage/v10/select/label-placement/{index.md => index.mdx} (100%) rename static/usage/v10/select/label-slot/{index.md => index.mdx} (100%) rename static/usage/v10/select/no-visible-label/{index.md => index.mdx} (100%) rename static/usage/v10/select/objects-as-values/multiple-selection/{index.md => index.mdx} (100%) rename static/usage/v10/select/objects-as-values/using-comparewith/{index.md => index.mdx} (100%) rename static/usage/v10/select/rich-content-options/{index.md => index.mdx} (100%) rename static/usage/v10/select/start-end-slots/{index.md => index.mdx} (100%) rename static/usage/v10/select/typeahead/{index.md => index.mdx} (100%) rename static/usage/v10/skeleton-text/basic/{index.md => index.mdx} (100%) rename static/usage/v10/skeleton-text/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/spinner/basic/{index.md => index.mdx} (100%) rename static/usage/v10/spinner/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/spinner/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/spinner/theming/resizing/{index.md => index.mdx} (100%) rename static/usage/v10/split-pane/basic/{index.md => index.mdx} (100%) rename static/usage/v10/split-pane/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/tabs/basic/{index.md => index.mdx} (100%) rename static/usage/v10/tabs/router/{index.md => index.mdx} (100%) rename static/usage/v10/tabs/select-method/{index.md => index.mdx} (100%) rename static/usage/v10/text/basic/{index.md => index.mdx} (100%) rename static/usage/v10/textarea/autogrow/{index.md => index.mdx} (100%) rename static/usage/v10/textarea/basic/{index.md => index.mdx} (100%) rename static/usage/v10/textarea/clear-on-edit/{index.md => index.mdx} (100%) rename static/usage/v10/textarea/counter/{index.md => index.mdx} (100%) rename static/usage/v10/textarea/fill/{index.md => index.mdx} (100%) rename static/usage/v10/textarea/helper-error/{index.md => index.mdx} (100%) rename static/usage/v10/textarea/label-placement/{index.md => index.mdx} (100%) rename static/usage/v10/textarea/label-slot/{index.md => index.mdx} (100%) rename static/usage/v10/textarea/no-visible-label/{index.md => index.mdx} (100%) rename static/usage/v10/textarea/start-end-slots/{index.md => index.mdx} (100%) rename static/usage/v10/textarea/theming/{index.md => index.mdx} (100%) rename static/usage/v10/theming/always-dark-mode/{index.md => index.mdx} (100%) rename static/usage/v10/theming/always-high-contrast-mode/{index.md => index.mdx} (100%) rename static/usage/v10/theming/class-dark-mode/{index.md => index.mdx} (100%) rename static/usage/v10/theming/class-high-contrast-mode/{index.md => index.mdx} (100%) rename static/usage/v10/theming/system-dark-mode/{index.md => index.mdx} (100%) rename static/usage/v10/theming/system-high-contrast-mode/{index.md => index.mdx} (100%) rename static/usage/v10/thumbnail/basic/{index.md => index.mdx} (100%) rename static/usage/v10/thumbnail/item/{index.md => index.mdx} (100%) rename static/usage/v10/thumbnail/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/title/basic/{index.md => index.mdx} (100%) rename static/usage/v10/title/collapsible-large-title/basic/{index.md => index.mdx} (100%) rename static/usage/v10/title/collapsible-large-title/buttons/{index.md => index.mdx} (100%) rename static/usage/v10/title/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/toast/buttons/{index.md => index.mdx} (100%) rename static/usage/v10/toast/icon/{index.md => index.mdx} (100%) rename static/usage/v10/toast/inline/basic/{index.md => index.mdx} (100%) rename static/usage/v10/toast/inline/is-open/{index.md => index.mdx} (100%) rename static/usage/v10/toast/layout/{index.md => index.mdx} (100%) rename static/usage/v10/toast/position-anchor/{index.md => index.mdx} (100%) rename static/usage/v10/toast/presenting/controller/{index.md => index.mdx} (100%) rename static/usage/v10/toast/swipe-gesture/{index.md => index.mdx} (100%) rename static/usage/v10/toast/theming/{index.md => index.mdx} (100%) rename static/usage/v10/toggle/alignment/{index.md => index.mdx} (100%) rename static/usage/v10/toggle/basic/{index.md => index.mdx} (100%) rename static/usage/v10/toggle/helper-error/{index.md => index.mdx} (100%) rename static/usage/v10/toggle/justify/{index.md => index.mdx} (100%) rename static/usage/v10/toggle/label-placement/{index.md => index.mdx} (100%) rename static/usage/v10/toggle/list/{index.md => index.mdx} (100%) rename static/usage/v10/toggle/on-off/{index.md => index.mdx} (100%) rename static/usage/v10/toggle/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/toggle/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v10/toggle/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v10/toolbar/basic/{index.md => index.mdx} (100%) rename static/usage/v10/toolbar/buttons/{index.md => index.mdx} (100%) rename static/usage/v10/toolbar/progress-bars/{index.md => index.mdx} (100%) rename static/usage/v10/toolbar/searchbars/{index.md => index.mdx} (100%) rename static/usage/v10/toolbar/segments/{index.md => index.mdx} (100%) rename static/usage/v10/toolbar/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v10/toolbar/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/accordion/accessibility/animations/{index.md => index.mdx} (100%) rename static/usage/v8/accordion/basic/{index.md => index.mdx} (100%) rename static/usage/v8/accordion/customization/advanced-expansion-styles/{index.md => index.mdx} (100%) rename static/usage/v8/accordion/customization/expansion-styles/{index.md => index.mdx} (100%) rename static/usage/v8/accordion/customization/icons/{index.md => index.mdx} (100%) rename static/usage/v8/accordion/customization/theming/{index.md => index.mdx} (100%) rename static/usage/v8/accordion/disable/group/{index.md => index.mdx} (100%) rename static/usage/v8/accordion/disable/individual/{index.md => index.mdx} (100%) rename static/usage/v8/accordion/listen-changes/{index.md => index.mdx} (100%) rename static/usage/v8/accordion/multiple/{index.md => index.mdx} (100%) rename static/usage/v8/accordion/readonly/group/{index.md => index.mdx} (100%) rename static/usage/v8/accordion/readonly/individual/{index.md => index.mdx} (100%) rename static/usage/v8/accordion/toggle/{index.md => index.mdx} (100%) rename static/usage/v8/action-sheet/controller/{index.md => index.mdx} (100%) rename static/usage/v8/action-sheet/inline/isOpen/{index.md => index.mdx} (100%) rename static/usage/v8/action-sheet/inline/trigger/{index.md => index.mdx} (100%) rename static/usage/v8/action-sheet/role-info-on-dismiss/{index.md => index.mdx} (100%) rename static/usage/v8/action-sheet/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/action-sheet/theming/styling/{index.md => index.mdx} (100%) rename static/usage/v8/alert/buttons/{index.md => index.mdx} (100%) rename static/usage/v8/alert/customization/{index.md => index.mdx} (100%) rename static/usage/v8/alert/inputs/radios/{index.md => index.mdx} (100%) rename static/usage/v8/alert/inputs/text-inputs/{index.md => index.mdx} (100%) rename static/usage/v8/alert/presenting/controller/{index.md => index.mdx} (100%) rename static/usage/v8/alert/presenting/isOpen/{index.md => index.mdx} (100%) rename static/usage/v8/alert/presenting/trigger/{index.md => index.mdx} (100%) rename static/usage/v8/animations/basic/{index.md => index.mdx} (100%) rename static/usage/v8/animations/before-and-after-hooks/{index.md => index.mdx} (100%) rename static/usage/v8/animations/chain/{index.md => index.mdx} (100%) rename static/usage/v8/animations/gesture/{index.md => index.mdx} (100%) rename static/usage/v8/animations/group/{index.md => index.mdx} (100%) rename static/usage/v8/animations/keyframes/{index.md => index.mdx} (100%) rename static/usage/v8/animations/modal-override/{index.md => index.mdx} (100%) rename static/usage/v8/animations/preference-based/{index.md => index.mdx} (100%) rename static/usage/v8/app/set-focus/{index.md => index.mdx} (100%) rename static/usage/v8/avatar/basic/{index.md => index.mdx} (100%) rename static/usage/v8/avatar/chip/{index.md => index.mdx} (100%) rename static/usage/v8/avatar/item/{index.md => index.mdx} (100%) rename static/usage/v8/avatar/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/back-button/basic/{index.md => index.mdx} (100%) rename static/usage/v8/back-button/custom/{index.md => index.mdx} (100%) rename static/usage/v8/backdrop/basic/{index.md => index.mdx} (100%) rename static/usage/v8/backdrop/styling/{index.md => index.mdx} (100%) rename static/usage/v8/badge/basic/{index.md => index.mdx} (100%) rename static/usage/v8/badge/inside-tab-bar/{index.md => index.mdx} (100%) rename static/usage/v8/badge/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/badge/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/breadcrumbs/basic/{index.md => index.mdx} (100%) rename static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/{index.md => index.mdx} (100%) rename static/usage/v8/breadcrumbs/collapsing-items/items-before-after/{index.md => index.mdx} (100%) rename static/usage/v8/breadcrumbs/collapsing-items/max-items/{index.md => index.mdx} (100%) rename static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/{index.md => index.mdx} (100%) rename static/usage/v8/breadcrumbs/icons/custom-separators/{index.md => index.mdx} (100%) rename static/usage/v8/breadcrumbs/icons/icons-on-items/{index.md => index.mdx} (100%) rename static/usage/v8/breadcrumbs/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/breadcrumbs/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/button/basic/{index.md => index.mdx} (100%) rename static/usage/v8/button/expand/{index.md => index.mdx} (100%) rename static/usage/v8/button/fill/{index.md => index.mdx} (100%) rename static/usage/v8/button/icons/{index.md => index.mdx} (100%) rename static/usage/v8/button/shape/{index.md => index.mdx} (100%) rename static/usage/v8/button/size/{index.md => index.mdx} (100%) rename static/usage/v8/button/text-wrapping/{index.md => index.mdx} (100%) rename static/usage/v8/button/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/button/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/buttons/basic/{index.md => index.mdx} (100%) rename static/usage/v8/buttons/placement/{index.md => index.mdx} (100%) rename static/usage/v8/buttons/types/{index.md => index.mdx} (100%) rename static/usage/v8/card/basic/{index.md => index.mdx} (100%) rename static/usage/v8/card/buttons/{index.md => index.mdx} (100%) rename static/usage/v8/card/list/{index.md => index.mdx} (100%) rename static/usage/v8/card/media/{index.md => index.mdx} (100%) rename static/usage/v8/card/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/card/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/checkbox/alignment/{index.md => index.mdx} (100%) rename static/usage/v8/checkbox/basic/{index.md => index.mdx} (100%) rename static/usage/v8/checkbox/helper-error/{index.md => index.mdx} (100%) rename static/usage/v8/checkbox/indeterminate/{index.md => index.mdx} (100%) rename static/usage/v8/checkbox/justify/{index.md => index.mdx} (100%) rename static/usage/v8/checkbox/label-link/{index.md => index.mdx} (100%) rename static/usage/v8/checkbox/label-placement/{index.md => index.mdx} (100%) rename static/usage/v8/checkbox/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/chip/basic/{index.md => index.mdx} (100%) rename static/usage/v8/chip/slots/{index.md => index.mdx} (100%) rename static/usage/v8/chip/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/chip/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/config/mode/{index.md => index.mdx} (100%) rename static/usage/v8/content/basic/{index.md => index.mdx} (100%) rename static/usage/v8/content/fixed/{index.md => index.mdx} (100%) rename static/usage/v8/content/fullscreen/{index.md => index.mdx} (100%) rename static/usage/v8/content/header-footer/{index.md => index.mdx} (100%) rename static/usage/v8/content/scroll-events/{index.md => index.mdx} (100%) rename static/usage/v8/content/scroll-methods/{index.md => index.mdx} (100%) rename static/usage/v8/content/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/content/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/content/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v8/content/theming/safe-area/{index.md => index.mdx} (100%) rename static/usage/v8/datetime-button/basic/{index.md => index.mdx} (100%) rename static/usage/v8/datetime-button/format-options/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/basic/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/buttons/customizing-button-texts/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/buttons/customizing-buttons/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/buttons/showing-confirmation-buttons/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/date-constraints/advanced/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/date-constraints/max-min/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/date-constraints/values/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/format-options/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/highlightedDates/array/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/highlightedDates/callback/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/localization/custom-locale/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/localization/first-day-of-week/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/localization/hour-cycle/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/localization/locale-extension-tags/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/localization/time-label/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/multiple/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/presentation/date/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/presentation/month-and-year/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/presentation/time/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/presentation/wheel/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/show-adjacent-days/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/styling/calendar-days/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/styling/calendar-header/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/styling/datetime-header/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/styling/global-theming/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/styling/wheel-styling/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/title/customizing-title/{index.md => index.mdx} (100%) rename static/usage/v8/datetime/title/showing-default-title/{index.md => index.mdx} (100%) rename static/usage/v8/fab/basic/{index.md => index.mdx} (100%) rename static/usage/v8/fab/before-content/{index.md => index.mdx} (100%) rename static/usage/v8/fab/button-sizing/{index.md => index.mdx} (100%) rename static/usage/v8/fab/list-side/{index.md => index.mdx} (100%) rename static/usage/v8/fab/positioning/{index.md => index.mdx} (100%) rename static/usage/v8/fab/safe-area/{index.md => index.mdx} (100%) rename static/usage/v8/fab/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/fab/theming/css-custom-properties/{index.md => index.mdx} (100%) rename static/usage/v8/fab/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v8/footer/basic/{index.md => index.mdx} (100%) rename static/usage/v8/footer/custom-scroll-target/{index.md => index.mdx} (100%) rename static/usage/v8/footer/fade/{index.md => index.mdx} (100%) rename static/usage/v8/footer/no-border/{index.md => index.mdx} (100%) rename static/usage/v8/footer/translucent/{index.md => index.mdx} (100%) rename static/usage/v8/gestures/basic/{index.md => index.mdx} (100%) rename static/usage/v8/gestures/double-click/{index.md => index.mdx} (100%) rename static/usage/v8/grid/basic/{index.md => index.mdx} (100%) rename static/usage/v8/grid/customizing/column-number/{index.md => index.mdx} (100%) rename static/usage/v8/grid/customizing/padding/{index.md => index.mdx} (100%) rename static/usage/v8/grid/customizing/width/{index.md => index.mdx} (100%) rename static/usage/v8/grid/fixed/{index.md => index.mdx} (100%) rename static/usage/v8/grid/horizontal-alignment/{index.md => index.mdx} (100%) rename static/usage/v8/grid/offset-responsive/{index.md => index.mdx} (100%) rename static/usage/v8/grid/offset/{index.md => index.mdx} (100%) rename static/usage/v8/grid/push-pull-responsive/{index.md => index.mdx} (100%) rename static/usage/v8/grid/push-pull/{index.md => index.mdx} (100%) rename static/usage/v8/grid/size-auto/{index.md => index.mdx} (100%) rename static/usage/v8/grid/size-responsive/{index.md => index.mdx} (100%) rename static/usage/v8/grid/size/{index.md => index.mdx} (100%) rename static/usage/v8/grid/vertical-alignment/{index.md => index.mdx} (100%) rename static/usage/v8/header/basic/{index.md => index.mdx} (100%) rename static/usage/v8/header/condense/{index.md => index.mdx} (100%) rename static/usage/v8/header/custom-scroll-target/{index.md => index.mdx} (100%) rename static/usage/v8/header/fade/{index.md => index.mdx} (100%) rename static/usage/v8/header/no-border/{index.md => index.mdx} (100%) rename static/usage/v8/header/translucent/{index.md => index.mdx} (100%) rename static/usage/v8/icon/basic/{index.md => index.mdx} (100%) rename static/usage/v8/img/basic/{index.md => index.mdx} (100%) rename static/usage/v8/infinite-scroll/basic/{index.md => index.mdx} (100%) rename static/usage/v8/infinite-scroll/custom-infinite-scroll-content/{index.md => index.mdx} (100%) rename static/usage/v8/infinite-scroll/infinite-scroll-content/{index.md => index.mdx} (100%) rename static/usage/v8/input-otp/basic/{index.md => index.mdx} (100%) rename static/usage/v8/input-otp/fill/{index.md => index.mdx} (100%) rename static/usage/v8/input-otp/pattern/{index.md => index.mdx} (100%) rename static/usage/v8/input-otp/separators/{index.md => index.mdx} (100%) rename static/usage/v8/input-otp/shape/{index.md => index.mdx} (100%) rename static/usage/v8/input-otp/size/{index.md => index.mdx} (100%) rename static/usage/v8/input-otp/states/{index.md => index.mdx} (100%) rename static/usage/v8/input-otp/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/input-otp/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/input-otp/type/{index.md => index.mdx} (100%) rename static/usage/v8/input-password-toggle/basic/{index.md => index.mdx} (100%) rename static/usage/v8/input/basic/{index.md => index.mdx} (100%) rename static/usage/v8/input/clear/{index.md => index.mdx} (100%) rename static/usage/v8/input/counter-alignment/{index.md => index.mdx} (100%) rename static/usage/v8/input/counter/{index.md => index.mdx} (100%) rename static/usage/v8/input/fill/{index.md => index.mdx} (100%) rename static/usage/v8/input/filtering/{index.md => index.mdx} (100%) rename static/usage/v8/input/helper-error/{index.md => index.mdx} (100%) rename static/usage/v8/input/label-placement/{index.md => index.mdx} (100%) rename static/usage/v8/input/label-slot/{index.md => index.mdx} (100%) rename static/usage/v8/input/mask/{index.md => index.mdx} (100%) rename static/usage/v8/input/no-visible-label/{index.md => index.mdx} (100%) rename static/usage/v8/input/set-focus/{index.md => index.mdx} (100%) rename static/usage/v8/input/start-end-slots/{index.md => index.mdx} (100%) rename static/usage/v8/input/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/input/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/input/types/{index.md => index.mdx} (100%) rename static/usage/v8/item-divider/basic/{index.md => index.mdx} (100%) rename static/usage/v8/item-divider/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/item-divider/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/item-group/basic/{index.md => index.mdx} (100%) rename static/usage/v8/item-group/sliding-items/{index.md => index.mdx} (100%) rename static/usage/v8/item-sliding/basic/{index.md => index.mdx} (100%) rename static/usage/v8/item-sliding/expandable/{index.md => index.mdx} (100%) rename static/usage/v8/item-sliding/icons/{index.md => index.mdx} (100%) rename static/usage/v8/item/basic/{index.md => index.mdx} (100%) rename static/usage/v8/item/buttons/{index.md => index.mdx} (100%) rename static/usage/v8/item/clickable/{index.md => index.mdx} (100%) rename static/usage/v8/item/content-types/actions/{index.md => index.mdx} (100%) rename static/usage/v8/item/content-types/controls/{index.md => index.mdx} (100%) rename static/usage/v8/item/content-types/metadata/{index.md => index.mdx} (100%) rename static/usage/v8/item/content-types/supporting-visuals/{index.md => index.mdx} (100%) rename static/usage/v8/item/content-types/text/{index.md => index.mdx} (100%) rename static/usage/v8/item/detail-arrows/{index.md => index.mdx} (100%) rename static/usage/v8/item/inputs/{index.md => index.mdx} (100%) rename static/usage/v8/item/lines/{index.md => index.mdx} (100%) rename static/usage/v8/item/media/{index.md => index.mdx} (100%) rename static/usage/v8/item/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/item/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/item/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v8/item/theming/input-highlight/{index.md => index.mdx} (100%) rename static/usage/v8/keyboard/enterkeyhint/{index.md => index.mdx} (100%) rename static/usage/v8/keyboard/inputmode/{index.md => index.mdx} (100%) rename static/usage/v8/label/basic/{index.md => index.mdx} (100%) rename static/usage/v8/label/input/{index.md => index.mdx} (100%) rename static/usage/v8/label/item/{index.md => index.mdx} (100%) rename static/usage/v8/label/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/layout/dynamic-font-scaling/{index.md => index.mdx} (100%) rename static/usage/v8/list-header/basic/{index.md => index.mdx} (100%) rename static/usage/v8/list-header/buttons/{index.md => index.mdx} (100%) rename static/usage/v8/list-header/lines/{index.md => index.mdx} (100%) rename static/usage/v8/list-header/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/list-header/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/list/basic/{index.md => index.mdx} (100%) rename static/usage/v8/list/inset/{index.md => index.mdx} (100%) rename static/usage/v8/list/lines/{index.md => index.mdx} (100%) rename static/usage/v8/loading/controller/{index.md => index.mdx} (100%) rename static/usage/v8/loading/inline/{index.md => index.mdx} (100%) rename static/usage/v8/loading/spinners/{index.md => index.mdx} (100%) rename static/usage/v8/loading/theming/{index.md => index.mdx} (100%) rename static/usage/v8/menu/basic/{index.md => index.mdx} (100%) rename static/usage/v8/menu/multiple/{index.md => index.mdx} (100%) rename static/usage/v8/menu/sides/{index.md => index.mdx} (100%) rename static/usage/v8/menu/theming/{index.md => index.mdx} (100%) rename static/usage/v8/menu/toggle/{index.md => index.mdx} (100%) rename static/usage/v8/menu/type/{index.md => index.mdx} (100%) rename static/usage/v8/modal/can-dismiss/boolean/{index.md => index.mdx} (100%) rename static/usage/v8/modal/can-dismiss/child-state/{index.md => index.mdx} (100%) rename static/usage/v8/modal/can-dismiss/function/{index.md => index.mdx} (100%) rename static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/{index.md => index.mdx} (100%) rename static/usage/v8/modal/card/basic/{index.md => index.mdx} (100%) rename static/usage/v8/modal/controller/{index.md => index.mdx} (100%) rename static/usage/v8/modal/custom-dialogs/{index.md => index.mdx} (100%) rename static/usage/v8/modal/drag-move-event/{index.md => index.mdx} (100%) rename static/usage/v8/modal/drag-start-end-events/{index.md => index.mdx} (100%) rename static/usage/v8/modal/inline/basic/{index.md => index.mdx} (100%) rename static/usage/v8/modal/inline/is-open/{index.md => index.mdx} (100%) rename static/usage/v8/modal/performance/mount/{index.md => index.mdx} (100%) rename static/usage/v8/modal/sheet/auto-height/{index.md => index.mdx} (100%) rename static/usage/v8/modal/sheet/background-content/{index.md => index.mdx} (100%) rename static/usage/v8/modal/sheet/basic/{index.md => index.mdx} (100%) rename static/usage/v8/modal/sheet/expand-to-scroll/{index.md => index.mdx} (100%) rename static/usage/v8/modal/sheet/handle-behavior/{index.md => index.mdx} (100%) rename static/usage/v8/modal/styling/animations/{index.md => index.mdx} (100%) rename static/usage/v8/modal/styling/theming/{index.md => index.mdx} (100%) rename static/usage/v8/nav/modal-navigation/{index.md => index.mdx} (100%) rename static/usage/v8/nav/nav-link/{index.md => index.mdx} (100%) rename static/usage/v8/note/basic/{index.md => index.mdx} (100%) rename static/usage/v8/note/item/{index.md => index.mdx} (100%) rename static/usage/v8/note/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/note/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/picker-legacy/controller/{index.md => index.mdx} (100%) rename static/usage/v8/picker-legacy/inline/isOpen/{index.md => index.mdx} (100%) rename static/usage/v8/picker-legacy/inline/trigger/{index.md => index.mdx} (100%) rename static/usage/v8/picker-legacy/multiple-column/{index.md => index.mdx} (100%) rename static/usage/v8/picker/basic/{index.md => index.mdx} (100%) rename static/usage/v8/picker/modal/{index.md => index.mdx} (100%) rename static/usage/v8/picker/prefix-suffix/{index.md => index.mdx} (100%) rename static/usage/v8/picker/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/popover/customization/positioning/{index.md => index.mdx} (100%) rename static/usage/v8/popover/customization/sizing/{index.md => index.mdx} (100%) rename static/usage/v8/popover/customization/styling/{index.md => index.mdx} (100%) rename static/usage/v8/popover/nested/{index.md => index.mdx} (100%) rename static/usage/v8/popover/performance/mount/{index.md => index.mdx} (100%) rename static/usage/v8/popover/presenting/controller/{index.md => index.mdx} (100%) rename static/usage/v8/popover/presenting/inline-isopen/{index.md => index.mdx} (100%) rename static/usage/v8/popover/presenting/inline-trigger/{index.md => index.mdx} (100%) rename static/usage/v8/progress-bar/buffer/{index.md => index.mdx} (100%) rename static/usage/v8/progress-bar/determinate/{index.md => index.mdx} (100%) rename static/usage/v8/progress-bar/indeterminate/{index.md => index.mdx} (100%) rename static/usage/v8/progress-bar/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/progress-bar/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/progress-bar/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v8/radio/alignment/{index.md => index.mdx} (100%) rename static/usage/v8/radio/basic/{index.md => index.mdx} (100%) rename static/usage/v8/radio/empty-selection/{index.md => index.mdx} (100%) rename static/usage/v8/radio/helper-error/{index.md => index.mdx} (100%) rename static/usage/v8/radio/justify/{index.md => index.mdx} (100%) rename static/usage/v8/radio/label-placement/{index.md => index.mdx} (100%) rename static/usage/v8/radio/label-wrap/{index.md => index.mdx} (100%) rename static/usage/v8/radio/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/radio/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/radio/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v8/radio/using-comparewith/{index.md => index.mdx} (100%) rename static/usage/v8/range/basic/{index.md => index.mdx} (100%) rename static/usage/v8/range/dual-knobs/{index.md => index.mdx} (100%) rename static/usage/v8/range/ion-change-event/{index.md => index.mdx} (100%) rename static/usage/v8/range/ion-knob-move-event/{index.md => index.mdx} (100%) rename static/usage/v8/range/label-slot/{index.md => index.mdx} (100%) rename static/usage/v8/range/labels/{index.md => index.mdx} (100%) rename static/usage/v8/range/no-visible-label/{index.md => index.mdx} (100%) rename static/usage/v8/range/pins/{index.md => index.mdx} (100%) rename static/usage/v8/range/slots/{index.md => index.mdx} (100%) rename static/usage/v8/range/snapping-ticks/{index.md => index.mdx} (100%) rename static/usage/v8/range/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/range/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v8/refresher/advanced/{index.md => index.mdx} (100%) rename static/usage/v8/refresher/basic/{index.md => index.mdx} (100%) rename static/usage/v8/refresher/custom-content/{index.md => index.mdx} (100%) rename static/usage/v8/refresher/custom-scroll-target/{index.md => index.mdx} (100%) rename static/usage/v8/refresher/pull-properties/{index.md => index.mdx} (100%) rename static/usage/v8/refresher/pull-start-end-events/{index.md => index.mdx} (100%) rename static/usage/v8/reorder/basic/{index.md => index.mdx} (100%) rename static/usage/v8/reorder/custom-icon/{index.md => index.mdx} (100%) rename static/usage/v8/reorder/custom-scroll-target/{index.md => index.mdx} (100%) rename static/usage/v8/reorder/reorder-move-event/{index.md => index.mdx} (100%) rename static/usage/v8/reorder/reorder-start-end-events/{index.md => index.mdx} (100%) rename static/usage/v8/reorder/toggling-disabled/{index.md => index.mdx} (100%) rename static/usage/v8/reorder/updating-data/{index.md => index.mdx} (100%) rename static/usage/v8/reorder/wrapper/{index.md => index.mdx} (100%) rename static/usage/v8/ripple-effect/basic/{index.md => index.mdx} (100%) rename static/usage/v8/ripple-effect/customizing/{index.md => index.mdx} (100%) rename static/usage/v8/ripple-effect/type/{index.md => index.mdx} (100%) rename static/usage/v8/router/basic/{index.md => index.mdx} (100%) rename static/usage/v8/searchbar/basic/{index.md => index.mdx} (100%) rename static/usage/v8/searchbar/cancel-button/{index.md => index.mdx} (100%) rename static/usage/v8/searchbar/clear-button/{index.md => index.mdx} (100%) rename static/usage/v8/searchbar/debounce/{index.md => index.mdx} (100%) rename static/usage/v8/searchbar/search-icon/{index.md => index.mdx} (100%) rename static/usage/v8/searchbar/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/searchbar/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/segment-button/basic/{index.md => index.mdx} (100%) rename static/usage/v8/segment-button/layout/{index.md => index.mdx} (100%) rename static/usage/v8/segment-button/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/segment-button/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v8/segment/basic/{index.md => index.mdx} (100%) rename static/usage/v8/segment/scrollable/{index.md => index.mdx} (100%) rename static/usage/v8/segment/swipeable/{index.md => index.mdx} (100%) rename static/usage/v8/segment/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/segment/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/select/basic/multiple-selection/{index.md => index.mdx} (100%) rename static/usage/v8/select/basic/responding-to-interaction/{index.md => index.mdx} (100%) rename static/usage/v8/select/basic/single-selection/{index.md => index.mdx} (100%) rename static/usage/v8/select/customization/button-text/{index.md => index.mdx} (100%) rename static/usage/v8/select/customization/custom-toggle-icons/{index.md => index.mdx} (100%) rename static/usage/v8/select/customization/icon-flip-behavior/{index.md => index.mdx} (100%) rename static/usage/v8/select/customization/interface-options/{index.md => index.mdx} (100%) rename static/usage/v8/select/customization/styling-select/{index.md => index.mdx} (100%) rename static/usage/v8/select/fill/{index.md => index.mdx} (100%) rename static/usage/v8/select/helper-error/{index.md => index.mdx} (100%) rename static/usage/v8/select/interfaces/action-sheet/{index.md => index.mdx} (100%) rename static/usage/v8/select/interfaces/modal/{index.md => index.mdx} (100%) rename static/usage/v8/select/interfaces/popover/{index.md => index.mdx} (100%) rename static/usage/v8/select/justify/{index.md => index.mdx} (100%) rename static/usage/v8/select/label-placement/{index.md => index.mdx} (100%) rename static/usage/v8/select/label-slot/{index.md => index.mdx} (100%) rename static/usage/v8/select/no-visible-label/{index.md => index.mdx} (100%) rename static/usage/v8/select/objects-as-values/multiple-selection/{index.md => index.mdx} (100%) rename static/usage/v8/select/objects-as-values/using-comparewith/{index.md => index.mdx} (100%) rename static/usage/v8/select/start-end-slots/{index.md => index.mdx} (100%) rename static/usage/v8/select/typeahead/{index.md => index.mdx} (100%) rename static/usage/v8/skeleton-text/basic/{index.md => index.mdx} (100%) rename static/usage/v8/skeleton-text/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/spinner/basic/{index.md => index.mdx} (100%) rename static/usage/v8/spinner/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/spinner/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/spinner/theming/resizing/{index.md => index.mdx} (100%) rename static/usage/v8/split-pane/basic/{index.md => index.mdx} (100%) rename static/usage/v8/split-pane/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/tabs/basic/{index.md => index.mdx} (100%) rename static/usage/v8/tabs/router/{index.md => index.mdx} (100%) rename static/usage/v8/tabs/select-method/{index.md => index.mdx} (100%) rename static/usage/v8/text/basic/{index.md => index.mdx} (100%) rename static/usage/v8/textarea/autogrow/{index.md => index.mdx} (100%) rename static/usage/v8/textarea/basic/{index.md => index.mdx} (100%) rename static/usage/v8/textarea/clear-on-edit/{index.md => index.mdx} (100%) rename static/usage/v8/textarea/counter/{index.md => index.mdx} (100%) rename static/usage/v8/textarea/fill/{index.md => index.mdx} (100%) rename static/usage/v8/textarea/helper-error/{index.md => index.mdx} (100%) rename static/usage/v8/textarea/label-placement/{index.md => index.mdx} (100%) rename static/usage/v8/textarea/label-slot/{index.md => index.mdx} (100%) rename static/usage/v8/textarea/no-visible-label/{index.md => index.mdx} (100%) rename static/usage/v8/textarea/start-end-slots/{index.md => index.mdx} (100%) rename static/usage/v8/textarea/theming/{index.md => index.mdx} (100%) rename static/usage/v8/theming/always-dark-mode/{index.md => index.mdx} (100%) rename static/usage/v8/theming/always-high-contrast-mode/{index.md => index.mdx} (100%) rename static/usage/v8/theming/class-dark-mode/{index.md => index.mdx} (100%) rename static/usage/v8/theming/class-high-contrast-mode/{index.md => index.mdx} (100%) rename static/usage/v8/theming/system-dark-mode/{index.md => index.mdx} (100%) rename static/usage/v8/theming/system-high-contrast-mode/{index.md => index.mdx} (100%) rename static/usage/v8/thumbnail/basic/{index.md => index.mdx} (100%) rename static/usage/v8/thumbnail/item/{index.md => index.mdx} (100%) rename static/usage/v8/thumbnail/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/title/basic/{index.md => index.mdx} (100%) rename static/usage/v8/title/collapsible-large-title/basic/{index.md => index.mdx} (100%) rename static/usage/v8/title/collapsible-large-title/buttons/{index.md => index.mdx} (100%) rename static/usage/v8/title/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/toast/buttons/{index.md => index.mdx} (100%) rename static/usage/v8/toast/icon/{index.md => index.mdx} (100%) rename static/usage/v8/toast/inline/basic/{index.md => index.mdx} (100%) rename static/usage/v8/toast/inline/is-open/{index.md => index.mdx} (100%) rename static/usage/v8/toast/layout/{index.md => index.mdx} (100%) rename static/usage/v8/toast/position-anchor/{index.md => index.mdx} (100%) rename static/usage/v8/toast/presenting/controller/{index.md => index.mdx} (100%) rename static/usage/v8/toast/swipe-gesture/{index.md => index.mdx} (100%) rename static/usage/v8/toast/theming/{index.md => index.mdx} (100%) rename static/usage/v8/toggle/alignment/{index.md => index.mdx} (100%) rename static/usage/v8/toggle/basic/{index.md => index.mdx} (100%) rename static/usage/v8/toggle/helper-error/{index.md => index.mdx} (100%) rename static/usage/v8/toggle/justify/{index.md => index.mdx} (100%) rename static/usage/v8/toggle/label-placement/{index.md => index.mdx} (100%) rename static/usage/v8/toggle/list/{index.md => index.mdx} (100%) rename static/usage/v8/toggle/on-off/{index.md => index.mdx} (100%) rename static/usage/v8/toggle/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/toggle/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v8/toggle/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v8/toolbar/basic/{index.md => index.mdx} (100%) rename static/usage/v8/toolbar/buttons/{index.md => index.mdx} (100%) rename static/usage/v8/toolbar/progress-bars/{index.md => index.mdx} (100%) rename static/usage/v8/toolbar/searchbars/{index.md => index.mdx} (100%) rename static/usage/v8/toolbar/segments/{index.md => index.mdx} (100%) rename static/usage/v8/toolbar/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v8/toolbar/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/accordion/accessibility/animations/{index.md => index.mdx} (100%) rename static/usage/v9/accordion/basic/{index.md => index.mdx} (100%) rename static/usage/v9/accordion/customization/advanced-expansion-styles/{index.md => index.mdx} (100%) rename static/usage/v9/accordion/customization/expansion-styles/{index.md => index.mdx} (100%) rename static/usage/v9/accordion/customization/icons/{index.md => index.mdx} (100%) rename static/usage/v9/accordion/customization/theming/{index.md => index.mdx} (100%) rename static/usage/v9/accordion/disable/group/{index.md => index.mdx} (100%) rename static/usage/v9/accordion/disable/individual/{index.md => index.mdx} (100%) rename static/usage/v9/accordion/listen-changes/{index.md => index.mdx} (100%) rename static/usage/v9/accordion/multiple/{index.md => index.mdx} (100%) rename static/usage/v9/accordion/readonly/group/{index.md => index.mdx} (100%) rename static/usage/v9/accordion/readonly/individual/{index.md => index.mdx} (100%) rename static/usage/v9/accordion/toggle/{index.md => index.mdx} (100%) rename static/usage/v9/action-sheet/controller/{index.md => index.mdx} (100%) rename static/usage/v9/action-sheet/inline/isOpen/{index.md => index.mdx} (100%) rename static/usage/v9/action-sheet/inline/trigger/{index.md => index.mdx} (100%) rename static/usage/v9/action-sheet/role-info-on-dismiss/{index.md => index.mdx} (100%) rename static/usage/v9/action-sheet/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/action-sheet/theming/styling/{index.md => index.mdx} (100%) rename static/usage/v9/alert/buttons/{index.md => index.mdx} (100%) rename static/usage/v9/alert/customization/{index.md => index.mdx} (100%) rename static/usage/v9/alert/inputs/radios/{index.md => index.mdx} (100%) rename static/usage/v9/alert/inputs/text-inputs/{index.md => index.mdx} (100%) rename static/usage/v9/alert/presenting/controller/{index.md => index.mdx} (100%) rename static/usage/v9/alert/presenting/isOpen/{index.md => index.mdx} (100%) rename static/usage/v9/alert/presenting/trigger/{index.md => index.mdx} (100%) rename static/usage/v9/animations/basic/{index.md => index.mdx} (100%) rename static/usage/v9/animations/before-and-after-hooks/{index.md => index.mdx} (100%) rename static/usage/v9/animations/chain/{index.md => index.mdx} (100%) rename static/usage/v9/animations/gesture/{index.md => index.mdx} (100%) rename static/usage/v9/animations/group/{index.md => index.mdx} (100%) rename static/usage/v9/animations/keyframes/{index.md => index.mdx} (100%) rename static/usage/v9/animations/modal-override/{index.md => index.mdx} (100%) rename static/usage/v9/animations/preference-based/{index.md => index.mdx} (100%) rename static/usage/v9/app/set-focus/{index.md => index.mdx} (100%) rename static/usage/v9/avatar/basic/{index.md => index.mdx} (100%) rename static/usage/v9/avatar/chip/{index.md => index.mdx} (100%) rename static/usage/v9/avatar/item/{index.md => index.mdx} (100%) rename static/usage/v9/avatar/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/back-button/basic/{index.md => index.mdx} (100%) rename static/usage/v9/back-button/custom/{index.md => index.mdx} (100%) rename static/usage/v9/backdrop/basic/{index.md => index.mdx} (100%) rename static/usage/v9/backdrop/styling/{index.md => index.mdx} (100%) rename static/usage/v9/badge/basic/{index.md => index.mdx} (100%) rename static/usage/v9/badge/inside-tab-bar/{index.md => index.mdx} (100%) rename static/usage/v9/badge/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/badge/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/breadcrumbs/basic/{index.md => index.mdx} (100%) rename static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/{index.md => index.mdx} (100%) rename static/usage/v9/breadcrumbs/collapsing-items/items-before-after/{index.md => index.mdx} (100%) rename static/usage/v9/breadcrumbs/collapsing-items/max-items/{index.md => index.mdx} (100%) rename static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/{index.md => index.mdx} (100%) rename static/usage/v9/breadcrumbs/icons/custom-separators/{index.md => index.mdx} (100%) rename static/usage/v9/breadcrumbs/icons/icons-on-items/{index.md => index.mdx} (100%) rename static/usage/v9/breadcrumbs/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/breadcrumbs/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/button/basic/{index.md => index.mdx} (100%) rename static/usage/v9/button/expand/{index.md => index.mdx} (100%) rename static/usage/v9/button/fill/{index.md => index.mdx} (100%) rename static/usage/v9/button/icons/{index.md => index.mdx} (100%) rename static/usage/v9/button/shape/{index.md => index.mdx} (100%) rename static/usage/v9/button/size/{index.md => index.mdx} (100%) rename static/usage/v9/button/text-wrapping/{index.md => index.mdx} (100%) rename static/usage/v9/button/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/button/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/buttons/basic/{index.md => index.mdx} (100%) rename static/usage/v9/buttons/placement/{index.md => index.mdx} (100%) rename static/usage/v9/buttons/types/{index.md => index.mdx} (100%) rename static/usage/v9/card/basic/{index.md => index.mdx} (100%) rename static/usage/v9/card/buttons/{index.md => index.mdx} (100%) rename static/usage/v9/card/list/{index.md => index.mdx} (100%) rename static/usage/v9/card/media/{index.md => index.mdx} (100%) rename static/usage/v9/card/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/card/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/checkbox/alignment/{index.md => index.mdx} (100%) rename static/usage/v9/checkbox/basic/{index.md => index.mdx} (100%) rename static/usage/v9/checkbox/helper-error/{index.md => index.mdx} (100%) rename static/usage/v9/checkbox/indeterminate/{index.md => index.mdx} (100%) rename static/usage/v9/checkbox/justify/{index.md => index.mdx} (100%) rename static/usage/v9/checkbox/label-link/{index.md => index.mdx} (100%) rename static/usage/v9/checkbox/label-placement/{index.md => index.mdx} (100%) rename static/usage/v9/checkbox/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/chip/basic/{index.md => index.mdx} (100%) rename static/usage/v9/chip/slots/{index.md => index.mdx} (100%) rename static/usage/v9/chip/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/chip/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/config/mode/{index.md => index.mdx} (100%) rename static/usage/v9/content/basic/{index.md => index.mdx} (100%) rename static/usage/v9/content/fixed/{index.md => index.mdx} (100%) rename static/usage/v9/content/fullscreen/{index.md => index.mdx} (100%) rename static/usage/v9/content/header-footer/{index.md => index.mdx} (100%) rename static/usage/v9/content/scroll-events/{index.md => index.mdx} (100%) rename static/usage/v9/content/scroll-methods/{index.md => index.mdx} (100%) rename static/usage/v9/content/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/content/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/content/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v9/content/theming/safe-area/{index.md => index.mdx} (100%) rename static/usage/v9/datetime-button/basic/{index.md => index.mdx} (100%) rename static/usage/v9/datetime-button/format-options/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/basic/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/buttons/customizing-button-texts/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/buttons/customizing-buttons/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/buttons/showing-confirmation-buttons/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/date-constraints/advanced/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/date-constraints/max-min/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/date-constraints/values/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/format-options/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/highlightedDates/array/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/highlightedDates/callback/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/localization/custom-locale/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/localization/first-day-of-week/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/localization/hour-cycle/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/localization/locale-extension-tags/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/localization/time-label/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/multiple/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/presentation/date/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/presentation/month-and-year/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/presentation/time/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/presentation/wheel/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/show-adjacent-days/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/styling/calendar-days/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/styling/calendar-header/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/styling/datetime-header/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/styling/global-theming/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/styling/wheel-styling/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/title/customizing-title/{index.md => index.mdx} (100%) rename static/usage/v9/datetime/title/showing-default-title/{index.md => index.mdx} (100%) rename static/usage/v9/fab/basic/{index.md => index.mdx} (100%) rename static/usage/v9/fab/before-content/{index.md => index.mdx} (100%) rename static/usage/v9/fab/button-sizing/{index.md => index.mdx} (100%) rename static/usage/v9/fab/list-side/{index.md => index.mdx} (100%) rename static/usage/v9/fab/positioning/{index.md => index.mdx} (100%) rename static/usage/v9/fab/safe-area/{index.md => index.mdx} (100%) rename static/usage/v9/fab/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/fab/theming/css-custom-properties/{index.md => index.mdx} (100%) rename static/usage/v9/fab/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v9/footer/basic/{index.md => index.mdx} (100%) rename static/usage/v9/footer/custom-scroll-target/{index.md => index.mdx} (100%) rename static/usage/v9/footer/fade/{index.md => index.mdx} (100%) rename static/usage/v9/footer/no-border/{index.md => index.mdx} (100%) rename static/usage/v9/footer/translucent/{index.md => index.mdx} (100%) rename static/usage/v9/gestures/basic/{index.md => index.mdx} (100%) rename static/usage/v9/gestures/double-click/{index.md => index.mdx} (100%) rename static/usage/v9/grid/basic/{index.md => index.mdx} (100%) rename static/usage/v9/grid/customizing/column-number/{index.md => index.mdx} (100%) rename static/usage/v9/grid/customizing/padding/{index.md => index.mdx} (100%) rename static/usage/v9/grid/customizing/width/{index.md => index.mdx} (100%) rename static/usage/v9/grid/fixed/{index.md => index.mdx} (100%) rename static/usage/v9/grid/horizontal-alignment/{index.md => index.mdx} (100%) rename static/usage/v9/grid/offset-responsive/{index.md => index.mdx} (100%) rename static/usage/v9/grid/offset/{index.md => index.mdx} (100%) rename static/usage/v9/grid/push-pull-responsive/{index.md => index.mdx} (100%) rename static/usage/v9/grid/push-pull/{index.md => index.mdx} (100%) rename static/usage/v9/grid/size-auto/{index.md => index.mdx} (100%) rename static/usage/v9/grid/size-responsive/{index.md => index.mdx} (100%) rename static/usage/v9/grid/size/{index.md => index.mdx} (100%) rename static/usage/v9/grid/vertical-alignment/{index.md => index.mdx} (100%) rename static/usage/v9/header/basic/{index.md => index.mdx} (100%) rename static/usage/v9/header/condense/{index.md => index.mdx} (100%) rename static/usage/v9/header/custom-scroll-target/{index.md => index.mdx} (100%) rename static/usage/v9/header/fade/{index.md => index.mdx} (100%) rename static/usage/v9/header/no-border/{index.md => index.mdx} (100%) rename static/usage/v9/header/translucent/{index.md => index.mdx} (100%) rename static/usage/v9/icon/basic/{index.md => index.mdx} (100%) rename static/usage/v9/icon/custom-svgs/{index.md => index.mdx} (100%) rename static/usage/v9/icon/font-icons/{index.md => index.mdx} (100%) rename static/usage/v9/img/basic/{index.md => index.mdx} (100%) rename static/usage/v9/infinite-scroll/basic/{index.md => index.mdx} (100%) rename static/usage/v9/infinite-scroll/custom-infinite-scroll-content/{index.md => index.mdx} (100%) rename static/usage/v9/infinite-scroll/infinite-scroll-content/{index.md => index.mdx} (100%) rename static/usage/v9/input-otp/basic/{index.md => index.mdx} (100%) rename static/usage/v9/input-otp/fill/{index.md => index.mdx} (100%) rename static/usage/v9/input-otp/pattern/{index.md => index.mdx} (100%) rename static/usage/v9/input-otp/separators/{index.md => index.mdx} (100%) rename static/usage/v9/input-otp/shape/{index.md => index.mdx} (100%) rename static/usage/v9/input-otp/size/{index.md => index.mdx} (100%) rename static/usage/v9/input-otp/states/{index.md => index.mdx} (100%) rename static/usage/v9/input-otp/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/input-otp/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/input-otp/type/{index.md => index.mdx} (100%) rename static/usage/v9/input-password-toggle/basic/{index.md => index.mdx} (100%) rename static/usage/v9/input/basic/{index.md => index.mdx} (100%) rename static/usage/v9/input/clear/{index.md => index.mdx} (100%) rename static/usage/v9/input/counter-alignment/{index.md => index.mdx} (100%) rename static/usage/v9/input/counter/{index.md => index.mdx} (100%) rename static/usage/v9/input/fill/{index.md => index.mdx} (100%) rename static/usage/v9/input/filtering/{index.md => index.mdx} (100%) rename static/usage/v9/input/helper-error/{index.md => index.mdx} (100%) rename static/usage/v9/input/label-placement/{index.md => index.mdx} (100%) rename static/usage/v9/input/label-slot/{index.md => index.mdx} (100%) rename static/usage/v9/input/mask/{index.md => index.mdx} (100%) rename static/usage/v9/input/no-visible-label/{index.md => index.mdx} (100%) rename static/usage/v9/input/set-focus/{index.md => index.mdx} (100%) rename static/usage/v9/input/start-end-slots/{index.md => index.mdx} (100%) rename static/usage/v9/input/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/input/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/input/types/{index.md => index.mdx} (100%) rename static/usage/v9/item-divider/basic/{index.md => index.mdx} (100%) rename static/usage/v9/item-divider/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/item-divider/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/item-group/basic/{index.md => index.mdx} (100%) rename static/usage/v9/item-group/sliding-items/{index.md => index.mdx} (100%) rename static/usage/v9/item-sliding/basic/{index.md => index.mdx} (100%) rename static/usage/v9/item-sliding/expandable/{index.md => index.mdx} (100%) rename static/usage/v9/item-sliding/icons/{index.md => index.mdx} (100%) rename static/usage/v9/item/basic/{index.md => index.mdx} (100%) rename static/usage/v9/item/buttons/{index.md => index.mdx} (100%) rename static/usage/v9/item/clickable/{index.md => index.mdx} (100%) rename static/usage/v9/item/content-types/actions/{index.md => index.mdx} (100%) rename static/usage/v9/item/content-types/controls/{index.md => index.mdx} (100%) rename static/usage/v9/item/content-types/metadata/{index.md => index.mdx} (100%) rename static/usage/v9/item/content-types/supporting-visuals/{index.md => index.mdx} (100%) rename static/usage/v9/item/content-types/text/{index.md => index.mdx} (100%) rename static/usage/v9/item/detail-arrows/{index.md => index.mdx} (100%) rename static/usage/v9/item/inputs/{index.md => index.mdx} (100%) rename static/usage/v9/item/lines/{index.md => index.mdx} (100%) rename static/usage/v9/item/media/{index.md => index.mdx} (100%) rename static/usage/v9/item/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/item/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/item/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v9/item/theming/input-highlight/{index.md => index.mdx} (100%) rename static/usage/v9/keyboard/enterkeyhint/{index.md => index.mdx} (100%) rename static/usage/v9/keyboard/inputmode/{index.md => index.mdx} (100%) rename static/usage/v9/label/basic/{index.md => index.mdx} (100%) rename static/usage/v9/label/input/{index.md => index.mdx} (100%) rename static/usage/v9/label/item/{index.md => index.mdx} (100%) rename static/usage/v9/label/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/layout/dynamic-font-scaling/{index.md => index.mdx} (100%) rename static/usage/v9/list-header/basic/{index.md => index.mdx} (100%) rename static/usage/v9/list-header/buttons/{index.md => index.mdx} (100%) rename static/usage/v9/list-header/lines/{index.md => index.mdx} (100%) rename static/usage/v9/list-header/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/list-header/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/list/basic/{index.md => index.mdx} (100%) rename static/usage/v9/list/inset/{index.md => index.mdx} (100%) rename static/usage/v9/list/lines/{index.md => index.mdx} (100%) rename static/usage/v9/loading/controller/{index.md => index.mdx} (100%) rename static/usage/v9/loading/inline/{index.md => index.mdx} (100%) rename static/usage/v9/loading/spinners/{index.md => index.mdx} (100%) rename static/usage/v9/loading/theming/{index.md => index.mdx} (100%) rename static/usage/v9/menu/basic/{index.md => index.mdx} (100%) rename static/usage/v9/menu/multiple/{index.md => index.mdx} (100%) rename static/usage/v9/menu/sides/{index.md => index.mdx} (100%) rename static/usage/v9/menu/theming/{index.md => index.mdx} (100%) rename static/usage/v9/menu/toggle/{index.md => index.mdx} (100%) rename static/usage/v9/menu/type/{index.md => index.mdx} (100%) rename static/usage/v9/modal/can-dismiss/boolean/{index.md => index.mdx} (100%) rename static/usage/v9/modal/can-dismiss/child-state/{index.md => index.mdx} (100%) rename static/usage/v9/modal/can-dismiss/function/{index.md => index.mdx} (100%) rename static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/{index.md => index.mdx} (100%) rename static/usage/v9/modal/card/basic/{index.md => index.mdx} (100%) rename static/usage/v9/modal/controller/{index.md => index.mdx} (100%) rename static/usage/v9/modal/custom-dialogs/{index.md => index.mdx} (100%) rename static/usage/v9/modal/drag-move-event/{index.md => index.mdx} (100%) rename static/usage/v9/modal/drag-start-end-events/{index.md => index.mdx} (100%) rename static/usage/v9/modal/inline/basic/{index.md => index.mdx} (100%) rename static/usage/v9/modal/inline/is-open/{index.md => index.mdx} (100%) rename static/usage/v9/modal/performance/mount/{index.md => index.mdx} (100%) rename static/usage/v9/modal/sheet/auto-height/{index.md => index.mdx} (100%) rename static/usage/v9/modal/sheet/background-content/{index.md => index.mdx} (100%) rename static/usage/v9/modal/sheet/basic/{index.md => index.mdx} (100%) rename static/usage/v9/modal/sheet/expand-to-scroll/{index.md => index.mdx} (100%) rename static/usage/v9/modal/sheet/handle-behavior/{index.md => index.mdx} (100%) rename static/usage/v9/modal/styling/animations/{index.md => index.mdx} (100%) rename static/usage/v9/modal/styling/theming/{index.md => index.mdx} (100%) rename static/usage/v9/nav/modal-navigation/{index.md => index.mdx} (100%) rename static/usage/v9/nav/nav-link/{index.md => index.mdx} (100%) rename static/usage/v9/navigation/{index.md => index.mdx} (100%) rename static/usage/v9/note/basic/{index.md => index.mdx} (100%) rename static/usage/v9/note/item/{index.md => index.mdx} (100%) rename static/usage/v9/note/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/note/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/picker/basic/{index.md => index.mdx} (100%) rename static/usage/v9/picker/modal/{index.md => index.mdx} (100%) rename static/usage/v9/picker/prefix-suffix/{index.md => index.mdx} (100%) rename static/usage/v9/picker/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/popover/customization/positioning/{index.md => index.mdx} (100%) rename static/usage/v9/popover/customization/sizing/{index.md => index.mdx} (100%) rename static/usage/v9/popover/customization/styling/{index.md => index.mdx} (100%) rename static/usage/v9/popover/nested/{index.md => index.mdx} (100%) rename static/usage/v9/popover/performance/mount/{index.md => index.mdx} (100%) rename static/usage/v9/popover/presenting/controller/{index.md => index.mdx} (100%) rename static/usage/v9/popover/presenting/inline-isopen/{index.md => index.mdx} (100%) rename static/usage/v9/popover/presenting/inline-trigger/{index.md => index.mdx} (100%) rename static/usage/v9/progress-bar/buffer/{index.md => index.mdx} (100%) rename static/usage/v9/progress-bar/determinate/{index.md => index.mdx} (100%) rename static/usage/v9/progress-bar/indeterminate/{index.md => index.mdx} (100%) rename static/usage/v9/progress-bar/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/progress-bar/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/progress-bar/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v9/radio/alignment/{index.md => index.mdx} (100%) rename static/usage/v9/radio/basic/{index.md => index.mdx} (100%) rename static/usage/v9/radio/empty-selection/{index.md => index.mdx} (100%) rename static/usage/v9/radio/helper-error/{index.md => index.mdx} (100%) rename static/usage/v9/radio/justify/{index.md => index.mdx} (100%) rename static/usage/v9/radio/label-placement/{index.md => index.mdx} (100%) rename static/usage/v9/radio/label-wrap/{index.md => index.mdx} (100%) rename static/usage/v9/radio/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/radio/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/radio/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v9/radio/using-comparewith/{index.md => index.mdx} (100%) rename static/usage/v9/range/basic/{index.md => index.mdx} (100%) rename static/usage/v9/range/dual-knobs/{index.md => index.mdx} (100%) rename static/usage/v9/range/ion-change-event/{index.md => index.mdx} (100%) rename static/usage/v9/range/ion-knob-move-event/{index.md => index.mdx} (100%) rename static/usage/v9/range/label-slot/{index.md => index.mdx} (100%) rename static/usage/v9/range/labels/{index.md => index.mdx} (100%) rename static/usage/v9/range/no-visible-label/{index.md => index.mdx} (100%) rename static/usage/v9/range/pins/{index.md => index.mdx} (100%) rename static/usage/v9/range/slots/{index.md => index.mdx} (100%) rename static/usage/v9/range/snapping-ticks/{index.md => index.mdx} (100%) rename static/usage/v9/range/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/range/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v9/refresher/advanced/{index.md => index.mdx} (100%) rename static/usage/v9/refresher/basic/{index.md => index.mdx} (100%) rename static/usage/v9/refresher/custom-content/{index.md => index.mdx} (100%) rename static/usage/v9/refresher/custom-scroll-target/{index.md => index.mdx} (100%) rename static/usage/v9/refresher/pull-properties/{index.md => index.mdx} (100%) rename static/usage/v9/refresher/pull-start-end-events/{index.md => index.mdx} (100%) rename static/usage/v9/reorder/basic/{index.md => index.mdx} (100%) rename static/usage/v9/reorder/custom-icon/{index.md => index.mdx} (100%) rename static/usage/v9/reorder/custom-scroll-target/{index.md => index.mdx} (100%) rename static/usage/v9/reorder/reorder-move-event/{index.md => index.mdx} (100%) rename static/usage/v9/reorder/reorder-start-end-events/{index.md => index.mdx} (100%) rename static/usage/v9/reorder/toggling-disabled/{index.md => index.mdx} (100%) rename static/usage/v9/reorder/updating-data/{index.md => index.mdx} (100%) rename static/usage/v9/reorder/wrapper/{index.md => index.mdx} (100%) rename static/usage/v9/ripple-effect/basic/{index.md => index.mdx} (100%) rename static/usage/v9/ripple-effect/customizing/{index.md => index.mdx} (100%) rename static/usage/v9/ripple-effect/type/{index.md => index.mdx} (100%) rename static/usage/v9/router/basic/{index.md => index.mdx} (100%) rename static/usage/v9/router/nav-within-page/{index.md => index.mdx} (100%) rename static/usage/v9/searchbar/basic/{index.md => index.mdx} (100%) rename static/usage/v9/searchbar/cancel-button/{index.md => index.mdx} (100%) rename static/usage/v9/searchbar/clear-button/{index.md => index.mdx} (100%) rename static/usage/v9/searchbar/debounce/{index.md => index.mdx} (100%) rename static/usage/v9/searchbar/search-icon/{index.md => index.mdx} (100%) rename static/usage/v9/searchbar/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/searchbar/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/segment-button/basic/{index.md => index.mdx} (100%) rename static/usage/v9/segment-button/layout/{index.md => index.mdx} (100%) rename static/usage/v9/segment-button/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/segment-button/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v9/segment/basic/{index.md => index.mdx} (100%) rename static/usage/v9/segment/scrollable/{index.md => index.mdx} (100%) rename static/usage/v9/segment/swipeable/{index.md => index.mdx} (100%) rename static/usage/v9/segment/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/segment/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/select/basic/multiple-selection/{index.md => index.mdx} (100%) rename static/usage/v9/select/basic/responding-to-interaction/{index.md => index.mdx} (100%) rename static/usage/v9/select/basic/single-selection/{index.md => index.mdx} (100%) rename static/usage/v9/select/customization/button-text/{index.md => index.mdx} (100%) rename static/usage/v9/select/customization/custom-toggle-icons/{index.md => index.mdx} (100%) rename static/usage/v9/select/customization/icon-flip-behavior/{index.md => index.mdx} (100%) rename static/usage/v9/select/customization/interface-options/{index.md => index.mdx} (100%) rename static/usage/v9/select/customization/styling-select/{index.md => index.mdx} (100%) rename static/usage/v9/select/fill/{index.md => index.mdx} (100%) rename static/usage/v9/select/helper-error/{index.md => index.mdx} (100%) rename static/usage/v9/select/interfaces/action-sheet/{index.md => index.mdx} (100%) rename static/usage/v9/select/interfaces/modal/{index.md => index.mdx} (100%) rename static/usage/v9/select/interfaces/popover/{index.md => index.mdx} (100%) rename static/usage/v9/select/justify/{index.md => index.mdx} (100%) rename static/usage/v9/select/label-placement/{index.md => index.mdx} (100%) rename static/usage/v9/select/label-slot/{index.md => index.mdx} (100%) rename static/usage/v9/select/no-visible-label/{index.md => index.mdx} (100%) rename static/usage/v9/select/objects-as-values/multiple-selection/{index.md => index.mdx} (100%) rename static/usage/v9/select/objects-as-values/using-comparewith/{index.md => index.mdx} (100%) rename static/usage/v9/select/rich-content-options/{index.md => index.mdx} (100%) rename static/usage/v9/select/start-end-slots/{index.md => index.mdx} (100%) rename static/usage/v9/select/typeahead/{index.md => index.mdx} (100%) rename static/usage/v9/skeleton-text/basic/{index.md => index.mdx} (100%) rename static/usage/v9/skeleton-text/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/spinner/basic/{index.md => index.mdx} (100%) rename static/usage/v9/spinner/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/spinner/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/spinner/theming/resizing/{index.md => index.mdx} (100%) rename static/usage/v9/split-pane/basic/{index.md => index.mdx} (100%) rename static/usage/v9/split-pane/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/tabs/basic/{index.md => index.mdx} (100%) rename static/usage/v9/tabs/router/{index.md => index.mdx} (100%) rename static/usage/v9/tabs/select-method/{index.md => index.mdx} (100%) rename static/usage/v9/text/basic/{index.md => index.mdx} (100%) rename static/usage/v9/textarea/autogrow/{index.md => index.mdx} (100%) rename static/usage/v9/textarea/basic/{index.md => index.mdx} (100%) rename static/usage/v9/textarea/clear-on-edit/{index.md => index.mdx} (100%) rename static/usage/v9/textarea/counter/{index.md => index.mdx} (100%) rename static/usage/v9/textarea/fill/{index.md => index.mdx} (100%) rename static/usage/v9/textarea/helper-error/{index.md => index.mdx} (100%) rename static/usage/v9/textarea/label-placement/{index.md => index.mdx} (100%) rename static/usage/v9/textarea/label-slot/{index.md => index.mdx} (100%) rename static/usage/v9/textarea/no-visible-label/{index.md => index.mdx} (100%) rename static/usage/v9/textarea/start-end-slots/{index.md => index.mdx} (100%) rename static/usage/v9/textarea/theming/{index.md => index.mdx} (100%) rename static/usage/v9/theming/always-dark-mode/{index.md => index.mdx} (100%) rename static/usage/v9/theming/always-high-contrast-mode/{index.md => index.mdx} (100%) rename static/usage/v9/theming/class-dark-mode/{index.md => index.mdx} (100%) rename static/usage/v9/theming/class-high-contrast-mode/{index.md => index.mdx} (100%) rename static/usage/v9/theming/system-dark-mode/{index.md => index.mdx} (100%) rename static/usage/v9/theming/system-high-contrast-mode/{index.md => index.mdx} (100%) rename static/usage/v9/thumbnail/basic/{index.md => index.mdx} (100%) rename static/usage/v9/thumbnail/item/{index.md => index.mdx} (100%) rename static/usage/v9/thumbnail/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/title/basic/{index.md => index.mdx} (100%) rename static/usage/v9/title/collapsible-large-title/basic/{index.md => index.mdx} (100%) rename static/usage/v9/title/collapsible-large-title/buttons/{index.md => index.mdx} (100%) rename static/usage/v9/title/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/toast/buttons/{index.md => index.mdx} (100%) rename static/usage/v9/toast/icon/{index.md => index.mdx} (100%) rename static/usage/v9/toast/inline/basic/{index.md => index.mdx} (100%) rename static/usage/v9/toast/inline/is-open/{index.md => index.mdx} (100%) rename static/usage/v9/toast/layout/{index.md => index.mdx} (100%) rename static/usage/v9/toast/position-anchor/{index.md => index.mdx} (100%) rename static/usage/v9/toast/presenting/controller/{index.md => index.mdx} (100%) rename static/usage/v9/toast/swipe-gesture/{index.md => index.mdx} (100%) rename static/usage/v9/toast/theming/{index.md => index.mdx} (100%) rename static/usage/v9/toggle/alignment/{index.md => index.mdx} (100%) rename static/usage/v9/toggle/basic/{index.md => index.mdx} (100%) rename static/usage/v9/toggle/helper-error/{index.md => index.mdx} (100%) rename static/usage/v9/toggle/justify/{index.md => index.mdx} (100%) rename static/usage/v9/toggle/label-placement/{index.md => index.mdx} (100%) rename static/usage/v9/toggle/list/{index.md => index.mdx} (100%) rename static/usage/v9/toggle/on-off/{index.md => index.mdx} (100%) rename static/usage/v9/toggle/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/toggle/theming/css-properties/{index.md => index.mdx} (100%) rename static/usage/v9/toggle/theming/css-shadow-parts/{index.md => index.mdx} (100%) rename static/usage/v9/toolbar/basic/{index.md => index.mdx} (100%) rename static/usage/v9/toolbar/buttons/{index.md => index.mdx} (100%) rename static/usage/v9/toolbar/progress-bars/{index.md => index.mdx} (100%) rename static/usage/v9/toolbar/searchbars/{index.md => index.mdx} (100%) rename static/usage/v9/toolbar/segments/{index.md => index.mdx} (100%) rename static/usage/v9/toolbar/theming/colors/{index.md => index.mdx} (100%) rename static/usage/v9/toolbar/theming/css-properties/{index.md => index.mdx} (100%) diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml index 66c35d1a18e..ddd4feec2be 100644 --- a/.github/workflows/CI.yml +++ b/.github/workflows/CI.yml @@ -12,20 +12,19 @@ jobs: runs-on: ${{ matrix.os }} strategy: matrix: - node_version: [20] - # Build processes work differently across operating systems, so the + # Build processes work differently across operating systems, so the # checks run on each one to make sure anyone can contribute to the # docs. os: [windows-latest, macOS-latest] steps: - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 - - name: ⚙️ Use Node.js ${{ matrix.node_version }} + - name: ⚙️ Use Node.js uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 with: - node-version: ${{ matrix.node_version }} + node-version: 24 - name: 🕸️ Install Dependencies - run: npm ci --legacy-peer-deps + run: npm ci - name: 🖌️ Lint run: npm run lint - name: Test diff --git a/.prettierignore b/.prettierignore index 4fc33ed30b4..24b5b1740a6 100644 --- a/.prettierignore +++ b/.prettierignore @@ -3,7 +3,9 @@ # Wrapped components are our own code, so they follow the repo's formatting. src/theme/DocItem/Layout/index.tsx src/theme/EditMetaRow/index.tsx +src/theme/Icon/DarkMode/index.tsx src/theme/Icon/Edit/index.tsx +src/theme/Icon/LightMode/index.tsx src/theme/Icon/Language/index.tsx src/theme/Layout/index.tsx src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -12,21 +14,18 @@ src/theme/prism-include-languages.ts legacy-stencil-components scripts/bak -docs/api -versioned_docs/version-v*/api +# Auto-generated files docs/native versioned_docs/version-v*/native docs/cli/commands -# Each definition in these files is one line of prose inside a JSX
. -# Prettier's mdx parser reflows those children and moves link text onto its own -# line, which MDX then wraps in a paragraph, rendering invalid HTML such as -#

Android SDK

. Formatting these files reintroduces that markup. -docs/reference/glossary.md -versioned_docs/version-v*/reference/glossary.md +versioned_docs/version-v*/cli/commands # Archived versions versioned_docs/version-v5 versioned_docs/version-v6 +versioned_docs/version-v7 +static/usage/v6 +static/usage/v7 static/code/stackblitz diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 00000000000..2b532afe4ce --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,11 @@ +/** + * Prettier configuration for the docs site. + */ + +const ionicConfig = require('@ionic/prettier-config'); + +module.exports = { + ...ionicConfig, + // Override the trailingComma setting to avoid trailing commas in function arguments and JSX props. + trailingComma: 'es5', +}; diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 534db3dd80a..63686fc33de 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -214,27 +214,119 @@ The Ionic documentation's `main` branch is deployed automatically and separately ### Archiving a Version -Archived versions are served from a frozen Vercel deployment instead of being rebuilt on every `main` deploy, which keeps build times and memory usage low. Two files control this: +Archived versions are served from a frozen Vercel deployment instead of being rebuilt on every `main` deploy, which keeps build times and memory usage low. That deployment is a full snapshot of the site, so it serves every version that was in the build. Two files control this: -- [`versions.json`](./versions.json): lists the versions Docusaurus rebuilds on every deploy. +- [`versions.json`](./versions.json): lists the older versions Docusaurus rebuilds on every deploy. It does not include the current version, which is built from `docs/` and takes its label from `versions.current` in `docusaurus.config.js`. - [`versionsArchived.json`](./versionsArchived.json): maps each archived version to the frozen deployment URL the version picker links to. -The archived URL has to point at a build that _included_ the version, so you build it first, then move it to `versionsArchived.json`: +The docs keep the current version plus one older version rebuildable, so each major release archives one version and involves two different version numbers. The steps below refer to them as: -1. **Build the version.** Make sure it is in `versions.json`. If you are refreshing an already-archived version, move it out of `versionsArchived.json` and back into `versions.json`. Commit, push and let Vercel deploy. -2. **Promote the deployment.** In the Vercel dashboard, open that deployment and **Promote to Production** so it does not get cleaned up. Wait for the build to finish before pushing again, or it may get canceled. -3. **Copy its URL.** Use the deployment's unique `ionic-docs--ionic1.vercel.app` URL, not the branch or production alias. -4. **Archive it.** Remove the version from `versions.json`, then add it to `versionsArchived.json` with `/docs/` appended and no trailing slash (a trailing slash causes a brief 404 flash): +- ``: the version being frozen and removed from `versions.json`. +- ``: the version that just stopped being current and moved into `versions.json`. It is not being archived, but step 1 has to account for it. + +For example, when `v9` becomes current: `v8` is `` and `v7` is ``. + +The archived URL has to point at a build that _included_ ``, so you build it first, then move it to `versionsArchived.json`: + +1. **Check the `vercel.json` redirects.** The frozen deployment bakes in whatever `vercel.json` looked like at build time, and it serves every version in that build. Any `:version(...)` group missing a version therefore stays broken on that host for good. Make sure the groups already list ``, which is the one most likely to be missing since it only just moved into `versions.json`. The `angular`, `react`, `vue` and `javascript` landing pages each need a group, as no version ships an index page for them: + + ```json + { + "source": "/docs/:version(v6|v7|)/angular", + "destination": "/docs/:version/angular/overview" + }, + { + "source": "/docs/:version()/javascript", + "destination": "/docs/:version/javascript/overview" + } + ``` + + The groups accumulate, so existing entries stay in place whether or not that version is archived and you are only ever adding to them. The `javascript` group only covers versions that have a `javascript/` section. + +Everything from here on refers to ``: + +2. **Build ``.** Make sure it is in `versions.json`. If you are refreshing an already-archived version, move it out of `versionsArchived.json` and back into `versions.json`, and add it back to the generation scripts in step 10. Commit, push and let Vercel deploy. +3. **Promote the deployment.** In the Vercel dashboard, open that deployment and **Promote to Production** so it does not get cleaned up. Wait for the build to finish before pushing again, or it may get canceled. +4. **Copy its URL.** Use the deployment's unique `ionic-docs--ionic1.vercel.app` URL, not the branch or production alias. +5. **Archive it.** Remove `` from `versions.json`, then add it to `versionsArchived.json` with `/docs/` appended and no trailing slash (a trailing slash causes a brief 404 flash): + + _`versions.json`_ + + ```diff + [ + - "v8", + - "" + + "v8" + ] + ``` + + _`versionsArchived.json`_ ```json { - "v6": "https://ionic-docs--ionic1.vercel.app/docs/v6" + "": "https://ionic-docs--ionic1.vercel.app/docs/", + "v6": "https://ionic-docs-lq0if04rc-ionic1.vercel.app/docs/v6", + "v5": "https://ionic-docs-5utg8ms4c-ionic1.vercel.app/docs/v5" } ``` -5. **Open a PR.** Once merged, the version picker links to the archive and `main` stops building that version. +6. **Update `.prettierignore`.** Add the archived version folders to the archived versions group to keep Prettier from formatting generated files: + + ``` + static/usage/ + versioned_docs/version- + ``` + +7. **Update `cspell.json`.** Add the archived version to the `ignorePaths` array so the spell checker skips generated files: + + ```diff + "ignorePaths": [ + ... + "versioned_docs/version-v5", + "versioned_docs/version-v6", + + "versioned_docs/version-" + ] + ``` + +8. **Update `renovate.json`.** Add the archived version's StackBlitz examples to `ignorePaths` so Renovate stops opening dependency PRs against frozen examples: + + ```diff + "ignorePaths": [ + "static/code/stackblitz/v6/**", + + "static/code/stackblitz//**" + ] + ``` + + Then remove that version's `@ionic/` `allowedVersions` rule from `packageRules`, since it no longer has anything to match. + +9. **Update the playground generator.** Remove `` from the version choices in [`_templates/playground/new/index.js`](./_templates/playground/new/index.js) so `npm run playground:new` stops offering a version that is no longer built. The choices are bare numbers, without the `v`: + + ```diff + - choices: ['', '8', '9'], + + choices: ['8', '9'], + ``` + +10. **Update the generation scripts.** Remove `` from the write lists in [`scripts/native.mjs`](./scripts/native.mjs) and [`scripts/cli.mjs`](./scripts/cli.mjs), so every build stops regenerating content for a version served from a frozen deployment. The remaining targets are `docs/` (the current version) and the one older version still in `versions.json`. + + _`scripts/native.mjs`_ + + ```diff + writeFileSync(`docs/native/${fileName}`, apiContent); + - writeFileSync(`versioned_docs/version-/native/${fileName}`, apiContent); + writeFileSync(`versioned_docs/version-v8/native/${fileName}`, apiContent); + ``` + + _`scripts/cli.mjs`_ + + ```diff + writeFileSync(`docs/${path}`, data); + - writeFileSync(`versioned_docs/version-/${path}`, data); + writeFileSync(`versioned_docs/version-v8/${path}`, data); + ``` + +11. **Open a PR.** Once merged, the version picker links to the archive and `main` stops building ``. -Removed versions keep their `versioned_docs/` and `versioned_sidebars/` content, so they can be rebuilt anytime by adding them back to `versions.json`. +Removed versions keep their authored `versioned_docs/` and `versioned_sidebars/` content, so they can be rebuilt anytime by adding them back to `versions.json`. Their `native/` and `cli/commands/` pages are generated rather than committed, so a rebuild also needs the version back in the write lists from step 10. Without it those sections build empty. > [!NOTE] > Ionic v3 and v4 use other build tools and are not managed here. diff --git a/_templates/README.md b/_templates/README.md index 60a3ebef83d..943b6966594 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/v8/button/feature/index.md'; +import Feature from '@site/static/usage/v9/button/feature/index.mdx'; ``` diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js index ae892cacad3..00101de7a53 100644 --- a/_templates/playground/new/index.js +++ b/_templates/playground/new/index.js @@ -55,7 +55,7 @@ module.exports = { name: 'version', message: 'Select the Ionic Framework version for the playground', initial: '10', - choices: ['6', '7', '8', '9', '10'], + choices: ['8', '9', '10'], }, { type: 'toggle', @@ -72,7 +72,7 @@ module.exports = { const playgroundName = changeCase.pascal(answers.path.split('/').pop()); console.log( - `\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v${answers.version}/${answers.name}/${answers.path}/index.md';\n\n<${playgroundName} />\n` + `\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v${answers.version}/${answers.name}/${answers.path}/index.mdx';\n\n<${playgroundName} />\n` ); return answers; diff --git a/_templates/playground/new/index.md.ejs.t b/_templates/playground/new/index.mdx.ejs.t similarity index 94% rename from _templates/playground/new/index.md.ejs.t rename to _templates/playground/new/index.mdx.ejs.t index 148d3e85efe..261bd9bcdcb 100644 --- a/_templates/playground/new/index.md.ejs.t +++ b/_templates/playground/new/index.mdx.ejs.t @@ -1,5 +1,5 @@ --- -to: "<%= `static/usage/v${version}/${name}/${path}/index.md` %>" +to: "<%= `static/usage/v${version}/${name}/${path}/index.mdx` %>" --- import Playground from '@site/src/components/global/Playground'; diff --git a/cspell.json b/cspell.json index 57eed251d20..66681e60f72 100644 --- a/cspell.json +++ b/cspell.json @@ -20,6 +20,7 @@ "versioned_docs/**/native", "versioned_docs/version-v5", "versioned_docs/version-v6", + "versioned_docs/version-v7", "node_modules" ], "flagWords": [ diff --git a/docs/angular/build-options.md b/docs/angular/build-options.md index 3c6bc082c5b..f852e122236 100644 --- a/docs/angular/build-options.md +++ b/docs/angular/build-options.md @@ -10,7 +10,9 @@ The Standalone approach uses modern Angular APIs and is the recommended way to b ## Standalone :::info + Ionic UI components as Angular standalone components is supported starting in Ionic v7.5. + ::: ### Overview @@ -30,13 +32,17 @@ Refer to the [Standalone Migration Guide](#migrating-from-modules-to-standalone) 1. Ionic components need to be imported into every Angular component they are used in which can be time consuming to set up. :::info[Code splitting] + Ionic ships standalone components from a single entry point (`@ionic/angular`). Bundlers such as Webpack and esbuild cannot split code from a single entry point across separate chunks, so the Ionic components you import are included in the main bundle rather than in the chunk for the route or component where they are used. Unused components are still tree-shaken out of the build. + ::: ### Usage with Standalone-based Applications :::warning + All Ionic imports should be imported from the `@ionic/angular` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular/lazy` may pull in lazy loaded Ionic code which can interfere with treeshaking. + ::: **Bootstrapping and Configuration** @@ -203,7 +209,9 @@ Ionic Angular's standalone components use ES Modules. As a result, developers us ### Usage with NgModule-based Applications :::warning + All Ionic imports should be imported from the `@ionic/angular` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular/lazy` may pull in lazy loaded Ionic code which can interfere with treeshaking. + ::: **Bootstrapping and Configuration** @@ -366,7 +374,9 @@ Ionic Angular's standalone components use ES Modules. As a result, developers us ## Modules :::warning[Deprecation Notice] + The Modules approach, including `IonicModule`, is **deprecated** and will be removed in a future major release. Existing applications will continue to work during the deprecation period but should migrate using the [Standalone migration guide](#migrating-from-modules-to-standalone). New applications should use the [Standalone](#standalone) approach. + ::: ### Overview @@ -405,9 +415,11 @@ export class AppModule {} ## Migrating from Modules to Standalone :::tip + Try our automated utility for migrating to standalone! Refer to the [standalone migration codemods](https://github.com/ionic-team/ionic-angular-standalone-codemods) for instructions on how to get started. All issues related to the migration utility should be filed on the linked repo. + ::: The Standalone option is newer than the Modules option, so developers may wish to switch during the development of their application. This guide details the steps needed to migrate. diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.md index e56f65dbbf0..a26dac31283 100644 --- a/docs/angular/lifecycle.md +++ b/docs/angular/lifecycle.md @@ -27,7 +27,9 @@ Ionic embraces the life cycle events provided by Angular. The two Angular events For more info on the Angular Component Life Cycle events, visit their [component lifecycle docs](https://angular.io/guide/lifecycle-hooks). :::note + Components that use `ion-nav` or `ion-router-outlet` should not use the `OnPush` change detection strategy. Doing so will prevent lifecycle hooks such as `ngOnInit` from firing. Additionally, asynchronous state changes may not render properly. + ::: ## Ionic Page Events diff --git a/docs/angular/navigation.md b/docs/angular/navigation.md index abc7207f49b..1c1fba26650 100644 --- a/docs/angular/navigation.md +++ b/docs/angular/navigation.md @@ -168,7 +168,9 @@ import { LoginComponent } from './login.component'; ``` :::note + We're excluding some additional content and only including the necessary parts. + ::: Here, we have a typical Angular Module setup, along with a RouterModule import, but we're now using `forChild` and declaring the component in that setup. With this setup, when we run our build, we will produce separate chunks for both the app component, the login component, and the detail component. @@ -194,14 +196,16 @@ export class AppRoutingModule {} ``` :::tip + If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for `` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.md#migrating-from-modules-to-standalone). + ::: To get started with standalone components [visit Angular's official docs](https://angular.io/guide/standalone-components). ## Live Example -import NavigationPlayground from '@site/static/usage/v10/navigation/index.md'; +import NavigationPlayground from '@site/static/usage/v10/navigation/index.mdx'; diff --git a/docs/angular/overlays.md b/docs/angular/overlays.md index 911063b5362..423a91e02ac 100644 --- a/docs/angular/overlays.md +++ b/docs/angular/overlays.md @@ -71,7 +71,10 @@ import { MyRouteService } from './my-route.service'; providers: [MyRouteService], // Service provided at route level }) export class FeatureComponent { - constructor(private modalController: ModalController, private injector: Injector) {} + constructor( + private modalController: ModalController, + private injector: Injector + ) {} async openModal() { const modal = await this.modalController.create({ @@ -113,7 +116,10 @@ import { MyService } from './my.service'; templateUrl: './feature.component.html', }) export class FeatureComponent { - constructor(private modalController: ModalController, private injector: Injector) {} + constructor( + private modalController: ModalController, + private injector: Injector + ) {} async openModal() { const myService = new MyService(); @@ -148,7 +154,10 @@ import { MyModalComponent } from './my-modal.component'; templateUrl: './feature.component.html', }) export class FeatureComponent { - constructor(private modalController: ModalController, private injector: Injector) {} + constructor( + private modalController: ModalController, + private injector: Injector + ) {} async openModal() { const modal = await this.modalController.create({ @@ -174,7 +183,10 @@ import { MyPopoverComponent } from './my-popover.component'; templateUrl: './feature.component.html', }) export class FeatureComponent { - constructor(private popoverController: PopoverController, private injector: Injector) {} + constructor( + private popoverController: PopoverController, + private injector: Injector + ) {} async openPopover(event: Event) { const popover = await this.popoverController.create({ diff --git a/docs/angular/overview.md b/docs/angular/overview.md index 8bc9107a9d5..7cf13ffcdb8 100644 --- a/docs/angular/overview.md +++ b/docs/angular/overview.md @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## Angular Version Support -Ionic Angular v9 supports Angular versions 18 through 21. For detailed information on supported versions and our support policy, refer to the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). +Ionic Angular v9 supports Angular versions 18 through 22. For detailed information on supported versions and our support policy, refer to the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). ## Angular Tooling diff --git a/docs/angular/performance.md b/docs/angular/performance.md index de83b3af578..14ac3db954e 100644 --- a/docs/angular/performance.md +++ b/docs/angular/performance.md @@ -69,5 +69,7 @@ For more information, refer to the [Angular NgForOf change propagation documenta {/* cspell:enable */} :::note + Do you have a guide you'd like to share? Click the _Edit this page_ button below. + ::: diff --git a/docs/angular/pwa.md b/docs/angular/pwa.md index 47666c70309..8f9a3e0b00e 100644 --- a/docs/angular/pwa.md +++ b/docs/angular/pwa.md @@ -13,7 +13,7 @@ sidebar_label: Progressive Web Apps ## Making your Angular app a PWA -The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this. +The two main requirements of a PWA are a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) and a [Web Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/). While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this. The `@angular/pwa` package will automatically add a service worker and an app manifest to the app. To add this package to the app, run: @@ -25,11 +25,15 @@ ng add @angular/pwa Once this package has been added run `ionic build --prod` and the `www` directory will be ready to deploy as a PWA. :::note + By default, the `@angular/pwa` package comes with the Angular logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons. + ::: :::note + Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers. + ::: ## Service Worker configuration @@ -77,7 +81,9 @@ npm install -g firebase-tools ``` :::note + If it's the first time you use firebase-tools, login to your Google account with `firebase login` command. + ::: With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts: @@ -91,7 +97,9 @@ Create a new Firebase project or select an existing one. **"What do you want to use as your public directory?"** Enter "www". :::note + Answering this next question will ensure that routing, hard reload, and deep linking work in the app: + ::: **Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes". diff --git a/docs/angular/quickstart.md b/docs/angular/quickstart.md index e2c74442b9b..a060df0e171 100644 --- a/docs/angular/quickstart.md +++ b/docs/angular/quickstart.md @@ -72,7 +72,9 @@ Your new app's directory will look like this: ``` :::info + All file paths in the examples below are relative to the project root directory. + ::: Let's walk through these files to understand the app's structure. @@ -175,7 +177,9 @@ And the template, in the `home.page.html` file, uses those components: This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. :::tip[Learn More] + For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. + ::: ## Add an Ionic Component @@ -257,7 +261,9 @@ import { RouterLink } from '@angular/router'; ``` :::info + Navigating can also be performed using Angular's Router service. Refer to the [Angular Navigation documentation](/docs/angular/navigation.md#navigating-to-different-routes) for more information. + ::: ## Add Icons to the New Page diff --git a/docs/angular/slides.md b/docs/angular/slides.md index efb46441f4b..bbe68a742f2 100644 --- a/docs/angular/slides.md +++ b/docs/angular/slides.md @@ -14,10 +14,12 @@ import TabItem from '@theme/TabItem'; :::warning[Looking for `ion-slides`?] + `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below. + ::: -We recommend Swiper.js if you need a modern touch slider component. Swiper 9 introduced Swiper Element as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element. +We recommend [Swiper.js](http://swiperjs.com/) if you need a modern touch slider component. Swiper 9 introduced [Swiper Element](https://swiperjs.com/element) as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element. ## Getting Started @@ -71,7 +73,7 @@ From there, we just have to replace `ion-slides` elements with `swiper-container By default, make sure you import the `register` function from `swiper/element/bundle`. This uses the bundled version of Swiper, which automatically includes all modules and stylesheets needed to run Swiper's various features. -If you would like to use the Core version instead, which does not include additional modules automatically, refer to Swiper's core version and modules documentation. The rest of this migration guide will assume you are using the bundled version. +If you would like to use the Core version instead, which does not include additional modules automatically, refer to [Swiper's core version and modules documentation](https://swiperjs.com/element#core-version-and-modules). The rest of this migration guide will assume you are using the bundled version. ## Swiping with Style @@ -93,7 +95,7 @@ If you were using the CSS custom properties found on `ion-slides`, below is a li | `--scroll-bar-background` | `--swiper-scrollbar-bg-color` | | `--scroll-bar-background-active` | `--swiper-scrollbar-drag-bg-color` | -For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. Refer to Swiper's guide on injecting styles for instructions. +For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. Refer to [Swiper's guide on injecting styles](https://swiperjs.com/element#injecting-styles) for instructions. ### Additional `ion-slides` Styles @@ -191,7 +193,9 @@ export class HomePage { ``` :::note + If you are using the Core version of Swiper and have installed additional modules, ensure that `IonicSlides` is the last module in the array. This will let it automatically customize the settings of modules such as Pagination, Scrollbar, Zoom, and more. + ::: ## Properties @@ -227,7 +231,9 @@ Below is a full list of property changes when going from `ion-slides` to Swiper | pager | Use the `pagination` property instead. | :::note -All properties available in Swiper Element can be found in the Swiper API parameters documentation. + +All properties available in Swiper Element can be found in the [Swiper API parameters documentation](https://swiperjs.com/swiper-api#parameters). + ::: ## Events @@ -276,7 +282,9 @@ Below is a full list of event name changes when going from `ion-slides` to Swipe | `ionSlidesDidLoad` | `swiperinit` | :::note -All events available in Swiper Element can be found in the Swiper API events documentation and should be lowercased and prefixed with the word `swiper`. + +All events available in Swiper Element can be found in the [Swiper API events documentation](https://swiperjs.com/swiper-api#events) and should be lowercased and prefixed with the word `swiper`. + ::: ## Methods @@ -328,7 +336,9 @@ Below is a full list of method changes when going from `ion-slides` to Swiper El | `stopAutoplay()` | Use the `autoplay` property instead. | :::note -All methods and properties available on the Swiper instance can be found in the Swiper API methods and properties documentation. + +All methods and properties available on the Swiper instance can be found in the [Swiper API methods and properties documentation](https://swiperjs.com/swiper-api#methods-and-properties). + ::: ## Effects @@ -340,12 +350,14 @@ Effects such as Cube or Fade can be used in Swiper Element with no additional im ``` :::note -For more information on effects in Swiper, please refer to the Swiper API fade effect documentation. + +For more information on effects in Swiper, please refer to the [Swiper API fade effect documentation](https://swiperjs.com/swiper-api#fade-effect). + ::: ## Wrap Up -Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the Swiper Element documentation and then referencing the Swiper API docs. +Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the [Swiper Element documentation](https://swiperjs.com/element) and then referencing [the Swiper API docs](https://swiperjs.com/swiper-api). ## FAQ @@ -359,8 +371,8 @@ If you are running into issues with the migration, please create a post on the [ ### Where do I file bug reports? -Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to check if your issue can be resolved by the community. +Before opening an issue, please consider creating a post on the [Swiper Discussion Board](https://github.com/nolimits4web/swiper/discussions) or the [Ionic Forum](https://forum.ionicframework.com) to check if your issue can be resolved by the community. -If you are running into problems with the Swiper library, new bugs should be filed on the Swiper issue tracker. +If you are running into problems with the Swiper library, new bugs should be filed on the [Swiper issue tracker](https://github.com/nolimits4web/swiper/issues). -If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework issue tracker. +If you are running into problems with the `IonicSlides` module, new bugs should be filed on the [Ionic Framework issue tracker](https://github.com/ionic-team/ionic-framework/issues). diff --git a/docs/angular/storage.md b/docs/angular/storage.md index b7774589e80..85ff56b9ae8 100644 --- a/docs/angular/storage.md +++ b/docs/angular/storage.md @@ -14,7 +14,9 @@ sidebar_label: Storage There are a variety of options available for storing data within an Ionic application. It is best to choose options that best fit the needs of your application. A single application may have requirements that span multiple options. :::info + Some storage options involve third-party plugins or products. In such cases, we neither endorse nor support those plugins or products. We are mentioning them here for informational purposes only. + ::: Here are some common use cases and solutions: diff --git a/docs/angular/testing.md b/docs/angular/testing.md index e11d91d4b04..7fd3668a467 100644 --- a/docs/angular/testing.md +++ b/docs/angular/testing.md @@ -10,7 +10,7 @@ title: Testing /> -When an `@ionic/angular` application is generated using the Ionic CLI, it is automatically set up for unit testing and end-to-end testing of the application. This is the same setup that is used by the Angular CLI. Refer to the Angular Testing Guide for detailed information on testing Angular applications. +When an `@ionic/angular` application is generated using the Ionic CLI, it is automatically set up for unit testing and end-to-end testing of the application. This is the same setup that is used by the Angular CLI. Refer to the [Angular Testing Guide](https://angular.io/guide/testing) for detailed information on testing Angular applications. ## Testing Principles @@ -76,7 +76,7 @@ The outer `describe` call states that the `Calculation` service is being tested, ### Pages and Components -Pages are just Angular components. Thus, pages and components are both tested using Angular's Component Testing guidelines. +Pages are just Angular components. Thus, pages and components are both tested using [Angular's Component Testing](https://angular.io/guide/testing#component-test-basics) guidelines. Since pages and components contain both TypeScript code and HTML template markup it is possible to perform both component class testing and component DOM testing. When a page is created, the template test that is generated looks like this: @@ -208,7 +208,7 @@ describe('PayrolService', () => { #### Testing HTTP Data Services -Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please refer to Angular's Angular's Testing HTTP requests guide. +Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please refer to Angular's [Angular's Testing HTTP requests](https://angular.io/guide/http#testing-http-requests) guide. This basic setup for such a test looks like this: diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.md index e21a9458f36..e59d85e9b69 100644 --- a/docs/angular/your-first-app.md +++ b/docs/angular/your-first-app.md @@ -25,7 +25,9 @@ Here’s the finished app running on all 3 platforms: > :::note + Looking for the previous version of this guide that covered Ionic 4 and Cordova? Refer to the [Ionic 4 and Cordova guide](../developer-resources/guides/first-app-v4/intro.md). + ::: ## What We'll Build @@ -55,7 +57,9 @@ Download and install these right away to ensure an optimal Ionic development exp Run the following in the command line terminal to install the Ionic CLI (`ionic`), `native-run`, used to run native binaries on devices and simulators/emulators, and `cordova-res`, used to generate native app icons and splash screens: :::note + To open a terminal in Visual Studio Code, go to Terminal -> New Terminal. + ::: ```shell @@ -63,9 +67,11 @@ npm install -g @ionic/cli native-run cordova-res ``` :::note + The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. + ::: ## Create an App diff --git a/docs/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.md index 92ffeeb2b36..3ce57cbd0b3 100644 --- a/docs/angular/your-first-app/2-taking-photos.md +++ b/docs/angular/your-first-app/2-taking-photos.md @@ -105,7 +105,9 @@ export class Tab2Page { ``` :::note + In a standalone app there is no global icon registry, so each icon you reference by name (like `camera`) must be registered with `addIcons`. Import the specific Ionic components a page uses from `@ionic/angular` and list them in the component's `imports` array. + ::: Then, open `tab2.page.html` and call the `addPhotoToGallery()` method when the FAB is tapped/clicked: diff --git a/docs/angular/your-first-app/3-saving-photos.md b/docs/angular/your-first-app/3-saving-photos.md index 2986081b7f4..4eb1fdfef95 100644 --- a/docs/angular/your-first-app/3-saving-photos.md +++ b/docs/angular/your-first-app/3-saving-photos.md @@ -90,7 +90,7 @@ We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. -For now, create a new helper method, `convertBlobToBase64()`, to implement the necessary logic for running on the web. +Create a new helper method, `base64FromPath()`, to implement the necessary logic for running on the web: ```ts import { Injectable } from '@angular/core'; @@ -107,10 +107,7 @@ export class PhotoService { // CHANGE: Update the `savePicture()` method private async savePicture(photo: Photo) { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - const base64Data = (await this.convertBlobToBase64(blob)) as string; + const base64Data = await this.base64FromPath(photo.webPath!); // Write the file to the data directory const fileName = Date.now() + '.jpeg'; @@ -128,13 +125,19 @@ export class PhotoService { }; } - // CHANGE: Add the `convertBlobToBase64` method - private convertBlobToBase64(blob: Blob) { + // CHANGE: Add the `base64FromPath()` method + private async base64FromPath(path: string): Promise { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); @@ -176,10 +179,7 @@ export class PhotoService { } private async savePicture(photo: Photo) { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - const base64Data = (await this.convertBlobToBase64(blob)) as string; + const base64Data = await this.base64FromPath(photo.webPath!); // Write the file to the data directory const fileName = Date.now() + '.jpeg'; @@ -197,12 +197,18 @@ export class PhotoService { }; } - private convertBlobToBase64(blob: Blob) { + private async base64FromPath(path: string): Promise { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); diff --git a/docs/angular/your-first-app/4-loading-photos.md b/docs/angular/your-first-app/4-loading-photos.md index 1855f976c54..f5ea15d6ed6 100644 --- a/docs/angular/your-first-app/4-loading-photos.md +++ b/docs/angular/your-first-app/4-loading-photos.md @@ -105,13 +105,13 @@ export class PhotoService { // CHANGE: Display the photo by reading into base64 format for (const photo of photos) { // Read each saved photo's data from the Filesystem - const readFile = await Filesystem.readFile({ + const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data, }); // Web platform only: Load the photo as base64 data - photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; + photo.webviewPath = `data:image/jpeg;base64,${file.data}`; } // CHANGE: Set the signal so the gallery view updates @@ -157,10 +157,7 @@ export class PhotoService { } private async savePicture(photo: Photo) { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - const base64Data = (await this.convertBlobToBase64(blob)) as string; + const base64Data = await this.base64FromPath(photo.webPath!); // Write the file to the data directory const fileName = Date.now() + '.jpeg'; @@ -178,12 +175,18 @@ export class PhotoService { }; } - private convertBlobToBase64(blob: Blob) { + private async base64FromPath(path: string): Promise { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); @@ -196,13 +199,13 @@ export class PhotoService { for (const photo of photos) { // Read each saved photo's data from the Filesystem - const readFile = await Filesystem.readFile({ + const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data, }); // Web platform only: Load the photo as base64 data - photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; + photo.webviewPath = `data:image/jpeg;base64,${file.data}`; } this.photos.set(photos); @@ -262,9 +265,11 @@ export class Tab2Page implements OnInit { ``` :::note + If you encounter broken image links or missing photos after following these steps, you may need to open your browser's dev tools and clear both [localStorage](https://developer.chrome.com/docs/devtools/storage/localstorage) and [IndexedDB](https://developer.chrome.com/docs/devtools/storage/indexeddb). In localStorage, look for domain `http://localhost:8100` and key `CapacitorStorage.photos`. In IndexedDB, find a store called "FileStorage". Your photos will have a key like `/DATA/123456789012.jpeg`. + ::: That’s it! We’ve built a complete Photo Gallery feature in our Ionic app that works on the web. Next up, we’ll transform it into a mobile app for iOS and Android! diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.md index ce7c3480d17..2ac9768a4b8 100644 --- a/docs/angular/your-first-app/5-adding-mobile.md +++ b/docs/angular/your-first-app/5-adding-mobile.md @@ -65,10 +65,7 @@ private async savePicture(photo: Photo) { }); base64Data = file.data; } else { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - base64Data = await this.convertBlobToBase64(blob) as string; + base64Data = await this.base64FromPath(photo.webPath!); } // Write the file to the data directory @@ -116,10 +113,7 @@ private async savePicture(photo: Photo) { }); base64Data = file.data; } else { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - base64Data = await this.convertBlobToBase64(blob) as string; + base64Data = await this.base64FromPath(photo.webPath!); } // Write the file to the data directory @@ -160,13 +154,13 @@ public async loadSaved() { // If running on the web... if (!this.platform.is('hybrid')) { for (const photo of photos) { - const readFile = await Filesystem.readFile({ + const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data }); // Web platform only: Load the photo as base64 data - photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; + photo.webviewPath = `data:image/jpeg;base64,${file.data}`; } } @@ -228,11 +222,7 @@ export class PhotoService { base64Data = file.data; } else { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - - base64Data = (await this.convertBlobToBase64(blob)) as string; + base64Data = await this.base64FromPath(photo.webPath!); } // Write the file to the data directory @@ -259,12 +249,18 @@ export class PhotoService { } } - private convertBlobToBase64(blob: Blob) { + private async base64FromPath(path: string): Promise { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); @@ -278,12 +274,12 @@ export class PhotoService { // If running on the web... if (!this.platform.is('hybrid')) { for (const photo of photos) { - const readFile = await Filesystem.readFile({ + const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data, }); // Web platform only: Load the photo as base64 data - photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; + photo.webviewPath = `data:image/jpeg;base64,${file.data}`; } } diff --git a/docs/angular/your-first-app/6-deploying-mobile.md b/docs/angular/your-first-app/6-deploying-mobile.md index 11bf04154b0..b7ad08e6920 100644 --- a/docs/angular/your-first-app/6-deploying-mobile.md +++ b/docs/angular/your-first-app/6-deploying-mobile.md @@ -47,7 +47,9 @@ ionic cap sync ## iOS Deployment :::important + To build an iOS app, you’ll need a Mac computer. + ::: Capacitor iOS apps are configured and managed through Xcode (Apple’s iOS/Mac IDE), with dependencies managed by [CocoaPods](https://cocoapods.org/). Before running this app on an iOS device, there's a couple of steps to complete. diff --git a/docs/angular/your-first-app/7-live-reload.md b/docs/angular/your-first-app/7-live-reload.md index 7a697854dcc..2d3a9462cf8 100644 --- a/docs/angular/your-first-app/7-live-reload.md +++ b/docs/angular/your-first-app/7-live-reload.md @@ -217,7 +217,9 @@ button img { Tap on a photo again and choose the “Delete” option. The photo is deleted! Implemented much faster using Live Reload. 💪 :::note + Remember, you can find the [complete source code for this app](https://github.com/ionic-team/tutorial-photo-gallery-angular) on GitHub. + ::: In the final portion of this tutorial, we’ll walk you through the basics of the Appflow product used to build and deploy your application to users' devices. diff --git a/docs/angular/zoneless.md b/docs/angular/zoneless.md index bbcb5031ab5..6d13b6d6fe3 100644 --- a/docs/angular/zoneless.md +++ b/docs/angular/zoneless.md @@ -27,7 +27,9 @@ You do not need to change these. Angular schedules change detection for them in - Navigation, route transitions, and tab switching. :::note[Angular 22] + Angular 22 also makes `OnPush` the default change detection strategy. Under `OnPush`, synchronous state set as a plain field (including in the lifecycle hooks above) no longer re-renders on its own, even though Ionic notifies Angular. Signals still update the view. For the migration path, refer to the [OnPush Change Detection section of the Ionic 9 upgrade guide](/docs/updating/9-0.md#onpush-change-detection-on-angular-22). + ::: ## What needs a notification @@ -81,7 +83,9 @@ import { ChangeDetectorRef, Component, inject } from '@angular/core'; @Component({ selector: 'app-list', - template: `@for (item of items; track item) { {{ item }} }`, + template: `@for (item of items; track item) { + {{ item }} + }`, }) export class ListPage { private cdr = inject(ChangeDetectorRef); @@ -113,7 +117,7 @@ Content projected into an inline `ion-modal` or `ion-popover` follows the same r @for (item of items(); track item) { - {{ item }} + {{ item }} } diff --git a/docs/api/accordion-group.md b/docs/api/accordion-group.md index ccc97e7bed9..e5ac64dc415 100644 --- a/docs/api/accordion-group.md +++ b/docs/api/accordion-group.md @@ -1,12 +1,13 @@ --- -title: "ion-accordion-group" +title: 'ion-accordion-group' --- -import Props from '@ionic-internal/component-api/v10/accordion-group/props.md'; -import Events from '@ionic-internal/component-api/v10/accordion-group/events.md'; -import Methods from '@ionic-internal/component-api/v10/accordion-group/methods.md'; -import Parts from '@ionic-internal/component-api/v10/accordion-group/parts.md'; + +import Props from '@ionic-internal/component-api/v10/accordion-group/props.mdx'; +import Events from '@ionic-internal/component-api/v10/accordion-group/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/accordion-group/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/accordion-group/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/accordion-group/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/accordion-group/slots.md'; +import Slots from '@ionic-internal/component-api/v10/accordion-group/slots.mdx'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -16,7 +17,6 @@ Accordion group is a container for accordion instances. It manages the state of Refer to the [Accordion](./accordion) documentation for more information. - ## Interfaces ### AccordionGroupChangeEventDetail @@ -38,22 +38,26 @@ interface AccordionGroupCustomEvent extends CustomEvent { } ``` - - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/accordion.md b/docs/api/accordion.md index be8ce06ca10..8d301027b52 100644 --- a/docs/api/accordion.md +++ b/docs/api/accordion.md @@ -1,28 +1,31 @@ --- -title: "ion-accordion" +title: 'ion-accordion' --- -import Props from '@ionic-internal/component-api/v10/accordion/props.md'; -import Events from '@ionic-internal/component-api/v10/accordion/events.md'; -import Methods from '@ionic-internal/component-api/v10/accordion/methods.md'; -import Parts from '@ionic-internal/component-api/v10/accordion/parts.md'; + +import Props from '@ionic-internal/component-api/v10/accordion/props.mdx'; +import Events from '@ionic-internal/component-api/v10/accordion/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/accordion/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/accordion/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/accordion/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/accordion/slots.md'; +import Slots from '@ionic-internal/component-api/v10/accordion/slots.mdx'; ion-accordion: Accordion Components: How to Build & Examples - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information. All `ion-accordion` components should be grouped inside `ion-accordion-group` components. ## Basic Usage -import Basic from '@site/static/usage/v10/accordion/basic/index.md'; +import Basic from '@site/static/usage/v10/accordion/basic/index.mdx'; @@ -30,21 +33,23 @@ import Basic from '@site/static/usage/v10/accordion/basic/index.md'; Which accordion is open is controlled by setting the `value` property on `ion-accordion-group`. Setting this property allows developers to programmatically expand or collapse certain accordions. -import Toggle from '@site/static/usage/v10/accordion/toggle/index.md'; +import Toggle from '@site/static/usage/v10/accordion/toggle/index.mdx'; ## Listen for Accordion State Changes :::caution + Most `ionChange` events emitted by other components such as [Input](./input) and [Textarea](./textarea) bubble. As a result, these events will bubble up and cause your `ionChange` listener on the Accordion Group to fire if the associated components are used inside of an Accordion. When using other components that emit `ionChange` inside of Accordion it is recommended to have the `ionChange` callback on Accordion Group check the `target` key on the event passed to the callback to verify that `ionChange` is coming from the Accordion Group and not any descendants. + ::: Developers can listen for the `ionChange` event to be notified when accordions expand or collapse. -import ListenChanges from '@site/static/usage/v10/accordion/listen-changes/index.md'; +import ListenChanges from '@site/static/usage/v10/accordion/listen-changes/index.mdx'; @@ -52,7 +57,7 @@ import ListenChanges from '@site/static/usage/v10/accordion/listen-changes/index Developers can allow multiple accordions to be open at once with the `multiple` property. -import Multiple from '@site/static/usage/v10/accordion/multiple/index.md'; +import Multiple from '@site/static/usage/v10/accordion/multiple/index.mdx'; @@ -62,7 +67,7 @@ import Multiple from '@site/static/usage/v10/accordion/multiple/index.md'; Individual accordions can be disabled with the `disabled` property on `ion-accordion`. -import DisableIndividual from '@site/static/usage/v10/accordion/disable/individual/index.md'; +import DisableIndividual from '@site/static/usage/v10/accordion/disable/individual/index.mdx'; @@ -70,7 +75,7 @@ import DisableIndividual from '@site/static/usage/v10/accordion/disable/individu The accordion group can be disabled with the `disabled` property on `ion-accordion-group`. -import DisableGroup from '@site/static/usage/v10/accordion/disable/group/index.md'; +import DisableGroup from '@site/static/usage/v10/accordion/disable/group/index.mdx'; @@ -80,7 +85,7 @@ import DisableGroup from '@site/static/usage/v10/accordion/disable/group/index.m Individual accordions can be disabled with the `readonly` property on `ion-accordion`. -import ReadonlyIndividual from '@site/static/usage/v10/accordion/readonly/individual/index.md'; +import ReadonlyIndividual from '@site/static/usage/v10/accordion/readonly/individual/index.mdx'; @@ -88,7 +93,7 @@ import ReadonlyIndividual from '@site/static/usage/v10/accordion/readonly/indivi The accordion group can be disabled with the `readonly` property on `ion-accordion-group`. -import ReadonlyGroup from '@site/static/usage/v10/accordion/readonly/group/index.md'; +import ReadonlyGroup from '@site/static/usage/v10/accordion/readonly/group/index.mdx'; @@ -112,7 +117,7 @@ There are two built in expansion styles: `compact` and `inset`. This expansion s When `expand="inset"`, the accordion group is given a border radius. On `md` mode, the entire accordion will shift down when it is opened. -import ExpansionStyles from '@site/static/usage/v10/accordion/customization/expansion-styles/index.md'; +import ExpansionStyles from '@site/static/usage/v10/accordion/customization/expansion-styles/index.mdx'; @@ -120,23 +125,23 @@ import ExpansionStyles from '@site/static/usage/v10/accordion/customization/expa You can customize the expansion behavior by styling based on the accordion's state. There are four state classes applied to `ion-accordion`. Styling using these classes can allow you to create advanced state transitions: -| Class Name | Description | -| ---------- | ----------- | -| `.accordion-expanding` | Applied when the accordion is actively expanding | -| `.accordion-expanded` | Applied when the accordion is fully expanded | +| Class Name | Description | +| ----------------------- | ------------------------------------------------- | +| `.accordion-expanding` | Applied when the accordion is actively expanding | +| `.accordion-expanded` | Applied when the accordion is fully expanded | | `.accordion-collapsing` | Applied when the accordion is actively collapsing | -| `.accordion-collapsed` | Applied when the accordion is fully collapsed | +| `.accordion-collapsed` | Applied when the accordion is fully collapsed | If you need to target specific pieces of the accordion, we recommend targeting the element directly. For example, if you want to customize the ion-item in your header slot when the accordion is expanded, you can use the following selector: ```css -ion-accordion.accordion-expanding ion-item[slot="header"], -ion-accordion.accordion-expanded ion-item[slot="header"] { +ion-accordion.accordion-expanding ion-item[slot='header'], +ion-accordion.accordion-expanded ion-item[slot='header'] { --color: red; } ``` -import AdvancedExpansionStyles from '@site/static/usage/v10/accordion/customization/advanced-expansion-styles/index.md'; +import AdvancedExpansionStyles from '@site/static/usage/v10/accordion/customization/advanced-expansion-styles/index.mdx'; @@ -148,7 +153,7 @@ If you would like to manage the icon yourself or use an icon that is not an `ion Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion. -import Icons from '@site/static/usage/v10/accordion/customization/icons/index.md'; +import Icons from '@site/static/usage/v10/accordion/customization/icons/index.mdx'; @@ -156,7 +161,7 @@ import Icons from '@site/static/usage/v10/accordion/customization/icons/index.md Since `ion-accordion` acts as a shell around the header and content elements, you can easily theme the accordion however you would like. You can theme the header by targeting the slotted `ion-item`. Since you are using `ion-item`, you also have access to all of the [ion-item CSS Variables](./item#css-custom-properties) and [ion-item Shadow Parts](./item#css-shadow-parts). Theming the content is also easily achieved by targeting the element that is in the `content` slot. -import Theming from '@site/static/usage/v10/accordion/customization/theming/index.md'; +import Theming from '@site/static/usage/v10/accordion/customization/theming/index.mdx'; @@ -166,7 +171,7 @@ import Theming from '@site/static/usage/v10/accordion/customization/theming/inde By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the `prefers-reduced-motion` media query is supported and set to `reduce`. For browsers that do not support this, animations can be disabled by setting the `animated` config in your Ionic Framework app. -import AccessibilityAnimations from '@site/static/usage/v10/accordion/accessibility/animations/index.md'; +import AccessibilityAnimations from '@site/static/usage/v10/accordion/accessibility/animations/index.mdx'; @@ -174,15 +179,15 @@ import AccessibilityAnimations from '@site/static/usage/v10/accordion/accessibil When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard support for interacting with the component. The following table details what each key does: -| Key | Description | -| ------------------------------------ | ------------------------------------------------------------ | -| Space or Enter | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. | -| Tab | Moves focus to the next focusable element. | -| Shift + Tab | Moves focus to the previous focusable element. | -| Down Arrow | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. | -| Up Arrow | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. | -| Home | When focus is on an accordion header, moves focus to the first accordion header. | -| End | When focus is on an accordion header, moves focus to the last accordion header. | +| Key | Description | +| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Space or Enter | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Down Arrow | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. | +| Up Arrow | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. | +| Home | When focus is on an accordion header, moves focus to the first accordion header. | +| End | When focus is on an accordion header, moves focus to the last accordion header. | ## Performance @@ -199,19 +204,25 @@ For example, lazily loading images may cause layout shifts as they load. As the 3. If neither of these options are applicable, developers may want to consider disabling animations altogether by using the `animated` property on [ion-accordion-group](./accordion-group). ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md index f5868732505..18c4e844df4 100644 --- a/docs/api/action-sheet.md +++ b/docs/api/action-sheet.md @@ -1,33 +1,36 @@ --- -title: "ion-action-sheet" +title: 'ion-action-sheet' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import Props from '@ionic-internal/component-api/v10/action-sheet/props.md'; -import Events from '@ionic-internal/component-api/v10/action-sheet/events.md'; -import Methods from '@ionic-internal/component-api/v10/action-sheet/methods.md'; -import Parts from '@ionic-internal/component-api/v10/action-sheet/parts.md'; +import Props from '@ionic-internal/component-api/v10/action-sheet/props.mdx'; +import Events from '@ionic-internal/component-api/v10/action-sheet/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/action-sheet/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/action-sheet/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/action-sheet/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/action-sheet/slots.md'; +import Slots from '@ionic-internal/component-api/v10/action-sheet/slots.mdx'; ion-action-sheet: Action Sheet Dialog for iOS and Android - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop. ## Inline Action Sheets (Recommended) `ion-action-sheet` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Action Sheet. -import Trigger from '@site/static/usage/v10/action-sheet/inline/trigger/index.md'; +import Trigger from '@site/static/usage/v10/action-sheet/inline/trigger/index.mdx'; @@ -37,7 +40,7 @@ The `isOpen` property on `ion-action-sheet` allows developers to control the pre `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Action Sheet is dismissed. Developers should listen for the `ionActionSheetDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-action-sheet` from being tightly coupled with the state of the application. With a one way data binding, the Action Sheet only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Action Sheet needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug. -import IsOpen from '@site/static/usage/v10/action-sheet/inline/isOpen/index.md'; +import IsOpen from '@site/static/usage/v10/action-sheet/inline/isOpen/index.mdx'; @@ -45,7 +48,7 @@ import IsOpen from '@site/static/usage/v10/action-sheet/inline/isOpen/index.md'; The `actionSheetController` can be used in situations where more control is needed over when the Action Sheet is presented and dismissed. -import Controller from '@site/static/usage/v10/action-sheet/controller/index.md'; +import Controller from '@site/static/usage/v10/action-sheet/controller/index.mdx'; @@ -59,7 +62,7 @@ A button can also be passed data via the `data` property on `ActionSheetButton`. When the `didDismiss` event is fired, the `data` and `role` fields of the event detail can be used to gather information about how the Action Sheet was dismissed. -import RoleInfo from '@site/static/usage/v10/action-sheet/role-info-on-dismiss/index.md'; +import RoleInfo from '@site/static/usage/v10/action-sheet/role-info-on-dismiss/index.mdx'; @@ -83,7 +86,7 @@ We recommend passing a custom class to `cssClass` in the `create` method and usi } ``` -import Styling from '@site/static/usage/v10/action-sheet/theming/styling/index.md'; +import Styling from '@site/static/usage/v10/action-sheet/theming/styling/index.mdx'; @@ -91,7 +94,7 @@ import Styling from '@site/static/usage/v10/action-sheet/theming/styling/index.m Any of the defined [CSS Custom Properties](#css-custom-properties-1) can be used to style the Action Sheet without needing to target individual elements. -import CssCustomProperties from '@site/static/usage/v10/action-sheet/theming/css-properties/index.md'; +import CssCustomProperties from '@site/static/usage/v10/action-sheet/theming/css-properties/index.mdx'; @@ -280,19 +283,25 @@ interface ActionSheetOptions { ``` ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/alert.md b/docs/api/alert.md index afcd97dcefb..d68636539ed 100644 --- a/docs/api/alert.md +++ b/docs/api/alert.md @@ -1,19 +1,23 @@ --- -title: "ion-alert" +title: 'ion-alert' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import Props from '@ionic-internal/component-api/v10/alert/props.md'; -import Events from '@ionic-internal/component-api/v10/alert/events.md'; -import Methods from '@ionic-internal/component-api/v10/alert/methods.md'; -import Parts from '@ionic-internal/component-api/v10/alert/parts.md'; +import Props from '@ionic-internal/component-api/v10/alert/props.mdx'; +import Events from '@ionic-internal/component-api/v10/alert/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/alert/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/alert/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/alert/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/alert/slots.md'; +import Slots from '@ionic-internal/component-api/v10/alert/slots.mdx'; ion-alert: Ionic Alert Buttons with Custom Message Prompts - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -26,7 +30,7 @@ An Alert is a dialog that presents users with information or collects informatio `ion-alert` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Alert. -import Trigger from '@site/static/usage/v10/alert/presenting/trigger/index.md'; +import Trigger from '@site/static/usage/v10/alert/presenting/trigger/index.mdx'; @@ -36,7 +40,7 @@ The `isOpen` property on `ion-alert` allows developers to control the presentati `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Alert is dismissed. Developers should listen for the `ionAlertDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-alert` from being tightly coupled with the state of the application. With a one way data binding, the Alert only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Alert needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug. -import IsOpen from '@site/static/usage/v10/alert/presenting/isOpen/index.md'; +import IsOpen from '@site/static/usage/v10/alert/presenting/isOpen/index.mdx'; @@ -44,7 +48,7 @@ import IsOpen from '@site/static/usage/v10/alert/presenting/isOpen/index.md'; The `alertController` can be used in situations where more control is needed over when the Alert is presented and dismissed. -import Controller from '@site/static/usage/v10/alert/presenting/controller/index.md'; +import Controller from '@site/static/usage/v10/alert/presenting/controller/index.mdx'; @@ -54,24 +58,23 @@ In the array of `buttons`, each button includes properties for its `text`, and o Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role. -import Buttons from '@site/static/usage/v10/alert/buttons/index.md'; +import Buttons from '@site/static/usage/v10/alert/buttons/index.mdx'; - ## Inputs Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead. ### Text Inputs Example -import TextInputs from '@site/static/usage/v10/alert/inputs/text-inputs/index.md'; +import TextInputs from '@site/static/usage/v10/alert/inputs/text-inputs/index.mdx'; ### Radio Example -import Radios from '@site/static/usage/v10/alert/inputs/radios/index.md'; +import Radios from '@site/static/usage/v10/alert/inputs/radios/index.mdx'; @@ -101,12 +104,14 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t } ``` -import Customization from '@site/static/usage/v10/alert/customization/index.md'; +import Customization from '@site/static/usage/v10/alert/customization/index.mdx'; :::note - If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. + +If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. + ::: ## Accessibility @@ -181,7 +186,6 @@ const alert = await alertController.create({ - All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of the Alert. #### Alert Buttons Description @@ -281,7 +285,6 @@ interface AlertButton { } ``` - ### AlertInput ```typescript @@ -306,7 +309,6 @@ interface AlertInput { } ``` - ### AlertOptions ```typescript @@ -332,19 +334,25 @@ interface AlertOptions { ``` ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/app.md b/docs/api/app.md index 9f6d4bbc7f0..7614a5374b4 100644 --- a/docs/api/app.md +++ b/docs/api/app.md @@ -1,16 +1,20 @@ --- -title: "ion-app" +title: 'ion-app' --- -import Props from '@ionic-internal/component-api/v10/app/props.md'; -import Events from '@ionic-internal/component-api/v10/app/events.md'; -import Methods from '@ionic-internal/component-api/v10/app/methods.md'; -import Parts from '@ionic-internal/component-api/v10/app/parts.md'; + +import Props from '@ionic-internal/component-api/v10/app/props.mdx'; +import Events from '@ionic-internal/component-api/v10/app/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/app/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/app/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/app/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/app/slots.md'; +import Slots from '@ionic-internal/component-api/v10/app/slots.mdx'; ion-app: Container Element for an Ionic Application - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -19,35 +23,41 @@ App is a container element for an Ionic application. There should only be one `< Using `ion-app` enables the following behaviors: -* [Keyboard Lifecycle Events](../developing/keyboard#keyboard-lifecycle-events) without the need for any native plugins -* [Hardware Back Button Listeners](../developing/hardware-back-button) for customizing the hardware back button behavior on Android devices -* Status bar support in Capacitor or Cordova which allows users to scroll to the top of the view by tapping the status bar -* Scroll assist utilities which scroll the content so focused text inputs are not covered by the on-screen keyboard -* [Ripple effect](./ripple-effect) when activating buttons on Material Design mode -* Other tap and focus utilities which make the experience of using an Ionic app feel more native +- [Keyboard Lifecycle Events](../developing/keyboard#keyboard-lifecycle-events) without the need for any native plugins +- [Hardware Back Button Listeners](../developing/hardware-back-button) for customizing the hardware back button behavior on Android devices +- Status bar support in Capacitor or Cordova which allows users to scroll to the top of the view by tapping the status bar +- Scroll assist utilities which scroll the content so focused text inputs are not covered by the on-screen keyboard +- [Ripple effect](./ripple-effect) when activating buttons on Material Design mode +- Other tap and focus utilities which make the experience of using an Ionic app feel more native ## Programmatic Focus Ionic offers focus utilities for components with the `ion-focusable` class. These utilities automatically manage focus for components when certain keyboard keys, like Tab, are pressed. Components can also be programmatically focused in response to user actions using the `setFocus` method from `ion-app`. -import SetFocus from '@site/static/usage/v10/app/set-focus/index.md'; +import SetFocus from '@site/static/usage/v10/app/set-focus/index.mdx'; ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/avatar.md b/docs/api/avatar.md index 622a12f06fd..b1449c19baa 100644 --- a/docs/api/avatar.md +++ b/docs/api/avatar.md @@ -1,17 +1,20 @@ --- -title: "ion-avatar" +title: 'ion-avatar' --- -import Props from '@ionic-internal/component-api/v10/avatar/props.md'; -import Events from '@ionic-internal/component-api/v10/avatar/events.md'; -import Methods from '@ionic-internal/component-api/v10/avatar/methods.md'; -import Parts from '@ionic-internal/component-api/v10/avatar/parts.md'; +import Props from '@ionic-internal/component-api/v10/avatar/props.mdx'; +import Events from '@ionic-internal/component-api/v10/avatar/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/avatar/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/avatar/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/avatar/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/avatar/slots.md'; +import Slots from '@ionic-internal/component-api/v10/avatar/slots.mdx'; ion-avatar: Circular Application Avatar Icon Component - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -24,19 +27,19 @@ Avatars can be used by themselves or inside of any element. If placed inside of ## Basic Usage -import Basic from '@site/static/usage/v10/avatar/basic/index.md'; +import Basic from '@site/static/usage/v10/avatar/basic/index.mdx'; ## Chip Avatar -import Chip from '@site/static/usage/v10/avatar/chip/index.md'; +import Chip from '@site/static/usage/v10/avatar/chip/index.mdx'; ## Item Avatar -import Item from '@site/static/usage/v10/avatar/item/index.md'; +import Item from '@site/static/usage/v10/avatar/item/index.mdx'; @@ -44,24 +47,30 @@ import Item from '@site/static/usage/v10/avatar/item/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v10/avatar/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v10/avatar/theming/css-properties/index.mdx'; ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/back-button.md b/docs/api/back-button.md index d9a8cb6b822..25d11285181 100644 --- a/docs/api/back-button.md +++ b/docs/api/back-button.md @@ -1,28 +1,31 @@ --- -title: "ion-back-button" +title: 'ion-back-button' --- -import Props from '@ionic-internal/component-api/v10/back-button/props.md'; -import Events from '@ionic-internal/component-api/v10/back-button/events.md'; -import Methods from '@ionic-internal/component-api/v10/back-button/methods.md'; -import Parts from '@ionic-internal/component-api/v10/back-button/parts.md'; + +import Props from '@ionic-internal/component-api/v10/back-button/props.mdx'; +import Events from '@ionic-internal/component-api/v10/back-button/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/back-button/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/back-button/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/back-button/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/back-button/slots.md'; +import Slots from '@ionic-internal/component-api/v10/back-button/slots.mdx'; ion-back-button: Custom Menu Back Button for Applications - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - The back button navigates back in the app's history when clicked. It is only displayed when there is history in the navigation stack, unless [`defaultHref`](#default-back-history) is set. The back button displays different text and icon based on the mode, but this can be customized. ## Basic Usage -import Basic from '@site/static/usage/v10/back-button/basic/index.md'; +import Basic from '@site/static/usage/v10/back-button/basic/index.mdx'; @@ -30,7 +33,7 @@ import Basic from '@site/static/usage/v10/back-button/basic/index.md'; By default, the back button will display the text `"Back"` with a `"chevron-back"` icon on `ios`, and an `"arrow-back-sharp"` icon on `md`. This can be customized per back button component by setting the `icon` or `text` properties. Alternatively, it can be set globally using the `backButtonIcon` or `backButtonText` properties in the global config. Refer to the [Config docs](../developing/config) for more information. -import Custom from '@site/static/usage/v10/back-button/custom/index.md'; +import Custom from '@site/static/usage/v10/back-button/custom/index.mdx'; @@ -39,19 +42,25 @@ import Custom from '@site/static/usage/v10/back-button/custom/index.md'; Occasionally an app may need to show the back button and navigate back when there is no history. This can be done by setting the `defaultHref` on the back button to a path. In order to use `defaultHref`, the app must contain a router with paths set. ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md index f6f19ecaf03..02c5e0cbd26 100644 --- a/docs/api/backdrop.md +++ b/docs/api/backdrop.md @@ -1,12 +1,13 @@ --- -title: "ion-backdrop" +title: 'ion-backdrop' --- -import Props from '@ionic-internal/component-api/v10/backdrop/props.md'; -import Events from '@ionic-internal/component-api/v10/backdrop/events.md'; -import Methods from '@ionic-internal/component-api/v10/backdrop/methods.md'; -import Parts from '@ionic-internal/component-api/v10/backdrop/parts.md'; + +import Props from '@ionic-internal/component-api/v10/backdrop/props.mdx'; +import Events from '@ionic-internal/component-api/v10/backdrop/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/backdrop/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/backdrop/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/backdrop/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/backdrop/slots.md'; +import Slots from '@ionic-internal/component-api/v10/backdrop/slots.mdx'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -18,34 +19,40 @@ Backdrops are full screen components that overlay other components. They are use The backdrop prevents clicking or tapping on the content behind it. It is transparent by default, so the below demo includes CSS to make it visible. -import Basic from '@site/static/usage/v10/backdrop/basic/index.md'; +import Basic from '@site/static/usage/v10/backdrop/basic/index.mdx'; ## Styling -The backdrop can be customized by assigning CSS properties directly to the backdrop element. Common properties include `background-color`, `background` and `opacity`. +The backdrop can be customized by assigning CSS properties directly to the backdrop element. Common properties include `background-color`, `background` and `opacity`. Content can be displayed above the backdrop by setting a `z-index` on the content, higher than the backdrop (defaults to `2`). -import Styling from '@site/static/usage/v10/backdrop/styling/index.md'; +import Styling from '@site/static/usage/v10/backdrop/styling/index.mdx'; ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots - \ No newline at end of file + + diff --git a/docs/api/badge.md b/docs/api/badge.md index 62f109e5ad0..c5fccb26d80 100644 --- a/docs/api/badge.md +++ b/docs/api/badge.md @@ -1,16 +1,20 @@ --- -title: "ion-badge" +title: 'ion-badge' --- -import Props from '@ionic-internal/component-api/v10/badge/props.md'; -import Events from '@ionic-internal/component-api/v10/badge/events.md'; -import Methods from '@ionic-internal/component-api/v10/badge/methods.md'; -import Parts from '@ionic-internal/component-api/v10/badge/parts.md'; + +import Props from '@ionic-internal/component-api/v10/badge/props.mdx'; +import Events from '@ionic-internal/component-api/v10/badge/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/badge/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/badge/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/badge/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/badge/slots.md'; +import Slots from '@ionic-internal/component-api/v10/badge/slots.mdx'; ion-badge: iOS & Android App Notification Badge Icons - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -21,7 +25,7 @@ Badges are inline block elements that usually appear near another element. Typic ## Basic Usage -import Basic from '@site/static/usage/v10/badge/basic/index.md'; +import Basic from '@site/static/usage/v10/badge/basic/index.mdx'; @@ -30,10 +34,12 @@ import Basic from '@site/static/usage/v10/badge/basic/index.md'; Badges can be added inside a tab button, often used to indicate notifications or highlight additional items associated with the element. :::info + Empty badges are only available for `md` mode. + ::: -import InsideTabBar from '@site/static/usage/v10/badge/inside-tab-bar/index.md'; +import InsideTabBar from '@site/static/usage/v10/badge/inside-tab-bar/index.mdx'; @@ -41,30 +47,36 @@ import InsideTabBar from '@site/static/usage/v10/badge/inside-tab-bar/index.md'; ### Colors -import Colors from '@site/static/usage/v10/badge/theming/colors/index.md'; +import Colors from '@site/static/usage/v10/badge/theming/colors/index.mdx'; ### CSS Properties -import CSSProps from '@site/static/usage/v10/badge/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v10/badge/theming/css-properties/index.mdx'; ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/breadcrumb.md b/docs/api/breadcrumb.md index fe0c9e9940d..49da6c7e669 100644 --- a/docs/api/breadcrumb.md +++ b/docs/api/breadcrumb.md @@ -1,18 +1,18 @@ --- -title: "ion-breadcrumb" +title: 'ion-breadcrumb' --- -import Props from '@ionic-internal/component-api/v10/breadcrumb/props.md'; -import Events from '@ionic-internal/component-api/v10/breadcrumb/events.md'; -import Methods from '@ionic-internal/component-api/v10/breadcrumb/methods.md'; -import Parts from '@ionic-internal/component-api/v10/breadcrumb/parts.md'; + +import Props from '@ionic-internal/component-api/v10/breadcrumb/props.mdx'; +import Events from '@ionic-internal/component-api/v10/breadcrumb/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/breadcrumb/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/breadcrumb/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/breadcrumb/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/breadcrumb/slots.md'; +import Slots from '@ionic-internal/component-api/v10/breadcrumb/slots.mdx'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - A Breadcrumb is a single navigation item that is a child of the Breadcrumbs component. A breadcrumb can link elsewhere in an app or it can be plain text. Each breadcrumb has a separator between it and the next breadcrumb and can optionally contain an icon. Refer to the [Breadcrumbs](./breadcrumbs) documentation for more information. @@ -38,23 +38,26 @@ interface BreadcrumbCustomEvent extends CustomEvent { } ``` - - - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.md index 4590c5c19de..f1ddd018be5 100644 --- a/docs/api/breadcrumbs.md +++ b/docs/api/breadcrumbs.md @@ -1,14 +1,13 @@ --- -title: "ion-breadcrumbs" +title: 'ion-breadcrumbs' --- -import Props from '@ionic-internal/component-api/v10/breadcrumbs/props.md'; -import Events from '@ionic-internal/component-api/v10/breadcrumbs/events.md'; -import Methods from '@ionic-internal/component-api/v10/breadcrumbs/methods.md'; -import Parts from '@ionic-internal/component-api/v10/breadcrumbs/parts.md'; -import CustomProps from '@ionic-internal/component-api/v10/breadcrumbs/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/breadcrumbs/slots.md'; - +import Props from '@ionic-internal/component-api/v10/breadcrumbs/props.mdx'; +import Events from '@ionic-internal/component-api/v10/breadcrumbs/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/breadcrumbs/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/breadcrumbs/parts.mdx'; +import CustomProps from '@ionic-internal/component-api/v10/breadcrumbs/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v10/breadcrumbs/slots.mdx'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -18,7 +17,7 @@ Breadcrumbs are navigation items that are used to indicate where a user is on an ## Basic Usage -import Basic from '@site/static/usage/v10/breadcrumbs/basic/index.md'; +import Basic from '@site/static/usage/v10/breadcrumbs/basic/index.mdx'; @@ -26,13 +25,13 @@ import Basic from '@site/static/usage/v10/breadcrumbs/basic/index.md'; ### Icons on Items -import IconsOnItems from '@site/static/usage/v10/breadcrumbs/icons/icons-on-items/index.md'; +import IconsOnItems from '@site/static/usage/v10/breadcrumbs/icons/icons-on-items/index.mdx'; ### Custom Separators -import CustomSeparators from '@site/static/usage/v10/breadcrumbs/icons/custom-separators/index.md'; +import CustomSeparators from '@site/static/usage/v10/breadcrumbs/icons/custom-separators/index.mdx'; @@ -42,7 +41,7 @@ import CustomSeparators from '@site/static/usage/v10/breadcrumbs/icons/custom-se If there are more items than the value of `maxItems`, the breadcrumbs will be collapsed. By default, only the first and last items will be shown. -import MaxItems from '@site/static/usage/v10/breadcrumbs/collapsing-items/max-items/index.md'; +import MaxItems from '@site/static/usage/v10/breadcrumbs/collapsing-items/max-items/index.mdx'; @@ -50,7 +49,7 @@ import MaxItems from '@site/static/usage/v10/breadcrumbs/collapsing-items/max-it Once the items are collapsed, the number of items to show can be controlled by the `itemsBeforeCollapse` and `itemsAfterCollapse` properties. -import ItemsBeforeAfter from '@site/static/usage/v10/breadcrumbs/collapsing-items/items-before-after/index.md'; +import ItemsBeforeAfter from '@site/static/usage/v10/breadcrumbs/collapsing-items/items-before-after/index.mdx'; @@ -58,7 +57,7 @@ import ItemsBeforeAfter from '@site/static/usage/v10/breadcrumbs/collapsing-item Clicking the collapsed indicator will fire the `ionCollapsedClick` event. This can be used to, for example, expand the breadcrumbs. -import ExpandOnClick from '@site/static/usage/v10/breadcrumbs/collapsing-items/expand-on-click/index.md'; +import ExpandOnClick from '@site/static/usage/v10/breadcrumbs/collapsing-items/expand-on-click/index.mdx'; @@ -66,7 +65,7 @@ import ExpandOnClick from '@site/static/usage/v10/breadcrumbs/collapsing-items/e The `ionCollapsedClick` event can also be used to present an overlay (in this case, an `ion-popover`) showing the hidden breadcrumbs. -import PopoverOnClick from '@site/static/usage/v10/breadcrumbs/collapsing-items/popover-on-click/index.md'; +import PopoverOnClick from '@site/static/usage/v10/breadcrumbs/collapsing-items/popover-on-click/index.mdx'; @@ -74,31 +73,36 @@ import PopoverOnClick from '@site/static/usage/v10/breadcrumbs/collapsing-items/ ### Colors -import Colors from '@site/static/usage/v10/breadcrumbs/theming/colors/index.md'; +import Colors from '@site/static/usage/v10/breadcrumbs/theming/colors/index.mdx'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v10/breadcrumbs/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v10/breadcrumbs/theming/css-properties/index.mdx'; - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/button.md b/docs/api/button.md index 1e9ee019ce0..3a446968cf2 100644 --- a/docs/api/button.md +++ b/docs/api/button.md @@ -1,16 +1,20 @@ --- -title: "ion-button" +title: 'ion-button' --- -import Props from '@ionic-internal/component-api/v10/button/props.md'; -import Events from '@ionic-internal/component-api/v10/button/events.md'; -import Methods from '@ionic-internal/component-api/v10/button/methods.md'; -import Parts from '@ionic-internal/component-api/v10/button/parts.md'; + +import Props from '@ionic-internal/component-api/v10/button/props.mdx'; +import Events from '@ionic-internal/component-api/v10/button/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/button/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/button/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/button/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/button/slots.md'; +import Slots from '@ionic-internal/component-api/v10/button/slots.mdx'; ion-button: Style Buttons with Custom CSS Properties - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -21,7 +25,7 @@ Buttons provide a clickable element, which can be used in forms, or anywhere tha ## Basic Usage -import Basic from '@site/static/usage/v10/button/basic/index.md'; +import Basic from '@site/static/usage/v10/button/basic/index.mdx'; @@ -29,7 +33,7 @@ import Basic from '@site/static/usage/v10/button/basic/index.md'; This property lets you specify how wide the button should be. By default, buttons have `display: inline-block`, but setting this property will change the button to a full-width element with `display: block`. -import Expand from '@site/static/usage/v10/button/expand/index.md'; +import Expand from '@site/static/usage/v10/button/expand/index.mdx'; @@ -37,16 +41,15 @@ import Expand from '@site/static/usage/v10/button/expand/index.md'; This property lets you specify the shape of the button. By default, buttons are rectangular with a small border radius, but setting this to `"round"` will change the button to a rounded element. -import Shape from '@site/static/usage/v10/button/shape/index.md'; +import Shape from '@site/static/usage/v10/button/shape/index.mdx'; - ## Fill This property determines the background and border color of the button. By default, buttons have a solid background unless the button is inside of a toolbar, in which case it has a transparent background. -import Fill from '@site/static/usage/v10/button/fill/index.md'; +import Fill from '@site/static/usage/v10/button/fill/index.mdx'; @@ -54,13 +57,13 @@ import Fill from '@site/static/usage/v10/button/fill/index.md'; This property specifies the size of the button. Setting this property will change the height and padding of a button. -import Size from '@site/static/usage/v10/button/size/index.md'; +import Size from '@site/static/usage/v10/button/size/index.mdx'; ## Icons -import Icons from '@site/static/usage/v10/button/icons/index.md'; +import Icons from '@site/static/usage/v10/button/icons/index.mdx'; @@ -68,13 +71,13 @@ import Icons from '@site/static/usage/v10/button/icons/index.md'; ### Colors -import Colors from '@site/static/usage/v10/button/theming/colors/index.md'; +import Colors from '@site/static/usage/v10/button/theming/colors/index.mdx'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v10/button/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v10/button/theming/css-properties/index.mdx'; @@ -89,27 +92,35 @@ There are many cases where a button's text content may overflow the container. I The button text does not automatically wrap to the next line when the text is too long to fit. In order to make the text wrap, the `ion-text-wrap` class can be added, which will set the `white-space` property to `"normal"`. This will become the default in a future major release. :::info + The `max-width` style is set on the button below for demo purposes only. Text wrapping will work with a dynamic button width. + ::: -import TextWrapping from '@site/static/usage/v10/button/text-wrapping/index.md'; +import TextWrapping from '@site/static/usage/v10/button/text-wrapping/index.mdx'; ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/buttons.md b/docs/api/buttons.md index ed489269ae1..7371cf50bb0 100644 --- a/docs/api/buttons.md +++ b/docs/api/buttons.md @@ -1,57 +1,57 @@ --- -title: "ion-buttons" +title: 'ion-buttons' --- -import Props from '@ionic-internal/component-api/v10/buttons/props.md'; -import Events from '@ionic-internal/component-api/v10/buttons/events.md'; -import Methods from '@ionic-internal/component-api/v10/buttons/methods.md'; -import Parts from '@ionic-internal/component-api/v10/buttons/parts.md'; + +import Props from '@ionic-internal/component-api/v10/buttons/props.mdx'; +import Events from '@ionic-internal/component-api/v10/buttons/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/buttons/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/buttons/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/buttons/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/buttons/slots.md'; +import Slots from '@ionic-internal/component-api/v10/buttons/slots.mdx'; ion-buttons: Toolbar Element with Named Slots for Buttons - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - The Buttons component is a container element. It should be used inside of a [toolbar](./toolbar) and can contain several types of buttons, including standard [buttons](./button), [menu buttons](./menu-button), and [back buttons](./back-button). ## Basic Usage -import Basic from '@site/static/usage/v10/buttons/basic/index.md'; +import Basic from '@site/static/usage/v10/buttons/basic/index.mdx'; - ## Buttons Placement Buttons can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot. -| Slot | Description | -|--------------|----------------------------------------------------------------------------------------------------------| -| `start` | Positions to the `left` of the content in LTR, and to the `right` in RTL. | -| `end` | Positions to the `right` of the content in LTR, and to the `left` in RTL. | -| `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. | -| `primary` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. | +| Slot | Description | +| ----------- | ------------------------------------------------------------------------------------------------------- | +| `start` | Positions to the `left` of the content in LTR, and to the `right` in RTL. | +| `end` | Positions to the `right` of the content in LTR, and to the `left` in RTL. | +| `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. | +| `primary` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. | -import Placement from '@site/static/usage/v10/buttons/placement/index.md'; +import Placement from '@site/static/usage/v10/buttons/placement/index.mdx'; - ## Types of Buttons A button in a toolbar is styled to be clear by default, but this can be changed using the [`fill`](./button#fill) property on the button. The properties included on [back button](./back-button) and [menu button](./menu-button) in this example are for display purposes; refer to their respective documentation for proper usage. -import Types from '@site/static/usage/v10/buttons/types/index.md'; +import Types from '@site/static/usage/v10/buttons/types/index.mdx'; - ## Collapsible Buttons The `collapse` property can be set on the buttons to collapse them when the header collapses. This is typically used with [collapsible large titles](./title#collapsible-large-titles). @@ -63,25 +63,30 @@ This feature is only available for iOS. ::: {/* Reuse the playground from the Title directory */} -import CollapsibleLargeTitleButtons from '@site/static/usage/v10/title/collapsible-large-title/buttons/index.md'; +import CollapsibleLargeTitleButtons from '@site/static/usage/v10/title/collapsible-large-title/buttons/index.mdx'; - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/card-content.md b/docs/api/card-content.md index e9f2d006a35..3bbaa700990 100644 --- a/docs/api/card-content.md +++ b/docs/api/card-content.md @@ -1,35 +1,40 @@ --- -title: "ion-card-content" +title: 'ion-card-content' --- -import Props from '@ionic-internal/component-api/v10/card-content/props.md'; -import Events from '@ionic-internal/component-api/v10/card-content/events.md'; -import Methods from '@ionic-internal/component-api/v10/card-content/methods.md'; -import Parts from '@ionic-internal/component-api/v10/card-content/parts.md'; + +import Props from '@ionic-internal/component-api/v10/card-content/props.mdx'; +import Events from '@ionic-internal/component-api/v10/card-content/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/card-content/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/card-content/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/card-content/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/card-content/slots.md'; +import Slots from '@ionic-internal/component-api/v10/card-content/slots.mdx'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Card content is a child component of card that adds padding around its contents. It is recommended that any text content for a card should be placed inside of card content. Refer to the [Card](./card) documentation for more information. - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/card-header.md b/docs/api/card-header.md index e21cb71a330..c00364e877b 100644 --- a/docs/api/card-header.md +++ b/docs/api/card-header.md @@ -1,37 +1,42 @@ --- -title: "ion-card-header" +title: 'ion-card-header' --- -import Props from '@ionic-internal/component-api/v10/card-header/props.md'; -import Events from '@ionic-internal/component-api/v10/card-header/events.md'; -import Methods from '@ionic-internal/component-api/v10/card-header/methods.md'; -import Parts from '@ionic-internal/component-api/v10/card-header/parts.md'; + +import Props from '@ionic-internal/component-api/v10/card-header/props.mdx'; +import Events from '@ionic-internal/component-api/v10/card-header/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/card-header/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/card-header/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/card-header/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/card-header/slots.md'; +import Slots from '@ionic-internal/component-api/v10/card-header/slots.mdx'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Card header is a child component of card that should be placed before the card content. It can contain a [card title](./card-title) and a [card subtitle](./card-subtitle). Refer to the [Card](./card) documentation for more information. - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.md index 0a81218bcc4..2418b28e4a2 100644 --- a/docs/api/card-subtitle.md +++ b/docs/api/card-subtitle.md @@ -1,37 +1,42 @@ --- -title: "ion-card-subtitle" +title: 'ion-card-subtitle' --- -import Props from '@ionic-internal/component-api/v10/card-subtitle/props.md'; -import Events from '@ionic-internal/component-api/v10/card-subtitle/events.md'; -import Methods from '@ionic-internal/component-api/v10/card-subtitle/methods.md'; -import Parts from '@ionic-internal/component-api/v10/card-subtitle/parts.md'; + +import Props from '@ionic-internal/component-api/v10/card-subtitle/props.mdx'; +import Events from '@ionic-internal/component-api/v10/card-subtitle/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/card-subtitle/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/card-subtitle/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/card-subtitle/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/card-subtitle/slots.md'; +import Slots from '@ionic-internal/component-api/v10/card-subtitle/slots.mdx'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Card subtitle is a child component of card that should be placed inside of a [card header](./card-header). Refer to the [Card](./card) documentation for more information. - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/card-title.md b/docs/api/card-title.md index eac30b453fe..fa1be55ba35 100644 --- a/docs/api/card-title.md +++ b/docs/api/card-title.md @@ -1,42 +1,50 @@ --- -title: "ion-card-title" +title: 'ion-card-title' --- -import Props from '@ionic-internal/component-api/v10/card-title/props.md'; -import Events from '@ionic-internal/component-api/v10/card-title/events.md'; -import Methods from '@ionic-internal/component-api/v10/card-title/methods.md'; -import Parts from '@ionic-internal/component-api/v10/card-title/parts.md'; + +import Props from '@ionic-internal/component-api/v10/card-title/props.mdx'; +import Events from '@ionic-internal/component-api/v10/card-title/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/card-title/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/card-title/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/card-title/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/card-title/slots.md'; +import Slots from '@ionic-internal/component-api/v10/card-title/slots.mdx'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; ion-card-title: Ionic App Card Title Component - + - Card title is a child component of card that should be placed inside of a [card header](./card-header). Refer to the [Card](./card) documentation for more information. - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/card.md b/docs/api/card.md index 0bde48f9649..35cee7e72c9 100644 --- a/docs/api/card.md +++ b/docs/api/card.md @@ -1,87 +1,90 @@ --- -title: "ion-card" +title: 'ion-card' --- -import Props from '@ionic-internal/component-api/v10/card/props.md'; -import Events from '@ionic-internal/component-api/v10/card/events.md'; -import Methods from '@ionic-internal/component-api/v10/card/methods.md'; -import Parts from '@ionic-internal/component-api/v10/card/parts.md'; + +import Props from '@ionic-internal/component-api/v10/card/props.mdx'; +import Events from '@ionic-internal/component-api/v10/card/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/card/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/card/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/card/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/card/slots.md'; +import Slots from '@ionic-internal/component-api/v10/card/slots.mdx'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; ion-card: Card UI Components for Ionic Framework API - + - Cards are containers that display content such as text, images, buttons, and lists. A card can be a single component, but is often made up of a header, title, subtitle, and content. Cards are broken up into several components to accommodate this structure: [card header](./card-header), [card title](./card-title), [card subtitle](./card-subtitle), and [card content](./card-content). - ## Basic Usage -import Basic from '@site/static/usage/v10/card/basic/index.md'; +import Basic from '@site/static/usage/v10/card/basic/index.mdx'; - ## Media Cards -import Media from '@site/static/usage/v10/card/media/index.md'; +import Media from '@site/static/usage/v10/card/media/index.mdx'; - ## Card Buttons -import Buttons from '@site/static/usage/v10/card/buttons/index.md'; +import Buttons from '@site/static/usage/v10/card/buttons/index.mdx'; - ## List Card -import List from '@site/static/usage/v10/card/list/index.md'; +import List from '@site/static/usage/v10/card/list/index.mdx'; - ## Theming ### Colors -import Colors from '@site/static/usage/v10/card/theming/colors/index.md'; +import Colors from '@site/static/usage/v10/card/theming/colors/index.mdx'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v10/card/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v10/card/theming/css-properties/index.mdx'; - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md index 3da2202f97c..b513f1bb7ce 100644 --- a/docs/api/checkbox.md +++ b/docs/api/checkbox.md @@ -1,29 +1,31 @@ --- -title: "ion-checkbox" +title: 'ion-checkbox' --- -import Props from '@ionic-internal/component-api/v10/checkbox/props.md'; -import Events from '@ionic-internal/component-api/v10/checkbox/events.md'; -import Methods from '@ionic-internal/component-api/v10/checkbox/methods.md'; -import Parts from '@ionic-internal/component-api/v10/checkbox/parts.md'; +import Props from '@ionic-internal/component-api/v10/checkbox/props.mdx'; +import Events from '@ionic-internal/component-api/v10/checkbox/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/checkbox/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/checkbox/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/checkbox/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/checkbox/slots.md'; +import Slots from '@ionic-internal/component-api/v10/checkbox/slots.mdx'; ion-checkbox: Ionic App Checkbox to Select Multiple Options - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property. ## Basic Usage -import Basic from '@site/static/usage/v10/checkbox/basic/index.md'; +import Basic from '@site/static/usage/v10/checkbox/basic/index.mdx'; @@ -31,7 +33,7 @@ import Basic from '@site/static/usage/v10/checkbox/basic/index.md'; Developers can use the `labelPlacement` property to control how the label is placed relative to the control. This property mirrors the flexbox `flex-direction` property. -import LabelPlacement from '@site/static/usage/v10/checkbox/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v10/checkbox/label-placement/index.mdx'; @@ -40,10 +42,12 @@ import LabelPlacement from '@site/static/usage/v10/checkbox/label-placement/inde Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property. :::note + Stacked checkboxes can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally. + ::: -import Alignment from '@site/static/usage/v10/checkbox/alignment/index.md'; +import Alignment from '@site/static/usage/v10/checkbox/alignment/index.mdx'; @@ -51,18 +55,19 @@ import Alignment from '@site/static/usage/v10/checkbox/alignment/index.md'; Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property. -import Justify from '@site/static/usage/v10/checkbox/justify/index.md'; +import Justify from '@site/static/usage/v10/checkbox/justify/index.mdx'; - :::note + `ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly. + ::: ## Indeterminate Checkboxes -import Indeterminate from '@site/static/usage/v10/checkbox/indeterminate/index.md'; +import Indeterminate from '@site/static/usage/v10/checkbox/indeterminate/index.mdx'; @@ -70,7 +75,7 @@ import Indeterminate from '@site/static/usage/v10/checkbox/indeterminate/index.m Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable. -import LabelLink from '@site/static/usage/v10/checkbox/label-link/index.md'; +import LabelLink from '@site/static/usage/v10/checkbox/label-link/index.mdx'; @@ -80,7 +85,7 @@ Helper and error text can be used inside of a checkbox with the `helperText` and In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation. -import HelperError from '@site/static/usage/v10/checkbox/helper-error/index.md'; +import HelperError from '@site/static/usage/v10/checkbox/helper-error/index.mdx'; @@ -88,7 +93,7 @@ import HelperError from '@site/static/usage/v10/checkbox/helper-error/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v10/checkbox/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v10/checkbox/theming/css-properties/index.mdx'; @@ -115,19 +120,25 @@ interface CheckboxCustomEvent extends CustomEvent { ``` ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/chip.md b/docs/api/chip.md index 42374aef678..47ffef5f9e2 100644 --- a/docs/api/chip.md +++ b/docs/api/chip.md @@ -1,16 +1,20 @@ --- -title: "ion-chip" +title: 'ion-chip' --- -import Props from '@ionic-internal/component-api/v10/chip/props.md'; -import Events from '@ionic-internal/component-api/v10/chip/events.md'; -import Methods from '@ionic-internal/component-api/v10/chip/methods.md'; -import Parts from '@ionic-internal/component-api/v10/chip/parts.md'; + +import Props from '@ionic-internal/component-api/v10/chip/props.mdx'; +import Events from '@ionic-internal/component-api/v10/chip/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/chip/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/chip/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/chip/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/chip/slots.md'; +import Slots from '@ionic-internal/component-api/v10/chip/slots.mdx'; ion-chip: Text, Icon and Avatar for Ionic Framework Apps - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -21,13 +25,13 @@ Chips represent complex entities in small blocks, such as a contact. A chip can ## Basic Usage -import Basic from '@site/static/usage/v10/chip/basic/index.md'; +import Basic from '@site/static/usage/v10/chip/basic/index.mdx'; ## Slotting Components and Icons -import SlotExample from '@site/static/usage/v10/chip/slots/index.md'; +import SlotExample from '@site/static/usage/v10/chip/slots/index.mdx'; @@ -35,30 +39,36 @@ import SlotExample from '@site/static/usage/v10/chip/slots/index.md'; ### Colors -import Colors from '@site/static/usage/v10/chip/theming/colors/index.md'; +import Colors from '@site/static/usage/v10/chip/theming/colors/index.mdx'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v10/chip/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v10/chip/theming/css-properties/index.mdx'; ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/col.md b/docs/api/col.md index 8c5556355d3..b29be6872f4 100644 --- a/docs/api/col.md +++ b/docs/api/col.md @@ -1,49 +1,54 @@ --- -title: "ion-col" +title: 'ion-col' --- -import Props from '@ionic-internal/component-api/v10/col/props.md'; -import Events from '@ionic-internal/component-api/v10/col/events.md'; -import Methods from '@ionic-internal/component-api/v10/col/methods.md'; -import Parts from '@ionic-internal/component-api/v10/col/parts.md'; + +import Props from '@ionic-internal/component-api/v10/col/props.mdx'; +import Events from '@ionic-internal/component-api/v10/col/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/col/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/col/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/col/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/col/slots.md'; +import Slots from '@ionic-internal/component-api/v10/col/slots.mdx'; ion-col: Column Component Padding and Other Properties - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Columns are cellular components of the [grid](./grid) system and go inside of a [row](./row). They will expand to fill the row. All content within a grid should go inside of a column. Refer to the [grid](./grid) documentation for more information. - ## Column Alignment By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior. - - - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/content.md b/docs/api/content.md index 4ead18874c0..69cbcf64cf0 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -1,62 +1,61 @@ --- -title: "ion-content" +title: 'ion-content' --- -import Props from '@ionic-internal/component-api/v10/content/props.md'; -import Events from '@ionic-internal/component-api/v10/content/events.md'; -import Methods from '@ionic-internal/component-api/v10/content/methods.md'; -import Parts from '@ionic-internal/component-api/v10/content/parts.md'; + +import Props from '@ionic-internal/component-api/v10/content/props.mdx'; +import Events from '@ionic-internal/component-api/v10/content/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/content/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/content/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/content/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/content/slots.md'; +import Slots from '@ionic-internal/component-api/v10/content/slots.mdx'; ion-content: Scrollable Component for Ionic App Content - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - The content component provides an easy to use content area with some useful methods to control the scrollable area. There should only be one content in a single view. Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). - ## Basic Usage -import Basic from '@site/static/usage/v10/content/basic/index.md'; +import Basic from '@site/static/usage/v10/content/basic/index.mdx'; - ## Header & Footer Content can be the only top-level component in a page, or it can be used alongside a [header](./header), [footer](./footer), or both. When used with a header or footer, it will adjust its size to fill the remaining height. -import HeaderFooter from '@site/static/usage/v10/content/header-footer/index.md'; +import HeaderFooter from '@site/static/usage/v10/content/header-footer/index.mdx'; - ## Fullscreen Content By default, content fills the space between a [header](./header) and [footer](./footer) but does not go behind them. In certain cases, it may be desired to have the content scroll behind the header and footer, such as when the `translucent` property is set on either of them, or `opacity` is set on the toolbar. This can be achieved by setting the `fullscreen` property on the content to `true`. -import Fullscreen from '@site/static/usage/v10/content/fullscreen/index.md'; +import Fullscreen from '@site/static/usage/v10/content/fullscreen/index.mdx'; - ## Fixed Content To place elements outside of the scrollable area, assign them to the `fixed` slot. Doing so will [absolutely position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning) the element to the top left of the content. In order to change the position of the element, it can be styled using the [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position) CSS properties. The `fixedSlotPlacement` property is used to determine if content in the `fixed` slot is placed before or after the main content in the DOM. When set to `before`, fixed slot content will be placed before the main content and will therefore receive keyboard focus before the main content receives keyboard focus. This can be useful when the main content contains an infinitely-scrolling list, preventing a [FAB](./fab) or other fixed content from being reachable by pressing the tab key. -import Fixed from '@site/static/usage/v10/content/fixed/index.md'; +import Fixed from '@site/static/usage/v10/content/fixed/index.mdx'; @@ -64,7 +63,7 @@ import Fixed from '@site/static/usage/v10/content/fixed/index.md'; Content provides [methods](#methods) that can be called to scroll the content to the bottom, top, or to a specific point. They can be passed a `duration` in order to smoothly transition instead of instantly changing the position. -import ScrollMethods from '@site/static/usage/v10/content/scroll-methods/index.md'; +import ScrollMethods from '@site/static/usage/v10/content/scroll-methods/index.mdx'; @@ -72,28 +71,27 @@ import ScrollMethods from '@site/static/usage/v10/content/scroll-methods/index.m Scroll events are disabled by default for content due to performance. However, they can be enabled by setting `scrollEvents` to `true`. This is necessary before listening to any of the scroll [events](#events). -import ScrollEvents from '@site/static/usage/v10/content/scroll-events/index.md'; +import ScrollEvents from '@site/static/usage/v10/content/scroll-events/index.mdx'; - ## Theming ### Colors -import Colors from '@site/static/usage/v10/content/theming/colors/index.md'; +import Colors from '@site/static/usage/v10/content/theming/colors/index.mdx'; ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v10/content/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v10/content/theming/css-shadow-parts/index.mdx'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v10/content/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v10/content/theming/css-properties/index.mdx'; @@ -117,7 +115,7 @@ ion-content::part(scroll) { } ``` -import SafeArea from '@site/static/usage/v10/content/theming/safe-area/index.md'; +import SafeArea from '@site/static/usage/v10/content/theming/safe-area/index.mdx'; @@ -161,21 +159,26 @@ interface ScrollCustomEvent extends ScrollBaseCustomEvent { } ``` - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md index 353e7893de1..abf61fe207d 100644 --- a/docs/api/datetime-button.md +++ b/docs/api/datetime-button.md @@ -1,16 +1,20 @@ --- -title: "ion-datetime-button" +title: 'ion-datetime-button' --- -import Props from '@ionic-internal/component-api/v10/datetime-button/props.md'; -import Events from '@ionic-internal/component-api/v10/datetime-button/events.md'; -import Methods from '@ionic-internal/component-api/v10/datetime-button/methods.md'; -import Parts from '@ionic-internal/component-api/v10/datetime-button/parts.md'; + +import Props from '@ionic-internal/component-api/v10/datetime-button/props.mdx'; +import Events from '@ionic-internal/component-api/v10/datetime-button/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/datetime-button/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/datetime-button/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/datetime-button/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/datetime-button/slots.md'; +import Slots from '@ionic-internal/component-api/v10/datetime-button/slots.mdx'; ion-datetime-button: Ionic Input for Datetime Picker - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -27,7 +31,7 @@ When using Datetime Button with a JavaScript framework such as Angular, React, o ## Basic Usage -import Basic from '@site/static/usage/v10/datetime-button/basic/index.md'; +import Basic from '@site/static/usage/v10/datetime-button/basic/index.mdx'; @@ -39,7 +43,7 @@ The localized text on `ion-datetime-button` is determined by the `locale` proper You can customize the format of the date and time in a Datetime Button by providing `formatOptions` on the associated Datetime instance. Refer to [Datetime Format Options](./datetime#format-options) for more details. -import FormatOptions from '@site/static/usage/v10/datetime-button/format-options/index.md'; +import FormatOptions from '@site/static/usage/v10/datetime-button/format-options/index.mdx'; @@ -48,19 +52,25 @@ import FormatOptions from '@site/static/usage/v10/datetime-button/format-options `ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used. ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/datetime.md b/docs/api/datetime.md index 2a50b7ed9c3..f3373cd54e1 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -1,54 +1,58 @@ --- -title: "ion-datetime" +title: 'ion-datetime' --- -import Props from '@ionic-internal/component-api/v10/datetime/props.md'; -import Events from '@ionic-internal/component-api/v10/datetime/events.md'; -import Methods from '@ionic-internal/component-api/v10/datetime/methods.md'; -import Parts from '@ionic-internal/component-api/v10/datetime/parts.md'; + +import Props from '@ionic-internal/component-api/v10/datetime/props.mdx'; +import Events from '@ionic-internal/component-api/v10/datetime/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/datetime/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/datetime/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/datetime/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/datetime/slots.md'; +import Slots from '@ionic-internal/component-api/v10/datetime/slots.mdx'; -import Basic from '@site/static/usage/v10/datetime/basic/index.md'; +import Basic from '@site/static/usage/v10/datetime/basic/index.mdx'; -import MaxMin from '@site/static/usage/v10/datetime/date-constraints/max-min/index.md'; -import Values from '@site/static/usage/v10/datetime/date-constraints/values/index.md'; -import Advanced from '@site/static/usage/v10/datetime/date-constraints/advanced/index.md'; +import MaxMin from '@site/static/usage/v10/datetime/date-constraints/max-min/index.mdx'; +import Values from '@site/static/usage/v10/datetime/date-constraints/values/index.mdx'; +import Advanced from '@site/static/usage/v10/datetime/date-constraints/advanced/index.mdx'; -import FormatOptions from '@site/static/usage/v10/datetime/format-options/index.md'; +import FormatOptions from '@site/static/usage/v10/datetime/format-options/index.mdx'; -import CustomLocale from '@site/static/usage/v10/datetime/localization/custom-locale/index.md'; -import HourCycle from '@site/static/usage/v10/datetime/localization/hour-cycle/index.md'; -import FirstDayOfWeek from '@site/static/usage/v10/datetime/localization/first-day-of-week/index.md'; -import LocaleExtensionTags from '@site/static/usage/v10/datetime/localization/locale-extension-tags/index.md'; -import TimeLabel from '@site/static/usage/v10/datetime/localization/time-label/index.md'; +import CustomLocale from '@site/static/usage/v10/datetime/localization/custom-locale/index.mdx'; +import HourCycle from '@site/static/usage/v10/datetime/localization/hour-cycle/index.mdx'; +import FirstDayOfWeek from '@site/static/usage/v10/datetime/localization/first-day-of-week/index.mdx'; +import LocaleExtensionTags from '@site/static/usage/v10/datetime/localization/locale-extension-tags/index.mdx'; +import TimeLabel from '@site/static/usage/v10/datetime/localization/time-label/index.mdx'; -import MonthAndYear from '@site/static/usage/v10/datetime/presentation/month-and-year/index.md'; -import Time from '@site/static/usage/v10/datetime/presentation/time/index.md'; -import Date from '@site/static/usage/v10/datetime/presentation/date/index.md'; +import MonthAndYear from '@site/static/usage/v10/datetime/presentation/month-and-year/index.mdx'; +import Time from '@site/static/usage/v10/datetime/presentation/time/index.mdx'; +import Date from '@site/static/usage/v10/datetime/presentation/date/index.mdx'; -import ShowingDefaultTitle from '@site/static/usage/v10/datetime/title/showing-default-title/index.md'; -import CustomizingTitle from '@site/static/usage/v10/datetime/title/customizing-title/index.md'; +import ShowingDefaultTitle from '@site/static/usage/v10/datetime/title/showing-default-title/index.mdx'; +import CustomizingTitle from '@site/static/usage/v10/datetime/title/customizing-title/index.mdx'; -import ShowingConfirmationButtons from '@site/static/usage/v10/datetime/buttons/showing-confirmation-buttons/index.md'; -import CustomizingButtons from '@site/static/usage/v10/datetime/buttons/customizing-buttons/index.md'; -import CustomizingButtonTexts from '@site/static/usage/v10/datetime/buttons/customizing-button-texts/index.md'; +import ShowingConfirmationButtons from '@site/static/usage/v10/datetime/buttons/showing-confirmation-buttons/index.mdx'; +import CustomizingButtons from '@site/static/usage/v10/datetime/buttons/customizing-buttons/index.mdx'; +import CustomizingButtonTexts from '@site/static/usage/v10/datetime/buttons/customizing-button-texts/index.mdx'; -import HighlightedDatesArray from '@site/static/usage/v10/datetime/highlightedDates/array/index.md'; -import HighlightedDatesCallback from '@site/static/usage/v10/datetime/highlightedDates/callback/index.md'; +import HighlightedDatesArray from '@site/static/usage/v10/datetime/highlightedDates/array/index.mdx'; +import HighlightedDatesCallback from '@site/static/usage/v10/datetime/highlightedDates/callback/index.mdx'; -import ShowAdjacentDays from '@site/static/usage/v10/datetime/show-adjacent-days/index.md'; +import ShowAdjacentDays from '@site/static/usage/v10/datetime/show-adjacent-days/index.mdx'; -import MultipleDateSelection from '@site/static/usage/v10/datetime/multiple/index.md'; +import MultipleDateSelection from '@site/static/usage/v10/datetime/multiple/index.mdx'; -import GlobalTheming from '@site/static/usage/v10/datetime/styling/global-theming/index.md'; -import CalendarHeaderStyling from '@site/static/usage/v10/datetime/styling/calendar-header/index.md'; -import CalendarDaysStyling from '@site/static/usage/v10/datetime/styling/calendar-days/index.md'; -import DatetimeHeaderStyling from '@site/static/usage/v10/datetime/styling/datetime-header/index.md'; -import WheelStyling from '@site/static/usage/v10/datetime/styling/wheel-styling/index.md'; +import GlobalTheming from '@site/static/usage/v10/datetime/styling/global-theming/index.mdx'; +import CalendarHeaderStyling from '@site/static/usage/v10/datetime/styling/calendar-header/index.mdx'; +import CalendarDaysStyling from '@site/static/usage/v10/datetime/styling/calendar-days/index.mdx'; +import DatetimeHeaderStyling from '@site/static/usage/v10/datetime/styling/datetime-header/index.mdx'; +import WheelStyling from '@site/static/usage/v10/datetime/styling/wheel-styling/index.mdx'; ion-datetime: Ionic API Input for Datetime Format Picker - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -77,15 +81,15 @@ and parse within JSON objects and databases. Below are some examples of ISO 8601 formats that can be used with `ion-datetime`: -| Description | Format | Datetime Value Example | -| -------------------- | ------------------------ | ------------------------------ | -| Year | `YYYY` | `1994` | -| Year and Month | `YYYY-MM` | `1994-12` | -| Complete Date | `YYYY-MM-DD` | `1994-12-15` | -| Date and Time | `YYYY-MM-DDTHH:mm` | `1994-12-15T13:47` | -| UTC Timezone | `YYYY-MM-DDTHH:mm:ssZ` | `1994-12-15T13:47:20Z` | -| Timezone Offset | `YYYY-MM-DDTHH:mm:ssTZD` | `1994-12-15T13:47:20+05:00` | -| Hour and Minute | `HH:mm` | `13:47` | +| Description | Format | Datetime Value Example | +| --------------- | ------------------------ | --------------------------- | +| Year | `YYYY` | `1994` | +| Year and Month | `YYYY-MM` | `1994-12` | +| Complete Date | `YYYY-MM-DD` | `1994-12-15` | +| Date and Time | `YYYY-MM-DDTHH:mm` | `1994-12-15T13:47` | +| UTC Timezone | `YYYY-MM-DDTHH:mm:ssZ` | `1994-12-15T13:47:20Z` | +| Timezone Offset | `YYYY-MM-DDTHH:mm:ssTZD` | `1994-12-15T13:47:20+05:00` | +| Hour and Minute | `HH:mm` | `13:47` | Note that the year is always four-digits, milliseconds (if it's added) is always three-digits, and all others are always two-digits. So the number representing @@ -94,7 +98,9 @@ always in the 24-hour format, so `00` is `12am` on a 12-hour clock, `13` means `1pm`, and `23` means `11pm`. :::note + While seconds, milliseconds, and time zone can be specified using the ISO 8601 datetime format, `ion-datetime` does not provide an interface for second, millisecond, and time zone selection. Any second, millisecond, or time zone values provided will be ignored. + ::: ## Basic Usage @@ -149,7 +155,9 @@ The following example shows how to set the locale to Spanish (Spain). :::note + The time label is not automatically localized. Refer to [Time Label](#time-label) for more information. + ::: ### Hour Cycle @@ -158,17 +166,18 @@ The time label is not automatically localized. Refer to [Time Label](#time-label There are 4 primary hour cycle types: -| Hour cycle type | Description | -| --------------- | ------------------------------------------------------------ | -| `'h12'` | Hour system using 1–12; corresponds to 'h' in patterns. The 12 hour clock, with midnight starting at 12:00 am. | -| `'h23'` | Hour system using 0–23; corresponds to 'H' in patterns. The 24 hour clock, with midnight starting at 0:00. | -| `'h11'` | Hour system using 0–11; corresponds to 'K' in patterns. The 12 hour clock, with midnight starting at 0:00 am. | -| `'h24'` | Hour system using 1–24; corresponds to 'k' in pattern. The 24 hour clock, with midnight starting at 24:00. | +| Hour cycle type | Description | +| --------------- | -------------------------------------------------------------------------------------------------------------- | +| `'h12'` | Hour system using 1–12; corresponds to 'h' in patterns. The 12 hour clock, with midnight starting at 12:00 am. | +| `'h23'` | Hour system using 0–23; corresponds to 'H' in patterns. The 24 hour clock, with midnight starting at 0:00. | +| `'h11'` | Hour system using 0–11; corresponds to 'K' in patterns. The 12 hour clock, with midnight starting at 0:00 am. | +| `'h24'` | Hour system using 1–24; corresponds to 'k' in pattern. The 24 hour clock, with midnight starting at 24:00. | :::note - Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle -::: +Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle + +::: There may be scenarios where you need to have more control over which hour cycle is used. This is where the `hourCycle` property can help. @@ -197,7 +206,9 @@ For example, if you wanted to use a 12 hour cycle with the `en-GB` locale, you c :::note -Be sure to check the [Browser Compatibility Chart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility) for `Intl.Locale` before using it in your app. + +Be sure to check the [Browser Compatibility Chart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility) for `Intl.Locale` before using it in your app. + ::: ## Presentation @@ -248,7 +259,7 @@ Certain `presentation` options have both grid and wheel styles that developers c The example below shows the wheel picker with `presentation="date-time"`. -import Wheel from '@site/static/usage/v10/datetime/presentation/wheel/index.md'; +import Wheel from '@site/static/usage/v10/datetime/presentation/wheel/index.mdx'; @@ -259,7 +270,9 @@ If the `showAdjacentDays` property is set to `true`, days from the previous and The calendar view always displays 6 rows when `showAdjacentDays` is enabled, so days from the previous or next month will be shown as needed to fill the grid. For example, even if a month starts on the first day of the week and ends within the fifth row, days from the next month will appear at the end to complete the sixth row. :::note + This property is only supported when using `presentation="date"` and `preferWheel="false"`. + ::: @@ -269,7 +282,9 @@ This property is only supported when using `presentation="date"` and `preferWhee If the `multiple` property is set to `true`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it. :::note + This property is only supported when using `presentation="date"` and `preferWheel="false"`. + ::: @@ -329,7 +344,9 @@ When specifying colors, any valid CSS color format can be used. This includes he To maintain a consistent user experience, the style of selected date(s) will always override custom highlights. :::note + This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`. + ::: ### Using Array @@ -359,7 +376,9 @@ The benefit of this approach is that every component, not just `ion-datetime`, c The datetime header manages the content for the `title` slot and the selected date. :::note + The selected date will not render if `preferWheel` is set to `true`. + ::: @@ -377,7 +396,9 @@ The header can be styled using CSS shadow parts. The calendar days in a grid-style `ion-datetime` can be styled using CSS shadow parts. :::note + The example below selects the day 2 days ago, unless that day is in the previous month, then it selects a day 2 days in the future. This is done for demo purposes in order to show how to apply custom styling to all days, the current day, and the selected day. + ::: @@ -435,7 +456,6 @@ console.log(formattedString); // Jun 4, 2021 See https://date-fns.org/docs/format for a list of all the valid format tokens. - ## Advanced Datetime Validation and Manipulation The datetime picker provides the simplicity of selecting an exact format, and @@ -501,19 +521,25 @@ interface DatetimeCustomEvent extends CustomEvent { ``` ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/fab-button.md b/docs/api/fab-button.md index 7ab549d4fbe..01e480dec4a 100644 --- a/docs/api/fab-button.md +++ b/docs/api/fab-button.md @@ -1,23 +1,26 @@ --- -title: "ion-fab-button" +title: 'ion-fab-button' --- -import Props from '@ionic-internal/component-api/v10/fab-button/props.md'; -import Events from '@ionic-internal/component-api/v10/fab-button/events.md'; -import Methods from '@ionic-internal/component-api/v10/fab-button/methods.md'; -import Parts from '@ionic-internal/component-api/v10/fab-button/parts.md'; + +import Props from '@ionic-internal/component-api/v10/fab-button/props.mdx'; +import Events from '@ionic-internal/component-api/v10/fab-button/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/fab-button/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/fab-button/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/fab-button/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/fab-button/slots.md'; +import Slots from '@ionic-internal/component-api/v10/fab-button/slots.mdx'; ion-fab-button: Ionic FAB Button Icon for Primary Action - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is achieved by wrapping the fab button in a [fab](./fab) component. If the button is not wrapped with a fab, it will scroll with the content. @@ -25,19 +28,25 @@ As the name suggests, FABs generally float over the content in a fixed position. For usage examples, refer to the [fab documentation](./fab). ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots - \ No newline at end of file + + diff --git a/docs/api/fab-list.md b/docs/api/fab-list.md index b7ab9cc3fd2..a7e1b3da627 100644 --- a/docs/api/fab-list.md +++ b/docs/api/fab-list.md @@ -1,12 +1,13 @@ --- -title: "ion-fab-list" +title: 'ion-fab-list' --- -import Props from '@ionic-internal/component-api/v10/fab-list/props.md'; -import Events from '@ionic-internal/component-api/v10/fab-list/events.md'; -import Methods from '@ionic-internal/component-api/v10/fab-list/methods.md'; -import Parts from '@ionic-internal/component-api/v10/fab-list/parts.md'; + +import Props from '@ionic-internal/component-api/v10/fab-list/props.mdx'; +import Events from '@ionic-internal/component-api/v10/fab-list/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/fab-list/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/fab-list/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/fab-list/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/fab-list/slots.md'; +import Slots from '@ionic-internal/component-api/v10/fab-list/slots.mdx'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -17,19 +18,25 @@ The fab list component is a container for multiple [fab buttons](./fab-button). For usage examples, refer to the [fab documentation](./fab). ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots - \ No newline at end of file + + diff --git a/docs/api/fab.md b/docs/api/fab.md index be38802842c..32ac2c50e71 100644 --- a/docs/api/fab.md +++ b/docs/api/fab.md @@ -1,16 +1,20 @@ --- -title: "ion-fab" +title: 'ion-fab' --- -import Props from '@ionic-internal/component-api/v10/fab/props.md'; -import Events from '@ionic-internal/component-api/v10/fab/events.md'; -import Methods from '@ionic-internal/component-api/v10/fab/methods.md'; -import Parts from '@ionic-internal/component-api/v10/fab/parts.md'; + +import Props from '@ionic-internal/component-api/v10/fab/props.mdx'; +import Events from '@ionic-internal/component-api/v10/fab/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/fab/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/fab/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/fab/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/fab/slots.md'; +import Slots from '@ionic-internal/component-api/v10/fab/slots.mdx'; ion-fab: Ionic Floating Action Button for Android and iOS - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -21,7 +25,7 @@ Fabs are container elements that contain one or more [fab buttons](./fab-button) ## Basic Usage -import BasicUsage from '@site/static/usage/v10/fab/basic/index.md'; +import BasicUsage from '@site/static/usage/v10/fab/basic/index.mdx'; @@ -29,7 +33,7 @@ import BasicUsage from '@site/static/usage/v10/fab/basic/index.md'; The `side` property of the [fab list](./fab-list) component controls where it appears relative to the main fab button. A single fab can have multiple fab lists as long as they all have different values for `side`. -import ListSide from '@site/static/usage/v10/fab/list-side/index.md'; +import ListSide from '@site/static/usage/v10/fab/list-side/index.mdx'; @@ -37,7 +41,7 @@ import ListSide from '@site/static/usage/v10/fab/list-side/index.md'; In order to place the fab in a fixed position, it should be assigned to the `fixed` slot of the outer [content](./content) component. Use the `vertical` and `horizontal` props to control the alignment of the fab in the viewport. The `edge` prop will cause the fab button to overlap with the app's header or footer. -import Positioning from '@site/static/usage/v10/fab/positioning/index.md'; +import Positioning from '@site/static/usage/v10/fab/positioning/index.mdx'; @@ -63,7 +67,7 @@ ion-fab { If there is an `ion-header` (for a fab with `vertical` set to `"top"`) or `ion-footer` (for a fab with `vertical` set to `"bottom"`), no CSS adjustment is needed because the fab gets positioned relative to the header or footer. -import SafeArea from '@site/static/usage/v10/fab/safe-area/index.md'; +import SafeArea from '@site/static/usage/v10/fab/safe-area/index.mdx'; @@ -73,7 +77,7 @@ In scenarios where a view contains many interactive elements, such as an infinit By setting the `fixedSlotPlacement` property on [Content](./content) to `before`, the FAB will be placed before the main content in the DOM. This ensures that the FAB receives keyboard focus before other interactive elements receive focus, making it easier for users to access the FAB. -import BeforeContent from '@site/static/usage/v10/fab/before-content/index.md'; +import BeforeContent from '@site/static/usage/v10/fab/before-content/index.mdx'; @@ -81,7 +85,7 @@ import BeforeContent from '@site/static/usage/v10/fab/before-content/index.md'; Setting the `size` property of the main fab button to `"small"` will render it at a mini size. Note that this property will not have an effect when used with the inner fab buttons. -import ButtonSizing from '@site/static/usage/v10/fab/button-sizing/index.md'; +import ButtonSizing from '@site/static/usage/v10/fab/button-sizing/index.mdx'; @@ -89,19 +93,19 @@ import ButtonSizing from '@site/static/usage/v10/fab/button-sizing/index.md'; ### Colors -import Colors from '@site/static/usage/v10/fab/theming/colors/index.md'; +import Colors from '@site/static/usage/v10/fab/theming/colors/index.mdx'; ### CSS Custom Properties -import CSSCustomProperties from '@site/static/usage/v10/fab/theming/css-custom-properties/index.md'; +import CSSCustomProperties from '@site/static/usage/v10/fab/theming/css-custom-properties/index.mdx'; ### CSS Shadow Parts -import CSSShadowParts from '@site/static/usage/v10/fab/theming/css-shadow-parts/index.md'; +import CSSShadowParts from '@site/static/usage/v10/fab/theming/css-shadow-parts/index.mdx'; @@ -112,19 +116,25 @@ import CSSShadowParts from '@site/static/usage/v10/fab/theming/css-shadow-parts/ Since FABs are allowed to contain only icons, developers must provide an `aria-label` on each `ion-fab-button` instance. Without this label, assistive technologies will not be able to announce the purpose of each button. ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/footer.md b/docs/api/footer.md index 20c95e5d477..d23965daac6 100644 --- a/docs/api/footer.md +++ b/docs/api/footer.md @@ -1,53 +1,53 @@ --- -title: "ion-footer" +title: 'ion-footer' --- -import Props from '@ionic-internal/component-api/v10/footer/props.md'; -import Events from '@ionic-internal/component-api/v10/footer/events.md'; -import Methods from '@ionic-internal/component-api/v10/footer/methods.md'; -import Parts from '@ionic-internal/component-api/v10/footer/parts.md'; + +import Props from '@ionic-internal/component-api/v10/footer/props.mdx'; +import Events from '@ionic-internal/component-api/v10/footer/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/footer/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/footer/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/footer/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/footer/slots.md'; +import Slots from '@ionic-internal/component-api/v10/footer/slots.mdx'; ion-footer: Page Footer | Ionic App Footer Root Component - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Footer is a root component of a page that aligns itself to the bottom of the page. It is recommended to be used as a wrapper for one or more [toolbars](./toolbar), but it can be used to wrap any element. When a toolbar is used inside of a footer, the content will be adjusted so it is sized correctly, and the footer will account for any device safe areas. ## Basic Usage -import Basic from '@site/static/usage/v10/footer/basic/index.md'; +import Basic from '@site/static/usage/v10/footer/basic/index.mdx'; - ## Translucent Footer Footers can match the transparency found in native iOS applications by setting the `translucent` property. In order for the content to scroll behind the footer, the `fullscreen` property needs to be set on the content. This effect will only apply when the mode is `"ios"` and the device supports [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility). -import Translucent from '@site/static/usage/v10/footer/translucent/index.md'; +import Translucent from '@site/static/usage/v10/footer/translucent/index.mdx'; - ## Fade Footer Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `collapse` property on the footer to `"fade"`. When the content is scrolled to the end, the background and border on the footer will fade away. This effect will only apply when the mode is `"ios"`. -import Fade from '@site/static/usage/v10/footer/fade/index.md'; +import Fade from '@site/static/usage/v10/footer/fade/index.mdx'; - ### Usage with Virtual Scroll A fade footer requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling. -import CustomScrollTarget from '@site/static/usage/v10/footer/custom-scroll-target/index.md'; +import CustomScrollTarget from '@site/static/usage/v10/footer/custom-scroll-target/index.mdx'; @@ -55,25 +55,30 @@ import CustomScrollTarget from '@site/static/usage/v10/footer/custom-scroll-targ In `"md"` mode, the footer will have a `box-shadow` on the top. In `"ios"` mode, it will receive a `border` on the top. These can be removed by adding the `.ion-no-border` class to the footer. -import NoBorder from '@site/static/usage/v10/footer/no-border/index.md'; +import NoBorder from '@site/static/usage/v10/footer/no-border/index.mdx'; - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/gallery-item.md b/docs/api/gallery-item.md index c4899b9bf78..7df567a4194 100644 --- a/docs/api/gallery-item.md +++ b/docs/api/gallery-item.md @@ -1,13 +1,13 @@ --- -title: "ion-gallery-item" +title: 'ion-gallery-item' --- -import Props from '@ionic-internal/component-api/v10/gallery-item/props.md'; -import Events from '@ionic-internal/component-api/v10/gallery-item/events.md'; -import Methods from '@ionic-internal/component-api/v10/gallery-item/methods.md'; -import Parts from '@ionic-internal/component-api/v10/gallery-item/parts.md'; +import Props from '@ionic-internal/component-api/v10/gallery-item/props.mdx'; +import Events from '@ionic-internal/component-api/v10/gallery-item/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/gallery-item/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/gallery-item/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/gallery-item/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/gallery-item/slots.md'; +import Slots from '@ionic-internal/component-api/v10/gallery-item/slots.mdx'; ion-gallery-item: Gallery Cell for Text, Images, and Cards @@ -28,19 +28,25 @@ Gallery Items must be placed inside a Gallery, which arranges them and applies l Refer to the [Gallery](./gallery.md) documentation for more information. ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/gallery.md b/docs/api/gallery.md index de4d16bf64a..cc1566b1c03 100644 --- a/docs/api/gallery.md +++ b/docs/api/gallery.md @@ -1,13 +1,13 @@ --- -title: "ion-gallery" +title: 'ion-gallery' --- -import Props from '@ionic-internal/component-api/v10/gallery/props.md'; -import Events from '@ionic-internal/component-api/v10/gallery/events.md'; -import Methods from '@ionic-internal/component-api/v10/gallery/methods.md'; -import Parts from '@ionic-internal/component-api/v10/gallery/parts.md'; +import Props from '@ionic-internal/component-api/v10/gallery/props.mdx'; +import Events from '@ionic-internal/component-api/v10/gallery/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/gallery/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/gallery/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/gallery/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/gallery/slots.md'; +import Slots from '@ionic-internal/component-api/v10/gallery/slots.mdx'; ion-gallery: Responsive Uniform and Masonry Gallery Layouts @@ -27,7 +27,7 @@ Each [Gallery Item](./gallery-item.md) is a single cell of the grid and can cont ## Basic Usage -import Basic from '@site/static/usage/v10/gallery/basic/index.md'; +import Basic from '@site/static/usage/v10/gallery/basic/index.mdx'; @@ -35,7 +35,7 @@ import Basic from '@site/static/usage/v10/gallery/basic/index.md'; Uniform is the default layout. It creates a consistent grid where items appear at the same visual size with a `1 / 1` aspect ratio. This layout is ideal when visual alignment is more important than preserving each item's natural height. -import Uniform from '@site/static/usage/v10/gallery/uniform/index.md'; +import Uniform from '@site/static/usage/v10/gallery/uniform/index.mdx'; @@ -47,7 +47,7 @@ Masonry preserves each item's natural height and stacks items vertically within Sequential is the default masonry ordering mode. Items are placed in DOM order, filling columns from left to right. -import MasonrySequential from '@site/static/usage/v10/gallery/masonry-sequential/index.md'; +import MasonrySequential from '@site/static/usage/v10/gallery/masonry-sequential/index.mdx'; @@ -55,7 +55,7 @@ import MasonrySequential from '@site/static/usage/v10/gallery/masonry-sequential Best fit places each item in the column with the most available space, helping balance column heights. -import MasonryBestFit from '@site/static/usage/v10/gallery/masonry-best-fit/index.md'; +import MasonryBestFit from '@site/static/usage/v10/gallery/masonry-best-fit/index.mdx'; @@ -76,9 +76,10 @@ figure img { aspect-ratio: inherit; } ``` + ::: -import Images from '@site/static/usage/v10/gallery/images/index.md'; +import Images from '@site/static/usage/v10/gallery/images/index.mdx'; @@ -89,15 +90,15 @@ Columns can be configured with the `columns` property using either a single numb If no value is provided, or if an invalid value is used, the Gallery falls back to its default responsive column behavior. The default column counts by breakpoint are: | Breakpoint | Min Width | Default Columns | -| --- | --- | ---| -| `xs` | `0` | `2` | -| `sm` | `576px` | `3` | -| `md` | `768px` | `4` | -| `lg` | `992px` | `6` | -| `xl` | `1200px` | `8` | -| `xxl` | `1400px` | `10` | +| ---------- | --------- | --------------- | +| `xs` | `0` | `2` | +| `sm` | `576px` | `3` | +| `md` | `768px` | `4` | +| `lg` | `992px` | `6` | +| `xl` | `1200px` | `8` | +| `xxl` | `1400px` | `10` | -import Columns from '@site/static/usage/v10/gallery/columns/index.md'; +import Columns from '@site/static/usage/v10/gallery/columns/index.mdx'; @@ -116,7 +117,7 @@ If no value is provided, or if an invalid value is used, the Gallery falls back Use the `gap` property to space items apart rather than CSS margins. Margins set on item content are reset so they cannot disrupt the layout calculations, so they will not produce the spacing you expect. Use `gap` for the space _between_ items, and `padding` on your content to inset it _within_ an item. ::: -import Gap from '@site/static/usage/v10/gallery/gap/index.md'; +import Gap from '@site/static/usage/v10/gallery/gap/index.mdx'; @@ -150,19 +151,25 @@ type GalleryGap = GalleryBreakpoints | string | number; ``` ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/grid.md b/docs/api/grid.md index ba4e487b39c..b92fe525664 100644 --- a/docs/api/grid.md +++ b/docs/api/grid.md @@ -1,23 +1,26 @@ --- -title: "ion-grid" +title: 'ion-grid' --- -import Props from '@ionic-internal/component-api/v10/grid/props.md'; -import Events from '@ionic-internal/component-api/v10/grid/events.md'; -import Methods from '@ionic-internal/component-api/v10/grid/methods.md'; -import Parts from '@ionic-internal/component-api/v10/grid/parts.md'; + +import Props from '@ionic-internal/component-api/v10/grid/props.mdx'; +import Events from '@ionic-internal/component-api/v10/grid/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/grid/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/grid/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/grid/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/grid/slots.md'; +import Slots from '@ionic-internal/component-api/v10/grid/slots.mdx'; ion-grid: Display Grids for Mobile-First Custom App Layout - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, [row(s)](row.md) and [column(s)](col.md). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS. ## Overview @@ -49,16 +52,14 @@ The default breakpoints for the grid and the corresponding properties are define | lg | 992px | `sizeLg` | `offsetLg` | `pushLg` | `pullLg` | Set columns when (min-width: 992px) | | xl | 1200px | `sizeXl` | `offsetXl` | `pushXl` | `pullXl` | Set columns when (min-width: 1200px) | - ## Basic Usage By default, columns will take up equal width inside of a row for all devices and screen sizes. -import Basic from '@site/static/usage/v10/grid/basic/index.md'; +import Basic from '@site/static/usage/v10/grid/basic/index.mdx'; - ## Fixed Grid Grids take up 100% width of their container. By adding the `fixed` property to the grid, the width will be set based on the screen size. The width of the grid for each breakpoint is listed in the table below, but it can be customized. For more information, refer to [Customizing the Grid](#customizing-the-grid). Open the below example in StackBlitz and resize the screen to observe how the grid width changes. @@ -71,11 +72,10 @@ Grids take up 100% width of their container. By adding the `fixed` property to t | lg | 960px | Set grid width to 960px when (min-width: 992px) | | xl | 1140px | Set grid width to 1140px when (min-width: 1200px) | -import Fixed from '@site/static/usage/v10/grid/fixed/index.md'; +import Fixed from '@site/static/usage/v10/grid/fixed/index.mdx'; - ## Column Size Columns can be set to specific sizes to take up a certain number out of the total number of columns, or resize their width based on the content. The default number of columns is 12, but this can be customized. Refer to the [Number of Columns](#number-of-columns) section below for more information. @@ -84,16 +84,15 @@ Columns can be set to specific sizes to take up a certain number out of the tota By setting the `size` to `"auto"` the column can size itself based on the natural width of its content. This is necessary when setting a column to an absolute width, such as a specific number of pixels. The columns next to the auto-width column will resize to fill the row. -import SizeAuto from '@site/static/usage/v10/grid/size-auto/index.md'; +import SizeAuto from '@site/static/usage/v10/grid/size-auto/index.mdx'; - ### Specified size Set the `size` of a column and the others will automatically resize around it. If a size is specified on all of the columns and it doesn't add up to the total number of columns, there will be empty space after the columns. -import Size from '@site/static/usage/v10/grid/size/index.md'; +import Size from '@site/static/usage/v10/grid/size/index.mdx'; @@ -101,11 +100,10 @@ import Size from '@site/static/usage/v10/grid/size/index.md'; The `size` property will change the column width for all [breakpoints](#default-breakpoints). Column also provides several size properties with the breakpoint name appended to the end of "size". These properties can be used to change the width of the column based on the screen size. Open the below example in StackBlitz and resize the screen to observe how the column widths change. -import SizeResponsive from '@site/static/usage/v10/grid/size-responsive/index.md'; +import SizeResponsive from '@site/static/usage/v10/grid/size-responsive/index.mdx'; - ## Column Offset Columns can be offset to shift to the right by a certain number of columns out of the total number of columns. @@ -114,7 +112,7 @@ Columns can be offset to shift to the right by a certain number of columns out o Columns can be moved to the right by using the `offset` property. This property increases the left margin of the column by the number of specified columns. It also shifts the columns to the right of it, if any exist. -import Offset from '@site/static/usage/v10/grid/offset/index.md'; +import Offset from '@site/static/usage/v10/grid/offset/index.mdx'; @@ -122,11 +120,10 @@ import Offset from '@site/static/usage/v10/grid/offset/index.md'; The `offset` property will change the column's left margin for all [breakpoints](#default-breakpoints). Column also provides several offset properties with the breakpoint name appended to the end of "offset". These properties can be used to change the offset of the column based on the screen size. Open the below example in StackBlitz and resize the screen to observe how the column offsets change. -import OffsetResponsive from '@site/static/usage/v10/grid/offset-responsive/index.md'; +import OffsetResponsive from '@site/static/usage/v10/grid/offset-responsive/index.mdx'; - ## Column Push & Pull Columns can be pushed to to the right or pulled to the left by a certain number of columns out of the total number of columns. @@ -135,7 +132,7 @@ Columns can be pushed to to the right or pulled to the left by a certain number Reorder the columns by adding the `push` and `pull` properties. These properties adjust the `left` and `right` of the columns by the specified number of columns making it easy to reorder columns. This will cause columns to overlap if they are shifted to where another column is positioned. -import PushPull from '@site/static/usage/v10/grid/push-pull/index.md'; +import PushPull from '@site/static/usage/v10/grid/push-pull/index.mdx'; @@ -143,7 +140,7 @@ import PushPull from '@site/static/usage/v10/grid/push-pull/index.md'; The `push` and `pull` properties will change the column's position for all [breakpoints](#default-breakpoints). Column also provides several `push` and `pull` properties with the breakpoint name appended to the end of "push" / "pull". These properties can be used to change the position of the column based on the screen size. Open the below example in StackBlitz and resize the screen to observe how the column positions change. -import PushPullResponsive from '@site/static/usage/v10/grid/push-pull-responsive/index.md'; +import PushPullResponsive from '@site/static/usage/v10/grid/push-pull-responsive/index.mdx'; @@ -153,16 +150,15 @@ import PushPullResponsive from '@site/static/usage/v10/grid/push-pull-responsive All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, refer to [css utilities](/layout/css-utilities#flex-container-properties). -import VerticalAlignment from '@site/static/usage/v10/grid/vertical-alignment/index.md'; +import VerticalAlignment from '@site/static/usage/v10/grid/vertical-alignment/index.mdx'; - ### Horizontal Alignment All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, refer to [css utilities](/layout/css-utilities.md#flex-container-properties). -import HorizontalAlignment from '@site/static/usage/v10/grid/horizontal-alignment/index.md'; +import HorizontalAlignment from '@site/static/usage/v10/grid/horizontal-alignment/index.mdx'; @@ -174,7 +170,7 @@ Using our built-in CSS variables, it’s possible to customize the predefined gr The width of a fixed grid can be set for all breakpoints with the `--ion-grid-width` CSS variable. To override individual breakpoints, use the `--ion-grid-width-{breakpoint}` CSS variables. The default value for each of the breakpoints can be found in the [Fixed Grid](#fixed-grid) section. Open the below example in StackBlitz and resize the screen to observe how the grid width changes. -import Width from '@site/static/usage/v10/grid/customizing/width/index.md'; +import Width from '@site/static/usage/v10/grid/customizing/width/index.mdx'; @@ -182,7 +178,7 @@ import Width from '@site/static/usage/v10/grid/customizing/width/index.md'; The number of grid columns can be modified with the `--ion-grid-columns` CSS variable. By default there are 12 grid columns, but this can be changed to any positive integer and be used to calculate the width of each individual column. -import ColumnNumber from '@site/static/usage/v10/grid/customizing/column-number/index.md'; +import ColumnNumber from '@site/static/usage/v10/grid/customizing/column-number/index.mdx'; @@ -192,24 +188,30 @@ The padding on the grid container can be set for all breakpoints with the `--ion The padding on the columns can be set for all breakpoints with the `--ion-grid-column-padding` CSS variable. To override individual breakpoints, use the `--ion-grid-column-padding-{breakpoint}` CSS variables. -import Padding from '@site/static/usage/v10/grid/customizing/padding/index.md'; +import Padding from '@site/static/usage/v10/grid/customizing/padding/index.mdx'; ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/header.md b/docs/api/header.md index 544736de18a..75cc0e00783 100644 --- a/docs/api/header.md +++ b/docs/api/header.md @@ -1,92 +1,94 @@ --- -title: "ion-header" +title: 'ion-header' --- -import Props from '@ionic-internal/component-api/v10/header/props.md'; -import Events from '@ionic-internal/component-api/v10/header/events.md'; -import Methods from '@ionic-internal/component-api/v10/header/methods.md'; -import Parts from '@ionic-internal/component-api/v10/header/parts.md'; + +import Props from '@ionic-internal/component-api/v10/header/props.mdx'; +import Events from '@ionic-internal/component-api/v10/header/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/header/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/header/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/header/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/header/slots.md'; +import Slots from '@ionic-internal/component-api/v10/header/slots.mdx'; ion-header: Header Parent Component for Ionic Framework Apps - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Header is a root component of a page that aligns itself to the top of the page. It is recommended to be used as a wrapper for one or more [toolbars](./toolbar), but it can be used to wrap any element. When a toolbar is used inside of a header, the content will be adjusted so it is sized correctly, and the header will account for any device safe areas. - ## Basic Usage -import Basic from '@site/static/usage/v10/header/basic/index.md'; +import Basic from '@site/static/usage/v10/header/basic/index.mdx'; - ## Translucent Header Headers can match the transparency found in native iOS applications by setting the `translucent` property. In order for the content to scroll behind the header, the `fullscreen` property needs to be set on the content. This effect will only apply when the mode is `"ios"` and the device supports [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility). -import Translucent from '@site/static/usage/v10/header/translucent/index.md'; +import Translucent from '@site/static/usage/v10/header/translucent/index.mdx'; - ## Condensed Header Ionic provides the functionality found in native iOS applications to show a large toolbar title and then collapse it to a small title when scrolling. This can be done by adding two headers, one above the content and one inside of the content, and then setting the `collapse` property to `"condense"` on the header inside of the content. This effect will only apply when the mode is "ios". -import Condense from '@site/static/usage/v10/header/condense/index.md'; +import Condense from '@site/static/usage/v10/header/condense/index.mdx'; - ## Fade Header Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `collapse` property on the header to `"fade"`. When the page is first loaded, the background and border on the header will be hidden. As the content is scrolled, the header will fade back in. This effect will only apply when the mode is "ios". This functionality can be combined with a [Condensed Header](#condensed-header) as well. The `collapse` property with a value set to `"fade"` should be on the header outside of the content. -import Fade from '@site/static/usage/v10/header/fade/index.md'; +import Fade from '@site/static/usage/v10/header/fade/index.mdx'; - ### Usage with Virtual Scroll A fade header requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling. -import CustomScrollTarget from '@site/static/usage/v10/header/custom-scroll-target/index.md'; +import CustomScrollTarget from '@site/static/usage/v10/header/custom-scroll-target/index.mdx'; - ## Borders In `"md"` mode, the header will have a `box-shadow` on the bottom. In `"ios"` mode, it will receive a `border` on the bottom. These can be removed by adding the `.ion-no-border` class to the header. -import NoBorder from '@site/static/usage/v10/header/no-border/index.md'; +import NoBorder from '@site/static/usage/v10/header/no-border/index.mdx'; - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/icon.md b/docs/api/icon.md index 3f3e7640bfb..7c5d84f4365 100644 --- a/docs/api/icon.md +++ b/docs/api/icon.md @@ -10,13 +10,13 @@ title: 'ion-icon' /> -Icon is a universal container for displaying icons. While Ionicons is included by default with all Ionic Framework applications, the component can display Ionicons, custom SVGs, font-based icon libraries, and other icon systems. It provides consistent styling and sizing regardless of where an icon comes from. +Icon is a universal container for displaying icons. While [Ionicons](https://ionic.io/ionicons) is included by default with all Ionic Framework applications, the component can display Ionicons, custom SVGs, font-based icon libraries, and other icon systems. It provides consistent styling and sizing regardless of where an icon comes from. -For Ionicons documentation, refer to ionic.io/ionicons. +For Ionicons documentation, refer to [ionic.io/ionicons](https://ionic.io/ionicons). ## Basic Usage -import Basic from '@site/static/usage/v10/icon/basic/index.md'; +import Basic from '@site/static/usage/v10/icon/basic/index.mdx'; @@ -24,7 +24,7 @@ import Basic from '@site/static/usage/v10/icon/basic/index.md'; Font-based icons from libraries such as Font Awesome, Bootstrap Icons, Remix Icons, and Phosphor Icons can be displayed by slotting them into Icon. -import FontIcons from '@site/static/usage/v10/icon/font-icons/index.md'; +import FontIcons from '@site/static/usage/v10/icon/font-icons/index.mdx'; @@ -32,7 +32,7 @@ import FontIcons from '@site/static/usage/v10/icon/font-icons/index.md'; Custom SVGs can be displayed with Icon in two ways: by loading an external SVG file using the `src` property or by slotting SVG content directly into the component. -import CustomSVGs from '@site/static/usage/v10/icon/custom-svgs/index.md'; +import CustomSVGs from '@site/static/usage/v10/icon/custom-svgs/index.mdx'; diff --git a/docs/api/img.md b/docs/api/img.md index 89e6fe2caba..255bf0da828 100644 --- a/docs/api/img.md +++ b/docs/api/img.md @@ -1,17 +1,20 @@ --- -title: "ion-img" +title: 'ion-img' --- -import Props from '@ionic-internal/component-api/v10/img/props.md'; -import Events from '@ionic-internal/component-api/v10/img/events.md'; -import Methods from '@ionic-internal/component-api/v10/img/methods.md'; -import Parts from '@ionic-internal/component-api/v10/img/parts.md'; +import Props from '@ionic-internal/component-api/v10/img/props.mdx'; +import Events from '@ionic-internal/component-api/v10/img/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/img/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/img/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/img/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/img/slots.md'; +import Slots from '@ionic-internal/component-api/v10/img/slots.mdx'; ion-img: Img Tag to Lazy Load Images in Viewport - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -19,31 +22,39 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; :::warning[Deprecated] + `ion-img` is deprecated and will be removed in Ionic 10. Use a native `` tag with [loading="lazy"](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading) instead. Refer to the [migration guide](../updating/9-0.md#img) for details on replacing events and styling. + ::: Img is a tag that will lazily load an image whenever the tag is in the viewport. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) internally, which is supported in most modern browsers, but falls back to a `setTimeout` when it is not supported. ## Basic Usage -import Basic from '@site/static/usage/v10/img/basic/index.md'; +import Basic from '@site/static/usage/v10/img/basic/index.mdx'; ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/infinite-scroll-content.md b/docs/api/infinite-scroll-content.md index d94c3411cf2..397a2466bd5 100644 --- a/docs/api/infinite-scroll-content.md +++ b/docs/api/infinite-scroll-content.md @@ -1,13 +1,13 @@ --- -title: "ion-infinite-scroll-content" +title: 'ion-infinite-scroll-content' --- -import Props from '@ionic-internal/component-api/v10/infinite-scroll-content/props.md'; -import Events from '@ionic-internal/component-api/v10/infinite-scroll-content/events.md'; -import Methods from '@ionic-internal/component-api/v10/infinite-scroll-content/methods.md'; -import Parts from '@ionic-internal/component-api/v10/infinite-scroll-content/parts.md'; +import Props from '@ionic-internal/component-api/v10/infinite-scroll-content/props.mdx'; +import Events from '@ionic-internal/component-api/v10/infinite-scroll-content/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/infinite-scroll-content/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/infinite-scroll-content/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/infinite-scroll-content/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/infinite-scroll-content/slots.md'; +import Slots from '@ionic-internal/component-api/v10/infinite-scroll-content/slots.mdx'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -16,19 +16,25 @@ The `ion-infinite-scroll-content` component is the default child used by the `io For more information as well as usage, refer to the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content). ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots - \ No newline at end of file + + diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md index 29992de41fd..b1704d8ffdf 100644 --- a/docs/api/infinite-scroll.md +++ b/docs/api/infinite-scroll.md @@ -1,29 +1,31 @@ --- -title: "ion-infinite-scroll" +title: 'ion-infinite-scroll' --- -import Props from '@ionic-internal/component-api/v10/infinite-scroll/props.md'; -import Events from '@ionic-internal/component-api/v10/infinite-scroll/events.md'; -import Methods from '@ionic-internal/component-api/v10/infinite-scroll/methods.md'; -import Parts from '@ionic-internal/component-api/v10/infinite-scroll/parts.md'; +import Props from '@ionic-internal/component-api/v10/infinite-scroll/props.mdx'; +import Events from '@ionic-internal/component-api/v10/infinite-scroll/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/infinite-scroll/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/infinite-scroll/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/infinite-scroll/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/infinite-scroll/slots.md'; +import Slots from '@ionic-internal/component-api/v10/infinite-scroll/slots.mdx'; ion-infinite-scroll: Infinite Scroller Action Component - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - The Infinite Scroll component calls an action to be performed when the user scrolls a specified distance from the bottom or top of the page. The expression assigned to the `ionInfinite` event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the `complete()` method on the infinite scroll instance. ## Basic Usage -import Basic from '@site/static/usage/v10/infinite-scroll/basic/index.md'; +import Basic from '@site/static/usage/v10/infinite-scroll/basic/index.mdx'; @@ -31,7 +33,7 @@ import Basic from '@site/static/usage/v10/infinite-scroll/basic/index.md'; The `ion-infinite-scroll-content` is responsible for the visual display of the infinite scroll interaction. By default this component changes its look depending on the infinite scroll's state. It displays a spinner that looks best based on the platform the user is on. Both the spinner and loading text can be customized by setting properties on the `ion-infinite-scroll-content` component. -import InfiniteScrollContent from '@site/static/usage/v10/infinite-scroll/infinite-scroll-content/index.md'; +import InfiniteScrollContent from '@site/static/usage/v10/infinite-scroll/infinite-scroll-content/index.mdx'; @@ -39,7 +41,7 @@ import InfiniteScrollContent from '@site/static/usage/v10/infinite-scroll/infini Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` components allows developers to create their own content components, if desired. This content can contain anything, from an SVG element to elements with unique CSS animations. -import CustomContent from '@site/static/usage/v10/infinite-scroll/custom-infinite-scroll-content/index.md'; +import CustomContent from '@site/static/usage/v10/infinite-scroll/custom-infinite-scroll-content/index.mdx'; @@ -75,12 +77,8 @@ For example, when rendering a collection of items in an `ion-list`: ```html - - First item - - - Second item - + First item + Second item ... @@ -105,19 +103,25 @@ interface InfiniteScrollCustomEvent extends CustomEvent { ``` ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/input-otp.md b/docs/api/input-otp.md index d3133168874..940ab110bec 100644 --- a/docs/api/input-otp.md +++ b/docs/api/input-otp.md @@ -1,16 +1,20 @@ --- -title: "ion-input-otp" +title: 'ion-input-otp' --- -import Props from '@ionic-internal/component-api/v10/input-otp/props.md'; -import Events from '@ionic-internal/component-api/v10/input-otp/events.md'; -import Methods from '@ionic-internal/component-api/v10/input-otp/methods.md'; -import Parts from '@ionic-internal/component-api/v10/input-otp/parts.md'; + +import Props from '@ionic-internal/component-api/v10/input-otp/props.mdx'; +import Events from '@ionic-internal/component-api/v10/input-otp/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/input-otp/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/input-otp/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/input-otp/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/input-otp/slots.md'; +import Slots from '@ionic-internal/component-api/v10/input-otp/slots.mdx'; ion-input-otp: One-Time Password Input Component - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -23,7 +27,7 @@ The Input OTP component is a specialized input component designed for entering o The component provides 4 input boxes by default, which is a common length for many verification codes. The number of input boxes can be customized using the `length` property. -import Basic from '@site/static/usage/v10/input-otp/basic/index.md'; +import Basic from '@site/static/usage/v10/input-otp/basic/index.mdx'; @@ -32,6 +36,7 @@ import Basic from '@site/static/usage/v10/input-otp/basic/index.md'; The `type` property determines the input format, supporting either numeric or alphanumeric verification codes. It accepts two values: `number` and `text`. It uses `type="number"` by default for entering numeric verification codes. When `type="text"` is specified, it accepts alphanumeric input. This flexibility allows handling different OTP formats, whether numeric-only codes (like SMS verification codes) or alphanumeric codes (like backup codes or recovery keys). The `type` property automatically sets both the `inputmode` and `pattern` attributes: + - When `type="number"`: - Sets `inputmode="numeric"` to show a numeric keyboard on mobile devices - Sets `pattern="[\p{N}]"` to allow only numeric input @@ -41,7 +46,7 @@ The `type` property automatically sets both the `inputmode` and `pattern` attrib Refer to the [Pattern](#pattern) section for more details on pattern validation and customization. -import Type from '@site/static/usage/v10/input-otp/type/index.md'; +import Type from '@site/static/usage/v10/input-otp/type/index.mdx'; @@ -49,7 +54,7 @@ import Type from '@site/static/usage/v10/input-otp/type/index.md'; The `shape` property controls the border radius of the input boxes, creating rounded or sharp corners. -import Shape from '@site/static/usage/v10/input-otp/shape/index.md'; +import Shape from '@site/static/usage/v10/input-otp/shape/index.mdx'; @@ -57,7 +62,7 @@ import Shape from '@site/static/usage/v10/input-otp/shape/index.md'; The `fill` property controls the background style of the input boxes, offering bordered or filled backgrounds. -import Fill from '@site/static/usage/v10/input-otp/fill/index.md'; +import Fill from '@site/static/usage/v10/input-otp/fill/index.mdx'; @@ -65,26 +70,28 @@ import Fill from '@site/static/usage/v10/input-otp/fill/index.md'; The `size` property provides different size options for the input boxes. -import Size from '@site/static/usage/v10/input-otp/size/index.md'; +import Size from '@site/static/usage/v10/input-otp/size/index.mdx'; ## Separators The `separators` property adds visual dividers between one or more of the input boxes. Separators can be defined in three ways: + - Comma-separated string of numbers (e.g., `"1,3"`) - Array of numbers (e.g., `[1, 3]`) - String `"all"` to show separators between every input box The numbers represent the index after which a separator should appear. For example, `"1,3"` displays a separator after the first and third input box. This can be used to create visually distinct groupings of input boxes, but it will still have one value. -import Separators from '@site/static/usage/v10/input-otp/separators/index.md'; +import Separators from '@site/static/usage/v10/input-otp/separators/index.mdx'; ## States The component supports various states for automatic styling of input boxes: + - `disabled` and `readonly` states via respective properties - Form validation states: `valid` and `invalid` visually indicated through CSS classes - In Angular: validation states are automatically managed through the framework's value accessors and form validation @@ -92,25 +99,29 @@ The component supports various states for automatic styling of input boxes: - `ion-invalid` styles only display when touched (`ion-touched`) - `ion-valid` styles only display when focused (`has-focus`) -import States from '@site/static/usage/v10/input-otp/states/index.md'; +import States from '@site/static/usage/v10/input-otp/states/index.mdx'; ## Pattern The `pattern` property enables custom validation using regular expressions. It accepts a [string regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Cheatsheet) or [unicode regular expression](https://www.regular-expressions.info/unicode.html) to validate allowed characters. The `pattern` must match the entire value, not just a subset. Default patterns: + - `type="number"`: `"[\p{N}]"` for matching any kind of numeric character in any script. - `type="text"`: `"[\p{L}\p{N}]"` for any kind of numeric character in any script and any kind of letter from any language. The component will prevent users from entering any characters that don't match the specified pattern. Developers can override these defaults by providing their own pattern string to match specific input requirements. :::tip + When using a custom `pattern`, remember that the `type` property controls which keyboard appears on mobile devices: + - Use `type="number"` for numeric-only patterns to show the numeric keyboard - Use `type="text"` for patterns that include letters to show the alphanumeric keyboard + ::: -import Pattern from '@site/static/usage/v10/input-otp/pattern/index.md'; +import Pattern from '@site/static/usage/v10/input-otp/pattern/index.mdx'; @@ -121,10 +132,12 @@ import Pattern from '@site/static/usage/v10/input-otp/pattern/index.md'; The `color` property changes the color palette for input boxes. For `outline` fills, this property changes the caret color, highlight color and border color. For `solid` fills, this property changes the caret color and highlight color. :::note -The `color` property does *not* change the text color of the input OTP. For that, use the [`--color` CSS property](#css-custom-properties-1). + +The `color` property does _not_ change the text color of the input OTP. For that, use the [`--color` CSS property](#css-custom-properties-1). + ::: -import Colors from '@site/static/usage/v10/input-otp/theming/colors/index.md'; +import Colors from '@site/static/usage/v10/input-otp/theming/colors/index.mdx'; @@ -132,7 +145,7 @@ import Colors from '@site/static/usage/v10/input-otp/theming/colors/index.md'; Input OTP uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-input-otp` for customization will not work; therefore we recommend adding a class and customizing it that way. Due to certain styles being applied based on the `fill`, you may need to override properties on the fills separately. -import CSSProps from '@site/static/usage/v10/input-otp/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v10/input-otp/theming/css-properties/index.mdx'; @@ -144,30 +157,36 @@ The keyboard navigation for Input OTP follows the [ARIA Authoring Practices Guid These keyboard interactions apply to all `ion-input-otp` elements when the component is not disabled. -| Key | Description | -| --- | --- | -| Tab | When first tabbing into the component, focus moves to the first empty box. If all boxes are filled, focus moves to the last box. Once inside the component, tabbing moves to the next focusable element on the page. | -| Shift + Tab | When tabbing backwards into the component, focus moves to the first empty box. If all boxes are filled, focus moves to the last box. Once inside the component, shift tabbing focus moves to the previous focusable element on the page. | -| ArrowRight | Moves focus to the next input box, stopping at the first empty box. In RTL mode, moves focus back to any previous box that contains a value. | -| ArrowLeft | Moves focus back to any previous box that contains a value. In RTL mode, moves focus to the next input box, stopping at the first empty box. | -| Any character matching the `pattern` property | Fills the current box and automatically moves focus to the next empty box. If all boxes are filled, focus remains on the last box. If the current box has a value, override the value with the entered character. In RTL mode, input fills boxes from right to left. | -| Backspace | In an empty box: moves focus back one box and clears its value.
In a box with a value: clears that value.
With values in boxes to the right: shifts them all one position to the left. In RTL mode, with values in boxes to the left: shifts them all one position to the right. | +| Key | Description | +| ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Tab | When first tabbing into the component, focus moves to the first empty box. If all boxes are filled, focus moves to the last box. Once inside the component, tabbing moves to the next focusable element on the page. | +| Shift + Tab | When tabbing backwards into the component, focus moves to the first empty box. If all boxes are filled, focus moves to the last box. Once inside the component, shift tabbing focus moves to the previous focusable element on the page. | +| ArrowRight | Moves focus to the next input box, stopping at the first empty box. In RTL mode, moves focus back to any previous box that contains a value. | +| ArrowLeft | Moves focus back to any previous box that contains a value. In RTL mode, moves focus to the next input box, stopping at the first empty box. | +| Any character matching the `pattern` property | Fills the current box and automatically moves focus to the next empty box. If all boxes are filled, focus remains on the last box. If the current box has a value, override the value with the entered character. In RTL mode, input fills boxes from right to left. | +| Backspace | In an empty box: moves focus back one box and clears its value.
In a box with a value: clears that value.
With values in boxes to the right: shifts them all one position to the left. In RTL mode, with values in boxes to the left: shifts them all one position to the right. | | Ctrl + V
Cmd + V | Pastes content starting from the first box, regardless of which box is currently focused. All existing values are cleared before pasting. For example, if you have "1234" in all boxes and paste "56", the result will be "56" in the first two boxes with the remaining boxes empty. If the pasted content is longer than the available boxes, the extra characters are ignored. | ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/input-password-toggle.md b/docs/api/input-password-toggle.md index 2567a3c9bed..7346e837f83 100644 --- a/docs/api/input-password-toggle.md +++ b/docs/api/input-password-toggle.md @@ -1,52 +1,62 @@ --- -title: "ion-input-password-toggle" +title: 'ion-input-password-toggle' --- -import Props from '@ionic-internal/component-api/v10/input-password-toggle/props.md'; -import Events from '@ionic-internal/component-api/v10/input-password-toggle/events.md'; -import Methods from '@ionic-internal/component-api/v10/input-password-toggle/methods.md'; -import Parts from '@ionic-internal/component-api/v10/input-password-toggle/parts.md'; + +import Props from '@ionic-internal/component-api/v10/input-password-toggle/props.mdx'; +import Events from '@ionic-internal/component-api/v10/input-password-toggle/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/input-password-toggle/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/input-password-toggle/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/input-password-toggle/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/input-password-toggle/slots.md'; +import Slots from '@ionic-internal/component-api/v10/input-password-toggle/slots.mdx'; ion-input-password-toggle: Toggle the visibility of a password in Input - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - The InputPasswordToggle component is a companion component to [Input](./input). It allows users to toggle the visibility of text in a password input. ## Basic Usage :::info + InputPasswordToggle must be used with an [Input](./input) that has its [`type`](./input/#type) property set to either `'text'` or `'password'`. Using any other `type` will cause a warning to be logged. -::: +::: -import Basic from '@site/static/usage/v10/input-password-toggle/basic/index.md'; +import Basic from '@site/static/usage/v10/input-password-toggle/basic/index.mdx'; ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/input.md b/docs/api/input.md index 4290542a0ab..6fc8a150418 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -1,38 +1,39 @@ --- -title: "ion-input" +title: 'ion-input' --- -import Props from '@ionic-internal/component-api/v10/input/props.md'; -import Events from '@ionic-internal/component-api/v10/input/events.md'; -import Methods from '@ionic-internal/component-api/v10/input/methods.md'; -import Parts from '@ionic-internal/component-api/v10/input/parts.md'; + +import Props from '@ionic-internal/component-api/v10/input/props.mdx'; +import Events from '@ionic-internal/component-api/v10/input/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/input/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/input/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/input/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/input/slots.md'; +import Slots from '@ionic-internal/component-api/v10/input/slots.mdx'; ion-input: Custom Input With Styling and CSS Properties - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input and integrates with the keyboard on mobile devices. - ## Basic Usage -import Basic from '@site/static/usage/v10/input/basic/index.md'; +import Basic from '@site/static/usage/v10/input/basic/index.mdx'; - ## Types The input component is meant for text type inputs only, such as `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, and `"url"`. It supports all standard text input events including `keyup`, `keydown`, `keypress`, and more. The default `type` is `"text"`. -import Types from '@site/static/usage/v10/input/types/index.md'; +import Types from '@site/static/usage/v10/input/types/index.mdx'; @@ -48,7 +49,7 @@ Labels should be used to describe the input. They can be used visually, and they Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control. -import LabelPlacement from '@site/static/usage/v10/input/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v10/input/label-placement/index.mdx'; @@ -58,7 +59,7 @@ While plaintext labels should be passed in via the `label` property, if custom H Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior. -import LabelSlot from '@site/static/usage/v10/input/label-slot/index.md'; +import LabelSlot from '@site/static/usage/v10/input/label-slot/index.mdx'; @@ -66,7 +67,7 @@ import LabelSlot from '@site/static/usage/v10/input/label-slot/index.md'; If no visible label is needed, developers should still supply an `aria-label` so the input is accessible to screen readers. -import NoVisibleLabel from '@site/static/usage/v10/input/no-visible-label/index.md'; +import NoVisibleLabel from '@site/static/usage/v10/input/no-visible-label/index.mdx'; @@ -74,11 +75,10 @@ import NoVisibleLabel from '@site/static/usage/v10/input/no-visible-label/index. Inputs offer two options for clearing the input based on how you interact with it. The first way is by adding the `clearInput` property which will show a clear button when the input has a `value`. The second way is the `clearOnEdit` property which will clear the input after it has been blurred and then typed in again. Inputs with a `type` set to `"password"` will have `clearOnEdit` enabled by default. -import Clear from '@site/static/usage/v10/input/clear/index.md'; +import Clear from '@site/static/usage/v10/input/clear/index.mdx'; - ## Filled Inputs Material Design offers filled styles for an input. The `fill` property on the input can be set to either `"solid"` or `"outline"`. @@ -86,21 +86,22 @@ Material Design offers filled styles for an input. The `fill` property on the in Filled inputs can be used on iOS by setting the input's `mode` to `md`. :::warning + Inputs that use `fill` should not be used in an `ion-item` due to styling conflicts between the components. + ::: -import Fill from '@site/static/usage/v10/input/fill/index.md'; +import Fill from '@site/static/usage/v10/input/fill/index.mdx'; - ## Helper & Error Text Helper and error text can be used inside of an input with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` and `ion-touched` classes are added to the `ion-input`. This ensures errors are not shown before the user has a chance to enter data. In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation. -import HelperError from '@site/static/usage/v10/input/helper-error/index.md'; +import HelperError from '@site/static/usage/v10/input/helper-error/index.mdx'; @@ -110,13 +111,13 @@ The input counter is text that displays under an input to notify the user of how The `counter` and `counterFormatter` properties on `ion-item` were [deprecated in Ionic 7](/docs/api/input#using-the-modern-syntax) and should be used directly on `ion-input` instead. -import Counter from '@site/static/usage/v10/input/counter/index.md'; +import Counter from '@site/static/usage/v10/input/counter/index.mdx'; Inputs with a counter add a border between the input and the counter, therefore they should not be placed inside of an `ion-item` which adds an additional border under the item. The `ion-padding-start` class can be added to align the counter inputs with inputs inside of items. -import CounterAlignment from '@site/static/usage/v10/input/counter-alignment/index.md'; +import CounterAlignment from '@site/static/usage/v10/input/counter-alignment/index.mdx'; @@ -126,7 +127,7 @@ Developers can use the `ionInput` event to update the input value in response to When storing the value in a state variable, we recommend updating both the state variable and the `ion-input` component value. This ensures that the state variable and the `ion-input` component value remain in sync. -import FilteringData from '@site/static/usage/v10/input/filtering/index.md'; +import FilteringData from '@site/static/usage/v10/input/filtering/index.mdx'; @@ -140,7 +141,7 @@ To get started with Maskito, install the library: npm install @maskito/core @maskito/{angular,react,vue} ``` -import Masking from '@site/static/usage/v10/input/mask/index.md'; +import Masking from '@site/static/usage/v10/input/mask/index.mdx'; @@ -157,12 +158,14 @@ The `start` and `end` slots can be used to place icons, buttons, or prefix/suffi Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior. :::note + In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. Refer to the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information. If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to. + ::: -import StartEndSlots from '@site/static/usage/v10/input/start-end-slots/index.md'; +import StartEndSlots from '@site/static/usage/v10/input/start-end-slots/index.mdx'; @@ -173,10 +176,12 @@ import StartEndSlots from '@site/static/usage/v10/input/start-end-slots/index.md Setting the `color` property changes the color palette for each input. On `ios` mode, this property changes the caret color. On `md` mode, this property changes the caret color and the highlight/underline color. :::note -The `color` property does *not* change the text color of the input. For that, use the [`--color` CSS property](#css-custom-properties-1). + +The `color` property does _not_ change the text color of the input. For that, use the [`--color` CSS property](#css-custom-properties-1). + ::: -import Colors from '@site/static/usage/v10/input/theming/colors/index.md'; +import Colors from '@site/static/usage/v10/input/theming/colors/index.mdx'; @@ -184,7 +189,7 @@ import Colors from '@site/static/usage/v10/input/theming/colors/index.md'; Input uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-input` for customization will not work; therefore we recommend adding a class and customizing it that way. -import CSSProps from '@site/static/usage/v10/input/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v10/input/theming/css-properties/index.mdx'; @@ -209,21 +214,26 @@ interface InputCustomEvent extends CustomEvent { } ``` - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md index 61934ffedc6..24399c2fda2 100644 --- a/docs/api/item-divider.md +++ b/docs/api/item-divider.md @@ -1,63 +1,68 @@ --- -title: "ion-item-divider" +title: 'ion-item-divider' --- -import Props from '@ionic-internal/component-api/v10/item-divider/props.md'; -import Events from '@ionic-internal/component-api/v10/item-divider/events.md'; -import Methods from '@ionic-internal/component-api/v10/item-divider/methods.md'; -import Parts from '@ionic-internal/component-api/v10/item-divider/parts.md'; + +import Props from '@ionic-internal/component-api/v10/item-divider/props.mdx'; +import Events from '@ionic-internal/component-api/v10/item-divider/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/item-divider/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/item-divider/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/item-divider/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/item-divider/slots.md'; +import Slots from '@ionic-internal/component-api/v10/item-divider/slots.mdx'; ion-item-divider: Item Divider Block Element for Ionic Apps - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Item dividers are block elements that can be used to separate [items](./item) in a list. They are similar to list headers, but instead of only being placed at the top of a list, they should go in between groups of items. - ## Basic Usage -import Basic from '@site/static/usage/v10/item-divider/basic/index.md'; +import Basic from '@site/static/usage/v10/item-divider/basic/index.mdx'; - ## Theming ### Colors -import Colors from '@site/static/usage/v10/item-divider/theming/colors/index.md'; +import Colors from '@site/static/usage/v10/item-divider/theming/colors/index.mdx'; - ### CSS Custom Properties -import CSSProps from '@site/static/usage/v10/item-divider/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v10/item-divider/theming/css-properties/index.mdx'; - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/item-group.md b/docs/api/item-group.md index dcc78027d56..66e38fe76df 100644 --- a/docs/api/item-group.md +++ b/docs/api/item-group.md @@ -1,50 +1,58 @@ --- -title: "ion-item-group" +title: 'ion-item-group' --- -import Props from '@ionic-internal/component-api/v10/item-group/props.md'; -import Events from '@ionic-internal/component-api/v10/item-group/events.md'; -import Methods from '@ionic-internal/component-api/v10/item-group/methods.md'; -import Parts from '@ionic-internal/component-api/v10/item-group/parts.md'; + +import Props from '@ionic-internal/component-api/v10/item-group/props.mdx'; +import Events from '@ionic-internal/component-api/v10/item-group/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/item-group/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/item-group/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/item-group/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/item-group/slots.md'; +import Slots from '@ionic-internal/component-api/v10/item-group/slots.mdx'; ion-item-group: Group Items to Divide into Multiple Sections - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Item groups are containers that organize similar [items](./item) together. They can contain [item dividers](./item-divider) to divide the items into multiple sections. They can also be used to group [sliding items](./item-sliding). ## Basic Usage -import Basic from '@site/static/usage/v10/item-group/basic/index.md'; +import Basic from '@site/static/usage/v10/item-group/basic/index.mdx'; ## Sliding Items -import SlidingItems from '@site/static/usage/v10/item-group/sliding-items/index.md'; +import SlidingItems from '@site/static/usage/v10/item-group/sliding-items/index.mdx'; - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/item-option.md b/docs/api/item-option.md index 21fdd6f4f89..c20db63ac9c 100644 --- a/docs/api/item-option.md +++ b/docs/api/item-option.md @@ -1,42 +1,50 @@ --- -title: "ion-item-option" +title: 'ion-item-option' --- -import Props from '@ionic-internal/component-api/v10/item-option/props.md'; -import Events from '@ionic-internal/component-api/v10/item-option/events.md'; -import Methods from '@ionic-internal/component-api/v10/item-option/methods.md'; -import Parts from '@ionic-internal/component-api/v10/item-option/parts.md'; + +import Props from '@ionic-internal/component-api/v10/item-option/props.mdx'; +import Events from '@ionic-internal/component-api/v10/item-option/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/item-option/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/item-option/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/item-option/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/item-option/slots.md'; +import Slots from '@ionic-internal/component-api/v10/item-option/slots.mdx'; ion-item-option: Option Button for Sliding Item in Ionic - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - The item option component is an button for a sliding item. It must be placed inside of [item options](./item-options). The `ionSwipe` event and the `expandable` property can be combined to create a full swipe action for the item. Refer to the [item sliding](./item-sliding) documentation for more information. - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/item-options.md b/docs/api/item-options.md index 75cff741cc7..b5202cea7ff 100644 --- a/docs/api/item-options.md +++ b/docs/api/item-options.md @@ -1,50 +1,55 @@ --- -title: "ion-item-options" +title: 'ion-item-options' --- -import Props from '@ionic-internal/component-api/v10/item-options/props.md'; -import Events from '@ionic-internal/component-api/v10/item-options/events.md'; -import Methods from '@ionic-internal/component-api/v10/item-options/methods.md'; -import Parts from '@ionic-internal/component-api/v10/item-options/parts.md'; + +import Props from '@ionic-internal/component-api/v10/item-options/props.mdx'; +import Events from '@ionic-internal/component-api/v10/item-options/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/item-options/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/item-options/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/item-options/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/item-options/slots.md'; +import Slots from '@ionic-internal/component-api/v10/item-options/slots.mdx'; ion-item-options: Option Button Components for Ionic Apps - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - The item options component is a container for the [item option](./item-option) buttons in a sliding item. These buttons can be placed either on the [start or end side](#side-description). Refer to the [item sliding](./item-sliding) documentation for more information. - ## Side Description | Side | Position | Swipe Direction | -|---------|-----------------------------------------------------------------|-------------------------------------------------------------------| +| ------- | --------------------------------------------------------------- | ----------------------------------------------------------------- | | `start` | To the `left` of the content in LTR, and to the `right` in RTL. | From `left` to `right` in LTR, and from `right` to `left` in RTL. | | `end` | To the `right` of the content in LTR, and to the `left` in RTL. | From `right` to `left` in LTR, and from `left` to `right` in RTL. | - - - ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md index f084ad5c5f2..fa860d19d6d 100644 --- a/docs/api/item-sliding.md +++ b/docs/api/item-sliding.md @@ -1,51 +1,50 @@ --- -title: "ion-item-sliding" +title: 'ion-item-sliding' --- -import Props from '@ionic-internal/component-api/v10/item-sliding/props.md'; -import Events from '@ionic-internal/component-api/v10/item-sliding/events.md'; -import Methods from '@ionic-internal/component-api/v10/item-sliding/methods.md'; -import Parts from '@ionic-internal/component-api/v10/item-sliding/parts.md'; + +import Props from '@ionic-internal/component-api/v10/item-sliding/props.mdx'; +import Events from '@ionic-internal/component-api/v10/item-sliding/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/item-sliding/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/item-sliding/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/item-sliding/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/item-sliding/slots.md'; +import Slots from '@ionic-internal/component-api/v10/item-sliding/slots.mdx'; ion-item-sliding: Slide Buttons | Slide Right to Left - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - A sliding item contains an item that can be dragged to reveal option buttons. It requires an [item](./item) component as a child. All options to reveal should be placed in the [item options](./item-options) element. - ## Basic Usage Sliding item options are placed on the `"end"` side of the item by default. This means that options are revealed when the item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the side attribute to `"start"` on the [item options](./item-options) element. Up to two item options can be used at the same time in order to reveal two different sets of options depending on the swiping direction. -import Basic from '@site/static/usage/v10/item-sliding/basic/index.md'; +import Basic from '@site/static/usage/v10/item-sliding/basic/index.mdx'; - ## Icon Options When an icon is placed alongside text in the [item option](./item-option), it will display the icon on top of the text by default. The slot on the icon can be changed to any of the available [item option slots](./item-option#slots) to change its position. -import Icons from '@site/static/usage/v10/item-sliding/icons/index.md'; +import Icons from '@site/static/usage/v10/item-sliding/icons/index.mdx'; - ## Expandable Options Options can be expanded to take up the full width of the parent `ion-item` if you swipe past a certain point. This can be combined with the `ionSwipe` event on the [item options](./item-options) to call a method when the item is fully swiped. -import Expandable from '@site/static/usage/v10/item-sliding/expandable/index.md'; +import Expandable from '@site/static/usage/v10/item-sliding/expandable/index.mdx'; - ## Interfaces ### ItemSlidingCustomEvent @@ -59,19 +58,25 @@ interface ItemSlidingCustomEvent extends CustomEvent { ``` ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/item.md b/docs/api/item.md index 30dfd055aa3..c515b75805c 100644 --- a/docs/api/item.md +++ b/docs/api/item.md @@ -1,12 +1,13 @@ --- -title: "ion-item" +title: 'ion-item' --- -import Props from '@ionic-internal/component-api/v10/item/props.md'; -import Events from '@ionic-internal/component-api/v10/item/events.md'; -import Methods from '@ionic-internal/component-api/v10/item/methods.md'; -import Parts from '@ionic-internal/component-api/v10/item/parts.md'; + +import Props from '@ionic-internal/component-api/v10/item/props.mdx'; +import Events from '@ionic-internal/component-api/v10/item/events.mdx'; +import Methods from '@ionic-internal/component-api/v10/item/methods.mdx'; +import Parts from '@ionic-internal/component-api/v10/item/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v10/item/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v10/item/slots.md'; +import Slots from '@ionic-internal/component-api/v10/item/slots.mdx'; import useBaseUrl from '@docusaurus/useBaseUrl'; import BestPracticeFigure from '@components/global/BestPracticeFigure'; @@ -15,7 +16,10 @@ import TabItem from '@theme/TabItem'; ion-item: Input, Edit, or Delete iOS and Android Item Elements - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -24,16 +28,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Items should only be used as rows in a [List](./list) with other items. Items can be swiped, deleted, reordered, edited, and more. - ## Basic Usage Items left align text and wrap when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-nowrap` in the below example. Refer to the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text. -import Basic from '@site/static/usage/v10/item/basic/index.md'; +import Basic from '@site/static/usage/v10/item/basic/index.mdx'; - ## Content Types While items in a list take many forms, they typically support 5 different content types: supporting visuals, text, metadata, actions, and controls. However, not all of these content types should be used together at the same time. The following guide shows the different content types as well as how to properly utilize them in an application. @@ -48,13 +50,23 @@ If a visual is required to interact with the item, such as an icon button, then text="Supporting visuals should be rendered in a consistent manner. This makes the information in each item easier to parse." doText="Align visuals on the same side in a list" doNotText="Don't render visuals with different alignments in the same list" - doImage={A list with several items. Each item has an icon and visible text describing the item. The icon in each item is rendered at the start of the line.} - doNotImage={A list with several items. Each item has an icon and visible text describing the item. Some icons are rendered at the start of the line, and some icons are rendered at the end of the line} + doImage={ + A list with several items. Each item has an icon and visible text describing the item. The icon in each item is rendered at the start of the line. + } + doNotImage={ + A list with several items. Each item has an icon and visible text describing the item. Some icons are rendered at the start of the line, and some icons are rendered at the end of the line + } /> In the example below, we are creating two lists with supporting visuals. The first list uses icons, and the second list uses avatars. The visuals are decorative, so they all have `aria-hidden="true"`. Additionally, they are presented consistently in the `start` slot. -import SupportingVisuals from '@site/static/usage/v10/item/content-types/supporting-visuals/index.md'; +import SupportingVisuals from '@site/static/usage/v10/item/content-types/supporting-visuals/index.mdx'; @@ -63,11 +75,27 @@ import SupportingVisuals from '@site/static/usage/v10/item/content-types/support The text content type includes form control labels or other visible text. This text serves to indicate the intent of the item. Try to keep the text short and to the point. If you find that you need a few more sentences to clarify the item's purpose, consider moving the additional sentences to a Note at the bottom of the list. Adding the item to its own list makes it clear which item the text is associated with.} + text={ + <> + If you find that you need a few more sentences to clarify the item's purpose, consider moving the additional + sentences to a Note at the bottom of the list. Adding the item to its own + list makes it clear which item the text is associated with. + + } doText="Move long text outside of the list" doNotText="Don't try to fit long text in an item" - doImage={A list with an item that contains a checked checkbox indicating the user wants to receive emails. Text describing how often the user will receive emails as well as how to unsubscribe from emails is placed underneath the list.} - doNotImage={A list with an item that contains a checked checkbox indicating the user wants to receive emails. Text describing how often the user will receive emails as well as how to unsubscribe from emails is placed as a single paragraph inline with the checkbox, making the text hard to read and increasing the height of the item.} + doImage={ + A list with an item that contains a checked checkbox indicating the user wants to receive emails. Text describing how often the user will receive emails as well as how to unsubscribe from emails is placed underneath the list. + } + doNotImage={ + A list with an item that contains a checked checkbox indicating the user wants to receive emails. Text describing how often the user will receive emails as well as how to unsubscribe from emails is placed as a single paragraph inline with the checkbox, making the text hard to read and increasing the height of the item. + } /> In the example below, we are creating a list with different types of text. The "First Name" and "Last Name" labels serve to indicate what to type into the text inputs. @@ -76,7 +104,7 @@ The "Allow Notifications" label on the toggle has additional text underneath it Below that list is another list containing a textarea with a [Note](./note) containing long text underneath. The textarea was placed in its own list to make it apparent that the long text is associated with the textarea and not any other fields. -import Text from '@site/static/usage/v10/item/content-types/text/index.md'; +import Text from '@site/static/usage/v10/item/content-types/text/index.mdx'; @@ -88,23 +116,43 @@ Metadata provides additional context for an item such as status text or counts. text="Limit the amount of metadata you include to only the most relevant information." doText="Add only the most important metadata" doNotText="Don't add too much metadata as it can overwhelm or confuse the user." - doImage={A list that contains several items, each representing a different to-do list. A count of how many tasks in each to-do list is placed at the end of each item.} - doNotImage={A list that contains several items, each representing a different to-do list. Two counts are placed at the end of each item: One count that states the total number of tasks, and another count that states the total number of tasks that are due today.} + doImage={ + A list that contains several items, each representing a different to-do list. A count of how many tasks in each to-do list is placed at the end of each item. + } + doNotImage={ + A list that contains several items, each representing a different to-do list. Two counts are placed at the end of each item: One count that states the total number of tasks, and another count that states the total number of tasks that are due today. + } /> } - cautionImage={A list that contains several items, each representing a different to-do list. A count of how many tasks in each to-do list is placed at the end of each item. However, the count is highlighted in blue which draws the user's attention away from the name of the to-do list.} + doImage={ + A list that contains several items, each representing a different to-do list. A count of how many tasks in each to-do list is placed at the end of each item. + } + cautionImage={ + A list that contains several items, each representing a different to-do list. A count of how many tasks in each to-do list is placed at the end of each item. However, the count is highlighted in blue which draws the user's attention away from the name of the to-do list. + } /> In the example below, we are creating two lists with different kinds of metadata. The first list uses [Note](./note) to show how many tasks are in each to-do list. The second list mimics the iOS Mail app to show an inbox. This list makes use of custom metadata including an "unread message" indicator in the "start" slot as well as a timestamp and custom detail icon in the "end" slot. The "unread message" indicator is highlighted in blue to draw the user's attention to the unread messages, while the timestamp is more subtle. -import Metadata from '@site/static/usage/v10/item/content-types/metadata/index.md'; +import Metadata from '@site/static/usage/v10/item/content-types/metadata/index.mdx'; @@ -112,19 +160,40 @@ import Metadata from '@site/static/usage/v10/item/content-types/metadata/index.m Actions are interactive elements that do something when you activate them. An item can have multiple actions displayed on a line. However, developers should ensure that each action's tap target is large enough to be usable. -Developers should avoid creating nested interactives which can break the user experience with screen readers. For example, developers should avoid adding a button inside the main content of the Item if the `button` property is set to `true`. +Developers should avoid creating [nested interactives](https://dequeuniversity.com/rules/axe/4.4/nested-interactive) which can break the user experience with screen readers. For example, developers should avoid adding a button inside the main content of the Item if the `button` property is set to `true`. Actions can be added by using the Item Sliding component. Actions can also be placed directly inside of the Item without the use of Item Sliding, but this should be limited to no more than 2 actions.} - doText={<>Use an Item Sliding to reveal multiple actions by swiping on the Item.} + text={ + <> + Actions can be added by using the Item Sliding component. Actions can + also be placed directly inside of the Item without the use of Item Sliding, but this should be limited to no more + than 2 actions. + + } + doText={ + <> + Use an Item Sliding to reveal multiple actions by swiping on the + Item. + + } doNotText="Don't put more than 2 actions within an Item." - doImage={A list that contains several items, each representing a contact. Each item has text that states the contact's name as well as several actions including pinning the contact, sharing the contact, and deleting the contact. These actions are revealed by swiping on the item.} - doNotImage={A list that contains several items, each representing a contact. Each item has text that states the contact's name as well as several actions including pinning the contact, sharing the contact, and deleting the contact. The actions are placed directly on the item. Since there are so many actions, some of the text is cut off.} + doImage={ + A list that contains several items, each representing a contact. Each item has text that states the contact's name as well as several actions including pinning the contact, sharing the contact, and deleting the contact. These actions are revealed by swiping on the item. + } + doNotImage={ + A list that contains several items, each representing a contact. Each item has text that states the contact's name as well as several actions including pinning the contact, sharing the contact, and deleting the contact. The actions are placed directly on the item. Since there are so many actions, some of the text is cut off. + } /> In the example below, we are creating a list of contacts. Each item is a stubbed button intended to bring you to the full contact page for that item. There are additional actions associated with each item that users can reveal by swiping on the item. -import Actions from '@site/static/usage/v10/item/content-types/actions/index.md'; +import Actions from '@site/static/usage/v10/item/content-types/actions/index.mdx'; @@ -133,45 +202,90 @@ import Actions from '@site/static/usage/v10/item/content-types/actions/index.md' Controls are form components such as checkboxes, inputs, radios, and more. Each item in a list should have at most two controls due to screen space constraints. Metadata such as helper text or character counts should not be used on form controls in list views. If such metadata is needed, the form control should be placed outside of a list. Filled Inputs are a great way of visually defining the input container outside of a list.} + text={ + <> + Metadata such as helper text or character counts should not be used on form controls in list views. If such + metadata is needed, the form control should be placed outside of a list.{' '} + Filled Inputs are a great way of visually defining the input + container outside of a list. + + } doText="Place inputs with metadata outside of the list." doNotText="Don't put metadata for inputs in the list." - doImage={There is an email input and a password input. Both have helper text associated with them. Since both are placed outside of a list it is clear which input each helper text is associated with.} - doNotImage={There is a list containing an email input and a password input. Both have helper texts associated with them. However, the divider between each item and between the helper text makes it hard to tell which input each helper text is associated with.} + doImage={ + There is an email input and a password input. Both have helper text associated with them. Since both are placed outside of a list it is clear which input each helper text is associated with. + } + doNotImage={ + There is a list containing an email input and a password input. Both have helper texts associated with them. However, the divider between each item and between the helper text makes it hard to tell which input each helper text is associated with. + } /> Alternatively, the metadata can be placed in a Note at the bottom of the list.} + text={ + <> + Alternatively, the metadata can be placed in a Note at the bottom of the + list. + + } doText="Place metadata for inputs at the end of a list." doNotText="Don't put metadata for inputs in the list." - doImage={There are two lists of inputs. The first list contains a password input. Below that list contains text that says 'Password must be at least 16 characters'. The second list contains an email input. This second list is separated so the password length requirement text is clearly associated with the password input above.} - doNotImage={There is one list of inputs. One of the inputs is a password input with text below the input that says 'Password must be at least 16 characters'. However, this text is placed directly above another input, so it's not immediately clear which input the text is associated with.} + doImage={ + There are two lists of inputs. The first list contains a password input. Below that list contains text that says 'Password must be at least 16 characters'. The second list contains an email input. This second list is separated so the password length requirement text is clearly associated with the password input above. + } + doNotImage={ + There is one list of inputs. One of the inputs is a password input with text below the input that says 'Password must be at least 16 characters'. However, this text is placed directly above another input, so it's not immediately clear which input the text is associated with. + } /> Items should typically have no more than two controls. If you need more controls, consider adding the additional controls in a Modal that is accessible from the item.} + text={ + <> + Items should typically have no more than two controls. If you need more controls, consider adding the additional + controls in a Modal that is accessible from the item. + + } doText="Move additional controls to a submenu accessible from the item." doNotText="Don't use more than two controls within an item." - doImage={There is one list of inputs. One of the inputs is a password input with text below the input that says 'Password must be at least 16 characters'. However, this text is placed directly above another input, so it's not immediately clear which input the text is associated with.} - doNotImage={There are two lists of inputs. The first list contains a password input. Below that list contains text that says 'Password must be at least 16 characters'. The second list contains an email input. This second list is separated so the password length requirement text is clearly associated with the password input above.} + doImage={ + There is one list of inputs. One of the inputs is a password input with text below the input that says 'Password must be at least 16 characters'. However, this text is placed directly above another input, so it's not immediately clear which input the text is associated with. + } + doNotImage={ + There are two lists of inputs. The first list contains a password input. Below that list contains text that says 'Password must be at least 16 characters'. The second list contains an email input. This second list is separated so the password length requirement text is clearly associated with the password input above. + } /> In the example below, we are creating a list of to-do tasks. Each item has a checkbox and an input. The checkbox lets the user mark a task as complete, and the input lets the user change the name of the task. -import Controls from '@site/static/usage/v10/item/content-types/controls/index.md'; +import Controls from '@site/static/usage/v10/item/content-types/controls/index.mdx'; - ## Clickable Items An item is considered "clickable" if it has an `href`, `button`, or `routerLink` property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in `md` mode, has a highlight when activated in `ios` mode, and has a [detail arrow](#detail-arrows) by default in `ios` mode. -import Clickable from '@site/static/usage/v10/item/clickable/index.md'; +import Clickable from '@site/static/usage/v10/item/clickable/index.mdx'; - ## Routing Items support client-side navigation using the `routerLink` property. Setting `routerLink` renders the item as an anchor and navigates to the specified route when tapped. The `routerDirection` property controls the transition animation direction, and `routerAnimation` accepts a custom animation builder. @@ -274,12 +388,11 @@ In Vue, use the `router-link` attribute on `ion-item`. The `router-direction` an - ## Detail Arrows By default [clickable items](#clickable-items) will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, set the `detail` property to `true`. -import DetailArrows from '@site/static/usage/v10/item/detail-arrows/index.md'; +import DetailArrows from '@site/static/usage/v10/item/detail-arrows/index.mdx'; @@ -287,7 +400,7 @@ import DetailArrows from '@site/static/usage/v10/item/detail-arrows/index.md'; Items show an inset bottom border by default. The border has padding on the left and does not appear under any content that is slotted in the `"start"` slot. The `lines` property can be modified to `"full"` or `"none"` which will show a full width border or no border, respectively. -import Lines from '@site/static/usage/v10/item/lines/index.md'; +import Lines from '@site/static/usage/v10/item/lines/index.mdx'; @@ -295,13 +408,13 @@ import Lines from '@site/static/usage/v10/item/lines/index.md'; Buttons are styled smaller inside of items than when they are outside of them. To make the button size match buttons outside of an item, set the `size` attribute to `"default"`. -import Buttons from '@site/static/usage/v10/item/buttons/index.md'; +import Buttons from '@site/static/usage/v10/item/buttons/index.mdx'; ## Item Inputs -import Inputs from '@site/static/usage/v10/item/inputs/index.md'; +import Inputs from '@site/static/usage/v10/item/inputs/index.mdx'; @@ -309,19 +422,19 @@ import Inputs from '@site/static/usage/v10/item/inputs/index.md'; ### Colors -import Colors from '@site/static/usage/v10/item/theming/colors/index.md'; +import Colors from '@site/static/usage/v10/item/theming/colors/index.mdx'; ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v10/item/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v10/item/theming/css-shadow-parts/index.mdx'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v10/item/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v10/item/theming/css-properties/index.mdx'; @@ -339,6 +452,7 @@ The following guidelines will help ensure your list items are easy to understand ### Keyboard Interactions An `` has the following keyboard interactions when any of these conditions are met: + - The `button` property is set to `"true"`, rendering a native `