#3814 virtual properties documentation

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

cspell-wordlist.txt

@@ -1,82 +1,83 @@
-Appflow
-Codepen
-Firestore
-Genymotion
-Hygen
-Ionicon
-Ionicons
-Logcat
-Maskito
-Pluralsight
-Swiper
-Udemy
-Vetur
-Wistia
-WCAG
-
-actionsheet
-fabs
-datetime
-datetimes
-datetimepicker
-infinitescroll
-searchbar
-searchbars
-sidemenu
-textarea
-textareas
-
-appstore
-authed
-autogrow
-automations
-autoplay
-Callout
-comparewith
-composables
-engageable
-flexbox
-frontmatter
-fullscreen
-geolocation
-interactives
-isopen
-jank
-janky
-jarsigner
-jsdelivr
-keyframes
-keytool
-lifecycles
-localstorage
-mobileweb
-phablet
-playstore
-preconfigured
-preflighted
-proxying
-quickstart
-retargeted
-runtimes
-scroller
-subcomponent
-subcomponents
-swipeable
-templating
-transpiling
-treeshaking
-triaging
-typeahead
-unminified
-unsanitized
-viewports
-webapps
-webviews
-xlarge
-xsmall
-
-allowtransparency
-mozallowfullscreen
-msallowfullscreen
-oallowfullscreen
-webkitallowfullscreen
+Appflow
+Codepen
+Firestore
+Genymotion
+Hygen
+Ionicon
+Ionicons
+Logcat
+Maskito
+Pluralsight
+Swiper
+Udemy
+Vetur
+Wistia
+WCAG
+
+actionsheet
+fabs
+datetime
+datetimes
+datetimepicker
+infinitescroll
+searchbar
+searchbars
+sidemenu
+textarea
+textareas
+
+appstore
+authed
+autogrow
+automations
+autoplay
+Callout
+comparewith
+composables
+engageable
+flexbox
+frontmatter
+fullscreen
+geolocation
+interactives
+isopen
+jank
+janky
+jarsigner
+jsdelivr
+keyframes
+keytool
+lifecycles
+localstorage
+mobileweb
+phablet
+playstore
+preconfigured
+preflighted
+proxying
+quickstart
+retargeted
+runtimes
+scroller
+subcomponent
+subcomponents
+swipeable
+templating
+transpiling
+treeshaking
+triaging
+typeahead
+unminified
+unsanitized
+viewports
+webapps
+webviews
+xlarge
+xsmall
+
+allowtransparency
+mozallowfullscreen
+msallowfullscreen
+oallowfullscreen
+webkitallowfullscreen
+webnative

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>

docs/core-concepts/fundamentals.md

@@ -51,3 +51,19 @@ At the core, Ionic Framework is built using <a href="https://developer.mozilla.o
 Many Ionic components use [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) to inform developers of important state changes in the components. For example, an `ion-datetime` component will emit `ionChange` whenever the selected date has changed.
 
 Developers can use standard events such as `click` as they normally would. However, many events emitted within a component's [shadow root](../reference/glossary.md#shadow) will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in multiple `click` handlers executing even if the user only clicked once. As a result, developers should rely on Ionic's events to be properly informed of state changes on Ionic components. Ionic's events are prefixed with `ion` to avoid collisions with standard events. Each component's documentation page has a list of available events that developers can listen for in their applications.
+
+## Properties
+[Properties (`@Prop`)](https://stenciljs.com/docs/properties) are custom attributes exposed publically on an HTML element. They allow developers to pass data to a component to render or otherwise use. 
+
+### Virtual Properties
+In Ionic components, virutal properties are a special category of properties that are used to define inputs to a component without the reactivity that typically comes with `@Prop` decorated properties in Stencil.
+
+Unlike `@Prop` inputs:
+- Virtual properties do not trigger a re-render when updated.
+- They cannot be mutated to produce side effects in the component lifecycle.
+- They are not tracked for changes and do not participate in Stencil's reactive data flow.
+
+#### When to Use Virtual Properties
+Virtual properties are intended for use cases where you need to pass static or read-only data into a component, like configuration options or values that won't change during the component's lifecycle. They offer a lightweight alternative when you don't need Stencil's change detection or DOM updates.
+
+Because they are not reactive, updates to virtual properties after initial load will not affect the rendered output of the component.

docs/core-concepts/webview.md

@@ -42,7 +42,7 @@ import { Capacitor } from '@capacitor/core';
 Capacitor.convertFileSrc(filePath);
 ```
 
-For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md).
+For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](https://danielsogl.gitbook.io/awesome-cordova-plugins/ionic-webview).
 
 ### Implementations