diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..7c2aa2b28
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+src/components.d.ts
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 3d95d827a..8f7beab0f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -6,20 +6,18 @@ This document outlines the guidelines and processes for contributing to this pro
## Table of Contents
-- [Contributing to Ionicons](#contributing-to-ionicons)
- - [Table of Contents](#table-of-contents)
- - [Code of Conduct](#code-of-conduct)
- - [Getting Started](#getting-started)
- - [Prerequisites](#prerequisites)
- - [Environment Setup](#environment-setup)
- - [Development Workflow](#development-workflow)
- - [Branch Strategy](#branch-strategy)
- - [Component Modifications](#component-modifications)
- - [Testing Changes](#testing-changes)
- - [Code Style](#code-style)
- - [Building](#building)
- - [Submitting Issues](#submitting-issues)
- - [Submitting Pull Requests](#submitting-pull-requests)
+- [Code of Conduct](#code-of-conduct)
+- [Getting Started](#getting-started)
+ * [Prerequisites](#prerequisites)
+ * [Environment Setup](#environment-setup)
+- [Development Workflow](#development-workflow)
+ * [Branch Strategy](#branch-strategy)
+ * [Component Modifications](#component-modifications)
+ * [Testing](#testing)
+ * [Code Style](#code-style)
+ * [Building](#building)
+- [Submitting Issues](#submitting-issues)
+- [Submitting Pull Requests](#submitting-pull-requests)
## Code of Conduct
@@ -84,20 +82,67 @@ If you're modifying the `ion-icon` component:
1. Navigate to `src/components/` directory and open the `icon` component to modify
2. Make your changes to the component code
-3. Test your changes (see [Testing Changes](#testing-changes))
+3. Test your changes locally with `npm start`
+4. Run the full test suite: `npm run test.spec` for unit tests and `npm run test.e2e` for E2E tests
+5. All PRs that change component behavior must include tests covering the changes
-### Testing Changes
+### Testing
-To preview component changes:
+Tests are crucial for maintaining confidence in changes. All PRs that modify component behavior must include tests covering those changes.
-1. Run:
- ```bash
- npm start
- ```
- This will start a local version of the icon test with a test page
-
-2. Modify the test page in `index.html` as needed to test your changes
-3. If you are modifying icons, you can run `npm run build.files` to re-run the SVG optimization script to verify there are no changes after optimizing the SVG
+#### Local Development & Previewing
+
+To preview component changes during development:
+
+```bash
+npm start
+```
+
+This starts the dev server with live-reloading. The test landing page displays all available test pages.
+
+Test pages are organized in `src/components/icon/test/` with individual folders for each test scenario.
+
+#### Unit Tests
+
+Run Jest tests for component logic:
+
+```bash
+npm run test.spec
+```
+
+#### E2E Tests
+
+Run Playwright tests to generate visual regression snapshots and verify component behavior:
+
+```bash
+npm run test.e2e
+```
+
+View the HTML report after tests complete:
+
+```bash
+npx playwright show-report
+```
+
+> [!IMPORTANT]
+> All E2E test navigation URLs must include a trailing slash (e.g., `/icon/test/basic/` not `/icon/test/basic`). The trailing slash ensures proper directory routing, correct timing for script initialization, and consistent page loading across browsers.
+
+##### Updating Snapshots
+
+To update visual regression snapshots with new baselines:
+
+```bash
+npm run test.e2e -- --update-snapshots
+```
+
+Or for a specific test:
+
+```bash
+npm run test.e2e -- src/components/icon/test/basic/icon.e2e.ts --update-snapshots
+```
+
+> [!NOTE]
+> Updating snapshots locally updates your gitignored screenshot files for local testing. To update the official repository snapshots, run the "Update Reference Screenshots" GitHub action with your development branch selected.
### Code Style
@@ -148,4 +193,4 @@ When creating issues:
- Include relevant tests
- Make sure all tests pass: `npm test`
- Update documentation if needed
- - [Create a new pull request](https://github.com/ionic-team/ionicons/compare) with the `main` branch as the base.
\ No newline at end of file
+ - [Create a new pull request](https://github.com/ionic-team/ionicons/compare) with the `main` branch as the base.
diff --git a/package-lock.json b/package-lock.json
index f780fa9cb..2c0503773 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,10 +9,11 @@
"version": "8.0.13",
"license": "MIT",
"dependencies": {
- "@stencil/core": "^4.35.3"
+ "@stencil/core": "^4.43.5"
},
"devDependencies": {
- "@playwright/test": "^1.53.2",
+ "@axe-core/playwright": "^4.12.1",
+ "@playwright/test": "^1.61.1",
"@types/fs-extra": "^11.0.4",
"@types/jest": "^30.0.0",
"@types/node": "^22.15.3",
@@ -20,7 +21,7 @@
"fs-extra": "^11.3.0",
"jest": "^30.0.4",
"jest-cli": "^30.0.4",
- "jest-stencil-runner": "^0.0.8",
+ "jest-stencil-runner": "^0.0.20",
"npm-run-all2": "^8.0.4",
"prettier": "^3.6.2",
"puppeteer": "^24.12.0",
@@ -46,6 +47,19 @@
"node": ">=6.0.0"
}
},
+ "node_modules/@axe-core/playwright": {
+ "version": "4.12.1",
+ "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.12.1.tgz",
+ "integrity": "sha512-rMd7xriptqKpP+w5265i4Hdkv2X5kbu6uiBi/B2I7uf3hieRBM3qDCfaKPtxfiYb2mKXfF+yLODJwIx+Jv1GDw==",
+ "dev": true,
+ "license": "MPL-2.0",
+ "dependencies": {
+ "axe-core": "~4.12.1"
+ },
+ "peerDependencies": {
+ "playwright-core": ">= 1.0.0"
+ }
+ },
"node_modules/@babel/code-frame": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -1570,13 +1584,13 @@
}
},
"node_modules/@playwright/test": {
- "version": "1.53.2",
- "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.53.2.tgz",
- "integrity": "sha512-tEB2U5z74ebBeyfGNZ3Jfg29AnW+5HlWhvHtb/Mqco9pFdZU1ZLNdVb2UtB5CvmiilNr2ZfVH/qMmAROG/XTzw==",
+ "version": "1.61.1",
+ "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
+ "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
- "playwright": "1.53.2"
+ "playwright": "1.61.1"
},
"bin": {
"playwright": "cli.js"
@@ -1608,9 +1622,9 @@
}
},
"node_modules/@rollup/rollup-darwin-arm64": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz",
- "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz",
+ "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==",
"cpu": [
"arm64"
],
@@ -1621,9 +1635,9 @@
]
},
"node_modules/@rollup/rollup-darwin-x64": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz",
- "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz",
+ "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==",
"cpu": [
"x64"
],
@@ -1634,12 +1648,15 @@
]
},
"node_modules/@rollup/rollup-linux-arm64-gnu": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz",
- "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz",
+ "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==",
"cpu": [
"arm64"
],
+ "libc": [
+ "glibc"
+ ],
"license": "MIT",
"optional": true,
"os": [
@@ -1647,12 +1664,15 @@
]
},
"node_modules/@rollup/rollup-linux-arm64-musl": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz",
- "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz",
+ "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==",
"cpu": [
"arm64"
],
+ "libc": [
+ "musl"
+ ],
"license": "MIT",
"optional": true,
"os": [
@@ -1660,12 +1680,15 @@
]
},
"node_modules/@rollup/rollup-linux-x64-gnu": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz",
- "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz",
+ "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==",
"cpu": [
"x64"
],
+ "libc": [
+ "glibc"
+ ],
"license": "MIT",
"optional": true,
"os": [
@@ -1673,12 +1696,15 @@
]
},
"node_modules/@rollup/rollup-linux-x64-musl": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz",
- "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz",
+ "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==",
"cpu": [
"x64"
],
+ "libc": [
+ "musl"
+ ],
"license": "MIT",
"optional": true,
"os": [
@@ -1686,9 +1712,9 @@
]
},
"node_modules/@rollup/rollup-win32-arm64-msvc": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz",
- "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz",
+ "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==",
"cpu": [
"arm64"
],
@@ -1699,9 +1725,9 @@
]
},
"node_modules/@rollup/rollup-win32-x64-msvc": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz",
- "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz",
+ "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==",
"cpu": [
"x64"
],
@@ -1739,9 +1765,9 @@
}
},
"node_modules/@stencil/core": {
- "version": "4.35.3",
- "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.35.3.tgz",
- "integrity": "sha512-RH5/I+amV31QI8TMXhXkAkjzs2eod6Y07jkUYTl9kMB+X7c5wUpv95Y/2LtcAx0Rqdhh4SHbJiwpr0ApBZmv0g==",
+ "version": "4.43.5",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz",
+ "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==",
"license": "MIT",
"bin": {
"stencil": "bin/stencil"
@@ -1751,14 +1777,14 @@
"npm": ">=7.10.0"
},
"optionalDependencies": {
- "@rollup/rollup-darwin-arm64": "4.34.9",
- "@rollup/rollup-darwin-x64": "4.34.9",
- "@rollup/rollup-linux-arm64-gnu": "4.34.9",
- "@rollup/rollup-linux-arm64-musl": "4.34.9",
- "@rollup/rollup-linux-x64-gnu": "4.34.9",
- "@rollup/rollup-linux-x64-musl": "4.34.9",
- "@rollup/rollup-win32-arm64-msvc": "4.34.9",
- "@rollup/rollup-win32-x64-msvc": "4.34.9"
+ "@rollup/rollup-darwin-arm64": "4.44.0",
+ "@rollup/rollup-darwin-x64": "4.44.0",
+ "@rollup/rollup-linux-arm64-gnu": "4.44.0",
+ "@rollup/rollup-linux-arm64-musl": "4.44.0",
+ "@rollup/rollup-linux-x64-gnu": "4.44.0",
+ "@rollup/rollup-linux-x64-musl": "4.44.0",
+ "@rollup/rollup-win32-arm64-msvc": "4.44.0",
+ "@rollup/rollup-win32-x64-msvc": "4.44.0"
}
},
"node_modules/@tootallnate/quickjs-emscripten": {
@@ -2374,6 +2400,16 @@
"node": ">=4"
}
},
+ "node_modules/axe-core": {
+ "version": "4.12.1",
+ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.12.1.tgz",
+ "integrity": "sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==",
+ "dev": true,
+ "license": "MPL-2.0",
+ "engines": {
+ "node": ">=4"
+ }
+ },
"node_modules/b4a": {
"version": "1.6.7",
"resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz",
@@ -4641,9 +4677,9 @@
}
},
"node_modules/jest-stencil-runner": {
- "version": "0.0.8",
- "resolved": "https://registry.npmjs.org/jest-stencil-runner/-/jest-stencil-runner-0.0.8.tgz",
- "integrity": "sha512-1lArTozjdbnmHLhn899U9i2ZsfLRzO+VFUUO7pnxPH+DpEr39SlRp2G4Qsp8a9lrVeBDgJITFnzTIEgGemyCNQ==",
+ "version": "0.0.20",
+ "resolved": "https://registry.npmjs.org/jest-stencil-runner/-/jest-stencil-runner-0.0.20.tgz",
+ "integrity": "sha512-jK3tc8s6vUXLirEP8mb6moEAxLAdj2cSYjwtkl/R5wgdTsT9sEig2iWUUDdN4vvel7PAtFsS1Z8YIGc1KgOlng==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -5538,13 +5574,13 @@
}
},
"node_modules/playwright": {
- "version": "1.53.2",
- "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.53.2.tgz",
- "integrity": "sha512-6K/qQxVFuVQhRQhFsVZ9fGeatxirtrpPgxzBYWyZLEXJzqYwuL4fuNmfOfD5et1tJE4GScKyPNeLhZeRwuTU3A==",
+ "version": "1.61.1",
+ "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+ "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
- "playwright-core": "1.53.2"
+ "playwright-core": "1.61.1"
},
"bin": {
"playwright": "cli.js"
@@ -5557,9 +5593,9 @@
}
},
"node_modules/playwright-core": {
- "version": "1.53.2",
- "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.53.2.tgz",
- "integrity": "sha512-ox/OytMy+2w1jcYEYlOo1Hhp8hZkLCximMTUTMBXjGUA1KoFfiSZ+DU+3a739jsPY0yoKH2TFy9S2fsJas8yAw==",
+ "version": "1.61.1",
+ "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+ "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
"dev": true,
"license": "Apache-2.0",
"bin": {
@@ -6990,6 +7026,15 @@
"@jridgewell/trace-mapping": "^0.3.24"
}
},
+ "@axe-core/playwright": {
+ "version": "4.12.1",
+ "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.12.1.tgz",
+ "integrity": "sha512-rMd7xriptqKpP+w5265i4Hdkv2X5kbu6uiBi/B2I7uf3hieRBM3qDCfaKPtxfiYb2mKXfF+yLODJwIx+Jv1GDw==",
+ "dev": true,
+ "requires": {
+ "axe-core": "~4.12.1"
+ }
+ },
"@babel/code-frame": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -7939,12 +7984,12 @@
"dev": true
},
"@playwright/test": {
- "version": "1.53.2",
- "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.53.2.tgz",
- "integrity": "sha512-tEB2U5z74ebBeyfGNZ3Jfg29AnW+5HlWhvHtb/Mqco9pFdZU1ZLNdVb2UtB5CvmiilNr2ZfVH/qMmAROG/XTzw==",
+ "version": "1.61.1",
+ "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
+ "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
"dev": true,
"requires": {
- "playwright": "1.53.2"
+ "playwright": "1.61.1"
}
},
"@puppeteer/browsers": {
@@ -7963,51 +8008,51 @@
}
},
"@rollup/rollup-darwin-arm64": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz",
- "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz",
+ "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==",
"optional": true
},
"@rollup/rollup-darwin-x64": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz",
- "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz",
+ "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==",
"optional": true
},
"@rollup/rollup-linux-arm64-gnu": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz",
- "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz",
+ "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==",
"optional": true
},
"@rollup/rollup-linux-arm64-musl": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz",
- "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz",
+ "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==",
"optional": true
},
"@rollup/rollup-linux-x64-gnu": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz",
- "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz",
+ "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==",
"optional": true
},
"@rollup/rollup-linux-x64-musl": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz",
- "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz",
+ "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==",
"optional": true
},
"@rollup/rollup-win32-arm64-msvc": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz",
- "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz",
+ "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==",
"optional": true
},
"@rollup/rollup-win32-x64-msvc": {
- "version": "4.34.9",
- "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz",
- "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==",
+ "version": "4.44.0",
+ "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz",
+ "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==",
"optional": true
},
"@sinclair/typebox": {
@@ -8035,18 +8080,18 @@
}
},
"@stencil/core": {
- "version": "4.35.3",
- "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.35.3.tgz",
- "integrity": "sha512-RH5/I+amV31QI8TMXhXkAkjzs2eod6Y07jkUYTl9kMB+X7c5wUpv95Y/2LtcAx0Rqdhh4SHbJiwpr0ApBZmv0g==",
+ "version": "4.43.5",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz",
+ "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==",
"requires": {
- "@rollup/rollup-darwin-arm64": "4.34.9",
- "@rollup/rollup-darwin-x64": "4.34.9",
- "@rollup/rollup-linux-arm64-gnu": "4.34.9",
- "@rollup/rollup-linux-arm64-musl": "4.34.9",
- "@rollup/rollup-linux-x64-gnu": "4.34.9",
- "@rollup/rollup-linux-x64-musl": "4.34.9",
- "@rollup/rollup-win32-arm64-msvc": "4.34.9",
- "@rollup/rollup-win32-x64-msvc": "4.34.9"
+ "@rollup/rollup-darwin-arm64": "4.44.0",
+ "@rollup/rollup-darwin-x64": "4.44.0",
+ "@rollup/rollup-linux-arm64-gnu": "4.44.0",
+ "@rollup/rollup-linux-arm64-musl": "4.44.0",
+ "@rollup/rollup-linux-x64-gnu": "4.44.0",
+ "@rollup/rollup-linux-x64-musl": "4.44.0",
+ "@rollup/rollup-win32-arm64-msvc": "4.44.0",
+ "@rollup/rollup-win32-x64-msvc": "4.44.0"
}
},
"@tootallnate/quickjs-emscripten": {
@@ -8457,6 +8502,12 @@
"tslib": "^2.0.1"
}
},
+ "axe-core": {
+ "version": "4.12.1",
+ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.12.1.tgz",
+ "integrity": "sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==",
+ "dev": true
+ },
"b4a": {
"version": "1.6.7",
"resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz",
@@ -10007,9 +10058,9 @@
}
},
"jest-stencil-runner": {
- "version": "0.0.8",
- "resolved": "https://registry.npmjs.org/jest-stencil-runner/-/jest-stencil-runner-0.0.8.tgz",
- "integrity": "sha512-1lArTozjdbnmHLhn899U9i2ZsfLRzO+VFUUO7pnxPH+DpEr39SlRp2G4Qsp8a9lrVeBDgJITFnzTIEgGemyCNQ==",
+ "version": "0.0.20",
+ "resolved": "https://registry.npmjs.org/jest-stencil-runner/-/jest-stencil-runner-0.0.20.tgz",
+ "integrity": "sha512-jK3tc8s6vUXLirEP8mb6moEAxLAdj2cSYjwtkl/R5wgdTsT9sEig2iWUUDdN4vvel7PAtFsS1Z8YIGc1KgOlng==",
"dev": true,
"requires": {
"@jest/globals": "^30.0.2",
@@ -10617,13 +10668,13 @@
}
},
"playwright": {
- "version": "1.53.2",
- "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.53.2.tgz",
- "integrity": "sha512-6K/qQxVFuVQhRQhFsVZ9fGeatxirtrpPgxzBYWyZLEXJzqYwuL4fuNmfOfD5et1tJE4GScKyPNeLhZeRwuTU3A==",
+ "version": "1.61.1",
+ "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+ "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
"dev": true,
"requires": {
"fsevents": "2.3.2",
- "playwright-core": "1.53.2"
+ "playwright-core": "1.61.1"
},
"dependencies": {
"fsevents": {
@@ -10636,9 +10687,9 @@
}
},
"playwright-core": {
- "version": "1.53.2",
- "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.53.2.tgz",
- "integrity": "sha512-ox/OytMy+2w1jcYEYlOo1Hhp8hZkLCximMTUTMBXjGUA1KoFfiSZ+DU+3a739jsPY0yoKH2TFy9S2fsJas8yAw==",
+ "version": "1.61.1",
+ "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+ "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
"dev": true
},
"prettier": {
diff --git a/package.json b/package.json
index ceec1f999..4d6d9af67 100755
--- a/package.json
+++ b/package.json
@@ -43,26 +43,26 @@
}
},
"scripts": {
- "build": "run-s clean build.* prettier",
+ "build": "run-s clean build.*",
"build.files": "tsx scripts/build.ts",
"build.component": "stencil build",
"build.collection": "tsx scripts/collection-copy.ts",
"clean": "rimraf dist components icons www",
- "prettier": "npm run prettier.base -- --write",
- "prettier.base": "prettier --cache \"./({bin,scripts,src,test}/**/*.{ts,tsx,js,jsx})|bin/stencil|.github/(**/)?*.(yml|yaml)|*.js\"",
- "prettier.dry-run": "npm run prettier.base -- --list-different",
- "start": "run-s build.files start.stencil",
- "start.stencil": "stencil build --dev --watch --serve",
- "test": "run-s test.spec",
+ "lint": "npm run prettier -- --write",
+ "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx,scss}\"",
+ "prettier.dry-run": "npm run prettier -- --list-different",
+ "start": "run-s build.files && stencil build --dev --watch --serve",
+ "test": "run-s test.spec test.e2e",
"test.spec": "jest",
"test.e2e": "playwright test",
"test.e2e.install": "playwright install && playwright install-deps"
},
"dependencies": {
- "@stencil/core": "^4.35.3"
+ "@stencil/core": "^4.43.5"
},
"devDependencies": {
- "@playwright/test": "^1.53.2",
+ "@axe-core/playwright": "^4.12.1",
+ "@playwright/test": "^1.61.1",
"@types/fs-extra": "^11.0.4",
"@types/jest": "^30.0.0",
"@types/node": "^22.15.3",
@@ -70,7 +70,7 @@
"fs-extra": "^11.3.0",
"jest": "^30.0.4",
"jest-cli": "^30.0.4",
- "jest-stencil-runner": "^0.0.8",
+ "jest-stencil-runner": "^0.0.20",
"npm-run-all2": "^8.0.4",
"prettier": "^3.6.2",
"puppeteer": "^24.12.0",
diff --git a/scripts/build.ts b/scripts/build.ts
index 487dbaadc..7a772691e 100644
--- a/scripts/build.ts
+++ b/scripts/build.ts
@@ -98,9 +98,16 @@ async function copyToTesting(rootDir: string, distDir: string, srcSvgData: SvgDa
const testDir = path.join(rootDir, 'www');
const testBuildDir = path.join(testDir, 'build');
const testSvgDir = path.join(testBuildDir, 'svg');
+ const cheatsheetDir = path.join(testDir, 'icon', 'test', 'cheatsheet');
+ const version = (await fs.readJson(path.join(rootDir, 'package.json'))).version;
// Ensure all directories exist
- await Promise.all([fs.ensureDir(testDir), fs.ensureDir(testBuildDir), fs.ensureDir(testSvgDir)]);
+ await Promise.all([
+ fs.ensureDir(testDir),
+ fs.ensureDir(testBuildDir),
+ fs.ensureDir(testSvgDir),
+ fs.ensureDir(cheatsheetDir),
+ ]);
await Promise.all(
srcSvgData
@@ -111,9 +118,27 @@ async function copyToTesting(rootDir: string, distDir: string, srcSvgData: SvgDa
}),
);
- const distCheatsheetFilePath = path.join(distDir, 'cheatsheet.html');
- const testCheatsheetFilePath = path.join(testDir, 'cheatsheet.html');
- await fs.copyFile(distCheatsheetFilePath, testCheatsheetFilePath);
+ const wwwCheatsheetFilePath = path.join(cheatsheetDir, 'index.html');
+ const srcIndexFilePath = path.join(rootDir, 'src', 'components', 'icon', 'test', 'index.html');
+ const testIndexFilePath = path.join(testDir, 'index.html');
+
+ await fs.copyFile(srcIndexFilePath, testIndexFilePath);
+
+ // Generate the cheatsheet with placeholders filled in
+ const svgSymbolsContent = await fs.readFile(path.join(distDir, 'ionicons.symbols.svg'), 'utf8');
+ const c = srcSvgData.map(
+ (svgData) =>
+ `Ionicons {{version}} Cheatsheet
+
+
+
+ Ionicons {{version}} Cheatsheet
+
+
+
+ Ionicons {{version}} Cheatsheet
+ {{count}} icons
+
+ {{content}}
+
+
+
-
-
-Ionicons {{version}} Cheatsheet
-{{count}} icons
-
-{{content}}
-
diff --git a/src/components.d.ts b/src/components.d.ts
index 8cb296879..c818a5221 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -4,127 +4,143 @@
* This is an autogenerated file created by the Stencil compiler.
* It contains typing information for all components that exist in this project.
*/
-import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
export namespace Components {
- interface IonIcon {
- /**
- * The color to use for the background of the item.
- */
- color?: string;
- /**
- * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
- */
- flipRtl?: boolean;
- /**
- * A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property.
- */
- icon?: any;
- /**
- * Specifies which icon to use on `ios` mode.
- */
- ios?: string;
- /**
- * If enabled, ion-icon will be loaded lazily when it's visible in the viewport. Default, `false`.
- * @default false
- */
- lazy: boolean;
- /**
- * Specifies which icon to use on `md` mode.
- */
- md?: string;
- /**
- * The mode determines which platform styles to use.
- * @default getIonMode()
- */
- mode: string;
- /**
- * Specifies which icon to use from the built-in set of icons.
- */
- name?: string;
- /**
- * When set to `false`, SVG content that is HTTP fetched will not be checked if the response SVG content has any `
+
+
+ Icon - Accessibility
+
+ Icon with aria-label
+ Button with aria-label
+
+
+
+ Icon with aria-hidden
+
+
+