diff --git a/docs/api/gallery.md b/docs/api/gallery.md
new file mode 100644
index 00000000000..e248e1871bd
--- /dev/null
+++ b/docs/api/gallery.md
@@ -0,0 +1,72 @@
+---
+title: "ion-gallery"
+---
+
+import Props from '@ionic-internal/component-api/v9/gallery/props.md';
+import Events from '@ionic-internal/component-api/v9/gallery/events.md';
+import Methods from '@ionic-internal/component-api/v9/gallery/methods.md';
+import Parts from '@ionic-internal/component-api/v9/gallery/parts.md';
+import CustomProps from '@ionic-internal/component-api/v9/gallery/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v9/gallery/slots.md';
+
+
+ ion-gallery: Responsive Uniform and Masonry Gallery Layouts
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+The gallery is a container for displaying images, cards, and other content in a responsive CSS grid. It supports `uniform` and `masonry` layouts, configurable column counts (fixed or breakpoint-based), and masonry ordering with `sequential` or `best-fit`.
+
+## Basic Usage
+
+import Basic from '@site/static/usage/v9/gallery/basic/index.md';
+
+
+
+## Interfaces
+
+### GalleryBreakpointColumns
+
+```typescript
+interface GalleryBreakpointColumns {
+ xs?: string | number;
+ sm?: string | number;
+ md?: string | number;
+ lg?: string | number;
+ xl?: string | number;
+ xxl?: string | number;
+}
+```
+
+## Types
+
+### GalleryColumns
+
+```typescript
+type GalleryColumns = GalleryBreakpointColumns | string | number;
+```
+
+
+## Properties
+
+
+## Events
+
+
+## Methods
+
+
+## CSS Shadow Parts
+
+
+## CSS Custom Properties
+
+
+## Slots
+
diff --git a/docs/components.md b/docs/components.md
index 4d1b2cf28a2..4ea465990d4 100644
--- a/docs/components.md
+++ b/docs/components.md
@@ -74,8 +74,8 @@ Ionic apps are made of high-level building blocks called Components, which allow
Floating action buttons are circular buttons that perform a primary action on a screen.
-
- The grid is a powerful mobile-first system for building custom layouts.
+
+ A collection of layout components for building responsive grids and image layouts.
@@ -87,7 +87,7 @@ Ionic apps are made of high-level building blocks called Components, which allow
- Inputs provides a way for users to enter data in your app.
+ Inputs provide a way for users to enter data in your app.
diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js
index 8d9acb8c144..f1d8d197469 100644
--- a/plugins/docusaurus-plugin-ionic-component-api/index.js
+++ b/plugins/docusaurus-plugin-ionic-component-api/index.js
@@ -54,7 +54,7 @@ module.exports = function (context, options) {
await generateMarkdownForVersion(version, npmTag, context.i18n.currentLocale, false);
}
- let npmTag = 'latest';
+ let npmTag = '8.8.6-dev.11777569278.1613db2e';
if (currentVersion.banner === 'unreleased') {
npmTag = 'next';
} else if (currentVersion.path !== undefined) {
diff --git a/sidebars.js b/sidebars.js
index 661395b2463..93fd41dfb79 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -336,9 +336,9 @@ module.exports = {
},
{
type: 'category',
- label: 'Grid',
+ label: 'Grids',
collapsed: false,
- items: ['api/grid', 'api/col', 'api/row'],
+ items: ['api/grid', 'api/col', 'api/row', 'api/gallery'],
},
{
type: 'category',
diff --git a/static/code/stackblitz/v9/angular/package-lock.json b/static/code/stackblitz/v9/angular/package-lock.json
index 335c0192276..29617c53249 100644
--- a/static/code/stackblitz/v9/angular/package-lock.json
+++ b/static/code/stackblitz/v9/angular/package-lock.json
@@ -14,8 +14,8 @@
"@angular/platform-browser": "^20.0.0",
"@angular/platform-browser-dynamic": "^20.0.0",
"@angular/router": "^20.0.0",
- "@ionic/angular": "8.7.11",
- "@ionic/core": "8.7.11",
+ "@ionic/angular": "8.8.6-dev.11777569278.1613db2e",
+ "@ionic/core": "8.8.6-dev.11777569278.1613db2e",
"ionicons": "8.0.13",
"rxjs": "^7.8.1",
"tslib": "^2.5.0",
@@ -3217,12 +3217,12 @@
}
},
"node_modules/@ionic/angular": {
- "version": "8.7.11",
- "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.7.11.tgz",
+ "version": "8.8.6-dev.11777569278.1613db2e",
+ "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.8.6-dev.11777569278.1613db2e.tgz",
"integrity": "sha512-W2/mmrL/RTwlDrFyOmRukTz6x0DLl905XwVjIIMeGgu/IV3dbHbzHmFj6VwdhdxW13T9kLOrzLqPRri1KQtdCw==",
"license": "MIT",
"dependencies": {
- "@ionic/core": "8.7.11",
+ "@ionic/core": "8.8.6-dev.11777569278.1613db2e",
"ionicons": "^8.0.13",
"jsonc-parser": "^3.0.0",
"tslib": "^2.3.0"
@@ -3236,8 +3236,8 @@
}
},
"node_modules/@ionic/core": {
- "version": "8.7.11",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz",
+ "version": "8.8.6-dev.11777569278.1613db2e",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.6-dev.11777569278.1613db2e.tgz",
"integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==",
"license": "MIT",
"dependencies": {
diff --git a/static/code/stackblitz/v9/angular/package.json b/static/code/stackblitz/v9/angular/package.json
index ff788c8514e..d2e24e02fe9 100644
--- a/static/code/stackblitz/v9/angular/package.json
+++ b/static/code/stackblitz/v9/angular/package.json
@@ -15,8 +15,8 @@
"@angular/platform-browser": "^20.0.0",
"@angular/platform-browser-dynamic": "^20.0.0",
"@angular/router": "^20.0.0",
- "@ionic/angular": "8.7.11",
- "@ionic/core": "8.7.11",
+ "@ionic/angular": "8.8.6-dev.11777569278.1613db2e",
+ "@ionic/core": "8.8.6-dev.11777569278.1613db2e",
"ionicons": "8.0.13",
"rxjs": "^7.8.1",
"tslib": "^2.5.0",
diff --git a/static/code/stackblitz/v9/html/package-lock.json b/static/code/stackblitz/v9/html/package-lock.json
index d054b91cf01..399b7db96a3 100644
--- a/static/code/stackblitz/v9/html/package-lock.json
+++ b/static/code/stackblitz/v9/html/package-lock.json
@@ -6,7 +6,7 @@
"": {
"name": "html-starter",
"dependencies": {
- "@ionic/core": "8.7.11",
+ "@ionic/core": "8.8.6-dev.11777569278.1613db2e",
"ionicons": "8.0.13"
},
"devDependencies": {
@@ -458,8 +458,8 @@
}
},
"node_modules/@ionic/core": {
- "version": "8.7.11",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz",
+ "version": "8.8.6-dev.11777569278.1613db2e",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.6-dev.11777569278.1613db2e.tgz",
"integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==",
"license": "MIT",
"dependencies": {
diff --git a/static/code/stackblitz/v9/html/package.json b/static/code/stackblitz/v9/html/package.json
index 22a2047e413..f3fea5c0d9a 100644
--- a/static/code/stackblitz/v9/html/package.json
+++ b/static/code/stackblitz/v9/html/package.json
@@ -9,7 +9,7 @@
"start": "vite preview"
},
"dependencies": {
- "@ionic/core": "8.7.11",
+ "@ionic/core": "8.8.6-dev.11777569278.1613db2e",
"ionicons": "8.0.13"
},
"devDependencies": {
diff --git a/static/code/stackblitz/v9/react/package-lock.json b/static/code/stackblitz/v9/react/package-lock.json
index 5bdf823b03c..f9a7aae4a7a 100644
--- a/static/code/stackblitz/v9/react/package-lock.json
+++ b/static/code/stackblitz/v9/react/package-lock.json
@@ -8,8 +8,8 @@
"name": "vite-react-typescript",
"version": "0.1.0",
"dependencies": {
- "@ionic/react": "8.7.11",
- "@ionic/react-router": "8.7.11",
+ "@ionic/react": "8.8.6-dev.11777569278.1613db2e",
+ "@ionic/react-router": "8.8.6-dev.11777569278.1613db2e",
"@types/node": "^24.0.0",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
@@ -716,8 +716,8 @@
}
},
"node_modules/@ionic/core": {
- "version": "8.7.11",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz",
+ "version": "8.8.6-dev.11777569278.1613db2e",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.6-dev.11777569278.1613db2e.tgz",
"integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==",
"license": "MIT",
"dependencies": {
@@ -727,12 +727,12 @@
}
},
"node_modules/@ionic/react": {
- "version": "8.7.11",
- "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.11.tgz",
+ "version": "8.8.6-dev.11777569278.1613db2e",
+ "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.6-dev.11777569278.1613db2e.tgz",
"integrity": "sha512-h4j2SVRMgoxZBdr1bluKGrb0xNYEqEDcjHDuHsok669tKH3RnTMfD276zytfhFh3R8gIKWIqxb76NIsW/hfZcQ==",
"license": "MIT",
"dependencies": {
- "@ionic/core": "8.7.11",
+ "@ionic/core": "8.8.6-dev.11777569278.1613db2e",
"ionicons": "^8.0.13",
"tslib": "*"
},
@@ -742,12 +742,12 @@
}
},
"node_modules/@ionic/react-router": {
- "version": "8.7.11",
- "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.7.11.tgz",
+ "version": "8.8.6-dev.11777569278.1613db2e",
+ "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.8.6-dev.11777569278.1613db2e.tgz",
"integrity": "sha512-ZpJxx9WjprNngRaVEUvy1k5S22P0/BNfXNKpqqFci/JDJL5uPArLaevwXAuOzdIf+EknpG+34IIW6PBme5cPAQ==",
"license": "MIT",
"dependencies": {
- "@ionic/react": "8.7.11",
+ "@ionic/react": "8.8.6-dev.11777569278.1613db2e",
"tslib": "*"
},
"peerDependencies": {
diff --git a/static/code/stackblitz/v9/react/package.json b/static/code/stackblitz/v9/react/package.json
index 8b0deae5c16..008be6b69af 100644
--- a/static/code/stackblitz/v9/react/package.json
+++ b/static/code/stackblitz/v9/react/package.json
@@ -3,8 +3,8 @@
"version": "0.1.0",
"private": true,
"dependencies": {
- "@ionic/react": "8.7.11",
- "@ionic/react-router": "8.7.11",
+ "@ionic/react": "8.8.6-dev.11777569278.1613db2e",
+ "@ionic/react-router": "8.8.6-dev.11777569278.1613db2e",
"@types/node": "^24.0.0",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
diff --git a/static/code/stackblitz/v9/vue/package-lock.json b/static/code/stackblitz/v9/vue/package-lock.json
index ebf2a96fd89..1dda3eeda19 100644
--- a/static/code/stackblitz/v9/vue/package-lock.json
+++ b/static/code/stackblitz/v9/vue/package-lock.json
@@ -8,8 +8,8 @@
"name": "vite-vue-starter",
"version": "0.0.0",
"dependencies": {
- "@ionic/vue": "8.7.11",
- "@ionic/vue-router": "8.7.11",
+ "@ionic/vue": "8.8.6-dev.11777569278.1613db2e",
+ "@ionic/vue-router": "8.8.6-dev.11777569278.1613db2e",
"vue": "^3.2.25",
"vue-router": "4.6.3"
},
@@ -509,8 +509,8 @@
}
},
"node_modules/@ionic/core": {
- "version": "8.7.11",
- "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.11.tgz",
+ "version": "8.8.6-dev.11777569278.1613db2e",
+ "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.6-dev.11777569278.1613db2e.tgz",
"integrity": "sha512-9UX9IeEztWWXymi+xCUMEBnnY+TbaR8crZLOwFnxPUEq4FFWSUCSv5XeHHQBpgZjBO2MJuDGcNv0GCQumIjVcQ==",
"license": "MIT",
"dependencies": {
@@ -520,23 +520,23 @@
}
},
"node_modules/@ionic/vue": {
- "version": "8.7.11",
- "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.11.tgz",
+ "version": "8.8.6-dev.11777569278.1613db2e",
+ "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.6-dev.11777569278.1613db2e.tgz",
"integrity": "sha512-HDEcjhxWfimVQxvXfghrqlAWpXnJvcUDTIVE2Mvq8ul+s7gL/OZCpXTAODJOfFCBAGJ0o9QXyC7OPjyN4UbO8Q==",
"license": "MIT",
"dependencies": {
- "@ionic/core": "8.7.11",
+ "@ionic/core": "8.8.6-dev.11777569278.1613db2e",
"@stencil/vue-output-target": "0.10.7",
"ionicons": "^8.0.13"
}
},
"node_modules/@ionic/vue-router": {
- "version": "8.7.11",
- "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.7.11.tgz",
+ "version": "8.8.6-dev.11777569278.1613db2e",
+ "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.8.6-dev.11777569278.1613db2e.tgz",
"integrity": "sha512-6k/bWLORJucLIPYqcrXnSs3KEI69qaWo6V4bGAEOSkt9dISdTy65gafi4gtFFyV+n81LIU00WnajJYLadDG3Cg==",
"license": "MIT",
"dependencies": {
- "@ionic/vue": "8.7.11"
+ "@ionic/vue": "8.8.6-dev.11777569278.1613db2e"
}
},
"node_modules/@jridgewell/sourcemap-codec": {
diff --git a/static/code/stackblitz/v9/vue/package.json b/static/code/stackblitz/v9/vue/package.json
index db6efac6dda..8fe47ceb973 100644
--- a/static/code/stackblitz/v9/vue/package.json
+++ b/static/code/stackblitz/v9/vue/package.json
@@ -8,8 +8,8 @@
"preview": "vite preview"
},
"dependencies": {
- "@ionic/vue": "8.7.11",
- "@ionic/vue-router": "8.7.11",
+ "@ionic/vue": "8.8.6-dev.11777569278.1613db2e",
+ "@ionic/vue-router": "8.8.6-dev.11777569278.1613db2e",
"vue": "^3.2.25",
"vue-router": "4.6.3"
},
diff --git a/static/img/demos/gallery/01.png b/static/img/demos/gallery/01.png
new file mode 100644
index 00000000000..f3e49e2a22c
Binary files /dev/null and b/static/img/demos/gallery/01.png differ
diff --git a/static/img/demos/gallery/02.png b/static/img/demos/gallery/02.png
new file mode 100644
index 00000000000..1c82befeb86
Binary files /dev/null and b/static/img/demos/gallery/02.png differ
diff --git a/static/img/demos/gallery/03.png b/static/img/demos/gallery/03.png
new file mode 100644
index 00000000000..3f454de0a06
Binary files /dev/null and b/static/img/demos/gallery/03.png differ
diff --git a/static/img/demos/gallery/04.png b/static/img/demos/gallery/04.png
new file mode 100644
index 00000000000..d026972f7e1
Binary files /dev/null and b/static/img/demos/gallery/04.png differ
diff --git a/static/img/demos/gallery/05.png b/static/img/demos/gallery/05.png
new file mode 100644
index 00000000000..461e1ef0e94
Binary files /dev/null and b/static/img/demos/gallery/05.png differ
diff --git a/static/img/demos/gallery/06.png b/static/img/demos/gallery/06.png
new file mode 100644
index 00000000000..dfb2ac54caf
Binary files /dev/null and b/static/img/demos/gallery/06.png differ
diff --git a/static/img/demos/gallery/07.png b/static/img/demos/gallery/07.png
new file mode 100644
index 00000000000..a2e9d55ac6e
Binary files /dev/null and b/static/img/demos/gallery/07.png differ
diff --git a/static/img/demos/gallery/08.png b/static/img/demos/gallery/08.png
new file mode 100644
index 00000000000..ce617520d89
Binary files /dev/null and b/static/img/demos/gallery/08.png differ
diff --git a/static/img/demos/gallery/09.png b/static/img/demos/gallery/09.png
new file mode 100644
index 00000000000..5fa6ee4e75f
Binary files /dev/null and b/static/img/demos/gallery/09.png differ
diff --git a/static/img/demos/gallery/10.png b/static/img/demos/gallery/10.png
new file mode 100644
index 00000000000..fa28d4c1005
Binary files /dev/null and b/static/img/demos/gallery/10.png differ
diff --git a/static/img/demos/gallery/11.png b/static/img/demos/gallery/11.png
new file mode 100644
index 00000000000..8d2baefd257
Binary files /dev/null and b/static/img/demos/gallery/11.png differ
diff --git a/static/img/demos/gallery/12.png b/static/img/demos/gallery/12.png
new file mode 100644
index 00000000000..c20056d1579
Binary files /dev/null and b/static/img/demos/gallery/12.png differ
diff --git a/static/usage/v9/gallery/basic/angular/example_component_html.md b/static/usage/v9/gallery/basic/angular/example_component_html.md
new file mode 100644
index 00000000000..7e51f617d3f
--- /dev/null
+++ b/static/usage/v9/gallery/basic/angular/example_component_html.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Gallery
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+```
diff --git a/static/usage/v9/gallery/basic/angular/example_component_ts.md b/static/usage/v9/gallery/basic/angular/example_component_ts.md
new file mode 100644
index 00000000000..c73d7da46c8
--- /dev/null
+++ b/static/usage/v9/gallery/basic/angular/example_component_ts.md
@@ -0,0 +1,12 @@
+```ts
+import { Component } from '@angular/core';
+import { IonContent, IonGallery, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['example.component.css'],
+ imports: [IonContent, IonGallery, IonHeader, IonTitle, IonToolbar],
+})
+export class ExampleComponent {}
+```
diff --git a/static/usage/v9/gallery/basic/demo.html b/static/usage/v9/gallery/basic/demo.html
new file mode 100644
index 00000000000..271e6dd9736
--- /dev/null
+++ b/static/usage/v9/gallery/basic/demo.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+ Gallery
+
+
+
+
+
+
+
+
+
+
+
+
+ Gallery
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
diff --git a/static/usage/v9/gallery/basic/javascript.md b/static/usage/v9/gallery/basic/javascript.md
new file mode 100644
index 00000000000..7e51f617d3f
--- /dev/null
+++ b/static/usage/v9/gallery/basic/javascript.md
@@ -0,0 +1,23 @@
+```html
+
+
+ Gallery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v9/gallery/basic/react.md b/static/usage/v9/gallery/basic/react.md
new file mode 100644
index 00000000000..6a3b91dc416
--- /dev/null
+++ b/static/usage/v9/gallery/basic/react.md
@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import { IonContent, IonGallery, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+ return (
+ <>
+
+
+ Gallery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v9/gallery/basic/vue.md b/static/usage/v9/gallery/basic/vue.md
new file mode 100644
index 00000000000..839333dd605
--- /dev/null
+++ b/static/usage/v9/gallery/basic/vue.md
@@ -0,0 +1,29 @@
+```html
+
+
+
+ Gallery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```