perrygovier · soundproofboot · Jul 3, 2025 · Jul 3, 2025 · Jul 3, 2025 · Jul 7, 2025
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -2,21 +2,24 @@
 
 Thanks for your interest in contributing to Ionic's documentation! :tada: Check the guidelines below for suggestions and requirements before submitting your contribution.
 
-- [Contributing Guide](#contributing-guide)
-  - [Development Workflow](#development-workflow)
-    - [Previewing Changes](#previewing-changes)
-    - [Linting Documentation](#linting-documentation)
-    - [Spell Check](#spell-check)
-  - [Using VS Code on Windows](#using-vs-code-on-windows)
-  - [Project Structure](#project-structure)
-    - [Directories](#directories)
-  - [Authoring Content](#authoring-content)
-    - [Authoring Locally](#authoring-locally)
-  - [Translation](#translation)
-  - [Reporting Issues](#reporting-issues)
-  - [Pull Request Guidelines](#pull-request-guidelines)
-  - [Deploying](#deploying)
-  - [License](#license)
+<sub>
+  <b>TABLE OF CONTENTS</b>
+</sub>
+
+- [Development Workflow](#development-workflow)
+  - [Previewing Changes](#previewing-changes)
+  - [Linting Documentation](#linting-documentation)
+  - [Spell Check](#spell-check)
+- [Using VS Code on Windows](#using-vs-code-on-windows)
+- [Project Structure](#project-structure)
+  - [Directories](#directories)
+- [Authoring Content](#authoring-content)
+  - [Reference Content](#reference-content)
+- [Translation](#translation)
+- [Reporting Issues](#reporting-issues)
+- [Pull Request Guidelines](#pull-request-guidelines)
+- [Deploying](#deploying)
+- [License](#license)
 
 ---
 

diff --git a/docs/components.md b/docs/components.md
@@ -19,14 +19,18 @@ import DocsCards from '@components/global/DocsCards';
   `}</style>
 </head>
 
-Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component.
+Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component.
 
 <intro-end />
 
 <DocsCards>
-  <DocsCard header="Action Sheet" href="api/action-sheet" img="/icons/feature-component-actionsheet-icon.png">
-    <p>Action Sheets display a set of options with the ability to confirm or cancel an action.</p>
-  </DocsCard>
+<DocsCard header="Accordion" href="api/accordion" img="/icons/feature-component-accordion-icon.png">
+  <p>Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information.</p>
+</DocsCard>
+
+<DocsCard header="Action Sheet" href="api/action-sheet" icon="/icons/component-action-sheet-icon.png">
+  <p>Action Sheets display a set of options with the ability to confirm or cancel an action.</p>
+</DocsCard>
 
 <DocsCard header="Alert" href="api/alert" icon="/icons/component-alert-icon.png">
   <p>Alerts are a great way to offer the user the ability to choose a specific action or list of actions.</p>
@@ -36,13 +40,18 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <p>Badges are a small component that typically communicate a numerical value to the user.</p>
 </DocsCard>
 
+<DocsCard header="Breadcrumbs" href="api/breadcrumbs" icon="/icons/component-breadcrumbs-icon.png">
+  <p>Breadcrumbs are navigation items that are used to indicate where a user is on an app.</p>
+</DocsCard>
+
 <DocsCard header="Button" href="api/button" icon="/icons/component-button-icon.png">
   <p>Buttons let your users take action. They're an essential way to interact with and navigate through an app.</p>
 </DocsCard>
 
 <DocsCard header="Card" href="api/card" icon="/icons/component-card-icon.png">
-  <!-- prettier-ignore -->
-  <p>Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.</p>
+  <p>
+    Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.
+  </p>
 </DocsCard>
 
 <DocsCard header="Checkbox" href="api/checkbox" icon="/icons/component-checkbox-icon.png">
@@ -57,40 +66,46 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <p>Content is the quintessential way to interact with and navigate through an app.</p>
 </DocsCard>
 
-<DocsCard header="Date & Time Pickers" href="api/datetime" icon="/icons/component-datetimepicker-icon.png">
+<DocsCard header="Date & Time Pickers" href="api/datetime" img="/icons/feature-component-datetime-icon.png">
   <p>Date & time pickers are used to present an interface that makes it easy for users to select dates and times.</p>
 </DocsCard>
 
 <DocsCard header="Floating Action Button" href="api/fab" icon="/icons/component-fab-icon.png">
   <p>Floating action buttons are circular buttons that perform a primary action on a screen.</p>
 </DocsCard>
 
-<DocsCard header="Icons" href="api/icon" img="/icons/feature-component-icons-icon.png">
-  <p>Beautifully designed icons for use in web, iOS, and Android apps.</p>
-</DocsCard>
-
 <DocsCard header="Grid" href="api/grid" icon="/icons/component-grid-icon.png">
   <p>The grid is a powerful mobile-first system for building custom layouts.</p>
 </DocsCard>
 
+<DocsCard header="Icons" href="api/icon" icon="/icons/component-icons-icon.png">
+  <p>Beautifully designed icons for use in web, iOS, and Android apps.</p>
+</DocsCard>
+
 <DocsCard header="Infinite Scroll" href="api/infinite-scroll" icon="/icons/component-infinitescroll-icon.png">
   <p>Infinite scroll allows you to load new data as the user scrolls through your app.</p>
 </DocsCard>
 
-<DocsCard header="Input" href="api/input" icon="/icons/component-input-icon.png">
+<DocsCard header="Inputs" href="api/input" icon="/icons/component-input-icon.png">
   <p>Inputs provides a way for users to enter data in your app.</p>
 </DocsCard>
 
-<DocsCard header="Item" href="api/item" icon="/icons/component-item-icon.png">
-  <p>Items are an all-purpose UI container that can be used as part of a list.</p>
+<DocsCard header="Item" href="api/item" img="/icons/feature-component-item-icon.png">
+  <p>
+    Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements.
+    Items can be swiped, deleted, reordered, edited, and more.
+  </p>
 </DocsCard>
 
 <DocsCard header="List" href="api/list" icon="/icons/component-lists-icon.png">
   <p>Lists can display rows of information, such as a contact list, playlist, or menu.</p>
 </DocsCard>
 
-<DocsCard header="Navigation" href="api/nav" img="/icons/feature-component-navigation-icon.png">
-  <p>Navigation is how users move between different pages in your app.</p>
+<DocsCard header="Media" href="api/avatar" icon="/icons/component-media-icon.png">
+  <p>
+    A collection of media components, including avatars, icons, images, and thumbnails, designed to enhance visual
+    content.
+  </p>
 </DocsCard>
 
 <DocsCard header="Menu" href="api/menu" icon="/icons/component-menu-icon.png">
@@ -101,6 +116,10 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <p>Modals slide in and off screen to display a temporary UI and are often used for login or sign-up pages.</p>
 </DocsCard>
 
+<DocsCard header="Navigation" href="api/nav" icon="/icons/component-navigation-icon.png">
+  <p>Navigation is how users move between different pages in your app.</p>
+</DocsCard>
+
 <DocsCard header="Popover" href="api/popover" icon="/icons/component-popover-icon.png">
   <p>Popover provides an easy way to present information or options without changing contexts.</p>
 </DocsCard>
@@ -113,12 +132,12 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <p>Radio inputs allow you to present a set of exclusive options.</p>
 </DocsCard>
 
-<DocsCard header="Refresher" href="api/refresher" icon="/icons/component-refresher-icon.png">
-  <p>Refresher provides pull-to-refresh functionality on a content component.</p>
+<DocsCard header="Range" href="api/range" icon="/icons/component-range-icon.png">
+  <p>Range sliders let users select a value by dragging a knob along a track.</p>
 </DocsCard>
 
-<DocsCard header="Searchbar" href="api/searchbar" img="/icons/feature-component-search-icon.png">
-  <p>Searchbar is used to search or filter items, usually from a toolbar.</p>
+<DocsCard header="Refresher" href="api/refresher" img="/icons/feature-component-refresher-icon.png">
+  <p>Refresher provides pull-to-refresh functionality on a content component.</p>
 </DocsCard>
 
 <DocsCard header="Reorder" href="api/reorder" icon="/icons/component-reorder-icon.png">
@@ -129,6 +148,10 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <p>Routing allows navigation based on the current path.</p>
 </DocsCard>
 
+<DocsCard header="Searchbar" href="api/searchbar" icon="/icons/component-searchbar-icon.png">
+  <p>Searchbar is used to search or filter items, usually from a toolbar.</p>
+</DocsCard>
+
 <DocsCard header="Segment" href="api/segment" icon="/icons/component-segment-icon.png">
   <p>Segments provide a set of exclusive buttons that can be used as a filter or view switcher.</p>
 </DocsCard>
@@ -142,14 +165,18 @@ Ionic apps are made of high-level building blocks called Components, which allow
 </DocsCard>
 
 <DocsCard header="Toast" href="api/toast" icon="/icons/component-toast-icon.png">
-  <p>Toast is used to show a notification over the top of an app's content. It can be temporary or dismissible.</p>
+  <p>Toasts are subtle notifications that appear over your app's content without interrupting user interaction.</p>
 </DocsCard>
 
 <DocsCard header="Toggle" href="api/toggle" icon="/icons/component-toggle-icon.png">
   <p>Toggles are an input for binary options, often used for options and switches.</p>
 </DocsCard>
 
-  <DocsCard header="Toolbar" href="api/toolbar" icon="/icons/component-toolbar-icon.png">
-    <p>Toolbars are used to house information and actions relating to your app.</p>
-  </DocsCard>
+<DocsCard header="Toolbar" href="api/toolbar" icon="/icons/component-toolbar-icon.png">
+  <p>Toolbars are used to house information and actions relating to your app.</p>
+</DocsCard>
+
+<DocsCard header="Typography" href="api/text" icon="/icons/component-typography-icon.png">
+  <p>Text is used to style or change the color of text within an application.</p>
+</DocsCard>
 </DocsCards>
diff --git a/docs/developing/config.md b/docs/developing/config.md
@@ -51,6 +51,14 @@ import PerPlatformOverridesExample from '@site/docs/developing/config/per-platfo
 
 <PerPlatformOverridesExample />
 
+## Accessing the Mode
+
+In some cases, you may need to access the current Ionic mode programmatically within your application logic. This can be useful for applying conditional behavior, fetching specific assets, or performing other actions based on the active styling mode.
+
+import IonicMode from '@site/static/usage/v8/config/mode/index.md';
+
+<IonicMode />
+
 ## Reading the Config (Angular)
 
 Ionic Angular provides a `Config` provider for accessing the Ionic Config.

diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md
@@ -120,7 +120,7 @@ This approach activates the high contrast palette when the [CSS media query for
 The following example uses the system settings to decide when to show high contrast mode.
 
 :::info
-Not sure how to change the system settings? Here's how to enable high contrast mode on [Windows 11](hhttps://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) and on [macOS](https://support.apple.com/guide/mac-help/change-display-settings-for-accessibility-unac089/mac).
+Not sure how to change the system settings? Here's how to enable high contrast mode on [Windows 11](https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) and on [macOS](https://support.apple.com/guide/mac-help/change-display-settings-for-accessibility-unac089/mac).
 :::
 
 import SystemHighContrastMode from '@site/static/usage/v8/theming/system-high-contrast-mode/index.md';
@@ -178,7 +178,7 @@ This approach activates the high contrast palette when the `.ion-palette-high-co
 The following example combines site settings, system settings, and the toggle to decide when to show high contrast mode. The site's palette takes precedence over system settings. If your system settings differ from the site's palette when the demo loads, it will use the site's palette.
 
 :::info
-Not sure how to change the system settings? Here's how to enable high contrast mode on [Windows 11](hhttps://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) and on [macOS](https://support.apple.com/guide/mac-help/change-display-settings-for-accessibility-unac089/mac).
+Not sure how to change the system settings? Here's how to enable high contrast mode on [Windows 11](https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) and on [macOS](https://support.apple.com/guide/mac-help/change-display-settings-for-accessibility-unac089/mac).
 :::
 
 import ClassHighContrastMode from '@site/static/usage/v8/theming/class-high-contrast-mode/index.md';

diff --git a/renovate.json b/renovate.json
@@ -22,6 +22,13 @@
       "matchPackageNames": ["react", "react-dom"],
       "groupName": "react"
     },
+    {
+      "matchPackageNames": ["vite", "vite-plugin-static-copy"],
+      "groupName": "vite-html",
+      "matchFileNames": [
+        "static/code/stackblitz/**/html/package.json"
+      ]
+    },
     {
       "matchPackageNames": ["vite", "@vitejs/plugin-react"],
       "groupName": "vite-react",

diff --git a/sidebars.js b/sidebars.js
@@ -252,15 +252,15 @@ module.exports = {
     },
     {
       type: 'category',
-      label: 'Action Sheet',
+      label: 'Accordion',
       collapsed: false,
-      items: ['api/action-sheet'],
+      items: ['api/accordion', 'api/accordion-group'],
     },
     {
       type: 'category',
-      label: 'Accordion',
+      label: 'Action Sheet',
       collapsed: false,
-      items: ['api/accordion', 'api/accordion-group'],
+      items: ['api/action-sheet'],
     },
     {
       type: 'category',
@@ -276,7 +276,7 @@ module.exports = {
     },
     {
       type: 'category',
-      label: 'Breadcrumb',
+      label: 'Breadcrumbs',
       collapsed: false,
       items: ['api/breadcrumb', 'api/breadcrumbs'],
     },
@@ -337,19 +337,19 @@ module.exports = {
     },
     {
       type: 'category',
-      label: 'Infinite Scroll',
+      label: 'Icons',
       collapsed: false,
-      items: ['api/infinite-scroll', 'api/infinite-scroll-content'],
+      items: ['api/icon'],
     },
     {
       type: 'category',
-      label: 'Icons',
+      label: 'Infinite Scroll',
       collapsed: false,
-      items: ['api/icon'],
+      items: ['api/infinite-scroll', 'api/infinite-scroll-content'],
     },
     {
       type: 'category',
-      label: 'Input',
+      label: 'Inputs',
       collapsed: false,
       items: ['api/input', 'api/input-password-toggle', 'api/input-otp', 'api/textarea'],
     },

diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
@@ -153,7 +153,7 @@ export default function Playground({
    * The major version of Ionic to use in the generated StackBlitz examples.
    * This will also load assets for StackBlitz from the specified version directory.
    */
-  version: number;
+  version: string;
 }) {
   if (!code || Object.keys(code).length === 0) {
     console.warn('No code usage examples provided for this Playground example.');