Merge branch 'main' into react-firstapp-content

Author: joesphchang

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="Accordion" href="api/accordion" img="/icons/feature-component-accordion-icon.png">
-    <p>Accordions provide collapsible sections in your content.</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="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>
@@ -49,8 +53,9 @@ Ionic apps are made of high-level building blocks called Components, which allow
 </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">
@@ -77,20 +82,23 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <p>The grid is a powerful mobile-first system for building custom layouts.</p>
 </DocsCard>
 
-<DocsCard header="Icon" href="api/icon" icon="/icons/component-icons-icon.png">
+<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" img="/icons/feature-component-item-icon.png">
-  <p>Items are an all-purpose UI container that can be used as part of a list.</p>
+  <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">
@@ -99,8 +107,8 @@ Ionic apps are made of high-level building blocks called Components, which allow
 
 <DocsCard header="Media" href="api/avatar" icon="/icons/component-media-icon.png">
   <p>
-    Media refers to a collection of Ionic's media-related components like ion-avatar, ion-img, ion-icon, and
-    ion-thumbnail.
+    A collection of media components, including avatars, icons, images, and thumbnails, designed to enhance visual
+    content.
   </p>
 </DocsCard>
 
@@ -112,14 +120,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/menu" icon="/icons/component-navigation-icon.png">
+<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>Input OTP component simplifies entering one-time passwords with a customizable, multi-box interface.</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>
@@ -132,6 +136,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="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="Refresher" href="api/refresher" img="/icons/feature-component-refresher-icon.png">
   <p>Refresher provides pull-to-refresh functionality on a content component.</p>
 </DocsCard>
@@ -161,7 +169,7 @@ 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">
@@ -172,7 +180,7 @@ Ionic apps are made of high-level building blocks called Components, which allow
   <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>
+<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>

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'],
     },

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.10",
+    "ionicons": "8.0.13",
     "rxjs": "^7.8.1",
     "tslib": "^2.5.0",
     "zone.js": "~0.15.0"

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

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@ionic/core": "^7.0.0",
-    "ionicons": "8.0.10"
+    "ionicons": "8.0.13"
   },
   "devDependencies": {
     "typescript": "^5.0.0",