docs(component): added missing components to components page

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)
 
 ---
 

docs/components.md

@@ -24,9 +24,13 @@ Ionic apps are made of high-level building blocks called Components, which allow
 <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,6 +40,10 @@ 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>
@@ -57,22 +65,22 @@ 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>
@@ -81,16 +89,22 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <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 +115,14 @@ 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="OTP Input" href="api/input-otp" icon="/icons/component-input-otp-icon.png">
+  <p>OTP inputs offer a simple way to enter one-time passwords using multiple boxes with automatic focus.</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,14 +135,10 @@ 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">
+<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="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>
-
 <DocsCard header="Reorder" href="api/reorder" icon="/icons/component-reorder-icon.png">
   <p>Reorder lets users drag and drop to reorder a list of items.</p>
 </DocsCard>
@@ -129,6 +147,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>
@@ -149,7 +171,11 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <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>

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.

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';

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",

src/components/global/Playground/stackblitz.utils.ts

@@ -54,20 +54,32 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
       options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html',
       'html/variables.css',
       'html/package.json',
+      'html/tsconfig.json',
+      'html/vite.config.ts',
     ],
     options.version
   );
 
+  const package_json = JSON.parse(defaultFiles[3]);
+
+  if (options?.dependencies) {
+    package_json.dependencies = {
+      ...package_json.dependencies,
+      ...options.dependencies,
+    };
+  }
+
   const indexHtml = 'index.html';
   const files = {
+    'package.json': JSON.stringify(package_json, null, 2),
     'index.ts': defaultFiles[0],
     [indexHtml]: defaultFiles[1],
     'theme/variables.css': defaultFiles[2],
+    'tsconfig.json': defaultFiles[4],
+    'vite.config.ts': defaultFiles[5],
     ...options?.files,
   };
 
-  const package_json = defaultFiles[3];
-
   files[indexHtml] = defaultFiles[1].replace(/{{ TEMPLATE }}/g, code).replace(
     '</head>',
     `
@@ -82,23 +94,11 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
 `
   );
 
-  let dependencies = {};
-  try {
-    dependencies = {
-      ...dependencies,
-      ...JSON.parse(package_json).dependencies,
-      ...options?.dependencies,
-    };
-  } catch (e) {
-    console.error('Failed to parse package.json contents', e);
-  }
-
   sdk.openProject({
-    template: 'typescript',
+    template: 'node',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
     files,
-    dependencies,
   });
 };
 

static/code/stackblitz/v7/angular/package.json

@@ -17,7 +17,7 @@
     "@angular/router": "^20.0.0",
     "@ionic/angular": "^7.0.0",
     "@ionic/core": "^7.0.0",
-    "ionicons": "8.0.9",
+    "ionicons": "8.0.10",
     "rxjs": "^7.8.1",
     "tslib": "^2.5.0",
     "zone.js": "~0.15.0"

static/code/stackblitz/v7/html/index.html

@@ -1,14 +1,19 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 
 <head>
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Ionic App</title>
 </head>
 
 <body>
   <ion-app>
     {{ TEMPLATE }}
   </ion-app>
+
+  <script type="module" src="./index.ts"></script>
 </body>
 
 </html>

static/code/stackblitz/v7/html/index.withContent.html

@@ -1,8 +1,11 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
 
 <head>
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Ionic App</title>
 </head>
 
 <body>
@@ -11,6 +14,8 @@
       {{ TEMPLATE }}
     </ion-content>
   </ion-app>
+
+  <script type="module" src="./index.ts"></script>
 </body>
 
 </html>

static/code/stackblitz/v7/html/package.json

@@ -1,6 +1,20 @@
 {
+  "name": "html-starter",
+  "private": true,
+  "type": "module",
+  "main": "index.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "start": "vite preview"
+  },
   "dependencies": {
     "@ionic/core": "^7.0.0",
-    "ionicons": "8.0.9"
+    "ionicons": "8.0.10"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "vite": "^7.0.0",
+    "vite-plugin-static-copy": "^3.1.0"
   }
 }

static/code/stackblitz/v7/html/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "esnext",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["esnext", "dom"],
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"]
+}